:root{
  --pri:#0B4F6C; --pri-d:#083c52; --pri-l:#e8f1f5;
  --ok:#0a7d3c; --warn:#b8860b; --err:#b3261e;
  --bg:#f4f6f8; --card:#fff; --bor:#e2e6ea; --txt:#1a1a1a; --mut:#6b7280;
  --r:8px; --sh:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--txt)}
a{color:var(--pri);text-decoration:none}

/* Layout */
.app{display:flex;min-height:100vh}
.side{width:220px;background:var(--pri);color:#fff;flex-shrink:0;display:flex;flex-direction:column}
.side .marca{padding:18px 16px;font-size:16px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.15)}
.side .marca small{display:block;font-size:10px;opacity:.7;font-weight:400;margin-top:2px}
.side nav{flex:1;padding:8px 0}
.side nav a{display:block;padding:10px 16px;color:rgba(255,255,255,.85);font-size:13px}
.side nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.side nav a.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600;
  border-left:3px solid #fff;padding-left:13px}
.side .pie{padding:12px 16px;border-top:1px solid rgba(255,255,255,.15);font-size:12px}
.side .pie b{display:block}
.side .pie button{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:4px 10px;border-radius:4px;font-size:11px;cursor:pointer;margin-top:6px}
.main{flex:1;padding:20px 24px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.top h1{font-size:20px}

/* Componentes */
.card{background:var(--card);border:1px solid var(--bor);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh);margin-bottom:16px}
.btn{background:var(--pri);color:#fff;border:none;padding:9px 16px;border-radius:6px;
  font-size:13px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--pri-d)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--pri);border:1px solid var(--bor)}
.btn.dan{background:var(--err)}
.btn.sm{padding:5px 10px;font-size:12px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--bor);
  border-radius:6px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);
  box-shadow:0 0 0 3px var(--pri-l)}
label{display:block;font-size:11px;font-weight:600;color:var(--mut);
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.f{margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:130px}

table{width:100%;border-collapse:collapse;background:#fff}
th{background:#f8f9fa;font-size:11px;text-transform:uppercase;color:var(--mut);
  padding:9px 10px;text-align:left;border-bottom:2px solid var(--bor);letter-spacing:.3px}
td{padding:9px 10px;border-bottom:1px solid var(--bor)}
tbody tr:hover{background:#fafbfc}
.r{text-align:right} .c{text-align:center}

.chip{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
.chip.borrador{background:#eee;color:#555}
.chip.enviada{background:#e0edff;color:#1553b5}
.chip.aceptada{background:#e0f5e6;color:var(--ok)}
.chip.rechazada{background:#fde8e6;color:var(--err)}
.chip.vencida,.chip.anulada{background:#f5f0e0;color:var(--warn)}

.toast{position:fixed;bottom:20px;right:20px;background:#222;color:#fff;padding:11px 16px;
  border-radius:6px;font-size:13px;opacity:0;transform:translateY(10px);
  transition:.25s;pointer-events:none;z-index:999;max-width:340px}
.toast.show{opacity:1;transform:none}
.toast.err{background:var(--err)} .toast.ok{background:var(--ok)}
.vacio{text-align:center;padding:36px;color:var(--mut)}
.mut{color:var(--mut);font-size:12px}

/* Login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login{background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.1);
  padding:32px;width:100%;max-width:380px}
.login h1{font-size:22px;color:var(--pri);margin-bottom:4px}
.login p{color:var(--mut);font-size:13px;margin-bottom:22px}
.err-box{background:#fde8e6;color:var(--err);padding:9px 12px;border-radius:6px;
  font-size:13px;margin-bottom:12px;display:none}
@media(max-width:760px){
  .app{flex-direction:column}
  .side{width:100%}.side nav{display:flex;overflow-x:auto}
  .side nav a{white-space:nowrap}.main{padding:14px}
}