/* ===== VARIABLES & RESET ===== */
:root {
    --bg-body: #f5f7fa;
    --bg-sidebar: #ffffff;
    --text-main: #384047;
    --text-muted: #7b8794;
    --active-bg: #e1f5fe;   /* Fondo azul muy pálido */
    --active-text: #0288d1; /* Azul fuerte (Igual al botón) */
    --hover-bg: #f8f9fa;
    --border-color: #eaebed;
    --transition: all 0.3s ease;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
}

body {
    display: flex;
    height: 100vh;
    background: var(--bg-body);
    color: var(--text-main);
    overflow: hidden; /* Evita doble scroll */
}

/* ===== SIDEBAR (Estilo Base / Escritorio) ===== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    transition: width 0.3s ease, left 0.3s ease; /* 'left' es para la animación móvil */
    flex-shrink: 0;
    z-index: 1000; /* Por encima de todo */
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
    padding: 24px 10px;
}

/* Header del Sidebar */
.sidebar-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-left: 8px;
    overflow: hidden;
    white-space: nowrap;
    height: 50px;
}

.logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-right: 12px;
    display: block;
}

.sidebar.collapsed .logo-img {
    margin-right: 0;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    transition: opacity 0.2s;
}

.sidebar.collapsed .logo-text {
    opacity: 0;
    pointer-events: none;
}

/* Separador */
.separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}

/* ===== ITEMS DEL MENÚ ===== */
.menu-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
}

.menu-item i {
    width: 20px;
    height: 20px;
    min-width: 20px;
    stroke-width: 2px;
    color: var(--text-muted);
    transition: color 0.3s;
}

.menu-item .text {
    margin-left: 12px;
    opacity: 1;
    transition: opacity 0.2s;
}

/* Hover & Active */
.menu-item:hover {
    background: var(--hover-bg);
}

.menu-item:hover i {
    color: var(--text-main);
}

.menu-item.active {
    background: var(--active-bg);
    color: var(--active-text);
}

.menu-item.active i {
    color: var(--active-text);
}

/* Submenú */
.has-submenu {
    justify-content: space-between;
}

.menu-content {
    display: flex;
    align-items: center;
}
.menu-content i { min-width: 20px; }
.menu-content .text { margin-left: 12px; }

.arrow {
    margin-left: auto;
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.3s;
}

.sidebar.collapsed .text,
.sidebar.collapsed .arrow {
    display: none;
}
.sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 12px 0;
}

/* Bottom Section */
.spacer { flex-grow: 1; }

.collapse-trigger { margin-top: 10px; }
.collapse-trigger i { transition: transform 0.3s; }
.sidebar.collapsed .collapse-trigger i { transform: rotate(180deg); }

/* Submenús desplegables */
.submenu {
    display: none;
    flex-direction: column;
    padding-left: 44px;
}
.submenu.open { display: flex; }
.submenu-item {
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}
.submenu-item:hover { color: var(--active-text); }
.sidebar.collapsed .submenu { display: none !important; }

/* ===== MODO OSCURO ===== */
body.dark {
    --bg-body: #111315;
    --bg-sidebar: #1c1e21;
    --text-main: #e0e0e0;
    --text-muted: #9ca3af;
    --hover-bg: #2a2d31;
    --border-color: #2d3035;
    --active-bg: rgba(2, 136, 209, 0.15); /* Azul transparente sutil */
    --active-text: #29b6f6;               /* Celeste brillante */
}

/* ===== CONTENT AREA ===== */
.content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

.mobile-header, .overlay { display: none; }
.desktop-only { display: block; }


/* =========================================
   ===== RESPONSIVE / MÓVIL (max 768px) ===== 
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Sidebar flotante oculto a la izquierda */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%; /* Se oculta completamente */
        height: 100vh;
        width: 260px; /* Ancho fijo en móvil */
        box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    }

    /* Clase que activa el menú en móvil */
    .sidebar.mobile-active {
        left: 0;
    }

    /* En móvil desactivamos el estado "colapsado" visual */
    .sidebar.collapsed {
        width: 260px; 
    }
    /* Ocultamos el botón de collapse en móvil porque usaremos el overlay para cerrar */
    .collapse-trigger {
        display: none;
    }

    /* 2. Header Móvil */
    .mobile-header {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        gap: 15px;
    }

    #mobile-menu-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-main);
        display: flex;
        padding: 5px;
    }

    .desktop-only { display: none; }

    /* 3. Overlay (Fondo oscuro) */
    .overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 900; /* Debajo del sidebar, encima del contenido */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px); /* Efecto borroso opcional */
    }

    .overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .content {
        padding: 20px;
    }
}


/* =========================================
   ===== ESTILOS PÁGINA DE LOGIN =====
   ========================================= */

body.login-page {
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Evita scrollbars innecesarios en login */
}

.login-card {
    background: var(--bg-sidebar); /* Usa el blanco definido */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    width: 90%; /* Para que no toque los bordes en celular */
    max-width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 20px;
}

.login-title {
    margin-bottom: 25px;
    color: var(--text-main);
    font-weight: 700;
}

.form-group {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    transition: border 0.3s;
    background: var(--bg-body);
    color: var(--text-main);
}

.form-group input:focus {
    border-color: var(--active-text); /* Verde AquaAlerta */
    background: var(--bg-sidebar);
}

.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--active-text); /* Verde AquaAlerta */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
}

.btn-login:hover {
    filter: brightness(90%); /* Oscurece un poco al pasar el mouse */
    transform: translateY(-2px);
}

.error-msg {
    background: #ffe6e6;
    color: #d63031;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #ffcccc;
}

/* Soporte para Modo Oscuro en Login */
body.dark.login-page {
    background: #0d1117;
}





/* =========================================
   ===== TOP BAR & USER MENU (FACEBOOK STYLE) =====
   ========================================= */

/* Ajustamos la barra superior para separar título y perfil */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative; /* Necesario para el z-index */
}

/* Contenedor del menú */
.user-menu-container {
    position: relative;
}

/* 1. El Círculo (Gatillo) */
.user-avatar-trigger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background: #e4e6eb; /* Color gris base fb */
    overflow: hidden;
    transition: filter 0.2s;
}

.user-avatar-trigger:hover {
    filter: brightness(0.95);
}

.user-avatar-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. El Menú Desplegable (La Tarjeta) */
.dropdown-menu {
    position: absolute;
    top: 55px; /* Justo debajo del círculo */
    right: 0;
    width: 300px; /* Ancho similar al de fb */
    background: var(--bg-sidebar); /* Blanco o negro según tema */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0,0,0,0.1);
    padding: 15px;
    display: none; /* Oculto por defecto */
    z-index: 2000;
    flex-direction: column;
}

/* Clase para mostrarlo con JS */
.dropdown-menu.active {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

/* Cabecera del Dropdown */
.dropdown-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Tarjeta interna suave */
    margin-bottom: 10px;
    background: var(--bg-body); 
}

.header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
}

.header-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
}

.view-profile-btn {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.view-profile-btn:hover {
    text-decoration: underline;
}

.dropdown-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 5px 0 10px 0;
}

/* Ítems del menú */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 14px;
    transition: background 0.2s;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--hover-bg); /* Gris suave al pasar mouse */
}

/* Círculos de iconos (Estilo FB) */
.icon-circle {
    width: 36px;
    height: 36px;
    background: #e4e6eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #050505;
}
.icon-circle i {
    width: 20px;
    height: 20px;
}

/* Ajustes para Modo Oscuro */
body.dark .icon-circle {
    background: #3a3b3c;
    color: #e4e6eb;
}

/* Animación de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}




/* =========================================
   ===== ESTILOS DASHBOARD (WIDGETS) =====
   ========================================= */

/* Cabecera de página */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 5px;
}

.btn-refresh {
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-weight: 500;
    transition: 0.2s;
}

.btn-refresh:hover {
    background: var(--hover-bg);
}

/* Grid de Tarjetas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Diseño de Tarjeta Base */
.card {
    background: var(--bg-sidebar);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
}

/* Tarjeta de Estadística */
.stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.card-icon svg {
    width: 28px;
    height: 28px;
}

/* Colores de Iconos */
.card-icon.blue { background: #e3f2fd; color: #1e88e5; }
.card-icon.purple { background: #f3e5f5; color: #8e24aa; }
.card-icon.success { background: #e8f5e9; color: #43a047; } /* Verde */
.card-icon.warning { background: #fff3e0; color: #fb8c00; } /* Naranja */
.card-icon.danger { background: #ffebee; color: #e53935; }  /* Rojo */

.card-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
    margin: 5px 0;
}

.stat-value.success { color: #43a047; }
.stat-value.warning { color: #fb8c00; }
.stat-value.danger { color: #e53935; }

.stat-desc {
    font-size: 13px;
    color: var(--text-muted);
}

/* Modo Oscuro Ajustes */
body.dark .btn-refresh {
    background: #2a2a2a;
    border-color: #444;
}
body.dark .card-icon.blue { background: rgba(30, 136, 229, 0.15); }
body.dark .card-icon.success { background: rgba(67, 160, 71, 0.15); }
body.dark .card-icon.purple { background: rgba(142, 36, 170, 0.15); }




/* =========================================
   ===== WIDGET NIVEL DE AGUA (SVG) =====
   ========================================= */

/* Adaptamos la tarjeta para que encaje en tu Grid existente */
.water-level-card {
    background: var(--bg-sidebar); /* Usa tu variable de tema */
    padding: 20px; /* Reduje un poco el padding original para que quepa mejor */
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: row; /* Para poner gráfico a la izq y texto a la der */
    gap: 15px;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* Altura mínima para que se vea bien */
}

/* --- ESTILOS DEL GRÁFICO SVG --- */
#pro-dispenser-svg {
    width: 120px; /* Ajustado para dashboard */
    height: auto;
    filter: drop-shadow(4px 8px 12px rgba(0,0,0,0.15));
}

.structure-fill {
    fill: url(#metalGradient);
    stroke: #c0c5ca;
    stroke-width: 0.5;
}

.water-fill {
    fill: url(#waterGradient);
    transition: height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), y 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.water-surface-shine {
     fill: rgba(255, 255, 255, 0.7);
     height: 3px;
     animation: gentleWave 3s ease-in-out infinite alternate;
     transition: y 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes gentleWave {
    0% { transform: scaleY(1) translateY(0px); }
    100% { transform: scaleY(1.2) translateY(-1px); }
}

/* --- INFO TEXTO --- */
.info-panel {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrado */
    justify-content: center;
    width: 100%;
}

.percentage-big {
    font-size: 42px; /* Ajustado */
    font-weight: 700;
    color: #0071e3;
    line-height: 1;
    margin-bottom: 5px;
}

.label-txt {
    font-size: 12px;
    color: var(--text-muted); /* Usa tu variable de tema */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Slider de simulación */
.controls-demo {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

/* Ajuste Modo Oscuro */
body.dark .percentage-big { color: #4facfe; }

/* =========================================
   ===== NUEVOS ESTILOS (LISTA & DETALLE) =====
   ========================================= */

/* --- 1. Botón Agregar Dispositivo --- */
.btn-add-device {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.3s;
}
.btn-add-device:hover { color: var(--active-text); }

/* --- 2. Tarjeta de Dispositivo (Lista) --- */
.device-card-modern {
    background: var(--bg-sidebar);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
    transition: transform 0.2s;
    /* La línea verde a la izquierda */
    border-left: 4px solid #00c853; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
}
.device-card-modern:hover { transform: translateY(-5px); }

.dc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-main);
}
.dc-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-muted);
}
.dc-value {
    font-weight: 600;
    color: var(--text-main);
}
.dc-value.blue { color: #2979ff; }
.dc-value.green { color: #00c853; }

/* Caja de estado (Verde/Rojo abajo) */
.status-box {
    background: #00c853;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.status-box.warning { background: #ffab00; }
.status-box.danger { background: #d50000; }

.dc-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dc-footer-status {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    font-weight: 600;
    color: #00c853;
}
.dot { width: 8px; height: 8px; background: #00c853; border-radius: 50%; }

/* --- 3. Cabecera de Detalle (Detail View) --- */
.detail-header-card {
    background: var(--bg-sidebar);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.dh-icon-box {
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--active-text);
}
.dh-info h2 { font-size: 22px; margin-bottom: 5px; color: var(--text-main); }
.dh-info p { color: var(--text-muted); font-size: 14px; margin-bottom: 3px; }
.dh-coord { color: #2979ff; font-weight: 500; }

/* =========================================
   ===== BARRA DE TIEMPO (RESPONSIVE) =====
   ========================================= */

.time-tabs {
    background: var(--bg-sidebar);
    padding: 10px;
    border-radius: 8px;
    
    /* MAGIA PARA RESPONSIVE: */
    display: flex;              /* Usamos flexbox */
    gap: 8px;                   /* Espacio entre botones */
    margin-bottom: 20px;
    margin-top: 20px;
    
    overflow-x: auto;           /* Permite deslizar horizontalmente */
    white-space: nowrap;        /* Evita que los botones salten de línea */
    -webkit-overflow-scrolling: touch; /* Deslizamiento suave en iPhone */
    
    /* Opcional: Ocultar la barra de scroll gris para que se vea limpio */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
}

/* Ocultar barra de scroll en Chrome/Safari */
.time-tabs::-webkit-scrollbar {
    display: none;
}

.time-tab {
    padding: 6px 16px;          /* Botones un poco más cómodos al tacto */
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
    
    /* IMPORTANTE: Evita que el botón se encoja si falta espacio */
    flex-shrink: 0; 
}

.time-tab:hover {
    background: var(--hover-bg);
}

.time-tab.active {
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: var(--text-main);
}

/* Ajuste específico para Modo Oscuro */
body.dark .time-tab.active {
    background: #333; /* Fondo gris oscuro para el botón activo */
    color: white;
    box-shadow: none;
    border: 1px solid #555;
}


/* =========================================
   ===== ESTILOS DEL MODAL =====
   ========================================= */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); /* Fondo oscuro semitransparente */
    z-index: 2000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s;
}

.modal-content {
    background: var(--bg-sidebar);
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.modal-header h3 { margin: 0; color: var(--text-main); }

.close-modal {
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-save {
    background: #29b6f6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.btn-save:hover { background: #009624; }

.btn-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}
.btn-cancel:hover { background: var(--hover-bg); }



/* =========================================
   ===== CORRECCIÓN TAMAÑO TARJETAS =====
   ========================================= */

/* Usamos el ID específico de la lista (#device-list-container)
   para que NO afecte a las tarjetas del detalle (que esas sí queremos que se estiren).
   
   'auto-fill': Crea columnas invisibles si sobra espacio.
   'minmax(320px, 1fr)': La tarjeta medirá mínimo 320px y crecerá equilibradamente.
*/

#device-list-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Opcional: Limitar el ancho máximo de la tarjeta para que se vea más elegante */
#device-list-container .device-card-modern {
    max-width: 450px; /* Nunca será más ancha que esto */
}


/* =========================================
   ===== FIX: LAYOUT TIPO APP (SCROLL INTELIGENTE) =====
   ========================================= */

/* 1. El Contenedor Principal deja de hacer scroll global */
.content {
    padding: 0;          /* Quitamos padding global */
    overflow: hidden;    /* Bloqueamos scroll de ventana */
    display: flex;
    flex-direction: column;
    height: 100vh;       /* Fuerza altura completa de pantalla */
}

/* 2. La Barra Superior (Perfil) se queda fija arriba */
.top-bar {
    padding: 30px 30px 10px 30px; /* Restauramos el padding visualmente */
    flex-shrink: 0;      /* Evita que se aplaste */
    background: var(--bg-body); 
    z-index: 20;
}

/* 3. Contenedor de Contenido (Por defecto para Detalle, Mapa, etc.) */
.dashboard-content {
    flex: 1;             /* Ocupa todo el espacio sobrante */
    overflow-y: auto;    /* EL SCROLL OCURRE AQUÍ DENTRO */
    padding: 0 30px 30px 30px; /* Restauramos padding interno */
    scroll-behavior: smooth;
}

/* 4. MODO ESPECIAL: LISTA FIJA (Solo para la vista de tarjetas) */
/* Esta clase la pondremos en list.php para bloquear el encabezado */
.dashboard-content.fixed-mode {
    overflow: hidden;    /* Bloqueamos scroll general del dashboard */
    display: flex;
    flex-direction: column;
}

/* El título "Selección de Sensor" y botón se quedan fijos */
.dashboard-content.fixed-mode .page-header {
    flex-shrink: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Y aquí ocurre la magia: SOLO las tarjetas hacen scroll */
.dashboard-content.fixed-mode #device-list-container {
    flex: 1;             /* Ocupa el espacio que queda */
    overflow-y: auto;    /* Scroll independiente */
    padding-right: 5px;  /* Espacio para la barra de scroll */
    padding-bottom: 40px;
    align-content: flex-start; /* Evita espacios raros */
}





/* =========================================
   ===== ESTILO TARJETA PRO (CORREGIDO) =====
   ========================================= */

.device-card-pro {
    background: var(--bg-sidebar);
    border-radius: 20px;
    padding: 25px 20px;
    position: relative;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color); /* Borde sutil alrededor */
    
    /* BORDE IZQUIERDO GRUESO (El color lo pone PHP/JS) */
    border-left-width: 8px;  /* Más grueso como pediste */
    border-left-style: solid;
    
    transition: transform 0.3s, box-shadow 0.3s;
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    gap: 10px;
}

.device-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -10px rgba(0,0,0,0.12);
}

/* 1. Icono Limpio (Sin Círculo) */
.pro-icon-circle {
    /* Quitamos tamaño fijo y fondo */
    background: transparent; 
    box-shadow: none;
    border-radius: 0;
    width: auto;
    height: auto;
    
    /* Color Azul Solicitado */
    color: #136ef3;
    margin-bottom: 5px;
}

/* El icono un poco más grande para que destaque solo */
.pro-icon-circle i { 
    width: 48px; 
    height: 48px; 
    stroke-width: 2.5px; /* Más gordito */
}

/* Título */
.pro-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    text-transform: uppercase; /* Opcional: para que se vea más técnico */
}

/* Nivel Gigante */
.pro-level-value {
    font-size: 48px; /* Un poco más grande */
    font-weight: 900;
    line-height: 1;
    margin: 10px 0;
}

/* Subtítulo debajo del porcentaje */
.pro-level-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: -10px; /* Lo pegamos un poco al número */
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

/* Estadísticas */
.pro-stats-row {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 50px; /* Separación clara */
    padding: 5px 0;
}

.pro-stat-icon {
    width: 18px; 
    height: 18px; 
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pro-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pro-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pro-val-small {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

/* Barra de Mensaje */
.pro-msg-box {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    margin-top: 5px;
}

/* 2. Footer Centrado y Pegado */
.pro-footer {
    width: 100%;
    display: flex;
    /* CENTRADO TOTAL */
    justify-content: center; 
    align-items: center;
    
    /* Pegaditos pero legibles */
    gap: 15px; 
    
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}




/* =========================================
   ===== ESTILOS DEL MAPA (LEAFLET) =====
   ========================================= */

/* Ajustes para el contenedor del mapa */
#map { 
    width: 100%; 
    height: 100%; 
    border-radius: 12px;
    z-index: 1;
    background: #e0e0e0; /* Color de fondo mientras carga */
}

/* Tipografía del mapa */
.leaflet-container {
    font-family: 'Inter', sans-serif !important;
}

/* Personalización del Popup (Globo de información) */
.leaflet-popup-content-wrapper {
    background: transparent !important; /* Quitamos fondo blanco por defecto */
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.leaflet-popup-tip {
    background: var(--bg-sidebar); /* Que la flechita coincida con la tarjeta */
}

/* Sombra para que la tarjeta flote bien sobre el mapa */
.leaflet-popup-content .device-card-pro {
    box-shadow: 0 5px 25px rgba(0,0,0,0.3) !important;
    margin: 0 !important; /* Reset de margen leaflet */
}

/* Botón "Ver Gráfica" dentro del Popup */
.btn-view-graph {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: opacity 0.2s, transform 0.2s;
    cursor: pointer;
    border: none;
    margin-top: 5px;
}

.btn-view-graph:hover {
    opacity: 0.9;
    transform: scale(1.02);
}



/* =========================================
   ===== ACTUALIZACIÓN MAPA (ETIQUETAS) =====
   ========================================= */

/* 1. Estilo del Marcador (Etiqueta con Nombre) */
.map-sensor-label {
    background: white;
    padding: 5px 12px;
    border-radius: 20px; /* Redondo como botón */
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    font-weight: 700;
    font-size: 12px;
    color: var(--text-main);
    white-space: nowrap; /* Que el texto no se rompa */
    text-align: center;
    border: 1px solid var(--border-color);
    
    /* El borde izquierdo indicará el color del estado */
    border-left-width: 5px; 
    border-left-style: solid;
    
    transition: transform 0.2s, background 0.2s;
    cursor: pointer;
}

.map-sensor-label:hover {
    transform: scale(1.1); /* Efecto pop al pasar mouse */
    background: #fafafa;
}

/* 2. Ajuste para hacer la tarjeta más PEQUEÑA dentro del mapa */
/* Hacemos la tarjeta del mapa más compacta */
.leaflet-popup-content .device-card-pro {
    padding: 15px 10px !important; 
    gap: 5px !important;
}

/* El footer (Fecha y Online) muy pequeñito */
.leaflet-popup-content .pro-footer { 
    margin-top: 5px !important; 
    padding-top: 5px !important; 
    font-size: 9px !important; /* Letra pequeña para que quepa la fecha entera */
    flex-direction: column;    /* Fecha arriba, estado abajo (para ahorrar ancho) */
    gap: 2px !important;
}

/* 1. SEPARACIÓN DEL NIVEL DE AGUA */
.leaflet-popup-content .pro-level-label { 
    font-size: 9px !important; 
    margin-top: 5px !important;    /* AQUÍ ESTÁ EL CAMBIO: Espacio arriba */
    margin-bottom: 8px !important; /* Espacio abajo */
}

/* Reducimos fuentes para que todo quepa en 220px */
.leaflet-popup-content .pro-level-value { font-size: 28px !important; margin: 0 !important; }
.leaflet-popup-content .pro-title { font-size: 13px !important; }
.leaflet-popup-content .pro-level-label { font-size: 9px !important; margin-bottom: 5px !important; }
.leaflet-popup-content .pro-stat-item .pro-val-small { font-size: 11px !important; }




/* =========================================
   ===== FIX DEFINITIVO: ANTI-PARPADEO ICONOS =====
   ========================================= */

/* 1. REGLA GENERAL: Ayuda a la estabilidad de todos los iconos de la web */
i[data-feather] {
    display: inline-block;
    vertical-align: middle;
}

/* 2. REGLA ESPECÍFICA: Contenedor rígido para el pin de coordenadas */
.icon-fixed-container {
    display: inline-block;
    
    /* TAMAÑO REDUCIDO (9px) */
    width: 9px;           
    height: 9px;          
    min-width: 9px;       
    
    flex-shrink: 0;        /* Prohibido aplastarse */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opcional: Ajuste fino para iconos muy pequeños */
.icon-fixed-container i {
    stroke-width: 2.5px; /* Hace que el pin se vea nítido aunque sea pequeño */
}

/* 3. REGLA ESPECÍFICA: Asegura el icono grande (Radio/Wifi) de la tarjeta */
.leaflet-popup-content .pro-icon-circle {
    min-height: 28px; /* Reserva espacio vertical */
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* =========================================
   ===== LEYENDA DEL MAPA (LEAFLET) =====
   ========================================= */

.map-legend {
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-main);
    min-width: 160px;
}

.map-legend h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* El puntito de color */
.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Redondo */
    display: inline-block;
}

/* Texto de rango más gris */
.legend-range {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: auto; /* Empuja el texto a la derecha */
}


/* =========================================
   ===== FIX: MODO OSCURO (SOLO TEXTOS LEGIBLES) =====
   ========================================= */

/* 1. LAS ETIQUETAS DEL MAPA (Los botones pequeños "SENSOR 1") */
/* Estas deben ser BLANCAS con LETRA NEGRA para resaltar sobre el mapa,
   pero NO tocamos el 'border' para que JavaScript pueda ponerle el color (verde/rojo) */
body.dark .map-sensor-label {
    background-color: #ffffff !important; /* Fondo blanco obligado */
    color: #333333 !important;            /* Texto negro obligado */
    box-shadow: 0 3px 10px rgba(0,0,0,0.5) !important;
}

/* 2. LA TARJETA FLOTANTE (Si se pone oscura...) */
/* Solo aseguramos que los títulos y textos sean blancos/claros para leerse.
   NO tocamos el fondo ni el borde, así mantenemos el Dark Mode nativo y los colores de estado. */

body.dark .leaflet-popup-content .pro-title {
    color: #ffffff !important; /* Nombre del Sensor en Blanco */
}

body.dark .leaflet-popup-content .pro-label,
body.dark .leaflet-popup-content .pro-level-label,
body.dark .leaflet-popup-content .pro-footer,
body.dark .leaflet-popup-content .icon-fixed-container {
    color: #b0bec5 !important; /* Textos secundarios en gris claro */
}

body.dark .leaflet-popup-content .pro-val-small {
    color: #ffffff !important; /* Valores pequeños en blanco */
}

/* 3. LEYENDA (Cuadro de abajo derecha) */
/* Este sí lo forzamos a blanco para que combine con el mapa claro */
body.dark .map-legend {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #ccc !important;
}
body.dark .map-legend h4 {
    color: #333333 !important;
    border-bottom-color: #eee !important;
}



/* =========================================
   ESTILOS EXCLUSIVOS DE HISTORIAL (history.php)
   ========================================= */

/* --- Barra de Filtros --- */
.hist-filter-card {
    background: #2979ff;
    color: white;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(41, 121, 255, 0.3);
}

.hist-filter-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.05);
}

.hist-filter-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.hist-filter-body { padding: 20px; }

.hist-form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.hist-input-group { flex: 1; min-width: 200px; }
.hist-input-group label {
    font-size: 13px; margin-bottom: 8px; display: block; opacity: 0.9;
}

.hist-control {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    background: var(--bg-sidebar);
    color: var(--text-main);
    height: 38px;
}

.btn-hist-search {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 10px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    transition: all 0.3s ease;
}
.btn-hist-search:hover { background: rgba(255, 255, 255, 0.4); }

/* --- Estado Vacío --- */
.hist-empty-state {
    background: var(--bg-sidebar);
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
.hist-empty-icon {
    background: rgba(41, 121, 255, 0.1);
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px auto;
}
.hist-empty-title { color: var(--text-main); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.hist-empty-text { color: var(--text-muted); font-size: 14px; max-width: 400px; margin: 0 auto; }

/* --- Tarjetas de Estadísticas (Con prefijo hist-) --- */
.hist-stats-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.hist-stat-card {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.hist-stat-card h2 { font-size: 28px; margin: 0; font-weight: 700; }
.hist-stat-card p { margin: 0; font-size: 13px; opacity: 0.9; }

.hist-cyan { background: #00bcd4; }
.hist-green { background: #2e7d32; }
.hist-yellow { background: #ffc107; color: #333; }
.hist-blue { background: #1565c0; }

/* --- Tabla de Resultados --- */
.hist-table-card {
    padding: 0; overflow: hidden;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.hist-table-header {
    padding: 15px 20px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-muted);
    display: flex; justify-content: space-between; align-items: center;
}

.hist-data-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.hist-data-table th, .hist-data-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.hist-data-table th {
    font-weight: 600;
    color: var(--text-muted);
}

.hist-data-table thead { background: var(--bg-body); color: var(--text-muted); }
.hist-data-table td { color: var(--text-main); }

/* --- Badges de Estado (4 Niveles) --- */
.hist-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: white; /* Texto blanco para todos */
    display: inline-block;
    min-width: 70px; /* Para que se vean uniformes */
    text-align: center;
}

/* 🔴 Crítico (70-100%) */
.hist-badge-crit { background: #d32f2f; } 

/* 🟧 Alerta (40-69%) - Naranja */
.hist-badge-alert { background: #f57c00; } 

/* 🟨 Moderado (26-39%) - Amarillo Oscuro (para que se lea la letra blanca) */
.hist-badge-mod { background: #fbc02d; color: #333; } /* Letra oscura para amarillo */

/* 🟩 Seguro (0-25%) - Verde */
.hist-badge-safe { background: #388e3c; }

/* --- Paginación --- */
.hist-pagination {
    padding: 15px 20px;
    background: var(--bg-body);
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border-color);
}
.hist-btn-pag {
    padding: 8px 15px; border-radius: 6px; font-size: 13px;
    display: flex; align-items: center; gap: 5px; text-decoration: none;
}
.hist-btn-prev { background: var(--bg-sidebar); border: 1px solid var(--border-color); color: var(--text-main); }
.hist-btn-next { background: #2979ff; color: white; border: none; }
.hist-btn-dis { color: var(--text-muted); opacity: 0.5; cursor: not-allowed; border: 1px solid transparent; }


/* =========================================
   CORRECCIÓN ICONO CALENDARIO (MODO OSCURO)
   ========================================= */

/* Opción 1: Forzar al navegador a usar esquema oscuro (Moderno) */
.hist-control {
    color-scheme: light dark;
}

/* Opción 2: Forzar el color blanco manualmente con un filtro */
/* Esto busca si el body tiene la clase "dark" o "dark-mode" */
body.dark .hist-control::-webkit-calendar-picker-indicator,
body.dark-mode .hist-control::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Convierte el negro en blanco */
    opacity: 0.8;      /* Un poco de transparencia para que se vea elegante */
    cursor: pointer;
}


/* =========================================
   ESTILO BOTÓN AZUL (TIPO IMAGEN)
   ========================================= */

.btn-gradient-blue {
    /* Gradiente Azul similar al de la imagen */
    background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
    
    /* Texto Blanco */
    color: white;
    
    /* Forma y Espaciado */
    border: none;
    border-radius: 8px; /* Bordes redondeados suaves */
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    
    /* Flexbox para alinear el icono + */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Sombra suave azulada */
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.3);
    
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none; /* Por si se usa en etiquetas <a> */
}

/* Efecto Hover (Al pasar el mouse) */
.btn-gradient-blue:hover {
    transform: translateY(-2px); /* Se eleva un poco */
    box-shadow: 0 6px 15px rgba(2, 136, 209, 0.4);
    filter: brightness(1.05); /* Se ilumina un poco */
}

.btn-gradient-blue:active {
    transform: translateY(0);
}




/* =========================================
   CABECERA AUTOMATIZACIONES (ESTILO TARJETA)
   ========================================= */

.auto-header-card {
    /* Fondo degradado muy suave (Blanco a Azul pálido) */
    background: linear-gradient(90deg, #ffffff 0%, #f4faff 100%);
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 20px 30px;
    
    /* Alineación */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Texto a la izq, Botón a la der */
    
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Sombra suave */
}

/* Contenedor Izquierdo (Icono + Textos) */
.auto-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Estilo del Icono de Telegram */
.telegram-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    /* Una sombra suave azul detrás del icono para que resalte */
    filter: drop-shadow(0 4px 8px rgba(41, 182, 246, 0.25));
}

/* Textos */
.auto-header-info h2 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.auto-header-info p {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

/* Ajuste Responsive para móviles */
@media (max-width: 768px) {
    .auto-header-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .btn-gradient-blue {
        width: 100%;
        justify-content: center;
    }
}





/* =========================================
   ESTILOS TABLA MODERN (AUTOMATIZACIONES)
   ========================================= */

/* 1. Contenedor de la Tarjeta */
.card-modern {
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

/* 2. Cabecera Interna de la Tarjeta */
.card-modern-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-sidebar);
}

/* 3. La Tabla en sí */
.table-modern {
    width: 100%;
    border-collapse: collapse; /* Importante para que los bordes se vean bien */
}

.table-modern th {
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-muted); /* Usa tu variable gris nativa */
    font-weight: 700;
    letter-spacing: 1px;
    padding: 15px 25px;
    text-align: left;
    background: var(--bg-body); /* Fondo ligeramente distinto al de la fila */
    border-bottom: 1px solid var(--border-color);
}

.table-modern td {
    padding: 16px 25px;
    border-bottom: 1px solid var(--border-color); /* Línea separadora */
    color: var(--text-main);
    vertical-align: middle;
    background: var(--bg-sidebar);
}

.table-modern tr:last-child td {
    border-bottom: none; /* Quitar borde al último elemento */
}

/* 4. Elementos Visuales */
.badge-telegram {
    background-color: #29b6f6;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
}

.btn-action-square {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 5px;
    color: white;
}
.btn-edit-blue { background-color: #29b6f6; }
.btn-delete-red { background-color: #ef5350; }
.btn-action-square:hover { filter: brightness(0.9); transform: translateY(-1px); }

/* =========================================
   CORRECCIONES MODO OSCURO (AUTOMÁTICAS)
   ========================================= */
/* Al usar variables (var(--...)), esto se adapta solo. 
   Pero forzamos algunos ajustes específicos para la cabecera azul */

body.dark .auto-header-card {
    background: linear-gradient(90deg, #1c1e21 0%, #25282c 100%) !important;
    border: 1px solid var(--border-color);
}
body.dark .auto-header-info h2 { color: #f5f5f5; }
body.dark .auto-header-info p { color: #90a4ae; }

/* Forzar que los nombres sean blancos en modo oscuro */
body.dark .table-modern td[style*="font-weight: 600"] {
    color: #fff !important;
}


/* =========================================
   FIX BOTÓN MÓVIL (EVITAR QUE SE ESTIRE)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Ajustar el contenedor del título y el botón */
    .page-header {
        flex-direction: column;       /* Uno debajo del otro */
        align-items: flex-start !important; /* ¡IMPORTANTE! Alinea a la izquierda en vez de estirar */
        gap: 15px;                    /* Espacio entre título y botón */
    }

    /* 2. Forzar al botón a tener ancho automático */
    .btn-gradient-blue {
        width: auto !important;       /* Ancho basado en el contenido, no 100% */
        display: inline-flex !important;
        justify-content: center;
    }
}


/* =========================================
   FIX SCROLL: LISTA DE DISPOSITIVOS
   ========================================= */

/* 1. Hacemos que la tarjeta ocupe exactamente el espacio restante en pantalla */
.dashboard-content.fixed-mode .card-modern {
    flex: 1;                /* Ocupa todo el alto disponible */
    display: flex;          /* Usamos Flexbox interno */
    flex-direction: column; /* Elementos uno bajo otro */
    overflow: hidden;       /* Cortamos lo que sobresalga */
    min-height: 0;          /* TRUCO IMPORTANTE: Permite que el flex se encoja para activar scroll */
    margin-bottom: 20px;    /* Un pequeño margen abajo */
}

/* 2. El contenedor del contenido (el div con padding debajo del header) */
.dashboard-content.fixed-mode .card-modern > div:last-child {
    flex: 1;                /* Ocupa el espacio restante bajo el título */
    overflow-y: auto;       /* ¡AQUÍ ACTIVAMOS EL SCROLL! */
    padding-bottom: 40px;   /* Espacio extra al final para ver la última tarjeta */
}

/* 3. Ajuste opcional para la barra de desplazamiento (Scrollbar) */
.dashboard-content.fixed-mode .card-modern > div:last-child::-webkit-scrollbar {
    width: 8px;
}
.dashboard-content.fixed-mode .card-modern > div:last-child::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* =========================================
   FIX RESPONSIVE: AJUSTE DE TAMAÑOS
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Reducir el hueco gigante entre "Estado" y "Señal" */
    .pro-stats-row {
        gap: 15px !important; /* De 50px bajamos a 15px */
    }

    /* 2. Reducir el relleno interno de la tarjeta */
    .device-card-pro {
        padding: 15px 10px !important; /* Menos aire a los lados */
    }

    /* 3. Achicar un poco el número del porcentaje */
    .pro-level-value {
        font-size: 38px !important;
    }
    
    /* 4. Asegurar que la tarjeta no se salga del ancho */
    .device-card-pro {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =========================================
   FIX RESPONSIVE: MODO ZOOM (ESCALA)
   ========================================= */
@media (max-width: 768px) {
    
    /* Aplicar zoom a todo el contenedor de las tarjetas */
    #device-list-container {
        zoom: 0.7; /* Escala al 80% (El 75% suele ser muy pequeño, prueba 0.8 primero) */
    }

    /* Opcional: Si quieres escalar TODA la pantalla en móvil */
     .dashboard-content {
        zoom: 0.6;
    } 
    
}




/* =========================================
   FIX PERFIL MÓVIL (AHORRAR ESPACIO)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Mover el contenedor del perfil (Top Bar) a la esquina superior derecha */
    .top-bar {
        position: absolute !important; /* Lo sacamos del flujo normal */
        top: 15px !important;          /* Lo alineamos verticalmente con el menú */
        right: 15px !important;        /* Lo pegamos a la derecha */
        width: auto !important;        /* Que ocupe solo lo necesario */
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        z-index: 1200;                 /* Asegurar que quede por encima de todo */
        display: block !important;
    }

    /* 2. Reducir el espacio del encabezado móvil para subir el contenido */
    /* Como el icono ya no ocupa espacio, reducimos el margen para que las tarjetas suban */
    .mobile-header {
        padding-bottom: 10px !important; 
        margin-bottom: 10px !important;
        height: auto;
        min-height: 50px; /* Altura mínima para el título y menú */
        display: flex;
        align-items: center;
    }

    /* 3. Asegurar que el contenido principal suba */
    .dashboard-content {
        padding-top: 0 !important;
    }

    /* (Opcional) Si tienes una barra de búsqueda en el topbar, la ocultamos en móvil para que no estorbe */
    .top-bar form, .top-bar input {
        display: none !important;
    }
}