/* ═══════════════════════════════════════════════════════════
   ElDorado Sniper - Dashboard Styles
   Theme: Dark/Gold matching landing page
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg-main: #0B0E14;
    --bg-sidebar: #070a0e;
    --bg-card: rgba(21, 26, 35, 0.6);
    --bg-card-solid: #151A23;
    --bg-card-hover: rgba(28, 34, 46, 0.8);
    --gold-main: #FFB800;
    --gold-glow: rgba(255, 184, 0, 0.3);
    --gold-dim: rgba(255, 184, 0, 0.08);
    --gold-dark: #c48f1a;
    --text-main: #F3F4F6;
    --text-muted: #9CA3AF;
    --border-color: rgba(45, 51, 66, 0.6);
    --danger: #EF4444;
    --success: #10B981;
    --console-bg: #0a0c10;
    --console-text: #d4d4d4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
}

/* ═══════════ SIDEBAR ═══════════ */
.sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 24px 20px;
}

.brand-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 8px var(--gold-glow));
}

.brand-icon-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    filter: drop-shadow(0 0 8px var(--gold-glow));
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.brand-sub {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-dark);
    letter-spacing: 0.5px;
}

.nav-menu {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
}

.nav-item.active {
    background: var(--gold-main);
    color: #000;
}

.nav-item.active svg {
    stroke: #000;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.sidebar-links {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.license-info {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(255, 184, 0, 0.06);
    border: 1px solid rgba(255, 184, 0, 0.15);
    border-radius: 8px;
    text-align: center;
}

.license-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.license-date {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-main);
    font-family: 'JetBrains Mono', monospace;
}

.sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.sidebar-link.discord {
    background: rgba(88, 101, 242, 0.15);
    color: #7289da;
    border: 1px solid rgba(88, 101, 242, 0.25);
}

.sidebar-link.discord:hover {
    background: rgba(88, 101, 242, 0.25);
    transform: translateY(-1px);
}

.sidebar-link.shop {
    background: var(--gold-dim);
    color: var(--gold-main);
    border: 1px solid rgba(255, 184, 0, 0.25);
}

.sidebar-link.shop:hover {
    background: rgba(255, 184, 0, 0.15);
    transform: translateY(-1px);
}

.bot-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

.status-dot.running {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.status-dot.stopped {
    background: var(--text-muted);
    animation: none;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ═══════════ MAIN CONTENT ═══════════ */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.page {
    display: none;
    padding: 32px 40px;
    animation: fadeIn 0.2s ease;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 800;
}

/* ═══════════ BUTTONS ═══════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Boton apagado: hoy solo lo usa el enlace a la Chrome Web Store
   mientras la extension no este publicada (GET /api/me devuelve
   extension_url vacio). */
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.btn-start {
    background: var(--success);
    color: #fff;
}

.btn-start:hover {
    background: #0ea572;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-stop {
    background: var(--danger);
    color: #fff;
}

.btn-stop:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-save {
    background: var(--gold-main);
    color: #000;
}

.btn-save:hover {
    background: #e6a600;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--gold-glow);
}

.btn-save.saved {
    background: var(--success);
    color: #fff;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
    background: var(--bg-card-solid);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-sm:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

.btn-link {
    background: none;
    border: none;
    color: var(--gold-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
}

.btn-link:hover {
    opacity: 0.8;
}

.bot-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.uptime-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
}

.console-controls {
    display: flex;
    gap: 8px;
}

/* ═══════════ STATS GRID ═══════════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: rgba(255, 184, 0, 0.2);
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-dim);
    border-radius: 10px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ═══════════ CARDS ═══════════ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.card-header {
    padding: 14px 20px;
    background: var(--gold-dim);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-main);
}

.card-body {
    padding: 20px;
}

/* ═══════════ FORMS ═══════════ */
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(45, 51, 66, 0.3);
}

.form-row:last-child {
    border-bottom: none;
}

.form-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

.input-field {
    background: var(--console-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-main);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}

.input-field:focus {
    border-color: var(--gold-main);
}

.input-field.small {
    width: 80px;
    text-align: center;
}

.textarea-field {
    width: 100%;
    background: var(--console-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    color: var(--text-main);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    resize: vertical;
    outline: none;
    line-height: 1.6;
}

.textarea-field:focus {
    border-color: var(--gold-main);
}

.hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
}

/* Aviso dentro de una tarjeta. Se usa para las condiciones que el cliente
   TIENE que leer antes de configurar (cuando sale la imagen, que hace falta
   para un follow-up, que Discord funciona con Chrome cerrado). Pesa mas que
   .hint a proposito: no es una nota al pie, es una condicion de uso. */
.notice {
    display: block;
    margin: 10px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--gold-main);
    border-radius: 8px;
    background: rgba(255, 184, 0, 0.05);
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.65;
}

.notice b,
.notice strong {
    color: var(--gold-main);
}

/* Variante para lo que puede retrasar o cancelar un envio. */
.notice-warn {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.07);
}

/* Fila de formulario que no cabe en una linea: la etiqueta arriba y el
   bloque de contenido debajo, ocupando el ancho entero. */
.form-row-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.event-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Los tres eventos que notifica Discord, junto al boton de prueba. */
.event-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.event-list b {
    color: var(--text-main);
    font-weight: 600;
}

/* ═══════════ TOGGLE SWITCH ═══════════ */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.toggle input:checked + .toggle-slider {
    background: var(--gold-main);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* ═══════════ CHECKBOX GRID ═══════════ */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--console-bg);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.checkbox-item input[type="checkbox"]:checked {
    background: var(--gold-main);
    border-color: var(--gold-main);
}

.checkbox-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 12px;
    font-weight: 800;
}

.checkbox-item span {
    font-size: 13px;
    font-weight: 600;
}

/* ═══════════ TIER TABLE ═══════════ */
.tier-table {
    width: 100%;
}

.tier-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.6fr;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.tier-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.6fr;
    padding: 8px 12px;
    align-items: center;
    border-bottom: 1px solid rgba(45, 51, 66, 0.2);
    transition: background 0.15s;
}

.tier-row:hover {
    background: rgba(255, 184, 0, 0.03);
}

.tier-row:nth-child(even) {
    background: rgba(21, 26, 35, 0.4);
}

.tier-row:nth-child(even):hover {
    background: rgba(255, 184, 0, 0.05);
}

.tier-name {
    font-size: 13px;
    font-weight: 600;
}

.tier-row .input-field {
    width: 70px;
    padding: 6px 8px;
    font-size: 12px;
}

.tier-row .toggle {
    width: 36px;
    height: 20px;
}

.tier-row .toggle-slider::before {
    width: 14px;
    height: 14px;
}

.tier-row .toggle input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

/* ═══════════ CONSOLE ═══════════ */
.console-preview {
    overflow: hidden;
}

.console-output {
    background: var(--console-bg);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.7;
    color: var(--console-text);
    overflow-y: auto;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-all;
}

.console-output.mini {
    height: 200px;
    border-radius: 0;
}

.console-output.full {
    height: calc(100vh - 220px);
    border-radius: 12px 12px 0 0;
}

.console-card {
    overflow: hidden;
}

/* Aqui vivia .console-input-bar, la caja para escribir en la consola del
   bot de escritorio (servia para teclear la clave de licencia). En la nube
   la consola es de solo lectura, asi que ya no hay nada que estilar. */

.console-line {
    padding: 2px 0;
}

.console-line .time {
    color: var(--text-muted);
    margin-right: 8px;
}

.console-line.error {
    color: var(--danger);
}

.console-line.success {
    color: var(--success);
}

.console-line.gold {
    color: var(--gold-main);
}

.console-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 40px;
}

/* ═══════════ ACTIVITY LOG ═══════════ */
.activity-section {
    margin-top: 16px;
}

.activity-subtitle {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.activity-title {
    font-size: 18px !important;
    color: var(--text-main) !important;
    margin-bottom: 2px !important;
}

.activity-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.filter-select {
    background: var(--console-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-main);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    outline: none;
}

.filter-select:focus {
    border-color: var(--gold-main);
}

.activity-body {
    padding: 0 !important;
    max-height: 300px;
    overflow-y: auto;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.activity-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.activity-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-card-solid);
    border-bottom: 1px solid var(--border-color);
}

.activity-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(45, 51, 66, 0.2);
    color: var(--text-main);
}

.activity-table tr:hover td {
    background: rgba(255, 184, 0, 0.03);
}

.activity-table .time-cell {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.activity-table .price-cell {
    color: var(--success);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-badge.offer_sent {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.type-badge.skipped {
    background: rgba(255, 184, 0, 0.1);
    color: var(--gold-main);
    border: 1px solid rgba(255, 184, 0, 0.3);
}

/* Follow-up column badges (activity log) */
.type-badge.fu-sent {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.type-badge.fu-skipped {
    background: rgba(255, 184, 0, 0.1);
    color: var(--gold-main);
    border: 1px solid rgba(255, 184, 0, 0.3);
}
.type-badge.fu-replied {
    background: rgba(34, 211, 238, 0.12);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.3);
}
.type-badge.fu-pending {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.type-badge.fu-error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.type-badge.fu-off {
    background: rgba(160, 160, 160, 0.08);
    color: #9ca3af;
    border: 1px solid rgba(160, 160, 160, 0.25);
}
/* En cola pero sin extension conectada: no es un fallo, es una espera. */
.type-badge.fu-waiting {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
/* Estado que el dashboard todavia no conoce: se pinta neutro con su
   propio nombre en vez de desaparecer de la tabla. */
.type-badge.fu-unknown {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.28);
}
.fu-none {
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    opacity: 0.6;
}

/* Etiqueta y motivo, uno debajo del otro dentro de la misma celda. */
.fu-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: 220px;
}

/* El motivo del descarte, a la vista. Se recorta a dos lineas y el texto
   completo queda en el title, para que una explicacion larga del servidor
   no deforme la fila. */
.fu-reason {
    font-size: 10px;
    line-height: 1.35;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Estados de la columna Type que hasta ahora salian sin color. */
.type-badge.order_accepted {
    background: rgba(255, 184, 0, 0.12);
    color: var(--gold-main);
    border: 1px solid rgba(255, 184, 0, 0.32);
}

.type-badge.error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.region-badge {
    font-weight: 700;
    font-size: 12px;
}

.boost-cell {
    font-size: 12px;
}

.empty-row td {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 30px 16px;
}

.offer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 184, 0, 0.1);
    color: var(--gold-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    border: 1px solid rgba(255, 184, 0, 0.2);
}

.offer-link:hover {
    background: var(--gold-main);
    color: #000;
    transform: scale(1.1);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.page-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.page-btn:hover {
    border-color: var(--gold-main);
    color: var(--text-main);
}

.page-btn.active {
    background: var(--gold-main);
    border-color: var(--gold-main);
    color: #000;
}

/* ═══════════ TOAST ═══════════ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

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

.toast.success {
    border-color: var(--success);
}

.toast.error {
    border-color: var(--danger);
}

/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ═══ Chat Image Picker ═══════════════════════════════════ */
.img-picker {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.img-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.img-list:empty::before {
    content: "No images yet. Click 'Add Image(s)' above.";
    color: var(--text-muted);
    font-size: 13px;
    grid-column: 1 / -1;
    padding: 14px 0;
}
.img-chip {
    position: relative;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
}
.img-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-chip .img-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.img-chip .img-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: background 0.15s;
}
.img-chip .img-remove:hover {
    background: var(--danger);
}

/* Aqui vivia el interruptor Normal / Fast de la cabecera. En la nube
   solo hay una forma de trabajar (la extension hace los fetch), asi que
   se quito el control y con el estos estilos. */

/* ═══════════ ACCOUNT / SETTINGS ═══════════ */

/* Boton dorado que NO es .btn-save (saveConfig reescribe todos los
   .btn-save, asi que las paginas que no guardan config usan este). */
.btn-gold {
    background: var(--gold-main);
    color: #000;
}

.btn-gold:hover {
    background: #e6a600;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--gold-glow);
}

/* Variante para etiquetas <a> que se ven como boton */
.btn-inline {
    text-decoration: none;
    padding: 8px 16px;
    font-size: 12px;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    transform: none;
    box-shadow: none;
}

/* Boton de cerrar sesion en el pie del sidebar */
.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-logout:hover {
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

/* Cabecera del plan */
.plan-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.plan-hero-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-name {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
}

.plan-days {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.plan-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

/* Estado del plan: un color por estado */
.plan-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.plan-status.frozen {
    background: rgba(34, 211, 238, 0.12);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.35);
}

.plan-status.expired {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.plan-status.unknown {
    background: rgba(160, 160, 160, 0.08);
    color: var(--text-muted);
    border: 1px solid rgba(160, 160, 160, 0.25);
}

/* Barra de progreso del tiempo consumido */
.plan-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--console-bg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.plan-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--gold-main);
    transition: width 0.4s ease, background 0.2s ease;
}

.plan-progress-bar.frozen {
    background: #67e8f9;
}

.plan-progress-bar.expired {
    background: var(--danger);
}

.plan-progress-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Contadores de congelacion */
.freeze-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.freeze-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 10px;
    border-radius: 10px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
}

.freeze-value {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--gold-main);
}

.freeze-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.freeze-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Toggle deshabilitado (casilla de guardar tarjeta) */
.toggle.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.soon-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 184, 0, 0.1);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: var(--gold-main);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Historial de compras */
.billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 14px;
}

.billing-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-card-solid);
    border-bottom: 1px solid var(--border-color);
}

.billing-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(45, 51, 66, 0.2);
    color: var(--text-main);
}

.billing-table tr:hover td {
    background: rgba(255, 184, 0, 0.03);
}

.billing-table .billing-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

/* Estado de la extension */
.ext-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* ═══════════ RENEWAL NOTICE (plan vencido o congelado) ═══════════ */

/* Aqui vivia el desenfoque con bloqueo total (filter: blur + pointer-events:
   none sobre .sidebar y .main-content). Se quito: ADMIN_AFFILIATES.md
   seccion 2 manda bloqueo suave, y con el bloqueo duro un cliente vencido no
   podia ni llegar a la pestana Affiliates para canjear los dias que ya tenia
   ganados, justo cuando mas falta le hacen. La clase body.plan-locked se
   sigue poniendo por si alguna pieza quiere saber el estado, pero ya no
   desenfoca ni corta los clics.
   El bloqueo de verdad esta en el servidor: /api/bot/start responde 402 y el
   WebSocket cierra con 4403. */

.plan-lock {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.25s ease;
}

.plan-lock-window {
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: auto;
    padding: 32px;
    border-radius: 16px;
    background: var(--bg-card-solid);
    border: 1px solid rgba(255, 184, 0, 0.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
}

/* Aspa de cerrar. Vale para el aviso de renovacion y para el popup de canje. */
.plan-lock-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.plan-lock-close:hover {
    border-color: rgba(255, 184, 0, 0.35);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.04);
}

.plan-lock-kicker {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.plan-lock-kicker.frozen {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.35);
    color: #67e8f9;
}

.plan-lock-title {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 800;
    margin: 14px 0 6px;
}

.plan-lock-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.lock-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.lock-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 14px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.lock-plan:hover {
    border-color: rgba(255, 184, 0, 0.35);
    transform: translateY(-2px);
}

.lock-plan.best {
    border-color: rgba(255, 184, 0, 0.45);
    background: var(--gold-dim);
}

.lock-plan-tag {
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(160, 160, 160, 0.1);
    border: 1px solid rgba(160, 160, 160, 0.25);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.lock-plan-tag.limited {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.lock-plan-tag.best {
    background: rgba(255, 184, 0, 0.15);
    border-color: rgba(255, 184, 0, 0.4);
    color: var(--gold-main);
}

.lock-plan-name {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.lock-plan-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-main);
}

.lock-plan-price s {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 4px;
}

.lock-plan-meta {
    font-size: 11px;
    color: var(--text-muted);
    min-height: 30px;
}

.lock-plan-btn {
    width: 100%;
    justify-content: center;
    text-decoration: none;
    margin-top: 4px;
}

.lock-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.lock-pay-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lock-pay-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.lock-pay-pill {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.plan-lock-note {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin: 16px 0 20px;
}

.lock-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lock-actions .btn {
    text-decoration: none;
}

/* Aviso de la descongelacion automatica, junto a los botones de congelar */
.freeze-note {
    margin: 14px 0 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #a5f3fc;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ═══════════ AFFILIATES ═══════════ */

/* Contador de dias pendientes dentro del boton del menu. .nav-item es un
   flex con gap, asi que el margin-left auto lo empuja al borde derecho. */
.nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--gold-main);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* En la pestana activa el fondo ya es dorado, asi que el contador se
   invierte para que siga leyendose. */
.nav-item.active .nav-badge {
    background: #000;
    color: var(--gold-main);
}

.aff-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 4px;
}

.aff-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 700;
    color: var(--gold-main);
    word-break: break-all;
}

/* Lapiz de editar el codigo en el sitio */
.aff-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.aff-edit:hover {
    border-color: rgba(255, 184, 0, 0.35);
    color: var(--gold-main);
    background: var(--gold-dim);
}

.aff-edit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.aff-code-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    width: 240px;
    max-width: 100%;
}

/* Aviso en vivo de la validacion del codigo */
.aff-feedback {
    min-height: 18px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.aff-feedback.ok {
    color: var(--success);
}

.aff-feedback.bad {
    color: #fca5a5;
}

.aff-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.aff-link-input {
    flex: 1;
    min-width: 260px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* Mismo patron que .aff-link-input: ancho comodo para leer una URL larga
   en escritorio, y el media query de 720 px lo suelta. */
.dw-url-input {
    flex: 1;
    min-width: 360px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.aff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

.aff-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 10px;
    border-radius: 10px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
}

.aff-value {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--gold-main);
}

.aff-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.aff-table .aff-days {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--success);
}

.aff-table .aff-applied-info {
    font-size: 11px;
    color: var(--text-muted);
}

/* Pildora de estado de una reclamacion. Reusa la familia .plan-status. */
.plan-status.pending {
    background: rgba(255, 184, 0, 0.12);
    color: var(--gold-main);
    border: 1px solid rgba(255, 184, 0, 0.35);
}

/* Estado vacio del historial: explica el programa en vez de una tabla vacia */
.aff-empty {
    padding: 22px;
    border-radius: 12px;
    background: var(--bg-card-solid);
    border: 1px dashed var(--border-color);
}

.aff-empty-title {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px;
}

.aff-empty-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.aff-empty-steps {
    margin: 0 0 12px 18px;
    padding: 0;
}

.aff-empty-steps li {
    font-size: 12.5px;
    color: var(--text-main);
    margin-bottom: 6px;
    line-height: 1.6;
}

.aff-empty-note {
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
}

/* ═══════════ REDEEM MODAL ═══════════ */
/* Clases e id propios a proposito: applyPlanNotice() manipula #plan-lock
   cada 60 segundos y pisaria cualquier dialogo que compartiera ese id. */
.redeem-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.2s ease;
}

.redeem-window {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 30px;
    border-radius: 16px;
    background: var(--bg-card-solid);
    border: 1px solid rgba(255, 184, 0, 0.25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.redeem-kicker {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 184, 0, 0.12);
    border: 1px solid rgba(255, 184, 0, 0.35);
    color: var(--gold-main);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.redeem-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    margin: 14px 0 6px;
}

.redeem-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.redeem-games {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    margin-bottom: 18px;
}

.redeem-game {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.redeem-game:hover {
    border-color: rgba(255, 184, 0, 0.35);
}

.redeem-game.selected {
    border-color: rgba(255, 184, 0, 0.55);
    background: var(--gold-dim);
}

.redeem-game.soon {
    opacity: 0.45;
    cursor: not-allowed;
}

.redeem-game.soon:hover {
    border-color: var(--border-color);
}

.redeem-game input {
    accent-color: var(--gold-main);
    width: 16px;
    height: 16px;
    cursor: inherit;
}

.redeem-game-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.redeem-game-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
}

.redeem-game-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.redeem-note {
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.redeem-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Cualquier tabla ancha se desplaza dentro de su caja en vez de estirar la
   pagina. Vale igual en escritorio: si cabe no se nota nada. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════ RESPONSIVE ═══════════ */
/* Por debajo de 860px la barra lateral de 240px se come el ancho util: a
   375px dejaba unos 130px de contenido y el texto salia cortado, una palabra
   por linea. Aqui pasa a ser una cabecera con el menu en horizontal. */
@media (max-width: 860px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .brand {
        padding: 16px 16px 10px;
    }

    /* El menu se desplaza a lo ancho, asi caben las 10 pestanas sin
       comerse la pantalla a lo alto. */
    .nav-menu {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 6px;
        padding: 2px 12px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-item {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 9px 13px;
    }

    /* El pie del sidebar deja de ser una columna alta y se reparte en una
       fila que se parte sola. */
    .sidebar-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
    }

    .license-info {
        flex: 1 1 150px;
        margin-bottom: 0;
        padding: 7px 10px;
    }

    .sidebar-links {
        flex: 1 1 180px;
        margin-bottom: 0;
    }

    .bot-status {
        flex: 0 0 auto;
    }

    .sidebar-logout {
        flex: 0 0 auto;
        width: auto;
        margin-top: 0;
    }

    .main-content {
        flex: 1 1 auto;
        min-height: 0;
    }

    .page {
        padding: 22px 16px;
    }

    .page-header {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }
}

@media (max-width: 720px) {
    .lock-plans {
        grid-template-columns: 1fr;
    }
    .freeze-grid {
        grid-template-columns: 1fr;
    }
    .aff-grid {
        grid-template-columns: 1fr;
    }

    /* El enlace de invitacion y su boton dejan de pelearse por el ancho:
       el campo ocupa la linea entera y el boton baja debajo. */
    .aff-link-input {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Igual con la URL del webhook: 360 px no caben en un movil y .card
       recorta lo que sobra, asi que el final de la URL se perdia. */
    .dw-url-input {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Las cuatro tarjetas de estadisticas no caben en una fila: a 375 px
       la rejilla seguia pidiendo 4 columnas y empujaba .main-content 317 px
       a lo ancho, arrastrando de lado el titulo, la consola y el registro. */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .aff-code {
        font-size: 21px;
    }

    .aff-code-input {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Las tablas mantienen un ancho minimo legible y se desplazan dentro de
       .table-scroll en vez de aplastar las columnas. */
    .aff-table,
    .billing-table {
        min-width: 560px;
    }

    .activity-table {
        min-width: 620px;
    }

    /* Etiqueta y control dejan de pelearse por la misma linea: el control
       baja debajo en cuanto no cabe. */
    .form-row {
        flex-wrap: wrap;
        gap: 8px;
    }
}