/* ===================================================================
 * Tenant brand — paleta cálida unificada (terracota + stone)
 *
 * Todos los colores comparten temperatura. No hay azules ni rojos
 * saturados. La diferenciación se logra con tono y saturación,
 * no cambiando de familia.
 * =================================================================== */

:root {
    /* === Brand (terracota / naranja quemado) === */
    --brand:         #ea580c;
    --brand-deep:    #9a3412;
    --brand-soft:    #fdba74;
    --brand-bg:      #fff7ed;
    --brand-ring:    rgba(234, 88, 12, 0.18);

    /* === Neutros cálidos (stone family) === */
    --ink-strong:    #1c1917;
    --ink:           #292524;
    --ink-soft:      #57534e;
    --ink-faint:     #a8a29e;

    --surface:       #ffffff;
    --surface-soft:  #fafaf9;
    --surface-mute:  #f5f5f4;
    --surface-deep:  #e7e5e4;

    --line:          #e7e5e4;
    --line-soft:     #f1efed;

    /* === Semánticos en la MISMA familia cálida === */
    /* Success: oliva (verde tierra, no esmeralda) */
    --success:       #4d7c0f;
    --success-bg:    #f7fee7;
    --success-line:  #bef264;

    /* Warning: ámbar (hermano del brand) */
    --warning:       #b45309;
    --warning-bg:    #fef3c7;
    --warning-line:  #fcd34d;

    /* Danger: terracota oscuro (no rojo cherry) */
    --danger:        #b45309;       /* placeholder — sobre-escrito abajo si quieres rojo */
    --danger:        #a93116;       /* rojo terracota oscuro, calientísimo */
    --danger-bg:     #fef2f2;
    --danger-line:   #fca5a5;

    /* Info: NO es azul. Es neutro ink-soft con fondo cálido */
    --info:          #57534e;
    --info-bg:       #f5f5f4;
    --info-line:     #d6d3d1;

    /* ===================================================================
     * Overrides de variables `--fai-*` que usa custom_styles.css.
     * Al redefinirlas aquí (load order: custom_styles -> tenant_brand),
     * todos los gradientes/botones construidos con esas variables se
     * tiñen automáticamente con la paleta cálida.
     * =================================================================== */
    --fai-brand-1:   #ea580c;            /* terracota */
    --fai-brand-2:   #f97316;            /* naranja medio */
    --fai-brand-3:   #fb923c;            /* naranja claro */
    --fai-success:   #4d7c0f;            /* oliva tierra */
    --fai-warn:      #b45309;            /* ámbar oscuro */
    --fai-danger:    #a93116;            /* terracota oscuro */
    --fai-text:      #1c1917;            /* stone-900 */
    --fai-muted:     #57534e;            /* stone-600 */
    --fai-surface:   #ffffff;
    --fai-bg:        #fafaf9;            /* stone-50 */
    --fai-border:    #e7e5e4;            /* stone-200 */
}

/* ===================================================================
 * TIPOGRAFÍA
 * =================================================================== */
body,
.content-body,
.nav-main {
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.page-header h2,
.card-header,
.modal-title {
    color: var(--ink-strong);
    font-weight: 700;
    letter-spacing: -0.005em;
}
.text-muted,
small.text-muted,
.form-text {
    color: var(--ink-soft) !important;
}
label,
.form-label {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ===================================================================
 * BOTONES — sistema unificado (todos comparten geometría)
 * =================================================================== */
.btn {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    border-radius: 8px !important;
    border-width: 1px !important;
    padding: 0.5rem 1.05rem;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.2s ease, transform 0.08s ease;
    line-height: 1.45;
}
.btn:active { transform: translateY(1px); }
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 4px var(--brand-ring) !important;
    outline: none !important;
}
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; border-radius: 7px !important; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; border-radius: 9px !important; }
.btn:disabled,
.btn.disabled { opacity: 0.55 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* --- Primary (brand terracota) --- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.20);
}
.btn-primary:hover {
    background-color: var(--brand-deep) !important;
    border-color: var(--brand-deep) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(234, 88, 12, 0.28) !important;
}
.btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--brand) !important;
    color: #fff !important;
}

/* --- Secondary (ink oscuro stone) --- */
.btn-secondary,
.btn-default {
    background-color: var(--ink-strong) !important;
    border-color: var(--ink-strong) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.18);
}
.btn-secondary:hover,
.btn-default:hover {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}
.btn-outline-secondary {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background: #fff !important;
}
.btn-outline-secondary:hover {
    background: var(--surface-mute) !important;
    border-color: var(--ink-soft) !important;
    color: var(--ink-strong) !important;
}

/* --- Light (surface mute, neutro cálido) --- */
.btn-light {
    background-color: var(--surface-mute) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.btn-light:hover {
    background-color: var(--surface-deep) !important;
    color: var(--ink-strong) !important;
    border-color: var(--surface-deep) !important;
}

/* --- Dark --- */
.btn-dark {
    background-color: var(--ink-strong) !important;
    border-color: var(--ink-strong) !important;
    color: #fff !important;
}
.btn-dark:hover {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}

/* --- Success (oliva tierra) --- */
.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(77, 124, 15, 0.22);
}
.btn-success:hover {
    background-color: #365314 !important;
    border-color: #365314 !important;
    color: #fff !important;
}
.btn-outline-success {
    color: var(--success) !important;
    border-color: var(--success) !important;
    background: transparent !important;
}
.btn-outline-success:hover { background: var(--success) !important; color: #fff !important; }

/* --- Danger (terracota oscuro, no rojo flúor) --- */
.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(169, 49, 22, 0.22);
}
.btn-danger:hover {
    background-color: #7c2d12 !important;
    border-color: #7c2d12 !important;
    color: #fff !important;
}
.btn-outline-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background: transparent !important;
}
.btn-outline-danger:hover { background: var(--danger) !important; color: #fff !important; }

/* --- Warning (ámbar — hermano del brand) --- */
.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.20);
}
.btn-warning:hover {
    background-color: #78350f !important;
    border-color: #78350f !important;
    color: #fff !important;
}
.btn-outline-warning {
    color: var(--warning) !important;
    border-color: var(--warning) !important;
    background: transparent !important;
}
.btn-outline-warning:hover { background: var(--warning) !important; color: #fff !important; }

/* --- Info (NEUTRO CÁLIDO, no azul) --- */
.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(87, 83, 78, 0.18);
}
.btn-info:hover {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}
.btn-outline-info {
    color: var(--info) !important;
    border-color: var(--line) !important;
    background: #fff !important;
}
.btn-outline-info:hover {
    background: var(--surface-mute) !important;
    color: var(--ink-strong) !important;
}

/* --- Link --- */
.btn-link {
    color: var(--brand) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.btn-link:hover {
    color: var(--brand-deep) !important;
    text-decoration: underline !important;
}

/* Grupos de botones */
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }
.btn-group .btn:last-child  { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }

/* ===================================================================
 * UTILIDADES (text-*, bg-*, border-*)
 * =================================================================== */
.text-primary  { color: var(--brand) !important; }
.text-success  { color: var(--success) !important; }
.text-danger   { color: var(--danger) !important; }
.text-warning  { color: var(--warning) !important; }
.text-info     { color: var(--info) !important; }
.text-secondary{ color: var(--ink-soft) !important; }
.text-dark     { color: var(--ink-strong) !important; }

.bg-primary    { background-color: var(--brand) !important; color: #fff !important; }
.bg-success    { background-color: var(--success) !important; color: #fff !important; }
.bg-danger     { background-color: var(--danger) !important; color: #fff !important; }
.bg-warning    { background-color: var(--warning) !important; color: #fff !important; }
.bg-info       { background-color: var(--info) !important; color: #fff !important; }
.bg-light      { background-color: var(--surface-mute) !important; }
.bg-dark       { background-color: var(--ink-strong) !important; color: #fff !important; }

.border-primary { border-color: var(--brand) !important; }

/* ===================================================================
 * LINKS
 * =================================================================== */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--brand);
    transition: color 0.15s ease;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--brand-deep);
}

/* ===================================================================
 * BADGES — soft consistente
 * =================================================================== */
.badge {
    font-weight: 600;
    padding: 0.32em 0.6em;
    border-radius: 6px;
    letter-spacing: 0.01em;
}
.badge-primary  { background-color: var(--brand-bg) !important;    color: var(--brand-deep) !important; }
.badge-success  { background-color: var(--success-bg) !important;  color: var(--success) !important; }
.badge-danger   { background-color: var(--danger-bg) !important;   color: var(--danger) !important; }
.badge-warning  { background-color: var(--warning-bg) !important;  color: var(--warning) !important; }
.badge-info     { background-color: var(--info-bg) !important;     color: var(--info) !important; }
.badge-light    { background-color: var(--surface-mute) !important; color: var(--ink) !important; }
.badge-dark     { background-color: var(--ink-strong) !important;  color: #fff !important; }
.badge-secondary{ background-color: var(--surface-mute) !important; color: var(--ink-soft) !important; }

.badge-pill { border-radius: 999px; }
.badge-up.badge-danger { background: var(--danger) !important; color: #fff !important; }
.badge-up.badge-info   { background: var(--brand) !important; color: #fff !important; }
.badge-up.badge-success{ background: var(--success) !important; color: #fff !important; }

/* ===================================================================
 * FORMS
 * =================================================================== */
.form-control,
.custom-select {
    border-color: var(--line);
    border-radius: 8px;
    color: var(--ink);
    background-color: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-ring) !important;
}
.form-control::placeholder { color: var(--ink-faint); }

.input-group-text {
    background-color: var(--surface-mute);
    border-color: var(--line);
    color: var(--ink-soft);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* ===================================================================
 * ELEMENT UI
 * =================================================================== */
.el-button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.el-button--primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
    background-color: var(--brand-deep) !important;
    border-color: var(--brand-deep) !important;
    color: #fff !important;
}
.el-button--success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}
.el-button--success:hover { background-color: #365314 !important; border-color: #365314 !important; color: #fff !important; }

.el-button--danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}
.el-button--danger:hover { background-color: #7c2d12 !important; border-color: #7c2d12 !important; color: #fff !important; }

.el-button--warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
}
.el-button--warning:hover { background-color: #78350f !important; border-color: #78350f !important; color: #fff !important; }

.el-button--info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #fff !important;
}
.el-button--info:hover { background-color: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }

.el-button--text { color: var(--brand) !important; }
.el-button--text:hover { color: var(--brand-deep) !important; }
.el-button--default {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background: #fff !important;
}
.el-button--default:hover {
    background: var(--surface-mute) !important;
    border-color: var(--ink-soft) !important;
    color: var(--ink-strong) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--brand) !important; }
.el-radio__input.is-checked .el-radio__inner {
    border-color: var(--brand) !important;
    background: var(--brand) !important;
}
.el-radio__input.is-checked + .el-radio__label { color: var(--brand) !important; }

.el-switch.is-checked .el-switch__core {
    border-color: var(--brand) !important;
    background-color: var(--brand) !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.el-select .el-input.is-focus .el-input__inner,
.el-input__inner:focus,
.el-textarea__inner:focus {
    border-color: var(--brand) !important;
}
.el-select-dropdown__item.selected { color: var(--brand) !important; font-weight: 600 !important; }

.el-tag,
.el-tag--light {
    background-color: var(--brand-bg) !important;
    color: var(--brand-deep) !important;
    border-color: rgba(234, 88, 12, 0.22) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
.el-tag.el-tag--success { background-color: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-line) !important; }
.el-tag.el-tag--danger  { background-color: var(--danger-bg) !important;  color: var(--danger) !important;  border-color: var(--danger-line) !important; }
.el-tag.el-tag--warning { background-color: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; }
.el-tag.el-tag--info    { background-color: var(--info-bg) !important;    color: var(--info) !important;    border-color: var(--info-line) !important; }

.el-loading-spinner .path { stroke: var(--brand) !important; }
.el-progress-bar__inner { background-color: var(--brand) !important; }

.el-message-box__btns .el-button--primary,
.el-dialog .el-button--primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* ===================================================================
 * TABLAS
 * =================================================================== */
.table thead th {
    color: var(--ink-strong);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--surface-soft);
    border-bottom: 2px solid var(--line);
}
.table td, .table th { vertical-align: middle; border-color: var(--line-soft); }
.table-hover tbody tr:hover { background-color: var(--brand-bg); }
.el-table th { background: var(--surface-soft) !important; color: var(--ink-strong) !important; font-weight: 700 !important; }
.el-table tr:hover > td { background: var(--brand-bg) !important; }

/* ===================================================================
 * CARDS
 * =================================================================== */
.card {
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}
.card-header {
    background-color: var(--surface-soft);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 700;
}

/* ===================================================================
 * ALERTS — soft, todos en familia cálida
 * =================================================================== */
.alert {
    border-radius: 10px;
    border-width: 1px;
    font-weight: 500;
}
.alert-primary { background: var(--brand-bg) !important;   color: var(--brand-deep) !important; border-color: rgba(234, 88, 12, 0.22) !important; }
.alert-success { background: var(--success-bg) !important; color: var(--success) !important;    border-color: var(--success-line) !important; }
.alert-danger  { background: var(--danger-bg) !important;  color: var(--danger) !important;     border-color: var(--danger-line) !important; }
.alert-warning { background: var(--warning-bg) !important; color: var(--warning) !important;    border-color: var(--warning-line) !important; }
.alert-info    { background: var(--info-bg) !important;    color: var(--info) !important;       border-color: var(--info-line) !important; }

/* ===================================================================
 * NAV / SIDEBAR
 * =================================================================== */
.nav-main .nav-link:hover,
.nav-main .nav-link.nav-active,
.nav-main .nav-active > .nav-link {
    color: var(--brand) !important;
}
.nav-main .nav-active > .nav-link::before,
.nav-main .nav-link.nav-active::before {
    background: var(--brand) !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: var(--brand) !important;
    color: var(--brand) !important;
    font-weight: 600;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.notification-icon:hover,
.notifications a:hover { color: var(--brand) !important; }

.btn-sunat.btn-primary,
.btn-sunat.btn-success,
.btn-sunat.btn-info,
.btn-sunat.btn-danger {
    background-color: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}

/* ===================================================================
 * PAGE HEADER
 * =================================================================== */
.page-header h2 i,
.page-header .breadcrumbs li.active span,
.page-header .breadcrumbs li.active a {
    color: var(--brand) !important;
}
.page-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink-strong);
}

/* ===================================================================
 * DROPDOWNS
 * =================================================================== */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.10);
    z-index: 1080 !important;
}
.dropdown-menu.show,
.dropdown-menu[style*="transform"] {
    z-index: 10500 !important;
}
/* La fila/celda con un dropdown abierto se eleva sobre las demás */
tr td .dropdown.show,
tr td .dropdown > .show,
.dropdown.show {
    position: relative !important;
    z-index: 10500 !important;
}
/* Permite que dropdowns dentro de cards no queden recortados */
.content-body > .card,
.card > .card-body { overflow: visible !important; }
.dropdown-item {
    color: var(--ink);
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.dropdown-item:hover {
    background-color: var(--brand-bg) !important;
    color: var(--brand-deep) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand) !important;
    color: #fff !important;
}

/* ===================================================================
 * SWEETALERT
 * =================================================================== */
.swal2-confirm.swal2-styled {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.swal2-confirm.swal2-styled:hover {
    background-color: var(--brand-deep) !important;
    border-color: var(--brand-deep) !important;
}
.swal2-cancel.swal2-styled {
    background-color: var(--surface-mute) !important;
    color: var(--ink) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* ===================================================================
 * MODAL
 * =================================================================== */
.modal-content {
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(28, 25, 23, 0.15);
}
.modal-header {
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-soft);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.modal-title { font-weight: 700; color: var(--ink-strong); }

/* ===================================================================
 * MISC
 * =================================================================== */
::selection { background: var(--brand-bg); color: var(--brand-deep); }
.spinner-border.text-primary { color: var(--brand) !important; }
hr { border-color: var(--line-soft); }

/* ===================================================================
 * SPACING — compactar el contenedor principal
 * porto-light pone 40px de padding y 40px entre filas, demasiado.
 * =================================================================== */
.content-body {
    padding: 0.4rem 1.2rem 0.9rem !important;
    margin-top: -12px !important;          /* sube el bloque para pegarlo al header */
}
.content-body:not(.card-margin) > .row + .row {
    padding-top: 12px !important;
}
.page-header {
    margin: 0 0 0.35rem !important;
    padding: 0 0 0.25rem !important;
}
.page-header h2 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
}
.page-header .breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.78rem;
}
.page-header .right-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.content-body > .card:first-child,
.content-body > .row:first-child,
.content-body > section:first-child,
.content-body > div:first-child {
    margin-top: 0 !important;
}
@media (max-width: 767px) {
    .content-body {
        padding: 0.3rem 0.8rem 0.8rem !important;
        margin-top: -8px !important;
    }
}

/* Excepciones: vistas que dependen de cálculos verticales fijos.
   Sus contenedores propios setean su propia altura/espaciado, así que
   neutralizamos el margin negativo para no aplastarlas. */
.content-body.content-body-r,
.page-pos .content-body,
body.page-document-form .content-body {
    margin-top: 0 !important;
}

/* ===================================================================
 * LISTADOS — Refinamiento visual del componente <data-table>
 * Aplica a Ventas, Compras, Inventario, Items, Persons y todos los
 * módulos que usen el componente DataTable.vue.
 * =================================================================== */

/* Botón "Mostrar/Ocultar filtros" más discreto, secundario */
.btn-show-filter,
.btn-show-filter.el-button--primary {
    background: var(--surface-mute) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
}
.btn-show-filter:hover {
    background: var(--brand-bg) !important;
    color: var(--brand-deep) !important;
    border-color: rgba(234, 88, 12, 0.22) !important;
}
.btn-show-filter::before {
    content: "\f0b0";  /* fa-filter */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.45rem;
    font-size: 0.78rem;
    opacity: 0.7;
}
.btn-show-filter.shift::before { opacity: 1; color: var(--brand); }

/* Caja de filtros — separador visual al expandirse */
.filter-container .filter-content {
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 0.85rem 1rem 0.35rem !important;
    margin-top: 0.4rem;
    animation: dtFilterIn 0.25s ease both;
}
@keyframes dtFilterIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.filter-container .filter-content > div { padding-bottom: 0 !important; }

/* "Filtrar por:" label */
.filter-container .filter-content div[style*="width:100px"],
.filter-container .filter-content div[style*="width: 100px"] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 36px;
}

/* Selector de columnas visibles ("Mostrar/ocultar columnas") */
.data-table-visible-columns {
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 0.45rem 0.75rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}

/* Wrapper de tabla */
.table-responsive-new {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
    overflow-x: auto;
}
.table-responsive-new table.table {
    margin-bottom: 0 !important;
}
/* Mensaje "Cargando..." / "Sin resultados" centrado */
.table-responsive-new td.text-center[colspan] {
    padding: 1.6rem 1rem !important;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

/* Paginación de Element UI — botones con paleta cálida */
.el-pagination {
    padding: 0.75rem 0 0.2rem !important;
    text-align: right;
}
.el-pagination button,
.el-pagination .el-pager li {
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    min-width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 2px !important;
    border: 1px solid transparent !important;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.el-pagination .el-pager li:hover,
.el-pagination button:hover:not(:disabled) {
    background: var(--brand-bg) !important;
    color: var(--brand-deep) !important;
    border-color: rgba(234, 88, 12, 0.18) !important;
}
.el-pagination .el-pager li.active {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}
.el-pagination button:disabled {
    opacity: 0.45;
}

/* Total de registros (texto a la izquierda en algunos listados) */
.dt-info {
    font-size: 0.82rem;
    color: var(--ink-soft);
    padding: 0.5rem 0;
}

/* Botones de acción en filas (Editar / Imprimir / etc.) más compactos */
.table-responsive-new .btn,
.table-responsive-new .btn-default,
.table-responsive-new .btn-custom {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
    margin: 1px 1px !important;
}
.table-responsive-new .btn .fa,
.table-responsive-new .btn .fas { font-size: 0.78rem; }

/* Botones "Nuevo registro" / acciones principales en el page-header */
.page-header .btn,
.page-header .right-wrapper .btn {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.85rem !important;
}

/* Toolbar superior: dejar la fila del datatable más ligera */
.btn-filter-content {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

/* ===================================================================
 * SIDEBAR — Modo colapsado (íconos solamente)
 * Antes el scrollbar custom tapaba los íconos; al expandir-hover el
 * contenido quedaba comprimido. Solución: que al hover, el sidebar
 * FLOTE sobre el contenido (no empuje) y muestre todo a 300px.
 * =================================================================== */
@media (min-width: 768px) {
    /* Sidebar colapsado: oculto el scrollbar custom y uso uno nativo fino */
    html.sidebar-left-collapsed .sidebar-left .nano-pane {
        display: none !important;
    }
    html.sidebar-left-collapsed .sidebar-left .nano,
    html.sidebar-left-collapsed .sidebar-left .nano-content {
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.20) transparent;
        right: 0 !important;
    }
    html.sidebar-left-collapsed .sidebar-left .nano-content::-webkit-scrollbar { width: 4px; }
    html.sidebar-left-collapsed .sidebar-left .nano-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.20);
        border-radius: 4px;
    }
    html.sidebar-left-collapsed .sidebar-left .nano-content::-webkit-scrollbar-thumb:hover {
        background: var(--brand);
    }

    /* En modo colapsado, los íconos van centrados en la columna de 73px */
    html.sidebar-left-collapsed .sidebar-left .nav-main .nav-link {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hover del ítem en colapsado: tono cálido */
    html.sidebar-left-collapsed .sidebar-left .nav-main .nav-link:hover {
        background-color: var(--brand-bg) !important;
        color: var(--brand-deep) !important;
    }

    /* ====== Comportamiento expand-on-hover ======
       Cuando paseás el mouse sobre la barra, el sidebar FLOTA sobre el
       contenido a 300px (no empuja el resto). Sale con sombra. */
    html.sidebar-left-collapsed .sidebar-left:hover {
        width: 300px !important;
        z-index: 10050 !important;
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18);
        transition: width 0.18s ease;
    }
    /* El contenido NO se mueve porque mantenemos el ancho original del table-cell */
    html.sidebar-left-collapsed .inner-wrapper .content-body,
    html.sidebar-left-collapsed .content-body { transition: none; }

    /* Cuando hover está activo, layout flex izquierda + textos visibles */
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main .nav-link {
        text-align: left !important;
        padding-left: 18px !important;
        padding-right: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main .nav-link > svg,
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main .nav-link > i,
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main .nav-link > .feather {
        margin: 0 10px 0 0 !important;
    }
    /* Los textos del menú vuelven a aparecer al expandir */
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main a span,
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main a small {
        visibility: visible !important;
    }
    /* Submenús (nav-children) visibles al expandir */
    html.sidebar-left-collapsed .sidebar-left:hover .nav-main .nav-expanded > ul.nav-children {
        display: block !important;
    }
}

/* ===================================================================
 * OVERRIDES AGRESIVOS (gana sobre custom_styles.css con gradientes)
 *
 * custom_styles.css usa `background: linear-gradient(...)` con valores
 * HARDCODED (turquesa, rosa, amarillo, azul-pálido) que no se pueden
 * teñir solo con variables. Aquí los aplastamos.
 * =================================================================== */
.btn-primary,
.btn-custom {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-custom:hover {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%) !important;
    color: #fff !important;
}

.btn-info {
    background: linear-gradient(135deg, var(--ink-soft) 0%, var(--ink) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-info:hover {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-strong) 100%) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, #65a30d 0%, var(--success) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, var(--success) 0%, #365314 100%) !important;
    color: #fff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #c2410c 0%, var(--danger) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger) 0%, #7c2d12 100%) !important;
    color: #fff !important;
}

.btn-warning {
    background: linear-gradient(135deg, #d97706 0%, var(--warning) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning) 0%, #78350f 100%) !important;
    color: #fff !important;
}

.el-button--primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
    border-color: transparent !important;
}
.el-button--primary:hover {
    background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%) !important;
}

/* Tablas: aplastar fondos azul pálido (#f6f9fc) */
.table-responsive-new table.table thead th,
.content-body table.table thead th {
    background: var(--surface-soft) !important;
    color: var(--ink-strong) !important;
    border-bottom: 1px solid var(--line) !important;
}
.table-responsive-new table.table tbody tr:hover td,
.content-body table.table tbody tr:hover td {
    background-color: var(--brand-bg) !important;
}
.btn-default:hover {
    background: var(--surface-mute) !important;
    border-color: var(--ink-soft) !important;
    color: var(--ink-strong) !important;
}

/* Cualquier elemento con sombra azul de la paleta antigua */
*[style*="rgba(17, 113, 239"],
*[style*="rgba(17,113,239"] {
    box-shadow: 0 4px 12px var(--brand-ring) !important;
}