/* ─── SUBSCRIPTION CONFLICT MODAL ─── */
#subscriptionConflictModal .modal { max-width: 460px; }
.sub-conflict-body { color: var(--fg); margin-top: 12px; line-height: 1.6; }
.sub-conflict-note { color: var(--muted); margin-top: 4px; font-size: 13px; }
.sub-conflict-actions {
display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;
}
.sub-conflict-actions .btn-primary,
.sub-conflict-actions .btn-ghost {
padding: 12px 20px; border-radius: 8px;
font-family: var(--f-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; border: 1px solid transparent;
transition: opacity .2s, background .2s, border-color .2s;
}
.sub-conflict-actions .btn-primary { background: var(--accent); color: #fff; }
.sub-conflict-actions .btn-primary:hover { opacity: 0.88; }
.sub-conflict-actions .btn-ghost {
background: transparent; color: var(--fg); border-color: var(--b1);
}
.sub-conflict-actions .btn-ghost:hover { border-color: var(--b2); }
@media (max-width: 480px) {
.sub-conflict-actions { flex-direction: column-reverse; align-items: stretch; }
}
/* ============================================================
* Tier rack + tier-card holográficas (account, future surfaces)
* ============================================================ */
.tier-rack {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
perspective: 1000px;
}
@media (min-width: 700px) {
.tier-rack { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1050px) {
.tier-rack { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.tier-rack__note {
margin: 1.25rem 0 0;
font-size: .85rem;
color: var(--muted);
font-style: italic;
line-height: 1.5;
}
.tier-card {
position: relative;
background-image: linear-gradient(135deg, rgb(130 49 255 / 49.5%), rgb(244 244 244), rgb(99 7 230 / 49.5%));
background-size: 300% 300%;
border: 2px solid #ae64f4;
border-radius: 20px;
color: var(--fg);
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.25rem;
transition: transform .2s ease, box-shadow .3s ease, filter .3s ease, background-position .3s ease;
transform-style: preserve-3d;
backdrop-filter: blur(10px);
will-change: transform, background-position;
isolation: isolate;
overflow: hidden;
}
.tier-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-image: radial-gradient(
rgba(130,49,255,.10) 1px,
transparent 1px
);
background-size: 12px 12px;
pointer-events: none;
z-index: 0;
}
.tier-card > * {
position: relative;
z-index: 1;
}
/* Badge: color semántico por data-mode / data-direction (los atributos los
escribe tier-card.twig). El modo 'select' no renderiza badge desde Twig,
así que no necesita regla. */
.tier-card__badge {
display: inline-block;
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
}
.tier-card[data-direction="upgrade"] .tier-card__badge { background: rgba(0,255,200,.18); color: #aef6e3; }
.tier-card[data-direction="downgrade"] .tier-card__badge { background: rgba(255,180,60,.18); color: #ffd9a1; }
.tier-card[data-mode="current"] .tier-card__badge { background: rgba(130,49,255,.18); color: #d8c3ff; }
.tier-card__name { font-family: Georgia, serif; font-size: 2rem; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
.tier-card__price { font-family: 'IBM Plex Mono', monospace; font-size: 1.6rem; font-weight: 500; margin: 0; letter-spacing: -0.02em; }
.tier-card__period { opacity: .55; font-size: 1rem; font-weight: 400; }
.tier-card__desc { font-size: .85rem; opacity: .75; margin: 0; line-height: 1.5; max-width: 28ch; }
.tier-card__meta { font-size: .75rem; opacity: .65; margin: 4px 0 0; letter-spacing: .02em; }
.tier-card__date { font-family: 'IBM Plex Mono', monospace; font-size: .9rem; letter-spacing: .02em; margin: 0; }
.tier-card__date-block { display: flex; flex-direction: column; gap: 2px; }
.tier-card__pending { font-size: .8rem; opacity: .6; font-style: italic; margin: 4px 0 0; line-height: 1.4; }
/* Única variante: el plan actual queda apagado. Sobrescribe el borde y
gradiente púrpura de la base. */
.tier-card--current {
border-color: rgba(130,49,255,.20);
background-image: linear-gradient(135deg, rgba(130,49,255,.12), rgba(130,49,255,.03));
background-size: 100% 100%;
filter: saturate(.1);
box-shadow: none !important;
}
/* Reflejo localizado en el CTA — aplica a todas las cards (excepto
current, que no renderiza CTA porque su botón es de cancelar y no
.tier-card__cta). Reutiliza --mx / --my que account-tier-focus.js
escribe en la propia .tier-card. */
.tier-card__cta {
position: relative;
margin-top: .5rem;
align-self: center;
}
.tier-card__cta::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 2;
pointer-events: none;
background-image: linear-gradient(135deg, rgb(130 49 255), rgb(244 244 244 / 38%), rgb(99 7 230 / 49.5%));
background-size: 300% 300%;
background-position: var(--mx, 50%) var(--my, 50%);
mix-blend-mode: color-dodge;
opacity: 0;
transition: background-position .3s ease, opacity .2s ease;
-webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.5) 55%, transparent 80%);
mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.5) 55%, transparent 80%);
}
.tier-card:hover .tier-card__cta::after {
opacity: .7;
}
/* Glow direccional condicionado a foco. La base usa el lila claro
(#a790f1) que ya era el glow unificado de upgrade/downgrade.
--current se mantiene sin glow. */
.tier-card.is-focused { box-shadow: 0 0 30px #a790f1; }
.tier-card--current.is-focused { box-shadow: none; }
/* ============================================================
* /account — Shell: sidebar + panel + tabs
* ============================================================ */
/* Top padding fijo (clear del nav fijo); laterales/bottom fluidos.
El clamp(7rem,4vw,3rem) anterior era inválido (max < min). */
.account-main {
padding: 7rem clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
min-height: 100vh;
}
.account-container {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 900px) {
.account-container { grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
.account-sidebar { position: sticky; top: 6rem; }
}
.account-sidebar { display: flex; flex-direction: column; gap: 2rem; }
.account-sidebar__head { display: flex; flex-direction: column; gap: .25rem; }
.account-sidebar__data { display: flex; flex-direction: column; gap: .5rem; }
.account-sidebar__actions { display: flex; flex-direction: column; gap: .5rem; }
/* ── "Tus datos" — lista vertical tipográfica ── */
.account-data {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.account-data[hidden] { display: none; }
.account-data__field {
display: flex;
flex-direction: column;
gap: 2px;
}
.account-data__label {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.account-data__value {
font-size: 0.9rem;
color: var(--fg);
line-height: 1.4;
}
/* Toggle colapsable móvil para "Tus datos" */
.account-data-toggle {
display: none;
background: none;
border: none;
padding: 0 4px;
font-size: 14px;
color: var(--muted);
cursor: pointer;
transition: transform .2s, color .15s;
line-height: 1;
}
.account-data-toggle:hover { color: var(--fg); }
.account-data-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
@media (max-width: 899px) {
.account-data-toggle { display: inline-block; }
.account-data-toggle[hidden] { display: none; }
}
.account-edit-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 0;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
transition: color .15s;
margin-top: .5rem;
}
.account-edit-btn::before {
content: "✎";
font-size: 12px;
}
.account-edit-btn:hover { color: var(--accent); }
/* ── Modal "Editar tus datos" ── */
.edit-account-modal { max-width: 440px; position: relative; }
/* Botón pequeño superior derecho que conmuta a la vista de confirmar borrado.
Discreto en reposo (--muted), color danger en hover/focus. */
.edit-account-modal__delete-link {
position: absolute;
top: 14px;
right: 20px;
z-index: 1;
background: transparent;
border: 0;
padding: 4px 6px;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
transition: color 160ms ease;
}
.edit-account-modal__delete-link:hover,
.edit-account-modal__delete-link:focus-visible {
color: #f87171;
outline: none;
}
/* Vistas conmutables dentro del modal (edit ↔ delete) con fade */
.edit-account-modal__view {
opacity: 0;
transition: opacity 180ms ease;
}
.edit-account-modal__view.is-active { opacity: 1; }
.edit-account-modal__view[hidden] { display: none; }
/* En la vista de confirmar borrado escondemos el botón pequeño:
ya estás dentro de esa acción, no tiene sentido ofrecerla otra vez */
.edit-account-modal[data-view="delete"] .edit-account-modal__delete-link { display: none; }
.edit-account-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.edit-account-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.edit-account-label {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.edit-account-input {
background: transparent;
border: none;
border-bottom: 1px solid var(--b1);
padding: 10px 0;
font-family: system-ui, sans-serif;
font-size: 0.9rem;
color: var(--fg);
transition: border-color .15s;
outline: none;
border-radius: 0;
}
.edit-account-input:focus { border-bottom-color: var(--accent); }
.edit-account-input::placeholder { color: rgba(237,233,220,.2); }
.edit-account-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.modal-success {
font-family: var(--f-mono);
font-size: 10px;
color: #4ade80;
text-align: center;
margin: 0;
}
.modal-success[hidden] { display: none; }
.account-panel { min-width: 0; } /* permite que el grid no haga overflow */
.account-tabs { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 20px; }
.account-tabs__head { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.account-tabs__tab {
background: none;
border: 0;
padding: .75rem 1.25rem;
color: var(--muted);
font-family: 'IBM Plex Mono', monospace;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .85rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .2s, border-color .2s;
}
.account-tabs__tab:hover { color: var(--fg); }
.account-tabs__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.account-tabs__panel[hidden] { display: none; }
/* ============================================================
* .btn--liquid — Píldora "liquid metal" alineada con la referencia real
* (codepen Majoramari/pvbzpoa con ShaderMount de @paper-design/shaders).
*
* Estructura DOM:
*
*
* Capas visuales (z-stack):
* 0. .btn--liquid background : chrome fallback estático (gris cromado),
* visible cuando el shader no carga (móvil, fallo de red, no-WebGL).
* 1. .btn--liquid__shader : canvas WebGL liquid-metal, fills el outer.
* Solo desktop pointer:fine. Se monta lazy en el primer hover.
* Opacity 0 por defecto → 1 al hover/focus o card .is-focused.
* 2. .btn--liquid__core : pill interior oscura con el texto. Cubre
* el centro del shader; lo que queda alrededor es el "anillo metal".
*
* El padding del outer button (.4rem) define el grosor del anillo.
*
* Móvil (hover:none) y prefers-reduced-motion nunca cargan WebGL —
* el chrome fallback + core oscuro es el visual final ahí.
* ============================================================ */
.btn--liquid {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: .2rem;
border-radius: 999px;
border: 0;
/* Chrome estático: gradiente plata → grafito → plata para el anillo
visible cuando no hay shader cargado. */
background:
linear-gradient(135deg,
#d8d8d8 0%, #6c6c6c 25%, #2a2a2a 50%,
#6c6c6c 75%, #d8d8d8 100%);
color: #fff;
cursor: pointer;
overflow: hidden;
isolation: isolate;
/* Sombra externa para despegarlo del fondo, como en la referencia. */
box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .55), 0 0 5px 1px rgb(149 149 149 / 60%);
transition: transform .15s ease;
}
/* Capa 1 — canvas WebGL del shader (la inserta btn-liquid-shader.js) */
.btn--liquid__shader {
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity .4s ease;
overflow: hidden;
}
/* ShaderMount inserta el