/* =====================================================
   CIAE Resumen de Pagos — CSS v1.6.0 GLASS AESTHETIC
   Armonizado con CIAE Menú de Usuario v4.6 y Mensajes v3.2
===================================================== */

:root{
    --pag-blue:#13233a;
    --pag-blue-soft:#23405f;
    --pag-gold:#c8a97e;
    --pag-gold-d:#b48d5d;
    --pag-text:#13233a;
    --pag-soft:#475569;
    --pag-muted:#64748b;
    --pag-line:rgba(15,23,42,.07);
    --pag-ease:cubic-bezier(.16,1,.3,1);
    --pag-sh:0 8px 28px rgba(15,23,42,.08);
    --pag-sh-lg:0 18px 48px rgba(15,23,42,.12);
}

/* ── Wrapper ── */
.ciae-macos.wrap{
    max-width:1100px;
    margin:24px auto;
    padding:0 16px;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Banner superior ── */
.ciae-macos .banner{
    display:flex;
    gap:14px;
    align-items:center;
    border-radius:22px;
    padding:18px 22px;
    margin-bottom:14px;
    backdrop-filter:blur(24px) saturate(165%);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    box-shadow:var(--pag-sh),inset 0 1px 0 rgba(255,255,255,.82);
}

.ciae-macos .banner.info{
    background:rgba(255,255,255,.52);
    border:1px solid rgba(255,255,255,.74);
}

.ciae-macos .banner .icon{
    font-size:20px;
    line-height:1;
    flex-shrink:0;
}

.banner-body{flex:1;min-width:0}

.banner-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.banner-top h3{
    margin:0;
    font-size:20px;
    font-weight:900;
    letter-spacing:-.03em;
    color:var(--pag-blue);
}

/* ── Chips de metadatos ── */
.ciae-topmeta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    justify-content:flex-end;
}

.ciae-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.52);
    border:1px solid rgba(255,255,255,.72);
    font-size:11.5px;
    font-weight:700;
    color:var(--pag-blue);
    white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.ciae-macos .banner p{
    margin:6px 0 0;
    color:var(--pag-soft);
    font-size:13px;
    line-height:1.55;
}

/* ── Card de progreso / avance ── */
.ciae-macos .card.avance{
    background:rgba(255,255,255,.52);
    border:1px solid rgba(255,255,255,.74);
    border-radius:22px;
    padding:18px 22px;
    margin-bottom:16px;
    backdrop-filter:blur(24px) saturate(165%);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    box-shadow:var(--pag-sh),inset 0 1px 0 rgba(255,255,255,.82);
}

.avance-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.avance-head strong{
    font-size:14px;
    font-weight:800;
    color:var(--pag-blue);
    letter-spacing:-.01em;
}

.avance-pct{
    font-weight:900;
    font-size:20px;
    color:var(--pag-blue);
    letter-spacing:-.02em;
}

/* ── Barra de progreso ── */
.ciae-progress{
    width:100%;
    height:8px;
    background:rgba(15,23,42,.07);
    border-radius:999px;
    overflow:hidden;
}

.ciae-progress-bar{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--pag-blue),#1d4ed8);
    transition:width .8s var(--pag-ease);
}

/* ── Grid de meses ── */
.ciae-mes-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px;
}

/* ── Card de mes ── */
.mes-card{
    background:rgba(255,255,255,.48);
    border:1px solid rgba(255,255,255,.72);
    border-radius:20px;
    padding:16px 18px;
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 4px 16px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.82);
    transition:transform .35s var(--pag-ease),box-shadow .35s var(--pag-ease),border-color .35s var(--pag-ease);
    position:relative;
    overflow:hidden;
}

.mes-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:20px;
    background:linear-gradient(130deg,rgba(255,255,255,.38),transparent 32%,transparent 68%,rgba(255,255,255,.14));
    pointer-events:none;
}

.mes-card:hover{
    transform:translateY(-3px);
    border-color:rgba(200,169,126,.3);
    box-shadow:0 14px 36px rgba(15,23,42,.11),inset 0 1px 0 rgba(255,255,255,.9);
}

.mes-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    position:relative;
}

.mes-tit{
    font-weight:900;
    font-size:16px;
    color:var(--pag-blue);
    letter-spacing:-.02em;
}

/* ── Badges de estado ── */
.badge{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.02em;
}

.badge.ok{
    background:rgba(236,253,245,.85);
    color:#065f46;
    border:1px solid rgba(167,243,208,.7);
}

.badge.due{
    background:rgba(255,251,235,.85);
    color:#92400e;
    border:1px solid rgba(253,230,138,.7);
}

.badge.late{
    background:rgba(254,242,242,.85);
    color:#7f1d1d;
    border:1px solid rgba(254,202,202,.7);
}

.badge.pending{
    background:rgba(238,242,255,.85);
    color:#3730a3;
    border:1px solid rgba(199,210,254,.7);
}

.badge.future{
    background:rgba(240,249,255,.85);
    color:#075985;
    border:1px solid rgba(186,230,253,.7);
}

/* ── Monto y subtexto ── */
.mes-amount{
    font-size:18px;
    font-weight:900;
    color:var(--pag-blue);
    margin:8px 0 2px;
    letter-spacing:-.02em;
    position:relative;
}

.mes-sub{
    font-size:12px;
    color:var(--pag-muted);
    margin-top:1px;
    font-weight:600;
    position:relative;
}

.mes-sub.ok{color:#065f46}

/* ── Botón pagar ── */
.mes-actions{margin-top:12px;position:relative}

.ciae-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 16px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--pag-blue),#1d4ed8);
    color:#fff!important;
    text-decoration:none!important;
    font-weight:800;
    font-size:12.5px;
    letter-spacing:-.01em;
    box-shadow:0 8px 22px rgba(19,35,58,.22);
    transition:transform .3s var(--pag-ease),box-shadow .3s var(--pag-ease);
}

.ciae-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(19,35,58,.28);
}

/* ── Detalle acordeón ── */
.mes-det{
    margin-top:12px;
    border-top:1px solid rgba(15,23,42,.07);
    padding-top:10px;
    position:relative;
}

.mes-det summary{
    cursor:pointer;
    list-style:none;
    font-weight:800;
    font-size:12.5px;
    color:var(--pag-blue);
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.mes-det summary::-webkit-details-marker{display:none}

.mes-det summary::after{
    content:'›';
    font-size:18px;
    font-weight:700;
    color:rgba(15,23,42,.3);
    transform:rotate(90deg);
    display:inline-block;
    transition:transform .25s var(--pag-ease);
}

.mes-det[open] summary::after{
    transform:rotate(270deg);
}

.mes-det-body{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.det-row{
    border:1px solid rgba(15,23,42,.07);
    border-radius:12px;
    padding:10px 12px;
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.det-main{
    font-weight:800;
    color:var(--pag-blue);
    font-size:12.5px;
}

.det-side{
    margin-top:4px;
    font-weight:900;
    color:var(--pag-blue);
    font-size:13px;
}

.det-link a{
    display:inline-block;
    margin-top:5px;
    font-size:11.5px;
    color:#1d4ed8;
    text-decoration:none;
    font-weight:700;
}

.det-link a:hover{text-decoration:underline}

.muted{font-weight:600;color:var(--pag-muted)}

/* ── Callouts de error/aviso ── */
.ciae-macos .callout{
    border-radius:16px;
    padding:13px 16px;
    margin:8px 0;
    font-size:13px;
    font-weight:600;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.ciae-macos .callout.warn{
    background:rgba(255,247,237,.8);
    border:1px solid rgba(253,211,138,.7);
    color:#92400e;
}

.ciae-macos .callout.error{
    background:rgba(254,242,242,.8);
    border:1px solid rgba(254,202,202,.7);
    color:#7f1d1d;
}

/* ── Responsive ── */
@media(max-width:760px){
    .ciae-macos.wrap{padding:0 12px;margin:16px auto}
    .ciae-macos .banner{border-radius:18px;padding:14px 16px}
    .banner-top h3{font-size:17px}
    .ciae-mes-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
    .mes-card{border-radius:16px;padding:14px 15px}
    .mes-tit{font-size:14px}
    .mes-amount{font-size:16px}
    .ciae-macos .card.avance{border-radius:18px;padding:15px 16px}
}

@media(max-width:520px){
    .banner-top{flex-direction:column;align-items:flex-start;gap:8px}
    .ciae-topmeta{justify-content:flex-start}
    .ciae-mes-grid{grid-template-columns:1fr 1fr;gap:9px}
    .mes-card{border-radius:14px;padding:12px 13px}
    .mes-tit{font-size:13px}
    .badge{font-size:10px;padding:3px 8px}
    .mes-amount{font-size:15px}
    .mes-sub{font-size:11px}
    .ciae-macos .banner{border-radius:16px;padding:12px 14px}
    .banner-top h3{font-size:15px}
    .ciae-chip{font-size:10.5px;padding:5px 9px}
}