/* PRUEBA: cada sección con el color del logo de doScene. SOLO EN MODO CLARO (en oscuro la app se ve como siempre).
   - 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. */

/* ---------- 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;
}

/* ---------- 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 */
:root:not([data-theme="dark"]) :is(body.page-contactos, body.page-calendario, body.page-contabilidad) { --sec: #00897f; --sec-txt: #fff; }
:root:not([data-theme="dark"]) :is(body.page-espectaculos, body.page-mis-espectaculos, body.page-artistas, body.page-propuestas, body.page-mensajes) { --sec: #d6007f; --sec-txt: #fff; }
:root:not([data-theme="dark"]) :is(body.page-programaciones, body.page-actuaciones, body.page-estadisticas, body.page-soporte) { --sec: #ffb500; --sec-txt: #1f2430; }
:root:not([data-theme="dark"]) :is(body.page-perfil, body.page-usuarios) { --sec: #1f2430; --sec-txt: #fff; }
:root:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) 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:not([data-theme="dark"]) :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: #1f2430;
}
/* 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:not([data-theme="dark"]) :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:not([data-theme="dark"]) :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:not([data-theme="dark"]) :is(.header-row > div > h1:not(#detail-title), .wrap > h1) + .subtitle { padding-left: 42px; }
@media (max-width: 600px) {
  :root:not([data-theme="dark"]) :is(.header-row > div > h1:not(#detail-title), .wrap > h1) { font-size: 1.3rem; }
  :root:not([data-theme="dark"]) :is(.header-row > div > h1:not(#detail-title), .wrap > h1) + .subtitle { padding-left: 38px; }
  :root:not([data-theme="dark"]) :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:not([data-theme="dark"]) :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); }