/* ==========================================================================
   ASODIB
   Archivo: assets/css/componentes.css
   Componentes reutilizables del Portal Web.
   Dependencias:
   - variables.css
   - estilo.css
   - Bootstrap 5
   Responsabilidades:
   - Botones personalizados.
   - Tarjetas genéricas.
   - Badges.
   - Alertas.
   - Formularios.
   - Tablas.
   - Paginación.
   - Modales.
   - Listas.
   - Acordeones.
   - Estadísticas.
   - Avatares.
   - Estados.
   - Carga.
   - Widgets.
   - Estados vacíos.
   - Progress.
   - Divisores.
   - Efectos reutilizables.
   - Utilidades visuales.
   - Tooltips y popovers.
   No colocar aquí estilos específicos de módulos.
   ========================================================================== */
/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  border-radius: var(--radio-boton);
  font-weight: var(--peso-semibold);
  transition: var(--transicion-suave);
}
.btn-primary {
  background: var(--color-primario);
  border-color: var(--color-primario);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-primario-hover);
  border-color: var(--color-primario-hover);
}
.btn-secondary {
  background: var(--color-secundario);
  border-color: var(--color-secundario);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--color-secundario-hover);
  border-color: var(--color-secundario-hover);
}
.btn-success {
  background: var(--color-exito);
  border-color: var(--color-exito);
}
.btn-success:hover,
.btn-success:focus {
  background: var(--color-exito-hover);
  border-color: var(--color-exito-hover);
}
.btn-danger {
  background: var(--color-peligro);
  border-color: var(--color-peligro);
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--color-peligro-hover);
  border-color: var(--color-peligro-hover);
}
.btn-warning {
  color: var(--color-gris-900);
  font-weight: var(--peso-negrita);
}
.btn-warning:hover,
.btn-warning:focus {
  color: var(--color-gris-900);
  background: var(--color-advertencia-hover);
  border-color: var(--color-advertencia-hover);
}
.btn-info {
  color: var(--color-gris-900);
}
.btn-info:hover,
.btn-info:focus {
  color: var(--color-gris-900);
  background: var(--color-info-hover);
  border-color: var(--color-info-hover);
}
.btn-outline-primary {
  border-width: var(--ancho-borde-grueso);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-sm);
}
.btn:focus-visible {
  box-shadow: var(--sombra-focus);
}
.btn:disabled,
.btn.disabled {
  transform: none;
  box-shadow: none;
}
.btn-sm {
  border-radius: var(--radio-sm);
}
.btn-lg {
  border-radius: var(--radio-lg);
}
/* ==========================================================================
   TARJETAS GENÉRICAS
   ========================================================================== */
.portal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-blanco);
  border: var(--ancho-borde) solid transparent;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-sm);
  transition: var(--transicion-suave);
}
.portal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}
.portal-card-img {
  display: block;
  width: 100%;
  height: var(--altura-imagen-card);
  object-fit: cover;
}
.portal-card-body {
  flex: 1;
  padding: var(--espacio-5);
}
.portal-card-title {
  margin-bottom: var(--espacio-3);
  color: var(--color-primario);
  font-size: var(--texto-xl);
  font-weight: var(--peso-negrita);
  line-height: var(--linea-titulos);
}
.portal-card-text {
  color: var(--color-gris-700);
  line-height: var(--linea-relajada);
}
.portal-card-footer {
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--color-blanco);
  border-top: var(--ancho-borde) solid var(--color-borde-claro);
}
/* ==========================================================================
   BADGES
   ========================================================================== */
.badge {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radio-pill);
  font-weight: var(--peso-semibold);
}
/* ==========================================================================
   ALERTAS
   ========================================================================== */
.alert {
  border: none;
  border-left: 5px solid;
  border-radius: var(--radio-md);
}
.alert-success {
  border-left-color: var(--color-exito);
}
.alert-danger {
  border-left-color: var(--color-peligro);
}
.alert-warning {
  border-left-color: var(--color-advertencia);
}
.alert-info {
  border-left-color: var(--color-info);
}
/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.form-label {
  margin-bottom: 0.45rem;
  color: var(--color-gris-800);
  font-weight: var(--peso-semibold);
}
.form-control,
.form-select {
  min-height: var(--altura-input);
  padding: 0.65rem 0.85rem;
  background: var(--color-blanco);
  border: var(--ancho-borde) solid var(--color-borde);
  border-radius: var(--radio-input);
  transition: var(--transicion-suave);
}
.form-control:hover,
.form-select:hover {
  border-color: var(--color-secundario);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primario);
  box-shadow: var(--sombra-focus);
}
.form-text {
  color: var(--color-gris-600);
  font-size: var(--texto-sm);
}
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}
.form-group {
  margin-bottom: var(--espacio-5);
}
.form-check-input {
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}
.form-check-input:focus {
  border-color: var(--color-primario);
  box-shadow: var(--sombra-focus);
}
.form-check-label {
  cursor: pointer;
}
.is-invalid {
  border-color: var(--color-peligro);
}
.invalid-feedback {
  font-size: var(--texto-sm);
}
/* ==========================================================================
   TABLAS
   ========================================================================== */
.table {
  margin-bottom: 0;
  vertical-align: middle;
}
.table thead {
  color: var(--color-blanco);
  background: var(--color-primario);
}
.table thead th {
  padding: 0.9rem;
  border: none;
  font-weight: var(--peso-semibold);
}
.table tbody td {
  padding: 0.85rem;
}
.table tbody tr {
  transition: background-color var(--transicion-rapida);
}
.table tbody tr:hover {
  background: var(--color-gris-50);
}
.table-responsive {
  overflow: hidden;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}
.table-sm td,
.table-sm th {
  padding: 0.55rem;
}
.table-striped tbody tr:nth-child(even) {
  background: var(--color-gris-50);
}
/* ==========================================================================
   PAGINACIÓN
   ========================================================================== */
.pagination {
  justify-content: center;
  margin-top: var(--espacio-6);
}
.page-link {
  margin: 0 3px;
  color: var(--color-primario);
  background: var(--color-blanco);
  border: var(--ancho-borde) solid var(--color-borde);
  border-radius: var(--radio-md);
  transition: var(--transicion-suave);
}
.page-link:hover {
  color: var(--color-blanco);
  background: var(--color-secundario);
  border-color: var(--color-secundario);
}
.page-link:focus {
  box-shadow: var(--sombra-focus);
}
.page-item.active .page-link {
  color: var(--color-blanco);
  background: var(--color-primario);
  border-color: var(--color-primario);
}
/* ==========================================================================
   MODALES
   ========================================================================== */
.modal-content {
  overflow: hidden;
  border: none;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-xl);
}
.modal-header {
  color: var(--color-blanco);
  background: var(--color-primario);
  border: none;
}
.modal-header .btn-close {
  filter: invert(1);
}
.modal-footer {
  border-top: var(--ancho-borde) solid var(--color-borde);
}
/* ==========================================================================
   LISTAS
   ========================================================================== */
.list-group {
  overflow: hidden;
  border-radius: var(--radio-md);
}
.list-group-item {
  padding: 0.9rem 1rem;
  border-left: none;
  border-right: none;
  transition: background-color var(--transicion-rapida);
}
.list-group-item:hover {
  background: var(--color-gris-50);
}
.list-group-item.active {
  background: var(--color-primario);
  border-color: var(--color-primario);
}
/* ==========================================================================
   ACORDEONES
   ========================================================================== */
.accordion {
  overflow: hidden;
  border-radius: var(--radio-md);
}
.accordion-item {
  margin-bottom: var(--espacio-3);
  border: none;
  box-shadow: var(--sombra-sm);
}
.accordion-button {
  font-weight: var(--peso-semibold);
}
.accordion-button:focus {
  box-shadow: var(--sombra-focus);
}
.accordion-button:not(.collapsed) {
  color: var(--color-primario);
  background: var(--color-fondo-suave);
}
/* ==========================================================================
   ESTADÍSTICAS
   ========================================================================== */
.card-estadistica {
  padding: var(--espacio-5);
  background: var(--color-blanco);
  border: none;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  transition: var(--transicion-suave);
}
.card-estadistica:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}
.numero-estadistica {
  color: var(--color-primario);
  font-size: 2rem;
  font-weight: var(--peso-negrita);
}
.icono-estadistica {
  color: var(--color-secundario);
  font-size: 2.3rem;
}
/* ==========================================================================
   AVATARES
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-gris-200);
  color: var(--color-blanco);
  border-radius: 50%;
  font-weight: var(--peso-negrita);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-xs {
  width: 32px;
  height: 32px;
  font-size: var(--texto-xs);
}
.avatar-sm {
  width: 42px;
  height: 42px;
}
.avatar-md {
  width: 60px;
  height: 60px;
}
.avatar-lg {
  width: 90px;
  height: 90px;
}
.avatar-xl {
  width: 130px;
  height: 130px;
}
/* ==========================================================================
   ESTADOS
   ========================================================================== */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
}
.estado-publicado {
  color: var(--color-exito);
}
.estado-borrador {
  color: var(--color-advertencia);
}
.estado-eliminado {
  color: var(--color-peligro);
}
.estado-destacado {
  color: var(--color-acento);
}
.estado-inactivo {
  color: var(--color-gris-500);
}
/* ==========================================================================
   CARGA
   ========================================================================== */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-8);
}
.spinner-border {
  width: 3rem;
  height: 3rem;
}
/* ==========================================================================
   WIDGETS
   ========================================================================== */
.widget {
  padding: var(--espacio-5);
  background: var(--color-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
.widget-titulo {
  margin-bottom: var(--espacio-4);
  color: var(--color-primario);
  font-size: var(--texto-lg);
  font-weight: var(--peso-negrita);
}
.widget-icono {
  color: var(--color-secundario);
  font-size: 2rem;
}
/* ==========================================================================
   ACCESOS RÁPIDOS
   ========================================================================== */
.acceso-card {
  padding: var(--espacio-6) var(--espacio-5);
  background: var(--color-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  text-align: center;
  transition: var(--transicion-suave);
}
.acceso-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-lg);
}
.acceso-icono {
  margin-bottom: var(--espacio-4);
  color: var(--color-primario);
  font-size: 2.8rem;
}
.acceso-titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-negrita);
}
/* ==========================================================================
   ESTADOS VACÍOS
   ========================================================================== */
.estado-vacio {
  padding: var(--espacio-8) var(--espacio-6);
  background: var(--color-blanco);
  border: var(--ancho-borde-grueso) dashed var(--color-borde);
  border-radius: var(--radio-lg);
  text-align: center;
}
.estado-vacio i {
  margin-bottom: var(--espacio-4);
  color: var(--color-gris-400);
  font-size: 4rem;
}
.estado-vacio h3 {
  margin-bottom: var(--espacio-3);
  color: var(--color-gris-700);
}
.estado-vacio p {
  max-width: 500px;
  margin: auto;
  color: var(--color-gris-600);
}
/* ==========================================================================
   PROGRESS
   ========================================================================== */
.progress {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radio-pill);
}
.progress-bar {
  background: var(--color-primario);
}
/* ==========================================================================
   DIVISORES
   ========================================================================== */
.divider {
  height: var(--ancho-borde);
  margin: var(--espacio-6) 0;
  background: var(--color-borde);
}
.divider-lg {
  margin: var(--espacio-8) 0;
}
/* ==========================================================================
   EFECTOS REUTILIZABLES
   ========================================================================== */
.hover-scale {
  transition: transform var(--transicion-normal);
}
.hover-scale:hover {
  transform: scale(1.03);
}
.hover-up {
  transition: transform var(--transicion-normal);
}
.hover-up:hover {
  transform: translateY(-4px);
}
/* ==========================================================================
   UTILIDADES VISUALES
   ========================================================================== */
.cursor-pointer {
  cursor: pointer;
}
.no-select {
  user-select: none;
}
.border-dashed {
  border: var(--ancho-borde-grueso) dashed var(--color-borde);
}
.rounded-xl {
  border-radius: var(--radio-xl);
}
.text-small {
  font-size: var(--texto-sm);
}
.text-muted-light {
  color: var(--color-gris-500);
}
/* ==========================================================================
   TOOLTIPS Y POPOVERS
   ========================================================================== */
.tooltip-inner {
  padding: 0.55rem 0.8rem;
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
}
.popover {
  border: none;
  box-shadow: var(--sombra-md);
}
/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print {
  .btn,
  .navbar,
  .footer-publico,
  .topbar-publico,
  .pagination {
    display: none !important;
  }
  .portal-card,
  .documento-card,
  .comunicado-card {
    border: var(--ancho-borde) solid var(--color-borde);
    box-shadow: none;
  }
}