/* =========================================================================
   THEME MODERNO — RPT Junta de Andalucía
   Capa de estilo que se carga DESPUÉS del resto de hojas de estilo.
   No modifica estructura ni clases de las que depende dc.js/crossfilter
   (.chart-wrapper, .chart-title, .chart-stage, .reset, .filter, etc.),
   solo redefine su aspecto visual.
   ========================================================================= */

:root {
    /* Paleta */
    --rpt-bg: #f3f5f7;
    --rpt-surface: #ffffff;
    --rpt-surface-alt: #eef2f3;
    --rpt-border: #e1e6ea;
    --rpt-text: #1e2530;
    --rpt-text-muted: #667085;

    --rpt-primary: #0f6e5c;
    --rpt-primary-dark: #0a5346;
    --rpt-primary-light: #e2f2ee;
    --rpt-primary-row: #aacfc6;

    --rpt-accent: #e2a33d;
    --rpt-accent-dark: #b9820c;

    --rpt-info: #0a5346;
    --rpt-danger: #c0432f;

    --rpt-radius: 14px;
    --rpt-radius-sm: 8px;
    --rpt-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .06);

    --rpt-font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --rpt-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
}

body,
body.application {
    background: var(--rpt-bg) !important;
    font-family: var(--rpt-font-body);
    color: var(--rpt-text);
}

body.application .container-fluid,
.content-wrapper {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

::selection {
    background: var(--rpt-primary-light);
    color: var(--rpt-primary-dark);
}

a {
    color: var(--rpt-primary);
}

a:hover,
a:focus {
    color: var(--rpt-primary-dark);
}

:focus-visible {
    outline: 2px solid var(--rpt-accent);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, .chart-title, .btn, label, .navbar, select, input {
    font-family: var(--rpt-font-display);
}

table, td, th, .dc-table-column {
    font-family: var(--rpt-font-body);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------- Cabecera / navbar ---------- */

/* La cabecera usa la clase Bootstrap ".container", que tiene un ancho máximo
   centrado (p. ej. 1170px en pantallas grandes) y dejaba un hueco entre los
   botones y el borde derecho real de la barra. Aquí la hacemos ocupar todo
   el ancho disponible dentro de la cabecera. */
.container.main-header {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Cabecera en 3 columnas (izquierda vacía / título centrado / acciones a la
   derecha), usando una columna fantasma con ::before en vez de flexbox, para
   que el título quede centrado de verdad respecto a toda la barra y no solo
   respecto al hueco libre a la izquierda de los botones. */
.main-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
}

.main-header::before {
    content: "";
    grid-column: 1;
}

.header-info {
    grid-column: 2;
    text-align: center;
    justify-self: center;
}

.header-actions {
    grid-column: 3;
    justify-self: end;
    margin-left: 0 !important;
}

@media screen and (max-width: 750px) {

    /* En móvil, con menos espacio, priorizamos que no se solape nada:
       volvemos a un reparto simple izquierda/derecha en vez de centrado. */
    .main-header {
        grid-template-columns: 1fr auto;
    }

    .header-info {
        grid-column: 1;
        text-align: left;
        justify-self: start;
    }

    .header-actions {
        grid-column: 2;
    }
}

/* La cabecera fija ha crecido un poco respecto al diseño original al añadir
   tipografía más grande y el bloque "hero" del contador; compensamos aquí
   el padding-top del contenido para que no quede tapado por el navbar fijo. */
@media screen and (max-width:550px) {
    body.application > .container-fluid {
        padding-top: 190px !important;
    }
}
@media screen and (min-width: 551px) and (max-width:750px) {
    body.application > .container-fluid {
        padding-top: 160px !important;
    }
}
@media screen and (min-width: 751px) and (max-width: 780px) {
    body.application > .container-fluid {
        padding-top: 208px !important;
    }
}
@media screen and (min-width: 781px) and (max-width: 900px) {
    body.application > .container-fluid {
        padding-top: 228px !important;
    }
}
@media screen and (min-width: 901px) and (max-width: 1199px) {
    body.application > .container-fluid {
        padding-top: 200px !important;
    }
}
@media screen and (min-width: 1200px) {
    body.application > .container-fluid {
        padding-top: 178px !important;
    }
}

/* El navbar exterior queda neutro: el color lo aportan sus elementos internos
   (barra de título y contador). Pintarlo también de verde creaba un doble
   marco alrededor de las tarjetas internas. */
.navbar-default {
    background: var(--rpt-bg) !important;
    border-color: var(--rpt-bg) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top-width: 0 !important;
    padding: 0 !important;
}

.main-header .header-info span,
.main-header .header-info {
    color: var(--rpt-primary-dark);
    font-family: var(--rpt-font-display);
    font-weight: 900;
    letter-spacing: .2px;
}

.header-actions .btn-info,
.header-actions button.btn-info {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 600;
    transition: background .15s ease;
}

.header-actions .btn-info:hover {
    background: rgba(255, 255, 255, .28);
}

.myName a,
.myName {
    color: #4b5563 !important;
}

#aviso.alert-danger {
    background: #fdecea;
    border: 1px solid #f3b9b0;
    color: #7a2a1d;
    border-radius: var(--rpt-radius-sm);
}

/* Contador principal de plazas: elemento "hero" de la página */
.dc-data-count {
    background: linear-gradient(135deg, var(--rpt-primary) 0%, var(--rpt-primary-dark) 100%);
    color: #fff;
    border-radius: var(--rpt-radius);
    padding: 8px 16px;
    margin: 6px 0;
    box-shadow: var(--rpt-shadow);
}

.dc-data-count h4 {
    margin: 0;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
}

.dc-data-count #plazas-totales, #total-comunicaciones,
.dc-data-count .filter-count {
    font-family: var(--rpt-font-display);
    font-weight: 800;
    font-size: 1.7em;
    color: #ffdb99;
}
/*
#total-comunicaciones {
    color: #ffffff !important;
    font-weight: 700;
}
*/
.dc-data-count .btn-xs {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
}

.dc-data-count .btn-xs:hover {
    background: rgba(255, 255, 255, .3);
}

.chart-notes,
.chart-notes a {
    background: transparent;
    color: #4b5563;
}

/* Banner de novedades: fondo más oscuro que el resto de la paleta para que
   los colores de aviso (rojo/verde) definidos en banner-novedades.js
   mantengan buen contraste sin tener que tocar ese contenido cada vez. */
#novedades-banner {
    background: #0d2e27 !important;
    border-radius: var(--rpt-radius-sm) !important;
}

.btn-novedades {
    background: var(--rpt-accent) !important;
    color: #3a2a05 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.btn-novedades:hover {
    background: var(--rpt-accent-dark) !important;
    color: #fff !important;
}

/* ---------- Tarjetas de gráfico ---------- */

.chart-wrapper {
    background: var(--rpt-surface);
    border: 1px solid var(--rpt-border) !important;
    border-radius: var(--rpt-radius) !important;
    box-shadow: var(--rpt-shadow) !important;
    margin-bottom: 16px;
    overflow: hidden;
}

.chart-wrapper .chart-title {
    background: var(--rpt-surface-alt);
    border-bottom: 1px solid var(--rpt-border) !important;
    color: var(--rpt-text);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .6px;
    padding: 7px 14px !important;
}

/* La cabecera fija (navbar) necesita permanecer compacta: recortamos el
   padding vertical de sus tarjetas internas para no desplazar el contenido */
.navbar-fixed-top .chart-wrapper .chart-title {
    padding: 6px 14px !important;
}

.navbar-fixed-top .chart-notes {
    padding: 5px 14px !important;
}

.chart-wrapper .chart-stage {
    padding: 12px 14px !important;
}

.chart-wrapper .chart-notes {
    background: var(--rpt-surface-alt) !important;
    border-top: 1px solid var(--rpt-border) !important;
    color: var(--rpt-text-muted);
    font-size: 12px;
}

/* Colores de texto de subtítulos dentro de las tarjetas (antes en azul plano) */
.chart-stage h5 span,
.chart-stage span[style*="color: #2b579e"],
.chart-stage label[style*="color: #4261c9"] {
    color: var(--rpt-primary-dark) !important;
}

/* ---------- Filtros: chips "Restablecer" ---------- */

a.reset .btn,
.reset .btn-primary.btn-xs {
    background: var(--rpt-primary-light) !important;
    color: var(--rpt-primary-dark) !important;
    border: 1px solid var(--rpt-primary-light) !important;
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 12px;
    transition: background .15s ease, color .15s ease;
}

a.reset .btn:hover,
.reset .btn-primary.btn-xs:hover {
    background: var(--rpt-primary) !important;
    color: #fff !important;
}

span.reset .filter {
    color: var(--rpt-primary-dark);
    font-weight: 700;
}

/* ---------- Formularios ---------- */

.form-control,
select,
#srch-term {
    border-radius: var(--rpt-radius-sm) !important;
    border: 1px solid var(--rpt-border) !important;
    box-shadow: none !important;
    font-family: var(--rpt-font-body);
}

.form-control:focus,
select:focus,
#srch-term:focus {
    border-color: var(--rpt-primary) !important;
    box-shadow: 0 0 0 3px var(--rpt-primary-light) !important;
}

.input-group.add-on {
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--rpt-border);
}

.input-group.add-on .form-control {
    border: none !important;
    border-radius: 0 !important;
}

.input-group.add-on .btn {
    border-radius: 0 !important;
    background: var(--rpt-primary);
    color: #fff;
    border: none;
}

.input-group.add-on .btn:hover {
    background: var(--rpt-primary-dark);
}

label {
    font-weight: 600;
    color: var(--rpt-text);
    font-size: 13px;
}

/* ---------- Botones ---------- */

.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
}

.btn-primary {
    background: var(--rpt-primary) !important;
    border-color: var(--rpt-primary) !important;
}

.btn-primary:hover {
    background: var(--rpt-primary-dark) !important;
    border-color: var(--rpt-primary-dark) !important;
}

.btn-info {
    background: var(--rpt-info) !important;
    border-color: var(--rpt-info) !important;
}

.btn-danger {
    background: var(--rpt-danger) !important;
    border-color: var(--rpt-danger) !important;
}

.btn-default {
    border-radius: var(--rpt-radius-sm);
}

/* Botones de paginación de la tabla */
#paging .btn-primary.btn-xs {
    border-radius: 999px !important;
    padding: 3px 12px;
}

/* ---------- Tabla de detalle ---------- */

.table-responsive {
    border-radius: var(--rpt-radius-sm);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rpt-border);
}

table.dc-data-table thead th,
.table > thead > tr > th {
    background: var(--rpt-surface-alt);
    color: var(--rpt-text);
    border-bottom: 2px solid var(--rpt-border) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .4px;
}

.table > tbody > tr:nth-child(even) > td {
    background: #fbfcfc;
}

.table-hover > tbody > tr:hover > td {
    background: var(--rpt-primary-light) !important;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--rpt-border) !important;
    
}

.table>tbody>tr.info>td {
    background-color: var(--rpt-primary-row) !important;
}
/* ---------- Modales ---------- */

.modal-content {
    border-radius: var(--rpt-radius) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(16, 24, 40, .25) !important;
}

.modal-header {
    background: var(--rpt-primary);
    color: #fff;
    border-radius: var(--rpt-radius) var(--rpt-radius) 0 0 !important;
}

.modal-header .close {
    color: #fff;
    opacity: .8;
}

/* Carrito / botón flotante */
#cartButton {
    background: linear-gradient(135deg, var(--rpt-accent), var(--rpt-primary)) !important;
    border-radius: 999px !important;
    box-shadow: var(--rpt-shadow) !important;
}

/* ---------- dc.js: barras, filas y ejes ---------- */

.dc-chart rect.bar {
    fill: var(--rpt-primary);
}

.dc-chart rect.bar:hover {
    fill: var(--rpt-accent);
}

/* El color base de las barras ahora lo asigna chartsRPT.js con una escala de
   verdes proporcional al valor de cada barra (ver paletaBarrasPorValor);
   aquí solo definimos el estado hover. */
.dc-chart g.row rect:hover {
    fill: var(--rpt-accent) !important;
}

.dc-chart g.axis path,
.dc-chart g.axis line {
    stroke: var(--rpt-border);
}

.dc-chart g.axis text {
    fill: var(--rpt-text-muted);
    font-size: 11px;
}

.dc-chart g.row text,
#chart-proc-01 text,
#chart-centro-directivo-01 text {
    fill: var(--rpt-text) !important;
    font-size: 12px;
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* Tooltips d3-tip */
.d3-tip {
    background: var(--rpt-text) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--rpt-radius-sm) !important;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .25) !important;
    padding: 8px 10px !important;
}

.d3-tip:after {
    color: var(--rpt-text) !important;
}

/* ---------- Ion Range Slider ---------- */

.irs--flat .irs-bar,
.irs-bar {
    background: var(--rpt-primary) !important;
}

.irs--flat .irs-handle,
.irs-slider {
    background: var(--rpt-primary-dark) !important;
}

.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
    background: var(--rpt-primary) !important;
}

/* ---------- Pie de página ---------- */

.main-footer {
    background: var(--rpt-primary-dark) !important;
    border-radius: var(--rpt-radius) var(--rpt-radius) 0 0;
    padding: 14px 18px;
}

/* ---------- Filtros Básicos ---------- */

.filtros-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.filtro-grupo {
    background: var(--rpt-surface-alt);
    border: 1px solid var(--rpt-border);
    border-radius: var(--rpt-radius-sm);
    padding: 10px 14px 12px;
    flex: 1 1 220px;
}

.filtro-grupo--solo {
    flex: 0 1 200px;
    display: flex;
    align-items: flex-end;
}

.filtro-grupo--ancho {
    flex: 1.4 1 320px;
}

.filtro-grupo-etiqueta {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--rpt-primary-dark);
    margin-bottom: 8px;
}

.filtro-grupo-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.filtro-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 140px;
}

.filtro-grupo--solo .filtro-item {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.filtro-item label {
    font-size: 12px;
    margin: 0;
    color: var(--rpt-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.filtro-item select {
    width: 100%;
}

/* En móvil, una sola columna limpia dentro de cada grupo, sin apreturas */
@media screen and (max-width: 560px) {
    .filtros-grid {
        flex-direction: column;
    }

    .filtro-grupo,
    .filtro-grupo--solo,
    .filtro-grupo--ancho {
        flex: 1 1 auto;
        width: 100%;
    }

    .filtro-grupo-items {
        flex-direction: column;
    }

    .filtro-item {
        width: 100%;
        flex: 1 1 40px;
    }
}

/* ---------- Tabla de detalle: mejoras de scroll horizontal ---------- */

/* dc.js ocultaba el DATO de "Centro Destino"/"Localidad" en móvil (regla
   heredada de rpt.css) pero no su CABECERA, así que las columnas quedaban
   descolocadas respecto a sus títulos. Ocultamos también el <th>. */
@media screen and (max-width: 800px) {

    .dc-data-table thead tr th:nth-child(2),
    .dc-data-table thead tr th:nth-child(3) {
        display: none;
    }
}

/* Columna "Puesto" fija a la izquierda al hacer scroll horizontal, para no
   perder de vista a qué puesto corresponde cada fila. */
.dc-data-table th:nth-child(4),
.dc-data-table td.dc-table-column._3 {
    position: sticky;
    left: 0;
    z-index: 2;
}

.dc-data-table th:nth-child(4) {
    background: var(--rpt-surface-alt);
}

.dc-data-table td.dc-table-column._3 {
    background: var(--rpt-surface);
}

.table>tbody>tr:nth-child(even)>td.dc-table-column._3 {
    background: #fbfcfc;
}

.table-hover>tbody>tr:hover>td.dc-table-column._3 {
    background: var(--rpt-primary-light) !important;
}

/* Separador visual entre la columna fija y el resto */
.dc-data-table th:nth-child(4),
.dc-data-table td.dc-table-column._3 {
    box-shadow: 3px 0 6px rgba(16, 24, 40, .12);
}

/* Aviso "desliza para ver más", solo visible en pantallas donde la tabla
   necesita scroll horizontal */
.tabla-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rpt-primary-dark);
    background: var(--rpt-primary-light);
    border-radius: var(--rpt-radius-sm) var(--rpt-radius-sm) 0 0;
    padding: 6px 10px;
}

@media screen and (max-width: 800px) {
    .tabla-scroll-hint {
        display: flex;
    }

    .table-responsive {
        border-radius: 0 0 var(--rpt-radius-sm) var(--rpt-radius-sm) !important;
    }
}

/* Sombra de desvanecido en el borde derecho: avisa de que hay más columnas
   por ver, y desaparece sola al llegar al final del scroll (truco CSS con
   varios fondos, sin JS) */
.table-responsive {
    background:
        linear-gradient(to right, var(--rpt-surface) 0%, rgba(255, 255, 255, 0) 100%) 0 0,
        linear-gradient(to left, var(--rpt-surface) 0%, rgba(255, 255, 255, 0) 100%) 100% 0,
        radial-gradient(farthest-side at 0% 50%, rgba(16, 24, 40, .18), rgba(0, 0, 0, 0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .18), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Barra de scroll más visible en táctil, a juego con la paleta */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--rpt-surface-alt);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--rpt-primary);
    border-radius: 999px;
}