/*
 * Index de Recurso (Comprobaciones): templates/comprobaciones/index.html y
 * components/index_pendiente.html. Prefijo ri-.
 * El modo oscuro de estas piezas vive en tema-oscuro.css.
 * Tamaños en px, como calendario.css: la raíz es de 13px y style.css baja .card a
 * .857rem, así que con rem el texto quedaba en 10-11px.
 */

.ri,
.ri .card {
    font-size: 14px;
}

/* --- Encabezado: saludo · accesos · acción principal -------------------- */

.ri-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "saludo accesos cta";
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    border: 1px solid #eaecf0;
    border-radius: .75rem;
    background: #fff;
}

.ri-hero__saludo {
    grid-area: saludo;
}

.ri-hero__titulo {
    margin: 0;
    color: #002251;
    font-size: 20px;
    font-weight: 600;
}

.ri-hero__sub {
    margin: .15rem 0 0;
    color: #667085;
    font-size: 14px;
}

.ri-hero__cta {
    display: inline-flex;
    grid-area: cta;
    align-items: center;
    font-weight: 600;
}

/* --- Accesos personales (dentro del encabezado) ------------------------- */

.ri-accesos {
    display: flex;
    flex-wrap: wrap;
    grid-area: accesos;
    justify-content: center;
    gap: .5rem;
}

.ri-acceso {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid #eaecf0;
    border-radius: 999px;
    background: #f9fafb;
    color: #344054;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.ri-acceso svg {
    flex: 0 0 auto;
    color: #f07f3c;
}

.ri-acceso:hover,
.ri-acceso:focus {
    border-color: #f07f3c;
    color: #344054;
    text-decoration: none;
}

.ri-acceso__badge {
    padding: 0 .45rem;
    border-radius: 999px;
    background: #fff4ec;
    color: #9c4716;
    font-size: 12px;
    font-weight: 600;
}

/* --- Secciones ---------------------------------------------------------- */

.ri-seccion {
    margin-top: 1.75rem;
}

.ri-seccion__titulo {
    margin-bottom: .75rem;
    color: #475467;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ri-enlaces {
    margin: .75rem 0 0;
    font-size: 14px;
}

/* --- Tablero de las áreas: mosaicos y, en pantalla ancha, envíos al lado --- */

.ri-tablero__lateral .ri-envios {
    margin-top: 1.75rem;
}

@media (min-width: 1200px) {
    .ri-tablero--lateral {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem;
    }

    .ri-tablero--lateral .ri-pendientes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* El panel toma el alto de la columna de mosaicos y la lista hace scroll dentro */
    .ri-tablero__lateral {
        position: relative;
        min-height: 420px;
        margin-top: 1.75rem;
    }

    .ri-tablero__lateral .ri-envios {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    .ri-tablero__lateral .tab-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* --- Mosaicos de pendientes --------------------------------------------- */

.ri-pendientes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.ri-pendiente {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem 1.1rem;
    border: 1px solid #eaecf0;
    border-left: 4px solid #f07f3c;
    border-radius: .75rem;
    color: #344054;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.ri-pendiente:hover,
.ri-pendiente:focus {
    border-color: #f07f3c;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
    color: #344054;
    text-decoration: none;
}

.ri-pendiente__cabeza {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.ri-pendiente__icono {
    display: inline-flex;
    color: #f07f3c;
}

.ri-pendiente__titulo {
    font-size: 14px;
    font-weight: 600;
}

.ri-pendiente__n {
    color: #002251;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.ri-pendiente__monto {
    font-size: 15px;
    font-weight: 600;
}

.ri-pendiente__meta {
    color: #667085;
    font-size: 13px;
}

.ri-pendiente--vacio {
    border-left-color: #d0d5dd;
}

.ri-pendiente--vacio .ri-pendiente__n,
.ri-pendiente--vacio .ri-pendiente__icono {
    color: #98a2b3;
}

.ri-pendiente--atrasado {
    border-left-color: #d92d20;
}

.ri-pendiente--atrasado .ri-pendiente__meta {
    color: #b42318;
    font-weight: 600;
}

.ri-pendiente--neutro {
    border-left-color: #2e5c9a;
}

/* --- Envíos por comprobar ----------------------------------------------- */

.ri-envios {
    border-radius: .75rem;
}

.ri-envios__cabeza {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid #eaecf0;
}

.ri-envios__titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

/* Selector de pestañas (Bootstrap tab sobre .nav, sin .nav-link: craft.css le da otro alto) */
.ri-segmento {
    gap: .25rem;
    padding: .2rem;
    border-radius: 999px;
    background: #f2f4f7;
}

.ri-segmento__op {
    padding: .25rem .85rem;
    border-radius: 999px;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
}

.ri-segmento__op:hover,
.ri-segmento__op:focus {
    color: #344054;
    text-decoration: none;
}

.ri-segmento__op.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    color: #9c4716;
}

.ri-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1.25rem;
    border-bottom: 1px solid #f2f4f7;
    color: #344054;
}

.ri-fila:last-child {
    border-bottom: 0;
}

.ri-fila:hover,
.ri-fila:focus {
    background: #f9fafb;
    color: #344054;
    text-decoration: none;
}

.ri-fila__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ri-fila__nombre {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ri-fila__monto {
    min-width: 6.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.ri-fila__meta {
    color: #667085;
    font-size: 13px;
}

.ri-fila--mas {
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.ri-dias {
    min-width: 6.5rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.ri-dias--aviso {
    background: #fef0c7;
    color: #93370d;
}

.ri-dias--critico {
    background: #fee4e2;
    color: #b42318;
}

.ri-vacio {
    margin: 0;
    padding: 1.5rem 1.25rem;
    color: #667085;
    text-align: center;
}

/* --- Mi balance (components/balance.html) ------------------------------ */

.ri-barra {
    padding: 1rem 1.25rem;
    border-radius: .75rem;
}

.ri-barra__cabeza {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .6rem;
}

.ri-barra__total,
.ri-barra__avance {
    margin: 0;
}

.ri-barra__total strong {
    color: #002251;
    font-size: 22px;
}

.ri-barra__avance {
    color: #475467;
    font-weight: 600;
}

.ri-barra__excedente {
    color: #b54708;
}

.ri-barra__pista {
    display: flex;
    height: .75rem;
    overflow: hidden;
    border-radius: 999px;
    background: #f2f4f7;
}

.ri-barra__tramo--comprobado { background: #12b76a; }
.ri-barra__tramo--validacion { background: #fdb022; }
.ri-barra__tramo--falta { background: #f07f3c; }

.ri-barra__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .75rem;
    font-size: 14px;
}

.ri-barra__dato {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #475467;
}

.ri-barra__dato:hover,
.ri-barra__dato:focus {
    color: #344054;
}

.ri-barra__dato::before {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    content: "";
}

.ri-barra__dato--comprobado::before { background: #12b76a; }
.ri-barra__dato--validacion::before { background: #fdb022; }
.ri-barra__dato--falta::before { background: #f07f3c; }

.ri-barra__dato strong {
    color: #344054;
}

.ri-balance__grupos {
    display: grid;
    gap: 0 1.5rem;
}

.ri-balance__grupos .ri-seccion__titulo {
    margin-top: 1.5rem;
}

.ri-balance__envios {
    margin-top: 1.5rem;
}

.ri-envios__conteo {
    padding: 0 .55rem;
    border-radius: 999px;
    background: #fff4ec;
    color: #9c4716;
    font-size: 12px;
    font-weight: 600;
}

@media (min-width: 992px) {
    .ri-balance__grupos {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

/* --- Balance personal (áreas) ------------------------------------------- */

.ri-balance-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #eaecf0;
    border-radius: .6rem;
    background: #fff;
    color: #344054;
    font-weight: 600;
}

.ri-balance-toggle:focus-visible {
    outline: 2px solid #f07f3c;
    outline-offset: 2px;
}

.ri-balance-toggle__flecha {
    transition: transform .15s ease;
}

.ri-balance-toggle:not(.collapsed) .ri-balance-toggle__flecha {
    transform: rotate(180deg);
}

/* --- Pantallas medianas y celular --------------------------------------- */

@media (max-width: 1199.98px) {
    .ri-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "saludo cta"
            "accesos accesos";
    }

    .ri-accesos {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ri-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "saludo"
            "cta"
            "accesos";
        padding: 1rem;
    }

    .ri-hero__cta {
        justify-content: center;
    }

    .ri-accesos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ri-acceso {
        white-space: normal;
    }

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

    .ri-pendiente__n {
        font-size: 24px;
    }

    .ri-fila {
        gap: .5rem;
        padding: .6rem 1rem;
    }

    .ri-fila__monto,
    .ri-dias {
        min-width: 0;
    }
}

@media (max-width: 400px) {
    .ri-pendientes {
        grid-template-columns: 1fr;
    }
}