/* Sistema de armonía del portal (Rodrigo, 22 oct 2026: «que todo tenga armonía global y completa»).
   Se carga PRIMERO en index.html: aquí viven las medidas; las demás hojas las usan con var(--…).
   Lo cuida pruebas/armonia.mjs (auditoría) y el agente .claude/agents/revisor-armonia.md. Guía: docs/sistema-diseno.md.
   Regla: ningún valor suelto. Si una pieza necesita algo que no está aquí, se habla antes de inventarlo. */

:root{
  /* ---------- letra: 7 tamaños ---------- */
  --t-1:11px;   /* etiquetas mínimas: insignias, «NUEVO», nombres bajo los iconos de la barra */
  --t-2:12px;   /* datos chicos: fecha, lugar, pie de foto, ayuda bajo un campo */
  --t-3:14px;   /* texto secundario: descripciones de tarjeta, listas, pestañas */
  --t-4:16px;   /* texto de lectura y campos (16 px: en iPhone no hace zoom al escribir) */
  --t-5:18px;   /* destacado: botones grandes, nombre de un equipo, cifra de una fila */
  --t-6:22px;   /* subtítulo de sección, título de hoja */
  --t-7:28px;   /* título de pantalla */
  /* de 30 px para arriba son cifras y títulos de exhibición (portada, tacómetro, km): van con clamp() y no cuentan como tamaño de texto */
  --t-linea:1.45;        /* interlineado de lectura */
  --t-linea-titulo:1.15; /* interlineado de títulos */

  /* ---------- espacios: múltiplos de 4 (los cinco primeros son los de pulido.css) ---------- */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px; --esp-7:48px; --esp-8:64px;

  /* ---------- radios: 3 + píldora ---------- */
  --radio-1:8px;   /* chico: campos, chips, botones chicos */
  --radio-2:14px;  /* mediano: tarjetas, botones, cajas */
  --radio-3:22px;  /* grande: hojas, diálogos, tarjetas de portada */
  --radio-pildora:999px;

  /* ---------- sombras: 3 (las de color —resplandores del modo— se quedan en su pieza) ---------- */
  --sombra-1:0 1px 2px rgba(0,0,0,.28);                                  /* apenas: botones, chips */
  --sombra-2:0 10px 28px -10px rgba(0,0,0,.55);                          /* tarjeta que flota, menús */
  --sombra-3:0 28px 64px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04); /* hojas y diálogos */

  /* ---------- movimiento: 3 duraciones y 3 curvas ---------- */
  --dur-1:120ms;  /* respuesta: tocar, pasar el mouse, cambiar de color */
  --dur-2:220ms;  /* cambio: pestañas, menús, algo que se cierra */
  --dur-3:320ms;  /* llegada: hojas, diálogos, contenido que entra */
  --curva-entra:cubic-bezier(.22,1,.36,1);  /* arranca rápido y asienta: todo lo que aparece o responde */
  --curva-sale:cubic-bezier(.4,0,1,1);      /* acelera al irse: lo que se cierra */
  --curva-resorte:cubic-bezier(.34,1.3,.5,1); /* con un rebote chico: la píldora de la barra, una palomita */
}
@supports (transition-timing-function:linear(0,1)){
  :root{--curva-resorte:linear(0,.046,.159,.307,.465,.618,.752,.863,.95,1.012,1.052,1.074,1.083,1.082,1.074,1.062,1.049,1.036,1.024,1.014,1.006,1,.997,.994,.993,.993,.994,.994,.996,.997,.998,.999,.999,1)}
}

/* letra de botones y campos que no dicen la suya: el navegador les pone 13.33 px (fuera de la escala).
   :where() = prioridad cero; cualquier regla de una pieza manda sobre esto. */
:where(button){font-size:var(--t-3)}
:where(input,select,textarea){font-size:var(--t-4)}

/* ================= patrones de comportamiento ================= */

/* 1. Nada brinca de lado: el hueco de la barra de desplazamiento siempre está reservado (computadora) */
html{scrollbar-gutter:stable}

/* 2. Campos que crecen solos al escribir: el campo se abre hacia abajo, línea por línea, con la misma curva de todo
      (lo mide sistema.js; respeta el alto con el que nació). Tope: 45 % de la pantalla; después aparece la barra dentro
      del campo y la raya de escritura sigue a la vista. :where() = prioridad cero, cualquier hoja puede ajustarlo. */
:where(textarea:not([data-fijo])){resize:none;max-height:45svh;
  transition:height var(--dur-2) var(--curva-entra),border-color var(--dur-1) var(--curva-entra),box-shadow var(--dur-2) var(--curva-entra)}

/* 3. El teclado: al enfocar, el navegador sube el campo (con este margen); la página no se mueve sola */
/* html.sis-teclado trae --sis-teclado (alto del teclado); el acomodo del campo lo hace el navegador */
:where(input,textarea,select,[contenteditable]){scroll-margin-block:var(--esp-7) calc(var(--esp-8) + env(safe-area-inset-bottom,0px))}


/* 4. Contenido que entra sin empujar lo de arriba: se ancla lo que ves y lo nuevo llega con opacidad y un desliz corto */
main.pg,dialog,.ng-hoja{overflow-anchor:auto}
.sis-entra{animation:sisEntra var(--dur-3) var(--curva-entra) both}
@keyframes sisEntra{from{opacity:0;transform:translate3d(0,var(--esp-2),0)}to{opacity:1;transform:none}}

/* 5. Hojas y diálogos: todos abren con la misma curva y duración, y se van con la curva de salida */
dialog{transition:opacity var(--dur-2) var(--curva-sale),transform var(--dur-2) var(--curva-sale),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete}
dialog[open]{transition-duration:var(--dur-3);transition-timing-function:var(--curva-entra)}
dialog::backdrop{transition:opacity var(--dur-3) var(--curva-entra)}

/* 6. «Reducir movimiento» del sistema: todo aparece en su lugar, sin moverse.
      El :not(#_) sube la prioridad por encima de cualquier hoja que se cargue después (también las que usan !important). */
@media (prefers-reduced-motion:reduce){
  :root:not(#_):not(#_) *,:root:not(#_):not(#_) *::before,:root:not(#_):not(#_) *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}