/* =====================================================================
 * app.css — CeibeConta
 * Capa de marca «suave», el mismo lenguaje que CeibeFACTU (velos en vez de
 * franjas de color, bordes finos, sombras difusas tintadas, modales de
 * cristal) pasado al morado de CeibeConta.
 *
 * Todo es OPT-IN: las clases .cc-* solo actúan donde se ponen y lo que
 * re-tiñe piezas compartidas (DataTables) cuelga de body.cc-ui. Así se puede
 * ir pasando página a página sin tocar las que aún no se han migrado.
 * Se carga DESPUÉS de header-styles.php.
 * ===================================================================== */

:root {
    --cc-primary:   #7c3aed;              /* violet-600 */
    --cc-grad-from: #9333ea;              /* purple-600 */
    --cc-grad-to:   #4f46e5;              /* indigo-600 */
    --cc-ink:       #2e1065;              /* violet-950: títulos sobre velo */
    --cc-line:      #e9e7f1;              /* borde fino, gris con un punto lavanda */
    --cc-line-soft: #f1eff6;
    --cc-shadow:    0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -8px rgba(76, 29, 149, 0.14);
    --cc-ring:      0 0 0 3px rgba(124, 58, 237, 0.12);
    --cc-gap:       0.625rem;             /* separación entre cards, igual en todas las páginas */
}

body.cc-ui { background-color: #f7f7fb; }

/* Contenedor de las cards de una página: las apila con la separación común,
   sin márgenes sueltos en cada card. Una card oculta (display: none) no deja hueco. */
.cc-stack { display: flex; flex-direction: column; gap: var(--cc-gap); }
/* La misma separación para rejillas de cards o mosaicos */
.cc-gap { gap: var(--cc-gap); }

/* ── Card base: borde fino + sombra corta y tintada ──────────────────── */
.cc-card {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 0.875rem;
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}

/* ── Cabecera de página «velo» ───────────────────────────────────────
   El degradado de marca (púrpura → índigo) se queda en un velo que se funde
   con el blanco de la card: nada de franja a todo color. Título oscuro con
   chip de icono; las acciones van a la derecha. */
.cc-page-head {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff),
        linear-gradient(to right, rgba(147, 51, 234, 0.17), rgba(79, 70, 229, 0.13));
    border-bottom: 1px solid var(--cc-line-soft);
}
.cc-page-chip {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.85);
    color: var(--cc-primary);
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.10), inset 0 0 0 1px rgba(124, 58, 237, 0.10);
}
.cc-page-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--cc-ink); }
.cc-page-sub   { font-size: 0.8125rem; color: rgba(46, 16, 101, 0.55); }

/* Barra bajo la cabecera: filtros y cambio de vista, sobre un neutro tenue */
.cc-page-toolbar {
    background: #fbfbfd;
    border-bottom: 1px solid var(--cc-line-soft);
}

/* Pie fino de una card (resúmenes, totales) */
.cc-card-foot {
    background: #fbfbfd;
    border-top: 1px solid var(--cc-line-soft);
}
.cc-chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 9999px;
    font-size: 0.75rem;
}

/* Card plegada (las que se ocultan con el ojo y quedan como una tira) */
.cc-collapsed {
    background: #faf8ff;
    border: 1px solid #ebe5fb;
    border-radius: 0.875rem;
    transition: box-shadow 0.12s ease-out, border-color 0.12s ease-out;
}
.cc-collapsed:hover {
    border-color: transparent;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.16), inset 0 0 0 1px rgba(167, 139, 250, 0.6);
}

/* Mosaico clicable (accesos a informes, opciones de menú en rejilla).
   Realce por anillo y halo, sin crecer la sombra ni mover la tarjeta. */
.cc-tile {
    display: flex; flex-direction: column; align-items: center;
    height: 100%;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 0.875rem;
    box-shadow: var(--cc-shadow);
    text-align: center;
    transition: box-shadow 0.12s ease-out, border-color 0.12s ease-out, background-color 0.12s ease-out;
}
.cc-tile:hover {
    border-color: transparent;
    background: #fdfcff;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.16), inset 0 0 0 1px rgba(167, 139, 250, 0.6);
}
.cc-tile:focus-visible { outline: none; box-shadow: var(--cc-ring), inset 0 0 0 1px #a78bfa; }

/* Rótulo pequeño sobre una cifra destacada (resúmenes de los modales) */
.cc-stat-label {
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

/* ── Botones ─────────────────────────────────────────────────────────
   Sin saltos ni escalados al pasar el ratón: solo cambian color y sombra.
   Transiciones explícitas y cortas, nunca `all` (ver header-styles.php). */
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.875rem; font-weight: 600;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out,
                color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-btn:focus-visible { outline: none; box-shadow: var(--cc-ring); }
.cc-btn-primary {
    background: linear-gradient(135deg, #8b5cf6, var(--cc-primary));
    color: #fff;
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.20), 0 4px 12px -4px rgba(124, 58, 237, 0.45);
}
.cc-btn-primary:hover {
    background: linear-gradient(135deg, var(--cc-primary), #6d28d9);
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.25), 0 6px 16px -4px rgba(124, 58, 237, 0.55);
}
.cc-btn-primary:disabled { opacity: 0.6; cursor: wait; }
.cc-btn-ghost {
    background: #fff;
    border: 1px solid var(--cc-line);
    color: #475569;
}
.cc-btn-ghost:hover { background: #f8f6ff; border-color: #ddd6fe; color: #6d28d9; }
.cc-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }

/* Control segmentado (dos o tres vistas excluyentes) */
.cc-seg {
    display: inline-flex; gap: 0.125rem; padding: 0.1875rem;
    background: #f1f0f6;
    border-radius: 0.6rem;
}
.cc-seg-btn {
    padding: 0.3125rem 0.75rem;
    border-radius: 0.45rem;
    font-size: 0.8125rem; font-weight: 600;
    color: #64748b;
    transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-seg-btn:hover { color: #334155; }
.cc-seg-btn.is-on {
    background: #fff;
    color: #6d28d9;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(124, 58, 237, 0.12);
}

/* Pastilla deslizante de los interruptores (assets/js/cc-seg.js). El script
   la mete detrás de los botones y la mueve a la opción activa; la opción
   activa se queda sin fondo para que se vea la pastilla llegar. */
.cc-seg-deslizante { position: relative; isolation: isolate; }
.cc-seg-deslizante > :not(.cc-seg-thumb) { position: relative; z-index: 1; }
.cc-seg-thumb {
    position: absolute; top: 0; left: 0; z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.4, 1),
                width 0.28s cubic-bezier(0.3, 0.7, 0.4, 1),
                opacity 0.15s ease-out;
}
.cc-seg > .cc-seg-thumb {
    background: #fff;
    border-radius: 0.45rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(124, 58, 237, 0.12);
}
.cc-seg-deslizante > .cc-seg-btn.is-on { background: transparent; box-shadow: none; }

/* ── Campos ──────────────────────────────────────────────────────────── */
.cc-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 0.6rem;
    color: #1e293b;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-input:focus { outline: none; border-color: #a78bfa; box-shadow: var(--cc-ring); }
.cc-input::placeholder { color: #a8a3bd; }
/* header-styles.php pone en monoespaciada todos los campos (por las cifras).
   Un campo de texto libre se lee mejor en la fuente de la página. */
.cc-input-texto { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Modales ──────────────────────────────────────────────────────────
   El fondo NO fija `display`: lo siguen alternando las utilidades
   hidden / flex desde el JS de cada modal. */
.cc-modal-overlay {
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.cc-modal-overlay-dark {
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Panel de cristal. Convive con .modal-ceibe (que da el arrastre por la
   cabecera, modal-arrastrable.php): de ahí los !important, para ganar al
   borde gris oscuro que header-styles.php pone a todos los .modal-ceibe. */
.cc-modal-glass,
.modal-ceibe.cc-modal-glass {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 1.1rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07), 0 24px 70px -22px rgba(15, 23, 42, 0.45);
}
/* Cabecera fina y pegajosa: velo de marca que se funde con el panel, y un
   velo blanco debajo para que se lea cuando el contenido pasa por detrás */
.cc-modal-glass-head,
.modal-ceibe-head.cc-modal-glass-head {
    position: sticky; top: 0; z-index: 2;
    background:
        linear-gradient(to bottom, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0)),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.40)) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.cc-modal-title {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 1rem; font-weight: 600; color: var(--cc-ink);
}
.cc-modal-title i { color: var(--cc-primary); font-size: 0.95rem; }

/* Dentro del cristal, el chrome va teñido de violeta muy tenue (nada de gris
   ceniza); el morado fuerte queda para acentos: botones y estados activos */
.cc-modal-glass label { color: rgba(46, 16, 101, 0.78); }
.cc-modal-glass .cc-input {
    background: rgba(255, 255, 255, 0.65);
    border-width: 1.5px;
    border-color: rgba(76, 29, 149, 0.14);
}
.cc-modal-glass .cc-input:focus { border-color: #a78bfa; }

/* Botón «liquid glass» (cerrar, acciones de cabecera) */
.cc-glass-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #6d28d9;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-glass-btn:hover {
    background: rgba(255, 255, 255, 0.75);
    color: var(--cc-primary);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}

/* ══ Cabeceras y paneles de todos los modales ═══════════════════════
   Las .modal-ceibe-head (la clase que da el arrastre) pasan del morado con
   texto blanco al velo de los modales de cristal: fondo claro con un punto
   de violeta y texto oscuro. Se hace aquí, una sola vez, para los ~25
   modales de la app: lo blanco que llevan dentro (text-white, text-white/80,
   text-purple-100, bg-white/20, bg-opacity-20, border-white…) se
   reinterpreta solo dentro de estas cabeceras. Las de cristal
   (.cc-modal-glass-head) tienen su propio estilo y no se tocan. */
.modal-ceibe-head:not(.cc-modal-glass-head) {
    background:
        linear-gradient(to bottom, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.035)),
        #fff !important;
    color: var(--cc-ink);
    border-bottom: 1px solid var(--cc-line-soft);
    box-shadow: none !important;
}
.modal-ceibe-head:not(.cc-modal-glass-head) :is(h1, h2, h3, h4, .text-white) {
    color: var(--cc-ink) !important;
}
.modal-ceibe-head:not(.cc-modal-glass-head) :is(h1, h2, h3, h4) { font-weight: 600 !important; }
.modal-ceibe-head:not(.cc-modal-glass-head) :is(p, .text-white\/80, .text-white\/85, .text-white\/90,
    .text-purple-100, .text-red-100, .text-blue-100, .text-indigo-100) {
    color: rgba(46, 16, 101, 0.55) !important;
}
/* Iconos del título en violeta; los de los botones toman el color del botón */
.modal-ceibe-head:not(.cc-modal-glass-head) i:not(button i) { color: var(--cc-primary) !important; }
/* Superficies blancas translúcidas (chips, botones) → tinte violeta */
.modal-ceibe-head:not(.cc-modal-glass-head) :is(.bg-white\/15, .bg-white\/20, .bg-opacity-20, .bg-opacity-30) {
    background-color: rgba(124, 58, 237, 0.08) !important;
}
.modal-ceibe-head:not(.cc-modal-glass-head) :is(.border-white, .border-white\/30) { border-color: var(--cc-line) !important; }
/* Botones (cerrar, flechas…): tinta apagada; al pasar, violeta sobre tinte.
   Las pestañas de la búsqueda y la barra de los modales de anotar
   (modal-cabecera-local.php) llevan su propio estilo */
.modal-ceibe-head:not(.cc-modal-glass-head) button:not(.busq-tab, .mcl-local, .mcl-opcion, .mcl-fecha) {
    color: rgba(46, 16, 101, 0.55) !important;
    transition: color 0.15s ease-out, background-color 0.15s ease-out;
}
.modal-ceibe-head:not(.cc-modal-glass-head) button:not(.busq-tab, .mcl-local, .mcl-opcion, .mcl-fecha):hover {
    color: var(--cc-primary) !important;
    background-color: rgba(124, 58, 237, 0.10) !important;
}

/* Paneles: borde fino y sombra difusa en lugar del borde gris oscuro. Con
   «html body» delante para ganar a los bordes grises que algunas páginas
   declaran en su propio <style> (.caja-z-popup…), que se cargan después */
html body .modal-ceibe:not(.cc-modal-glass),
html body .swal2-popup:not(.swal2-toast) {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.03), 0 24px 70px -22px rgba(15, 23, 42, 0.45) !important;
}

/* Botones de cerrar a medida de algunos SweetAlert (eran blancos sobre el
   morado). Más especificidad que los estilos que inyecta cada modal */
.swal2-popup .swal2-close:is(.swal2-close-custom, .swal2-close-edicion-custom, .swal2-close-mensual-custom) {
    color: rgba(46, 16, 101, 0.55) !important;
    background: rgba(124, 58, 237, 0.08) !important;
    transform: none !important;
}
.swal2-popup .swal2-close:is(.swal2-close-custom, .swal2-close-edicion-custom, .swal2-close-mensual-custom):hover {
    color: var(--cc-primary) !important;
    background: rgba(124, 58, 237, 0.14) !important;
}
/* Los dos modales de anotar comparten barra (modal-cabecera-local.php): mismo
   botón de cerrar, cuadrado y centrado en ella */
.swal2-popup .swal2-close:is(.swal2-close-edicion-custom, .swal2-close-mensual-custom) {
    top: 13px !important;
    right: 16px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    border-radius: 10px !important;
}

/* Opción elegible en rejilla (forma de pago, tipo…). El estado elegido lo
   marca la clase .is-active desde el JS. */
.cc-option {
    border: 1.5px solid rgba(76, 29, 149, 0.12);
    background: rgba(255, 255, 255, 0.65);
    border-radius: 0.65rem;
    color: #64748b;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out,
                color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-option:hover { border-color: #c4b5fd; color: #475569; }
.cc-option.is-active {
    border-color: #a78bfa;
    background: #f5f3ff;
    color: #6d28d9;
    box-shadow: var(--cc-ring);
}

/* ── Modales con formularios arriba y lista debajo ───────────────────
   (anotar movimientos diarios y mensuales). Alto fijo: si dependiera de la
   lista, el modal cambiaría de alto al añadir o borrar y, como va centrado,
   la cabecera y los formularios saltarían. Lo de arriba queda quieto y solo
   se desplaza la lista. */
.cc-cuerpo-fijo { display: flex; flex-direction: column; height: calc(75vh - 80px); }
.cc-cuerpo-fijo > * { flex-shrink: 0; }
.cc-cuerpo-fijo > .cc-cuerpo-lista { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cc-cuerpo-lista > * { flex-shrink: 0; }
.cc-cuerpo-lista > .cc-cuerpo-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* En SweetAlert, el contenedor del HTML lleva un tope de 60vh con scroll propio
   (header-styles.php): en estos modales sobra, el alto lo pone .cc-cuerpo-fijo */
.swal2-html-container.cc-swal-html-fijo { max-height: none !important; overflow: visible !important; }

/* ── Visor de informes ────────────────────────────────────────────────
   Fondo oscuro con el folio A4 en blanco (formato de los informes), pero
   con el fondo desenfocado y una barra de acciones de cristal en lugar de
   botones macizos. El folio no se toca: lleva estilos en línea porque es
   lo que se imprime. */
.cc-report-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.80);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.cc-report-bar {
    display: flex; justify-content: center; gap: 0.625rem;
    padding: 1rem 1.25rem 0.75rem;
}
.cc-report-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex; justify-content: center;
    padding: 0.5rem 1.25rem 2.5rem;
}
/* Sombra del folio en pantalla (gana a la que trae en línea, que es para papel) */
.cc-report-scroll #informe-contenido {
    border-radius: 4px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
/* Acción principal sobre fondo oscuro: blanca, con el color del informe */
.cc-btn-light {
    background: #fff;
    color: var(--cc-accent, var(--cc-primary));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 20px -8px rgba(0, 0, 0, 0.55);
}
.cc-btn-light:hover { background: #f8f7fc; }
/* Acción secundaria sobre fondo oscuro: cristal */
.cc-btn-glass-dark {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cc-btn-glass-dark:hover { background: rgba(255, 255, 255, 0.2); }

/* Navegadores sin backdrop-filter: más opaco para que se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cc-modal-glass, .modal-ceibe.cc-modal-glass { background: rgba(255, 255, 255, 0.97); }
}

/* ── DataTables en las páginas migradas (body.cc-ui) ─────────────────
   header-styles.php pinta las tablas con borde y cabecera azul cielo; aquí
   pasan a borde fino y cabecera neutra con un punto lavanda. El :is() con
   los ids hace falta para ganar a las reglas por id de header-styles.php. */
.cc-ui table.dataTable:is(#tablaMovimientos, #tablaMovimientosMensuales, #tablaGastosCash) {
    border: 1px solid var(--cc-line) !important;
}
.cc-ui table.dataTable thead th {
    background: #faf9fd !important;
    color: #64607a !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cc-line) !important;
}
.cc-ui table.dataTable thead th.sorting:hover,
.cc-ui table.dataTable thead th.sorting_asc:hover,
.cc-ui table.dataTable thead th.sorting_desc:hover {
    background: #f3f0fb !important;
}
.cc-ui table.dataTable tbody td {
    border-bottom: 1px solid var(--cc-line-soft) !important;
    color: #334155;
}
/* DataTables 1.13 separa las filas con un border-top gris oscuro y sombrea la
   columna ordenada (y la fila en hover) con un box-shadow interior: fuera las
   dos cosas, el color de la fila lo decide cada página. Los selectores llevan
   body y td para ganar a los de DataTables, que encadenan tr.odd / :hover. */
body.cc-ui table.dataTable.display > tbody > tr > td,
body.cc-ui table.dataTable.display > tbody > tr > td.sorting_1 {
    border-top: none;
    box-shadow: none;
}
/* Hover de fila: un lavanda apenas perceptible en lugar del gris */
.cc-ui table.dataTable tbody tr:hover { background-color: #faf9fe !important; }
.cc-ui table.dataTable tfoot td,
.cc-ui table.dataTable tfoot th {
    background: #faf9fd;
    border-top: 1px solid var(--cc-line) !important;
    padding: 0.75rem 1rem;
}
.cc-ui .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--cc-line);
    border-radius: 0.6rem;
    padding: 0.45rem 0.8rem;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-ui .dataTables_wrapper .dataTables_filter input:focus {
    outline: none; border-color: #a78bfa; box-shadow: var(--cc-ring);
}

/* Botones de filtro de DataTables (Buttons): pastillas suaves en lugar del
   botón gris con degradado de la extensión */
.cc-ui .dt-buttons button.dt-button:is(.filtro-btn, .filtro-btn-mensual) {
    display: inline-flex; align-items: center;
    margin: 0;
    padding: 0.375rem 0.875rem;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 9999px;
    color: #475569;
    font-size: 0.8125rem; font-weight: 600;
    box-shadow: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
.cc-ui .dt-buttons button.dt-button:is(.filtro-btn, .filtro-btn-mensual):hover:not(.disabled) {
    background: #f8f6ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}
.cc-ui .dt-buttons button.dt-button:is(.filtro-btn, .filtro-btn-mensual).activo,
.cc-ui .dt-buttons button.dt-button:is(.filtro-btn, .filtro-btn-mensual).activo:hover:not(.disabled) {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #6d28d9;
    box-shadow: inset 0 0 0 1px #c4b5fd;
}

/* ── Selector de período ‹ mes › ─────────────────────────────────────
   Una sola pieza: flechas pegadas al valor, separadas por un filete. El
   valor es un botón (no un campo editable) que abre el calendario común
   (includes/modal-calendario.php, abrirCalendario({ modo: 'mes' | 'anio' })).
   Markup:
     <div class="cc-periodo">
       <button class="cc-periodo-flecha"><i class="fas fa-chevron-left"></i></button>
       <button class="cc-periodo-valor"><i class="far fa-calendar"></i><span>octubre 2026</span></button>
       <button class="cc-periodo-flecha"><i class="fas fa-chevron-right"></i></button>
     </div> */
.cc-periodo {
    display: inline-flex; align-items: stretch;
    height: 2.25rem;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 0.6rem;
    overflow: hidden;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cc-periodo:hover { border-color: #ddd6fe; }
.cc-periodo:focus-within { border-color: #a78bfa; box-shadow: var(--cc-ring); }
.cc-periodo > button {
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.cc-periodo > button:focus-visible { outline: none; background: #f5f3ff; }
.cc-periodo-flecha { width: 2.125rem; flex: none; color: #64748b; font-size: 0.75rem; }
.cc-periodo-flecha:hover:not(:disabled) { background: #f8f6ff; color: #6d28d9; }
.cc-periodo-flecha:disabled { opacity: 0.35; cursor: default; }
.cc-periodo-valor {
    gap: 0.5rem;
    min-width: 9.75rem; padding: 0 0.875rem;
    border-left: 1px solid var(--cc-line-soft);
    border-right: 1px solid var(--cc-line-soft);
    font-size: 0.875rem; font-weight: 600; color: #1e293b;
    white-space: nowrap; text-transform: capitalize;
}
.cc-periodo-valor i { color: var(--cc-primary); font-size: 0.8125rem; }
.cc-periodo-valor:hover { background: #faf8ff; color: #6d28d9; }

/* ── Modal de detalle de gastos (includes/modal-detalle-gastos.php) ──
   Sin rejilla de tabla ni filetes: bloques con aire, filas redondeadas que
   se iluminan al pasar, una sola familia de color (violeta) y las cifras en
   tinta. Por encima de la barra del pie (z 50). */
.cc-det-overlay { z-index: 60; }
.cc-det { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
/* Casi opaco: con el cristal translúcido el fondo oscurecido agrisaba el
   cuerpo y las pastillas blancas parecían parches */
.cc-modal-glass.cc-det { background: rgba(251, 250, 255, 0.97); }
.cc-det-head {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 1rem 1rem 0.875rem 1.25rem;
    flex-shrink: 0;
}
.cc-det-badge {
    width: 2.75rem; height: 2.75rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.10), inset 0 0 0 1px rgba(124, 58, 237, 0.10);
    color: var(--cc-primary);
    font-size: 1.15rem;
}
.cc-det-title {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 1.0625rem; font-weight: 600; color: var(--cc-ink);
}
.cc-det-tag {
    flex-shrink: 0;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background: rgba(124, 58, 237, 0.09);
    color: #6d28d9;
    font-size: 0.6875rem; font-weight: 600;
}
.cc-det-sub {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.125rem;
    font-size: 0.8125rem; color: rgba(46, 16, 101, 0.55);
}
.cc-det-sub > span:first-of-type { text-transform: capitalize; }
.cc-det-sub i { font-size: 0.75rem; color: #a78bfa; }
.cc-det-dot { width: 3px; height: 3px; border-radius: 9999px; background: currentColor; opacity: 0.6; }

.cc-det-cuerpo {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0.25rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: 1.125rem;
}

/* Cifras: tres pastillas iguales */
.cc-det-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.cc-det-cifra {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.09), 0 1px 2px rgba(76, 29, 149, 0.04);
}
.cc-det-cifra-et { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #8b84a3; }
.cc-det-cifra-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem; font-weight: 700; color: #1e1b2e; white-space: nowrap;
}
.cc-det-cifra-val.is-total { color: #6d28d9; }

.cc-det-bloque-tit {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #8b84a3;
}
.cc-det-pista { font-size: 0.6875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #b3adc6; }

/* Reparto por local: tarjetitas con barra proporcional; filtran la lista */
.cc-det-locales { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.cc-det-local {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
    padding: 0.55rem 0.7rem 0.5rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.09), 0 1px 2px rgba(76, 29, 149, 0.04);
    text-align: left;
    transition: box-shadow 0.15s ease-out, background-color 0.15s ease-out, opacity 0.15s ease-out;
}
.cc-det-local:hover { box-shadow: inset 0 0 0 1px #c4b5fd; }
.cc-det-local.is-on { background: #f5f3ff; box-shadow: inset 0 0 0 1.5px #a78bfa, var(--cc-ring); }
.cc-det-local.is-apagado { opacity: 0.5; }
.cc-det-local-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.cc-det-local-nom { font-size: 0.8125rem; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-det-local-imp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.75rem; font-weight: 700; color: #1e1b2e; white-space: nowrap;
}
.cc-det-barra { display: block; width: 100%; height: 4px; border-radius: 9999px; background: rgba(124, 58, 237, 0.10); overflow: hidden; }
.cc-det-barra > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.cc-det-local-n { font-size: 0.6875rem; color: #9993ad; }

.cc-det-quitar {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background: #f5f3ff; color: #6d28d9;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.cc-det-quitar i { font-size: 0.625rem; opacity: 0.7; }
.cc-det-quitar:hover { background: #ede9fe; }

/* Movimientos: grupos por mes y filas sin rejilla */
.cc-det-grupo + .cc-det-grupo { margin-top: 0.75rem; }
.cc-det-grupo-tit {
    position: sticky; top: -0.25rem; z-index: 1;
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0.35rem 0.625rem;
    margin-bottom: 0.25rem;
    border-radius: 0.6rem;
    background: rgba(245, 243, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0.8125rem; font-weight: 600; color: #4c1d95; text-transform: capitalize;
}
.cc-det-grupo-tot {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.75rem; font-weight: 600; color: #7c6fa3; text-transform: none;
}
.cc-det-mov {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem;
    padding: 0.45rem 0.625rem;
    border-radius: 0.75rem;
    transition: background-color 0.12s ease-out;
}
.cc-det-mov:nth-child(even of .cc-det-mov) { background: rgba(124, 58, 237, 0.035); }
.cc-det-mov:hover { background: rgba(124, 58, 237, 0.08); }
.cc-det-fecha {
    width: 3rem; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 0.25rem 0;
    border-radius: 0.6rem;
    background: rgba(124, 58, 237, 0.07);
    line-height: 1.1;
}
.cc-det-fecha b { font-size: 1rem; font-weight: 700; color: #4c1d95; }
.cc-det-fecha small { font-size: 0.625rem; color: #8b84a3; white-space: nowrap; }
.cc-det-mov-txt { display: flex; flex-direction: column; min-width: 0; }
.cc-det-mov-tit { font-size: 0.875rem; font-weight: 500; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-det-mov-tit.is-vacio::before { content: 'Sin observaciones'; font-weight: 400; font-style: italic; color: #b3adc6; }
.cc-det-mov-sub { font-size: 0.75rem; color: #8b84a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-det-mov-local {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.10);
    font-size: 0.6875rem; font-weight: 600; color: #6b6585; white-space: nowrap;
}
.cc-det-mov-imp {
    min-width: 6.5rem; text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem; font-weight: 700; color: #1e1b2e; white-space: nowrap;
}
.cc-det-vacio { padding: 1.5rem 0; text-align: center; font-size: 0.875rem; color: #9993ad; }
.cc-det-pie {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.625rem 1.25rem;
    background: rgba(245, 243, 255, 0.7);
    font-size: 0.8125rem; font-weight: 600; color: #4c1d95;
}
.cc-det-pie-tot { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-weight: 700; }
@media (max-width: 639px) {
    .cc-det-cifras { grid-template-columns: 1fr 1fr; }
    .cc-det-cifra:first-child { grid-column: span 2; }
    .cc-det-mov { grid-template-columns: auto minmax(0, 1fr) auto; }
    .cc-det-mov-local { display: none; }
}

/* ══ Página a pantalla completa (PRUEBA en proveedores.php) ════════════
   El lenguaje nuevo de CeibeRRHH: la página deja de ser una columna de cards
   centrada y pasa a ocupar todo el navegador.
   - .cc-band: la cabecera es una BANDA plana pegada al menú y a los dos
     bordes de la ventana (sin radio ni card), con el degradado de halos de
     la banda de filtros del dashboard de CeibeRRHH pasado al violeta. Lleva
     identidad, filtros y acciones en una sola pieza.
   - .cc-full-body: debajo, paneles (.cc-panel) a todo el ancho con la
     separación común.
   - En escritorio (≥1024 px y alto suficiente) la página mide exactamente la
     ventana: banda y cabeceras de panel quietas, y solo se desplaza el
     interior de cada panel (.cc-panel-scroll). Por debajo, scroll normal.
   Todo cuelga de body.cc-full: las demás páginas no cambian. */
body.cc-full { --cc-nav-h: 4rem; }
.cc-full-app { display: flex; flex-direction: column; padding-top: var(--cc-nav-h); }

.cc-band {
    flex-shrink: 0;
    position: relative; z-index: 2;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(124, 58, 237, 0.16);
    box-shadow: 0 4px 10px -3px rgba(76, 29, 149, 0.10);
    /* Halos medidos sobre la PANTALLA (fixed), no sobre la banda: todas las
       páginas enseñan el mismo trozo del mismo degradado, sea cual sea su alto */
    background:
        radial-gradient(ellipse at 8% 35%, rgba(147, 51, 234, 0.17) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 18%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 45% 95%, rgba(124, 58, 237, 0.10) 0%, transparent 55%),
        #faf8ff;
    background-attachment: fixed;
}
@media (min-width: 640px) { .cc-band { padding-left: 1.25rem; padding-right: 1.25rem; } }
.cc-band-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.cc-band-id { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
/* Insignia del icono: la de las cabeceras de CeibeRRHH, a la escala de la banda */
.cc-band-badge {
    width: 3rem; height: 3rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.08), inset 0 0 0 1px rgba(124, 58, 237, 0.08);
    color: var(--cc-primary);
    font-size: 1.3rem;
}
.cc-band-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--cc-ink); }
.cc-band-sub   { margin-top: 1px; font-size: 0.8125rem; color: rgba(46, 16, 101, 0.55); }
/* Separador vertical entre la identidad y los filtros */
.cc-band-sep { align-self: stretch; width: 1px; margin: 0.25rem 0; background: rgba(124, 58, 237, 0.14); }
.cc-band-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Sobre el degradado, los controles grises pasan a blanco translúcido */
.cc-band .cc-seg { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.10); }
.cc-band .cc-btn-ghost { background: rgba(255, 255, 255, 0.75); border-color: rgba(124, 58, 237, 0.14); }
.cc-band .cc-btn-ghost:hover { background: #fff; border-color: #ddd6fe; }
.cc-band .cc-input { border-color: rgba(124, 58, 237, 0.14); }
/* Todos los controles de la banda, del mismo alto (40 px): botones, campos,
   desplegables y el interruptor. `height` y no padding, para que el <select>
   y el campo de mes no se queden más bajos en Safari */
.cc-band { --cc-band-ctl: 2.5rem; }
.cc-band :is(.cc-btn, .cc-input, .cc-seg, .cc-periodo) { height: var(--cc-band-ctl); }
.cc-band .cc-periodo { border-color: rgba(124, 58, 237, 0.14); }
.cc-band .cc-periodo-flecha { width: 2.375rem; }
.cc-band .cc-btn { padding-top: 0; padding-bottom: 0; }
.cc-band .cc-input { padding-top: 0; padding-bottom: 0; }
.cc-band .cc-btn-icon { width: var(--cc-band-ctl); padding: 0; }
.cc-band .cc-seg-btn { display: inline-flex; align-items: center; padding-left: 0.875rem; padding-right: 0.875rem; }

.cc-full-body {
    display: flex; flex-direction: column; gap: var(--cc-gap);
    padding: var(--cc-gap);
    padding-bottom: calc(var(--cc-gap) + var(--cc-foot-h, 2rem));
}
/* Panel: lo de una card, pero sin despegarse del fondo — radio corto */
.cc-panel {
    display: flex; flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 0.5rem;
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}
.cc-panel-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--cc-line-soft);
}
.cc-panel-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9375rem; font-weight: 600; color: #1e293b;
    white-space: nowrap;
}
.cc-panel-title i { color: #8b5cf6; font-size: 0.875rem; }
.cc-panel-title small { font-size: 0.75rem; font-weight: 500; color: #94a3b8; }
.cc-panel-scroll { min-height: 0; }
.cc-panel-foot { flex-shrink: 0; background: #fbfbfd; border-top: 1px solid var(--cc-line-soft); }

/* Tabla que llena un panel: sin borde ni radio propios (los pone el panel) y
   cabecera y totales pegados arriba y abajo mientras se desplaza el cuerpo.
   position: sticky con !important: header-styles.php pone `relative` a las
   cabeceras ordenables, y con eso no pegarían. */
.cc-panel-scroll table.dataTable { border: none !important; border-radius: 0 !important; }
.cc-panel-scroll table.dataTable thead th { position: sticky !important; top: 0; z-index: 1; }
.cc-panel-scroll table.dataTable tfoot td { position: sticky; bottom: 0; z-index: 1; }

@media (min-width: 1024px) and (min-height: 600px) {
    body.cc-full { overflow: hidden; }
    body.cc-full .cc-full-app { height: 100vh; height: 100dvh; }
    body.cc-full .cc-full-body { flex: 1 1 auto; min-height: 0; padding-bottom: calc(var(--cc-gap) + var(--cc-foot-h, 2rem)); }
    body.cc-full .cc-full-body > * { min-height: 0; }
    body.cc-full .cc-panel-scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-btn, .cc-seg-btn, .cc-input, .cc-option, .cc-glass-btn, .cc-seg-thumb,
    .cc-collapsed, .cc-tile { transition: none; }
}