* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Arial, sans-serif; background:#f2f4f7; color:#1d2733;
       display:flex; min-height:100vh; }

/* ---- sidebar ---- */
.sidebar { width:240px; background:#132a3a; color:#cfdce6; min-height:100vh;
           display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.marca { display:flex; gap:10px; align-items:center; padding:18px 16px;
         border-bottom:1px solid #24445c; }
.marca .logo { width:40px; height:40px; border-radius:9px; flex-shrink:0; display:block; }
.marca strong { color:#fff; font-size:14px; letter-spacing:.5px; }
.marca span { font-size:11px; color:#8fa9bc; }
.sidebar nav { flex:1; padding:10px 0; overflow-y:auto; }
.sidebar nav a { display:block; padding:10px 18px; color:#cfdce6; text-decoration:none;
                 font-size:14px; border-left:3px solid transparent; }
.sidebar nav a b { display:inline-block; background:#24445c; border-radius:50%; width:20px;
                   height:20px; text-align:center; line-height:20px; font-size:11px; margin-right:6px; }
.sidebar nav a:hover { background:#1b3a50; }
.sidebar nav a.act { background:#1b3a50; border-left-color:#e8a33d; color:#fff; }
.paso-titulo { font-size:10px; letter-spacing:1.2px; color:#6d8ba1; padding:14px 18px 4px; }
.pie { padding:12px 18px; font-size:11px; color:#6d8ba1; border-top:1px solid #24445c; }

/* ---- contenido ---- */
main { flex:1; padding:26px 32px; max-width:1250px; }
h1 { font-size:22px; margin-bottom:4px; }
h2 { font-size:16px; margin:22px 0 10px; }
.sub { color:#5c6b7a; font-size:13px; margin-bottom:18px; }
.fila-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }

/* ---- tarjetas ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
         gap:14px; margin:16px 0; }
.card { background:#fff; border-radius:10px; padding:14px 16px;
        box-shadow:0 1px 3px rgba(16,42,67,.08); }
.card .k { font-size:12px; color:#5c6b7a; }
.card .v { font-size:22px; font-weight:700; margin-top:2px; }
.card .v small { font-size:12px; font-weight:400; color:#5c6b7a; }
.card.ok .v { color:#1d7a4f; }
.card.rojo .v { color:#b3261e; }

/* ---- tablas ---- */
.tabla-wrap { background:#fff; border-radius:10px; box-shadow:0 1px 3px rgba(16,42,67,.08);
              overflow-x:auto; margin-bottom:18px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th { background:#eef2f6; text-align:left; padding:9px 10px; font-size:11px;
     letter-spacing:.4px; color:#43566a; text-transform:uppercase; white-space:nowrap; }
td { padding:8px 10px; border-top:1px solid #edf1f5; white-space:nowrap; }
tr:hover td { background:#f7fafc; }
td.num, th.num { text-align:right; }
.tot td { font-weight:700; background:#f4f7fa; }

/* ---- badges y alertas ---- */
.badge { display:inline-block; font-size:11px; font-weight:600; border-radius:20px;
         padding:2px 9px; }
.b-verde { background:#e0f2e9; color:#1d7a4f; }
.b-ambar { background:#fdf1dc; color:#9a6b15; }
.b-rojo  { background:#fde3e1; color:#b3261e; }
.b-gris  { background:#e9edf1; color:#5c6b7a; }
.aviso { background:#fdf1dc; border-left:4px solid #e8a33d; border-radius:6px;
         padding:10px 14px; font-size:13px; margin:10px 0; }

/* ---- formularios ---- */
form.panel, .panel { background:#fff; border-radius:10px; padding:18px;
                     box-shadow:0 1px 3px rgba(16,42,67,.08); margin-bottom:18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
label { display:block; font-size:12px; color:#43566a; font-weight:600; margin-bottom:3px; }
label .opt { font-weight:400; color:#8296aa; }
input, select, textarea { width:100%; padding:8px 10px; border:1px solid #ccd6e0;
        border-radius:7px; font-size:14px; font-family:inherit; background:#fff; }
input:focus, select:focus, textarea:focus { outline:2px solid #e8a33d; border-color:#e8a33d; }
.ayuda { font-size:11px; color:#8296aa; margin-top:2px; }
.calc-linea { background:#eef6f0; border-radius:7px; padding:8px 12px; font-size:13px;
              margin-top:10px; color:#1d5c3f; }

/* ---- botones ---- */
.btn { display:inline-block; background:#1f4e5f; color:#fff; border:none; border-radius:7px;
       padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { background:#17404f; }
.btn.amarillo { background:#e8a33d; color:#132a3a; }
.btn.amarillo:hover { background:#d3922f; }
.btn.chico { padding:5px 10px; font-size:12px; }
.btn.gris { background:#e9edf1; color:#43566a; }
.btn.rojo { background:#fde3e1; color:#b3261e; }
.btn-x { background:none; border:none; color:#b3261e; cursor:pointer; font-size:14px; }
form.inline { display:inline; }

/* ---- guía paso a paso ---- */
.guia { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;
        margin:14px 0 20px; }
.guia .paso { background:#fff; border-radius:10px; padding:14px;
              box-shadow:0 1px 3px rgba(16,42,67,.08); border-top:3px solid #e8a33d; }
.guia .paso .num { font-size:11px; color:#8296aa; font-weight:700; letter-spacing:1px; }
.guia .paso h3 { font-size:14px; margin:4px 0 6px; }
.guia .paso p { font-size:12px; color:#5c6b7a; margin-bottom:8px; }

/* ---- balance corrida ---- */
.balance { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.balance div { background:#f4f7fa; border-radius:8px; padding:10px 12px; }
.balance .k { font-size:11px; color:#5c6b7a; }
.balance .v { font-size:16px; font-weight:700; }
.dos-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:1000px){ .dos-col { grid-template-columns:1fr; } }