:root { --navy:#0b1f33; --blue:#1463a5; --cyan:#19a7ce; --ink:#17212b; --muted:#64748b; --surface:#fff; --canvas:#f3f6f9; --line:#dce4ec; }
body.app-shell { background:var(--canvas); color:var(--ink); min-height:100vh; }
.app-navbar { background:linear-gradient(105deg,var(--navy),#12466f); box-shadow:0 2px 14px rgba(11,31,51,.18); }
.navbar-brand { color:#fff; line-height:1; }.navbar-brand:hover { color:#fff; }.navbar-brand small { display:block; color:#b8d8e9; font-size:.7rem; letter-spacing:.08em; margin-top:.2rem; text-transform:uppercase; }
.brand-mark { align-items:center; background:var(--cyan); border-radius:.55rem; color:var(--navy); display:inline-flex; font-size:1.2rem; font-weight:800; height:2.2rem; justify-content:center; width:2.2rem; }
.app-main { max-width:1680px; min-height:calc(100vh - 146px); padding:2rem clamp(1rem,3vw,3rem); }
.app-sidebar { background:var(--surface); border:1px solid var(--line); border-radius:1rem; padding:.75rem; position:sticky; top:5.5rem; }.sidebar-label { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.09em; margin:.4rem .75rem .75rem; text-transform:uppercase; }.sidebar-link { border-radius:.55rem; color:#354657; display:block; font-size:.92rem; padding:.65rem .75rem; text-decoration:none; }.sidebar-link:hover,.sidebar-link:focus { background:#e8f4fa; color:#075a91; }
.page-heading { background:linear-gradient(135deg,#fff,#edf7fb); border:1px solid var(--line); border-radius:1rem; padding:clamp(1.25rem,3vw,2.25rem); }.page-heading h1 { font-size:clamp(1.6rem,3vw,2.35rem); font-weight:700; letter-spacing:-.035em; }.eyebrow { color:#087aa8; font-size:.75rem; font-weight:800; letter-spacing:.11em; margin-bottom:.5rem; text-transform:uppercase; }
.dashboard-card { background:var(--surface); border:1px solid var(--line); border-radius:1rem; box-shadow:0 4px 14px rgba(15,35,54,.04); color:var(--ink); display:block; height:100%; padding:1.5rem; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.dashboard-card:hover { border-color:#8fc9de; box-shadow:0 12px 26px rgba(15,64,94,.12); color:var(--ink); transform:translateY(-3px); }.dashboard-card h2 { font-size:1.15rem; font-weight:700; margin:1rem 0 .5rem; }.dashboard-card p { color:var(--muted); font-size:.9rem; min-height:3rem; }.dashboard-card > span:last-child { color:#087aa8; font-size:.85rem; font-weight:700; }.dashboard-icon { align-items:center; background:#e6f5fa; border-radius:.65rem; color:#087aa8; display:inline-flex; font-size:.72rem; font-weight:800; height:2.2rem; justify-content:center; letter-spacing:.06em; width:2.6rem; }
.app-footer { border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; padding:1.25rem 0; }.skip-link { left:-9999px; position:absolute; }.skip-link:focus { background:#fff; left:1rem; padding:.5rem; top:1rem; z-index:1100; }
/* Compatibilidad visual para los formularios heredados durante la migración a Bootstrap 5. */
.card,.modal-content { border:1px solid var(--line); box-shadow:0 6px 18px rgba(15,35,54,.06); }.content-header h1,.content h1 { font-size:1.65rem; font-weight:700; }.btn-primary { background-color:var(--blue); border-color:var(--blue); }.table { background:#fff; }.form-control:focus,.form-select:focus { border-color:#62bbd8; box-shadow:0 0 0 .2rem rgba(25,167,206,.17); }
@media (max-width:1199px) { .app-sidebar { position:static; } }
/* Bootstrap 5 removed these Bootstrap 4 wrapper classes. Displaying their
   contents preserves the existing input-group markup while it is simplified. */
.input-group > .input-group-prepend,
.input-group > .input-group-append {
  display: contents;
}