body { padding-top: 56px; padding-bottom: 60px; }
header.institucional {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: 56px; display: flex; align-items: center;
  background: #fff; border-bottom: 1px solid #dee2e6; padding: 0 16px;
}
header.institucional img { height: 36px; margin-right: 10px; }
footer.institucional {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #212529; color: #adb5bd; text-align: center;
  padding: 10px; font-size: 0.8rem;
}

a { text-decoration: none; }

#menu-lateral .nav-link { text-align: left !important; }

/* Tarjetas del dashboard que funcionan como enlace */
a.tarjeta-link { cursor: pointer; }
a.tarjeta-link:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }


/* ==== Colores personalizables (primario / secundario) ==== */
.btn-primary {
  --bs-btn-color: var(--inst-primario-texto, #fff);
  --bs-btn-bg: var(--inst-primario, #0d6efd);
  --bs-btn-border-color: var(--inst-primario, #0d6efd);
  --bs-btn-hover-color: var(--inst-primario-texto, #fff);
  --bs-btn-hover-bg: var(--inst-primario-hover, #0b5ed7);
  --bs-btn-hover-border-color: var(--inst-primario-hover, #0a58ca);
  --bs-btn-focus-shadow-rgb: var(--inst-primario-rgb, 49, 132, 253);
  --bs-btn-active-color: var(--inst-primario-texto, #fff);
  --bs-btn-active-bg: var(--inst-primario-active, #0a58ca);
  --bs-btn-active-border-color: var(--inst-primario-active, #0a53be);
  --bs-btn-disabled-color: var(--inst-primario-texto, #fff);
  --bs-btn-disabled-bg: var(--inst-primario, #0d6efd);
  --bs-btn-disabled-border-color: var(--inst-primario, #0d6efd);
}
.btn-outline-primary {
  --bs-btn-color: var(--inst-primario, #0d6efd);
  --bs-btn-border-color: var(--inst-primario, #0d6efd);
  --bs-btn-hover-color: var(--inst-primario-texto, #fff);
  --bs-btn-hover-bg: var(--inst-primario, #0d6efd);
  --bs-btn-hover-border-color: var(--inst-primario, #0d6efd);
  --bs-btn-focus-shadow-rgb: var(--inst-primario-rgb, 13, 110, 253);
  --bs-btn-active-color: var(--inst-primario-texto, #fff);
  --bs-btn-active-bg: var(--inst-primario, #0d6efd);
  --bs-btn-active-border-color: var(--inst-primario, #0d6efd);
  --bs-btn-disabled-color: var(--inst-primario, #0d6efd);
  --bs-btn-disabled-border-color: var(--inst-primario, #0d6efd);
}
.btn-secondary {
  --bs-btn-color: var(--inst-secundario-texto, #fff);
  --bs-btn-bg: var(--inst-secundario, #6c757d);
  --bs-btn-border-color: var(--inst-secundario, #6c757d);
  --bs-btn-hover-color: var(--inst-secundario-texto, #fff);
  --bs-btn-hover-bg: var(--inst-secundario-hover, #5c636a);
  --bs-btn-hover-border-color: var(--inst-secundario-hover, #565e64);
  --bs-btn-focus-shadow-rgb: var(--inst-secundario-rgb, 130, 138, 145);
  --bs-btn-active-color: var(--inst-secundario-texto, #fff);
  --bs-btn-active-bg: var(--inst-secundario-active, #565e64);
  --bs-btn-active-border-color: var(--inst-secundario-active, #51585e);
  --bs-btn-disabled-color: var(--inst-secundario-texto, #fff);
  --bs-btn-disabled-bg: var(--inst-secundario, #6c757d);
  --bs-btn-disabled-border-color: var(--inst-secundario, #6c757d);
}
.btn-outline-secondary {
  --bs-btn-color: var(--inst-secundario, #6c757d);
  --bs-btn-border-color: var(--inst-secundario, #6c757d);
  --bs-btn-hover-color: var(--inst-secundario-texto, #fff);
  --bs-btn-hover-bg: var(--inst-secundario, #6c757d);
  --bs-btn-hover-border-color: var(--inst-secundario, #6c757d);
  --bs-btn-focus-shadow-rgb: var(--inst-secundario-rgb, 108, 117, 125);
  --bs-btn-active-color: var(--inst-secundario-texto, #fff);
  --bs-btn-active-bg: var(--inst-secundario, #6c757d);
  --bs-btn-active-border-color: var(--inst-secundario, #6c757d);
  --bs-btn-disabled-color: var(--inst-secundario, #6c757d);
  --bs-btn-disabled-border-color: var(--inst-secundario, #6c757d);
}
.nav-pills {
  --bs-nav-pills-link-active-color: var(--inst-primario-texto, #fff);
  --bs-nav-pills-link-active-bg: var(--inst-primario, #0d6efd);
}
.form-check-input:checked {
  background-color: var(--inst-primario, #0d6efd);
  border-color: var(--inst-primario, #0d6efd);
}
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--inst-primario-rgb, 13, 110, 253), .6);
  box-shadow: 0 0 0 .25rem rgba(var(--inst-primario-rgb, 13, 110, 253), .25);
}


/* ==== Tema oscuro ==== */
[data-bs-theme="dark"] .bg-light { background-color: #1a1d20 !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] header.institucional {
  background: var(--bs-body-bg);
  border-bottom-color: var(--bs-border-color);
}
[data-bs-theme="dark"] footer.institucional {
  background: #16181b;
  color: #adb5bd;
  border-top: 1px solid var(--bs-border-color);
}
/* círculo de "hoy" del calendario: claro sobre fondo oscuro */
[data-bs-theme="dark"] #calendario-grid .bg-dark {
  background-color: var(--bs-body-color) !important;
  color: var(--bs-body-bg) !important;
}
/* botones con borde: versión aclarada del color elegido */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--inst-primario-claro, #6ea8fe);
  --bs-btn-border-color: var(--inst-primario-claro, #6ea8fe);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--inst-secundario-claro, #adb5bd);
  --bs-btn-border-color: var(--inst-secundario-claro, #adb5bd);
}


/* Sesión ya iniciada: evita el parpadeo del login (se decide en el <head>, antes del primer dibujo) */
html.con-sesion #login-box { display: none !important; }
html.con-sesion #panel.d-none { display: block !important; }


/* ==== Layout móvil: menú y calendario como paneles laterales ==== */
.barra-movil {
  position: sticky; top: 56px; z-index: 1020;
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 1rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.panel-lateral-izq { --bs-offcanvas-width: 260px; }
.panel-lateral-der { --bs-offcanvas-width: 320px; }
#panel main { min-width: 0; }

@media (max-width: 991.98px) {
  .panel-lateral-izq, .panel-lateral-der { overflow-y: auto; }
  #panel main { padding: 1rem !important; }
  /* tablas anchas: se deslizan hacia los costados en vez de estirar la página */
  #panel main .table { display: block; overflow-x: auto; }
}

@media (min-width: 992px) {
  .panel-lateral-izq, .panel-lateral-der {
    flex-shrink: 0;
    position: sticky; top: 56px; align-self: flex-start;
    max-height: calc(100vh - 56px - 60px); overflow-y: auto;
  }
  .panel-lateral-izq { width: 210px; }
  .panel-lateral-der { width: 300px; }
}

/* Botón flotante de contacto urgente por WhatsApp (base común) */
#boton-whatsapp {
  position: fixed; right: 16px; bottom: 16px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1ebe5d; color: #fff; text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: transform .15s;
}
#boton-whatsapp:hover, #boton-whatsapp:focus-visible { transform: scale(1.08); color: #fff; }
#boton-whatsapp:focus-visible { outline: 3px solid var(--bs-primary, #0d6efd); outline-offset: 3px; }
@media print { #boton-whatsapp { display: none; } }