.cuenta { height: 100dvh; overflow: auto; display: grid; place-items: start center; padding: var(--s5); background: var(--paper); }
.cuenta__tarjeta { width: min(100%, 760px); margin-block: var(--s5); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cuenta__marca { font-family: var(--font-display); color: var(--acc-ink); font-weight: 650; }
.cuenta__tarjeta h1 { margin-block: var(--s3); }
.cuenta__tarjeta p { line-height: var(--lh-base); }
.cuenta__pais { display: grid; gap: var(--s2); margin-block: var(--s4); }
.cuenta__pais select { max-width: 320px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--s3); background: var(--surface); }
.cuenta__periodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-block: var(--s4); }
.cuenta__periodos--unico { grid-template-columns: 1fr; }
.cuenta__periodo { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); }
.cuenta__precio { font-size: var(--fs-xl); font-weight: 650; font-variant-numeric: tabular-nums; }
.cuenta__acciones { display: flex; flex-wrap: wrap; align-items: start; gap: var(--s3); margin-block: var(--s5); }
.cuenta__resumen { margin-block: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); }
.cuenta__estado { display: inline-flex; align-items: center; margin: 0 0 var(--s3); padding: var(--s1) var(--s3); border-radius: 999px; font-weight: 650; }
.cuenta__estado--ok { color: var(--ok); background: var(--ok-soft); }
.cuenta__estado--aviso { color: var(--warn); background: var(--warn-soft); }
.cuenta__detalles { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--s2) var(--s4); margin: 0; }
.cuenta__detalles dt { color: var(--ink-3); }
.cuenta__detalles dd { margin: 0; font-weight: 650; }
.cuenta__aviso { flex-basis: 100%; margin: 0; }
.cuenta__error { padding: var(--s3); border-left: 3px solid var(--bad); background: var(--paper-2); }
.cuenta__mensaje { padding: var(--s3); border-left: 3px solid var(--ok); background: var(--paper-2); }
.cuenta__correo { overflow-wrap: anywhere; }
.cuenta .btn { margin: var(--s1); }
@media (max-width: 600px) { .cuenta { padding: var(--s3); } .cuenta__tarjeta { margin-block: var(--s2); padding: var(--s4); } .cuenta__periodos { grid-template-columns: 1fr; } .cuenta__detalles { grid-template-columns: 1fr; gap: var(--s1); } .cuenta__detalles dd + dt { margin-top: var(--s2); } .cuenta__acciones, .cuenta__acciones .btn { width: 100%; } }