/* ============================================================
   BARBER TOOLS · componentes bt-* (DISENO §4)
   Metal solo con CSS: gradientes, background-clip y bordes padding-box/border-box.
   Solo se anima transform y opacity. Áreas táctiles ≥ 44 px; inputs a 16 px.
   ============================================================ */

/* ---------- íconos ---------- */
.bt-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: middle; }
.bt-ico--20 { width: 20px; height: 20px; }
.bt-ico--28 { width: 28px; height: 28px; }

/* ---------- texto metálico ---------- */
.bt-metal-texto { background: var(--bt-cromo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bt-verde-texto { background: var(--bt-verde-metal-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) {
  .bt-metal-texto, .bt-verde-texto { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
.bt-micro { font-size: var(--bt-t-micro); letter-spacing: var(--bt-tr-micro); text-transform: uppercase; color: var(--bt-texto-3); font-weight: 600; line-height: 1.3; }
.bt-suave { color: var(--bt-texto-2); }
.bt-tenue { color: var(--bt-texto-3); }
.bt-chico { font-size: var(--bt-t-chico); }

/* ---------- botones ---------- */
.bt-btn {
  --_alto: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--_alto); padding: 0 1.25em; border-radius: var(--bt-r-pill); border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.15; text-decoration: none; cursor: pointer; text-align: center; max-width: 100%;
  color: var(--bt-texto); background: var(--bt-sup-3); user-select: none; -webkit-user-select: none;
  transition: transform var(--bt-d-toque) var(--bt-ease-salida), background-position var(--bt-d-hover) var(--bt-ease-suave), background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave), opacity var(--bt-d-hover) var(--bt-ease-suave);
}
.bt-btn:active { transform: scale(.97); }
.bt-btn[disabled], .bt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.bt-btn .bt-ico { width: 20px; height: 20px; }
.bt-btn--primario { color: var(--bt-grafito); background: var(--bt-verde-metal); background-size: 200% 100%; background-position: 0 0; box-shadow: var(--bt-brillo-verde); }
.bt-btn--primario:hover { background-position: 100% 0; }
.bt-btn--cromo { color: var(--bt-grafito); background: var(--bt-cromo-relleno); background-size: 200% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.35); }
.bt-btn--cromo:hover { background-position: 100% 0; }
.bt-btn--fantasma { background: transparent; border-color: var(--bt-borde-control); color: var(--bt-texto); }
.bt-btn--fantasma:hover { background: var(--bt-sup-3); }
.bt-btn--texto { background: transparent; color: var(--bt-verde-luz); padding: 0 .6em; }
.bt-btn--texto:hover { background: var(--bt-ok-tenue); }
.bt-btn--peligro { background: var(--bt-error-tenue); border-color: var(--bt-error); color: var(--bt-error); }
.bt-btn--peligro:hover { background: rgba(255,122,110,.2); }
.bt-btn--chico { --_alto: 44px; padding: 0 1em; font-size: var(--bt-t-chico); }
.bt-btn--grande { --_alto: 56px; font-size: 1.0625rem; }
.bt-btn--bloque { width: 100%; }
.bt-btn--icono { --_alto: 48px; width: 48px; padding: 0; }
.bt-btn--icono.bt-btn--chico { width: 44px; }
.bt-btn--icono .bt-ico { width: 22px; height: 22px; }
.bt-btn__cifra { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- campos ---------- */
.bt-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--bt-e-4); min-width: 0; }
.bt-campo > label, .bt-etiqueta { font-size: var(--bt-t-chico); font-weight: 600; color: var(--bt-texto-2); }
.bt-campo .bt-opcional { font-weight: 500; color: var(--bt-texto-3); }
.bt-input, .bt-campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .bt-campo select, .bt-campo textarea, .bt-select {
  width: 100%; min-height: 52px; padding: 0 14px; font-size: 16px; color: var(--bt-texto);
  background: var(--bt-sup-1); border: 1px solid var(--bt-borde-control); border-radius: var(--bt-r-s);
  transition: border-color var(--bt-d-hover) var(--bt-ease-suave), box-shadow var(--bt-d-hover) var(--bt-ease-suave);
}
.bt-campo textarea { padding: 12px 14px; min-height: 104px; resize: vertical; line-height: 1.5; }
.bt-campo input::placeholder, .bt-campo textarea::placeholder { color: var(--bt-texto-3); opacity: 1; }
.bt-input:focus, .bt-campo input:focus, .bt-campo select:focus, .bt-campo textarea:focus, .bt-select:focus {
  border-color: var(--bt-verde-luz); box-shadow: 0 0 0 4px rgba(43,217,168,.18); outline: none;
}
.bt-campo input[disabled] { opacity: .6; }
.bt-campo input[type=date], .bt-campo input[type=time], .bt-campo input[type=month] { font-variant-numeric: tabular-nums; }
.bt-select, .bt-campo select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4BDBB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 9.4 12 15.8l6.4-6.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.bt-campo__ayuda { font-size: var(--bt-t-chico); color: var(--bt-texto-3); margin: 0; line-height: 1.45; }
.bt-campo__error { display: none; align-items: flex-start; gap: 6px; font-size: var(--bt-t-chico); color: var(--bt-error); margin: 0; font-weight: 500; }
.bt-campo__error .bt-ico { width: 18px; height: 18px; margin-top: 1px; }
.bt-campo--error input, .bt-campo--error select, .bt-campo--error textarea { border-color: var(--bt-error) !important; }
.bt-campo--error input:focus, .bt-campo--error select:focus, .bt-campo--error textarea:focus { box-shadow: 0 0 0 4px rgba(255,122,110,.18); }
.bt-campo--error .bt-campo__error { display: flex; }
.bt-campo__con-accion { position: relative; display: flex; }
.bt-campo__con-accion input { padding-right: 72px !important; }
.bt-campo__accion { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 56px; border: 0; background: transparent; color: var(--bt-verde-luz); font-weight: 600; border-radius: var(--bt-r-s); cursor: pointer; }
.bt-campo__accion:hover { background: var(--bt-ok-tenue); }
/* Monto: prefijo $ dentro del campo, formato chileno al perder el foco. */
.bt-monto { position: relative; }
.bt-monto::before { content: '$'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bt-texto-3); font-weight: 600; pointer-events: none; }
.bt-monto input { padding-left: 28px !important; font-variant-numeric: tabular-nums; }
.bt-fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bt-e-3); }
.bt-fila-campos > .bt-campo { margin-bottom: var(--bt-e-4); }
@media (max-width: 420px) { .bt-fila-campos--apilar { grid-template-columns: 1fr; } }

/* casilla propia */
.bt-casilla { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--bt-t-base); }
.bt-casilla input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 1.5px solid var(--bt-borde-control); background: var(--bt-sup-1); cursor: pointer; display: grid; place-items: center; transition: background-color var(--bt-d-hover) var(--bt-ease-suave); }
.bt-casilla input::after { content: ''; width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity var(--bt-d-toque) var(--bt-ease-salida), transform var(--bt-d-hover) var(--bt-ease-salida);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.6 17 19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.bt-casilla input:checked { background: var(--bt-verde-metal); border-color: transparent; }
.bt-casilla input:checked::after { opacity: 1; transform: none; }
.bt-casilla small { display: block; color: var(--bt-texto-3); font-size: var(--bt-t-chico); }

/* toggle */
.bt-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.bt-toggle input { appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; width: 44px; height: 26px; border-radius: var(--bt-r-pill); background: var(--bt-sup-3); border: 1px solid var(--bt-borde-control); cursor: pointer; transition: background-color var(--bt-d-hover) var(--bt-ease-suave); }
.bt-toggle input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bt-texto-3); box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: transform var(--bt-d-pestana) var(--bt-ease-salida); }
.bt-toggle input:checked { background: var(--bt-verde-metal); border-color: transparent; }
.bt-toggle input:checked::before { transform: translateX(18px); background: var(--bt-cromo-relleno); }
.bt-toggle--fila { display: flex; align-items: flex-start; padding: 10px 0; margin: 4px 0 var(--bt-e-4); }
.bt-toggle--fila input { margin-top: 2px; }
.bt-toggle b { display: block; font-weight: 600; }
.bt-toggle small { display: block; color: var(--bt-texto-3); font-size: var(--bt-t-chico); line-height: 1.4; margin-top: 2px; }

/* segmentado (pills de opción única) */
.bt-segmentado { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 var(--bt-e-4); min-width: 0; }
.bt-segmentado legend { font-size: var(--bt-t-chico); font-weight: 600; color: var(--bt-texto-2); padding: 0; margin-bottom: 8px; }
.bt-segmentado label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--bt-r-pill); background: var(--bt-sup-2); border: 1px solid var(--bt-linea); cursor: pointer; font-weight: 500; transition: background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave); }
.bt-segmentado label .bt-ico { width: 20px; height: 20px; color: var(--bt-texto-3); }
.bt-segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bt-segmentado label:has(input:checked) { background: var(--bt-sup-3); border-color: var(--bt-verde-luz); box-shadow: inset 0 0 0 .5px var(--bt-verde-luz); }
.bt-segmentado label:has(input:checked) .bt-ico { color: var(--bt-verde-luz); }
.bt-segmentado label:has(input:focus-visible) { outline: 2px solid var(--bt-verde-luz); outline-offset: 2px; }
.bt-segmentado--lleno label { flex: 1 1 0; justify-content: center; padding: 0 10px; }

/* ---------- tarjetas ---------- */
.bt-tarjeta {
  position: relative; border-radius: var(--bt-r-l); padding: var(--bt-e-5);
  border: 1px solid transparent;
  background: linear-gradient(var(--bt-sup-2), var(--bt-sup-2)) padding-box, var(--bt-borde-metal) border-box;
  box-shadow: var(--bt-sombra-2);
}
.bt-tarjeta--plana { background: var(--bt-sup-2); border-color: var(--bt-linea); box-shadow: var(--bt-sombra-1); }
.bt-tarjeta--compacta { padding: var(--bt-e-4); }
.bt-tarjeta > h2, .bt-tarjeta > h3, .bt-tarjeta__cab h2, .bt-tarjeta__cab h3 { font-size: var(--bt-t-m); margin: 0 0 var(--bt-e-3); }
.bt-tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--bt-e-3); margin-bottom: var(--bt-e-3); flex-wrap: wrap; }
.bt-tarjeta__cab h2, .bt-tarjeta__cab h3 { margin: 0; }
a.bt-tarjeta { color: inherit; text-decoration: none; display: block; transition: transform var(--bt-d-hover) var(--bt-ease-salida); }
a.bt-tarjeta:hover { transform: translateY(-2px); }

/* ---------- KPI ---------- */
.bt-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bt-kpi__valor { font-size: var(--bt-t-kpi); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--bt-tr-kpi); white-space: nowrap; }
.bt-kpi__valor--m { font-size: var(--bt-t-xl); }
.bt-kpi__pie { font-size: var(--bt-t-chico); color: var(--bt-texto-3); }
.bt-variacion { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: var(--bt-r-pill); font-size: var(--bt-t-chico); font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-variacion--sube { background: var(--bt-ok-tenue); color: var(--bt-ok); }
.bt-variacion--baja { background: var(--bt-alerta-tenue); color: var(--bt-alerta); }

/* medidor (barra de meta) */
.bt-medidor { position: relative; height: 6px; border-radius: var(--bt-r-pill); background: var(--bt-sup-3); overflow: hidden; }
.bt-medidor > span { position: absolute; inset: 0; border-radius: inherit; background: var(--bt-verde-metal); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform var(--bt-d-firma) var(--bt-ease-salida); }
.bt-medidor--grueso { height: 10px; }

/* barras (SVG inline) */
.bt-barras { width: 100%; height: auto; overflow: visible; }
.bt-barras rect.b { fill: var(--bt-esmeralda); }
.bt-barras rect.b.actual { fill: var(--bt-verde-luz); }
.bt-barras line { stroke: var(--bt-linea); stroke-width: 1; }
.bt-barras text { fill: var(--bt-texto-3); font-size: 12px; font-variant-numeric: tabular-nums; font-family: var(--bt-fuente); }
/* barras horizontales (HTML) */
.bt-hbarras { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bt-hbarras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.bt-hbarras .bt-medidor { grid-column: 1 / -1; height: 8px; }
.bt-hbarras b { font-variant-numeric: tabular-nums; }

/* anillo de meta */
.bt-anillo { position: relative; width: 200px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto; }
.bt-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.bt-anillo .pista { fill: none; stroke: var(--bt-sup-3); stroke-width: 12; }
.bt-anillo .progreso { fill: none; stroke: url(#btVerdeMetal); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset var(--bt-d-firma) var(--bt-ease-salida); }
.bt-anillo__centro { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt-anillo__pct { font-size: var(--bt-t-kpi); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--bt-tr-kpi); }
.bt-anillo__meta { font-size: var(--bt-t-chico); color: var(--bt-texto-3); }
.bt-anillo__brillo { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 80%, rgba(183,242,224,.55) 88%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); }
.bt-anillo.cumplida .bt-anillo__brillo { animation: bt-brillo-anillo 1.1s var(--bt-ease-io) var(--bt-d-firma) 1 both; }
@keyframes bt-brillo-anillo { 0% { opacity: 0; transform: rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
.bt-anillo--chico { width: 120px; }
.bt-anillo--chico .bt-anillo__pct { font-size: var(--bt-t-l); }

.bt-sparkline { width: 100%; height: 40px; overflow: visible; }
.bt-sparkline polyline { fill: none; stroke: var(--bt-verde-luz); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- listas ---------- */
.bt-lista { list-style: none; margin: 0; padding: 0; }
.bt-fila { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 4px; border-bottom: 1px solid var(--bt-linea); color: inherit; text-decoration: none; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; font: inherit; }
.bt-lista > li:last-child > .bt-fila, .bt-lista > .bt-fila:last-child { border-bottom: 0; }
.bt-fila:hover { background: rgba(255,255,255,.02); }
.bt-fila__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bt-fila__titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-fila__sub { font-size: var(--bt-t-chico); color: var(--bt-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-fila__fin { display: flex; align-items: center; gap: 8px; flex: none; color: var(--bt-texto-3); }
.bt-fila__fin .bt-ico { width: 20px; height: 20px; }
.bt-baldosa { flex: none; width: 44px; height: 44px; border-radius: var(--bt-r-s); display: grid; place-items: center; background: var(--bt-sup-3); font-weight: 600; font-size: var(--bt-t-chico); font-variant-numeric: tabular-nums; color: var(--bt-texto); line-height: 1; text-align: center; }
.bt-baldosa .bt-ico { width: 22px; height: 22px; color: var(--bt-texto-2); }
.bt-baldosa--hora { width: 56px; letter-spacing: -.01em; }
.bt-baldosa--acento { background: var(--bt-ok-tenue); color: var(--bt-verde-luz); }

/* ---------- chips ---------- */
.bt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--bt-r-pill); font-size: var(--bt-t-chico); font-weight: 600; line-height: 1.1; white-space: nowrap; background: var(--bt-sup-3); color: var(--bt-texto-2); border: 1px solid transparent; }
.bt-chip .bt-ico { width: 16px; height: 16px; }
.bt-chip--ok { background: var(--bt-ok-tenue); color: var(--bt-ok); }
.bt-chip--alerta { background: var(--bt-alerta-tenue); color: var(--bt-alerta); }
.bt-chip--error { background: var(--bt-error-tenue); color: var(--bt-error); }
.bt-chip--neutro { background: var(--bt-sup-3); color: var(--bt-texto-2); }
.bt-chip--cromo { background: transparent; border-color: var(--bt-borde-control); color: var(--bt-texto-2); }
.bt-chip--punto::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* chips seleccionables (botones) */
.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-chips--desliza { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; margin: 0 -16px 12px; padding: 2px 16px 6px; }
.bt-chips--desliza::-webkit-scrollbar { display: none; }
.bt-chips--desliza > * { scroll-snap-align: start; flex: none; }
.bt-opcion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--bt-r-pill); border: 1px solid var(--bt-linea); background: var(--bt-sup-2); color: var(--bt-texto); font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color var(--bt-d-hover) var(--bt-ease-suave), border-color var(--bt-d-hover) var(--bt-ease-suave), transform var(--bt-d-toque) var(--bt-ease-salida); }
.bt-opcion:active { transform: scale(.97); }
.bt-opcion:hover { border-color: var(--bt-borde-control); }
.bt-opcion[aria-pressed="true"], .bt-opcion[aria-current="true"], .bt-opcion[aria-selected="true"] { background: var(--bt-sup-3); border-color: var(--bt-verde-luz); box-shadow: inset 0 0 0 .5px var(--bt-verde-luz); }
.bt-opcion .bt-ico { width: 18px; height: 18px; }
.bt-opcion__inicial { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; background: var(--bt-sup-3); font-size: var(--bt-t-chico); font-weight: 700; color: var(--bt-texto-2); }

/* ---------- pestañas segmentadas ---------- */
.bt-pestanas { display: flex; gap: 4px; padding: 4px; border-radius: var(--bt-r-pill); background: var(--bt-sup-1); border: 1px solid var(--bt-linea); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--bt-e-5); max-width: 100%; width: max-content; }
.bt-pestanas::-webkit-scrollbar { display: none; }
.bt-pestanas a, .bt-pestanas button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--bt-r-pill); color: var(--bt-texto-2); text-decoration: none; font-weight: 500; background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background-color var(--bt-d-hover) var(--bt-ease-suave), color var(--bt-d-hover) var(--bt-ease-suave); }
.bt-pestanas a:hover, .bt-pestanas button:hover { color: var(--bt-texto); }
.bt-pestanas [aria-current="page"], .bt-pestanas [aria-selected="true"] { background: var(--bt-sup-3); color: var(--bt-texto); box-shadow: inset 0 0 0 1px rgba(43,217,168,.45); }

/* ---------- avisos ---------- */
.bt-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--bt-r-m); background: var(--bt-sup-2); border: 1px solid var(--bt-linea); color: var(--bt-texto); font-size: var(--bt-t-chico); line-height: 1.5; margin-bottom: var(--bt-e-4); }
.bt-aviso > .bt-ico { width: 20px; height: 20px; margin-top: 1px; color: var(--bt-texto-2); }
.bt-aviso b { font-weight: 600; }
.bt-aviso p { margin: 0; }
.bt-aviso p + p { margin-top: 6px; }
.bt-aviso--alerta { background: var(--bt-alerta-tenue); border-color: rgba(242,184,75,.35); }
.bt-aviso--alerta > .bt-ico { color: var(--bt-alerta); }
.bt-aviso--error { background: var(--bt-error-tenue); border-color: rgba(255,122,110,.4); }
.bt-aviso--error > .bt-ico { color: var(--bt-error); }
.bt-aviso--ok { background: var(--bt-ok-tenue); border-color: rgba(43,217,168,.35); }
.bt-aviso--ok > .bt-ico { color: var(--bt-ok); }
.bt-aviso__accion { margin-left: auto; flex: none; }

/* ---------- tablas (pasan a tarjetas bajo 760 px) ---------- */
.bt-tabla-marco { border-radius: var(--bt-r-l); border: 1px solid var(--bt-linea); background: var(--bt-sup-2); overflow-x: auto; }
@media (min-width: 760px) { .bt-tabla td { white-space: nowrap; } .bt-tabla td.principal { white-space: normal; min-width: 160px; } }
.bt-tabla { width: 100%; border-collapse: collapse; font-size: var(--bt-t-chico); }
.bt-tabla th { text-align: left; font-weight: 600; font-size: var(--bt-t-micro); letter-spacing: var(--bt-tr-micro); text-transform: uppercase; color: var(--bt-texto-3); padding: 12px 14px; border-bottom: 1px solid var(--bt-linea); background: var(--bt-sup-1); white-space: nowrap; }
.bt-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--bt-linea); vertical-align: middle; }
.bt-tabla tr:last-child td { border-bottom: 0; }
.bt-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-tabla tr.anulada td { opacity: .55; }
.bt-tabla tr.anulada td.num { text-decoration: line-through; }
.bt-tabla input, .bt-tabla select { min-height: 44px !important; }
@media (max-width: 759px) {
  .bt-tabla--tarjetas thead { display: none; }
  .bt-tabla--tarjetas, .bt-tabla--tarjetas tbody, .bt-tabla--tarjetas tr, .bt-tabla--tarjetas td { display: block; width: 100%; }
  .bt-tabla--tarjetas tr { padding: 12px 16px; border-bottom: 1px solid var(--bt-linea); }
  .bt-tabla--tarjetas tr:last-child { border-bottom: 0; }
  .bt-tabla--tarjetas td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .bt-tabla--tarjetas td::before { content: attr(data-l); color: var(--bt-texto-3); font-size: var(--bt-t-chico); text-align: left; flex: none; }
  .bt-tabla--tarjetas td[data-l=""]::before { content: none; }
  .bt-tabla--tarjetas td.num { justify-content: space-between; }
  .bt-tabla--tarjetas td.principal { font-weight: 600; font-size: var(--bt-t-base); text-align: left; }
  .bt-tabla--tarjetas td.principal::before { content: none; }
  .bt-tabla--tarjetas td.acciones { justify-content: flex-end; padding-top: 8px; }
}

/* ---------- hoja inferior (dialog) ---------- */
dialog.bt-hoja { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--bt-texto); overflow: hidden; }
dialog.bt-hoja::backdrop { background: rgba(5,8,8,.6); opacity: 0; transition: opacity 320ms var(--bt-ease-suave); }
dialog.bt-hoja.abierta::backdrop { opacity: 1; }
.bt-hoja__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92svh; display: flex; flex-direction: column;
  background: var(--bt-sup-1); border-radius: var(--bt-r-xl) var(--bt-r-xl) 0 0; box-shadow: var(--bt-sombra-hoja);
  border-top: 1px solid rgba(244,247,248,.12);
  padding-bottom: var(--bt-seg-abajo);
  transform: translateY(100%); transition: transform var(--bt-d-hoja) var(--bt-ease-salida);
  will-change: transform;
}
dialog.bt-hoja.abierta .bt-hoja__panel { transform: translateY(var(--arrastre, 0px)); }
dialog.bt-hoja.arrastrando .bt-hoja__panel { transition: none; }
.bt-hoja__tirador { flex: none; display: grid; place-items: center; height: 24px; cursor: grab; touch-action: none; }
.bt-hoja__tirador::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--bt-borde-control); }
.bt-hoja__cab { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px 8px 20px; touch-action: none; }
.bt-hoja__cab h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--bt-t-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-hoja__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; -webkit-overflow-scrolling: touch; }
.bt-hoja__pie { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--bt-linea); background: var(--bt-sup-1); }
.bt-hoja--completa .bt-hoja__panel { top: 0; max-height: none; border-radius: 0; padding-top: var(--bt-seg-arriba); border-top: 0; }
.bt-hoja--completa .bt-hoja__tirador { display: none; }
.bt-hoja--completa .bt-hoja__cab { padding-top: 8px; border-bottom: 1px solid var(--bt-linea); padding-bottom: 8px; }
@media (min-width: 1024px) {
  .bt-hoja__panel { left: 50%; right: auto; top: 50%; bottom: auto; width: 560px; max-height: min(88vh, 920px); border-radius: var(--bt-r-xl); border: 1px solid rgba(244,247,248,.12); padding-bottom: 0;
    transform: translate(-50%, calc(-50% + 24px)); opacity: 0; transition: transform var(--bt-d-hoja) var(--bt-ease-salida), opacity 240ms var(--bt-ease-suave); }
  dialog.bt-hoja.abierta .bt-hoja__panel { transform: translate(-50%, -50%); opacity: 1; }
  .bt-hoja--completa .bt-hoja__panel { width: 720px; top: 50%; padding-top: 0; border-radius: var(--bt-r-xl); max-height: min(90vh, 960px); border: 1px solid rgba(244,247,248,.12); }
  .bt-hoja__tirador { display: none; }
  .bt-hoja__cab { padding: 16px 12px 8px 24px; }
  .bt-hoja__cuerpo { padding: 8px 24px 24px; }
  .bt-hoja__pie { padding: 14px 24px 18px; }
}

/* ---------- avisos flotantes (toast) ---------- */
.bt-avisos { position: fixed; left: 0; right: 0; bottom: calc(var(--bt-tabbar) + var(--bt-seg-abajo) + 12px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.bt-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(520px, 100%); min-height: 52px; padding: 10px 10px 10px 16px; border-radius: var(--bt-r-m);
  border: 1px solid transparent; background: linear-gradient(var(--bt-sup-3), var(--bt-sup-3)) padding-box, var(--bt-borde-metal) border-box; box-shadow: var(--bt-sombra-2);
  font-size: var(--bt-t-chico); font-weight: 500; animation: bt-toast-entra var(--bt-d-pestana) var(--bt-ease-salida) both; }
.bt-toast .bt-ico { width: 20px; height: 20px; color: var(--bt-ok); }
.bt-toast--error .bt-ico { color: var(--bt-error); }
.bt-toast span { flex: 1; padding-right: 6px; }
.bt-toast.sale { animation: bt-toast-sale 220ms var(--bt-ease-suave) both; }
@keyframes bt-toast-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes bt-toast-sale { to { opacity: 0; transform: translateY(8px); } }
dialog .bt-avisos { bottom: calc(var(--bt-seg-abajo) + 88px); }
@media (min-width: 1024px) { .bt-avisos { bottom: 24px; } }

/* ---------- estados vacíos y de espera ---------- */
.bt-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: var(--bt-e-7) var(--bt-e-4); max-width: 420px; margin: 0 auto; }
.bt-vacio__bob { position: relative; width: 72px; height: 61px; margin-bottom: 8px; }
.bt-vacio__bob::before { content: ''; position: absolute; inset: -36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,168,132,.2), transparent); }
.bt-vacio__bob img { position: relative; width: 72px; height: 61px; }
.bt-vacio__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--bt-sup-3); color: var(--bt-texto-2); margin-bottom: 6px; }
.bt-vacio h3 { font-size: var(--bt-t-m); margin: 0; }
.bt-vacio p { color: var(--bt-texto-2); margin: 0 0 8px; font-size: var(--bt-t-chico); }
.bt-vacio--chico { padding: var(--bt-e-5) var(--bt-e-3); }

.bt-esqueleto { position: relative; overflow: hidden; border-radius: var(--bt-r-s); background: var(--bt-sup-3); }
.bt-esqueleto::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent, rgba(255,255,255,.05), transparent); animation: bt-barrido 1.4s var(--bt-ease-io) infinite; }
@keyframes bt-barrido { to { transform: translateX(100%); } }
.bt-esq-linea { height: 14px; margin: 10px 0; }
.bt-esq-cifra { height: 56px; width: 60%; border-radius: var(--bt-r-m); }
.bt-esq-tarjeta { height: 120px; border-radius: var(--bt-r-l); margin-bottom: 16px; }
.bt-esq-fila { height: 64px; border-radius: var(--bt-r-m); margin-bottom: 8px; }

/* Revelado escalonado al llegar los datos (sube 16 px y aparece). */
.bt-revelar > * { animation: bt-sube var(--bt-d-hoja) var(--bt-ease-salida) both; }
.bt-revelar > *:nth-child(2) { animation-delay: 40ms; }
.bt-revelar > *:nth-child(3) { animation-delay: 80ms; }
.bt-revelar > *:nth-child(4) { animation-delay: 120ms; }
.bt-revelar > *:nth-child(5) { animation-delay: 160ms; }
.bt-revelar > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes bt-sube { from { opacity: 0; transform: translateY(16px); } }

/* ---------- lockup y placa ---------- */
.bt-lockup { --F: 18px; display: inline-flex; align-items: center; gap: calc(var(--F) * .32); color: inherit; text-decoration: none; }
.bt-lockup__bob { height: calc(var(--F) * 1.7); width: auto; translate: 0 -8%; }
.bt-lockup__txt { display: flex; flex-direction: column; gap: calc(var(--F) * .14); }
.bt-lockup__txt b { font-size: var(--F); font-weight: 700; letter-spacing: .02em; line-height: .95; }
.bt-lockup__txt small { font-size: calc(var(--F) * .34); font-weight: 500; letter-spacing: .18em; color: var(--bt-texto-2); text-transform: none; line-height: 1; }
.bt-lockup__txt small i { font-style: normal; color: var(--bt-esmeralda); }
.bt-lockup__txt small::first-letter { text-transform: none; }

/* D1 (séptima ronda): el logo nunca se corta. En la placa cuadrada la imagen llena la placa (absoluta: antes su alto de 100 %
   no se resolvía en la grilla y un logo alto, 1:2, salía cortado arriba y abajo) y se ajusta con object-fit: contain. En la placa
   ancha (proporción > 1,4: la foto del letrero) manda el ALTO de la imagen, en px, y el ancho sale de su proporción hasta el
   máximo de la placa: antes un 2:1 medía 105 px de alto en un espacio útil de 46 px y overflow:hidden cortaba la mitad. */
.bt-logo-placa { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 9px; aspect-ratio: 1; width: 32px;
  border: 1px solid transparent; background: linear-gradient(var(--bt-sup-2), var(--bt-sup-2)) padding-box, var(--bt-borde-metal) border-box; }
.bt-logo-placa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.bt-logo-placa--40 { width: 40px; border-radius: 11px; }
.bt-logo-placa--32 { width: 32px; }
.bt-logo-placa--72 { width: 72px; border-radius: 18px; }
.bt-logo-placa--88 { width: 88px; border-radius: 18px; }
.bt-logo-placa[data-placa="claro"] { background: #F5F1E8; border-color: rgba(15,20,20,.08); }
.bt-logo-placa[data-placa="sin"], .bt-logo-placa[data-placa="sin_placa"] { background: transparent; border-color: transparent; }
.bt-logo-placa[data-placa="sin"] img, .bt-logo-placa[data-placa="sin_placa"] img { padding: 0; }
.bt-logo-placa--ancha { --placa-logo-alto: 38px; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; width: auto; height: auto; max-width: 220px; padding: 8px 14px; }
.bt-logo-placa--ancha img { position: static; inset: auto; display: block; flex: 0 1 auto; min-width: 0; padding: 0; height: var(--placa-logo-alto); width: auto; max-width: 100%; object-fit: contain; }
.bt-monograma { font-weight: 700; color: var(--bt-acento); font-size: .42em; letter-spacing: -.02em; line-height: 1; }
.bt-logo-placa--32 .bt-monograma { font-size: 13px; }
.bt-logo-placa--40 .bt-monograma { font-size: 16px; }
.bt-logo-placa--72 .bt-monograma { font-size: 28px; }
.bt-logo-placa--88 .bt-monograma { font-size: 34px; }

/* ---------- Bob (avatar del asesor) ---------- */
.bt-bob { position: relative; flex: none; display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid transparent; background: linear-gradient(var(--bt-sup-1), var(--bt-sup-1)) padding-box, conic-gradient(from 210deg, #F4F7F8, #8A9598, #E9EEF0, #6E7A7D, #F4F7F8) border-box; }
.bt-bob img { width: 74%; height: auto; }
.bt-bob--28 { width: 36px; }
.bt-bob--32 { width: 32px; }
.bt-bob--24 { width: 24px; border-width: 1px; }
.bt-bob.pensando::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--bt-verde-luz); border-right-color: rgba(43,217,168,.35); animation: bt-gira 1.2s var(--bt-ease-io) infinite; }
@keyframes bt-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt-bob.pensando::after { animation: none; border-color: var(--bt-verde-luz); } }

/* ---------- utilidades de composición ---------- */
@media (max-width: 759px) { .bt-solo-escritorio { display: none !important; } }
@media (min-width: 760px) { .bt-solo-movil { display: none !important; } }
.bt-pila > * + * { margin-top: var(--bt-e-4); }
.bt-grupo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bt-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bt-separador { border: 0; border-top: 1px solid var(--bt-linea); margin: var(--bt-e-5) 0; }
.bt-codigo { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .82rem; background: var(--bt-fondo); color: var(--bt-menta); border: 1px solid var(--bt-linea); padding: 12px 14px; border-radius: var(--bt-r-s); overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0 0 12px; }
.bt-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: var(--bt-t-chico); }
.bt-dl dt { color: var(--bt-texto-3); }
.bt-dl dd { margin: 0; overflow-wrap: anywhere; }