/* GLOBAL STYLES - DOMAHUB */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — Sistema de Diseño Canónico (ver docs/UI_GUIDELINES.md)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Marca ──────────────────────────────────────────────────────────── */
    --color-brand:        #A34386;
    --color-brand-hover:  #c05cb1;
    --color-brand-glow:   rgba(163, 67, 134, 0.45);
    --color-brand-rgb:    163, 67, 134;

    /* ── Fondos ─────────────────────────────────────────────────────────── */
    --color-bg:        #050505;
    --color-surface:   #0f0f0f;
    --color-surface-2: #161616;
    --color-surface-3: #222222;
    --color-glass:     rgba(22, 22, 22, 0.65);

    /* ── Texto ──────────────────────────────────────────────────────────── */
    --color-text:       #ffffff;
    --color-text-muted: #a0a0a0;
    --color-text-dim:   #555555;

    /* ── Semántica ──────────────────────────────────────────────────────── */
    --color-success: #00e676;
    --color-danger:  #ff5252;
    --color-warning: #ffab40;
    --color-info:    #40c4ff;
    --color-gold:    #ffd700;
    --color-owner:   #ff6b35;

    /* ── Borders ────────────────────────────────────────────────────────── */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-hover:   rgba(255, 255, 255, 0.18);
    --border-brand:   rgba(163, 67, 134, 0.4);

    /* ── Tipografía ─────────────────────────────────────────────────────── */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --text-xs:      0.75rem;
    --text-sm:      0.875rem;
    --text-base:    1rem;
    --text-lg:      1.125rem;
    --text-xl:      1.25rem;
    --text-2xl:     1.5rem;
    --text-3xl:     2rem;
    --font-regular: 400;
    --font-medium:  600;
    --font-bold:    700;
    --font-black:   800;

    /* ── Sombras ────────────────────────────────────────────────────────── */
    --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.8);
    --shadow-brand:        0 0 20px var(--color-brand-glow);
    --shadow-glow-success: 0 0 12px rgba(0, 230, 118, 0.5);
    --shadow-glow-danger:  0 0 12px rgba(255, 82, 82, 0.5);
    --shadow-glow-gold:    0 0 12px rgba(255, 215, 0, 0.4);

    /* ── Blur ───────────────────────────────────────────────────────────── */
    --blur-sm: blur(8px);
    --blur-md: blur(16px);

    /* ── Radios ─────────────────────────────────────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* ── Transiciones ───────────────────────────────────────────────────── */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.4s ease;

    /* ── Espaciado (8pt grid) ───────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

/* ── Aliases de retrocompatibilidad — NO usar en código nuevo ────────
        Permiten que el código legacy siga funcionando sin roturas.
        El código nuevo usa los tokens --color-*, --font-primary, etc.     */
    --primary:    var(--color-brand);
    /* --primary-color (con "-color") es DISTINTA de --primary de arriba y no es solo
       legacy: layouts/base.html (el header compartido por toda la app) la usa para el
       "Hub" del logo, el ícono de apps, el de notificaciones y el borde del avatar.
       Antes no estaba definida acá — solo domaboards.html/domaprofile.html/
       domawallet.html la redefinían localmente en su propio :root — así que cualquier
       otra página que usara el header compartido sin esa redefinición (Ashley, /home)
       la heredaba indefinida y esos elementos perdían el color de marca. */
    --primary-color: var(--color-brand);
    --secondary:  var(--color-brand-hover);
    --bg-color:   var(--color-bg);
    --card-bg:    var(--color-surface-2);
    --gold:       var(--color-gold);
    --danger:     var(--color-danger);
    --success:    var(--color-success);
    --text-main:  var(--color-text);
    --text-muted: var(--color-text-muted);
    --font-main:  var(--font-primary);
    /* También usados por pages legacy con --primary-glow */
    --primary-glow: var(--color-brand-glow);

    /* ── Layout / Header System Tokens ── */
    --header-height: 60px;
    --header-height-rem: 3.75rem;
    --header-z-index: 500;
    --content-z-index: 10;
    --overlay-z-index: 1;
    --sidebar-z-index: 999;
    --notification-z-index: 1001;
    --modal-z-index: 900;
}

/* ── Gamification, MCPES & Interactivity Helpers ── */
.u-text-brand { color: var(--color-brand); }
.u-text-gold  { color: var(--color-gold); }
.u-text-owner { color: var(--color-owner); }

.u-glow-brand  { text-shadow: var(--shadow-brand); }
.u-glow-gold   { text-shadow: var(--shadow-glow-gold); }

.u-transition { transition: all var(--transition-normal); }

@keyframes pulse-brand {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
.u-animate-pulse { animation: pulse-brand 2s infinite ease-in-out; }

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
}

/* Cursor personalizado: solo en elementos interactivos */
a, button, [onclick], [role="button"], [role="tab"], [role="menuitem"],
label[for], label[style*="cursor"],
select,
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="submit"], input[type="button"], input[type="file"],
.grid-card, .cat-item, .sidebar-action-btn, .btn, .btn-icon,
.feature-card, .nav-item, .notification-item, .filter-btn,
.btn-load-more, .btn-load-replies, .btn-comment-action, .btn-ctop,
.btn-like, .btn-fav, .btn-hide, .btn-report, .btn-donate, .btn-follow,
.btn-delete, .btn-media-type, .report-reason-btn, .btn-comment-action,
.fab-create, .grid-card, .view-modal-back-btn,
.search-btn-trigger, .header-balance,
.impersonate-toggle, .uv-exit-btn, .msg-avatar-wrapper,
.post-link, .logo-container {
    cursor: url('https://cdn.custom-cursor.com/db/9763/32/meme-middle-finger-pointer.png'), pointer !important;
}

/* Texto: cursor normal de texto */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="url"],
textarea, [contenteditable="true"] {
    cursor: text !important;
    user-select: text;
}

/* Deshabilitado */
[disabled], .disabled, button[disabled] {
    cursor: not-allowed !important;
}

/* ── JERARQUÍA VISUAL VIP / OWNER ── */
/* Efecto metalizado dorado animado para usuarios con rango especial.  */
/* Se aplica dinámicamente por JS; nunca hardcodeado en HTML estático. */
.name-gold-metallic {
    background: linear-gradient(
        135deg,
        #f5c842 0%, #f0a820 20%, #fde68a 45%, #d97706 70%, #f5c842 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-shimmer 3s linear infinite;
}
@keyframes gold-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}


html,
body {
    min-height: 100vh;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: clip;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: radial-gradient(circle at top right, #2a1020 0%, #000000 60%);
}

h1,
h2,
h3 {
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: 0 0 10px var(--primary-glow);
}

a {
    color: var(--primary);
    text-decoration: none;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
    /* Remove inline gaps */
}

/* 2. CONTENEDORES Y LAYOUT */
.app-container {
    width: 100%;
    height: 100%;
    max-width: 75rem;
    /* 1200px -> 75rem (Standard max-width) */
    margin: 0 auto;
    /* Center */
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1.25rem;
    /* 20px -> 1.25rem */
}

.game-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    /* 20px */
    width: 100%;
    max-width: 75rem;
    /* Ensure it doesn't stretch infinitely */
    margin: 0 auto;
}

/* 3. CLASES UTILITARIAS */

/* --- Tarjetas --- */
.card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    width: 100%;
}

/* --- Botones --- */
.btn {
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--text-main);
    box-shadow: 0 0 20px rgba(163, 67, 134, 0.6);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-danger {
    background-color: var(--danger);
    color: var(--text-main);
}

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

.btn-gold {
    background-color: var(--gold);
    color: #000;
    text-shadow: none;
}

.btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 0;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* --- Entradas de texto --- */
.input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 15px;
    color: var(--text-main);
    font-size: 1rem;
    width: 100%;
}

.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(163, 67, 134, 0.5);
}

/* --- Modales --- */
/* --- Modales --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 3000;
    /* Fix z-index priority */
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 1;
    /* Fix visibility */
}

/* .modal-overlay.visible removed/redundant */

.modal-card {
    background: #1a1a1a;
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh; /* Prevent modal from exceeding screen height */
    overflow-y: auto; /* Allow scrolling within the modal if it gets too tall */
    text-align: center;
    box-shadow: 0 0 30px rgba(163, 67, 134, 0.4);
    transform: scale(0.9);
    transition: transform 0.3s;
}

/* --- Responsive Utilities --- */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}
.table-responsive-wrapper table {
    width: 100%;
    min-width: 600px; /* Force tables to keep minimum structure and scroll */
}

.modal-overlay.visible .modal-card {
    transform: scale(1);
}

.modal-title {
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 20px;
}

/* --- Balance/Economía --- */
.balance-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--gold);
}

.balance-display .coin-icon {
    font-size: 1.2em;
    /* Relativo al texto */
}


/* --- DESKTOP DESIGN (PC) --- */
@media (min-width: 1024px) {

    /* Layout Global */
    body.layout-feed {
        display: block;
        /* Reset flex to handle absolute/fixed positioning easier */
        background-image: radial-gradient(circle at center, #1a0f18 0%, #050505 100%);
        overflow-x: hidden;
    }

    /* SCALE DOWN EFFECT (Simulate 85% Zoom) */
    :root {
        font-size: 85%;
        /* Scales everything down further */
    }

    /* Sidebar Persistente (DERECHA) */
    body.layout-feed .sidebar-overlay {
        display: none !important;
        pointer-events: none !important;
        /* Asegurar que no bloquee clicks */
        width: 0 !important;
        height: 0 !important;
    }

    body.layout-feed .sidebar {
        /* ... */
        position: fixed;
        /* Fixed para que siempre este a la derecha */
        top: 0;
        right: 0;
        /* A la DERECHA */
        bottom: 0;
        left: auto;
        width: 17.5rem;
        /* 280px */
        height: 100vh;
        transform: none;
        border-left: 1px solid #333;
        /* Borde al lado izquierdo */
        border-right: none;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        display: flex !important;
        opacity: 1 !important;
        background: #0a0a0a;
        transition: right 0.3s;
        /* Animación */
    }

    /* Ocultar botones móviles - EXCEPTO Hamburger (Mostrar) */
    body.layout-feed .sidebar .material-icons-round[onclick="toggleSidebar()"] {
        /* Close btn interno (X) - Ocultar */
        display: none !important;
    }

    body.layout-feed header .btn[onclick="toggleSidebar()"] {
        /* Hamburger - MOSTRAR */
        display: flex !important;
        margin-right: 15px;
        /* Separar del logo */
    }

    /* --- ESTADOS SIDEBAR (Abierto por defecto) --- */

    /* Header Ajustado */
    body.layout-feed header {
        position: sticky;
        top: 0;
        width: calc(100% - 17.5rem);
        /* 280px -> 17.5rem */
        /* Default: Restar Sidebar */
        margin-right: 17.5rem;
        /* 280px */
        z-index: 90;
        background: rgba(5, 5, 5, 0.9);
        padding: 0 30px;
        border-bottom: 1px solid #222;
        left: 0;
        transition: width 0.3s, margin-right 0.3s;
        /* Animación suave */
    }

    /* Fix Barra de Búsqueda Desktop */
    body.layout-feed header .search-wrapper.active {
        width: 400px !important;
        /* Ancho fijo razonable */
        max-width: 100%;
        background: var(--card-bg);
        border: 1px solid #333;
    }

    /* Estado CERRADO: Header Full Width */
    body.layout-feed.sidebar-closed header {
        width: 100%;
        margin-right: 0;
    }

    /* Sidebar (Right) */
    body.layout-feed.sidebar-closed .sidebar {
        right: -280px;
    }

    /* Contenedor Principal (Feed) */
    body.layout-feed .app-container {
        /* No usado en index pero por si acaso */
        max-width: 100%;
    }

    body.layout-feed .feed-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        /* Fluid columns (~250px min) */
        gap: 1rem;
        /* 16px */
        padding: 1rem 1.25rem;
        /* 16px 20px */
        width: calc(100% - 17.5rem);
        /* 280px -> 17.5rem */
        /* Default */
        /* Ancho total menos sidebar */
        margin-right: 17.5rem;
        /* 280px */
        /* Margen derecho para no tapar con sidebar */
        margin-left: 0;
        padding-bottom: 2.5rem;
        /* 40px */
        transition: width 0.3s, margin-right 0.3s;
    }

    /* Estado CERRADO: Feed Full Width */
    body.layout-feed.sidebar-closed .feed-container {
        width: 100%;
        margin-right: 0;
    }

    /* Fix Interacciones */
    body.layout-feed .feed-container {
        position: relative;
        z-index: 5;
        /* Encima del fondo, debajo de header/sidebar */
    }

    body.layout-feed .fab-create {
        z-index: 2000 !important;
        /* Encima de todo */
        cursor: pointer;
        transition: right 0.3s;
        /* Animación */
    }

    /* Mover el FAB a la izquierda cuando el sidebar está abierto */
    body.layout-feed:not(.sidebar-closed) .fab-create {
        right: 305px;
        /* 280px sidebar + 25px original */
    }

    /* Ajuste de Tarjetas para 3 filas verticales */
    /* Altura viewport ~900px. Header ~60px. Restante ~840px. 840/3 = ~280px height per card */
    body.layout-feed .grid-card {
        height: 28vh;
        /* Altura dinámica basada en el viewport (~3.5 filas visibles) */
        min-height: 220px;
        max-height: 350px;
        aspect-ratio: auto;
        /* Reset aspect ratio fijo */
        display: flex;
        flex-direction: column;
    }

    /* Ajuste interno de la tarjeta para que se vea bien */
    body.layout-feed .grid-text-bg,
    body.layout-feed .grid-media {
        height: 100%;
        /* Ocupar todo el espacio disponible */
        object-fit: cover;
    }

    body.layout-feed .grid-overlay {
        padding: 20px 10px 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
    }

    body.layout-feed .grid-title {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 4px;
    }

    /* Modal de Vista (Centrado en el espacio disponible) */
    body.layout-feed .modal-overlay#viewModal {
        padding-right: 280px;
        /* Descontar sidebar a la derecha */
        padding-left: 0;
    }

    body.layout-feed #viewModal {
        justify-content: center;
        align-items: center;
    }

    body.layout-feed #viewModal .fp-scroll {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        border: 1px solid #333;
        height: 100%;
    }

    body.layout-feed #viewModal>div:first-child,
    body.layout-feed #viewModal>div:last-child {
        max-width: 800px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    /* Juegos (Centrados) */
    body:not(.layout-feed) .game-container {
        max-width: 1200px;
        margin: 0 auto;
        border-left: 1px solid #222;
        border-right: 1px solid #222;
        min-height: 100vh;
        background: #080808;
    }

    /* Scrollbars Chrome/Webkit */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #0a0a0a;
    }

    ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* --- ESTILOS DE COMENTARIOS (Global) --- */
.comment-node {
    margin-bottom: 15px;
    border-left: 2px solid #333;
    padding-left: 12px;
}

.comment-main {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #888;
}

.comment-text {
    font-size: 0.95rem;
    color: #eee;
    margin-bottom: 8px;
    line-height: 1.4;
    word-wrap: break-word;
    text-align: left;
}

.fp-comments-header {
    border-top: 1px solid #333;
    padding: 15px 15px 5px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    margin-top: 10px;
}

.comment-actions {
    display: flex;
    gap: 15px;
}

.btn-comment-action {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-comment-action:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-comment-action.liked {
    color: var(--danger);
}

.btn-comment-action.reply {
    color: var(--primary);
}

/* Children (Respuestas anidadas) */
.comment-children {
    margin-top: 10px;
    margin-left: 5px;
}

.btn-load-replies {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- CHAT STYLES --- */
:root {
    --bubble-me: #A34386;
    --bubble-other: #222;
}

body.chat-layout {
    height: 100vh;
    overflow: hidden;
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
    background-size: 20px 20px;
    width: 100%;
    max-width: 800px;
    /* Limit width for better reading on desktop */
}

/* Chat Header Specifics */
.chat-header {
    background-color: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    padding: 0 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    flex-shrink: 0;
    z-index: 100;
    width: 100%;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
}

.btn-icon:active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Messages */
.msg-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 85%;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.msg-row.me {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-avatar-wrapper {
    width: 40px;
    height: 40px;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.msg-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
}

.msg-frame-overlay {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.msg-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-name {
    font-size: 0.7rem;
    color: #888;
    margin-left: 5px;
    margin-bottom: 2px;
}

.msg-row.me .msg-name {
    display: none;
}

.msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 120px;
}

.msg-row.other .msg-bubble {
    background: #222;
    color: #ddd;
    border-bottom-left-radius: 4px;
}

.msg-row.me .msg-bubble {
    background: var(--bubble-me);
    color: white;
    border-bottom-right-radius: 4px;
}

.msg-time {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    margin-top: 4px;
    display: block;
}

/* Audio Player */
.audio-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.btn-audio-ctrl {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-audio-ctrl:active {
    background: rgba(255, 255, 255, 0.4);
}

.audio-waveform-container {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    flex: 1;
    padding: 0 5px;
}

.wave-bar {
    width: 3px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    transition: height 0.2s, background 0.2s;
}

.audio-player.playing .wave-bar {
    animation: waveAnim 0.8s infinite ease-in-out alternate;
    background: #fff;
}

.wave-bar:nth-child(odd) {
    animation-duration: 0.6s;
}

.wave-bar:nth-child(2n) {
    animation-duration: 0.9s;
}

.wave-bar:nth-child(3n) {
    animation-duration: 1.1s;
}

@keyframes waveAnim {
    0% {
        transform: scaleY(1);
        opacity: 0.6;
    }

    100% {
        transform: scaleY(1.5);
        opacity: 1;
    }
}

.audio-timer {
    font-size: 0.7rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.9);
    min-width: 35px;
    text-align: right;
}

/* Input Area */
.input-area {
    background: #111;
    padding: 10px 15px;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: 100%;
}

.chat-input {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    color: white;
    padding: 12px;
    border-radius: 25px;
    outline: none;
    font-size: 1rem;
}

.action-btn-container {
    position: relative;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.btn-send,
.btn-mic {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.2s, opacity 0.2s;
}

.btn-send {
    background: var(--primary);
    color: white;
    transform: scale(0);
    opacity: 0;
}

.btn-send.visible {
    transform: scale(1);
    opacity: 1;
}

.btn-mic {
    background: #222;
    color: #aaa;
    border: 1px solid #333;
    transform: scale(1);
    opacity: 1;
}

.btn-mic.hidden {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

.btn-mic.recording {
    background: var(--danger);
    color: white;
    animation: pulseRed 1s infinite;
    border-color: var(--danger);
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

/* Profile & Settings Modals in Chat */
.profile-card {
    background: #161616;
    width: 90%;
    max-width: 350px;
    border-radius: 16px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.p-banner {
    height: 100px;
    background: #333;
    background-size: cover;
    background-position: center;
}

.p-content {
    padding: 0 20px 20px 20px;
    text-align: center;
    margin-top: -40px;
}

.p-avatar-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    border-radius: 50%;
    background: #000;
}

.p-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #161616;
}

.p-frame {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.p-name {
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 10px;
}

.p-bio {
    color: #aaa;
    font-size: 0.9rem;
    margin-top: 5px;
    background: #222;
    padding: 10px;
    border-radius: 8px;
}

.btn-close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.color-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}

.color-circle.selected {
    border-color: white;
    transform: scale(1.1);
}

/* --- PROFILE PAGE STYLES --- */
.profile-main-container {
    flex: 1;
    margin: 0 auto;
    background: var(--bg-color);
    /* Fondo limpio, el card-bg visual será para las columnas */
    /* border: none; eliminamos bordes del container principal */
    display: block;
    /* Quitamos flex column forzado */
    padding-bottom: 40px;
}

/* Layout Grid Wrapper */
.profile-grid-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Columna Izquierda (Card estilo) */
.profile-left-col {
    background: var(--card-bg);
    border: 1px solid #333;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    padding-bottom: 20px;
}

/* Columna Derecha (Secciones) */
.profile-right-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.expandable-section {
    margin: 0 20px 20px 20px;
    /* Ajuste de márgenes para que encajen en el flow */
}

/* DESKTOP VIEW */
/* DESKTOP VIEW */
@media(min-width: 900px) {
    .profile-main-container {
        max-width: 1200px;
        /* Ampliado para mejor estética */
        padding-top: 30px;
    }

    .profile-grid-layout {
        display: grid;
        grid-template-columns: 350px 1fr;
        /* Columna izquierda un poco más ancha */
        gap: 30px;
        align-items: start;
    }

    .profile-left-col {
        border-radius: 12px;
        position: sticky;
        top: 20px;
        height: fit-content;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        /* Sombra estética */
    }

    /* Mostrar siempre Inventario y Guestbook en Desktop */
    #inventorySection,
    #guestbookSection {
        display: block !important;
        margin: 0;
        animation: none;
    }

    /* Mantener oculto el editor a menos que esté activo */
    #editSection {
        display: none;
    }

    #editSection.active {
        display: block;
    }

    /* Ajustes visuales para las tarjetas de la derecha */
    .expandable-section {
        background: #111;
        /* Un poco más oscuro para contraste */
        border: 1px solid #2a2a2a;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
}

.profile-header-container {
    position: relative;
    margin-bottom: 60px;
}

.profile-banner-hero {
    width: 100%;
    height: 180px;
    background: #222;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #333;
    position: relative;
    transition: background-image 0.3s;
}

.banner-overlay-hint {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
}

.profile-avatar-hero-wrapper {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--bg-color);
    z-index: 10;
}

.profile-avatar-hero-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--card-bg);
    background: #333;
    transition: src 0.3s;
}

.profile-frame-hero-overlay {
    position: absolute;
    top: -12%;
    left: -12%;
    width: 124%;
    height: 124%;
    pointer-events: none;
    z-index: 15;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.profile-info {
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}

.stats-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 10px 0 15px 0;
    /* Reduced from 15px 0 25px 0 */
    padding: 5px 0;
    /* Reduced from 10px 0 */
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ddd;
    display: block;
}

.stat-label {
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.p-bio {
    max-width: 80%;
    margin: 10px auto;
    /* Reduced from 15px auto */
    color: #ccc;
    line-height: 1.4;
    /* Slightly tighter line height */
    background: rgba(255, 255, 255, 0.05);
    /* Sutil */
    padding: 10px;
    /* Reduced from 15px */
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Guestbook Specific Input */
.gb-input-wrapper {
    display: flex;
    gap: 10px;
    background: #0f0f0f;
    padding: 8px;
    border-radius: 25px;
    /* Pill shape */
    border: 1px solid #333;
    transition: border-color 0.2s;
}

.gb-input-wrapper:focus-within {
    border-color: var(--primary);
}

.gb-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 0 10px;
    outline: none;
    font-family: inherit;
}

.gb-input-wrapper button {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.gb-input-wrapper button:hover {
    transform: scale(1.1);
}

.expandable-section {
    padding: 25px;
    /* Más espacio interno */
    margin: 20px;
    background: #1a1a1a;
    border-radius: 16px;
    /* Más redondeado */
    border: 1px solid #2a2a2a;
    display: none;
    animation: fadeIn 0.3s ease;
}

#editSection {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 500px;
    z-index: 10000;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    border: 1px solid var(--primary);
    margin: 0;
    /* Override generic margin */
    max-height: 90vh;
    /* Prevent overflow */
    overflow-y: auto;
    /* Scrollable if tall */
}

#editSection.active {
    display: block !important;
    animation: popIn 0.3s forwards;
}

/* Backdrop for modal */
body.editing-mode::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.expandable-section.active {
    display: block;
    /* Generic for other sections */
}

/* CSS Cleaned up */

.section-title {
    color: var(--primary);
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    color: #aaa;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.form-input,
.form-textarea {
    width: 100%;
    background: #0f0f0f;
    border: 1px solid #333;
    color: white;
    padding: 12px;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--primary);
}

.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-upload {
    background: #222;
    border: 1px dashed #555;
    color: #ccc;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.btn-upload:hover {
    border-color: var(--primary);
    color: white;
    background: rgba(163, 67, 134, 0.1);
}

.btn-upload.active {
    border-style: solid;
    border-color: var(--success);
    color: var(--success);
    background: rgba(0, 230, 118, 0.05);
}

.frames-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px;
    scrollbar-width: thin;
    scrollbar-color: #444 #111;
}

.frame-option {
    min-width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #222;
    border: 2px solid #333;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.frame-option:hover {
    transform: scale(1.05);
}

.frame-option.selected {
    border-color: var(--success);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.3);
}

.frame-preview-img {
    width: 125%;
    height: 125%;
    position: absolute;
    pointer-events: none;
}



/* =========================================
   UNIFIED HEADER STYLES (DOMAHUB)
   ========================================= */
.domahub-header {
    background: #000;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 9000;
    width: 100%;
    height: 3.75rem;
    /* 60px */
    /* Universal fixed height */
    display: flex;
    align-items: center;
    box-sizing: border-box !important;
    line-height: normal !important;
    padding: 0 1.25rem;
    /* 20px */
    margin: 0;
}

.dh-container {
    max-width: 75rem;
    /* 1200px */
    margin: 0 auto;
    padding: 0 1.25rem;
    /* 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Critical for vertical centering */
    height: 100%;
    width: 100%;
    box-sizing: border-box !important;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    padding-bottom: 80px;
}

.dh-logo {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: white;
    cursor: pointer;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    line-height: 1 !important;
    /* Force tight line-height to prevent vertical shift */
}

.dh-logo img {
    height: 32px;
    width: auto;
    display: block;
    /* Prevent inline spacing issues */
}

.dh-logo span {
    color: var(--primary);
}

.dh-nav {
    display: none;
    gap: 20px;

}

/* Desktop Nav */
@media(min-width: 1024px) {
    .dh-nav {
        display: flex;
        align-items: center;
    }

    .dh-menu-btn {
        display: none;
    }
}

.dh-link {
    color: #ccc;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    line-height: 1 !important;
    /* Force tight line-height */
    height: auto;
    /* Let flex handle height */
    margin: 0;
    /* Reset margins */
}

.dh-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.dh-link.active {
    color: var(--primary);
    background: rgba(163, 67, 134, 0.1);
    font-weight: 600;
}

.dh-menu-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Menu */
.dh-mobile-menu {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
    display: none;
    flex-direction: column;
    padding: 10px;
    position: absolute;
    top: 60px;
    /* Precise positioning below header */
    width: 100%;
    z-index: 8999;
}

.dh-mobile-menu.active {
    display: flex;
    animation: slideDown 0.2s ease;
}

.dh-mobile-menu a {
    color: #ccc;
    text-decoration: none;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1a1a1a;
}

.dh-mobile-menu a:last-child {
    border-bottom: none;
}

.dh-mobile-menu a.active {
    color: var(--primary);
    background: rgba(163, 67, 134, 0.05);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-buttons {
    padding: 0 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-inventory {
    padding: 10px 25px;
    font-size: 0.9rem;
}

/* RESPONSIVE PROFILE LAYOUT */
.profile-grid-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* Sidebar fixed, content fluid */
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .profile-grid-layout {
        grid-template-columns: 1fr;
        /* Stack vertically on zoom/mobile */
    }
}

.profile-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-right-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    /* Prevent grid blowout */
}



.btn-save {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    background: var(--success);
    color: #000;
}

/* --- ADMIN PANEL STYLES --- */
#loginOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.login-box {
    background: #1a1a1a;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 350px;
}

.login-box input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333;
    background: #222;
    color: white;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.login-box button {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

.uid-helper {
    margin-top: 20px;
    padding: 15px;
    background: #111;
    border: 1px dashed var(--primary);
    border-radius: 8px;
    width: 100%;
    text-align: center;
    display: none;
}

.uid-value {
    font-family: monospace;
    color: var(--success);
    font-size: 0.85rem;
    word-break: break-all;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    background: #000;
    border: 1px solid #333;
    transition: all 0.2s;
    user-select: all;
}

.uid-value:hover {
    background: #222;
    border-color: var(--success);
}

.admin-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.admin-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.post-list {
    width: 350px;
    border-right: 1px solid #333;
    overflow-y: auto;
    background: #161616;
    display: flex;
    flex-direction: column;
}

@media(max-width: 768px) {
    .post-list {
        width: 100%;
    }

    .detail-view {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: var(--bg-color);
    }

    .detail-view.active {
        display: flex;
    }
}

.list-item {
    padding: 15px;
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    gap: 10px;
}

.list-item:hover {
    background: #252525;
}

.list-item.selected {
    background: #2a2a2a;
    border-left: 4px solid var(--primary);
}

.item-thumb {
    width: 50px;
    height: 50px;
    background: #333;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.item-info {
    overflow: hidden;
}

.item-title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.item-meta {
    font-size: 0.75rem;
    color: #888;
}

.badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    background: #333;
    color: #ccc;
    margin-right: 5px;
}

.detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.mod-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
}

.btn-back {
    background: #333;
    margin-bottom: 10px;
    display: none;
}

@media(max-width: 768px) {
    .btn-back {
        display: flex;
    }
}

.post-preview {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    white-space: pre-wrap;
    line-height: 1.5;
}

.post-preview img {
    max-width: 100%;
    max-height: 300px;
    margin-top: 10px;
    border-radius: 4px;
    display: block;
}

.ban-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid #333;
}

.ban-reason {
    color: var(--danger);
    font-weight: bold;
    font-size: 0.7rem;
    display: block;
}

.nav-tabs {
    display: flex;
    gap: 10px;
    margin-right: 20px;
}

.nav-tab {
    background: transparent;
    border: 1px solid #333;
    padding: 5px 15px;
    color: #aaa;
    cursor: pointer;
    border-radius: 20px;
}

/* CHAT STYLES */
.chat-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-area {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    background: #111;
    border-top: 1px solid #333;
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-input {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    padding: 12px;
    border-radius: 20px;
    color: white;
    outline: none;
}

.nav-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}/* ------------ DOMAHUB STANDARD HEADER ------------ */
header {
    background-color: #050505;
    padding: 0 15px; border-bottom: 1px solid #333;
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--header-z-index);
    display: flex; justify-content: space-between; align-items: center; height: var(--header-height);
    width: 100%; box-sizing: border-box; align-self: stretch; flex-shrink: 0;
}
.logo-container { display: flex; align-items: center; gap: 8px; transition: opacity 0.3s; }
.logo-text { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; text-transform: uppercase; }
.logo-text span { color: var(--primary-color); }

.header-actions { display: flex; align-items: center; gap: 5px; }
.header-balance { display: flex; align-items: center; background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 20px; border: 1px solid #333; margin: 0 5px; cursor: default; }

/* El balance vive en Firestore, así que el server no lo puede pintar sin pagar un
   read por pantalla: lo trae header.js. Para que la píldora no cambie de ancho
   cuando llega el número, se reserva el espacio desde el vamos.
   min-width alcanza para 6 dígitos con separadores ("500.000"), que es el tope de
   balance que permite la economía. */
#headerWalletBalance {
    display: inline-block;
    min-width: 3.6em;
}

/* Estado de carga: bloque tenue que late, en vez del "0" que después saltaba al
   valor real. color:transparent oculta el contenido sin sacarlo del flujo. */
#headerWalletBalance.is-loading {
    color: transparent;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(163,67,134,0.18) 0%,
        rgba(163,67,134,0.38) 50%,
        rgba(163,67,134,0.18) 100%);
    background-size: 200% 100%;
    animation: balance-shimmer 1.4s ease-in-out infinite;
}

@keyframes balance-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respeta a quien pidió menos movimiento en el sistema: se deja el bloque quieto. */
@media (prefers-reduced-motion: reduce) {
    #headerWalletBalance.is-loading { animation: none; }
}

@media (max-width: 1024px) {
    .header-balance { display: none !important; }
}

.status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--danger-color);
    box-shadow: 0 0 5px var(--danger-color);
    transition: all 0.5s ease;
}
.status-dot.online { background-color: var(--correct-color); box-shadow: 0 0 8px var(--correct-color); }

.profile-dropdown-container { position: relative; }
.profile-dropdown-menu { 
    position: absolute; right: 0; top: 45px; width: 220px; 
    background: #1a1a1a; border: 1px solid #333; border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.8); display: none; 
    flex-direction: column; padding: 10px 0; z-index: 2000;
}
.profile-dropdown-menu.active { display: flex; }
.dropdown-user-info { display: flex; align-items: center; gap: 10px; padding: 10px 15px; }
.dropdown-avatar { width: 36px; height: 36px; border-radius: var(--radius-md, 6px); border: 1px solid #444; object-fit: cover; aspect-ratio: 1/1; }
.dropdown-name { font-weight: 600; color: #fff; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-link { display: block; color: var(--primary-color); font-size: 0.85rem; padding: 0 15px 10px 15px; text-decoration: none; }
.dropdown-link:hover { text-decoration: underline; }
.dropdown-divider { height: 1px; background: #333; margin: 5px 0; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; color: #ccc; text-decoration: none; font-size: 0.9rem; transition: background 0.2s; cursor: pointer; }
.dropdown-item:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULOS UI SYSTEM — Gamificación, MCPES e Interactividad
   Generado según docs/UI_GUIDELINES.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 · Barras de Progreso ─────────────────────────────────────────────── */
.progress-track {
    width: 100%; height: 8px;
    background: var(--color-surface-3);
    border-radius: var(--radius-full); overflow: hidden;
}
.progress-fill {
    height: 100%; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-brand), var(--color-brand-hover));
    transition: width var(--transition-slow);
    box-shadow: 0 0 8px var(--color-brand-glow);
}
.progress-fill.xp      { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.progress-fill.health  { background: linear-gradient(90deg, #dc2626, #f87171); }
.progress-fill.gold    { background: linear-gradient(90deg, #d97706, var(--color-gold)); }
.progress-fill.success { background: linear-gradient(90deg, #059669, var(--color-success)); }

/* ── 3.2 · Badges Interactivos ────────────────────────────────────────────── */
.badge-ui {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: 0.03em;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    user-select: none;
}
.badge-ui:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.badge-brand   { background: rgba(163,67,134,0.2);  color: var(--color-brand-hover); border: 1px solid var(--border-brand); }
.badge-gold    { background: rgba(255,215,0,0.15);  color: var(--color-gold);        border: 1px solid rgba(255,215,0,0.3); }
.badge-success { background: rgba(0,230,118,0.15);  color: var(--color-success);     border: 1px solid rgba(0,230,118,0.3); }
.badge-danger  { background: rgba(255,82,82,0.15);  color: var(--color-danger);      border: 1px solid rgba(255,82,82,0.3); }
.badge-owner   { background: rgba(255,107,53,0.15); color: var(--color-owner);       border: 1px solid rgba(255,107,53,0.3); }
.badge-info    { background: rgba(64,196,255,0.15); color: var(--color-info);        border: 1px solid rgba(64,196,255,0.3); }

/* ── 3.3 · Preview de imagen adjunta antes de enviar (DomaBoards + Ashley) ── */
.img-attach-preview { position: relative; margin: 6px 0 0; display: inline-flex; }
.img-attach-preview .img-attach-thumb { max-height: 80px; border-radius: 6px; border: 1px solid #333; display: block; }
.img-attach-clear   { position: absolute; top: -6px; right: -6px; background: #333; border: none; color: #aaa; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; }

/* ── 3.3 · Árbol de Habilidades ───────────────────────────────────────────── */
.skill-tree     { display: flex; flex-direction: column; align-items: center; padding: var(--space-4); }
.skill-tree-row { display: flex; gap: var(--space-6); justify-content: center; }
.skill-node {
    width: 60px; height: 60px; border-radius: var(--radius-md);
    background: var(--color-surface-2); border: 2px solid var(--border-default);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer;
    transition: all var(--transition-normal); position: relative;
    min-height: 60px; min-width: 60px;
}
.skill-node:hover    { border-color: var(--color-brand); box-shadow: var(--shadow-brand); transform: scale(1.08); }
.skill-node.unlocked { border-color: var(--color-success); box-shadow: var(--shadow-glow-success); background: rgba(0,230,118,0.1); }
.skill-node.locked   { opacity: 0.4; filter: grayscale(100%); cursor: not-allowed; }
.skill-connector { width: 2px; height: 30px; background: linear-gradient(to bottom, var(--border-default), var(--color-brand)); margin: 0 auto; border-radius: var(--radius-full); }

/* ── 3.4 · Achievement Card ───────────────────────────────────────────────── */
.achievement-card {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-glass); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); backdrop-filter: var(--blur-sm);
    transition: all var(--transition-normal);
}
.achievement-card.unlocked { border-color: var(--color-gold); box-shadow: var(--shadow-glow-gold); }
.achievement-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-surface-3); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }

/* ── 4.1 · Consola / Terminal ─────────────────────────────────────────────── */
.console {
    background: #0a0a0a; border: 1px solid #2a2a2a;
    border-radius: var(--radius-md); padding: var(--space-4);
    font-family: var(--font-mono); font-size: var(--text-sm);
    color: var(--color-success); line-height: 1.6;
    overflow-x: auto; overflow-y: auto; max-height: 400px;
}
.console::before { content: '● ● ●'; display: block; color: #444; margin-bottom: var(--space-3); font-size: 0.7rem; letter-spacing: 4px; }
.console-line         { color: #e2e8f0; }
.console-line.success { color: var(--color-success); }
.console-line.error   { color: var(--color-danger); }
.console-line.warn    { color: var(--color-warning); }
.console-line.info    { color: var(--color-info); }
.console-line.cmd     { color: var(--color-brand-hover); }
.console-line.cmd::before { content: '> '; opacity: 0.6; }
.console-cursor { display: inline-block; width: 8px; height: 14px; background: var(--color-success); animation: blink 1s step-end infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }

/* ── 4.2 · Tarjeta de Servidor MCPES ─────────────────────────────────────── */
.server-card {
    background: var(--color-surface-2); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
    transition: all var(--transition-normal); position: relative; overflow: hidden;
}
.server-card:hover { border-color: var(--border-brand); box-shadow: var(--shadow-brand); transform: translateY(-2px); }
.server-card-header { display: flex; align-items: center; gap: var(--space-4); }
.server-icon { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border-default); }
.server-icon-placeholder { width: 56px; height: 56px; border-radius: 50%; background: var(--color-brand); display: flex; align-items: center; justify-content: center; font-weight: var(--font-bold); font-size: 1.2rem; color: #fff; flex-shrink: 0; }
.server-name { font-weight: var(--font-medium); color: var(--color-text); font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); }
.server-card-footer { display: flex; justify-content: flex-end; }

/* Status pulse */
.status-pulse { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-pulse.online      { background: var(--color-success); animation: pulse-online 2s ease infinite; }
.status-pulse.offline     { background: var(--color-text-dim); }
.status-pulse.maintenance { background: var(--color-warning); animation: pulse-warn 1.5s ease infinite; }
@keyframes pulse-online {
    0%   { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 230, 118, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}
@keyframes pulse-warn {
    0%   { box-shadow: 0 0 0 0 rgba(255, 171, 64, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(255, 171, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 171, 64, 0); }
}
.mcpe-version-badge {
    position: absolute; top: var(--space-3); right: var(--space-3);
    padding: 2px 8px; background: rgba(64,196,255,0.1); border: 1px solid rgba(64,196,255,0.25);
    border-radius: var(--radius-full); font-size: 0.65rem;
    font-family: var(--font-mono); color: var(--color-info);
}

/* ── 4.3 · Grilla de Inventario ───────────────────────────────────────────── */
.inventory-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: var(--space-2); padding: var(--space-4);
    background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: var(--radius-md);
}
@media (min-width: 480px)  { .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } }
@media (min-width: 768px)  { .inventory-grid { grid-template-columns: repeat(9, 1fr); } }
.inventory-slot {
    aspect-ratio: 1; background: var(--color-surface-2); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer; transition: all var(--transition-fast); font-size: 1.5rem;
}
.inventory-slot:hover    { border-color: var(--color-brand); background: rgba(163,67,134,0.1); }
.inventory-slot.empty    { opacity: 0.3; cursor: default; }
.inventory-slot.selected { border-color: var(--color-gold); box-shadow: var(--shadow-glow-gold); }
.slot-count { position: absolute; bottom: 2px; right: 4px; font-size: 0.6rem; font-family: var(--font-mono); color: var(--color-text); text-shadow: 0 1px 2px #000; line-height: 1; }

/* ── 5. Interactividad ────────────────────────────────────────────────────── */

/* Focus accesible (WCAG AA) */
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Área táctil mínima 44px (WCAG 2.5.5) — aplicado a interactivos clave */
.btn, .nav-item, .icon-btn, .skill-node { min-height: 44px; min-width: 44px; }

/* Animaciones de entrada */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn     { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.animate-fade-slide { animation: fadeSlideIn 0.25s ease forwards; }
.animate-fade       { animation: fadeIn 0.2s ease forwards; }
.animate-scale      { animation: scaleIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* Skeleton loader */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}

/* Efecto Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.15); width: 100px; height: 100px;
    top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
    opacity: 0; pointer-events: none;
}
.ripple:active::after { animation: ripple-effect 0.4s ease-out; }
@keyframes ripple-effect { to { transform: translate(-50%,-50%) scale(4); opacity: 0; } }

/* Barra de navegación inferior (Mobile) */
.bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    height: 60px; background: var(--color-surface);
    border-top: 1px solid var(--border-default); z-index: 200;
    align-items: center; justify-content: space-around;
}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; flex: 1; height: 100%; color: var(--color-text-muted);
    text-decoration: none; font-size: 0.6rem; font-weight: var(--font-medium);
    transition: color var(--transition-fast); min-height: 44px;
}
.bottom-nav-item.active { color: var(--color-brand); }
.bottom-nav-item:hover  { color: var(--color-text); }
@media (min-width: 768px) { .bottom-nav { display: none; } }

/* Grid layout responsivo estándar */
.grid-layout {
    display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 768px)  { .grid-layout { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-layout { grid-template-columns: repeat(3, 1fr); } }
.grid-fluid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-4);
}
/* ── FIN MÓDULOS UI SYSTEM ─────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE MARCOS — Header Avatar Frame Wrapper
   Usado en: domaprofile.html, domaboards.html, domawallet.html, Ashley.html
   CRÍTICO: display:none va en el WRAPPER (.header-avatar-fw), no en el <img>.
   Esto evita el "anillo flotante" del marco antes de que termine la auth.
   ═══════════════════════════════════════════════════════════════════════════ */
.header-avatar-fw {
    position: relative;
    display: none;                /* oculto hasta que initApp() valide sesión */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    overflow: hidden;             /* recorta la img al border-radius del wrapper */
}

.header-avatar-fw.visible {
    display: inline-flex;
}

.header-avatar-fw-frame {
    position: absolute;
    top: -18%;
    left: -18%;
    width: 136%;
    height: 136%;
    pointer-events: none;
    z-index: 5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Modificador para quitar el borde a los avatares que tengan marco */
img.avatar-has-frame {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ── FIN SISTEMA DE MARCOS ─────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED HEADER SYSTEM — DomaHub Standard
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base header styles for STICKY headers (standalone pages) */
.dh-header {
    background-color: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: var(--header-z-index);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
}

.dh-header .logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s;
}

.dh-header .logo-text {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.dh-header .logo-text span {
    color: var(--color-brand);
}

.dh-header .header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dh-header .header-balance {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #333;
    margin: 0 5px;
    cursor: default;
}

/* CRITICAL: Body padding-top for sticky/fixed headers */
body.has-sticky-header {
    padding-top: var(--header-height);
}

body.has-fixed-header {
    padding-top: var(--header-height);
}

/* Profile page specific overlay z-index management */
#profilePageOverlay {
    z-index: var(--overlay-z-index);
}

.profile-container {
    position: relative;
    z-index: var(--content-z-index);
}

.profile-page {
    position: relative;
    z-index: var(--content-z-index);
}

.profile-hero-zone {
    position: relative;
    z-index: var(--content-z-index);
}

/* Search wrapper (shared) */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.search-wrapper.active {
    background: var(--color-surface-3);
    width: 160px;
    border: 1px solid #333;
}

.search-btn-trigger {
    background: transparent;
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.search-input-header {
    background: transparent;
    border: none;
    color: white;
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 0.9rem;
    padding-right: 10px;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-wrapper.active .search-input-header {
    opacity: 1;
}

/* Sidebar overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: calc(var(--sidebar-z-index) - 1);
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.open {
    display: block;
    opacity: 1;
}

/* Profile dropdown */
.profile-dropdown-container {
    position: relative;
}

.profile-dropdown-menu {
    position: absolute;
    right: 0;
    top: 45px;
    width: 220px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    display: none;
    flex-direction: column;
    padding: 10px 0;
    z-index: 2000;
}

.profile-dropdown-menu.active {
    display: flex;
}

.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
}

.dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid #444;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.dropdown-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-link {
    display: block;
    color: var(--color-brand);
    font-size: 0.85rem;
    padding: 0 15px 10px 15px;
    text-decoration: none;
}

.dropdown-link:hover {
    text-decoration: underline;
}

.dropdown-divider {
    height: 1px;
    background: #333;
    margin: 5px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
    cursor: pointer;
}

.dropdown-item:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

/* Cerrar sesión, en rojo en los dos menús (avatar y apps). La clase estaba en el
   HTML desde siempre pero no tenía ninguna regla, así que se veía gris. */
.dropdown-item.text-danger,
.dropdown-item.text-danger i { color: var(--color-danger); }
.dropdown-item.text-danger:hover { background: rgba(255, 82, 82, 0.08); color: var(--color-danger); }

/* Avatar frame wrapper system */
.header-avatar-fw {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.header-avatar-fw.visible {
    display: inline-flex;
}

.header-avatar-fw-frame {
    position: absolute;
    top: -18%;
    left: -18%;
    width: 136%;
    height: 136%;
    pointer-events: none;
    z-index: 5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Modificador para quitar el borde a los avatares que tengan marco */
img.avatar-has-frame {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Global avatar wrapper for dropdown — cuadrado (no círculo) en todos lados
   donde aparece la foto de perfil, para poder soportar marcos a futuro. */
.global-avatar-wrapper {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 2px solid var(--color-brand);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIE LEGAL Y DOCUMENTOS LEGALES
   Compartidos por /vip, /terminos, /privacidad y /reembolsos. Viven acá y no
   en el <style> de cada página porque aplican a cuatro (regla de ≥2 páginas,
   docs/UI_GUIDELINES.md): cuatro copias del mismo CSS es cómo se termina con
   cuatro pies de página apenas distintos.
   ═══════════════════════════════════════════════════════════════════════════ */
.legal-footer {
    width: 100%;
    max-width: 900px;
    margin: var(--space-12) auto 0;
    padding: var(--space-6) var(--space-5) var(--space-10);
    border-top: 1px solid var(--border-default);
    text-align: center;
}

.legal-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
}

.legal-footer__links a {
    /* Área táctil mínima (WCAG 2.5.5) sin agrandar el texto. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.legal-footer__links a:hover,
.legal-footer__links a:focus-visible {
    color: var(--color-brand-hover);
}

/* El Botón de Arrepentimiento tiene que verse, no esconderse entre los otros
   links: la resolución que lo exige habla de un acceso "visible y destacado". */
.legal-footer__cta {
    color: var(--color-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.legal-footer__note {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-dim);
}

/* ── Documento legal (prosa larga) ──────────────────────────────────────── */
.legal-doc {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) 0;
    /* La prosa legal se lee y se cita: es de las pocas partes del sitio donde
       el usuario necesita poder seleccionar el texto, contra el `user-select:
       none` global. */
    user-select: text;
}
/* El `*` global le gana a cada hijo: hay que repetirlo para que valga en <p>, <li>… */
.legal-doc * { user-select: text; }

.legal-doc h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-black);
    line-height: 1.2;
}

.legal-doc__meta {
    margin-top: var(--space-2);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--text-xs);
    color: var(--color-text-dim);
}

.legal-doc h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-brand-hover);
}

.legal-doc h3 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

.legal-doc p,
.legal-doc li {
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--color-text-muted);
}

.legal-doc p { margin-bottom: var(--space-3); }

.legal-doc ul,
.legal-doc ol {
    margin: 0 0 var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.legal-doc li { padding-left: var(--space-1); }
.legal-doc strong { color: var(--color-text); font-weight: var(--font-medium); }

.legal-doc a {
    color: var(--color-brand-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Bloque destacado dentro de un documento legal — lo importante de verdad
   (el plazo de arrepentimiento, cómo darse de baja). */
.legal-doc__callout {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-brand);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: rgba(var(--color-brand-rgb), 0.06);
}

.legal-doc__callout p:last-child { margin-bottom: 0; }

/* Dato del responsable todavía sin cargar en el entorno. Se marca a la vista
   en vez de mostrar un hueco: un documento legal con un campo vacío parece
   completo y no lo está. */
.legal-doc__pending {
    color: var(--color-warning);
    font-weight: var(--font-medium);
}

@media (min-width: 768px) {
    .legal-doc { padding: var(--space-12) var(--space-6) 0; }
    .legal-doc h1 { font-size: var(--text-3xl); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO APP — lo que cambia cuando la página se sirve dentro del APK de Android
   ═══════════════════════════════════════════════════════════════════════════

   La clase `app-mode` la pone el server en el <body> cuando el User-Agent trae
   el sufijo `DomaHubApp` (ver `_html` en apps/web_api/api.py y Config.UA_TAG en
   apps/android). Acá adentro NO se rediseña nada: se saca de la página lo que en
   la app ya resuelve el chrome nativo, y se corrigen los cuatro detalles que
   delatan a un WebView como "una web abierta adentro de una app".

   Regla al tocar este bloque: todo va con selector `.app-mode …`. Nada de esto
   puede filtrarse al sitio en un navegador.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. El avatar del header SÍ va ─────────────────────────────────────────
   Antes se escondía porque el perfil era el quinto botón de la barra de abajo.
   Ese lugar ahora es de la Tienda, y el avatar vuelve a ser —como en la web—
   la puerta al perfil y a su menú (perfil, wallet, tienda, configuración y
   cerrar sesión). header.js hace que "Ver mi perfil" abra la pestaña nativa de
   Perfil en vez de cargarlo adentro de la pestaña en la que estás.

   El botón de "atrás" del header (`.header-back-btn`, ver layouts/base.html)
   existe solo acá: en la app un link a otra página no abre una pestaña nueva
   del navegador sino que navega la misma, y sin él la única forma de volver
   era el gesto del sistema. header.js lo prende cuando hay a dónde volver. */
.header-back-btn {
    display: none;
}

.app-mode .header-back-btn.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: -10px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text);
    cursor: pointer;
}

.app-mode .header-back-btn .material-icons-round {
    font-size: 26px;
}

/* El texto "DomaHub" no se esconde nunca (es la marca, y sin él el header se lee
   como una pantalla rota). Para que entre junto a la flecha, el menú, la lupa
   y los tres íconos de la derecha en un teléfono de 360dp, en la app se achican
   los márgenes del header en vez de sacar algo. Los `!important` son contra los
   `gap` inline de layouts/base.html. */
.app-mode header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-mode header > div {
    padding-left: 10px !important;
    padding-right: 6px !important;
}

/* El botón de categorías de DomaBoards (header_left) trae su margen inline. */
.app-mode header > div > div:first-child > button {
    margin-right: 0 !important;
}

.app-mode header > div > div:first-child,
.app-mode header .header-actions {
    gap: 2px !important;
}

/* Apps, Notificaciones y Perfil van en celdas `.hdr-slot` de 44px, pegadas
   (gap 0): así la distancia entre los tres íconos es la misma. Antes cada uno
   tenía su propia caja (Apps 44px, Notificaciones 28px porque no es hijo
   directo de .header-actions, el avatar 40px) y el espaciado salía desparejo. */
.app-mode #user-info {
    gap: 0 !important;
}

.app-mode .hdr-slot {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-mode .logo-container {
    flex-shrink: 0;
}

.app-mode .logo-text {
    font-size: 1.1rem;
}

/* ── 2. El saldo de DomaCoins no va arriba ───────────────────────────────────
   El balance queda como cosa de escritorio. En la app la DomaWallet es el
   segundo botón de la barra de abajo, siempre a un toque: repetir el saldo en
   el header ocupa la única franja que la app tiene para lo que cambia de
   pantalla en pantalla, y lo repite para mostrar un número que ya está a mano.

   El `!important` es necesario: `.dh-header .header-balance` lo prende con la
   misma especificidad, así que sin esto gana el que aparezca último en el
   archivo. El selector se aplica pase lo que pase con el ancho — la regla de
   `@media (max-width: 1024px)` ya lo esconde en la web móvil, pero en una
   tablet la app pasaría ese umbral y el saldo volvería a aparecer. */
.app-mode .header-balance {
    display: none !important;
}

/* ── 3. Objetivos táctiles de 44px ───────────────────────────────────────────
   Los dos íconos que quedan arriba (aplicaciones y notificaciones) miden 28px
   de glifo y nada de área alrededor. En un dedo eso es un blanco chico; las
   guías de Android piden 48dp y las de iOS 44pt. El padding no mueve nada de
   lugar porque el header los alinea con flex. */
.app-mode #appsMenuBtn,
.app-mode .header-actions > button,
.app-mode .hdr-slot > button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

/* ── 4. Detalles que delatan al WebView ──────────────────────────────────────
   El rectángulo gris del tap de Android, el "rebote" que propaga el scroll de
   una lista al documento, el reajuste automático de tipografía y la barra de
   scroll dibujada encima del contenido: ninguno de los cuatro existe en una app
   nativa. La selección de texto se mantiene — en un foro, poder copiar el
   comentario de alguien no es opcional. */
.app-mode {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* El <body> NO puede ser un contenedor de scroll. Tailwind (`overflow-x-hidden`
   en layouts/base.html) y el <style> de algunas vistas (DomaBoards, Wallet) le
   ponen `overflow-x: hidden`, y como el <html> ya tiene `overflow-x: clip`, ese
   valor no se propaga al viewport: el body pasa a ser una caja scrolleable que
   nunca tiene nada que scrollear. En un navegador da igual porque el gesto se
   encadena al documento, pero la app le ponía además `overscroll-behavior-y:
   contain`, que corta justamente ese encadenamiento. Resultado: tocando el
   feed no se scrolleaba nada, y solo funcionaba arrastrando sobre algo
   `position: fixed` (el overlay del panel de categorías), que encadena
   directo al viewport sin pasar por el body.

   `clip` recorta igual que `hidden` pero sin crear un contenedor de scroll, y el
   rebote/glow del borde ya lo apaga el WebView (OVER_SCROLL_NEVER en WebTab.kt),
   así que `overscroll-behavior` no hace falta. `body.app-mode` para ganarle en
   especificidad a la utilidad de Tailwind y a los `body {}` locales. */
body.app-mode {
    overflow-x: clip;
}

.app-mode ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Íconos y botones no se seleccionan al mantener el dedo apoyado: ese menú de
   "copiar" apareciendo sobre un botón es puro ruido. El texto del contenido sí. */
.app-mode button,
.app-mode .material-icons-round,
.app-mode .dropdown-item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   ELECCIÓN OBLIGATORIA DEL @USUARIO (header.js → showUsernameGate)
   Una cuenta nacida sin Discord no tiene nombre de usuario hasta elegirlo, y
   no se puede seguir sin él. Ver docs/specs/profile_media_and_username.md.
   ════════════════════════════════════════════════════════════════════════════ */
.username-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: var(--blur-sm);
}

.username-gate-card {
    width: 100%;
    max-width: 420px;
    padding: 24px 20px;
    background: var(--color-surface-2);
    border: 1px solid var(--border-brand);
    border-radius: 14px;
    box-shadow: var(--shadow-brand);
    font-family: var(--font-primary);
    color: var(--color-text);
}

.username-gate-card h2 {
    font-size: var(--text-xl);
    margin: 0 0 6px;
}

.username-gate-card p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 18px;
}

.username-gate-field {
    display: flex;
    align-items: center;
    min-height: 48px;
    background: var(--color-surface);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
}

.username-gate-field:focus-within { border-color: var(--color-brand); }

.username-gate-field span {
    padding-left: 14px;
    color: var(--color-text-muted);
}

.username-gate-field input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px 0 4px;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
}

.username-gate-msg {
    min-height: 1.4em;
    margin-top: 8px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.username-gate-msg.ok  { color: var(--color-success); }
.username-gate-msg.bad { color: var(--color-danger); }

.username-gate-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.username-gate-actions a {
    font-size: var(--text-xs);
    color: var(--color-text-dim);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.username-gate-actions button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 22px;
    background: var(--color-brand);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-weight: var(--font-bold);
    cursor: pointer;
}

.username-gate-actions button:hover    { background: var(--color-brand-hover); }
.username-gate-actions button:disabled { opacity: 0.6; cursor: wait; }

/* ═══════════════════════════════════════════════════════════════════════════
   APARIENCIA DE LA CUENTA (Configuración → Apariencia y accesibilidad)
   `_html` pone los atributos en <html> según la preferencia sincronizada.
   Ver docs/specs/settings_redesign.md.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-text-size="small"] { font-size: 93.75%; }   /* 15px */
/* 17px y no 18: a 18 el logo del header (que también va en rem) pisa el primer
   ícono en un teléfono de 375px. */
html[data-text-size="large"] { font-size: 106.25%; }  /* 17px */

/* "Reducir animaciones" explícito. Sin el atributo manda el sistema operativo
   (prefers-reduced-motion, más arriba); con "off" se respeta que las quiera. */
html[data-reduce-motion="on"] *,
html[data-reduce-motion="on"] *::before,
html[data-reduce-motion="on"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}