/* PRUEBA: cada sección con el color del logo de doScene. SOLO EN MODO CLARO (en oscuro la app se ve como siempre),
   salvo el título de cada sección (color, icono y tipografía), que va en los dos modos.
   - Contactos (programadores y compañías): verde azulado (#00a79d)
   - Espectáculos (programadores) y Mis espectáculos (compañías): fucsia (#ec008c)
   - Programaciones (programadores) y Actuaciones (compañías): amarillo (#ffb500)
   Todas las reglas van con :root:not([data-theme="dark"]). Para quitarlo basta con BORRAR este archivo:
   index.php solo lo enlaza si existe, y todo vuelve al azul de siempre.
   (Desde la 3.0.0 también lleva el menú lateral oscuro, al final: borrar el archivo lo quitaría con lo demás.) */

/* ---------- Verde azulado: Contactos ---------- */
:root:not([data-theme="dark"]) body.page-contactos {
  --accent: #00897f;
  --accent-hover: #006f67;
  --bg: #eef5f4;
  --surface-2: #f1f8f7;
  --row-hover: #e3f4f2;
  --border: #d3e0de;
}

/* Contabilidad: el verde agua solo en el acento (pestañas, botones, número de la factura…), sin teñir los fondos */
:root:not([data-theme="dark"]) body.page-contabilidad {
  --accent: #00897f;
  --accent-hover: #006f67;
  --row-hover: #e3f4f2;
}

/* ---------- Fucsia: Espectáculos, Mis espectáculos y Artistas (representantes) ---------- */
:root:not([data-theme="dark"]) :is(body.page-espectaculos, body.page-mis-espectaculos, body.page-artistas) {
  --accent: #d6007f;
  --accent-hover: #b0006a;
  --bg: #f8eff4;
  --surface-2: #fcf3f8;
  --row-hover: #fce6f2;
  --border: #e6d6df;
}

/* ---------- Amarillo: Programaciones y Actuaciones ----------
   El amarillo del logo sobre blanco casi no se lee como texto: --accent (textos, bordes, enlaces) es un
   ocre más oscuro, y los botones y pestañas rellenos usan el amarillo del logo con texto oscuro. */
:root:not([data-theme="dark"]) :is(body.page-programaciones, body.page-actuaciones) {
  --accent: #a87400;
  --accent-hover: #8a5f00;
  --amarillo: #ffb500;
  --amarillo-hover: #f0a800;
  --bg: #f8f4e9;
  --surface-2: #fdf8eb;
  --row-hover: #fff3d4;
  --border: #e5ddc8;
}
:root:not([data-theme="dark"]) :is(body.page-programaciones, body.page-actuaciones) :is(.btn.primary, .sidebar-link.active, .vista-btn.active, .bell-notas-save, .bell-add-btn:hover) { background: var(--amarillo); border-color: var(--amarillo); color: #1f2430; }
:root:not([data-theme="dark"]) :is(body.page-programaciones, body.page-actuaciones) .btn.primary:hover { background: var(--amarillo-hover); border-color: var(--amarillo-hover); color: #1f2430; }

/* ---------- Fondo blanco en la página, la ficha CRM y la cabecera de la lista ---------- */
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones, body.page-mis-espectaculos, body.page-actuaciones, body.page-artistas) :is(.app-main, .crm-ficha, .crm-total) { background: #fff; }
:root:not([data-theme="dark"]) body.page-artistas .crm-ficha .ficha-bloque { background: #fff; }

/* ---------- Bloques de la ficha CRM: fondo blanco, solo el borde con el color de la sección ---------- */
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones, body.page-mis-espectaculos) .crm-ficha .ficha-bloque { background: #fff; }
/* Igual las barras de selección («0 seleccionados…»): fondo blanco, conservan su borde */
:root:not([data-theme="dark"]) body.page-contactos .toolbar,
:root:not([data-theme="dark"]) :is(body.page-mis-espectaculos, body.page-actuaciones) .sel-bar { background: #fff; }

/* ---------- Pestañas de fichas: las inactivas con el fondo de las cabeceras; la activa en blanco con la raya de color ---------- */
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones) .act-tab { background: var(--surface-2); }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones) .act-tab .act-tab-count { background: #fff; }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones) .act-tab.active { background: #fff; box-shadow: inset 0 3px 0 var(--accent); }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones) .act-tab.active .act-tab-count { background: var(--surface-2); }

/* En la vista Tabla, al revés: las inactivas en blanco y la activa con el fondo de las cabeceras (enlaza con la tabla) */
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones):has(.vista-btn.active[data-vista="tabla"]) .act-tab { background: #fff; }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones):has(.vista-btn.active[data-vista="tabla"]) .act-tab .act-tab-count { background: var(--surface-2); }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones):has(.vista-btn.active[data-vista="tabla"]) .act-tab.active { background: var(--surface-2); }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones):has(.vista-btn.active[data-vista="tabla"]) .act-tab.active .act-tab-count { background: #fff; }

/* ---------- Detalles con el azul escrito a mano ---------- */
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones) .col-resize-handle:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-espectaculos, body.page-programaciones) .modal-edit-btn:hover { background: var(--row-hover); }
:root:not([data-theme="dark"]) :is(body.page-mis-espectaculos, body.page-actuaciones) :is(.gira-switch input:focus-visible + .gira-track, .field input:focus, .field select:focus, .field textarea:focus) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- Cabeceras de sección: letra de la portada (Anton) + icono en un cuadrado del color de la sección ----------
   Los tres colores se repiten en el orden del menú: verde, fucsia, amarillo.
     Verde:    Contactos, Calendario, Contabilidad
     Fucsia:   Espectáculos / Mis espectáculos, Propuestas, Mensajes
     Amarillo: Programaciones / Actuaciones, Estadísticas, Soporte
   (Mi perfil y Gestionar usuarios, en gris oscuro). En las secciones que no tenían color propio solo cambian
   la cabecera y el botón activo del menú; el resto de la página sigue igual.
   La fuente se sirve desde el propio servidor (fonts/anton-latin.woff2, licencia OFL), sin llamar a Google. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-latin.woff2') format('woff2'); }

/* Color (--sec), color del icono (--sec-txt) e icono (--sec-icono) de cada sección.
   El título (color, icono y tipografía) va en los DOS modos, claro y oscuro (desde la 2.9.5); el resto del archivo,
   solo en claro. */
:root :is(body.page-contactos, body.page-calendario, body.page-contabilidad) { --sec: #00897f; --sec-txt: #fff; }
:root :is(body.page-espectaculos, body.page-mis-espectaculos, body.page-artistas, body.page-propuestas, body.page-mensajes) { --sec: #d6007f; --sec-txt: #fff; }
:root :is(body.page-programaciones, body.page-actuaciones, body.page-estadisticas, body.page-soporte) { --sec: #ffb500; --sec-txt: #1f2430; }
:root :is(body.page-perfil, body.page-usuarios) { --sec: #1f2430; --sec-txt: #fff; }
:root[data-theme="dark"] :is(body.page-perfil, body.page-usuarios) { --sec: #4a5368; } /* sobre fondo oscuro, un gris que se vea */
:root body.page-contactos { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0M16 5.3a3 3 0 0 1 0 5.6M18 19a5 5 0 0 0-3-4.6'/%3E%3C/svg%3E"); }
:root body.page-calendario { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E"); }
:root body.page-contabilidad { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 8.5a4.5 4.5 0 1 0 0 7M8.5 11h5M8.5 13.5h4'/%3E%3C/svg%3E"); }
:root body.page-espectaculos { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1.3a1.6 1.6 0 0 0 0 3.2V15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1.5a1.6 1.6 0 0 0 0-3.2V9Z'/%3E%3Cpath d='M9.5 7.2v9.6' stroke-width='1.4' stroke-dasharray='2 2.4'/%3E%3C/svg%3E"); }
:root body.page-mensajes { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M7.5 9.5h9M7.5 13h6'/%3E%3C/svg%3E"); }
:root body.page-programaciones { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2430' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1V5a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
:root body.page-estadisticas { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2430' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7M3 20h18'/%3E%3C/svg%3E"); }
:root body.page-perfil { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E"); }
:root body.page-usuarios { --sec-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='2.8'/%3E%3Cpath d='M3.5 19c0-2.9 2.5-5 5.5-5s5.5 2.1 5.5 5'/%3E%3Ccircle cx='17' cy='8.5' r='2.2'/%3E%3Cpath d='M15.5 14.2c2.3.4 3.9 2.1 3.9 4.6'/%3E%3C/svg%3E"); }

/* El título. (#detail-title es el nombre de una programación abierta: no es cabecera de sección.) */
:root :is(.header-row > div > h1:not(#detail-title), .wrap > h1) {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text);
}
/* El icono: un ::before con el icono de la sección o, donde el título ya traía su propio SVG, ese mismo SVG */
:root :is(.header-row > div > h1:not(#detail-title), .wrap > h1):not(:has(svg))::before {
  content: ""; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--sec, var(--accent)) var(--sec-icono, none) center / 19px no-repeat;
  box-shadow: 0 4px 10px -5px color-mix(in srgb, var(--sec, var(--accent)) 70%, transparent);
}
:root :is(.header-row > div > h1:not(#detail-title), .wrap > h1) > svg {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 6.5px; box-sizing: border-box; border-radius: 9px;
  background: var(--sec, var(--accent)); color: var(--sec-txt, #fff);
  box-shadow: 0 4px 10px -5px color-mix(in srgb, var(--sec, var(--accent)) 70%, transparent);
}
/* El subtítulo empieza donde el texto del título (icono 32 px + hueco 10 px) */
:root :is(.header-row > div > h1:not(#detail-title), .wrap > h1) + .subtitle { padding-left: 42px; }
@media (max-width: 600px) {
  :root :is(.header-row > div > h1:not(#detail-title), .wrap > h1) { font-size: 1.3rem; }
  :root :is(.header-row > div > h1:not(#detail-title), .wrap > h1) + .subtitle { padding-left: 38px; }
  :root :is(.header-row > div > h1:not(#detail-title), .wrap > h1):not(:has(svg))::before { width: 28px; height: 28px; border-radius: 8px; background-size: 17px; }
  :root :is(.header-row > div > h1:not(#detail-title), .wrap > h1) > svg { width: 28px; height: 28px; padding: 5.5px; border-radius: 8px; }
}

/* Calendario: crear un evento (botón, formulario, Guardar y «Varios días") en el verde de la sección.
   (En modo oscuro siguen en el morado de los eventos, definido en shared.css con --evento.) */
:root:not([data-theme="dark"]) body.page-calendario { --evento: #00897f; --evento-hover: #006f67; }
:root:not([data-theme="dark"]) body.page-calendario .cal-range-hint { background: #e3f4f2; }
:root:not([data-theme="dark"]) body.page-calendario .cal-day.range-preview { background: #e3f4f2; }

/* Detalles: el botón activo del menú y el botón principal de la cabecera, en el color de la sección */
:root:not([data-theme="dark"]) :is(body.page-calendario, body.page-contabilidad, body.page-propuestas, body.page-mensajes, body.page-estadisticas, body.page-soporte) .header-row .btn.primary { background: var(--sec); border-color: var(--sec); color: var(--sec-txt); }
:root:not([data-theme="dark"]) :is(body.page-calendario, body.page-contabilidad, body.page-propuestas, body.page-mensajes, body.page-estadisticas, body.page-soporte) .header-row .btn.primary:hover { filter: brightness(0.92); }
:root:not([data-theme="dark"]) :is(body.page-calendario, body.page-contabilidad, body.page-propuestas, body.page-mensajes, body.page-estadisticas, body.page-soporte, body.page-perfil, body.page-usuarios) .sidebar-link.active { background: var(--sec); color: var(--sec-txt); }

/* ---------- Inicio: botón del menú en amarillo; enlaces y detalles de la página en fucsia ---------- */
:root body.page-inicio { --sec: #ffb500; --sec-txt: #1f2430; --accent: #d6007f; --accent-hover: #b0006a; }

/* ---------- Menú oscuro («la mancha negra») en todas las secciones y en los dos modos (desde la 3.0.0) ----------
   La barra lateral (y, en tablet y móvil, la barra de arriba y el menú desplegable) van siempre en negro, con el
   logo en blanco. Los paneles que salen de ella (perfil, campana, mensajes, notas) siguen
   con los colores de la página. El botón activo, en el color de la sección. */
:root { --menu-bg: #454546; --menu-txt: #dcdde1; --menu-hover: rgba(255, 255, 255, 0.1); --menu-borde: rgba(255, 255, 255, 0.18); }
.app-sidebar {
  background: var(--menu-bg);
  border-right: 0;
  border-radius: 0 0 22px 0;
}
:root .app-sidebar .sidebar-logo-img.sidebar-logo-light,
:root .app-topbar .sidebar-logo-img.sidebar-logo-light { display: none; }
:root .app-sidebar .sidebar-logo-img.sidebar-logo-dark,
:root .app-topbar .sidebar-logo-img.sidebar-logo-dark { display: block; }
.app-sidebar .sidebar-toolbar { border-bottom-color: var(--menu-borde); }
.app-sidebar .sidebar-link { color: var(--menu-txt); }
.app-sidebar .sidebar-link:hover { background: var(--menu-hover); color: #fff; }
:root .app-sidebar .sidebar-link.active { background: var(--sec, var(--accent)); color: var(--sec-txt, #fff); box-shadow: 0 6px 16px -8px var(--sec, var(--accent)); }
/* Mi perfil y Gestionar usuarios: su gris oscuro no se vería sobre el negro */
:root :is(body.page-perfil, body.page-usuarios) .app-sidebar .sidebar-link.active { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.app-sidebar .sidebar-version,
.app-sidebar .sidebar-copyright,
.app-sidebar .sidebar-privacidad { color: rgba(255, 255, 255, 0.65); }
.app-sidebar .sidebar-privacidad:hover { color: #fff; }
/* Avatar y botones de campana, mensajes y notas sobre el negro (en el menú en PC; en la barra de arriba en móvil) */
:is(.app-sidebar .sidebar-toolbar, .app-topbar) :is(.profile-btn, .bell-btn) { background: rgba(255, 255, 255, 0.06); border-color: var(--menu-borde); }
:is(.app-sidebar .sidebar-toolbar, .app-topbar) :is(.profile-btn, .bell-btn):hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
:is(.app-sidebar .sidebar-toolbar, .app-topbar) .bell-btn > svg { color: #e6e8ee; }
@media screen and (max-width: 1024px) {
  .app-topbar { background: var(--menu-bg); border-bottom-color: transparent; }
  .app-topbar .nav-toggle { background: rgba(255, 255, 255, 0.06); border-color: var(--menu-borde); color: #fff; }
  .app-sidebar { border-radius: 0 22px 22px 0; }
}