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

/* =========================
   BODY
========================= */
body {
    font-family: "Courier New", monospace;
    background: linear-gradient(135deg, #020617, #0f172a);
    color: #e2e8f0;
    min-height: 100vh;
}

/* =========================
   LOGIN
========================= */
.login-container {
    width: 350px;
    margin: 120px auto;
    padding: 30px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #0ea5e9;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
    text-align: center;
}

.login-container h2 {
    margin-bottom: 20px;
    color: #22c55e;
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background: #020617;
    border: 1px solid #0ea5e9;
    color: #e2e8f0;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background: #22c55e;
    border: none;
    color: #020617;
    font-weight: bold;
}

/* =========================
   HEADER
========================= */
header {
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
    border-bottom: 1px solid #0ea5e9;
}

header h1 {
    color: #22c55e;
}

/* =========================
   TABLE
========================= */
table {
    width: 90%;
    margin: 20px auto;
    border-collapse: collapse;
}

th {
    color: #22c55e;
}

.table-container {
    width: 90%;
    margin: auto;
    max-height: 300px;
    overflow: auto;
}

/* =========================
   ALERTAS
========================= */
.alerta { background: rgba(255,0,0,0.2); }
.prediccion { background: rgba(255,255,0,0.1); }

/* =========================
   MAPA
========================= */
#mapa {
    width: 90%;
    height: 250px;
    margin: 20px auto;
}

/* =========================
   DASHBOARD LAYOUT (NUEVO)
========================= */

.dashboard-container {
    width: 90%;
    margin: 20px auto;
}

/* 🔥 TOP (MAPA + GRAFICA) */
.dashboard-top {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* MAPA IZQUIERDA */
.mapa-wrapper {
    width: 40%;
}

.mapa-wrapper #mapa {
    width: 100%;
    height: 220px;
    margin: 0;
    border: 1px solid #0ea5e9;
    border-radius: 6px;
}

/* GRAFICA DERECHA */
.grafica-wrapper {
    width: 60%;
    display: flex;
    align-items: center;
}

.grafica-wrapper canvas {
    width: 100% !important;
    height: 220px !important;
}

/* =========================
   TABLA PROFESIONAL
========================= */

.logs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* BORDES CLAROS */
.logs-table th,
.logs-table td {
    border: 1px solid rgba(14, 165, 233, 0.3);
    padding: 8px;
    font-size: 13px;
}

/* HEADER TABLA */
.logs-table th {
    text-align: left;
    letter-spacing: 1px;
}

/* FILAS */
.logs-table tr:hover {
    background: rgba(14, 165, 233, 0.1);
}

/* =========================
   INDICADORES DE RIESGO
========================= */

.riesgo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.riesgo::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* COLORES */
.riesgo-alto::before {
    background: #ef4444;
}

.riesgo-medio::before {
    background: #facc15;
}

.riesgo-bajo::before {
    background: #22c55e;
}

/* =========================
   HEADER MEJORADO
========================= */

header a {
    color: #a855f7;
    text-decoration: none;
    font-weight: bold;
}

header a:hover {
    color: #22c55e;
}

/* =========================
   AJUSTE GENERAL (SIN SCROLL)
========================= */

body {
    overflow-x: hidden;
}


/* =========================
   DASHBOARD NUEVO
========================= */

.dashboard-container {
    width: 90%;
    margin: auto;
}

.dashboard-top {
    display: flex;
    gap: 20px;
}

.mapa-wrapper {
    width: 40%;
}

.grafica-wrapper {
    width: 60%;
}

.grafica-wrapper canvas {
    width: 100% !important;
    height: 220px !important;
}

/* TABLA PRO */
.logs-table {
    width: 100%;
    border-collapse: collapse;
}

.logs-table th,
.logs-table td {
    border: 1px solid rgba(14,165,233,0.3);
    padding: 8px;
}

/* RIESGO */
.riesgo {
    font-weight: bold;
}

.riesgo-alto::before {
    content: "🔴 ";
}

.riesgo-medio::before {
    content: "🟡 ";
}

.riesgo-bajo::before {
    content: "🟢 ";
}