/* Paleta de Colores: Base Oscura (#0d1117), Acentos Vibrantes */
body {
overflow-X: hidden;
    font-family: 'Arial', sans-serif;
    background-color: #0d1117; /* Fondo Súper Oscuro */
    color: #e6edf3; /* Texto Principal Blanco/Claro */
    margin: 0;
    padding: 0; /* Padding movido al .container */
}
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px; /* Padding principal */
}
h1 {
    color: #ffc300; /* Azul brillante */
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 30px;
    font-size: 2.5em;
    text-shadow: 0 0 15px rgba(255, 195, 0, 0.5)
}
h2 {
    color: #7ee787; /* Verde Neón para secciones */
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #30363d;
    font-size: 1.8em;
}
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #0d1117, #58a6ff, #0d1117);
    margin: 40px 0;
}

/* Estilos de Tarjeta (Cards) */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.card {
    background-color: #161b22; 
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #30363d;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer; /* Añadido cursor para indicar interactividad */
}
.card:hover {
    border-color: #58a6ff; 
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(88, 166, 255, 0.2);
}
.card h3 {
    margin-top: 0;
    color: #c9d1d9;
    font-size: 1.2em;
    border-bottom: 1px solid #30363d;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Estilos de Valores en Tiempo Real */
.realtime-value {
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
    margin: 10px 0;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.unit {
    text-align: center;
    font-size: 0.9em;
    color: #8b949e;
}

/* Contenedores de Gráficos y Imágenes */
.chart-container, .image-container {
    background-color: #161b22;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #30363d;
    /* Asegurar la transición de estilos de resaltado */
    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.image-container {
    padding: 15px; 
}

/* ************************************** */
/* ESTILO DE RESALTADO DE GRÁFICA */
/* ************************************** */
.chart-container.chart-highlight {
    border-color: #ffab4c !important; /* Color de acento naranja/alerta */
    box-shadow: 0 0 20px rgba(255, 171, 76, 0.8), 0 0 5px rgba(255, 171, 76, 0.4);
}
/* ************************************** */

.image-container h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    border-bottom: 1px dashed #30363d;
    padding-bottom: 5px;
}
.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block; 
    margin: 0 auto; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); 
}

/* Contenedor para la disposición de gráficos en columnas */
.chart-layout {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px; 
    margin-bottom: 30px;
}

/* Media Query para pantallas grandes: 2 columnas */
@media (min-width: 992px) {
    .chart-layout {
        grid-template-columns: 1fr 1fr; 
    }
}

/* Botón de Reset Zoom */
.reset-button {
    background-color: #58a6ff;
    color: #0d1117;
    border: none;
    padding: 8px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    display: block; 
    margin-left: auto;
}
.reset-button:hover {
    background-color: #7ee787;
}


/* [CLASES DE COLORES] */
.flare-A { color: #8b949e; } 
.flare-B { color: #58a6ff; } 
.flare-C { color: #7ee787; } 
.flare-M { color: #ffab4c; } 
.flare-X { color: #ff7b72; } 
.bz-negative { color: #ff7b72; } 
.bz-positive { color: #7ee787; } 
.temp-alert { color: #ffab4c; } 
.temp-normal { color: #58a6ff; } 
.flux-low { color: #7ee787; }
.flux-high { color: #ff7b72; }

/* Lista de Llamaradas */
.flare-list {
    list-style: none;
    padding: 0;
}
.flare-list li {
    background-color: #1f2a37;
    margin-bottom: 8px;
    padding: 12px 15px;
    border-radius: 6px;
    border-left: 5px solid #ff7b72;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    font-size: 0.95em;
}
.flare-list strong {
    color: #ffab4c; 
}

/* Colores para el Veredicto */
.verdict-low { color: #7ee787; font-weight: bold; }
.verdict-minor { color: #58a6ff; font-weight: bold; }
.verdict-moderate { color: #ffab4c; font-weight: bold; }
.verdict-severe { color: #ff7b72; font-weight: bold; animation: pulse 1s infinite; }
.verdict-extreme { color: #f00; font-weight: bold; text-shadow: 0 0 5px #f00; animation: flash 0.5s infinite alternate; }

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
@keyframes flash {
    0% { background-color: rgba(255, 0, 0, 0.1); }
    100% { background-color: rgba(255, 0, 0, 0.2); }
}

/* ******************************************************* */
/* ESTILOS DEL CARTEL DE ALERTA FIJO (TOP BANNER) */
/* ******************************************************* */
#top-alert-banner {
    position: sticky; /* Fijo en la parte superior al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #58a6ff; /* Azul vibrante (default: Minor risk) */
    color: #0d1117; 
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border-bottom: 3px solid #0d1117;
}

#top-alert-banner button {
    background: none;
    border: none;
    color: #0d1117;
    font-size: 1.2em;
    cursor: pointer;
    transition: color 0.3s;
}

#top-alert-banner button:hover {
    color: #e6edf3;
}

#banner-content {
    flex-grow: 1;
}

/* Colores Dinámicos para el banner */
.banner-low { background-color: #7ee787; } /* Verde */
.banner-minor { background-color: #58a6ff; } /* Azul */
.banner-moderate { background-color: #ffab4c; } /* Naranja */
.banner-severe { background-color: #ff7b72; animation: banner-pulse 1s infinite; } /* Rojo */
.banner-extreme { background-color: #f00; animation: banner-flash 0.5s infinite alternate; } /* Rojo Extremo */

@keyframes banner-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}
@keyframes banner-flash {
    0% { background-color: #ff7b72; }
    100% { background-color: #f00; }
}
/* ******************************************************* */

/* Botón Back to Top */
#back-to-top-btn {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
    border: none;
    outline: none;
    background-color: #ffab4c; /* Naranja de alerta */
    color: #0d1117;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Botón redondo */
    font-size: 18px;
    opacity: 0.8;
    transition: opacity 0.3s, background-color 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#back-to-top-btn:hover {
    background-color: #ff7b72; /* Rojo al pasar el ratón */
    opacity: 1;
}
/* ========================================================= */
/* ESTILOS ESPECÍFICOS PARA LA TABLA DE REGIONES SOLARES */
/* ========================================================= */

.table-container {
    overflow-x: auto;
    max-width: 100%;
    margin-top: 15px;
    border: 1px solid #1f2937; 
    border-radius: 8px;
}

#solarRegionsTable {
    width: 100%;
    border-collapse: separate; /* CRUCIAL para el interlineado/espaciado */
    border-spacing: 0 5px;     /* Interlineado de 5px entre filas */
    font-size: 0.9em;
}

#solarRegionsTable th, #solarRegionsTable td {
    padding: 10px 12px;
    text-align: center;
    /* Remover border-bottom aquí para evitar doble línea */
}

/* Estilo de las filas del cuerpo */
#solarRegionsTable tbody tr {
    transition: background-color 0.3s ease;
    background-color: #161b22; /* Fondo de fila para contraste */
    border-radius: 6px; /* Bordes redondeados para las filas */
    overflow: hidden; /* Asegura que el color de fondo no se salga */
    display: table-row;
}

#solarRegionsTable tbody tr:hover {
    background-color: #1f2937; /* Resaltar fila al pasar el ratón */
}

/* Encabezado sin espaciado */
#solarRegionsTable thead tr {
    background-color: transparent; 
    border-radius: 0;
    margin-bottom: 0;
}
#solarRegionsTable thead th {
    background-color: #0d1117; /* Fondo del encabezado (oscuro) */
    color: #e6edf3;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 5px; /* Más espacio entre encabezado y primera fila de datos */
    border-bottom: 2px solid #3498db; /* Línea de color debajo del encabezado */
}

/* Columna de Clase Magnética (para severidad general de la fila) */
.mag-class-cell {
    font-weight: bold;
    color: white; 
    padding: 5px 8px;
    border-radius: 4px;
    display: inline-block; /* Para que el fondo se ajuste al texto */
    min-width: 40px;
}

/* ========================================================= */
/* COLORES DE SEVERIDAD GENERAL (Clase Magnética) */
/* ========================================================= */
.severity-low .mag-class-cell { background-color: #2ecc71; } /* Verde */
.severity-moderate .mag-class-cell { background-color: #f1c40f; } /* Amarillo */
.severity-high .mag-class-cell { background-color: #e67e22; } /* Naranja */
.severity-severe .mag-class-cell { background-color: #e74c3c; } /* Rojo */
.severity-unknown .mag-class-cell { background-color: #5e6b7c; } /* Gris */

/* ========================================================= */
/* COLORES CONDICIONALES PARA VALORES NUMÉRICOS (Área, Conteo) */
/* ========================================================= */

/* Rojo (Alto) */
.value-high {
    color: #e74c3c; /* Rojo: Valores muy altos */
    font-weight: bold;
}
/* Amarillo (Medio/Advertencia) */
.value-medium {
    color: #f1c40f; /* Amarillo: Valores notables */
}
/* Verde (Bajo/Normal) */
.value-low {
    color: #2ecc71; /* Verde: Valores bajos o típicos */
}
/* Blanco/Neutro (Neutro) */
.value-neutral {
    color: #e6edf3;
}

/* Rojo Intenso (Extremo) - Para valores muy altos como Área > 1000 */
.value-extreme {
    color: #ff0000; /* Rojo más brillante */
    font-weight: 900;
}

/* Rojo (Alto) */
.value-high {
    color: #e74c3c; /* Rojo: Valores altos */
    font-weight: bold;
}
/* Amarillo (Medio/Advertencia) */
.value-medium {
    color: #f1c40f; /* Amarillo: Valores notables */
}
/* Verde (Bajo/Normal) */
.value-low {
    color: #2ecc71; /* Verde: Valores bajos o típicos */
}
/* Blanco/Neutro (Neutro) */
.value-neutral {
    color: #e6edf3;
}

/* --- Estilos de Alerta para Escalas NOAA (G, S, R) --- */
.alert-quiet {
    color: #4CAF50; /* Verde para nivel 0 */
}

/* Niveles G, S, R = 1 (Minor) */
.alert-G1, .alert-S1, .alert-R1 {
    color: #FFEB3B; /* Amarillo Claro */
}

/* Niveles G, S, R = 2 (Moderate) */
.alert-G2, .alert-S2, .alert-R2 {
    color: #FF9800; /* Naranja */
    font-weight: bold;
}

/* Niveles G, S, R = 3 (Strong) */
.alert-G3, .alert-S3, .alert-R3 {
    color: #F44336; /* Rojo */
    font-weight: bold;
    font-size: 1.2em;
}

/* Niveles G, S, R = 4 (Severe) */
.alert-G4, .alert-S4, .alert-R4 {
    color: #9C27B0; /* Púrpura */
    font-weight: bold;
    font-size: 1.3em;
}

/* Niveles G, S, R = 5 (Extreme) */
.alert-G5, .alert-S5, .alert-R5 {
    color: #2196F3; /* Azul o similar para un impacto crítico */
    font-weight: bold;
    font-size: 1.4em;
    text-shadow: 0 0 5px #2196F3;
}

/* --- Estilos para la Nueva Sección de Mensajes de Alerta --- */

.alert-messages-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre cada alerta */
}

.alert-message-card {
    background-color: #161b22; /* Un tono ligeramente más claro que el fondo para destacarse */
    border: 1px solid #30363d; /* Borde sutil */
    border-radius: 6px;
    padding: 15px;
    overflow-x: auto; /* Permite desplazamiento horizontal si el mensaje es muy largo */
    font-size: 0.9em;
}

.alert-title {
    color: #58a6ff; /* Color de acento para el título/hora */
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.alert-body {
    white-space: pre-wrap; /* Respeta saltos de línea sin <br> si es necesario, aunque ya usamos <br> */
    line-height: 1.5;
    margin: 0;
}

/* ========================================================= */
/* ESTILO FINAL: INTEGRACIÓN SOLO A .time-controls button */
/* ========================================================= */

/* Contenedor: Alineación y Agrupación */
.time-controls {
    display: flex;
    justify-content: flex-end; 
    gap: 0; 
    margin-top: 10px;
}

/* Estilo Base: Aplicado a todos los botones dentro de .time-controls */
.time-controls button {
    /* *** RESET AGRESIVO DE ESTILOS DE NAVEGADOR *** */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    
    /* Integración Visual (Color de fondo base integrado) */
    background-color: #21262d !important; 
    border: 1px solid #30363d !important; 
    color: #e6edf3 !important;           /* Texto claro */
    
    padding: 6px 12px;
    font-size: 0.85em; 
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    
    /* Forma y Agrupación */
    border-radius: 0; 
    position: relative; 
    z-index: 1; 
}

/* Ajuste de esquinas y bordes para el primer botón (izquierda) */
.time-controls button:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-right-color: transparent !important; /* Une el borde */
}

/* Ajuste de esquinas para el último botón (derecha) */
.time-controls button:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-right: 1px solid #30363d !important; /* Asegura el borde final */
}

/* Efecto al pasar el ratón (Hover) en botones INACTIVOS */
.time-controls button:hover:not(.active-period) {
    background-color: #30363d !important; 
    color: #58a6ff !important; /* El texto toma el color de acento al pasar el ratón */
}

/* --- ESTILO PARA EL BOTÓN ACTIVO (SELECCIONADO) --- */

.time-controls button.active-period {
    background-color: #58a6ff !important; /* Fondo Azul brillante (Acento) */
    color: #0d1117 !important; /* Texto muy oscuro */
    border-color: #58a6ff !important;
    font-weight: bold !important;
    z-index: 2; 
}

/* El botón activo no debe cambiar de color al hacer hover */
.time-controls button.active-period:hover {
    background-color: #4b94e3 !important; 
    border-color: #4b94e3 !important;
}

/* ========================================================= */
/* NUEVOS ESTILOS DE NAVEGACIÓN Y FOOTER */
/* ========================================================= */

/* NAVEGACIÓN */
#nav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    border-bottom: 2px solid #161b22; 
    margin-bottom: 30px;
}

.nav-link-btn {
    background: transparent;
    border: none;
    padding: 15px 25px; 
    cursor: pointer;
    color: #e6edf3;
    font-size: 1.2em;
    transition: color 0.3s ease;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px; 
    border-bottom: 3px solid transparent; 
    font-weight: normal;
}

.nav-link-btn:hover {
    background-color: #30363d !important;
    color: #ffc300 !important
}

/* Estilo para marcar el enlace a la Estación Live como activo */
.nav-link-btn.active-link-style {
    border-bottom: 3px solid #ffc300 !important;
    color: #ffc300;
    font-weight: bold;
}

/* FOOTER */
footer {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid #161b22;
    font-size: 0.9em;
    color: #6a737d; 
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

footer strong {
    color: #6a737d;
}

footer a {
    color: #E1306C;
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: #ffc300;
}

/* ========================================================= */
/* MEJORA VISUAL: LISTA DE LLAMARADAS */
/* ========================================================= */

/* Contenedor principal de la tarjeta (Flare Card) */
.flare-card {
    /* Mantenemos el estilo anterior, pero nos aseguramos de que el borde sea limpio */
    border: 1px solid rgba(48, 54, 61, 0.7); /* Borde más sutil */
    border-radius: 10px; 
    overflow: hidden; /* Asegura que todo el contenido respeta las esquinas */
}

/* Título (card-title) - Aumentamos el contraste */
.flare-card .card-title {
    background-color: #1f242c; /* Tono ligeramente más claro que el fondo de la tarjeta */
    border-bottom: 1px solid #2d333b; /* Línea de separación clara */
}


/* Estilo de cada elemento de la lista LI */
.flare-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0; /* Aumentamos el padding vertical para más aire */
    border-bottom: 1px solid rgba(48, 54, 61, 0.5); /* Separador más tenue */
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

/* Efecto hover profesional */
.flare-list-item:hover {
    background-color: rgba(255, 255, 255, 0.03); /* Tono muy sutil */
}

/* Eliminamos el borde del último elemento para que no choque con la esquina inferior */
#recent-flares-container .flare-list-item:last-child {
    border-bottom: none;
}

/* Estilo para la "Etiqueta" de la Clase de Llamarada (C, M, X) */
.flare-badge {
    /* Convierte el texto en un 'Pill' o 'Badge' visualmente atractivo */
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 55px; /* Ancho fijo para alineación */
    text-align: center;
    /* Ajusta los colores específicos para dar más profundidad */
}

/* Colores de las insignias: Usamos un fondo sutil y el texto vibrante */

/* X Class (Rojo) */
.flare-badge.text-red-500 {
    background-color: rgba(220, 38, 38, 0.15); /* Fondo rojo oscuro y transparente */
    color: #dc2626; /* Texto Rojo Brillante */
}

/* M Class (Amarillo) */
.flare-badge.text-yellow-400 {
    background-color: rgba(252, 211, 77, 0.15); /* Fondo amarillo oscuro y transparente */
    color: #fcd34d; /* Texto Amarillo Brillante */
}

/* C Class (Verde/Cian) */
.flare-badge.text-green-400 {
    background-color: rgba(16, 185, 129, 0.15); /* Fondo verde/cian oscuro y transparente */
    color: #10b981; /* Texto Cian/Verde Brillante */
}

/* Estilo para la región activa */
.region-number {
    font-size: 1rem;
}

/* Estilos para el Botón de Notificación */
#request-notification-btn {
    /* Estado inicial/Habilitado */
    background-color: var(--accent-color);
    color: var(--bg-dark); /* Color de texto oscuro para alto contraste */
    cursor: pointer;
    border: none;
}

/* Estado Deshabilitado (Cuando ya hay permiso o el navegador no lo soporta) */
#request-notification-btn:disabled {
    background-color: #30363d; /* Color gris suave */
    color: #99a2ad; /* Texto gris claro */
    cursor: not-allowed;
}

/* Estilos para las etiquetas de estado */
.status-granted {
    color: #5cb85c; /* Verde para 'Permitido' */
}

.status-denied {
    color: #dc2626; /* Rojo para 'Denegado' */
}
/* Contenedor para alinear los botones */
.chart-controls-wrapper {
    display: flex;
    justify-content: flex-start; /* Alineados a la izquierda */
    gap: 12px;                  /* Espacio entre botones */
    margin-bottom: 20px;        /* Separación con los gráficos */
}

/* Estilo para tu botón de Exportar */
.btn-export-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #238636; /* Verde tipo GitHub, profesional */
    color: white;
    border: 1px solid rgba(240, 246, 252, 0.1);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-export-tool:hover {
    background-color: #2ea043;
}

/* Ajuste opcional para que el de Resetear Zoom combine en tamaño */
.reset-button {
    padding: 8px 16px;
    font-size: 13px;
    /* Mantén el resto de tu estilo original de .reset-button */
}
/* ========================================================= */
/* FIN DE NUEVOS ESTILOS */
/* ========================================================= */
/* --- INTEGRACIÓN NATIVA ANALISTA IA --- */
.ai-module-wrapper {
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 30px;
    margin-bottom: 30px;
}

.ai-flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ai-icon-box {
    width: 60px;
    height: 60px;
    background: rgba(88, 166, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #58a6ff;
    margin-bottom: 15px;
    border: 1px solid #30363d;
}

.ai-text-muted {
    color: #8b949e;
    font-size: 14px;
    margin-bottom: 20px;
}

.ai-loading-icon {
    font-size: 40px;
    color: #bc8cff;
}

.ai-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #30363d;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.ai-badge-status {
    font-size: 11px;
    font-weight: bold;
    color: #58a6ff;
    background: rgba(56, 139, 253, 0.1);
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #30363d;
}

.ai-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 900px) {
    .ai-grid-layout { grid-template-columns: repeat(3, 1fr); }
}

.ai-card-item {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 15px;
}

.ai-response-box {
    font-size: 13px;
    line-height: 1.6;
    color: #c9d1d9;
}

.ai-response-box.italic {
    font-style: italic;
    color: #8b949e;
}

.hidden { display: none !important; }


/* ========================================================= */
/* DISEÑO DINÁMICO PARA MÓVILES (Tablas tipo Tarjeta)       */
/* ========================================================= */
@media screen and (max-width: 768px) {
    
    /* Aseguramos que el contenedor de la tabla no tenga scrolls extra */
    .table-container {
        border: none !important;
        overflow-x: visible !important;
    }

    /* Transformación de la Tabla a Bloque */
    #solarRegionsTable {
        display: block !important;
        width: 100% !important;
        border-spacing: 0 !important;
    }

    /* Ocultamos el encabezado en móvil */
    #solarRegionsTable thead {
        display: none !important;
    }

    #solarRegionsTable tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Cada fila se convierte en una Tarjeta Independiente */
    #solarRegionsTable tbody tr {
        display: block !important;
        width: 100% !important;
        background-color: #161b22 !important;
        border: 1px solid #30363d !important;
        border-radius: 10px !important;
        margin-bottom: 20px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Las celdas se alinean: Nombre a la izq, Valor a la der */
    #solarRegionsTable td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 8px !important;
        border-bottom: 1px solid #21262d !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    #solarRegionsTable td:last-child {
        border-bottom: none !important;
    }

    /* Inyección de etiquetas (Labels) desde el JS */
    #solarRegionsTable td::before {
        content: attr(data-label);
        font-weight: bold !important;
        color: #7ee787 !important; /* Tu verde neón */
        text-transform: uppercase;
        font-size: 0.75rem;
        flex: 1;
        text-align: left;
    }

    /* Ajuste para que los valores no empujen la tarjeta */
    .mag-class-cell {
        margin: 0 !important;
        display: inline-block !important;
    }

    /* --- AJUSTE DE GRÁFICAS (Para que no se vean pequeñas) --- */
    .chart-container {
        padding: 15px !important;
        height: 400px !important; /* Altura fija para evitar el efecto 'enano' */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    canvas {
        width: 100% !important;
        height: 100% !important;
    }
}