/* Fuentes UNAL ahora servidas desde app/static/unal/assets/fonts */
/* Rutas relativas desde este CSS (app/static/css) hacia ../unal/assets/fonts */

@font-face {
  font-family: 'Ancizar Sans';
  src: url('../unal/assets/fonts/ancizar_sans-regular-webfont.woff2') format('woff2'),
       url('../unal/assets/fonts/ancizar_sans-regular-webfont.woff') format('woff'),
       url('../unal/assets/fonts/ancizar_sans-regular-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ancizar Sans';
  src: url('../unal/assets/fonts/ancizar_sans-italic-webfont.woff2') format('woff2'),
       url('../unal/assets/fonts/ancizar_sans-italic-webfont.woff') format('woff'),
       url('../unal/assets/fonts/ancizar_sans-italic-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ancizar Sans';
  src: url('../unal/assets/fonts/ancizar_sans-bold-webfont.woff2') format('woff2'),
       url('../unal/assets/fonts/ancizar_sans-bold-webfont.woff') format('woff'),
       url('../unal/assets/fonts/ancizar_sans-bold-webfont.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ancizar Sans';
  src: url('../unal/assets/fonts/ancizar_sans-black-webfont.woff2') format('woff2'),
       url('../unal/assets/fonts/ancizar_sans-black-webfont.woff') format('woff'),
       url('../unal/assets/fonts/ancizar_sans-black-webfont.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color primario más oscuro para componentes */
  --primary-700: #0b3a6e; /* azul oscuro */
  --primary-800: #092d55;
  --primary-900: #072443;
  --primary-ring: rgba(11, 58, 110, 0.35);
}

/* Aplicar la fuente globalmente */
html, body {
  font-family: 'Ancizar Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ancizar Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
}

/* Oscurecer componentes comunes sin reconstruir Tailwind: */
/* Navbars con fondos azul */
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.dark\:bg-gray-900 {
  background-color: var(--primary-800) !important;
}

/* Estados hover para botones/enlaces con fondo azul */
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover,
.hover\:bg-blue-900:hover {
  background-color: var(--primary-900) !important;
}

/* Botones "primarios" generados por utilidades */
.text-white.bg-blue-800,
.text-white.bg-blue-700,
.text-white.bg-blue-600,
.bg-blue-800 {
  background-color: var(--primary-800) !important;
}

/* Bordes y anillos de enfoque en azul más oscuro */
.focus\:ring-blue-300:focus,
.focus\:ring-blue-400:focus,
.focus\:ring-blue-500:focus,
.dark\:focus\:ring-gray-600:focus {
  box-shadow: 0 0 0 4px var(--primary-ring) !important;
}

/* Enlaces azules: usar un tono más oscuro
.text-blue-600,
.hover\:text-blue-800:hover,
.md\:dark\:hover\:text-blue-500:hover {
  color: var(--primary-700) !important;
}*/

/* Bordes azules más oscuros en menús */
.border-blue-800,
.border-blue-700 {
  border-color: var(--primary-800) !important;
}

/* Badges/píldoras con tonos claros permanecen legibles */
.text-blue-200 { color: #cfe1fb !important; }

/* Dropdown avatar de usuario */
.bg-blue-800.rounded-full,
.bg-blue-800 { background-color: var(--primary-800) !important; }

/* ==============================
   Proteger encabezado UNAL del preflight de Tailwind
   Hacer visibles los enlaces del menú superior (firstMenu)
   sin afectar otros componentes como 'Servicios' con fondo claro.
   ============================== */
.unal-scope .firstMenu a {
  color: #ffffff !important;
  text-decoration: none;
}
.unal-scope .firstMenu a:hover,
.unal-scope .firstMenu a:focus {
  color: #e5e7eb !important; /* gris claro para hover */
  text-decoration: none;
}
/* Mantener los items del listado en línea con el diseño UNAL */
.unal-scope .firstMenu #profiles ul li {
  display: inline-block;
}


/* Asegurar visibilidad del nav de perfiles (solicitud específica) */
.unal-scope .firstMenu nav#profiles,
.unal-scope .firstMenu nav#profile {
  visibility: visible !important;
}


/* Mobile UNAL navbar collapse visibility fix (scoped) */
.navbar.main_menu .collapse.in {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}

/* Flowbite override: ensure collapsed components are not hidden via visibility */
/* Flowbite v2 sets .collapse { visibility: collapse; } which can hide content
   even when the component toggles display/height. We neutralize that globally.
   Note: Bootstrap's collapse uses display/height; this does not interfere. */
.collapse {
  visibility: visible !important;
}


/* Título de la tarjeta de vista (/tableau/).
   Desde que se quitó el botón "Ver", el título es el enlace al tablero: la
   miniatura de encima es un duplicado decorativo (aria-hidden), así que este
   es el único enlace alcanzable con el teclado y necesita estados visibles.
   Los estados van aquí y no como clases 'hover:'/'focus:' de Tailwind porque
   la hoja compilada está purgada y no las incluye. */
.titulo-tarjeta-vista {
  color: #1f2937;
  text-decoration: none;
}

.titulo-tarjeta-vista:hover,
.titulo-tarjeta-vista:focus {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Bloque de texto de la tarjeta de vista, bajo la miniatura.
   Espaciado compacto: la miniatura ya da presencia a la tarjeta y el texto
   solo acompaña. Los márgenes de los hijos se fijan aquí de forma explícita
   para que las hojas de UNAL/Bootstrap no añadan separación por su cuenta. */
.cuerpo-tarjeta-vista {
  padding: 0.625rem 0.75rem 0.75rem;
}

.cuerpo-tarjeta-vista h4 {
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.cuerpo-tarjeta-vista p {
  margin: 0.25rem 0 0;
  line-height: 1.35;
}

.cuerpo-tarjeta-vista .vigencia-tarjeta-vista {
  margin-top: 0.375rem;
}

/* Rejilla de tarjetas de vista.
   En lugar de un número fijo de columnas por punto de ruptura (que en pantallas
   anchas estiraba tres tarjetas hasta ocupar toda la fila), cada columna mide
   entre 15rem y 20rem y caben tantas como permita el ancho: en un monitor
   ancho aparecen más columnas y en un móvil queda una. Como el máximo es
   fijo, el sobrante de la fila queda a la derecha en vez de ensanchar las
   tarjetas. `min(100%, 15rem)` evita el desbordamiento horizontal en pantallas
   más estrechas que una tarjeta. */
.rejilla-tarjetas-vista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 20rem));
  gap: 1rem;
  justify-content: start;
}

/* La miniatura escala con la tarjeta manteniendo la proporción, y se recorta
   por abajo porque la parte superior de un tablero es la que lo identifica. */
.miniatura-tarjeta-vista {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* Descripción de la tarjeta: como mucho tres líneas, con puntos suspensivos.
   Así todas las tarjetas de una fila tienen una altura parecida aunque una
   descripción llegue a los 512 caracteres. `overflow-wrap: anywhere` evita que
   una URL o palabra muy larga rompa el ancho de la tarjeta. */
.cuerpo-tarjeta-vista .descripcion-tarjeta-vista {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Botón "Continuar con Google" de la pantalla de inicio de sesión.
   Blanco con borde gris y logotipo a color, como piden las pautas de marca de
   Google. Va aquí y no con clases de Tailwind para no depender de que la hoja
   compilada las incluya. */
.boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background-color: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 0.5rem;
  color: #3c4043;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.boton-google:hover {
  background-color: #f8faff;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25);
  color: #3c4043;
  text-decoration: none;
}

.boton-google:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.boton-google__logo {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.texto-ayuda-google {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
  text-align: center;
}

.separador-login {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: #9ca3af;
  font-size: 0.8125rem;
}

.separador-login::before,
.separador-login::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #e5e7eb;
}

/* ===========================================================================
   Salud de las vistas: tableros que Tableau ya no encuentra.
   =========================================================================== */

/* Aviso en la barra superior para quien debe arreglar vistas rotas. */
.aviso-vistas-rotas {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.75rem;
  border-radius: 9999px;
  color: #fde68a;
  text-decoration: none;
}

.aviso-vistas-rotas:hover,
.aviso-vistas-rotas:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fef3c7;
  text-decoration: none;
}

.aviso-vistas-rotas__icono {
  width: 1.5rem;
  height: 1.5rem;
}

.aviso-vistas-rotas__contador {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* Insignia en la tarjeta de la portada. */
.insignia-no-disponible {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background-color: #fee2e2;
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Mensaje que sustituye al tablero. */
.aviso-vista-no-disponible {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid #fca5a5;
  border-radius: 0.5rem;
  background-color: #fef2f2;
  color: #7f1d1d;
}

.aviso-vista-no-disponible.hidden {
  display: none;
}

.aviso-vista-no-disponible__icono {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: #dc2626;
}

.aviso-vista-no-disponible__titulo {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.aviso-vista-no-disponible p {
  margin: 0;
  line-height: 1.5;
}

.detalle-vista-no-disponible {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #f9fafb;
}

.detalle-vista-no-disponible h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
}

.detalle-vista-no-disponible dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.detalle-vista-no-disponible dt {
  font-weight: 600;
  color: #4b5563;
}

.detalle-vista-no-disponible dd {
  margin: 0;
  color: #111827;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .detalle-vista-no-disponible dl {
    grid-template-columns: 1fr;
  }
  .detalle-vista-no-disponible dd {
    margin-bottom: 0.5rem;
  }
}

.acciones-vista-no-disponible {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.acciones-vista-no-disponible form {
  margin: 0;
}

.boton-accion-salud {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.boton-accion-salud:hover {
  background-color: #f3f4f6;
  color: #111827;
  text-decoration: none;
}

.boton-accion-salud--principal {
  border-color: #1d4ed8;
  background-color: #1d4ed8;
  color: #ffffff;
}

.boton-accion-salud--principal:hover {
  background-color: #1e40af;
  color: #ffffff;
}

/* Panel de vistas con problemas. */
.tabla-salud {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.tabla-salud table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabla-salud th {
  padding: 0.6rem 0.75rem;
  background-color: #f3f4f6;
  color: #374151;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.tabla-salud td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid #e5e7eb;
  vertical-align: top;
}

.tabla-salud__secundario {
  color: #6b7280;
  font-size: 0.8rem;
}

.tabla-salud__url {
  margin-top: 0.2rem;
  color: #6b7280;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.tabla-salud__motivo {
  min-width: 14rem;
  color: #4b5563;
  overflow-wrap: anywhere;
}

.tabla-salud__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tabla-salud__acciones form {
  margin: 0;
}

.salud-sin-problemas {
  padding: 1rem 1.25rem;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  background-color: #f0fdf4;
  color: #166534;
}

/* Mensajes flash de las páginas nuevas. */
.mensaje-flash {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: 0.375rem;
  font-size: 0.9rem;
}

.mensaje-flash--success { background-color: #f0fdf4; border-color: #86efac; color: #166534; }
.mensaje-flash--danger  { background-color: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.mensaje-flash--warning { background-color: #fffbeb; border-color: #fcd34d; color: #92400e; }
.mensaje-flash--info    { background-color: #eff6ff; border-color: #93c5fd; color: #1e40af; }

/* ===========================================================================
   Tablero insertado en otros sitios (/tableau/<id>/embed) y botón Compartir.
   =========================================================================== */

.cuerpo-embebido {
  margin: 0;
  background-color: #ffffff;
}

.aviso-embebido {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 1.5rem;
  text-align: center;
  color: #1f2937;
  background-color: #f9fafb;
}

.aviso-embebido__marca {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.aviso-embebido__icono {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  color: #6b7280;
}

.aviso-embebido__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.aviso-embebido__texto {
  max-width: 28rem;
  margin: 0 0 1.25rem;
  line-height: 1.5;
  color: #4b5563;
}

.aviso-embebido__boton {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border: 1px solid #1d4ed8;
  border-radius: 0.5rem;
  background-color: #1d4ed8;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.aviso-embebido__boton:hover {
  background-color: #1e40af;
  color: #ffffff;
  text-decoration: none;
}

.aviso-embebido__boton--secundario {
  background-color: #ffffff;
  color: #1d4ed8;
}

.aviso-embebido__boton--secundario:hover {
  background-color: #eff6ff;
  color: #1e40af;
}

.aviso-embebido__nota {
  max-width: 28rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4b5563;
}

.aviso-embebido__enlace {
  padding: 0;
  border: 0;
  background: none;
  color: #1d4ed8;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

[hidden].aviso-embebido__boton,
[hidden].aviso-embebido__nota {
  display: none;
}

/* Botón Compartir de la página del tablero. */
.boton-compartir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #1d4ed8;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #1d4ed8;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.boton-compartir:hover {
  background-color: #eff6ff;
}

/* Diálogo Compartir. */
.dialogo-compartir {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(17, 24, 39, 0.55);
}

.dialogo-compartir[hidden] {
  display: none;
}

.dialogo-compartir__panel {
  width: 100%;
  max-width: 40rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.dialogo-compartir__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dialogo-compartir__cabecera h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
}

.dialogo-compartir__cerrar {
  border: 0;
  background: none;
  color: #6b7280;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.dialogo-compartir__etiqueta {
  display: block;
  margin: 0.75rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
}

.dialogo-compartir__fila {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dialogo-compartir__fila input[type="text"],
.dialogo-compartir textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #f9fafb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: #111827;
}

.dialogo-compartir textarea {
  resize: vertical;
}

.dialogo-compartir__fila--opciones {
  justify-content: flex-end;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #374151;
}

.dialogo-compartir__fila--opciones input[type="number"] {
  width: 6rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

.dialogo-compartir__nota {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.375rem;
  background-color: #eff6ff;
  color: #1e3a8a;
  font-size: 0.85rem;
  line-height: 1.45;
}

.dialogo-compartir__copiado {
  min-height: 1.2rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #166534;
}


/* ===========================================================================
   Página del tablero: iconos de la barra de acciones y contenedor del código
   embebido. Aquí y no en Tailwind, para no depender de qué clases incluya la
   compilación del CSS.
   =========================================================================== */

.icono-boton-tablero {
  display: inline-block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-right: 0.35rem;
  vertical-align: -0.15em;
}

.contenedor-embebido-html,
.contenedor-embebido-html__marco,
#embedHtmlContainer {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Centra el tablero cuando es más angosto que el contenedor (p. ej. 950 px). */
#embedHtmlContainer .tableauPlaceholder > object,
#embedHtmlContainer .tableauPlaceholder > iframe {
  margin-left: auto;
  margin-right: auto;
}