.tarjeta {
    padding: 1.1rem;
    background: var(--tarjeta);
    border: 1px solid var(--borde_tarjeta);
    border-radius: 1rem;
    color: var(--texto);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.tarjeta .tarjeta,
/* Si metes una .tarjeta dentro de otra */
.tarjeta-interna {
    /* O si prefieres usar una clase explícita */
    background: var(--tarjeta_interna);
    border-color: var(--borde_tarjeta_interna);
    padding: 0.85rem;
    border-radius: 0.8rem;
}

.tarjeta_advertencia {
    background: var(--importante_fondo);
    color: var(--importante);
}

.tarjeta_mal {
    background: var(--mal_fondo);
    color: var(--mal);
}

.tarjeta_encabezado {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Fila de botones agrupados (ej. Filtro+Nuevo en un tarjeta_encabezado,
   Limpiar+Aplicar en el pie de una ventana): cualquier lugar donde dos o
   más botones tengan que ir juntos, en vez de un style="" suelto. */
.grupo_botones {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.tarjeta .filtro {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.6rem;
}

/* Resumen tipo "estado de cuenta" (Balance, Facturación...): uno o más
   .resumen_bloque apilados (ej. "Último año" / "Año anterior"), cada uno
   con columnas comparadas lado a lado, y opcionalmente un .resumen_pie
   final separado por un borde (ej. Caja y Bancos, Pendiente de cobro). */
.resumen_bloque {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.resumen_fila {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    gap: 0.5rem;
}

.resumen_columna {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
}

.resumen_pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 0.8rem;
    border-top: 1px solid var(--borde_tarjeta_interna);
}

/* Una .tarjeta anidada que representa un mes puntual (ej. las grillas de
   "Meses" en Balance y Facturación), del tamaño justo para no estirarse a
   lo ancho de toda la fila. */
.tarjeta_mes {
    width: 100%;
    max-width: 28rem;
}

@media (max-width: 600px) {
    .tarjeta_encabezado {
        flex-direction: column;
        gap: 0.6rem;
    }

    .resumen_fila {
        flex-direction: column;
    }
}