/* assets/css/marca.css — la marca de anotado en tokens (MARCA.md).
   Fuente unica de colores, gradiente, tipografia, radios y sombras. Solo
   variables y la clase del logo: nada de layout. Las hojas de cada cara
   (publico.css hoy; app.css cuando el panel pase a la marca) se cargan
   DESPUES de esta y usan estos nombres, asi un cambio de marca se hace aca
   una sola vez. Los archivos del logo estan en assets/marca/. */

:root {
  /* --- 1. Paleta oficial (lamina de marca) -------------------------------- */
  --azul: #4F46E5;          /* Anotado Blue: principal, botones, enlaces, activo */
  --aqua: #22C7B8;          /* Anotado Aqua: confirmacion. Nunca domina, nunca texto */
  --navy: #172033;          /* Anotado Navy: texto y fondos oscuros (reemplaza al negro) */
  --gris: #64748B;          /* Anotado Gray: texto secundario, metadatos */
  --fondo: #F8FAFC;         /* Anotado Light: fondo de la plataforma */
  --blanco: #FFFFFF;        /* tarjetas, navegacion, modales */

  /* --- 2. Derivados de uso (no son colores nuevos de marca) ---------------- */
  --azul-fuerte: #4338CA;   /* hover/presionado del primario */
  --azul-suave: #EEF2FF;    /* fondos de seleccion y etiquetas azules */
  --aqua-texto: #0F766E;    /* el aqua da ~2,1:1 sobre blanco; para texto "Confirmado" */
  --aqua-suave: #E6FAF7;    /* fondo de etiqueta confirmada */
  --borde: #E2E8F0;         /* bordes de tarjeta y boton secundario */
  --gris-oscuro: #475569;   /* logo en version gris */
  --gris-claro: #94A3B8;    /* bajada del logo sobre fondo oscuro */
  --cl-oscuro: #5599E9;     /* ".cl" del logo sobre fondo oscuro */

  /* Estados (MARCA.md 5.2) */
  --amarillo: #92400E;      /* pendiente: texto */
  --amarillo-suave: #FEF3C7;
  --rojo: #B91C1C;          /* error: moderado, nunca protagonista */
  --rojo-suave: #FEE2E2;

  /* --- 3. Gradiente de marca: uso puntual (isotipo, portadas, destacados) -- */
  --gradiente: linear-gradient(135deg, #4F46E5 0%, #22C7B8 100%);

  /* --- 4. Tipografia ----------------------------------------------------------
     Manrope para toda la interfaz. Urbanist 800 SOLO para el nombre del logo
     ("anotado.cl"): es la letra de la lamina (a de un piso), no se usa en textos. */
  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-logo: "Urbanist", "Manrope", system-ui, sans-serif;
  --t-h1: 700 clamp(40px, 6vw, 56px)/1.1 var(--fuente);
  --t-h2: 700 clamp(28px, 4vw, 40px)/1.15 var(--fuente);
  --t-h3: 600 clamp(22px, 3vw, 28px)/1.2 var(--fuente);
  --t-body: 400 16px/1.55 var(--fuente);
  --t-small: 500 14px/1.5 var(--fuente);
  --t-micro: 400 12px/1.4 var(--fuente);

  /* --- 5. Forma -------------------------------------------------------------- */
  --radio: 10px;            /* botones e inputs */
  --radio-tarjeta: 16px;    /* tarjetas */
  --radio-grande: 20px;     /* cajas destacadas (ingreso, confirmacion) */
  /* Elevacion en capas: una sombra corta que asienta + una larga y muy suave
     que da aire. Se ve "flotando" sin la sombra fuerte que prohibe MARCA.md 8. */
  --sombra: 0 1px 2px rgba(23, 32, 51, .04), 0 1px 3px rgba(23, 32, 51, .06);
  --sombra-2: 0 1px 2px rgba(23, 32, 51, .04), 0 4px 12px -2px rgba(23, 32, 51, .08);
  --sombra-3: 0 2px 4px rgba(23, 32, 51, .04), 0 12px 32px -8px rgba(23, 32, 51, .14);
  --sombra-azul: 0 1px 2px rgba(79, 70, 229, .25), 0 4px 14px -4px rgba(79, 70, 229, .45);
  /* Foco: anillo suave del azul (no el contorno duro del navegador). */
  --anillo: 0 0 0 4px rgba(79, 70, 229, .18);
  --curva: cubic-bezier(.2, .8, .2, 1);  /* sale rapido y se asienta: se siente "listo" */
  --transicion: 180ms var(--curva);     /* microinteracciones 150-300 ms */

  color-scheme: light;
  accent-color: var(--azul);            /* casillas, radios y rangos nativos en azul */
  -webkit-tap-highlight-color: transparent;
}

/* --- 6. Base moderna compartida (panel y paginas publicas) -------------------
   Todo es mejora progresiva: el navegador que no lo entiende lo ignora y la
   pagina queda igual que antes. */

/* Transicion suave entre paginas (View Transitions entre documentos). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--curva); }

::selection { background: rgba(79, 70, 229, .18); }

/* Titulos sin palabras huerfanas; parrafos con cortes mas parejos. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Horas y montos alineados en columna (cifras de igual ancho). */
table, time, .chip, .c-estado, .c-hora, .c-dia, .c-opcion-precio, .c-resumen { font-variant-numeric: tabular-nums; }

/* Anillo de foco solo con teclado: el mouse no lo ve, quien tabula si. */
:where(a, button, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 8px; }

/* <details> que se abre deslizando (Chrome 131+; el resto abre de golpe). */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--curva), content-visibility 240ms allow-discrete; }
details[open]::details-content { block-size: auto; }
summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  @view-transition { navigation: none; }
}

/* Logo en HTML (ano_logo_html): isotipo SVG + nombre en Urbanist. Proporciones
   de la lamina: el nombre mide ~0,63 del alto del isotipo; la bajada ~0,21. */
.logo { display: inline-flex; align-items: center; gap: .45em; color: var(--navy); text-decoration: none; line-height: 1; }
.logo-iso { height: 1.6em; width: auto; flex: none; }
.logo-nombre { font: 800 1em/1 var(--fuente-logo); letter-spacing: 0; }
.logo-nombre span { color: var(--azul); }
.logo-oscuro { color: var(--blanco); }
.logo-oscuro .logo-nombre span { color: var(--cl-oscuro); }