/* Conciliar — la hoja de las tres ventanas de la cuenta bancaria:
   Conciliar 4.0 (c40-*), el desglose de liquidación (cr-* y dl-*) y Agrupar y conciliar (cb-*).
   Es global (va en _Host) y no un .razor.css porque las tres comparten fila, chips y listas. */

/* ── Lo común ── */
.c-meta { font-size: 12px; color: var(--rz-text-secondary-color); }

/* ── El armazón de una ventana: barra fija arriba, lista con su propio scroll debajo ── */
.cr-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* scrollbar-gutter: el hueco de la barra de scroll se reserva SIEMPRE, haya barra o no.
   Sin esto la lista baila mientras trabajas: conciliar va sacando movimientos de la vista («solo pendientes»
   los esconde), y en el momento en que lo que queda cabe sin scroll la barra desaparece y las filas se
   ensanchan ~15px de golpe. Pasa igual al revés al filtrar o al cambiar de mes. No es que la card cambie de
   ancho —está clavada a 757px—: es su contenido dando un salto lateral cada vez que aparece o se va la barra. */
.cr-list { flex: 1 1 auto; overflow: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; }
.cr-bolt { color: var(--rz-warning); font-size: 22px; }

/* ── Progreso de la carga: los pasos con nombre, lo hecho con su recuento ── */
.cr-pasos { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.cr-paso {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 12px; color: #9aa0a6;
}
.cr-paso-ok { color: var(--rz-success); }
.cr-paso-now { color: var(--rz-primary); font-weight: 600; }
.cr-paso-now .rzi, .cr-paso-now i { animation: cr-gira 1.4s linear infinite; }
@keyframes cr-gira { to { transform: rotate(360deg); } }

.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(--play-fondo-marcado); border-radius: 6px;
	cursor: pointer; user-select: none;
}
.cr-group-head:first-child { margin-top: 0; }

/* Píldoras de recuento: dos avisos seguidos en texto plano se leen como una sola frase; en píldora, cada uno es un dato. */
.cr-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 1px 8px; border-radius: 99px;
	font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.cr-chip-warn { color: #7a5b00; background: color-mix(in srgb, var(--rz-warning) 22%, transparent); }
.cr-chip-info { color: var(--rz-info); background: color-mix(in srgb, var(--rz-info) 12%, transparent); }
.cr-chip-ok { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 16%, transparent); }
/* «Mismo día» y «día siguiente»: los dos únicos casos en los que la fecha, ella sola, ya es un motivo para
   decir que sí —el banco apunta el ingreso ese día o al siguiente—. Verde como los demás síes de la ventana,
   pero en miniatura: vive en la segunda línea de una fila, al lado de una fecha, y no es un titular. */
.cr-chip.dl-chip-dia { padding: 0 6px; font-size: 10.5px; font-weight: 700; }

/* ── Los datos sueltos de la segunda línea de una fila, separados por una raya y no por puntos medios ──
   El punto medio se pega al dato de al lado y, cuando la línea envuelve, se queda huérfano abriendo el renglón
   siguiente («· 2,00 € de diferencia»): eso, con cuatro datos en una columna de 230px, era el amontonamiento.
   La raya es la .vr de Bootstrap —el <hr> puesto de pie— y va DENTRO del mismo span que su dato, así que nunca
   puede quedarse sola al final de un renglón: envuelve pegada a lo que separa. */
.dl-datos { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.dl-tras { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dl-tras .vr, .dl-datos .vr { min-height: 11px; }

/* La lista vive DENTRO de una card (nada suelto sobre el fondo del diálogo): la card crece con el hueco libre
   y el scroll es de la lista, no del diálogo. min-height:0 no tiene utilidad Bootstrap; por eso es CSS propio. */
/* .rz-card en el selector a propósito: el tema de Radzen trae `.rz-card{padding:var(--rz-card-padding)}` (16px) y
   se carga DESPUÉS que esta hoja, así que con `.cr-stage-card` a secas empataba en especificidad y ganaba él.
   Eran 12px por card que nadie había presupuestado, y en el panel de Conciliar 4.0 se comían una fila entera. */
.rz-card.cr-stage-card {
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column; overflow: hidden;
	padding: 10px;
}
/* El título de la card no cede espacio: quien encoge y scrollea es la lista. Y el panel de ayuda del
   DnzCardTitle, tampoco: si se aplasta, el texto que explica la ventana sale cortado. */
.cr-stage-card > header,
.cr-stage-card > .card-title-help-panel { flex: 0 0 auto; }

/* ── La fila de un documento del desglose: referencia | documento e importe | acción ── */
/* Dos renglones por fila y 5px de aire: la lista se repasa de arriba abajo contestando sí o no, y cada píxel
   de alto es una propuesta menos en pantalla. Antes eran cuatro renglones a la izquierda y tres a la derecha. */
.cr-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 280px) 150px;
	align-items: center; gap: 12px;
	padding: 5px 8px;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--rz-base-200);
}
.cr-row:hover { background: var(--play-fondo-sutil); }
.cr-row.cr-warn { border-left-color: var(--rz-warning); }
/* ── Lo conciliado ya NO se apaga ──
   Aquí había `opacity: .5`. Tenía sentido cuando lo hecho y lo pendiente compartían lista y lo hecho era ruido
   que apartar; ahora lo conciliado es el CONTENIDO de su propia card, así que apagarlo era dejar el objetivo de
   la pantalla a media tinta. Y lo que quedaba con esta clase en la lista de trabajo es la fila cobrada por OTRO
   movimiento: justo aquella cuyo aviso —«ya cobrada aparte»— no se puede permitir el lujo de no leerse.
   Además la opacidad no se puede deshacer desde dentro: apagar la fila apaga sus chips y no hay forma de que un
   hijo recupere lo que el padre le quitó, porque `opacity` crea un contexto de apilado propio.
   Que está hecha lo dicen el check verde de la izquierda y su chip, que es decirlo dos veces y de sobra. */

/* ── La marca de estado, a la izquierda y dentro de la fila ──
   Una columna propia con un icono y, debajo, el tipo. Es lo primero que cae bajo el ojo al bajar por la lista:
   el interrogante dice "esto lo tienes que confirmar tú" y el check "esto ya está hecho", sin leer una palabra.
   La columna es OPCIONAL (.cr-con-marca) y no va en .cr-row a secas porque esta misma fila la usan «Agrupar y
   conciliar» y «Buscar operación», y añadirles una columna les correría todo el contenido de sitio. */
.cr-row.cr-con-marca { grid-template-columns: 52px minmax(0, 1fr) minmax(200px, 280px) 150px; }
.cr-marca {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1px; min-width: 0; text-align: center;
}
.cr-marca .rz-icon, .cr-marca i { font-size: 24px; }
/* El color de esta columna dice el ESTADO, nunca el tipo: el tipo es una palabra y se lee. */
.cr-marca-duda { color: var(--rz-info); }
.cr-marca-ok { color: var(--rz-success); }
.cr-marca-tipo { font-size: 10.5px; font-weight: 600; line-height: 1.1; color: var(--rz-text-secondary-color); }

.cr-bank { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.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; }
/* El aviso se lee o no sirve: -dark sobre fondo claro queda lavado; -darker es el mismo amarillo, legible. */
.cr-warn-text { color: #7a5b00; font-weight: 600; }
.cr-action { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.cr-action > * { flex: 0 0 auto; }
.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 ──
   El icono del héroe y la barra de cuadre se fueron: los hacen DnzCardTitle y RadzenProgressBar. */

/* 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(--play-fondo-sutil); }
.dl-pick-icon {
	width: 34px; height: 34px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--play-fondo-marcado); color: var(--rz-text-secondary-color);
}
.dl-pick-icon .rz-icon, .dl-pick-icon i { font-size: 19px; }

/* ── Las lindes de la lista: la de lo encontrado y la de lo que se le parece ──
   Un separador es una LÍNEA y una etiqueta. Nada más: ni caja, ni fondo de color, ni icono, ni un subtítulo en
   su propio piso. Aquí había tres marcos apilados —la banda del hallazgo con su borde y su fondo azul, el marco
   que envolvía a las encontradas, y el recuadro punteado de las propuestas— y entre los tres se comían casi
   cien píxeles de la única card donde se trabaja para decir dos cosas que caben en dos renglones. Y encima
   competían: tres cajas seguidas no dicen "aquí empieza otra cosa", dicen "aquí hay tres cosas".
   Misma linde para las dos: el lector la paga una vez. */
.dl-linde {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin-top: 10px; padding: 5px 8px 4px;
	border-bottom: 1px solid var(--rz-base-300);
}
.dl-linde b { font-size: 13px; }
/* El botón se va al extremo y no se parte, por larga que sea la frase de al lado. */
.dl-linde .rz-button { flex: 0 0 auto; margin-left: auto; }

/* Una nota pegada a su linde y no al final de la lista, que es donde nadie la lee. La usa «Agrupar selección»
   para el mes que no se puede dar de alta. */
.dl-propone-nota { display: block; padding: 4px 8px 2px; }

/* ── El filtro de las propuestas: chips, y el número EN el botón ──
   Va pegado a su linde y no al final de la lista. Aquí había dos frases seguidas de veinticuatro palabras;
   ahora son los nombres del acote y el botón que lo quita, con su recuento puesto. */
.dl-filtro { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px 2px; }

/* ── Zonas: contenedores SUTILES, no cajas ──
   Con todo sobre blanco y una raya fina de separación hay que leerse los rótulos para saber dónde acaba una
   lista y empieza otra: el ojo no encuentra las fronteras solo. Y con marco, fondo de color e icono —que es de
   donde se viene— tampoco, porque tres recuadros seguidos no dicen "aquí empieza otra cosa", dicen "aquí hay
   tres cosas". El término medio es una superficie: un fondo apenas teñido y las esquinas redondeadas. Sin
   borde, sin sombra y sin línea que la cierre; lo único que hace es agrupar las filas de UN rótulo. */
.dl-zona {
	background: color-mix(in srgb, var(--play-fondo-marcado) 50%, transparent);
	border-radius: 10px;
	padding: 2px 4px;
	margin-bottom: 2px;
}
/* La de las propuestas se tiñe de azul y no de gris: es lo que NO está puesto, la misma familia de color que
   el punteado azul de sus filas y que la fila fantasma del resto tiene en ámbar. */
.dl-zona-propone { background: color-mix(in srgb, var(--rz-info) 7%, transparent); }
/* La última fila no se separa de nada: su raya inferior chocaría con la esquina redondeada de la zona. */
.dl-zona .cr-row:last-child { border-bottom: none; }

/* ── El marcador: cuánto falta por explicar, en el subtítulo de la card del buscador ──
   El título dice qué es la card y el subtítulo cómo va, igual que en «Conciliado». Pero esta cifra no es un pie
   de foto: es la meta de la pantalla, así que se lee más que un subtítulo normal.
   Se pisa .card-title-subtitle de DnzCardTitle (que es CSS global, no aislado) y solo dentro de .dl-meta: las
   otras 414 cards de la casa siguen exactamente igual. Con .rz-card delante para ganar en especificidad: el
   <style> del componente se inyecta en el body, o sea DESPUÉS que esta hoja, y a igualdad gana él. */
.rz-card.dl-meta .card-title-subtitle { font-size: 15px; font-weight: 600; color: var(--rz-text-color); }
/* Verde solo cuando de verdad está cerrado: cuadrado Y sin ninguna línea al revés. Un verde que el lote no puede
   cumplir es peor que ningún color. */
.rz-card.dl-meta-ok .card-title-subtitle { color: var(--rz-success); }
.dl-meta-ok .card-title-icon { color: var(--rz-success); }

/* La barra y el recuento acompañan al marcador: van pegados debajo y con la mitad de aire que un bloque propio.
   La barra baja a 4px porque es el acompañante del número, no el número. Sin margen negativo desde que la
   cabecera es Compact: esa ya trae su propia raya y su aire debajo, y tirar de la barra hacia arriba la pegaba
   al borde. */
.dl-marcador { margin: 0 0 8px; }

/* ── La card del objetivo: lo que ya está conciliado con este movimiento ──
   Vacía tiene que seguir estando —si apareciera al conciliar la primera fila, la pantalla entera daría un salto—
   así que su vacío es un renglón centrado y nada más: sin icono grande, sin ilustración y sin botón, que aquí no
   hay nada que hacer. Lo que se hace está en la card de abajo. */
/* .rz-card en el selector por lo mismo que en .cr-stage-card: el tema de Radzen trae `.rz-card{padding:16px}` y
   se carga DESPUÉS que esta hoja, así que a secas empata en especificidad y gana él. */
.rz-card.dl-hecho { padding: 10px; }
.dl-hecho-vacio {
	text-align: center;
	padding: 14px 8px;
	font-size: 13px;
	color: var(--rz-text-tertiary-color);
}
/* La última fila no se separa de nada: su raya inferior chocaría con el borde de la card. */
.dl-hecho .cr-row:last-child { border-bottom: none; }

/* ── El pie de la card: lo que ninguna factura explica ──
   Un PIE y no una fila más: es la última línea posible de lo conciliado —cuando ya no queda factura que atar,
   esto es lo que cierra el movimiento— y por eso se separa con una raya de arriba en vez de alinearse con las
   columnas de las filas. Su rótulo va a la izquierda, el importe pegado a los botones y los botones al extremo.
   Sin ámbar y sin punteado: registrar un gasto no es un fallo, es una de las tres respuestas normales. */
/* La raya la pone un <hr> y no un border-top. Aquí había `1px solid var(--rz-base-300)`, y base-300 vale #dfe5ec
   en claro —invisible— y #949494 en oscuro —un renglón—: la misma regla, dos cosas distintas según el tema. El
   <hr> de la casa ya resuelve eso: es un degradado que se apaga en los dos extremos, tiene su versión oscura
   escrita y se lee como una separación y no como el borde de una caja. Ver site.css. */
.dl-pie {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 0 4px 1px;
}
.dl-pie-que { font-size: 13px; font-weight: 600; color: var(--rz-text-secondary-color); }
/* El importe se va al extremo con los botones: la cifra y lo que la registra se leen juntas. */
.dl-pie .cr-amt { margin-left: auto; }

/* La puerta al otro modo: con operaciones ya en la lista, las propuestas se callan y dejan esta línea. Va
   centrada y sin fondo — es una salida, no una sección. */
.dl-puerta { display: flex; justify-content: center; padding: 6px 0 2px; }

/* El paginador de las propuestas: van de cinco en cinco, y el pager vive pegado a las filas que pagina.
   Sin fondo ni borde propios — es un control, no otra banda: la lista ya tiene dos lindes encima. */
.dl-pager { display: flex; align-items: center; justify-content: center; padding: 2px 0 4px; }
/* .rz-pager y NO .rz-paginator: la clase que emite RadzenPager.GetComponentCssClass() es «rz-pager». */
.dl-pager .rz-pager { background: transparent; border: none; padding: 0; min-height: 0; }

/* ── Lo que se ha leído del concepto del banco ──
   Un concepto real es un amasijo («TRANSF /Bizum DE RESOEX S.L.( FRANCISCO QUIJADA...) (Ext: 71689)») y lo
   único que se busca ahí dentro es QUIÉN paga. Por eso la entidad va en el azul de la casa —el mismo del
   movimiento elegido en la lista de la izquierda— y todo lo demás que sirva para reconocer la operación
   (nº de factura, referencia, pasarela) va en rosa. DOS COLORES y ninguna otra marca: subrayar uno y colorear
   el otro son dos idiomas distintos para dos cosas del mismo rango, y obliga a traducir cuál es cuál.
   Si la IA no contesta no se pinta ninguno y el concepto se lee tal cual, que es como estaba antes.

   El rosa se declara aquí, y por tema, porque el rosa de gráficas no vale para TEXTO: --rz-series-3 es #f075e8
   en claro, que sobre blanco da 2,5:1 y se lee como un borrón. Estos dos dan ~6:1 cada uno en su tema, que es
   lo que hace falta para un dato de 13px que hay que comparar con la pantalla. */
[data-bs-theme="light"] { --dl-rosa: #c2185b; }
[data-bs-theme="dark"] { --dl-rosa: var(--rz-series-3, #f06292); }

/* -dark y no el primary a secas, por el mismo motivo que .cr-warn-text: #3481e5 sobre blanco da 3,9:1 y este es
   justo el trozo que hay que comparar con la pantalla — resaltar dejándolo MENOS legible que el texto de al lado
   (8,9:1) es resaltar al revés. Mismo azul de la casa, un escalón más oscuro. */
.dl-ent { color: var(--rz-primary-dark, #375a8b); font-weight: 700; }
.dl-dato { color: var(--dl-rosa, #c2185b); font-weight: 600; }

/* ── La cabecera del movimiento: a la izquierda quién y qué pone, a la derecha CUÁNTO ──
   Rejilla y no flex con envoltura. El importe es el número contra el que se compara cada fila de abajo —el
   cuadre, el resto, cada propuesta— y tiene que estar siempre en la misma esquina: con flex-wrap, en cuanto
   la tira de «¿es de…?» sumaba un botón el importe se caía a la línea siguiente y aparecía abajo a la
   izquierda, así que el dato principal cambiaba de sitio según el movimiento que abrieras.
   La columna del importe no se encoge (auto) y la del concepto sí: minmax(0,1fr) es lo que obliga al concepto
   a partirse dentro de su columna en vez de desbordar la card. */
.dl-cab-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }

/* ── El concepto del banco NO se corta ──
   Dentro van las referencias que se han reconocido —el número de documento en rosa, el cliente en azul— y son
   justo lo que se viene a leer aquí. Con puntos suspensivos, el dato por el que abres el movimiento se quedaba
   fuera de pantalla, y encima sin manera de verlo: la card no se puede ensanchar.
   overflow-wrap:anywhere y no break-word: un concepto de banco real viene sin espacios («TRFINMEDIATADEANAMARIA
   PINOMOLINACONCEPTOPAGOMOTOR»), y break-word no parte una palabra que no cabe entera en una línea. */
.dl-concepto { overflow-wrap: anywhere; }

/* Debajo de 640px no hay dos columnas que valgan: el concepto se queda sin sitio. El importe baja entero y se
   alinea a la izquierda, que es por donde se lee. */
@media (max-width: 640px) {
	.dl-cab-grid { grid-template-columns: minmax(0, 1fr); }
	.dl-cab-grid > :last-child { align-items: flex-start !important; }
}

/* ── Tipo y entidad, cambiables desde la cabecera ──
   Son los dos datos que MANDAN sobre las propuestas (acotan por cliente y por dónde buscar el documento), así
   que cuando están mal el panel enseña la lista equivocada y hasta ahora había que salirse a Clasificar para
   arreglarlo. Un desplegable y un popup anclado con buscador —los mismos dos controles de «Clasificar
   movimientos»—, nada de diálogos a pantalla completa: abrir media ventana para poner una etiqueta es más
   ceremonia que el arreglo. */
.dl-cab-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ── Y con forma de CHIP, no de campo de formulario ──
   Tipo y entidad son dos etiquetas que se cambian, no un formulario que se rellena. Con su marco y sus 36px de
   alto de campo, y justo encima de la tira de «¿es de…?» —que ya son píldoras—, cantaban como si aquí hubiera
   que escribir algo. Se les da la forma del chip que ya existe dos líneas más abajo (.cr-chip: radio 99px, fondo
   apenas teñido, sin marco). Solo el ASPECTO y solo dentro de esta tira: los componentes no se tocan, así que
   siguen siendo el mismo desplegable y el mismo selector en las otras 400 pantallas.
   Una sola ALTURA para los dos: son dos etiquetas de la misma tira, y cualquier diferencia de tamaño entre
   ellas se lee como que una está en otro estado. Todo lo de aquí abajo cuelga de este número.
   Y una nota de especificidad que vale para el bloque entero: tanto el CSS aislado de DinaZen como el tema de
   Radzen atacan estos elementos con DOS clases, y sus hojas pueden cargarse DESPUÉS que esta. Un empate lo
   ganan ellos, así que aquí se escribe siempre una clase más de la que parece necesaria. */
.dl-cab-edit { --dl-chip-h: 26px; }

/* El fondo de píldora va en el ENVOLTORIO de cada control, no en el campo de dentro. En el selector de entidad
   el envoltorio (.dnz-rs-wrap) es además quien recorta, así que pintar ahí es lo que hace que los dos tengan el
   mismo redondeo y el mismo fondo. Antes .dnz-rs-wrap solo recibía el radio y nunca el fondo: de ahí que el
   tipo saliera píldora rellena y la entidad siguiera pareciendo un campo de formulario. */
.dl-cab-edit .dnz-rs-wrap,
.dl-cab-edit .rz-dropdown {
	border-radius: 99px;
	border: none;
	background: var(--play-fondo-marcado);
	min-height: var(--dl-chip-h);
}
.dl-cab-edit .dnz-rs-wrap:hover,
.dl-cab-edit .rz-dropdown:hover { background: var(--play-fondo-sutil); }

/* El campo de Radzen que va DENTRO del selector, transparente y sin marco: de ahí salían las dos líneas —una
   arriba y otra abajo— que hacían que la entidad no se pareciera al tipo. */
.dl-cab-edit .dnz-rs-wrap .rz-form-field,
.dl-cab-edit .dnz-rs-wrap .rz-form-field-content {
	background: transparent;
	border: none;
	box-shadow: none;
	min-height: 0;
}
.dl-cab-edit .dnz-rs-wrap .dnz-rs-content {
	min-height: var(--dl-chip-h);
	padding: 0 4px 0 8px;
	border-radius: 99px;
}

/* El texto, al tamaño de los chips de al lado y no al de un campo. La altura se resuelve con line-height y no
   con relleno: así los dos controles miden exactamente --dl-chip-h sin cuentas.
   .rz-dropdown delante del hijo por lo dicho arriba: el tema de Radzen empataba a dos clases contra
   «.dl-cab-edit .rz-dropdown-label» y ese empate lo ganaba él, así que el desplegable seguía midiendo de alto
   lo que un campo de formulario por mucho que aquí pusiera otra cosa. */
.dl-cab-edit .dnz-rs-text,
.dl-cab-edit .rz-dropdown .rz-dropdown-label { font-size: 12.5px; }
.dl-cab-edit .rz-dropdown .rz-dropdown-label {
	padding: 0 0 0 10px;
	line-height: var(--dl-chip-h);
}

/* La X de «quitar el tipo» venía al tamaño de un campo y era lo más gordo de la cabecera. Mismo empate. */
.dl-cab-edit .rz-dropdown .rz-dropdown-clear-icon { font-size: 14px; }

/* ── Y que quepan las acciones del selector: abrir la ficha y quitar ──
   El componente las pinta en una capa absoluta separada 4px por arriba y por abajo, con iconos de 16px más 4px
   de relleno a cada lado: 24px de alto, que en un campo de 36px sobran y en este chip no caben. Como
   .dnz-rs-wrap recorta lo que se sale, el botón de abrir la ficha del cliente no es que se viera mal — es que
   desaparecía. Se pega la capa al alto del chip y se le quita relleno al icono: 16 + 2 + 2 = 20px, que entran. */
.dl-cab-edit .dnz-rs-wrap .dnz-rs-actions-overlay { top: 0; bottom: 0; gap: 4px; }
.dl-cab-edit .dnz-rs-wrap .dnz-rs-actions-overlay .dnz-icon-hover { padding: 2px; }

/* La fila de «¿es de X?»: los candidatos a entidad, de un clic. Va DEBAJO de los dos controles y no dentro,
   porque no es otro control — es una pregunta con tres respuestas, y mezclarla con el desplegable haría dudar
   de si eso ya está puesto o no. */
/* min-width:0 y no solo flex-wrap: la tira vive dentro de una columna flex, y un hijo flex NO baja de su
   contenido salvo que se le diga (min-width:auto es el defecto). Sin esto, un nombre de ficha largo empuja la
   columna entera y descoloca la cabecera en vez de partirse en dos líneas. */
.dl-cab-sug { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; min-width: 0; }
/* El tope del chip es relativo además de absoluto: 300px cuando caben, y el ancho de la tira cuando no —así un
   solo chip nunca puede ser más ancho que su sitio—. Y flex-shrink para que dos largos se repartan la línea. */
.dl-cab-sug .rz-button { padding: 1px 8px; font-size: 11.5px; max-width: min(300px, 100%); flex: 0 1 auto; min-width: 0; }
/* Una ficha de cliente web se llama «CLIENTE WEB FERMIN MOYA DÍAZ 655249965 #1EBF5214», y a tamaño completo
   dos de esas ya ocupan dos líneas de cabecera. Se cortan con puntos suspensivos: el nombre entero está en el
   title del botón, y aquí lo que hay que reconocer son las primeras palabras. */
.dl-cab-sug .rz-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Una propuesta NO está puesta, y se distingue de una referencia ya casada igual que la fila del resto se distingue
   de las demás. Punteada en azul: dice que esta operación NO está puesta, que es lo único que la distingue. */
/* Sin fondo propio: el azul lo pone ya la zona que las envuelve, y teñir las dos cosas dejaba la fila más
   oscura que su contenedor sin que eso significara nada. Aquí solo queda lo que distingue a la fila: el
   punteado de la izquierda, que dice que esta operación NO está puesta. */
.cr-row.dl-propuesta { border-left: 3px dashed var(--rz-info); }
.cr-row.dl-propuesta:hover { background: color-mix(in srgb, var(--rz-info) 9%, transparent); }

/* ── La que coincide en TODO: el nombre, el importe al céntimo y la fecha del mismo día o del siguiente ──
   Un degradado y no un fondo plano a propósito: la fila sigue siendo una propuesta —punteada, sin conciliar,
   con su botón— y lo que cambia no es su naturaleza sino que aquí ya no queda nada que comprobar. El verde
   arranca en el borde izquierdo, que es por donde se empieza a leer la fila, y se apaga antes de llegar a la
   columna de importes y al botón: teñir el dinero de verde sería la ventana opinando sobre la cifra.
   El borde deja de ser punteado azul y pasa a verde continuo: es la misma señal que el chip. */
.cr-row.dl-propuesta.dl-super {
	border-left: 3px solid var(--rz-success);
	background: linear-gradient(90deg, color-mix(in srgb, var(--rz-success) 20%, transparent) 0%, color-mix(in srgb, var(--rz-success) 7%, transparent) 50%, transparent 90%);
}
.cr-row.dl-propuesta.dl-super:hover {
	background: linear-gradient(90deg, color-mix(in srgb, var(--rz-success) 30%, transparent) 0%, color-mix(in srgb, var(--rz-success) 12%, transparent) 50%, transparent 90%);
}

/* El nombre que SÍ coincide deja de ser una nota al pie: es la comprobación que se hace con el dedo en la
   pantalla, así que se lee a tamaño de fila y en el color del texto normal. Los 12px grises de .c-meta se
   quedan para el nombre que no coincide, que ahí sí es un dato de apoyo. */
.dl-nombre-ok { font-size: 14px; font-weight: 600; color: var(--rz-text-color); }

/* La fila del resto ya no existe como fila: lo que el banco movió y ninguna factura explica es el PIE de la
   card «Conciliado». Ver .dl-pie. Iba punteada y en ámbar en mitad de la lista de trabajo, y así era el elemento
   más gritón de la pantalla justo en el caso en el que es el camino correcto: se leía como «aquí hay un
   problema» cuando lo que decía era «pulsa aquí». */

/* ── Móvil: la fila de tres columnas no cabe ──
   170-230px de documento + 150px de acción dejan el concepto en dos letras. Debajo de 640px la fila se
   parte: el concepto ocupa la línea entera, y documento y acción bajan a las suyas. */
@media (max-width: 640px) {
	.cr-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
	/* La marca aguanta en móvil: es la columna que dice si esa fila está por confirmar, y ocupa 44px. */
	.cr-row.cr-con-marca { grid-template-columns: 44px minmax(0, 1fr); }
	.cr-doc { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
	.cr-action { grid-column: 1 / -1; justify-content: flex-start; }
	.dl-pick-row { flex-wrap: wrap; }
}

/* ── Conciliar 4.0 (c40-*) ── la lista a la izquierda, el desglose del elegido a la derecha ── */

.c40-split { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; }
/* Ancho FIJO, no proporción: la lista es un índice y sus columnas son siempre las mismas (concepto, fecha e
   importe). Que creciera con la pantalla solo estiraba el hueco entre el concepto y el importe. 757px es lo que
   pide el concepto de un banco real —que es largo— sin comerse el sitio donde se trabaja.
   min-width:0 y max-width son los que lo hacen fijo DE VERDAD: un flex item vale por defecto al menos lo que
   mida su contenido (min-width:auto), así que al aparecer un botón más en la tira —el de «Marcar todos», que
   solo sale en modo selección— la card se ensanchaba sola y se comía el desglose. Con esto, lo que no cabe
   envuelve dentro de la lista en vez de empujarla. */
.c40-side { width: 757px; min-width: 0; max-width: 757px; flex: 0 0 auto; }
.c40-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
/* El panel del desglose trae su propio .cr-shell (o su card de espera): aquí se le da el hueco y el min-height:0
   que necesita para que scrollee SU lista y no la ventana entera. Bootstrap no tiene utilidad para min-height:0. */
.c40-main > .cr-shell,
.c40-main > .rz-card { flex: 1 1 auto; min-height: 0; }

/* ── El reparto de altura del panel derecho ──
   Dos cards apiladas: el movimiento y el sitio donde se trabaja. Fueron tres, y de ahí venía el problema — la card
   de sugerencias medía 350px cuando traía candidatos y dejaba la de trabajo en 96px a 1920x950 y en 20px a
   1366x720: recortada, sin scroll y con su botón a cero. Hacía falta un reparto entero de suelos y cesiones —tres
   reglas solo para eso— para que dos listas cupieran en la misma columna. Ahora las propuestas son filas de LA
   lista: crecen por donde ya había scroll y no le quitan altura a nadie.
   El suelo de la card del buscador: 20 de padding + la cabecera compacta con su marcador + la barra de cuadre + la
   banda del hallazgo. Con la caja de texto abierta el mueble crece ~106 más, y entonces la lista se queda corta y
   scrollea, que es lo que tiene que pasar. Por debajo de esto la card recortaba EN SILENCIO: la lista se quedaba
   fuera del overflow:hidden y ningún scroll la alcanzaba. */
.c40-main .rz-card.cr-stage-card { min-height: 320px; }

/* La cabecera del movimiento (concepto, entidad, tipo e importe) no se va con el scroll: es contra lo que se
   decide CADA fila de abajo, y en una liquidación de 150 referencias se decide bajando. Normalmente ni hace
   falta —quien scrollea es .cr-list y la cabecera ya se queda— pero en pantalla corta el min-height de la card
   de abajo empuja y entonces sí scrollea .c40-main. Aquí no cuesta nada: sin scroll en el contenedor, sticky no
   hace nada. */
.c40-main .dl-cab { position: sticky; top: 0; z-index: 3; }

/* Una fila de la lista: icono (qué es), concepto y fecha, importe. Se pulsa entera.
   ALTURA FIJA de 48px a propósito: la lista va virtualizada (<Virtualize ItemSize="48">) y ese número tiene que
   ser el alto REAL de la fila o el scroll se descuadra y saltan filas. Si algún día cambia el alto, cambia el
   ItemSize de Conciliar40Dialog.razor con él. Por lo mismo, la segunda línea no envuelve. */
.c40-mov {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center; gap: 10px;
	height: 48px;
	/* .cr-list es flex-column: sin esto, las filas son items flexibles y el espacio negativo que crea Virtualize
	   (sus espaciadores sí llevan flex-shrink:0) las aplasta hasta desaparecer — la lista sale en blanco. */
	flex: 0 0 48px;
	padding: 0 10px;
	overflow: hidden;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--rz-base-200);
	cursor: pointer;
}
/* La raya que separa dos movimientos es un susurro, no un renglón: base-200 es gris
   clarísimo en los DOS temas, así que sobre la lista oscura salía casi blanca y la
   partía en rayas. Aquí baja al gris de borde del tema. */
[data-bs-theme="dark"] .c40-mov { border-bottom-color: var(--rz-base-600); }
.c40-mov .c-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.c40-mov:hover { background: var(--play-fondo-sutil); }
/* La lista recibe el foco para que ↑↓ muevan por ella. El aro solo con :focus-visible —quien llega con el
   ratón no lo ve— y hacia dentro, que la lista pega con el borde de su card. Sin esto, un usuario de teclado
   no sabría qué panel manda: es lo único que lo dice. */
.cr-list:focus { outline: none; }
.cr-list:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; border-radius: 4px; }
/* El elegido se ve desde el otro lado de la pantalla: es la referencia de qué está pasando a la derecha. */
/* ── Evidente: una sola operación pendiente cuadra al céntimo Y coincide algo más ──
   Se dice con la raya de la izquierda, que es la columna que .c40-mov ya tiene reservada (3px transparentes) y
   la única que no le quita ni un píxel al concepto —la fila mide 48px clavados porque el Virtualize cuenta con
   ello, así que aquí no cabe ni un chip ni un icono más—.
   En -info y no en -primary para que se distinga de la fila SELECCIONADA, que usa esa misma raya en el azul
   primario. Y va ANTES que .sel a propósito: si el evidente es además el que estás mirando, manda la selección
   —lo tienes delante, ya no hace falta que te digan que empieces por él—.
   El porqué de cada raya viaja en el title de la fila (MatchTexto): una raya de color que no se puede preguntar
   es un código que hay que aprenderse. */
.c40-mov.evidente { border-left-color: var(--rz-info); }
.c40-mov.sel { background: color-mix(in srgb, var(--rz-primary) 9%, transparent); border-left-color: var(--rz-primary); }
/* Tocado en esta sesión: sigue en la lista (por si falta algo), pero ya no compite por la mirada. */
.c40-mov.hecho { opacity: 0.6; }
/* Marcado para agrupar. Convive con .sel y por eso se reparten el sitio: el FONDO dice «se va a escribir» y la
   BARRA de la izquierda sigue diciendo «aquí estás» (la mueven las flechas). Sin repartirlo, al marcar la fila
   perdías de vista dónde estabas y la siguiente flecha iba a ciegas.
   Va después de .sel a propósito: el fondo del marcado gana, la barra no se toca. */
.c40-mov.marcado { background: color-mix(in srgb, var(--rz-info) 14%, transparent); }

.c40-mov-ico { font-size: 19px; }
.c40-ico-ok { color: var(--rz-success); }
.c40-ico-liq { color: var(--rz-info); }
.c40-ico-entra { color: var(--rz-success); }
.c40-ico-sale { color: var(--rz-danger); }

/* ── La barra de arriba: la foto de la cuenta en KPIs ──
   Cada DnzKpiCard es una RadzenCard, y el tema le mete `.rz-card{padding:var(--rz-card-padding)}` = 16px por
   lado. Cinco recuentos con 32px de relleno vertical cada uno convertían una barra de 60px en una de 100 y se
   comían una fila de movimiento. Con Variant.Text no hay fondo que enseñar, así que el relleno tampoco pinta
   nada. Dos clases en el selector a propósito: `.rz-card` es una sola y su hoja se carga DESPUÉS que esta. */
.c40-stats .dz-kpi-compact-card { padding: 0; }

/* ── El marcador del mes ──
   Va en una cajita con borde propio y no suelto entre los KPI: es el único dato de la barra que se mueve mientras
   trabajas, y sin la caja se leía como un KPI más de los que están quietos.
   min-width fijo para que el ancho no baile: el texto de dentro cambia ("96 de 100" -> "100 de 100" -> "Mes
   conciliado") y sin suelo la barra entera se movía a cada conciliación, que es justo cuando estás mirando. */
.c40-marcador {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	padding: 4px 10px;
	border: 1px solid var(--rz-border-color, #e0e0e0);
	border-radius: 8px;
	line-height: 1.2;
}

.c40-marcador-cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.c40-marcador-cab b { font-size: 15px; }

.c40-marcador-pie {
	font-size: 11px;
	color: var(--rz-text-secondary-color);
}

/* Mes cerrado: el borde y la frase en verde. La barra ya va en Success, pero una barra llena sin nada más se lee
   igual que una barra al 97% de reojo, y "cerrar el mes" es la decisión que se toma mirando aquí. */
.c40-marcador-ok { border-color: var(--rz-success, #4caf50); }
.c40-marcador-ok .c40-marcador-pie { color: var(--rz-success, #4caf50); font-weight: 600; }

/* Estrecho: dos mitades no caben. La lista sube arriba con su propio tope de alto y el desglose se queda con el resto.
   1250 y no 1100: con la lista fija en 757px, por debajo de eso al desglose le quedaban ~330px y sus filas de tres
   columnas no entran. El corte tiene que moverse con el ancho de la lista o se parte donde no se ve. */
@media (max-width: 1250px) {
	.c40-split { flex-direction: column; }
	/* La lista cede altura (no es donde se trabaja) y el desglose se queda con lo que haya, con su suelo y su scroll.
	   300px y no 260: el buscador y las flechas se bajaron de la barra de arriba a dentro de esta card, y son 40px
	   más de cabecera. Con el tope viejo, en estrecho quedaban dos filas de movimiento y media. */
	.c40-side { width: 100%; flex: 0 1 auto; max-height: 300px; min-height: 120px; }
}

/* ── Agrupar y conciliar (cb-*) ── N apuntes sueltos del mismo tipo, un gasto por mes ── */

/* Un tipo sin nada pendiente sigue en la lista (es la respuesta a "¿y esto dónde se procesa?"), pero no
   compite por la mirada con los que sí tienen trabajo. Se atenúa, no se esconde ni se bloquea. */
.cb-tipo-vacio { opacity: .55; }
.cb-tipo-vacio:hover { opacity: 1; }

/* Cabecera de un mes: se pliega entera y lleva su propio botón de alta, porque cada mes es un gasto. */
.cb-mes-head {
	position: sticky; top: 0; z-index: 3;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	padding: 7px 10px; margin-top: 10px;
	background: var(--play-fondo-marcado); border-radius: 6px;
	cursor: pointer; user-select: none;
}
.cb-mes-head:first-child { margin-top: 0; }
.cb-mes-chevron { color: var(--rz-text-secondary-color); font-size: 20px; flex: 0 0 auto; }

/* El recuento no es un dato del mismo rango que el mes: con la misma fuente se lee "Julio 2026 48" y te
   quedas pensando "48 ¿qué?". Más pequeño, sin negrita, secundario y entre paréntesis: es una acotación. */
.cb-mes-count { font-size: 12px; font-weight: 400; color: var(--rz-text-secondary-color); }

/* El aviso del mes va pegado al recuento, antes del botón de alta: se ve con el mes plegado, que es cuando
   más peligro hay (el check de la cabecera marca las 48 de golpe). */
.cb-mes-warn {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 1px 6px; border-radius: 10px;
	background: color-mix(in srgb, var(--rz-warning) 18%, transparent);
	color: var(--rz-warning-dark, var(--rz-warning));
	font-size: 12px; font-weight: 600;
}

/* Ordenar por: tira ligera, no una barra de herramientas. El criterio activo va en sólido con su flecha. */
.cb-orden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Lo que va DEBAJO de la lista de movimientos: «Seleccionar varios», que no acota nada y por eso no vive
   arriba con los filtros. Su raya superior lo separa de la última fila sin ponerle una caja. */
.c40-pie-lista {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	padding: 6px 2px 0; margin-top: 4px;
	border-top: 1px solid var(--rz-base-200);
}

.cb-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto auto;
	align-items: center; gap: 10px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--rz-base-200);
	cursor: pointer;
}
/* La raya que separa dos movimientos es un susurro, no un renglón: base-200 es gris
   clarísimo en los DOS temas, así que sobre la lista oscura salía casi blanca y la
   partía en rayas. Aquí baja al gris de borde del tema. */
[data-bs-theme="dark"] .c40-mov { border-bottom-color: var(--rz-base-600); }
.cb-row:hover { background: var(--play-fondo-sutil); }

/* El triángulo va pegado al importe (es el importe lo que se sale), sin romper el grid de la fila. */
.cb-importe { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cb-warn { color: var(--rz-warning); font-size: 17px; cursor: help; }
/* Desmarcada: sigue a la vista (por qué está ahí es la mitad de la información) pero apagada. */
.cb-row.cb-off { opacity: 0.45; }

/* Aviso dentro de la card del resumen: mezcla de trimestres, comisiones devueltas… */
.cb-aviso {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 8px 10px; border-radius: 8px;
	background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
	border-left: 3px solid var(--rz-warning);
	font-size: 12.5px; line-height: 1.35;
}

/* ── Los tres pasos, dichos ANTES de pulsar nada ──
   La ventana hace dos cosas distintas (da de alta un gasto y concilia los movimientos) y una de ellas
   pide el OK del humano. Sin esta tira, el primer click es a ciegas: no se sabe si ya se escribe algo.
   El paso 2 va resaltado porque es el único donde decide la persona. */
.cb-pasos {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
	padding: 10px 12px; border-radius: 8px;
	background: color-mix(in srgb, var(--play-fondo-marcado) 55%, transparent);
	font-size: 12.5px; line-height: 1.35;
}
.cb-paso { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cb-paso-n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 19px; height: 19px; flex: 0 0 auto;
	border-radius: 50%;
	background: color-mix(in srgb, var(--rz-text-secondary-color) 16%, transparent);
	color: var(--rz-text-secondary-color);
	font-size: 11px; font-weight: 700;
}
.cb-paso-tu { font-weight: 500; }
.cb-paso-tu .cb-paso-n { background: color-mix(in srgb, var(--rz-primary) 18%, transparent); color: var(--rz-primary); }
.cb-paso-sep { color: #9aa0a6; font-size: 16px; flex: 0 0 auto; }

/* Estrechos: la flecha entre pasos apunta hacia abajo, que es como se leen apilados. */
@media (max-width: 720px) {
	.cb-pasos { flex-direction: column; align-items: flex-start; }
	.cb-paso-sep { transform: rotate(90deg); margin-left: 3px; }
}


/* ── Tema oscuro ─────────────────────────────────────────────────────────
   Estas reglas estaban escritas como var(--token, <color de siempre>), pero
   ese token en el tema CLARO vale un color bastante distinto del que había
   —la escala clara de play tiene los grises colapsados—, así que el claro
   se movía. Se ha devuelto arriba su color literal exacto y el color del
   sistema se aplica solo aquí, en oscuro. El tema claro no cambia. */
[data-bs-theme="dark"] .cr-paso {
    color: var(--rz-text-disabled-color);
}

[data-bs-theme="dark"] .cb-paso-sep {
    color: var(--rz-text-disabled-color);
}


/* ── Tema oscuro ─────────────────────────────────────────────────────────
   Estas reglas estaban escritas como var(--token, <color de siempre>), pero
   ese token en el tema CLARO vale un color bastante distinto del que había
   —la escala clara de play tiene los grises colapsados—, así que el claro
   se movía. Se ha devuelto arriba su color literal exacto y el color del
   sistema se aplica solo aquí, en oscuro. El tema claro no cambia. */
/* -light y NO -darker. En claro el ámbar va oscuro (#7a5b00) porque el papel es blanco; al traducirlo al tema
   oscuro se cogió «el ámbar del sistema» sin mirar cuál: --rz-warning-darker vale #a66513, que sobre el fondo
   oscuro del chip da 2,05:1 —ilegible— y sobre el fondo de la card 3,28:1. En oscuro hay que ir al otro extremo
   de la rampa: #ffc46b sube a 6,1:1 en el chip y a 9,7:1 en texto suelto. */
[data-bs-theme="dark"] .cr-chip-warn {
    color: var(--rz-warning-light);
}

[data-bs-theme="dark"] .cr-warn-text {
    color: var(--rz-warning-light);
}