/* ============================================================
   GH Design System — Bootstrap Override Layer
   Mapea clases Bootstrap a CSS variables del design system.
   El :root con las variables viene del layout (dashboard.phtml).
   ============================================================ */

/* --- Body --- */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font, 'DM Sans', system-ui, sans-serif) !important;
}

/* --- Estructura consistente de paginas --- */
.app-page { padding: 20px 0 28px; }
.app-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.app-page-heading { min-width: 0; }
.app-page-eyebrow {
  margin-bottom: 3px;
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.app-page-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.app-page-description {
  margin: 4px 0 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.45;
}
.app-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.app-page-actions .btn,
.app-action {
  width: auto !important;
  min-height: 34px;
  padding: 6px 12px !important;
  white-space: nowrap;
}
.app-section-title {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.app-section-description {
  margin: 3px 0 0;
  color: var(--text2);
  font-size: 12px;
}
.app-card-header { padding: 13px 16px !important; }
.app-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
}
.app-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.app-panel-title {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.app-panel-subtitle {
  margin: 3px 0 0;
  color: var(--text3);
  font-size: 11px;
}
.app-panel-body { padding: 18px; }
.app-panel-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--r);
  color: var(--accent);
  background: rgba(79,142,247,.12);
}
.app-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.app-form-sidebar {
  position: sticky;
  top: 72px;
}
.app-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 180px)) minmax(170px, 1fr);
  align-items: end;
  gap: 12px;
}
.app-filter-field { min-width: 0; }
.app-filter-field .form-control,
.app-filter-field .form-select { width: 100%; min-height: 34px; }
.app-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 34px;
}
.app-filter-row .form-label {
  margin-bottom: 4px;
  color: var(--text3) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.app-empty-state {
  padding: 38px 16px;
  color: var(--text3);
  font-size: 13px;
  text-align: center;
}
.app-empty-state i {
  display: block;
  margin-bottom: 8px;
  font-size: 28px;
}
@media (max-width: 900px) {
  .app-form-grid { grid-template-columns: 1fr; }
  .app-form-sidebar { position: static; }
  .app-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-filter-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .app-filter-row { grid-template-columns: 1fr; }
  .app-filter-actions { grid-column: auto; }
}
@media (max-width: 640px) {
  .app-page { padding-top: 14px; }
  .app-page-header { align-items: stretch; }
  .app-page-actions { justify-content: flex-start; width: 100%; }
}

/* --- Botones --- */
.btn {
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: opacity .13s, background .13s !important;
}
.btn:focus, .btn:focus-visible { box-shadow: none !important; outline: none !important; }
.btn:hover { opacity: .9; }

.btn-primary   { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-success   { background: var(--green)  !important; border-color: var(--green)  !important; color: #fff !important; }
.btn-danger    { background: var(--red)    !important; border-color: var(--red)    !important; color: #fff !important; }
.btn-warning   { background: var(--amber)  !important; border-color: var(--amber)  !important; color: #fff !important; }
.btn-info      { background: var(--teal)   !important; border-color: var(--teal)   !important; color: #fff !important; }
.btn-secondary { background: var(--bg4)    !important; border-color: var(--border2)!important; color: var(--text2) !important; }

.btn-outline-primary   { background: none !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-outline-primary:hover { background: rgba(79,142,247,.1) !important; }
.btn-outline-success   { background: none !important; border-color: var(--green)  !important; color: var(--green)  !important; }
.btn-outline-success:hover { background: var(--green-bg) !important; }
.btn-outline-danger    { background: none !important; border-color: var(--red)    !important; color: var(--red)    !important; }
.btn-outline-danger:hover  { background: var(--red-bg) !important; }
.btn-outline-warning   { background: none !important; border-color: var(--amber)  !important; color: var(--amber)  !important; }
.btn-outline-warning:hover { background: rgba(245,166,35,.08) !important; }
.btn-outline-info      { background: none !important; border-color: var(--teal)   !important; color: var(--teal)   !important; }
.btn-outline-info:hover    { background: rgba(34,211,238,.08) !important; }
.btn-outline-secondary { background: none !important; border-color: var(--border2)!important; color: var(--text2)  !important; }
.btn-outline-secondary:hover { background: var(--bg3) !important; color: var(--text) !important; }

.btn-sm { font-size: 12px !important; padding: 4px 10px !important; }
.btn-lg { font-size: 14px !important; padding: 10px 20px !important; }

/* --- Cards --- */
.card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rl) !important;
  box-shadow: none !important;
}
.card-header {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.card-body  { color: var(--text) !important; background: var(--bg2) !important; }
.card-footer {
  background: var(--bg3) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text2) !important;
}
.card-title { color: var(--text) !important; }
.card-text  { color: var(--text2) !important; }

/* --- Modales --- */
.modal-content {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--rl) !important;
  color: var(--text) !important;
}
.modal-header {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.modal-body   { background: var(--bg2) !important; color: var(--text) !important; }
.modal-footer {
  background: var(--bg3) !important;
  border-top: 1px solid var(--border) !important;
}
.modal-title { color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; }
.btn-close   { filter: invert(1) grayscale(1); opacity: .6; }
.btn-close:hover { opacity: 1; }
html.light .btn-close { filter: none; }

/* --- Formularios --- */
.form-control, .form-select {
  background: var(--bg3) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  background: var(--bg3) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: var(--text3) !important; }
.form-control:disabled, .form-control[readonly] {
  background: var(--bg4) !important;
  color: var(--text3) !important;
}
.form-label { color: var(--text) !important; font-size: 13px !important; }
.form-text  { color: var(--text2) !important; }
.form-check-input {
  background-color: var(--bg3) !important;
  border-color: var(--border2) !important;
}
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-input:focus { box-shadow: none !important; }
.form-check-label { color: var(--text2) !important; }
.form-select option { background: var(--bg3); color: var(--text); }

.input-group-text {
  background: var(--bg3) !important;
  border-color: var(--border2) !important;
  color: var(--text2) !important;
  font-size: 13px !important;
}

/* --- Dropdowns --- */
.dropdown-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
  padding: 4px !important;
}
.dropdown-item {
  color: var(--text2) !important;
  font-size: 13px !important;
  border-radius: calc(var(--r) - 2px) !important;
  padding: 7px 12px !important;
  transition: background .1s, color .1s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--bg3) !important;
  color: var(--text) !important;
}
.dropdown-item.text-danger  { color: var(--red) !important; }
.dropdown-item.text-danger:hover  { background: var(--red-bg) !important; }
.dropdown-item.text-success { color: var(--green) !important; }
.dropdown-item.text-primary { color: var(--accent) !important; }
.dropdown-divider { border-color: var(--border) !important; margin: 4px 0 !important; }

/* --- Tablas Bootstrap --- */
.table { color: var(--text) !important; }
.table > :not(caption) > * > * { border-color: var(--border) !important; }
.table thead th, .table thead td {
  background: var(--bg3) !important;
  color: var(--text3) !important;
  border-color: var(--border) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,.015) !important;
  color: var(--text) !important;
}
.table-hover > tbody > tr:hover > * {
  background: var(--bg3) !important;
  color: var(--text) !important;
}
.table-dark { background: var(--bg3) !important; }

/* --- Paginación Bootstrap --- */
.page-link {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  font-size: 13px;
}
.page-link:hover { background: var(--bg4) !important; color: var(--text) !important; }
.page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.page-item.disabled .page-link {
  background: var(--bg3) !important;
  color: var(--text3) !important;
  border-color: var(--border) !important;
  opacity: .5;
}

/* --- Badges --- */
.badge { border-radius: 20px !important; font-weight: 500 !important; }
.bg-primary   { background: var(--accent) !important; }
.bg-success   { background: var(--green)  !important; }
.bg-danger    { background: var(--red)    !important; }
.bg-warning   { background: var(--amber)  !important; color: #fff !important; }
.bg-info      { background: var(--teal)   !important; color: #fff !important; }
.bg-secondary { background: var(--bg4)    !important; color: var(--text2) !important; }
.bg-light     { background: var(--bg3)    !important; }
.bg-dark      { background: var(--bg4)    !important; }

/* --- Alerts Bootstrap --- */
.alert { border-radius: var(--r) !important; font-size: 13px !important; }
.alert-success {
  background: var(--green-bg) !important;
  border-color: rgba(46,207,138,.25) !important;
  color: var(--green) !important;
}
.alert-danger {
  background: var(--red-bg) !important;
  border-color: rgba(242,92,92,.25) !important;
  color: var(--red) !important;
}
.alert-warning {
  background: rgba(245,166,35,.08) !important;
  border-color: rgba(245,166,35,.3) !important;
  color: var(--amber) !important;
}
.alert-info {
  background: rgba(34,211,238,.08) !important;
  border-color: rgba(34,211,238,.3) !important;
  color: var(--teal) !important;
}

/* --- Utilidades de texto / fondo / borde --- */
.text-muted     { color: var(--text2) !important; }
.text-secondary { color: var(--text2) !important; }
.text-dark      { color: var(--text)  !important; }
.text-light     { color: var(--text3) !important; }
.text-success   { color: var(--green) !important; }
.text-danger    { color: var(--red)   !important; }
.text-warning   { color: var(--amber) !important; }
.text-info      { color: var(--teal)  !important; }
.text-primary   { color: var(--accent)!important; }

.bg-white { background: var(--bg2) !important; }
.bg-body  { background: var(--bg)  !important; }

.border        { border-color: var(--border) !important; }
.border-top    { border-top-color: var(--border) !important; }
.border-bottom { border-bottom-color: var(--border) !important; }
.border-start  { border-left-color: var(--border) !important; }
.border-end    { border-right-color: var(--border) !important; }

.shadow-sm { box-shadow: none !important; border: 1px solid var(--border) !important; }
.shadow    { box-shadow: 0 4px 16px rgba(0,0,0,.2) !important; }

/* --- Spinner --- */
.spinner-border.text-primary { color: var(--accent) !important; }
.spinner-border.text-success { color: var(--green)  !important; }
.spinner-border.text-danger  { color: var(--red)    !important; }
.spinner-border.text-muted   { color: var(--text3)  !important; }

/* --- List groups --- */
.list-group-item {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-size: 13px;
}
.list-group-item:hover { background: var(--bg3) !important; }
.list-group-item.active {
  background: rgba(79,142,247,.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* --- Breadcrumb --- */
.breadcrumb-item { color: var(--text2) !important; font-size: 12px; }
.breadcrumb-item.active { color: var(--text3) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text3) !important; }

/* --- HR --- */
hr { border-color: var(--border) !important; }

/* --- Tooltip --- */
.tooltip-inner {
  background: var(--bg4) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
  font-size: 12px;
}