/* Tema Aurora: degradado moderno + efecto cristal (glassmorphism) */

:root {
  /* Paleta principal inspirada en los ejemplos */
  --aurora-start: #0e7490;      /* cyan profundo */
  --aurora-mid:   #3b82f6;      /* azul vibrante */
  --aurora-end:   #7c3aed;      /* violeta moderno */
  --aurora-emerald: #10b981;    /* acento verde */
  --aurora-bg-dark: #0b1220;    /* base muy oscura */

  /* Utilidades de texto sobre fondos oscuros */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255,255,255,.72);
  --on-dark-soft: rgba(255,255,255,.86);

  /* Parámetros del efecto cristal */
  --glass-bg: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.26);
  --glass-blur: 14px;
  --glass-radius: 18px;
  --glass-shadow: 0 18px 40px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.18);

  /* Paletas extra basadas en tus imágenes */
  --ref-pink-bg: #f8d9df;                /* fondo rosado suave (img 1) */
  --ref-purple-1: #5c7cfb;               /* azul-violeta superior */
  --ref-purple-2: #905bf9;               /* violeta medio */
  --ref-purple-3: #c15bc9;               /* magenta-violeta inferior */
  --ref-mint: #6fe3c4;                   /* acento menta del anillo */

  --ref-aqua-1: #8eddf4;                 /* azul claro (img 2) */
  --ref-aqua-2: #5fd0c5;                 /* turquesa medio */
  --ref-aqua-3: #6bdcaa;                 /* verde acua inferior */

  --ref-midnight-1: #0c2946;             /* azul muy oscuro (img 3) */
  --ref-midnight-2: #0f3554;             /* azul medio profundo */
  --ref-midnight-3: #0f5167;             /* azul-teal inferior */
  --ref-accent-purple: #b88afb;          /* acento púrpura chat */
  --ref-accent-emerald: #24d28d;         /* acento verde botón */
}

/* Fondo general del dashboard en degradado suave */
body.aurora-page {
  min-height: 100vh;
  background: radial-gradient(1200px circle at 20% 0%, rgba(16,185,129,.25), transparent 55%),
              linear-gradient(160deg, var(--aurora-start) 0%, var(--aurora-mid) 40%, var(--aurora-end) 80%) !important;
  color: var(--on-dark-soft) !important;
}

/* Temas de fondo según las tres referencias */
body.theme-midnight {
  background: radial-gradient(700px circle at 10% -10%, rgba(184,138,251,.18), transparent 55%),
              linear-gradient(180deg, var(--ref-midnight-1) 0%, var(--ref-midnight-2) 45%, var(--ref-midnight-3) 100%) !important;
  color: var(--on-dark-soft) !important;
}

body.theme-aqua {
  background: radial-gradient(900px circle at 80% -20%, rgba(255,255,255,.16), transparent 60%),
              linear-gradient(165deg, var(--ref-aqua-1) 0%, var(--ref-aqua-2) 45%, var(--ref-aqua-3) 100%) !important;
  color: #0b2c3f !important;
}

body.theme-pink {
  background: var(--ref-pink-bg) !important;
}

/* Ajustes de contenedor sobre fondo oscuro */
body.aurora-page .container {
  max-width: 1100px;
  padding: 24px 16px;
}

/* Cabeceras blancas sobre fondo oscuro */
body.aurora-page h1,
body.aurora-page h2 {
  color: var(--on-dark) !important;
}

/* Tarjeta de cristal reutilizable */
.glass-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow) !important;
}

/* Variantes y espaciado para secciones del dashboard */
.section-indicator .glass-card {
  padding: 16px;
  margin: 14px 0;
}

/* Pequeños chips estilo cristal */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--on-dark);
}

/* Botón primario con acento sobre fondo oscuro */
.btn-primary.aurora {
  background: linear-gradient(135deg, var(--aurora-mid), var(--aurora-emerald));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(2,6,23,.35);
}
.btn-primary.aurora:hover { filter: brightness(1.06); }

/* Nav con cristal ligero (integrado con el fondo) */
body.aurora-page .x-nav {
  background: linear-gradient(90deg, rgba(10,16,24,.70), rgba(16,22,30,.70)) !important;
  -webkit-backdrop-filter: saturate(1.05) blur(10px);
  backdrop-filter: saturate(1.05) blur(10px);
  border-bottom-color: rgba(255,255,255,.14) !important;
}

/* Acento sutil en títulos dentro de tarjetas */
.glass-card h2 {
  background: linear-gradient(90deg, var(--aurora-mid), var(--aurora-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Card con gradiente tipo imagen 1 */
.card-gradient-purple {
  background: linear-gradient(160deg, var(--ref-purple-1) 0%, var(--ref-purple-2) 50%, var(--ref-purple-3) 100%);
  color: #fff;
}

/* Burbujas/acento como en las referencias */
.badge-mint { background: var(--ref-mint); color: #083c3a; }
.badge-purple { background: var(--ref-accent-purple); color: #23104a; }
.btn-emerald { background: var(--ref-accent-emerald); color: #072d24; }

/* Overrides: reducir blancos en tema oscuro con cristal aqua */
body.aurora-page, body.theme-midnight {
  --text-color: var(--on-dark-soft);
  --muted-text: rgba(255,255,255,.70);
  --card-bg: rgba(95,208,197,.12); /* aqua glass */
  --border-color: rgba(95,208,197,.26);
  --muted-bg: rgba(255,255,255,.06);
  --segment-bg: rgba(95,208,197,.10);
  --brand-primary: #8b5cf6;
}

/* Inputs y selects en tema oscuro (cristal) */
body.aurora-page input, body.aurora-page select,
body.theme-midnight input, body.theme-midnight select {
  background: rgba(255,255,255,.06) !important;
  color: var(--on-dark-soft) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* Mayor contraste en tarjetas y detalles para midnight */
body.theme-midnight .propiedad-btn { 
  background: linear-gradient(180deg, rgb(12 23 33 / 24%), rgb(9 18 28 / 40%)) !important;
  border-color: rgba(255,255,255,.20) !important;
}
body.theme-midnight .propiedad-btn .vivienda-nombre { color: rgba(255,255,255,.95) !important; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
body.theme-midnight .propiedad-btn .vivienda-detalle,
body.theme-midnight .propiedad-btn .vivienda-card__details,
body.theme-midnight .propiedad-btn .vivienda-card__details li,
body.theme-midnight .propiedad-btn strong { color: rgba(255,255,255,.90) !important; }

/* Estados completados en oscuro: verde cristal legible */
body.aurora-page, body.theme-midnight {
  --completed-bg: rgba(36,210,141,.16);
  --completed-border: #24d28d;
  --input-bg: rgba(95,208,197,.08);
}

/* Señal verdosa visible en tarjetas terminadas */
body.theme-midnight .propiedad-btn.propiedad-completada {
  background: linear-gradient(180deg, rgba(36,210,141,.18), rgba(36,210,141,.10)) !important;
  border-left: 5px solid var(--completed-border) !important;
}
body.theme-midnight .propiedad-btn.propiedad-completada .vivienda-nombre,
body.theme-midnight .propiedad-btn.propiedad-completada .vivienda-detalle,
body.theme-midnight .propiedad-btn.propiedad-completada .vivienda-card__details li,
body.theme-midnight .propiedad-btn.propiedad-completada strong { color: rgba(255,255,255,.95) !important; }

/* Opcional: clase utilitaria para aplicar tinte aqua a cualquier tarjeta */
.glass-tint-aqua {
  background: rgba(95,208,197,.12) !important;
  border: 1px solid rgba(95,208,197,.26) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--on-dark);
}

/* Integración: caja de trabajadoras en tema midnight sin fondo blanco */
body.theme-midnight .trabajadoras-historial {
  background: rgba(95,208,197,.12) !important; /* aqua glass */
  border: 1px solid rgba(95,208,197,.26) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.theme-midnight .trabajadoras-historial h4,
body.theme-midnight .trabajadoras-historial li,
body.theme-midnight .trabajadoras-historial li strong {
  color: rgba(255,255,255,.92) !important;
}
/* Calendario: ocupar con tinte del tema en midnight, sin azul muy claro */
body.theme-midnight .calendar-cell.occupied {
  background: var(--segment-bg) !important;
  border-color: var(--border-color) !important;
}