/*
 * Libro de cuentas (/gestion/contabilidad, docs/contabilidad.md).
 *
 * La carga plantillas/gestion/contabilidad.php, después de panel.css y
 * gestion.css (de ahí salen las tarjetas, las cifras .kpis y .franja-cifras,
 * las pestañas, la tabla .tabla-eventos, los chips, el conmutador, las
 * ventanas .dialogo--formulario y .fila-enlazada). También la carga «Cierre
 * del mes» (cuadre.php), que usa de aquí las listas (.conta-lista), los
 * importes (.conta-entrada, .conta-salida), las cifras del recuento
 * (.conta-recuento__cifras, .conta-cuadra, .conta-descuadre) y las notas
 * (.conta-comentario): si cambian, que sigan valiendo allí. Las columnas de
 * importes usan la utilidad .numero de base.css.
 *
 * Las piezas, en el orden en que salen:
 *
 *   1. Lo que se repite: títulos, importes, notas, chips elegidos y listas
 *   2. Para empezar: sin cajas, sin cuenta del banco, sin presupuesto
 *   3. Los saldos de cada caja y cuenta
 *   4. El libro: el aviso, los filtros y la lista de apuntes
 *   5. Por apuntar: las dos partes, la barra del mes y lo marcado
 *   6. Por apuntar, de la asociación: a qué partida va cada cosa
 *   7. Por apuntar, del banco: los movimientos, los totales y los extractos
 *   8. Presupuesto: el año, la tabla con sus barras y guardar
 *   9. Para la asesoría: el periodo, el paquete y los informes
 *  10. Las ventanas: apuntar, un apunte, pasar dinero e importar
 *  11. En la tableta y en el móvil
 *  12-14. Gastos de los puestos, ajustes del libro y el cuadre del día de la tarjeta
 *  15. La contabilidad completa: quién la lleva, el plan de cuentas, los asientos y el cierre del año
 *
 * Convenciones:
 * - Los importes, con cifras del mismo ancho (tabular-nums) y sin partirse.
 * - Verde para lo que entra o cuadra, rojo para lo que sale o se pasa y
 *   ámbar para lo que pide atención (en texto, sus tonos -texto, legibles
 *   también en el modo claro).
 * - Lo que se pliega, con el plegable común de base.css (.plegable).
 */

/* #region 1. Lo que se repite: títulos, importes, notas, chips elegidos y listas */
/* El título de cada tarjeta, con su icono, y su explicación debajo. */
.conta-titulo {
    display: grid;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-4);
}

.tarjeta__cabecera .conta-titulo {
    margin-bottom: 0;
}

.conta-titulo h2,
.conta-subtitulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-size: var(--texto-grande);
}

.conta-titulo h2 .icono,
.conta-subtitulo .icono {
    flex-shrink: 0;
    color: var(--rs-texto-secundario);
}

.conta-titulo .ayuda-campo {
    max-width: 72ch;
    margin: 0;
}

.conta-subtitulo {
    margin-bottom: var(--espacio-3);
    font-size: var(--texto-base);
}

.conta-tabla select {
    min-width: 11rem;
}

/* La primera celda, con el mismo aire que las demás: la casilla no se pega al canto de la banda de la fila marcada. */
@media (min-width: 768px) {
    .app-panel .conta-tabla :is(th, td):first-child {
        padding-left: var(--espacio-3);
    }
}

.conta-entrada {
    color: var(--rs-exito-texto);
}

.conta-salida {
    color: var(--rs-peligro-texto);
}

/* Una celda con varias cosas (el concepto y su referencia): un solo bloque, también en el móvil. */
.conta-celda {
    display: block;
}

/* Una nota debajo de lo principal: la explicación de un apunte, el motivo… */
.conta-comentario {
    display: block;
    margin-top: var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-style: italic;
}

/* El mes, el año, el periodo o la parte elegida, en azul. */
#conta-contenido .chip[aria-pressed="true"] {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
    color: var(--rs-texto);
}

/* Cajas, partidas, proveedores, reglas, fuentes y extractos (y en «Cierre del mes», recuentos y cierres). */
.conta-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.conta-lista__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding-block: var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.conta-lista__fila:last-child {
    border-bottom: 0;
}

.conta-lista__fila strong {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* El icono de una fila (y de cada informe de la asesoría), teñido según lo que es: la caja, en oro (el efectivo); el banco y los informes, en azul. */
.conta-lista__icono,
.conta-informes__icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radio-md);
}

.conta-lista__icono--caja {
    background: var(--rs-oro-suave);
    color: var(--rs-oro-texto);
}

.conta-lista__icono--banco,
.conta-informes__icono {
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
}

.conta-lista__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.conta-lista__textos .texto-tenue {
    font-size: var(--texto-etiqueta);
}

.conta-lista__cifra {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.conta-lista__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    justify-content: flex-end;
}

/* Una fila que se pulsa y abre su ventana: el nombre, en el color del texto; al pasar, en el de la asociación. */
.conta-lista__fila.fila-enlazada {
    margin-inline: calc(-1 * var(--espacio-3));
    padding-inline: var(--espacio-3);
    border-radius: var(--radio-md);
    transition: background-color var(--duracion-hover) var(--curva);
}

.conta-lista__fila.fila-enlazada:hover,
.conta-fila:hover {
    background: var(--rs-hover-fila);
}

.conta-lista .fila-enlazada__enlace,
.conta-libro .fila-enlazada__enlace {
    color: var(--rs-texto);
    font-weight: 600;
    text-decoration: none;
}

.fila-enlazada:hover .fila-enlazada__enlace {
    color: var(--marca-acento);
}

.fila-enlazada__enlace:focus-visible {
    outline: none;
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}

/* Dos tarjetas lado a lado (el libro del año y comprobar el libro). */
.conta-dos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--espacio-4);
    align-items: start;
}

.conta-dos > .tarjeta {
    margin: 0;
}

/* El título a un lado y algo al otro (el presupuesto y sus años). */
.conta-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
}
/* #endregion */

/* #region 2. Para empezar: sin cajas, sin cuenta del banco, sin presupuesto */
.conta-empezar {
    display: grid;
    justify-items: center;
    gap: var(--espacio-3);
    padding-block: var(--espacio-8);
    text-align: center;
}

.conta-empezar h2 {
    margin: 0;
    font-size: var(--texto-grande);
}

.conta-empezar p {
    max-width: 52ch;
    margin: 0;
    color: var(--rs-texto-secundario);
}

.conta-empezar__icono {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 12%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

.conta-empezar__icono .icono {
    width: 26px;
    height: 26px;
}

.conta-empezar__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-3);
    margin-top: var(--espacio-2);
}
/* #endregion */

/* #region 3. Los saldos de cada caja y cuenta (en la franja de cifras, gestion.css) */
.conta-saldos {
    margin-bottom: var(--espacio-5);
}

/* Un saldo no se parte nunca en dos líneas («38.238,5 / 0 €»). */
.conta-saldos strong {
    white-space: nowrap;
}
/* #endregion */

/* #region 4. El libro: el aviso, los filtros y la lista de apuntes */
.conta-filtros {
    display: grid;
    /* Todo en una barra (3 nov 2026): el buscador más ancho y, a su lado, los cinco filtros. */
    grid-template-columns: minmax(16rem, 2fr) repeat(5, minmax(8rem, 1fr));
    align-items: end;
    gap: var(--espacio-3);
}

.conta-filtros .campo {
    margin: 0;
}

@media (max-width: 1400px) {
    .conta-filtros {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .conta-filtros__buscar {
        grid-column: 1 / -1;
    }
}

/* Con algún filtro puesto, quitarlos. */
.conta-filtros__pie {
    display: flex;
    justify-content: flex-end;
    min-height: var(--espacio-4);
    margin-block: var(--espacio-2);
}

.conta-libro__numero {
    width: 3.5rem;
}

.conta-libro__fecha {
    white-space: nowrap;
}

.conta-libro__clip {
    width: 3rem;
    text-align: center;
}

.conta-libro__tercero {
    display: block;
    font-size: var(--texto-etiqueta);
}

/* Traspaso, rectifica, rectificado: debajo del concepto y con su hueco entre ellas. */
.conta-libro__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    margin-top: var(--espacio-1);
}

/* La partida y la caja, debajo del concepto: solo en la tableta y el móvil, donde no caben sus columnas (región 11). */
.conta-libro__movil {
    display: none;
}

.conta-fila--rectificada td {
    color: var(--rs-texto-tenue);
}

/* Con el peso del libro, para que el tachado y el tono apagado sigan al pasar por encima (gestion.css quita el subrayado al pasar). */
.conta-libro .conta-fila--rectificada .fila-enlazada__enlace {
    color: var(--rs-texto-tenue);
    text-decoration: line-through;
}

/* El clip si tiene justificante; en ámbar si le falta. */
.conta-clip,
.conta-falta {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.conta-falta {
    color: var(--rs-aviso-texto);
}
/* #endregion */

/* #region 5. Por apuntar: las dos partes, la barra del mes y lo marcado */
.conta-vistas {
    margin-bottom: var(--espacio-4);
}

.conta-vistas .conmutador {
    flex-wrap: wrap;
}

/* Cuántas cosas esperan en cada parte. */
.conta-vistas__cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* El mes y, al lado, la caja o la cuenta (y, en el banco, importar). */
.conta-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3) var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.conta-barra .campo {
    margin: 0;
}

.conta-barra__meses {
    flex: 1 1 24rem;
}

.conta-barra .chips {
    margin: 0;
}

.conta-barra--banco #importar-abrir {
    margin-left: auto;
}

/* Con algo marcado: cuántos, cuánto suman y qué hacer; se queda a la vista al bajar. */
.conta-lote {
    position: sticky;
    /* Por debajo de la barra de arriba del panel, que también se queda fija. */
    top: calc(var(--alto-superior) + var(--espacio-2));
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-3);
    margin-block: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid color-mix(in srgb, var(--rs-azul) 55%, transparent);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    box-shadow: var(--sombra-md);
}

.conta-lote__cuenta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.conta-lote__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.conta-lote__acciones select {
    min-width: 12rem;
}
/* #endregion */

/* #region 6. Por apuntar, de la asociación: a qué partida va cada cosa */
/* Un plegable (base.css): su raya arriba y otra abajo, que lo separan de la barra del mes y de la tabla. */
.conta-fuentes {
    margin-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.conta-fuentes .campo {
    min-width: 14rem;
    margin: 0;
}

/* «Elige su partida», en ámbar: pide atención y lleva a elegirla. */
.conta-elegir {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}
/* #endregion */

/* #region 6b. Por apuntar, la caja preparada por la plataforma (migración 0240) */
.conta-preparada {
    border-left: 4px solid var(--rs-azul);
    background: linear-gradient(90deg, var(--rs-azul-suave), transparent 60%);
    margin-bottom: var(--espacio-4);
}

.conta-preparada .formulario-acciones {
    flex-wrap: wrap;
}
/* #endregion */

/* #region 7. Por apuntar, del banco: los movimientos, los totales y los extractos */
.conta-estados {
    margin-bottom: var(--espacio-3);
}

.conta-buscar {
    max-width: 26rem;
    margin: 0 0 var(--espacio-3);
}

/* El banco frente al libro (y, en «Cierre del mes», lo contado frente al libro). */
.conta-recuento__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.conta-recuento__cifras div {
    display: grid;
    gap: var(--espacio-1);
}

.conta-recuento__cifras span {
    color: var(--rs-texto-tenue);
}

.conta-recuento__cifras strong {
    font-size: var(--texto-h3);
    font-variant-numeric: tabular-nums;
}

.conta-cuadre {
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.conta-cuadra {
    color: var(--rs-exito-texto);
}

.conta-descuadre {
    color: var(--rs-aviso-texto);
}
/* #endregion */

/* #region 8. Presupuesto: el año, la tabla con sus barras y guardar */
/* Sus títulos, con el icono al lado. */
#panel-presupuesto h2,
#panel-presupuesto h3 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* Los años, en una fila que se desliza si no caben (en el móvil, a partir de cinco); el relleno deja ver el foco. */
#presupuesto-anios {
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    margin: calc(-1 * var(--espacio-1));
    padding: var(--espacio-1);
    overflow-x: auto;
}

.presupuesto-kpis {
    margin-top: var(--espacio-4);
}

.presupuesto-tabla tfoot th,
.presupuesto-tabla tfoot td {
    border-top: 2px solid var(--rs-borde-sutil);
    font-weight: 600;
}

.presupuesto-tabla__barra {
    width: 30%;
    min-width: 9rem;
}

.presupuesto-tabla__sin-partida td {
    color: var(--rs-texto-secundario);
    font-style: italic;
}

/* Lo previsto de cada partida, del tamaño del texto de la tabla (no el grande de .conta-importe, el de las ventanas). */
.conta-tabla .presupuesto-importe {
    width: 8rem;
    max-width: 100%;
    font-size: var(--texto-base);
    text-align: right;
}

/* Lo gastado frente a lo previsto: azul si va bien, ámbar cerca del tope, rojo pasado y verde si es un ingreso logrado. */
.presupuesto-barra {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.presupuesto-barra .progreso__pista {
    display: block;
    flex: 1;
}

.presupuesto-barra--bien .progreso__pista span {
    background: var(--tono-seccion, var(--marca-acento));
}

.presupuesto-barra--cerca .progreso__pista span {
    background: var(--rs-aviso);
}

.presupuesto-barra--pasado .progreso__pista span {
    background: var(--rs-peligro);
}

.presupuesto-barra--logrado .progreso__pista span {
    background: var(--rs-exito);
}

.presupuesto-pct {
    min-width: 3.2rem;
    text-align: right;
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
    color: var(--rs-texto-secundario);
}

.presupuesto-pct--pasado,
.presupuesto-pasado {
    color: var(--rs-peligro-texto);
}

.presupuesto-logrado {
    color: var(--rs-exito-texto);
}

.presupuesto-queda {
    color: var(--rs-texto-secundario);
    white-space: nowrap;
}

.presupuesto-acciones {
    display: grid;
    gap: var(--espacio-3);
}

.presupuesto-acciones .aviso {
    margin: 0;
}

.presupuesto-acciones__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
}

.presupuesto-acciones__sin-guardar {
    color: var(--rs-aviso-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

/* A la derecha y sin el margen de abajo de .informe-exportar: a la altura de «Guardar» y «Aprobar». */
.presupuesto-acciones__descargas {
    margin: 0 0 0 auto;
}
/* #endregion */

/* #region 9. Para la asesoría: el periodo, el paquete y los informes */
.conta-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3) var(--espacio-5);
}

.conta-periodo .chips {
    margin: 0 0 var(--espacio-2);
}

.conta-periodo .fila-campos {
    flex: 1 1 18rem;
    margin: 0;
}

/* Lo de cada mes: el paquete entero, de una vez, destacado. */
.conta-paquete {
    display: grid;
    justify-items: start;
    gap: var(--espacio-2);
    margin-block: var(--espacio-4) var(--espacio-5);
    padding: var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 30%, var(--rs-borde));
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--marca-acento) 6%, var(--rs-superficie-1));
}

.conta-paquete .boton {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.conta-paquete .ayuda-campo {
    max-width: 72ch;
    margin: 0;
}

.conta-informes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.conta-informes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3) var(--espacio-4);
    padding-block: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.conta-informes__textos {
    flex: 1 1 18rem;
    min-width: 0;
}

.conta-informes__textos .ayuda-campo {
    margin: var(--espacio-1) 0 0;
}

.conta-informes .informe-exportar {
    flex-wrap: wrap;
    margin: 0;
}

/* ContaPlus, detrás de los tres de siempre (PDF, Excel y CSV). */
#asesoria-contaplus {
    order: 9;
}

/* El programa de la asesoría y el largo de sus subcuentas. */
.conta-programa {
    align-items: flex-end;
}

.conta-programa .conmutador {
    flex-wrap: wrap;
}

.conta-programa__digitos {
    max-width: 14rem;
}

/* El libro del año: el ejercicio y el botón, alineados por abajo. */
.conta-anual {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
}

.conta-anual .campo,
.conta-anual .informe-exportar {
    margin: 0;
}

/* La huella de un apunte y el resultado de comprobar el libro: códigos largos que se parten. */
.conta-huella code,
.conta-comprobacion code {
    font-family: var(--fuente-mono);
    font-size: var(--texto-pequeno);
    overflow-wrap: anywhere;
}

#comprobar-resultado:not(:empty) {
    margin-top: var(--espacio-3);
}
/* #endregion */

/* #region 10. Las ventanas: apuntar, un apunte, pasar dinero e importar */
.conta-ventana--ancha {
    width: min(56rem, calc(100vw - 2 * var(--espacio-4)));
}

.conta-ventana .aviso {
    margin: 0;
}

.conta-ventana--ancha .campo {
    max-width: none;
}

/* Entra o sale, y de qué caja o cuenta. */
.conta-apunte__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
}

.conta-apunte__fila .campo {
    margin: 0;
}

.conta-apunte__fila .conmutador {
    flex-wrap: wrap;
}

/* Sale en rojo y entra en verde (con conmutador.js, la pastilla cambia de color al deslizarse). */
.conta-tipo:has([data-tipo="entrada"][aria-pressed="true"]) {
    --conmutador-pastilla: var(--rs-exito-solido);
}

.conta-tipo:has([data-tipo="salida"][aria-pressed="true"]) {
    --conmutador-pastilla: var(--rs-peligro-solido);
}

.conta-tipo button[aria-pressed="true"],
.conta-tipo button[aria-pressed="true"] .icono {
    color: var(--rs-texto-sobre-color);
}

.conta-tipo:not(.conmutador--animado) button[aria-pressed="true"] {
    background: var(--conmutador-pastilla);
}

/* El importe, grande (también en la caja, el traspaso y el límite de efectivo). */
.conta-importe {
    max-width: 14rem;
    font-size: var(--texto-h3);
    font-variant-numeric: tabular-nums;
}

/* «Más datos» del apunte y «¿Qué fichero bajo?» del extracto: plegables (base.css) con sus campos separados. */
.conta-mas {
    display: grid;
    gap: var(--espacio-3);
}

.conta-tercero {
    position: relative;
}

/* «Crear «X»», con su icono junto al texto (gestion.css separa a los lados el nombre y el NIF de los encontrados). */
.caja-quien__resultados [data-tercero-nuevo] {
    justify-content: flex-start;
}

/* Un apunte: lo que es y su importe, grandes, debajo del título. */
.conta-detalle__importe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin: var(--espacio-2) 0 0;
}

.conta-detalle__importe strong {
    font-family: var(--fuente-display);
    font-size: 1.75rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.conta-detalle__datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--espacio-2) var(--espacio-4);
    margin: 0;
}

.conta-detalle__datos dt {
    color: var(--rs-texto-tenue);
}

.conta-detalle__datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.conta-detalle__justificantes {
    display: grid;
    justify-items: start;
    gap: var(--espacio-2);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.conta-detalle__justificantes h4 {
    margin: 0;
    font-size: var(--texto-base);
}

.conta-justificantes {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.conta-justificantes a {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    text-decoration: none;
}

/* «Añadir un justificante»: un botón que abre el selector de ficheros. */
.conta-subir {
    position: relative;
    cursor: pointer;
}

.conta-subir:focus-within {
    box-shadow: var(--anillo-foco);
}

/* Rectificar o quitar: rojo suave y aparte, a la derecha. */
.conta-acciones__quitar,
#detalle-rectificar {
    margin-left: auto;
}

/* De dónde a dónde, con el botón de darle la vuelta en medio. */
.conta-traspaso {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: var(--espacio-2);
}

.conta-traspaso .campo {
    margin: 0;
}

.conta-traspaso__girar .icono {
    rotate: 90deg;
}

.conta-elecciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* El extracto antes de importarlo. */
.conta-formatos {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding-left: var(--espacio-4);
    color: var(--rs-texto-secundario);
}

.conta-vista {
    display: grid;
    gap: var(--espacio-3);
}

.conta-vista .tabla-desplazable {
    max-height: 22rem;
    overflow-y: auto;
}
/* #endregion */

/* #region 11. En la tableta y en el móvil */
/* Con menos de 1200px no caben las columnas de la partida y la caja: van debajo del concepto. */
@media (max-width: 1199px) {
    .conta-libro :is(.conta-libro__partida, .conta-libro__cuenta) {
        display: none;
    }

    .conta-libro__movil {
        display: block;
        font-size: var(--texto-etiqueta);
    }
}

@media (max-width: 767px) {
    /* Cada apunte, como una tarjeta: el concepto y el importe arriba; el día y el clip debajo
       (una celda vacía no sale con su título suelto: lo dice base.css para todas). */
    .conta-libro tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px var(--espacio-3);
    }

    .conta-libro td,
    .conta-libro td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones) {
        display: block;
        padding: 0;
    }

    .conta-libro td::before {
        content: none !important;
    }

    /* El número fuera, y la partida y la caja ya van debajo del concepto (por encima de la regla general de las tablas apiladas). */
    .conta-libro :is(.conta-libro__numero, .conta-libro__partida, .conta-libro__cuenta) {
        display: none !important;
    }

    .conta-libro .conta-libro__concepto {
        grid-column: 1;
        grid-row: 1;
    }

    .conta-libro .conta-entrada,
    .conta-libro .conta-salida {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
        text-align: right !important;
    }

    .conta-libro .conta-libro__fecha {
        grid-column: 1;
        grid-row: 2;
        color: var(--rs-texto-tenue);
        font-size: var(--texto-etiqueta);
    }

    .conta-libro .conta-libro__clip {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .conta-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .conta-filtros__buscar {
        grid-column: 1 / -1;
    }

    .conta-lista__fila {
        flex-wrap: wrap;
    }

    .conta-barra--banco #importar-abrir {
        width: 100%;
        margin-left: 0;
    }

    .conta-lote__acciones,
    .conta-lote__acciones select {
        width: 100%;
    }

    .conta-buscar {
        max-width: none;
    }

    .presupuesto-tabla__barra {
        min-width: 7rem;
    }

    .presupuesto-acciones__descargas {
        margin-left: 0;
    }

    .conta-detalle__datos {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .conta-detalle__datos dd + dt {
        margin-top: var(--espacio-2);
    }

    .conta-traspaso {
        grid-template-columns: 1fr;
    }

    .conta-traspaso__girar {
        justify-self: center;
    }

    .conta-traspaso__girar .icono {
        rotate: 0deg;
    }

    .conta-elecciones {
        grid-template-columns: 1fr;
    }
}
/* #endregion */

/* #region 12. Gastos de los puestos: la foto del ticket y el importe */
.gasto-miniatura {
    display: block;
    width: 44px;
    height: 58px;
    object-fit: cover;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-sm);
}

.conta-gastos__importe {
    text-align: right;
    white-space: nowrap;
}
/* #endregion */

/* #region Ajustes del libro: los datos a un lado y las opciones al otro */
.conta-ajustes {
    display: grid;
    gap: var(--espacio-5);
}

.conta-ajustes__datos,
.conta-ajustes__opciones {
    display: grid;
    gap: var(--espacio-4);
    align-content: start;
    min-width: 0;
}

.conta-ajustes .campo {
    margin: 0;
}

@media (min-width: 1280px) {
    .conta-ajustes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-8);
    }
}
/* #endregion */

/* #region 13. El cuadre del día de la tarjeta (migración 0354) */
.cuadre-dias {
    list-style: none;
    margin: var(--espacio-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--espacio-2);
}

.cuadre-dia {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cuadre-dia:hover {
    border-color: var(--marca-acento);
}

.cuadre-dia:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.cuadre-dia > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cuadre-dia__fecha strong::first-letter {
    text-transform: uppercase;
}

.cuadre-dia__estado {
    justify-items: start;
}

.cuadre-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--espacio-3);
    margin: var(--espacio-3) 0;
}

.cuadre-cifra {
    display: grid;
    gap: 2px;
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    min-width: 0;
}

.cuadre-cifra small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.cuadre-cifra strong {
    font-size: var(--texto-grande);
}

.cuadre-cifra--total {
    box-shadow: inset 0 0 0 2px var(--marca-acento);
}

.cuadre-estado {
    margin: 0 0 var(--espacio-3);
}

.cuadre-subtitulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-4) 0 var(--espacio-2);
    font-size: var(--texto-base);
}

.cuadre-operaciones__devolucion td {
    color: var(--rs-peligro-texto);
}

.cuadre-reparto li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
}

.cuadre-corregir {
    margin-top: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
}

.cuadre-corregir summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
    cursor: pointer;
}

.cuadre-descargas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    margin-left: auto;
}

@media (max-width: 760px) {
    .cuadre-dia {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cuadre-dia > .icono {
        display: none;
    }

    .cuadre-dia__fecha,
    .cuadre-dia__estado {
        grid-column: 1 / -1;
    }

    .cuadre-reparto li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cuadre-reparto li > :nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
/* #endregion */

/* #region 14. La ventana de un día del cuadre: ancha, para ver a todos de un vistazo */
.dialogo.cuadre-ventana {
    width: min(60rem, calc(100vw - 2 * var(--espacio-4)));
}
/* #endregion */

/* #region 15. La contabilidad completa (migración 0380): quién la lleva, el plan de cuentas, los asientos y el cierre del año */
/* ¿Quién lleva la contabilidad? Dos opciones grandes, con su explicación. */
.conta-quien {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.conta-quien__opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    cursor: pointer;
}

.conta-quien__opcion:has(input:checked) {
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 8%, transparent);
}

.conta-quien__opcion > span {
    display: grid;
    gap: var(--espacio-1);
}

.conta-quien__opcion input {
    margin-top: 0.2rem;
}

/* Los conmutadores de vistas de «Asientos» y «Cierre del año»: en el móvil, en varias filas (no se salen de la pantalla). */
#asientos-vista,
#cierre-vista {
    flex-wrap: wrap;
    max-width: 100%;
    height: auto;
}

/* El plan de cuentas: el código delante, con cifras del mismo ancho; los títulos de grupo, en negrita. */
.plan-lista {
    max-height: 32rem;
    overflow-y: auto;
}

.plan-lista .conta-lista__fila {
    padding-block: var(--espacio-2);
}

.plan-codigo {
    min-width: 5.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--rs-texto-secundario);
}

.plan-lista__titulo .conta-lista__textos {
    font-weight: 700;
}

.plan-lista__inactiva {
    opacity: 0.6;
}

/* El Diario: cada asiento, una tarjeta con su número, su fecha, su concepto y sus líneas. */
.diario {
    display: grid;
    gap: var(--espacio-3);
    margin: var(--espacio-3) 0 0;
    padding: 0;
    list-style: none;
}

.diario-asiento {
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
}

.diario-asiento__cabecera {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    border: 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
    background: transparent;
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.diario-asiento__cabecera:hover {
    background: var(--rs-hover-fila);
}

.diario-asiento__cabecera:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.diario-asiento__numero {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.diario-asiento__concepto {
    flex: 1;
    min-width: 12rem;
}

.diario-asiento table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-pequeno);
}

.diario-asiento td {
    padding: var(--espacio-1) var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.diario-asiento tr:last-child td {
    border-bottom: 0;
}

.diario-asiento td.numero,
.estados-tabla td.numero,
.asiento-lineas td.numero {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Lo que va al haber, un poco hacia dentro: así se lee como en un libro Diario. */
.diario-linea--haber td:first-child {
    padding-left: var(--espacio-6);
}

.diario-etiqueta {
    display: inline-block;
    padding: 1px var(--espacio-2);
    border-radius: 999px;
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
    font-size: var(--texto-etiqueta);
}

.diario-etiqueta--rectificacion,
.diario-etiqueta--rectificado {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

.diario-etiqueta--libro {
    background: var(--rs-oro-suave);
    color: var(--rs-oro-texto);
}

/* El asiento que se escribe a mano: cada línea con su cuenta, debe y haber; abajo, si cuadra. */
.asiento-lineas select {
    width: 100%;
    min-width: 14rem;
}

.asiento-lineas input {
    width: 8rem;
    text-align: right;
}

#asiento-cuadre:empty {
    display: none;
}

.conta-descargas {
    margin-top: var(--espacio-4);
}

.conta-peligro {
    color: var(--rs-peligro-texto);
}

/* El balance y la cuenta de resultados: las masas en negrita, los epígrafes y su detalle, sangrados. */
.estados-tabla tr.estado--nivel-1 td {
    font-weight: 700;
    background: var(--rs-hover-fila);
}

.estados-tabla tr.estado--nivel-2 td:first-child {
    padding-left: var(--espacio-5);
}

.estados-tabla tr.estado--nivel-3 td:first-child {
    padding-left: var(--espacio-8);
    color: var(--rs-texto-secundario);
}

.estados-tabla tr.estado--cero td {
    color: var(--rs-texto-tenue);
}

/* Los pasos del cierre del año: cada uno con su número, su estado (hecho, por hacer, aún no) y su botón. */
.anual-pasos {
    display: grid;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-4);
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.anual-paso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.anual-paso__numero {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
    font-weight: 700;
}

.anual-paso--hecho .anual-paso__numero {
    background: var(--rs-exito-suave);
    color: var(--rs-exito-texto);
}

.anual-paso--pendiente .anual-paso__numero {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

.anual-paso--espera {
    opacity: 0.75;
}

.anual-paso h3 {
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-base);
}

.anual-paso__cuerpo {
    display: grid;
    gap: var(--espacio-2);
}

.anual-paso__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-5);
    font-variant-numeric: tabular-nums;
}

.anual-paso ul {
    margin: 0;
    padding-left: var(--espacio-5);
}
/* #endregion */

/* #region 16. Justificantes con la cámara y observaciones de cada apunte (turno 3 de pruebas, migración 0390) */
/* «Hacer una foto» y «Elegir un archivo», uno al lado del otro (debajo en el móvil). */
.conta-justificante-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.conta-justificante-elegido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-pequeno);
    overflow-wrap: anywhere;
}

/* La nota del contador en la fila del libro: con su bocadillo, para verla de un vistazo. */
.conta-observacion {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-1);
    margin-top: var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.conta-observacion .icono {
    flex: none;
    margin-top: 0.15em;
}

.conta-detalle__observaciones {
    display: grid;
    justify-items: start;
    gap: var(--espacio-2);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.conta-detalle__observaciones h4 {
    margin: 0;
    font-size: var(--texto-base);
}

.conta-observaciones__texto {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.conta-observaciones__editar {
    display: grid;
    gap: var(--espacio-2);
    width: 100%;
}

.conta-observaciones__historial ol {
    display: grid;
    gap: var(--espacio-2);
    margin: var(--espacio-2) 0 0;
    padding-left: var(--espacio-5);
}

.conta-observaciones__historial li {
    display: grid;
    overflow-wrap: anywhere;
}
/* #endregion */

/* #region 17. El presupuesto línea a línea (turno 3 de pruebas, migración 0391) */
/* Las líneas de una partida, debajo de ella y algo metidas. */
.presupuesto-linea td {
    padding-top: var(--espacio-1);
    padding-bottom: var(--espacio-1);
    border-top: 0;
    font-size: var(--texto-pequeno);
}

.presupuesto-linea__abrir {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1);
    padding-left: var(--espacio-4);
    text-align: left;
}

.presupuesto-linea__obs {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-style: italic;
}

/* La tabla de la primera vez: debajo del nombre, la descripción y las observaciones (opcionales). */
.presupuesto-rapida__textos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--espacio-1);
    margin-top: var(--espacio-1);
}

.presupuesto-rapida__textos input {
    min-width: 0;
    font-size: var(--texto-pequeno);
}

.conta-empezar__habituales {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    max-width: 36rem;
    margin: var(--espacio-3) auto 0;
    text-align: center;
}

.presupuesto-cambios summary {
    cursor: pointer;
}
/* #endregion */

/* #region 18. Lo cobrado en efectivo con un solo botón y las partidas sugeridas (turno 3 de pruebas) */
.conta-preparada__principal {
    justify-content: flex-start;
}

.conta-sugeridas .conta-lista__fila {
    padding-top: var(--espacio-1);
    padding-bottom: var(--espacio-1);
}

.conta-sugeridas__todas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

/* La partida que sugiere la plataforma, en la fila de cada cosa que aún no tiene. */
.conta-sugerida {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-1);
    font-size: var(--texto-pequeno);
}

.conta-detalle-dias > summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
    cursor: pointer;
}
/* #endregion */

/* #region 19. Qué ventas forman cada ingreso del banco (turno 3 de pruebas, migración 0392) */
/* En «Del banco»: el ingreso que son cobros con tarjeta, dicho claro y con su desglose a un toque. */
.conta-tarjeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-1);
    font-size: var(--texto-pequeno);
}

.conta-tarjeta > .icono {
    flex: none;
}

/* En «Cierre del mes»: cada ingreso, con «Ver quién pagó» y «Aceptarlo». */
.cierre-ingresos-tarjeta {
    display: grid;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.cierre-ingresos-tarjeta h4 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.cierre-ingreso {
    flex-wrap: wrap;
}

.cierre-ingreso__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.cierre-plan-b > summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    cursor: pointer;
}
/* #endregion */

/* #region 20. La casilla del importe del banco (migración 0393) */
.cuadrar-importe {
    display: grid;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.cuadrar-importe h4 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

/* El importe, el día y «Comprobar», en una fila; uno debajo de otro en el móvil. */
.cuadrar-importe__campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
}

.cuadrar-importe__campos .campo {
    flex: 1 1 10rem;
    margin: 0;
}

.cuadrar-importe__resultado p {
    margin: 0 0 var(--espacio-2);
}

.cuadrar-importe__acciones,
.cuadrar-importe__descargas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}
/* #endregion */