/*
    modern-components.css
    Capa global nueva de componentes que hoy no tienen rediseno propio:
    botones (estados disabled/loading), tablas (fullgrid), formularios
    (inputs/select/chosen/checkbox/radio/switch/fecha), modales, badges
    y scrollbar. Usa unicamente clases ya compartidas por TODO el sistema
    (Bootstrap 3 + fullgrid.jquery.js + smart-form), por lo que no hace
    falta tocar cada modulo por separado. No se modifica ningun id/name
    ni la logica de fullgrid.jquery.js / jquery.validate / chosen.
    Se carga despues de modern-ui.css y modern-shell.css.
*/

/* ===================================================================
   BOTONES: estados disabled / loading que faltaban en modern-ui.css
   =================================================================== */
.btn[disabled],
.btn.disabled {
    opacity: .55 !important;
    filter: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn i,
.btn .fa,
.btn .fa-solid {
    margin-right: 5px;
}

.btn i:only-child,
.btn .fa:only-child {
    margin-right: 0;
}

/* Estado "cargando": agregar la clase .btn-loading via JS existente
   (Tools.js) sobre cualquier boton para mostrar un spinner en vez del
   icono, sin cambiar el texto ni el tamano del boton. */
.btn.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: mc-spin .6s linear infinite;
}

.btn.btn-default.btn-loading::after,
.btn.btn-loading[class*="btn-outline"]::after {
    border-color: rgba(31, 41, 55, 0.25);
    border-top-color: var(--t-primary, #0B5ED7);
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

/* ===================================================================
   TABLAS (fullgrid.jquery.js) — moderniza TODAS las tablas del sistema
   =================================================================== */
.fullgrid-dt-toolbar,
.fullgrid-dt-toolbar-footer {
    background: var(--t-card, #fff) !important;
    border-color: var(--t-border, #e5e9f1) !important;
    box-shadow: none !important;
}

.fullgrid-dt-toolbar {
    border-radius: var(--t-radius, 12px) var(--t-radius, 12px) 0 0;
    padding: 12px 14px 8px !important;
}

.fullgrid-dt-toolbar-footer {
    border-radius: 0 0 var(--t-radius, 12px) var(--t-radius, 12px);
}

table.fullgrid {
    border-collapse: separate !important;
    border-spacing: 0;
}

table.fullgrid thead th {
    background: var(--t-bg, #f8fafc) !important;
    color: var(--t-text-muted, #64748b) !important;
    font-size: var(--t-fs-grid-th, 10px) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--t-border, #e5e9f1) !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

table.fullgrid tbody td {
    padding: 10px 12px !important;
    font-size: var(--t-fs-grid, 12px) !important;
    color: var(--t-text, #1f2937);
    border-bottom: 1px solid var(--t-border, #e5e9f1) !important;
    vertical-align: middle !important;
}

table.fullgrid tbody tr {
    transition: background var(--t-transition, .15s ease);
}

table.fullgrid tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.015);
}

table.fullgrid tbody tr:hover {
    background: var(--t-primary-soft, rgba(11, 94, 215, 0.08)) !important;
}

table.fullgrid tbody tr:last-child td {
    border-bottom: none !important;
}

.fullgrid_info {
    color: var(--t-text-muted, #64748b) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: var(--t-fs-grid, 12px) !important;
}

/*
 * Todo lo que se lee dentro de una grilla usa el mismo tamanio: cabeceras
 * y celdas arriba, y aqui los controles que fullgrid pone alrededor
 * (buscadores por columna, selector de cantidad de registros, botones de
 * la barra y de cada fila, paginacion). Sin esto cada uno se quedaba con
 * el tamanio general del sistema y la grilla se veia mas grande que su
 * propio contenido.
 */
.fullgrid-dt-toolbar,
.fullgrid-dt-toolbar-footer,
table.fullgrid {
    font-size: var(--t-fs-grid, 12px);
}

.fullgrid-dt-toolbar .btn,
.fullgrid-dt-toolbar-footer .btn,
table.fullgrid .btn,
.fullgrid-dt-toolbar .form-control,
.fullgrid-dt-toolbar-footer .form-control,
table.fullgrid .form-control,
table.fullgrid input,
table.fullgrid select,
table.fullgrid label,
.fullgrid_length,
.fullgrid_length select,
.fullgrid_paginate a,
.fullgrid_paginate .paginate_button {
    font-size: var(--t-fs-grid, 12px) !important;
}

.fullgrid_paginate .paginate_button,
.fullgrid_paginate a {
    border-radius: var(--t-radius-sm, 8px) !important;
    margin: 0 2px !important;
    border-color: var(--t-border, #e5e9f1) !important;
    color: var(--t-text, #1f2937) !important;
    transition: background var(--t-transition, .15s ease);
}

.fullgrid_paginate .paginate_button.current,
.fullgrid_paginate a.activerd {
    background: var(--t-primary, #0B5ED7) !important;
    border-color: var(--t-primary, #0B5ED7) !important;
    color: #fff !important;
}

/*
 * Botones de accion del toolbar (Ganancia/PDF/Excel y variantes por
 * modulo, ej. Nuevo/Importar en Marca-Categorias-Series): fullgrid los
 * agrupa en un .btn-group de Bootstrap 3, pensado para botones de
 * esquinas cuadradas pegados unos a otros sin espacio. Como este sistema
 * redondea TODOS los .btn (border-radius:10px!important, ver
 * modern-ui.css), esa union sin espacio hacia que las esquinas
 * redondeadas de cada boton chocaran con las del siguiente -- se veian
 * amontonados/deformes en vez de una fila prolija. Se reemplaza el
 * float+solapamiento de Bootstrap por una fila flex con espacio real
 * entre botones.
 */
.fullgrid-dt-toolbar .btn-group,
.fullgrid-dt-toolbar-footer .btn-group {
    display: inline-flex !important;
    gap: 8px;
}

.fullgrid-dt-toolbar .btn-group > .btn,
.fullgrid-dt-toolbar-footer .btn-group > .btn {
    float: none !important;
    margin: 0 !important;
}

/*
 * Boton "Actualizar" (refrescar grilla) al pie: fullgrid lo inserta con
 * "margin-left:18px" inline junto al selector de cantidad de filas, sin
 * relacion con el .btn-group de arriba -- se le da la misma separacion
 * consistente.
 */
[id^="btnRefresh_"] {
    margin-left: 12px !important;
}

/* ===================================================================
   PESTAÑAS (.nav-tabs de Bootstrap 3) — moderniza TODAS las pestañas
   del sistema (Precios y Stock, Kardex, Liquidacion Diaria, etc.)
   -------------------------------------------------------------------
   Diseño: solo texto, sin capsula ni fondo. La fila lleva una linea
   divisoria inferior y la pestaña activa se marca unicamente con un
   subrayado dorado de 2px. Los colores salen de tokens (--t-tab-*), asi
   que el modo oscuro se resuelve solo sin duplicar este bloque.

   Se usa !important porque el tema base pinta las pestañas como cajas
   (bootstrap.min.css: borde+radio+fondo blanco en la activa; y
   smartadmin ".nav-tabs.bordered" agrega un recuadro completo).
   =================================================================== */
.nav-tabs,
.nav-tabs.bordered {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--t-tab-border, #DCE4EA) !important;
    box-shadow: none !important;
    padding-left: 0 !important;
}

/* El panel de contenido deja de ser una "caja" pegada a las pestañas:
   solo contenido, separado de la fila por 18px. */
.nav-tabs + .tab-content,
.nav-tabs.bordered + .tab-content {
    background: transparent !important;
    border: none !important;
    margin-top: 18px;
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

/* Ojo: NO incluir aca ".nav-tabs.bordered > :first-child a" -- esa
   combinacion tiene mas especificidad (3 clases) que la regla de pestaña
   activa de mas abajo (2 clases), y como la activa suele ser la primera,
   se terminaba pisando a si misma. El "border:none" de aca ya deja sin
   efecto el "border-left-width:0" que smartadmin le pone a ese primer
   item, asi que no hace falta apuntarlo. */
.nav-tabs > li > a,
.nav-tabs.bordered > li > a {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 4px 0 0 !important;
    padding: 10px 16px !important;
    font-family: var(--t-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: var(--t-tab-text, #5B6B78) !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* Hover en inactiva: solo se aviva el texto.
   Llevaba un fondo gris claro, y como una caja rellena al lado de otra sin
   relleno se lee como "esta esta seleccionada", el raton acababa diciendo
   lo mismo que el subrayado dorado y se contradecian. */
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background: transparent !important;
    color: var(--t-tab-text-active, #1E3A6E) !important;
    border-bottom-color: transparent !important;
}

/* Activa: texto en color de acento y la pestania marcada arriba y abajo.
   Dos barras y no una: la dorada de abajo dice cual esta abierta, y la azul
   de arriba le cierra el recuadro por el otro lado sin llegar a dibujar una
   caja. Las dos se mantienen en hover (no desaparecen).

   La de arriba va con box-shadow y no con borde, que es como la hace la
   plantilla: una sombra no ocupa sitio, asi que la pestania inactiva no
   tiene que reservar dos pixeles para que el texto no de un salto al
   cambiar de pestania. */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
    background: transparent !important;
    color: var(--t-tab-text-active, #1E3A6E) !important;
    box-shadow: 0 -2px 0 var(--t-tab-topbar, #57889C) !important;
    border-bottom: 2px solid var(--t-tab-underline, #B98A2E) !important;
    cursor: pointer !important;
}

.nav-tabs > li.active > a:hover {
    background: transparent !important;
    color: var(--t-tab-text-active, #1E3A6E) !important;
    box-shadow: 0 -2px 0 var(--t-tab-topbar, #57889C) !important;
    border-bottom: 2px solid var(--t-tab-underline, #B98A2E) !important;
}

/* Badges/labels usados dentro de las tablas (Bootstrap 3 .label) */
.label {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    letter-spacing: .02em;
}

.label-success { background: var(--t-success, #10B981) !important; }
.label-warning { background: var(--t-warning, #F59E0B) !important; }
.label-danger  { background: var(--t-danger, #EF4444) !important; }
.label-info    { background: var(--t-info, #06B6D4) !important; }
.label-default { background: var(--t-text-muted, #94A3B8) !important; }
.label-primary { background: var(--t-primary, #0B5ED7) !important; }

/* ===================================================================
   FORMULARIOS: inputs, select, textarea, checkbox, radio, switch
   =================================================================== */
.smart-form .form-control,
.smart-form input[type="text"]:not(.modern-search-input),
.smart-form input[type="number"],
.smart-form input[type="email"],
.smart-form input[type="password"],
.smart-form input[type="date"],
.smart-form select,
.smart-form textarea,
.form-control:not(.modern-search-input) {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius-sm, 8px) !important;
    box-shadow: none !important;
    font-size: var(--t-fs-grid, 12px) !important;
    color: var(--t-text, #1f2937);
    background: var(--t-card, #fff) !important;
    transition: border-color var(--t-transition, .15s ease), box-shadow var(--t-transition, .15s ease);
    padding: 8px 12px !important;
    height: auto !important;
}

/*
 * SmartAdmin le hace lugar al icono de .icon-append / .icon-prepend con el
 * padding del campo, y la regla de arriba lo pisaba: lo escrito quedaba
 * debajo del icono (sobre todo en los importes, alineados a la derecha).
 */
.smart-form .input .icon-append ~ input { padding-right: 34px !important; }
.smart-form .input .icon-prepend ~ input { padding-left: 34px !important; }

/*
 * Solo lectura: gris, para que se lea como dato calculado y no como campo
 * donde escribir. Es el mismo criterio que la tarjeta de Totales. La regla de
 * arriba pone "background: var(--t-card) !important" a todo campo, asi que
 * esta va despues y con la misma especificidad para ganarle.
 */
.smart-form .modern-form-card input[readonly],
.smart-form .modern-form-card input[disabled],
.smart-form .modern-form-card textarea[readonly] {
    background: #eef1f6 !important;
    color: var(--t-text-muted, #64748B);
}

html.dark-mode .smart-form .modern-form-card input[readonly],
html.dark-mode .smart-form .modern-form-card input[disabled],
html.dark-mode .smart-form .modern-form-card textarea[readonly] {
    /* en oscuro los campos normales ya llevan un velo de 0.08: el de solo
       lectura tiene que quedar claramente por encima para distinguirse */
    background: rgba(148, 163, 184, 0.18) !important;
}

.smart-form .form-control:focus,
.smart-form input:focus,
.smart-form select:focus,
.smart-form textarea:focus,
.form-control:focus {
    border-color: var(--t-primary, #0B5ED7) !important;
    box-shadow: 0 0 0 3px var(--t-primary-soft, rgba(11, 94, 215, 0.15)) !important;
    outline: none !important;
}

.smart-form label,
.control-label {
    font-weight: 600;
    font-size: var(--t-fs-sm, 12.5px);
    color: var(--t-text, #1f2937);
}

/* Chosen (select estilizado) alineado al mismo look de los inputs */
.chosen-container-single .chosen-single {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius-sm, 8px) !important;
    box-shadow: none !important;
    background: var(--t-card, #fff) !important;
    height: 36px !important;
    padding: 7px 12px !important;
    color: var(--t-text, #1f2937) !important;
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--t-primary, #0B5ED7) !important;
    box-shadow: 0 0 0 3px var(--t-primary-soft, rgba(11, 94, 215, 0.15)) !important;
}

.chosen-container .chosen-drop {
    border-color: var(--t-border, #e5e9f1) !important;
    border-radius: 0 0 var(--t-radius-sm, 8px) var(--t-radius-sm, 8px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
}

.chosen-container .chosen-results li.highlighted {
    background: var(--t-primary, #0B5ED7) !important;
}

/* Checkbox / radio (estilo "style-0" usado en todo el sistema) */
.checkbox input[type="checkbox"] + i,
.radio input[type="radio"] + i {
    border-radius: 4px;
    transition: background var(--t-transition, .15s ease), border-color var(--t-transition, .15s ease);
}

.radio input[type="radio"] + i {
    border-radius: 50%;
}

/* Switch de encendido/apagado, cuando se use en vez de checkbox clasico */
.mc-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.mc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mc-switch .mc-switch-track {
    position: absolute;
    inset: 0;
    background: var(--t-border, #e5e9f1);
    border-radius: 999px;
    transition: background var(--t-transition, .15s ease);
    cursor: pointer;
}

.mc-switch .mc-switch-track::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--t-shadow-sm, 0 1px 2px rgba(0,0,0,.15));
    transition: transform var(--t-transition, .15s ease);
}

.mc-switch input:checked + .mc-switch-track {
    background: var(--t-primary, #0B5ED7);
}

.mc-switch input:checked + .mc-switch-track::before {
    transform: translateX(18px);
}

/* Datepicker / clockpicker: alinear el popover al radio/sombra nuevos */
.datepicker.dropdown-menu,
.clockpicker-popover {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius, 12px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: var(--t-primary, #0B5ED7) !important;
    background-image: none !important;
}

/* ===================================================================
   MODALES (Bootstrap 3: .modal-content / .modal-header / .modal-footer)
   =================================================================== */
.modal-content {
    border: none !important;
    border-radius: var(--t-radius-lg, 16px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--t-card, #fff);
    border-bottom: 1px solid var(--t-border, #e5e9f1) !important;
    padding: 16px 22px !important;
}

.modal-title {
    font-weight: 700 !important;
    font-size: var(--t-fs-md, 15px) !important;
    color: var(--t-text, #1f2937) !important;
}

.modal-body {
    padding: 20px 22px !important;
}

.modal-footer {
    border-top: 1px solid var(--t-border, #e5e9f1) !important;
    padding: 14px 22px !important;
    background: var(--t-bg, #f8fafc);
}

.modal-header .close {
    opacity: 1 !important;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg, #f8fafc);
    color: var(--t-text-muted, #64748b) !important;
    text-shadow: none !important;
    transition: background var(--t-transition, .15s ease), color var(--t-transition, .15s ease);
}

.modal-header .close:hover {
    background: var(--t-danger-bg, #fef2f2);
    color: var(--t-danger, #ef4444) !important;
}

.modal.fade .modal-dialog {
    transition: transform .2s ease-out, opacity .2s ease-out;
    transform: translateY(-12px);
    opacity: 0;
}

.modal.fade.in .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* ===================================================================
   SCROLLBAR MODERNO (global, no reemplaza el custom-scroll de SmartAdmin)
   =================================================================== */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.4);
}

/* ===================================================================
   MODO OSCURO: ajustes puntuales para los componentes de este archivo
   =================================================================== */
html.dark-mode table.fullgrid tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.04);
}

html.dark-mode .smart-form .form-control,
html.dark-mode .form-control,
html.dark-mode .chosen-container-single .chosen-single {
    background: var(--t-card, #1e293b) !important;
    color: var(--t-text, #f1f5f9) !important;
}

html.dark-mode .modal-header .close {
    background: rgba(148, 163, 184, 0.12);
}

/* El total (.modern-total-highlight, ej. VENT__txt_total) quedaba
   invisible en modo claro: ".smart-form input[type=text]:not(.modern-search-input)"
   (mas arriba en este mismo archivo) tiene mayor especificidad CSS
   (0,3,1) que un simple ".modern-total-highlight input" (0,2,1), asi
   que ganaba y pintaba el input de fondo blanco con texto blanco.
   Se agregan ancestros/atributo extra para superar esa especificidad. */
.modern-totals-card .modern-total-highlight input.form-control[type="text"],
.modern-total-highlight input.form-control[type="text"],
.modern-total-highlight input,
html.dark-mode .modern-totals-card .modern-total-highlight input.form-control[type="text"],
html.dark-mode .modern-total-highlight input.form-control[type="text"],
html.dark-mode .modern-total-highlight input {
    background: transparent !important;
    color: #fff !important;
}

/* =========================================================================
 * TARJETA DE RESUMEN (.t-kpi) -- componente global
 *
 * Icono en un recuadro de fondo suave a la izquierda, numero grande y el
 * texto debajo. Se usa en el Panel, la Agenda y Suscripciones; cualquier
 * pantalla nueva con numeros de resumen debe usar esta misma pieza.
 *
 *   <div class="t-kpi-grid">
 *     <div class="t-kpi t-kpi--danger is-link">
 *       <div class="t-kpi-icon"><i class="fa fa-exclamation-triangle"></i></div>
 *       <div class="t-kpi-body">
 *         <p class="t-kpi-value">1</p>
 *         <p class="t-kpi-label">Entregas atrasadas <small>detalle</small></p>
 *       </div>
 *     </div>
 *   </div>
 *
 * Color: t-kpi--primary | --info | --success | --warning | --danger; sin
 * modificador queda neutro (gris). is-link: la tarjeta se puede pulsar.
 * Todo sale de los tokens de theme-tokens.css: el modo oscuro es automatico.
 * ========================================================================= */
.t-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--t-space-3);
    margin-bottom: var(--t-space-3);
}

.t-kpi {
    --kpi-c: var(--t-text-muted);
    --kpi-bg: var(--t-bg);
    display: flex;
    align-items: center;
    gap: var(--t-space-3);
    min-width: 0;
    padding: 14px 16px;
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
}

.t-kpi--primary { --kpi-c: var(--t-primary); --kpi-bg: var(--t-primary-soft); }
.t-kpi--info    { --kpi-c: var(--t-info);    --kpi-bg: var(--t-info-bg); }
.t-kpi--success { --kpi-c: var(--t-success); --kpi-bg: var(--t-success-bg); }
.t-kpi--warning { --kpi-c: var(--t-warning); --kpi-bg: var(--t-warning-bg); }
.t-kpi--danger  { --kpi-c: var(--t-danger);  --kpi-bg: var(--t-danger-bg); }

.t-kpi.is-link { cursor: pointer; }
.t-kpi.is-link:hover { border-color: var(--kpi-c); box-shadow: var(--t-shadow); }

.t-kpi-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--kpi-bg);
    color: var(--kpi-c);
    font-size: 18px;
}

.t-kpi-body { min-width: 0; }

.t-kpi .t-kpi-value {
    margin: 0;
    font-size: var(--t-fs-xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--t-text);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-kpi .t-kpi-label {
    margin: 2px 0 0;
    font-size: var(--t-fs-sm);
    line-height: 1.3;
    color: var(--t-text-muted);
}

.t-kpi .t-kpi-label small { display: block; font-size: var(--t-fs-xs); }

/* ===================== PRECIOS (Logistica > Precios) =====================
   Las tres columnas que se editan llevan color para distinguirlas de un
   vistazo: lo que cuesta, lo que se gana y a cuanto se vende. Tonos suaves
   -- el campo sigue siendo un campo, no un semaforo. */
.ps-compra {
    background: #FFFBEB !important;   /* amarillo suave */
    border-color: #FDE68A !important;
}

.ps-ganancia {
    background: #ECFDF5 !important;   /* verde suave */
    border-color: #A7F3D0 !important;
}

.ps-venta {
    background: #EFF6FF !important;   /* azul suave */
    border-color: #BFDBFE !important;
}

/* El stock ya no se edita: se lee */
.ps-stock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* En oscuro el mismo codigo de color, pero como un tinte sobre el campo:
   los fondos claros de arriba dejarian el texto ilegible. */
:root:not([data-theme="light"]) .ps-compra,
:root[data-theme="dark"] .ps-compra {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

:root:not([data-theme="light"]) .ps-ganancia,
:root[data-theme="dark"] .ps-ganancia {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

:root:not([data-theme="light"]) .ps-venta,
:root[data-theme="dark"] .ps-venta {
    background: rgba(59, 130, 246, 0.14) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* ------------------------------------------------------------------
   Sucursales en la ficha del servicio, en tabla
   Una fila por sucursal con la casilla que decide si el articulo
   existe para la venta en ella. La fila atada -- con stock o con
   movimientos -- se marca en gris para que se entienda por que la
   casilla no se puede desmarcar.

   Productos ya no usa esta tabla: sus dos pantallas van en tarjetas
   (.cat-suc-card, mas abajo). Servicios sigue aqui.
   ------------------------------------------------------------------ */
.cat-tabla-suc {
    margin-bottom: 0;
}

.cat-tabla-suc > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom-width: 1px;
}

.cat-tabla-suc > tbody > tr > td {
    vertical-align: middle;
}

.cat-suc-lbl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.cat-suc-lbl input[disabled] {
    cursor: default;
}

.cat-suc-atada {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #6B7280;
}

.cat-tabla-suc .cat-stock-min[disabled] {
    background: #F3F4F6;
    color: #9CA3AF;
}

:root:not([data-theme="light"]) .cat-suc-atada,
:root[data-theme="dark"] .cat-suc-atada {
    color: #9CA3AF;
}

:root:not([data-theme="light"]) .cat-tabla-suc .cat-stock-min[disabled],
:root[data-theme="dark"] .cat-tabla-suc .cat-stock-min[disabled] {
    background: rgba(148, 163, 184, .12);
    color: #6B7280;
}

/* ------------------------------------------------------------------
   Sucursales en el alta de Nuevo Producto
   Una tarjeta por sucursal: arriba el interruptor que la incluye y el
   nombre, y dentro lo que es de la sucursal y no del articulo -- su
   stock inicial, sus dos precios y su stock minimo. La sucursal que
   queda fuera se apaga entera, para que no se escriba un numero que no
   se va a guardar.
   ------------------------------------------------------------------ */
/*
 * "Nueva Categoria" / "Nueva Marca": el boton ocupa su columna entera y mide
 * lo mismo de alto que el desplegable de al lado, para que los dos queden a
 * la misma linea en vez de desbordarse.
 */
.cat-btn-nuevo button {
    width: 100%;
    height: 32px;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * "Agregar Cliente" al costado del desplegable de una suscripcion nueva.
 *
 * Va en una fila flexible y no en dos columnas de la rejilla porque el modal
 * mide 620 px: a ese ancho las columnas col-lg se apilan y el boton caia
 * debajo. Asi quedan juntos sea cual sea el ancho, el desplegable se lleva el
 * espacio que sobra y el boton solo lo que necesita su texto.
 */
.sus-fila-cliente {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sus-fila-cliente > .chosen-container,
.sus-fila-cliente > select {
    flex: 1 1 auto;
    min-width: 0;
}

.sus-btn-cliente {
    flex: 0 0 auto;
}

.sus-btn-cliente button {
    white-space: nowrap;
    padding: 6px 10px;
}

/* Estado del producto: el interruptor y su explicacion en una linea */
.cat-estado {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-estado .help-block {
    margin: 0;
}

.cat-suc-card {
    border: 1px solid var(--t-border, #E5E9F1);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--t-card, #fff);
}

.cat-suc-card:last-child {
    margin-bottom: 0;
}

.cat-suc-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--t-border, #E5E9F1);
}

/* Las cuatro cajas se reparten el ancho y, cuando no caben, bajan de
   linea en vez de apretarse hasta no poder leerse. */
.cat-suc-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cat-suc-campo {
    flex: 1 1 140px;
    min-width: 120px;
}

.cat-suc-campo label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--t-text-muted, #7a8399);
    margin-bottom: 3px;
    padding: 0;
    line-height: 1.4;
}

/*
 * El campo se dibuja aqui entero y no se le pone .form-control a proposito:
 * dentro de .smart-form el tema le da box-sizing content-box, de modo que el
 * relleno y el borde se sumaban al ancho y cada caja se salia 26 px sobre la
 * de al lado -- de ahi que se vieran encimadas y no se leyera el numero. El
 * numero va alineado a la izquierda, debajo de su rotulo, para que rotulo y
 * valor empiecen en el mismo sitio.
 */
.cat-suc-campo input[type="text"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    color: var(--t-text, #2b2f38);
    background: var(--t-input-bg, #fff);
    border: 1px solid var(--t-border, #d6dbe5);
    border-radius: 6px;
}

.cat-suc-campo input[type="text"]:focus {
    border-color: var(--t-primary, #3b82f6);
    outline: 0;
}

.cat-suc-campo input[type="text"][disabled] {
    background: #F3F4F6;
    color: #9CA3AF;
}

:root:not([data-theme="light"]) .cat-suc-campo input[type="text"][disabled],
:root[data-theme="dark"] .cat-suc-campo input[type="text"][disabled] {
    background: rgba(148, 163, 184, .12);
    color: #6B7280;
}

.cat-suc-fuera {
    background: #FAFBFC;
}

.cat-suc-fuera .cat-suc-card-body {
    opacity: .5;
}

:root:not([data-theme="light"]) .cat-suc-fuera,
:root[data-theme="dark"] .cat-suc-fuera {
    background: rgba(148, 163, 184, .08);
}

/* ------------------------------------------------------------------
   Compras: los dos interruptores de la cabecera y el signo de ayuda
   ------------------------------------------------------------------ */
.cmp-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.cmp-ayuda {
    margin-left: 4px;
    color: #9CA3AF;
    cursor: help;
}

.cmp-aviso {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
}

/* El boton "Agregar Proveedor" de Compras ocupa su columna entera: con el
   ancho suelto se salia por debajo del selector que tiene al lado. */
.cmp-btn-prov #btn_nw_prov,
.cmp-btn-prov .btn {
    display: block;
    width: 100%;
}

/* ------------------------------------------------------------------
   El ticket de la venta: el recuadro del comprobante, el bloque de
   totales alineado a la derecha y el de cuentas bancarias del pie.
   ------------------------------------------------------------------ */
.ticket_doc {
    margin: 8px 0;
    padding: 4px 0;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    text-align: center;
}

.ticket_totales {
    width: 100%;
    margin-top: 4px;
}

.ticket_totales td {
    padding: 0;
}

/* el rotulo de cada cuenta: mas pequeño que el numero, que es lo unico
   que hay que copiar sin equivocarse */
.ticket_cuenta_tit {
    font-size: 10px;
    margin-top: 4px;
}

.ticket_cuenta_tit:first-child {
    margin-top: 0;
}

.ticket_cuentas {
    margin: 8px 0;
    padding: 4px;
    border: 1px solid #d0d0d0;
}

/* El interruptor del dia fijo y su explicacion, en una linea */
.sus-dia-fijo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sus-dia-fijo .help-block {
    margin: 0;
    font-size: 11px;
}

/* ------------------------------------------------------------------
   Configuración de Formatos
   Una tabla: a la izquierda que es y que hace cada opcion, a la
   derecha su control. Los titulos de grupo separan por documento.
   ------------------------------------------------------------------ */
.fmt-tabla {
    margin-bottom: 0;
}

.fmt-tabla > tbody > tr > td {
    vertical-align: middle;
    border-top: 1px solid var(--t-border, #E5E9F1);
    padding: 10px 12px;
}

.fmt-tabla > tbody > tr.fmt-grupo > td {
    background: #F7F9FC;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--t-text-muted, #7a8399);
    padding: 7px 12px;
}

:root:not([data-theme="light"]) .fmt-tabla > tbody > tr.fmt-grupo > td,
:root[data-theme="dark"] .fmt-tabla > tbody > tr.fmt-grupo > td {
    background: rgba(148, 163, 184, .10);
}

.fmt-titulo {
    font-weight: 600;
}

.fmt-ayuda {
    font-size: 11px;
    color: var(--t-text-muted, #7a8399);
    margin-top: 2px;
    max-width: 640px;
}

/* el control va a la derecha, que es donde se lo busca */
.fmt-control {
    width: 320px;
    text-align: right;
}

.fmt-control .form-control,
.fmt-control .input-group {
    display: inline-block;
    vertical-align: middle;
}

.fmt-control textarea.form-control {
    display: block;
    width: 100%;
    text-align: left;
}

/* En pantalla angosta la columna fija del control ahogaba la descripcion:
   ahi cada opcion se apila, titulo y explicacion arriba y el control debajo. */
@media (max-width: 900px) {
    .fmt-tabla > tbody > tr:not(.fmt-grupo) > td {
        display: block;
        border-top: 0;
        padding: 2px 12px;
    }

    .fmt-tabla > tbody > tr:not(.fmt-grupo) > td:first-child {
        border-top: 1px solid var(--t-border, #E5E9F1);
        padding-top: 10px;
    }

    .fmt-control {
        width: auto;
        text-align: left;
        padding-bottom: 10px !important;
    }
}

/* El icono de la pestana, dentro de la tabla de parametros: la miniatura y
   su boton, uno al lado del otro en la celda del control. */
.prm-favicon {
    display: inline-block;
    text-align: center;
    width: 120px;
}

.prm-favicon-img {
    border: 3px solid var(--t-border, #ddd);
    width: 120px;
    margin-bottom: 6px;
    min-height: 40px;
}

.prm-favicon-img img {
    display: block;
}

/* ---------------------------------------------------------------------------
   Lo principal del menu, en ambar.

   Emitir un comprobante es a lo que mas se entra en el dia y se veia igual
   que cualquier otra opcion.

   Solo el color de la letra. Llevaba ademas fondo y una barra a la
   izquierda, y el modulo entero quedaba como un bloque marcado que pesaba
   mas que el menu que lo rodea. Con el color basta para encontrarlo.

   En ambar y no en el azul de la marca: el menu abierto, el modulo
   seleccionado y los iconos ya son azules, y una senal del mismo color que
   todo lo de alrededor deja de ser una senal.

   Quien decide cuales se destacan esta en appMenu.js.
   --------------------------------------------------------------------------- */
:root {
    --t-menu-destacado: #B45309;
    --t-menu-destacado-oscuro: #FBBF24;
}

nav ul li.menu-destacado > a,
nav ul li.menu-destacado > a > .menu-item-parent,
nav ul li.menu-destacado > a > .text-menu-sm,
nav ul li.menu-destacado > a > i {
    color: var(--t-menu-destacado) !important;
}

/* sobre el menu oscuro el ambar oscuro no se lee: sube a dorado */
:root:not([data-theme="light"]) nav ul li.menu-destacado > a,
:root:not([data-theme="light"]) nav ul li.menu-destacado > a > .menu-item-parent,
:root:not([data-theme="light"]) nav ul li.menu-destacado > a > .text-menu-sm,
:root:not([data-theme="light"]) nav ul li.menu-destacado > a > i,
:root[data-theme="dark"] nav ul li.menu-destacado > a,
:root[data-theme="dark"] nav ul li.menu-destacado > a > .menu-item-parent,
:root[data-theme="dark"] nav ul li.menu-destacado > a > .text-menu-sm,
:root[data-theme="dark"] nav ul li.menu-destacado > a > i {
    color: var(--t-menu-destacado-oscuro) !important;
}

/* ---------------------------------------------------------------------------
   El calendario de fechas, en modo oscuro.

   Lo pinta entero la plantilla y no tenia version oscura: la cabecera salia
   con el mes y las flechas casi del color del fondo, y habia que adivinar en
   que mes se estaba. Aqui se le da la paleta oscura; en claro no se toca.
   --------------------------------------------------------------------------- */
html.dark-mode .ui-datepicker {
    background: var(--t-card, #1E293B) !important;
    border: 1px solid var(--t-border, #334155) !important;
    color: var(--t-text, #E2E8F0) !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-header {
    background: rgba(148, 163, 184, .12) !important;
    border-bottom: 1px solid var(--t-border, #334155) !important;
    color: var(--t-text, #E2E8F0) !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-title,
html.dark-mode .ui-datepicker .ui-datepicker-title select,
html.dark-mode .ui-datepicker select.ui-datepicker-month,
html.dark-mode .ui-datepicker select.ui-datepicker-year,
html.dark-mode .ui-datepicker select.ui-datepicker-month-year {
    background: var(--t-card, #1E293B) !important;
    color: var(--t-text, #E2E8F0) !important;
    border-color: var(--t-border, #334155) !important;
}

/* las flechas de mes anterior y siguiente */
html.dark-mode .ui-datepicker .ui-datepicker-prev,
html.dark-mode .ui-datepicker .ui-datepicker-next,
html.dark-mode .ui-datepicker .ui-datepicker-prev span,
html.dark-mode .ui-datepicker .ui-datepicker-next span {
    color: var(--t-text, #E2E8F0) !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-prev:hover,
html.dark-mode .ui-datepicker .ui-datepicker-next:hover {
    background: rgba(148, 163, 184, .18) !important;
}

/* la fila de L M X J V S D */
html.dark-mode .ui-datepicker th {
    color: var(--t-text-muted, #94A3B8) !important;
    border-color: var(--t-border, #334155) !important;
}

html.dark-mode .ui-datepicker td .ui-state-default {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--t-text, #E2E8F0) !important;
}

html.dark-mode .ui-datepicker td .ui-state-default:hover {
    background: rgba(148, 163, 184, .18) !important;
}

/* el dia de hoy y el elegido */
html.dark-mode .ui-datepicker td .ui-state-highlight {
    background: rgba(96, 165, 250, .18) !important;
    color: #93C5FD !important;
}

html.dark-mode .ui-datepicker td .ui-state-active {
    background: var(--t-primary, #2563EB) !important;
    color: #fff !important;
}

/* los dias del mes de al lado, apagados pero legibles */
html.dark-mode .ui-datepicker td.ui-datepicker-other-month .ui-state-default,
html.dark-mode .ui-datepicker td.ui-state-disabled .ui-state-default {
    color: var(--t-text-muted, #64748B) !important;
    opacity: .6;
}

/* ---------------------------------------------------------------------------
   Reportes.

   La fila de filtros con el boton Buscar al final de ella, las cajas de
   totales y la tabla del listado. Pensado para servir a todos los reportes,
   no solo al Registro de Ventas.
   --------------------------------------------------------------------------- */
.rpt-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--t-bg, #F8FAFC);
    border: 1px solid var(--t-border, #E5E9F1);
    border-radius: var(--t-radius-sm, 10px);
}

.rpt-campo {
    display: flex;
    flex-direction: column;
    min-width: 130px;
}

.rpt-campo-ancho {
    min-width: 190px;
}

.rpt-campo > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t-text-muted, #64748B);
    margin-bottom: 4px;
}

/* El boton va pegado a los campos que acciona, no contra el borde derecho
   de la pantalla: antes vivia en una columna de la rejilla y acababa a media
   pantalla de distancia de las fechas que filtra. */
.rpt-campo-btn {
    min-width: 0;
    justify-content: flex-end;
}

.rpt-campo-btn > span {
    display: inline-block;
}

:root:not([data-theme="light"]) .rpt-filtros,
:root[data-theme="dark"] .rpt-filtros {
    background: rgba(148, 163, 184, .08);
}

/* ------------------------------------------------ las cajas de totales -- */
.rpt-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.rpt-caja {
    flex: 1 1 150px;
    border: 1px solid var(--t-border, #E5E9F1);
    border-radius: var(--t-radius-sm, 10px);
    padding: 10px 12px;
    background: var(--t-card, #fff);
}

.rpt-caja-tit {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--t-text-muted, #64748B);
}

.rpt-caja-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--t-text, #1F2937);
    margin-top: 2px;
}

/* si hay anuladas, la caja lo dice: es el numero que uno quiere ver en cero */
.rpt-caja-ojo .rpt-caja-num {
    color: #C0392B;
}

/* ------------------------------------------------------- las acciones --- */
.rpt-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

/* ---------------------------------------------------------- la tabla ---- */
.rpt-tabla {
    font-size: 12px;
}

.rpt-tabla > thead > tr > th {
    background: var(--t-bg, #F8FAFC);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--t-text-muted, #64748B);
    white-space: nowrap;
}

/* Una venta anulada se ve, pero no se confunde: su numero esta gastado y
   tiene que aparecer, aunque no sume. */
.rpt-tabla > tbody > tr.rpt-anulada > td {
    color: #C0392B;
    text-decoration: line-through;
}

.rpt-tabla > tbody > tr.rpt-anulada > td .label {
    text-decoration: none;
}

.rpt-tabla > tfoot > tr.rpt-total > td {
    border-top: 2px solid var(--t-border, #E5E9F1);
    font-weight: 700;
    white-space: nowrap;
}

.rpt-vacio {
    padding: 22px 10px !important;
    color: var(--t-text-muted, #64748B);
}

/* ------------------------------------- opciones en tarjeta ------------
   Cada opcion en su tarjeta, con el control debajo de lo que explica.

   La tabla de dos columnas de Formatos va bien cuando son veinte
   opciones seguidas: la vista recorre una columna de rotulos y otra de
   controles. Con tres, y a todo lo ancho, el rotulo se queda solo a la
   izquierda y su campo al otro extremo --- dos cosas que se leen juntas,
   separadas por medio metro de pantalla. Juntas en una tarjeta se leen
   de corrido: que es, que hace, y aqui se cambia. */
.cfg-grupo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t-text-muted, #64748B);
    margin: 14px 0 8px;
}

/* dos por fila donde cabe, una cuando no: con una sola por fila a todo
   lo ancho, la explicacion queda en un renglon kilometrico */
.cfg-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cfg-opcion {
    flex: 1 1 320px;
    border: 1px solid var(--t-border, #E5E9F1);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--t-card, #FFFFFF);
}

/* tres en una sola fila. Con la base de 320px la tercera se iba sola al
   renglon de abajo en cualquier portatil, y tres casillas que se deciden de
   una vez hay que verlas juntas. Debajo de ~800px vuelven a apilarse. */
.cfg-opciones--tres > .cfg-opcion {
    flex: 1 1 240px;
}

.cfg-titulo {
    font-weight: 600;
    color: var(--t-text, #1F2937);
    margin-bottom: 3px;
}

.cfg-ayuda {
    font-size: 12px;
    color: var(--t-text-muted, #64748B);
    line-height: 1.5;
}

.cfg-control {
    margin-top: 10px;
}

/* ------------------------------------------------------- kardex -------
   Tres bloques con un fondo muy tenue cada uno: entradas, salidas y
   saldo. Doce columnas de numeros en blanco se leen contando con el dedo;
   con el fondo, la vista sabe en que bloque esta sin salir de la fila.

   Tenue a proposito. El color aqui agrupa, no avisa: si tiñera de verdad
   competiria con los numeros, que es lo unico que hay que leer. */
.kdx-tabla .kdx-ent { background: rgba(16, 185, 129, .07); }
.kdx-tabla .kdx-sal { background: rgba(239, 68, 68, .07); }
.kdx-tabla .kdx-sal-do { background: rgba(11, 94, 215, .07); }

.kdx-tabla th.kdx-h-ent { background: rgba(16, 185, 129, .16); }
.kdx-tabla th.kdx-h-sal { background: rgba(239, 68, 68, .16); }
.kdx-tabla th.kdx-h-sal-do { background: rgba(11, 94, 215, .16); }

.kdx-tabla th {
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle !important;
}

.kdx-tabla td {
    font-size: 12px;
    white-space: nowrap;
}

/* la fecha del documento manda; debajo, en pequeño, cuando se anoto ---
   dos movimientos del mismo dia se distinguen por ahi */
.kdx-tabla .kdx-fecha > div:first-child { font-weight: 600; }

.kdx-tabla .kdx-registrado {
    font-size: 9.5px;
    color: var(--t-text-muted, #64748B);
    margin-top: 2px;
}

.kdx-tabla tr.kdx-total td {
    font-weight: 700;
    border-top: 2px solid var(--t-border, #E5E9F1);
}

/* la ficha del producto: rotulo a la izquierda, dato a la derecha */
.kdx-ficha { width: auto; min-width: 420px; margin-bottom: 14px; }

.kdx-ficha th {
    width: 150px;
    text-align: right;
    font-weight: 600;
    color: var(--t-text-muted, #64748B);
    background: var(--t-bg, #F8FAFC);
}

/* --------------------------------- cada documento, su propio bloque ----
   En un detallado la fila de la venta y su nota van juntas, y una lista
   de veinte ventas sin nada que las separe se lee como cuarenta renglones
   sueltos. La raya de arriba cierra el bloque anterior y lo que identifica
   al documento --- fecha, comprobante, numero, cliente --- va en negrita:
   es lo que se busca con la vista al recorrer la lista.

   Sin colores nuevos: la misma raya y el mismo gris que usan las demas
   tablas del sistema, para que el reporte no parezca de otro programa. */
.rpt-tabla > tbody > tr.rpt-doc > td {
    border-top: 2px solid var(--t-border, #E5E9F1);
    padding-top: 9px !important;
}

.rpt-tabla > tbody > tr:first-child.rpt-doc > td {
    border-top: none;
}

.rpt-tabla > tbody > tr > td.rpt-fuerte {
    font-weight: 600;
    color: var(--t-text, #1F2937);
}

/* ------------------------------------------ el detalle de cada venta ---
   Lo que cuelga de una fila en el reporte detallado: los datos sueltos de
   la venta y sus productos.

   Va en un gris muy claro y con el tipo mas pequeño para que se lea como
   una nota de esa venta y no como mas filas del reporte: la columna de
   totales tiene que seguir pudiendose seguir con el dedo de arriba abajo
   sin tropezar con los productos. */
.rpt-tabla > tbody > tr.rpt-subfila > td {
    background: var(--t-bg, #F8FAFC);
    padding: 8px 12px 10px !important;
}

.rpt-datos {
    font-size: 11.5px;
    color: var(--t-text, #1F2937);
    margin-bottom: 6px;
    line-height: 1.8;
}

.rpt-datos .rpt-dato {
    padding-right: 18px;
    white-space: nowrap;
}

.rpt-datos b {
    color: var(--t-text-muted, #64748B);
    font-weight: 600;
}

.rpt-subtabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--t-card, #FFFFFF);
    border: 1px solid var(--t-border, #E5E9F1);
    border-radius: 6px;
}

.rpt-subtabla th {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--t-text-muted, #64748B);
    padding: 5px 8px;
    border-bottom: 1px solid var(--t-border, #E5E9F1);
}

.rpt-subtabla td {
    font-size: 11.5px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--t-border, #E5E9F1);
}

.rpt-subtabla tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------------------- graficos ----- */
.rpt-gr-titulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--t-text-muted, #64748B);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 10px 0 6px;
}

.rpt-grafico {
    width: 100%;
    height: 280px;
}

/* ---------------------------------------------------------------------------
   Vista previa de un comprobante.

   Mirar una venta por encima sin abrir el PDF ni el ticket. Se abre desde el
   numero, en la lista de comprobantes, en Mis Ventas y en los reportes.
   --------------------------------------------------------------------------- */
.cpe-link {
    color: var(--t-primary, #0B5ED7);
    font-weight: 600;
    text-decoration: none;
}

.cpe-link:hover {
    text-decoration: underline;
}

.cpe-cuerpo {
    padding: 20px 24px;
}

.cpe-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.cpe-cab-2 {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--t-border, #E5E9F1);
}

.cpe-emisor,
.cpe-cliente {
    flex: 1 1 320px;
    min-width: 0;
}

.cpe-emp,
.cpe-cli-nom {
    font-weight: 700;
    font-size: 14px;
    color: var(--t-text, #1F2937);
}

.cpe-emp-sub {
    font-size: 11.5px;
    color: var(--t-text-muted, #64748B);
    line-height: 1.6;
}

.cpe-doc {
    text-align: right;
    flex: 0 0 auto;
}

.cpe-tipo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t-text-muted, #64748B);
}

/* El numero es lo primero que se busca al abrirla: por eso es lo mas grande
   de la ventana. */
.cpe-num {
    font-size: 30px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--t-text-muted, #64748B);
}

.cpe-fecha {
    font-size: 12px;
    margin-bottom: 8px;
}

.cpe-fecha > span {
    color: var(--t-text-muted, #64748B);
    margin-right: 8px;
}

.cpe-fecha > b {
    color: var(--t-text, #1F2937);
}

/* El total, en negativo: es el otro dato que se mira de un vistazo. */
.cpe-total-caja {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    background: #2F3B4B;
    color: #fff;
    border-radius: var(--t-radius-sm, 8px);
    padding: 7px 14px;
}

.cpe-total-caja > span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .75;
}

.cpe-total-caja > b {
    font-size: 17px;
}

.cpe-estado {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cpe-suc {
    font-size: 11px;
    color: var(--t-text-muted, #64748B);
}

.cpe-chip-ok {
    background: #739E73 !important;
}

.cpe-chip-pend {
    background: #C79121 !important;
}

.cpe-chip-anulada {
    background: #C0392B !important;
}

.cpe-tabla {
    margin-top: 18px;
    font-size: 12px;
}

.cpe-tabla > thead > tr > th {
    background: var(--t-bg, #F8FAFC);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--t-text-muted, #64748B);
    white-space: nowrap;
}

.cpe-vacio {
    padding: 20px 10px !important;
    color: var(--t-text-muted, #64748B);
}

.cpe-totales {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.cpe-tot-fila {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 230px;
    justify-content: space-between;
    font-size: 13px;
}

.cpe-tot-fila > span {
    color: var(--t-text-muted, #64748B);
}

.cpe-tot-fila > b {
    color: #2E7D5B;
    font-variant-numeric: tabular-nums;
}

.cpe-tot-final {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--t-border, #E5E9F1);
    font-size: 15px;
}

html.dark-mode .cpe-total-caja {
    background: #0F172A;
}

html.dark-mode .cpe-tot-fila > b {
    color: #6EE7B7;
}

/* Lo que no se envia a la SUNAT --- una nota interna --- no esta pendiente:
   es que el tramite no existe para ella. Gris, no rojo. */
.cpe-chip-na {
    background: #94A3B8 !important;
}

.cpe-estado > span {
    font-size: 11px;
    color: var(--t-text-muted, #64748B);
    margin-right: 6px;
}

.cpe-estado-na {
    font-size: 11.5px;
    color: var(--t-text-muted, #64748B);
    font-style: italic;
}