/* Conciliar30 — Pipeline de etapas */

/* ── Pipeline: las etapas son la navegación ── */
.c30-pipeline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.c30-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid var(--rz-border-color);
    cursor: pointer;
    min-width: 150px;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    user-select: none;
}
.c30-step:hover { transform: translateY(-1px); }
.c30-step.done { opacity: 0.65; }

.c30-step.rojo.sel  { border-color: var(--rz-danger);  background: color-mix(in srgb, var(--rz-danger) 7%, transparent); }
.c30-step.ambar.sel { border-color: var(--rz-warning); background: color-mix(in srgb, var(--rz-warning) 9%, transparent); }
.c30-step.verde.sel { border-color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 7%, transparent); }
.c30-step.gris.sel  { border-color: var(--rz-info);    background: color-mix(in srgb, var(--rz-info) 7%, transparent); }

.c30-step.rojo:hover  { border-color: var(--rz-danger); }
.c30-step.ambar:hover { border-color: var(--rz-warning); }
.c30-step.verde:hover { border-color: var(--rz-success); }
.c30-step.gris:hover  { border-color: var(--rz-info); }

.c30-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}
.c30-step.rojo  .c30-step-num { background: var(--rz-danger); }
.c30-step.ambar .c30-step-num { background: var(--rz-warning); }
.c30-step.verde .c30-step-num { background: var(--rz-success); }

.c30-step-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.c30-step-count { font-size: 17px; font-weight: 700; }
.c30-step-label { font-size: 11px; color: var(--rz-text-secondary-color); white-space: nowrap; }

.c30-step.rojo  .c30-step-count { color: var(--rz-danger); }
.c30-step.ambar .c30-step-count { color: var(--rz-warning-dark, #b8860b); }
.c30-step.verde .c30-step-count { color: var(--rz-success); }
.c30-step.done  .c30-step-count { color: var(--rz-success); }

.c30-step-mini { min-width: 110px; padding: 8px 10px; }
.c30-step-mini-icon { font-size: 20px; color: var(--rz-text-secondary-color); }

.c30-step-arrow { font-size: 18px; color: var(--rz-text-tertiary-color); flex-shrink: 0; }

/* Descuadre total: el "para qué" de la pantalla */
.c30-descuadre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 2px dashed color-mix(in srgb, var(--rz-warning) 45%, transparent);
    background: color-mix(in srgb, var(--rz-warning) 6%, transparent);
    white-space: nowrap;
}
.c30-descuadre-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-warning-dark, #b8860b);
}

/* Motivos del match: por que el sistema cree que la pareja encaja */
.c-match-motivos {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    flex-shrink: 0;
    max-width: 190px;
    justify-content: flex-end;
}
.c-motivo {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}
.c-motivo.ok { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, transparent); }
.c-motivo.warn { color: var(--rz-warning-dark, #b8860b); background: color-mix(in srgb, var(--rz-warning) 12%, transparent); }
.c-motivo.alta { color: var(--rz-success); background: transparent; padding: 0; display: inline-flex; align-items: center; }

.c30-confirmados {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-info) 8%, transparent);
    color: var(--rz-info);
    font-size: 12px;
    white-space: nowrap;
}
.c30-confirmados .rzi { font-size: 17px; }

/* ── Shell: paneles fijos arriba + etapa con scroll propio ── */
.c30-shell {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* fallback si los paneles fijos (decisiones/conocimiento) crecen demasiado */
}

/* ── Cabecera de etapa ── */
.c30-stage-card {
    padding: 8px 6px;
    flex: 1 1 auto;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.c30-stage-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 14px;
}
.c30-stage-head.rojo  { background: color-mix(in srgb, var(--rz-danger) 5%, transparent); }
.c30-stage-head.ambar { background: color-mix(in srgb, var(--rz-warning) 7%, transparent); }
.c30-stage-head.verde { background: color-mix(in srgb, var(--rz-success) 5%, transparent); }
.c30-stage-head.gris  { background: var(--rz-base-200); }
.c30-stage-head .c-meta { font-weight: 400; }
.c30-stage-head .rzi { font-size: 19px; }
.c30-stage-head.rojo  .rzi { color: var(--rz-danger); }
.c30-stage-head.ambar .rzi { color: var(--rz-warning-dark, #b8860b); }
.c30-stage-head.verde .rzi { color: var(--rz-success); }

/* ── Panel de decisiones automaticas (auditoría de la tanda) ── */
.c-decisiones-panel {
    border-left: 3px solid var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 4%, transparent);
}
.c-decisiones-lista {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 360px; overflow-y: auto;
    padding: 4px;
}
.c-decision-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border-left: 2px solid var(--rz-info);
    background: var(--rz-base-background-color);
    font-size: 12px;
}
.c-decision-item.deshecha {
    opacity: 0.55;
    border-left-color: var(--rz-base-400);
    text-decoration: line-through;
}
.c-decision-icon {
    font-size: 16px;
    color: var(--rz-info);
    flex-shrink: 0;
    margin-top: 2px;
}
.c-decision-fuente {
    font-weight: 600;
    color: var(--rz-info);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.c-decision-concepto {
    font-weight: 500;
    flex-grow: 1;
    min-width: 0;
}
.c-decision-cambio {
    margin-top: 2px;
}
.c-decision-motivo {
    display: flex; align-items: flex-start; gap: 4px;
    margin-top: 3px;
    color: var(--rz-text-secondary-color);
    font-size: 11px;
    line-height: 1.4;
}

/* ── Listas ── */
.c30-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; padding: 0 8px 8px; }

/* Group headers */
.c-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    transition: background 0.15s;
}
.c-group-header:hover { background: var(--rz-base-200); }

/* Rows */
.c-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}
.c-row:hover { background: var(--rz-base-200); }
.c-done { border-left-color: var(--rz-success); opacity: 0.4; pointer-events: none; }
.c-row-warn { border-left-color: var(--rz-warning); }

/* Columns */
.c-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; flex: 1; }
.c-dias-col { flex-shrink: 0; width: 40px; text-align: center; }

/* Actions */
.c-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.c-row:hover .c-actions { opacity: 1; }

/* Typography */
.c-title { font-weight: 500; font-size: 13px; }
.c-meta { font-size: 12px; color: var(--rz-text-secondary-color); }

/* Badges dias */
.c-dias { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 8px; white-space: nowrap; }
.c-dias.ok { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, transparent); }
.c-dias.warn { color: var(--rz-warning-dark, #b8860b); background: color-mix(in srgb, var(--rz-warning) 10%, transparent); }
.c-dias.bad { color: var(--rz-danger); background: color-mix(in srgb, var(--rz-danger) 10%, transparent); }

/* ═══ Agrupación semántica ═══ */
.c-grupo-sem-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    background: color-mix(in srgb, var(--rz-base-200) 50%, transparent);
    transition: background 0.15s;
}
.c-grupo-sem-header:hover { background: var(--rz-base-200); }

/* Sin operación — layout 2 columnas */
.c-row-sinop {
    display: flex; gap: 8px; padding: 4px 10px; align-items: stretch;
    border-left: 3px solid transparent;
}
.c-row-sinop[data-dias="warn"] { border-left: 3px solid var(--rz-warning); }
.c-row-sinop[data-dias="urgent"] { border-left: 3px solid var(--rz-danger); }

.c-sinop-mov {
    width: 500px; flex-shrink: 0; padding: 8px 12px !important;
}
.c-sinop-op {
    width: 500px; flex-shrink: 0; padding: 8px 12px !important;
    display: flex; align-items: center;
}

.c-sinop-yaconciliada {
    padding: 2px 6px;
    background: color-mix(in srgb, var(--rz-base-200) 60%, transparent);
    border-radius: 4px;
    border-left: 2px solid var(--rz-success);
}

.c-mov-concepto .c-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block;
}

/* Smart selection etapa Sin clasificar */
.c-concepto-selectable { cursor: text; user-select: text; }

.c-regla-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-top: 4px;
    background: color-mix(in srgb, var(--rz-info) 8%, transparent);
    border: 1px solid var(--rz-info);
    border-radius: 6px;
    font-size: 12px;
}
.c-regla-chip code {
    background: var(--rz-base-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.c-sinop-preview {
    padding: 8px 0 0; border-top: 1px solid var(--rz-border-color);
}

.c-reglas-header {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 10px 6px; font-size: 13px; font-weight: 600; color: var(--rz-text-secondary-color);
    border-top: 1px solid var(--rz-border-color); margin-top: 10px;
}

.c-regla-sug {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px;
    border-left: 3px solid var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 3%, transparent);
    transition: background 0.15s;
}
.c-regla-sug:hover { background: color-mix(in srgb, var(--rz-primary) 6%, transparent); }

.c-regla-keyword { flex-shrink: 0; }
.c-regla-keyword code {
    background: var(--rz-base-200); padding: 2px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
}
.c-regla-dir { flex-shrink: 0; width: 60px; }
.c-regla-info { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }

/* Direction badges */
.c-dir-badge {
    font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 8px; white-space: nowrap;
}
.c-dir-neg { color: var(--rz-danger); background: color-mix(in srgb, var(--rz-danger) 10%, transparent); }
.c-dir-pos { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, transparent); }
.c-dir-ambos { color: var(--rz-info); background: color-mix(in srgb, var(--rz-info) 10%, transparent); }

/* Conocimiento */
.c30-contexto-pre {
    white-space: pre-wrap;
    font-size: 12px;
    max-height: 300px;
    overflow: auto;
}

/* Descuadre por entidad (etapa "Sin operación") */
.c-descuadre-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; white-space: nowrap;
}
.c-descuadre-chip.warn { color: var(--rz-warning-dark, #b8860b); background: color-mix(in srgb, var(--rz-warning) 12%, transparent); }
.c-descuadre-chip.info { color: var(--rz-info); background: color-mix(in srgb, var(--rz-info) 10%, transparent); }
.c-descuadre-chip .rzi { font-size: 13px; }

/* Diagnóstico del grupo: el descuadre explicado en una frase */
.c-diag {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; margin: 2px 0 6px; border-radius: 6px;
    font-size: 12.5px; line-height: 1.35;
}
.c-diag .rzi { font-size: 17px; flex-shrink: 0; }
.c-diag.warn { color: var(--rz-warning-dark, #b8860b); background: color-mix(in srgb, var(--rz-warning) 8%, transparent); }
.c-diag.info { color: var(--rz-info); background: color-mix(in srgb, var(--rz-info) 6%, transparent); }
.c-diag.ok { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 6%, transparent); }

@media (max-width: 1100px) {
    .c30-step { min-width: 120px; }
    .c-row-sinop { flex-direction: column; }
    .c-sinop-mov, .c-sinop-op { width: 100%; }
}

/* ── Conciliación rápida: resaltar el número que casa entre concepto y documento ── */
.c-num-match { background: color-mix(in srgb, var(--rz-warning) 32%, transparent); color: var(--rz-text-color); font-weight: 700; border-radius: 4px; padding: 0 4px; }
.c-num-match:empty { display: none; padding: 0; }

/* ── Conciliación rápida (cr-*) ── */
.cr-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cr-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }
.cr-bolt { color: var(--rz-warning); font-size: 22px; }
.cr-ok-text { color: var(--rz-success); }

.cr-group-head {
	position: sticky; top: 0; z-index: 3;
	display: flex; align-items: center; gap: 8px;
	padding: 7px 10px; margin-top: 10px;
	background: var(--rz-base-200); border-radius: 6px;
	cursor: pointer; user-select: none;
}
.cr-group-head:first-child { margin-top: 0; }
.cr-group-count { font-weight: 700; color: var(--rz-text-secondary-color); }

.cr-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) 150px;
	align-items: center; gap: 12px;
	padding: 7px 10px;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--rz-base-200);
}
.cr-row:hover { background: var(--rz-base-100); }
.cr-row.cr-warn { border-left-color: var(--rz-warning); }
.cr-row.cr-done { opacity: 0.5; }

.cr-bank { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cr-concepto { display: flex; align-items: center; min-width: 0; font-size: 13px; }
.cr-conc-pre { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-conc-post { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-concepto .c-num-match { flex: 0 0 auto; white-space: nowrap; margin: 0 3px; }
.cr-doc { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; min-width: 0; }
.cr-docnum { font-weight: 700; font-size: 13px; color: var(--rz-text-color); }
.cr-amt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cr-warn-text { color: var(--rz-warning-dark, #b8860b); font-weight: 600; }
.cr-ok-mini { font-size: 14px; color: var(--rz-success); }
.cr-ok { font-size: 20px; color: var(--rz-success); }
.cr-action { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.cr-docref { font-size: 11px; color: var(--rz-text-secondary-color); white-space: nowrap; }

/* ── Desglose de liquidación (dl-*) ── un ingreso que paga varias operaciones ── */
.dl-hero-icon {
	width: 38px; height: 38px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
	color: var(--rz-primary);
}
.dl-hero-icon .rz-icon, .dl-hero-icon i { font-size: 22px; }

/* Barra de cuadre: cuánto del ingreso cubren las operaciones casadas */
.dl-bar { height: 8px; border-radius: 99px; overflow: hidden; background: var(--rz-base-300); }
.dl-bar-fill { height: 100%; border-radius: 99px; background: var(--rz-success); transition: width 0.3s ease; }
.dl-bar-fill.dl-over { background: var(--rz-warning); }
.dl-dif { color: var(--rz-warning-dark, #b8860b); font-weight: 600; }

/* Selector de liquidación */
.dl-pick-row {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: 8px;
	border-bottom: 1px solid var(--rz-base-200);
	cursor: pointer;
}
.dl-pick-row:hover { background: var(--rz-base-100); }
.dl-pick-icon {
	width: 34px; height: 34px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--rz-base-200); color: var(--rz-text-secondary-color);
}
.dl-pick-icon .rz-icon, .dl-pick-icon i { font-size: 19px; }

.dl-empty { display: flex; align-items: center; gap: 6px; padding: 16px 10px; justify-content: center; }