/* ==================== panel.css ====================
   Estilos compartidos por index.php (estadísticas) y config.php (configuración).
   Pensado para verse bien también en móvil.
*/

* { box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f0f0f0;
    margin: 0;
    padding: 16px;
    color: #333;
}

h1 { color: #333; font-size: 1.5em; margin: 0 0 12px; }
h2 { margin-top: 0; font-size: 1.1em; color: #0056b3; }
h3 { font-size: 1em; color: #0056b3; }

/* ---------- Navegación ---------- */
.nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.nav a {
    text-decoration: none;
    color: #0056b3;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.92em;
    font-weight: bold;
}
.nav a:hover { background: #eef4fb; }
.nav a.active { background: #007bff; color: #fff; }

/* ---------- Tarjetas ---------- */
.card {
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
    max-width: 1200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow-x: auto;
}

/* ---------- Estado actual ---------- */
.estado-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.estado-item {
    background: #f7f8fa;
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 130px;
    flex: 1 1 130px;
}
.estado-item h4 { margin: 0 0 6px; font-size: 0.78em; color: #666; text-transform: uppercase; letter-spacing: .03em; }
.estado-item p { margin: 0; font-weight: bold; font-size: 1.15em; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.dot-on, .dot-red   { background:#e74c3c; }
.dot-green          { background:#27ae60; }
.dot-off, .dot-gray { background:#aaa; }
.dot-blue           { background:#007bff; }

.banner {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    max-width: 1200px;
    font-size: 0.95em;
}
.banner-ok    { background:#e6f8e6; border:1px solid #8fce8f; }
.banner-error { background:#fde8e8; border:1px solid #e08a8a; }
.banner-warn  { background:#fff6e0; border:1px solid #f0cf7a; }

/* ---------- KPIs ---------- */
.kpis { display:flex; flex-wrap:wrap; gap:14px; margin: 0 0 4px; }
.kpi {
    background:#f5f5f5;
    padding:10px 14px;
    border-radius:8px;
    min-width:150px;
    flex: 1 1 150px;
}
.kpi h4 { margin:0 0 6px; font-size:0.78em; color:#666; text-transform:uppercase; letter-spacing:.03em; }
.kpi p { margin:0; font-weight:bold; font-size:1.05em; color:#0077aa; }

/* ---------- Formularios ---------- */
label { display:block; margin:10px 0 4px; font-size:0.9em; color:#555; }
input, select {
    padding:7px 9px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:0.95em;
    max-width: 100%;
}
button {
    background:#007bff;
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:4px;
    cursor:pointer;
    font-size:0.9em;
    margin-top:12px;
}
button:hover { background:#0056b3; }
button.danger { background:#c0392b; }
button.danger:hover { background:#922b21; }

.inline-form { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.inline-form div { display:flex; flex-direction:column; }
.add-row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:16px; }
.add-row div { display:flex; flex-direction:column; }

/* ---------- Tablas ---------- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 10px; }
th, td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; font-size: 0.9em; white-space: nowrap; }
th { background: #f5f5f5; }

/* ---------- Gráficos ---------- */
.chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    border: 1px solid #eee;
    border-radius: 6px;
}
.chart-scroll canvas { display:block; }
.chart-hint { font-size: 0.8em; color: #888; margin: 6px 0 0; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:0.85em; color:#555; }
.chart-legend span.sw { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:5px; vertical-align:middle; }

/* ---------- Selector de periodo ---------- */
.selector { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    body { padding: 10px; }
    .card { padding: 14px 12px; }
    h1 { font-size: 1.25em; }
    .kpi, .estado-item { min-width: 130px; }
}