/* Estilos personalizados */

/* Logo del sidebar: solo el ícono, sin texto al lado. El PNG ya trae
   transparencia real; el "fondo blanco" que se veía era la sombra
   (.shadow de Bootstrap) dibujando un rectángulo detrás del ícono. */
.app-sidebar .sidebar-brand .brand-image {
  max-height: none;
  height: 2.6rem;
  width: auto;
  object-fit: contain;
  background: transparent;
}

/* Buscador del sidebar ("Filtrar menú…"), igual que en la demo de AdminLTE 4;
   esta versión del framework en el proyecto no trae ya esta clase. Usa las
   mismas variables de Bootstrap que el resto del sidebar para heredar el
   tema claro/oscuro automáticamente. */
.sidebar-search {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  --lte-search-field-bg: rgba(var(--bs-emphasis-color-rgb), 0.06);
  --lte-search-field-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.09);
  --lte-search-field-focus-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --lte-search-field-border-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --lte-search-field-focus-border-color: rgba(var(--bs-emphasis-color-rgb), 0.35);
  --lte-search-field-focus-ring: 0 0 0 0.2rem rgba(var(--bs-emphasis-color-rgb), 0.12);
}
.sidebar-search .form-control {
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--lte-search-field-bg);
  border-color: var(--lte-search-field-border-color);
  box-shadow: none;
  border-radius: 50rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.sidebar-search .form-control:hover {
  background-color: var(--lte-search-field-hover-bg);
}
.sidebar-search .form-control:focus {
  background-color: var(--lte-search-field-focus-bg);
  border-color: var(--lte-search-field-focus-border-color);
  box-shadow: var(--lte-search-field-focus-ring);
}

/* AdminLTE calcula el alto de .sidebar-wrapper como "100vh - alto del brand",
   sin contar el buscador de arriba (.sidebar-search es propio de este
   proyecto, no viene en esta versión del framework) — con todos los
   submenús abiertos, el wrapper terminaba más alto de lo que cabe y el
   último ítem (Configuración) quedaba fuera de la pantalla sin scroll real.
   Se convierte .app-sidebar en columna flex: el buscador conserva su alto
   fijo (flex: 0 0 auto, ya declarado arriba) y .sidebar-wrapper ocupa el
   resto del espacio disponible (min-height:0 es necesario para que un hijo
   flex pueda encogerse y disparar su propio scroll en vez de desbordarse). */
.app-sidebar {
  display: flex;
  flex-direction: column;
}
/* !important: AdminLTE fija este "height" con calc() en varios selectores
   por breakpoint (.sidebar-expand-sm/md/lg/xl/xxl, con y sin layout-fixed);
   iguala su especificidad de a uno es fragil, así que se sobreescribe directo. */
.sidebar-wrapper {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
}

/* Botón de mostrar/ocultar contraseña incorporado dentro del input (mismo
   look del login: sin caja de input-group aparte). El contenedor necesita
   position:relative (.form-floating ya lo trae por defecto de Bootstrap) y
   el input necesita padding-right extra para no tapar el texto con el botón. */
.password-toggle-inline {
  position: absolute;
  top: 0;
  right: 2px;
  height: 100%;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--bs-secondary-color);
  padding: 0 10px;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  transition: color 0.2s ease;
}
.password-toggle-inline:hover {
  color: var(--bs-primary);
}
.form-control.con-toggle-inline {
  padding-right: 2.75rem;
}

/* ─── Avatar del usuario en el navbar (views/templates/navbar.php) ─────── */
/* Aro blanco definido alrededor de la foto, igual en los dos tamaños que usa
   el navbar (32px en la barra, 90px en el encabezado del menú desplegable).
   Blanco fijo (no una variable de tema): es un marco sobre la foto, no un
   borde que deba camuflarse con el fondo del navbar. */
.navbar-avatar {
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* AdminLTE fija ".user-menu > .dropdown-menu" en 280px (pensado para el
   encabezado con foto de 90px que este menú ya no tiene — ver navbar.php,
   ahora solo trae "Mi perfil"/"Cerrar sesión"). Sin esto queda ancho de más,
   vacío a la derecha del texto. Es el único ".user-menu" del proyecto. */
.navbar-nav > .user-menu > .dropdown-menu {
  width: auto;
  min-width: 11rem;
}

/* ─── "Mi perfil" (views/usuarios/perfil.php) ──────────────────────────── */
.perfil-avatar-edit {
  position: relative;
  width: 130px;
  height: 130px;
}

.perfil-avatar-img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 22px;
  border: 4px solid var(--bs-body-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  background: var(--bs-body-bg);
}

.perfil-avatar-camera {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary);
  color: #fff;
  border-radius: 50%;
  border: 2px solid var(--bs-body-bg);
  cursor: pointer;
  font-size: 0.8rem;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.perfil-avatar-camera:hover {
  background: var(--bs-primary-text-emphasis, #0a58ca);
  transform: scale(1.08);
}

.perfil-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 575.98px) {
  .perfil-info-grid {
    grid-template-columns: 1fr;
  }
}

.perfil-info-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  background: var(--bs-tertiary-bg);
}

.perfil-info-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.12));
  color: var(--bs-primary);
  font-size: 0.9rem;
}

.perfil-info-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color);
  line-height: 1.2;
}

.perfil-info-valor {
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
}

/* Login page */
.login-box .card {
  border-radius: 0.5rem;
}

/* Sidebar user panel */
.sidebar-user {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Sidebar: ahora tiene el mismo fondo blanco que el contenido (bg-body), así
   que se necesita una sombra propia en el borde derecho para que se note la
   división entre el sidebar y el resto de la plantilla. */
.app-sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
html[data-bs-theme="dark"] .app-sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
}

/* Info box hover */
.info-box:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  padding: 0;
}

/* Tabulator — pie/paginación: franja gris compacta con el selector de "Filas"
   (paginationSizeSelector) y el paginador juntos, alineados al final (a la
   derecha) —antes el select vivía aparte, arriba de la tabla, como un
   <select id="selector-filas"> propio en cada vista— y los botones en estilo
   "texto plano" (sin borde, página activa como cuadro sólido azul), en vez
   del fondo blanco y los botones tipo píldora con borde que traía antes.
   !important necesario: tabulator_bootstrap5.min.css se carga después de este archivo y
   define la misma especificidad para estos selectores, así que gana por orden de carga. */
.tabulator .tabulator-footer {
  background-color: #fff !important;
  border-top: 1px solid #dee2e6 !important;
}
.tabulator .tabulator-footer-contents {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 3px 8px !important;
  font-size: 0.8125rem !important;
  gap: 0.5rem;
}
/* El tema le da flex:1 al paginador (ocupa todo el ancho sobrante) y lo
   alineaba con text-align:right; al volverlo flex, ese text-align deja de
   aplicar, así que la alineación al final va con justify-content. */
.tabulator .tabulator-paginator {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}
.tabulator .tabulator-paginator label {
  color: #6c757d !important;
  font-size: 0.8125rem !important;
  margin: 0 0.4rem 0 0 !important;
}
.tabulator .tabulator-footer .tabulator-pages {
  display: inline-flex !important;
  margin: 0 !important;
}
/* La tabla suele ser lo último de su tarjeta: sin esto quedaba el padding
   inferior completo del .card-body (1rem) debajo del paginador, mucho más que
   el espacio de arriba. */
.card-body:has(> .tabulator) {
  padding-bottom: 0.25rem;
}
.tabulator .tabulator-page-size {
  background-color: #fff !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  /* Sin padding derecho extra: es un <select> nativo, el navegador ya
     reserva su propio espacio para la flecha — sumarle más dejaba un hueco
     en blanco grande después del número. */
  padding: 0.1rem 0.15rem 0.1rem 0.3rem !important;
  width: auto !important;
  font-size: 0.8125rem !important;
  height: auto !important;
  margin: 0 0.5rem 0 0 !important;
}
/* Botones pegados en un solo grupo (como .pagination-sm de Bootstrap /
   AdminLTE): sin espacio entre ellos, bordes superpuestos (-1px) y solo las
   esquinas exteriores redondeadas (« a la izquierda, » a la derecha). */
.tabulator .tabulator-footer .tabulator-page {
  position: relative;
  background-color: #fff !important;
  color: #0d6efd !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0 !important;
  padding: 0.1rem 0.5rem !important;
  margin: 0 0 0 -1px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.tabulator .tabulator-footer .tabulator-page[data-page="first"] {
  margin-left: 0 !important;
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
.tabulator .tabulator-footer .tabulator-page[data-page="last"] {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}
.tabulator .tabulator-footer .tabulator-page.active {
  z-index: 1;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
.tabulator .tabulator-footer .tabulator-page:disabled {
  background-color: #fff !important;
  color: #adb5bd !important;
  opacity: 1 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tabulator .tabulator-footer .tabulator-page:not(:disabled):hover {
    background-color: #e9ecef !important;
    color: #0a58ca !important;
  }
}
.tabulator .tabulator-footer .tabulator-page-counter {
  font-size: 0.8125rem !important;
  color: #6c757d !important;
}

/* Tabulator — quita el zebra gris entre filas y deja un borde fino y sutil.
   !important necesario por el mismo motivo que el bloque anterior (orden de carga del CSS). */
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even {
  background-color: #fff !important;
  border-bottom: 1px solid #f1f1f1 !important;
}
/* Debe ir después de la regla anterior: misma especificidad, gana por orden. */
.tabulator .tabulator-row:hover {
  background-color: #f8f9fa !important;
}

/* Tabulator — el tema trae "manito" en toda la fila al pasar el mouse (como si
   la fila entera fuera clicable). Se deja el cursor normal por defecto en cada
   celda; los badges de Estado y los botones de Acciones ya traen su propia
   manito (estilo inline o la clase .btn de Bootstrap), así que la conservan. */
.tabulator .tabulator-cell {
  cursor: default;
}

/* Tabulator — el footer de paginación no trae fondo para modo oscuro (bug del tema). */
html[data-bs-theme="dark"] .tabulator .tabulator-footer {
  background-color: var(--bs-body-bg) !important;
  border-top-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page,
html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page:disabled {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-page-size {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-page,
html[data-bs-theme="dark"] .tabulator .tabulator-paginator label,
html[data-bs-theme="dark"] .tabulator .tabulator-page-counter {
  color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-page:disabled {
  color: #6c757d !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-page.active {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

/* Tabulator — en modo oscuro, el panel de columnas ocultas (responsive
   "collapse", el que aparece en pantallas angostas con los campos que no caben
   en la fila) se queda con fondo blanco del tema base: el texto (heredado en
   blanco de la fila) queda invisible. Se le da el mismo fondo oscuro que ya
   usan las celdas de la fila. */
html[data-bs-theme="dark"] .tabulator .tabulator-responsive-collapse {
  background-color: #212529 !important;
  border-color: #4d5154 !important;
}

/* Tabulator — con layout "fitDataFill", cuando las columnas no llenan todo el
   ancho queda un espacio vacío a la derecha de la fila; ese espacio muestra el
   fondo de ".tabulator-row" (forzado a blanco arriba para quitar el zebra),
   no el de las celdas. En modo oscuro hay que oscurecerlo también. */
html[data-bs-theme="dark"] .tabulator .tabulator-row,
html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even {
  background-color: #212529 !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-row:hover {
  background-color: #323539 !important;
}

/* Tabulator — fila de un registro inactivo: se muestra tachada, igual que en
   app_edupracticas (clase "fila-inactiva" en el <tr>). Aquí se aplica a cada
   celda de la fila (Tabulator no usa <tr>/<td> reales). Se excluyen los
   badges de estado y los botones de acciones para que sigan siendo legibles. */
.tabulator-row.fila-inactiva .tabulator-cell {
  text-decoration: line-through;
  opacity: 0.65;
}
.tabulator-row.fila-inactiva .tabulator-cell .badge,
.tabulator-row.fila-inactiva .tabulator-cell .btn,
.tabulator-row.fila-inactiva .tabulator-cell .btn-group {
  text-decoration: none;
  opacity: 1;
}

/* Dentro del panel de columnas ocultas, cada fila es "Nombre de columna | Valor"
   (table > tr > td:first-of-type = etiqueta, td:last-of-type = valor). Solo el
   valor debe tacharse; la etiqueta se deja normal, igual que los encabezados de
   columna en la tabla principal. */
.tabulator-row.fila-inactiva .tabulator-responsive-collapse td:last-of-type {
  text-decoration: line-through;
  opacity: 0.65;
}
.tabulator-row.fila-inactiva .tabulator-responsive-collapse td:last-of-type .badge,
.tabulator-row.fila-inactiva .tabulator-responsive-collapse td:last-of-type .btn,
.tabulator-row.fila-inactiva .tabulator-responsive-collapse td:last-of-type .btn-group {
  text-decoration: none;
  opacity: 1;
}

/* Columna "Detalle" de Medidas de precaución: solo esa celda abre el modal
   (no toda la fila), así que el cursor de mano va solo ahí. */
.celda-detalle-mp {
  cursor: pointer;
}

/* Badges de conteo por categoría (banco de preguntas, ej. "Enfermería: 25"):
   mismo alto y redondeo que el <select> de filtro que va justo al lado
   (.form-select-sm), para que la fila no se desalinee verticalmente ni se
   vean "demasiado redondos" al lado de un control de esquinas rectas.
   Medido en vivo sobre .form-select-sm: alto 31px, radio 4px, padding
   vertical 4px, fuente 14px, interlineado 21px, borde 1px — con
   box-sizing:border-box (global en Bootstrap) estos mismos valores dan el
   mismo alto de 31px: 4+4+21+1+1. */
.badge-conteo-categoria {
  border-radius: 4px;
  font-size: 0.875rem;
  padding: 4px 0.75rem;
  line-height: 21px;
}

/* Franja de identidad (avatar con iniciales + nombre + documento) que se
   muestra encima del listado en los modales de historial de donaciones,
   envíos y capacitaciones (ver pintarIdentidadPersona en funciones.js). */
.avatar-iniciales {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #343a40;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Oculta el anillo de foco cuando no viene de navegación por teclado (clic,
   o el foco automático que pone Bootstrap en la "x" al abrir un modal).
   Con :focus-visible se conserva el anillo para quien navega con Tab. */
.btn:focus:not(:focus-visible),
.btn-close:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

/* Campana de notificaciones (navbar): con varios módulos, los textos son más
   largos que el ancho fijo de .dropdown-menu-lg (280-300px) — .dropdown-item
   trae "white-space: nowrap" de Bootstrap, así que el texto se cortaba en vez
   de bajar de línea. Se permite el salto de línea y se iguala el tamaño de
   letra al que ya tenía ".dropdown-footer" (0.875rem); el footer "Ver todos"
   de cada bloque queda un punto más pequeño y en negrilla para diferenciarse. */
#lista-notificaciones .dropdown-item {
  white-space: normal;
  font-size: 0.875rem;
}
#lista-notificaciones .dropdown-footer {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ─── Tom Select ─────────────────────────────────────────────────────────
   Reemplaza a Select2 en todo el sistema (admin y formularios públicos). */

/* El tema bootstrap5 de Tom Select no sigue las variables de Bootstrap
   (--bs-body-bg, --bs-border-color, etc.), que sí cambian solas con
   data-bs-theme="dark". Solo el texto del control/dropdown y las "píldoras"
   de un multi-select quedan fijos en gris oscuro (#343a40) en el CSS del
   plugin — sin esto, en modo oscuro el texto queda casi invisible sobre el
   fondo oscuro. */
html[data-bs-theme="dark"] .ts-control,
html[data-bs-theme="dark"] .ts-control input,
html[data-bs-theme="dark"] .ts-dropdown {
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
html[data-bs-theme="dark"] .ts-dropdown {
  border-color: var(--bs-border-color);
}

/* dropdownParent:"body" saca el listado del combo fuera de cualquier modal
   (para que no se recorte) y lo cuelga directo de <body> — pero el tema
   trae z-index:10, muy por debajo del backdrop (1050) y el modal (1055) de
   Bootstrap. Sin esto el listado queda dibujado DETRÁS del modal. */
.ts-dropdown {
  z-index: 1070;
}

/* Módulo APIs: consola oscura para la petición y la respuesta (JSON con
   colores al estilo de un bloque de código). Siempre oscura, también en el
   tema claro. */
.consola-api-marco {
  border-radius: 0.5rem;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.consola-api-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: #2d2d2d;
  color: #ccc;
  font-size: 0.78rem;
  font-weight: 600;
}
.consola-api-copiar {
  color: #ccc;
  padding: 0 0.35rem;
  border: 0;
}
.consola-api-copiar:hover {
  color: #fff;
}
.consola-api {
  margin: 0;
  padding: 0.9rem 1rem;
  max-height: 420px;
  overflow: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: Consolas, "Cascadia Code", "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre;
}
.consola-api .j-com { color: #6a9955; }
.consola-api .j-key { color: #9cdcfe; }
.consola-api .j-str { color: #ce9178; }
.consola-api .j-num { color: #b5cea8; }
.consola-api .j-bool { color: #569cd6; }
.consola-api .j-err { color: #f48771; }
.consola-api .h-verbo { color: #c586c0; font-weight: 700; }
.consola-api .h-url { color: #dcdcaa; }

/* El scroll nativo del listado, fuera del alcance de los overrides de
   OverlayScrollbars, se queda con los colores del sistema operativo aunque
   la página esté en modo oscuro; Bootstrap solo declara "color-scheme: dark"
   para data-bs-theme="dark" y deja el claro sin declarar. */
html:not([data-bs-theme="dark"]) .ts-dropdown {
  color-scheme: light;
}
html[data-bs-theme="dark"] .ts-dropdown {
  color-scheme: dark;
}

/* Estado inválido (formularios públicos con validación propia, ver
   capacitacionhigienemanos.js::marcarInvalido()): el <select> real queda
   oculto dentro de ".ts-wrapper", así que el borde rojo de Bootstrap hay que
   pintarlo a mano sobre ".ts-control". */
.ts-wrapper.is-invalid .ts-control {
  border-color: var(--bs-danger);
}