// ================================================================
// 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.
// ================================================================

// ── 0. Tipografía global ──────────────────────────────────────────
// Cuba template sobreescribe body con Rubik en style.css.
// overrides.css carga DESPUÉS → estas reglas ganan por cascada natural.
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;       // antes 300 (Light) — se veía fino/lavado vs pro8 (~400)
    color: var(--mn-ink);   // token único de texto base (antes #404040 de Cuba). Cambialo en :root y se propaga.
}
// Cuba agrega "* a { letter-spacing: 1px }" que hace el texto verse pesado.
// Pro8/Montserrat corre sin letter-spacing extra.
a {
    letter-spacing: normal;
}
// 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).

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

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07), 0 0 0 1px rgba(0, 0, 0, .04);
    transition: box-shadow .2s ease;

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .04);
    }

    // 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;
        border-bottom: 1px solid #f0f2f5;
        border-radius: 10px 10px 0 0 !important;
        padding: 14px 20px;
        min-height: unset;

        .card-title {
            font-size: 15px;
            font-weight: 600;
            color: #303133;
            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: #303133;
            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: #303133;
    margin-bottom: 0;

    thead th {
        background: #f8fafc;
        color: #606266;
        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;
        // Cuba pinta `td{#404040!important}`; solo !important propio (cargamos después) lo gana.
        color: var(--mn-ink) !important;
    }

    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;
        }
    }

    &.table-hover 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: #606266;
    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: #606266 !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 (+ a veces .font-custom 15px) 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 el .font-custom{…!important} per-componente
// y 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; }
}

// Título de panel de filtros ("Filtros de búsqueda"): .font-custom lo fuerza a
// 15px !important y queda pesado para un rótulo de utilidad. Bajar a 13px (sigue
// uppercase+bold por .control-label). !important vence el .font-custom per-componente.
label.control-label.font-custom { font-size: 13px !important; }

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

.form-control {
    border-radius: 6px;
    border-color: #dcdfe6;
    font-size: 13px;
    color: #303133;
    height: 36px;
    padding: 6px 12px;
    transition: border-color .18s, box-shadow .18s;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: #c0c4cc;
        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 {
        box-shadow: 0 2px 6px rgba(5, 150, 105, .22);
        &:hover { box-shadow: 0 4px 12px rgba(5, 150, 105, .3); }
    }
    &.btn-danger {
        box-shadow: 0 2px 6px rgba(220, 38, 38, .18);
        &:hover { box-shadow: 0 4px 12px rgba(220, 38, 38, .28); }
    }
    &.btn-warning {
        box-shadow: 0 2px 6px rgba(245, 158, 11, .18);
        &:hover { box-shadow: 0 4px 12px rgba(245, 158, 11, .28); }
    }
}

// ── 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: #606266;
        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;
    }
}

// el-dialog: header y footer modernos
.el-dialog {
    border-radius: 10px !important;
    overflow: hidden;
    // 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: #303133;
    }

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

        .el-dialog__close {
            font-size: 18px;
            color: #909399;
            transition: color .15s;

            &:hover { color: #303133; }
        }
    }

    .el-dialog__body {
        padding: 20px;
        color: #303133;
    }

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

// 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 {
    font-size: 13px;

    &.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: #303133;
    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: #909399;

    &.is-active { color: $themecolor; 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: $themecolor;
}

// ── 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: #909399;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                text-decoration: none;
                transition: color .15s;
                font-weight: 500;

                &:hover { color: $themecolor; }

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

            .text-primary {
                color: #303133;
                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,
.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: #606266;
        display: flex;
        align-items: center;
        gap: 4px;

        i { color: #909399; 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: #909399;
    }

    .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;

        &--pdf   { color: #f56c6c; background: #fef0f0; border-color: #fbc4c4; }
        &--pdf:hover { background: #fde2e2; }
        &--excel { color: #67c23a; background: #f0f9eb; border-color: #c2e7b0; }
        &--excel:hover { background: #e1f3d8; }
    }

    .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: #606266;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        padding: 5px 12px;
        cursor: pointer;
        transition: all .15s;

        i { color: #909399; }
        &:hover { border-color: $themecolor; color: $themecolor; }
    }
}

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

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #909399;

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

    .empty-state-title {
        font-size: 15px;
        font-weight: 600;
        color: #606266;
        margin-bottom: 6px;
    }

    .empty-state-sub {
        font-size: 13px;
        color: #c0c4cc;
        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: #909399;
    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: #303133;
}
.inv-header-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: #909399;
}

.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: #606266;
    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: #c0c4cc; margin-left: 2px; }

.inv-td-idx  { color: #c0c4cc; font-size: 11px; text-align: center; }
.inv-td-name { font-weight: 500; color: #303133; 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: #909399; }
.inv-td-mono  { font-family: monospace; font-size: 12px; color: #606266; }
.inv-td-num   { font-size: 12px; color: #303133; }
.inv-td-price { font-weight: 600; font-size: 12px; color: #303133; }

.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: #606266;
    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: #909399;
    padding-left: 12px !important;
}
.inv-tfoot-val {
    font-weight: 700;
    font-size: 13px;
    color: #303133;
}

.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: #c0c4cc; font-size: 11px; }
.kx-product { font-weight: 500; color: #303133; max-width: 200px; }
.kx-mono    { font-family: monospace; font-size: 12px; }
.kx-num-cell { color: #606266; }

.kx-datetime-cell { white-space: nowrap; }
.kx-date-main {
    font-size: 12px;
    color: #303133;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.kx-time-sub {
    font-size: 11px;
    color: #909399;
    font-family: monospace;
    margin-top: 1px;
}
.kx-docdate-sub {
    font-size: 10px;
    color: #c0c4cc;
    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: #606266;
    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: #606266;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kx-transfer-arrow { color: #909399; 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: #303133;
    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: #303133; }
.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: #303133;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}
.kx-user-system {
    font-size: 11px;
    color: #c0c4cc;
    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: #606266;
    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: #606266;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kx-label i { color: #909399; }
.kx-optional { font-weight: 400; color: #c0c4cc; 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: #606266;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 999px;
    padding: 4px 10px;
}
.kx-warehouse-toggle i { color: #909399; }
.kx-export-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kx-export-label { font-size: 12px; color: #909399; }
.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;
}
.kx-export-btn--pdf { color: #f56c6c; background: #fef0f0; border-color: #fbc4c4; }
.kx-export-btn--pdf:hover { background: #fde2e2; border-color: #f89898; }
.kx-export-btn--excel { color: #67c23a; background: #f0f9eb; border-color: #c2e7b0; }
.kx-export-btn--excel:hover { background: #e1f3d8; border-color: #a3d98a; }
.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: #606266;
    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: #303133;
    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: #909399;
}
.kx-empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    color: #dcdfe6;
}
.kx-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #606266;
    margin-bottom: 4px;
}
.kx-empty-sub { font-size: 13px; color: #c0c4cc; 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: #303133; }
.pc-toolbar-sub { font-size: 12px; color: #909399; }
.pc-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pc-refresh-bar {
    font-size: 12px;
    color: #606266;
    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: #606266;
    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: #909399; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.pc-meta-value { font-size: 13px; font-weight: 600; color: #303133; }

.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: #909399; }
.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: #909399;
}
.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: #909399; text-transform: uppercase; }
.pc-stock-val { font-size: 15px; font-weight: 700; color: #303133; }
.pc-add-result-select { flex-shrink: 0; width: 160px; }
.pc-add-result-qty { flex-shrink: 0; }
.pc-add-select-label { font-size: 10px; color: #909399; 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: #606266;
    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: #303133; font-size: 13px; }
.pc-product-sub  { font-size: 11px; color: #909399; }
.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: #409eff; }
.pc-event-date   { font-size: 11px; color: #909399; }
.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: #606266; 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-card-header, .kx-mode-bar, .kx-context-banner) ──

.kx-card-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
}
.kx-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kx-header-icon {
    font-size: 24px;
    color: #409EFF;
    background: #ecf5ff;
    border-radius: 10px;
    padding: 8px;
}
.kx-header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}
.kx-header-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: #909399;
}

.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: #909399;
    margin-bottom: 2px;
    transition: color .18s;
}
.kx-mode-btn--active .kx-mode-icon,
.kx-mode-btn:hover .kx-mode-icon { color: #409EFF; }
.kx-mode-label { font-size: 13px; font-weight: 600; color: #303133; }
.kx-mode-btn--active .kx-mode-label { color: #1a6fc4; }
.kx-mode-desc { font-size: 11px; color: #909399; }

.kx-context-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 20px;
    font-size: 12px;
    color: #606266;
    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: #c0c4cc; font-size: 11px; width: 36px; }
.kxl-code { font-family: monospace; font-size: 12px; color: #606266; }
.kxl-name { font-weight: 500; color: #303133; }
.kxl-und  { font-size: 12px; color: #909399; }

.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: #606266;
    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: #c0c4cc; }

.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: #c0c4cc; background: #f4f4f5; border: 1px solid #e9e9eb; }

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

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

.kxs-idx  { color: #c0c4cc; font-size: 11px; width: 36px; }
.kxs-code { font-family: monospace; font-size: 12px; color: #606266; }
.kxs-name { font-weight: 500; color: #303133; }
.kxs-und  { font-size: 12px; color: #909399; }
.kxs-date { font-size: 12px; color: #606266; }

.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: #c0c4cc; background: #f4f4f5; border: 1px solid #e9e9eb; }

.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: #606266;
    margin-right: 8px;
}

.lots-warehouse-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #409EFF;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}
.lots-warehouse-badge--global {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6;
}

// ── 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; }

// ── 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-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 (.quick-menu-*, .el-carousel__item, .logo-preview-*) ──

.quick-menu-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.quick-menu-actions .btn { margin-right: 0 !important; }
.quick-menu-edit .fix-m { display: inline-flex; margin-left: 6px; }

.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: #909399;
    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: #909399;
    margin-right: 6px;
}
.coupon-preview__text b { color: #303133; }

.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; }

.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: $themecolor;
    }
}

// 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;
}

.badge-primary,
.bg-primary { background-color: #007bff !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; }
.badge-info,
.bg-info { background-color: var(--mn-primary) !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 */

    /* ── 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 */

    /* ── Sincroniza Cuba --theme-default ───────────────────────── */
    --theme-default:   var(--mn-primary);
    --theme-secondary: var(--mn-primary-dk);

    /* ── Remap Bootstrap info → brand teal (reemplaza cyan #0dcaf0) ─
       Afecta: .text-info labels, .bg-info badges, .alert-info, .border-info
       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);
}

// 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;
}
@media (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; }

// 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);
}
@media (max-width:1500px){ .dash-kpis{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:768px){ .dash-kpis{ grid-template-columns:repeat(2, 1fr); } }
@media (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; }
@media (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; }

// 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;
}

// ── 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;
    }
}

// ── 35. Densidad del header — recorta la barra superior global ──────────
// El header del tema Cuba era ~108px: 21px de una línea fantasma (un BOM al
// inicio de header.blade.php que se renderizaba como nodo de texto, ya
// removido) + 87px del .header-wrapper (22px de padding vertical).
// Aquí compactamos el padding del header y subimos el contenido para cerrar
// el hueco que deja el header (position:fixed) al achicarse.
//
// IMPORTANTE: Cuba define el padding con `.page-wrapper .page-header
// .header-wrapper` (0,3,0). Hay que igualar o superar esa especificidad —
// con menos clases el override pierde el cascade (no es cuestión de orden ni
// de !important).
.page-wrapper .page-header .header-wrapper {
    padding-top:14px;
    padding-bottom:14px;
}
// Sube el contenido: el header fijo ahora mide ~75px, no ~108. El offset de
// Cuba es `.compact-wrapper .page-body-wrapper .page-body { margin-top:80px }`
// (0,3,0); lo igualamos con una clase extra (0,4,0) para ganar el cascade.
.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    margin-top:58px;
    min-height:calc(100vh - 58px);
}

// ── 36. Densidad del sidebar — alinea el área del logo con el header ─────
// El logo del sidebar (.logo-wrapper) medía 92px (padding 22px), dimensionado
// para el header viejo de 108px. Con el header ahora en ~71px, eso dejaba una
// banda verde vacía sobre el menú. Igualamos la especificidad de Cuba
// (.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper
// .logo-wrapper = 0,5,1) — con menos peso el override perdería el cascade —
// y bajamos el padding para que el logo ocupe ~70px, a la par del header.
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
    padding-top:11px;
    padding-bottom:11px;
}

// ── 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 ancho para leer el tipo de documento
    .guias-block {
        table { width: 100%; }
        td {
            padding-bottom: 8px;
            vertical-align: middle;
        }
        td:nth-child(1) { width: 46%; padding-right: 8px; }
        td:nth-child(2) { width: 42%; padding-right: 8px; }
        td:nth-child(3) { width: 12%; text-align: right; }
        .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);
}

// ── 39. Sidebar — Dark Navy + Teal (MedNav B) ────────────────────────────────
// Fondo oscuro navy, activos en menta (#4DB6AC) — identidad clínica/salud.
// SIN !important — cascade natural (overrides.css carga ÚLTIMO).

// Tokens locales (mapean a --mn-* para coherencia)
$sb-bg:          #17181A;                   // --mn-sidebar: near-black neutro
$sb-border:      #232528;                   // ~14 unidades más claro que bg
$sb-text:        #cbd5e1;                   // slate-300: texto normal
$sb-text-sub:    #9AA3B2;                   // texto submenú inactivo (user spec)
$sb-text-dark:   #f1f5f9;                   // slate-100: texto hover
$sb-hover-bg:    #232528;                   // mismo tono que border
$sb-active-bg:   var(--mn-active);          // pill sólido — YA NO rgba translúcido
$sb-active-text: #4DB6AC;                   // --mn-accent-dk: solo submenú activo
$sb-active-bar:  #4DB6AC;                   // kept for §39.7 compat, no se usa como box-shadow

// 39.1 Estructura: fondo oscuro + sombra pronunciada
.page-wrapper.compact-wrapper .page-body-wrapper {
    div.sidebar-wrapper {
        background: $sb-bg;
        width: 285px;
        border-right: 1px solid $sb-border;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
    }
    .page-body {
        margin-left: 285px;
    }
}

// 39.2 Árbol completo — ruta simplebar para igualar especificidad de Cuba [0,9+,2]
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper
.sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask
.simplebar-content-wrapper .simplebar-content > li {

    // 39.2.1 Ítem top-level: texto slate oscuro
    .sidebar-link,
    .sidebar-link span,
    .sidebar-link svg {
        color: $sb-text;
        stroke: $sb-text;
        font-weight: 500;
        letter-spacing: normal;
        text-transform: none;
        font-size: 13px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    // Iconos FA (accordion arrows): peso 900 para glifos sólidos
    .sidebar-link i,
    .sidebar-link i::before {
        color: $sb-text;
        font-weight: 900;
    }

    // 39.2.2 Padding ítem top-level
    .sidebar-link.sidebar-title {
        padding: 10px 18px;
        line-height: 1.4;
    }

    // 39.2.3 Hover top-level — SOLO ítems no activos (:not(.active))
    // Blanco neutro: no confundir con el pill menta del estado activo
    .sidebar-link:not(.active):hover {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 13px;
        color: #ffffff;
        stroke: #ffffff;
    }

    // Cuba doble-hover: li:hover .sidebar-link:not(.active):hover span → --theme-default
    // Especificidad [0,14,3] — igualamos con :not(.active) + cascade order.
    &:hover {
        .sidebar-link:not(.active):hover span,
        .sidebar-link:not(.active):hover .according-menu i {
            color: #ffffff;
        }
        .sidebar-link:not(.active):hover svg {
            stroke: #ffffff;
            fill: rgba(0, 0, 0, 0.001);
        }
        // Active hover: texto blanco para visibilidad máxima
        .sidebar-link.active:hover span,
        .sidebar-link.active:hover .according-menu i {
            color: #ffffff;
        }
        .sidebar-link.active:hover svg {
            stroke: #ffffff;
            fill: none;
        }
    }

    // 39.2.4 Active top-level — pill sólido menta, texto oscuro
    .sidebar-link.active {
        background: var(--mn-active);
        border-radius: 13px;
        box-shadow: none;           // elimina barra izquierda anterior
        color: var(--mn-on-active);
        stroke: var(--mn-on-active);
        font-weight: 500;
        padding: 10px 16px;
        margin-bottom: 0;
        // Texto, icono SVG y FA explícitos para ganar a Cuba's hardcoded #7366ff
        span { color: var(--mn-on-active); }
        svg  { stroke: var(--mn-on-active); fill: none; }
        i, i::before { color: var(--mn-on-active); font-weight: 900; }
    }

    // 39.2.5 Active hover — pill oscurece, texto blanco para máxima visibilidad
    // 39.2.6 Repite con spec [0,5,1] para ganar a Cuba li.sidebar-list:hover > a:hover [0,3,2]
    .sidebar-link.active:hover,
    &.sidebar-list:hover > .sidebar-link.active:hover,
    &.sidebar-list:hover .sidebar-link.active:hover {
        background: #3FA99E;
        border-radius: 13px;
        color: #ffffff;
        stroke: #ffffff;
        span { color: #ffffff; }
        svg  { stroke: #ffffff; fill: none; }
        i, i::before { color: #ffffff; }
    }

    // Gap entre ítems para que los pills no se peguen
    .sidebar-link { margin-bottom: 4px; }

    // 39.3 Submenú: eliminar decoraciones de Cuba
    .sidebar-submenu::before { display: none; }

    // 39.4 Ítems de submenú
    .sidebar-submenu li a {
        color: $sb-text-sub;
        font-weight: 400;
        letter-spacing: normal;
        font-size: 13px;
        padding: 7px 15px 7px 42px;
        line-height: 1.4;

        &::after, &::before { display: none; }

        &:hover {
            color: $sb-active-text;
            background: transparent;
            box-shadow: none;   // sin barra izquierda en hover
        }

        &.active {
            color: $sb-active-text;  // menta — no pill, solo texto
            background: transparent;
            box-shadow: none;        // ELIMINADO: barra izquierda
            font-weight: 500;
        }
    }

    .sidebar-submenu li.active > a {
        color: $sb-active-text;
        background: transparent;
        box-shadow: none;  // ELIMINADO: barra izquierda
        font-weight: 500;
    }
}

// 39.5 Toggle icon en logo-wrapper
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
    border-bottom: 1px solid $sb-border;

    .toggle-sidebar .status_toggle,
    .toggle-sidebar svg,
    .toggle-sidebar i {
        color: $sb-text;
        stroke: $sb-text;
    }
}

// 39.6 SimpleBars scrollbar — visible sobre fondo oscuro
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    .simplebar-scrollbar::before {
        background-color: #475569; // slate-600, visible sobre dark bg
    }
    .simplebar-track.simplebar-vertical {
        width: 4px;
    }
}

// 39.7 Cuba Purple Purge — mata TODOS los morados hardcodeados de Cuba
// Cuba inyecta 6 reglas con #7366ff / #dad6ff / #f1f0ff / rgba(115,102,255,...)
// que NO usan var(--theme-default), por eso nuestro override de variable no las afecta.
// Solución: sobrescribir cada regla explícitamente.
$sb-path: ".page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content";

#{$sb-path} > li {
    // ① Barra derecha morada: #7366ff en ::after — matar completamente
    .sidebar-link::after,
    > .sidebar-link::after { display: none; opacity: 0; visibility: hidden; }

    // ② Fondo activo top-level — pill sólido (reemplaza #dad6ff / #f1f0ff de Cuba)
    > a.active,
    > .sidebar-link.active,
    .sidebar-link.active {
        background-color: var(--mn-active);
        background: var(--mn-active);
        margin-bottom: 0;
    }

    // ③ Submenú activo: sin fondo morado de Cuba, sin box-shadow
    > .sidebar-submenu li a.active,
    .sidebar-submenu li a.active {
        background-color: transparent;
        background: transparent;
        box-shadow: none;
        color: $sb-active-text;  // menta para submenú
    }

    // ④ Solo submenú: mata el #7366ff de Cuba en span.
    //    Top-level NO: el pill ya setea var(--mn-on-active) en §39.2.4 con mayor especificidad.
    .sidebar-submenu a.active,
    .sidebar-submenu a.active span { color: $sb-active-text; }
}

// ── 40. Header + Breadcrumb — paleta teal (MedNav B) ────────────────────────
// Cuba usa var(--theme-default) para muchos hover del header (ya actualizado a #009688).
// Aquí fijamos los elementos que tienen colores hardcodeados o específicos.

// 40.1 Breadcrumb activo — primary-dk para texto-link (AA ✓)
.page-wrapper .page-body-wrapper .page-body .breadcrumb-item.active,
.page-wrapper .page-body-wrapper .page-body .breadcrumb-item a {
    color: var(--mn-primary-dk);
}

// 40.2 Íconos del header hover
.page-wrapper .page-header .header-wrapper .nav-right li svg:hover,
.page-wrapper .page-header .header-wrapper .nav-right li i:hover {
    stroke: var(--mn-primary);
    color: var(--mn-primary);
}

// 40.3 Page-title (h4 del breadcrumb) — ink
.page-wrapper .page-body-wrapper .page-body .page-header .row h4 {
    color: var(--mn-ink);
}

// 40.4 Dashboard page-title icon
.page-wrapper .page-body-wrapper .page-body .page-header .row h4 svg {
    stroke: var(--mn-primary);
}

// ── 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).
// ================================================================
.lots-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

// 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: #606266;
    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: #909399; .lots-chip__label { display: none; } }

.lots-filter-label {
    font-size: 13px;
    color: #606266;
    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: #303133;
    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: #606266;
    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: #606266;
}

// 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; } }

/* ===== Migaja de reportes (eyebrow) — componente <report-eyebrow> ===== */
.report-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.1;
    margin-bottom: 3px;
}
.report-eyebrow-link {
    color: var(--mn-primary, #00796b);
    font-weight: 600;
    text-decoration: none;
}
.report-eyebrow-link:hover { text-decoration: underline; }
.report-eyebrow-sep { color: var(--mn-text-muted, #94a3b8); }
.report-eyebrow-current { color: var(--mn-text-muted, #64748b); }

// 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; }

// 44. Topbar fijo por encima del contenido. El topbar (.page-header z:8) tenía MENOS z-index
// que el encabezado de página (.page-headers z:20), así que botones del contenido (ej.
// "Aperturar caja chica POS") pisaban el dropdown del perfil. El navbar fijo debe ir arriba.
.page-header { z-index: 1030 !important; }

// ── 45. Sidebar COLAPSADO: alineación + flyout del submenú (PORTADO desde overrides.css) ──
// Antes vivía como edit directo en overrides.css y el watcher lo borraba en cada build.
// Movido a la fuente (modern.scss) para que sobreviva. Incluye: alineación de columnas
// Cuba tras sidebar 285px, ocultar texto/submenús en colapsado, y FLYOUT del submenú a la
// derecha al hover + cascada del 3er nivel (Resumen/Anulaciones, Comisiones, etc.).
/* Keep Cuba layout columns aligned after the custom 285px sidebar width.
   The base theme uses 265px expanded and temporarily re-expands the collapsed
   sidebar on hover; that creates a 20px header offset and the broken mini menu. */
@media (min-width: 992px) {
  .page-wrapper.compact-wrapper .page-header:not(.close_icon) {
    margin-left: 285px !important;
    width: calc(100% - 285px) !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper:not(.close_icon) {
    width: 285px !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper .page-body:not(.close_icon) {
    margin-left: 285px !important;
  }

  .page-wrapper.compact-wrapper .page-header.close_icon,
  .page-wrapper.compact-wrapper .page-body-wrapper .page-body.close_icon {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
  }

  .page-wrapper.compact-wrapper:has(.sidebar-wrapper.close_icon) .page-body-wrapper .page-body {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover {
    width: 80px !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon #sidebar-menu,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover #sidebar-menu,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .simplebar-content-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .simplebar-content-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .simplebar-content,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .simplebar-content {
    width: 80px !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-link {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 4px !important;
    min-height: 44px !important;
    padding: 0 !important;
    width: 72px !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-link span,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-link span,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .according-menu,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .according-menu,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-submenu,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-submenu {
    display: none !important;
  }

  /* FLYOUT: en sidebar colapsado, al hover de un item con submenu, mostrarlo a la derecha.
     Contenedores simplebar a overflow:visible para que el flyout no quede clippeado. */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-mask,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content-wrapper {
    overflow: visible !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list {
    position: relative;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu {
    display: block !important;
    position: absolute !important;
    left: 80px;
    top: 0;
    width: auto !important;
    min-width: 212px;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #1f2a3a;
    box-shadow: 4px 8px 22px rgba(0, 0, 0, 0.3);
    border-radius: 0 10px 10px 0;
    z-index: 1032 !important;
    overflow: visible !important;
    animation: mnSidebarFlyIn 0.17s ease;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu li {
    width: 100% !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu li a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: auto !important;
    padding: 8px 18px !important;
    white-space: nowrap !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu li a span {
    display: inline !important;
  }
  /* 3er nivel: CASCADA — oculto por defecto; sale a la derecha al hacer hover del item
     padre (Resumen y Anulaciones, Comisiones, Proveedores, Activos fijos, SIRE). */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu .sidebar-submenu {
    display: none !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu > li {
    position: relative;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu > li:hover > .sidebar-submenu {
    display: block !important;
    position: absolute !important;
    left: 100% !important;
    top: 0;
    width: auto !important;
    min-width: 200px;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #1f2a3a;
    box-shadow: 4px 8px 22px rgba(0, 0, 0, 0.3);
    border-radius: 0 10px 10px 0;
    z-index: 1033 !important;
    animation: mnSidebarFlyIn 0.16s ease;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu > li:hover > .sidebar-submenu li a {
    padding: 8px 18px !important;
  }
  /* indicador "›" en items de 2do nivel que abren un 3er nivel (cascada).
     Va en li::after (NO en a::after): Cuba pone display:none en .submenu-title::after
     y el <a> tiene overflow:hidden, así que el chevron en el link queda oculto. El li
     (ya position:relative arriba) no tiene ese conflicto. */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu > li:has(> .sidebar-submenu)::after {
    content: "\203A";
    display: block !important;
    position: absolute !important;
    right: 16px;
    top: 14px;
    color: var(--mn-accent-dk, #4DB6AC);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    pointer-events: none;
    z-index: 3;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu .according-menu {
    display: none !important;
  }
  /* Tanda 1 — affordance: dot teal en los iconos colapsados QUE tienen submenú, para que
     el usuario sepa de un vistazo cuáles abren un flyout (sin tener que pasar el mouse). */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:has(> .sidebar-submenu)::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mn-accent-dk, #4DB6AC);
    opacity: 0.9;
    pointer-events: none;
    z-index: 3;
  }
  /* Animación de entrada del flyout (fade + slide). Se siente más pulido. */
  @keyframes mnSidebarFlyIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu,
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-content > li.sidebar-list:hover > .sidebar-submenu > li:hover > .sidebar-submenu {
      animation: none !important;
    }
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-link svg,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-link svg {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}
/* === Perfil header: dropdown por CLICK (no hover) — UX + accesible (toggle/Escape/click-afuera) === */
#profileTrigger { cursor: pointer; }
.profile-nav { position: relative; }
.profile-nav > .onhover-show-div {
  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); }

/* ===== §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; }

/* ===== §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;
}
/* 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;
}
/* 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, #0D9488);
    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,#0D9488)). 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, #0D9488);
    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, #0D9488); 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: 14px; overflow: hidden; }
.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, #0D9488); }
.vet-ficha__tabs .el-tabs__active-bar { background-color: var(--mn-primary, #0D9488); }
.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, #0D9488);
    border-color: var(--mn-primary, #0D9488);
    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, #0D9488); 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);
}

/* ===== §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 → teal idéntico al botón general (.btn-custom = #00796B) */
.vet-ui .btn.btn-xs.btn-primary { background-color:#00796B !important; border-color:#00796B !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:#005f54 !important; border-color:#005f54 !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; }
.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,#0D9488) 12%, #fff); box-shadow: inset 3px 0 0 var(--mn-primary,#0D9488); }
.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,#0D9488); 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,#0D9488); }
.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; }
.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,#0D9488); box-shadow:0 2px 10px rgba(13,148,136,.08); color:#1f2d3d; }
.clinica-tile > i { font-size:22px; color:var(--mn-primary,#0D9488); 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; }

/* 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) {
    .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-*) ---- */
.clinica-doctor .cdoc-banner {
  background: linear-gradient(135deg, var(--mn-primary, #0D9488) 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,#0D9488); 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,#0d9488); 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,#0d9488); 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,#0d9488); margin-right:6px; }
.clinica-doctor .cdoc-count { font-size:12px; font-weight:700; color:#fff; background:var(--mn-primary,#0d9488);
  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,#0d9488); 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; }
.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,#0d9488); }
.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,#0d9488); }
.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, #0D9488) 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,#0D9488); 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,#0D9488); 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 { 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,#0D9488); 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,#0D9488); 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; }

/* ====== §45 Navegación MÓVIL — drawer del sidebar (hamburguesa + backdrop) ======
   El tema Cuba deja el sidebar como rail de solo-iconos en móvil y solo lo expande con hover
   (roto en touch). Lo convertimos en un drawer off-canvas: hamburguesa visible en el header +
   sidebar completo (etiquetas + submenús acordeón) que entra como overlay con backdrop y cierre.
   TODO gateado a <992px (breakpoint lg, igual que el `d-lg-none` del header) → NO toca desktop.
   Reusa el markup existente (.header-logo-wrapper .toggle-sidebar) + JS mínimo en header.blade. */
.mn-nav-backdrop { display:none; }
@media (max-width: 991.98px) {
  /* Header a todo el ancho (saca el offset de 80px que dejaba el rail) */
  .page-header { margin-left:0 !important; width:100% !important; }
  /* Contenedor del hamburger visible; el logo del header se oculta en móvil (ya está en el drawer) */
  .header-logo-wrapper {
    display:flex !important; align-items:center; width:auto !important; min-height:44px; padding-left:4px;
  }
  .header-logo-wrapper .logo-wrapper { display:none !important; }
  /* Hamburguesa: ESTÁTICA (el tema la ponía absolute → flotaba fuera del header) + 44px touch */
  .header-logo-wrapper .toggle-sidebar {
    position:static !important; display:flex !important; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; margin:0; cursor:pointer; border-radius:8px; flex:0 0 auto;
  }
  .header-logo-wrapper .toggle-sidebar i { color: var(--mn-primary, #009688); width:24px; height:24px; }
  .header-logo-wrapper .toggle-sidebar:active { background: rgba(0,0,0,.06); }
  /* Top del drawer: dejar SOLO el logo. Ocultar los toggles del tema (colapsar rail "<" + grid "▦")
     que en un drawer móvil no aplican (se cierra con el backdrop / tap fuera / Esc). */
  .sidebar-wrapper .logo-wrapper .toggle-sidebar,
  .sidebar-wrapper .logo-wrapper .status_toggle,
  .sidebar-wrapper .logo-wrapper i.fa-angle-left,
  .sidebar-wrapper .logo-icon-wrapper { display:none !important; }
  .sidebar-wrapper .logo-wrapper { padding:14px 16px !important; }

  /* Sidebar = drawer off-canvas (entra desde la izquierda) */
  .page-wrapper .sidebar-wrapper,
  .sidebar-wrapper {
    position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
    width:278px !important; max-width:86vw;
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.2,0,0,1);
    z-index:1100 !important; overflow-y:auto; overflow-x:hidden !important;
    border:0 !important; box-shadow:2px 0 24px rgba(0,0,0,.4) !important;
    scrollbar-width:none !important; -ms-overflow-style:none !important;   /* oculta scrollbar (track blanco) — sigue scrolleable por touch */
  }
  /* mata el track blanco de la scrollbar del drawer (era la "línea blanca" del borde) */
  .page-wrapper .sidebar-wrapper::-webkit-scrollbar,
  .sidebar-wrapper::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }
  body.mn-mobile-nav-open .page-wrapper .sidebar-wrapper,
  body.mn-mobile-nav-open .sidebar-wrapper { transform:translateX(0) !important; }

  /* Mostrar SIEMPRE etiquetas + submenús como acordeón (anula el icon-only del tema) */
  .sidebar-wrapper .sidebar-title span,
  .sidebar-wrapper .sidebar-link span,
  .sidebar-wrapper .sidebar-list a span { display:inline-block !important; opacity:1 !important; }
  /* Submenús: ACORDEÓN — colapsados por defecto; se abren al tap del padre (o la sección activa) */
  .sidebar-wrapper .sidebar-submenu {
    display:none !important; position:static !important; box-shadow:none !important;
    background:transparent !important; padding-left:34px;
  }
  .sidebar-wrapper .sidebar-list.mn-open > .sidebar-submenu { display:block !important; }
  .sidebar-wrapper .sidebar-submenu a { padding-top:9px !important; padding-bottom:9px !important; } /* touch */
  .sidebar-wrapper .sidebar-link { padding-top:12px !important; padding-bottom:12px !important; } /* touch */
  /* Flecha indicadora (chevron) en los padres con submenú; rota al abrir */
  .sidebar-wrapper .sidebar-list.mn-has-sub > a.sidebar-title { position:relative; }
  /* Flecha = icono FontAwesome (fa-angle-down, el set que usa el proyecto), no un chevron CSS */
  .sidebar-wrapper .sidebar-list.mn-has-sub > a.sidebar-title::after {
    content:"\f107" !important; font-family:"Font Awesome 6 Free" !important; font-weight:900 !important;
    position:absolute !important; right:16px !important; left:auto !important; top:50% !important; bottom:auto !important;
    width:auto !important; height:auto !important; margin:0 !important; border:0 !important; background:none !important;
    color:#c3ccd6 !important; font-size:15px !important; line-height:1 !important;
    transform:translateY(-50%); transition:transform .2s ease;
    opacity:.9 !important; visibility:visible !important; display:block !important;
  }
  .sidebar-wrapper .sidebar-list.mn-has-sub.mn-open > a.sidebar-title::after {
    transform:translateY(-50%) rotate(180deg) !important;
  }
  .sidebar-wrapper .according-menu { display:none !important; }

  /* Contenido a todo el ancho (sin el margen que dejaba el rail) */
  .page-body-wrapper .page-body,
  .page-body-wrapper.sidebar-icon .page-body,
  .page-body-wrapper .footer,
  footer.footer { margin-left:0 !important; }

  /* Backdrop */
  .mn-nav-backdrop {
    display:block; position:fixed; inset:0; background:rgba(10,14,22,.72);
    z-index:1099 !important; opacity:0; visibility:hidden; transition:opacity .26s;
  }
  body.mn-mobile-nav-open .mn-nav-backdrop { opacity:1; visibility:visible; }
  body.mn-mobile-nav-open { overflow:hidden; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .sidebar-wrapper, .mn-nav-backdrop { transition:none !important; }
}

/* ====== §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; }

/* ====== §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. */
.atc-select-popper .el-select-dropdown__item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== §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;
}

/* Cabecera de reporte en una sola linea (icono + titulo), sin repetir el titulo
   dos veces (breadcrumb chico + h3 grande). Icono = link de vuelta a /list-reports. */
.mn-report-title-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mn-ink);
  text-decoration: none;
}
.mn-report-title-line:hover {
  color: var(--mn-primary-dk);
}
.mn-report-title-line i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--mn-primary-lt);
  color: var(--mn-primary-dk);
  font-size: 0.9375rem;
}
// 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;
}

/* 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%;
}

// ── 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;
  }
}