/* ============================================================
   client.css — Panel de cliente
   ============================================================ */

body { background: var(--bg-base); min-height: 100vh; }

/* ── Email body panel (cuerpo del correo) ────────────────────────────────── */
.email-body-panel {
    display: none;
    margin-top: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.email-body-panel.visible {
    display: block;
}

.email-body-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.email-body-frame {
    width: 100%;
    min-height: 500px;
    max-height: 70vh;
    border: none;
    display: block;
    background: #fff;
}

/* ── Modal flotante de resultado (código + correo) ─────────────────────────── */
.client-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.client-modal.open { display: flex; }

.client-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(3px);
    animation: cmFade .2s ease;
}

.client-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    padding: 46px var(--sp-3) var(--sp-3);
    animation: cmPop .22s ease;
}

.client-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    transition: color .15s, background .15s, border-color .15s;
}
.client-modal-close:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Dentro del modal los paneles ocupan todo el ancho, sin márgenes externos */
.client-modal .result-panel { margin: 0 0 var(--sp-3); }
.client-modal .email-body-panel { margin-top: 0; }

@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmPop {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Modal responsive — sheet desde abajo en móvil ───────────────────────── */
@media (max-width: 520px) {
    .client-modal {
        padding: 0;
        align-items: flex-end;
    }
    .client-modal-dialog {
        max-width: 100%;
        max-height: 94vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 44px var(--sp-3) var(--sp-3);
    }
    @keyframes cmPop {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Enlaces de acción detectados en el cuerpo del correo ────────────────── */
.email-action-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.email-action-links-label {
    width: 100%;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: 2px;
}
.email-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary-dim);
    color: var(--primary);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-action-link:hover {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

/* ── Topbar ── */
.client-topbar {
    position: sticky; top: 0; z-index: 500;
    height: 56px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--sp-6);
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
.client-topbar-brand {
    display: flex; align-items: center; gap: var(--sp-3);
    font-weight: 700; font-size: var(--font-size-sm); color: var(--text-primary);
}
.client-topbar-logo {
    width: 30px; height: 30px; border-radius: var(--radius-md);
    background: var(--primary-muted, color-mix(in srgb, var(--primary) 12%, transparent)); border: 1px solid var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--primary);
}
.client-topbar-actions {
    display: flex; align-items: center; gap: var(--sp-2);
}

/* Legacy — kept for backward compat, no longer used */
.client-topbar-logout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--radius-md);
    border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.08);
    color: #ef4444; font-size: var(--font-size-xs); font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.client-topbar-logout:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.5); }

/* ── Topbar action buttons (Guía / Soporte / Salir) ──
   Jerarquía deliberada: Soporte es la acción de ayuda y va sólido; Guía es
   neutra; Salir es discreto hasta el hover — nadie debe pulsarlo sin querer. */
.client-topbar-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 12px;
    font-size: .85rem; font-weight: 600; letter-spacing: -.2px;
    cursor: pointer; text-decoration: none;
    border: 1.5px solid var(--border);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    color: var(--text-primary);
    transition: all .2s ease;
    white-space: nowrap;
    line-height: 1.3;
}
.client-topbar-btn i { font-size: 1.05rem; }
.client-topbar-btn:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.client-topbar-btn:active { transform: translateY(0); }
.client-topbar-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Soporte: acción primaria de ayuda */
.client-topbar-btn--support {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 700;
}
.client-topbar-btn--support:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

/* Salir: acción peligrosa, discreta en reposo */
.client-topbar-btn--logout {
    color: var(--text-soft, var(--text-secondary));
    border-color: rgba(239, 68, 68, .25);
}
.client-topbar-btn--logout:hover {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .5);
    color: #ef4444;
    box-shadow: 0 8px 20px rgba(239, 68, 68, .15);
}

/* ── Page layout ── */
.client-page {
    display: flex; align-items: flex-start; justify-content: center;
    padding: var(--sp-8) var(--sp-4); min-height: calc(100vh - 56px);
    position: relative;
}
.client-page::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none; z-index: 0;
}
.client-wrap {
    width: 100%; max-width: 660px;
    animation: fadeUp .35s ease forwards;
    position: relative; z-index: 1;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Main card ── */
.dash-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 40px color-mix(in srgb, var(--primary) 6%, transparent);
}

/* ── Profile header ── */
.profile-header {
    padding: 14px 32px;
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--border);
}
.profile-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono, monospace); font-weight: 700; font-size: 20px;
    color: #000; flex-shrink: 0;
    box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 25%, transparent);
}
.profile-info { flex: 1; min-width: 0; }
.profile-name {
    font-size: var(--font-size-md); font-weight: 700;
    color: var(--text-heading); margin: 0 0 2px;
}

/* ── Status badges ── */
.badge-status {
    border-radius: 999px; padding: 4px 12px;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.badge-status-dot { width: 6px; height: 6px; border-radius: 50%; }

.badge-active { background: color-mix(in srgb, var(--primary) 15%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); }
.badge-active .badge-status-dot { background: var(--primary); box-shadow: 0 0 6px var(--primary); animation: blink 2s infinite; }

.badge-warn { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.35); color: #fbbf24; }
.badge-warn .badge-status-dot { background: #fbbf24; animation: blink 2s infinite; }

.badge-danger { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4); color: #ef4444; }
.badge-danger .badge-status-dot { background: #ef4444; }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Botón copiar del modal de resultado ── */
.ac-btn-copy {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: 600;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
    line-height: 1.4;
}
.ac-btn-copy:hover  { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ac-btn-copy.copied { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* ── Stats strip ── */
.stats-strip { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--border); }
.stat-cell { padding: 14px 10px; text-align: center; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-num {
    font-family: var(--font-mono, monospace); font-size: var(--font-size-2xl);
    font-weight: 700; color: var(--text-heading); line-height: 1; margin-bottom: 4px;
}
.stat-den { font-size: var(--font-size-sm); color: var(--text-soft); font-weight: 400; }
.stat-label { font-size: 11px; color: var(--text-soft); font-weight: 500; }

/* Barra de consumo de cuota — feedback visual del límite diario */
.quota-bar {
    height: 4px; border-radius: 2px; overflow: hidden;
    background: var(--border); margin: 7px 12px 0;
}
.quota-bar-fill {
    height: 100%; border-radius: 2px; background: var(--primary);
    transition: width .45s cubic-bezier(.34, 1.2, .64, 1), background .3s;
}
.quota-bar-fill.is-warn { background: #fbbf24; }
.quota-bar-fill.is-full { background: var(--danger, #ef4444); }

/* ── Note block ── */
.note-block       { margin: var(--sp-4) 32px; border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; gap: var(--sp-3); }
.note-warn        { background: rgba(255,179,0,.06); border: 1px solid rgba(255,179,0,.25); }
.note-info        { background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.35); align-items: center; }
.note-icon        { flex-shrink: 0; margin-top: 1px; color: var(--warning, #f59e0b); font-size: 1.1rem; }
.note-icon-info   { flex-shrink: 0; color: var(--primary); font-size: 1.1rem; }
.note-info-body   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-info-title  { font-size: var(--font-size-sm); font-weight: 700; color: var(--primary); white-space: nowrap; }
.note-info-text   { font-size: var(--font-size-xs); color: var(--text-secondary); white-space: pre-wrap; }
.note-title       { font-size: var(--font-size-sm); font-weight: 700; color: var(--warning, #f59e0b); margin-bottom: var(--sp-2); }
.note-list        { list-style: disc; padding-left: 18px; margin: 0; }
.note-list li     { font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: 4px; line-height: 1.5; }
.note-list li:last-child { margin-bottom: 0; }
.note-list strong { color: var(--text-primary); font-weight: 700; }

/* ── Form ── */
.form-section { padding: 0 32px var(--sp-5); }
.field-label-up {
    display: block; font-size: var(--font-size-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--sp-2);
}
.field-wrap { margin-bottom: var(--sp-4); }

.btn-get {
    width: 100%; padding: 14px; border: none; border-radius: var(--radius-lg);
    background: var(--primary); color: #000;
    font-size: var(--font-size-base); font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s, box-shadow .15s, transform .15s;
}
.btn-get:hover { background: var(--primary-hover, color-mix(in srgb, var(--primary) 85%, white)); box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 35%, transparent); transform: translateY(-1px); }
.btn-get:active { transform: translateY(0); }
.btn-get:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Share buttons ── */
.share-btn-wa {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--radius-md);
    background: rgba(37,211,102,.13); border: 1.5px solid #25D366; color: #25D366;
    font-size: var(--font-size-xs); font-weight: 700;
    text-decoration: none; transition: background .15s;
}
.share-btn-wa:hover { background: rgba(37,211,102,.22); }
.share-btn-tg {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--radius-md);
    background: rgba(34,158,217,.13); border: 1.5px solid #229ED9; color: #229ED9;
    font-size: var(--font-size-xs); font-weight: 700;
    text-decoration: none; transition: background .15s;
}
.share-btn-tg:hover { background: rgba(34,158,217,.22); }

/* ── Quota warning ── */
.quota-warning {
    background: rgba(255,82,82,.08); border: 1px solid rgba(255,82,82,.25);
    border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
    font-size: var(--font-size-xs); color: var(--danger, #ef4444);
    display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4);
}

/* ── Empty aliases ── */
.empty-aliases {
    padding: var(--sp-5); text-align: center;
    color: var(--text-muted); font-size: var(--font-size-xs);
}
.empty-aliases i { font-size: 2rem; display: block; margin-bottom: var(--sp-3); opacity: .4; }

/* ── Topbar logo img ── */
.client-topbar-logo-img { height: 30px; width: auto; max-width: 90px; border-radius: var(--radius-md); object-fit: contain; flex-shrink: 0; }

/* ── Responsive topbar ── */
@media (max-width: 640px) {
    .client-topbar {
        padding: 0 var(--sp-3);
        gap: var(--sp-2);
    }
    .client-topbar-brand {
        gap: var(--sp-2);
        font-size: 11px;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 0 1 auto;
    }
    .client-topbar-actions {
        gap: 6px;
        flex-shrink: 0;
    }
    .client-topbar-logout {
        padding: 6px 10px;
        font-size: 11px;
    }
    .client-topbar-btn {
        padding: 7px 13px;
        font-size: .75rem;
    }
    .client-topbar-logo-img { height: 26px; max-width: 60px; }
}
@media (max-width: 480px) {
    .client-btn-label { display: none; }
    /* Solo icono: cuadrado redondeado, coherente con el estilo de escritorio */
    .client-topbar-btn { padding: 9px 11px; border-radius: 10px; }
    .client-topbar-btn i { font-size: 1.05rem; }
}
@media (max-width: 420px) {
    .client-topbar-brand {
        font-size: 0;
    }
    .client-topbar-brand .client-topbar-logo-img,
    .client-topbar-brand .client-topbar-logo {
        margin-right: 0;
    }
}

/* ── Banner destacado: tiempo de espera (compartido con user dashboard) ── */
.ud-wait-banner {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: .65rem 0 .75rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(135deg, rgba(255, 193, 7, .22), rgba(255, 152, 0, .18));
    border: 1.5px solid rgba(255, 193, 7, .55);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(255, 152, 0, .15);
    animation: udWaitPulse 2.2s ease-in-out infinite;
}
.ud-wait-icon {
    font-size: 2rem;
    color: #ffc107;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, .55));
}
.ud-wait-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.ud-wait-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .01em;
}
.ud-wait-time {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffb300;
    text-shadow: 0 0 10px rgba(255, 193, 7, .45);
    margin: 0 .15rem;
}
.ud-wait-sub {
    font-size: .85rem;
    color: var(--text-secondary);
    margin-top: .15rem;
}
@keyframes udWaitPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(255, 152, 0, .15); }
    50%      { box-shadow: 0 4px 20px rgba(255, 152, 0, .35); }
}

.ud-bell-banner {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .75rem;
    padding: .7rem .95rem;
    background: rgba(33, 150, 243, .12);
    border: 1px solid rgba(33, 150, 243, .35);
    border-radius: 10px;
    font-size: .9rem;
    color: var(--text-primary);
}
.ud-bell-icon {
    font-size: 1.3rem;
    color: #2196f3;
    flex-shrink: 0;
    animation: udBellRing 2.5s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes udBellRing {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30%      { transform: rotate(-12deg); }
    20%, 40%      { transform: rotate(12deg); }
}

/* ── Error block ── */
/* Error del cliente: "No llegó correo nuevo". Caja alta, separada y destacada
   para que no se confunda con el flujo normal. */
.client-error {
    display: none; margin: var(--sp-6) auto;
    max-width: 520px;
    background: rgba(239,68,68,.14); border: 1.5px solid rgba(239,68,68,.48);
    border-radius: var(--radius-md); padding: 14px 22px;
    font-size: 14.5px; font-weight: 600; color: #f87171;
    align-items: center; gap: 11px;
    line-height: 1.5;
}
.client-error i { font-size: 19px; flex-shrink: 0; }
.client-error.visible { display: flex; }

/* ── Result panel ── */
.result-panel {
    display: none; margin: 0 var(--sp-5) var(--sp-5);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: var(--radius-lg);
    overflow: hidden; background: color-mix(in srgb, var(--primary) 6%, transparent); animation: fadeUp .25s ease;
}
.result-panel.visible { display: block; }
.result-header {
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    font-size: var(--font-size-sm); color: var(--primary); font-weight: 600;
}
.result-code { padding: var(--sp-4) var(--sp-4) var(--sp-3); text-align: center; }
.result-code-val {
    font-family: var(--font-mono, monospace); font-size: var(--font-size-2xl);
    font-weight: 700; color: var(--primary); letter-spacing: .08em;
    text-shadow: 0 0 20px color-mix(in srgb, var(--primary) 50%, transparent);
    display: block; margin-bottom: var(--sp-3); word-break: break-all; text-align: center;
}
.result-meta {
    font-size: 13px; line-height: 1.75; color: var(--text-secondary, #d2d6dc);
    margin-bottom: var(--sp-3); white-space: pre-line; text-align: center;
    word-break: break-word;
}
.result-actions {
    padding: 0 var(--sp-4) var(--sp-4); display: flex; gap: var(--sp-2);
    flex-wrap: wrap; justify-content: center;
}

/* ── Card footer ── */
.dash-footer {
    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.footer-brand { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.footer-credits { font-size: 11px; color: var(--text-muted); }

/* ── Loading spinner ── */
.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,.2); border-top-color: #000;
    border-radius: 50%; animation: spin .6s linear infinite; display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Login page ── */
body.client-login-page {
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-4); min-height: 100vh;
    position: relative; overflow: hidden;
    background-color: var(--bg-base);
}

/* Matrix grid background */
body.client-login-page::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* Green glow behind card */
body.client-login-page::after {
    content: '';
    position: fixed; top: -20%; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.login-wrap { width: 100%; max-width: 400px; animation: fadeUp .35s ease forwards; position: relative; z-index: 1; }

.login-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 60px color-mix(in srgb, var(--primary) 10%, transparent);
}

.login-header { padding: var(--sp-8) var(--sp-8) var(--sp-5); text-align: center; }

.login-logo {
    width: 64px; height: 64px; margin: 0 auto var(--sp-4);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 24px; color: var(--primary);
    text-shadow: 0 0 12px color-mix(in srgb, var(--primary) 60%, transparent);
    box-shadow: 0 0 32px color-mix(in srgb, var(--primary) 18%, transparent);
}
.login-logo-img {
    height: 64px; width: auto; display: block;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius-lg); object-fit: contain;
}

.login-title { font-size: var(--font-size-xl); font-weight: 800; color: var(--text-heading); margin: 0 0 6px; letter-spacing: .02em; }
.login-sub   { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; }
.login-body  { padding: 0 var(--sp-8) var(--sp-6); }

.login-field-wrap { margin-bottom: var(--sp-5); }
.login-field-label {
    display: block; font-size: var(--font-size-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--sp-2); text-align: center;
}
.code-input {
    font-family: var(--font-mono, monospace) !important;
    font-size: var(--font-size-md) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

.login-hint {
    text-align: center; font-size: var(--font-size-sm);
    color: var(--text-muted); margin-top: var(--sp-5); margin-bottom: 0;
}

.login-contacts {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}
.login-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, transform .15s;
}
.login-contact:hover { transform: translateY(-1px); }
.login-contact i { font-size: 1.1rem; }
.login-contact-wa {
    background: rgba(37, 211, 102, .14);
    border-color: rgba(37, 211, 102, .45);
    color: #25d366;
}
.login-contact-wa:hover { background: rgba(37, 211, 102, .22); }
.login-contact-tg {
    background: rgba(34, 158, 217, .14);
    border-color: rgba(34, 158, 217, .45);
    color: #229ed9;
}
.login-contact-tg:hover { background: rgba(34, 158, 217, .22); }

.login-error {
    display: none;
    background: rgba(255,82,82,.08); border: 1px solid rgba(255,82,82,.25);
    border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
    font-size: var(--font-size-xs); color: var(--danger, #ef4444);
    align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5);
}
.login-error.visible { display: flex; }
.login-error-icon { flex-shrink: 0; }

.login-footer {
    padding: var(--sp-4) var(--sp-8); border-top: 1px solid var(--border);
    text-align: center; font-size: var(--font-size-xs); color: var(--text-muted);
}
.login-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.login-footer a:hover { text-decoration: underline; }
.login-footer-credits { margin-top: var(--sp-2); color: var(--text-muted); }

/* ── Floating Action Button (FAB) ── */
.fab-wrap {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    z-index: 999;
}

.fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 99px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s, opacity 0.2s, background 0.2s, visibility 0.2s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.fab-open .fab {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab.fab-main {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    background: var(--primary);
    color: #000;
}

.fab.fab-main:hover {
    background: var(--primary-hover, color-mix(in srgb, var(--primary) 85%, white));
    transform: scale(1.05);
}

.fab-wa { background: #25D366; color: #fff !important; }
.fab-wa:hover { background: #20BA56; }

.fab-tg { background: #229ED9; color: #fff !important; }
.fab-tg:hover { background: #1C8AC0; }

.fab i { font-size: 1.2rem; }
.fab-hidden { display: none !important; }

/* Responsive FAB */
@media (max-width: 600px) {
    .fab-wrap {
        bottom: var(--sp-4);
        right: var(--sp-4);
    }
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .profile-header  { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .ac-block        { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .note-block      { margin-left: var(--sp-5); margin-right: var(--sp-5); }
    .form-section    { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}

@media (max-width: 480px) {
    .code-value  { font-size: var(--font-size-lg); }
    .stat-num    { font-size: var(--font-size-xl); }
    .login-header, .login-body { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

/* === SOPORTE === */
.support-icon-wrap--top { margin-top: var(--sp-6); }
.support-icon-wrap {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: var(--sp-5);
    line-height: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 18px;
    margin-left: 50%;
    transform: translateX(-50%);
}
.support-contact-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: var(--sp-3);
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.3px;
}
.support-contact-desc {
    color: var(--text-soft, var(--text-secondary));
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: var(--sp-6);
    text-align: center;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.support-btn-row {
    display: flex;
    flex-direction: row;
    gap: var(--sp-4);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.support-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 18px 24px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all .25s ease;
    color: var(--text-primary) !important;
    border: 1.5px solid;
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}
.support-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.06);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.support-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.support-btn:hover::before { opacity: 1; }
.support-btn-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    width: 45px;
    height: 45px;
    border-radius: 11px;
    flex-shrink: 0;
    letter-spacing: -0.3px;
}
.support-btn i {
    font-size: 1.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.support-btn span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.support-btn span strong {
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.support-btn span small {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.8;
}
.support-btn-wa {
    background: color-mix(in srgb, #25D366 12%, var(--bg-surface));
    border-color: #25D366;
    color: #25D366 !important;
}
.support-btn-wa:hover {
    background: color-mix(in srgb, #25D366 18%, var(--bg-surface));
    box-shadow: 0 12px 32px rgba(37, 211, 102, .18);
}
.support-btn-tg {
    background: color-mix(in srgb, #2AABEE 12%, var(--bg-surface));
    border-color: #2AABEE;
    color: #2AABEE !important;
}
.support-btn-tg:hover {
    background: color-mix(in srgb, #2AABEE 18%, var(--bg-surface));
    box-shadow: 0 12px 32px rgba(42, 171, 238, .18);
}
.support-btn-custom {
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-surface));
    border-color: var(--primary);
    color: var(--primary) !important;
}
.support-btn-custom:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-surface));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

/* ============================================================
   FLUJO GUIADO DE CONSULTA (1-2-3)
   Selector visual de plataforma → correo → motivo → consultar.
   Prefijo .step-* / .plat-* / .mail-* / .rc-*
   ============================================================ */

/* --text-muted (#616161 en oscuro) da ~3.1:1 sobre el fondo: insuficiente
   para WCAG AA. --text-soft es el gris legible para todo el texto de apoyo
   del flujo. Se define aquí porque client.css solo carga en el portal
   cliente, así que no altera el panel admin. */
:root { --text-soft: #9CA3AF; }
[data-mode="light"] { --text-soft: #4B5563; }

/* ── ID de acceso: badge píldora en el header ── */
.profile-id {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-soft); cursor: pointer;
    font-size: 11px; line-height: 1.4;
    transition: color .15s, border-color .15s, background .15s;
}
.profile-id:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-elevated));
}
.profile-id-label {
    font-size: 9px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; opacity: .8;
}
.profile-id-value {
    font-family: var(--font-mono, monospace); letter-spacing: .04em;
    user-select: all; -webkit-user-select: all;
}
.profile-id-icon { font-size: 10px; opacity: .6; }
.profile-id:hover .profile-id-icon { opacity: 1; }
.profile-id.copied {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* ── Stats strip compacta: es contexto, no el contenido principal ── */
.stat-cell { padding: 9px 10px; }
.stat-num  { font-size: var(--font-size-lg); margin-bottom: 2px; }
.stat-label { font-size: 10px; letter-spacing: .02em; }
.quota-bar { height: 3px; margin: 5px 14px 0; }

/* ── Paso ── */
.step { margin-bottom: var(--sp-5); }
.step:last-of-type { margin-bottom: var(--sp-4); }
/* Aire entre el borde de la stats strip (o las notas) y el primer paso */
#step1 { margin-top: var(--sp-5); }

.step-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--sp-4);
}
.step-num {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; line-height: 1;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary);
    transition: background .2s, border-color .2s, color .2s;
}
.step-title {
    font-size: var(--font-size-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-primary);
}
.step-optional {
    font-size: 10px; font-weight: 500; letter-spacing: .04em;
    text-transform: none; color: var(--text-soft); margin-left: 2px;
}
.step-done { margin-left: auto; color: var(--primary); font-size: 13px; opacity: 0; transition: opacity .2s; }
.step.is-complete .step-done { opacity: 1; }
.step.is-complete .step-num {
    background: var(--primary); border-color: var(--primary); color: #000;
}

/* Paso aún no disponible: inerte, pero legible. Antes usaba opacity .38 y el
   texto quedaba por debajo del mínimo de contraste; .72 mantiene la señal de
   "todavía no" sin volverlo ilegible. */
.step.is-locked { opacity: .72; pointer-events: none; }
.step.is-locked .step-num { background: transparent; border-color: var(--border-medium, var(--border)); color: var(--text-soft); }
.step.is-locked .step-title { color: var(--text-soft); }

/* Accordion: pasos colapsables. Comienzan cerrados los pasos 2-3; se abren
   cuando avanzan las selecciones. */
.step-head--collapsible {
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 0; padding: 0; border: none; background: none;
    cursor: pointer; font-family: inherit; font-size: inherit;
    color: inherit; text-align: left; width: 100%;
    transition: opacity .15s;
}
.step-head--collapsible:hover { opacity: .8; }
.step-head--collapsible:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.step-toggle {
    margin-left: auto; font-size: 13px; flex-shrink: 0;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.step-collapsed .step-toggle { transform: rotate(-90deg); }

.step-body {
    animation: fadeUp .25s ease;
    max-height: 2000px;
    overflow: visible;
    margin-top: var(--sp-4);
    transition: max-height .22s cubic-bezier(.34, 1.56, .64, 1),
                opacity .22s ease, margin-bottom .22s ease, margin-top .22s ease;
}
.step-collapsed .step-body {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0 !important;
}

/* ── Paso 1: selector visual de plataformas ── */
.plat-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}
.plat-card {
    --brand: var(--primary);
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 18px 8px 14px;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    cursor: pointer; text-align: center;
    transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
}
.plat-card:hover {
    border-color: color-mix(in srgb, var(--brand) 55%, transparent);
    background: color-mix(in srgb, var(--brand) 7%, var(--bg-elevated));
    transform: translateY(-2px);
}
.plat-card:active { transform: translateY(0); }
.plat-card:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}
.plat-card.is-active {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--bg-elevated));
    box-shadow: 0 0 0 1px var(--brand), 0 6px 20px color-mix(in srgb, var(--brand) 26%, transparent);
}
.plat-card-logo {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
}
.plat-card-logo svg { width: 100%; height: 100%; display: block; }
/* Logo subido por el admin: se respeta el arte original, sin recolorear */
.plat-card-logo--img { width: 54px; height: 54px; }
.plat-card-logo--img img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}
/* Monograma de respaldo para plataformas sin logo conocido */
.plat-card-mono {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 800; line-height: 1;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
}
.plat-card-mono--sm { font-size: 14px; letter-spacing: -.02em; }
.plat-card-name {
    font-size: 12px; font-weight: 700; line-height: 1.2;
    color: var(--text-primary);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plat-card-count {
    font-size: 10px; font-weight: 500; color: var(--text-soft); line-height: 1;
}
.plat-card-check {
    position: absolute; top: 6px; right: 6px;
    font-size: 13px; color: var(--brand);
    opacity: 0; transform: scale(.6);
    transition: opacity .18s, transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.plat-card.is-active .plat-card-check { opacity: 1; transform: scale(1); }
/* Punto que avisa que hay correos ya disponibles en esa plataforma */
.plat-card-dot {
    position: absolute; top: 8px; left: 8px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 6px var(--primary);
    animation: blink 2s infinite;
}

/* ── Paso 2: lista de correos de la plataforma elegida ── */

/* Estado vacío: mismo lenguaje de caja informativa que .helper-text--warn.
   El borde punteado anterior se leía como zona para soltar un archivo. */
.mail-empty {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
}
.mail-empty i { font-size: 17px; color: var(--primary); flex-shrink: 0; }

.mail-list { display: flex; flex-direction: column; gap: 11px; }
.mail-item.is-entering { animation: mailIn .3s cubic-bezier(.34, 1.2, .64, 1) both; }
@keyframes mailIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.mail-item {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.mail-item:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.mail-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mail-item.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-elevated));
}
.mail-radio {
    width: 16px; height: 16px; flex-shrink: 0;
    border-radius: 50%; border: 2px solid var(--border-medium, var(--border));
    display: flex; align-items: center; justify-content: center;
    transition: border-color .16s;
}
.mail-item.is-active .mail-radio { border-color: var(--primary); }
.mail-radio::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary);
    transform: scale(0); transition: transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.mail-item.is-active .mail-radio::after { transform: scale(1); }
.mail-addr {
    flex: 1; min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-xs); font-weight: 600;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-badge {
    flex-shrink: 0; padding: 2px 7px; border-radius: 20px;
    font-size: 10px; font-weight: 700; line-height: 1.5;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}

/* ── Helper text contextual (sustituye al bloque de instrucciones) ──
   Son las únicas instrucciones que quedan en pantalla: tienen que leerse
   sin esfuerzo, no ser letra pequeña. */
.helper-text {
    display: flex; align-items: center; gap: 9px;
    margin-top: 11px;
    font-size: 13.5px; font-weight: 500; line-height: 1.5;
    color: var(--text-soft);
}
.helper-text i { flex-shrink: 0; font-size: 15px; }
.helper-text strong { color: var(--text-primary); font-weight: 700; }

/* Aviso crítico: caja ámbar propia para que no pase desapercibido */
.helper-text--warn {
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: rgba(245, 196, 81, .10);
    border: 1px solid rgba(245, 196, 81, .32);
    color: #F7D081;
    font-size: 14px; font-weight: 600;
}
.helper-text--warn i { color: #F5C451; font-size: 17px; margin-top: 1px; }
.helper-text--warn strong { color: #FFE9BC; font-weight: 800; }

.helper-text--center { justify-content: center; text-align: center; }

/* ── Botón consultar: estado deshabilitado explícito ── */
.btn-get:disabled {
    background: var(--bg-elevated);
    color: var(--text-soft);
    border: 1px solid var(--border);
}

/* Buscando: sigue bloqueado, pero se lee como "trabajando" y no como
   "apagado". Gana el gris de :disabled por especificidad. */
.btn-get.is-searching:disabled {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-size: var(--font-size-md);
    animation: searchPulse 1.5s ease-in-out infinite;
}
@keyframes searchPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 30%, transparent); }
    50%      { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--primary) 26%, transparent); }
}
.btn-get.is-searching .spinner {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    border-top-color: var(--primary);
}
/* Cuenta atrás destacada dentro del texto del botón */
.btn-get-count {
    display: inline-block;
    margin-left: 6px; padding: 1px 8px;
    border-radius: 999px;
    background: var(--primary); color: #000;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* ── Result card en línea (feedback inmediato bajo la acción) ── */
.rc {
    display: none;
    margin-top: var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1.5px solid color-mix(in srgb, var(--primary) 45%, transparent);
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-elevated));
    overflow: hidden;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 16%, transparent);
}
.rc.visible { display: block; animation: rcPop .32s cubic-bezier(.34, 1.24, .64, 1); }
@keyframes rcPop {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.rc-head {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    font-size: var(--font-size-xs); font-weight: 700;
    color: var(--primary);
}
.rc-head-plat { margin-left: auto; color: var(--text-soft); font-weight: 600; }
.rc-body { padding: var(--sp-4) var(--sp-4) var(--sp-3); text-align: center; }
.rc-code {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: clamp(2rem, 11vw, 3.1rem);
    font-weight: 800; line-height: 1.05;
    letter-spacing: .14em; text-indent: .14em;
    color: var(--primary);
    text-shadow: 0 0 28px color-mix(in srgb, var(--primary) 45%, transparent);
    word-break: break-all;
    user-select: all; -webkit-user-select: all;
    cursor: pointer;
}
.rc-expiry {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: var(--sp-3) 0 0;
    padding: 10px 13px; border-radius: 8px;
    font-size: 13.5px; font-weight: 700;
    background: rgba(255,193,7,.14); border: 1px solid rgba(255,193,7,.32); color: #FFCE3D;
}
.rc-expiry i { font-size: 16px; }
.rc-expiry.is-expired {
    background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); color: #ff6b6b;
}

/* Advertencia: el sistema puede equivocarse en la captura */
.rc-warning {
    display: flex; align-items: center; gap: 8px;
    margin: var(--sp-3) 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 500; line-height: 1.5;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--text-soft);
}
.rc-warning i { font-size: 15px; flex-shrink: 0; }
.rc-warning span { flex: 1; }

.rc-meta {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    font-size: 13.5px; font-weight: 500; line-height: 1.85;
    color: var(--text-primary);
    white-space: pre-line; word-break: break-word;
}
.rc-actions {
    padding: 0 var(--sp-4) var(--sp-4);
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
/* Acción primaria: copiar. Es lo que el 95% de usuarios hará. */
.rc-copy {
    flex: 1 1 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border: none; border-radius: var(--radius-md);
    background: var(--primary); color: #000;
    font-size: var(--font-size-sm); font-weight: 800; cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .12s;
}
.rc-copy:hover  { box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 38%, transparent); transform: translateY(-1px); }
.rc-copy:active { transform: translateY(0); }
/* Confirmación en el color del tema (antes un verde fijo que chocaba con
   temas no verdes): se aclara el primario y se refuerza con el pulso. */
.rc-copy.copied {
    background: color-mix(in srgb, var(--primary) 72%, #fff);
    box-shadow: 0 0 26px color-mix(in srgb, var(--primary) 45%, transparent);
    animation: rcCopied .35s ease;
}
@keyframes rcCopied {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}
.rc-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: transparent;
    color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: border-color .15s, color .15s;
}
.rc-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ── Responsive ── */
@media (max-width: 640px) {
    /* Profile header: reorganizar para mobile */
    .profile-header {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }
    .profile-avatar { width: 44px; height: 44px; font-size: 18px; }
    .profile-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .profile-name { font-size: var(--font-size-sm); }
    .profile-id {
        margin-top: 0;
        padding: 5px 12px;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .profile-id-label { font-size: 8px; }
    .profile-id-icon { font-size: 9px; }

    /* Badge status: ancho completo en segunda línea */
    .badge-status {
        flex-basis: 100%;
        justify-content: center;
        padding: 6px 14px;
    }

    .form-section { padding: 0 var(--sp-4) var(--sp-5); }
    .plat-picker  { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
    .plat-card    { padding: 14px 6px 12px; }
    .plat-card-logo, .plat-card-mono { width: 40px; height: 40px; }
    .plat-card-logo--img { width: 46px; height: 46px; }
    .helper-text  { font-size: 13px; }
    .helper-text--warn { font-size: 13.5px; }
    .rc-actions .rc-btn-ghost { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .profile-id-value { font-size: 10px; }
}

@media (max-width: 380px) {
    /* Pantallas muy pequeñas: más compacto */
    .profile-header { padding: 10px 12px; gap: 8px; }
    .profile-avatar { width: 40px; height: 40px; font-size: 16px; }
    .profile-name { font-size: 13px; margin-bottom: 0; }
    .profile-id {
        padding: 4px 10px;
        font-size: 9px;
        gap: 5px;
    }
    .profile-id-label { display: none; }
    .badge-status { padding: 5px 12px; font-size: 10px; }
    .badge-status-dot { width: 5px; height: 5px; }
}

/* Nota colapsable (movido desde el <style> de Views/Client/codes.php) */
.note-collapsible { display: block; }
.note-collapsible > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.note-collapsible > summary::-webkit-details-marker { display: none; }
.note-collapsible > summary .note-title { margin: 0; }
.note-collapsible .note-chevron { margin-left: auto; transition: transform .2s; }
.note-collapsible[open] .note-chevron { transform: rotate(180deg); }
.note-collapsible-body { margin-top: 12px; }