/* ============================================================
   SOUL MUSIK · Capa de compatibilidad (reemplazo de Bootstrap)
   ------------------------------------------------------------
   Reimplementa con CSS Grid/Flexbox y los tokens v2 las clases
   que el markup existente ya usa (row, col-*, panel, form-*,
   btn-*, etc.), para poder sacar bootstrap.min.css sin tener que
   reescribir los ~141 templates que las usan.

   Se carga DESPUÉS de soul-v2.css y en lugar de bootstrap.
   Solo cubre lo que el proyecto realmente usa (medido con grep).
   ============================================================ */

/* ---------- Contenedores ---------- */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}

.container { max-width: 1240px; }

/* ---------- Grid de 12 columnas ----------
   .row es flex con gutters; las columnas usan porcentaje.
   Equivale al grid de Bootstrap 3/4 para los casos en uso. */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
}

.row > [class*="col-"] {
  padding-inline: 15px;
  width: 100%;
  min-width: 0;
}

/* Columnas fuera de un .row también deben respetar su ancho. */
[class*="col-"] {
  padding-inline: 15px;
  min-width: 0;
}

/* Base: en mobile todo ocupa el ancho completo (mobile-first, igual que BS). */
[class*="col-xs-"] { width: 100%; }

.col-xs-12 { width: 100%; }

@media (min-width: 576px) {
  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6667%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1  { width: 8.3333%; }
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6667%; }
  .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1  { width: 8.3333%; }
  .col-lg-2  { width: 16.6667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6667%; }
  .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1  { width: 8.3333%; }
  .col-xl-2  { width: 16.6667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.3333%; }
  .col-xl-6  { width: 50%; }
  .col-xl-8  { width: 66.6667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-12 { width: 100%; }
}

/* ---------- Paneles (se ven como las cards v2) ---------- */
.panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2dfd8);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow, 0 10px 30px rgba(23,23,23,.07));
  margin-bottom: 20px;
}

.panel-heading {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft, #ebe8e2);
}

.panel-body { padding: 20px; }

.panel-title {
  margin: 0;
  font-family: var(--f-d, 'Space Grotesk', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #171717);
  letter-spacing: -.01em;
}

.panel-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft, #ebe8e2);
}

.well {
  background: var(--surface-2, #faf9f6);
  border: 1px solid var(--border, #e2dfd8);
  border-radius: var(--r, 8px);
  padding: 18px;
}

/* ---------- Formularios ---------- */
.form-group { margin-bottom: 16px; }

.form-control {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--input, var(--surface, #fff));
  border: 1px solid var(--border, #e2dfd8);
  border-radius: var(--r, 8px);
  color: var(--text, #171717);
  font-family: var(--f-d, inherit);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}

.form-control:focus {
  outline: 0;
  border-color: var(--coral-fill, #ff5e45);
  box-shadow: 0 0 0 3px var(--coral-2, rgba(255,94,69,.14));
}

.input-group { display: flex; align-items: stretch; }
.input-group > .form-control { flex: 1 1 auto; }

.input-group-addon,
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--surface-3, #f0eee9);
  border: 1px solid var(--border, #e2dfd8);
  color: var(--text-2, #5c5a55);
  font-size: 13px;
}

label { font-weight: 600; color: var(--text-2, #5c5a55); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r, 8px);
  font-family: var(--f-d, inherit);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: filter .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

.btn:hover { filter: brightness(.95); text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--coral-fill, #ff5e45); color: #fff; }
.btn-success { background: #2f7d4f; color: #fff; }
.btn-danger  { background: var(--err, #c1123c); color: #fff; }
.btn-warning { background: var(--amber-fill, #fdb900); color: var(--ink, #171717); }
.btn-info    { background: var(--surface-3, #f0eee9); color: var(--text, #171717); }

.btn-default,
.btn-secondary {
  background: var(--surface, #fff);
  border-color: var(--border, #e2dfd8);
  color: var(--text, #171717);
}

.btn-link {
  background: none;
  color: var(--coral, #c0341b);
  text-decoration: underline;
  padding-inline: 4px;
}

.btn-sm { padding: 7px 11px; font-size: 12.5px; border-radius: var(--r, 8px); }
.btn-lg { padding: 13px 22px; font-size: 15.5px; }
.btn-block { display: flex; width: 100%; }

.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Tablas ---------- */
.table { width: 100%; border-collapse: collapse; color: var(--text, #171717); }

.table th,
.table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft, #ebe8e2);
  text-align: left;
  vertical-align: middle;
}

.table thead th {
  font-family: var(--f-m, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3, #8b8880);
  border-bottom: 1px solid var(--border, #e2dfd8);
}

.table-striped tbody tr:nth-child(odd) { background: var(--surface-2, #faf9f6); }
.table-bordered th,
.table-bordered td { border: 1px solid var(--border-soft, #ebe8e2); }
.table-responsive { width: 100%; overflow-x: auto; }

/* ---------- Alertas y etiquetas ---------- */
.alert {
  padding: 13px 16px;
  border: 1px solid var(--border, #e2dfd8);
  border-left-width: 3px;
  border-radius: var(--r, 8px);
  margin-bottom: 16px;
}

.alert-success { border-left-color: #2f7d4f; background: rgba(47,125,79,.08); }
.alert-info    { border-left-color: var(--coral-fill, #ff5e45); background: var(--coral-2, rgba(255,94,69,.1)); }
.alert-warning { border-left-color: var(--amber-fill, #fdb900); background: var(--amber-2, rgba(253,185,0,.14)); }
.alert-danger  { border-left-color: var(--err, #c1123c); background: rgba(193,18,60,.08); }

.label,
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill, 100px);
  background: var(--surface-3, #f0eee9);
  color: var(--text-2, #5c5a55);
  font-family: var(--f-m, monospace);
  font-size: 11px;
  font-weight: 600;
}

.label-success, .badge-success { background: rgba(47,125,79,.14); color: #2f7d4f; }
.label-danger,  .badge-danger  { background: rgba(193,18,60,.12); color: var(--err, #c1123c); }
.label-warning, .badge-warning { background: var(--amber-2, rgba(253,185,0,.18)); color: var(--warn, #9c4d00); }
.label-info,    .badge-info    { background: var(--coral-2, rgba(255,94,69,.14)); color: var(--coral, #c0341b); }

/* ---------- Utilidades que usa el markup ---------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.pull-right  { float: right; }
.pull-left   { float: left; }
.clearfix::after { content: ""; display: table; clear: both; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Navegación por pestañas (sin JS de Bootstrap) ---------- */
.nav-tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 1px solid var(--border, #e2dfd8);
  flex-wrap: wrap;
}

.nav-tabs > li > a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r, 8px) var(--r, 8px) 0 0;
  color: var(--text-2, #5c5a55);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a.active {
  color: var(--text, #171717);
  border-bottom-color: var(--coral-fill, #ff5e45);
}

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* ---------- Dropdown (el JS propio togglea .open) ----------
   Ojo: el markup del layout clásico NO envuelve el menú en un
   .dropdown (es <li class="profile"><a data-toggle="dropdown">…
   <div class="dropdown-menu">). Por eso el ancla de posición se
   toma de cualquier elemento que contenga un .dropdown-menu. */
.dropdown { position: relative; display: inline-block; }

li:has(> .dropdown-menu),
div:has(> .dropdown-menu),
.notify-toggle-wrapper,
.profile,
.dropdown-toggle-wrapper { position: relative; }

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2dfd8);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow, 0 10px 30px rgba(23,23,23,.12));
  z-index: 1000;
  list-style: none;
  margin: 0;
}

.dropdown.open > .dropdown-menu,
.dropdown-menu.show { display: block; }

.dropdown-menu > li > a,
.dropdown-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r, 8px);
  color: var(--text, #171717);
  text-decoration: none;
  font-size: 14px;
}

.dropdown-menu > li > a:hover,
.dropdown-item:hover { background: var(--surface-2, #faf9f6); }

/* ---------- Modal (el JS propio togglea .show) ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-y: auto;
  background: rgba(23, 23, 23, .55);
}

.modal.show,
.modal.in { display: block; }

.modal-dialog {
  max-width: 560px;
  margin: 6vh auto;
  padding-inline: 16px;
}

.modal-content {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2dfd8);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft, #ebe8e2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body { padding: 20px; }

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft, #ebe8e2);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}