/* ConLupa — Auditor de expensas. Usa las clases base de tarjetas.css. Al cambiarlo, subir el ?v= en expensas.html. */
.exp-cond{grid-template-columns:1fr 1fr}
@media (max-width:560px){.exp-cond{grid-template-columns:1fr}}
#pegado{font-size:16px;min-height:10rem}
#leer{margin-top:.2rem}
#leidos:empty{display:none}

.exp-fila{display:grid;gap:0 .8rem;grid-template-columns:1fr 9.5rem 13rem;align-items:end;padding:.8rem 0;border-bottom:1px dashed var(--line)}
.exp-fila .field{margin-bottom:.5rem;min-width:0}
.exp-fila .aud-quitar{grid-column:1/-1}
@media (max-width:640px){.exp-fila{grid-template-columns:1fr 1fr}.exp-fila .field:first-child{grid-column:1/-1}}
#addFila{margin-top:.8rem}

/* resumen: tres totales */
.exp-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.6rem 0 .2rem}
.exp-tot{border:1px solid var(--line);border-top:5px solid;border-radius:12px;padding:.7rem .85rem;background:var(--surface);min-width:0}
.exp-tot span{display:block;font-size:.85rem;color:var(--muted)}
.exp-tot b{display:block;font-size:1.15rem;color:var(--heading);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.exp-tot small{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}
.exp-tot.rojo{border-top-color:var(--red)} .exp-tot.ambar{border-top-color:var(--amber)} .exp-tot.verde{border-top-color:var(--green)}
@media (max-width:560px){.exp-resumen{grid-template-columns:1fr}}
#aviso{margin:.8rem 0}

/* un bloque por concepto */
.exp-b{border:1px solid var(--line);border-left:6px solid;border-radius:12px;padding:.85rem 1rem;margin:.6rem 0;background:var(--surface);min-width:0}
.exp-b.rojo{border-left-color:var(--red)} .exp-b.ambar{border-left-color:var(--amber)} .exp-b.verde{border-left-color:var(--green)}
.exp-b-top{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.exp-b-top b{color:var(--heading);overflow-wrap:anywhere;min-width:0}
.exp-est{flex:none;font:700 .74rem var(--body);text-transform:uppercase;letter-spacing:.04em;padding:.15rem .5rem;border-radius:999px;background:var(--surface-2,var(--line))}
.exp-b.rojo .exp-est{color:var(--red)} .exp-b.ambar .exp-est{color:#8a6100} .exp-b.verde .exp-est{color:var(--green)}
.exp-monto{margin:.25rem 0 0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--heading)}
.exp-monto small{font-weight:400;color:var(--muted);font-size:.82rem}
.exp-b>p{margin:.3rem 0 0;font-size:.95rem;overflow-wrap:break-word}
.exp-nota{margin-top:.6rem}
.exp-nota summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:center}
.exp-nota pre{white-space:pre-wrap;font:400 .95rem/1.55 var(--body);background:var(--sky,var(--surface-2));border-radius:10px;padding:.8rem .9rem;margin:.2rem 0 .6rem;overflow-wrap:anywhere}
.exp-nota[open] pre{animation:exp-in 200ms var(--ease-out,ease-out)}
@keyframes exp-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.exp-nota[open] pre{animation:none}}
.aud-pasos-sig{margin-top:1.4rem}

/* un solo mensaje por destinatario (bloques.js) */
.exp-msg{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed var(--line)}
.exp-msg h3{margin:0 0 .3rem;font-size:1.1rem;color:var(--heading)}
.exp-final{white-space:pre-wrap;font:400 .95rem/1.55 var(--body);background:var(--sky,var(--surface-2));border-radius:10px;padding:.8rem .9rem;margin:.8rem 0 0;overflow-wrap:anywhere}