/* Elegí De Una — sistema visual
   Tinta azul profunda para la estructura, un solo azul de acción y el amarillo reservado para la marca.
   La portada usa una cuadrícula de plano de obra: es el único elemento decorativo.
   Bricolage Grotesque para títulos, Figtree para el texto. */

/* ───── Tokens ───── */
:root {
  --tinta: #14213D;
  --tinta-2: #3A4560;
  --gris: #5B6477;
  --gris-2: #767F92;
  --fondo: #F3F5FA;
  --sup: #FFFFFF;
  --sup-2: #EEF1F7;
  --linea: #E3E7EF;
  --linea-2: #CDD2DB;
  --accion: #2350D8;
  --accion-osc: #1B3FAF;
  --accion-suave: #EDF2FF;
  --marca: #F5B800;
  --marca-osc: #DCA500;
  --marca-suave: #FFF7DE;
  --estrella: #9A5B00;
  --ok: #12784A;
  --ok-suave: #E7F4EC;
  --alerta: #9A3412;
  --alerta-suave: #FCEFE6;
  --peligro: #B42318;
  --peligro-osc: #8F1B12;
  --peligro-suave: #FDECEA;
  --wa: #0F7A3F;
  --mp: #0074B0;

  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-4: 26px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  --sombra-1: 0 1px 2px rgba(20,33,61,.04), 0 6px 20px rgba(20,33,61,.06);
  --sombra-2: 0 2px 6px rgba(20,33,61,.06), 0 16px 36px rgba(20,33,61,.11);
  --sombra-flota: 0 1px 2px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.10);
  --t-rapida: 140ms;
  --t-media: 220ms;
  --curva: cubic-bezier(.2,.7,.2,1);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --alto-cab: 60px;
  --alto-nav: 64px;
  --ancho-contenido: 720px;
  --ancho-amplio: 1184px;

  color-scheme: light;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ───── Base ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accion); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accion-osc); }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; border-radius: var(--r-1); }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0; letter-spacing: -.015em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
p, li { text-wrap: pretty; }
button { font: inherit; color: inherit; }
.oculto { display: none !important; }

/* ───── Estructura ───── */
#app { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom)); }

.saltar { position: absolute; left: var(--e-4); top: -60px; z-index: 50; min-height: 44px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-2); background: var(--tinta); color: #fff; font-weight: 600; cursor: pointer; }
.saltar:focus { top: calc(var(--e-2) + env(safe-area-inset-top)); }

.cab { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e-3); min-height: calc(var(--alto-cab) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--e-4) 0; background: var(--fondo); border-bottom: 1px solid transparent; }
.atras { width: 44px; height: 44px; border-radius: var(--r-2); background: var(--sup); border: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; color: var(--tinta); text-decoration: none; flex-shrink: 0; transition: border-color var(--t-rapida); }
.atras:hover { border-color: var(--linea-2); color: var(--tinta); }
.atras svg { width: 20px; height: 20px; }
.titulo-cab { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.esp { flex: 1; }

.cuerpo { flex: 1; width: 100%; max-width: var(--ancho-contenido); margin: 0 auto; padding: var(--e-2) var(--e-4) var(--e-7); display: flex; flex-direction: column; gap: var(--e-4); animation: aparece var(--t-media) var(--curva) both; }
.cuerpo:focus { outline: none; }
.cuerpo-solo { justify-content: center; min-height: 100vh; }
/* Mientras una pantalla espera datos, muestra la forma de lo que viene */
.cuerpo:empty::before, .cuerpo:empty::after { content: ""; display: block; border-radius: var(--r-3); background: linear-gradient(90deg, #E8EBF0 0%, #F2F4F7 50%, #E8EBF0 100%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
.cuerpo:empty::before { height: 200px; }
.cuerpo:empty::after { height: 104px; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ───── Marca ───── */
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--tinta); border-radius: var(--r-2); }
.marca:hover { color: var(--tinta); }
.marca-simbolo { width: 46px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.marca-simbolo svg { width: 46px; height: 42px; }
.casa-trazo { stroke: var(--tinta); }
.casa-corte { stroke: var(--fondo); }
.casa-tilde { stroke: var(--marca); }
.marca-texto { display: inline-flex; flex-direction: column; font-family: var(--display); line-height: 1; }
.marca-elegi { font-size: 13px; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; margin: 0 0 -.24em 1px; } /* casi pegado a "De Una", como en el logo */
.marca-nombre { font-size: 25px; font-weight: 700; letter-spacing: -.035em; color: var(--tinta); }
.marca-una { color: var(--marca); }
.splash { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.splash .marca { gap: 14px; }
.splash .marca-simbolo, .splash .marca-simbolo svg { width: 66px; height: 60px; }
.splash .marca { animation: respira 1.6s ease-in-out infinite; }
.splash .marca-elegi { font-size: 18px; }
.splash .marca-nombre { font-size: 36px; }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ───── Navegación ───── */
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 21; display: flex; justify-content: center; gap: var(--e-1); padding: 6px var(--e-2) calc(6px + env(safe-area-inset-bottom)); background: var(--sup); border-top: 1px solid var(--linea); }
.nav a { position: relative; flex: 1; max-width: 132px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-2); font-size: 12px; font-weight: 600; color: var(--gris); text-decoration: none; transition: color var(--t-rapida), background-color var(--t-rapida); }
.nav a:hover { color: var(--tinta); }
.nav a svg { width: 22px; height: 22px; stroke-width: 1.8; }
.nav a.activo { color: var(--accion); background: var(--accion-suave); }
.nav a.activo svg { stroke-width: 2.2; }
.nav-globo { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #D93025; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--sup); }
.paso-siguiente.novedad { background: var(--accion); border-color: var(--accion); color: #fff; font-weight: 600; }
.paso-siguiente.novedad:hover { color: #fff; }
.paso-siguiente.novedad .paso-accion { background: #fff; color: var(--accion); }
.etiqueta.nueva { background: #D93025; color: #fff; }
.avisos-inicio { border: 2px solid var(--accion); }
.chat { display: flex; flex-direction: column; gap: var(--e-2); max-height: 60vh; overflow-y: auto; padding: var(--e-2) 0; }
.msj { max-width: 85%; padding: 10px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.msj p { margin: 0; white-space: pre-line; }
.msj.yo { align-self: flex-end; background: var(--accion); color: #fff; border-bottom-right-radius: 4px; }
.msj.soporte { align-self: flex-start; background: var(--sup-2); color: var(--tinta); border-bottom-left-radius: 4px; }
.msj strong { font-size: 13px; }
.msj-hora { font-size: 12px; opacity: .75; }
.chat-form textarea { width: 100%; }
.avisos-inicio .aviso + .aviso { margin-top: var(--e-2); }

/* ───── Portada ───── */
.hero { position: relative; overflow: hidden; isolation: isolate; background-color: var(--tinta); background-image: radial-gradient(110% 90% at 100% 0%, rgba(64,110,245,.55) 0%, rgba(20,33,61,0) 62%); color: #fff; border-radius: var(--r-4); padding: var(--e-6) var(--e-5) var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); box-shadow: var(--sombra-2); }
.hero-texto { display: flex; flex-direction: column; gap: var(--e-3); }
.hero-agua { position: absolute; right: -36px; bottom: -44px; width: 230px; height: 230px; z-index: -1; opacity: .08; pointer-events: none; }
.hero-agua .casa-trazo, .hero-agua .casa-tilde { stroke: #fff; }
.hero-agua .casa-corte { stroke: none; }
.hero-pasos { display: none; }
.hero h1 { font-size: clamp(30px, 8.4vw, 46px); letter-spacing: -.03em; line-height: 1.04; max-width: 13ch; }
.hero p { color: #C6CEE0; font-size: 16px; max-width: 38ch; }
.hero .hero-chip { align-self: flex-start; max-width: 100%; padding: 6px 14px; border-radius: 999px; background: rgba(245,184,0,.14); font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frase { display: inline-block; transition: opacity var(--t-media), transform var(--t-media); }
.frase.sale { opacity: 0; transform: translateY(-4px); }
.hero-acciones { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-2); }
.hero-link { color: #DCE3F2; font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.hero-link:hover { color: #fff; }
.hero.chico { padding: var(--e-5); }
.hero.chico h1 { font-size: 28px; max-width: none; }

/* ───── Botones ───── */
.btn { position: relative; min-height: 48px; padding: 0 var(--e-5); display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); border: 0; border-radius: var(--r-2); background: var(--accion); color: #fff; font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color var(--t-rapida), box-shadow var(--t-rapida), transform var(--t-rapida); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn { box-shadow: 0 8px 18px -10px rgba(35,80,216,.7); }
.btn:hover { background: var(--accion-osc); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.claro { background: var(--marca); color: var(--tinta); box-shadow: 0 8px 18px -10px rgba(245,184,0,.9); }
.btn.claro:hover { background: var(--marca-osc); color: var(--tinta); }
.btn.borde { background: var(--sup); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); }
.btn.borde:hover { background: var(--sup-2); color: var(--tinta); }
.btn.borde.peligro { color: var(--peligro); box-shadow: inset 0 0 0 1px #EBC3BE; }
.btn.borde.peligro:hover { background: var(--peligro-suave); }
.btn.peligro-fondo { background: var(--peligro); }
.btn.peligro-fondo:hover { background: var(--peligro-osc); }
.btn.wa, .btn.mp, .btn.peligro-fondo { box-shadow: none; }
.btn.wa { background: var(--wa); }
.btn.wa:hover { background: #0B6232; }
.btn.mp { background: var(--mp); }
.btn.mp:hover { background: #005E8F; }
.btn.chico { min-height: 44px; padding: 0 var(--e-4); font-size: 15px; }
.btn.ancho { width: 100%; }
.btn:disabled:not([aria-busy=true]) { background: var(--sup-2); color: var(--gris-2); box-shadow: inset 0 0 0 1px var(--linea); cursor: not-allowed; transform: none; }
.btn[aria-busy=true] { cursor: progress; opacity: .85; }
.btn[aria-busy=true]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; flex-shrink: 0; }
@keyframes gira { to { transform: rotate(360deg); } }
.link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--accion); cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.tenue { color: var(--gris); font-size: 14px; font-weight: 500; }
.link.peligro { color: var(--peligro); }

/* ───── Bloques y texto ───── */
.bloque { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-3); padding: 20px 18px; display: flex; flex-direction: column; gap: var(--e-4); box-shadow: var(--sombra-1); }
.bloque h2 { font-size: 18px; }
.bloque h3 { font-size: 16px; font-weight: 600; }
.bloque.centro { align-items: center; text-align: center; }
.seccion { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-2); }
.seccion h2, .sub { font-size: 22px; }
.sub { margin-top: var(--e-2); }
.titulo { font-size: 24px; letter-spacing: -.025em; line-height: 1.15; }
.descripcion { white-space: pre-line; color: var(--tinta-2); }
.tenue { color: var(--gris); font-size: 14px; }
.fuerte { font-weight: 600; color: var(--tinta); }
.alerta { font-weight: 600; color: var(--alerta); }
.ok-texto { color: var(--ok); }
.peligro { color: var(--peligro); }
a.peligro:hover { color: var(--peligro-osc); }
.centro { text-align: center; }
.centrado { justify-content: center; }
.ayuda { font-size: 13px; line-height: 1.45; color: var(--gris); }
.nota { background: var(--sup-2); border-radius: var(--r-2); padding: 14px var(--e-4); font-size: 14px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 6px; }
.codigo { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.bloque-link { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; }
.chico-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.pastilla { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--gris); }
.fila .pastilla { align-self: center; }

/* Vacíos y errores */
.vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--e-6) var(--e-4); background: var(--sup); border: 1px dashed var(--linea-2); border-radius: var(--r-3); color: var(--gris); text-align: center; }
.vacio .btn, .vacio .fila-izq { margin-top: var(--e-2); }
.vacio-icono { width: 56px; height: 56px; border-radius: 50%; background: var(--accion-suave); color: var(--accion); display: flex; align-items: center; justify-content: center; margin-bottom: var(--e-2); }
.vacio-icono svg { width: 26px; height: 26px; }

/* Avisos dentro de la página */
.banner { background: var(--marca-suave); color: #5C3B00; border: 1px solid #F1DFA3; border-radius: var(--r-2); padding: 14px var(--e-4); font-size: 15px; }
.banner a { color: #5C3B00; font-weight: 700; }
.banner.ok { background: var(--ok-suave); color: #0B4F2C; border-color: #C8E5D3; }
.banner.revision { display: flex; gap: var(--e-3); align-items: flex-start; }
.paso-siguiente { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: 10px 10px 10px var(--e-4); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-size: 15px; box-shadow: var(--sombra-1); transition: border-color var(--t-rapida); }
.paso-siguiente:hover { color: var(--tinta); border-color: var(--linea-2); }
.paso-texto { flex: 1; font-weight: 600; }
.paso-accion { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--tinta); background: var(--marca); padding: 8px 14px; border-radius: var(--r-2); }
.paso-siguiente.espera { background: var(--marca-suave); border-color: #F1DFA3; }
.paso-siguiente.espera .paso-accion { background: var(--sup); }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: #D98E00; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 0 rgba(217,142,0,.5); animation: pulso 1.8s infinite; }
.paso-siguiente .pulso { margin-top: 0; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px rgba(217,142,0,0); } 100% { box-shadow: 0 0 0 0 rgba(217,142,0,0); } }

/* ───── Formularios ───── */
.pila-form { display: flex; flex-direction: column; gap: var(--e-4); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .label { font-size: 14px; font-weight: 600; color: var(--tinta); }
:is(input[type=text], input[type=tel], input[type=email], input[type=url], input[type=date], input[type=password], input[type=search], select, textarea) {
  width: 100%; min-height: 48px; border: 0; box-shadow: inset 0 0 0 1px var(--linea-2); border-radius: var(--r-2); padding: 12px 14px; font: inherit; font-size: 16px; color: var(--tinta); background: var(--sup); appearance: none; -webkit-appearance: none; transition: box-shadow var(--t-rapida);
}
:is(input[type=text], input[type=tel], input[type=email], input[type=url], input[type=password], input[type=search], select, textarea):hover { box-shadow: inset 0 0 0 1px var(--gris-2); }
:is(input, select, textarea):focus { outline: none; box-shadow: inset 0 0 0 2px var(--accion); }
:is(input, select, textarea):focus-visible { outline: none; }
input:disabled { background: var(--sup-2); color: var(--gris); }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; cursor: pointer; }
textarea { resize: vertical; min-height: 112px; line-height: 1.5; }
::placeholder { color: var(--gris-2); opacity: 1; }
.check { display: flex; gap: var(--e-3); align-items: flex-start; min-height: 44px; font-size: 15px; color: var(--tinta-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accion); cursor: pointer; }
/* La verificación anti-robots no ocupa lugar: solo aparece si Cloudflare necesita que la persona toque algo. */
.turnstile:not(.activo) { display: none; }
.turnstile.activo { display: block; }
.aviso-general { border-left: 3px solid var(--marca); font-weight: 500; }
.dos.campos { align-items: start; }

.con-boton { position: relative; }
.con-boton input { padding-right: 92px; }
.ver-clave { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; min-width: 72px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-1); background: transparent; font-size: 14px; font-weight: 600; color: var(--accion); cursor: pointer; }
.ver-clave:hover { background: var(--accion-suave); }

.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); padding: var(--e-1); background: var(--sup-2); border-radius: var(--r-2); }
.pestanas button { min-height: 44px; border: 0; border-radius: var(--r-1); background: transparent; font-weight: 600; font-size: 15px; color: var(--gris); cursor: pointer; transition: background-color var(--t-rapida), color var(--t-rapida); }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected=true] { background: var(--sup); color: var(--tinta); box-shadow: 0 1px 2px rgba(20,33,61,.08), inset 0 0 0 1px var(--linea); }
.ingreso { gap: var(--e-4); }

.opciones { display: grid; gap: var(--e-2); }
.opcion { text-align: left; border: 0; box-shadow: inset 0 0 0 1px var(--linea-2); background: var(--sup); border-radius: var(--r-3); padding: 14px var(--e-4) 14px 46px; position: relative; color: var(--tinta); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: box-shadow var(--t-rapida), background-color var(--t-rapida); }
.opcion::before { content: ""; position: absolute; left: var(--e-4); top: 17px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea-2); background: var(--sup); }
.opcion:hover { box-shadow: inset 0 0 0 1px var(--gris-2); }
.opcion strong { font-family: var(--display); font-size: 17px; font-weight: 600; }
.opcion span { font-size: 14px; color: var(--gris); }
.opcion[aria-checked=true] { box-shadow: inset 0 0 0 2px var(--accion); background: var(--accion-suave); }
.opcion[aria-checked=true]::before { box-shadow: inset 0 0 0 5px var(--accion); }

/* Campo con sugerencias */
.auto { position: relative; }
.auto-caja { position: relative; }
.auto-caja input { padding-right: 44px; }
.auto-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ok); }
.auto-ok svg { width: 18px; height: 18px; stroke-width: 2.5; }
input.auto-elegido { box-shadow: inset 0 0 0 1px var(--ok); }
input.auto-elegido:focus { box-shadow: inset 0 0 0 2px var(--ok); }
input.auto-error { box-shadow: inset 0 0 0 2px var(--peligro); }
.sugerencias { display: flex; flex-direction: column; margin-top: 6px; max-height: 320px; overflow-y: auto; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-2); box-shadow: var(--sombra-flota); }
.sugerencias:empty { display: none; }
.sugerencia { display: flex; align-items: center; text-align: left; min-height: 48px; padding: 0 var(--e-4); border: 0; border-bottom: 1px solid var(--linea); background: var(--sup); font-size: 15px; color: var(--tinta); cursor: pointer; }
.sugerencia:last-child { border-bottom: 0; }
.sugerencia:hover, .sugerencia:focus { background: var(--accion-suave); outline: none; }
.sugerencia:focus-visible { box-shadow: inset 3px 0 0 var(--accion); }
.sin-resultados { padding: 12px var(--e-4); }
.cat-elegida { font-size: 14px; font-weight: 600; color: var(--accion); margin-top: calc(var(--e-2) * -1); }

/* ───── Buscador y filtros ───── */
.filtros-inicio { display: flex; flex-direction: column; gap: var(--e-3); }
.buscador { display: flex; align-items: center; gap: 10px; background: var(--sup); border-radius: var(--r-2); padding: 0 14px; box-shadow: inset 0 0 0 1px var(--linea-2); transition: box-shadow var(--t-rapida); }
.buscador:hover { box-shadow: inset 0 0 0 1px var(--gris-2); }
.buscador:focus-within { box-shadow: inset 0 0 0 2px var(--accion); }
.buscador svg { width: 20px; height: 20px; color: var(--gris); flex-shrink: 0; }
.buscador input { flex: 1; min-height: 50px; padding: 0; border: 0; background: transparent; box-shadow: none !important; }
.cats { display: flex; gap: var(--e-2); overflow-x: auto; margin: 0 calc(var(--e-4) * -1); padding: 2px var(--e-4) 4px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--e-4); }
.cats::-webkit-scrollbar { display: none; }
.cat { flex-shrink: 0; scroll-snap-align: start; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea-2); font-size: 14px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; cursor: pointer; transition: background-color var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida); }
.cat:hover { box-shadow: inset 0 0 0 1px var(--gris-2); color: var(--tinta); }
.cat[aria-pressed=true] { background: var(--tinta); color: #fff; box-shadow: none; }

/* ───── Tarjetas y listas ───── */
.lista { display: flex; flex-direction: column; gap: var(--e-3); }
.tarjeta { display: flex; gap: var(--e-3); padding: var(--e-4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-3); color: var(--tinta); text-decoration: none; box-shadow: var(--sombra-1); transition: border-color var(--t-rapida), box-shadow var(--t-media), transform var(--t-media) var(--curva); }
a.tarjeta:hover { color: var(--tinta); border-color: var(--linea-2); box-shadow: var(--sombra-2); transform: translateY(-2px); }
.tarjeta.col { flex-direction: column; }
.tarjeta h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tarjeta-cuerpo { flex: 1; display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.miniatura { width: 80px; height: 80px; border-radius: var(--r-2); object-fit: cover; flex-shrink: 0; background: var(--sup-2); }
.meta { display: flex; align-items: center; gap: 6px; color: var(--gris); font-size: 14px; }
.meta svg { width: 16px; height: 16px; flex-shrink: 0; }
.cupo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.cupo .barra { flex: 1; max-width: 120px; height: 4px; }
.seleccionable { cursor: pointer; }
.seleccionable input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--accion); cursor: pointer; }
.seleccionable:has(input:checked) { border-color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion); background: #FAFBFF; }
.seleccionable:focus-within { border-color: var(--linea-2); }
.esqueleto { height: 112px; border-radius: var(--r-3); background: linear-gradient(90deg, #E8EBF0 0%, #F2F4F7 50%, #E8EBF0 100%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }

.fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fila-izq { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.acciones { position: sticky; bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; padding: var(--e-4) 0 var(--e-2); background: linear-gradient(to top, var(--fondo) 78%, rgba(245,246,248,0)); }

.etiqueta { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--accion-suave); font-size: 12px; font-weight: 600; color: var(--accion); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-decoration: none; }
.etiqueta.gris { color: var(--tinta-2); background: var(--sup-2); font-weight: 500; }
.etiqueta.ok { color: var(--ok); background: var(--ok-suave); }
.etiqueta.alerta-fondo { color: var(--alerta); background: var(--alerta-suave); }
.etiqueta.amarilla { background: var(--marca-suave); }
.etiqueta.amarilla .estrellas { font-size: 13px; }
a.etiqueta { min-height: 32px; }
a.etiqueta:hover { text-decoration: underline; text-underline-offset: 3px; }

.barra { height: 6px; background: var(--sup-2); border-radius: 999px; overflow: hidden; }
.barra-lleno { height: 100%; background: var(--accion); border-radius: 999px; transition: width .5s var(--curva); }

/* ───── Fotos ───── */
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.foto { position: relative; aspect-ratio: 1; border-radius: var(--r-2); overflow: hidden; background: var(--sup-2); display: block; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.quitar { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(20,33,61,.82); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.quitar:hover { background: var(--tinta); }
.foto-agregar { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; border: 1.5px dashed var(--linea-2); border-radius: var(--r-2); background: var(--sup); font-size: 13px; font-weight: 600; color: var(--tinta-2); text-align: center; cursor: pointer; transition: border-color var(--t-rapida), color var(--t-rapida); }
.foto-agregar:hover { border-color: var(--accion); color: var(--accion); }
.foto-mas { font-size: 22px; line-height: 1; font-weight: 400; }
.foto-pdf { display: flex; align-items: center; justify-content: center; background: var(--accion-suave); }
.pdf-icono { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; text-align: center; color: var(--accion); }
.pdf-icono strong { font-family: var(--display); font-size: 18px; }
.pdf-icono small { font-size: 11px; color: var(--tinta-2); overflow-wrap: anywhere; max-height: 2.6em; overflow: hidden; }

/* ───── Profesionales y ficha ───── */
.prof { display: flex; gap: var(--e-3); align-items: center; flex: 1; min-width: 0; }
.prof-datos { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prof-datos strong { font-size: 16px; font-weight: 600; }
.prof-datos .chico-link { min-height: 36px; }
.prof-estrellas { display: flex; align-items: center; gap: 6px; }
.precio { font-family: var(--display); font-size: 17px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.precio.sin { font-family: var(--texto); font-size: 13px; font-weight: 500; color: var(--gris); }
.avatar { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--accion-suave); color: var(--accion); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 19px; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.grande { width: 88px; height: 88px; border-radius: 22px; font-size: 34px; }
.estrellas { color: var(--estrella); font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.dato { background: var(--sup-2); border-radius: var(--r-2); padding: var(--e-3); display: flex; flex-direction: column; gap: 2px; font-size: 13px; text-align: left; color: var(--tinta-2); }
.dato strong, .dato .estrellas { font-family: var(--display); font-size: 20px; color: var(--tinta); }
.dato .estrellas { color: var(--estrella); }
.grilla-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--e-4); }
.grilla-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grilla-datos strong { font-weight: 600; overflow-wrap: anywhere; }
.grilla-datos .todo { grid-column: 1 / -1; }
.respaldos { display: flex; flex-direction: column; }
.respaldo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); }
.respaldo:last-child { border-bottom: 0; }
.respaldo > div:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.respaldo a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.resena { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e-1); }
.resena:last-child { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 0 var(--e-1) 0 14px; border-radius: 999px; font-size: 14px; }
.chip.elegido { background: var(--accion); color: #fff; }
.chip-quitar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.chip-quitar:hover { background: rgba(255,255,255,.3); }
.puntaje { display: flex; gap: var(--e-2); }
.puntaje button { flex: 1; max-width: 56px; height: 48px; border: 0; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--linea-2); background: var(--sup); font-weight: 600; font-size: 16px; cursor: pointer; transition: background-color var(--t-rapida), box-shadow var(--t-rapida); }
.puntaje button:hover { box-shadow: inset 0 0 0 1px var(--gris-2); }
.puntaje button[aria-checked=true] { background: var(--accion); color: #fff; box-shadow: none; }
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 10px 4px; border-bottom: 1px solid var(--linea); }
.tabla th { font-weight: 600; color: var(--gris); font-size: 13px; }
.tabla td:last-child, .tabla th:last-child { text-align: right; white-space: nowrap; }
.lista-puntos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--e-2); color: var(--tinta-2); }
.lista-puntos li::marker { color: var(--gris-2); }

/* Pasos (secuencia real) y preguntas */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.pasos li { display: flex; gap: var(--e-3); align-items: flex-start; color: var(--tinta-2); }
.paso-num { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea-2); color: var(--tinta); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -1px; font-variant-numeric: tabular-nums; }
.faq { border-bottom: 1px solid var(--linea); }
.faq:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 52px; padding: var(--e-2) 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--gris); transition: transform var(--t-media) var(--curva); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--tinta-2); padding-bottom: 14px; }

/* Desplegables */
details.bloque { display: block; padding: 0; }
details.bloque > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-2) 18px; font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--r-3); }
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary::after { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-right: 1.5px solid var(--gris); border-bottom: 1.5px solid var(--gris); transform: rotate(-45deg); transition: transform var(--t-media) var(--curva); }
details.bloque[open] > summary::after { transform: rotate(45deg); }
details.bloque > summary:hover { background: var(--sup-2); }
details.bloque > :not(summary) { margin: 0 18px 20px; }
details.bloque > :not(summary) + :not(summary) { margin-top: var(--e-4); }
details.bloque.interno { border: 0; background: var(--sup-2); }
details.bloque.interno > summary { padding: var(--e-2) var(--e-4); }
details.bloque.interno > :not(summary) { margin: 0 var(--e-4) var(--e-4); }
.resumen-dato { margin-left: auto; font-weight: 500; }

/* ───── Mi ficha ───── */
.resumen-puntos { background: var(--sup); box-shadow: var(--sombra-1); border: 1px solid var(--linea); border-radius: var(--r-3); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.resumen-puntos .estrellas { font-size: 22px; letter-spacing: 2px; }
.resumen-puntos .barra { height: 8px; }
.resumen-puntos .barra-lleno { background: var(--marca); }
.resumen-puntos p { color: var(--gris); font-size: 14px; }
.puntos-num { font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.puntos-num span { font-family: var(--texto); font-size: 14px; font-weight: 500; color: var(--gris); }
.tarjeta-puntos { background: var(--sup); border: 1px solid var(--linea); border-left: 3px solid var(--linea-2); border-radius: var(--r-3); }
.tarjeta-puntos.completo { border-left-color: var(--ok); }
.tarjeta-puntos > summary { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-2) var(--e-4); cursor: pointer; list-style: none; border-radius: var(--r-3); }
.tarjeta-puntos > summary::-webkit-details-marker { display: none; }
.tarjeta-puntos > summary:hover { background: var(--sup-2); }
.tarjeta-puntos > :not(summary) { margin: 0 var(--e-4) 14px; }
.tp-titulo { flex: 1; font-weight: 600; }
.tp-puntos { font-size: 13px; font-weight: 600; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.completo .tp-puntos { color: var(--ok); }
.tp-pista { font-size: 13px; font-weight: 600; color: var(--alerta); }
.form-respaldo { background: var(--sup-2); border-radius: var(--r-2); padding: 14px; }
.vista-cliente { display: flex; flex-direction: column; gap: var(--e-3); }
.vista-cliente .bloque { background: var(--fondo); }

/* ───── Suscripción ───── */
.plan { background: var(--sup); box-shadow: var(--sombra-1); border: 1px solid var(--linea); border-top: 3px solid var(--tinta); border-radius: var(--r-3); padding: var(--e-5) 20px; display: flex; flex-direction: column; gap: var(--e-3); }
.plan-nombre { font-size: 15px; font-weight: 600; color: var(--gris); font-family: var(--texto); letter-spacing: 0; }
.plan-precio { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-precio span { font-family: var(--texto); font-size: 16px; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.plan ul { margin: var(--e-1) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--tinta-2); }
.plan li { position: relative; padding-left: 28px; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }

/* ───── Cuenta ───── */
.perfil { background: linear-gradient(var(--accion-suave), var(--accion-suave)) top / 100% 64px no-repeat, var(--sup); box-shadow: var(--sombra-1); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-5) 20px 14px; display: flex; flex-direction: column; align-items: center; gap: var(--e-1); text-align: center; }
.perfil-foto { position: relative; margin-bottom: var(--e-2); }
.perfil-avatar { width: 96px; height: 96px; border-radius: 26px; font-size: 38px; }
.foto-cambiar { position: absolute; right: -8px; bottom: -8px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--sup); background: var(--tinta); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.foto-cambiar svg { width: 18px; height: 18px; }
.foto-cambiar:hover { background: var(--accion); }
.perfil-nombre { font-size: 22px; }
.perfil-profesion { color: var(--tinta-2); font-weight: 500; }
.perfil-etiquetas { justify-content: center; margin-top: var(--e-1); }
.perfil-edicion { display: flex; gap: var(--e-4); align-items: center; }
.perfil-edicion .perfil-avatar { width: 88px; height: 88px; flex-shrink: 0; }
.accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.accesos.dos-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acceso { box-shadow: var(--sombra-1); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-3); text-align: center; text-decoration: none; color: var(--tinta); transition: border-color var(--t-rapida); }
.acceso:hover { color: var(--tinta); border-color: var(--linea-2); }
.acceso strong { font-size: 14px; font-weight: 600; }
.acceso .tenue { font-size: 12px; line-height: 1.3; }
.acceso-icono { color: var(--accion); margin-bottom: var(--e-1); }
.acceso-icono svg { width: 22px; height: 22px; }
.aviso { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.aviso:last-child { border-bottom: 0; }
.lista-links { display: flex; flex-direction: column; }
.lista-links a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.lista-links a:last-child { border-bottom: 0; }
.lista-links a:hover { color: var(--accion); }

/* ───── Pie, avisos flotantes y legales ───── */
.pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--e-4); padding-top: var(--e-5); font-size: 13px; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris); text-decoration: none; }
.pie a:hover { color: var(--tinta); text-decoration: underline; }
.avisos-region { position: fixed; left: var(--e-4); right: var(--e-4); bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom) + var(--e-3)); z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.toast { width: 100%; max-width: 480px; padding: 14px 18px; border-radius: var(--r-2); background: var(--tinta); color: #fff; font-weight: 500; box-shadow: var(--sombra-flota); pointer-events: auto; animation: entra var(--t-media) var(--curva); }
.toast.mal { background: var(--peligro); }
.toast.bien { background: var(--ok); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.legal { gap: 20px; }
.legal-seccion { display: flex; flex-direction: column; gap: var(--e-2); }
.legal-seccion h3 { font-size: 16px; }
.legal-seccion p { color: var(--tinta-2); max-width: 68ch; }
.publicado-por { gap: var(--e-2); }

/* ───── Tablet ───── */
@media (min-width: 600px) {
  .cuerpo { padding: var(--e-4) var(--e-5) var(--e-7); gap: 20px; }
  .cab { padding-left: var(--e-5); padding-right: var(--e-5); }
  .bloque { padding: var(--e-5); }
  details.bloque > summary { padding: var(--e-2) var(--e-5); }
  details.bloque > :not(summary) { margin: 0 var(--e-5) var(--e-5); }
  .hero { padding: 40px 36px 32px; }
  .cats { margin: 0; padding: 2px 0 4px; scroll-padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjeta { padding: 18px 20px; }
  .miniatura { width: 96px; height: 96px; }
  .avisos-region { left: 50%; right: auto; width: 480px; margin-left: -240px; }
}

/* ───── Pantallas amplias (tablet y compu): las listas y la portada usan todo el ancho ───── */
@media (min-width: 720px) {
  .cuerpo.amplio { max-width: var(--ancho-amplio); }
  .amplio .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--e-4); }
  .amplio .lista > .vacio, .amplio .lista > [role=alert] { grid-column: 1 / -1; }
  .filtros-inicio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--e-4); align-items: end; }
}
@media (min-width: 880px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); align-items: center; gap: 40px; }
  .hero.chico { display: flex; }
  .hero-pasos { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
  .hero-pasos li { display: flex; gap: 14px; align-items: flex-start; padding: var(--e-4); border-radius: var(--r-3); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
  .hero-pasos li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
  .hero-pasos strong { font-family: var(--display); font-weight: 600; font-size: 16px; color: #fff; }
  .hero-pasos li > span:last-child > span { color: #C6CEE0; font-size: 14px; }
  .hero-num { width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: var(--tinta); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .hero-agua { display: none; }
}

/* ───── Escritorio: la navegación pasa a la cabecera ───── */
@media (min-width: 960px) {
  :root { --alto-cab: 68px; }
  #app { padding-bottom: 0; }
  .cab { padding: 0 max(var(--e-6), calc(50% - 560px)); border-bottom-color: var(--linea); }
  .cab .esp { min-width: 440px; }
  .nav { top: 0; bottom: auto; left: auto; right: max(var(--e-6), calc(50% - 560px)); height: var(--alto-cab); padding: 0; justify-content: flex-end; align-items: center; gap: var(--e-1); background: transparent; border: 0; }
  .nav a { flex: none; max-width: none; min-height: 40px; flex-direction: row; gap: var(--e-2); padding: 0 var(--e-3); font-size: 14px; }
  .nav a:hover { background: var(--sup-2); }
  .nav a svg { width: 18px; height: 18px; }
  .nav a.activo { background: var(--accion-suave); }
  .nav a.activo::after { content: none; }
  .cuerpo { padding-top: var(--e-6); gap: var(--e-5); }
  .acciones { bottom: 0; }
  .avisos-region { bottom: var(--e-5); }
  .hero { padding: var(--e-7) var(--e-7) 40px; }
}

/* ───── Movimiento reducido ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn[aria-busy=true]::before { animation: gira 1.6s linear infinite !important; }
}

/* ───── Panel de administración ─────
   Menú lateral en compu, menú horizontal en el celular. Paneles blancos con filas separadas por líneas finas. */
.adm { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--fondo); }
.adm-lado, .adm-principal { min-width: 0; }
.adm-lado { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-3) var(--e-4) var(--e-2); background: var(--sup); border-bottom: 1px solid var(--linea); }
.adm-marca { display: flex; align-items: center; gap: 10px; }
.adm-simbolo svg { width: 38px; height: 35px; display: block; }
.adm-corte { stroke: var(--sup); }
.adm-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.adm-marca-texto strong { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; }
.adm-marca-texto span { font-size: 12px; color: var(--gris); font-weight: 500; }
.adm-nav { display: flex; gap: 2px; overflow-x: auto; margin: 0 calc(var(--e-4) * -1); padding: 0 var(--e-4); scrollbar-width: none; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-nav-item { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 40px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-2); background: transparent; color: var(--tinta-2); font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; transition: background-color var(--t-rapida), color var(--t-rapida); }
.adm-nav-item:hover { background: var(--sup-2); color: var(--tinta); }
.adm-nav-item.activo { background: var(--accion-suave); color: var(--accion); font-weight: 600; }
.adm-cuenta { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--marca); color: var(--tinta); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.adm-lado-pie { position: absolute; top: var(--e-3); right: var(--e-4); display: flex; gap: 6px; }
.adm-lado-pie .adm-btn { min-height: 36px; padding: 0 10px; font-size: 13px; }
.adm-lado-pie a.adm-btn { display: none; }
.adm-campo :is(input, select, textarea), .adm-ingreso :is(input, select) { font-weight: 400; }
.adm-principal { min-width: 0; padding: var(--e-5) var(--e-4) 64px; display: flex; flex-direction: column; gap: var(--e-5); width: 100%; max-width: 960px; }
.adm-cab h1 { font-size: 26px; letter-spacing: -.025em; }
.adm-cab p { margin-top: 2px; }
.adm-contenido { display: flex; flex-direction: column; gap: var(--e-4); }
.adm-tenue { color: var(--gris); font-size: 14px; }
.adm-cargando { color: var(--gris); padding: var(--e-5) 0; }
.adm-panel { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--sombra-1); overflow: hidden; }
.adm-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) 20px 0; }
.adm-panel-cab h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.adm-panel-cuerpo { display: flex; flex-direction: column; padding: var(--e-2) 0; }
.adm-panel-cuerpo > .adm-form, .adm-panel-cuerpo > .adm-filtros, .adm-panel-cuerpo > .adm-perfil, .adm-panel-cuerpo > .adm-datos { padding: var(--e-3) 20px; }
.adm-vacio { padding: var(--e-5) 20px; color: var(--gris); text-align: center; }
.adm-fila { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; padding: var(--e-3) 20px; border: 0; border-top: 1px solid var(--linea); background: transparent; color: var(--tinta); text-align: left; font-size: 15px; }
.adm-panel-cuerpo > .adm-fila:first-child { border-top: 0; }
.adm-fila-boton { cursor: pointer; transition: background-color var(--t-rapida); }
.adm-fila-boton:hover { background: var(--sup-2); }
.adm-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-fila-texto strong { font-weight: 600; overflow-wrap: anywhere; }
.adm-flecha { color: var(--gris-2); font-size: 22px; line-height: 1; }
.adm-num-pend { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 10px; background: var(--marca-suave); color: #6B4A00; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.adm-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-cifra { display: flex; flex-direction: column; gap: 2px; padding: var(--e-4) 20px; border-top: 1px solid var(--linea); }
.adm-cifra:nth-child(-n+2) { border-top: 0; }
.adm-cifra:nth-child(odd) { border-right: 1px solid var(--linea); }
.adm-cifra strong { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.adm-cifra span { font-weight: 600; font-size: 14px; }
.adm-cifra small { color: var(--gris); font-size: 13px; }
.adm-estado { align-items: flex-start; }
.adm-punto { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.adm-punto.ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.adm-punto.falta { background: #D98E00; box-shadow: 0 0 0 4px var(--marca-suave); }
.adm-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.adm-etiqueta { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--sup-2); color: var(--tinta-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.adm-etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.adm-etiqueta.falta { background: var(--alerta-suave); color: var(--alerta); }
.adm-etiqueta.pend { background: var(--marca-suave); color: #6B4A00; }
.adm-ayuda summary { cursor: pointer; color: var(--accion); font-size: 14px; font-weight: 600; margin-top: 4px; }
.adm-ayuda ol { margin: var(--e-2) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--tinta-2); font-size: 14px; overflow-wrap: anywhere; }
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-2); background: var(--accion); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--t-rapida); }
.adm-btn:hover { background: var(--accion-osc); color: #fff; }
.adm-btn:disabled { opacity: .65; cursor: progress; }
.adm-btn.sutil { background: var(--sup); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); }
.adm-btn.sutil:hover { background: var(--sup-2); color: var(--tinta); }
.adm-btn.peligro { background: var(--sup); color: var(--peligro); box-shadow: inset 0 0 0 1px #EBC3BE; }
.adm-btn.peligro:hover { background: var(--peligro-suave); }
.adm-btn.chico { min-height: 36px; padding: 0 var(--e-3); font-size: 14px; }
.adm-enlace { border: 0; background: none; padding: 0; color: var(--accion); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.adm-form { display: flex; flex-direction: column; gap: var(--e-4); }
.adm-form-dos { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
.adm-form-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.adm-zona-peligro { padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.adm-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.adm-campo small { font-weight: 400; color: var(--gris); font-size: 13px; line-height: 1.45; }
.adm textarea { min-height: 88px; }
.adm-filtros { display: grid; grid-template-columns: 1fr; gap: var(--e-2); border-bottom: 1px solid var(--linea); }
.adm-filtros.una { grid-template-columns: minmax(0, 320px); }
.adm-switch { cursor: pointer; }
.adm-interruptor { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--linea-2); position: relative; cursor: pointer; transition: background-color var(--t-media); }
.adm-interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,33,61,.25); transition: transform var(--t-media) var(--curva); }
.adm-interruptor:checked { background: var(--marca); }
.adm-interruptor:checked::after { transform: translateX(18px); }
.adm-interruptor:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.adm-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.adm-foto { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tinta-2); font-size: 13px; }
.adm-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2); background: var(--sup-2); border: 1px solid var(--linea); }
.adm-nota { background: var(--sup-2); border-radius: var(--r-2); padding: var(--e-3) 14px; color: var(--tinta-2); font-size: 14px; white-space: pre-line; }
.adm-detalle { padding: 0 20px var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); color: var(--tinta-2); white-space: pre-line; }
.adm-perfil { display: flex; align-items: center; gap: var(--e-4); }
.adm-perfil-foto { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; flex-shrink: 0; }
.adm-perfil-foto.sin { display: flex; align-items: center; justify-content: center; background: var(--accion-suave); color: var(--accion); font-family: var(--display); font-size: 28px; font-weight: 700; }
.adm-perfil-datos h2 { font-size: 20px; }
.adm-datos { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px var(--e-4); margin: 0; border-top: 1px solid var(--linea); }
.adm-datos dt { color: var(--gris); font-size: 14px; }
.adm-datos dd { margin: 0; font-weight: 500; }
.adm-clave { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .06em; word-break: break-all; background: var(--sup-2); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); user-select: all; }
.adm-pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--e-2); color: var(--tinta-2); }
.adm-registro { align-items: flex-start; }
.adm-hora { flex-shrink: 0; width: 132px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.adm-avisos { position: fixed; top: var(--e-4); right: var(--e-4); left: var(--e-4); z-index: 50; display: flex; justify-content: flex-end; pointer-events: none; }
.adm-aviso { max-width: 380px; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--ok); color: #fff; font-weight: 500; box-shadow: var(--sombra-flota); pointer-events: auto; animation: entra var(--t-media) var(--curva); }
.adm-aviso.mal { background: var(--peligro); }
/* Ingreso */
.adm-ingreso-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--e-5) var(--e-4); background: var(--fondo); }
.adm-ingreso { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6) var(--e-5); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-4); box-shadow: var(--sombra-2); }
.adm-ingreso .adm-marca { margin-bottom: var(--e-2); }
.adm-ingreso label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.adm-ingreso small { font-weight: 400; color: var(--gris); font-size: 13px; }
.adm-error { color: var(--peligro); font-weight: 600; background: var(--peligro-suave); padding: var(--e-3); border-radius: var(--r-2); }
@media (min-width: 720px) {
  .adm-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-cifra { border-top: 0; border-right: 1px solid var(--linea); }
  .adm-cifra:last-child { border-right: 0; }
  .adm-form-dos { grid-template-columns: 1fr 1fr; }
  .adm-filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .adm-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .adm { grid-template-columns: 248px minmax(0, 1fr); }
  .adm-lado { height: 100vh; padding: var(--e-5) var(--e-4); border-bottom: 0; border-right: 1px solid var(--linea); gap: var(--e-5); }
  .adm-nav { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 2px; }
  .adm-nav-item { width: 100%; }
  .adm-lado-pie { position: static; display: flex; flex-direction: column; gap: var(--e-2); margin-top: auto; }
  .adm-lado-pie .adm-btn { min-height: 44px; padding: 0 var(--e-4); font-size: 15px; }
  .adm-lado-pie a.adm-btn { display: inline-flex; }
  .adm-principal { padding: 40px 48px 80px; }
}