/* ==========================================================================
   Auditor Creativos GP — panel.css
   ========================================================================== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f0f2f5;
    color: #1f2937;
}

/* ---------- Barra superior ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: #1f2937; color: #fff;
    padding: 12px 18px;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.topbar .brand { font-size: 18px; font-weight: bold; }
.topbar .controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.topbar select, .topbar button {
    padding: 7px 10px; border-radius: 6px; border: 1px solid #374151;
    background: #374151; color: #fff; cursor: pointer; font-size: 13px;
}
.topbar input[type=date] { padding: 6px; border-radius: 6px; border: none; }
.topbar button:hover { background: #4b5563; }
.topbar .salir { color: #fca5a5; text-decoration: none; font-weight: bold; }
.topbar label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* ---------- Resumen ---------- */
.resumen {
    margin: 14px 18px; padding: 14px 18px;
    background: #fff; border-radius: 12px; font-size: 15px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06); line-height: 22px;
}
.resumen b { color: #111827; }
.resumen .pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-weight: bold; margin: 0 3px; }
.resumen .pill.cola { background: #dbeafe; color: #1e40af; }
.resumen .pill.inter { background: #fef3c7; color: #92400e; }
.resumen .pill.rv { background: #fee2e2; color: #991b1b; }
.resumen .pill.off { background: #f3f4f6; color: #374151; }

/* ---------- Tabla ---------- */
.tabla-contenedor {
    margin: 0 18px 24px;
    overflow: auto;                     /* scroll propio (X e Y) */
    max-height: calc(100vh - 150px);    /* deja fijos el topbar y el resumen; la tabla scrollea adentro */
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.mi-tabla {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: #fff;
}
.mi-tabla thead th {
    background: #1f2937;   /* el fondo va en el TH: al ser sticky no hereda el del TR (si no, texto blanco invisible) */
    color: #fff; padding: 12px 10px; text-align: left;
    font-size: 12px; letter-spacing: .3px;
    position: sticky; top: 0; z-index: 10;   /* se pega al tope del contenedor con scroll propio */
    white-space: nowrap;
}
.mi-tabla thead th.sortable { cursor: pointer; user-select: none; }
.mi-tabla thead th.sortable:hover { background: #374151; }
.mi-tabla tbody tr { border-bottom: 1px solid #eef0f3; }
.mi-tabla tbody tr:hover { background: #f9fafb; }
.mi-tabla td { padding: 10px; vertical-align: top; }
.mi-tabla tfoot td {
    padding: 12px 10px; font-weight: bold; background: #eef2f7; border-top: 2px solid #d1d5db;
    position: sticky; bottom: 0; z-index: 9;   /* totales siempre visibles al scrollear */
}

/* ---------- Estados de celda (colores) ---------- */
td.g      { background: #dcfce7; color: #166534; font-weight: bold; text-align: center; }
td.bajo   { background: #fef9c3; color: #854d0e; font-weight: bold; text-align: center; }
td.medio  { background: #fed7aa; color: #9a3412; font-weight: bold; text-align: center; }
td.alto   { background: #fecaca; color: #991b1b; font-weight: bold; text-align: center; }
td.rojo   { background: #fecaca; color: #991b1b; font-weight: bold; text-align: center; }
td.num    { text-align: center; }

/* ---------- Estado conexion ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: bold; white-space: nowrap; }
.badge.on  { background: #dcfce7; color: #166534; }
.badge.off { background: #fee2e2; color: #991b1b; }
.badge.cargando { background: #e5e7eb; color: #374151; }

/* etiqueta del sistema */
.sistema { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: bold; }
.sistema.t1 { background: #ede9fe; color: #5b21b6; } /* siine / cine */
.sistema.t2 { background: #ffedd5; color: #9a3412; } /* casona / restaurante */
.sistema.t3 { background: #cffafe; color: #155e75; } /* transitix / transporte */

/* cron */
.cron.libre { color: #166534; font-weight: bold; }
.cron.corriendo { color: #b45309; font-weight: bold; }

/* salud */
.salud { font-size: 11px; line-height: 17px; min-width: 210px; }
.salud small { color: #6b7280; }

/* acciones */
.acciones a { display: inline-block; margin: 2px 0; font-size: 11px; color: #2563eb; text-decoration: none; }
.acciones a:hover { text-decoration: underline; }

/* fila con problemas resaltada */
tr.tiene-problema { box-shadow: inset 4px 0 0 #dc2626; }

/* uptime */
.uptime { color: #6b7280; font-size: 11px; }

/* login */
.login-wrap { width: 320px; margin: 120px auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.login-wrap h1 { font-size: 20px; text-align: center; margin: 0 0 20px; }
.login-wrap input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 15px; }
.login-wrap button { width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }