/* NETASET escritorio — tokens del handoff de diseño (design_handoff/README.md).
   Petróleo íntegro: #0A4E52 superficie de marca, #0E6E72 la acción del momento
   (una por pantalla). Verde/ámbar/rojo SOLO para estado; gris = sin datos. */

:root {
    --marca: #0A4E52;
    --accion: #0E6E72;
    --accion-pulsada: #0A565A;
    --marca-1: #0D6165;
    --marca-2: #2C7D80;
    --sobre-marca: #F4F4F2;
    --sobre-marca-2: #CFE6E7;
    --sobre-marca-3: #9FC6C8;
    --papel: #F7F6F2;
    --tarjeta: #FFFFFF;
    --hundido: #EFEDE7;
    --tinta: #10201F;
    --texto: #4A4841;
    --secundario: #6B6960;
    --borde: #DCD9D1;
    --borde-suave: #E6E3DC;
    --borde-fino: #F0EEE9;
    --ok: #1F8A4D;
    --revisar: #B5760A;
    --urgente: #B93A2C;
    --sin-datos: #8C8A80;
    --fila-roja: #FDF7F6;
    --fila-ambar: #FFF6E6;
    --sombra: 0 20px 50px rgba(20, 20, 15, 0.16);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
}

a { color: var(--accion); text-decoration: none; }
a:hover { color: var(--tinta); }

/* ── Estructura: barra lateral 224 px sobre petróleo ─────────────────── */

.app { display: flex; min-height: 100vh; }

.lateral {
    width: 224px;
    flex: none;
    background: var(--marca);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lateral .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    color: var(--sobre-marca);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 19px;
}

.lateral nav { display: flex; flex-direction: column; gap: 2px; }

.lateral nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--sobre-marca-2);
    font-size: 13.5px;
    font-weight: 500;
}

.lateral nav a:hover { background: var(--marca-1); color: var(--sobre-marca); }
.lateral nav a.activa { background: var(--marca-1); color: var(--sobre-marca); font-weight: 600; }

.lateral nav a .cifra {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--sobre-marca-3);
}

.lateral .pie {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--sobre-marca-2);
    font-size: 12.5px;
    padding: 0 6px;
}

/* ── Contenido ───────────────────────────────────────────────────────── */

.contenido { flex: 1; padding: 28px; min-width: 0; }

.cabecera {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
}

.cabecera h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.cabecera .fecha { color: var(--secundario); font-size: 13.5px; }
.cabecera .acciones { margin-left: auto; display: flex; gap: 10px; }

/* ── Tarjetas y filas ────────────────────────────────────────────────── */

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 11px;
    padding: 16px 18px;
}

.tarjeta h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tarjeta h2 .cifra {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    margin-left: auto;
}

.tarjeta.borde-ok { border-left: 4px solid var(--ok); }
.tarjeta.borde-revisar { border-left: 4px solid var(--revisar); }
.tarjeta.borde-urgente { border-left: 4px solid var(--urgente); }
.tarjeta.borde-neutro { border-left: 4px solid var(--sin-datos); }

.rejilla { display: grid; gap: 14px; }
.rejilla.c4 { grid-template-columns: repeat(4, 1fr); }
.rejilla.c2 { grid-template-columns: repeat(2, 1fr); }

.fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--borde-suave);
    background: var(--tarjeta);
    font-size: 13.5px;
}

.fila.roja { background: var(--fila-roja); }
.fila.ambar { background: var(--fila-ambar); }
.fila .meta { color: var(--secundario); font-size: 12.5px; }
.fila .hora { font-family: 'IBM Plex Mono', monospace; }

/* ── Estados (chips) ─────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); background: #edf5f0; }
.chip.revisar { color: var(--revisar); background: var(--fila-ambar); }
.chip.urgente { color: var(--urgente); background: var(--fila-roja); }
.chip.neutro { color: var(--sin-datos); background: var(--hundido); }

/* ── Tablas ──────────────────────────────────────────────────────────── */

table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tabla th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--secundario);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde);
}

.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--borde-fino); vertical-align: middle; }
.tabla tr:hover td { background: var(--papel); }
.tabla .mono { font-family: 'IBM Plex Mono', monospace; }

/* ── Formularios y botones ───────────────────────────────────────────── */

.boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    border: none;
    background: var(--accion);
    color: var(--sobre-marca);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.boton:active { background: var(--accion-pulsada); }

.boton.secundario {
    background: var(--tarjeta);
    color: var(--tinta);
    border: 1px solid var(--borde);
}

.boton.pequeno { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }

input, select, textarea {
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 10px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--tarjeta);
    color: var(--tinta);
    max-width: 100%;
}

input:focus, select:focus, textarea:focus { outline: 2px solid var(--accion); outline-offset: 0; border-color: var(--accion); }

label { font-size: 12.5px; font-weight: 600; color: var(--secundario); display: block; margin-bottom: 4px; }

.form-linea { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-linea > div { display: flex; flex-direction: column; }

/* ── Avisos flash ────────────────────────────────────────────────────── */

.flash {
    padding: 11px 14px;
    border-radius: 9px;
    margin-bottom: 16px;
    font-size: 13.5px;
    border: 1px solid;
}

.flash.ok { background: #edf5f0; border-color: #B8D4C3; color: var(--ok); }
.flash.aviso { background: var(--fila-ambar); border-color: #E0C891; color: var(--revisar); }

/* ── Estado vacío honesto ────────────────────────────────────────────── */

.vacio {
    padding: 26px 18px;
    text-align: center;
    color: var(--sin-datos);
    font-size: 13.5px;
    background: var(--hundido);
    border-radius: 9px;
}

/* ── Cuadrante ───────────────────────────────────────────────────────── */

.cuadrante { overflow-x: auto; }
.cuadrante table { min-width: 980px; }

.turno-celda {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--hundido);
    border: 1px solid var(--borde-suave);
    font-size: 12.5px;
    margin-bottom: 4px;
}

.turno-celda .hora { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--secundario); }
.turno-celda.hueco { background: var(--fila-roja); border-color: #E5C0BA; }
.turno-celda.sustitucion { background: var(--fila-ambar); border-color: #E0C891; }

/* ── Login ───────────────────────────────────────────────────────────── */

.login-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--marca);
}

.login-caja {
    width: 380px;
    background: var(--tarjeta);
    border-radius: 16px;
    padding: 34px 32px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-caja .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--marca);
}