/* =========================================================
   comisiones_v2.css — modulo Comisiones V2 (B-024, rediseno S4)
   Estilos del modulo, acotados a clases .comv2* / .comcfg*. Regla: CERO
   colores fijos, solo var(--…) de 00_tokens.css, para poder heredar otro
   tema (B-087) sin tocar este archivo. El resto usa las clases del portal
   (bal-* / ui-* / u-*).
   ========================================================= */

/* Celda de % que muestra un valor HEREDADO (default del comisionista, no un
   override propio del proyecto/lote): se pinta en gris/italica como
   placeholder, para leer de un vistazo que ese % no fue cargado a ese nivel.
   El valor subyacente sigue editable: al escribir se vuelve override. */
.comv2-inh {
    color: var(--color-text-muted) !important;
    font-style: italic;
}

/* Celda de % que es un OVERRIDE propio del proyecto (pisa el % general del
   cargo). Punto marcador antes del valor + peso semibold, sobrio. El tooltip
   ("% propio de este proyecto…") lo da comv2PctTooltip. */
.comv2-override {
    font-weight: 600;
    color: var(--color-text);
}
.comv2-override::before {
    content: "•";
    color: var(--color-danger);
    margin-right: 4px;
    font-weight: 700;
}

/* Columna Lotes unificada: la celda es clickable (abre el modal de lotes);
   nunca se edita como texto libre. Cursor + subrayado sutil para invitar al
   click, sin gritar. */
.comv2-lotes-cell {
    cursor: pointer;
    text-decoration: underline dotted var(--color-border);
    text-underline-offset: 3px;
}

/* Barra superior: selector de proyecto + 'vigente desde' + accion. */
.comv2cfg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 12px;
}

.comv2cfg-toolbar .comv2cfg-proy {
    flex: 1 1 340px;
    min-width: 260px;
}

/* =========================================================
   S4 — navegacion interna del modulo (Liquidar · Cuenta corriente ·
   Configuracion). Acotado a clases del modulo; solo variables de tokens.
   ========================================================= */
.comv2-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.comv2-nav-grupos {
    display: inline-flex;
    gap: var(--space-2);
}
.comv2-nav-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.comv2-nav-link {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-soft);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.comv2-nav-link:hover {
    background: var(--color-surface-soft);
    color: var(--color-text);
}
.comv2-nav-link.is-active,
.comv2-nav-grupos label:has(input:checked) {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.comv2-group-header {
    margin-bottom: var(--space-2);
}
/* B-088: periodo Mes / Rango (control segmentado) y rotulo del periodo. */
.comv2-periodo-modo {
    display: inline-flex;
    gap: var(--space-1);
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    width: fit-content;
}
.comv2-periodo-op {
    position: relative;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}
.comv2-periodo-op:hover { background: var(--color-surface-soft); }
.comv2-periodo-modo label:has(input:checked) {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.comv2-periodo-rango { grid-column: span 2; }
.comv2-periodo-rotulo {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-soft);
    font-weight: 600;
}

/* S4 — grupo Liquidar */
.comv2-kpi-destacada { display: flex; }
.comv2-kpi-destacada > .bal-kpi-card {
    flex: 1;
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.comv2-kpi-destacada .bal-kpi-value { color: var(--color-primary); }
.comv2-kpi-nota {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}
.comv2-det-bar { margin: var(--space-3) 0 var(--space-2); max-width: 420px; }
.comv2-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.comv2-section-resumen { color: var(--color-text-muted); font-size: 0.85rem; }
/* Celda Cargo (markdown): insignia de jerarquia + nombre; proyectos en chico. */
.comv2-cargo-cell p { margin: 0; line-height: 1.35; }
.comv2-cargo-cell strong {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 var(--space-1);
    margin-right: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    text-align: center;
    font-weight: 700;
}
.comv2-cargo-cell em {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.comv2-link-cell {
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* S4 — grupo Cuenta corriente */
.comv2-sel-bar {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}
.comv2-sel-nota { color: var(--color-text-muted); font-size: 0.8rem; margin-top: var(--space-1); }
.comv2-cc-pane { padding-top: var(--space-3); }
.comv2-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comv2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.comv2-chip {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
}
/* Chips en celdas de AG Grid: el estado va con palabra, no solo color. */
.comv2-chip-cell .ag-cell-value {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: var(--radius-lg);
    line-height: 1.6;
    font-weight: 600;
    font-size: 0.8rem;
}
.comv2-chip-activo .ag-cell-value { background: var(--color-success-soft); color: var(--color-success); }
.comv2-chip-anulado .ag-cell-value { background: var(--color-surface-2); color: var(--color-text-muted); }
.comv2-chip-deuda .ag-cell-value { background: var(--color-warning-soft); color: var(--color-warning); }
.comv2-chip-alerta .ag-cell-value { background: var(--color-danger-soft); color: var(--color-danger); }
.comv2-chip-anticipo .ag-cell-value { background: var(--color-info-soft); color: var(--color-info); }
.comv2-chip-saldado .ag-cell-value { background: var(--color-success-soft); color: var(--color-success); }
/* Extracto: filas de pago (antes un backgroundColor fijo en el rowStyle). */
.ag-theme-portal .comv2-row-pago { background-color: var(--color-success-soft); }
/* Extracto: saldo inicial (B-113); el que falta cargar se ve distinto. */
.ag-theme-portal .comv2-row-saldo-inicial { background-color: var(--color-info-soft); }
.ag-theme-portal .comv2-row-sin-cargar { background-color: var(--color-warning-soft); }
/* Saldo inicial: celdas que se pueden editar. */
.ag-theme-portal .comv2-celda-editable { background-color: var(--color-surface-2); }
/* Modal de pago: a quien se le paga, arriba. */
.comv2-pago-ctx {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.comv2-pago-ctx-cargo { font-weight: 700; }
.comv2-segmented { display: inline-flex; gap: 0; }
.comv2-segmented .form-check { padding-left: 0; margin-right: 0; }
.comv2-ec-head .bal-section-title { margin: 0; }
.comv2-nav-grupos .form-check { padding-left: 0; margin-right: 0; }

/* S4 — Configuracion: lista de proyectos a la izquierda, detalle a la derecha */
.comv2cfg-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: var(--space-4);
    align-items: start;
}
.comv2cfg-lista {
    position: relative; /* contiene los radios ocultos (absolute) */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-2);
}
.comv2cfg-proy-list .form-check,
.comv2cfg-proy-list label { display: block; width: 100%; }
.comv2cfg-proy-label {
    display: block;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.comv2cfg-proy-label:hover { background: var(--color-surface-soft); }
.comv2cfg-proy-list label:has(input:checked) {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.comv2cfg-proy-list label:has(input:disabled) { cursor: default; background: none; }
.comv2cfg-proy-grupo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding-top: var(--space-2);
}
.comv2cfg-proy-nombre { font-weight: 600; line-height: 1.25; }
/* Selector de recibos: el menu se ensancha y cada opcion va en una linea
   (con «…»); antes el texto largo se partia y se encimaba con la siguiente
   (las opciones tienen alto fijo). Los chips elegidos tambien se acotan. */
.comv2-recibos-dd .Select-menu-outer { min-width: 700px; max-width: 90vw; right: 0; left: auto; }
.comv2-recibos-dd .VirtualizedSelectOption {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 35px;
    padding-top: 0;
    padding-bottom: 0;
}
.comv2-recibos-dd .Select-value {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
}
.comv2-recibos-dd .Select-value-label {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* V2-8: buscador y encabezado clickeable de «Otros (sin cargos)». */
.comv2cfg-buscar { margin-bottom: var(--space-2); }
.comv2cfg-proy-list label:has(.comv2cfg-proy-toggle) { background: none; color: inherit; }
.comv2cfg-proy-list label:has(.comv2cfg-proy-toggle):hover { background: var(--color-surface-soft); }
.comv2cfg-proy-toggle { cursor: pointer; }
/* V2-2: la celda Cargo en una linea; lo que no entra (proyectos) se corta. */
.comv2-cargo-cell .ag-cell-value { min-width: 0; flex: 1 1 auto; }
.comv2-cargo-cell .agGrid-Markdown > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comv2cfg-proy-detalle { font-size: 0.78rem; color: var(--color-text-muted); }
.comv2cfg-detalle { min-width: 0; }
/* Chips «del cargo» / «propio» en las celdas de % (markdown <code>). */
.comv2-pct-cell p { margin: 0; }
.comv2-pct-cell code {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.72rem;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}
.comv2-link-peligro { color: var(--color-danger); }
@media (max-width: 900px) {
    .comv2cfg-layout { grid-template-columns: 1fr; }
}
.comv2-pct-propio { font-weight: 600; }
.comv2-pct-propio code { background: var(--color-primary-soft); color: var(--color-primary); }

/* S4 — panel lateral «Editar %» */
.comv2-pnl.offcanvas { width: min(560px, 100vw); }
.comv2-pnl .offcanvas-title { font-weight: 700; color: var(--color-text); }
.comv2-pnl-scope .form-check {
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 1.5em);
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.comv2-pnl-scope .form-check:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.comv2-pnl-op-titulo { font-weight: 600; color: var(--color-text); }
.comv2-pnl-op-ayuda { font-size: 0.82rem; color: var(--color-text-muted); }
.comv2-pnl-tabla { width: 100%; margin-top: var(--space-2); border-collapse: collapse; }
.comv2-pnl-tabla th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}
.comv2-pnl-tabla td { padding: var(--space-1); border-bottom: 1px solid var(--color-hairline); }
.comv2-pnl-del-cargo, .comv2-pnl-desde { color: var(--color-text-muted); font-size: 0.85rem; }
.comv2-pnl-input { max-width: 120px; }
.comv2-pnl-jer { max-width: 100px; }
.comv2-pnl-modo .form-check { margin-bottom: var(--space-1); }
.comv2-pnl-aviso-fuerte {
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-text);
    font-weight: 600;
}
.comv2-pnl-hist-btn { padding-left: 0; }

/* S4 — asistente «+ Agregar cargo al proyecto» */
.comv2-wiz-pasos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.comv2-wiz-paso {
    padding: 2px var(--space-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.comv2-wiz-paso.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.comv2-wiz-paso.is-done { color: var(--color-success); border-color: var(--color-success); }
.comv2-wiz-lista { position: relative; max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-1); }
.comv2-wiz-lista label { display: block; width: 100%; }
.comv2-wiz-lista label:has(input:checked) { background: var(--color-primary-soft); color: var(--color-primary); }
.comv2-wiz-otros { max-height: 200px; overflow-y: auto; }
.comv2-wiz-resumen { margin: 0; padding-left: var(--space-4); }
.comv2-wiz-resumen li { margin-bottom: var(--space-1); }

/* S4.1 — celda Lotes sin lotes elegidos: no comisiona (advertencia). */
.comv2-lotes-sin { color: var(--color-warning); font-weight: 600; }