/* 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: fondo blanco y botones estilo Bootstrap .pagination-sm,
   en vez del fondo gris y los botones grandes que trae el tema por defecto.
   !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;
}
.tabulator .tabulator-footer-contents {
  padding: 4px 8px !important;
  font-size: 0.8125rem !important;
}
.tabulator .tabulator-footer .tabulator-page {
  background-color: #fff !important;
  color: #0d6efd !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0 2px !important;
  font-weight: 400 !important;
}
.tabulator .tabulator-footer .tabulator-page.active {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
.tabulator .tabulator-footer .tabulator-page:disabled {
  background-color: #fff !important;
  color: #6c757d !important;
  opacity: 0.65;
}
@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;
}

/* 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,
html[data-bs-theme="dark"] .tabulator .tabulator-page,
html[data-bs-theme="dark"] .tabulator .tabulator-page:disabled,
html[data-bs-theme="dark"] .tabulator .tabulator-page-size {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .tabulator .tabulator-page.active {
  background-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;
}

/* 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;
}