/*
 * Capa de estilo propia sobre el tema.
 *
 * El tema esta compilado y no hay build, asi que en vez de tocar sus archivos se
 * redefine encima lo que hace falta. Se carga despues del tema y antes de los ajustes
 * de contraste.
 *
 * Criterio de color: los rellenos van saturados, y el texto sobre fondo claro usa una
 * variante mas oscura del mismo tono. Un color fluor sobre blanco no se lee.
 */

:root {
    --bss-primary: #4c6fff;
    --bss-primary-fuerte: #3a55e0;
    --bss-primary-suave: #eef1ff;
    --bss-primary-texto: #3242c7;

    --bss-success: #12c76a;
    --bss-success-fuerte: #0a9a52;
    --bss-success-suave: #e6faee;
    --bss-success-texto: #0a7a41;

    --bss-warning: #ffb020;
    --bss-warning-fuerte: #e09400;
    --bss-warning-suave: #fff6e3;
    --bss-warning-texto: #96610a;

    --bss-danger: #ff3d68;
    --bss-danger-fuerte: #e01f4b;
    --bss-danger-suave: #ffecf1;
    --bss-danger-texto: #c00f39;

    --bss-info: #a855f7;
    --bss-info-fuerte: #8e3ce0;
    --bss-info-suave: #f6edff;
    --bss-info-texto: #7326c4;

    --bss-oscuro: #16162a;
    --bss-borde: rgba(22, 22, 42, .07);
    --bss-sombra: 0 6px 28px rgba(22, 22, 42, .07);
    --bss-radio: 14px;
}

/* ------------------------------------------------------------------ rellenos */

.btn.btn-primary,
.bg-primary,
.label.label-primary,
.progress-bar.bg-primary,
.symbol.symbol-primary .symbol-label {
    background-color: var(--bss-primary) !important;
    border-color: var(--bss-primary) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--bss-primary-fuerte) !important;
    border-color: var(--bss-primary-fuerte) !important;
}

.btn.btn-success,
.bg-success,
.label.label-success,
.label.label-dot.label-success,
.progress-bar.bg-success {
    background-color: var(--bss-success) !important;
    border-color: var(--bss-success) !important;
}

.btn.btn-success:hover,
.btn.btn-success:focus {
    background-color: var(--bss-success-fuerte) !important;
    border-color: var(--bss-success-fuerte) !important;
}

.btn.btn-warning,
.bg-warning,
.label.label-warning,
.label.label-dot.label-warning,
.progress-bar.bg-warning {
    background-color: var(--bss-warning) !important;
    border-color: var(--bss-warning) !important;
}

.btn.btn-danger,
.bg-danger,
.label.label-danger,
.label.label-dot.label-danger,
.progress-bar.bg-danger {
    background-color: var(--bss-danger) !important;
    border-color: var(--bss-danger) !important;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
    background-color: var(--bss-danger-fuerte) !important;
    border-color: var(--bss-danger-fuerte) !important;
}

.btn.btn-info,
.bg-info,
.label.label-info {
    background-color: var(--bss-info) !important;
    border-color: var(--bss-info) !important;
}

/* --------------------------------------------------- texto sobre fondo claro */

.text-primary { color: var(--bss-primary-texto) !important; }
.text-success { color: var(--bss-success-texto) !important; }
.text-warning { color: var(--bss-warning-texto) !important; }
.text-danger  { color: var(--bss-danger-texto) !important; }
.text-info    { color: var(--bss-info-texto) !important; }

/*
 * Los estilos claros del tema quedaban en 2,5:1 sobre su propio fondo. El relleno se
 * mantiene suave y el texto pasa a la variante oscura, que es lo que los vuelve
 * legibles sin cambiar el aspecto.
 */
.btn.btn-light-primary,
.label.label-light-primary,
.alert.alert-light-primary,
.symbol.symbol-light-primary .symbol-label,
.bg-light-primary {
    background-color: var(--bss-primary-suave) !important;
    color: var(--bss-primary-texto) !important;
    border-color: transparent !important;
}

.btn.btn-light-success,
.label.label-light-success,
.alert.alert-light-success,
.symbol.symbol-light-success .symbol-label,
.bg-light-success {
    background-color: var(--bss-success-suave) !important;
    color: var(--bss-success-texto) !important;
    border-color: transparent !important;
}

.btn.btn-light-warning,
.label.label-light-warning,
.alert.alert-light-warning,
.symbol.symbol-light-warning .symbol-label,
.bg-light-warning {
    background-color: var(--bss-warning-suave) !important;
    color: var(--bss-warning-texto) !important;
    border-color: transparent !important;
}

.btn.btn-light-danger,
.label.label-light-danger,
.alert.alert-light-danger,
.symbol.symbol-light-danger .symbol-label,
.bg-light-danger {
    background-color: var(--bss-danger-suave) !important;
    color: var(--bss-danger-texto) !important;
    border-color: transparent !important;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus { background-color: #dfe5ff !important; }
.btn.btn-light-success:hover,
.btn.btn-light-success:focus { background-color: #d2f5e0 !important; }
.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus  { background-color: #ffdae3 !important; }

/* ------------------------------------------------------------------- formas */

.card.card-custom {
    border-radius: var(--bss-radio);
    border: 1px solid var(--bss-borde);
    box-shadow: var(--bss-sombra);
}

.modal-content {
    border-radius: 18px;
    border: none;
    box-shadow: 0 24px 64px rgba(22, 22, 42, .18);
}

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn.btn-sm { border-radius: 8px; }

.form-control,
.select2-container--default .select2-selection--single {
    border-radius: 10px;
}

.label.label-inline { border-radius: 7px; }

.alert.alert-custom { border-radius: 12px; }

pre { border-radius: 12px; }

/* ---------------------------------------------------------- foco del teclado */

/*
 * Sin esto no se ve donde esta parado quien navega con el teclado. El anillo va afuera
 * del elemento para no mover nada de lugar al aparecer.
 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--bss-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(76, 111, 255, .18) !important;
}

.form-control:focus {
    border-color: var(--bss-primary) !important;
    box-shadow: 0 0 0 4px rgba(76, 111, 255, .12) !important;
}

/* ------------------------------------------------------------- barra lateral */

.aside,
.aside .brand {
    background-color: var(--bss-oscuro) !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: rgba(76, 111, 255, .16) !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: #ffffff !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon {
    color: var(--bss-primary) !important;
}

/* ----------------------------------------------------------------- detalles */

.header { border-bottom: 1px solid var(--bss-borde); }

.table.table-head-custom thead th {
    color: #6b6f8a !important;
    letter-spacing: .04em;
}

.table.table-vertical-center tbody tr:hover { background-color: #fafbff; }

.nav.nav-tabs.nav-tabs-line .nav-link.active {
    border-bottom-color: var(--bss-primary) !important;
    color: var(--bss-primary-texto) !important;
}

/*
 * Los estilos "light" del tema tienen el texto en gris claro: 3,5:1 sobre su propio
 * fondo. La accion principal de cada fila no puede estar por debajo del minimo legible.
 */
.btn.btn-light,
.btn.btn-light:not(:disabled):not(.disabled) {
    color: #4a4d63 !important;
}

.nav.nav-tabs.nav-tabs-line .nav-link {
    color: #56596e !important;
}

.topbar .text-dark-50 {
    color: #4a4d63 !important;
}

/*
 * El aviso flotante tapaba el selector de cliente. Abajo a la derecha no compite con
 * ningun control.
 */
#toast-container.toast-top-right {
    top: auto !important;
    bottom: 12px !important;
    right: 12px !important;
}

#toast-container > .toast {
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(22, 22, 42, .16);
    opacity: 1;
}

#toast-container > .toast-success { background-color: var(--bss-success-fuerte); }
#toast-container > .toast-error   { background-color: var(--bss-danger-fuerte); }

/* ------------------------------------------------------- selector de cliente */

/*
 * Va debajo de la marca y no en la cabecera: es lo que decide que datos se ven en
 * todas las pantallas, asi que tiene que estar a la vista y no escondido en un rincon.
 */
.bss-cliente {
    padding: 0 1.5rem 1.25rem;
}

.bss-cliente-boton {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .04);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.bss-cliente-boton:hover,
.bss-cliente-boton[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .16);
}

.bss-cliente-boton .ki { color: rgba(255, 255, 255, .55); }

.bss-cliente-pie {
    color: rgba(255, 255, 255, .5);
    font-size: .8rem;
}

/*
 * Se abre al costado y no abajo: desplegar sobre el menu lo tapa justo cuando hay que
 * elegir, y con la lista larga el panel se comia media pantalla.
 */
.bss-cliente-panel {
    width: 21rem;
    max-width: calc(100vw - 2rem);
    margin-left: .75rem;
    border: none;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(22, 22, 42, .22);
    overflow: hidden;
}

/*
 * Un cliente puede tener decenas de subcuentas: la lista se desplaza sola y el
 * buscador queda fijo arriba.
 */
.bss-cliente-lista {
    max-height: min(26rem, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem 0;
}

.bss-cliente-lista::-webkit-scrollbar { width: 6px; }
.bss-cliente-lista::-webkit-scrollbar-thumb {
    background-color: #d7dae7;
    border-radius: 3px;
}

.bss-cliente-titulo {
    padding: .5rem 1.25rem .25rem;
    color: #8b8fa7;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bss-cliente-opcion {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6rem 1.25rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.bss-cliente-opcion:hover { background-color: #f4f6ff; }

.bss-cliente-opcion-activa { background-color: var(--bss-primary-suave); }

/* --------------------------------------------------------- detalles finos */

/*
 * El item activo del menu quedaba en 4,2:1. Un fondo mas oscuro deja el texto blanco
 * por encima del minimo sin cambiar el color de la marca.
 */
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: #2f45c4 !important;
}

/* El anillo de foco se recortaba contra el ancho de la barra: va hacia adentro. */
.aside a:focus-visible,
.aside button:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
}

/* La cruz de cerrar se montaba sobre la ultima palabra del aviso. */
#toast-container > .toast { padding-right: 2.5rem; }

#toast-container > .toast .toast-close-button { right: .6rem; }

/* Deja libre la esquina donde caen los botones de accion de la ultima fila. */
#toast-container.toast-top-right { bottom: 4.5rem !important; }

/* El icono en SVG del tema toma el color del item, igual que los de fuente. */
.aside-menu .menu-nav > .menu-item > .menu-link .svg-icon svg g [fill] {
    fill: #4a4b6a;
    transition: fill .3s ease;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .svg-icon svg g [fill],
.aside-menu .menu-nav > .menu-item:hover > .menu-link .svg-icon svg g [fill] {
    fill: #ffffff;
}

/* ------------------------------------------------------------ tipografia */

/*
 * El tema trae su tipografia escrita a mano en cientos de reglas, asi que no alcanza
 * con cambiarla en el body. Se listan los elementos que llevan texto, no un selector
 * universal: los iconos son fuentes tipograficas y cambiarles la familia los borra.
 */
:root {
    --bss-fuente: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body,
button,
input,
optgroup,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.label,
.menu-text,
.card-title,
.modal-title,
.dropdown-item,
.nav-link,
.alert,
.table,
.navi-text,
.symbol-label,
.text-muted,
.swal2-popup,
#toast-container > .toast {
    font-family: var(--bss-fuente) !important;
}

/* Los numeros de una tabla se comparan mejor si todos ocupan lo mismo. */
.table td,
.font-size-h2 {
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- pie de la barra */

/*
 * Fijo abajo: la identidad y sus acciones son lo que menos se toca, asi que no pueden
 * ocupar la cabecera, que es el lugar mas caro de la pantalla.
 */
.aside { position: relative; }

.bss-pie {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.bss-pie-boton {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .6rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.bss-pie-boton:hover,
.bss-pie-boton[aria-expanded="true"] { background-color: rgba(255, 255, 255, .08); }

.bss-pie-boton .ki { color: rgba(255, 255, 255, .5); }

.bss-pie-mail {
    color: rgba(255, 255, 255, .45);
    font-size: .78rem;
}

.bss-pie-campana {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
}

.bss-pie-campana:hover,
.bss-pie-campana[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* El numero va sobre la campana: un punto solo no dice cuanto falta resolver. */
.bss-pie-punto {
    position: absolute;
    top: .25rem;
    right: .25rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: .55rem;
    background-color: var(--bss-danger);
    color: #ffffff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.aside .dropdown-menu { z-index: 1050; }

/*
 * Sin min-height el contenedor del menu no cede altura y empuja el pie fuera de la
 * pantalla: con muchas secciones, la cuenta deja de verse.
 */
#kt_aside_menu_wrapper {
    /* El tema lo deja en flex: 1 0 auto, o sea que crece pero no cede. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#kt_aside_menu_wrapper::-webkit-scrollbar { width: 5px; }
#kt_aside_menu_wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .14);
    border-radius: 3px;
}

/* Los iconos del menu vienen de una sola familia: mezclar sets se nota enseguida. */
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon.bi {
    font-size: 1.15rem;
    line-height: 1;
    color: #6b6f8a;
    transition: color .3s ease;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon.bi,
.aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-icon.bi {
    color: #ffffff;
}

/* ------------------------------------------------------ barras de listado */

/*
 * Bootstrap le saca las esquinas a todo lo que esta dentro de un input-group, asi que
 * el buscador quedaba cuadrado al lado de botones redondeados. Las esquinas se devuelven
 * a los extremos del grupo, que es donde corresponden.
 */
.input-group-sm > .input-group-prepend > .input-group-text {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.input-group-sm > .form-control:last-child,
.input-group-sm > .form-control:not(:first-child):not(:last-child) {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.input-group-sm > .input-group-append > .input-group-text {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Misma altura que los botones de al lado, o la linea se ve desprolija. */
.input-group-sm > .form-control,
.input-group-sm > .input-group-prepend > .input-group-text,
select.form-control.form-control-sm {
    height: calc(1.35em + 1.1rem + 2px);
}

/* ------------------------------------------------- cambio de cliente */

/*
 * Arriba a la derecha, donde uno espera la cuenta activa. El icono dice que hace el
 * boton —cambiar— y no repite la inicial del nombre, que ya esta escrito al lado.
 */
/* El nombre del cliente activo queda a la vista: el boton dice que hace, no donde estas. */
.bss-cuenta-activa {
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 8px;
    background-color: var(--bss-primary-suave);
    color: var(--bss-primary-texto);
    font-size: .82rem;
    font-weight: 600;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bss-switch {
    /* En pixeles: el tema pone la raiz en 13px, asi que los rem quedan mas chicos de
       lo que uno calcula y el panel salia angosto para una lista de dos lineas. */
    width: 340px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.bss-switch-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.15rem .85rem;
    border-bottom: 1px solid var(--bss-borde);
}

.bss-switch-cabecera h3 {
    font-size: 1rem;
    margin: 0;
}

/* Volver a la vista de plataforma.
   Encima de la lista de clientes, que es donde se busca la salida cuando se
   entro por aca. Es boton y no enlace porque soltar el cliente cambia estado y
   va por POST con su token; el formulario es aparte del de cambio porque son
   dos acciones distintas y uno dentro de otro no es HTML valido. */
.bss-volver-plataforma {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .85rem 1.15rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bss-borde);
    text-align: left;
    font-weight: 600;
    color: var(--bss-primary-texto);
    cursor: pointer;
}

.bss-volver-plataforma:hover {
    background: var(--bss-primary-suave);
}

.bss-switch-buscador { padding: .85rem 1.15rem; }

#bss-switch .bss-cliente-lista {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .25rem .65rem 1.15rem;
}

#bss-switch .bss-cliente-titulo {
    padding: .75rem .5rem .3rem;
}

/* Filas mas juntas y con su propio recuadro, para que se lean como una lista. */
#bss-switch .bss-cliente-opcion {
    padding: .5rem;
    border-radius: 8px;
}

#bss-switch .bss-cliente-opcion + .bss-cliente-opcion { margin-top: .15rem; }

/* ------------------------------------------------------ contraste minimo */

/*
 * Blanco sobre el primario da 4,2:1 y el minimo legible es 4,5. El relleno saturado se
 * conserva para etiquetas y puntos; los botones con texto blanco usan la variante
 * oscura, que llega a 5,9.
 */
.btn.btn-primary,
.btn.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--bss-primary-fuerte) !important;
    border-color: var(--bss-primary-fuerte) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--bss-primary-texto) !important;
    border-color: var(--bss-primary-texto) !important;
}

/* El texto de un aviso tiene su propia regla en el tema y se saltea la del contenedor. */
.alert.alert-custom.alert-light-success .alert-text { color: var(--bss-success-texto) !important; }
.alert.alert-custom.alert-light-danger .alert-text  { color: var(--bss-danger-texto) !important; }
.alert.alert-custom.alert-light-warning .alert-text { color: var(--bss-warning-texto) !important; }
.alert.alert-custom.alert-light-primary .alert-text { color: var(--bss-primary-texto) !important; }

/* Los rotulos de seccion eran de 9px: ilegibles antes que de bajo contraste. */
.bss-cliente-titulo {
    font-size: .78rem;
    color: #6b6f8a;
}

/* .card-title es flex: el espacio en blanco del HTML entre el titulo y lo que le
   sigue se descarta, y «3 peticiones» y «de 30» quedan pegadas. */
.card-title {
    gap: .35rem;
}

/* Titulo con bajada debajo, no al lado. */
.card-title.flex-column {
    gap: 0;
}

/* «Limpiar» se leia como deshabilitado al lado de un boton activo. */
.btn.btn-clean {
    color: #6b6b80;
}

.btn.btn-clean:hover,
.btn.btn-clean:focus {
    color: var(--bss-oscuro);
    background-color: rgba(22, 22, 42, .05);
}

/* El boton del ojo quedaba un pixel mas bajo que el campo. */
.input-group > .input-group-append > .btn {
    align-self: stretch;
    height: auto;
}

/* --------------------------------------------- guia que se puede cerrar */

.bss-resumen {
    cursor: pointer;
    list-style: none;
}

.bss-resumen::-webkit-details-marker {
    display: none;
}

/* La flecha avisa que el bloque se abre y se cierra. Sin ella, un encabezado que
   responde al clic es un secreto que nadie descubre. */
.bss-resumen .card-title::after {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-left: .7rem;
    border-right: 2px solid #b5b5c3;
    border-bottom: 2px solid #b5b5c3;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .15s ease;
}

details[open] > .bss-resumen .card-title::after {
    transform: translateY(1px) rotate(-135deg);
}

/* ================================================ acciones masivas del catalogo */

/* Los tres pasos viven en el mismo modal: formulario, avance y resultado. */
.bss-paso { display: none; }
.bss-paso.bss-paso-activo { display: block; }

/* La cinta de seleccion, entre el encabezado y la tabla. */
.bss-cinta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .75rem 2.25rem;
    background: var(--bss-primary-suave);
    border-top: 1px solid rgba(76, 111, 255, .18);
    border-bottom: 1px solid rgba(76, 111, 255, .18);
    font-size: .95rem;
    color: var(--bss-primary-texto);
}

.bss-cinta-enlace {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--bss-primary-texto);
    text-decoration: underline;
    cursor: pointer;
}

tr.bss-elegida > td { background: rgba(76, 111, 255, .05); }

/* Eliminar no es a lo que se viene a esta pantalla: discreto hasta que lo mirás. */
.btn.bss-btn-peligro { background: transparent; color: #6f7387; }
.btn.bss-btn-peligro:hover { background: var(--bss-danger-suave); color: var(--bss-danger-texto); }

.bss-glifo-btn {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-right: .35rem;
    vertical-align: -2px;
}

/* ------------------------------------------------------- el estado del sync

   Un distintivo con la nube: el color dice como esta y la nube dice de que se trata.
   Sin texto al lado y sin movimiento: el globito carga el estado y el motivo. */

.bss-estado { position: relative; display: inline-flex; cursor: default; }

.bss-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border-radius: 9px;
}

.bss-glifo {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bss-e-gris  .bss-chip { background: #eef0f8; color: #8b90a6; }
.bss-e-verde .bss-chip { background: var(--bss-success-suave); color: var(--bss-success-texto); }
.bss-e-ambar .bss-chip { background: var(--bss-warning-suave); color: var(--bss-warning-texto); }
.bss-e-rojo  .bss-chip { background: var(--bss-danger-suave);  color: var(--bss-danger-texto); }

/* El globito del navegador tarda un segundo, no se puede pintar y no se anima. Este
   sale al toque, del lado izquierdo para no chocar contra el borde de la tabla. */
.bss-estado[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    max-width: 22rem;
    background: var(--bss-oscuro);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    padding: .35rem .6rem;
    border-radius: 7px;
    white-space: normal;
    width: max-content;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transform: translate(6px, -50%);
    transition: opacity .16s ease, transform .16s ease;
}

.bss-estado[data-tip]:hover::after,
.bss-estado[data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
    .bss-estado[data-tip]::after { transition: opacity .16s ease; transform: translate(0, -50%); }
}

/* -------------------------------------------------------- controles del modal */

.bss-opcion {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    border: 1px solid #eef0f8;
    background: #fff;
    border-radius: 8px;
    padding: .35rem .65rem;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 0;
}

.bss-opcion:has(input:checked) {
    border-color: var(--bss-primary);
    background: var(--bss-primary-suave);
    color: var(--bss-primary-texto);
}

.bss-segmentos {
    display: flex;
    background: #f2f3f9;
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
    max-width: 17rem;
}

.bss-segmentos label {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: #5b5e73;
    padding: .4rem .3rem;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
}

.bss-segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.bss-segmentos label:has(input:checked) {
    background: #fff;
    color: var(--bss-primary-texto);
    box-shadow: 0 1px 4px rgba(22, 22, 42, .1);
}

.bss-numero { width: 6rem; text-align: right; font-weight: 700; }

/* Una decision pendiente no es un error: va en ambar, y el rojo queda para lo que
   ya fallo de verdad. */
.bss-alerta {
    background: var(--bss-warning-suave);
    color: var(--bss-warning-texto);
    border-left: 3px solid #e0a33c;
    border-radius: 0 9px 9px 0;
    padding: .7rem .85rem;
    font-size: .9rem;
}

.bss-eleccion {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    cursor: pointer;
    border: 1px solid #eef0f8;
    border-radius: 9px;
    padding: .65rem .75rem;
    width: 100%;
}

.bss-eleccion:has(input:checked) { border-color: var(--bss-primary); background: var(--bss-primary-suave); }
.bss-eleccion input { margin-top: .3rem; }

.bss-caja {
    border-radius: 10px;
    padding: .75rem .8rem;
    display: flex;
    flex-direction: column;
}

.bss-caja b { font-size: 1.35rem; line-height: 1.15; }
.bss-caja span { font-size: .8rem; font-weight: 600; }

.bss-caja-success   { background: var(--bss-success-suave); color: var(--bss-success-texto); }
.bss-caja-danger    { background: var(--bss-danger-suave);  color: var(--bss-danger-texto); }
.bss-caja-primary   { background: var(--bss-primary-suave); color: var(--bss-primary-texto); }
.bss-caja-secondary { background: #f2f3f9; color: #5b5e73; }

/* ------------------------------------------------------- recorrido del stock */

/* Un lienzo con nodos cableados, como el de cualquier herramienta de automatizacion.
 * La cuadricula no es decoracion: dice "esto es un flujo" antes de que nadie lea una
 * palabra, y ahorra explicarlo con texto.
 *
 * Los cables corren en un solo sentido a proposito. La sincronizacion va de Mercado
 * Libre hacia la tienda y nunca al reves. */

.bss-lienzo {
    padding: 2.75rem 1.25rem 1.75rem;
    border: 1px solid #eef0f8;
    border-radius: .9rem;
    background-color: #fbfcfe;
    background-image: radial-gradient(circle, #dde2ee 1px, transparent 1px);
    background-size: 15px 15px;
    background-position: -1px -1px;
    overflow-x: auto;
}

.bss-flujo {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;

    /* Acotado: sin tope, los cables se estiran a lo ancho de la tarjeta y el flujo se
     * ve desperdigado en vez de compacto. Los nodos son fijos, asi que lo que crece
     * cuando sobra lugar es el cable, y de ahi que haya que ponerle limite al conjunto. */
    max-width: 42rem;
    margin: 0 auto;
    min-width: 32rem;
}

.bss-nodo {
    /* Ancho fijo: es lo que permite que el cable, con margen negativo, termine justo
     * en el borde de la ficha. Con el nodo elastico, el cable arrancaria a media
     * distancia y el dibujo dejaria de leerse como algo conectado. */
    flex: 0 0 9rem;
    min-width: 0;
    text-align: center;
}

.bss-nodo__caja {
    position: relative;
    z-index: 1;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto .7rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e4e8f4;
    box-shadow: 0 2px 10px rgba(28, 39, 76, .07);
}

.bss-nodo__caja img { max-height: 24px; width: auto; }

.bss-nodo__que {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    color: #1c274c;
    line-height: 1.3;
}

.bss-nodo__como {
    display: block;
    font-size: .8125rem;
    line-height: 1.35;
    color: #8b90a5;
}

/* El cable, de borde a borde entre dos fichas. */
.bss-cable {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 1rem;
    height: 2px;

    /* Media ficha hacia abajo para caer a su altura; y hacia los costados, lo que
     * sobra del nodo a cada lado de la ficha —(9rem - 3.25rem) / 2— para que el cable
     * arranque y termine pegado a ellas. */
    margin: 1.625rem -2.875rem 0;

    background-image: repeating-linear-gradient(
        to right,
        var(--bss-primary) 0 6px,
        transparent 6px 12px
    );
    background-size: 12px 2px;
    background-repeat: repeat-x;
    animation: bss-corriente 620ms linear infinite;
    opacity: .8;
}

/* Los puertos: el circulito en cada punta del cable, como en n8n. Caen justo sobre el
 * borde de la ficha —el cable ya termina ahi— y por eso el dibujo se lee enchufado y no
 * apoyado al lado. */
.bss-cable::before,
.bss-cable::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bss-primary);
    transform: translateY(-50%);
}

.bss-cable::before { left: -4px; }
.bss-cable::after  { right: -4px; }

/* El puerto de llegada a la tienda respira. Es el unico adorno con significado en toda
 * la pantalla: dice que esa punta esta viva, que es justo lo que nadie puede comprobar
 * mirando su tienda —un stock quieto y un canal cortado se ven exactamente igual. */
.bss-cable--llega::after {
    background: var(--bss-success);
    border-color: var(--bss-success);
    animation: bss-respira 2.4s ease-in-out infinite;
}

@keyframes bss-respira {
    0%, 100% { box-shadow: 0 0 0 0 rgba(18, 199, 106, .5); }
    70%      { box-shadow: 0 0 0 7px rgba(18, 199, 106, 0); }
}

@keyframes bss-corriente {
    from { background-position: 0 0; }
    to   { background-position: 12px 0; }
}

/* Apagado: el cable sigue ahi para que se entienda el recorrido, pero quieto y gris.
 * Que la animacion se detenga es la forma mas directa de mostrar que no pasa nada. */
.bss-cable--quieto {
    animation: none;
    opacity: .6;
    background-image: repeating-linear-gradient(
        to right,
        #c9cdd8 0 6px,
        transparent 6px 12px
    );
}

.bss-cable--quieto::before,
.bss-cable--quieto::after {
    border-color: #c9cdd8;
    background: #fff;
    animation: none;
    box-shadow: none;
}

/* Los cuatro numeros, en una sola tira al pie del lienzo. */
.bss-medidas {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.25rem;
    background: #fff;
    border: 1px solid #eef0f8;
    border-radius: .65rem;
    overflow: hidden;
}

.bss-medida {
    flex: 1 1 0;
    min-width: 9rem;
    padding: .85rem 1.1rem;
    border-left: 1px solid #f1f3f9;
}

.bss-medida:first-child { border-left: 0; }

.bss-medida__rotulo {
    display: block;
    font-size: .75rem;
    color: #8b90a5;
    margin-bottom: .1rem;
}

.bss-medida__valor {
    display: block;
    font-weight: 600;
    font-size: 1.0625rem;
    color: #1c274c;
    line-height: 1.25;
}

.bss-medida__pie {
    display: block;
    font-size: .75rem;
    color: #a1a5b7;
}

@media (prefers-reduced-motion: reduce) {
    .bss-cable,
    .bss-cable--llega::after { animation: none; }
}

/* -------------------------------------------------------------- interruptor */

/* Apagado tiene que verse apagado. La base del tema deja la pista pintada aunque la casilla no
 * este marcada, y ahi el control miente sobre su propio estado justo donde importa: es
 * lo unico que le dice a alguien si su stock se esta tocando o no. */
.bss-llave input[type="checkbox"]:not(:checked) + span,
.bss-llave input[type="checkbox"]:not(:checked) + span::before {
    background-color: #e4e6ef !important;
}

/* Los controles del flujo, agrupados: probar y el interruptor son la misma clase de
 * cosa —operar la automatizacion— y sueltos en la barra se leen como dos botones
 * cualesquiera al lado de un titulo. */
.bss-controles {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem .3rem .35rem;
    border: 1px solid #e9ecf5;
    border-radius: .6rem;
    background: #fff;
}

.bss-controles__separador {
    width: 1px;
    height: 1.35rem;
    background: #eceff7;
    margin: 0 .35rem;
}

.bss-probar {
    border: 0;
    background: transparent;
    padding: .3rem .6rem;
    border-radius: .45rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--bss-primary);
    white-space: nowrap;
}

.bss-probar:hover { background: var(--bss-primary-suave); }

.bss-probar:disabled { opacity: .6; }