:root {
            --color-principal: #004a91;
            --color-texto: #2c3e50;
            --color-fondo: #f8f9fa;
            --color-blanco: #ffffff;
            --color-borde: #dee2e6;
            /* Alert colors - More sober palette */
            --color-normal: #28a745;
            --color-amarillo: #f39c12;
            --color-naranja: #e67e22;
            --color-rojo: #c0392b;
            /* Shadows */
            --sombra-card: 0 2px 8px rgba(0, 74, 145, 0.08);
            --sombra-hover: 0 4px 12px rgba(0, 74, 145, 0.15);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--color-fondo);
            color: var(--color-texto);
            line-height: 1.6;
        }

        .header {
            background: var(--color-principal);
            color: var(--color-blanco);
            padding: 1.5rem 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        h1 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .subtitle {
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .content {
            padding: 2rem 0;
        }

        .last-update {
            text-align: center;
            background: var(--color-blanco);
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: var(--sombra-card);
        }

        .last-update-label {
            font-size: 0.875rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }

        .last-update-time {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-principal);
        }

        .rivers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .river-card {
            background: var(--color-blanco);
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: var(--sombra-card);
            transition: all 0.3s ease;
            border-left: 4px solid var(--color-principal);
        }

        .river-card:hover {
            box-shadow: var(--sombra-hover);
            transform: translateY(-2px);
        }

        .river-card.alert-normal {
            border-left-color: var(--color-normal);
        }

        .river-card.alert-yellow {
            border-left-color: var(--color-amarillo);
        }

        .river-card.alert-orange {
            border-left-color: var(--color-naranja);
        }

        .river-card.alert-red {
            border-left-color: var(--color-rojo);
        }

        .river-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--color-borde);
        }

        .river-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--color-principal);
            margin-bottom: 0.25rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin: 1rem 0;
        }

        .stat-box {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 0.75rem;
            border: 1px solid #edf2f7;
            text-align: center;
        }

        .stat-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #718096;
            margin-bottom: 0.25rem;
            font-weight: 600;
        }

        .stat-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-principal);
        }

        .stat-time {
            font-size: 0.65rem;
            color: #a0aec0;
            margin-top: 0.15rem;
        }

        .river-basin {
            font-size: 0.85rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .alert-badge {
            padding: 0.375rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .alert-badge.normal {
            background: #d4edda;
            color: #155724;
        }

        .alert-badge.yellow {
            background: #fff3cd;
            color: #856404;
        }

        .alert-badge.orange {
            background: #ffe5cc;
            color: #8a4d0f;
        }

        .alert-badge.red {
            background: #f8d7da;
            color: #721c24;
        }

        .river-data {
            margin-bottom: 0.75rem;
        }

        .data-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .data-row:last-child {
            border-bottom: none;
        }

        .data-label {
            font-size: 0.875rem;
            color: #6c757d;
        }

        .data-value {
            font-size: 1.rem;
            font-weight: 600;
            color: var(--color-texto);
        }

        .data-value-large {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--color-principal);
        }

        .data-unit {
            font-size: 1rem;
            font-weight: normal;
            color: #6c757d;
        }

        .confidence-bar {
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 0.5rem;
        }

        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--color-principal), #0066cc);
            border-radius: 4px;
            transition: width 0. 5s ease;
        }

        .threshold-info {
            background: #f8f9fa;
            padding: 0.75rem;
            border-radius: 6px;
            margin-top: 1rem;
            font-size: 0.875rem;
        }

        .threshold-row {
            display: flex;
            align-items: center;
            margin-bottom: 0.25rem;
        }

        .threshold-row:last-child {
            margin-bottom: 0;
        }

        .threshold-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }

        .threshold-dot.yellow {
            background: var(--color-amarillo);
        }

        .threshold-dot.orange {
            background: var(--color-naranja);
        }

        .threshold-dot.red {
            background: var(--color-rojo);
        }

        .no-data {
            text-align: center;
            padding: 2rem;
            color: #6c757d;
            font-style: italic;
        }

        .timestamp {
            font-size: 0.75rem;
            color: #868e96;
            margin-top: 0.75rem;
            text-align: right;
        }

        .loading {
            text-align: center;
            padding: 3rem;
            color: var(--color-principal);
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--color-principal);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .footer {
            text-align: center;
            padding: 2rem 0;
            color: #6c757d;
            font-size: 0.875rem;
            border-top: 1px solid var(--color-borde);
            margin-top: 3rem;
        }

        @media (max-width: 768px) {
            .rivers-grid {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 1.5rem;
            }

            .river-name {
                font-size: 1.1rem;
            }
        }
 


 /* ===========================
   PLAYER
=========================== */

:root {
    --color-principal: #004a91;
    --color-texto: #2c3e50;
    --color-fondo: #f8f9fa;
    --color-blanco: #ffffff;
    --color-borde: #dee2e6;
    --color-normal: #28a745;
    --color-amarillo: #f39c12;
    --color-naranja: #e67e22;
    --color-rojo: #c0392b;
    --sombra-card: 0 2px 8px rgba(0, 74, 145, 0.08);
    --sombra-hover: 0 4px 12px rgba(0, 74, 145, 0.15);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:'Inter',sans-serif;
    background:var(--color-fondo);
    color:var(--color-texto);
}

.header{
    background:var(--color-principal);
    color:#fff;
    padding:1.5rem 0;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

h1{font-size:1.75rem;font-weight:600;}

.subtitle{font-size:.95rem;opacity:.9;}

.content{
    padding:2rem 0;
}

/* ===== PLAYER CARD ===== */

.player-card{
    background:white;
    border-radius:10px;
    padding:1rem;
    box-shadow:var(--sombra-card);
}

.video-js{
    width:100%;
    border-radius:8px;
    overflow:hidden;
}