/* =========================================================================
   Cierre financiero mensual — presentación tipo hoja de cálculo.
   Se imita el libro de Excel a propósito: el usuario lleva años trabajando
   sobre ese formato y reconoce dónde está cada cosa.
   ========================================================================= */

/* ----- Pestañas como las hojas de Excel ----- */
.xls-tabs {
    border-bottom: 2px solid #1f7145;
    background: #f5f5f5;
    padding: .35rem .5rem 0 .5rem;
    flex-wrap: wrap;
}

    .xls-tabs .nav-link {
        border: 1px solid #b5b5c3;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        margin-right: 3px;
        background: #e7e7e7;
        color: #3f4254;
        font-weight: 600;
        font-size: .85rem;
        padding: .4rem 1.1rem;
        white-space: nowrap;
    }

        .xls-tabs .nav-link.active {
            background: #fff;
            color: #1f7145;
            border-bottom: 2px solid #fff;
            margin-bottom: -2px;
        }

        .xls-tabs .nav-link .badge {
            font-size: .65rem;
            vertical-align: middle;
        }

.xls-hoja {
    border: 1px solid #b5b5c3;
    border-top: 0;
    background: #fff;
    padding: 1.25rem;
}

.xls-cinta {
    background: #d9d9d9;
    font-size: .8rem;
    padding: .25rem .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ----- Tabla de movimientos ----- */
.mov-wrap {
    max-height: 62vh;
    overflow: auto;
    border: 1px solid #b5b5c3;
}

.tabla-mov {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: .78rem;
    margin: 0;
}

    .tabla-mov thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #a1a5b7;
        color: #fff;
        font-weight: 600;
        font-size: .75rem;
        padding: .4rem .5rem;
        border: 1px solid #b5b5c3;
        text-align: center;
        white-space: nowrap;
    }

    .tabla-mov td {
        border: 1px solid #e4e6ef;
        padding: .25rem .4rem;
        vertical-align: middle;
    }

    .tabla-mov tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .tabla-mov tbody tr:hover {
        background: #eef6f1;
    }

    .tabla-mov tbody tr.sin-etiqueta {
        background: #fff8e1;
    }

    .tabla-mov tbody tr.fila-marcada {
        background: #d9edf7 !important;
    }

.col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.col-deposito {
    color: #1f7145;
    font-weight: 600;
}

.col-retiro {
    color: #b02a37;
    font-weight: 600;
}

/* La descripción detallada del banco llega a 400 caracteres; se recorta y se
   despliega al hacer clic para no romper el ancho de la tabla. */
.detallada {
    max-width: 340px;
    color: #7e8299;
    font-size: .72rem;
    cursor: pointer;
}

    .detallada:not(.abierta) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .detallada.abierta {
        white-space: normal;
        word-break: break-word;
    }

.sel-etiqueta {
    font-size: .75rem;
    padding: .15rem .35rem;
    min-width: 155px;
    border: 1px solid #d5d7e0;
    border-radius: 4px;
}

    .sel-etiqueta.pendiente {
        border-color: #f1bc00;
        background: #fffbea;
    }

    .sel-etiqueta.guardando {
        opacity: .5;
    }

.badge-dividido {
    font-size: .65rem;
    cursor: pointer;
}

/* ----- Encabezado de cada bloque de cuenta ----- */
.bloque-cuenta {
    margin-bottom: 1.5rem;
}

.bloque-titulo {
    background: #eef1f5;
    border: 1px solid #b5b5c3;
    border-bottom: 0;
    padding: .45rem .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

    .bloque-titulo .nombre {
        font-weight: 700;
        color: #1f7145;
    }

    .bloque-titulo .saldos {
        font-size: .75rem;
        color: #5e6278;
    }

/* ----- Bloque de totales al pie ----- */
.tabla-totales {
    width: 100%;
    font-size: .82rem;
    border-collapse: collapse;
}

    .tabla-totales th {
        background: #a1a5b7;
        color: #fff;
        padding: .35rem .6rem;
        border: 1px solid #b5b5c3;
        font-size: .78rem;
    }

    .tabla-totales td {
        border: 1px solid #b5b5c3;
        padding: .3rem .6rem;
    }

    .tabla-totales tr.total-fila {
        background: #eef1f5;
        font-weight: 700;
    }

    .tabla-totales tr.sin-rol td {
        color: #b5b5c3;
    }

/* Semáforo de cuadre: mientras falten renglones por etiquetar, la diferencia
   contra el total del banco queda a la vista. */
.cuadre {
    padding: .5rem .75rem;
    border-radius: 5px;
    font-size: .82rem;
    font-weight: 600;
}

.cuadre-ok {
    background: #e8fff3;
    color: #1f7145;
    border: 1px solid #b8e6cd;
}

.cuadre-mal {
    background: #fff5f8;
    color: #b02a37;
    border: 1px solid #f5c2c7;
}

/* ----- Bloque fiscal ----- */
.caja-fiscal {
    border: 1px solid #b5b5c3;
    background: #fcfcfc;
    padding: .75rem 1rem;
}

    .caja-fiscal .linea {
        display: flex;
        justify-content: space-between;
        padding: .2rem 0;
        font-size: .84rem;
    }

    .caja-fiscal .linea.resultado {
        border-top: 2px solid #3f4254;
        margin-top: .35rem;
        padding-top: .45rem;
        font-weight: 700;
        font-size: .95rem;
    }

/* ----- Hoja de IVA ----- */
.iva-tarjeta {
    border: 1px solid #b5b5c3;
    padding: .85rem 1rem;
    height: 100%;
    background: #fff;
}

    .iva-tarjeta h6 {
        font-size: .78rem;
        text-transform: uppercase;
        color: #7e8299;
        letter-spacing: .04em;
        margin-bottom: .6rem;
    }

    .iva-tarjeta .linea {
        display: flex;
        justify-content: space-between;
        padding: .18rem 0;
        font-size: .85rem;
    }

    .iva-tarjeta .linea.destacada {
        border-top: 1px solid #d5d7e0;
        margin-top: .35rem;
        padding-top: .45rem;
        font-weight: 700;
    }

.tabla-captura {
    width: 100%;
    font-size: .8rem;
    border-collapse: collapse;
}

    .tabla-captura th {
        background: #a1a5b7;
        color: #fff;
        padding: .35rem .5rem;
        border: 1px solid #b5b5c3;
        font-size: .74rem;
        white-space: nowrap;
    }

    .tabla-captura td {
        border: 1px solid #e4e6ef;
        padding: .15rem .3rem;
    }

    .tabla-captura input[type=text],
    .tabla-captura input[type=number],
    .tabla-captura input[type=date] {
        border: 0;
        width: 100%;
        padding: .2rem .3rem;
        font-size: .8rem;
        background: transparent;
    }

        .tabla-captura input:focus {
            outline: 2px solid #1f7145;
            background: #fff;
        }

    .tabla-captura tfoot td {
        background: #eef1f5;
        font-weight: 700;
    }

/* ----- Arqueo de efectivo ----- */
.arqueo-bloque {
    border: 1px solid #b5b5c3;
    padding: .5rem;
    min-width: 210px;
}

    .arqueo-bloque table {
        width: 100%;
        font-size: .76rem;
    }

    .arqueo-bloque th {
        background: #eef1f5;
        padding: .2rem .35rem;
        border: 1px solid #e4e6ef;
        font-size: .72rem;
    }

    .arqueo-bloque td {
        border: 1px solid #e4e6ef;
        padding: .1rem .3rem;
    }

    .arqueo-bloque input {
        border: 0;
        width: 100%;
        text-align: right;
        font-size: .76rem;
    }

/* ----- Importación ----- */
.bloque-detectado {
    border: 1px solid #d5d7e0;
    border-radius: 6px;
    padding: .75rem;
    margin-bottom: .75rem;
}

    .bloque-detectado.sin-cuenta {
        border-color: #f1bc00;
        background: #fffbea;
    }

    .bloque-detectado .muestra {
        font-size: .72rem;
        color: #7e8299;
        margin-top: .4rem;
    }

/* Indicador de guardado automático */
#estadoGuardado {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 1080;
    display: none;
    padding: .5rem .9rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

@media print {
    .xls-tabs, .btn, .no-print {
        display: none !important;
    }

    .mov-wrap {
        max-height: none;
        overflow: visible;
    }
}

/* ----- Totalizadores: renglones que agrupan varias etiquetas ----- */
.tabla-totales tr.separador-totalizador td {
    background: #f7f8fa;
    color: #7e8299;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    padding: .3rem .6rem;
    border-top: 2px solid #b5b5c3;
}

.tabla-totales tr.fila-totalizador {
    background: #eef4ff;
    font-weight: 700;
    cursor: help;
}

    .tabla-totales tr.fila-totalizador td {
        color: #2d3748;
    }

.detalle-totalizador {
    font-weight: 400;
    font-size: .72rem;
    color: #7e8299;
    margin-left: .4rem;
}

/* Marca de los totalizadores que entran al cálculo de IVA. */
.marca-iva {
    background: #fef3c7;
    color: #92400e;
    font-size: .62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: .35rem;
    vertical-align: middle;
}

/* =========================================================================
   Marcadores (chips)

   OJO: no usar las clases .badge de Metronic aquí. El layout carga
   bootstrap.min.css DESPUÉS de style.bundle.css, y Bootstrap define
   .badge { color:#fff } con la misma especificidad, así que gana y deja los
   badge-light-* con fondo claro y letra blanca: ilegibles. Estos chips no
   dependen de .badge, y van en color fuerte para que se lean bien.
   ========================================================================= */
.chip {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    vertical-align: middle;
}

.chip-cuenta {
    background: #1f7145;
    color: #fff;
}

.chip-alerta {
    background: #b45309;
    color: #fff;
}

.chip-info {
    background: #1e5aa8;
    color: #fff;
    cursor: pointer;
}

.chip-ok {
    background: #1f7145;
    color: #fff;
}

.chip-mal {
    background: #b02a37;
    color: #fff;
}

/* Contador de pendientes en la pestaña. */
.chip-conteo {
    background: #b45309;
    color: #fff;
    border-radius: 10px;
    padding: .05rem .4rem;
    font-size: .68rem;
    font-weight: 700;
    margin-left: .3rem;
}