/* ==========================================================================
   Portal: tarea 12 (documentos por corregir) y tarea 18 (cuotas del contrato y «Olvidé mi contraseña»).
   Encima de styles.css del formulario y de portal.css: solo lo nuevo. Las tarjetas de documento son las del
   formulario (.fin-doc) con lo de /subsanar/ (.sub-*), para que el cliente vea lo mismo en los dos lugares.
   ========================================================================== */

/* ---------- Olvidé mi contraseña ---------- */
.forgot-text{margin:-12px 0 20px;color:var(--ink-2);font-size:15px}

/* ---------- Documentos por corregir ---------- */
.fix h2{margin-bottom:8px}
.fix-intro{color:var(--ink-2);font-size:15px}
.fix-deadline{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
.fix-deadline:empty{display:none}
.fix-docs{list-style:none;margin:18px 0 0;padding:0}
.fix-docs .fin-doc{border-color:var(--line)}
.fix-docs .fin-doc-t{margin:0;font-size:16px}
.fix-docs input[type=file]{display:none}
.fix-count{margin:16px 0 12px;font-size:15px;font-weight:600;color:var(--ink-2)}
.fix .btn{width:auto;min-width:220px}
.fix .error{margin:0 0 12px}

.sub-doc{align-items:start}
.sub-doc .fin-doc-act{align-self:start}
.sub-doc .fin-doc-meta{white-space:normal}
.sub-motivo{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--warn-soft,#fff4e5);color:#6b3a00;font-size:14px}
.sub-motivo b{display:block;font-size:13px}
.sub-consejos{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.sub-consejos li{margin:2px 0}
.sub-formato{margin:6px 0 0;font-size:13px;color:var(--muted)}
.sub-listo{color:var(--ok);font-weight:600}
/* ya subido: la observación queda, más tenue, para que el cliente compare */
.fix-doc.done .sub-motivo{background:var(--bg);color:var(--ink-2)}

/* ---------- Tus cuotas ---------- */
.pay h2{margin-bottom:16px}
.pay-next{padding:20px;border-radius:var(--radius-sm);background:var(--sky-soft)}
.pay-next.is-late{background:#fdecea}
.pay-next.is-done{background:var(--ok-soft)}
.pay-next.is-plan{background:var(--bg)}
.pay-next.is-plan + .pay-note{margin-top:12px}
.pay-k{font-size:14px;font-weight:600;color:var(--navy)}
.pay-next.is-late .pay-k{color:#8A1C14}
.pay-next.is-done .pay-k{color:#14552A}
.pay-big{margin-top:2px;font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pay-next.is-done .pay-big{font-size:24px}
.pay-when{margin-top:2px;font-size:16px;font-weight:600}
.pay-sub{margin-top:6px;font-size:14px;color:var(--ink-2)}
.pay-btn{margin-top:16px;width:auto;min-width:220px}
.pay-fallback{margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);background:#fff;font-size:15px}
.pay-fallback .btn{width:auto;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.pay-alert{margin-top:12px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--bg);font-size:15px;color:var(--ink-2)}
.pay-alert.is-err{background:#fdecea;color:#8A1C14;font-weight:600}
.pay-alert.is-ok{background:var(--ok-soft);color:#14552A}
.pay-note{color:var(--ink-2)}
.pay-alt{display:inline-flex;align-items:center;justify-content:center;width:auto;margin-top:16px;text-decoration:none}
.pay-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}
.pay-facts div{padding:12px;border-radius:var(--radius-sm);background:var(--bg)}
.pay-facts dt{font-size:13px;color:var(--muted)}
.pay-facts dd{margin-top:2px;font-weight:700;font-variant-numeric:tabular-nums}
.pay-list{margin-top:16px;border-top:1px solid var(--line)}
.pay-list summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--navy)}
.pay-list ol{list-style:none;margin:0;padding:0}
.pay-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.pay-list li.is-paid{color:var(--muted)}
.pay-n{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pay-d small{display:block;font-size:12px;color:var(--muted)}
.pay-m{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.pay-chip{padding:3px 10px;border-radius:999px;background:var(--bg);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.pay-chip.is-ok{background:var(--ok-soft);color:#14552A}
.pay-chip.is-late{background:#fdecea;color:#8A1C14}
.pay-chip.is-part{background:var(--sky-soft);color:var(--navy)}

@media (max-width:560px){
  .fix .btn,.pay-btn{width:100%}
  .sub-doc:not(.done) .fin-doc-act{flex-wrap:wrap}
  .sub-doc{grid-template-columns:44px minmax(0,1fr)}
  .sub-doc .fin-doc-act{grid-column:1/-1;margin-top:8px}
  .sub-doc .fin-doc-act .fin-btn{flex:1}
  .pay-big{font-size:30px}
  .pay-facts{grid-template-columns:minmax(0,1fr)}
  .pay-facts div{display:flex;justify-content:space-between;align-items:baseline}
  .pay-list li{grid-template-columns:24px minmax(0,1fr) auto;row-gap:4px}
  .pay-list li .pay-chip{grid-column:2/-1;justify-self:start}
}