:root {
    --fondo: #0f1115;
    --panel: #171a21;
    --panel-2: #1e222b;
    --borde: #2a2f3a;
    --texto: #e6e8ee;
    --tenue: #9aa3b2;
    --acento: #4c8dff;
    --ok: #35c26a;
    --aviso: #e8b339;
    --error: #f2545b;
    --radio: 10px;
}

@media (prefers-color-scheme: light) {
    :root {
        --fondo: #f4f6fa;
        --panel: #ffffff;
        --panel-2: #f0f2f7;
        --borde: #d9dee8;
        --texto: #1a1f2b;
        --tenue: #667085;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 15px/1.55 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- barra ---------- */
.barra {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.25rem;
    height: 56px;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
}

.marca { font-size: 1.05rem; white-space: nowrap; }
.barra nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }

.barra nav a {
    color: var(--tenue);
    padding: .4rem .7rem;
    border-radius: var(--radio);
    font-size: .92rem;
}

.barra nav a:hover { background: var(--panel-2); text-decoration: none; }
.barra nav a.activo { background: var(--acento); color: #fff; }

.sesion { display: flex; gap: .75rem; align-items: center; color: var(--tenue); font-size: .88rem; }
.salir { color: var(--tenue); }

/* ---------- estructura ---------- */
.contenido { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.pie { text-align: center; color: var(--tenue); font-size: .8rem; padding: 1rem 0 2rem; }

h1 { font-size: 1.4rem; margin: 0 0 1.1rem; }
h2 { font-size: 1.05rem; margin: 1.8rem 0 .7rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rejilla-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.kpi { text-align: left; }
.kpi .valor { font-size: 1.9rem; font-weight: 650; line-height: 1.1; }
.kpi .rotulo { color: var(--tenue); font-size: .82rem; margin-top: .2rem; }

/* ---------- tablas ---------- */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); }

table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { background: var(--panel-2); color: var(--tenue); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
td.envolver, th.envolver { white-space: normal; }

/* ---------- señales ---------- */
.pastilla {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.pastilla.ok     { background: rgba(53,194,106,.15);  color: var(--ok);     border-color: rgba(53,194,106,.35); }
.pastilla.aviso  { background: rgba(232,179,57,.15);  color: var(--aviso);  border-color: rgba(232,179,57,.35); }
.pastilla.error  { background: rgba(242,84,91,.15);   color: var(--error);  border-color: rgba(242,84,91,.35); }
.pastilla.info   { background: rgba(76,141,255,.15);  color: var(--acento); border-color: rgba(76,141,255,.35); }
.pastilla.gris   { background: var(--panel-2);        color: var(--tenue);  border-color: var(--borde); }

.tenue { color: var(--tenue); }
.mono  { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; }

/* ---------- formularios ---------- */
form.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
label { display: block; font-size: .78rem; color: var(--tenue); margin-bottom: .25rem; }

input, select, textarea, button {
    font: inherit;
    color: var(--texto);
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: .42rem .6rem;
}

input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

button, .boton {
    background: var(--acento);
    color: #fff;
    border-color: transparent;
    cursor: pointer;
    font-weight: 550;
    padding: .45rem .9rem;
}

button:hover { filter: brightness(1.1); }
button.secundario, .boton.secundario { background: var(--panel-2); color: var(--texto); border-color: var(--borde); }
button.peligro { background: var(--error); }

/* ---------- crudo ---------- */
pre.crudo {
    background: var(--panel-2);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .9rem;
    overflow-x: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.tab { color: var(--acento); font-weight: 700; }

/* ---------- barras por hora ---------- */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: .5rem; }
.barras div { flex: 1; background: var(--acento); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; opacity: .85; }
.barras div span { position: absolute; bottom: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .62rem; color: var(--tenue); }
.barras-pie { height: 1.2rem; }

/* ---------- login ---------- */
.login { max-width: 340px; margin: 12vh auto; }
.login .tarjeta { padding: 1.6rem; }
.login h1 { text-align: center; }
.login input { width: 100%; margin-bottom: .8rem; }
.login button { width: 100%; }

.aviso-caja { border-left: 3px solid var(--aviso); background: rgba(232,179,57,.08); padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.error-caja { border-left: 3px solid var(--error); background: rgba(242,84,91,.08); padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.ok-caja    { border-left: 3px solid var(--ok);    background: rgba(53,194,106,.08); padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; }