/* ==========================================================================
   Login / signup / dashboard — comparte paleta, tipografía y curvas de
   animación con styles.css (mismo lenguaje visual del home), pero vive en
   su propia hoja porque son páginas de producto, no de marketing.
   Mobile-first: todo parte de la columna angosta, min-width agranda.
   ========================================================================== */

/* Varios elementos de esta hoja fijan su propio `display` (flex/block) con
   la misma especificidad que la regla nativa `[hidden]{display:none}` del
   navegador — sin esto, el atributo `hidden` queda sin efecto en ellos y se
   ven login y signup superpuestos. */
[hidden] { display: none !important; }

.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: max(64px, calc(env(safe-area-inset-top) + 52px));
}

/* Banda del hero mycelium reutilizada tal cual del home — mismo motivo de
   marca, pero deliberadamente corta: en login el objetivo es que el
   formulario quede visible sin hacer scroll, así que aquí es una franja de
   acento arriba de la tarjeta, no un hero de pantalla completa como en el
   home. Solo aparece en login (primera impresión); el dashboard, que se
   visita muchas veces al día, usa un encabezado liviano en su lugar por
   rendimiento en móvil. */
.auth-hero {
  position: relative;
  width: 100%;
  height: clamp(64px, 15vh, 120px);
  overflow: hidden;
  background: #f5f8fd;
  isolation: isolate;
}

.auth-hero #mycelium-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.auth-card {
  position: relative;
  z-index: 2;
  width: min(420px, calc(100% - 32px));
  margin: -16px auto 20px;
  padding: 16px 18px 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(15, 26, 46, 0.08);
  box-shadow: 0 30px 60px -20px rgba(15, 26, 46, 0.25);
  text-align: center;
}

.auth-card__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.18));
}

.auth-card__title {
  margin: 0 0 4px;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f1a2e;
}

.auth-card__subtitle {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #4b5875;
}

@media (min-width: 640px) {
  .auth-hero { height: clamp(160px, 32vh, 320px); }
  .auth-card { margin-top: -56px; padding: 32px 36px 36px; }
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.auth-btn:active { transform: scale(0.97); }

.auth-btn--google {
  color: #0f1a2e;
  background: #ffffff;
  border: 1px solid rgba(15, 26, 46, 0.16);
}

.auth-btn:disabled,
.auth-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #4b5875;
  text-align: left;
}

.auth-consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: #2563eb;
}

.auth-consent a {
  color: #1d4ed8;
}

.auth-btn--google:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
}

.auth-btn--ghost {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.auth-btn--ghost:hover {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.4);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #96a2bd;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(15, 26, 46, 0.1);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(15, 26, 46, 0.14);
  background: #f8fafc;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: #0f1a2e;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input::placeholder { color: #97a2ba; }

.auth-input:focus {
  outline: none;
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.auth-form__submit {
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  margin-top: 2px;
}

.auth-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #b91c1c;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
}

.auth-success {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.2);
  color: #15803d;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
}

.auth-switch {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: none;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: #4b5875;
  cursor: pointer;
}

.auth-switch strong {
  color: #1d4ed8;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: #4b5875;
}

.auth-remember input {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

/* ==========================================================================
   Dashboard general — encabezado liviano (sin canvas) + grid de herramientas
   ========================================================================== */
.dash-page {
  min-height: 100dvh;
  padding-top: max(78px, calc(env(safe-area-inset-top) + 64px));
}

.dash-header {
  position: relative;
  padding: 32px 20px 40px;
  background: linear-gradient(120deg, #eef3fc 0%, #e3ecfb 60%, #eef3fc 100%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  overflow: hidden;
}

.dash-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60vw;
  height: 60vw;
  max-width: 480px;
  max-height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0) 70%);
  animation: dash-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dash-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

.dash-header__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.dash-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 10px;
}

.dash-header__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 8px 2px rgba(37, 99, 235, 0.55);
  animation: pulse-dot 2.2s ease-in-out infinite;
}

.dash-header__title {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f1a2e;
}

.dash-header__subtitle {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  color: #4b5875;
}

.dash-master-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(120deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55);
}

.dash-tools {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.dash-tools__title {
  margin: 0 0 20px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f1a2e;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .dash-grid { grid-template-columns: repeat(3, 1fr); }
}

.dash-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 88px;
}

.dash-tool:active { transform: scale(0.98); }

.dash-tool--enabled:hover {
  border-color: #2563eb;
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
}

.dash-tool--locked {
  opacity: 0.82;
}

.dash-tool__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  font-size: 1.4rem;
}

.dash-tool__name {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f1a2e;
}

.dash-tool__desc {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #4b5875;
  flex: 1;
}

.dash-tool__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dash-tool--enabled .dash-tool__status { color: #1d4ed8; }
.dash-tool--locked .dash-tool__status { color: #97a2ba; }

.dash-tool--grace { border-color: rgba(217, 119, 6, 0.4); background: rgba(217, 119, 6, 0.04); }
.dash-tool--grace .dash-tool__status { color: #d97706; }

.dash-tool--soon { opacity: 0.82; cursor: default; }
.dash-tool--soon.dash-tool--enabled { cursor: pointer; opacity: 1; }
.dash-tool--soon .dash-tool__status { color: #97a2ba; }
.dash-tool--soon.dash-tool--enabled .dash-tool__status { color: #1d4ed8; }
.dash-tool--soon.dash-tool--enabled:hover {
  border-color: #2563eb;
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
}

.dash-empty {
  padding: 40px 24px;
  text-align: center;
  border-radius: 20px;
  border: 1px dashed rgba(15, 26, 46, 0.16);
  color: #4b5875;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.dash-logout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: #48546b;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 26, 46, 0.14);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.dash-logout:hover {
  border-color: rgba(37, 99, 235, 0.4);
  color: #1d4ed8;
}

.dash-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: #4b5875;
}

.dash-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  margin-left: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #1d4ed8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dash-admin-link:hover {
  background: #ffffff;
  border-color: #2563eb;
}

/* ==========================================================================
   Panel de administración — lista de usuarios + toggles por herramienta
   ========================================================================== */
.admin-search {
  max-width: 420px;
  margin-bottom: 20px;
}

.admin-user-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-user-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

@media (min-width: 700px) {
  .admin-user-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.admin-user-card__name {
  margin: 0 0 2px;
  font-weight: 700;
  color: #0f1a2e;
}

.admin-user-card__email {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: #4b5875;
}

.admin-user-card__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.admin-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.admin-toggle__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #d8dde8;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.admin-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 26, 46, 0.3);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-toggle input:checked + .admin-toggle__track {
  background: #2563eb;
}

.admin-toggle input:checked + .admin-toggle__track .admin-toggle__thumb {
  transform: translateX(16px);
}

.admin-toggle input:focus-visible + .admin-toggle__track {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-toggle input:disabled + .admin-toggle__track {
  opacity: 0.5;
}

.admin-toggle__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: #37415a;
}

.admin-user-card__actions {
  display: flex;
  justify-content: flex-end;
}

.admin-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.admin-delete-btn:hover {
  background: #fee2e2;
}

.admin-delete-btn:active {
  transform: scale(0.97);
}

.admin-delete-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}