/*
 * YEFRIS — y_expediente.css
 * Lenguaje visual compartido de las 6 pantallas de auth (el "expediente").
 *
 * De donde viene: el patron nacio inline en onboarding/wizard_step_4.html
 * (prefijo .y-ge-). Aqui se extrae, se rebautiza .y-exp- y se parametriza para
 * que las seis pantallas de auth compartan una sola piel.
 *
 * Lo que NO se toca:
 *   - El font-size de los inputs. base.html:109-113 fuerza
 *     input,select,textarea{font-size:max(1rem,16px)!important} para que iOS no
 *     haga zoom al enfocar. Ese guardarrail se respeta: el OTP gana presencia
 *     por tracking, peso y padding, jamas por tamano.
 *   - El tema por media query. base.html:232-238 escribe data-theme desde
 *     localStorage('yefris-theme') y solo cae a matchMedia cuando no hay
 *     preferencia guardada. Un @media (prefers-color-scheme) ignoraria el
 *     conmutador manual del usuario, asi que aqui el bitema es por atributo.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1 · CONTENEDOR Y TOKENS
   ─────────────────────────────────────────────────────────────────────────
   Los valores base son los del tema CLARO, no los del oscuro como hacia el
   original. Razon: tokens.css declara la piel clara en `:root, [data-theme=
   "light"]`, de modo que un documento sin data-theme (JS caido, primer frame
   antes del script) ya sirve --y-text-* claros. Si aqui la base fuese oscura,
   ese hueco dejaria tinta oscura sobre superficie oscura. Base clara = misma
   direccion que tokens.css = imposible desincronizarse.

   Repintar el expediente entero = cambiar --y-exp-acento (+ su pareja -2) y
   el par de la portada. Todo lo demas cuelga de ahi. */
.y-exp {
  /* Acento: el filo de las fichas, el rotulo, el foco y el boton primario.
     El -2 existe porque el degradado del filo original iba de #2DD4BF a
     #0E7A6E; sin token el segundo teal quedaba clavado y el expediente no se
     repintaba entero. */
  --y-exp-acento:    var(--y-brand-vivid);
  --y-exp-acento-2:  #0E7A6E;
  /* Halo del foco. Va suelto porque color-mix() no llega a los Safari viejos
     que todavia corren en un iPhone SE; si se cambia el acento, esta rgba se
     repinta a mano. Es la unica atadura manual que queda. */
  --y-exp-halo:      rgba(45, 212, 191, .22);

  /* Portada: identica en las dos pieles (ver bloque 2). */
  --y-exp-portada-a: #0F2A26;
  --y-exp-portada-b: #0A1A18;

  /* Superficie y linea del cuerpo. Estas SI cambian de piel. */
  --y-exp-sup:       rgba(13, 20, 18, .035);
  --y-exp-linea:     rgba(13, 20, 18, .10);

  /* Ambar de la ficha .es-amber. En claro NO se usa --y-amber (#D4891A da
     2,53:1 sobre el fondo de pagina: reprobado). Se usa una tinta ambar
     oscurecida solo para texto y filo. En oscuro --y-amber ya cumple. */
  --y-exp-ambar:     #8A5A0B;

  /* Fucsia de la ficha .es-agencia (la mitad "agencia" del producto). Mismo
     problema que el ambar y misma solucion: el fucsia vivo de marca #FF4FA3
     como TINTA da 2,50:1 sobre el fondo de la ficha clara — reprobado de largo.
     En claro se usa una fucsia oscurecida (5,41:1 sobre la ficha, 6,04:1 sobre
     la pagina); en oscuro el vivo ya cumple (6,16:1 sobre la ficha). */
  --y-exp-fucsia:    #A8206B;

  max-width: 440px;
  margin: 0 auto;
  text-align: left;
}

[data-theme="dark"] .y-exp,
.dark .y-exp {
  --y-exp-sup:   rgba(255, 255, 255, .035);
  --y-exp-linea:  rgba(255, 255, 255, .09);
  --y-exp-ambar:  var(--y-amber);          /* #F59E0B */
  --y-exp-fucsia: #FF4FA3;                 /* el fucsia vivo de marca */
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · PORTADA
   ─────────────────────────────────────────────────────────────────────────
   Verde oscura en LAS DOS pieles: es la tapa del expediente, no una tarjeta
   del tema. Por eso aqui esta PROHIBIDO --y-text-*: en claro esos tokens son
   tinta casi negra y caerian sobre verde oscuro. Se escriben los valores del
   tema oscuro a pelo, y el borde tambien.

   Contrastes verificados sobre #0F2A26 (el extremo mas claro del degradado,
   o sea el peor caso):
     #EDF0EB → 13,4:1   (titulo)
     #A0AE99 →  6,53:1  (numero y subtitulo; ratio ya documentado en el original)
     #2DD4BF →  8,30:1  (rotulo)
   Los tres pasan AA holgados, y el rotulo/numero a 9-9,5px lo agradecen. */
.y-exp-portada {
  position: relative;
  overflow: hidden;
  padding: 20px 18px 17px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(45, 212, 191, .14), transparent 58%),
    linear-gradient(158deg, var(--y-exp-portada-a), var(--y-exp-portada-b));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}
/* Doble filo: el borde exterior y una segunda regla a 9px por dentro. Es lo que
   convierte la tapa en LAMINA IMPRESA en vez de en tarjeta -- el mismo recurso
   de una portada de dossier o de un diploma. Va en ::after y no en un div para
   no meter markup vacio, y con pointer-events:none para que no coma clics. */
.y-exp-portada::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .055);
  pointer-events: none;
}
/* ── El riel y su barrido ──────────────────────────────────────────────────
   La unica pieza de la pantalla donde las dos casas se tocan: Gestion entra por
   la izquierda en turquesa y Agencia sale por la derecha en fucsia, en la misma
   linea. Antes de que el duenno lea una sola palabra ya ha visto que Yefris son
   dos cosas.
   3px y no 2: a 2px la banda se pierde en una captura de movil (medido). En el
   expediente de Agencia la equivalente tambien es de 3.
   Se anima translateX de una banda con gradiente, NUNCA background-position:
   es la tecnica de y-ag-vaiven, la unica que va fluida en las GPU Mali de los
   Android baratos del sector. */
.y-exp-riel {
  position: relative;
  height: 3px;
  margin: 15px 0 0;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.y-exp-riel > i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  display: block;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent, #5EEAD4 30%, #FF4FA3 70%, transparent);
  /* VAIVEN, no pasada: cruza a la derecha, descansa, y VUELVE por el mismo
     camino. La ida lleva turquesa delante y fucsia detras; al volver el orden
     se invierte solo, porque la banda es la misma girando de sentido -- Gestion
     y Agencia se turnan en la cabeza sin que haya que pintar dos bandas.
     Los reposos en los extremos (12% del ciclo a cada lado) son lo que separa
     esto de un bucle mecanico: la banda llega, se detiene un instante y se
     devuelve, como algo que revisa y no como algo que gira. */
  animation: y-exp-barrido 5.6s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes y-exp-barrido {
  0%,   6%  { transform: translateX(-110%); }   /* reposo izquierda */
  44%,  56% { transform: translateX(272%);  }   /* cruce + reposo derecha */
  94%, 100% { transform: translateX(-110%); }   /* vuelta */
}
/* Quieto: el degradado se queda a lo ancho y dice lo mismo sin moverse. */
@media (prefers-reduced-motion: reduce) {
  .y-exp-riel > i {
    animation: none;
    width: 100%;
    transform: none;
    background: linear-gradient(90deg, #2DD4BF, #FF4FA3);
  }
}
/* ── La mesa de las dos casas ──────────────────────────────────────────────
   Dos columnas con hairline vertical: leen como TABLA, no como dos tarjetas
   sueltas. Van dentro de la portada porque el duenno tiene que saber que es
   Yefris antes de mirar el formulario, no despues de decidir. */
.y-exp-mesa {
  display: flex;
  margin: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.y-exp-mit {
  flex: 1;
  min-width: 0;
  padding: 13px 0 14px;
}
.y-exp-mit + .y-exp-mit {
  border-left: 1px solid rgba(255, 255, 255, .09);
  padding-left: 15px;
}
.y-exp-mit:first-child { padding-right: 15px; }
.y-exp-mk {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-family: var(--y-font-mono);
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
/* Dentro de la portada, que es oscura en las dos pieles, los vivos de marca
   cumplen AA de sobra: #2DD4BF da 8,30:1 y #FF4FA3 da 5,17:1 sobre #0F2A26.
   Por eso aqui NO se usan --y-exp-acento ni --y-exp-fucsia, que traen las
   versiones oscurecidas pensadas para la piel clara. */
.y-exp-mk.es-gestion { color: #2DD4BF; }
.y-exp-mk.es-agencia { color: #FF4FA3; }
.y-exp-mk i {
  display: block;
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.y-exp-mv {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.42;
  color: #A0AE99;
}
/* El sello de la condicion de entrada, al pie de la tapa. */
.y-exp-sello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0 0;
  font-family: var(--y-font-mono);
  /* 11px y no 9,5: es la condicion que cierra la decision de darse de alta
     ("gratis" y "sin tarjeta" son las dos objeciones que quedan), y a 9,5 se
     leia como pie de pagina. Sigue siendo mono y en versalitas, asi que no
     compite con el titular. */
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Pie de pantalla: la salida del que YA tiene cuenta. Usaba .y-exp-pie, que
   es el parrafo de las fichas -- alineado a la izquierda y a 12,5px, porque
   ahi es texto de lectura. Aqui es un enlace de navegacion y necesita lo
   contrario: centrado, algo mas grande, y con aire por arriba para no pegarse
   al boton principal. */
.y-exp-salida {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--y-text-3);
}
.y-exp-salida a {
  color: var(--y-exp-acento);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.y-exp-sello b { color: #2DD4BF; font-weight: 400; }
.y-exp-sello em { color: #A0AE99; font-style: normal; }

.y-exp-ph {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.y-exp-rotulo {
  margin: 0;
  font-family: var(--y-font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--y-exp-acento);
}

/* flex:none para que el numero no se comprima y parta el rotulo; a la derecha
   porque es el sello del expediente, no una lectura. */
.y-exp-num {
  margin: 0;
  font-family: var(--y-font-mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #A0AE99;
  text-align: right;
  line-height: 1.6;
  flex: none;
}

/* word-break porque en auth el titulo lleva a veces el nombre del restaurante,
   que puede venir sin espacios y desbordar los 390px del SE. */
.y-exp-tit {
  margin: 11px 0 0;
  font-family: var(--y-font-voice, 'Butler', Georgia, serif);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.12;
  color: #EDF0EB;
  word-break: break-word;
}

.y-exp-sub {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #A0AE99;
}

/* El dato que hay que reconocer de un vistazo: el correo al que sale el codigo.
   Portado de .y-ge-dom (wizard_step_4.html:168-169) SIN text-transform: un
   correo en mayusculas a 9,5px no es un dato, es un adorno. Mono porque es un
   identificador y hay que poder cotejarlo caracter a caracter; break-all porque
   un correo largo no parte por espacios y desbordaria los 390px del SE.

   El color va en dos tramos porque este dato puede vivir en dos superficies:
     · suelto en la pagina  → --y-text-1  (16,56:1 en claro · 17,27:1 en oscuro)
     · dentro de la portada → el acento   (8,18:1 sobre #0F2A26, las dos pieles)
   Aqui --y-text-1 es obligatorio como base: el acento como TEXTO sobre el fondo
   de pagina claro da 1,65:1, o sea invisible. Y dentro de la portada pasa lo
   contrario (tinta casi negra sobre verde oscuro), de ahi la segunda regla. */
.y-exp-dom {
  margin: 0;
  font-family: var(--y-font-mono);
  font-size: 13px;
  color: var(--y-text-1);
  word-break: break-all;
}

.y-exp-portada .y-exp-dom { color: var(--y-exp-acento); }

/* ─────────────────────────────────────────────────────────────────────────
   3 · VOZ
   ─────────────────────────────────────────────────────────────────────────
   Cuando Yefris habla en primera persona suena en Butler. Fuera de la portada
   ya estamos en la piel del tema, asi que aqui --y-text-1 SI es correcto.
   Contraste: #0D1412 sobre #E8F4F1 = 16,6:1 · #EDF0EB sobre #080A09 = 17,3:1. */
.y-exp-voz {
  margin: 16px 0 0;
  font-family: var(--y-font-voice, 'Butler', Georgia, serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.35;
  color: var(--y-text-1);
}

/* ─────────────────────────────────────────────────────────────────────────
   4 · BLOQUE DE TRABAJO
   ─────────────────────────────────────────────────────────────────────────
   Absorbe dos clases del original (.y-ge-trabajo + .y-ge-fichas) en una sola:
   la regla superior/inferior y la pila de fichas son la misma seccion, y
   fusionarlas ahorra un wrapper y un margen colapsado. El `gap` sustituye a
   los margenes entre hijos, asi que la cabecera no lleva margin-bottom. */
.y-exp-bloque {
  margin: 14px 0 0;
  padding: 11px 0 12px;
  border-top: 1px solid var(--y-exp-linea);
  border-bottom: 1px solid var(--y-exp-linea);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* El original usaba --y-text-3 aqui. Se sube a --y-text-2: en claro
   #5E7A70 sobre el fondo de pagina #E8F4F1 da 4,16:1 y REPRUEBA AA, y esto
   son 9,5px en mayusculas con tracking, el texto mas fragil de la pantalla.
   Con --y-text-2: #3A5049 sobre #E8F4F1 = 7,71:1 · #A0AE99 sobre #080A09 = 8,40:1. */
.y-exp-bh {
  margin: 0;
  font-family: var(--y-font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--y-text-2);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   5 · FICHA
   ─────────────────────────────────────────────────────────────────────────
   El filo de 2px va como ::after posicionado, NO como border-left: un borde
   lateral de distinto color rompe el radio de las esquinas izquierdas.
   overflow:hidden recorta el ::after contra el radio. */
.y-exp-ficha {
  background: var(--y-exp-sup);
  border: 1px solid var(--y-exp-linea);
  border-radius: 13px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  animation: expCae .45s cubic-bezier(.2, .7, .3, 1) both;
}

.y-exp-ficha::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--y-exp-acento), var(--y-exp-acento-2));
}

/* Escalonado: la segunda ficha entra despues. Con fill `both` el retardo deja
   la ficha invisible mientras espera, que es justo el efecto buscado. */
.y-exp-ficha:nth-of-type(2) { animation-delay: .07s; }
.y-exp-ficha:nth-of-type(3) { animation-delay: .14s; }

.y-exp-ft {
  margin: 0 0 7px;
  font-family: var(--y-font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--y-text-2);
}

/* Parrafo de apoyo. Sirve tanto de pie de ficha como de pie legal suelto bajo
   el boton; por eso el margen superior es 0 y lo pone quien lo coloca. */
.y-exp-pie {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--y-text-2);
}

/* Los enlaces de pie (los de "¿Ya tienes cuenta?", y tambien el <a> que viaja
   dentro del error de correo duplicado). Sin esto no se ven: el preflight de
   Tailwind hace `a{color:inherit;text-decoration:inherit}`, asi que un enlace
   sin clase queda EXACTAMENTE igual que el texto que lo rodea. En las plantillas
   se venia parcheando a mano con .underline, salvo en el error duplicado — que
   por eso llevaba meses siendo un enlace invisible. Mismo trato que .y-exp-chk a. */
.y-exp-pie a {
  color: var(--y-text-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Variante ambar, calcada del molde .es-paso de agencia_bienvenida.html:502-507.
   Tres declaraciones: borde, fondo y tinta del rotulo; el filo se recolorea
   apagando el degradado a un plano.
   Contraste del ambar de texto:
     claro  #8A5A0B sobre fondo de ficha #E0ECE9 → 4,89:1 (y 5,27:1 sobre pagina)
     oscuro #F59E0B sobre fondo de ficha #111213 → 8,61:1 */
.y-exp-ficha.es-amber {
  border-color: color-mix(in srgb, var(--y-exp-ambar) 28%, transparent);
  background: color-mix(in srgb, var(--y-exp-ambar) 7%, transparent);
}
.y-exp-ficha.es-amber::after { background: var(--y-exp-ambar); }
.y-exp-ficha.es-amber .y-exp-ft { color: var(--y-exp-ambar); }

/* Respaldo para Safari sin color-mix (< 16.2): sin el, borde y fondo se
   quedarian en los del tema y solo cambiaria el filo. Se declara ANTES en
   cascada mediante @supports not, que los navegadores modernos ignoran. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .y-exp-ficha.es-amber {
    border-color: var(--y-amber-border);
    background: var(--y-amber-subtle);
  }
}

/* Variante fucsia, calcada del molde de .es-amber. Es la mitad "agencia" del
   producto (Google, resenas, redes) frente a la mitad "gestion", que se queda
   con el teal. Nace de un style inline en signup.html que reescribia los dos
   tokens del filo; el inline pintaba el filo pero dejaba el rotulo en el gris
   del tema, asi que la ficha ni siquiera decia "agencia" con el color.
   Contraste del fucsia de texto (.y-exp-ft, 9,5px mono en mayusculas):
     claro  #A8206B sobre fondo de ficha #E4E5E8 → 5,41:1 (6,04:1 sobre pagina)
     oscuro #FF4FA3 sobre fondo de ficha #190F14 → 6,16:1 (6,52:1 sobre pagina) */
.y-exp-ficha.es-agencia {
  border-color: color-mix(in srgb, var(--y-exp-fucsia) 28%, transparent);
  background: color-mix(in srgb, var(--y-exp-fucsia) 7%, transparent);
}
.y-exp-ficha.es-agencia::after { background: var(--y-exp-fucsia); }
.y-exp-ficha.es-agencia .y-exp-ft { color: var(--y-exp-fucsia); }

/* Mismo respaldo que el ambar, pero con los rgba escritos a mano: el fucsia no
   tiene pareja -border/-subtle en tokens.css, y no la va a tener por una ficha.
   La rama oscura va DENTRO del @supports porque el fallback si cambia de piel. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .y-exp-ficha.es-agencia {
    border-color: rgba(168, 32, 107, .28);
    background: rgba(168, 32, 107, .07);
  }
  [data-theme="dark"] .y-exp-ficha.es-agencia,
  .dark .y-exp-ficha.es-agencia {
    border-color: rgba(255, 79, 163, .28);
    background: rgba(255, 79, 163, .07);
  }
}

/* Solo opacity y transform: son las dos propiedades que el compositor resuelve
   sin repintar. Nada de filter:blur ni backdrop-filter, que en las Mali de los
   Android baratos del sector cuestan frames. */
@keyframes expCae {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6 · CAMPOS
   ───────────────────────────────────────────────────────────────────────── */

/* Email. Hereda los 16px del guardarrail de base.html y no los discute.
   Sin `ring` de Tailwind: esto es CSS propio y el foco se dibuja aqui.
   Contraste del valor: #0D1412 sobre #E0ECE9 = 15,4:1 · #EDF0EB sobre #111213 = 16,2:1.
   El placeholder usa --y-text-2 y no --y-text-3 por la misma razon que .y-exp-bh:
   en claro el -3 sobre esta superficie da 3,86:1 y un placeholder es texto. */
.y-exp-campo {
  display: block;
  width: 100%;
  padding: 11px 13px;
  background: var(--y-exp-sup);
  border: 1px solid var(--y-exp-linea);
  border-radius: 11px;
  color: var(--y-text-1);
  font-family: var(--y-font-sans);
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.y-exp-campo::placeholder { color: var(--y-text-2); opacity: 1; }

.y-exp-campo:focus {
  outline: none;
  border-color: var(--y-exp-acento);
  box-shadow: 0 0 0 3px var(--y-exp-halo);
}

/* OTP. La presencia se consigue con tracking, peso, mono y aire vertical,
   NUNCA con font-size (guardarrail de iOS) ni con un !important propio.
   El text-indent compensa el letter-spacing: el tracking anade hueco TAMBIEN
   despues del ultimo caracter, y eso descentra el codigo hacia la izquierda
   exactamente medio em de tracking. */
.y-exp-otp {
  display: block;
  width: 100%;
  padding: 15px 12px;
  background: var(--y-exp-sup);
  border: 1px solid var(--y-exp-linea);
  border-radius: 11px;
  color: var(--y-text-1);
  font-family: var(--y-font-mono);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .42em;
  text-indent: .42em;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.y-exp-otp::placeholder {
  color: var(--y-text-2);
  opacity: 1;
  letter-spacing: .42em;
}

.y-exp-otp:focus {
  outline: none;
  border-color: var(--y-exp-acento);
  box-shadow: 0 0 0 3px var(--y-exp-halo);
}

/* ─────────────────────────────────────────────────────────────────────────
   7 · BOTONES
   ─────────────────────────────────────────────────────────────────────────
   CRITICO: el JS del cooldown hace btn.textContent = '...' y eso borra
   cualquier hijo. Por eso el boton es display:block con text-align:center y
   NO flex con spans, ni iconos en ::before que dependan del layout. Si un dia
   lleva icono, va dentro del texto o no va.

   Contraste: #0C1B19 sobre #2DD4BF = 9,51:1, y el acento vale lo mismo en las
   dos pieles, asi que el boton no cambia de contraste al cambiar de tema. */
.y-exp-btn {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--y-exp-acento);
  color: #0C1B19;
  font-family: var(--y-font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .16s ease, transform .1s ease;
}

.y-exp-btn:active { transform: translateY(1px); }

/* El cooldown deja el boton deshabilitado con la cuenta atras dentro; tiene
   que leerse (no bajar de 4,5:1) pero verse apagado. .55 sobre 9,51:1 deja el
   texto por encima de 5:1 contra el acento atenuado. */
.y-exp-btn:disabled,
.y-exp-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Secundario: mismo molde, sin peso visual. Tinta --y-text-1 sobre el fondo
   del tema: 16,6:1 en claro, 17,3:1 en oscuro. */
.y-exp-btn.es-sec {
  background: transparent;
  border-color: var(--y-exp-linea);
  color: var(--y-text-1);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────
   8 · CONSENTIMIENTOS
   ─────────────────────────────────────────────────────────────────────────
   La caja mide 17px porque visualmente no debe competir con el texto, pero la
   FILA entera mide 44px minimos y es el area tactil: en signup son los dos
   unicos elementos que el usuario puede fallar y perder el registro. */
.y-exp-chk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.y-exp-chk input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--y-exp-acento);
  cursor: pointer;
}

.y-exp-chk > span,
.y-exp-chk label {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--y-text-2);
}

/* Los enlaces legales dentro del consentimiento: subrayados de verdad, no solo
   de color, porque el acento sobre el fondo claro no llega a 3:1 de diferencia
   cromatica frente al texto vecino. */
.y-exp-chk a {
  color: var(--y-text-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   8 bis · EL ALTA (wizard paso 3: tu nombre + tu negocio)
   ─────────────────────────────────────────────────────────────────────────
   Va AQUI, y no al final del fichero, por una razon de cascada y no de gusto:
   las dos animaciones nuevas se apagan en el bloque de movimiento reducido de
   la seccion 9, y una @media NO suma especificidad. Si estas reglas base se
   escribieran despues del @media, ganarian por orden de fuente y dejarian el
   bloque de movimiento reducido sin efecto. Delante del @media = el @media
   manda, que es lo que se busca. */

/* ── Alta · barra de avance ──────────────────────────────────────────────
   No es .y-exp-riel: aquel es un vaiven infinito de 38% de ancho. Esta mide
   cuanto llevas hecho. Solo anima width, que es la unica propiedad no
   compositable que el contrato permite aqui. */
.y-exp-avance { margin-top:14px; height:4px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.y-exp-avance > i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#2DD4BF,#5EEAD4); transition:width .55s cubic-bezier(.3,0,.2,1); }

/* ── Alta · lamina del hallazgo ──────────────────────────────────────────
   Hermana de la portada: cae como una ficha pero es tapa, porque lo que
   trae es un documento de Google, no un campo del formulario. */
.y-exp-portada.es-hallazgo { margin-top:14px; animation:expCae .45s cubic-bezier(.2,.7,.3,1) both; }
.y-exp-portada.es-hallazgo .y-exp-tit { font-size:19px; line-height:1.25; margin-top:0; }
.y-exp-portada.es-hallazgo .y-exp-sub { margin-top:4px; }
.y-exp-hallazgo { display:flex; gap:12px; align-items:flex-start; margin-top:13px; }
.y-exp-hallazgo-foto { width:56px; height:56px; flex:none; border-radius:10px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.05) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:22px; color:#A0AE99; }
.y-exp-hallazgo-txt { flex:1; min-width:0; }
.y-exp-hallazgo-datos { margin:13px 0 0; padding-top:11px; border-top:1px solid rgba(255,255,255,.09); font-family:var(--y-font-mono); font-size:11px; line-height:1.5; color:#A0AE99; display:flex; flex-wrap:wrap; gap:2px 14px; }
.y-exp-hallazgo-datos b { color:#EDF0EB; font-weight:400; }

/* ── Alta · lista de resultados ──────────────────────────────────────────
   Fuera de la portada: aqui si mandan los tokens del tema. */
.y-exp-lista { margin-top:8px; border:1px solid var(--y-exp-linea); border-radius:12px; background:var(--y-exp-sup); max-height:280px; overflow-y:auto; display:none; }
.y-exp-lista-fila { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; text-align:left; width:100%; background:transparent; border:0; border-bottom:1px solid var(--y-exp-linea); font:inherit; color:inherit; }
.y-exp-lista-fila:last-child { border-bottom:0; }
.y-exp-lista-fila:hover, .y-exp-lista-fila:focus-visible { background:var(--y-exp-halo); }
.y-exp-lista-foto { width:56px; height:56px; flex:none; border-radius:10px; border:1px solid var(--y-exp-linea); background:var(--y-exp-sup) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--y-text-2); }
.y-exp-lista-txt { flex:1; min-width:0; }
.y-exp-lista-nom { margin:0 0 2px; font-size:15px; font-weight:600; color:var(--y-text-1); }
.y-exp-lista-dir { margin:0 0 2px; font-size:12.5px; color:var(--y-text-2); }
.y-exp-lista-meta { margin:0; font-size:11.5px; color:var(--y-text-2); }
.y-exp-lista-meta .es-nota { color:var(--y-exp-ambar); }

/* ── Alta · enlace de salida en forma de boton ─────────────────────────── */
.y-exp-enlace { display:inline-flex; align-items:center; justify-content:center; min-height:48px; background:transparent; border:0; padding:0 4px; font:inherit; font-weight:600; color:var(--y-exp-acento); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.y-exp-enlace.es-neutro { color:var(--y-text-3); font-weight:400; }
.y-exp-enlace:focus-visible { outline:2px solid var(--y-exp-acento); outline-offset:2px; }

/* ─────────────────────────────────────────────────────────────────────────
   9 · FOCO DE TECLADO Y MOVIMIENTO REDUCIDO
   ───────────────────────────────────────────────────────────────────────── */

.y-exp-btn:focus-visible,
.y-exp-chk input:focus-visible {
  outline: 2px solid var(--y-exp-acento);
  outline-offset: 2px;
}

/* La trampa: `animation: ... both` deja el estado FINAL cuando la animacion
   termina, pero mientras corre el retardo aplica el estado INICIAL (fill
   backwards), que aqui es opacity:0. Si aqui solo se anulara el delay, o si la
   ficha llevara opacity:0 en su regla base, apagar la animacion la dejaria
   invisible para siempre.
   No es el caso: .y-exp-ficha no declara opacity ni transform propios, asi que
   animation:none la devuelve a su estado natural, visible. Aun asi se fijan
   opacity y transform explicitos: es una linea barata frente a una pantalla de
   login en blanco para quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .y-exp-ficha {
    animation: none;
    animation-delay: 0s;
    opacity: 1;
    transform: none;
  }
  .y-exp-btn,
  .y-exp-campo,
  .y-exp-otp {
    transition: none;
  }
  .y-exp-btn:active { transform: none; }
  /* Las dos piezas del alta (bloque 8 bis). Aqui no hay regla paraguas: toda
     animacion nueva del expediente hay que apagarla a mano, y por eso 8 bis se
     escribe ANTES de este @media. La barra se queda donde toca, sin recorrido;
     la lamina del hallazgo aparece ya puesta, sin caida. */
  .y-exp-avance > i { transition: none; }
  .y-exp-portada.es-hallazgo { animation: none; opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   10 · RITMO VERTICAL
   ─────────────────────────────────────────────────────────────────────────
   Los componentes traen su propia separacion para que las plantillas no la
   improvisen con mt-3 aqui y mt-4 alla. Antes de esto, el mismo boton llevaba
   mt-3 en una pantalla y mt-4 en otra sin que nadie lo hubiera decidido.

   12px es el paso: coincide con el mt-3 de Tailwind, que era el valor que mas
   se repetia en las seis plantillas. */
.y-exp-campo,
.y-exp-otp,
.y-exp-btn {
  margin-top: 12px;
}

/* Un campo pegado a su rotulo NO lleva los 12px: el rotulo ya trae sus 7px de
   margin-bottom y esa cercania es la que dice "esta etiqueta es de este campo".
   Sin este reset los margenes adyacentes colapsan al mayor (12px) y la pareja
   se separa. Es la unica razon por la que existe la regla. */
.y-exp-ft + .y-exp-campo,
.y-exp-ft + .y-exp-otp {
  margin-top: 0;
}

/* Dentro del bloque manda el `gap`. Y aqui la trampa es doble: en un contenedor
   flex los margenes NO colapsan, se SUMAN al gap, asi que un boton con 12px
   propios abriria 20px donde el bloque pide 8. Vale tanto para el boton suelto
   como para el que viene envuelto en un <form> (su margen colapsa hacia fuera
   del form y reaparece como margen del form, que si es hijo flex). */
.y-exp-bloque .y-exp-btn {
  margin-top: 0;
}

/* Los dos consentimientos, separados entre si. 4px y no 12px porque cada fila
   ya reserva 44px de alto y 4px de padding arriba y abajo: los 12px del paso
   normal los despegarian hasta parecer dos bloques distintos. */
.y-exp-chk {
  margin-top: 4px;
}