/* Ajustes para dispositivos móviles y tabletas (2026-10). Las hojas responsive*.css solo contemplan tamaños exactos de
   algunos modelos (iPhone 5/6/X, Galaxy S5): en cualquier otro teléfono se aplicaba la maqueta de escritorio con la barra
   lateral y las columnas encimadas. Esta hoja se carga después y usa puntos de corte genéricos de Bootstrap. */

/* El menú desplegable móvil abría a una altura fija de 15 em y cortaba las últimas estaciones (11 ítems) */
#navigation:target #nav-items { height: auto; max-height: 80vh; overflow-y: auto; }
#nav-items .nav-link { white-space: normal; }

@media screen and (max-width: 991.98px) {
    .main-sidebar { display: none !important; }
    .container-iframe { display: none; }
    #navigation { display: block; }
    .main-content { margin-left: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .main-content-container { padding-left: 10px !important; padding-right: 10px !important; }
    .row > .col-lg { width: 50% !important; flex: 0 0 50%; max-width: 50%; }
    .page-title { font-size: 18px; }
    .instrucciones { display: none; }
    #comp { height: auto !important; margin-bottom: 20px !important; padding-left: 5px !important; padding-right: 5px !important; }
    .col-graph, .col-table { width: 100% !important; max-width: 100%; margin-right: 0 !important; padding: 0 5px; }
    .row-graphT, .row-graphP, .row-graphM, .row-graphM-puntalobos { height: 230px !important; width: 100% !important; }
    .dataTables_scrollBody { height: 260px !important; max-height: 260px !important; }
    /* fila de botones de período: ocupaba el 40 % del ancho con 5 botones */
    .border-bottom.py-1 > .col-12 { width: 100% !important; height: auto !important; flex-wrap: wrap; }
    .border-bottom.py-1 .col { padding: 2px; min-width: 60px; }
    .btn.btn-white { height: 30px; line-height: 30px; font-size: 11px; }
    table.dataTable { font-size: 11px; }
    .stats-small { min-height: 5rem; }
    .stats-small--1 .stats-small__value { font-size: 16px; }
    .stats-small--1 .stats-small__label { font-size: 10px; }
    .fondo { object-fit: cover; }
}

@media screen and (max-width: 575.98px) {
    .row > .col-lg { width: 100% !important; flex: 0 0 100%; max-width: 100%; }
    .page-title { font-size: 16px; }
    .checktemp, .checkhum { width: auto !important; margin-left: 10px !important; padding-left: 0 !important; }
    .dygraph-legend, .dygraph-xlabel, .dygraph-ylabel, .dygraph-axis-label { font-size: 10px; }
    .btn.btn-secondary { font-size: 10px; padding: 2px 6px; }
    .row-graphT, .row-graphP, .row-graphM, .row-graphM-puntalobos { height: 200px !important; }
}

/* Teléfonos apaisados: deja ver gráfico y tabla sin desplazamiento interno enorme */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .main-sidebar { display: none !important; }
    #navigation { display: block; }
    .dataTables_scrollBody { height: 180px !important; }
}

/* Título con margen y tarjetas de los mareógrafos a ancho completo (traían márgenes en línea para alinearlas a los lados) */
@media screen and (max-width: 991.98px) {
    .page-header { padding: 0 10px; }
    .row > .col-lg > .stats-small { margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
}