/* ============================================================
   Sistema ERP — Sistema de Diseño UI
   Tipografía Montserrat + Acento Rojo. El nombre de marca es
   dinámico (tabla configuracion_sistema), por eso las clases que
   antes llevaban el texto de marca hardcodeado se llaman ahora
   .brand-marca-1/.brand-marca-2 (navbar) y .logo-marca-1/.logo-marca-2
   (login) — el resto del sistema de diseño es genérico.
   ============================================================ */

/* ─── Variables Globales ─────────────────────────────────── */
:root {
    --p-color:      #1a1a1a;
    --s-color:      #dc3545;
    --s-dark:       #b02a37;
    --s-light:      rgba(220, 53, 69, 0.08);
    --bg-body:      #f0f4f8;
    --bg-card:      #ffffff;
    --border-color: #e2e8f0;
    --text-main:    #1a1a1a;
    --text-labels:  #334155;
    --text-muted:   #6b7280;
    --success:      #198754;
    --warning:      #e6a817;
    --info:         #0dcaf0;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
    --shadow-md:    0 4px 12px rgba(0,0,0,.10);
    --radius:       10px;
    --radius-sm:    6px;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    font-size:   0.875rem;
    background:  var(--bg-body);
    color:       var(--text-main);
    min-height:  100vh;
}

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar-erp {
    background: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    padding: .55rem 1rem;
}
.navbar-erp .navbar-brand {
    font-weight: 700;
    font-size:   1.05rem;
    letter-spacing: .02em;
}
.navbar-erp .brand-marca-1 { color: var(--s-color); }
.navbar-erp .brand-marca-2 { color: #fff; }
.navbar-erp .nav-link {
    color:       rgba(255,255,255,.75);
    font-size:   .78rem;
    font-weight: 600;
    padding:     .35rem .75rem;
    border-radius: var(--radius-sm);
    transition:  background .15s, color .15s;
}
.navbar-erp .nav-link:hover,
.navbar-erp .nav-link.active {
    background: rgba(220,53,69,.18);
    color:      #fff;
}
.navbar-erp .nav-link .bi { margin-right: .3rem; font-size: .9rem; }
.navbar-erp .dropdown-toggle::after { margin-left: .3rem; vertical-align: .15em; }

/* Dropdown del navbar — mismo estilo que el menú principal */
.dropdown-menu-erp {
    --bs-dropdown-bg:              #1a1a1a;
    --bs-dropdown-border-color:    rgba(255,255,255,.08);
    --bs-dropdown-color:           rgba(255,255,255,.75);
    --bs-dropdown-link-color:      rgba(255,255,255,.75);
    --bs-dropdown-link-hover-bg:   rgba(220,53,69,.18);
    --bs-dropdown-link-hover-color:#fff;
    --bs-dropdown-link-active-bg:  rgba(220,53,69,.28);
    --bs-dropdown-link-active-color:#fff;
    --bs-dropdown-padding-y:       .3rem;
    --bs-dropdown-border-radius:   var(--radius-sm);
    --bs-dropdown-box-shadow:      0 6px 20px rgba(0,0,0,.45);
    --bs-dropdown-item-border-radius: var(--radius-sm);
    background:    var(--bs-dropdown-bg);
    border:        1px solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    box-shadow:    var(--bs-dropdown-box-shadow);
    padding:       .3rem;
    min-width:     190px;
    margin-top:    .25rem;
}
.dropdown-menu-erp .dropdown-item {
    color:         rgba(255,255,255,.75);
    font-size:     .78rem;
    font-weight:   600;
    padding:       .35rem .75rem;
    border-radius: var(--radius-sm);
    transition:    background .15s, color .15s;
    background:    transparent;
}
.dropdown-menu-erp .dropdown-item:hover,
.dropdown-menu-erp .dropdown-item:focus {
    background: rgba(220,53,69,.18);
    color:      #fff;
}
.dropdown-menu-erp .dropdown-item.active,
.dropdown-menu-erp .dropdown-item:active {
    background: rgba(220,53,69,.28);
    color:      #fff;
}
.dropdown-menu-erp .dropdown-item .bi { margin-right: .3rem; font-size: .9rem; }

/* ─── Cards ──────────────────────────────────────────────── */
.card-erp {
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-radius: var(--radius);
    padding:       1.5rem;
    box-shadow:    var(--shadow-sm);
    transition:    box-shadow .2s;
}
.card-erp:hover { box-shadow: var(--shadow-md); }

.card-erp-acento {
    border-top: 4px solid var(--s-color);
}
.card-erp-estandar {
    border-top: 4px solid var(--border-color);
}

/* KPI Cards */
.kpi-card {
    background:    var(--bg-card);
    border-radius: var(--radius);
    padding:       1.25rem 1.5rem;
    border-left:   4px solid transparent;
    box-shadow:    var(--shadow-sm);
    transition:    transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card.kpi-primario   { border-left-color: var(--s-color); }
.kpi-card.kpi-alerta     { border-left-color: var(--warning); }
.kpi-card.kpi-exito      { border-left-color: var(--success); }
.kpi-card.kpi-neutro     { border-left-color: #6c757d; }

.kpi-icon {
    width:  44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.kpi-primario .kpi-icon { background: rgba(220,53,69,.1);  color: var(--s-color); }
.kpi-alerta   .kpi-icon { background: rgba(230,168,23,.1); color: var(--warning); }
.kpi-exito    .kpi-icon { background: rgba(25,135,84,.1);  color: var(--success); }
.kpi-neutro   .kpi-icon { background: rgba(108,117,125,.1);color: #6c757d; }

.kpi-label {
    font-size:   .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-labels);
    margin-bottom: .2rem;
}
.kpi-value {
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--text-main);
    line-height: 1.2;
}
.kpi-sub {
    font-size:   .72rem;
    color:       var(--text-muted);
    margin-top:  .15rem;
}

/* Dashboard cards de módulo */
.module-card {
    background:    var(--bg-card);
    border:        1px solid var(--border-color);
    border-top:    4px solid var(--s-color);
    border-radius: var(--radius);
    padding:       1.75rem 1.5rem;
    text-align:    center;
    transition:    transform .2s, box-shadow .2s;
    cursor:        pointer;
    text-decoration: none;
    display:       block;
    color:         inherit;
}
.module-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-md);
    color:      inherit;
    text-decoration: none;
}
.module-card .module-icon {
    font-size:    2.2rem;
    color:        var(--s-color);
    margin-bottom: .75rem;
    display:      block;
}
.module-card .module-title {
    font-size:   .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--text-main);
    margin-bottom: .35rem;
}
.module-card .module-desc {
    font-size:   .75rem;
    color:       var(--text-muted);
    line-height: 1.4;
}

/* ─── Inputs ─────────────────────────────────────────────── */
.erp-input {
    display:    block;
    width:      100%;
    padding:    .5rem .85rem;
    font-size:  .85rem;
    font-family: 'Montserrat', sans-serif;
    border:     1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    color:      var(--text-main);
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
}
.erp-input:focus {
    outline:      none;
    border-color: var(--s-color);
    box-shadow:   0 0 0 3px rgba(220,53,69,.12);
}
.erp-input.is-invalid {
    border-color: var(--s-color);
}
.erp-input::placeholder { color: #aab4be; }

.erp-label {
    font-size:   .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:       var(--text-labels);
    margin-bottom: .3rem;
    display:     block;
}

/* ─── Botones ────────────────────────────────────────────── */
.btn-erp {
    display:     inline-flex;
    align-items: center;
    gap:         .35rem;
    padding:     .45rem 1.2rem;
    font-size:   .78rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border:      none;
    border-radius: var(--radius-sm);
    cursor:      pointer;
    transition:  opacity .15s, transform .1s;
    text-decoration: none;
    line-height: 1.4;
}
.btn-erp:active { transform: scale(.97); }
.btn-erp:disabled { opacity: .55; cursor: not-allowed; }

.btn-erp-primary {
    background: var(--s-color);
    color:      #fff;
}
.btn-erp-primary:hover:not(:disabled) { opacity: .88; color: #fff; }

.btn-erp-outline {
    background: transparent;
    border:     1.5px solid var(--s-color);
    color:      var(--s-color);
}
.btn-erp-outline:hover:not(:disabled) {
    background: var(--s-light);
    color:      var(--s-color);
}

.btn-erp-ghost {
    background: transparent;
    color:      var(--text-labels);
    border:     1.5px solid var(--border-color);
}
.btn-erp-ghost:hover:not(:disabled) {
    background: var(--border-color);
    color:      var(--text-main);
}

.btn-erp-success {
    background: var(--success);
    color:      #fff;
}
.btn-erp-success:hover:not(:disabled) { opacity: .88; color: #fff; }

.btn-erp-sm {
    padding:   .25rem .65rem;
    font-size: .7rem;
}

/* ─── Tablas ─────────────────────────────────────────────── */
.erp-table {
    width:           100%;
    border-collapse: collapse;
    margin-top:      .5rem;
}
.erp-table thead th {
    font-size:      .65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--text-labels);
    padding:        .65rem .85rem;
    border-bottom:  2px solid var(--border-color);
    white-space:    nowrap;
    background:     #fafbfc;
}
.erp-table tbody td {
    padding:        .6rem .85rem;
    font-size:      .8rem;
    border-bottom:  1px solid #f0f0f0;
    vertical-align: middle;
}
.erp-table tbody tr:hover { background: rgba(0,0,0,.02); }
.erp-table-zebra tbody tr:nth-child(odd) { background: rgba(0,0,0,.015); }
.erp-table thead th.col-acciones,
.erp-table tbody td.col-acciones { width: 1%; white-space: nowrap; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge-erp {
    display:     inline-flex;
    align-items: center;
    padding:     .2rem .55rem;
    font-size:   .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 20px;
}
.badge-erp-success  { background: rgba(25,135,84,.12);  color: #146c43; }
.badge-erp-danger   { background: rgba(220,53,69,.12);  color: #b02a37; }
.badge-erp-warning  { background: rgba(230,168,23,.15); color: #9a6700; }
.badge-erp-info     { background: rgba(13,202,240,.12); color: #0a9bba; }
.badge-erp-secondary{ background: rgba(108,117,125,.12);color: #495057; }
.badge-erp-dark     { background: rgba(33,37,41,.1);    color: #212529; }

/* ─── Modales ────────────────────────────────────────────── */
.modal-erp .modal-content {
    border:        none;
    border-radius: var(--radius);
    box-shadow:    0 8px 32px rgba(0,0,0,.18);
}
.modal-erp .modal-header {
    background:    var(--s-color);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    padding:       .85rem 1.25rem;
}
.modal-erp .modal-title {
    color:       #fff;
    font-size:   .88rem;
    font-weight: 700;
}
.modal-erp .modal-header .btn-close {
    filter: invert(1);
    opacity: .8;
}
.modal-erp .modal-footer {
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
    gap: .5rem;
}

/* Modal grande */
.modal-erp-xl .modal-dialog { max-width: 900px; }
.modal-erp-lg .modal-dialog { max-width: 720px; }

/* ─── Barra de búsqueda de módulo ─────────────────────────── */
.module-toolbar {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-wrap:   wrap;
    margin-bottom: 1rem;
}
.search-erp {
    position: relative;
    flex:      1;
    min-width: 200px;
    max-width: 360px;
}
.search-erp .bi {
    position:  absolute;
    left:      .75rem;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--text-muted);
    font-size: .9rem;
}
.search-erp input {
    padding-left: 2.2rem;
}

/* ─── Session countdown widget ───────────────────────────── */
#erp-countdown-wrap {
    font-size:   .72rem;
    font-weight: 600;
    color:       rgba(255,255,255,.55);
    display:     flex;
    align-items: center;
    gap:         .3rem;
    cursor:      default;
    user-select: none;
}

/* ─── Alerts / Toasts ────────────────────────────────────── */
.alert-erp {
    padding:     .65rem 1rem;
    border-radius: var(--radius-sm);
    font-size:   .82rem;
    font-weight: 600;
    border:      none;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.alert-erp-success { background: rgba(25,135,84,.1);  color: #146c43; }
.alert-erp-danger  { background: rgba(220,53,69,.1);  color: #b02a37; }
.alert-erp-warning { background: rgba(230,168,23,.12);color: #9a6700; }
.alert-erp-info    { background: rgba(13,202,240,.1); color: #0a9bba; }

/* ─── DataTables personalización ─────────────────────────── */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info {
    font-size:   .75rem;
    color:       var(--text-labels);
    font-family: 'Montserrat', sans-serif;
}
div.dataTables_wrapper div.dataTables_filter input {
    font-family: 'Montserrat', sans-serif;
    font-size:   .8rem;
    border:      1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding:     .3rem .65rem;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
    background:  var(--s-color);
    border:      1px solid var(--s-color);
    color:       #fff !important;
    border-radius: var(--radius-sm);
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover {
    background:  var(--s-light);
    border:      1px solid var(--border-color);
    color:       var(--s-color) !important;
    border-radius: var(--radius-sm);
}

/* ─── Select2 personalización ────────────────────────────── */
.select2-container--default .select2-selection--single {
    border:        1px solid var(--border-color);
    border-radius: var(--radius-sm);
    height:        calc(1.5em + .65rem + 2px);
    font-family:   'Montserrat', sans-serif;
    font-size:     .85rem;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--s-color);
    box-shadow:   0 0 0 3px rgba(220,53,69,.12);
    outline:      none;
}
.select2-results__option--highlighted {
    background: var(--s-color) !important;
}
.select2-container--default .select2-results__option--selected {
    background: var(--s-light) !important;
    color:      var(--text-main) !important;
}

/* ─── Separador de sección ───────────────────────────────── */
.section-divider {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin:      1.25rem 0 1rem;
}
.section-divider .divider-title {
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--text-labels);
    white-space:    nowrap;
}
.section-divider .divider-line {
    flex:        1;
    height:      1px;
    background:  var(--border-color);
}

/* ─── Login ──────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display:    flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1f1f 50%, #1a1a1a 100%);
    padding:    1rem;
}
.login-card {
    width:      100%;
    max-width:  420px;
    background: #fff;
    border-radius: var(--radius);
    padding:    2.5rem 2rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.login-logo {
    font-size:   1.6rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-align:  center;
    margin-bottom: .25rem;
}
.login-logo .logo-marca-1 { color: var(--s-color); }
.login-logo .logo-marca-2 { color: var(--text-main); }
.login-subtitle {
    text-align:  center;
    font-size:   .72rem;
    color:       var(--text-muted);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .card-erp       { padding: 1rem; }
    .kpi-value      { font-size: 1.1rem; }
    .module-toolbar { flex-direction: column; align-items: stretch; }
    .search-erp     { max-width: 100%; }
}

/* ─── Print ───────────────────────────────────────────────── */
@media print {
    .navbar-erp, .btn-erp, .modal, #erp-countdown-wrap { display: none !important; }
    body { background: #fff; font-size: 10pt; }
    .card-erp { box-shadow: none; border: 1px solid #ccc; }
}