/* =========================================================================
   Daviana Piva — Tema teal (identidad del logo)
   Modelo HÍBRIDO: shell teal profundo (sidebar/topbar/stage del login) +
   workspace claro para el contenido. El acento se recolorea por módulo
   dentro de la familia teal vía [data-module] (ver CLAUDE.md §6).
   ========================================================================= */

:root {
  /* ----- Workspace claro ------------------------------------------------ */
  --bg:          #eaf0f1;   /* fondo de página, casi blanco con matiz teal */
  --surface-1:   #ffffff;   /* tarjetas (card-d) */
  --surface-2:   #f2f6f7;   /* hover / elevado sutil */
  --surface-3:   #e7eef0;   /* thead de tablas, wells, rellenos */
  --border:      #d5dfe1;
  --border-soft: #e4ebec;

  --text:        #12262b;   /* texto principal, negro con matiz teal */
  --text-muted:  #566a6f;
  --text-faint:  #85989e;

  /* Acento de marca (workspace) */
  --accent:      #0e5664;   /* teal del logo */
  --accent-2:    #14707f;   /* teal más claro para gradientes/hover */
  --accent-soft: rgba(14, 86, 100, .10);   /* fondo teñido: filas hover, wash de card */
  --accent-line: rgba(14, 86, 100, .34);
  --accent-contrast: #ffffff;              /* texto sobre botones de acento */

  /* Semánticos afinados para fondo claro */
  --danger:  #c0392b;  --danger-soft:  rgba(192, 57, 43, .10);
  --success: #1f8a5b;  --success-soft: rgba(31, 138, 91, .12);
  --warning: #b8791a;  --warning-soft: rgba(184, 121, 26, .12);
  --info:    #2b6f8a;  --info-soft:    rgba(43, 111, 138, .12);

  /* ----- Shell teal profundo (sidebar / topbar / stage login) ---------- */
  --shell-bg:        #0b3f49;  /* base del sidebar (más profundo que el logo) */
  --shell-bg-2:      #0e5664;  /* teal del logo: topbar / elevado del shell */
  --shell-surface:   rgba(255, 255, 255, .06);
  --shell-border:    rgba(255, 255, 255, .12);
  --shell-text:      #eef5f6;
  --shell-muted:     #9fc0c6;  /* labels de sección e íconos apagados */
  --shell-active-bg: rgba(255, 255, 255, .12);  /* pill del ítem activo */
  --shell-accent:    #7fd0cf;  /* aqua brillante: barra de activo / focus en shell */

  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  16px;                             /* contenedores grandes (cards principales) */
  --shadow:     0 12px 32px -14px rgba(16, 42, 48, .22);
  --shadow-sm:  0 2px 8px rgba(16, 42, 48, .07);
  --shadow-md:  0 8px 22px -10px rgba(16, 42, 48, .15);   /* profundidad intermedia (hover de tarjetas) */
  --shadow-lift: 0 16px 34px -16px rgba(16, 42, 48, .26);  /* elevación de cards clickeables */
  --hairline:   rgba(14, 86, 100, .09);           /* divisor interior muy sutil (tablas) */

  /* Escala de espaciado: ritmo consistente en todo el sistema */
  --sp-1: .35rem;
  --sp-2: .6rem;
  --sp-3: .9rem;
  --sp-4: 1.2rem;
  --sp-5: 1.6rem;
  --sp-6: 2.2rem;

  --control-h: 40px;                              /* alto cómodo de inputs/botones */

  /* Movimiento: curvas y duraciones unificadas (premium, contenido) */
  --ease:       cubic-bezier(.4, 0, .2, 1);      /* entrada/salida natural */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);     /* salida suave, sin rebote */
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   320ms;

  /* Realce y profundidad premium */
  --glow-accent:  0 0 0 1px var(--accent-line), 0 12px 26px -12px var(--accent-soft);
  --surface-grad: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));

  --sidebar-w:  248px;
  --topbar-h:   60px;

  --font-ui:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head:  'Fraunces', 'Cormorant Garamond', Georgia, serif;
}

/* Acento por módulo: variaciones dentro de la familia teal. Todas legibles
   sobre blanco (top-border de cards, ícono del page-head, botones, fila hover).
   El shell NO se repinta: mantiene su teal estable (ver style.css). */
[data-module="agenda"]          { --accent: #1c6b7d; --accent-soft: rgba(28,107,125,.10);  --accent-line: rgba(28,107,125,.34); }  /* cian petróleo */
[data-module="pacientes"]       { --accent: #2f8577; --accent-soft: rgba(47,133,119,.10);  --accent-line: rgba(47,133,119,.34); }  /* verde azulado */
[data-module="historia"]        { --accent: #0e5664; --accent-soft: rgba(14,86,100,.10);   --accent-line: rgba(14,86,100,.34); }   /* petróleo (core clínico) */
[data-module="estudios"]        { --accent: #217888; --accent-soft: rgba(33,120,136,.10);  --accent-line: rgba(33,120,136,.34); }  /* cian */
[data-module="ortodoncia"]      { --accent: #2d6a86; --accent-soft: rgba(45,106,134,.10);  --accent-line: rgba(45,106,134,.34); }  /* azul petróleo */
[data-module="laboratorio"]     { --accent: #4a7a86; --accent-soft: rgba(74,122,134,.10);  --accent-line: rgba(74,122,134,.34); }  /* gris teal (banco de trabajo) */
[data-module="presupuestos"]    { --accent: #3f827a; --accent-soft: rgba(63,130,122,.10);  --accent-line: rgba(63,130,122,.34); }  /* teal verdoso */
[data-module="facturacion"],
[data-module="ventas"]          { --accent: #1c7a68; --accent-soft: rgba(28,122,104,.10);  --accent-line: rgba(28,122,104,.34); }  /* esmeralda petróleo */
[data-module="inventario"]      { --accent: #4d8a76; --accent-soft: rgba(77,138,118,.10);  --accent-line: rgba(77,138,118,.34); }  /* salvia teal */
[data-module="contabilidad"]    { --accent: #2b5f70; --accent-soft: rgba(43,95,112,.10);   --accent-line: rgba(43,95,112,.34); }   /* azul pizarra teal */
[data-module="tesoreria"]       { --accent: #2f8577; --accent-soft: rgba(47,133,119,.10);  --accent-line: rgba(47,133,119,.34); }  /* verde */
[data-module="reportes"]        { --accent: #376f88; --accent-soft: rgba(55,111,136,.10);  --accent-line: rgba(55,111,136,.34); }  /* azul acero teal */
[data-module="usuarios"]        { --accent: #3c7a72; --accent-soft: rgba(60,122,114,.10);  --accent-line: rgba(60,122,114,.34); }  /* verde grisáceo teal */
[data-module="configuraciones"] { --accent: #3f6b74; --accent-soft: rgba(63,107,116,.10);  --accent-line: rgba(63,107,116,.34); }  /* petróleo grisáceo */

/* =========================================================================
   DARK MODE — se activa con data-theme="dark" en <html> (switch en el topbar).
   Solo cambia el WORKSPACE (fondo/superficies/texto oscuros + teal más claro);
   el shell teal (sidebar/topbar) se mantiene, es la constante de marca.
   ========================================================================= */
:root[data-theme="dark"] {
  --bg:          #0c1417;   /* casi negro con matiz teal */
  --surface-1:   #121e22;   /* tarjetas */
  --surface-2:   #182930;   /* hover / elevado */
  --surface-3:   #1e333b;   /* thead / wells */
  --border:      #263b42;
  --border-soft: #1b2c32;

  --text:        #e6eef0;
  --text-muted:  #9fb4b9;
  --text-faint:  #6d8288;

  --accent:      #3aa7bd;   /* teal aclarado para leer sobre oscuro */
  --accent-2:    #4fbdd2;
  --accent-soft: rgba(58,167,189,.15);
  --accent-line: rgba(58,167,189,.40);
  --accent-contrast: #06222a;   /* texto oscuro sobre botón teal claro */

  --danger:  #e5786e;  --danger-soft:  rgba(229,120,110,.15);
  --success: #4cc088;  --success-soft: rgba(76,192,136,.15);
  --warning: #d9a94e;  --warning-soft: rgba(217,169,78,.15);
  --info:    #5aa7c8;  --info-soft:    rgba(90,167,200,.15);

  --shadow:      0 14px 34px -14px rgba(0,0,0,.62);
  --shadow-sm:   0 2px 10px rgba(0,0,0,.45);
  --shadow-md:   0 8px 24px -10px rgba(0,0,0,.55);
  --shadow-lift: 0 18px 36px -16px rgba(0,0,0,.65);
  --hairline:    rgba(255,255,255,.05);
  --surface-grad: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0));
}

/* Acentos por módulo en dark: misma familia teal pero aclarada para el fondo
   oscuro. Especificidad (html[data-theme] + body[data-module]) le gana al
   [data-module] claro; el shell no se toca (fija su --accent en .sidebar). */
:root[data-theme="dark"] [data-module="agenda"]          { --accent: #3d9fb5; --accent-soft: rgba(61,159,181,.16);  --accent-line: rgba(61,159,181,.40); }
:root[data-theme="dark"] [data-module="pacientes"]       { --accent: #45b39d; --accent-soft: rgba(69,179,157,.16);  --accent-line: rgba(69,179,157,.40); }
:root[data-theme="dark"] [data-module="historia"]        { --accent: #2f9fb3; --accent-soft: rgba(47,159,179,.16);  --accent-line: rgba(47,159,179,.40); }
:root[data-theme="dark"] [data-module="estudios"]        { --accent: #40a7ba; --accent-soft: rgba(64,167,186,.16);  --accent-line: rgba(64,167,186,.40); }
:root[data-theme="dark"] [data-module="ortodoncia"]      { --accent: #4f9fc4; --accent-soft: rgba(79,159,196,.16);  --accent-line: rgba(79,159,196,.40); }
:root[data-theme="dark"] [data-module="laboratorio"]     { --accent: #6aa3b0; --accent-soft: rgba(106,163,176,.16); --accent-line: rgba(106,163,176,.40); }
:root[data-theme="dark"] [data-module="presupuestos"]    { --accent: #55b0a4; --accent-soft: rgba(85,176,164,.16);  --accent-line: rgba(85,176,164,.40); }
:root[data-theme="dark"] [data-module="facturacion"],
:root[data-theme="dark"] [data-module="ventas"]          { --accent: #37b598; --accent-soft: rgba(55,181,152,.16);  --accent-line: rgba(55,181,152,.40); }
:root[data-theme="dark"] [data-module="inventario"]      { --accent: #63b89e; --accent-soft: rgba(99,184,158,.16);  --accent-line: rgba(99,184,158,.40); }
:root[data-theme="dark"] [data-module="contabilidad"]    { --accent: #4f9bb5; --accent-soft: rgba(79,155,181,.16);  --accent-line: rgba(79,155,181,.40); }
:root[data-theme="dark"] [data-module="tesoreria"]       { --accent: #45b39d; --accent-soft: rgba(69,179,157,.16);  --accent-line: rgba(69,179,157,.40); }
:root[data-theme="dark"] [data-module="reportes"]        { --accent: #55a3c0; --accent-soft: rgba(85,163,192,.16);  --accent-line: rgba(85,163,192,.40); }
:root[data-theme="dark"] [data-module="usuarios"]        { --accent: #52ae9e; --accent-soft: rgba(82,174,158,.16);  --accent-line: rgba(82,174,158,.40); }
:root[data-theme="dark"] [data-module="configuraciones"] { --accent: #559aa8; --accent-soft: rgba(85,154,168,.16);  --accent-line: rgba(85,154,168,.40); }