.dataTables_wrapper{
  width: 100%;
}

/* ============================================================================
   Tema UG sobre Metronic 8.3.3 (plataforma: login, shell y tarjetas de modulos).
   Colores del Manual de Marca UG: Azul Oscuro #183e6f, Azul Acero #075da1,
   Turquesa Celeste #16b8dd, Celeste Acero #148bb2. Los tokens primary vienen de
   assets/css/ug-brand.css; aca se completan los que Metronic deja fijos en su azul.
   ============================================================================ */
:root {
  --ug-azul: #183e6f;
  --ug-acero: #075da1;
  --ug-turquesa: #16b8dd;
  --ug-celeste: #148bb2;
  --ug-celeste-claro: #eaf4fb;
  --ug-ease: cubic-bezier(.22, 1, .36, 1);
  --ug-sombra: 0 12px 28px rgba(24, 62, 111, .12);

  --bs-text-primary: var(--ug-acero);
  --bs-component-active-bg: var(--ug-acero);
  --bs-component-checked-bg: var(--ug-acero);
  --bs-component-hover-color: var(--ug-acero);
  --bs-progress-bar-bg: var(--ug-acero);
  --bs-scrolltop-bg-color: var(--ug-acero);
  --bs-scrolltop-bg-color-hover: var(--ug-azul);
  --bs-menu-link-color-hover: var(--ug-acero);
  --bs-menu-link-color-show: var(--ug-acero);
  --bs-menu-link-color-here: var(--ug-acero);
  --bs-menu-link-color-active: var(--ug-acero);
  --bs-focus-ring-color: rgba(7, 93, 161, .25);
  --bs-primary-clarity: rgba(7, 93, 161, .2);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--ug-acero); }

/* ---------- Animaciones base ---------- */
@keyframes ugFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ugFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ugBlink  { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
.ug-fade-up { animation: ugFadeUp .6s var(--ug-ease) both; }

/* ---------- Shell (principal.php) ---------- */
.ug-shell { background: #f5f8fb; }
.ug-aside {
  background: linear-gradient(180deg, var(--ug-azul) 0%, #0f2f57 100%);
  padding: .75rem 1rem; gap: .5rem; flex-shrink: 0; z-index: 10;
  box-shadow: 4px 0 24px rgba(24, 62, 111, .18);
}
.ug-aside-logo {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: .9rem; background: #fff;
  transition: transform .35s var(--ug-ease), box-shadow .35s var(--ug-ease);
}
.ug-aside-logo:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.ug-aside-logo img { max-height: 30px; }
.ug-aside-btn {
  position: relative; width: 46px; height: 46px; border-radius: .9rem;
  color: rgba(255, 255, 255, .7); font-size: 1.2rem;
  transition: color .25s ease, background-color .25s ease, transform .25s var(--ug-ease);
}
.ug-aside-btn:hover, .ug-aside-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.ug-aside-btn:active { transform: scale(.94); }
@media (min-width: 992px) {
  /* Fijo al hacer scroll, con el mismo aire arriba y abajo (flota sobre el fondo) */
  .ug-aside { position: fixed; top: 1rem; bottom: 1rem; left: 0; width: 80px; padding: 1.5rem 0; border-radius: 0 1.25rem 1.25rem 0; }
  #kt_wrapper { margin-left: 80px; }
}
#kt_wrapper { min-width: 0; }

/* Buscadores de los modulos (de-buscador): pegados a la derecha de su contenedor; al
   abrirse crecen hacia la izquierda porque el borde derecho queda fijo. */
div:has(> .de-buscador) { display: flex; justify-content: flex-end; }
#kt_wrapper > * { animation: ugFade .35s ease both; }

/* ---------- Barra estandar de todos los modulos ----------
   FILTROS ............ LUPA BOTONES (solo icono + tooltip via data-ug-tt).
   <div class="ug-toolbar"><div class="ug-toolbar-filtros">...</div>
     <div class="ug-toolbar-acciones"><div id="bsq..."></div><button class="btn btn-icon ..." data-ug-tt="...">...</button></div></div> */
.ug-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.ug-toolbar-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0; }
.ug-toolbar-filtros > * { flex: 0 1 210px; min-width: 150px; }
.ug-toolbar-acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ug-toolbar-acciones .btn.btn-icon { width: 44px; height: 44px; border-radius: .65rem; font-size: 1rem;
  transition: transform .25s var(--ug-ease), box-shadow .25s ease, background-color .2s ease; }
.ug-toolbar-acciones .btn.btn-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(24, 62, 111, .16); }
.ug-toolbar-acciones .btn.btn-icon:active { transform: scale(.94); }
@media (max-width: 767px) { .ug-toolbar-filtros > * { flex: 1 1 140px; } .ug-toolbar-acciones { width: 100%; } .ug-toolbar-acciones > div:has(> .de-buscador) { flex: 1 1 auto; } }

/* Modulos viejos ('Criterio de busquedas'): filtros a la izquierda, botones a la derecha sin
   reescribir su HTML (grilla de 2 columnas; los botones ocupan la columna 2 de punta a punta). */
.ug-filtros-legacy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: end; }
.ug-filtros-legacy > .ug-toolbar-acciones { grid-column: 2; grid-row: 1 / span 20; align-self: start; margin-top: 1.6rem; }
.ug-filtros-legacy > :not(.ug-toolbar-acciones) { grid-column: 1; }
.ug-filtros-legacy .input-group > .btn { width: 40px; padding-left: 0; padding-right: 0; }
@media (max-width: 767px) { .ug-filtros-legacy { grid-template-columns: minmax(0, 1fr); }
  .ug-filtros-legacy > .ug-toolbar-acciones { grid-column: 1; grid-row: auto; margin-top: .5rem; justify-content: flex-end; } }

/* Campo de formulario dentro de la barra (archivo, texto) con el mismo aspecto que los filtros */
.ug-campo { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .55rem .9rem; cursor: text;
  background: var(--bs-gray-100); border: 1px solid transparent; border-radius: .65rem;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.ug-campo:focus-within { background: #fff; border-color: var(--ug-acero); box-shadow: 0 0 0 4px rgba(7, 93, 161, .12); }
.ug-campo-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-gray-500); }
.ug-campo input { border: 0; outline: 0; background: transparent; font-weight: 600; color: var(--bs-gray-800); padding: 0; }

/* Buscador: apertura suave (gana sobre dataEntry.css, que carga despues, por especificidad) */
#kt_wrapper .de-buscador { transition: width .45s var(--ug-ease), padding .45s var(--ug-ease), border-color .3s ease, box-shadow .3s ease; }
#kt_wrapper .de-buscador i.fa-search { transition: color .3s ease, transform .45s var(--ug-ease); }
#kt_wrapper .de-buscador:not(.de-bsq-abierto):hover { border-color: var(--bs-primary-border-subtle); box-shadow: 0 6px 14px rgba(24, 62, 111, .1); }
#kt_wrapper .de-buscador:not(.de-bsq-abierto):hover i.fa-search { color: var(--ug-acero); transform: scale(1.1); }
#kt_wrapper .de-buscador.de-bsq-abierto i.fa-search { color: var(--ug-acero); }
#kt_wrapper .de-buscador input { transition: opacity .3s ease .12s, transform .45s var(--ug-ease); }
#kt_wrapper .de-buscador:not(.de-bsq-abierto) input { transform: translateX(8px); }
#kt_wrapper .de-buscador.de-bsq-abierto input { transform: none; }

/* Panel lateral (offcanvas): entrada suave + fondo desenfocado */
.offcanvas.offcanvas-start { --bs-offcanvas-width: 440px; border-right: 0; box-shadow: var(--ug-sombra); }
.offcanvas { transition: transform .5s var(--ug-ease), visibility .5s; }
.offcanvas-backdrop { transition: opacity .4s ease; }
.offcanvas-backdrop.show { opacity: .3; backdrop-filter: blur(3px); }
.offcanvas .offcanvas-header { padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--bs-gray-200); }
.offcanvas .offcanvas-body { padding: 1.5rem 1.75rem; }

/* Tarjeta de modulo (Inicio, Accesos Directos y botones del login) */
.ug-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem;
  height: 100%; min-height: 150px; padding: 1.5rem 1rem; text-align: center;
  background: #fff; border: 1px solid var(--bs-gray-200); border-radius: 1.1rem;
  color: var(--bs-gray-800); text-decoration: none;
  transition: transform .35s var(--ug-ease), box-shadow .35s var(--ug-ease), border-color .35s ease;
}
.ug-tile:hover, .ug-tile:focus-visible {
  color: var(--ug-azul); transform: translateY(-5px);
  box-shadow: var(--ug-sombra); border-color: var(--bs-primary-border-subtle);
}
.ug-tile:active { transform: translateY(-2px) scale(.98); }
.ug-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ug-celeste-claro); color: var(--ug-acero);
  transition: background-color .35s ease, color .35s ease, transform .35s var(--ug-ease);
}
.ug-tile-icon.svg-icon svg { width: 2rem; height: 2rem; }
.ug-tile-icon i { font-size: 1.6rem; color: inherit; }
.ug-tile:hover .ug-tile-icon { background: var(--ug-acero); color: #fff; transform: scale(1.06); }
.ug-tile-label { font-weight: 600; font-size: 1rem; line-height: 1.35; }

/* Inicio (general.php) y panel de accesos: tarjetas en cascada.
   En el panel la animacion arranca al abrirlo: con .showing (Bootstrap la pone al empezar a deslizar) y se
   mantiene con .show; si arrancara en .show los tiles se verian primero y despues parpadearian desde opacity 0. */
.ug-home { max-width: 1320px; }
.ug-home-title { color: var(--ug-azul); letter-spacing: .02em; }
.ug-home-title::after {
  content: ""; display: block; width: 64px; height: 4px; margin: .9rem auto 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--ug-acero), var(--ug-turquesa));
}
#divShortCuts .ug-tile, .offcanvas.showing #divMenu .ug-tile, .offcanvas.show #divMenu .ug-tile { animation: ugFadeUp .55s var(--ug-ease) both; }
#divShortCuts > div:nth-child(1) .ug-tile, #divMenu .ug-tile-col:nth-child(1) .ug-tile { animation-delay: .03s; }
#divShortCuts > div:nth-child(2) .ug-tile, #divMenu .ug-tile-col:nth-child(2) .ug-tile { animation-delay: .06s; }
#divShortCuts > div:nth-child(3) .ug-tile, #divMenu .ug-tile-col:nth-child(3) .ug-tile { animation-delay: .09s; }
#divShortCuts > div:nth-child(4) .ug-tile, #divMenu .ug-tile-col:nth-child(4) .ug-tile { animation-delay: .12s; }
#divShortCuts > div:nth-child(5) .ug-tile, #divMenu .ug-tile-col:nth-child(5) .ug-tile { animation-delay: .15s; }
#divShortCuts > div:nth-child(6) .ug-tile, #divMenu .ug-tile-col:nth-child(6) .ug-tile { animation-delay: .18s; }
#divShortCuts > div:nth-child(7) .ug-tile, #divMenu .ug-tile-col:nth-child(7) .ug-tile { animation-delay: .21s; }
#divShortCuts > div:nth-child(8) .ug-tile, #divMenu .ug-tile-col:nth-child(8) .ug-tile { animation-delay: .24s; }
#divShortCuts > div:nth-child(n+9) .ug-tile, #divMenu .ug-tile-col:nth-child(n+9) .ug-tile { animation-delay: .27s; }

/* ---------- Login (index.php) ---------- */
.ug-login { background: #fff; }
.ug-login .login { min-height: 100vh; }
.ug-login .login-aside {
  position: relative; overflow: hidden; padding: 3rem 1.5rem;
  background:
    radial-gradient(circle at 15% 15%, rgba(22, 184, 221, .22), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(7, 93, 161, .18), transparent 45%),
    linear-gradient(160deg, #eef6fc 0%, #d9eaf6 100%);
}
.ug-login .login-aside > * { position: relative; animation: ugFadeUp .7s var(--ug-ease) both; }
.ug-login .login-logo img { max-height: 70px; }
.ug-login .login-aside .ug-tile { min-height: 130px; background: rgba(255, 255, 255, .85); border-color: transparent; }
.ug-login .login-form { width: 100%; max-width: 440px; animation: ugFadeUp .7s var(--ug-ease) .1s both; }
.ug-login .login-form .form-control {
  padding: .9rem 1.1rem; border: 1px solid var(--bs-gray-200); border-radius: .85rem; background: var(--bs-gray-100);
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.ug-login .login-form .form-control:focus { background: #fff; border-color: var(--ug-acero); box-shadow: 0 0 0 4px rgba(7, 93, 161, .12); }
.ug-login #btnIniciarSesion { border-radius: .85rem; transition: transform .25s var(--ug-ease), box-shadow .25s ease; }
.ug-login #btnIniciarSesion:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(7, 93, 161, .3); }
@media (min-width: 992px) { .ug-login .login-aside { width: 560px; padding-top: 8rem; } }

/* Mostrar / ocultar contrasena (ojito) */
.ug-pass { position: relative; }
.ug-pass .form-control { padding-right: 3.25rem; }
.ug-eye {
  position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: .65rem; background: transparent;
  color: var(--bs-gray-500); display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s ease, background-color .2s ease;
}
.ug-eye:hover, .ug-eye:focus-visible { color: var(--ug-acero); background: rgba(7, 93, 161, .08); outline: 0; }
.ug-eye i { font-size: 1.1rem; }
.ug-eye.is-blink i { animation: ugBlink .32s ease; }

/* Respeta "reducir movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Filtros compactos, mismo tamano en todo el proyecto: 44px de alto, igual que la lupa y los botones de
   la barra. Dos ids (#kt_body #kt_wrapper) para ganarle a los ajustes por pestana de cada modulo
   (dataEntry.css, solicitudes.css), que cargan despues. */
#kt_body #kt_wrapper .de-selector,
#kt_body #kt_wrapper .ug-campo { min-height: 44px; padding: 4px 12px; border-radius: .6rem; justify-content: center; gap: 0; }
#kt_body #kt_wrapper .de-selector .de-sel-label,
#kt_body #kt_wrapper .ug-campo-label { font-size: 9.5px; line-height: 1.3; letter-spacing: .05em; }
#kt_body #kt_wrapper .de-selector .de-sel-val,
#kt_body #kt_wrapper .ug-campo input { font-size: 12.5px; line-height: 1.35; }
#kt_body #kt_wrapper .de-selector .fa-search { font-size: 11px; }
#kt_body #kt_wrapper .de-selector { display: flex; flex-direction: column; justify-content: center; }
#kt_body #kt_wrapper .ug-toolbar-filtros > * { flex: 0 1 180px; min-width: 140px; }
#kt_body #kt_wrapper .ug-toolbar-filtros > .de-filtro-chip { flex: 0 0 auto; }   /* "Solo sin responsable": no se corta */
/* Fecha (flatpickr): campo visible + x para limpiar (UG_Fechas en principal.js) */
.ug-fecha { position: relative; display: block; width: 100%; }
.ug-fecha > .ug-fecha-alt { cursor: pointer; width: 100%; padding-right: 1.6rem; }
.ug-fecha-x { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
  padding: 2px 4px; line-height: 1; font-size: .8rem; color: var(--bs-gray-500); cursor: pointer; transition: color .2s ease; }
.ug-fecha-x:hover, .ug-fecha-x:focus-visible { color: var(--bs-danger); }
.ug-fecha-x[hidden] { display: none; }
/* flatpickr con static:true (dentro de modales) envuelve el campo en .flatpickr-wrapper, que es inline-block: el label quedaba AL LADO del campo */
.flatpickr-wrapper { display: block; width: 100%; }
/* Selector modal de Ticketera (TK_Selector / TK_SelectorMulti): nombres legibles; marcados en negrita */
#tk-selector-modal .table td, #tk-selector-modal .form-check-label { color: var(--bs-gray-900); }
#tk-selector-modal .form-check-input:checked ~ .form-check-label { font-weight: 700; }
/* caja de TK_CajaSelect sin etiqueta propia (la etiqueta esta en el campo): sin hueco arriba */
.tk-caja .de-sel-label:empty { display: none; }
/* selector deshabilitado (solo lectura) */
.de-selector.tk-sel-ro { opacity: .65; cursor: not-allowed; background: var(--bs-gray-200); }

/* Calendario (flatpickr): sutil, con los colores UG y una entrada suave */
.flatpickr-calendar { border-radius: .85rem; box-shadow: 0 14px 36px rgba(24, 62, 111, .16); border: 0; font-family: inherit; }
.flatpickr-calendar.open { animation: ug-fp-in .18s var(--ug-ease, ease) both; }
@keyframes ug-fp-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.flatpickr-day { border-radius: .5rem; }
.flatpickr-day.today { border-color: var(--ug-turquesa, #00a3d9); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--ug-azul, #183e6f); border-color: var(--ug-azul, #183e6f); }
.flatpickr-day:hover { background: rgba(7, 93, 161, .08); }
@media (prefers-reduced-motion: reduce) { .flatpickr-calendar.open { animation: none; } }
#kt_body #kt_wrapper .de-selector .de-sel-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Dropdown con buscador (UG_Dropdown en principal.js): ocupa el ancho del campo; dentro de .ug-campo, sin caja propia */
.ug-dd-wrap { width: 100% !important; }
.ug-dd-wrap .k-dropdown-wrap { min-height: calc(1.5em + .5rem + 2px); border-radius: .475rem; }
.ug-campo .ug-dd-wrap, .ug-campo .ug-dd-wrap .k-dropdown-wrap { border: 0; background: transparent; box-shadow: none; min-height: 0; }
.ug-campo .ug-dd-wrap .k-input { padding: 0; height: auto; line-height: 1.35; font-weight: 600; font-size: 12.5px; }
.ug-campo .ug-dd-wrap .k-select { min-height: 0; line-height: 1; }