/* ═══════════════════════════════════════════════════════════════════════════
   Cuartico · «Esmeralda» para Mi suscripción y Administración (23/09/2026).
   Viste las piezas que pintan billing-ui.js, admin-ui.js y admin-review.js
   (sus clases no cambian), encima de cuartico.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.pagos .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pagos .muted { color: var(--text-3); font-size: 14px; line-height: 1.6; }
:where(.pagos) p { margin: 0; }
.pagos :where(h2, h3) { font-family: var(--f-display); color: var(--text); }
.pagos a:not(.btn):not(.nav-item):not(.brand) { color: inherit; }
.topbar-sub { margin-top: 8px; font-size: 14.5px; color: var(--text-2); max-width: 60ch; }

/* Botones de las plantillas: `.btn` a secas es la acción principal */
.pagos .btn:not(.btn-ghost):not(.btn-soft):not(.btn-dark):not(.btn-danger):not(.btn-primary) {
  color: #1F1204; background: linear-gradient(135deg, var(--o400) 0%, var(--o500) 45%, var(--o600) 100%);
  box-shadow: var(--sh-o), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pagos .btn:disabled, .pagos .btn[disabled] { opacity: 1; cursor: not-allowed; transform: none; color: var(--text-3) !important; background: var(--surface-3) !important; box-shadow: inset 0 0 0 1.5px var(--line) !important; }
.pagos .btn svg:not(.i) { width: 18px; height: 18px; flex: none; }
.admin-small-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .25s var(--spring); }
.admin-small-btn:hover { background: var(--surface-3); }
.admin-small-btn:active { transform: scale(.97); }
.admin-small-btn svg { width: 16px; height: 16px; }
.admin-small-btn.danger { color: var(--r600); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--r500) 35%, transparent); }
.admin-small-btn.danger:hover { background: var(--r100); }
.admin-small-btn.review-button { color: #1F1204; background: linear-gradient(135deg, var(--o400), var(--o600)); box-shadow: 0 8px 18px -10px rgba(224, 106, 11, .8); }
.admin-small-btn.review-button:hover { filter: brightness(1.05); }
.admin-small-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Estados (pill) con el mismo lenguaje de los chips */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--text-2); background: var(--surface-3); }
.pill.active, .pill.paid { color: var(--pos); background: var(--mint-100); }
.pill.pending, .pill.review, .pill.trial, .pill.grace, .pill.processing, .pill.created { color: var(--a600); background: var(--a100); }
.pill.expired, .pill.rejected, .pill.paused { color: var(--r600); background: var(--r100); }
.pill.not_started, .pill.cancelled { color: var(--text-2); background: var(--surface-3); }
.pill.pro { color: #9CEBFA; background: var(--pro-800); box-shadow: inset 0 0 0 1px rgba(61, 214, 245, .35); }

/* Tarjetas */
.billing-card { position: relative; min-width: 0; padding: 22px 24px 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); transition: box-shadow .35s var(--ease); }
.billing-card h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.billing-card h3 { font-size: 15px; font-weight: 600; }
.billing-card > .muted { margin: 6px 0 18px; font-size: 13.5px; }
.billing-note { font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.billing-note strong { color: var(--text-2); }
.admin-note { padding: 14px 16px; border-radius: 16px; font-size: 13px; line-height: 1.55; color: var(--a600); background: var(--a100); }
.billing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.billing-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.billing-check input, .saved-card input[type='radio'] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--g500); }
.billing-empty { display: grid; place-items: center; gap: 6px; padding: 32px 16px; border-radius: 20px; text-align: center; font-size: 13.5px; color: var(--text-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.billing-empty > svg { width: 44px; height: 44px; padding: 11px; margin-bottom: 4px; border-radius: 14px; color: var(--g500); background: var(--mint-100); }
.billing-empty b { font-size: 15px; color: var(--text); }
.billing-empty p { max-width: 40ch; }

/* Campos (billing-ui.js usa .field con span + input/select) */
.pagos .field { margin: 0; }
.pagos .field > span { font-size: 13px; }
.pagos .field textarea { width: 100%; min-height: 96px; padding: 12px 16px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); outline: none; resize: vertical; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.pagos .field textarea:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--g500), 0 0 0 5px color-mix(in srgb, var(--g500) 14%, transparent); }
.pagos .field textarea::placeholder, .pagos .field input::placeholder { color: var(--text-3); font-weight: 500; }

/* Aviso para copiar y marca de cada banco */
.bank-mark { display: grid; place-items: center; width: 46px; height: 46px; flex: none; overflow: hidden; border-radius: 14px; font-size: 13px; font-weight: 800; color: var(--e600); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -10px rgba(4, 38, 28, .5); }
.bank-mark img { width: 40px; height: 40px; object-fit: contain; }
.bank-mark-popular img { object-fit: cover; object-position: left; }
.bank-mark svg { width: 24px; height: 24px; }
.copy-feedback { min-height: 0; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--pos); }
.copy-feedback:empty { display: none; }

/* ═══ Mi suscripción ═══════════════════════════════════════════════════ */

/* El plan: tarjeta esmeralda como la del balance */
.plan-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 26px 30px; overflow: hidden; isolation: isolate; border-radius: 30px; color: #fff; background: radial-gradient(90% 140% at 100% 0%, rgba(91, 227, 166, .22), transparent 55%), radial-gradient(60% 120% at 0% 100%, rgba(245, 130, 31, .18), transparent 60%), linear-gradient(150deg, #06382A 0%, #04261C 55%, #021A13 100%); box-shadow: 0 30px 60px -30px rgba(2, 26, 19, .75); animation: cq-rise .75s var(--ease) both; }
.cq[data-plan='pro'] .plan-card { background: radial-gradient(90% 140% at 100% 0%, rgba(45, 212, 191, .22), transparent 55%), radial-gradient(60% 120% at 0% 100%, rgba(61, 214, 245, .10), transparent 60%), linear-gradient(150deg, var(--pro-800) 0%, var(--pro-900) 55%, var(--pro-950) 100%); box-shadow: 0 30px 60px -30px rgba(4, 10, 22, .8); }
.cq[data-plan='pro'] .plan-card::after { background-image: radial-gradient(rgba(213, 227, 242, .12) 1px, transparent 1.2px); }
.plan-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(221, 246, 234, .14) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.plan-state { padding-right: 26px; border-right: 1px solid rgba(255, 255, 255, .14); }
.plan-card .pill { padding: 6px 12px; font-size: 12.5px; color: var(--mint); background: rgba(91, 227, 166, .16); box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .25); }
.plan-card .pill.pending, .plan-card .pill.review, .plan-card .pill.trial, .plan-card .pill.grace { color: #FFD08A; background: rgba(242, 165, 22, .16); box-shadow: inset 0 0 0 1px rgba(242, 165, 22, .3); }
.plan-card .pill.expired, .plan-card .pill.rejected, .plan-card .pill.paused { color: #FFB29F; background: rgba(255, 139, 120, .16); box-shadow: inset 0 0 0 1px rgba(255, 139, 120, .3); }
.plan-description { min-width: 0; }
.plan-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.plan-card .muted { margin-top: 6px; font-size: 14.5px; color: color-mix(in srgb, var(--mint-200) 85%, transparent); }
.plan-link { display: inline-flex; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--o300) !important; }
.plan-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-card .price { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .14); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; color: #fff; font-variant-numeric: tabular-nums; }
.plan-card .price small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: color-mix(in srgb, var(--mint-200) 75%, transparent); }

/* Planes (28/09): Cuartico y Cuartico Pro. El plan elegido manda en todos los montos. */
.plan-card .price-plan { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-align: right; color: color-mix(in srgb, var(--mint-200) 80%, transparent); }
.plan-switch { max-width: 64ch; margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--mint-200); }
button.plan-link { margin-right: 20px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
button.plan-link:disabled { opacity: .5; cursor: not-allowed; }
/* Elegir plan (r3): tarjetas vivas. Todo lo que se mueve usa transform y opacidad (60 fps).
   Pro: borde que gira (una capa cónica rotada, sin repintar), cuadrícula y un brillo que se pasea.
   Cuartico: vidrio claro con acento menta, más tranquila. Con «reducir movimiento», todo quieto. */
.plan-picker { min-width: 0; margin: 22px 0 0; padding: 22px 24px 26px; border: 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); animation: cq-fade .45s var(--ease) both; }
.plan-picker-title { float: left; width: 100%; padding: 0; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.plan-picker-note { clear: both; margin: 6px 0 20px; font-size: 13.5px; }
.plan-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plan-option { --halo: rgba(23, 143, 93, .9); --halo-glow: rgba(91, 227, 166, .5); --glow: rgba(23, 143, 93, .38);
  position: relative; isolation: isolate; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 14px 12px; min-width: 0; padding: 20px 20px 22px; border-radius: 22px; cursor: pointer;
  transition: transform .45s var(--ease), opacity .3s var(--ease); }
.plan-option:not(.is-selected) { opacity: .86; }
/* Capas de fondo: .plan-fx (borde + relleno + brillo) y, fuera de la tarjeta, el brillo al pasar (::before) y el anillo al elegir (::after). */
.plan-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.plan-fx::before, .plan-fx::after { content: ''; position: absolute; }
.plan-fx::after { inset: 1.5px; z-index: 1; border-radius: 20.5px; }
.plan-glow { position: absolute; z-index: 2; width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.plan-option::before, .plan-option::after { content: ''; position: absolute; z-index: -2; pointer-events: none; }
.plan-option::before { inset: 0; border-radius: inherit; box-shadow: 0 18px 44px -18px var(--glow); opacity: .5; transition: opacity .35s var(--ease); }
.plan-option::after { inset: -6px; border-radius: 28px; box-shadow: inset 0 0 0 2px var(--halo), 0 0 28px 1px var(--halo-glow); opacity: 0; transform: scale(.97); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.plan-option.is-selected::after { opacity: 1; transform: none; animation: plan-halo 1.1s var(--ease) 1; }
@keyframes plan-halo { 0% { opacity: 0; transform: scale(.95); } 35% { opacity: 1; transform: scale(1.035); } 60% { opacity: .7; transform: scale(1.012); } 100% { opacity: 1; transform: none; } }

/* Cuartico: vidrio claro, borde menta */
.plan-option-basico .plan-fx { background: linear-gradient(150deg, rgba(91, 227, 166, .75), rgba(23, 143, 93, .22) 45%, rgba(91, 227, 166, .55)); }
.plan-option-basico .plan-fx::after { background: radial-gradient(rgba(23, 143, 93, .09) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(239, 250, 244, .92) 60%, rgba(221, 246, 234, .9)); }
.plan-option-basico .plan-glow { top: -38%; left: -26%; background: radial-gradient(circle, rgba(91, 227, 166, .34), transparent 68%); opacity: .8; transition: opacity .35s var(--ease); }
.cq[data-theme='oscuro'] .plan-option-basico .plan-fx::after { background: radial-gradient(rgba(91, 227, 166, .07) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(165deg, rgba(24, 52, 42, .96), rgba(13, 31, 24, .96)); }
.cq[data-theme='oscuro'] .plan-option-basico .plan-glow { opacity: .45; }

/* Cuartico Pro: azul marino, borde que gira en cian/verde azulado/azul, cuadrícula y brillo */
.plan-option-pro { --halo: rgba(61, 214, 245, .95); --halo-glow: rgba(61, 214, 245, .55); --glow: rgba(61, 214, 245, .5); color: #fff; }
.plan-option-pro .plan-fx { background: rgba(61, 214, 245, .2); }
.plan-option-pro .plan-fx::before { left: 50%; top: 50%; z-index: 0; width: 250%; aspect-ratio: 1; background: conic-gradient(from 0deg, transparent 0deg 25deg, rgba(61, 214, 245, .95) 80deg, #2DD4BF 125deg, transparent 175deg 200deg, rgba(76, 125, 255, .95) 262deg, #3DD6F5 310deg, transparent 350deg); transform: translate(-50%, -50%) rotate(0deg); animation: plan-ring 7s linear infinite; }
@keyframes plan-ring { to { transform: translate(-50%, -50%) rotate(360deg); } }
.plan-option-pro .plan-fx::after { background: linear-gradient(rgba(125, 211, 252, .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(125, 211, 252, .07) 1px, transparent 1px) 0 0 / 22px 22px, radial-gradient(120% 80% at 100% 0%, rgba(45, 212, 191, .14), transparent 55%), linear-gradient(160deg, var(--pro-800) 0%, var(--pro-900) 55%, var(--pro-950) 100%); }
.plan-option-pro .plan-glow { top: -42%; right: -30%; background: radial-gradient(circle, rgba(45, 212, 191, .3), rgba(61, 214, 245, .1) 45%, transparent 70%); animation: plan-drift 16s ease-in-out infinite alternate; }
@keyframes plan-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-38%, 42%) scale(1.15); } 100% { transform: translate(-72%, 12%) scale(.95); } }

/* El círculo de elegir: se vuelve un check que salta */
.plan-option input { grid-column: 1; grid-row: 1; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--g500) 55%, transparent); background: var(--surface) center / 14px no-repeat; cursor: inherit; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.plan-option input:checked { border-color: var(--g500); background-color: var(--g500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); animation: plan-pop .45s var(--spring) both; }
.plan-option-pro input { border-color: rgba(61, 214, 245, .65); background-color: rgba(7, 19, 42, .7); }
.plan-option-pro input:checked { border-color: var(--pro-cyan); background-color: var(--pro-cyan); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307132A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@keyframes plan-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.plan-option input:focus-visible { outline: none; }
.plan-option:has(input:focus-visible) { outline: 3px solid var(--o400); outline-offset: 8px; }

/* Textos */
.plan-option-head { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.plan-option-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 1px; font-family: var(--f-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.plan-option-tag { position: relative; overflow: hidden; isolation: isolate; padding: 3px 9px; border-radius: 999px; font-family: var(--f-ui); font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #9CEBFA; background: rgba(61, 214, 245, .12); box-shadow: inset 0 0 0 1px rgba(61, 214, 245, .4); }
.plan-option-tag::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-160%) skewX(-20deg); animation: plan-shimmer 4.2s ease-in-out 1.2s infinite; }
@keyframes plan-shimmer { 0%, 68% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
.plan-option-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--text-3); }
.plan-option-price b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-option-extra { margin-top: 3px; font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.plan-perks { grid-column: 2; display: grid; gap: 8px; min-width: 0; }
.plan-perks-lead { font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.plan-perk-list { display: grid; gap: 8px; }
.plan-perk { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.plan-perk::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: var(--g500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cq[data-theme='oscuro'] .plan-perk::before { background: var(--mint); }
.plan-perk b { display: block; font-weight: 800; color: var(--text); }
.plan-option-pro :is(.plan-option-name, .plan-perk b) { color: #fff; }
.plan-option-pro :is(.plan-option-price, .plan-perks-lead) { color: var(--pro-ice); }
.plan-option-pro .plan-option-price b { background: linear-gradient(95deg, #7FE7F7 0%, #3DD6F5 38%, #FFFFFF 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-option-pro .plan-option-price { align-items: flex-start; }
.plan-option-pro .plan-option-extra { color: #7FE7F7; }
.plan-option-pro .plan-perk { color: #C5D3E4; }
.plan-option-pro .plan-perk::before, .cq[data-theme='oscuro'] .plan-option-pro .plan-perk::before { background: var(--pro-cyan); }

/* Entrada: las tarjetas suben y cada línea aparece en fila (menos de 600 ms en total) */
.plan-picker.entra .plan-option { animation: plan-in .5s var(--ease) backwards; }
.plan-picker.entra .plan-option-pro { animation-delay: 80ms; }
.plan-picker.entra .plan-perk { animation: plan-perk-in .22s var(--ease) backwards; animation-delay: calc(100ms + var(--i, 0) * 26ms); }
@keyframes plan-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes plan-perk-in { from { opacity: 0; transform: translateX(-6px); } }

/* Pasar el mouse (solo con mouse): sube, se inclina hacia el cursor (lo mueve suscripcion.js) y brilla más */
@media (hover: hover) and (pointer: fine) {
  .plan-option:hover { opacity: 1; transform: translateY(-4px); }
  .plan-option.is-tilting { transform: perspective(900px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear, opacity .3s var(--ease); }
  .plan-option:hover::before { opacity: 1; }
  .plan-option-basico:hover .plan-glow { opacity: 1; }
}

/* Con un pago con tarjeta abierto no se cambia de plan */
.plan-picker.is-locked .plan-option { cursor: not-allowed; }
.plan-picker.is-locked .plan-option:not(.is-selected) { opacity: .5; }
.plan-picker.is-locked .plan-option:hover { transform: none; }
.plan-lock { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--a600); }

@media (prefers-reduced-motion: reduce) {
  .plan-option-pro .plan-fx::before, .plan-glow, .plan-option-tag::after { animation: none !important; }
  .plan-option, .plan-option:hover, .plan-option.is-tilting { transform: none !important; }
}

.proof-section > .muted strong, .card-method > .muted strong { font-weight: 800; color: var(--text-2); }
.card-flow-plan { padding: 10px 14px; border-radius: 14px; font-size: 13.5px; color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.card-flow-plan strong { font-weight: 800; color: var(--text); }
.history-plan { font-weight: 700; color: var(--text-2); }
/* Cuartico Pro: insignia azul marino con cian (historial, pendientes de la administración). */
.history-plan.is-pro, .plan-name.is-pro { display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: 1px; color: #9CEBFA; background: var(--pro-800); box-shadow: inset 0 0 0 1px rgba(61, 214, 245, .35); }
:is(.history-plan, .plan-name).is-pro + :is(.history-sep, .plan-sep) { display: none; }

.subscription-layout { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 22px; margin: 22px 0; }
.subscription-primary, .subscription-secondary { display: grid; gap: 22px; align-content: start; min-width: 0; }
.subscription-primary > .billing-card, .subscription-secondary > .billing-card, .history-section { animation: cq-rise .75s var(--ease) both; }
.subscription-primary > :nth-child(1) { animation-delay: 80ms; }
.subscription-primary > :nth-child(2) { animation-delay: 160ms; }
.subscription-secondary > :nth-child(1) { animation-delay: 120ms; }
.subscription-secondary > :nth-child(2) { animation-delay: 200ms; }
.history-section { animation-delay: 260ms; }

/* Cuentas para transferir */
.recipient-bank { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; margin-top: 10px; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease), transform .3s var(--ease); }
.recipient-bank:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1); }
.recipient-name { min-width: 0; }
.recipient-name strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); }
.recipient-name span, .recipient-name small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.account-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-copy input { width: 150px; min-width: 0; padding: 4px 0; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; outline: none; }
.account-copy .btn { gap: 6px; flex: none; }
.account-copy svg { width: 16px; height: 16px; }
.account-holder { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.account-holder strong { color: var(--text-2); font-weight: 800; }

/* Comprobante: pendiente y formulario */
.pending-receipt { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border-radius: 22px; background: var(--o50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o500) 22%, transparent); }
.pending-receipt > svg { width: 48px; height: 48px; padding: 12px; border-radius: 16px; color: var(--o600); background: var(--o100); }
.pending-receipt h2 { font-size: 17px; }
.pending-receipt p { margin: 6px 0 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.proof-section > .billing-note { margin-top: 14px; }
.receipt-link { font-size: 13px; font-weight: 800; color: var(--o700) !important; text-decoration: underline; text-underline-offset: 3px; }
.cq[data-theme='oscuro'] .receipt-link { color: var(--o300) !important; }
.billing-form { display: grid; gap: 16px; margin-top: 4px; }
.transfer-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.transfer-fields .field { margin-bottom: 14px; }
.transfer-fields .field:last-child { max-width: 240px; }
.receipt-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 112px; padding: 22px; overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--o500) 65%, transparent); border-radius: 22px; cursor: pointer; background: var(--o50); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.receipt-drop:hover { background: var(--o100); }
.receipt-drop:focus-within { outline: 3px solid var(--o400); outline-offset: 3px; }
.receipt-drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--g500) 55%, transparent); background: var(--mint-50); }
.receipt-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.receipt-drop strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.receipt-drop small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.upload-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; color: var(--o600); background: var(--o100); transition: transform .35s var(--spring); }
.receipt-drop:hover .upload-icon { transform: translateY(-3px); }
.receipt-drop.has-file .upload-icon { color: var(--g500); background: var(--mint-100); }
.upload-icon svg { width: 26px; height: 26px; }
.receipt-preview { padding: 14px; border-radius: 18px; font-size: 13px; color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; animation: cq-sheet .45s var(--spring) both; }
.receipt-preview img { display: block; max-width: 100%; max-height: 240px; margin: 0 auto; object-fit: contain; border-radius: 12px; }
.receipt-preview p { margin-top: 8px; }
.submit-receipt { display: flex; align-items: center; gap: 16px; }
.submit-receipt > .btn { flex: none; min-height: 52px; padding: 12px 24px; }
.submit-receipt > .btn svg { width: 18px; height: 18px; }
.submit-receipt p { margin: 0; }
.receipt-privacy { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.receipt-privacy::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='3'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='3'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Tarjeta y renovación */
.card-method { text-align: left; }
.payment-card-art { display: block; width: min(240px, 86%); height: auto; margin: 12px auto 6px; filter: drop-shadow(0 18px 24px rgba(4, 38, 28, .25)); animation: cq-float 7s var(--ease-io) infinite; }
.card-method > .pill { display: flex; width: max-content; margin: 0 auto; }
.card-method > .btn { width: 100%; margin: 16px 0 10px; }
.card-method > .muted { font-size: 13px; }
.card-method > .admin-note { margin-top: 12px; }
.card-method #cardFlow { margin-top: 16px; }
.saved-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin: 8px 0; border-radius: 16px; font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.saved-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--g500); background: var(--mint-50); }
.saved-card .billing-actions { width: 100%; margin-top: 6px; }
.saved-card .billing-actions input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 12px; font: inherit; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.renewal-section > .muted { font-size: 13.5px; }
.renewal-section > .btn { margin-top: 14px; }
.renewal-section > .billing-note { margin-top: 8px; }
.grace-note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; margin-top: 18px; border-radius: 20px; background: var(--mint-50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g500) 18%, transparent); }
.grace-note > svg { width: 40px; height: 40px; padding: 10px; border-radius: 13px; color: var(--g500); background: var(--mint-100); }
.grace-note strong { font-size: 14px; color: var(--text); }
.grace-note p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* Historial de pagos */
.payment-history { display: grid; }
.payment-history-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 10px; margin: 0 -10px; border-radius: 18px; transition: background-color .2s var(--ease); }
.payment-history-row + .payment-history-row { border-top: 1px solid var(--line); }
.payment-history-row:hover { background: var(--surface-2); }
.history-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--g500); background: var(--mint-100); }
.history-icon svg { width: 21px; height: 21px; }
.history-main { min-width: 0; }
.history-main strong { font-size: 14.5px; font-weight: 800; color: var(--text); }
.history-main small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.review-note { margin-top: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--surface-3); overflow-wrap: anywhere; }
.history-status { display: flex; align-items: center; gap: 10px; }
.history-status > strong { font-size: 15.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.history-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* ═══ Administración ═══════════════════════════════════════════════════ */

.admin-skip { position: fixed; left: 16px; top: -80px; z-index: 90; padding: 12px 18px; border-radius: 14px; font-weight: 800; color: var(--text); background: var(--surface); box-shadow: var(--sh-3); }
.admin-skip:focus { top: 12px; }
.admin-arranque { display: grid; place-content: center; justify-items: center; gap: 18px; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; text-align: center; }
.admin-arranque .brand-word small { letter-spacing: .24em; }
.admin-loading { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 700; color: var(--text-3); }
.admin-loading .spinner { width: 18px; height: 18px; border-color: color-mix(in srgb, var(--g500) 25%, transparent); border-top-color: var(--g500); }
#adminContent > .admin-loading { display: flex; justify-content: center; padding: 40px 16px; }
.admin-error { max-width: 460px; }
.admin-arranque-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.admin-workspace [aria-busy='true'] { opacity: .55; transition: opacity .25s var(--ease); }
#errorSlot .alert { margin-bottom: 18px; }
.count-hot { color: #1F1204 !important; background: linear-gradient(135deg, var(--o300), var(--o500)) !important; }

/* Cifras de arriba */
.admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.admin-kpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 22px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); animation: cq-rise .75s var(--ease) both; transition: box-shadow .35s var(--ease); }
.admin-kpi:nth-child(2) { animation-delay: 60ms; }
.admin-kpi:nth-child(3) { animation-delay: 120ms; }
.admin-kpi:nth-child(4) { animation-delay: 180ms; }
.admin-kpi:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }
.admin-kpi > div { min-width: 0; }
.metric-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; color: var(--g500); background: color-mix(in srgb, var(--g500) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g500) 16%, transparent); }
.metric-icon svg { width: 21px; height: 21px; }
.metric-label { display: block; font-size: 13.5px; font-weight: 800; color: var(--text-2); }
.admin-kpi b { display: block; margin: 6px 0 2px; font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-kpi small { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--text-3); }
.admin-kpi.needs-review { background: linear-gradient(160deg, var(--o50), var(--surface) 70%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--o500) 40%, transparent), var(--sh-1); }
.admin-kpi.needs-review .metric-icon { color: var(--o600); background: var(--o100); box-shadow: none; }
.admin-kpi.needs-review b { color: var(--o700); }

/* Pagos por verificar */
.payment-notifications { margin-bottom: 22px; padding: 22px 24px 18px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); animation: cq-rise .75s .24s var(--ease) both; }
.payment-notifications:has(.notification-heading) { background: linear-gradient(170deg, var(--o50), var(--surface) 55%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--o500) 30%, transparent), var(--sh-1); }
.notification-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.notification-heading h2 { font-size: 18px; font-weight: 600; }
.notification-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #1F1204; background: linear-gradient(135deg, var(--o300), var(--o500)); animation: cq-pulse 2.4s infinite; }
.notification-columns, .notification-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.notification-columns { padding: 0 2px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); }
.notification-columns span:last-child { text-align: right; }
.notification-items { display: grid; }
.notification-item { padding: 14px 2px; }
.notification-item + .notification-item { border-top: 1px solid var(--line); }
.notification-detail { min-width: 0; }
.notification-detail strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
.notification-detail small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.notification-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.notification-footer p { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.admin-all-clear { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; }
.admin-all-clear > svg { width: 44px; height: 44px; padding: 11px; border-radius: 14px; color: var(--g500); background: var(--mint-100); }
.admin-all-clear strong { font-size: 15px; font-weight: 800; color: var(--text); }
.admin-all-clear p { margin-top: 2px; font-size: 13px; color: var(--text-3); }

/* Persona (avatar + nombre) en listas y tablas */
.admin-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-person > div { min-width: 0; overflow-wrap: anywhere; }
.admin-person strong { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.admin-person small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.admin-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--e900); background: linear-gradient(135deg, var(--mint-200), var(--mint)); }
.cq[data-theme='oscuro'] .admin-avatar { color: var(--e900); }

/* Resumen: cobros y plan */
.admin-overview-bottom { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 22px; align-items: start; animation: cq-rise .75s .3s var(--ease) both; }
.integration-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; }
.integration-row + .integration-row { border-top: 1px solid var(--line); }
.billing-card > h2 + .integration-row { margin-top: 8px; }
.integration-copy { min-width: 0; }
.integration-row h3 { font-family: var(--f-ui); font-size: 14.5px; font-weight: 800; }
.integration-row p { margin-top: 2px; font-size: 13px; }
.admin-plan { position: relative; overflow: hidden; isolation: isolate; padding: 24px 26px; border-radius: 30px; color: #fff; background: radial-gradient(100% 80% at 100% 0%, rgba(91, 227, 166, .22), transparent 60%), linear-gradient(160deg, #06382A 0%, #04261C 50%, #021A13 100%); box-shadow: 0 30px 60px -30px rgba(2, 26, 19, .75); }
.admin-plan h2 { font-size: 15px; font-weight: 800; font-family: var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--mint-200) 80%, transparent); }
.admin-plan-price { margin: 12px 0 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; }
.admin-plan-price span { font-size: 15px; font-weight: 700; letter-spacing: 0; color: color-mix(in srgb, var(--mint-200) 75%, transparent); }
.admin-plan-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.admin-plan-duo p { min-width: 0; }
.admin-plan-duo span { display: block; font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--mint-200) 85%, transparent); }
.admin-plan-duo b { display: block; margin-top: 6px; font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; white-space: nowrap; color: #fff; }
.admin-plan-duo small { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--mint-200) 75%, transparent); }
.admin-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-self: start; }
.plan-term { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.plan-term svg { width: 34px; height: 34px; padding: 8px; border-radius: 11px; color: var(--mint); background: rgba(91, 227, 166, .15); }
.plan-term strong { font-size: 14.5px; font-weight: 700; }
.admin-plan > p:last-child { margin-top: 16px; font-size: 13px; line-height: 1.55; color: color-mix(in srgb, var(--mint-200) 80%, transparent); }

/* Barras de herramientas, búsqueda y filtros */
.admin-data-card { animation: cq-rise .75s .08s var(--ease) both; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.admin-toolbar h2 { font-size: 18px; font-weight: 600; }
.admin-toolbar p { margin-top: 4px; font-size: 13px; }
.admin-search { display: flex; align-items: center; gap: 8px; }
.admin-search label { position: relative; display: block; }
.admin-search svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-3); pointer-events: none; }
.admin-search input { width: 280px; height: 44px; padding: 0 16px 0 42px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); outline: none; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.admin-search input:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--g500), 0 0 0 5px color-mix(in srgb, var(--g500) 14%, transparent); }
.admin-filter { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--text-2); }
.admin-filter select { height: 40px; padding: 0 34px 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--text-2); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356695F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; box-shadow: inset 0 0 0 1.5px var(--line); -webkit-appearance: none; appearance: none; cursor: pointer; }

/* Tablas */
.table-scroll { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.billing-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.billing-table th { padding: 10px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-align: left; text-transform: uppercase; white-space: nowrap; color: var(--text-3); border-bottom: 1px solid var(--line-2); }
.billing-table td { padding: 14px 12px; vertical-align: middle; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.billing-table tr:last-child td { border-bottom: 0; }
.billing-table tbody tr { transition: background-color .2s var(--ease); }
.billing-table tbody tr:hover td { background: var(--surface-2); }
.billing-table tbody tr td:first-child { border-radius: 14px 0 0 14px; }
.billing-table tbody tr td:last-child { border-radius: 0 14px 14px 0; }
.billing-table td[data-label=''] { text-align: right; }
.billing-table td small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.billing-table .amount { font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.billing-table .admin-avatar { width: 34px; height: 34px; font-size: 13.5px; }
.order-id { padding-left: 46px; }
.admin-page-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--text-3); }

/* Cuentas bancarias */
.admin-bank-list { display: grid; margin: 8px 0 14px; }
.admin-bank-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 12px; margin: 0 -12px; border-radius: 20px; transition: background-color .2s var(--ease); }
.admin-bank-row + .admin-bank-row { border-top: 1px solid var(--line); }
.admin-bank-row:hover { background: var(--surface-2); }
.admin-bank-row .bank-mark { width: 52px; height: 52px; }
.admin-bank-details { min-width: 0; }
.admin-bank-details h3 { font-family: var(--f-ui); font-size: 15.5px; font-weight: 800; }
.admin-bank-details p { font-size: 13px; font-weight: 600; color: var(--text-2); }
.admin-bank-details small { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.admin-bank-details .admin-bank-number { margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: .06em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-bank-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

/* Ventanas de la administración */
dialog.admin-dialog .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#actionFields > h2 { margin-bottom: 8px; font-size: 22px; font-weight: 600; outline: none; }
#actionFields > p { margin-top: 6px; font-size: 14px; color: var(--text-2); }
#actionFields > p:first-of-type { font-weight: 800; color: var(--text); }
#actionFields > .field { margin-top: 16px; }
#actionFields > .billing-note { margin-top: 12px; }
#actionFields .field > span, #authForm .field > span { display: block; margin-bottom: 7px; }
dialog.admin-dialog .billing-actions { flex-direction: row-reverse; justify-content: flex-start; margin-top: 20px; }
dialog.admin-dialog #actionError, dialog.admin-dialog #authError { margin: 14px 0 0; }
.review-reject { color: #fff !important; background: #D2432F !important; box-shadow: 0 10px 22px -12px rgba(184, 50, 31, .8) !important; }

/* Revisar un pago: ventana ancha con el comprobante a la izquierda */
dialog.payment-review-dialog { width: min(1120px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: hidden; }
.payment-review-dialog #actionForm { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); padding: 0; }
.payment-review-dialog #actionFields { display: flex; flex-direction: column; min-height: 0; }
.review-header { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); flex: none; }
.review-header h2 { margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; outline: none; }
.review-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--o700); }
.cq[data-theme='oscuro'] .review-eyebrow { color: var(--o300); }
.review-total { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.review-total > strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.review-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 13px; font-size: 24px; line-height: 1; color: var(--text-2); background: transparent; cursor: pointer; transition: background-color .2s var(--ease); }
.review-close:hover { color: var(--text); background: var(--surface-3); }
.review-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, 1fr); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.review-document { min-width: 0; padding: 20px; background: var(--surface-2); border-right: 1px solid var(--line); }
.review-document-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.review-document-heading h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.review-document-heading svg { width: 19px; height: 19px; color: var(--g500); }
.review-original { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--o700) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cq[data-theme='oscuro'] .review-original { color: var(--o300) !important; }
.receipt-stage { position: relative; height: clamp(300px, calc(100dvh - 300px), 560px); padding: 14px; overflow: auto; overscroll-behavior: contain; border-radius: 20px; text-align: center; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.receipt-stage .review-receipt-image { display: block; width: 100%; height: 100%; max-width: none; margin: 0 auto; object-fit: contain; border-radius: 10px; }
.receipt-stage .review-receipt-image[hidden] { display: none; }
.receipt-stage.receipt-expanded .review-receipt-image { height: auto; object-fit: initial; }
.receipt-image-status { padding: 32px 16px; font-size: 13.5px; color: var(--text-3); }
.receipt-view-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.receipt-file-state { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 300px; padding: 28px; border-radius: 20px; text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.receipt-file-state > svg { width: 56px; height: 56px; padding: 14px; border-radius: 18px; color: var(--o600); background: var(--o100); }
.receipt-file-state strong { font-size: 16px; color: var(--text); }
.receipt-file-state p { max-width: 32ch; font-size: 13.5px; color: var(--text-3); }
.review-details { min-width: 0; padding: 20px 24px; }
.review-customer { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.review-label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.review-customer > strong { margin-top: 2px; font-family: var(--f-display); font-size: 20px; font-weight: 600; color: var(--text); }
.review-customer > span:last-child { font-size: 13px; font-weight: 600; color: var(--text-3); }
.review-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.review-facts > div { min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.review-facts dt { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.review-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.review-bank { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.review-bank > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.review-bank strong { font-size: 14px; font-weight: 800; color: var(--text); }
.review-bank span { font-size: 13px; font-weight: 700; color: var(--text-2); }
.review-bank small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.review-previous-note { margin-top: 16px; overflow-wrap: anywhere; }
.review-previous-note p { margin-top: 4px; font-size: 14px; color: var(--text-2); white-space: pre-wrap; }
.review-decision { display: grid; gap: 8px; min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.review-decision legend { margin-bottom: 10px; padding: 0; font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--text); }
.review-decision label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.review-decision label:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.review-decision label:has(input[value='approve']:checked) { background: var(--mint-50); box-shadow: inset 0 0 0 2px var(--g500); }
.review-decision label:has(input[value='reject']:checked) { background: var(--r100); box-shadow: inset 0 0 0 2px var(--r500); }
.review-decision input, .review-bank-confirm input { width: 20px; height: 20px; margin: 0; accent-color: var(--g500); }
.review-decision label span { display: flex; flex-direction: column; gap: 2px; }
.review-decision strong { font-size: 14px; font-weight: 800; color: var(--text); }
.review-decision small { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.review-bank-confirm { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--a100); cursor: pointer; animation: cq-sheet .4s var(--spring) both; }
.review-bank-confirm[hidden] { display: none; }
.review-bank-confirm input { margin-top: 1px; }
.review-details > .review-note { margin-top: 18px; padding: 0; background: none; }
.review-details > .review-note small { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.payment-review-dialog .billing-actions { flex: none; margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.payment-review-dialog #actionError { flex: none; margin: 0; border-radius: 0; }

/* ═══ Celular y tabletas ═══════════════════════════════════════════════ */
.tab-ico { position: relative; display: inline-grid; }
.tab-count { position: absolute; top: -6px; right: -12px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #1F1204; background: linear-gradient(135deg, var(--o300), var(--o500)); box-shadow: 0 0 0 2px var(--surface); }
.admin-tabbar .tab { position: relative; }

@media (max-width: 1250px) and (min-width: 1100px) {
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .pagina-suscripcion .main { padding-bottom: 32px; }
  .topbar-sub { font-size: 13.5px; }
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
  .admin-overview-bottom, .subscription-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .subscription-layout { margin: 14px 0; }
  .subscription-primary, .subscription-secondary { gap: 14px; }
  .payment-notifications { margin-bottom: 14px; padding: 18px 18px 14px; border-radius: 24px; }
  .billing-card { padding: 18px 18px 20px; border-radius: 24px; }
  .plan-card { padding: 22px 22px; border-radius: 26px; }
  .plan-picker { margin-top: 14px; padding: 18px 18px 20px; border-radius: 24px; }
  .admin-tabbar .tab { font-size: 10px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .subscription-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .plan-card { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; }
  .plan-state { grid-column: 1 / -1; padding: 0; border: 0; }
  .plan-card .price { padding-left: 0; border: 0; font-size: 32px; align-self: start; text-align: right; }
  .plan-card .price small { display: block; margin-top: 4px; }
}
@media (max-width: 640px) {
  .plan-options { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .plan-card { grid-template-columns: minmax(0, 1fr); }
  .plan-card .price { text-align: left; }
  .plan-card .price small { display: inline; }
  .plan-card .price-plan { text-align: left; }
  .plan-option { padding: 16px; gap: 12px 10px; }
  .plan-perks { grid-column: 1 / -1; }
  .history-amount { display: flex; flex-direction: column; align-items: flex-end; }
  .history-plan { font-size: 12px; color: var(--text-3); }
  .history-sep { display: none; }
  .recipient-bank { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; }
  .recipient-bank .bank-mark { width: 44px; height: 44px; }
  .account-copy { grid-column: 1 / -1; justify-content: space-between; padding: 8px 4px 0; border-top: 1px dashed var(--line-2); }
  .account-copy input { flex: 1; width: auto; text-align: left; font-size: 18px; }
  .transfer-fields { grid-template-columns: minmax(0, 1fr); }
  .transfer-fields .field:last-child { max-width: none; }
  .receipt-drop { justify-content: flex-start; padding: 18px 16px; }
  .submit-receipt { flex-direction: column; align-items: stretch; gap: 10px; }
  .submit-receipt > .btn { width: 100%; }
  .payment-history-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .history-icon { width: 40px; height: 40px; }
  .history-status { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 6px; }
  .history-links { grid-column: 2 / -1; justify-content: flex-start; }
  .admin-kpi { padding: 16px; gap: 8px; }
  .admin-kpi b { font-size: 26px; }
  .metric-label { font-size: 12.5px; }
  .admin-kpi small { font-size: 11.5px; }
  .notification-columns { display: none; }
  .notification-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .notification-item .admin-person { grid-column: 1 / -1; }
  .notification-detail { padding-left: 50px; }
  .admin-toolbar { align-items: stretch; }
  .admin-search { width: 100%; }
  .admin-search label { flex: 1; min-width: 0; }
  .admin-search input { width: 100%; font-size: 16px; }
  .admin-filter select { font-size: 16px; }
  .integration-row { grid-template-columns: 42px minmax(0, 1fr); }
  .integration-row > .pill, .integration-row > .admin-small-btn { grid-column: 2; justify-self: start; }
  .admin-bank-row { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .admin-bank-row .bank-mark { width: 44px; height: 44px; }
  .admin-bank-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }

  /* Tablas como fichas en el celular */
  .table-scroll { overflow: visible; margin: 0; padding: 0; }
  .billing-table, .billing-table tbody { display: block; width: 100%; }
  .billing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .billing-table tr { display: block; padding: 14px 0; }
  .billing-table tr + tr { border-top: 1px solid var(--line); }
  .billing-table td { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 0; border: 0; text-align: left !important; }
  .billing-table td::before { content: attr(data-label); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .billing-table td:first-child { display: block; padding-bottom: 10px; }
  .billing-table td:first-child::before, .billing-table td[data-label='']::before { display: none; }
  .billing-table td[data-label=''] { display: flex; justify-content: flex-end; }
  .billing-table td small { grid-column: 2; margin: 0; }
  .billing-table td .pill { justify-self: start; }
  .billing-table tbody tr:hover td { background: none; }

  /* Revisión de pago como hoja inferior */
  dialog.payment-review-dialog { width: 100%; max-height: 94dvh; }
  .payment-review-dialog #actionForm { max-height: 94dvh; padding: 0; }
  .review-header { position: relative; flex-wrap: wrap; gap: 8px 12px; padding: 16px 60px 14px 18px; }
  .review-header h2 { font-size: 21px; }
  .review-total { width: 100%; margin-left: 0; }
  .review-total > strong { font-size: 22px; }
  .review-close { position: absolute; top: 14px; right: 14px; }
  .review-body { grid-template-columns: minmax(0, 1fr); }
  .review-document { padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .receipt-stage { height: 320px; }
  .review-details { padding: 16px 18px; }
  .review-facts { grid-template-columns: minmax(0, 1fr); }
  .payment-review-dialog .billing-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .payment-review-dialog .billing-actions .btn { flex: 1; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .review-body { grid-template-columns: minmax(0, 1fr); }
  .review-document { border-right: 0; border-bottom: 1px solid var(--line); }
  .receipt-stage { height: 360px; }
}
@media (hover: none) {
  .recipient-bank:hover, .billing-table tbody tr:hover td, .admin-bank-row:hover, .payment-history-row:hover { background: inherit; box-shadow: inherit; }
}

/* ═══ Plan y acceso (28/09): cortesía y plan fijado por la administración ═══ */
.pill.cortesia { color: var(--o700); background: var(--o100); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o500) 30%, transparent); }
.plan-fijado { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.admin-row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#actionFields .admin-choice { display: grid; gap: 8px; min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
#actionFields .admin-choice legend { margin-bottom: 8px; padding: 0; font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--text); }
.admin-choice > label:not(.field) { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.admin-choice > label:not(.field):hover { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.admin-choice > label:has(input:checked) { background: var(--mint-50); box-shadow: inset 0 0 0 2px var(--g500); }
.admin-choice input[type='radio'] { width: 20px; height: 20px; margin: 0; accent-color: var(--g500); }
.admin-choice span { display: flex; flex-direction: column; gap: 2px; }
.admin-choice strong { font-size: 14px; font-weight: 800; color: var(--text); }
.admin-choice small { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
#actionFields .admin-choice-date { margin: 0 0 2px 36px; }
.admin-choice-date > span { display: block; margin-bottom: 6px; font-size: 12.5px; }
.admin-choice-date input { width: min(220px, 100%); }
.admin-choice-date.is-off { opacity: .55; }
/* Mi suscripción con cortesía: el plan en lugar del precio. */
.plan-card .price.is-cortesia .price-name { font-size: 28px; letter-spacing: -.02em; }
.plan-card .price.is-cortesia .price-note { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-align: right; color: color-mix(in srgb, var(--mint-200) 80%, transparent); }
@media (max-width: 560px) { .plan-card .price.is-cortesia .price-note { text-align: left; } }

/* «No aprobar» en un toque (22/10). */
.review-quick{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.review-quick-reject{width:100%;min-height:46px;border:1px solid #E5B2A9;border-radius:12px;background:#FFF1EE;color:#A93828;font-weight:800;font-size:14px;cursor:pointer}
.review-quick-reject:hover{background:#FDE3DD}
.review-quick small{font-size:11px;color:#59756C;text-align:center}
.review-reasons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.review-reasons .review-label{width:100%}
.review-reason{border:1px solid #D7E3DC;background:#fff;color:#053526;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer}
.review-reason.is-on{border-color:#A93828;background:#FFF1EE;color:#A93828}