/* ==========================================================================
   SAO Logistics · Panel — tema sobre Limitless
   Identidad SAO (igual que el panel SAO OCR): azul corporativo profundo, acento cian, superficies
   claras y limpias, tipografía Inter. Todo el color sale de las variables de :root, que cada
   esquema de empresa redefine en themes.css (<html data-theme="...">).
   ========================================================================== */

:root {
    --so-blue:        #0b3d91;   /* azul SAO */
    --so-blue-2:      #0b5fb0;
    --so-blue-soft:   #e7effb;
    --so-cyan:        #00a3e0;
    --so-cyan-soft:   #dff4fc;
    --so-navy:        #071f4d;   /* sidebar */
    --so-navy-2:      #0a2a66;
    --so-side-text:   #dbe7ff;   /* texto del sidebar */
    --so-side-icon:   #8fb4e8;   /* iconos del sidebar */
    --so-bg:          #f3f6fb;
    --so-surface:     #ffffff;
    --so-border:      #e1e7f0;
    --so-text:        #1f2937;
    --so-muted:       #6b7a90;
    --so-success:     #1f9d55;
    --so-warning:     #e59a0c;
    --so-danger:      #d63b3b;
    --so-radius:      .9rem;
    --so-shadow:      0 6px 24px rgba(11, 61, 145, 0.08);
    --so-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body { background: var(--so-bg); color: var(--so-text); }

/* ---------- Marca ---------- */
.brand-title { color: var(--so-blue); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.brand-title .brand-accent { color: var(--so-cyan); }
.brand-title .fw-light { color: var(--so-muted); font-weight: 500 !important; }

/* ---------- Navbar ---------- */
.so-navbar { background: var(--so-surface); border-bottom: 1px solid var(--so-border); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.so-toggler { background: var(--so-blue); }
.so-account-pill { background: var(--so-blue-soft); color: var(--so-blue) !important; font-weight: 600; }
.so-account-pill:hover { filter: brightness(.96); }
.avatar-ring { border: 2px solid var(--so-cyan); background: #fff; }
.so-progress { background: #e6ecf5; border-radius: 999px; }
.so-progress .progress-bar { background: linear-gradient(90deg, var(--so-blue-2), var(--so-cyan)); border-radius: 999px; }
.so-progress .progress-bar.bg-warning { background: var(--so-warning); }
.so-progress .progress-bar.bg-danger { background: var(--so-danger); }
.so-progress .progress-bar.bg-success { background: var(--so-success); }

/* ---------- Sidebar ---------- */
.sidebar, .sidebar-main, .sidebar-content, .sidebar-section { background: var(--so-navy) !important; }
.sidebar { border-right: 0; }
.sidebar-section-body { background: transparent; }
.sidebar .nav-item-header { padding: .9rem 1.25rem .35rem; }
.so-sidebar-btn { background: var(--so-navy-2); }

/* ---------- Cabecera de página ---------- */
.page-header, .page-header-light { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.page-header .breadcrumb-item { color: var(--so-cyan) !important; font-size: 1.35rem; }
.page-title { color: var(--so-blue); font-weight: 700; }

/* ---------- Tarjetas ---------- */
.card { border: 1px solid var(--so-border); border-radius: var(--so-radius); box-shadow: var(--so-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--so-border); border-radius: var(--so-radius) var(--so-radius) 0 0 !important; }
.card-header h5, .card-header h6 { color: var(--so-blue); font-weight: 700; }
.card-footer { background: #fafbfe; border-top: 1px solid var(--so-border); }

.stat-card { padding: 1.25rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.stat-card .stat-icon { width: 3rem; height: 3rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--so-blue-soft); color: var(--so-blue); flex: 0 0 auto; }
.stat-card .stat-icon.cyan { background: var(--so-cyan-soft); color: var(--so-cyan); }
.stat-card .stat-icon.green { background: #e6f6ec; color: var(--so-success); }
.stat-card .stat-icon.amber { background: #fff4e0; color: var(--so-warning); }
.stat-card .stat-icon.red { background: #fde8e8; color: var(--so-danger); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; color: var(--so-text); line-height: 1.1; }
.stat-card .stat-label { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--so-muted); }
.stat-card .stat-sub { font-size: .8rem; color: var(--so-muted); }

/* ---------- Formularios ---------- */
.form-control:focus, .form-select:focus { border-color: var(--so-cyan); box-shadow: 0 0 0 .2rem var(--so-cyan-soft); }
.form-check-input:checked { background-color: var(--so-blue-2); border-color: var(--so-blue-2); }
.form-label { font-weight: 600; color: #34415a; font-size: .85rem; }
.form-text { color: var(--so-muted); }
input[type="color"].form-control { padding: .2rem; height: 2.6rem; }
code, .so-code { font-family: var(--so-mono); font-size: .85em; background: #f0f4fa; color: var(--so-blue); padding: .1rem .35rem; border-radius: .3rem; }
.so-key-box { font-family: var(--so-mono); background: #0f1d3a; color: #9fe1ff; padding: .8rem 1rem; border-radius: .6rem; word-break: break-all; }

/* ---------- Botones ---------- */
.btn-primary { background: var(--so-blue-2); border-color: var(--so-blue-2); }
.btn-primary:hover, .btn-primary:focus { background: var(--so-blue); border-color: var(--so-blue); }
.btn-outline-primary { color: var(--so-blue-2); border-color: var(--so-blue-2); }
.btn-outline-primary:hover { background: var(--so-blue-2); border-color: var(--so-blue-2); }
.btn-light { background: #fff; border: 1px solid var(--so-border); color: var(--so-text); }
.btn-light:hover { background: var(--so-blue-soft); border-color: #cdd9ec; }
.btn-cyan { background: var(--so-cyan); border-color: var(--so-cyan); color: #fff; }
.btn-cyan:hover { filter: brightness(.9); color: #fff; }
a { color: var(--so-blue-2); }
a:hover { color: var(--so-blue); }
.text-primary { color: var(--so-blue-2) !important; }
.bg-primary { background-color: var(--so-blue-2) !important; }
.bg-primary.bg-opacity-10 { background-color: var(--so-blue-soft) !important; }

/* ---------- Tablas ---------- */
.table thead th { color: var(--so-muted); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--so-border) !important; }
.table > :not(caption) > * > * { border-bottom-color: #edf1f7; }
.table-hover tbody tr:hover > * { background: #f6f9fd; }
.datatable-header, .datatable-footer { border-color: var(--so-border) !important; }
.so-row-link { cursor: pointer; }
.so-filename { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* ---------- Badges ---------- */
.badge.plan-free { background: #e9edf3; color: #4b5872; }
.badge.plan-starter { background: var(--so-cyan-soft); color: #056f9a; }
.badge.plan-business { background: var(--so-blue-soft); color: var(--so-blue); }
.badge.plan-enterprise { background: linear-gradient(90deg, var(--so-blue), var(--so-cyan)); color: #fff; }
.badge.tier-flash { background: #fff4e0; color: #9a5b00; }
.badge.tier-pro { background: linear-gradient(90deg, #5b21b6, #0b5fb0); color: #fff; }

/* ---------- Zona de subida ---------- */
.so-dropzone { border: 2px dashed #b9c8e0; border-radius: var(--so-radius); background: #fafcff; padding: 2.5rem 1.5rem; text-align: center; transition: all .15s ease; cursor: pointer; }
.so-dropzone:hover, .so-dropzone.dragover { border-color: var(--so-cyan); background: var(--so-cyan-soft); }
.so-dropzone i { font-size: 2.6rem; color: var(--so-blue-2); }
.so-upload-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--so-border); border-radius: .6rem; background: #fff; margin-bottom: .5rem; }
.so-upload-item .progress { height: 6px; }

/* ---------- Detalle de documento ---------- */
.so-preview { background: #eef2f8; border-radius: var(--so-radius); min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.so-preview img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.so-preview iframe { width: 100%; height: 80vh; border: 0; background: #fff; }
.so-preview .so-preview-toolbar { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; }
.so-field-group { border: 1px solid var(--so-border); border-radius: .7rem; padding: .85rem 1rem .5rem; background: #fbfcfe; }
.so-field-group-title { font-weight: 700; color: var(--so-blue); font-size: .85rem; margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .04em; }
.so-array-table td { vertical-align: middle; padding: .25rem; }
.so-array-table thead th { font-size: .7rem; }
.so-rv-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed #e8edf5; }
.so-rv-key { color: var(--so-muted); font-size: .85rem; flex: 0 0 42%; }
.so-rv-val { font-weight: 600; text-align: right; word-break: break-word; }
.so-rv-group { margin: .75rem 0; padding: .6rem .8rem; background: #f7f9fd; border-radius: .6rem; }
.so-rv-title { font-weight: 700; color: var(--so-blue); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
pre.so-json { background: #0f1d3a; color: #dbe7ff; border-radius: .7rem; padding: 1rem; font-size: .8rem; max-height: 70vh; overflow: auto; }
.so-json-key { color: #9fe1ff; } .so-json-str { color: #b5f5c5; } .so-json-num { color: #ffd58a; } .so-json-bool { color: #f4a3ff; } .so-json-null { color: #98a2b3; }
.so-warning-list li { margin-bottom: .25rem; }

/* ---------- Gráficas ligeras ---------- */
.so-minibars { display: flex; align-items: flex-end; gap: 4px; }
.so-minibar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.so-minibar-fill { width: 100%; background: linear-gradient(180deg, var(--so-cyan), var(--so-blue-2)); border-radius: 3px 3px 0 0; min-height: 2px; transition: height .3s ease; }
.so-minibar-fill.green { background: var(--so-success); }
.so-minibar-label { font-size: .62rem; color: var(--so-muted); margin-top: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Planes ---------- */
.so-plan-card { border: 2px solid var(--so-border); border-radius: var(--so-radius); padding: 1.5rem; height: 100%; background: #fff; position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.so-plan-card:hover { transform: translateY(-3px); box-shadow: var(--so-shadow); }
.so-plan-card.current { border-color: var(--so-cyan); }
.so-plan-card.highlight { border-color: var(--so-blue-2); }
.so-plan-card .so-plan-price { font-size: 2rem; font-weight: 800; color: var(--so-blue); }
.so-plan-card .so-plan-price small { font-size: .9rem; color: var(--so-muted); font-weight: 500; }
.so-plan-card ul { list-style: none; padding: 0; margin: 1rem 0; }
.so-plan-card ul li { padding: .3rem 0; font-size: .9rem; border-bottom: 1px dashed #eef2f8; }
.so-plan-card .so-plan-ribbon { position: absolute; top: -.7rem; right: 1rem; }

/* ---------- Login / páginas públicas ---------- */
.background-login { position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 10% -10%, var(--so-cyan-soft) 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, var(--so-blue-soft) 0%, transparent 60%), var(--so-bg); }
.login-wrapper { min-height: 100vh; }
.login-phrase { text-align: center; max-width: 48rem; margin: 0 auto 2rem; padding: 0 1rem; }
.login-phrase p { font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.25; color: var(--so-blue); margin: 0; letter-spacing: -.01em; }
.login-phrase small { display: block; margin-top: .5rem; color: var(--so-muted); letter-spacing: .04em; }
.glass-card { background: #fff; border: 1px solid var(--so-border); border-radius: 1.2rem; box-shadow: var(--so-shadow); padding: 2.25rem; width: 100%; max-width: 480px; margin: 0 auto; }
.glass-card h1, .glass-card h2 { color: var(--so-blue); font-weight: 800; }
.glass-card h1 span, .glass-card h2 span { color: var(--so-cyan); }
.glass-card .logo { height: 96px; margin-bottom: 1rem; }
.glass-card .logo-mobile { height: 64px; margin-bottom: .5rem; }
.form-floating { position: relative; margin-bottom: 1.1rem; }
.form-floating input[type="password"] { padding-right: 3rem; }
.password-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--so-muted); z-index: 5; }
.password-toggle:hover { color: var(--so-blue); }
.forgot-link { color: var(--so-blue-2); text-decoration: none; font-size: .9rem; }
.forgot-link:hover { text-decoration: underline; }
.btn-login { padding: .8rem; font-weight: 600; border-radius: .7rem; }
.so-feature-list { list-style: none; padding: 0; margin: 1.25rem 0 0; text-align: left; }
.so-feature-list li { padding: .35rem 0; color: #34415a; font-size: .92rem; }
.so-feature-list li i { color: var(--so-cyan); margin-right: .5rem; }
html:has(body.so-standalone), body.so-standalone { height: auto !important; min-height: 100%; overflow: visible !important; }
body.so-standalone { position: static !important; }

/* ---------- Varios ---------- */
#loadable_content { display: none; }
.content { margin-bottom: 50px; }
.nav-tabs .nav-link { color: var(--so-muted); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--so-blue); border-bottom: 2px solid var(--so-cyan); }
.card-header-tabs .nav-link { border: none; border-bottom: 2px solid transparent; }
.card-header-tabs .nav-link.active { background: transparent; border-bottom-color: var(--so-cyan); }
.alert { border-radius: .8rem; }
.swal2-popup { border-radius: 1rem !important; }
.swal2-actions { gap: .5rem; }
.swal2-actions > button + button { margin: 0; }
.dropdown-menu { border: 1px solid var(--so-border); box-shadow: var(--so-shadow); border-radius: .7rem; }
.dropdown-item.active { background: var(--so-blue-soft); color: var(--so-blue); }
.so-kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .9rem; }
.so-kv dt { color: var(--so-muted); font-weight: 500; }
.so-kv dd { margin: 0; font-weight: 600; }
.so-scopes .form-check { margin-right: 1rem; }
.so-timeline { border-left: 2px solid var(--so-border); padding-left: 1rem; margin-left: .35rem; }
.so-timeline-item { position: relative; margin-bottom: .9rem; }
.so-timeline-item::before { content: ''; position: absolute; left: -1.4rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--so-cyan); }
.opacity-50 { opacity: .5; }
.so-margin-pos { color: var(--so-success); font-weight: 700; }
.so-margin-neg { color: var(--so-danger); font-weight: 700; }
.so-schema-field { border: 1px solid var(--so-border); border-radius: .6rem; padding: .6rem .75rem; margin-bottom: .5rem; background: #fff; }
.so-schema-field.nested { margin-left: 1.5rem; background: #fafcff; }
.so-schema-handle { cursor: grab; color: var(--so-muted); }

/* ---------- Menú lateral ---------- */
.sidebar-text { color: #dbe7ff; }

.nav-sidebar .nav-group-sub { flex-direction: column; flex-wrap: nowrap; }

.nav-sidebar .nav-group-sub .nav-link {
    padding-left: 2.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.nav-sidebar .nav-link.mainNavBar i { color: var(--so-side-icon); }

.nav-sidebar .nav-link.mainNavBar:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.nav-sidebar .nav-link.mainNavBar:hover i { color: var(--so-cyan); }

.nav-sidebar .nav-link.mainNavBar.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--so-cyan) 28%, transparent), color-mix(in srgb, var(--so-cyan) 2%, transparent));
    color: #fff;
    border-left: 3px solid var(--so-cyan);
}
.nav-sidebar .nav-link.mainNavBar.active i { color: var(--so-cyan); }

.nav-sidebar .nav-item-open > .nav-link { color: #fff; }

.sidebar-content { overflow-y: unset; }

.sidebar .sidebar-control:hover {
    background-color: var(--so-cyan) !important;
    color: var(--so-navy) !important;
}

/* ---------- Marca de la empresa (esquina superior izquierda) ---------- */
.so-brand-logo { height: 2.6rem; width: auto; max-width: 180px; object-fit: contain; }
.so-brand-logo.is-company { background: #fff; border-radius: .4rem; padding: .15rem .3rem; }
.so-brand-name { color: var(--so-blue); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-brand-sub { color: var(--so-muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.so-company-logo-preview { max-height: 90px; max-width: 100%; object-fit: contain; border: 1px dashed var(--so-border); border-radius: .6rem; padding: .5rem; background: #fff; }
.so-company-logo-preview.dark { background: var(--so-navy); }
.so-logo-drop { border: 2px dashed #b9c8e0; border-radius: .8rem; padding: 1rem; text-align: center; cursor: pointer; background: #fafcff; }
.so-logo-drop:hover { border-color: var(--so-cyan); background: var(--so-cyan-soft); }

/* ---------- Páginas heredadas del panel de trazabilidad ---------- */
.navbar-nav-link { color: var(--so-text); }
.page-header .breadcrumb .breadcrumb-item { font-size: .9rem; color: var(--so-muted) !important; }
.page-header .breadcrumb .breadcrumb-item.active { color: var(--so-blue) !important; }
.legacy-head-actions .dropdown-toggle { color: var(--so-blue-2); font-weight: 600; }
.navbar-footer { background: var(--so-surface); border-top: 1px solid var(--so-border); }
.editable-cell { border-bottom: 1px dashed #b9c8e0; }
.editable-cell:hover { background: var(--so-blue-soft); }
.plate-inline-input { font-family: var(--so-mono); }
.so-role-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; background: var(--so-blue-soft); color: var(--so-blue); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Controles Bootstrap que deben seguir el esquema de color ---------- */
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary.active { background: var(--so-blue-2); border-color: var(--so-blue-2); color: #fff; }
.badge.bg-primary { background-color: var(--so-blue-2) !important; }
.badge.bg-primary.bg-opacity-10 { background-color: var(--so-blue-soft) !important; color: var(--so-blue) !important; }
.nav-tabs-highlight .nav-link.active { border-top-color: var(--so-cyan); }
.page-link.active, .active > .page-link { background: var(--so-blue-2); border-color: var(--so-blue-2); }
.spinner-border.text-primary { color: var(--so-blue-2) !important; }
.so-theme-option .so-theme-name { line-height: 1.15; }
.glass-card .logo.is-company, .glass-card .logo-mobile.is-company { max-width: 240px; width: auto; object-fit: contain; }