html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==================== SIENNA ACCESSIBILITY WIDGET - POSICIÓN INFERIOR DERECHA ==================== */
/* Contenedor principal del widget - debe estar completamente fuera del flujo */
.asw-container {
  position: fixed !important;
  z-index: 999999 !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* El widget interno debe tener pointer-events */
.asw-container * {
  pointer-events: auto;
}

/* Botón del widget - posición fija inferior derecha */
.asw-menu-btn {
  position: fixed !important;
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 999999 !important;
}

/* El menú del widget */
.asw-menu {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Overlay del widget */
.asw-overlay {
  position: fixed !important;
  z-index: 999998 !important;
}

/* Asegurar que el widget no genere espacio en el body */
.asw-widget {
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

/* ==================== CONTRASTE OSCURO / CLARO - COBERTURA COMPLETA ==================== */
/*
  El widget Sienna aplica los estilos de color/fondo a la página completa
  mediante css !important, pero los bordes y algunos elementos específicos
  necesitan ajuste adicional para coherencia visual.
*/

/* Contraste oscuro: bordes e inputs (excluye elementos del widget y media) */
html.asw-dark-contrast :not([class*="asw-"]):not(img):not(video):not(canvas):not(picture) {
  border-color: #444 !important;
  outline-color: #666 !important;
}
html.asw-dark-contrast input,
html.asw-dark-contrast select,
html.asw-dark-contrast textarea {
  color-scheme: dark !important;
}
html.asw-dark-contrast ::placeholder {
  color: #aaa !important;
}

/* Contraste claro: bordes e inputs (excluye elementos del widget y media) */
html.asw-light-contrast :not([class*="asw-"]):not(img):not(video):not(canvas):not(picture) {
  border-color: #ccc !important;
  outline-color: #999 !important;
}
html.asw-light-contrast input,
html.asw-light-contrast select,
html.asw-light-contrast textarea {
  color-scheme: light !important;
}
html.asw-light-contrast ::placeholder {
  color: #666 !important;
}

/* ========== BOTÓN DEL WIDGET DE ACCESIBILIDAD ==========
   .asw-menu-btn no está en la lista :not() del widget (solo .asw-btn lo está),
   así que necesitamos protegerlo explícitamente con mayor especificidad.
   Especificidad: html(tipo) + .aws-filter(clase) + .asw-dark-contrast(clase) + .asw-menu-btn(clase) = (0,3,1)
   > que el CSS generado por el widget: (0,2,1). ========== */
html.aws-filter.asw-dark-contrast .asw-menu-btn,
html.aws-filter.asw-light-contrast .asw-menu-btn {
  /* Preserva el gradiente azul original del botón */
  background-color: transparent !important;
}
html.aws-filter.asw-dark-contrast .asw-menu-btn svg,
html.aws-filter.asw-dark-contrast .asw-menu-btn svg *,
html.aws-filter.asw-light-contrast .asw-menu-btn svg,
html.aws-filter.asw-light-contrast .asw-menu-btn svg * {
  /* El icono siempre debe ser blanco sobre el fondo azul del botón */
  fill: white !important;
}

/* ========== IMÁGENES DE FONDO CSS (background-image) ==========
   Los divs con background-image personalizada (ej. .bg-campus-login) y los
   overlays con degradados Tailwind (bg-gradient-to-*) reciben
   background-color: #000 !important del widget, lo cual tapa la imagen.
   Al forzar background-color: transparent se preserva el background-image. ========== */
html.aws-filter.asw-dark-contrast .bg-campus,
html.aws-filter.asw-light-contrast .bg-campus {
  background-color: transparent !important;
}

/* Overlays con degradados Tailwind — preservar la transparencia del gradiente */
html.aws-filter.asw-dark-contrast [class*="bg-gradient-to"],
html.aws-filter.asw-light-contrast [class*="bg-gradient-to"] {
  background-color: transparent !important;
}