/* ==========================================================================
   Bienestar — adaptadores del theme
   Mapea las clases que ya emiten Django y Mofi (.form-control, .table,
   .alert, .pagination…) al sistema, siempre dentro de .bienestar.
   Regla: estos estilos dan forma, no jerarquía. La estructura sale de los
   componentes pb-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.bienestar .form-label {
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pb-muted);
}

.bienestar .form-control,
.bienestar .form-select {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  background-color: var(--pb-surface);
  font-family: var(--pb-font-body);
  font-size: 0.84rem;
  color: var(--pb-text);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bienestar .form-select {
  padding-right: 32px;
  background-position: right 10px center;
}

.bienestar textarea.form-control {
  min-height: 84px;
  line-height: 1.45;
}

.bienestar .form-control::placeholder {
  color: #9aa7a0;
}

.bienestar .form-control:focus,
.bienestar .form-select:focus {
  border-color: var(--pb-primary);
  box-shadow: 0 0 0 3px var(--pb-primary-soft);
}

.bienestar .form-control:disabled,
.bienestar .form-select:disabled,
.bienestar .form-control[readonly] {
  background-color: #f4f6f8;
  color: var(--pb-outline);
  cursor: not-allowed;
}

.bienestar .form-text {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--pb-outline);
}

.bienestar .input-group > .form-control,
.bienestar .input-group > .form-select {
  border-radius: 10px;
}

.bienestar .input-group-text {
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  background-color: var(--pb-container);
  font-size: 0.8rem;
  color: var(--pb-muted);
}

.bienestar .form-check {
  min-height: auto;
  margin-bottom: 0;
  padding-left: 1.6em;
}

.bienestar .form-check-input {
  border: 1px solid #c3cdd6;
  box-shadow: none;
}

.bienestar .form-check-input:checked {
  background-color: var(--pb-primary);
  border-color: var(--pb-primary);
}

.bienestar .form-check-input:focus {
  border-color: var(--pb-primary);
  box-shadow: 0 0 0 3px var(--pb-primary-soft);
}

.bienestar .form-check-label {
  font-size: 0.82rem;
  color: var(--pb-muted);
}

.bienestar .form-control.is-invalid,
.bienestar .form-select.is-invalid {
  border-color: var(--pb-danger);
  background-image: none;
}

.bienestar .form-control.is-invalid:focus,
.bienestar .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--pb-danger-soft);
}

.bienestar .invalid-feedback,
.bienestar .text-danger.f-12 {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--pb-danger);
}

.bienestar input[type="file"].form-control {
  padding: 5px 8px;
  font-size: 0.78rem;
}

.bienestar input[type="file"].form-control::file-selector-button {
  margin-right: 8px;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background-color: var(--pb-container);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pb-secondary);
  cursor: pointer;
}

.bienestar label.required::after,
.bienestar .form-label.required::after {
  content: "*";
  margin-left: 2px;
  color: var(--pb-danger);
}

/* --------------------------------------------------------------------------
   Botones del theme (solo forma; los colores nuevos usan .pb-btn)
   -------------------------------------------------------------------------- */
.bienestar .btn {
  border-radius: 10px;
  font-family: var(--pb-font-body);
  font-size: 0.82rem;
  font-weight: 600;
}

.bienestar .btn-sm {
  padding: 5px 12px;
  font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.bienestar .table {
  margin-bottom: 0;
  color: var(--pb-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.bienestar .table > :not(caption) > * > * {
  padding: 10px 12px;
  border-bottom-color: #eef2f7;
  background-color: transparent;
}

.bienestar .table > thead > tr > th {
  border-bottom: 1px solid var(--pb-border);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pb-outline);
}

.bienestar .table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.bienestar .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #fafbfd;
  color: inherit;
}

.bienestar .table-hover > tbody > tr:hover > * {
  background-color: var(--pb-container);
  color: inherit;
}

.bienestar .table-responsive {
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Alertas y mensajes
   -------------------------------------------------------------------------- */
.bienestar .alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--pb-gap);
  padding: 10px 12px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.bienestar .alert:last-child {
  margin-bottom: 0;
}

.bienestar .alert-success {
  border-color: #bfe6d6;
  border-left-color: var(--pb-primary);
  background-color: var(--pb-primary-soft);
  color: #05543c;
}

.bienestar .alert-info {
  border-color: #cfe4f5;
  border-left-color: var(--pb-secondary);
  background-color: var(--pb-info-soft);
  color: #0b4b70;
}

.bienestar .alert-warning {
  border-color: #f4e2bd;
  border-left-color: var(--pb-warn);
  background-color: var(--pb-warn-soft);
  color: #6b4400;
}

.bienestar .alert-danger,
.bienestar .alert-error {
  border-color: #f3c9c5;
  border-left-color: var(--pb-danger);
  background-color: var(--pb-danger-soft);
  color: #8d140f;
}

.bienestar .alert .btn-close {
  margin-left: auto;
  padding: 0.5rem;
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Insignias, progreso y listas
   -------------------------------------------------------------------------- */
.bienestar .badge {
  padding: 0.35em 0.6em;
  border-radius: 999px;
  font-family: var(--pb-font-body);
  font-size: 0.68rem;
  font-weight: 600;
}

.bienestar .progress {
  height: 6px;
  border-radius: 999px;
  background-color: var(--pb-track);
}

.bienestar .progress-bar {
  background-color: var(--pb-primary);
}

.bienestar .list-group {
  border-radius: 10px;
}

.bienestar .list-group-item {
  padding: 10px 12px;
  border-color: #eef2f7;
  font-size: 0.82rem;
  color: var(--pb-muted);
}

.bienestar .list-group-item.active {
  border-color: var(--pb-primary);
  background-color: var(--pb-primary);
}

/* --------------------------------------------------------------------------
   Navegación interna
   -------------------------------------------------------------------------- */
.bienestar .nav-tabs {
  border-bottom-color: var(--pb-border);
}

.bienestar .nav-tabs .nav-link {
  margin-bottom: -1px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pb-outline);
}

.bienestar .nav-tabs .nav-link:hover {
  border-bottom-color: var(--pb-border);
  color: var(--pb-text);
}

.bienestar .nav-tabs .nav-link.active {
  border-bottom-color: var(--pb-primary);
  background: none;
  color: var(--pb-primary);
}

.bienestar .nav-pills .nav-link {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pb-muted);
}

.bienestar .nav-pills .nav-link.active {
  background-color: var(--pb-primary-soft);
  color: var(--pb-primary);
}

.bienestar .dropdown-menu {
  padding: 6px;
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  box-shadow: var(--pb-shadow-elevated);
  font-size: 0.8rem;
}

.bienestar .dropdown-item {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--pb-muted);
}

.bienestar .dropdown-item:hover,
.bienestar .dropdown-item:focus {
  background-color: var(--pb-container);
  color: var(--pb-text);
}

/* --------------------------------------------------------------------------
   Paginación
   -------------------------------------------------------------------------- */
.bienestar .pagination {
  gap: 4px;
  margin: 0;
}

.bienestar .pagination .page-link {
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid var(--pb-border);
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  color: var(--pb-muted);
  box-shadow: none;
}

.bienestar .pagination .page-link:hover {
  border-color: var(--pb-primary);
  background-color: var(--pb-primary-soft);
  color: var(--pb-primary);
}

.bienestar .pagination .page-item.active .page-link {
  border-color: var(--pb-primary);
  background-color: var(--pb-primary);
  color: #fff;
}

.bienestar .pagination .page-item.disabled .page-link {
  border-color: var(--pb-border);
  background-color: transparent;
  color: #b3bfc9;
}

/* --------------------------------------------------------------------------
   Utilidades del theme dentro del sistema
   -------------------------------------------------------------------------- */
.bienestar .f-12 {
  font-size: 0.72rem;
}

.bienestar .f-14 {
  font-size: 0.82rem;
}

.bienestar .theme-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.bienestar .theme-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: #d6dee6;
}

/* Ayuda de contextura: mismo acento que el sistema */
.bienestar .contextura-video-btn {
  color: var(--pb-secondary);
}

.bienestar .spinner-border {
  color: var(--pb-primary);
  border-width: 2px;
}