/* ==========================================================================
   1. ESTILOS GLOBALES Y CONTENEDOR RAÍZ
   ========================================================================== */

#graficocronograma {
        position: relative !important; /* Ancla global para la línea de hoy */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 15px;
        background-color: #ffffff; /* Asegura un fondo sólido para la legibilidad */
        display: block;
        width: 100%;
    }
    
/* Este contenedor define el área real del calendario (descontando los 250px) */
.g-today-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 250px; /* Empezamos justo donde terminan los nombres de las plazas */
    right: 0;    /* Llegamos hasta el final */
    pointer-events: none;
    z-index: 100 !important; /* Forzamos que esté por encima en Chrome */
}
/* Línea dinámica que marca el día actual */
.g-today-line { 
    position: absolute; 
    top: 35px; /* Empieza debajo de los meses */
    bottom: 0; 
    width: 2px; 
    background-color: #000 !important; /* Forzamos el color negro */
    /* TRUCO PARA CHROME: Fuerza el renderizado por hardware (GPU) */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    visibility: visible !important;
    /*z-index: 100 !important;*/        
    pointer-events: none;
    margin-left: 0 !important;
    will-change: left;
    
}

/* Estilo para las líneas verticales de los meses */
.g-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e0e0e0; /* Gris claro para no molestar */
    z-index: 1 !important; /* Por debajo de las barras e hitos */
} 
html {
    scroll-behavior: smooth; /* Navegación fluida al usar anclajes internos */
}

.g-container { 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #333;
}

/* Cabecera del componente (Título e Iconos) */
.g-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; 
}

.g-main-title {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.g-icon-svg {
    margin-right: 8px;
    vertical-align: middle;
}

/* ==========================================================================
   2. FORMULARIO DE FILTRADO (Búsqueda y Acciones)
   ========================================================================== */

.g-filter-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f1f3f5;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

.g-filter-container label {
    font-size: 13px;
    font-weight: bold;
    color: #495057;
}

.g-filter-container input[type="date"] {
    padding: 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    color: #495057;
}

/* Estilos de botones de acción */
.g-btn-view {
    background-color: #0056b3;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.2s;
}

.g-btn-view:hover {
    background-color: #004494;
}

/* Variante para botón de limpiar filtros */
.g-btn-clear {
    background-color: #6c757d !important;
}

.g-btn-clear:hover {
    background-color: #5a6268 !important;
}

/* Botón de impresión con alineación a la derecha */
.g-btn-print {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    height: 34px;
    padding: 0 15px;
}

.g-btn-print:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.g-btn-push-right {
    margin-left: auto; /* Empuja el botón al extremo derecho en flexbox */
}

/* ==========================================================================
   3. CABECERA DEL CRONOGRAMA (Meses y Límites)
   ========================================================================== */

/* Regla de fechas en los extremos del gráfico */
.g-timeline-limits {
    display: flex;
    justify-content: space-between;
    margin-left: 250px; 
    font-size: 11px;
    font-weight: bold;
    color: #555;
    padding-bottom: 4px;
    border-bottom: 1px dashed #ccc;
}

.g-limit-date {
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Fila de meses superior */
.g-months { 
    display: flex; 
    margin-left: 250px; 
    border-bottom: 2px solid #333; 
    background-color: #f8f9fa;
}

.g-mon { 
    /*flex: 1;*/ 
    text-align: center; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 8px 0; 
    border-left: 1px solid #dee2e6; 
    box-sizing: border-box; /* Importante para que el borde no sume ancho */
}

/* Información de rango adicional */
.g-range-info {
    display: flex;
    justify-content: space-between;
    margin-left: 250px;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    padding-bottom: 4px;
    border-bottom: 1px dashed #ccc;
}

.g-range-info span {
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   4. FILAS Y ETIQUETAS (Grilla Principal)
   ========================================================================== */

.g-row-wrapper { 
    display: flex; 
    align-items: stretch; 
    border-bottom: 1px solid #e9ecef; 
}

/* Filas alternas y hover para accesibilidad visual (RD 11/2018) */
.g-row-wrapper:nth-child(even) { background-color: #f9f9f9; }
.g-row-wrapper:hover { background-color: #eff6ff; }

/* Columna izquierda con el nombre de la plaza */
.g-label { 
    width: 250px; 
    min-width: 250px; 
    font-size: 13px; 
    font-weight: 600; 
    padding: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    word-break: break-word; 
}

.g-label a { color: #0056b3; text-decoration: none; }
.g-label a:hover, .g-label a:focus { text-decoration: underline; outline: 2px solid #0056b3; }

/* Estilo para el número de orden circular */
.g-number {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #0056b3;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ==========================================================================
   5. EL CRONOGRAMA (Timeline, Barras e Hitos)
   ========================================================================== */

.g-timeline { 
    flex-grow: 1; 
    position: relative; 
    min-height: 45px;
    /* Líneas guía verticales por mes */
   /* background-image: linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
    background-size: 8.333% 100%;*/ 
}

/* Estilo general de las barras de hito */
.g-bar { 
    position: absolute; 
    height: 20px; 
    top: 12px; 
    border-radius: 4px; 
    /*z-index: 4; */
    z-index: 10 !important;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.2);
}

/* Estados de interacción para las barras */
.g-bar:focus { 
    outline: 3px solid #000; 
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
    z-index: 100; 
}

.g-bar:hover {
    filter: brightness(1.2); 
    transform: scaleY(1.1);   
    transition: all 0.2s ease;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    z-index: 100;             
}

/* Clases para indicar que un evento continúa fuera del rango visual */
.g-bar.is-cut-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}

.g-bar.is-cut-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}


.g-today-line::before {
    content: 'Hoy';
    position: absolute;
    top: 10px;
    left: -18px;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    background: #fff;
    padding: 2px 6px;
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 11;      /* Por encima de la propia línea */
}

/* ==========================================================================
   6. PALETA DE COLORES (Semántica de Eventos)
   ========================================================================== */

/* Publicaciones oficiales */
.h-bop    { background-color: #0056b3; border: 1px solid #003d7a; } /* Azul */
.h-boe    { background-color: #546e7a; border: 1px solid #37474f; } /* Gris */
.h-list-p { background-color: #ad1457; border: 1px solid #880e4f; } /* Rosa */
.h-list-d { background-color: #2e7d32; border: 1px solid #1b5e20; } /* Verde */

/* 1º Ejercicio (Ramas de Rojo/Naranja) */
.h-est-1  { background-color: #ffccbc; border: 1.5px dashed #d84315; }
.h-real-1 { background-color: #c62828; border: 1px solid #8e0000; }

/* 2º Ejercicio (Tonos Violeta/Celeste) */
.h-est-2  { background-color: #b3e5fc; border: 1.5px dashed #0277bd; } 
.h-real-2 { background-color: #6a1b9a; border: 1px solid #4a148c; } 

/* Eventos finales */
.h-pos    { background-color: #ef6c00; border: 1px solid #e65100; } /* Naranja */

/* ==========================================================================
   7. MENSAJES DE ESTADO Y RESULTADOS
   ========================================================================== */

.g-count-info {
    font-size: 13px;
    font-weight: bold;
    color: #495057;
    background-color: #e9ecef;
    padding: 8px 15px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: right;
    border-left: 4px solid #0056b3;
}

.g-no-results {
    margin: 20px 0;
    padding: 25px;
    background-color: #fff3cd; /* Color de aviso según WCAG */
    border: 1px solid #ffeeba;
    color: #856404;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

/* ==========================================================================
   8. LEYENDA Y DETALLE TÉCNICO
   ========================================================================== */

.g-legend-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.g-legend-title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 14px;
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
}

.g-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.g-legend-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333;
    line-height: 1.2;
}

.g-swatch {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.2);
}

/* Estilos de la tabla técnica inferior */
.g-tech-detail-section {
    margin-top: 30px;
    border-top: 3px solid #0056b3;
    padding-top: 15px;
    padding-bottom: 30px;
}

.g-legend-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    font-size: 13px;
}

.g-legend-table th {
    background-color: #444;
    color: #fff;
    padding: 10px;
    text-align: left;
}

.g-legend-table td {
    padding: 8px;
    border: 1px solid #ddd;
}

.g-col-num { width: 50px; text-align: center; }
.g-col-bold { font-weight: bold; }

/* Enlaces y su interactividad */
.g-label-link {
    text-decoration: none;
    color: #0056b3;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.g-label-link:hover, .g-label-link:focus {
    text-decoration: underline;
    outline: 2px solid #0056b3;
}

.g-link-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    color: #0056b3;
    vertical-align: middle;
}

.g-link-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Resalte de fila al navegar mediante anclaje (Target) */
.g-legend-table tr:target {
    background-color: #fff9c4;
    outline: 2px solid #fbc02d;
    transition: background-color 0.5s ease;
}

/* Aviso destacado al principio */
.g-notice-box-top {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff8e1; /* Amarillo muy suave */
    border: 2px solid #ffb300;  /* Borde ámbar más grueso */
    border-radius: 8px;
    padding: 15px 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.g-notice-icon-large {
    width: 32px;  /* Icono más grande */
    height: 32px;
    color: #f57c00;
    flex-shrink: 0;
}

.g-notice-content {
    font-size: 15px; /* Letra más grande y legible */
    line-height: 1.5;
    color: #4e342e;
}

.g-notice-content strong {
    color: #e65100;
}

/* ==========================================================================
   10. BANNER DE ACCESO AL CRONOGRAMA (Call to Action)
   ========================================================================== */

.g-banner-cronograma {
   display: flex !important;
    align-items: center;
    justify-content: space-between; /* Separa el texto del botón */
    gap: 30px;
    background-color: #f0f7ff;
    border: 1px solid #0056b3;
    border-left: 8px solid #0056b3;
    border-radius: 8px;
    padding: 25px 35px; /* Un poco más de aire lateral */
    margin: 25px 0;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.1);
    font-family: 'Segoe UI', Arial, sans-serif;
}

.g-banner-icon { 
    color: #0056b3; 
    flex-shrink: 0; 
}

.g-banner-body { 
    /* flex-grow: 1; */
     flex: 1;
    text-align: center; /* Centrado horizontal del bloque de texto */
    display: flex;
    flex-direction: column;
    align-items: center; /* Asegura que el contenido interno también se centre */
    gap: 5px;
}

.g-banner-body h3 {
  /*margin: 0 0 5px 0 !important;*/
  margin: 0 !important;
    text-align: center !important;
    color: #003366 !important;
    font-size: 1.4rem !important; /* Un poco más grande para mejor jerarquía */
    font-weight: 800 !important;
    border: none !important;
}

.g-banner-body p { 
   margin: 0 !important;
    text-align: center !important;
    max-width: 80%; /* Evita que el texto se estire demasiado en pantallas anchas */
    font-size: 14px;
    color: #444; 
    line-height: 1.4;
}

.g-btn-access {
   background-color: #0056b3;
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease; /* Transición suave */
    border: none;
    white-space: nowrap;
}

/* Interactividad y Foco de Accesibilidad (RD 11/2018) */
.g-btn-access:hover {
   background-color: #003d82;
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-decoration: none !important;
}

.g-btn-access:focus {
    outline: 3px solid #ffb300; /* Indicador de foco de alta visibilidad */
    outline-offset: 3px;
}

/* ==========================================================================
   9. MEDIA QUERIES (Responsividad e Impresión)
   ========================================================================== */

@media print {
    /* Ocultar elementos innecesarios en papel/PDF */
    .g-btn-print, .g-filter-container, .g-btn-view, .g-btn-clear, .cabpagina, #ajustardcha { 
        display: none !important; 
    }

    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .g-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10pt;
    }

    .g-row-wrapper {
        page-break-inside: avoid; /* Evita que una plaza se corte entre dos páginas */
    }

    .g-legend-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    .g-filter-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .g-btn-push-right {
        margin-left: 0;
        width: 100%;
    }

    .g-label {
        width: 100px;
        min-width: 100px;
        font-size: 11px;
    }

    /* Gestión del scroll horizontal para el gráfico en móviles */
    .g-months, .g-timeline-limits {
        margin-left: 100px;
        min-width: 700px; 
    }

    .g-row-wrapper {
        min-width: 800px; 
    }



    .g-legend-grid {
        grid-template-columns: 1fr;
    }
    /* Adaptación del banner en pantallas pequeñas */
    .g-banner-cronograma {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .g-btn-access {
        width: 100%; /* Botón ancho completo para facilitar la pulsación táctil */
    }
}