/* ====================================
   CARACTERÍSTICAS DE ESTA PALETA COMPLETA PARA ESPAÑA:
   
   • Progresión completa: Azul ? Cian ? Verde ? Amarillo ? Naranja ? Rojo ? Fucsia
   • Compatible con ISO-8859-1
   • Rangos completos: 0°C hasta >45°C (incluye 0-5°C)
   • 11 niveles principales (limpio y completo)
   • Rosa fucsia MUY llamativo para >45°C
   • Progresión lógica de temperaturas
   • Sin etiquetas incorrectas de "ola de calor"
   • Estadísticas precisas: cuenta DÍAS reales con temperaturas extremas
   • Perfecto para clima mediterráneo/continental español
==================================== *//* 
 * TEMPDETAIL-MODERN.CSS - VERSIÓN CON SOPORTE PARA TEMPERATURAS EXTREMAS
 * Compatible con ISO-8859-1 y navegadores antiguos
 * Modificado por Antonio Ruiz - 2025-07-19 - HEADER UNIFICADO
 */

/* ====================================
   RESET Y ESPACIADO GLOBAL
==================================== */

/* Eliminar espacios innecesarios */
#main-copy br {
    display: none !important;
}

#main-copy {
    background: #f8f9fa !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* ====================================
   ENCABEZADO MINIMALISTA UNIFICADO
==================================== */

/* NO ocultar los h2 y h3 originales todavía */
/*
#report h2 {
    display: none !important;
}

#report h3 {
    display: none !important;
}
*/

/* Nuevo header minimalista - VERSIÓN UNIFICADA */
.header-minimalista {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: white !important;
    padding: 1rem 1.5rem !important;
    margin: 0 0 1rem 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important; /* CAMBIADO: nunca wrap */
    gap: 1rem !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    border-bottom: 3px solid #3498db !important;
}

.header-minimalista .titulo-principal {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 !important;
    white-space: nowrap !important; /* AÑADIDO */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.header-minimalista .controles-año {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    flex-shrink: 0 !important; /* AÑADIDO */
}

.header-minimalista .controles-linea {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    flex-shrink: 0 !important; /* AÑADIDO */
}

.header-minimalista .radio-controles {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: nowrap !important; /* CAMBIADO */
    white-space: nowrap !important; /* AÑADIDO */
}

.header-minimalista .fecha-actualización {
    font-size: 0.85rem !important;
    color: #ecf0f1 !important;
    white-space: nowrap !important;
}

/* Título debajo - MANTENER SIEMPRE EN MISMA POSICIÓN */
.titulo-principal-debajo {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #fff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    white-space: nowrap !important; /* AÑADIDO */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Estilos para los controles dentro del header */
.header-minimalista select {
    padding: 0.4rem 0.8rem !important;
    border: 1px solid #95a5a6 !important;
    border-radius: 4px !important;
    background: white !important;
    color: #2c3e50 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important; /* AÑADIDO */
    flex-shrink: 0 !important; /* AÑADIDO */
}

.header-minimalista input[type="submit"] {
    padding: 0.4rem 1rem !important;
    background: #3498db !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important; /* AÑADIDO */
    flex-shrink: 0 !important; /* AÑADIDO */
}

.header-minimalista input[type="submit"]:hover {
    background: #2980b9 !important;
}

.header-minimalista input[type="radio"] {
    margin-right: 0.4rem !important;
    flex-shrink: 0 !important; /* AÑADIDO */
}

.header-minimalista label {
    color: white !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important; /* AÑADIDO */
}

/* ====================================
   CONTROLES DEL FORMULARIO
==================================== */

/* NO ocultar los controles originales todavía */
/*
.getreportdtbx {
    display: none !important;
}
*/

.getreportdtbx {
    background: white !important;
    padding: 1.2rem !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    margin: 0 0 0.8rem 0 !important;
    border: none !important;
}

.getreportdtbx select {
    padding: 0.6rem 1rem !important;
    border: 2px solid #e1e8ed !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    margin-right: 0.8rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
    color: #2c3e50 !important;
}

.getreportdtbx select:focus {
    outline: none !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
}

.getreportdtbx input[type="submit"] {
    padding: 0.6rem 1.2rem !important;
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2) !important;
}

.getreportdtbx input[type="submit"]:hover {
    background: linear-gradient(135deg, #2980b9, #1f5582) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 12px rgba(52, 152, 219, 0.3) !important;
}

/* ====================================
   BOTONES DE NAVEGACIÓN EN DOS FILAS
==================================== */

.weather-nav-container-two-rows {
    margin: 0 !important;
    padding: 0.5rem 0.8rem 0.2rem 0.8rem !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.weather-nav-row {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.weather-nav-row:last-child {
    margin-bottom: 0 !important;
}

.weather-nav-row form {
    margin: 0 !important;
}

.weather-nav-row input[type="submit"] {
    font-size: 14px !important;
    padding: 10px 15px !important;
    white-space: nowrap !important;
    border: 1px solid #ddd !important;
    background: #f8f9fa !important;
    color: #333 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    min-width: 140px !important;
}

.weather-nav-row input[type="submit"]:hover:not(:disabled) {
    background: #e9ecef !important;
    border-color: #999 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

.weather-nav-row input[type="submit"]:disabled {
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    cursor: default !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3) !important;
}

/* Eliminar cualquier espacio extra del formulario */
form[name="myForm"] {
    margin-bottom: 0 !important;
}

/* Eliminar espacio antes de los botones meteorológicos */
form[name="myForm"] + div {
    margin-top: 0 !important;
}

/* ====================================
   TABLA PRINCIPAL
==================================== */

#report table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.85rem !important;
    border: none !important;
}

/* Encabezados de tabla */
#report table th {
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
    color: white !important;
    padding: 0.8rem 0.4rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    border-bottom: 2px solid #3498db !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

#report table th.labels {
    background: linear-gradient(135deg, #34495e, #2c3e50) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* Celdas de datos */
#report table td {
    padding: 0.5rem 0.3rem !important;
    text-align: center !important;
    border-bottom: 1px solid #ecf0f1 !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Columna de días */
.reportdt {
    background: linear-gradient(135deg, #34495e, #2c3e50) !important;
    color: white !important;
    font-weight: 600 !important;
    border-right: 2px solid #3498db !important;
    width: 40px !important;
}

.noday {
    background-color: #ffffff !important;
    color: #999999 !important;
    border: 1px solid #e1e8ed !important;
}

.noday::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 2px !important;
    height: 2px !important;
    background: #34495e !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.3 !important;
}

/* Datos sin valor */
.reportday {
    background: #f8f9fa !important;
    color: #7f8c8d !important;
}

/* Separadores */
.separator {
    background: #e6e6e6 !important;
    height: 5px !important;
    padding: 0 !important;
}

/* Títulos de resumen */
.reportttl {
    background: #34495e !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.8rem 0.5rem !important;
    border-right: 2px solid #2c3e50 !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* ====================================
   PALETA DE COLORES COMPLETA PARA ESPAÑA
   Progresión completa: 0°C a >45°C
==================================== */

/* PALETA COMPLETA - PROGRESIÓN AZUL A FUCSIA */
.level_1 { background: #0066cc !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul medio - Muy frío */
.level_2 { background: #0099cc !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul claro - Frío */
.level_3 { background: #00ccff !important; color: #000000 !important; font-weight: bold !important; }  /* Cian - Fresco */
.level_4 { background: #00ffcc !important; color: #000000 !important; font-weight: bold !important; }  /* Verde-cian - Templado */
.level_5 { background: #00ff99 !important; color: #000000 !important; font-weight: bold !important; }  /* Verde - Agradable */
.level_6 { background: #ccff00 !important; color: #000000 !important; font-weight: bold !important; }  /* Amarillo-verde - Cálido */
.level_7 { background: #ffff66 !important; color: #000000 !important; font-weight: bold !important; }  /* Amarillo - Caliente */
.level_8 { background: #ffcc00 !important; color: #000000 !important; font-weight: bold !important; }  /* Naranja-amarillo - Muy caliente */
.level_9 { background: #ff6600 !important; color: #ffffff !important; font-weight: bold !important; }  /* Naranja-rojo - 35-40°C */
.level_10 { 
    background: #ff0000 !important; 
    color: #ffffff !important; 
    font-weight: bold !important; 
    border: 2px solid #cc0000 !important;
}  /* Rojo puro con borde - Días muy calurosos (40-45°C) */

.level_11 { 
    background: #ff1493 !important; 
    color: #ffffff !important; 
    font-weight: bold !important;
    border: 3px solid #ff0000 !important;
}  /* Rosa fucsia intenso - Temperaturas extremas (>45°C) */

/* Niveles adicionales por si acaso (solo para compatibilidad) */
.level_15 { background: #ff69b4 !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff0000 !important; }
.level_16 { background: #660000 !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff0000 !important; }
.level_18 { background: #4B0082 !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff00ff !important; }
.level_19 { background: #800080 !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff00ff !important; }
.level_20 { background: #2F004F !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff00ff !important; }

/* Resto de niveles para compatibilidad del código */
.level_21 { background: #1A0033 !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff0000 !important; }
.level_22 { background: #000033 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_23 { background: #000066 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_24 { background: #000099 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_25 { background: #0000cc !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_26 { background: #0000ff !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_27 { background: #000000 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_28 { background: #000000 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_29 { background: #000000 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }
.level_30 { background: #000000 !important; color: #ff0000 !important; font-weight: bold !important; border: 4px solid #ff0000 !important; }

/* ====================================
   CLASES ESPECIALES PARA ALERTAS (SIN CARACTERES ESPECIALES)
==================================== */

.extreme-heat-warning-simple {
    position: relative !important;
}

.extreme-heat-warning-simple:after {
    content: "!" !important;
    position: absolute !important;
    top: -2px !important;
    right: 2px !important;
    font-size: 10px !important;
    color: #ffff00 !important;
    font-weight: bold !important;
    background: #ff0000 !important;
    width: 8px !important;
    height: 8px !important;
    text-align: center !important;
    line-height: 8px !important;
    border-radius: 4px !important;
}

.lethal-heat-warning {
    position: relative !important;
}

.lethal-heat-warning:after {
    content: "X" !important;
    position: absolute !important;
    top: -2px !important;
    right: 2px !important;
    font-size: 8px !important;
    color: #ffffff !important;
    font-weight: bold !important;
    background: #000000 !important;
    width: 10px !important;
    height: 10px !important;
    text-align: center !important;
    line-height: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #ff0000 !important;
}

/* Efectos hover solo para temperaturas extremas españolas */
.level_10:hover {
    background: #ff6600 !important;
    border: 3px solid #ffff00 !important;
}

.level_11:hover {
    background: #ff69b4 !important;
    border: 3px solid #ffff00 !important;
}

/* ====================================
   TABLA DE COLORES MEJORADA
==================================== */

.colorband {
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
    color: white !important;
    padding: 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* Estilos para la leyenda de alertas */
.temperature-legend {
    background: #fff3cd !important;
    border: 1px solid #ffeaa7 !important;
    padding: 8px !important;
    margin: 5px 0 !important;
    font-size: 11px !important;
    color: #856404 !important;
}

.temperature-legend strong {
    color: #721c24 !important;
}

/* ====================================
   COMPATIBILIDAD CON NAVEGADORES ANTIGUOS
==================================== */

/* Para IE8 y anteriores */
.level_17, .level_18, .level_19, .level_20, .level_21, .level_22, .level_23, .level_24, .level_25 {
    filter: progid:DXImageTransform.Microsoft.Glow(color=#ff0000, strength=2) !important;
}

/* Fallback para navegadores que no soportan border-radius */
.extreme-heat-warning-simple:after,
.lethal-heat-warning:after {
    border: 1px solid !important;
}

/* ====================================
   PIE DE PÁGINA
==================================== */

.dev {
    background: #34495e !important;
    color: #ecf0f1 !important;
    padding: 1rem !important;
    text-align: center !important;
    border-radius: 8px !important;
    margin-top: 2rem !important;
    font-size: 0.85rem !important;
}

.dev a {
    color: #3498db !important;
    text-decoration: none !important;
}

.dev a:hover {
    color: #5dade2 !important;
    text-decoration: underline !important;
}

/* ====================================
   DISEÑO RESPONSIVO CORREGIDO
   (SOLUCIÓN: Solo reducir tamaños, NO cambiar layout)
==================================== */

@media (max-width: 1024px) {
    /* ELIMINADO: flex-direction: column - CAUSA DEL PROBLEMA */
    /* ELIMINADO: align-items: flex-start - CAUSA DEL PROBLEMA */
    
    .header-minimalista .radio-controles {
        gap: 1rem !important;
    }
    
    .weather-nav-row input[type="submit"] {
        font-size: 13px !important;
        padding: 8px 12px !important;
        min-width: 120px !important;
    }
    
    .weather-nav-row {
        margin-bottom: 10px !important;
    }
}

@media (max-width: 768px) {
    .header-minimalista {
        padding: 0.8rem 1rem !important;
    }
    
    /* ELIMINADO: cambio de font-size del título - mantener original */
    /* ELIMINADO: flex-wrap: wrap - CAUSA DEL PROBLEMA */
    /* ELIMINADO: gap reducido - CAUSA DEL PROBLEMA */
    
    .header-minimalista .fecha-actualización {
        font-size: 0.8rem !important;
    }
    
    #report table {
        font-size: 0.75rem !important;
    }
    
    #report table th,
    #report table td {
        padding: 0.4rem 0.2rem !important;
    }
    
    .weather-nav-row input[type="submit"] {
        font-size: 12px !important;
        padding: 7px 10px !important;
        min-width: 110px !important;
    }
    
    .weather-nav-row {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    
    .weather-nav-container-two-rows {
        padding: 0.6rem !important;
    }
    
    /* Simplificar efectos para móviles - solo para niveles extremos españoles */
    .level_10, .level_11 {
        border-width: 2px !important;
    }
}

@media (max-width: 480px) {
    /* ELIMINADO: flex-wrap: wrap - CAUSA DEL PROBLEMA */
    /* ELIMINADO: gap reducido - CAUSA DEL PROBLEMA */
    
    #report table {
        font-size: 0.7rem !important;
    }
    
    #report table th,
    #report table td {
        padding: 0.3rem 0.1rem !important;
    }
    
    .weather-nav-row input[type="submit"] {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-width: 95px !important;
    }
    
    .weather-nav-row {
        gap: 5px !important;
        margin-bottom: 6px !important;
    }
    
    .weather-nav-container-two-rows {
        padding: 0.5rem !important;
    }
}

/* AÑADIDO: Para pantallas muy pequeñas, solo ajustar textos pero mantener layout */
@media (max-width: 400px) {
    .header-minimalista {
        padding: 0.6rem 0.8rem !important;
    }
    
    .header-minimalista label {
        font-size: 0.8rem !important;
    }
    
    .titulo-principal-debajo {
        font-size: 1rem !important;
    }
    
    .header-minimalista .radio-controles {
        gap: 0.8rem !important;
    }
}

/* ====================================
   HOVER HORIZONTAL SIMPLE Y LIMPIO
   Reemplazar TODO el CSS de hover anterior con este
==================================== */

/* Hover simple por fila - Solo fondo y bordes */
#report table tr:hover {
    background-color: rgba(52, 152, 219, 0.15) !important;
    outline: 2px solid #3498db !important;
    outline-offset: -1px !important;
}

/* Solo mejorar texto en hover */
#report table tr:hover td {
    font-weight: 600 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}

/* Columna de días con efecto simple */
#report table tr:hover .reportdt {
    background: #3498db !important;
    color: white !important;
}

/* Títulos de resumen */
#report table tr:hover .reportttl {
    background: #3498db !important;
    color: white !important;
}

/* Cursor pointer */
#report table tr {
    cursor: pointer;
}

/* Transición suave solo para lo esencial */
#report table tr {
    transition: background-color 0.2s ease !important;
}

#report table td {
    transition: font-weight 0.2s ease !important;
}

/* No tocar separadores */
#report table tr:hover .separator {
    background: #e6e6e6 !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

/* ====================================
   PALETA MEJORADA PARA PRESIÓN BAROMÉTRICA
   Progresión visual clara pero apropiada
   Colores distintivos sin exagerar
   AÑADIDO: Nivel extra para 1035-1040 y >1040 fucsia
==================================== */

/* PALETA EQUILIBRADA: Azul ? Verde ? Amarillo ? Naranja ? Fucsia para extremos */
.baro-table .level_1 { background: #1565c0 !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul profundo - Muy baja (<980 hPa) */
.baro-table .level_2 { background: #1976d2 !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul medio - Baja (980-985 hPa) */
.baro-table .level_3 { background: #1e88e5 !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul medio-claro (985-990 hPa) */
.baro-table .level_4 { background: #2196f3 !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul estándar (990-995 hPa) */
.baro-table .level_5 { background: #42a5f5 !important; color: #ffffff !important; font-weight: bold !important; }  /* Azul claro (995-1000 hPa) */
.baro-table .level_6 { background: #4caf50 !important; color: #ffffff !important; font-weight: bold !important; }  /* Verde - Presión normal (1000-1005 hPa) */
.baro-table .level_7 { background: #66bb6a !important; color: #ffffff !important; font-weight: bold !important; }  /* Verde claro (1005-1010 hPa) */
.baro-table .level_8 { background: #81c784 !important; color: #000000 !important; font-weight: bold !important; }  /* Verde muy claro (1010-1015 hPa) */
.baro-table .level_9 { background: #aed581 !important; color: #000000 !important; font-weight: bold !important; }  /* Verde-amarillo (1015-1020 hPa) */
.baro-table .level_10 { background: #dce775 !important; color: #000000 !important; font-weight: bold !important; } /* Amarillo-verde (1020-1025 hPa) */
.baro-table .level_11 { background: #fff176 !important; color: #000000 !important; font-weight: bold !important; } /* Amarillo - Alta (1025-1030 hPa) */
.baro-table .level_12 { background: #ffb74d !important; color: #000000 !important; font-weight: bold !important; } /* Naranja claro - Muy alta (1030-1035 hPa) */

/* AÑADIDO: Niveles para presiones extremas */
.baro-table .level_13 { background: #ff8a65 !important; color: #ffffff !important; font-weight: bold !important; border: 2px solid #ff5722 !important; } /* Naranja intenso - Extremadamente alta (1035-1040 hPa) */
.baro-table .level_14 { background: #ff1493 !important; color: #ffffff !important; font-weight: bold !important; border: 3px solid #ff0066 !important; } /* Fucsia intenso - Récord absoluto (>1040 hPa) */

/* ====================================
   ALTERNATIVA: PALETA VERDE-AZUL MÁS NATURAL
==================================== */

/* Si prefieres una paleta más natural, comenta la de arriba y usa esta: */
/*
.baro-table .level_1 { background: #ffecb3 !important; color: #e65100 !important; font-weight: bold !important; }  Amarillo claro - Muy baja
.baro-table .level_2 { background: #fff9c4 !important; color: #ef6c00 !important; font-weight: bold !important; }  Amarillo muy claro
.baro-table .level_3 { background: #f0f4c3 !important; color: #689f38 !important; font-weight: bold !important; }  Verde-amarillo claro
.baro-table .level_4 { background: #dcedc1 !important; color: #558b2f !important; font-weight: bold !important; }  Verde claro
.baro-table .level_5 { background: #c8e6c9 !important; color: #388e3c !important; font-weight: bold !important; }  Verde medio-claro
.baro-table .level_6 { background: #a5d6a7 !important; color: #2e7d32 !important; font-weight: bold !important; }  Verde medio - Normal
.baro-table .level_7 { background: #81c784 !important; color: #1b5e20 !important; font-weight: bold !important; }  Verde medio-oscuro
.baro-table .level_8 { background: #66bb6a !important; color: #ffffff !important; font-weight: bold !important; }  Verde oscuro
.baro-table .level_9 { background: #4caf50 !important; color: #ffffff !important; font-weight: bold !important; }  Verde intenso
.baro-table .level_10 { background: #388e3c !important; color: #ffffff !important; font-weight: bold !important; } Verde muy intenso
.baro-table .level_11 { background: #2e7d32 !important; color: #ffffff !important; font-weight: bold !important; } Verde profundo - Muy alta
*/

/* ====================================
   ESTILOS ESPECÍFICOS PARA PRESIÓN BAROMÉTRICA
==================================== */

/* Hover específico para presión barométrica */
.baro-table tr:hover {
    background-color: rgba(33, 150, 243, 0.1) !important;
    outline: 2px solid #2196f3 !important;
    outline-offset: -1px !important;
}

.baro-table tr:hover .reportdt {
    background: #2196f3 !important;
    color: white !important;
}

.baro-table tr:hover .reportttl {
    background: #2196f3 !important;
    color: white !important;
}

/* Leyenda específica para presión barométrica */
.baro-table .colorband {
    background: linear-gradient(135deg, #1976d2, #2196f3) !important;
    color: white !important;
    padding: 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* Información adicional para presión */
.pressure-info {
    background: #e3f2fd !important;
    border-left: 4px solid #2196f3 !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    font-size: 11px !important;
    text-align: center !important;
    border-radius: 4px !important;
}

.pressure-info strong {
    color: #1565c0 !important;
}

/* ====================================
   RESPONSIVE PARA PRESIÓN BAROMÉTRICA
==================================== */

@media (max-width: 768px) {
    .baro-table {
        font-size: 0.75rem !important;
    }
    
    .baro-table th,
    .baro-table td {
        padding: 0.4rem 0.2rem !important;
    }
}

@media (max-width: 480px) {
    .baro-table {
        font-size: 0.7rem !important;
    }
    
    .baro-table th,
    .baro-table td {
        padding: 0.3rem 0.1rem !important;
    }
}

/* ====================================
   IMPRESIÓN - Simplificar para impresoras
==================================== */

@media print {
    .doNotPrint {
        display: none !important;
    }
    
    #report table {
        box-shadow: none !important;
    }
    
    #report h2,
    #report h3 {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .level_10, .level_11 {
        border: 2px solid #000000 !important;
        background: #cccccc !important;
        color: #000000 !important;
    }
    
    .extreme-heat-warning-simple:after,
    .lethal-heat-warning:after {
        display: none !important;
    }
}