/* ============================
   THEME: CORPORATIVA MINIMALISTA
   ============================ */

:root {
    --bs-primary: #B76740;
    --bs-primary-rgb: 183, 103, 64;

    --bs-secondary: #C9B5A6;
    --bs-secondary-rgb: 201, 181, 166;

    --bs-dark: #1E1E1E;
    --bs-dark-rgb: 30, 30, 30;

    --bs-body-bg: #F5F1EE;
    --bs-body-bg-rgb: 245, 241, 238;

    --bs-link-color: #B76740;
    --bs-link-hover-color: #8f532f;

    --color-primary: #B76740;
    --color-primary-dark: #8f532f;
    --color-primary-soft: #F7E5DA;

    --color-secondary: #C9B5A6;
    --color-secondary-soft: #F0E3D8;

    --color-bg: #F5F1EE;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F7F3F0;
    --color-border-soft: #E2D7CF;

    --color-text-main: #1E1E1E;
    --color-text-muted: #7A6F67;

    --sidebar-bg: #1E1E1E;
    --sidebar-bg-alt: #151515;
    --sidebar-border: #000000;

    --sidebar-text: #F5F1EE;
    --sidebar-text-muted: #9A9087;
    --sidebar-icon: #B76740;

    --sidebar-active-bg: #B76740;
    --sidebar-active-border: #C9B5A6;
    --sidebar-active-text: #FFFFFF;

    --sidebar-badge-bg: #C9B5A6;
    --sidebar-badge-text: #1E1E1E;


}


/* BOTONES */
.btn-primary,
.btn-primary:visited {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #1b242e;
    border-color: #1b242e;
}

/* BADGES + TEXT + BG */
.badge.bg-primary,
.badge-primary,
.bg-primary {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}
.badge.bg-secondary,
.badge-secondary,
.bg-secondary {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }

/* ALERTS */
.alert-primary {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.alert-secondary {
    background-color: var(--color-secondary-soft);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.alert-warning {
    background-color: rgba(255, 209, 140, 0.2);
    border-color: #FFD18C;
    color: #8a5c18;
}

/* CARDS */
.card {
    background-color: var(--color-surface);
    border-color: var(--color-border-soft);
}
.card-header {
    background-color: var(--color-surface-alt);
    border-bottom-color: var(--color-border-soft);
}
.card-title,
.card-header h5,
.card-header h4 {
    color: var(--color-text-main);
}
.card-text,
.text-muted {
    color: var(--color-text-muted) !important;
}

/* Opcional: tablas dentro de cards */
.table thead th {
    color: var(--color-text-muted);
    border-bottom-color: var(--color-border-soft);
}
.table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.01);
}

/* ---------- Select2 (ya adaptado al tema) ---------- */

.select2-container .select2-selection--single {
    border-color: #C9B5A6;
    background-color: #FFFFFF;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-main);
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    outline: none;
    box-shadow: 0 0 0 1px rgba(183, 103, 64, 0.25);
}
.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #FFD18C;
    color: var(--color-secondary);
}
.select2-results__option--selected {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.select2-dropdown {
    border-color: #C9B5A6;
}

/* ============================
   SIDEBAR + NAV + USER CARD
   (común a todos los themes)
   ============================ */

.pc-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    color: var(--sidebar-text) !important;
}

.pc-sidebar .navbar-wrapper {
    background-color: var(--sidebar-bg) !important;
}

/* Logo / header */
.pc-sidebar .m-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--sidebar-border);
    background-color: var(--sidebar-bg-alt) !important;
}

.pc-sidebar .b-brand,
.pc-sidebar .b-brand.text-primary {
    color: var(--sidebar-text) !important;
}

/* TITULOS DEL MENU (Navigation, etc.) */
.pc-item.pc-caption label {
    display: block;
    padding: 0.75rem 1.75rem 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sidebar-text-muted) !important;
}

/* LINKS PRINCIPALES (Primera capa del menú) */
.pc-navbar .pc-item > .pc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.75rem;
    margin: 0.15rem 0.75rem;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    color: var(--sidebar-text) !important;
    background-color: transparent;
    transition: all 0.15s ease;
}

/* ICONOS PRINCIPALES */
.pc-navbar .pc-item > .pc-link .pc-micon i,
.pc-navbar .pc-item > .pc-link .pc-micon svg {
    font-size: 1.1rem;
    color: var(--sidebar-icon) !important;
}

/* Hover en menú principal */
.pc-navbar .pc-item > .pc-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text) !important;
}

/* FLECHA */
.pc-navbar .pc-item .pc-link .pc-arrow i {
    color: var(--sidebar-text-muted) !important;
}

/* ACTIVO / MENÚ ABIERTO */
.pc-navbar .pc-item.active > .pc-link,
.pc-navbar .pc-item > .pc-link.active,
.pc-navbar .pc-item.pc-hasmenu.open > .pc-link {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.pc-navbar .pc-item.active > .pc-link .pc-micon i,
.pc-navbar .pc-item.pc-hasmenu.open > .pc-link .pc-micon i {
    color: var(--sidebar-active-text) !important;
}

.pc-navbar .pc-item.active > .pc-link .pc-arrow i,
.pc-navbar .pc-item.pc-hasmenu.open > .pc-link .pc-arrow i {
    color: var(--sidebar-active-text) !important;
}

/* ===============================
   SUBMENÚ (segunda capa)
   =============================== */

.pc-submenu {
    padding-left: 0.5rem;
    margin: 0.25rem 0 0.5rem 1.5rem;
    border-left: 1px solid var(--submenu-border) !important;
}

.pc-submenu .pc-item .pc-link {
    padding: 0.45rem 1.25rem;
    margin: 0.05rem 0.4rem;
    font-size: 0.82rem;
    border-radius: 0.5rem;
    color: var(--submenu-text) !important;
    background: transparent;
    position: relative;
}

/* Bullet del submenu (ANTES AZUL) */
.pc-submenu .pc-item .pc-link::before {
    content: '';
    width: 0.33rem;
    height: 0.33rem;
    border-radius: 50%;
    background-color: var(--submenu-bullet) !important;
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Hover en submenu */
.pc-submenu .pc-item .pc-link:hover {
    background-color: var(--submenu-hover-bg) !important;
    color: var(--submenu-hover-text) !important;
}

/* Item activo en submenu */
.pc-submenu .pc-item .pc-link.active,
.pc-submenu .pc-item.active > .pc-link {
    background-color: var(--submenu-active-bg) !important;
    color: var(--submenu-active-text) !important;
}

/* Iconos en submenu */
.pc-submenu .pc-item .pc-link i {
    color: var(--submenu-icon) !important;
}

/* ===============================
   CARD DEL USUARIO (pie del menú)
   =============================== */

.pc-user-card.card {
    background-color: var(--sidebar-bg-alt) !important;
    border-color: var(--sidebar-border) !important;
}

.pc-user-card .user-avtar {
    border: 2px solid rgba(255,255,255,0.2);
}

.pc-user-card h6 {
    color: var(--sidebar-text) !important;
}

.pc-user-card small {
    color: var(--sidebar-text-muted) !important;
}

/* Botón redondo de la derecha (ph-windows-logo) */
.pc-user-card .btn.btn-icon.btn-link-secondary.avtar {
    background-color: rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    color: var(--sidebar-text);
}

/* Dropdown de usuario */
.pc-user-card .dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border-soft);
}
.pc-user-card .dropdown-menu .pc-user-links {
    color: var(--color-text-main);
}
.pc-user-card .dropdown-menu .pc-user-links i {
    color: var(--color-primary);
}
.pc-user-card .dropdown-menu .pc-user-links:hover {
    background-color: var(--color-primary-soft);
}

/* ============================
   TABLAS (Bootstrap + Datatable)
   ============================ */

/* Tabla base */
.table {
    background-color: var(--color-surface);
    color: var(--color-text-main);
    border-color: var(--color-border-soft);
    font-size: 0.875rem;
}

/* Cabecera */
.table thead {
    background-color: var(--color-surface-alt);
}

.table thead th {
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* Celdas cuerpo */
.table tbody td {
    border-top: 1px solid var(--color-border-soft);
}

/* Filas alternas (striped) */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.01);
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Hover */
.table-hover tbody tr:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-text-main);
}

/* Bordered */
.table-bordered {
    border: 1px solid var(--color-border-soft);
}
.table-bordered > :not(caption) > * > * {
    border-color: var(--color-border-soft);
}

/* Pequeña (para listados en sidebar, etc.) */
.table-sm > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
}

/* Datatables (si usas .datatable) */
.table.datatable,
table.dataTable {
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Paginación Datatables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.15rem 0.6rem;
    margin: 0 0.1rem;
    color: var(--color-text-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
}

/* Filtro / buscador Datatables */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    padding: 0.25rem 0.75rem;
    background-color: var(--color-surface);
    color: var(--color-text-main);
}
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.04),
                0 0 0 0.15rem rgba(183, 103, 64, 0.25); /* usa primary */
}

/* Selector de longitud */
.dataTables_wrapper .dataTables_length select {
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background-color: var(--color-surface);
    color: var(--color-text-main);
}

/* Info de datatable (Showing 1 to 10...) */
.dataTables_wrapper .dataTables_info {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Si tienes tablas especiales de factura, puedes reutilizar la paleta */
.invoice-table--bordered {
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
}

.invoice-table--bordered thead {
    background: var(--color-surface-alt);
}

.invoice-table--bordered thead th {
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-soft);
}

.invoice-table--bordered tbody tr.invoice-item-row:nth-child(even) td {
    background: rgba(0, 0, 0, 0.015);
}
.invoice-table--bordered tbody tr.invoice-item-row:hover td {
    background: var(--color-primary-soft);
}

/* ============================
   CAMPOS DE FORMULARIO (inputs, selects, textareas, checks…)
   ============================ */

/* LABELS, HELP TEXT */
.form-label {
    color: var(--color-text-main);
    font-weight: 500;
    font-size: 0.85rem;
}
.form-text {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* CAMPOS BASE (text, email, password, number, textarea, etc.) */
.form-control,
.form-control-sm,
.form-control-lg,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-main);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Placeholder */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}

/* Focus */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    outline: 0;
    box-shadow:
        0 0 0 0.08rem rgba(0, 0, 0, 0.05),
        0 0 0 0.16rem rgba(183, 103, 64, 0.30); /* usa primary */
}

/* Disabled / read-only */
.form-control:disabled,
.form-control[readonly],
input:disabled,
textarea:disabled {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    opacity: 1;
}

/* SELECT (Bootstrap form-select) */
.form-select {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-main);
    font-size: 0.875rem;
    border-radius: 0.5rem;
}
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 0.08rem rgba(0, 0, 0, 0.05),
        0 0 0 0.16rem rgba(183, 103, 64, 0.30);
}



/* CHECKBOXES & RADIOS */
.form-check-label {
    color: var(--color-text-main);
    font-size: 0.82rem;
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-border-soft);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.16rem rgba(183, 103, 64, 0.25);
}

/* checked */
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* estados especiales de Bootstrap */
.form-check-input:checked[type="radio"] {
    background-image: radial-gradient(circle at center, #fff 40%, transparent 45%);
}

/* SWITCHES (form-switch) */
.form-switch .form-check-input {
    width: 2.2rem;
    height: 1.2rem;
    border-radius: 1.2rem;
    background-color: var(--color-border-soft);
    border-color: var(--color-border-soft);
}

.form-switch .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.18rem rgba(183, 103, 64, 0.25);
}

/* RANGOS (sliders) */
.form-range::-webkit-slider-thumb {
    background-color: var(--color-primary);
}
.form-range::-moz-range-thumb {
    background-color: var(--color-primary);
}
.form-range::-ms-thumb {
    background-color: var(--color-primary);
}

/* VALIDACIÓN Bootstrap */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.16rem rgba(220, 53, 69, 0.25);
}
.invalid-feedback {
    color: #dc3545;
    font-size: 0.75rem;
}

/* opcional: valid */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #198754;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.16rem rgba(25, 135, 84, 0.25);
}

/* CAMPOS EN CARDS / DENTRO DE .card-body (opcional, da sensación de bloque) */
.card .form-control,
.card .form-select,
.card textarea {
    background-color: var(--color-surface);
}


/* ============================
   MODALES (Bootstrap modal)
   ============================ */

/* Fondo oscurecido */
.modal-backdrop.show {
    background-color: #000000;
    opacity: 0.4; /* puedes subir/bajar según qué tan oscuro lo quieras */
}

/* Contenedor principal de la modal */
.modal-content {
    background-color: var(--color-surface);
    border-radius: 1rem;
    border: 1px solid var(--color-border-soft);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    color: var(--color-text-main);
}

/* Header de la modal */
.modal-header {
    border-bottom: 1px solid var(--color-border-soft);
    background-color: var(--color-surface-alt);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 0.8rem 1.25rem;
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-main);
}

/* Botón de cerrar (X) */
.btn-close {
    filter: none;
    opacity: 0.8;
}
.btn-close:hover {
    opacity: 1;
}

/* Body */
.modal-body {
    padding: 1rem 1.25rem 1.1rem;
    background-color: var(--color-surface);
    color: var(--color-text-main);
}

/* Footer */
.modal-footer {
    border-top: 1px solid var(--color-border-soft);
    background-color: var(--color-surface-alt);
    padding: 0.75rem 1.25rem;
}

/* Formularios dentro de la modal: usan los mismos estilos de campos */
.modal-content .form-control,
.modal-content .form-select,
.modal-content textarea {
    background-color: var(--color-surface);
    border-color: var(--color-border-soft);
    color: var(--color-text-main);
}

/* Botones de la modal (respetan el tema) */
.modal-content .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.modal-content .btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.modal-content .btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* === UNIFICAR TAMAÑO DE SELECT2 CON .form-control / .form-select === */

/* Que siempre ocupe todo el ancho como los otros campos */
.select2-container {
    width: 100% !important;
}

/* SINGLE */
.select2-container .select2-selection--single {
    display: block;
    width: 100%;
    /* mismas proporciones que un input/select normal */
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: .875rem;
    line-height: 1.5;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem; /* igual que tus inputs */
    box-shadow: inset 0 1px 1px rgba(31, 45, 61, 0.075);
    transition: all .2s ease;
}

/* Texto dentro del select2 */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;                /* ya lo hace el contenedor padre */
    line-height: 1.5;
    color: var(--color-text-main);
}

/* Flecha alineada como .form-select */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;              /* mismo alto que el campo */
    width: 2.25rem;
    right: .25rem;
}

/* MULTIPLE: altura parecida y mismo estilo */
.select2-container .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.15rem 0.75rem;
    font-size: .875rem;
    line-height: 1.5;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    box-shadow: inset 0 1px 1px rgba(31, 45, 61, 0.075);
}

/* Chips / tags dentro del multiple */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

/* Focus coherente con el resto de campos */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 0.08rem rgba(0, 0, 0, 0.05),
        0 0 0 0.16rem rgba(183, 103, 64, 0.30);
}

/* =========================================================
   SELECT2 – UNIFICAR CON .form-control / .form-select
   ========================================================= */

/* Que siempre ocupe todo el ancho como los otros campos */
.select2-container {
    width: 100% !important;
}

/* SINGLE */
.select2-container .select2-selection--single {
    display: block;
    width: 100%;
    /* mismas proporciones que un input/select normal */
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: .875rem;
    line-height: 1.5;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    box-shadow: inset 0 1px 1px rgba(31, 45, 61, 0.075);
    transition: all .2s ease;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--color-text-main);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 2.25rem;
    right: .25rem;
}

/* MULTIPLE: que parezca un solo campo */
.select2-container .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: .875rem;
    line-height: 1.5;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    box-shadow: inset 0 1px 1px rgba(31, 45, 61, 0.075);
}

/* Ocultar las “píldoras” (chips) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}

/* Ocultar placeholder nativo para que no duplique */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    display: none !important;
}

/* Texto personalizado: placeholder o “X proveedores seleccionados” */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0;
    margin: 0;
}

/* Quitar la X de limpiar nativa (usamos tu botón “Limpiar”) */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none;
}

/* =========================================================
   SELECT2 – BUSCADOR DENTRO DEL DROPDOWN (single y multi)
   ========================================================= */

.select2-container--default .select2-dropdown {
    border-color: var(--color-border-soft);
    background-color: var(--color-surface);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.select2-container--default .select2-dropdown .select2-search--dropdown {
    padding: 0.35rem 0.6rem 0.4rem !important;
    background-color: var(--color-surface);
}

/* Input de búsqueda con aspecto de .form-control */
.select2-container--default .select2-dropdown .select2-search--dropdown .select2-search__field,
.select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field {
    width: 100% !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text-main) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
}

/* Focus igual que el resto de inputs */
.select2-container--default .select2-dropdown .select2-search--dropdown .select2-search__field:focus,
.select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    outline: 0 !important;
    border-color: var(--color-primary) !important;
    box-shadow:
        0 0 0 0.08rem rgba(0, 0, 0, 0.05),
        0 0 0 0.16rem rgba(183, 103, 64, 0.30) !important;
}

/* ============================================
   UNIFICAR INPUTS .form-control CON EL TEMA
   (incluye "Número de pedido")
   ============================================ */

.pc-content .card .form-control,
.pc-content .card input.form-control,
.pc-content .card textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;

    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: 0.5rem !important;
    color: var(--color-text-main) !important;

    box-shadow: inset 0 1px 1px rgba(31, 45, 61, 0.075);
}

/* ============================================
   GLOBAL TAG-PILLS – Usable in all modules
   ============================================ */

.tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: default;
    transition: all .15s ease;
}

/* SOFT */
.tag-pill--soft {
    padding: 0.25rem 0.75rem;
    border-radius: 0.45rem;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-border-soft);
}
.tag-pill--soft:hover {
    background: var(--color-primary);
    color: #fff;
}

/* MINI */
.tag-pill--mini {
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-primary);
    color: var(--color-primary-dark);
}
.tag-pill--mini:hover {
    background: var(--color-primary-soft);
}

/* SOLID */
.tag-pill--solid {
    padding: 0.30rem 0.75rem;
    font-size: 0.80rem;
    border-radius: 0.40rem;
    background: var(--color-primary);
    color: #fff;
}
.tag-pill--solid:hover {
    background: var(--color-primary-dark);
}

/* ALT (premium outline) */
.tag-pill--alt {
    padding: 0.25rem 0.80rem;
    font-size: 0.80rem;
    border-radius: 0.50rem;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(183, 103, 64, 0.12);
}
.tag-pill--alt:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* ICON TAG */
.tag-pill--icon {
    padding: 0.28rem 0.75rem;
    border-radius: 0.45rem;
    background: var(--color-surface-alt);
    color: var(--color-text-main);
    border: 1px solid var(--color-border-soft);
    display: inline-flex;
    gap: 0.35rem;
}

.tag-pill--icon i {
    font-size: 0.90rem;
    color: var(--color-primary);
}

/* SUCCESS */
.tag-pill--status-success {
    background: #38c17220;
    border: 1px solid #38c172;
    color: #38c172;
}

/* WARNING */
.tag-pill--status-warning {
    background: #ffed4a20;
    border: 1px solid #ffed4a;
    color: #a67c00;
}

/* DANGER */
.tag-pill--status-danger {
    background: #e3342f20;
    border: 1px solid #e3342f;
    color: #e3342f;
}

/* INFO */
.tag-pill--status-info {
    background: #3490dc20;
    border: 1px solid #3490dc;
    color: #2779bd;
}

/* SECONDARY */
.tag-pill--status-secondary {
    background: var(--color-secondary-soft);
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

/* LIGHT */
.tag-pill--status-light {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-main);
}

/* DARK */
.tag-pill--status-dark {
    background: var(--color-text-main);
    border: 1px solid var(--color-text-main);
    color: var(--color-surface);
}

/* ROUND CHIP */
.tag-pill--rounded {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary);
}

/* GHOST TAG */
.tag-pill--ghost {
    padding: 0.22rem 0.60rem;
    border-radius: 0.40rem;
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    color: var(--color-text-main);
}

.tag-pill--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* GRADIENT TAG */
.tag-pill--gradient {
    padding: 0.28rem 0.80rem;
    border-radius: 0.50rem;
    color: #fff;

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.tag-pill--gradient:hover {
    opacity: .92;
}

/* =======================================
   STATUS COLORS – sistema universal
   ======================================= */

.status-pill,
.tag-pill,
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* --- Success --- */
.status-success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

/* --- Warning --- */
.status-warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

/* --- Danger --- */
.status-danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* --- Secondary --- */
.status-secondary {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
}

/* --- Info --- */
.status-info {
    background: var(--color-info-soft);
    color: var(--color-info);
}

/* --- Light --- */
.status-light {
    background: var(--color-surface-alt);
    color: var(--color-text-main);
    border: 1px solid var(--color-border-soft);
}

/* --- Dark --- */
.status-dark {
    background: var(--color-text-main);
    color: var(--color-surface);
}

/* ============================
   ENCABEZADO DE FACTURA
   (usa variables de tema)
   ============================ */

.invoice-header--bordered {
    font-family: inherit;
    color: var(--color-text-main);
    background: var(--color-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--color-border-soft);
    padding: 1rem 1.25rem 0.9rem;
    margin-bottom: 0;
}

.invoice-header-row {
    row-gap: 0.5rem;
}

/* Nº de factura: usa el primario del tema (sin azul duro) */
.invoice-number {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* Separador */
.invoice-divider {
    border-top: 1px solid var(--color-border-soft);
    margin: 0.75rem 0 0.75rem;
}

/* Etiquetas pequeñas (Issue Date, Due Date, etc.) */
.invoice-meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

/* Valores (fechas, etc.) */
.invoice-meta-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-main);
}

.invoice-meta-block {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.15rem;
}

.invoice-details {
    margin-top: 0.5rem;
}

.supplier-info,
.contract-info {
    padding: 0.4rem 0.4rem 0.25rem;
    font-size: 0.88rem;
    color: var(--color-text-main);
}

/* QR */
.invoice-barcode {
    margin-top: 0.5rem;
}

/* ===== BADGES DE ESTADO EN EL HEADER ===== */

/* Tipografía y spacing; el color de fondo puede venir de la clase
   dinámica ($statusClasses: bg-success, bg-warning, etc.) */
.invoice-status-badge {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    min-width: 110px;
    text-align: center;
}

/* “Acopio”: usamos tonos del primario del tema */
.invoice-badge-gathering {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;

    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* “Certificación de origen”: usamos el secondary del tema */
.invoice-badge-certification {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;

    background: var(--color-secondary-soft);
    color: var(--color-secondary);
}

/* Observación / descripción: burbuja usando surface-alt */
.invoice-observation {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-text-main);
    background: var(--color-surface-alt);
    border-radius: 0.65rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border-soft);
}

/* Fuente monoespaciada para fechas/nums */
.text-monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
}

/* Responsive */
@media (max-width: 768px) {
    .invoice-header--bordered {
        padding: 0.85rem 0.9rem 0.8rem;
    }

    .invoice-meta-dates {
        gap: 0.4rem;
    }

    .supplier-info,
    .contract-info {
        margin-bottom: 0.4rem;
    }
}

/* ============================
   TABS DE FACTURA / DETALLE
   ============================ */

.invoice-tabs .nav-link {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 0.5rem;
    color: var(--color-text-main);
    padding: 0.45rem 1rem;
    margin-right: 0.4rem;
    font-weight: 500;
    transition: .25s;
}

.invoice-tabs .nav-link:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border-soft);
    color: var(--color-text-main);
}

/* Pestaña activa: usa la paleta del tema */
.invoice-tabs .nav-link.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-weight: 600;
}


/* ============================
   PAGINADO (Bootstrap + DataTables)
   ============================ */

/* Bootstrap .pagination */
.pagination {
    margin-top: 0.75rem;
}

.page-link {
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    margin: 0 0.1rem;
}

.page-link:hover {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.page-item.disabled .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border-soft);
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* DataTables paginación */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.75rem;
    text-align: right;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.2rem 0.6rem;
    margin: 0 0.1rem;
    background: transparent;
    color: var(--color-text-muted) !important;
    font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark) !important;
}

/* Activo */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff !important;
}

/* Botones "Previous"/"Next" deshabilitados */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted) !important;
    opacity: 0.6;
}

/* ============================
   INPUT GROUP (común a todos los themes)
   ============================ */

/* Apariencia del addon (Ud, €…) */
.input-group-text {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    padding-inline: 0.6rem;
}

/* Si viene con bg-transparent, forzamos el fondo del tema */
.input-group-text.bg-transparent {
    background-color: var(--color-surface-alt) !important;
}

/* Unificamos forma de “pastilla” entre input y addon */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: 0.5rem;
    border-color: var(--color-border-soft);
}

/* Input a la izquierda, addon a la derecha (tu caso) */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0; /* quita la doble línea entre input y Ud/€ */
}

/* Mantener foco correcto */
.input-group .form-control:focus,
.input-group .form-select:focus {
    z-index: 2;
}

/* ==========================================
   THEME – HEADER (paleta corporativa B76740)
   Aplica a todos los headers
   ========================================== */

/* Si tienes un wrapper de tema, puedes usar .theme-corporativa-minimalista delante */
:root {
    /* Si no las tienes aún, puedes añadir estas custom vars: */
    --invoice-header-bg: #ffffff;
    --invoice-header-border-color: #e0d5c7;

    --invoice-meta-label-color: #7b7b75;  /* gris cálido */
    --invoice-meta-value-color: #2f3e37;  /* tu --bs-dark */

    --invoice-observation-bg: #f5efe5;
    --invoice-observation-text: #2f3e37;
}

/* Número de factura en color corporativo */
.invoice-number {
    color: var(--color-primary, #B76740);
}

/* ====== BADGES de estado (usa tus statusClasses) ====== */

/* Success (Pagado, Completado) */
.invoice-status-badge.status-success {
    background: rgba(76, 122, 98, 0.12); /* basado en secondary */
    color: var(--color-secondary, #4C7A62);
    border: 1px solid rgba(76, 122, 98, 0.4);
}

/* Warning (Pendiente, Parcial) */
.invoice-status-badge.status-warning {
    background: rgba(255, 193, 7, 0.12);
    color: #8a6400;
    border: 1px solid rgba(255, 193, 7, 0.5);
}

/* Danger (Vencido, Cancelado) */
.invoice-status-badge.status-danger {
    background: rgba(220, 53, 69, 0.08);
    color: #b02030;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* Secondary / Borrador */
.invoice-status-badge.status-secondary,
.invoice-status-badge.status-light {
    background: rgba(47, 62, 55, 0.04); /* --bs-dark suavizado */
    color: #4a4f46;
    border: 1px solid rgba(47, 62, 55, 0.18);
}

/* ====== Badges especiales: Acopio / Certificación ====== */

.invoice-badge-gathering {
    background: var(--color-primary-soft, #F5E0D4);
    color: var(--color-primary, #B76740);
    border: 1px solid rgba(183, 103, 64, 0.35);
}

.invoice-badge-certification {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.4);
}

/* Etiquetas del header (FACTURA, FECHA DE EMISIÓN, etc.) */
.invoice-meta-label {
    color: var(--invoice-meta-label-color, #7b7b75);
}

/* Texto valor (fechas, número interno, etc.) */
.invoice-meta-value {
    color: var(--invoice-meta-value-color, #2f3e37);
}

/* Títulos de bloques (Supplier, Customer, Payer...) */
.supplier-info strong,
.customer-info strong,
.contract-info strong,
.payer-info strong {
    color: var(--color-primary, #B76740);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
}

/* Línea horizontal muy suave */
.invoice-divider {
    border-top-color: rgba(0, 0, 0, 0.04);
}