/* ==========================================================================
   VASSO — tema del admin sobre AdminLTE 4
   Identidad tomada de la tienda: negro profundo, acento violeta, Orbitron + Manrope.
   Regla: aqui van TODOS los overrides. Nunca estilos inline ni <style> en el HTML.
   ========================================================================== */

/* --------------------------------------------------------- 1. Fuentes locales */
@font-face {
    font-family: 'Orbitron';
    src: url('/adminlte/vendor/fonts/orbitron.woff2') format('woff2-variations');
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/adminlte/vendor/fonts/manrope.woff2') format('woff2-variations');
    font-weight: 300 800;
    font-display: swap;
}

/* --------------------------------------------------------- 2. Paleta de marca */
:root {
    --vasso-bg: #08080a;
    --vasso-panel: #0c0c10;
    --vasso-panel-alto: #121218;
    --vasso-linea: #1c1c22;
    --vasso-txt: #f4f4f6;
    --vasso-muted: #9398a0;
    --vasso-accent: #7c3aed;
    --vasso-accent-claro: #a855f7;

    --bs-font-sans-serif: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Orbitron', var(--bs-font-sans-serif);

    /* Escala de z-index: sin esto los modales pelean con el sidebar y los toasts */
    --z-sticky: 10;
    --z-sidebar: 20;
    --z-dropdown: 30;
    --z-modal: 50;
}

:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #a855f7;
    --bs-link-color-rgb: 168, 85, 247;
    --bs-link-hover-color: #c084fc;
}

.btn-primary {
    --bs-btn-bg: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-hover-bg: #6d28d9;
    --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-disabled-bg: #7c3aed;
    --bs-btn-disabled-border-color: #7c3aed;
}

.text-bg-primary {
    background-color: #7c3aed !important;
}

/* --------------------------------------------------------- 3. Modo oscuro (por defecto) */
[data-bs-theme='dark'] {
    --bs-body-bg: var(--vasso-bg);
    --bs-body-color: var(--vasso-txt);
    --bs-body-bg-rgb: 8, 8, 10;
    --bs-tertiary-bg: #0a0a0d;
    --bs-secondary-bg: var(--vasso-panel);
    --bs-border-color: var(--vasso-linea);
    --bs-secondary-color: var(--vasso-muted);
    --bs-emphasis-color: #ffffff;
}

[data-bs-theme='dark'] body,
[data-bs-theme='dark'] .app-wrapper,
[data-bs-theme='dark'] .bg-body-tertiary {
    background-color: var(--vasso-bg) !important;
}

[data-bs-theme='dark'] .card,
[data-bs-theme='dark'] .app-header,
[data-bs-theme='dark'] .app-footer,
[data-bs-theme='dark'] .dropdown-menu,
[data-bs-theme='dark'] .modal-content,
[data-bs-theme='dark'] .offcanvas {
    background-color: var(--vasso-panel) !important;
    border-color: var(--vasso-linea);
}

[data-bs-theme='dark'] .app-sidebar {
    background-color: #060608 !important;
    border-right: 1px solid var(--vasso-linea);
}

[data-bs-theme='dark'] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--vasso-txt);
    --bs-table-border-color: var(--vasso-linea);
    --bs-table-striped-bg: #ffffff06;
    --bs-table-striped-color: var(--vasso-txt);
    --bs-table-hover-bg: #7c3aed14;
    --bs-table-hover-color: var(--vasso-txt);
}

[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select,
[data-bs-theme='dark'] .input-group-text {
    background-color: var(--vasso-panel-alto);
    border-color: var(--vasso-linea);
    color: var(--vasso-txt);
}

[data-bs-theme='dark'] .form-control::placeholder {
    color: #6b7280;
}

/* --------------------------------------------------------- 4. Modo claro
   El dueño puede preferir claro de dia. Contraste minimo 4.5:1 tambien aqui. */
[data-bs-theme='light'] {
    --bs-secondary-color: #475569;
}

[data-bs-theme='light'] .app-sidebar {
    background-color: #0c0c10 !important;
}

/* --------------------------------------------------------- 5. Tipografia */
body {
    font-family: var(--bs-font-sans-serif);
    /* 16px reales en movil: por debajo, iOS hace zoom al enfocar un input */
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.brand-text,
.small-box .inner h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Orbitron a 900 con mucho espaciado no cabe en el ancho del sidebar: el
   nombre se salia y se veia cortado. Se deja envolver en dos lineas y se
   ajusta el espaciado, en vez de recortar el nombre de la empresa. */
.brand-text {
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: .82rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Importes: sin ancho tabular los digitos bailan y cuesta comparar columnas */
.importe,
.table td.text-end,
.small-box .inner h3 {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 6. Marca en el sidebar */
.app-sidebar .brand-link {
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    /* Sin este relleno la primera linea del nombre queda pegada al borde y se
       ve recortada por arriba. */
    padding-block: .6rem;
    border-bottom: 1px solid var(--vasso-linea);
}

.app-sidebar .brand-link .bi {
    color: var(--vasso-accent-claro);
    flex-shrink: 0;
}

.sidebar-menu .nav-link {
    border-left: 3px solid transparent;
    transition: background-color .2s ease, color .2s ease;
    /* Con dos lineas el texto debe empezar a la altura del icono, no centrado.
       `relative` ancla la flecha del desplegable. */
    align-items: flex-start;
    position: relative;
}

/* "Resumenes de boletas" y "Guias de remision" se cortaban con puntos
   suspensivos. Un menu que no deja leer su propia opcion no sirve: mejor dos
   lineas que media palabra. */
.sidebar-menu .nav-link > p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
    /* Deja sitio a la flecha del desplegable, que va posicionada a la derecha
       dentro de este mismo parrafo. */
    padding-right: 1.25rem;
}

/* La flecha se queda anclada a la derecha aunque el texto ocupe dos lineas. */
.sidebar-menu .nav-link > p > .nav-arrow {
    position: absolute;
    right: .85rem;
    top: .75rem;
}

.app-sidebar .sidebar-menu .nav-icon {
    flex-shrink: 0;
    margin-top: .1rem;
}

.sidebar-menu .nav-link.active {
    background: linear-gradient(90deg, #7c3aed26, transparent);
    border-left-color: var(--vasso-accent);
    color: #fff;
}

/* --------------------------------------------------------- 7. Componentes */
.small-box {
    border: 1px solid #ffffff14;
    border-radius: .75rem;
    overflow: hidden;
}

.small-box .inner h3 {
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: .15rem;
}

.small-box-footer {
    background-color: #00000026;
}

.card {
    border-radius: .75rem;
}

.callout {
    border-radius: .5rem;
}

.badge {
    font-weight: 600;
    letter-spacing: .02em;
}

.btn {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.tabla-compacta td,
.tabla-compacta th {
    padding: .5rem .6rem;
}

/* --------------------------------------------------------- 8. Interaccion y accesibilidad */
.small-box,
[data-bs-toggle],
.dropdown-item,
.nav-link,
.page-link,
label[for] {
    cursor: pointer;
}

/* Foco siempre visible: el POS se opera con teclado */
:focus-visible {
    outline: 2px solid var(--vasso-accent-claro);
    outline-offset: 2px;
    border-radius: .25rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vasso-accent);
    box-shadow: 0 0 0 .2rem #7c3aed40;
}

/* Objetivo tactil de 44px: dedo, no puntero */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .dropdown-item,
    .page-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .btn-sm {
        min-height: 38px;
    }

    .sidebar-menu .nav-link {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------- 9. Responsive */

/* Ninguna tabla rompe el ancho de la pagina: scrollea ella, no el body */
body {
    overflow-x: hidden;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Movil (< 576px) */
@media (max-width: 575.98px) {
    .app-content > .container-fluid,
    .app-content-header > .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    /* KPI de dos en dos: se ven los cuatro sin scroll */
    .small-box .inner h3 {
        font-size: 1.3rem;
    }

    .small-box .inner p {
        font-size: .78rem;
        margin-bottom: 0;
    }

    .small-box-icon {
        font-size: 2.2rem;
        opacity: .25;
    }

    .app-content-header h3 {
        font-size: 1.2rem;
    }

    /* La miga de pan no aporta en movil y roba una linea entera */
    .app-content-header .breadcrumb {
        display: none;
    }

    .card-body {
        padding: .9rem;
    }

    /* Acciones a ancho completo y apiladas, no apretadas */
    .acciones-movil {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .acciones-movil .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .small-box .inner h3 {
        font-size: 1.6rem;
    }
}

/* Los dropdown grandes se salen de pantalla en movil si no se limitan */
@media (max-width: 767.98px) {
    .dropdown-menu-lg {
        min-width: min(20rem, calc(100vw - 1.5rem));
    }

    .app-header .navbar-nav .nav-link {
        padding-left: .55rem;
        padding-right: .55rem;
    }
}

/* --------------------------------------------------------- 10. Estados de comprobante
   El color no puede ser el unico indicador: cada estado lleva punto ademas de texto. */
.estado-punto::before {
    content: '';
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .4rem;
    background: currentColor;
}

/* --------------------------------------------------------- 11. Login */
.login-page {
    background:
        radial-gradient(1200px 600px at 50% -10%, #7c3aed24, transparent 70%),
        var(--vasso-bg);
    min-height: 100vh;
    min-height: 100dvh;
}

.login-page .card {
    border: 1px solid var(--vasso-linea);
    box-shadow: 0 24px 60px -24px #000000cc;
}

.marca-login {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 1.15rem;
    line-height: 1.3;
}

/* El logo viene con mucho aire alrededor: el recorte lo compensa para que no
   parezca flotando lejos del titulo. */
.marca-login-logo {
    width: 300px;
    max-width: 100%;
    height: auto;
    margin-bottom: -2.25rem;
}

.marca-sidebar-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
}

.sidebar-brand .brand-text {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .06em;
    font-size: .74rem;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: normal;
}

/* --------------------------------------------------------- 12. Impresion */
@media print {
    .app-sidebar,
    .app-header,
    .app-footer,
    .no-imprimir {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }
}

/* --------------------------------------------- 13. Editor de cabeceras */

/* Cuadros de fondo: dejan ver que zonas de la cabecera quedan transparentes,
   que en papel blanco significa "aqui no se imprime nada". */
.cvs-fondo-cuadros {
    background-image:
        linear-gradient(45deg, var(--bs-border-color) 25%, transparent 25%),
        linear-gradient(-45deg, var(--bs-border-color) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--bs-border-color) 75%),
        linear-gradient(-45deg, transparent 75%, var(--bs-border-color) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    overflow-x: auto;
}

.cvs-lienzo {
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    line-height: 0;
}

/* El lienzo tiene medidas fijas (son milimetros reales de papel), asi que en
   movil se desplaza en su caja en vez de deformar el diseno. */
.cvs-lienzo canvas {
    max-width: none;
}

#cvs-props .btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ------------------------------------------------- 14. Kardex valorizado */

/* Las tres zonas del formato 13.1 se distinguen por color: de un vistazo se
   ve si una fila es entrada o salida sin leer los numeros. */
.tabla-kardex .grupo-entradas { background: rgba(34, 197, 94, .08); }
.tabla-kardex .grupo-salidas  { background: rgba(239, 68, 68, .08); }
.tabla-kardex .grupo-saldo    { background: rgba(59, 130, 246, .08); }

.tabla-kardex th,
.tabla-kardex td {
    white-space: nowrap;
}

/* El kardex tiene 13 columnas: en pantallas chicas se desplaza en su caja,
   no se comprime hasta ser ilegible. */
.tabla-kardex {
    min-width: 60rem;
}

/* ------------------------------------------------------ 15. Avisos del panel */

/* Antes eran tres barras a ancho completo, una pegada a otra: ocupaban media
   pantalla y empujaban los indicadores fuera de la vista. Ahora van dentro de
   un panel plegable, como lineas compactas. */
.avisos .card-header {
    cursor: pointer;
}

.avisos .card-header[aria-expanded='false'] .bi-chevron-down {
    transform: rotate(-90deg);
}

.avisos .bi-chevron-down {
    transition: transform .2s ease;
}

.aviso {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid transparent;
    border-radius: .25rem;
    font-size: .9rem;
    line-height: 1.45;
}

.aviso + .aviso {
    margin-top: .35rem;
}

.aviso-danger {
    border-left-color: var(--bs-danger);
    background: rgba(220, 53, 69, .1);
}

.aviso-warning {
    border-left-color: var(--bs-warning);
    background: rgba(255, 193, 7, .1);
}

.aviso-info {
    border-left-color: var(--bs-info);
    background: rgba(13, 202, 240, .1);
}

.aviso .bi {
    flex-shrink: 0;
    margin-top: .15rem;
}

.aviso-danger .bi { color: var(--bs-danger); }
.aviso-warning .bi { color: var(--bs-warning); }
.aviso-info .bi { color: var(--bs-info); }

/* Aire entre bloques: el panel se veia apretado con las tarjetas pegadas. */
.small-box {
    margin-bottom: 1rem;
}

/* ------------------------------------------------ 16. Respiracion general */

/* El contenido venia muy pegado al borde y entre bloques. En una pantalla de
   gestion se pasan horas: el aire no es adorno, evita leer mal una cifra. */
.app-content {
    padding-block: 1.25rem;
}

.app-content-header {
    padding-block: 1.25rem .5rem;
}

.app-content > .container-fluid > .card,
.app-content > .container-fluid > .row {
    margin-bottom: 1.25rem;
}

.card-body {
    padding: 1.15rem;
}

.card-header {
    padding: .9rem 1.15rem;
}

/* Las tablas densas mantienen su compactacion: ahi el aire estorba. */
.tabla-compacta td,
.tabla-compacta th {
    padding-block: .45rem;
}

@media (max-width: 575.98px) {
    .app-content,
    .app-content-header {
        padding-inline: .25rem;
    }

    .card-body {
        padding: .9rem;
    }
}

/* ------------------------------------------------------------ 17. Tooltips */

/* El tema de Tabulator no define fondo ni color del tooltip: hereda, y sobre
   el panel oscuro quedaba texto claro sobre fondo claro, ilegible. */
.tabulator-tooltip {
    background: var(--vasso-panel-alto) !important;
    color: var(--vasso-txt) !important;
    border: 1px solid var(--vasso-linea) !important;
    border-radius: .375rem !important;
    padding: .5rem .7rem !important;
    font-size: .8rem !important;
    line-height: 1.4;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45) !important;
    max-width: 24rem !important;
    white-space: normal;
    z-index: 1100;
}

[data-bs-theme='light'] .tabulator-tooltip {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

/* Los de Bootstrap, por si alguna pantalla los usa. */
.tooltip-inner {
    background-color: var(--vasso-panel-alto);
    color: var(--vasso-txt);
    border: 1px solid var(--vasso-linea);
    max-width: 24rem;
    text-align: left;
    font-size: .8rem;
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--vasso-panel-alto);
    border-bottom-color: var(--vasso-panel-alto);
}

/* El numero del comprobante y la fecha no se recortan: son justo el dato que
   sirve para identificar la fila. */
.tabulator-cell .fw-semibold,
.tabulator-cell .importe {
    overflow: visible;
    text-overflow: clip;
}

/* Reglas de la celda, en UN solo bloque: tenerlas en dos sitios con el mismo
   selector es como una acaba pisando a la otra sin que se vea. */
.tabulator .tabulator-cell {
    white-space: nowrap;
    padding: 5px 10px;
    line-height: 1.3;
}

/* --------------------------------------------- 18. Utilidades de columna
   La regla del proyecto es no poner estilos en el HTML. Estas clases cubren
   los anchos fijos de tabla, que era el 90% de los estilos sueltos. */
.col-3rem  { width: 3rem; }
.col-4rem  { width: 4rem; }
.col-5rem  { width: 5rem; }
.col-6rem  { width: 6rem; }
.col-7rem  { width: 7rem; }
.col-8rem  { width: 8rem; }
.col-9rem  { width: 9rem; }
.col-11rem { width: 11rem; }

/* Sugerencias flotantes de los buscadores (cliente, producto, proveedor). */
.sugerencias {
    position: absolute;
    z-index: var(--z-dropdown);
    width: 100%;
    max-height: 22rem;
    overflow-y: auto;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

/* Iconos grandes de los estados vacios. */
.icono-vacio { font-size: 2.5rem; }
.icono-error { font-size: 3.5rem; }

/* --------------------------------------------- 19. Avisos de pantalla
   Mismo criterio que en el panel: el aviso informa sin comerse la pantalla.
   Un callout de 5 rem empujaba el formulario fuera de la vista. */
.callout {
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.5;
    border-left-width: 3px;
}

.callout > .small,
.callout .small {
    font-size: .82rem;
}

.callout p:last-child,
.callout div:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ Avisos
   Aviso flotante que confirma una accion (envio a SUNAT, correo, anulacion).
   Va por encima del modal de Bootstrap a proposito: casi siempre aparece justo
   cuando un modal se esta cerrando, y por debajo quedaria tapado. */
.aviso-flotante {
    z-index: 1080;
    max-width: 30rem;
}

/* ------------------------------------------------------------ Ubigeo
   Sugerencias del buscador de ubigeos. Van por encima del formulario y con
   alto limitado: la lista puede traer 30 distritos y sin tope empuja la
   pagina entera hacia abajo. */
.ubigeo-sugerencias {
    position: absolute;
    z-index: 1055;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
}

/* ------------------------------------------------- Campos numericos
   Fuera las flechitas del navegador. Ocupan sitio, no se pueden usar con
   decimales de verdad y en un campo alineado a la derecha tapan la cifra.
   Se escribe el numero y ya. */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --------------------------------------------- 13. Mapa de ventas por zona */
/* La barra necesita alto propio: la de Bootstrap por defecto es tan fina que
   con una zona pequeña no se distingue de una vacia. */
.mapa-barra {
    height: .5rem;
    min-width: 6rem;
}

/* ------------------------------------------------------------ Mapa de ventas
   Dibujado con SVG desde contornos LOCALES: sin servidor de baldosas, para que
   funcione sin internet y para que nadie de fuera sepa por donde vende este
   negocio. Los colores salen de aqui, no del JS, para poder cambiarlos sin
   tocar el codigo. */
#mapa-peru {
    display: flex;
    justify-content: center;
}

.mapa-svg {
    width: 100%;
    max-width: 34rem;
    height: auto;
}

:root {
    --mapa-vacio: rgba(148, 152, 160, .16);
    --mapa-flojo: rgba(124, 58, 237, .12);
    --mapa-fuerte: #7c3aed;
}

/* El color de cada zona sale de lo que se vendio en ella, asi que es un DATO
   y viaja en una variable; la decision de que ese dato es el relleno se queda
   aqui. Escribir `fill:` en el atributo dejaba media paleta del mapa fuera de
   esta hoja. */
.zona {
    fill: var(--zona-color, var(--mapa-vacio));
    stroke: rgba(148, 152, 160, .45);
    stroke-width: .6;
    stroke-linejoin: round;
    transition: filter .15s ease, stroke .15s ease;
}

/* Solo las zonas con venta responden: dar cursor de mano a una zona donde no
   se ha vendido promete un detalle que no existe. */
.zona.con-venta {
    cursor: pointer;
}

.zona.con-venta:hover {
    filter: brightness(1.35);
    stroke: var(--mapa-fuerte);
    stroke-width: 1.4;
}

.mapa-leyenda {
    display: inline-block;
    width: 5rem;
    height: .6rem;
    border-radius: .3rem;
    background: linear-gradient(90deg, var(--mapa-flojo), var(--mapa-fuerte));
}

/* Una zona en la que se puede ENTRAR se anuncia con el cursor. En el ultimo
   escalon el clic solo salta a la tabla, asi que ahi no se promete nada. */
.zona.entrable {
    cursor: zoom-in;
}

/* --------------------------------------------------- Panel del mapa de ventas */
.mapa-kpi {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .7rem .8rem;
    height: 100%;
}

.mapa-kpi .valor {
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.1;
}

.mapa-kpi .etiqueta {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}

/* Alto fijo con scroll: el ranking puede tener cuarenta zonas y sin tope
   empuja el mapa fuera de la pantalla. */
.mapa-ranking {
    max-height: 28rem;
    overflow-y: auto;
}

.mapa-ranking-fila {
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.mapa-ranking-fila:last-child {
    border-bottom: 0;
}

/* Se marca al llegar desde el mapa. */
.mapa-ranking-fila.table-active {
    background: var(--bs-secondary-bg);
    border-radius: .5rem;
}

/* Cotizado y sin vender: la barra iria a cero y la fila pareceria vacia, asi
   que se marca por el lado. Es negocio perdiendose, no ausencia de negocio. */
.mapa-ranking-fila.solo-cotizo {
    border-left: 3px solid var(--mapa-cotizado);
    padding-left: .5rem;
}

.mapa-punto {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
}

.mapa-punto-cotizado { background: var(--mapa-cotizado); }
.mapa-punto-vacio    { background: var(--mapa-vacio); }

:root {
    --mapa-cotizado: #fb923c;
}

/* El nombre de la zona al pasar por encima. Sustituye al <title> del SVG, que
   tarda un segundo largo en salir: con diez zonas seguidas no hay quien lo lea,
   y con las grises es peor porque son justo las que no se sabe como se llaman. */
#mapa-peru {
    position: relative;
}

.mapa-lectura {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
    padding: .35rem .7rem;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    font-size: .8rem;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.mapa-lectura.visible {
    opacity: 1;
}

/* Toda zona se puede pinchar, tenga ventas o no: el modal dice como se llama. */
.zona.activa {
    cursor: pointer;
}

/* ------------------------------------------- Acciones que NO se pueden usar
   En tema oscuro, el `.disabled` de Bootstrap queda casi del mismo gris que un
   item normal: la unica pista era la explicacion en cursiva de debajo, y eso no
   se lee de un vistazo. En un menu donde una opcion manda un documento a SUNAT,
   dudar de cual esta viva es justo lo que no puede pasar.

   Tres señales, no una sola —el color no basta para quien no lo distingue—:
   se apaga, el cursor lo dice, y lleva la palabra escrita al lado. */
.dropdown-item.disabled,
.dropdown-item:disabled {
    opacity: .45;
    cursor: not-allowed;
    /* Bootstrap le pone pointer-events:none y entonces el cursor no se ve
       siquiera: se devuelven para que el "prohibido" llegue al raton. */
    pointer-events: auto;
}

.dropdown-item.disabled:hover,
.dropdown-item:disabled:hover {
    background: transparent;
}

.dropdown-item.disabled::after,
.dropdown-item:disabled::after {
    content: "no disponible";
    float: right;
    margin-left: 1rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .8;
    border: 1px solid currentColor;
    border-radius: .35rem;
    padding: 0 .35rem;
}

/* Y lo que SI se puede usar se nota al pasar por encima. */
.dropdown-item:not(.disabled):not(:disabled):hover {
    background: var(--bs-secondary-bg);
}

/* El motivo va pegado a la opcion que explica, con sangria, para que se lea
   como su nota al pie y no como otra opcion mas de la lista. */
.dropdown-item-text {
    padding-left: 2.5rem;
    font-style: italic;
    opacity: .75;
}

/* ------------------------------------------------------- Metas: la barra
   Dos marcas en la misma barra: lo hecho (el relleno) y donde TOCARIA ir hoy
   (la raya). Sin la segunda, un 45% no dice si se va bien o mal — que es lo
   unico que se quiere saber al mirar una meta. */
.meta-barra {
    position: relative;
}

.meta-ritmo {
    position: absolute;
    top: -.2rem;
    bottom: -.2rem;
    width: 2px;
    background: var(--bs-body-color);
    opacity: .7;
}

.meta-ritmo::after {
    content: "hoy";
    position: absolute;
    top: -1.1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: .65rem;
    opacity: .7;
}

/* Respuesta del probador de la API.
   Un JSON sin altura maxima empuja la tarjeta y deja el boton fuera de
   pantalla en cuanto la lista trae 50 productos. */
.respuesta-api {
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Separador de la tira de metricas del producto.
   En el telefono las tres columnas van apiladas, asi que la linea tiene que ir
   DEBAJO: un `border-end` sobre un bloque a todo el ancho dibuja una raya
   suelta en el margen derecho. De tablet en adelante vuelve al lado. */
.metrica-separada {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    padding-bottom: .5rem;
}

@media (min-width: 576px) {
    .metrica-separada {
        border-bottom: 0;
        border-right: var(--bs-border-width) solid var(--bs-border-color);
        padding-bottom: 0;
    }
}

/* =========================================================================
   Lo que antes iba en `style=""` dentro de las vistas.
   Aqui se puede cambiar el aspecto de algo UNA vez; repartido por 20 vistas,
   el que se escapa se queda distinto para siempre.
   ========================================================================= */

/* Iconos grandes de los estados vacios ("no hay ningun turno abierto"). */
.icono-vacio      { font-size: 3rem; }
.icono-vacio-sm   { font-size: 2rem; }
.icono-cifra      { font-size: 1.9rem; }

/* Listas que crecen: se les pone tope y barra propia para que la pagina no
   se estire hasta que el boton de guardar quede fuera de pantalla. */
.lista-scroll     { max-height: 18rem; overflow-y: auto; }
.lista-scroll-alta { max-height: 22rem; overflow-y: auto; }

/* Sugerencias que flotan sobre el formulario. El z-index las pone por encima
   del campo siguiente; sin el, la lista queda cortada debajo. */
.sugerencias-flotantes {
    z-index: 40;
    max-height: 22rem;
    overflow-y: auto;
    width: calc(100% - 1.5rem);
}

/* Vistas previas de imagen: el recuadro manda, no la imagen. */
.miniatura-tabla  { width: 40px; height: 40px; }
.recuadro-logo    { height: 120px; }
.recuadro-imagen  { height: 180px; }
.imagen-contenida { max-height: 120px; }
.imagen-previa    { max-height: 220px; }

/* Anchos de columna en tablas de captura, para que los numeros no bailen
   al escribir. */
.tabla-col-3      { width: 3rem; }
.tabla-col-5      { width: 5.5rem; }
.tabla-col-6      { width: 6rem; }
.tabla-col-7      { width: 7rem; }
.tabla-col-8      { width: 8rem; }
.tabla-col-9      { width: 9rem; }

/* Anchos maximos de bloques de texto y avisos. */
.ancho-16         { max-width: 16rem; }
.ancho-28         { max-width: 28rem; }
.ancho-60         { max-width: 60%; }

/* Barras de avance.
   El ALTO es una decision de diseño y va aqui; el ANCHO es un dato calculado
   por fila —«42.7%»— y llega en la variable `--avance`. En una hoja estatica
   no cabe un numero distinto por fila, y con `data-` habria que pintarlo con
   JavaScript: sin JS la barra se quedaria plana. */
.barra-fina       { height: .5rem; }
.barra-gruesa     { height: 1.4rem; }
.barra-avance     { width: var(--avance, 0%); }
.marca-avance     { left: var(--marca, 0%); }

/* Menu desplegable estrecho de la cabecera. */
.menu-estrecho    { --bs-dropdown-min-width: 8rem; }
.ancho-48 { max-width: 48rem; }

/* Buzon de avisos de la cabecera.
   Bootstrap pone `white-space: nowrap` en `.dropdown-item`, asi que el mensaje
   se cortaba a media frase: se leia «El dato ingresado no cumple con el forma…»
   y el motivo del rechazo, que es lo unico util del aviso, no se veia nunca. */
.menu-avisos {
    width: min(26rem, calc(100vw - 1rem));
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: 0;
}

.menu-avisos .dropdown-item {
    white-space: normal;
    word-break: break-word;
}

/* El titulo puede ser largo («SUNAT rechazo B002-00000047»): que baje de linea
   en vez de empujar el ancho del menu. */
.aviso-titulo {
    font-weight: 600;
    line-height: 1.25;
}

.aviso-mensaje {
    display: block;
    line-height: 1.35;
}

/* El pie se queda fijo al hacer scroll: con quince avisos, «marcar todo como
   visto» quedaba a un dedo de distancia del final de la lista. */
.menu-avisos .dropdown-footer {
    position: sticky;
    bottom: 0;
    background: var(--bs-dropdown-bg, var(--bs-body-bg));
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* Un hijo flex no baja de su ancho de contenido salvo que se le diga: sin esto
   el texto largo del aviso ensancha el menu en vez de partirse. */
.aviso-cuerpo { min-width: 0; }

/* Tira de cifras del turno de caja.
   Antes eran cuatro `small-box` de AdminLTE: ocupaban media pantalla para
   decir cuatro numeros, y los movimientos del turno —que es a lo que se entra—
   quedaban debajo del pliegue. */
.tira-resumen .etiqueta {
    display: block;
    font-size: .75rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

.tira-resumen .cifra {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Separadores entre cifras: en movil van dos por fila, asi que la linea
   vertical solo tiene sentido en la segunda columna hacia abajo. */
.tira-resumen > div + div {
    border-left: var(--bs-border-width) solid var(--bs-border-color);
}

@media (max-width: 991.98px) {
    .tira-resumen > div:nth-child(3) {
        border-left: 0;
    }

    .tira-resumen > div:nth-child(n+3) {
        border-top: var(--bs-border-width) solid var(--bs-border-color);
        padding-top: .35rem;
        margin-top: .35rem;
    }
}

/* ------------------------------------------------------------------
   Barra de una lista: buscador + filtros + exportar
   ------------------------------------------------------------------ */

/* El buscador crece con el hueco que sobre pero no empuja a los botones
   fuera de la fila; el `min-width: 0` es lo que le permite encogerse
   dentro de un flex en vez de desbordar la pantalla en movil. */
.buscador-lista {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 32rem;
}

/* La cruz de una etiqueta de filtro. Bootstrap no trae `.btn-close`
   pequena, y a tamano normal es mas alta que la propia etiqueta. */
.chip-quitar {
    width: .5em;
    height: .5em;
    padding: .25em;
    opacity: .75;
}

.chip-quitar:hover {
    opacity: 1;
}

/* ------------------------------------------------------------------
   Barra de acciones de un formulario largo
   ------------------------------------------------------------------ */

/* La guia de remision son cinco tarjetas de campos: con «Guardar» solo al
   final, terminar de rellenar obliga a bajar a buscarlo, y volver arriba a
   corregir obliga a bajar otra vez. Se queda pegada al borde superior. */
.barra-acciones {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bs-body-bg);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

/* ------------------------------------------------------------------
   Filas de tabla compactas
   ------------------------------------------------------------------ */

/* El dueño lo dijo mirando Movimientos: «solo se ven 3 o 4 cosas».
   Dos motivos, y los dos se arreglan aqui.

   El primero: casi cada celda lleva un segundo renglon —el codigo bajo el
   nombre, el usuario bajo el detalle— y eso valia el DOBLE de alto por fila.
   Ese segundo dato sirve, asi que no se quita: se aprieta. Una fila de dos
   renglones pasa de unos 73 px a unos 46. El padding y el line-height de la
   celda estan mas arriba, con el resto de reglas de `.tabulator-cell`. */
.tabulator .tabulator-cell small,
.tabulator .tabulator-cell .d-block {
    font-size: .75rem;
    line-height: 1.25;
}

/* Las etiquetas de estado tambien inflaban la fila. */
.tabulator .tabulator-cell .badge {
    padding: .2em .5em;
    font-size: .72rem;
}

/* Y los botones de accion: un `btn-sm` normal es mas alto que la fila. */
.tabulator .tabulator-cell .btn-sm {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .78rem;
}

.tabulator .tabulator-col {
    padding: 6px 10px;
}