/* ═══════════════════════════════════════════════════════════════════════
   Bimo Lite — Componentes reutilizables (se carga antes que layout.css)
   Piezas comunes a varias pantallas. Lo propio de una sola pantalla va en su
   .razor.css. Índice:
     1. Botones          6. Chips y segmentados   11. Listas y tablas
     2. Tarjetas         7. Campos y buscador     12. Cronograma / barras
     3. Rejillas         8. Interruptor           13. Modal y hoja inferior
     4. Pills            9. Anillo y dona         14. Toast
     5. Avatar          10. Tarjeta de opción     15. Estados vacíos y alertas
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Botones ──────────────────────────────────────────────────────── */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 20px; border: 0; border-radius: var(--radio-campo);
    font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap;
    text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
.boton:disabled { opacity: 1; }
.boton-primario { background: var(--verde); color: #fff; }
.boton-primario:hover:not(:disabled) { background: var(--verde-hover); color: #fff; }
.boton-primario:disabled { background: var(--verde-deshabilitado); }
.boton-primario.con-sombra { box-shadow: var(--sombra-boton); }
.boton-secundario { background: var(--superficie); color: var(--marino); border: 1.5px solid var(--borde-campo-2); }
.boton-secundario:hover:not(:disabled) { border-color: var(--marino); color: var(--marino); }
.boton-contorno { background: var(--superficie); color: var(--marino); border: 1.5px solid var(--marino); }
.boton-contorno:hover:not(:disabled) { background: var(--superficie-2); color: var(--marino); }
.boton-marino { background: var(--marino); color: #fff; }
.boton-marino:hover:not(:disabled) { background: var(--marino-2); color: #fff; }
.boton-whatsapp { background: var(--superficie); color: var(--verde-enlace); border: 1.5px solid var(--verde-borde); font-size: 14px; }
.boton-whatsapp:hover:not(:disabled) { background: var(--verde-tenue-2); color: var(--verde-texto); }
.boton-peligro { background: var(--superficie); color: var(--rojo-texto); border: 1.5px solid var(--rojo-borde); }
.boton-peligro:hover:not(:disabled) { background: var(--rojo-suave); color: var(--rojo-texto); }
.boton-enlace {
    height: auto; padding: 0; background: transparent; color: var(--verde-enlace);
    font-size: 14px; border-radius: 6px;
}
.boton-enlace:hover:not(:disabled) { color: var(--verde-texto); }
.boton-punteado { background: var(--verde-tenue-2); color: var(--verde-texto); border: 1.5px dashed var(--verde); font-size: 14px; height: 44px; }
.boton-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--radio-boton-sm); }
.boton-lg { height: 52px; padding: 0 26px; }
.boton-xl { height: 54px; font-size: 16px; border-radius: var(--radio-opcion); }
.boton-bloque { flex: 1; width: 100%; }
.boton-icono {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 38px; height: 38px; padding: 0; border-radius: var(--radio-boton-sm);
    background: var(--superficie); border: 1.5px solid var(--borde-campo); color: var(--marino);
}
.boton-icono:hover:not(:disabled) { border-color: var(--marino); }
.boton-icono.whatsapp { border-color: var(--verde-borde); color: var(--verde-enlace); }
.boton-icono.peligro  { border-color: var(--rojo-borde); color: var(--rojo-texto); }
.boton-icono.suave    { border: 0; background: var(--superficie-3); }
.boton-volver { width: 42px; height: 42px; border-radius: var(--radio-campo); }
.grupo-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.grupo-botones.extremos { justify-content: space-between; }
.grupo-botones.al-final { justify-content: flex-end; }
.cargando {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2.5px solid currentColor; border-right-color: transparent;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── 2. Tarjetas ─────────────────────────────────────────────────────── */
.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
    padding: var(--pad-tarjeta); display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.tarjeta.compacta { border-radius: var(--radio-lista); padding: 20px; gap: 12px; }
.tarjeta.sin-relleno { padding: 0; gap: 0; overflow: hidden; border-radius: var(--radio-lista); }
.tarjeta.marino { background: var(--marino); border-color: var(--marino); color: #fff; }
.tarjeta.destacada { border: 2px solid var(--verde); }
.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tarjeta-cabecera > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-cabecera > div.fila-flex { flex-direction: row; gap: 10px; }
.tarjeta-titulo { font-size: 18px; font-weight: 800; color: var(--marino); margin: 0; }
.tarjeta-titulo.grande { font-size: 22px; }
.tarjeta-subtitulo { font-size: 13px; color: var(--gris); }
.tarjeta-subtitulo.normal { font-size: 14px; }
.tarjeta-pie { padding-top: 14px; border-top: 1px solid var(--divisor); font-size: 13px; color: var(--gris); }
.tarjeta.marino .tarjeta-pie { border-color: var(--marino-3); }

/* Etiqueta + cifra grande (resúmenes y KPIs) */
.cifra { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cifra-etiqueta { font-size: 14px; font-weight: 700; color: var(--gris); display: flex; align-items: center; gap: 8px; }
.cifra-valor { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--marino); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.cifra-valor.heroe { font-size: 44px; letter-spacing: -.03em; }
.cifra-valor.media { font-size: 24px; }
.cifra-valor.rojo  { color: var(--rojo-texto); }
.cifra-valor.verde { color: var(--verde-texto); }
.cifra-nota { font-size: 13px; color: var(--gris); }
@media (max-width: 767.98px) { .cifra-valor.heroe { font-size: 34px; } }

/* KPI clicable */
.kpi {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-kpi);
    padding: 18px; display: flex; flex-direction: column; gap: 8px; text-align: left;
    color: inherit; text-decoration: none; transition: border-color .15s;
}
.kpi:hover { border-color: var(--verde); color: inherit; }
.kpi .cifra-etiqueta { font-size: 14px; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.punto.cuadrado { border-radius: 3px; }
.punto.verde { background: var(--verde); }  .punto.rojo { background: var(--rojo); }
.punto.marino { background: var(--marino); } .punto.azul { background: var(--azul); }
.punto.ambar { background: var(--ambar); }   .punto.gris { background: var(--borde-campo); }

/* Caja gris dentro de una tarjeta (cifras del detalle, totales) */
.caja-gris { background: var(--superficie-2); border-radius: var(--radio-opcion); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.caja-gris.fila { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }

/* ── 3. Rejillas que se reacomodan solas (--min: ancho mínimo de columna) ── */
.rejilla { display: grid; gap: var(--gap, 14px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); align-items: start; }
.rejilla.relleno { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 300px)), 1fr)); }
.rejilla.estirar { align-items: stretch; }
.pila { display: flex; flex-direction: column; gap: var(--gap, 20px); min-width: 0; }
.fila-flex { display: flex; align-items: center; gap: var(--gap, 10px); flex-wrap: wrap; }

/* ── 4. Pills de estado ──────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; justify-self: start;
    padding: 4px 9px; border-radius: var(--radio-pill); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.pill.verde  { background: var(--verde-suave);  color: var(--verde-texto); }
.pill.rojo   { background: var(--rojo-suave);   color: var(--rojo-texto); }
.pill.ambar  { background: var(--ambar-suave);  color: var(--ambar-texto); }
.pill.azul   { background: var(--azul-suave);   color: var(--azul-texto); }
.pill.morado { background: var(--morado-suave); color: var(--morado-texto); }
.pill.marino { background: var(--pagado-suave); color: var(--marino); }
.pill.gris   { background: var(--superficie-3); color: var(--gris); }
.pill.fuerte { font-weight: 800; }
.contador { font-size: 12px; padding: 2px 7px; border-radius: var(--radio-pill); background: var(--superficie-3); font-weight: 800; }

/* ── 5. Avatar con iniciales ─────────────────────────────────────────── */
.avatar {
    width: var(--tam, 40px); height: var(--tam, 40px); border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; background: var(--marino); color: #fff;
    font-size: calc(var(--tam, 40px) * .32); font-weight: 800; text-transform: uppercase;
}

/* ── 6. Chips de filtro y controles segmentados ──────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
    border-radius: var(--radio-pill); border: 1.5px solid var(--borde-campo); background: var(--superficie);
    color: var(--marino); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.chip:hover { border-color: var(--marino); }
.chip.activo { background: var(--marino); border-color: var(--marino); color: #fff; }
.chip.activo .contador { background: rgba(255, 255, 255, .18); }
.chip.sm { height: 38px; font-size: 13px; }
.chip.monto { height: 34px; padding: 0 12px; font-size: 13px; }
.chip.monto.activo { background: var(--verde-suave); border-color: var(--verde); color: var(--verde-texto); }
.chip.tasa { height: 44px; min-width: 60px; justify-content: center; border-radius: 11px; font-weight: 800; }
.chip.tasa.activo { background: var(--marino); border-color: var(--marino); color: #fff; }

.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radio-campo); background: var(--superficie-3); }
.segmentado.pestanas { background: var(--superficie-4); border-radius: var(--radio-opcion); }
.segmentado.mini { display: inline-grid; padding: 3px; border-radius: var(--radio-boton-sm); }
.segmentado > button {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; border: 0; border-radius: 9px; background: transparent;
    color: var(--gris); font-size: 13px; font-weight: 800; white-space: nowrap; padding: 0 8px;
}
.segmentado.pestanas > button { height: 42px; border-radius: 11px; font-size: 14px; }
.segmentado.mini > button { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.segmentado > button.activo { background: var(--superficie); color: var(--marino); box-shadow: var(--sombra-segmento); }
.segmentado .contador.verde { background: var(--verde-suave); color: var(--verde-texto); }
.segmentado .contador.rojo  { background: var(--rojo-suave);  color: var(--rojo-texto); }

/* ── 7. Campos y buscador ────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo-etiqueta { font-size: 14px; font-weight: 700; color: var(--tinta); }
.campo-ayuda { font-size: 12px; font-weight: 600; color: var(--gris); }
.campo-error { font-size: 13px; font-weight: 700; color: var(--rojo-texto); }
.entrada {
    width: 100%; height: 48px; padding: 0 14px; font-size: 15px; font-weight: 600;
    border: 1.5px solid var(--borde-campo); border-radius: var(--radio-campo);
    background: var(--superficie); color: var(--marino); outline: 0;
    transition: border-color .15s, box-shadow .15s;
}
.entrada:focus, .entrada:focus-within { border-color: var(--verde); box-shadow: var(--anillo-foco); }
.entrada.invalida { border-color: var(--rojo); }
textarea.entrada { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; font-weight: 500; }
select.entrada { appearance: auto; }
/* Campo con prefijo (S/, US$) o botón dentro */
.entrada-grupo {
    display: flex; align-items: center; height: 48px; overflow: hidden;
    border: 1.5px solid var(--borde-campo); border-radius: var(--radio-campo); background: var(--superficie);
    transition: border-color .15s, box-shadow .15s;
}
.entrada-grupo:focus-within { border-color: var(--verde); box-shadow: var(--anillo-foco); }
.entrada-grupo > input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 14px; font-size: 16px; font-weight: 700; background: transparent; }
.entrada-prefijo { height: 100%; display: grid; place-items: center; padding: 0 14px; background: var(--superficie-2); border-right: 1px solid var(--borde-campo); font-weight: 800; color: var(--marino); }
.entrada-grupo.destacada { height: 58px; border-color: var(--verde); box-shadow: var(--anillo-foco); border-radius: var(--radio-opcion); }
.entrada-grupo.destacada > input { font-size: 22px; font-weight: 800; }
.entrada-grupo.destacada .entrada-prefijo { background: var(--verde-tenue-2); color: var(--verde-texto); padding: 0 16px; }

.buscador {
    display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; flex: 1; min-width: min(100%, 240px);
    background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: var(--radio-campo); color: var(--gris-2);
}
.buscador:focus-within { border-color: var(--verde); box-shadow: var(--anillo-foco); }
.buscador > input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--tinta); }
.buscador.alto { height: 50px; }
.buscador.destacado { height: 56px; border: 1.5px solid var(--verde); border-radius: var(--radio-opcion); box-shadow: var(--anillo-foco); color: var(--verde); padding: 0 16px; }
.buscador.destacado > input { font-size: 16px; }
.buscador-contador { font-size: 13px; font-weight: 700; color: var(--gris); white-space: nowrap; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Deslizador de monto / cuotas */
input[type="range"].deslizador { width: 100%; accent-color: var(--verde); }

/* ── 8. Interruptor (toggle) ─────────────────────────────────────────── */
.interruptor { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; }
.interruptor-pista { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: var(--radio-pill); background: var(--interruptor-off); transition: background .2s; }
.interruptor-pista::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .2s;
}
.interruptor[aria-checked="true"] .interruptor-pista { background: var(--verde); }
.interruptor[aria-checked="true"] .interruptor-pista::after { left: 22px; }
.interruptor-texto { display: flex; flex-direction: column; }
.interruptor-texto > strong { font-size: 15px; font-weight: 700; }
.interruptor-texto > span { font-size: 12px; color: var(--gris-2); }

/* ── 9. Anillo de progreso y dona (SVG, ver Shared/Anillo.razor) ─────── */
.anillo { position: relative; flex-shrink: 0; width: var(--tam, 132px); height: var(--tam, 132px); }
.anillo > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-pista { stroke: var(--verde-suave); }
.anillo-pista.gris { stroke: var(--divisor); }
.anillo-avance { stroke: var(--verde); transition: stroke-dasharray .4s; }
.anillo-centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anillo-centro > div { display: flex; flex-direction: column; align-items: center; }
.anillo-valor { font-size: 24px; font-weight: 800; color: var(--tinta); line-height: 1.1; }
.anillo-etiqueta { font-size: 11px; font-weight: 600; color: var(--gris); }
.leyenda { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 140px; }
.leyenda-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.leyenda-item > span:nth-child(2) { flex: 1; }
.leyenda-item > strong { font-weight: 800; }
.leyenda.en-linea { flex-direction: row; flex-wrap: wrap; gap: 14px; font-size: 12px; font-weight: 700; color: var(--gris); }
.leyenda.en-linea > span { display: flex; align-items: center; gap: 6px; }

/* Barra de progreso simple y apilada */
.progreso { height: 6px; border-radius: var(--radio-pill); background: var(--divisor); overflow: hidden; }
.progreso.alto { height: 8px; }
.progreso > span { display: block; height: 100%; border-radius: var(--radio-pill); background: var(--verde); transition: width .4s; }
.progreso.marino > span { background: var(--marino); }
.progreso.rojo > span { background: var(--rojo); }
.progreso.verde-suave { background: var(--verde-suave); }
.barra-apilada { display: flex; height: 14px; border-radius: var(--radio-pill); overflow: hidden; background: var(--marino-2); }
.barra-apilada > span { height: 100%; transition: width .4s; }
.barra-apilada.separada { gap: 3px; background: transparent; }

/* ── 10. Tarjeta de opción (cliente, caja, método, monto a cobrar) ───── */
.opcion {
    display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; color: inherit; min-width: 0;
    border-radius: var(--radio-opcion); border: 2px solid var(--borde); background: var(--superficie);
    transition: border-color .15s, background .15s;
}
.opcion:hover { border-color: var(--verde-borde); }
.opcion.activa { border-color: var(--verde); background: var(--verde-tenue); }
.opcion-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opcion-titulo { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.opcion-sub { font-size: 12px; color: var(--gris-2); }
.opcion-marca {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    background: var(--divisor); color: #fff; font-size: 13px; font-weight: 800;
}
.opcion.activa .opcion-marca { background: var(--verde); }
.opcion-icono { width: 40px; height: 40px; border-radius: var(--radio-campo); background: var(--icono-fondo); color: var(--marino); display: grid; place-items: center; flex-shrink: 0; }
/* Radio dentro de la opción (métodos de interés) */
.opcion.radio { flex-direction: column; align-items: stretch; gap: 3px; padding: 12px; }
.opcion.radio .opcion-titulo { display: flex; align-items: center; gap: 8px; }
.opcion.radio .opcion-titulo::before {
    content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #c9d3cd; box-shadow: inset 0 0 0 3px var(--superficie);
}
.opcion.radio.activa .opcion-titulo::before { border-color: var(--verde); background: var(--verde); box-shadow: inset 0 0 0 3px var(--verde-tenue); }
.opcion.radio .opcion-sub { padding-left: 26px; font-weight: 600; color: var(--gris); }

/* ── 11. Listas y tablas ─────────────────────────────────────────────── */
/* Fila de lista clicable completa */
.fila-lista {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 8px; flex-wrap: wrap;
    border: 0; border-bottom: 1px solid var(--divisor); background: transparent; text-align: left; color: inherit; text-decoration: none;
}
a.fila-lista:hover, button.fila-lista:hover { background: var(--superficie-2); color: inherit; }
.fila-lista:last-child { border-bottom: 0; }
.fila-lista-cuerpo { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.fila-lista-titulo { font-size: 14px; font-weight: 700; }
.fila-lista-sub { font-size: 12px; color: var(--gris-2); }
.fila-lista-monto { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* Tabla de escritorio con columnas definidas por la pantalla (--columnas) */
.tabla { display: flex; flex-direction: column; }
.tabla-cabecera, .tabla-fila {
    display: grid; grid-template-columns: var(--columnas); gap: 12px; align-items: center; padding: 14px 20px;
}
.tabla-cabecera {
    background: var(--superficie-2); font-size: 12px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--gris);
}
.tabla-fila { width: 100%; font-size: 14px; border: 0; border-top: 1px solid var(--divisor); background: var(--superficie); text-align: left; color: inherit; text-decoration: none; }
a.tabla-fila:hover, button.tabla-fila:hover { background: var(--superficie-2); color: inherit; }
.tabla-fila > * { min-width: 0; }
.tabla .recortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-vacia { padding: 36px; text-align: center; color: var(--gris); font-weight: 600; }
/* Celda con avatar + nombre */
.celda-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-persona > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.celda-persona strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celda-persona small { font-size: 12px; color: var(--gris-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codigo { font-weight: 700; color: var(--verde-enlace); }
.codigo-mono { font-family: var(--fuente-mono); font-size: 11px; color: var(--gris-2); }

/* Lista clave / valor (revisión antes de confirmar) */
.clave-valor { display: flex; flex-direction: column; }
.clave-valor > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divisor); font-size: 15px; }
.clave-valor dt, .clave-valor > div > span:first-child { color: var(--gris); font-weight: 600; }
.clave-valor dd, .clave-valor > div > span:last-child { margin: 0; font-weight: 800; text-align: right; overflow-wrap: anywhere; }

/* Tabla de cronograma (desplazable con cabecera fija) */
.cronograma { border: 1px solid var(--borde); border-radius: var(--radio-opcion); overflow: auto; max-height: 320px; }
.cronograma .tabla-cabecera { position: sticky; top: 0; z-index: 1; padding: 10px 14px; font-size: 11px; min-width: 520px; }
.cronograma .tabla-fila { padding: 10px 14px; font-size: 13px; min-width: 520px; font-variant-numeric: tabular-nums; }

/* ── 12. Marca de cuota (círculo con número o ✓) ─────────────────────── */
.marca-cuota {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; background: var(--borde-campo); color: var(--marino);
}
.marca-cuota.pagada  { background: var(--verde); color: #fff; }
.marca-cuota.vencida { background: var(--rojo);  color: #fff; }
.marca-cuota.hoy     { background: var(--ambar); color: #fff; }
.marca-cuota.parcial { background: var(--verde-claro); color: var(--marino); }

/* ── 13. Modal (escritorio) / hoja inferior (celular) ────────────────── */
.velo {
    position: fixed; inset: 0; z-index: 1050; background: var(--velo);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: desvanecer .2s ease;
}
.modal-bimo {
    width: 100%; max-width: var(--ancho, 480px); max-height: calc(100dvh - 40px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--superficie); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-modal);
    animation: aparecer .25s ease;
}
.modal-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--divisor); flex-shrink: 0; }
.modal-cabecera > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modal-titulo { font-size: 20px; font-weight: 800; color: var(--marino); margin: 0; }
.modal-subtitulo { font-size: 14px; color: var(--gris); }
.modal-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-pie { display: flex; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--divisor); flex-shrink: 0; }
.paso-modal { font-size: 14px; font-weight: 700; }
@media (max-width: 767.98px) {
    .velo { align-items: flex-end; padding: 0; }
    .modal-bimo { max-width: none; max-height: calc(100dvh - 8px); border-radius: 24px 24px 0 0; }
    .modal-pie { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ── 14. Toast ───────────────────────────────────────────────────────── */
.toast-bimo {
    position: fixed; left: 50%; bottom: calc(24px + var(--barra-inferior-h)); transform: translateX(-50%); z-index: 1100;
    display: flex; align-items: center; gap: 10px; max-width: min(90vw, 480px); padding: 14px 18px;
    background: var(--marino); color: #fff; border-radius: var(--radio-opcion); box-shadow: var(--sombra-toast);
    font-size: 14px; font-weight: 700; animation: aparecer .25s ease;
}
.toast-bimo .toast-marca { width: 22px; height: 22px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; flex-shrink: 0; }
.toast-bimo.error .toast-marca { background: var(--rojo); }

/* ── 15. Estados vacíos y alertas ────────────────────────────────────── */
.vacio {
    padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    border-radius: var(--radio-lista); color: var(--gris); font-weight: 600;
}
.vacio.punteado { background: var(--superficie); border: 1px dashed var(--borde-punteado); }
.vacio.gris { background: var(--superficie-2); border-radius: 16px; }
.vacio.verde { background: #f3f9f5; border-radius: 16px; }
.vacio > strong { font-weight: 800; color: var(--marino); }
.alerta { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radio-opcion); font-size: 14px; font-weight: 600; line-height: 1.4; }
.alerta.roja  { background: var(--rojo-suave); color: var(--rojo-oscuro); }
.alerta.ambar { background: var(--ambar-suave); color: var(--ambar-texto); }
.alerta.verde { background: var(--verde-suave); color: var(--verde-texto); }
.alerta-marca { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--rojo); color: #fff; font-weight: 800; }
.alerta.ambar .alerta-marca { background: var(--ambar); }
.alerta.verde .alerta-marca { background: var(--verde); }
.nota-gris { font-size: 13px; color: var(--gris); background: var(--superficie-2); padding: 8px 12px; border-radius: var(--radio-boton-sm); }

/* ── 16. Uso del plan (Shared/UsoPlan.razor) ─────────────────────────── */
.uso-plan { display: flex; flex-direction: column; gap: 6px; }
.uso-plan-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.uso-plan-fila > span { font-weight: 600; }
.uso-plan-fila > strong { font-weight: 800; color: var(--gris); }
.uso-plan.oscuro .uso-plan-fila > strong { color: #fff; }
.uso-plan.oscuro .progreso { background: var(--marino-2); }

/* Utilidades de espaciado para ajustar una tarjeta sin estilos en línea */
.gap-6 { gap: 6px; }
.mb-8 { margin-bottom: 8px; }
.icono-circulo { width: 44px; height: 44px; }

/* Botones deshabilitados (secundarios e íconos); el primario tiene su propio verde apagado */
.boton-secundario:disabled, .boton-contorno:disabled, .boton-whatsapp:disabled, .boton-peligro:disabled,
.boton-enlace:disabled, .boton-icono:disabled, .chip:disabled { opacity: .45; }
.entrada-grupo.invalida, .entrada-grupo.invalida:focus-within { border-color: var(--rojo); box-shadow: none; }
.alerta-texto { flex: 1; min-width: 0; }
.alerta.gris { background: var(--superficie-3); color: var(--gris); }
.alerta.gris .alerta-marca { background: var(--gris-2); }
.punto.parcial { background: var(--verde-claro); }
.entrada-sufijo { height: 100%; display: grid; place-items: center; padding: 0 10px; font-weight: 800; color: var(--gris); }

/* ── 17. Menú desplegable (barra superior: buscador, avisos, usuario) ── */
.desplegable-velo { position: fixed; inset: 0; z-index: 1021; }
.desplegable {
    position: absolute; top: calc(100% + 10px); z-index: 1022; padding: 8px; display: flex; flex-direction: column; gap: 2px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-modal);
    animation: aparecer .18s ease;
}
.desplegable-derecha { right: 0; }
.desplegable-titulo { padding: 8px 12px 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--gris-2); text-transform: uppercase; }
.desplegable-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 12px;
    border: 0; border-radius: var(--radio-campo); background: transparent; color: var(--marino);
    font-size: 15px; font-weight: 700; text-align: left; text-decoration: none;
}
.desplegable-item:hover { background: var(--superficie-2); color: var(--marino); }
.desplegable-item > span { flex: 1; min-width: 0; }
.desplegable-item > small { font-size: 13px; font-weight: 600; color: var(--gris-2); }
.desplegable-item.peligro, .desplegable-item.peligro:hover { color: var(--rojo-texto); }
.desplegable-item.peligro:hover { background: var(--rojo-suave); }
.desplegable-item-textos { display: flex; flex-direction: column; min-width: 0; }
.desplegable-item-textos strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desplegable-item-textos small { font-size: 12px; font-weight: 500; color: var(--gris-2); }
.desplegable-icono { width: 32px; height: 32px; border-radius: var(--radio-boton-sm); background: var(--icono-fondo); display: grid; place-items: center; flex-shrink: 0; }
.desplegable-item > .desplegable-icono { flex: none; }
.desplegable-separador { height: 1px; margin: 6px 4px; background: var(--divisor); }
.desplegable-vacio { padding: 18px 12px; text-align: center; font-size: 14px; color: var(--gris); }