/* ==========================================================================
   Be Helio · Tema de marca para Bootstrap 5.3
   --------------------------------------------------------------------------
   Identidad tomada del libro de marca (julio 2026) y alineada con el resto
   del ecosistema: las escalas `ink` y el acento de unidad son literalmente
   las mismas que en Be Helio Finance (`cash-flow`, Tailwind v4). Allá viven
   en `assets/input.css` como `@theme`; acá, al ser Bootstrap, viven como
   variables CSS. Los valores hex deben coincidir entre los dos proyectos.

   Be Helio le asigna un color a cada área de negocio. A este producto —el
   vertical de ventas y facturación— le corresponde **Rosado SALES**, igual
   que la píldora del logotipo. Se usa siempre como **fondo con texto Negro
   Helio encima**, nunca con texto blanco (rosa con blanco da 2.2 de
   contraste; con negro, 7.4).

   Cargar DESPUÉS del CSS de Bootstrap y ANTES de tus estilos propios:

     <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
     <link rel="stylesheet" href="{% static 'css/behelio-fonts.css' %}">
     <link rel="stylesheet" href="{% static 'css/behelio-theme.css' %}">
   ========================================================================== */

/* ==========================================================================
   1. ESCALAS DE MARCA (mismos valores que cash-flow)
   ========================================================================== */
:root {
  /* -- Neutros: Blanco Helio(50) / Crema Confianza(200) / Gris Flexibilidad(800) / Negro Helio(950) -- */
  --ink-50:  #fffcf3;
  --ink-100: #f7f2e8;
  --ink-200: #ede4d9;
  --ink-300: #d9cfc2;
  --ink-400: #b0a79c;
  --ink-500: #877f76;
  --ink-600: #635c55;
  --ink-700: #4f4a45;
  --ink-800: #3f3f3f;
  --ink-900: #2b2b2b;
  --ink-950: #1f1f1f;

  /* -- Acento de unidad: Rosado SALES (en Finance, este mismo rol lo cumple
        el Verde Finance). El paso de marca es el 400. -- */
  --sales-50:  #ffebe9;
  --sales-100: #ffd0d8;
  --sales-200: #ffb6c8;
  --sales-300: #ff99b6;
  --sales-400: #ff7da5;   /* el color de marca */
  --sales-500: #e07092;
  --sales-600: #c16380;
  --sales-700: #a2566d;
  --sales-800: #83495b;
  --sales-900: #6b3c4c;
  --sales-950: #4a2b36;

  /* -- Turquesa Operations: en el ecosistema marca lo que entra / va bien -- */
  --inflow-50:  #eff4ec;
  --inflow-100: #d5e7e0;
  --inflow-300: #a0cec7;
  --inflow-400: #85c1bb;
  --inflow-500: #77aaa5;
  --inflow-700: #5a7e7a;
  --inflow-800: #4c6764;

  /* -- Naranja Strategy y Morado People: atención e información -- */
  --strategy-100: #ffede2;
  --strategy-400: #ffa06c;
  --strategy-700: #a34e1e;
  --people-100:   #edefff;
  --people-400:   #aeb8ff;
  --people-700:   #3e47a8;
}

/* ==========================================================================
   2. TOKENS SEMÁNTICOS (--bh-*), apoyados en las escalas
   ========================================================================== */
:root {
  /* Marca */
  --bh-negro:       var(--ink-950);   /* primario / superficies oscuras */
  --bh-negro-900:   #101010;          /* presionado sobre negro */
  --bh-rosa:        var(--sales-400); /* acento / CTA · Rosado SALES */
  --bh-rosa-600:    var(--sales-300); /* hover: aclara, no oscurece */
  --bh-rosa-700:    var(--sales-700); /* foco */
  --bh-enlace:      var(--sales-800); /* enlaces (mismo paso que Finance) */

  /* Neutrales */
  --bh-blanco:      var(--ink-50);    /* fondo de app · Blanco Helio */
  --bh-crema-50:    var(--ink-100);   /* cabeceras de tabla / hovers */
  --bh-crema:       var(--ink-200);   /* Crema Confianza */
  --bh-titulo:      var(--ink-900);  /* encabezados */
  --bh-cuerpo:      var(--ink-800);   /* Gris Flexibilidad */
  --bh-suave:       var(--ink-600);   /* texto secundario */
  --bh-borde:       var(--ink-200);
  --bh-borde-2:     var(--ink-300);   /* bordes de inputs */

  /* Colores de las otras unidades (uso semántico) */
  --bh-naranja:     var(--strategy-400);
  --bh-turquesa:    var(--inflow-400);
  --bh-verde:       #e7fc90;          /* Verde Finance, por si se cita */
  --bh-morado:      var(--people-400);

  /* Estados semánticos */
  --bh-ok:   var(--inflow-400);   --bh-ok-bg:   var(--inflow-50);    --bh-ok-fg:   var(--inflow-800);
  --bh-warn: var(--strategy-400); --bh-warn-bg: var(--strategy-100); --bh-warn-fg: var(--strategy-700);
  --bh-err:  #e5484d;             --bh-err-bg:  #fdecec;             --bh-err-fg:  #b02730;
  --bh-info: var(--people-400);   --bh-info-bg: var(--people-100);   --bh-info-fg: var(--people-700);

  /* Tipografía · mismas familias y mismos roles que en Finance */
  --bh-font-ui:      'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bh-font-display: 'Poppins', var(--bh-font-ui);          /* Black, solo h1 */
  --bh-font-serif:   'Gelasio', ui-serif, Georgia, serif;
  --bh-font-hand:    'Architect Pro', var(--bh-font-ui);
  /* Mono es propio de este producto: las claves de Hacienda tienen 50 dígitos
     y sin ancho fijo no se pueden comparar de un vistazo. */
  --bh-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Radios · rounded-lg / rounded-xl / rounded-2xl / rounded-full */
  --bh-r-sm: 8px;  --bh-r-md: 12px;  --bh-r-lg: 16px;  --bh-r-pill: 999px;

  /* Elevación */
  --bh-shadow-card: 0 1px 2px 0 rgb(31 31 31 / 0.04), 0 1px 3px 0 rgb(31 31 31 / 0.06);
  --bh-shadow-lift: 0 10px 30px -12px rgb(31 31 31 / 0.18);
  --bh-shadow-glow: 0 8px 28px -8px rgb(255 125 165 / 0.45);

  /* ---------- Mapeo a Bootstrap 5.3 ---------- */
  --bs-primary:          var(--bh-negro);
  --bs-primary-rgb:      31, 31, 31;
  --bs-link-color:       var(--bh-enlace);
  --bs-link-color-rgb:   131, 73, 91;
  --bs-link-hover-color: var(--bh-negro);
  --bs-body-color:       var(--bh-cuerpo);
  --bs-body-color-rgb:   63, 63, 63;
  --bs-body-bg:          var(--bh-blanco);
  --bs-border-color:     var(--bh-borde);
  --bs-border-radius:    var(--bh-r-md);
  --bs-font-sans-serif:  var(--bh-font-ui);
  --bs-success:          var(--bh-ok);
  --bs-warning:          var(--bh-warn);
  --bs-danger:           var(--bh-err);
  --bs-info:             var(--bh-info);
}

/* ==========================================================================
   3. TIPOGRAFÍA
   --------------------------------------------------------------------------
   Poppins Black se reserva al título de primer nivel. Usarla en cada
   subtítulo vuelve ilegible una pantalla densa en números — misma regla que
   en Finance (`h1 { @apply font-display }` y nada más).
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--bh-font-ui); -webkit-font-smoothing: antialiased; }

/* Foco visible y consistente en toda la aplicación. Nunca se elimina: es el
   único indicador de posición para quien navega con teclado. */
:focus-visible { outline: 2px solid var(--sales-700); outline-offset: 2px; }
::selection { background: var(--sales-200); color: var(--ink-950); }

/* Respeta a quien pidió menos animación en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

h1, .h1, .display-1, .display-2, .bh-display {
  font-family: var(--bh-font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-fg-default, var(--bh-titulo));
  text-wrap: balance;
}
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bh-font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-fg-default, var(--bh-titulo));
  text-wrap: balance;
}
/* Título de página. La app usa <h2> para el encabezado de cada pantalla, así
   que la clase es lo que le devuelve el peso de marca sin romper la jerarquía
   de encabezados que ya existe. */
.page-title {
  font-family: var(--bh-font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--color-fg-default, var(--bh-titulo));
}

/* Títulos secundarios en serif de marca (citas, subtítulos editoriales) */
.bh-serif { font-family: var(--bh-font-serif); font-weight: 600; letter-spacing: 0; }
/* Acento manuscrito: el mismo trazo de la píldora "SALES" */
.bh-accent, .bh-hand { font-family: var(--bh-font-hand); font-weight: 400; }
.text-mono, .clave, code, .fm { font-family: var(--bh-font-mono); }

/* Los importes se alinean en columna: cifras de ancho fijo. */
.tabular, .amount, .bh-kpi-value, td .amount, .amount-total {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Enlaces: sin subrayado en reposo, subrayado al pasar (patrón de Finance). */
a { color: var(--bh-enlace); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Un ancla que es un componente no es un enlace de texto: un botón, un ítem
   de menú o una entrada de navegación no se subrayan al pasar el cursor. La
   regla de arriba se los estaba aplicando a todos por igual. */
.btn:hover,
.dropdown-item:hover,
.nav-link:hover,
.page-link:hover,
.badge:hover,
.sidebar-menu a:hover,
.bh-row-actions a:hover,
.bh-actions-menu a:hover,
.listing-action-btn:hover,
.card > a:hover,
a.card:hover,
a.stretched-link:hover { text-decoration: none; }

/* Píldora de marca: rosa + trazo manuscrito (lockup del logotipo) */
.bh-pill {
  display:inline-block; background: var(--bh-rosa); color: var(--ink-950);
  font-family: var(--bh-font-hand); font-size: 13px; line-height: 1;
  padding: 7px 16px 6px; border-radius: var(--bh-r-pill); letter-spacing: .04em;
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */
.btn {
  border-radius: var(--bh-r-md);
  font-weight: 600;
  font-size: 14px;
  /* Igual que en Finance: la etiqueta de un botón no se parte en dos líneas.
     Sin esto, en una celda estrecha el icono queda encima del texto. */
  white-space: nowrap;
  padding: 0.625rem 1rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-sm { border-radius: var(--bh-r-sm); padding: 0.375rem 0.75rem; font-size: 12px; }
.btn-lg { padding: 0.75rem 1.25rem; font-size: 1rem; }

/* CTA de unidad = ROSADO SALES con texto Negro Helio. Aclara al pasar el
   cursor y oscurece al presionar, como en Finance. */
.btn-primary, .btn-bh-cta {
  --bs-btn-color:#1f1f1f; --bs-btn-bg:var(--sales-400); --bs-btn-border-color:var(--sales-400);
  --bs-btn-hover-color:#1f1f1f; --bs-btn-hover-bg:var(--sales-300); --bs-btn-hover-border-color:var(--sales-300);
  --bs-btn-active-bg:var(--sales-500); --bs-btn-active-border-color:var(--sales-500); --bs-btn-active-color:#1f1f1f;
  --bs-btn-disabled-color:#1f1f1f; --bs-btn-disabled-bg:var(--sales-400); --bs-btn-disabled-border-color:var(--sales-400);
  box-shadow: var(--bh-shadow-card);
  font-weight: 600;
}
/* Sólido = NEGRO HELIO con texto Blanco Helio */
.btn-bh-negro, .btn-dark {
  --bs-btn-color:#fffcf3; --bs-btn-bg:var(--ink-950); --bs-btn-border-color:var(--ink-950);
  --bs-btn-hover-color:#fffcf3; --bs-btn-hover-bg:var(--ink-900); --bs-btn-hover-border-color:var(--ink-900);
  --bs-btn-active-bg:var(--bh-negro-900); --bs-btn-active-color:#fffcf3;
}
/* Secundario = blanco con anillo crema */
.btn-outline-secondary {
  --bs-btn-color: var(--color-fg-default, var(--ink-800));
  --bs-btn-bg: var(--color-canvas-default, #ffffff);
  --bs-btn-border-color: var(--color-border-muted, var(--ink-200));
  --bs-btn-hover-bg: var(--color-neutral-muted, var(--ink-50));
  --bs-btn-hover-color: var(--color-fg-default, var(--ink-950));
  --bs-btn-hover-border-color: var(--color-border-default, var(--ink-200));
  box-shadow: var(--bh-shadow-card);
}
/* Tercer nivel: sin fondo ni borde hasta que se lo toca. Es el que llevan
   las acciones de fila y los controles secundarios de las barras. */
/* Los pasos de la escala van como respaldo, no como valor: sin los tokens
   `--color-*` el hover se quedaba en el crema del tema claro y en oscuro
   aparecía un bloque blanco bajo el cursor. */
.btn-ghost {
  --bs-btn-color: var(--color-fg-muted, var(--ink-600));
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-fg-default, var(--ink-900));
  --bs-btn-hover-bg: var(--color-neutral-muted, var(--ink-100));
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--color-canvas-subtle, var(--ink-200));
  --bs-btn-active-color: var(--color-fg-default, var(--ink-950));
  box-shadow: none;
}

/* Las variantes de Bootstrap traen su verde y su rojo compilados, que no
   salen de `--bs-success`/`--bs-danger`: sin esto quedaban fuera de paleta
   (el verde de Bootstrap junto al rosa de marca se veía de otra aplicación).
   El ecosistema tiene cuatro niveles —acento, secundario, fantasma y
   peligro—; estas variantes se reconducen a ellos. */
.btn-success {
  --bs-btn-color:#1f1f1f; --bs-btn-bg:var(--inflow-400); --bs-btn-border-color:var(--inflow-400);
  --bs-btn-hover-color:#1f1f1f; --bs-btn-hover-bg:var(--inflow-300); --bs-btn-hover-border-color:var(--inflow-300);
  --bs-btn-active-bg:var(--inflow-500); --bs-btn-active-color:#1f1f1f;
  --bs-btn-disabled-color:#1f1f1f; --bs-btn-disabled-bg:var(--inflow-400); --bs-btn-disabled-border-color:var(--inflow-400);
}
.btn-warning {
  --bs-btn-color:#1f1f1f; --bs-btn-bg:var(--strategy-400); --bs-btn-border-color:var(--strategy-400);
  --bs-btn-hover-color:#1f1f1f; --bs-btn-hover-bg:#FFB88E; --bs-btn-hover-border-color:#FFB88E;
  --bs-btn-disabled-color:#1f1f1f; --bs-btn-disabled-bg:var(--strategy-400); --bs-btn-disabled-border-color:var(--strategy-400);
}
.btn-danger {
  --bs-btn-color:#fff; --bs-btn-bg:var(--bh-err-fg); --bs-btn-border-color:var(--bh-err-fg);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#8F1F27; --bs-btn-hover-border-color:#8F1F27;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--bh-err-fg); --bs-btn-disabled-border-color:var(--bh-err-fg);
}
.btn-outline-danger {
  --bs-btn-color: var(--bh-err-fg);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--bh-err-bg);
  --bs-btn-hover-color: var(--bh-err-fg);
  --bs-btn-hover-bg: var(--bh-err-bg);
  --bs-btn-hover-border-color: var(--bh-err-bg);
}

.btn:focus-visible { outline: 2px solid var(--sales-700); outline-offset: 2px; box-shadow: none; }

/* Estado ocupado (core/js/bh-submit-guard.js): el spinner ocupa el lugar del
   icono y la etiqueta se queda, para que el botón siga diciendo qué hace. */
.btn[data-bh-busy="1"] { cursor: progress; opacity: 1; }
.btn[data-bh-busy="1"] > i,
.btn[data-bh-busy="1"] > svg { display: none; }
.btn[data-bh-busy="1"] > .bh-spin {
  width: 0.9em; height: 0.9em; border-width: 0.15em;
  vertical-align: -0.1em; margin-right: 0.45em;
}
/* Bootstrap apaga el botón desactivado; acá no está inhabilitado, está
   trabajando, y verlo apagado se lee como "no funcionó". */
.btn[data-bh-busy="1"]:disabled { opacity: 1; }

/* ==========================================================================
   5. SIDEBAR (superficie clara, como en Finance)
   ========================================================================== */
.bh-sidebar { background: #ffffff; color: var(--ink-600); width: 260px; padding: 16px 12px; }
.bh-sidebar .nav-link {
  color: var(--ink-600); font-weight:500; border-radius: var(--bh-r-md);
  padding:10px 12px; display:flex; align-items:center; gap:12px; margin-bottom:2px;
}
.bh-sidebar .nav-link:hover { color: var(--ink-950); background: var(--ink-100); }
.bh-sidebar .nav-link.active {
  background: var(--sales-50); color: var(--sales-800); font-weight:600;
}
.bh-sidebar .nav-link.active i { color: var(--sales-700); }
/* Rótulo de grupo de la navegación */
.bh-nav-section {
  padding: 20px 12px 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400);
}

/* ==========================================================================
   6. BADGES / PÍLDORAS DE ESTADO
   ========================================================================== */
.bh-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; padding:2px 10px; border-radius: var(--bh-r-pill);
  box-shadow: inset 0 0 0 1px rgb(31 31 31 / .07);
}
.bh-badge::before { content:""; width:6px; height:6px; border-radius:50%; }
.bh-badge-ok   { background:var(--bh-ok-bg);   color:var(--bh-ok-fg); }
.bh-badge-ok::before   { background:var(--bh-ok); }
.bh-badge-warn { background:var(--bh-warn-bg); color:var(--bh-warn-fg); }
.bh-badge-warn::before { background:var(--bh-warn); }
.bh-badge-err  { background:var(--bh-err-bg);  color:var(--bh-err-fg); }
.bh-badge-err::before  { background:var(--bh-err); }
.bh-badge-info { background:var(--bh-info-bg); color:var(--bh-info-fg); }
.bh-badge-info::before { background:var(--bh-info-fg); }

/* Avatar de iniciales, degradado del acento de unidad */
.bh-avatar {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  border-radius:50%; font-weight:600; color:var(--ink-950);
  background: linear-gradient(to bottom right, var(--sales-400), var(--sales-500));
}

/* ==========================================================================
   7. CARDS / KPI / TABLAS
   ========================================================================== */
.card, .bh-card {
  border: 1px solid rgb(237 228 217 / .7);
  border-radius: var(--bh-r-lg);
  background: #fff;
  box-shadow: var(--bh-shadow-card);
}
.bh-kpi-value { font-size:26px; font-weight:600; color:var(--ink-950); letter-spacing:-.02em; }
.bh-kpi-label { font-size:13px; color:var(--bh-suave); font-weight:500; }
/* Tablas · mismas medidas y bordes que Finance: la cabecera sin fondo, el
   borde en la parte de abajo de cada celda y la última fila sin línea. */
.table thead th {
  background: transparent; font-size:12px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-500); border-bottom:1px solid var(--ink-200);
  padding: 12px 16px;
}
.table tbody td, .table tbody th {
  vertical-align:middle; padding: 14px 16px; font-size: 14px;
  border-bottom:1px solid var(--ink-100); border-top: 0;
}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover { background: rgb(255 252 243 / .7); }
/* La fila entera lleva al detalle: el cursor lo anuncia antes del clic y el
   subrayado dice dónde estaba el enlace. */
.table tbody tr.row-link { cursor: pointer; }
.table tbody tr.row-link:hover td:first-child,
.table tbody tr.row-link:hover td:first-child a { text-decoration: underline; text-underline-offset: 2px; }

/* Acciones de fila. Una sola forma en toda la aplicación: la fila lleva al
   detalle y el resto vive detrás de un único disparador con un menú de texto.
   Antes convivían tres formas —hilera de iconos, botones con texto y enlaces
   sueltos— y cada lista elegía la suya. */
.bh-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.bh-row-actions .btn { padding: 4px 8px; line-height: 1; }
.bh-actions-menu {
  min-width: 210px; padding: 6px;
  border-radius: var(--bh-r-md); border: 1px solid var(--bh-borde);
  box-shadow: var(--bh-shadow-lift);
}
.bh-actions-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--bh-r-sm); font-size: 14px;
}
.bh-actions-menu .dropdown-item.is-danger { color: var(--bh-err-fg); }
.table tfoot td { border-top:1px solid var(--ink-200); background: rgb(255 252 243 / .7); font-weight:600; }

/* ==========================================================================
   8. INPUTS
   ========================================================================== */
.form-control, .form-select {
  border:1px solid var(--ink-300); border-radius: var(--bh-r-md);
  font-family:var(--bh-font-ui); color:var(--color-fg-default, var(--ink-950));
  padding: 0.5rem 0.75rem;
  background-color: var(--color-input-bg, #ffffff);
}
.form-control:focus, .form-select:focus {
  border-color: var(--sales-500);
  box-shadow: inset 0 0 0 2px var(--sales-500);
}
/* Campo de archivo. El botón lo dibuja el navegador con su propio estilo —un
   bloque claro— y en oscuro quedaba un rectángulo blanco dentro del campo.
   `::file-selector-button` es la única forma de alcanzarlo. */
.form-control[type="file"] {
  padding: 0.375rem 0.5rem;
  line-height: 1.9;
}
.form-control[type="file"]::file-selector-button {
  margin: 0 0.75rem 0 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-border-muted, var(--ink-200));
  border-radius: var(--bh-r-sm);
  background: var(--color-neutral-muted, var(--ink-100));
  color: var(--color-fg-default, var(--ink-800));
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.form-control[type="file"]::file-selector-button:hover {
  background: var(--color-canvas-subtle, var(--ink-200));
  border-color: var(--color-border-default, var(--ink-300));
}

.form-check-input:checked { background-color:var(--ink-950); border-color:var(--ink-950); }
.form-check-input:focus { border-color:var(--sales-500); box-shadow:0 0 0 2px rgb(224 112 146 / .45); }

/* ==========================================================================
   9. DEGRADADOS DE MARCA (libro de marca, pág. 23)
   ========================================================================== */
.bh-gradient-sales { background: linear-gradient(120deg, #ff7da5 0%, #ffa06c 100%); }
.bh-gradient-noche { background: linear-gradient(150deg, #1f1f1f 0%, #3f3f3f 100%); }
.bh-gradient-crema { background: linear-gradient(160deg, #fffcf3 0%, #ede4d9 100%); }

/* ==========================================================================
   RESPONSIVE · Targets táctiles (mín. 44px en móvil/tablet < lg)
   ========================================================================== */
@media (max-width: 991.98px) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-menu a,
  .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}