/* ===========================================================================
   Pórtico · la app (demo del 30 de septiembre de 2026) — hoja de estilo de portico-design.

   LA REGLA DEL MATERIAL (decidida aquí, dentro del permiso de diseño de jagvar):
   La app no es de vidrio: es de tecali, la piedra translúcida de Puebla. Mate, deja pasar la
   luz y la sombra de lo que tiene detrás, nunca brilla. Por eso:
   1. La transparencia tiene oficio: sólo la llevan las superficies que flotan sobre algo (la barra
      de arriba, la barra de pestañas, las hojas que suben y las tarjetas). Cuanto más cerca de ti
      flota una superficie, más opaca es. Ningún objeto existe sólo para verse translúcido.
   2. Sin reflejos, sin bordes que brillan, sin halos, sin neón, sin orbes, sin degradados de color.
   3. El fondo vive, pero no tiene matiz: es luz y sombra de arcos (un pórtico a media tarde para
      quien vive en la casa; la lámpara de la caseta de noche para el guardia) que se mueve despacio.
   4. El color con matiz es un mensaje. La marca es petróleo (acción principal, pestaña elegida, niebla de las
      superficies). La baya marca a la persona que decide, y nada más. Verde, azul, amarillo, rojo y gris
      aparecen sólo cuando la puerta decide, siempre con su forma o su palabra (nunca sólo el color).
   5. Todo texto sobre una superficie translúcida se mide contra lo más claro (u oscuro) que puede
      pasar detrás; la opacidad mínima de cada material sale de esa cuenta (≥ 4.5:1 en texto chico).
   6. En WebKit sólo se anima transform y opacity. Los filtros quedan quietos; el desenfoque vive en
      la barra y las pestañas. Las hojas que suben son lo más cercano: van sólidas (nada se trasluce en ellas).
   Hereda de jagvar: Hanken Grotesk (voz) y Chivo Mono (datos), grafito, plata y blanco, el arco.
   =========================================================================== */

@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/hankengrotesk-latin-normal-100-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/hankengrotesk-latin-ext-normal-100-900.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/chivomono-latin-normal-100-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chivo Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/chivomono-latin-ext-normal-100-900.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Fichas (de jagvar / sistema.css del 29 sep) ------------------------------ */
:root {
  --g0: #0b0c0e; --g1: #121316; --g2: #1a1b1f; --g3: #24262b; --g4: #34373d; --g5: #4a4e56;
  --s0: #7d828b; --s1: #a9adb5; --s2: #cfd2d7; --s3: #e6e7ea; --w: #f6f6f7;
  /* LA PALETA (30 sep, 01:50; Jorge: «lo recomendado para esta aplicación según estudios… que resalte, no naranja»).
     Marca = petróleo (azul verdoso profundo): confianza y calma sin chocar con el azul ni el verde de la puerta.
     Persona = baya: la única marca de «decide una persona». Razones y fuentes: /kit/ «Por qué estos colores». */
  --marca: #235761; --marca-luz: #72bec9;
  --dia-base: #d1dee0; --dia-luz: #f9fcfc; --dia-tinta: #112227; --dia-texto: #3f535a; --dia-etiqueta: #4f6269; --dia-tenue: #72858b;
  --noche-base: #0a1215; --noche-luz: #26383b; --noche-capa: #142024; --noche-tinta: #f1f7f8; --noche-texto: #bccdd1; --noche-etiqueta: #9db1b6; --noche-tenue: #7a8d92;
  --persona: #9e2e79; --persona-luz: #df90c5;
  /* El semáforo de la puerta. Texto oscuro sobre verde, azul y amarillo; blanco sobre rojo y gris. */
  --verde: #2fbf71; --azul: #4ea1ff; --amarillo: #f5c518; --rojo: #c8322f; --gris: #4a4e56;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --suave: cubic-bezier(.2,.7,.2,1); --resorte: cubic-bezier(.3,1.35,.5,1); --sale: cubic-bezier(.4,0,.9,.4);
  --d-1: .18s; --d-2: .32s; --d-3: .55s;
  --ancho-app: 440px; --orilla: 16px;
  --r-tarjeta: 24px; --r-fila: 16px; --r-boton: 999px;
  --alto-barra: 58px; --alto-pestanas: 68px;
  --arriba: env(safe-area-inset-top, 0px); --abajo: env(safe-area-inset-bottom, 0px);
}

/* ---- Los dos tiempos del material ----------------------------------------------
   Día (casa, Consejo, visita): tecali claro sobre la luz y la sombra de los arcos.
   Noche (caseta): tecali ahumado bajo la lámpara. Cada tiempo se define con siete colores; todo lo demás
   (líneas, sombras, halos, capas) se mezcla de ellos. La opacidad de cada capa sale de la cuenta de contraste
   contra lo más claro/oscuro que puede pasar detrás (regla 5). */
.app, [data-tema="dia"] {
  --base: var(--dia-base); --luz: var(--dia-luz); --tinta: var(--dia-tinta); --texto: var(--dia-texto);
  --etiqueta: var(--dia-etiqueta); --tenue: var(--dia-tenue); --acento: var(--persona);
  --luz-a: 1;
  --tecali: color-mix(in srgb, var(--luz) 70%, transparent); --tecali-2: color-mix(in srgb, var(--luz) 90%, transparent);
  --tecali-hundido: color-mix(in srgb, var(--tinta) 5%, transparent);
  --barra-mat: color-mix(in srgb, var(--luz) 80%, transparent); --hoja-mat: var(--luz);
  --linea: color-mix(in srgb, var(--tinta) 9%, transparent); --linea-2: color-mix(in srgb, var(--tinta) 16%, transparent);
  --canto: rgba(255,255,255,.8);
  --sombra: 0 1px 0 var(--canto) inset, 0 22px 44px -30px color-mix(in srgb, var(--tinta) 40%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--tinta) 14%, transparent);
  --sombra-alta: 0 1px 0 var(--canto) inset, 0 34px 70px -34px color-mix(in srgb, var(--tinta) 55%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--tinta) 20%, transparent);
  --primario-bg: var(--marca); --primario-fg: #ffffff; --secundario-bg: color-mix(in srgb, var(--tinta) 6%, transparent);
  --activo: var(--marca);
  --halo-persona: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
  --indicador: color-mix(in srgb, var(--marca) 13%, transparent);
  color-scheme: light;
}
[data-tema="noche"] {
  --base: var(--noche-base); --luz: var(--noche-luz); --tinta: var(--noche-tinta); --texto: var(--noche-texto);
  --etiqueta: var(--noche-etiqueta); --tenue: var(--noche-tenue); --acento: var(--persona-luz);
  --luz-a: .9;
  --tecali: color-mix(in srgb, var(--noche-capa) 74%, transparent); --tecali-2: color-mix(in srgb, var(--noche-capa) 92%, transparent);
  --tecali-hundido: rgba(255,255,255,.055);
  --barra-mat: color-mix(in srgb, var(--noche-base) 80%, transparent); --hoja-mat: var(--noche-capa);
  --linea: rgba(255,255,255,.08); --linea-2: rgba(255,255,255,.15); --canto: rgba(255,255,255,.06);
  --sombra: 0 1px 0 var(--canto) inset, 0 22px 44px -28px rgba(0,0,0,.8);
  --sombra-alta: 0 1px 0 var(--canto) inset, 0 34px 70px -30px rgba(0,0,0,.9);
  --primario-bg: var(--noche-tinta); --primario-fg: var(--noche-base); --secundario-bg: rgba(255,255,255,.08);
  --halo-persona: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
  --indicador: color-mix(in srgb, var(--marca-luz) 18%, transparent); --activo: var(--noche-tinta);
  color-scheme: dark;
}

/* ---- Base (sólo dentro de la app: el cascarón de la demo es de portico-demo) ---- */
:where(.app) *, :where(.app) *::before, :where(.app) *::after { box-sizing: border-box; }
:where(.app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
:where(.app) img, :where(.app) svg { display: block; }
:where(.app) :is(p, h1, h2, h3, h4) { margin: 0; }
.app .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app :focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 10px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- La app ---------------------------------------------------------------- */
.app {
  position: relative; min-height: 100%; color: var(--tinta); isolation: isolate;
  width: 100%; max-width: var(--ancho-app); margin-inline: auto;
  font-family: var(--sans); font-size: 16px; line-height: 1.45; font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}

/* El fondo vivo: luz y sombra de un pórtico. Fijo, detrás de todo, sin matiz. */
.fondo { position: fixed; inset: 0; z-index: -1; background: var(--base); overflow: hidden; pointer-events: none; }
.fondo .arcos { /* la luz ya viene desenfocada en la imagen: nada se desenfoca en vivo */
  position: absolute; left: -12%; top: -8%; width: 124%; height: 116%; opacity: var(--luz-a);
  background: url('/assets/luz-dia.webp') center / cover no-repeat; transform: translate3d(var(--luz-x, 0%), var(--luz-y, 0%), 0);
}
[data-tema="noche"] .fondo .arcos { background-image: url('/assets/luz-noche.webp'); }
.fondo .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, var(--velo-pie, rgba(0,0,0,0)) 100%); }
[data-tema="noche"] .fondo .velo { --velo-pie: rgba(0,0,0,.35); }


/* ---- La barra de arriba ---------------------------------------------------- */
.app > .barra {
  position: sticky; top: 0; z-index: 20; padding: calc(var(--arriba) + 6px) 12px 6px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: calc(var(--alto-barra) + var(--arriba));
  transition: background var(--d-2) var(--suave), box-shadow var(--d-2) var(--suave);
}
.app > .barra::before { /* el material aparece al deslizar: arriba del todo la barra es sólo aire */
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--barra-mat);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--linea); opacity: 0; transition: opacity var(--d-2) var(--suave);
}
.app > .barra[data-plegada="1"]::before, .app > .barra.siempre::before { opacity: 1; }
.app > .barra .izq { justify-self: start; min-width: 0; }
.app > .barra .der { justify-self: end; display: flex; gap: 6px; }
.app > .barra .mini-titulo {
  position: absolute; left: 64px; right: 64px; bottom: 17px; text-align: center; pointer-events: none;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity var(--d-2) var(--suave), transform var(--d-2) var(--suave);
}
.app > .barra[data-plegada="1"] .mini-titulo { opacity: 1; transform: none; }
.rol-boton {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 5px; border-radius: 999px;
  background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra); max-width: 100%;
}
.rol-boton .marca { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.rol-boton b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.rol-boton small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); line-height: 1.3; white-space: nowrap; }
.rol-boton .ico { width: 16px; height: 16px; color: var(--etiqueta); }
.boton-redondo {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.boton-redondo .ico { width: 20px; height: 20px; }
.boton-redondo .aviso-punto { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--luz); }
.volver { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra); font-size: 15px; font-weight: 500; max-width: 150px; }
.volver span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volver .ico { width: 20px; height: 20px; }
.app > .barra[data-plegada="1"] .volver { padding: 0; width: 44px; justify-content: center; }
.app > .barra[data-plegada="1"] .volver span { display: none; }
.app > .barra[data-plegada="1"] .rol-boton small { display: none; }

/* ---- El lienzo ------------------------------------------------------------- */
.lienzo { position: relative; padding: 4px var(--orilla) calc(var(--alto-pestanas) + var(--abajo) + 40px); }
.cabeza { padding: 14px 4px 18px; }
.cabeza .migas { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabeza h1 { margin-top: 8px; font-size: 34px; line-height: 1.02; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.cabeza .bajada { margin-top: 10px; color: var(--texto); font-size: 16px; max-width: 34ch; text-wrap: pretty; }
.horizonte { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; border-radius: 999px; border: 1px solid var(--linea-2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); }
.horizonte::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); }
.horizonte[data-h="siguiente"]::before { background: none; border: 1.5px solid currentColor; }
.horizonte[data-h="despues"]::before { background: none; border: 1.5px dashed currentColor; }
.horizonte[data-h="futuro"]::before { width: 7px; height: 8px; background: none; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.bloques { display: flex; flex-direction: column; gap: 18px; }
.pie-fuente { margin: 26px 4px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.5; color: var(--tenue); }

/* ---- Material base de los bloques ------------------------------------------ */
.panel { background: var(--tecali); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel.esmerilado { -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); }
}
.b-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 9px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.b-tit .mas { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tinta); font-weight: 500; }
.eyebrow-oro { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.punto-oro { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: var(--halo-persona); flex: none; }

/* ---- Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  border-radius: var(--r-boton); font-size: 16px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  background: var(--secundario-bg); color: var(--tinta); border: 1px solid var(--linea);
  transition: transform var(--d-1) var(--suave), background var(--d-1) var(--suave);
}
.btn.primario { background: var(--primario-bg); color: var(--primario-fg); border-color: transparent; }
.btn.ancho { width: 100%; }
.btn .ico { width: 18px; height: 18px; }
button:active, .fila:active, .tarjeta-toque:active { transform: scale(.975); }
.btn:active { transform: scale(.96); }
.botonera { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.botonera.en-pila { grid-template-columns: 1fr; }
.botonera.tres { grid-template-columns: 1fr 1fr; }
.botonera.tres > :first-child { grid-column: 1 / -1; }
.botonera .btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 8px; }

/* ---- 1 · decision: algo espera a una persona. Un arco: quien llega está en tu puerta. ---- */
.b-decision .umbral {
  position: relative; text-align: center; padding: 30px 20px 20px;
  background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  border-radius: 50% 50% var(--r-tarjeta) var(--r-tarjeta) / 104px 104px var(--r-tarjeta) var(--r-tarjeta);
}
.b-decision .retrato {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--tinta);
  background: radial-gradient(120% 120% at 30% 20%, var(--luz) 0%, var(--base) 100%); border: 1px solid var(--linea-2);
}
.b-decision .retrato .ico { width: 30px; height: 30px; }
.b-decision .eyebrow-oro { justify-content: center; }
.b-decision h2 { margin-top: 10px; font-size: 24px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.b-decision .det { margin-top: 6px; color: var(--texto); font-size: 15.5px; text-wrap: balance; }
.b-decision .espera { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--etiqueta); }
.b-decision .botonera { margin-top: 20px; }
.b-decision .umbral::before { /* la moldura del arco */
  content: ''; position: absolute; inset: 9px 9px auto 9px; height: 120px; pointer-events: none;
  border: 1px solid var(--linea); border-bottom: 0; border-radius: 50% 50% 0 0 / 96px 96px 0 0;
  -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent);
}
.b-decision .umbral { border-color: color-mix(in srgb, var(--acento) 30%, var(--linea)); }
.b-decision .umbral::after { /* el umbral: la línea bajo el arco */
  content: ''; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--linea-2);
}

/* ---- 2 · lista ------------------------------------------------------------- */
.filas { overflow: hidden; }
.fila {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 11px 14px 11px 16px; text-align: left; position: relative;
  transition: background var(--d-1) var(--suave), transform var(--d-1) var(--suave);
}
.fila + .fila::before { content: ''; position: absolute; top: 0; left: 44px; right: 0; height: 1px; background: var(--linea); }
.fila .txt { min-width: 0; }
.fila .txt b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.fila .txt small { display: block; font-size: 14px; color: var(--texto); line-height: 1.3; margin-top: 2px; }
.fila .valor { font-family: var(--mono); font-size: 13px; color: var(--etiqueta); white-space: nowrap; }
.fila .flecha { width: 16px; height: 16px; color: var(--tenue); }
.fila .lead { width: 14px; display: grid; place-items: center; }
.fila .lead .ico { width: 20px; height: 20px; color: var(--etiqueta); }
.fila.sin-lead { grid-template-columns: minmax(0, 1fr) auto auto; }
.fila.sin-lead + .fila::before, .fila.sin-lead::before { left: 16px; }

/* El semáforo: punto */
.sem { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--tenue); }
.sem.verde { background: var(--verde); } .sem.azul { background: var(--azul); } .sem.amarillo { background: var(--amarillo); }
.sem.rojo { background: var(--rojo); } .sem.gris { background: var(--gris); } .sem.oro { background: var(--acento); box-shadow: var(--halo-persona); }
[data-tema="noche"] .sem.gris { background: #6b7079; }
/* Estados que no son de la puerta: marcas de tinta, sin color (regla 4). */
.neutro { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; position: relative; }
.neutro.urge { background: var(--tinta); box-shadow: 0 0 0 3px var(--indicador); }
.neutro.pendiente { border: 2px solid var(--tinta); }
.neutro.info { background: var(--etiqueta); width: 7px; height: 7px; }
.neutro.quieto { border: 1.5px solid var(--tenue); }
.neutro.hecho { width: 12px; height: 7px; border-radius: 0; border-left: 2px solid var(--etiqueta); border-bottom: 2px solid var(--etiqueta); transform: rotate(-45deg) translate(1px, -2px); }
.b-decision .retrato.cosa { background: var(--tecali-hundido); }
.sem.gris { background: #7d828b; }

/* ---- 3 · tarjeta ----------------------------------------------------------- */
.tarjeta { display: block; width: 100%; padding: 18px 18px 17px; text-align: left; position: relative; }
.tarjeta .t-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tarjeta .t-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--tecali-hundido); }
.tarjeta .t-eti { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.tarjeta .t-tit { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.tarjeta .t-txt { display: block; margin-top: 5px; color: var(--texto); font-size: 15px; line-height: 1.45; }
.tarjeta .t-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-family: var(--mono); font-size: 12px; color: var(--etiqueta); }
.tarjeta .t-flecha { position: absolute; top: 18px; right: 16px; width: 18px; height: 18px; color: var(--tenue); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--tecali-hundido); color: var(--texto); white-space: nowrap; }
.chip .sem { width: 7px; height: 7px; }
.t-cab .chip { margin-left: auto; }

.tarjeta.pide { border-color: color-mix(in srgb, var(--acento) 42%, transparent); box-shadow: var(--halo-persona), var(--sombra); }
.tarjeta .t-cab .punto-oro { margin-right: -2px; }

/* ---- 4 · cifras ------------------------------------------------------------ */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cifras.n-1 { grid-template-columns: 1fr; }
.cifras.n-3 .cifra:first-child { grid-column: 1 / -1; }
.cifra { padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.cifra .c-eti { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); display: flex; align-items: center; gap: 7px; }
.cifra .c-val { font-size: 32px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifra .c-det { font-size: 13.5px; color: var(--texto); line-height: 1.35; }

/* ---- 5 · formulario -------------------------------------------------------- */
.form { padding: 6px 16px 16px; }
.campo { display: block; padding: 12px 0 0; }
.campo + .campo { border-top: 1px solid var(--linea); margin-top: 12px; }
.campo .c-eti { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
  width: 100%; font: 500 17px/1.3 var(--sans); color: var(--tinta); background: var(--tecali-hundido);
  border: 1px solid var(--linea); border-radius: 14px; padding: 13px 14px; outline: none; -webkit-appearance: none; appearance: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tenue); }
.campo input:focus, .campo textarea:focus { border-color: var(--linea-2); background: var(--tecali-2); }
.campo textarea { min-height: 88px; resize: none; }
.campo .ayuda { display: block; margin-top: 6px; font-size: 13px; color: var(--etiqueta); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--linea-2); font-size: 15px; font-weight: 500; }
.opcion[aria-pressed="true"] { background: var(--primario-bg); color: var(--primario-fg); border-color: transparent; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.interruptor span { font-size: 16px; font-weight: 500; }
.interruptor input { width: 52px; height: 32px; flex: none; margin: 0; padding: 0; border-radius: 999px; background: var(--linea-2); border: 0; position: relative; transition: background var(--d-2) var(--suave); }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform var(--d-2) var(--resorte); }
.interruptor input:checked { background: var(--tinta); }
.interruptor input:checked::after { transform: translateX(20px); }
[data-tema="noche"] .interruptor input:checked::after { background: var(--g0); }
.b-formulario .btn { margin-top: 12px; }

/* ---- 6 · acciones: botones o rejilla de atajos ------------------------------ */
.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.atajo {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 96px;
  padding: 14px 13px 13px; text-align: left; border-radius: 20px; position: relative;
}
.atajo .a-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tecali-hundido); }
.atajo .a-txt { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.atajo .a-det { display: block; font-size: 12.5px; font-weight: 400; color: var(--etiqueta); margin-top: 2px; }
.rejilla.cuatro .atajo { align-items: center; text-align: center; min-height: 92px; padding: 12px 6px 10px; gap: 8px; }
.rejilla.cuatro .atajo .a-txt { font-size: 12.5px; }
.atajo .sem { position: absolute; top: 14px; right: 13px; width: 8px; height: 8px; }

.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.dos .atajo { min-height: 104px; }
.rejilla.impar > :last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 72px; }
.fila.con-ico { grid-template-columns: 38px minmax(0, 1fr) auto auto; min-height: 62px; }
.fila .lead-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tecali-hundido); }
.fila .lead-ico .ico { width: 20px; height: 20px; }
.filas .fila.con-ico + .fila::before { left: 66px; }

/* ---- 7 · visor: cámara, mapa, video, pase, llave, gráfica ------------------- */
.visor { position: relative; overflow: hidden; border-radius: var(--r-tarjeta); }
.visor .v-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; }
.visor .v-pie b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.visor .v-pie small { display: block; font-size: 13.5px; color: var(--texto); }
.v-camara { aspect-ratio: 16 / 10; background: #0d0e10; color: #f6f6f7; position: relative; overflow: hidden; }
.v-camara .escena { position: absolute; inset: 0; }
.v-camara .en-vivo { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.45); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.v-camara .en-vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f6f6f7; animation: late 2.4s ease-in-out infinite; }
.v-camara .sello-hora { position: absolute; bottom: 12px; right: 12px; font-family: var(--mono); font-size: 11px; color: rgba(246,246,247,.8); }
@keyframes late { 50% { opacity: .25; } }
.v-mapa { aspect-ratio: 16 / 11; background: var(--tecali-hundido); position: relative; }
.v-mapa svg { width: 100%; height: 100%; }
.v-video { aspect-ratio: 16 / 9; background: #121316; display: grid; place-items: center; color: #f6f6f7; }
.v-video .play { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(246,246,247,.16); border: 1px solid rgba(246,246,247,.3); }
.v-pase { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 18px; }
.qr { width: 112px; height: 112px; border-radius: 12px; background:
  conic-gradient(from 90deg at 18% 18%, #121316 25%, transparent 0) 0 0 / 34% 34% no-repeat,
  conic-gradient(from 90deg at 18% 18%, #121316 25%, transparent 0) 100% 0 / 34% 34% no-repeat,
  conic-gradient(from 90deg at 18% 18%, #121316 25%, transparent 0) 0 100% / 34% 34% no-repeat,
  repeating-conic-gradient(#121316 0 25%, #fff 0 50%) 50% 50% / 14px 14px;
  border: 7px solid #fff; box-shadow: inset 0 0 0 1px rgba(18,19,22,.1); }
.v-pase .codigo { font-family: var(--mono); font-size: 26px; letter-spacing: .08em; font-weight: 500; }
.v-pase small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); }
.v-pase p { font-size: 14px; color: var(--texto); margin-top: 4px; }
.v-llave {
  aspect-ratio: 1.586; border-radius: var(--r-tarjeta); padding: 18px 20px; color: #f6f6f7; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 0%, #2f6a75 0%, #173a41 50%, #0a1a1e 100%); box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; justify-content: space-between;
}
.v-llave .arco-llave { position: absolute; right: -8%; bottom: -30%; width: 62%; opacity: .14; }
.v-llave .l-cab { display: flex; align-items: center; justify-content: space-between; }
.v-llave .l-cab img { width: 34px; height: 34px; border-radius: 9px; }
.v-llave .l-cab span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a9adb5; }
.v-llave b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.v-llave small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #a9adb5; margin-top: 4px; }
.v-grafica { padding: 16px 16px 8px; }
.v-grafica svg { width: 100%; height: auto; }
.v-grafica .g-barra { fill: var(--tinta); opacity: .82; }
.v-grafica .g-barra.suave { opacity: .22; }
.v-grafica text { font-family: var(--mono); font-size: 10px; fill: var(--etiqueta); }

/* ---- 8 · estado: banda del semáforo, aviso, vacío, listo -------------------- */
.banda {
  --banda-fg: #0b0c0e; color: var(--banda-fg); border-radius: var(--r-tarjeta); padding: 18px 18px 18px 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; align-items: center; box-shadow: var(--sombra);
}
.banda.verde { background: var(--verde); } .banda.azul { background: var(--azul); } .banda.amarillo { background: var(--amarillo); }
.banda.rojo { background: var(--rojo); --banda-fg: #fff; } .banda.gris { background: var(--gris); --banda-fg: #fff; }
.banda.oro { background: var(--tecali-2); --banda-fg: var(--tinta); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); box-shadow: var(--halo-persona), var(--sombra); }
.banda .glifo { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; position: relative; background: rgba(11,12,14,.12); }
.banda.rojo .glifo, .banda.gris .glifo { background: rgba(255,255,255,.18); }
.banda.oro .glifo { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.banda.oro .glifo::before { content: ''; position: absolute; inset: 17px; border-radius: 50%; background: var(--acento); }
.banda .glifo::before, .banda .glifo::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 3px; }
.banda.verde .glifo::before { width: 22px; height: 11px; background: none; border-left: 4px solid currentColor; border-bottom: 4px solid currentColor; border-radius: 1px; transform: translate(-50%, -64%) rotate(-45deg); }
.banda.rojo .glifo::before, .banda.rojo .glifo::after { width: 22px; height: 4px; transform: translate(-50%, -50%) rotate(45deg); }
.banda.rojo .glifo::after { transform: translate(-50%, -50%) rotate(-45deg); }
.banda.amarillo .glifo::before { width: 4px; height: 14px; transform: translate(-50%, -72%); }
.banda.amarillo .glifo::after { width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, 190%); }
.banda.azul .glifo::before { width: 22px; height: 17px; background: none; border: 4px solid currentColor; border-radius: 4px; transform: translate(-50%, -38%); }
.banda.azul .glifo::after { width: 26px; height: 4px; transform: translate(-50%, -260%); }
.banda.gris .glifo::before { width: 20px; height: 4px; transform: translate(-50%, -50%); }
.banda .titulo { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.banda .motivo { font-size: 14.5px; font-weight: 500; opacity: .88; line-height: 1.35; }
.banda .sello { grid-column: 1 / -1; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; display: flex; justify-content: space-between; gap: 12px; opacity: .82; }
.aviso .a-glifo { width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; }
.aviso .a-glifo .sem { width: 9px; height: 9px; }
.aviso.oro { border-color: color-mix(in srgb, var(--acento) 40%, transparent); box-shadow: var(--halo-persona), var(--sombra); }
.aviso { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px 16px 16px 14px; }
.aviso .ico { margin-top: 1px; color: var(--etiqueta); }
.aviso b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.aviso p { color: var(--texto); font-size: 14.5px; margin-top: 3px; }
.vacio { text-align: center; padding: 30px 24px 26px; }
.vacio .arco-vacio { width: 64px; height: 72px; margin: 0 auto 14px; color: var(--tenue); }
.vacio b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.vacio p { margin: 6px auto 0; color: var(--texto); font-size: 15px; max-width: 30ch; }
.listo { text-align: center; padding: 28px 22px 24px; }
.listo .sello-listo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--primario-bg); color: var(--primario-fg); }
.listo .sello-listo .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.listo b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.listo p { margin-top: 6px; color: var(--texto); font-size: 15px; }

.app.con-pestanas::after { /* lo que se desliza se desvanece antes de llegar a las pestañas */
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none;
  height: calc(var(--alto-pestanas) + var(--abajo) + 56px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--base) 0%, transparent), color-mix(in srgb, var(--base) 88%, transparent) 55%, var(--base));
}
/* ---- Las pestañas: una cápsula que flota; la activa vive bajo un arco ------- */
.pestanas {
  position: fixed; z-index: 30; left: 50%; bottom: calc(var(--abajo) + 10px); transform: translateX(-50%);
  width: min(100% - 20px, var(--ancho-app) - 20px); height: var(--alto-pestanas);
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 6px; border-radius: 30px;
  background: var(--barra-mat); border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.pestanas .arco-activo {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n, 4));
  transform: translateX(calc(100% * var(--i, 0))); pointer-events: none;
}
.pestanas .arco-activo::before {
  content: ''; position: absolute; inset: 0 5px; background: var(--indicador);
  border-radius: 50% 50% 16px 16px / 26px 26px 16px 16px;
}
.pestana {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--etiqueta); font-size: 11px; font-weight: 600; letter-spacing: .01em; min-width: 0; border-radius: 22px;
  transition: color var(--d-2) var(--suave), transform var(--d-1) var(--suave);
}
.pestana span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.pestana[aria-current="page"] { color: var(--activo, var(--tinta)); }
.pestana .ico { width: 24px; height: 24px; }
.pestana[aria-current="page"] .ico { stroke-width: 2; }

/* ---- La hoja «Ver Pórtico como»: sube desde abajo, la app se atenúa detrás ---- */
.velo-hoja { position: fixed; inset: 0; z-index: 40; background: rgba(11,12,14,.34); opacity: 0; pointer-events: none; transition: opacity var(--d-2) var(--suave); }
.hoja-roles {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; margin: 0 auto; width: 100%; max-width: var(--ancho-app); max-height: 86%;
  padding: 10px 14px calc(var(--abajo) + 18px); border-radius: 30px 30px 0 0; color: var(--tinta); overflow: auto;
  background: var(--hoja-mat);
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,.45); border-top: 1px solid var(--linea);
  transform: translate3d(0, 104%, 0); visibility: hidden;
  transition: transform var(--d-3) var(--suave), visibility 0s linear var(--d-3);
}
.app[data-hoja-abierta] .hoja-roles { transform: none; visibility: visible; transition: transform var(--d-3) var(--suave), visibility 0s; }
.app[data-hoja-abierta] .velo-hoja { opacity: 1; pointer-events: auto; }
.hoja-roles .asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea-2); margin: 0 auto 14px; }
.hoja-roles h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; padding: 0 6px; }
.hoja-roles .h-sub { padding: 4px 6px 14px; font-size: 14.5px; color: var(--texto); }
.rol-op { width: 100%; display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 12px 10px; border-radius: 18px; text-align: left; }
.rol-op + .rol-op { margin-top: 4px; }
.rol-op .r-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--tecali-hundido); }
.rol-op b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.rol-op small { display: block; font-size: 14px; color: var(--texto); }
.rol-op[aria-current="true"] { background: var(--tecali-2); box-shadow: var(--sombra); }
.rol-op .marca-actual { width: 22px; height: 22px; color: var(--tinta); opacity: 0; }
.rol-op[aria-current="true"] .marca-actual { opacity: 1; }
.rol-op.mapa-op { margin-top: 10px; border-top: 1px solid var(--linea); border-radius: 0 0 18px 18px; padding-top: 16px; }
.rol-op.mapa-op .marca-actual { opacity: 1; color: var(--tenue); }
.rol-op.mapa-op.otra { margin-top: 0; border-top: 0; border-radius: 18px; padding-top: 12px; }
.hoja-roles .cerrar { display: block; margin: 14px auto 0; font-size: 15px; font-weight: 600; color: var(--etiqueta); padding: 10px 18px; }

/* ---- Movimiento ------------------------------------------------------------ */
.entra { animation: sube .45s var(--suave) both; animation-delay: calc(var(--k, 0) * 35ms); }
@keyframes sube { from { opacity: 0; transform: translate3d(var(--ex, 0px), var(--ey, 14px), 0); } to { opacity: 1; transform: none; } }
/* La dirección del paso (la pone app.js en #pantalla): más adentro llega de la derecha; de regreso, de la izquierda. */
#pantalla[data-mov="entra"] .app { --ex: 28px; --ey: 0px; }
#pantalla[data-mov="sale"] .app { --ex: -28px; --ey: 0px; }
#pantalla[data-mov="rol"] .app, #pantalla[data-mov="inicio"] .app { --ex: 0px; --ey: 22px; }
#pantalla[data-mov="pestana"] .app { --ex: 0px; --ey: 8px; }
.b-decision .punto-oro { animation: respira 3.6s ease-in-out 3; }
@keyframes respira { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .entra, .b-decision .punto-oro, .v-camara .en-vivo::before { animation: none !important; }
  .hoja-roles, .velo-hoja, .app > .barra, .app > .barra::before, .mini-titulo, .pd-aviso { transition: none !important; }
}

/* Sin desenfoque disponible: más materia, mismo contraste. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app { --barra-mat: rgba(236,237,240,.96); --hoja-mat: rgba(246,246,248,.98); }
  [data-tema="noche"] { --barra-mat: rgba(16,17,20,.96); --hoja-mat: rgba(22,23,27,.98); }
}

/* ---- «Listo»: el aviso que deja app.js (#pd-aviso) con el material de la app ---- */
.pd-aviso.pd-aviso {
  position: absolute; left: 50%; right: auto; bottom: auto; top: calc(var(--arriba, 0px) + 14px); z-index: 60; height: auto; width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px;
  background: rgba(17,34,39,.9); color: #f1f7f8; box-shadow: 0 20px 44px -18px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  font: 500 15px/1.3 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  transform: translate3d(-50%, -140%, 0); opacity: 0; transition: transform .45s cubic-bezier(.3,1.35,.5,1), opacity .25s ease;
}
.pd-aviso.pd-aviso::before { content: ''; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #f6f6f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23235761' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pd-aviso.pd-aviso b { font-weight: 600; }
.pd-aviso.pd-aviso span { color: #bccdd1; }
.pd-aviso.pd-aviso.pd-visible { transform: translate3d(-50%, 0, 0); opacity: 1; }

/* ===========================================================================
   Pantallas héroe (hechas a mano; heroes/<id>.html). Mismo material, mismas fichas.
   =========================================================================== */
.heroe { display: flex; flex-direction: column; gap: 18px; }
.lienzo.con-heroe { padding-top: 0; }
.h-saludo { padding: 12px 4px 2px; }
.h-saludo .migas { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.h-saludo h1 { margin-top: 8px; font-size: 34px; line-height: 1.02; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.h-saludo .bajada { margin-top: 8px; color: var(--texto); font-size: 16px; }
.h-nota { margin: 2px 6px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.5; color: var(--etiqueta); }

/* La puerta viva: el arco de tu casa con quien está en él */
.puerta-viva { position: relative; }
.pv-arco {
  position: relative; text-align: center; padding: 34px 22px 22px; overflow: hidden;
  background: var(--tecali-2); border: 1px solid color-mix(in srgb, var(--acento) 30%, var(--linea)); box-shadow: var(--sombra-alta);
  border-radius: 50% 50% var(--r-tarjeta) var(--r-tarjeta) / 118px 118px var(--r-tarjeta) var(--r-tarjeta);
}
.pv-arco::before { /* la luz que entra por el arco */
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 190px; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--luz) 100%, transparent) 0%, transparent 70%);
}
.pv-arco::after { /* la moldura */
  content: ''; position: absolute; inset: 10px 10px auto 10px; height: 150px; pointer-events: none;
  border: 1px solid var(--linea); border-bottom: 0; border-radius: 50% 50% 0 0 / 108px 108px 0 0;
  -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent);
}
.pv-persona { position: relative; width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 29px; font-weight: 600; letter-spacing: -.02em; background: radial-gradient(120% 120% at 30% 20%, var(--luz) 0%, var(--base) 100%); border: 1px solid var(--linea-2); }
.pv-persona::after { /* el umbral bajo sus pies */
  content: ''; position: absolute; left: -22px; right: -22px; bottom: -9px; height: 2px; border-radius: 2px; background: var(--linea-2); }
.pv-arco .eyebrow-oro { justify-content: center; }
.pv-arco h2 { position: relative; margin-top: 10px; font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
.pv-arco .det { position: relative; margin-top: 8px; color: var(--texto); font-size: 15.5px; text-wrap: balance; }
.pv-acciones { display: grid; gap: 10px; margin-top: 12px; }
.pv-rapido { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn .sem { width: 9px; height: 9px; }

/* Pregúntale a Pórtico */
.pregunta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 12px 0 16px; border-radius: 999px;
  background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra); color: var(--texto); text-align: left; font-size: 15.5px; }
.pregunta .ico { color: var(--etiqueta); }
.pregunta > span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* El día: una línea de tiempo */
.dia { list-style: none; margin: 0; padding: 6px 0; }
.dia li { position: relative; }
.dia li + li::before { content: ''; position: absolute; left: 82px; top: -14px; height: 28px; width: 1.5px; background: var(--linea-2); }
.momento { width: 100%; display: grid; grid-template-columns: 50px 14px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 12px 14px 12px 16px; text-align: left; }
.momento time { font-family: var(--mono); font-size: 13px; color: var(--etiqueta); }
.momento b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.momento small { display: block; font-size: 14px; color: var(--texto); }
.momento .flecha { width: 16px; height: 16px; color: var(--tenue); }

/* La foto de la caseta, dentro de un arco */
.foto-arco { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; background: #1d1a20;
  border-radius: 50% 50% var(--r-tarjeta) var(--r-tarjeta) / 30% 30% var(--r-tarjeta) var(--r-tarjeta); box-shadow: var(--sombra-alta); }
.foto-arco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto-arco .en-vivo { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: rgba(15,12,17,.55); color: #f7f4f8; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.foto-arco .en-vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f7f4f8; animation: late 2.4s ease-in-out infinite; }
.h-quien { text-align: center; padding: 4px 8px 0; }
.h-quien .eyebrow-oro { justify-content: center; }
.h-quien h1 { margin-top: 10px; font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -.032em; text-wrap: balance; }
.h-quien .bajada { margin: 10px auto 0; color: var(--texto); font-size: 16px; max-width: 32ch; text-wrap: pretty; }
.hechos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.hechos .chip b { font-weight: 500; color: var(--tinta); }

/* Desliza para dejar pasar: cruzas el umbral con el dedo */
.deslizador { --p: 0; position: relative; height: 68px; border-radius: 999px; padding: 6px; user-select: none; -webkit-user-select: none;
  background: var(--tecali); border: 1px solid var(--linea-2); box-shadow: var(--sombra); overflow: hidden; }
.deslizador .d-lleno { position: absolute; inset: 0; border-radius: inherit; background: var(--verde); transform-origin: left center;
  transform: scaleX(calc(var(--p) * .85 + .15)); opacity: calc(var(--p) * .9); }
.deslizador .d-texto { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 50px; font-size: 16px; font-weight: 600; letter-spacing: -.005em;
  color: var(--tinta); opacity: calc(1 - var(--p) * 1.6); pointer-events: none; }
.deslizador .d-texto { grid-auto-flow: column; justify-content: center; gap: 10px; align-items: center; }
.deslizador .d-flechas { display: inline-flex; gap: 1px; }
.deslizador .d-flechas i { width: 8px; height: 8px; border-right: 2px solid var(--tinta); border-top: 2px solid var(--tinta); transform: rotate(45deg); opacity: .15;
  animation: flecha-pasa 2.4s ease-in-out infinite; }
.deslizador .d-flechas i:nth-child(2) { animation-delay: .2s; } .deslizador .d-flechas i:nth-child(3) { animation-delay: .4s; }
@keyframes flecha-pasa { 0%, 60%, 100% { opacity: .15; } 25% { opacity: .75; } }
.deslizador .d-perilla { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; touch-action: none;
  background: var(--primario-bg); color: var(--primario-fg); box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); transition: transform var(--d-3) var(--resorte); }
.deslizador.arrastra .d-perilla { transition: none; }
.deslizador.hecho .d-texto { opacity: 0; }
.deslizador .d-perilla .ico { width: 24px; height: 24px; }
.deslizador.pista-sugiere .d-perilla { animation: sugiere .9s var(--suave); }
@keyframes sugiere { 30% { transform: translateX(26px); } 60% { transform: translateX(0); } 80% { transform: translateX(8px); } }

/* WhatsApp: la misma decisión con un número */
.wa { padding: 16px; }
.wa .t-eti { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.wa p { margin-top: 6px; color: var(--texto); font-size: 14.5px; }
.wa ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wa li { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 14px; background: var(--tecali-hundido); font-size: 14px; font-weight: 500; line-height: 1.2; }
.wa li b { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--luz); font-family: var(--mono); font-size: 13px; box-shadow: 0 0 0 1px var(--linea); }

@media (prefers-reduced-motion: reduce) {
  .deslizador .d-flechas i, .foto-arco .en-vivo::before { animation: none !important; opacity: .5; }
  .deslizador .d-perilla { transition: none !important; }
}

/* ---- Invitar: escríbelo como lo dirías ---------------------------------------- */
.redacta { padding: 16px 16px 12px; border-radius: 26px; background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra-alta); }
.redacta .c-eti { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); margin-bottom: 8px; }
.redacta textarea { width: 100%; min-height: 84px; resize: none; border: 0; outline: none; background: none; padding: 0; color: var(--tinta);
  font: 500 21px/1.3 var(--sans); letter-spacing: -.015em; }
.redacta textarea::placeholder { color: var(--tenue); }
.redacta .r-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.redacta .r-ayuda { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--etiqueta); }
.redacta .r-ayuda .ico { width: 18px; height: 18px; }
.redacta .r-enviar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--primario-bg); color: var(--primario-fg); flex: none; }
.rejilla.tres-col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rejilla.tres-col .atajo { min-height: 104px; padding: 12px 10px; gap: 10px; }
.rejilla.tres-col .atajo .a-txt { font-size: 13.5px; }
.atajo .horizonte { order: 3; margin-top: -6px; padding: 2px 7px 2px 6px; font-size: 8.5px; }
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--orilla)); padding: 4px var(--orilla) 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carrusel::-webkit-scrollbar { display: none; }
.pase { flex: none; width: 236px; scroll-snap-align: start; text-align: left; padding: 16px 16px 14px; border-radius: 22px; position: relative;
  background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra);
  -webkit-mask: radial-gradient(circle at 0 64%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 64%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 64%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 64%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat; }
.pase .p-cab { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--etiqueta); }
.pase b { display: block; margin-top: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pase small { display: block; margin-top: 2px; font-size: 14px; color: var(--texto); }
.pase .p-pie { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1.5px dashed var(--linea-2); }
.pase .qr.mini { width: 46px; height: 46px; border-width: 3px; border-radius: 7px; background-size: 34% 34%, 34% 34%, 34% 34%, 7px 7px; }
.pase .p-cod { font-family: var(--mono); font-size: 17px; letter-spacing: .08em; }
.pase .p-cod small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); margin: 0 0 2px; }
.pase.suave { background: var(--tecali); }
.pase.suave .p-pie { border-top-style: solid; }

/* ---- Llaves ------------------------------------------------------------------ */
.llave-grande { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; width: 100%; min-height: 226px; padding: 20px 22px 18px;
  border-radius: 28px; overflow: hidden; text-align: left; color: #f1f7f8;
  background: radial-gradient(120% 100% at 85% 0%, #3a7682 0%, #235761 42%, #0f2a30 100%); box-shadow: var(--sombra-alta), 0 1px 0 rgba(255,255,255,.18) inset; }
.llave-grande .lg-arco { position: absolute; right: -40px; bottom: -70px; width: 230px; height: 260px; opacity: .13; pointer-events: none; }
.llave-grande .lg-cab { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #bccdd1; }
.llave-grande .lg-cab img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.llave-grande .lg-cab .ico { margin-left: auto; width: 22px; height: 22px; color: #f1f7f8; opacity: .8; }
.llave-grande small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #bccdd1; }
.llave-grande .lg-codigo { display: block; margin-top: 6px; font-family: var(--mono); font-size: 44px; font-weight: 500; letter-spacing: .06em; line-height: 1; }
.llave-grande .lg-pie { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #d5e2e5; }
.llave-grande .lg-pie span:last-child { color: #9fb8bd; }
.placas { display: grid; gap: 10px; }
.placa-coche { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 12px 14px; text-align: left; border-radius: 20px;
  background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.placa-coche b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.placa-coche small { display: block; font-size: 13.5px; color: var(--texto); }
.placa-coche .flecha { width: 16px; height: 16px; color: var(--tenue); }
.placa-mx { position: relative; display: inline-grid; place-items: center; min-width: 106px; height: 50px; padding: 12px 10px 4px; border-radius: 8px;
  background: #fbfbfb; color: #16262b; font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
  box-shadow: inset 0 0 0 2px #16262b, 0 2px 6px -2px rgba(0,0,0,.3); }
.placa-mx::before { content: 'MÉXICO'; position: absolute; top: 5px; left: 0; right: 0; text-align: center; font-size: 7px; letter-spacing: .3em; font-weight: 500; color: #4f6269; }
.placa-mx.grande { min-width: 210px; height: 92px; font-size: 36px; padding-top: 22px; border-radius: 12px; box-shadow: inset 0 0 0 3px #16262b, 0 10px 30px -10px rgba(0,0,0,.6); }
.placa-mx.grande::before { top: 9px; font-size: 10px; }
.familia { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 14px 14px 14px 16px; text-align: left; }
.caras { display: flex; }
.caras i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 600;
  background: radial-gradient(120% 120% at 30% 20%, var(--luz) 0%, var(--base) 100%); border: 2px solid var(--luz); margin-left: -9px; }
.caras i:first-child { margin-left: 0; }
.familia b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.familia small { display: block; font-size: 13.5px; color: var(--texto); }
.familia .flecha { width: 16px; height: 16px; color: var(--tenue); }

/* ---- La caseta: leer una guía, leer una placa --------------------------------- */
:is(.heroe, .muestra) > .pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: paso; }
:is(.heroe, .muestra) > .pasos li { counter-increment: paso; display: grid; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--etiqueta); line-height: 1.2; }
:is(.heroe, .muestra) > .pasos li::before { content: ''; height: 4px; border-radius: 2px; background: var(--linea-2); }
:is(.heroe, .muestra) > .pasos li.hecho::before { background: var(--etiqueta); }
:is(.heroe, .muestra) > .pasos li.ahora { color: var(--tinta); }
:is(.heroe, .muestra) > .pasos li.ahora::before { background: var(--marca); }
[data-tema="noche"] :is(.heroe, .muestra) > .pasos li.ahora::before { background: var(--marca-luz); }
:is(.heroe, .muestra) > .pasos li.ahora.decide::before { background: var(--acento); }
.visor-scan { position: relative; margin: 0; aspect-ratio: 4 / 3.3; border-radius: 26px; overflow: hidden; background: #0b1417; box-shadow: var(--sombra-alta); }
.visor-scan > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.visor-scan .esquinas { position: absolute; inset: 14% 12%; pointer-events: none;
  background: linear-gradient(#f1f7f8, #f1f7f8) 0 0 / 26px 3px, linear-gradient(#f1f7f8, #f1f7f8) 0 0 / 3px 26px,
    linear-gradient(#f1f7f8, #f1f7f8) 100% 0 / 26px 3px, linear-gradient(#f1f7f8, #f1f7f8) 100% 0 / 3px 26px,
    linear-gradient(#f1f7f8, #f1f7f8) 0 100% / 26px 3px, linear-gradient(#f1f7f8, #f1f7f8) 0 100% / 3px 26px,
    linear-gradient(#f1f7f8, #f1f7f8) 100% 100% / 26px 3px, linear-gradient(#f1f7f8, #f1f7f8) 100% 100% / 3px 26px;
  background-repeat: no-repeat; opacity: .9; }
.visor-scan .barrido { position: absolute; inset: 14% 12%; pointer-events: none;
  background: linear-gradient(var(--marca-luz), var(--marca-luz)) top / 100% 2px no-repeat; animation: barre 1.5s var(--suave) 2 both; }
@keyframes barre { from { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.visor-scan .leido { opacity: 0; animation: aparece .5s var(--suave) 3.1s both; }
@keyframes aparece { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.visor-scan .rotulo { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px;
  background: rgba(10,18,21,.62); color: #f1f7f8; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.visor-scan .rotulo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f1f7f8; animation: late 2.4s ease-in-out infinite; }
.visor-scan .estado-lectura { position: absolute; right: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(10,18,21,.62); color: #bccdd1;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.visor-scan .estado-lectura { display: grid; }
.visor-scan .estado-lectura > span { grid-area: 1 / 1; text-align: right; }
.visor-scan .estado-lectura .ya { color: #f1f7f8; opacity: 0; animation: se-ve .25s linear 3.1s both; }
.visor-scan .estado-lectura .aun { animation: se-va .25s linear 3.1s both; }
@keyframes se-va { to { opacity: 0; } }
@keyframes se-ve { to { opacity: 1; } }
.heroe > .lectura { padding: 18px 18px 16px; }
.heroe > .lectura h2 { margin-top: 8px; font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -.028em; }
.heroe > .lectura dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
.heroe > .lectura dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); padding-top: 3px; }
.heroe > .lectura dd { margin: 0; font-weight: 600; }
.heroe > .lectura .botonera { margin-top: 16px; }
.heroe > .lectura.pide { border-color: color-mix(in srgb, var(--acento) 42%, transparent); box-shadow: var(--halo-persona), var(--sombra-alta); }
.burbuja-wa { position: relative; max-width: 86%; margin-left: auto; padding: 11px 13px 8px; border-radius: 18px 18px 6px 18px; background: #e8f3ee; color: #0f1d19; font-size: 14.5px; line-height: 1.4; box-shadow: var(--sombra); }
.burbuja-wa small { display: block; text-align: right; margin-top: 4px; font-family: var(--mono); font-size: 10px; color: #4f6269; }
.lo-que-llega { display: grid; gap: 8px; }
.lo-que-llega .quien-recibe { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); text-align: right; padding-right: 6px; }
.resultado { display: grid; justify-items: center; gap: 12px; padding: 22px 18px 18px; text-align: center; }
.resultado b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.resultado small { display: block; font-size: 15px; color: var(--texto); margin-top: 2px; }
.resultado .historial-placa { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* La hoja de la multa: sube dentro de la héroe */
.velo-multa { position: fixed; inset: 0; z-index: 44; background: rgba(5,10,12,.5); opacity: 0; pointer-events: none; transition: opacity var(--d-2) var(--suave); }
.hoja-multa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0 auto; width: 100%; max-width: var(--ancho-app); max-height: 88%; overflow: auto;
  padding: 10px 16px calc(var(--abajo) + 18px); border-radius: 30px 30px 0 0; background: var(--hoja-mat); border-top: 1px solid var(--linea);
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,.6);
  transform: translate3d(0, 104%, 0); visibility: hidden; transition: transform var(--d-3) var(--suave), visibility 0s linear var(--d-3); }
.heroe[data-multa-abierta] .hoja-multa { transform: none; visibility: visible; transition: transform var(--d-3) var(--suave), visibility 0s; }
.heroe[data-multa-abierta] .velo-multa { opacity: 1; pointer-events: auto; }
.hoja-multa .asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea-2); margin: 0 auto 14px; }
.hoja-multa h2 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.hoja-multa .h-sub { margin-top: 6px; color: var(--texto); font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.evidencia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.evidencia span { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #0b1417; }
.evidencia svg { width: 100%; height: 100%; }
.evidencia em { position: absolute; left: 8px; bottom: 7px; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #d5e2e5; }
.op-multa { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 14px; margin-top: 8px; border-radius: 16px; text-align: left;
  background: var(--tecali-hundido); border: 1.5px solid transparent; }
.op-multa b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.op-multa span { font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.op-multa[aria-pressed="true"] { border-color: var(--tinta); background: var(--tecali-2); }
.hoja-multa .btn { margin-top: 12px; }
.hoja-multa .cerrar { display: block; margin: 10px auto 0; font-size: 15px; font-weight: 600; color: var(--etiqueta); padding: 10px 18px; }
@media (prefers-reduced-motion: reduce) {
  .visor-scan .barrido { animation: none; opacity: 0; }
  .visor-scan .leido, .visor-scan .estado-lectura .aun, .visor-scan .estado-lectura .ya { animation-delay: 0s; animation-duration: 0s; }
  .hoja-multa, .velo-multa { transition: none !important; }
}
/* El marco que se fija en la placa (coordenadas de la placa dentro de la foto 360 × 297) */
.visor-scan .fijar { position: absolute; left: 34.4%; top: 64.6%; width: 31.2%; height: 15%; pointer-events: none;
  background: linear-gradient(var(--marca-luz), var(--marca-luz)) 0 0 / 16px 3px, linear-gradient(var(--marca-luz), var(--marca-luz)) 0 0 / 3px 16px,
    linear-gradient(var(--marca-luz), var(--marca-luz)) 100% 0 / 16px 3px, linear-gradient(var(--marca-luz), var(--marca-luz)) 100% 0 / 3px 16px,
    linear-gradient(var(--marca-luz), var(--marca-luz)) 0 100% / 16px 3px, linear-gradient(var(--marca-luz), var(--marca-luz)) 0 100% / 3px 16px,
    linear-gradient(var(--marca-luz), var(--marca-luz)) 100% 100% / 16px 3px, linear-gradient(var(--marca-luz), var(--marca-luz)) 100% 100% / 3px 16px;
  background-repeat: no-repeat; animation: fija 1.5s var(--suave) .5s both; }
@keyframes fija { 0% { transform: scale(2.6, 3.4); opacity: 0; } 30% { opacity: 1; } 75% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
.h-placa .visor-scan .estado-lectura .ya, .h-placa .visor-scan .estado-lectura .aun { animation-delay: 2s; }
@media (prefers-reduced-motion: reduce) { .visor-scan .fijar { animation: none; } }

/* ---- La marca de IA: «lo propone Pórtico; lo confirma una persona» -------------
   Contorno punteado = borrador que espera a alguien (como en el sistema del 29 sep). Sin chispas, sin ojos. */
.marca-ia, .pd-ia.pd-ia {
  display: inline-flex; align-items: center; margin-left: 7px; padding: 1px 6px 1px 7px; border-radius: 6px; vertical-align: 2px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase;
  color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--marca) 60%, transparent);
}
[data-tema="noche"] .marca-ia, [data-tema="noche"] .pd-ia.pd-ia { color: var(--marca-luz); background: color-mix(in srgb, var(--marca-luz) 10%, transparent); border-color: color-mix(in srgb, var(--marca-luz) 55%, transparent); }
.propuesta { outline: 1.5px dashed color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 3px; }
[data-tema="noche"] .propuesta { outline-color: color-mix(in srgb, var(--marca-luz) 45%, transparent); }

/* ---- La portada ------------------------------------------------------------- */
.app.portada { min-height: auto; }
.pd-instala.pd-instala { margin: 0 var(--orilla) calc(var(--abajo) + 28px); padding: 16px 18px; border-radius: 22px; gap: 6px;
  background: var(--dia-luz); color: var(--dia-tinta); border: 1px dashed color-mix(in srgb, var(--marca) 45%, transparent); box-shadow: none;
  font-family: var(--sans); font-size: 14.5px; }
.pd-instala.pd-instala b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.pd-instala.pd-instala span { color: var(--dia-texto); opacity: 1; }
.pd-instala.pd-instala button { background: var(--marca); color: #fff; }
.app.portada::after { display: none; }
.po-lienzo { position: relative; padding: calc(var(--arriba) + 34px) var(--orilla) 24px; display: flex; flex-direction: column; gap: 26px; }
.po-cab { padding: 0 4px; }
.po-marca { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--marca) 80%, black), 0 0 0 1px rgba(255,255,255,.4); }
.po-cab .migas { margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.po-cab h1 { margin-top: 8px; font-size: 56px; line-height: .95; font-weight: 600; letter-spacing: -.045em; color: var(--marca); }
.po-una { margin-top: 12px; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--tinta); max-width: 26ch; text-wrap: balance; }
.po-nota { margin-top: 10px; font-size: 14.5px; color: var(--texto); }
.po-roles { display: grid; gap: 10px; }
.po-rol { display: grid; grid-template-columns: 48px 1fr 18px; gap: 14px; align-items: center; width: 100%; padding: 12px 14px 12px 12px; text-align: left;
  border-radius: 22px; background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.po-rol .po-rol-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--marca) 10%, transparent); color: var(--marca); }
.po-rol b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.po-rol small { display: block; font-size: 14px; color: var(--texto); line-height: 1.3; }
.po-rol .flecha { width: 18px; height: 18px; color: var(--tenue); }
.po-rol.nueva { background: transparent; border-style: dashed; border-color: var(--linea-2); box-shadow: none; }
.po-cuenta { font-family: var(--mono); font-size: 11px; color: var(--etiqueta); }
.po-historias { gap: 12px; }
.po-historia { flex: none; width: 250px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 176px;
  padding: 18px 18px 16px; text-align: left; border-radius: 24px; color: #f1f7f8;
  background: radial-gradient(120% 100% at 90% 0%, #3a7682 0%, #235761 45%, #0f2a30 100%); box-shadow: var(--sombra-alta); }
.po-historia .po-num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: #9fc3ca; }
.po-historia b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.po-historia small { font-size: 13.5px; color: #bccdd1; line-height: 1.35; }
.po-historia .po-ver { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.po-historia .po-ver .ico { width: 16px; height: 16px; }
.po-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.po-pie .btn { min-height: 42px; font-size: 14.5px; padding: 0 16px; }

/* ---- La franja de los recorridos (la pinta app.js; aquí toma el material) ---- */
.pd-recorrido.pd-recorrido {
  left: 10px; right: 10px; bottom: calc(var(--abajo, 0px) + 10px); z-index: 35; display: grid; gap: 10px;
  padding: 14px 14px 12px 16px; border-radius: 24px; color: #f1f7f8; border: 1px solid rgba(255,255,255,.12);
  background: #0c1d21;
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.7); font-family: var(--sans);
  animation: franja-entra .45s var(--resorte) both;
}
@keyframes franja-entra { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.pd-recorrido .pd-rec-cabeza small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #9fc3ca; }
.pd-recorrido .pd-rec-cerrar { background: rgba(255,255,255,.1); color: #f1f7f8; }
.pd-recorrido p { font-size: 16.5px; line-height: 1.4; letter-spacing: -.005em; text-wrap: pretty; }
.pd-recorrido .pd-rec-botones button { min-height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #f1f7f8; font: 600 15px/1 var(--sans); }
.pd-recorrido .pd-rec-botones .pd-rec-sigue { background: #f1f7f8; color: #0a1a1e; border-color: transparent; }
#telefono:has(.app.con-pestanas) .pd-recorrido.pd-recorrido { bottom: calc(var(--abajo, 0px) + 10px + var(--alto-pestanas) + 10px); }
#telefono.pd-con-recorrido .lienzo, #telefono.pd-con-recorrido .po-lienzo { padding-bottom: calc(var(--abajo, 0px) + 300px); }
@media (prefers-reduced-motion: reduce) { .pd-recorrido.pd-recorrido { animation: none; } }

/* ---- Primera vez ----------------------------------------------------------------- */
.h-entrada { gap: 20px; }
.h-entrada :is(.heroe, .muestra) > .pasos { margin-top: 6px; }
.umbral-grande { position: relative; height: 250px; display: grid; place-items: end center; }
.umbral-grande svg { width: 220px; height: 250px; overflow: visible; }
.umbral-grande .ug-luz { fill: var(--luz); }
.umbral-grande .ug-arco { fill: none; stroke: var(--marca); stroke-width: 16; }
.umbral-grande .ug-piso { stroke: var(--marca); stroke-width: 6; stroke-linecap: round; }
.umbral-grande .ug-num { font-family: var(--mono); font-size: 22px; font-weight: 600; fill: var(--marca); letter-spacing: .06em; }
.promesas { list-style: none; margin: 0; padding: 4px 0; }
.promesas li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 12px 16px; }
.promesas li + li { border-top: 1px solid var(--linea); }
.promesas .lead-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--marca) 10%, transparent); color: var(--marca); }
.promesas b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.promesas small { display: block; font-size: 14px; color: var(--texto); }
.telefono-mx { display: flex; align-items: stretch; gap: 10px; }
.telefono-mx .lada { display: grid; place-items: center; padding: 0 16px; border-radius: 18px; background: var(--tecali-2); border: 1px solid var(--linea); font: 600 22px/1 var(--mono); }
.telefono-mx input { flex: 1; min-width: 0; height: 68px; padding: 0 18px; border-radius: 18px; border: 1.5px solid var(--linea-2); background: var(--tecali-2); color: var(--tinta);
  font: 500 26px/1 var(--mono); letter-spacing: .04em; outline: none; }
.telefono-mx input:focus { border-color: var(--marca); }
.cifras-codigo { display: grid; grid-template-columns: repeat(3, 1fr) 12px repeat(3, 1fr); gap: 8px; align-items: center; }
.cifras-codigo span { height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--tecali-2); border: 1.5px solid var(--linea-2);
  font: 600 28px/1 var(--mono); color: var(--tinta); }
.cifras-codigo i { height: 2px; background: var(--linea-2); border-radius: 2px; }
.cifras-codigo span b { font-weight: 600; opacity: 0; animation: cifra .3s var(--suave) both; animation-delay: calc(1.5s + var(--n) * 90ms); }
@keyframes cifra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.llega-wa { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  animation: baja-wa .6s var(--resorte) .5s both; }
@keyframes baja-wa { from { opacity: 0; transform: translate3d(0, -22px, 0) scale(.97); } to { opacity: 1; transform: none; } }
.llega-wa .wa-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tinta); color: var(--luz); }
.llega-wa small { display: block; font-size: 12px; color: var(--etiqueta); }
.llega-wa b { display: block; font-size: 15px; font-weight: 600; }
.llega-wa span span { display: block; font-size: 14px; color: var(--texto); }
.enlaces-suaves { display: flex; justify-content: center; gap: 20px; }
.enlaces-suaves button { font-size: 15px; font-weight: 600; color: var(--marca); padding: 8px 4px; }
.mapa-casa { position: relative; border-radius: 26px; overflow: hidden; background: var(--tecali); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.mapa-casa svg { display: block; width: 100%; height: auto; }
.mapa-casa .mc-casa { fill: var(--tecali-2); stroke: var(--linea-2); }
.mapa-casa .mc-tuya { fill: var(--marca); }
.mapa-casa .mc-calle { fill: color-mix(in srgb, var(--tinta) 7%, transparent); }
.mapa-casa text { font-family: var(--mono); font-size: 9px; fill: var(--etiqueta); letter-spacing: .08em; }
.mapa-casa .mc-num { font-size: 11px; font-weight: 600; fill: #fff; letter-spacing: .02em; }
.mapa-casa .mc-pin { transform-origin: 50% 100%; transform-box: fill-box; animation: pin 2.8s var(--suave) infinite; }
@keyframes pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.listo-arco { position: relative; display: grid; place-items: center; height: 210px; }
.listo-arco svg { width: 180px; height: 200px; overflow: visible; }
.listo-arco .la-arco { fill: none; stroke: var(--marca); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: traza 1.2s var(--suave) .3s forwards; }
.listo-arco .la-palomita { fill: none; stroke: var(--marca); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: traza .5s var(--suave) 1.3s forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cifras-codigo span b, .llega-wa, .listo-arco .la-arco, .listo-arco .la-palomita, .mapa-casa .mc-pin { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
}

/* ---- Raíces de las pestañas (casa, caseta, Consejo) ------------------------- */
.fuente-cifra { margin: -4px 6px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--etiqueta); }
.tarjeta-grande { position: relative; display: grid; gap: 14px; width: 100%; padding: 20px 20px 18px; text-align: left; overflow: hidden;
  border-radius: 28px; background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra-alta); }
.tarjeta-grande .tg-cab { display: flex; align-items: center; gap: 14px; }
.tarjeta-grande .tg-num { width: 64px; height: 72px; flex: none; display: grid; place-items: end center; padding-bottom: 12px; color: var(--marca);
  font: 600 22px/1 var(--mono); border: 7px solid var(--marca); border-bottom: 0; border-radius: 32px 32px 0 0; }
.tarjeta-grande b.tg-tit { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.tarjeta-grande small { display: block; font-size: 14.5px; color: var(--texto); margin-top: 3px; }
.tarjeta-grande .tg-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14.5px; color: var(--texto); }
.tarjeta-grande .tg-pie .neutro { margin-right: 8px; }
.tarjeta-grande .caras i { border-color: var(--tecali-2); }
.accion-grande { display: grid; grid-template-columns: 60px 1fr 22px; gap: 16px; align-items: center; width: 100%; padding: 18px; text-align: left; border-radius: 26px;
  background: var(--primario-bg); color: var(--primario-fg); box-shadow: var(--sombra-alta); }
.accion-grande .ag-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--primario-fg) 12%, transparent); }
.accion-grande .ag-ico .ico { width: 28px; height: 28px; }
.accion-grande b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.accion-grande small { display: block; font-size: 14px; opacity: .8; margin-top: 2px; }
.accion-grande .marca-ia { color: inherit; border-color: color-mix(in srgb, var(--primario-fg) 50%, transparent); background: transparent; }
.accion-grande > .ico { width: 22px; height: 22px; opacity: .7; }
.cifras-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cifras-fila.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifras-fila .cifra { padding: 13px 12px 12px; }
.cifras-fila .cifra .c-val { font-size: 28px; }
.estantes { padding: 16px 16px 14px; }
.estantes .est-fila { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: end; padding: 8px 0; border-bottom: 3px solid var(--linea-2); }
.estantes .est-fila + .est-fila { margin-top: 6px; }
.estantes .est-letra { font: 600 13px/1 var(--mono); color: var(--etiqueta); padding-bottom: 2px; }
.estantes .est-cajas { display: flex; gap: 6px; flex-wrap: wrap; }
.estantes .caja { display: grid; align-content: center; justify-items: center; min-width: 58px; height: 44px; padding: 0 8px; border-radius: 8px; background: #6b5b4c; color: #f1ebe4;
  font: 600 11px/1.15 var(--mono); text-align: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.estantes .caja.sobre { background: #d9e2e4; color: #16262b; height: 30px; }
.estantes .caja small { display: block; font-size: 9px; font-weight: 500; opacity: .85; }
.estantes .caja.tuya { outline: 2px solid var(--marca-luz); outline-offset: 2px; }
.ronda { padding: 14px 14px 12px; }
.ronda svg { display: block; width: 100%; height: auto; }
.ronda .r-camino { fill: none; stroke: var(--linea-2); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.ronda .r-hecho { fill: none; stroke: var(--marca-luz); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ronda .r-punto { fill: var(--tecali-2); stroke: var(--tenue); stroke-width: 2; }
.ronda .r-punto.hecho { fill: var(--marca-luz); stroke: none; }
.ronda .r-punto.ahora { fill: var(--noche-tinta); stroke: var(--marca-luz); stroke-width: 3; }
.ronda .r-aro { fill: none; stroke: var(--marca-luz); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: aro 2.4s ease-out infinite; }
@keyframes aro { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.ronda text { font-family: var(--mono); font-size: 9px; fill: var(--etiqueta); }
.ronda .r-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 14px; color: var(--texto); }
.ronda .r-pie b { color: var(--tinta); font-weight: 600; }
.alerta-fuerte { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 14px 14px 14px 16px; text-align: left; border-radius: 22px;
  background: var(--tinta); color: var(--base); box-shadow: var(--sombra-alta); }
.alerta-fuerte .af-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--base) 12%, transparent); }
.alerta-fuerte b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.alerta-fuerte small { display: block; font-size: 14px; opacity: .78; }
.alerta-fuerte .af-ir { padding: 10px 16px; border-radius: 999px; background: var(--base); color: var(--tinta); font-weight: 600; font-size: 15px; }
.turno { padding: 18px 18px 16px; }
.turno .tu-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.turno b.tu-quien { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.turno .tu-hora { font: 500 13px/1 var(--mono); color: var(--etiqueta); }
.turno .tu-barra { position: relative; height: 10px; margin: 16px 0 8px; border-radius: 999px; background: var(--tecali-hundido); overflow: hidden; }
.turno .tu-barra i { position: absolute; inset: 0; border-radius: inherit; background: var(--marca-luz); transform-origin: left; transform: scaleX(var(--avance, .36)); }
.turno .tu-marcas { display: flex; justify-content: space-between; font: 10.5px/1 var(--mono); color: var(--etiqueta); }
.turno .tu-estado { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14.5px; color: var(--texto); }
.horas { padding: 16px 16px 10px; }
.horas svg { display: block; width: 100%; height: auto; }
.horas .h-barra { fill: color-mix(in srgb, var(--marca) 30%, transparent); }
.horas .h-barra.ahora { fill: var(--marca); }
.horas text { font-family: var(--mono); font-size: 9px; fill: var(--etiqueta); }
.horas .h-tit { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.horas .h-tit span { font: 400 11px/1.6 var(--mono); color: var(--etiqueta); }
.cobro { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding: 18px; }
.cobro svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.cobro .co-fondo { fill: none; stroke: var(--tecali-hundido); stroke-width: 14; }
.cobro .co-arco { fill: none; stroke: var(--marca); stroke-width: 14; stroke-linecap: round; }
.cobro .co-centro { position: relative; }
.cobro .co-anillo { position: relative; width: 132px; height: 132px; }
.cobro .co-anillo span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 600 26px/1 var(--sans); letter-spacing: -.03em; }
.cobro .co-anillo span small { display: block; margin-top: 4px; font: 400 10px/1 var(--mono); letter-spacing: .08em; color: var(--etiqueta); text-transform: uppercase; }
.cobro b { display: block; font-size: 25px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cobro p { font-size: 14px; color: var(--texto); margin-top: 2px; }
.cobro p + b { margin-top: 12px; }
.voto { padding: 16px 16px 14px; }
.voto b { display: block; font-size: 16px; font-weight: 600; }
.voto .vo-barra { height: 10px; margin: 10px 0 6px; border-radius: 999px; background: var(--tecali-hundido); overflow: hidden; }
.voto .vo-barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--marca); transform-origin: left; transform: scaleX(var(--avance, .62)); }
.voto small { font-size: 13.5px; color: var(--texto); }
.fotos-reporte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px; }
.fotos-reporte span { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #b3c1c4; }
.fotos-reporte svg { width: 100%; height: 100%; }
.plano { position: relative; border-radius: 28px; overflow: hidden; background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra-alta); text-align: left; width: 100%; display: block; }
.plano svg { display: block; width: 100%; height: auto; }
.plano .pl-calle { fill: color-mix(in srgb, var(--tinta) 8%, transparent); }
.plano .pl-casa { fill: color-mix(in srgb, var(--marca) 18%, transparent); }
.plano .pl-club { fill: color-mix(in srgb, var(--marca) 34%, transparent); }
.plano .pl-arco { fill: none; stroke: var(--marca); stroke-width: 5; }
.plano .pl-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px 16px; }
.plano .pl-pie b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.plano .pl-pie small { display: block; font-size: 14px; color: var(--texto); }
.plano .pl-pie .flecha { width: 18px; height: 18px; color: var(--tenue); }
@media (prefers-reduced-motion: reduce) { .ronda .r-aro { animation: none; opacity: 0; } }
:is(.heroe, .muestra) > .pasos.cinco { grid-template-columns: repeat(5, 1fr); }
:is(.heroe, .muestra) > .pasos.cinco li { font-size: 11px; }
[role="radiogroup"] .op-multa:first-child { margin-top: 0; }
.op-multa span:empty { display: none; }
.permiso { display: grid; justify-items: center; gap: 16px; padding: 26px 0 8px; }
.per-alerta { width: min(100%, 300px); display: grid; justify-items: center; gap: 8px; padding: 22px 0 0; border-radius: 22px; text-align: center; overflow: hidden;
  background: var(--tecali-2); border: 1px solid var(--linea); box-shadow: var(--sombra-alta); }
.per-alerta img { border-radius: 13px; box-shadow: 0 10px 22px -12px rgba(0,0,0,.45); }
.per-alerta b { padding: 4px 22px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.per-alerta p { padding: 0 22px; font-size: 14px; color: var(--texto); line-height: 1.35; }
.per-botones { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 1px solid var(--linea-2); }
.per-botones button { min-height: 52px; font-size: 17px; color: var(--marca); }
.per-botones button + button { border-left: 1px solid var(--linea-2); }
.per-botones .si { font-weight: 700; }
.per-nota { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); }

/* ---- Lo que pinta app.js y aquí toma el material ------------------------------- */
.pd-busca.pd-busca { top: calc(var(--alto-barra) + var(--arriba) + 4px); margin: 0 0 16px; }
.pd-busca.pd-busca input { min-height: 52px; padding: 0 18px 0 48px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta);
  background: var(--tecali-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM20 20l-4.5-4.5' fill='none' stroke='%234f6269' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 17px center / 20px no-repeat;
  box-shadow: var(--sombra); font: 500 16.5px/1.2 var(--sans); -webkit-appearance: none; appearance: none; }
.pd-busca.pd-busca input::placeholder { color: var(--tenue); }
.pd-busca.pd-busca input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 16%, transparent), var(--sombra); }
[data-tema="noche"] .pd-busca.pd-busca input:focus { border-color: var(--marca-luz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-luz) 18%, transparent), var(--sombra); }
#pantalla[data-mov="recorrido"] .app { --ex: 0px; --ey: 0px; }

/* ===========================================================================
   EL VIDRIO (30 sep, 09:45 — Jorge: «más tipo Apple actual; el fondo puede mejorar, y el efecto»).
   Sustituye a la regla 2 del tecali para la app: el material es vidrio claro y líquido, al estilo del iOS de hoy.
   - Claro, no esmerilado: se ve pasar el fondo y el contenido; la barra, las pestañas, las hojas y las tarjetas flotan.
   - La luz atrapa los cantos: un borde brillante arriba y a la izquierda, un reflejo suave adentro. Sin neón ni halos
     de color: el brillo es blanco y sólo en los cantos.
   - Detrás hay algo que ver: niebla petróleo con manchas de luz y los arcos (luz-*.webp, ya desenfocada; se mueve
     una vez por pantalla, nunca en bucle).
   - Lo que no cambia: el color de la puerta sólo cuando decide la puerta, una sola baya, texto ≥ 4.5:1 sobre lo más
     oscuro que puede pasar detrás (el tinte del vidrio sale de esa cuenta: 55 % de día, 45 % de noche).
   El tecali de anoche sigue a un interruptor: ?material=tecali (o data-material="tecali" en <html>).
   =========================================================================== */
:root[data-material="tecali"] .fondo .arcos { background-image: url('/assets/luz-dia-tecali.webp'); }
:root[data-material="tecali"] [data-tema="noche"] .fondo .arcos { background-image: url('/assets/luz-noche-tecali.webp'); }

:root:not([data-material="tecali"]) .app {
  --v-tinte: rgba(252,254,254,.35); --v-tinte-2: rgba(252,254,254,.5); --v-barra: rgba(252,254,254,.55);
  --v-desenfoque: blur(22px) saturate(185%); --v-desenfoque-barra: blur(26px) saturate(190%);
  --v-canto: rgba(255,255,255,.95); --v-canto-bajo: rgba(255,255,255,.35); --v-sombra: rgba(15,42,48,.28);
  --v-reflejo: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 100%);
  --etiqueta: #43565d;
}
:root:not([data-material="tecali"]) [data-tema="noche"] {
  --v-tinte: rgba(20,32,36,.3); --v-tinte-2: rgba(20,32,36,.45); --v-barra: rgba(12,24,28,.45);
  --etiqueta: #cfdde0; --tenue: #9db1b6;
  --v-canto: rgba(255,255,255,.4); --v-canto-bajo: rgba(255,255,255,.1); --v-sombra: rgba(0,0,0,.55);
  --v-reflejo: linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.05) 100%);
}
/* El fondo: más vivo, y un poco más cerca */
:root:not([data-material="tecali"]) .fondo .arcos { opacity: 1; }
:root:not([data-material="tecali"]) .fondo .velo { background: none; }

/* Las superficies de vidrio */
:root:not([data-material="tecali"]) :is(.panel, .rol-boton, .boton-redondo, .volver, .b-decision .umbral, .pv-arco, .redacta, .placa-coche, .pase, .tarjeta-grande, .po-rol, .pregunta, .deslizador, .btn:not(.primario)) {
  background: var(--v-reflejo), var(--v-tinte);
  -webkit-backdrop-filter: var(--v-desenfoque); backdrop-filter: var(--v-desenfoque);
  border: 1px solid var(--v-canto-bajo);
  box-shadow: inset 0 1px 0 var(--v-canto), inset 1px 0 0 var(--v-canto-bajo), inset 0 -1px 0 rgba(255,255,255,.08),
    0 18px 40px -22px var(--v-sombra), 0 2px 8px -4px var(--v-sombra);
}
:root:not([data-material="tecali"]) :is(.b-decision .umbral, .pv-arco, .redacta, .tarjeta-grande) { background: var(--v-reflejo), var(--v-tinte-2); }
:root:not([data-material="tecali"]) :is(.tarjeta.pide, .b-decision .umbral, .lectura.pide, .pv-arco) {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--v-canto-bajo));
}
/* La barra de arriba: vidrio desde el principio, más transparente arriba */
:root:not([data-material="tecali"]) .app > .barra::before {
  opacity: 1; background: linear-gradient(180deg, var(--v-barra), color-mix(in srgb, var(--v-barra) 70%, transparent));
  -webkit-backdrop-filter: var(--v-desenfoque-barra); backdrop-filter: var(--v-desenfoque-barra);
  border-bottom: 1px solid var(--v-canto-bajo); box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}
:root:not([data-material="tecali"]) .app > .barra:not([data-plegada="1"])::before { opacity: 0; }
/* Las pestañas: una cápsula de vidrio que flota; la activa, una gota más clara */
:root:not([data-material="tecali"]) .pestanas {
  background: var(--v-reflejo), var(--v-barra);
  -webkit-backdrop-filter: var(--v-desenfoque-barra); backdrop-filter: var(--v-desenfoque-barra);
  border: 1px solid var(--v-canto-bajo);
  box-shadow: inset 0 1px 0 var(--v-canto), inset 1px 0 0 var(--v-canto-bajo), 0 24px 50px -20px var(--v-sombra), 0 4px 12px -6px var(--v-sombra);
}
:root:not([data-material="tecali"]) .pestanas .arco-activo::before {
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px -8px var(--v-sombra);
}
:root:not([data-material="tecali"]) [data-tema="noche"] .pestanas .arco-activo::before {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* Botón principal: petróleo con su propio brillo de vidrio */
:root:not([data-material="tecali"]) .btn.primario, :root:not([data-material="tecali"]) .accion-grande {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--primario-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.15), 0 12px 26px -12px var(--v-sombra);
}
/* Las hojas: vidrio más espeso (se leen encima de todo) */
:root:not([data-material="tecali"]) :is(.hoja-roles, .hoja-multa) {
  background: var(--v-reflejo), var(--v-tinte-2);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--v-canto), 0 -30px 80px -30px var(--v-sombra);
}
/* La llave y las piezas oscuras: vidrio ahumado sobre petróleo */
:root:not([data-material="tecali"]) :is(.llave-grande, .v-llave, .po-historia) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 1px 0 0 rgba(255,255,255,.15), 0 30px 60px -24px var(--v-sombra);
}
:root:not([data-material="tecali"]) :is(.llave-grande, .v-llave, .po-historia)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 55%, rgba(255,255,255,.08) 100%);
}
/* Sin desenfoque disponible: más tinte, mismo contraste */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root:not([data-material="tecali"]) .app { --v-tinte: rgba(252,254,254,.86); --v-tinte-2: rgba(252,254,254,.92); --v-barra: rgba(252,254,254,.9); }
}
/* Lo que flota sobre texto y trae texto propio (el aviso que llega, el chip de rol, volver, las hojas): detrás sólo
   se ve luz y color, nunca letras — más cuerpo y más desenfoque que una tarjeta. */
:root:not([data-material="tecali"]) .app { --v-flota: rgba(252,254,254,.96); --v-barra: rgba(252,254,254,.8); }
:root:not([data-material="tecali"]) [data-tema="noche"] { --v-flota: rgba(16,28,32,.95); --v-barra: rgba(12,24,28,.78); }
:root:not([data-material="tecali"]) :is(.rol-boton, .volver, .boton-redondo) {
  background: var(--v-reflejo), var(--v-flota);
  -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%);
}
:root:not([data-material="tecali"]) :is(.hoja-roles, .hoja-multa) { background: var(--v-reflejo), var(--v-flota); -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%); }
:root:not([data-material="tecali"]) .pd-llegada.pd-llegada {
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.1) 45%), #f4f9fa;
  -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%);
  border: 1px solid rgba(255,255,255,.5); color: #112227;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 50px -18px rgba(15,42,48,.45);
}
/* La barra de arriba plegada carga su título: mismo cuerpo que lo que flota sobre texto */
:root:not([data-material="tecali"]) .app > .barra[data-plegada="1"]::before {
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), var(--v-flota);
  -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%);
}
:root:not([data-material="tecali"]) .app > .barra[data-plegada="1"] {
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), var(--v-flota);
  -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%);
  box-shadow: inset 0 -1px 0 var(--v-canto-bajo); transform: translateZ(0);
}
/* Plegada, el chip de rol queda en su arco: el título es de la pantalla */
.app > .barra[data-plegada="1"] .rol-boton { padding: 0 5px; gap: 0; }
.app > .barra[data-plegada="1"] .rol-boton > span, .app > .barra[data-plegada="1"] .rol-boton > .ico { display: none; }

/* ---- Los fondos (30 sep, Jorge: «el fondo es lo que no me acaba de gustar») — se eligen en «Ver Pórtico como» o con ?fondo=a|b|c|d.
   A · malla de luz · B · el pórtico · C · liso y hondo · D · ondas. Todos horneados; texto ≥ 5.8:1 en el peor punto. */
:root:not([data-material="tecali"]) .fondo .arcos { background-image: url('/assets/fondo-a-dia.webp'); left: -6%; top: -4%; width: 112%; height: 108%; }
:root:not([data-material="tecali"]) [data-tema="noche"] .fondo .arcos { background-image: url('/assets/fondo-a-noche.webp'); }
:root[data-fondo="b"]:not([data-material="tecali"]) .fondo .arcos { background-image: url('/assets/fondo-b-dia.webp'); }
:root[data-fondo="b"]:not([data-material="tecali"]) [data-tema="noche"] .fondo .arcos { background-image: url('/assets/fondo-b-noche.webp'); }
:root[data-fondo="c"]:not([data-material="tecali"]) .fondo .arcos { background-image: url('/assets/fondo-c-dia.webp'); }
:root[data-fondo="c"]:not([data-material="tecali"]) [data-tema="noche"] .fondo .arcos { background-image: url('/assets/fondo-c-noche.webp'); }
:root[data-fondo="d"]:not([data-material="tecali"]) .fondo .arcos { background-image: url('/assets/fondo-d-dia.webp'); }
:root[data-fondo="d"]:not([data-material="tecali"]) [data-tema="noche"] .fondo .arcos { background-image: url('/assets/fondo-d-noche.webp'); }
.elige-fondo { display: grid; gap: 8px; margin: 12px 4px 4px; padding-top: 14px; border-top: 1px solid var(--linea); }
.elige-fondo p { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.elige-fondo .ef-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.elige-fondo button { display: grid; gap: 6px; justify-items: center; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.elige-fondo button i { width: 100%; aspect-ratio: 9 / 13; border-radius: 14px; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--linea-2); }
.elige-fondo button[aria-pressed="true"] { color: var(--tinta); }
.elige-fondo button[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px var(--linea-2), 0 0 0 2.5px var(--marca); }
[data-tema="noche"] .elige-fondo button[aria-pressed="true"] i { box-shadow: 0 0 0 2.5px var(--marca-luz); }
:root[data-material="tecali"] .elige-fondo { display: none; }

/* ---- Video corto vertical (p. ej. «Soy José»): un fotograma, play, duración y nombre. Se toca y corre (simulado).
   <button type="button" class="video-corto" data-video="18" data-subtitulos="Hola, soy José|…">
     <img src="/assets/personas/jose-video.svg" alt="">
     <span class="vc-dur">0:18</span><span class="vc-play" aria-hidden="true"></span>
     <span class="vc-pie"><b>Soy José</b><small>Guardia nuevo · desde el lunes 28</small></span>
     <span class="vc-sub" aria-live="polite"></span><span class="vc-barra"><i></i></span>
   </button>                                                                                                        */
.video-corto { position: relative; display: block; width: 100%; max-width: 280px; aspect-ratio: 9 / 16; margin-inline: auto; padding: 0; overflow: hidden;
  border-radius: 28px; background: #0f2a30; text-align: left; box-shadow: 0 30px 60px -26px rgba(15,42,48,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.video-corto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-corto::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(8,20,24,0), rgba(8,20,24,.78)); pointer-events: none; }
.video-corto .vc-dur { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; font: 500 11.5px/1.3 var(--mono); color: #f1f7f8;
  background: rgba(8,20,24,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.video-corto .vc-play { position: absolute; z-index: 2; left: 50%; top: 21%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.35), 0 12px 30px -10px rgba(0,0,0,.45); transition: opacity .3s, transform .3s var(--resorte); }
.video-corto .vc-play::before { content: ''; position: absolute; left: 27px; top: 22px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video-corto .vc-pie { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 22px; color: #f1f7f8; }
.video-corto .vc-pie b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.video-corto .vc-pie small { display: block; font-size: 13px; color: #d5e2e5; }
.video-corto .vc-sub { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 82px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.35; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.video-corto .vc-barra { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; opacity: 0; }
.video-corto .vc-barra i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.video-corto.corre .vc-play { opacity: 0; transform: scale(.8); }
.video-corto.corre .vc-sub, .video-corto.corre .vc-barra { opacity: 1; }
.video-corto.corre .vc-barra i { transform: scaleX(1); transition: transform var(--dura, 18s) linear; }
/* Retrato de perfil (José u otra persona ilustrada) */
.retrato-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--luz), 0 6px 14px -8px rgba(0,0,0,.4); }
.conoce { display: grid; grid-template-columns: 56px 1fr 18px; gap: 14px; align-items: center; width: 100%; padding: 14px 14px 14px 14px; text-align: left; }
.conoce small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); }
.conoce b { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.conoce > span > span { display: block; font-size: 14px; color: var(--texto); }
.conoce .flecha { width: 18px; height: 18px; color: var(--tenue); }

/* ---- Tu llave QR dinámica (30 sep, Jorge: «más protagonismo a leer el QR… tu QR dinámico personal») ---- */
.llave-qr { position: relative; display: grid; gap: 14px; padding: 18px 18px 16px; border-radius: 30px; text-align: center; }
.llave-qr .lq-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); }
.llave-qr .lq-cab span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.llave-qr .lq-cab .ico { width: 14px; height: 14px; }
.qr-dinamico { position: relative; justify-self: center; width: min(62vw, 232px); aspect-ratio: 1; padding: 16px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15,42,48,.08), 0 18px 40px -20px rgba(15,42,48,.45); }
.qr-dinamico img { width: 100%; height: 100%; display: block; transition: opacity .25s; }
.qr-dinamico.cambia img { opacity: .15; }
.qr-dinamico .qd-arco { position: absolute; left: -7px; top: -7px; width: calc(100% + 14px); height: calc(100% + 14px); pointer-events: none; overflow: visible; }
.qr-dinamico { margin: 7px; }
.qr-dinamico .qd-arco rect { fill: none; stroke: var(--marca); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--lq-largo, 1000); stroke-dashoffset: calc(var(--lq-largo, 1000) * (1 - var(--lq-resta, 1))); }
.qr-dinamico { isolation: isolate; contain: paint; }
.qr-dinamico .qd-arco { will-change: contents; }
.llave-qr b.lq-quien { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.llave-qr .lq-sub { font-size: 14px; color: var(--texto); margin-top: -8px; }
.llave-qr .lq-cuenta { font-family: var(--mono); font-size: 12px; color: var(--etiqueta); }
.llave-qr .botonera { margin-top: 2px; }
.leer-qr-boton { display: grid; grid-template-columns: 52px 1fr 18px; gap: 14px; align-items: center; width: 100%; padding: 14px; text-align: left; border-radius: 24px; }
.leer-qr-boton .lq-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--marca) 12%, transparent); color: var(--marca); }
.leer-qr-boton .lq-ico .ico { width: 26px; height: 26px; }
.leer-qr-boton b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.leer-qr-boton small { display: block; font-size: 14px; color: var(--texto); }
.leer-qr-boton .flecha { width: 18px; height: 18px; color: var(--tenue); }
.qr-grande .qr-dinamico { width: min(76vw, 300px); padding: 20px; }
.qr-grande .lq-codigo { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: var(--tecali-hundido); }
.qr-grande .lq-codigo small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); }
.qr-grande .lq-codigo b { font: 600 30px/1 var(--mono); letter-spacing: .08em; }
.lugares { display: flex; gap: 8px; flex-wrap: wrap; }
.visor-scan .qr-en-letrero { position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -54%); padding: 5%; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
.visor-scan .qr-en-letrero img { width: 100%; display: block; }
.visor-scan .qr-en-letrero small { display: block; margin-top: 6px; text-align: center; font: 600 9px/1.2 var(--mono); letter-spacing: .08em; color: #112227; }
@media (prefers-reduced-motion: reduce) { .qr-dinamico .qd-arco rect, .qr-dinamico img { transition: none; } }

/* ---- Leer un QR primero (Jorge: «dejar predeterminado primero la lectura de QR, con el fondo como de cámara») ---- */
.leer-grande { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-radius: 30px; text-align: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 24px 50px -24px rgba(15,42,48,.55); }
.leer-grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leer-grande::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,24,.15), rgba(8,20,24,.55)); }
.leer-grande .esquinas { position: absolute; inset: 16% 22%; z-index: 1; opacity: .9; }
.leer-grande .lg-centro { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.leer-grande .lg-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.3); }
.leer-grande .lg-ico .ico { width: 30px; height: 30px; }
.leer-grande b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.leer-grande small { font-size: 14px; color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* el lector: la foto o la cámara de verdad, y la lectura simulada a los 2 s */
.camara-viva { aspect-ratio: 3 / 4; background: #1a1c1e; }
.camara-viva .cv-foto, .camara-viva .cv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camara-viva .cv-video { opacity: 0; transition: opacity .4s; }
.camara-viva.en-vivo .cv-video { opacity: 1; }
.camara-viva .qr-en-letrero { left: 50%; top: 46%; width: 44%; opacity: 0; transform: translate(-50%, -50%) scale(.86); animation: qr-llega .35s var(--resorte) 2s both; }
@keyframes qr-llega { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.camara-viva .estado-lectura .ya, .camara-viva .estado-lectura .aun { animation-delay: 2.2s; }
.cv-nota { display: flex; align-items: center; gap: 8px; margin: -6px 6px 0; font-size: 13px; color: var(--etiqueta); }
.cv-nota .ico { width: 15px; height: 15px; }
.cv-respuesta { opacity: 0; transform: translateY(10px); animation: sube-resp .45s var(--resorte) 2.5s both; }
@keyframes sube-resp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .camara-viva .qr-en-letrero, .cv-respuesta { animation-duration: 0s; } }

/* La caseta: siempre C · Liso de noche (lee en una tableta, de noche; nada se mueve detrás de los colores de la puerta) */
:root:not([data-material="tecali"]) .app[data-rol-actual="caseta"] .fondo .arcos { background-image: url('/assets/fondo-c-noche.webp') !important; }
.app[data-rol-actual="caseta"] .elige-fondo { display: none; }