/* ============================================================================
   dharma-bridge-bootstrap.css  ·  Capa 1 — EL PUENTE

   ESTE ES EL ARCHIVO MAS IMPORTANTE DEL PAQUETE.

   Reestiliza el markup Bootstrap que YA EXISTE en dhTordo, sin tocar una
   sola linea de HTML. Un <button class="btn btn-primary"> escrito hace tres
   anios pasa a verse con la identidad Dharma solo por incluir este archivo.

   Cubre Bootstrap 4 y 5. Tambien los plugins que casi seguro estan en juego:
   DataTables, Select2, SweetAlert2, Flatpickr, Toastr.

   NOTA PARA EL DESARROLLADOR:
   Si el sistema usa Bootstrap 3, avisar antes de continuar: las clases
   cambian bastante y hace falta un puente distinto.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Variables nativas de Bootstrap 5 remapeadas a los tokens Dharma.
      Con esto solo, todo lo que Bootstrap dibuja con --bs-* ya cambia.
   --------------------------------------------------------------------------- */
:root{
  --bs-primary:var(--accent);
  --bs-secondary:var(--text-2);
  --bs-success:var(--ok);
  --bs-danger:var(--bad);
  --bs-warning:var(--warn);
  --bs-info:var(--info);
  --bs-light:var(--surface-2);
  --bs-dark:var(--ink);

  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-body-font-family:var(--f-ui);
  --bs-body-font-size:14px;
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r-sm);
  --bs-border-radius-lg:var(--r-lg);
  --bs-link-color:var(--accent-ink);
  --bs-link-hover-color:var(--accent-press);
  --bs-emphasis-color:var(--text);
  --bs-secondary-color:var(--text-2);
  --bs-tertiary-color:var(--text-3);
  --bs-secondary-bg:var(--surface-2);
  --bs-tertiary-bg:var(--surface-3);
}

/* ---------------------------------------------------------------------------
   2. Botones
   --------------------------------------------------------------------------- */
.btn{
  --bs-btn-border-radius:var(--r-sm);
  height:36px;padding:0 15px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--r-sm);
  transition:background .14s,border-color .14s,color .14s,transform .08s;
}
.btn:active{transform:translateY(1px)}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px}
.btn-lg{height:42px;padding:0 20px;font-size:14.5px}

.btn-primary{
  background:var(--pri-bg);color:var(--pri-fg);
  border-color:transparent;font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active{
  background:var(--pri-bg-h);color:var(--pri-fg);border-color:transparent;
}

.btn-secondary,.btn-default,.btn-light{
  background:var(--surface);border-color:var(--line);color:var(--text);
}
.btn-secondary:hover,.btn-default:hover,.btn-light:hover{
  background:var(--surface-2);border-color:var(--text-3);color:var(--text);
}

.btn-outline-primary{background:transparent;border-color:var(--accent-line);color:var(--accent-ink)}
.btn-outline-primary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

.btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-warning{background:var(--warn);border-color:var(--warn);color:#fff}
.btn-info{background:var(--info);border-color:var(--info);color:#fff}

.btn-link{background:none;border:0;color:var(--accent-ink);text-decoration:none}
.btn-link:hover{background:var(--surface-3);color:var(--accent-press)}

/* Botones que solo llevan un icono */
.btn.btn-icon{width:34px;padding:0;justify-content:center}

/* ---------------------------------------------------------------------------
   3. Tarjetas / paneles
   --------------------------------------------------------------------------- */
.card,.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.card-header,.panel-heading{
  background:transparent;
  border-bottom:1px solid var(--line-soft);
  padding:15px 18px;
  font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.card-body,.panel-body{padding:18px}
.card-footer,.panel-footer{
  background:var(--surface-2);
  border-top:1px solid var(--line-soft);
  padding:13px 18px;
}
.card-title{font-size:14.5px;font-weight:600;margin-bottom:0}

/* ---------------------------------------------------------------------------
   4. Tablas   ·   aqui se gana la pelea visual del sistema
   --------------------------------------------------------------------------- */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-border-color:var(--line-soft);
  margin-bottom:0;
  border-collapse:separate;border-spacing:0;
}
.table > thead > tr > th,
.table > thead th{
  position:sticky;top:0;z-index:5;
  background:var(--surface-2);
  height:38px;padding:0 14px;
  vertical-align:middle;text-align:left;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);
  border-bottom:1px solid var(--line);border-top:0;
  white-space:nowrap;
}
.table > tbody > tr > td,
.table > tbody td{
  height:var(--row-h);padding:0 14px;
  vertical-align:middle;
  border-bottom:1px solid var(--line-soft);border-top:0;
  font-size:13.5px;
}
.table > tbody > tr:last-child > td{border-bottom:0}
.table-hover > tbody > tr:hover > *,
.table-hover > tbody > tr:hover{background:var(--surface-2);--bs-table-accent-bg:var(--surface-2)}
.table-striped > tbody > tr:nth-of-type(odd) > *{--bs-table-accent-bg:var(--surface-2)}

/* Alinear cifras a la derecha y en tipografia de datos.
   Agregar class="dh-n" a las celdas numericas. */
.table .dh-n{text-align:right;font-family:var(--f-data);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Acciones de fila: aparecen al pasar el mouse */
.dh-rowact{display:flex;gap:2px;opacity:0;justify-content:flex-end;transition:opacity .14s}
tr:hover .dh-rowact{opacity:1}
@media (hover:none){ .dh-rowact{opacity:1} }

/* ---------------------------------------------------------------------------
   5. Formularios
   --------------------------------------------------------------------------- */
.form-control,.form-select,.custom-select,select.form-control,input.form-control{
  height:38px;padding:0 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background-color:var(--surface);
  color:var(--text);
  font-size:13.5px;
  box-shadow:none;
  transition:border-color .15s,box-shadow .15s;
}
textarea.form-control{height:auto;padding:10px 12px;min-height:88px;line-height:1.55}
.form-control::placeholder{color:var(--text-3)}
.form-control:hover,.form-select:hover{border-color:var(--text-3)}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  background-color:var(--surface);color:var(--text);
}
.form-control:disabled,.form-control[readonly]{background-color:var(--surface-3);color:var(--text-3)}
.form-control-sm{height:32px;font-size:12.5px}
.form-control-lg{height:44px;font-size:15px}

.form-label,label{font-size:12.5px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.form-text,.help-block{font-size:11.5px;color:var(--text-3)}
.is-invalid,.has-error .form-control{border-color:var(--bad)!important}
.is-valid{border-color:var(--ok)!important}
.invalid-feedback{color:var(--bad);font-size:11.5px}

.input-group-text,.input-group-addon{
  background:var(--surface-3);
  border:1px solid var(--line);
  color:var(--text-3);
  font-family:var(--f-data);font-size:13px;
  padding:0 12px;
}
.input-group > .form-control:focus{z-index:3}

.form-check-input,input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-switch .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}

/* ---------------------------------------------------------------------------
   6. Insignias de estado
   --------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;
}
.badge.bg-primary,.badge-primary{background:var(--accent-soft)!important;color:var(--accent-ink)!important}
.badge.bg-success,.badge-success{background:var(--ok-soft)!important;color:var(--ok)!important}
.badge.bg-danger,.badge-danger{background:var(--bad-soft)!important;color:var(--bad)!important}
.badge.bg-warning,.badge-warning{background:var(--warn-soft)!important;color:var(--warn)!important}
.badge.bg-info,.badge-info{background:var(--info-soft)!important;color:var(--info)!important}
.badge.bg-secondary,.badge-secondary{background:var(--surface-3)!important;color:var(--text-3)!important}

/* ---------------------------------------------------------------------------
   7. Avisos
   --------------------------------------------------------------------------- */
.alert{
  border-radius:var(--r);padding:12px 14px;
  font-size:13.5px;border:1px solid;
}
.alert-success{background:var(--ok-soft);border-color:#178E5C40;color:var(--ok)}
.alert-danger{background:var(--bad-soft);border-color:#C8393C40;color:var(--bad)}
.alert-warning{background:var(--warn-soft);border-color:#B8751440;color:var(--warn)}
.alert-info{background:var(--info-soft);border-color:#2A6FC440;color:var(--info)}

/* ---------------------------------------------------------------------------
   8. Ventanas modales
   --------------------------------------------------------------------------- */
.modal-content{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
}
.modal-header{border-bottom:1px solid var(--line-soft);padding:17px 22px}
.modal-title{font-size:16px;font-weight:600;letter-spacing:-.015em}
.modal-body{padding:20px 22px}
.modal-footer{border-top:1px solid var(--line-soft);padding:14px 22px;gap:8px}
.modal-backdrop{background:#080B10}
.modal-backdrop.show{opacity:.55}

/* ---------------------------------------------------------------------------
   9. Pestanias y paginacion
   --------------------------------------------------------------------------- */
.nav-tabs{border-bottom:1px solid var(--line);gap:2px}
.nav-tabs .nav-link{
  border:0;background:none;padding:10px 15px;position:relative;
  font-size:13.5px;font-weight:500;color:var(--text-2);
}
.nav-tabs .nav-link:hover{border:0;color:var(--text)}
.nav-tabs .nav-link.active{
  background:none;border:0;color:var(--accent-ink);font-weight:600;
}
.nav-tabs .nav-link.active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,var(--au-dp),var(--au-hi));
}
.pagination{gap:3px}
.page-link{
  min-width:30px;height:30px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-xs)!important;
  border:1px solid var(--line);background:var(--surface);
  color:var(--text-2);font-family:var(--f-data);font-size:12.5px;
}
.page-link:hover{background:var(--surface-2);border-color:var(--text-3);color:var(--text)}
.page-item.active .page-link{
  background:var(--pri-bg);border-color:transparent;color:var(--pri-fg);font-weight:700;
}

/* ---------------------------------------------------------------------------
   10. Menus desplegables
   --------------------------------------------------------------------------- */
.dropdown-menu{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-2);
  padding:6px;font-size:13.5px;
}
.dropdown-item{border-radius:var(--r-sm);padding:8px 11px;color:var(--text)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--accent-soft);color:var(--accent-ink)}
.dropdown-divider{border-color:var(--line-soft)}

/* ---------------------------------------------------------------------------
   11. Barras de progreso
   --------------------------------------------------------------------------- */
.progress{height:7px;border-radius:4px;background:var(--surface-3)}
.progress-bar{background:var(--accent);border-radius:4px}
.progress-bar.bg-success{background:var(--ok)!important}
.progress-bar.bg-warning{background:var(--warn)!important}
.progress-bar.bg-danger{background:var(--bad)!important}
.progress-bar.dh-iri{background:linear-gradient(90deg,var(--au-dp),var(--au-hi))!important}

/* ============================================================================
   12. PLUGINS DE TERCEROS
   Borrar los bloques que no correspondan una vez confirmado el inventario.
   ========================================================================== */

/* ---- DataTables ---- */
.dataTables_wrapper{font-size:13.5px}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  height:34px;padding:0 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{color:var(--text-3);font-size:12.5px}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  min-width:30px;height:30px;padding:0 8px!important;margin:0 1.5px;
  border-radius:var(--r-xs)!important;border:1px solid var(--line)!important;
  background:var(--surface)!important;color:var(--text-2)!important;
  font-family:var(--f-data);font-size:12.5px;line-height:28px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--accent)!important;border-color:var(--accent)!important;
  color:var(--pri-fg)!important;font-weight:700;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--surface-2)!important;border-color:var(--text-3)!important;color:var(--text)!important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after{opacity:.45}

/* ---- Select2 ---- */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap .select2-selection--single{
  height:38px!important;border:1px solid var(--line)!important;
  border-radius:var(--r-sm)!important;background:var(--surface)!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px!important;color:var(--text)!important;padding-left:12px!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px!important}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft);
}
.select2-dropdown{
  border:1px solid var(--line)!important;border-radius:var(--r)!important;
  background:var(--surface)!important;box-shadow:var(--sh-2);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--accent-soft)!important;color:var(--accent-ink)!important;
}
.select2-search__field{
  border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;
  background:var(--surface-2)!important;color:var(--text)!important;
}

/* ---- SweetAlert2 ---- */
.swal2-popup{
  background:var(--surface)!important;color:var(--text)!important;
  border:1px solid var(--line);border-radius:var(--r-xl)!important;
  font-family:var(--f-ui)!important;
}
.swal2-title{color:var(--text)!important;font-family:var(--f-display);font-weight:600}
.swal2-html-container{color:var(--text-2)!important;font-size:14px!important}
.swal2-confirm.swal2-styled{
  background:var(--pri-bg)!important;color:var(--pri-fg)!important;
  border-radius:var(--r-sm)!important;font-weight:600;
}
.swal2-cancel.swal2-styled{
  background:var(--surface)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;
}

/* ---- Flatpickr ---- */
.flatpickr-calendar{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-2);
}
.flatpickr-day.selected{background:var(--accent);border-color:var(--accent);color:var(--pri-fg)}
.flatpickr-day:hover{background:var(--accent-soft)}
.flatpickr-months .flatpickr-month{color:var(--text)}

/* ---- Toastr ---- */
#toast-container > div{
  border-radius:var(--r)!important;box-shadow:var(--sh-3)!important;
  opacity:1!important;font-family:var(--f-ui);
}