@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #eaf6ff;
    background: #05060c;
    --background: #05060c;
    --surface: rgba(14, 18, 32, 0.72);
    --surface-alt: rgba(10, 13, 24, 0.85);
    --surface-hover: rgba(24, 30, 50, 0.85);
    --border: rgba(0, 240, 255, 0.16);
    --border-strong: rgba(0, 240, 255, 0.4);
    --text: #eaf6ff;
    --muted: #8b9bc0;
    --accent: #00f0ff;
    --accent-soft: rgba(0, 240, 255, 0.16);
    --accent-hover: #43f8ff;
    --accent-2: #ff2ec4;
    --accent-2-soft: rgba(255, 46, 196, 0.16);
    --success: #39ff9d;
    --danger: #ff3b6b;
    --heading-font: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
    word-break: break-word;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 10% -5%, rgba(0, 240, 255, 0.16), transparent 34rem),
        radial-gradient(circle at 92% 8%, rgba(255, 46, 196, 0.14), transparent 30rem),
        radial-gradient(circle at 50% 110%, rgba(124, 92, 255, 0.12), transparent 36rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 34px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 34px),
        var(--background);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5 {
    font-family: var(--heading-font);
    letter-spacing: 0.01em;
}

::selection {
    color: #04121a;
    background: var(--accent);
}

::-webkit-scrollbar {
    width: 0.7rem;
    height: 0.7rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: rgba(0, 240, 255, 0.25);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 240, 255, 0.45);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    position: relative;
    border: 0;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25), 0 8px 24px rgba(0, 240, 255, 0.16);
}

button:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.4), 0 0 22px rgba(0, 240, 255, 0.45), 0 0 40px rgba(255, 46, 196, 0.25);
}

button,
.message-card,
.back-button,
input,
select,
textarea,
.status,
.counter {
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease, filter 160ms ease, color 160ms ease;
}

button.secondary {
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
    box-shadow: none;
}

button.secondary:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
    filter: none;
}

button.active {
    cursor: default;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.55), 0 0 26px rgba(0, 240, 255, 0.55);
}

button:disabled {
    cursor: default;
    opacity: 0.6;
    filter: none;
}

/* Barra fija arriba de la página: aparece al enviar un formulario de
   búsqueda (Email / Rastreo) y queda animando hasta que llega la respuesta
   (la navegación de página completa la reemplaza sola). */
.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.loading-bar.is-active {
    opacity: 1;
}

.loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
    animation: loading-bar-sweep 1.1s ease-in-out infinite;
}

@keyframes loading-bar-sweep {
    0% { left: -40%; }
    100% { left: 100%; }
}

button.is-loading {
    color: transparent !important;
    pointer-events: none;
}

button.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin: -0.55rem 0 0 -0.55rem;
    border: 2px solid rgba(4, 18, 26, 0.35);
    border-top-color: #04121a;
    border-radius: 50%;
    animation: button-spin 0.7s linear infinite;
}

button.secondary.is-loading::after {
    border-color: rgba(0, 240, 255, 0.25);
    border-top-color: var(--accent);
}

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem;
    color: var(--text);
    background: rgba(4, 6, 14, 0.7);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    outline: 3px solid var(--accent-soft);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

input::placeholder,
textarea::placeholder {
    color: #5b6b8c;
}

textarea {
    min-height: 8.5rem;
    resize: vertical;
    line-height: 1.5;
}

label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 650;
}

.login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1rem;
    padding-bottom: 3.5rem;
}

.login-page .login-card {
    margin: auto;
}

.login-card,
.search-card,
.message-card,
.empty-state,
.mail-view {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 240, 255, 0.05);
}

.login-card {
    width: min(100%, 26rem);
    padding: 2rem;
}

.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    color: var(--muted);
    font-size: 0.82rem;
    background: rgba(5, 6, 12, 0.82);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-footer-social {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.site-footer-social-label {
    color: var(--muted);
    font-weight: 650;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
    transition: color 140ms ease, filter 140ms ease;
}

.social-link:hover {
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.5));
}

.social-link svg {
    flex: none;
}

.site-footer img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.site-footer strong {
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.login-card h1,
.topbar h1 {
    margin: 0;
}

.login-card form {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.login-card form button {
    margin-top: 0.5rem;
}

.eyebrow {
    margin: 0 0 0.25rem;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.muted {
    color: var(--muted);
}

.topbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    padding: 1.1rem max(1rem, calc((100% - 70rem) / 2));
    background: rgba(5, 6, 12, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(0, 240, 255, 0.12);
}

.topbar h1 {
    font-size: 1.35rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4));
}

.brand-text {
    font-family: var(--heading-font);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
    text-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
}

@media (max-width: 40rem) {
    .brand-logo {
        width: 2.25rem;
        height: 2.25rem;
    }

    .brand-text {
        font-size: 0.82rem;
        letter-spacing: 0.08em;
    }
}

.container {
    width: min(calc(100% - 2rem), 70rem);
    margin: 2.5rem auto;
    padding-bottom: 4rem;
}

.search-card {
    padding: 1.4rem;
}

.search-hint {
    margin: -0.15rem 0 0.85rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
}

.search-row--field {
    grid-template-columns: 1fr;
}

.search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

/* El combobox de correos asignados despliega su lista justo encima de estos
   botones; con el margen normal el panel abierto los tapa. */
.search-actions--spaced {
    margin-top: 4.5rem;
}

.search-actions button {
    flex: 1 1 auto;
}

.tracking-note {
    font-size: 0.82rem;
    font-style: italic;
}

.tracking-note--warning {
    color: #ff4d4f;
}

.tracking-textarea {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
}

.tracking-gofo-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    color: #1a1300;
    background: #ffbe00;
    font-size: 0.66rem;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.tracking-list {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.tracking-item {
    display: grid;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    backdrop-filter: blur(10px);
    transition: border-color 160ms ease, box-shadow 160ms ease;
    animation: tracking-item-in 260ms ease both;
}

.tracking-item:hover {
    border-color: var(--border-strong);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.1);
}

.tracking-item--gofo {
    border-left: 3px solid #ffbe00;
}

.tracking-item--gofo:hover {
    border-color: rgba(255, 190, 0, 0.55);
    box-shadow: 0 0 18px rgba(255, 190, 0, 0.12);
}

.tracking-item__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    min-width: 0;
}

.tracking-item__info {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.tracking-item__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tracking-item__code {
    overflow-wrap: anywhere;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    user-select: all;
}

.tracking-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tracking-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.tracking-gofo-go {
    border-radius: 0.7rem;
    color: #1a1300;
    background: linear-gradient(120deg, #ffd24d, #ffbe00);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(255, 190, 0, 0.35), 0 8px 22px rgba(255, 190, 0, 0.16);
    transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tracking-gofo-go:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px rgba(255, 190, 0, 0.55), 0 0 22px rgba(255, 190, 0, 0.35);
    transform: translateY(-1px);
}

.tracking-gofo-go:focus-visible,
.tracking-item__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Estado en vivo del envío GOFO (camión sobre la ruta) ---- */

.ship-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.ship-summary__chip {
    --chip: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--chip) 40%, transparent);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    color: var(--chip);
    background: color-mix(in srgb, var(--chip) 10%, transparent);
    font-size: 0.82rem;
    font-weight: 600;
}

.ship-summary__chip--delivered { --chip: var(--success); }
.ship-summary__chip--alert { --chip: #ffb020; }
.ship-summary__chip--returned { --chip: #b69cff; }

.ship {
    --ship-color: var(--accent);
    --ship-color-2: var(--accent-2);
    display: grid;
    gap: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 1rem 1.1rem 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--ship-color) 9%, transparent), transparent 60%),
        var(--surface-alt);
}

.ship--delivered { --ship-color: var(--success); --ship-color-2: #00d4a0; }
.ship--alert { --ship-color: #ffb020; --ship-color-2: #ff3b6b; }
.ship--returned { --ship-color: #b69cff; --ship-color-2: #7c5cff; }

.ship__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ship__status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ship-color);
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
}

.ship__pulse {
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--ship-color);
    box-shadow: 0 0 10px var(--ship-color);
}

.ship__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ship-color);
    animation: ship-pulse 1.8s ease-out infinite;
}

.ship--delivered .ship__pulse::after {
    animation: none;
}

.ship__eta {
    color: var(--muted);
    font-size: 0.85rem;
}

.ship__eta strong {
    color: var(--text);
}

/* La ruta va de la 1.ª a la 4.ª etapa: cada etapa ocupa una columna de
   ancho 25 %, así que el camino empieza y termina en el centro de la
   primera y la última columna (12.5 % de margen a cada lado). */
.ship__route {
    display: grid;
    gap: 0.6rem;
}

.ship__road {
    position: relative;
    height: 2.6rem;
    margin: 0 12.5%;
}

.ship__rail {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.4rem;
    border-radius: 999px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 0.6rem, transparent 0.6rem 1.1rem),
        rgba(255, 255, 255, 0.05);
    transform: translateY(-50%);
    overflow: hidden;
}

/* Posición del camión por etapa. Va en clases y no en style="" porque la
   CSP (style-src sin 'unsafe-inline') bloquea los estilos inline. */
.ship--stage-2 {
    --ship-progress: 33%;
}

.ship--stage-3 {
    --ship-progress: 67%;
}

.ship--stage-4 {
    --ship-progress: 100%;
}

.ship__fill {
    width: var(--ship-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 0.35rem, transparent 0.35rem 0.7rem),
        linear-gradient(90deg, var(--ship-color), var(--ship-color-2));
    background-size: 1rem 1rem, 100% 100%;
    box-shadow: 0 0 12px color-mix(in srgb, var(--ship-color) 55%, transparent);
    animation: ship-stripes 0.9s linear infinite;
    transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ship--delivered .ship__fill {
    animation: none;
}

.ship__truck {
    position: absolute;
    top: 50%;
    left: var(--ship-progress, 0%);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 2px solid var(--ship-color);
    border-radius: 50%;
    color: var(--ship-color);
    background: var(--background);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ship-color) 14%, transparent), 0 0 18px color-mix(in srgb, var(--ship-color) 45%, transparent);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.ship__truck svg {
    animation: ship-truck 0.6s ease-in-out infinite alternate;
}

.ship--delivered .ship__truck {
    color: #04121a;
    background: var(--ship-color);
}

.ship--delivered .ship__truck svg,
.ship--alert .ship__truck svg,
.ship--returned .ship__truck svg {
    animation: none;
}

.ship--returned .ship__truck svg {
    transform: scaleX(-1);
}

.ship__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.ship__step {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--muted);
    text-align: center;
}

.ship__dot {
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: var(--background);
}

.ship__step.is-done .ship__dot,
.ship__step.is-current .ship__dot {
    border-color: var(--ship-color);
    background: var(--ship-color);
}

.ship__step.is-done {
    color: var(--text);
}

.ship__step.is-current {
    color: var(--ship-color);
}

.ship__step-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.ship__step.is-current .ship__step-label {
    font-weight: 800;
}

.ship__last {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border-radius: 0.65rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
}

.ship__pin {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    color: var(--ship-color);
    background: color-mix(in srgb, var(--ship-color) 14%, transparent);
}

.ship__last-text,
.ship__event {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.ship__last-title {
    color: var(--text);
    font-weight: 700;
}

.ship__last-meta,
.ship__event-meta {
    color: var(--muted);
    font-size: 0.8rem;
}

.ship__history {
    border-top: 1px dashed var(--border);
    padding-top: 0.75rem;
}

.ship__history summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ship__history summary::-webkit-details-marker {
    display: none;
}

.ship__history summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}

.ship__history[open] summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.ship__history summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 0.3rem;
}

.ship__history-count {
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    font-weight: 600;
}

.ship__timeline {
    position: relative;
    display: grid;
    gap: 0.9rem;
    margin: 0.9rem 0 0;
    padding: 0 0 0 1.4rem;
    list-style: none;
}

.ship__timeline::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0.32rem;
    width: 2px;
    background: linear-gradient(var(--ship-color), rgba(255, 255, 255, 0.08));
}

.ship__event {
    position: relative;
}

.ship__event::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -1.4rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: var(--background);
}

.ship__event.is-latest::before {
    border-color: var(--ship-color);
    background: var(--ship-color);
    box-shadow: 0 0 10px var(--ship-color);
}

.ship__event-title {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
}

.ship__event:not(.is-latest) .ship__event-title {
    color: color-mix(in srgb, var(--text) 75%, transparent);
    font-weight: 500;
}

.ship-empty {
    margin: 0;
    border: 1px dashed rgba(255, 190, 0, 0.35);
    border-radius: 0.65rem;
    padding: 0.7rem 0.9rem;
    color: #ffe3a1;
    background: rgba(255, 190, 0, 0.05);
    font-size: 0.85rem;
}

@keyframes ship-pulse {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 0; transform: scale(2.8); }
}

@keyframes ship-stripes {
    to { background-position: 1rem 0, 0 0; }
}

@keyframes ship-truck {
    from { transform: translateY(0); }
    to { transform: translateY(-2px); }
}

@media (max-width: 40rem) {
    .ship {
        padding: 0.85rem;
    }

    .ship__status {
        font-size: 1.02rem;
    }

    .ship__road {
        height: 2.3rem;
    }

    .ship__truck {
        width: 2.3rem;
        height: 2.3rem;
    }

    .ship__truck svg {
        width: 18px;
        height: 18px;
    }

    .ship__step-label {
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ship__pulse::after,
    .ship__fill,
    .ship__truck svg {
        animation: none;
    }

    .ship__fill {
        transition: none;
    }
}

/* ---- Encabezado de resultados ---- */

.tracking-results {
    display: grid;
    gap: 1rem;
    margin-top: 1.75rem;
}

.tracking-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.tracking-results__title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.tracking-results__icon,
.tracking-form__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.85rem;
    color: var(--accent);
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 240, 255, 0.28), transparent 70%),
        var(--surface-alt);
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.18);
}

.tracking-results__title h2 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.1;
    background: linear-gradient(120deg, #ffffff 30%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tracking-results__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
}

.tracking-results__stats span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    color: var(--muted);
    background: var(--surface);
    font-size: 0.78rem;
}

.tracking-results__stats strong {
    color: var(--text);
}

.tracking-results .ship-summary,
.tracking-results .tracking-list {
    margin: 0;
}

/* ---- Tarjeta de cada número ---- */

.tracking-item[hidden] {
    display: none;
}

.tracking-item__main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.tracking-item__main .tracking-item__info {
    flex: 1 1 auto;
}

.tracking-item__index {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    color: var(--muted);
    background: var(--surface-alt);
    font-family: var(--heading-font);
    font-size: 0.8rem;
    font-weight: 700;
}

.tracking-item--gofo .tracking-item__index {
    border-color: rgba(255, 190, 0, 0.35);
    color: #ffd24d;
    background: rgba(255, 190, 0, 0.08);
}

.tracking-item__status {
    --ship-color: var(--accent);
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--ship-color) 40%, transparent);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    color: var(--ship-color);
    background: color-mix(in srgb, var(--ship-color) 10%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.tracking-item__status.ship--delivered { --ship-color: var(--success); }
.tracking-item__status.ship--alert { --ship-color: #ffb020; }
.tracking-item__status.ship--returned { --ship-color: #b69cff; }

.tracking-item__status.ship--delivered .ship__pulse::after {
    animation: none;
}

.tracking-item__status--muted {
    --ship-color: #ffbe00;
}

.tracking-item__status .ship__pulse {
    width: 0.5rem;
    height: 0.5rem;
}

.tracking-item__body-inner > * {
    margin-top: 1rem;
}

/* ---- Paginación ---- */

.tracking-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tracking-pager[hidden] {
    display: none;
}

.tracking-pager__info {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.tracking-pager__info strong {
    color: var(--text);
}

.tracking-pager__total {
    margin-left: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    color: var(--muted);
    background: var(--surface-alt);
    font-size: 0.75rem;
    white-space: nowrap;
}

.tracking-pager__controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tracking-pager__pages {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tracking-pager__page,
.tracking-pager__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    padding: 0 0.6rem;
    color: var(--text);
    background: var(--surface-alt);
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tracking-pager__page:hover,
.tracking-pager__nav:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.16);
    filter: none;
    transform: translateY(-1px);
}

.tracking-pager__page.is-current,
.tracking-pager__page.is-current:hover {
    position: relative;
    border-color: var(--accent);
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.35), transparent 75%),
        rgba(0, 240, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12), 0 0 18px rgba(0, 240, 255, 0.35);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    cursor: default;
    transform: none;
}

/* Rayita de acento bajo el número de la página actual. */
.tracking-pager__page.is-current::after {
    content: "";
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    width: 0.9rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform: translateX(-50%);
}

.tracking-pager__nav {
    padding: 0 0.8rem;
}

.tracking-pager__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tracking-pager__page:focus-visible,
.tracking-pager__nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tracking-pager__gap {
    min-width: 1.2rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.1em;
}

/* ---- Caja de correos ---- */

.tracking-form {
    display: grid;
    gap: 1rem;
}

.tracking-form__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.tracking-form__title {
    display: block;
    margin: 0;
    color: var(--text);
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
}

.tracking-form__hint {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.tracking-input {
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: rgba(3, 5, 12, 0.7);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tracking-input:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12), 0 0 26px rgba(0, 240, 255, 0.14);
}

.tracking-input__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.6rem;
    border-bottom: 1px solid var(--border);
    padding: 0.35rem 0.5rem 0.35rem 0.9rem;
    background: rgba(255, 255, 255, 0.02);
}

.tracking-input__count {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.tracking-input__count.is-ok {
    color: var(--success);
}

.tracking-input__count.is-warning {
    color: #ffb020;
}

.tracking-input__tools {
    display: inline-flex;
    gap: 0.35rem;
}

.tracking-input__tool {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 600;
}

.tracking-input__tool:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: none;
    filter: none;
}

.tracking-input__tool[hidden] {
    display: none;
}

.tracking-input .tracking-textarea {
    display: block;
    min-height: 8.5rem;
    border: 0;
    border-radius: 0;
    padding: 0.9rem 1rem;
    background: transparent;
    box-shadow: none;
    line-height: 1.7;
    resize: vertical;
}

.tracking-input .tracking-textarea:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.tracking-form__notes {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tracking-form__note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
    color: var(--muted);
    background: rgba(0, 240, 255, 0.05);
    font-size: 0.84rem;
    line-height: 1.45;
}

.tracking-form__note svg {
    flex: none;
    margin-top: 0.1rem;
    color: var(--accent);
}

.tracking-results .tracking-form__note {
    margin: 0;
}

.tracking-form__note--warning {
    color: #ffc2cf;
    background: rgba(255, 59, 107, 0.08);
}

.tracking-form__note--warning svg {
    color: #ff4d6d;
}

.tracking-form .search-actions {
    margin-top: 0;
}

.tracking-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    font-size: 1rem;
}

@media (max-width: 40rem) {
    .tracking-results__title h2 {
        font-size: 1.4rem;
    }

    .tracking-item__main {
        flex-wrap: wrap;
    }

    .tracking-item__status {
        margin-left: 2.85rem;
    }

    .tracking-pager {
        justify-content: center;
        padding: 0.6rem;
    }

    .tracking-pager__info {
        width: 100%;
        text-align: center;
    }

    .tracking-pager__nav span {
        display: none;
    }

    .tracking-pager__nav {
        padding: 0;
    }

    .tracking-pager__page,
    .tracking-pager__nav {
        min-width: 2.2rem;
        height: 2.2rem;
    }

    .tracking-form__icon,
    .tracking-results__icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tracking-pager__page:hover,
    .tracking-pager__nav:hover:not(:disabled) {
        transform: none;
    }
}

@keyframes tracking-item-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tracking-item { animation: none; }
    .tracking-gofo-go:hover { transform: none; }
}

@media (max-width: 40rem) {
    .tracking-item {
        padding: 0.9rem;
    }

    .tracking-item__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .tracking-item__actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }

    .tracking-item--gofo .tracking-gofo-go {
        grid-column: 1 / -1;
        order: -1;
    }
}

.tracking-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tracking-link-row > * {
    flex: 1 1 auto;
    text-align: center;
}

.tracking-go {
    display: inline-block;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25), 0 8px 24px rgba(0, 240, 255, 0.16);
}

.tracking-go:hover {
    filter: brightness(1.08);
}

.tracking-copy.is-copied {
    color: #7dffbc;
    border-color: rgba(57, 255, 157, 0.4);
    box-shadow: 0 0 14px rgba(57, 255, 157, 0.18);
}

.alert {
    margin: 1rem 0;
    border: 1px solid rgba(255, 59, 107, 0.4);
    border-radius: 0.65rem;
    padding: 0.9rem 1rem;
    color: #ffb3c6;
    background: rgba(255, 59, 107, 0.1);
    box-shadow: 0 0 20px rgba(255, 59, 107, 0.12);
}

.notice {
    margin: 1rem 0;
    border: 1px solid rgba(57, 255, 157, 0.4);
    border-radius: 0.65rem;
    padding: 0.9rem 1rem;
    color: #a8ffd6;
    background: rgba(57, 255, 157, 0.08);
    box-shadow: 0 0 20px rgba(57, 255, 157, 0.1);
}

/* Aviso "¿no tienes código de referido?" en el registro: informativo, no un
   mensaje de éxito/error, así que usa el look neutro del sitio en vez del
   verde de .notice o el rojo de .alert. */
.auth-hint {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1rem 0;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--surface-alt);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.05);
}

.auth-hint-icon {
    flex: none;
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.35));
}

.auth-hint p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.auth-hint-link {
    color: var(--accent);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.auth-hint-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.auth-link {
    margin: 1.25rem 0 0;
    color: var(--muted);
    text-align: center;
}

.auth-link a {
    color: var(--accent);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.results-heading,
.message-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.results-heading {
    margin: 2rem 0 1rem;
}

.results-heading h2,
.message-header h3 {
    margin: 0;
}

.results-heading span,
.message-header time {
    flex: none;
    color: var(--muted);
}

.message-list {
    display: grid;
    gap: 0.9rem;
}

.message-card {
    display: block;
    padding: 1.3rem;
    color: inherit;
    text-decoration: none;
}

.message-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 26px rgba(0, 240, 255, 0.2), 0 0 44px rgba(255, 46, 196, 0.1);
    transform: translateY(-2px);
}

.message-card:focus-visible,
.back-button:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 3px;
}

.message-card dl {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0;
}

.message-card dl div {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0.5rem;
}

.message-card dt {
    color: var(--muted);
    font-weight: 650;
}

.message-card dd {
    overflow-wrap: anywhere;
    margin: 0;
}

.snippet {
    margin: 0;
    color: #b6c3e0;
    line-height: 1.55;
}

.open-message {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin-top: 1rem;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 700;
}

.empty-state {
    padding: 2rem;
    color: var(--muted);
    text-align: center;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.pagination button {
    min-width: 2.7rem;
}

.pagination-gap {
    align-self: center;
    padding: 0 0.2rem;
    color: var(--muted);
}

.detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    padding: 0.7rem 0.9rem;
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
    font-weight: 700;
}

.back-button:hover {
    border-color: var(--border-strong);
    color: var(--accent);
    background: var(--surface-hover);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
}

.message-id {
    color: var(--muted);
    font-size: 0.85rem;
}

.mail-view {
    overflow: hidden;
}

.mail-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: 1px solid var(--border);
    padding: 1.75rem 2rem;
}

.mail-view-header h2 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.25;
}

.mail-view-header time {
    flex: none;
    color: var(--muted);
    font-size: 0.9rem;
}

.mail-metadata {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 2rem;
    background: var(--surface-alt);
}

.mail-metadata div {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.75rem;
}

.mail-metadata dt {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mail-metadata dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: #cddaf5;
}

.mail-body {
    min-height: 18rem;
    padding: 2rem;
    color: #cddaf5;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.95rem;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-container {
    display: grid;
    /* minmax(0, 1fr): el contenido ancho (tablas, formularios) no puede
       ensanchar la columna más allá de la pantalla en móvil. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.admin-section,
.admin-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.admin-section {
    padding: 1.4rem;
}

.section-heading,
.admin-card-row,
.admin-user-header,
.assignment-row,
.admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading {
    margin-bottom: 1rem;
}

.section-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-heading-actions form {
    margin: 0;
}

.section-heading-actions button.compact {
    /* button.compact trae un padding-top más grande que descuadra el texto
       hacia abajo (pensado para otro contexto); acá lo centramos normal. */
    padding-top: 0.45rem;
}

@media (max-width: 40rem) {
    .section-heading-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.section-heading h2,
.admin-user-header h3,
.admin-card-row p,
.assignment-list p {
    margin: 0;
}

.counter {
    min-width: 2.25rem;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    color: #baf6ff;
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.35), 0 0 16px rgba(0, 240, 255, 0.18);
    text-align: center;
    font-weight: 750;
}

.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(calc(100vw - 2rem), 24rem);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: rgba(8, 11, 19, 0.92);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 240, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: auto;
}

.toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-message {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: min(60vh, 18rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 255, 0.5) transparent;
    padding-right: 0.35rem;
}

.toast-message::-webkit-scrollbar {
    width: 6px;
}

.toast-message::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.45);
    border-radius: 999px;
}

.toast-message::-webkit-scrollbar-track {
    background: transparent;
}

.toast-close {
    flex-shrink: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.toast-close:hover {
    color: var(--text);
    filter: none;
    box-shadow: none;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    user-select: none;
}

.switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.switch-track {
    position: relative;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px var(--border);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.switch-thumb {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #aab4c8;
    transition: transform 160ms ease, background 160ms ease;
}

.switch input:checked + .switch-track {
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.5), 0 0 14px rgba(0, 240, 255, 0.4);
}

.switch input:checked + .switch-track .switch-thumb {
    transform: translateX(1.1rem);
    background: #04121a;
}

.switch input:focus-visible + .switch-track {
    outline: 3px solid var(--accent-soft);
    outline-offset: 2px;
}

.switch:hover .switch-track {
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.announcement-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 0.6rem;
}

.announcement-controls input[type="number"] {
    width: 5rem;
}

.admin-search {
    margin-bottom: 1.1rem;
}

.admin-search label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.admin-search input {
    max-width: 22rem;
}

.admin-list {
    display: grid;
    gap: 0.8rem;
}

.admin-card {
    padding: 1.2rem;
}

.admin-user-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

/* La tarjeta de usuario es un <details>: el resumen (correo, estado,
   cantidad de cuentas) queda siempre visible y el resto se pliega, porque
   con muchos usuarios y muchas cuentas cada uno era muy largo para scrollear. */
summary.admin-user-header {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

summary.admin-user-header::-webkit-details-marker {
    display: none;
}

summary.admin-user-header:hover {
    background: var(--surface-hover);
}

summary.admin-user-header:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: -2px;
}

.admin-user-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

summary.admin-user-header .order-accordion-caret {
    align-self: center;
}

.admin-card[open] > summary.admin-user-header .order-accordion-caret {
    transform: rotate(45deg);
}

.admin-card-body {
    padding-top: 1rem;
}

.admin-user-header--plain {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 1.1rem;
}

.status {
    display: inline-block;
    margin-top: 0.4rem;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    color: var(--muted);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 0.8rem;
}

.status-approved {
    color: #7dffbc;
    border-color: rgba(57, 255, 157, 0.35);
    box-shadow: 0 0 12px rgba(57, 255, 157, 0.12);
}

.status-rejected {
    color: #ff90ab;
    border-color: rgba(255, 59, 107, 0.35);
    box-shadow: 0 0 12px rgba(255, 59, 107, 0.12);
}

.assignment-list {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0;
}

.assignment-row {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    padding: 0.65rem 0.8rem;
    background: var(--surface-alt);
}

.assignment-row span {
    overflow-wrap: anywhere;
}

.assignment-row[hidden] {
    display: none;
}

/* Inventario del vendedor: filas de cuenta con selección, copiar y estado */
.stock-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    margin: 0.4rem 0 0.85rem;
    padding-right: calc(0.8rem + 1px);
}

.stock-list {
    display: grid;
    gap: 0.5rem;
}

.stock-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface-alt);
}

.stock-row[hidden] {
    display: none;
}

.stock-cred {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.88rem;
}

.stock-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stock-row-actions button.compact {
    /* .compact trae un padding-top: 1rem que descuadra el texto hacia abajo
       (ver mismo arreglo en .section-heading-actions y .reward-card); acá lo
       normalizamos y centramos con flex. */
    padding-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stock-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
}

.stock-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    flex: none;
    position: relative;
    border: 1px solid var(--border-strong);
    border-radius: 0.3rem;
    background: rgba(4, 6, 14, 0.7);
    cursor: pointer;
}

.stock-check input[type="checkbox"]:hover {
    border-color: var(--accent);
}

.stock-check input[type="checkbox"]:checked,
.stock-check input[type="checkbox"]:indeterminate {
    border-color: var(--accent);
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.stock-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

.stock-vendida-form {
    margin: 0;
}

/* "Vendida": pastilla estilo botón, verde fluorescente al marcarse */
.stock-vendida {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.7rem 0.3rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface);
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.stock-vendida:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.stock-vendida input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: none;
    position: relative;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 2px rgba(139, 155, 192, 0.5);
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.stock-vendida input[type="checkbox"]:checked {
    background: linear-gradient(120deg, var(--success), #8affc6);
    box-shadow: inset 0 0 0 2px rgba(57, 255, 157, 0.6), 0 0 14px rgba(57, 255, 157, 0.45);
    animation: used-pop 260ms ease;
}

.stock-vendida input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0.28rem;
    height: 0.54rem;
    border: solid #04121a;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.stock-vendida input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(57, 255, 157, 0.5);
    outline-offset: 2px;
}

.stock-row.is-sold .stock-vendida {
    color: var(--success);
    border-color: rgba(57, 255, 157, 0.5);
    background: rgba(57, 255, 157, 0.12);
}

.stock-row.is-sold .stock-cred {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(57, 255, 157, 0.55);
}

.status.status-assigned {
    color: #baf6ff;
    border-color: rgba(0, 240, 255, 0.35);
    background: rgba(0, 240, 255, 0.1);
    margin-top: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
    .stock-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .stock-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.assignment-form {
    margin-top: 1rem;
}

.assignment-form label {
    margin-top: 1.1rem;
}

.assignment-form label:first-child {
    margin-top: 0;
}

.assignment-form button[type="submit"] {
    margin-top: 0.75rem;
}

.reseller-stock-box {
    margin-top: 1rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.65rem;
    background: var(--surface-alt);
}

.reseller-stock-box + .reseller-stock-box {
    margin-top: 1.1rem;
}

.assignment-help {
    margin: -0.15rem 0 0.65rem;
    font-size: 0.9rem;
}

.bulk-assignment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.danger-zone {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.danger-zone--transfer {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.danger-zone--transfer label {
    flex: 1 0 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.danger-zone--transfer select {
    flex: 1 1 12rem;
    min-width: 0;
    width: auto;
}

@media (max-width: 40rem) {
    .danger-zone {
        justify-content: stretch;
    }

    .danger-zone button {
        width: 100%;
    }

    .danger-zone--transfer select {
        flex-basis: 100%;
    }
}

/* Controles de revendedor dentro de cada tarjeta de usuario (panel admin) */
.reseller-controls {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface-alt);
}

.reseller-controls-status {
    margin: 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.reseller-controls-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.reseller-controls-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.reseller-link-form {
    flex: 1 1 18rem;
    min-width: 0;
}

.reseller-link-form select {
    flex: 1 1 11rem;
    min-width: 0;
    width: auto;
}

.reseller-controls-actions button {
    flex: none;
}

.admin-invite-controls {
    margin-top: 1rem;
}

.reseller-referral {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface-alt);
}

.reseller-referral-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    flex: none;
}

/* Nota bajo el link de invitación de un usuario normal: el link se renueva
   tras cada registro. Mismo look neutro que .auth-hint. */
.invite-onetime {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0.65rem;
    background: var(--surface-alt);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.05);
}

.invite-onetime-icon {
    flex: none;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.35));
}

.invite-onetime p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.invite-onetime .invite-onetime-title {
    margin-bottom: 0.15rem;
    color: var(--text);
    font-weight: 650;
}

.reseller-referral-url {
    flex: 1 1 14rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    color: var(--text);
    word-break: break-all;
}

@media (max-width: 40rem) {
    .reseller-controls-actions,
    .reseller-controls-actions form {
        flex-direction: column;
        align-items: stretch;
    }

    .reseller-link-form select,
    .reseller-controls-actions button {
        width: 100%;
    }

    .reseller-referral {
        align-items: stretch;
    }

    .reseller-referral .pay-id-copy {
        align-self: flex-end;
    }
}

button.danger {
    border: 1px solid rgba(255, 59, 107, 0.4);
    color: #ffd2de;
    background: rgba(255, 59, 107, 0.18);
    box-shadow: none;
}

button.danger:hover {
    background: rgba(255, 59, 107, 0.32);
    box-shadow: 0 0 20px rgba(255, 59, 107, 0.35);
}

button.compact,
.back-button.compact {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}

.commission-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.commission-actions form {
    margin: 0;
}

.commission-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    border-radius: 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.commission-actions button.danger {
    color: #fff;
    border: 1px solid rgba(255, 120, 150, 0.55);
    background: linear-gradient(120deg, rgba(255, 59, 107, 0.95), rgba(255, 46, 120, 0.72));
    box-shadow: 0 0 0 1px rgba(255, 59, 107, 0.25), 0 10px 26px rgba(255, 59, 107, 0.28);
}

.commission-actions button.danger:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px rgba(255, 59, 107, 0.5), 0 0 24px rgba(255, 59, 107, 0.5);
}

.commission-actions button.danger span {
    font-size: 1.05em;
    line-height: 1;
}

.commission-actions button.secondary {
    padding: 0.62rem 1.15rem;
}

.commission-hint {
    margin-top: 0.7rem;
    font-size: 0.85rem;
}

.commission-request {
    margin-top: 1rem;
}

/* Ajuste manual de la comisión (sumar / restar con doble aprobación). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.kshi-adjust {
    margin-top: 1.4rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.1rem;
    background: linear-gradient(160deg, rgba(0, 240, 255, 0.05), rgba(255, 46, 196, 0.04));
}

.kshi-adjust-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.kshi-adjust-head h3 {
    margin: 0;
    font-size: 1rem;
}

.kshi-adjust-head p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}

.kshi-adjust-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.65rem;
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.18);
}

.kshi-adjust-form {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.kshi-op-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: rgba(4, 6, 14, 0.6);
}

.kshi-op input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kshi-op span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.55rem;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.kshi-op span:hover {
    color: var(--text);
}

.kshi-op input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.kshi-op--add input:checked + span {
    color: #062015;
    background: var(--success);
    box-shadow: 0 0 18px rgba(57, 255, 157, 0.35);
}

.kshi-op--subtract input:checked + span {
    color: #fff;
    background: var(--danger);
    box-shadow: 0 0 18px rgba(255, 59, 107, 0.35);
}

.kshi-adjust-fields {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: 0.6rem;
}

.kshi-adjust-fields input {
    box-sizing: border-box;
    height: 3rem;
    margin: 0;
}

.kshi-amount {
    position: relative;
    display: block;
}

.kshi-amount-prefix {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--muted);
    font-weight: 700;
    pointer-events: none;
}

.kshi-amount input {
    padding-left: 1.7rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kshi-adjust-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.kshi-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.kshi-preview strong {
    color: var(--text);
    font-size: 1.1rem;
    transition: color 0.15s ease;
}

.kshi-preview strong.is-up {
    color: var(--success);
}

.kshi-preview strong.is-down {
    color: #ff8aa6;
}

.kshi-preview strong.is-invalid {
    color: var(--danger);
    text-decoration: line-through;
}

.kshi-adjust-submit,
.commission-actions button.kshi-approve {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    border-radius: 0.7rem;
    font-weight: 700;
}

.kshi-adjust-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.commission-actions button.kshi-approve {
    color: #062015;
    border: 1px solid rgba(57, 255, 157, 0.6);
    background: var(--success);
    box-shadow: 0 10px 26px rgba(57, 255, 157, 0.22);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kshi-pending {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    background: rgba(4, 6, 14, 0.55);
}

.kshi-pending.is-add {
    border-left-color: var(--success);
}

.kshi-pending.is-subtract {
    border-left-color: var(--danger);
}

.kshi-pending-amount {
    flex: none;
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kshi-pending.is-add .kshi-pending-amount {
    color: var(--success);
}

.kshi-pending.is-subtract .kshi-pending-amount {
    color: #ff8aa6;
}

.kshi-pending-body {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.kshi-pending-body p {
    margin: 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.kshi-pending-badge {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    color: #ffe08a;
    background: rgba(255, 196, 0, 0.12);
    border: 1px solid rgba(255, 196, 0, 0.35);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kshi-pending-note {
    color: var(--muted);
}

.kshi-history {
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
}

.kshi-history summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.kshi-history ul {
    display: grid;
    gap: 0.5rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.kshi-history li {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-size: 0.85rem;
}

.kshi-history-amount {
    flex: none;
    min-width: 5.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kshi-history li.is-add .kshi-history-amount {
    color: var(--success);
}

.kshi-history li.is-subtract .kshi-history-amount {
    color: #ff8aa6;
}

.kshi-history li.is-rejected .kshi-history-amount {
    color: var(--muted);
    text-decoration: line-through;
}

.kshi-history-meta {
    color: var(--muted);
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .kshi-adjust-fields {
        grid-template-columns: 1fr;
    }

    .kshi-adjust-submit {
        width: 100%;
        justify-content: center;
    }

    .kshi-pending {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.not-found-page {
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.not-found-card {
    width: min(100%, 34rem);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: clamp(2rem, 7vw, 4rem);
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 240, 255, 0.08);
    text-align: center;
}

.not-found-logo {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.4));
}

.not-found-code {
    margin: 1rem 0 0;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(0, 240, 255, 0.35));
    font-family: var(--heading-font);
    font-size: clamp(4rem, 18vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
}

.not-found-card h1 {
    margin: 0.75rem 0;
    font-size: clamp(1.5rem, 5vw, 2.15rem);
}

.not-found-card .muted {
    margin-bottom: 1.75rem;
    line-height: 1.65;
}

.primary-link {
    display: inline-flex;
    border-radius: 0.7rem;
    padding: 0.8rem 1.1rem;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25), 0 8px 24px rgba(0, 240, 255, 0.16);
    transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.primary-link:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.4), 0 0 22px rgba(0, 240, 255, 0.45), 0 0 40px rgba(255, 46, 196, 0.25);
    transform: translateY(-1px);
}

.panel-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    width: min(calc(100% - 2rem), 74rem);
    margin: 2.5rem auto;
    padding-bottom: 4rem;
}

.panel-main {
    min-width: 0;
}

.sidebar {
    position: sticky;
    top: 5.75rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.85rem;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.sidebar-nav {
    display: grid;
    gap: 0.4rem;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    padding: 0.7rem 0.85rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 650;
}

.sidebar-link:hover {
    border-color: var(--border);
    color: var(--text);
    background: var(--surface-hover);
}

.sidebar-link.is-active {
    color: #baf6ff;
    background: rgba(0, 240, 255, 0.12);
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.25), 0 0 16px rgba(0, 240, 255, 0.12);
}

.sidebar-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--muted);
    transition: color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.sidebar-link:hover .sidebar-icon {
    color: var(--text);
    transform: translateY(-1px);
}

.sidebar-link.is-active .sidebar-icon {
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.55));
}

/* Etiqueta "New" flotante: sobresale de la esquina del enlace, flota
   suavemente y le pasa un brillo cada pocos segundos. */
.sidebar-new {
    position: absolute;
    top: -0.55rem;
    right: -0.45rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    color: #ffffff;
    background: linear-gradient(120deg, #ff2ec4 0%, #ff5a7a 55%, #ff9a3c 100%);
    box-shadow:
        0 0 0 2px var(--background),
        0 6px 16px rgba(255, 46, 196, 0.45),
        0 0 22px rgba(255, 90, 122, 0.35);
    font-family: var(--heading-font);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    transform: rotate(8deg);
    animation: sidebar-new-float 2.8s ease-in-out infinite;
}

.sidebar-new::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: sidebar-new-shine 3.2s ease-in-out infinite;
}

.sidebar-new > span {
    position: relative;
}

.sidebar-link:hover .sidebar-new {
    animation-play-state: paused;
    box-shadow:
        0 0 0 2px var(--background),
        0 8px 20px rgba(255, 46, 196, 0.6),
        0 0 28px rgba(255, 90, 122, 0.5);
}

@keyframes sidebar-new-float {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50% { transform: translateY(-3px) rotate(4deg); }
}

@keyframes sidebar-new-shine {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-new,
    .sidebar-new::before {
        animation: none;
    }
}

.accounts-panel {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.4rem;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 240, 255, 0.05);
}

.accounts-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.accounts-head h2 {
    margin: 0;
}

.accounts-panel .search-hint code {
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    background: var(--accent-soft);
    color: #baf6ff;
    font-size: 0.85em;
}

.account-list {
    display: grid;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.order-group {
    margin-top: 1.4rem;
}

.order-group:first-of-type {
    margin-top: 1.1rem;
}

.order-group-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}

.order-tag {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.95rem;
    color: #baf6ff;
    letter-spacing: 0.02em;
}

.order-date {
    font-size: 0.85rem;
}

.order-group-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

.order-group .account-list {
    margin-top: 0.7rem;
}

/* Enlace "Descargar .txt" de cada pedido / tanda en "Mis cuentas" */
.txt-download {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.txt-download::before {
    content: "\2193";
    font-weight: 700;
}

.txt-download:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.16);
}

.order-group-head .txt-download {
    margin-left: 0.5rem;
}

.order-download-row {
    display: flex;
    justify-content: flex-end;
}

/* "Mis cuentas" del vendedor: un panel desplegable por pedido mayorista */
.order-accordion {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-alt);
    overflow: hidden;
}

.order-accordion + .order-accordion {
    margin-top: 0.5rem;
}

.order-accordion-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.65rem;
    padding: 0.8rem 0.95rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.order-accordion-summary::-webkit-details-marker {
    display: none;
}

.order-accordion-summary:hover {
    background: var(--surface-hover);
}

.order-accordion-summary:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: -2px;
}

.order-accordion-caret {
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
    transition: transform 160ms ease;
}

.order-accordion[open] .order-accordion-caret {
    transform: rotate(45deg);
}

.order-accordion-body {
    display: grid;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem 0.85rem;
}

.order-accordion .stock-row {
    background: var(--surface);
}

.order-accordion-body .account-list {
    margin-top: 0;
}

.stock-client {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    padding: 0.8rem 0.95rem;
    background: var(--surface-alt);
}

.account-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.12);
}

.account-card > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-cred {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.95rem;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-all;
}

.account-sep {
    margin: 0 0.15rem;
    color: var(--accent);
    font-weight: 700;
}

.account-missing {
    color: var(--muted);
    font-style: italic;
}

.account-copy {
    flex: none;
}

.account-copy.is-copied {
    color: #7dffbc;
    border-color: rgba(57, 255, 157, 0.4);
    box-shadow: 0 0 14px rgba(57, 255, 157, 0.18);
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.used-toggle {
    margin: 0;
}

.used-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.38rem 0.7rem 0.38rem 0.5rem;
    color: var(--muted);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.used-check:hover {
    border-color: var(--border-strong);
    color: var(--text);
    filter: none;
    box-shadow: none;
}

.used-check-box {
    flex: none;
    border-radius: 0.4rem;
    color: transparent;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 2px rgba(139, 155, 192, 0.5);
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.used-check[aria-pressed="true"] {
    color: var(--success);
    border-color: rgba(57, 255, 157, 0.5);
    background: rgba(57, 255, 157, 0.12);
}

.used-check[aria-pressed="true"] .used-check-box {
    color: #04121a;
    background: linear-gradient(120deg, var(--success), #8affc6);
    box-shadow: inset 0 0 0 2px rgba(57, 255, 157, 0.6), 0 0 14px rgba(57, 255, 157, 0.35);
    animation: used-pop 260ms ease;
}

.used-check.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

@keyframes used-pop {
    0% { transform: scale(0.55); }
    55% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.account-card.is-used {
    border-color: rgba(57, 255, 157, 0.28);
    background:
        linear-gradient(90deg, rgba(57, 255, 157, 0.07), transparent 42%),
        var(--surface-alt);
}

.account-card.is-used .account-cred {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(57, 255, 157, 0.55);
}

@media (max-width: 34rem) {
    .account-card {
        flex-wrap: wrap;
    }

    .account-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.replacement-form {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.1rem;
    background: var(--surface-alt);
}

.replacement-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 22rem;
    overflow-y: auto;
}

.replacement-search {
    margin: 0.25rem 0 0.5rem;
}

.replacement-field {
    display: grid;
    gap: 0.35rem;
}

.replacement-field label {
    font-size: 0.9rem;
    font-weight: 600;
}

.replacement-field-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Select del motivo: flecha propia, más alto y con brillo al enfocar */
.replacement-field select {
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 2.8rem 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    color: var(--text);
    background-color: var(--surface-alt);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft));
    background-repeat: no-repeat, no-repeat;
    background-position: right 1rem center, right 0 top 0;
    background-size: 1rem, 3rem 100%;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.replacement-field select:hover {
    border-color: var(--border-strong);
}

.replacement-field select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px rgba(0, 240, 255, 0.2);
}

.replacement-field select:invalid {
    color: var(--muted);
    font-weight: 500;
}

.replacement-field select option {
    color: var(--text);
    background: #0b0f1c;
    font-weight: 500;
}

/* Imágenes de prueba: zona para tocar/arrastrar + miniaturas */
/* El input nativo solo se oculta cuando replacement.js tomó el control
   (.is-enhanced); si el JS no carga, queda el selector normal visible. */
.replacement-field.is-enhanced input.proof-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}

.replacement-field:not(.is-enhanced) .proof-dropzone {
    display: none;
}

.replacement-field .proof-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 1.4rem 1rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(255, 46, 196, 0.05));
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.proof-dropzone:hover,
.proof-dropzone.is-dragging,
.proof-input:focus-visible + .proof-dropzone {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(255, 46, 196, 0.08));
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.15);
}

.proof-dropzone.is-full {
    border-style: solid;
    opacity: 0.75;
}

.proof-dropzone-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.2rem;
    border-radius: 50%;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 1.25rem;
}

.proof-dropzone-title {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.proof-dropzone-hint {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.proof-dropzone-count {
    margin-top: 0.3rem;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.proof-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.proof-previews[hidden] {
    display: none;
}

.proof-preview {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    overflow: hidden;
    background: var(--surface-alt);
}

.proof-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.proof-remove {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(4, 6, 14, 0.8);
    box-shadow: none;
    font-size: 0.7rem;
}

.proof-remove:hover {
    background: var(--danger);
    box-shadow: 0 0 12px rgba(255, 59, 107, 0.5);
    filter: none;
}

.replacement-field .proof-error {
    margin: 0.5rem 0 0;
    color: #ff90ab;
    font-size: 0.85rem;
}

.replacement-field textarea {
    width: 100%;
    resize: vertical;
    min-height: 3.5rem;
    font: inherit;
}

/* Input de archivo (comprobante de reemplazo) con estilo del tema */
.replacement-field input[type="file"] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.replacement-field input[type="file"]:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.replacement-field input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.replacement-field input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft));
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    cursor: pointer;
    transition: filter 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.replacement-field input[type="file"]::file-selector-button:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

/* Fallback para WebKit/Blink antiguos que no reconocen ::file-selector-button */
.replacement-field input[type="file"]::-webkit-file-upload-button {
    margin-right: 0.85rem;
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft));
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    cursor: pointer;
}

.replacement-field p {
    margin: 0;
    font-size: 0.8rem;
}

.replacement-field .req {
    color: var(--danger, #ff3b6b);
}

.replacement-reason {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.replacement-arrow {
    margin: 0 0.35rem;
    color: var(--muted);
}

.replacement-new-email {
    color: #baf6ff;
    font-weight: 650;
}

.replacement-rejected-note {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.replacement-contact-text {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--muted);
}

.replacement-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.password-reset-contact {
    margin-top: 0.75rem;
}

.contact-pill {
    --pill: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--pill) 45%, transparent);
    border-radius: 999px;
    padding: 0.4rem 0.85rem 0.4rem 0.45rem;
    color: var(--text);
    background: color-mix(in srgb, var(--pill) 12%, transparent);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.contact-pill i {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: #fff;
    background: var(--pill);
    font-size: 0.85rem;
}

.contact-pill:hover {
    border-color: var(--pill);
    background: color-mix(in srgb, var(--pill) 22%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--pill) 35%, transparent);
    transform: translateY(-1px);
}

.contact-pill:focus-visible {
    outline: 2px solid var(--pill);
    outline-offset: 2px;
}

.contact-pill--telegram {
    --pill: #29a9eb;
}

.contact-pill--whatsapp {
    --pill: #25d366;
}

.replacement-empty {
    padding: 0.6rem 0.25rem;
    font-size: 0.9rem;
}

.replacement-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: rgba(4, 6, 14, 0.4);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.replacement-item:hover {
    border-color: var(--border-strong);
}

.replacement-item.is-checked {
    border-color: var(--border-strong);
    background: rgba(0, 240, 255, 0.08);
}

/* Cuenta con una solicitud de reemplazo aún en revisión: no se puede volver a pedir */
.replacement-item.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
}

.replacement-item.is-locked:hover {
    border-color: var(--border);
}

.replacement-item.is-locked .replacement-check {
    box-shadow: inset 0 0 0 2px rgba(139, 155, 192, 0.25);
}

.replacement-badge {
    margin-left: auto;
    flex: none;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffd7a3;
    background: rgba(255, 176, 80, 0.14);
    border: 1px solid rgba(255, 176, 80, 0.4);
    border-radius: 999px;
    white-space: nowrap;
}

.replacement-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.replacement-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.45rem;
    color: transparent;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 2px rgba(139, 155, 192, 0.5);
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.replacement-item input:checked ~ .replacement-check,
.replacement-policy input:checked ~ .replacement-check {
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: inset 0 0 0 2px rgba(0, 240, 255, 0.6), 0 0 14px rgba(0, 240, 255, 0.3);
    animation: used-pop 220ms ease;
}

.replacement-policy {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.2rem 0.85rem;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.4;
    cursor: pointer;
}

.replacement-policy input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.replacement-policy a {
    color: var(--accent);
    font-weight: 650;
}

.replacement-policy a:hover {
    text-decoration: underline;
}

.replacement-email {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.92rem;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.replacement-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.replacement-count {
    font-size: 0.85rem;
}

.replacement-actions button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
    box-shadow: none;
}

/* Página de políticas */
.policy-doc {
    width: min(calc(100% - 2rem), 52rem);
    margin: 2.5rem auto 5rem;
}

.policy-head {
    text-align: center;
    margin-bottom: 1.8rem;
}

.policy-logo {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4));
}

.policy-head h1 {
    margin: 0.55rem 0 0.9rem;
    font-size: clamp(1.5rem, 5vw, 2.1rem);
    line-height: 1.2;
}

.policy-lead {
    max-width: 42rem;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.6;
}

.policy-body {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: clamp(1.15rem, 4vw, 2.2rem);
    background: var(--surface);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 240, 255, 0.05);
}

.policy-body section {
    display: grid;
    gap: 0.65rem;
    padding: 1.5rem 0;
}

.policy-body section:first-child {
    padding-top: 0;
}

.policy-body section:last-child {
    padding-bottom: 0;
}

.policy-body section + section {
    border-top: 1px solid var(--border);
}

.policy-body h2 {
    margin: 0;
    font-size: clamp(1.05rem, 3.4vw, 1.28rem);
    line-height: 1.3;
    color: #baf6ff;
}

.policy-body p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}

.policy-body strong {
    color: #eaf6ff;
}

.policy-body ul {
    margin: 0.1rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    line-height: 1.6;
}

.policy-body li::marker {
    color: var(--accent);
}

.policy-back {
    display: inline-flex;
    margin-top: 1.6rem;
    color: var(--accent);
    font-weight: 650;
    text-decoration: none;
}

.policy-back:hover {
    text-decoration: underline;
}

.shop-panel h2 {
    margin: 0;
}

.shop-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 0.6rem;
    margin: 1.1rem 0;
}

.shop-tier {
    display: grid;
    gap: 0.15rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface-alt);
}

.shop-tier-qty {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.shop-tier-price {
    font-family: var(--heading-font);
    font-weight: 700;
}

.shop-preview-label {
    margin: 0.4rem 0 0.5rem;
    font-size: 0.85rem;
}

.shop-preview {
    margin-bottom: 1.4rem;
    opacity: 0.85;
}

.shop-buy {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.2rem;
    background: var(--surface-alt);
}

.shop-buy > * {
    min-width: 0;
}

.shop-field {
    display: grid;
    gap: 0.4rem;
}

.shop-field code {
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    background: var(--accent-soft);
    color: #baf6ff;
}

.shop-field a {
    color: var(--accent);
    text-decoration: none;
}

.shop-field a:hover {
    text-decoration: underline;
}

.stepper {
    display: inline-flex;
    align-items: stretch;
    gap: 0.4rem;
    max-width: 14rem;
}

.stepper button {
    flex: none;
    width: 2.9rem;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
}

.stepper input {
    width: 5.5rem;
    text-align: center;
    font-family: var(--heading-font);
    font-weight: 700;
}

.shop-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0;
}

.shop-summary div {
    display: grid;
    gap: 0.15rem;
}

.shop-summary dt {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.shop-summary dd {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 700;
}

.shop-total-value {
    color: #baf6ff;
}

.shop-field-label {
    font-weight: 650;
}

.file-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    background: rgba(4, 6, 14, 0.5);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.file-drop:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.file-drop:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.65rem;
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.3);
}

.file-drop-body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.file-drop-text {
    font-weight: 650;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-drop-hint {
    color: var(--muted);
    font-size: 0.82rem;
}

.file-drop.has-file {
    border-style: solid;
    border-color: rgba(57, 255, 157, 0.5);
    background: rgba(57, 255, 157, 0.08);
}

.file-drop.has-file .file-drop-icon {
    color: var(--success);
    background: rgba(57, 255, 157, 0.14);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.35);
}

.file-drop.is-invalid {
    border-color: rgba(255, 59, 107, 0.55);
    background: rgba(255, 59, 107, 0.08);
}

.pay-card {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    border: 1px solid rgba(240, 185, 11, 0.3);
    border-radius: 0.85rem;
    padding: 1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(240, 185, 11, 0.12), transparent 60%),
        var(--surface-alt);
}

.pay-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--heading-font);
    font-size: 0.95rem;
    font-weight: 700;
}

.pay-logo {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    filter: drop-shadow(0 0 6px rgba(240, 185, 11, 0.5));
}

.pay-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 0.9rem;
    flex-wrap: wrap;
    min-width: 0;
    border: 1px solid rgba(240, 185, 11, 0.28);
    border-radius: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: rgba(240, 185, 11, 0.06);
}

.pay-id-value {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffe27a;
    text-shadow: 0 0 16px rgba(240, 185, 11, 0.3);
    word-break: break-all;
}

.pay-id-copy {
    flex: none;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    color: #1c1500;
    background: linear-gradient(120deg, #f0b90b, #ffd54a);
    box-shadow: 0 0 14px rgba(240, 185, 11, 0.25);
    font-size: 0.82rem;
    font-weight: 700;
}

.pay-id-copy:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 20px rgba(240, 185, 11, 0.45);
}

.pay-id-copy.is-copied {
    color: #04121a;
    background: linear-gradient(120deg, var(--success), #8affc6);
}

.pay-note {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.shop-orders {
    margin-top: 1.6rem;
}

.shop-orders h3 {
    margin: 0 0 0.7rem;
}

.stock-badge {
    align-self: center;
    flex: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    color: #8affc6;
    background: rgba(57, 255, 157, 0.12);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.35), 0 0 16px rgba(57, 255, 157, 0.15);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.shop-stock-alert {
    margin: 0;
    border: 1px solid rgba(255, 59, 107, 0.4);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    color: #ffb3c6;
    background: rgba(255, 59, 107, 0.1);
    font-size: 0.88rem;
}

.shop-bulk-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    border: 1px solid rgba(255, 196, 0, 0.4);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    color: #ffe08a;
    background: rgba(255, 196, 0, 0.1);
    font-size: 0.88rem;
}

.shop-bulk-note[hidden] {
    display: none;
}

.shop-bulk-note p {
    margin: 0;
    line-height: 1.45;
}

.shop-bulk-contacts {
    display: flex;
    flex: none;
    gap: 0.5rem;
}

.shop-bulk-note .shop-bulk-contact {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.shop-bulk-note .shop-bulk-contact svg {
    display: block;
}

.shop-bulk-note .shop-bulk-contact.is-whatsapp {
    background: #25d366;
    box-shadow: 0 0 12px rgba(37, 211, 102, 0.35);
}

.shop-bulk-note .shop-bulk-contact.is-telegram {
    background: #229ed9;
    box-shadow: 0 0 12px rgba(34, 158, 217, 0.35);
}

.shop-bulk-note .shop-bulk-contact:hover,
.shop-bulk-note .shop-bulk-contact:focus-visible {
    transform: translateY(-1px) scale(1.06);
    color: #fff;
}

@media (max-width: 480px) {
    .shop-bulk-note {
        flex-direction: column;
        align-items: flex-start;
    }
}

.shop-blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid rgba(255, 196, 0, 0.4);
    border-radius: 0.8rem;
    padding: 1.5rem 1.25rem;
    background: rgba(255, 196, 0, 0.08);
    text-align: center;
}

.shop-blocked-icon {
    color: #ffc400;
    font-size: 1.8rem;
}

.shop-blocked-text {
    margin: 0;
    color: #ffe08a;
    font-weight: 600;
    line-height: 1.45;
}

.shop-blocked-help {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
}

.shop-blocked-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.shop-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.shop-contact-pill i {
    font-size: 1.1rem;
}

.shop-contact-pill.is-whatsapp {
    background: #25d366;
    box-shadow: 0 0 12px rgba(37, 211, 102, 0.35);
}

.shop-contact-pill.is-telegram {
    background: #229ed9;
    box-shadow: 0 0 12px rgba(34, 158, 217, 0.35);
}

.shop-contact-pill:hover,
.shop-contact-pill:focus-visible {
    transform: translateY(-1px) scale(1.04);
    color: #fff;
}

.shop-buy button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.3);
}

.shop-stock-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.shop-stock-counts .counter {
    min-width: 0;
    padding: 0.35rem 0.8rem;
}

.rest-stock-batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
}

.rs-batch-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.rs-schedule-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rs-schedule-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--muted);
    white-space: nowrap;
}

.rest-stock-batch-actions .rs-schedule-input {
    width: auto;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color-scheme: dark;
}

.rest-stock-batch-actions .rs-schedule-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.75;
}

.rest-stock-batch-actions .rs-schedule-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.rs-schedule-form.is-dirty .rs-schedule-input {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px var(--accent-2-soft);
}

.rs-schedule-form.is-dirty button {
    border-color: var(--accent-2);
    color: #ffc2ee;
}

@media (max-width: 40rem) {
    .rest-stock-batch-actions,
    .rs-schedule-form {
        align-items: stretch;
    }

    .rs-schedule-form {
        width: 100%;
    }

    .rest-stock-batch-actions .rs-schedule-input {
        flex: 1 1 12rem;
    }

    .rs-batch-buttons {
        width: 100%;
        margin-left: 0;
    }

    .rs-batch-buttons form {
        flex: 1 1 auto;
    }

    .rs-batch-buttons button {
        width: 100%;
    }
}

.rest-stock-batch-actions form {
    margin: 0;
}

.rest-stock-batch-actions button.compact {
    /* mismo arreglo de .compact que .stock-row-actions: sin esto el botón
       queda más alto y con el texto descuadrado hacia abajo. */
    padding-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Stock reposo → "Pasar a reemplazos" por lote: cantidad con stepper y
   atajos, barra de proporción del lote y vista previa en vivo. */
.rs-to-replacement {
    --tr: 124, 92, 255;
    --tr-solid: #a48bff;
    display: grid;
    gap: 0.75rem;
    margin: 0.75rem 0;
    padding: 0.85rem 0.9rem 0.8rem;
    border: 1px solid rgba(var(--tr), 0.28);
    border-radius: 0.85rem;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--tr), 0.14), transparent 55%),
        var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rs-to-replacement.is-ready {
    border-color: rgba(var(--tr), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--tr), 0.12), 0 8px 24px -12px rgba(var(--tr), 0.55);
}

.rs-to-replacement.is-invalid {
    border-color: rgba(255, 59, 107, 0.55);
}

.rs-to-replacement.is-submitting {
    opacity: 0.7;
    pointer-events: none;
}

.rs-tr-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.rs-tr-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    color: var(--tr-solid);
    background: rgba(var(--tr), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--tr), 0.35);
}

.rs-tr-titles {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.rs-tr-title {
    font-family: var(--heading-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.rs-tr-sub {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--muted);
}

.rs-tr-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.rs-tr-stepper {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface-alt);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rs-tr-stepper:focus-within {
    border-color: var(--tr-solid);
    box-shadow: 0 0 0 3px rgba(var(--tr), 0.22);
}

.rs-to-replacement.is-invalid .rs-tr-stepper {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(255, 59, 107, 0.18);
}

.rs-to-replacement .rs-tr-step {
    width: 2.2rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.rs-to-replacement .rs-tr-step:hover:not(:disabled) {
    color: var(--text);
    background: rgba(var(--tr), 0.16);
    transform: none;
}

.rs-to-replacement .rs-tr-step:disabled {
    opacity: 0.35;
}

.rs-to-replacement .rs-tr-input {
    width: 4.6rem;
    min-width: 0;
    margin: 0;
    padding: 0.45rem 0.3rem;
    border: 0;
    border-inline: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rs-to-replacement .rs-tr-input:focus {
    outline: none;
    box-shadow: none;
}

.rs-tr-input::-webkit-outer-spin-button,
.rs-tr-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rs-tr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.rs-to-replacement .rs-tr-chip {
    min-width: 0;
    margin: 0;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rs-to-replacement .rs-tr-chip:hover {
    color: var(--text);
    border-color: rgba(var(--tr), 0.6);
    background: rgba(var(--tr), 0.1);
    transform: none;
}

.rs-to-replacement .rs-tr-chip.is-active {
    color: #fff;
    border-color: var(--tr-solid);
    background: rgba(var(--tr), 0.32);
}

.rs-to-replacement .rs-tr-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    padding-top: 0.45rem;
    border-color: transparent;
    background: linear-gradient(135deg, #7c5cff, #a48bff);
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 6px 18px -8px rgba(var(--tr), 0.8);
}

.rs-to-replacement .rs-tr-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

.rs-to-replacement .rs-tr-submit:disabled {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--muted);
    box-shadow: none;
    cursor: not-allowed;
}

.rs-tr-meter {
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.rs-tr-meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c5cff, var(--accent));
    transition: width 0.25s ease;
}

.rs-tr-preview {
    margin: -0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.rs-tr-preview strong {
    color: var(--tr-solid);
}

.rs-to-replacement.is-invalid .rs-tr-preview {
    color: #ff8aa6;
}

@media (max-width: 40rem) {
    .rs-tr-stepper {
        flex: 1 1 100%;
    }

    .rs-to-replacement .rs-tr-input {
        flex: 1 1 auto;
    }

    .rs-to-replacement .rs-tr-submit {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rs-to-replacement,
    .rs-tr-meter-fill {
        transition: none;
    }
}

.countdown {
    display: inline-block;
    width: fit-content;
    font-size: 0.82rem;
    font-weight: 650;
    color: #baf6ff;
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.35);
}

.countdown--ready {
    color: #b6ffcf;
    background: rgba(60, 255, 150, 0.12);
    box-shadow: inset 0 0 0 1px rgba(60, 255, 150, 0.35);
}

/* Stock reposo → "Unir lotes": un lote destino (magenta) y los lotes a
   unir (cyan). La fila del destino desactiva su propio "Unir". */
.rs-merge-help {
    margin: -0.25rem 0 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.rs-merge {
    display: grid;
    gap: 0.85rem;
}

.rs-merge-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 26rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.rs-merge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-alt);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.rs-merge-row:hover {
    background: var(--surface-hover);
}

.rs-merge-row.is-source {
    border-color: rgba(0, 240, 255, 0.55);
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), var(--surface-alt) 70%);
}

.rs-merge-row.is-target {
    border-color: rgba(255, 46, 196, 0.65);
    background: linear-gradient(90deg, rgba(255, 46, 196, 0.14), var(--surface-alt) 70%);
    box-shadow: 0 0 22px rgba(255, 46, 196, 0.16);
}

.rs-merge-info {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.rs-merge-date {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--text);
}

.rs-merge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.rs-merge-count {
    color: #baf6ff;
    font-weight: 600;
}

.rs-merge-controls {
    display: flex;
    flex: none;
    gap: 0.4rem;
}

.rs-merge-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/* El input queda accesible por teclado pero invisible: el estilo va en el span. */
.rs-merge-toggle input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.rs-merge-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.rs-merge-toggle span::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border: 1.5px solid currentColor;
    border-radius: 0.2rem;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.rs-merge-toggle--target span::before {
    border-radius: 999px;
}

.rs-merge-toggle:hover span {
    border-color: var(--border-strong);
    color: var(--text);
}

.rs-merge-toggle input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rs-merge-toggle--source input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: #baf6ff;
}

.rs-merge-toggle--source input:checked + span::before {
    background: var(--accent);
    box-shadow: inset 0 0 0 2px #04121a;
}

.rs-merge-toggle--target input:checked + span {
    border-color: var(--accent-2);
    background: var(--accent-2-soft);
    color: #ffc2ee;
}

.rs-merge-toggle--target input:checked + span::before {
    background: var(--accent-2);
    box-shadow: inset 0 0 0 2px #04121a;
}

.rs-merge-toggle input:disabled,
.rs-merge-toggle:has(input:disabled) {
    cursor: not-allowed;
}

.rs-merge-toggle input:disabled + span {
    opacity: 0.35;
    border-color: var(--border);
    color: var(--muted);
}

.rs-merge-summary {
    position: sticky;
    bottom: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.85rem;
    background: rgba(10, 13, 24, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.rs-merge-preview {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.rs-merge-preview p {
    margin: 0;
}

.rs-merge-preview-main {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
}

.rs-merge-preview-main strong {
    color: #ffc2ee;
}

.rs-merge-preview-note {
    font-size: 0.8rem;
    color: #ffd27a;
}

.rs-merge-preview-note::before {
    content: "⚠ ";
}

.rs-merge-actions {
    display: flex;
    flex: none;
    gap: 0.5rem;
}

.rs-merge-actions button.compact {
    /* mismo arreglo de .compact que .stock-row-actions */
    padding-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 40rem) {
    .rs-merge-row,
    .rs-merge-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .rs-merge-controls,
    .rs-merge-actions {
        justify-content: flex-end;
    }

    .rs-merge-list {
        max-height: 22rem;
    }
}

@media (max-width: 52rem) {
    .panel-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1.5rem auto;
    }

    .sidebar {
        position: static;
        top: auto;
    }

    /* En móvil, el sidebar pasa a mosaicos que bajan de línea en vez de
       una sola fila apretada. */
    .sidebar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sidebar-link {
        flex: 1 1 8.5rem;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.6rem 0.35rem;
        text-align: center;
        font-size: 0.85rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .sidebar-link span {
        min-width: 0;
    }

    /* En mosaicos la etiqueta "New" no puede sobresalir: se pisaría con el
       mosaico vecino y quedaría cortada. Va en la esquina del mosaico, pero
       si el mosaico ocupa toda la fila no se aleja más de 6.5rem del centro. */
    .sidebar-new {
        top: 0.3rem;
        right: max(0.3rem, calc(50% - 6.5rem));
        padding: 0.12rem 0.38rem;
        font-size: 0.5rem;
        letter-spacing: 0.06em;
        box-shadow: 0 3px 10px rgba(255, 46, 196, 0.4);
        transform: none;
        animation-name: sidebar-new-float-flat;
    }

    .sidebar-link:hover .sidebar-new {
        box-shadow: 0 4px 12px rgba(255, 46, 196, 0.55);
    }
}

@keyframes sidebar-new-float-flat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@media (max-width: 40rem) {
    .search-row {
        grid-template-columns: 1fr;
    }

    .results-heading,
    .message-header,
    .mail-view-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .container {
        margin: 1.25rem auto;
    }

    .detail-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .mail-view-header,
    .mail-metadata,
    .mail-body {
        padding: 1.25rem;
    }

    .mail-metadata div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .admin-card-row,
    .admin-user-header,
    .assignment-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer {
        gap: 0.5rem;
        padding: 0.55rem 0.7rem;
        font-size: 0.72rem;
        justify-content: space-between;
    }

    .site-footer img {
        width: 1.1rem;
        height: 1.1rem;
    }

    .site-footer-credit {
        min-width: 0;
    }

    .site-footer-social {
        position: static;
        right: auto;
        top: auto;
        transform: none;
        flex: none;
    }
}

/* ============================================================
   Programa de puntos / recompensas del vendedor
   ============================================================ */

.nav-points {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    background: linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft));
    text-decoration: none;
    color: var(--text);
}

.nav-points:hover {
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.22);
}

.nav-points-value {
    font-family: var(--heading-font);
    font-size: 1.35rem;
    font-weight: 700;
    color: #baf6ff;
}

.nav-points-label {
    font-size: 0.74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.reward-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem 2.4rem;
    margin: 0.6rem 0 1rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 240, 255, 0.14), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(255, 46, 196, 0.12), transparent 60%),
        var(--surface-alt);
}

.reward-balance-main {
    display: grid;
    gap: 0.15rem;
}

.reward-balance-value {
    font-family: var(--heading-font);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 700;
    color: #baf6ff;
}

.reward-balance-label {
    font-size: 0.82rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.reward-balance-meta {
    display: flex;
    gap: 1.6rem;
    margin: 0;
}

.reward-balance-meta div {
    display: grid;
    gap: 0.15rem;
}

.reward-balance-meta dt {
    font-size: 0.74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.reward-balance-meta dd {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
}

.reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0.4rem;
}

.reward-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-alt);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

form.reward-card:hover:not(.is-locked) {
    border-color: var(--border-strong);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.16);
    transform: translateY(-2px);
}

.reward-card.is-locked {
    opacity: 0.55;
}

.reward-card-prize {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.02rem;
}

.reward-card-points {
    font-size: 0.85rem;
    font-weight: 650;
    color: #baf6ff;
}

.reward-card button {
    /* .compact trae un padding-top: 1rem que descuadra el texto hacia abajo;
       aquí lo normalizamos y centramos con flex. margin-top:auto pega el botón
       al fondo para que todas las tarjetas de la fila lo alineen igual. */
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.7rem;
    min-height: 2.6rem;
    line-height: 1.2;
    text-align: center;
}

.reward-onme-form {
    display: grid;
    gap: 1.1rem;
    max-width: 44rem;
    margin-top: 1.1rem;
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-alt);
}

.reward-field {
    display: grid;
    gap: 0.4rem;
    max-width: 26rem;
}

.reward-field label {
    font-weight: 650;
    font-size: 0.9rem;
}

/* Selector de tarjeta onme con las imágenes reales como opciones */
.reward-onme-group {
    display: grid;
    gap: 0.7rem;
}

.reward-onme-legend {
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}

.reward-onme-legend span {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--muted);
}

.reward-onme-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.reward-onme-cards.is-preview {
    margin-top: 1rem;
}

.reward-onme-card {
    position: relative;
    display: block;
    border-radius: 0.8rem;
    cursor: pointer;
}

.reward-onme-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 404;
    object-fit: cover;
    border-radius: 0.8rem;
    background: var(--surface-hover);
    transition: transform 160ms ease, filter 160ms ease;
}

.reward-onme-name {
    display: block;
    margin-top: 0.4rem;
    text-align: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85rem;
    color: #baf6ff;
}

.reward-onme-card.is-locked .reward-onme-name {
    color: var(--muted);
}

.reward-onme-card input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Todo lo visual de la tarjeta deja pasar el clic al <input> que hay debajo,
   así seleccionar / quitar funciona igual sobre la imagen que sobre el texto. */
.reward-onme-card img,
.reward-onme-name,
.reward-onme-frame,
.reward-onme-lock {
    pointer-events: none;
}

.reward-onme-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 640 / 404;
    border: 2px solid transparent;
    border-radius: 0.8rem;
    pointer-events: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.reward-onme-card:hover:not(.is-locked) img {
    transform: translateY(-2px);
}

.reward-onme-card input:focus-visible ~ .reward-onme-frame {
    border-color: var(--accent-hover);
}

.reward-onme-card input:checked ~ .reward-onme-frame {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 24px rgba(0, 240, 255, 0.45);
}

.reward-onme-card input:checked ~ .reward-onme-frame::after {
    content: "\2713";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    color: #04121a;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
}

.reward-onme-card.is-locked {
    cursor: not-allowed;
}

.reward-onme-card.is-locked img {
    filter: grayscale(0.7) brightness(0.55);
}

.reward-onme-lock {
    position: absolute;
    left: 50%;
    top: 0.7rem;
    transform: translateX(-50%);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(4, 6, 14, 0.82);
    border: 1px solid var(--border-strong);
    color: #ffd479;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.reward-history {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.reward-history-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-alt);
}

.reward-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
}

.reward-history-detail {
    margin: 0.55rem 0 0;
    font-size: 0.88rem;
}

.reward-spent {
    font-weight: 700;
    color: var(--accent-2);
}

.reward-cred-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}

.reward-status {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reward-status--pending {
    color: #ffd479;
    background: rgba(255, 196, 0, 0.14);
}

.reward-status--approved {
    color: var(--success);
    background: rgba(57, 255, 157, 0.14);
}

.reward-status--rejected {
    color: var(--danger);
    background: rgba(255, 59, 107, 0.14);
}

@media (max-width: 40rem) {
    .reward-balance-value {
        font-size: 2.1rem;
    }

    .reward-onme-form {
        max-width: none;
    }
}

/* Rifas: banner de la rifa activa, tarjetas de canje y "boletos" del historial */
.raffle-hero {
    position: relative;
    overflow: hidden;
    margin: 0.6rem 0 1rem;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 46, 196, 0.16), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.16), transparent 55%),
        var(--surface-alt);
}

.raffle-hero-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffd479;
}

.raffle-hero-title {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.raffle-hero-prize {
    margin: 0.4rem 0 0;
    font-size: 0.92rem;
    color: var(--text);
}

.raffle-hero-stats {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    color: var(--muted);
}

.raffle-hero-meter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Cuenta regresiva hasta que cierra la rifa */
.raffle-countdown {
    margin-top: 1.1rem;
}

.raffle-countdown-caption {
    margin: 0 0 0.5rem;
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    transition: color 200ms ease;
}

.raffle-countdown-units {
    display: flex;
    gap: 0.55rem;
}

.raffle-countdown-unit {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    min-width: 3.1rem;
    padding: 0.5rem 0.4rem;
    border-radius: 0.65rem;
    border: 1px solid var(--border-strong);
    background:
        linear-gradient(160deg, var(--accent-soft), var(--accent-2-soft)),
        var(--surface-hover);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.raffle-countdown-value {
    font-family: var(--heading-font);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: #baf6ff;
    font-variant-numeric: tabular-nums;
}

.raffle-countdown-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.raffle-countdown.is-urgent .raffle-countdown-unit {
    border-color: rgba(255, 59, 107, 0.55);
    animation: raffle-countdown-pulse 1.1s ease-in-out infinite;
}

.raffle-countdown.is-urgent .raffle-countdown-value {
    color: #ff8fa8;
}

.raffle-countdown.is-expired .raffle-countdown-caption {
    color: var(--danger);
}

@keyframes raffle-countdown-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 107, 0); }
    50% { box-shadow: 0 0 16px 2px rgba(255, 59, 107, 0.35); }
}

@media (max-width: 26rem) {
    .raffle-countdown-unit {
        min-width: 2.5rem;
        padding: 0.45rem 0.3rem;
    }

    .raffle-countdown-value {
        font-size: 1.1rem;
    }
}

/* Fila de acciones del admin dentro del banner (Sincronizar / Cerrar rifa):
   separada del texto de arriba para que no se sientan pegadas al resto. */
.raffle-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

/* Caja "Permitir tickets" en la tarjeta de usuario/vendedor: se destaca del
   resto porque es una verificación manual que el admin no debe pasar por
   alto (agregar 3 personas al grupo de WhatsApp). Ámbar mientras falta,
   verde suave una vez ya se permitió. */
.raffle-access-box {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 196, 0, 0.4);
    border-radius: 0.75rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 196, 0, 0.16), transparent 65%),
        var(--surface-alt);
    box-shadow: 0 0 22px rgba(255, 158, 0, 0.1);
}

.raffle-access-box.is-granted {
    border-color: rgba(57, 255, 157, 0.35);
    background:
        radial-gradient(circle at 0% 0%, rgba(57, 255, 157, 0.14), transparent 65%),
        var(--surface-alt);
    box-shadow: none;
}

.raffle-access-status {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

button.raffle-access-button {
    border: 1px solid rgba(255, 196, 0, 0.55);
    color: #241300;
    background: linear-gradient(120deg, #ffd479, #ff9f4a);
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.35), 0 8px 22px rgba(255, 158, 0, 0.3);
}

button.raffle-access-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.5), 0 10px 26px rgba(255, 158, 0, 0.4);
}

/* Link de invitación de un usuario (pestaña Usuarios del admin): gris
   mientras no puede invitar, azul una vez el admin le dio un código. */
.invite-code-box {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-alt);
}

.invite-code-box.is-active {
    border-color: rgba(34, 158, 217, 0.45);
    background:
        radial-gradient(circle at 0% 0%, rgba(34, 158, 217, 0.14), transparent 65%),
        var(--surface-alt);
}

.invite-code-status {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 650;
}

.raffle-meter-slots {
    display: flex;
    gap: 0.35rem;
}

.raffle-meter-slot {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    opacity: 0.4;
    filter: grayscale(1);
}

.raffle-meter-slot.is-filled {
    opacity: 1;
    filter: none;
    border-color: var(--border-strong);
    background: linear-gradient(120deg, var(--accent-soft), var(--accent-2-soft));
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.raffle-meter-label {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted);
}

.raffle-meter-label strong {
    font-family: var(--heading-font);
    color: var(--text);
}

.raffle-locked {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--border-strong);
    border-radius: 0.9rem;
    background: rgba(255, 196, 0, 0.06);
}

.raffle-locked-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.raffle-locked p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text);
}

.raffle-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0.4rem;
}

.raffle-tier-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-alt);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

form.raffle-tier-card:hover:not(.is-locked) {
    border-color: var(--border-strong);
    box-shadow: 0 0 20px rgba(255, 46, 196, 0.2);
    transform: translateY(-2px);
}

.raffle-tier-card.is-locked {
    opacity: 0.55;
}

.raffle-tier-icon {
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.raffle-tier-qty {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.02rem;
}

.raffle-tier-points {
    font-size: 0.85rem;
    font-weight: 650;
    color: #baf6ff;
}

.raffle-tier-card button {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.7rem;
    min-height: 2.6rem;
    line-height: 1.2;
    text-align: center;
}

.raffle-ticket-list {
    display: grid;
    gap: 0.95rem;
    margin-top: 1rem;
}

/* "Boleto" con muesca perforada: cuerpo + talón, como una rifa de verdad */
.raffle-ticket {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-alt);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

.raffle-ticket-body {
    flex: 1;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
}

.raffle-ticket-raffle {
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--text);
}

.raffle-ticket-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.raffle-ticket-stub {
    position: relative;
    flex-shrink: 0;
    width: 7rem;
    display: grid;
    place-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.35rem;
    border-left: 2px dashed var(--border-strong);
    background: linear-gradient(160deg, var(--accent-soft), var(--accent-2-soft));
    border-radius: 0 0.85rem 0.85rem 0;
    text-align: center;
}

.raffle-ticket-stub::before,
.raffle-ticket-stub::after {
    content: "";
    position: absolute;
    left: -0.55rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--background);
    box-shadow: inset 0 0 0 1px var(--border);
}

.raffle-ticket-stub::before {
    top: -0.55rem;
}

.raffle-ticket-stub::after {
    bottom: -0.55rem;
}

.raffle-ticket-number-label {
    font-size: 0.62rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.raffle-ticket-number {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 800;
    color: #baf6ff;
    letter-spacing: 0.01em;
}

.raffle-ticket-winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffd479;
    background: rgba(255, 196, 0, 0.14);
    width: fit-content;
}

.raffle-ticket.is-winner {
    border-color: rgba(255, 196, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.35), 0 0 28px rgba(255, 196, 0, 0.3);
}

.raffle-ticket.is-winner .raffle-ticket-stub {
    background: linear-gradient(160deg, rgba(255, 196, 0, 0.28), rgba(255, 196, 0, 0.1));
    border-left-color: rgba(255, 196, 0, 0.6);
}

.raffle-ticket.is-winner .raffle-ticket-number {
    color: #ffd479;
}

.raffle-ticket.is-closed {
    opacity: 0.6;
}

/* Fila de "Sortear ganador" / "Descargar tickets" en cada rifa del
   historial (admin): separada de lo de arriba y de "Ver participantes",
   que va justo debajo. */
.raffle-history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin: 0.9rem 0;
}

/* Números de ticket por participante, en "Ver participantes" del admin:
   para saber de un vistazo qué papeleta es de quién al sortear. */
.raffle-ticket-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.raffle-ticket-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 700;
    color: #baf6ff;
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.3);
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .raffle-hero-title {
        font-size: 1.25rem;
    }

    .raffle-ticket-stub {
        width: 5.6rem;
        padding: 0.6rem 0.25rem;
    }

    .raffle-ticket-number {
        font-size: 0.9rem;
    }
}

/* Aviso "dónde usar la tarjeta onme" + popup de tiendas (sin JS, checkbox hack) */
.onme-stores {
    margin-top: 1.2rem;
}

.onme-stores-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 1rem 1.15rem;
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 240, 255, 0.1), transparent 60%),
        var(--surface-alt);
}

.onme-stores-lead-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.onme-stores-lead p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.92rem;
    color: var(--text);
}

.onme-stores-open {
    flex: none;
    display: inline-block;
    padding: 0.6rem 1.05rem;
    border-radius: 0.7rem;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.25), 0 8px 24px rgba(0, 240, 255, 0.16);
    transition: filter 160ms ease, box-shadow 160ms ease;
}

.onme-stores-open:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.4), 0 0 22px rgba(0, 240, 255, 0.45);
}

.onme-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.onme-stores-toggle:checked ~ .onme-modal {
    display: flex;
}

:root:has(.onme-stores-toggle:checked) {
    overflow: hidden;
}

.onme-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.74);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
    animation: onme-fade 180ms ease;
}

.onme-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(52rem, 100%);
    max-height: min(82vh, 44rem);
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 240, 255, 0.18);
    overflow: hidden;
    animation: onme-pop 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.onme-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.onme-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.onme-modal-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.onme-modal-close:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.onme-modal-body {
    overflow-y: auto;
    padding: 1.1rem 1.2rem 1.3rem;
}

.onme-store-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 0.25rem 1rem;
}

.onme-store-list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.onme-store-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.2rem;
    border-radius: 999px;
    background: var(--accent);
}

@keyframes onme-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes onme-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .onme-modal-backdrop,
    .onme-modal-card {
        animation: none;
    }
}

@media (max-width: 40rem) {
    .onme-stores-open {
        flex: 1 1 100%;
        text-align: center;
    }

    .onme-modal {
        padding: 0.5rem;
    }

    .onme-modal-card {
        max-height: 88vh;
    }
}

/* ---- Nova (widget de soporte) ---- */

.nova-widget {
    position: fixed;
    right: 1.25rem;
    bottom: 4.5rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.nova-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(255, 46, 196, 0.18));
    color: var(--text);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 240, 255, 0.18);
    backdrop-filter: blur(10px);
}

.nova-toggle:hover {
    border-color: var(--accent);
}

.nova-toggle-tooltip {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    right: 0;
    width: max-content;
    max-width: 12rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-strong);
    background: var(--surface-alt);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.4rem);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    pointer-events: none;
}

.nova-toggle-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 1.2rem;
    width: 0.65rem;
    height: 0.65rem;
    background: var(--surface-alt);
    border-right: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    transform: rotate(45deg) translateY(-0.33rem);
}

.nova-widget:not(.nova-open) .nova-toggle:hover .nova-toggle-tooltip,
.nova-widget.nova-tooltip-visible:not(.nova-open) .nova-toggle-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nova-toggle-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.nova-panel {
    width: min(22rem, calc(100vw - 2rem));
    height: min(30rem, calc(100vh - 10.5rem));
    display: flex;
    flex-direction: column;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
    overflow: hidden;
    backdrop-filter: blur(16px);
}

/* Sin esto, `display: flex` de arriba gana sobre el `display: none` que el
   navegador aplica por el atributo [hidden], y el panel queda visible
   siempre — por eso hay que forzarlo explícitamente aquí. */
.nova-panel[hidden] {
    display: none;
}

.nova-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.nova-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nova-banner {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}

.nova-banner-info {
    background: var(--accent-soft);
    color: var(--text);
}

.nova-banner-success {
    background: rgba(57, 255, 157, 0.14);
    color: var(--success);
}

.nova-banner-error {
    background: rgba(255, 59, 107, 0.14);
    color: var(--danger);
}

.nova-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0.5rem var(--success);
}

.nova-close {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
}

.nova-close:hover {
    color: var(--text);
}

.nova-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nova-msg {
    max-width: 88%;
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.nova-msg-bot {
    align-self: flex-start;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-bottom-left-radius: 0.25rem;
}

.nova-msg-user {
    align-self: flex-end;
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    border-bottom-right-radius: 0.25rem;
    color: var(--text);
}

.nova-msg-typing {
    color: var(--muted);
    font-style: italic;
}

.nova-msg-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 240, 255, 0.4);
}

.nova-msg-link:hover {
    color: var(--accent-hover);
}

.nova-msg-admin {
    align-self: flex-start;
    background: var(--accent-2-soft);
    border: 1px solid var(--accent-2);
    border-bottom-left-radius: 0.25rem;
}

.nova-msg-admin::before {
    content: "Administrador";
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-2);
    margin-bottom: 0.2rem;
}

.nova-msg-system {
    align-self: center;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.nova-msg-with-action {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nova-msg-with-action.nova-msg-error {
    border-color: var(--danger);
}

.nova-inline-action {
    align-self: flex-start;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--accent-2);
    background: var(--accent-2-soft);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.nova-inline-action:hover:not(:disabled) {
    background: var(--accent-2);
    color: #1a0313;
}

.nova-inline-action:disabled {
    opacity: 0.6;
    cursor: default;
}

.nova-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.nova-input {
    flex: 1;
    resize: none;
    height: 2.4rem;
    min-height: 2.4rem;
    max-height: 7.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
}

.nova-input:focus {
    outline: none;
    border-color: var(--accent);
}

.nova-send {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #04121a;
    padding: 0;
    cursor: pointer;
}

.nova-send svg {
    transform: translateX(-1px);
}

.nova-send:disabled,
.nova-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nova-send:hover:not(:disabled) {
    background: var(--accent-hover);
}

@media (max-width: 30rem) {
    .nova-widget {
        right: 0.75rem;
        bottom: 3.75rem;
    }

    .nova-toggle-label {
        display: none;
    }

    .nova-toggle {
        width: 3.25rem;
        height: 3.25rem;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
}

/* ---- Panel admin: pestaña Soporte en vivo ---- */

.support-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1.25rem;
    align-items: start;
}

.support-admin-chat {
    display: flex;
    flex-direction: column;
    min-height: 26rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
    overflow: hidden;
}

.support-admin-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-hover);
}

.support-admin-messages {
    flex: 1;
    overflow-y: auto;
    max-height: 24rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.support-msg {
    max-width: 75%;
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.support-msg-user {
    align-self: flex-start;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-bottom-left-radius: 0.25rem;
}

.support-msg-admin {
    align-self: flex-end;
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    border-bottom-right-radius: 0.25rem;
    color: var(--text);
}

.support-msg-system {
    align-self: center;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.support-admin-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}

.support-admin-form textarea {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    height: 3.6rem;
    min-height: 3.6rem;
    max-height: 8rem;
    line-height: 1.3;
    resize: none;
}

.support-admin-form button {
    grid-column: 2;
    white-space: nowrap;
}

.support-admin-queue {
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
    padding: 1rem;
}

.support-admin-queue h3 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-family: var(--heading-font);
}

.support-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.support-queue-item:last-child {
    border-bottom: none;
}

@media (max-width: 60rem) {
    .support-admin-layout {
        grid-template-columns: 1fr;
    }
}

/* ============ Modal de anuncio (Telegram / WhatsApp) ============ */

.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.promo-modal.is-open {
    opacity: 1;
    visibility: visible;
}

html.promo-modal-lock {
    overflow: hidden;
}

.promo-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 15%, rgba(0, 240, 255, 0.14), transparent 55%),
        rgba(2, 4, 10, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.promo-modal-card {
    position: relative;
    width: min(28rem, 100%);
    border-radius: 1.7rem;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 60px rgba(0, 240, 255, 0.16);
    transform: translateY(18px) scale(0.94);
    opacity: 0;
    transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease;
}

.promo-modal.is-open .promo-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.promo-modal-inner {
    border-radius: inherit;
    padding: 2.3rem 1.9rem 1.6rem;
    text-align: center;
}

.promo-modal-glow {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(46px);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
}

.promo-modal-glow-a {
    width: 12rem;
    height: 12rem;
    top: -4rem;
    left: -3.5rem;
    background: var(--accent);
    animation: promo-float-a 7s ease-in-out infinite;
}

.promo-modal-glow-b {
    width: 11rem;
    height: 11rem;
    bottom: -4.5rem;
    right: -3.5rem;
    background: var(--accent-2);
    animation: promo-float-b 8s ease-in-out infinite;
}

@keyframes promo-float-a {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0.8rem, 1rem); }
}

@keyframes promo-float-b {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-0.8rem, -0.8rem); }
}

.promo-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(4, 6, 14, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.promo-modal-close svg {
    display: block;
}

.promo-modal-close:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(4, 6, 14, 0.78);
    transform: rotate(90deg);
}

.promo-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 auto 1rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.promo-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    background: linear-gradient(120deg, var(--text), var(--accent) 55%, var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.promo-modal-subtitle {
    margin: 0 0 1.6rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.promo-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.promo-modal-btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    text-decoration: none;
    color: var(--text);
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.promo-modal-btn:hover {
    transform: translateY(-2px);
}

.promo-modal-btn-telegram:hover {
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.18);
}

.promo-modal-btn-whatsapp:hover {
    border-color: rgba(57, 255, 157, 0.55);
    box-shadow: 0 10px 30px rgba(57, 255, 157, 0.18);
}

.promo-modal-btn-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.9rem;
}

.promo-modal-btn-telegram .promo-modal-btn-icon {
    background: rgba(0, 240, 255, 0.14);
    color: var(--accent);
}

.promo-modal-btn-whatsapp .promo-modal-btn-icon {
    background: rgba(57, 255, 157, 0.14);
    color: var(--success);
}

.promo-modal-btn-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.promo-modal-btn-copy strong {
    font-size: 0.94rem;
}

.promo-modal-btn-copy span {
    font-size: 0.8rem;
    color: var(--muted);
}

.promo-modal-btn-arrow {
    flex: none;
    color: var(--muted);
    transition: transform 160ms ease, color 160ms ease;
}

.promo-modal-btn:hover .promo-modal-btn-arrow {
    transform: translateX(3px);
    color: var(--text);
}

.promo-modal-footer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.promo-modal-later,
.promo-modal-joined {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.promo-modal-later {
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted);
}

.promo-modal-later:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.promo-modal-joined {
    border: 1px solid rgba(57, 255, 157, 0.4);
    background: rgba(57, 255, 157, 0.14);
    color: var(--success);
}

.promo-modal-joined:hover {
    border-color: rgba(57, 255, 157, 0.7);
    background: rgba(57, 255, 157, 0.22);
    box-shadow: 0 10px 26px rgba(57, 255, 157, 0.22);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .promo-modal-card {
        transition: opacity 160ms ease;
        transform: none;
    }

    .promo-modal-glow-a,
    .promo-modal-glow-b {
        animation: none;
    }
}

@media (max-width: 26rem) {
    .promo-modal-card {
        border-radius: 1.4rem;
    }

    .promo-modal-inner {
        padding: 1.9rem 1.3rem 1.4rem;
    }

    .promo-modal-title {
        font-size: 1.3rem;
    }
}

/* ============ Barra de anuncio (Telegram / WhatsApp) ============ */

/* En panel.php el banner vive pegado debajo del header dentro de este
   wrapper, que es el que queda fijo (sticky) arriba al hacer scroll; el
   header y el banner pasan a position:static porque el wrapper ya se
   encarga de pegarlos juntos como una sola unidad. En login/register no hay
   header propio, así que ahí el banner queda sticky por sí mismo (ver
   .promo-topbar más abajo). */
.panel-topbar-group {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* relative + z-index (y no static): la barra y la franja de promo tienen
   backdrop-filter, que crea una capa propia; sin esto la franja, que va
   después, tapa el menú de cuenta desplegado desde la barra. */
.panel-topbar-group .topbar {
    position: relative;
    z-index: 2;
}

.panel-topbar-group .promo-topbar {
    position: static;
}

.promo-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 2.5rem;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    background:
        linear-gradient(90deg, rgba(0, 240, 255, 0.2), rgba(124, 92, 255, 0.18), rgba(255, 46, 196, 0.2)),
        rgba(5, 6, 12, 0.92);
    border-bottom: 1px solid var(--border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.login-page .promo-topbar {
    /* position:sticky combinado con márgenes negativos rendía distinto
       según el navegador y dejaba un hueco en blanco debajo del banner;
       aquí no hace falta que quede pegado al hacer scroll (la página es
       corta), así que va estático para que el alto que ocupa en el flujo
       sea siempre el real. */
    position: static;
    flex: none;
    margin: -1rem -1rem 1.4rem;
    width: calc(100% + 2rem);
}

.promo-topbar::-webkit-scrollbar {
    display: none;
}

.promo-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.promo-topbar-text {
    flex: none;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(120deg, var(--text), var(--accent) 60%, var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.promo-topbar-sep {
    flex: none;
    width: 1px;
    height: 1.1rem;
    background: var(--border-strong);
}

.promo-topbar-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    color: var(--muted);
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.promo-topbar-icon:nth-of-type(1) {
    color: var(--accent);
}

.promo-topbar-icon:nth-of-type(1):hover {
    background: rgba(0, 240, 255, 0.16);
    color: var(--accent-hover);
    transform: translateY(-1px);
}

.promo-topbar-icon:nth-of-type(2) {
    color: var(--success);
}

.promo-topbar-icon:nth-of-type(2):hover {
    background: rgba(57, 255, 157, 0.16);
    transform: translateY(-1px);
}

@media (max-width: 30rem) {
    .promo-topbar-inner {
        gap: 0.85rem;
        padding: 0 0.85rem;
    }

    .promo-topbar-text {
        font-size: 0.74rem;
    }
}

/* Sorteo de rifa en vivo (admin): overlay con "reel" de números y revelado
   del ganador. El correo se enmascara en servidor (Html::maskEmail) porque
   el sorteo suele hacerse compartiendo pantalla. */
.raffle-draw-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.raffle-draw-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: raffle-draw-fade 180ms ease;
}

.raffle-draw-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    width: min(26rem, 100%);
    padding: 2.2rem 1.8rem;
    text-align: center;
    border: 1px solid var(--border-strong);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 46, 196, 0.18), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(0, 240, 255, 0.18), transparent 55%),
        var(--surface);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 240, 255, 0.2);
    animation: raffle-draw-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.raffle-draw-eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffd479;
}

.raffle-draw-spinner {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 3px solid rgba(0, 240, 255, 0.2);
    border-top-color: var(--accent);
    animation: raffle-draw-spin 0.8s linear infinite;
}

.raffle-draw-reel {
    font-family: var(--heading-font);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.raffle-draw-status {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
}

.raffle-draw-result-icon {
    font-size: 2.6rem;
    line-height: 1;
    animation: raffle-draw-bounce 600ms ease;
}

.raffle-draw-winner-email {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.raffle-draw-error {
    margin: 0;
    font-size: 0.9rem;
    color: var(--danger);
}

.raffle-draw-close {
    margin-top: 0.3rem;
}

@keyframes raffle-draw-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes raffle-draw-pop {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes raffle-draw-spin {
    to { transform: rotate(360deg); }
}

@keyframes raffle-draw-bounce {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 2.9rem;
}

.login-card form .password-toggle,
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0;
    padding: 0;
    border-radius: 0.5rem;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 1.1rem;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
    filter: none;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--accent-soft);
}

.two-factor-code {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
}

.two-factor-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.two-factor-actions form {
    flex: 1;
}

.two-factor-actions button {
    width: 100%;
}

/* Aviso de precio de la tienda: etiqueta con llama animada. */
.shop-hint-hot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 138, 0, 0.45);
    border-radius: 999px;
    padding: 0.4rem 0.95rem 0.4rem 0.7rem;
    background: linear-gradient(120deg, rgba(255, 94, 0, 0.14), rgba(255, 46, 196, 0.12));
    font-weight: 700;
    animation: shop-hint-glow 2.4s ease-in-out infinite;
}

.shop-hint-flame {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    background: linear-gradient(0deg, #ff3d00 10%, #ff9100 55%, #ffe066 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.75));
    transform-origin: 50% 90%;
    animation: shop-flame-flicker 1.1s ease-in-out infinite alternate;
}

.shop-hint-text {
    background: linear-gradient(90deg, #ffd27a, #ff8a3d, #ff2ec4, #ffd27a);
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shop-hint-shimmer 4s linear infinite;
}

@keyframes shop-flame-flicker {
    0% { transform: scale(1) rotate(-4deg); filter: drop-shadow(0 0 4px rgba(255, 120, 0, 0.6)); }
    35% { transform: scale(1.12, 1.18) rotate(3deg); }
    70% { transform: scale(0.96, 1.05) rotate(-2deg); filter: drop-shadow(0 0 10px rgba(255, 150, 0, 0.95)); }
    100% { transform: scale(1.08, 1.14) rotate(4deg); filter: drop-shadow(0 0 7px rgba(255, 90, 0, 0.8)); }
}

@keyframes shop-hint-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 110, 0, 0); }
    50% { box-shadow: 0 0 18px rgba(255, 110, 0, 0.35), 0 0 30px rgba(255, 46, 196, 0.15); }
}

@keyframes shop-hint-shimmer {
    to { background-position: 300% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-hint-hot,
    .shop-hint-flame,
    .shop-hint-text {
        animation: none;
    }
}

.activity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.activity-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    color: var(--muted);
    background: var(--surface-alt);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.activity-chip .bi {
    color: var(--accent);
    font-size: 0.85rem;
}

.activity-chip--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
}

.activity-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.activity-chip--online {
    border-color: rgba(57, 255, 157, 0.4);
    color: var(--success);
    background: rgba(57, 255, 157, 0.1);
}

.activity-chip--online .activity-dot {
    box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.6);
    animation: activity-pulse 1.8s ease-out infinite;
}

.activity-chip--recent {
    border-color: rgba(255, 196, 0, 0.35);
    color: #ffd666;
    background: rgba(255, 196, 0, 0.08);
}

.activity-chip--idle,
.activity-chip--none {
    color: var(--muted);
}

.activity-chip--none .activity-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

@keyframes activity-pulse {
    0% { box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(57, 255, 157, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 255, 157, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .activity-chip--online .activity-dot {
        animation: none;
    }
}

/* ---------- Registro de ventas (admin) ---------- */

.sales-section,
.sales-chart-card,
.sales-table-card {
    min-width: 0;
}

.sales-heading {
    flex-wrap: wrap;
}

.sales-title {
    margin: 0;
}

.sales-range {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-alt);
}

.sales-range-chip {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sales-range-chip:hover {
    color: var(--text);
}

.sales-range-chip.is-active {
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), #7c5cff);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}

.sales-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 68rem) {
    .sales-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sales-kpi {
    --kpi: var(--accent);
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.15rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--kpi) 22%, transparent), transparent 9rem),
        var(--surface-alt);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sales-kpi:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--kpi) 55%, transparent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--kpi) 18%, transparent);
}

.sales-kpi--revenue { --kpi: var(--accent-2); }
.sales-kpi--today { --kpi: #7c5cff; }
.sales-kpi--best { --kpi: #ffc53d; }

.sales-kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.sales-kpi-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    color: var(--kpi);
    background: color-mix(in srgb, var(--kpi) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi) 35%, transparent);
    font-size: 1.05rem;
}

.sales-kpi p {
    margin: 0;
}

.sales-kpi-label {
    padding-top: 0.2rem;
    overflow-wrap: normal;
    word-break: normal;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sales-kpi-value {
    margin: 0.35rem 0 0.3rem !important;
    color: var(--text);
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 22px color-mix(in srgb, var(--kpi) 45%, transparent);
}

.sales-kpi-sub {
    color: var(--muted);
    font-size: 0.82rem;
}

.sales-delta.is-up { color: var(--success); }
.sales-delta.is-down { color: var(--danger); }

.sales-chart-card,
.sales-table-card {
    margin-bottom: 1.25rem;
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-alt);
}

.sales-chart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.sales-chart-header h3 {
    margin: 0;
}

.sales-chart-header p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
}

.sales-series-toggles {
    display: flex;
    gap: 0.4rem;
}

.sales-series-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.sales-series-toggle:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    filter: none;
}

.sales-series-toggle[aria-pressed="false"] {
    opacity: 0.45;
}

.sales-series-toggle[aria-pressed="false"] .sales-swatch {
    box-shadow: none;
}

.sales-swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
    background: var(--swatch);
    box-shadow: 0 0 10px var(--swatch);
}

.is-accounts { --swatch: var(--accent); }
.is-revenue { --swatch: var(--accent-2); }

.sales-3d {
    position: relative;
    height: clamp(20rem, 52vh, 34rem);
    overflow: hidden;
    border-radius: 0.8rem;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(124, 92, 255, 0.18), transparent 70%),
        radial-gradient(ellipse at 50% 0%, rgba(0, 240, 255, 0.08), transparent 60%),
        #060813;
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.1);
    cursor: grab;
    touch-action: none;
}

.sales-3d:active {
    cursor: grabbing;
}

.sales-3d canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.sales-3d-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    color: var(--muted);
    text-align: center;
}

.sales-3d-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    gap: 0.3rem;
    min-width: 11rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    background: rgba(8, 11, 22, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.15);
    font-size: 0.85rem;
    pointer-events: none;
}

.sales-3d-tooltip[hidden],
.sales-3d-loading[hidden] {
    display: none;
}

.sales-3d-tooltip strong {
    margin-bottom: 0.15rem;
    text-transform: capitalize;
}

.sales-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
}

.sales-tooltip-row b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sales-tooltip-row.is-accounts b,
.sales-tooltip-row.is-revenue b {
    color: var(--swatch);
}

.sales-hide-empty {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.sales-hide-empty input {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
}

.sales-table-scroll {
    max-height: 30rem;
    overflow: auto;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sales-table th,
.sales-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.08);
    text-align: left;
    white-space: nowrap;
}

.sales-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--muted);
    background: #0a0d18;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sales-table tbody th {
    font-weight: 600;
}

.sales-table tbody tr:hover {
    background: rgba(0, 240, 255, 0.05);
}

.sales-table tr.is-empty {
    color: var(--muted);
}

.sales-table tfoot th,
.sales-table tfoot td {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 0;
    background: #0a0d18;
    font-weight: 750;
}

.sales-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sales-table .num-left {
    font-variant-numeric: tabular-nums;
}

.sales-bar-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 9rem;
}

.sales-bar-cell .num {
    min-width: 4.5rem;
    text-align: right;
}

.sales-bar {
    position: relative;
    flex: 1;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sales-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--swatch) 40%, transparent), var(--swatch));
    box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 60%, transparent);
}

.sales-section .empty-state {
    margin-top: 0.75rem;
}

@media (max-width: 40rem) {
    .sales-section {
        padding: 1rem;
    }

    .sales-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sales-range {
        width: 100%;
    }

    .sales-range-chip {
        flex: 1;
        padding-inline: 0.3rem;
        text-align: center;
    }

    .sales-kpis {
        gap: 0.65rem;
    }

    .sales-kpi {
        padding: 0.9rem;
    }

    .sales-kpi-icon {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.95rem;
    }

    .sales-kpi-label {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    .sales-kpi-sub {
        font-size: 0.78rem;
    }

    .sales-chart-card,
    .sales-table-card {
        padding: 0.8rem;
    }

    .sales-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sales-series-toggles {
        width: 100%;
    }

    .sales-series-toggle[data-series] {
        flex: 1;
        justify-content: center;
    }

    .sales-3d {
        height: 22rem;
    }

    .sales-3d-tooltip {
        min-width: 9.5rem;
        font-size: 0.8rem;
    }

    .sales-table {
        font-size: 0.82rem;
    }

    .sales-table th,
    .sales-table td {
        padding: 0.55rem 0.4rem;
    }

    .sales-bar-cell {
        min-width: 0;
    }

    .sales-bar-cell .num {
        min-width: 0;
    }

    /* En móvil la barrita no cabe: se deja sólo el número. */
    .sales-bar {
        display: none;
    }

    .sales-table .num-left,
    .sales-bar-cell {
        justify-content: flex-end;
        text-align: right;
    }

    .sales-table thead th:nth-child(n + 3) {
        text-align: right;
    }
}

@media (max-width: 30rem) {
    .sales-kpis {
        grid-template-columns: 1fr;
    }

    .sales-kpi-value {
        font-size: 1.5rem;
    }

    .sales-3d {
        height: 24rem;
    }

    .sales-year {
        display: none;
    }

    /* Pedidos ya aparece en las tarjetas y en el tooltip del gráfico. */
    .sales-table th:nth-child(2),
    .sales-table td:nth-child(2) {
        display: none;
    }

    .sales-table thead th {
        letter-spacing: 0.04em;
    }

    .sales-hint-desktop {
        display: none;
    }
}

@media (max-width: 23rem) {
    .sales-section {
        padding: 0.8rem;
    }

    .sales-table {
        font-size: 0.76rem;
    }

    .sales-table th,
    .sales-table td {
        padding: 0.5rem 0.25rem;
    }

    .sales-series-toggles {
        gap: 0.3rem;
    }

    .sales-series-toggle {
        padding: 0.4rem 0.55rem;
        font-size: 0.8rem;
    }
}

/* Admin: solicitudes de reemplazo agrupadas por tipo y por fecha */
.replacement-requests-section .section-heading {
    margin-bottom: 1.5rem;
}

.replacement-type-group + .replacement-type-group {
    margin-top: 1.1rem;
}

.replacement-type-group > .order-accordion-summary {
    align-items: center;
    padding: 1.1rem 1.3rem;
}

.replacement-type-group > .order-accordion-summary h3 {
    flex: 1 1 11rem;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
}

.replacement-type-group > .order-accordion-body {
    gap: 0.85rem;
    padding: 0.5rem 1.1rem 1.1rem;
}

.replacement-date-group {
    background: rgba(4, 6, 14, 0.35);
}

.replacement-date-group + .replacement-date-group {
    margin-top: 0;
}

.replacement-date-group > .order-accordion-summary {
    align-items: center;
    padding: 0.85rem 1.1rem;
}

.replacement-date-group > .order-accordion-body {
    gap: 1rem;
    padding: 0.5rem 0.9rem 0.9rem;
}

.replacement-type-group .order-group-count {
    margin-left: auto;
}

.replacement-date-group > .order-accordion-summary > span:nth-child(2) {
    flex: 1 1 auto;
}

.replacement-pending-count {
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Tarjeta de una solicitud */
.replacement-card {
    display: grid;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    box-shadow: none;
}

.replacement-card p {
    margin: 0;
}

.replacement-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.replacement-card-head form {
    margin: 0;
    flex: none;
}

.replacement-card-head button.compact {
    padding-top: 0.45rem;
}

.replacement-card-title h3 {
    margin: 0;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.replacement-card-title .status {
    margin-top: 0.45rem;
}

.replacement-card-meta {
    font-size: 0.9rem;
}

.replacement-card-accounts {
    margin: 0;
}

.replacement-cred {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

.replacement-card-info {
    display: grid;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.replacement-card-info a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.replacement-card-footer {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

/* Motivo del rechazo de un reemplazo (admin y usuario) */
.replacement-reject-form {
    display: grid;
    gap: 0.6rem;
}

.replacement-reject-form label {
    margin: 0;
    font-size: 0.92rem;
}

.replacement-reject-form textarea {
    min-height: 4.75rem;
    resize: vertical;
}

.replacement-decision-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.replacement-decision-actions button {
    min-width: 7.5rem;
}

.replacement-decision-actions button.compact {
    min-width: 0;
    padding-top: 0.45rem;
}

.replacement-reject-edit {
    display: grid;
}

.replacement-reject-edit > summary {
    width: fit-content;
    cursor: pointer;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
}

.replacement-reject-edit[open] > summary {
    margin-bottom: 0.6rem;
}

.replacement-reject-message {
    display: block;
    white-space: pre-line;
    margin: 0.5rem 0 0.2rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--danger);
    border-radius: 0.5rem;
    background: rgba(255, 59, 107, 0.08);
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-line;
}

.replacement-card .replacement-reject-message {
    margin: 0;
}

.replacement-reject-missing {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #ff90ab;
    font-size: 0.9rem;
}

@media (max-width: 40rem) {
    .replacement-type-group > .order-accordion-body,
    .replacement-date-group > .order-accordion-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .replacement-card {
        padding: 0.95rem;
    }

    .replacement-decision-actions button {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Usuario: historial "Mis solicitudes" de reemplazo */
.replacement-history-item {
    align-items: flex-start;
    padding: 0.95rem 1.05rem;
}

.replacement-history-info {
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.replacement-history-info .replacement-reject-message {
    margin: 0.6rem 0 0.4rem;
}

.replacement-history-info .replacement-rejected-note {
    line-height: 1.5;
}

.replacement-history-item > .status {
    flex: none;
    margin-top: 0;
}

/* Admin: miniaturas de las imágenes de prueba de un reemplazo */
.replacement-proofs {
    display: grid;
    gap: 0.45rem;
    font-size: 0.85rem;
}

.replacement-proof-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.replacement-proof-thumb {
    display: block;
    width: 4.75rem;
    height: 4.75rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface-alt);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.replacement-proof-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.replacement-proof-thumb:hover {
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

/* Reemplazo: paso 2 (imágenes, políticas y envío) tras elegir el motivo */
.replacement-step2 {
    display: grid;
    gap: 1rem;
}

.replacement-form.is-stepped .replacement-step2:not(.is-open) {
    display: none;
}

.replacement-step2.is-revealing {
    animation: rn-reveal 320ms ease both;
}

@keyframes rn-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Ventana con el comunicado de cada motivo */
.rn-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    overflow: visible;
}

.rn-dialog::backdrop {
    background: rgba(2, 4, 10, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.rn-dialog[open] {
    animation: rn-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.rn-dialog[open]::backdrop {
    animation: rn-fade 200ms ease both;
}

@keyframes rn-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@keyframes rn-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rn-card {
    position: relative;
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 2rem);
    padding: 1.5rem 1.5rem 1.35rem;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: 1.1rem;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(0, 240, 255, 0.1), transparent 55%),
        radial-gradient(120% 90% at 0% 100%, rgba(255, 46, 196, 0.08), transparent 55%),
        #0b0f1c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 240, 255, 0.12);
}

.rn-card p {
    margin: 0;
}

.rn-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface-alt);
    box-shadow: none;
    font-size: 0.8rem;
}

.rn-close:hover {
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: none;
    filter: none;
}

.rn-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 2.25rem;
}

.rn-icon {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: none;
    border-radius: 0.85rem;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    font-size: 1.3rem;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
}

.rn-eyebrow {
    color: var(--accent);
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rn-head h3 {
    margin: 0.15rem 0 0;
    font-size: 1.2rem;
    line-height: 1.25;
}

.rn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.rn-badge.is-ok {
    color: #7dffbc;
    border: 1px solid rgba(57, 255, 157, 0.4);
    background: rgba(57, 255, 157, 0.1);
    box-shadow: 0 0 14px rgba(57, 255, 157, 0.12);
}

.rn-badge.is-no {
    color: #ff90ab;
    border: 1px solid rgba(255, 59, 107, 0.4);
    background: rgba(255, 59, 107, 0.1);
}

.rn-intro {
    font-size: 0.97rem;
    line-height: 1.55;
}

.rn-tips {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: rgba(4, 6, 14, 0.55);
}

.rn-tips-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.92rem;
}

.rn-tips-title i {
    color: var(--accent);
}

.rn-tips ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rn-tips li {
    position: relative;
    padding-left: 1.4rem;
    color: #c9d6ee;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rn-tips li::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.35rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.rn-outro {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    color: #ffd9a0;
    border: 1px solid rgba(255, 179, 71, 0.35);
    background: rgba(255, 179, 71, 0.07);
    font-size: 0.88rem;
    line-height: 1.45;
}

.rn-outro i {
    margin-top: 0.1rem;
}

/* Botón a la guía pública de verificación (motivos con 'guide'). */
.rn-guide-lead {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: -0.4rem !important;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.45;
}

.rn-guide-lead i {
    flex: none;
    margin-top: 0.15rem;
    color: #ffc94d;
}

.rn-guide {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.95rem 0.75rem 0.75rem;
    border: 1px solid rgba(57, 255, 157, 0.5);
    border-radius: 0.9rem;
    color: var(--text);
    background: linear-gradient(120deg, rgba(57, 255, 157, 0.14), rgba(0, 240, 255, 0.08));
    text-decoration: none;
    box-shadow: 0 0 22px rgba(57, 255, 157, 0.12);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.rn-guide:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(57, 255, 157, 0.24);
}

.rn-guide-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    color: #04121a;
    background: linear-gradient(135deg, #39ff9d, #2ef6ff);
    font-size: 1.2rem;
}

.rn-guide-text {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 0.1rem;
}

.rn-guide-text strong {
    color: #7dffbc;
    font-size: 0.98rem;
}

.rn-guide-text small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.rn-guide > .bi {
    flex: none;
    color: #7dffbc;
}

.rn-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

@media (max-width: 40rem) {
    .rn-card {
        padding: 1.25rem 1.1rem 1.1rem;
    }

    .rn-actions {
        flex-direction: column-reverse;
    }

    .rn-actions button {
        width: 100%;
    }
}

.rn-badge.is-review {
    color: #ffc978;
    border: 1px solid rgba(255, 179, 71, 0.42);
    background: rgba(255, 179, 71, 0.1);
    box-shadow: 0 0 14px rgba(255, 179, 71, 0.12);
}

/* Etiqueta del comunicado más visible: franja a todo el ancho */
.rn-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.rn-badge i {
    font-size: 1.35rem;
}

.rn-badge.is-ok {
    border-width: 1.5px;
    background: rgba(57, 255, 157, 0.12);
    box-shadow: 0 0 22px rgba(57, 255, 157, 0.18), inset 0 0 18px rgba(57, 255, 157, 0.06);
}

.rn-badge.is-review {
    border-width: 1.5px;
    background: rgba(255, 179, 71, 0.13);
    box-shadow: 0 0 22px rgba(255, 179, 71, 0.18), inset 0 0 18px rgba(255, 179, 71, 0.06);
}

.rn-badge.is-no {
    border-width: 1.5px;
    background: rgba(255, 59, 107, 0.12);
    box-shadow: 0 0 22px rgba(255, 59, 107, 0.18);
}

.rn-icon.is-no {
    color: #ff5c84;
    background: rgba(255, 59, 107, 0.12);
    border-color: rgba(255, 59, 107, 0.45);
    box-shadow: 0 0 18px rgba(255, 59, 107, 0.25);
}

/* Capturas de ejemplo del comunicado: la imagen centrada sobre un fondo
   difuminado de sí misma; con dos, quedan lado a lado recortadas arriba. */
.rn-media {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.rn-shots {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    background: #060912;
}

.rn-shots-bg {
    position: absolute;
    inset: -2rem;
    z-index: -1;
    width: calc(100% + 4rem);
    height: calc(100% + 4rem);
    object-fit: cover;
    filter: blur(28px) saturate(1.4);
    opacity: 0.45;
    pointer-events: none;
}

.rn-shots::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(80% 70% at 50% 0%, rgba(0, 240, 255, 0.14), transparent 70%),
        linear-gradient(180deg, transparent 55%, rgba(6, 9, 18, 0.7));
}

.rn-shot {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.85rem;
    overflow: hidden;
    background: #000;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 240, 255, 0.08);
    cursor: zoom-in;
}

.rn-shot:hover {
    filter: none;
    transform: translateY(-2px);
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 240, 255, 0.28);
}

.rn-shot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.rn-shot img {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(13rem, 36vh, 19rem);
    object-fit: cover;
    object-position: top;
}

.rn-media.is-multi .rn-shot {
    flex: 1 1 0;
    max-width: 11rem;
}

.rn-media.is-multi .rn-shot img {
    width: 100%;
}

.rn-media.is-wide .rn-shot {
    flex: 0 1 26rem;
}

.rn-media.is-wide .rn-shot img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* En un recorte bajo, la etiqueta taparía el texto de la captura. */
.rn-media.is-wide .rn-shot-label {
    display: none;
}

.rn-shot-label {
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.45rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.8rem;
    color: #fff;
    background: rgba(4, 6, 14, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.rn-shot-zoom {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    color: #fff;
    background: rgba(4, 6, 14, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.75rem;
    opacity: 0.85;
    transition: opacity 160ms ease, background 160ms ease;
}

.rn-shot:hover .rn-shot-zoom {
    opacity: 1;
    color: #04121a;
    background: var(--accent);
}

.rn-media figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.rn-media figcaption i {
    color: var(--accent);
}

@media (max-width: 40rem) {
    .rn-shots {
        gap: 0.55rem;
        padding: 0.75rem;
    }

    .rn-shot img {
        height: clamp(11rem, 32vh, 15rem);
    }
}

/* Imagen ampliada */
.rn-zoom {
    width: auto;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    margin: auto;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
}

.rn-zoom::backdrop {
    background: rgba(2, 4, 10, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rn-zoom[open] {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    animation: rn-pop 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.rn-zoom img {
    display: block;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 5rem);
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 240, 255, 0.15);
    cursor: zoom-out;
}

.rn-zoom .rn-close {
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    color: #fff;
    background: rgba(4, 6, 14, 0.7);
}

.rn-zoom-label {
    margin: 0;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: rgba(11, 15, 28, 0.85);
    font-size: 0.85rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .rn-shot,
    .rn-zoom[open] {
        transition: none;
        animation: none;
    }

    .rn-shot:hover {
        transform: none;
    }
}

/* Admin: descargar .txt de cuentas reemplazadas por categoría / fecha */
.replacement-export {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.replacement-export:hover {
    background: rgba(0, 240, 255, 0.24);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
}

/* Admin: pasar cuentas del stock de la tienda al de reemplazos */
.stock-move-form label {
    margin-bottom: 0.45rem;
}

.stock-move-row {
    display: flex;
    gap: 0.6rem;
}

.stock-move-row input {
    flex: 1;
    min-width: 0;
    max-width: 14rem;
}

.stock-move-row button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.stock-move-blocked {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 179, 71, 0.4);
    border-radius: 0.8rem;
    color: #ffd9a0;
    background: rgba(255, 179, 71, 0.08);
    font-size: 0.9rem;
    line-height: 1.45;
}

.stock-move-blocked i {
    margin-top: 0.1rem;
}

@media (max-width: 40rem) {
    .stock-move-row {
        flex-direction: column;
    }

    .stock-move-row input {
        max-width: none;
    }
}

/* Admin rifas: quitar participante */
.raffle-remove-form {
    margin: 0 0 0 auto;
}

.raffle-remove-form button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.45rem;
}

/* Chip de IP clicable y modal con el registro de IPs */
.activity-chip--button {
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.activity-chip--button:hover,
.activity-chip--button:focus-visible {
    color: var(--text);
    border-color: var(--accent);
    box-shadow: none;
    filter: none;
}

.login-history-dialog {
    width: min(46rem, calc(100vw - 2rem));
}

.login-history-email {
    margin: 0;
    font-size: 1.05rem;
    word-break: break-all;
}

.login-history-status {
    color: var(--muted);
}

.login-history-body {
    display: grid;
    gap: 0.6rem;
}

.login-history-body[hidden] {
    display: none;
}

.login-history-subtitle {
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-history-table-wrap {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.login-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.login-history-table th,
.login-history-table td {
    padding: 0.45rem 0.7rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.login-history-table th {
    position: sticky;
    top: 0;
    color: var(--muted);
    background: #0b0f1c;
    font-weight: 600;
}

.login-history-table tr:last-child td {
    border-bottom: 0;
}

.login-history-table .is-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.login-history-ua {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Shop: pasos, métodos de pago (USDT automático / Binance Pay manual) */
/* ------------------------------------------------------------------ */

.shop-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.shop-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    color: #04121a;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    font-family: var(--heading-font);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.shop-step-title {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 700;
}

.shop-order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 1rem;
    background: rgba(4, 6, 14, 0.45);
}

.shop-order-row .shop-summary {
    gap: 0.75rem 1.8rem;
}

.shop-order-row .shop-total-value {
    font-size: 1.45rem;
    text-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.pay-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.95rem 1rem;
    background: rgba(4, 6, 14, 0.5);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pay-method:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.pay-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pay-method:focus-within {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.pay-method.is-usdt:has(input:checked) {
    border-color: rgba(38, 161, 123, 0.75);
    background:
        radial-gradient(circle at 0% 0%, rgba(38, 161, 123, 0.22), transparent 65%),
        rgba(4, 6, 14, 0.6);
    box-shadow: 0 0 0 1px rgba(38, 161, 123, 0.45), 0 0 24px rgba(38, 161, 123, 0.2);
}

.pay-method.is-binance:has(input:checked) {
    border-color: rgba(240, 185, 11, 0.7);
    background:
        radial-gradient(circle at 0% 0%, rgba(240, 185, 11, 0.16), transparent 65%),
        rgba(4, 6, 14, 0.6);
    box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.4), 0 0 24px rgba(240, 185, 11, 0.16);
}

.pay-method-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pay-method-body {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.pay-method-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    font-family: var(--heading-font);
    font-weight: 700;
}

.pay-method-desc {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.pay-method-check {
    position: relative;
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
}

.pay-method input:checked ~ .pay-method-check {
    border-color: var(--success);
}

.pay-method input:checked ~ .pay-method-check::after {
    content: "";
    position: absolute;
    inset: 0.18rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px rgba(57, 255, 157, 0.6);
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pay-badge.is-auto {
    color: #04170e;
    background: linear-gradient(120deg, var(--success), #8affc6);
    box-shadow: 0 0 12px rgba(57, 255, 157, 0.35);
}

.pay-badge.is-manual {
    color: #ffe27a;
    background: rgba(240, 185, 11, 0.14);
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.35);
}

.pay-panel {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
}

.pay-panel[hidden] {
    display: none;
}

.pay-panel.is-usdt {
    border: 1px solid rgba(38, 161, 123, 0.4);
    background:
        radial-gradient(circle at 100% 0%, rgba(38, 161, 123, 0.14), transparent 60%),
        var(--surface-alt);
}

.pay-panel.is-binance {
    border: 1px solid rgba(240, 185, 11, 0.3);
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 185, 11, 0.1), transparent 60%),
        var(--surface-alt);
}

.pay-perks {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-perks li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.pay-perks i {
    flex: none;
    margin-top: 0.1rem;
    color: #4fe0b0;
    font-size: 1.05rem;
}

.pay-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.pay-manual-steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pay-step;
}

.pay-manual-steps > li {
    position: relative;
    display: grid;
    gap: 0.6rem;
    min-width: 0;
    padding-left: 2.2rem;
    counter-increment: pay-step;
}

.pay-manual-steps > li::before {
    content: counter(pay-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: #1c1500;
    background: linear-gradient(120deg, #f0b90b, #ffd54a);
    font-size: 0.78rem;
    font-weight: 800;
}

.pay-manual-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: -0.8rem;
    left: 0.72rem;
    width: 2px;
    background: rgba(240, 185, 11, 0.25);
}

.pay-manual-step-title {
    font-weight: 650;
    line-height: 1.45;
}

.pay-manual-step-hint {
    font-size: 0.84rem;
}

.pay-id-label {
    flex-basis: 100%;
    color: rgba(255, 226, 122, 0.75);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shop-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 1rem;
}

.shop-submit > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-submit > span[hidden] {
    display: none;
}

.shop-buy[data-method="usdt_trc20"] .shop-submit {
    color: #04170e;
    background: linear-gradient(120deg, #26a17b, var(--success));
    box-shadow: 0 0 0 1px rgba(57, 255, 157, 0.3), 0 8px 24px rgba(38, 161, 123, 0.3);
}

.shop-buy[data-method="binance_pay"] .shop-submit {
    color: #1c1500;
    background: linear-gradient(120deg, #f0b90b, #ffd54a);
    box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.3), 0 8px 24px rgba(240, 185, 11, 0.2);
}

/* Pantalla de pago USDT */

.usdt-checkout {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
    border: 1px solid rgba(38, 161, 123, 0.45);
    border-radius: 1rem;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(38, 161, 123, 0.18), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.08), transparent 45%),
        var(--surface-alt);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.usdt-checkout > * {
    min-width: 0;
}

.usdt-checkout [hidden] {
    display: none !important;
}

.usdt-checkout-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.usdt-checkout-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.usdt-checkout-title h2 {
    margin: 0;
    font-size: 1.3rem;
}

.usdt-checkout-title p {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
}

.usdt-logo {
    flex: none;
    filter: drop-shadow(0 0 10px rgba(38, 161, 123, 0.55));
}

.usdt-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    background: rgba(4, 6, 14, 0.6);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.usdt-timer.is-low {
    border-color: rgba(240, 185, 11, 0.6);
    color: #ffd54a;
}

.usdt-timer.is-over {
    border-color: rgba(255, 59, 107, 0.6);
    color: var(--danger);
}

.usdt-status {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid rgba(57, 255, 157, 0.3);
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
    background: rgba(57, 255, 157, 0.06);
}

.usdt-status > div {
    display: grid;
    gap: 0.15rem;
}

.usdt-status-text {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.usdt-status-pulse {
    position: relative;
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px rgba(57, 255, 157, 0.8);
}

.usdt-status-pulse::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border: 2px solid rgba(57, 255, 157, 0.6);
    border-radius: 50%;
    animation: usdt-pulse 1.6s ease-out infinite;
}

.usdt-status[data-usdt-status="late"] {
    border-color: rgba(240, 185, 11, 0.4);
    background: rgba(240, 185, 11, 0.07);
}

.usdt-status[data-usdt-status="late"] .usdt-status-pulse {
    background: #ffd54a;
    box-shadow: 0 0 10px rgba(240, 185, 11, 0.8);
}

.usdt-status[data-usdt-status="late"] .usdt-status-pulse::after {
    border-color: rgba(240, 185, 11, 0.6);
}

@keyframes usdt-pulse {
    from {
        transform: scale(0.6);
        opacity: 1;
    }
    to {
        transform: scale(1.8);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .usdt-status-pulse::after {
        animation: none;
    }
}

.usdt-body {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.usdt-qr-card {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
}

.usdt-qr {
    position: relative;
    width: 100%;
    max-width: 15rem;
    aspect-ratio: 1;
    border-radius: 0.9rem;
    padding: 0.4rem;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(38, 161, 123, 0.45), 0 0 30px rgba(38, 161, 123, 0.25);
}

.usdt-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.usdt-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    height: auto;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.usdt-qr.is-ready .usdt-qr-logo {
    opacity: 1;
}

.usdt-network-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    color: #4fe0b0;
    background: rgba(38, 161, 123, 0.14);
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.4);
    font-size: 0.8rem;
    font-weight: 700;
}

.usdt-details {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.usdt-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.usdt-field-label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.usdt-field-hint {
    color: var(--muted);
    font-size: 0.82rem;
}

.usdt-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
    background: rgba(4, 6, 14, 0.6);
}

.usdt-copy-row.is-amount {
    border-color: rgba(57, 255, 157, 0.4);
    background: rgba(57, 255, 157, 0.06);
}

.usdt-amount {
    min-width: 0;
    font-family: var(--heading-font);
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    font-weight: 700;
    color: #8affc6;
    text-shadow: 0 0 18px rgba(57, 255, 157, 0.35);
}

.usdt-amount small {
    font-size: 0.55em;
    color: var(--muted);
    text-shadow: none;
}

.usdt-address {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

.usdt-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.5rem 0.8rem;
    color: #04170e;
    background: linear-gradient(120deg, #26a17b, var(--success));
    box-shadow: 0 0 12px rgba(38, 161, 123, 0.3);
    font-size: 0.82rem;
}

.usdt-copy.is-copied {
    background: linear-gradient(120deg, var(--success), #8affc6);
}

.usdt-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border-radius: 0.7rem;
    padding: 0.7rem 0.85rem;
    color: #ffd0da;
    background: rgba(255, 59, 107, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 107, 0.3);
    font-size: 0.86rem;
    line-height: 1.45;
}

.usdt-warning i {
    flex: none;
    margin-top: 0.1rem;
    color: var(--danger);
}

.usdt-howto {
    display: grid;
    gap: 0.7rem;
    border: 1px solid rgba(240, 185, 11, 0.25);
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
    background: rgba(240, 185, 11, 0.04);
}

.usdt-howto h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
}

.usdt-steps {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: usdt-step;
}

.usdt-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.45;
    counter-increment: usdt-step;
}

.usdt-steps li::before {
    content: counter(usdt-step);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: #1c1500;
    background: linear-gradient(120deg, #f0b90b, #ffd54a);
    font-size: 0.74rem;
    font-weight: 800;
}

.usdt-video-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    border: 1px solid rgba(255, 64, 64, 0.35);
    border-radius: 0.85rem;
    padding: 0.7rem 0.9rem 0.7rem 0.7rem;
    color: var(--text);
    background:
        radial-gradient(circle at 0% 50%, rgba(255, 48, 48, 0.18), transparent 55%),
        rgba(255, 255, 255, 0.03);
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.usdt-video-card:hover,
.usdt-video-card:focus-visible {
    border-color: rgba(255, 80, 80, 0.75);
    box-shadow: 0 0 24px rgba(255, 48, 48, 0.2);
    transform: translateY(-1px);
}

.usdt-video-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 4.2rem;
    border-radius: 0.55rem;
    color: #fff;
    background: linear-gradient(160deg, #f0b90b 0%, #26a17b 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    font-size: 1.5rem;
}

.usdt-video-thumb i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #ff0033;
    box-shadow: 0 4px 14px rgba(255, 0, 51, 0.55);
    font-size: 1.15rem;
    animation: usdt-video-pulse 2.2s ease-in-out infinite;
}

@keyframes usdt-video-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.usdt-video-text {
    display: grid;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.usdt-video-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #ff6b6b;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.usdt-video-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.usdt-video-arrow {
    flex: none;
    color: var(--muted);
}

.usdt-video-card.is-compact {
    margin-top: 0.7rem;
}

.usdt-video-card.is-compact .usdt-video-thumb {
    width: 2.6rem;
    height: 3.5rem;
}

.usdt-video-modal {
    width: min(22rem, calc(100vw - 2rem));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    padding: 0.6rem 0.6rem 0.8rem;
    color: var(--text);
    background: #0b0e1c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    text-align: center;
    overflow: visible;
}

.usdt-video-modal::backdrop {
    background: rgba(3, 4, 10, 0.8);
    backdrop-filter: blur(4px);
}

.usdt-video-modal[open] {
    animation: night-modal-in 220ms ease-out;
}

.usdt-video-frame {
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 7rem);
    margin: 0 auto;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #000;
}

.usdt-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.usdt-video-close {
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    min-height: 0;
    border-radius: 50%;
    padding: 0;
    color: #fff;
    background: #1c2140;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.usdt-video-external {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    color: var(--muted);
    font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
    .usdt-video-thumb i,
    .usdt-video-modal[open] {
        animation: none;
    }
}

.usdt-howto-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.usdt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.usdt-claim {
    flex: 1 1 18rem;
    min-width: 0;
}

.usdt-claim summary {
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 650;
    cursor: pointer;
}

.usdt-claim p {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
}

.usdt-claim-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.usdt-claim-form input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
}

.usdt-claim-form button {
    flex: none;
}

.usdt-cancel-form button {
    padding: 0.6rem 0.9rem;
    font-size: 0.86rem;
}

.usdt-done,
.usdt-expired {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.usdt-done h3,
.usdt-expired h3 {
    margin: 0.2rem 0 0;
    font-size: 1.4rem;
}

.usdt-done p,
.usdt-expired p {
    margin: 0;
    max-width: 30rem;
    line-height: 1.5;
}

.usdt-done-icon,
.usdt-expired-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 2rem;
}

.usdt-done-icon {
    color: #04170e;
    background: linear-gradient(135deg, #26a17b, var(--success));
    box-shadow: 0 0 30px rgba(57, 255, 157, 0.5);
}

.usdt-expired-icon {
    color: #ffd54a;
    background: rgba(240, 185, 11, 0.12);
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.4);
}

.usdt-done-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
    border-radius: 0.7rem;
    padding: 0.8rem 1.4rem;
    color: #04170e;
    background: linear-gradient(120deg, #26a17b, var(--success));
    font-weight: 700;
    text-decoration: none;
}

.usdt-done-button.is-secondary {
    color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.usdt-checkout.is-paid {
    border-color: rgba(57, 255, 157, 0.6);
}

/* Mis pedidos */

.shop-order-card {
    align-items: center;
}

.shop-order-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.shop-order-method {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.05);
}

.shop-order-method.is-usdt {
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.45);
}

.shop-order-method.is-binance {
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.35);
}

.shop-order-method.is-zelle {
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.45);
}

.shop-order-method.is-vip {
    color: #ffc53d;
    box-shadow: inset 0 0 0 1px rgba(255, 197, 61, 0.45);
}

/* Zelle */
.pay-method.is-zelle:has(input:checked) {
    border-color: rgba(162, 89, 255, 0.75);
    background:
        radial-gradient(circle at 0% 0%, rgba(162, 89, 255, 0.2), transparent 65%),
        rgba(4, 6, 14, 0.6);
    box-shadow: 0 0 0 1px rgba(162, 89, 255, 0.45), 0 0 24px rgba(162, 89, 255, 0.2);
}

.pay-badge.is-manual.is-zelle {
    color: #dcc4ff;
    background: rgba(162, 89, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.4);
}

.pay-panel.is-zelle {
    border: 1px solid rgba(162, 89, 255, 0.35);
    background:
        radial-gradient(circle at 100% 0%, rgba(162, 89, 255, 0.13), transparent 60%),
        var(--surface-alt);
}

.pay-panel.is-zelle .pay-manual-steps > li::before {
    color: #fff;
    background: linear-gradient(120deg, #6d1ed4, #a259ff);
}

.pay-panel.is-zelle .pay-manual-steps > li:not(:last-child)::after {
    background: rgba(162, 89, 255, 0.28);
}

.pay-panel.is-zelle .file-drop:hover,
.pay-panel.is-zelle .file-drop:focus-within {
    border-color: #a259ff;
}

.zelle-card {
    position: relative;
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(162, 89, 255, 0.4);
    border-radius: 0.9rem;
    padding: 1rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(162, 89, 255, 0.28), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(109, 30, 212, 0.22), transparent 60%),
        rgba(12, 6, 26, 0.85);
    box-shadow: 0 10px 30px -12px rgba(109, 30, 212, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.zelle-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -30%;
    width: 40%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    transform: rotate(18deg);
    animation: zelle-sheen 5.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zelle-sheen {
    0%, 60% { left: -40%; }
    100% { left: 130%; }
}

.zelle-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.zelle-card-head img {
    flex: none;
    border-radius: 0.6rem;
    box-shadow: 0 0 18px rgba(162, 89, 255, 0.45);
}

.zelle-card-brand {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.zelle-card-brand strong {
    font-family: var(--heading-font);
    font-size: 1.05rem;
}

.zelle-card-brand span {
    white-space: nowrap;
    color: #b9a3e0;
    font-size: 0.76rem;
}

.zelle-card-amount {
    flex: none;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    color: #fff;
    background: linear-gradient(120deg, #6d1ed4, #a259ff);
    box-shadow: 0 0 16px rgba(162, 89, 255, 0.4);
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.zelle-card-rows {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.zelle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label copy"
        "value copy";
    align-items: center;
    gap: 0.15rem 0.75rem;
    border-radius: 0.65rem;
    padding: 0.6rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.18);
}

.zelle-row dt {
    grid-area: label;
    color: #b9a3e0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zelle-row dd {
    grid-area: value;
    min-width: 0;
    margin: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.zelle-row.is-phone dd {
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: clamp(1.1rem, 4.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #efe4ff;
    text-shadow: 0 0 16px rgba(162, 89, 255, 0.45);
}

.zelle-copy {
    grid-area: copy;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    color: #fff;
    background: rgba(162, 89, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.zelle-copy:hover {
    background: rgba(162, 89, 255, 0.38);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.8), 0 0 14px rgba(162, 89, 255, 0.35);
}

.zelle-copy:focus-visible {
    outline: 2px solid #a259ff;
    outline-offset: 2px;
}

.zelle-copy.is-copied {
    color: #04121a;
    background: linear-gradient(120deg, var(--success), #8affc6);
    box-shadow: none;
}

@media (max-width: 40rem) {
    .zelle-card {
        padding: 0.85rem;
    }

    .zelle-copy span {
        display: none;
    }

    .zelle-row {
        padding: 0.55rem 0.6rem;
    }

    .zelle-row.is-phone dd {
        font-size: 1.05rem;
        letter-spacing: 0.01em;
    }

    .zelle-copy {
        padding: 0.55rem 0.6rem;
    }

    .zelle-copy.is-copied span {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zelle-card::after {
        animation: none;
        display: none;
    }
}

.pay-method-min.is-zelle {
    color: #c9a8ff;
}

.zelle-breakdown {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    border-top: 1px dashed rgba(162, 89, 255, 0.35);
    padding-top: 0.75rem;
    font-size: 0.88rem;
}

.zelle-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.zelle-breakdown dt {
    color: #b9a3e0;
}

.zelle-breakdown dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.zelle-breakdown .is-total {
    margin-top: 0.15rem;
    font-size: 1rem;
}

.zelle-breakdown .is-total dt,
.zelle-breakdown .is-total dd {
    color: #fff;
    font-weight: 800;
}

.zelle-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.7rem;
}

.zelle-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.zelle-field-label {
    color: #b9a3e0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.zelle-field-control {
    position: relative;
    display: block;
}

.zelle-field-control i {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    color: #a98ae0;
    transform: translateY(-50%);
    pointer-events: none;
}

.zelle-field-control input {
    padding-left: 2.3rem;
    border-color: rgba(162, 89, 255, 0.3);
    background: rgba(12, 6, 26, 0.7);
}

.zelle-field-control input[name="zelle_reference"] {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zelle-field-control input[name="zelle_reference"]::placeholder {
    text-transform: none;
    letter-spacing: 0;
}

.zelle-field-control input:focus {
    border-color: #a259ff;
    outline: 3px solid rgba(162, 89, 255, 0.22);
    box-shadow: 0 0 18px rgba(162, 89, 255, 0.3);
}

.zelle-field-control input:user-invalid {
    border-color: var(--danger);
}

.usdt-min-alert.is-zelle {
    color: #e6d6ff;
    background: rgba(162, 89, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.45);
}

.usdt-min-alert.is-zelle > i {
    color: #a259ff;
}

.usdt-min-alert.is-zelle strong {
    color: #f3ecff;
}

/* Popup del recargo de Zelle */
.zelle-fee-modal {
    width: min(25rem, calc(100vw - 2rem));
    border: 1px solid rgba(162, 89, 255, 0.5);
    border-radius: 1.2rem;
    padding: 1.6rem 1.4rem 1.3rem;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -10%, rgba(162, 89, 255, 0.38), transparent 58%),
        radial-gradient(circle at 100% 100%, rgba(109, 30, 212, 0.18), transparent 55%),
        #0d0820;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(162, 89, 255, 0.28);
    text-align: center;
}

.zelle-fee-modal::backdrop {
    background: rgba(5, 2, 14, 0.75);
    backdrop-filter: blur(5px);
}

.zelle-fee-modal[open] {
    animation: zelle-fee-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes zelle-fee-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.zelle-fee-hero {
    position: relative;
    width: 5.2rem;
    height: 5.2rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
}

.zelle-fee-hero img {
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 0 34px rgba(162, 89, 255, 0.6);
}

.zelle-fee-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(162, 89, 255, 0.45);
    animation: zelle-orbit 14s linear infinite;
}

@keyframes zelle-orbit {
    to { transform: rotate(360deg); }
}

.zelle-fee-chip {
    position: absolute;
    top: -0.2rem;
    right: -0.9rem;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    color: #1a0638;
    background: linear-gradient(120deg, #ffd54a, #ffb020);
    box-shadow: 0 0 16px rgba(255, 190, 40, 0.5);
    font-size: 0.78rem;
    font-weight: 800;
}

.zelle-fee-modal h3 {
    margin: 0 0 0.5rem;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.zelle-fee-hot {
    display: inline-block;
    border-radius: 0.4rem;
    padding: 0 0.35rem;
    color: #ffd54a;
    background: rgba(255, 213, 74, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 213, 74, 0.35);
}

.zelle-fee-modal > p {
    margin: 0 auto;
    max-width: 21rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.zelle-fee-receipt {
    display: grid;
    gap: 0.5rem;
    margin: 0.9rem 0 1.3rem;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.25);
    text-align: left;
}

.zelle-fee-receipt > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.zelle-fee-receipt dt {
    color: #b9a3e0;
}

.zelle-fee-receipt dd {
    margin: 0;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.zelle-fee-receipt > div:nth-child(2) dd {
    color: #ffd54a;
}

.zelle-fee-receipt .is-total {
    margin-top: 0.2rem;
    border-top: 1px dashed rgba(162, 89, 255, 0.4);
    padding-top: 0.6rem;
    font-size: 1.05rem;
}

.zelle-fee-receipt .is-total dt,
.zelle-fee-receipt .is-total dd {
    color: #fff;
    font-weight: 800;
}

.zelle-fee-receipt .is-total dd {
    text-shadow: 0 0 14px rgba(162, 89, 255, 0.6);
}

.zelle-fee-min {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0 0;
    border-radius: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 213, 74, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 200, 60, 0.4);
    text-align: left;
    animation: zelle-min-pulse 3s ease-in-out infinite;
}

@keyframes zelle-min-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 200, 60, 0.4); }
    50% { box-shadow: inset 0 0 0 1px rgba(255, 213, 74, 0.7), 0 0 14px rgba(255, 190, 40, 0.15); }
}

.zelle-fee-min-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    color: #ffd54a;
    background: rgba(255, 213, 74, 0.14);
    font-size: 0.95rem;
}

.zelle-fee-min-text {
    display: grid;
    gap: 0.05rem;
}

.zelle-fee-min-text > span {
    color: #e8d9a8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zelle-fee-min-text strong {
    color: #fff;
    font-family: var(--heading-font);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}

.zelle-fee-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.zelle-fee-accept {
    color: #fff;
    background: linear-gradient(120deg, #6d1ed4, #a259ff);
    box-shadow: 0 0 0 1px rgba(162, 89, 255, 0.5), 0 8px 24px rgba(162, 89, 255, 0.3);
}

.zelle-fee-accept:hover {
    box-shadow: 0 0 0 1px rgba(162, 89, 255, 0.8), 0 0 26px rgba(162, 89, 255, 0.55);
}

@media (max-width: 24rem) {
    .zelle-fee-actions {
        grid-template-columns: 1fr;
    }

    .zelle-fee-accept {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zelle-fee-modal[open],
    .zelle-fee-orbit,
    .zelle-fee-min {
        animation: none;
    }
}

/* PayPal */
.shop-order-method.is-paypal {
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.5);
}

.pay-method.is-paypal:has(input:checked) {
    border-color: rgba(0, 156, 222, 0.75);
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 121, 193, 0.24), transparent 65%),
        rgba(4, 6, 14, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 156, 222, 0.45), 0 0 24px rgba(0, 156, 222, 0.22);
}

.pay-badge.is-manual.is-paypal {
    color: #bfe6ff;
    background: rgba(0, 156, 222, 0.16);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.42);
}

.pay-method-min.is-paypal {
    color: #8fd3ff;
}

.pay-panel.is-paypal {
    border: 1px solid rgba(0, 156, 222, 0.35);
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 121, 193, 0.15), transparent 60%),
        var(--surface-alt);
}

.pay-panel.is-paypal .pay-manual-steps > li::before {
    color: #fff;
    background: linear-gradient(120deg, #003087, #009cde);
}

.pay-panel.is-paypal .pay-manual-steps > li:not(:last-child)::after {
    background: rgba(0, 156, 222, 0.28);
}

.pay-panel.is-paypal .file-drop:hover,
.pay-panel.is-paypal .file-drop:focus-within {
    border-color: #009cde;
}

.paypal-word-pay {
    color: #5aa9ff;
    font-style: italic;
    font-weight: 800;
}

.paypal-word-pal {
    color: #33c3ff;
    font-style: italic;
    font-weight: 800;
}

.paypal-card {
    position: relative;
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 156, 222, 0.42);
    border-radius: 0.9rem;
    padding: 1rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(0, 156, 222, 0.26), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(0, 48, 135, 0.4), transparent 60%),
        rgba(3, 10, 28, 0.88);
    box-shadow: 0 10px 30px -12px rgba(0, 121, 193, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.paypal-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -30%;
    width: 40%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    transform: rotate(18deg);
    animation: zelle-sheen 5.5s ease-in-out infinite;
    pointer-events: none;
}

.paypal-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.paypal-card-head img {
    flex: none;
    border-radius: 0.6rem;
    box-shadow: 0 0 18px rgba(0, 156, 222, 0.45);
}

.paypal-card-brand {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.paypal-card-brand strong {
    font-family: var(--heading-font);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.paypal-card-brand > span {
    white-space: nowrap;
    color: #9cc4e4;
    font-size: 0.76rem;
}

.paypal-card-amount {
    flex: none;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    color: #fff;
    background: linear-gradient(120deg, #003087, #0079c1 55%, #009cde);
    box-shadow: 0 0 16px rgba(0, 156, 222, 0.42);
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.paypal-card-rows {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.paypal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label copy"
        "value copy";
    align-items: center;
    gap: 0.15rem 0.75rem;
    border-radius: 0.65rem;
    padding: 0.6rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.2);
}

.paypal-row dt {
    grid-area: label;
    color: #9cc4e4;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.paypal-row dd {
    grid-area: value;
    min-width: 0;
    margin: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.paypal-row dd i {
    color: #33c3ff;
}

.paypal-row.is-email dd {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: clamp(0.92rem, 3.8vw, 1.12rem);
    font-weight: 700;
    color: #e6f4ff;
    text-shadow: 0 0 16px rgba(0, 156, 222, 0.45);
}

.paypal-copy {
    grid-area: copy;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    color: #fff;
    background: rgba(0, 156, 222, 0.22);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.55);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.paypal-copy:hover {
    background: rgba(0, 156, 222, 0.38);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.85), 0 0 14px rgba(0, 156, 222, 0.35);
}

.paypal-copy:focus-visible {
    outline: 2px solid #009cde;
    outline-offset: 2px;
}

.paypal-copy.is-copied {
    color: #04121a;
    background: linear-gradient(120deg, var(--success), #8affc6);
    box-shadow: none;
}

.paypal-rules {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paypal-rules li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.65rem;
    padding: 0.5rem 0.65rem;
    background: rgba(0, 156, 222, 0.07);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.2);
    font-size: 0.86rem;
    line-height: 1.4;
}

.paypal-rule-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.5rem;
    color: #33c3ff;
    background: rgba(0, 156, 222, 0.16);
}

.paypal-rules li.is-critical,
.paypal-modal-rules li.is-critical {
    background: rgba(255, 196, 57, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 196, 57, 0.55);
    animation: paypal-critical-pulse 2.6s ease-in-out infinite;
}

.paypal-rules li.is-critical strong,
.paypal-modal-rules li.is-critical strong {
    color: #ffc439;
    letter-spacing: 0.03em;
}

.is-critical .paypal-rule-icon {
    color: #1a1300;
    background: linear-gradient(120deg, #ffc439, #ffa31a);
}

@keyframes paypal-critical-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 196, 57, 0.5); }
    50% { box-shadow: inset 0 0 0 1px rgba(255, 196, 57, 0.85), 0 0 16px rgba(255, 196, 57, 0.18); }
}

.paypal-breakdown {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    border-top: 1px dashed rgba(0, 156, 222, 0.38);
    padding-top: 0.75rem;
    font-size: 0.88rem;
}

.paypal-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.paypal-breakdown dt {
    color: #9cc4e4;
}

.paypal-breakdown dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.paypal-breakdown dd.is-you {
    color: #ffc439;
}

.paypal-breakdown .is-total {
    margin-top: 0.15rem;
    font-size: 1rem;
}

.paypal-breakdown .is-total dt,
.paypal-breakdown .is-total dd {
    color: #fff;
    font-weight: 800;
}

.usdt-min-alert.is-paypal {
    color: #d6eeff;
    background: rgba(0, 156, 222, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.45);
}

.usdt-min-alert.is-paypal > i {
    color: #009cde;
}

.usdt-min-alert.is-paypal strong {
    color: #eef8ff;
}

/* Popup de reglas de PayPal */
.paypal-rules-modal {
    width: min(26rem, calc(100vw - 2rem));
    border: 1px solid rgba(0, 156, 222, 0.5);
    border-radius: 1.2rem;
    padding: 1.6rem 1.4rem 1.3rem;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -10%, rgba(0, 156, 222, 0.36), transparent 58%),
        radial-gradient(circle at 100% 100%, rgba(0, 48, 135, 0.35), transparent 55%),
        #050c1f;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(0, 156, 222, 0.26);
    text-align: center;
}

.paypal-rules-modal::backdrop {
    background: rgba(2, 6, 16, 0.78);
    backdrop-filter: blur(5px);
}

.paypal-rules-modal[open] {
    animation: zelle-fee-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.paypal-modal-hero {
    position: relative;
    width: 5.4rem;
    height: 5.4rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
}

.paypal-modal-hero img {
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 0 34px rgba(0, 156, 222, 0.6);
}

.paypal-modal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(0, 156, 222, 0.5);
    animation: zelle-orbit 14s linear infinite;
}

.paypal-rules-modal h3 {
    margin: 0 0 0.45rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.paypal-rules-modal > p {
    margin: 0 auto;
    max-width: 21rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.paypal-modal-rules {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.paypal-modal-rules li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 0.8rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(0, 156, 222, 0.25);
}

.paypal-modal-rules li > span:last-child {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.paypal-modal-rules strong {
    font-size: 0.95rem;
}

.paypal-modal-rules small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.paypal-modal-min {
    margin-bottom: 1.2rem;
}

.paypal-modal-accept {
    color: #1a1300;
    background: linear-gradient(120deg, #ffc439, #ffb000);
    box-shadow: 0 0 0 1px rgba(255, 196, 57, 0.55), 0 8px 24px rgba(255, 176, 0, 0.25);
    font-weight: 800;
}

.paypal-modal-accept:hover {
    box-shadow: 0 0 0 1px rgba(255, 196, 57, 0.9), 0 0 26px rgba(255, 176, 0, 0.45);
}

@media (max-width: 40rem) {
    .paypal-card {
        padding: 0.85rem;
    }

    .paypal-row {
        padding: 0.55rem 0.6rem;
    }

    .paypal-copy {
        padding: 0.55rem 0.6rem;
    }

    .paypal-copy span {
        display: none;
    }

    .paypal-copy.is-copied span {
        display: inline;
    }
}

@media (max-width: 24rem) {
    .paypal-modal-accept {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .paypal-card::after {
        animation: none;
        display: none;
    }

    .paypal-rules-modal[open],
    .paypal-modal-ring,
    .paypal-rules li.is-critical,
    .paypal-modal-rules li.is-critical {
        animation: none;
    }
}

@media (max-width: 40rem) {
    .usdt-checkout {
        padding: 1rem;
    }

    .usdt-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .usdt-qr-card {
        order: 1;
    }

    .usdt-qr {
        max-width: 13rem;
    }

    .usdt-claim-form {
        flex-direction: column;
    }

    .usdt-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .usdt-claim {
        flex: none;
    }

    .usdt-cancel-form button {
        width: 100%;
    }

    .shop-order-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 40rem) {
    .pay-panel {
        padding: 0.9rem;
    }

    .pay-manual-steps > li {
        padding-left: 2rem;
    }

    .pay-panel .file-drop {
        padding: 0.85rem;
    }

    .pay-panel .file-drop-text {
        white-space: normal;
    }
}

.pay-method-min {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #4fe0b0;
    font-size: 0.78rem;
    font-weight: 650;
}

.pay-method.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pay-method.is-disabled:hover {
    border-color: var(--border);
}

.pay-method.is-disabled .pay-method-min {
    color: #ffd54a;
}

/* Admin: interruptor de métodos de pago */

.pay-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    border-color: rgba(38, 161, 123, 0.35);
    background:
        radial-gradient(circle at 0% 0%, rgba(38, 161, 123, 0.14), transparent 55%),
        var(--surface);
}

.pay-toggle.is-off {
    border-color: var(--border);
    background: var(--surface);
}

.pay-toggle-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 20rem;
}

.pay-toggle-logo {
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    filter: drop-shadow(0 0 12px rgba(38, 161, 123, 0.5));
    transition: filter 200ms ease, opacity 200ms ease;
}

i.pay-toggle-icon {
    display: grid;
    place-items: center;
    color: #4fe0b0;
    font-size: 2rem;
}

.pay-toggle.is-off .pay-toggle-logo {
    filter: grayscale(1);
    opacity: 0.55;
}

.pay-toggle-body {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.pay-toggle-body .eyebrow,
.pay-toggle-body h2,
.pay-toggle-body p {
    margin: 0;
}

.pay-toggle-body h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.pay-toggle-body p {
    font-size: 0.9rem;
}

.pay-toggle-tag {
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    color: #4fe0b0;
    background: rgba(38, 161, 123, 0.14);
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.4);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pay-toggle.is-off .pay-toggle-tag {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--border);
}

.pay-toggle-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0 auto;
}

.pay-toggle-state {
    min-width: 4.2rem;
    text-align: right;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pay-toggle.is-on .pay-toggle-state {
    color: var(--success);
}

.reason-toggle-list {
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.reason-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(38, 161, 123, 0.35);
    border-radius: 12px;
    background: rgba(38, 161, 123, 0.06);
}

.reason-toggle.is-off {
    border-color: var(--border);
    background: transparent;
    opacity: 0.75;
}

.reason-toggle-body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.reason-toggle-body .muted {
    font-size: 0.82rem;
}

.reason-toggle.is-on .pay-toggle-state {
    color: var(--success);
}

button.pay-switch {
    position: relative;
    flex: none;
    width: 3.6rem;
    height: 2rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0;
    background: rgba(4, 6, 14, 0.8);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

button.pay-switch:hover {
    filter: none;
    border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 240, 255, 0.2);
}

button.pay-switch.is-on {
    border-color: rgba(57, 255, 157, 0.6);
    background: linear-gradient(120deg, #26a17b, var(--success));
    box-shadow: 0 0 18px rgba(57, 255, 157, 0.35);
}

button.pay-switch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pay-switch-knob {
    position: absolute;
    top: 50%;
    left: 0.22rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #d6e2f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    transform: translateY(-50%);
    transition: left 200ms ease, background 200ms ease;
}

button.pay-switch.is-on .pay-switch-knob {
    left: calc(100% - 1.72rem);
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .pay-switch-knob,
    button.pay-switch {
        transition: none;
    }
}

.usdt-min-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
    color: #ffe9a8;
    background: rgba(240, 185, 11, 0.08);
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.4);
    font-size: 0.9rem;
    line-height: 1.45;
}

.usdt-min-alert[hidden] {
    display: none;
}

.usdt-min-alert > i {
    flex: none;
    margin-top: 0.1rem;
    color: #f0b90b;
    font-size: 1.05rem;
}

.usdt-min-alert > div {
    display: grid;
    gap: 0.2rem;
    justify-items: start;
}

.usdt-min-alert strong {
    color: #fff3cc;
}

button.usdt-min-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.5rem 0.85rem;
    color: #1c1500;
    background: linear-gradient(120deg, #f0b90b, #ffd54a);
    box-shadow: 0 0 14px rgba(240, 185, 11, 0.25);
    font-size: 0.85rem;
}

.shop-buy .shop-submit.is-locked {
    opacity: 0.45;
    filter: grayscale(0.6);
    box-shadow: none;
    cursor: not-allowed;
}

.shop-buy .shop-submit.is-locked:hover {
    filter: grayscale(0.6);
    box-shadow: none;
}

.shop-submit [data-usdt-amount][hidden] {
    display: none;
}

/* Binance Pay: horario de aprobación manual */

.pay-hours-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    border-radius: 0.65rem;
    padding: 0.55rem 0.8rem;
    color: #ffe9a8;
    background: rgba(240, 185, 11, 0.07);
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.25);
    font-size: 0.86rem;
}

.pay-hours-note i {
    flex: none;
    color: #f0b90b;
}

.night-modal {
    width: min(26rem, calc(100vw - 2rem));
    border: 1px solid rgba(124, 92, 255, 0.45);
    border-radius: 1.1rem;
    padding: 1.6rem 1.4rem 1.3rem;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.28), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.1), transparent 55%),
        #0b0e1c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 92, 255, 0.25);
    text-align: center;
}

.night-modal::backdrop {
    background: rgba(3, 4, 10, 0.72);
    backdrop-filter: blur(4px);
}

.night-modal[open] {
    animation: night-modal-in 220ms ease-out;
}

@keyframes night-modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .night-modal[open] {
        animation: none;
    }
}

.night-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    color: #fff4c2;
    background: linear-gradient(135deg, #3b2f8f, #7c5cff);
    box-shadow: 0 0 30px rgba(124, 92, 255, 0.55);
    font-size: 1.6rem;
}

.night-modal h3 {
    margin: 0 0 0.6rem;
    font-size: 1.25rem;
}

.night-modal p {
    margin: 0 0 0.6rem;
    color: #c9d4ee;
    line-height: 1.55;
}

.night-modal-soft {
    color: var(--muted) !important;
    font-size: 0.9rem;
}

.night-modal-admin {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.9rem 0 0;
    border-radius: 0.8rem;
    padding: 0.85rem 0.95rem;
    color: #fff4c2;
    background: linear-gradient(135deg, rgba(240, 185, 11, 0.2), rgba(240, 185, 11, 0.08));
    box-shadow: inset 0 0 0 1.5px rgba(240, 185, 11, 0.65), 0 0 24px rgba(240, 185, 11, 0.18);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

.night-modal-admin i {
    flex: none;
    margin-top: 0.05rem;
    color: #f0b90b;
    font-size: 1.25rem;
}

.night-modal-admin strong {
    color: #ffffff;
}

.night-modal-admin .night-modal-highlight {
    color: #f0b90b;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.night-modal-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
    color: #c8ffe6;
    background: rgba(38, 161, 123, 0.12);
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.4);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: left;
}

.night-modal-tip i {
    flex: none;
    margin-top: 0.1rem;
    color: #4fe0b0;
}

.night-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.night-modal-actions button {
    flex: 1 1 9rem;
}

/* Aviso de seguridad antes de comprar */

.security-modal {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    padding: 1.6rem 1.35rem 1.3rem;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(124, 92, 255, 0.16), transparent 55%),
        linear-gradient(#0b0e1c, #0b0e1c) padding-box,
        linear-gradient(140deg, rgba(0, 240, 255, 0.6), rgba(124, 92, 255, 0.35) 45%, rgba(255, 46, 196, 0.5)) border-box;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 48px rgba(0, 240, 255, 0.16);
}

.security-modal::backdrop {
    background: rgba(3, 4, 10, 0.75);
    backdrop-filter: blur(6px);
}

.security-modal[open] {
    animation: security-modal-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes security-modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.security-modal-head {
    text-align: center;
}

.security-modal-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #00b8d4, #7c5cff);
    box-shadow: 0 0 32px rgba(0, 240, 255, 0.45);
    font-size: 1.75rem;
}

.security-modal-ring {
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(0, 240, 255, 0.55);
    border-radius: 50%;
    animation: security-ring 2.2s ease-out infinite;
}

@keyframes security-ring {
    from {
        opacity: 0.9;
        transform: scale(0.9);
    }
    to {
        opacity: 0;
        transform: scale(1.35);
    }
}

.security-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.security-modal h3 {
    margin: 0 0 0.45rem;
    font-size: 1.3rem;
}

.security-modal-head p {
    margin: 0 auto;
    max-width: 24rem;
    color: #c9d4ee;
    font-size: 0.92rem;
    line-height: 1.5;
}

.security-modal-list {
    display: grid;
    gap: 0.6rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.security-item {
    --tone: 0, 240, 255;
    --tone-solid: var(--accent);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.85rem;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(135deg, rgba(var(--tone), 0.12), rgba(var(--tone), 0.04));
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.security-modal[open] .security-item {
    animation: security-item-in 360ms ease-out forwards;
}

.security-modal[open] .security-item:nth-child(2) { animation-delay: 80ms; }
.security-modal[open] .security-item:nth-child(3) { animation-delay: 160ms; }
.security-modal[open] .security-item:nth-child(4) { animation-delay: 240ms; }

@keyframes security-item-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.security-item:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.6), 0 0 22px rgba(var(--tone), 0.15);
}

.security-item.is-rule { --tone: 124, 92, 255; --tone-solid: #a48bff; }
.security-item.is-warning { --tone: 255, 59, 107; --tone-solid: #ff5c85; }
.security-item.is-safe { --tone: 57, 255, 157; --tone-solid: var(--success); }

/* "Elimina tus métodos de pago" (cuentas SHEIN): el aviso que más se ignora,
   así que va en ámbar, con borde grueso y un pulso suave. */
.security-item.is-critical {
    --tone: 255, 181, 71;
    --tone-solid: #ffb547;
    border-left: 4px solid var(--tone-solid);
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.55), 0 0 24px rgba(var(--tone), 0.18);
}

.security-modal[open] .security-item.is-critical {
    animation: security-item-in 360ms ease-out forwards, security-critical-pulse 2.4s ease-in-out 600ms infinite;
}

@keyframes security-critical-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.55), 0 0 18px rgba(var(--tone), 0.12); }
    50% { box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.9), 0 0 30px rgba(var(--tone), 0.35); }
}

.security-item-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    justify-self: start;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    color: #1a0d02;
    background: var(--tone-solid);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.security-mark {
    padding: 0.05rem 0.35rem;
    border-radius: 0.35rem;
    color: #1a0d02;
    background: linear-gradient(120deg, #ffd166, #ffb547);
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

@media (prefers-reduced-motion: reduce) {
    .security-modal[open] .security-item.is-critical {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.security-item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.7rem;
    color: var(--tone-solid);
    background: rgba(var(--tone), 0.16);
    font-size: 1.1rem;
}

.security-item-body {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #c9d4ee;
}

.security-item-body strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.security-item-body b {
    color: var(--tone-solid);
}

.security-modal-accept {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1.1rem;
    border-radius: 0.8rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--border);
    color: #d6e0f5;
    font-size: 0.86rem;
    line-height: 1.45;
    cursor: pointer;
    transition: box-shadow 180ms ease, background 180ms ease;
}

.security-modal-accept input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.security-modal-checkbox {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.05rem;
    border-radius: 0.4rem;
    color: transparent;
    box-shadow: inset 0 0 0 2px var(--border-strong);
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.security-modal-accept input:checked + .security-modal-checkbox {
    color: #04131a;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
    transform: scale(1.08);
}

.security-modal-accept input:focus-visible + .security-modal-checkbox {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.security-modal-accept:has(input:checked) {
    background: rgba(0, 240, 255, 0.06);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.security-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.security-modal-actions button {
    flex: 1 1 9rem;
}

.security-modal-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #04131a;
    background: linear-gradient(120deg, var(--accent), #7c5cff);
    box-shadow: 0 8px 24px rgba(0, 240, 255, 0.25);
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.security-modal-confirm:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.4);
}

.security-modal-confirm:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

/* En celulares se muestra como hoja inferior. */
@media (max-width: 520px) {
    .security-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: 1.4rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .security-modal[open] {
        animation-name: security-sheet-in;
    }

    @keyframes security-sheet-in {
        from {
            transform: translateY(100%);
        }
        to {
            transform: none;
        }
    }

    .security-modal h3 {
        font-size: 1.15rem;
    }

    .security-modal-actions {
        flex-direction: column-reverse;
    }

    .security-modal-actions button {
        flex: none;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .security-modal[open],
    .security-modal[open] .security-item,
    .security-modal-ring {
        animation: none;
    }

    .security-modal .security-item {
        opacity: 1;
        transform: none;
    }
}

/* Admin: registro de comisiones (reutiliza las piezas de .sales-*) */

.commission-kpi--net { --kpi: #00f0ff; }
.commission-kpi--sales { --kpi: #7c5cff; }
.commission-kpi--today { --kpi: #39ff9d; }
.commission-kpi--best { --kpi: #ffc53d; }

.commission-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.8rem;
}

.commission-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.commission-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.25rem;
}

.commission-swatch.is-bar { background: linear-gradient(180deg, #00f0ff, #7c5cff); }
.commission-swatch.is-line { height: 0.2rem; border-radius: 999px; background: #ffc53d; }
.commission-swatch.is-adjust { border-radius: 50%; background: #39ff9d; box-shadow: 0 0 0 2px rgba(57, 255, 157, 0.25); }
.commission-swatch.is-reset { width: 0; height: 0.95rem; border-left: 2px dashed #ff2ec4; border-radius: 0; }

.commission-chart-scroll {
    overflow-x: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.commission-chart {
    display: block;
    width: 100%;
    min-width: 36rem;
    height: auto;
    overflow: visible;
}

.commission-chart.is-dense {
    min-width: 52rem;
}

.commission-grid {
    stroke: rgba(139, 155, 192, 0.14);
    stroke-dasharray: 3 5;
}

.commission-baseline {
    stroke: rgba(139, 155, 192, 0.35);
}

.commission-axis {
    fill: var(--muted);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
}

.commission-axis.is-cum {
    fill: rgba(255, 197, 61, 0.75);
}

.commission-hit {
    fill: transparent;
    cursor: pointer;
}

.commission-day:hover .commission-hit,
.commission-day:focus .commission-hit {
    fill: rgba(0, 240, 255, 0.06);
}

.commission-day:focus {
    outline: none;
}

.commission-bar {
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.35));
    transition: filter 160ms ease, opacity 160ms ease;
}

.commission-day:hover .commission-bar,
.commission-day:focus .commission-bar {
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.75)) brightness(1.15);
}

.commission-adjust {
    fill: #39ff9d;
    stroke: #04170e;
    stroke-width: 2;
}

.commission-adjust.is-negative {
    fill: #ff3b6b;
}

.commission-reset {
    stroke: #ff2ec4;
    stroke-width: 2;
    stroke-dasharray: 5 4;
    opacity: 0.85;
}

.commission-line {
    fill: none;
    stroke: #ffc53d;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(255, 197, 61, 0.45));
    pointer-events: none;
}

.commission-area {
    pointer-events: none;
}

.commission-line-end {
    fill: #ffc53d;
    stroke: #0b0e1c;
    stroke-width: 2;
    pointer-events: none;
}

.commission-foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
}

.commission-toggle-empty {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.commission-toggle-empty:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.commission-table .num {
    text-align: right;
}

.commission-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.commission-mini {
    width: 5.5rem;
    height: 0.4rem;
    flex: none;
}

.commission-mini-track {
    fill: rgba(139, 155, 192, 0.15);
}

.commission-adjust-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    color: #8affc6;
    background: rgba(57, 255, 157, 0.1);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.35);
    font-size: 0.82rem;
    font-weight: 700;
}

.commission-adjust-pill.is-negative {
    color: #ff9fb6;
    background: rgba(255, 59, 107, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 107, 0.35);
}

.commission-net {
    color: #baf6ff;
    font-family: var(--heading-font);
    font-weight: 700;
}

.commission-net.is-negative {
    color: #ff9fb6;
}

.commission-reset-badge {
    display: inline-block;
    margin-left: 0.4rem;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    color: #ff8ee0;
    background: rgba(255, 46, 196, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 46, 196, 0.4);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

@media (max-width: 40rem) {
    .commission-mini {
        display: none;
    }

    .commission-legend {
        font-size: 0.76rem;
    }

    /* El SVG se encoge al ancho del móvil: texto más grande en unidades del
       viewBox para que los ejes sigan siendo legibles. */
    .commission-chart {
        min-width: 30rem;
    }

    .commission-chart.is-dense {
        min-width: 44rem;
    }

    .commission-axis {
        font-size: 17px;
    }
}

@media (max-width: 30rem) {
    .commission-hide-sm {
        display: none;
    }

    /* Ventas y Ajustes ya aparecen en las tarjetas y en el gráfico. */
    .commission-table th:nth-child(3),
    .commission-table td:nth-child(3),
    .commission-table th:nth-child(5),
    .commission-table td:nth-child(5) {
        display: none;
    }
}

/* Admin: registro de reemplazos (reutiliza .sales-* y .commission-*) */

.replog-kpi--replaced { --kpi: #39ff9d; }
.replog-kpi--rate { --kpi: #00f0ff; }
.replog-kpi--rejected { --kpi: #ff3b6b; }
.replog-kpi--pending { --kpi: #ffc53d; }

.replog-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.25rem;
}

.replog-swatch.is-approved { background: linear-gradient(180deg, #39ff9d, #00c2d1); }
.replog-swatch.is-rejected { background: linear-gradient(180deg, #ff3b6b, #ff2ec4); }

.replog-bar.is-approved {
    filter: drop-shadow(0 0 6px rgba(57, 255, 157, 0.35));
}

.replog-bar.is-rejected {
    filter: drop-shadow(0 0 6px rgba(255, 59, 107, 0.35));
}

.commission-day:hover .replog-bar,
.commission-day:focus .replog-bar {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(57, 255, 157, 0.6));
}

.replog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.replog-side {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.replog-grid .sales-table-card {
    margin: 0;
}

.replog-card-hint {
    font-size: 0.8rem;
}

.replog-empty {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
}

.replog-reasons {
    display: grid;
    gap: 0.9rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.replog-reason-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
}

.replog-reason-name {
    min-width: 0;
    color: var(--text);
}

.replog-reason-value {
    flex: none;
    color: var(--muted);
    font-size: 0.82rem;
}

.replog-reason-value strong {
    color: #8affc6;
    font-family: var(--heading-font);
    font-size: 0.95rem;
}

.replog-meter {
    display: block;
    width: 100%;
    height: 0.5rem;
}

.replog-split {
    display: block;
    width: 100%;
    height: 0.65rem;
    margin-top: 0.5rem;
}

.replog-split-user { fill: #00f0ff; }
.replog-split-reseller { fill: #7c5cff; }

.replog-split-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.86rem;
}

.replog-split-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.replog-split-legend strong {
    color: var(--text);
    font-family: var(--heading-font);
}

.replog-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.replog-dot.is-user { background: #00f0ff; }
.replog-dot.is-reseller { background: #7c5cff; }

.replog-top {
    display: grid;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: replog-top;
}

.replog-top li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    font-size: 0.86rem;
    counter-increment: replog-top;
}

.replog-top li::before {
    content: counter(replog-top);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(139, 155, 192, 0.12);
    font-size: 0.72rem;
    font-weight: 700;
}

.replog-top li:first-child::before {
    color: #1c1500;
    background: linear-gradient(120deg, #f0b90b, #ffd54a);
}

.replog-top-email {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.replog-role {
    flex: none;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    color: #c4b5ff;
    background: rgba(124, 92, 255, 0.14);
    font-size: 0.7rem;
    font-weight: 700;
}

.replog-top-count {
    flex: none;
    color: #8affc6;
    font-family: var(--heading-font);
    font-weight: 700;
}

.replog-pill {
    display: inline-block;
    min-width: 2rem;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-weight: 700;
    text-align: center;
}

.replog-pill.is-approved {
    color: #8affc6;
    background: rgba(57, 255, 157, 0.1);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.3);
}

.replog-pill.is-rejected {
    color: #ff9fb6;
    background: rgba(255, 59, 107, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 107, 0.3);
}

@media (max-width: 52rem) {
    .replog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.replog-table .num {
    text-align: right;
}

.replog-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 1.2rem 2rem;
    border-color: rgba(255, 197, 61, 0.3);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 197, 61, 0.12), transparent 55%),
        var(--surface-alt);
}

.replog-value-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.replog-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.9rem;
    color: #1c1500;
    background: linear-gradient(135deg, #ffc53d, #ff8a3d);
    box-shadow: 0 0 24px rgba(255, 197, 61, 0.35);
    font-size: 1.5rem;
}

.replog-value-main p {
    margin: 0;
}

.replog-value-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.replog-value-amount {
    margin: 0.15rem 0 !important;
    color: #ffe08a;
    font-family: var(--heading-font);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 197, 61, 0.3);
}

.replog-value-sub {
    color: var(--muted);
    font-size: 0.82rem;
}

.replog-value-list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.replog-value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.replog-value-row small {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
}

.replog-value-row strong {
    flex: none;
    font-family: var(--heading-font);
    font-size: 1rem;
}

.replog-value-fill.is-user { fill: #00f0ff; }
.replog-value-fill.is-reseller { fill: #7c5cff; }
.replog-value-fill.is-mixed { fill: #ffc53d; }

@media (max-width: 52rem) {
    .replog-value {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Admin: historial de pagos de la comisión */

.payout-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.6rem 0 1.2rem;
}

.payout-stat {
    display: grid;
    gap: 0.15rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
    background: rgba(4, 6, 14, 0.45);
}

.payout-stat.is-pending {
    border-color: rgba(255, 197, 61, 0.35);
    background: rgba(255, 197, 61, 0.06);
}

.payout-stat-label {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payout-stat-value {
    font-family: var(--heading-font);
    font-size: 1.35rem;
}

.payout-stat.is-pending .payout-stat-value {
    color: #ffe08a;
}

.payout-stat-sub {
    color: var(--muted);
    font-size: 0.8rem;
}

.payout-timeline {
    position: relative;
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payout-timeline::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0.95rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 197, 61, 0.5), rgba(57, 255, 157, 0.35) 30%, rgba(0, 240, 255, 0.15));
}

.payout-item {
    position: relative;
    display: flex;
    gap: 0.9rem;
}

.payout-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #04170e;
    background: linear-gradient(135deg, #39ff9d, #00c2d1);
    box-shadow: 0 0 14px rgba(57, 255, 157, 0.4);
    font-size: 0.95rem;
}

.payout-item.is-current .payout-node {
    color: #1c1500;
    background: linear-gradient(135deg, #ffc53d, #ff8a3d);
    box-shadow: 0 0 14px rgba(255, 197, 61, 0.45);
}

.payout-body {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(4, 6, 14, 0.45);
    transition: border-color 160ms ease;
}

.payout-item:hover .payout-body {
    border-color: var(--border-strong);
}

.payout-item.is-current .payout-body {
    border-style: dashed;
    border-color: rgba(255, 197, 61, 0.4);
}

.payout-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.55rem;
}

.payout-row p {
    margin: 0;
}

.payout-title {
    font-weight: 650;
}

.payout-meta {
    color: var(--muted);
    font-size: 0.82rem;
}

.payout-amount {
    flex: none;
    color: #8affc6;
    font-family: var(--heading-font);
    font-size: 1.2rem;
}

.payout-item.is-current .payout-amount {
    color: #ffe08a;
}

.payout-fill { fill: #39ff9d; }
.payout-fill.is-current { fill: #ffc53d; }

.payout-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
}

.payout-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    color: #c9d4ee;
    background: rgba(139, 155, 192, 0.1);
    font-size: 0.76rem;
}

.payout-chips li.is-positive { color: #8affc6; background: rgba(57, 255, 157, 0.1); }
.payout-chips li.is-negative { color: #ff9fb6; background: rgba(255, 59, 107, 0.1); }

.payout-empty {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
}

@media (max-width: 40rem) {
    .payout-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .payout-row {
        flex-direction: column;
        gap: 0.2rem;
    }
}

/* ===== Precios y promociones (admin) + banner de promo en la tienda ===== */

.sidebar-live-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.6);
    animation: promo-pulse 1.8s ease-out infinite;
}

.promo-pulse {
    display: inline-block;
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.6);
    animation: promo-pulse 1.8s ease-out infinite;
}

@keyframes promo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.55); }
    70% { box-shadow: 0 0 0 0.45rem rgba(57, 255, 157, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 255, 157, 0); }
}

.promo-now-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.promo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    color: var(--muted);
    background: var(--surface-alt);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-pill-active {
    color: #7dffbc;
    border-color: rgba(57, 255, 157, 0.4);
    background: rgba(57, 255, 157, 0.08);
    box-shadow: 0 0 14px rgba(57, 255, 157, 0.14);
}

.promo-pill-scheduled {
    color: #9fd8ff;
    border-color: rgba(0, 170, 255, 0.4);
    background: rgba(0, 170, 255, 0.08);
}

.promo-pill-ended {
    color: var(--muted);
}

.promo-pill-cancelled {
    color: #ff90ab;
    border-color: rgba(255, 59, 107, 0.35);
}

/* Tarjetas de precios en vivo */
.promo-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1rem;
}

.promo-live-card {
    position: relative;
    display: grid;
    gap: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.1rem;
    background: var(--surface-alt);
    overflow: hidden;
}

.promo-live-card.is-live {
    border-color: rgba(57, 255, 157, 0.35);
    background:
        radial-gradient(circle at 100% 0%, rgba(57, 255, 157, 0.12), transparent 14rem),
        var(--surface-alt);
    box-shadow: 0 0 24px rgba(57, 255, 157, 0.08);
}

.promo-live-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.promo-live-head > div {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.promo-live-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.promo-live-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 1.2rem;
}

.promo-live-card.is-live .promo-live-icon {
    color: var(--success);
    background: rgba(57, 255, 157, 0.12);
}

.promo-live-tiers {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-live-tiers li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed rgba(139, 155, 192, 0.18);
    padding-bottom: 0.4rem;
}

.promo-live-tiers li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.promo-live-qty {
    color: var(--muted);
    font-size: 0.88rem;
}

.promo-live-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--heading-font);
    font-size: 1.15rem;
}

.promo-live-price s,
.shop-tier-old,
.promo-banner-price s {
    color: var(--muted);
    font-size: 0.8em;
    font-weight: 500;
    text-decoration-color: rgba(255, 59, 107, 0.8);
    text-decoration-thickness: 2px;
}

.promo-live-card.is-live .promo-live-price strong {
    color: #7dffbc;
}

.promo-live-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.65rem;
    padding: 0.55rem 0.75rem;
    color: var(--muted);
    background: rgba(57, 255, 157, 0.06);
    font-size: 0.88rem;
}

.promo-countdown {
    font-family: var(--heading-font);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: 0.02em;
}

.promo-countdown.is-urgent {
    color: #ffb35c;
}

.promo-countdown.is-done {
    color: var(--muted);
    font-family: inherit;
    font-weight: 600;
}

/* Formulario */
.promo-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    gap: 1.4rem;
    align-items: start;
}

.promo-form-main {
    display: grid;
    gap: 1.2rem;
    min-width: 0;
}

.promo-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.promo-field label {
    margin-bottom: 0;
}

.promo-field small {
    font-size: 0.8rem;
}

.promo-field input {
    min-width: 0;
    max-width: 100%;
}

.promo-field[hidden],
.promo-mode-panel[hidden] {
    display: none;
}

.promo-step {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1rem;
    background: rgba(4, 6, 14, 0.35);
}

.promo-step legend {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.4rem;
    font-weight: 700;
}

.promo-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    font-size: 0.8rem;
    font-weight: 800;
}

.promo-audiences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.7rem;
}

.promo-choice-card,
.promo-segment label,
.promo-radio-chips label {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.promo-choice-card input,
.promo-segment input,
.promo-radio-chips input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.promo-choice-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.85rem 0.95rem;
    background: var(--surface-alt);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.promo-choice-body > .bi:first-child {
    font-size: 1.3rem;
    color: var(--muted);
}

.promo-choice-body > span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.promo-choice-body small {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.promo-choice-check {
    margin-left: auto;
    color: var(--accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 160ms ease;
}

.promo-choice-card:hover .promo-choice-body {
    border-color: var(--border-strong);
}

.promo-choice-card input:checked + .promo-choice-body {
    border-color: rgba(0, 240, 255, 0.55);
    background: rgba(0, 240, 255, 0.08);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.14);
}

.promo-choice-card input:checked + .promo-choice-body > .bi:first-child {
    color: var(--accent);
}

.promo-choice-card input:checked + .promo-choice-body .promo-choice-check {
    opacity: 1;
    transform: scale(1);
}

.promo-choice-card input:focus-visible + .promo-choice-body,
.promo-segment input:focus-visible + span,
.promo-radio-chips input:focus-visible + .promo-chip {
    outline: 3px solid var(--accent-soft);
    outline-offset: 2px;
}

.promo-segment {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.25rem;
    background: rgba(4, 6, 14, 0.6);
}

.promo-segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 0.6rem;
    padding: 0.55rem 0.9rem;
    color: var(--muted);
    font-weight: 650;
    white-space: nowrap;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.promo-segment label:hover span {
    color: var(--text);
}

.promo-segment input:checked + span {
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 18px rgba(0, 240, 255, 0.2);
}

.promo-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 0.9rem;
}

.promo-input-affix {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: rgba(4, 6, 14, 0.7);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.promo-input-affix:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

.promo-input-affix.is-invalid {
    border-color: rgba(255, 59, 107, 0.7);
    box-shadow: 0 0 14px rgba(255, 59, 107, 0.2);
}

.promo-input-affix > span {
    flex: none;
    padding: 0 0.75rem;
    color: var(--muted);
    font-weight: 650;
}

.promo-input-affix input {
    min-width: 0;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    font-family: var(--heading-font);
    font-size: 1.05rem;
}

.promo-input-affix input:first-child {
    padding-left: 0.85rem;
}

.promo-input-affix input:focus {
    outline: none;
    box-shadow: none;
}

.promo-input-short {
    max-width: 12rem;
}

.promo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

button.promo-chip,
.promo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    color: var(--text);
    background: var(--surface-alt);
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 650;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

button.promo-chip:hover,
.promo-radio-chips label:hover .promo-chip {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    filter: none;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

button.promo-chip.is-selected,
.promo-radio-chips input:checked + .promo-chip {
    color: #04121a;
    border-color: transparent;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: 0 4px 14px rgba(0, 240, 255, 0.22);
}

.promo-field-error {
    margin: 0;
    color: #ff90ab;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Vista previa */
.promo-preview {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.85rem;
    border: 1px solid rgba(255, 46, 196, 0.3);
    border-radius: 1rem;
    padding: 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 240, 255, 0.12), transparent 12rem),
        radial-gradient(circle at 100% 100%, rgba(255, 46, 196, 0.12), transparent 12rem),
        rgba(4, 6, 14, 0.6);
    box-shadow: 0 0 30px rgba(255, 46, 196, 0.08);
}

.promo-preview .eyebrow {
    margin: 0;
}

.promo-preview-body {
    display: grid;
    gap: 0.8rem;
}

.promo-preview-body .muted {
    margin: 0;
    font-size: 0.88rem;
}

.promo-preview-group h4 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.promo-preview-group ul {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-preview-group li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    font-size: 0.92rem;
}

.promo-preview-group li span:first-child {
    color: var(--muted);
}

.promo-preview-group li s {
    margin-right: 0.35rem;
    color: var(--muted);
    text-decoration-color: rgba(255, 59, 107, 0.8);
}

.promo-preview-group li strong {
    color: #7dffbc;
    font-family: var(--heading-font);
}

.promo-preview-save {
    display: inline-block;
    margin-left: 0.35rem;
    border-radius: 999px;
    padding: 0 0.4rem;
    color: #ffd27a;
    background: rgba(255, 138, 0, 0.14);
    font-size: 0.75rem;
    font-weight: 700;
}

.promo-preview-when {
    display: grid;
    gap: 0.25rem;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    font-size: 0.86rem;
}

.promo-preview-when:empty {
    display: none;
}

.promo-preview-when div {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.promo-preview-when span {
    color: var(--muted);
}

.promo-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

@media (max-width: 60rem) {
    .promo-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .promo-preview {
        position: static;
    }
}

/* Historial */
.promo-list {
    display: grid;
    gap: 0.75rem;
}

.promo-item {
    position: relative;
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1rem 1rem 1rem 1.25rem;
    background: var(--surface-alt);
    overflow: hidden;
}

.promo-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(139, 155, 192, 0.35);
}

.promo-item-active::before {
    background: var(--success);
    box-shadow: 0 0 14px var(--success);
}

.promo-item-scheduled::before {
    background: #00aaff;
}

.promo-item-cancelled::before {
    background: var(--danger);
}

.promo-item-ended,
.promo-item-cancelled {
    opacity: 0.78;
}

.promo-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.promo-item-head > div {
    min-width: 0;
}

.promo-item-head h3 {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
}

.promo-item-when {
    margin: 0;
    font-size: 0.85rem;
}

.promo-item-when .bi {
    margin-right: 0.25rem;
}

.promo-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    padding: 0.3rem 0.6rem;
    background: rgba(4, 6, 14, 0.45);
    font-size: 0.84rem;
}

.promo-tag-timer {
    color: var(--muted);
}

.promo-tag-soldout {
    border-color: rgba(255, 107, 107, 0.45);
    color: #ff8f8f;
}

.promo-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.promo-item-actions form {
    margin: 0;
}

.promo-item-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Editar una promo vigente o programada: el tipo elegido muestra sus campos. */
.promo-edit {
    border: 1px dashed var(--border);
    border-radius: 0.8rem;
    padding: 0.6rem 0.85rem;
}

.promo-edit summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-weight: 650;
    cursor: pointer;
}

.promo-edit[open] summary {
    margin-bottom: 0.85rem;
}

.promo-edit-form {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

.promo-edit-form:has(input[name="mode"][value="percent"]:checked) [data-edit-panel="fixed"],
.promo-edit-form:has(input[name="mode"][value="fixed"]:checked) [data-edit-panel="percent"] {
    display: none;
}

.promo-edit-actions {
    display: flex;
    justify-content: flex-end;
}

.promo-edit-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.promo-extend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.promo-extend select {
    width: auto;
    padding: 0.42rem 0.6rem;
    font-size: 0.85rem;
}

@media (max-width: 40rem) {
    .promo-item-head {
        flex-direction: column;
        gap: 0.5rem;
    }

    .promo-item-actions {
        justify-content: stretch;
    }

    .promo-item-actions form,
    .promo-item-actions button {
        flex: 1 1 auto;
    }

    .promo-item-actions button {
        justify-content: center;
    }

    .promo-segment {
        display: grid;
        width: 100%;
    }

    .promo-segment span {
        padding: 0.55rem 0.5rem;
        font-size: 0.9rem;
    }

    .promo-step {
        padding: 0.85rem;
    }
}

/* Tienda: banner de promoción y tramos con precio tachado */
.promo-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.2rem 0 1rem;
    border: 1px solid rgba(255, 138, 0, 0.45);
    border-radius: 1rem;
    padding: 0.95rem 1.1rem;
    background:
        linear-gradient(120deg, rgba(255, 94, 0, 0.16), rgba(255, 46, 196, 0.14) 60%, rgba(0, 240, 255, 0.08));
    box-shadow: 0 0 26px rgba(255, 110, 0, 0.16);
    overflow: hidden;
    animation: shop-hint-glow 2.4s ease-in-out infinite;
}

.promo-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 60%);
    background-size: 250% 100%;
    animation: promo-shine 4.5s linear infinite;
    pointer-events: none;
}

@keyframes promo-shine {
    from { background-position: 150% 0; }
    to { background-position: -100% 0; }
}

.promo-banner-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    color: #1a0a00;
    background: linear-gradient(135deg, #ffe066, #ff9100 55%, #ff3d00);
    box-shadow: 0 6px 18px rgba(255, 120, 0, 0.35);
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
}

.promo-banner-body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.promo-banner-body p {
    margin: 0;
}

.promo-banner-eyebrow {
    color: #ffd27a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promo-banner-title {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 700;
}

.promo-banner-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.promo-banner-price strong {
    color: #ffe9b0;
    font-family: var(--heading-font);
    font-size: 1.2rem;
}

.promo-banner-timer {
    flex: none;
    display: grid;
    justify-items: end;
    gap: 0.1rem;
}

.promo-banner-timer-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.promo-banner-countdown {
    border-radius: 0.55rem;
    padding: 0.3rem 0.55rem;
    color: #fff;
    background: rgba(4, 6, 14, 0.55);
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.promo-banner-countdown.is-urgent {
    color: #ffb35c;
}

.promo-banner.is-ended {
    border-color: var(--border);
    background: var(--surface-alt);
    box-shadow: none;
    animation: none;
    filter: grayscale(0.8);
    opacity: 0.75;
}

.promo-banner.is-ended::after {
    display: none;
}

.shop-tier.is-promo {
    border-color: rgba(255, 138, 0, 0.45);
    background: linear-gradient(140deg, rgba(255, 94, 0, 0.1), rgba(255, 46, 196, 0.08));
}

.shop-tier.is-promo .shop-tier-price {
    color: #ffe9b0;
}

.shop-tiers[hidden] {
    display: none;
}

@media (max-width: 40rem) {
    .promo-banner {
        flex-wrap: wrap;
    }

    .promo-banner-timer {
        flex: 1 1 100%;
        grid-auto-flow: column;
        align-items: center;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-live-dot,
    .promo-pulse,
    .promo-banner,
    .promo-banner::after {
        animation: none;
    }
}

/* Cupo por cliente de las promociones */
.promo-step-hint {
    margin: 0;
    font-size: 0.85rem;
}

.promo-preview-quota {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.45rem 0 0;
    color: #ffd27a;
    font-size: 0.82rem;
    font-weight: 600;
}

.promo-banner-quota {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem !important;
    color: #ffd27a;
    font-size: 0.82rem;
    font-weight: 600;
}

.promo-banner-quota strong {
    color: #fff;
}

.promo-banner-stock.is-low {
    color: #ff9f6b;
}

.promo-exhausted-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.2rem 0 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    color: var(--muted);
    background: var(--surface-alt);
    font-size: 0.88rem;
}

.promo-exhausted-note .bi {
    margin-top: 0.1rem;
    color: var(--accent);
}

/* Resultados de cada promoción: indicadores y compradores */
.promo-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.promo-stat {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: rgba(4, 6, 14, 0.45);
}

.promo-stat-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.promo-stat strong {
    font-family: var(--heading-font);
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.promo-stat small {
    color: var(--muted);
    font-size: 0.75rem;
}

.promo-stat-money {
    border-color: rgba(57, 255, 157, 0.35);
    background:
        radial-gradient(circle at 100% 0%, rgba(57, 255, 157, 0.14), transparent 9rem),
        rgba(4, 6, 14, 0.45);
}

.promo-stat-money strong {
    color: #7dffbc;
}

.promo-stat-money small {
    color: #ffd27a;
}

@media (max-width: 48rem) {
    .promo-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.promo-buyers-none {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.promo-buyers {
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: rgba(4, 6, 14, 0.35);
    overflow: hidden;
}

.promo-buyers > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font-weight: 650;
    list-style: none;
}

.promo-buyers > summary::-webkit-details-marker {
    display: none;
}

.promo-buyers > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.promo-buyers > summary:hover {
    background: var(--surface-hover);
}

.promo-buyers-caret {
    color: var(--muted);
    transition: transform 160ms ease;
}

.promo-buyers[open] .promo-buyers-caret {
    transform: rotate(180deg);
}

.promo-buyers-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border-top: 1px solid var(--border);
    padding: 0.75rem 0.9rem;
}

.promo-buyers-search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 22rem;
}

.promo-buyers-search .bi {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.promo-buyers-search input {
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
    font-size: 0.88rem;
}

.promo-buyers-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.promo-buyers-head,
.promo-buyer {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
}

.promo-buyers-head {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.promo-buyers-head span:nth-child(n + 3) {
    text-align: right;
}

.promo-buyers-list {
    max-height: 26rem;
    overflow-y: auto;
}

.promo-buyer {
    border-top: 1px solid rgba(139, 155, 192, 0.12);
}

.promo-buyer[hidden] {
    display: none;
}

.promo-buyer:hover {
    background: rgba(0, 240, 255, 0.04);
}

.promo-buyer-who {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.promo-buyer-who > div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.promo-buyer-who strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}

.promo-buyer-who small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.promo-buyer-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    color: #04121a;
    background: linear-gradient(135deg, var(--accent), #7c5cff);
    font-family: var(--heading-font);
    font-weight: 700;
}

.promo-buyer-avatar.is-reseller {
    background: linear-gradient(135deg, var(--accent-2), #ff9100);
}

.promo-buyer-role {
    border-radius: 999px;
    padding: 0 0.45rem;
    color: #baf6ff;
    background: var(--accent-soft);
    font-size: 0.7rem;
    font-weight: 700;
}

.promo-buyer-role.is-reseller {
    color: #ffc2ee;
    background: var(--accent-2-soft);
}

.promo-buyer-quota {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.promo-buyer-quota small {
    color: var(--muted);
    font-size: 0.78rem;
}

.promo-buyer-quota small strong {
    color: var(--text);
}

.promo-meter {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(139, 155, 192, 0.18);
    overflow: hidden;
}

.promo-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #39ff9d);
}

.promo-meter.is-high span {
    background: linear-gradient(90deg, #ffd27a, #ff9100);
}

.promo-meter.is-full span {
    background: linear-gradient(90deg, #ff9100, var(--danger));
}

.promo-buyer-left,
.promo-buyer-money {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    text-align: right;
}

.promo-buyer-left strong,
.promo-buyer-money strong {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.promo-buyer-left strong {
    color: #9fd8ff;
}

.promo-buyer-money strong {
    color: #7dffbc;
}

.promo-buyer-left small,
.promo-buyer-money small {
    color: var(--muted);
    font-size: 0.74rem;
}

.promo-buyer-money small {
    color: #ffd27a;
}

.promo-buyers-empty {
    margin: 0;
    border-top: 1px solid var(--border);
    padding: 0.9rem;
    color: var(--muted);
    font-size: 0.88rem;
    text-align: center;
}

@media (max-width: 48rem) {
    .promo-buyers-head {
        display: none;
    }

    .promo-buyer {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.6rem 1rem;
        padding: 0.8rem 0.9rem;
    }

    .promo-buyer-who {
        grid-column: 1 / -1;
    }

    .promo-buyer-who strong {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.84rem;
    }

    .promo-buyer-quota {
        grid-column: 1 / -1;
    }

    .promo-buyer-left {
        justify-items: start;
        text-align: left;
    }

    .promo-buyers-search {
        max-width: none;
    }
}

/* Tienda: stock en camino (próximo lote en reposo) */

.stock-badge.is-incoming {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #ffd98a;
    background: rgba(255, 179, 64, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 179, 64, 0.4), 0 0 16px rgba(255, 179, 64, 0.15);
}

.restock-dot {
    position: relative;
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #ffb340;
}

.restock-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: restock-ping 1.6s ease-out infinite;
}

@keyframes restock-ping {
    from {
        opacity: 0.8;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(2.8);
    }
}

.restock-card {
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    border-radius: 1.2rem;
    padding: 1.6rem 1.25rem 1.3rem;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 179, 64, 0.16), transparent 60%),
        radial-gradient(circle at 0% 100%, rgba(0, 240, 255, 0.1), transparent 55%),
        var(--surface-alt);
    box-shadow: inset 0 0 0 1px rgba(255, 179, 64, 0.3), 0 18px 50px rgba(0, 0, 0, 0.35);
    animation: restock-card-in 420ms ease-out;
}

@keyframes restock-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.restock-visual {
    position: relative;
    width: min(16rem, 100%);
    height: 3.6rem;
}

.restock-road {
    position: absolute;
    right: 0;
    bottom: 0.35rem;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 217, 138, 0.55) 0 14px, transparent 14px 26px);
    background-size: 26px 2px;
    animation: restock-road 0.9s linear infinite;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

@keyframes restock-road {
    to {
        background-position: -26px 0;
    }
}

.restock-truck {
    position: absolute;
    bottom: 0.55rem;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-left: -1.55rem;
    border-radius: 0.9rem;
    color: #1c1200;
    background: linear-gradient(135deg, #ffd54a, #ff9f2e);
    box-shadow: 0 0 28px rgba(255, 179, 64, 0.45);
    font-size: 1.55rem;
    animation: restock-truck 1.4s ease-in-out infinite;
}

@keyframes restock-truck {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.restock-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    color: #ffd98a;
    background: rgba(255, 179, 64, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 179, 64, 0.35);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.restock-title {
    margin: 0;
    font-size: 1.3rem;
}

.restock-text {
    max-width: 26rem;
    margin: 0;
    color: #c9d4ee;
    line-height: 1.5;
}

.restock-text strong {
    color: #ffd98a;
}

.restock-timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    width: min(24rem, 100%);
    margin-top: 0.2rem;
}

.restock-unit {
    display: grid;
    gap: 0.2rem;
    border-radius: 0.85rem;
    padding: 0.7rem 0.3rem 0.55rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 0 0 1px var(--border);
}

.restock-unit-value {
    display: block;
    font-family: var(--heading-font);
    font-size: clamp(1.45rem, 6vw, 2rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}

.restock-unit-value.is-tick {
    animation: restock-tick 300ms ease-out;
}

@keyframes restock-tick {
    from {
        opacity: 0.35;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.restock-unit-label {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.restock-progress {
    display: grid;
    gap: 0.45rem;
    width: min(24rem, 100%);
    margin-top: 0.3rem;
}

.restock-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.restock-progress-head strong {
    color: #ffd98a;
    font-variant-numeric: tabular-nums;
}

.restock-bar {
    overflow: hidden;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.restock-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff9f2e, #ffd54a, #39ff9d);
    background-size: 200% 100%;
    box-shadow: 0 0 14px rgba(255, 179, 64, 0.5);
    transition: width 900ms ease;
    animation: restock-shimmer 2.4s linear infinite;
}

@keyframes restock-shimmer {
    to {
        background-position: -200% 0;
    }
}

.restock-eta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
}

.restock-eta[hidden] {
    display: none;
}

.restock-eta span {
    display: inline-block;
}

.restock-eta span::first-letter {
    text-transform: uppercase;
}

.restock-note {
    margin: 0;
    font-size: 0.78rem;
}

.restock-done {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    color: #c8ffe6;
    background: rgba(57, 255, 157, 0.12);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.4);
    font-weight: 600;
}

.restock-done[hidden] {
    display: none;
}

.restock-done i {
    color: var(--success);
}

/* Falta menos de una hora */
.restock-card.is-soon .restock-unit {
    box-shadow: inset 0 0 0 1px rgba(255, 179, 64, 0.45), 0 0 16px rgba(255, 179, 64, 0.12);
}

.restock-card.is-arrived {
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.5), 0 0 40px rgba(57, 255, 157, 0.15);
}

.restock-card.is-arrived .restock-truck {
    animation: restock-truck-go 900ms ease-in forwards;
}

@keyframes restock-truck-go {
    to {
        opacity: 0;
        transform: translateX(9rem);
    }
}

@media (max-width: 520px) {
    .restock-card {
        padding: 1.3rem 0.85rem 1.1rem;
    }

    .restock-title {
        font-size: 1.15rem;
    }

    .restock-timer {
        gap: 0.4rem;
    }

    .restock-unit {
        padding: 0.6rem 0.2rem 0.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .restock-card,
    .restock-road,
    .restock-truck,
    .restock-dot::after,
    .restock-bar span,
    .restock-unit-value.is-tick {
        animation: none;
    }
}

/* Tarjeta del login que aparece desde el tercer intento fallido: invita a
   restablecer la contraseña antes de que el rate limit bloquee el acceso. */
.login-recovery {
    position: relative;
    overflow: hidden;
    margin: 1.25rem 0;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    padding: 1.6rem 1.25rem 1.25rem;
    text-align: center;
    background:
        radial-gradient(circle at 50% -20%, rgba(0, 240, 255, 0.22), transparent 60%),
        radial-gradient(circle at 100% 120%, rgba(255, 46, 196, 0.18), transparent 55%),
        var(--surface-alt);
    box-shadow: 0 0 32px rgba(0, 240, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    animation: login-recovery-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.login-recovery.is-locked {
    border-color: rgba(255, 46, 196, 0.45);
    box-shadow: 0 0 32px rgba(255, 46, 196, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.login-recovery-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    color: #04121a;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
}

.login-recovery-icon i {
    animation: login-recovery-key 2.4s ease-in-out infinite;
}

.login-recovery-ring {
    position: absolute;
    inset: -6px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: login-recovery-pulse 2.4s ease-out infinite;
}

.login-recovery.is-locked .login-recovery-ring {
    border-color: var(--accent-2);
}

.login-recovery h2 {
    margin: 0 0 0.45rem;
    font-size: 1.2rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-recovery p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.login-recovery-meter {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.1rem 0 0.45rem;
}

.login-recovery-meter span {
    width: 1.9rem;
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(0, 240, 255, 0.35);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
    animation: login-recovery-pip 0.4s calc(var(--i) * 80ms + 0.3s) ease-out both;
}

.login-recovery-meter span.is-used {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.login-recovery p.login-recovery-count {
    margin-bottom: 1.1rem;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-recovery-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: 0.65rem;
    padding: 0.8rem 1rem;
    color: #04121a;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-recovery-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 46, 196, 0.45);
}

.login-recovery-cta:hover i {
    transform: rotate(180deg);
}

.login-recovery-cta i {
    transition: transform 0.45s ease;
}

@keyframes login-recovery-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
}

@keyframes login-recovery-pulse {
    0% {
        opacity: 0.8;
        transform: scale(0.9);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes login-recovery-key {
    0%, 70%, 100% {
        transform: rotate(0deg);
    }
    78% {
        transform: rotate(-18deg);
    }
    86% {
        transform: rotate(14deg);
    }
}

@keyframes login-recovery-pip {
    from {
        opacity: 0;
        transform: scaleX(0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-recovery,
    .login-recovery-icon i,
    .login-recovery-ring,
    .login-recovery-meter span {
        animation: none;
    }
}

/* Aviso de comisión en el pago USDT: el cobro exige que llegue el monto
   exacto, así que la comisión de retiro del exchange la cubre el cliente. */
.pay-panel-note.is-fee {
    color: #ffe39a;
}

.pay-panel-note.is-fee i {
    margin-top: 0.1rem;
    color: #f0b90b;
}

.usdt-fee {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(240, 185, 11, 0.4);
    border-radius: 0.95rem;
    padding: 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(240, 185, 11, 0.16), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(38, 161, 123, 0.12), transparent 55%),
        rgba(10, 13, 24, 0.6);
    box-shadow: 0 0 26px rgba(240, 185, 11, 0.08);
    animation: usdt-fee-in 0.5s ease-out both;
}

.usdt-fee[hidden] {
    display: none;
}

.usdt-fee-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.usdt-fee-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    color: #1a1300;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #f0b90b, #ffd76a);
    box-shadow: 0 0 18px rgba(240, 185, 11, 0.4);
}

.usdt-fee h3 {
    margin: 0 0 0.25rem;
    color: #ffe39a;
    font-size: 1.02rem;
}

.usdt-fee-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.usdt-fee-math {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.5rem;
}

.usdt-fee-term {
    display: grid;
    align-content: center;
    gap: 0.25rem;
    min-width: 0;
    border-radius: 0.7rem;
    padding: 0.65rem 0.7rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.usdt-fee-term.is-total {
    background: rgba(240, 185, 11, 0.1);
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.45);
}

.usdt-fee-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.usdt-fee-value {
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.usdt-fee-value.is-target {
    color: #4fe3b0;
    font-family: var(--heading-font);
    font-size: 1.05rem;
}

.usdt-fee-value small {
    color: var(--muted);
    font-size: 0.7rem;
}

.usdt-fee-op {
    align-self: center;
    color: #f0b90b;
    font-family: var(--heading-font);
    font-size: 1.2rem;
    font-weight: 700;
}

.usdt-fee-outcomes {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.usdt-fee-outcomes li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border-radius: 0.65rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.86rem;
    line-height: 1.45;
}

.usdt-fee-outcomes i {
    flex: none;
    margin-top: 0.1rem;
}

.usdt-fee-outcomes .is-ok {
    color: #c4f7e4;
    background: rgba(38, 161, 123, 0.1);
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.35);
}

.usdt-fee-outcomes .is-ok i {
    color: #26a17b;
}

.usdt-fee-outcomes .is-bad {
    color: #ffd0da;
    background: rgba(255, 59, 107, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 107, 0.3);
}

.usdt-fee-outcomes .is-bad i {
    color: var(--danger);
}

.usdt-fee-title {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.usdt-fee-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: start;
    width: fit-content;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    color: #4fe3b0;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(38, 161, 123, 0.12);
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.4);
}

.usdt-breakdown {
    display: grid;
    gap: 0.1rem;
    margin: 0;
}

.usdt-breakdown > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.usdt-breakdown dt {
    color: var(--muted);
    font-size: 0.9rem;
}

.usdt-breakdown dd {
    margin: 0;
    color: var(--text);
    font-family: var(--heading-font);
    font-size: 0.95rem;
    white-space: nowrap;
}

.usdt-breakdown .is-total {
    border-bottom: 0;
    padding-top: 0.75rem;
}

.usdt-breakdown .is-total dt {
    color: var(--text);
    font-weight: 700;
}

.usdt-breakdown .is-total dd {
    color: #ffd76a;
    font-size: 1.2rem;
    font-weight: 700;
}

.usdt-total-modal {
    width: min(24rem, calc(100vw - 2rem));
    border: 1px solid rgba(38, 161, 123, 0.5);
    border-radius: 1.2rem;
    padding: 1.7rem 1.4rem 1.3rem;
    color: var(--text);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(38, 161, 123, 0.3), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(240, 185, 11, 0.1), transparent 55%),
        #0b0e1c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(38, 161, 123, 0.25);
}

.usdt-total-modal[open] {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    animation: night-modal-in 220ms ease-out;
}

.usdt-total-modal::backdrop {
    background: rgba(3, 4, 10, 0.72);
    backdrop-filter: blur(4px);
}

.usdt-total-modal-icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: rgba(38, 161, 123, 0.15);
    box-shadow: 0 0 30px rgba(38, 161, 123, 0.45);
}

.usdt-total-modal-kicker {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.usdt-total-modal h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.usdt-total-modal-amount {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.usdt-total-modal-amount small {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
}

.usdt-total-modal .usdt-fee-chip {
    justify-self: center;
}

.usdt-total-modal-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.6rem;
    border-radius: 0.8rem;
    padding: 0.75rem 0.85rem;
    text-align: left;
    background: rgba(255, 59, 107, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 107, 0.3);
}

.usdt-total-modal-alert i {
    flex: none;
    margin-top: 0.1rem;
    color: var(--danger);
}

.usdt-total-modal-alert p {
    margin: 0;
    color: #ffd0da;
    font-size: 0.9rem;
    line-height: 1.5;
}

.usdt-total-modal-button {
    width: 100%;
    margin-top: 0.6rem;
    border: 0;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    color: #04120c;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, #26a17b, #4fe3b0);
}

.usdt-total-modal-button:hover,
.usdt-total-modal-button:focus-visible {
    filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .usdt-total-modal[open] {
        animation: none;
    }
}

@keyframes usdt-fee-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (max-width: 40rem) {
    .usdt-fee-math {
        grid-template-columns: minmax(0, 1fr);
    }

    .usdt-fee-op {
        justify-self: center;
        line-height: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .usdt-fee {
        animation: none;
    }
}

/* Monto USDT con el punto decimal resaltado y los decimales más pequeños,
   para que "50.0371" no se lea como cincuenta mil. */
.usdt-num {
    white-space: nowrap;
}

.usdt-num-dot {
    display: inline-block;
    margin: 0 0.06em;
    color: #f0b90b;
    font-size: 1.25em;
    line-height: 0;
    text-shadow: 0 0 12px rgba(240, 185, 11, 0.6);
}

.usdt-num-fraction {
    font-size: 0.68em;
    opacity: 0.85;
}

.usdt-reading {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.55rem 0 0;
    border-radius: 0.65rem;
    padding: 0.6rem 0.75rem;
    color: #ffe39a;
    font-size: 0.86rem;
    line-height: 1.45;
    background: rgba(240, 185, 11, 0.08);
    box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.3);
}

.usdt-reading i {
    flex: none;
    margin-top: 0.1rem;
    color: #f0b90b;
}

.usdt-reading strong {
    color: #fff3c4;
}

.usdt-reading-tip {
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

/* Comisión de números (pestaña admin "Comisión números"). */
.nc-rate-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Vista de prueba del shop (solo admin, ?view=shop_preview) */
.shop-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
    border: 1px dashed rgba(240, 185, 11, 0.55);
    border-radius: 0.9rem;
    padding: 0.75rem 0.9rem;
    background: rgba(240, 185, 11, 0.06);
}

.shop-preview-bar-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
}

.shop-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    color: #1a1300;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f0b90b, #ffd76a);
}

.shop-preview-bar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.shop-preview-switch {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.2rem;
    background: rgba(4, 6, 14, 0.6);
    box-shadow: inset 0 0 0 1px var(--border);
}

.shop-preview-switch a,
.shop-preview-exit {
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.shop-preview-switch a.is-active {
    color: var(--background);
    background: var(--accent);
}

.shop-preview-exit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.shop-preview-switch a:not(.is-active):hover,
.shop-preview-exit:hover {
    color: var(--text);
    background: var(--surface-hover);
}

/* ---------- Registro de costos (admin) ---------- */

.costs-section {
    min-width: 0;
}

.costs-section [hidden] {
    display: none !important;
}

.costs-heading {
    flex-wrap: wrap;
    align-items: flex-start;
}

.costs-title {
    margin: 0;
}

.costs-subtitle {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
}

.costs-heading-actions {
    max-width: 100%;
    overflow-x: auto;
}

.costs-kpi--cost { --kpi: var(--accent-2); }
.costs-kpi--sales { --kpi: var(--accent); }
.costs-kpi--profit { --kpi: var(--success); }
.costs-kpi--profit.is-negative { --kpi: var(--danger); }
.costs-kpi--top { --kpi: #ffc53d; }

.costs-kpi--top .sales-kpi-value {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.costs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 68rem) {
    .costs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.costs-side {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    align-content: start;
}

.costs-card {
    position: relative;
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-alt);
}

.costs-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.costs-card-head h3 {
    margin: 0;
}

.costs-card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
}

/* Formulario */

.costs-form {
    scroll-margin-top: 1rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.costs-form.is-editing {
    border-color: color-mix(in srgb, #ffc53d 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, #ffc53d 30%, transparent), 0 12px 34px rgba(255, 197, 61, 0.12);
}

.costs-cancel {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.costs-cats {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.costs-cats legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 650;
}

.costs-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.costs-cat {
    --c: #8b9bc0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    user-select: none;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.costs-cat[data-cat="cuentas"] { --c: #00f0ff; }
.costs-cat[data-cat="numeros"] { --c: #ff2ec4; }
.costs-cat[data-cat="proxies"] { --c: #7c5cff; }
.costs-cat[data-cat="servidores"] { --c: #39ff9d; }
.costs-cat[data-cat="software"] { --c: #ffc53d; }
.costs-cat[data-cat="personal"] { --c: #ff8a3d; }
.costs-cat[data-cat="publicidad"] { --c: #3da5ff; }

.costs-cat input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.costs-cat i {
    color: var(--c);
}

.costs-cat:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--c) 50%, transparent);
    transform: translateY(-1px);
}

.costs-cat:has(input:checked) {
    color: var(--text);
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent);
}

.costs-cat:has(input:focus-visible) {
    outline: 3px solid var(--accent-soft);
    outline-offset: 2px;
}

.costs-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.costs-field {
    min-width: 0;
}

.costs-field--wide {
    grid-column: 1 / -1;
}

@media (max-width: 30rem) {
    .costs-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.costs-field label {
    font-size: 0.88rem;
}

.costs-optional {
    margin-left: 0.25rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.costs-field textarea {
    min-height: 4.2rem;
}

.costs-field input[type="date"] {
    color-scheme: dark;
}

.costs-money {
    position: relative;
}

.costs-money span {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    color: var(--muted);
    font-weight: 700;
    transform: translateY(-50%);
    pointer-events: none;
}

.costs-money input {
    padding-left: 1.7rem;
}

.costs-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

.costs-total {
    display: flex;
    flex-direction: column;
}

.costs-total-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.costs-total-value {
    color: var(--muted);
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    transition: color 200ms ease, text-shadow 200ms ease;
}

.costs-total-value.is-filled {
    color: var(--text);
    text-shadow: 0 0 22px rgba(255, 46, 196, 0.45);
}

.costs-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.costs-form-error {
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    border-radius: 0.6rem;
    color: #ffb3c4;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    font-size: 0.88rem;
}

/* Gráfico costos vs ventas */

.costs-legend {
    display: flex;
    gap: 0.85rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.costs-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.costs-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
}

.costs-swatch.is-cost { background: var(--accent-2); }
.costs-swatch.is-sales { background: var(--accent); }

.costs-chart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    height: 13rem;
}

.costs-chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1.3rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.costs-chart-plot {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}

.costs-chart-plot::before,
.costs-chart-plot::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.costs-chart-plot::before {
    top: 0;
}

.costs-chart-plot::after {
    top: calc((100% - 1.3rem) / 2);
}

.costs-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    box-shadow: none;
}

.costs-col:hover,
.costs-col:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    filter: none;
    outline: none;
}

.costs-col-bars {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    padding: 0 1px;
    border-bottom: 1px solid var(--border);
}

.costs-bar {
    flex: 1 1 0;
    max-width: 0.9rem;
    height: var(--h);
    border-radius: 0.25rem 0.25rem 0 0;
    animation: costs-grow 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: bottom;
}

.costs-bar.is-cost {
    background: linear-gradient(to top, color-mix(in srgb, var(--accent-2) 55%, transparent), var(--accent-2));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 35%, transparent);
}

.costs-bar.is-sales {
    background: linear-gradient(to top, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
}

@keyframes costs-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.costs-col-label {
    height: 1.3rem;
    padding-top: 0.25rem;
    overflow: visible;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}

.costs-chart-tip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 0.15rem;
    min-width: 11rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    background: rgba(5, 8, 18, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    font-size: 0.8rem;
    pointer-events: none;
}

.costs-chart-tip strong {
    margin-bottom: 0.15rem;
}

.costs-chart-tip span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
}

.costs-chart-tip b { color: var(--text); font-variant-numeric: tabular-nums; }
.costs-chart-tip .is-cost b { color: var(--accent-2); }
.costs-chart-tip .is-sales b { color: var(--accent); }
.costs-chart-tip .is-pos b { color: var(--success); }
.costs-chart-tip .is-neg b { color: var(--danger); }

/* Distribución por categoría */

.costs-breakdown {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
}

@media (max-width: 30rem) {
    .costs-breakdown {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
}

.costs-donut {
    --donut: conic-gradient(rgba(139, 155, 192, 0.18) 0 100%);
    position: relative;
    display: grid;
    place-items: center;
    width: 9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--donut);
    box-shadow: 0 0 30px rgba(255, 46, 196, 0.15);
    transition: background 300ms ease;
}

.costs-donut::before {
    content: '';
    position: absolute;
    inset: 1.05rem;
    border-radius: 50%;
    background: #0a0d18;
}

.costs-donut-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 6.5rem;
    text-align: center;
}

.costs-donut-center strong {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.costs-donut-center span {
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.costs-cat-bars {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.costs-cat-bar {
    display: grid;
    gap: 0.3rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    color: var(--text);
    background: transparent;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
}

.costs-cat-bar:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    filter: none;
}

.costs-cat-bar.is-active {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 10%, transparent);
}

.costs-cat-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.costs-cat-bar-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.costs-cat-bar-name i {
    color: var(--c);
}

.costs-cat-bar-amount {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.costs-cat-bar-amount small {
    color: var(--muted);
    font-weight: 500;
}

.costs-cat-bar-track {
    height: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.costs-cat-bar-fill {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: var(--c);
    box-shadow: 0 0 10px var(--c);
    transition: width 400ms ease;
}

.costs-cat-empty {
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

/* Tabla */

.costs-table-head {
    align-items: center;
}

.costs-toolbar {
    display: flex;
    flex: 1 1 30rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: 44rem;
}

.costs-toolbar select {
    width: auto;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
}

.costs-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
}

.costs-search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 0;
}

.costs-search i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.costs-search input {
    padding: 0.55rem 0.75rem 0.55rem 2.1rem;
    font-size: 0.88rem;
}

@media (max-width: 40rem) {
    .costs-toolbar {
        width: 100%;
    }

    .costs-toolbar select {
        flex: 1 1 auto;
    }
}

.costs-table-scroll {
    overflow-x: auto;
}

.costs-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.costs-table th,
.costs-table td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    vertical-align: middle;
}

.costs-table thead th {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.costs-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.costs-table tbody tr {
    transition: background 200ms ease, opacity 250ms ease, transform 250ms ease;
}

.costs-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.costs-table tbody tr.is-editing {
    background: rgba(255, 197, 61, 0.08);
    box-shadow: inset 3px 0 0 #ffc53d;
}

.costs-table tbody tr.is-new {
    animation: costs-flash 1.6s ease;
}

.costs-table tbody tr.is-leaving {
    opacity: 0;
    transform: translateX(1.5rem);
}

@keyframes costs-flash {
    0% { background: rgba(57, 255, 157, 0.22); }
    100% { background: transparent; }
}

.costs-table tfoot th,
.costs-table tfoot td {
    border-bottom: 0;
    font-weight: 700;
}

.costs-table tfoot td.num {
    color: var(--accent-2);
    font-family: var(--heading-font);
    font-size: 1.05rem;
}

.costs-date {
    font-weight: 600;
    white-space: nowrap;
}

.costs-date .sales-year {
    color: var(--muted);
    font-weight: 400;
}

.costs-concept {
    max-width: 22rem;
}

.costs-concept-main {
    display: block;
    font-weight: 600;
}

.costs-concept-sub,
.costs-concept-note {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.costs-concept-note {
    font-style: italic;
    white-space: pre-line;
}

.costs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    border-radius: 999px;
    color: var(--text);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.costs-pill i {
    color: var(--c);
}

.costs-amount {
    font-weight: 700;
}

.costs-actions {
    white-space: nowrap;
    text-align: right !important;
}

.costs-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    color: var(--muted);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.85rem;
}

.costs-icon-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
    filter: none;
}

.costs-icon-btn.is-danger:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    box-shadow: 0 0 12px rgba(255, 59, 107, 0.25);
}

.costs-confirm-btn {
    height: 2rem;
    margin-left: 0.2rem;
    padding: 0 0.7rem;
    border-radius: 0.55rem;
    color: #fff;
    background: var(--danger);
    box-shadow: 0 0 16px rgba(255, 59, 107, 0.45);
    font-size: 0.8rem;
    animation: costs-pulse 1s ease-in-out infinite alternate;
}

.costs-confirm-btn:hover {
    box-shadow: 0 0 22px rgba(255, 59, 107, 0.6);
}

@keyframes costs-pulse {
    from { box-shadow: 0 0 8px rgba(255, 59, 107, 0.35); }
    to { box-shadow: 0 0 20px rgba(255, 59, 107, 0.65); }
}

.costs-empty {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    color: var(--muted);
    text-align: center;
}

.costs-empty i {
    font-size: 2rem;
    opacity: 0.6;
}

.costs-empty p {
    margin: 0;
}

/* Aviso flotante */

.costs-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--success) 50%, transparent);
    border-radius: 0.8rem;
    color: var(--text);
    background: rgba(6, 20, 16, 0.95);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 20px rgba(57, 255, 157, 0.18);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 220ms ease, transform 220ms ease;
}

.costs-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.costs-toast.is-error {
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    background: rgba(30, 6, 14, 0.95);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 59, 107, 0.2);
}

@media (max-width: 40rem) {
    .costs-toast {
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .costs-bar,
    .costs-confirm-btn,
    .costs-table tbody tr.is-new {
        animation: none;
    }

    .costs-toast,
    .costs-cat,
    .costs-cat-bar-fill,
    .costs-table tbody tr {
        transition: none;
    }
}

/* Aprobación automática de reemplazos "Paid" (admin, pestaña Reemplazos) */

.auto-paid-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.auto-paid-actions form {
    margin: 0;
}

.auto-paid-actions button.compact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
}

.replacement-approved-message {
    display: block;
    margin: 0.5rem 0 0.2rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--success);
    border-radius: 0.5rem;
    color: var(--text);
    background: rgba(57, 255, 157, 0.08);
    white-space: pre-line;
}

/* Comisión Yerimar (admin) */
.yer {
    display: grid;
    gap: 1.1rem;
}

.yer-rate-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    color: #fff;
    background: linear-gradient(120deg, #6d1ed4, #a259ff);
    box-shadow: 0 0 14px rgba(162, 89, 255, 0.45);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    vertical-align: middle;
}

.yer-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    overflow: hidden;
    border: 1px solid rgba(162, 89, 255, 0.45);
    border-radius: 1.1rem;
    padding: 1.5rem 1.4rem;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(162, 89, 255, 0.32), transparent 55%),
        radial-gradient(90% 140% at 100% 100%, rgba(109, 30, 212, 0.28), transparent 60%),
        #0e0822;
    box-shadow: 0 18px 50px -20px rgba(109, 30, 212, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.yer-hero-glow {
    position: absolute;
    top: -60%;
    right: -10%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(162, 89, 255, 0.35), transparent 70%);
    filter: blur(10px);
    animation: yer-float 9s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes yer-float {
    from { transform: translate(0, 0); }
    to { transform: translate(-2.5rem, 2rem); }
}

.yer-hero-main {
    position: relative;
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.yer-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #c9a8ff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.yer-hero-amount {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 9vw, 3.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #ffffff 25%, #d7bcff 60%, #a259ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(162, 89, 255, 0.45));
}

.yer-hero-sub {
    color: #b9a3e0;
    font-size: 0.9rem;
}

button.yer-pay-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #fff;
    background: linear-gradient(120deg, #6d1ed4, #a259ff);
    box-shadow: 0 0 0 1px rgba(162, 89, 255, 0.55), 0 10px 26px rgba(162, 89, 255, 0.35);
}

button.yer-pay-button:hover {
    box-shadow: 0 0 0 1px rgba(162, 89, 255, 0.85), 0 0 30px rgba(162, 89, 255, 0.6);
}

button.yer-pay-button:disabled {
    opacity: 0.4;
    filter: grayscale(0.5);
    box-shadow: none;
    cursor: not-allowed;
}

.yer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.yer-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon label"
        "icon value"
        "icon sub";
    column-gap: 0.8rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
}

.yer-stat-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.15rem;
}

.yer-stat-icon.is-review {
    color: #ffd54a;
    background: rgba(255, 213, 74, 0.12);
}

.yer-stat-icon.is-paid {
    color: var(--success);
    background: rgba(57, 255, 157, 0.1);
}

.yer-stat-icon.is-last {
    color: #c9a8ff;
    background: rgba(162, 89, 255, 0.14);
}

.yer-stat-label {
    grid-area: label;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.yer-stat-value {
    grid-area: value;
    font-family: var(--heading-font);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.yer-stat-sub {
    grid-area: sub;
    color: var(--muted);
    font-size: 0.8rem;
}

.yer-block {
    display: grid;
    gap: 0.7rem;
}

.yer-block h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    font-size: 1.02rem;
}

.yer-block h3 i {
    color: #a259ff;
}

.yer-empty {
    margin: 0;
    border: 1px dashed rgba(162, 89, 255, 0.3);
    border-radius: 0.8rem;
    padding: 1rem;
    text-align: center;
}

.yer-orders,
.yer-payouts {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yer-order,
.yer-payout {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
}

.yer-order img {
    flex: none;
    border-radius: 0.5rem;
}

.yer-order-body,
.yer-payout-body {
    display: grid;
    flex: 1;
    gap: 0.15rem;
    min-width: 0;
}

.yer-order-body strong,
.yer-payout-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}

.yer-order-body .muted,
.yer-payout-body .muted {
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.yer-order-amount {
    flex: none;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    color: #e6d6ff;
    background: rgba(162, 89, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.4);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.yer-payout-check {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: #04170e;
    background: linear-gradient(120deg, var(--success), #8affc6);
}

.yer-payout-amount {
    flex: none;
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.yer-more {
    margin: 0;
    font-size: 0.84rem;
}

.yer-modal {
    width: min(24rem, calc(100vw - 2rem));
    border: 1px solid rgba(162, 89, 255, 0.5);
    border-radius: 1.2rem;
    padding: 1.6rem 1.4rem 1.3rem;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -10%, rgba(162, 89, 255, 0.35), transparent 58%),
        #0d0820;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(162, 89, 255, 0.25);
    text-align: center;
}

.yer-modal::backdrop {
    background: rgba(5, 2, 14, 0.75);
    backdrop-filter: blur(5px);
}

.yer-modal[open] {
    animation: zelle-fee-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.yer-modal-icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 0.9rem;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #6d1ed4, #a259ff);
    box-shadow: 0 0 30px rgba(162, 89, 255, 0.55);
    font-size: 1.55rem;
}

.yer-modal h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.yer-modal p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.yer-modal-amount {
    display: grid;
    gap: 0.2rem;
    margin: 1.1rem 0 1.2rem;
    border-radius: 0.9rem;
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.28);
    font-size: 0.8rem;
}

.yer-modal-amount > span:first-child {
    color: #b9a3e0;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.yer-modal-amount strong {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}

.yer-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 40rem) {
    .yer-hero {
        padding: 1.2rem 1rem;
    }

    .yer-hero .yer-pay-button {
        width: 100%;
    }

    .yer-order,
    .yer-payout {
        flex-wrap: wrap;
    }

    .yer-order-body,
    .yer-payout-body {
        flex: 1 1 calc(100% - 3rem);
    }

    .yer-order-amount,
    .yer-payout-amount {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yer-hero-glow,
    .yer-modal[open] {
        animation: none;
    }
}

/* Shop sin método de pago elegido */
.pay-method-required {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #ffd54a;
    font-size: 0.88rem;
    font-weight: 650;
}

.pay-method-required[hidden] {
    display: none;
}

.pay-methods.is-missing .pay-method {
    border-color: rgba(255, 213, 74, 0.55);
    animation: pay-methods-nudge 420ms ease;
}

@keyframes pay-methods-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .pay-methods.is-missing .pay-method {
        animation: none;
    }
}

/* ===========================================================================
   Afiliados VIP (templates/_admin_vip.php, assets/vip-affiliates.js)
   =========================================================================== */
.vip-section {
    --vip-gold: #ffc53d;
    --vip-violet: #7c5cff;
}

.vip-section [hidden] {
    display: none !important;
}

.vip-heading {
    flex-wrap: wrap;
    align-items: center;
}

.vip-heading .eyebrow {
    margin: 0;
}

.vip-heading h2 {
    margin: 0.15rem 0 0.25rem;
}

.vip-subtitle {
    margin: 0;
}

.vip-stock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.vip-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.vip-chip strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.vip-kpi--owed { --kpi: var(--vip-gold); }
.vip-kpi--members { --kpi: var(--accent-2); }
.vip-kpi--accounts { --kpi: var(--accent); }
.vip-kpi--replacements { --kpi: var(--vip-violet); }

.vip-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.vip-sidebar,
.vip-main {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.vip-card {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-alt);
}

.vip-card h3,
.vip-card h4 {
    margin: 0 0 0.85rem;
}

.vip-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.vip-card h3 .bi,
.vip-card h4 .bi {
    color: var(--accent);
}

.vip-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.vip-card-head .vip-card-title {
    margin: 0;
}

.vip-panel-hint {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.vip-field {
    min-width: 0;
    margin-bottom: 0.85rem;
}

.vip-field label {
    font-size: 0.88rem;
}

.vip-field-row {
    display: grid;
    gap: 0.75rem;
}

.vip-optional {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.78rem;
}

.vip-help {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.vip-money {
    position: relative;
}

.vip-money > span {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.vip-money input {
    padding-left: 1.75rem;
    font-variant-numeric: tabular-nums;
}

.vip-add button,
.vip-settings-form button {
    width: 100%;
}

.vip-settings-form button {
    width: auto;
}

/* Lista de afiliados */
.vip-members-head h3 {
    justify-content: space-between;
}

.vip-search {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.8rem;
}

.vip-member-list,
.vip-account-list,
.vip-feed,
.vip-how {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vip-member-list {
    display: grid;
    gap: 0.45rem;
    max-height: 32rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.vip-member {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.vip-member:hover {
    border-color: var(--border);
    background: var(--surface-hover);
}

.vip-member.is-active {
    border-color: var(--border-strong);
    background: var(--accent-soft);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.15);
}

.vip-avatar {
    --av: var(--accent);
    flex: none;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.75rem;
    color: var(--av);
    background: color-mix(in srgb, var(--av) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 40%, transparent);
    font-family: var(--heading-font);
    font-weight: 700;
}

.vip-avatar.is-reseller { --av: var(--vip-gold); }
.vip-avatar.is-client { --av: var(--vip-violet); }
.vip-avatar.is-user { --av: var(--accent); }

.vip-avatar--lg {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    font-size: 1.4rem;
}

.vip-member-body {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 0.2rem;
}

.vip-member-email {
    overflow: hidden;
    font-weight: 650;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-member-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.vip-role {
    --role: var(--accent);
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    color: var(--role);
    background: color-mix(in srgb, var(--role) 14%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.vip-role.is-reseller { --role: var(--vip-gold); }
.vip-role.is-client { --role: #a993ff; }

.vip-balance {
    flex: none;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.vip-balance.is-owing { color: var(--vip-gold); }
.vip-balance.is-clear { color: var(--success); opacity: 0.8; }

.vip-empty-text {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
}

/* Bienvenida + feed */
.vip-welcome {
    text-align: center;
    padding: 2rem 1.25rem;
}

.vip-welcome h3 {
    justify-content: center;
}

.vip-welcome-icon {
    display: inline-grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin-bottom: 0.9rem;
    border-radius: 1.1rem;
    color: var(--vip-gold);
    background: color-mix(in srgb, var(--vip-gold) 14%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--vip-gold) 25%, transparent);
    font-size: 1.6rem;
}

.vip-welcome > p {
    max-width: 34rem;
    margin: 0 auto 1.2rem;
}

.vip-how {
    display: grid;
    gap: 0.6rem;
    max-width: 34rem;
    margin: 0 auto;
    text-align: left;
}

.vip-how li {
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    font-size: 0.9rem;
}

.vip-how .bi {
    color: var(--accent);
}

.vip-feed {
    display: grid;
    gap: 0.4rem;
}

.vip-feed li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.88rem;
}

.vip-feed-user {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-feed-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vip-feed-date {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Ficha del afiliado */
.vip-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 197, 61, 0.12), transparent 18rem),
        radial-gradient(circle at 0% 100%, rgba(0, 240, 255, 0.08), transparent 16rem),
        var(--surface-alt);
}

.vip-hero-top {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.vip-hero-id {
    min-width: 0;
}

.vip-hero-id h3 {
    margin: 0 0 0.3rem;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.vip-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.9rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.vip-hero-note {
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.vip-debt {
    --debt: var(--vip-gold);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--debt) 40%, transparent);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--debt) 8%, transparent);
}

.vip-debt.is-clear { --debt: var(--success); }

.vip-debt p {
    margin: 0;
}

.vip-debt-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vip-debt-value {
    color: var(--debt);
    font-family: var(--heading-font);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 26px color-mix(in srgb, var(--debt) 45%, transparent);
}

.vip-debt-sub {
    color: var(--muted);
    font-size: 0.82rem;
}

.vip-settle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.vip-settle input {
    width: 13rem;
    max-width: 100%;
    padding: 0.65rem 0.8rem;
}

button.vip-settle-button {
    color: #062014;
    background: linear-gradient(120deg, var(--success), #00f0ff);
    box-shadow: 0 0 0 1px rgba(57, 255, 157, 0.35), 0 8px 24px rgba(57, 255, 157, 0.18);
}

.vip-clear-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    color: var(--success);
    background: rgba(57, 255, 157, 0.12);
    font-weight: 700;
}

.vip-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1rem 0 0;
}

.vip-stats div {
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.02);
}

.vip-stats dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.vip-stats dd {
    margin: 0.2rem 0 0;
    font-family: var(--heading-font);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Pestañas internas */
.vip-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-alt);
    scrollbar-width: thin;
}

button.vip-tab {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    border: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

button.vip-tab:hover {
    color: var(--text);
    background: var(--surface-hover);
    box-shadow: none;
    filter: none;
}

button.vip-tab.is-active {
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

.vip-tab-count {
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.74rem;
}

button.vip-tab.is-active .vip-tab-count {
    background: rgba(4, 18, 26, 0.2);
}

/* Formularios */
.vip-assign-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.vip-field--wide {
    grid-column: 1 / -1;
}

.vip-stepper {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
    gap: 0.4rem;
}

.vip-stepper button {
    padding: 0;
    font-size: 1.2rem;
}

.vip-stepper input {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vip-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-total {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.vip-total-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vip-total-value {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.vip-total-after {
    color: var(--muted);
    font-size: 0.82rem;
}

.vip-warn {
    margin: 0.8rem 0 0;
    color: var(--vip-gold);
    font-size: 0.88rem;
}

.vip-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.vip-sources legend {
    margin-bottom: 0.45rem;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 650;
}

.vip-source {
    margin: 0;
    cursor: pointer;
}

.vip-source input,
.vip-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vip-source span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    height: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.vip-source small {
    width: 100%;
    color: var(--muted);
    font-weight: 500;
}

.vip-source input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.18);
}

.vip-source input:focus-visible + span,
.vip-segment input:focus-visible + span {
    outline: 3px solid var(--accent-soft);
}

.vip-accounts-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.vip-accounts-toolbar .vip-search {
    flex: 1 1 14rem;
    width: auto;
    margin: 0;
}

.vip-check-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.88rem;
    cursor: pointer;
}

.vip-section input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    padding: 0;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

.vip-account-list {
    display: grid;
    gap: 0.4rem;
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.vip-account label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.vip-account label:hover {
    border-color: var(--border);
}

.vip-account.is-checked label {
    border-color: var(--border-strong);
    background: var(--accent-soft);
}

.vip-account input[type="checkbox"] {
    margin-top: 0.15rem;
}

.vip-account.is-missing label {
    opacity: 0.55;
    cursor: not-allowed;
}

.vip-account-body {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.vip-account-email {
    font-weight: 650;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.vip-account-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.vip-account-meta code {
    padding: 0.05rem 0.35rem;
    border-radius: 0.35rem;
    color: #baf6ff;
    background: rgba(0, 240, 255, 0.08);
    overflow-wrap: anywhere;
}

.vip-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    color: #cfc4ff;
    background: rgba(124, 92, 255, 0.16);
    overflow-wrap: anywhere;
}

.vip-order-pill {
    margin: 0 0.35rem 0.15rem 0;
    color: #ffe3a1;
    background: rgba(255, 197, 61, 0.12);
}

.vip-pill.is-warn {
    color: var(--vip-gold);
    background: rgba(255, 197, 61, 0.14);
}

.vip-subheading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.4rem 0 0.75rem !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.98rem;
}

.vip-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 0.8rem;
    color: var(--muted);
    text-align: center;
    font-size: 0.9rem;
}

.vip-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vip-subcard {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
}

.vip-subcard h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.25rem;
}

.vip-subcard > p {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
}

.vip-subcard button {
    width: 100%;
}

.vip-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.vip-segment label {
    margin: 0;
    cursor: pointer;
}

.vip-segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    font-size: 0.88rem;
    transition: border-color 160ms ease, background 160ms ease;
}

.vip-segment input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Tablas */
.vip-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.8rem;
}

.vip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.vip-table th,
.vip-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    vertical-align: top;
}

.vip-table th {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vip-table tbody tr:last-child td {
    border-bottom: 0;
}

.vip-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.vip-table .is-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vip-table td:first-child {
    white-space: nowrap;
    color: var(--muted);
}

.vip-table tr.is-settle-row td {
    background: rgba(57, 255, 157, 0.05);
}

.vip-old-email {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 59, 107, 0.6);
}

.vip-kind {
    --kind: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    color: var(--kind);
    background: color-mix(in srgb, var(--kind) 13%, transparent);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.vip-kind.is-assign { --kind: var(--vip-gold); }
.vip-kind.is-replace { --kind: #a993ff; }
.vip-kind.is-payment { --kind: var(--success); }
.vip-kind.is-adjust { --kind: var(--accent-2); }
.vip-kind.is-settle { --kind: var(--success); }

.vip-amount.is-up,
.vip-feed-amount.is-up { color: var(--vip-gold); }
.vip-amount.is-down,
.vip-feed-amount.is-down { color: var(--success); }

.vip-ledger-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.vip-ledger-qty {
    white-space: nowrap;
    font-weight: 600;
}

.vip-table .vip-pill,
.vip-table .vip-kind {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.vip-order-pill {
    margin: 0;
    font-size: 0.76rem;
}

.vip-ledger-note {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
}

.vip-ledger .vip-ledger-detail {
    min-width: 11rem;
    width: 100%;
}

.vip-table td,
.vip-table th {
    word-break: normal;
}

.vip-table td:first-child {
    font-size: 0.82rem;
}

.vip-ledger-actions {
    text-align: right;
    white-space: nowrap;
}

.vip-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.vip-danger p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}

.vip-danger form {
    margin: 0;
}

@media (max-width: 78rem) {
    .vip-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 64rem) {
    .vip-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .vip-member-list {
        max-height: 20rem;
    }
}

@media (max-width: 40rem) {
    .vip-card {
        padding: 0.95rem;
    }

    .vip-assign-grid,
    .vip-sources,
    .vip-pay-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vip-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vip-debt,
    .vip-settle {
        flex-direction: column;
        align-items: stretch;
    }

    .vip-settle input {
        width: 100%;
    }

    .vip-form-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .vip-form-foot button {
        width: 100%;
    }

    .vip-feed li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vip-feed-date {
        grid-column: 1 / -1;
    }
}

/* Copiar cuentas */
.vip-copy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

button.vip-copy-all {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    font-size: 0.88rem;
}

.vip-panel-hint code {
    padding: 0.05rem 0.35rem;
    border-radius: 0.35rem;
    color: #baf6ff;
    background: rgba(0, 240, 255, 0.08);
}

.vip-copy-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cuentas agrupadas por asignación */
.vip-groups {
    display: grid;
    gap: 0.6rem;
}

/* Cuentas: pendientes de pago / canceladas, por día */
.vip-paytabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface-alt);
}

button.vip-paytab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 0.88rem;
}

button.vip-paytab:hover {
    color: var(--text);
    background: var(--surface-hover);
    box-shadow: none;
    filter: none;
}

button.vip-paytab.is-pending.is-active {
    color: #1a1204;
    background: var(--vip-gold);
}

button.vip-paytab.is-paid.is-active {
    color: #04170d;
    background: #3ddc84;
}

button.vip-paytab.is-active .vip-tab-count {
    background: rgba(0, 0, 0, 0.18);
}

.vip-paystate {
    --paystate: var(--vip-gold);
    display: grid;
    gap: 0.6rem;
}

.vip-paystate.is-paid {
    --paystate: #3ddc84;
}

.vip-paystate + .vip-paystate {
    margin-top: 1rem;
}

.vip-paystate[hidden] {
    display: none;
}

.vip-paystate-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid var(--paystate);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--paystate) 8%, transparent);
}

.vip-paystate-head h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--paystate);
}

.vip-paystate-head p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
}

.vip-day {
    display: grid;
    gap: 0.5rem;
}

.vip-day[hidden] {
    display: none;
}

.vip-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0.4rem 0 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.86rem;
}

.vip-day-head i {
    color: var(--paystate);
}

.vip-day-count {
    color: var(--muted);
    font-family: inherit;
    font-weight: 400;
    font-size: 0.78rem;
}

.vip-group-time {
    color: var(--text);
    font-weight: 600;
}

.vip-group {
    --group: var(--vip-gold);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vip-group.is-replace {
    --group: #a993ff;
}

.vip-group:hover,
.vip-group[open] {
    border-color: color-mix(in srgb, var(--group) 40%, transparent);
}

.vip-group[open] {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.vip-group-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.vip-group-head::-webkit-details-marker {
    display: none;
}

.vip-group-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.7rem;
    color: var(--group);
    background: color-mix(in srgb, var(--group) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--group) 35%, transparent);
}

.vip-group-info {
    display: grid;
    flex: 1;
    gap: 0.2rem;
    min-width: 0;
}

.vip-group-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.95rem;
}

.vip-group-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.8rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.vip-group-note {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-style: italic;
}

.vip-group-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

button.vip-copy-all--group {
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
}

.vip-group-caret {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    transition: transform 180ms ease, color 160ms ease;
}

.vip-group[open] .vip-group-caret {
    color: var(--text);
    transform: rotate(180deg);
}

.vip-group-body {
    padding: 0 0.85rem 0.85rem;
}

.vip-group-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
}

.vip-group .vip-pager {
    margin-top: 0.7rem;
}

@container vip-panel (max-width: 34rem) {
    .vip-group-head {
        flex-wrap: wrap;
    }

    .vip-group-info {
        flex-basis: calc(100% - 3.1rem);
    }

    .vip-group-actions {
        width: 100%;
    }

    .vip-group-actions button.vip-copy-all--group {
        flex: 1;
        justify-content: center;
    }

    .vip-group-foot {
        justify-content: center;
    }
}

/* Paginación (assets/vip-affiliates.js) */
.vip-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-pager-info {
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.vip-pager-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

button.vip-pager-btn {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.55rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

button.vip-pager-btn:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.16);
    filter: none;
}

button.vip-pager-btn.is-active {
    border-color: transparent;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

button.vip-pager-btn:disabled {
    opacity: 0.35;
}

.vip-pager-dots {
    padding: 0 0.2rem;
    color: var(--muted);
}

.vip-section .vip-pager[hidden] {
    display: none !important;
}

@container vip-panel (max-width: 34rem) {
    .vip-pager {
        justify-content: center;
    }

    .vip-pager-info {
        width: 100%;
        text-align: center;
    }
}

.vip-copy-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 200ms ease;
}

.vip-copy-item:hover {
    border-color: var(--border);
    background: var(--surface-hover);
}

.vip-copy-item.is-flash {
    border-color: rgba(57, 255, 157, 0.55);
    box-shadow: 0 0 18px rgba(57, 255, 157, 0.18);
}

.vip-copy-item.is-missing {
    opacity: 0.6;
}

.vip-copy-index {
    display: grid;
    place-items: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.35rem;
    border-radius: 0.6rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vip-copy-body {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.vip-copy-email {
    font-weight: 650;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
    word-break: normal;
}

.vip-copy-sep {
    color: var(--muted);
}

.vip-copy-pswd {
    color: #baf6ff;
}

.vip-copy-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.vip-copy-meta code {
    padding: 0.05rem 0.4rem;
    border-radius: 0.35rem;
    color: #baf6ff;
    background: rgba(0, 240, 255, 0.08);
    overflow-wrap: anywhere;
}

button.vip-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.84rem;
    white-space: nowrap;
}

button.vip-copy-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.18);
    filter: none;
}

button.vip-copy-btn.is-copied,
button.vip-copy-all.is-copied {
    border-color: rgba(57, 255, 157, 0.55);
    color: #062014;
    background: linear-gradient(120deg, var(--success), #00f0ff);
    box-shadow: 0 0 18px rgba(57, 255, 157, 0.3);
}

button.vip-copy-btn--sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
}

.vip-ledger-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.vip-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(57, 255, 157, 0.45);
    border-radius: 999px;
    color: var(--text);
    background: rgba(8, 14, 24, 0.95);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(57, 255, 157, 0.2);
    font-weight: 650;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.75rem);
    transition: opacity 180ms ease, transform 180ms ease;
}

.vip-toast .bi {
    color: var(--success);
}

.vip-toast.is-error {
    border-color: rgba(255, 59, 107, 0.5);
}

.vip-toast.is-error .bi {
    color: var(--danger);
}

.vip-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@container vip-panel (max-width: 34rem) {
    .vip-copy-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .vip-copy-item button.vip-copy-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .vip-copy-email {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .vip-copy-actions {
        width: 100%;
    }

    .vip-copy-actions button.vip-copy-all {
        flex: 1;
        justify-content: center;
    }
}

/* Origen fijo de los reemplazos */
.vip-source-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.8rem;
    background: var(--accent-soft);
    font-size: 0.9rem;
}

.vip-source-note .bi {
    color: var(--accent);
}

.vip-chip-count {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(4, 6, 14, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
}

.vip-subheading--actions {
    justify-content: space-between;
    flex-wrap: wrap;
}

.vip-subheading--actions h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.98rem;
}

/* Reemplazo manual */
.vip-manual-rows {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.vip-manual-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.6rem;
    padding: 0.75rem 0.8rem 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
}

.vip-manual-row .vip-field {
    margin-bottom: 0.7rem;
}

.vip-manual-arrow {
    padding-top: 2.1rem;
    color: var(--accent);
}

.vip-manual-remove {
    margin-top: 1.85rem;
}

.vip-manual-pswd {
    min-height: 1rem;
    overflow-wrap: anywhere;
}

.vip-manual-pswd.is-warn {
    color: var(--vip-gold);
}

.vip-manual-add {
    margin-bottom: 1rem;
}

.vip-avail {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.02);
}

.vip-avail > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    font-weight: 650;
    font-size: 0.9rem;
    cursor: pointer;
    list-style: none;
}

.vip-avail > summary::-webkit-details-marker {
    display: none;
}

.vip-avail > summary::after {
    content: "\F282";
    margin-left: auto;
    font-family: "bootstrap-icons";
    transition: transform 160ms ease;
}

.vip-avail[open] > summary::after {
    transform: rotate(180deg);
}

.vip-avail-source {
    padding: 0 0.9rem 0.9rem;
}

.vip-avail-source[data-vip-avail-hidden] {
    display: none;
}

.vip-avail-title {
    margin: 0 0 0.6rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.vip-avail-list {
    display: grid;
    gap: 0.35rem;
    max-height: 18rem;
    margin: 0;
    padding: 0 0.15rem 0 0;
    overflow-y: auto;
    list-style: none;
}

.vip-avail-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.65rem;
    font-size: 0.85rem;
}

.vip-avail-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-avail-list code {
    padding: 0.05rem 0.35rem;
    border-radius: 0.35rem;
    color: #baf6ff;
    background: rgba(0, 240, 255, 0.08);
    font-size: 0.78rem;
}

@container vip-panel (max-width: 40rem) {
    .vip-manual-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vip-manual-row .vip-field {
        grid-column: 1;
    }

    .vip-manual-arrow {
        display: none;
    }

    .vip-manual-remove {
        grid-column: 2;
        grid-row: 1;
    }

    .vip-avail-list li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vip-avail-list code {
        grid-column: 1;
        justify-self: start;
    }

    .vip-avail-list li button {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* La tabla pasa a tarjetas según el ancho de su sección (no solo en el
   celular): con el menú lateral abierto la sección queda angosta aunque la
   pantalla sea grande. */
.vip-panel {
    container: vip-panel / inline-size;
}

@container vip-panel (max-width: 46rem) {
    .vip-table-wrap {
        overflow: visible;
        border: 0;
    }

    .vip-table thead {
        display: none;
    }

    .vip-table,
    .vip-table tbody,
    .vip-table tr,
    .vip-table td {
        display: block;
        width: 100%;
    }

    .vip-table tr {
        margin-bottom: 0.65rem;
        padding: 0.45rem 0.25rem;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.02);
    }

    .vip-table tbody tr:hover td {
        background: transparent;
    }

    .vip-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.4rem 0.7rem;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    .vip-table td::before {
        content: attr(data-label);
        flex: none;
        padding-top: 0.1rem;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: left;
    }

    .vip-table td[data-label=""]::before {
        content: none;
    }

    .vip-table td.vip-ledger-actions {
        justify-content: flex-end;
    }

    .vip-table td.vip-ledger-actions:not(:has(a)) {
        display: none;
    }

    .vip-ledger .vip-ledger-detail {
        min-width: 0;
    }

    .vip-ledger-lines {
        align-items: flex-end;
        min-width: 0;
        text-align: right;
    }

    .vip-table .is-num,
    .vip-table td:first-child {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   Avatares y menú de cuenta (barra superior). El avatar es la foto de la
   cuenta o el "incógnito" en SVG (App\Avatar). El tamaño sale de
   --avatar-size, que fijan los modificadores avatar--sm/md/lg/xl.
   --------------------------------------------------------------------------- */

.avatar {
    --avatar-size: 2.5rem;
    position: relative;
    display: inline-flex;
    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-alt);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.35), 0 0 14px rgba(0, 240, 255, 0.22);
    isolation: isolate;
}

.avatar--sm {
    --avatar-size: 2.1rem;
}

.avatar--md {
    --avatar-size: 2.75rem;
}

.avatar--lg {
    --avatar-size: 4.5rem;
}

.avatar--xl {
    --avatar-size: clamp(6.5rem, 24vw, 8.75rem);
}

.avatar-img,
.avatar-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar--pop {
    animation: avatar-pop 560ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes avatar-pop {
    0% {
        opacity: 0.25;
        transform: scale(0.6) rotate(-8deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.account-menu {
    position: relative;
    flex: none;
    min-width: 0;
}

.account-menu > summary {
    list-style: none;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 16rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.account-chip:hover,
.account-menu[open] > .account-chip {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
}

.account-chip:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 3px;
}

.account-chip-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-chip-caret {
    color: var(--muted);
    font-size: 0.75rem;
    transition: transform 200ms ease;
}

.account-menu[open] .account-chip-caret {
    transform: rotate(180deg);
}

.account-menu-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 60;
    width: min(18.5rem, calc(100vw - 2rem));
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    padding: 0.5rem;
    background: rgba(10, 13, 24, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 240, 255, 0.12);
    transform-origin: top right;
    animation: account-menu-in 180ms ease-out;
}

@keyframes account-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.account-menu-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0.6rem 0.85rem;
}

.account-menu-who {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.account-menu-who strong,
.account-menu-who span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-who span {
    color: var(--muted);
    font-size: 0.8rem;
}

.account-menu-panel form {
    margin: 0;
}

.account-menu .account-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    border: 0;
    border-radius: 0.65rem;
    padding: 0.7rem 0.75rem;
    color: var(--text);
    background: transparent;
    box-shadow: none;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-menu .account-menu-item:hover,
.account-menu .account-menu-item:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: none;
    filter: none;
    outline: none;
}

.account-menu .account-menu-item--danger:hover,
.account-menu .account-menu-item--danger:focus-visible {
    color: #ff8fab;
    background: rgba(255, 59, 107, 0.12);
}

.account-menu-item i {
    width: 1.2rem;
    font-size: 1.05rem;
    text-align: center;
}

@media (max-width: 40rem) {
    .account-chip {
        gap: 0;
        padding: 0.2rem;
    }

    .account-chip-name,
    .account-chip-caret {
        display: none;
    }
}

.admin-user-handle {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .avatar--pop,
    .account-menu-panel {
        animation: none;
    }
}

/* El logo de la barra superior lleva al panel (panelHomeUrl). */
a.brand {
    min-width: 0;
    border-radius: 0.8rem;
    color: inherit;
    text-decoration: none;
    transition: filter 160ms ease, opacity 160ms ease;
}

a.brand:hover {
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(0, 240, 255, 0.35));
}

a.brand:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 4px;
}

/* Vendedores (admin): mismo espacio entre el enlace de referido, el campo
   del código nuevo y el botón "Cambiar link". */
.reseller-referral + .reseller-controls-actions {
    margin-top: 0.75rem;
}

.reseller-referral + .reseller-controls-actions .reseller-link-form {
    gap: 0.75rem;
}

/* Aviso al entrar a Reemplazos: elegir el motivo correcto
   (_replacement_warning.php). Borde con brillo que gira, emblema con ondas
   y la advertencia resaltada. */
@property --rw-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.rw-modal {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    overflow: visible;
    color: var(--text);
    background: transparent;
}

.rw-modal::backdrop {
    background:
        radial-gradient(60% 50% at 50% 40%, rgba(255, 140, 60, 0.12), transparent 70%),
        rgba(2, 4, 10, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rw-modal[open] {
    animation: rw-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.rw-modal[open]::backdrop {
    animation: rn-fade 260ms ease both;
}

@keyframes rw-in {
    from { opacity: 0; transform: translateY(18px) scale(0.94); }
    to { opacity: 1; transform: none; }
}

/* Marco de 1.5px con un brillo ámbar/rosa que recorre el borde. */
.rw-frame {
    position: relative;
    padding: 1.5px;
    border-radius: 1.4rem;
    background: conic-gradient(from var(--rw-angle), rgba(255, 179, 71, 0.15), #ffb347 12%, #ff4f8b 22%, rgba(255, 79, 139, 0.15) 34%, rgba(0, 240, 255, 0.25) 60%, rgba(255, 179, 71, 0.15));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.65), 0 0 60px rgba(255, 140, 60, 0.16);
    animation: rw-spin 6s linear infinite;
}

@keyframes rw-spin {
    to { --rw-angle: 360deg; }
}

.rw-card {
    position: relative;
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 2rem - 3px);
    padding: 2.1rem 1.6rem 1.5rem;
    overflow-y: auto;
    border-radius: calc(1.4rem - 1.5px);
    text-align: center;
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(255, 140, 60, 0.16), transparent 70%),
        radial-gradient(80% 60% at 100% 100%, rgba(255, 46, 196, 0.08), transparent 60%),
        #0b0f1c;
}

.rw-card p {
    margin: 0;
}

.rw-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface-alt);
    box-shadow: none;
    font-size: 0.8rem;
}

.rw-close:hover {
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: none;
    filter: none;
}

/* Emblema con dos ondas que se expanden. */
.rw-hero {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 0.15rem;
}

.rw-emblem {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1.35rem;
    color: #1a0b02;
    background: linear-gradient(145deg, #ffd27a, #ff9b3d 45%, #ff4f8b);
    box-shadow: 0 12px 30px rgba(255, 120, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    font-size: 2rem;
    transform: rotate(-6deg);
    animation: rw-float 3.2s ease-in-out infinite;
}

@keyframes rw-float {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-4px); }
}

.rw-ring {
    position: absolute;
    inset: 0.55rem;
    border: 2px solid rgba(255, 155, 61, 0.55);
    border-radius: 1.6rem;
    animation: rw-ripple 2.4s ease-out infinite;
}

.rw-ring.is-delayed {
    animation-delay: 1.2s;
}

@keyframes rw-ripple {
    from { opacity: 0.85; transform: scale(0.85); }
    to { opacity: 0; transform: scale(1.55); }
}

.rw-eyebrow {
    color: #ffb85c;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rw-card h2 {
    margin: -0.45rem 0 0;
    font-size: clamp(1.45rem, 5vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.rw-card h2 span {
    background: linear-gradient(100deg, #ffd27a, #ff9b3d 45%, #ff4f8b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rw-lead {
    color: #c9d6ee;
    font-size: 0.97rem;
    line-height: 1.55;
}

.rw-alert {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255, 79, 139, 0.45);
    border-radius: 1rem;
    text-align: left;
    background: linear-gradient(120deg, rgba(255, 59, 107, 0.16), rgba(255, 155, 61, 0.08));
    box-shadow: 0 0 26px rgba(255, 59, 107, 0.14), inset 0 0 20px rgba(255, 59, 107, 0.05);
}

.rw-alert-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    color: #fff;
    background: linear-gradient(145deg, #ff6b8f, #ff3b6b);
    box-shadow: 0 6px 18px rgba(255, 59, 107, 0.4);
    font-size: 1.1rem;
}

.rw-alert p {
    color: #ffd4de;
    font-size: 0.93rem;
    line-height: 1.5;
}

.rw-alert strong {
    color: #fff;
}

.rw-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}

.rw-tip i {
    flex: none;
    margin-top: 0.15rem;
    color: #ffc94d;
}

.rw-actions {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.3rem;
}

.rw-primary {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    color: #1a0b02;
    background: linear-gradient(110deg, #ffd27a, #ff9b3d 50%, #ff6b8f);
    box-shadow: 0 10px 28px rgba(255, 130, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    font-weight: 800;
}

.rw-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(255, 130, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.rw-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.rw-dismiss:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-alt);
    box-shadow: none;
    filter: none;
}

@media (max-width: 40rem) {
    .rw-card {
        padding: 1.85rem 1.15rem 1.2rem;
    }

    .rw-eyebrow {
        font-size: 0.64rem !important;
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-modal[open],
    .rw-frame,
    .rw-emblem,
    .rw-ring {
        animation: none;
    }

    .rw-ring {
        display: none;
    }
}

/* Lector de correos: «Obtener código de verificación de SHEIN» y «Abrir
   bandeja de correos completa» (_search_actions.php). */
.search-actions--code {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.search-actions--code button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 3.25rem;
    padding: 0.7rem 1rem;
    border-radius: 0.9rem;
    font-size: 1rem;
    line-height: 1.25;
    text-align: left;
}

.search-btn-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    font-size: 1.05rem;
}

.search-code-btn {
    font-weight: 800;
}

.search-code-btn .search-btn-icon {
    color: var(--accent);
    background: rgba(4, 18, 26, 0.85);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.35);
}

.search-inbox-btn .search-btn-icon {
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--border);
}

.search-actions--code button.is-loading .search-btn-icon {
    opacity: 0;
}

@media (min-width: 48rem) {
    .search-actions--code {
        grid-template-columns: 1.25fr 1fr;
    }
}

/* Ventana de espera antes de buscar el código (_code_wait.php). */
.code-wait {
    width: min(26rem, calc(100vw - 2rem));
    margin: auto;
    padding: 0;
    border: 0;
    overflow: visible;
    color: var(--text);
    background: transparent;
}

.code-wait::backdrop {
    background: rgba(2, 4, 10, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.code-wait[open] {
    animation: rw-in 360ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.code-wait-card {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 2rem 1.5rem 1.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 1.3rem;
    text-align: center;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(0, 240, 255, 0.16), transparent 70%),
        radial-gradient(80% 60% at 100% 100%, rgba(255, 46, 196, 0.1), transparent 60%),
        #0b0f1c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 240, 255, 0.14);
}

.code-wait-card h2 {
    margin: 0.2rem 0 0;
    font-size: 1.3rem;
    line-height: 1.25;
}

.code-wait-text {
    margin: 0;
    color: #c9d6ee;
    font-size: 0.92rem;
    line-height: 1.5;
}

.code-wait-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
}

.code-wait-orbit {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: rgba(0, 240, 255, 0.35);
    border-radius: 50%;
    animation: button-spin 1.1s linear infinite;
}

.code-wait-orbit.is-inner {
    inset: 0.7rem;
    border-top-color: var(--accent-2);
    border-right-color: rgba(255, 46, 196, 0.3);
    animation-duration: 1.6s;
    animation-direction: reverse;
}

.code-wait-icon {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    color: #04121a;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 26px rgba(0, 240, 255, 0.45);
    font-size: 1.45rem;
    animation: code-pulse 1.6s ease-in-out infinite;
}

@keyframes code-pulse {
    50% { transform: scale(1.08); box-shadow: 0 0 36px rgba(0, 240, 255, 0.6); }
}

.code-wait-steps {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.code-wait-steps li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--muted);
    background: rgba(4, 6, 14, 0.5);
    font-size: 0.88rem;
    opacity: 0.55;
    transition: opacity 240ms ease, color 240ms ease, border-color 240ms ease, background 240ms ease;
}

.code-wait-steps li.is-active {
    color: var(--text);
    border-color: rgba(0, 240, 255, 0.5);
    background: rgba(0, 240, 255, 0.08);
    opacity: 1;
}

.code-wait-steps li.is-active i {
    color: var(--accent);
}

.code-wait-steps li.is-done {
    color: #7dffbc;
    opacity: 0.9;
}

.code-wait-steps li.is-done i::before {
    content: "\F26A"; /* bi-check-circle-fill */
}

.code-wait-bar {
    width: 100%;
    height: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.code-wait-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
}

/* Resultado: el código en grande (_code_result.php). */
.code-result {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.code-result-for {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    word-break: break-all;
}

.code-result-for i {
    color: var(--accent);
}

.code-card {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 1.6rem 1.25rem 1.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 1.2rem;
    text-align: center;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(0, 240, 255, 0.13), transparent 70%),
        var(--surface);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), 0 0 34px rgba(0, 240, 255, 0.1);
    animation: rw-in 380ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.code-card p {
    margin: 0;
}

.code-card h2 {
    margin: 0;
    font-size: 1.2rem;
}

.code-card.is-empty p {
    max-width: 32rem;
    color: #c9d6ee;
    line-height: 1.55;
}

.code-card-icon {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    color: #ffc978;
    background: rgba(255, 179, 71, 0.12);
    border: 1px solid rgba(255, 179, 71, 0.4);
    font-size: 1.5rem;
}

.code-card-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.code-digits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.3rem, 1.6vw, 0.55rem);
    padding: 0;
    border: 0;
    color: var(--text);
    background: none;
    box-shadow: none;
    cursor: copy;
}

.code-digits:hover {
    filter: none;
    box-shadow: none;
}

.code-digits span {
    display: grid;
    place-items: center;
    width: clamp(2.6rem, 11vw, 3.4rem);
    height: clamp(3.3rem, 14vw, 4.2rem);
    border: 1px solid rgba(0, 240, 255, 0.45);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), rgba(4, 6, 14, 0.7));
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    font-weight: 800;
    animation: code-digit-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.code-digits span:nth-child(2) { animation-delay: 60ms; }
.code-digits span:nth-child(3) { animation-delay: 120ms; }
.code-digits span:nth-child(4) { animation-delay: 180ms; }
.code-digits span:nth-child(5) { animation-delay: 240ms; }
.code-digits span:nth-child(6) { animation-delay: 300ms; }
.code-digits span:nth-child(7) { animation-delay: 360ms; }
.code-digits span:nth-child(8) { animation-delay: 420ms; }

@keyframes code-digit-in {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to { opacity: 1; transform: none; }
}

.code-card.is-copied .code-digits span {
    border-color: rgba(57, 255, 157, 0.7);
    box-shadow: 0 0 22px rgba(57, 255, 157, 0.25);
}

.code-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 12rem;
    justify-content: center;
    font-size: 1rem;
}

.code-card.is-copied .code-copy {
    color: #04121a;
    background: linear-gradient(120deg, #39ff9d, #2ef6ff);
}

.code-card.is-copied .code-copy i::before {
    content: "\F633"; /* bi-check-lg */
}

.code-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.code-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 30rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(57, 255, 157, 0.35);
    border-radius: 0.75rem;
    color: #b6ffd9;
    background: rgba(57, 255, 157, 0.07);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: left;
}

.code-note.is-warn {
    border-color: rgba(255, 179, 71, 0.4);
    color: #ffd9a0;
    background: rgba(255, 179, 71, 0.08);
}

.code-note i {
    margin-top: 0.1rem;
}

.code-card.is-expired .code-digits span {
    opacity: 0.6;
}

.code-open {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.code-open:hover {
    text-decoration: underline;
}

.code-copy-field {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .code-wait[open],
    .code-wait-orbit,
    .code-wait-icon,
    .code-card,
    .code-digits span {
        animation: none;
    }
}

/* Ventana de código: tres estados (data-code-state en _code_wait.php). */
.code-wait-pane {
    display: none;
    position: relative;
    width: 100%;
    justify-items: center;
    gap: 0.85rem;
}

.code-wait[data-code-state="searching"] .code-wait-pane.is-searching,
.code-wait[data-code-state="found"] .code-wait-pane.is-found,
.code-wait[data-code-state="missing"] .code-wait-pane.is-missing {
    display: grid;
    animation: code-pane-in 320ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

/* Solo movimiento: si la animación no corre, el contenido igual se ve. */
@keyframes code-pane-in {
    from { transform: translateY(8px) scale(0.98); }
}

.code-wait-pane h2 {
    margin: 0.2rem 0 0;
    font-size: 1.3rem;
    line-height: 1.25;
}

.code-wait-timer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.2rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.code-wait-timer span {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.code-wait-close {
    position: absolute;
    top: -1rem;
    right: -0.5rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface-alt);
    box-shadow: none;
    font-size: 0.8rem;
}

.code-wait-close:hover {
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: none;
    filter: none;
}

.code-found-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(57, 255, 157, 0.45);
    border-radius: 999px;
    color: #7dffbc;
    background: rgba(57, 255, 157, 0.1);
    box-shadow: 0 0 20px rgba(57, 255, 157, 0.16);
    font-size: 0.85rem;
    font-weight: 800;
}

.code-found-title {
    margin: 0;
    color: #c9d6ee;
    font-size: 0.95rem;
}

.code-wait-pane.is-found .code-digits {
    flex-wrap: nowrap;
    gap: clamp(0.25rem, 1.4vw, 0.45rem);
    margin: 0.3rem 0 0.2rem;
}

/* En la ventana caben hasta 8 dígitos en una sola fila. */
.code-wait-pane.is-found .code-digits span {
    width: clamp(2.2rem, 10vw, 2.9rem);
    height: clamp(2.9rem, 13vw, 3.7rem);
    font-size: clamp(1.4rem, 6vw, 1.9rem);
}

.code-wait-pane.is-copied .code-digits span {
    border-color: rgba(57, 255, 157, 0.7);
    box-shadow: 0 0 22px rgba(57, 255, 157, 0.25);
}

.code-wait-pane.is-copied .code-copy {
    color: #04121a;
    background: linear-gradient(120deg, #39ff9d, #2ef6ff);
}

.code-wait-pane.is-copied .code-copy i::before {
    content: "\F633"; /* bi-check-lg */
}

.code-wait-pane .code-meta {
    margin: 0;
}

.code-wait-actions {
    display: grid;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.2rem;
}

.code-wait-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .code-wait-pane {
        animation: none !important;
    }
}

/* Comisión Yerimar: recaudado en Zelle − comisión = lo que debe enviar
   (_admin_yerimar.php). */
.yer-equation {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0.6rem;
}

.yer-eq-item {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
}

.yer-eq-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.yer-eq-label img {
    flex: none;
    border-radius: 0.3rem;
}

.yer-eq-item strong {
    font-family: var(--heading-font);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.yer-eq-item.is-commission strong {
    color: #e6d6ff;
}

.yer-eq-item.is-net {
    border-color: rgba(57, 255, 157, 0.45);
    background: linear-gradient(120deg, rgba(57, 255, 157, 0.12), rgba(0, 240, 255, 0.05));
    box-shadow: 0 0 22px rgba(57, 255, 157, 0.12);
}

.yer-eq-item.is-net .yer-eq-label,
.yer-eq-item.is-net strong {
    color: #7dffbc;
}

.yer-eq-op {
    display: grid;
    place-items: center;
    color: #a259ff;
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 700;
}

.yer-stat-icon.is-sales {
    color: var(--accent);
    background: var(--accent-soft);
}

.yer-order-split {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 0.25rem;
}

.yer-order-net {
    font-family: var(--heading-font);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.yer-order-split .yer-order-amount {
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
}

.yer-modal-breakdown {
    display: grid;
    gap: 0.45rem;
    margin: 1.1rem 0 1.2rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.28);
    text-align: left;
}

.yer-modal-breakdown div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.yer-modal-breakdown dt {
    color: var(--muted);
    font-size: 0.86rem;
}

.yer-modal-breakdown dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.yer-modal-breakdown .is-net {
    margin-top: 0.2rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(162, 89, 255, 0.3);
}

.yer-modal-breakdown .is-net dt {
    color: #7dffbc;
    font-weight: 700;
}

.yer-modal-breakdown .is-net dd {
    color: #7dffbc;
    font-family: var(--heading-font);
    font-size: 1.6rem;
}

@media (max-width: 48rem) {
    .yer-equation {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .yer-eq-op {
        font-size: 1.2rem;
        line-height: 1;
    }
}

.yer-eq-item.is-adjust strong {
    color: #ffd27a;
}

/* Ajustes manuales a lo que Yerimar debe enviar. */
.yer-adjust-form {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr auto;
    align-items: end;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
}

.yer-adjust-form label {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.yer-adjust-form label > span:first-child {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.yer-adjust-money {
    position: relative;
    display: block;
}

.yer-adjust-money > span {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    color: var(--muted);
    font-weight: 700;
    transform: translateY(-50%);
    pointer-events: none;
}

.yer-adjust-money input {
    width: 100%;
    padding-left: 1.6rem;
    font-variant-numeric: tabular-nums;
}

.yer-adjust-note input {
    width: 100%;
}

/* Venta por fuera: monto, método, cuentas, nota y botón. */
.yer-sale-form {
    grid-template-columns: minmax(8rem, 10rem) minmax(7rem, 8rem) minmax(5rem, 6rem) 1fr auto;
}

.yer-sale-form select,
.yer-sale-form input[name="quantity"] {
    width: 100%;
}

.yer-sale-preview {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.yer-adjust-actions {
    display: flex;
    gap: 0.5rem;
}

.yer-adjust-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 6.5rem;
}

button.yer-adjust-add {
    color: #04170e;
    background: linear-gradient(120deg, #39ff9d, #8affc6);
    box-shadow: 0 0 0 1px rgba(57, 255, 157, 0.45), 0 8px 22px rgba(57, 255, 157, 0.2);
}

button.yer-adjust-sub {
    color: #fff;
    background: linear-gradient(120deg, #ff3b6b, #ff6b8f);
    box-shadow: 0 0 0 1px rgba(255, 59, 107, 0.45), 0 8px 22px rgba(255, 59, 107, 0.2);
}

.yer-adjustments {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yer-adjustment {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.6rem 0.75rem 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface);
}

.yer-adjustment form {
    margin: 0;
}

.yer-adjustment-sign {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: 0.9rem;
}

.yer-adjustment.is-add .yer-adjustment-sign {
    color: #04170e;
    background: linear-gradient(120deg, #39ff9d, #8affc6);
}

.yer-adjustment.is-sub .yer-adjustment-sign {
    color: #fff;
    background: linear-gradient(120deg, #ff3b6b, #ff6b8f);
}

.yer-adjustment-amount {
    flex: none;
    font-family: var(--heading-font);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.yer-adjustment.is-add .yer-adjustment-amount {
    color: #7dffbc;
}

.yer-adjustment.is-sub .yer-adjustment-amount {
    color: #ff90ab;
}

button.yer-adjustment-delete {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    color: var(--muted);
}

button.yer-adjustment-delete:hover {
    color: #ff90ab;
    border-color: rgba(255, 59, 107, 0.5);
}

/* Pantallas medianas: las cuatro cifras en 2×2, sin los signos. */
@media (max-width: 60rem) and (min-width: 48.01rem) {
    .yer-equation {
        grid-template-columns: 1fr 1fr;
    }

    .yer-equation .yer-eq-op {
        display: none;
    }
}

@media (max-width: 48rem) {
    .yer-adjust-form {
        grid-template-columns: 1fr;
    }

    .yer-adjust-actions button {
        flex: 1;
    }
}

.yer-payout-total {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 0.1rem;
}

.yer-payout-kind {
    color: var(--muted);
    font-size: 0.72rem;
    text-align: right;
}

/* Ventana de código: cancelar mientras busca y consejo al no llegar. */
.code-wait-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.15rem;
}

.code-wait-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 201, 77, 0.4);
    border-radius: 0.75rem;
    color: #ffe3a3;
    background: rgba(255, 201, 77, 0.08);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: left;
}

.code-wait-tip i {
    flex: none;
    margin-top: 0.15rem;
    color: #ffc94d;
}

.code-wait-tip strong {
    color: #fff;
}

.code-wait-tip[hidden] {
    display: none;
}

/* Zinli: reusa la tarjeta y los campos de Zelle con sus colores. */
.shop-order-method.is-zinli {
    box-shadow: inset 0 0 0 1px rgba(255, 79, 163, 0.45);
}

.pay-method.is-zinli:has(input:checked) {
    border-color: rgba(255, 79, 163, 0.7);
    background:
        radial-gradient(circle at 0% 0%, rgba(139, 44, 245, 0.22), transparent 65%),
        rgba(4, 6, 14, 0.6);
    box-shadow: 0 0 0 1px rgba(255, 79, 163, 0.4), 0 0 24px rgba(139, 44, 245, 0.22);
}

.pay-badge.is-manual.is-zinli {
    color: #ffd0e8;
    background: rgba(255, 79, 163, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 79, 163, 0.4);
}

.pay-method-min.is-zinli {
    color: #ff9fcf;
}

.pay-panel.is-zinli {
    border: 1px solid rgba(255, 79, 163, 0.32);
    background:
        radial-gradient(circle at 100% 0%, rgba(139, 44, 245, 0.14), transparent 60%),
        var(--surface-alt);
}

.pay-panel.is-zinli .pay-manual-steps > li::before {
    color: #fff;
    background: linear-gradient(120deg, #4a1fd6, #8b2cf5 55%, #ff4fa3);
}

.pay-panel.is-zinli .pay-manual-steps > li:not(:last-child)::after {
    background: rgba(255, 79, 163, 0.26);
}

.pay-panel.is-zinli .file-drop:hover,
.pay-panel.is-zinli .file-drop:focus-within {
    border-color: #ff4fa3;
}

.zinli-card {
    border-color: rgba(255, 79, 163, 0.38);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 79, 163, 0.24), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(74, 31, 214, 0.32), transparent 60%),
        rgba(12, 6, 28, 0.88);
    box-shadow: 0 10px 30px -12px rgba(139, 44, 245, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.zinli-card .zelle-card-head img {
    box-shadow: 0 0 18px rgba(255, 79, 163, 0.45);
}

.zinli-card .zelle-card-brand span,
.zinli-card .zelle-row dt,
.zinli-card .zelle-breakdown dt {
    color: #d2b4ea;
}

.zinli-card .zelle-card-amount {
    background: linear-gradient(120deg, #4a1fd6, #8b2cf5 55%, #ff4fa3);
    box-shadow: 0 0 16px rgba(255, 79, 163, 0.4);
}

.zinli-card .zelle-row {
    box-shadow: inset 0 0 0 1px rgba(255, 79, 163, 0.2);
}

.zelle-row.is-email dd {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: clamp(0.92rem, 3.8vw, 1.12rem);
    font-weight: 700;
    color: #ffe8f4;
    text-shadow: 0 0 16px rgba(255, 79, 163, 0.4);
}

.zinli-card .zelle-copy {
    background: rgba(255, 79, 163, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 79, 163, 0.5);
}

.zinli-card .zelle-copy:hover {
    background: rgba(255, 79, 163, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 79, 163, 0.8), 0 0 14px rgba(255, 79, 163, 0.35);
}

.zinli-card .zelle-copy.is-copied {
    color: #04121a;
    background: linear-gradient(120deg, var(--success), #8affc6);
    box-shadow: none;
}

.zinli-card .zelle-breakdown {
    border-top-color: rgba(255, 79, 163, 0.35);
}

.zinli-fee-why {
    margin-left: 0.25rem;
    color: #a98bbf;
    font-size: 0.74rem;
}

.pay-panel.is-zinli .zelle-field-label {
    color: #d2b4ea;
}

.pay-panel.is-zinli .zelle-field-control i {
    color: #e48ac0;
}

.pay-panel.is-zinli .zelle-field-control input {
    border-color: rgba(255, 79, 163, 0.3);
}

.pay-panel.is-zinli .zelle-field-control input[name="zinli_reference"] {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pay-panel.is-zinli .zelle-field-control input[name="zinli_reference"]::placeholder {
    text-transform: none;
    letter-spacing: 0;
}

.pay-panel.is-zinli .zelle-field-control input:focus {
    border-color: #ff4fa3;
    outline: 3px solid rgba(255, 79, 163, 0.22);
    box-shadow: 0 0 18px rgba(255, 79, 163, 0.3);
}

.usdt-min-alert.is-zinli {
    color: #ffe0f0;
    background: rgba(255, 79, 163, 0.09);
    box-shadow: inset 0 0 0 1px rgba(255, 79, 163, 0.42);
}

.usdt-min-alert.is-zinli > i {
    color: #ff4fa3;
}

.usdt-min-alert.is-zinli strong {
    color: #fff1f8;
}

/* ============================================================
   Suspensión de cuentas (src/UserSuspension.php)
   ============================================================ */

/* Menú: opciones bloqueadas en gris con candado */
.sidebar-link.is-locked {
    color: rgba(139, 155, 192, 0.45);
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 0 6px, transparent 6px 12px);
    border-color: rgba(255, 255, 255, 0.04);
    cursor: not-allowed;
    user-select: none;
    filter: grayscale(1);
}

.sidebar-link.is-locked:hover {
    color: rgba(139, 155, 192, 0.55);
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px);
    border-color: rgba(255, 255, 255, 0.06);
}

.sidebar-link.is-locked .sidebar-icon,
.sidebar-link.is-locked:hover .sidebar-icon {
    color: inherit;
    transform: none;
    opacity: 0.6;
}

.sidebar-lock {
    margin-left: auto;
    font-size: 0.78rem;
    opacity: 0.8;
}

@media (max-width: 52rem) {
    .sidebar-lock {
        position: absolute;
        top: 0.35rem;
        right: 0.45rem;
        margin: 0;
        font-size: 0.7rem;
    }
}

/* Aviso al usuario / vendedor */
.suspension-banner {
    --sus: #ffb547;
    --sus-2: #ff3b6b;
    position: relative;
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.35rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sus) 45%, transparent);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sus) 12%, transparent), color-mix(in srgb, var(--sus-2) 10%, transparent)),
        var(--surface);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), 0 0 32px color-mix(in srgb, var(--sus) 14%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.suspension-banner.is-permanent {
    --sus: #ff3b6b;
    --sus-2: #b51b4a;
}

.suspension-banner-glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sus) 22%, transparent), transparent 70%);
    pointer-events: none;
    animation: suspension-glow 6s ease-in-out infinite;
}

@keyframes suspension-glow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(-1.5rem, 1rem) scale(1.1); opacity: 1; }
}

.suspension-banner > *:not(.suspension-banner-glow) {
    position: relative;
}

.suspension-banner-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.suspension-banner-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    color: #1a0d02;
    background: linear-gradient(135deg, var(--sus), var(--sus-2));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--sus) 40%, transparent);
    font-size: 1.35rem;
}

.suspension-banner.is-permanent .suspension-banner-icon {
    color: #fff;
}

.suspension-banner-text {
    min-width: 0;
}

.suspension-banner-eyebrow {
    margin: 0;
    color: var(--sus);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.suspension-banner h2 {
    margin: 0.15rem 0 0.25rem;
    font-family: var(--heading-font);
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    line-height: 1.2;
}

.suspension-banner-until {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.suspension-banner-until strong {
    color: var(--text);
}

.suspension-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 26rem;
}

.suspension-countdown-cell {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.6rem 0.3rem;
    border: 1px solid color-mix(in srgb, var(--sus) 25%, transparent);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.28);
}

.suspension-countdown-value {
    font-family: var(--heading-font);
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text);
}

.suspension-countdown-label {
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.suspension-banner.is-ended .suspension-countdown-value {
    color: var(--success);
}

.suspension-banner-reason {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-left: 3px solid var(--sus);
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.suspension-banner-reason i {
    color: var(--sus);
}

.suspension-banner-open {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.suspension-banner-open-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.suspension-banner-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.suspension-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(57, 255, 157, 0.35);
    border-radius: 999px;
    color: #7dffbc;
    background: rgba(57, 255, 157, 0.08);
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

.suspension-chip:hover {
    background: rgba(57, 255, 157, 0.16);
    transform: translateY(-1px);
}

@media (max-width: 40rem) {
    .suspension-banner {
        padding: 1rem;
    }

    .suspension-banner-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }

    .suspension-countdown {
        gap: 0.4rem;
        max-width: none;
    }

    .suspension-banner-open {
        flex-direction: column;
        align-items: stretch;
    }

    .suspension-chip {
        flex: 1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .suspension-banner-glow {
        animation: none;
    }
}

/* Admin: etiqueta y caja de suspensión en las tarjetas */
.status-suspended {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #ffc27a;
    border-color: rgba(255, 159, 67, 0.45);
    background: rgba(255, 159, 67, 0.1);
    box-shadow: 0 0 12px rgba(255, 159, 67, 0.15);
}

.admin-card.is-flash-target {
    animation: suspend-flash 1.6s ease;
}

@keyframes suspend-flash {
    0%, 40% { box-shadow: 0 0 0 2px rgba(255, 159, 67, 0.7), 0 0 30px rgba(255, 159, 67, 0.3); }
    100% { box-shadow: none; }
}

.suspend-box {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.suspend-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 159, 67, 0.45);
    border-radius: 0.8rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 159, 67, 0.18), transparent 65%),
        var(--surface-alt);
    box-shadow: 0 0 22px rgba(255, 120, 60, 0.12);
}

.suspend-status-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    color: #1a0d02;
    background: linear-gradient(135deg, #ffb547, #ff6b3d);
    font-size: 1.1rem;
}

.suspend-status-text {
    display: grid;
    flex: 1 1 12rem;
    gap: 0.15rem;
    min-width: 0;
    font-size: 0.9rem;
}

.suspend-status-text strong {
    color: #ffd29b;
}

.suspend-status-left {
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.suspend-status-reason {
    color: var(--muted);
    font-size: 0.82rem;
    font-style: italic;
    overflow-wrap: anywhere;
}

.suspend-lift {
    margin: 0;
}

button.suspend-lift-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(57, 255, 157, 0.45);
    color: #04170d;
    background: linear-gradient(120deg, #39ff9d, #00e0b0);
    box-shadow: 0 0 16px rgba(57, 255, 157, 0.25);
    font-size: 0.88rem;
    white-space: nowrap;
}

.suspend-details {
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface-alt);
    transition: border-color 160ms ease;
}

.suspend-details[open] {
    border-color: rgba(255, 159, 67, 0.45);
}

.suspend-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.suspend-summary::-webkit-details-marker {
    display: none;
}

.suspend-summary-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    color: #ffb547;
    background: rgba(255, 159, 67, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 159, 67, 0.3);
}

.suspend-summary-text {
    display: grid;
    flex: 1;
    gap: 0.1rem;
    min-width: 0;
}

.suspend-summary-text strong {
    font-size: 0.92rem;
}

.suspend-summary-text span {
    color: var(--muted);
    font-size: 0.78rem;
}

.suspend-summary-caret {
    color: var(--muted);
    transition: transform 180ms ease;
}

.suspend-details[open] .suspend-summary-caret {
    transform: rotate(180deg);
}

.suspend-form {
    display: grid;
    gap: 0.85rem;
    padding: 0 0.9rem 0.9rem;
}

.suspend-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.suspend-mode label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.suspend-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.suspend-mode span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 650;
    text-align: center;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.suspend-mode input:checked + span {
    color: #ffd29b;
    border-color: rgba(255, 159, 67, 0.6);
    background: rgba(255, 159, 67, 0.12);
}

.suspend-mode input[value="permanent"]:checked + span {
    color: #ff9fb6;
    border-color: rgba(255, 59, 107, 0.6);
    background: rgba(255, 59, 107, 0.12);
}

.suspend-mode input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.suspend-date {
    display: grid;
    gap: 0.55rem;
    transition: opacity 160ms ease;
}

.suspend-form.is-permanent .suspend-date {
    opacity: 0.4;
}

.suspend-form.is-permanent .suspend-presets {
    pointer-events: none;
}

.suspend-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.suspend-presets[hidden] {
    display: none;
}

button.suspend-preset {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 0.8rem;
    font-weight: 650;
}

button.suspend-preset:hover {
    color: var(--text);
    background: var(--surface-hover);
    box-shadow: none;
    filter: none;
}

button.suspend-preset.is-active {
    color: #1a0d02;
    border-color: transparent;
    background: linear-gradient(120deg, #ffb547, #ff8a3d);
}

.suspend-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 650;
}

.suspend-field em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 400;
}

.suspend-field input {
    width: 100%;
    min-width: 0;
}

.suspend-field input[type="datetime-local"] {
    color-scheme: dark;
    font-variant-numeric: tabular-nums;
}

.suspend-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.suspend-hint [data-suspend-preview] {
    color: #ffd29b;
}

.suspend-allowed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.suspend-allowed-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: rgba(139, 155, 192, 0.6);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.76rem;
}

.suspend-allowed-chip.is-open {
    color: #7dffbc;
    border-color: rgba(57, 255, 157, 0.3);
    background: rgba(57, 255, 157, 0.06);
}

button.suspend-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    justify-self: end;
    padding: 0.65rem 1.2rem;
    border: 0;
    color: #fff;
    background: linear-gradient(120deg, #ff8a3d, #ff3b6b);
    box-shadow: 0 8px 22px rgba(255, 59, 107, 0.3);
}

@media (max-width: 40rem) {
    .suspend-status {
        align-items: flex-start;
    }

    .suspend-lift,
    button.suspend-lift-button,
    button.suspend-submit {
        width: 100%;
        justify-content: center;
    }

    .suspend-mode span {
        font-size: 0.8rem;
    }
}

/* Admin: bloqueo de reemplazos (mismo formulario que la suspensión, en violeta) */
.status-rblocked {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #d6b8ff;
    border-color: rgba(169, 116, 255, 0.5);
    background: rgba(169, 116, 255, 0.12);
    box-shadow: 0 0 12px rgba(169, 116, 255, 0.18);
}

.suspend-box.is-replacement {
    margin-top: 0.65rem;
}

.suspend-box.is-replacement .suspend-status {
    border-color: rgba(169, 116, 255, 0.5);
    background:
        radial-gradient(circle at 0% 0%, rgba(169, 116, 255, 0.2), transparent 65%),
        var(--surface-alt);
    box-shadow: 0 0 22px rgba(169, 116, 255, 0.14);
}

.suspend-box.is-replacement .suspend-status-icon {
    color: #fff;
    background: linear-gradient(135deg, #a974ff, #ff5fd2);
}

.suspend-box.is-replacement .suspend-status-text strong,
.suspend-box.is-replacement .suspend-hint [data-suspend-preview] {
    color: #d6b8ff;
}

.suspend-box.is-replacement .suspend-details[open] {
    border-color: rgba(169, 116, 255, 0.5);
}

.suspend-box.is-replacement .suspend-summary-icon {
    color: #c39bff;
    background: rgba(169, 116, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(169, 116, 255, 0.32);
}

.suspend-box.is-replacement .suspend-mode input[value="date"]:checked + span {
    color: #d6b8ff;
    border-color: rgba(169, 116, 255, 0.6);
    background: rgba(169, 116, 255, 0.12);
}

.suspend-box.is-replacement button.suspend-preset.is-active {
    color: #fff;
    background: linear-gradient(120deg, #a974ff, #ff5fd2);
}

.suspend-box.is-replacement button.suspend-submit {
    background: linear-gradient(120deg, #a974ff, #ff5fd2);
    box-shadow: 0 8px 22px rgba(169, 116, 255, 0.32);
}

.suspend-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 3.6rem;
    resize: vertical;
    font: inherit;
}

/* Reemplazos del usuario/vendedor: aviso de bloqueo en lugar del formulario */
.rblock {
    --rb: #a974ff;
    --rb-2: #ff5fd2;
    position: relative;
    display: grid;
    gap: 1.1rem;
    margin: 0.5rem 0 1.25rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rb) 45%, transparent);
    border-radius: 1.2rem;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--rb) 14%, transparent), color-mix(in srgb, var(--rb-2) 8%, transparent) 70%),
        var(--surface);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), 0 0 34px color-mix(in srgb, var(--rb) 16%, transparent);
    animation: rblock-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.rblock.is-permanent {
    --rb: #ff5f8f;
    --rb-2: #a974ff;
}

@keyframes rblock-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

.rblock-glow {
    position: absolute;
    top: -45%;
    right: -12%;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rb) 24%, transparent), transparent 70%);
    pointer-events: none;
    animation: suspension-glow 7s ease-in-out infinite;
}

.rblock > *:not(.rblock-glow) {
    position: relative;
}

.rblock-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rblock-emblem {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--rb), var(--rb-2));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--rb) 40%, transparent);
    font-size: 1.55rem;
}

.rblock-emblem-lock {
    position: absolute;
    right: -0.35rem;
    bottom: -0.35rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #0e1220;
    border-radius: 50%;
    color: var(--rb);
    background: #fff;
    font-size: 0.72rem;
}

.rblock-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.rblock-eyebrow {
    margin: 0;
    color: color-mix(in srgb, var(--rb) 70%, #fff);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rblock-text h3 {
    margin: 0;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    line-height: 1.25;
}

.rblock-until {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.rblock-until strong {
    color: var(--text);
}

.rblock-message {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--rb) 30%, transparent);
    border-left: 3px solid var(--rb);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.18);
}

.rblock-message-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: color-mix(in srgb, var(--rb) 75%, #fff);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rblock-message p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.rblock-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 26rem;
}

.rblock-countdown-cell {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.6rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
}

.rblock-countdown-value {
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.rblock-countdown-label {
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rblock.is-ended .rblock-countdown {
    opacity: 0.5;
}

.rblock-foot {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

@media (max-width: 30rem) {
    .rblock-head {
        align-items: flex-start;
    }

    .rblock-emblem {
        width: 2.9rem;
        height: 2.9rem;
        font-size: 1.3rem;
    }

    .rblock-countdown {
        gap: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rblock,
    .rblock-glow {
        animation: none;
    }
}

/* ==========================================================================
   Precios de las cuentas (pestaña Stock del admin) y aviso para clientes
   ========================================================================== */
.pc-section {
    display: grid;
    gap: 1.1rem;
    scroll-margin-top: 5rem;
}

.pc-section .section-heading {
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pc-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(57, 255, 157, 0.45);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    color: var(--success);
    background: rgba(57, 255, 157, 0.1);
    font-size: 0.82rem;
    font-weight: 700;
}

.pc-live-pill.is-normal {
    border-color: var(--border);
    color: var(--muted);
    background: var(--surface-alt);
}

.pc-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.6);
    animation: pc-live 1.8s ease-out infinite;
}

@keyframes pc-live {
    0% { box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.55); }
    100% { box-shadow: 0 0 0 0.55rem rgba(57, 255, 157, 0); }
}

/* Cambio vigente */
.pc-current {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(57, 255, 157, 0.35);
    border-radius: 1rem;
    padding: 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(57, 255, 157, 0.12), transparent 14rem),
        radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.1), transparent 14rem),
        var(--surface-alt);
    box-shadow: 0 0 28px rgba(57, 255, 157, 0.08);
}

.pc-current-head {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    min-width: 0;
}

.pc-current-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    color: #04121a;
    background: linear-gradient(135deg, var(--success), var(--accent));
    font-size: 1.2rem;
}

.pc-current-text {
    min-width: 0;
}

.pc-current-text h3 {
    margin: 0 0 0.25rem;
    font-family: var(--heading-font);
    overflow-wrap: anywhere;
}

.pc-current-text p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.pc-current-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.75rem;
}

.pc-current-card {
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.8rem 0.9rem;
    background: rgba(4, 6, 14, 0.45);
}

.pc-current-card h4 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.pc-current-card ul,
.pc-banner-prices {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-current-card li,
.pc-banner-prices li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.pc-current-card s,
.pc-banner-prices s {
    color: var(--muted);
    font-size: 0.85em;
}

.pc-current-card strong,
.pc-banner-prices strong {
    color: var(--success);
    font-family: var(--heading-font);
}

.pc-current-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pc-current-foot form {
    margin: 0;
}

.pc-current-foot button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pc-current-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

/* Editor desplegable */
.pc-editor {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgba(4, 6, 14, 0.35);
}

.pc-editor-toggle {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.05rem;
    border-radius: 1rem;
    cursor: pointer;
    list-style: none;
    transition: background 160ms ease;
}

.pc-editor-toggle::-webkit-details-marker {
    display: none;
}

.pc-editor-toggle:hover {
    background: var(--surface-hover);
}

.pc-editor-toggle:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 2px;
}

.pc-editor-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.7rem;
    color: #04121a;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
}

.pc-editor-text {
    display: grid;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.pc-editor-text small {
    color: var(--muted);
}

.pc-editor-chevron {
    flex: none;
    color: var(--muted);
    transition: transform 200ms ease;
}

.pc-editor[open] .pc-editor-chevron {
    transform: rotate(180deg);
}

.pc-editor[open] .pc-editor-toggle {
    border-bottom: 1px solid var(--border);
    border-radius: 1rem 1rem 0 0;
}

.pc-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    gap: 1.2rem;
    align-items: start;
    margin: 0;
    padding: 1.05rem;
}

.pc-form-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.pc-step {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1rem;
    background: rgba(4, 6, 14, 0.35);
}

.pc-step legend {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.4rem;
    font-weight: 700;
}

.pc-hint {
    margin: 0;
    font-size: 0.85rem;
}

.pc-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 0.8rem;
}

.pc-group {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.85rem;
    background: var(--surface-alt);
}

.pc-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pc-group-head h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
}

.pc-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.pc-quick .promo-chip {
    padding: 0.28rem 0.6rem;
    font-size: 0.78rem;
}

.pc-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 9.5rem) 4.2rem;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.7rem;
    padding: 0.45rem 0.5rem;
    transition: background 160ms ease;
}

.pc-tier.is-down {
    background: rgba(57, 255, 157, 0.07);
}

.pc-tier.is-up {
    background: rgba(255, 170, 0, 0.07);
}

.pc-tier-label {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    margin: 0;
}

.pc-tier-label strong {
    font-size: 0.9rem;
}

.pc-tier-label small {
    color: var(--muted);
    font-size: 0.78rem;
}

.pc-tier-input input {
    width: 100%;
}

.pc-tier-input:has(input.is-invalid) {
    border-color: rgba(255, 59, 107, 0.7);
    box-shadow: 0 0 14px rgba(255, 59, 107, 0.2);
}

.pc-tier-badge {
    justify-self: end;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    color: var(--muted);
    background: rgba(139, 155, 192, 0.12);
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}

.pc-tier.is-down .pc-tier-badge {
    color: var(--success);
    background: rgba(57, 255, 157, 0.14);
}

.pc-tier.is-up .pc-tier-badge {
    color: #ffc261;
    background: rgba(255, 170, 0, 0.14);
}

.pc-tier:has(input.is-invalid) .pc-tier-badge {
    color: #ff90ab;
    background: rgba(255, 59, 107, 0.14);
}

.pc-step textarea {
    resize: vertical;
    min-height: 6rem;
}

.pc-counter {
    justify-self: end;
}

.pc-counter.is-near {
    color: #ffc261;
}

.pc-preview {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.pc-preview .eyebrow {
    margin: 0;
}

/* Aviso que ven los clientes (también la vista previa del admin) */
.pc-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0.2rem 0 1rem;
    border: 1px solid rgba(57, 255, 157, 0.42);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(57, 255, 157, 0.16), transparent 13rem),
        linear-gradient(120deg, rgba(0, 240, 255, 0.08), rgba(255, 46, 196, 0.06));
    box-shadow: 0 0 26px rgba(57, 255, 157, 0.12);
    overflow: hidden;
}

.pc-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.06) 45%, transparent 60%);
    background-size: 250% 100%;
    animation: promo-shine 5s linear infinite;
    pointer-events: none;
}

.pc-banner-preview {
    margin: 0;
}

.pc-banner-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.95rem;
    padding: 0 0.4rem;
    color: #04121a;
    background: linear-gradient(135deg, var(--success), var(--accent));
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(57, 255, 157, 0.25);
}

.pc-banner-badge .bi {
    font-size: 1.4rem;
}

.pc-banner-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

.pc-banner-body > * {
    margin: 0;
}

.pc-banner-eyebrow {
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pc-banner-title {
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pc-banner-message {
    color: #c6d3ee;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pc-banner-prices {
    border-top: 1px dashed rgba(57, 255, 157, 0.25);
    padding-top: 0.5rem;
}

.pc-banner-prices[hidden],
.pc-banner-when[hidden] {
    display: none;
}

.pc-banner-prices strong {
    font-size: 1.05rem;
}

.pc-banner-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.pc-banner-when strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Franja corta en el resto del panel */
.pc-strip {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(57, 255, 157, 0.38);
    border-radius: 0.9rem;
    padding: 0.65rem 0.85rem;
    color: var(--text);
    background: linear-gradient(120deg, rgba(57, 255, 157, 0.1), rgba(0, 240, 255, 0.06));
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pc-strip:hover {
    border-color: rgba(57, 255, 157, 0.7);
    box-shadow: 0 0 20px rgba(57, 255, 157, 0.16);
    transform: translateY(-1px);
}

.pc-strip:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 2px;
}

.pc-strip-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    padding: 0 0.3rem;
    color: #04121a;
    background: linear-gradient(135deg, var(--success), var(--accent));
    font-family: var(--heading-font);
    font-size: 0.9rem;
    font-weight: 800;
}

.pc-strip-text {
    display: grid;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.pc-strip-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-strip-text small {
    color: var(--muted);
}

.pc-strip-text small b {
    color: var(--success);
}

.pc-strip-cta {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.3rem;
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Historial */
.pc-history {
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.7rem 0.9rem;
}

.pc-history summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-weight: 650;
    cursor: pointer;
}

.pc-history-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.pc-history-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.75rem 0.85rem;
    background: var(--surface-alt);
}

.pc-history-main {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.pc-history-main h4,
.pc-history-main p {
    margin: 0;
    overflow-wrap: anywhere;
}

.pc-history-main p {
    font-size: 0.82rem;
}

.pc-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pc-history-item form {
    margin: 0;
}

@media (max-width: 60rem) {
    .pc-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-preview {
        position: static;
    }
}

@media (max-width: 36rem) {
    .pc-form {
        padding: 0.75rem;
    }

    .pc-step {
        padding: 0.8rem;
    }

    .pc-tier {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pc-tier-input {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .pc-tier-badge {
        grid-column: 2;
        grid-row: 1;
    }

    .pc-banner {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .pc-banner-badge {
        min-width: 3rem;
        height: 3rem;
    }

    .pc-strip-cta span,
    .pc-strip-cta {
        font-size: 0;
    }

    .pc-strip-cta .bi {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-live-dot,
    .pc-banner::after {
        animation: none;
    }

    .pc-strip,
    .pc-editor-chevron {
        transition: none;
    }
}

/* Admin > Invitar: interruptor de referidos y lista de excepciones */

.ref-admin {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ref-hero {
    position: relative;
    overflow: hidden;
    transition: border-color 260ms ease, background 260ms ease;
}

.ref-hero.is-off {
    border-color: rgba(255, 46, 196, 0.35);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 46, 196, 0.12), transparent 55%),
        var(--surface);
}

.ref-hero-icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: #4fe0b0;
    background: rgba(38, 161, 123, 0.14);
    box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.4), 0 0 22px rgba(38, 161, 123, 0.3);
    transition: color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.ref-hero-icon i {
    position: absolute;
    transition: opacity 220ms ease, transform 260ms ease;
}

.ref-hero-icon-off,
.ref-hero.is-off .ref-hero-icon-on {
    opacity: 0;
    transform: scale(0.6) rotate(-20deg);
}

.ref-hero.is-off .ref-hero-icon-off {
    opacity: 1;
    transform: none;
}

.ref-hero.is-off .ref-hero-icon {
    color: #ff7ad9;
    background: rgba(255, 46, 196, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 46, 196, 0.4), 0 0 22px rgba(255, 46, 196, 0.25);
}

.ref-hero.is-on .ref-hero-icon {
    animation: ref-pulse 2.6s ease-in-out infinite;
}

@keyframes ref-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.4), 0 0 14px rgba(38, 161, 123, 0.2); }
    50% { box-shadow: inset 0 0 0 1px rgba(38, 161, 123, 0.6), 0 0 28px rgba(57, 255, 157, 0.4); }
}

.ref-hero.is-off .pay-toggle-tag {
    color: #ff7ad9;
    background: rgba(255, 46, 196, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 46, 196, 0.4);
}

.ref-hero.is-off .pay-toggle-state {
    color: #ff7ad9;
}

.ref-hero.is-on .ref-hero-copy-off,
.ref-hero.is-off .ref-hero-copy-on,
.ref-admin[data-enabled="1"] .ref-allow-note-off,
.ref-admin[data-enabled="0"] .ref-allow-note-on {
    display: none;
}

.ref-hero-copy strong {
    color: var(--text);
}

.ref-allow-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.ref-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    color: var(--success);
    background: rgba(57, 255, 157, 0.08);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 157, 0.35);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.ref-allow-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
    border-radius: 0.8rem;
    padding: 0.75rem 0.9rem;
    color: var(--muted);
    background: rgba(0, 240, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ref-allow-note i {
    color: var(--accent);
    margin-top: 0.1rem;
}

.ref-allow-note p {
    margin: 0;
}

.ref-admin[data-enabled="0"] .ref-allow-note {
    color: #ffd9f3;
    background: rgba(255, 46, 196, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 46, 196, 0.35);
}

.ref-admin[data-enabled="0"] .ref-allow-note i {
    color: #ff7ad9;
}

.ref-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.ref-search {
    position: relative;
    flex: 1 1 16rem;
    margin: 0;
}

.ref-search i {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.ref-search input {
    width: 100%;
    padding-left: 2.4rem;
}

.ref-filters {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ref-filters::-webkit-scrollbar {
    display: none;
}

button.ref-filter {
    flex: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 650;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

button.ref-filter:hover {
    filter: none;
    color: var(--text);
    border-color: var(--border-strong);
}

button.ref-filter.is-active {
    color: #04060e;
    border-color: transparent;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
}

.ref-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ref-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface-alt);
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
    animation: ref-row-in 260ms ease both;
}

.ref-row[hidden] {
    display: none;
}

.ref-row:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.ref-row.is-allowed {
    border-color: rgba(57, 255, 157, 0.4);
    background:
        linear-gradient(120deg, rgba(57, 255, 157, 0.08), transparent 70%),
        var(--surface-alt);
}

.ref-row.is-flash {
    animation: ref-flash 600ms ease;
}

@keyframes ref-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ref-flash {
    0% { box-shadow: 0 0 0 0 rgba(57, 255, 157, 0.45); }
    100% { box-shadow: 0 0 0 10px rgba(57, 255, 157, 0); }
}

.ref-row-body {
    flex: 1;
    min-width: 0;
}

.ref-row-name,
.ref-row-email {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-row-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.ref-row-email {
    color: var(--muted);
    font-size: 0.82rem;
}

.ref-badge {
    flex: none;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ref-badge.is-reseller {
    color: #ff7ad9;
    background: var(--accent-2-soft);
}

.ref-badge.is-muted {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
}

.ref-row-form {
    flex: none;
    margin: 0;
}

.ref-admin[data-enabled="1"] .ref-list {
    opacity: 0.7;
    transition: opacity 200ms ease;
}

.ref-admin[data-enabled="1"] .ref-list:hover {
    opacity: 1;
}

.ref-toast {
    align-items: center;
}

.ref-toast > i {
    color: var(--success);
    font-size: 1.1rem;
}

.ref-toast.is-error > i {
    color: #ff7a7a;
}

@media (max-width: 40rem) {
    .ref-hero .pay-toggle-form {
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid var(--border);
        padding-top: 0.85rem;
    }

    .ref-hero .pay-toggle-state {
        text-align: left;
    }

    .ref-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ref-search {
        flex-basis: auto;
    }

    .ref-row-name {
        flex-wrap: wrap;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ref-hero.is-on .ref-hero-icon,
    .ref-row,
    .ref-row.is-flash {
        animation: none;
    }

    .ref-hero-icon i,
    .ref-row {
        transition: none;
    }
}

/* Shop: aviso de SHEIN y aceptación de términos (dentro de .security-modal) */

.security-modal-icon.is-notice {
    background: linear-gradient(135deg, #ffb547, #ff2ec4);
    box-shadow: 0 0 32px rgba(255, 140, 90, 0.45);
}

.security-modal-icon.is-notice .security-modal-ring {
    border-color: rgba(255, 181, 71, 0.6);
}

.security-modal-badge.is-notice {
    color: #ffc978;
    background: rgba(255, 181, 71, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.shein-notice-lead {
    margin: 1.1rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.shein-notice-list {
    margin-top: 0.6rem;
}

.security-item.is-price {
    --tone: 0, 240, 255;
    --tone-solid: var(--accent);
}

.security-item-body b.shein-notice-highlight {
    display: inline-block;
    border-radius: 0.4rem;
    padding: 0 0.4rem;
    color: #ffffff;
    background: rgba(0, 240, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.55);
    white-space: nowrap;
}

.security-modal-more {
    margin-top: 0.9rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 0 1px var(--border);
}

.security-modal-more summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    color: #c9d4ee;
    font-size: 0.86rem;
    font-weight: 650;
    list-style: none;
    cursor: pointer;
}

.security-modal-more summary::-webkit-details-marker {
    display: none;
}

.security-modal-more summary > .bi-shield-lock-fill {
    color: var(--accent);
}

.security-modal-more-chevron {
    margin-left: auto;
    transition: transform 200ms ease;
}

.security-modal-more[open] .security-modal-more-chevron {
    transform: rotate(180deg);
}

.security-modal-more .security-modal-list {
    margin: 0;
    padding: 0 0.6rem 0.7rem;
}

.terms-confirm {
    margin-top: 1.1rem;
    border-radius: 1rem;
    padding: 1rem;
    background:
        linear-gradient(160deg, rgba(0, 240, 255, 0.07), rgba(124, 92, 255, 0.05)),
        rgba(4, 6, 14, 0.6);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.terms-confirm p {
    margin: 0;
}

.terms-confirm-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 750;
}

.terms-confirm-title i {
    color: var(--accent);
}

.terms-confirm-text {
    margin-top: 0.4rem !important;
    color: #c9d4ee;
    font-size: 0.85rem;
    line-height: 1.5;
}

.terms-confirm-question {
    margin-top: 0.8rem !important;
    font-size: 0.92rem;
    font-weight: 700;
}

.terms-choices {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.terms-choice {
    --tone: 57, 255, 157;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border-radius: 0.8rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--border);
    color: #d6e0f5;
    font-size: 0.88rem;
    line-height: 1.45;
    cursor: pointer;
    transition: box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.terms-choice.is-decline {
    --tone: 255, 92, 133;
}

.terms-choice:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.55);
}

.terms-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.terms-choice-mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    color: transparent;
    box-shadow: inset 0 0 0 2px var(--border-strong);
    font-size: 0.8rem;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.terms-choice input:checked + .terms-choice-mark {
    color: #04131a;
    background: rgb(var(--tone));
    box-shadow: 0 0 14px rgba(var(--tone), 0.55);
    transform: scale(1.1);
}

.terms-choice input:focus-visible + .terms-choice-mark {
    outline: 2px solid rgb(var(--tone));
    outline-offset: 2px;
}

.terms-choice:has(input:checked) {
    background: rgba(var(--tone), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.6);
}

.terms-choice.is-accept:has(input:checked) {
    transform: translateY(-1px);
}

@media (min-width: 640px) {
    .security-modal:has(.terms-confirm) {
        width: min(34rem, calc(100vw - 2rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .terms-choice,
    .terms-choice-mark,
    .security-modal-more-chevron {
        transition: none;
    }
}

/* Permiso de compra individual en las tarjetas de vendedores. */
.reseller-purchase-toggle {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding-bottom: 12px;
}
.reseller-purchase-toggle .pay-toggle-body { flex: 1 1 15rem; }
.reseller-purchase-toggle h3 { margin: 0 0 .35rem; }
.reseller-purchase-toggle .pay-toggle-form { margin: 0; }
.reseller-purchase-toggle .pay-switch:focus-visible {
    outline: 3px solid var(--text);
    outline-offset: 4px;
}
@media (max-width: 480px) {
    .reseller-purchase-toggle .pay-toggle-form {
        width: 100%;
        justify-content: space-between;
    }
}