:root { --fondo:#eef3f7; --tinta:#1d2733; --suave:#5d6b7a; --linea:#d9e0e7; --primario:#176b87; --primario-osc:#0f4c61;
        --rojo:#b3261e; --rojo-fondo:#fde8e6; --verde:#2e7d32; --verde-fondo:#e3f3e5; --ambar:#a35c00; --ambar-fondo:#fff1d6;
        --azul:#1d5fa8; --azul-fondo:#e3edfa; --gris:#55616d; --gris-fondo:#eceff2; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--tinta); background:var(--fondo); }
.ico { width:1.1em; height:1.1em; vertical-align:-0.18em; margin-right:.3em; flex:none; }
.ico.grande { width:1.7em; height:1.7em; } .ico.enorme { width:3.2em; height:3.2em; margin-right:.4em; }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:linear-gradient(90deg, var(--primario-osc), var(--primario)); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.marca { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:700; font-size:18px; }
.marca .ico { width:1.5em; height:1.5em; margin:0; } .marca small { display:block; font-weight:400; font-size:12px; opacity:.85; line-height:1; }
header nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
header nav a { color:#fff; text-decoration:none; padding:6px 10px; border-radius:6px; }
header nav a:hover, header nav a.activo { background:rgba(255,255,255,.18); }
header .quien { margin-left:10px; opacity:.9; display:flex; align-items:center; }
main { max-width:960px; margin:20px auto; padding:0 16px; }
footer { text-align:center; color:var(--suave); padding:20px; }
.tarjeta { background:#fff; border:1px solid var(--linea); border-radius:10px; padding:16px 20px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.estrecha { max-width:360px; margin:40px auto; } .estrecha-media { max-width:520px; margin:20px auto; }
h1,h2 { margin:0 0 12px; font-size:20px; display:flex; align-items:center; } h2 .ico { color:var(--primario); }
h3 { margin:0; font-size:18px; }
.titulo-seccion { margin:4px 0 10px; }
.suave { color:var(--suave); } .nota { color:var(--suave); font-size:14px; margin:0 0 16px; }
.rojo { color:var(--rojo); font-weight:600; } .verde { color:var(--verde); font-weight:600; } .ambar { color:var(--ambar); font-weight:600; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
/* etiquetas */
.etiqueta { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; line-height:1.6; }
.etiqueta .ico { width:1em; height:1em; margin-right:.3em; }
.etiqueta.verde { background:var(--verde-fondo); color:var(--verde); } .etiqueta.rojo { background:var(--rojo-fondo); color:var(--rojo); }
.etiqueta.ambar { background:var(--ambar-fondo); color:var(--ambar); } .etiqueta.azul { background:var(--azul-fondo); color:var(--azul); }
.etiqueta.gris { background:var(--gris-fondo); color:var(--gris); }
/* franja de alarma */
.franja-alarma { display:flex; align-items:center; gap:12px; background:var(--rojo); color:#fff; border-radius:10px; padding:12px 18px; margin-bottom:16px; }
.franja-alarma .ico { margin:0; }
/* tarjetas de cuadro */
.rejilla-cuadros { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:8px; }
.cuadro { background:#fff; border:1px solid var(--linea); border-left:6px solid var(--gris); border-radius:10px; padding:16px 18px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cuadro-bien { border-left-color:var(--verde); } .cuadro-mal { border-left-color:var(--rojo); } .cuadro-ocupado { border-left-color:var(--ambar); }
.cuadro-cab { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .cuadro-cab .ico { color:var(--primario); margin:0; }
.cuadro-estado { margin-bottom:10px; } .cuadro-estado .etiqueta { font-size:15px; padding:4px 14px; }
.cuadro-datos { color:var(--suave); font-size:14px; display:grid; gap:4px; } .cuadro-datos b { color:var(--tinta); }
.cuadro-acciones { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
/* saldo */
.resumen { display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.saldo { display:flex; align-items:center; color:var(--primario); }
.saldo .numero { font-size:56px; font-weight:800; line-height:1; } .etiqueta-saldo { color:var(--suave); }
.saldo-ambar { color:var(--ambar); } .saldo-rojo { color:var(--rojo); }
.datos div { margin:6px 0; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* tablas y formularios */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--linea); vertical-align:middle; }
th { color:var(--suave); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
tr:hover td { background:#f7f9fb; }
label { display:block; margin-bottom:12px; font-size:15px; }
input, select { display:block; width:100%; padding:9px; margin-top:4px; border:1px solid var(--linea); border-radius:6px; font-size:16px; background:#fff; }
input:focus, select:focus { outline:2px solid var(--primario); border-color:transparent; }
button, .boton { display:inline-flex; align-items:center; padding:9px 16px; border:0; border-radius:6px; background:var(--primario); color:#fff; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; }
button:hover, .boton:hover { background:var(--primario-osc); }
button.peligro { background:var(--rojo); } button.secundario { background:var(--gris); }
.aviso { display:flex; align-items:center; padding:10px 14px; border-radius:8px; margin-bottom:12px; background:var(--ambar-fondo); color:var(--ambar); font-weight:600; }
.aviso.error { background:var(--rojo-fondo); color:var(--rojo); } .aviso.ok { background:var(--verde-fondo); color:var(--verde); }
.dos-columnas { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fila-cabecera { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.en-linea { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.en-linea label { margin:0; } .en-linea input, .en-linea select { width:auto; min-width:150px; }
.margen-arriba { margin-top:12px; } input.casilla { display:inline; width:auto; margin-right:6px; }
.refresco { margin-top:6px; color:var(--suave); }
@media (max-width:700px) { .dos-columnas { grid-template-columns:1fr; } .resumen { gap:16px; } header { flex-direction:column; gap:8px; } }