/* ==== VARIABLES GLOBALES ==== */
:root {
    --bg-page: #0f172a; /* Fondo oscuro base para evitar parpadeos blancos */
    --bg-sidebar: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --accent-color: #06b6d4; /* Turquesa tecnológico */
    --accent-hover: #0891b2;
    --danger-color: #ec4899; /* Rosa innovador */
    --danger-hover: #db2777;
    --border-color: #e2e8f0;
    --card-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.1), 0 8px 10px -6px rgba(6, 182, 212, 0.05); /* Sombra turquesa sutil */
    --card-shadow-hover: 0 20px 25px -5px rgba(6, 182, 212, 0.2), 0 10px 10px -5px rgba(6, 182, 212, 0.08); /* Glow turquesa */
    --star-color: #ec4899; /* Estrellas rosas */
    --font-main: 'Outfit', sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-xl: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==== PERSONALIZACIÓN DE SCROLLBAR (Premium Dark) ==== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(193, 155, 103, 0.3); /* Oro Viejo sutil */
    border-radius: 10px;
    border: 2px solid rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: #c19b67; /* Oro Viejo sólido */
}

/* Indicador de Sincronización (Badge Premium) */
.sync-status-badge {
    position: absolute;
    top: 20px;
    right: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    font-size: 0.70rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    transition: var(--transition);
    z-index: 100;
    opacity: 0.6;
}

.sync-status-badge:hover {
    opacity: 1;
    color: rgba(255, 255, 255, 0.8);
}

.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.sync-status-badge.online {
    color: rgba(16, 185, 129, 0.7);
}
.sync-status-badge.online .sync-dot {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.sync-status-badge.offline {
    color: rgba(239, 68, 68, 0.7);
}
.sync-status-badge.offline .sync-dot {
    background-color: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.sync-status-badge.syncing {
    color: rgba(59, 130, 246, 0.7);
}
.sync-status-badge.syncing .sync-dot {
    background-color: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
    animation: dotPulse 0.8s infinite alternate;
}

@keyframes badgePulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@keyframes dotPulse {
    from { transform: scale(0.8); opacity: 0.5; }
    to { transform: scale(1.2); opacity: 1; }
}

/* ==== RESET Y BASE ==== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    overflow: hidden;
}

/* ==== LAYOUT PRINCIPAL ==== */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* ==== SIDEBAR (El Sagrario / Altar de Creación) ==== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 400px;
    background: rgba(15, 23, 42, 0.95); /* Azul Pizarra Profundo Premium */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 2px solid rgba(193, 155, 103, 0.3); /* Borde Oro Viejo sutil */
    display: flex;
    flex-direction: column;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
    z-index: 50000;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    color: #e2e8f0;
}

.sidebar.open {
    transform: translateX(0);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-sidebar {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #94a3b8;
    cursor: pointer;
    transition: var(--transition);
}

.close-sidebar:hover {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border-color: #f472b6;
    transform: rotate(90deg);
}

.app-header {
    padding: 30px 24px;
    border-bottom: 2px solid rgba(193, 155, 103, 0.2);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
}

.app-header h1 {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fde68a, #d97706); /* Gradiente Oro */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.app-header h1 span {
    color: #ec4899;
    background: linear-gradient(135deg, #f472b6, #db2777); /* Gradiente Magenta */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Great Vibes', cursive;
    text-transform: none;
    font-size: 2.2rem;
    margin-left: 8px;
}

.app-header p {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 8px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Vacío Místico */
.empty-state {
    text-align: center;
    padding: 100px 20px;
    color: rgba(15, 23, 42, 0.5);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 2px dashed rgba(193, 155, 103, 0.3);
    margin: 40px auto;
    max-width: 600px;
}

.empty-icon {
    font-size: 5rem;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.4));
    animation: floatingIcon 4s ease-in-out infinite;
}

@keyframes floatingIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.empty-state h3 {
    font-family: 'Marcellus', serif;
    font-size: 1.8rem;
    color: #0f172a;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.empty-state p {
    font-size: 1.1rem;
    color: #475569;
    font-style: italic;
}

.character-form {
    padding: 24px;
    flex-grow: 1;
    overflow-y: auto;
}

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

.form-group label {
    display: block;
    font-family: 'Marcellus', serif;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #c19b67; /* Oro Viejo */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(30, 41, 59, 0.4); /* Slate profundo semi-transparente */
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-sm);
    color: #f8fafc;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ec4899;
    background: rgba(30, 41, 59, 0.6);
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.2);
}

.form-group small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Local Image Configurator */
.local-image-selector {
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(193, 155, 103, 0.3);
    transition: var(--transition);
}

.local-image-selector:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #ec4899;
}

.local-image-selector small {
    color: #94a3b8;
    font-size: 0.8rem;
    margin-bottom: 10px;
    display: block;
}

.local-image-selector input[type="file"] {
    font-size: 0.82rem;
    color: #cbd5e1;
    width: 100%;
    cursor: pointer;
}

/* Rating Stars */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 1.6rem;
    color: rgba(148, 163, 184, 0.3);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0;
}

.star-rating label:not(.zero-star):hover,
.star-rating label:not(.zero-star):hover ~ label:not(.zero-star),
.star-rating input:checked ~ label:not(.zero-star) {
    color: #fbbf24; /* Oro Radiante para estrellas */
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    transform: scale(1.2);
}

.star-rating .zero-star {
    font-size: 1.3rem;
    margin-right: 12px;
    display: flex;
    align-items: center;
    color: rgba(239, 68, 68, 0.3);
}

.star-rating input:checked + .zero-star {
    color: #ef4444;
}

.star-rating .zero-star:hover {
    color: #ef4444;
    transform: scale(1.1);
}

/* Checkboxes (Tags) */
.tags-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-checkbox input {
    display: none;
}

.tag-checkbox span {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(30, 41, 59, 0.3); backdrop-filter: blur(5px);
    border: 1px solid rgba(193, 155, 103, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: var(--transition);
}

.tag-checkbox input:checked + span {
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: white;
    border-color: #ec4899;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
    transform: translateY(-2px);
}

/* Botones */
.btn-primary {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #db2777, #9d174d); /* Magenta Profundo */
    color: white;
    border: 1px solid rgba(251, 191, 36, 0.3); /* Borde Oro */
    border-radius: var(--radius-sm);
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ec4899, #db2777);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(236, 72, 153, 0.3);
    border-color: #fbbf24;
}

.btn-secondary {
    padding: 14px;
    background-color: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.sidebar-footer {
    padding: 24px;
    border-top: 1px solid var(--border-color);
    background-color: #f8fafc;
}

.btn-danger {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-danger:hover {
    background-color: var(--danger-color);
    color: white;
}

/* ==== ÁREA PRINCIPAL (TABLERO) ==== */
/* ==== ÁREA PRINCIPAL (TABLERO DE FANTASÍA MÍSTICA) ==== */
.main-content {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Se desactivará durante el zoom via CSS */
    position: relative;
    /* Fondo Santuario Celestial (Más claro para resaltar personajes) */
    background-color: #f1f3f9;
    background-image: 
        linear-gradient(rgba(240, 244, 250, 0.8), rgba(255, 255, 255, 0.7)), 
        url('https://images.unsplash.com/photo-1519750783826-e2420f4d687f?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    perspective: 1200px;
}

/* Efecto de Polvo Rúnico y Pétalos Mágicos en tonos claros */
.main-content::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        radial-gradient(circle, rgba(251, 191, 36, 0.3) 1px, transparent 1px),
        radial-gradient(circle, rgba(236, 72, 153, 0.2) 2px, transparent 2px);
    background-size: 150px 150px, 200px 200px;
    animation: magicalFloat 45s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes magicalFloat {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    50% { transform: translateY(-50px) scale(1.05) rotate(5deg); }
    100% { transform: translateY(-100px) scale(1) rotate(10deg); }
}

/* Degradado suave para profundidad celestial */
.main-content::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(240, 244, 250, 0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

.board-title-area, .board, .fab-add {
    position: relative;
    z-index: 2;
}

.board-title-area {
    width: 100%;
    padding: 10px 40px;
    text-align: center;
    position: relative;
    margin: 0;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 2px solid #fbbf24;
    border-bottom: 2px solid #fbbf24;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.5),
        inset 0 0 20px rgba(251, 191, 36, 0.05);
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 80px;
    min-height: 220px; /* Suficiente espacio para que no se recorten las siluetas */
}

.title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.muse-icon {
    height: 200px; /* Tamaño real para que luzcan imponentes */
    width: auto;
    mix-blend-mode: screen;
    filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    opacity: 0.95;
    pointer-events: none;
    flex-shrink: 0;
    /* Aseguramos que el fondo sea tratado como negro puro para el blend mode */
    background-color: transparent;
}

.muse-icon.right {
    transform: scaleX(-1);
}

/* Botón Leaderboard en la cabecera */
.leaderboard-btn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), transparent);
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    z-index: 20;
    color: white;
}
.leaderboard-btn:hover {
    transform: scale(1.15) translateY(-2px);
    background: rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.5);
    border-color: #fbbf24;
}

/* Brillo del banner */
.board-title-area::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.main-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-family: 'Cinzel Decorative', cursive;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Gradiente Oro TCG Pulido */
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 50%, #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    position: relative;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); }
}

/* Adornos modernos */
.main-title::before, .main-title::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
    top: 30%;
    transform: translateY(-50%);
}

.main-title::before { left: -80px; }
.main-title::after { right: -80px; }

.main-title span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 12px;
    /* Gradiente Magenta Terciopelo */
    background: linear-gradient(to right, #db2777 0%, #701a75 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.8rem;
    margin-top: 0;
    filter: drop-shadow(0 3px 10px rgba(219, 39, 119, 0.2));
    position: relative;
    padding: 0;
    line-height: 1.1;
}

/* Brillo mágico que recorre el texto */
.main-title span::after {
    content: '';
    position: absolute;
    top: 10%; left: -150%; width: 40%; height: 80%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: rotate(35deg);
    animation: luxuryShimmer 5s infinite;
    filter: blur(5px);
}

@keyframes luxuryShimmer {
    0% { left: -150%; opacity: 0; }
    20% { opacity: 1; }
    40% { left: 150%; opacity: 0; }
    100% { left: 150%; opacity: 0; }
}

.subtitle {
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 8px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 30px;
    
    /* Fondo Cósmico Épico */
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 30%, #4c1d95 70%, #831843 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde Metálico Dual (Aqua/Celestial) */
    border: 1px solid rgba(165, 243, 252, 0.6);
    outline: 1px solid rgba(34, 211, 238, 0.2);
    outline-offset: 3px;
    border-radius: 4px;
    
    /* Texto en Aqua/Cian Eléctrico */
    background-image: linear-gradient(180deg, #ccfbf1, #2dd4bf, #0d9488);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Sombra y Aura de Poder */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    animation: subtitleAura 4s infinite alternate ease-in-out;
}

@keyframes subtitleAura {
    0% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 5px rgba(34, 211, 238, 0.2); }
    100% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(124, 58, 237, 0.5); }
}

/* Ornamentos Laterales */
.subtitle::before, .subtitle::after {
    content: '✦';
    position: absolute;
    color: #22d3ee;
    font-size: 1.4rem;
    opacity: 0.8;
}

.subtitle::before { left: 15px; }
.subtitle::after { right: 15px; }

.board {
    flex-grow: 1;
    padding: 70px 100px 250px 100px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    transform: rotateX(5deg);
    transform-origin: top;
    transition: none;
    position: relative;
    min-height: 80vh;
    
    /* Playmat Integrado (OPACO para evitar desaparición por blending) */
    background: 
        radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0%, rgba(230, 210, 255, 0.4) 40%, rgba(180, 150, 220, 0.3) 100%),
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0 C 70 30, 90 30, 120 60 C 90 90, 70 90, 60 120 C 50 90, 30 90, 0 60 C 30 30, 50 30, 60 0' fill='none' stroke='%238b5cf6' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E"),
        url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    background-color: #faf5ff; /* Opaco total para que no se pierda al quitar transform */
    background-blend-mode: multiply;
    border-radius: 40px;
    margin: 20px;
    box-shadow: 
        inset 0 0 100px rgba(139, 92, 246, 0.2),
        0 10px 40px rgba(0,0,0,0.1);
    border: 3px double rgba(139, 92, 246, 0.3);
}

/* El Playmat ahora es parte del fondo de .board para mayor estabilidad */


/* Estilo Vacío: Altar de Invocación */
.empty-state {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f472b6;
    text-align: center;
    transform: rotateX(-5deg);
}

.empty-icon {
    font-size: 5.5rem;
    margin-bottom: 24px;
    color: #fbbf24;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.6);
    animation: mysticalPulse 3s infinite ease-in-out;
}

@keyframes mysticalPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.1) rotate(5deg); opacity: 1; filter: drop-shadow(0 0 20px #fbbf24); }
}

.empty-state h3 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
    color: #fce7f3;
    text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.empty-state p {
    font-size: 1.1rem;
    color: #f9a8d4;
    max-width: 400px;
    line-height: 1.4;
}

/* ==== BOTON FLOTANTE ==== */
.fab-add {
    position: fixed !important;
    bottom: 76px !important;   /* apilado encima del login-fab */
    right: 24px !important;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 20000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.fab-add:hover {
    background-color: var(--danger-color); /* Pasa a rosa vibrante al hover! Tecnológico y llamativo */
    transform: scale(1.1) rotate(90deg);
    box-shadow: var(--card-shadow-hover);
}

.fab-tinder {
    position: fixed !important;
    bottom: 40px !important;
    left: 40px !important; /* En el otro lado */
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(248, 250, 252, 0.95); /* Blanco hielo semi-transparente */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(253, 41, 123, 0.3);
    z-index: 20000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.fab-tinder:hover {
    background: #ffffff;
    transform: scale(1.15) translateY(-5px); /* Pequeño salto y zoom */
    box-shadow: 0 15px 40px rgba(253, 41, 123, 0.6);
    border-color: #ffffff;
}

/* ==== TARJETAS DE PERSONAJE (FLIP CARDS) ==== */
/* ==== ZOOM GALERÍA (MODAL TCG) ==== */
.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8); /* Oscurecimiento premium */
    backdrop-filter: blur(8px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.zoom-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 90000;
}

/* Modal de Imagen Sola (Preview de Portada en Edición) */
.full-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 40000; /* Por debajo del sidebar (50000) pero por encima del tablero */
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: simpleFadeIn 0.3s ease;
}

.full-image-modal.active {
    display: flex;
}

.full-image-modal img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 60px rgba(0,0,0,1);
    border: 1px solid rgba(255,255,255,0.2);
}

@keyframes simpleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.zoom-active .main-content {
    perspective: none !important;
    overflow: visible !important;
    z-index: auto !important;
    isolation: auto !important;
}

body.zoom-active .board {
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    z-index: auto !important;
}

body.zoom-active .board-title-area {
    z-index: 0 !important; /* Forzar por debajo del overlay y la carta */
    pointer-events: none; /* No estorbar clics al overlay */
}

/* Forzar que el overlay sea visible y capture clics sobre el tablero */
.zoom-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 10000;
}

.character-card.is-zoomed {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 416px !important;
    height: 608px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20000 !important; /* Súper prioridad sobre todo */
    margin: 0 !important;
    box-shadow: 0 0 100px rgba(0,0,0,1), 0 0 40px rgba(231, 166, 26, 0.4);
    cursor: zoom-out;
    pointer-events: auto !important;
}

/* El hueco que deja la carta en el tablero */
.card-placeholder {
    width: 260px;
    height: 380px;
    background: rgba(0,0,0,0.2);
    border: 2px dashed rgba(251, 191, 36, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

/* Evitar inclinación (tilt) durante el zoom, pero PERMITIR el volteo (flip) */
.character-card.is-zoomed .card-inner {
    transform: rotateY(0deg); /* Base sin tilt */
}

.character-card.is-zoomed.is-flipped .card-inner {
    transform: rotateY(180deg) !important; /* Forzar el volteo en zoom */
}

/* Transiciones suaves para el "vuelo" y dimensiones base */
.character-card {
    width: 260px;
    height: 380px;
    perspective: 1500px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, top, left, width, height;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s ease, 
                top 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                left 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El rastro fantasma que dejas atrás en el mazo */
.character-card.dragging {
    opacity: 0.15;
    transform: scale(0.95);
}

/* La tarjeta debajo se hace pequeña y esquiva como una baraja real */
.character-card.drag-over-visual .card-inner {
    transform: scale(0.92) rotate(4deg) translateY(15px);
    box-shadow: none;
    opacity: 0.6;
}
.character-card.is-flipped.drag-over-visual .card-inner {
    transform: rotateY(180deg) scale(0.92) rotate(4deg) translateY(15px);
    opacity: 0.6;
}

/* Contenedor interior que hace el flip y las poses (CSS driven) */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    /* Efecto "muelle" elastico para el movimiento balatro/solitario */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    transform-style: preserve-3d;
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
}

.character-card:hover .card-inner {
    box-shadow: var(--card-shadow-hover);
}

/* Al presionar con el ratón se levanta (Pick UP) rotando sutilmente */
.character-card.is-picked-up .card-inner {
    transform: scale(1.08) rotate(-4deg) translateY(-15px);
    box-shadow: 0 40px 50px -10px rgba(0,0,0,0.4);
}
.character-card.is-flipped.is-picked-up .card-inner {
    transform: rotateY(180deg) scale(1.08) rotate(-4deg) translateY(-15px);
    box-shadow: 0 40px 50px -10px rgba(0,0,0,0.4);
}

.character-card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

/* Frontal y Dorso */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.card-front *, .card-back * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* FRONT: Imagen completa y estilos TCG Gamificados */
.card-front {
    background-color: #1a202c; /* Fondo base oscuro tipo roca */
    transform: rotateY(0deg) translateZ(1px); /* Prevent bleeding on Safari/Chrome */
}

.char-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* Oscurecimiento sutil para destacar estelaridad y nombre encima de imágenes muy brillantes */
.tcg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}

/* ==== TCG: Nombre en Franja TCG (Ancho completo) ==== */
.tcg-title-banner {
    position: absolute;
    bottom: 35px;
    left: 10px;
    right: 10px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    z-index: 5;
    /* Permitir que los ornamentos sobresalgan */
    overflow: visible;
    container-type: inline-size;
}

/* El ornamento flotante central superior */
.tcg-title-banner::after {
    content: var(--ornament-top, '✧');
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--badge-border);
    font-size: 1.2rem;
    text-shadow: 0 0 10px var(--badge-glow);
    z-index: 6;
}

/* Alas / Filigranas Grandes Laterales del Banner */
.tcg-title-banner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%; /* Más ancho que el banner para las alas */
    height: 120px;
    background-image: var(--ornament-svg-l);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    filter: var(--ornament-filter);
    opacity: 0.7;
    pointer-events: none;
    z-index: -1;
}

.card-name {
    font-size: clamp(0.8rem, 14cqw, 1.6rem);
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 2px;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(4px, 2cqw, 10px);
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    
    /* Gradiente Magenta Terciopelo (Identidad del Códice) */
    background: linear-gradient(to right, #db2777 0%, #701a75 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Micro-filigranas pegadas al nombre */
.card-name::before,
.card-name::after {
    content: var(--filigree-icon, '⚜');
    flex-shrink: 0; /* Evitar que el icono se aplaste */
    color: var(--badge-border, #fff);
    font-size: clamp(0.6rem, 3vw, 1rem); 
    opacity: 0.9;
    text-shadow: 0 0 10px var(--badge-glow);
    -webkit-text-fill-color: initial;
    animation: ornamentPulse 4s infinite ease-in-out;
}

@keyframes ornamentPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.card-name::before { transform: scaleX(-1); }

.banner-title {
    font-size: 0.7rem;
    color: #cbd5e1;
    font-weight: 700;
    font-family: var(--font-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

/* ==== TCG: Insignia Inferior Derecha (Estrellas integradas en esquina) ==== */
.tcg-badge-rating {
    position: absolute;
    bottom: -1px;
    right: -1px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    color: var(--badge-border, var(--star-color));
    padding: 6px 12px 4px 14px;
    border-radius: 16px 0 0 0;
    font-size: 1rem;
    font-weight: 900;
    z-index: 5;
    border: 3px solid var(--badge-border, var(--star-color));
    border-right: none;
    border-bottom: none;
    box-shadow: -4px -4px 12px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

/* =======================================
   SISTEMA DE RAREZA TCG (BORDES METÁLICOS)
   ======================================= */
/* Aseguramos que el borde se dibuje hacia adentro sin romper el layout */
.character-card, .card-inner, .card-front, .card-back {
    box-sizing: border-box;
}

/* Rareza Oro (5 Estrellas) */
.character-card.rarity-gold {
    --badge-bg-start: #f59e0b; --badge-bg-mid: #b45309; --badge-bg-end: #451a03;
    --badge-border: #fbbf24; --badge-glow: rgba(251, 191, 36, 0.8);
    --badge-icon: '✦';
    --filigree-icon: '⚜';
    --ornament-top: '👑';
    --ornament-filter: drop-shadow(0 0 10px #fbbf24);
    --ornament-svg-l: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200 70 C 120 70, 80 0, 0 30 C 30 60, 100 100, 200 70' fill='rgba(251,191,36,0.1)' stroke='%23fbbf24' stroke-width='2'/%3E%3Cpath d='M200 70 C 280 70, 320 0, 400 30 C 370 60, 300 100, 200 70' fill='rgba(251,191,36,0.1)' stroke='%23fbbf24' stroke-width='2'/%3E%3C/svg%3E");
    --lore-icon: '🔱'; /* Sello Real del Relato */
}
.character-card.rarity-gold .card-front,
.character-card.rarity-gold .card-back {
    border: 3px double #fbbf24; /* Borde doble como el titulo */
    outline: 2px solid rgba(251, 191, 36, 0.4);
    outline-offset: -8px;
    box-shadow: 
        0 0 30px rgba(251, 191, 36, 0.4), 
        inset 0 0 20px rgba(251, 191, 36, 0.2);
}
.character-card.rarity-gold .tcg-overlay { box-shadow: inset 0 0 50px rgba(251, 191, 36, 0.4); pointer-events: none; }
.character-card.rarity-gold .tcg-badge-rating { border-color: #fbbf24; color: #fbbf24; }
.character-card.rarity-gold .card-name { 
    background: linear-gradient(to bottom, #fef3c7 0%, #fbbf24 50%, #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}
.character-card.rarity-gold .tcg-title-banner { border-color: #fbbf24; }

/* Rareza Plata (4 Estrellas) */
/* Rareza Plata (4 Estrellas) - Plata Cromada Metálica */
.character-card.rarity-silver {
    --badge-bg-start: #cbd5e1; --badge-bg-mid: #64748b; --badge-bg-end: #1e293b;
    --badge-border: #f8fafc; --badge-glow: rgba(248, 250, 252, 0.6);
    --badge-icon: '✧';
    --filigree-icon: '✥';
    --ornament-top: '🌙';
    --ornament-filter: drop-shadow(0 0 10px #60a5fa);
    --ornament-svg-l: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200 50 L 100 10 L 0 50 L 100 90 L 200 50' fill='none' stroke='%23f8fafc' stroke-width='1' opacity='0.7'/%3E%3Cpath d='M200 50 L 300 10 L 400 50 L 300 90 L 200 50' fill='none' stroke='%23f8fafc' stroke-width='1' opacity='0.7'/%3E%3Ccircle cx='200' cy='50' r='3' fill='%23f8fafc'/%3E%3C/svg%3E");
    --lore-icon: '📜'; /* Pergamino de Historia */
}
.character-card.rarity-silver .card-front,
.character-card.rarity-silver .card-back {
    border: 3px double #f8fafc;
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: -8px;
    box-shadow: 
        0 0 25px rgba(248, 250, 252, 0.6), 
        inset 0 0 20px rgba(255, 255, 255, 0.4);
}
.character-card.rarity-silver .tcg-overlay { 
    box-shadow: inset 0 0 50px rgba(148, 163, 184, 0.4); 
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%);
    pointer-events: none; 
}
.character-card.rarity-silver .tcg-badge-rating { border-color: #cbd5e1; color: #f8fafc; background: #334155; }
.character-card.rarity-silver .card-name { 
    background: linear-gradient(to bottom, #f0fdfa 0%, #2dd4bf 50%, #0d9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 950;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.character-card.rarity-silver .tcg-title-banner { border-color: #94a3b8; background: rgba(30, 41, 59, 0.9); }

/* Rareza Bronce (3 Estrellas) */
.character-card.rarity-bronze {
    --badge-bg-start: #ea580c; --badge-bg-mid: #9a3412; --badge-bg-end: #431407;
    --badge-border: #fdba74; --badge-glow: rgba(234, 88, 12, 0.6);
    --badge-icon: '❖';
    --filigree-icon: '❧';
    --ornament-top: '🌿';
    --ornament-filter: drop-shadow(0 0 10px #fdba74);
    --ornament-svg-l: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200 50 C 150 100, 50 100, 0 50 C 50 0, 150 0, 200 50' fill='none' stroke='%23fdba74' stroke-width='1.5'/%3E%3Cpath d='M200 50 C 250 100, 350 100, 400 50 C 350 0, 250 0, 200 50' fill='none' stroke='%23fdba74' stroke-width='1.5'/%3E%3C/svg%3E");
    --lore-icon: '✒️'; /* Pluma de Crónica */
}
.character-card.rarity-bronze .card-front,
.character-card.rarity-bronze .card-back {
    border: 3px double #ed8936;
    outline: 1px solid rgba(237, 137, 54, 0.2);
    outline-offset: -8px;
    box-shadow: 0 0 15px rgba(237, 137, 54, 0.5);
}
.character-card.rarity-bronze .tcg-overlay { box-shadow: inset 0 0 40px rgba(237, 137, 54, 0.4); pointer-events: none; }
.character-card.rarity-bronze .tcg-badge-rating { border-color: #ed8936; color: #ed8936; }
.character-card.rarity-bronze .card-name { 
    background: linear-gradient(to bottom, #fff7ed 0%, #f97316 50%, #9a3412 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}
.character-card.rarity-bronze .tcg-title-banner { border-color: #ed8936; }

/* Categoria Sin Usar (0 Estrellas) - Muted Slate */
.character-card.rarity-unused {
    filter: saturate(0.7);
    --badge-bg-start: #475569; --badge-bg-mid: #1e293b; --badge-bg-end: #020617;
    --badge-border: #94a3b8; --badge-glow: rgba(148, 163, 184, 0.2);
    --badge-icon: '⊘';
    --filigree-icon: '❂';
    --ornament-top: '⛓';
    --ornament-svg-l: none;
    --lore-icon: '🔒'; /* Historia bajo Candado */
}
.character-card.rarity-unused .card-front,
.character-card.rarity-unused .card-back {
    border: 3px double #475569; 
    background-color: #0f172a;
    outline: 1px solid rgba(148, 163, 184, 0.1);
    outline-offset: -8px;
}
.character-card.rarity-unused .card-name { 
    background: linear-gradient(to bottom, #faf5ff 0%, #a855f7 50%, #581c87 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9));
}
.character-card.rarity-unused .tcg-badge-rating { border-color: #475569; color: #64748b; }
.character-card.rarity-unused .tcg-title-banner { border-color: #475569; }

/* Badge "SIN USAR" en la esquina superior derecha */
.status-badge-unused {
    position: absolute;
    top: 20px;
    right: -32px;
    background: linear-gradient(135deg, #64748b 0%, #334155 100%);
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 3px 0;
    width: 120px;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    z-index: 10;
    letter-spacing: 1.5px;
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
}

/* Rareza Arcilla / Tierra (2 Estrellas) - Mate */
.character-card.rarity-clay {
    --badge-bg-start: #78350f; --badge-bg-mid: #451a03; --badge-bg-end: #220e01;
    --badge-border: #d97706; --badge-glow: rgba(217, 119, 6, 0.4);
    --badge-icon: '⟐';
    --filigree-icon: '❦';
    --ornament-top: '🍁';
    --ornament-svg-l: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 80 Q 200 20, 300 80' fill='none' stroke='%2378350f' stroke-width='3'/%3E%3C/svg%3E");
    --lore-icon: '🏺'; /* Reliquia de Antigüedad */
}
.character-card.rarity-clay .card-front,
.character-card.rarity-clay .card-back {
    border: 3px double #78350f; /* Marrón tierra / Caoba */
    background-color: #1a0f0a;
    outline: 1px solid rgba(180, 83, 9, 0.2);
    outline-offset: -8px;
}
.character-card.rarity-clay .card-name { 
    background: linear-gradient(to bottom, #f0fdf4 0%, #22c55e 50%, #166534 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}
.character-card.rarity-clay .tcg-badge-rating { 
    border-color: #78350f !important; 
    color: #d97706 !important; 
}
.character-card.rarity-clay .tcg-title-banner { border-color: #78350f; }

/* Rareza Hierro Oscuro / Acero frío (1 Estrella) - Tonos Azules Metálicos */
.character-card.rarity-iron {
    --badge-bg-start: #2563eb; --badge-bg-mid: #1e3a8a; --badge-bg-end: #0f172a;
    --badge-border: #93c5fd; --badge-glow: rgba(37, 99, 235, 0.6);
    --badge-icon: '◈';
    --filigree-icon: '⚔';
    --ornament-top: '🛡';
    --ornament-svg-l: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 L 400 50' fill='none' stroke='%232563eb' stroke-width='5' opacity='0.3'/%3E%3C/svg%3E");
    --lore-icon: '🗝️'; /* Llave de Archivo */
}
.character-card.rarity-iron .card-front,
.character-card.rarity-iron .card-back {
    border: 3px double #2563eb; /* Azul acero intenso */
    background-color: #081229; /* Azul muy oscuro para el fondo base */
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
    outline: 1px solid rgba(37, 99, 235, 0.2);
    outline-offset: -8px;
}
.character-card.rarity-iron .tcg-overlay { box-shadow: inset 0 0 30px rgba(37, 99, 235, 0.2); pointer-events: none; }
.character-card.rarity-iron .tcg-badge-rating { border-color: #2563eb; color: #60a5fa; }
.character-card.rarity-iron .card-name { 
    background: linear-gradient(to bottom, #eff6ff 0%, #3b82f6 50%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}
.character-card.rarity-iron .tcg-title-banner { border-color: #2563eb; background: rgba(15, 23, 42, 0.95); }

/* Categoría Genérica (Fallback) */
.character-card.rarity-basic {
    --badge-bg-start: #64748b; --badge-bg-mid: #334155; --badge-bg-end: #0f172a;
    --badge-border: #94a3b8; --badge-glow: rgba(148, 163, 184, 0.4);
    --badge-icon: '✦';
    --filigree-icon: '⚜';
    --ornament-top: '✧';
    --ornament-svg-l: none;
    --lore-icon: '📑'; /* Notas de Campo */
}
.character-card.rarity-basic .card-front,
.character-card.rarity-basic .card-back {
    border: 3px double #4b5563; 
    background-color: #111827;
    outline: 1px solid rgba(156, 163, 175, 0.1);
    outline-offset: -8px;
}
.character-card.rarity-basic .card-name { 
    background: linear-gradient(to bottom, #f5f5f5 0%, #737373 50%, #262626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.8));
}
.character-card.rarity-basic .tcg-title-banner { border-color: #4b5563; }

/* BACK: Trasfondo y Tags */
.card-back {
    background-color: #110c11; /* Oscuro onírico */
    background-image: 
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.15), transparent 50%),
        radial-gradient(circle at center, rgba(15, 23, 42, 0.7), rgba(0, 0, 0, 0.95)),
        url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.03)"/></svg>');
    background-size: 100% 100%, 100% 100%, 15px 15px;
    background-position: center;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 24px 24px 70px 24px; /* Aumentamos el padding inferior para proteger la zona de botones */
    border: 1px solid #3f3f46;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.9);
    outline: 1px solid rgba(251, 191, 36, 0.35); /* Borde dorado interior rolero */
    outline-offset: -6px;
}

.card-back-header {
    margin: -24px -24px 20px -24px; /* Pegado al borde superior */
    position: relative;
    display: block;
    z-index: 5;
}

.card-actions {
    position: absolute;
    bottom: 15px; /* De vuelta al pie */
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 100;
}

.action-btn {
    width: 32px; /* Ligeramente más grandes para mejor click habit */
    height: 32px;
    border-radius: 8px; /* Look más moderno tipo app */
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(15, 23, 42, 0.9);
    color: #fbbf24; /* Color oro para los iconos */
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.action-btn:hover {
    background: #fbbf24;
    color: #0f172a;
    transform: scale(1.15) translateY(-2px);
    border-color: #ffffff;
    box-shadow: 0 6px 15px rgba(251, 191, 36, 0.4);
}

.action-btn.delete-btn:hover {
    background: #ef4444;
    border-color: #f87171;
    color: white;
}


.card-back-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.6), transparent);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-back h4 {
    font-size: clamp(0.7rem, 4.5vw, 1.1rem);
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.2; /* Aumentado para evitar cortes */
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    width: 100%;
    word-break: break-word;

    /* === ESTILO PLACA TCG METÁLICA (DINÁMICO POR RAREZA) === */
    background: linear-gradient(180deg, var(--badge-bg-start, #64748b) 0%, var(--badge-bg-mid, #334155) 35%, var(--badge-bg-end, #0f172a) 100%);
    padding: 22px 10px 15px 10px; /* Restaurado el padding normal, ya no desplaza el nombre */
    border-bottom: 2px solid var(--badge-border, #fbbf24);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 14px 14px 0 0; /* Sincronizado con la carta (15px) */    
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.5), 
        inset 0 -3px 6px rgba(0,0,0,0.8), 
        0 4px 10px rgba(0,0,0,0.5);
    
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 2px #000;
    position: relative;
}

/* Iconos de ornamento laterales */
.card-back h4::before,
.card-back h4::after {
    content: var(--badge-icon, '✦');
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--badge-border, #fbbf24);
    font-size: 0.8rem;
    text-shadow: 0 0 5px var(--badge-glow, rgba(251, 191, 36, 0.4));
    opacity: 0.9;
}

.card-back h4::before { left: 8px; }
.card-back h4::after { right: 8px; }

.card-back h5 {
    font-size: 0.9rem;
    color: #e2e8f0; /* Blanco roto */
    font-weight: 400;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-top: 2px;
}

.card-lore {
    display: none; /* Oculto por defecto en vista normal */
    font-size: 0.90rem;
    color: #1a1a1a;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    line-height: 1.5;
    flex-grow: 1;
    overflow-y: auto;
    text-align: left;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(245, 245, 245, 0.85)),
        url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    padding: 18px;
    border-radius: 2px;
    border: 1px solid #000;
    margin: 10px 0 15px 0;
    position: relative;
    backdrop-filter: blur(2px);
    /* El ribete dorado interior */
    outline: 1px solid rgba(184, 134, 11, 0.4);
    outline-offset: -5px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}

.card-lore-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem; /* Más pequeño para no quitar protagonismo */
    margin: 10px 0;
    opacity: 0.6;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
    animation: floatingScroll 3s infinite ease-in-out;
}

.card-lore-placeholder::before {
    content: var(--lore-icon, '📜');
}

@keyframes floatingScroll {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Cuando la tarjeta está MAXIMIZADA (Zoom) */
.character-card.is-zoomed .card-lore {
    display: block;
}

.character-card.is-zoomed .card-lore-placeholder {
    display: none;
}

.character-card.is-zoomed .card-tags {
    flex-grow: 0;
}

/* Adornos de las esquinas (Ribetes) */
.card-lore::before, .card-lore::after {
    content: '✦';
    position: absolute;
    font-size: 0.6rem;
    color: rgba(184, 134, 11, 0.8);
    pointer-events: none;
    z-index: 2;
}

.card-lore::before {
    top: 4px;
    left: 4px;
    text-shadow: 247px 0 rgba(184, 134, 11, 0.8); /* Esto es un truco para duplicar el adorno a la derecha si el ancho fuera fijo, pero mejor usamos after */
}

/* Usamos after para las otras esquinas */
.card-lore::after {
    bottom: 4px;
    right: 4px;
}

/* Añadimos un contenedor extra para las otras dos esquinas si queremos perfección, 
   pero con before/after podemos simularlo con sombras de texto */
.card-lore::before {
    top: 3px;
    left: 4px;
    /* Sombras para posicionar el icono en las 4 esquinas */
    text-shadow: 
        218px 0 rgba(184, 134, 11, 0.8), 
        0 248px rgba(184, 134, 11, 0.8), 
        218px 248px rgba(184, 134, 11, 0.8);
}
/* Al ser flexible el lore, el text-shadow de ancho fijo no funcionará perfecto. 
   Mejor usamos un degradado para el ribete */
   
.card-lore {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(245, 245, 245, 0.85)),
        radial-gradient(circle at 0 0, rgba(184, 134, 11, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 100% 0, rgba(184, 134, 11, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 0 100%, rgba(184, 134, 11, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 100% 100%, rgba(184, 134, 11, 0.4) 2px, transparent 3px);
}

.card-lore::-webkit-scrollbar {
    width: 4px;
}
.card-lore::-webkit-scrollbar-thumb {
    background: rgba(139, 69, 19, 0.3);
    border-radius: 4px;
}

.card-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* Centradas horizontalmente */
    align-content: center; /* Centradas verticalmente */
    flex-grow: 1; /* Ocupa todo el centro */
    padding: 10px 0;
    overflow-y: auto;
}

/* Tags tipo TCG Épico */
.tag-bubble {
    position: relative;
    background: linear-gradient(135deg, #374151 0%, #111827 100%);
    color: #e5e7eb;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.1),
        0 2px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tag-bubble::before {
    content: '◈';
    font-size: 0.6rem;
    color: inherit;
    opacity: 0.7;
}

/* Eliminamos la colita de comic */
.tag-bubble::after {
    display: none;
}

/* Botones y Cabecera de Dorso */
.header-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.action-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
    background-color: transparent;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
}

.edit-btn:hover {
    color: rgba(251, 191, 36, 0.9); /* Dorado en hover */
    transform: scale(1.15);
}

.delete-btn:hover {
    color: rgba(239, 68, 68, 0.9); /* Rojo rubí en hover */
    transform: scale(1.15);
}

/* ==== ANIMACIONES DE CARGA Y ENTRADA (SKELETONS & STAGGER) ==== */

@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* La animación de entrada solo se aplica mediante clase temporal en JS */
.character-card.card-entrance {
    animation: cardEntrance 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* El estado zoom vuelve a su comportamiento original sin interferencias */
.character-card.is-zoomed {
    animation: none !important;
}

/* Skeleton Loading State */
.skeleton-card {
    width: 260px;
    height: 380px;
    background: rgba(30, 41, 59, 0.3); backdrop-filter: blur(5px);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.skeleton-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.skeleton-img {
    height: 70%;
    background: rgba(15, 23, 42, 0.6);
    margin: 10px;
    border-radius: 8px;
}

.skeleton-text {
    height: 15px;
    background: rgba(15, 23, 42, 0.6);
    margin: 10px 20px;
    border-radius: 4px;
    width: 60%;
}

.skeleton-text.short { width: 40%; }

/* Placeholder para imágenes mientras cargan */
.char-img {
    background: radial-gradient(circle at center, rgba(236, 72, 153, 0.1), rgba(15, 23, 42, 0.5));
}


/* ============================================================
   MODAL DE GALERÍA DE PERSONAJE
   ============================================================ */

.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80000;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: galleryFadeIn 0.25s ease;
}

.gallery-modal.active {
    display: flex;
}

@keyframes galleryFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gallery-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 92vh;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: gallerySlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gallerySlideUp {
    from { transform: translateY(30px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Cabecera del modal */
.gallery-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
    flex-shrink: 0;
}

.gallery-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.5px;
}

.gallery-icon {
    color: #fbbf24;
    font-size: 1.1rem;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
    animation: ornamentPulse 4s infinite ease-in-out;
}

.gallery-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.gallery-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    transform: rotate(90deg);
}

/* Layout principal: visor + panel de miniaturas */
.gallery-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px;
    gap: 14px;
}

/* Área del visor principal con botones de navegación */
.gallery-main-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.gallery-main-view {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    aspect-ratio: 3/4;
    max-height: 52vh;
}

#gallery-main-img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
    user-select: none;
}

.gallery-img-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #cbd5e1;
    font-size: 0.75rem;
    font-family: var(--font-main);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.5px;
}

/* Botones de navegación ◀ ▶ */
.gallery-nav-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(15, 23, 42, 0.8);
    color: #fbbf24;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    padding-bottom: 2px;
}

.gallery-nav-btn:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

/* Panel de miniaturas */
.gallery-thumbnails-wrap {
    flex-shrink: 0;
    overflow: hidden;
}

.gallery-thumbnails {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 191, 36, 0.4) transparent;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 4px;
}
.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.4);
    border-radius: 4px;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: #0f172a;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-thumb:hover {
    border-color: rgba(251, 191, 36, 0.5);
    transform: translateY(-3px);
}

.gallery-thumb:hover img {
    transform: scale(1.05);
}

.gallery-thumb.active {
    border-color: #fbbf24;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}

.gallery-thumb.is-cover {
    border-color: rgba(251, 191, 36, 0.4);
}

/* Badge de portada en la miniatura */
.cover-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    background: rgba(251, 191, 36, 0.9);
    color: #0f172a;
    font-size: 0.5rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Barra de acciones: Subir / Eliminar */
.gallery-actions {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.gallery-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
    font-size: 0.85rem;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.gallery-upload-btn:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.25);
    transform: translateY(-1px);
}

.gallery-upload-btn.uploading {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.gallery-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    font-size: 0.85rem;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.gallery-delete-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

.gallery-delete-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Spinner de carga del modal */
.gallery-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-family: var(--font-main);
    z-index: 10;
    border-radius: 20px;
}

.gallery-loading.visible {
    display: flex;
}

.gallery-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(251, 191, 36, 0.15);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: gallerySpinAnim 0.8s linear infinite;
}

@keyframes gallerySpinAnim {
    to { transform: rotate(360deg); }
}

/* Responsive: pantallas pequeñas */
@media (max-width: 600px) {
    .gallery-modal-inner {
        max-height: 95vh;
        border-radius: 14px;
    }

    .gallery-main-view {
        max-height: 42vh;
    }

    .gallery-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
    }

    .gallery-thumb {
        width: 54px;
        height: 72px;
    }

    .gallery-upload-btn,
    .gallery-delete-btn {
        padding: 7px 12px;
        font-size: 0.78rem;
    }
}

/* ============================================================
   GALERÍA: ESTADOS DE DRAG & DROP
   ============================================================ */

/* Cursor "agarrar" en miniaturas arrastrables */
.gallery-thumb[draggable="true"] {
    cursor: grab;
}
.gallery-thumb[draggable="true"]:active {
    cursor: grabbing;
}

/* Miniatura que se está arrastrando: semi-transparente */
.gallery-thumb.gallery-thumb-dragging {
    opacity: 0.35;
    transform: scale(0.92);
    border-color: var(--gallery-accent, #a855f7) !important;
    box-shadow: 0 0 0 2px var(--gallery-accent, #a855f7);
    transition: opacity 0.15s, transform 0.15s;
}

/* Miniatura objetivo donde se va a soltar */
.gallery-thumb.gallery-thumb-dragover {
    border: 2px solid #f0abfc !important;
    box-shadow: 0 0 0 3px rgba(240, 171, 252, 0.45), 0 0 16px rgba(168, 85, 247, 0.5);
    transform: scale(1.08); /* Ligeramente más grande */
    transition: transform 0.12s, box-shadow 0.12s;
}

/* Indicador de inserción: línea a la izquierda de la miniatura destino */
.gallery-thumb.gallery-thumb-dragover::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 10%;
    height: 80%;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #f0abfc, #a855f7);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.8);
}

/* ============================================================
   MODO TINDER (VOTACIÓN)
   ============================================================ */

/* Botones y Header para iniciar Tinder mode */
.btn-tinder {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-tinder:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
}

/* =============== MODAL DE TINDER =============== */
.tinder-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(15px);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Avoid scrolls when swiping */
}

.tinder-modal.active {
    display: flex;
    animation: fadeInModal 0.3s ease forwards;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tinder-header {
    position: absolute;
    top: 30px;
    width: 100%;
    text-align: center;
}

.tinder-logo {
    font-size: 2.6rem;
    color: #fff0f5; /* Lavender blush para más delicadeza */
    font-weight: 800;
    margin-bottom: 2px;
    font-family: 'Cinzel', serif; /* Manteniendo temática premium */
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(236, 72, 153, 0.6); /* Resplandor rosado íntimo */
}

.tinder-logo span {
    font-style: italic;
    background: linear-gradient(135deg, #f43f5e, #a855f7); /* Transición rosa a violeta más intensa */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.tinder-subtitle {
    color: #fce7f3; /* Rosa pálido suave */
    font-size: 1.05rem;
    font-style: italic;
    letter-spacing: 1px;
    margin-top: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tinder-close {
    position: absolute;
    top: -10px;
    right: 30px;
    background: rgba(30, 41, 59, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tinder-close:hover {
    background: rgba(239, 68, 68, 0.6);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* Dispositivo Blanco (Fondo tipo Tinder App) */
.tinder-device {
    background: #f8fafc; /* Blanco muy sutil, gris clarito */
    border-radius: 30px;
    padding: 20px;
    width: 400px;
    height: 720px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 50px;
}

/* Contenedor Principal (Donde van las tarjetas) */
.tinder-container {
    position: relative;
    width: 360px;
    height: 570px; /* Tarjeta ajustada al device */
    margin: 5px auto 15px;
    perspective: 1500px; /* Profundidad para 3D */
}

#tinder-card-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Tarjeta de Votación */
.tinder-card {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform-origin: center bottom;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    display: block; /* Contenedor de bloque, no flex */
}

.tinder-card img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    pointer-events: none;
}

.tinder-card-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 80px 20px 20px; /* Más padding superior para el gradiente suave */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
    text-align: left; /* Estilo clásico de Tinder (texto a la izquierda) */
    z-index: 2;
}

.tinder-card-info h3 {
    font-size: 2.2rem;
    color: white;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
}

.tinder-card-info p {
    font-size: 1.1rem;
    color: #e2e8f0;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-weight: 600;
}

/* =============== ANIMACIONES SWIPE =============== */
.swipe-left {
    transform: translateX(-150%) rotate(-25deg) !important;
    opacity: 0;
}

.swipe-right {
    transform: translateX(150%) rotate(25deg) !important;
    opacity: 0;
}

/* =============== CONTROLES (BOTONES LIKE/PASS) =============== */
.tinder-controls {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 10px;
}

.tinder-btn.pass,
.tinder-btn.like {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombra suavizada para fondo blanco */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
    background: white; /* Fondos de botones blancos sobre fondo gris claro */
}

.tinder-btn.pass {
    color: #f43f5e; /* Rosa rojizo vibrante */
    border: 2px solid rgba(244, 63, 94, 0.2);
}

.tinder-btn.like {
    color: #10b981; /* Esmeralda */
    border: 2px solid rgba(16, 185, 129, 0.2);
}

.tinder-btn.pass:hover,
.tinder-btn.like:hover {
    transform: scale(1.15);
}

.tinder-btn.pass:hover {
    background: rgba(244, 63, 94, 0.1);
    box-shadow: 0 0 25px rgba(244, 63, 94, 0.4);
    border-color: #f43f5e;
}

.tinder-btn.like:hover {
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
    border-color: #10b981;
}

/* =============== ESTADO VACÍO =============== */
.tinder-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #f8fafc;
    border-radius: 30px;
}

.tinder-empty .empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.tinder-empty h3 {
    color: #0f172a; /* Texto oscuro para fondo blanco */
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-family: var(--font-fancy, serif);
}

.tinder-empty p {
    color: #64748b; /* Texto gris oscuro para fondo blanco */
    margin-bottom: 25px;
    max-width: 80%;
}

.tinder-empty .btn-system {
    padding: 10px 20px;
    font-size: 1rem;
}


/* ============================================================
   SISTEMA DE FILTROS INTELIGENTES
   ============================================================ */

/* 1. Píldoras de Filtro (Smart Tags) */
.filter-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    margin: 10px 0 20px 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 50px;
    align-items: center;
}

.filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(30, 41, 59, 0.8);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    user-select: none;
    font-family: var(--font-main);
}

.filter-pill:hover {
    background: rgba(51, 65, 85, 0.9);
    color: white;
    transform: translateY(-2px);
}

.filter-pill.active {
    background: var(--color-accent); /* Turquesa/Cian premium */
    color: #0f172a;
    border-color: var(--color-accent);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

.filter-pill.clear {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.filter-pill.clear:hover {
    background: rgba(239, 68, 68, 0.4);
}


/* 3. Botón de Exportación en la carta */
.download-btn {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

.download-btn:hover {
    background: #10b981 !important;
    color: #0f172a !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}



 /* 3. Estilos para el Backup (Botones de Sistema) */
.system-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-system {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 41, 59, 0.5);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-system:hover {
    background: rgba(51, 65, 85, 0.8);
    color: white;
    transform: translateY(-2px);
}

.btn-export {
    border-color: rgba(34, 211, 238, 0.3);
}

.btn-import {
    border-color: rgba(168, 85, 247, 0.3);
}

/* =============== FILTROS (BARRA MÁGICA FULL-WIDTH) =============== */
.filter-pills-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center; /* Centrados, lado a lado */
    gap: 10px;
    width: 100%;
    padding: 14px 40px;
    margin: 0; /* Sin espacio — pegado a la cabecera */

    /* Barra anclada debajo de la cabecera */
    position: sticky;
    top: 0;
    z-index: 100;

    /* Fondo espectacular: degradado horizontal tipo aurora */
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(88, 18, 88, 0.9) 25%,
        rgba(190, 24, 93, 0.85) 50%,
        rgba(88, 18, 88, 0.9) 75%,
        rgba(15, 23, 42, 0.95) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Bordes que brillan */
    border-top: 1px solid rgba(244, 114, 182, 0.4);
    border-bottom: 1px solid rgba(244, 114, 182, 0.4);

    /* Sombra espectacular hacia abajo */
    box-shadow:
        0 8px 32px rgba(190, 24, 93, 0.3),
        0 2px 6px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.1);

    /* Brillo de borde interior superior */
    outline: none;
    overflow: hidden; /* Sin scroll */
}

/* Efecto de partículas decorativas a los lados */
.filter-pills-container::before,
.filter-pills-container::after {
    content: '✦';
    font-size: 1rem;
    color: rgba(244, 114, 182, 0.5);
    flex-shrink: 0;
    animation: sparkle 3s ease-in-out infinite;
}
.filter-pills-container::after {
    animation-delay: 1.5s;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.filter-pill {
    /* Cada cápsula ocupa el espacio disponible equitativamente */
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    background: transparent;
    color: rgba(252, 231, 243, 0.7); /* Rosa pálido tenue */
    border: 1px solid rgba(244, 114, 182, 0.25);
    border-radius: 40px;
    padding: 7px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: var(--font-main, sans-serif);
    text-transform: capitalize;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

/* Shimmer interno en hover */
.filter-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    border-radius: 40px;
}

.filter-pill:hover::before {
    transform: translateX(100%);
}

.filter-pill:hover {
    transform: translateY(-2px);
    background: rgba(244, 114, 182, 0.2);
    border-color: rgba(244, 114, 182, 0.7);
    color: #fff;
    box-shadow: 0 4px 16px rgba(244, 114, 182, 0.35);
}

.filter-pill.active {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #c026d3 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.2),
        0 4px 20px rgba(244, 63, 94, 0.6),
        inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-1px);
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.filter-pill.clear {
    flex: 0 0 auto; /* No crece, se queda a su tamaño natural */
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 6px 14px;
}

.filter-pill.clear:hover {
    background: linear-gradient(135deg, #ff0844 0%, #ff4757 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(255, 8, 68, 0.5);
    transform: translateY(-2px);
}

/* ============================================================
   AUTH: UTILIDADES DE VISIBILIDAD
   ============================================================ */

.hidden {
    display: none !important;
}

.auth-hidden {
    display: none !important;
}

/* ============================================================
   AUTH: BOTÓN DE LOGIN FLOTANTE (🔒)
   ============================================================ */

.login-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
    color: rgba(255, 255, 255, 0.3);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: none;
    line-height: 1;
    padding: 0;
}

.login-fab:hover {
    background: rgba(168, 85, 247, 0.25);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
    transform: scale(1.1);
}

.login-fab.is-logged {
    color: rgba(52, 211, 153, 0.6);
    border-color: rgba(52, 211, 153, 0.2);
    cursor: default;
}

.login-fab.is-logged:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
    transform: scale(1);
}

/* ============================================================
   AUTH: MODAL DE LOGIN (glassmorphism)
   ============================================================ */

.login-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
}

.login-modal.active {
    display: flex;
    animation: loginModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes loginModalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.login-modal-inner {
    background: linear-gradient(
        135deg,
        rgba(30, 27, 75, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 100%
    );
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.login-modal-icon {
    font-size: 2.5rem;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.5));
}

.login-modal-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: #e2e8f0;
    margin: 0;
    letter-spacing: 1px;
}

.login-modal-subtitle {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.7);
    margin: 0;
    line-height: 1.4;
}

.login-field {
    width: 100%;
}

.login-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.25);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    font-family: var(--font-main, sans-serif);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s ease;
}

.login-field input::placeholder {
    color: rgba(148, 163, 184, 0.45);
}

.login-field input:focus {
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(30, 27, 75, 0.5);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.login-submit-btn {
    width: 100%;
    padding: 13px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.login-error {
    font-size: 0.82rem;
    color: #f87171;
    min-height: 1.2em;
    margin: 0;
    font-weight: 500;
}

.login-cancel {
    background: none;
    border: none;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    font-family: var(--font-main, sans-serif);
}

.login-cancel:hover {
    color: rgba(148, 163, 184, 0.85);
}

.login-toggle-mode {
    margin-top: 10px;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
}

.login-toggle-mode a {
    color: #ec4899;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.login-toggle-mode a:hover {
    color: #f472b6;
    border-bottom-color: #f472b6;
    text-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}

/* Animación para el cambio de campos */
@keyframes fieldFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-field.fade-in {
    animation: fieldFadeIn 0.3s ease forwards;
}

/* ============================================================
   AUTH: BARRA DE ADMIN (franja superior)
   ============================================================ */

.admin-bar {
    position: fixed;
    top: 52px;        /* justo debajo del indicador Supabase (top: 20px + ~32px altura) */
    right: 20px;
    left: auto;
    bottom: auto;
    z-index: 8500;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    font-family: var(--font-main, sans-serif);
    animation: adminBarSlideIn 0.25s ease forwards;
}

@keyframes adminBarSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#admin-bar-user {
    font-size: 0.70rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 4px 8px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

#admin-bar-user:hover {
    opacity: 1;
    color: rgba(255, 255, 255, 0.8);
}

.admin-bar-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
}

.admin-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.70rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-main, sans-serif);
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0.6;
}

.admin-bar-btn:hover {
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

.admin-bar-btn.logout {
    color: rgba(252, 165, 165, 0.5);
}

.admin-bar-btn.logout:hover {
    color: rgba(254, 202, 202, 0.9);
    background: rgba(239, 68, 68, 0.08);
}

/* Eliminar compensación de padding-top (la barra ya no es una franja superior) */
/* body:has(.admin-bar:not(.hidden)) .app-container { padding-top: 44px; } */

/* ============================================================
   DASHBOARD: MODAL PRINCIPAL
   ============================================================ */

.dashboard-modal {
    position: fixed;
    inset: 0;
    z-index: 99000;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    animation: dashboardFadeIn 0.3s ease forwards;
}

@keyframes dashboardFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dashboard-modal.hidden {
    display: none !important;
}

.dashboard-inner {
    width: 100%;
    max-width: 900px;
    background: linear-gradient(
        160deg,
        rgba(20, 17, 50, 0.98) 0%,
        rgba(15, 23, 42, 0.99) 100%
    );
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    margin: auto;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
    background: rgba(168, 85, 247, 0.05);
}

.dashboard-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-header-icon {
    font-size: 1.5rem;
}

.dashboard-header h2 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.1rem;
    color: #e9d5ff;
    margin: 0;
    letter-spacing: 1px;
}

.dashboard-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(148, 163, 184, 0.7);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.dashboard-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    transform: rotate(90deg);
}

.dashboard-content {
    padding: 24px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================================
   DASHBOARD: STATS ROW (tarjetas numéricas)
   ============================================================ */

.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dashboard-stat-card {
    background: rgba(168, 85, 247, 0.07);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.dashboard-stat-card:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
}

.dashboard-stat-num {
    font-size: 1.9rem;
    font-weight: 800;
    color: #e9d5ff;
    font-family: var(--font-main, sans-serif);
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #f0abfc, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-stat-label {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--font-main, sans-serif);
}

/* ============================================================
   DASHBOARD: SECTION TITLE
   ============================================================ */

.dashboard-section-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.9rem;
    color: rgba(192, 132, 252, 0.8);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(168, 85, 247, 0.1);
}

/* ============================================================
   DASHBOARD: RANKING CARDS (tarjeta con foto + stats)
   ============================================================ */

.dashboard-ranking {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-rank-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.dashboard-rank-card:hover {
    background: rgba(30, 27, 75, 0.6);
    border-color: rgba(168, 85, 247, 0.25);
    transform: translateX(4px);
}

.dashboard-rank-card.no-votes {
    opacity: 0.45;
    filter: grayscale(0.5);
}

.dashboard-rank-medal {
    font-size: 1.5rem;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.dashboard-rank-avatar {
    width: 64px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(168, 85, 247, 0.25);
    background: rgba(15, 23, 42, 0.8);
}

.dashboard-rank-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.dashboard-rank-card:hover .dashboard-rank-avatar img {
    transform: scale(1.05);
}

.dashboard-rank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-rank-name {
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
    font-family: 'Marcellus', serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-rank-meta {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.6);
    font-family: var(--font-main, sans-serif);
}

/* Barra de votos like/pass */
.dashboard-vote-bar-wrap {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.6);
    gap: 1px;
    margin-top: 2px;
}

.dashboard-vote-bar-like {
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, #ec4899);
    border-radius: 3px 0 0 3px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.dashboard-vote-bar-pass {
    height: 100%;
    background: rgba(100, 116, 139, 0.4);
    border-radius: 0 3px 3px 0;
    transition: width 0.6s ease;
    min-width: 2px;
}

.dashboard-rank-pct {
    font-size: 0.72rem;
    color: rgba(244, 63, 94, 0.7);
    font-weight: 600;
    font-family: var(--font-main, sans-serif);
    letter-spacing: 0.3px;
}

/* ============================================================
   DASHBOARD: HISTORIAL DE VOTOS
   ============================================================ */

.dashboard-historial {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.3) transparent;
    padding-right: 4px;
}

.dashboard-historial::-webkit-scrollbar {
    width: 4px;
}
.dashboard-historial::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 4px;
}

.dashboard-vote-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid transparent;
    font-family: var(--font-main, sans-serif);
    transition: background 0.15s;
}

.dashboard-vote-row.like {
    border-color: rgba(244, 63, 94, 0.12);
}

.dashboard-vote-row.pass {
    border-color: rgba(100, 116, 139, 0.12);
}

.dashboard-vote-avatar {
    width: 30px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(30, 41, 59, 0.5);
}

.dashboard-vote-name {
    flex: 1;
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-vote-choice {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    flex-shrink: 0;
}

.dashboard-vote-row.like .dashboard-vote-choice {
    color: #fb7185;
}

.dashboard-vote-time {
    font-size: 0.7rem;
    color: rgba(100, 116, 139, 0.6);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   DASHBOARD: RESEÑAS DE FANS
   ============================================================ */

.dashboard-resenas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.3) transparent;
    padding-right: 4px;
    margin-bottom: 20px;
}

.dashboard-resenas::-webkit-scrollbar {
    width: 4px;
}
.dashboard-resenas::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 4px;
}

.dashboard-resena-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(168, 85, 247, 0.12);
    font-family: var(--font-main, sans-serif);
}

.dashboard-resena-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-resena-user {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
}

.dashboard-resena-user strong {
    color: #a855f7;
}

.dashboard-resena-time {
    font-size: 0.7rem;
    color: rgba(100, 116, 139, 0.6);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.dashboard-resena-texto {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.btn-delete-resena {
    background: transparent;
    border: none;
    color: #f43f5e;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s, transform 0.2s;
}

.btn-delete-resena:hover {
    background: rgba(244, 63, 94, 0.1);
    transform: scale(1.1);
}

/* ============================================================
   DASHBOARD: ESTADOS ESPECIALES
   ============================================================ */

.dashboard-loading {
    text-align: center;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    padding: 40px;
    font-family: var(--font-main, sans-serif);
}

.dashboard-error {
    color: #f87171;
    font-size: 0.85rem;
    padding: 20px;
    text-align: center;
    font-family: var(--font-main, sans-serif);
}

.dashboard-empty {
    color: rgba(100, 116, 139, 0.6);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
    font-style: italic;
    font-family: var(--font-main, sans-serif);
}

/* ============================================================
   GESTIÓN DE USUARIOS
   ============================================================ */
.users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.user-item:hover {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(168, 85, 247, 0.2);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-username {
    font-family: var(--font-main, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: #f8fafc;
}

.user-role {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.user-role.admin {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
}
.user-role.viewer {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.user-actions {
    display: flex;
    gap: 8px;
}

.btn-user-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.btn-user-action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.btn-user-action.delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Formulario de Usuario */
.user-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.user-form-title {
    font-family: var(--font-secondary, serif);
    font-size: 1.1rem;
    color: #c4b5fd;
    margin: 0 0 10px 0;
}

.user-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-form-group label {
    font-family: var(--font-main, sans-serif);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.user-form-group input,
.user-form-group select {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: #f8fafc;
    font-family: var(--font-main, sans-serif);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.user-form-group input:focus,
.user-form-group select:focus {
    border-color: rgba(168, 85, 247, 0.5);
}

.user-form-group select option {
    background: #0f172a;
    color: #f8fafc;
}

.user-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.user-form-actions button {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-main, sans-serif);
    transition: all 0.2s ease;
}

.btn-save-user {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #fff;
}
.btn-save-user:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 1) 0%, rgba(139, 92, 246, 1) 100%);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.btn-cancel-user {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}
.btn-cancel-user:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

/* Rol Fan Badge */
.user-role.fan {
    background: rgba(236, 72, 153, 0.15); /* Rosa sutil */
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

/* ============================================================
   REVIEWS MODAL (Estilo Post-it)
   ============================================================ */

.reviews-modal {
    position: fixed;
    inset: 0;
    z-index: 99000;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.reviews-modal.active {
    display: flex;
    animation: dashboardFadeIn 0.3s ease forwards;
}

.reviews-modal-inner {
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%); /* Amarillo Post-it */
    color: #3f3f46;
    border-radius: 4px;
    box-shadow: 
        5px 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.05);
    position: relative;
    max-width: 500px;
    width: 100%;
    padding: 30px;
    font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif; /* Fuente tipo manuscrita */
    transform: rotate(-2deg); /* Ligeramente torcido */
}

/* Pliegue superior del post-it */
.reviews-modal-inner::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent rgba(0,0,0,0.1) transparent transparent;
    z-index: 10;
}

.reviews-modal-inner h2 {
    font-family: inherit;
    font-size: 1.8rem;
    color: #18181b;
    border-bottom: 2px dashed rgba(0,0,0,0.2);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviews-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #52525b;
    cursor: pointer;
    transition: transform 0.2s;
}
.reviews-close:hover {
    transform: scale(1.2) rotate(90deg);
    color: #ef4444;
}

.reviews-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 10px;
}

.review-postit {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.review-postit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #52525b;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 4px;
}

.review-author { font-weight: bold; }
.review-date { font-size: 0.75rem; }

.review-text {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #27272a;
}

.review-delete-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
}
.review-delete-btn:hover {
    transform: scale(1.1);
}

.reviews-form-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 4px;
    border: 1px dashed rgba(0,0,0,0.2);
}

.reviews-textarea {
    width: 100%;
    height: 80px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    font-family: inherit;
    font-size: 1.1rem;
    color: #27272a;
    resize: none;
    outline: none;
}
.reviews-textarea:focus {
    border-bottom-color: #ec4899;
}

.reviews-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviews-char-count {
    font-size: 0.85rem;
    color: #52525b;
}

.reviews-submit {
    background: #ec4899;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.reviews-submit:hover {
    background: #db2777;
    transform: translateY(-2px);
}

.reviews-error {
    color: #ef4444;
    font-size: 0.9rem;
    text-align: right;
}

/* Cooldown Message en Tinder */
.tinder-cooldown-msg {
    display: none;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(236, 72, 153, 0.4);
    color: #e2e8f0;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.95rem;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(236, 72, 153, 0.15);
}
.tinder-cooldown-msg strong {
    color: #f472b6;
    font-weight: 800;
}

/* ============================================================
   DASHBOARD: RANKING DE ACTIVIDAD Y DETALLE ENRIQUECIDO
   ============================================================ */

.dashboard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(15, 23, 42, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 20px;
    flex-wrap: wrap;
}

.dashboard-filters {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 8px;
}

.filter-btn {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.05);
}

.filter-btn.active {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.dashboard-search {
    flex: 1;
    min-width: 200px;
}

.dashboard-search input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 16px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.3s ease;
}

.dashboard-search input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.dashboard-activity-table-wrap {
    margin-top: 15px;
    margin-bottom: 30px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.dashboard-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-main, sans-serif);
}

.dashboard-activity-table th {
    background: rgba(30, 41, 59, 0.5);
    padding: 12px 16px;
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-activity-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    font-size: 0.85rem;
    color: #e2e8f0;
}

.dashboard-activity-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-activity-table tr:last-child td {
    border-bottom: none;
}

.activity-score {
    font-weight: 700;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Badges de Rol */
.role-badge {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    line-height: 1;
}

.role-badge.fan {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.role-badge.admin {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.role-badge.editor {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.role-badge.mini {
    font-size: 0.55rem;
    padding: 1px 4px;
    vertical-align: middle;
    margin-left: 5px;
}

/* Detalle de Votos en Ranking */
.char-votes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.3) transparent;
}

.char-votes-list::-webkit-scrollbar {
    width: 4px;
}
.char-votes-list::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 4px;
}

.vote-log-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.vote-log-item.like {
    border-left-color: #f43f5e;
    background: rgba(244, 63, 94, 0.05);
}

.vote-log-item.pass {
    border-left-color: #64748b;
}

.vote-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.vote-icon {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.vote-username {
    font-weight: 600;
    font-size: 0.8rem;
    color: #f1f5f9;
}

.vote-timestamp {
    font-size: 0.65rem;
    color: #64748b;
    font-family: monospace;
    margin-left: auto;
}

/* --- CONTROLES DE LA GALERÍA (FILTROS Y ORDEN) --- */
.gallery-controls-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 80px;
    background: linear-gradient(to right, transparent, rgba(251, 191, 36, 0.05), transparent);
    border-top: 1px solid rgba(251, 191, 36, 0.1);
    border-bottom: 1px solid rgba(251, 191, 36, 0.1);
    margin: 10px 0 40px 0;
    box-sizing: border-box;
    z-index: 100;
}

.sort-container {
    display: flex;
    flex-direction: row; /* Cambiado a row para que sea más estilizado */
    align-items: center;
    gap: 20px;
}

.sort-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fbbf24; /* Dorado Premium */
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    opacity: 0.8;
}

.premium-dropdown {
    position: relative;
    width: 240px;
    z-index: 100;
}

.dropdown-trigger {
    height: 54px; /* Un poco más grande para presencia */
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(251, 191, 36, 0.3); /* Borde dorado sutil */
    border-radius: 16px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(251, 191, 36, 0.1);
}

.dropdown-trigger:hover {
    background: rgba(15, 23, 42, 0.95);
    border-color: #fbbf24;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.3);
}

.trigger-icon {
    color: #fbbf24;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5));
}

.premium-dropdown.open .trigger-icon {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: calc(100% + 12px);
    right: 0; /* Alinear con el borde derecho */
    width: 260px; /* Un poco más ancho que el trigger */
    background: rgba(10, 15, 28, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 20px;
    list-style: none;
    padding: 10px;
    margin: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(251, 191, 36, 0.15);
    animation: dropdownPopIn 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: top right;
}

@keyframes dropdownPopIn {
    from { opacity: 0; transform: scale(0.9) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.premium-dropdown.open .dropdown-options {
    display: flex;
}

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

.dropdown-options li {
    padding: 12px 18px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.dropdown-options li:hover {
    background: rgba(251, 191, 36, 0.15);
    color: #ffffff; /* Asegurar blanco en hover */
    padding-left: 22px;
}

.dropdown-options li.active {
    background: rgba(251, 191, 36, 0.3) !important;
    color: #ffffff !important; /* Blanco sólido para máximo contraste */
    font-weight: 800;
    box-shadow: inset 4px 0 0 #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Efecto visual en el board cuando el orden es automático */
.board.sorting-active {
    position: relative;
}

.board.sorting-active::before {
    content: 'Orden automático activo - Reordenamiento manual desactivado';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    pointer-events: none;
}
    cursor: pointer;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.dropdown-options li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding-left: 20px;
}

.dropdown-options li.active {
    background: rgba(255, 114, 159, 0.15);
    color: var(--accent-pink);
    font-weight: 600;
}

/* Estado visual del tablero al ordenar */
.board.sorting-active .character-card {
    cursor: default !important;
}

.board.sorting-active .character-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 45px rgba(255, 114, 159, 0.15);
}

/* ====================================================
   SISTEMA DE PROPUESTAS DE MUSAS — FAN PROPOSAL SYSTEM
   ==================================================== */

/* --- FAB para fans: "Proponer Musa" --- */
.fab-propuesta {
    position: fixed;
    bottom: 170px;
    right: 30px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 9000;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(135deg, #7c3aed, #c026d3);
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.5), 0 2px 8px rgba(0,0,0,0.3);
}
.fab-propuesta:hover {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 12px 32px rgba(192, 38, 211, 0.6), 0 4px 12px rgba(0,0,0,0.3);
}
.fab-propuesta.auth-hidden { display: none !important; }
.fab-propuesta-icon {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
    animation: fabSparkle 3s infinite alternate ease-in-out;
}
@keyframes fabSparkle {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.15) rotate(15deg); }
}

/* --- Badge de notificación en admin bar --- */
.propuestas-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f43f5e, #dc2626);
    color: #fff;
    margin-left: 5px;
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.7);
    animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    vertical-align: middle;
}
@keyframes badgePop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Modal de propuesta (fan) --- */
.propuesta-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}
.propuesta-modal.active {
    display: flex;
    animation: fadeInOverlay 0.25s ease forwards;
}
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
.propuesta-modal-inner {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 15, 60, 0.98));
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(124, 58, 237, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: slideUpModal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUpModal {
    from { transform: translateY(40px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.propuesta-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.25);
}
.propuesta-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.5px;
}
.propuesta-modal-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.6));
}
.propuesta-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.propuesta-close:hover {
    background: rgba(244, 63, 94, 0.2);
    border-color: #f43f5e;
    color: #f43f5e;
    transform: rotate(90deg);
}

/* --- Tabs --- */
.propuesta-tabs {
    display: flex;
    padding: 12px 24px 0;
    gap: 4px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
}
.propuesta-tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}
.propuesta-tab:hover { color: #a78bfa; background: rgba(124, 58, 237, 0.06); }
.propuesta-tab.active {
    color: #c4b5fd;
    border-bottom-color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    font-weight: 600;
}
.propuesta-tab-content { display: none; padding: 20px 24px 24px; }
.propuesta-tab-content.active {
    display: block;
    animation: tabFadeIn 0.2s ease forwards;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.propuesta-hint {
    font-size: 0.88rem;
    color: #94a3b8;
    font-style: italic;
    margin-bottom: 18px;
    line-height: 1.5;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-left: 3px solid #7c3aed;
    border-radius: 0 8px 8px 0;
}
.propuesta-field { margin-bottom: 18px; }
.propuesta-field label {
    display: block;
    font-family: 'Marcellus', serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.propuesta-textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 10px;
    color: #e2e8f0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 120px;
    transition: all 0.2s ease;
    line-height: 1.5;
}
.propuesta-textarea:focus {
    outline: none;
    border-color: #7c3aed;
    background: rgba(30, 41, 59, 0.7);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}
.propuesta-char-counter {
    text-align: right;
    font-size: 0.78rem;
    color: #475569;
    margin-top: 4px;
    transition: color 0.2s;
}
.propuesta-char-counter.near-limit { color: #f59e0b; }
.propuesta-char-counter.at-limit { color: #ef4444; font-weight: 700; }

/* Drop zone */
.propuesta-drop-zone {
    position: relative;
    border: 2px dashed rgba(124, 58, 237, 0.4);
    border-radius: 12px;
    min-height: 140px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s ease;
    background: rgba(30, 41, 59, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.propuesta-drop-zone:hover,
.propuesta-drop-zone.drag-over {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.2);
}
.propuesta-drop-zone.has-image { border-color: rgba(34, 197, 94, 0.5); border-style: solid; }
.propuesta-drop-inner { text-align: center; padding: 24px; pointer-events: none; }
.propuesta-drop-icon { font-size: 2.5rem; margin-bottom: 8px; opacity: 0.6; }
.propuesta-drop-text { font-size: 0.95rem; color: #94a3b8; font-weight: 500; margin-bottom: 4px; }
.propuesta-drop-sub { font-size: 0.8rem; color: #475569; }
.propuesta-preview-img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; display: block; }
.propuesta-remove-img {
    position: absolute; top: 8px; right: 8px;
    background: rgba(239, 68, 68, 0.85); border: none; border-radius: 50%;
    width: 28px; height: 28px; color: white; font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.propuesta-remove-img:hover { background: #dc2626; transform: scale(1.1); }
.propuesta-error { font-size: 0.85rem; color: #f87171; margin-bottom: 10px; min-height: 1.2em; font-weight: 500; }
.propuesta-form-footer { display: flex; justify-content: flex-end; margin-top: 6px; }
.propuesta-submit-btn {
    padding: 12px 28px;
    background: linear-gradient(135deg, #7c3aed, #c026d3);
    border: none; border-radius: 10px; color: #fff;
    font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}
.propuesta-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(192, 38, 211, 0.5); }
.propuesta-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.propuesta-loading { text-align: center; color: #64748b; padding: 30px; font-size: 0.9rem; }

/* Mis propuestas */
.mis-propuestas-list { display: flex; flex-direction: column; gap: 14px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.mis-propuestas-empty { text-align: center; color: #475569; padding: 40px 20px; font-size: 0.9rem; }
.mis-propuesta-card { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 12px; overflow: hidden; transition: border-color 0.2s; }
.mis-propuesta-card:hover { border-color: rgba(124, 58, 237, 0.3); }
.mis-propuesta-card-body { padding: 14px 16px; }
.mis-propuesta-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.mis-propuesta-fecha { font-size: 0.78rem; color: #475569; }
.mis-propuesta-trasfondo { font-size: 0.88rem; color: #cbd5e1; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mis-propuesta-img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.mis-propuesta-nota { font-size: 0.82rem; color: #94a3b8; font-style: italic; padding: 6px 10px; background: rgba(255,255,255,0.04); border-radius: 6px; border-left: 2px solid rgba(148, 163, 184, 0.3); margin-top: 6px; }

/* Badges de estado */
.estado-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.estado-badge.pendiente { background: rgba(234, 179, 8, 0.15); color: #fbbf24; border: 1px solid rgba(234, 179, 8, 0.3); }
.estado-badge.vista { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.estado-badge.aprobada { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.estado-badge.rechazada { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Admin panel */
.propuestas-admin-filters { display: flex; gap: 8px; padding: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-propuesta-card { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 14px; overflow: hidden; margin-bottom: 16px; transition: all 0.2s ease; }
.admin-propuesta-card:hover { border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1); }
.admin-propuesta-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap; gap: 8px; }
.admin-propuesta-user { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.admin-propuesta-fecha { font-size: 0.78rem; color: #475569; }
.admin-propuesta-body { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 14px 16px; align-items: start; }
.admin-propuesta-trasfondo { font-size: 0.9rem; color: #cbd5e1; line-height: 1.6; white-space: pre-line; }
.admin-propuesta-img-wrap img { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); cursor: zoom-in; transition: transform 0.2s ease; }
.admin-propuesta-img-wrap img:hover { transform: scale(1.04); }
.admin-propuesta-actions { padding: 10px 16px 14px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-propuesta-nota-input { flex: 1; min-width: 160px; padding: 8px 12px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: #e2e8f0; font-family: 'Outfit', sans-serif; font-size: 0.85rem; }
.admin-propuesta-nota-input:focus { outline: none; border-color: #7c3aed; }
.btn-estado { padding: 7px 14px; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: 'Outfit', sans-serif; }
.btn-estado.vista { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.35); }
.btn-estado.vista:hover { background: rgba(59, 130, 246, 0.35); }
.btn-estado.aprobada { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.35); }
.btn-estado.aprobada:hover { background: rgba(34, 197, 94, 0.35); }
.btn-create-musa {
    background: rgba(217, 119, 6, 0.22);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.42);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-create-musa:hover {
    background: rgba(217, 119, 6, 0.38);
    transform: translateY(-1px);
}
.btn-create-musa:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.btn-estado.rechazada { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); }
.btn-estado.rechazada:hover { background: rgba(239, 68, 68, 0.35); }
.admin-propuestas-empty { text-align: center; color: #475569; padding: 50px 20px; font-size: 0.9rem; }

/* Toast de éxito */
.propuesta-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(192, 38, 211, 0.95));
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
    z-index: 99999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    white-space: nowrap;
}
.propuesta-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Botones de eliminación */
.btn-delete {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(1.05);
}

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

/* Reajuste Admin Actions */
.admin-actions-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.admin-status-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-delete-admin {
    margin-left: auto;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

@media (max-width: 640px) {
    .btn-delete-admin {
        margin-left: 0;
        width: 100%;
    }
    .admin-status-btns {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================================
   Reseñas - modal codex editorial
   ============================================================ */
.reviews-modal {
    background: rgba(2, 1, 5, 0.88) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.reviews-modal-inner {
    width: min(760px, 100%) !important;
    max-width: min(760px, calc(100vw - 28px)) !important;
    max-height: min(86vh, 780px);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
    transform: none !important;
    border: 1px solid rgba(241, 217, 148, 0.25) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% -20%, rgba(232, 95, 159, 0.2), transparent 38%),
        radial-gradient(circle at 50% 70%, rgba(216, 181, 104, 0.08), transparent 48%),
        linear-gradient(155deg, #180817 0%, #201027 52%, #07030d 100%) !important;
    color: var(--cm-ivory) !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow:
        0 30px 86px rgba(0, 0, 0, 0.78),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.reviews-modal-inner::before {
    display: none !important;
}

.reviews-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px !important;
    border-bottom: 1px solid rgba(241, 217, 148, 0.18) !important;
    background:
        linear-gradient(90deg, rgba(241, 217, 148, 0.08), transparent 72%),
        rgba(7, 3, 13, 0.36) !important;
}

.reviews-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cm-gold-soft) !important;
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1rem, 2vw, 1.28rem) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reviews-modal-title strong {
    color: #fff7ed;
    font-weight: 700;
}

.reviews-icon {
    color: #f0abfc;
    font-size: 1.1rem;
    text-shadow: 0 0 12px rgba(217, 70, 239, 0.45);
}

.reviews-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(241, 217, 148, 0.16) !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045) !important;
    color: rgba(248, 236, 210, 0.82) !important;
    font-size: 1.05rem !important;
    line-height: 1;
    transform: none !important;
}

.reviews-close:hover {
    border-color: rgba(248, 113, 113, 0.58) !important;
    color: #fecaca !important;
    transform: rotate(90deg) scale(1.06) !important;
}

.reviews-list {
    flex: 1 1 auto;
    min-height: 170px;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px 24px 18px !important;
    overflow-y: auto;
}

.reviews-loading,
.reviews-empty {
    margin: 0;
    border: 1px solid rgba(241, 217, 148, 0.15);
    border-radius: 12px;
    background: rgba(20, 9, 31, 0.42);
    color: rgba(248, 236, 210, 0.68);
    text-align: center;
}

.reviews-loading {
    padding: 34px 18px;
}

.reviews-empty {
    display: grid;
    gap: 7px;
    place-items: center;
    padding: 34px 18px;
}

.reviews-empty-mark {
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
}

.reviews-empty strong {
    color: var(--cm-ivory);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.review-postit {
    position: relative;
    margin: 0 0 14px !important;
    padding: 15px 16px 16px !important;
    overflow: hidden;
    border: 1px solid rgba(241, 217, 148, 0.16) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(90deg, rgba(241, 217, 148, 0.07), transparent 18%),
        rgba(20, 9, 31, 0.58) !important;
    color: var(--cm-ivory) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

.review-postit::before {
    content: '✦';
    position: absolute;
    right: 14px;
    bottom: 8px;
    color: rgba(241, 217, 148, 0.07);
    font-family: 'Cinzel', serif;
    font-size: 3.8rem;
    line-height: 1;
}

.review-postit-header {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin: 0 0 10px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(241, 217, 148, 0.14) !important;
    color: rgba(248, 236, 210, 0.68) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
}

.review-author {
    min-width: 0;
    overflow: hidden;
    color: var(--cm-gold-soft) !important;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.review-date {
    color: var(--cm-muted) !important;
    font-size: 0.72rem !important;
    white-space: nowrap;
}

.review-text {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: rgba(255, 247, 237, 0.88) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(0.95rem, 1.45vw, 1.08rem) !important;
    line-height: 1.55 !important;
}

.review-text::before {
    content: '“';
    float: left;
    margin: -9px 5px -14px 0;
    color: rgba(241, 217, 148, 0.5);
    font-size: 2.15rem;
    line-height: 1;
}

.review-delete-btn {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, 0.24) !important;
    border-radius: 50%;
    background: rgba(127, 29, 29, 0.18) !important;
    color: #fca5a5 !important;
    font-size: 0.78rem !important;
}

.review-delete-btn:hover {
    background: rgba(127, 29, 29, 0.58) !important;
    transform: translateY(-1px) scale(1.06) !important;
}

.reviews-form-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    margin: 0 !important;
    padding: 18px 24px 22px !important;
    border: 0 !important;
    border-top: 1px solid rgba(241, 217, 148, 0.18) !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(232, 95, 159, 0.12), transparent 52%),
        rgba(7, 3, 13, 0.42) !important;
}

.reviews-form-title {
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.reviews-textarea {
    width: 100%;
    min-height: 112px;
    height: 112px !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(241, 217, 148, 0.2) !important;
    border-radius: 10px !important;
    outline: none;
    resize: vertical;
    background:
        linear-gradient(180deg, rgba(35, 18, 39, 0.72), rgba(13, 6, 18, 0.82)) !important;
    color: rgba(255, 247, 237, 0.9) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1rem !important;
    line-height: 1.55;
}

.reviews-textarea::placeholder {
    color: rgba(248, 236, 210, 0.42);
}

.reviews-textarea:focus {
    border-color: rgba(240, 171, 252, 0.54) !important;
    box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.12);
}

.reviews-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.reviews-char-count {
    color: rgba(248, 236, 210, 0.55) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem !important;
    font-variant-numeric: tabular-nums;
}

.reviews-submit-btn {
    min-height: 38px;
    padding: 9px 18px !important;
    border: 1px solid rgba(241, 217, 148, 0.26) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--cm-gold), var(--cm-rose)) !important;
    color: #16091d !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reviews-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(232, 95, 159, 0.28) !important;
}

.reviews-submit-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

.reviews-error {
    min-height: 1em;
    margin: 0;
    color: #fca5a5 !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem !important;
    text-align: right;
}

@media (max-width: 640px) {
    .reviews-modal {
        padding: 10px;
    }

    .reviews-modal-inner {
        max-height: 92vh;
        border-radius: 14px !important;
    }

    .reviews-modal-header,
    .reviews-list,
    .reviews-form-area {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .reviews-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .reviews-submit-btn {
        width: 100%;
    }
}

/* Estado sin usar: banda inferior discreta sin tapar la ilustracion */
.character-card.rarity-unused .cm-front .char-img {
    filter: grayscale(0.38) saturate(0.72) brightness(0.82) contrast(0.94);
}

.character-card.rarity-unused .cm-front .cm-grad {
    background:
        linear-gradient(180deg, rgba(10, 5, 18, 0.28) 0%, transparent 30%, transparent 55%, rgba(8, 4, 16, 0.78) 80%, rgba(6, 3, 13, 0.97) 100%) !important;
}

.cm-front .cm-unused {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 7 !important;
    display: inline-block;
    transform: none !important;
    width: auto;
    min-width: min(62%, 150px);
    margin: 0 auto 9px;
    padding: 4px 12px !important;
    border: 1px solid rgba(203, 213, 225, 0.34) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.78) 16%, rgba(15, 23, 42, 0.82) 84%, transparent) !important;
    color: rgba(226, 232, 240, 0.86) !important;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem !important;
    font-weight: 700;
    letter-spacing: 0.18em !important;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.cm-front .cm-unused::before,
.cm-front .cm-unused::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.62));
}

.cm-front .cm-unused::before {
    right: calc(100% + 7px);
    transform: translateY(-50%);
}

.cm-front .cm-unused::after {
    left: calc(100% + 7px);
    transform: translateY(-50%) scaleX(-1);
}

.character-card.is-zoomed .cm-front .cm-unused {
    bottom: auto !important;
    width: min(48%, 210px);
    min-width: min(48%, 210px);
    margin-bottom: 12px;
    padding: 6px 18px !important;
    font-size: 0.72rem !important;
}



/* ===== RESKIN TAROT MÍSTICO (anexado) ===== */
/* ============================================================
   THEME · CÓDICE DE MUSAS  —  Reskin "Tarot Místico"
   Se carga DESPUÉS de styles.css. Reutiliza tus clases e IDs;
   no toca la lógica (script.js / auth.js / Supabase).
   El objetivo: llevar el tablero al look morado/negro + oro
   del mockup aprobado, armonizando el acento (turquesa→oro)
   y manteniendo el sistema de rarezas de las tarjetas.
   ============================================================ */

/* ---------- 1. TOKENS GLOBALES ---------- */
:root {
    --accent-color: #d9b55e;          /* Oro (antes turquesa) */
    --accent-hover: #f3d785;
    --star-color: #e85fa0;            /* Rosa arcano */
    --card-shadow: 0 14px 30px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(217,181,94,.12);
    --card-shadow-hover: 0 24px 44px -10px rgba(0,0,0,.6), 0 0 26px rgba(232,95,160,.22);
}

/* ---------- 2. FONDO DEL TABLERO (el cambio clave) ---------- */
/* De foto clara → cielo arcano morado/negro */
.main-content {
    background-color: #0a0518 !important;
    background-image:
        radial-gradient(120% 80% at 50% -10%, #241334 0%, #140a22 38%, #0a0518 70%, #060310 100%) !important;
}

/* Polvo estelar dorado (reemplaza el polvo claro) */
.main-content::before {
    background-image:
        radial-gradient(circle, rgba(232,201,118,.9) 1px, transparent 1.4px),
        radial-gradient(circle, rgba(184,155,214,.7) 1px, transparent 1.6px) !important;
    background-size: 120px 120px, 190px 190px !important;
    opacity: .45 !important;
}

/* Viñeta profunda en lugar del degradado claro */
.main-content::after {
    background: radial-gradient(circle at 50% 30%, transparent 42%, rgba(6,3,16,.72) 100%) !important;
}

/* ---------- 2b. PLAYMAT (.board) — el panel de las tarjetas ---------- */
/* Tu .board tenía un tapete CLARO (#faf5ff + degradado lavanda + textura).
   Lo pasamos a tapete arcano oscuro, conservando forma redondeada y tilt 3D. */
.board {
    background:
        radial-gradient(circle at 50% 32%, rgba(62,38,86,.55) 0%, rgba(30,17,46,.6) 45%, rgba(12,7,24,.78) 100%),
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0 C 70 30, 90 30, 120 60 C 90 90, 70 90, 60 120 C 50 90, 30 90, 0 60 C 30 30, 50 30, 60 0' fill='none' stroke='%23d9b55e' stroke-width='0.6' opacity='0.22'/%3E%3C/svg%3E") !important;
    background-color: #100a1e !important;
    background-blend-mode: normal !important;
    border: 3px double rgba(217,181,94,.3) !important;
    box-shadow:
        inset 0 0 120px rgba(124,58,237,.18),
        0 18px 50px rgba(0,0,0,.5) !important;
}

/* ---------- 3. ESTADO VACÍO / SIN COINCIDENCIAS ---------- */
.empty-state {
    background: rgba(28,16,42,.55) !important;
    border: 2px dashed rgba(217,181,94,.3) !important;
    color: rgba(201,187,224,.7) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.empty-state h3 {
    color: #f3d785 !important;
    text-shadow: 0 2px 18px rgba(232,95,160,.25);
}
.empty-state p { color: rgba(201,187,224,.75) !important; }

/* ---------- 4. CABECERA (match mockup) ---------- */
/* "MUSAS": de cursiva Great Vibes → Cinzel rosa en mayúsculas */
.main-title span {
    font-family: 'Cinzel', serif !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 10px !important;
    font-size: 2.4rem !important;
    background: linear-gradient(180deg,#f6b3da,#e85fa0 55%,#b8327a) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.main-title {
    font-family: 'Cinzel', serif !important;
    letter-spacing: 9px !important;
}
/* Subtítulo: quitar la caja con borde → letras espaciadas sobrias */
.subtitle {
    background: none !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 8px 0 0 !important;
    color: rgba(201,187,224,.74) !important;
    -webkit-text-fill-color: rgba(201,187,224,.74) !important;
    font-family: 'Marcellus', serif !important;
    letter-spacing: .42em !important;
    animation: none !important;
}
.subtitle::before, .subtitle::after { content: '' !important; display: none !important; }
/* Siluetas tintadas de oro como en el mockup */
.muse-icon {
    filter: sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(.98)
            drop-shadow(0 0 12px rgba(232,201,118,.3)) !important;
    opacity: .55 !important;
}

/* Línea de oro de la cabecera: mantener; sólo suavizar el cian del título span si lo hubiera */

/* ---------- 5. CONTROLES (orden / pills) hacia oro ---------- */
/* El dropdown y las pills ya viven sobre la cabecera oscura; sólo
   reforzamos foco/acento con oro para coherencia. */
.filter-pill.active {
    background: linear-gradient(120deg, rgba(232,95,160,.24), rgba(217,181,94,.2)) !important;
    border-color: rgba(243,215,133,.6) !important;
    color: #f6e3a8 !important;
    box-shadow: 0 4px 16px rgba(232,95,160,.2);
}
.premium-dropdown .dropdown-options li.active,
.premium-dropdown .dropdown-options li:hover {
    color: #f6e3a8 !important;
}

/* Foco de inputs: de rosa puro a oro-rosa para casar con el acento */
.form-group input:focus,
.form-group textarea:focus {
    border-color: #d9b55e !important;
    box-shadow: 0 0 15px rgba(217,181,94,.22) !important;
}

/* ---------- 6. CHIPS de tag seleccionados (oro-rosa) ---------- */
.tag-checkbox input:checked + span {
    background: linear-gradient(135deg,#e85fa0,#b8327a) !important;
    border-color: #f3d785 !important;
    box-shadow: 0 4px 12px rgba(232,95,160,.4) !important;
}

/* ---------- 7. FAB / badges turquesa residual ---------- */
.sync-status-badge.online { color: rgba(127,230,168,.8) !important; }
.sync-status-badge.online .sync-dot { background:#46e08a !important; box-shadow:0 0 8px #46e08a !important; }

/* ============================================================
   8. FRENTE DE TARJETA "TAROT" (mockup)  —  clases cm-*
   El markup lo genera script.js (createCardElement). Aquí sólo
   el estilo. El color de rareza viene de --badge-border / --badge-glow
   que tu styles.css ya define por rareza.
   ============================================================ */
.character-card .card-front.cm-front {
    border: none !important;
    outline: none !important;
    background: linear-gradient(160deg,#1c1029,#120a1d) !important;
    box-shadow: inset 0 0 26px var(--badge-glow, rgba(217,181,94,.25)) !important;
    overflow: hidden;
    padding: 0 !important;
}
.cm-front .char-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 16% !important;
    border-radius: inherit;
}
.cm-front .cm-grad {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,5,18,.15) 0%, transparent 28%, transparent 50%, rgba(8,4,16,.74) 80%, rgba(6,3,13,.96) 100%);
}
.cm-front .cm-frame {
    position: absolute; inset: 10px; z-index: 4; pointer-events: none;
    border: 1px solid var(--badge-border, #d9b55e);
    border-radius: 10px;
    opacity: .85;
}
.cm-front .cm-corner {
    position: absolute; width: 15px; height: 15px; z-index: 5; opacity: .9;
    border: 0 solid var(--badge-border, #d9b55e);
}
.cm-front .cm-corner.tl { top: 16px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.cm-front .cm-corner.tr { top: 16px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.cm-front .cm-corner.bl { bottom: 16px; left: 16px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cm-front .cm-corner.br { bottom: 16px; right: 16px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.cm-front .cm-numeral {
    position: absolute;
    z-index: 6;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--badge-border, #d9b55e);
    text-shadow: 0 1px 6px rgba(0,0,0,.85);
    pointer-events: none;
}
.cm-front .cm-numeral-tl {
    top: 20px;
    left: 20px;
}
.cm-front .cm-numeral-br {
    right: 20px;
    bottom: 20px;
    transform: rotate(180deg);
}
.cm-front .cm-unused {
    position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 6;
    font-size: 10px; letter-spacing: .18em; color: #c3b4d6;
    border: 1px solid rgba(195,180,214,.45); padding: 3px 11px; border-radius: 20px;
    background: rgba(10,5,18,.6);
}
.cm-front .cm-plate {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 0 14px 20px; text-align: center;
}
.cm-front .cm-name {
    font-family: 'Cinzel', serif; font-weight: 600; font-size: 22px; letter-spacing: .05em;
    color: #f3e6c4 !important; text-shadow: 0 2px 10px rgba(0,0,0,.92);
    background: none !important; -webkit-text-fill-color: #f3e6c4 !important;
    -webkit-background-clip: border-box !important; filter: none !important;
}
.cm-front button.cm-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.cm-front .cm-voice-mark {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(216, 181, 104, 0.38);
    border-radius: 50%;
    background: rgba(7, 3, 15, 0.58);
    color: var(--badge-border, #d9b55e);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    -webkit-text-fill-color: currentColor;
    box-shadow: 0 0 12px rgba(216, 181, 104, 0.16);
}

.cm-front .cm-voice-wave {
    display: none;
    justify-content: center;
    align-items: end;
    gap: 4px;
    height: 19px;
    margin-top: 7px;
}

.cm-front .cm-voice-wave span {
    width: 3px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(to top, rgba(216, 181, 104, 0.45), rgba(248, 236, 210, 0.95));
    box-shadow: 0 0 8px rgba(216, 181, 104, 0.35);
    animation: cmVoiceWave 0.72s ease-in-out infinite;
}

.cm-front .cm-voice-wave span:nth-child(2) { animation-delay: 0.08s; }
.cm-front .cm-voice-wave span:nth-child(3) { animation-delay: 0.16s; }
.cm-front .cm-voice-wave span:nth-child(4) { animation-delay: 0.24s; }
.cm-front .cm-voice-wave span:nth-child(5) { animation-delay: 0.32s; }

.cm-front .cm-voice-caption {
    display: none;
    margin-top: 4px;
    color: rgba(248, 236, 210, 0.64);
    font-family: 'Marcellus', serif;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.character-card.is-speaking .card-front.cm-front {
    box-shadow:
        inset 0 0 30px var(--badge-glow, rgba(217,181,94,.32)),
        0 0 26px rgba(216, 181, 104, 0.18) !important;
}

.character-card.is-speaking .cm-card-aura {
    opacity: 0.95;
}

.character-card.is-speaking .cm-voice-wave,
.character-card.is-speaking .cm-voice-caption {
    display: flex;
}

.character-card.is-speaking .cm-voice-caption {
    display: block;
}

.character-card.is-speaking .cm-voice-mark {
    background: rgba(216, 181, 104, 0.92);
    color: #16091d;
    -webkit-text-fill-color: #16091d;
}

@keyframes cmVoiceWave {
    0%, 100% { height: 6px; opacity: 0.52; }
    50% { height: 18px; opacity: 1; }
}
.cm-front .cm-title {
    font-family: 'Marcellus', serif; font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--badge-border, #d9b55e); margin-top: 4px;
}
.cm-front .cm-suit {
    font-size: 17px; margin-top: 9px; color: var(--badge-border, #d9b55e);
    filter: drop-shadow(0 0 6px var(--badge-glow, rgba(217,181,94,.4)));
}
.cm-front .cm-pips {
    display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px;
}
.cm-front .cm-pip { font-size: 9px; color: rgba(255,255,255,.14); }
.cm-front .cm-pip.on { color: var(--badge-border, #d9b55e); }
/* ============================================================
   9. RAIL DE ICONOS IZQUIERDO (mockup)
   El markup va en index.html; cada icono "clica" tu botón ya
   existente, así que reutiliza toda tu lógica sin tocarla.
   ============================================================ */
.cm-rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 74px; z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 22px 0;
    background: linear-gradient(180deg, rgba(18,9,30,.96), rgba(10,5,20,.96));
    border-right: 1px solid rgba(217,181,94,.18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cm-rail-logo {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    margin-bottom: 14px; font-size: 20px; color: #f6e3a8;
    background: radial-gradient(circle, #3a2150, #1a0e2a);
    border: 1px solid rgba(217,181,94,.5);
    box-shadow: 0 0 20px rgba(232,95,160,.4);
}
.cm-rail-btn {
    width: 46px; height: 46px; border-radius: 13px; border: none; background: transparent;
    cursor: pointer; color: #b79bcf; font-size: 19px; line-height: 1;
    display: grid; place-items: center; transition: .2s;
}
.cm-rail-btn:hover { background: rgba(217,181,94,.1); color: #f0d98a; }
.cm-rail-spacer { flex: 1; }
/* Dejar sitio al rail sin tapar el contenido */
.app-container { padding-left: 74px; }
/* En móvil el rail se vuelve barra inferior fina */
@media (max-width: 720px) {
    .cm-rail {
        top: auto; right: 0; bottom: 0; width: auto; height: 60px;
        flex-direction: row; justify-content: space-around; padding: 0 8px;
        border-right: none; border-top: 1px solid rgba(217,181,94,.18);
    }
    .cm-rail-logo { display: none; }
    .app-container { padding-left: 0; padding-bottom: 60px; }
}

/* ============================================================
   RESTYLING FINAL · ARCHIVO ARCANO
   Capa de acabado visual para consolidar el mockup propuesto.
   ============================================================ */
:root {
    --cm-void: #07030f;
    --cm-night: #10071b;
    --cm-panel: rgba(20, 9, 31, 0.84);
    --cm-panel-strong: rgba(12, 5, 21, 0.94);
    --cm-violet: #3a1f56;
    --cm-rose: #e85f9f;
    --cm-rose-deep: #9f2b67;
    --cm-gold: #d8b568;
    --cm-gold-soft: #f1d994;
    --cm-ivory: #f8ecd2;
    --cm-muted: #b7a7c9;
    --cm-line: rgba(216, 181, 104, 0.24);
    --cm-line-strong: rgba(241, 217, 148, 0.46);
    --cm-radius: 8px;
}

html,
body {
    background: var(--cm-void) !important;
}

body {
    color: var(--cm-ivory);
}

.main-content {
    background:
        radial-gradient(circle at 50% -8%, rgba(73, 38, 102, 0.72) 0%, rgba(23, 10, 37, 0.9) 32%, rgba(7, 3, 15, 1) 72%),
        linear-gradient(135deg, #07030f, #13081f 48%, #080411) !important;
    isolation: isolate;
}

.main-content::before {
    background-image:
        radial-gradient(circle, rgba(241, 217, 148, 0.46) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(232, 95, 159, 0.28) 0 1px, transparent 1.4px),
        linear-gradient(120deg, transparent 0%, rgba(216, 181, 104, 0.05) 48%, transparent 52%) !important;
    background-size: 145px 145px, 220px 220px, 100% 100% !important;
    opacity: 0.55 !important;
    animation: cmStarDrift 56s linear infinite !important;
}

@keyframes cmStarDrift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(34px, -90px, 0) rotate(4deg); }
}

.main-content::after {
    background:
        radial-gradient(circle at 50% 28%, transparent 0 32%, rgba(7, 3, 15, 0.54) 82%),
        linear-gradient(90deg, rgba(7, 3, 15, 0.58), transparent 20%, transparent 80%, rgba(7, 3, 15, 0.58)) !important;
}

.board-title-area {
    min-height: 172px !important;
    padding: 18px 44px 20px !important;
    gap: clamp(24px, 6vw, 92px) !important;
    background:
        linear-gradient(90deg, rgba(7, 3, 15, 0.96), rgba(30, 14, 47, 0.92) 45%, rgba(7, 3, 15, 0.96)),
        radial-gradient(circle at center, rgba(216, 181, 104, 0.14), transparent 58%) !important;
    border-top: 1px solid var(--cm-line-strong) !important;
    border-bottom: 1px solid var(--cm-line-strong) !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(216, 181, 104, 0.16) !important;
}

.board-title-area::before {
    content: '';
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 181, 104, 0.72), transparent);
    opacity: 0.65;
}

.board-title-area::after {
    border-color: rgba(216, 181, 104, 0.18) !important;
    inset: 8px 18px !important;
}

.main-title {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.2rem, 2.1vw, 1.9rem) !important;
    letter-spacing: clamp(5px, 0.8vw, 12px) !important;
    gap: clamp(10px, 1.6vw, 24px) !important;
    margin: 0 !important;
    color: var(--cm-gold-soft) !important;
    background: linear-gradient(180deg, #fff7d6 0%, var(--cm-gold-soft) 36%, var(--cm-gold) 72%, #8d6529 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.72)) !important;
}

.main-title::before,
.main-title::after {
    width: clamp(32px, 6vw, 86px) !important;
    background: linear-gradient(90deg, transparent, var(--cm-gold), transparent) !important;
    opacity: 0.8;
}

.main-title span {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.9rem, 4vw, 3.9rem) !important;
    letter-spacing: clamp(8px, 1.45vw, 18px) !important;
    background: linear-gradient(180deg, #ffd2e7 0%, var(--cm-rose) 54%, var(--cm-rose-deep) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 20px rgba(232, 95, 159, 0.28)) !important;
}

.subtitle {
    color: var(--cm-muted) !important;
    -webkit-text-fill-color: var(--cm-muted) !important;
    font-family: 'Marcellus', serif !important;
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    letter-spacing: clamp(0.22em, 0.62vw, 0.58em) !important;
    margin-top: 8px !important;
    text-shadow: 0 0 18px rgba(216, 181, 104, 0.12);
}

.muse-icon {
    height: clamp(108px, 14vw, 178px) !important;
    opacity: 0.42 !important;
    filter:
        sepia(1) saturate(1.9) hue-rotate(-12deg) brightness(0.92)
        drop-shadow(0 0 24px rgba(216, 181, 104, 0.24)) !important;
}

.gallery-controls-row {
    position: relative;
    z-index: 5;
    padding: 8px 34px 0 !important;
}

.sort-label {
    color: var(--cm-gold-soft) !important;
    opacity: 0.78 !important;
}

.dropdown-trigger {
    height: 44px !important;
    border-radius: var(--cm-radius) !important;
    background: rgba(9, 4, 17, 0.74) !important;
    border-color: var(--cm-line) !important;
    color: var(--cm-ivory) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.dropdown-trigger:hover {
    transform: translateY(-1px) !important;
    border-color: var(--cm-line-strong) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.44), 0 0 18px rgba(216, 181, 104, 0.12) !important;
}

.dropdown-options {
    border-radius: 10px !important;
    background: rgba(8, 4, 16, 0.98) !important;
    border-color: var(--cm-line-strong) !important;
}

.filter-pills-container {
    z-index: 4 !important;
    padding: 14px 34px 4px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    scroll-padding-inline: 24px;
}

.filter-pill {
    border-radius: 999px !important;
    background: rgba(15, 7, 26, 0.66) !important;
    border: 1px solid rgba(183, 167, 201, 0.14) !important;
    color: rgba(248, 236, 210, 0.72) !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
}

.filter-pill:hover {
    color: var(--cm-ivory) !important;
    border-color: var(--cm-line) !important;
    transform: translateY(-1px) !important;
}

.filter-pill.active,
.filter-pill.clear {
    background: linear-gradient(120deg, rgba(232, 95, 159, 0.22), rgba(216, 181, 104, 0.18)) !important;
    border-color: var(--cm-line-strong) !important;
    color: var(--cm-gold-soft) !important;
}

.board {
    margin: 16px 28px 28px !important;
    padding: clamp(32px, 4vw, 64px) clamp(24px, 5vw, 86px) 180px !important;
    gap: clamp(22px, 2.4vw, 36px) !important;
    min-height: calc(100vh - 252px) !important;
    transform: none !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 26%, rgba(58, 31, 86, 0.52) 0%, rgba(20, 9, 31, 0.68) 45%, rgba(8, 4, 16, 0.86) 100%),
        linear-gradient(rgba(216, 181, 104, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 181, 104, 0.05) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M90 16 C112 50 130 50 164 90 C130 130 112 130 90 164 C68 130 50 130 16 90 C50 50 68 50 90 16Z' fill='none' stroke='%23d8b568' stroke-width='0.7' opacity='0.2'/%3E%3Ccircle cx='90' cy='90' r='30' fill='none' stroke='%23e85f9f' stroke-width='0.45' opacity='0.16'/%3E%3C/svg%3E") !important;
    background-size: auto, 42px 42px, 42px 42px, 180px 180px !important;
    border: 1px solid var(--cm-line) !important;
    outline: 1px solid rgba(216, 181, 104, 0.08);
    outline-offset: -8px;
    box-shadow:
        inset 0 0 120px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 68px rgba(0, 0, 0, 0.46) !important;
}

.empty-state {
    transform: none !important;
    min-height: 420px;
    border-radius: 14px !important;
}

.character-card {
    width: clamp(218px, 18vw, 268px) !important;
    height: clamp(330px, 27vw, 392px) !important;
}

.card-inner {
    border-radius: 14px !important;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(216, 181, 104, 0.14) !important;
}

.character-card:hover .card-inner {
    transform: translateY(-8px) scale(1.018);
    box-shadow:
        0 28px 52px rgba(0, 0, 0, 0.56),
        0 0 28px var(--badge-glow, rgba(216, 181, 104, 0.26)),
        0 0 0 1px var(--badge-border, rgba(216, 181, 104, 0.42)) !important;
}

.character-card.is-flipped:hover .card-inner {
    transform: rotateY(180deg) translateY(-8px) scale(1.018);
}

.card-front,
.card-back {
    border-radius: 14px !important;
}

.character-card .card-front.cm-front {
    border: 1px solid color-mix(in srgb, var(--badge-border, var(--cm-gold)) 74%, transparent) !important;
    outline: 1px solid rgba(255, 255, 255, 0.05) !important;
    outline-offset: -7px !important;
    background: #10071b !important;
}

.cm-card-aura {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 28%, transparent 0 36%, rgba(0, 0, 0, 0.18) 56%, rgba(0, 0, 0, 0.62) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 70%, rgba(216, 181, 104, 0.12));
    mix-blend-mode: soft-light;
}

.cm-front .cm-frame {
    inset: 12px !important;
    border-radius: 9px !important;
    border-color: color-mix(in srgb, var(--badge-border, var(--cm-gold)) 72%, transparent) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 22px rgba(0, 0, 0, 0.34);
}

.cm-front .cm-numeral {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(7, 3, 15, 0.58);
    border: 1px solid rgba(216, 181, 104, 0.18);
}

.cm-front .cm-numeral-tl {
    top: 20px !important;
    left: 20px !important;
}

.cm-front .cm-numeral-br {
    right: 20px !important;
    bottom: 20px !important;
}

.cm-front .cm-plate {
    padding: 42px 18px 24px !important;
    background:
        linear-gradient(180deg, transparent, rgba(7, 3, 15, 0.64) 28%, rgba(7, 3, 15, 0.92) 100%);
}

.cm-front .cm-name {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.08rem, 1.55vw, 1.45rem) !important;
    letter-spacing: 0.08em !important;
    text-wrap: balance;
}

.cm-front .cm-title {
    color: color-mix(in srgb, var(--badge-border, var(--cm-gold)) 82%, #ffffff) !important;
    font-size: 0.64rem !important;
    line-height: 1.35;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
}

.cm-front .cm-suit {
    margin-top: 10px !important;
}

.cm-front .cm-pips {
    gap: 6px !important;
}

.cm-front .cm-pip {
    font-size: 10px !important;
}

.cm-bottom-rule {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 14px;
    height: 1px;
    z-index: 7;
    background: linear-gradient(90deg, transparent, var(--badge-border, var(--cm-gold)), transparent);
    opacity: 0.74;
}

.card-back {
    background:
        radial-gradient(circle at 50% 0%, rgba(58, 31, 86, 0.48), transparent 42%),
        linear-gradient(180deg, #170c24, #090411) !important;
    border: 1px solid var(--badge-border, rgba(216, 181, 104, 0.36)) !important;
    color: var(--cm-ivory);
}

.card-back-header h4 {
    font-family: 'Cinzel', serif !important;
    color: var(--cm-gold-soft) !important;
}

.card-lore {
    color: rgba(248, 236, 210, 0.82) !important;
}

.tag-bubble {
    background: rgba(216, 181, 104, 0.11) !important;
    border: 1px solid rgba(216, 181, 104, 0.22) !important;
    color: var(--cm-gold-soft) !important;
    border-radius: 999px !important;
}

.action-btn,
.admin-bar-btn,
.btn-estado,
.btn-create-musa,
.gallery-upload-btn,
.gallery-delete-btn,
.reviews-submit-btn,
.propuesta-submit-btn {
    border-radius: var(--cm-radius) !important;
}

.action-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(216, 181, 104, 0.18) !important;
    color: var(--cm-ivory) !important;
}

.action-btn:hover {
    background: rgba(216, 181, 104, 0.16) !important;
    border-color: var(--cm-line-strong) !important;
}

.cm-rail {
    width: 72px !important;
    z-index: 8000 !important;
    background:
        linear-gradient(180deg, rgba(18, 8, 30, 0.96), rgba(7, 3, 15, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(216, 181, 104, 0.12), transparent 42%) !important;
    border-right: 1px solid var(--cm-line) !important;
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.34);
}

.cm-rail-logo {
    font-family: 'Cinzel', serif;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, rgba(232, 95, 159, 0.26), transparent 58%),
        linear-gradient(160deg, #2a173f, #0d0617) !important;
    border-color: var(--cm-line-strong) !important;
}

.cm-rail-btn {
    border-radius: 12px !important;
    color: rgba(248, 236, 210, 0.62) !important;
    border: 1px solid transparent !important;
}

.cm-rail-btn:hover,
.cm-rail-btn.is-current {
    color: var(--cm-gold-soft) !important;
    background: rgba(216, 181, 104, 0.12) !important;
    border-color: rgba(216, 181, 104, 0.18) !important;
    box-shadow: inset 0 0 18px rgba(216, 181, 104, 0.08);
}

.cm-rail-btn.auth-hidden {
    display: none !important;
}

body .fab-add,
body .fab-tinder,
body .fab-propuesta,
body .login-fab,
body .admin-bar {
    display: none !important;
}

.sidebar,
.login-modal-inner,
.dashboard-inner,
.propuesta-modal-inner,
.gallery-modal-inner,
.reviews-modal-inner {
    background:
        radial-gradient(circle at 50% -20%, rgba(58, 31, 86, 0.4), transparent 42%),
        rgba(10, 5, 18, 0.96) !important;
    border: 1px solid var(--cm-line) !important;
    box-shadow: 0 28px 82px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    color: var(--cm-ivory) !important;
}

.dashboard-header,
.propuesta-modal-header,
.gallery-modal-header,
.reviews-modal-header,
.app-header {
    background: linear-gradient(90deg, rgba(216, 181, 104, 0.08), transparent) !important;
    border-bottom-color: var(--cm-line) !important;
}

.dashboard-header h2,
.propuesta-modal-title,
.gallery-modal-title,
.reviews-modal-title,
.login-modal-title,
.app-header h1 {
    color: var(--cm-gold-soft) !important;
}

.dashboard-stat-card,
.dashboard-rank-card,
.dashboard-vote-row,
.dashboard-resena-row,
.admin-propuesta-card,
.mis-propuesta-card,
.user-item {
    background: rgba(20, 9, 31, 0.62) !important;
    border: 1px solid rgba(216, 181, 104, 0.14) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.dashboard-stat-card:hover,
.dashboard-rank-card:hover,
.admin-propuesta-card:hover,
.mis-propuesta-card:hover {
    border-color: var(--cm-line-strong) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28) !important;
}

.dashboard-stat-num,
.dashboard-section-title,
.dashboard-rank-name,
.admin-propuesta-user,
.user-username {
    color: var(--cm-ivory) !important;
}

.dashboard-stat-label,
.dashboard-rank-meta,
.dashboard-vote-time,
.dashboard-resena-time,
.admin-propuesta-fecha,
.mis-propuesta-fecha {
    color: var(--cm-muted) !important;
}

.propuesta-tabs {
    background: rgba(7, 3, 15, 0.44) !important;
}

.propuesta-tab {
    color: rgba(248, 236, 210, 0.62) !important;
}

.propuesta-tab.active {
    color: var(--cm-gold-soft) !important;
    border-bottom-color: var(--cm-gold) !important;
}

.propuesta-textarea,
.propuesta-drop-zone,
.admin-propuesta-nota-input,
.dashboard-search input,
.login-field input,
.form-group input,
.form-group textarea,
.user-form-group input,
.user-form-group select {
    background: rgba(7, 3, 15, 0.58) !important;
    border: 1px solid rgba(216, 181, 104, 0.18) !important;
    color: var(--cm-ivory) !important;
    border-radius: var(--cm-radius) !important;
}

.btn-primary,
.propuesta-submit-btn,
.reviews-submit-btn,
.btn-save-user {
    background: linear-gradient(135deg, var(--cm-gold), var(--cm-rose)) !important;
    color: #16091d !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(232, 95, 159, 0.22) !important;
}

.fab-add,
.fab-tinder,
.fab-propuesta,
.login-fab {
    border-radius: 14px !important;
    border: 1px solid rgba(241, 217, 148, 0.38) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 22px rgba(216, 181, 104, 0.14) !important;
}

.fab-add {
    background: linear-gradient(135deg, #f1d994, #d8b568) !important;
    color: #16091d !important;
}

.fab-propuesta {
    background: linear-gradient(135deg, var(--cm-rose), #7c2d6d) !important;
}

.sync-status-badge {
    top: 16px !important;
    right: 24px !important;
    background: rgba(7, 3, 15, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 999px !important;
}

@media (max-width: 900px) {
    .board-title-area {
        min-height: 148px !important;
        gap: 18px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .muse-icon {
        display: none;
    }

    .board {
        margin: 12px !important;
        padding: 24px 14px 142px !important;
    }
}

@media (max-width: 720px) {
    .cm-rail {
        width: auto !important;
        height: 62px !important;
        z-index: 9000 !important;
    }

    .cm-rail-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .main-title {
        flex-direction: column !important;
        gap: 0 !important;
        line-height: 1.05 !important;
    }

    .subtitle {
        letter-spacing: 0.18em !important;
        font-size: 0.66rem !important;
    }

    .character-card {
        width: min(82vw, 250px) !important;
        height: min(124vw, 368px) !important;
    }
}

/* Ajustes de legibilidad al maximizar cartas */
.character-card.is-zoomed,
.character-card.is-zoomed .card-inner,
.character-card.is-zoomed .card-front,
.character-card.is-zoomed .card-back {
    opacity: 1 !important;
    filter: none !important;
}

.character-card.is-zoomed {
    box-shadow:
        0 0 0 1px rgba(241, 217, 148, 0.28),
        0 28px 90px rgba(0, 0, 0, 0.92),
        0 0 56px var(--badge-glow, rgba(216, 181, 104, 0.34)) !important;
    z-index: 50000 !important;
}

.character-card.is-zoomed .cm-card-aura {
    opacity: 0.55;
    mix-blend-mode: soft-light;
}

.character-card.is-zoomed .cm-grad {
    background:
        linear-gradient(180deg, rgba(10,5,18,.04) 0%, transparent 34%, transparent 60%, rgba(8,4,16,.46) 83%, rgba(6,3,13,.78) 100%) !important;
}

.character-card.is-zoomed .cm-plate {
    background:
        linear-gradient(180deg, transparent, rgba(7, 3, 15, 0.42) 26%, rgba(7, 3, 15, 0.82) 100%) !important;
}

.character-card.is-zoomed .card-back {
    background:
        radial-gradient(circle at 50% 0%, rgba(58, 31, 86, 0.58), transparent 42%),
        linear-gradient(180deg, #211232, #10071b) !important;
}

.character-card.is-zoomed .card-lore {
    color: #2c170c !important;
    background:
        linear-gradient(rgba(255, 244, 214, 0.94), rgba(231, 211, 171, 0.96)),
        url('https://www.transparenttextures.com/patterns/paper-fibers.png') !important;
    border-color: rgba(216, 181, 104, 0.58) !important;
    box-shadow:
        inset 0 0 22px rgba(92, 54, 18, 0.18),
        0 10px 28px rgba(0, 0, 0, 0.26) !important;
    text-shadow: none !important;
}

.character-card.is-zoomed .cm-front .cm-numeral {
    background: rgba(7, 3, 15, 0.5);
    border-color: rgba(241, 217, 148, 0.34);
}

/* Índices de carta: número + palo de rareza en diagonal */
.cm-front .cm-numeral {
    display: none !important;
}

.cm-card-index {
    position: absolute;
    z-index: 7;
    width: 34px;
    min-height: 46px;
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 1px;
    padding: 5px 3px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
        rgba(7, 3, 15, 0.58);
    border: 1px solid rgba(216, 181, 104, 0.2);
    color: var(--badge-border, var(--cm-gold));
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.88);
    pointer-events: none;
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.28),
        0 0 14px rgba(0, 0, 0, 0.24);
}

.cm-card-index-tl {
    top: 20px;
    left: 20px;
}

.cm-card-index-br {
    right: 20px;
    bottom: 20px;
    transform: rotate(180deg);
}

.cm-index-rank {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
}

.cm-index-suit {
    font-size: 0.82rem;
    line-height: 1;
    color: color-mix(in srgb, var(--badge-border, var(--cm-gold)) 82%, #ffffff);
    filter: drop-shadow(0 0 5px var(--badge-glow, rgba(216, 181, 104, 0.38)));
}

.character-card.is-zoomed .cm-card-index {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        rgba(7, 3, 15, 0.5);
    border-color: rgba(241, 217, 148, 0.34);
}

/* Cabecera y menú horizontal como friso arcano */
.board-title-area {
    min-height: 148px !important;
    padding: 14px 42px 18px !important;
    background:
        linear-gradient(90deg, rgba(5, 2, 11, 0.98), rgba(22, 9, 34, 0.94) 28%, rgba(42, 18, 55, 0.9) 50%, rgba(22, 9, 34, 0.94) 72%, rgba(5, 2, 11, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(216, 181, 104, 0.18), transparent 44%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(216, 181, 104, 0.34) !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.38),
        inset 0 -1px 0 rgba(241, 217, 148, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.board-title-area::before {
    left: 18% !important;
    right: 18% !important;
    bottom: 13px !important;
    background:
        linear-gradient(90deg, transparent, rgba(216, 181, 104, 0.24), rgba(241, 217, 148, 0.85), rgba(216, 181, 104, 0.24), transparent) !important;
}

.board-title-area::after {
    inset: 10px 22px !important;
    border: 1px solid rgba(216, 181, 104, 0.16) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(216, 181, 104, 0.06) 50%, transparent 92%),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(216, 181, 104, 0.045) 39px, transparent 40px);
}

.title-wrap::before,
.title-wrap::after {
    content: '✦';
    color: rgba(216, 181, 104, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.6em;
    text-shadow: 0 0 12px rgba(216, 181, 104, 0.42);
}

.title-wrap::before {
    margin-bottom: 4px;
}

.title-wrap::after {
    margin-top: 7px;
}

.main-title {
    font-size: clamp(1rem, 1.75vw, 1.55rem) !important;
    letter-spacing: clamp(5px, 0.7vw, 10px) !important;
}

.main-title span {
    font-size: clamp(1.95rem, 3.7vw, 3.55rem) !important;
}

.subtitle {
    margin-top: 4px !important;
    padding: 0 !important;
}

.muse-icon {
    height: clamp(92px, 11vw, 142px) !important;
    opacity: 0.34 !important;
}

.filter-pills-container {
    position: relative;
    margin: 0 28px !important;
    padding: 12px 20px 13px !important;
    min-height: 58px;
    background:
        linear-gradient(90deg, rgba(7, 3, 15, 0.9), rgba(42, 18, 55, 0.62) 50%, rgba(7, 3, 15, 0.9)),
        radial-gradient(circle at 50% 0%, rgba(232, 95, 159, 0.2), transparent 60%) !important;
    border: 1px solid rgba(216, 181, 104, 0.2);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(216, 181, 104, 0.08);
}

.filter-pills-container::before,
.filter-pills-container::after {
    content: '✦';
    flex: 0 0 auto;
    align-self: center;
    color: rgba(232, 95, 159, 0.55);
    text-shadow: 0 0 14px rgba(232, 95, 159, 0.32);
}

.filter-pill {
    min-height: 32px !important;
    padding: 7px 15px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
        rgba(13, 6, 22, 0.74) !important;
    border-color: rgba(216, 181, 104, 0.18) !important;
    color: rgba(248, 236, 210, 0.78) !important;
    font-family: 'Marcellus', serif !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.02em !important;
}

.filter-pill:hover,
.filter-pill.active {
    background:
        linear-gradient(180deg, rgba(241, 217, 148, 0.16), transparent),
        rgba(42, 18, 55, 0.82) !important;
    color: var(--cm-gold-soft) !important;
    border-color: rgba(241, 217, 148, 0.42) !important;
    box-shadow: 0 0 16px rgba(216, 181, 104, 0.1) !important;
}

.gallery-controls-row {
    padding: 14px 34px 10px !important;
    background:
        linear-gradient(180deg, rgba(7, 3, 15, 0.52), rgba(7, 3, 15, 0)),
        linear-gradient(90deg, transparent, rgba(216, 181, 104, 0.08), transparent);
    border-bottom: 1px solid rgba(216, 181, 104, 0.1);
}

.sort-container {
    gap: 18px !important;
}

.sort-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.42em !important;
    color: rgba(241, 217, 148, 0.82) !important;
}

.dropdown-trigger {
    height: 42px !important;
    min-width: 240px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
        rgba(11, 5, 19, 0.82) !important;
    border-color: rgba(216, 181, 104, 0.28) !important;
}

@media (max-width: 900px) {
    .filter-pills-container {
        margin: 0 10px !important;
        border-radius: 0 0 8px 8px;
    }
}

@media (max-width: 720px) {
    .gallery-controls-row {
        padding: 14px 12px 12px !important;
        justify-content: center !important;
    }

    .sort-container {
        width: 100%;
        justify-content: center !important;
        gap: 12px !important;
    }

    .sort-label {
        letter-spacing: 0.28em !important;
        font-size: 0.68rem !important;
        flex: 0 0 auto;
    }

    .premium-dropdown {
        width: min(240px, 62vw) !important;
    }

    .dropdown-trigger {
        min-width: 0 !important;
        padding: 0 14px !important;
    }
}

/* Variante minimalista del índice de baraja */
.cm-card-index {
    width: auto !important;
    min-width: 28px !important;
    min-height: 18px !important;
    grid-template-rows: none !important;
    grid-template-columns: auto auto !important;
    gap: 3px !important;
    padding: 1px 3px !important;
    border-radius: 6px !important;
    background: rgba(7, 3, 15, 0.28) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--badge-border, var(--cm-gold)) 88%, #ffffff) !important;
    opacity: 0.92;
}

.cm-card-index-tl {
    top: 13px !important;
    left: 13px !important;
}

.cm-card-index-br {
    right: 13px !important;
    bottom: 13px !important;
}

.cm-index-rank {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    order: 2;
}

.cm-index-suit {
    font-size: 0.64rem !important;
    filter: none !important;
    order: 1;
}

.character-card.is-zoomed .cm-card-index {
    width: auto !important;
    min-width: 32px !important;
    min-height: 20px !important;
    background: rgba(7, 3, 15, 0.34) !important;
    opacity: 0.95;
}

.character-card.is-zoomed .cm-card-index-tl {
    top: 15px !important;
    left: 15px !important;
}

.character-card.is-zoomed .cm-card-index-br {
    right: 15px !important;
    bottom: 15px !important;
}

/* Cabecera aplicada · friso arcano con siluetas sensuales */
.board-title-area.cm-muse-banner {
    min-height: clamp(150px, 18vw, 210px) !important;
    padding: clamp(18px, 2.4vw, 30px) clamp(22px, 5vw, 72px) clamp(20px, 2.8vw, 34px) !important;
    overflow: hidden !important;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(4, 2, 9, 0.98), rgba(21, 8, 33, 0.95) 21%, rgba(56, 20, 61, 0.86) 50%, rgba(21, 8, 33, 0.95) 79%, rgba(4, 2, 9, 0.98)),
        radial-gradient(circle at 50% 6%, rgba(232, 95, 159, 0.22), transparent 36%),
        radial-gradient(circle at 50% 92%, rgba(216, 181, 104, 0.18), transparent 46%) !important;
    border-bottom: 1px solid rgba(241, 217, 148, 0.38) !important;
}

.board-title-area.cm-muse-banner::before {
    left: clamp(64px, 14vw, 210px) !important;
    right: clamp(64px, 14vw, 210px) !important;
    bottom: 16px !important;
    height: 1px !important;
    background:
        linear-gradient(90deg, transparent, rgba(232, 95, 159, 0.54), rgba(241, 217, 148, 0.9), rgba(232, 95, 159, 0.54), transparent) !important;
    box-shadow: 0 0 18px rgba(216, 181, 104, 0.24);
}

.board-title-area.cm-muse-banner::after {
    inset: 12px clamp(12px, 2vw, 28px) !important;
    border: 1px solid rgba(216, 181, 104, 0.2) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(216, 181, 104, 0.12), transparent 12%, transparent 88%, rgba(216, 181, 104, 0.12)),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(216, 181, 104, 0.05) 43px, transparent 44px) !important;
    pointer-events: none;
    z-index: 2;
}

.cm-banner-silhouettes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.cm-banner-silhouettes::before,
.cm-banner-silhouettes::after {
    content: '◆  ✦  ◆';
    position: absolute;
    top: 18px;
    color: rgba(216, 181, 104, 0.26);
    font-family: 'Cinzel', serif;
    font-size: clamp(0.58rem, 1vw, 0.85rem);
    letter-spacing: 0.9em;
    text-shadow: 0 0 18px rgba(216, 181, 104, 0.22);
}

.cm-banner-silhouettes::before {
    left: clamp(18px, 6vw, 96px);
}

.cm-banner-silhouettes::after {
    right: clamp(18px, 6vw, 96px);
}

.cm-banner-figure {
    position: absolute;
    bottom: -28px;
    width: clamp(96px, 12vw, 170px);
    height: clamp(154px, 20vw, 260px);
    background: url('./imagenes/musa-silueta.png') center bottom / contain no-repeat;
    opacity: 0.32;
    mix-blend-mode: screen;
    filter:
        sepia(1) saturate(2.25) hue-rotate(-18deg) brightness(0.96)
        drop-shadow(0 0 18px rgba(232, 95, 159, 0.32))
        drop-shadow(0 0 28px rgba(216, 181, 104, 0.18));
}

.cm-banner-figure-left {
    left: clamp(18px, 7vw, 120px);
    transform: rotate(-3deg) scaleX(-1);
    transform-origin: bottom center;
}

.cm-banner-figure-center {
    left: 50%;
    bottom: -46px;
    width: clamp(118px, 15vw, 220px);
    height: clamp(172px, 23vw, 300px);
    opacity: 0.15;
    transform: translateX(-50%) scale(1.05);
    filter:
        sepia(1) saturate(2.8) hue-rotate(-24deg) brightness(0.88)
        drop-shadow(0 0 30px rgba(232, 95, 159, 0.28));
}

.cm-banner-figure-right {
    right: clamp(18px, 7vw, 120px);
    transform: rotate(3deg);
    transform-origin: bottom center;
}

.cm-muse-banner .muse-icon {
    position: relative;
    z-index: 3;
    height: clamp(104px, 13vw, 178px) !important;
    opacity: 0.58 !important;
    mix-blend-mode: screen;
    filter:
        sepia(1) saturate(2.1) hue-rotate(-20deg) brightness(0.94)
        drop-shadow(0 0 20px rgba(232, 95, 159, 0.26))
        drop-shadow(0 0 28px rgba(216, 181, 104, 0.18)) !important;
}

.cm-muse-banner .muse-icon.left {
    transform: rotate(-4deg) scaleX(-1);
}

.cm-muse-banner .muse-icon.right {
    transform: rotate(4deg);
}

.cm-muse-banner .title-wrap {
    position: relative;
    z-index: 4;
    padding: 0 clamp(8px, 2vw, 34px);
}

.cm-muse-banner .title-wrap::before,
.cm-muse-banner .title-wrap::after {
    color: rgba(241, 217, 148, 0.78) !important;
    text-shadow: 0 0 16px rgba(232, 95, 159, 0.28), 0 0 18px rgba(216, 181, 104, 0.24) !important;
}

.cm-muse-banner .main-title {
    font-size: clamp(1rem, 1.9vw, 1.72rem) !important;
    letter-spacing: clamp(5px, 0.82vw, 12px) !important;
}

.cm-muse-banner .main-title span {
    font-size: clamp(2.05rem, 4.25vw, 4.2rem) !important;
}

.cm-muse-banner .subtitle {
    margin-top: 7px !important;
    color: rgba(248, 236, 210, 0.78) !important;
    -webkit-text-fill-color: rgba(248, 236, 210, 0.78) !important;
    letter-spacing: clamp(0.18em, 0.55vw, 0.5em) !important;
}

.cm-muse-banner + .filter-pills-container {
    margin-top: 0 !important;
    border-top: 0 !important;
    background:
        linear-gradient(90deg, rgba(5, 2, 11, 0.95), rgba(46, 16, 55, 0.74) 50%, rgba(5, 2, 11, 0.95)),
        radial-gradient(circle at 50% 0%, rgba(232, 95, 159, 0.16), transparent 62%) !important;
}

@media (max-width: 900px) {
    .board-title-area.cm-muse-banner {
        min-height: 164px !important;
        gap: clamp(14px, 3.4vw, 34px) !important;
    }

    .cm-muse-banner + .filter-pills-container {
        margin-inline: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }

    .cm-banner-figure-left,
    .cm-banner-figure-right {
        opacity: 0.24;
    }

    .cm-muse-banner .muse-icon {
        height: clamp(86px, 15vw, 126px) !important;
        opacity: 0.42 !important;
    }
}

@media (max-width: 640px) {
    .board-title-area.cm-muse-banner {
        min-height: 154px !important;
        padding: 18px 16px 20px !important;
        gap: 8px !important;
    }

    .cm-banner-figure-left,
    .cm-banner-figure-right {
        bottom: -38px;
        opacity: 0.18;
    }

    .cm-banner-figure-left {
        left: -18px;
    }

    .cm-banner-figure-right {
        right: -18px;
    }

    .cm-banner-figure-center {
        opacity: 0.1;
    }

    .cm-muse-banner .muse-icon {
        display: none;
    }

    .cm-muse-banner .main-title {
        font-size: clamp(0.86rem, 4.8vw, 1.1rem) !important;
        letter-spacing: 4px !important;
    }

    .cm-muse-banner .main-title span {
        font-size: clamp(1.75rem, 10vw, 2.55rem) !important;
        letter-spacing: 7px !important;
    }

    .cm-muse-banner .subtitle {
        font-size: 0.64rem !important;
        letter-spacing: 0.24em !important;
    }
}

/* Cabecera exacta del mockup generado */
.board-title-area.cm-muse-banner {
    min-height: clamp(180px, 19vw, 245px) !important;
    padding: 0 !important;
    gap: 0 !important;
    background: url('./web_images/banner-musas-compact-wide.png') center center / cover no-repeat !important;
    border: 0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.44) !important;
}

.board-title-area.cm-muse-banner::before,
.board-title-area.cm-muse-banner::after {
    display: none !important;
}

.cm-muse-banner .cm-banner-silhouettes,
.cm-muse-banner .muse-icon,
.cm-muse-banner .title-wrap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cm-muse-banner + .filter-pills-container {
    margin-top: 0 !important;
    border-top: 1px solid rgba(216, 181, 104, 0.2) !important;
}

@media (max-width: 900px) {
    .board-title-area.cm-muse-banner {
        min-height: clamp(132px, 28vw, 180px) !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 640px) {
    .board-title-area.cm-muse-banner {
        min-height: clamp(112px, 31vw, 145px) !important;
    }
}

/* ============================================================
   Modal lector de relatos IRC
   ============================================================ */
.irc-modal {
    position: fixed;
    inset: 0;
    z-index: 100500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 1, 5, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.irc-modal.active {
    display: flex;
}

.irc-modal-inner {
    width: min(900px, 100%);
    height: min(88vh, 860px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, 0.26);
    border-radius: 18px;
    background:
        radial-gradient(circle at 22% 0%, rgba(219, 39, 119, 0.18), transparent 34%),
        linear-gradient(150deg, #160916 0%, #1c1022 48%, #09040d 100%);
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.82), 0 0 46px rgba(219, 39, 119, 0.22);
}

.irc-modal-header,
.irc-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 16px 22px;
    background: rgba(10, 5, 13, 0.88);
    border-bottom: 1px solid rgba(250, 204, 21, 0.18);
}

.terminal-dots {
    display: flex;
    gap: 6px;
}

.terminal-dots .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.terminal-dots .dot-red { background: #ff5f56; }
.terminal-dots .dot-yellow { background: #ffbd2e; }
.terminal-dots .dot-green { background: #27c93f; }

.irc-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f8e7bb;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 14px rgba(250, 204, 21, 0.22);
}

.irc-icon {
    color: #f0abfc;
    text-shadow: 0 0 12px rgba(217, 70, 239, 0.45);
}

.irc-close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #f8e7bb;
    cursor: pointer;
}

.irc-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.irc-controls-bar {
    flex-wrap: wrap;
    padding-block: 12px;
}

.irc-story-selector-wrapper,
.irc-view-toggles,
.irc-admin-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.irc-control-label {
    color: #d8b4fe;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.irc-story-select,
.irc-toggle-btn {
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 8px;
    background: rgba(20, 10, 24, 0.9);
    color: #fff7ed;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.irc-story-select {
    min-width: min(320px, 72vw);
    padding: 8px 12px;
}

.irc-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    cursor: pointer;
}

.irc-toggle-btn:hover,
.irc-toggle-btn.active {
    border-color: #f0abfc;
    background: linear-gradient(135deg, #831843 0%, #a21caf 100%);
    color: #fff;
    box-shadow: 0 0 16px rgba(217, 70, 239, 0.36);
}

.irc-toggle-btn.admin-only-btn {
    border-color: rgba(234, 179, 8, 0.38);
    color: #fbbf24;
}

.irc-log-viewer,
.irc-admin-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #08040a;
}

.irc-empty-state {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(124, 58, 237, 0.08), transparent 65%), #040206;
}

.irc-empty-screen {
    max-width: 360px;
}

.irc-empty-icon-wrap {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border: 1px solid rgba(124, 58, 237, 0.24);
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.08);
}

.irc-empty-icon {
    font-size: 2rem;
}

.irc-empty-signal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.irc-empty-signal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
}

.irc-empty-signal-text {
    color: #64748b;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}

.irc-empty-title {
    color: #94a3b8;
    font-size: 1.08rem;
    margin: 0 0 10px;
}

.irc-empty-desc {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.6;
    margin: 0 0 20px;
}

.irc-empty-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border: 1px solid rgba(124, 58, 237, 0.45);
    border-radius: 7px;
    background: transparent;
    color: #c084fc;
    font-family: 'Fira Code', 'Courier New', monospace;
    cursor: pointer;
}

.irc-empty-prompt {
    color: #4ade80;
}

.terminal-output {
    min-height: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: #0b0714;
    color: #4ade80;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.92rem;
    line-height: 1.6;
}

.terminal-session-header,
.terminal-session-footer {
    color: #00f3ff;
    font-weight: 700;
    margin-bottom: 14px;
}

.terminal-session-footer {
    margin-top: 18px;
}

.term-line {
    margin-bottom: 6px;
    padding: 1px 4px;
    border-radius: 4px;
    word-break: break-word;
}

.term-line:hover {
    background: rgba(255, 255, 255, 0.04);
}

.term-time { color: #64748b; margin-right: 8px; }
.term-sys { color: #ef4444; font-weight: 800; }
.term-sys-text { color: #fca5a5; font-style: italic; }
.term-action { color: #db2777; font-weight: 800; }
.term-action-text { color: #f472b6; font-style: italic; }
.term-nick { font-weight: 800; }
.term-text { color: #f8fafc; }
.term-line.type-narration {
    margin: 10px 0;
    padding-left: 10px;
    border-left: 2px solid #f59e0b;
    color: #fbbf24;
    font-style: italic;
}

.novel-output {
    min-height: 100%;
    padding: 30px 26px 34px;
    box-sizing: border-box;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 4%, rgba(250, 204, 21, 0.1), transparent 28%),
        radial-gradient(circle at center, #1b1020 0%, #09040d 100%);
    background-size: 100% 34px, auto, auto;
}

.novel-session-header {
    max-width: 720px;
    margin: 0 auto 28px;
    padding: 0 0 20px;
    text-align: center;
    border-bottom: 1px solid rgba(250, 204, 21, 0.18);
}

.novel-banner-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 13px;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 999px;
    color: #fde68a;
    background: rgba(250, 204, 21, 0.08);
    font-size: 0.72rem;
    font-weight: 800;
}

.novel-session-header h2 {
    margin: 0 0 8px;
    color: #fff7ed;
    font-family: 'Cinzel', serif;
    font-size: 1.62rem;
    letter-spacing: 0.02em;
}

.novel-banner-meta {
    color: #d8b4fe;
    font-size: 0.8rem;
}

.novel-story-flow {
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 auto;
}

.novel-row {
    display: flex;
    gap: 14px;
}

.novel-row.is-musa {
    flex-direction: row-reverse;
}

.novel-avatar-col {
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}

.novel-avatar-img,
.novel-avatar-placeholder {
    width: 44px;
    height: 44px;
    margin: 0 auto 6px;
    border-radius: 50%;
}

.novel-avatar-img {
    object-fit: cover;
    border: 2px solid #db2777;
}

.novel-avatar-placeholder {
    display: grid;
    place-items: center;
    border: 2px solid #64748b;
    background: rgba(15, 23, 42, 0.72);
    font-weight: 800;
}

.novel-avatar-name {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 700;
    word-break: break-word;
}

.novel-bubble-col {
    flex: 1;
    max-width: calc(100% - 74px);
}

.novel-row.is-musa .novel-bubble-col {
    display: flex;
    justify-content: flex-end;
}

.novel-speech-bubble {
    max-width: 88%;
    padding: 13px 17px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(31, 20, 39, 0.9);
    color: #fff7ed;
    line-height: 1.5;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.novel-row.is-musa .novel-speech-bubble {
    border-top-right-radius: 2px;
    border-color: rgba(244, 114, 182, 0.28);
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.94) 0%, rgba(112, 26, 117, 0.94) 100%);
}

.novel-row.is-other .novel-speech-bubble {
    border-top-left-radius: 2px;
    border-color: rgba(216, 180, 254, 0.16);
}

.novel-bubble-text {
    margin: 0;
}

.novel-bubble-time {
    display: block;
    margin-top: 5px;
    text-align: right;
    font-size: 0.65rem;
    opacity: 0.62;
}

.novel-system-msg,
.novel-action-msg,
.novel-narration-msg {
    align-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    color: #fde68a;
    background: rgba(250, 204, 21, 0.08);
    font-size: 0.8rem;
    text-align: center;
}

.novel-action-msg {
    color: #f0abfc;
    background: rgba(168, 85, 247, 0.08);
    font-style: italic;
}

.novel-narration-msg {
    align-self: stretch;
    border-left: 3px solid #facc15;
    border-radius: 0 8px 8px 0;
    background: rgba(250, 204, 21, 0.06);
    color: #fde68a;
    font-family: 'Playfair Display', serif;
    font-size: 0.98rem;
    line-height: 1.55;
    text-align: left;
}

.irc-admin-area {
    padding: 24px;
    background: rgba(13, 8, 22, 0.96);
}

.irc-admin-area .admin-title {
    margin: 0 0 20px;
    color: #f59e0b;
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
}

.irc-relato-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.irc-admin-area .form-group-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
}

.irc-relato-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.irc-relato-form label {
    color: #a78bfa;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.irc-relato-form input,
.irc-relato-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(124, 58, 237, 0.34);
    border-radius: 8px;
    outline: none;
    background: rgba(15, 10, 24, 0.9);
    color: #e2e8f0;
}

.irc-relato-form textarea {
    min-height: 180px;
    font-family: 'Fira Code', 'Courier New', monospace;
    resize: vertical;
}

.irc-admin-area .admin-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-admin-save,
.btn-admin-delete,
.btn-admin-cancel {
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.btn-admin-save {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    color: #fff;
}

.btn-admin-delete {
    border: 1px solid rgba(220, 38, 38, 0.45);
    background: rgba(220, 38, 38, 0.18);
    color: #fca5a5;
}

.btn-admin-cancel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

.irc-form-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
}

.irc-status-ok { border: 1px solid rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.irc-status-error { border: 1px solid rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.15); color: #fca5a5; }
.irc-status-warn { border: 1px solid rgba(234, 179, 8, 0.35); background: rgba(234, 179, 8, 0.12); color: #fde68a; }
.irc-status-info { border: 1px solid rgba(99, 102, 241, 0.3); background: rgba(99, 102, 241, 0.12); color: #a5b4fc; }

@media (max-width: 768px) {
    .irc-modal {
        padding: 10px;
    }

    .irc-modal-inner {
        height: 92vh;
    }

    .irc-admin-area .form-group-row {
        grid-template-columns: 1fr;
    }

    .irc-view-toggles,
    .irc-admin-controls,
    .irc-admin-area .admin-form-actions {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Dorso editorial de cartas - Codice de Musas
   ============================================================ */
.card-back {
    --back-gold: color-mix(in srgb, var(--badge-border, #d8b568) 82%, #fff4c7);
    --back-gold-soft: rgba(241, 217, 148, 0.78);
    --back-ink: #08030b;
    padding: 18px 18px 82px !important;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        radial-gradient(circle at 50% 12%, rgba(232, 95, 159, 0.16), transparent 34%),
        radial-gradient(circle at 50% 60%, rgba(216, 181, 104, 0.08), transparent 52%),
        linear-gradient(160deg, #180817 0%, #201027 48%, #07030d 100%) !important;
    background-size: 100% 28px, auto, auto, auto !important;
    border: 1px solid color-mix(in srgb, var(--badge-border, #d8b568) 72%, transparent) !important;
    outline: 1px solid rgba(241, 217, 148, 0.16) !important;
    outline-offset: -9px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 0 0 42px rgba(0, 0, 0, 0.72) !important;
}

.card-back::before,
.card-back::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.card-back::before {
    inset: 14px;
    border: 1px solid rgba(241, 217, 148, 0.16);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 42%, rgba(241, 217, 148, 0.055), transparent 39%),
        linear-gradient(90deg, rgba(241, 217, 148, 0.12), transparent 16%, transparent 84%, rgba(241, 217, 148, 0.12));
}

.card-back::after {
    content: '✦';
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    color: rgba(241, 217, 148, 0.055);
    font-family: 'Cinzel', serif;
    font-size: 8.5rem;
    line-height: 1;
    text-shadow: 0 0 28px rgba(232, 95, 159, 0.08);
}

.card-back-header,
.card-lore,
.card-tags,
.card-actions {
    position: relative;
    z-index: 2;
}

.card-back-header {
    margin: 0 0 12px !important;
    padding: 6px 10px 12px;
    text-align: center;
}

.card-back-header::before,
.card-back-header::after {
    content: '✦';
    position: absolute;
    bottom: -4px;
    color: rgba(241, 217, 148, 0.74);
    font-size: 0.62rem;
}

.card-back-header::before {
    left: 24%;
}

.card-back-header::after {
    right: 24%;
}

.card-back-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--back-gold) !important;
    font-family: 'Cinzel', serif !important;
    font-size: clamp(0.94rem, 1.35vw, 1.16rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.18 !important;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(241, 217, 148, 0.2), 0 2px 8px rgba(0, 0, 0, 0.72) !important;
}

.card-back-header h4::before,
.card-back-header h4::after {
    content: '' !important;
}

.card-back-header h5 {
    margin: 5px auto 0 !important;
    max-width: 92%;
    overflow: hidden;
    color: rgba(248, 236, 210, 0.7) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-back-header::after {
    width: 62%;
    height: 1px;
    left: 19%;
    right: auto;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(241, 217, 148, 0.7), transparent);
    color: transparent;
}

.card-lore {
    display: block !important;
    flex: 0 1 auto !important;
    min-height: 86px;
    max-height: 132px;
    margin: 0 2px 12px !important;
    padding: 13px 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(241, 217, 148, 0.16) !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background:
        linear-gradient(180deg, rgba(35, 18, 39, 0.84), rgba(13, 6, 18, 0.88)),
        radial-gradient(circle at 50% 0%, rgba(232, 95, 159, 0.12), transparent 54%) !important;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.34),
        0 10px 22px rgba(0, 0, 0, 0.18) !important;
    color: rgba(248, 236, 210, 0.82) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 0.8rem !important;
    font-style: italic;
    line-height: 1.48 !important;
    text-align: left;
    text-shadow: none !important;
}

.card-lore::before {
    content: '“' !important;
    position: static !important;
    float: left;
    margin: -9px 5px -12px 0;
    color: rgba(241, 217, 148, 0.55);
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    line-height: 1;
    text-shadow: none !important;
}

.card-lore::after {
    display: none !important;
}

.card-lore-placeholder {
    display: none !important;
}

.card-tags {
    flex: 1 1 auto !important;
    align-content: flex-start !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 0 12px !important;
    max-height: 54px;
    padding: 2px 4px 0 !important;
    overflow: hidden !important;
}

.tag-bubble {
    min-height: 20px;
    padding: 3px 8px !important;
    border: 1px solid rgba(241, 217, 148, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(241, 217, 148, 0.075) !important;
    color: rgba(248, 236, 210, 0.82) !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.075em !important;
    line-height: 1.1;
}

.tag-bubble::before {
    color: var(--back-gold-soft) !important;
    font-size: 0.45rem !important;
}

.card-actions {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 16px !important;
    transform: translateX(-50%);
    justify-content: center;
    gap: 8px !important;
    padding: 7px 9px;
    border: 1px solid rgba(241, 217, 148, 0.14);
    border-radius: 999px;
    background: rgba(7, 3, 13, 0.62);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(10px);
}

.action-btn {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(241, 217, 148, 0.2) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(241, 217, 148, 0.14), transparent 56%),
        rgba(22, 9, 28, 0.86) !important;
    color: var(--back-gold) !important;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 6px 12px rgba(0, 0, 0, 0.24) !important;
}

.action-btn:hover {
    border-color: rgba(240, 171, 252, 0.72) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(240, 171, 252, 0.2), transparent 56%),
        rgba(90, 24, 70, 0.92) !important;
    color: #fff7ed !important;
    transform: translateY(-2px) scale(1.08) !important;
}

.action-btn.delete-btn:hover {
    border-color: rgba(248, 113, 113, 0.78) !important;
    background: rgba(127, 29, 29, 0.88) !important;
    color: #fee2e2 !important;
}

.character-card.is-zoomed .card-back {
    padding: 30px 34px 96px !important;
    background:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 50% 10%, rgba(232, 95, 159, 0.2), transparent 32%),
        radial-gradient(circle at 50% 62%, rgba(216, 181, 104, 0.11), transparent 54%),
        linear-gradient(160deg, #1c091b 0%, #281433 48%, #09040d 100%) !important;
    background-size: 100% 34px, auto, auto, auto !important;
}

.character-card.is-zoomed .card-back::before {
    inset: 22px;
    border-radius: 14px;
}

.character-card.is-zoomed .card-back::after {
    font-size: 13rem;
    opacity: 1;
}

.character-card.is-zoomed .card-back-header {
    margin-bottom: 18px !important;
    padding-bottom: 18px;
}

.character-card.is-zoomed .card-back-header h4 {
    font-size: clamp(1.34rem, 3.2vw, 2.15rem) !important;
    letter-spacing: 0.14em !important;
}

.character-card.is-zoomed .card-back-header h5 {
    margin-top: 8px !important;
    max-width: 100%;
    font-size: clamp(0.68rem, 1.35vw, 0.92rem) !important;
    white-space: normal;
}

.character-card.is-zoomed .card-lore {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none;
    margin: 0 4px 18px !important;
    padding: 22px 24px !important;
    overflow-y: auto !important;
    color: rgba(255, 247, 237, 0.88) !important;
    font-size: clamp(0.96rem, 1.4vw, 1.14rem) !important;
    line-height: 1.66 !important;
    background:
        linear-gradient(180deg, rgba(35, 18, 39, 0.78), rgba(13, 6, 18, 0.84)),
        radial-gradient(circle at 50% 0%, rgba(232, 95, 159, 0.13), transparent 56%) !important;
}

.character-card.is-zoomed .card-lore::before {
    margin-top: -11px;
    font-size: 3.3rem;
}

.character-card.is-zoomed .card-tags {
    flex: 0 0 auto !important;
    justify-content: center !important;
    gap: 9px !important;
    margin-bottom: 18px !important;
    max-height: 70px;
    padding-bottom: 0 !important;
}

.character-card.is-zoomed .tag-bubble {
    min-height: 24px;
    padding: 5px 11px !important;
    font-size: 0.68rem !important;
}

.character-card.is-zoomed .card-actions {
    bottom: 22px !important;
    gap: 10px !important;
    padding: 8px 12px;
}

.character-card.is-zoomed .action-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
}

@media (max-width: 640px) {
    .card-back {
        padding: 16px 15px 78px !important;
    }

    .card-lore {
        max-height: 118px;
        font-size: 0.76rem !important;
    }

    .action-btn {
        width: 28px !important;
        height: 28px !important;
    }

    .character-card.is-zoomed .card-back {
        padding: 22px 20px 90px !important;
    }

    .character-card.is-zoomed .card-lore {
        padding: 18px !important;
    }
}

/* ============================================================
   Votación - rito sensual del códice
   ============================================================ */

.tinder-modal {
    background:
        radial-gradient(circle at 50% 18%, rgba(119, 28, 53, 0.26), transparent 34%),
        linear-gradient(135deg, rgba(10, 5, 9, 0.98), rgba(24, 8, 16, 0.97) 46%, rgba(6, 4, 7, 0.99)) !important;
    backdrop-filter: blur(18px) saturate(1.08);
    padding: 24px;
}

.tinder-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(248, 214, 138, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(248, 214, 138, 0.04) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    opacity: 0.38;
}

.tinder-header {
    top: 26px;
    left: 0;
    z-index: 3;
    padding: 0 86px;
}

.tinder-logo {
    margin: 0;
    color: #f8ead0;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(1.65rem, 3.2vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 0 24px rgba(162, 98, 52, 0.34);
}

.tinder-logo span {
    background: linear-gradient(135deg, #fff3cf, #c99a4f 45%, #b95773);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tinder-subtitle {
    margin-top: 8px;
    color: rgba(248, 234, 208, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.98rem;
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tinder-close {
    top: 0;
    right: 28px;
    width: 42px;
    height: 42px;
    color: rgba(248, 234, 208, 0.86);
    background: rgba(24, 10, 15, 0.86);
    border: 1px solid rgba(215, 170, 93, 0.32);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.tinder-close:hover {
    color: #fff3cf;
    background: rgba(94, 27, 44, 0.9);
    border-color: rgba(226, 180, 104, 0.66);
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 0 22px rgba(188, 79, 109, 0.28);
}

.tinder-device {
    width: min(92vw, 472px);
    height: min(78vh, 780px);
    min-height: 620px;
    margin-top: 72px;
    padding: 22px 24px 26px;
    background:
        linear-gradient(180deg, rgba(53, 19, 31, 0.92), rgba(13, 7, 10, 0.96)),
        repeating-linear-gradient(90deg, rgba(255, 238, 200, 0.025) 0 1px, transparent 1px 7px);
    border: 1px solid rgba(216, 170, 92, 0.38);
    border-radius: 26px;
    box-shadow:
        0 26px 80px rgba(0, 0, 0, 0.78),
        inset 0 0 0 1px rgba(255, 244, 214, 0.06),
        inset 0 0 46px rgba(113, 39, 61, 0.22);
}

.tinder-device::before {
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(237, 197, 121, 0.18);
    border-radius: 20px;
}

.tinder-ritual-progress {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 2px 0 14px;
    color: rgba(255, 239, 207, 0.74);
    font-family: 'Marcellus', serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
}

.tinder-ritual-progress::before,
.tinder-ritual-progress::after {
    content: '';
    display: inline-block;
    width: min(72px, 20%);
    height: 1px;
    margin: 0 12px 4px;
    background: linear-gradient(90deg, transparent, rgba(218, 174, 99, 0.65), transparent);
}

.tinder-container {
    width: 100%;
    max-width: 382px;
    height: min(56vh, 552px);
    min-height: 430px;
    margin: 0 auto 18px;
    perspective: 1600px;
}

.tinder-card {
    border-radius: 18px;
    background: #080608;
    border: 1px solid rgba(226, 179, 96, 0.46);
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.62),
        0 0 0 5px rgba(20, 8, 13, 0.9),
        0 0 0 6px rgba(226, 179, 96, 0.16);
}

.tinder-card::before {
    content: '';
    position: absolute;
    inset: 10px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255, 232, 181, 0.24);
    border-radius: 12px;
}

.tinder-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 226, 169, 0.08), transparent 24%),
        radial-gradient(circle at 50% 78%, rgba(147, 39, 67, 0.34), transparent 42%);
    mix-blend-mode: screen;
    opacity: 0.74;
}

.tinder-card img {
    filter: saturate(0.92) contrast(1.06) brightness(0.88);
}

.tinder-card-info {
    z-index: 3;
    width: calc(100% - 26px);
    left: 13px;
    bottom: 13px;
    padding: 68px 20px 21px;
    border: 1px solid rgba(237, 197, 121, 0.17);
    border-radius: 0 0 12px 12px;
    background:
        linear-gradient(to top, rgba(7, 4, 6, 0.96), rgba(31, 10, 18, 0.82) 62%, transparent);
    text-align: center;
}

.tinder-card-info h3 {
    color: #fff1d2;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.6rem, 4.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

.tinder-card-info p {
    color: rgba(255, 232, 196, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.98rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tinder-controls {
    position: relative;
    z-index: 2;
    width: 100%;
    gap: 14px;
    justify-content: center;
    margin-top: auto;
}

.tinder-btn.pass,
.tinder-btn.like {
    width: min(172px, 43%);
    height: 58px;
    gap: 9px;
    border-radius: 999px;
    font-size: 1rem;
    font-family: 'Marcellus', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(18, 8, 12, 0.92);
    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.36),
        inset 0 0 0 1px rgba(255, 245, 218, 0.04);
}

.tinder-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 0.95rem;
}

.tinder-btn strong {
    font-weight: 600;
}

.tinder-btn.pass {
    color: rgba(234, 205, 168, 0.86);
    border: 1px solid rgba(142, 118, 91, 0.46);
}

.tinder-btn.pass span {
    color: rgba(232, 203, 166, 0.86);
    background: rgba(97, 81, 71, 0.24);
}

.tinder-btn.like {
    color: #ffe7b7;
    border: 1px solid rgba(203, 122, 139, 0.58);
    background:
        linear-gradient(135deg, rgba(88, 24, 42, 0.94), rgba(31, 10, 18, 0.96));
}

.tinder-btn.like span {
    color: #ffd8df;
    background: rgba(185, 73, 101, 0.26);
}

.tinder-btn.pass:hover,
.tinder-btn.like:hover {
    transform: translateY(-2px);
}

.tinder-btn.pass:hover {
    color: #fff0d0;
    background: rgba(47, 31, 29, 0.94);
    border-color: rgba(218, 174, 99, 0.54);
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.44);
}

.tinder-btn.like:hover {
    background:
        linear-gradient(135deg, rgba(130, 36, 62, 0.98), rgba(56, 16, 31, 0.98));
    border-color: rgba(242, 186, 144, 0.72);
    box-shadow: 0 16px 34px rgba(146, 44, 75, 0.34);
}

.tinder-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none !important;
}

.tinder-cooldown-msg {
    width: 100%;
    margin: 16px 0 0;
    color: rgba(255, 239, 207, 0.78);
    background: rgba(22, 9, 14, 0.86);
    border: 1px solid rgba(215, 170, 93, 0.28);
    border-radius: 14px;
    font-family: 'Marcellus', serif;
    box-shadow: inset 0 0 26px rgba(126, 40, 67, 0.12);
}

.tinder-empty {
    background:
        linear-gradient(180deg, rgba(53, 19, 31, 0.95), rgba(13, 7, 10, 0.98));
    border-radius: 22px;
    padding: 32px;
}

.tinder-empty .empty-icon {
    color: #d9aa5d;
    font-size: 3rem;
    margin-bottom: 18px;
    text-shadow: 0 0 24px rgba(217, 170, 93, 0.34);
}

.tinder-empty h3 {
    color: #fff1d2;
    font-family: 'Cinzel', serif;
    font-size: 1.55rem;
}

.tinder-empty p {
    color: rgba(255, 232, 196, 0.7);
    font-family: 'Marcellus', serif;
}

.tinder-empty .btn-primary {
    background: linear-gradient(135deg, rgba(107, 32, 55, 0.96), rgba(42, 15, 24, 0.96));
    border: 1px solid rgba(226, 179, 96, 0.46);
    color: #fff1d2;
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
}

@media (max-width: 720px) {
    .tinder-modal {
        padding: 14px;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .tinder-header {
        position: relative;
        top: auto;
        padding: 14px 56px 8px;
    }

    .tinder-close {
        right: 10px;
        top: 10px;
    }

    .tinder-device {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 132px);
        margin-top: 8px;
        padding: 18px 16px 22px;
    }

    .tinder-container {
        height: min(58vh, 510px);
        min-height: 360px;
    }

    .tinder-controls {
        gap: 10px;
    }

    .tinder-btn.pass,
    .tinder-btn.like {
        width: 48%;
        height: 54px;
        font-size: 0.82rem;
        letter-spacing: 0.05em;
    }

    .tinder-ritual-progress::before,
    .tinder-ritual-progress::after {
        width: 16%;
        margin-inline: 7px;
    }
}

/* ============================================================
   Atelier de Musa - creación y edición de personajes
   ============================================================ */

.sidebar {
    width: 100vw !important;
    max-width: none;
    background:
        radial-gradient(circle at 76% 18%, rgba(127, 41, 69, 0.24), transparent 32%),
        linear-gradient(135deg, rgba(8, 5, 8, 0.98), rgba(25, 9, 17, 0.97) 48%, rgba(6, 4, 7, 0.99)) !important;
    border-right: 0 !important;
    box-shadow: none !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-18px) scale(0.985) !important;
    transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(242, 207, 137, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 207, 137, 0.035) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    opacity: 0.36;
}

.sidebar.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1) !important;
}

.atelier-shell {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100vw - 48px));
    height: min(860px, calc(100vh - 48px));
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f7ead2;
    background:
        linear-gradient(180deg, rgba(48, 18, 30, 0.93), rgba(13, 7, 10, 0.96)),
        repeating-linear-gradient(90deg, rgba(255, 238, 200, 0.022) 0 1px, transparent 1px 8px);
    border: 1px solid rgba(218, 174, 99, 0.36);
    border-radius: 24px;
    box-shadow:
        0 28px 88px rgba(0, 0, 0, 0.76),
        inset 0 0 0 1px rgba(255, 244, 214, 0.055),
        inset 0 0 56px rgba(122, 38, 64, 0.18);
}

.atelier-shell::before {
    content: '';
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border: 1px solid rgba(237, 197, 121, 0.16);
    border-radius: 18px;
}

.atelier-shell .app-header {
    flex: 0 0 auto;
    padding: 26px 34px 22px;
    border-bottom: 1px solid rgba(218, 174, 99, 0.24);
    background:
        linear-gradient(90deg, rgba(119, 36, 62, 0.2), transparent 58%),
        rgba(12, 6, 9, 0.28);
}

.atelier-kicker {
    display: block;
    margin-bottom: 6px;
    color: rgba(248, 234, 208, 0.58);
    font-family: 'Marcellus', serif;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.atelier-shell .app-header h1 {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, #fff1c9, #d4a65d 48%, #b95773);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.atelier-shell .app-header h1 span {
    margin-left: 8px;
    font-family: 'Great Vibes', cursive;
    font-size: 1.48em;
    letter-spacing: 0;
    background: linear-gradient(135deg, #ffd6df, #c96582);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.atelier-shell .app-header p {
    margin-top: 8px;
    max-width: 560px;
    color: rgba(248, 234, 208, 0.68);
    font-family: 'Marcellus', serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.atelier-shell .close-sidebar {
    width: 42px;
    height: 42px;
    color: rgba(248, 234, 208, 0.85);
    background: rgba(23, 9, 14, 0.86);
    border: 1px solid rgba(218, 174, 99, 0.32);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
}

.atelier-shell .close-sidebar:hover {
    color: #fff4d6;
    background: rgba(94, 27, 44, 0.92);
    border-color: rgba(226, 180, 104, 0.66);
    box-shadow: 0 0 22px rgba(188, 79, 109, 0.25);
}

.atelier-workspace {
    position: relative;
    z-index: 2;
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.72fr);
    gap: 28px;
    padding: 28px 34px 34px;
}

.atelier-workspace .character-form {
    min-height: 0;
    padding: 0 10px 0 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 174, 99, 0.36) transparent;
}

.atelier-workspace .character-form::-webkit-scrollbar {
    width: 6px;
}

.atelier-workspace .character-form::-webkit-scrollbar-thumb {
    background: rgba(218, 174, 99, 0.34);
    border-radius: 999px;
}

.form-section {
    position: relative;
    margin-bottom: 18px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 239, 207, 0.042), rgba(255, 239, 207, 0.018)),
        rgba(9, 5, 8, 0.34);
    border: 1px solid rgba(218, 174, 99, 0.18);
    border-radius: 14px;
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.18);
}

.form-section::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 43px;
    height: 1px;
    background: linear-gradient(90deg, rgba(218, 174, 99, 0.48), transparent);
}

.form-section-title {
    margin-bottom: 20px;
    color: #e1b76e;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.form-grid.two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.atelier-workspace .form-group {
    margin-bottom: 16px;
}

.atelier-workspace .form-group:last-child {
    margin-bottom: 0;
}

.atelier-workspace .form-group label {
    margin-bottom: 8px;
    color: rgba(248, 234, 208, 0.78);
    font-family: 'Marcellus', serif;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
}

.atelier-workspace .form-group input[type="text"],
.atelier-workspace .form-group input[type="url"],
.atelier-workspace .form-group textarea {
    border: 1px solid rgba(218, 174, 99, 0.22);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 238, 200, 0.06), rgba(255, 238, 200, 0.025)),
        rgba(16, 8, 12, 0.82);
    color: #fff0d1;
    font-family: 'Outfit', sans-serif;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
}

.atelier-workspace .form-group input::placeholder,
.atelier-workspace .form-group textarea::placeholder {
    color: rgba(248, 234, 208, 0.34);
}

.atelier-workspace .form-group input:focus,
.atelier-workspace .form-group textarea:focus {
    border-color: rgba(210, 113, 138, 0.76);
    background: rgba(24, 10, 16, 0.92);
    box-shadow:
        0 0 0 3px rgba(183, 82, 112, 0.16),
        inset 0 0 20px rgba(0, 0, 0, 0.26);
}

.atelier-workspace #custom-tags {
    margin-top: 12px;
}

.atelier-workspace .local-image-selector {
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px dashed rgba(218, 174, 99, 0.28);
    border-radius: 10px;
    background: rgba(255, 239, 207, 0.035);
}

.atelier-workspace .local-image-selector:hover {
    background: rgba(255, 239, 207, 0.055);
    border-color: rgba(210, 113, 138, 0.62);
}

.atelier-workspace .local-image-selector small {
    color: rgba(248, 234, 208, 0.58);
}

.atelier-workspace .local-image-selector input[type="file"] {
    color: rgba(248, 234, 208, 0.78);
}

.atelier-workspace .star-rating {
    justify-content: center;
    gap: 11px;
    padding: 13px 16px;
    border: 1px solid rgba(218, 174, 99, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 238, 200, 0.04), rgba(147, 39, 67, 0.13), rgba(255, 238, 200, 0.04)),
        rgba(13, 7, 10, 0.72);
}

.atelier-workspace .star-rating label {
    color: rgba(248, 234, 208, 0.28);
}

.atelier-workspace .star-rating label:not(.zero-star):hover,
.atelier-workspace .star-rating label:not(.zero-star):hover ~ label:not(.zero-star),
.atelier-workspace .star-rating input:checked ~ label:not(.zero-star) {
    color: #e6b86c;
    text-shadow: 0 0 12px rgba(230, 184, 108, 0.46);
}

.atelier-workspace .star-rating .zero-star {
    color: rgba(204, 116, 136, 0.38);
}

.atelier-workspace .star-rating input:checked + .zero-star,
.atelier-workspace .star-rating .zero-star:hover {
    color: #d2718a;
}

.atelier-workspace .tags-selector {
    gap: 9px;
}

.atelier-workspace .tag-checkbox span {
    border: 1px solid rgba(218, 174, 99, 0.2);
    border-radius: 999px;
    background: rgba(16, 8, 12, 0.7);
    color: rgba(248, 234, 208, 0.74);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.atelier-workspace .tag-checkbox input:checked + span {
    color: #fff1d2;
    border-color: rgba(226, 180, 104, 0.5);
    background:
        linear-gradient(135deg, rgba(111, 32, 57, 0.96), rgba(42, 15, 24, 0.96));
    box-shadow: 0 8px 18px rgba(111, 32, 57, 0.24);
}

.atelier-workspace .form-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 0 2px;
    background: linear-gradient(180deg, transparent, rgba(17, 7, 12, 0.96) 34%);
}

.atelier-workspace .btn-primary,
.atelier-workspace .btn-secondary {
    min-height: 52px;
    border-radius: 999px;
    font-family: 'Marcellus', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.atelier-workspace .btn-primary {
    background:
        linear-gradient(135deg, rgba(117, 34, 60, 0.98), rgba(44, 15, 25, 0.98));
    border: 1px solid rgba(226, 180, 104, 0.5);
    color: #fff1d2;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
}

.atelier-workspace .btn-primary:hover {
    background:
        linear-gradient(135deg, rgba(143, 43, 73, 0.98), rgba(67, 19, 36, 0.98));
    border-color: rgba(242, 186, 144, 0.74);
    box-shadow: 0 16px 34px rgba(146, 44, 75, 0.32);
}

.atelier-workspace .btn-secondary {
    width: auto;
    padding: 0 24px;
    color: rgba(248, 234, 208, 0.82);
    background: rgba(16, 8, 12, 0.78);
    border: 1px solid rgba(218, 174, 99, 0.28);
    box-shadow: none;
}

.atelier-workspace .btn-secondary:hover {
    color: #fff1d2;
    background: rgba(45, 28, 26, 0.92);
    border-color: rgba(218, 174, 99, 0.52);
}

.atelier-preview {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgba(218, 174, 99, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 16%, rgba(188, 79, 109, 0.16), transparent 36%),
        rgba(7, 4, 6, 0.34);
}

.atelier-preview-label {
    width: 100%;
    margin-bottom: 14px;
    color: rgba(248, 234, 208, 0.58);
    font-family: 'Marcellus', serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-align: center;
    text-transform: uppercase;
}

.atelier-card-preview {
    width: min(100%, 376px);
    aspect-ratio: 0.68;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 179, 96, 0.46);
    border-radius: 18px;
    background: #080608;
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.62),
        0 0 0 5px rgba(20, 8, 13, 0.9),
        0 0 0 6px rgba(226, 179, 96, 0.14);
}

.atelier-card-preview::before {
    content: '';
    position: absolute;
    inset: 10px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255, 232, 181, 0.24);
    border-radius: 12px;
}

.atelier-card-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 226, 169, 0.08), transparent 24%),
        radial-gradient(circle at 50% 76%, rgba(147, 39, 67, 0.36), transparent 44%);
    mix-blend-mode: screen;
    opacity: 0.72;
}

.atelier-preview-image-wrap {
    position: absolute;
    inset: 0;
}

.atelier-preview-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.06) brightness(0.88);
}

.atelier-preview-info {
    position: absolute;
    z-index: 3;
    left: 13px;
    right: 13px;
    bottom: 13px;
    padding: 72px 19px 20px;
    border: 1px solid rgba(237, 197, 121, 0.17);
    border-radius: 0 0 12px 12px;
    background:
        linear-gradient(to top, rgba(7, 4, 6, 0.97), rgba(31, 10, 18, 0.83) 66%, transparent);
    text-align: center;
}

.atelier-preview-rating {
    min-height: 20px;
    margin-bottom: 4px;
    color: #e6b86c;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.atelier-preview-info h2 {
    margin: 0 0 5px;
    color: #fff1d2;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.35rem, 2.4vw, 2.05rem);
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

.atelier-preview-info p {
    margin: 0;
    color: rgba(255, 232, 196, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.atelier-preview-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.atelier-preview-tags span {
    padding: 3px 8px;
    border: 1px solid rgba(218, 174, 99, 0.22);
    border-radius: 999px;
    color: rgba(248, 234, 208, 0.78);
    background: rgba(255, 239, 207, 0.07);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.atelier-preview-info blockquote {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 13px 0 0;
    overflow: hidden;
    color: rgba(248, 234, 208, 0.72);
    font-family: 'Playfair Display', serif;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.42;
}

@media (max-width: 980px) {
    .atelier-shell {
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);
        margin: 12px;
    }

    .atelier-workspace {
        grid-template-columns: 1fr;
        overflow-y: auto;
        padding: 22px;
    }

    .atelier-workspace .character-form {
        overflow: visible;
        padding: 0;
    }

    .atelier-preview {
        min-height: 560px;
    }
}

@media (max-width: 640px) {
    .atelier-shell {
        border-radius: 18px;
    }

    .atelier-shell .app-header {
        padding: 22px 20px 18px;
    }

    .atelier-shell .app-header h1 {
        font-size: 1.35rem;
        letter-spacing: 0.06em;
    }

    .atelier-workspace {
        gap: 20px;
        padding: 18px;
    }

    .form-grid.two-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-section {
        padding: 16px;
    }

    .atelier-workspace .form-actions {
        grid-template-columns: 1fr;
    }

    .atelier-workspace .btn-secondary {
        width: 100%;
    }

    .atelier-preview {
        min-height: 500px;
        padding: 12px;
    }
}

/* ============================================================
   Círculo de Usuarios - perfiles y avatares
   ============================================================ */

.session-avatar,
.login-fab-avatar,
.user-admin-avatar,
.user-profile-avatar,
.user-form-avatar-preview,
.review-user-avatar,
.proposal-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    color: #fff1d2;
    background:
        radial-gradient(circle at 50% 18%, rgba(226, 180, 104, 0.28), transparent 58%),
        linear-gradient(135deg, rgba(89, 26, 48, 0.96), rgba(20, 8, 13, 0.96));
    border: 1px solid rgba(226, 180, 104, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 214, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.28);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.session-avatar img,
.login-fab-avatar img,
.user-admin-avatar img,
.user-profile-avatar img,
.user-form-avatar-preview img,
.review-user-avatar img,
.proposal-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.session-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
}

.login-fab-avatar {
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: none;
    font-size: 0.85rem;
}

#admin-bar-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.session-username {
    color: rgba(255, 241, 210, 0.92);
}

.users-list {
    gap: 12px;
}

.users-admin-modal .dashboard-inner {
    border-color: rgba(218, 174, 99, 0.32);
}

.users-admin-modal .dashboard-header-title h2 {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

.users-admin-modal .dashboard-inner {
    width: min(1180px, calc(100vw - 40px));
}

.users-admin-modal .dashboard-content {
    padding: 0;
}

.users-circle-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
    gap: 22px;
    min-height: min(68vh, 680px);
    padding: 22px;
}

.users-circle-list-panel,
.user-profile-panel {
    min-height: 0;
    border: 1px solid rgba(218, 174, 99, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 239, 207, 0.04), rgba(255, 239, 207, 0.015)),
        rgba(8, 5, 8, 0.42);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.18);
}

.users-circle-list-panel {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.users-circle-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.users-circle-summary div {
    padding: 13px 12px;
    border: 1px solid rgba(218, 174, 99, 0.16);
    border-radius: 12px;
    background: rgba(255, 239, 207, 0.035);
    text-align: center;
}

.users-circle-summary span {
    display: block;
    color: #fff1d2;
    font-family: 'Cinzel', serif;
    font-size: 1.28rem;
    line-height: 1;
}

.users-circle-summary small {
    display: block;
    margin-top: 6px;
    color: rgba(248, 234, 208, 0.54);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.users-circle-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.users-circle-kicker {
    display: block;
    color: rgba(248, 234, 208, 0.52);
    font-family: 'Marcellus', serif;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.users-circle-toolbar strong {
    color: #e6b86c;
    font-family: 'Marcellus', serif;
    font-size: 1.02rem;
}

.user-item {
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(255, 239, 207, 0.045), rgba(255, 239, 207, 0.018)),
        rgba(13, 7, 10, 0.58);
    border: 1px solid rgba(218, 174, 99, 0.18);
    border-radius: 14px;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.user-item:hover {
    background:
        linear-gradient(180deg, rgba(255, 239, 207, 0.065), rgba(255, 239, 207, 0.026)),
        rgba(31, 10, 18, 0.68);
    border-color: rgba(210, 113, 138, 0.36);
}

.user-admin-avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px;
    align-items: center;
    color: rgba(248, 234, 208, 0.58);
    font-size: 0.68rem;
    white-space: nowrap;
}

.user-mini-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.user-mini-stats strong {
    color: #e6b86c;
    font-family: 'Cinzel', serif;
}

.user-username {
    color: #fff1d2;
    font-family: 'Marcellus', serif;
    font-size: 1rem;
}

.user-last-seen {
    color: rgba(248, 234, 208, 0.46);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.user-role {
    border-radius: 999px;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
}

.user-role.admin {
    background: rgba(226, 180, 104, 0.14);
    color: #e6b86c;
    border-color: rgba(226, 180, 104, 0.4);
}

.user-role.viewer,
.user-role.editor {
    background: rgba(115, 78, 132, 0.2);
    color: #d9c6e8;
    border-color: rgba(185, 150, 205, 0.32);
}

.user-role.fan {
    background: rgba(185, 73, 101, 0.18);
    color: #f0a3b9;
    border-color: rgba(203, 122, 139, 0.36);
}

.user-actions {
    margin-left: auto;
}

.users-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.btn-new-user {
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid rgba(226, 180, 104, 0.42);
    border-radius: 999px;
    color: #fff1d2;
    background: linear-gradient(135deg, rgba(117, 34, 60, 0.92), rgba(44, 15, 25, 0.94));
    font-family: 'Marcellus', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-new-user:hover {
    border-color: rgba(242, 186, 144, 0.7);
    transform: translateY(-1px);
}

.btn-user-action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: rgba(255, 241, 210, 0.76);
    background: rgba(18, 8, 12, 0.74);
    border: 1px solid rgba(218, 174, 99, 0.2);
}

.btn-user-action:hover {
    color: #fff1d2;
    background: rgba(94, 27, 44, 0.82);
    border-color: rgba(226, 180, 104, 0.54);
}

.user-form {
    gap: 16px;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(255, 239, 207, 0.05), rgba(255, 239, 207, 0.018)),
        rgba(9, 5, 8, 0.5);
    border: 1px solid rgba(218, 174, 99, 0.2);
    border-radius: 16px;
}

.user-profile-panel {
    padding: 18px;
}

.user-profile-card,
.user-profile-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.user-profile-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(248, 234, 208, 0.62);
}

.user-profile-empty span {
    color: #e6b86c;
    font-size: 2.2rem;
    margin-bottom: 14px;
}

.user-profile-empty strong {
    color: #fff1d2;
    font-family: 'Cinzel', serif;
}

.user-profile-empty p {
    max-width: 260px;
    margin-top: 8px;
    line-height: 1.5;
}

.user-profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(218, 174, 99, 0.16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 20%, rgba(185, 73, 101, 0.16), transparent 42%),
        rgba(255, 239, 207, 0.035);
}

.user-profile-avatar {
    width: 84px;
    height: 84px;
    font-size: 1.6rem;
}

.user-profile-hero h3 {
    margin: 0 0 8px;
    color: #fff1d2;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
}

.user-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.user-profile-last-seen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(218, 174, 99, 0.16);
    border-radius: 12px;
    background: rgba(255, 239, 207, 0.035);
}

.user-profile-last-seen span {
    color: rgba(248, 234, 208, 0.52);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.user-profile-last-seen strong {
    color: #fff1d2;
    font-family: 'Marcellus', serif;
    font-weight: 500;
}

.user-profile-stats div {
    padding: 14px 10px;
    border: 1px solid rgba(218, 174, 99, 0.16);
    border-radius: 12px;
    background: rgba(18, 8, 12, 0.52);
    text-align: center;
}

.user-profile-stats strong {
    display: block;
    color: #e6b86c;
    font-family: 'Cinzel', serif;
    font-size: 1.24rem;
}

.user-profile-stats span {
    display: block;
    margin-top: 5px;
    color: rgba(248, 234, 208, 0.56);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.user-profile-note {
    color: rgba(248, 234, 208, 0.62);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    line-height: 1.5;
}

.user-profile-edit {
    margin-top: auto;
    align-self: flex-start;
}

.user-form-title {
    color: #e6b86c;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.user-avatar-editor {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(218, 174, 99, 0.16);
    border-radius: 14px;
    background: rgba(255, 239, 207, 0.035);
}

.user-form-avatar-preview {
    width: 82px;
    height: 82px;
    font-size: 1.45rem;
}

.user-avatar-fields {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-avatar-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(218, 174, 99, 0.28);
    border-radius: 999px;
    color: rgba(255, 241, 210, 0.82);
    background: rgba(18, 8, 12, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.82rem;
    cursor: pointer;
}

.user-avatar-file input {
    display: none;
}

.user-form-group label {
    color: rgba(248, 234, 208, 0.64);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.user-form-group input,
.user-form-group select {
    border: 1px solid rgba(218, 174, 99, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 238, 200, 0.05), rgba(255, 238, 200, 0.02)),
        rgba(16, 8, 12, 0.82);
    color: #fff0d1;
}

.user-form-group input:focus,
.user-form-group select:focus {
    border-color: rgba(210, 113, 138, 0.76);
    box-shadow: 0 0 0 3px rgba(183, 82, 112, 0.14);
}

.btn-save-user {
    background: linear-gradient(135deg, rgba(117, 34, 60, 0.98), rgba(44, 15, 25, 0.98));
    border-color: rgba(226, 180, 104, 0.5);
    color: #fff1d2;
}

.btn-save-user:hover {
    background: linear-gradient(135deg, rgba(143, 43, 73, 0.98), rgba(67, 19, 36, 0.98));
    box-shadow: 0 14px 28px rgba(146, 44, 75, 0.24);
}

.btn-cancel-user {
    border-color: rgba(218, 174, 99, 0.24);
    color: rgba(248, 234, 208, 0.62);
}

.review-author-wrap,
.mis-propuesta-user,
.admin-propuesta-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.review-user-avatar,
.proposal-user-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.78rem;
}

.review-author-wrap .review-author,
.mis-propuesta-user span:last-child,
.admin-propuesta-user > span:not(.proposal-user-avatar):not(.estado-badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mis-propuesta-user {
    color: rgba(255, 241, 210, 0.84);
    font-family: 'Marcellus', serif;
    font-size: 0.9rem;
}

.admin-propuesta-user {
    color: rgba(255, 241, 210, 0.9);
}

@media (max-width: 640px) {
    .users-circle-shell {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .users-circle-summary,
    .user-profile-stats {
        grid-template-columns: 1fr;
    }

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

    .user-item,
    .user-avatar-editor {
        align-items: flex-start;
    }

    .user-item {
        flex-wrap: wrap;
    }

    .user-mini-stats {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .user-avatar-editor {
        grid-template-columns: 1fr;
    }

    .user-form-avatar-preview {
        width: 72px;
        height: 72px;
    }

    .user-actions {
        flex-direction: column;
    }
}

/* ============================================================
   PROPUESTAS · Reskin arcano alineado con el tablero actual
   ============================================================ */
.propuesta-modal {
    background:
        radial-gradient(circle at 50% 0%, rgba(58, 31, 86, 0.38), transparent 42%),
        rgba(0, 0, 0, 0.76) !important;
}

.propuesta-modal-inner {
    max-width: 980px !important;
    border-radius: var(--cm-radius, 8px) !important;
    overflow: hidden !important;
}

.propuesta-modal-title {
    font-family: 'Cinzel', serif !important;
    font-size: 1.18rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

.propuesta-modal-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--cm-line-strong);
    background:
        radial-gradient(circle, rgba(232, 95, 159, 0.26), transparent 58%),
        linear-gradient(160deg, #2a173f, #0d0617);
    color: var(--cm-gold-soft);
    font-size: 1rem !important;
    filter: drop-shadow(0 0 10px rgba(216, 181, 104, 0.18)) !important;
}

.propuesta-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .76fr);
    gap: 22px;
}

.propuesta-hint {
    background: rgba(216, 181, 104, 0.08) !important;
    border-left-color: var(--cm-gold) !important;
    color: rgba(248, 236, 210, 0.74) !important;
    border-radius: 0 var(--cm-radius) var(--cm-radius) 0 !important;
}

.propuesta-field label {
    color: var(--cm-gold-soft) !important;
    letter-spacing: .16em !important;
}

.propuesta-textarea {
    min-height: 168px;
}

.propuesta-textarea:focus,
.propuesta-drop-zone:hover,
.propuesta-drop-zone.drag-over,
.admin-propuesta-nota-input:focus {
    border-color: var(--cm-line-strong) !important;
    box-shadow: 0 0 18px rgba(216, 181, 104, 0.16) !important;
}

.propuesta-char-counter {
    color: var(--cm-muted) !important;
}

.propuesta-drop-zone {
    min-height: 164px;
    border-style: dashed !important;
    border-color: var(--cm-line-strong) !important;
    background:
        linear-gradient(135deg, rgba(216, 181, 104, 0.08), rgba(232, 95, 159, 0.07)),
        rgba(7, 3, 15, 0.58) !important;
}

.propuesta-drop-zone.has-image {
    border-style: solid !important;
    border-color: rgba(216, 181, 104, 0.48) !important;
}

.propuesta-drop-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 1px solid rgba(232, 95, 159, 0.34);
    background: rgba(232, 95, 159, 0.09);
    color: var(--cm-rose);
    font-size: 1.35rem !important;
    opacity: 1 !important;
}

.propuesta-drop-text {
    color: var(--cm-gold-soft) !important;
    font-weight: 700 !important;
}

.propuesta-drop-sub {
    color: rgba(248, 236, 210, 0.62) !important;
}

.propuesta-preview-img {
    height: 220px !important;
    border-radius: 0 !important;
}

.propuesta-preview-panel {
    min-height: 100%;
    border: 1px solid rgba(216, 181, 104, 0.18);
    border-radius: var(--cm-radius);
    background:
        radial-gradient(circle at 50% 0, rgba(216, 181, 104, 0.13), transparent 34%),
        rgba(20, 9, 31, 0.62);
    overflow: hidden;
}

.propuesta-preview-art {
    position: relative;
    min-height: 210px;
    background-image:
        linear-gradient(180deg, transparent 46%, rgba(6, 3, 13, 0.94) 100%),
        url("./imagenes/musa-silueta.png");
    background-size: auto 78%, cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-bottom: 1px solid rgba(216, 181, 104, 0.12);
}

.propuesta-preview-art span {
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-family: 'Cinzel', serif;
    font-size: .74rem;
    letter-spacing: .2em;
    color: var(--cm-gold-soft);
    text-transform: uppercase;
}

.propuesta-preview-body {
    padding: 17px;
}

.propuesta-preview-kicker {
    display: block;
    font-family: 'Marcellus', serif;
    color: var(--cm-muted);
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.propuesta-preview-body h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    color: var(--cm-ivory);
    font-size: 1.35rem;
    font-weight: 500;
}

.propuesta-preview-body p {
    margin: 10px 0 0;
    color: rgba(248, 236, 210, 0.68);
    font-size: .88rem;
    line-height: 1.55;
}

.propuesta-preview-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.propuesta-preview-pills span {
    border: 1px solid rgba(216, 181, 104, 0.2);
    border-radius: 999px;
    background: rgba(216, 181, 104, 0.08);
    color: var(--cm-gold-soft);
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
    padding: 7px 6px;
}

.propuesta-submit-btn {
    min-width: 164px;
}

.mis-propuestas-list {
    max-height: min(58vh, 520px) !important;
}

.mis-propuesta-card,
.admin-propuesta-card {
    position: relative;
    background:
        radial-gradient(circle at 0% 0%, rgba(216, 181, 104, 0.06), transparent 34%),
        rgba(20, 9, 31, 0.62) !important;
}

.mis-propuesta-img {
    max-height: 180px !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.mis-propuesta-card-body {
    padding: 15px 16px 16px !important;
}

.mis-propuesta-trasfondo,
.admin-propuesta-trasfondo {
    color: rgba(248, 236, 210, 0.74) !important;
}

.mis-propuesta-nota {
    background: rgba(216, 181, 104, 0.08) !important;
    border-left-color: var(--cm-gold) !important;
    color: rgba(248, 236, 210, 0.72) !important;
}

.propuestas-admin-filters {
    background: rgba(7, 3, 15, 0.44) !important;
    border-bottom: 1px solid rgba(216, 181, 104, 0.16) !important;
}

#propuestas-admin-modal .dashboard-inner {
    max-width: min(1180px, calc(100vw - 32px)) !important;
}

#propuestas-admin-modal .dashboard-header {
    padding: 22px 26px !important;
    background:
        radial-gradient(circle at 0% 50%, rgba(216, 181, 104, 0.16), transparent 34%),
        linear-gradient(90deg, rgba(216, 181, 104, 0.1), rgba(232, 95, 159, 0.04), transparent) !important;
}

#propuestas-admin-modal .dashboard-header-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cm-line-strong);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(232, 95, 159, 0.22), transparent 58%),
        linear-gradient(160deg, #2a173f, #0d0617);
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 1rem !important;
}

#propuestas-admin-modal .dashboard-header h2 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}

.propuestas-admin-subtitle {
    margin: 4px 0 0;
    color: var(--cm-muted);
    font-family: 'Marcellus', serif;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#propuestas-admin-modal .dashboard-content {
    gap: 16px !important;
    padding: 20px 24px 28px !important;
}

.propuestas-admin-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(216, 181, 104, 0.18);
    border-radius: var(--cm-radius);
    background:
        radial-gradient(circle at 0% 0%, rgba(216, 181, 104, 0.1), transparent 34%),
        rgba(7, 3, 15, 0.44);
}

.propuestas-admin-kicker {
    display: block;
    margin-bottom: 5px;
    font-family: 'Marcellus', serif;
    color: var(--cm-muted);
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.propuestas-admin-overview h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    color: var(--cm-gold-soft);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: .08em;
}

.propuestas-admin-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.propuestas-admin-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(216, 181, 104, 0.16);
    border-radius: 999px;
    background: rgba(216, 181, 104, 0.07);
    color: rgba(248, 236, 210, 0.68);
    font-size: .78rem;
}

.propuestas-admin-stats strong {
    color: var(--cm-gold-soft);
    font-size: .95rem;
}

.propuestas-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 16px;
}

.admin-propuesta-card {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 0;
    min-height: 260px;
    border-radius: 10px !important;
    overflow: hidden;
}

.admin-propuesta-header {
    align-items: flex-start !important;
    border-bottom-color: rgba(216, 181, 104, 0.12) !important;
    padding: 0 0 10px !important;
}

.admin-propuesta-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px;
}

.admin-propuesta-media {
    position: relative;
    min-height: 100%;
    border-right: 1px solid rgba(216, 181, 104, 0.14);
    background:
        radial-gradient(circle at 50% 30%, rgba(216, 181, 104, 0.12), transparent 42%),
        rgba(7, 3, 15, 0.64);
}

.admin-propuesta-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    filter: saturate(.96) contrast(1.03);
    transition: transform .25s ease, filter .25s ease;
}

.admin-propuesta-card:hover .admin-propuesta-media img {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.06);
}

.admin-propuesta-no-img {
    height: 100%;
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--cm-muted);
    font-family: 'Marcellus', serif;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.admin-propuesta-no-img::before {
    content: "✦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -78%);
    color: rgba(216, 181, 104, 0.18);
    font-size: 4rem;
}

.admin-propuesta-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px !important;
    border-top-color: rgba(216, 181, 104, 0.12) !important;
    padding: 12px 0 0 !important;
    margin-top: auto;
}

.admin-actions-row {
    width: auto !important;
}

.admin-status-btns {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, auto));
    justify-content: start;
    gap: 8px !important;
}

.admin-propuesta-fecha {
    margin-bottom: 12px;
    color: var(--cm-muted) !important;
}

.admin-propuesta-trasfondo {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
}

.btn-estado,
.btn-create-musa,
.btn-delete-admin,
.btn-delete {
    border-radius: var(--cm-radius) !important;
}

.btn-create-musa {
    background: rgba(216, 181, 104, 0.15) !important;
    color: var(--cm-gold-soft) !important;
    border-color: rgba(216, 181, 104, 0.38) !important;
}

.btn-create-musa:hover {
    background: rgba(216, 181, 104, 0.24) !important;
    box-shadow: 0 8px 20px rgba(216, 181, 104, 0.12);
}

.propuesta-toast {
    background: linear-gradient(135deg, rgba(216, 181, 104, 0.95), rgba(232, 95, 159, 0.95)) !important;
    color: #16091d !important;
}

@media (max-width: 860px) {
    .propuesta-modal-inner {
        max-width: min(540px, calc(100vw - 24px)) !important;
    }

    .propuesta-create-layout,
    .admin-propuesta-card,
    .admin-propuesta-actions {
        grid-template-columns: 1fr !important;
    }

    .propuesta-preview-panel {
        min-height: auto;
    }

    .propuesta-preview-art {
        min-height: 150px;
    }

    .propuestas-admin-overview {
        align-items: flex-start;
        flex-direction: column;
    }

    .propuestas-admin-stats {
        justify-content: flex-start;
    }

    .propuestas-admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-propuesta-media {
        border-right: 0;
        border-bottom: 1px solid rgba(216, 181, 104, 0.14);
    }

    .admin-propuesta-media img,
    .admin-propuesta-no-img {
        min-height: 190px;
        max-height: 220px;
    }

    .admin-status-btns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .propuesta-modal {
        padding: 10px !important;
    }

    .propuesta-modal-title {
        font-size: .98rem !important;
        letter-spacing: .06em !important;
    }

    .propuesta-tab {
        padding: 10px 8px !important;
        font-size: .82rem !important;
    }

    .propuesta-tab-content {
        padding: 16px !important;
    }

    .propuesta-preview-pills {
        grid-template-columns: 1fr;
    }

    .admin-status-btns > * {
        flex: 1 1 100%;
        justify-content: center;
    }

    .admin-status-btns {
        grid-template-columns: 1fr;
    }
}

/* Compatibilidad: rediseña también el markup admin antiguo generado por auth.js cacheado. */
.admin-propuesta-card:has(.admin-propuesta-body) {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) !important;
    grid-template-areas:
        "head head"
        "media copy"
        "actions actions" !important;
    gap: 0 !important;
    min-height: 292px;
    overflow: hidden !important;
    border-radius: 10px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(216, 181, 104, 0.08), transparent 36%),
        rgba(12, 5, 21, 0.88) !important;
}

.admin-propuesta-card:has(.admin-propuesta-body)::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(216, 181, 104, 0.2);
    border-radius: inherit;
    box-shadow: inset 0 0 34px rgba(216, 181, 104, 0.05);
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-header {
    grid-area: head;
    padding: 14px 16px !important;
    background: linear-gradient(90deg, rgba(216, 181, 104, 0.08), rgba(232, 95, 159, 0.04), transparent);
    border-bottom: 1px solid rgba(216, 181, 104, 0.14) !important;
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-body {
    display: contents !important;
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-img-wrap {
    grid-area: media;
    position: relative;
    min-width: 0 !important;
    min-height: 210px;
    border-right: 1px solid rgba(216, 181, 104, 0.14);
    background:
        radial-gradient(circle at 50% 30%, rgba(216, 181, 104, 0.12), transparent 42%),
        rgba(7, 3, 15, 0.64);
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    min-height: 210px;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
    display: block;
    box-shadow: none !important;
    filter: saturate(.96) contrast(1.03);
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-img-wrap:not(:has(img)) {
    display: grid;
    place-items: center;
    color: var(--cm-muted) !important;
    font-family: 'Marcellus', serif;
    font-size: .78rem !important;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-img-wrap:not(:has(img))::before {
    content: "✦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -78%);
    color: rgba(216, 181, 104, 0.18);
    font-size: 4rem;
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-trasfondo {
    grid-area: copy;
    padding: 18px 18px 12px;
    font-size: .94rem !important;
    line-height: 1.68 !important;
    color: rgba(248, 236, 210, 0.78) !important;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-actions {
    grid-area: actions;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto !important;
    align-items: center;
    gap: 12px !important;
    padding: 13px 16px 16px !important;
    border-top: 1px solid rgba(216, 181, 104, 0.14) !important;
    background: rgba(7, 3, 15, 0.34);
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-status-btns {
    display: flex !important;
    justify-content: flex-end;
    gap: 8px !important;
}

.admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-nota-input {
    min-height: 38px;
}

#propuestas-admin-modal .filter-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(216, 181, 104, 0.14) !important;
    background: rgba(216, 181, 104, 0.05) !important;
    color: rgba(248, 236, 210, 0.68) !important;
}

#propuestas-admin-modal .filter-btn.active {
    border-color: var(--cm-line-strong) !important;
    background: linear-gradient(120deg, rgba(216, 181, 104, 0.18), rgba(232, 95, 159, 0.12)) !important;
    color: var(--cm-gold-soft) !important;
}

@media (max-width: 860px) {
    .admin-propuesta-card:has(.admin-propuesta-body) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "head"
            "media"
            "copy"
            "actions" !important;
    }

    .admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-img-wrap {
        border-right: 0;
        border-bottom: 1px solid rgba(216, 181, 104, 0.14);
    }

    .admin-propuesta-card:has(.admin-propuesta-body) .admin-propuesta-actions {
        grid-template-columns: 1fr !important;
    }

    .admin-propuesta-card:has(.admin-propuesta-body) .admin-status-btns {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ============================================================
   PROPUESTAS ADMIN · Implementación final del mockup validado
   ============================================================ */
#propuestas-admin-modal {
    background:
        radial-gradient(circle at 50% -16%, rgba(58, 31, 86, 0.46), transparent 42%),
        rgba(0, 0, 0, 0.78) !important;
}

#propuestas-admin-modal .dashboard-inner {
    max-width: min(1360px, calc(100vw - 32px)) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 50% -20%, rgba(58, 31, 86, 0.4), transparent 42%),
        rgba(10, 5, 18, 0.98) !important;
}

#propuestas-admin-modal .dashboard-header {
    min-height: 82px;
    padding: 20px 26px !important;
}

#propuestas-admin-modal .dashboard-header h2 {
    color: var(--cm-gold-soft) !important;
    font-size: 1.42rem !important;
    letter-spacing: .2em !important;
}

#propuestas-admin-modal .propuestas-admin-filters {
    gap: 10px !important;
    padding: 14px 24px !important;
}

#propuestas-admin-modal .filter-btn {
    min-height: 34px;
    padding: 8px 14px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
}

#propuestas-admin-modal .dashboard-content {
    padding: 18px 24px 26px !important;
    gap: 18px !important;
}

#propuestas-admin-modal .propuestas-admin-overview {
    min-height: 74px;
    border-color: rgba(216, 181, 104, 0.22);
    background:
        radial-gradient(circle at 0% 20%, rgba(216, 181, 104, 0.12), transparent 34%),
        linear-gradient(90deg, rgba(216, 181, 104, 0.06), rgba(232, 95, 159, 0.04), transparent),
        rgba(7, 3, 15, 0.52);
}

#propuestas-admin-modal .propuestas-admin-overview h3 {
    font-size: 1.2rem;
}

#propuestas-admin-modal .propuestas-admin-stats span {
    min-height: 34px;
    padding: 8px 13px;
}

#propuestas-admin-modal .propuestas-admin-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}

#propuestas-admin-modal .admin-propuestas-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    margin: 0;
    padding: 32px 24px;
    border: 1px dashed rgba(216, 181, 104, 0.26);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 181, 104, 0.11), transparent 38%),
        rgba(7, 3, 15, 0.48);
    color: rgba(248, 236, 210, 0.7) !important;
    text-align: center;
}

#propuestas-admin-modal .admin-propuestas-empty h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    color: var(--cm-gold-soft);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: .1em;
}

#propuestas-admin-modal .admin-propuestas-empty p {
    max-width: 540px;
    margin: 0;
    color: rgba(248, 236, 210, 0.62);
    line-height: 1.55;
}

#propuestas-admin-modal .admin-empty-sigil {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216, 181, 104, 0.34);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(232, 95, 159, 0.18), transparent 62%),
        rgba(216, 181, 104, 0.08);
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    box-shadow: 0 0 24px rgba(216, 181, 104, 0.08);
}

#propuestas-admin-modal .admin-propuestas-empty--error {
    border-color: rgba(248, 113, 113, 0.32);
}

#propuestas-admin-modal .admin-propuestas-empty--error .admin-empty-sigil {
    border-color: rgba(248, 113, 113, 0.42);
    color: #fca5a5;
}

#propuestas-admin-modal .admin-propuesta-card {
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 318px;
    border: 1px solid rgba(216, 181, 104, 0.16) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
    background:
        radial-gradient(circle at 0 0, rgba(216, 181, 104, 0.08), transparent 38%),
        rgba(16, 7, 26, 0.84) !important;
}

#propuestas-admin-modal .admin-propuesta-card:hover {
    border-color: rgba(241, 217, 148, 0.42) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.34), 0 0 22px rgba(216, 181, 104, 0.1) !important;
}

#propuestas-admin-modal .admin-propuesta-media {
    min-height: 318px;
}

#propuestas-admin-modal .admin-propuesta-media img,
#propuestas-admin-modal .admin-propuesta-no-img {
    min-height: 318px;
}

#propuestas-admin-modal .admin-propuesta-main {
    padding: 14px;
}

#propuestas-admin-modal .admin-propuesta-header {
    align-items: center !important;
    gap: 10px;
}

#propuestas-admin-modal .admin-propuesta-user {
    font-family: 'Marcellus', serif;
    color: var(--cm-ivory) !important;
}

#propuestas-admin-modal .estado-badge {
    margin-left: auto;
    border-radius: 999px !important;
    font-size: .66rem !important;
    letter-spacing: .11em;
}

#propuestas-admin-modal .admin-propuesta-fecha {
    margin-bottom: 10px;
    font-size: .76rem !important;
}

#propuestas-admin-modal .admin-propuesta-trasfondo {
    -webkit-line-clamp: 7;
    margin-bottom: 12px;
    color: rgba(248, 236, 210, 0.78) !important;
    font-size: .88rem !important;
    line-height: 1.58 !important;
}

#propuestas-admin-modal .admin-propuesta-actions {
    gap: 10px !important;
    padding-top: 11px !important;
}

#propuestas-admin-modal .admin-propuesta-nota-input {
    min-height: 36px;
    padding: 9px 11px !important;
    font-size: .8rem !important;
}

#propuestas-admin-modal .admin-status-btns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
}

#propuestas-admin-modal .btn-estado,
#propuestas-admin-modal .btn-create-musa,
#propuestas-admin-modal .btn-delete-admin {
    min-height: 31px;
    padding: 7px 9px !important;
    font-size: .74rem !important;
    line-height: 1.1;
}

#propuestas-admin-modal .btn-create-musa {
    grid-column: 1 / -1;
    order: -1;
    background: linear-gradient(135deg, rgba(216, 181, 104, 0.95), rgba(232, 95, 159, 0.76)) !important;
    color: #16091d !important;
    border-color: rgba(241, 217, 148, 0.55) !important;
    box-shadow: 0 10px 22px rgba(232, 95, 159, 0.18);
}

#propuestas-admin-modal .btn-delete-admin {
    margin-left: 0 !important;
}

@media (min-width: 1180px) {
    #propuestas-admin-modal .propuestas-admin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #propuestas-admin-modal .dashboard-inner {
        max-width: min(680px, calc(100vw - 20px)) !important;
    }

    #propuestas-admin-modal .propuestas-admin-grid,
    #propuestas-admin-modal .admin-propuesta-card {
        grid-template-columns: 1fr !important;
    }

    #propuestas-admin-modal .admin-propuesta-media {
        border-right: 0;
        border-bottom: 1px solid rgba(216, 181, 104, 0.14);
    }

    #propuestas-admin-modal .admin-propuesta-media,
    #propuestas-admin-modal .admin-propuesta-media img,
    #propuestas-admin-modal .admin-propuesta-no-img {
        min-height: 190px;
        max-height: 220px;
    }
}

/* ============================================================
   DASHBOARD ADMIN · Reskin arcano operativo
   ============================================================ */
#dashboard-modal {
    background:
        radial-gradient(circle at 50% -18%, rgba(58, 31, 86, 0.48), transparent 42%),
        rgba(0, 0, 0, 0.78) !important;
}

#dashboard-modal .dashboard-inner {
    max-width: min(1380px, calc(100vw - 32px)) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 50% -20%, rgba(58, 31, 86, 0.42), transparent 42%),
        rgba(10, 5, 18, 0.98) !important;
    border: 1px solid var(--cm-line) !important;
}

#dashboard-modal .dashboard-header {
    padding: 20px 26px !important;
    background:
        radial-gradient(circle at 0% 50%, rgba(216, 181, 104, 0.16), transparent 34%),
        linear-gradient(90deg, rgba(216, 181, 104, 0.1), rgba(232, 95, 159, 0.04), transparent) !important;
    border-bottom-color: var(--cm-line) !important;
}

#dashboard-modal .dashboard-header-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cm-line-strong);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(232, 95, 159, 0.22), transparent 58%),
        linear-gradient(160deg, #2a173f, #0d0617);
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 1rem !important;
}

#dashboard-modal .dashboard-header h2 {
    font-family: 'Cinzel', serif !important;
    color: var(--cm-gold-soft) !important;
    font-size: 1.42rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
}

.dashboard-admin-subtitle {
    margin: 4px 0 0;
    color: var(--cm-muted);
    font-family: 'Marcellus', serif;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#dashboard-modal .dashboard-controls {
    background: rgba(7, 3, 15, 0.44) !important;
    border-bottom: 1px solid rgba(216, 181, 104, 0.16) !important;
}

#dashboard-modal .filter-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(216, 181, 104, 0.14) !important;
    background: rgba(216, 181, 104, 0.05) !important;
    color: rgba(248, 236, 210, 0.68) !important;
    font-weight: 700 !important;
}

#dashboard-modal .filter-btn.active {
    border-color: var(--cm-line-strong) !important;
    background: linear-gradient(120deg, rgba(216, 181, 104, 0.18), rgba(232, 95, 159, 0.12)) !important;
    color: var(--cm-gold-soft) !important;
}

#dashboard-modal .dashboard-content {
    padding: 0 !important;
    gap: 0 !important;
}

.arc-dashboard-shell {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: min(760px, calc(100vh - 190px));
}

.arc-dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 14px;
    border-right: 1px solid rgba(216, 181, 104, 0.16);
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 181, 104, 0.08), transparent 42%),
        rgba(7, 3, 15, 0.36);
}

.arc-dashboard-nav button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(248, 236, 210, 0.64);
    font: 700 .82rem 'Outfit', sans-serif;
    cursor: default;
}

.arc-dashboard-nav button.active,
.arc-dashboard-nav button:hover {
    color: var(--cm-gold-soft);
    border-color: rgba(216, 181, 104, 0.2);
    background: rgba(216, 181, 104, 0.08);
}

.arc-dashboard-nav span {
    width: 20px;
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
}

.arc-dashboard-main {
    padding: 18px;
    overflow: auto;
}

.arc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.arc-kpi-card,
.arc-panel {
    border: 1px solid rgba(216, 181, 104, 0.16);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0 0, rgba(216, 181, 104, 0.08), transparent 38%),
        rgba(16, 7, 26, 0.78);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.arc-kpi-card {
    padding: 15px 16px;
}

.arc-kpi-label,
.arc-panel-kicker {
    display: block;
    color: var(--cm-muted);
    font-family: 'Marcellus', serif;
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.arc-kpi-card strong {
    display: block;
    margin: 7px 0 4px;
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 1.72rem;
    font-weight: 600;
}

.arc-kpi-card small {
    color: rgba(248, 236, 210, 0.58);
}

.arc-dashboard-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 16px;
}

.arc-panel {
    min-width: 0;
    padding: 15px;
}

.arc-panel-wide {
    grid-column: span 1;
}

.arc-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(216, 181, 104, 0.12);
}

.arc-panel h3 {
    margin: 4px 0 0;
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .1em;
}

.arc-chart {
    height: 170px;
    border-radius: 8px;
    background:
        linear-gradient(rgba(216, 181, 104, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 181, 104, 0.05) 1px, transparent 1px),
        rgba(7, 3, 15, 0.42);
    background-size: 100% 34px, 70px 100%, auto;
    overflow: hidden;
}

.arc-chart svg {
    width: 100%;
    height: 100%;
}

.arc-chart-axis {
    stroke: rgba(216, 181, 104, 0.18);
    stroke-width: 1;
}

.arc-chart-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(216, 181, 104, 0.18));
}

.arc-chart-line.votes { stroke: url(#arcChartGold); }
.arc-chart-line.reviews { stroke: rgba(232, 95, 159, 0.82); }
.arc-chart-line.proposals { stroke: rgba(248, 236, 210, 0.48); }

.arc-chart-legend,
.arc-pulse-summary,
.arc-alert-list,
.arc-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.arc-chart-legend span,
.arc-pulse-summary span,
.arc-alert-list div,
.arc-quick-actions button {
    border: 1px solid rgba(216, 181, 104, 0.14);
    border-radius: 999px;
    background: rgba(216, 181, 104, 0.06);
    color: rgba(248, 236, 210, 0.68);
    font-size: .76rem;
    padding: 7px 10px;
}

.arc-pulse-summary {
    margin-top: 12px;
}

.arc-pulse-summary strong,
.arc-alert-list strong {
    color: var(--cm-gold-soft);
}

.arc-alert-list {
    flex-direction: column;
}

.arc-alert-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-radius: 8px;
}

.arc-alert-list span {
    color: rgba(248, 236, 210, 0.62);
}

.arc-compact-list,
.arc-user-list,
.arc-timeline {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.arc-proposal-row,
.arc-user-row,
.arc-timeline-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(216, 181, 104, 0.12);
    border-radius: 8px;
    background: rgba(7, 3, 15, 0.38);
}

.arc-user-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.arc-proposal-row strong,
.arc-user-row strong,
.arc-timeline-item strong {
    display: block;
    color: var(--cm-ivory);
    font-size: .88rem;
}

.arc-proposal-row span,
.arc-user-row span,
.arc-timeline-item,
.arc-timeline-item time {
    color: rgba(248, 236, 210, 0.62);
    font-size: .78rem;
}

.arc-proposal-row button,
.arc-quick-actions button {
    border-radius: 8px;
    border-color: rgba(216, 181, 104, 0.28);
    color: var(--cm-gold-soft);
    cursor: pointer;
}

.arc-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arc-quick-actions button {
    min-height: 38px;
}

.arc-quick-actions button:first-child,
.arc-quick-actions button:nth-child(2) {
    background: linear-gradient(135deg, rgba(216, 181, 104, 0.9), rgba(232, 95, 159, 0.68));
    color: #16091d;
    font-weight: 800;
}

.arc-ranking {
    max-height: 360px;
    overflow: auto;
}

.arc-ranking .dashboard-rank-card {
    border-radius: 8px !important;
    background: rgba(7, 3, 15, 0.36) !important;
    border-color: rgba(216, 181, 104, 0.14) !important;
}

.arc-timeline-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.arc-timeline-item > span {
    color: var(--cm-gold-soft);
    font-family: 'Cinzel', serif;
}

@media (max-width: 1100px) {
    .arc-dashboard-shell {
        grid-template-columns: 1fr;
    }

    .arc-dashboard-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(216, 181, 104, 0.16);
    }

    .arc-kpi-grid,
    .arc-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .arc-kpi-grid,
    .arc-dashboard-grid,
    .arc-quick-actions {
        grid-template-columns: 1fr;
    }

    #dashboard-modal .dashboard-inner {
        max-width: min(680px, calc(100vw - 20px)) !important;
    }
}

/* =====================================================
   Ficha Expandida de Musa
   ===================================================== */
.muse-detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 76000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 20% 10%, rgba(216, 181, 104, 0.12), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(124, 58, 237, 0.14), transparent 32%),
        rgba(3, 2, 8, 0.82);
    backdrop-filter: blur(12px);
}

.muse-detail-modal.active {
    display: flex;
    animation: fadeInOverlay 0.22s ease both;
}

body.muse-detail-open {
    overflow: hidden;
}

.muse-detail-inner {
    position: relative;
    width: min(1380px, calc(100vw - 34px));
    max-height: min(920px, calc(100vh - 34px));
    overflow: hidden;
    border: 1px solid rgba(216, 181, 104, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(12, 7, 22, 0.98), rgba(24, 10, 38, 0.96)),
        rgba(7, 3, 15, 0.98);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.68),
        0 0 70px rgba(124, 58, 237, 0.14),
        inset 0 1px 0 rgba(248, 236, 210, 0.08);
    animation: slideUpModal 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.muse-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(248, 236, 210, 0.18);
    border-radius: 50%;
    background: rgba(7, 3, 15, 0.72);
    color: rgba(248, 236, 210, 0.82);
    cursor: pointer;
    transition: all 0.2s ease;
}

.muse-detail-close:hover {
    border-color: rgba(239, 68, 68, 0.75);
    color: #fca5a5;
    transform: rotate(90deg);
}

.muse-detail-content {
    max-height: min(920px, calc(100vh - 34px));
    overflow: auto;
}

.muse-detail-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.84fr) minmax(420px, 1.36fr) minmax(250px, 0.7fr);
    gap: 18px;
    padding: 22px;
}

.muse-detail-portrait,
.muse-detail-main,
.muse-detail-side-card,
.muse-detail-tab-content article,
.muse-detail-story,
.muse-detail-affinity {
    border: 1px solid rgba(216, 181, 104, 0.14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0 0, rgba(216, 181, 104, 0.08), transparent 42%),
        rgba(10, 5, 18, 0.74);
}

.muse-detail-portrait {
    position: sticky;
    top: 22px;
    align-self: start;
    min-height: 690px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(248, 236, 210, 0.04);
}

.muse-detail-portrait > img {
    width: 100%;
    height: 610px;
    object-fit: cover;
    display: block;
    filter: saturate(1.04) contrast(1.04);
}

.muse-detail-portrait-glow {
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    background: linear-gradient(to top, rgba(10, 5, 18, 0.96), transparent);
    pointer-events: none;
}

.muse-detail-main {
    min-width: 0;
    padding: 26px;
}

.muse-detail-kicker,
.muse-detail-section-head span,
.muse-detail-side-card > span,
.muse-detail-tab-content article > span,
.muse-detail-affinity span {
    display: block;
    color: rgba(216, 181, 104, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.muse-detail-main h2 {
    margin: 8px 44px 2px 0;
    color: #f8ecd2;
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2rem, 4vw, 4.4rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.muse-detail-title {
    margin: 8px 0 16px;
    color: rgba(248, 236, 210, 0.68);
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-style: italic;
}

.muse-detail-meta,
.muse-detail-tags,
.muse-detail-tabs,
.muse-detail-stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.muse-detail-meta span,
.muse-detail-tags span {
    border: 1px solid rgba(216, 181, 104, 0.18);
    border-radius: 999px;
    background: rgba(216, 181, 104, 0.07);
    color: rgba(248, 236, 210, 0.76);
    padding: 7px 11px;
    font-size: 0.78rem;
}

.muse-detail-stars {
    color: #f6c76e !important;
}

.muse-detail-status {
    border-color: rgba(167, 139, 250, 0.35) !important;
    background: rgba(124, 58, 237, 0.16) !important;
    color: #ddd6fe !important;
}

.muse-detail-tags {
    margin: 14px 0 18px;
}

.muse-detail-tabs {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(216, 181, 104, 0.12);
}

.muse-detail-tabs button {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(248, 236, 210, 0.52);
    padding: 9px 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.muse-detail-tabs button:hover,
.muse-detail-tabs button.active {
    border-color: rgba(216, 181, 104, 0.24);
    background: rgba(216, 181, 104, 0.08);
    color: #f8ecd2;
}

.muse-detail-story,
.muse-detail-affinity {
    padding: 18px;
}

.muse-detail-section-head {
    margin-bottom: 12px;
}

.muse-detail-section-head strong,
.muse-detail-tab-content article strong,
.muse-detail-affinity h3 {
    display: block;
    color: var(--cm-gold-soft, #d8b568);
    font-family: 'Cinzel', serif;
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: 3px;
}

.muse-detail-story p,
.muse-detail-tab-content article p,
.muse-detail-affinity p {
    color: rgba(248, 236, 210, 0.7);
    line-height: 1.65;
    margin: 0;
}

.muse-detail-story blockquote {
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 3px solid rgba(216, 181, 104, 0.48);
    border-radius: 0 8px 8px 0;
    background: rgba(216, 181, 104, 0.06);
    color: rgba(248, 236, 210, 0.84);
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    font-style: italic;
}

.muse-detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
}

.muse-detail-stat-grid div,
.muse-detail-pulse {
    border: 1px solid rgba(216, 181, 104, 0.13);
    border-radius: 8px;
    background: rgba(7, 3, 15, 0.42);
    padding: 12px;
}

.muse-detail-stat-grid span,
.muse-detail-pulse small {
    display: block;
    color: rgba(248, 236, 210, 0.48);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.muse-detail-stat-grid strong,
.muse-detail-pulse strong {
    color: #f8ecd2;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
}

.muse-detail-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.muse-detail-side-card {
    padding: 15px;
}

.muse-detail-side-card button,
.muse-detail-inline-action {
    width: 100%;
    min-height: 38px;
    margin-top: 9px;
    border: 1px solid rgba(216, 181, 104, 0.24);
    border-radius: 8px;
    background: rgba(216, 181, 104, 0.07);
    color: rgba(248, 236, 210, 0.82);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
}

.muse-detail-side-card button:hover,
.muse-detail-inline-action:hover {
    background: rgba(216, 181, 104, 0.14);
    border-color: rgba(216, 181, 104, 0.42);
    transform: translateY(-1px);
}

#muse-detail-favorite.active {
    background: linear-gradient(135deg, rgba(216, 181, 104, 0.95), rgba(232, 95, 159, 0.7));
    color: #16091d;
}

.muse-detail-affinity-mini {
    margin-top: 12px;
    border-radius: 8px;
    background: rgba(7, 3, 15, 0.45);
    padding: 14px;
}

.muse-detail-affinity-mini strong {
    display: block;
    color: #f8ecd2;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
}

.muse-detail-affinity-mini small {
    color: rgba(248, 236, 210, 0.54);
}

.muse-detail-panel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.muse-detail-gallery-panel {
    border: 1px solid rgba(216, 181, 104, 0.14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0 0, rgba(216, 181, 104, 0.08), transparent 42%),
        rgba(10, 5, 18, 0.74);
    padding: 16px;
}

.muse-detail-relatos-panel {
    border: 1px solid rgba(216, 181, 104, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(216, 181, 104, 0.055), transparent 46%),
        rgba(10, 5, 18, 0.74);
    padding: 16px;
}

.muse-detail-reviews-board {
    border: 1px solid rgba(216, 181, 104, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(rgba(216, 181, 104, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 181, 104, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 14% 0, rgba(232, 95, 159, 0.08), transparent 34%),
        rgba(10, 5, 18, 0.74);
    background-size: 34px 34px, 34px 34px, auto, auto;
    padding: 16px;
}

.muse-detail-gallery-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(216, 181, 104, 0.12);
}

.muse-detail-gallery-head span,
.muse-detail-gallery-mini span {
    display: block;
    color: rgba(216, 181, 104, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.muse-detail-gallery-head strong {
    display: block;
    margin-top: 3px;
    color: var(--cm-gold-soft, #d8b568);
    font-family: 'Cinzel', serif;
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.muse-detail-gallery-head .muse-detail-inline-action {
    width: auto;
    min-width: 150px;
    margin-top: 0;
    padding: 0 16px;
}

.muse-detail-gallery-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.muse-detail-gallery-loading {
    grid-column: 1 / -1;
    min-height: 150px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(216, 181, 104, 0.18);
    border-radius: 8px;
    color: rgba(248, 236, 210, 0.52);
    font-size: 0.86rem;
}

.muse-detail-relatos-preview {
    display: grid;
    gap: 12px;
}

.muse-detail-relato-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.muse-detail-relato-toolbar label {
    display: grid;
    gap: 6px;
}

.muse-detail-relato-toolbar span,
.muse-detail-relato-meta span {
    color: rgba(216, 181, 104, 0.72);
    font-family: 'Marcellus', serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.muse-detail-relato-toolbar select {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(216, 181, 104, 0.2);
    border-radius: 8px;
    background: rgba(7, 3, 15, 0.74);
    color: rgba(248, 236, 210, 0.86);
    font-family: 'Outfit', sans-serif;
    padding: 0 12px;
}

.muse-detail-relato-count {
    align-self: center;
    border: 1px solid rgba(216, 181, 104, 0.16);
    border-radius: 999px;
    background: rgba(216, 181, 104, 0.06);
    padding: 8px 10px;
    white-space: nowrap;
}

.muse-detail-relato-card,
.muse-detail-relato-empty {
    border: 1px solid rgba(216, 181, 104, 0.14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0, rgba(124, 58, 237, 0.08), transparent 36%),
        rgba(7, 3, 15, 0.45);
    padding: 16px;
}

.muse-detail-relato-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.muse-detail-relato-card h3,
.muse-detail-relato-empty strong {
    display: block;
    margin: 0 0 10px;
    color: var(--cm-gold-soft, #d8b568);
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.muse-detail-relato-excerpt {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
    color: rgba(248, 236, 210, 0.74);
    line-height: 1.58;
}

.muse-detail-relato-excerpt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    background: linear-gradient(to top, rgba(7, 3, 15, 0.94), transparent);
    pointer-events: none;
}

.muse-detail-relato-excerpt p,
.muse-detail-relato-empty p {
    margin: 0;
    color: rgba(248, 236, 210, 0.68);
    font-size: 0.94rem;
}

.muse-detail-reviews-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.muse-detail-review-note,
.muse-detail-review-empty {
    position: relative;
    min-height: 170px;
    border: 1px solid rgba(216, 181, 104, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(248, 236, 210, 0.12), rgba(216, 181, 104, 0.045)),
        rgba(22, 9, 29, 0.92);
    padding: 18px 16px 16px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

.muse-detail-review-note.note-2 {
    transform: rotate(0.7deg);
    background:
        linear-gradient(160deg, rgba(232, 95, 159, 0.11), rgba(216, 181, 104, 0.04)),
        rgba(22, 9, 29, 0.92);
}

.muse-detail-review-note.note-3 {
    transform: rotate(-0.6deg);
    background:
        linear-gradient(160deg, rgba(124, 58, 237, 0.12), rgba(216, 181, 104, 0.04)),
        rgba(22, 9, 29, 0.92);
}

.muse-detail-review-note.note-4 {
    transform: rotate(0.35deg);
}

.muse-detail-review-pin {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d8b568;
    box-shadow: 0 0 0 3px rgba(216, 181, 104, 0.14), 0 5px 12px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
}

.muse-detail-review-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.muse-detail-review-head strong {
    display: block;
    color: #f8ecd2;
    font-size: 0.88rem;
}

.muse-detail-review-head span:not(.review-user-avatar) {
    display: block;
    color: rgba(248, 236, 210, 0.45);
    font-size: 0.72rem;
}

.muse-detail-review-note p,
.muse-detail-review-empty p {
    margin: 0;
    color: rgba(248, 236, 210, 0.72);
    font-family: 'Playfair Display', serif;
    font-size: 0.98rem;
    line-height: 1.52;
}

.muse-detail-review-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    text-align: center;
}

.muse-detail-review-empty strong {
    color: var(--cm-gold-soft, #d8b568);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

.muse-detail-gallery-mini {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid rgba(216, 181, 104, 0.16);
    border-radius: 8px;
    background: rgba(7, 3, 15, 0.5);
    cursor: pointer;
    padding: 0;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.muse-detail-gallery-mini:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 181, 104, 0.42);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.muse-detail-gallery-mini img {
    width: 100%;
    height: 150px;
    display: block;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.03);
}

.muse-detail-gallery-mini span {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(216, 181, 104, 0.16);
    border-radius: 999px;
    background: rgba(7, 3, 15, 0.76);
    padding: 5px 8px;
    color: rgba(248, 236, 210, 0.76);
    letter-spacing: 0.08em;
    text-align: center;
}

.muse-detail-gallery-mini.is-cover::before {
    content: "Portada";
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    border-radius: 999px;
    background: rgba(216, 181, 104, 0.92);
    color: #16091d;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.muse-detail-tab-content article {
    min-height: 180px;
    padding: 16px;
}

.muse-detail-tab-content article img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 12px;
}

.muse-detail-affinity {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.muse-detail-affinity-ring {
    display: grid;
    place-items: center;
    width: 136px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(216, 181, 104, 0.45);
    background:
        radial-gradient(circle, rgba(7, 3, 15, 0.96) 54%, transparent 56%),
        conic-gradient(from 20deg, rgba(216, 181, 104, 0.92), rgba(124, 58, 237, 0.76), rgba(216, 181, 104, 0.24));
    color: #f8ecd2;
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 700;
}

.muse-detail-related {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.muse-detail-related button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    max-width: 190px;
    border: 1px solid rgba(216, 181, 104, 0.16);
    border-radius: 8px;
    background: rgba(7, 3, 15, 0.44);
    color: rgba(248, 236, 210, 0.8);
    padding: 7px;
    cursor: pointer;
}

.muse-detail-related img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 7px;
}

.muse-detail-related span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

@media (max-width: 1180px) {
    .muse-detail-layout {
        grid-template-columns: 310px minmax(0, 1fr);
    }

    .muse-detail-side {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .muse-detail-portrait {
        min-height: 570px;
    }

    .muse-detail-portrait > img {
        height: 500px;
    }
}

@media (max-width: 820px) {
    .muse-detail-modal {
        padding: 10px;
    }

    .muse-detail-inner,
    .muse-detail-content {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .muse-detail-layout,
    .muse-detail-side,
    .muse-detail-panel-list,
    .muse-detail-gallery-head,
    .muse-detail-relato-toolbar,
    .muse-detail-affinity {
        grid-template-columns: 1fr;
    }

    .muse-detail-gallery-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .muse-detail-reviews-preview {
        grid-template-columns: 1fr;
    }

    .muse-detail-gallery-head .muse-detail-inline-action {
        width: 100%;
    }

    .muse-detail-layout {
        padding: 12px;
    }

    .muse-detail-portrait {
        position: relative;
        top: auto;
        min-height: 430px;
    }

    .muse-detail-portrait > img {
        height: 360px;
    }

    .muse-detail-main {
        padding: 18px;
    }

    .muse-detail-main h2 {
        margin-right: 40px;
        font-size: 2.3rem;
    }

    .muse-detail-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}