/* ==========================================================================
   theme.css — Tema claro "liquid glass" compartido (Mentor + EA)
   --------------------------------------------------------------------------
   Se carga DESPUÉS del <style> inline de cada página, así que redefine las
   variables CSS (:root) que todas las páginas ya usan (--bg, --bg-secondary,
   --text, --accent, …) y las vuelve a un esquema claro translúcido con
   desenfoque (backdrop-filter). Un único punto de verdad para el look.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Fondo de página: degradado suave (el "vidrio" refracta sobre esto) */
  --bg: linear-gradient(150deg, #eaf0fb 0%, #f3eefb 45%, #e8f9f3 100%);

  /* Superficies de cristal (paneles, header, tarjetas, modales) */
  --bg-secondary: rgba(255, 255, 255, 0.55);
  --bg-chat: rgba(255, 255, 255, 0.32);
  --bg-input: rgba(255, 255, 255, 0.72);
  --bg-user: rgba(59, 130, 246, 0.14);
  --bg-assistant: rgba(255, 255, 255, 0.62);

  /* Texto */
  --text: #1b2333;
  --text-muted: #5a6478;
  --text-dim: #8a93a5;

  /* Acento */
  --accent: #3b82f6;
  --accent-hover: #2563eb;

  /* Bordes translúcidos */
  --border: rgba(120, 132, 158, 0.22);

  /* Semánticos */
  --success: #17a673;
  --error: #e5484d;
  --danger: #e5484d;
  --warning: #d98324;

  /* Scrollbar */
  --scrollbar: rgba(120, 132, 158, 0.32);
  --scrollbar-hover: rgba(120, 132, 158, 0.5);

  /* Tokens propios del tema (para las reglas de cristal de abajo) */
  --glass-blur: blur(22px) saturate(175%);
  --glass-edge: 1px solid rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 10px 34px rgba(28, 38, 66, 0.10);
  --glass-shadow-sm: 0 4px 16px rgba(28, 38, 66, 0.08);
  --radius-glass: 16px;
}

/* Fondo fijo para que el degradado quede detrás del cristal al hacer scroll */
html, body {
  background: var(--bg) fixed !important;
  background-size: cover !important;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Cristal en las superficies estructurales comunes ──────────────────────
   Selectores que aparecen en una u otra página; los que no existan, no-op. */
header,
.card,
.modal,
.modal-overlay .modal,
.sidebar,
.chequeo-panel,
.player-bar,
#mp-bar,
.message.assistant,
.msg.assistant {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

header {
  border-bottom: var(--glass-edge) !important;
  box-shadow: var(--glass-shadow-sm);
}

/* Tarjetas y modales: cristal con borde luminoso y sombra suave */
.card,
.modal {
  border: var(--glass-edge) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: var(--radius-glass) !important;
}

/* Sidebar del Mentor (chat) como panel de cristal */
.sidebar {
  border-right: var(--glass-edge) !important;
}

/* Burbujas de chat */
.message.assistant, .msg.assistant,
.message.user, .msg.user {
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--glass-shadow-sm);
}

/* ── Controles: botones tipo "píldora de cristal" ─────────────────────────
   Cubre los nombres de botón usados en las páginas del Mentor y del EA. */
button,
.chequeo-btn,
.back-btn,
.view-btn,
.listen-btn,
.tab,
.btn,
.send-btn {
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.chequeo-btn,
.back-btn,
.view-btn,
.listen-btn,
.btn {
  background: rgba(255, 255, 255, 0.6) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--glass-shadow-sm);
  color: var(--text-muted);
}
.chequeo-btn:hover,
.back-btn:hover,
.view-btn:hover,
.listen-btn:hover,
.btn:hover {
  color: var(--accent);
  border-color: var(--accent) !important;
}
button:active,
.btn:active,
.chequeo-btn:active {
  transform: scale(0.98);
}

/* Inputs y áreas de escritura translúcidas */
input, textarea, select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* Overlay de modales: velo claro con desenfoque en vez de negro */
.modal-overlay {
  background: rgba(230, 235, 245, 0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Toast del EA como cristal */
#toast {
  background: rgba(255, 255, 255, 0.75) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-edge) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--text) !important;
}