/* ------------------------------------------------------------------
   Módulo cuenta: estado de cuenta por equipo, recordatorio, lista de
   cobranza y las tres cifras del dueño. Usa los tokens de estilos.css.
   Botones: pulsado .97 en menos de 100 ms y hover solo con mouse.
------------------------------------------------------------------- */

.cta-panel{margin-bottom:1.2rem}

/* ---------- un bloque por equipo ---------- */
.cta-bloques{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.75rem;padding:.9rem 1.05rem}
.cta-equipo{border:1.5px solid var(--linea);border-radius:12px;padding:.8rem .9rem .7rem;display:flex;flex-direction:column;gap:.45rem;min-width:0;background:#fff}
.cta-equipo>header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.cta-equipo>header b{font-size:.93rem;font-weight:680;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.cta-equipo>header .sello{flex:none}
.cta-tres-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:0}
.cta-tres-datos dt{font-size:.72rem;color:var(--tinta-2)}
.cta-tres-datos dd{margin:0;font-size:.9rem;font-weight:650}
.cta-barra{height:5px;border-radius:99px;background:var(--linea);overflow:hidden}
.cta-barra i{display:block;height:100%;background:var(--azul);border-radius:99px}
.cta-linea{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.85rem;padding:.45rem .55rem;border-radius:8px;background:var(--azul-tinte)}
.cta-linea>span{color:var(--tinta);min-width:0}
.cta-linea>b{font-size:1rem;font-weight:750;text-align:right;white-space:nowrap}
.cta-linea>b .bs{font-size:.7rem}
.cta-linea.suave{background:#f6f6f9}
.cta-linea.suave>span{color:var(--tinta-2)}
.cta-linea.suave>b{font-weight:600;color:var(--tinta-2)}
.cta-linea.atraso{background:var(--ambar-tinte)}
.cta-linea.atraso>span,.cta-linea.atraso>b{color:var(--ambar)}
.cta-linea.porconfirmar{background:#fff;border:1.5px dashed var(--linea-fuerte)}
.cta-linea.porconfirmar>span{color:var(--tinta-2)}
.cta-pie{font-size:.74rem;color:var(--tinta-3);margin:0}
.cta-equipo .btn.fantasma{align-self:flex-start;margin-left:-.4rem}

/* ---------- el total, al final y sin gritar ---------- */
.cta-total{border-top:1px dashed var(--linea-fuerte);padding:.75rem 1.05rem .85rem;display:grid;gap:.35rem}
.cta-total-fila{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.9rem}
.cta-total-fila>b{font-weight:750;text-align:right}
.cta-total-fila>b .bs{font-size:.72rem}
.cta-total-fila.atraso{color:var(--ambar)}
.cta-total-fila.porconfirmar{color:var(--tinta-2);font-size:.84rem}
.cta-total-fila.todo{color:var(--tinta-2);font-size:.82rem;font-weight:400}

.cta-aviso{margin:.75rem 1.05rem 0;padding:.55rem .75rem;border-radius:9px;background:var(--azul-tinte);color:var(--azul-noche);font-size:.84rem;max-width:none}
.hoja .cta-aviso{margin:.6rem 0 0}
.cta-acciones{display:flex;gap:.5rem;flex-wrap:wrap;padding:0 1.05rem .9rem}

/* ---------- hoja del recordatorio ---------- */
.cta-opcion{display:flex;gap:.55rem;align-items:flex-start;margin:.8rem 0 .2rem;font-size:.88rem;cursor:pointer}
.cta-opcion input{width:1.1rem;height:1.1rem;margin-top:.15rem;flex:none;accent-color:var(--azul)}
.cta-btn[aria-disabled="true"]{background:#eceaf2;color:#6f6987;border-color:transparent;cursor:not-allowed}

/* ---------- lista de cobranza ---------- */
.cta-resumen-lista{padding:.8rem 1.05rem;border-bottom:1px solid var(--linea);display:grid;gap:.35rem;font-size:.88rem}
.cta-fuera-linea{color:var(--tinta-2)}
.cta-fuera{background:#fafafc;border-bottom:1px solid var(--linea)}
.cta-fila .desc em{font-style:normal;color:var(--azul-osc);font-weight:600}
.cta-lista{max-height:none}
.cta-enviado .desc b,.cta-enviado .monto-c{color:var(--tinta-3)}
.cta-copiar-mano{width:100%;font:inherit;font-size:.85rem;line-height:1.45;padding:.7rem .8rem;border:1.5px solid var(--linea-fuerte);border-radius:10px;resize:vertical}

/* ---------- campo de cédula y teléfono ---------- */
.cta-campo-msg{font-size:.8rem;margin:-.25rem 0 .55rem;line-height:1.35;max-width:none}
.cta-campo-msg:empty{display:none}
.cta-campo-msg[data-tipo="error"]{color:var(--rojo)}
.cta-campo-msg[data-tipo="aviso"]{color:var(--ambar)}
.cta-campo-msg[data-tipo="ok"]{color:var(--verde)}
.cta-campo-msg .btn{margin-top:.35rem}
input[aria-invalid="true"]{border-color:var(--rojo) !important}

/* ---------- las tres cifras del dueño (solo en el teléfono) ---------- */
.cta-tres{display:none}
@media (max-width:700px){
  .cta-tres:not([hidden]){display:grid;gap:.6rem;margin:0 0 1.2rem}
  .cta-cifra{border:1.5px solid var(--linea);border-radius:14px;padding:.85rem 1rem;display:grid;gap:.1rem;background:#fff}
  .cta-cifra .concepto{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
  .cta-cifra b{font-size:1.85rem;font-weight:780;letter-spacing:-.02em;line-height:1.15}
  .cta-cifra .ctx{font-size:.82rem;color:var(--tinta-2)}
  .cta-cifra.riesgo b{color:var(--ambar)}
  .cta-bloques{grid-template-columns:1fr;padding:.75rem .8rem}
  .cta-total{padding:.7rem .8rem .8rem}
}

/* ---------- botones: inmediatos y honestos ---------- */
.cta-panel .btn,.cta-btn,.cta-campo-msg .btn{transition:transform .09s ease-out,background-color .09s ease-out,border-color .09s ease-out}
.cta-panel .btn:active,.cta-btn:active,.cta-campo-msg .btn:active{transform:scale(.97)}
.cta-btn[aria-disabled="true"]:active{transform:none}
@media (prefers-reduced-motion:reduce){
  .cta-panel .btn,.cta-btn,.cta-campo-msg .btn{transition:none}
  .cta-panel .btn:active,.cta-btn:active,.cta-campo-msg .btn:active{transform:none}
}