/* Centro de Control — estilo común (sobrio, institucional, marca blanca por variables) */
:root{
  --primario:#10314a; --primario-2:#1a4668; --acento:#7b1e3a; --acento-suave:#f3e6ea;
  --fondo:#eef2f6; --superficie:#ffffff; --tx:#1a2530; --tx2:#55677a; --tx3:#8a9bab; --borde:#d7e0e9; --borde-2:#c4d0db;
  --verde:#0b8a3a; --verde-suave:#e4f4ea; --ambar:#b7791f; --ambar-suave:#fbf1dc; --rojo:#c0392b; --rojo-suave:#fbe7e4; --azul:#2563eb; --azul-suave:#e5edfb;
  --radio:12px; --sombra:0 1px 2px rgba(16,49,74,.06),0 6px 18px -8px rgba(16,49,74,.18);
  --fuente:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tx);font-family:var(--fuente);font-size:15px;line-height:1.45;min-height:100vh;min-height:100dvh;overflow-x:hidden;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--primario)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- textos --- */
h1,h2,h3{margin:0 0 .4em;font-weight:600;line-height:1.2;color:var(--primario)}
h1{font-size:1.45rem}h2{font-size:1.15rem}h3{font-size:1rem}
.sub{color:var(--tx2);font-size:.92rem}
.min{font-size:.82rem;color:var(--tx2)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.9em}

/* --- barra superior --- */
.barra{position:sticky;top:0;z-index:20;background:var(--primario);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));box-shadow:0 2px 8px rgba(0,0,0,.15)}
.barra .marca{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.barra .logo{width:36px;height:36px;border-radius:8px;background:#fff;color:var(--primario);display:grid;place-items:center;overflow:hidden;flex:none}
.barra .logo img{width:100%;height:100%;object-fit:contain}
.barra .logo svg{width:22px;height:22px}
.barra .titulos{min-width:0}
.barra .titulos b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .titulos span{display:block;font-size:.76rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .acciones{display:flex;gap:6px;align-items:center;flex:none}
.barra .btn-barra{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:7px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;white-space:nowrap}
.barra .btn-barra:hover{background:rgba(255,255,255,.22)}
.barra .btn-barra svg{width:16px;height:16px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:none}

/* --- contenedores --- */
.w{max-width:1120px;margin:0 auto;padding:18px 16px 40px}
.card{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px}
.card + .card{margin-top:14px}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fila.entre{justify-content:space-between}
.sep{height:1px;background:var(--borde);margin:14px 0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* --- botones --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--borde-2);background:#fff;color:var(--tx);border-radius:9px;padding:9px 14px;cursor:pointer;font-weight:500;line-height:1.2;min-height:40px;text-decoration:none;white-space:nowrap}
.btn:hover{background:#f6f8fb}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.p{background:var(--primario);border-color:var(--primario);color:#fff}
.btn.p:hover{background:var(--primario-2)}
.btn.a{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.peligro{color:var(--rojo);border-color:#e7b9b3}
.btn.peligro:hover{background:var(--rojo-suave)}
.btn.chico{padding:6px 10px;min-height:32px;font-size:.86rem}
.btn.lleno{width:100%}
.btn svg{width:17px;height:17px;flex:none}
.btn-link{background:none;border:0;color:var(--primario);text-decoration:underline;cursor:pointer;padding:4px}

/* --- formularios --- */
label.c{display:block;margin-bottom:12px}
label.c > span{display:block;font-size:.84rem;color:var(--tx2);margin-bottom:5px;font-weight:500}
.in,input.in,select.in,textarea.in{width:100%;border:1px solid var(--borde-2);border-radius:9px;padding:10px 12px;background:#fff;min-height:42px;outline:none;font-size:16px}
.in:focus{border-color:var(--primario);box-shadow:0 0 0 3px rgba(16,49,74,.12)}
textarea.in{min-height:80px;resize:vertical}
.in.err{border-color:var(--rojo)}
.ayuda{font-size:.8rem;color:var(--tx3);margin-top:4px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:10px}
.check input{width:18px;height:18px;accent-color:var(--primario)}

/* --- etiquetas --- */
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:.75rem;font-weight:600;letter-spacing:.01em;background:#eef2f6;color:var(--tx2);white-space:nowrap}
.tag.ok{background:var(--verde-suave);color:var(--verde)}
.tag.warn{background:var(--ambar-suave);color:var(--ambar)}
.tag.bad{background:var(--rojo-suave);color:var(--rojo)}
.tag.info{background:var(--azul-suave);color:var(--azul)}
.tag.ac{background:var(--acento-suave);color:var(--acento)}

/* --- avisos --- */
.aviso{border-radius:10px;padding:10px 14px;font-size:.9rem;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.aviso.err{background:var(--rojo-suave);border-color:#efc5bf;color:#7d2a21}
.aviso.ok{background:var(--verde-suave);border-color:#bfe3cb;color:#1d5a33}
.aviso.warn{background:var(--ambar-suave);border-color:#ecd7a9;color:#6b4a0f}
.aviso.info{background:var(--azul-suave);border-color:#c5d4f5;color:#1f3f8a}

/* --- tablas --- */
.tabla-w{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--borde);border-radius:10px;background:#fff}
table.t{width:100%;border-collapse:collapse;font-size:.9rem;min-width:600px}
table.t th{text-align:left;font-weight:600;color:var(--tx2);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--borde);background:#f8fafc;white-space:nowrap;position:sticky;top:0}
table.t td{padding:10px 12px;border-bottom:1px solid var(--borde);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr:hover td{background:#fbfcfe}

/* --- toast --- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1a2530;color:#fff;padding:10px 16px;border-radius:10px;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:min(92vw,480px);text-align:center}
#toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--rojo)}
#toast.ok{background:var(--verde)}

/* --- modal --- */
.modal-f{position:fixed;inset:0;background:rgba(16,49,74,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:20px;box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
.modal.ancho{max-width:760px}
.modal h2{margin-bottom:12px}
.modal .pie{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}

/* --- carga --- */
.cargando{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--tx2);padding:40px 10px}
.spin{width:22px;height:22px;border:3px solid var(--borde);border-top-color:var(--primario);border-radius:50%;animation:g .8s linear infinite;flex:none}
@keyframes g{to{transform:rotate(360deg)}}

/* --- pie --- */
.pie-pagina{text-align:center;color:var(--tx3);font-size:.78rem;padding:20px 10px}