// porto-app.scss — estilos de la app para el admin Porto.
// Generado desde modern.scss menos bloques anti-Cuba (ver docs/migracion-estilos-cuba-porto.md).
// modern.scss NO se toca hasta Fase 8.
// ================================================================
// EnterFarmaPlus — Modern UI Global Override
// Importado al final de style.scss (máxima especificidad).
// Moderniza cards, tables, forms, buttons y Element UI
// sin tocar ningún componente Vue individualmente.
// ================================================================

// JS en app.js setea --el-font-family vía inline style para que EP2
// también use Montserrat (su <style> tag ganaría a CSS externo).

// ── 0. Base ──────────────────────────────────────────────────────
// En pro9 real (vega.emito.pe, verificado en vivo) el header y el fondo
// de pagina son el MISMO color (#F2F5F7), sin costura. Nadie seteaba
// html/body en este archivo: quedaba el gris demo del vendor Okler
// (theme.css, #e9e9e9), distinto al --mn-bg del header -> costura
// visible que en pro9 no existe. Mismo token que ya usa .header.
html, body {
    background: var(--mn-bg);
}

/* POS: adapta las etiquetas de comprobante al ancho real del panel, no al viewport. */
.fastpayment-root,
.doc-type-container {
  container: pos-payment / inline-size;
}

.doc-type-label-short { display: none; }

@container pos-payment (max-width: 350px) {
  .doc-type-pill-group .el-radio-button__inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .doc-type-label-full { display: none; }
  .doc-type-label-short { display: inline; }
}

// ── 1. Cards ─────────────────────────────────────────────────────

.card {
    // setting.css carga ULTIMO y trae ".card{border:1px solid rgb(233,237,241)}" (gris con
    // tinte azulado) sin !important -- a igual especificidad gana el que carga despues, asi
    // que sin !important propio setting.css pisaba este border:none pese a estar declarado
    // aca. Ver nota de CLAUDE.md sobre setting.css.
    border: none !important;
    border-radius: 10px;
    // pro9 real (theme.css:7987, verificado) usa "box-shadow:none" -- card 100% plana, sin
    // sombra ni anillo, el unico contraste es el fondo blanco de la card contra --mn-bg de
    // la pagina. Nuestra 2da capa "0 0 0 1px rgba(0,0,0,.04)" (spread sin blur) creaba un
    // anillo de 1px indistinguible de un borde real -- eso era el "borde" que se seguia
    // viendo pese a que .card{border:none} ya andaba bien. Alineado a pro9: sin box-shadow.
    box-shadow: none;
    transition: box-shadow .2s ease;

    // Quitar el borde coloreado superior del template original
    &.card-primary,
    &.card-success,
    &.card-danger,
    &.card-warning,
    &.card-info { border-top: none !important; }

    .card-header {
        background: #fff !important;
        // setting.css tiene ".card .card-header{padding:0 0 10px 0}" y ".card-header
        // {border-bottom:0!important}" -- ambas sin !important en el caso del padding
        // (misma especificidad, gana la que carga despues) y con !important en el borde
        // (le gana a esta sin importar especificidad). Sin esto, el padding colapsaba a
        // 0 0 10px 0 en TODAS las cards y el separador header/body desaparecia.
        border-bottom: 1px solid #f0f2f5 !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 14px 20px !important;
        min-height: unset;

        .card-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--mn-ink);
            margin: 0;
            line-height: 1.4;
        }

        // Muchas vistas ponen el título como <h3>/<h4> crudo (sin .card-title) y
        // caía al tamaño default del theme (~28px), desproporcionado vs el resto.
        // Normalizamos todo encabezado del card-header al mismo tamaño compacto.
        h1, h2, h3, h4, h5, h6 {
            font-size: 15px;
            font-weight: 600;
            color: var(--mn-ink);
            margin: 0;
            line-height: 1.4;
        }
    }

    .card-body {
        padding: 20px;
    }

    .card-footer {
        background: #fafbfc;
        border-top: 1px solid #f0f2f5;
        border-radius: 0 0 10px 10px;
        padding: 12px 20px;
    }
}

// ── 2. Tablas ─────────────────────────────────────────────────────

.table {
    font-size: 13px;
    color: var(--mn-ink);
    margin-bottom: 0;

    thead th {
        background: #f8fafc;
        color: var(--mn-ink);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-bottom: 2px solid #ebeef5 !important;
        border-top: none;
        padding: 10px 12px;
        white-space: nowrap;
        vertical-align: middle;
    }

    tbody td {
        padding: 9px 12px;
        border-top: none;
        border-bottom: 1px solid #f0f2f5;
        vertical-align: middle;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    // Striped: sustituir cebra fuerte por sutil
    &.table-striped tbody tr:nth-of-type(odd) {
        background-color: #fafbfc;
    }

    // Bordered: aligerar los bordes
    &.table-bordered {
        border: 1px solid #ebeef5;

        th, td {
            border: 1px solid #ebeef5;
        }

        thead th {
            border-bottom: 2px solid #ebeef5 !important;
        }
    }

    // Sacado el gate .table-hover: casi ningun consumidor la pone (3 de 86
    // archivos con class="table") -- confirmado sin riesgo de colision (agente,
    // ninguna .table depende de estar sin hover; las tablas con hover propio
    // usan su propia clase, nunca combinada con .table).
    tbody tr:hover td {
        background-color: #f5f9ff;
    }

    tfoot td {
        border-top: 2px solid #ebeef5 !important;
        font-weight: 600;
        background: #f8fafc;
        padding: 10px 12px;
    }

    .celda {
        border-top: 2px solid #ebeef5 !important;
        font-weight: 700;
        background: #f8fafc;
        font-size: 13px;
    }
}

// Contenedor de tabla: bordes modernos
.table-responsive {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: visible;

    > .table {
        margin-bottom: 0;
    }
}

// ── 3. Formularios ────────────────────────────────────────────────

.control-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mn-ink);
    margin-bottom: 5px;
    display: block;
}
// .text-info on a <label> was used to "highlight" key fields — now inconsistent
// against other labels. Restore uniform muted-gray.
label.control-label.text-info {
    color: var(--mn-ink) !important;
}
// Inline action links ([+ Nuevo], [+ Agregar]) — estilo uniforme en TODOS los labels.
// Antes acotado a `.text-info`; por eso los del diálogo (sin text-info) salían
// grandes/uppercase heredando el .control-label base. Ahora aplica global.
label.control-label a {
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mn-primary);
    vertical-align: middle;
    cursor: pointer;
    &:hover { text-decoration: underline; }
}
// Inline action links que son HERMANOS del <label> (no hijos): el <a> lleva
// .control-label y salía grande/uppercase/bold, compitiendo con el título del panel.
// Igualar al estilo subtle de acción. Ej: [+ Ver más] / [- Ver menos] / [+ Agregar] /
// [+ Nuevo] en los filtros de las listas. !important justificado: vence la utility
// .text-info de Bootstrap (que también es !important).
a.control-label {
    font-size: 12px !important;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bs-info-text-emphasis, #00695C) !important; // ~6.6:1 sobre blanco
    vertical-align: middle;
    cursor: pointer;
}
a.control-label strong { font-weight: 500; } // el <strong> interno forzaba 700
a.control-label:hover { text-decoration: underline; }
// Inline action links DENTRO de una cabecera de tabla: "[+ Agregar]" se inserta
// como <a> en un <thead><th> (order_notes, purchase-quotations, income, expenses,
// dispatches, quotations, contracts, purchases… ~25 vistas). En tablas .table
// heredaba el estilo de cabecera (.table thead th: 11px, 700, UPPERCASE,
// letter-spacing) y salía como TÍTULO de columna; en <table> pelado salía como link
// default grande — ambos "tamaño que no corresponde". SIN exigir .table (muchas de
// esas tablas son <table> sin clase) para cubrir las ~25; todos los <a> en thead son
// estos action-links (no hay sort links). Lo igualamos al estilo subtle de los demás
// [+ Agregar]. !important: vence .text-info/.fw-bold de Bootstrap + el text-transform
// heredado de thead th en las tablas .table.
thead th a.text-info {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--bs-info-text-emphasis, #00695C) !important;
    &:hover { text-decoration: underline; }
}

.form-group {
    margin-bottom: 16px;
}

.form-control {
    border-radius: 6px;
    border-color: #dcdfe6;
    // El vendor tiene ".form-control:not(.form-control-sm):not(.form-control-lg)"
    // (theme.css) -- el doble :not() le da mas especificidad que a este selector
    // plano, y le ganaba el font-size (13.6px en vez de nuestro 13px) pese a estar
    // declarado despues. line-height/min-height nunca los fijabamos: quedaban en
    // 1.85/38.4px del vendor, mas altos que nuestro height:36px.
    font-size: 13px !important;
    line-height: 1.4;
    min-height: 36px;
    color: var(--mn-ink);
    height: 36px;
    padding: 6px 12px;
    transition: border-color .18s, box-shadow .18s;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: var(--mn-hint);
        font-size: 12px;
    }
}

textarea.form-control {
    height: auto;
}

// ── 4. Botones Bootstrap ──────────────────────────────────────────

.btn {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
    letter-spacing: 0.2px;
    cursor: pointer;

    &:focus { outline: none; box-shadow: none; }

    &.btn-sm  { padding: 4px 10px; font-size: 12px; border-radius: 5px; }
    &.btn-xs  { padding: 2px 8px;  font-size: 11px; border-radius: 4px; }
    &.btn-lg  { padding: 10px 22px; font-size: 14px; border-radius: 8px; }

    &.btn-primary {
        box-shadow: 0 2px 6px rgba(0, 121, 107, .22);
        &:hover { box-shadow: 0 4px 12px rgba(0, 121, 107, .3); }
    }
    // .btn-success/.btn-danger/.btn-warning solo tenian el box-shadow tintado con
    // el color de marca (rgba de --mn-success/danger/warning) -- el fondo/borde real
    // nunca se fijo, quedaba en la paleta propia del vendor (verde/rojo/naranja de
    // Bootstrap/Okler, NO los tokens --mn-*). El shadow y el boton terminaban en
    // colores distintos entre si.
    &.btn-success {
        background-color: var(--mn-success);
        border-color: var(--mn-success);
        box-shadow: 0 2px 6px rgba(5, 150, 105, .22);
        &:hover { background-color: var(--mn-success); border-color: var(--mn-success); box-shadow: 0 4px 12px rgba(5, 150, 105, .3); filter: brightness(0.92); }
    }
    &.btn-danger {
        background-color: var(--mn-danger);
        border-color: var(--mn-danger);
        box-shadow: 0 2px 6px rgba(220, 38, 38, .18);
        &:hover { background-color: var(--mn-danger); border-color: var(--mn-danger); box-shadow: 0 4px 12px rgba(220, 38, 38, .28); filter: brightness(0.92); }
    }
    &.btn-warning {
        background-color: var(--mn-warning);
        border-color: var(--mn-warning);
        color: #fff;
        box-shadow: 0 2px 6px rgba(245, 158, 11, .18);
        &:hover { background-color: var(--mn-warning); border-color: var(--mn-warning); color: #fff; box-shadow: 0 4px 12px rgba(245, 158, 11, .28); filter: brightness(0.92); }
    }
}

// ── 4bis. Foco de teclado (accesibilidad) ───────────────────────────────────
// .btn/.form-control de arriba apagan el outline en CUALQUIER :focus (incluido
// click de mouse) sin poner nada en su lugar. Fuera de .vet-ui (el unico grupo
// que lo contrarresta con su propia regla), cualquier boton/input/link de la
// app queda sin indicador de foco al navegar con teclado -- WCAG 2.4.7, no es
// solo estetico. :focus-visible (no :focus): solo se ve con teclado, nunca al
// clickear con mouse. Misma especificidad que las reglas de arriba -- gana por
// orden de cascada (se compila despues).
// [tabindex] excluye los inputs internos de EP2 (el-input__inner/el-textarea__inner/
// el-select__input): esos 3 llevan tabindex="0" propio de EP2 y ya tienen su
// :focus-visible con outline:none en brand-overrides.css (a proposito: el foco lo
// muestra el wrapper con box-shadow, no el input). Sin este :not, [tabindex] empataba
// en especificidad con esa regla y ganaba por cargar despues -- doble anillo de foco
// (box-shadow redondeado del wrapper + outline cuadrado del input) en TODO el-input/
// el-select/el-textarea del admin. Bug real, visto en /reports/items/date_of_due.
.btn:focus-visible,
.form-control:focus-visible,
.el-button:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible:not(.el-input__inner):not(.el-textarea__inner):not(.el-select__input) {
    outline: 2px solid var(--mn-primary);
    outline-offset: 2px;
}

// ── 5. Element UI ─────────────────────────────────────────────────

// el-button
.el-button {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all .18s ease;

    &.el-button--small { border-radius: 5px; font-size: 12px; }
    &.el-button--mini  { border-radius: 4px; font-size: 11px; }
}
// Botones hermanos: EP2 trae `.el-button+.el-button{margin-left:12px}` en su
// dist/index.css, que webpack INYECTA en runtime DESPUÉS de overrides.css (mismo
// caso que el remap de `:root`). Por eso necesitamos !important para imponer 10px
// — no es contra Cuba, es contra el CSS de EP que carga después del nuestro.
.el-button + .el-button { margin-left: 10px !important; }
// ...excepto dentro de un button-group, que deben ir flush.
.el-button-group .el-button + .el-button { margin-left: 0 !important; }

// Totales del comprobante (tabla resumen): los labels salían en ~10.5px (muy chicos
// por una cadena de font-size relativos). Subir un poco para legibilidad.
.table-sm.text-end td { font-size: 12.5px; }
// El bump de arriba NO debe deformar el input de "Otros cargos": lo dejamos compacto.
// Las flechas del spinner (controls-position right) se desalineaban en el contexto small
// (elemento 32px vs wrapper 24px). En un campo de monto se tipea → ocultamos el spinner
// y dejamos un input plano prolijo.
.table-sm.text-end td .el-input-number {
    font-size: 12px;
    width: 110px;
    vertical-align: middle;

    .el-input-number__increase,
    .el-input-number__decrease { display: none; }
    .el-input__wrapper { padding-left: 11px; padding-right: 11px; }
    .el-input__inner { text-align: right; }
}

// Subtítulo bajo la descripción del item (afectación/ICBPER/series): salía en ~6.4px
// (ilegible). setting.css fuerza `small{font-size:0.55em!important}` global → hay que
// ganarle con !important. Tamaño legible + color muted (jerarquía).
.table td small { font-size: 10.5px !important; color: var(--mn-muted); }

// el-tag: más pill
.el-tag {
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    padding: 0 9px;
    height: 22px;
    line-height: 20px;
}

// el-table: cabecera moderna
.el-table {
    font-size: 13px;

    th.el-table__cell {
        background-color: #f8fafc !important;
        color: var(--mn-ink);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        padding: 8px 0;
    }

    .el-table__row {
        &:hover > td.el-table__cell {
            background-color: #f5f9ff !important;
        }
    }

    td.el-table__cell {
        padding: 7px 0;
    }
}

// Tablas de reportes con el-table (Ventas por producto - detalle): números alineados en
// columna (tabular-nums), línea principal + sublínea gris en las celdas de dos renglones,
// y cabecera agrupada ("Rentabilidad") centrada sobre sus hijas.
.mn-report-table {
    .cell { font-variant-numeric: tabular-nums; }
    .mn-cell-main { color: var(--mn-ink); line-height: 1.3; }
    .mn-cell-code { color: var(--mn-muted, #64748B); font-weight: 600; margin-left: 4px; }
    .mn-cell-sub  { display: block; color: var(--mn-muted, #64748B); font-size: 11px; line-height: 1.3; }
    thead.is-group th.el-table__cell { text-align: center; }
    // Bloque "Rentabilidad": tinte suave del color de marca sobre el grupo y sus 4 columnas.
    // !important: la cabecera global de .el-table (arriba) fija su fondo con !important.
    th.el-table__cell.mn-th-profit {
        background-color: color-mix(in srgb, var(--mn-primary) 9%, #fff) !important;
        color: var(--mn-primary);
    }
}

// Mismo tinte de rentabilidad para las tablas simples de reportes (Ventas por producto).
.table thead th.mn-th-profit {
    background-color: color-mix(in srgb, var(--mn-primary) 9%, #fff);
    color: var(--mn-primary);
}

// Ventas por producto: fila por producto con sus presentaciones desplegables debajo.
.mn-expander {
    border: 0; background: transparent; padding: 0 6px 0 0; cursor: pointer;
    color: var(--mn-primary); line-height: 1;
    &:focus-visible { outline: 2px solid var(--mn-primary); outline-offset: 2px; border-radius: 3px; }
}
.table tr.mn-row-expanded > td { background-color: color-mix(in srgb, var(--mn-primary) 5%, #fff); }
.table tr.mn-row-child > td {
    background-color: #fafbfc;
    color: var(--mn-muted, #64748B);
    font-size: 12.5px;
    padding-top: 4px; padding-bottom: 4px;
}
.mn-child-marker { color: var(--mn-primary); margin: 0 4px 0 10px; }

// el-dialog: header y footer modernos
.el-dialog {
    border-radius: 10px !important;
    /* The sidebar itself must not scroll: Pro9 keeps the brand header pinned
       and delegates scrolling to nano.  Hidden made the browser restore a
       60px scroll offset, which moved the logo out of view after navigation. */
    overflow: visible;
    // EP2 le mete `padding:16px` al .el-dialog → la banda del header (#f8fafc)
    // quedaba metida 16px y "flotaba" sobre el blanco del dialog (efecto dos-colores).
    // El header/body/footer ya traen su propio padding, así que lo anulamos para que
    // la banda llene de borde a borde (full-bleed) con las esquinas redondeadas.
    // !important: EP2 carga después y su `.el-dialog{padding:16px}` empata en cascada.
    padding: 0 !important;

    .el-dialog__header {
        background: #f8fafc;
        padding: 16px 20px;
        border-bottom: 1px solid #ebeef5;
    }

    .el-dialog__title {
        font-size: 15px;
        font-weight: 600;
        color: var(--mn-ink);
    }

    .el-dialog__headerbtn {
        top: 14px;
        right: 16px;

        .el-dialog__close {
            font-size: 18px;
            color: var(--mn-muted);
            transition: color .15s;

            &:hover { color: var(--mn-ink); }
        }
    }

    .el-dialog__body {
        padding: 20px;
        color: var(--mn-ink);
    }

    .el-dialog__footer {
        border-top: 1px solid #ebeef5;
        padding: 12px 20px;
        background: #f8fafc;
    }

    // Los forms en diálogo (Nuevo Paciente/Cliente, etc.) usan grid Bootstrap:
    // `.row` sangra -15px y `.col-*` compensa con +15px de padding. Ese padding
    // vive knife-edge: con zoom del navegador o CSS de grid sin gutter, la fila
    // sangra fuera del recuadro de `.el-tabs__content` (overflow:hidden de EP) y
    // RECORTA la etiqueta de la 1ª columna ("…PO DOC IDENTIDAD"). El body ya
    // aporta 20px de padding, así que dejar que el tabs-content no recorte en
    // horizontal es inocuo (EP2 no anima el deslizado del contenido).
    .el-dialog__body .el-tabs__content { overflow: visible; }
}

// el-input: botón en el slot #append (RENIEC/SUNAT/Buscar/Enviar…)
// EP2 le pone al botón `margin:0 -20px` para llenar el padding del slot, pero un
// override dejó el slot en `padding:0 10px` → el botón se DESBORDA 10px sobre el
// input, y como conserva radius en las 4 esquinas, su esquina izquierda redondeada
// deja un "notch" blanco. Solución: en slots CON botón, quitamos el padding y el
// margen, y dejamos el botón recto a la izquierda (pegado al input) y redondeado a
// la derecha. `:has` evita tocar los appends de solo texto.
.el-input-group__append:has(.el-button) {
    padding: 0 !important;
}
// Solo lo esencial: margen 0 (no desborda) + recto a la izquierda. NO tocamos
// tamaño/fuente/icono para no afectar los "+" del buscador/cliente (que quedaban
// más finos/bajos). Cada botón conserva su tamaño natural de EP2.
.el-input-group__append .el-button {
    margin: 0 !important;
    border-radius: 0 4px 4px 0 !important;
}
// EP2 deja el texto del botón del append en gris (#909399 = text-color-secondary)
// → bajo contraste sobre el fondo primario teal. Forzamos blanco.
.el-input-group__append .el-button--primary {
    color: #fff !important;
}

// el-pagination
.el-pagination {
    font-size: 12px;
    padding: 10px 0;

    .el-pager li {
        border-radius: 5px;
        min-width: 30px;
        font-size: 12px;
    }

    button { border-radius: 5px; }
}

// el-select dropdown
.el-select-dropdown {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12) !important;
    border: 1px solid #ebeef5 !important;
}

.el-select-dropdown__item {
    // EP2 trunca con ellipsis a altura fija (34px): con nombres largos (marca,
    // categoria, proveedor) cortaba texto sin ningun tooltip que muestre el
    // resto -- informacion perdida sin forma de verla. Se deja wrappear.
    // !important: el CSS de componentes EP2 se inyecta en runtime DESPUES de
    // este stylesheet (app.js importa element-plus/dist/index.css), gana por
    // orden de carga -- ver CLAUDE.md punto 4.
    font-size: 13px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 34px;
    line-height: 1.4 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    word-break: break-word;

    &.selected { font-weight: 600; }
}

// el-dropdown-menu
.el-dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12) !important;
    border: 1px solid #ebeef5 !important;
    padding: 4px 0;

    .el-dropdown-menu__item {
        font-size: 13px;
        padding: 7px 16px;
        line-height: 1.4;
    }

    // Filtro "Mostrar/Ocultar columnas" (32 listados): el-checkbox dentro del
    // item lo estira a ~46px/fila (height fijo 32px de EP + padding del item).
    // Compactamos SOLO los items con checkbox vía :has() — los items de acciones
    // (links sin checkbox) quedan intactos. Sin !important: la especificidad
    // (0,3,0) ya gana a EP y a la regla de arriba.
    .el-dropdown-menu__item:has(.el-checkbox) {
        padding: 1px 14px;
        line-height: 1.2;

        .el-checkbox {
            height: auto;
            line-height: 1.3;
        }
    }
}

// el-tooltip
.el-tooltip__popper {
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
}

// el-input
.el-input__inner {
    border-radius: 6px;
    font-size: 13px;
    color: var(--mn-ink);
    transition: border-color .18s, box-shadow .18s;

    // Neutralize Bootstrap 5 :valid/:invalid visual feedback — only meaningful
    // inside .was-validated, but EP2 inputs expose native <input> elements that
    // browser-validate on their own (value present → :valid), producing green
    // borders/checkmarks that clash with the theme.
    &:valid,
    &:invalid {
        background-image: none !important;
        box-shadow: none !important;
        border-color: inherit !important;
    }
}

// Same neutralization for EP2 wrappers that use box-shadow for borders
.el-input__wrapper,
.el-textarea__inner {
    &:has(input:valid),
    &:has(input:invalid),
    &:has(textarea:valid),
    &:has(textarea:invalid) {
        // don't let Bootstrap paint green/red on EP2 wrapper
    }
}

// Neutralize Bootstrap 5 .was-validated green border on any native input
// inside EP2 components (el-input, el-select, el-date-picker, etc.)
.was-validated .el-input__inner:valid,
.was-validated .el-input__inner:invalid,
.el-input__inner.is-valid,
.el-input__inner.is-invalid {
    background-image: none !important;
    border-color: inherit !important;
    box-shadow: none !important;
    padding-right: inherit !important;
}

// el-tabs — más limpios
.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #ebeef5;
}

.el-tabs__item {
    font-size: 13px;
    font-weight: 500;
    color: var(--mn-muted);

    &.is-active { color: var(--mn-primary-dk); font-weight: 600; }
}

.el-tabs__active-bar { height: 2px; border-radius: 2px; }

// el-badge
.el-badge__content {
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    padding: 0 5px;
    height: 17px;
    line-height: 17px;
}

// el-card (si se usa Element Card en algún módulo)
.el-card {
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07), 0 0 0 1px rgba(0, 0, 0, .04) !important;
}

// el-loading
.el-loading-spinner .el-loading-text {
    font-size: 13px;
    color: var(--mn-primary-dk);
}

// ── 5bis. .row.widget-grid: contenedor de @yield('content') completo ───────
// El layout mete @yield('content') DIRECTO adentro de <div class="row widget-grid">
// sin ningun wrapper propio (ver app.blade.php). .widget-grid no tiene NINGUNA
// regla propia -- hereda display:flex (direccion FILA) puro de Bootstrap .row.
// Un solo hijo en un flex row NO se estira a menos que declare su propio
// flex-grow/width:100% -- queda encogido a su ancho de contenido. Con contenido
// angosto (una card chica, un reporte con pocos resultados) el hueco vacio a la
// derecha es visible; con contenido ancho (una tabla larga, un grid de cards) no
// se nota porque el contenido igual necesita casi todo el ancho -- por eso el
// bug pasaba desapercibido en la mayoria de paginas. flex-direction:column hace
// que los hijos (breadcrumb, luego el body real) se apilen y ocupen el 100% del
// ancho por el align-items:stretch default del eje column, sin que cada pagina
// tenga que declararlo a mano.
.row.widget-grid {
    flex-direction: column;
}
// Footgun clasico de flexbox, mismo mecanismo que el fix de arriba pero en el eje
// cruzado: un item flex sin min-width:0 nunca se achica por debajo del ancho de SU
// CONTENIDO. El hijo directo de .row.widget-grid es la raiz de cada pagina (el <div>
// del template Vue, o el <div> envolvente agregado a las vistas Blade puras) -- si
// esa pagina tiene una tabla ancha, el hijo se niega a respetar los 1120px
// disponibles y el desborde se filtra hasta #main-content en vez de clippearse
// donde corresponde (.table-responsive, mas abajo). Repite un nivel mas adentro:
// .card es display:flex de Bootstrap (para estirar header/body/footer), asi que
// .card-body tiene el MISMO problema con cualquier tabla ancha adentro.
.row.widget-grid > * {
    min-width: 0;
    // align-items:stretch (default en flex-direction:column) deja de forzar el ancho
    // al 100% cuando el contenido es MUY ancho (ej. una tabla grande) -- min-width:0
    // solo saca el piso de "no encogerse menos que el contenido", pero no alcanza para
    // que el stretch implicito gane contra el contenido. width:100% explicito no deja
    // ambiguedad.
    width: 100%;
}
.card-body {
    min-width: 0;
}
// Mismo footgun, un tercer lugar: CUALQUIER .row > .col-* de Bootstrap (flex de
// fabrica) con una tabla ancha adentro -- patron reusado en las ~38 variantes de
// DataTable*.vue (ej. <div class="row"><div class="col-md-12 col-lg-12 col-xl-12">).
// Fix estandar y conocido para este problema puntual de Bootstrap+flex: min-width:0
// en los hijos .col-* directos de cualquier .row, no solo widget-grid. [class^="col-"]
// (con el guion) evita falsos positivos tipo .collapse/.color-primary.
.row > [class^="col-"] {
    min-width: 0;
}

// ── 6. Breadcrumbs ────────────────────────────────────────────────

.page-headers {
    padding: 10px 0 6px;

    .breadcrumbs {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        list-style: none;
        gap: 0;
        font-size: 12px;
        line-height: normal;

        .breadcrumb-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            align-self: center;
            flex-shrink: 0;
            white-space: nowrap;

            a {
                color: var(--mn-ink);
                display: inline-flex;
                align-items: center;
                gap: 4px;
                text-decoration: none;
                transition: color .15s;
                font-weight: 500;

                &:hover { color: var(--mn-primary-dk); }

                i[data-feather] { width: 14px; height: 14px; }
                svg { width: 14px; height: 14px; }
            }

            .text-primary {
                color: var(--mn-ink);
                font-weight: 600;
            }
        }

        // Separador robusto: cualquier crumb después del primero. NO depende de que el
        // item activo tenga .breadcrumb-item (varias vistas lo ponen solo como .active,
        // ej. /categories → antes salía "ProductosCategorías" sin "/").
        > * + *::before {
            content: '/';
            color: #dcdfe6;
            margin: 0 4px;
            font-size: 11px;
            float: none;
            padding-right: 0;
            flex-shrink: 0;
        }
    }
}

// ── 7. Badges y Labels ────────────────────────────────────────────

.badge {
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    letter-spacing: 0.2px;
}

.label {
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    display: inline-block;
}

// ── 8. Alertas ────────────────────────────────────────────────────

.alert {
    border-radius: 8px;
    border: none;
    font-size: 13px;
    padding: 12px 16px;

    &.alert-danger  { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }
    &.alert-success { background: #f0fdf4; color: #166534; border-left: 3px solid #22c55e; }
    &.alert-warning { background: #fffbeb; color: #92400e; border-left: 3px solid #f59e0b; }
    &.alert-info    { background: #f0fdfa; color: #134e4a; border-left: 3px solid #14b8a6; }
}

// ── 9. Separadores de sección ─────────────────────────────────────

hr {
    border-color: #ebeef5;
    margin: 16px 0;
}

// ── 10. Scroll personalizado ──────────────────────────────────────

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f4f6f9;
}

::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;

    &:hover { background: #c0c4cc; }
}

// ── 11. Transiciones suaves globales ──────────────────────────────
// .card/.btn/.el-button/.form-control/.el-input__inner ya tienen su propia
// transition mas especifica (arriba, secciones 1/varias) -- este catch-all los
// pisaba con "all .18s ease" generico, valores en conflicto silencioso segun
// orden de cascada. Solo queda .table tbody tr, que no tiene transition propia.

.table tbody tr {
    transition: all .18s ease;
}

// ── 12. Filter panel genérico (reutilizable en cualquier reporte) ──

.filter-panel {
    background: #f8fafc;
    border-bottom: 1px solid #ebeef5;
    padding: 16px 20px;

    .filter-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 12px;
    }

    .filter-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 160px;
        flex: 1;

        &--wide { flex: 2; min-width: 220px; }
        &--auto { flex: 0 0 auto; min-width: 140px; }
    }

    .filter-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--mn-ink);
        display: flex;
        align-items: center;
        gap: 4px;

        i { color: var(--mn-muted); font-size: 12px; }
    }

    .filter-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        border-top: 1px solid #ebeef5;
        padding-top: 12px;
    }

    .filter-export-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .filter-export-label {
        font-size: 12px;
        color: var(--mn-muted);
    }

    .filter-export-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 12px;
        border-radius: 6px;
        border: 1px solid transparent;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all .15s;

        // Antes rojo(pdf)/verde(excel) -- ambos pasan a la misma paleta oscura del
        // tema (teal --mn-primary-*), Exportar nunca debe leerse como accion de
        // peligro/exito (regla del proyecto: nunca danger/success en Exportar).
        &--pdf, &--excel { color: var(--mn-primary-dk); background: var(--mn-primary-lt); border-color: #b2dfdb; }
        &--pdf:hover, &--excel:hover { background: #b2dfdb; }
    }

    .filter-results-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #409EFF;
        background: #ecf5ff;
        border: 1px solid #b3d8ff;
        border-radius: 12px;
        padding: 3px 10px;
    }

    .filter-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        font-size: 12px;
        color: var(--mn-ink);
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        padding: 5px 12px;
        cursor: pointer;
        transition: all .15s;

        i { color: var(--mn-muted); }
        &:hover { border-color: var(--mn-primary-dk); color: var(--mn-primary-dk); }
    }
}

// ── 13. Empty state genérico ──────────────────────────────────────

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--mn-muted);

    .empty-state-icon {
        font-size: 52px;
        display: block;
        margin-bottom: 14px;
        color: #dcdfe6;
    }

    .empty-state-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--mn-ink);
        margin-bottom: 6px;
    }

    .empty-state-sub {
        font-size: 13px;
        color: var(--mn-hint);
        margin: 0;
        max-width: 360px;
        margin: 0 auto;
        line-height: 1.6;
    }
}

// Parche para empty states primitivos existentes (strong suelto)
.row > .col-md-12 > strong:only-child,
.row > div > strong:only-child {
    display: block;
    text-align: center;
    padding: 40px 24px;
    font-size: 14px;
    color: var(--mn-muted);
    font-weight: 500;
}

// ── 14. Reporte de Inventario (.inv-*) ────────────────────────────

.inv-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
}
.inv-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.inv-header-icon {
    font-size: 24px;
    color: var(--mn-primary-dk);
    background: var(--mn-primary-lt);
    border-radius: 10px;
    padding: 8px;
}
.inv-header-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--mn-ink);
}

.inv-table-section { border-top: 1px solid #f0f2f5; }
.inv-table { font-size: 13px; }
.inv-table thead th {
    background: #fafbfc;
    border-bottom: 2px solid #ebeef5 !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mn-ink);
    white-space: nowrap;
    vertical-align: middle;
    padding: 10px 8px;
}
.inv-table tbody td { vertical-align: middle; padding: 9px 8px; }
.inv-table tbody tr:last-child td { border-bottom: 0; }
.inv-table tfoot td { background: #fafbfc; }

.inv-th-idx  { width: 36px; }
.inv-th-name { min-width: 180px; max-width: 240px; }
.inv-th-num  { white-space: nowrap; min-width: 80px; }
.inv-th-info { font-size: 11px; color: var(--mn-hint); margin-left: 2px; }

.inv-td-idx  { color: var(--mn-hint); font-size: 11px; text-align: center; }
.inv-td-name { font-weight: 500; color: var(--mn-ink); max-width: 240px; }
.inv-name-text {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-td-muted { font-size: 12px; color: var(--mn-muted); }
.inv-td-mono  { font-family: monospace; font-size: 12px; color: var(--mn-ink); }
.inv-td-num   { font-size: 12px; color: var(--mn-ink); }
.inv-td-price { font-weight: 600; font-size: 12px; color: var(--mn-ink); }

.inv-stock-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    min-width: 44px;
    text-align: center;
}
.inv-stock-badge--ok   { background: #f0f9eb; color: #529b2e; border: 1px solid #b3e19d; }
.inv-stock-badge--low  { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.inv-stock-badge--zero { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; }
.inv-stock-badge--neg  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.inv-category-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #f4f4f5;
    color: var(--mn-ink);
    border: 1px solid #e9e9eb;
    white-space: nowrap;
}

.inv-due-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: monospace;
    background: #f0f9eb;
    color: #529b2e;
    border: 1px solid #b3e19d;
    white-space: nowrap;
}
.inv-due--soon    { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.inv-due--warn    { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.inv-due--expired { background: #fef2f2; color: #991b1b; border-color: #fecaca; text-decoration: line-through; }

.inv-warehouse-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #ecf5ff;
    color: #1a6fc4;
    border: 1px solid #b3d8ff;
    white-space: nowrap;
}

.inv-tfoot-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mn-muted);
    padding-left: 12px !important;
}
.inv-tfoot-val {
    font-weight: 700;
    font-size: 13px;
    color: var(--mn-ink);
}

.inv-divider {
    width: 1px;
    height: 20px;
    background: #dcdfe6;
    margin: 0 4px;
}

.inv-pagination {
    padding: 10px 16px;
    border-top: 1px solid #ebeef5;
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
}

// ── 15. Kardex de Inventario (.kx-*) ─────────────────────────────

.kx-th-idx     { width: 36px; }
.kx-th-product { min-width: 160px; }
.kx-th-date    { min-width: 90px; white-space: nowrap; }
.kx-th-wh      { min-width: 100px; }
.kx-th-type    { min-width: 150px; }
.kx-th-num     { min-width: 110px; white-space: nowrap; }
.kx-th-saldo   { min-width: 70px; white-space: nowrap; }
.kx-th-total   { min-width: 72px; white-space: nowrap; }
.kx-th-user    { min-width: 110px; }
.kx-th-actions { width: 36px; }
.kx-th-wh-bal  { min-width: 62px; white-space: nowrap; }

.kx-col-in  { color: #529b2e !important; }
.kx-col-out { color: #c0392b !important; }

.kx-idx     { color: var(--mn-hint); font-size: 11px; }
.kx-product { font-weight: 500; color: var(--mn-ink); max-width: 200px; }
.kx-mono    { font-family: monospace; font-size: 12px; }
.kx-num-cell { color: var(--mn-ink); }

.kx-datetime-cell { white-space: nowrap; }
.kx-date-main {
    font-size: 12px;
    color: var(--mn-ink);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.kx-time-sub {
    font-size: 11px;
    color: var(--mn-muted);
    font-family: monospace;
    margin-top: 1px;
}
.kx-docdate-sub {
    font-size: 10px;
    color: var(--mn-hint);
    margin-top: 2px;
}

.kx-wh-cell { white-space: nowrap; }
.kx-wh-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #ecf5ff;
    color: #1a6fc4;
    border: 1px solid #b3d8ff;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-type-td   { min-width: 150px; }
.kx-type-cell { display: flex; flex-direction: column; gap: 4px; }
.kx-type-row  { display: flex; align-items: center; gap: 6px; }

.kx-type-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 11px;
}
.kx-icon--in       { background: #f0f9eb; color: #529b2e; border: 1px solid #b3e19d; }
.kx-icon--out      { background: #fef0f0; color: #c0392b; border: 1px solid #fbc4c4; }
.kx-icon--transfer { background: #ecf5ff; color: #1a6fc4; border: 1px solid #b3d8ff; }
.kx-icon--cancel   { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; }
.kx-icon--return   { background: #fdf6ec; color: #b07400; border: 1px solid #f5dab1; }

.kx-type-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kx-type-badge--in       { background: #f0f9eb; color: #529b2e; border: 1px solid #b3e19d; }
.kx-type-badge--out      { background: #fef0f0; color: #c0392b; border: 1px solid #fbc4c4; }
.kx-type-badge--transfer { background: #ecf5ff; color: #1a6fc4; border: 1px solid #b3d8ff; }
.kx-type-badge--cancel   { background: #f4f4f5; color: #606266; border: 1px solid #e9e9eb; }
.kx-type-badge--return   { background: #fdf6ec; color: #b07400; border: 1px solid #f5dab1; }

.kx-transfer-route {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--mn-ink);
    flex-wrap: wrap;
    max-width: 240px;
}
.kx-transfer-warehouse {
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    color: var(--mn-ink);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kx-transfer-arrow { color: var(--mn-muted); font-size: 10px; flex-shrink: 0; }

.kx-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 3px 7px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    gap: 2px;
}
.kx-qty--in  { color: #529b2e; background: #f0f9eb; border: 1px solid #b3e19d; }
.kx-qty--out { color: #c0392b; background: #fef0f0; border: 1px solid #fbc4c4; }
.kx-qty-icon { font-size: 10px; }

.kx-wh-header-chip {
    display: inline-block;
    padding: 2px 6px;
    background: #ecf5ff;
    color: #1a6fc4;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: default;
}
.kx-wh-bal-cell { padding: 9px 8px; }
.kx-wh-bal {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mn-ink);
    min-width: 38px;
    text-align: right;
}
.kx-wh-bal--neg   { color: #c0392b; }
.kx-wh-bal--empty { color: #dcdfe6; font-size: 12px; }

.kx-balance     { font-weight: 700; font-size: 13px; color: var(--mn-ink); }
.kx-balance--neg { color: #c0392b; }

.kx-user-cell { min-width: 100px; }
.kx-user {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kx-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
    color: #1a6fc4;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid #b3d8ff;
}
.kx-user-name {
    font-size: 12px;
    color: var(--mn-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}
.kx-user-system {
    font-size: 11px;
    color: var(--mn-hint);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.kx-actions-cell { width: 36px; text-align: center; }
.kx-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid #fbc4c4;
    background: #fef0f0;
    color: #f56c6c;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s, border-color .15s;
    padding: 0;
}
.kx-pdf-btn:hover { background: #fde2e2; border-color: #f89898; }

.kx-row:hover td { background: #f5f9ff; }

.kx-totals-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #f8fafc;
    border-top: 2px solid #ebeef5;
    font-size: 13px;
}
.kx-totals-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--mn-ink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: auto;
}
.kx-totals-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
}
.kx-totals-item--in  { color: #529b2e; background: #f0f9eb; border: 1px solid #b3e19d; }
.kx-totals-item--out { color: #c0392b; background: #fef0f0; border: 1px solid #fbc4c4; }

// ── 16. DataTableKardex filter (.kx-filter-panel, .kx-filter-grid, .kx-filter-field) ──

.kx-filter-panel {
    background: #f8fafc;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.kx-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.kx-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    flex: 1;
}
.kx-filter-field--wide { flex: 2; min-width: 240px; }
.kx-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mn-ink);
    display: flex;
    align-items: center;
    gap: 4px;
}
.kx-label i { color: var(--mn-muted); }
.kx-optional { font-weight: 400; color: var(--mn-hint); font-size: 11px; }

.kx-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #ebeef5;
    padding-top: 12px;
}
.kx-warehouse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    color: var(--mn-ink);
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 999px;
    padding: 4px 10px;
}
.kx-warehouse-toggle i { color: var(--mn-muted); }
.kx-export-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kx-export-label { font-size: 12px; color: var(--mn-muted); }
.kx-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
// Antes rojo(pdf)/verde(excel) -- misma regla que .filter-export-btn: Exportar
// siempre oscuro/teal, nunca danger/success.
.kx-export-btn--pdf, .kx-export-btn--excel { color: var(--mn-primary-dk); background: var(--mn-primary-lt); border-color: #b2dfdb; }
.kx-export-btn--pdf:hover, .kx-export-btn--excel:hover { background: #b2dfdb; border-color: #80cbc4; }
.kx-results-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #409EFF;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 12px;
    padding: 3px 10px;
    margin-left: auto;
}

.kx-table-wrapper {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
}
.kx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kx-table thead tr th {
    background: #f5f7fa;
    color: var(--mn-ink);
    font-weight: 600;
    font-size: 12px;
    padding: 10px 12px;
    border-bottom: 2px solid #ebeef5;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.kx-table tbody tr td {
    padding: 9px 12px;
    border-bottom: 1px solid #f0f2f5;
    color: var(--mn-ink);
    vertical-align: middle;
}
.kx-table tbody tr:last-child td { border-bottom: none; }
.kx-table tbody tr:hover td { background: #f5f9ff; }
.kx-pagination {
    padding: 12px 16px;
    border-top: 1px solid #ebeef5;
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
}

.kx-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--mn-muted);
}
.kx-empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    color: #dcdfe6;
}
.kx-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mn-ink);
    margin-bottom: 4px;
}
.kx-empty-sub { font-size: 13px; color: var(--mn-hint); margin: 0; }

// ── 17. Physical Counts (.pc-*) ───────────────────────────────────

.pc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.pc-toolbar-left { display: flex; flex-direction: column; }
.pc-toolbar-title { font-weight: 700; font-size: 16px; color: var(--mn-ink); }
.pc-toolbar-sub { font-size: 12px; color: var(--mn-muted); }
.pc-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pc-refresh-bar {
    font-size: 12px;
    color: var(--mn-ink);
    padding: 6px 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    display: inline-block;
}

.pc-table { width: 100%; border-collapse: collapse; }
.pc-table thead tr { background: #f5f7fa; }
.pc-table thead th {
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mn-ink);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid #ebeef5;
}
.pc-row { cursor: pointer; transition: background .15s; }
.pc-row:hover { background: #f0f4ff; }
.pc-row td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }

.pc-badge-count {
    display: inline-block;
    min-width: 24px;
    padding: 2px 7px;
    background: #ecf5ff;
    color: #409eff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.pc-empty { padding: 36px; text-align: center; }
.pc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.pc-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
}
.pc-pill-draft     { background: #f0f2f5; color: #606266; }
.pc-pill-submitted { background: #fdf6ec; color: #e6a23c; border: 1px solid #f5dab1; }
.pc-pill-approved  { background: #f0f9eb; color: #67c23a; border: 1px solid #c2e7b0; }
.pc-pill-rejected  { background: #fef0f0; color: #f56c6c; border: 1px solid #fbc4c4; }
.pc-pill-cancelled { background: #f4f4f5; color: #909399; }

.pc-dialog-title { display: flex; align-items: center; font-size: 15px; font-weight: 600; }

.pc-meta-row { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #ebeef5; border-radius: 8px; overflow: hidden; }
.pc-meta-item { flex: 1; min-width: 160px; padding: 10px 16px; border-right: 1px solid #ebeef5; }
.pc-meta-item:last-child { border-right: none; }
.pc-meta-label { display: block; font-size: 11px; color: var(--mn-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.pc-meta-value { font-size: 13px; font-weight: 600; color: var(--mn-ink); }

.pc-summary-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* KPIs del conteo: mismos tamaños/colores que los KPIs del dashboard (tokens --df-*) */
.pc-summary-card {
    flex: 1;
    min-width: 80px;
    background: #fff;
    border: 1px solid var(--df-line);
    border-radius: 12px;
    padding: 12px 16px;
}
.pc-summary-num { font-size: 23px; font-weight: 700; color: var(--df-ink); line-height: 1; letter-spacing: -0.5px; }
.pc-summary-lbl { font-size: 12px; font-weight: 500; color: var(--df-muted); margin-top: 4px; }
.pc-summary-ok,
.pc-summary-plus   { background: color-mix(in srgb, var(--df-ok) 10%, #fff); border-color: var(--df-ok); }
.pc-summary-ok .pc-summary-num,
.pc-summary-plus .pc-summary-num { color: var(--df-ok); }
.pc-summary-diff   { background: var(--df-warn-soft); border-color: var(--df-warn); }
.pc-summary-diff .pc-summary-num { color: var(--df-warn); }
.pc-summary-danger,
.pc-summary-minus  { background: var(--df-crit-soft); border-color: var(--df-crit); }
.pc-summary-danger .pc-summary-num,
.pc-summary-minus .pc-summary-num { color: var(--df-crit); }

.pc-add-trigger { display: flex; align-items: center; }
.pc-add-modal-search { padding: 0 0 12px 0; border-bottom: 1px solid #ebeef5; margin-bottom: 0; }
.pc-add-modal-hint { margin-top: 6px; font-size: 11px; color: var(--mn-muted); }
.pc-add-modal-counter { color: #67c23a; font-weight: 600; }
.pc-add-modal-body { min-height: 220px; max-height: 52vh; overflow-y: auto; }
.pc-add-modal-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--mn-muted);
}
.pc-add-results-header { padding: 8px 0 6px 0; }
.pc-add-result-list { display: flex; flex-direction: column; gap: 0; }
.pc-add-result-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}
.pc-add-result-row:last-child { border-bottom: none; }
.pc-add-result-row:hover { background: #f8faff; border-radius: 6px; }
.pc-add-result-info { flex: 1; min-width: 0; padding-top: 4px; }
.pc-add-result-stock { text-align: center; flex-shrink: 0; padding-top: 4px; }
.pc-stock-label { font-size: 10px; color: var(--mn-muted); text-transform: uppercase; }
.pc-stock-val { font-size: 15px; font-weight: 700; color: var(--mn-ink); }
.pc-add-result-select { flex-shrink: 0; width: 160px; }
.pc-add-result-qty { flex-shrink: 0; }
.pc-add-select-label { font-size: 10px; color: var(--mn-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }

.pc-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.pc-lines-table-wrap { max-height: 52vh; overflow-y: auto; border: 1px solid #ebeef5; border-radius: 8px; }
.pc-lines-table { width: 100%; border-collapse: collapse; }
.pc-lines-table thead tr { background: #f5f7fa; position: sticky; top: 0; z-index: 1; }
.pc-lines-table thead th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mn-ink);
    text-transform: uppercase;
    border-bottom: 1px solid #ebeef5;
}
.pc-lines-table tbody tr td {
    padding: 10px 12px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.pc-lines-table tbody tr:last-child td { border-bottom: none; }
.pc-line-danger { background: #fff8f8; }
.pc-line-diff   { background: #fffef0; }

.pc-product-name { font-weight: 600; color: var(--mn-ink); font-size: 13px; }
.pc-product-sub  { font-size: 11px; color: var(--mn-muted); }
.pc-lot-warn     { font-size: 11px; color: #f56c6c; }
.pc-qty-cell     { font-weight: 600; font-size: 14px; }

.pc-diff-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.pc-diff-ok    { background: #f0f9eb; color: #67c23a; }
.pc-diff-plus  { background: #f0f9eb; color: #67c23a; }
.pc-diff-minus { background: #fef0f0; color: #f56c6c; }

.pc-match-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    background: #ecf5ff;
    color: #409eff;
    border-radius: 8px;
    margin-top: 2px;
}

.pc-event-card { border: 1px solid #ebeef5; border-radius: 8px; overflow: hidden; }
.pc-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
}
.pc-event-source { font-size: 12px; font-weight: 600; color: var(--mn-primary); }
.pc-event-date   { font-size: 11px; color: var(--mn-muted); }
.pc-event-body   { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 12px; font-size: 13px; }

.pc-edit-product { background: #f5f7fa; border-radius: 6px; padding: 10px 14px; }
.pc-label { font-size: 13px; font-weight: 600; color: var(--mn-ink); margin-bottom: 6px; display: block; }

.pc-action-cell { text-align: center; white-space: nowrap; }
.pc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0;
}
.pc-action-btn + .pc-action-btn { margin-left: 4px; }
.pc-action-edit { color: #E6A23C; }
.pc-action-edit:hover { background: #fdf6ec; border-color: #f5dab1; }
.pc-action-del  { color: #F56C6C; }
.pc-action-del:hover  { background: #fef0f0; border-color: #fbc4c4; }

.pc-count-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.pc-count-btn--info    { color: #409EFF; background: #ecf5ff; border-color: #b3d8ff; }
.pc-count-btn--info:hover { background: #d9ecff; border-color: #79bbff; }
.pc-count-btn--warning { color: #E6A23C; background: #fdf6ec; border-color: #f5dab1; }
.pc-count-btn--warning:hover { background: #faecd8; border-color: #f0c78a; }
.pc-count-btn--disabled { color: #C0C4CC; background: #f4f4f5; border-color: #e9e9eb; cursor: not-allowed; }

.pc-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

// ── 18. Kardex Master (.kx-mode-bar, .kx-context-banner) ──

.kx-mode-bar {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #ebeef5;
    background: #fafafa;
    padding: 12px 20px;
    flex-wrap: wrap;
}
.kx-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    background: #fff;
    cursor: pointer;
    transition: all .18s;
    min-width: 140px;
    text-align: left;
}
.kx-mode-btn:hover { border-color: #409EFF; background: #ecf5ff; }
.kx-mode-btn--active {
    border-color: #409EFF;
    background: #ecf5ff;
    box-shadow: 0 0 0 2px rgba(64,158,255,.15);
}
.kx-mode-icon {
    font-size: 18px;
    color: var(--mn-muted);
    margin-bottom: 2px;
    transition: color .18s;
}
.kx-mode-btn--active .kx-mode-icon,
.kx-mode-btn:hover .kx-mode-icon { color: var(--mn-primary); }
.kx-mode-label { font-size: 13px; font-weight: 600; color: var(--mn-ink); }
.kx-mode-btn--active .kx-mode-label { color: #1a6fc4; }
.kx-mode-desc { font-size: 11px; color: var(--mn-muted); }

.kx-context-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 20px;
    font-size: 12px;
    color: var(--mn-ink);
    background: #f0f9ff;
    border-bottom: 1px solid #bae6fd;
}
.kx-context-banner--lots   { background: #f0fdf4; border-bottom-color: #86efac; color: #166534; }
.kx-context-banner--series { background: #fdf4ff; border-bottom-color: #e9d5ff; color: #581c87; }
.kx-context-banner--psico  { background: #fffbeb; border-bottom-color: #fcd34d; color: #92400e; }
.kx-context-banner i { margin-top: 1px; flex-shrink: 0; }

.kx-content { padding: 20px; }

// ── 19. Kardex Lots (.kxl-*) ─────────────────────────────────────

.kxl-idx  { color: var(--mn-hint); font-size: 11px; width: 36px; }
.kxl-code { font-family: monospace; font-size: 12px; color: var(--mn-ink); }
.kxl-name { font-weight: 500; color: var(--mn-ink); }
.kxl-und  { font-size: 12px; color: var(--mn-muted); }

.kxl-stock {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
}
.kxl-stock--ok   { color: #67c23a; background: #f0f9eb; border: 1px solid #c2e7b0; }
.kxl-stock--low  { color: #e6a23c; background: #fdf6ec; border: 1px solid #f5dab1; }
.kxl-stock--zero { color: #f56c6c; background: #fef0f0; border: 1px solid #fbc4c4; }

.kxl-lot-code {
    display: inline-block;
    font-family: monospace;
    font-size: 12px;
    background: #f4f4f5;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--mn-ink);
    letter-spacing: 0.5px;
}

.kxl-due {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.kxl-due--ok       { color: #67c23a; background: #f0f9eb; }
.kxl-due--warn     { color: #b88230; background: #fdf6ec; }
.kxl-due--critical { color: #e6a23c; background: #fdf6ec; }
.kxl-due--expired  { color: #f56c6c; background: #fef0f0; }
.kxl-due--na       { color: #909399; } // era #c0c4cc (~1.7:1, ilegible) -- es un estado real ("sin dato"), no decorativo

.kxl-days {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.kxl-days--ok       { color: #67c23a; background: #f0f9eb; border: 1px solid #c2e7b0; }
.kxl-days--warn     { color: #b88230; background: #fdf6ec; border: 1px solid #f5dab1; }
.kxl-days--critical { color: #e6a23c; background: #fdf6ec; border: 1px solid #f5dab1; }
.kxl-days--expired  { color: #f56c6c; background: #fef0f0; border: 1px solid #fbc4c4; }
.kxl-days--na       { color: #909399; background: #f4f4f5; border: 1px solid #e9e9eb; } // era #c0c4cc (~1.7:1)

.kxl-row:hover td { background: #f5f9ff; }

// ── 20. Kardex Series (.kxs-*) ───────────────────────────────────

.kxs-idx  { color: var(--mn-hint); font-size: 11px; width: 36px; }
.kxs-code { font-family: monospace; font-size: 12px; color: var(--mn-ink); }
.kxs-name { font-weight: 500; color: var(--mn-ink); }
.kxs-und  { font-size: 12px; color: var(--mn-muted); }
.kxs-date { font-size: 12px; color: var(--mn-ink); }

.kxs-series-badge {
    display: inline-block;
    font-family: monospace;
    font-size: 12px;
    background: #f0f4ff;
    border: 1px solid #c5d8ff;
    border-radius: 4px;
    padding: 2px 10px;
    color: #3050b8;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.kxs-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.kxs-status--available { color: #67c23a; background: #f0f9eb; border: 1px solid #c2e7b0; }
.kxs-status--sold      { color: #909399; background: #f4f4f5; border: 1px solid #e9e9eb; }
.kxs-status--returned  { color: #409EFF; background: #ecf5ff; border: 1px solid #b3d8ff; }
.kxs-status--default   { color: #e6a23c; background: #fdf6ec; border: 1px solid #f5dab1; }
.kxs-status--unknown   { color: #909399; background: #f4f4f5; border: 1px solid #e9e9eb; } // era #c0c4cc (~1.7:1)

.kxs-row:hover td { background: #f5f9ff; }

// ── 21. Lots Table (.lots-filter-label, .lots-warehouse-badge) ───

.lots-filter-label {
    white-space: nowrap;
    font-size: 13px;
    color: var(--mn-ink);
    margin-right: 8px;
}

// .lots-warehouse-badge vivia aca duplicado (con border-radius/padding distintos) --
// la version vigente esta en la seccion "41.2 Filas" mas abajo, junto a .lots-row.

// ── 22. Global utility helpers ────────────────────────────────────

.anulate_color { color: #c0392b !important; }

.row-expired    td { background: rgba(245, 108, 108, .06) !important; }
.row-this-week  td { background: rgba(230, 162, 60, .06) !important; }
.row-this-month td { background: rgba(230, 162, 60, .03) !important; }
.row-negative   td { background: rgba(245, 108, 108, .04) !important; }
.row-zero       td { background: rgba(230, 162, 60, .04) !important; }

.border-left-success { border-left: 3px solid #67c23a; }
.border-left-warning { border-left: 3px solid #e6a23c; }

// Grupo de botones de acción en toolbars (ej. "Exportar" + "Nuevo X" en headers
// de listado). El build de Bootstrap de este admin NO trae las utilities gap-*
// (probado: .gap-2/.gap-3 no existen en ningún stylesheet cargado), así que estas
// mezclas de <button> plano + <el-button> quedaban sin separación definida salvo
// parches ad-hoc con ms-2/ms-3 por pantalla. Única fuente de verdad para este patrón.
.mn-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

// ── 23. Inventory Forms (.im-*) ──────────────────────────────────

.im-info-bar {
    display: flex;
    gap: 12px;
    background: #F0FAF8;
    border: 1px solid #B2DFDB;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    align-items: center;
}
.im-info-product { flex: 1; }
.im-info-stock { text-align: center; min-width: 90px; padding: 4px 12px; border-radius: 5px; }
.im-info-label { display: block; font-size: 10px; color: #78909C; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.im-info-value { font-size: 12px; font-weight: 600; color: #263238; }
.im-info-qty { display: block; font-size: 22px; font-weight: 700; }
.im-stock-ok       { background: #E8F5E9; color: #2E7D32; }
.im-stock-zero     { background: #FFF8E1; color: #F57C00; }
.im-stock-negative { background: #FFEBEE; color: #C62828; }

.im-type-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    border-radius: 5px;
    margin-bottom: 14px;
}
.im-type-input  { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.im-type-output { background: #FFF3E0; color: #E65100; border: 1px solid #FFE0B2; }
.im-type-adjust { background: #FFF8E1; color: #B7791F; border: 1px solid #FFECB3; }

.im-alert { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.im-alert-danger { background: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2; }

.im-form-body { display: flex; flex-direction: column; gap: 10px; }
.im-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.im-field { display: flex; flex-direction: column; }
.im-field-grow { flex: 1; }
.im-label { font-size: 11px; color: #607D8B; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.im-error { color: #E53935; font-size: 11px; margin-top: 2px; }

.im-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-radius: 5px;
    padding: 8px 12px;
    margin-top: -4px;
}
.im-summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.im-summary-calc  { font-size: 13px; font-weight: 600; }
.presentation-summary--input  { background: #F0FAF8; border: 1px solid #B2DFDB; color: #00695C; }
.presentation-summary--output { background: #FFF8F2; border: 1px solid #FFCCBC; color: #BF360C; }

// Tabla de presentaciones (tab Presentaciones del producto): las celdas tienen
// alturas distintas — la de "Equivale a" trae el hint "unidades base" debajo, y la de
// cód. barra no lleva wrapper .mb-3 como las demás. Con vertical-align:middle (default
// de .table) los inputs quedan a distinta altura (desalineados). Alineamos arriba: así
// todos los inputs quedan a la misma línea y "unidades base" cuelga debajo sin desfasar.
.presentation-table td { vertical-align: top !important; }

.im-lot-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.im-lot-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #00695C;
    background: #E0F2F1;
    border: 1px solid #B2DFDB;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.im-lot-btn:hover { background: #00897B; color: #fff; border-color: #00897B; }

// ── 24. Transfer Form (.tf-*) ─────────────────────────────────────

.tf-section {
    background: #fff;
    border: 1px solid #e8f5e9;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 14px;
}
.tf-section-table { padding: 14px 20px 4px; }
.tf-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #00897B;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tf-route-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tf-route-warehouse { flex: 1; min-width: 180px; }
.tf-route-arrow { display: flex; align-items: center; padding-top: 28px; flex-shrink: 0; }
.tf-route-arrow svg { width: 56px; height: 16px; }
.tf-route-motivo { flex: 1.2; min-width: 200px; }

.tf-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #546e7a;
    margin-bottom: 5px;
}
.tf-optional { font-weight: 400; color: #90a4ae; font-size: 11px; }
.tf-icon { width: 13px; height: 13px; color: #00897B; }
.tf-info { color: #90a4ae; font-size: 12px; }
.tf-select { width: 100%; }

.tf-product-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.tf-product-search { flex: 1; }
.tf-product-actions { display: flex; gap: 8px; padding-bottom: 2px; flex-shrink: 0; }
.tf-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #e0f2f1;
    color: #00897B;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.tf-action-link:hover { background: #b2dfdb; color: #00695c; text-decoration: none; }
.tf-barcode-check { font-size: 12px; color: #78909c; margin-bottom: 10px; }

.tf-add-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px dashed #e0f2f1;
    margin-top: 4px;
}
.tf-field { display: flex; flex-direction: column; }
.tf-field-qty { min-width: 110px; }
.tf-field-btn { min-width: 120px; padding-bottom: 0; }

.tf-stock-badges { display: flex; gap: 8px; flex-direction: column; justify-content: flex-end; padding-bottom: 2px; }
.tf-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
}
.tf-stock-badge svg { width: 12px; height: 12px; }
.tf-stock-origin { background: #e0f2f1; color: #00695c; }
.tf-stock-dest   { background: #e3f2fd; color: #1565c0; }
.tf-stock-badge strong { font-weight: 700; }

.tf-empty-hint { color: #b0bec5; font-size: 13px; text-align: center; padding: 12px 0 4px; }

.tf-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #78909c;
    border-top: none;
    border-bottom: 2px solid #e0f2f1;
    padding: 8px 10px;
}
.tf-table tbody tr { transition: background .12s; }
.tf-table tbody tr:hover { background: #f9fffe; }
.tf-table tbody td { padding: 8px 10px; vertical-align: middle; font-size: 13px; }
.tf-td-num { color: #90a4ae; font-weight: 600; }
.tf-pres-badge {
    display: inline-block;
    background: #f1f8e9;
    color: #558b2f;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
}
.tf-btn-del {
    border: 1px solid #ef9a9a;
    color: #e53935;
    background: transparent;
    border-radius: 4px;
    padding: 3px 8px;
    transition: all .15s;
}
.tf-btn-del:hover { background: #ffebee; border-color: #e53935; }

.tf-count-badge {
    background: #00897B;
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
}
.tf-card-header { border-bottom: 2px solid #e0f2f1; }

// ── 25. Payment links (.img-yape) ─────────────────────────────────

.img-yape { width: 90%; }

// ── 26. System Clients (.clients-list-*) ─────────────────────────

.clients-list-body { overflow-x: auto; }
.clients-list-scroll {
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.clients-list-table {
    width: max-content;
    min-width: 100%;
}
.clients-list-table th,
.clients-list-table td { white-space: nowrap; }
.clients-list-table .btn.dropdown-toggle { color: #212529 !important; }
.clients-list-table .btn.dropdown-toggle .fa { color: inherit !important; }

// ── 27. Cash / misc generic helpers ──────────────────────────────

.text-red   { color: red; }
.text-green { color: green; }

.fs-title       { font-size: 15px; }
.fs-description { font-size: 13px; }

.disable_color td { color: var(--bs-danger); }

// ── 28. Configurations (.el-carousel__item, .logo-preview-*) ──

/* Accesos rapidos del header bajo Porto: mismo componente Vue que Cuba
   (tenant-dialog-header-menu), asi que NO se toca su markup ni su color
   base (.btn-primary solido) -- Cuba lo sigue viendo igual que siempre.
   Se repinta solo bajo el ancestro html.sidebar-light (exclusivo de Porto)
   al estilo pill blanco/outline de pro9, en vez del cuadrado solido. */
/* !important necesario: brand-overrides.css fuerza .btn-primary con
   !important (para que Cuba use nuestro teal en vez de su morado default),
   y esa regla no diferencia Cuba/Porto -- hay que ganarle explicitamente. */
html.sidebar-light .quick-menu-actions .btn.quick-menu-link,
html.sidebar-light .quick-menu-actions .btn.quick-menu-edit {
  background-color: transparent !important;
  border: 1px solid var(--mn-border) !important;
  color: var(--mn-ink) !important;
}
html.sidebar-light .quick-menu-actions .btn.quick-menu-link:hover,
html.sidebar-light .quick-menu-actions .btn.quick-menu-edit:hover,
html.sidebar-light .quick-menu-actions .btn.quick-menu-link:focus,
html.sidebar-light .quick-menu-actions .btn.quick-menu-edit:focus {
  background-color: var(--mn-bg) !important;
  border-color: var(--mn-primary) !important;
  color: var(--mn-primary-dk) !important;
}

/* === Header Porto: badge SUNAT en pill de 2 lineas (patron pro9), con
   nuestros propios colores por entorno en vez de su azul unico. === */
.mn-sunat-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  padding: 5px 14px;
  border-radius: 8px;
  margin-right: 12px;
  text-decoration: none;
}
.mn-sunat-badge__l1 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mn-sunat-badge__l2 {
  font-size: 11px;
  opacity: .85;
}
.mn-sunat-badge--prod {
  background-color: var(--mn-primary);
  color: #fff;
}
.mn-sunat-badge--prod:hover { color: #fff; background-color: var(--mn-primary-dk); }
.mn-sunat-badge--internal {
  background-color: #0d6efd;
  color: #fff;
}
.mn-sunat-badge--internal:hover { color: #fff; opacity: .9; }
.mn-sunat-badge--demo {
  background-color: var(--mn-bg);
  border: 1px solid var(--mn-border);
  color: var(--mn-muted);
}
.mn-sunat-badge--demo:hover { color: var(--mn-ink); background-color: #fff; }

.el-carousel__item:nth-child(2n)   { background-color: #99a9bf; }
.el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }

.logo-preview-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    min-height: 88px;
    padding: 10px 14px;
    border: 1px solid #d9e2e7;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.logo-preview-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    object-position: center;
}

// ── 29. Items (.pricing-*, .lots-banner-*, .audit-header) ────────

.pricing-status-bar {
    background: #f8fafc;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    padding: 10px 14px;
}
.pricing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    background: #909399;
}
.pricing-dot--success { background: #67c23a; }
.pricing-dot--warning { background: #e6a23c; }
.pricing-dot--info    { background: #909399; }

// branch-pricing: grilla "todas las sucursales" (Sucursal × presentación × precios)
.branch-grid table { font-size: 13px; }
.branch-grid__name { background: #f8fafc; white-space: nowrap; min-width: 130px; }
.branch-grid__row-start > td { border-top: 2px solid #dfe4ee; }
.branch-grid__row-off td { color: #a8abb2; }   // sucursal no activa: fila atenuada
.branch-grid__principal > td { background: #f3f6fb; }   // fila Principal: referencia (read-only)
.branch-grid__base { font-weight: 600; color: #475569; }
.branch-grid .el-input { max-width: 150px; }
// celda con precio propio (override) vs heredado
.branch-grid .el-input.branch-own .el-input__wrapper {
    background: #f0f9eb;
    box-shadow: inset 0 0 0 1px #b3e19d;
}
// chip estado por sucursal: ¿el producto ya está aquí?
.branch-chip {
    width: fit-content;
    margin-top: 4px;
    padding: 1px 9px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 500;
}
.branch-chip--in  { background: #e1f3d8; color: #529b2e; }   // verde: ya está
.branch-chip--out { background: #f0f0f0; color: #909399; }   // gris: no está aún

// Modal de cupón: secciones + unidad + vista previa
.coupon-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mn-muted);
    margin: 4px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebeef5;
}
.coupon-unit { color: var(--mn-primary, #18a999); font-weight: 700; }
.coupon-preview {
    margin-top: 6px;
    background: #f3f6fb;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
}
.coupon-preview__label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mn-muted);
    margin-right: 6px;
}
.coupon-preview__text b { color: var(--mn-ink); }

.lots-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.lots-banner__icon { font-size: 16px; flex-shrink: 0; }
.lots-banner__content { flex: 1; min-width: 0; }
.lots-banner__content small { color: #909399; margin-left: 2px; }
.lots-banner--info {
    background: #f4f4f5;
    color: #909399;
    border-left: 3px solid #909399;
}
.lots-banner--info .lots-banner__icon { color: #909399; }

// .lot-chip/-sep/-link (preview de lotes vigentes, items/form.vue): familia
// entera sin ninguna regla en todo el repo -- .lot-chip-link quedaba con el
// azul/subrayado default del navegador (no el teal de link del resto de la
// app), .lot-chip era texto corrido sin distinguirse del resto del banner.
.lot-chip { font-weight: 600; color: var(--mn-ink); background: #fff; border: 1px solid #dcdfe6; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.lot-chip-sep { color: var(--mn-hint); }
.lot-chip-link { color: var(--mn-primary-dk); font-weight: 600; text-decoration: none; }
.lot-chip-link:hover { text-decoration: underline; }

.audit-header { align-items: center; display: flex; gap: 12px; margin-bottom: 12px; }

// ── 30. Lots Group dialog (.lg-*) ─────────────────────────────────

.lg-dialog .el-dialog__header { padding-bottom: 12px; border-bottom: 2px solid #00897B; }

.lg-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F0FAF8;
    border: 1px solid #B2DFDB;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 14px;
}
.lg-stat { text-align: center; min-width: 80px; }
.lg-stat-label { display: block; font-size: 11px; color: #78909C; text-transform: uppercase; letter-spacing: 0.5px; }
.lg-stat-value { display: block; font-size: 20px; font-weight: 700; color: #00695C; }
.lg-stat-danger { color: #C62828 !important; }
.lg-stat-ok     { color: #2E7D32 !important; }
.lg-progress-wrap { flex: 1; }
.lg-progress-bar { height: 6px; background: #CFD8DC; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.lg-progress-fill { height: 100%; border-radius: 3px; background: #B0BEC5; transition: width 0.3s ease; }
.lg-progress-fill.lg-progress-partial { background: #00897B; }
.lg-progress-fill.lg-progress-ok      { background: #2E7D32; }
.lg-progress-label { font-size: 11px; color: #90A4AE; text-align: center; display: block; }

// Toolbar (buscador + check todos)
.lg-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.lg-search { max-width: 280px; }
.lg-check-all { margin-left: auto; white-space: nowrap; }

// Lista de lotes — grid de 4 columnas (faltaba todo este bloque)
.lg-list {
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    overflow: hidden;
}
.lg-list-header,
.lg-lot-row {
    display: grid;
    grid-template-columns: 165px 1fr 90px 130px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
}
.lg-list-header {
    background: #F0FAF8;
    border-bottom: 1px solid var(--mn-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mn-muted);
}
.lg-lot-row {
    border-bottom: 1px solid #F0F2F5;
    transition: background 0.15s;
    &:last-child { border-bottom: none; }
    &:hover { background: #F8FBFA; }
}
.lg-lot-active,
.lg-lot-active:hover { background: var(--mn-primary-lt); }

.lg-col-qty,
.lg-col-due { display: flex; align-items: center; gap: 6px; }

// Control comprometer (input-number + botón asignar todo)
.lg-commit-ctrl { display: flex; align-items: center; gap: 6px; }
.lg-commit-ctrl .el-input-number { width: 116px; }
.lg-fill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--mn-border);
    border-radius: 6px;
    background: #fff;
    color: var(--mn-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    &:hover { background: var(--mn-primary-lt); border-color: var(--mn-primary); }
}
.lg-over .el-input-number__inner { color: var(--mn-danger); }

// Código (badge monospace)
.lg-code-badge {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--mn-ink);
}
.lg-total-qty { color: var(--mn-hint); font-size: 11px; }

// Badge de vencimiento — semántico (expired/critical/warn/ok)
.lg-due-badge {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 12px;
    white-space: nowrap;
    background: #ECEFF1;
    color: var(--mn-muted);
}
.lg-due-expired  { background: #FDECEC; color: #C62828; }
.lg-due-critical { background: #FFE0B2; color: #E65100; }
.lg-due-warn     { background: #FFF8E1; color: #F57F17; }
.lg-due-ok       { background: #E8F5E9; color: #2E7D32; }
.lg-sort-btn { color: var(--mn-muted); margin-left: 4px; }

.lg-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--mn-hint);
    font-size: 13px;
}

// ── 31. Avatar Uploader (.avatar-uploader, .avatar-uploader-icon) ──

.avatar-uploader .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 200ms ease;

    &:hover {
        border-color: var(--mn-primary-dk);
    }
}

// EP2 renderiza <el-icon> como <i class="el-icon …">. Su regla `.el-icon{width:1em}`
// (0,1,0) empata con `.avatar-uploader-icon` y, como EP2 carga DESPUÉS, ganaba EP2 →
// icono de 14px y caja encogida a 16px (el "+" diminuto). Calificamos con `.el-icon`
// (0,2,0) para ganar la cascada y recuperar la caja 120×120 con el "+" grande.
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    display: block;
}

// ── 32. Promotions (.promotion-scope-summary) ─────────────────────

.promotion-scope-summary {
    border: 1px solid #d7e6f6;
    border-left: 4px solid #409eff;
    border-radius: 4px;
    background: #f6fbff;
    color: #334155;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 10px 12px;
}
.promotion-scope-summary.is-muted {
    border-color: #e4e7ed;
    border-left-color: #c0c4cc;
    background: #fafafa;
    color: #606266;
}

// ----------------------------------------------------------------
// 32. Bootstrap 4/5 compatibility bridge
// ----------------------------------------------------------------
// Temporary layer for the Bootstrap 5 migration. It lets new BS5
// utilities work under BS4 and keeps common BS4 utilities alive once
// the dependency is upgraded. Remove only after all templates migrate.

.form-group { margin-bottom: 1rem; }

.btn-block {
    display: block;
    width: 100%;
}

.badge-pill {
    border-radius: 50rem;
}

// "primary" = color de marca en TODO el resto del sistema (.btn-primary, .el-button--primary,
// .el-tag, links) -- bg-primary/badge-primary habian quedado con el azul crudo de Bootstrap,
// nunca puenteados, mientras bg-info SI quedo en marca (al reves). Se ve roto en pastillas de
// estado de Clinica (ej. "En consulta") que combinan primary+info+success en la misma fila:
// solo la de primary desentonaba en azul contra el resto en teal.
.badge-primary,
.bg-primary { background-color: var(--mn-primary) !important; color: #fff; }
.badge-secondary,
.bg-secondary { background-color: #6c757d !important; color: #fff; }
.badge-success,
.bg-success { background-color: #28a745 !important; color: #fff; }
.badge-danger,
.bg-danger { background-color: #dc3545 !important; color: #fff; }
.badge-warning,
.bg-warning { background-color: #ffc107 !important; color: #212529; }
// bg-warning + text-white (Documentos/Notas de venta/Contingencias/Liquidaciones: badge de
// estado dinamico con `text-white` fijo) -- .text-white trae su propio !important y le gana
// al color:#212529 de arriba porque este no lo tiene. 2 clases + !important le gana a
// .text-white (1 clase + !important) sin depender de orden. ~1.6:1, ilegible sin esto.
.bg-warning.text-white { color: #212529 !important; }
.badge-info,
.bg-info { background-color: #17a2b8 !important; color: #fff; }
.badge-light,
.bg-light { background-color: #f8f9fa !important; color: #212529; }
.badge-dark,
.bg-dark { background-color: #343a40 !important; color: #fff; }

.ml-0, .ms-0 { margin-left: 0 !important; }
.ml-1, .ms-1 { margin-left: .25rem !important; }
.ml-2, .ms-2 { margin-left: .5rem !important; }
.ml-3, .ms-3 { margin-left: 1rem !important; }
.ml-4, .ms-4 { margin-left: 1.5rem !important; }
.ml-5, .ms-5 { margin-left: 3rem !important; }
.ml-auto, .ms-auto { margin-left: auto !important; }

.mr-0, .me-0 { margin-right: 0 !important; }
.mr-1, .me-1 { margin-right: .25rem !important; }
.mr-2, .me-2 { margin-right: .5rem !important; }
.mr-3, .me-3 { margin-right: 1rem !important; }
.mr-4, .me-4 { margin-right: 1.5rem !important; }
.mr-5, .me-5 { margin-right: 3rem !important; }
.mr-auto, .me-auto { margin-right: auto !important; }

.pl-0, .ps-0 { padding-left: 0 !important; }
.pl-1, .ps-1 { padding-left: .25rem !important; }
.pl-2, .ps-2 { padding-left: .5rem !important; }
.pl-3, .ps-3 { padding-left: 1rem !important; }
.pl-4, .ps-4 { padding-left: 1.5rem !important; }
.pl-5, .ps-5 { padding-left: 3rem !important; }

.pr-0, .pe-0 { padding-right: 0 !important; }
.pr-1, .pe-1 { padding-right: .25rem !important; }
.pr-2, .pe-2 { padding-right: .5rem !important; }
.pr-3, .pe-3 { padding-right: 1rem !important; }
.pr-4, .pe-4 { padding-right: 1.5rem !important; }
.pr-5, .pe-5 { padding-right: 3rem !important; }

.text-left, .text-start { text-align: left !important; }
.text-right, .text-end { text-align: right !important; }

.float-left, .float-start { float: left !important; }
.float-right, .float-end { float: right !important; }

.font-weight-light, .fw-light { font-weight: 300 !important; }
.font-weight-normal, .fw-normal { font-weight: 400 !important; }
.font-weight-bold, .fw-bold { font-weight: 700 !important; }
.font-italic, .fst-italic { font-style: italic !important; }
.font-style-normal, .fst-normal { font-style: normal !important; }

.border-left, .border-start { border-left: 1px solid #dee2e6 !important; }
.border-right, .border-end { border-right: 1px solid #dee2e6 !important; }
.rounded-left,
.rounded-start {
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}
.rounded-right,
.rounded-end {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.input-group-prepend,
.input-group-append {
    display: flex;
}
.input-group-prepend .btn,
.input-group-append .btn,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    position: relative;
    z-index: 2;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}
.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}
.custom-select,
.form-select {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

// Removed in BS5 — keep available for legacy markup
.text-justify { text-align: justify !important; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1 1 auto; }

// ── 33. MedNav B — Sistema de tokens canónico ────────────────────────────────
// Fuente de verdad única. --mn-* para código nuevo, --df-* aliases para
// componentes legacy del dashboard. --theme-default sincroniza con Cuba.
:root {
    /* ── Estructura ────────────────────────────────────────────── */
    --mn-sidebar:    #17181A;   /* near-black neutro */
    --mn-bg:         #F4F8FA;
    --mn-surface:    #FFFFFF;
    --mn-border:     #E3EAEE;

    /* ── Primario Teal — identidad de marca (logo) ─────────────── */
    --mn-primary:    #009688;   /* teal-500 — fills, borders */
    --mn-primary-dk: #00796B;   /* teal-700 — hover + texto-link (AA ✓) */
    --mn-primary-lt: #E0F2F1;   /* teal-50  — fondos soft */
    --mn-accent-dk:  #4DB6AC;   /* menta    — activo/iconos sobre sidebar oscuro */
    --mn-active:     #4DB6AC;   /* pill activo: fondo */
    --mn-on-active:  #04342C;   /* pill activo: texto/icono sobre fondo */

    /* ── Semánticos ────────────────────────────────────────────── */
    --mn-success:    #059669;   /* emerald-600 (AA ✓) */
    --mn-warning:    #D97706;   /* amber-600 — FEFO, stock bajo */
    --mn-danger:     #DC2626;   /* red-600   — vencidos, error crítico */
    --mn-data:       #0D47A1;   /* blue-900  — solo charts/analytics */
    --mn-incentive:  #7C3AED;   /* violet-600 — producto con comisión (POS), distinto de danger/warning/success */

    /* ── Tipografía — familia Material Blue Grey ───────────────── */
    --mn-ink:        #263238;   /* BG-900 */
    --mn-muted:      #5A7280;   /* BG-600 — AA 4.6:1 ✓ */
    --mn-hint:       #94A3B8;   /* slate-400 — placeholders */


    /* ── Remap Bootstrap info → brand teal (reemplaza cyan #0dcaf0) ─
       Afecta (via var(--bs-info-rgb) real de Bootstrap): .text-info, .alert-info,
       .border-info. NO afecta .bg-info/.badge-info: esos tienen su propio hex
       literal (#17a2b8, ver bloque de badges mas abajo) a proposito -- "info" debe
       distinguirse de "primary" (que SI es marca) cuando aparecen juntos, ej.
       estados de documento/cita en la misma fila (bug real encontrado y arreglado).
       Contraste blanco sobre #009688 = 5.7:1 (AA ✓)                    ── */
    --bs-info:              #009688;
    --bs-info-rgb:          0, 150, 136;
    --bs-info-text-emphasis: #00695C;
    --bs-info-bg-subtle:    #E0F2F1;
    --bs-info-border-subtle: #B2DFDB;

    /* ── Puente a Bootstrap 5 (texto/links) ────────────────────────
       BS lee estas vars y se re-tematiza solo. Cambiás --mn-ink/--mn-primary
       arriba y se propaga global, sin pelear especificidad.
       NOTA: los tokens --el-* de Element Plus se puentean en app.js (inline),
       porque EP inyecta su :root DESPUÉS de este CSS y ganaría.            ── */
    --bs-body-color:             var(--mn-ink);
    --bs-link-color:             var(--mn-primary-dk);
    --bs-link-hover-color:       var(--mn-primary);

    /* ── Aliases --df-* (legacy dashboard, backward compat) ───── */
    --df-brand:      var(--mn-primary);    --df-brand-soft: var(--mn-primary-lt);
    --df-data:       var(--mn-data);       --df-data-soft:  #E8EEF7;
    --df-health:     var(--mn-primary);    --df-mint:       var(--mn-accent-dk);
    --df-mint-soft:  var(--mn-primary-lt);
    --df-warn:       var(--mn-warning);    --df-warn-soft:  #FEF3C7;
    --df-crit:       var(--mn-danger);     --df-crit-soft:  #FDECEC;
    --df-ok:         var(--mn-success);
    --df-ink:        var(--mn-ink);        --df-muted:      var(--mn-muted);
    --df-line:       var(--mn-border);

    /* ── Estructura ───────────────────────────────────────────────── */
    --mn-header-h: 71px; /* alto fijo del topbar en desktop (ver §56 más abajo) */
}

// Topbar: Dashboard title on the left, filters inline on the right
.dash-topbar {
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; flex-wrap:wrap; margin:6px 0 14px;
}
.dash-topbar .page-headers { margin:0; padding:0; flex:0 1 auto; width:auto; }

.dash-alerts {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:12px; margin-bottom:14px;
}
@container (max-width:768px){ .dash-alerts{ grid-template-columns:1fr; } }

.dash-alert {
    display:flex; align-items:center; gap:12px;
    border-radius:10px; padding:12px 14px; cursor:pointer;
    border:1px solid transparent; text-decoration:none; color:var(--df-ink);
    transition:box-shadow .2s ease, transform .2s ease;
}
.dash-alert:hover { box-shadow:0 4px 14px rgba(38,50,56,.10); transform:translateY(-1px); }
.dash-alert__icon {
    width:38px; height:38px; border-radius:9px; flex:none; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.dash-alert__value { display:block; font-size:20px; font-weight:700; line-height:1.1; }
.dash-alert__label { display:block; font-size:12px; color:var(--df-muted); margin-top:3px; }

.dash-alert--warn { background:var(--df-warn-soft); border-color:#FAE3BC; }
.dash-alert--warn .dash-alert__icon { background:var(--df-warn); }
.dash-alert--warn .dash-alert__value { color:#B25E00; }

.dash-alert--crit { background:var(--df-crit-soft); border-color:#F6C9C9; }
.dash-alert--crit .dash-alert__icon { background:var(--df-crit); }
.dash-alert--crit .dash-alert__value { color:#B01919; }

.dash-alert--data { background:var(--df-data-soft); border-color:#CBD9EE; }
.dash-alert--data .dash-alert__icon { background:var(--df-data); }
.dash-alert--data .dash-alert__value { color:var(--df-data); }

.dash-alert--ok { background:var(--df-mint-soft); border-color:#BEE3DE; }
.dash-alert--ok .dash-alert__icon { background:var(--df-health); }
.dash-alert--ok .dash-alert__value { color:#00695C; }

// Banner compacto: certificado (ancho natural) + card unificada de inventario.
.dash-alerts--compact { display:flex; flex-wrap:wrap; }
.dash-alerts--compact > .dash-alert { flex:0 1 auto; }
.dash-alerts--compact > .dash-alert--group { flex:1 1 420px; }
@media (max-width:768px){ .dash-alerts--compact > .dash-alert { flex:1 1 100%; } }

// Card unificada: 3 indicadores de inventario en un solo contenedor, segmentado.
.dash-alert--group {
    background:#fff; border-color:var(--df-line); cursor:default;
    align-items:stretch; gap:0; padding:0; overflow:hidden;
}
.dash-seg {
    flex:1; display:flex; align-items:center; gap:11px; padding:12px 16px; min-width:0;
    text-decoration:none; color:var(--df-ink); transition:background-color .15s ease;
}
.dash-seg:hover { background:#F5F9FA; }
.dash-seg:active { background:#EEF4F5; }
.dash-seg__icon {
    width:34px; height:34px; border-radius:9px; flex:none; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--df-health);
}
.dash-seg__body { min-width:0; }
.dash-seg__num { display:block; font-size:20px; font-weight:700; line-height:1.1; color:var(--df-ink); }
.dash-seg__lbl { display:block; font-size:12px; color:var(--df-muted); margin-top:2px; }
.dash-seg__div { width:1px; background:var(--df-line); align-self:stretch; margin:10px 0; flex:none; }

.dash-seg--warn .dash-seg__icon { background:var(--df-warn); }
.dash-seg--warn .dash-seg__num  { color:#B25E00; }
.dash-seg--crit .dash-seg__icon { background:var(--df-crit); }
.dash-seg--crit .dash-seg__num  { color:#B01919; }
.dash-seg--ok   .dash-seg__icon { background:var(--df-health); }
.dash-seg--ok   .dash-seg__num  { color:#00695C; }

// Bloque "Vencimientos": dos métricas (vencidos · por vencer) en un segmento.
.dash-seg__lbl--top { font-weight:600; color:var(--df-ink); margin-bottom:3px; }
.dash-seg__pair { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; font-size:12px; color:var(--df-muted); }
.dash-seg__pair b { font-size:18px; font-weight:700; line-height:1; }
.dash-seg__dot { color:var(--df-line); }
.df-n-crit { color:#B01919; }
.df-n-warn { color:#B25E00; }
.df-n-ok   { color:#00695C; }

// Franja "Límite de categoría NRUS": facturado del mes vs tope. Reusa los mismos
// tokens --df-* que el resto del dashboard (severidad por color, no un diseño aparte).
.dash-nrus {
    background:#fff; border:1px solid var(--df-line); border-radius:12px;
    padding:14px 16px; margin-bottom:14px;
}
.dash-nrus__head {
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    margin-bottom:8px; flex-wrap:wrap;
}
.dash-nrus__title { font-size:14px; font-weight:600; color:var(--df-ink); }
.dash-nrus__meta { font-size:12px; color:var(--df-muted); }
.dash-nrus__bar {
    height:10px; border-radius:6px; background:var(--df-line); overflow:hidden;
}
.dash-nrus__fill {
    height:100%; border-radius:6px; transition:width .3s ease;
    background:var(--df-ok);
}
.dash-nrus--warn .dash-nrus__fill { background:var(--df-warn); }
.dash-nrus--crit .dash-nrus__fill { background:var(--df-crit); }
.dash-nrus__foot {
    display:flex; justify-content:space-between; font-size:12px; color:var(--df-muted); margin-top:6px;
}
.dash-nrus--warn .dash-nrus__foot .dash-nrus__pct { color:#B25E00; font-weight:600; }
.dash-nrus--crit .dash-nrus__foot .dash-nrus__pct { color:#B01919; font-weight:600; }

// Pulse KPI cards — responsive columns that divide evenly (6 → 3 → 2 → 1)
// so the row never leaves a single card stranded.
.dash-kpis {
    display:grid; gap:12px; margin-bottom:14px;
    grid-template-columns:repeat(6, 1fr);
}
// @container, no @media: el ancho disponible depende del sidebar (73/300px reservados),
// no del viewport crudo -- ver nota en la declaracion de #main-content { container-type }.
@container (max-width:1500px){ .dash-kpis{ grid-template-columns:repeat(3, 1fr); } }
@container (max-width:768px){ .dash-kpis{ grid-template-columns:repeat(2, 1fr); } }
@container (max-width:480px){ .dash-kpis{ grid-template-columns:1fr; } }
.dash-kpi {
    background:#fff; border:1px solid var(--df-line); border-radius:12px;
    padding:14px 16px; position:relative; overflow:hidden;
}
.dash-kpi__label { font-size:12px; color:var(--df-muted); font-weight:500; }
.dash-kpi__value { font-size:23px; font-weight:700; margin-top:6px; letter-spacing:-.5px; color:var(--df-ink); }
.dash-kpi__delta { font-size:12px; font-weight:600; margin-top:2px; }
.dash-kpi__muted { color:var(--df-muted); font-weight:400; }
.dash-kpi__up { color:var(--df-ok); }
.dash-kpi__down { color:var(--df-crit); }
.dash-kpi__spark { position:absolute; right:6px; bottom:4px; width:96px; height:40px; opacity:.92; pointer-events:none; }
.dash-kpi__badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; margin-top:6px; }
.dash-kpi__badge--ok { background:#E6F4EA; color:var(--df-ok); }
.dash-kpi__badge--off { background:#F1F3F4; color:var(--df-muted); }

// Sales-by-hour panel
.dash-panel {
    background:#fff; border:1px solid var(--df-line); border-radius:12px;
    padding:16px; margin-bottom:14px;
}
.dash-panel__title {
    font-size:14px; font-weight:600; color:var(--df-ink);
    display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
}
.dash-panel__title > span:first-child { display:inline-flex; align-items:center; gap:8px; }
.dash-panel__title .el-icon { vertical-align:middle; }
.dash-panel__hint { font-size:12px; color:var(--df-muted); font-weight:400; }
.dash-panel__foot { text-align:center; font-size:12px; color:var(--df-muted); margin-top:-4px; }
.dash-panel__loading { color:var(--df-muted); font-size:13px; padding:40px 0; text-align:center; }
.dash-panel__empty {
    color:var(--df-muted); font-size:13px; text-align:center;
    padding:60px 0; background:#FAFCFD; border-radius:8px; border:1px dashed var(--df-line);
}

// Grid system for dashboard panels
.dash-grid { display:grid; gap:14px; margin-bottom:14px; }
.dash-grid--8-4 { grid-template-columns:2fr 1fr; }
.dash-grid--6-6 { grid-template-columns:1fr 1fr; }
@container (max-width:992px){ .dash-grid--8-4, .dash-grid--6-6 { grid-template-columns:1fr; } }
// A lone panel (the other column gated off by config) spans the full width
.dash-grid > :only-child { grid-column:1 / -1; }
// min-width:0 en los items: sin esto, un grid item con contenido no encogible (el <svg> de ancho
// fijo en px que dibuja ApexCharts) fuerza al item a medir al menos el ancho de ese contenido en
// vez del que le toca por el track fr — rompe el fit-a-la-columna Y crea un bucle de retro-
// alimentacion con el ResizeObserver que redimensiona el chart (chart-resize.mixin.js): el
// observer mide el panel, pero el panel mide lo que mide el chart, asi que nunca se achica.
.dash-grid > * { min-width: 0; }
.dash-kpis > * { min-width: 0; }

// Filters (inline chip selects in the topbar, right side)
.dash-filters { display:flex; flex-wrap:nowrap; gap:10px; align-items:center; margin:0; flex:0 0 auto; }
.dash-filters .dash-sel { width:190px; flex:0 0 190px; }
// Override EP2 placeholder/text colors via CSS var cascade (no !important needed)
.dash-filters {
    --el-text-color-placeholder: var(--mn-ink);
    --el-text-color-regular:     var(--mn-ink);
    --el-text-color-primary:     var(--mn-ink);
    .el-select__wrapper,
    .el-input__wrapper {
        background: #F4F8FA;
        border: 1px solid #D1D9E0;
        border-radius: 8px;
        box-shadow: none;
    }
    .el-select__wrapper:hover,
    .el-input__wrapper:hover {
        border-color: var(--mn-primary);
    }
    .el-select__suffix .el-icon,
    .el-select__prefix .el-icon { color: var(--mn-muted); }
}
@media (max-width:768px){
    .dash-filters { flex-wrap:wrap; width:100%; }
    .dash-filters .dash-sel { flex:1 1 150px; width:auto; }
}
.dash-filters__field > label {
    font-size:11px; font-weight:600; color:var(--df-muted);
    text-transform:uppercase; letter-spacing:.4px; margin:0;
}

// Clean data table
.dash-table { width:100%; border-collapse:collapse; }
.dash-table thead th {
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
    color:var(--df-muted); font-weight:600; padding:8px 8px; border-bottom:1px solid var(--df-line);
}
.dash-table tbody td { padding:9px 8px; border-bottom:1px solid var(--df-soft, #F4F8FA); font-size:13px; color:var(--df-ink); }
.dash-table tbody tr:hover td { background:#F4F8FA; }
.dash-table .right { text-align:right; }
.dash-table .center { text-align:center; }
.dash-table .muted { color:var(--df-muted); }
.dash-table .prod { font-weight:600; }
.dash-table .bold td { font-weight:700; }
.dash-table .badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; display:inline-block; }
.dash-table .b-crit { background:var(--df-crit-soft); color:#B01919; }
.dash-table .b-warn { background:var(--df-warn-soft); color:#B25E00; }
.dash-table .b-ok { background:#E6F4EA; color:var(--df-ok); }

.chip { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--df-brand-soft); color:var(--df-brand); }
.dash-link { font-size:12px; color:var(--df-data); text-decoration:none; font-weight:500; transition:color .15s ease; }
.dash-link:hover { text-decoration:underline; color:var(--df-brand); }

// ── Dashboard polish: micro-interactions (make-interfaces-feel-better) ──
// Tabular numbers so live values don't shift width when they update (§9)
.dash-kpi__value, .dash-alert__value, .dash-head__sub,
.dash-table td.right, .dash-table th.right { font-variant-numeric:tabular-nums; }

// Split + staggered enter animation (§5): cards/panels rise in on load
@keyframes dash-rise {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
.dash-alert, .dash-kpi, .dash-panel { animation:dash-rise .42s cubic-bezier(0.2,0,0,1) both; }
.dash-kpis .dash-kpi:nth-child(2){ animation-delay:.05s; }
.dash-kpis .dash-kpi:nth-child(3){ animation-delay:.10s; }
.dash-kpis .dash-kpi:nth-child(4){ animation-delay:.14s; }
.dash-kpis .dash-kpi:nth-child(5){ animation-delay:.18s; }
.dash-kpis .dash-kpi:nth-child(6){ animation-delay:.22s; }
.dash-alerts .dash-alert:nth-child(2){ animation-delay:.06s; }
.dash-alerts .dash-alert:nth-child(3){ animation-delay:.12s; }
.dash-grid .dash-panel { animation-delay:.08s; }

// Subtle hover lift on the small KPI cards (specific props only, §14)
.dash-kpi { transition-property:box-shadow, transform; transition-duration:.2s; transition-timing-function:cubic-bezier(0.2,0,0,1); }
.dash-kpi:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(38,50,56,.04), 0 8px 22px rgba(38,50,56,.07); }

// Clickable alert cards: tactile press feedback (§12)
.dash-alert { transition-property:box-shadow, transform; transition-duration:.2s; }
.dash-alert:active { transform:scale(.99); }

// Smooth chart/value updates and table row hover
.dash-table tbody td { transition:background-color .15s ease; }

@media (prefers-reduced-motion: reduce) {
    .dash-alert, .dash-kpi, .dash-panel { animation:none; }
    .dash-kpi:hover { transform:none; }
    .dash-alert:active { transform:none; }
}

// Cohesion: existing dashboard widgets adopt the unified card look + label tone
.card.card-dashboard {
    border:1px solid var(--df-line);
    border-radius:12px;
}
.card.card-dashboard label {
    color:var(--df-muted); font-weight:600; font-size:12px;
    text-transform:uppercase; letter-spacing:.3px;
}

// .card-report-links (list-settings, hub de Configuracion): vivia SOLO en
// custom.scss (bundle de Cuba, style.scss -> app.css), nunca se porto a
// porto-app.scss. Sin esto, el vendor global `a { color: #ccc; }`
// (theme.css:25-27, gris casi invisible) le gana a cualquier <a> sin clase
// propia -- exactamente lo que son estos links de menu.
.card-report-links {
    padding-left: 1rem;
    margin-bottom: 0;
    li { margin-bottom: 0.5rem; &:last-of-type { margin-bottom: 0; } }
    a {
        display: block;
        color: var(--mn-ink);
        font-size: 13px;
        font-weight: 500;
        &:hover { color: var(--mn-primary-dk); }
    }
}

// ── 34. Preloader inicial — ECG "Gradiente + glow" (.ef-preloader) ──────
// Reemplaza el loader "goo" del tema Cuba. Markup: partials/preloader.blade.php.
// Lo oculta hideInitialLoader() en app.blade.php. Propio, no depende de Cuba.
.ef-preloader {
    position:fixed; inset:0; z-index:1200;
    display:flex; align-items:center; justify-content:center;
    background:#fff;
}
.ef-preloader .ef-ecg { width:230px; height:70px; }
.ef-preloader .ef-ecg path {
    fill:none;
    stroke:url(#efEcgGrad);
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:420;
    stroke-dashoffset:420;
    animation:ef-ecg-trace 1.7s ease-in-out infinite,
              ef-ecg-glow  1.7s ease-in-out infinite;
}
// Lector de pantalla: anuncia "Cargando…" sin mostrarlo.
.ef-preloader__sr {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@keyframes ef-ecg-trace {
    0%   { stroke-dashoffset:420; }
    55%  { stroke-dashoffset:0; }
    100% { stroke-dashoffset:-420; }
}
@keyframes ef-ecg-glow {
    0%, 100% { filter:drop-shadow(0 0 1px rgba(13,71,161,.2)); }
    55%      { filter:drop-shadow(0 0 7px rgba(77,182,172,.8)); }
}
// Respeta usuarios con movimiento reducido: deja la línea trazada, sin recorrido.
@media (prefers-reduced-motion: reduce) {
    .ef-preloader .ef-ecg path {
        stroke-dashoffset:0;
        animation:ef-ecg-glow 2s ease-in-out infinite;
    }
}



// ── 37. Logo de empresa en formularios de comprobante ────────────────────
// El recuadro ocupa col-xl-2; inline-flex lo hacía encoger al contenido.
// Ahora llena el ancho de la columna y la imagen aprovecha más espacio.
.company-logo-trigger {
    color: #ccc;
    cursor: pointer;
    display: block;
    width: 100%;
}

.company-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9e2e7;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}

.company-logo-preview__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 66px;
    object-fit: contain;
    object-position: center;
}

// ── 38. Drawer "Información Adicional" en comprobantes (patrón pro8) ─────
$drawer-primary: #009688;       // --mn-primary
$drawer-primary-dark: #00796B;  // --mn-primary-dk
$drawer-width: 370px;

// El tab "Abrir Información Adicional" es fixed en el borde derecho. Reservamos un
// gutter en el contenido del comprobante (desktop) para que NO se solape con totales/
// botones de fila — igual que pro8 (el contenido termina antes del tab).
@media (min-width: 992px) {
    .invoice-generate-wrap .card { margin-right: 6px; }
}

.invoice-info-toggle {
    position: fixed;
    top: 38%;
    right: -80px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    background: $drawer-primary;
    color: #fff;
    padding: 4px 14px;
    cursor: pointer;
    border-radius: 6px;
    z-index: 1022;
    transition: right 0.3s ease-in-out, background 0.2s;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.02em;
    box-shadow: -2px 0 8px rgba(0,0,0,0.18);

    &:hover {
        background: $drawer-primary-dark;
    }

    &.shift {
        right: $drawer-width - 104px;
        box-shadow: none;
    }
}

.invoice-info-panel {
    position: fixed;
    top: 0;
    right: -$drawer-width;
    width: $drawer-width;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.14);
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1023;

    &.show {
        right: 0;
    }

    &::-webkit-scrollbar { width: 5px; }
    &::-webkit-scrollbar-thumb { background: #b2dfdb; border-radius: 3px; }
    &::-webkit-scrollbar-track { background: transparent; }

    // Header claro — título centrado, X a la derecha
    h3 {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        background: #fff;
        margin: 0 -1.5rem;
        padding: 18px 48px;
        text-align: center;
        border-bottom: 1px solid #eef0f2;
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    // Labels de campo — texto oscuro, capitalización normal
    .control-label {
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        text-transform: none;
        letter-spacing: 0;
        margin-bottom: 6px;
        display: block;
    }

    // Tarjeta de toggles
    .switch-card {
        margin: 18px 0;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }

    // Filas de switch
    .switch-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #f1f3f5;
        transition: background 0.15s;

        &:hover { background: #f8f9fa; }
        &:last-child { border-bottom: none; }

        .switch-row__label {
            font-size: 13px;
            color: #374151;
            line-height: 1.4;
            padding-right: 12px;
        }
    }

    // Tabla de Guías — select+input apilados (antes en una sola fila 46%/42%/12%: la
    // opcion mas larga del catalogo, "Guia de Remision - Transportista", necesita ~212px
    // y el drawer solo da ~300px utiles -- no entraba ni redistribuyendo porcentajes).
    // Apilar deja al select casi todo el ancho de la celda; el boton eliminar queda en su
    // propia celda a la derecha, alineado arriba.
    .guias-block {
        table { width: 100%; }
        td {
            padding-bottom: 8px;
            vertical-align: middle;
        }
        td:nth-child(1) { width: auto; padding-right: 8px; }
        td:nth-child(2) { width: 30px; text-align: right; vertical-align: top; padding-top: 2px; }
        .guias-block__stack {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .el-select,
        .el-input { width: 100%; }
    }

    // Botón consulta — gris, centrado
    .btn-consulta {
        display: block;
        margin: 16px auto 22px;
        padding: 10px 26px;
        background: #6c757d;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;

        &:hover { background: #5c636a; }
        &:disabled { opacity: 0.55; cursor: not-allowed; }
    }
}

.invoice-info-panel__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #9ca3af;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;

    &:hover {
        background: #f1f3f5;
        color: #4b5563;
    }
}

.invoice-info-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    z-index: 1021;
}

// ── 38b. Footer de diálogos de opciones (span.dialog-footer en el body) ───────
// El footer (Ir al listado / Nuevo comprobante) va DENTRO del body del el-dialog,
// no en el slot #footer, y como es <span> inline el margin-top no aplica → queda
// pegado a la última fila (WhatsApp). Lo volvemos block, lo separamos y le ponemos
// un divisor sutil. Global: cubre todos los partials/options.vue (documents,
// quotations, purchases, sale_notes, etc.) sin tocar cada uno. No fijamos
// text-align para respetar la alineación heredada del diálogo.
.el-dialog__body .dialog-footer {
    display: block;
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--mn-border);
}



// ── 41. Separador filtros ↔ tabla en listados (data-table) ──────────────────
// La barra de filtros (Periodo/Mes/Estado) quedaba pegada al thead de la tabla.
// .dt-filters-sep dibuja una línea sutil + respiro (con mt-3 pt-3 del markup),
// dejando claro "filtros arriba, datos abajo". Reutilizable en otros DataTable*.
.dt-filters-sep {
    border-top: 1px solid var(--mn-border);
}

// ── 42. Order-notes — acciones por fila (CTA primaria + kebab) ───────────────
// La celda de acciones amontonaba hasta 7 botones btn-xs todos del mismo azul (sin
// jerarquía). Ahora: "Generar comprobante" es la CTA primaria (el-button primary) y
// las secundarias (Editar/Duplicar/Guía/Anular) viven en un menú kebab "⋮".
.ona-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

// Disparador kebab — botón-icono compacto (32px, denso pero > btn-xs)
.ona-kebab {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mn-border);
    background: #fff;
    color: var(--mn-muted);
    border-radius: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;

    &:hover,
    &:focus-visible {
        background: var(--mn-primary-lt);
        color: var(--mn-primary-dk);
        border-color: var(--mn-primary);
    }
}

// Iconos dentro del menú kebab + variante peligro (Anular)
.ona-mi-ic { width: 16px; margin-right: 8px; text-align: center; color: var(--mn-muted); }
.el-dropdown-menu__item.ona-mi-danger { color: var(--mn-danger); }
.el-dropdown-menu__item.ona-mi-danger .ona-mi-ic,
.el-dropdown-menu__item.ona-mi-danger:hover { color: var(--mn-danger); }
.el-dropdown-menu__item.ona-mi-danger:hover { background: var(--df-crit-soft, #FDECEC); }

// ── 42b. Acciones de fila compactas con kebab (cash list, reutilizable) ──────
// Listado de cajas: la celda Acciones amontonaba hasta 6 botones (Reportes/Contab/
// Cerrar/Editar/Eliminar/Email). Ahora visibles: Reportes · Contabilidad · Cerrar caja;
// el resto (Email/Editar/Eliminar) va en un kebab "⋮". .row-kebab = mismo look que
// .ona-kebab pero como Bootstrap .btn (la página usa dropdowns BS, no EP).
.cash-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;       // horizontal en una línea; la celda se expande
    white-space: nowrap;
}
// Compactar los dropdowns Reportes/Contabilidad dentro de la celda de acciones
.cash-actions .btn { white-space: nowrap; }
.row-kebab {
    width: 32px;
    height: 31px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mn-border);
    background: #fff;
    color: var(--mn-muted);
    border-radius: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;

    &:hover,
    &:focus-visible {
        background: var(--mn-primary-lt);
        color: var(--mn-primary-dk);
        border-color: var(--mn-primary);
    }
}

// ── 43. Botones de acción adyacentes en celdas de tabla — respiro ────────────
// Pares como [Comisión][Eliminar], [Editar][Eliminar], etc. iban PEGADOS: Bootstrap
// no da margen a .btn + .btn, y los listados los ponen sueltos en el <td>. Esto los
// separa en TODOS los listados de un saque. Se respeta .btn-group (segmentos que van
// pegados a propósito) y el primer botón NO lleva margen (no descuadra la celda).
.table td .btn + .btn,
.table td .btn + .el-button,
.table td .el-button + .btn {
    margin-left: 8px;
}
// Si además envuelven en flex/wrap, dar respiro vertical al envolver
.table td .btn {
    margin-bottom: 2px;
}
// No romper segmentos agrupados
.table td .btn-group .btn + .btn {
    margin-left: 0;
}

// ── 44. Reporte de resultado de importación (.import-result-report) ──────────
// Bloque reutilizado en los modales/páginas de import de precios (update_prices,
// import_list_price, import.vue, import-prices SISMED) para mostrar el resumen
// { total, registered, not_found, not_found_count, publico_synced } que devuelve
// el backend. Element Plus 2 (el-alert / el-tag) + tokens --mn-*.
.import-result-report {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .import-result-report__summary,
    .import-result-report__notfound {
        border-radius: 8px;
    }

    .import-result-report__counts {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        font-size: 13px;
    }

    .import-result-report__count--ok strong {
        font-size: 15px;
    }

    .import-result-report__count--total {
        color: var(--mn-muted, #6b7280);
    }

    .import-result-report__notfound-hint {
        margin: 0 0 8px;
        font-size: 12.5px;
        color: var(--mn-muted, #6b7280);
    }

    // Lista de códigos no encontrados: chips que envuelven, scroll si son muchos
    .import-result-report__codes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        max-height: 160px;
        overflow-y: auto;
        padding-right: 2px;
    }

    .import-result-report__code {
        font-variant-numeric: tabular-nums;
    }

    .import-result-report__more {
        font-size: 12px;
        font-style: italic;
        color: var(--mn-muted, #6b7280);
    }

    .import-result-report__note {
        margin: 0;
        font-size: 12.5px;
        color: var(--mn-muted, #6b7280);

        strong {
            color: var(--mn-ink, #1f2937);
        }
    }
}

// ── 45. Dropdown BS "Importar" en listados — opacidad + stacking ─────────────
// Al abrir el menú (.dropdown-menu) en listados (items, etc.), el-table/.card que
// vienen DESPUÉS en el DOM crean stacking contexts y lo pintaban traspasado: se
// veía "Mostrar/Ocultar columnas" a través del panel. BS le da z-index:1000 pero
// no alcanza contra esos contextos. Forzamos fondo opaco + sombra + z-index alto
// sobre .show (sólo cuando está abierto) — directo, sin depender de ancestro.
.dropdown-menu.show {
    z-index: 1050 !important;
    background-color: #fff !important;
    background-clip: padding-box;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12) !important;
}

// ================================================================
// 41. Lotes y vencimientos (/inventory/lotes)
//     Movido desde el <style scoped> de lots/index.vue (convención: sin scoped).
// ================================================================

// 41.1 Resumen / chips (también filtran por estado)
.lots-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.lots-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--mn-ink);
    transition: border-color .15s, box-shadow .15s, background .15s;

    &:hover { border-color: #c0c4cc; }
    &.is-active { box-shadow: 0 0 0 2px rgba(64, 158, 255, .25); }

    .lots-chip__num { font-size: 18px; font-weight: 700; line-height: 1; }
}
.lots-chip--expired { .lots-chip__num { color: #f56c6c; } &.is-active { border-color: #f56c6c; } }
.lots-chip--soon    { .lots-chip__num { color: #e6a23c; } &.is-active { border-color: #e6a23c; } }
.lots-chip--ok      { .lots-chip__num { color: #67c23a; } &.is-active { border-color: #67c23a; } }
.lots-chip--reset   { color: var(--mn-muted); .lots-chip__label { display: none; } }

.lots-filter-label {
    font-size: 13px;
    color: var(--mn-ink);
    margin-right: 8px;
    white-space: nowrap;
}
.lots-warehouse-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #409EFF;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 12px;
    padding: 3px 10px;

    &--global { color: #909399; background: #f4f4f5; border-color: #e9e9eb; }
}

// 41.2 Filas
.lots-row td {
    vertical-align: middle;
    padding: 10px 12px;
}
.lots-product-name {
    font-size: 13px;
    color: var(--mn-ink);
    font-weight: 500;
}
.lots-code-badge {
    display: inline-block;
    font-size: 12px;
    font-family: monospace;
    background: #f0f2f5;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--mn-ink);
    letter-spacing: 0.5px;
}

// 41.3 Semáforo de vencimiento
.lots-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 500;
    white-space: nowrap;
}
.lots-due--expired { background: #fef0f0; color: #f56c6c; border: 1px solid #fbc4c4; }
.lots-due--soon    { background: #fdf6ec; color: #e6a23c; border: 1px solid #f5dab1; }
.lots-due--warn    { background: #fdf6ec; color: #b88230; border: 1px solid #f5dab1; }
.lots-due--ok      { background: #f0f9eb; color: #67c23a; border: 1px solid #c2e7b0; }

// 41.4 Stock
.lots-stock-warehouse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #409EFF;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 12px;
    padding: 2px 10px;
}
.lots-stock-global {
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-ink);
}

// 41.5 Botones de acción
.lots-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0;

    & + .lots-action-btn { margin-left: 4px; }
}
.lots-action-edit { color: #e6a23c; &:hover { background: #fdf6ec; border-color: #f5dab1; } }
.lots-action-del  { color: #f56c6c; &:hover { background: #fef0f0; border-color: #fbc4c4; } }

// 42. FontAwesome dentro de botones: separar el icono del texto.
// EP2 solo aplica el gap al slot de icono (el-icon/SVG); los <i class="fa..."> quedaban
// pegados al texto (ej. "Exportar Excel"). Esto les da una separación consistente.
.el-button i.fa,
.el-button i.fas,
.el-button i.far,
.el-button i.fab,
.btn i.fa,
.btn i.fas,
.btn i.far,
.btn i.fab { margin-inline-end: 0.4em; }

// 43. Tablas de pago/cuotas (Forma de pago · Desde · Referencia · Monto): cuando el <table>
// no lleva width queda en table-layout:auto y aplasta el select "Desde" (mostraba "C/" cortado).
// Forzar ancho completo a cualquier tabla editable que contenga un el-select (los rotos eran
// <table> pelado; los ya arreglados usaban <table class="table"> = width:100%, esto los iguala),
// + min-width a los selects para que el destino (CAJA GENERAL / Banco …) se lea completo.
table:has(td .el-select) { width: 100%; }
table:has(td .el-select) td .el-select { min-width: 130px; }


// El shell del sidebar/header/main-content (posicion, tamaño, colores del nav, header
// superior) se define TODO junto mas abajo, bajo "Shell Porto (parity con pro9)" -- un
// solo bloque, un solo diseño. Antes vivia repartido en ~4 fragmentos separados (colores
// aca, header aca, posicionamiento alla, mas un segundo sistema de --mn-sidebar-w
// redundante) escritos en sesiones distintas -- terminaron compitiendo entre si via
// cascada/especificidad (ej.: dos declaraciones de .mn-sidebar-header con las mismas
// props, ninguna con position:fixed explicito porque cada una asumia que la OTRA ya lo
// tenia -- el sidebar quedaba en flujo normal en vez de fixed, y el logo se salia del
// area visible). Rango antes disperso: colores del nav, cabecera (logo+toggle),
// posicionamiento, container-type de #main-content, header superior, item de nav estilo
// pro9, mobile.
#main-content { container-type: inline-size; }

/* ===== §34 Reportes Veterinaria — reusa el idioma del dashboard (.dash-*, tokens --df-*) ===== */
/* Topbar del filtro de periodo (alineado a la derecha como los filtros del dashboard). */
.vet-rep-topbar { display:flex; justify-content:flex-end; margin-bottom:14px; }
.vet-rep-topbar .dash-filters__field { display:flex; flex-direction:column; gap:4px; }

/* KPIs: 4 por fila como el dashboard; los enlazados son clickeables. */
.vet-rep-kpis { grid-template-columns:repeat(4, 1fr); }
@media (max-width:992px){ .vet-rep-kpis { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .vet-rep-kpis { grid-template-columns:1fr; } }
.vet-rep-kpi { display:block; text-decoration:none; color:inherit; cursor:pointer; }
.vet-rep-kpi:hover { border-color:var(--df-health, #00796b); }
.vet-rep-kpi--static { cursor:default; }
.vet-rep-kpi--static:hover { border-color:var(--df-line); }
.vet-rep-kpi .dash-kpi__label { display:flex; align-items:center; gap:6px; }
.vet-rep-kpi__icon { font-size:14px; line-height:1; }

/* Slots con altura reservada para que el layout no salte mientras carga. */
.vet-rep-slot { min-height:200px; }
.vet-rep-slot--md { min-height:260px; }

/* Nota explicativa de "sin cobro vinculado" (para no leer ingreso 0 como negocio). */
.vet-rep-note { font-size:11.5px; color:var(--df-muted); margin:10px 0 0; line-height:1.5; }
.vet-rep-note strong { color:#B25E00; }
.vet-rep-nochg { color:#B25E00; font-size:11px; }

/* Donut nuevos vs recurrentes + leyenda propia (legend del chart oculta). */
.vet-rep-donutwrap { display:flex; flex-direction:column; align-items:center; }
.vet-rep-donutlegend { display:flex; gap:18px; font-size:13px; color:var(--df-ink); margin-top:6px; }
.vet-rep-donutlegend strong { margin-left:4px; }
.vet-rep-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; }

/* Herramientas del panel de vacunas (select de ventana + export CSV). */
.vet-rep-vactools { display:flex; align-items:center; gap:12px; }
/* El style="width:130px" inline del el-select (reports/index.vue) queda inerte contra
   setting.css:13 (".el-select{width:100%!important}") -- sin ancho propio en el wrapper,
   ese 100% se resuelve contra el espacio residual que deja "Exportar CSV" en el flex,
   colapsando a ~62px ("Próx. 30 días" se corta). Mismo patron ya resuelto en este
   archivo para .mn-inline-filter/.clinica-filters -- ancho fijo al WRAPPER, con
   !important para ganarle al !important de setting.css. */
.vet-rep-vactools .el-select { width: 140px !important; }

/* ===== §35 Ficha de consulta veterinaria — ConsultationForm.vue (Atender / nueva consulta) =====
   Layout a 2 columnas dentro del diálogo "Atender". Izquierda = secciones del formulario
   (signos vitales, examen, evaluación, adjuntos); derecha = contexto del paciente +
   historial reciente. Reusa tokens --mn- y --df-; radios concentricos; numeros tabulares
   para vitales/fechas; sin scoped styles (regla del proyecto). */

/* El diálogo Atender es ancho y responsive. */
.vetc-dialog .el-dialog__body { padding-top: 8px; }
@media (max-width: 992px) {
    .vetc-dialog { width: 94vw !important; }
}

.vetc { font-size: 13px; }

/* Tira meta superior: Fecha · Tipo · Veterinario (datos administrativos). */
.vetc-meta {
    background: var(--mn-primary-lt, #E0F2F1);
    border: 1px solid var(--df-line, #E3EAEE);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}

/* Etiquetas de campo: <label> reales, legibles. */
.vetc-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--df-ink, #263238);
    margin-bottom: 6px;
}
.vetc-req { color: var(--mn-danger, #DC2626); }
.vetc-hint { font-size: 11px; color: var(--df-muted, #5A7280); font-weight: 400; }
.vetc-field { margin-bottom: 12px; }
.vetc-field:last-child { margin-bottom: 0; }

/* Tarjeta/fieldset de sección con subtítulo. */
.vetc-card {
    background: var(--mn-surface, #fff);
    border: 1px solid var(--df-line, #E3EAEE);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.vetc-card:last-child { margin-bottom: 0; }
.vetc-card__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    color: var(--df-health, #00796B);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--df-line, #E3EAEE);
}
.vetc-card__title i { font-size: 13px; }

/* Numeros tabulares para signos vitales, peso anterior y fechas del historial. */
.vetc-num input, .vetc-num.vetc-num, .vetc-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Estado general como chips (multi-select). */
.vetc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vetc-chip { cursor: pointer; }
.vetc-chip.el-check-tag { border-radius: 999px; }

/* Delta de peso en vivo (▲/▼ vs anterior). */
.vetc-delta {
    margin-top: 6px; font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
    display: flex; align-items: baseline; gap: 6px;
}
.vetc-delta--up   { color: var(--mn-success, #059669); }
.vetc-delta--down { color: var(--mn-danger, #DC2626); }
.vetc-delta--flat { color: var(--df-muted, #5A7280); }
.vetc-delta__ref  { font-weight: 400; color: var(--df-muted, #5A7280); }

/* --- Tarjeta de contexto del paciente (panel derecho) --- */
.vetc-patient {
    background: var(--mn-surface, #fff);
    border: 1px solid var(--df-line, #E3EAEE);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.vetc-patient__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vetc-patient__avatar {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--mn-primary-lt, #E0F2F1);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1; flex-shrink: 0;
}
.vetc-patient__name { font-size: 16px; font-weight: 700; color: var(--df-ink, #263238); line-height: 1.2; }
.vetc-patient__meta { font-size: 12px; color: var(--df-muted, #5A7280); }

/* Alergias / condiciones crónicas: señal de seguridad ámbar (alto contraste). */
.vetc-alert {
    display: flex; gap: 8px;
    background: var(--df-warn-soft, #FEF3C7);
    border: 1px solid var(--mn-warning, #D97706);
    border-radius: 10px;
    padding: 9px 11px;
    margin-bottom: 12px;
    font-size: 12px; line-height: 1.45;
    color: #7A4100;
}
.vetc-alert i { color: var(--mn-warning, #D97706); margin-top: 2px; }
.vetc-alert strong { color: #7A4100; }
.vetc-noalert {
    font-size: 11.5px; color: var(--df-muted, #5A7280);
    margin-bottom: 12px; font-style: italic;
}

/* Datos clave del paciente (definición compacta de 2 columnas). */
.vetc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.vetc-facts > div { display: flex; flex-direction: column; gap: 2px; }
.vetc-facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--df-muted, #5A7280); margin: 0; }
.vetc-facts dd { font-size: 13px; font-weight: 600; color: var(--df-ink, #263238); margin: 0; }

/* Historial reciente (lista compacta: fecha · tipo · motivo). */
.vetc-history .vetc-histlist { list-style: none; margin: 0; padding: 0; }
.vetc-histlist li {
    display: flex; align-items: baseline; gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--df-line, #E3EAEE);
    font-size: 12px;
}
.vetc-histlist li:last-child { border-bottom: none; }
.vetc-histlist__date { color: var(--df-muted, #5A7280); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.vetc-histlist__type { font-weight: 600; color: var(--df-health, #00796B); flex-shrink: 0; }
.vetc-histlist__reason { color: var(--df-ink, #263238); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pie de acciones del formulario. */
.vetc-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--df-line, #E3EAEE);
}

/* Panel de éxito post-guardado (loading → éxito + acciones). */
.vetc-saved { text-align: center; padding: 26px 16px 18px; }
.vetc-saved__icon {
    width: 56px; height: 56px; margin: 0 auto 12px;
    border-radius: 999px;
    background: var(--mn-primary-lt, #E0F2F1);
    color: var(--mn-success, #059669);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700; line-height: 1;
}
.vetc-saved__title { font-size: 17px; font-weight: 700; color: var(--df-ink, #263238); }
.vetc-saved__sub { font-size: 13px; color: var(--df-muted, #5A7280); margin: 4px 0 16px; }
.vetc-saved__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* Botón "Cobrar consulta" en la historia clínica (pets/index.vue). La columna va
   fixed="right" para que quede siempre visible aunque la tabla scrollee horizontal. */
.vet-cobrar-btn { white-space: nowrap; transition: transform .12s ease; }
.vet-cobrar-btn:active { transform: scale(.96); }

/* ===== §36 Acciones de cita en agenda — appointments/index.vue (Lista + diálogo de detalle) =====
   Un solo modelo de acciones contextual por estado: UNA primaria prominente (🩺 Atender /
   📋 Ver consulta), Ticket secundario, y el resto (fuente única = overflowItems(row)) según cantidad:
   ≥2 ítems → overflow "⋯ Más" (el-dropdown); ===1 ítem → acción directa de-enfatizada (link de texto,
   rojo tenue si es destructiva) — evita el anti-patrón "menú de 1 ítem". La cita NUNCA se borra: se
   Cancela (status='cancelled') con confirm. Reusa tokens --mn-/--df-; sin scoped (regla del proyecto).
   Áreas de toque cómodas (size="default" + alturas mínimas). */

/* Fila de acciones: alineación + separación cómoda entre botones. */
.cita-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* En el diálogo de detalle las acciones tienen aire propio bajo la tabla de datos. */
.cita-actions--dialog { margin-top: 4px; }

/* Element Plus separa .el-button+.el-button con margin-left; lo neutralizamos para usar gap
   uniforme (el gap de flex es la única fuente de separación). Va con !important porque EP/setting.css
   inyectan esa regla DESPUÉS de modern (ver CLAUDE.md §4). */
.cita-actions .el-button + .el-button { margin-left: 0 !important; }

/* Botones de acción ≥ área de toque cómoda en ambas vistas (lista y diálogo). */
.cita-actions .el-button {
    min-height: 36px;
    font-weight: 600;
}
/* Ticket: icónico pero con hit-area cómoda (no un mini botón). */
.cita-actions__ticket.el-button {
    min-width: 40px;
    padding-left: 12px;
    padding-right: 12px;
}
.cita-actions__ticket .fa { font-size: 14px; }

/* "⋯ Más": neutro, secundario respecto a la primaria. */
.cita-actions__more.el-button {
    color: var(--df-muted, #5A7280);
    font-weight: 600;
    letter-spacing: .2px;
}

/* Ítem destructivo del overflow (Cancelar cita): color de peligro + hover suave. */
.el-dropdown-menu__item.cita-actions__danger {
    color: var(--mn-danger, #DC2626);
}
.el-dropdown-menu__item.cita-actions__danger:hover,
.el-dropdown-menu__item.cita-actions__danger:focus {
    background: var(--df-crit-soft, #FDECEC);
    color: var(--mn-danger, #DC2626);
}
/* Ítem de "No vino": NO es destructivo (registra un hecho) → ámbar, distinto del rojo de Cancelar. */
.el-dropdown-menu__item.cita-actions__warn {
    color: #B5740A;
}
.el-dropdown-menu__item.cita-actions__warn:hover,
.el-dropdown-menu__item.cita-actions__warn:focus {
    background: #FCF3E6;
    color: #985F09;
}

/* Acción directa de-enfatizada cuando el overflow tiene UN solo ítem (sin menú). Link de
   texto sutil que NO compite con la primaria; rojo tenue si es destructiva (Cancelar).
   Hit-area cómoda con padding + min-height pese a ser "plano". */
.cita-actions__inline {
    background: none;
    border: none;
    padding: 6px 8px;
    min-height: 36px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--df-muted, #5A7280);
    cursor: pointer;
    border-radius: 6px;
    transition: color .12s ease, background .12s ease;
}
.cita-actions__inline:hover { background: var(--mn-bg, #F4F7F8); color: var(--df-ink, #263238); }
.cita-actions__inline--danger { color: var(--mn-danger, #DC2626); }
.cita-actions__inline--danger:hover { background: var(--df-crit-soft, #FDECEC); color: var(--mn-danger, #DC2626); }

/* Bloque WhatsApp del diálogo (antes compartía fila con el botón Eliminar; ahora va solo). */
.cita-wa { display: flex; align-items: center; }

/* ===== §37 Veterinaria — accesibilidad y pulido del flujo =====================================
   Ola a11y/pulido del módulo Vet (perfil salud del skill ui-ux-pro-max + reglas healthcare).
   TODO va GATEADO bajo `.vet-ui`, una clase que SÓLO ponemos en el <div> raíz de cada vista
   del módulo Vet (pets/appointments/reminders/memberships/boardings). Farmacia y demás tenants
   NO tienen ese wrapper ⇒ ninguna de estas reglas los toca (byte-for-byte iguales).
   NUNCA se modifica una clase global de Bootstrap (.btn, .btn-xs, .text-muted) "a pelo":
   siempre van prefijadas por `.vet-ui ...` o son clases propias nuevas (.vet-iconbtn, etc.).
   Sin scoped styles (regla del proyecto). Tokens --mn-/--df- con fallback. */

/* --- 37.1 Áreas de toque (touch target ≥44px de hit-area) -----------------------------------
   Dentro de vet, los `btn btn-xs` de las tablas/diálogos son diminutos. Les damos alto y
   padding cómodos SIN tocar la clase global (van prefijados por .vet-ui). */
.vet-ui .btn-xs,
.vet-ui .btn.btn-xs {
    min-height: 36px;
    padding-block: 7px;
    line-height: 1.1;
    /* el vendor deja font-size:.7rem (11.2px) en .btn.btn-xs -- agrandar el hit-area
       y dejar la letra diminuta contradice el propósito de este bloque (37.1). */
    font-size: 12px;
}
/* Botón de acción icónico/emoji-only (lápiz, basura, etc.): hit-area real ≥40px y centrado.
   Clase propia que AÑADIMOS a esos botones en los templates (mejor que ensanchar btn-xs global). */
.vet-iconbtn,
.vet-ui .btn-xs.vet-iconbtn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 8px;
}
/* En vet, las celdas de "Acciones" respiran: separación ≥8px entre botones adyacentes
   (touch-spacing) y se envuelven en pantallas chicas en vez de apretarse. */
.vet-ui .el-table .cell .btn + .btn,
.vet-ui .el-table .cell .btn + a.btn {
    margin-left: 6px;
}

/* --- 37.2 Texto de ayuda legible (contraste + tamaño) ---------------------------------------
   Los hints `text-muted`/`small` de vet eran #5A7280 a 11px (bajo contraste / muy chico).
   Subimos el contraste y el piso de tamaño DENTRO de vet. */
.vet-ui .text-muted,
.vet-ui small {
    color: #5A6B7B !important; // gana al .text-muted!important del vendor (theme.css) -- sin
    // esto la regla nunca aplicaba, el contraste seguia siendo el #999 original.
}
/* Hints inline puestos a 11px en los templates: subir a 12.5px dentro de vet (legibilidad). */
.vet-ui small[style*="font-size:11px"],
.vet-ui [style*="font-size:11px"],
.vet-ui small[style*="font-size: 11px"],
.vet-ui [style*="font-size: 11px"] {
    font-size: 12.5px !important; /* gana al inline 11px SOLO dentro de vet; no afecta farmacia */
}

/* --- 37.3 Anillo de foco visible (3px) ------------------------------------------------------
   Teclado: foco claramente visible en botones BS y EP dentro de vet. */
.vet-ui .btn:focus-visible,
.vet-ui .el-button:focus-visible,
.vet-ui .vet-iconbtn:focus-visible,
.vet-ui a.btn:focus-visible {
    outline: 3px solid var(--mn-primary, #009688);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- 37.4 Tablas anchas con scroll horizontal limpio (recepción usa tablet) -----------------
   Envolvemos las tablas anchas de vet en `.vet-table-wrap` para que desborden con scroll
   propio en vez de romper el layout. fixed="right" (col Cobro) se mantiene. */
.vet-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    /* En tablet/móvil, la tabla puede exceder el ancho y desplazarse dentro del wrap
       sin empujar el resto del layout. Damos un ancho mínimo para que las columnas no
       se aplasten ilegiblemente. */
    .vet-ui .vet-table-wrap .el-table {
        min-width: 720px;
    }
}

/* --- 37.5 Estados vacíos que guían --------------------------------------------------------- */
.vet-empty {
    text-align: center;
    padding: 28px 16px;
    color: #5A6B7B;
}
.vet-empty__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--df-ink, #303133);
    margin-bottom: 4px;
}
.vet-empty__hint {
    font-size: 12.5px;
    color: #5A6B7B;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.5;
}
/* Descripción del el-empty de EP dentro de vet: subir contraste/tamaño del texto guía. */
.vet-ui .el-empty .el-empty__description p {
    color: #5A6B7B;
    font-size: 13px;
}

/* ===== §38 Veterinaria — ficha de paciente + estado de cita ==================================
   Estructura P0 del flujo Vet:
   (1) FICHA DE PACIENTE UNIFICADA (pets/index.vue): un solo diálogo con pestañas (Resumen /
       Historia / Vacunas / Recetas / Presupuestos / Hospedaje) en vez de 4 diálogos sueltos.
       Header del paciente persistente (sticky) + acciones rápidas. El diálogo va con
       `append-to-body`/`teleported`, así que se renderiza FUERA de `.vet-ui`: por eso estas
       reglas se gatean bajo `.vet-ficha-dialog` (clase propia del diálogo) y `.vet-ficha*`.
   (2) ESTADO / LÍNEA DE TIEMPO DE LA CITA (appointments/index.vue): stepper de solo lectura
       Pendiente → Confirmada → Atendida → Cobrada bajo `.vet-cita-steps` (dentro del diálogo).
   Reusa el idioma del dashboard/§35 (tokens --df-/--mn-, radios concéntricos, números tabulares,
   teal primario var(--mn-primary, #009688)). Sin scoped styles (regla del proyecto). Farmacia y
   demás tenants NO usan estas clases ⇒ no se ven afectados. */

/* --- 38.0 Disparadores en la lista de mascotas --------------------------------------------- */
/* Nombre de la mascota = botón que abre la ficha (link teal, hit-area cómoda, no parece <button>). */
.vet-ui .vet-petname {
    background: none;
    border: none;
    padding: 4px 0;
    font: inherit;
    font-weight: 700;
    color: var(--mn-primary, #009688);
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    transition: color .12s ease;
}
.vet-ui .vet-petname:hover { color: var(--df-health, #00796B); text-decoration: underline; }
.vet-ui .vet-petname:focus-visible { outline: 3px solid var(--mn-primary, #009688); outline-offset: 2px; }
/* "📂 Abrir ficha": acción primaria de la fila. Scale-on-press para feedback táctil. */
.vet-ui .vet-ficha-open { white-space: nowrap; transition: transform .12s ease; }
.vet-ui .vet-ficha-open:active { transform: scale(.96); }

/* --- 38.1 Diálogo de la ficha: ancho, alto cómodo, cuerpo con scroll propio ------------------ */
.vet-ficha-dialog.el-dialog { border-radius: 10px; overflow: hidden; } // match radius global (era 14px, unico outlier)
.vet-ficha-dialog .el-dialog__header { margin-right: 0; padding: 0; }
.vet-ficha-dialog .el-dialog__headerbtn { z-index: 3; top: 14px; right: 14px; }
/* El cuerpo scrollea; el header del paciente queda sticky arriba. */
.vet-ficha-dialog .el-dialog__body { padding: 0 20px 16px; max-height: 82vh; overflow-y: auto; }
@media (max-width: 1180px) {
    .vet-ficha-dialog.el-dialog { width: 94vw !important; }
}

/* --- 38.2 Header persistente del paciente (sticky dentro del diálogo) ------------------------ */
.vet-ficha__header {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 44px 16px 20px;            /* espacio a la derecha para la X de cerrar */
    margin: 0 -20px;                          /* sangra al ancho completo del diálogo */
    background: linear-gradient(180deg, var(--mn-primary-lt, #E0F2F1), #fff);
    border-bottom: 1px solid var(--df-line, #E3EAEE);
}
.vet-ficha__avatar {
    width: 46px; height: 46px; border-radius: 12px;
    background: #fff;
    border: 1px solid var(--df-line, #E3EAEE);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; flex-shrink: 0;
}
.vet-ficha__id { min-width: 0; }
.vet-ficha__name { font-size: 18px; font-weight: 800; color: var(--df-ink, #263238); line-height: 1.15; text-wrap: balance; }
.vet-ficha__sub { font-size: 12.5px; color: var(--df-muted, #5A7280); }
.vet-ficha__owner {
    margin-left: auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    padding-left: 14px;
    text-align: right;
}
.vet-ficha__owner-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--df-muted, #5A7280); }
.vet-ficha__owner-name { font-size: 13.5px; font-weight: 700; color: var(--df-ink, #263238); }
.vet-ficha__owner-num { font-size: 12px; color: var(--df-muted, #5A7280); font-variant-numeric: tabular-nums; }

/* --- 38.3 Pestañas: limpias, teal activo, hit-area ≥40px ------------------------------------- */
.vet-ficha__tabs { margin-top: 6px; }
.vet-ficha__tabs .el-tabs__header { margin-bottom: 14px; }
.vet-ficha__tabs .el-tabs__item {
    height: 44px; line-height: 44px;          /* ≥40px de área táctil */
    font-size: 13.5px; font-weight: 600;
    color: var(--df-muted, #5A7280);
}
.vet-ficha__tabs .el-tabs__item.is-active { color: var(--mn-primary, #009688); }
.vet-ficha__tabs .el-tabs__active-bar { background-color: var(--mn-primary, #009688); }
.vet-ficha__tabs .el-tabs__item:hover { color: var(--df-health, #00796B); }
.vet-ficha__tab { display: inline-flex; align-items: center; gap: 6px; }
.vet-ficha__tab-ico { font-size: 14px; line-height: 1; }

/* --- 38.4 Resumen: grid 2 columnas + tarjetas (radios concéntricos) -------------------------- */
.vet-ficha__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 860px) {
    .vet-ficha__grid { grid-template-columns: 1fr; }
}
.vet-ficha__card {
    background: var(--mn-surface, #fff);
    border: 1px solid var(--df-line, #E3EAEE);
    border-radius: 14px;                      /* externo: interno (10px de las dd) + ~padding */
    padding: 16px;
}
.vet-ficha__card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    color: var(--df-health, #00796B);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--df-line, #E3EAEE);
}

/* Señal de seguridad (alergias / condiciones crónicas): ámbar, alto contraste (igual que §35). */
.vet-ficha__alert {
    display: flex; gap: 8px;
    background: var(--df-warn-soft, #FEF3C7);
    border: 1px solid var(--mn-warning, #D97706);
    border-radius: 10px;
    padding: 9px 11px;
    margin-bottom: 12px;
    font-size: 12px; line-height: 1.45;
    color: #7A4100;
}
.vet-ficha__alert i { color: var(--mn-warning, #D97706); margin-top: 2px; }
.vet-ficha__alert strong { color: #7A4100; }
.vet-ficha__noalert { font-size: 11.5px; color: var(--df-muted, #5A7280); margin-bottom: 12px; font-style: italic; }

/* Datos clave: definición compacta de 2 columnas, números tabulares para fechas/peso/teléfono. */
.vet-ficha__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.vet-ficha__facts > div { display: flex; flex-direction: column; gap: 2px; }
.vet-ficha__facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--df-muted, #5A7280); margin: 0; }
.vet-ficha__facts dd { font-size: 13px; font-weight: 600; color: var(--df-ink, #263238); margin: 0; }
.vet-ficha__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Fila de acciones rápidas del Resumen. */
.vet-ficha__actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--df-line, #E3EAEE);
}
.vet-ficha__actions .el-button + .el-button { margin-left: 0; } /* gap de flex = única separación */
.vet-ficha__actions .el-button { min-height: 38px; font-weight: 600; transition: transform .12s ease; }
.vet-ficha__actions .el-button:active { transform: scale(.96); }

/* --- 38.5 Línea de tiempo de la cita (solo lectura) — appointments/index.vue ---------------- */
.vet-cita-steps {
    display: flex; align-items: flex-start;
    gap: 0;
    margin: 4px 0 14px;
}
.vet-cita-step {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    text-align: center;
}
/* Conector entre pasos. */
.vet-cita-step::before {
    content: "";
    position: absolute;
    top: 12px; left: -50%; width: 100%; height: 2px;
    background: var(--df-line, #E3EAEE);
    z-index: 0;
}
.vet-cita-step:first-child::before { display: none; }
.vet-cita-step__dot {
    position: relative; z-index: 1;
    width: 26px; height: 26px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: #fff;
    border: 2px solid var(--df-line, #E3EAEE);
    color: var(--df-muted, #5A7280);
    font-variant-numeric: tabular-nums;
}
.vet-cita-step__label { font-size: 11px; font-weight: 600; color: var(--df-muted, #5A7280); line-height: 1.2; }
/* Paso completado. */
.vet-cita-step.is-done .vet-cita-step__dot { background: var(--df-health, #00796B); border-color: var(--df-health, #00796B); color: #fff; }
.vet-cita-step.is-done::before { background: var(--df-health, #00796B); }
.vet-cita-step.is-done .vet-cita-step__label { color: var(--df-ink, #263238); }
/* Paso actual (resaltado teal con halo). */
.vet-cita-step.is-current .vet-cita-step__dot {
    background: var(--mn-primary, #009688);
    border-color: var(--mn-primary, #009688);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .18);
}
.vet-cita-step.is-current .vet-cita-step__label { color: var(--mn-primary, #009688); font-weight: 700; }
/* Estado final no-feliz (cancelada / no vino): primer paso en rojo tenue. */
.vet-cita-step.is-off .vet-cita-step__dot { border-color: var(--mn-danger, #DC2626); color: var(--mn-danger, #DC2626); }
.vet-cita-step.is-off .vet-cita-step__label { color: var(--mn-danger, #DC2626); }
.vet-cita-steps--cancelled .vet-cita-step__label,
.vet-cita-steps--no_show .vet-cita-step__label { opacity: .7; }

/* --- 38.6 Tarjeta de evolución de vitales (migrada del scoped de pets/index.vue) ------------ */
.vet-ui .vet-vitals-card,
.vet-ficha-dialog .vet-vitals-card {
    background: #fff;
    border: 1px solid var(--df-line, #e4e7ed);
    border-radius: 12px;
    padding: 14px 16px;
}
.vet-ui .vet-vitals-title,
.vet-ficha-dialog .vet-vitals-title {
    font-size: 14px; font-weight: 600;
    color: var(--df-ink, #303133);
    margin-bottom: 8px;
}
.vet-ui .vet-vitals-slot,
.vet-ficha-dialog .vet-vitals-slot { min-height: 220px; }
.vet-ui .vet-hist-note,
.vet-ficha-dialog .vet-hist-note { font-size: 12px; color: var(--df-muted, #909399); }
.vet-ui .vet-hist-note a,
.vet-ficha-dialog .vet-hist-note a { font-weight: 600; }
.vet-ui .vet-vitals-empty,
.vet-ficha-dialog .vet-vitals-empty {
    color: var(--df-muted, #909399);
    font-size: 13px; text-align: center;
    padding: 80px 0;
    background: #fafcfd;
    border-radius: 8px;
    border: 1px dashed var(--df-line, #e4e7ed);
}

/* ===== §40 Botones — unificación GLOBAL del lenguaje de acción ===============================
   Antes convivían 3 colores para "acción primaria": .btn-custom negro (setting.css), .btn-primary
   teal (brand-overrides.css) y .btn-info cian (#5bc0de, Bootstrap). Acá se promueve a TODO el admin
   la decisión que §39 ya había tomado solo para vet: primaria = negro (var(--mn-ink), igual que el
   botón "Nuevo/Exportar"), e info = slate (acción secundaria, sin cian fuera de paleta). Los
   semánticos (success/danger/warning/secondary) ya eran coherentes globalmente y no se tocan.
   `!important` por la regla de theming del proyecto (ganarle a brand-overrides/BS/EP en `.btn-*`).
   La regla `.vet-ui .btn-xs.*` de §39 es más específica y sigue igual (coincide: también negro). */
.btn.btn-primary {
    background-color: var(--mn-ink) !important;
    border-color: var(--mn-ink) !important;
    color: #fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: color-mix(in srgb, var(--mn-ink) 85%, black) !important;
    border-color: color-mix(in srgb, var(--mn-ink) 85%, black) !important;
    color: #fff !important;
}
.btn.btn-info {
    background-color: #5A6B7B !important;
    border-color: #5A6B7B !important;
    color: #fff !important;
}
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active {
    background-color: #475968 !important;
    border-color: #475968 !important;
    color: #fff !important;
}

/* Acciones de agenda: Vitales debe leerse como clínico/informativo y
   Reprogramar como acción pendiente; no deben confundirse entre sí ni con
   Ticket/Editar, que usan btn-info en el tema global. */
.btn.btn-clinica-vitals {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.btn.btn-clinica-vitals:hover,
.btn.btn-clinica-vitals:focus,
.btn.btn-clinica-vitals:active {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}
.btn.btn-clinica-reschedule {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.btn.btn-clinica-reschedule:hover,
.btn.btn-clinica-reschedule:focus,
.btn.btn-clinica-reschedule:active {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}

/* Element Plus: el-button PRIMARY como botón de acción = negro, igual que .btn-custom/.btn-primary
   (así "Guardar" de diálogos matchea el toolbar). Se overridea vía las vars --el-button-* del
   componente; NO se toca --el-color-primary (switches, tabs, activo, links siguen teal de acento). */
.el-button.el-button--primary {
    --el-button-bg-color: var(--mn-ink); --el-button-border-color: var(--mn-ink); --el-button-text-color: #fff;
    --el-button-hover-bg-color: color-mix(in srgb, var(--mn-ink) 85%, black); --el-button-hover-border-color: color-mix(in srgb, var(--mn-ink) 85%, black); --el-button-hover-text-color: #fff;
    --el-button-active-bg-color: color-mix(in srgb, var(--mn-ink) 78%, black); --el-button-active-border-color: color-mix(in srgb, var(--mn-ink) 78%, black);
    background-color: var(--mn-ink) !important; border-color: var(--mn-ink) !important; color: #fff !important;
}
.el-button.el-button--primary:hover, .el-button.el-button--primary:focus, .el-button.el-button--primary:active {
    background-color: color-mix(in srgb, var(--mn-ink) 85%, black) !important; border-color: color-mix(in srgb, var(--mn-ink) 85%, black) !important; color: #fff !important;
}
/* `plain` = variante OUTLINE por definición de EP. Se usa a propósito en toggles de vista
   (Mostrar filtros / Mostrar/Ocultar columnas): deben pesar MENOS que las acciones sólidas.
   Outline ink sobre fondo casi-blanco; se rellena a negro sólido en hover. Especificidad
   (0,3,0) le gana a la regla sólida (0,2,0) de arriba para los botones plain. */
.el-button.el-button--primary.is-plain {
    --el-button-bg-color: color-mix(in srgb, var(--mn-ink) 8%, #fff); --el-button-border-color: color-mix(in srgb, var(--mn-ink) 40%, #fff); --el-button-text-color: var(--mn-ink);
    --el-button-hover-bg-color: var(--mn-ink); --el-button-hover-border-color: var(--mn-ink); --el-button-hover-text-color: #fff;
    --el-button-active-bg-color: color-mix(in srgb, var(--mn-ink) 85%, black); --el-button-active-border-color: color-mix(in srgb, var(--mn-ink) 85%, black);
    background-color: color-mix(in srgb, var(--mn-ink) 8%, #fff) !important; border-color: color-mix(in srgb, var(--mn-ink) 40%, #fff) !important; color: var(--mn-ink) !important;
}
/* Feedback del toggle = RELLENO negro, no anillo: hover (mouse) y focus-visible (teclado). */
.el-button.el-button--primary.is-plain:hover, .el-button.el-button--primary.is-plain:focus-visible {
    background-color: var(--mn-ink) !important; border-color: var(--mn-ink) !important; color: #fff !important;
}
/* Toggles plain SIN anillo de foco en ningún estado: ni outline ni glow. El halo que se veía eran
   DOS capas — mi outline teal + el box-shadow de brand-overrides — y EP marca este botón como
   :focus-visible tras click (tiene el-tooltip__trigger). Se mata todo; el relleno negro de arriba
   es el indicador a11y (teclado) sin necesidad de anillo. (0,4,x) + !important gana a todo. */
.el-button.el-button--primary.is-plain:focus,
.el-button.el-button--primary.is-plain:focus-visible {
    outline: none !important; box-shadow: none !important;
}
/* Botones primary SÓLIDOS (no-plain): EP inyecta en runtime `.el-button--primary:focus` con outline
   azul legacy (#66b1ff) que carga DESPUÉS y ganaba. Lo matamos en mouse-focus y reponemos anillo
   teal SOLO en :focus-visible (a11y teclado). Doble clase (0,3,x) + !important para ganarle a EP. */
.el-button.el-button--primary:not(.is-plain):focus:not(:focus-visible) {
    outline: none !important;
}
.el-button.el-button--primary:not(.is-plain):focus-visible {
    outline: 2px solid var(--mn-primary) !important; outline-offset: 1px;
}

/* ===== §41 Badges de estado "suaves" (listas de comprobantes) ================================
   Estado tintado (fondo claro + texto del color + borde sutil) en vez de sólido texto-blanco.
   Más liviano/moderno sin perder el semáforo semántico. Scoped a `.doc-status-badge` para NO
   alterar los badges del resto del admin (rollout a otras listas fiscales si se aprueba).
   `.badge.doc-status-badge.bg-*` (0,3,0)+!important gana a la utilidad `.bg-*` de Bootstrap. */
.badge.doc-status-badge {
    font-weight: 600; border: 1px solid transparent; padding: .3em .55em; letter-spacing: .01em;
    border-radius: 4px !important; /* medio cuadrado (rectángulo suave), no pill */
}
/* Orden IMPORTA: `bg-secondary`/`bg-dark` (defaults estáticos en varias vistas) van PRIMERO; los
   semánticos después → si un badge trae `bg-secondary` estático + `bg-success` dinámico, gana el
   semántico por orden de fuente (misma especificidad 0,3,0). */
.badge.doc-status-badge.bg-secondary { background: color-mix(in srgb, var(--bs-secondary,#6c757d) 12%, #fff) !important; color: color-mix(in srgb, var(--bs-secondary,#6c757d) 78%, #000) !important; border-color: color-mix(in srgb, var(--bs-secondary,#6c757d) 8%, #fff) !important; }
.badge.doc-status-badge.bg-dark      { background: color-mix(in srgb, var(--mn-ink,#263238) 12%, #fff) !important;      color: var(--mn-ink,#263238) !important;                                    border-color: color-mix(in srgb, var(--mn-ink,#263238) 8%, #fff) !important; }
.badge.doc-status-badge.bg-info      { background: color-mix(in srgb, var(--bs-info,#0dcaf0) 15%, #fff) !important;      color: color-mix(in srgb, var(--bs-info,#0dcaf0) 68%, #000) !important;      border-color: color-mix(in srgb, var(--bs-info,#0dcaf0) 9%, #fff) !important; }
.badge.doc-status-badge.bg-warning   { background: color-mix(in srgb, var(--bs-warning,#ffc107) 22%, #fff) !important;   color: #7a5a00 !important;                                                  border-color: color-mix(in srgb, var(--bs-warning,#ffc107) 14%, #fff) !important; }
.badge.doc-status-badge.bg-success   { background: color-mix(in srgb, var(--bs-success,#198754) 13%, #fff) !important;   color: color-mix(in srgb, var(--bs-success,#198754) 72%, #000) !important;   border-color: color-mix(in srgb, var(--bs-success,#198754) 8%, #fff) !important; }
.badge.doc-status-badge.bg-danger    { background: color-mix(in srgb, var(--bs-danger,#dc3545) 13%, #fff) !important;    color: color-mix(in srgb, var(--bs-danger,#dc3545) 74%, #000) !important;    border-color: color-mix(in srgb, var(--bs-danger,#dc3545) 8%, #fff) !important; }
/* Subtítulo del tipo de documento: más tenue y compacto (ya lleva .text-muted en el template). */
.doc-type-sub { font-size: .72rem; letter-spacing: .01em; }

/* ===== §39 Veterinaria — botones unificados con el lenguaje general ==========================
   Problema: los .btn-xs contextuales de vet usaban colores Bootstrap crudos (btn-info = cian
   #40B8F5 fuera de paleta, dos teals distintos en primary vs .btn-custom, hover que se aplanaba
   a un color sólido distinto a la familia general). Acá los igualamos a la familia del botón
   general `.btn.btn-custom` (teal #00796B, hover = darken ~10%, suave). "Editar" pasa de cian a
   un neutro slate (acción secundaria, no compite con el teal). Solo COLOR/HOVER; tamaño/hit-area
   ya los da §37. Scoped a `.vet-ui` → farmacia byte-for-byte intacta. `!important` solo para
   ganarle al `!important` de Cuba/Bootstrap en `.btn-*` (regla de theming del proyecto). */
.vet-ui .btn.btn-xs {
    border-radius: 8px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Primaria / positiva → negro idéntico al botón general (.btn-custom = var(--mn-ink)) */
.vet-ui .btn.btn-xs.btn-primary { background-color:var(--mn-ink) !important; border-color:var(--mn-ink) !important; color:#fff !important; }
.vet-ui .btn.btn-xs.btn-primary:hover,
.vet-ui .btn.btn-xs.btn-primary:focus,
.vet-ui .btn.btn-xs.btn-primary:active { background-color:color-mix(in srgb, var(--mn-ink) 85%, black) !important; border-color:color-mix(in srgb, var(--mn-ink) 85%, black) !important; color:#fff !important; }

/* Éxito (cobrar / confirmar / restaurar) → verde coherente */
.vet-ui .btn.btn-xs.btn-success { background-color:#2E9E5B !important; border-color:#2E9E5B !important; color:#fff !important; }
.vet-ui .btn.btn-xs.btn-success:hover,
.vet-ui .btn.btn-xs.btn-success:focus,
.vet-ui .btn.btn-xs.btn-success:active { background-color:#25814A !important; border-color:#25814A !important; color:#fff !important; }

/* Advertencia → ámbar legible con texto blanco */
.vet-ui .btn.btn-xs.btn-warning { background-color:#B5740A !important; border-color:#B5740A !important; color:#fff !important; }
.vet-ui .btn.btn-xs.btn-warning:hover,
.vet-ui .btn.btn-xs.btn-warning:focus,
.vet-ui .btn.btn-xs.btn-warning:active { background-color:#985F09 !important; border-color:#985F09 !important; color:#fff !important; }

/* Peligro (eliminar / desactivar) → rojo consistente */
.vet-ui .btn.btn-xs.btn-danger { background-color:#DC3F33 !important; border-color:#DC3F33 !important; color:#fff !important; }
.vet-ui .btn.btn-xs.btn-danger:hover,
.vet-ui .btn.btn-xs.btn-danger:focus,
.vet-ui .btn.btn-xs.btn-danger:active { background-color:#BE3328 !important; border-color:#BE3328 !important; color:#fff !important; }

/* "Editar" (era btn-info cian) → neutro slate: acción secundaria que no compite con el teal */
.vet-ui .btn.btn-xs.btn-info { background-color:#5A6B7B !important; border-color:#5A6B7B !important; color:#fff !important; }
.vet-ui .btn.btn-xs.btn-info:hover,
.vet-ui .btn.btn-xs.btn-info:focus,
.vet-ui .btn.btn-xs.btn-info:active { background-color:#475968 !important; border-color:#475968 !important; color:#fff !important; }

/* Secundario claro (btn-light / btn-secondary) → gris suave con texto oscuro y hover sutil */
.vet-ui .btn.btn-xs.btn-light,
.vet-ui .btn.btn-xs.btn-secondary { background-color:#EEF1F4 !important; border-color:#DDE3E8 !important; color:#3A4754 !important; }
.vet-ui .btn.btn-xs.btn-light:hover,
.vet-ui .btn.btn-xs.btn-secondary:hover { background-color:#E1E6EB !important; border-color:#CBD3DA !important; color:#2A3540 !important; }

/* --- Element Plus en vet ---------------------------------------------------------------------
   El `el-button` primary/success en variante `plain` renderiza el texto del MISMO color que el
   fondo → label ilegible en reposo (recién se ve blanco al hacer hover). Lo unificamos al botón
   general: relleno sólido + texto blanco SIEMPRE, hover darken ~10%. Cubrimos el contenido in-page
   (`.vet-ui`) y los diálogos teleportados de la ficha (`.vet-ficha-dialog`, que sale del .vet-ui).
   Override por las CSS vars de EP (--el-button-*) + propiedades directas con !important. */
.vet-ui .el-button--primary,
.vet-ui .el-button--primary.is-plain,
.vet-ficha-dialog .el-button--primary,
.vet-ficha-dialog .el-button--primary.is-plain {
    --el-button-bg-color:#00796B; --el-button-border-color:#00796B; --el-button-text-color:#fff;
    --el-button-hover-bg-color:#005f54; --el-button-hover-border-color:#005f54; --el-button-hover-text-color:#fff;
    --el-button-active-bg-color:#005f54; --el-button-active-border-color:#005f54;
    background-color:#00796B !important; border-color:#00796B !important; color:#fff !important;
}
.vet-ui .el-button--primary:hover, .vet-ui .el-button--primary:focus, .vet-ui .el-button--primary:active,
.vet-ficha-dialog .el-button--primary:hover, .vet-ficha-dialog .el-button--primary:focus, .vet-ficha-dialog .el-button--primary:active {
    background-color:#005f54 !important; border-color:#005f54 !important; color:#fff !important;
}
.vet-ui .el-button--success,
.vet-ui .el-button--success.is-plain,
.vet-ficha-dialog .el-button--success,
.vet-ficha-dialog .el-button--success.is-plain {
    --el-button-bg-color:#2E9E5B; --el-button-border-color:#2E9E5B; --el-button-text-color:#fff;
    --el-button-hover-bg-color:#25814A; --el-button-hover-border-color:#25814A; --el-button-hover-text-color:#fff;
    --el-button-active-bg-color:#25814A; --el-button-active-border-color:#25814A;
    background-color:#2E9E5B !important; border-color:#2E9E5B !important; color:#fff !important;
}
.vet-ui .el-button--success:hover, .vet-ui .el-button--success:focus, .vet-ui .el-button--success:active,
.vet-ficha-dialog .el-button--success:hover, .vet-ficha-dialog .el-button--success:focus, .vet-ficha-dialog .el-button--success:active {
    background-color:#25814A !important; border-color:#25814A !important; color:#fff !important;
}

/* ===== §40 Reporte "Ventas por categoría" (rentabilidad) ====================================
   UI del reporte: barra de filtros, tarjetas KPI y tabla con números tabulares. Scoped a `.sbc`
   (la vista raíz del reporte) → no afecta a otras vistas. */
.sbc-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:16px; }
.sbc-field { display:flex; flex-direction:column; gap:4px; min-width:160px; }
.sbc-field--wide { min-width:240px; flex:1; }
.sbc-field label { font-size:11px; font-weight:600; color:#5A6B7B; text-transform:uppercase; letter-spacing:.3px; }
.sbc-actions { display:flex; gap:8px; align-items:flex-end; margin-left:auto; }

.sbc-kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px; }
@media (max-width:768px){ .sbc-kpis { grid-template-columns:repeat(2, 1fr); } }
.sbc-kpi { background:#fff; border:1px solid #e7edf1; border-radius:10px; padding:12px 14px;
    box-shadow:0 1px 2px rgba(16,24,40,.05); display:flex; flex-direction:column; gap:3px;
    transition:box-shadow .2s cubic-bezier(0.2,0,0,1), transform .2s cubic-bezier(0.2,0,0,1); }
// hover-lift consistente con .dash-kpi/.cdoc-card (antes esta card quedaba estatica)
.sbc-kpi:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(16,24,40,.10); }
.sbc-kpi__label { font-size:11px; color:#5A6B7B; text-transform:uppercase; letter-spacing:.3px; }
.sbc-kpi__value { font-size:20px; font-weight:700; color:#1f2d3d; font-variant-numeric:tabular-nums; }
.sbc-kpi__value--green { color:#157347; }
.sbc-kpi__value--sm { font-size:15px; }
/* Modal de detalle del reporte: subcategorías al costado + productos al lado */
.sbc-modal-md { display:flex; gap:16px; align-items:flex-start; }
.sbc-modal-side { flex:0 0 240px; border:1px solid #eef1f4; border-radius:8px; overflow:hidden; }
.sbc-modal-side__title { padding:9px 14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#5b6b7b; background:#f7f9fa; border-bottom:1px solid #eef1f4; }
.sbc-modal-side .cat-item__count { background:transparent; color:#157347; font-weight:600; font-size:12px; padding:0; min-width:0; border-radius:0; font-variant-numeric:tabular-nums; }
.sbc-modal-side .cat-item.active .cat-item__count { background:transparent; color:#0b5e3a; }
.sbc-modal-detail { flex:1 1 auto; min-width:0; }
@media (max-width: 575px) { .sbc-modal-md { flex-direction:column; } .sbc-modal-side { flex-basis:auto; width:100%; } }

/* ====== §41 CRUD categorías (maestro-detalle) ====== */
.cat-card { min-height: 440px; }
.cat-list { list-style:none; margin:0; padding:0; }
.cat-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; min-height:44px;
  border-bottom:1px solid #eef1f4; cursor:pointer;
  transition: background-color .15s ease;
}
.cat-item:hover { background:#f4f8f8; }
.cat-item.active { background: color-mix(in srgb, var(--mn-primary, #009688) 12%, #fff); box-shadow: inset 3px 0 0 var(--mn-primary, #009688); }
.cat-item__name { flex:1 1 auto; font-weight:600; color:#1f2d3d; }
.cat-item--sub { padding-left:24px; }
.cat-item--sub .cat-item__name { font-weight:500; }
.cat-item--sub::before { content:'\21B3'; color:#b6c0ca; margin-right:2px; }
.cat-item__count {
  flex:0 0 auto; min-width:26px; text-align:center;
  background:#e9eef2; color:#5b6b7b; border-radius:11px; padding:1px 9px; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cat-item.active .cat-item__count { background: var(--mn-primary, #009688); color:#fff; }
.cat-item__actions { flex:0 0 auto; display:inline-flex; gap:12px; opacity:.55; transition:opacity .15s ease; }
.cat-item:hover .cat-item__actions { opacity:1; }
.cat-item__actions a { color:#8a96a3; font-size:14px; }
.cat-item__actions a:hover { color:var(--mn-primary, #009688); }
.cat-item__chev { flex:0 0 auto; color:#c2cbd4; font-size:14px; }
.cat-empty { padding:22px 16px; color:#9aa5b1; font-size:13px; text-align:center; }
.cat-placeholder { padding:52px 24px; text-align:center; color:#9aa5b1; }
.cat-placeholder i { font-size:30px; opacity:.55; }
.cat-placeholder p { margin-top:12px; font-size:14px; }

/* ====== §42 Panel Clínica ====== */
.clinica-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.clinica-kpi { border:1px solid #eef1f4; border-radius:10px; padding:14px 16px; background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    transition:box-shadow .2s cubic-bezier(0.2,0,0,1), transform .2s cubic-bezier(0.2,0,0,1); }
// hover-lift consistente con .dash-kpi/.cdoc-card/.sbc-kpi (antes plana, sin shadow ni hover)
.clinica-kpi:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(16,24,40,.10); }
.clinica-kpi__label { display:block; font-size:12px; color:#5b6b7b; text-transform:uppercase; letter-spacing:.03em; }
.clinica-kpi__value { display:block; font-size:24px; font-weight:700; color:#1f2d3d; font-variant-numeric:tabular-nums; margin-top:4px; }
.clinica-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.clinica-tile {
  display:flex; flex-direction:column; gap:4px; padding:18px; border:1px solid #eef1f4; border-radius:10px;
  background:#fff; color:#1f2d3d; text-decoration:none; cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.clinica-tile:hover { border-color:var(--mn-primary, #009688); box-shadow:0 2px 10px rgba(13,148,136,.08); color:#1f2d3d; }
.clinica-tile > i { font-size:22px; color:var(--mn-primary, #009688); margin-bottom:4px; }
.clinica-tile__title { font-weight:600; }
.clinica-tile__desc { font-size:12px; color:#8a96a3; }
@media (max-width: 575px) { .clinica-kpis { grid-template-columns:1fr; } }

/* Badges de estado de cita (clon MQN) */
.clinica-state { font-weight:600; font-size:11px; padding:4px 9px; border-radius:10px; }
.clinica-state.st-pa { background:#e7e9fb; color:#4a4fd6; }   /* Pagada */
.clinica-state.st-at { background:#d8f3e3; color:#157347; }   /* Atendido */
.clinica-state.st-en { background:#fff3cd; color:#a07d00; }   /* En consulta */
.clinica-state.st-re { background:#e9eef2; color:#5b6b7b; }   /* Reservada */
.clinica-state.st-ca { background:#fde2e2; color:#c23030; }   /* Cancelado */
.clinica-state.st-gr { background:#e3f0ff; color:#1170c4; }   /* Gratuito */
.clinica-citas .btn-xs + .btn-xs { margin-left:5px; }
.clinica-citas .agenda-actions .btn-xs + .btn-xs { margin-left:5px; }
/* El nombre del paciente es un <a> sin clase → heredaba el vendor `a{color:#ccc}`
   de Cuba (casi invisible). Lo forzamos a ink como el resto de la fila. */
.clinica-citas tbody a { color: var(--mn-ink); font-weight: 500; }
.clinica-citas tbody a:hover { color: var(--mn-primary-dk); }

/* Barra de filtros (Lista) — toolbar inline */
.clinica-filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#f8fafc; border:1px solid #eef1f4; border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.clinica-filter-by { display:flex; align-items:center; gap:8px; }
.clinica-filter-by .cf-label { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    color:#5b6b7b; white-space:nowrap; }
.clinica-filter-by .cf-label i { color:#9aa6b2; }
/* setting.css fuerza .el-select{width:100%!important}; lo encajamos en un wrap de ancho fijo */
.clinica-filters .cf-select-wrap { width:172px; }
.clinica-filters .cf-search { flex:1 1 240px; min-width:220px; max-width:420px; }
/* alto consistente entre el select y la búsqueda */
.clinica-filters .cf-select-wrap .el-select__wrapper,
.clinica-filters .cf-search .el-input__wrapper { min-height:38px; border-radius:8px; }
@media (max-width: 575px) {
    .clinica-filters { align-items:stretch; }
    .clinica-filter-by, .clinica-filters .cf-select-wrap, .clinica-filters .cf-search { width:100%; max-width:none; }
    .clinica-filter-by { flex-wrap:wrap; }
}

/* Ticket de cita en modal */
.cita-ticket-dialog .el-dialog__body { padding:8px 12px; }
.cita-ticket-frame { width:100%; height:62vh; min-height:380px; border:1px solid #e6ebf2; border-radius:6px; background:#fff; }
.cita-ticket-dialog .el-dialog__footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.cita-ticket-dialog .el-dialog__footer .btn { margin:0; }
/* Cerrar = acción de descarte, sutil y distinta del 'Sin cobro' */
.cita-ticket-close { background:transparent; border:1px solid #cfd6de; color:#5b6b7b; }
.cita-ticket-close:hover { background:#eef1f4; border-color:#b9c2cc; color:#3a4654; }

/* ===== Página de historia clínica (calca MQN) ===== */
.clinica-history .ph-title { color:#3a4a5b; font-weight:600; }
.ph-patient { display:flex; align-items:center; gap:22px; justify-content:center; margin-bottom:8px; }
.ph-avatar { font-size:84px; color:#7c93c4; line-height:1; }
.ph-info { font-size:14px; color:#5b6b7b; }
.ph-row { padding:3px 0; }
.ph-lbl { font-weight:700; color:#3a4654; }
.ph-name { font-size:22px; font-weight:600; color:#3a4a5b; margin-top:6px; }
.ph-proc { border:1px solid #e6ebf2; border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.ph-proc__name { font-size:14px; color:#3a4a5b; }
.ph-proc__date { font-size:12px; color:#8a96a3; margin-top:2px; }
/* Timeline historial médico */
.ph-timeline { position:relative; padding-left:18px; }
.ph-timeline::before { content:''; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:#e6ebf2; }
.ph-tl-item { position:relative; margin-bottom:16px; }
.ph-tl-dot { position:absolute; left:-18px; top:4px; width:10px; height:10px; border-radius:999px; background:#c3ccd6; border:2px solid #fff; box-shadow:0 0 0 1px #e6ebf2; }
.ph-tl-date { font-size:12px; color:#8a96a3; margin-bottom:4px; }
.ph-tl-card { border:1px solid #e6ebf2; border-radius:10px; padding:12px; }
.ph-tl-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ph-tl-spec { font-size:15px; color:#3a4a5b; font-weight:500; }
.ph-tl-reason { font-size:13px; color:#5b6b7b; }
@media (max-width: 575px) { .ph-patient { flex-direction:column; gap:10px; } }

/* Detalle de la consulta (Ver detalle) */
.vd-box { background:#f7f9fb; border:1px solid #eef1f4; border-left:3px solid #4a4fd6; border-radius:8px; padding:12px 14px; height:100%; }
.vd-lbl { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#8a96a3; margin-bottom:6px; }
.vd-val { font-size:15px; color:#2b2f36; }
.vd-field { background:#fff; border:1px solid #e6ebf2; border-radius:6px; padding:8px 10px; font-size:13px; color:#3a4654; white-space:pre-wrap; min-height:34px; }
.vd-section { background:#f7f9fb; border:1px solid #eef1f4; border-radius:10px; padding:12px 14px; }
.vd-section__title { font-size:14px; font-weight:600; color:#3a4a5b; border-bottom:2px solid #4a4fd6; padding-bottom:6px; margin-bottom:10px; }
.vd-section__title i { color:#9aa6b2; margin-right:6px; }
.vd-table thead th { background:#3aa0ff; color:#fff; font-size:12px; border:0; }
.vd-table tbody td { font-size:13px; color:#3a4654; }
.vd-table tbody tr:nth-child(even) { background:#f4f7fb; }
.vd-dialog .el-dialog__body { padding-top:10px; }

/* ===== Agenda: toggle Día/Lista/Calendario (calca Vet, paleta EFP) ===== */
.view-toggle { display:inline-flex; border:1px solid #d0d4d9; border-radius:6px; overflow:hidden; }
.vt-btn { background:#fff; border:none; padding:5px 16px; font-size:13px; color:#475569; cursor:pointer; transition:background .12s ease, color .12s ease; }
.vt-btn + .vt-btn { border-left:1px solid #d0d4d9; }
.vt-btn:hover { background:#eef0ff; color:#4a4fd6; }
.vt-btn--on, .vt-btn--on:hover { background:#4a4fd6; color:#fff; }
.cal-month-label { min-width:170px; text-align:center; font-weight:700; font-size:15px; text-transform:capitalize; white-space:nowrap; color:#303133; }
.day-label { font-size:13px; text-transform:capitalize; margin-left:4px; }

/* Vista Día — lista de citas del día */
.agenda-list { display:flex; flex-direction:column; gap:8px; }
.agenda-row { display:grid; grid-template-columns:92px 1fr auto auto; align-items:center; gap:12px; padding:10px 12px;
    border:1px solid #e9edf2; border-left:4px solid #c3ccd6; border-radius:10px; background:#fff; }
.agenda-row--pa { border-left-color:#4a4fd6; }
.agenda-row--en { border-left-color:#e6a23c; }
.agenda-row--at { border-left-color:#67c23a; }
.agenda-row--re { border-left-color:#9aa6b2; }
.agenda-row--ca { border-left-color:#f56c6c; }
.agenda-row--gr { border-left-color:#409eff; }
.agenda-time { font-weight:700; font-size:14px; color:#2b2f36; font-variant-numeric:tabular-nums; white-space:nowrap; }
.agenda-pet { font-size:14px; }
.agenda-actions { display:flex; gap:5px; }

/* Calendario mensual */
.cal { border:1px solid #e4e7ed; border-radius:8px; overflow:hidden; }
.cal-head { display:grid; grid-template-columns:repeat(7, 1fr); background:#f7f9fa; }
.cal-dow { padding:8px; text-align:center; font-size:12px; font-weight:600; color:#909399; border-right:1px solid #eef0f2; }
.cal-dow:last-child { border-right:none; }
.cal-week { display:grid; grid-template-columns:repeat(7, 1fr); }
.cal-cell { min-height:96px; border-top:1px solid #eef0f2; border-right:1px solid #eef0f2; padding:4px 5px; cursor:pointer; transition:background .12s ease; overflow:hidden; }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell:hover { background:#f3f4ff; }
.cal-cell--out { background:#fbfbfc; }
.cal-cell--out .cal-daynum { color:#c0c4cc; }
.cal-cell--today { background:#eef0ff; }
.cal-cell--today .cal-daynum { background:#4a4fd6; color:#fff; border-radius:999px; }
.cal-cell--past .cal-daynum { color:#c0c4cc; }
.cal-daynum { display:inline-block; min-width:20px; height:20px; line-height:20px; text-align:center; font-size:12px; font-weight:600; color:#303133; }
.cal-events { margin-top:2px; }
.cal-event { font-size:10.5px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#475569; cursor:pointer; }
.cal-event:hover { color:#2b2f36; }
.cal-more { font-size:10px; color:#4a4fd6; font-weight:600; cursor:pointer; }
.cal-more:hover { text-decoration:underline; }
.cal-legend { display:inline-flex; align-items:center; gap:4px; color:#909399; }
.cal-dot { display:inline-block; width:7px; height:7px; border-radius:999px; background:#9aa6b2; margin-right:3px; vertical-align:middle; }
.cl-ev--re .cal-dot, .cal-dot.cl-ev--re { background:#9aa6b2; }
.cl-ev--pa .cal-dot, .cal-dot.cl-ev--pa { background:#4a4fd6; }
.cl-ev--en .cal-dot, .cal-dot.cl-ev--en { background:#e6a23c; }
.cl-ev--at .cal-dot, .cal-dot.cl-ev--at { background:#67c23a; }
.cl-ev--ca .cal-dot, .cal-dot.cl-ev--ca { background:#f56c6c; }
.cl-ev--gr .cal-dot, .cal-dot.cl-ev--gr { background:#409eff; }
@media (max-width: 575px) {
    .agenda-row { grid-template-columns:72px 1fr; }
    .agenda-status, .agenda-actions { grid-column:2; justify-self:start; }
    .cal-cell { min-height:72px; }
}

/* Ficha de atención clínica */
.ficha-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.ficha-patient { font-size:18px; font-weight:700; color:#2b2f36; }
.ficha-meta { font-size:13px; color:#7a8694; }
.ficha-vitals { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.ficha-vital label { font-size:12px; color:#5b6b7b; margin-bottom:2px; display:block; }

/* ===== Modal Signos vitales ===== */
.vitals-patient { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#3a4a5b;
    background:#f3f6fb; border:1px solid #e6ebf2; border-radius:8px; padding:8px 12px; margin-bottom:14px; }
.vitals-patient i { color:#7c93c4; }
.vitals-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px 16px; }
.vital-field { display:flex; flex-direction:column; }
.vital-label { font-size:12px; font-weight:600; color:#5b6b7b; margin-bottom:5px; display:flex; align-items:center; gap:6px; min-height:30px; }
.vital-autotag { font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#4a4fd6;
    background:#e7e9fb; border-radius:6px; padding:1px 6px; }
.vital-suffix { font-size:11px; color:#9aa6b2; white-space:nowrap; }
.vital-hint { font-size:11px; font-weight:600; color:#157347; margin-top:4px; }
/* IMC auto: campo de solo lectura, fondo tenue para diferenciar */
.vital-field.is-auto .el-input__wrapper { background:#f7f9fb; }
.vital-field.is-auto .el-input__inner { color:#3a4a5b; font-weight:600; }
/* oculta los steppers nativos de los number inputs (más limpio) */
.vitals-grid input[type=number]::-webkit-outer-spin-button,
.vitals-grid input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.vitals-grid input[type=number] { -moz-appearance:textfield; }
@media (max-width: 575px) { .vitals-grid { grid-template-columns:repeat(2, 1fr); } }
.ficha-history { max-height:520px; overflow:auto; }
.ficha-hist-item { padding:8px 0; border-bottom:1px solid #eef1f4; }
.ficha-hist-item:last-child { border-bottom:0; }
.ficha-hist-date { font-size:12px; font-weight:600; color:#4a4fd6; }
.ficha-hist-reason { font-size:13px; color:#2b2f36; }
.ficha-hist-eval { font-size:12px; color:#7a8694; margin-top:2px; }
.clinica-ficha .right-wrapper .btn + .btn { margin-left:6px; }

/* ===== Wizard Nueva cita ===== */
/* Resumen de contexto (pasos 2-3) */
.cita-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; background:#f5f7fb; border:1px solid #e6ebf2;
    border-radius:10px; padding:8px 12px; margin-bottom:16px; font-size:13px; color:#415061; }
.cita-summary__item { display:inline-flex; align-items:center; gap:5px; }
.cita-summary__item i { color:#7a8694; }
.cita-summary__sep { color:#c3ccd6; }
.cita-summary__time { display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-weight:700; color:#157347;
    background:#d8f3e3; border-radius:8px; padding:2px 10px; }

/* Grupos de turnos */
.cita-slotgroup { margin-bottom:14px; }
.cita-slotgroup__head { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600;
    color:#415061; margin-bottom:8px; }
.cita-slotgroup__head i { color:#7a8694; margin-right:4px; }
.cita-slotgroup__count { font-size:11px; font-weight:600; color:#157347; background:#e7f6ee; border-radius:20px; padding:2px 10px; }
.cita-slots { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:9px; }
.cita-slot { min-height:44px; display:flex; align-items:center; justify-content:center; border:1px solid #d7dce2;
    border-radius:10px; background:#fff; font-size:13px; font-weight:600; color:#3a4654; cursor:pointer;
    font-variant-numeric:tabular-nums; transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.cita-slot:hover:not(.is-taken):not(.is-active) { border-color:#4a4fd6; background:#f3f4ff; }
.cita-slot:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(74,79,214,.35); border-color:#4a4fd6; }
.cita-slot.is-active { background:#4a4fd6; border-color:#4a4fd6; color:#fff; box-shadow:0 2px 6px rgba(74,79,214,.35); }
.cita-slot.is-taken { background:#f3f5f7; color:#aeb7c2; border-color:#e6ebf0; cursor:not-allowed; text-decoration:line-through; }
.cita-slot:active:not(.is-taken) { transform:scale(.96); }

/* Estado vacío */
.cita-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; color:#8a96a3; font-size:13px; text-align:center; }
.cita-empty i { font-size:26px; color:#c3ccd6; }

/* Tarjeta de confirmación (info + turno destacado) */
.cita-confirm { display:flex; align-items:stretch; border:1px solid #e6ebf2; border-radius:14px; overflow:hidden;
    background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.cita-confirm__info { flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.cita-confirm__row { display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.3; }
.cita-confirm__row i { width:18px; text-align:center; color:#9aa6b2; }
.cita-confirm__lbl { color:#64748b; min-width:96px; }
.cita-confirm__val { color:#1f2733; font-weight:600; }
.cita-confirm__time { flex:0 0 132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:#4a4fd6; color:#fff; padding:14px 10px; }
.cita-confirm__time-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.7px; opacity:.85; }
.cita-confirm__time-val { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:575px) {
    .cita-confirm { flex-direction:column; }
    .cita-confirm__time { flex:none; flex-direction:row; gap:10px; padding:10px; }
}

/* Diálogo Nueva cita: ancho cómodo + sin scroll interno */
.cita-dialog { max-width:95vw; }
.cita-dialog .el-dialog__body { padding:12px 22px 4px !important; }
.cita-narrow { max-width:640px; margin:0 auto; }

/* Paso 3: secciones + alta de paciente */
.cita-section-title { font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#64748b;
    border-bottom:1px solid #eef1f4; padding-bottom:6px; margin:14px 0 12px; }
.cita-section-title:first-of-type { margin-top:4px; }
.cita-patient-row { display:flex; gap:8px; align-items:stretch; }
.cita-patient-select { flex:1; min-width:0; }
.cita-newpatient { flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }

/* Layout calendario + turnos (paso 2) */
.cita-sched { display:flex; gap:24px; align-items:stretch; }
.cita-sched__cal { flex:0 0 330px; max-width:330px; }
.cita-sched__slots { flex:1; min-width:0; max-height:66vh; overflow:auto; padding-right:4px; }
.cita-slots-date { font-weight:600; color:#2b2f36; margin-bottom:12px; text-transform:capitalize; font-size:15px; }
.cita-slots-date i { color:#4a4fd6; margin-right:5px; }

/* Calendario propio (header limpio ‹ Mes Año ›) */
.cita-cal { border:1px solid #e6ebf2; border-radius:12px; padding:12px; background:#fff; }
.cita-cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cita-cal__title { font-size:15px; font-weight:700; color:#2b2f36; }
.cita-cal__nav { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid #e0e5ec;
    border-radius:8px; background:#fff; color:#5b6b7b; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.cita-cal__nav:hover:not(:disabled) { background:#eef0ff; border-color:#4a4fd6; color:#4a4fd6; }
.cita-cal__nav:disabled { opacity:.35; cursor:not-allowed; }
.cita-cal__dow { display:grid; grid-template-columns:repeat(7, 1fr); margin-bottom:4px; }
.cita-cal__dow span { text-align:center; font-size:11px; font-weight:600; color:#9aa6b2; padding:4px 0; }
.cita-cal__grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.cita-cal__day { height:38px; display:flex; align-items:center; justify-content:center; border:0; border-radius:9px;
    background:transparent; font-size:13px; font-weight:500; color:#3a4654; cursor:pointer;
    font-variant-numeric:tabular-nums; transition:background .15s ease, color .15s ease; }
.cita-cal__day:hover:not(:disabled) { background:#eef0ff; }
.cita-cal__day:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(74,79,214,.35); }
.cita-cal__day.is-today { font-weight:700; color:#4a4fd6; box-shadow:inset 0 0 0 1px #c7c9f5; }
.cita-cal__day.is-sel { background:#4a4fd6; color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(74,79,214,.35); }
.cita-cal__day.is-sel:hover { background:#4a4fd6; }
.cita-cal__day.is-past { color:#cdd4dc; cursor:not-allowed; }
.cita-cal__day.is-out { visibility:hidden; }

@media (prefers-reduced-motion: reduce) {
    .cita-slot { transition:none; }
    .cita-slot:active:not(.is-taken) { transform:none; }
    .cita-cal__day, .cita-cal__nav { transition:none; }
}
@media (max-width: 767px) {
  .header .dropdown-menu-mobile {
    position: static;
    width: 343px;
    max-width: calc(100vw - 32px);
    height: auto;
    z-index: 1050;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 0 14px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  html.options-user-mobile-opened .header > .header-right { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-start !important; padding:16px !important; width: 100vw; height: 100vh; overflow: visible; background: #f5f7fa; box-sizing:border-box; }
  html.options-user-mobile-opened .header > .header-right > *:not(.dropdown-menu-mobile) { display: none !important; }
  // flex-grow:0 + width fijo (343px, pensado solo para celular angosto) dejaba una franja
  // vacia enorme en anchos "tablet chica" (~480-900px): max-width ya calculaba bien el
  // limite (100vw-32px) pero un ancho fijo nunca CRECE hasta el max-width, solo lo tope
  // hacia arriba. flex-grow:1 + width:100% lo deja ocupar todo el ancho disponible del
  // contenedor (que ya tiene el padding:16px de arriba descontado) en cualquier tamano.
  html.options-user-mobile-opened .header > .header-right .dropdown-menu-mobile { flex: 1 1 auto; width:100%; max-width:calc(100vw - 32px); height:calc(100vh - 32px); margin:0; overflow:visible; }
  .header .dropdown-menu-mobile .user-content { flex: 0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
  .header .dropdown-menu-mobile .close-container-user { font-size:24px; color:#0f172a; cursor:pointer; }
  .header .dropdown-menu-mobile .user-profile-content { display:flex; flex-direction:row-reverse; align-items:center; gap:12px; color:#0f172a; text-decoration:none; }
  .header .dropdown-menu-mobile .profile-info { display:flex; flex:1 1 auto; flex-direction:column; width:auto; max-width:180px; min-width:0; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  // .name/.role NO heredan font-size/line-height del .profile-info de arriba: el vendor
  // tiene ".userbox .name/.role" con su PROPIO font-size+line-height que apunta directo
  // al hijo (gana a la herencia del padre, sea cual sea la especificidad del padre) --
  // mismo bug que ya se arreglo en la variante desktop, portado aca.
  .header .dropdown-menu-mobile .profile-info .name { font-size:13px; line-height:16px; font-weight:600; color:#111827; }
  .header .dropdown-menu-mobile .profile-info .role { font-size:.78rem; line-height:15px; color:#86a0c5; }
  .header .dropdown-menu-mobile .profile-picture { margin:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
  .header .dropdown-menu-mobile .pendingWork-container { flex:0 0 auto; width:100%; box-sizing:border-box; margin:30px 0 16px; padding:1px 10px; list-style:none; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
  .header .dropdown-menu-mobile .pendingWork-container li.li-title-mobile { padding:12px 0 8px; border-bottom:1px solid #e5e7eb; }
  .header .dropdown-menu-mobile .pendingWork-container li.li-title-mobile h4 { margin:0; font-size:16px; color:#111827; }
  .header .dropdown-menu-mobile .pendingWork-container a { min-height:48px; display:flex; align-items:center; justify-content:space-between; color:#111827; font-size:13px; text-decoration:none; }
  .header .dropdown-menu-mobile .pendingWork-container a > span { display:flex; align-items:center; gap:8px; }
  .header .dropdown-menu-mobile .pendingWork-container svg { width:22px; height:22px; color:#111827; }
  .header .dropdown-menu-mobile .log-out-container { flex:0 0 auto; width:100%; margin:0; padding:0; list-style:none; }
  .header .dropdown-menu-mobile .log-out-container li { height:50px; display:flex; align-items:center; padding:0 14px; border-radius:12px; background:#111827 !important; color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
    .ficha-vitals { grid-template-columns:repeat(2, 1fr); } .ficha-head { flex-direction:column; align-items:flex-start; }
    .cita-slots { grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); }
    .cita-summary__time { margin-left:0; }
    .cita-sched { flex-direction:column; } .cita-sched__cal { flex:none; max-width:100%; width:100%; }
    .cita-sched__slots { max-height:none; }
}

.sbc-table .num { font-variant-numeric:tabular-nums; }
.sbc-table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#5A6B7B; border-bottom:2px solid #e7edf1; }
.sbc-table tbody tr:hover { background:#f6fafb; }
.sbc-total td { font-weight:700; border-top:2px solid #d4dde3; background:#f4f8fa; }

/* ====== §43 Flujo del MÉDICO (Clínica) — dashboard doctor + Mis Citas + atención por tabs ======
   Clon nativo del flujo doctor de MQN (panel_doctor / my_appointments / attention.vue). Sin scoped
   styles (convención del repo). Reusa el lenguaje de cards/badges/§42; tokens --mn-*. */

/* ---- Dashboard doctor / Mis Citas (.cdoc-*) ---- */
/* Evolución de un signo vital entre las visitas de un tratamiento (enfermería). */
.nur-trend { font-size:11px; color:#94a3b8; margin-top:2px; line-height:1.4; }
.nur-trend span + span::before { content:" · "; }
.nur-trend b { margin-left:6px; font-weight:700; }

/* NOTA: `.clinica-doctor` acá NO significa "pantalla del doctor" — es el contexto visual del
   vertical Clínica. Lo usan el panel del doctor, Mis Citas, el panel de recepción y Reportes.
   Las clases `.cdoc-*` son UI genérica del vertical (tarjetas KPI, tablas, agenda); si una
   pantalla las usa, necesita este contenedor o se ven sin estilo.
   Deuda: el nombre debería ser neutro (`.clinica-ui`), pero renombrarlo toca 48 selectores de
   este archivo y corresponde a la limpieza de estilos que está pausada. */
.clinica-doctor .cdoc-banner {
  background: linear-gradient(135deg, var(--mn-primary, #009688) 0%, #5b6fe0 100%);
  color:#fff; border-radius:10px; padding:16px 22px; margin-bottom:16px;
  box-shadow:0 4px 14px rgba(13,148,136,.18);
}
.clinica-doctor .cdoc-banner h3 { color:#fff; font-weight:700; }
.clinica-doctor .cdoc-kpis { margin-bottom:6px; }
.clinica-doctor .cdoc-card {
  display:flex; align-items:center; gap:14px;
  border:1px solid #eef1f4; border-radius:12px; background:#fff; padding:16px 18px; margin-bottom:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .18s ease, transform .12s ease, border-color .15s ease;
}
.clinica-doctor .cdoc-card:hover { box-shadow:0 6px 18px rgba(16,24,40,.10); transform:translateY(-2px); }
.clinica-doctor .cdoc-card--click { cursor:pointer; }
.clinica-doctor .cdoc-card--on { border-color:var(--mn-primary, #009688); box-shadow:0 0 0 2px rgba(13,148,136,.18); }
/* chip de icono con acento por métrica */
.clinica-doctor .cdoc-card__icon { flex:none; width:46px; height:46px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:20px; }
.clinica-doctor .cdoc-card--teal   .cdoc-card__icon { background:linear-gradient(135deg,#0d9488,#14b8a6); }
.clinica-doctor .cdoc-card--amber  .cdoc-card__icon { background:linear-gradient(135deg,#d97706,#f59e0b); }
.clinica-doctor .cdoc-card--indigo .cdoc-card__icon { background:linear-gradient(135deg,#4f46e5,#6366f1); }
.clinica-doctor .cdoc-card--green  .cdoc-card__icon { background:linear-gradient(135deg,#15803d,#22c55e); }
.clinica-doctor .cdoc-card__body { min-width:0; }
.clinica-doctor .cdoc-card__label { font-size:12px; font-weight:600; color:#64748b; display:block; }
.clinica-doctor .cdoc-card__value { font-size:26px; font-weight:700; color:#1f2d3d; line-height:1.1;
  font-variant-numeric:tabular-nums; margin:2px 0; }
.clinica-doctor .cdoc-card__sub { font-size:11px; color:#94a3b8; }
.clinica-doctor .cdoc-table { font-variant-numeric:tabular-nums; }
.clinica-doctor .cdoc-table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#5A6B7B; border-bottom:2px solid #e7edf1; }
.clinica-doctor .cdoc-table tbody tr:hover { background:#f6fafb; }
.clinica-doctor .cdoc-table .badge { font-weight:600; font-size:11px; padding:4px 9px; border-radius:10px; color:#fff; }
.clinica-doctor .cdoc-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
/* Acciones rápidas con tokens del theme (no el azul genérico btn-info) */
.clinica-doctor .cdoc-action {
  display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid #e6ebf2; border-radius:10px;
  background:#fff; color:#334155; font-size:13px; font-weight:600; text-decoration:none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.clinica-doctor .cdoc-action:hover { border-color:var(--mn-primary, #009688); background:#f2fbfa;
  box-shadow:0 4px 12px rgba(13,148,136,.12); transform:translateY(-1px); color:#0f766e; }
.clinica-doctor .cdoc-action:active { transform:scale(.98); }
.clinica-doctor .cdoc-action__ic { flex:none; width:32px; height:32px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; background:rgba(13,148,136,.10); color:var(--mn-primary, #009688); font-size:14px; }
.clinica-doctor .btn-xs + .btn-xs { margin-left:5px; }
@media (max-width: 575px) { .clinica-doctor .cdoc-actions { grid-template-columns:1fr; } }

/* ---- Agenda "Citas a atender" (dashboard doctor) ---- */
.clinica-doctor .cdoc-agenda__ic { color:var(--mn-primary, #009688); margin-right:6px; }
.clinica-doctor .cdoc-count { font-size:12px; font-weight:700; color:#fff; background:var(--mn-primary, #009688);
  border-radius:999px; padding:2px 10px; margin-left:8px; vertical-align:middle; }
.clinica-doctor .cdoc-empty { display:flex; flex-direction:column; align-items:center; gap:8px; color:#9aa6b2;
  padding:32px 0; }
.clinica-doctor .cdoc-empty i { font-size:30px; opacity:.6; }
.clinica-doctor .cdoc-agenda { display:flex; flex-direction:column; gap:10px; }
.clinica-doctor .cdoc-appt { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid #e9edf1;
  border-left:4px solid #d7dee6; border-radius:12px; background:#fff; text-decoration:none; color:inherit;
  transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease; }
.clinica-doctor .cdoc-appt.is-link { cursor:pointer; }
.clinica-doctor .cdoc-appt.is-link:hover { box-shadow:0 6px 18px rgba(16,24,40,.1); transform:translateY(-2px); }
/* preferencial: las que están listas para atender resaltadas */
.clinica-doctor .cdoc-appt.is-ready { border-left-color:var(--mn-primary, #009688); background:#f4fbfa; }
.clinica-doctor .cdoc-appt.is-done { opacity:.72; }
.clinica-doctor .cdoc-appt__time { flex:none; width:96px; display:flex; align-items:center; gap:6px; font-weight:700;
  color:#1f2d3d; font-variant-numeric:tabular-nums; font-size:14px; }
.clinica-doctor .cdoc-appt__time i { color:#9aa6b2; font-size:13px; }
.clinica-doctor .cdoc-appt__main { flex:1 1 auto; min-width:0; }
.clinica-doctor .cdoc-appt__patient { font-weight:600; color:#1f2d3d; font-size:14px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.clinica-doctor .cdoc-appt__reason { font-size:12px; color:#7a8694; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clinica-doctor .cdoc-appt__state { flex:none; font-weight:600; font-size:11px; padding:4px 9px; border-radius:10px; color:#fff; }
/* stateClass() de doctor/recepcionista mete bg-warning (#ffc107, amber claro) --
   texto blanco fijo ahi da ~1.6:1 (falla WCAG). Mismo color:#212529 que ya usa
   el fix generico .bg-warning (arriba), con mas especificidad para ganarle al
   color:#fff de estas dos reglas. */
.clinica-doctor .cdoc-table .badge.bg-warning,
.clinica-doctor .cdoc-appt__state.bg-warning { color:#212529; }
.clinica-doctor .cdoc-appt__cta { flex:none; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px;
  color:var(--mn-primary, #009688); }
.clinica-doctor .cdoc-appt.is-done .cdoc-appt__cta { color:#7a8694; }
@media (max-width: 575px) {
  .clinica-doctor .cdoc-appt { flex-wrap:wrap; gap:8px; }
  .clinica-doctor .cdoc-appt__main { flex-basis:100%; order:3; }
}

/* ---- Horario del doctor (Config › Personal) — premium ---- */
.docsched .docsched__head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#3a4a5b; margin:2px 0 12px; }
.docsched .docsched__head i { color:var(--mn-primary, #009688); }
.docsched .docsched__turno { border:1px solid #e6ebf2; border-radius:14px; background:#fff; padding:14px 16px; margin-bottom:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04); transition: box-shadow .18s ease, transform .12s ease; }
.docsched .docsched__turno:hover { box-shadow:0 6px 18px rgba(16,24,40,.08); transform:translateY(-1px); }
.docsched .docsched__turno--am { border-left:3px solid #f59e0b; }
.docsched .docsched__turno--pm { border-left:3px solid #6366f1; }
.docsched .docsched__turno-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.docsched .docsched__chip { flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.docsched .docsched__turno--am .docsched__chip { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.docsched .docsched__turno--pm .docsched__chip { background:linear-gradient(135deg,#6366f1,#818cf8); }
.docsched .docsched__turno-meta { display:flex; flex-direction:column; line-height:1.3; }
.docsched .docsched__turno-name { font-size:14px; font-weight:600; color:#1f2d3d; }
.docsched .docsched__turno-sum { font-size:12px; color:#7a8694; font-variant-numeric:tabular-nums; }
.docsched .docsched__row { display:flex; align-items:flex-end; gap:10px; }
.docsched .docsched__field { flex:1 1 0; min-width:0; }
.docsched .docsched__field label { display:block; font-size:12px; font-weight:500; color:#5b6b7b; margin-bottom:5px; }
.docsched .docsched__field .el-date-editor { width:100%; }
.docsched .docsched__arrow { flex:none; color:#c3ccd6; padding-bottom:9px; }
.docsched .docsched__duration { margin-top:2px; }
.docsched .docsched__duration label { display:block; font-size:12px; font-weight:500; color:#5b6b7b; margin-bottom:5px; }
.docsched .docsched__dur-row { display:flex; align-items:center; gap:10px; }
.docsched .docsched__dur-row .el-input-number { width:150px; }
.docsched .docsched__unit { font-size:13px; color:#7a8694; }
@media (max-width: 480px) { .docsched .docsched__row { flex-wrap:wrap; } .docsched .docsched__arrow { display:none; } }

/* ---- Atención por tabs (.cat-*) ---- */
.clinica-attention .cat-header {
  background: linear-gradient(135deg, var(--mn-primary, #009688) 0%, #5b6fe0 100%);
  border-radius:10px; padding:12px 24px; margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 4px 14px rgba(13,148,136,.18);
  position:sticky; top:8px; z-index:20;
}
.clinica-attention .cat-timer { display:flex; align-items:center; gap:12px; color:#fff; }
.clinica-attention .cat-timer i { font-size:22px; }
.clinica-attention .cat-timer__display { font-size:26px; font-weight:700; font-family:'Courier New', monospace; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.clinica-attention .cat-timer__label { font-size:17px; font-weight:600; }
.clinica-attention .cat-actions { display:flex; gap:10px; align-items:center; }
/* indicador de cambios sin guardar / guardado */
.clinica-attention .cat-savestate { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; }
.clinica-attention .cat-savestate.is-dirty { background:rgba(255,255,255,.22); color:#fff; }
.clinica-attention .cat-savestate.is-saved { background:rgba(255,255,255,.15); color:#eafff8; }
.clinica-attention .cat-savestate--ro { background:rgba(255,255,255,.2); color:#fff; }
/* Atención atendida = solo lectura: neutraliza los controles de edición (deja leer/navegar) */
.clinica-attention.cat-readonly .el-input__wrapper,
.clinica-attention.cat-readonly .el-textarea__inner,
.clinica-attention.cat-readonly .el-select,
.clinica-attention.cat-readonly .el-input-number,
.clinica-attention.cat-readonly .el-slider,
.clinica-attention.cat-readonly .cat-pain-boxes,
.clinica-attention.cat-readonly .el-upload,
.clinica-attention.cat-readonly input[type=file],
.clinica-attention.cat-readonly .el-button--primary { pointer-events:none; opacity:.6; }
.clinica-attention.cat-readonly .cat-del,
.clinica-attention.cat-readonly .adx-doc__actions .text-danger,
.clinica-attention.cat-readonly .cat-sale-table .text-danger { display:none; }
.clinica-attention .cat-h4 { font-size:17px; font-weight:600; color:#1f2d3d; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.clinica-attention .cat-h4__ic { color:var(--mn-primary, #009688); font-size:15px; }
/* link "[+ Nuevo]" al costado del titulo (mismo estilo que Producto/Servicio [+ Nuevo] del POS) */
.clinica-attention .cat-add-new { font-size:13px; font-weight:600; color:var(--mn-primary, #009688); text-decoration:none; }
.clinica-attention .cat-add-new:hover { text-decoration:underline; }
.clinica-attention .cat-tabs { border-radius:8px; }
/* badge de conteo en las pestañas */
.clinica-attention .cat-tabbadge, .clinica-crud .cat-tabbadge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; margin-left:6px; border-radius:999px; background:var(--mn-primary, #009688); color:#fff; font-size:11px; font-weight:700;
  vertical-align:middle; }
/* columna derecha sticky */
.clinica-attention .cat-sidecol { position:sticky; top:88px; }
/* chips de edad/sexo */
.clinica-attention .cat-patient-chips { display:flex; gap:6px; justify-content:center; margin-top:6px; }
.clinica-attention .cat-chip { font-size:12px; font-weight:600; color:#0f766e; background:#e6f6f3; border-radius:999px; padding:2px 10px; }
.clinica-attention .cat-chip--sex { color:#4a4fd6; background:#e7e9fb; }
/* resumen de la atención */
.clinica-attention .cat-sum__row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f0f3f6; font-size:13px; color:#5b6b7b; }
.clinica-attention .cat-sum__row:last-child { border-bottom:0; }
.clinica-attention .cat-sum__row i { color:#9aa6b2; width:16px; text-align:center; margin-right:4px; }
.clinica-attention .cat-sum__row b { color:#1f2d3d; font-variant-numeric:tabular-nums; }
/* botón borrar sutil */
.clinica-attention .cat-del { color:#c23030; border:1px solid #f0d4d4; background:#fff; padding:2px 8px; transition:background .15s ease, border-color .15s ease; }
.clinica-attention .cat-del:hover { background:#fde2e2; border-color:#e7b9b9; }

/* EVA — cajas 0–10 coloreadas (calca attention.vue de MQN) */
.clinica-attention .cat-pain-boxes { display:flex; justify-content:space-between; gap:6px; margin-top:14px; flex-wrap:wrap; }
.clinica-attention .cat-pain-box {
  width:34px; height:34px; line-height:34px; text-align:center; border-radius:5px; cursor:pointer;
  font-weight:700; border:1px solid #ccc; user-select:none; transition: transform .1s ease, box-shadow .1s ease;
}
.clinica-attention .cat-pain-box:hover { transform:translateY(-1px); }
.clinica-attention .cat-pain-box--active { border:2px solid #1f2d3d; box-shadow:0 0 0 2px rgba(31,45,61,.12); }
.clinica-attention .cat-pain-box--green { background:#d4f8d4; color:#1c6b2e; }
.clinica-attention .cat-pain-box--yellow { background:#fff3b0; color:#8a6d00; }
.clinica-attention .cat-pain-box--dark { background:#222; color:#fff; }
.clinica-attention .cat-pain-box--red { background:#f8d4d4; color:#a32626; }

/* Info del paciente */
.clinica-attention .cat-avatar { font-size:64px; color:var(--mn-primary, #009688); opacity:.85; margin:6px 0; }
.clinica-attention .cat-avatar i { display:inline-block; }
.clinica-attention .cat-patient-name { font-weight:700; color:#1f2d3d; }
.clinica-attention .cat-patient-info p { margin-bottom:6px; color:#5b6b7b; font-size:13px; }
.clinica-attention .cat-patient-info b { color:#1f2d3d; }

/* Signos vitales (IMC auto) — reusa el lenguaje del modal de vitales */
.clinica-attention .cat-vital-label { display:block; font-size:12px; font-weight:600; color:#5b6b7b; margin-bottom:3px; min-height:30px; }
.clinica-attention .cat-auto-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; background:#e7e9fb; color:#4a4fd6; border-radius:6px; padding:1px 5px; margin-left:4px; }
.clinica-attention .cat-vital-hint { font-size:11px; font-weight:600; color:#157347; margin-top:2px; }
.clinica-attention .cat-vital-suffix { font-size:11px; color:#9aa6b2; white-space:nowrap; }
.clinica-attention .cat-vital.is-auto .el-input__wrapper { background:#f7f9fb; }
.clinica-attention .cat-vital.is-auto .el-input__inner { color:#3a4a5b; font-weight:600; }
.clinica-attention .cat-vital input[type=number]::-webkit-outer-spin-button,
.clinica-attention .cat-vital input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.clinica-attention .cat-vital input[type=number] { -moz-appearance:textfield; }
/* Ayuda Dx — galería de archivos adjuntos */
.clinica-attention .adx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.clinica-attention .adx-doc { border:1px solid #e6ebf2; border-radius:10px; overflow:hidden; background:#fff;
    transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease; }
.clinica-attention .adx-doc:hover { box-shadow:0 6px 16px rgba(16,24,40,.10); transform:translateY(-2px); border-color:#d7dee8; }
.clinica-attention .adx-doc__thumb { display:flex; align-items:center; justify-content:center; height:110px;
    background:#f5f7fa; overflow:hidden; text-decoration:none; }
.clinica-attention .adx-doc__thumb img { width:100%; height:100%; object-fit:cover; }
.clinica-attention .adx-doc__thumb i { font-size:40px; color:#9aa6b2; }
.clinica-attention .adx-doc__thumb .fa-file-pdf { color:#d6453e; }
.clinica-attention .adx-doc__name { font-size:11px; color:#5b6b7b; padding:6px 8px 0; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
.clinica-attention .adx-doc__actions { display:flex; gap:6px; padding:6px 8px 8px; }
.clinica-attention .adx-doc__actions .btn-xs { padding:2px 7px; font-size:11px; }
/* Ventas — carrito de productos */
.clinica-attention .cat-sale-search { display:flex; }
.clinica-attention .cat-sale-table tfoot td { border-top:2px solid #e7edf1; font-size:14px; }
.clinica-attention .cat-sale-table .btn-xs { padding:2px 7px; }

/* Historial de procedimientos */
.clinica-attention .cat-hist-item { border:1px solid #eef1f4; border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.clinica-attention .cat-hist-title { font-weight:600; color:#1f2d3d; font-size:13px; }
.clinica-attention .cat-hist-date { font-size:11px; color:#8a96a3; }
.clinica-attention .cat-stub-icon { font-size:48px; color:#c7d0d8; }
/* Tarjetas del Historial (Citas / Laboratorio) */
.clinica-attention .cat-histcard { border:1px solid #e6ebf2; border-radius:10px; padding:10px 12px; background:#fff; }
.clinica-attention .cat-histcard__title { font-size:14px; font-weight:600; color:#3a4a5b; margin:0 0 4px; display:flex; align-items:center; flex-wrap:wrap; }
.clinica-attention .cat-histcard__reason { font-size:12px; color:#5b6b7b; margin:0 0 8px; }
.clinica-attention .cat-lab-list { margin:4px 0 0; padding-left:18px; font-size:12px; color:#5b6b7b; }
.clinica-attention .cat-lab-list li { margin:1px 0; }

/* setting.css fuerza .el-select{width:100%!important}; el wrap de ancho fijo no aplica aquí
   porque queremos full-width, pero envolvemos por consistencia con §42. */
.clinica-attention .cat-select-wrap { width:100%; }
.clinica-attention .cat-subtabs .form-label { font-size:12px; color:#5b6b7b; }
.clinica-attention .btn-xs { padding:2px 7px; font-size:11px; }

/* ====== §44 Laboratorio — resultados (modal solicitud + modal resultados + historial) ======
   Estas reglas son GLOBALES (sin scope .clinica-attention) porque los el-dialog se teletransportan
   al <body> y el historial de laboratorio se usa también en la historia clínica del paciente. */
.cat-lab-list { margin:4px 0 0; padding-left:18px; font-size:12px; color:#5b6b7b; }
.cat-lab-list li { margin:2px 0; }
.cat-lab-result { font-size:11px; color:#5b6b7b; background:#f6f8fa; border-radius:6px; padding:4px 8px; margin-top:3px; white-space:pre-wrap; }
.cat-lab-file { display:inline-block; margin-top:3px; font-size:11px; }
/* Labels del modal de solicitud / resultados (dialog teletransportado) */
.cat-lbl { display:block; font-size:12px; font-weight:600; color:#5b6b7b; margin-bottom:4px; }
.cdoc-sub { font-size:13px; color:#5b6b7b; }
.cdoc-form { border-top:1px solid #eef1f4; padding-top:14px; }


/* ====== §46 Tablas → TARJETAS apiladas en móvil ======
   En móvil las tablas anchas (Citas, etc.) desbordan a 800px+ y Estado/Acciones quedan fuera de
   pantalla (el usuario no ve ni puede usar los botones). Con `.mn-cards-mobile` cada fila se apila
   como tarjeta (label:valor vía data-label). Gateado a ≤768px → tabla normal en tablet/desktop. */
@media (max-width: 767.98px) {
  .mn-cards-mobile { min-width:0 !important; border:0; }
  .mn-cards-mobile thead { display:none; }
  .mn-cards-mobile tbody, .mn-cards-mobile tr, .mn-cards-mobile td { display:block; width:auto; }
  .mn-cards-mobile tr {
    border:1px solid #e6ebf2; border-radius:12px; margin-bottom:12px; padding:4px 12px;
    background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.05);
  }
  .mn-cards-mobile td {
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:9px 0 !important; border:0 !important; text-align:left !important; min-width:0;
  }
  .mn-cards-mobile td + td { border-top:1px solid #f2f5f8 !important; }
  .mn-cards-mobile td::before {
    content: attr(data-label); font-weight:600; color:#5b6b7b; font-size:12px;
    flex:0 0 auto; white-space:nowrap;
  }
  .mn-cards-mobile td > * { text-align:right; margin-left:auto; }
  /* Acciones: etiqueta arriba + botones en fila que envuelven (touch) */
  .mn-cards-mobile td[data-label="Acciones"] { flex-wrap:wrap; justify-content:flex-start; }
  .mn-cards-mobile td[data-label="Acciones"]::before { flex-basis:100%; margin-bottom:2px; }
  .mn-cards-mobile td[data-label="Acciones"] > * { text-align:left; margin:2px 6px 2px 0; min-height:34px; display:inline-flex; align-items:center; }
  /* Fila "sin datos" (colspan): sin label, centrada */
  .mn-cards-mobile td[colspan]::before { content:none; }
  .mn-cards-mobile td[colspan] { justify-content:center; }
  .mn-cards-mobile td[colspan] > * { margin:0; text-align:center; }
}

/* ====== §47 Modal "Agregar Producto o Servicio" (compras) — purchases/partials/item.vue ======
   Reorganiza un form denso en 4 secciones escaneables (Producto · Precios e impuestos ·
   Ingreso al stock · Lote y vencimiento). SOLO estilo/estructura: todos los v-model, @change,
   @input, @click, v-if/v-show y métodos quedan intactos (ver CHECKLIST DE PARIDAD). Tokens
   --mn-*, sin scoped (convención del repo). Radios concéntricos, focus/hover con props
   específicas (§14), números tabulares en resúmenes (§9), antialiasing (§8). */

/* Ancho cómodo en desktop sin depender de forwarding de class de EP: seleccionamos el
   .el-dialog que CONTIENE el form (:has). En móvil, EP ya lo hace responsive. */
@media (min-width: 992px) {
  .el-dialog:has(.pm-modal) { width: 900px; max-width: 94vw; }
}

.pm-modal { -webkit-font-smoothing: antialiased; }

/* --- Secciones (superficie tarjeta, radio 14 → radios internos EP ~4-8 concéntricos) --- */
.pm-modal .pm-section {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: 14px;
  padding: 16px 16px 4px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .045);
}
/* La sección de stock ya contiene su propia tarjeta (.pm-stock-card): aplanamos
   el wrapper para no duplicar superficie (evita el "box-in-box"). */
.pm-modal .pm-section--stock {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.pm-modal .pm-section__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--mn-border);
}
.pm-modal .pm-section__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .045em;
  text-transform: uppercase; color: var(--mn-muted);
}
.pm-modal .pm-section__title::before {
  content: ""; width: 4px; height: 14px; border-radius: 3px; background: var(--mn-primary);
}

/* --- Labels consistentes --- */
.pm-modal .control-label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--mn-ink);
}
.pm-modal .control-label .fa-info-circle { color: var(--mn-hint); margin-left: 2px; }

/* --- Link "+ Nuevo" como chip discreto (hit-area cómoda, hover suave 180ms, §14) --- */
.pm-modal .pm-link {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--mn-primary-dk);
  padding: 2px 8px; border-radius: 999px; margin-left: 2px;
  transition: background-color .18s ease, color .18s ease;
}
.pm-modal .pm-link:hover { background: var(--mn-primary-lt); color: var(--mn-primary); text-decoration: none; }

/* --- Inputs full-width dentro del modal (excepto el mini-select de moneda) --- */
.pm-modal .el-select:not(.el-select-currency),
.pm-modal .el-date-editor.el-input,
.pm-modal .el-date-editor--date { width: 100%; }

/* --- Grid de precios: envuelve en vez de apretar (antes .flex-nowrap) --- */
.pm-modal .pm-price-grid > .col,
.pm-modal .pm-price-grid > [class*="col-"] { min-width: 150px; flex: 1 1 150px; }

/* --- Panel de "Opciones" (checkboxes) legible y agrupado --- */
.pm-modal .opciones-group {
  background: var(--mn-bg); border: 1px solid var(--mn-border);
  border-radius: 10px; padding: 8px 10px;
}
.pm-modal .opciones-group .el-checkbox { margin-bottom: 2px; }

/* --- Tarjeta "Ingreso al stock": aplana el .card de Cuba y lo re-tematiza --- */
.pm-modal .pm-stock-card {
  border: 1px solid var(--mn-border);
  border-radius: 12px; overflow: hidden; box-shadow: none;
}
.pm-modal .pm-stock-card .card-header {
  background: var(--mn-primary-lt); border-bottom: 1px solid var(--mn-border);
}
.pm-modal .pm-stock-card .card-header .fw-bold { color: var(--mn-primary-dk); }
.pm-modal .pm-stock-card .alert-info {
  background: var(--mn-primary-lt); border: 1px solid var(--mn-border);
  color: var(--mn-ink); border-radius: 10px;
}
/* Números que cambian en vivo (resumen "Equivale en stock") no deben saltar de ancho (§9) */
.pm-modal .pm-stock-card .alert-info strong { font-variant-numeric: tabular-nums; }

/* --- Acciones: separadas del contenido, botones con hit-area cómoda --- */
.pm-modal .pm-actions {
  border-top: 1px solid var(--mn-border);
  margin-top: 4px; padding-top: 14px;
}
.pm-modal .pm-actions .el-button { min-width: 104px; }

/* Diálogo "Compra por Cajas" (teleported, fuera de .pm-modal): números tabulares (§9). */
.pm-nums strong { font-variant-numeric: tabular-nums; }

/* Resumen de verticales activas en el formulario de clientes. Las verticales
   son combinables; no se comunica como un radio de giro unico. */
.business-verticals-summary {
    align-items: center;
    background: var(--mn-bg, #f8fafc);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 12px;
}
.business-verticals-summary__label {
    color: var(--mn-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .35px;
    margin-right: 2px;
    text-transform: uppercase;
}
.business-vertical-chip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--mn-border, #dbe3ea);
    border-radius: 999px;
    color: var(--mn-ink, #263238);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    padding: 4px 9px;
}
.business-vertical-chip i { font-size: 11px; }
.business-vertical-chip--pharmacy { border-color: color-mix(in srgb, var(--mn-primary, #00796b) 35%, #fff); color: var(--mn-primary-dk, #00695c); }
.business-vertical-chip--clinic { border-color: #b8c7e8; color: #315a9b; }
.business-vertical-chip--veterinary { border-color: #b9d9c5; color: #287044; }
.business-verticals-summary__value { color: var(--mn-ink, #263238); font-size: 12px; }

/* ====== §48 Selector ATC (items/form.vue) ======
   Con `fit-input-width` el .el-popper toma el ancho del campo, pero el
   .el-select-dropdown interno queda en fit-content y deja un hueco a la derecha.
   Lo estiramos al 100% del popper para que no haya espacio vacío. `!important`
   porque el CSS de componentes de EP se inyecta DESPUÉS de modern (ver CLAUDE.md). */
.atc-select-popper .el-select-dropdown,
.atc-select-popper .el-select-dropdown__wrap,
.atc-select-popper .el-scrollbar,
.atc-select-popper .el-scrollbar__view {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Opción: trunca con puntos suspensivos en vez de ensanchar el dropdown.
   !important porque la regla global .el-select-dropdown__item (ver más arriba,
   "el-select dropdown") ahora wrappea por defecto -- acá se reafirma esta
   excepción deliberada. */
.atc-select-popper .el-select-dropdown__item {
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 34px !important;
}

/* ====== §49 Barra de filtros de reportes (DataTableReportsDocuments y afines) ======
   Antes: fila de filtros sin agrupación visual + fila de botones separada por un
   `style="margin-top:29px"` hardcodeado (desalineaba apenas cambiaba la cantidad de
   filtros visibles) + checkbox "Incluir categorías" con `mt-4` para simular alineación
   con los <select> vecinos. Se agrupa en un panel, se alinea el checkbox de forma
   robusta (no por margen mágico) y se separan "Buscar" del cluster de exportación. */
.mn-filters-panel {
  background: var(--mn-bg);
  border: 1px solid var(--mn-border);
  border-radius: 12px;
  padding: 16px 16px 4px;
  margin-left: 0;
  margin-right: 0;
}

/* Panel colapsable (reportes "por producto"): arranca oculto, la data ya cargo sola
   en el mount asi que no hace falta verlo para tener resultados en pantalla. */
.mn-filters-toggle {
  margin-bottom: 12px;
}

// Mismo tamaño que .sbc-field label (Ventas por categoría/laboratorio) — el usuario
// los comparó y prefirió ese label mas chico/compacto sobre estos paneles con card.
.mn-filters-panel .control-label {
  color: var(--mn-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

/* SIRE (Año/Periodo) usa el label prop de el-form-item en vez de <label class=
   "control-label">, por eso no hereda el estilo uppercase-gris que usan el resto de
   paneles de filtro del admin -- se iguala apuntando a la clase que EP genera. */
.mn-sire-filters .el-form-item__label {
  color: var(--mn-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Checkbox alineado al pie de fila como los <select> vecinos (que tienen label + input),
   sin depender de un margin-top fijo que se rompe al cambiar la cantidad de campos. */
.mn-filter-checkbox {
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  padding-bottom: 0.5rem;
}

.mn-filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.mn-filters-actions .el-button + .el-button,
.mn-filters-actions .dropdown + .el-button,
.mn-filters-actions .el-button + .dropdown {
  margin-left: 0 !important; /* EP2 agrega margin-left entre .el-button; el gap del flex ya separa (ver CLAUDE.md §4) */
}
.mn-filters-actions__divider {
  width: 1px;
  align-self: stretch;
  min-height: 32px;
  background: var(--mn-border);
}

/* ====== §50 Fila de filtros inline con label (reportes con toolbar tipo KPI+fila,
   ej. Stock crítico por almacén) — cada control lleva rótulo visible arriba, mismo
   estilo tipográfico que .sbc-field label (11px uppercase 600 letter-spacing .3px)
   para no introducir un tercer sistema de labels en la app. */
.mn-inline-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mn-inline-filter > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mn-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 0;
}
/* setting.css fuerza .el-select{width:100%!important} (carga último, gana por orden con
   igual especificidad, ver CLAUDE.md); un ancho inline en el <el-select> no alcanza.
   Se resuelve dando ancho fijo al WRAPPER (no al select) para que el 100% tenga contra
   qué calcular — mismo patrón ya usado en .clinica-filters .cf-select-wrap. */
.mn-inline-filter--select {
  width: 220px;
}
/* El radio-button de EP2 mide 30px (line-height 14px + padding 8px) contra los 32px
   de select/button (line-height 24px + padding 4px) — quedaban 2-8px desalineados
   en la misma fila. Se fuerza la misma caja e-flex centrado, sin tocar line-height
   (rompería el centrado vertical del icono+texto). */
.mn-inline-filter .el-radio-button__inner {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px; /* al pasar a inline-flex, el espacio " " entre <i> y el texto (nodo de
               texto propio) queda como inicio de línea de un item flex y el navegador
               lo recorta — se repone como gap explícito. */
}
/* .el-radio-button hereda margin-bottom:8px (reset global tipo Cuba/Bootstrap sobre
   labels) que el select/button no tienen — sumaba 8px extra al alto del grupo dentro
   del flex y lo desalineaba pese a que el __inner ya medía 32px igual que los demás. */
.mn-inline-filter .el-radio-button {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .mn-filters-actions__divider { display: none; } /* en mobile los botones apilan; el separador vertical no aporta */
}

/* setting.css fuerza .el-select{width:100%!important} pero NO toca el-date-picker: dentro
   del panel de filtros el select ocupa toda su columna Bootstrap y el date-picker se queda
   con su ancho intrínseco (~220px), angosto y desalineado contra columnas del mismo span. */
.mn-filters-panel .el-date-editor {
  width: 100%;
}
/* setting.css fija ".el-date-editor.el-input{width:150px!important}" y carga DESPUES de
   este archivo -- a igual especificidad gana el que carga último (ver nota de CLAUDE.md
   sobre setting.css). Sumar ".el-input" sube la especificidad para ganarle pese al orden. */
.mn-points-form .el-date-editor.el-input {
  width: 100% !important;
}
/* Compras > Nueva Compra: "Fec Emision"/"Fec. Vencimiento" viven en col-lg-2 (Bootstrap
   sigue el breakpoint del VIEWPORT, no del contenedor -- a ~1000px de viewport el sidebar
   ya se comio ~260-290px reales, pero col-lg-2 igual calcula "2 de 12" sobre ese ancho
   angosto). Los 150px fijos de setting.css no entran ahi y el date-picker se sale de su
   columna, tapando al de al lado. Mismo mecanismo que .mn-points-form de arriba.
   OJO: el "id" de <el-date-picker id="field-date_of_issue">" lo pone Element Plus en el
   <input> INTERNO (.el-input__inner), NO en el wrapper .el-date-editor -- un selector
   "#field-date_of_issue.el-date-editor" nunca matchea nada (verificado, era no-op). El
   "class" si aterriza en el wrapper externo, por eso se usa una clase propia en el
   template (mn-purchase-date-field) en vez del id. */
.mn-purchase-date-field.el-date-editor {
  width: 100% !important;
}

/* ====== §51 Tarjeta KPI clickeable con estado activo (reportes que usan las
   tarjetas de resumen como selector de filtro en vez de un radio-group aparte,
   ej. Lotes por vencer/vencidos) — anillo + fondo sutil para distinguir cuál
   bucket está aplicado ahora mismo, ya que se quitó el radio-group redundante
   que antes cumplía ese rol visual. ====== */
.mn-kpi-card--active {
  box-shadow: inset 0 0 0 2px currentColor;
  background: rgba(0, 0, 0, .025);
}

// ── 46. Aviso de vinculación DIGEMID (form.vue, cód. DIGEMID) ─────────────────
// Alerta compacta bajo el campo "Cód. DIGEMID": el-alert por defecto es
// demasiado grande para una columna col-md-6 en un formulario denso, el texto
// se quebraba en 2-3 líneas. Reducido para que entre en una sola línea.
.digemid-match-alert {
  padding: 4px 8px;

  .el-alert__title {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .el-alert__icon {
    font-size: 14px;
  }
}

// ── 51bis. Pill "Stock en {sede}" (items/index.vue, filtro de almacenes) ────
// Reusaba el nombre .establishment-pill de un pill DISTINTO en el header
// (removido en la nota de arriba: "WIP duplicado sin handler" -- ese SI
// estaba muerto). Esta instancia, con handler real (el-popover de
// sucursales), nunca tuvo su propia definicion -- quedaba sin estilo
// (boton crudo del navegador) como dano colateral del remove de arriba.
.establishment-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--mn-border);
    border-radius: 999px;
    background: #fff;
    color: var(--mn-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.establishment-pill:hover {
    background: var(--mn-bg);
    border-color: var(--mn-primary);
}
.establishment-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mn-primary);
    flex: none;
}
.establishment-pill__label {
    white-space: nowrap;
}
.establishment-pill__chevron {
    font-size: 10px;
    color: var(--mn-muted);
    flex: none;
}

// ── 52. Productos: "Stock en" + "Ver inactivos" viajan como un solo bloque ──
// A partir de lg (>=992px, mismo breakpoint que el col-lg-auto de DataTable.vue
// para este slot) el bloque no debe partirse ni dejar un pill huérfano -- todo
// el grupo entra en la fila de "Filtrar por"/"Buscar" o, si no entra, cae
// completo a una segunda línea (nunca la mitad). Por debajo de lg ese slot
// pasa a un ancho fijo (col-md-4/col-sm-12), así que ahí SÍ debe poder
// envolver -- de lo contrario desborda horizontal en tablet/mobile.
@media (min-width: 992px) {
  .items-stock-scope {
    flex-wrap: nowrap;

    > div {
      flex-wrap: nowrap;
    }
  }
}

// ── 53. Secciones de formulario/modal con eyebrow label ──
// Nacio en el modal "Stock de producto" (3 tablas iguales apiladas sin
// jerarquia) y se reusa en cualquier form/modal largo que necesite separar
// bloques de campos -- icono + texto chico en mayusculas + borde inferior,
// para distinguir de un vistazo que son secciones distintas, no un solo bloque.
.modal-section + .modal-section {
  margin-top: 20px;
}
.modal-section__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mn-muted, #6b7280);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mn-border, #e5e7eb);
}

// ── 54. Celda "Producto" con subtítulo (Laboratorio, etc.) en listados/reportes ──
// Patrón ya usado (inline, sin token) en DigemidCodeLinker.vue: nombre arriba,
// detalle abajo más chico en gris + laboratorio en color de marca. Se generaliza
// acá con los tokens --mn-* del proyecto para no repetir una columna
// "Laboratorio" aparte en cada listado -- ahorra una columna y mejora
// jerarquía visual (nombre = dato principal, laboratorio = detalle).
// Uso: <small class="mn-product-sub">Presentación <span class="mn-product-sub__brand" v-if="row.brand">· {{ row.brand }}</span></small>
.mn-product-sub {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mn-muted);
  margin-top: 2px;
}
.mn-product-sub__brand {
  color: var(--mn-primary-dk);
  font-weight: 600;
}

// Resultado del buscador de productos en compras: conserva el nombre como dato
// principal y muestra el laboratorio debajo, igual que el listado de productos.
.el-select-dropdown__item.pm-product-option {
  height: auto;
  min-height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.35;
  white-space: normal;
}
.pm-product-option__name {
  display: block;
  color: var(--mn-ink);
}
.pm-product-option .mn-product-sub {
  margin-top: 1px;
}

/* ====== §55 Modal "Nuevo ingreso"/"Nuevo egreso" embebido (POS > Ingresos y Egresos) ======
   Mismo lenguaje que §47 (.pm-modal): secciones tipo tarjeta con eyebrow label + barra de
   acento, chips discretos para los links "+ Agregar"/"+ Nuevo", tokens --mn-*, sin scoped
   (convención del repo). Todo vive bajo .ie-modal (clase en el root de income/form.vue y
   expenses/form.vue SOLO cuando embedded=true) -- standalone (Compras>Gastos diversos,
   antes Finanzas>Ingresos) no tiene esa clase en el root, así que los mismos .ie-section
   que se agregaron como wrapper (sin duplicar markup) quedan sin estilo ahí = byte-for-byte
   visualmente intacto. */
.ie-modal .ie-section {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: 14px;
  padding: 16px 16px 4px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .045);
}
.ie-modal .ie-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mn-border);
}
.ie-modal .ie-section__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--mn-muted);
}
.ie-modal .ie-section__title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 3px;
  background: var(--mn-primary);
}
.ie-modal .ie-section__title .fa { color: var(--mn-primary); }

/* "Detalle" vs "Método de pago": mismo patrón .ie-section, se diferencian con
   acento neutro (en vez de teal) + fondo levemente más gris -- a simple vista
   se distingue cuál es la sección de montos/pago y cuál el desglose de conceptos. */
.ie-modal .ie-section--detail {
  background: var(--mn-bg);
}
.ie-modal .ie-section--detail .ie-section__title::before {
  background: var(--mn-ink);
}
.ie-modal .ie-section--detail .ie-section__title .fa {
  color: var(--mn-ink);
}

.ie-modal .control-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mn-ink);
}

/* Links "+ Agregar"/"+ Nuevo" como chip discreto (mismo patrón que .pm-link, §47) */
.ie-modal a.text-info,
.ie-modal .control-label a {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mn-primary-dk);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 2px;
  transition: background-color .18s ease, color .18s ease;
}
.ie-modal a.text-info:hover,
.ie-modal .control-label a:hover {
  background: var(--mn-primary-lt);
  color: var(--mn-primary);
  text-decoration: none;
}

/* Tablas (método de pago / detalle): encabezado tipo dashboard, bordes suaves */
.ie-modal .table {
  --bs-table-border-color: var(--mn-border);
  font-size: 13.5px;
}
.ie-modal .table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mn-muted);
  border-bottom-width: 1px;
}

/* Footer separado del contenido, botones con hit-area cómoda (igual que .pm-actions, §47) */
.ie-modal .form-actions {
  border-top: 1px solid var(--mn-border);
  padding-top: 14px;
}
.ie-modal .form-actions .el-button { min-width: 104px; }


// ── 31. Selector de sucursal dentro del menu de perfil (patron pro9) ──
// Antes era un pill aparte en el header (sacado -- contribuia al overflow
// del §fix anterior). pro9 lo resuelve con un <select> nativo + label
// dentro del dropdown de perfil; el dropdown de Cuba es angosto (160px,
// pensado para "Mi perfil"/"Cerrar Sesion" nomas) asi que se ensancha.
.profile-dropdown__branch-switcher {
  padding: 10px !important;
  border-top: 1px solid var(--mn-border);
  border-bottom: 1px solid var(--mn-border);
  margin: 4px 0;
}
.profile-dropdown__branch-switcher label {
  display: block;
  font-size: 11px;
  color: var(--mn-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.branch-switcher-select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--mn-border);
  border-radius: 8px;
  background-color: var(--mn-bg);
  color: var(--mn-ink);
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branch-switcher-select:hover,
.branch-switcher-select:focus {
  border-color: var(--mn-primary);
  outline: none;
}
.branch-switcher-select option {
  color: var(--mn-ink);
  background-color: #fff;
}
/* Email del trigger de perfil: se leia casi del mismo tamaño/peso que el
   nombre (14px vs 13px, apenas 1px de diferencia) -- baja de jerarquia
   clara: mas chico y mas tenue. */
.profile-media .media-body p.font-roboto {
  font-size: 11px !important;
  color: var(--mn-muted);
  opacity: 0.8;
}

// Estado SUNAT del header: replica el badge compacto de Pro9 y elimina el
// interruptor ambiguo. Las variantes conservan el significado del entorno.
.sunat-status-badge {
  min-height: 42px;
  width: auto !important;
  padding: 5px 10px !important;
  border-radius: 8px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.sunat-status-badge:hover,
.sunat-status-badge:focus-visible {
  color: #fff !important;
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.sunat-status-badge:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.sunat-status-badge__title {
  font-size: 12px;
  font-weight: 700;
}
.sunat-status-badge__connection {
  font-size: 12px;
  font-weight: 500;
}
// primary/success: fondo solido + texto blanco reprueba AA con los tokens base
// (3.67:1 / 3.77:1, medido) -- las variantes -dk si pasan (5.32:1 / 5.49:1).
// danger/info ya pasan con el token base, sin cambio.
.sunat-status-badge--primary { background-color: var(--mn-primary-dk); }
.sunat-status-badge--success { background-color: var(--mn-success-dk); }
.sunat-status-badge--danger { background-color: var(--mn-danger); }
.sunat-status-badge--info { background-color: var(--mn-data); }

/* ── 56. Altura del header y del logo atadas a UNA variable ─────────────
   La alineacion header/sidebar era un pacto entre 3 numeros sueltos: el
   padding del header (§35, 14px → ~71px), el padding del logo (§36, 11px
   → ~71px "a la par del header") y el margin-top del body (58px). Nada los
   mantenia en sync: el badge SUNAT de dos lineas (42px + 12px de padding
   del li = fila de 54px) estiro el header a 82px en silencio y la linea
   del logo quedo 11px corta en TODAS las paginas (el sidebar oscuro
   asomaba contra el header, y el header fijo tapaba 24px del contenido).
   Fix: altura FIJA compartida en desktop. El contenido se centra en la
   barra; un elemento futuro mas alto ya no puede estirarla en silencio
   (desborda visiblemente, que es mejor que desalinear todo). El li del
   badge pierde su padding vertical para entrar completo (42px ≤ 43px
   utiles). Mobile (<992px) queda con altura automatica como siempre.
   NOTA: el token --mn-header-h se unificó en el :root principal (sección
   Estructura, arriba). Este :root separado se eliminó. */

/* ── 57. Shim de iconos el-icon-* (Element UI / EP1) sobre Font Awesome 6 ──
   La migracion a Element Plus 2 elimino el icon-font de EP1: las ~291 clases
   `el-icon-*` repartidas en 159 vues quedaron muertas y todo boton solo-icono
   (ej. Consultar CDR / Enviar en CPE pendientes) renderizaba un cuadrado
   vacio. Editar 159 archivos es inviable y repetiria el bug en la proxima
   vista copiada; este shim mapea cada clase al glifo equivalente de
   Font Awesome 6 Free (ya cargada global por el theme), en UN solo lugar.
   Glifos verificados 36/36 contra la fuente real en prod con Playwright.
   OJO: .el-icon--right/--left (utilidades de espaciado de EP2, con doble
   guion) matchean el selector base pero sin `content` no pintan nada. */
[class^="el-icon-"]::before,
[class*=" el-icon-"]::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-style: normal;
  display: inline-block;
}
.el-icon-arrow-down::before { content: '\f078'; }
.el-icon-bottom::before { content: '\f063'; }
.el-icon-box::before { content: '\f466'; }
.el-icon-check::before { content: '\f00c'; }
.el-icon-circle-check::before { content: '\f058'; }
.el-icon-collection-tag::before { content: '\f02b'; }
.el-icon-d-caret::before { content: '\f0dc'; }
.el-icon-date::before { content: '\f073'; }
.el-icon-delete::before { content: '\f1f8'; }
.el-icon-document::before { content: '\f15b'; }
.el-icon-download::before { content: '\f019'; }
.el-icon-edit::before { content: '\f044'; }
.el-icon-edit-outline::before { content: '\f044'; }
.el-icon-info::before { content: '\f05a'; }
.el-icon-message::before { content: '\f0e0'; }
.el-icon-minus::before { content: '\f068'; }
.el-icon-monitor::before { content: '\f108'; }
.el-icon-office-building::before { content: '\f1ad'; }
.el-icon-plus::before { content: '\2b'; }
.el-icon-price-tag::before { content: '\f02b'; }
.el-icon-refresh-left::before { content: '\f2ea'; }
.el-icon-reply::before { content: '\f3e5'; }
.el-icon-right::before { content: '\f061'; }
.el-icon-s-data::before { content: '\f080'; }
.el-icon-s-grid::before { content: '\f00a'; }
.el-icon-s-order::before { content: '\f03a'; }
.el-icon-search::before { content: '\f002'; }
.el-icon-setting::before { content: '\f013'; }
.el-icon-sort::before { content: '\f0dc'; }
.el-icon-tickets::before { content: '\f15c'; }
.el-icon-top::before { content: '\f062'; }
.el-icon-upload::before { content: '\f093'; }
.el-icon-upload2::before { content: '\f093'; }
.el-icon-view::before { content: '\f06e'; }
.el-icon-warning-outline::before { content: '\f071'; }
.el-icon-zoom-in::before { content: '\f00e'; }


// Reglas base theme-agnosticas repuestas al migrar (cayeron con bloques anti-Cuba)
.icon-tabler {
  stroke-width: 1.5;
  vertical-align: middle;
}

.profile-nav { position: relative; }
.profile-nav > .onhover-show-div {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: 200px;
  background-color: #fff;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}
.profile-nav.profile-open > .onhover-show-div {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.profile-nav .profile-media .fa-angle-down { transition: transform .18s ease; }
.profile-nav.profile-open .profile-media .fa-angle-down { transform: rotate(180deg); }

/* ========================================================================
   Shell Porto (parity con pro9) — sidebar flotante + header + main-content,
   TODO en un solo bloque. Antes vivia repartido en ~5 fragmentos escritos
   en sesiones distintas que terminaron compitiendo por las mismas
   propiedades: dos declaraciones separadas de .mn-sidebar-header, NINGUNA
   con position:fixed explicito en el <aside> porque cada una asumia que la
   OTRA ya lo tenia -- el sidebar quedaba en flujo normal (heredado del
   vendor, display:table-cell) y el logo se salia del area visible (bug
   real, reportado en vivo). Medido contra pro9 real (vega.emito.pe):
   sidebar flotante 255px + gutter 8px, bordes redondeados 12px,
   main-content a 264px, header a 280px (57px/74px con el rail colapsado).
   El arbol de menu (nav-main, permisos/roles/rutas) NO se toca aca --
   solo contenedor y presentacion. */

/* Gradiente de marca del item activo del sidebar: espejo SIN media query
   de la regla en el bloque desktop de abajo (linea ~6256). El overlay
   movil del sidebar (drawer "Modulos") usa el mismo #sidebar-left, pero
   la regla original solo vivia adentro de @media(min-width:768px) y
   dejaba el gradiente navy/azul default del vendor (porto-light/theme.css)
   ganando sin competencia por debajo de 768px. */
html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-parent.nav-active > a.nav-link,
html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-active:not(.nav-parent) > a.nav-link {
  background: linear-gradient(118deg, var(--mn-primary), var(--mn-primary-dk));
  color: #fff;
}

@media (min-width: 768px) {
  html.fixed.sidebar-left-floating {
    --sb-w: 255px;
    --sb-gutter: 8px;
  }

  /* Estos controles pertenecen exclusivamente al header móvil. El markup
     compartido no trae las clases Bootstrap d-none del Pro9, así que el
     vendor los deja visibles en escritorio y desplaza todo el header. */
  html.fixed.sidebar-left-floating .header .logo-container-mobile,
  html.fixed.sidebar-left-floating .header .options-user-mobile {
    display: none;
  }
  html.fixed.sidebar-left-floating .header .topbar-links-container {
    /* 212px alcanzaba justo para 4 iconos planos sin margen. El chip blanco
       le sumo margin:0 3px a cada .topbar-links (+6px x 4 = 24px) -- sin
       ensanchar esto el 4to item (PRO) se envolvia a una segunda linea. */
    width: 236px;
    max-width: 236px;
    overflow: hidden;
  }
  html.fixed.sidebar-left-floating .header > .logo-container {
    /* 216px alcanzaba justo para topbar-links-container sin margen (el logo
       real vive en el sidebar, aca solo estan los accesos rapidos). El chip
       blanco necesita 236px adentro -- +24px de buffer para no comprimirlo. */
    flex: 0 0 240px;
    width: 240px;
    max-width: 240px;
    margin: 0;
  }
  html.fixed.sidebar-left-floating .header { padding-left: 0; padding-right: 9px; }
  html.fixed.sidebar-left-floating .header .topbar-links-container > .topbar-links:nth-child(n + 5) {
    display: none;
  }
  html.fixed.sidebar-left-floating .header .header-right > .notifications.mx-2 { width: 142px; min-width: 142px; }
  /* Antes era :nth-of-type(3) (fragil por posicion) -- se rompio al sumar las alertas de
     farmacia (vencimientos/stock cero/cumplimiento) que corrieron el indice. Clase estable. */
  html.fixed.sidebar-left-floating .header .header-right > .notifications--downloads { width: 44px; min-width: 44px; }
  html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child,
  html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child .userbox {
    width: 180px;
    min-width: 60px;
    max-width: 180px;
    height: 60px;
    display: flex;
    align-items: center;
  }
  // El vendor (porto-light) trae margin-right:-10px de fabrica en .notifications. Con
  // flex-start pasaba desapercibido (sobraba espacio a la derecha igual); con flex-end
  // (alineado al borde) ese margen negativo empuja el avatar 10px afuera del contenedor.
  html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child {
    margin-right: 0;
  }
  html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child .user-profile-content {
    width: 180px;
    min-width: 60px;
    max-width: 180px;
    align-items: center;
  }
  html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child .profile-picture { margin:0; }
  /* Regla real de pro9 (ul.notifications li .btn-sunat en su custom.css) -- la copia
     vendorizada en public/porto-light/css/custom.css es una version vieja que no la
     trae, asi que se replica aca explicita. Sin flex-column el badge "Modo: X /
     Conectado a Y" se aplasta en una sola linea y el overflow se come el texto. */
  html.fixed.sidebar-left-floating .header .btn-sunat {
    height: auto;
    max-height: 50px;
    width: auto;
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    line-height: 16px;
    text-decoration: none;
    margin-top: -5px;
  }
  html.fixed.sidebar-left-floating .header .btn-sunat .btn-title {
    font-weight: bold;
  }
  // El span "Conectado a X" trae font-size:12px inline (verbatim de pro9). A ese
  // tamano, Montserrat necesita ~120px para "Conectado a SUNAT" vs los ~112px
  // disponibles -- pro9 usa Figtree, que a los mismos 12px necesita solo ~111px y
  // por eso ahi entra en una linea. Medido en vivo (vega.emito.pe vs local). No se
  // cambia el ancho del boton (calca el de pro9, 132px) -- se ajusta el tamano.
  html.fixed.sidebar-left-floating .header .btn-sunat > span:last-child {
    font-size: 11px !important;
  }
  /* Dropdown de perfil de escritorio: regla base de pro9 (theme.css + custom.css),
     ausente en la copia vendorizada de este repo (version vieja, sin este patron
     de header). Oculto por defecto, .active lo muestra (togglea el JS en app.js). */
  html.fixed.sidebar-left-floating .header .dropdown-menu-desktop {
    width: 268px;
    height: auto;
    box-shadow: 0 5px 25px rgba(34, 41, 47, .1);
    z-index: 992;
    background-color: #fff;
    position: absolute;
    right: 22px;
    top: 70px;
    padding: .5rem 0;
    margin: .125rem 0 0;
    text-align: left;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease;
  }
  html.fixed.sidebar-left-floating .header .dropdown-menu-desktop.active {
    visibility: visible;
    opacity: 1;
  }
  html.fixed.sidebar-left-floating .header > .logo-container { position:relative; left:-10px; }

  /* theme.css/custom.css (el vendor "pelado") no traen fondo -- pero pro9 real
     corre con un SKIN de tenant encima (storage/skins/{nombre}.css, ULTIMO link
     en la cascada, gana). El skin "black" SI le pone fondo en reposo a estos dos
     selectores (confirmado leyendo el archivo real, no supuesto):
       .header .logo-container .topbar-links { background:#fff; border-radius:10px; }
       .notifications > li .notification-icon { background:#fff; }
     Portado con nuestros tokens (--mn-primary/--mn-ink) en vez de las variables
     --black-* literales de pro9. */
  html.fixed.sidebar-left-floating .header .topbar-links {
    margin: 3px 3px 0 3px;
    background: #fff;
    border-radius: 10px;
    color: var(--mn-ink) !important;
    transition: background-color .15s ease, color .15s ease;
    // Tipografia: coincide hoy con el vendor (theme.css .logo-container .topbar-links)
    // por herencia -- lo dejamos explicito para no depender de que el vendor CSS
    // siga cargado (el roadmap del proyecto plantea apagarlo mas adelante).
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  html.fixed.sidebar-left-floating .header .topbar-links:hover {
    background-color: var(--mn-primary);
    color: #fff !important;
    text-decoration: none;
  }
  // :not(.navigation-options) -- esa variante es de los items DENTRO de un dropdown
  // (lista de texto, no icono cuadrado); el resto (5 iconos del header-right: alertas
  // de farmacia, bandeja de descargas, notificaciones) es el boton cuadrado real.
  // Tamano/display coincidian hoy con el vendor por herencia -- lo hacemos explicito.
  html.fixed.sidebar-left-floating .header .notification-icon:not(.navigation-options) {
    background: #fff;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 50%;
    // Los iconos traian el gris de Bootstrap (.text-secondary, #6c757d) en vez del tono
    // del nav/NC-POS-ME-PRO (--mn-ink) -- mismo token, misma tonalidad en todo el header.
    color: var(--mn-ink) !important;
  }
  /* Avatar del perfil: verificado en vivo (vega.emito.pe) -- .name-initials-container
     tiene fondo blanco real (no transparente como estaba el nuestro), el borde de
     1px ya lo teniamos bien. El div trae width:25px inline (pro9, sin height) --
     pro9 lo pisa con 35x35 real (!important, confirmado en vivo); sin eso el circulo
     queda ovalado (25x26.6, alto por el contenido) y pegado arriba-izq del figure. */
  html.fixed.sidebar-left-floating .header #userbox .name-initials-container {
    background: #fff;
    width: 38px !important;
    height: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    // El svg (stroke=currentColor) heredaba el gris casi invisible del vendor
    // (a{color:#ccc}, theme.css) en vez del gris de los demas iconos del header
    // (.notification-icon.text-secondary, #6c757d) -- quedaba "sin color".
    color: #6c757d;
  }

  // El bloque tablet-only (768-991.98px) de header-right vivia ACA -- antes de la
  // regla general desktop de header-right (mas abajo, dentro del mismo @media(min-width:768px)
  // exterior). A exactamente 768px AMBOS media matchean; por orden de cascada ganaba la
  // general (660px) sobre la tablet (540px), desbordando el header. Movido mas abajo,
  // junto al otro bloque tablet-only, para que gane en su rango. Ver ahi mismo.
  html.fixed.sidebar-left-floating.sidebar-left-collapsed {
    --sb-w: 57px;
  }

  /* ── Sidebar: tarjeta flotante, fixed al viewport ── */
  html.fixed.sidebar-left-floating #sidebar-left {
    // Causa raiz del bug del logo: sin position:fixed explicito el aside hereda
    // position:static del vendor (display:table-cell) y top/left/bottom de abajo se
    // ignoran (CSS no los aplica en elementos static) -- quedaba en flujo normal.
    position: fixed;
    top: var(--sb-gutter);
    left: var(--sb-gutter);
    bottom: var(--sb-gutter);
    width: var(--sb-w);
    height: auto;
    margin: 0;
    // El vendor trae su PROPIO modo "Layout Fixed" (html.fixed .sidebar-left, activo
    // porque app.blade.php pone la clase "fixed" en <html>) con padding-bottom:60px --
    // pensado para OTRO layout (rail flush, header propio abajo), no el nuestro. Mi
    // regla es mas especifica y gana top/left/bottom/position, pero como yo no declaraba
    // padding, ese padding-bottom:60px del vendor se colaba sin competencia: empujaba el
    // area de contenido, sacando el header 60px fuera de la vista (bug real del logo).
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mn-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    overflow: hidden;
    z-index: 1019;
    transition: width .15s ease;
  }

  /* Header interno (logo + toggle): el aside es flex-column, este es su primer hijo
     con altura fija -- no depende de position:absolute/top:60px como antes (fragil:
     cualquier otra regla que tocara el aside sin declarar position rompia el offset,
     que es exactamente lo que paso). */
  html.fixed.sidebar-left-floating #sidebar-left .mn-sidebar-header {
    flex: 0 0 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid var(--mn-border);
  }
  html.fixed.sidebar-left-floating #sidebar-left .mn-sidebar-header .logo .logo-full {
    display: block;
    max-height: 34px;
    width: auto;
  }
  html.fixed.sidebar-left-floating #sidebar-left .mn-sidebar-header .logo .logo-collapsed { display: none; }
  html.fixed.sidebar-left-floating #sidebar-left .mn-sidebar-toggle {
    width: 35px;
    height: 35px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    color: var(--mn-ink);
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
  }
  html.fixed.sidebar-left-floating #sidebar-left .mn-sidebar-toggle:hover { background: var(--mn-bg); }
  // El chevron del toggle es estatico (ti-chevron-left = "<"). Debe reflejar el estado:
  // expandido "<" (colapsar), colapsado ">" (expandir) -- CSS puro, sin JS.
  html.fixed.sidebar-left-floating #sidebar-left .mn-sidebar-toggle .ti-chevron-left { transition: transform .2s ease; }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left .mn-sidebar-toggle .ti-chevron-left {
    transform: rotate(180deg);
  }

  /* Menu scrolleable: position:absolute con top:60 (altura del header), NO flex:1 --
     probado en vivo: NanoScroller (nanoscroller.js, plugin JS de scroll que gestiona
     .nano el mismo) fuerza sus propios estilos y con flex:1/position:static terminaba
     pintando el .nano ENCIMA del header en vez de debajo (tapaba el logo). Con el aside
     ahora position:fixed (arriba), top:60px SI es relativo al aside correctamente. */
  html.fixed.sidebar-left-floating #sidebar-left .nano {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    // El vendor (theme.css:2410, html.no-overflowscrolling .nano -- clase que SI esta
    // presente en nuestro <html>) declara height:100% sin competencia mia (yo no
    // declaraba height) -- top+height ganan sobre bottom cuando los 3 estan presentes
    // (regla CSS estandar), asi que bottom:0 de arriba quedaba IGNORADO: el nano media
    // el 100% del aside (982px) arrancando en top:60, extendiendose 60px mas alla del
    // fondo -- eso es lo que se "derramaba" como scrollable-overflow hacia el aside
    // (scrollTop:60, sacando el header/logo de la vista). height:auto fuerza el calculo
    // correcto a partir de top+bottom (922px, el resto real disponible).
    height: auto;
    // Causa raiz del bug del logo (parte 2): sin overflow propio aca, el contenido real
    // del menu (.nano-content, ~20 secciones) que excede el alto disponible se "derrama"
    // hacia el <aside> padre -- que SI tiene overflow:hidden (recorta visualmente), pero
    // el navegador igual registra ese exceso como scrollable-area del aside (scrollTop
    // programatico sigue siendo valido con overflow:hidden). NanoScroller terminaba
    // scrolleando el ASIDE ENTERO (scrollTop:60) en vez de solo el menu -- eso corria TODO
    // el contenido del aside 60px hacia arriba, sacando el header+logo de la vista.
    overflow: hidden;
  }
  html.fixed.sidebar-left-floating #sidebar-left .nano-content {
    padding: 10px 0 20px !important;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    box-sizing: border-box;
  }

  /* Colapsado (rail 57px, sin hover): icono compacto centrado, toggle oculto hasta hover
     (no hay lugar para el boton en el rail angosto). */
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:not(:hover) .mn-sidebar-header {
    justify-content: center;
    padding-inline: 0;
  }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:not(:hover) .mn-sidebar-header .logo .logo-full { display: none; }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:not(:hover) .mn-sidebar-header .logo .logo-collapsed {
    display: block;
    max-height: 30px;
    width: auto;
    margin: 0 auto;
  }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:not(:hover) .mn-sidebar-toggle { display: none; }

  /* Hover-expand: flota sobre el contenido, no lo empuja (main-content ya reserva el
     ancho colapsado via --sb-w, que no cambia con el hover). */
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover {
    width: 255px;
    z-index: 1021;
    box-shadow: 0 0 25px rgba(34, 41, 47, .18);
    overflow: visible;
  }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .mn-sidebar-header {
    justify-content: space-between;
    padding: 0 15px;
  }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .mn-sidebar-header .logo .logo-full { display: block; }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .mn-sidebar-header .logo .logo-collapsed { display: none; }
  /* El hover se activa al entrar por el logo. Mantener el enlace y la imagen
     con ancho estable evita que el wordmark se recorte durante la transicion
     del rail (el icono no debe reemplazar parcialmente al logo completo). */
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .mn-sidebar-header .logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
  }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .mn-sidebar-header .logo .logo-full {
    width: auto;
    max-width: 170px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
    opacity: 1;
    visibility: visible;
  }
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .mn-sidebar-toggle { display: flex; }

  /* Reveal labels when expansion starts from the header/logo, not .nano. */
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .nav-main li a span,
  html.fixed.sidebar-left-floating.sidebar-left-collapsed #sidebar-left:hover .sidebar-title {
    visibility: visible;
    opacity: 1;
    margin-left: 0;
  }

  /* ── Items del menu: plano, sin gradiente (pro9 en vivo: box-shadow:none en el item
     activo, confirmado con getComputedStyle antes de escribir nada). ── */
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li > a.nav-link {
    margin: 0 8px;
    padding: 6.4px 8px;
    min-height: 35px;
    border-radius: 8px;
    color: var(--mn-ink);
    font-size: 14px;
    font-weight: 400;
    transition: background-color .15s linear, color .15s linear;
  }
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li > a.nav-link:hover,
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li > a.nav-link:focus,
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-parent.nav-active > a.nav-link,
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-active:not(.nav-parent) > a.nav-link {
    background: var(--mn-bg);
    color: var(--mn-ink);
    box-shadow: none;
  }
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-active:not(.nav-parent) > a.nav-link {
    font-weight: 500;
  }
  /* Active navigation must contrast with the white sidebar. The previous
     grouped rule reused the hover surface (#F4F8FA) while inheriting white
     text, making the selected item effectively invisible. */
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-parent.nav-active > a.nav-link,
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li.nav-active:not(.nav-parent) > a.nav-link {
    background: linear-gradient(118deg, var(--mn-primary), var(--mn-primary-dk));
    color: #fff;
  }
  html.fixed.sidebar-left-floating #sidebar-left .nav-main > li > a.nav-link i {
    font-size: 18px;
    margin-right: .5em;
  }
  // El chevron (::after de los li.nav-parent) traia el gris-morado del vendor
  // (theme.css, #565360) en vez del color del propio link -- currentColor lo hace
  // seguir automaticamente al link en cualquier estado (normal/hover/activo con
  // fondo teal + texto blanco), sin tener que repetir la logica de color a mano.
  html.fixed.sidebar-left-floating #sidebar-left .nav-main li.nav-parent > a.nav-link::after {
    color: currentColor;
  }
  html.fixed.sidebar-left-floating #sidebar-left .nav-children {
    background: transparent;
    padding: 6px 0;
  }
  html.fixed.sidebar-left-floating #sidebar-left .nav-children li a.nav-link {
    padding: 6px 15px 6px 48px;
    color: var(--mn-ink);
  }
  // El item activo casi no se distinguia: custom.css (vendor, "Rediseño sidebar",
  // sin guard de sidebar-light) fuerza color:#4b4b4b!important -- MAS CLARO que el
  // texto normal (--mn-ink) -- y el puntito (::before) queda blanco-sobre-blanco
  // contra nuestro fondo claro --mn-bg. !important solo para ganarle al !important
  // de vendor (mismo caso que Cuba en CLAUDE.md).
  html.fixed.sidebar-left-floating #sidebar-left .nav-children li.nav-active > a.nav-link {
    font-weight: 500;
    color: var(--mn-ink) !important;
    background: var(--mn-bg);
  }
  html.fixed.sidebar-left-floating #sidebar-left .nav-children li.nav-active > a.nav-link::before {
    border-color: var(--mn-primary);
    background: var(--mn-primary);
  }

  /* ── Header superior: fijo al scrollear, offset segun el ancho del sidebar. El theme
     vendor lo deja position:absolute (se va con el scroll); pro9 lo fija via html.fixed.
     z-index bajo el del sidebar (1019) para que el hover-expand del rail flote encima. ── */
  html.fixed.sidebar-left-floating .header {
    position: fixed;
    left: calc(var(--sb-w) + 25px);
    top: 0;
    right: 0;
    height: 60px;
    /* Verificado en vivo contra pro9 real (vega.emito.pe, no el theme.css estatico
       que llevo a un fix equivocado antes): background computado real =
       rgb(242,245,247) via canvas pixel-sample -- practicamente identico a
       --mn-bg (#F4F8FA). Sin border-bottom (confirmado: border:0px none en
       getComputedStyle). El fix anterior de agregar border-bottom fue un error,
       revertido. */
    background: var(--mn-bg);
    border: 0;
    box-shadow: none;
    z-index: 1018;
    transition: left .15s ease;
    display: flex;
    align-items: center;
  }
  // El header es flex (.row): el float:right del vendor se ignora, el bloque
  // (DEMO/notificaciones/perfil) quedaba pegado a la izquierda. margin-left:auto lo
  // empuja al extremo derecho. Userbox: nombre+email a la izquierda, avatar a la derecha
  // (clases del markup Porto sin estilo propio del vendor -- adoptado de pro9).
  // Ancho: el bloque derecho del Pro9 mantiene 346px en todo desktop/tablet -- pero eso
  // era sin las alertas de farmacia (vencimientos/stock cero/cumplimiento) que este
  // proyecto suma y pro9 no tiene. 660px = medido en vivo con las 5 alertas + perfil
  // CON nombre/correo visibles (180px, sin el duplicado que lo aplastaba a 60px --
  // ver notas en la regla de .notifications:last-child mas abajo).
  // (Antes esto eran DOS reglas separadas para el mismo selector -- una con
  // width:auto/flex-end de un intento anterior, otra con 660px/flex-start agregada
  // despues sin notar que la primera ya existia. Ganaba la de mas abajo por orden de
  // cascada, la de arriba quedaba muerta. Consolidado en una sola.)
  html.fixed.sidebar-left-floating .header .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 660px;
    width: 660px;
    min-width: 660px;
    max-width: 660px;
    overflow: visible;

    .userbox .user-profile-content {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      cursor: pointer;
      // Sin chip de hover: verificado en vivo contra pro9 real (vega.emito.pe) --
      // ahi este link no tiene padding/radius/fondo en hover, queda transparente.

      .profile-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        // 180px es el ancho TOTAL de .user-profile-content, compartido con el avatar
        // (38px) + el gap (10px) -- dejarle los 180px enteros a .profile-info es lo que
        // hacia que el avatar se saliera del contenedor con un correo largo
        // (ej. "principal@gmail.com" vs el "admin@gmail.com" con el que se midio esto).
        // min-width:0 es necesario para que el ellipsis de .name/.role de abajo entre en
        // efecto -- sin esto un flex item no se achica mas alla de su contenido natural.
        max-width: 132px;
        min-width: 0;

        // .name/.role tienen su propio par font-size+line-height completo, NO heredado
        // (ni del padre .profile-info ni del vendor theme.css .userbox .name/.role) --
        // ese reparto a medias fue justo el bug del descendente cortado en "gmail":
        // nosotros pisabamos font-size pero no line-height, y quedaba el 0.7rem del
        // vendor (pensado para SU font-size de 0.7rem, no para el nuestro de .78rem).
        .name {
          font-size: 13px;
          line-height: 16px;
          font-weight: 600;
          color: var(--mn-ink);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
        }
        .role {
          font-size: .78rem;
          line-height: 15px;
          color: var(--mn-muted);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
        }
      }

      .profile-picture {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid var(--mn-border);

        // El div interno (name-initials-container) trae width:25px inline desde
        // pro9 -- sin centrar el figure padre, ese circulo mas chico queda pegado
        // arriba-izquierda en vez de centrado en el box de 38px.
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }
    }
    // (El .establishment-pill del header se removio: era WIP duplicado sin handler.
    //  El cambio de sucursal vive en el <select> del dropdown de perfil.)
  }
  html.fixed.sidebar-left-floating .header .logo-container .topbar-links {
    width: auto;
    min-width: 46px;
    max-width: 58px;
    height: 50px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  html.fixed.sidebar-left-floating .header .logo-container .topbar-links-container { display: flex; flex-wrap: nowrap; width: max-content; min-width: 0; }
  html.fixed.sidebar-left-floating .header .logo-container .topbar-links svg { flex: 0 0 18px; }

  // El width:60px universal que estaba aca era un duplicado corrido del bloque
  // tablet-only de arriba (768-991.98px) -- sin @media, aplastaba nombre+correo
  // del perfil a 4px en TODO desktop. En desktop se deja ganar la regla de
  // 180px (linea ~5694) para que el nombre+correo se vean completos.
  /* Igual que Pro9 entre 768 y 991px: el bloque de accesos de escritorio
     desaparece y el header-right conserva su ancho completo. Si el logo de
     216px permanece, DEMO y los iconos no caben y el primer bloque invade el
     logo al usar justify-content:flex-end.
     Rango extendido a 1199.98px (antes terminaba en 991.98): entre 992 y 1199px
     el modo "desktop completo" (header-right 660px + logo-container + topbar-links
     todos visibles a la vez) necesita ~1200px reales para no desbordar -- medido en
     vivo, a 992px se salia 198px, a 1200px entra con margen. Sin este rango
     intermedio quedaba una franja de laptops chicas totalmente rota. */
  @media (min-width: 768px) and (max-width: 1199.98px) {
    html.fixed.sidebar-left-floating .header > .logo-container {
      flex: 0 0 0;
      width: 0;
      max-width: 0;
      min-width: 0;
    }
    html.fixed.sidebar-left-floating .header .topbar-links-container { display: none; width: 0; max-width: 0; }
    html.fixed.sidebar-left-floating .header .btn-sunat {
      width: 132px;
      min-width: 132px;
      height: 46px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      line-height: 16px;
      margin-top: 0;
      position: relative;
      top: -2px;
      background: #e7000b;
    }
    html.fixed.sidebar-left-floating .header .btn-sunat .btn-title,
    html.fixed.sidebar-left-floating .header .btn-sunat > span:last-child {
      display: block;
    }
    html.fixed.sidebar-left-floating .header .header-right {
      /* 346px medido contra pro9 real, sin las alertas de farmacia (vencimientos/
         stock cero/cumplimiento) que este proyecto suma y pro9 no tiene. El espacio
         real disponible a 768px (el ancho de tablet mas angosto) es sidebar(255)+
         gutter(25)+padding(10) = 290px de arranque, contra un viewport de 768px --
         solo quedan 478px. Con el gap default del vendor entre .notifications/
         .separator (~14px c/u) el contenido pedia 530px y el avatar quedaba
         cortado fuera de pantalla. Se achican los gaps (ver regla de abajo) para
         que 470px alcance con margen. */
      flex: 0 0 470px;
      width: 470px;
      min-width: 470px;
      max-width: 470px;
      overflow: visible;
      justify-content: flex-end;
      white-space: nowrap;
    }
    html.fixed.sidebar-left-floating .header .header-right > .notifications {
      vertical-align: top;
      margin-left: 3px !important;
      margin-right: 3px !important;
    }
    html.fixed.sidebar-left-floating .header .header-right > .separator {
      vertical-align: top;
      margin: 0 !important;
    }
    html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child,
    html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child .userbox {
      width: 60px;
      min-width: 60px;
      max-width: 60px;
      display: inline-flex;
      vertical-align: top;
    }
    html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child {
      margin-right: 0 !important;
    }
    html.fixed.sidebar-left-floating .header .header-right > .notifications:last-child .profile-info {
      display: none;
    }
  }

  /* ── Contenido principal ── */
  html.fixed.sidebar-left-floating #main-content {
    box-sizing: border-box;
    margin-left: calc(var(--sb-w) + 9px);
    width: calc(100% - (var(--sb-w) + 9px));
    max-width: calc(100% - (var(--sb-w) + 9px));
    min-width: 0;
    padding: 25px;
    // Sin esto, contenido mas ancho que la columna (tablas de muchas columnas, filas de
    // stat-boxes) se corta en silencio en el borde del viewport: html{overflow-x:hidden
    // !important} del vendor (theme.css) esconde cualquier desborde sin dejar scrollbar.
    // El mismo mecanismo ya estaba parcheado en mobile (ver @media max-width:767px mas
    // abajo) pero nunca se extendio a desktop. overflow-x:auto en vez de hidden: confina
    // el scroll al area de contenido en vez de perder el dato que no entra.
    overflow-x: auto;
  }
  // Intento de sticky para .page-headers (paridad con "html.fixed .page-header" de pro9)
  // DESCARTADO: .inner-wrapper trae "overflow:hidden" del vendor (theme.css:78, regla base
  // sin @media, no el escape "html.no-mobile-device .inner-wrapper{overflow-y:auto}" que
  // solo vive dentro del @media mobile del vendor) -- un ancestro con overflow no-visible
  // entre el sticky y el scroll real rompe position:sticky (queda con top:71px declarado
  // pero nunca pega, se comporta como static). Arreglarlo de raíz implica tocar el overflow
  // de .inner-wrapper, que envuelve sidebar+contenido en TODA la app -- requiere testeo de
  // regresión dedicado (dropdowns, hover del sidebar, modales, scrollbar horizontal
  // inesperado) antes de tocarlo. Pendiente, no bloqueante.
  // El vendor (theme.css:239-241, "html.fixed .inner-wrapper") reserva padding-top:110px
  // pensado para una segunda barra fija (.page-header, breadcrumb+filtros) que pro9 SI
  // tiene y nosotros no portamos -- de ahi el hueco vacio entre el header y el contenido.
  // 60px = exactamente la altura del .header fijo (lo minimo seguro: menos que eso mete
  // el contenido debajo del header). El respiro visual restante lo da el padding propio
  // de #main-content (25px arriba).
  html.fixed.sidebar-left-floating .inner-wrapper {
    padding-top: 60px;
  }
}

/* ===== Mobile (<768px): mecanismo off-canvas nativo del vendor, sin tocar (sidebar
   position:fixed;left:-100% oculto fuera de pantalla; toggle via html.sidebar-left-opened
   desliza con margin-left:100%) -- solo los overrides puntuales que hacen falta para que
   el header/perfil no se rompan. ===== */
@media (max-width: 767px) {
  // El drawer off-canvas de mobile queda DEBAJO del .header fijo (z-index 1020 vs 1030) y
  // a 300px de ancho, no full-screen -- a diferencia del menu "Modulos" de pro9 real
  // (vega.emito.pe), que si tapa toda la pantalla. Con el .header siempre visible arriba
  // (con su propio logo), el logo+chevron internos de .mn-sidebar-header quedaban
  // duplicados (2 logos en pantalla a la vez) y el chevron de "colapsar a rail" no aplica
  // en un drawer off-canvas (no hay estado "colapsado" ahi, solo abierto/cerrado via el
  // mismo boton "Modulos" del header, que sigue accesible). Se oculta el bloque entero.
  // (Antes tenia sizing explicito para <img class="logo-full"> porque sin max-height
  // renderizaba a su tamano intrinseco roto e inflaba el drawer -- ya no aplica, oculto.)
  #sidebar-left .mn-sidebar-header { display: none; }

  .header {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--mn-border);
    z-index: 1030;
  }
  .header .header-logo-wrapper { display: flex; align-items: center; }
  .header > .logo-container {
    position: relative;
    inset: auto;
    width: 100%;
    height: 60px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }
  .header > .logo-container .toggle-sidebar-left {
    position: absolute;
    left: 0;
    right: auto;
    width: auto;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    top: 0;
    background: transparent;
    border-radius: 0;
    color: #111827;
    line-height: normal;
    padding: 0;
    z-index: 2;
  }
  .header > .logo-container .toggle-sidebar-left h2 { display: block; margin: 0; font-size: 16px; font-weight: 500; }
  .header > .logo-container .options-user-mobile { position: absolute; right: 0; left: auto; top: 15px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: #111827; }
  .header > .header-right { display: none; }
  // .header-right resolvia a un width fijo de ~450px (mas ancho que el viewport) pese a
  // que su contenido visible ya era ~0 (badge SUNAT/notificaciones/avatar ocultos en
  // mobile) -- no se identifico el origen exacto (herencia de .row/columnas Bootstrap del
  // vendor), pero width:auto lo resuelve: sin esto, sumado al logo-wrapper, superaba el
  // ancho del header y el flex-wrap:wrap mandaba header-right a una segunda fila,
  // desbordando por debajo del header de 60px fijo (la caja blanca vacia flotando abajo).
  .header .header-right { margin-left: auto; width: auto; }
  .header .logo-container { min-width: 0; flex: 1 1 auto; }
  .header .logo-container-mobile { position: static; width: 140px; height: auto; }
  .header .logo-container-mobile .logo img { display: block; width: 140px; height: auto; max-height: 34px; object-fit: contain; }
  .header .logo-container-mobile .logo { display: flex; align-items: center; justify-content: center; height: 54px; line-height: 1; }
  .header .header-right { flex: 0 1 auto; max-width: 100%; overflow: hidden; }

  // Nombre+email apilados (con avatar) median ~84px de alto, mas que el header de 60px
  // fijo -- el trigger se salia por abajo (pro9 no muestra nombre/email en su header
  // mobile). No se puede ocultar el trigger ENTERO: es el unico acceso a Cerrar sesion /
  // cambio de sucursal en mobile (el sidebar off-canvas no tiene esa opcion). Se oculta
  // solo el texto, queda el avatar solo (compacto, cabe en 60px) y el dropdown se sigue
  // abriendo igual al tocarlo.
  .header .header-right .userbox .user-profile-content {
    padding: 0;
    gap: 0;
  }
  .header .header-right .userbox .user-profile-content .profile-info { display: none; }
  // El avatar (.profile-picture) ya estaba en display:none en mobile de antes (no es de
  // este shell) -- no se identifico el origen exacto pese a recorrer TODOS los
  // stylesheets cargados con Element.matches(), pero forzarlo visible via !important lo
  // revierte sea cual sea la causa. Sin el avatar el trigger de perfil queda en 0x0 --
  // inaccesible en mobile a Cerrar sesion / cambio de sucursal.
  .header .header-right .userbox .user-profile-content .profile-picture {
    display: inline-block !important;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  #sidebar-left {
    width: 300px;
    max-width: calc(100vw - 24px);
    min-width: 0;
    top: 60px;
    bottom: 0;
    height: calc(100vh - 60px);
    z-index: 1020;
    border-radius: 0;
    border-right: 1px solid var(--mn-border);
  }
  // padding horizontal: pro9 real (vega.emito.pe) usa "padding:65px 10px 0" en su
  // #main-wrapper, consistente en TODA la app (chequeado en 4 paginas distintas, no
  // varia por pagina) -- nosotros teniamos 0, el contenido quedaba pegado a los bordes
  // del viewport con overflow horizontal visible (botones/columnas de tabla cortados)
  // en CASI TODAS las paginas. Mismo mecanismo de top que ya teniamos (margin-top:60px,
  // no cambia), solo se agrega el padding horizontal que faltaba.
  #main-content { margin: 60px 0 0; width: 100%; max-width: 100%; padding: 0 10px; }
}