/* static/css/dashboard.css */

/* --- Variables de Color de Innovateqroo (Fondo Claro) --- */
:root {
    --iqr-dark-blue: #013C57;      /* Títulos, Texto Principal */
    --iqr-light-blue: #00BCD4;     /* Acento, Botones Principales */
    --iqr-warning: #FFC107;        /* Alerta Media */
    --iqr-danger: #DC3545;         /* Alerta Crítica/Inactivo */
    --iqr-success: #28A745;        /* Estado OK */
    --iqr-bg-light: #F4F7F9;       /* Fondo de página (Gris muy suave) */
    --iqr-card-bg: #ffffff;        /* Fondo de tarjetas (Blanco) */
    --iqr-text-dark: #343A40;      /* Color de texto base */
    --iqr-border: #e9ecef;         /* Borde sutil */
}

/* --- Reseteo y Tipografía (Inter Font) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--iqr-bg-light);
    color: var(--iqr-text-dark);
    min-height: 100vh;
}

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

/* --- Header y Controles --- */
header {
    background-color: var(--iqr-card-bg);
    border-bottom: 3px solid var(--iqr-light-blue);
    padding: 15px 30px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--iqr-dark-blue);
}

.controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group label {
    font-weight: 600;
    font-size: 14px;
    color: var(--iqr-dark-blue);
}

.btn-logout {
    background-color: var(--iqr-danger);
    color: var(--iqr-white);
    padding: 8px 15px;
    border-radius: 6px;
    transition: background-color 0.3s;
}

/* --- Toggle Switch (Presentación) --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--iqr-white);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--iqr-light-blue);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider-label {
    position: absolute;
    color: var(--iqr-white);
    font-size: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-weight: 700;
}

.slider-label-wide {
    left: 8px;
    color: var(--iqr-dark-blue);
}

.slider-label-fluido {
    right: 8px;
}

/* --- Dashboard Grid y Cards --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.card {
    background: var(--iqr-card-bg);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--iqr-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.card-title {
    color: var(--iqr-dark-blue);
    font-weight: 600;
}

/* --- Colores Fijos para Estados de KPI/Tabla --- */
.iqr-color-active {
    color: #a0ae18 !important; /* Verde Oliva/Lima - Color Fijo para Activo */
}
.iqr-color-inactive {
    color: #E30B5D !important; /* Rojo Rosado/Magenta - Color Fijo para Inactivo */
}

/* --- Estilos para Iconos de Tarjetas KPI --- */
.kpi-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--iqr-bg-light); /* Fondo más claro para el icono en la tarjeta */
}

/* --- Colores de Latencia en la Tabla (Revisión) --- */
/* Esto ya está bien, pero se reafirma el uso de las variables IQROO */
.latency-good {
    color: var(--iqr-success); 
    font-weight: 600;
}

.latency-medium {
    color: var(--iqr-light-blue); /* Azul IQROO #00BCD4 (Media) */
    font-weight: 600;
}

.latency-high {
    color: var(--iqr-warning); /* Amarillo #FFC107 (Alta) */
    font-weight: 600;
}

.latency-critical {
    color: var(--iqr-danger); /* Rojo #DC3545 (El color de CRITICAL en la config) */
    font-weight: 700; /* Un poco más de peso, si es necesario */
}


.kpi-value {
    font-weight: 700;
    font-size: 2rem;
    color: var(--iqr-dark-blue);
}

/* FILAS DE GRÁFICOS Y MAPA */
.charts-row {
    display: grid;
    gap: 25px;
    margin-bottom: 30px;
    /* Default: 3 columnas iguales */
    grid-template-columns: repeat(3, 1fr); 
}

/* --- Sección de Alertas y Mapa --- */
.alerts-map-row {
    display: grid;
    gap: 25px;
    margin-bottom: 30px;
    /* Base: 3 columnas para permitir Span 2 (Mapa) y Span 1 (Alertas) */
    grid-template-columns: repeat(3, 1fr); 
}

/* Por defecto, en modo WIDE (Horizontal), Alertas es 1/3 y Mapa es 2/3 */
.alerts-map-row .card:nth-child(1) { /* Alertas (el primer card en la fila) */
    grid-column: span 1;
}

.alerts-map-row .card:nth-child(2) { /* Mapa (el segundo card en la fila) */
    grid-column: span 2;
}


/* FLUIDO (VERTICAL): Todo en una sola columna (1fr) */
.charts-row.fluido, 
.alerts-map-row.fluido {
    grid-template-columns: 1fr !important;
}
.alerts-map-row.fluido .card {
    grid-column: span 1 !important; /* Sobreescribe span 2/1 en modo fluido */
}

/* --- Media Queries (Ajustar para el nuevo layout de alerts-map-row) --- */
@media (max-width: 1200px) {
    /* ... */
    .charts-row:not(.fluido), .alerts-map-row:not(.fluido) {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas pequeñas */
    }
    /* Ajuste para pantallas medianas en modo WIDE */
    .alerts-map-row:not(.fluido) .card:nth-child(1) { /* Alertas */
        grid-column: span 1;
    }
    .alerts-map-row:not(.fluido) .card:nth-child(2) { /* Mapa */
        grid-column: span 1;
    }
}

.charts-row.fluido, 
.alerts-map-row.fluido {
    grid-template-columns: 1fr !important; /* Forza 1 sola columna */
}

/* Estilos para el modo FLUIDO (1 columna) */
.charts-row.fluido, .alerts-map-row.fluido {
    grid-template-columns: 1fr !important;
}

/* Estilos para el mapa y alertas */
#map {
    width: 100%;
    height: 400px;
}

/* --- Estilos para la tabla de Servicios --- */
.table-dashboard th {
    background-color: var(--iqr-bg-light) !important;
    color: var(--iqr-dark-blue);
    font-weight: 600;
}

/* Estilos para Alertas */
.alert-item {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 5px solid transparent;
}

.alert-item.critical {
    border-left-color: var(--iqr-danger);
    background: rgba(220, 53, 69, 0.08); 
    color: var(--iqr-danger);
}

.alert-item.high {
    border-left-color: var(--iqr-warning);
    background: rgba(255, 193, 7, 0.08); 
    color: var(--iqr-warning);
}

/* --- RESPONSIVE PARA MÓVILES --- */
@media (max-width: 768px) {
  .container-fluid {
    padding: 10px;
  }
  
  /* Header en columna */
  header {
    flex-direction: column;
    gap: 15px;
    padding: 15px 20px;
  }
  
  .controls {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }
  
  .control-group {
    flex: 1 1 calc(50% - 10px);
    min-width: 140px;
  }
  
  /* KPIs en 2 columnas */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  /* Gráficos en columna */
  .charts-row {
    grid-template-columns: 1fr;
  }
  
  /* Alertas y mapa en columna */
  .alerts-map-row {
    grid-template-columns: 1fr;
  }
  
  .alerts-map-row .card {
    grid-column: span 1 !important;
  }
  
  /* Tabla scroll horizontal */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ajustar textos */
  .kpi-value {
    font-size: 1.5rem;
  }
  
  .card-title {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  /* KPIs en 1 columna para móviles muy pequeños */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .controls {
    flex-direction: column;
  }
  
  .control-group {
    flex: 1 1 100%;
  }
  
  /* Ajustar inputs */
  .form-select, .form-control {
    font-size: 14px; /* Previene zoom en iOS */
  }
}