/* =============================
   DEGU – Keycloak Login Theme
   Centered card layout
   ============================= */

:root {
  --font-body: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;

  /* LOS TOKENS NO SE COPIAN, Y YA NO SE PISA NINGUNO. `tokens.css` del design-system se copia
     al tema en el build (ver `iam/Dockerfile.stage`) y se carga ANTES que esta hoja, así que
     los 45 tokens de la marca llegan del único sitio donde viven. Antes había acá trece
     valores escritos a mano, y cuatro ya se habían separado de la app sin que nadie lo notara.

     El último que quedaba era `--muted`, y su motivo era medible: sobre la tarjeta blanca el
     `rgba(0,0,0,0.5)` de la app daba 3,95:1 contra los 4,5 que AA pide para texto normal —el
     color de la bajada, del pie y del «o con tu email», texto chico, el primero que se pierde—
     mientras que `#677079` da 5,04:1. Ese arreglo dejó de ser local: la app adoptó ese mismo
     valor como su `--muted`, así que la pantalla lo recibe del import y redefinirlo acá sería
     una copia que se puede separar sin que nadie lo note.

     De paso queda una propiedad sola en este bloque, y eso es correcto: lo único que esta
     pantalla necesita para sí es su tipografía.

     `apps/web/tests/unit/login-y-app-comparten-la-marca.unit.test.ts` mide el color EFECTIVO
     —el del login si lo redefine, el de la app si no—, así que la pantalla sigue con su piso
     de 4,5:1 medido aunque acá no haya nada escrito. */
}

/* ── Page ─────────────────────────────────────────── */

.dg-login-page {
  margin: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--bg);
}

/* ── Card header ──────────────────────────────────── */

.dg-logo {
  width: 88px;
  height: auto;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.dg-tarjeta-marca h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: var(--lh-ajustada);
}

/* ── Login actions ────────────────────────────────── */

/* ── Google button ────────────────────────────────── */

/* ── Google como acción SUGERIDA (fondo primary + sombra) ─────
   La tarjeta y el botón comparten `--surface`; sin este realce el botón
   quedaba blanco-sobre-blanco (claro) o gris-sobre-gris (oscuro). El fondo
   primary + la sombra lo despegan de la tarjeta y dirigen la mirada aquí. */
.dg-acciones--primaria {
  margin-top: 8px;
}
/* ── Correo/contraseña como alternativa colapsable ───────────────
   Va detrás de un <details> para que, al entrar, la vista muestre casi
   solo el botón sugerido. El correo es la vía secundaria y se despliega. */
.dg-alt {
  margin-top: 4px;
}
.dg-alt-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  list-style: none;
  list-style-type: none;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  border-radius: var(--pp-radio-control);
  user-select: none;
  transition: color 0.15s, background-color 0.15s;
}
/* Elimina el marcador nativo del <details> en todos los navegadores; si no,
   deja un inset a la izquierda que descentra la etiqueta (visible en móvil). */
.dg-alt-summary::-webkit-details-marker {
  display: none;
}
.dg-alt-summary::marker {
  content: "";
}
.dg-alt-summary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.dg-alt-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.dg-chevron {
  flex-shrink: 0;
  transition: transform 0.28s ease;
}
.dg-alt[open] .dg-chevron {
  transform: rotate(180deg);
}
.dg-alt-body {
  padding-top: 4px;
}
/* Dentro del colapsable, el formulario no lleva margen superior propio
   (mismo reset que en packages/design-system para mantenerlos alineados). */
.dg-alt-body .dg-formulario {
  margin-top: 0;
}
/* Despliegue suave donde el navegador lo soporta; donde no, el <details>
   alterna al instante y sigue siendo plenamente funcional. */
@supports (interpolate-size: allow-keywords) {
  .dg-alt {
    interpolate-size: allow-keywords;
  }
  .dg-alt::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.28s ease, content-visibility 0.3s allow-discrete;
  }
  .dg-alt[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* EL RELLENO Y EL BORDE SE FUERON, y con ellos un defecto que ya estaba desplegado: estaban
   escritos `#f4f6f8` y `#cdd3db` con `!important`, junto a `color: var(--text)`, que SÍ se
   vuelve blanco cuando el sistema está en oscuro —esta pantalla alterna `.theme-dark` sola,
   en `template.ftl`—. Medido contra la imagen de `dev`: 1,08:1, o sea la contraseña de
   alguien escrita en blanco sobre casi blanco. Ahora los pone `pantalla-publica.css`
   derivados del tema, así que se mueven juntos.

   Lo único que queda acá es el `!important`, que sigue haciendo falta: una regla del tema
   `base` de Keycloak fija el borde del campo casi transparente y le gana a la hoja
   compartida. Y la hoja compartida NO lo lleva a propósito: en la app otros estilos tienen
   que poder ganarle, y un `!important` ahí se lo impediría. */
.dg-entrada {
  border: 1.5px solid var(--pp-campo-borde) !important;
  background: var(--pp-campo-fondo) !important;
}

.dg-entrada::placeholder {
  color: var(--muted);
}

/* EL `:hover` DEL CAMPO SE FUE porque nunca hizo nada. `border` de arriba es un atajo, así
   que su `!important` alcanza también a `border-color`, y una regla que lo cambie sin
   `!important` pierde por mucha especificidad que tenga — el `:focus` funciona justamente
   porque él sí lo lleva. Comprobado en el navegador: el color del borde es el mismo en
   reposo y con el puntero encima. Estaba muerto desde antes (`#aab2bd` contra
   `#cdd3db !important`), así que borrarlo no cambia lo que nadie ve hoy; lo que se va es la
   promesa de una respuesta visual que no existía. Lo levantó @nmonge83. */

.dg-entrada:focus {
  outline: none;
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Sin opciones que mostrar, la fila no debe dejar su hueco. Venía de la copia de
   `packages/design-system` y nunca llegó a desplegarse, porque la imagen se construye con
   `context: iam` y esa copia vivía fuera. */
.dg-opciones-formulario:empty {
  display: none;
}

.dg-opciones-formulario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-base);
}

.dg-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
}

.dg-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ── Confirmación de cierre de sesión ─────────────────────────── */
.dg-logout-text {
  text-align: center;
  margin: 12px 0 22px;
}
.dg-logout-back {
  text-align: center;
  margin-top: 18px;
}

/* ── Messages ─────────────────────────────────────── */

.dg-error-message,
.dg-success-message,
.dg-warning-message,
.dg-info-message {
  padding: 12px 16px;
  margin-top: 24px;
  border-radius: var(--pp-radio-control);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.dg-error-message {
  background: color-mix(in srgb, #ef4444 8%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 40%, transparent);
  color: #dc2626;
}

.dg-success-message {
  background: color-mix(in srgb, #10b981 8%, transparent);
  border: 1px solid color-mix(in srgb, #10b981 40%, transparent);
  color: #059669;
}

.dg-warning-message {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
  color: #d97706;
}

.dg-info-message {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}

.theme-dark .dg-error-message { color: #fca5a5; }
.theme-dark .dg-success-message { color: #6ee7b7; }
.theme-dark .dg-warning-message { color: #fcd34d; }

/* ── Primary button (error/info pages) ────────────── */

/* ── Links ────────────────────────────────────────── */

/* ── Footer ───────────────────────────────────────── */

/* ── Las pantallas de Keycloak que este tema no reescribe ────────────────
   «¿Olvidaste tu contraseña?», la de la contraseña nueva, verificar el correo y vincular una
   cuenta vienen de `base`, con las clases que `theme.properties` les asigna. Lo que sigue es
   lo que esas pantallas traen y `login.ftl` no tiene. */

/* El error de un campo, bajo el campo: «las contraseñas no coinciden». */
.dg-campo-error {
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.theme-dark .dg-campo-error {
  color: #fca5a5;
}

/* La contraseña con el botón para verla. El botón va DENTRO del campo, a la derecha, y el
   campo le deja su espacio para que el texto no quede debajo del ojo. */
.dg-grupo-clave {
  position: relative;
}
.dg-grupo-clave .dg-entrada {
  padding-right: 48px;
}
.dg-ver-clave {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--pp-radio-control);
}
.dg-ver-clave:hover {
  color: var(--text);
}
.dg-ver-clave:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
/* El ícono se dibuja con una máscara: toma el color del botón y cambia con el tema. */
.dg-ojo {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--dg-ojo) center / contain no-repeat;
  mask: var(--dg-ojo) center / contain no-repeat;
  --dg-ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.dg-ojo--tachado {
  --dg-ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* «Cerrar la sesión en los otros dispositivos», al fijar una contraseña nueva. */
.dg-tarjeta .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-base);
  cursor: pointer;
}
.dg-tarjeta .checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* Instrucciones: «te enviamos un correo…», «¿no te llegó? haz clic aquí». */
.dg-tarjeta .instruction,
.dg-info {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: var(--lh-lectura);
  text-align: center;
}
.dg-info {
  margin-top: 16px;
}

/* Los enlaces que `base` escribe sin clase —«« Volver a iniciar sesión», «haz clic aquí»—
   se ven como los del tema y no con el azul del navegador. */
.dg-tarjeta a:not([class]) {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.dg-tarjeta a:not([class]):hover {
  text-decoration: underline;
}
#kc-form-options {
  text-align: center;
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 480px) {

  .dg-logo {
    width: 64px;
  }

  .dg-tarjeta-marca h1 {
    font-size: var(--fs-2xl);
  }
}