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

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

  /* Tokens de marca Degú (espejo de apps/web). Sin esto, todos los var(--…)
     quedaban indefinidos → inputs sin borde, botones sin color de fondo, etc. */
  --primary: #0d9e81;
  --primary-hover: #0b8a71;
  --surface: #ffffff;
  --bg: #ffffff;
  --panel-border: rgba(13, 18, 22, 0.08);
  --text: #3a4650;
  --muted: #677079;
  --radius: 10px;
  --radius-lg: 20px;
  --fs-xs: 0.875rem;
  --fs-base: 1rem;
  --fs-2xl: 1.375rem;
  --fs-3xl: 1.625rem;
}

/* ── 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);
}

.dg-login-wrapper {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

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

.dg-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 48px 40px 36px;
  box-shadow:
    0 25px 60px -12px rgba(0, 0, 0, 0.2),
    0 12px 28px -8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  animation: card-in 0.35s ease-out;
}

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

.dg-card-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

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

.dg-card-header h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dg-hint {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.5;
}

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

.dg-login-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 36px;
}

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

.dg-google-btn {
  width: 100%;
  box-sizing: border-box; /* sin esto, width:100% + padding desborda la tarjeta */
  padding: 13px 20px;
  border: 1px solid var(--panel-border);
  border-radius: calc(var(--radius) - 6px);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.dg-google-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--panel-border));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.dg-google-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.dg-google-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.dg-google-btn svg {
  flex-shrink: 0;
}

/* ── 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-login-actions--primary {
  margin-top: 8px;
}
.dg-google-btn--suggested {
  padding: 15px 20px;
  font-size: calc(var(--fs-base) + 1px);
  font-weight: 700;
  border: none;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}
.dg-google-btn--suggested:hover {
  background: var(--primary-hover);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ── 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: 600;
  letter-spacing: 0.01em;
  text-align: center;
  border-radius: calc(var(--radius) - 6px);
  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-form {
  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;
  }
}

/* ── Divisor (el correo es la alternativa secundaria) ─────────── */
.dg-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}
.dg-divider::before,
.dg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

/* ── Formulario correo/contraseña ─────────────────────────────── */
.dg-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dg-label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.dg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  /* Relleno gris suave + borde marcado para que el campo se VEA claramente
     sobre la tarjeta blanca (antes el borde era casi invisible). !important
     porque una regla base del tema fijaba el color de borde casi transparente. */
  border: 1.5px solid #cdd3db !important;
  border-radius: calc(var(--radius) - 6px);
  background: #f4f6f8 !important;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

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

.dg-input:hover {
  border-color: #aab2bd;
}

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

.dg-form-options {
  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;
}

.dg-submit {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: none;
  border-radius: calc(var(--radius) - 6px);
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: transform 0.1s, background-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.dg-submit:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 40%, transparent);
}

.dg-submit:active {
  transform: translateY(0);
}

.dg-submit:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 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: calc(var(--radius) - 6px);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.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) ────────────── */

.dg-button-primary {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: none;
  border-radius: calc(var(--radius) - 6px);
  background: var(--primary);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: transform 0.1s, background-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.dg-button-primary:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 40%, transparent);
}

.dg-button-primary:active {
  transform: translateY(0);
}

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

.dg-link {
  color: var(--primary);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 500;
  transition: opacity 0.2s;
}

.dg-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

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

.dg-footer {
  margin: 32px 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.01em;
  opacity: 0.7;
}

/* ── Animation ────────────────────────────────────── */

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@media (max-width: 480px) {
  .dg-login-card {
    padding: 36px 24px 28px;
    border-radius: var(--radius);
  }

  .dg-logo {
    width: 64px;
  }

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