/*
 * Cierre del mes (/gestion/cuadre, docs/cuadre.md y docs/contabilidad.md).
 *
 * Solo la carga plantillas/gestion/cuadre.php, después de panel.css,
 * gestion.css (tarjetas, tablas, ventanas y el aviso con icono .aviso-accion)
 * y contabilidad.css (las listas .conta-lista y las cifras del recuento, que
 * comparte con el banco del Libro). Las piezas van en el orden en que salen:
 *
 *   1. El mes elegido, en la cabecera
 *   2. Cómo va cada paso
 *   3. Cada paso: su número y su título
 *   4. Paso 1: lo cobrado de cada forma frente al banco
 *   5. Paso 1: lo que ingresa la tarjeta
 *   6. Paso 2: contar la caja (billetes, monedas y firma)
 *   7. Paso 3: cerrar el mes, y lo contado y cerrado antes (plegado)
 *   8. Las ventanas: importar y ver una liquidación
 *
 * Colores de cómo va un paso: verde hecho, ámbar pendiente y neutro cuando
 * no hay nada que hacer o el mes aún no ha acabado. Las columnas de importes
 * usan la utilidad .numero y lo plegado, el plegable común (.plegable), los
 * dos de base.css.
 */

/* #region 1. El mes elegido, en la cabecera */
.cierre-mes-elegir {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--espacio-2);
}

/* El nombre del mes con su ancho fijo: las flechas no bailan al cambiar de mes. */
.cierre-mes-elegir__nombre {
    min-width: 10.5rem;
    font-size: var(--texto-grande);
    text-align: center;
    white-space: nowrap;
}

/* En el móvil, las flechas de su tamaño a los lados y el mes en medio (gestion.css estira los botones de la cabecera). */
@media (max-width: 767px) {
    .cierre-mes-elegir .boton--icono {
        flex: none;
    }

    .cierre-mes-elegir .cierre-mes-elegir__nombre {
        flex: 1;
    }
}
/* #endregion */

/* #region 2. Cómo va cada paso */
.cierre-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-6);
    padding: 0;
    list-style: none;
}

.cierre-pasos__enlace {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    height: 100%;
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    color: var(--rs-texto);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cierre-pasos__enlace:hover {
    border-color: var(--marca-acento);
    color: var(--rs-texto);
}

.cierre-pasos__enlace:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

.cierre-pasos__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cierre-pasos__estado {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}

/* El número del paso; hecho, en verde con su marca; pendiente, en ámbar. */
.cierre-pasos__numero,
.cierre-paso__numero {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--rs-borde-fuerte);
    border-radius: 50%;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cierre-pasos__paso[data-estado="hecho"] .cierre-pasos__numero {
    border-color: transparent;
    background: color-mix(in srgb, var(--rs-exito) 18%, transparent);
    color: var(--rs-exito-texto);
}

.cierre-pasos__paso[data-estado="hecho"] .cierre-pasos__estado {
    color: var(--rs-exito-texto);
    font-weight: 600;
}

.cierre-pasos__paso[data-estado="falta"] .cierre-pasos__numero {
    border-color: transparent;
    background: color-mix(in srgb, var(--rs-aviso) 20%, transparent);
    color: var(--rs-aviso-texto);
}

.cierre-pasos__paso[data-estado="falta"] .cierre-pasos__estado {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}
/* #endregion */

/* #region 3. Cada paso: su número y su título */
.cierre-paso {
    display: grid;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-8);
    scroll-margin-top: calc(var(--alto-superior) + var(--espacio-4));
}

.cierre-paso__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
}

.cierre-paso__cabecera h2 {
    margin: 0 0 var(--espacio-1);
}

.cierre-paso__cabecera .ayuda-campo {
    max-width: 62ch;
    margin: 0;
}

.cierre-paso__numero {
    border-color: transparent;
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

/* Las tarjetas del paso, sin margen propio: el hueco lo pone el paso. */
.cierre-paso > .tarjeta {
    margin: 0;
}
/* #endregion */

/* #region 4. Paso 1: lo cobrado de cada forma frente al banco */
.cierre-estado {
    margin-bottom: var(--espacio-4);
}

/* El icono del aviso, con el color de cómo va el cierre. */
.aviso-accion--peligro > .icono:first-child {
    background: color-mix(in srgb, var(--rs-peligro) 14%, transparent);
    color: var(--rs-peligro);
}

.aviso-accion--info > .icono:first-child {
    background: color-mix(in srgb, var(--rs-azul) 14%, transparent);
    color: var(--rs-azul);
}

.aviso-accion--exito > .icono:first-child {
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito);
}

.cierre-forma {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.cierre-forma > .icono {
    margin-top: 2px;
    color: var(--marca-acento);
}

.cierre-forma > span,
.cierre-cifra {
    display: grid;
    gap: 2px;
}

.cierre-cifra {
    justify-items: end;
    font-variant-numeric: tabular-nums;
}

.cierre-importe {
    width: 8.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cierre-nota {
    width: 100%;
    min-width: 10rem;
}

/* «Guardado» al salir de una casilla: lo de esta tabla se guarda solo. */
.cierre-guardado {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    margin: var(--espacio-3) 0 0;
    color: var(--rs-exito-texto);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.cierre-quien {
    display: block;
    margin-top: var(--espacio-1);
}

/* Las descargas, separadas de la tabla y sin el margen de abajo de .informe-exportar (el hueco lo pone la tarjeta). */
#cierre-exportar,
#cuadre-exportar-listado {
    margin: var(--espacio-4) 0 0;
}

@media (max-width: 767px) {
    .cierre-cifra {
        justify-items: start;
    }

    .cierre-importe,
    .cierre-nota {
        width: 100%;
        min-width: 0;
    }
}
/* #endregion */

/* #region 5. Paso 1: lo que ingresa la tarjeta */
/* Rasi lleva aquí (#cierre-tarjeta): que la barra de arriba no tape el título. */
.cierre-tarjeta {
    scroll-margin-top: calc(var(--alto-superior) + var(--espacio-4));
}

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

.cierre-tarjeta h3 .icono {
    color: var(--marca-acento);
}

.cierre-tarjeta .tarjeta__cabecera .ayuda-campo {
    max-width: 62ch;
    margin: 0;
}

/* Lo que hay que mirar, antes que la lista. */
.cierre-excepciones {
    display: grid;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
    padding-bottom: var(--espacio-5);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.cierre-excepciones .aviso {
    margin: 0 0 var(--espacio-2);
}
/* #endregion */

/* #region 6. Paso 2: contar la caja (billetes, monedas y firma) */
.conta-billetes {
    display: grid;
    gap: var(--espacio-4);
    margin-block: var(--espacio-4);
}

/* Billetes y monedas, cada uno con su título y en su fila. */
.conta-billetes__grupo {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.conta-billetes__grupo legend {
    margin: 0 0 var(--espacio-2);
    padding: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.conta-billetes__fila {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--espacio-2);
}

@media (max-width: 1100px) {
    .conta-billetes__fila {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* En el móvil, de tres en tres: de cuatro no cabe el valor. */
@media (max-width: 560px) {
    .conta-billetes__fila {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Cada billete o moneda: su valor arriba, con su dibujo, y debajo cuántos hay. */
.conta-billete {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    min-width: 0;
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
}

.conta-billete__valor {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-family: var(--fuente-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* El billete, un rectangulito verde; la moneda, un círculo dorado. */
.conta-billete__valor i {
    flex: none;
    border: 1px solid color-mix(in srgb, var(--tono) 55%, transparent);
    background: color-mix(in srgb, var(--tono) 22%, transparent);
}

.conta-billete--billete {
    --tono: var(--rs-exito);
}

.conta-billete--billete .conta-billete__valor i {
    width: 22px;
    height: 13px;
    border-radius: 3px;
}

.conta-billete--moneda {
    --tono: var(--rs-oro);
}

.conta-billete--moneda .conta-billete__valor i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.conta-billete:focus-within {
    border-color: color-mix(in srgb, var(--marca-acento) 50%, var(--rs-borde));
}

.conta-billete input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: right;
}

@media (max-width: 560px) {
    .conta-billete {
        padding: var(--espacio-2);
    }
}

/* Las notas y la firma, una al lado de la otra; en pantallas estrechas, una debajo de otra. */
.conta-recuento__pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    align-items: start;
    gap: var(--espacio-5);
}

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

@media (max-width: 900px) {
    .conta-recuento__pie {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* La firma, del tamaño de una firma (no a todo el ancho del panel), sobre blanco como el papel (en el modo claro). */
#recuento-firma {
    display: block;
    width: 100%;
    max-width: 32rem;
    height: auto;
    aspect-ratio: 5 / 2;
    border: 1px solid var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: #fff;
    touch-action: none;
}

/*
 * En el modo oscuro, el blanco del papel deslumbraba (19 oct 2026): se ve como
 * una pizarra oscura con el trazo claro. Solo cambia cómo se ve; la firma que
 * se guarda sigue siendo negra sobre blanco (firma-canvas.js la pinta así).
 */
:root:not([data-theme="light"]) #recuento-firma {
    border-color: var(--rs-borde-control);
    filter: invert(0.9) hue-rotate(180deg);
}

/* En el móvil, más alta: se firma con el dedo. */
@media (max-width: 640px) {
    #recuento-firma {
        aspect-ratio: 4 / 3;
    }
}

.cierre-firma-borrar {
    margin-top: var(--espacio-2);
}

/* La firma y su botón, uno debajo del otro y a la izquierda. */
#recuento-formulario .campo:has(#recuento-firma) {
    display: grid;
    justify-items: start;
}
/* #endregion */

/* #region 7. Paso 3: cerrar el mes, y lo contado y cerrado antes (plegado) */
.conta-mes .tarjeta__cabecera h3 {
    margin: 0;
}

.conta-pendientes {
    margin: var(--espacio-2) 0 0;
    padding-left: var(--espacio-4);
}

.conta-pendientes a {
    color: inherit;
    text-decoration: none;
}

.conta-pendientes a:hover {
    color: var(--marca-acento);
}

#cierre-mes-pendiente:not(:empty) {
    display: grid;
    gap: var(--espacio-2);
    margin-top: var(--espacio-4);
}

#cierre-mes-pendiente .aviso {
    margin: 0;
}

#cierre-mes-pendiente .aviso a {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    font-weight: 600;
    text-decoration: none;
}
/* #endregion */

/* #region 8. Las ventanas: importar y ver una liquidación */
.cierre-sin-pareja {
    display: grid;
    gap: var(--espacio-1);
    max-height: 12rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

/* Cada cobro sin pareja, con el tinte ámbar de lo que pide que se mire. */
.cierre-sin-pareja li {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-1) var(--espacio-2);
    border: 1px solid color-mix(in srgb, var(--rs-aviso) 24%, transparent);
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--rs-aviso) 10%, transparent);
    font-variant-numeric: tabular-nums;
}

.cierre-linea-estado {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

/* El detalle tiene seis columnas: más ancho que una ventana de formulario. */
@media (min-width: 768px) {
    .cierre-ventana-detalle {
        width: min(60rem, calc(100vw - 2 * var(--espacio-4)));
    }
}
/* #endregion */