/* ==========================================================================
   base-shell.css — estilos críticos del shell, extraídos del <style> inline
   de dashboard/templates/base.html.

   Va SIN @layer A PROPÓSITO (y el <link> se carga en la misma posición que
   antes ocupaba el bloque inline): define la fuente base de la app, el
   offset del navbar fijo y el contrato de scroll único (body es el único
   scroller). Por cascade layers vence a cualquier regla encapsada de
   custom.css/navbar.css: era ahí donde un `padding: 0` sin excepción dejaba
   el contenido DEBAJO del navbar. Vigilado por
   dashboard/tests/test_shell_scroll_contract.py.
   ========================================================================== */

/* Estilos críticos para evitar FOUC. Va SIN @layer a propósito:
     define la fuente base de toda la app (token --font-base en
     custom.css → JetBrains Mono como identidad, Inter de respaldo). */
body {
  font-family: var(--font-base, 'JetBrains Mono', 'Nunito', sans-serif);
  min-height: 100vh;
  margin: 0;
  /* padding-bottom NO se declara: footer.css reserva el espacio del footer
     fijo (padding-bottom: calc(footer...)). El shorthand `padding: 0` que
     había aquí lo anulaba y el footer tapaba el final del contenido. */
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Offset del navbar fijo (altura real: 90px / 70px en <=991.98px).
     Este bloque va SIN @layer y por cascade layers vence a cualquier
     regla encapada de custom.css/navbar.css: era aquí donde un
     `padding: 0` sin excepción dejaba el contenido DEBAJO del navbar.
     La clase has-app-header marca las páginas que renderizan el header
     (la misma condición del include condicional); las páginas de
     login/account no llevan navbar y conservan padding 0.
     navbar-is-collapsed la alterna app-header.js (y sidebar.js como
     legacy) al ocultar el navbar: anula el offset para que el
     contenido recupere el espacio. */
body.has-app-header {
  padding-top: var(--app-header-height, 90px);
  /* Mismo timing que el slide del navbar (chrome-tricorder.css):
         navbar y contenido se mueven como una sola pieza. */
  transition: padding-top 220ms ease;
}

body.navbar-is-collapsed.has-app-header {
  padding-top: 0;
}

/* Con el navbar oculto las alertas flotantes suben al tope. */
body.navbar-is-collapsed .alert-container {
  top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  body.has-app-header {
    transition: none;
  }
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  text-align: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.loading-content .spinner-border {
  color: #134D6D !important;
}

.loading-text {
  font-size: 1rem;
  color: #134D6D;
  margin-top: 1rem;
  font-weight: 500;
}

.loading-text i {
  color: var(--tecsa-primary);
  animation: heartbeat 1s ease-in-out infinite;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Alertas modernas */
.alert-container {
  position: fixed;
  top: calc(var(--app-header-height, 90px) + 12px);
  right: 20px;
  z-index: 10000;
  max-width: 400px;
  width: 100%;
}

.alert-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: none;
  backdrop-filter: blur(10px);
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.alert-modern .alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.alert-modern .alert-content {
  flex: 1;
  font-weight: 500;
}

/* Degradados de los avisos de mensajes (base.html, .alert-modern). Antes
   eran .alert-info/.alert-warning… a secas y, sin capa, pintaban TODAS las
   alertas de Bootstrap de la app (.alert-info: 2.17:1 en clínico claro). En
   el clínico los avisos quedan con las alertas adaptativas de Bootstrap 5.3. */
html:not([data-app-theme="tecsa-clinico"]) .alert-modern.alert-error {
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A52 100%);
  color: #1a0000;
}

html:not([data-app-theme="tecsa-clinico"]) .alert-modern.alert-warning {
  background: linear-gradient(135deg, #FFD93D 0%, #FFC312 100%);
  color: #333;
}

html:not([data-app-theme="tecsa-clinico"]) .alert-modern.alert-success {
  background: linear-gradient(135deg, #6CCB7A 0%, #51B968 100%);
  color: #001a00;
}

html:not([data-app-theme="tecsa-clinico"]) .alert-modern.alert-info {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #000d1a;
}

/* Wrapper principal - gestiona scroll único. Arranca bajo el navbar
     (body padding-top), así que su alto disponible es el viewport menos
     el header: con min-height:100vh puro desbordaba siempre y generaba
     scrollbar de página incluso con contenido corto. */
#wrapper {
  width: 100%;
  min-height: calc(100vh - var(--app-header-height, 90px));
  min-height: calc(100dvh - var(--app-header-height, 90px));
}

#main-content {
  width: 100%;
}

#content-wrapper {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
  /* clip (no solo hidden): overflow-x hidden + overflow-y visible
         computa overflow-y:auto y crea un segundo scrollbar derecho.
         El unico scroller es body (arriba). */
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

.content-area {
  margin-top: 60px;
}

@media (max-width: 768px) {
  .alert-container {
    right: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
  }

  #content-wrapper {
    padding: 1rem;
  }
}