/* =====================================================================
   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.

   MODO OSCURO EN DOS BLOQUES, NUNCA COMBINADOS
   `:root[data-theme="dark"] .clase { ... }` es un selector; `@media (...) {
   .clase { ... } }` es una regla aparte. No se pueden juntar con una coma:
   una coma solo separa selectores, y un `@media` no es uno. Por eso cada color
   de modo oscuro sale DOS VECES aqui: una vez para cuando la app fuerza el
   tema con el atributo, y otra para cuando sigue al sistema.

   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`.
   ===================================================================== */

.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 200ms cubic-bezier(.2, .8, .2, 1);
}
.daia-id-fondo[data-abierta="true"] { opacity: 1; }
.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: #FFFFFF;
  color: #16181D;
  border-radius: 28px 28px 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(20, 22, 35, .18);
  transform: translateY(16px);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
}
.daia-id-fondo[data-abierta="true"] .daia-id-hoja { transform: translateY(0); }

@media (min-width: 640px) {
  .daia-id-hoja { border-radius: 28px; padding: 32px; box-shadow: 0 20px 60px rgba(20, 22, 35, .28); }
}

:root[data-theme="dark"] .daia-id-hoja { background: #16181D; color: #F2F3F6; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-hoja { background: #16181D; color: #F2F3F6; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); }
}

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

:root[data-theme="dark"] .daia-id-asa { background: #24262E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-asa { background: #24262E; }
}

.daia-id-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8A90A0;
  cursor: pointer;
}
.daia-id-cerrar:hover { background: rgba(138, 144, 160, .12); }
@media (min-width: 640px) { .daia-id-cerrar { display: flex; } }

/* --- El monito, dentro de su disco: sobre transparente se disuelve --- */
.daia-id-monito-disco {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: #F4F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.daia-id-monito-disco img { width: 44px; height: 44px; object-fit: contain; }

:root[data-theme="dark"] .daia-id-monito-disco { background: #1F2129; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-monito-disco { background: #1F2129; }
}

.daia-id-titulo {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", 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: #5A6070;
  text-align: center;
  margin: 0 0 24px;
}
.daia-id-texto strong { color: inherit; font-weight: 600; }

:root[data-theme="dark"] .daia-id-texto { color: #A3A9B8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-texto { color: #A3A9B8; }
}

.daia-id-campo {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid #E6E8EC;
  background: #F4F5F7;
  color: #16181D;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 12px;
}
.daia-id-campo:focus { outline: none; border-color: var(--daia-id-acento); background: #FFFFFF; }

:root[data-theme="dark"] .daia-id-campo { background: #1F2129; border-color: #24262E; color: #F2F3F6; }
:root[data-theme="dark"] .daia-id-campo:focus { background: #16181D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-campo { background: #1F2129; border-color: #24262E; color: #F2F3F6; }
  :root:not([data-theme="light"]) .daia-id-campo:focus { background: #16181D; }
}

.daia-id-boton {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.2, .8, .2, 1), opacity 160ms;
}
.daia-id-boton:disabled { opacity: .55; cursor: default; }
.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: #5A6070;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
  font-weight: 500;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  cursor: pointer;
}
.daia-id-boton--fantasma:disabled { opacity: .5; cursor: default; text-decoration: none; }

:root[data-theme="dark"] .daia-id-boton--fantasma { color: #A3A9B8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-boton--fantasma { color: #A3A9B8; }
}

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

:root[data-theme="dark"] .daia-id-boton--fila { background: #1F2129; color: #F2F3F6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-boton--fila { background: #1F2129; color: #F2F3F6; }
}

/* El rojo es de "borrar", y solo aparece al pasar por encima: permanente,
   convierte cualquier pantalla con veinticuatro filas en una alarma. */
.daia-id-boton--peligro { color: #5A6070; }
.daia-id-boton--peligro:hover { background: #FDEFEF; color: #D93B53; }

:root[data-theme="dark"] .daia-id-boton--peligro { color: #A3A9B8; }
:root[data-theme="dark"] .daia-id-boton--peligro:hover { background: rgba(217, 59, 83, .14); color: #E5484D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-boton--peligro { color: #A3A9B8; }
  :root:not([data-theme="light"]) .daia-id-boton--peligro:hover { background: rgba(217, 59, 83, .14); color: #E5484D; }
}

.daia-id-error {
  font-size: 13px;
  color: #D93B53;
  text-align: center;
  margin: -4px 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: "Outfit", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

:root[data-theme="dark"] .daia-id-resumen { background: #1F2129; color: #F2F3F6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daia-id-resumen { background: #1F2129; color: #F2F3F6; }
}

/* --- 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: "Inter", system-ui, 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; }
}