/* ============================================================================
   responsive.css — Primitivas fluidas de Breviis
   ----------------------------------------------------------------------------
   Objetivo: que un componente sea responsive SIN escribir @media. Estas
   utilidades se adaptan solas al ancho disponible, por lo que evitan la
   proliferación de breakpoints (que es la causa de "ajusto un teléfono y se
   descuadra otro"). Ver docs/DESIGN_SYSTEM.md §9.

   Son OPT-IN: agregás la clase donde la necesitás. No pisan estilos existentes
   ni clases de Bootstrap, así que incluir este archivo no cambia nada hasta que
   usás una clase.

   Breakpoints permitidos (único set, Bootstrap 5), por si necesitás un @media:
     min-width: 576 / 768 / 992 / 1200 / 1400
     max-width: 575.98 / 767.98 / 991.98 / 1199.98 / 1399.98
   ========================================================================== */

/* --- Tokens de espaciado/medidas usados por las primitivas --------------- */
:root {
  --bv-gap: 0.75rem;          /* separación estándar entre elementos */
  --bv-tap: 44px;             /* touch target mínimo (Apple HIG) */
  --bv-grid-min: 240px;       /* ancho mínimo de celda en .bv-auto-grid */
}

/* --- Cluster: grupo de elementos (botones, chips) que ENVUELVEN solos -----
   Reemplaza el patrón frágil de botones en fila que se "corren" o desbordan
   en pantallas chicas. Hacen wrap automático con separación consistente. */
.bv-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bv-gap);
  align-items: center;
}
.bv-cluster--end { justify-content: flex-end; }
.bv-cluster--between { justify-content: space-between; }

/* --- Stack: apilado vertical con separación uniforme --------------------- */
.bv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bv-gap);
}

/* --- Auto-grid: columnas que se reacomodan según el ancho, sin @media -----
   Pasa de N columnas a 1 sola automáticamente. Ideal para tarjetas/métricas. */
.bv-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--bv-grid-min), 100%), 1fr));
  gap: var(--bv-gap);
}

/* --- Touch targets: asegura área tocable mínima -------------------------
   Aplicá .bv-tap a botones/links chicos (iconos) para que el dedo no toque
   el control de al lado (otra causa de la sensación de "botón corrido"). */
.bv-tap {
  min-width: var(--bv-tap);
  min-height: var(--bv-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Tipografía fluida: escala entre móvil y desktop sin saltos ----------
   clamp(mínimo, preferido-según-viewport, máximo). Evita font-size por @media. */
.bv-fluid-title { font-size: clamp(1.25rem, 1rem + 2.5vw, 2rem); line-height: 1.2; }
.bv-fluid-text  { font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem); }

/* --- Contención de overflow: impide que contenido ancho rompa el layout --
   El desborde horizontal es la causa #1 de "se ve mal en otro teléfono". */
.bv-no-overflow { overflow-x: hidden; }
.bv-min0 { min-width: 0; }              /* permite truncar dentro de flex/grid */
.bv-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}