/* RESTAURADA LA NOCHE DEL 23 DE SEPTIEMBRE DE 2026. Esa tarde la hoja paso a
   #333336 con una capa plana al estilo de Apple, y el dueño la vio «aburrida y
   plana»: pidio volver a esta, oscura y con su relieve (la landing clara, Daia
   ID oscuro). Es la version publicada a las 15:46 de ese dia, con solo dos
   cambios: la letra de Apple en vez de Outfit (Outfit se retiro de Daia ese
   dia) y el trazo de la casilla de la politica (ver `.daia-id-acepto__caja`).
   La version de la tarde esta en `archivo/respaldo-daia-id-333336-2026-09-23/`. */
/* =====================================================================
   Daia ID — la hoja de cuenta, UNA SOLA para las cinco apps

   POR QUE UN ARCHIVO APARTE Y NO LAS CLASES DE CADA PROYECTO
   Cada app de Daia tiene su propio Tailwind (Mi Ruta U trae su variante
   "Campus", Rompe Habitos y Fierro traen la suya) o, en el caso del kit, ni
   siquiera hay Tailwind. Si esta hoja usara las clases de cada host, se veria
   un poco distinta en cada una segun sus tokens — y el punto entero de tener
   UNA cuenta es que se sienta como una sola cosa. Por eso las clases de aqui
   (`daia-id-*`) no dependen de nada del proyecto que la use: solo de esta hoja
   de estilos y de la variable `--daia-id-acento`, que cada app fija una vez
   con el color de SU familia.

   ES GRIS OSCURO SIEMPRE, YA NO SIGUE AL SISTEMA (18 de septiembre de 2026)
   Antes esta hoja tenia un modo claro (base) y uno oscuro, alternando por el
   atributo `data-theme` que algunas apps fuerzan o por
   `@media (prefers-color-scheme: dark)` cuando seguia al sistema. Se decidio
   que Daia ID es su propia identidad visual — oscura, reconocible, la misma
   en las ocho copias — sin importar si la app anfitriona esta en claro o en
   oscuro, y sin importar el sistema operativo. Los valores de aqui son
   exactamente los que antes eran el modo oscuro: no se invento paleta nueva,
   se hizo permanente la que ya existia y ya estaba probada.

   EL #1F2129 NO ES UN DESCUIDO
   La paleta de Daia tiene tres superficies oscuras: base #0E0F13, tarjeta
   #16181D y borde #24262E. La hoja ENTERA es la tarjeta (#16181D), asi que lo
   que va dentro de ella —el campo, los botones de fila, el resumen— necesita un
   cuarto tono que se distinga de su propio fondo. #1F2129 es ese tono.

   COPIA, NO ENLACE
   Se copia entera en cada app, igual que los colores de identidad. El
   vigilante es `daia/daia-id/pruebas/revisar-copias.mjs`.
   ===================================================================== */

/* =====================================================================
   EL MOVIMIENTO (18 de septiembre de 2026)

   Las mismas cuatro duraciones y tres curvas de
   `daia/recursos/identidad/movimiento.css`, repetidas aqui A PROPOSITO.

   POR QUE SE REPITEN EN VEZ DE HEREDARSE
   Esta hoja se copia en ocho sitios y tiene que verse igual en los ocho, pero
   no todos cargan el CSS global de una app de Daia: el kit y la pagina de la
   cuenta la sirven por su cuenta. Si dependiera de que alguien mas haya
   declarado `--curva-asiento`, en esos dos sitios las transiciones se caerian
   al valor por defecto del navegador y la hoja se moveria distinto justo donde
   nadie va a mirar. Es la misma razon por la que la hoja no usa el Tailwind de
   cada app, explicada arriba.

   ANTES DE ESTO HABIA NUEVE CURVAS DISTINTAS EN ESTE ARCHIVO
   Nueve curvas y quince duraciones, todas escritas a ojo y todas parecidas
   entre si — el desorden que el sistema de movimiento vino a quitar, y que
   desde aqui se repartia a las ocho copias.

   Y EL BLOQUE DE MOVIMIENTO REDUCIDO NO SE PUEDE OMITIR
   Estas variables se declaran en `:root`, asi que si una app ya las habia
   apagado por `prefers-reduced-motion`, esta hoja las volveria a encender al
   cargarse despues. Por eso el bloque va aqui tambien: sin el, activar
   "reducir movimiento" en el telefono dejaria de funcionar en la pantalla de
   entrada de las ocho apps. */
:root {
  --mov-rapido: 140ms;
  --mov-normal: 280ms;
  --mov-lento: 450ms;
  --mov-salida: 180ms;

  --curva-asiento: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);
  /* La cuarta (18 de septiembre de 2026): la unica con anticipacion, reservada
     a lo que celebra. El porque completo, en movimiento.css. */
  --curva-resorte: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: 1ms;
    --mov-normal: 1ms;
    --mov-lento: 1ms;
    --mov-salida: 1ms;
  }
}

/* --- El foco tiene que VERSE, y va aqui arriba para que aplique a todo ---
   No habia ni una regla de foco en las 367 lineas de este archivo: la unica que
   habia (`.daia-id-campo:focus`) era un `outline: none` que lo quitaba. Quien
   navega con teclado —o con un mando, o con un conmutador— no tenia forma de
   saber en que boton estaba: recorria la hoja a ciegas.

   Se usa `:focus-visible` y no `:focus` para que el anillo NO salga al pulsar
   con el dedo o con el raton, que es cuando estorba y no hace falta. El color
   es el acento de la app, con un halo del mismo tono que el fondo de la hoja
   por debajo para que se vea igual sobre el boton principal (que ya es de ese
   color) que sobre uno gris. */
.daia-id-hoja :focus-visible {
  outline: 2px solid var(--daia-id-acento);
  outline-offset: 2px;
  border-radius: 12px;
}
.daia-id-hoja .daia-id-boton:focus-visible,
.daia-id-hoja .daia-id-avatar-boton:focus-visible {
  box-shadow: 0 0 0 2px #16181D;
}

/* LOS CAMPOS NO LLEVAN EL ANILLO DE LA APP ANFITRIONA (23 de septiembre de 2026)

   Mi Ruta U y Eztudiando pintan el foco de TODO con un `ring` de Tailwind, que
   es un `box-shadow`: su color y, alrededor, un margen del fondo claro de la
   app (`ring-offset`). Dentro de esta hoja oscura ese margen se ve como un
   contorno blanco — alrededor del campo del correo y alrededor de las seis
   cajas del codigo (el campo de verdad es transparente y las cubre todas). La
   regla de arriba cambia el `outline`, pero no toca el `box-shadow`, asi que el
   anillo ajeno pasaba entero.

   Los campos no lo necesitan: cada uno ya dice «aqui estas» a su manera — la
   pastilla del correo y los selectores ponen su borde del acento, y en el
   codigo se enciende la caja que toca. Un segundo anillo encima no informa
   mas, solo ensucia. Por eso se apaga aqui, en la hoja, y no en cada app: asi
   vale para cualquier anfitrion, el de hoy y el que venga. */
.daia-id-hoja .daia-id-campo:focus-visible,
.daia-id-hoja .daia-id-codigo__campo:focus-visible,
.daia-id-hoja .daia-id-selector:focus-visible {
  outline: none;
  box-shadow: none;
}

/* =====================================================================
   COMO ENTRA Y SALE LA HOJA (8 de septiembre de 2026)

   Antes subia 16px parejo en telefono y escritorio, en 220ms parejo al abrir
   y al cerrar. En un telefono eso no se siente una hoja que sube desde abajo
   —sube un dedo y ya esta arriba—, y entrar y salir con la misma velocidad
   hace que cerrar se sienta lento: cerrar es "quitar del medio", no un gesto
   que merezca la misma ceremonia que abrir.

   ENTRAR Y SALIR NO DURAN LO MISMO, Y ESO ES UNA TRANSICION EN CADA SENTIDO
   Un solo `transition` no puede tener una duracion para ir y otra para volver:
   la tecnica es poner la transicion de SALIDA en el selector base (se aplica
   cuando `data-abierta` deja de ser "true" y el navegador vuelve al estado
   base) y la transicion de ENTRADA en el selector `[data-abierta="true"]`
   (se aplica cuando esa regla empieza a mandar). Entra en ~340ms con una
   curva sin rebote (la misma familia que usa iOS para una hoja), sale en
   ~200ms mas seco: salir mas rapido que entrar es lo que hace que cerrar no
   se sienta pesado.
   ===================================================================== */
.daia-id-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(19, 22, 33, 0.44);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--mov-salida) var(--curva-salida);
}
.daia-id-fondo[data-abierta="true"] { opacity: 1; transition: opacity var(--mov-normal) var(--curva-asiento); }
.daia-id-fondo[data-abierta="false"] { pointer-events: none; }

@media (min-width: 640px) {
  .daia-id-fondo { align-items: center; }
}

.daia-id-hoja {
  --daia-id-acento: #5A6070;   /* cada app la pisa antes de montar la hoja */

  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  overflow-y: auto;
  background: #16181D;
  color: #F2F3F6;
  border-radius: 28px 28px 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  /* Cerrada: fuera de la pantalla por abajo del todo, no solo 16px — es lo
     que hace que en el telefono se sienta una hoja de verdad subiendo. */
  transform: translateY(100%);
  transition: transform var(--mov-salida) var(--curva-salida);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  position: relative;
}
.daia-id-fondo[data-abierta="true"] .daia-id-hoja {
  transform: translateY(0);
  transition: transform var(--mov-normal) var(--curva-asiento);
}

@media (min-width: 640px) {
  /* En escritorio no es una hoja que sube del borde: es un dialogo centrado.
     El gesto que le toca es acercarse (un scale leve) y asentarse un poco,
     no viajar 100% de la pantalla. */
  .daia-id-hoja {
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    transform: translateY(12px) scale(.96);
  }
  .daia-id-fondo[data-abierta="true"] .daia-id-hoja { transform: translateY(0) scale(1); }
}

/* El asa de arrastre, solo tiene sentido en el telefono */
.daia-id-asa {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #24262E;
  margin: 0 auto 20px;
}
@media (min-width: 640px) { .daia-id-asa { display: none; } }

/* La X se ve SIEMPRE, tambien en el telefono.
   Estuvo en `display: none` hasta 640px, con la idea de que en movil se cierra
   arrastrando o tocando el fondo. Pero eso solo vale en la primera pantalla, la
   unica que lleva «Puedes seguir sin cuenta»: ya dentro de la cuenta no quedaba
   ni un boton visible para salir de la hoja, y Escape en un celular no existe.
   El area tactil sube a 44px, que es el minimo de las guias de Apple. */
.daia-id-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8A90A0;
  cursor: pointer;
  /* Por encima de todo lo que viene despues en el marcado: la tarjeta de la
     cuenta tiene `position: relative` y, sin esto, se pintaba ENCIMA de la X. */
  z-index: 5;
}
.daia-id-cerrar:hover { background: rgba(138, 144, 160, .12); }
/* EN «DENTRO» LA X LLEVA SU PROPIO DISCO (22 de septiembre de 2026). Ahi la
   tarjeta de color sube hasta la esquina y la X, gris sobre morado, apenas se
   veia — y es la unica salida de la hoja en un telefono. El disco es el color
   de la hoja, asi que en las demas vistas no cambia nada. `:has()` porque la X
   va antes que la tarjeta en el marcado y no hay otra forma de mirarla.
   El disco se DIBUJA con un degradado de 34px dentro del boton, que sigue
   midiendo 44: achicar el boton para que el disco quedara justo le quitaba el
   minimo de toque que se gano mas arriba. */
/* La X queda ENTERA dentro de la esquina de la tarjeta, no a caballo de su
   borde: montada en el borde, el disco se veia como un mordisco en la tarjeta.
   En el telefono la tarjeta empieza a 52px (28 de relleno + los 24 del asa) y
   a 24 del lado; en escritorio, a 32 de los dos. Cuatro pixeles hacia dentro. */
.daia-id-hoja:has(.daia-id-tarjeta) .daia-id-cerrar {
  top: 56px;
  right: 28px;
  background: radial-gradient(circle, #16181D 16.5px, transparent 17.5px);
  color: #F2F3F6;
}
.daia-id-hoja:has(.daia-id-tarjeta) .daia-id-cerrar:hover {
  background: radial-gradient(circle, #262933 16.5px, transparent 17.5px);
}
@media (min-width: 640px) {
  .daia-id-hoja:has(.daia-id-tarjeta) .daia-id-cerrar { top: 36px; right: 36px; }
}
@media (min-width: 640px) { .daia-id-cerrar { top: 16px; right: 16px; } }

/* --- El monito, dentro de su disco: sobre transparente se disuelve ---
   EL DISCO ES CLARO, NO GRIS OSCURO (22 de septiembre de 2026). Era `#1F2129`
   sobre una hoja `#16181D`, y el monito es tinta casi negra: de el solo se
   veian los lentes. Es la regla 3 del taller dicha al reves — el monito va
   dentro de un disco CLARO, no de uno cualquiera. `#F2F3F6` es el texto de la
   propia hoja, no un blanco nuevo. */
.daia-id-monito-disco {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: #F2F3F6;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Entra con un scale suave (8 de septiembre de 2026) en vez de aparecer
     quieto: se monta de nuevo cada vez que la hoja abre en una vista que no es
     "dentro", asi que esto se dispara solo, sin JS que lo dispare a mano. */
  animation: daia-id-monito-aparece var(--mov-normal) var(--curva-asiento) both;
}
.daia-id-monito-disco img { width: 44px; height: 44px; object-fit: contain; }
@keyframes daia-id-monito-aparece {
  0%   { opacity: 0; transform: scale(.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- El cuerpo: envuelve las siete vistas (8 de septiembre de 2026) ---
   `overflow: hidden` es lo que hace que la ANIMACION DE ALTURA (el JS de
   HojaDaiaID.jsx / la funcion `render()` del kit) se vea limpia: sin esto, el
   contenido de la vista que entra se desbordaria por debajo mientras la caja
   todavia esta creciendo hacia su altura nueva. `position: relative` es lo
   que necesita `.daia-id-vista` para que su deslizamiento (`transform:
   translateX`) no arrastre nada del layout de alrededor. */
.daia-id-cuerpo {
  overflow: hidden;
  position: relative;
}
.daia-id-vista {
  position: relative;
}

.daia-id-titulo {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 6px;
}

.daia-id-texto {
  font-size: 14px;
  line-height: 1.5;
  color: #A3A9B8;
  text-align: center;
  margin: 0 0 24px;
}
.daia-id-texto strong { color: inherit; font-weight: 600; }

.daia-id-campo {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid #24262E;
  background: #1F2129;
  color: #F2F3F6;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 12px;
}

/* --- La vista "estudio": dos selectores, sin nada mas nuevo que inventar ---
   (8 de septiembre de 2026). Mismo molde que `.daia-id-campo`: mismo fondo,
   mismo borde, mismo radio. Un `<select>` nativo y no uno hecho a mano: en un
   telefono es el que el sistema ya sabe operar con una sola mano. */
.daia-id-etiqueta-selector {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #A3A9B8;
  margin: 0 2px 6px;
}
.daia-id-selector {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid #24262E;
  background: #1F2129;
  color: #F2F3F6;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 16px;
  appearance: none;
  /* Una flecha de linea, dibujada a mano: nada de un triangulo por defecto del
     navegador que no combina con el resto de la hoja. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A3A9B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.daia-id-selector:focus { outline: none; border-color: var(--daia-id-acento); background-color: #16181D; }

/* =====================================================================
   EL CODIGO: UNA MANO DE CARTAS, NO SEIS CAJAS EN FILA

   Era un solo `input` con `letter-spacing: 10px`. Funcionaba, pero la pantalla
   mas importante de la cuenta —la unica que alguien ve OBLIGADO, esperando un
   correo— no decia nada. Ahora los seis numeros son seis cartas repartidas en
   abanico.

   LAS CUATRO PIEZAS, Y NINGUNA ES DECORACION SUELTA

   1. UN SOLO PIVOTE PARA LAS SEIS, MUY POR DEBAJO DE LAS CARTAS
      `transform-origin: 50% 320%` pone el centro de giro a algo mas de dos
      alturas de carta por debajo de ella. Con eso, UNA sola rotacion hace las
      dos cosas a la vez: aparta la carta hacia su lado (el abanico) y la baja un
      poco (el arco). Si cada carta girara sobre si misma habria que calcular el
      arco aparte, y lo que se veria serian seis cajas inclinadas, no una mano.
      El `translateX` que va delante solo termina de separarlas: con el giro
      solo, y a un angulo legible, quedarian montadas unas encima de otras.

   2. LA CHISPA, EN CADA TECLA
      Un `rect` con `pathLength="1"`, que es lo que permite recorrer el contorno
      entero con `stroke-dashoffset` de 1 a 0 sin saber cuanto mide. Se dispara
      en la carta que acaba de recibir su numero, y en ninguna otra: es acuse de
      recibo, no adorno.

   3. EL SELLO, MIENTRAS SE COMPRUEBA — Y VA EN COLOR NEUTRO
      La espera no es un veredicto. Verde seria prometer que entro antes de
      saberlo, y rojo seria acusar a quien todavia no ha hecho nada mal. Por eso
      los seis segmentos van en `--daia-id-hielo` y solo se tinen del acento
      cuando la respuesta ya llego.

   4. NADA DE ESTO PASA CON `prefers-reduced-motion`
      Ni abanico, ni reparto, ni chispa, ni sello girando. Seis cajas en fila y
      cambios de estado secos. El bloque esta al final de esta seccion, y no es
      opcional: quien tiene el ajuste puesto lo tiene por vertigo o por migrana,
      y esta es una pantalla de la que no se puede salir sin mirarla.

   EL `input` DE VERDAD SIGUE SIENDO UNO SOLO, Y ESO NO SE TOCA
   Las cartas son dibujo (`aria-hidden`); quien recibe las teclas es un unico
   campo transparente por encima. Seis campos sueltos romperian las tres cosas
   que hoy funcionan: `autocomplete="one-time-code"` (que el telefono ofrezca el
   codigo encima del teclado en cuanto llega el correo), pegar el codigo desde el
   correo de una vez, y entrar solo al sexto numero.
   ===================================================================== */

/* EL ABANICO SE FUE, Y NO POR CAPRICHO (19 de septiembre de 2026)

   Las cartas salian giradas 5 grados respecto a su vecina. Mirando la captura
   —`.capturas/telefono-claro/2-codigo.png`— eso no se leia como una mano de
   cartas: se leia como seis cajas mal alineadas, y la sexta, vacia y girada al
   otro lado, remataba la sensacion de pantalla rota.

   La causa de fondo no era el giro, era el CONTRASTE. La carta era `#1F2129`
   sobre una hoja `#16181D`: cinco puntos de diferencia. Sin bordes que se lean,
   el ojo no tiene de donde agarrar el rectangulo, y lo unico que percibe del
   giro es que los numeros no comparten linea de base. Un giro solo se lee como
   gracia cuando antes se ha leido la forma que gira.

   Asi que se hacen las dos cosas a la vez, y en este orden: la caja se ve
   (relleno `#24262E`, que es el token de borde oscuro que el taller ya usa, no
   un gris nuevo), y la fila se endereza. Es lo que hace `OTPInput` de rare-ui
   —casillas rectas de 48px con 8px de separacion—, que es justo la pieza que
   este paso tenia asignada desde el principio.

   El pivote de `transform-origin` se queda escrito abajo aunque con `0deg` no
   haga nada: lo sigue usando el estado «esperando», que recoge las cartas en un
   mazo con su propio giro de 1.6 grados. Ese si se lee, porque ahi las seis se
   juntan y el giro es lo unico que las distingue. */
.daia-id-codigo {
  /* La geometria, toda junta y en un solo sitio para poder afinarla mirando la
     pantalla y no leyendo el codigo. `--carta-aparte` es la distancia entre
     CENTROS: 48 de caja + 8 de aire son los 56 del original. */
  --carta-ancho: 48px;
  --carta-alto: 48px;
  --carta-paso: 0deg;    /* lo que gira cada carta respecto a su vecina */
  --carta-aparte: 56px;  /* lo que la aparta el `translateX`, de centro a centro */

  --daia-id-hielo: #4A5162;

  position: relative;
  /* 80px y no 104: con las cajas a 48 de alto, los 104 de antes dejaban una
     franja de vacio arriba y abajo. El sello mide 104 y sigue cabiendo porque
     esta centrado y nada recorta aqui — se sale 12px por cada lado, donde no
     hay nada que tapar. */
  height: 80px;
  margin: 4px 0 16px;
}

/* En pantallas estrechas se cierra un poco: seis cajas de 48 con 8 de aire son
   328px de ancho, y una hoja a pantalla completa en un telefono de 360px solo
   tiene 312px por dentro. Con 44 y 6 quedan 294 y entra holgado. */
@media (max-width: 380px) {
  .daia-id-codigo { --carta-ancho: 44px; --carta-alto: 44px; --carta-aparte: 50px; }
}

/* El campo de verdad: invisible pero PRESENTE.
   No lleva `opacity: 0` ni `visibility: hidden` a proposito — hay navegadores
   que dejan de ofrecer el codigo del SMS o del correo sobre un campo que
   consideran oculto. Aqui esta entero, encima de las cartas y ocupandolas
   todas; lo unico transparente es su texto y su cursor, que los dibujamos
   nosotros. Y `font-size: 16px` no es un capricho: por debajo de 16, Safari en
   iPhone hace zoom al enfocar y la hoja se sale de la pantalla. */
.daia-id-codigo__campo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}
.daia-id-codigo__campo:focus { outline: none; }
/* El foco se ve en las CARTAS, no en un anillo alrededor de un campo que nadie
   ve. Es la misma decision que ya estaba tomada para `.daia-id-campo`. */
.daia-id-codigo__campo:focus-visible ~ .daia-id-codigo__mano .daia-id-codigo__carta {
  border-color: #3A3F4D;
}

.daia-id-codigo__mano {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Todas las cartas nacen en el mismo sitio; lo que las separa es el `transform`.
   `--c` va de -2.5 a 2.5 (lo pone el JSX en el `style` de cada una), asi que la
   mano queda centrada sin tener que restar nada. */
.daia-id-codigo__carta {
  position: absolute;
  width: var(--carta-ancho);
  height: var(--carta-alto);
  box-sizing: border-box;
  /* 12px, el radio del original a tamano `md`. Con 14 sobre una caja de 48 la
     esquina se comia el numero. */
  border-radius: 12px;
  /* El relleno sube de `#1F2129` a `#24262E`: es el token de borde del modo
     oscuro del taller, no un gris inventado, y es lo que separa la caja de la
     hoja `#16181D`. Sin esto la fila entera se leia como un hueco. */
  border: 1.5px solid #343845;
  background: #24262E;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;

  /* La carta activa se levanta (8 de septiembre de 2026): una variable en vez
     de un segundo `transform` completo, para no duplicar el translateX/rotate
     de arriba solo por sumarle unos pixeles de alto. */
  --carta-elevacion: 0px;
  transform-origin: 50% 320%;
  transform: translateX(calc(var(--c) * var(--carta-aparte)))
             translateY(var(--carta-elevacion))
             rotate(calc(var(--c) * var(--carta-paso)));
  transition: border-color var(--mov-salida) var(--curva-asiento), box-shadow var(--mov-salida) var(--curva-asiento), transform var(--mov-normal) var(--curva-asiento);
}

.daia-id-codigo__carta[data-llena="true"] {
  border-color: var(--daia-id-acento);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
/* La UNICA carta sin numero que dice "aqui va el siguiente". Antes lo unico
   que lo marcaba era el cursor parpadeando; se nota mas al escribir si la
   carta entera se despega un poco del resto. */
.daia-id-codigo__carta[data-activa="true"] {
  --carta-elevacion: -4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
/* Y CON EL CAMPO ENFOCADO, SU BORDE ES DEL ACENTO (22 de septiembre de 2026).
   Levantarse 4px no bastaba: en la captura `2-codigo.png` las seis cajas
   vacias se veian iguales y no habia donde mirar. El borde del acento es la
   misma senal de «aqui» que ya tienen el campo del correo y los selectores. */
.daia-id-codigo__campo:focus ~ .daia-id-codigo__mano .daia-id-codigo__carta[data-activa="true"] {
  border-color: var(--daia-id-acento);
}

/* EL NUMERO ENTRA RODANDO DESDE ABAJO (19 de septiembre de 2026)

   Lo trae `OTPInput`, que mete el digito con `y: 110%` -> 0. Antes aqui el
   numero simplemente aparecia, y esa es la diferencia entre teclear sobre una
   imagen y teclear sobre algo que responde.

   VA CON `--curva-asiento` Y `--mov-rapido`, NO CON EL REBOTE. El digito
   INFORMA de lo que acabas de pulsar; no confirma nada — lo que confirma es el
   sello del final. La regla de la casa es que el rebote se reserva para eso, y
   si empieza a salir en cada tecla deja de querer decir «listo».

   Y NO SE RECORTA, a proposito: para que el numero saliera literalmente de
   detras del borde haria falta envolverlo en un elemento con `overflow:
   hidden`, y ese recorte se comeria la chispa, que se dibuja 1.5px POR FUERA de
   la carta. Entre añadir un elemento al marcado —que se copia a ocho sitios— y
   subir desde el 45% desvaneciendose, sale mejor lo segundo: se lee igual de
   bien y no toca el DOM. */
.daia-id-codigo__numero {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #F2F3F6;
}
.daia-id-codigo__carta[data-llena="true"] .daia-id-codigo__numero {
  animation: daia-id-numero-entra var(--mov-rapido) var(--curva-asiento);
}
@keyframes daia-id-numero-entra {
  from { transform: translateY(45%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* El cursor, dibujado: la barra que parpadea en la carta que toca. Solo sale
   con el campo enfocado, porque un cursor parpadeando en un campo que nadie
   esta escribiendo es una promesa falsa. */
.daia-id-codigo__cursor {
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: var(--daia-id-acento);
  opacity: 0;
}
.daia-id-codigo__campo:focus ~ .daia-id-codigo__mano .daia-id-codigo__carta[data-activa="true"] .daia-id-codigo__cursor {
  /* 1.1s, no 1.06s: era un numero suelto sin ninguna razon para ser ese
     exacto — el original mide su parpadeo en 1.1s (BLINK, ver
     `piezas-originales/rare-ui/otpinput`), y no hay motivo para no
     igualarlo. 19 de septiembre de 2026. */
  animation: daia-id-cursor 1.1s steps(1, end) infinite;
}
@keyframes daia-id-cursor {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* El kit pinta SIEMPRE las dos piezas —el numero y el cursor— y deja que el CSS
   decida cual se ve, porque su render vuelve a armar el DOM entero; la version
   de React pinta solo una. Estas dos reglas hacen que el mismo archivo, que se
   copia byte a byte, sirva para las dos. */
.daia-id-codigo__carta[data-llena="true"] .daia-id-codigo__cursor { display: none; }
.daia-id-codigo__carta:not([data-llena="true"]) .daia-id-codigo__numero { display: none; }

/* La chispa recorre el contorno de la carta. `pathLength="1"` reescala el
   contorno a una unidad, asi que `stroke-dasharray: 1` y `stroke-dashoffset`
   de 1 a 0 lo recorren entero sin que haya que medir nada — y sigue valiendo
   si manana la carta cambia de tamano. */
.daia-id-codigo__chispa {
  position: absolute;
  inset: -1.5px;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
  overflow: visible;
  pointer-events: none;
}
/* En reposo se apaga con `opacity` y NO solo con el `stroke-dashoffset`.
   Con el desfase solo, en la esquina redondeada quedaba un punto de color
   visible en las seis cartas todo el rato: el trazo no cierra exactamente donde
   empieza. La animacion enciende la opacidad, dibuja el contorno y la apaga. */
.daia-id-codigo__chispa rect {
  fill: none;
  stroke: var(--daia-id-acento);
  stroke-width: 2;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

/* --- El sello de la espera --- */
.daia-id-codigo__sello {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  /* Mas ancho que la pila de cartas (46px), para que la rodee en vez de
     cruzarla por encima. */
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.daia-id-codigo__sello circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  /* Seis segmentos de un mismo circulo: 60 grados cada uno, con un hueco.
     `pathLength="60"` hace que cada unidad sea un grado y los numeros de abajo
     se lean solos. */
  stroke-dasharray: 8 2;
  stroke: var(--daia-id-hielo);
}
/* El radio va en el propio `circle` del SVG (r="34" sobre un viewBox de 76), no
   aqui: cambiarlo desde el CSS obligaria a recalcular tambien el `pathLength`. */

/* La marca de visto: en reposo invisible (ni trazo que ver), solo se dibuja
   en "entro". `pathLength="1"` (puesto en el JSX) es lo que permite recorrerla
   entera con `stroke-dashoffset` de 1 a 0 sin medir su longitud real. */
.daia-id-codigo__visto {
  fill: none;
  stroke: var(--daia-id-acento);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

/* MIENTRAS SE COMPRUEBA: LAS CAJAS SE QUEDAN DONDE ESTAN (19 de septiembre
   de 2026)

   ANTES SE APLASTABAN EN UNA PILA y encima giraba un sello punteado. Mirado en
   la captura `2c-esperando.png`, eso no se leia como «estoy comprobando»: las
   seis cajas se montaban unas sobre otras en una forma estrujada, con los
   numeros apagados y un aro roto alrededor. Parecia que la pantalla se habia
   roto justo al pulsar Entrar, que es el peor momento posible para dar esa
   sensacion — es el segundo en que la persona esta esperando un veredicto.

   LO QUE HACE AHORA: nada se mueve de sitio. Las seis cajas siguen ahi con los
   numeros que se escribieron —que es lo que la persona quiere poder mirar
   mientras espera— y una luz las RECORRE de izquierda a derecha, una y otra
   vez. Es el mismo gesto de «esto se esta leyendo» de cualquier barra de
   progreso indeterminada, pero sobre la propia fila en vez de en un aro aparte.

   Y VA EN COLOR NEUTRO, que era lo unico bueno de lo de antes y se conserva:
   la espera no es un veredicto. Verde seria prometer que entro antes de
   saberlo, y rojo seria acusar a quien todavia no ha hecho nada mal.

   EL SELLO Y SU VISTO SE APAGAN AQUI Y EN «ENTRO». Sus elementos siguen en el
   marcado de las tres versiones de la hoja y ya no se pintan; se quitan el dia
   que se toque el JSX por otra cosa, para no reescribir ahora tres archivos por
   un elemento invisible. */
.daia-id-codigo__sello { display: none; }

.daia-id-codigo[data-estado="esperando"] .daia-id-codigo__carta {
  opacity: .55;
  border-color: #343845;
}
.daia-id-codigo[data-estado="esperando"] .daia-id-codigo__cursor { opacity: 0; }

/* La luz que recorre. Va en el `__mano`, que ya ocupa la fila entera, asi que
   no hace falta ningun elemento nuevo en el marcado — y por eso esta pieza
   sirve igual en React y en el kit, que no tiene compilador. */
.daia-id-codigo[data-estado="esperando"] .daia-id-codigo__mano::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(242, 243, 246, .13), transparent);
  pointer-events: none;
  animation: daia-id-codigo-recorre 1.15s linear infinite;
}
@keyframes daia-id-codigo-recorre {
  from { transform: translateX(-100%); }
  to   { transform: translateX(338%); }
}

/* Ya llego la respuesta y es que si: las cajas se tiñen del acento, una detras
   de otra de izquierda a derecha.

   ES EL ACIERTO DE `OTPInput`, que dibuja su anillo casilla por casilla con
   50ms de diferencia entre una y la siguiente. Aqui el escalonado lo pone
   `--c`, que el JSX ya escribe en cada carta para colocarla: vale de -2.5 a
   2.5, asi que `(var(--c) + 2.5) * 50ms` da 0, 50, 100... sin que la app tenga
   que pasar ningun dato nuevo.

   EL COLOR ES `--daia-id-acento` Y NO UN VERDE NUEVO. Es lo que ya hacia el
   sello al confirmar, y meter un verde aqui seria un color mas con un
   significado mas en la unica pantalla que comparten las seis apps. */
.daia-id-codigo[data-estado="entro"] .daia-id-codigo__carta {
  border-color: var(--daia-id-acento);
  box-shadow: 0 0 0 1.5px var(--daia-id-acento);
  transition: border-color var(--mov-normal) var(--curva-asiento),
              box-shadow var(--mov-normal) var(--curva-asiento);
  transition-delay: calc((var(--c) + 2.5) * 50ms);
}

/* El fallo tiembla y se vacia. El rojo lo pone el mensaje de debajo, que es
   donde se puede leer; tenir las seis cartas de rojo grita mas de lo que
   informa.

   PERO EL BORDE SI SE ENCIENDE UN MOMENTO (22 de septiembre de 2026). Con el
   temblor solo, quien miraba las cajas y no el texto no se enteraba de nada:
   al terminar la sacudida las seis quedaban igual que antes de escribir. Ahora
   el borde nace en coral y se apaga al gris de siempre en `--mov-lento` x 2 —
   dura lo que dura el gesto, no se queda. Sigue sin haber seis cajas rojas
   fijas, que era lo que la regla de arriba queria evitar. */
.daia-id-codigo[data-estado="fallo"] .daia-id-codigo__mano {
  animation: daia-id-tiembla var(--mov-lento) var(--curva-salida);
}
.daia-id-codigo[data-estado="fallo"] .daia-id-codigo__carta {
  animation: daia-id-carta-fallo calc(var(--mov-lento) * 2) var(--curva-asiento);
}
@keyframes daia-id-carta-fallo {
  0%, 35% { border-color: #F06A7B; }
  100%    { border-color: #343845; }
}
/* Y LA MANO SE ABRE UN POCO (8 de septiembre de 2026): un multiplicador
   literal sobre el `translateX`/`rotate` de siempre, no una reescritura de
   `--carta-aparte` en el propio `.daia-id-codigo` — esa variable la lee ESTE
   selector (`__carta`, un descendiente), asi que no hay ciclo que resolver.
   Con la `transition` que ya tiene `.daia-id-codigo__carta` de fondo, el
   abanico se abre y se vuelve a cerrar solo, sin animacion aparte. */
.daia-id-codigo[data-estado="fallo"] .daia-id-codigo__carta {
  transform: translateX(calc(var(--c) * var(--carta-aparte) * 1.18))
             translateY(var(--carta-elevacion))
             rotate(calc(var(--c) * var(--carta-paso) * 1.3));
}
@keyframes daia-id-tiembla {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  35% { transform: translateX(6px); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(2px); }
}

/* =====================================================================
   EL BASURERO DE «BORRAR MI CUENTA» (19 de septiembre de 2026)

   Portada de rareui.com/components/deletebutton (MIT), con los mismos numeros
   que `daia/recursos/identidad/piezas.css` — pero COPIADA aqui, como todo lo
   demas de esta hoja: el kit y la pagina de la cuenta no cargan el CSS de
   ninguna app de Daia, asi que lo que esta hoja necesita lo trae consigo.

   QUE SUSTITUYE Y POR QUE
   Era una franja roja de ancho completo con «Sí, borrar todo» dentro. Un
   bloque de rojo pleno del ancho de la pantalla no avisa mas que un gesto
   pequeño: grita. Es la misma leccion que ya esta escrita para Eaveworks
   Register —veinticuatro botones rojos son veinticuatro alarmas y entonces el
   rojo deja de avisar de nada— y para las filas de «Revertir».

   EL AVISO DE TEXTO NO SE TOCA, Y ESO IMPORTA
   La pieza original es una confirmacion EN EL SITIO que sustituye al dialogo.
   Aqui no sustituye a nada: el titulo «¿Borrar tu Daia ID?» y el parrafo que
   dice que se borra todo en las veinte herramientas y que no hay vuelta atras
   siguen enteros encima. Esto borra una cuenta entera y es irreversible — el
   aviso largo no se cambia por dos iconos. Lo unico que cambia es el mando:
   de una franja roja a un basurero que se abre y enseña sus dos salidas.

   EL «NO» ENTRA PRIMERO (0ms) y el «si» 70ms despues, nunca al reves: es el
   `staggerChildren: 0.07` del original, y el orden es la parte que importa.
   ===================================================================== */
.daia-id-borrar {
  position: relative;
  /* `flex` y no `inline-flex`: con `inline-flex` el elemento es de linea y
     `margin: auto` no lo centra — quedaba pegado a la izquierda de la hoja,
     como si se hubiera caido. Con `flex` + `width: max-content` ocupa solo lo
     suyo Y los margenes automaticos lo centran. */
  display: flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  border-radius: 999px;
  /*
    LOS DOS ANCHOS SALEN DEL TAMANO DEL BOTON, no son numeros sueltos.
    Cerrado se ve un boton: 44. Abierto se ven tres con dos huecos de 4:
    44*3 + 4*2 = 140, y 146 deja la misma holgura de 6 px que tenia el par
    34/116 de antes. Si se vuelve a cambiar el tamano del boton, estos dos
    numeros cambian con el o el tercer boton se queda cortado por el
    `overflow: hidden`.
  */
  max-width: 44px;
  /* Es el unico mando de la vista y va donde estaba la franja roja. */
  margin: 8px auto 10px;
  transition: max-width var(--mov-lento) var(--curva-asiento);
}
.daia-id-borrar[data-abierto='true'] { max-width: 146px; }

/*
  44 y no 34. El 34 venia del original de `deletebutton` y sobrevivio al porte,
  pero esta hoja usa 44x44 para sus controles —el propio boton de cerrar mide
  44— y este es el que confirma BORRAR LA CUENTA en las veinte herramientas,
  sin vuelta atras. Un blanco de 34 px queda por debajo del minimo de 44 y por
  debajo del estandar de la hoja donde vive.

  Que sea pequeno no protege de nada: lo que protege es el paso de confirmacion,
  que ya existe. Lo unico que consigue es castigar a quien tenga poco pulso.
*/
.daia-id-borrar__gatillo,
.daia-id-borrar__si,
.daia-id-borrar__no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  color: #A3A9B8;
  transition: background-color var(--mov-rapido) var(--curva-asiento),
              color var(--mov-rapido) var(--curva-asiento),
              transform var(--mov-rapido) var(--curva-asiento);
}
.daia-id-borrar__gatillo:active,
.daia-id-borrar__si:active,
.daia-id-borrar__no:active { transform: scale(0.88); }
/* En reposo el basurero es gris; el rojo aparece al apuntarlo y al confirmar,
   que es cuando el aviso sirve de algo. */
.daia-id-borrar__gatillo:hover { color: #D93B53; }

.daia-id-borrar__icono { width: 18px; height: 18px; overflow: visible; }
.daia-id-borrar__tapa {
  transform-origin: 4px 7px;
  transition: transform var(--mov-normal) var(--curva-asiento);
}
.daia-id-borrar__cuerpo {
  transform-origin: center bottom;
  transition: transform var(--mov-normal) var(--curva-asiento);
}
.daia-id-borrar[data-abierto='true'] .daia-id-borrar__tapa { transform: rotate(-35deg); }
.daia-id-borrar[data-abierto='true'] .daia-id-borrar__cuerpo { transform: scaleY(1.06); }

.daia-id-borrar__si,
.daia-id-borrar__no { animation: daia-id-borrar-entra var(--mov-normal) var(--curva-asiento) both; }
.daia-id-borrar__no { animation-delay: 0ms; }
.daia-id-borrar__si { animation-delay: 70ms; }

.daia-id-borrar__si { color: #D93B53; }
.daia-id-borrar__si:hover { background: rgba(217, 59, 83, 0.16); }
.daia-id-borrar__no:hover { background: rgba(127, 127, 127, 0.16); }

@keyframes daia-id-borrar-entra {
  from { opacity: 0; transform: translateX(10px) scale(0.7); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* El rotulo de debajo dice en palabras lo que hace cada circulo: dos iconos
   solos, en la pantalla de borrar una cuenta, no bastan. */
.daia-id-borrar-pie {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  color: #8A90A0;
}

@media (prefers-reduced-motion: reduce) {
  .daia-id-borrar { transition: none; }
  .daia-id-borrar__tapa,
  .daia-id-borrar__cuerpo { transition: none; }
  .daia-id-borrar__si,
  .daia-id-borrar__no { animation: none; }
}

/* --- Modo INCRUSTADA: la hoja como contenido de una pagina, no como sheet ---
   `daia/landing/cuenta/` la monta con `incrustada: true`: sin overlay que
   cerrar, sin `position: fixed`, sin sombra que la despegue del papel — ya
   esta sobre la pagina, no flotando encima de ella. Mismas clases y mismo
   `render()` que la hoja modal; esto es lo unico que cambia. */
.daia-id-hoja[data-incrustada="true"] {
  width: 100%;
  max-width: 420px;
  max-height: none;
  margin: 0 auto;
  border-radius: var(--daia-id-radio-incrustada, 28px);
  box-shadow: none;
  transform: none;
  padding: 32px 26px;
}
.daia-id-hoja[data-incrustada="true"] .daia-id-asa,
.daia-id-hoja[data-incrustada="true"] .daia-id-cerrar { display: none; }

/* --- Sin movimiento: seis cajas en fila y ya ---
   Desde el 19 de septiembre de 2026 esto ya NO tiene que deshacer el abanico:
   la fila recta es el estado normal, asi que aqui no hay que redefinir ni
   `--carta-paso` ni `--carta-aparte`. Lo que queda por apagar es el viaje: el
   numero que rueda al entrar. El reparto y la chispa los apaga el JSX, que mira
   el mismo ajuste antes de llamar a `animate()` — una animacion de la API de
   Web Animations no la para una regla de CSS. */
@media (prefers-reduced-motion: reduce) {
  .daia-id-codigo__carta { transition: border-color 120ms ease; }
  .daia-id-codigo__carta[data-llena="true"] .daia-id-codigo__numero { animation: none; }
  .daia-id-codigo__cursor { animation: none !important; opacity: 1; }
  /* La luz que recorre mientras se comprueba NO corre: el apagado de las cajas
     ya dice que algo esta pasando, y una luz en bucle es justo el tipo de
     movimiento repetido que este ajuste existe para quitar. */
  .daia-id-codigo[data-estado="esperando"] .daia-id-codigo__mano::after { animation: none; display: none; }
  .daia-id-codigo[data-estado="fallo"] .daia-id-codigo__mano { animation: none; }
  /* El acierto SI se pinta —es informacion, no adorno— pero de golpe y las seis
     a la vez, sin la cadena escalonada de izquierda a derecha. */
  .daia-id-codigo[data-estado="entro"] .daia-id-codigo__carta {
    transition: none;
    transition-delay: 0ms;
  }

  /* Los tres "aparece" de montar (monito, tarjeta, disco de la tarjeta) y el
     deslizamiento entre vistas (disparado por JS, ver `sinMovimiento()` en
     HojaDaiaID.jsx) se apagan igual: el contenido esta ahi de una, sin viaje. */
  .daia-id-monito-disco,
  .daia-id-tarjeta,
  .daia-id-tarjeta .daia-id-disco-inicial {
    animation: none;
  }
  .daia-id-cuerpo { transition: none !important; }
}

/* Aqui el `outline: none` SI vale, y es el unico sitio del archivo donde vale:
   no quita la senal de foco, la cambia por una mejor — el borde entero del campo
   se pone del color del acento y el fondo se aclara. Eso se ve mas que un anillo
   de 2px alrededor de una caja que ya tiene borde. En los botones no hay borde
   que tenir, y por eso alli va el anillo de `:focus-visible`. */
.daia-id-campo:focus { outline: none; border-color: var(--daia-id-acento); background: #16181D; }

.daia-id-boton {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--mov-rapido) var(--curva-asiento), opacity var(--mov-rapido);
}
/* APAGADO DE VERDAD, NO A MEDIAS (19 de septiembre de 2026)

   Era `opacity: .55` sobre el boton entero. Suena razonable y en pantalla no lo
   es: sobre la hoja casi negra, un morado lleno al 55% SIGUE viendose morado
   encendido, mientras que el texto blanco al 55% se vuelve gris. El resultado
   —mirese `.capturas/telefono-claro/2-codigo.png`— era un boton vivo con la
   palabra muerta dentro, que no se lee como «todavia no» sino como un fallo de
   pintado.

   La opacidad sobre un relleno saturado no apaga: desatura el texto y deja el
   fondo. Asi que se apagan los DOS a mano, con el gris de la propia hoja. */
/* EL GRIS SE TIÑE DEL ACENTO (22 de septiembre de 2026). Lo de arriba sigue en
   pie —ni opacidad ni morado encendido con la palabra muerta dentro— pero el
   gris pelado `#24262E` hacia que «Entrar» pareciera un boton roto, y encima
   la fila de «Cambiar el correo», con texto blanco, se leia como la accion
   principal. Ahora el fondo es el gris de siempre con un 22% del acento
   mezclado (`color-mix`, no opacidad: el resultado es un color opaco y
   oscuro) y el texto va en blanco al 45%. Se lee «todavia no», en el color
   de la app, y no «roto». */
.daia-id-boton:disabled { cursor: default; color: #6B7280; }
.daia-id-boton--principal:disabled {
  background: color-mix(in srgb, var(--daia-id-acento) 22%, #24262E);
  color: rgba(255, 255, 255, .45);
}
.daia-id-boton:active:not(:disabled) { transform: translateY(1px) scale(.99); }

.daia-id-boton--principal {
  background: var(--daia-id-acento);
  color: #FFFFFF;
  margin-bottom: 10px;
}

.daia-id-boton--fantasma {
  background: transparent;
  border: none;
  color: #A3A9B8;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  cursor: pointer;
}
.daia-id-boton--fantasma:disabled { opacity: .5; cursor: default; text-decoration: none; }

.daia-id-boton--fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1F2129;
  color: #F2F3F6;
  margin-bottom: 8px;
  font-weight: 600;
}

/* --- Las dos etiquetas de grupo de la vista "dentro" (8 de septiembre de
   2026) --- Separan "Tu cuenta" de "Tus datos": antes las seis filas iban
   seguidas con el mismo peso, y "Borrar mi cuenta" quedaba pegada a "Ponle tu
   nombre" como si fueran del mismo orden de cosas. */
.daia-id-grupo-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6C7385;
  margin: 18px 2px 6px;
}
.daia-id-grupo-etiqueta:first-of-type { margin-top: 4px; }

/* El rojo es de "borrar". En una pantalla con veinticuatro filas, un rojo
   permanente es una alarma — esa regla sigue valiendo para las listas.

   AQUI ES UNA SOLA FILA, Y EN GRIS SE LEIA APAGADA (22 de septiembre de 2026).
   `#A3A9B8` al lado de filas con texto blanco no decia «cuidado»: decia «este
   boton no funciona». Ahora el texto va en el coral claro (5,39:1 sobre la
   fila), con un basurero de linea, y la fila se separa del resto con aire. El
   fondo sigue siendo el gris de todas: no es un bloque rojo, es un rotulo. */
.daia-id-boton--peligro { color: #F06A7B; margin-top: 14px; }
.daia-id-boton--peligro:hover { background: rgba(240, 106, 123, .12); color: #F06A7B; }

/* EL CORAL CLARO, NO EL DE LA LAMINA (22 de septiembre de 2026). `#D93B53`
   sobre la hoja `#16181D` da 3,98:1, por debajo del 4,5 que pide un texto de
   13px — y este texto es justo el que explica que algo salio mal. `#F06A7B` es
   el mismo coral subido para fondo oscuro, igual que la tercera columna de la
   tabla de colores del taller: 5,96:1 sobre la hoja y 5,39:1 sobre una fila. */
.daia-id-error {
  font-size: 13px;
  line-height: 18px;
  color: #F06A7B;
  text-align: center;
  margin: -4px 0 12px;
}

/* EL HUECO DEL ERROR, RESERVADO SIEMPRE EN LA VISTA DEL CODIGO (22 de
   septiembre de 2026). El mensaje «Ese codigo no sirve» empujaba el boton y
   las filas hacia abajo y la hoja entera pegaba un brinco de ~20px — justo en
   el segundo en que la persona esta mirando que paso. Sin tocar el marcado (se
   copia a ocho sitios): la mano de cartas deja 34px debajo SIEMPRE, y el error,
   cuando sale, se mete en ese hueco con un margen negativo. Los margenes
   verticales de dos hermanos se juntan: 34 + (-30) = 4px entre las cartas y el
   texto, 18 de la linea y 12 debajo, que vuelven a sumar 34. Un mensaje de dos
   lineas si empuja 18px; con los que hay hoy no pasa. */
.daia-id-codigo { margin-bottom: 34px; }
.daia-id-codigo + .daia-id-error { margin: -30px 0 12px; }

.daia-id-pie {
  text-align: center;
  margin-top: 4px;
}

.daia-id-disco-inicial {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--daia-id-acento);
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- La tarjeta de la cuenta (vista «dentro») ---
   Antes esto eran un disco, un correo y una frase sueltos encima de tres filas
   grises. Juntarlos en una sola pieza es lo que hace que la pantalla se lea
   como «esta es tu cuenta» y no como «estos son tus ajustes». */
.daia-id-tarjeta {
  background: #1F2129;
  border-radius: 22px;
  padding: 22px 18px 18px;
  text-align: center;
  margin-bottom: 14px;
  /* Se asienta al entrar a "dentro" (8 de septiembre de 2026): la tarjeta es
     lo primero que se lee de la cuenta, y hoy el unico movimiento que tenia
     era el deslizamiento generico de `.daia-id-vista`. Esto se suma a ese,
     no lo reemplaza. */
  animation: daia-id-tarjeta-asienta var(--mov-normal) var(--curva-asiento) both;
}
@keyframes daia-id-tarjeta-asienta {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}
/* --- El color personal de la cuenta ---

   LOS SIETE TONOS VIVEN AQUI Y NO EN EL JAVASCRIPT, Y ES A PROPOSITO
   Este archivo se copia byte a byte en seis sitios; el JavaScript de la hoja, en
   dos moldes distintos (React y DOM puro). Poniendo la lista en el CSS hay UNA,
   no seis ni dos. `daia.perfil.color` guarda la CLAVE ("morado"), nunca el hex:
   afinar un tono es tocar esta lista y ya, sin migrar ningun perfil.

   Y NO SON SIETE COLORES ELEGIDOS A OJO: son los tonos `tinta` de las seis
   familias (daia/recursos/identidad/categorias.json) mas un neutro. Los siete
   dan 4,5:1 o mas con texto blanco encima, que es como se usan aqui. Con un
   selector de color libre la mitad de las tarjetas nacerian ilegibles — el
   naranja de la lamina se queda en 2,41:1. */
.daia-id-tarjeta[data-color="tinta"]     { --tarjeta-fondo: #2E3140; }
.daia-id-tarjeta[data-color="morado"]    { --tarjeta-fondo: #6C5CE7; }
.daia-id-tarjeta[data-color="rojo"]      { --tarjeta-fondo: #E1292F; }
.daia-id-tarjeta[data-color="verde"]     { --tarjeta-fondo: #298252; }
.daia-id-tarjeta[data-color="azul"]      { --tarjeta-fondo: #4272CF; }
.daia-id-tarjeta[data-color="naranja"]   { --tarjeta-fondo: #A96313; }
.daia-id-tarjeta[data-color="turquesa"]  { --tarjeta-fondo: #298080; }

/* Sin color elegido, el atributo NO se pone: asi `[data-color]` sirve de «tiene
   color» sin necesitar un segundo atributo que decir lo mismo. */
.daia-id-tarjeta[data-color] {
  background: var(--tarjeta-fondo, #2E3140);
  color: #FFFFFF;
}
.daia-id-tarjeta[data-color] .daia-id-correo,
.daia-id-tarjeta[data-color] .daia-id-tarjeta__desde { color: rgba(255, 255, 255, .74); }
.daia-id-tarjeta[data-color] .daia-id-tarjeta__nombre[data-vacio="true"] { color: rgba(255, 255, 255, .66); }
/* El disco del avatar usa el acento de la app, que sobre la tarjeta de color
   serian dos colores peleandose. Dentro, es un hueco claro. */
.daia-id-tarjeta[data-color] .daia-id-disco-inicial { background: rgba(255, 255, 255, .2); }

.daia-id-tarjeta .daia-id-disco-inicial {
  width: 72px;
  height: 72px;
  font-size: 28px;
  margin: 0 auto 10px;
  /* Aparece un poco DESPUES que la tarjeta (el `120ms` de retraso), no a la
     vez: es lo que separa "la tarjeta llega" de "y aqui esta tu avatar",
     en vez de que se sientan una sola cosa moviendose. */
  animation: daia-id-disco-aparece var(--mov-normal) var(--mov-rapido) var(--curva-asiento) both;
}
@keyframes daia-id-disco-aparece {
  0%   { opacity: 0; transform: scale(.72); }
  100% { opacity: 1; transform: scale(1); }
}
.daia-id-tarjeta__nombre {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
/* Sin nombre puesto, el texto es un hueco por llenar y no un nombre: si fuera
   igual de negro que uno de verdad, parecería que alguien se llama así. */
.daia-id-tarjeta__nombre[data-vacio="true"] { color: #8A90A0; font-weight: 600; }
/* Que estudia (8 de septiembre de 2026). Mismo tono que el correo, un pelin
   mas oscuro: es informacion de la cuenta, no el dato principal de la fila. */
.daia-id-tarjeta__estudia {
  font-size: 12.5px;
  font-weight: 600;
  color: #A3A9B8;
  margin: 0 0 4px;
}
.daia-id-tarjeta .daia-id-correo { margin: 0 0 6px; }
.daia-id-tarjeta__desde {
  font-size: 12px;
  color: #8A90A0;
  margin: 0;
}
/* Sobre la tarjeta de color, mismo criterio que el correo y el "Con Daia
   desde": texto blanco semitransparente en vez del gris de siempre. */
.daia-id-tarjeta[data-color] .daia-id-tarjeta__estudia { color: rgba(255, 255, 255, .74); }

/* Un enlace vestido de fila. Es `<a>` y no `<button>` a proposito: lleva a otro
   sitio, asi que se tiene que poder abrir en otra pestana y copiar la direccion,
   y el lector de pantalla lo anuncia como enlace, que es lo que es. */
.daia-id-boton--enlace {
  text-decoration: none;
  box-sizing: border-box;
}

.daia-id-correo {
  text-align: center;
  font-size: 13px;
  color: #8A90A0;
  margin: -8px 0 20px;
  word-break: break-all;
}

.daia-id-resumen {
  background: #1F2129;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #F2F3F6;
  margin-bottom: 20px;
}

/* --- La señal de estado, para la cabecera de cada app --- */
.daia-id-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8A90A0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.daia-id-estado__punto {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #35A96B;
  flex-shrink: 0;
}
.daia-id-estado[data-estado="guardando"] .daia-id-estado__punto {
  background: #E89435;
  animation: daia-id-pulso 1.1s ease-in-out infinite;
}
.daia-id-estado[data-estado="sin-internet"] .daia-id-estado__punto { background: #8A90A0; }

@keyframes daia-id-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* --- El avatar de la cuenta: la imagen dentro del disco, y su selector --- */

/* El disco ya existia para las iniciales (`.daia-id-disco-inicial`); esto
   solo hace que una imagen adentro llene el circulo en vez de desbordarlo. */
.daia-id-disco-inicial img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

/* LA INSIGNIA DE CAMARA, SOBRE EL AVATAR (22 de septiembre de 2026)

   Era «Cambiar avatar» en texto de 12px del color del acento, debajo de la
   tarjeta: morado sobre la hoja oscura (por debajo de 4,5:1 con el morado de
   Educacion) y con una sola linea de texto como blanco para el dedo. Ahora es
   lo mismo que ya hace la pagina de la cuenta: un disco claro con una camara,
   montado en la esquina del avatar, que es donde se busca.

   LAS CUENTAS DE LA POSICION: el avatar mide 72 y empieza a 46px del borde de
   arriba (el `padding-top` de la tarjeta). Su esquina de abajo a la derecha, a
   45 grados, esta a 25px del centro en cada eje — 36 x 0,707. La insignia de
   30 se centra ahi: arriba 46 + 36 + 25 - 15 = 92, izquierda 50% + 25 - 15.
   El `::before` agranda el blanco hasta 44x44 sin agrandar el dibujo. */
.daia-id-cambiar-avatar {
  position: absolute;
  z-index: 2;
  top: 92px;
  left: calc(50% + 10px);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #F2F3F6;
  color: #16181D;
  box-shadow: 0 0 0 3px #1F2129;
  cursor: pointer;
  animation: daia-id-disco-aparece var(--mov-normal) var(--mov-normal) var(--curva-asiento) both;
  transition: transform var(--mov-rapido) var(--curva-asiento);
}
.daia-id-cambiar-avatar::before { content: ''; position: absolute; inset: -7px; }
.daia-id-cambiar-avatar svg { width: 15px; height: 15px; display: block; }
.daia-id-cambiar-avatar:hover { transform: scale(1.08); }
.daia-id-cambiar-avatar:active { transform: scale(.92); }
.daia-id-cambiar-avatar:focus-visible { outline: 2px solid #F2F3F6; outline-offset: 3px; }
.daia-id-tarjeta[data-color] .daia-id-cambiar-avatar { box-shadow: 0 0 0 3px var(--tarjeta-fondo); }
@media (prefers-reduced-motion: reduce) {
  .daia-id-cambiar-avatar { animation: none; }
}

/* La rejilla del selector: 6 columnas, botones cuadrados. Con 32 avatares
   de ~4 KB cada uno (WebP, recortados de una hoja de referencia — ver
   avatares/lista.js) el peso total es el de una sola foto de perfil normal. */
/* FLEX CON LA ULTIMA FILA CENTRADA, NO REJILLA (22 de septiembre de 2026). 32
   entre 6 son cinco filas llenas y una de dos, y en una rejilla esas dos se
   quedaban pegadas a la izquierda con un hueco de cuatro al lado, como si
   faltaran avatares. Con `flex-wrap` y `justify-content: center` la fila corta
   se centra sola; el ancho de cada boton es el mismo sexto de antes. */
.daia-id-avatares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  /* 4px por dentro: el anillo y la marca del elegido se salen del boton, y
     `.daia-id-cuerpo` corta con `overflow: hidden` lo que pase de su borde. */
  padding: 4px;
  margin: 0 0 14px;
}

.daia-id-avatar-boton {
  flex: 0 0 calc((100% - 5 * 8px) / 6);
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 14px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: #1F2129;
  transition: transform 120ms ease, border-color 120ms ease;
}
.daia-id-avatar-boton:active { transform: scale(.92); }
/* `aria-checked` y no `aria-pressed`: la rejilla es un `radiogroup` (se elige
   UNO), no 32 interruptores independientes. Si vuelve a `aria-pressed`, el
   avatar elegido deja de tener borde de color. */
.daia-id-avatar-boton[aria-checked="true"] { border-color: var(--daia-id-acento); }
.daia-id-avatar-boton img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* EL ELEGIDO SE NOTA DE LEJOS (22 de septiembre de 2026). Un borde de 2px entre
   32 fondos de colores saturados no se encontraba: habia que buscarlo. Ahora
   lleva un anillo claro por fuera del borde del acento y una marca de visto en
   la esquina — la marca va dibujada en el propio CSS (un SVG en `data:`), asi
   que no hace falta tocar el marcado de las dos versiones de la hoja. El boton
   pierde el `overflow: hidden` para que el anillo no se recorte; la imagen
   hereda el redondeo para no salirse de la esquina. */
.daia-id-avatar-boton { overflow: visible; }
.daia-id-avatar-boton img { border-radius: 12px; }
.daia-id-avatar-boton[aria-checked="true"] {
  box-shadow: 0 0 0 2px #F2F3F6;
}
.daia-id-avatar-boton[aria-checked="true"]::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--daia-id-acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 0 0 2px #16181D;
}

/* =====================================================================
   EL CORREO Y EL BOTON, EN UNA SOLA PIEZA (18 de septiembre de 2026)

   Antes eran un campo de ancho completo y, debajo, un boton de ancho
   completo. Dos bloques iguales, uno encima del otro, hacian que la primera
   pantalla de la cuenta pareciera un formulario largo cuando lo unico que
   pide es un correo. Ahora son una pastilla sola: el sobre dice de que va,
   el campo se estira y el boton se queda del ancho de su texto.

   LA FLECHA SALE AL PASAR POR ENCIMA Y NO ESTA SIEMPRE
   Es la unica pieza de toda la hoja que usa la curva de rebote, y por eso
   se nota. Si la flecha estuviera siempre, seria un adorno mas; saliendo al
   apuntar, es el acuse de recibo de que ese boton hace algo.

   EN EL TELEFONO NO HAY «PASAR POR ENCIMA», y esta bien: la flecha es
   decoracion, quien manda el significado es el rotulo. Nadie se queda sin
   entender el boton por no tener raton.
   ===================================================================== */
.daia-id-grupo-correo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 18px;
  border: 1.5px solid #24262E;
  background: #1F2129;
  margin-bottom: 14px;
  transition: border-color var(--mov-rapido) var(--curva-asiento);
}
.daia-id-grupo-correo:focus-within { border-color: var(--daia-id-acento); }

.daia-id-grupo-correo__sobre {
  display: flex;
  flex: 0 0 auto;
  color: #8A90A0;
  transition: color var(--mov-rapido) var(--curva-asiento);
}
.daia-id-grupo-correo__sobre svg { width: 19px; height: 19px; display: block; }
.daia-id-grupo-correo:focus-within .daia-id-grupo-correo__sobre { color: var(--daia-id-acento); }

/* Apaga lo que hereda de `.daia-id-campo`: dentro de la pastilla no lleva ni
   borde, ni fondo, ni margen propios — los pone la pastilla. */
/* Y TAMPOCO AL ENFOCARLO (23 de septiembre de 2026): `.daia-id-campo:focus`
   oscurece el fondo del campo, que fuera de la pastilla es la senal de foco,
   pero aqui dentro dibujaba un recuadro negro dentro de la pastilla. La senal
   la da el borde de la pastilla (`:focus-within`, mas abajo). */
.daia-id-grupo-correo .daia-id-grupo-correo__campo:focus { background: none; }

.daia-id-grupo-correo__campo {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 8px 0;
  border: none;
  background: none;
  border-radius: 0;
  margin-bottom: 0;
}

.daia-id-grupo-correo__enviar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 11px 16px;
  border: none;
  border-radius: 13px;
  background: var(--daia-id-acento);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--mov-rapido) var(--curva-asiento), opacity var(--mov-rapido) var(--curva-asiento);
}
/* Deshabilitado mientras no se acepte la politica: se ve apagado y no miente
   diciendo que se puede pulsar.

   Y SE APAGA EL FONDO, NO SOLO LA OPACIDAD (19 de septiembre de 2026). Era
   `opacity: .4` sobre el boton entero, el mismo fallo que tenia `.daia-id-boton`
   y que se arreglo mas arriba: sobre la hoja casi negra, el morado al 40% sigue
   leyendose morado, mientras que el texto blanco al 40% se vuelve gris. Salia un
   boton encendido con la palabra apagada dentro — se ve en la captura
   `1-invitacion.png` de antes de hoy. Se apagan los dos a mano, con los mismos
   valores que el boton principal, que es el gesto que ya tiene aprendido quien
   usa la hoja. */
.daia-id-grupo-correo__enviar:disabled,
.daia-id-grupo-correo__enviar[aria-disabled="true"] {
  background: color-mix(in srgb, var(--daia-id-acento) 22%, #24262E);
  color: rgba(255, 255, 255, .45);
  cursor: not-allowed;
}
/* `aria-disabled` Y NO `disabled` CUANDO LO QUE FALTA ES LA CASILLA (22 de
   septiembre de 2026). Un boton `disabled` no recibe el toque, asi que no
   habia forma de decirle a quien lo pulsa QUE le falta: tocaba y no pasaba
   nada. Con `aria-disabled` se ve igual de apagado, el lector de pantalla lo
   anuncia igual de no disponible, pero el toque llega — y la hoja responde
   sacudiendo la casilla y llevando el foco a ella (el JS de la vista
   `invitacion`). `disabled` de verdad se queda solo para «Enviando…». */
.daia-id-grupo-correo__enviar[aria-disabled="true"]:active { transform: none; }
.daia-id-grupo-correo__enviar[aria-disabled="true"] .daia-id-grupo-correo__flecha { display: none; }
.daia-id-grupo-correo__enviar:not(:disabled):active { transform: scale(.94); }

.daia-id-grupo-correo__flecha {
  width: 0;
  height: 15px;
  opacity: 0;
  overflow: visible;
  transition: width var(--mov-normal) var(--curva-asiento), opacity var(--mov-normal) var(--curva-asiento);
}
/* La entrada (deslizarse a su sitio) Y el jello del original, uno detras del
   otro: la entrada dura --mov-normal, y el jello (900ms en el original,
   `plastic-parrot-51`) arranca justo cuando la entrada termina — es un
   remate, no una llegada. Sin el retraso las dos compitirian por el mismo
   tramo de tiempo y el jello se veria pisado. */
.daia-id-grupo-correo__enviar:not(:disabled):hover .daia-id-grupo-correo__flecha,
.daia-id-grupo-correo__enviar:not(:disabled):focus-visible .daia-id-grupo-correo__flecha {
  width: 15px;
  opacity: 1;
  animation:
    daia-id-flecha-entra var(--mov-normal) var(--curva-rebote),
    daia-id-flecha-jello var(--mov-lento) var(--curva-asiento) var(--mov-normal);
}
@keyframes daia-id-flecha-entra {
  from { transform: translateX(-7px) scale(.55); }
  to { transform: translateX(0) scale(1); }
}
/* Los siete pasos del original, literales (`jello-vertical`, MIT). Es un
   bamboleo de goma, no un rebote: se aplasta y se estira en el eje vertical
   mientras se asienta. */
@keyframes daia-id-flecha-jello {
  0%   { transform: scale3d(1, 1, 1); }
  30%  { transform: scale3d(.75, 1.25, 1); }
  40%  { transform: scale3d(1.25, .75, 1); }
  50%  { transform: scale3d(.85, 1.15, 1); }
  65%  { transform: scale3d(1.05, .95, 1); }
  75%  { transform: scale3d(.95, 1.05, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

/* El sobre se aprieta al pulsar la pastilla entera (`scale(1.3)` del
   original): confirma el toque en el icono, no solo en el borde de la
   pastilla. */
.daia-id-grupo-correo:active .daia-id-grupo-correo__sobre svg {
  transform: scale(1.3);
  transition: transform var(--mov-rapido) var(--curva-asiento);
}

/* =====================================================================
   LA CASILLA DE LA POLITICA (18 de septiembre de 2026)

   VA ANTES DE MANDAR EL CORREO, NO DESPUES
   El boton no se habilita hasta marcarla. Avisar de que se acepto algo
   cuando el dato ya viajo es pedir permiso con el dato en la mano.

   EL DIBUJO: LA CAJA SE BORRA MIENTRAS EL VISTO SE ESCRIBE
   Los dos trazos son un solo `path` con `stroke-dasharray`, asi que
   moviendo el `stroke-dashoffset` la linea se dibuja o se despinta sola.
   La caja se despinta y, `--mov-rapido` despues, entra el visto: el retraso
   es lo que hace que se lea como un gesto y no como dos cosas a la vez.

   EL `id` NO SE USA DESDE EL CSS, Y ESO IMPORTA
   El dibujo original colgaba sus reglas de un `id` escrito a mano, asi que
   con dos casillas en la misma pagina la segunda se quedaba muerta. Aqui
   todo cuelga de `:checked + .daia-id-acepto__marca`, que funciona tantas
   veces como haga falta.
   ===================================================================== */
.daia-id-acepto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 14px;
  cursor: pointer;
  user-select: none;
}

/* Se esconde sin `display: none` para que siga recibiendo el teclado: con
   `display: none` la casilla deja de existir para quien navega con Tab. */
.daia-id-acepto__casilla {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.daia-id-acepto__marca {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}
.daia-id-acepto__marca svg { position: relative; width: 18px; height: 18px; display: block; overflow: visible; }
/* El halo al apuntar (`green-donkey-82`, MIT): un circulo de 48px centrado
   sobre la caja de 18px — por eso el `-15px`, la mitad de la diferencia
   (48-18)/2. El original lo pinta de un azul casi invisible pensado para
   fondo claro; esta hoja es oscura siempre, asi que aqui es blanco al 6%. */
.daia-id-acepto__marca::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity var(--mov-normal) ease;
}
.daia-id-acepto:hover .daia-id-acepto__marca::before { opacity: 1; }

.daia-id-acepto__caja {
  fill: none;
  /* Sube de `#5A6070` a `#8A92A6` (19 de septiembre de 2026). El dibujo y su
     animacion estaban bien —es `green-donkey-82` entero, con su halo y su
     trazo—, pero sin marcar, un cuadro de 18px con 1.6px de gris oscuro sobre
     una hoja `#16181D` se lee como un hueco, no como algo que se puede pulsar.
     En la captura parecia una casilla sin terminar al lado de un boton grande.
     Y esta casilla es la que bloquea el unico boton de la pantalla: si no se ve
     que hay que marcarla, la pantalla parece rota. */
  stroke: #8A92A6;
  stroke-width: 1.6;
  /* 60 Y NO 57 (23 de septiembre de 2026). El trazo de la caja mide 58,84
     —medido con `getTotalLength()` en Chrome—, y con 57 el patron de guion y
     hueco volvia a empezar antes del final: al marcar quedaba un pedazo de la
     caja pintado cuando la animacion ya habia terminado (lo vio el dueño). El
     guion y el hueco tienen que ser MAS LARGOS que el trazo, y el
     desplazamiento de «marcada» igual al guion. */
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
  /* `linear` en el trazo, a proposito — no es un descuido de "olvide poner
     la curva del sistema". El original (`green-donkey-82`) dibuja los dos
     trazos a velocidad constante, y es lo correcto: una curva que arranca o
     frena hace que la linea se vea acelerar o frenar al dibujarse, que es
     el mismo principio que ya esta escrito en `movimiento.css` para las
     caritas y esta casilla. La curva del color si es var(--curva-asiento):
     eso no dibuja nada, solo cambia un tono. */
  transition: stroke-dashoffset var(--mov-normal) linear, stroke var(--mov-rapido) var(--curva-asiento);
}
.daia-id-acepto__visto {
  fill: none;
  stroke: var(--daia-id-acento);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--mov-normal) linear;
}
.daia-id-acepto__casilla:checked + .daia-id-acepto__marca .daia-id-acepto__caja {
  stroke-dashoffset: 60;
}
.daia-id-acepto__casilla:checked + .daia-id-acepto__marca .daia-id-acepto__visto {
  stroke-dashoffset: 0;
  transition-delay: var(--mov-rapido);
}
.daia-id-acepto__casilla:focus-visible + .daia-id-acepto__marca {
  outline: 2px solid var(--daia-id-acento);
  outline-offset: 3px;
  border-radius: 6px;
}

.daia-id-acepto__texto {
  font-size: 13px;
  line-height: 1.4;
  color: #A3A9B8;
}
.daia-id-acepto__texto a {
  color: #F2F3F6;
  text-underline-offset: 2px;
}

/* «TE FALTA ESTO» (22 de septiembre de 2026). Al pulsar «Continuar» sin haber
   marcado la casilla, el JS pone `data-falta` en la etiqueta: la casilla se
   sacude con el mismo temblor del codigo malo y su borde se pinta del acento,
   que es el color de «aqui». Sin rojo: no marcar una casilla no es un error,
   es un paso que falta. El atributo lo quita el propio JS al terminar, para
   poder repetirlo si se vuelve a pulsar. */
.daia-id-acepto[data-falta="true"] .daia-id-acepto__marca {
  animation: daia-id-tiembla var(--mov-lento) var(--curva-salida);
}
.daia-id-acepto[data-falta="true"] .daia-id-acepto__caja { stroke: var(--daia-id-acento); }
@media (prefers-reduced-motion: reduce) {
  .daia-id-acepto[data-falta="true"] .daia-id-acepto__marca { animation: none; }
}

/* =====================================================================
   LA BANDA DE LA TARJETA (18 de septiembre de 2026)

   La tarjeta de la cuenta era una caja gris con un disco centrado. Funcionaba,
   pero no se distinguia de las filas de abajo, que tambien son cajas grises:
   la cuenta se leia como un ajuste mas. La banda de triangulos le da a la
   tarjeta una cabecera propia, y el disco pasa a montarse encima de ella —
   que es lo que hace que se lea como una tarjeta de perfil y no como una fila
   mas alta.

   EL ANILLO DEL DISCO NO ES DECORACION: es lo que recorta la banda alrededor
   del avatar. Sin el, el disco se confunde con el patron de detras y parece
   que flota en un fondo sucio. Por eso su color es el FONDO de la tarjeta, no
   un gris fijo: cuando alguien elige color de perfil, el anillo lo sigue.
   ===================================================================== */
.daia-id-tarjeta {
  position: relative;
  overflow: hidden;
  padding-top: 46px;
}

.daia-id-tarjeta__banda {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 74px;
  color: var(--daia-id-acento);
  opacity: .55;
  pointer-events: none;
  /* SE DESVANECE, NO SE CORTA (22 de septiembre de 2026). Terminaba en seco a
     los 74px y dejaba una raya recta de lado a lado de la tarjeta, que se leia
     como un borde que nadie habia puesto. La mascara la apaga en su ultimo
     tercio. */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
          mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.daia-id-tarjeta__banda svg { display: block; width: 100%; height: 100%; }
/* Con color de perfil elegido, la tarjeta ENTERA es de ese color: los
   triangulos del acento encima de el se ensucian, asi que pasan a blanco. */
.daia-id-tarjeta[data-color] .daia-id-tarjeta__banda { color: #FFFFFF; opacity: .3; }

/* DOS ANILLOS Y NO UNO (22 de septiembre de 2026). El de fuera sigue siendo el
   fondo de la tarjeta, por lo de arriba: recorta la banda. El de dentro es
   claro, y es nuevo: casi todos los avatares traen su propio fondo oscuro, y
   sin el un zorro sobre verde noche dentro de una tarjeta morada se leia como
   un agujero negro en la tarjeta, no como una cara. */
.daia-id-tarjeta .daia-id-disco-inicial {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px #F2F3F6, 0 0 0 6px #1F2129;
}
.daia-id-tarjeta[data-color] .daia-id-disco-inicial {
  box-shadow: 0 0 0 3px #F2F3F6, 0 0 0 6px var(--tarjeta-fondo);
  background: rgba(255, 255, 255, .22);
}

/* =====================================================================
   LAS FILAS SE MUEVEN AL APUNTARLAS (18 de septiembre de 2026)

   Un desplazamiento de un pixel arriba y uno a la derecha, mas el fondo un
   tono mas claro. Es poco a proposito: son cinco o seis filas seguidas, y un
   gesto grande repetido seis veces es un temblor, no una respuesta.

   Y AL PULSAR SE HUNDE, que es la regla de la arcilla del taller: lo que se
   toca baja, no cambia de color.
   ===================================================================== */
.daia-id-boton--fila {
  transition: transform var(--mov-rapido) var(--curva-asiento),
              background-color var(--mov-rapido) var(--curva-asiento),
              color var(--mov-rapido) var(--curva-asiento);
}
.daia-id-boton--fila:hover { background: #262933; transform: translate(1px, -1px); }
.daia-id-boton--fila:active { transform: translate(0, 1px) scale(.99); background: #1B1D25; }
/* La flecha se separa un pelo al apuntar la fila: dice «esto lleva a otro
   sitio» sin escribir nada. */
.daia-id-boton--fila > span[aria-hidden="true"] {
  transition: transform var(--mov-rapido) var(--curva-asiento);
}
.daia-id-boton--fila:hover > span[aria-hidden="true"] { transform: translateX(3px); }

/* =====================================================================
   LA CARPETA DE «TUS DATOS» (18 de septiembre de 2026)

   Portada de rareui.com/components/foldercomponent (MIT), con los mismos
   numeros que `daia/recursos/identidad/piezas.css` — pero COPIADA aqui, como
   todo lo demas de esta hoja: el kit y la pagina de la cuenta no cargan el CSS
   de ninguna app de Daia, asi que lo que esta hoja necesita lo trae consigo.

   LAS TRES TARJETAS LLEVAN ROTULO Y ESO NO ES ADORNO. La pantalla ofrecia
   "Descargar mis datos" y "Borrar mi cuenta" sin enseñar nunca de que datos
   hablaba. Ahora se ven: perfil, avance y ajustes.

   LA ESCALA ES 0.4 Y NO LA DE PIEZAS.CSS. La hoja mide 400px de ancho y ya
   tiene scroll propio; a la escala normal la carpeta pedia unos 340px de alto
   entre la caja y el hueco que necesita al abrirse, y empujaba las filas de
   abajo fuera de la pantalla.
   ===================================================================== */
/* 0.32 Y NO 0.4 (22 de septiembre de 2026). Aun recortada, la carpeta era la
   pieza mas grande de la vista «dentro» —mas alta que cualquier boton— y le
   quitaba el protagonismo a la tarjeta de la cuenta, que es lo primero que hay
   que leer. Todas las medidas de abajo cuelgan de esta variable, asi que el
   hueco reservado y el vuelo de las tarjetas bajan con ella solos. */
.daia-id-carpeta {
  --carpeta-color: var(--daia-id-acento);
  --carpeta-escala: 0.32;

  position: relative;
  display: block;
  width: calc(321px * var(--carpeta-escala));
  height: calc(241px * var(--carpeta-escala));
  /* EL HUECO DE ARRIBA, MEDIDO EN VEZ DE HEREDADO (19 de septiembre de 2026)

     Eran `190px * 0.4` = 76px, y el 190 venia del componente original a escala
     1. No era basura: reserva el sitio por donde salen volando las tres
     tarjetas cuando la carpeta se abre. El problema es el reparto — el hueco se
     ve SIEMPRE y las tarjetas vuelan de vez en cuando. En la captura
     `.capturas/telefono-claro/3-dentro.png` el rotulo «TUS DATOS» quedaba
     huerfano, con una franja vacia debajo y la carpeta flotando lejos.

     Cuanto hace falta de verdad, a escala 0.4: la tarjeta que mas sube llega a
     `--y: -180`, o sea 72px, y su centro esta a 48px del borde de arriba de la
     carpeta; con media tarjeta (21px) asoma unos 45px por encima. Con 48px de
     margen cabe entera y sobran 28px de los de antes. */
  /* 60 y no 120: bajar el margen a 48px no bastaba — en la captura seguian
     quedando unos 128px entre el rotulo «TUS DATOS» y la carpeta. La reserva se
     recorta a la mitad Y se recorta tambien el vuelo de las tarjetas (abajo, en
     `[data-abierta]`), que es lo que obligaba a reservar tanto. Las dos cosas a
     la vez: reservar menos sin que al abrirse las tarjetas se salgan por encima
     del rotulo. */
  margin: calc(60px * var(--carpeta-escala)) auto 0;
  padding: 0;
  border: none;
  background: none;
  perspective: calc(800px * var(--carpeta-escala));
  cursor: pointer;
}

.daia-id-carpeta .daia-carpeta__tarjetas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.daia-id-carpeta .daia-carpeta__tarjeta {
  position: absolute;
  width: calc(150px * var(--carpeta-escala));
  height: calc(105px * var(--carpeta-escala));
  margin: calc(-52px * var(--carpeta-escala)) 0 0 calc(-75px * var(--carpeta-escala));
  border-radius: calc(14px * var(--carpeta-escala));
  /* Papel claro sobre la hoja oscura: dentro de esta hoja el blanco ES el
     contraste. Con el gris de la hoja no se distinguirian del lomo. */
  background: #F2F3F6;
  color: #16181D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
  /* El `* 1px` no sobra: `--x` es un numero pelado para poder escalarlo, y sin
     el `calc()` devuelve un numero sin unidad que `translate()` descarta
     entero — las tres tarjetas se apilan en el centro sin dar ningun error. */
  transform:
    translate(
      calc(var(--x) * 1px * var(--carpeta-escala)),
      calc(var(--y) * 1px * var(--carpeta-escala))
    )
    rotate(var(--giro));
  transition: transform var(--mov-lento) var(--curva-rebote);
  transition-delay: var(--retraso, 0ms);
}

.daia-id-carpeta .daia-carpeta__tarjeta:nth-child(1) { --y: -10; --x:  40; --giro:  10deg; --retraso: 0ms; z-index: 3; }
.daia-id-carpeta .daia-carpeta__tarjeta:nth-child(2) { --y: -20; --x:   3; --giro:   2deg; --retraso: 0ms; z-index: 2; }
.daia-id-carpeta .daia-carpeta__tarjeta:nth-child(3) { --y: -22; --x: -40; --giro:  -5deg; --retraso: 0ms; z-index: 1; }

.daia-id-carpeta:hover .daia-carpeta__tarjeta:nth-child(1) { --y: -30; --giro: 14deg; --retraso: 120ms; }
.daia-id-carpeta:hover .daia-carpeta__tarjeta:nth-child(2) { --y: -35; --giro: -1deg; --retraso:  60ms; }
.daia-id-carpeta:hover .daia-carpeta__tarjeta:nth-child(3) { --y: -44; --giro: -9deg; --retraso:   0ms; }

/* Abierta: la del FONDO arranca primero (0 ms) y la del frente de ultima
   (100 ms). Al reves se lee como tres cartas cayendo, no como algo que abre.

   EL VUELO SE RECORTO UN TERCIO (19 de septiembre de 2026): de -160/-180/-170 a
   -115/-130/-122. A escala 0.4 eso es subir 46-52px en vez de 64-72px. No es
   por gusto: cuanto mas alto vuelan, mas hueco vacio hay que reservarles ARRIBA
   todo el rato, y ese hueco se ve siempre mientras que el vuelo se ve al
   tocarla. Siguen saliendose de la carpeta con holgura, que es lo que la
   animacion tiene que contar. */
.daia-id-carpeta[data-abierta="true"] .daia-carpeta__tarjeta:nth-child(1) { --y: -115; --x:  70; --giro:  18deg; --retraso: 100ms; }
.daia-id-carpeta[data-abierta="true"] .daia-carpeta__tarjeta:nth-child(2) { --y: -130; --x:   0; --giro:  -3deg; --retraso:  50ms; }
.daia-id-carpeta[data-abierta="true"] .daia-carpeta__tarjeta:nth-child(3) { --y: -122; --x: -65; --giro: -14deg; --retraso:   0ms; }

.daia-id-carpeta .daia-carpeta__tapa {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(150px * var(--carpeta-escala));
  border-radius: calc(10px * var(--carpeta-escala)) calc(10px * var(--carpeta-escala))
                 calc(16px * var(--carpeta-escala)) calc(16px * var(--carpeta-escala));
  background: var(--carpeta-color);
  transform-origin: bottom center;
  transform: rotateX(-15deg);
  transition: transform var(--mov-lento) var(--curva-rebote);
  z-index: 4;
}
.daia-id-carpeta:hover .daia-carpeta__tapa { transform: rotateX(-45deg); }
.daia-id-carpeta[data-abierta="true"] .daia-carpeta__tapa { transform: rotateX(-55deg); }

.daia-id-carpeta .daia-carpeta__lomo {
  position: absolute;
  inset: calc(26px * var(--carpeta-escala)) 0 0 0;
  border-radius: calc(14px * var(--carpeta-escala));
  background: color-mix(in srgb, var(--carpeta-color) 72%, #000);
  z-index: 0;
}

.daia-id-carpeta-pie {
  margin: 10px 0 14px;
  text-align: center;
  font-size: 12.5px;
  color: #A3A9B8;
}

/* QUE SE VEA QUE SE TOCA (22 de septiembre de 2026). Un dibujo quieto no dice
   «soy un boton»; en un telefono no hay cursor que cambie. El foco del teclado
   lleva el mismo anillo que el resto de la hoja, y al pulsar la carpeta se
   hunde un poco, la regla de la arcilla del taller: lo que se toca, baja. */
.daia-id-carpeta { border-radius: 10px; transition: transform var(--mov-rapido) var(--curva-asiento); }
.daia-id-carpeta:active { transform: translateY(1px) scale(.97); }
.daia-id-carpeta:focus-visible { outline: 2px solid var(--daia-id-acento); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .daia-id-carpeta .daia-carpeta__tarjeta,
  .daia-id-carpeta .daia-carpeta__tapa { transition-duration: 1ms; transition-delay: 0ms; }
}

/* =====================================================================
   LAS PIEZAS NUEVAS DEL 22 DE SEPTIEMBRE DE 2026

   Todo lo de aqui tiene marcado propio en las dos versiones de la hoja
   (`HojaDaiaID.jsx` y `herramientas/lib/daia-id-hoja.js`). Si se toca una,
   se toca la otra.
   ===================================================================== */

/* --- Los iconos de linea de las filas («Cerrar sesion», «Borrar mi cuenta») ---
   Las demas filas llevan su flecha escrita (›, ↗, ↓) y estas dos iban cojas.
   Van en el mismo `span[aria-hidden]` que las flechas, asi que heredan el
   pequeno desplazamiento al apuntar la fila. */
.daia-id-boton--fila > span[aria-hidden="true"] svg { width: 17px; height: 17px; display: block; }

/* --- La vista del codigo: «Cambiar el correo» baja a enlace ---
   Era una fila con texto blanco y negrita justo debajo de «Entrar» apagado: el
   ojo se iba a la accion secundaria. Ahora va en el pie, al lado de
   «Reenviar», los dos como enlaces discretos. El punto los separa sin que
   parezcan una sola frase. */
.daia-id-pie__punto { color: #4A5162; margin: 0 2px; }

/* --- «Mejor no» como boton de verdad, en la pantalla de borrar ---
   Era un enlace subrayado de 13px: la salida segura de la pantalla mas
   peligrosa de la hoja tenia el blanco mas pequeno. Ahora es un boton de
   ancho completo, en el gris de las filas — no en el acento: no es una accion
   que se celebre, es quedarse como estaba. */
.daia-id-boton--secundario {
  background: #1F2129;
  color: #F2F3F6;
  margin-top: 8px;
}
.daia-id-boton--secundario:hover { background: #262933; }

/* --- El basurero se ve como lo que es ---
   44x44 era un blanco correcto, pero el dibujo dentro era un icono gris de
   18px sin nada alrededor: parecia un adorno, no el mando. Ahora lleva un
   disco coral suave y el icono en el coral claro. Sigue siendo un gesto
   pequeno y no una franja roja, que es lo que el bloque «EL BASURERO» de mas
   arriba decidio, y el ancho de 44 no cambia (de el cuelgan los `max-width`). */
.daia-id-borrar__gatillo { background: rgba(240, 106, 123, .14); color: #F06A7B; }
.daia-id-borrar__gatillo:hover { background: rgba(240, 106, 123, .24); color: #F06A7B; }
.daia-id-borrar__gatillo .daia-id-borrar__icono { width: 20px; height: 20px; }
.daia-id-borrar[data-abierto='true'] .daia-id-borrar__gatillo { background: none; }
.daia-id-borrar__si { color: #F06A7B; }

/* --- De quien es la cuenta que se va ---
   La pantalla de borrar era la unica sin nada arriba: el monito se esconde en
   «dentro» (hay avatar) y la confirmacion vive dentro de «dentro». Ahora
   ensena el avatar y el correo de la cuenta: lo que se va a borrar, dicho con
   la cara que la persona eligio. */
/* El `padding-top` no sobra: en la version de React las vistas van dentro de
   `.daia-id-cuerpo`, que corta con `overflow: hidden`, y el aro de 3px del
   disco quedaba mordido por arriba. En el kit no se veia porque no usa ese
   envoltorio. */
.daia-id-borrar-quien { text-align: center; margin-bottom: 14px; padding-top: 4px; }
.daia-id-borrar-quien .daia-id-disco-inicial {
  width: 52px;
  height: 52px;
  font-size: 20px;
  margin: 0 auto 8px;
  box-shadow: 0 0 0 3px #F2F3F6;
  overflow: hidden;
}
.daia-id-borrar-quien .daia-id-correo { margin: 0; }

/* =====================================================================
   LA CAPA PREMIUM (24 de septiembre de 2026)

   El dueño pidio que Daia ID se viera «mucho mas premium». Lo que NO se
   cambio, porque ya esta decidido: sigue OSCURA siempre, sigue con su relieve
   y con el acento de la app que la abre. No es el vidrio del ADN ni la capa
   plana en #333336 — esa se probo el 23 de septiembre y el dueño la vio
   «aburrida y plana» (esta en `archivo/respaldo-daia-id-333336-2026-09-23/`).

   LO QUE SI CAMBIA ES LA LUZ Y EL PESO, no el color:

   1. LA LUZ VIENE DE ARRIBA. Todo lo que antes era un gris plano sobre otro
      gris plano (la hoja, las cajas del codigo, los campos, las filas) lleva
      ahora un canto claro de 1px arriba y, los campos, una sombra por dentro:
      los campos se leen HUNDIDOS y los botones LEVANTADOS. Es la diferencia
      entre un dibujo de una pantalla y un objeto.
   2. MENOS PESO EN LA LETRA. Habia 800 en titulos y 600-700 en las filas: todo
      gritaba igual. Ahora los titulos van a 700 con el tracking cerrado del
      SF Display, las filas a 500, y el suavizado de letra en gris
      (`antialiased`) — sin eso, el texto claro sobre oscuro en un Mac sale
      engordado y borroso, que es lo primero que delata una interfaz barata.
   3. LA TARJETA ES UNA TARJETA. Era un bloque de color con una banda de
      triangulos repetidos. Ahora es un carnet: brillo en la esquina, lineas
      finas de guilloche (las de los billetes y los documentos de identidad)
      saliendo de la esquina contraria, un canto claro, el rotulo «DAIA ID» y,
      sin color elegido, grafito en vez de gris.
   4. LAS FILAS SE AGRUPAN, como los Ajustes del iPhone: una sola pieza con
      rayas finas entre fila y fila, y no seis pastillas sueltas.
   5. UN SOLO COLOR SIGUE MANDANDO. La carpeta de «Tus datos» era del acento
      debajo de una tarjeta que ya es de color: dos piezas de color en la misma
      pantalla. Pasa a grafito. El halo del acento detras del monito y en el
      foco de los campos es luz, no una pieza: no pasa del 22%.

   TODO ES CSS, a proposito: este archivo se copia byte a byte a ocho sitios y
   el marcado vive en dos versiones (React y el kit). Tocar el marcado habria
   sido tocarlo en las dos y en `/cuenta/`. El rotulo «DAIA ID» es un
   `::before` por lo mismo.

   SE QUITA ENTERO BORRANDO ESTE BLOQUE: nada de lo de arriba depende de el.
   El archivo de antes esta en `archivo/respaldo-daia-id-premium-2026-09-24/`.
   ===================================================================== */

/* --- 1. La hoja: suavizado, luz arriba y canto --- */
.daia-id-hoja {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Dos luces sobre el mismo #16181D: una blanca muy abierta y, dentro, una
     del acento de la app. Es la que hace que la hoja de Fierro no se vea igual
     que la de Mi Ruta U sin pintar nada de rojo. `background-attachment`
     queda en `scroll`, asi que la luz se queda arriba aunque la hoja corra. */
  background:
    radial-gradient(70% 38% at 50% -6%, color-mix(in srgb, var(--daia-id-acento) 20%, transparent), transparent 100%),
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, .06), transparent 70%),
    #16181D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 -12px 40px rgba(0, 0, 0, .5);
}
@media (min-width: 640px) {
  .daia-id-hoja {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .09),
      0 0 0 1px rgba(255, 255, 255, .06),
      0 40px 90px -30px rgba(0, 0, 0, .8),
      0 14px 28px -14px rgba(0, 0, 0, .55);
  }
}
/* Incrustada en `/cuenta/` sigue sin sombra que la despegue (ver arriba): solo
   el canto y el filo, que es lo que la separa del #0E0F13 de la pagina. */
.daia-id-hoja[data-incrustada="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .05);
}

/* El velo de atras oscurece mas y desenfoca algo mas: la hoja se despega de
   la app en vez de flotar sobre ella a medias. 4px y no mas, porque un
   desenfoque de pantalla completa es lo que mas cuesta en un telefono barato. */
.daia-id-fondo {
  background: rgba(8, 9, 12, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* EL CUERPO SE ENSANCHA 6px POR CADA LADO SIN MOVER NADA. `.daia-id-cuerpo`
   corta con `overflow: hidden` (lo necesita la animacion de altura), y el
   halo de foco de los campos de abajo se sale 4px de su caja: sin esto, el
   del correo salia cortado por los lados y entero arriba y abajo. El margen
   negativo y el relleno se anulan, asi que el contenido queda donde estaba. */
.daia-id-cuerpo { margin: 0 -6px; padding: 0 6px; }

.daia-id-asa { background: rgba(255, 255, 255, .16); }

/* La X lleva su disco en todas las vistas, como las hojas de iOS: sin el era
   una X suelta flotando en la esquina. */
.daia-id-cerrar {
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 15px, transparent 16px);
  color: #A3A9B8;
}
.daia-id-cerrar:hover {
  background: radial-gradient(circle, rgba(255, 255, 255, .13) 15px, transparent 16px);
  color: #F2F3F6;
}
/* Sobre la tarjeta, el disco es oscuro traslucido y no el #16181D opaco: la
   tarjeta ahora tiene brillo y guilloche, y un circulo plano encima se leia
   como un agujero. */
.daia-id-hoja:has(.daia-id-tarjeta) .daia-id-cerrar {
  background: radial-gradient(circle, rgba(8, 9, 12, .42) 16.5px, transparent 17.5px);
  color: #FFFFFF;
}
.daia-id-hoja:has(.daia-id-tarjeta) .daia-id-cerrar:hover {
  background: radial-gradient(circle, rgba(8, 9, 12, .6) 16.5px, transparent 17.5px);
}

/* --- El monito: porcelana, con una orbita y la luz de la app --- */
.daia-id-monito-disco {
  background: linear-gradient(180deg, #FFFFFF, #E4E6EC);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 0 0 8px rgba(255, 255, 255, .035),
    0 16px 32px -12px rgba(0, 0, 0, .75),
    0 0 48px -8px color-mix(in srgb, var(--daia-id-acento) 45%, transparent);
  margin-bottom: 20px;
}

/* --- 2. La letra --- */
.daia-id-titulo {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin-bottom: 8px;
}
.daia-id-texto { font-size: 14.5px; }

/* --- Los campos: hundidos, con filo fino, y el foco como halo --- */
.daia-id-campo:not(.daia-id-grupo-correo__campo),
.daia-id-selector,
.daia-id-grupo-correo {
  border: 1px solid rgba(255, 255, 255, .08);
  background-color: #1A1C22;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color var(--mov-rapido) var(--curva-asiento), box-shadow var(--mov-rapido) var(--curva-asiento);
}
/* `.daia-id-hoja` delante NO sobra: arriba hay una regla (0,3,0) que le quita
   el `box-shadow` a los campos para que no pase el anillo de la app
   anfitriona, y este halo tiene que ganarle. Es nuestro, no el de la app. */
.daia-id-grupo-correo:focus-within,
.daia-id-hoja .daia-id-campo:not(.daia-id-grupo-correo__campo):focus,
.daia-id-hoja .daia-id-selector:focus {
  border-color: var(--daia-id-acento);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .4),
    0 0 0 4px color-mix(in srgb, var(--daia-id-acento) 22%, transparent);
}
.daia-id-etiqueta-selector { font-weight: 500; }

/* --- Las cajas del codigo: mas altas, con canto, y el numero en cifras
   de ancho fijo — los seis quedan en columna aunque el 1 sea mas estrecho --- */
.daia-id-codigo { --carta-alto: 58px; }
@media (max-width: 380px) {
  .daia-id-codigo { --carta-alto: 52px; }
}
.daia-id-codigo__carta {
  background: linear-gradient(180deg, #272A33, #1E2027);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 6px -2px rgba(0, 0, 0, .5);
  border-radius: 13px;
}
.daia-id-codigo__carta[data-llena="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px -8px rgba(0, 0, 0, .7);
}
.daia-id-codigo__campo:focus ~ .daia-id-codigo__mano .daia-id-codigo__carta[data-activa="true"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 4px color-mix(in srgb, var(--daia-id-acento) 22%, transparent),
    0 8px 18px -8px rgba(0, 0, 0, .7);
}
.daia-id-codigo__numero {
  font-weight: 600;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

/* --- Los botones: el principal, levantado; las filas, a 500 --- */
.daia-id-boton { font-weight: 600; letter-spacing: -0.005em; }

/* El degradado baja de la tinta hacia MAS oscuro, nunca hacia mas claro: los
   siete acentos estan medidos a 4,5:1 con letra blanca, y aclarar la parte de
   arriba los habria dejado por debajo justo donde va la palabra. El canto
   blanco de 1px no es texto y no cuenta para el contraste. */
.daia-id-boton--principal:not(:disabled),
.daia-id-grupo-correo__enviar:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(180deg, var(--daia-id-acento), color-mix(in srgb, var(--daia-id-acento) 82%, #000));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 10px 24px -12px color-mix(in srgb, var(--daia-id-acento) 85%, transparent),
    0 2px 4px -1px rgba(0, 0, 0, .45);
}
.daia-id-grupo-correo__enviar:not(:disabled):not([aria-disabled="true"]) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 4px 12px -6px color-mix(in srgb, var(--daia-id-acento) 85%, transparent);
}
/* Apagado se queda como lo decidio el 22 de septiembre (gris teñido, sin
   opacidad) y ademas sin canto: el canto es lo que dice «se puede pulsar». */
.daia-id-boton--principal:disabled,
.daia-id-grupo-correo__enviar:disabled,
.daia-id-grupo-correo__enviar[aria-disabled="true"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.daia-id-boton--secundario {
  background: #1E2027;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .05);
}

/* Los enlaces del pie siguen subrayados —son la salida de la hoja y tienen
   que verse como algo que se toca—, pero el subrayado es tenue y la palabra
   se enciende al apuntarla. */
.daia-id-boton--fantasma {
  text-decoration-color: rgba(163, 169, 184, .38);
  text-decoration-thickness: 1px;
  transition: color var(--mov-rapido) var(--curva-asiento);
}
.daia-id-boton--fantasma:not(:disabled):hover { color: #F2F3F6; text-decoration-color: currentColor; }
.daia-id-acepto__texto a { text-decoration-color: rgba(242, 243, 246, .35); }

/* --- 4. Las filas, agrupadas como los Ajustes del iPhone ---

   NO HAY CONTENEDOR QUE LAS AGRUPE en el marcado: son hermanas sueltas, en
   las dos versiones de la hoja. Asi que el grupo se dibuja desde las propias
   filas: una fila que tiene otra fila DETRAS pierde las esquinas de abajo y
   su margen; una que tiene otra DELANTE pierde las de arriba y lleva la raya.
   «Borrar mi cuenta» queda fuera del grupo a proposito: va aparte, con aire.

   TODO VA DENTRO DE `@supports selector(:has(...))`. Sin `:has()` (Firefox de
   antes de diciembre de 2023) solo se aplicaria la mitad —filas sin esquinas
   de arriba pero separadas 8px— y eso se ve roto. Asi, sin `:has()`, las filas
   se quedan como pastillas sueltas, que es lo de antes y se ve bien. */
.daia-id-boton--fila {
  background: #1E2027;
  font-weight: 500;
  padding: 15px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Apuntar ya no mueve la fila: dentro de un grupo, una fila que se sale un
   pixel de su sitio rompe la pieza entera. Se aclara, y al pulsar se
   oscurece — el hundirse de la regla de la casa, dicho con luz. */
.daia-id-boton--fila:hover { background: #25272F; transform: none; }
.daia-id-boton--fila:active { background: #1A1B21; transform: none; }
.daia-id-boton--fila > span[aria-hidden="true"] { color: #6C7385; }
.daia-id-boton--fila.daia-id-boton--peligro > span[aria-hidden="true"] { color: inherit; }
.daia-id-boton--peligro { margin-top: 18px; }

@supports selector(:has(+ *)) {
  .daia-id-boton--fila:has(+ .daia-id-boton--fila:not(.daia-id-boton--peligro)) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .daia-id-boton--fila + .daia-id-boton--fila:not(.daia-id-boton--peligro) {
    position: relative;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
  }
  .daia-id-boton--fila + .daia-id-boton--fila:not(.daia-id-boton--peligro)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .07);
  }
}

/* El rotulo del grupo se alinea con el texto de las filas (sus 18px de
   relleno), como en iOS, y no con el borde de la pieza. */
.daia-id-grupo-etiqueta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  margin: 22px 18px 8px;
}
.daia-id-grupo-etiqueta:first-of-type { margin-top: 6px; }

.daia-id-resumen { background: #1E2027; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }

/* --- 3. La tarjeta, convertida en carnet ---

   `--tarjeta-base` es una variable NUEVA y no se reusa `--tarjeta-fondo`: esa
   la escriben los siete `[data-color]` de arriba, y redefinirla aqui (mas
   abajo en el archivo) le ganaria a todos y dejaria cada tarjeta en grafito. */
.daia-id-hoja .daia-id-tarjeta {
  --tarjeta-base: var(--tarjeta-fondo, #2A2D37);
  border-radius: 24px;
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .17), transparent 52%),
    linear-gradient(155deg, var(--tarjeta-base), color-mix(in srgb, var(--tarjeta-base) 70%, #000));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 24px 44px -24px rgba(0, 0, 0, .9),
    0 14px 34px -20px color-mix(in srgb, var(--tarjeta-base) 80%, transparent);
}

/* El guilloche va en la BANDA, que ya existe en las dos versiones del
   marcado: se estira a toda la tarjeta, se esconde su SVG de triangulos y
   pinta aros finos desde la esquina de arriba a la derecha, apagados hacia la
   de abajo a la izquierda con una mascara. Asi el nombre y el correo quedan
   sobre fondo limpio y las lineas no le roban contraste a nada. */
.daia-id-hoja .daia-id-tarjeta .daia-id-tarjeta__banda,
.daia-id-hoja .daia-id-tarjeta[data-color] .daia-id-tarjeta__banda {
  inset: 0;
  height: auto;
  opacity: 1;
  background: repeating-radial-gradient(
    circle at 100% 0%,
    rgba(255, 255, 255, .11) 0,
    rgba(255, 255, 255, .11) .7px,
    transparent 1.5px,
    transparent 8px
  );
  -webkit-mask-image: radial-gradient(95% 110% at 100% 0%, #000, transparent 72%);
          mask-image: radial-gradient(95% 110% at 100% 0%, #000, transparent 72%);
}
.daia-id-hoja .daia-id-tarjeta__banda svg { display: none; }

/* El rotulo del carnet. Va con texto alternativo vacio (`/ ""`): es adorno, y
   el lector de pantalla no tiene por que leer «DAIA ID» encima del nombre. La
   primera linea es para el navegador que no entiende la segunda: ahi se lee,
   que es un mal menor que no enseñarlo. */
.daia-id-hoja .daia-id-tarjeta::before {
  content: "DAIA ID";
  content: "DAIA ID" / "";
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .6);
  pointer-events: none;
}

/* Sin la banda de triangulos no hay nada que recortar alrededor del avatar,
   asi que el segundo anillo (el del color de la tarjeta) sobra — sobre un
   degradado se veia como un aro de otro color. Queda el aro claro y una
   sombra que lo despega. */
.daia-id-hoja .daia-id-tarjeta .daia-id-disco-inicial,
.daia-id-hoja .daia-id-tarjeta[data-color] .daia-id-disco-inicial {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 14px 28px -10px rgba(0, 0, 0, .65);
}
.daia-id-hoja .daia-id-cambiar-avatar,
.daia-id-hoja .daia-id-tarjeta[data-color] .daia-id-cambiar-avatar {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .08);
}
.daia-id-tarjeta__nombre {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.022em;
  margin-top: 4px;
}
.daia-id-tarjeta__desde { letter-spacing: .01em; }

/* --- 5. La carpeta, en grafito: el color de esta pantalla ya es la tarjeta --- */
.daia-id-carpeta { --carpeta-color: #3A3F4B; }
.daia-id-carpeta .daia-carpeta__tapa {
  background: linear-gradient(180deg, #454A57, var(--carpeta-color));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Con el carnet ya despegado por su sombra, el rotulo «TU CUENTA» quedaba
   pegado a su borde de abajo: 20px lo devuelven a su grupo. */
.daia-id-hoja .daia-id-tarjeta { margin-bottom: 20px; }