/* =====================================================================
   Selección de vista — los tres modos del plan (§10 a §14).

   CÓMO FUNCIONA. Todo el color de la aplicación sale de los tokens de este
   archivo. Cada vista redefine SOLO esos tokens; ni styles.css ni app.css
   saben qué vista está puesta, y por eso las tres tienen exactamente las
   mismas funcionalidades y no hay una hoja de estilos por tema que se vaya
   quedando atrás de las otras.

   POR QUÉ HAY MÁS TOKENS QUE EN EL PLAN. El plan define catorce. Con esos
   catorce la vista oscura queda a medias: la aplicación traía colores fijos
   claros para las filas de tabla, los chips de canal, la barra de SLA, el
   mensaje automático y la nota interna. Sobre fondo oscuro eso se ve como
   parches blancos y, lo que importa más, los estados del SLA dejan de
   leerse. Uno de los criterios de aceptación es justamente que los estados
   mantengan significado y legibilidad en las tres vistas, así que esos
   colores también son tokens.

   El primer bloque es la vista por defecto (Soft Corporate), para que la
   aplicación tenga color aunque el atributo data-theme no llegue a ponerse.
   ===================================================================== */

:root,
[data-theme="soft-corporate"] {
  /* --- los del plan */
  --bg-page: #F5F7F8;
  --bg-sidebar: #123040;
  --riel: #0B2130;             /* riel de módulos: un escalón más oscuro que el menú */
  --tab-petroleo: #0E8C7F;
  --tab-azul:     #3B82C4;
  --tab-violeta:  #8A63D2;
  --tab-ambar:    #C0762A;

  --etq-rojo:     #E05555;
  --etq-azul:     #3B82C4;
  --etq-verde:    #3FA66B;
  --etq-ambar:    #E9A23B;
  --etq-violeta:  #8A63D2;
  --etq-gris:     #90A4B4;
  --tab-verde:    #2F8F5B;
  --tab-rojo:     #C0504A;
  --tab-rosa:     #B5487E;
  --tab-turquesa: #178A8A;
  --tab-oliva:    #6E8B2F;

  --av-0: #177E89;
  --av-1: #3B82C4;
  --av-2: #8A63D2;
  --av-3: #C0762A;
  --av-4: #2F8F5B;
  --av-5: #B5487E;  --tab-grafito:  #55636E;  --tab-marino:   #2E5E8C;
  --bg-sidebar-active: #1D6F78;
  --bg-surface: #FFFFFF;

  --text-primary: #22313F;
  --text-secondary: #5F7281;

  --border-color: #D9E1E5;

  --primary: #177E89;
  --primary-hover: #136A73;

  --status-info: #4C8DDA;
  --status-success: #3FA66B;
  --status-warning: #D9A441;
  --status-danger: #D35D5D;

  /* --- los que hacen falta para que las tres vistas se vean bien */
  --primary-soft: #E3F1F2;
  --primary-soft-border: #C4E0E2;

  --bg-soft: #EEF1F4;            /* rellenos suaves: miniaturas, chips neutros */
  --bg-row-hover: #FAFBFC;
  --bar-track: #E8ECF0;          /* fondo de la barra de SLA */
  --line-soft: #EEF1F4;          /* separadores de tabla, más tenues que el borde */

  --sidebar-text: #C9D3DD;
  --sidebar-muted: #93A7BC;
  --sidebar-hover: #1C4A5E;
  --sidebar-border: #2A5568;

  /* Chips de canal */
  --chip-bg: #EEF1F4;            --chip-fg: #34414E;
  --chip-mail-bg: #E6EEF8;       --chip-mail-fg: #264D7A;
  --chip-wa-bg: #E3F4EA;         --chip-wa-fg: #1F6B41;
  --chip-chat-bg: #ECE9FA;       --chip-chat-fg: #4A3B9E;
  --chip-tel-bg: #F7EEDD;        --chip-tel-fg: #7A5410;
  --chip-rs-bg: #F8E6EC;         --chip-rs-fg: #8A2C4B;

  /* Estados del ticket */
  --st-nuevo: #264D7A;
  --st-curso: #4A3B9E;
  --st-espera: #7A5410;

  /* Mensajes del hilo */
  --msg-auto-bg: #FFF9E8;        --msg-auto-bd: #F0E0B0;
  --msg-note-bg: #F5F3FD;        --msg-note-bd: #DCD6F5;

  --toggle-off: #C5CDD5;

  /* Formularios */
  --input-bg: #FFFFFF;
  --input-border: #CBD2DA;
  --focus: #2F6FDB;
  --enlace: #2F6FDB;

  /* Avisos */
  --aviso-error-bg: #FDECEA;     --aviso-error-bd: #F3B9B3;  --aviso-error-fg: #8A1C12;
  --aviso-info-bg: #E8F1FB;      --aviso-info-bd: #B9D3F0;   --aviso-info-fg: #17416F;
  --banner-bg: #FFF4E0;          --banner-bd: #F0D19A;       --banner-fg: #6B4405;
  --nota-bg: #FFFBE9;            --nota-bd: #D0A32A;
  --nota-chip-bg: #F3E2AB;       --nota-chip-fg: #6B4D05;

  /* -------------------------------------------------------------------
     Nombres antiguos. La aplicación se escribió con --paper, --surface,
     --petrol y compañía; en vez de cambiarlos en cien sitios, se derivan
     aquí de los tokens. Se resuelven en el momento de usarse, así que
     siguen al tema que esté puesto.
     ------------------------------------------------------------------- */
  --paper: var(--bg-page);
  --surface: var(--bg-surface);
  --side: var(--bg-sidebar);
  --side2: var(--sidebar-hover);
  --ink: var(--bg-sidebar);
  --ink2: var(--sidebar-hover);
  --line: var(--border-color);
  --muted: var(--text-secondary);
  --txt: var(--text-primary);
  --petrol: var(--primary);
  --petrol-soft: var(--primary-soft);
  --ok: var(--status-success);
  --warn: var(--status-warning);
  --late: var(--status-danger);
}

/* =====================================================================
   Light Calm — más clara y con menos saturación, para jornadas largas.
   ===================================================================== */
[data-theme="light-calm"] {
  --bg-page: #F7F8FA;
  --bg-sidebar: #243746;
  --riel: #1A2833;             /* riel de módulos: un escalón más oscuro que el menú */
  --tab-petroleo: #0E8C7F;
  --tab-azul:     #3B82C4;
  --tab-violeta:  #8A63D2;
  --tab-ambar:    #C0762A;

  --etq-rojo:     #E05555;
  --etq-azul:     #3B82C4;
  --etq-verde:    #3FA66B;
  --etq-ambar:    #E9A23B;
  --etq-violeta:  #8A63D2;
  --etq-gris:     #90A4B4;
  --tab-verde:    #2F8F5B;
  --tab-rojo:     #C0504A;
  --tab-rosa:     #B5487E;
  --tab-turquesa: #178A8A;
  --tab-oliva:    #6E8B2F;

  --av-0: #177E89;
  --av-1: #3B82C4;
  --av-2: #8A63D2;
  --av-3: #C0762A;
  --av-4: #2F8F5B;
  --av-5: #B5487E;  --tab-grafito:  #55636E;  --tab-marino:   #2E5E8C;
  --bg-sidebar-active: #2A8C82;
  --bg-surface: #FFFFFF;

  --text-primary: #24313A;
  --text-secondary: #6A7A86;

  --border-color: #E3E8ED;

  --primary: #2E8B85;
  --primary-hover: #26756F;

  --status-info: #6CA6DC;
  --status-success: #59A96A;
  --status-warning: #D4A64A;
  --status-danger: #CC6B5A;

  --primary-soft: #E6F2F1;
  --primary-soft-border: #C9E2E0;

  --bg-soft: #F0F3F6;
  --bg-row-hover: #FAFBFC;
  --bar-track: #E8ECF0;
  --line-soft: #F0F3F6;

  --sidebar-text: #CFD9E1;
  --sidebar-muted: #9AACBA;
  --sidebar-hover: #32485A;
  --sidebar-border: #3C566B;

  --chip-bg: #F0F3F6;            --chip-fg: #3A4752;
  --chip-mail-bg: #E9F0F8;       --chip-mail-fg: #2C5480;
  --chip-wa-bg: #E6F4EC;         --chip-wa-fg: #246B45;
  --chip-chat-bg: #EEEBF9;       --chip-chat-fg: #4C3F9C;
  --chip-tel-bg: #F7F0E2;        --chip-tel-fg: #7A5A1C;
  --chip-rs-bg: #F8E9ED;         --chip-rs-fg: #8A3550;

  --st-nuevo: #2C5480;
  --st-curso: #4C3F9C;
  --st-espera: #7A5A1C;

  --msg-auto-bg: #FDF9EE;        --msg-auto-bd: #EFE2BF;
  --msg-note-bg: #F5F4FC;        --msg-note-bd: #DEDAF2;

  --toggle-off: #CBD3DA;

  --input-bg: #FFFFFF;
  --input-border: #D2D9E0;
  --focus: #3E7BC9;
  --enlace: #2E6FB8;

  --aviso-error-bg: #FCEEEC;     --aviso-error-bd: #F0C2BC;  --aviso-error-fg: #8A2418;
  --aviso-info-bg: #EBF2FA;      --aviso-info-bd: #C4D8EE;   --aviso-info-fg: #1C4470;
  --banner-bg: #FDF5E6;          --banner-bd: #EDD5A6;       --banner-fg: #6E4A09;
  --nota-bg: #FDFAF0;            --nota-bd: #D4AC46;
  --nota-chip-bg: #F2E5BD;       --nota-chip-fg: #6B5210;
}

/* =====================================================================
   Dark Relaxed — oscura y de contraste controlado. NO es la clara
   invertida: los chips y los avisos llevan fondo oscuro y texto claro,
   porque un chip claro sobre una tabla oscura es un parche que deslumbra.
   Los cuatro colores de estado se aclaran respecto de la vista clara para
   que sigan leyéndose sobre el fondo oscuro, que es lo que pide el criterio
   de aceptación del SLA.
   ===================================================================== */
[data-theme="dark-relaxed"] {
  --bg-page: #162434;
  --bg-sidebar: #0F1B2A;
  --riel: #08111C;             /* riel de módulos: un escalón más oscuro que el menú */
  --tab-petroleo: #0E8C7F;
  --tab-azul:     #3B82C4;
  --tab-violeta:  #8A63D2;
  --tab-ambar:    #C0762A;

  --etq-rojo:     #E05555;
  --etq-azul:     #3B82C4;
  --etq-verde:    #3FA66B;
  --etq-ambar:    #E9A23B;
  --etq-violeta:  #8A63D2;
  --etq-gris:     #90A4B4;
  --tab-verde:    #2F8F5B;
  --tab-rojo:     #C0504A;
  --tab-rosa:     #B5487E;
  --tab-turquesa: #178A8A;
  --tab-oliva:    #6E8B2F;

  --av-0: #177E89;
  --av-1: #3B82C4;
  --av-2: #8A63D2;
  --av-3: #C0762A;
  --av-4: #2F8F5B;
  --av-5: #B5487E;  --tab-grafito:  #55636E;  --tab-marino:   #2E5E8C;
  --bg-sidebar-active: #23384B;
  --bg-surface: #1D2C3C;

  --text-primary: #EAF0F4;
  --text-secondary: #AAB9C4;

  --border-color: #31485B;

  --primary: #1FA3A3;
  --primary-hover: #178585;

  --status-info: #63A4E9;
  --status-success: #4FB67A;
  --status-warning: #D6A243;
  --status-danger: #D96C6C;

  --primary-soft: #15343B;
  --primary-soft-border: #1E4A52;

  --bg-soft: #243444;
  --bg-row-hover: #22323F;
  --bar-track: #2A3D4E;
  --line-soft: #263A4B;

  --sidebar-text: #C3D0DB;
  --sidebar-muted: #8FA2B2;
  --sidebar-hover: #1B2C3E;
  --sidebar-border: #2B4055;

  --chip-bg: #2A3B4C;            --chip-fg: #C3D0DB;
  --chip-mail-bg: #1F3550;       --chip-mail-fg: #A8C6EA;
  --chip-wa-bg: #1B3D2C;         --chip-wa-fg: #93D3AC;
  --chip-chat-bg: #2E2A4E;       --chip-chat-fg: #B9B1EC;
  --chip-tel-bg: #3D3220;        --chip-tel-fg: #E0C288;
  --chip-rs-bg: #3D2230;         --chip-rs-fg: #E9A6BC;

  --st-nuevo: #8FB8E8;
  --st-curso: #B0A6EE;
  --st-espera: #DCBE7C;

  --msg-auto-bg: #2E2A1C;        --msg-auto-bd: #4A4128;
  --msg-note-bg: #262340;        --msg-note-bd: #3B3660;

  --toggle-off: #3C4F60;

  --input-bg: #16222E;
  --input-border: #3A5164;
  --focus: #63A4E9;
  --enlace: #7FB6F0;

  --aviso-error-bg: #3A2020;     --aviso-error-bd: #6B3A38;  --aviso-error-fg: #F3B7B2;
  --aviso-info-bg: #1B2E42;      --aviso-info-bd: #33536F;   --aviso-info-fg: #B6D3F0;
  --banner-bg: #33290F;          --banner-bd: #5E4C20;       --banner-fg: #EBD79C;
  --nota-bg: #2B2612;            --nota-bd: #8A7327;
  --nota-chip-bg: #4A3F18;       --nota-chip-fg: #EBD79C;
}