/* MonoSpatial · estilo web compartido: el de la app Monolook con la acción principal en rojo.
 *
 * Fondo carbón, tarjetas gris oscuro con esquinas de 12 px, títulos en Outfit Regular con mayúscula inicial,
 * botón principal ancho y redondeado (en Monolook, ámbar; aquí, rojo #E5533D con texto oscuro).
 * Criterio, contraste y equivalentes en SwiftUI: docs/ux/identidad_monoespacial.md. Muestra: docs/ux/marca/muestra.html.
 *
 * Uso:  <link rel="stylesheet" href="../estilo/monolook.css">   (ruta relativa: la web se publica en una carpeta)
 * Fuente: Outfit variable (SIL OFL 1.1, fuentes/OFL.txt). Logotipo de noware: noware.svg (oficial, sin tocar).
 */

@font-face {
  font-family: "Outfit";
  src: url("fuentes/Outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Base (app Monolook) */
  --carbon: #1F1F1E;
  --carbon-2: #2D2F29;
  --tarjeta: #2B2C29;
  --tarjeta-2: #363733;
  --linea: #3B3C38;
  --texto: #EFEEEA;
  --texto-suave: #A9A8A2;
  --texto-tenue: #7D7C77;
  --tinta: #262626;
  /* Azules de Monolook */
  --azul-marino: #12306E;
  --azul-profundo: #154685;
  --azul: #6686E1;
  --azul-claro: #A0B4EC;
  /* MonoSpatial */
  --rojo: #E5533D;
  --rojo-claro: #FF7A5C;
  --rojo-oscuro: #B8361F;
  --sobre-rojo: #141413;
  /* Estados */
  --ok: #6EE0A8;
  --aviso: #F2C94C;
  --error: #FF8F8F;
  --ok-fondo: color-mix(in srgb, var(--ok) 14%, var(--tarjeta));
  --error-fondo: color-mix(in srgb, var(--error) 14%, var(--tarjeta));
  /* Forma */
  --radio: 12px;
  --radio-grande: 20px;
  --alto-boton: 52px;
  --hueco: 16px;
  --fuente: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--carbon); }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--texto);
  font: 400 16px/1.45 var(--fuente);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--azul-claro); text-underline-offset: 3px; }
code, pre, kbd { font-family: var(--mono); }
::selection { background: color-mix(in srgb, var(--rojo) 45%, transparent); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* --- Logotipo: «MonoSpatial» y debajo «by» con el logotipo oficial de noware ------------------------------
 *   <a class="marca" href="./"><span class="marca__nombre">MonoSpatial</span>
 *     <span class="marca__by">by <img src="../estilo/noware.svg" alt="noware"></span></a>
 * El tamaño es el font-size de .marca (cuerpo de «MonoSpatial»); el resto va en proporción, como en Monolook. */
.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 28px;
  line-height: 1;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.marca__nombre { font-weight: 400; letter-spacing: 0; }
.marca__by {
  font-size: .23em;            /* «by» */
  font-weight: 400;
  margin-top: 1.04em;          /* de la línea base de «MonoSpatial» a noware: .37 del cuerpo */
  line-height: 1;
}
.marca__by img {
  height: 1.326em;             /* noware: .305 del cuerpo de «MonoSpatial» */
  width: auto;
  margin-left: .78em;          /* .18 del cuerpo */
  vertical-align: -.33em;      /* la línea base de «by» cae al 75 % del alto de noware */
}
.marca--app { align-items: flex-end; }   /* en la cabecera de la app, «by noware» va alineado a la derecha */
.marca--grande { font-size: clamp(40px, 9vw, 72px); }
.marca--tinta { color: var(--tinta); }

/* --- Barra superior: logotipo a la izquierda, idioma y ayuda a la derecha ---------------------------------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hueco);
  padding: 16px 0 8px;
}
.barra__acciones { display: flex; align-items: center; gap: 10px; }
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--texto-suave);
  border-radius: 999px;
  background: transparent;
  color: var(--texto);
  font: 600 12px/1 var(--fuente);
  text-decoration: none;
}
.boton-icono--redondo { width: 32px; padding: 0; font-size: 15px; }
.boton-icono svg { width: 15px; height: 15px; }

/* --- Textos ----------------------------------------------------------------------------------------------- */
.titulo {
  margin: 12px 0 4px;
  font-weight: 400;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.subtitulo { margin: 0 0 16px; color: var(--texto-suave); font-size: 14px; }
.antetitulo { margin: 0; color: var(--texto-suave); font-size: 13px; font-weight: 500; }
.seccion { margin: 24px 0 8px; font-size: 17px; font-weight: 600; }
.nota { color: var(--texto-tenue); font-size: 13px; }

/* --- Tarjetas --------------------------------------------------------------------------------------------- */
.tarjeta {
  display: block;
  margin: 0 0 12px;
  background: var(--tarjeta);
  border-radius: var(--radio);
  overflow: hidden;
  color: var(--texto);
  text-decoration: none;
}
a.tarjeta:hover, a.tarjeta:focus-visible { background: var(--tarjeta-2); }
.tarjeta__imagen {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  background: linear-gradient(160deg, var(--azul-profundo), var(--azul-marino) 60%, #0c1f4a);
}
.tarjeta__cuerpo { padding: 14px 16px 16px; }
.tarjeta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}
a.tarjeta .tarjeta__titulo::after { content: "→"; font-weight: 400; font-size: 20px; line-height: 1; }
.tarjeta__texto { margin: 0; color: var(--texto-suave); font-size: 13px; }
.tarjeta--ok { background: var(--ok-fondo); }
.tarjeta--error { background: var(--error-fondo); }

/* --- Botones ---------------------------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alto-boton);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--texto);
  font: 600 16px/1.2 var(--fuente);
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--tarjeta-2); }
.boton--principal { background: var(--rojo); color: var(--sobre-rojo); }
.boton--principal:hover { background: var(--rojo-claro); }
.boton--principal:active { background: var(--rojo-oscuro); color: var(--texto); }
.boton--ancho { display: flex; width: 100%; }
.boton--borde { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .45; cursor: default; }

/* --- Campos y tablas ------------------------------------------------------------------------------------- */
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.campo {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--texto);
  font: 400 16px var(--fuente);
}
.campo::placeholder { color: var(--texto-tenue); }
.tabla { width: 100%; border-collapse: collapse; background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; }
.tabla td, .tabla th { padding: 9px 14px; border-top: 1px solid var(--linea); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.tabla tr:first-child td, .tabla tr:first-child th { border-top: 0; }
.tabla th { color: var(--texto-suave); font-size: 13px; font-weight: 500; }
.si { color: var(--ok); }
.no { color: var(--error); }

/* --- Página ----------------------------------------------------------------------------------------------- */
.pagina { max-width: 560px; margin: 0 auto; padding: 0 16px 48px; padding-top: env(safe-area-inset-top); }
.pagina--ancha { max-width: 920px; }

/* Arcos de luz de las piezas de App Store (rojo abajo a la izquierda, azul arriba a la derecha). Decorativos:
 * <body class="arcos"> en portadas; no en páginas de trabajo. */
.arcos { min-height: 100vh; isolation: isolate; }
.arcos::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("arcos.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.arcos > * { position: relative; }