/* ============================================
   ERP Multiempresa — Estilos principales
   Diseño: Industrial / Utilitarian
   Palette: Slate + Accent Amber
   ============================================ */

/* ── Variables ──────────────────────────────── */
:root {
    /* Layout en `rem` (no px) para que escale junto con la letra base:
       subiendo `html { font-size }` crece TODO proporcionalmente sin usar
       `zoom` (el zoom descuadraba DataTables por sus medidas en px).
       Valores = px_original / 14 → reproducen el tamaño previo a 14px de base. */
    --sidebar-w:      17.14rem;  /* 240px @14 → 300px @17.5 */
    --sidebar-w-col:  4.57rem;   /*  64px @14 →  80px @17.5 */
    --topbar-h:       4rem;      /*  56px @14 →  70px @17.5 */

    /* Colores base */
    --c-bg:           #0f1117;
    --c-surface:      #161b27;
    --c-surface-2:    #1e2535;
    --c-surface-3:    #252d3d;
    --c-border:       #2a3347;
    --c-border-light: #323d54;

    /* Texto */
    --c-text:         #e2e8f0;
    --c-text-muted:   #7a8ba6;
    --c-text-dim:     #4a5568;

    /* Acento principal */
    --c-accent:       #f59e0b;
    --c-accent-light: #fbbf24;
    --c-accent-dim:   rgba(245,158,11,0.12);

    /* Semánticos */
    --c-success:      #10b981;
    --c-success-dim:  rgba(16,185,129,0.12);
    --c-danger:       #ef4444;
    --c-danger-dim:   rgba(239,68,68,0.12);
    --c-warning:      #f59e0b;
    --c-info:         #3b82f6;
    --c-info-dim:     rgba(59,130,246,0.12);

    /* Tipografía */
    --font-body:      'DM Sans', system-ui, sans-serif;
    --font-mono:      'DM Mono', 'Consolas', monospace;

    /* Radios */
    --r-sm:  4px;
    --r-md:  8px;
    --r-lg:  12px;

    /* Sombras */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);

    /* Transiciones */
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Override variables Bootstrap ───────────── */
:root,
[data-bs-theme="dark"] {
    --bs-body-bg:      transparent;
    --bs-body-color:   var(--c-text);
    --bs-table-color:  #fff;
    --bs-table-bg:     transparent;
    --bs-border-color: var(--c-border);
}

/* Bootstrap redefine --bs-table-color localmente en .table
   sobreescribiendo el :root. Lo forzamos aquí con mayor especificidad. */
.table {
    --bs-table-color:       #fff;
    --bs-table-bg:          transparent;
    --bs-table-border-color: var(--c-border);
    --bs-table-striped-color: #fff;
    --bs-table-hover-color:  #fff;
}

/* Igual que .table: cada variante (.btn-primary, etc.) redefine las vars de
   botón en su propio scope, sombreando el :root. Las forzamos en .btn (misma
   especificidad que las variantes y, al cargar erp.css después de Bootstrap,
   gana por orden de cascada → cubre todas las variantes). */
.btn {
    --bs-btn-disabled-bg: #0f1117;
    --bs-btn-disabled-border-color: #0f1117;
}

/* ── Reset y base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Letra base de toda la plataforma. Es el ÚNICO mando de escala global: como el
   layout y la tipografía de Bootstrap van en `rem`, subir este valor agranda todo
   proporcionalmente. 15.75px = +12.5% sobre los 14px originales (se bajó al 90%
   de los 17.5px previos, que resultaban demasiado grandes).
   NO usar `zoom` aquí: descuadra las tablas DataTables (miden en px). */
html { font-size: 15.75px; }

body {
    font-family:      var(--font-body);
    background-color: var(--c-bg);
    color:            var(--c-text);
    margin:           0;
    line-height:      1.5;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-surface); }
::-webkit-scrollbar-thumb { background: var(--c-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

/* ── Layout principal ───────────────────────── */
.erp-sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    height:     100vh;
    width:      var(--sidebar-w);
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    display:    flex;
    flex-direction: column;
    z-index:    1000;
    transition: width var(--transition);
    overflow:   hidden;
}

.erp-main {
    margin-left:    var(--sidebar-w);
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
    transition:     margin-left var(--transition);
}

/* Sidebar colapsado */
body.sidebar-collapsed .erp-sidebar { width: var(--sidebar-w-col); }
body.sidebar-collapsed .erp-main    { margin-left: var(--sidebar-w-col); }
body.sidebar-collapsed .sidebar-company,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .sidebar-footer .nav-item span { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 10px; }
body.sidebar-collapsed .nav-item i { margin: 0; font-size: 1.2rem; }
/* Colapsado: oculta el logo y centra el botón toggle para que no se desborde
   fuera de los 64px y siga siendo visible/clicable para expandir. */
body.sidebar-collapsed .sidebar-header { padding: 16px 0; justify-content: center; }
body.sidebar-collapsed .sidebar-logo { display: none; }
body.sidebar-collapsed .sidebar-toggle { padding: 8px; }
body.sidebar-collapsed .sidebar-toggle i { font-size: 1.2rem; }
body.sidebar-collapsed .logo-placeholder { width: 36px; height: 36px; }

/* ── Sidebar Header ─────────────────────────── */
.sidebar-header {
    display:    flex;
    align-items: center;
    gap:        10px;
    padding:    16px;
    border-bottom: 1px solid var(--c-border);
    min-height: var(--topbar-h);
    flex-shrink: 0;
}

.sidebar-logo { flex-shrink: 0; }

.company-logo {
    width:  36px;
    height: 36px;
    object-fit: contain;
    border-radius: var(--r-sm);
}

.logo-placeholder {
    width:           36px;
    height:          36px;
    background:      var(--c-accent-dim);
    border:          1px solid var(--c-accent);
    border-radius:   var(--r-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--c-accent);
    font-size:       1rem;
}

.sidebar-company {
    flex:    1;
    overflow: hidden;
}

.company-name {
    display:        block;
    font-weight:    600;
    font-size:      0.85rem;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    color:          var(--c-text);
}

.user-role {
    font-family:     var(--font-mono);
    font-size:       0.65rem;
    background:      var(--c-accent-dim);
    color:           var(--c-accent);
    border:          1px solid rgba(245,158,11,0.3);
    padding:         1px 6px;
    border-radius:   3px;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
}

.sidebar-toggle {
    background:    transparent;
    border:        none;
    color:         var(--c-text-muted);
    cursor:        pointer;
    padding:       4px;
    border-radius: var(--r-sm);
    transition:    color var(--transition);
    flex-shrink:   0;
}
.sidebar-toggle:hover { color: var(--c-text); }

/* ── Sidebar Nav ────────────────────────────── */
.sidebar-nav {
    flex:       1;
    overflow-y: auto;
    padding:    8px 0;
}

.nav-group { margin-bottom: 4px; }

.nav-group-label {
    display:        block;
    font-size:      0.8rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--c-text);
    padding:        12px 16px 4px;
}

/* ── Menú lateral colapsable (acordeón: solo una sección abierta a la vez) ── */
.nav-group--collapsible > .nav-group-label {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    cursor:          pointer;
    user-select:     none;
    transition:      color var(--transition);
}
.nav-group--collapsible > .nav-group-label:hover { color: var(--c-text-muted); }
.nav-group-caret {
    font-size:  0.7rem;
    transition: transform var(--transition);
}
.nav-group--collapsible:not(.open) > .nav-group-label .nav-group-caret { transform: rotate(-90deg); }
.nav-group-items {
    overflow:   hidden;
    max-height: 0;
    transition: max-height var(--transition);
}
.nav-group.open > .nav-group-items { max-height: 24rem; }
/* En modo icono (sidebar colapsado) se ven todos los ítems y se ocultan los carets. */
body.sidebar-collapsed .nav-group-items { max-height: none; overflow: visible; }
body.sidebar-collapsed .nav-group-caret { display: none; }

.nav-item {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        8px 16px;
    color:          var(--c-text-muted);
    text-decoration: none;
    font-size:      0.875rem;
    font-weight:    400;
    border-radius:  0;
    transition:     all var(--transition);
    border-left:    2px solid transparent;
    white-space:    nowrap;
}

.nav-item:hover {
    background: var(--c-surface-2);
    color:      var(--c-text);
    border-left-color: var(--c-border-light);
}

.nav-item.active {
    background:       var(--c-accent-dim);
    color:            var(--c-accent);
    border-left-color: var(--c-accent);
    font-weight:      500;
}

.nav-item i {
    font-size:  1rem;
    flex-shrink: 0;
    width:      16px;
    text-align: center;
}

.nav-item-danger:hover {
    background:       var(--c-danger-dim) !important;
    color:            var(--c-danger) !important;
    border-left-color: var(--c-danger) !important;
}

/* ── Tabs ────────────────────────────────────── */
.nav-tabs .nav-item {
    padding-bottom: 0px;
}

.nav-tabs .nav-link {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}

.nav-tabs .nav-link.active {
    background: var(--c-accent);
    color: black !important;
}

.nav-tabs li.nav-item:hover {
    background: transparent !important;
    border-left-color: transparent !important;
}

/* ── Sidebar Footer ─────────────────────────── */
.sidebar-footer {
    border-top: 1px solid var(--c-border);
    padding:    8px 0;
    flex-shrink: 0;
}

/* ── Topbar ─────────────────────────────────── */
.erp-topbar {
    height:          var(--topbar-h);
    background:      var(--c-surface);
    border-bottom:   1px solid var(--c-border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 20px;
    position:        sticky;
    top:             0;
    z-index:         100;
    flex-shrink:     0;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.topbar-date {
    font-family: var(--font-mono);
    font-size:   0.75rem;
    color:       var(--c-text-muted);
}

.btn-icon {
    background:    transparent;
    border:        1px solid var(--c-border);
    color:         var(--c-text-muted);
    width:         32px;
    height:        32px;
    border-radius: var(--r-sm);
    display:       none;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    all var(--transition);
}
.btn-icon:hover { color: var(--c-text); background: var(--c-surface-2); }

/* ── Breadcrumbs ────────────────────────────── */
.breadcrumb { font-size: 0.8rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--c-text-dim); }
.breadcrumb-item a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--c-accent); }
.breadcrumb-item.active { color: var(--c-text); }

/* ── Contenido ──────────────────────────────── */
.erp-content {
    flex:    1;
    padding: 24px;
}

/* ── Page header ────────────────────────────── */
.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
    padding-bottom:  16px;
    border-bottom:   1px solid var(--c-border);
}

.page-title {
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--c-text);
    margin:      0;
    letter-spacing: -0.01em;
}

.page-actions { display: flex; gap: 8px; }

/* ── Cards ──────────────────────────────────── */
.card {
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow:    var(--shadow-sm);
}

.card-header {
    background:    var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    padding:       12px 20px;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    font-weight:   600;
    font-size:     0.875rem;
    color:         var(--c-text);
}

.card-body { padding: 20px; }

/* Stats cards */
.stat-card {
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding:       20px;
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
}

.stat-icon {
    width:           44px;
    height:          44px;
    border-radius:   var(--r-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.2rem;
    flex-shrink:     0;
}

.stat-icon.amber   { background: var(--c-accent-dim);   color: var(--c-accent); }
.stat-icon.green   { background: var(--c-success-dim);  color: var(--c-success); }
.stat-icon.red     { background: var(--c-danger-dim);   color: var(--c-danger); }
.stat-icon.blue    { background: var(--c-info-dim);     color: var(--c-info); }

.stat-value {
    font-size:      1.6rem;
    font-weight:    600;
    line-height:    1;
    color:          var(--c-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size:  0.75rem;
    color:      var(--c-text-muted);
    margin-top: 4px;
}

/* ── Dropdown ───────────────────────────────── */
.dropdown-menu {
    background: var(--c-accent-dim);
}

.dropdown-item:focus, .dropdown-item:hover {
    background: var(--c-surface);
}

/* ── Tablas DataTables ──────────────────────── */
.dataTables_wrapper { color: var(--c-text); }

table.dataTable thead th {
    background:    var(--c-surface-2);
    color:         var(--c-text-muted);
    font-size:     0.7rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--c-border) !important;
    padding:       10px 12px;
}

table.dataTable tbody tr {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    transition: background var(--transition);
}

table.dataTable tbody tr:hover { background: var(--c-surface-2); }

table.dataTable tbody td {
    color:      var(--c-text);
    font-size:  0.875rem;
    padding:    10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--c-border);
}

.dataTables_info,
.dataTables_length label,
.dataTables_filter label { color: var(--c-text-muted); font-size: 0.8rem; }

.dataTables_filter input,
.dataTables_length select {
    background:  var(--c-surface-2);
    border:      1px solid var(--c-border);
    color:       var(--c-text);
    border-radius: var(--r-sm);
    padding:     4px 8px;
}

.dataTables_paginate .paginate_button {
    color: var(--c-text-muted) !important;
    border-radius: var(--r-sm) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #000 !important;
    font-weight: 600;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--c-surface-2) !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
}

/* ── Formularios ────────────────────────────── */
.form-label {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.form-control, .form-select {
    background-color:    var(--c-surface-2);
    border:        1px solid var(--c-border);
    color:         var(--c-text);
    border-radius: var(--r-md);
    font-size:     0.875rem;
    padding:       8px 12px;
    transition:    border-color var(--transition), box-shadow var(--transition);
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-control:focus, .form-select:focus {
    background-color:  var(--c-surface-2);
    border-color: var(--c-accent);
    color:       var(--c-text);
    box-shadow:  0 0 0 3px var(--c-accent-dim);
}

.form-select, .form-select:focus {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-control[type=file] {
    background: var(--card-body);
}

input[type="file"]::file-selector-button,
input[type="file"]:hover::file-selector-button {
    background: var(--c-surface-2) !important;
    color: #fff;
}

.form-control::placeholder { color: var(--c-text-dim); }

.form-control.is-invalid { border-color: var(--c-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--c-danger-dim); }

/* Select2: el <select> original (oculto) lleva .is-invalid; pintamos su caja. */
.is-invalid + .select2-container .select2-selection { border-color: var(--c-danger); }

.form-control:disabled {
    background-color: var(--c-bg);
}

.invalid-feedback { color: var(--c-danger); font-size: 0.75rem; }

.form-text { color: var(--c-text-muted); font-size: 0.75rem; }

/* ── Botones ────────────────────────────────── */
.btn {
    font-size:     0.8rem;
    font-weight:   600;
    border-radius: var(--r-md);
    padding:       7px 14px;
    transition:    all var(--transition);
    letter-spacing: 0.02em;
}

.btn-primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #000;
}
.btn-primary:hover {
    background: var(--c-accent-light);
    border-color: var(--c-accent-light);
    color: #000;
}

.btn-outline-primary {
    background:  transparent;
    border-color: var(--c-accent);
    color:       var(--c-accent);
}
.btn-outline-primary:hover {
    background:  var(--c-accent);
    border-color: var(--c-accent);
    color:       #000;
}

.btn-secondary {
    background:  var(--c-surface-3);
    border-color: var(--c-border-light);
    color:       var(--c-text);
}
.btn-secondary:hover {
    background:  var(--c-surface-2);
    border-color: var(--c-border-light);
    color:       var(--c-text);
}

.btn-danger {
    background:  var(--c-danger);
    border-color: var(--c-danger);
    color:       #fff;
}

.btn-outline-secondary {
    background:  transparent;
    border-color: var(--c-border);
    color:       var(--c-text-muted);
}
.btn-outline-secondary:hover {
    background:  var(--c-surface-2);
    border-color: var(--c-border-light);
    color:       var(--c-text);
}

.btn-sm { padding: 4px 10px; font-size: 0.75rem; }

/* ── Badges de estado ───────────────────────── */
.badge-estado {
    font-family:  var(--font-mono);
    font-size:    0.65rem;
    font-weight:  500;
    padding:      3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border:       1px solid;
}

.badge-borrador   { background: var(--c-surface-3);     color: var(--c-text-muted); border-color: var(--c-border); }
.badge-enviado    { background: var(--c-info-dim);       color: var(--c-info);       border-color: rgba(59,130,246,.3); }
.badge-aceptado,
.badge-completado { background: var(--c-success-dim);   color: var(--c-success);    border-color: rgba(16,185,129,.3); }
.badge-rechazado,
.badge-cancelado  { background: var(--c-danger-dim);    color: var(--c-danger);     border-color: rgba(239,68,68,.3); }
.badge-pendiente  { background: rgba(245,158,11,.1);    color: var(--c-warning);    border-color: rgba(245,158,11,.3); }
.badge-parcial,
.badge-en_proceso { background: rgba(139,92,246,.12);   color: #a78bfa;             border-color: rgba(139,92,246,.3); }

/* ── Alerts Bootstrap override ──────────────── */
.alert {
    border-radius: var(--r-md);
    font-size:     0.875rem;
    border:        1px solid;
}
.alert-success  { background: var(--c-success-dim); color: var(--c-success); border-color: rgba(16,185,129,.3); }
.alert-danger   { background: var(--c-danger-dim);  color: var(--c-danger);  border-color: rgba(239,68,68,.3); }
.alert-warning  { background: rgba(245,158,11,.1);  color: var(--c-warning); border-color: rgba(245,158,11,.3); }
.alert-info     { background: var(--c-info-dim);    color: var(--c-info);    border-color: rgba(59,130,246,.3); }
.btn-close { filter: invert(1); }

/* ── Modales ────────────────────────────────── */
.modal-content {
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: var(--r-lg);
}

.modal-header {
    background:    var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding:       16px 20px;
}

.modal-title {
    font-size:  0.9rem;
    font-weight: 600;
}

.modal-footer {
    background:    var(--c-surface-2);
    border-top:    1px solid var(--c-border);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Utilidades extra ───────────────────────── */
.mono { font-family: var(--font-mono); }
.text-accent { color: var(--c-accent); }
.text-muted  { color: var(--c-text-muted) !important; }
.text-dim    { color: var(--c-text-dim); }
.border-subtle { border-color: var(--c-border) !important; }

.divider {
    height: 1px;
    background: var(--c-border);
    margin: 16px 0;
}

/* Campo con prefijo/sufijo */
.input-group-text {
    background:    var(--c-surface-3);
    border-color:  var(--c-border);
    color:         var(--c-text-muted);
    font-size:     0.8rem;
}

/* Código y referencias de documentos */
.doc-ref {
    font-family:  var(--font-mono);
    font-size:    0.8rem;
    font-weight:  500;
    color:        var(--c-accent);
}

/* ── Página de login ────────────────────────── */
.login-page {
    background:     var(--c-bg);
    min-height:     100vh;
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        20px;
}

.login-card {
    background:    var(--c-surface);
    border:        1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding:       40px;
    width:         100%;
    max-width:     400px;
    box-shadow:    var(--shadow-lg);
}

.login-logo {
    text-align:    center;
    margin-bottom: 32px;
}

.login-logo-icon {
    width:           56px;
    height:          56px;
    background:      var(--c-accent-dim);
    border:          1px solid rgba(245,158,11,0.4);
    border-radius:   var(--r-md);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
    color:           var(--c-accent);
    margin-bottom:   12px;
}

.login-title {
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--c-text);
    margin:         0;
    text-align:     center;
}

.login-subtitle {
    font-size:  0.8rem;
    color:      var(--c-text-muted);
    text-align: center;
    margin-top: 4px;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .erp-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition);
    }
    .erp-sidebar.open { transform: translateX(0); }
    .erp-main { margin-left: 0; }
    .btn-icon { display: flex; }
    .erp-content { padding: 16px; }

    /* Overlay para cerrar sidebar en mobile */
    .sidebar-overlay {
        display:    none;
        position:   fixed;
        inset:      0;
        background: rgba(0,0,0,0.6);
        z-index:    999;
    }
    .sidebar-overlay.show { display: block; }
}

/* ──────────────────────────────────────────
   COMBOS CON BUSCADOR (Select2 + tema bootstrap-5) — tema oscuro
   Alinea Select2 con las variables del ERP para que se vea como un
   .form-select normal. Aplica a cualquier <select class="js-buscar">.
   ────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--c-surface);
    border-color:     var(--c-border);
    color:            var(--c-text);
    border-radius:    var(--r-md);
}
/* La selección hereda la clase .form-select (selectionCssClass ':all:'): quita su
   caret de fondo para no duplicarlo con la flecha propia de Select2. */
.select2-container--bootstrap-5 .select2-selection.form-select,
.select2-container--bootstrap-5 .select2-selection.form-select-sm { background-image: none; padding-right: 0; padding: 8px 12px; }
.select2-container--bootstrap-5 .select2-selection--single { height: calc(2.25rem + 2px); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--c-text);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--c-text-muted); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open  .select2-selection {
    border-color: var(--c-accent);
    box-shadow:   0 0 0 .2rem var(--c-accent-dim);
    padding: 8px 12px;
}
/* Botón de limpiar (X) del combo simple. El tema lo pinta como un SVG con fill gris
   oscuro (#676a6d) colocado a `right: 2.25rem` (pensado para dejar sitio a un caret que
   aquí quitamos) → queda flotando en medio y apenas se ve. Reusamos el MISMO mecanismo
   (SVG de fondo + texto oculto con text-indent), pero con fill claro y pegado a la
   derecha. NADA de ::before, para no duplicar la X. */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 0.8rem;
    height: 0.8rem;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a8ba6'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.8rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e2e8f0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}
/* Reserva hueco a la derecha para que el texto seleccionado no se pise con la X. */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-right: 1.75rem;
}
/* Combo deshabilitado (p.ej. ficha de OP finalizada): sin esto el tema lo pinta con
   fondo claro y el texto claro del tema oscuro queda blanco-sobre-blanco. */
.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: var(--c-surface-3);
    border-color: var(--c-border);
    color: var(--c-text-muted);
    opacity: 0.9;
}
.select2-container--bootstrap-5.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--c-text-muted);
}
/* Buscador */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
	background-color: var(--c-surface-2);
	color: var(--c-text);
}
/* Desplegable */
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--c-surface-2);
    border-color:     var(--c-border);
    color:            var(--c-text);
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--c-surface);
    border-color:     var(--c-border);
    color:            var(--c-text);
}
.select2-container--bootstrap-5 .select2-results__option { color: var(--c-text); }
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--c-accent-dim); color: var(--c-text);
}
.select2-container--bootstrap-5 .select2-results__option--selected { background-color: var(--c-surface-3); }
.select2-container--bootstrap-5 .select2-results__message { color: var(--c-text-muted); }
.select2-container { z-index: 1065; }     /* por encima de modales */
/* Tamaño compacto cuando el <select> era form-select-sm (heredado vía selectionCssClass ':all:') */
.select2-container--bootstrap-5 .select2-selection.form-select-sm { height: calc(1.5em + .5rem + 2px); font-size: .8125rem; }
.select2-container--bootstrap-5 .select2-selection.form-select-sm .select2-selection__rendered { line-height: calc(1.5em + .5rem); padding-left: .5rem; }

/* ── Celda de incidencia (produccion/ver): más visibilidad a descripción y resolución ── */
.incidencia-desc { font-size: 0.95rem; }
.incidencia-desc .incidencia-meta { font-size: 0.85rem; color: var(--c-text-muted); }
.incidencia-desc .incidencia-resolucion {
    margin-top: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    color: var(--c-text);
    background: var(--c-surface-2);
    border-left: 3px solid var(--c-success);
}

/* ─────────────────────────────────────────
   DESCRIPCIÓN DE LÍNEA — editor flotante
   La celda es estrecha y el texto largo se pierde de vista. El textarea real
   (el que se postea) se queda en la celda con aspecto de una sola línea; al
   enfocarlo, ERP.initDescOverlay() abre un editor flotante con el texto entero.
   El overlay vive en <body> con position:fixed porque las tablas van dentro de
   .table-responsive (overflow), que recortaría un position:absolute.
   ───────────────────────────────────────── */
/* Selector con la clase .form-control incluida a propósito: sube la especificidad
   a (0,2,1) para ganar sin discusión a textarea.form-control-sm de Bootstrap. */
textarea.form-control.js-desc-expand,
textarea.js-desc-expand {
    /* Colapsado: misma altura que un <input class="form-control-sm"> de la fila.
       Solo min-height (el mismo cálculo que usa Bootstrap para .form-control-sm):
       NO fijar `height`, o la caja queda más baja que el input. Con min-height +
       rows="1" el textarea toma su altura natural, que es la del input. Va en
       em/rem, así que acompaña la escala global de la app. */
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width, 1px) * 2));
    line-height: 1.5;
    vertical-align: middle;    /* alinea con los inputs vecinos de la fila */
    resize: none;
    overflow: hidden;
    white-space: pre;          /* sin wrap: aspecto de input de una sola línea */
}

.desc-overlay {
    position: fixed;
    z-index: 1080;
    display: none;
    padding: 0.25rem;
    border: 1px solid var(--c-accent);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}
.desc-overlay.is-open { display: block; }

.desc-overlay textarea {
    width: 100%;
    min-height: 5.5em;
    padding: 0.25rem;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    color: var(--c-text);
    font-size: 0.85rem;
    line-height: 1.45;
}
.desc-overlay-hint {
    padding: 0.15rem 0.3rem 0;
    font-size: 0.65rem;
    color: var(--c-text-muted);
    text-align: right;
}