/* ============================================================================
   Universidad de Guanajuato — capa de identidad institucional
   Basada en la "Guía institucional de imagen de la Universidad de Guanajuato"

   Paleta oficial (sección IX de la guía):
     #0a263d  Pantone 540  — Azul institucional
     #ffd300  Pantone 109  — Amarillo institucional
     #8c6e39  Pantone 872  — Dorado / bronce (color del escudo)

   Tipografía (sección VI de la guía):
     Titulares  → Novecento Wide   (licencia comercial; ver --ug-font-display)
     Subtítulos → Raleway          (Google Fonts)
     Cuerpos    → Gandhi Sans/Serif (opcional; ver --ug-font-ui)

   Este archivo se carga DESPUÉS de core-ug.css y theme-ug.css, que ya traen
   toda la plantilla recoloreada al azul institucional por tools/build-ug-theme.php.
   ============================================================================ */

:root {
  /* --- Color institucional base ------------------------------------------ */
  --ug-navy: #0a263d;          /* Pantone 540 — oficial */
  --ug-gold: #ffd300;          /* Pantone 109 — oficial */
  --ug-bronze: #8c6e39;        /* Pantone 872 — oficial */

  /* --- Rampa derivada del azul institucional (mismo tono, 207°) ---------- */
  --ug-navy-950: #05131f;
  --ug-navy-900: #081e30;
  --ug-navy-800: #0a263d;      /* = --ug-navy */
  --ug-navy-700: #0e3453;
  --ug-navy-600: #12446e;
  --ug-navy-500: #0f5894;      /* primario interactivo (botones, enlaces) */
  --ug-navy-400: #1e73b8;
  --ug-navy-300: #479be1;
  --ug-navy-200: #a8cae6;
  --ug-navy-100: #dae7f1;
  --ug-navy-50: #f1f5f9;

  /* --- Rampa del bronce -------------------------------------------------- */
  --ug-bronze-700: #6d552c;
  --ug-bronze-600: #8c6e39;    /* = --ug-bronze */
  --ug-bronze-400: #a78344;
  --ug-bronze-200: #c4a56e;
  --ug-bronze-50: #ede4d4;

  /* --- Amarillo: SOLO como acento. Nunca texto blanco encima ------------- */
  --ug-gold-600: #d9b400;
  --ug-gold-100: #fff6cc;
  --ug-on-gold: var(--ug-navy);   /* 10.7:1 — el único texto válido sobre oro */

  /* Sobre el bronce la relación se invierte: el azul da 3.2:1 y el blanco 4.8:1.
     Los tonos dorados intermedios (#a78344, #c4a56e) son zona muerta: ningún
     texto llega a 4.5:1, por eso el degradado del menú se queda en la parte
     oscura de la gama. */
  --ug-on-bronze: #ffffff;

  /* --- Superficies -------------------------------------------------------- */
  --ug-surface: #ffffff;
  --ug-surface-sunken: #f5f7fa;
  --ug-border: #e5e9ed;
  --ug-text: #263c55;
  --ug-text-muted: #69809a;

  /* --- Tipografía --------------------------------------------------------- */
  /* Si la institución licencia Novecento Wide y la auto-hospedan, se usa sola. */
  --ug-font-display: "Novecento Wide", "Archivo", "Raleway", system-ui, sans-serif;
  --ug-font-ui: "Raleway", "Gandhi Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ug-shadow-card: 0 4px 18px 0 rgba(10, 38, 61, 0.06);
  --ug-shadow-navbar: 0 2px 10px rgba(10, 38, 61, 0.08);
}

/* ============================================================================
   1. Tipografía
   ============================================================================ */

body,
.menu,
.btn,
.form-control,
.form-select,
.table {
  font-family: var(--ug-font-ui);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.app-brand-text {
  font-family: var(--ug-font-display);
  font-stretch: var(--ug-font-display-stretch, 112%);            /* aproxima el ancho de Novecento Wide en Archivo */
  letter-spacing: 0.01em;
  color: var(--ug-navy);
}

/* Titulares de primera importancia: la guía los quiere en versalitas anchas */
.ug-display {
  font-family: var(--ug-font-display);
  font-stretch: calc(var(--ug-font-display-stretch, 112%) + 13%);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================================
   2. Barra lateral — azul institucional con acento oro
   ============================================================================ */

/* El tema declara `.bg-menu-theme { background-color: #f3f4f4 !important }`, un gris
   casi blanco. Como el aside lleva las dos clases y ambas reglas son !important con
   la misma especificidad, quién gana depende del orden de carga de las hojas: si el
   navegador servía la del tema al final, la barra salía blanca y el texto claro se
   volvía ilegible. Encadenar las dos clases sube la especificidad y lo resuelve pase
   lo que pase con el orden. */
.layout-menu,
.layout-menu.bg-menu-theme,
aside.layout-menu.bg-menu-theme {
  background-color: var(--ug-navy) !important;
}

.app-brand {
  background-color: var(--ug-navy-900) !important;
  border-bottom: 2px solid var(--ug-gold) !important;
}

.app-brand-text {
  color: #fff !important;
}

/* Escudo institucional: la guía exige privilegiarlo por tamaño o posición */
.ug-escudo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

/* Marcador tipográfico mientras no se coloca el archivo oficial del escudo */
.ug-escudo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ug-gold);
  border-radius: 50%;
  color: var(--ug-gold);
  font-family: var(--ug-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ug-escudo-fallback.ug-escudo-lg {
  width: 132px;
  height: 132px;
  border-width: 3px;
  font-size: 44px;
}

.ug-escudo-fallback.ug-escudo-sm {
  width: 76px;
  height: 76px;
  font-size: 26px;
  border-color: var(--ug-bronze);
  color: var(--ug-bronze);
}

.menu-header {
  margin-top: 1.5rem !important;
  color: #8aa0b5 !important;
  letter-spacing: 0.08em;
}

/* Con !important para que el color del texto no quede a merced del orden de las
   hojas: el tema lo deja en un gris pensado para fondos claros. */
.layout-menu .menu-item .menu-link,
.menu-vertical .menu-item .menu-link {
  color: #c8d5e0 !important;
}

.layout-menu .menu-item .menu-link .menu-icon,
.layout-menu .menu-item .menu-link .ug-menu-subicon {
  color: #c8d5e0;
}

/* Al pasar el cursor: fondo OPACO, no un velo translúcido.
   Con `rgba(255,255,255,.06)` el texto blanco dependía de que abajo hubiera azul;
   cuando el panel salía claro —el desplegable flotante del menú contraído— las
   letras quedaban blancas sobre blanco. Un fondo sólido garantiza el par. */
.layout-menu .menu-item:not(.active) > .menu-link:hover,
.menu-vertical .menu-item:not(.active) > .menu-link:hover,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) .menu-link:hover {
  background-color: var(--ug-navy-600) !important;
  color: #fff !important;
}

.layout-menu .menu-item:not(.active) > .menu-link:hover .menu-icon,
.layout-menu .menu-item:not(.active) > .menu-link:hover .ug-menu-subicon {
  color: var(--ug-gold) !important;
  opacity: 1;
}

/* El submenú y el desplegable flotante del menú contraído llevan el azul
   institucional de forma explícita: la plantilla los deja claros. */
.layout-menu .menu-sub,
.bg-menu-theme .menu-sub,
.layout-menu-collapsed .layout-menu .menu-item .menu-sub,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner > .menu-item > .menu-sub {
  background-color: var(--ug-navy) !important;
}

/* Los puntos que la plantilla dibuja antes de cada página sobran: ahora cada
   una lleva su propio icono. */
.bg-menu-theme .menu-sub > .menu-item > .menu-link::before,
.layout-menu .menu-sub > .menu-item > .menu-link::before,
.layout-menu .menu-item .menu-link::before {
  display: none !important;
  content: none !important;
}

/* Separación entre el icono y el texto: la plantilla los deja casi pegados */
.layout-menu .menu-icon,
.layout-menu .ug-menu-subicon {
  margin-right: 0.75rem !important;
  flex-shrink: 0;
}

/* Iconos de submódulo y de página: la plantilla no reserva sitio para ellos */
.layout-menu .ug-menu-subicon {
  font-size: 1.05rem;
  line-height: 1;
  width: 1.35rem;
  text-align: center;
  opacity: 0.85;
}

.layout-menu .menu-sub .menu-link {
  display: flex;
  align-items: center;
}

/* Encabezado del módulo (nivel 1): azul claro institucional, para distinguirlo
   de sus páginas sin recurrir al dorado, que queda reservado a la selección. */
.layout-menu .menu-inner > .menu-item > .menu-link,
.layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
  color: var(--ug-navy-300) !important;
}

.layout-menu .menu-inner > .menu-item > .menu-link {
  font-weight: 600;
}

.layout-menu .menu-inner > .menu-item > .menu-link:hover,
.layout-menu .menu-inner > .menu-item > .menu-link:hover .menu-icon {
  color: var(--ug-navy-200) !important;
}

/* Elemento activo: degradado dorado, el acento que la guía reserva para marcar
   jerarquía.

   La plantilla lo pinta con `background-color: rgb(218,227,243)`, un azul casi
   blanco pensado para barras laterales claras: sobre el azul institucional
   resulta un bloque chillante. Se sustituye por completo y se enumeran también
   los selectores del tema para ganarles por especificidad, no sólo por orden.

   El degradado se mantiene dentro de la gama dorada de punta a punta. Sobre oro
   el único texto legible es el azul institucional (10.7:1); el blanco daría
   1.4:1, por eso las letras se invierten a azul al seleccionar. */
/* Ojo con el combinador: el tema usa `.menu-item.active .menu-link` (descendiente),
   que alcanza a todos los hijos del módulo abierto y les pinta el bloque bronce.
   Aquí va `>` para que sólo afecte al enlace del propio elemento activo. */
.layout-menu .menu-item.active > .menu-link,
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.active > .menu-link,
.menu-vertical .menu-item.active:not(.menu-item-closing) > .menu-link {
  background:
    /* Trama diagonal tenue, como la de los fondos institucionales */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.07) 0 2px,
      rgba(255, 255, 255, 0) 2px 9px),
    linear-gradient(90deg, var(--ug-bronze) 0%, var(--ug-bronze-700) 100%) !important;
  background-color: var(--ug-bronze) !important;
  color: var(--ug-on-bronze) !important;
  border-left: 3px solid var(--ug-gold) !important;
  padding-left: 1.8rem !important;
  font-weight: 600;
}

.layout-menu .menu-item.active > .menu-link .menu-icon,
.layout-menu .menu-item.active > .menu-link .ug-menu-subicon,
.menu-vertical .menu-item.active > .menu-link .menu-icon {
  color: var(--ug-on-bronze) !important;
  opacity: 1;
}

/* Un padre abierto no es la pantalla actual: basta el texto en oro, sin bloque,
   para que no compita con la hoja realmente seleccionada.

   Los selectores llevan el mismo prefijo largo que la regla de arriba porque si
   no, aquélla gana por especificidad y el padre se pinta de dorado sólido, con
   su icono dorado encima: invisible. */
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.active.open > .menu-link.menu-toggle,
.layout-menu .menu-item.open > .menu-link.menu-toggle {
  background: transparent !important;
  color: var(--ug-navy-200) !important;
  border-left-color: transparent !important;
  font-weight: 700;
}

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle .menu-icon,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle .ug-menu-subicon,
.layout-menu .menu-item.open > .menu-link.menu-toggle .menu-icon,
.layout-menu .menu-item.open > .menu-link.menu-toggle .ug-menu-subicon {
  color: var(--ug-navy-200) !important;
}

/* Dentro de un submenú, el mismo bronce */
.layout-menu .menu-sub .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link {
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.07) 0 2px,
      rgba(255, 255, 255, 0) 2px 9px),
    linear-gradient(90deg, var(--ug-bronze) 0%, var(--ug-bronze-700) 100%) !important;
  color: var(--ug-on-bronze) !important;
}

.menu-divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================================
   3. Barra superior
   ============================================================================ */

.layout-navbar,
#layout-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1025 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: var(--ug-surface) !important;
  border-bottom: 1px solid var(--ug-border) !important;
  box-shadow: var(--ug-shadow-navbar) !important;
  min-height: 54px !important;
}

.layout-navbar .container-xxl {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  min-height: 54px !important;
}

/* Título de pantalla en la barra superior */
.ug-screen-title {
  font-family: var(--ug-font-display);
  font-stretch: var(--ug-font-display-stretch, 112%);
  font-weight: 600;
  color: var(--ug-navy);
  letter-spacing: 0.01em;
}

/* ============================================================================
   4. Botones y acentos
   ============================================================================ */

.btn-primary {
  background-color: var(--ug-navy-500) !important;
  border-color: var(--ug-navy-500) !important;
  color: #fff !important;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(10, 38, 61, 0.3) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--ug-navy-600) !important;
  border-color: var(--ug-navy-600) !important;
}

.btn-outline-primary {
  color: var(--ug-navy-500) !important;
  border-color: var(--ug-navy-500) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--ug-navy-500) !important;
  border-color: var(--ug-navy-500) !important;
  color: #fff !important;
}

/* Botón de acento institucional: oro con texto azul. La combinación inversa
   (texto blanco sobre oro) no alcanza contraste y no debe usarse. */
.btn-ug-gold {
  background-color: var(--ug-gold);
  border-color: var(--ug-gold);
  color: var(--ug-on-gold);
  font-weight: 600;
}

.btn-ug-gold:hover,
.btn-ug-gold:focus,
.btn-ug-gold:active {
  background-color: var(--ug-gold-600);
  border-color: var(--ug-gold-600);
  color: var(--ug-on-gold);
}

.text-primary { color: var(--ug-navy-500) !important; }
.bg-primary   { background-color: var(--ug-navy-500) !important; }

.bg-label-primary {
  background-color: var(--ug-navy-100) !important;
  color: var(--ug-navy-600) !important;
}

.ug-text-gold   { color: var(--ug-bronze) !important; }
.ug-bg-navy     { background-color: var(--ug-navy) !important; }
.ug-border-gold { border-color: var(--ug-gold) !important; }

/* Chips de estado en oro (avisos, pendientes) */
.bg-label-ug-gold {
  background-color: var(--ug-gold-100) !important;
  color: var(--ug-bronze-700) !important;
}

a { color: var(--ug-navy-500); }
a:hover { color: var(--ug-navy-600); }

.form-control:focus,
.form-select:focus {
  border-color: var(--ug-navy-400) !important;
  box-shadow: 0 0 0 0.15rem rgba(15, 88, 148, 0.18) !important;
}

/* ============================================================================
   5. Tarjetas, tablas y pie
   ============================================================================ */

.card {
  box-shadow: var(--ug-shadow-card) !important;
  border: 1px solid var(--ug-border);
}

.card-header .card-title {
  color: var(--ug-navy);
}

.table > thead {
  background-color: var(--ug-navy-50);
}

.table > thead th {
  color: var(--ug-navy) !important;
  font-family: var(--ug-font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--ug-navy-100) !important;
}

.content-footer {
  border-top: 1px solid var(--ug-border);
  background-color: var(--ug-surface) !important;
}

/* Encabezado de bloque dentro de formularios largos */
.ug-form-section {
  font-family: var(--ug-font-display);
  font-stretch: var(--ug-font-display-stretch, 112%);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ug-navy-600);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--ug-navy-100);
}

.ug-form-section::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-right: 0.55rem;
  vertical-align: -1px;
  background-color: var(--ug-gold);
}

/* Área de trabajo activa en la barra superior */
.ug-area-activa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--ug-border);
  color: var(--ug-navy-500);
  max-width: 32rem;
}

.ug-area-activa > i {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ug-area-select {
  width: auto;
  max-width: 28rem;
  border: 0;
  background-color: transparent;
  box-shadow: none !important;
  color: var(--ug-navy);
  font-weight: 600;
  font-size: 0.82rem;
  padding-left: 0;
  cursor: pointer;
}

.ug-area-select:focus {
  border: 0;
  background-color: var(--ug-navy-50);
}

.ug-area-fija {
  color: var(--ug-navy);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En móvil el título de pantalla se oculta, así que el área ya no necesita
   separador; el selector se encoge para no empujar los iconos de la derecha. */
@media (max-width: 991.98px) {
  .ug-area-activa {
    padding-left: 0;
    border-left: 0;
    min-width: 0;
    max-width: 100%;
  }

  .ug-area-select,
  .ug-area-fija {
    max-width: 11rem;
    font-size: 0.78rem;
  }
}

/* ============================================================================
   Menú del usuario
   ============================================================================ */

.ug-menu-usuario {
  min-width: 15rem;
  overflow: hidden;
  border: 1px solid var(--ug-border);
  box-shadow: 0 8px 28px rgba(10, 38, 61, 0.16);
}

/* Cabecera: el escudo institucional al fondo, muy tenue, sobre el azul */
.ug-usuario-tarjeta {
  position: relative;
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  background-color: var(--ug-navy);
  background-image:
    linear-gradient(180deg, rgba(10, 38, 61, 0.82) 0%, rgba(10, 38, 61, 0.95) 100%),
    var(--ug-escudo-marca, none);
  background-size: auto 150%;
  background-position: center 28%;
  background-repeat: no-repeat;
  border-bottom: 3px solid var(--ug-gold);
}

/* La foto sobresale sobre el fondo con un aro claro */
.ug-usuario-foto .avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* La foto es un botón: al pasar el cursor aparece la cámara encima */
.ug-foto-boton {
  position: relative;
  display: block;
  margin: 0 auto 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.ug-foto-capa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(10, 38, 61, 0.65);
  color: var(--ug-gold);
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.ug-foto-boton:hover .ug-foto-capa,
.ug-foto-boton:focus-visible .ug-foto-capa {
  opacity: 1;
}

.ug-foto-boton:focus-visible {
  outline: 2px solid var(--ug-gold);
  outline-offset: 3px;
}

.ug-foto-quitar {
  display: block;
  margin: 0 auto 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #93a9c0;
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
}

.ug-foto-quitar:hover {
  color: var(--ug-gold);
}

.ug-usuario-foto .avatar-initial {
  font-size: 1.75rem;
  font-weight: 700;
}

.ug-usuario-datos {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ug-usuario-nombre {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
}

.ug-usuario-correo {
  color: #b9cade;
  font-size: 0.78rem;
  word-break: break-all;
}

.ug-usuario-dato {
  color: #93a9c0;
  font-size: 0.75rem;
}

.ug-menu-usuario .dropdown-item {
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}

.ug-menu-usuario .dropdown-item:hover {
  background-color: var(--ug-navy-50);
}

/* Pestañas de formulario dentro de un modal: mantienen acotada su altura */
.ug-form-tabs {
  border-bottom: 1px solid var(--ug-border);
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ug-form-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ug-text-muted);
  background: transparent;
  /* Sin transición de color: la de Bootstrap dejaba el subrayado pegado en la
     pestaña anterior al cambiar de una a otra. */
  transition: none;
}

.ug-form-tabs .nav-link:hover:not(.active) {
  color: var(--ug-navy-500);
  border-bottom-color: var(--ug-navy-200);
}

/* Se marca por clase y por atributo: Bootstrap mantiene ambos y así el estilo
   no depende de cuál actualice primero. */
.ug-form-tabs .nav-link.active,
.ug-form-tabs .nav-link[aria-selected="true"] {
  color: var(--ug-navy);
  background: transparent;
  border-bottom-color: var(--ug-gold);
}

.ug-form-tabs .nav-link:not(.active)[aria-selected="false"] {
  border-bottom-color: transparent;
}

/* Altura estable: el modal no salta al cambiar de pestaña */
.ug-form-tab-content {
  padding-top: 1.5rem;
  min-height: 20rem;
}

/* La lista de perfiles crece con cada módulo: se desplaza dentro de su propia
   pestaña en vez de estirar el modal. */
.ug-perfiles-lista {
  max-height: 24rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.ug-perfiles-lista .ug-form-section:first-child {
  margin-top: 0 !important;
}

@media (max-width: 767.98px) {
  .ug-perfiles-lista { max-height: 18rem; }
}

/* En pantallas angostas las pestañas se deslizan en una sola fila: envolverlas
   robaba tres renglones de alto, que es justo lo que se quiere ahorrar. */
@media (max-width: 767.98px) {
  .ug-form-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ug-form-tabs::-webkit-scrollbar { display: none; }

  .ug-form-tabs .nav-item { flex: 0 0 auto; }

  .ug-form-tabs .nav-link {
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .ug-form-tab-content {
    padding-top: 1.15rem;
    min-height: 0;
  }
}

/* DataTables dentro de la paleta institucional */
.dataTables_wrapper .dataTables_filter input {
  min-width: 20rem;
  max-width: 100%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current > .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
  background-color: var(--ug-navy-500) !important;
  border-color: var(--ug-navy-500) !important;
}

table.dataTable > tbody > tr > td {
  vertical-align: middle;
}

.ug-footer-rule {
  border-top: 2px solid var(--ug-gold);
}

/* ============================================================================
   6. Ajustes de layout heredados de la plantilla
   ============================================================================ */

/* Oculta las rutas de vista del Debug Toolbar de CodeIgniter */
.debug-view-path,
.debug-view,
.show-view,
[class*="debug-view"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

html, body,
.layout-wrapper,
.layout-container,
.layout-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
.layout-navbar-fixed .layout-page,
.layout-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.content-wrapper {
  padding-top: 0.5rem !important;
}

/* ============================================================================
   7. Pantalla de acceso
   ============================================================================ */

/* Rejilla: una sola columna en móvil; panel ancho + formulario angosto en
   escritorio, siguiendo la proporción 9/3 del sistema anterior. */
.ug-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--ug-surface-sunken);
}

@media (min-width: 992px) {
  .ug-auth { grid-template-columns: minmax(0, 2.2fr) minmax(400px, 1fr); }
}

@media (min-width: 1400px) {
  .ug-auth { grid-template-columns: minmax(0, 3fr) minmax(440px, 1fr); }
}

/* --- Panel institucional (oculto por debajo de lg) ---------------------- */
.ug-auth-brand {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2.5rem, 4vw, 4.5rem);
  color: #fff;
  overflow: hidden;
}

@media (min-width: 992px) {
  .ug-auth-brand { display: flex; }
}

/* Remate inferior en oro y bronce institucionales */
.ug-auth-brand::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ug-gold) 0%, var(--ug-bronze) 100%);
}

.ug-auth-brand-content {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 40rem;
}

/* El escudo debe estar privilegiado por tamaño (guía institucional, sec. X) */
.ug-auth-lockup {
  width: min(420px, 60%);
  height: auto;
  margin-bottom: 2.5rem;
}

.ug-auth-brand h1 {
  color: var(--ug-gold);
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.ug-auth-tagline {
  font-family: var(--ug-font-display);
  font-stretch: var(--ug-font-display-stretch, 112%);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  color: #fff;
  margin-bottom: 1.25rem;
}

.ug-auth-lead {
  color: #b9cade;
  max-width: 46ch;
  line-height: 1.65;
  margin-bottom: 0;
}

.ug-auth-motto {
  position: relative;
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--ug-gold);
  font-style: italic;
  color: #93a9c0;
  font-size: 0.9rem;
}

/* --- Columna del formulario -------------------------------------------- */
.ug-auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
  background-color: var(--ug-surface);
}

.ug-auth-card {
  width: 100%;
  max-width: 380px;
}

/* En móvil el panel institucional no existe: la marca encabeza la tarjeta */
.ug-auth-lockup-sm {
  width: min(230px, 62%);
  height: auto;
}

.ug-auth-escudo {
  height: 92px;
  width: auto;
}

.ug-auth-title {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  text-align: center;
}

.ug-auth-subtitle {
  color: var(--ug-text-muted);
  text-align: center;
  margin-bottom: 1.75rem;
}

.ug-auth-form .input-group-text {
  background-color: var(--ug-navy-50);
  color: var(--ug-navy-500);
}

.ug-auth-form .btn-primary {
  padding-block: 0.6rem;
  font-weight: 600;
}

.ug-auth-foot {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ug-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* En móvil, un remate superior en oro sustituye al panel institucional */
@media (max-width: 991.98px) {
  .ug-auth-form {
    border-top: 4px solid var(--ug-gold);
  }
}