/* ════════════════════════════════════════════════════════════════════
   CASA · el CRM con el estilo de la página (banca privada antigua)
   Papel marfil y tinta negra cálida en vez de blanco y negro puros,
   títulos grandes con serifa (Cormorant Garamond), esquinas más rectas
   y un verde inglés oscuro solo para lo que es de WhatsApp.
   Va después de diseno.css y movil.css. No toca la lógica: cambia las
   variables de color que ya usan todas las pantallas.
   ════════════════════════════════════════════════════════════════════ */

/* ── Paleta: los grises pasan a ser tonos de papel y tinta ── */
:root, :root[data-theme="dark"] {
  --slate-50:  250 247 240;
  --slate-100: 242 237 227;
  --slate-200: 226 219 205;
  --slate-300: 205 197 181;
  --slate-400: 175 167 150;
  --slate-500: 145 137 121;
  --slate-600: 112 105 92;
  --slate-700: 56 52 44;
  --slate-800: 40 37 31;
  --slate-900: 25 23 19;      /* tarjetas */
  --slate-950: 15 14 11;      /* fondo */
  --wa: 111 160 130;          /* verde inglés, más claro para leerse sobre tinta */
}
:root[data-theme="light"] {
  --slate-950: 241 236 226;   /* fondo: papel marfil */
  --slate-900: 249 246 240;   /* tarjetas */
  --slate-800: 236 230 218;   /* superficies secundarias e inputs */
  --slate-700: 222 214 199;   /* bordes */
  --slate-600: 167 159 143;   /* placeholders */
  --slate-500: 120 113 99;    /* texto apagado */
  --slate-400: 90 84 72;      /* texto secundario */
  --slate-300: 70 65 55;      /* texto de cuerpo */
  --slate-200: 43 40 33;      /* texto fuerte */
  --slate-100: 23 21 15;      /* títulos: tinta */
  --slate-50:  12 11 8;
  --wa: 47 90 68;             /* verde inglés oscuro */
}
:root {
  --tinta: 23 21 15;          /* la barra lateral y los botones */
  --lavanda: 232 224 208;     /* el círculo del ítem activo */
  --acento: 179 169 146;      /* peltre: indicador y brillos */
  --sombra-tarjeta: 0 1px 2px rgba(23,21,15,.04), 0 14px 34px -20px rgba(23,21,15,.18);
}

/* Papel: un grano muy suave en el tema claro */
:root[data-theme="light"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Títulos con serifa (solo los grandes: los chicos siguen en la letra de siempre) ── */
:root h1,
:root h2:is(.text-xl, .text-lg, .text-2xl, .text-3xl, [class*="text-[17px]"], [class*="text-[2"], [class*="text-[3"]) {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0;
}
:root h2.text-xl { font-size: 1.6rem; line-height: 1.15; }
:root h2.text-lg { font-size: 1.4rem; line-height: 1.2; }
:root h2[class*="text-[17px]"] { font-size: 21px; }
:root h2[class*="text-[22px]"] { font-size: 27px; }
:root h2[class*="text-[24px]"] { font-size: 29px; }

/* ── Esquinas más rectas, como papelería fina ── */
:root .rounded-2xl { border-radius: .875rem; }
:root .rounded-xl  { border-radius: .55rem; }

/* La marca de la barra lateral en serifa */
:root #sidebar .font-bold.tracking-tight { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 600; letter-spacing: .01em; font-size: 1.2em; }

/* ── Señales: verde inglés y bordó (en vez de verde y rojo vivos) ── */
.hoy-btn-wa { background: rgb(var(--wa)); border-color: rgb(var(--wa)); color: rgb(var(--slate-950)); }
.hoy-btn-wa:hover { background: #264A38; border-color: #264A38; color: #F9F6F0; }
.hoy-verde { color: #2F5A44; } .hoy-rojo { color: #7A2E28; }
:root[data-theme="dark"] .hoy-verde { color: #9DBFA8; } :root[data-theme="dark"] .hoy-rojo { color: #C98D84; }
:root[data-theme="light"] .text-red-300     { color: #7A2E28; }
:root[data-theme="light"] .text-rose-300    { color: #7A2E28; }
:root[data-theme="light"] .text-emerald-300 { color: #2F5A44; }
.seg-chip-vio   { background: rgb(47 90 68 / .1);  color: #2F5A44; border-color: rgb(47 90 68 / .25); }
.seg-chip-ahora { background: rgb(47 90 68 / .16); color: #264A38; border-color: rgb(47 90 68 / .4); }
.seg-chip-rojo  { background: rgb(122 46 40 / .1); color: #7A2E28; border-color: rgb(122 46 40 / .28); }
.hoy-naranja { color: #8A5A2B; } .hoy-ambar { color: #8A6A2B; }

/* ── Pantalla de ingreso ── */
:root #authGate h1 { font-size: 34px; font-weight: 500; }
:root #authGate img { filter: none !important; }
:root #authGate .rounded-2xl { border-radius: 6px; }
:root #authGate .rounded-xl { border-radius: 3px; }
:root #authGate button[type="submit"] { border-radius: 3px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
:root #authGate .blur-\[120px\] { display: none; }
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: rgb(var(--slate-600)); }
:root #authGate .w-16.h-16 { background: rgb(var(--tinta)); border-color: transparent; }

/* ════════════════════════════════════════════════════════════
   BARRA LATERAL Y ENCABEZADO EN SINTONÍA
   La barra era una píldora con círculo blanco y brillo violeta (el
   diseño anterior). Ahora: tinta cálida, esquinas casi rectas, la
   sección activa con fondo marfil suave y un filete peltre al costado.
   ════════════════════════════════════════════════════════════ */
#sidebar {
  --slate-50: 250 247 240; --slate-100: 242 237 227; --slate-200: 226 219 205;
  --slate-300: 205 197 181; --slate-400: 168 160 144; --slate-500: 138 130 114;
  --slate-600: 105 98 86;   --slate-700: 66 61 52;    --slate-800: 40 37 31;
  --slate-900: var(--tinta); --slate-950: 15 14 11;
}
@media (min-width: 1024px) {
  :root #sidebar { border-radius: 12px; box-shadow: 0 0 0 1px rgba(237,230,216,.06), var(--sombra-flota); }
}
@media (max-width: 1023.98px) {
  :root #sidebar { border-radius: 0 12px 12px 0; }
}
:root #sidebar > div:first-child > div:first-child img { filter: none; }
:root #sidebar > div:nth-child(2) { background: rgba(237,230,216,.04); }
:root #sidebar .nav-item { border-radius: 6px; color: rgb(168 160 144); }
:root #sidebar .nav-item:not(.glow-blue):hover { background: rgba(237,230,216,.06); color: rgb(242 237 227); }
:root #sidebar .nav-item.glow-blue { background: rgba(237,230,216,.11); color: rgb(250 247 240); font-weight: 600; }
:root #sidebar .nav-item.glow-blue::before { left: -9px; width: 2px; height: 22px; margin-top: -11px; border-radius: 0; background: rgb(var(--acento)); box-shadow: none; }
:root #sidebar .nav-item.glow-blue > span[id^="cnt"] { background: rgba(237,230,216,.14); color: rgb(250 247 240); }
:root body.sb-min #sidebar .nav-item { border-radius: 6px; }
:root body.sb-min #sidebar .nav-item.glow-blue::before { left: -16px; }
:root body.sb-min #sidebar nav > p { background: rgba(237,230,216,.08); }

/* Encabezado: sin píldoras */
:root #appMain > header .rounded-xl,
:root #appMain > header .rounded-lg { border-radius: 6px; }
:root #globalSearch { border-radius: 6px; }
:root #appMain > header #notifPanel { border-radius: 8px; }
#navTip { border-radius: 4px; }
:root[data-theme="dark"] #navTip { background: rgb(242 237 227); }

/* Tarjetas grandes y botones del saludo: menos curva, como el resto */
:root .in-hero, :root .rs-hero, :root .hoy-card { border-radius: 12px; }
:root .in-hero button { border-radius: 4px; }

/* ── Celular: pestañas de abajo sin cápsula redonda ── */
@media (max-width: 1023.98px) {
  #tabBar button .tab-ico { border-radius: 6px; }
  :root[data-theme="light"] #tabBar button.on .tab-ico { background: rgb(var(--tinta)); color: rgb(250 247 240); }
  :root[data-theme="dark"] #tabBar button.on .tab-ico { background: rgb(237 230 216 / .14); color: rgb(250 247 240); }
  .mas-fila .mas-ico { border-radius: 6px; }
}

/* Burbuja del cliente en el chat: papel, no blanco puro */
:root[data-theme="light"] .chat-bg .bg-slate-800\/90 { background-color: #FBF9F4; }

/* Menú "Más" del celular: misma curva que el resto */
@media (max-width: 1023.98px) { .mas-lista { border-radius: 10px; } #masHoja { border-radius: 14px 14px 0 0; } .mas-yo .w-8 { border-radius: 8px; } }