:root{--sigpp:#1f4e79;--sigpp-2:color-mix(in srgb,var(--sigpp) 72%,white);--bs-primary:var(--sigpp);--bs-link-color:var(--sigpp);--bs-link-color-rgb:31,78,121}
body{background:#f4f6f9;overflow-x:hidden}
a{color:var(--sigpp)}
.btn-primary{--bs-btn-bg:var(--sigpp);--bs-btn-border-color:var(--sigpp);--bs-btn-hover-bg:color-mix(in srgb,var(--sigpp) 85%,black);--bs-btn-hover-border-color:color-mix(in srgb,var(--sigpp) 85%,black);--bs-btn-active-bg:color-mix(in srgb,var(--sigpp) 75%,black);--bs-btn-active-border-color:color-mix(in srgb,var(--sigpp) 75%,black);--bs-btn-disabled-bg:var(--sigpp);--bs-btn-disabled-border-color:var(--sigpp)}
.btn-outline-primary{--bs-btn-color:var(--sigpp);--bs-btn-border-color:var(--sigpp);--bs-btn-hover-bg:var(--sigpp);--bs-btn-hover-border-color:var(--sigpp);--bs-btn-active-bg:var(--sigpp)}
.nav-tabs .nav-link{color:var(--sigpp)}
.text-primary{color:var(--sigpp)!important}

/* Menú: lateral fijo en computador (≥1200px); en celular y tableta, barra fina de íconos a la izquierda
   (.rail) y el menú completo se desliza desde ese lado (offcanvas) */
.sidebar{--bs-offcanvas-width:270px;--bs-offcanvas-bg:var(--sigpp);color:#fff;flex:0 0 auto}
.sidebar-inner{background:var(--sigpp);min-height:100%;width:100%}
@media (min-width:1200px){
  .sidebar{width:250px;position:sticky;top:0;height:100vh;overflow-y:auto}
  .sidebar-inner{min-height:100vh}
}
@media (max-width:1199.98px){
  .sidebar-inner{height:100%;overflow-y:auto;padding-bottom:calc(1rem + env(safe-area-inset-bottom))!important}
  body main.flex-grow-1{min-height:calc(100vh - 48px);padding-left:calc(var(--rail) + .75rem + env(safe-area-inset-left))!important}
}
:root{--rail:46px}
.rail{position:fixed;top:0;left:0;bottom:0;z-index:1031;width:calc(var(--rail) + env(safe-area-inset-left));padding:calc(.35rem + env(safe-area-inset-top)) 0 calc(.35rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background:var(--sigpp);display:flex;flex-direction:column;align-items:center;gap:.15rem;overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a,.rail button{position:relative;flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:0;border-radius:.5rem;background:transparent;color:rgba(255,255,255,.85);font-size:1.15rem;text-decoration:none}
.rail button{font-size:1.5rem;color:#fff;margin-bottom:.25rem}
.rail a:hover,.rail a:focus,.rail button:hover{background:rgba(255,255,255,.16);color:#fff}
.rail a.activo{background:#fff;color:var(--sigpp)}
.rail .punto{position:absolute;top:1px;right:-1px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:#ffc107;color:#212529;font-size:.62rem;font-weight:700;line-height:16px;text-align:center}
.sidebar .brand{color:#fff;font-size:1.35rem;font-weight:700;line-height:1.1}
.sidebar .brand small{font-size:.72rem;font-weight:400;opacity:.75}
.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:.5rem;background:#fff;padding:3px}
.sidebar .nav-link{color:rgba(255,255,255,.88);padding:.5rem .6rem;border-radius:.4rem}
.sidebar .nav-link:hover,.sidebar .nav-link:focus{background:rgba(255,255,255,.14);color:#fff}
.sidebar .nav-link.disabled{color:rgba(255,255,255,.4)}
.sidebar .nav-section{font-size:.7rem;text-transform:uppercase;opacity:.6;margin:.8rem 0 .2rem .5rem;list-style:none}
.sidebar ul{padding-left:0}

/* Aviso del modo «Ver como» */
.ver-como{position:sticky;top:0;z-index:1040;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;background:#ffc107;color:#212529;padding:.4rem .9rem;font-size:.9rem}
.ver-como form{margin:0}
.ver-como~.topbar{top:auto;position:static}

/* Barra superior en celular */
.topbar{position:sticky;top:0;z-index:1030;display:flex;align-items:center;gap:.75rem;background:var(--sigpp);color:#fff;padding:.4rem .9rem;padding-top:calc(.4rem + env(safe-area-inset-top));padding-left:calc(var(--rail) + .6rem + env(safe-area-inset-left));min-height:48px}
.topbar-marca{color:#fff;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:.5rem;font-size:1.1rem}
.topbar-marca img{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:.35rem;padding:2px}
main{min-width:0}

.card{border:0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.kpi .num{font-size:2rem;font-weight:700;color:var(--sigpp)}
.foto{width:120px;height:140px;object-fit:cover;border-radius:.5rem;background:#dde3ea}
.table th{white-space:nowrap}
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,var(--sigpp),var(--sigpp-2))}
.login-card{width:100%;max-width:400px}
.login-logo{max-width:100%;max-height:110px;object-fit:contain}
.logo-previa{max-width:100%;max-height:120px;object-fit:contain;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid #dee2e6;border-radius:.5rem;padding:.5rem}

/* Pie de página */
main{display:flex;flex-direction:column;min-height:100vh}
.pie{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;font-size:.75rem;color:#7a8591}
.pie b{color:var(--sigpp)}
.login-wrap{flex-direction:column;gap:1rem}
.pie-publico{width:100%;max-width:400px}
.pie-publico .pie{padding-top:0;color:rgba(255,255,255,.85);justify-content:center;text-align:center}
.pie-publico .pie b{color:#fff}

/* Pasos de un trámite */
.pasos{display:flex;flex-wrap:wrap;gap:.35rem}
.paso{font-size:.8rem;padding:.25rem .6rem;border-radius:1rem;background:#e3e7ec;color:#55606b}
.paso.hecho{background:#d1e7dd;color:#0f5132}
.paso.actual{background:var(--sigpp);color:#fff;font-weight:600}

/* Celular */
@media (max-width:767.98px){
  h1.h4,h1.h5{font-size:1.15rem}
  .kpi .num{font-size:1.6rem}
  .foto{width:84px;height:100px}
  .nav-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tabs .nav-link{white-space:nowrap}
  .btn,.form-control,.form-select{min-height:40px}
  .btn-sm,.form-control-sm,.form-select-sm{min-height:36px}
  .btn-link.p-0{min-height:0}
  .form-control,.form-select{font-size:16px}  /* evita el zoom automático de iOS al escribir */
  .table-responsive{-webkit-overflow-scrolling:touch}
  dl dt{margin-top:.35rem}
  .pagination{flex-wrap:wrap}
  /* Listas como tarjetas: cada fila se apila mostrando la etiqueta de su columna */
  table.tabla-movil thead{display:none}
  table.tabla-movil,table.tabla-movil tbody,table.tabla-movil tr,table.tabla-movil td{display:block;width:100%}
  table.tabla-movil tr{display:flex;flex-direction:column;padding:.6rem .75rem;border-bottom:1px solid #e3e7ec}
  table.tabla-movil tr[hidden]{display:none}
  table.tabla-movil td.fw-semibold{order:-1;font-size:1.02rem}
  table.tabla-movil td .btn{margin-top:.35rem}
  table.tabla-movil td{border:0;padding:.1rem 0;white-space:normal}
  table.tabla-movil td[data-t]::before{content:attr(data-t) ": ";color:#6c757d;font-size:.8rem}
  table.tabla-movil td:empty{display:none}
}
@media print{.sidebar,.topbar,.rail,.no-print{display:none!important}main{padding:0!important}body{background:#fff}}
/* Página de inicio (intranet) */
.inicio-hero{background:linear-gradient(120deg,var(--sigpp),var(--sigpp-2));color:#fff;border-radius:.75rem;padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cumple-banner{background:#fff7e0;border:1px solid #f1d58a;color:#5c4400}
.cumple-card{border-top:3px solid #e8b931}
.avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--sigpp) 14%,white);color:var(--sigpp);font-weight:700;font-size:.85rem}
.comunicado{padding:.75rem 0;border-top:1px solid #e9ecef}
.comunicado:first-of-type{border-top:0;padding-top:.25rem}
.comunicado.fijado{background:color-mix(in srgb,var(--sigpp) 6%,white);border:0;border-left:3px solid var(--sigpp);border-radius:.4rem;padding:.75rem;margin-bottom:.25rem}
a.acceso{display:flex;align-items:center;gap:.5rem;height:100%;padding:.65rem .75rem;border:1px solid #dee2e6;border-radius:.5rem;text-decoration:none;font-size:.9rem;line-height:1.2}
a.acceso:hover{background:color-mix(in srgb,var(--sigpp) 8%,white);border-color:var(--sigpp)}
a.acceso i{font-size:1.2rem}