/* Las páginas del cobro automático (20-oct-2026). Se apoyan en .envio, .metodo y
   .acepto de tienda.css; aquí solo va lo que esas no traen. */
.sus{max-width:40rem}
.sus-form{gap:.75rem}
.sus-form select{min-height:46px;padding:0 .6rem;border:1px solid var(--linea-2);border-radius:var(--r-sm);
  background:#fff;font:inherit;color:var(--t1);width:100%}
.sus-form select:focus-visible{outline:2px solid var(--accion);outline-offset:1px}
.sus-filas{display:grid;gap:.55rem}
.sus-fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 5.2rem 2.2rem;gap:.5rem;align-items:end;
  padding:.6rem;border:1px solid var(--linea-2);border-radius:var(--r-sm);background:#fff}
.sus-fila[data-fila="granel"]{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) 4.6rem 2.2rem}
.sus-fila label{font-size:.74rem;min-width:0}
.sus-form label,.sus-form input,.sus-form select{min-width:0;max-width:100%}
.sus-fila input{min-height:46px}
.sus-fila__quitar{min-height:46px;border:0;background:none;font-size:1.4rem;color:var(--t2);cursor:pointer;border-radius:var(--r-sm)}
.sus-fila__quitar:hover{background:var(--accion-suave)}
.sus-fila:only-child .sus-fila__quitar{visibility:hidden}
.sus-mas{justify-self:start;border:1.5px dashed var(--linea-2);background:none;border-radius:var(--r-sm);
  padding:.6rem .9rem;font:inherit;font-size:.85rem;color:var(--t1);cursor:pointer}
.sus-mas:hover{border-color:var(--accion)}
.sus-mas-dos{display:flex;gap:.5rem;flex-wrap:wrap}
.sus-resumen{border-radius:var(--r-sm);background:var(--accion-suave);padding:.8rem .95rem;font-size:.9rem;line-height:1.5;min-height:3rem}
.sus-resumen b.sus-total{display:block;font-size:1.35rem;letter-spacing:-.02em;color:var(--t1)}
.sus-resumen s{color:var(--t2)}
.sus-resumen .sus-error{color:var(--alerta);font-weight:600}
.sus-tarjeta,.sus-nequi{display:grid;gap:.6rem}
.sus-tarjeta__fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.sus-ayuda{font-size:.8rem;color:var(--t2);line-height:1.5;margin:0}
.sus-listo,.sus-gestion{border:1px solid var(--linea-2);border-radius:var(--r-sm);background:#fff;padding:1.1rem 1.1rem 1.2rem;line-height:1.55}
.sus-listo h2,.sus-gestion h2{font-size:1.35rem;margin:0 0 .4rem}
.sus-estado{display:inline-block;font:600 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .55rem;border-radius:99px;background:var(--accion-suave)}
.sus-estado--pausada,.sus-estado--rechazada{background:#fde8e6;color:#8a1c12}
.sus-estado--cancelada{background:#eceeec;color:var(--t2)}
.sus-datos{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:.9rem 0;font-size:.92rem}
.sus-datos dt{color:var(--t2)}
.sus-datos dd{margin:0}
.sus-cobros{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.4rem}
.sus-cobros td{padding:.4rem 0;border-bottom:1px solid var(--linea-2)}
.sus-cobros td:last-child{text-align:right}
.sus-acciones{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.sus-acciones button{min-height:44px;padding:0 1rem;border-radius:var(--r-sm);font:inherit;font-weight:600;cursor:pointer;
  border:1.5px solid var(--linea-2);background:#fff;color:var(--t1)}
.sus-acciones button.sus-peligro{color:#8a1c12;border-color:#e9b9b4}
.sus-acciones button.sus-primario{background:var(--accion);color:#fff;border-color:var(--accion)}
.sus-espera{display:flex;gap:.7rem;align-items:center}
.sus-espera::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--linea-2);
  border-top-color:var(--accion);animation:sus-gira 0.8s linear infinite;flex:0 0 auto}
@keyframes sus-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sus-espera::before{animation:none}}
.sus-legal h2{font-size:1.25rem;margin:2rem 0 .6rem}
.sus-legal ol{padding-left:1.2rem;display:grid;gap:.6rem;line-height:1.6}
.sus-legal p{line-height:1.6}
@media (max-width:560px){
  .sus-fila,.sus-fila[data-fila="granel"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sus-fila__n{grid-column:1}
  .sus-fila__quitar{grid-column:2;justify-self:end}
}
/* tienda.css pone .envio label en grid, y le gana a .acepto: la casilla quedaba
   encima del texto en vez de al lado */
.sus-form .acepto{display:flex}
/* los bloques que solo aplican a la suscripción (o solo al pago único) */
.sus-solo{display:grid;gap:.75rem}
[data-solo][hidden]{display:none!important}