/* KoneXus · Sistema de Gestión — Papel Cálido */

/* ================================================
   VARIABLES
   ================================================ */
:root {
    /* ── Paleta Papel cálido ── */
    --kx-bg:           #eeeae2;   /* fondo principal */
    --kx-surface:      #fbfaf6;   /* cards, modales */
    --kx-surface2:     #f3efe7;   /* card headers, table headers */
    --kx-surface3:     #e8e2d6;   /* hover track, input bg alt */
    --kx-hover:        #e0d9ca;   /* hover state */
    --kx-border:       rgba(40,33,20,0.10);  /* bordes */
    --kx-border2:      rgba(40,33,20,0.18);  /* bordes fuertes (compat) */
    --kx-border-strong:rgba(40,33,20,0.18);  /* alias */

    /* ── Tipografía ── */
    --kx-ink:          #2a2620;   /* tinta principal */
    --kx-ink2:         #534c40;   /* tinta secundaria */
    --kx-text:         #2a2620;   /* alias compat */
    --kx-muted:        #7a7262;   /* texto suave */
    --kx-faint:        #a69d89;   /* muy suave */

    /* ── Color primario (teal) ── */
    --kx-primary:       #0d8d7f;
    --kx-primary-ink:   #ffffff;
    --kx-primary-soft:  rgba(13,141,127,0.10);
    --kx-primary-border:rgba(13,141,127,0.38);

    /* ── Colores semánticos ── */
    --kx-navy:         #1c5fb0;   /* azul Estructura */
    --kx-accent:       #c08a00;   /* amber/dorado — etapa Entregado */
    --kx-accent-h:     #a57200;
    --kx-accent-dk:    #26413C;   /* success verde oscuro */
    --kx-danger:       #CC2936;
    --kx-warning-bg:   #FFF3CD;

    /* ── Chrome oscuro (navbar/drawer siempre dark) ── */
    --kx-nav-bg:       #17181b;

    /* ── Sombra ── */
    --kx-shadow: 0 1px 2px rgba(40,33,20,0.06), 0 8px 24px rgba(40,33,20,0.06);

    /* ── Fuentes ── */
    --kx-font-ui:    'IBM Plex Sans', system-ui, sans-serif;
    --kx-font-mono:  'IBM Plex Mono', ui-monospace, monospace;
    --kx-font-brand: 'Orbitron', sans-serif;

    /* ── Colores de etapa (KPIs) ── */
    --kx-st-total: #756c5b;
    --kx-st-fab:   #0d8d7f;
    --kx-st-ent:   #bd7811;
    --kx-st-aco:   #5a6f93;
    --kx-st-mon:   #2f9558;
    --kx-st-khan:  #2079b3;

    /* ── Radios ── */
    --kx-radius:    10px;
    --kx-radius-sm: 8px;
}

/* ================================================
   BODY Y BASE
   ================================================ */
body {
    background-color: var(--kx-bg) !important;
    color: var(--kx-ink) !important;
    min-height: 100vh;
    font-family: var(--kx-font-ui);
    -webkit-font-smoothing: antialiased;
}
.kx-mono { font-family: var(--kx-font-mono); font-feature-settings: "tnum" 1; }

a {
    color: var(--kx-accent-dk);
    text-decoration: none;
}

a:hover {
    color: var(--kx-accent-h);
    text-decoration: underline;
}

.text-muted {
    color: var(--kx-muted) !important;
}

.text-dark {
    color: var(--kx-navy) !important;
}

.bg-light {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-text) !important;
}

.bg-white {
    background-color: var(--kx-surface) !important;
    color: var(--kx-text) !important;
}

hr {
    border-color: var(--kx-border);
    opacity: 1;
}

/* ================================================
   NAVBAR — siempre oscuro
   ================================================ */
.navbar {
    background-color: var(--kx-nav-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.navbar-brand {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.navbar .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    transition: color 0.15s;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #ffffff !important;
}

.navbar .dropdown-menu {
    background-color: var(--kx-navy) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 6px;
}

.navbar .dropdown-item {
    color: rgba(255,255,255,0.85) !important;
}

.navbar .dropdown-item:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #FFFFFF !important;
}

.navbar .dropdown-divider {
    border-color: rgba(255,255,255,0.15) !important;
}

.navbar-toggler {
    border-color: rgba(255,255,255,0.4) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ================================================
   SIDEBAR — siempre oscuro (ver_obra)
   ================================================ */
#obra-sidebar {
    background: var(--kx-nav-bg) !important;
    border-left: 2px solid var(--kx-primary) !important;
}

.sidebar-link {
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
    background: rgba(13,141,127,0.15) !important;
    color: var(--kx-primary) !important;
    text-decoration: none;
}

/* Sidebar global de obra */
.kx-sidebar-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
    display: block;
}
.kx-sidebar-link:hover {
    background: rgba(13,141,127,0.15);
    color: var(--kx-primary) !important;
    text-decoration: none;
}

/* FAB */
#fab-obra {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kx-primary);
    border: none;
    color: var(--kx-primary-ink);
    font-size: 1.4rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.08) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.18s cubic-bezier(.2,.8,.2,1);
}

#fab-obra:hover {
    transform: scale(1.06);
    filter: brightness(1.08);
}
#fab-obra:active {
    transform: scale(0.96);
}

/* ================================================
   CARDS
   ================================================ */
.card {
    background-color: var(--kx-surface) !important;
    border: 1px solid var(--kx-border) !important;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(19,27,35,0.08) !important;
    color: var(--kx-text) !important;
}

.card-body {
    background-color: var(--kx-surface) !important;
    color: var(--kx-text) !important;
}

.card-title, .card-text {
    color: var(--kx-text) !important;
}

.card-header {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
    border-bottom: 1px solid var(--kx-border) !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 600;
}

.card-header[class*="bg-"] {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
}

.card-footer {
    background-color: var(--kx-surface2) !important;
    border-top: 1px solid var(--kx-border) !important;
    color: var(--kx-text) !important;
}

/* ================================================
   BOTONES
   ================================================ */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Neutros */
.btn-secondary, .btn-outline-secondary {
    background-color: var(--kx-surface2) !important;
    border-color: var(--kx-border2) !important;
    color: var(--kx-text) !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: var(--kx-border) !important;
    color: var(--kx-navy) !important;
}

/* Primary → teal (acción principal) */
.btn-primary {
    background-color: var(--kx-primary) !important;
    border-color: var(--kx-primary) !important;
    color: var(--kx-primary-ink) !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.08);
    background-color: var(--kx-primary) !important;
    border-color: var(--kx-primary) !important;
}

/* Outline primary → teal suave */
.btn-outline-primary {
    background-color: var(--kx-primary-soft) !important;
    border-color: var(--kx-primary-border) !important;
    color: var(--kx-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--kx-primary) !important;
    color: var(--kx-primary-ink) !important;
    border-color: var(--kx-primary) !important;
}

/* info/light/dark → neutro claro */
.btn-info, .btn-light, .btn-dark,
.btn-outline-info, .btn-outline-light, .btn-outline-dark {
    background-color: var(--kx-surface2) !important;
    border-color: var(--kx-border-strong) !important;
    color: var(--kx-ink2) !important;
}
.btn-info:hover, .btn-light:hover, .btn-dark:hover,
.btn-outline-info:hover, .btn-outline-light:hover, .btn-outline-dark:hover {
    background-color: var(--kx-hover) !important;
    color: var(--kx-ink) !important;
}

/* Acción principal — sage */
.btn-warning, .btn-outline-warning {
    background-color: var(--kx-accent) !important;
    border-color: var(--kx-accent) !important;
    color: var(--kx-navy) !important;
    font-weight: 600;
}

.btn-warning:hover, .btn-outline-warning:hover {
    background-color: var(--kx-accent-h) !important;
    border-color: var(--kx-accent-h) !important;
    color: #FFFFFF !important;
}

/* Success */
.btn-success, .btn-outline-success {
    background-color: var(--kx-accent-dk) !important;
    border-color: var(--kx-accent-dk) !important;
    color: #FFFFFF !important;
}

.btn-success:hover, .btn-outline-success:hover {
    background-color: #1C3028 !important;
}

/* Danger */
.btn-danger, .btn-outline-danger {
    background-color: var(--kx-danger) !important;
    border-color: var(--kx-danger) !important;
    color: #FFFFFF !important;
}

.btn-danger:hover, .btn-outline-danger:hover {
    background-color: #A81E28 !important;
}

/* small dentro de botones */
.btn small, .btn .small {
    color: inherit !important;
    opacity: 1 !important;
}

/* ================================================
   TABLAS
   ================================================ */
.table {
    color: var(--kx-text) !important;
    border-color: var(--kx-border) !important;
    background-color: var(--kx-surface) !important;
}

.table thead th {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
    font-weight: 600;
    border-color: var(--kx-border) !important;
    padding: 10px 12px;
}

.table tbody tr {
    background-color: var(--kx-surface) !important;
    border-color: var(--kx-border) !important;
}

.table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-color: var(--kx-border) !important;
    color: var(--kx-text) !important;
}

.table tbody tr:hover td,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--kx-primary-soft) !important;
    box-shadow: inset 0 0 0 9999px var(--kx-primary-soft) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-ink) !important;
}

/* ================================================
   TABS
   ================================================ */
.nav-tabs {
    border-bottom: 2px solid var(--kx-border) !important;
}

.nav-tabs .nav-link {
    font-weight: 500;
    color: var(--kx-muted) !important;
    border: none !important;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, background 0.15s;
}

.nav-tabs .nav-link:hover {
    color: var(--kx-navy) !important;
    background-color: rgba(137,176,174,0.1) !important;
}

.nav-tabs .nav-link.active {
    color: var(--kx-primary) !important;
    border-bottom: 3px solid var(--kx-primary) !important;
    background-color: transparent !important;
    font-weight: 700;
    border-radius: 0 !important;
}

/* Nav-pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--kx-primary) !important;
    color: var(--kx-primary-ink) !important;
    font-weight: 700;
}

.nav-pills .nav-link {
    color: var(--kx-muted) !important;
}

.nav-pills .nav-link:hover {
    color: var(--kx-ink) !important;
    background-color: var(--kx-surface2) !important;
}

/* ================================================
   BADGES
   ================================================ */
.badge {
    padding: 0.4em 0.8em;
    font-weight: 600;
    border-radius: 6px;
}

.badge.bg-primary, .badge.bg-secondary,
.badge.bg-info, .badge.bg-dark, .badge.bg-light {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
    border: 1px solid var(--kx-border);
}

.badge.bg-warning {
    background-color: #E6A817 !important;
    color: #1A1A1A !important;
}

.badge.bg-success {
    background-color: var(--kx-accent-dk) !important;
    color: #FFFFFF !important;
}

.badge.bg-danger {
    background-color: var(--kx-danger) !important;
    color: #FFFFFF !important;
}

/* ================================================
   FORMULARIOS
   ================================================ */
.form-control, .form-select,
.form-control:disabled, .form-select:disabled {
    background-color: var(--kx-surface) !important;
    border: 1px solid var(--kx-border2) !important;
    color: var(--kx-text) !important;
    border-radius: 6px;
    transition: border-color 0.15s;
}

.form-control::placeholder {
    color: var(--kx-muted) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--kx-surface) !important;
    border-color: var(--kx-primary) !important;
    color: var(--kx-ink) !important;
    box-shadow: 0 0 0 3px var(--kx-primary-soft) !important;
}

.form-label {
    color: var(--kx-navy) !important;
    font-weight: 500;
}

.form-text {
    color: var(--kx-muted) !important;
}

.form-check-input {
    background-color: var(--kx-surface) !important;
    border: 2px solid var(--kx-border2) !important;
    cursor: pointer;
}

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

.form-check-input:focus {
    border-color: var(--kx-primary) !important;
    box-shadow: none !important;
}

.form-check-label {
    color: var(--kx-text) !important;
}

.input-group-text {
    background-color: var(--kx-surface2) !important;
    border-color: var(--kx-border2) !important;
    color: var(--kx-text) !important;
}

/* ================================================
   ALERTAS
   ================================================ */
.alert { border-radius: 8px; }

.alert-primary, .alert-info {
    background-color: rgba(137,176,174,0.15) !important;
    color: var(--kx-accent-dk) !important;
    border-color: var(--kx-accent) !important;
}

.alert-secondary {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-text) !important;
    border-color: var(--kx-border) !important;
}

.alert-success {
    background-color: #D4EDDA !important;
    color: var(--kx-accent-dk) !important;
    border-color: #A8D5B5 !important;
}

.alert-danger {
    background-color: #FDECEA !important;
    color: #8B1A1A !important;
    border-color: var(--kx-danger) !important;
}

.alert-warning {
    background-color: var(--kx-warning-bg) !important;
    color: #7A5000 !important;
    border-color: #E6A817 !important;
}

/* alert-link */
.alert-warning a, .alert-warning .alert-link { color: #5C3C00 !important; font-weight: 700 !important; text-decoration: underline !important; }
.alert-danger a, .alert-danger .alert-link   { color: #6B0F0F !important; font-weight: 700 !important; text-decoration: underline !important; }
.alert-success a, .alert-success .alert-link { color: #1A4731 !important; font-weight: 700 !important; text-decoration: underline !important; }
.alert-info a, .alert-info .alert-link       { color: var(--kx-accent-dk) !important; font-weight: 700 !important; text-decoration: underline !important; }

/* ================================================
   MODALES
   ================================================ */
.modal-content {
    background-color: var(--kx-surface) !important;
    border: 1px solid var(--kx-border) !important;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(19,27,35,0.2) !important;
    color: var(--kx-text) !important;
}

.modal-header {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
    border-bottom: 1px solid var(--kx-border) !important;
    border-radius: 10px 10px 0 0 !important;
}

.modal-header[class*="bg-"] {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
}

.modal-header.bg-danger {
    background-color: var(--kx-danger) !important;
    color: #FFFFFF !important;
}

.modal-header .btn-close {
    filter: none;
}

.modal-body {
    background-color: var(--kx-surface) !important;
    color: var(--kx-text) !important;
}

.modal-footer {
    background-color: var(--kx-surface2) !important;
    border-top: 1px solid var(--kx-border) !important;
}

/* ================================================
   DROPDOWNS
   ================================================ */
.dropdown-menu {
    background-color: var(--kx-surface) !important;
    border: 1px solid var(--kx-border) !important;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(19,27,35,0.12) !important;
}

.dropdown-item {
    color: var(--kx-text) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
}

.dropdown-divider {
    border-color: var(--kx-border) !important;
}

.dropdown-header {
    color: var(--kx-muted) !important;
}

/* ================================================
   LISTAS
   ================================================ */
.list-group-item {
    background-color: var(--kx-surface) !important;
    border-color: var(--kx-border) !important;
    color: var(--kx-text) !important;
}

.list-group-item:hover {
    background-color: var(--kx-surface2) !important;
}

.list-group-item.active {
    background-color: var(--kx-primary) !important;
    border-color: var(--kx-primary) !important;
    color: var(--kx-primary-ink) !important;
}

/* ================================================
   PAGINACIÓN
   ================================================ */
.page-link {
    background-color: var(--kx-surface) !important;
    border-color: var(--kx-border) !important;
    color: var(--kx-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--kx-primary) !important;
    border-color: var(--kx-primary) !important;
    color: var(--kx-primary-ink) !important;
}

/* ================================================
   PROGRESS
   ================================================ */
.progress {
    background-color: var(--kx-border) !important;
    border-radius: 6px;
}

/* ================================================
   ACCORDION
   ================================================ */
.accordion-item {
    background-color: var(--kx-surface) !important;
    color: var(--kx-text) !important;
    border-color: var(--kx-border) !important;
}

.accordion-button {
    background-color: var(--kx-surface2) !important;
    color: var(--kx-navy) !important;
}

.accordion-body {
    background-color: var(--kx-surface) !important;
    color: var(--kx-text) !important;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ================================================
   SCROLLBAR
   ================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--kx-bg); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--kx-border2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--kx-primary); }

/* ================================================
   UTILIDADES
   ================================================ */
.border, .border-top, .border-bottom,
.border-start, .border-end {
    border-color: var(--kx-border) !important;
}

small, .small { color: var(--kx-muted); }

code {
    background-color: var(--kx-surface2);
    color: var(--kx-accent-dk);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
}

footer {
    margin-top: 3rem;
    padding: 2rem 0;
    border-top: 1px solid var(--kx-border);
    color: var(--kx-muted);
}

/* ================================================
   NEXO — SELECCIONADO
   ================================================ */
.nexo-selected {
    background-color: var(--kx-primary-soft) !important;
    border-color: var(--kx-primary-border) !important;
}

/* ================================================
   OVERRIDES GLOBALES
   ================================================ */
.card                           { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; }
.card-body                      { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; }
.card-header                    { background-color: var(--kx-surface2) !important; color: var(--kx-navy) !important; }

.table                          { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; }
.table td, .table th            { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; border-color: var(--kx-border) !important; }
.table thead th                 { background-color: var(--kx-surface2) !important; color: var(--kx-navy) !important; }
.table-light, .table-light th   { background-color: var(--kx-surface2) !important; color: var(--kx-navy) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--kx-surface2) !important; }
.table-hover > tbody > tr:hover > * { background-color: var(--kx-primary-soft) !important; box-shadow: inset 0 0 0 9999px var(--kx-primary-soft) !important; }

.modal-content                  { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; }
.modal-header                   { background-color: var(--kx-surface2) !important; color: var(--kx-navy) !important; }

.form-control, .form-select     { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; border-color: var(--kx-border2) !important; }
.form-control::placeholder      { color: var(--kx-muted) !important; }

.tab-pane                       { background-color: transparent !important; color: var(--kx-text) !important; }
.nav-tabs .nav-link             { color: var(--kx-muted) !important; }
.nav-tabs .nav-link.active      { color: var(--kx-accent-dk) !important; border-bottom: 3px solid var(--kx-accent) !important; background-color: transparent !important; }

.list-group-item                { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; border-color: var(--kx-border) !important; }

.dropdown-menu                  { background-color: var(--kx-surface) !important; }
.dropdown-item                  { color: var(--kx-text) !important; }
.dropdown-item:hover            { background-color: var(--kx-surface2) !important; color: var(--kx-navy) !important; }

.alert                          { border: 1px solid var(--kx-border) !important; }

.bg-light                       { background-color: var(--kx-surface2) !important; color: var(--kx-text) !important; }
.bg-white                       { background-color: var(--kx-surface) !important; color: var(--kx-text) !important; }
.text-dark                      { color: var(--kx-navy) !important; }
.text-muted                     { color: var(--kx-muted) !important; }

/* ================================================
   SPINNER EN BOTONES SUBMIT
   ================================================ */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.65s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   FLATPICKR — tema KoneXus
   ================================================ */
.flatpickr-calendar {
    background: #fff !important;
    border: 1px solid var(--kx-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
    font-family: inherit !important;
    color: var(--kx-navy) !important;
}
.flatpickr-months {
    background: var(--kx-nav-bg) !important;
    border-radius: 8px 8px 0 0 !important;
}
.flatpickr-month,
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #fff !important;
    fill: #fff !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--kx-primary) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff !important;
    background: transparent !important;
    font-weight: 600 !important;
}
.flatpickr-weekdays {
    background: var(--kx-surface2) !important;
}
span.flatpickr-weekday {
    background: var(--kx-surface2) !important;
    color: var(--kx-muted) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}
.flatpickr-day {
    color: var(--kx-navy) !important;
    border-radius: 6px !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--kx-surface2) !important;
    border-color: var(--kx-primary) !important;
}
.flatpickr-day.today {
    border-color: var(--kx-primary) !important;
    color: var(--kx-primary) !important;
    font-weight: 700 !important;
}
.flatpickr-day.today:hover {
    background: var(--kx-surface2) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--kx-danger) !important;
    border-color: var(--kx-danger) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #bbb !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ccc !important;
    background: transparent !important;
}

/* ============================================================
   KX — HEADER DE OBRA (rediseño)
   ============================================================ */
.kx-header {
    position: relative;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 28px; flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--kx-surface);
    border: 1px solid var(--kx-border);
    border-radius: var(--kx-radius);
    box-shadow: var(--kx-shadow);
    overflow: hidden;
    margin-bottom: 18px;
}
.kx-header.hdr-accent { border-top: 3px solid var(--kx-primary); }

.kx-head-left { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kx-code-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.kx-code {
    font-family: var(--kx-font-mono); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--kx-primary); background: var(--kx-primary-soft);
    border: 1px solid var(--kx-primary-border); padding: 3px 9px; border-radius: 6px;
}
.kx-chip {
    font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--kx-muted); background: var(--kx-surface2);
    border: 1px solid var(--kx-border); padding: 3px 8px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
}
.kx-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kx-st-mon); display: inline-block; }
.kx-obra-title {
    font-family: var(--kx-font-ui); font-size: 1.6rem; font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.08; margin: 0; color: var(--kx-ink);
}
.kx-obra-meta {
    display: flex; align-items: center; gap: 8px 15px; flex-wrap: wrap;
    color: var(--kx-muted); font-size: 0.82rem;
}
.kx-obra-meta b { color: var(--kx-ink2); font-weight: 600; }
.kx-obra-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--kx-faint); display: inline-block; }

.kx-head-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kx-ring-wrap  { display: flex; align-items: center; gap: 13px; }
.kx-ring       { position: relative; width: 60px; height: 60px; flex: none; }
.kx-ring svg   { display: block; transform: rotate(-90deg); }
.kx-ring-val   {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--kx-font-mono); font-weight: 600; font-size: 0.88rem; color: var(--kx-ink);
}
.kx-ring-label { display: flex; flex-direction: column; gap: 2px; }
.kx-ring-label .eyebrow {
    font-size: 0.64rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--kx-muted); display: block;
}
.kx-ring-label .big {
    font-family: var(--kx-font-mono); font-size: 1.05rem; font-weight: 600;
    color: var(--kx-ink); display: block;
}
.kx-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kx-btn {
    font-family: var(--kx-font-ui); font-size: 0.82rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: var(--kx-radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
    white-space: nowrap; text-decoration: none;
}
.kx-btn i { font-size: 1rem; line-height: 1; }
.kx-btn:active { transform: translateY(1px); }
.kx-btn-primary {
    background: var(--kx-primary); color: var(--kx-primary-ink);
    font-weight: 600; border-color: var(--kx-primary);
}
.kx-btn-primary:hover { filter: brightness(1.08); color: var(--kx-primary-ink); }
.kx-btn-ghost {
    background: transparent; color: var(--kx-ink2);
    border-color: var(--kx-border-strong);
}
.kx-btn-ghost:hover { background: var(--kx-surface2); color: var(--kx-ink); }

/* ============================================================
   KX — KPI BLOCK (rediseño, ciclo de vida del panel)
   ============================================================ */
.kx-kpi-block  { margin-top: 4px; }
.kx-family     { margin-bottom: 11px; }

.kx-family-head {
    display: flex; align-items: center; gap: 13px; margin-bottom: 9px;
}
.kx-family-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
    white-space: nowrap;
}
.kx-family-tag .bar { width: 2px; height: 11px; border-radius: 2px; flex: none; }
.kx-family-tag.is-estructura { color: var(--kx-navy); }
.kx-family-tag.is-estructura .bar { background: var(--kx-navy); }
.kx-family-tag.is-khanvian   { color: var(--kx-st-khan); }
.kx-family-tag.is-khanvian .bar { background: var(--kx-st-khan); }

.kx-family-line { flex: 1; height: 1px; background: var(--kx-border); }
.kx-family-prog {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.7rem; color: var(--kx-muted); white-space: nowrap;
}
.kx-family-prog .kfp-pct {
    font-family: var(--kx-font-mono); font-weight: 600; color: var(--kx-ink);
}
.kx-family-prog .kfp-track {
    width: 72px; height: 2px; border-radius: 1px;
    background: var(--kx-surface3); overflow: hidden; flex: none;
}
.kx-family-prog .kfp-fill { height: 100%; border-radius: 1px; }

.kx-kpi-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px;
}
@media (max-width: 1100px) { .kx-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .kx-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kx-kpi {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
    background: var(--kx-surface);
    border: 1px solid var(--kx-border);
    border-radius: var(--kx-radius-sm);
    padding: 7px 10px;
    box-shadow: var(--kx-shadow);
    text-decoration: none; color: inherit;
    transition: border-color .15s, background .15s, transform .12s;
}
.kx-kpi.kx-clickable { cursor: pointer; }
.kx-kpi.kx-clickable:hover {
    border-color: var(--kx-border-strong); transform: translateY(-1px);
    box-shadow: var(--kx-shadow), 0 4px 12px rgba(40,33,20,0.08);
}
.kx-kpi__label {
    font-size: 0.59rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--kx-muted); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.kx-kpi__label .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--kx-stage, var(--kx-faint)); flex: none;
}
.kx-kpi__num {
    font-family: var(--kx-font-mono); font-size: 1.35rem; font-weight: 500;
    line-height: 1.05; letter-spacing: -0.01em;
    color: var(--kx-stage-num, var(--kx-ink));
}
.kx-prog {
    position: absolute; left: 0; bottom: 0; height: 2px;
    background: var(--kx-stage, var(--kx-faint)); opacity: 0.9;
    border-top-right-radius: 2px;
    transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.kx-kpi.kx-kpi--accent { border-color: var(--kx-primary-border); }
.kx-kpi.kx-kpi--accent .kx-kpi__num { color: var(--kx-primary); }
.kx-kpi.kx-kpi--accent .kx-prog { background: var(--kx-primary); opacity: 1; }

/* ============================================================
   KX — TABLA DE ELEMENTOS (zaguanes)
   ============================================================ */
.kx-tbl-wrap {
    border: 1px solid var(--kx-border); border-radius: var(--kx-radius-sm); overflow: hidden;
}
.kx-tbl-scroll { max-height: 460px; overflow-y: auto; }
.kx-tbl-scroll::-webkit-scrollbar { width: 7px; }
.kx-tbl-scroll::-webkit-scrollbar-thumb { background: var(--kx-surface3); border-radius: 4px; }

table.kx-elem { width: 100%; border-collapse: collapse; font-size: 0.8rem; table-layout: fixed; }
table.kx-elem thead th {
    position: sticky; top: 0; z-index: 1; background: var(--kx-surface2);
    text-align: left; font-size: 0.63rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--kx-muted); padding: 9px 10px; border-bottom: 1px solid var(--kx-border);
}
table.kx-elem tbody td {
    padding: 8px 10px; border-bottom: 1px solid var(--kx-border);
    color: var(--kx-ink2); vertical-align: middle;
}
table.kx-elem tbody tr:last-child td { border-bottom: none; }
table.kx-elem tbody tr:hover td { background: var(--kx-primary-soft); }
.kx-cell-ref {
    font-family: var(--kx-font-mono); font-size: 0.78rem; color: var(--kx-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-cell-mono { font-family: var(--kx-font-mono); font-size: 0.76rem; color: var(--kx-muted); }

/* ============================================================
   KX — PANEL (zaguanes contenedor)
   ============================================================ */
.kx-panel {
    background: var(--kx-surface); border: 1px solid var(--kx-border);
    border-radius: var(--kx-radius); display: flex; flex-direction: column;
    overflow: hidden; min-width: 0; box-shadow: var(--kx-shadow);
}
.kx-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--kx-border); background: var(--kx-surface2);
}
.kx-panel-head h5 {
    margin: 0; font-size: 0.83rem; font-weight: 600; color: var(--kx-ink);
    display: flex; align-items: center; gap: 9px;
}
.kx-panel-body { padding: 11px; display: flex; flex-direction: column; gap: 10px; }
.kx-panel-count {
    font-family: var(--kx-font-mono); font-size: 0.74rem; color: var(--kx-ink2);
    background: var(--kx-surface3); border: 1px solid var(--kx-border);
    padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}

/* ============================================================
   KX — CAMIÓN CARD (En Cola)
   ============================================================ */
.kx-truck {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    background: var(--kx-surface2); border: 1px solid var(--kx-border);
    border-left: 3px solid var(--kx-primary);
    border-radius: var(--kx-radius-sm); padding: 8px 12px 10px;
    cursor: pointer; transition: background .14s, transform .1s;
}
.kx-truck:hover { background: var(--kx-hover); transform: translateX(2px); }
.kx-truck-ico {
    width: 32px; height: 32px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--kx-primary-soft);
    color: var(--kx-primary); border: 1px solid var(--kx-primary-border);
    font-size: 1.05rem;
}
.kx-truck-main { flex: 1; min-width: 0; }
.kx-truck-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-truck-name b {
    font-family: var(--kx-font-mono); font-size: 0.86rem; font-weight: 600; color: var(--kx-ink);
}
.kx-truck-sub {
    font-size: 0.72rem; color: var(--kx-muted); margin-top: 3px;
    font-family: var(--kx-font-mono);
}
.kx-truck-load {
    position: absolute; left: 0; bottom: 0; height: 2px;
    background: var(--kx-st-ent); opacity: 0.85; border-top-right-radius: 2px;
    transition: width .5s cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   KX — FILTROS (inputs de búsqueda en panel elementos)
   ============================================================ */
.kx-filters { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
@media (max-width: 680px) { .kx-filters { grid-template-columns: 1fr; } }
.kx-field { position: relative; display: flex; align-items: center; }
.kx-field i {
    position: absolute; left: 9px; font-size: 0.85rem;
    color: var(--kx-faint); pointer-events: none;
}
.kx-input, .kx-select {
    font-family: var(--kx-font-ui); font-size: 0.8rem; color: var(--kx-ink);
    background: var(--kx-surface2); border: 1px solid var(--kx-border-strong);
    border-radius: var(--kx-radius-sm); padding: 8px 11px; width: 100%;
    outline: none; transition: border-color .14s, background .14s;
}
.kx-input { padding-left: 30px; }
.kx-input::placeholder { color: var(--kx-faint); }
.kx-input:focus, .kx-select:focus {
    border-color: var(--kx-primary); box-shadow: 0 0 0 3px var(--kx-primary-soft);
}

/* ============================================================
   KX — ZONA ZAGUANES (barra + layout)
   ============================================================ */
.kx-zona { margin-top: 26px; }
.kx-zona-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.kx-zona-title { display: flex; align-items: baseline; gap: 11px; }
.kx-zona-title h3 {
    margin: 0; font-size: 0.96rem; font-weight: 600;
    color: var(--kx-ink); letter-spacing: -0.01em;
}
.kx-zona-title .count {
    font-size: 0.78rem; color: var(--kx-muted); font-family: var(--kx-font-mono);
}
/* Sidebar layout (prototipo: 272px fijo + 1fr contenido) */
.kx-zona-body { display: grid; gap: 18px; align-items: start; }
.kx-zona-body.lay-sidebar { grid-template-columns: 272px 1fr; }
@media (max-width: 1100px) { .kx-zona-body.lay-sidebar { grid-template-columns: 1fr; } }

/* Sidebar items */
.zg-side { display: flex; flex-direction: column; gap: 7px; }
.zg-main { min-width: 0; }
.zg-pane { }

.zg-side-item {
    position: relative; overflow: hidden; cursor: pointer;
    background: var(--kx-surface); border: 1px solid var(--kx-border);
    border-radius: var(--kx-radius-sm); padding: 9px 12px 11px;
    transition: background .14s, border-color .14s;
    box-shadow: var(--kx-shadow);
}
.zg-side-item:hover { background: var(--kx-surface2); }
.zg-side-item.active { border-color: var(--kx-primary-border); }
.zg-side-item.active::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
    width: 3px; background: var(--kx-primary); border-radius: 2px;
}
.zg-si-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zg-si-name { font-weight: 600; font-size: 0.9rem; color: var(--kx-ink); }
.zg-si-code { font-family: var(--kx-font-mono); font-size: 0.68rem; color: var(--kx-muted); }
.zg-si-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.zg-si-pct { font-family: var(--kx-font-mono); font-size: 0.72rem; font-weight: 600; color: var(--kx-ink2); }
.zg-si-sub { font-size: 0.7rem; color: var(--kx-muted); }
.zg-side-item .zg-prog {
    position: absolute; left: 0; bottom: 0; height: 2px;
    background: var(--kx-primary); opacity: 0.5; border-top-right-radius: 2px;
}

/* Columnas internas por zaguán (Elementos + En Cola) */
.kx-zona-body-cols {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; align-items: start;
}
@media (max-width: 1100px) { .kx-zona-body-cols { grid-template-columns: 1fr; } }