/* ───────────────────────────────────────────────────────────────────
   Directorio UA — tema visual sobre Bootstrap 5
   Aplica al CONTENIDO interno (<main>). La cabecera y el pie
   corporativos del template UA (_LayoutVuala) NO se tocan.

   Clases en español prefijadas con ua-*.
   ─────────────────────────────────────────────────────────────────── */

/* ───────────── Overrides defensivos contra plantilla24 ─────────────
   plantilla24-web.min.css trae una regla que mete `text-decoration:
   underline !important` en TODO lo que no sea .btn ni .text-decoration-none.
   Tambien define button{ color:var(--bs-body-color) } que pisa nuestros
   botones blancos. Aqui forzamos el comportamiento que queremos. */
main#contenido-pagina a,
main#contenido-pagina button,
main#contenido-pagina .ua-busqueda-enviar,
main#contenido-pagina .ua-menu-lateral-item,
main#contenido-pagina .ua-pildora,
main#contenido-pagina .ua-explorar-tarjeta,
main#contenido-pagina .ua-resultado-btn,
main#contenido-pagina .ua-icono-btn {
  text-decoration: none !important;
}
/* .ua-enlace queda excluido a proposito: el subrayado del hipervinculo
   es la senalizacion accesible que distingue enlaces del texto plano. */
main#contenido-pagina a.ua-enlace { text-decoration: underline !important; }
/* Separacion respecto a la cabecera Vuala para que el contenido no
   bese el logo corporativo. !important obligatorio porque plantilla24.js
   sobreescribe element.style.paddingTop tras cargar la pagina (busca
   "contenido-pagina" en su codigo) y un CSS normal pierde frente a
   inline-style. */
main#contenido-pagina { padding-top: 3rem !important; }

/* Etiqueta de version, inyectada en el footer por _LayoutVuala. */
.ua-version {
  text-align: center;
  font-size: 0.72rem;
  color: var(--ua-text-muted);
  padding: 0.5rem 0 1rem;
  opacity: 0.7;
}

/* ───────────── Tokens (configurable por el desarrollador) ───────────── */
:root {
  --ua-primary: #0f6cc7;
  --ua-primary-700: #0a4f95;
  --ua-primary-50: #e7f0fb;
  --ua-navy: #1c2c44;
  --ua-bg: #f5f6f8;
  --ua-card: #ffffff;
  --ua-card-head: #f1f3f5;
  --ua-border: #d8dde3;
  --ua-text: #1f2733;
  --ua-text-muted: #525c6b; /* AA: 4.5:1 sobre --ua-bg */
  --ua-link: #0a5fb6;
  --ua-link-hover: #073e7a;

  --ua-pdi: #0a5fb6;
  --ua-ptgas: #6d28d9;
  --ua-alu: #087a49;
  --ua-otr: #6c757d;

  --ua-success: #198754;
  --ua-success-700: #146c43;
  --ua-info-bg: #cfe9f5;
  --ua-info-border: #9bd3ec;
  --ua-info-text: #0c4a6e;

  --ua-radio: 10px;
  --ua-radio-sm: 6px;
  --ua-sombra: 0 1px 2px rgba(15, 28, 56, .06), 0 1px 8px rgba(15, 28, 56, .04);
  --ua-sombra-lg: 0 12px 32px rgba(15, 28, 56, .14);

  --ua-fila-pad: 1rem 1.25rem;
  --ua-fuente: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Densidad opcional (desarrollador) */
[data-densidad="compacta"] { --ua-fila-pad: 0.6rem 0.9rem; }

/* Familia tipográfica opcional (desarrollador) */
[data-fuente="humanista"] { --ua-fuente: "Public Sans", system-ui, sans-serif; }
[data-fuente="serif"]     { --ua-fuente: "IBM Plex Sans", system-ui, sans-serif; }

/* Acento opcional (desarrollador): borde lateral en activos */
[data-acento="franja"] .ua-menu-lateral-item.is-active {
  background: var(--ua-card); color: var(--ua-primary);
  border-left: 3px solid var(--ua-primary);
  padding-left: calc(1rem - 2px);
}
[data-acento="subrayado"] .ua-tarjeta-cabecera {
  border-bottom: 2px solid var(--ua-primary);
}

/* Modo oscuro (expuesto al usuario, persistido en cookie ua-tema).
   data-tema="auto" delega en la preferencia del sistema operativo. */
[data-tema="oscuro"],
[data-tema="auto"] {
  /* En modo auto se aplica solo si el sistema operativo va en oscuro */
}
[data-tema="oscuro"] {
  --ua-bg: #0f1722;
  --ua-card: #18222e;
  --ua-card-head: #1f2b39;
  --ua-border: #2a3949;
  --ua-text: #e7ecf3;
  --ua-text-muted: #b3c0d2;
  --ua-link: #79b6f3;
  --ua-link-hover: #c5dcf7;
  --ua-sombra: 0 1px 0 rgba(0,0,0,.3);
  --ua-sombra-lg: 0 12px 32px rgba(0,0,0,.4);
  --ua-info-bg: #0f3a52;
  --ua-info-border: #1f5d7e;
  --ua-info-text: #cfe9f5;
}
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] {
    --ua-bg: #0f1722;
    --ua-card: #18222e;
    --ua-card-head: #1f2b39;
    --ua-border: #2a3949;
    --ua-text: #e7ecf3;
    --ua-text-muted: #b3c0d2;
    --ua-link: #79b6f3;
    --ua-link-hover: #c5dcf7;
    --ua-sombra: 0 1px 0 rgba(0,0,0,.3);
    --ua-sombra-lg: 0 12px 32px rgba(0,0,0,.4);
    --ua-info-bg: #0f3a52;
    --ua-info-border: #1f5d7e;
    --ua-info-text: #cfe9f5;
  }
}

/* ───────────── Reset suave (solo en el área de contenido) ───────────── */
.ua-pagina {
  font-family: var(--ua-fuente);
  background: var(--ua-bg);
  color: var(--ua-text);
  -webkit-font-smoothing: antialiased;
  padding: 1.75rem 0 3rem;
  min-height: 60vh;
}
.ua-pagina * { box-sizing: border-box; }

/* Anula el ":focus rojo + underline rojo" heredado de ua-min.css (body a:focus)
   en cualquier enlace dentro del area de contenido nuevo. El :focus-visible
   con outline azul ya esta cubierto mas abajo. */
.ua-pagina a:focus,
.ua-pagina a:active {
  outline: none;
  text-decoration-color: currentColor;
}

/* Salto al contenido (extra dentro del main, opcional) */
.ua-salto {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ua-primary); color: #fff; padding: 0.6rem 1rem; font-weight: 600;
}
.ua-salto:focus { left: 1rem; top: 1rem; }

/* Foco visible global (solo dentro de .ua-pagina) */
.ua-pagina :focus-visible {
  outline: 3px solid var(--ua-primary-50);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ───────────── Disposición (sidenav + principal) ───────────── */
.ua-disposicion {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 1.5rem;
}
@media (max-width: 991px) {
  .ua-disposicion { grid-template-columns: 1fr; }
}

.ua-lateral { position: sticky; top: 1rem; align-self: start; }
.ua-menu-lateral { display: flex; flex-direction: column; gap: 0.4rem; }
.ua-menu-lateral-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm);
  color: var(--ua-link);
  font-size: 0.95rem; font-weight: 500;
  text-align: left; width: 100%;
  box-shadow: var(--ua-sombra);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.ua-menu-lateral-item:hover { border-color: var(--ua-primary); color: var(--ua-primary); }
/* Activo: mismo azul claro que el boton Buscar, icono y texto en blanco.
   Especificidad a.ua-menu-lateral-item para vencer a plantilla24. */
a.ua-menu-lateral-item.is-active,
.ua-menu-lateral-item.is-active {
  background: var(--ua-primary); color: #fff; border-color: var(--ua-primary);
}
a.ua-menu-lateral-item.is-active span,
a.ua-menu-lateral-item.is-active i,
.ua-menu-lateral-item.is-active span,
.ua-menu-lateral-item.is-active i { color: #fff; }

.ua-principal { min-width: 0; }
.ua-principal:focus { outline: none; }

/* ───────────── Portada (hero) ───────────── */
.ua-portada { padding: 1rem 0 1.5rem; }
.ua-antetitulo {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ua-primary);
  margin: 0 0 0.6rem;
}
.ua-portada-titulo {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  margin: 0 0 0.75rem; max-width: 32ch; color: var(--ua-text);
  text-wrap: pretty;
}
.ua-portada-sub {
  font-size: 1.05rem; color: var(--ua-text-muted);
  margin: 0 0 1.4rem; max-width: 60ch;
}
.ua-portada-ayuda {
  font-size: 0.8rem; color: var(--ua-text-muted); margin: 0.6rem 0 0;
}

/* ───────────── Búsqueda ───────────── */
.ua-busqueda { display: flex; flex-direction: column; gap: 0.5rem; max-width: 760px; }
/* Reset del fieldset: plantilla24 le aplica estilos de form-control. */
.ua-busqueda-pestanas {
  display: inline-flex; gap: 0.4rem;
  border: 0; padding: 0; margin: 0; min-inline-size: 0;
}
/* Especificidad subida (label.ua-pestana) para ganar a plantilla24 label{}. */
label.ua-pestana {
  background: transparent; border: 1px solid var(--ua-border);
  border-radius: 999px; padding: 0.3rem 0.85rem; margin: 0;
  font-size: 0.85rem; color: var(--ua-text-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
  line-height: 1.2;
  cursor: pointer;
}
/* Estado activo: server-rendered (is-active) y CSS-only (:has(:checked))
   para que el visual siempre coincida con el radio aunque no corra JS. */
label.ua-pestana.is-active,
label.ua-pestana:has(input[type=radio]:checked) {
  background: var(--ua-primary); border-color: var(--ua-primary); color: #fff;
}
/* Foco visible cuando se llega por teclado al radio oculto.
   :focus-visible para no pintar el anillo en clic con raton. */
label.ua-pestana:has(input[type=radio]:focus-visible) {
  border-color: var(--ua-primary);
  box-shadow: 0 0 0 3px var(--ua-primary-50);
  outline: none;
}
/* La pestaña activa conserva el texto blanco aunque reciba el foco */
label.ua-pestana.is-active:has(input[type=radio]:focus-visible),
label.ua-pestana:has(input[type=radio]:checked:focus-visible) { color: #fff; }

.ua-busqueda-fila {
  display: flex; gap: 0.5rem; align-items: stretch; position: relative;
}
.ua-busqueda-campo {
  position: relative; flex: 1;
  background: var(--ua-card);
  border: 1px solid var(--ua-border); border-radius: var(--ua-radio-sm);
  display: flex; align-items: center;
  box-shadow: var(--ua-sombra);
  transition: border-color .15s, box-shadow .15s;
}
.ua-busqueda-campo:focus-within {
  border-color: var(--ua-primary);
  box-shadow: 0 0 0 3px var(--ua-primary-50);
}
.ua-busqueda-icono {
  position: absolute; left: 0.9rem; color: var(--ua-text-muted); pointer-events: none;
}
.ua-busqueda-input {
  flex: 1; border: 0; background: transparent; color: var(--ua-text);
  padding: 0.55rem 3.5rem 0.55rem 2.8rem;
  font-size: 0.95rem; outline: none; font-family: inherit;
}
/* plantilla24 mete input:focus { box-shadow: 0 0 0 .25rem #dd6e00; } a
   todos los <input>. Lo anulamos: el foco visible lo aporta el wrapper
   .ua-busqueda-campo:focus-within. */
input.ua-busqueda-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.ua-busqueda-atajo {
  position: absolute; right: 0.7rem;
  font-family: ui-monospace, monospace; font-size: 0.72rem;
  background: var(--ua-bg); border: 1px solid var(--ua-border); border-radius: 4px;
  padding: 0.15rem 0.4rem; color: var(--ua-text-muted);
}
/* Especificidad subida (button.ua-busqueda-enviar) para ganar a
   plantilla24's button{ color:var(--bs-body-color) }. */
button.ua-busqueda-enviar,
.ua-busqueda-enviar {
  background: var(--ua-primary); border: 1px solid var(--ua-primary);
  color: #fff; font-weight: 600; padding: 0.55rem 1.1rem;
  font-size: 0.95rem; border-radius: var(--ua-radio-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
button.ua-busqueda-enviar:hover,
.ua-busqueda-enviar:hover { background: var(--ua-primary-700); border-color: var(--ua-primary-700); color: #fff; }
.ua-busqueda-enviar span,
.ua-busqueda-enviar i { color: #fff; }

/* Sugerencias (mejora progresiva) */
.ua-sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm); box-shadow: var(--ua-sombra-lg);
  list-style: none; margin: 0; padding: 0.35rem; z-index: 50;
  max-height: 360px; overflow: auto;
}
.ua-sugerencias-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem;
}
.ua-sugerencias-item.is-hl,
.ua-sugerencias-item:hover { background: var(--ua-primary-50); }
.ua-sugerencias-nombre { font-weight: 600; color: var(--ua-text); }
.ua-sugerencias-sub { color: var(--ua-text-muted); margin-left: auto; font-size: 0.83rem; }

/* ───────────── Secciones / chips ───────────── */
.ua-seccion-titulo {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.005em;
  margin: 0; color: var(--ua-text);
}
.ua-seccion-sub {
  color: var(--ua-text-muted); font-size: 0.92rem; margin: 0.2rem 0 0;
}
.ua-sugeridos { padding: 1.5rem 0; border-top: 1px solid var(--ua-border); }
.ua-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.ua-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  font-size: 0.875rem; color: var(--ua-text);
  cursor: pointer; text-decoration: none;
}
.ua-chip:hover { border-color: var(--ua-primary); color: var(--ua-primary); }

/* ───────────── Explorar (centros) ───────────── */
.ua-explorar { padding: 1.75rem 0; border-top: 1px solid var(--ua-border); }
.ua-explorar-cabecera {
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}
.ua-explorar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem; margin-top: 1rem;
}
.ua-explorar-grid.is-large {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}
.ua-explorar-tarjeta {
  display: flex; align-items: center; gap: 0.75rem;
  text-align: left;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm);
  padding: 0.95rem 1rem; cursor: pointer;
  box-shadow: var(--ua-sombra);
  text-decoration: none; color: var(--ua-text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ua-explorar-tarjeta:hover,
.ua-explorar-tarjeta:focus,
.ua-explorar-tarjeta:active {
  /* Anula text-decoration/color rojo heredados de body a:hover en ua-min.css */
  text-decoration: none; color: var(--ua-text);
  border-color: var(--ua-primary); transform: translateY(-1px);
  box-shadow: var(--ua-sombra-lg);
  outline: none;
}
.ua-explorar-tarjeta:focus-visible {
  outline: 2px solid var(--ua-primary); outline-offset: 2px;
}
.ua-explorar-icono {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--ua-primary-50); color: var(--ua-primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.ua-explorar-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ua-explorar-titulo { font-weight: 600; color: var(--ua-text); font-size: 0.95rem; line-height: 1.25; }
.ua-explorar-meta { font-size: 0.8rem; color: var(--ua-text-muted); margin-top: 0.1rem; }
.ua-explorar-conteo {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ua-primary-700, var(--ua-primary));
    background: var(--ua-primary-50);
    border: 1px solid transparent;
    border-radius: 999px;
    width: max-content;
}
[data-tema="oscuro"] .ua-explorar-conteo {
    color: #d6e6fb;
    background: rgba(15, 108, 199, .22);
    border-color: rgba(15, 108, 199, .45);
}
@media (prefers-color-scheme: dark) {
    [data-tema="auto"] .ua-explorar-conteo {
        color: #d6e6fb;
        background: rgba(15, 108, 199, .22);
        border-color: rgba(15, 108, 199, .45);
    }
}
.ua-explorar-flecha { color: var(--ua-text-muted); flex-shrink: 0; }

/* ───────────── Colectivos ───────────── */
.ua-colectivos { padding: 1.75rem 0 0.5rem; border-top: 1px solid var(--ua-border); }
.ua-colectivos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem; margin-top: 1rem;
}
.ua-colectivos-tarjeta {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm); padding: 0.85rem 1rem;
  box-shadow: var(--ua-sombra);
}
.ua-colectivos-etiqueta {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem; border-radius: 4px; color: #fff; flex-shrink: 0;
}
.ua-colectivos-texto { font-size: 0.9rem; color: var(--ua-text-muted); line-height: 1.35; }

/* ───────────── Resultados ───────────── */
.ua-resultados-busqueda { margin-bottom: 1.5rem; }
.ua-resultados-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 0 0.5rem;
}
.ua-titulo-h1 {
  font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: -.01em;
  line-height: 1.3;
}
@media (min-width: 992px) {
  .ua-titulo-h1 { font-size: 1.5rem; }
}
.ua-atenuado { color: var(--ua-text-muted); font-weight: 500; }
.ua-consulta { color: var(--ua-primary); font-weight: 700; }
.ua-resultados-conteo strong { font-size: 1.1rem; color: var(--ua-primary); }

.ua-resultados-toolbar {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  padding: 0.65rem 0.85rem;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm);
  margin: 0.85rem 0 1rem;
}
.ua-toolbar-grupo { display: flex; align-items: center; gap: 0.4rem; }
.ua-toolbar-espacio { flex: 1; }
.ua-toolbar-etiqueta { font-size: 0.83rem; color: var(--ua-text-muted); margin-right: 0.25rem; }

.ua-pildora {
  background: var(--ua-text-muted) !important;
  border: 1px solid var(--ua-text-muted) !important;
  color: #fff !important;
  padding: 0.2rem 0.7rem; border-radius: 999px;
  font-size: 0.83rem; cursor: pointer; color: var(--ua-text);
  text-decoration: none;
}
/* La pildora es un control tipo boton: su forma ya indica interactividad,
   no necesita subrayado. Anula el subrayado/color rojo heredado de body a:hover
   (ua-min.css); el hover se senala con el cambio de borde. */
.ua-pildora:hover, .ua-pildora:focus {
  text-decoration: none;
  background: var(--ua-primary-700) !important;
  border-color: var(--ua-primary-700) !important;
  color: #fff !important;
}
/* Foco de teclado: anillo visible (mismo patron que .ua-pestana / .ua-busqueda-campo). */
.ua-pildora:focus-visible {
  outline: none;
  border-color: var(--ua-primary);
  box-shadow: 0 0 0 3px var(--ua-primary-50);
}
.ua-pildora.is-active {
  background: var(--ua-primary) !important;
  border-color: var(--ua-primary) !important;
  color: #fff !important;
}
.ua-pildora.is-active:hover, .ua-pildora.is-active:focus {
  background: var(--ua-primary-700) !important;
  border-color: var(--ua-primary-700) !important;
  color: #fff !important;
}

.ua-select {
  padding: 0.3rem 1.8rem 0.3rem 0.6rem;
  border: 1px solid var(--ua-border); background: var(--ua-card);
  border-radius: 4px; font-size: 0.85rem; color: var(--ua-text);
  font-family: inherit;
}

.ua-icono-btn {
  background: transparent; border: 1px solid var(--ua-border);
  padding: 0.3rem 0.5rem; border-radius: 4px; cursor: pointer;
  color: var(--ua-text-muted);
}
.ua-icono-btn.is-active {
  background: var(--ua-primary); border-color: var(--ua-primary); color: #fff;
}
.ua-icono-btn:hover { color: var(--ua-primary); }

.ua-resultados-lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ua-resultados-lista.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.ua-resultado-btn {
  display: flex; gap: 0.85rem; align-items: stretch;
  width: 100%; text-align: left;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm); padding: var(--ua-fila-pad);
  box-shadow: var(--ua-sombra); cursor: pointer;
  text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.ua-resultado-btn:hover,
.ua-resultado-btn:focus,
.ua-resultado-btn:active {
  /* Reset del hover/focus rojo heredado de body a:hover/:focus en ua-min.css */
  text-decoration: none; color: inherit; outline: none;
  border-color: var(--ua-primary); transform: translateY(-1px);
  box-shadow: var(--ua-sombra-lg);
}
.ua-resultado-btn:focus-visible {
  outline: 2px solid var(--ua-primary); outline-offset: 2px;
}

.ua-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-700) 100%);
  color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  display: grid; place-items: center; flex-shrink: 0;
}
.ua-avatar-unidad {
  background: linear-gradient(135deg, #6f7e8e 0%, #44505d 100%);
}
/* El avatar de cada persona adopta el color de fondo de su colectivo,
   para que circulo y badge se reconozcan como el mismo colectivo. */
.ua-avatar-PDI,
.ua-avatar-PTGDI    { background: var(--ua-pdi); }
.ua-avatar-PTGAS    { background: var(--ua-ptgas); }
.ua-avatar-ALU,
.ua-avatar-ALUMNO   { background: var(--ua-alu); }
.ua-avatar-OTR      { background: var(--ua-otr); }

.ua-resultado-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ua-resultado-nombre {
  display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
  font-weight: 600; color: var(--ua-text);
}
.ua-resultado-puesto { color: var(--ua-text-muted); font-size: 0.88rem; }
.ua-resultado-unidad {
  color: var(--ua-text); font-size: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.ua-resultado-meta {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  color: var(--ua-text-muted); font-size: 0.83rem; margin-top: 0.15rem;
}
.ua-resultado-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ua-resultado-flecha { color: var(--ua-text-muted); align-self: center; flex-shrink: 0; }

.ua-colectivo {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem; border-radius: 3px; color: #fff;
  text-transform: uppercase;
}
.ua-col-PDI    { background: var(--ua-pdi); }
.ua-col-PTGAS  { background: var(--ua-ptgas); }
.ua-col-PTGDI  { background: var(--ua-pdi); }
.ua-col-ALU    { background: var(--ua-alu); }
.ua-col-ALUMNO { background: var(--ua-alu); }
.ua-col-OTR    { background: var(--ua-otr); }

.ua-vacio {
  text-align: center; padding: 3rem 1rem;
  background: var(--ua-card); border: 1px dashed var(--ua-border);
  border-radius: var(--ua-radio);
}
.ua-vacio-icono { color: var(--ua-text-muted); margin-bottom: 0.85rem; }
.ua-vacio h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.ua-vacio p { color: var(--ua-text-muted); max-width: 50ch; margin: 0 auto; }

/* ───────────── Detalle (persona + unidad) ───────────── */
.ua-detalle { padding-top: 0.25rem; }
.ua-volver {
  background: 0; border: 0; color: var(--ua-link); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.9rem; padding: 0.4rem 0.6rem;
  margin-left: -0.6rem; margin-bottom: 0.5rem; border-radius: 4px;
  text-decoration: none;
}
.ua-volver:hover,
.ua-volver:focus,
.ua-volver:active {
  background: var(--ua-primary-50); color: var(--ua-primary-700);
  text-decoration: none; outline: none;
}
.ua-volver:focus-visible {
  outline: 2px solid var(--ua-primary); outline-offset: 2px;
}

.ua-persona-portada,
.ua-unidad-portada,
.ua-pagina-cabecera {
  display: flex; gap: 1.25rem; padding: 0.5rem 0 1.25rem;
  align-items: flex-start; flex-wrap: wrap;
}
.ua-pagina-cabecera { flex-direction: column; gap: 0; padding-bottom: 1rem; }

/* Da prioridad de ancho al bloque de nombre/colectivo: en pantallas medias
   evita que el nombre se parta en 4 lineas porque los botones le comen ancho.
   En <=720 los botones caen debajo (flex-wrap del padre). */
.ua-persona-portada .ua-persona-textos { flex: 1 1 22ch; min-width: min(22ch, 100%); }
.ua-persona-portada .ua-persona-acciones { flex: 0 1 auto; }

.ua-persona-avatar {
  width: 76px; height: 96px; border-radius: var(--ua-radio-sm);
  background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-700) 100%);
  color: #fff; font-weight: 700; font-size: 1.5rem;
  display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
}
.ua-persona-avatar-wrap { display: inline-block; line-height: 0; }
.ua-persona-avatar-wrap .ua-persona-avatar { display: block; }
.ua-unidad-icono {
  width: 60px; height: 60px; border-radius: 12px;
  background: var(--ua-primary-50); color: var(--ua-primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.ua-persona-textos { flex: 1; min-width: 0; }
.ua-persona-puesto { color: var(--ua-text-muted); margin: 0.2rem 0 0.5rem; font-size: 1rem; }

/* Indicador de comisión de servicio junto al puesto (PTGAS, IDFORMASELECCION = PE).
   Paleta accesible: marrón oscuro sobre crema (#7a4a00 sobre #fdecc8 ~ 7.4:1, AAA). */
.ua-comision-servicio {
  background: #fdecc8 !important;
  border: 1px solid #c79a4a !important;
  color: #7a4a00 !important;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 4px;
  display: inline-flex; gap: 0.3rem; align-items: center;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
}
.ua-comision-servicio i { font-size: 0.85em; color: #7a4a00 !important; }
[data-tema="oscuro"] .ua-comision-servicio {
  background: #3b2a10 !important; color: #f5c97a !important; border-color: #7a5b1a !important;
}
[data-tema="oscuro"] .ua-comision-servicio i { color: #f5c97a !important; }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .ua-comision-servicio {
    background: #3b2a10 !important; color: #f5c97a !important; border-color: #7a5b1a !important;
  }
  [data-tema="auto"] .ua-comision-servicio i { color: #f5c97a !important; }
}
.ua-persona-etiquetas { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

.ua-etiqueta-cargo {
  background: var(--ua-primary-50) !important;
  border: 1px solid var(--ua-border) !important;
  color: var(--ua-primary-700, var(--ua-primary)) !important;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 4px;
  display: inline-flex; gap: 0.3rem; align-items: center;
}
.ua-etiqueta-cargo i { color: var(--ua-primary) !important; }
[data-tema="oscuro"] .ua-etiqueta-cargo {
  background: rgba(15,108,199,.18) !important; color: #cfe0fb !important; border-color: rgba(15,108,199,.4) !important;
}
[data-tema="oscuro"] .ua-etiqueta-cargo i { color: #cfe0fb !important; }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .ua-etiqueta-cargo {
    background: rgba(15,108,199,.18) !important; color: #cfe0fb !important; border-color: rgba(15,108,199,.4) !important;
  }
  [data-tema="auto"] .ua-etiqueta-cargo i { color: #cfe0fb !important; }
}

.ua-etiqueta-unidad {
  background: var(--ua-card); border: 1px solid var(--ua-border);
  color: var(--ua-link); font-size: 0.83rem;
  padding: 0.2rem 0.55rem; border-radius: 4px;
  display: inline-flex; gap: 0.3rem; align-items: center;
  text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
a.ua-etiqueta-unidad { cursor: pointer; }
a.ua-etiqueta-unidad:hover,
a.ua-etiqueta-unidad:focus {
  border-color: var(--ua-primary);
  background: var(--ua-primary-50);
  color: var(--ua-primary-700, var(--ua-primary));
  text-decoration: none; outline: none;
}
a.ua-etiqueta-unidad:focus-visible {
  outline: 2px solid var(--ua-primary); outline-offset: 2px;
}
/* Variante no-link: no parece pulsable */
.ua-etiqueta-unidad--no-link {
  cursor: default; color: var(--ua-text-muted);
}

.ua-persona-acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; align-content: flex-start; }
/* En movil: alinear los botones en una sola fila horizontal en lugar de
   apilarse. Acciones secundarias se compactan a "solo icono" si no caben. */
@media (max-width: 600px) {
  .ua-persona-acciones { width: 100%; }
  .ua-persona-acciones .ua-btn-primario { flex: 1 1 auto; justify-content: center; }
  .ua-persona-acciones .ua-btn-secundario { flex: 0 0 auto; }
}

.ua-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  color: var(--ua-text); padding: 0.55rem 0.95rem;
  border-radius: var(--ua-radio-sm); cursor: pointer;
  font-weight: 500; font-size: 0.9rem; text-decoration: none;
}
.ua-btn:hover { border-color: var(--ua-primary); color: var(--ua-primary); }
/* !important obligatorio: plantilla24 trae reglas que pintan <a> y <button>
   con el color del body (#3E3E3E), ganando en cascada a nuestra clase. */
a.ua-btn-primario,
button.ua-btn-primario,
.ua-btn.ua-btn-primario {
  background: var(--ua-primary) !important;
  border-color: var(--ua-primary) !important;
  color: #fff !important;
}
a.ua-btn-primario:hover,
a.ua-btn-primario:focus,
a.ua-btn-primario:visited,
button.ua-btn-primario:hover,
button.ua-btn-primario:focus,
.ua-btn.ua-btn-primario:hover,
.ua-btn.ua-btn-primario:focus {
  background: var(--ua-primary-700) !important;
  border-color: var(--ua-primary-700) !important;
  color: #fff !important;
}
a.ua-btn-primario i,
a.ua-btn-primario span,
button.ua-btn-primario i,
button.ua-btn-primario span,
.ua-btn.ua-btn-primario i,
.ua-btn.ua-btn-primario span { color: #fff !important; }

a.ua-btn-exito,
button.ua-btn-exito,
.ua-btn.ua-btn-exito {
  background: var(--ua-success) !important;
  border-color: var(--ua-success) !important;
  color: #fff !important;
}
a.ua-btn-exito:hover,
a.ua-btn-exito:focus,
button.ua-btn-exito:hover,
button.ua-btn-exito:focus,
.ua-btn.ua-btn-exito:hover,
.ua-btn.ua-btn-exito:focus {
  background: var(--ua-success-700) !important;
  border-color: var(--ua-success-700) !important;
  color: #fff !important;
}

/* Boton secundario: outline azul sobre fondo claro. Pesa menos que el primario
   pero conserva afordancia. Usado para acciones de menor jerarquia
   (copiar email, descargar vCard, etc). */
a.ua-btn-secundario,
button.ua-btn-secundario,
.ua-btn.ua-btn-secundario {
  background: var(--ua-card) !important;
  border-color: var(--ua-primary) !important;
  color: var(--ua-primary) !important;
}
a.ua-btn-secundario:hover,
a.ua-btn-secundario:focus,
a.ua-btn-secundario:visited,
button.ua-btn-secundario:hover,
button.ua-btn-secundario:focus,
.ua-btn.ua-btn-secundario:hover,
.ua-btn.ua-btn-secundario:focus {
  background: var(--ua-primary-50) !important;
  border-color: var(--ua-primary-700) !important;
  color: var(--ua-primary-700) !important;
}
a.ua-btn-secundario i,
a.ua-btn-secundario span,
button.ua-btn-secundario i,
button.ua-btn-secundario span,
.ua-btn.ua-btn-secundario i,
.ua-btn.ua-btn-secundario span { color: inherit !important; }

/* ───────────── Tarjetas (info cards) ───────────── */
.ua-tarjetas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 0.85rem; margin-top: 0.5rem;
}
.ua-tarjeta {
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm);
  box-shadow: var(--ua-sombra); overflow: hidden;
}
.ua-tarjeta-ancha { grid-column: 1 / -1; }
.ua-tarjeta-cabecera {
  background: var(--ua-card-head); border-bottom: 1px solid var(--ua-border);
  padding: 0.7rem 1rem;
}
.ua-tarjeta-titulo {
  font-size: 1rem; font-weight: 600; margin: 0; color: var(--ua-text);
  display: flex; align-items: center; gap: 0.5rem;
}
.ua-tarjeta-cabecera--acento { background: var(--ua-primary); color: #fff; }
.ua-tarjeta-cabecera--acento .ua-tarjeta-titulo { color: #fff; }
.ua-tarjeta-cabecera--exito { background: var(--ua-success); color: #fff; }
.ua-tarjeta-cabecera--exito .ua-tarjeta-titulo { color: #fff; }
.ua-tarjeta-cuerpo { padding: 0.85rem 1rem; }
.ua-tarjeta-cuerpo dl { margin: 0; }

.ua-def-fila {
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: 0.6rem; padding: 0.45rem 0;
}
.ua-def-fila + .ua-def-fila { border-top: 1px solid #eef0f3; }
[data-tema="oscuro"] .ua-def-fila + .ua-def-fila { border-top-color: #2a3441; }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .ua-def-fila + .ua-def-fila { border-top-color: #2a3441; }
}
.ua-def-etiqueta { font-weight: 600; color: var(--ua-text); margin: 0; }
.ua-def-valor { color: var(--ua-text); margin: 0; word-break: break-word; }

/* Marcador "campo requerido" usado por los formularios Vue (Configuracion). */
.required::after {
    content: "*";
    font-weight: bold; font-size: 14px;
    vertical-align: top; color: #d00;
    position: relative; left: 2px; top: -3px;
}

/* Global: los enlaces no se subrayan al pasar el raton. El subrayado al hover
   solo tiene sentido en enlaces dentro de texto corrido; esos usan .ua-enlace,
   que por mayor especificidad (0,2,0 > 0,1,2) conserva su subrayado deliberado.
   Esta regla anula el subrayado heredado de "body a:hover/:active" de ua-min.css.
   El foco de teclado (a:focus) no se toca: mantiene su indicador de visibilidad. */
body a:hover,
body a:active {
  text-decoration: none;
}
/* Tampoco el color rojo (#d30) que ua-min.css aplica al estado interactivo:
   los enlaces mantienen su color de enlace (los componentes con clase propia
   siguen ganando por especificidad y conservan su color). */
body a:hover,
body a:active,
body a:focus {
  color: var(--ua-link-hover);
}

/* Hipervinculos: WCAG 2.2 — el subrayado es permanente (no solo en hover)
   para que se distingan del texto plano sin depender unicamente del color.
   El color cumple contraste >= 4.5:1 sobre el fondo. */
.ua-enlace {
  color: var(--ua-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}
.ua-enlace:visited { color: var(--ua-link); }
.ua-enlace:hover,
.ua-enlace:focus {
  color: var(--ua-link-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  outline: none;
}
.ua-enlace:focus-visible { outline: 2px solid var(--ua-primary); outline-offset: 2px; border-radius: 2px; }
.ua-enlace-btn { background: 0; border: 0; padding: 0; cursor: pointer; font: inherit; }
.ua-mono { font-family: ui-monospace, monospace; font-size: 0.85em; color: var(--ua-text-muted); }
.ua-telefonos { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ua-direccion { font-style: normal; line-height: 1.55; color: var(--ua-text); margin: 0; }

.ua-subunidades-lista,
.ua-personal-lista { list-style: none; margin: 0; padding: 0; }
.ua-subunidades-lista li + li,
.ua-personal-lista li + li { border-top: 1px solid #eef0f3; }
[data-tema="oscuro"] .ua-subunidades-lista li + li,
[data-tema="oscuro"] .ua-personal-lista li + li { border-top-color: #2a3441; }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .ua-subunidades-lista li + li,
  [data-tema="auto"] .ua-personal-lista li + li { border-top-color: #2a3441; }
}
.ua-subunidad-btn,
.ua-personal-btn {
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%; text-align: left; background: 0; border: 0;
  padding: 0.65rem 0.5rem; cursor: pointer;
  color: var(--ua-link); font-size: 0.92rem; font-family: inherit;
  text-decoration: none;
}
.ua-personal-btn { color: var(--ua-text); }
.ua-subunidad-btn:hover,
.ua-personal-btn:hover { background: var(--ua-primary-50); color: var(--ua-primary-700); }
.ua-personal-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.1rem; }
.ua-personal-nombre { font-weight: 600; color: var(--ua-text); }
.ua-personal-puesto { font-size: 0.83rem; color: var(--ua-text-muted); }

/* ───────────── Configuración (visibilidad X500) ───────────── */
.ua-config-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm) var(--ua-radio-sm) 0 0;
  border-bottom: 0; font-size: 0.92rem;
}
.ua-config-banner small { color: var(--ua-text-muted); }

.ua-visibilidad-bloque {
  background: var(--ua-card); border: 1px solid var(--ua-border);
}
.ua-visibilidad-bloque + .ua-visibilidad-bloque { border-top: 0; }

.ua-visibilidad-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--ua-card-head); border-bottom: 1px solid var(--ua-border);
}
.ua-visibilidad-cabecera h3 {
  margin: 0; font-size: 1rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem;
}
.ua-visibilidad-interna { color: var(--ua-primary); }
.ua-visibilidad-externa { color: var(--ua-success); }

.ua-visibilidad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 360px;
  gap: 1.5rem; padding: 1.25rem;
}
@media (max-width: 992px) {
  .ua-visibilidad-grid { grid-template-columns: 1fr 1fr; }
  .ua-visibilidad-preview { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ua-visibilidad-grid { grid-template-columns: 1fr; }
}

.ua-visibilidad-conmutadores {
  display: flex; flex-direction: column; gap: 0.65rem;
}
.ua-visibilidad-fila {
  display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem;
}
.ua-visibilidad-fila label { user-select: none; cursor: pointer; }

/* Conmutador accesible (role="switch") */
.ua-conmutador {
  position: relative; display: inline-block;
  width: 38px; height: 22px;
  background: #cdd2d8; border: 0; border-radius: 999px;
  padding: 0; transition: background .15s;
  cursor: pointer; flex-shrink: 0;
}
.ua-conmutador::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ua-conmutador[aria-checked="true"] { background: var(--ua-primary); }
.ua-conmutador[aria-checked="true"]::after { transform: translateX(16px); }
.ua-conmutador--verde[aria-checked="true"] { background: var(--ua-success); }

.ua-visibilidad-masivo {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--ua-text-muted);
}
.ua-visibilidad-masivo .ua-conmutador { transform: scale(0.85); }

.ua-visibilidad-preview {
  background: var(--ua-card); border: 1px solid var(--ua-border);
  border-radius: var(--ua-radio-sm); overflow: hidden;
}
.ua-visibilidad-preview-cabecera {
  background: var(--ua-primary); color: #fff;
  padding: 0.55rem 0.85rem; font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem;
}
.ua-visibilidad-preview-cabecera--ext { background: var(--ua-success); }
.ua-visibilidad-preview-cuerpo {
  padding: 1rem; font-size: 0.9rem; line-height: 1.55;
}
.ua-visibilidad-preview-cuerpo .ua-persona-thumb {
  width: 62px; height: 62px;
  background: #6c757d; border-radius: 50%;
  margin: 0 auto 0.6rem;
  display: grid; place-items: center; color: #fff;
}
.ua-visibilidad-preview-cuerpo strong {
  display: block; text-align: center; margin-bottom: 0.5rem;
}
.ua-visibilidad-preview-linea {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.15rem 0; color: var(--ua-text);
}
.ua-visibilidad-preview-linea.is-atenuada { color: var(--ua-text-muted); }

.ua-visibilidad-info,
.ua-aviso-info {
  background: var(--ua-info-bg); border: 1px solid var(--ua-info-border);
  color: var(--ua-info-text);
  padding: 0.85rem 1rem; border-radius: var(--ua-radio-sm); font-size: 0.9rem;
  display: flex; align-items: flex-start; gap: 0.65rem;
}
.ua-aviso-info > .bi { flex-shrink: 0; margin-top: 0.15rem; }
.ua-visibilidad-acciones {
  display: flex; justify-content: flex-end;
  padding: 0.85rem 1rem;
  background: var(--ua-card-head);
  border: 1px solid var(--ua-border); border-top: 0;
  border-radius: 0 0 var(--ua-radio-sm) var(--ua-radio-sm);
}

/* ───────────── Formularios ───────────── */
.ua-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 768px) {
  .ua-form-grid { grid-template-columns: 1fr; }
}
.ua-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) {
  .ua-form-grid--4 { grid-template-columns: 1fr 1fr; }
}
.ua-form-grupo label {
  font-weight: 600; font-size: 0.88rem;
  margin-bottom: 0.3rem; display: block;
}
.ua-form-grupo input {
  width: 100%; padding: 0.5rem 0.7rem;
  border: 1px solid var(--ua-border); border-radius: 4px;
  background: var(--ua-card); color: var(--ua-text);
  font-family: inherit; font-size: 0.95rem;
}
.ua-form-grupo input:focus {
  outline: none; border-color: var(--ua-primary);
  box-shadow: 0 0 0 3px var(--ua-primary-50);
}
.ua-form-grupo small {
  color: var(--ua-text-muted); display: block;
  margin-top: 0.25rem; font-size: 0.8rem;
}

/* ───────────── Aviso flotante (toast) ───────────── */
.ua-aviso {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1f2733; color: #fff;
  padding: 0.65rem 1rem; border-radius: var(--ua-radio-sm);
  font-size: 0.9rem; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 200;
}
.ua-aviso.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ───────────── Botón de tema (franja 1) ───────────── */
.ua-btn-tema {
  background: transparent; border: 0; padding: 0.2rem 0.4rem;
  color: inherit; cursor: pointer; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.9rem;
}
.ua-btn-tema:hover { background: rgba(0,0,0,.08); }
[data-tema="oscuro"] .ua-btn-tema:hover { background: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .ua-btn-tema:hover { background: rgba(255,255,255,.08); }
}

/* ───────────── Accesibilidad: prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  .ua-resultado-btn,
  .ua-explorar-tarjeta,
  .ua-aviso,
  .ua-conmutador,
  .ua-conmutador::after { transition: none !important; }
  .ua-resultado-btn:hover,
  .ua-explorar-tarjeta:hover { transform: none !important; }
}

/* Iconos Bootstrap convivencia */
.ua-pagina .bi { display: inline-block; vertical-align: -0.125em; }

/* Truncar a 2 líneas */
.ua-text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}