:root {
  --bs-primary: #0a84ff;
  --bs-primary-rgb: 10, 132, 255;
  --dashboard-primary-dark: #0a6dff;
  --dashboard-accent: #ff9f0a;
  --dashboard-bg-light: #f5f5f7;
  --dashboard-bg-dark: #0f1115;
  --dashboard-surface-light: #ffffff;
  --dashboard-surface-dark: #1c1c1e;
  --dashboard-text-light: #1c1c1e;
  --dashboard-text-dark: #f5f5f7;
  --bs-body-font-family: "Inter", sans-serif;
  --dashboard-subtext-light: #6b7280;
  --dashboard-subtext-dark: #a1a1aa;
  --dashboard-border-light: #e5e5ea;
  --dashboard-border-dark: #2c2c2e;
  --app-select-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23657a9a' d='M1.41.59 6 5.17 10.59.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E");
  --app-select-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b7c2d4' d='M1.41.59 6 5.17 10.59.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E");
  --app-shell-max-width: 1760px;
  --app-shell-side-gap: 48px;
  --app-ink: #182230;
  --app-muted: #667085;
  --app-subtle: #98a2b3;
  --app-canvas: #f7f8fa;
  --app-surface: #ffffff;
  --app-border: #e4e7ec;
  --app-border-strong: #d0d5dd;
  --app-accent: #0a6ed1;
  --app-accent-soft: #eff6ff;
  /* Azul de la marca, tomado del escudo del logotipo (logo-light-icon.png):
     #0065b9 es su tono dominante (contraste 5.9:1 con texto blanco) y #0054a9
     el tono oscuro del mismo escudo, usado para el hover. */
  --app-brand: #0065b9;
  --app-brand-hover: #0054a9;
  --app-brand-active: #00478f;
  --app-radius: 12px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .03);
}

/* Hueco reservado para los iconos de Font Awesome, por el mismo motivo que en
   los de Material: hasta que llega su fuente el glifo no existe y el hueco lo
   marca el caracter de reserva, asi que al cargar crecian y empujaban a su
   alrededor (el boton "Modulo Final" se movia 11px). 1,25em es el ancho fijo
   que la propia Font Awesome usa para alinear (su clase `fa-fw`) y el de sus
   glifos mas anchos, de modo que ninguno se recorta.
   En el proyecto solo se usan `fa-solid` y `fa-regular` con el nombre del
   icono: no hay utilidades de tamano ni de apilado a las que esto afecte. */
.fa-solid,
.fas,
.fa-regular,
.far,
.fa-brands,
.fab {
  width: 1.25em;
  text-align: center;
}

html {
  min-height: 100%;
  /* El hueco de la barra de desplazamiento se reserva aunque la pagina no
     llegue a necesitarla. Sin esto, una seccion corta (por ejemplo /solicitudes
     con pocas filas) se pintaba 7px a la derecha de las demas, porque sin barra
     el lienzo es 15px mas ancho y el contenido centrado se desplaza medio hueco. */
  scrollbar-gutter: stable;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Inter en toda el aula. Estaba declarada solo para el inicio, asi que esa
     pantalla se veia con otra letra que el resto, aunque la fuente se descarga
     en todas las paginas. Se acompana de --bs-body-font-family para que los
     componentes de Bootstrap la hereden igual. */
  font-family: "Inter", sans-serif;
}

/* Los controles nativos sin clase (input, select, textarea) no heredan la
   familia por si solos: en :where() para no sumar especificidad. */
:where(input, select, textarea, button) {
  font-family: inherit;
}

body > main {
  flex: 1 0 auto;
}

@media (min-width: 1400px) {
  .container-xxl {
    max-width: min(var(--app-shell-max-width), calc(100vw - var(--app-shell-side-gap)));
  }
}

.form-select:not([multiple]):not([size]),
.form-select-sm:not([multiple]):not([size]) {
  background-image: var(--app-select-arrow-light);
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.72rem 0.44rem;
  padding-right: 2.25rem;
}

.dark .form-select:not([multiple]):not([size]),
.dark .form-select-sm:not([multiple]):not([size]) {
  background-image: var(--app-select-arrow-dark);
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Sin fondo propio: el inicio usa el mismo lienzo que el resto de secciones
   (blanco en claro, --app-canvas en oscuro). Antes tenia el suyo
   (--dashboard-bg-light, un gris) y se notaba al cambiar de seccion. */
body.dashboard-body {
  min-height: max(884px, 100dvh);
  color: var(--dashboard-text-light);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body.dashboard-body {
  color: var(--dashboard-text-dark);
}

.glass-panel {
  background: rgb(var(--dk-rgb-surface, 255 255 255) / 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(var(--dk-rgb-border, 255 255 255) / 0.6);
  border-radius: 16px;
}

.dark .glass-panel {
  background: rgba(28, 28, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}


.footer-shell {
  flex-shrink: 0;
  background: var(--dashboard-surface-light);
  border-top: 1px solid var(--dashboard-border-light);
}

.dark .footer-shell {
  background: var(--dashboard-surface-dark);
  border-top-color: var(--dashboard-border-dark);
}

.footer-social {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}

.footer-social a {
  display: inline-flex;
  opacity: .75;
  transition: opacity 140ms ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  opacity: 1;
}

.footer-social img {
  width: 16px;
  height: 16px;
  display: block;
}

.footer-web {
  color: inherit;
  text-decoration: none;
}

.footer-web:hover {
  color: inherit;
  text-decoration: underline;
}

.text-subtle {
  color: var(--dashboard-subtext-light) !important;
}

.dark .text-subtle {
  color: var(--dashboard-subtext-dark) !important;
}

.text-main {
  color: var(--dashboard-text-light) !important;
}

.dark .text-main {
  color: var(--dashboard-text-dark) !important;
}

.app-modal {
  border: 0;
  border-radius: 1.25rem;
  background: var(--dashboard-surface-light);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.dark .app-modal {
  background: var(--dashboard-surface-dark);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.app-modal .modal-header,
.app-modal .modal-footer {
  border: 0;
}

.app-modal .modal-header {
  padding: 1.25rem 1.5rem 0.75rem;
}

.app-modal .modal-body {
  padding: 0.75rem 1.5rem 1.25rem;
}

.app-modal .modal-footer {
  padding: 0.75rem 1.5rem 1.25rem;
}

.app-modal .modal-title {
  font-weight: 600;
}

.dark .app-modal .btn-close {
  filter: invert(1);
}

.app-modal .form-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dashboard-subtext-light);
}

.dark .app-modal .form-label {
  color: var(--dashboard-subtext-dark);
}

.app-modal .form-control,
.app-modal .form-select,
.app-modal .form-control-sm,
.app-modal .form-select-sm,
.app-modal textarea.form-control {
  border: 1px solid transparent;
  background-color: var(--dk-surface-2, #f7f8fa);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.app-modal .form-control:focus,
.app-modal .form-select:focus,
.app-modal textarea.form-control:focus {
  border-color: rgba(10, 132, 255, 0.35);
  box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.15);
  background: var(--dk-surface, #ffffff);
}

.dark .app-modal .form-control,
.dark .app-modal .form-select,
.dark .app-modal .form-control-sm,
.dark .app-modal .form-select-sm,
.dark .app-modal textarea.form-control {
  background-color: #141518;
  color: var(--dashboard-text-dark);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dark .app-modal .form-control::placeholder,
.dark .app-modal textarea.form-control::placeholder {
  color: #7b7f86;
}

.app-modal .btn {
  border-radius: 14px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
}

.app-modal .btn-light {
  background: var(--dk-surface-2, #eef0f3);
  border-color: var(--dk-border, #eef0f3);
  color: var(--dk-soft, #4b5563);
}

.dark .app-modal .btn-light {
  background: #1f232b;
  border-color: #1f232b;
  color: #d1d5db;
}

.app-modal .btn-primary {
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.25);
}

.app-input-group .input-group-text {
  border: 0;
  background: transparent;
  color: #9aa0a6;
  padding-left: 0.75rem;
  padding-right: 0.25rem;
}

.app-input-group .material-icons-round {
  font-size: 1.1rem;
}

.app-form .form-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dashboard-subtext-light);
}

.dark .app-form .form-label {
  color: var(--dashboard-subtext-dark);
}

.app-form .form-control,
.app-form .form-select,
.app-form .form-control-sm,
.app-form .form-select-sm,
.app-form textarea.form-control {
  border: 1px solid transparent;
  background-color: var(--dk-surface-2, #f7f8fa);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.app-form .form-control:focus,
.app-form .form-select:focus,
.app-form textarea.form-control:focus {
  border-color: rgba(10, 132, 255, 0.35);
  box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.15);
  background: var(--dk-surface, #ffffff);
}

.dark .app-form .form-control,
.dark .app-form .form-select,
.dark .app-form .form-control-sm,
.dark .app-form .form-select-sm,
.dark .app-form textarea.form-control {
  background-color: #141518;
  color: var(--dashboard-text-dark);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dark .app-form .form-control::placeholder,
.dark .app-form textarea.form-control::placeholder {
  color: #7b7f86;
}

.app-form .btn {
  border-radius: 14px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
}

.app-form .btn-light {
  background: var(--dk-surface-2, #eef0f3);
  border-color: var(--dk-border, #eef0f3);
  color: var(--dk-soft, #4b5563);
}

.dark .app-form .btn-light {
  background: #1f232b;
  border-color: #1f232b;
  color: #d1d5db;
}

.text-faded {
  color: var(--dk-muted, #9ca3af) !important;
}

.text-xxs {
  font-size: 0.625rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.tracking-tight {
  letter-spacing: -0.02em;
}

.tracking-wider {
  letter-spacing: 0.12em;
}

.link-primary-dark {
  color: var(--bs-primary);
}

.link-primary-dark:hover {
  color: var(--dashboard-primary-dark);
}

.link-primary-hover:hover {
  color: var(--bs-primary) !important;
}

.border-subtle {
  border-color: var(--dashboard-border-light) !important;
}

.dark .border-subtle {
  border-color: var(--dashboard-border-dark) !important;
}

.dark-hidden {
  display: inline-block;
}

.dark-show {
  display: none;
}

.dark .dark-hidden {
  display: none;
}

.dark .dark-show {
  display: inline-block;
}

.cursor-help {
  cursor: help;
}

.min-width-0 {
  min-width: 0;
}

.avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
}

.icon-xs {
  font-size: 0.875rem;
}

.text-justify {
  text-align: justify;
}

.dark .form-control,
.dark .form-select,
.dark .form-check-input,
.dark .form-control:focus,
.dark .form-select:focus {
  background-color: #1c1c1e;
  color: var(--dashboard-text-dark);
  border-color: #2c2c2e;
}

.dark .form-control::placeholder {
  color: var(--dashboard-subtext-dark);
}

.dark .form-check-input {
  background-color: #0f1115;
  border-color: #2c2c2e;
}

.dark .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.dark .form-control:focus,
.dark .form-select:focus,
.dark .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
}

.btn {
  border-radius: 12px;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

.btn-primary {
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(var(--bs-primary-rgb), 0.24);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(var(--bs-primary-rgb), 0.28);
}

.btn-outline-primary {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  color: var(--bs-primary);
}

.btn-outline-primary:hover {
  background: rgba(var(--bs-primary-rgb), 0.12);
  border-color: rgba(var(--bs-primary-rgb), 0.5);
}

.btn-light {
  background: var(--dk-surface-2, #f5f5f7);
  border-color: var(--dashboard-border-light);
  color: var(--dashboard-text-light);
}

.btn-light:hover {
  background: var(--dk-surface-2, #ededf0);
  border-color: var(--dk-border, #d1d1d6);
}

.dark .btn-light {
  background: #1c1c1e;
  border-color: var(--dashboard-border-dark);
  color: var(--dashboard-text-dark);
}

.dark .btn-light:hover {
  background: #2c2c2e;
  border-color: #3a3a3c;
}

/* =================================================================
 * Modo nocturno
 *
 * Los tokens --dk-* SOLO se definen aqui, bajo .dark. En modo claro
 * quedan sin definir, asi que cada `var(--dk-x, #literal)` repartido por
 * las hojas de modulo cae en su literal original: el modo claro no
 * cambia y solo se anade comportamiento en oscuro.
 * ================================================================= */
.dark {
  /* Superficies */
  --dk-surface: #1c1c1e;
  --dk-surface-2: #232428;
  --dk-info-bg: #17263d;
  --dk-success-bg: #142a1d;
  --dk-danger-bg: #2e181a;
  --dk-warning-bg: #2e2415;

  /* Texto */
  --dk-ink: #f5f5f7;
  --dk-soft: #d4d4d8;
  --dk-muted: #a1a1aa;
  --dk-link: #7cb3ff;
  --dk-sky: #7dd3fc;
  --dk-success: #4ade80;
  --dk-danger: #fca5a5;
  --dk-warning: #fdba74;

  /* Canales RGB para los colores que se escriben como rgba() y necesitan
     conservar su alfa. Se usan como rgb(var(--dk-rgb-x, r g b) / a). */
  --dk-rgb-surface: 28 28 30;
  --dk-rgb-info: 23 38 61;
  --dk-rgb-success: 20 42 29;
  --dk-rgb-danger: 46 24 26;
  --dk-rgb-warning: 46 36 21;
  --dk-rgb-border: 44 44 46;
  --dk-rgb-border-info: 43 74 99;
  --dk-rgb-border-success: 36 80 57;
  --dk-rgb-border-danger: 92 36 39;
  --dk-rgb-border-warning: 90 67 34;
  --dk-rgb-ink: 245 245 247;
  --dk-rgb-link: 124 179 255;
  --dk-rgb-sky: 125 211 252;
  --dk-rgb-success-t: 74 222 128;
  --dk-rgb-danger-t: 252 165 165;
  --dk-rgb-warning-t: 253 186 116;
  /* Filo superior claro de las tarjetas: en oscuro casi se apaga. */
  --dk-rgb-rim: 255 255 255;

  /* Bases de color-mix: los chips de agenda se mezclan con la superficie y con
     la tinta del tema, no con blanco/negro fijos. */
  --dk-mix-base: #1c1c1e;
  --dk-mix-ink: #ffffff;

  /* Azul primario de relleno. Mas profundo que el #0d6efd de Bootstrap, que
     sobre lienzo oscuro resulta demasiado luminoso. Mantiene texto blanco a
     5.17:1 y se separa del fondo por encima de 3:1. */
  --dk-primary: #2563eb;
  --dk-primary-hover: #3570ea;
  --dk-primary-active: #1d4ed8;

  /* Bordes */
  --dk-border: #2c2c2e;
  --dk-border-info: #2b4a63;
  --dk-border-success: #245039;
  --dk-border-danger: #5c2427;
  --dk-border-warning: #5a4322;

  /* Tokens de diseno ya existentes, reapuntados al esquema oscuro */
  --app-ink: #f5f5f7;
  --app-muted: #a1a1aa;
  --app-subtle: #8b8b93;
  --app-canvas: #0f1115;
  --app-surface: #1c1c1e;
  --app-border: #2c2c2e;
  --app-border-strong: #3a3a3d;
  --app-accent: #7cb3ff;
  --app-accent-soft: #17263d;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
}

/* Base para cualquier pagina: la mayoria de vistas no fijan bodyClass, asi
   que sin esto el lienzo seguiria siendo blanco fuera del dashboard. */
.dark body {
  background-color: var(--app-canvas);
  color: var(--app-ink);
}

.dark hr {
  border-color: var(--dk-border);
}

.dark ::placeholder {
  color: var(--dk-muted);
}

/* -----------------------------------------------------------------
 * Bootstrap 5.3 en oscuro
 *
 * `data-bs-theme="dark"` (lo pone la cabecera) ya resuelve modales, alertas,
 * tablas, dropdowns y controles. Aqui solo se reconcilia su paleta con la
 * nuestra, que es algo mas oscura que la que trae por defecto.
 * ----------------------------------------------------------------- */
.dark {
  --bs-body-bg: #0f1115;
  --bs-body-color: #f5f5f7;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: #1c1c1e;
  --bs-tertiary-bg: #232428;
  --bs-border-color: #2c2c2e;
  /* El modal se levanta del lienzo: si comparte fondo con la pagina, se pierde. */
  --bs-modal-bg: #1c1c1e;
  --bs-modal-border-color: #2c2c2e;
  --bs-dropdown-bg: #1c1c1e;
  --bs-dropdown-border-color: #2c2c2e;
  --bs-card-bg: #1c1c1e;
}

/* -----------------------------------------------------------------
 * Controles de formulario sin estilo propio
 *
 * Varias pantallas (auditoria, revision, agenda de profesores) usan <input>,
 * <select> y <textarea> "pelados", sin clase: sin esto se quedan con el blanco
 * y el negro del navegador y resultan ilegibles en oscuro.
 *
 * Va en :where() para que no sume especificidad: cualquier regla de modulo
 * sigue mandando sobre esta base.
 * ----------------------------------------------------------------- */
.dark :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
  select,
  textarea
) {
  background-color: var(--dk-surface-2);
  color: var(--dk-ink);
  border-color: var(--dk-border);
}

/* El icono del selector de fecha y la rueda del <select> los pinta el
   navegador: sin color-scheme salen en claro sobre fondo oscuro. */
.dark :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], select) {
  color-scheme: dark;
}

/* -----------------------------------------------------------------
 * Variables de modulo que no son colores literales y por tanto no entraron
 * en la tokenizacion.
 * ----------------------------------------------------------------- */
.dark .agenda-page {
  --agenda-border: rgba(255, 255, 255, .12);
  --agenda-shadow: 0 18px 42px rgba(0, 0, 0, .45);
}

.dark .dashboard-page {
  --dashboard-soft: #232428;
}

.dark {
  --dnd-bg: #17181c;
  --dnd-surface: #1c1c1e;
  --dnd-card: #232428;
  --dnd-border: #2c2c2e;
  --dnd-text: #f5f5f7;
  --dnd-muted: #a1a1aa;
}

/* -----------------------------------------------------------------
 * Botones primarios en oscuro
 *
 * `data-bs-theme="dark"` no toca los botones solidos: Bootstrap mantiene su
 * #0d6efd, que sobre el lienzo oscuro resulta demasiado luminoso. Ademas, la
 * capa propia de theme.css le anade un halo azul (box-shadow con
 * --bs-primary-rgb) que es buena parte del brillo percibido; en oscuro se
 * sustituye por una sombra neutra.
 *
 * No se toca --bs-primary global a proposito: se usa como *relleno* en
 * .form-check-input:checked y en el panel de acceso rapido, asi que aclararlo
 * dejaria texto blanco sobre azul claro.
 * ----------------------------------------------------------------- */
.dark .btn-primary {
  --bs-btn-bg: var(--dk-primary);
  --bs-btn-border-color: var(--dk-primary);
  --bs-btn-hover-bg: var(--dk-primary-hover);
  --bs-btn-hover-border-color: var(--dk-primary-hover);
  --bs-btn-active-bg: var(--dk-primary-active);
  --bs-btn-active-border-color: var(--dk-primary-active);
  --bs-btn-disabled-bg: var(--dk-primary);
  --bs-btn-disabled-border-color: var(--dk-primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

.dark .btn-primary:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
}

.dark .app-modal .btn-primary {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

/* El trazo azul de Bootstrap sobre fondo oscuro se queda en 3.8:1, por debajo
   de AA para texto. Se aclara a la misma familia que los enlaces. */
.dark .btn-outline-primary {
  --bs-btn-color: var(--dk-link);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dk-primary);
  --bs-btn-hover-border-color: var(--dk-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dk-primary-active);
  --bs-btn-active-border-color: var(--dk-primary-active);
  --bs-btn-disabled-color: var(--dk-link);
  border-color: rgba(124, 179, 255, .45);
  color: var(--dk-link);
}

.dark .btn-outline-primary:hover,
.dark .btn-outline-primary:focus {
  background: var(--dk-primary);
  border-color: var(--dk-primary);
  color: #fff;
}

/* Casilla marcada: mismo azul de relleno que los botones. */
.dark .form-check-input:checked {
  background-color: var(--dk-primary);
  border-color: var(--dk-primary);
}

/* -----------------------------------------------------------------
 * Margenes laterales del contenido
 *
 * Las vistas usan `px-4 px-sm-5 px-lg-5`, asi que de 576px en adelante el
 * margen era de 3rem (48px). En una tablet de 768px eso son 96px de los 768
 * disponibles: un 12,5% del ancho gastado en aire.
 *
 * Se pasa a una escala progresiva alineada con la practica habitual
 * (Material usa 16dp en movil y 24dp en tablet). Las utilidades de Bootstrap
 * llevan !important, asi que hay que igualarlo para sobreescribirlas.
 * ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .container-xxl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .container-xxl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 575.98px) {
  .container-xxl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}