footer{
    font-size:.8em;
    text-align:center;
}

.page_title{
    font-weight:bold;
    font-size:2em;
}

.station-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px; /* Espacio para wrap en móvil */
}

.station-name {
    margin: 0 0 5px 0;
    font-size: 1.8em;
    font-weight: 700;
    color: #ecf0f1;
}

.global-status {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #bdc3c7;
}

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    /* Colores de estado */
    background-color: #e74c3c; /* Rojo: Offline/Error */
}
.status-indicator.online {
    background-color: #2ecc71; /* Verde: Online/OK */
}
.status-indicator.warning {
    background-color: #f1c40f; /* Amarillo: Advertencia */
}

.global-actions {
    display: flex;
    gap: 10px; /* Espacio entre botones */
    flex-wrap: wrap; /* Permite que los botones se envuelvan */
    margin-top: 10px; /* Espacio para wrap en móvil */
}

.action-button {
    background-color: #3498db; /* Azul */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.action-button:hover, .action-button.selected {
    background-color: #2980b9;
}

.action-button.warn {
    background-color: #f39c12; /* Naranja */
}
.action-button.warn:hover {
    background-color: #e67e22;
}

.action-button.danger {
    background-color: #e74c3c; /* Rojo */
}
.action-button.danger:hover {
    background-color: #c0392b;
}

.action-button.gray {
    background-color: #838282; /* gris */
}
.action-button.gray:hover {
    background-color: #646464;
}

/* --- Estilos del Dashboard --- */
.dashboard-grid {
    display: grid;
    /* Grid de 3 columnas para pantallas grandes, ajusta según necesidad */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1920px; /* Ancho máximo del dashboard */
    margin: 20px auto; /* Centrar el dashboard */
}

.card {
    background-color: #34495e; /* Fondo de las tarjetas */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.card h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #ecf0f1;
    border-bottom: 1px solid rgba(236, 240, 241, 0.1);
    padding-bottom: 10px;
}

/* --- Estilos Específicos para el Sismograma --- */
.seismogram-card {
    grid-column: span 3; /* Ocupa las 3 columnas en desktop */
    min-height: 300px; /* Altura mínima para la gráfica */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.seismogram-placeholder {
    width: 100%;
    height: 690px; /* Altura de la simulación de gráfica */
    background: linear-gradient(to right, #2c3e50, #34495e, #2c3e50); /* Fondo degradado */
    border: 1px solid #7f8c8d;
    border-radius: 5px;
    position: relative; /* Para las líneas simuladas */
    overflow: hidden; /* Oculta partes de las líneas si son muy largas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #bdc3c7;
    font-size: 0.9em;
}

/* --- Estilos Generales de las Tarjetas de Datos --- */
.status-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(236, 240, 241, 0.05);
    font-size: 0.95em;
}

.status-item:last-child {
    border-bottom: none;
}

.label {
    font-weight: 300;
    color: #bdc3c7;
}

.value {
    font-weight: 400;
    color: #ecf0f1;
}

/* Colores para estados dentro de las tarjetas */
.value.sensor-ok, .value.gps-ok, .value.detector-normal, .progress-bar-normal {
    color: #2ecc71; /* Verde OK */
    font-weight: 700;
}
.value.sensor-error, .value.gps-error, .value.detector-alert, .progress-bar-alert {
    color: #e74c3c; /* Rojo Error/Alerta */
    font-weight: 700;
}
.value.sensor-warn, .value.gps-searching, .value.detector-releasing, .progress-bar-warning {
    color: #f1c40f; /* Amarillo Advertencia */
    font-weight: 700;
}
.progress-bar-background {
    background-color: #2c3e50 !important;
}
.progress-bar-normal {
    background-color: #2ecc71 !important;
}
.progress-bar-alert {
    background-color: #e74c3c !important;
}
.progress-bar-warning {
    background-color: #f1c40f !important;
}

/* Barras de progreso */
.progress-bar-container {
    background-color: #2c3e50;
    border-radius: 3px;
    height: 12px;
    width: 60%; /* Ancho de la barra de progreso */
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: #2ecc71; /* Verde por defecto */
    text-align: center;
    color: #2c3e50;
    font-size: 0.7em;
    line-height: 12px;
    transition: width 0.5s ease;
}

/* Lista de eventos */
.event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-list li {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(236, 240, 241, 0.05);
    font-size: 0.9em;
}
.event-list li:last-child {
    border-bottom: none;
}

.event-time {
    font-weight: 700;
    color: #3498db; /* Azul para la hora del evento */
}

.real_time_helicorder_p{
    width:46%;
    margin-left:27%;
}

.p_subtitle{
    font-style:italic;
    font-size:1.1em;
}

.p_with_full{
    width:90%;
    margin-left:5%;
}

.p_with_middle{
    width:70%;
    margin-left:15%
}

.warning_beta_p{
    font-weight:bold;
    font-size:1.5em
}

/* --- Responsive Design (Para Móviles y Tablets) --- */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
    .seismogram-card {
        grid-column: span 2; /* Sigue ocupando todo el ancho */
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page_title{
        font-size:1.5em;
    }
    .real_time_helicorder_p{
        width:90%;margin-left:5%;
    }
    .global-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 15px;
    }
    .action-button {
        width: 100%; /* Botones de acción ocupan todo el ancho */
        margin-bottom: 5px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        padding: 15px;
    }
    .card {
        margin-bottom: 15px;
    }
    .seismogram-card {
        grid-column: span 1; /* Ocupa 1 columna en móvil */
    }
}


/* CUSTOM CSS */

/* Uplot float alignment*/
/* Contenedor principal de las gráficas (Flexbox) */
.graphs-container {
    display: flex; /* Habilitar Flexbox */
    flex-wrap: wrap; /* Permitir que las gráficas salten a la siguiente línea */
    justify-content: flex-start; /* Alinear las gráficas a la izquierda */
    gap: 20px; /* Espacio entre las gráficas */
    max-width: 1600px; /* Ancho máximo para el contenedor de todas las gráficas */
    margin: 0 auto; /* Centrar el contenedor en la página */
    padding: 10px;
}

/* Estilo para cada contenedor individual de gráfica */
.plot-wrapper {
    background-color: #34495e; /* Fondo de la tarjeta similar al panel */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 15px;
    /* Flex-item sizing: Ocupa el 30% del ancho del contenedor,
        pero permitiendo flexibilidad para que quepan 3 por fila */
    flex: 0 0 calc(33.333% - 20px); /* 3 gráficas por fila (33.333%) - gap */
    min-width: 300px; /* Ancho mínimo para que no se hagan demasiado pequeñas */
    box-sizing: border-box; /* Incluir padding y border en el width */
}

/* Ajustes de uPlot para que se adapte al contenedor */
.uplot {
    width: 100% !important;
    /*height: 250px !important; /* Altura fija para las gráficas */
}

/* CSS para el formato de decimales en el eje Y (ejemplo) */
/* Asegúrate de que el espacio del eje sea suficiente en los opts de uPlot */
.u-axis.u-axis-l .u-axis-tick-label { /* Eje Y izquierdo */
    font-size: 0.8em;
    color: #bdc3c7;
}
.u-axis.u-axis-r .u-axis-tick-label { /* Eje Y derecho */
    font-size: 0.8em;
    color: #bdc3c7;
}
.u-title, .u-legend {
        color: #ecf0f1; /* Colores de texto para título y leyenda */
}

.justify{
    text-align:justify;
}

.center{
    text-align:center;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px; /* Limita el ancho del formulario */
    margin: 0 auto; /* Centra el formulario */
}

/* Contenedor para cada par label-input */
.form-group {
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Coloca los elementos en columna por defecto (para móviles) */
    margin-bottom: 15px; /* Espacio entre grupos de formulario */
}

label {
    margin-bottom: 5px; /* Espacio entre label y input */
    font-weight: bold;
    color: #555;
    flex-shrink: 0; /* Evita que la etiqueta se encoja */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%; /* Los inputs ocupan el 100% del ancho disponible */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    font-size: 1rem; /* Tamaño de fuente responsivo */
    margin-top: 5px; /* Pequeño espacio para consistencia */
}

/* Estilo para el foco de los inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #007bff; /* Color al enfocar */
    outline: none; /* Elimina el contorno predeterminado del navegador */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra al enfocar */
}

/* Estilo para el botón de envío */
button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%; /* Ocupa todo el ancho en móvil */
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Media Queries para pantallas más grandes (tabletas y escritorio) */
@media (min-width: 768px) {
    .form-group {
        flex-direction: row; /* En pantallas más grandes, los elementos se colocan en fila */
        align-items: center; /* Alinea los elementos verticalmente al centro */
    }

    label {
        flex: 0 0 150px; /* Ancho fijo para las etiquetas en pantallas grandes */
        margin-right: 20px; /* Espacio entre label y input */
        text-align: right; /* Alinea el texto de la etiqueta a la derecha */
        margin-bottom: 0; /* Elimina el margen inferior de la etiqueta */
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        flex: 1; /* El input toma el espacio restante */
        margin-top: 0; /* Elimina el margen superior del input */
    }

    button[type="submit"] {
        width: auto; /* El botón recupera su ancho automático */
        float: right; /* Alinea el botón a la derecha */
    }
}

/* Media Query adicional para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
    form {
        padding: 15px; /* Menos padding en formularios en pantallas muy pequeñas */
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        padding: 8px; /* Menos padding en inputs en pantallas muy pequeñas */
        font-size: 0.9rem;
    }
}
a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: white;          /* Cambia el color del texto a blanco */
}

/* Define la animación de parpadeo */
@keyframes blink {
    0% { opacity: 1; }   /* Completamente visible al inicio */
    50% { opacity: 0; }  /* Completamente invisible a la mitad */
    100% { opacity: 1; } /* Vuelve a ser visible al final */
}

/* Aplica la animación a una clase */
.blink-half-second {
    animation: blink 0.5s infinite alternate; /* O alternate-reverse */
}

.snow{
    background-color:snow;
}

.blueTemplate{
    background-color:#34495e;
}

.grayscale {
  filter: grayscale(1);
}

/* Estilos del popup */
.notification-popup {
    position: fixed; /* O 'absolute' si prefieres que se desplace con el scroll */
    top: 20px;    /* Ajusta la posición vertical */
    right: 20px;     /* Ajusta la posición horizontal */
    background-color: rgba(60, 60, 60, 0.9); /* Fondo semitransparente */
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;   /* Por defecto oculto */
    opacity: 0;      /* Para la animación de fade */
    z-index: 1000;   /* Asegura que esté por encima de otros elementos */
    max-width: 300px;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box; /* Incluye padding y border en el width/height */
}

.notification-popup.success {
    background-color: rgba(46, 184, 92, 0.9); /* Verde para éxito */
}

.notification-popup.info {
    background-color: rgba(59, 130, 246, 0.9); /* Azul para información */
}

.notification-popup.warning {
    background-color: rgba(255, 159, 67, 0.9); /* Naranja para advertencia */
}

.notification-popup.error {
    background-color: rgba(239, 68, 68, 0.9); /* Rojo para error */
}

.notification-popup-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    line-height: 1; /* Para alinear bien la 'X' */
}

.notification-popup-message {
    margin-right: 20px; /* Espacio para el botón de cerrar */
}

/* Animaciones (opcional, pero mejora la experiencia) */
.notification-popup.show {
    animation: fadeIn 0.5s forwards;
}

.notification-popup.hide {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}



/** OLEAJE **/
.oleaje {
    display: block;
    width: 100%;
    background: linear-gradient(to bottom, #87CEEB, #1E90FF); /* Gradiente de cielo a mar */
    border-radius: 8px;
}

.subPanel{
    width: 100%;
    height: 800px;
}

.subPanelInactive{
    display: none;
}

.plotContainer:hover{
    cursor:pointer;
}

.plotActive {
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 1); /* Sombra para el resplandor */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
}


/** ESTACION **/
#alert-range {
    display: flex;
    justify-content: left;
    align-items: flex-end;
    height: 20px;
    font-weight:bold;
    font-size:.8em;
    text-shadow: 1px 1px 2px #000;
    margin-left:25px;
    width:30px;
    text-align:left;
}

.alert-container {
    position: relative;
    width: 24px; /* Ajustado para contener el triángulo y el cuadrado de 100px */
    height: 24px; /* Ajustado */
    display: flex;
    justify-content: center;
    align-items: center;
    float:left;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Mitad de 100px para el ancho base */
    border-right: 10px solid transparent;
    border-bottom: 17.32px solid; /* Aproximadamente 20 * sin(60deg) para equilátero de 20px de base */
    position: relative;
    z-index: 2;
}

.square-border {
    width: 20px;  /* Ancho del cuadrado */
    height: 20px; /* Alto del cuadrado */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el cuadrado */
    box-sizing: border-box; /* Incluye el borde en el tamaño total */
    z-index: 1;
    display: none; /* Oculto por defecto */
    border: 3px solid transparent; /* Borde inicial transparente */
}

/* Animación de parpadeo */
@keyframes blink_station {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.1; }
}

/* Colores y estilos por estado (cambia esta clase en el HTML) */

/* Estado Azul Oscuro: STA/LTA < 2 */
.alert-container.alert-blue-dark .triangle {
    border-bottom-color: #002fc6;
}

/* Estado Azul Más Claro: STA/LTA < 3 */
.alert-container.alert-blue-light .triangle {
    border-bottom-color: #0041c2;
}

/* Estado Azul Aún Más Claro: STA/LTA < 4 */
.alert-container.alert-blue-very-light .triangle {
    border-bottom-color: #0053bd;
}

/* Estado Azul Aún Más Claro: STA/LTA < 5 */
.alert-container.alert-blue-very-light_5 .triangle {
    border-bottom-color: #0078b5;
}

/* Estado Azul Aún Más Claro: STA/LTA < 6 */
.alert-container.alert-blue-very-light_6 .triangle {
    border-bottom-color: #009dac;
}

/* Estado Azul Aún Más Claro: STA/LTA < 7 */
.alert-container.alert-blue-very-light_7 .triangle, .alert-container.alert-detected .triangle {
    border-bottom-color: #1dc777;
}








/* Estado Verde: STA/LTA < 15 (parpadeo) */
.alert-container.alert-green .triangle, .alert-container.alert-confirmed .triangle{
    border-bottom-color: #00ff00;
}
.alert-container.alert-green .square-border, .alert-container.alert-detected .square-border, .alert-container.alert-confirmed .square-border {
    display: block;
    border-color: #00ff00;
    animation: blink_station 1s step-end infinite;
}

/* Estado Amarillo: STA/LTA < 20 (parpadeo) */
.alert-container.alert-yellow .triangle {
    border-bottom-color: yellow;
}
.alert-container.alert-yellow .square-border {
    display: block;
    border-color: yellow;
    animation: blink_station 1s step-end infinite;
}

/* Estado Rojo: STA/LTA >= 20 (parpadeo) */
.alert-container.alert-red .triangle {
    border-bottom-color: #dc3545;
}
.alert-container.alert-red .square-border {
    display: block;
    border-color: #dc3545;
    animation: blink_station 1s step-end infinite;
}

.strong{
    font-weight: bold;
}

.underline{
    text-decoration: underline;
}

.logo {
    max-width: 80%; /* Ajusta el tamaño de tu logo según sea necesario */
    height: auto;
    display: block; /* Para centrar la imagen */
    margin: 0 auto; /* Para centrar la imagen */
    transform: translate(0, 0); /* Estado inicial para la animación */
}