@import url('mobile_fix_v4.css');
/* static/css/admin_fix.css */
/* ============================================================
   QKT ERP — SISTEMA DE DISEÑO v2.0
   Paleta: Verde (#2E7D32) + Amarillo (#F5C518)
   Tipografía: IBM Plex Sans
   Tema: Oscuro cálido (#2c2b28)
   ============================================================ */

/* ── VARIABLES GLOBALES ───────────────────────────────────── */
:root {
    /* Tipografía */
    --font-principal: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Verde (primario) */
    --qkt-green: #2E7D32;
    --qkt-green-hover: #388E3C;
    --qkt-green-dark: #1B5E20;
    --qkt-green-light: #E8F5E9;
    --qkt-green-text: #4CAF50;

    /* Amarillo (marca / acento) */
    --qkt-yellow: #F5C518;
    --qkt-yellow-hover: #E6B800;
    --qkt-yellow-light: #FFF8E1;
    --qkt-yellow-dark: #5D4E00;

    /* Semánticos */
    --qkt-success: #27ae60;
    --qkt-warning: #e67e22;
    --qkt-danger: #e74c3c;
    --qkt-info: #3498db;
    --qkt-neutral: #95a5a6;
    --qkt-teal: #1abc9c;

    /* Fondo oscuro */
    --qkt-bg: #2c2b28;
    --qkt-bg-card: #383632;
    --qkt-bg-header: #33312e;
    --qkt-border: #4a4845;
    --qkt-border-light: #3d3b38;

    /* Texto */
    --qkt-text: #d4d1c8;
    --qkt-text-bright: #e0ddd4;
    --qkt-text-dim: #8a8780;

    /* Botones */
    --qkt-btn-radius: 4px;
    --qkt-badge-radius: 12px;
}

/* ── TIPOGRAFÍA GLOBAL ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

body,
.content-wrapper,
.main-sidebar,
.main-header,
.card,
.modal,
.table,
select,
input,
textarea,
button,
.btn,
.nav-link,
.info-box,
.small-box {
    font-family: var(--font-principal) !important;
}

/* ── CORRECCIONES DE INPUTS Y SELECTS ─────────────────────── */
select, option, input[type="text"], input[type="number"], input[type="email"], input[type="url"] {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    max-width: 100%;
    box-sizing: border-box;
}

.related-widget-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100%;
}

.related-widget-wrapper > select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 150px;
}

/* Select2 */
.select2-container--admin-autocomplete .select2-selection--single {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    height: 35px !important;
    display: flex;
    align-items: center;
}

.select2-container {
    max-width: 100% !important;
    flex: 1 1 auto;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--qkt-green) !important;
    color: #ffffff !important;
}

.related-widget-wrapper-link {
    margin-left: 8px;
    opacity: 0.7;
}
.related-widget-wrapper-link:hover {
    opacity: 1;
}

/* ── PAGINACIÓN ───────────────────────────────────────────── */
.paginator {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 20px 0 !important;
    border-top: 1px solid var(--qkt-border) !important;
    font-family: var(--font-principal) !important;
    font-size: 13px !important;
}

.paginator a:not(.showall),
.paginator span.this-page {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid #e0e0e0 !important;
    background-color: #fff !important;
    color: #333 !important;
    text-decoration: none !important;
    border-radius: var(--qkt-btn-radius) !important;
    font-weight: 600 !important;
}

.paginator a:not(.showall):hover {
    background-color: #f1f3f5 !important;
    border-color: #ced4da !important;
    color: #000 !important;
}

.paginator span.this-page {
    background-color: var(--qkt-green) !important;
    color: #fff !important;
    border-color: var(--qkt-green) !important;
    cursor: default !important;
}

/* ── ENCABEZADOS DE TABLA (verde en changelist) ───────────── */
#result_list th,
.results th {
    color: var(--qkt-green-text) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* ── LINKS DE FOLIO (verde) ───────────────────────────────── */
#result_list td a,
.results td a {
    color: var(--qkt-green-text) !important;
    font-weight: 600 !important;
}

#result_list td a:hover,
.results td a:hover {
    color: var(--qkt-green-hover) !important;
}

/* ── FONDO OSCURO GLOBAL (Jazzmin/AdminLTE override) ──────── */
.content-wrapper,
.main-footer,
.card,
.card-header,
.card-body,
.card-footer,
.modal-content,
.table-responsive,
#changelist,
#changelist-form {
    background-color: var(--qkt-bg) !important;
    color: var(--qkt-text) !important;
}

/* Cards elevadas */
.card {
    background-color: var(--qkt-bg-card) !important;
    border: 1px solid var(--qkt-border-light) !important;
}

/* Tablas */
.table, .table th, .table td,
#result_list table, #result_list th, #result_list td {
    background-color: transparent !important;
    color: var(--qkt-text) !important;
    border-color: var(--qkt-border-light) !important;
}

/* Filas alternas */
.table-striped tbody tr:nth-of-type(odd),
#result_list tbody tr:nth-of-type(odd) {
    background-color: var(--qkt-bg-header) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
}
.breadcrumb-item a {
    color: var(--qkt-green-text) !important;
}
.breadcrumb-item.active {
    color: var(--qkt-text-dim) !important;
}

/* Filtros laterales del changelist */
#changelist-filter {
    background: var(--qkt-bg-card) !important;
    color: var(--qkt-text) !important;
}
#changelist-filter h2, #changelist-filter h3 {
    color: var(--qkt-text-bright) !important;
}
#changelist-filter li a {
    color: var(--qkt-text) !important;
}
#changelist-filter li.selected a {
    color: var(--qkt-green-text) !important;
    font-weight: 600;
}

/* ── FIX TÍTULOS DE MÓDULO (doble renderizado Darkly) ───── */
.content-header h1,
.content-header .content-header-title,
section.content-header h1 {
    color: var(--qkt-text-bright) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* ── FIX TÍTULOS DE MÓDULO ────────────────────────────────── */
.content-header h1,
.content-header .content-header-title,
section.content-header h1 {
    color: var(--qkt-text-bright) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* ── BOTÓN AGREGAR (Jazzmin object-tools) ─────────────────── */
.object-tools a,
.object-tools .addlink,
#changelist .object-tools a,
.btn-success,
a.btn-success,
.addlink {
    background: #2E7D32 !important;
    background-color: #2E7D32 !important;
    color: white !important;
    border: none !important;
}
.object-tools a:hover,
.btn-success:hover {
    background: #388E3C !important;
    background-color: #388E3C !important;
}

/* ── BOTÓN BUSCAR / EJECUTAR ──────────────────────────────── */
.btn-primary,
input[type="submit"].default {
    background: var(--qkt-green) !important;
    border-color: var(--qkt-green) !important;
    color: white !important;
}
.btn-primary:hover,
input[type="submit"].default:hover {
    background: var(--qkt-green-hover) !important;
}

/* ── FORMULARIOS DENTRO DE CARDS (fondo oscuro) ───────────── */
.card-header {
    background: var(--qkt-bg-header) !important;
    border-bottom: 1px solid var(--qkt-border) !important;
}

/* ── KPI BOXES en changelist (Pagos Airbnb) ───────────────── */
#changelist .card,
#changelist div[style*="background: #f8f9fa"],
#changelist div[style*="background:#f8f9fa"] {
    background: var(--qkt-bg-card) !important;
    border-color: var(--qkt-border) !important;
}

/* ── REPORTES FORM (lista compras, reporte pagos, ventas) ── */
.card-primary .card-header,
.card-info .card-header {
    background: var(--qkt-green) !important;
    border-color: var(--qkt-green) !important;
    color: white !important;
}

/* ── FONDO OSCURO FORZADO EN TODO EL ADMIN ────────────────── */
body,
html,
.wrapper,
.content-wrapper,
.content,
.content-page,
.main-footer,
.login-page,
section.content,
.container-fluid,
#content-main {
    background-color: #2c2b28 !important;
    background: #2c2b28 !important;
}

.content-wrapper {
    background: #2c2b28 !important;
    background-color: #2c2b28 !important;
    background-image: none !important;
}

/* Cards y contenedores */
.card,
.card-body,
.card-footer,
.modal-content,
.table-responsive,
.tab-content,
.nav-tabs,
.alert,
#changelist,
#changelist-form,
#changelist-filter,
.inline-group,
.inline-related,
.tabular,
.module,
fieldset,
.form-row {
    background-color: #383632 !important;
    color: #d4d1c8 !important;
}

/* Card headers */
.card-header,
.card-primary > .card-header,
.card-info > .card-header,
.card-success > .card-header {
    background-color: #2E7D32 !important;
    border-bottom: 1px solid #1B5E20 !important;
    color: white !important;
}

/* Tablas — fondo oscuro */
.table,
.table th,
.table td,
#result_list table,
#result_list th,
#result_list td,
.table-striped tbody tr,
.table-hover tbody tr {
    background-color: transparent !important;
    color: #d4d1c8 !important;
    border-color: #4a4845 !important;
}

/* Filas alternas */
.table-striped tbody tr:nth-of-type(odd),
#result_list tbody tr:nth-of-type(odd) {
    background-color: #33312e !important;
}

.table-striped tbody tr:nth-of-type(even),
#result_list tbody tr:nth-of-type(even) {
    background-color: #383632 !important;
}

#result_list tbody tr,
.table tbody tr {
    background-color: #383632 !important;
}

/* Hover en filas */
.table-hover tbody tr:hover,
#result_list tbody tr:hover {
    background-color: #3d3b38 !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
}
.breadcrumb-item a {
    color: #4CAF50 !important;
}
.breadcrumb-item.active {
    color: #8a8780 !important;
}

/* Filtros laterales */
#changelist-filter {
    background: #383632 !important;
}
#changelist-filter h2,
#changelist-filter h3 {
    color: #e0ddd4 !important;
}
#changelist-filter li a {
    color: #d4d1c8 !important;
}
#changelist-filter li.selected a {
    color: #4CAF50 !important;
    font-weight: 600;
}

/* Títulos de módulo — fix doble renderizado */
.content-header h1,
.content-header .content-header-title,
section.content-header h1 {
    color: #e0ddd4 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Botones Agregar (Jazzmin object-tools) */
.object-tools a,
.object-tools .addlink,
#changelist .object-tools a {
    background: #2E7D32 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.object-tools a:hover {
    background: #388E3C !important;
}

/* Botón Buscar/Ejecutar/Submit global */
.btn-primary,
.btn-info,
input[type="submit"].default,
.submit-row input[type="submit"] {
    background: #2E7D32 !important;
    border-color: #2E7D32 !important;
    color: white !important;
}
.btn-primary:hover,
.btn-info:hover {
    background: #388E3C !important;
    border-color: #388E3C !important;
}

/* Botón danger (Generar Documento en reportes) → verde */
.btn-danger {
    background: #2E7D32 !important;
    border-color: #2E7D32 !important;
    color: white !important;
}
.btn-danger:hover {
    background: #388E3C !important;
}

/* Inputs y selects en tema oscuro */
.form-control,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
    background-color: #33312e !important;
    color: #d4d1c8 !important;
    border: 1px solid #4a4845 !important;
}
.form-control:focus,
input:focus,
textarea:focus {
    border-color: #2E7D32 !important;
    box-shadow: 0 0 0 2px rgba(46,125,50,0.2) !important;
}

/* Select dropdowns */
select,
select.form-control {
    background-color: #33312e !important;
    color: #d4d1c8 !important;
    border: 1px solid #4a4845 !important;
}
select option {
    background-color: #383632 !important;
    color: #d4d1c8 !important;
}

/* Labels */
label,
.form-group label {
    color: #d4d1c8 !important;
}

/* Links genéricos */
a {
    color: #4CAF50;
}
a:hover {
    color: #66BB6A;
}

/* Footer */
.main-footer {
    background-color: #2c2b28 !important;
    color: #8a8780 !important;
    border-top: 1px solid #4a4845 !important;
}

/* Tabs (Pagos Airbnb, etc) */
.nav-tabs .nav-link {
    color: #8a8780 !important;
    border-color: #4a4845 !important;
}
.nav-tabs .nav-link.active {
    background-color: #383632 !important;
    color: #e0ddd4 !important;
    border-color: #4a4845 !important;
    border-bottom-color: #383632 !important;
}

/* Paginación — actualizar al oscuro */
.paginator a:not(.showall),
.paginator span.this-page {
    border-color: #4a4845 !important;
    background-color: #383632 !important;
    color: #d4d1c8 !important;
}
.paginator a:not(.showall):hover {
    background-color: #4a4845 !important;
    color: #e0ddd4 !important;
}
.paginator span.this-page {
    background-color: #2E7D32 !important;
    color: #fff !important;
    border-color: #2E7D32 !important;
}

/* Inline forms (editar cotización, etc) */
.inline-related h3,
.inline-group h2 {
    background: #33312e !important;
    color: #d4d1c8 !important;
}

/* Date hierarchy (barra de años/meses) */
.xfull {
    background: #383632 !important;
}

/* Help text */
.help-block,
.helptext,
small.text-muted {
    color: #8a8780 !important;
}

/* Checkboxes area */
.checkbox label,
.form-check-label {
    color: #d4d1c8 !important;
}

/* Select2 en modo oscuro */
.select2-container--admin-autocomplete .select2-selection--single {
    background-color: #33312e !important;
    color: #d4d1c8 !important;
    border: 1px solid #4a4845 !important;
}
.select2-dropdown {
    background-color: #383632 !important;
    border-color: #4a4845 !important;
}
.select2-results__option {
    background-color: #383632 !important;
    color: #d4d1c8 !important;
}
.select2-results__option--highlighted[aria-selected] {
    background-color: #2E7D32 !important;
    color: white !important;
}

/* ── NUCLEAR: Fondo oscuro y bordes ──────────────────────── */
/* ── FONDO OSCURO DEFINITIVO ─────────────────────────────── */
html body .content-wrapper {
    background-color: #2c2b28 !important;
    background: #2c2b28 !important;
}
html body .wrapper {
    background-color: #2c2b28 !important;
}
html body {
    background-color: #2c2b28 !important;
}
* {
    border-color: #4a4845 !important;
}
.card {
    border: 1px solid #4a4845 !important;
    box-shadow: none !important;
}
#result_list,
#result_list table,
.results,
.results table {
    border: none !important;
    box-shadow: none !important;
}
.card {
    border: 1px solid #4a4845 !important;
    box-shadow: none !important;
}
#result_list,
#result_list table,
.results,
.results table {
    border: none !important;
    box-shadow: none !important;
}

/* ── BOTONES EN TABLA: texto siempre blanco ───────────────── */
#result_list td .btn,
#result_list td a.btn,
#result_list td a[style*="background"],
.results td a[style*="background"] {
    color: white !important;
}

/* ── LOGIN PAGE ───────────────────────────────────────────── */
body.login-page {
    background-color: #2c2b28 !important;
    min-height: 100vh;
}
body.login-page .login-box {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 40px 15px !important;
}
body.login-page .login-logo {
    background: #F5C518 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 24px !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}
body.login-page .login-logo img,
body.login-page .login-logo .logo-light,
body.login-page .login-logo .logo-dark {
    max-width: 180px !important;
    width: 60% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.18)) !important;
}
body.login-page .login-logo .logo-dark {
    display: none !important;
}
body.login-page .login-logo a {
    display: block !important;
    line-height: 0 !important;
}
body.login-page .login-box .card {
    border-radius: 0 0 16px 16px !important;
    border: none !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
    margin-top: 0 !important;
    background: #383632 !important;
}
body.login-page .login-card-body {
    padding: 28px !important;
    background: #383632 !important;
}
body.login-page .login-box-msg {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #d4d1c8 !important;
    text-align: center !important;
    margin-bottom: 22px !important;
}
body.login-page .input-group {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid #4a4845 !important;
    margin-bottom: 14px !important;
}
body.login-page .input-group:focus-within {
    border-color: #2E7D32 !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.2) !important;
}
body.login-page .input-group .form-control {
    border: none !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    background: #33312e !important;
    color: #d4d1c8 !important;
    box-shadow: none !important;
}
body.login-page .input-group .input-group-text {
    background: #33312e !important;
    border: none !important;
    color: #8a8780 !important;
}
body.login-page .btn-primary,
body.login-page input[type="submit"] {
    width: 100% !important;
    padding: 13px !important;
    background: #2E7D32 !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
}
body.login-page .btn-primary:hover {
    background: #388E3C !important;
}
body.login-page footer,
body.login-page .main-footer {
    display: none !important;
}

/* FIX: franja blanca entre navbar y contenido */
.content-header,
section.content-header,
.content-wrapper > .content-header {
    background-color: #2c2b28 !important;
    background: #2c2b28 !important;
}