/* ============================================================================
 * compra-kompra.css — modernización del formulario de compras (kompra)
 * Compatible con los 4 contextos (regla feedback_ui_compat_legacy_nuevo):
 *   - Legacy claro / Legacy smart-style-1 -> cabeceras nativas #404040, cuerpo claro.
 *   - Diseño nuevo light / dark -> paleta moderna; DARK solo con body.g-newdesign.theme-dark.
 * Todo scopeado a .kompra-modern (no afecta otras vistas). No cambia ningún id/name.
 * ==========================================================================*/

.kompra-modern {
    --k-card:        #ffffff;
    --k-border:      #e4e8ef;
    --k-border-soft: #eef1f6;
    --k-text:        #2c3742;
    --k-muted:       #7b8794;
    --k-accent:      #2a7ade;
    --k-accent-soft: #eef5fe;
    --k-head:        #f7f9fc;
    --k-head-text:   #38424e;
    --k-input-bg:    #ffffff;
    --k-total-bg:    #eaf7ef;
    --k-total-brd:   #bfe6cd;
    --k-total-text:  #1c7a43;
    --k-row-hover:   #f5f8fd;
    --k-shadow:      0 1px 2px rgba(18,38,63,.05), 0 2px 6px rgba(18,38,63,.05);
    --k-radius:      10px;
}

/* ---- DARK (exclusivo del diseño nuevo) ---- */
body.g-newdesign.theme-dark .kompra-modern {
    --k-card:        #1f242c;
    --k-border:      #333b46;
    --k-border-soft: #2a313b;
    --k-text:        #d6dbe2;
    --k-muted:       #8a95a3;
    --k-accent:      #4b93f2;
    --k-accent-soft: #21303f;
    --k-head:        #262d36;
    --k-head-text:   #e5e9ef;
    --k-input-bg:    #262d36;
    --k-total-bg:    #16342a;
    --k-total-brd:   #235c43;
    --k-total-text:  #5fd598;
    --k-row-hover:   #242b34;
    --k-shadow:      0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
}

/* ---- Paneles (cards modernas) ---- */
.kompra-modern .jarviswidget.lv-container {
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    background: var(--k-card);
    box-shadow: var(--k-shadow);
    /* NO overflow:hidden -> recortaba los dropdowns (buscador/sucursal) */
    margin-bottom: 14px;
}
.kompra-modern .jarviswidget.lv-container > header {
    background: var(--k-head);
    color: var(--k-head-text);
    border: 0;
    border-bottom: 1px solid var(--k-border);
    border-radius: var(--k-radius) var(--k-radius) 0 0;
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
}
.kompra-modern .jarviswidget.lv-container > header h2 {
    color: var(--k-head-text);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .2px;
}
.kompra-modern .jarviswidget.lv-container > header .widget-icon i { color: var(--k-accent); }
.kompra-modern .jarviswidget.lv-container > header .widget-toolbar { padding-top: 0; border: 0; }

/* LEGACY = look nativo: cabecera #404040 (regla dura) */
body:not(.g-newdesign) .kompra-modern .jarviswidget.lv-container > header {
    background: #404040;
    border-bottom-color: #404040;
}
body:not(.g-newdesign) .kompra-modern .jarviswidget.lv-container > header h2 { color: #fff; }
body:not(.g-newdesign) .kompra-modern .jarviswidget.lv-container > header .widget-icon i { color: #fff; }

/* ---- Labels / inputs ---- */
.kompra-modern .smart-form .label {
    color: var(--k-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 3px;
}
.kompra-modern .smart-form .input input,
.kompra-modern .smart-form .select select,
.kompra-modern .smart-form .textarea textarea,
.kompra-modern .form-control,
.kompra-modern .chosen-single {
    background: var(--k-input-bg) !important;
    color: var(--k-text) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    transition: border-color .15s, box-shadow .15s;
}
.kompra-modern .smart-form .input input:focus,
.kompra-modern .smart-form .select select:focus,
.kompra-modern .smart-form .textarea textarea:focus,
.kompra-modern .form-control:focus {
    border-color: var(--k-accent) !important;
    box-shadow: 0 0 0 3px var(--k-accent-soft) !important;
    outline: none;
}
.kompra-modern .lv-disabled,
.kompra-modern input[disabled],
.kompra-modern input[readonly] {
    background: var(--k-border-soft) !important;
    color: var(--k-muted) !important;
}

/* ---- Buscadores (proveedor / producto) destacados ---- */
.kompra-modern #txt_search_producto,
.kompra-modern [id$="txt_search_producto"] {
    border-radius: 8px !important;
    padding-left: 12px;
    height: 40px;
    font-size: 14px;
}

/* ---- Tabla de detalle ---- */
.kompra-modern .table {
    margin-bottom: 0;
    background: var(--k-card);
    color: var(--k-text);
    border-color: var(--k-border) !important;
}
.kompra-modern .table > thead > tr > th {
    background: var(--k-head);
    color: var(--k-head-text);
    border-color: var(--k-border) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-weight: 600;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 2;
}
.kompra-modern .table > tbody > tr > td {
    border-color: var(--k-border-soft) !important;
    color: var(--k-text);
    vertical-align: middle;
}
.kompra-modern .table.table-hover > tbody > tr:hover > td { background: var(--k-row-hover); }
body:not(.g-newdesign) .kompra-modern .table > thead > tr > th { background: #404040; color: #fff; }

/* ---- Panel de totales (destacado) ---- */
.kompra-modern .k-totales {
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    background: var(--k-card);
    box-shadow: var(--k-shadow);
    padding: 10px 14px;
    width: 100%;
}
.kompra-modern .k-totales td { padding: 4px 5px; color: var(--k-text); border: 0; }
.kompra-modern .k-totales td:first-child { color: var(--k-muted); font-size: 12px; }
.kompra-modern .k-totales input { text-align: right; }
.kompra-modern .k-total-row td {
    padding-top: 10px !important;
    border-top: 1px dashed var(--k-border) !important;
}
.kompra-modern .k-total-row td:first-child { color: var(--k-total-text) !important; font-weight: 700; font-size: 14px; }
.kompra-modern #txt_total,
.kompra-modern [id$="txt_total"] {
    background: var(--k-total-bg) !important;
    border: 1px solid var(--k-total-brd) !important;
    color: var(--k-total-text) !important;
    font-weight: 700;
    font-size: 16px;
    height: 42px;
}

/* ---- Barra de acciones (footer) tipo sticky moderno ---- */
.kompra-modern .k-actionbar {
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    background: var(--k-card);
    box-shadow: var(--k-shadow);
    padding: 10px 14px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    bottom: 0;
    z-index: 5;
}
.kompra-modern .k-actionbar footer { border: 0; background: transparent; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; width: 100%; }
.kompra-modern .k-actionbar #tool_btn { margin-left: auto; }

/* ---- Botón importar XML / toolbar ---- */
.kompra-modern #b_from_xml,
.kompra-modern [id$="b_from_xml"] { border-radius: 8px; font-weight: 600; }

/* ============================================================================
 * LAYOUT — reorganización real de los campos (grid auto-alineado)
 * ==========================================================================*/
/* Cada fila de campos del header (.k-fields) pasa a GRID de columnas uniformes,
   ignorando los col-N legacy dispares. Auto-fill => se acomoda solo y responsive. */
.kompra-modern .k-fields {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 14px 16px;
    padding: 16px !important;
    align-items: stretch;
}
.kompra-modern .k-fields > section.col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    min-width: 0;
}
/* campos que merecen más ancho (spans explícitos) */
.kompra-modern .k-fields > section.k-span-2 { grid-column: span 2; }
.kompra-modern .k-fields > section.k-span-3 { grid-column: span 3; }
.kompra-modern .k-fields .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kompra-modern .k-help { color: var(--k-muted); cursor: help; font-size: 12px; opacity: .75; }
.kompra-modern .k-help:hover { color: var(--k-accent); opacity: 1; }

/* proveedor: input + botón "Agregar" en línea */
.kompra-modern .k-inline-add { display: flex; align-items: center; gap: 6px; }
.kompra-modern .k-inline-add .input { flex: 1; min-width: 0; }
.kompra-modern .k-inline-add #btn_prov { white-space: nowrap; }
.kompra-modern .k-clear-guia { flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; }

/* ===== Toggle segmentado (Contado/Crédito, IGV Sí/No) =====
 * COMPATIBILIDAD NAVEGADORES VIEJOS (cliente con Firefox 80):
 * el estado "seleccionado" se pinta con el combinador hermano adyacente
 * `input:checked + label` (CSS2.1, soportado desde IE8/FF3), NO con :has()
 * (:has() llegó a Firefox recién en la 121 y dejaba el toggle sin resaltar).
 * Por eso el markup pone el <input> COMO HERMANO PREVIO del <label for="...">,
 * no dentro de él. Si tocás el HTML del toggle, respetá ese orden.
 * (Tools.addAliasData ya reescribe el atributo `for` con el alias del form.) */
.kompra-modern .k-seg {
    display: flex;
    width: 100%;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--k-input-bg);
    height: 36px;
    position: relative; /* ancla de los radios ocultos en position:absolute */
}
.kompra-modern .k-seg .radio {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 8px; cursor: pointer;
    color: var(--k-muted); font-weight: 600; font-size: 12.5px;
    border-right: 1px solid var(--k-border);
    transition: background .12s, color .12s;
    line-height: 1; text-align: center;
}
.kompra-modern .k-seg .radio:last-child { border-right: 0; }
.kompra-modern .k-seg .radio i { display: none !important; }
.kompra-modern .k-seg > input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
    margin: 0; padding: 0; border: 0; z-index: -1;
}
.kompra-modern .k-seg > input[type="radio"]:checked + .radio { background: var(--k-accent); color: #fff; }
/* foco por teclado (el radio real es invisible): marca el segmento activo */
.kompra-modern .k-seg > input[type="radio"]:focus + .radio { box-shadow: inset 0 0 0 2px var(--k-accent); }
.kompra-modern .k-seg > input[type="radio"][disabled] + .radio { cursor: not-allowed; opacity: .6; }

/* ===== Barra superior (título + acciones) ===== */
.kompra-modern .k-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 10px; flex-wrap: wrap;
}
.kompra-modern .k-topbar-title { font-size: 17px; font-weight: 700; color: var(--k-text); }
.kompra-modern .k-topbar-title i { color: var(--k-accent); margin-right: 6px; }
.kompra-modern .k-topbar-actions { display: flex; align-items: center; gap: 8px; }
.kompra-modern .k-fileinfo { margin-bottom: 8px; }
.kompra-modern .k-fileinfo:empty { display: none; }

/* Detalle: buscador prominente + botón agregar */
.kompra-modern #d_responsive { padding: 14px; }
.kompra-modern .k-detail-search { display: flex; align-items: center; gap: 10px; }
.kompra-modern .k-detail-search > section.col-10 { flex: 1; width: auto !important; }
.kompra-modern .k-detail-search > section.col-2 { width: auto !important; white-space: nowrap; }
.kompra-modern #d_responsive .table { margin-top: 12px; }

/* Barra: editar precio de venta (No editar / Margen % / Precio venta) sobre el detalle */
.kompra-modern .k-editbar {
    display: flex; align-items: center; gap: 10px 22px;
    margin-top: 12px; flex-wrap: wrap;
}
.kompra-modern .k-editbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kompra-modern .k-editbar-lbl {
    margin: 0; font-weight: 600; font-size: 12.5px; color: var(--k-muted); white-space: nowrap;
}
.kompra-modern .k-editbar-lbl i { color: var(--k-accent); margin-right: 4px; }
.kompra-modern .k-seg-edit { width: auto; flex: 0 0 auto; height: 32px; }
.kompra-modern .k-seg-edit .radio { padding: 0 16px; font-size: 12px; }
.kompra-modern .k-editbar-hint {
    font-size: 11.5px; color: var(--k-muted); line-height: 1.35;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--k-accent-soft); border: 1px solid var(--k-border);
    border-radius: 8px; padding: 5px 10px;
}
.kompra-modern .k-editbar-hint i { color: var(--k-accent); flex: 0 0 auto; }
.kompra-modern .k-editbar-hint b { color: var(--k-text); font-weight: 600; }
/* sub-etiqueta en encabezados de detalle (ej. "sobre costo prom.", "con IGV") */
.kompra-modern #d_responsive thead .k-th-sub {
    display: block; font-size: 10px; font-weight: 500; color: var(--k-muted);
    text-transform: none; letter-spacing: 0; margin-top: 1px;
}
/* costo del kardex (base del margen) bajo el precio de compra */
.kompra-modern #d_responsive ._costo_base { color: var(--k-accent); font-weight: 700; }
/* alarma: vende bajo costo (margen negativo) */
.kompra-modern ._utilidad_item.lv-loss,
.kompra-modern ._precio_venta.lv-loss {
    color: #d9534f !important; border-color: #d9534f !important; font-weight: 700;
    background: rgba(217, 83, 79, .07) !important;
}
.kompra-modern .k-loss-warn { color: #d9534f; font-weight: 700; }
/* badge del atajo Ctrl+S dentro del botón Grabar (usa el color del texto del botón) */
.k-kbd-hint {
    font-size: 10px; font-weight: 700; opacity: .85; margin-left: 7px;
    padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px;
    vertical-align: middle; letter-spacing: .3px;
}
.kompra-modern #tb_detail:empty::after {
    content: "Busca y agrega productos para empezar…";
    display: block; text-align: center; color: var(--k-muted);
    padding: 26px; font-style: italic;
}

/* ===== Bottom: Observaciones + Totales (facturador) ===== */
.kompra-modern .k-bottom {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 14px;
    align-items: start;
}
.kompra-modern .k-bottom .k-obs { margin-bottom: 0; }
.kompra-modern .k-bottom .k-tot { margin-bottom: 0; position: sticky; top: 8px; }
@media (max-width: 900px) { .kompra-modern .k-bottom { grid-template-columns: 1fr; } }

/* Observaciones: textarea que llena el panel (ya no queda un hueco enorme) */
.kompra-modern #txt_observaciones,
.kompra-modern [id$="txt_observaciones"] { min-height: 104px; resize: vertical; }

/* Totales: card compacta, valores a la derecha */
.kompra-modern .k-totales { margin-top: 0; }
.kompra-modern .k-totales td:first-child { white-space: nowrap; padding-right: 12px; }
.kompra-modern .k-totales td:last-child { width: 55%; }

/* ============================================================================
 * DROPDOWNS — autocomplete (productos/proveedor) + chosen (selects) legibles
 * (antes se recortaban por el overflow y en dark quedaban ilegibles)
 * ==========================================================================*/
.kompra-modern .adropdown {
    background: var(--k-card) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
    overflow: hidden;
    z-index: 1200;
}
.kompra-modern .adropdown table { background: var(--k-card) !important; color: var(--k-text) !important; margin: 0; width: 100%; }
.kompra-modern .adropdown thead th {
    background: var(--k-head) !important;
    color: var(--k-muted) !important;
    border-bottom: 1px solid var(--k-border) !important;
    font-size: 11px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600;
}
.kompra-modern .adropdown tbody td { border-top: 1px solid var(--k-border-soft) !important; color: var(--k-text) !important; }
.kompra-modern .adropdown tbody tr:hover td,
.kompra-modern .adropdown tbody tr.highlight td,
.kompra-modern .adropdown tbody tr.active td { background: var(--k-accent) !important; color: #fff !important; }
.kompra-modern .adropdown input,
.kompra-modern .adropdown .form-control { background: var(--k-input-bg) !important; color: var(--k-text) !important; border-color: var(--k-border) !important; }

/* chosen (Tipo Doc, Sucursal, Moneda) */
.kompra-modern .chosen-container .chosen-single { background: var(--k-input-bg) !important; color: var(--k-text) !important; border: 1px solid var(--k-border) !important; border-radius: 8px !important; box-shadow: none; }
.kompra-modern .chosen-container .chosen-single span { color: var(--k-text) !important; }
.kompra-modern .chosen-container .chosen-drop {
    background: var(--k-card) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
    color: var(--k-text) !important;
}
.kompra-modern .chosen-container .chosen-results li { color: var(--k-text) !important; }
.kompra-modern .chosen-container .chosen-results li.highlighted { background: var(--k-accent) !important; color: #fff !important; }
.kompra-modern .chosen-container .chosen-search input,
.kompra-modern .chosen-container-single .chosen-search input {
    background: var(--k-input-bg) !important; color: var(--k-text) !important; border: 1px solid var(--k-border) !important; border-radius: 6px;
}