/* ==========================================================================
BFS + · Tema de interfaz · v1.0
--------------------------------------------------------------------------
Hoja única de estilos para las tres interfaces:
1. Panel maestro (escritorio, denso)
2. Módulo corredor (móvil, rápido)
3. Flujo cliente (móvil, una acción por pantalla)
CÓMO USARLA
1. Copia este archivo junto a tus HTML.
2. Agrégalo en el , DESPUÉS de cualquier otro estilo:
3. Los nombres de variable coinciden con los que ya usan
panel-financiera.html y bfs-modulo-financiamiento.html,
así que el color se corrige solo.
4. Para subir de nivel, reemplaza tus clases por las clases .bfs-*
documentadas más abajo.
REGLA: no agregues colores nuevos. Si necesitas un tono,
usa una de las variables de abajo.
========================================================================== */
/* --------------------------------------------------------------------------
1 · TOKENS
-------------------------------------------------------------------------- */
:root {
/* Marca */
--bfs-bosque: #0F3B39; /* fondos oscuros, titulares */
--bfs-bosque-claro: #12514D; /* divisores y chips dentro del bosque */
--bfs-aprobado: #12A67F; /* ACCIÓN: botones, montos, foco */
--bfs-menta: #34D1A6; /* acento sobre oscuro, positivo */
--bfs-papel: #F6F7F5; /* fondo base de la app */
/* Texto y estructura */
--bfs-ink: #16211F; /* texto fuerte */
--bfs-ink-medio: #3A4745; /* párrafos largos */
--bfs-muted: #5C6B68; /* texto secundario */
--bfs-muted-suave: #8E9B98; /* etiquetas, metadatos */
--bfs-muted-tenue: #A3ADAA; /* placeholders, deshabilitado */
--bfs-linea: #E4E7E3; /* bordes */
--bfs-linea-suave: #F1F3F0; /* separadores dentro de tarjeta */
--bfs-blanco: #ffffff;
/* Semánticos */
--bfs-exito: #12A67F;
--bfs-exito-bg: #D7F5EA;
--bfs-exito-ink: #0B5F49;
--bfs-alerta: #E8A33D;
--bfs-alerta-bg: #FBEACB;
--bfs-alerta-ink: #8a5a10;
--bfs-error: #D64545;
--bfs-error-bg: #FADCDC;
--bfs-error-ink: #9c2b2b;
--bfs-info: #2E6BA8;
--bfs-info-bg: #DCE9F7;
--bfs-info-ink: #1f4b7a;
--bfs-neutro-bg: #EFF1EE;
--bfs-verde-tinte: #F3FAF7; /* fondo de bloque informativo positivo */
/* Tipografía */
--bfs-display: 'Sora', system-ui, sans-serif; /* logo, titulares, MONTOS */
--bfs-texto: 'Manrope', system-ui, sans-serif;/* cuerpo, etiquetas, UI */
--bfs-mono: 'IBM Plex Mono', ui-monospace, monospace; /* datos en tabla */
/* Radios — un solo valor por familia, no inventar intermedios */
--bfs-r-control: 11px; /* botones, inputs, chips cuadrados */
--bfs-r-caja: 14px; /* tarjetas internas */
--bfs-r-panel: 18px; /* tarjetas contenedoras */
--bfs-r-movil: 26px; /* marco de pantalla móvil */
--bfs-r-pill: 999px;
/* Espaciado — escala de 4 */
--bfs-e1: 4px; --bfs-e2: 8px; --bfs-e3: 12px; --bfs-e4: 16px;
--bfs-e5: 20px; --bfs-e6: 24px; --bfs-e7: 30px; --bfs-e8: 40px;
/* Sombra — solo una, casi imperceptible. NUNCA sombras duras. */
--bfs-sombra: 0 1px 3px rgba(15, 59, 57, 0.06);
--bfs-foco: 0 0 0 3px rgba(18, 166, 127, 0.16);
/* ---- Puente con los nombres que ya usan los prototipos actuales ---- */
--bg: var(--bfs-papel);
--bg2: var(--bfs-blanco);
--side: var(--bfs-bosque);
--card: var(--bfs-blanco);
--line: var(--bfs-linea);
--ink: var(--bfs-ink);
--muted: var(--bfs-muted);
--brand: var(--bfs-bosque);
--brand2: var(--bfs-aprobado);
--teal: var(--bfs-aprobado);
--menta: var(--bfs-menta);
--amber: var(--bfs-alerta);
--red: var(--bfs-error);
--green: var(--bfs-exito);
--soft: var(--bfs-neutro-bg);
--exito: var(--bfs-exito-bg);
--iso: var(--bfs-aprobado);
}
/* --------------------------------------------------------------------------
2 · BASE
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bfs-papel);
color: var(--bfs-ink);
font-family: var(--bfs-texto);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--bfs-display);
color: var(--bfs-bosque);
letter-spacing: -0.03em;
margin: 0;
}
h1 { font-size: 38px; font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; }
h2 { font-size: 27px; font-weight: 700; line-height: 1.15; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
p { margin: 0 0 1em; color: var(--bfs-ink-medio); text-wrap: pretty; }
a { color: var(--bfs-aprobado); text-decoration: none; }
a:hover { color: var(--bfs-bosque); text-decoration: underline; }
/* Un dato variable, un número de tabla, un identificador → mono. */
code, .bfs-dato { font-family: var(--bfs-mono); font-weight: 500; }
/* --------------------------------------------------------------------------
3 · CIFRAS · la jerarquía más importante del sistema
Una sola cifra héroe por pantalla. Sora 300, tracking muy negativo.
-------------------------------------------------------------------------- */
.bfs-cifra-heroe,
.bfs-cifra-kpi,
.bfs-cifra-media {
font-family: var(--bfs-display);
font-weight: 300;
color: var(--bfs-bosque);
letter-spacing: -0.05em;
line-height: 0.9;
}
.bfs-cifra-heroe { font-size: 76px; }
.bfs-cifra-media { font-size: 52px; }
.bfs-cifra-kpi { font-size: 30px; letter-spacing: -0.045em; }
/* Sufijo "/mes", "USD" — nunca del mismo tamaño que la cifra */
.bfs-cifra-sufijo {
font-family: var(--bfs-texto);
font-weight: 600;
font-size: 14px;
color: var(--bfs-aprobado);
}
/* Sobre fondo Bosque */
.bfs-oscuro .bfs-cifra-heroe,
.bfs-oscuro .bfs-cifra-media,
.bfs-oscuro .bfs-cifra-kpi { color: var(--bfs-blanco); }
.bfs-oscuro .bfs-cifra-sufijo { color: var(--bfs-menta); }
/* Etiqueta que acompaña a toda cifra */
.bfs-etiqueta {
font-family: var(--bfs-texto);
font-weight: 600;
font-size: 10px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bfs-muted-suave);
}
.bfs-oscuro .bfs-etiqueta { color: #7FA69F; }
/* --------------------------------------------------------------------------
4 · SUPERFICIES
-------------------------------------------------------------------------- */
.bfs-panel { /* tarjeta contenedora */
background: var(--bfs-blanco);
border: 1px solid var(--bfs-linea);
border-radius: var(--bfs-r-panel);
}
.bfs-caja { /* tarjeta interna, sin borde */
background: var(--bfs-papel);
border-radius: var(--bfs-r-caja);
padding: var(--bfs-e5);
}
.bfs-oscuro { /* bloque Bosque — máx. 1 o 2 por pantalla */
background: var(--bfs-bosque);
border-radius: var(--bfs-r-panel);
color: var(--bfs-blanco);
position: relative;
overflow: hidden;
}
/* Forma orgánica decorativa. Solo dentro de .bfs-oscuro, nunca sobre claro. */
.bfs-oscuro::after {
content: '';
position: absolute;
right: -90px; bottom: -130px;
width: 320px; height: 320px;
border-radius: 96px;
background: var(--bfs-aprobado);
opacity: 0.2;
pointer-events: none;
}
.bfs-oscuro > * { position: relative; z-index: 1; }
.bfs-tinte { /* bloque informativo positivo */
background: var(--bfs-verde-tinte);
border: 1px solid #bfeeda;
border-radius: var(--bfs-r-caja);
padding: var(--bfs-e4) var(--bfs-e5);
}
/* --------------------------------------------------------------------------
5 · TARJETA KPI · tres pesos, no doce iguales
-------------------------------------------------------------------------- */
.bfs-kpi {
background: var(--bfs-blanco);
border: 1px solid var(--bfs-linea);
border-radius: 16px;
padding: var(--bfs-e5);
display: flex;
flex-direction: column;
gap: var(--bfs-e3);
}
.bfs-kpi--destacada { background: var(--bfs-bosque); border-color: var(--bfs-bosque); }
.bfs-kpi--destacada .bfs-cifra-kpi { color: var(--bfs-blanco); }
.bfs-kpi--destacada .bfs-etiqueta { color: #7FA69F; }
.bfs-kpi--positiva { background: var(--bfs-verde-tinte); border-color: #bfeeda; }
.bfs-kpi--positiva .bfs-etiqueta { color: #0F8A69; }
/* La alerta se marca con barra lateral de 4px. Es el ÚNICO fondo rojo del sistema. */
.bfs-kpi--alerta {
background: var(--bfs-error-bg);
border-color: var(--bfs-error-bg);
position: relative;
overflow: hidden;
}
.bfs-kpi--alerta::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; background: var(--bfs-error);
}
.bfs-kpi--alerta .bfs-etiqueta,
.bfs-kpi--alerta .bfs-cifra-kpi { color: var(--bfs-error-ink); }
/* --------------------------------------------------------------------------
6 · CHIP DE ESTADO · punto sólido + etiqueta, NUNCA solo color
Uso: Al día
-------------------------------------------------------------------------- */
.bfs-chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--bfs-texto);
font-weight: 700;
font-size: 11px;
line-height: 1;
letter-spacing: 0.04em;
border-radius: var(--bfs-r-pill);
padding: 8px 13px;
white-space: nowrap;
}
.bfs-chip > i {
width: 7px; height: 7px;
border-radius: 50%;
flex: none;
background: currentColor;
}
.bfs-chip--dia { color: var(--bfs-exito-ink); background: var(--bfs-exito-bg); }
.bfs-chip--dia > i { background: var(--bfs-exito); }
.bfs-chip--mora { color: var(--bfs-error-ink); background: var(--bfs-error-bg); }
.bfs-chip--mora > i { background: var(--bfs-error); }
.bfs-chip--pendiente { color: var(--bfs-alerta-ink); background: var(--bfs-alerta-bg); }
.bfs-chip--pendiente > i { background: var(--bfs-alerta); }
.bfs-chip--liquidado { color: var(--bfs-blanco); background: var(--bfs-bosque); }
.bfs-chip--liquidado > i { background: var(--bfs-menta); }
.bfs-chip--perdido { color: var(--bfs-muted); background: var(--bfs-neutro-bg); }
.bfs-chip--perdido > i{ background: var(--bfs-muted-suave); }
.bfs-chip--revision { color: var(--bfs-info-ink); background: var(--bfs-info-bg); }
.bfs-chip--revision > i { background: var(--bfs-info); }
/* --------------------------------------------------------------------------
7 · BOTONES · radio 11px, altura mínima 44px (48 en móvil)
-------------------------------------------------------------------------- */
.bfs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bfs-e2);
font-family: var(--bfs-texto);
font-weight: 700;
font-size: 13px;
line-height: 1;
border: none;
border-radius: var(--bfs-r-control);
padding: 15px 22px;
min-height: 44px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.bfs-btn--primario { background: var(--bfs-aprobado); color: var(--bfs-blanco); }
.bfs-btn--primario:hover { background: #0F8A69; }
.bfs-btn--secundario {
background: var(--bfs-blanco);
color: var(--bfs-bosque);
border: 1.5px solid var(--bfs-bosque);
padding: 13.5px 20.5px;
}
.bfs-btn--secundario:hover { background: var(--bfs-papel); }
.bfs-btn--terciario {
background: var(--bfs-papel);
color: var(--bfs-muted);
border: 1px solid var(--bfs-linea);
padding: 14px 21px;
}
.bfs-btn--destructiva {
background: var(--bfs-error);
color: var(--bfs-blanco);
}
.bfs-btn--menta { background: var(--bfs-menta); color: var(--bfs-bosque); }
.bfs-btn--bloque { width: 100%; padding: 18px 0; font-size: 14px; }
.bfs-btn:disabled { background: var(--bfs-neutro-bg); color: var(--bfs-muted-tenue); cursor: not-allowed; }
/* --------------------------------------------------------------------------
8 · CAMPOS · el foco es anillo verde, nunca el azul del navegador
-------------------------------------------------------------------------- */
.bfs-campo {
display: flex;
flex-direction: column;
gap: 7px;
}
.bfs-campo > label {
font-family: var(--bfs-texto);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bfs-muted-suave);
}
.bfs-input, .bfs-campo input, .bfs-campo select, .bfs-campo textarea {
font-family: var(--bfs-texto);
font-weight: 500;
font-size: 14px;
color: var(--bfs-ink);
background: var(--bfs-blanco);
border: 1px solid var(--bfs-linea);
border-radius: var(--bfs-r-control);
padding: 13px 15px;
outline: none;
width: 100%;
}
.bfs-input:focus, .bfs-campo input:focus,
.bfs-campo select:focus, .bfs-campo textarea:focus {
border-color: var(--bfs-aprobado);
box-shadow: var(--bfs-foco);
}
.bfs-input::placeholder { color: var(--bfs-muted-tenue); font-weight: 400; }
/* --------------------------------------------------------------------------
9 · TABLA · cifras en mono para que las columnas se alineen
-------------------------------------------------------------------------- */
.bfs-tabla { width: 100%; border-collapse: collapse; }
.bfs-tabla thead th {
text-align: left;
font-family: var(--bfs-texto);
font-weight: 600;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bfs-muted-suave);
background: var(--bfs-papel);
padding: 12px 16px;
border-bottom: 1px solid var(--bfs-linea);
}
.bfs-tabla tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--bfs-linea-suave);
font-size: 13px;
color: var(--bfs-muted);
}
.bfs-tabla tbody td:first-child { font-weight: 600; color: var(--bfs-ink); }
.bfs-tabla .bfs-num {
text-align: right;
font-family: var(--bfs-mono);
font-weight: 500;
font-size: 14px;
color: var(--bfs-ink);
}
.bfs-tabla tbody tr[data-clic]:hover { background: var(--bfs-papel); cursor: pointer; }
.bfs-tabla tfoot td {
background: var(--bfs-papel);
font-weight: 700;
color: var(--bfs-bosque);
padding: 14px 16px;
}
/* --------------------------------------------------------------------------
10 · COLA DE DECISIÓN · el patrón que ordena el dashboard
Fila = barra de urgencia + chip + descripción + monto + acción.
-------------------------------------------------------------------------- */
.bfs-fila-accion {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 24px;
border-bottom: 1px solid var(--bfs-linea-suave);
}
.bfs-fila-accion__urgencia { width: 4px; height: 40px; border-radius: 2px; flex: none; background: var(--bfs-linea); }
.bfs-fila-accion--critica .bfs-fila-accion__urgencia { background: var(--bfs-error); }
.bfs-fila-accion--atencion .bfs-fila-accion__urgencia { background: var(--bfs-alerta); }
.bfs-fila-accion__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bfs-fila-accion__titulo { font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--bfs-ink); }
.bfs-fila-accion__detalle { font-weight: 400; font-size: 12px; line-height: 1.4; color: var(--bfs-muted); }
.bfs-fila-accion__monto { width: 110px; flex: none; text-align: right; font-family: var(--bfs-mono); font-weight: 500; font-size: 15px; color: var(--bfs-ink); }
/* --------------------------------------------------------------------------
11 · ETAPAS · 7 del corredor / 5 del asistente
El tramo donde está trabado se pinta ámbar; el paso actual queda hueco.
-------------------------------------------------------------------------- */
.bfs-etapas { display: flex; align-items: center; }
.bfs-etapas__nodo {
width: 26px; height: 26px;
border-radius: 9px;
flex: none;
display: grid; place-items: center;
font-family: var(--bfs-texto); font-weight: 700; font-size: 11px;
background: var(--bfs-papel);
border: 1px solid var(--bfs-linea);
color: var(--bfs-muted-tenue);
}
.bfs-etapas__nodo--hecho { background: var(--bfs-aprobado); border-color: var(--bfs-aprobado); color: var(--bfs-blanco); }
.bfs-etapas__nodo--actual { background: var(--bfs-blanco); border: 2.5px solid var(--bfs-alerta); color: var(--bfs-alerta); }
.bfs-etapas__nodo--final { background: var(--bfs-bosque); border-color: var(--bfs-bosque); color: var(--bfs-menta); }
.bfs-etapas__tramo { flex: 1; height: 3px; border-radius: 2px; background: var(--bfs-linea); }
.bfs-etapas__tramo--hecho { background: var(--bfs-aprobado); }
.bfs-etapas__tramo--trabado{ background: var(--bfs-alerta); }
/* Progreso del cliente: segmentos, no barra continua. Muestra el final. */
.bfs-progreso { display: flex; align-items: center; gap: 5px; }
.bfs-progreso > span { flex: 1; height: 4px; border-radius: 2px; background: var(--bfs-linea); }
.bfs-progreso > span.hecho { background: var(--bfs-aprobado); }
/* --------------------------------------------------------------------------
12 · CARGA DE DOCUMENTO · vacío punteado / cargado y error sólidos
-------------------------------------------------------------------------- */
.bfs-carga {
border: 1.5px dashed #C9D2CF;
border-radius: var(--bfs-r-caja);
background: #FBFCFB;
padding: 20px 16px;
display: flex; flex-direction: column; align-items: center; gap: 9px;
text-align: center;
cursor: pointer;
}
.bfs-carga__icono {
width: 34px; height: 34px; border-radius: var(--bfs-r-control);
display: grid; place-items: center;
background: var(--bfs-neutro-bg); color: var(--bfs-muted-suave);
font-weight: 700; font-size: 15px;
}
.bfs-carga__nombre { font-family: var(--bfs-mono); font-size: 10px; color: var(--bfs-muted-suave); }
.bfs-carga--ok { border-style: solid; border-color: var(--bfs-aprobado); background: var(--bfs-verde-tinte); }
.bfs-carga--ok .bfs-carga__icono { background: var(--bfs-aprobado); color: var(--bfs-blanco); }
.bfs-carga--ok .bfs-carga__nombre { color: #0F8A69; }
.bfs-carga--error { border-style: solid; border-color: var(--bfs-error); background: #FEF6F6; }
.bfs-carga--error .bfs-carga__icono { background: var(--bfs-error-bg); color: var(--bfs-error); }
.bfs-carga--error .bfs-carga__nombre { color: var(--bfs-error-ink); font-family: var(--bfs-texto); }
/* --------------------------------------------------------------------------
13 · AVISO CONTEXTUAL
-------------------------------------------------------------------------- */
.bfs-aviso {
border-radius: var(--bfs-r-caja);
padding: 15px 17px;
display: flex; align-items: flex-start; gap: 13px;
font-size: 12px; line-height: 1.5;
position: relative; overflow: hidden;
}
.bfs-aviso::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.bfs-aviso--alerta { background: var(--bfs-alerta-bg); color: var(--bfs-alerta-ink); }
.bfs-aviso--alerta::before { background: var(--bfs-alerta); }
.bfs-aviso--error { background: var(--bfs-error-bg); color: var(--bfs-error-ink); }
.bfs-aviso--error::before { background: var(--bfs-error); }
.bfs-aviso--exito { background: var(--bfs-exito-bg); color: var(--bfs-exito-ink); }
.bfs-aviso--exito::before { background: var(--bfs-exito); }
/* --------------------------------------------------------------------------
14 · BARRA LATERAL DEL PANEL · agrupada, con contadores que anticipan carga
-------------------------------------------------------------------------- */
.bfs-side {
width: 236px; flex: none;
background: var(--bfs-bosque);
display: flex; flex-direction: column;
padding: 22px 0;
}
.bfs-side__grupo {
padding: 16px 24px 7px;
font-weight: 700; font-size: 8.5px; line-height: 1;
letter-spacing: 0.2em; text-transform: uppercase;
color: #4F7A74;
}
.bfs-side__item {
margin: 0 12px;
padding: 10px 12px;
border-radius: 10px;
display: flex; align-items: center; justify-content: space-between; gap: 11px;
font-weight: 500; font-size: 13px;
color: #A9C0BB;
cursor: pointer;
}
.bfs-side__item:hover { background: var(--bfs-bosque-claro); color: var(--bfs-blanco); }
.bfs-side__item--activo { background: var(--bfs-aprobado); color: var(--bfs-blanco); font-weight: 700; }
.bfs-side__punto { width: 5px; height: 5px; border-radius: 50%; background: #4F7A74; flex: none; }
.bfs-side__item--activo .bfs-side__punto { background: var(--bfs-blanco); }
.bfs-side__contador {
font-family: var(--bfs-mono); font-weight: 700; font-size: 9px;
border-radius: var(--bfs-r-pill); padding: 4px 7px;
background: var(--bfs-bosque-claro); color: #A9C0BB;
}
.bfs-side__contador--alerta { background: var(--bfs-alerta); color: var(--bfs-alerta-ink); }
.bfs-side__contador--mora { background: var(--bfs-error); color: var(--bfs-blanco); }
/* --------------------------------------------------------------------------
15 · MARCO MÓVIL · corredor 412px · cliente 390px
-------------------------------------------------------------------------- */
.bfs-movil {
width: 390px;
background: var(--bfs-papel);
border: 1px solid var(--bfs-linea);
border-radius: 30px;
overflow: hidden;
display: flex; flex-direction: column;
}
.bfs-movil--corredor { width: 412px; border-radius: var(--bfs-r-movil); }
/* Cabecera móvil con progreso: siempre visible, siempre con "N de M". */
.bfs-movil__head {
background: var(--bfs-blanco);
border-bottom: 1px solid var(--bfs-linea);
padding: 18px 24px;
display: flex; align-items: center; gap: 14px;
}
/* En móvil los controles crecen. */
@media (max-width: 560px) {
.bfs-btn { min-height: 48px; font-size: 14px; }
.bfs-cifra-heroe { font-size: 52px; }
}
/* --------------------------------------------------------------------------
16 · LOGO · el logotipo es texto, no imagen
bfs+
-------------------------------------------------------------------------- */
.bfs-logo {
font-family: var(--bfs-display);
font-weight: 700;
font-size: 30px;
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--bfs-bosque);
font-style: normal;
}
.bfs-logo > i { color: var(--bfs-aprobado); font-style: normal; }
.bfs-oscuro .bfs-logo, .bfs-side .bfs-logo { color: var(--bfs-blanco); }
.bfs-oscuro .bfs-logo > i, .bfs-side .bfs-logo > i { color: var(--bfs-menta); }
/* Isotipo: cruz de barras redondeadas en contenedor de esquinas suaves. */
.bfs-iso {
width: 36px; height: 36px;
border-radius: 11px;
background: var(--bfs-bosque);
display: grid; place-items: center;
flex: none;
position: relative;
}
.bfs-iso::before, .bfs-iso::after {
content: '';
position: absolute;
background: var(--bfs-menta);
border-radius: 2px;
}
.bfs-iso::before { width: 44%; height: 11%; }
.bfs-iso::after { width: 11%; height: 44%; }
.bfs-iso--aprobado { background: var(--bfs-aprobado); }
.bfs-iso--aprobado::before, .bfs-iso--aprobado::after { background: var(--bfs-blanco); }
/* --------------------------------------------------------------------------
17 · UTILIDADES MÍNIMAS
Grids con datos variables SIEMPRE minmax(0,…) para que un texto largo
no desborde la columna.
-------------------------------------------------------------------------- */
.bfs-fila { display: flex; align-items: center; gap: var(--bfs-e3); }
.bfs-col { display: flex; flex-direction: column; gap: var(--bfs-e3); }
.bfs-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--bfs-e3); }
.bfs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bfs-e4); }
.bfs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bfs-e4); }
.bfs-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bfs-e3); }
.bfs-sep { height: 1px; background: var(--bfs-linea); }
.bfs-sep--suave { height: 1px; background: var(--bfs-linea-suave); }
.bfs-crece { flex: 1; min-width: 0; }
.bfs-mono { font-family: var(--bfs-mono); font-weight: 500; }
/* Impresión: contratos y kits salen limpios. */
@media print {
.bfs-side, .bfs-btn, .bfs-movil__head { display: none !important; }
.bfs-panel, .bfs-oscuro { box-shadow: none; break-inside: avoid; }
body { background: #fff; }
}