/* Panel de la Fábrica · V4 E13c «muy visual y guiado por Ani» (maquetas de v4/capturas/e13c-ideas/).
   Paleta de la maqueta: tinta #172033, piso #EEF1F4, ámbar #F2B84B, verde #2E9E6A, coral #E35D4A, cielo #E3ECF8.
   Tipografías servidas por el propio panel (licencia OFL, panel/LEGAL.md): Bricolage Grotesque (títulos) y
   Atkinson Hyperlegible (texto). Letra grande, mucho aire, poco texto. Con «reducir movimiento», nada se mueve. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/publico/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/publico/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/publico/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/publico/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/publico/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinta: #172033;
  --tinta-suave: #4A5568;
  --papel: #EEF1F4;          /* el piso: fondo de la página */
  --superficie: #FFFFFF;     /* tarjetas y globos */
  --borde: #D5DBE3;
  --gris-suave: #E4E8ED;
  --ambar: #F2B84B;
  --ambar-hondo: #D69A2C;
  --ambar-luz: #FFD27A;
  --ambar-suave: #FCEBC6;
  --ambar-tinta: #6B4A00;
  --verde: #1C6B47;          /* verde para letra */
  --verde-vivo: #2E9E6A;
  --verde-suave: #D6F0E2;
  --coral: #E35D4A;
  --rojo: #A32F25;
  --rojo-suave: #F9DEDA;
  --amarillo-suave: #FBF1C7;
  --amarillo-tinta: #6A5300;
  --cielo: #E3ECF8;
  --oscura: #172033;         /* la tarjeta principal: siempre tinta */
  --radio: 20px;
  --sombra: 0 2px 0 var(--borde);
  --curva: cubic-bezier(0.165, 0.84, 0.44, 1);
  --texto: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --titulos: "Bricolage Grotesque", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --fuente: var(--texto);
  --fuente-titulos: var(--titulos);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 18px/1.5 var(--texto); color: var(--tinta); background: var(--papel); }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code { font: 0.84em var(--mono); background: var(--gris-suave); padding: 0.08em 0.35em; border-radius: 5px; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--ambar-hondo); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.15; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h1 { font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h2 { font-weight: 700; font-size: 1.25rem; }
h3 { font-weight: 700; font-size: 1.05rem; margin-top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 24px; height: 24px; flex: none; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--ambar); color: #172033; padding: 0.5rem 1rem; z-index: 100; border-radius: 0 0 12px 0; }
.saltar:focus { left: 0.5rem; top: 0.5rem; }

/* ——— Ani: el cuadrito ámbar con carita ——— */
.ani { flex: none; display: inline-block; width: 64px; height: 64px; border-radius: 22px; background: var(--ambar); position: relative; box-shadow: 0 6px 0 var(--ambar-hondo); }
.ani::before, .ani::after { content: ""; position: absolute; top: 24px; width: 9px; height: 12px; border-radius: 5px; background: #172033; }
.ani::before { left: 19px; }
.ani::after { right: 19px; }
.ani i { position: absolute; left: 50%; bottom: 14px; width: 20px; height: 9px; border: 3px solid #172033; border-top: 0; border-radius: 0 0 12px 12px; transform: translateX(-50%); }
.ani-grande { width: 96px; height: 96px; border-radius: 32px; box-shadow: 0 8px 0 var(--ambar-hondo); }
.ani-grande::before, .ani-grande::after { top: 34px; width: 13px; height: 18px; border-radius: 7px; }
.ani-grande::before { left: 28px; }
.ani-grande::after { right: 28px; }
.ani-grande i { bottom: 20px; width: 30px; height: 13px; border-width: 4px; }
.ani-chica { width: 44px; height: 44px; border-radius: 15px; box-shadow: 0 4px 0 var(--ambar-hondo); }
.ani-chica::before, .ani-chica::after { top: 16px; width: 6px; height: 9px; }
.ani-chica::before { left: 13px; }
.ani-chica::after { right: 13px; }
.ani-chica i { bottom: 9px; width: 14px; height: 6px; border-width: 2px; }
.ani-mini { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 3px 0 var(--ambar-hondo); }
.ani-mini::before, .ani-mini::after { top: 14px; width: 6px; height: 8px; border-radius: 3px; }
.ani-mini::before { left: 12px; }
.ani-mini::after { right: 12px; }
.ani-mini i { bottom: 8px; width: 13px; height: 6px; border-width: 2px; }
/* Ani parpadea de vez en cuando (no con «reducir movimiento»). */
.ani::before, .ani::after { animation: parpadeo-ani 6s infinite; transform-origin: 50% 60%; }
@keyframes parpadeo-ani { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.15); } }

.globo { background: var(--superficie); border-radius: 4px 28px 28px 28px; padding: 24px 30px; box-shadow: var(--sombra); }
.globo h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.08; margin: 0; }
.globo p { margin: 10px 0 0; font-size: 1.1rem; color: var(--tinta-suave); }

/* ——— Arriba: marca, menú con dibujos y quién entró ——— */
.tope { display: flex; align-items: center; gap: 1.25rem; padding: 18px 32px; position: relative; z-index: 20; }
.marca { display: flex; align-items: center; gap: 10px; font: 700 19px var(--titulos); text-decoration: none; color: var(--tinta); margin: 0; }
.sello { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ambar); color: #172033; font: 800 1rem var(--titulos); flex: none; }
.menu { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.menu a, .mas-menu summary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 1rem; color: var(--tinta); cursor: pointer; }
.menu a:hover, .mas-menu summary:hover, .mas-menu[open] summary { background: var(--superficie); }
.menu a[aria-current="page"], .mas-menu summary.activo { background: var(--superficie); box-shadow: inset 0 -3px 0 var(--ambar); }
.mas-menu { position: relative; }
.mas-menu summary { list-style: none; }
.mas-menu summary::-webkit-details-marker { display: none; }
.mas-lista { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 18rem; background: var(--superficie); border: 2px solid var(--borde); border-radius: 20px; padding: 8px; display: grid; gap: 2px; box-shadow: 0 24px 50px -24px rgb(23 32 51 / 45%); }
.mas-lista a, .mas-lista button { font-weight: 700; }
.mas-lista .mas-guia { border-top: 2px solid var(--gris-suave); border-radius: 0 0 14px 14px; margin-top: 4px; padding-top: 12px; }
.salir { margin: 0; }
.salir button { display: flex; width: 100%; align-items: center; gap: 8px; font: inherit; font-weight: 700; background: none; border: 0; color: var(--tinta); padding: 9px 14px; border-radius: 14px; cursor: pointer; text-align: left; }
.salir button:hover, .mas-lista a:hover { background: var(--papel); }
.yo { display: flex; align-items: center; gap: 14px; }
.estado { display: flex; align-items: center; gap: 8px; background: var(--verde-suave); color: var(--verde); border-radius: 99px; padding: 6px 14px 6px 10px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.estado b { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-vivo); }
.estado-mal { background: var(--rojo-suave); color: var(--rojo); }
.estado-mal b { background: var(--coral); }
.foto { width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: var(--superficie); display: grid; place-items: center; font-weight: 700; flex: none; }

main { padding: 12px clamp(1rem, 3vw, 2.5rem) 140px; max-width: 1500px; margin: 0 auto; }
.encabezado { margin-bottom: 1.5rem; }
.bajada { color: var(--tinta-suave); font-size: 1.1rem; margin: 0.25rem 0 0; max-width: 70ch; }
.migas { color: var(--tinta-suave); font-size: 0.95rem; margin: 0 0 0.5rem; }
.tenue { color: var(--tinta-suave); font-size: 0.95rem; }
.vacio { color: var(--tinta-suave); font-style: italic; font-size: 0.95rem; margin: 0.25rem 0; }
.cuenta { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.4em; margin-left: 0.3rem; font-size: 0.78rem; border-radius: 999px; background: var(--gris-suave); color: var(--tinta); font-weight: 700; vertical-align: 0.1em; }
.mas { font: 400 0.9rem var(--texto); margin-left: 0.5rem; }
.tarjeta { background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio); padding: 1.2rem 1.35rem; }
section.tarjeta { margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0; }
.chip { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--gris-suave); color: var(--tinta); white-space: nowrap; }
.chip-verde { background: var(--verde-suave); color: var(--verde); }
.chip-amarillo { background: var(--amarillo-suave); color: var(--amarillo-tinta); }
.chip-rojo { background: var(--rojo-suave); color: var(--rojo); }
.chip-gris { background: var(--gris-suave); color: var(--tinta-suave); }
.chip-acento { background: var(--ambar-suave); color: var(--ambar-tinta); }
.chip-vivo { background: var(--tinta); color: var(--superficie); }
.aviso { padding: 0.9rem 1.1rem; border-radius: 16px; margin: 0 auto 1.25rem; border: 2px solid; max-width: 900px; }
.aviso-ok { background: var(--verde-suave); border-color: #b6dcc4; color: #134a2f; }
.aviso-error { background: var(--rojo-suave); border-color: #ecbab4; color: #7a2019; }
.aviso-aviso { background: var(--amarillo-suave); border-color: #ead9a0; color: var(--amarillo-tinta); }
.aviso-info { background: var(--gris-suave); border-color: var(--borde); color: var(--tinta-suave); font-size: 0.95rem; }
.boton { display: inline-block; font: inherit; font-weight: 700; background: var(--tinta); color: var(--superficie); border: 0; border-radius: 14px; padding: 0.7rem 1.3rem; text-decoration: none; cursor: pointer; }
.boton:hover { background: #2c3849; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton-grande { padding: 0.9rem 1.8rem; font-size: 1.1rem; margin-top: 0.5rem; }
.boton-si { background: var(--ambar); color: #172033; }
.boton-si:hover { background: var(--ambar-luz); }
.boton-claro { background: transparent; color: var(--tinta); border: 2px solid var(--borde); }
.boton-claro:hover { background: var(--gris-suave); color: var(--tinta); }
.boton-peligro { background: var(--rojo); color: #fff; }
.boton-peligro:hover { background: #86251d; }
.boton-texto { font: inherit; font-weight: 700; background: none; border: 0; color: var(--tinta-suave); text-decoration: underline; cursor: pointer; padding: 0.7rem 0.4rem; }
.punto-vivo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--verde-vivo); margin-right: 0.55rem; box-shadow: 0 0 0 4px rgb(46 158 106 / 22%); animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgb(46 158 106 / 6%); } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ——— La barra de Ani, fija abajo en todas las pantallas ——— */
.pie-ani { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgb(238 241 244 / 0%), var(--papel) 45%); pointer-events: none; display: flex; justify-content: center; }
.barra-ani { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 2px solid var(--borde); border-radius: 20px; padding: 9px 9px 9px 14px; width: 100%; max-width: 760px; box-shadow: 0 18px 40px -26px rgb(23 32 51 / 55%); }
.barra-ani:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 4px var(--ambar-suave), 0 18px 40px -26px rgb(23 32 51 / 55%); }
.barra-ani input[type="text"] { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--tinta); background: transparent; border: 0; padding: 0.55rem 0.25rem; }
.barra-ani input[type="text"]:focus { outline: none; }
.barra-ani input::placeholder { color: var(--tinta-suave); opacity: 1; }
.boton-voz { width: 52px; height: 52px; border-radius: 16px; background: var(--tinta); display: grid; place-items: center; border: 0; cursor: pointer; flex: none; }
.boton-voz[hidden] { display: none; }
.boton-voz .ic { width: 24px; height: 24px; }
.boton-voz:hover { background: #2c3849; }
.boton-voz.oyendo { background: var(--coral); box-shadow: 0 0 0 5px rgb(227 93 74 / 25%); animation: oyendo 1.2s ease-in-out infinite; }
@keyframes oyendo { 50% { box-shadow: 0 0 0 9px rgb(227 93 74 / 8%); } }

/* ——— Entrada (maqueta v=0) ——— */
.pagina-entrada { background: var(--superficie); }
main.entrada { max-width: none; padding: 0; margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 480px 1fr; }
.entrar { padding: 40px 56px; display: flex; flex-direction: column; gap: 14px; justify-content: center; position: relative; background: var(--superficie); }
.entrar .marca { position: absolute; top: 32px; left: 56px; }
.entrar h1 { font-size: 52px; line-height: 1.02; font-weight: 800; margin: 0; }
.entrar .bajada { font-size: 20px; margin: 0 0 8px; }
.entrada-form label { display: block; font-weight: 700; font-size: 16px; margin: 12px 0 6px; }
.entrada-form label .tenue { font-weight: 400; }
.entrada-form input { width: 100%; height: 56px; font: inherit; font-size: 1.1rem; padding: 0 16px; border: 2px solid var(--borde); border-radius: 16px; background: var(--papel); color: var(--tinta); }
.entrada-form input:focus { border-color: var(--tinta); background: var(--superficie); box-shadow: 0 0 0 4px var(--ambar-suave); outline: none; }
.boton-entrar { display: block; width: 100%; margin-top: 22px; background: var(--ambar); color: #172033; border-radius: 16px; padding: 17px; text-align: center; font-size: 20px; }
.boton-entrar:hover { background: var(--ambar-luz); }
.ayuda { font-size: 16px; color: var(--tinta-suave); margin: 4px 0 0; }
.entrada-ayuda summary { cursor: pointer; font-weight: 700; }
.entrada-ayuda p { margin: 0.4rem 0 0; }
.lado { position: relative; background: var(--papel); display: flex; align-items: center; justify-content: center; padding: 40px 40px 120px; overflow: hidden; }
.marco-escena { width: 100%; max-width: 880px; aspect-ratio: 8 / 5; border-radius: 36px; overflow: hidden; box-shadow: 0 30px 70px -40px rgb(23 32 51 / 45%); background: #EEF1F4; }
.escena { display: block; width: 100%; height: 100%; }
.escena-rotulo, .escena text { font: 700 17px var(--titulos); }
.lado .hola { position: absolute; left: 64px; bottom: 60px; display: flex; gap: 14px; align-items: flex-end; }
.lado .hola .globo { margin: 0; padding: 14px 20px; border-radius: 24px 24px 24px 4px; font-size: 18px; color: var(--tinta); }

/* La escena se mueve (CSS, sin SMIL): objetos que viajan, luces, engranaje y la banda. */
.viaja { animation: viaje 12s linear infinite; }
.v1 { animation-delay: -4s; }
.v2 { animation-delay: -8s; }
@keyframes viaje { from { transform: translateX(-60px); } to { transform: translateX(860px); } }
.luz { animation: luz 1.6s ease-in-out infinite; }
.l2 { animation-delay: 0.5s; }
.l3 { animation-delay: 1s; }
@keyframes luz { 50% { opacity: 0.25; } }
.gira { transform-box: fill-box; transform-origin: center; animation: giro 5s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.rayas { animation: banda 1.1s linear infinite; }
@keyframes banda { to { transform: translateX(28px); } }

/* ——— Inicio (maqueta v=1, «Te llevo de la mano») ——— */
.pagina-inicio main { max-width: 980px; }
.inicio { display: flex; flex-direction: column; align-items: center; gap: 36px; padding-top: clamp(8px, 4vh, 48px); }
.saludo { display: flex; gap: 22px; align-items: flex-start; width: 100%; }
.saludo .globo { flex: 1; }
.saludo-chico { margin-bottom: 1.5rem; max-width: 900px; }
.saludo-chico .globo { padding: 18px 24px; }
.saludo-chico .globo h1, .saludo-chico .globo h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0; }
.opciones { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 20px; width: 100%; }
.sin-principal .opciones { grid-template-columns: 1fr 1fr; }
.opcion { position: relative; border-radius: 26px; padding: 26px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; background: var(--superficie); border: 2px solid var(--borde); }
.opcion.principal { background: var(--oscura); color: #fff; border-color: var(--oscura); }
.dibujo { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; color: #172033; flex: none; }
.dibujo .ic { width: 48px; height: 48px; }
.dibujo-ambar { background: var(--ambar); }
.dibujo-ambar-suave { background: #FCEBC6; }
.dibujo-verde { background: #D6F0E2; }
.opcion h2 { font-size: 26px; line-height: 1.15; margin: 0; }
.opcion p { font-size: 17px; color: var(--tinta-suave); margin: 0; }
.opcion.principal p { color: #C9D2E0; }
.opcion .ir { margin-top: auto; align-self: flex-start; background: var(--ambar); color: #172033; font: inherit; font-weight: 700; border: 0; border-radius: 14px; padding: 12px 20px; font-size: 18px; text-decoration: none; cursor: pointer; }
.opcion .ir:hover { background: var(--ambar-luz); }
.opcion .ir.suave { background: var(--papel); color: var(--tinta); }
.opcion .ir.suave:hover { background: var(--gris-suave); }
/* Toda la tarjeta se toca (el enlace la cubre); la principal, solo su botón. */
.opcion:not(.principal) .ir::after { content: ""; position: absolute; inset: 0; border-radius: 26px; }
.opcion:not(.principal):hover { border-color: var(--tinta); }
.opcion-pie { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.opcion-pie form { margin: 0; }
.opcion-pie .ir { margin-top: 0; }
.explicame { color: #E3E8F0; font-weight: 700; font-size: 16px; }
.otras { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.otras::after { content: " →"; }
.opcion.principal .de-cuantas { position: absolute; top: 26px; right: 26px; margin: 0; background: rgb(255 255 255 / 12%); color: #fff; font-weight: 700; font-size: 15px; border-radius: 99px; padding: 4px 12px; }
.opcion-pie { gap: 10px 14px; }
.inicio > * { animation: subir 1000ms var(--curva) both; }
.inicio > :nth-child(2) { animation-delay: 120ms; }

/* ——— La planta (maqueta v=2) ——— */
.pagina-planta main { max-width: 1440px; padding-left: 40px; padding-right: 40px; }
.planta-cab { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.planta-cab .globo { border-radius: 28px 28px 28px 4px; padding: 18px 30px; }
.planta-cab .globo h1 { font-size: 30px; }
.planta { position: relative; background: var(--superficie); border-radius: 32px; padding: 34px 30px 30px; }
.planta .cinta { position: absolute; left: 8%; right: 8%; top: 92px; height: 16px; border-radius: 8px; background: repeating-linear-gradient(90deg, #C9D1DC 0 18px, #DCE2EA 18px 36px); }
.estaciones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; align-items: start; }
.estacion { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.estacion:nth-child(1) { grid-column: 1; } .estacion:nth-child(2) { grid-column: 2; } .estacion:nth-child(3) { grid-column: 3; } .estacion:nth-child(4) { grid-column: 4; } .estacion:nth-child(5) { grid-column: 5; }
.maquina { width: 132px; height: 132px; border-radius: 36px; background: var(--papel); display: grid; place-items: center; border: 3px solid var(--borde); position: relative; z-index: 1; color: #172033; }
.maquina .ic { width: 64px; height: 64px; }
.estacion h2 { font-size: 22px; margin: 0; }
.estacion .que { font-size: 15px; color: var(--tinta-suave); max-width: 170px; margin: 0; }
.fichas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fichas-fila { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.ficha { display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 3px solid var(--borde); border-radius: 99px; padding: 6px 16px 6px 6px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--tinta); max-width: 100%; }
.ficha span:not(.sr) { overflow-wrap: anywhere; text-align: left; }
.ficha:hover { box-shadow: 0 6px 0 -2px var(--borde); transform: translateY(-1px); }
.ficha i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; flex: none; }
.ficha-espera { border-color: var(--ambar); background: var(--ambar-suave); color: #172033; }
.ficha-espera i { background: var(--ambar); color: #172033; }
.ficha-va { border-color: var(--verde-vivo); background: var(--verde-suave); color: #172033; }
.ficha-va i { background: #1F7A52; color: #fff; }
.ficha-para { border-color: var(--coral); background: var(--rojo-suave); color: #172033; }
.ficha-para i { background: #B8402F; color: #fff; }
.ficha.foco { outline: 6px solid rgb(242 184 75 / 35%); outline-offset: 0; }
.senal { grid-row: 1; align-self: start; margin-top: 260px; display: flex; gap: 12px; align-items: flex-start; position: relative; z-index: 2; padding-left: 8px; }
.senal-abajo { grid-row: 2; grid-column: 1 / -1; margin-top: 24px; justify-self: center; }
.cs-1 { grid-column-start: 1; } .cs-2 { grid-column-start: 2; } .cs-3 { grid-column-start: 3; } .cs-4 { grid-column-start: 4; } .cs-5 { grid-column-start: 5; }
.ce-3 { grid-column-end: 3; } .ce-4 { grid-column-end: 4; } .ce-5 { grid-column-end: 5; } .ce-6 { grid-column-end: 6; }
.senal .globo { max-width: 380px; padding: 18px 22px; border: 3px solid var(--ambar); border-radius: 4px 24px 24px 24px; position: relative; box-shadow: none; }
.senal .globo::before { content: ""; position: absolute; left: -15px; top: 22px; width: 12px; border-top: 3px dashed var(--ambar); }
.senal .globo p { margin: 0; color: var(--tinta); font-size: 17px; }
.ir { display: inline-block; margin-top: 12px; background: var(--ambar); color: #172033; font-weight: 700; border-radius: 12px; padding: 9px 16px; text-decoration: none; }
.ir:hover { background: var(--ambar-luz); }
.leyenda { display: flex; gap: 26px; padding-top: 34px; margin: 0; color: var(--tinta-suave); font-size: 16px; justify-content: center; flex-wrap: wrap; }
.leyenda span { display: flex; align-items: center; gap: 8px; }
.leyenda b { width: 16px; height: 16px; border-radius: 50%; }
.ley-va { background: var(--verde-vivo); }
.ley-espera { background: var(--ambar); }
.ley-para { background: var(--coral); }
.trabajando { margin: 22px auto 0; max-width: 900px; text-align: center; color: var(--tinta-suave); font-size: 1rem; }
.planta-nota { text-align: center; margin: 10px 0 0; }
.plegable-suave { max-width: 900px; margin: 18px auto 0; }

/* ——— Un paso a la vez (maqueta v=3) ——— */
.pagina-paso main { display: flex; flex-direction: column; align-items: center; }
.mazo { position: relative; width: min(1000px, 100%); margin-top: clamp(8px, 5vh, 60px); }
.tarjeta-paso { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; background: var(--superficie); border-radius: 34px; overflow: hidden; min-height: 560px; box-shadow: 0 30px 60px -30px rgb(23 32 51 / 35%); animation: subir 1000ms var(--curva) both; }
.paso-dibujo { position: relative; background: #EEF1F4; display: flex; align-items: center; }
.sello-paso { position: absolute; left: 24px; bottom: 24px; right: 24px; max-width: 320px; margin: 0; background: rgb(23 32 51 / 88%); color: #fff; border-radius: 16px; padding: 12px 16px; font-size: 16px; }
.paso-texto { padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; }
.pasos { display: flex; gap: 8px; }
.pasos b { flex: 1; height: 8px; border-radius: 4px; background: var(--borde); }
.pasos b.ya { background: var(--tinta); }
.cuenta-pasos { font-size: 16px; color: var(--tinta-suave); font-weight: 700; margin: 0; }
.tarjeta-paso h1 { font-size: 46px; line-height: 1.05; margin: 0; }
.paso-porque { font-size: 20px; color: var(--tinta-suave); margin: 0; }
.dice { display: flex; gap: 14px; align-items: center; background: var(--cielo); border-radius: 20px; padding: 14px 16px; }
.dice p { font-size: 17px; margin: 0; color: #172033; }
.acciones { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.acciones form { margin: 0; display: flex; }
.acciones .si, .acciones .no { font: inherit; font-weight: 700; border-radius: 16px; padding: 16px 26px; font-size: 20px; border: 0; cursor: pointer; text-decoration: none; text-align: center; color: #172033; }
.acciones .si { background: var(--ambar); }
.acciones .si:hover { background: var(--ambar-luz); }
.acciones .no { background: var(--papel); color: var(--tinta); }
.acciones .no:hover { background: var(--gris-suave); }
.paso-enlaces { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; font-size: 16px; color: var(--tinta-suave); }
.detras { position: absolute; inset: 0; border-radius: 34px; background: var(--superficie); z-index: 1; }
.detras.d1 { transform: translate(26px, -14px) rotate(2deg); opacity: 0.75; }
.detras.d2 { transform: translate(50px, -26px) rotate(4deg); opacity: 0.45; }
.lista-completa { width: min(1000px, 100%); max-width: none; margin-top: 48px; }

/* ——— Pregúntale ——— */
.pagina-asistente main, .pagina-ani main { max-width: 900px; }
.ejemplos { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }
.senala-abajo { margin: 0.5rem 0 0; }

/* ——— Guía de primera vez (Ani señala, paso a paso) ——— */
.guia-velo { position: fixed; inset: 0; background: rgb(23 32 51 / 62%); z-index: 40; }
.guia { position: fixed; z-index: 60; display: flex; gap: 16px; align-items: flex-start; background: var(--superficie); color: var(--tinta); border: 3px solid var(--ambar); border-radius: 28px; padding: 22px 24px; width: min(440px, calc(100vw - 24px)); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 60%); }
.guia-cuerpo { flex: 1; }
.guia-cuenta { margin: 0 0 4px; font-weight: 700; font-size: 15px; color: var(--tinta-suave); }
.guia h2 { font-size: 24px; margin: 0 0 6px; }
.guia p { margin: 0; font-size: 17px; }
.guia-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.guia-botones form { margin: 0; }
.guia-paso-1 { right: 32px; top: 50%; transform: translateY(-50%); }
.guia-paso-2 { left: 32px; top: 50%; transform: translateY(-50%); }
.guia-paso-3 { left: 50%; bottom: 120px; transform: translateX(-50%); }
.guia-paso-4 { left: 50%; top: 96px; transform: translateX(-50%); }
.guia-activa .inicio > *, .guia-activa .inicio * { animation: none !important; }
.guia-1 #principal, .guia-1.guia-sin-principal .saludo, .guia-2 #ver-todo { position: relative; z-index: 50; box-shadow: 0 0 0 6px var(--ambar); }
.guia-1.guia-sin-principal .saludo .globo { box-shadow: none; }
.guia-3 .pie-ani { z-index: 50; background: none; }
.guia-3 .barra-ani { box-shadow: 0 0 0 6px var(--ambar); }
.guia-4 .tope { z-index: 50; }
.guia-4 .menu { background: var(--papel); border-radius: 18px; box-shadow: 0 0 0 6px var(--ambar); padding: 4px; }
.guia-activa .pie-ani { pointer-events: none; }
.guia-activa.guia-3 .barra-ani { pointer-events: auto; }
#principal, #ver-todo, #barra-ani, #menu { scroll-margin-top: 120px; scroll-margin-bottom: 140px; }

/* ——— Piezas de siempre: proyectos, ficha, formularios, ventas, catálogo, horas y operación ——— */
.lista-simple, .lista-necesitan, .bitacora, .pcs, .fases { list-style: none; margin: 0; padding: 0; }
.lista { display: grid; gap: 0.6rem; }
.tarjeta-enlace { display: block; text-decoration: none; }
.tarjeta-enlace:hover .proyecto-nombre { text-decoration: underline; }
.proyecto-nombre { display: block; font: 600 1.15rem/1.2 var(--fuente-titulos); }
.proyecto-etapa { display: block; color: var(--tinta-suave); font-size: 0.85rem; margin: 0.2rem 0 0.5rem; }
.lista-simple li { padding: 0.25rem 0; }

/* Te necesitan */
.lista-necesitan { display: grid; gap: 0.75rem; }
.necesita p { margin: 0 0 0.35rem; }
.necesita-que { font-size: 1rem; max-width: 95ch; }
.tarjeta .lista-necesitan .necesita { border-top: 1px solid var(--borde); padding-top: 0.75rem; }
.tarjeta .lista-necesitan .necesita:first-child { border-top: 0; padding-top: 0; }
.responder { margin-top: 0.5rem; }
.responder summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--tinta); display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid var(--borde); }
.responder summary:hover { border-color: var(--tinta); }
.responder[open] summary { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.responder form { margin-top: 0.75rem; max-width: 640px; }

/* Ficha */
.fases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; margin: 0 0 1.5rem; counter-reset: f; }
.fases li { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--gris-suave); color: var(--tinta-suave); font-size: 0.88rem; font-weight: 600; }
.fases li span { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; font-size: 0.72rem; flex: none; }
.fases li.hecha { background: var(--verde-suave); color: var(--verde); }
.fases li.actual { background: var(--tinta); color: #fff; }
.fases li.actual span { background: var(--ambar); color: var(--tinta); }
.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifra { font: 600 2.2rem/1 var(--fuente-titulos); margin: 0.25rem 0 0.75rem; }
.cifra small { font: 600 0.9rem var(--fuente); color: var(--tinta-suave); }
.datos { margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.datos dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.datos dd { margin: 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.pcs { display: grid; gap: 0.5rem; }
.pc { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.92rem; }
.pc strong { flex: 1 1 10rem; font-weight: 600; }
.lista-falta li { border-top: 1px solid var(--borde); padding: 0.55rem 0; font-size: 0.92rem; }
.lista-falta li:first-child { border-top: 0; }
.bitacora li { display: grid; grid-template-columns: 9.5rem 5rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--borde); font-size: 0.9rem; }
.bitacora li:first-child { border-top: 0; }
.bitacora time { color: var(--tinta-suave); }

/* Formularios */
.formulario label { display: block; font-weight: 600; margin: 0.9rem 0 0.35rem; }
.formulario input[type="text"], .formulario input:not([type]), .formulario input[type="password"], .formulario textarea {
  width: 100%; font: inherit; padding: 0.65rem 0.8rem; border: 1px solid #b9b4a8; border-radius: 10px; background: #fff; color: var(--tinta);
}
.formulario textarea { resize: vertical; }
.formulario [aria-invalid="true"] { border-color: var(--rojo); }
.error-campo { color: var(--rojo); font-size: 0.88rem; margin: 0.3rem 0 0; font-weight: 600; }
.nueva { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.modos { border: 0; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.modos legend { font-weight: 700; margin-bottom: 0.6rem; font-size: 1.05rem; }
.formulario .modo { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.75rem; margin: 0 !important; padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 400 !important; }
.modo input { width: 1.1rem; height: 1.1rem; accent-color: var(--tinta); margin: 0; }
.modo-n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gris-suave); font-weight: 700; font-size: 0.85rem; }
.modo strong { display: block; }
.modo .tenue { display: block; font-size: 0.85rem; }
.modo:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta); }
.modo:has(input:checked) .modo-n { background: var(--ambar); }
.campos > label:first-child { margin-top: 0; }

/* Entrar */

/* Versión 3: ventas y catálogo */
.aviso-aviso { background: var(--amarillo-suave); border-color: #ead9a0; color: var(--amarillo-tinta); }
.tabla-comercial { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabla-comercial th, .tabla-comercial td { text-align: left; vertical-align: top; padding: 0.55rem 0.5rem; border-top: 1px solid var(--borde); }
.tabla-comercial tbody tr:first-child th, .tabla-comercial tbody tr:first-child td { border-top: 0; }
.tabla-comercial thead th { font-size: 0.8rem; color: var(--tinta-suave); font-weight: 600; border-top: 0; }
.tabla-comercial tbody th { width: 11rem; font-weight: 600; }
.tabla-comercial .chip { margin-right: 0.2rem; }
.tabla-ruta { width: 7rem; text-align: right; white-space: nowrap; }
.lista-plantillas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.plantilla h2 { font: 600 1.3rem/1.2 var(--fuente-titulos); }
.plantilla .cifra { font-size: 1.7rem; margin: 0.6rem 0 0.3rem; }
.plantilla .tabla-comercial { margin: 0.75rem 0 1rem; }


@media (max-width: 1100px) {
  .rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fases li { font-size: 0.78rem; padding: 0.45rem 0.5rem; }
  .rejilla, .rejilla-2, .nueva { grid-template-columns: 1fr; }
  .bitacora li { grid-template-columns: 1fr auto; }
  .bitacora li span { grid-column: 1 / -1; }
  .tarjeta { padding: 1rem; }
  .tabla-comercial, .tabla-comercial tbody, .tabla-comercial tr { display: block; }
  .tabla-comercial tbody tr { border-top: 1px solid var(--borde); padding: 0.5rem 0; }
  .tabla-comercial tbody tr:first-child { border-top: 0; }
  .tabla-comercial tbody th, .tabla-comercial tbody td { display: block; border: 0; padding: 0.1rem 0; width: auto; text-align: left; }
  .plantilla .tabla-comercial thead { display: none; }
  .plantilla .tabla-comercial tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; }
  .plantilla .tabla-comercial tbody td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .lista-plantillas { grid-template-columns: 1fr; }
}

/* Versión 4: horas que la Fábrica te devolvió */
.meses { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.meses a { text-decoration: none; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--borde); font-size: 0.9rem; }
.meses a[aria-current="page"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.devueltas { background: var(--tinta); color: #fff; border-radius: var(--radio); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.devueltas h2 { color: var(--ambar); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.devueltas-cifra { font: 600 clamp(3.2rem, 9vw, 5.5rem)/1 var(--fuente-titulos); margin: 0.25rem 0 0.75rem; letter-spacing: -0.02em; }
.devueltas-cifra small { font: 600 1.1rem var(--fuente); color: var(--ambar); letter-spacing: 0; }
.devueltas-texto { font-size: 1.1rem; margin: 0; max-width: 60ch; color: #e6e9ee; }
.devueltas-texto strong { color: #fff; }
.cuatro { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cuatro h2 { font-size: 0.95rem; }
.cuatro .tenue { margin: 0; }
.desglose { border-top: 1px solid var(--borde); padding: 0.55rem 0; }
.desglose:first-of-type { margin-top: 0.5rem; }
.desglose summary { cursor: pointer; display: flex; gap: 0.75rem; justify-content: space-between; font-weight: 600; padding: 0.25rem 0; }
.desglose summary { list-style: none; }
.desglose summary::-webkit-details-marker { display: none; }
.desglose summary span:first-child { flex: 1; }
.desglose summary span:first-child::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--tinta-suave); transition: transform 0.15s; }
.desglose[open] summary span:first-child::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .desglose summary span:first-child::before { transition: none; } }
.partidas { list-style: none; margin: 0.4rem 0 0.5rem; padding: 0; }
.partidas li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--gris-suave); font-size: 0.93rem; }
.partidas li:first-child { border-top: 0; }
.partida-h { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.partida-de { grid-column: 1 / -1; font-size: 0.8rem; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cuatro { grid-template-columns: 1fr; gap: 0.6rem; } .devueltas-texto { font-size: 1rem; } }

/* Versión 4 · Operación (E13) */
.op-seccion { margin-bottom: 1.25rem; }
.op-seccion > h2 { margin: 0 0 0.6rem; }
.op-seccion .rejilla { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.estado-op { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.02rem; margin: 0.2rem 0 0.8rem; }
.op-lista { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.op-fila { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--gris-suave); }
.op-fila:first-child { border-top: 0; }
.op-fila > .chip { align-self: start; justify-self: end; }
.op-que { font-weight: 600; overflow-wrap: anywhere; }
.op-que a { font-weight: 400; margin-left: 0.25rem; }
.op-detalle, .op-nota { grid-column: 1 / -1; font-size: 0.88rem; }
.op-nota { margin: 0.3rem 0 0; padding: 0.45rem 0.65rem; border-radius: 8px; background: var(--amarillo-suave); color: var(--amarillo-tinta); }
.op-servidor h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.op-servidor .datos { grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin-top: 0.6rem; }
.op-servidor .datos dt { align-self: center; }
.op-proyecto .chips { margin-top: 0.5rem; }
.op-proyecto p { margin: 0.5rem 0 0; font-size: 0.88rem; }

/* ——— Decisiones, asistente y conversación ——— */
.decisiones { display: grid; gap: 1rem; }
.decision { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: clamp(1.1rem, 2.5vw, 1.6rem); box-shadow: var(--sombra); }
.decision h2, .decision h3 { font: 600 1.35rem/1.2 var(--fuente-titulos); margin: 0 0 0.5rem; }
.decision-grande { border: 0; background: var(--tinta); color: #f4f2ed; padding: clamp(1.4rem, 3.2vw, 2.4rem); box-shadow: 0 18px 50px rgb(28 36 48 / 22%); position: relative; overflow: hidden; }
.decision-grande::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ambar); }
.decision-grande h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: #fff; margin-bottom: 0.75rem; }
.decision-etiqueta { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; color: var(--ambar); margin: 0 0 0.6rem; }
.decision-porque { font-size: 1.05rem; margin: 0 0 0.9rem; max-width: 65ch; }
.decision-grande .decision-porque { color: #dfe3e9; font-size: 1.12rem; }
.decision-reco { margin: 0 0 1.1rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--ambar-suave); color: #4a3400; max-width: 68ch; }
.decision-reco span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; margin-bottom: 0.2rem; color: var(--ambar-tinta); }
.decision-grande .decision-reco { background: rgb(242 184 75 / 14%); color: #fbecc8; border: 1px solid rgb(242 184 75 / 30%); }
.decision-grande .decision-reco span { color: var(--ambar); }
.decision-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
.decision-botones form { margin: 0; }
.decision-grande .boton:not(.boton-claro) { background: var(--ambar); color: var(--tinta); }
.decision-grande .boton:not(.boton-claro):hover { background: var(--ambar-luz); }
.cambiar { flex-basis: auto; }
.cambiar summary { list-style: none; }
.cambiar summary::-webkit-details-marker { display: none; }
.cambiar[open] { flex-basis: 100%; order: 5; }
.cambiar form { margin-top: 0.6rem; max-width: 640px; }
.decision-grande .cambiar label { color: #fff; }
.decision-nada { background: var(--verde-suave); color: #123d28; }
.decision-nada::before { background: var(--verde-punto); }
.decision-nada h2 { color: #123d28; }
.decision-nada .decision-etiqueta { color: var(--verde); }
.decision-nada .decision-porque { color: #1d4a33; }

/* Asistente */
.asistente-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 1.1rem 1.25rem; box-shadow: var(--sombra); }
.asistente-caja > label { display: block; font: 600 1.15rem var(--fuente-titulos); margin-bottom: 0.6rem; }
.asistente-fila { display: flex; gap: 0.5rem; }
.asistente-fila input { flex: 1; min-width: 0; font: inherit; font-size: 1.08rem; padding: 0.8rem 1rem; border-radius: 999px; border: 1px solid #b9b4a8; background: #fff; color: var(--tinta); }
.asistente-fila .boton { flex: none; }
.asistente-ejemplos { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.75rem 0 0; }
.chip-boton { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--papel); color: var(--tinta); cursor: pointer; }
.chip-boton:hover { border-color: var(--tinta); }
.conversacion { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; max-width: 760px; }
.burbuja { margin: 0; padding: 0.9rem 1.1rem; border-radius: 18px; max-width: 100%; }
.burbuja p { margin: 0 0 0.5rem; }
.burbuja p:last-child { margin-bottom: 0; }
.burbuja-tu { justify-self: end; background: var(--tinta); color: #fff; border-bottom-right-radius: 6px; font-size: 1.05rem; }
.burbuja-fabrica { background: var(--superficie); border: 1px solid var(--borde); border-bottom-left-radius: 6px; font-size: 1.05rem; box-shadow: var(--sombra); animation: subir 1000ms var(--curva) both; }
.burbuja-enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-weight: 600; }
.burbuja-fuente { margin-top: 0.75rem !important; font-size: 0.82rem; }
.burbuja .decision-botones { margin-top: 0.75rem; }
.confirmar { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--borde); }
.cita { margin: 0 0 0.5rem; padding: 0.6rem 0.9rem; border-left: 4px solid var(--ambar); background: var(--papel); border-radius: 8px; overflow-wrap: anywhere; }


/* Plegables: puede esperar, lo que decidí por ti, lo que lleva la Fábrica */
.resto { display: grid; gap: 0.6rem; }
.plegable { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 0 1.1rem; }
.plegable > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; padding: 0.95rem 0; font-weight: 650; font-size: 1.05rem; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: "▸"; color: var(--tinta-suave); transition: transform 300ms var(--curva); }
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable-nota { font-weight: 400; font-size: 0.85rem; flex-basis: 100%; padding-left: 1.1rem; }
.plegable-cuerpo { padding: 0 0 1.1rem; }
.lista-espera, .lista-decididas, .lista-personas, .registro, .lista-cruda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.espera { border-top: 1px solid var(--borde); padding: 0.9rem 0; }
.espera:first-child { border-top: 0; padding-top: 0.2rem; }
.espera h3 { font: 600 1.12rem var(--fuente-titulos); margin: 0 0 0.35rem; }
.espera p { margin: 0 0 0.6rem; max-width: 70ch; }
.lista-decididas li { display: grid; gap: 0.15rem; padding: 0.55rem 0; border-top: 1px solid var(--gris-suave); }
.lista-decididas li:first-child { border-top: 0; }
.lista-cruda li { font-size: 0.9rem; padding: 0.4rem 0; border-top: 1px solid var(--gris-suave); overflow-wrap: anywhere; }

/* Personas */
.personas-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.personas-columnas .tarjeta { margin: 0; }
.persona { padding: 0.7rem 0; border-top: 1px solid var(--gris-suave); }
.persona:first-child { border-top: 0; }
.persona p { margin: 0 0 0.25rem; }
.persona-inactiva { opacity: 0.7; }
.persona-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.persona-acciones .boton { font-size: 0.85rem; padding: 0.35rem 0.85rem; }
.formulario select, .formulario input[type="email"] { width: 100%; font: inherit; padding: 0.65rem 0.8rem; border: 1px solid #b9b4a8; border-radius: 10px; background: #fff; color: var(--tinta); }
.enlace-copiar { width: 100%; font: 0.95rem var(--mono); padding: 0.7rem 0.8rem; border: 2px dashed var(--ambar); border-radius: 10px; background: var(--ambar-suave); color: var(--tinta); }
.registro li { font-size: 0.9rem; padding: 0.35rem 0; border-top: 1px solid var(--gris-suave); }
.registro li:first-child { border-top: 0; }
.aviso-info { background: var(--gris-suave); border-color: var(--borde); color: var(--tinta-suave); font-size: 0.9rem; }

/* Ani (V5 E5): la conversación, una burbuja por mensaje; solo la última entra con movimiento */
.encabezado-chat { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; max-width: 760px; }
.chat-borrar { margin: 0 0 0.35rem; }
.chat-borrar .boton { font-size: 0.88rem; padding: 0.45rem 1rem; }
.chat { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; max-width: 760px; }
.chat-fila { display: grid; gap: 0.25rem; }
.chat-tu { justify-items: end; }
.chat-ani { justify-items: start; }
.chat-fila .burbuja { max-width: min(100%, 620px); overflow-wrap: anywhere; }
.chat .burbuja-fabrica { animation: none; }
.chat #ultimo .burbuja-fabrica { animation: subir 1000ms var(--curva) both; }
.chat-hora { font-size: 0.78rem; color: var(--tinta-suave); padding: 0 0.4rem; }
.chat-voz { display: inline-block; font-size: 0.85rem; font-weight: 600; background: rgb(255 255 255 / 14%); border-radius: 999px; padding: 0.05rem 0.55rem; margin-right: 0.25rem; }
.burbuja-oculta { font-style: italic; opacity: 0.85; }
.chat-ejemplos { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.75rem 0 0; }
.chat-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.chat-estado { margin: 0.6rem 0 0 !important; }
.chat-escribir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; max-width: 760px; }
.chat-caja > label { font-size: 1.05rem; }
.chat-nota { margin: 0.55rem 0 0; font-size: 0.88rem; }
.chat-archivo input[type="file"] { flex: 1; min-width: 0; font: inherit; font-size: 0.98rem; padding: 0.55rem 0.75rem; border-radius: 14px; border: 1px dashed #8d887c; background: var(--papel); color: var(--tinta); }
.chat-archivo input[type="file"]::file-selector-button { font: inherit; font-weight: 600; margin-right: 0.75rem; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid #b9b4a8; background: var(--superficie); color: var(--tinta); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .chat #ultimo .burbuja-fabrica { animation: none !important; } }
@media (max-width: 760px) { .chat-archivo { flex-direction: column; align-items: stretch; } .chat-archivo .boton { align-self: flex-end; } }

/* ——— Ajustes de las piezas de siempre al estilo nuevo ——— */
.proyecto-nombre, .plantilla h2, .grupo > h2, .espera h3, .decision h2, .decision h3, .cifra, .devueltas-cifra, .asistente-caja > label { font-family: var(--titulos); font-weight: 700; }
.decision { border-width: 2px; box-shadow: none; }
.decision-grande { background: var(--oscura); }
.formulario input[type="text"], .formulario input:not([type]), .formulario input[type="password"], .formulario input[type="email"], .formulario textarea, .formulario select { border: 2px solid var(--borde); border-radius: 14px; font-size: 1rem; }
.formulario input:focus, .formulario textarea:focus, .formulario select:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 4px var(--ambar-suave); }
.plegable { border-width: 2px; border-radius: 20px; }
.burbuja-fabrica { border-width: 2px; box-shadow: none; }
.chip-boton { border-width: 2px; font-weight: 700; padding: 0.4rem 0.9rem; background: var(--superficie); }
.conversacion { max-width: 900px; }
.encabezado-chat { max-width: 900px; align-items: center; }
.encabezado-chat .saludo-chico { margin-bottom: 0; flex: 1; }
.chat, .chat-escribir { max-width: 900px; }

/* ——— Celular ——— */
@media (max-width: 900px) {
  .menu a span, .mas-menu summary span { font-size: 0.95rem; }
  .estado { display: none; }
  .rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .tope { padding: 12px 14px; gap: 8px; }
  .marca-texto { display: none; }
  .menu { justify-content: flex-end; gap: 2px; }
  .menu > a, .mas-menu summary { flex-direction: column; gap: 2px; padding: 6px 6px; border-radius: 12px; min-width: 50px; }
  .menu > a span, .mas-menu > summary span { font-size: 11.5px; white-space: nowrap; line-height: 1.2; }
  .mas-lista { position: fixed; top: 70px; left: 12px; right: 12px; min-width: 0; }
  .mas-lista a, .mas-lista .salir button { flex-direction: row; font-size: 1rem; min-width: 0; padding: 11px 14px; }
  .yo { gap: 8px; }
  .foto { width: 34px; height: 34px; }
  main { padding: 6px 16px 130px; }
  .rejilla, .rejilla-2, .nueva { grid-template-columns: 1fr; }
  .pie-ani { padding: 14px 10px max(12px, env(safe-area-inset-bottom)); }
  .barra-ani { padding: 7px 7px 7px 10px; gap: 8px; }
  .barra-ani .ani-mini { display: none; }
  .barra-ani input[type="text"] { font-size: 16px; }
  .boton-voz { width: 46px; height: 46px; border-radius: 14px; }

  main.entrada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  main.entrada { position: relative; }
  .lado { order: -1; padding: 64px 0 0; }
  .marco-escena { border-radius: 0; box-shadow: none; }
  .lado .hola { display: none; }
  .entrar { padding: 22px 20px 28px; gap: 10px; justify-content: flex-start; }
  .entrar { position: static; }
  .entrar .marca { position: absolute; top: 16px; left: 16px; z-index: 2; }
  .entrar h1 { font-size: 36px; }
  .entrar .bajada { font-size: 17px; }
  .entrada-form input { height: 50px; }
  .boton-entrar { font-size: 18px; padding: 15px; }

  .inicio { gap: 22px; padding-top: 4px; }
  .saludo { gap: 12px; }
  .saludo .ani-grande { width: 56px; height: 56px; border-radius: 19px; box-shadow: 0 5px 0 var(--ambar-hondo); }
  .saludo .ani-grande::before, .saludo .ani-grande::after { top: 20px; width: 8px; height: 11px; border-radius: 4px; }
  .saludo .ani-grande::before { left: 16px; }
  .saludo .ani-grande::after { right: 16px; }
  .saludo .ani-grande i { bottom: 11px; width: 18px; height: 8px; border-width: 3px; }
  .globo { padding: 18px 20px; }
  .globo h1 { font-size: 26px; }
  .globo p { font-size: 16px; margin-top: 6px; }
  .inicio .opciones { margin-top: -6px; }
  .opciones, .sin-principal .opciones { grid-template-columns: 1fr 1fr; gap: 12px; }
  .opcion { min-height: 0; padding: 18px; border-radius: 22px; gap: 10px; }
  .opcion:not(.principal) .ir::after { border-radius: 22px; }
  .opcion.principal { grid-column: 1 / -1; }
  .opcion:not(.principal) p { display: none; }
  .opcion:not(.principal) .ir { margin: 0; padding: 0; background: none; font-size: 0; line-height: 0; }
  .opcion:not(.principal):has(.ir:focus-visible) { outline: 3px solid var(--ambar-hondo); outline-offset: 3px; }
  .dibujo { width: 60px; height: 60px; border-radius: 18px; }
  .dibujo .ic { width: 34px; height: 34px; }
  .opcion h2 { font-size: 21px; }
  .opcion.principal h2 { font-size: 23px; }
  .opcion.principal > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .opcion.principal .de-cuantas { top: 18px; right: 18px; }
  .globo .otras { display: inline-block; margin-top: 4px; }
  .opcion-pie .ir { font-size: 18px; }

  .pagina-planta main { padding-left: 16px; padding-right: 16px; }
  .planta-cab { margin-bottom: 16px; }
  .planta-cab .ani { display: none; }
  .planta-cab .globo { padding: 14px 22px; }
  .planta-cab .globo h1 { font-size: 22px; }
  .planta { padding: 20px 16px; border-radius: 26px; }
  .planta .cinta { left: 48px; right: auto; top: 40px; bottom: 120px; width: 12px; height: auto; background: repeating-linear-gradient(180deg, #C9D1DC 0 16px, #DCE2EA 16px 32px); }
  .estaciones { grid-template-columns: 1fr; gap: 14px; }
  .estacion, .estacion:nth-child(n) { grid-row: auto; grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 14px; }
  .maquina { width: 76px; height: 76px; border-radius: 24px; margin-left: 16px; }
  .maquina .ic { width: 38px; height: 38px; }
  .estacion h2 { font-size: 19px; }
  .estacion .que { display: none; }
  .fichas { flex-direction: column; align-items: flex-start; flex-basis: 100%; margin: -4px 0 0; padding-left: 106px; gap: 6px; }
  .ficha { font-size: 14px; padding: 4px 12px 4px 4px; }
  .ficha i { width: 26px; height: 26px; font-size: 12px; }
  .senal, .senal-abajo { grid-row: auto; grid-column: 1 / -1; margin-top: 10px; padding-left: 0; }
  .senal .ani { display: none; }
  .senal .globo { max-width: none; }
  .senal .globo::before { display: none; }
  .leyenda { gap: 10px 18px; font-size: 14px; padding-top: 18px; }

  .mazo { margin-top: 0; }
  .detras { display: none; }
  .tarjeta-paso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 28px; min-height: 0; }
  .paso-dibujo { aspect-ratio: 8 / 5; }
  .sello-paso { display: none; }
  .paso-texto { padding: 22px 20px 24px; gap: 14px; }
  .tarjeta-paso h1 { font-size: 31px; }
  .paso-porque { font-size: 17px; }
  .acciones .si, .acciones .no { flex: 1; padding: 15px 12px; font-size: 18px; }
  .acciones form { flex: 1; }
  .acciones form .si { width: 100%; }

  .guia, .guia-paso-1, .guia-paso-2, .guia-paso-3 { left: 12px; right: 12px; top: 12px; bottom: auto; width: auto; transform: none; padding: 16px 18px; gap: 12px; }
  .guia-paso-4 { left: 12px; right: 12px; top: auto; bottom: 16px; width: auto; transform: none; padding: 16px 18px; }
  .guia h2 { font-size: 21px; }
  .guia p { font-size: 16px; }
  .guia .ani-chica { display: none; }
  #principal, #ver-todo { scroll-margin-top: 250px; }
  .guia-4 .menu { padding: 2px; }
}

/* ——— Modo oscuro (sigue al sistema): la misma Fábrica, de noche ——— */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #E8EDF4; --tinta-suave: #B4BFCE; --papel: #0F1622; --superficie: #18212F; --borde: #2C3848; --gris-suave: #243041;
    --ambar-suave: #3A2F17; --ambar-tinta: #F2C56B; --verde: #8FDCB2; --verde-suave: #173A2A; --rojo: #FF9B8E; --rojo-suave: #3D1F1C;
    --amarillo-suave: #3A3216; --amarillo-tinta: #F0D77A; --cielo: #22324A; --oscura: #0A0F18; --sombra: 0 2px 0 #0A0F18;
  }
  .pie-ani { background: linear-gradient(to bottom, rgb(15 22 34 / 0%), var(--papel) 45%); }
  .opcion.principal { border-color: var(--ambar); }
  .boton { background: var(--ambar); color: #172033; }
  .boton:hover { background: var(--ambar-luz); }
  .boton-claro, .boton.boton-claro, summary.boton.boton-claro { background: transparent; color: var(--tinta); border-color: #46536a; }
  .boton-peligro { background: #b8392d; color: #fff; }
  .boton-voz { background: #0A0F18; border: 2px solid #2C3848; }
  .foto { background: var(--ambar); color: #172033; }
  .maquina { background: #DCE2EA; border-color: #3A4A60; }
  .planta .cinta { background: repeating-linear-gradient(90deg, #2C3848 0 18px, #364459 18px 36px); }
  .ficha-espera { background: #FCEBC6; border-color: var(--ambar); }
  .ficha-va { background: #D6F0E2; }
  .ficha-para { background: #F9DEDA; }
  .ficha-espera, .ficha-va, .ficha-para { color: #172033; }
  .ficha:hover { box-shadow: 0 6px 0 -2px #000; }
  .dice p { color: var(--tinta); }
  .paso-dibujo, .marco-escena { background: #DCE2EA; }
  .detras { background: #1E2838; }
  .entrar .marca { color: var(--tinta); }
  .entrada-form input:focus { box-shadow: 0 0 0 4px #5a4416; }
  .barra-ani:focus-within { box-shadow: 0 0 0 4px #5a4416; }
  .formulario input:focus, .formulario textarea:focus, .formulario select:focus { box-shadow: 0 0 0 4px #5a4416; }
  .formulario input[type="text"], .formulario input:not([type]), .formulario input[type="password"], .formulario input[type="email"], .formulario textarea, .formulario select, .asistente-fila input, .entrada-form input { background: #0F1622; color: var(--tinta); border-color: #46536a; }
  .fases li span { background: #0F1622; }
  .fases li.actual { background: #0A0F18; color: #fff; }
  .fases li.actual span, .modo:has(input:checked) .modo-n { color: #172033; }
  .numero, .chip-vivo { background: #0A0F18; color: #fff; }
  .decision-reco { color: #fbecc8; }
  .decision-nada { background: var(--verde-suave); color: #d8f3e3; }
  .decision-nada h2, .decision-nada .decision-porque { color: #d8f3e3; }
  .aviso-ok { background: #173A2A; color: #cdeedb; border-color: #2e5a43; }
  .aviso-error { background: #3D1F1C; color: #ffd9d4; border-color: #6b302a; }
  .cita { background: var(--gris-suave); }
  .enlace-copiar { color: #fbecc8; }
  .burbuja-tu { background: #0A0F18; }
  .meses a[aria-current="page"] { background: var(--ambar); border-color: var(--ambar); color: #172033; }
  .responder[open] summary { background: var(--ambar); color: #172033; }
  .devueltas { background: #0A0F18; }
  .guia { box-shadow: 0 30px 70px -30px #000; }
  .guia-velo { background: rgb(0 0 0 / 66%); }
  .guia-4 .menu { background: var(--superficie); }
  .chat-archivo input[type="file"] { background: #0f161f; border-color: #5a6779; }
  .chat-archivo input[type="file"]::file-selector-button { background: var(--superficie); color: var(--tinta); border-color: #46536a; }
  .lado .hola .globo { color: var(--tinta); }
  .entrar .marca { background: transparent; }
}

/* ——— Reducir movimiento: todo quieto (la escena, Ani, las entradas, las fichas) ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ficha:hover { transform: none; }
}

/* ——— El socio que ve todo (2026-11-02): «Esto lo decide Juanchi», el interruptor de «Personas» y «Compartir con…» ——— */
.boton-reservado,
.boton.boton-reservado,
.opcion .ir.boton-reservado,
.acciones .si.boton-reservado,
.chip.boton-reservado { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--gris-suave); color: var(--tinta-suave); border: 2px dashed var(--borde); cursor: default; }
.boton.boton-reservado:hover, .opcion .ir.boton-reservado:hover, .acciones .si.boton-reservado:hover { background: var(--gris-suave); }
.boton-reservado .ic { width: 20px; height: 20px; }
.chip.boton-reservado .ic { width: 16px; height: 16px; }
.reservado-porque { flex-basis: 100%; margin: 0.25rem 0 0; }
.reservado-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0; }

.interruptor-fila { margin: 0.5rem 0 0.25rem; }
.interruptor-fila p { margin: 0.3rem 0 0; }
.interruptor { display: inline-flex; align-items: center; gap: 0.6rem; font: inherit; font-weight: 700; color: var(--tinta); background: transparent; border: 2px solid var(--borde); border-radius: 999px; padding: 0.35rem 0.9rem 0.35rem 0.4rem; cursor: pointer; min-height: 44px; }
.interruptor:hover { background: var(--gris-suave); }
.interruptor:focus-visible { outline: 3px solid var(--ambar-hondo); outline-offset: 2px; }
.interruptor-riel { position: relative; width: 52px; height: 30px; border-radius: 999px; background: #8A94A3; flex: none; transition: background 200ms var(--curva); }
.interruptor-bola { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); transition: transform 200ms var(--curva); }
.interruptor.encendido .interruptor-riel { background: var(--verde-vivo); }
.interruptor.encendido .interruptor-bola { transform: translateX(22px); }
.interruptor-estado { font-weight: 400; color: var(--tinta-suave); }
.interruptor.encendido .interruptor-estado { color: var(--verde); font-weight: 700; }

.lista-compartir { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.compartir-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--borde); }
.compartir-fila p { margin: 0; }
.compartir-fila .boton { font-size: 0.9rem; padding: 0.4rem 1rem; }

@media (prefers-color-scheme: dark) {
  .boton-reservado, .boton.boton-reservado, .opcion .ir.boton-reservado, .acciones .si.boton-reservado, .chip.boton-reservado { background: #243041; color: #C9D2DE; border-color: #46536a; }
  .interruptor-riel { background: #5A6779; }
  .interruptor { border-color: #46536a; }
}
@media (forced-colors: active) {
  .interruptor-riel { border: 2px solid CanvasText; background: Canvas; }
  .interruptor.encendido .interruptor-riel { background: Highlight; }
  .interruptor-bola { background: CanvasText; }
}
.interruptor { text-align: left; }
.roles { border: 0; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.45rem; }
.roles legend { font-weight: 700; margin-bottom: 0.4rem; }
.formulario .rol-opcion { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.65rem; margin: 0 !important; padding: 0.6rem 0.8rem; border: 2px solid var(--borde); border-radius: 14px; cursor: pointer; font-weight: 400 !important; }
.rol-opcion input { width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; accent-color: var(--tinta); }
.rol-opcion strong, .rol-opcion .tenue { display: block; }
.rol-opcion .tenue { font-size: 0.88rem; }
.rol-opcion:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
@media (prefers-color-scheme: dark) { .rol-opcion input { accent-color: var(--ambar); } }

/* ——— 2026-11-03 · «Ver como…» (franja fija de solo lectura) y compartir por cliente ——— */
.franja-ver-como { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 10px 16px; background: var(--ambar); color: #172033; border-bottom: 3px solid #172033; }
.franja-ver-como p { margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.franja-ver-como .ic { width: 26px; height: 26px; flex: none; }
.franja-ver-como .franja-ayuda { font-weight: 400; }
.franja-ver-como form { margin: 0; }
.boton.boton-franja { background: #172033; color: #fff; padding: 0.45rem 1.1rem; }
.viendo-como :is(button, input, textarea, select):disabled { cursor: not-allowed; }
.viendo-como .barra-ani { opacity: 0.6; }
.ver-como { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ver-como .boton { display: inline-flex; align-items: center; gap: 0.45rem; }
.ver-como .ic { width: 20px; height: 20px; }
.compartir-clientes { margin-top: 0.6rem; }
.compartir-clientes > p { margin: 0.6rem 0; }
.ani-dice { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0.8rem; color: var(--tinta-suave); }
.ani-dice > :first-child { flex: none; }
.chat-privado h2 { display: flex; align-items: center; gap: 0.5rem; }
.chat-privado .ic { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .franja-ver-como { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 0.92rem; line-height: 1.3; }
  .franja-ver-como .franja-punto { display: none; }
  .franja-ver-como .franja-ayuda { display: block; font-size: 0.8rem; }
  .franja-ver-como p { align-items: flex-start; gap: 0.45rem; }
  .franja-ver-como .ic { width: 22px; height: 22px; }
  .boton.boton-franja { padding: 0.45rem 0.9rem; flex: none; }
}
@media (prefers-color-scheme: dark) {
  .franja-ver-como { color: #172033; }
}

/* ——— 2026-11-03 · Verificación en dos pasos, accesos con fecha y «Actividad» ——— */
.ani-dice-grande { font-size: 1.05rem; color: var(--tinta); }
.formulario input[type="date"], .filtros-actividad select { width: 100%; font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border: 2px solid var(--borde); border-radius: 14px; background: var(--superficie); color: var(--tinta); }
.formulario input[type="date"]:focus, .filtros-actividad select:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 4px var(--ambar-suave); }
.pasos-verificacion { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
.paso-v h2 { display: flex; align-items: center; gap: 0.6rem; }
.paso-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ambar); color: #172033; font-size: 1rem; flex: none; }
.qr-caja { background: #fff; border-radius: 16px; padding: 0.6rem; width: min(260px, 100%); margin: 0.4rem auto 0.8rem; border: 2px solid var(--borde); }
.qr { display: block; width: 100%; height: auto; }
.clave-alta { font-size: 1rem; letter-spacing: 0.06em; word-spacing: 0.25em; }
.campo-codigo { font-family: var(--mono) !important; font-size: 1.5rem !important; letter-spacing: 0.3em; text-align: center; max-width: 16rem; }
.entrada-form .campo-codigo { max-width: none; }
.codigos-respaldo { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; counter-reset: cod; }
.codigos-respaldo li { counter-increment: cod; display: flex; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 2px dashed var(--borde); border-radius: 12px; }
.codigos-respaldo li::before { content: counter(cod) "."; color: var(--tinta-suave); font-size: 0.85rem; min-width: 1.4rem; }
.codigos-respaldo code { white-space: nowrap; font-size: 1.1rem; background: none; padding: 0; letter-spacing: 0.04em; }
.huellas { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.3rem 0.8rem; font-size: 0.9rem; }
.huellas li.usado code { text-decoration: line-through; opacity: 0.7; }
.chip .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 0.25rem; }
.persona-vencida > p:first-child strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.vence { margin-top: 0.4rem; }
.vence-form { max-width: 22rem; }
.vence-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.vence-botones .boton, .reiniciar-verificacion .boton { font-size: 0.85rem; padding: 0.35rem 0.85rem; }
.reiniciar-verificacion { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.filtros-actividad { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; align-items: end; margin-bottom: 1rem; }
.filtros-actividad label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.actividad { list-style: none; margin: 0; padding: 0; }
.actividad li { padding: 0.6rem 0; border-top: 1px solid var(--gris-suave); }
.actividad li:first-child { border-top: 0; }
.actividad li.alerta .actividad-texto { color: var(--rojo); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .formulario input[type="date"], .filtros-actividad select { background: #0F1622; border-color: #46536a; color-scheme: dark; }
  .qr-caja { border-color: #46536a; }
}
.paso-v .formulario .boton, .vence-form .boton { margin-top: 0.7rem; }