/* PALETA DE COLORES (MODO CLARO POR DEFECTO) */
:root {
  --bg-body: #FAF7F2;       /* Crema lino (suave y orgánico) */
  --bg-card: #FFFFFF;
  --bg-alt: #EBE6DE;        /* Arena piedra para contraste */
  
  --text-main: #162C46;     /* Azul noche (más vivo que el negro) */
  --text-muted: #5C6D80;    /* Gris azulado */
  
  --accent: #2062BA;        /* Azul Cobalto */
  --accent-hover: #16498A;   /* Azul más denso */
  --accent-soft: #F0D062;    /* Dorado suave */
  --border: #D1D9E0;        /* Azul grisáceo muy claro */
}

/* AJUSTES PARA MODO OSCURO */
body.dark-mode {
  --bg-body: #0B1118;       /* Azul marino casi negro */
  --bg-card: #121A24;       /* Azul petróleo oscuro */
  --bg-alt: #1B2531;        /* Secciones en azul acero */
  
  --text-main: #F2F5F8;     /* Blanco azulado muy claro */
  --text-muted: #94A3B8;    /* Gris pizarra */
  
  --accent: #3B82F6;        /* Un azul más brillante para que no se pierda */
  --accent-hover: #60A5FA;
  --accent-soft: #F2BF18;
  --border: #2D3748;        /* Borde acero oscuro */
}

html[data-theme="light"] {
  --bg-body: #FAF7F2;
  --bg-card: #FFFFFF;
  --bg-alt: #EBE6DE;
  --text-main: #162C46;
  --text-muted: #5C6D80;
  --accent: #2062BA;
  --accent-hover: #16498A;
  --accent-soft: #F2BF18;
  --border: #D1D9E0;
}

html[data-theme="dark"] {
  --bg-body: #0B1118;
  --bg-card: #121A24;
  --bg-alt: #1B2531;
  --text-main: #F2F5F8;
  --text-muted: #94A3B8;
  --accent: #3B82F6;
  --accent-hover: #60A5FA;
  --border: #2D3748;
}

:root,
html[data-theme="light"] {
  --bg: var(--bg-body);
  --bg-soft: var(--bg-alt);
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: var(--bg-card);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --line: var(--border);
  --surface: rgba(235, 230, 222, 0.74);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --input-bg: rgba(255, 255, 255, 0.82);
  --navbar-bg: rgba(250, 247, 242, 0.88);
  --shadow: 0 18px 40px rgba(31, 29, 27, 0.08);
  --accent-2: #60A5FA;
  --accent-soft-rgb: 240, 208, 98;
  --accent-rgb: 32, 98, 186;
  --accent-hover-rgb: 22, 73, 138;
}

body.dark-mode,
html[data-theme="dark"] {
  --bg: var(--bg-body);
  --bg-soft: var(--bg-alt);
  --panel: rgba(18, 26, 36, 0.92);
  --panel-strong: var(--bg-card);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --line: var(--border);
  --surface: rgba(27, 37, 49, 0.78);
  --surface-strong: rgba(18, 26, 36, 0.96);
  --input-bg: rgba(27, 37, 49, 0.82);
  --navbar-bg: rgba(11, 17, 24, 0.88);
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  --accent-2: #60A5FA;
  --accent-soft-rgb: 240, 208, 98;
  --accent-rgb: 59, 130, 246;
  --accent-hover-rgb: 96, 165, 250;
}