/* Neo UI - Rediseño completo (no dependencias previas) */

:root {
  /* Valores por defecto - SIEMPRE aplicados para evitar fondo blanco */
  --neo-bg: #0b0f19;
  --neo-surface: #101625;
  --neo-surface-2: #0e1422;
  --neo-background: #0b0f19;
  --neo-text: #e6e9f2;
  --neo-muted: #9aa6bf;
  --neo-primary: #7c3aed;  /* morado */
  --neo-accent: #22d3ee;   /* cyan */
  --neo-glow1: rgba(124,58,237,.12);
  --neo-glow2: rgba(34,211,238,.10);
  --neo-success: #22c55e;
  --neo-warning: #f59e0b;
  --neo-danger: #ef4444;
  --neo-radius: 16px;
  --neo-shadow: 0 8px 28px rgba(0,0,0,.35);
  /* Duraciones de transición/animación: evitan que se vean demasiado aceleradas en algunos dispositivos; base-extras las sobrescribe con prefers-reduced-motion */
  --neo-transition-fast: 0.22s;
  --neo-transition-normal: 0.3s;
  --neo-transition-slow: 0.4s;
  --neo-animation-duration: 0.35s;
  --neo-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Fallback crítico: Si las variables no están definidas, usar valores oscuros */
/* Esto previene el problema de fondo blanco en móvil al recargar */
body, body.neo {
  background: var(--neo-bg, #0b0f19) !important;
  color: var(--neo-text, #e6e9f2) !important;
  color: var(--neo-text, #e6e9f2) !important; /* Fallback a claro si variable falla */
  font-family: var(--neo-font-family);
}

/* Cuando el usuario elige una fuente en Mini-Config, forzar en toda la página */
html.neo-font-custom,
html.neo-font-custom body,
html.neo-font-custom .header,
html.neo-font-custom .sidebar,
html.neo-font-custom main,
html.neo-font-custom .container,
html.neo-font-custom * {
  font-family: var(--neo-font-family) !important;
}

/* Excepción: iconos (Font Awesome, etc.) conservan su fuente con cualquier tema de fuentes */
html.neo-font-custom .fa,
html.neo-font-custom .fas,
html.neo-font-custom .far,
html.neo-font-custom .fab,
html.neo-font-custom .fa-solid,
html.neo-font-custom .fa-regular,
html.neo-font-custom .fa-brands,
html.neo-font-custom [class^="fa-"],
html.neo-font-custom [class*=" fa-"],
html.neo-font-custom i[class*="fa"],
html.neo-font-custom span[class*="fa"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
}
html.neo-font-custom .fa::before,
html.neo-font-custom .fas::before,
html.neo-font-custom .far::before,
html.neo-font-custom .fab::before,
html.neo-font-custom .fa-solid::before,
html.neo-font-custom .fa-regular::before,
html.neo-font-custom .fa-brands::before,
html.neo-font-custom [class^="fa-"]::before,
html.neo-font-custom [class*=" fa-"]::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
}

/* Alto contraste: accesibilidad ( !important para ganar a los estilos inline del tema ) */
html[data-high-contrast="true"][data-mode="dark"] {
  --neo-bg: #000000 !important;
  --neo-background: #000000 !important;
  --neo-surface: #1a1a1a !important;
  --neo-surface-2: #262626 !important;
  --neo-text: #ffffff !important;
  --neo-muted: #cccccc !important;
  --neo-border: #404040 !important;
}

html[data-high-contrast="true"][data-mode="light"] {
  --neo-bg: #ffffff !important;
  --neo-background: #ffffff !important;
  --neo-surface: #f0f0f0 !important;
  --neo-surface-2: #e0e0e0 !important;
  --neo-text: #000000 !important;
  --neo-muted: #333333 !important;
  --neo-border: #333333 !important;
}

/* Asegurar que elementos principales nunca queden blancos */
main, .main-content {
  background: transparent !important; /* Transparente para que se vea el fondo del body */
  color: var(--neo-text, #e6e9f2) !important; /* Fallback a claro */
}

.container {
  background: transparent !important;
  color: var(--neo-text, #e6e9f2) !important;
}

.card, .form-panel {
  background: var(--neo-surface, #101625) !important; /* Fallback a oscuro */
  color: var(--neo-text, #e6e9f2) !important; /* Fallback a claro */
  border-color: var(--neo-border, rgba(255,255,255,.08)) !important;
}

/* Asegurar que elementos comunes nunca queden blancos (fallback crítico) */
.card, .form-panel, .modal-content, .dropdown, .sidebar, 
.character-card, .user-card, .admin-card {
  background-color: var(--neo-surface, #101625) !important;
  color: var(--neo-text, #e6e9f2) !important;
}

/* Superficie reutilizable para paneles y cards */
.neo-surface,
[data-neo-surface] {
  background: var(--neo-surface);
  background-color: var(--neo-surface);
  color: var(--neo-text);
  border: 1px solid var(--neo-border, rgba(255, 255, 255, 0.08));
}

.neo-surface-2,
[data-neo-surface="2"] {
  background: var(--neo-surface-2);
  background-color: var(--neo-surface-2);
  color: var(--neo-text);
}

/* Reset base - SOLO estilos visuales, NO layout */
/* PROHIBIDO: display, flex-direction, min-height, height del body - eso está en layout.css */
html, body { 
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    /* NO height: 100% - rompe en móvil, está en layout.css */
}

body.neo, body { 
    /* SOLO estilos visuales - layout está en layout.css */
    background: radial-gradient(1200px 800px at 10% -10%, var(--neo-glow1), transparent 60%), radial-gradient(1000px 700px at 110% 20%, var(--neo-glow2), transparent 50%), var(--neo-bg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    color: var(--neo-text); 
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol'; 
    /* background-attachment: fixed; se aplica solo en desktop en layout.css */
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    /* PROHIBIDO aquí: display, flex-direction, min-height - están en layout.css */
}

/* Modo claro: mismo esquema que oscuro — todo desde variables (JS las actualiza al cambiar tema) */
html[data-mode="light"] {
  /* Fallbacks; el JS sobrescribe al aplicar Ocean/Sunset/Forest */
  --neo-border: rgba(0, 0, 0, 0.08);
  --neo-header-shadow: rgba(0, 0, 0, 0.08);
}
html[data-mode="light"] body,
html[data-mode="light"] body.neo {
  background: radial-gradient(1200px 800px at 10% -10%, var(--neo-glow1), transparent 60%), radial-gradient(1000px 700px at 110% 20%, var(--neo-glow2), transparent 50%), var(--neo-bg) !important;
  color: var(--neo-text) !important;
}
html[data-mode="light"] main,
html[data-mode="light"] .main-content {
  background: transparent !important;
  color: var(--neo-text) !important;
}
html[data-mode="light"] .container {
  color: var(--neo-text) !important;
}

/* .main-content está en layout.css - NO duplicar aquí */

/* Header: solo variables (forzar por modo para evitar mezcla al cambiar tema) */
.header {
  position: sticky; top: 0; z-index: 9999;
  background: var(--neo-background);
  border-bottom: 1px solid var(--neo-border);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 16px var(--neo-header-shadow);
}
html[data-mode="dark"] .header {
  background: var(--neo-background) !important;
  border-bottom: 1px solid var(--neo-border);
  box-shadow: 0 4px 16px var(--neo-header-shadow);
}
html[data-mode="light"] .header {
  background: var(--neo-surface, #c5cfde) !important;
  border-bottom: 1px solid var(--neo-border, rgba(0,0,0,.08));
  box-shadow: 0 4px 16px var(--neo-header-shadow);
}
.header-container, .header *{ position: relative; z-index: inherit; }
.header-container { max-width: none; width: 100%; margin: 0; padding: 8px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.header-container .logo{ grid-column: 1; justify-self: start; margin-right: 0 }
.header-center{ grid-column: 2; display:flex; align-items:center; justify-content:center; gap: 10px }
.header-container .nav{ justify-self: center; display:flex; gap:10px; min-width:0 }
.header-container .header-actions{ justify-self: center; display:flex; gap:10px }
.header-admin{ grid-column: 3; justify-self: end; display:flex; align-items:center }
.logo { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.logo-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--neo-primary), var(--neo-accent)); display: grid; place-items: center; color: #0b0f19; box-shadow: var(--neo-shadow); }
.logo-text { font-weight: 800; letter-spacing: .3px; color: var(--neo-text); }
.logo-subtitle { font-size: 12px; color: var(--neo-muted); }

.nav { display: flex; gap: 6px; align-items: center; }
.nav-link { display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; color: var(--neo-muted); text-decoration: none; transition: .2s all ease; }
.nav-link i { opacity: .8; }
.nav-link:hover, .nav-link.active { color: var(--neo-text); background: rgba(0,0,0,.06); }

.header-actions { display: flex; gap: 8px; align-items: center; }
.counter-group{ 
  display:flex; 
  align-items:center; 
  gap:0; 
  border:1px solid rgba(255,255,255,.10); 
  border-radius:10px; 
  overflow:hidden; 
  background:rgba(255,255,255,.03) !important; /* Fallback crítico */
  margin-right:6px; 
}
.counter-group .counter-chip{ 
  display:flex; 
  align-items:center; 
  gap:4px; 
  padding:4px 8px; 
  color: var(--neo-text, #e6e9f2) !important; /* Fallback crítico */
  font-size:12px; 
  background: transparent !important; /* Asegurar que no quede blanco */
}
.counter-group .counter-chip i{ opacity:.9 }
.counter-group .counter-chip .label{ opacity:.85; font-size:12px; display:none }
.counter-group .counter-chip strong{ font-weight:700 }
.counter-group .divider{ width:1px; height:16px; background: rgba(255,255,255,.10); }
html[data-mode="light"] .counter-group{ background: color-mix(in srgb, var(--neo-primary) 4%, var(--neo-surface)); border-color: var(--neo-border); }
html[data-mode="light"] .counter-group .divider{ background: var(--neo-border); }
@media (max-width: 980px){ .counter-group .counter-chip .label{ display:none } }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: transparent; color: var(--neo-text); }
.user-menu-toggle{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--neo-text)}
.user-avatar{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;object-fit:cover;object-position:center;border:2px solid rgba(255,255,255,.12);background:#8b7a86;display:block;flex-shrink:0}
html[data-mode="light"] .user-menu-toggle{border-color:var(--neo-border);background:color-mix(in srgb, var(--neo-primary) 4%, var(--neo-surface))}
html[data-mode="light"] .user-avatar{border-color:var(--neo-border)}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--neo-surface);border:1px solid var(--neo-border);border-radius:12px;box-shadow:var(--neo-shadow);min-width:200px;opacity:0;transform: translateY(-6px) scale(.98); pointer-events:none; transition: opacity var(--neo-transition-fast, .22s) ease, transform var(--neo-transition-fast, .22s) ease; color: var(--neo-text);}
.user-menu.open #userDropdown,.user-dropdown.open{opacity:1; transform: translateY(0) scale(1); pointer-events:auto}
.user-menu{position:relative}
.dropdown-item{display:flex;gap:10px;align-items:center;padding:10px 12px;color:var(--neo-text);text-decoration:none}
.dropdown-item:hover{background:rgba(255,255,255,.06)}
html[data-mode="dark"] .user-dropdown,
html[data-mode="dark"] .language-selector-dropdown,
html[data-mode="dark"] .theme-selector-dropdown { background: var(--neo-surface) !important; border-color: var(--neo-border); color: var(--neo-text); }

.btn { display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); color: var(--neo-text); text-decoration: none; background: transparent; transition: .2s; }
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.btn-primary { background: linear-gradient(135deg, var(--neo-primary), var(--neo-accent)); color: #0b0f19; border: none; box-shadow: var(--neo-shadow); }
.btn-ghost { background: rgba(255,255,255,.03); }

/* Split button: chat (perfil personaje) */
.chat-split{ position:relative; display:inline-flex; align-items:stretch; }
.chat-split-main{ border-top-right-radius:0; border-bottom-right-radius:0; }
.chat-split-caret{ width:40px; padding:0; justify-content:center; border-top-left-radius:0; border-bottom-left-radius:0; }
.chat-split-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:200px; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:var(--neo-surface); box-shadow:var(--neo-shadow); z-index:3000; }
.chat-split-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--neo-text); text-decoration:none; }
.chat-split-item:hover{ background:rgba(255,255,255,.06); }

.chat-split-unified .chat-split-inner{
  display:inline-flex;
  align-items:stretch;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.chat-split-unified .chat-split-main{
  margin:0;
  border-radius:0;
}
.chat-split-unified .chat-split-menu-btn{
  width:42px;
  padding:0;
  justify-content:center;
  align-items:center;
  display:inline-flex;
  border-radius:0;
  border-left:1px solid rgba(0,0,0,.18);
}
.chat-split-unified .chat-split-menu{
  left:0;
  right:auto;
  min-width:260px;
}
.chat-split-subhead{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  opacity:.65;
  padding:.4rem .75rem .15rem;
}
.chat-split-recent{
  display:flex;
  flex-direction:column;
  max-height:220px;
  overflow-y:auto;
}
.chat-split-recent-link{
  font-size:.88rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Dropdowns */
.language-selector, .theme-selector { position: relative; }
.language-selector-toggle, .theme-selector-toggle { display: inline-flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: var(--neo-text); }
.language-selector-dropdown, .theme-selector-dropdown { position: absolute; right: 0; top: calc(100% + 10px); background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: 14px; box-shadow: var(--neo-shadow); display: block; min-width: 180px; padding: 10px; opacity:0; transform: translateY(-6px) scale(.98); pointer-events:none; transition: opacity var(--neo-transition-fast, .22s) ease, transform var(--neo-transition-fast, .22s) ease; color: var(--neo-text); }
.language-selector-dropdown.open, .theme-selector-dropdown.open { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.language-option, .theme-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--neo-text); cursor: pointer; }
.language-option:hover, .theme-option:hover { background: rgba(255,255,255,.06); }
.theme-color-preview { width: 26px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* Theme preview colors */
.theme-preview-light-ocean { background: linear-gradient(135deg, #0c7ab8, #2563eb); }
.theme-preview-light-sunset { background: linear-gradient(135deg, #c2410c, #dc2626); }
.theme-preview-light-forest { background: linear-gradient(135deg, #047857, #059669); }
.theme-preview-light-lilac { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.theme-preview-dark-neon { background: linear-gradient(135deg, #a855f7, #06b6d4); }
.theme-preview-dark-midnight { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.theme-preview-dark-crimson { background: linear-gradient(135deg, #ec4899, #f97316); }
.theme-preview-dark-wine { background: linear-gradient(135deg, #be123c, #e11d48); }

/* Light mode header: ya usa var(--neo-surface) arriba */
html[data-mode="light"] .btn-ghost { background: color-mix(in srgb, var(--neo-primary) 6%, var(--neo-surface)); }
html[data-mode="light"] .language-selector-toggle,
html[data-mode="light"] .theme-selector-toggle,
html[data-mode="light"] .menu-toggle { border-color: var(--neo-border); background: color-mix(in srgb, var(--neo-primary) 4%, var(--neo-surface)); color: var(--neo-text); }
html[data-mode="light"] .language-selector-dropdown,
html[data-mode="light"] .theme-selector-dropdown { background: var(--neo-surface); border-color: var(--neo-border); }
html[data-mode="light"] .language-option:hover,
html[data-mode="light"] .theme-option:hover { background: color-mix(in srgb, var(--neo-primary) 8%, var(--neo-surface)); }

/* Light mode: superficies del tema (var(--neo-surface), sin blanco puro) */
html[data-mode="light"] .card { background: var(--neo-surface, #c5cfde) !important; border: 1px solid var(--neo-border, rgba(0,0,0,.08)); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
html[data-mode="light"] .form-panel { background: var(--neo-surface, #c5cfde) !important; border: 1px solid var(--neo-border, rgba(0,0,0,.08)); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
html[data-mode="light"] .form-grid input,
html[data-mode="light"] .form-grid select,
html[data-mode="light"] .form-grid textarea { background: var(--neo-surface-2); border: 1px solid var(--neo-border); color: var(--neo-text); }
html[data-mode="light"] .nav-link:hover,
html[data-mode="light"] .nav-link.active { background: color-mix(in srgb, var(--neo-primary) 8%, var(--neo-surface)); }
html[data-mode="light"] .footer--simple { background: var(--neo-surface); border-top: 1px solid var(--neo-border); }

/* Contenedor del header posicionable */
.header-container { position: relative; }

/* Theme advanced */
.theme-tabs { display:flex; gap:8px; padding:6px 6px 0; }
.theme-tab { padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--neo-text); cursor:pointer; font-size:13px; }
.theme-tab.active { background: color-mix(in srgb, var(--neo-primary) 18%, transparent); }
.theme-list { display:grid; gap:6px; padding:8px; }
.custom-panel { padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:6px; }
.custom-row { display:flex; align-items:center; gap:8px; }
.custom-row label { font-size:12px; color:var(--neo-muted); margin-right:4px; }
.btn-small { padding:6px 10px; font-size:12px; }

/* Hero */
.hero { position: relative; padding: 90px 0 40px; }
.hero .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hero-title { font-size: clamp(38px, 6vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: .2px; }
.hero-sub { color: var(--neo-muted); max-width: 760px; margin-top: 14px; font-size: 18px; }
.hero-actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* Sections */
.section { padding: 56px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.grid { display: grid; gap: 18px; }

/* Cards (forzar por modo para evitar mezcla) */
.card { background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-radius); box-shadow: var(--neo-shadow); overflow: hidden; color: var(--neo-text); }
html[data-mode="dark"] .card { background: var(--neo-surface) !important; border-color: var(--neo-border); color: var(--neo-text); }
html[data-mode="light"] .card { background: var(--neo-surface, #c5cfde) !important; border-color: var(--neo-border, rgba(0,0,0,.08)); color: var(--neo-text); }
.card-body { padding: 16px; }
.card-title { font-weight: 700; margin: 0 0 6px; }
.card-sub { color: var(--neo-muted); font-size: 14px; }
.card-media { height: 180px; background-size: cover; background-position: center; }

/* Forms */
.form-panel { max-width: 520px; margin: 40px auto; padding: 26px; background: var(--neo-surface); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; box-shadow: var(--neo-shadow); }
.form-panel.register-lg{ max-width: 740px; padding: 30px; position: relative; overflow: hidden; }
.register-lg .form-grid{ gap: 14px; }
.register-lg input, .register-lg select, .register-lg textarea{ height: 46px; border-radius: 12px; font-size: 15px; }
.register-lg textarea{ height: auto; min-height: 100px; }
.btn.btn-lg{ padding: 12px 16px; font-size: 15px; border-radius: 12px; }
/* Acentos únicos: líneas brillantes y orbes sutiles */
.form-panel.register-lg::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.18));filter:blur(18px);opacity:.35}
.form-panel.register-lg::after{content:"";position:absolute;right:-80px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 60%);pointer-events:none}
.register-lg .form-grid > div{display:grid;gap:6px;justify-items:center}
.register-lg .form-grid label{justify-self:start}
.register-lg .form-grid input,.register-lg .form-grid select,.register-lg .form-grid textarea{width:min(520px,100%);margin:0 auto}
.register-lg .form-actions{justify-content:center}
/* Alinear checkboxes y texto */
.register-lg .check-row{display:flex;align-items:center;gap:10px;max-width:min(520px,100%);margin:0 auto}
.register-lg .check-row input{width:18px;height:18px}
.register-lg .helper-note{font-size:12px;color:var(--neo-muted);max-width:min(520px,100%);margin:6px auto 0}
.birth-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; max-width:min(520px,100%); margin:0 auto }
.birth-grid select{ height:46px; border-radius:12px; background: var(--neo-surface-2); color: var(--neo-text); border:1px solid rgba(255,255,255,.10); padding: 8px 10px }
html[data-mode="light"] .birth-grid select{ background: var(--neo-surface-2); border-color: var(--neo-border); color: var(--neo-text) }
/* Enlaces de ayuda bajo el formulario: más grandes y legibles */
.form-panel.register-lg .card-sub{font-size:15px}
.form-panel.register-lg .card-sub a{font-size:16px;font-weight:600;color:var(--neo-primary);text-decoration:underline}
.form-panel.register-lg .card-sub a:hover{filter:brightness(1.15)}
html[data-mode="light"] .form-panel.register-lg .card-sub a{color: var(--neo-primary)}
/* Light overrides for readability */
html[data-mode="light"] .form-panel.register-lg::before{background:linear-gradient(135deg, color-mix(in srgb, var(--neo-primary) 18%, transparent), color-mix(in srgb, var(--neo-accent) 16%, transparent))}
html[data-mode="light"] .form-panel.register-lg::after{background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--neo-primary) 32%, transparent), transparent 60%)}
.form-grid { display: grid; gap: 12px; }
.form-grid label { font-size: 14px; color: var(--neo-muted); }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; background: var(--neo-surface-2); color: var(--neo-text); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; }
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .track{position:relative;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.12);transition:background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease;display:inline-block}
.toggle .thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--neo-transition-fast, .22s) ease}
.toggle input:checked + .track{background:linear-gradient(135deg,var(--neo-primary),var(--neo-accent));border-color:transparent}
.toggle input:checked + .track .thumb{transform:translateX(20px)}
.chip-check{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer}
.chip-check input{position:absolute;opacity:0;pointer-events:none}
.chip-check .mark{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);display:inline-block}
.chip-check input:checked + .mark{background:linear-gradient(135deg,var(--neo-primary),var(--neo-accent));border-color:transparent}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.segmented-control{ display:inline-flex; gap:6px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:4px; min-height:44px; align-items:center }
.character-form .segmented-control{ width:100%; justify-content:center; margin:0 auto }
.segmented-control .segment{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; color:var(--neo-text); cursor:pointer; user-select:none; }
.segmented-control .segment input{ position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2 }
.segmented-control .segment{ cursor:pointer; user-select:none }
.segmented-control .segment span{ position:relative; z-index:1 }
.segmented-control .segment.active{ background: rgba(124,58,237,.18) }
.segmented-control .segment{ transition: background var(--neo-transition-fast, .22s) ease, transform var(--neo-transition-fast, .22s) ease }
.segmented-control .segment:active{ transform: scale(.98) }
.segmented-control .segment:hover{ background: rgba(255,255,255,.06) }
html[data-mode="light"] .segmented-control{ background: color-mix(in srgb, var(--neo-primary) 4%, var(--neo-surface)); border-color: var(--neo-border) }
html[data-mode="light"] .segmented-control .segment:hover{ background: color-mix(in srgb, var(--neo-primary) 8%, var(--neo-surface)) }
.character-form .form-section{ margin-bottom: 20px; }
.character-form .form-section h2{ margin: 0 0 10px; }
.character-form .form-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:16px; align-items:start; justify-items: stretch; margin: 0 auto }
.character-form .form-row.align-center{ align-items: center }
.character-form .form-group{ flex:1 1 320px; min-width:280px; display:grid; gap:6px; margin-bottom:12px; position:relative }
.character-form .form-group label{ margin-bottom:6px }
/* Nueva cuadrícula uniforme para campos iniciales */
.field-grid.two{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start }
@media (max-width: 840px){ .field-grid.two{ grid-template-columns: 1fr } }
.field-grid .field{ display:grid; gap:6px }
.field-grid .field .help{ color: var(--neo-muted); min-height: 18px }
/* Configuración: layout y tarjetas */
.character-form .config-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start }
@media (max-width: 900px){ .character-form .config-grid{ grid-template-columns: 1fr } }
.option-card{ display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background: rgba(255,255,255,.03) }
html[data-mode="light"] .option-card{ background: color-mix(in srgb, var(--neo-primary) 4%, var(--neo-surface)); border-color: var(--neo-border) }
.option-card .opt-body{ display:flex; flex-direction:column; gap:4px }
.option-card .opt-body .muted{ color: var(--neo-muted); font-size: 13px }

/* Switch (NSFW) */
.switch{ position: relative; width:48px; height:28px; flex:0 0 48px }
.switch input{ position:absolute; inset:0; opacity:0; pointer-events:none }
.switch .slider{ position:absolute; inset:0; border-radius:999px; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); transition: background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease }
.switch .slider::before{ content:""; position:absolute; width:22px; height:22px; left:3px; top:2px; border-radius:50%; background: var(--neo-surface-2); box-shadow: 0 2px 6px rgba(0,0,0,.35) inset; transition: transform var(--neo-transition-fast, .22s) ease, background var(--neo-transition-fast, .22s) ease }
.switch input:checked + .slider{ background: linear-gradient(135deg, var(--neo-primary), var(--neo-accent)); border-color: transparent }
.switch input:checked + .slider::before{ transform: translateX(20px); background:#0b0f19 }
html[data-mode="light"] .switch .slider{ background: color-mix(in srgb, var(--neo-primary) 10%, var(--neo-surface)); border-color: var(--neo-border) }
html[data-mode="light"] .switch .slider::before{ background: var(--neo-surface); }
/* Ajuste fino: eleva la etiqueta de Visibilidad para alinear el bloque */
#visibilityGroup label{ margin-bottom: 10px }

/* Characters page styling */
.characters-page .filters-card{
  background: var(--neo-surface, rgba(255,255,255,.04));
  border: 1px solid rgba(124,58,237,.25);
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  margin-bottom: 18px;
}
.characters-page .page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin: 4px 0 14px }
.characters-page .page-title h1{ margin:0 0 6px; font-weight:800 }
.characters-page .page-title p{ margin:0; color: var(--neo-muted) }

.filters-form .filters-row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px 20px; /* row-gap, column-gap */
  align-items: end;
}
/* Campos amplios y ordenados con clases semánticas */
.filters-form .fg-search{ grid-column: 1 / span 5; }
.filters-form .fg-category{ grid-column: 6 / span 3; }
.filters-form .fg-subcategory{ grid-column: 9 / span 2; }
.filters-form .fg-sort{ grid-column: 11 / span 2; }
.filters-form .fg-tags{ grid-column: 1 / span 7; }
.filters-form .fg-nsfwcat{ grid-column: 8 / span 3; }
.filters-form .fg-nsfwsub{ grid-column: 11 / span 2; }
.filters-form .fg-options{ grid-column: 1 / span 6; }
.filters-form .fg-actions{ grid-column: 8 / span 5; display:flex; gap:12px }

@media (max-width: 1100px){
  .filters-form .filters-row{ grid-template-columns: repeat(8,1fr); }
  .filters-form .fg-search{ grid-column: 1 / span 8; }
  .filters-form .fg-category{ grid-column: 1 / span 4; }
  .filters-form .fg-subcategory{ grid-column: 5 / span 4; }
  .filters-form .fg-sort{ grid-column: 1 / span 4; }
  .filters-form .fg-tags{ grid-column: 1 / span 8; }
  .filters-form .fg-nsfwcat{ grid-column: 1 / span 4; }
  .filters-form .fg-nsfwsub{ grid-column: 5 / span 4; }
  .filters-form .fg-options{ grid-column: 1 / span 8; }
  .filters-form .fg-actions{ grid-column: 1 / span 8; }
}
@media (max-width: 620px){
  .filters-form .filters-row{ grid-template-columns: repeat(4,1fr); gap: 16px 16px; }
  .filters-form .fg-search{ grid-column: 1 / span 4; }
  .filters-form .fg-category{ grid-column: 1 / span 4; }
  .filters-form .fg-subcategory{ grid-column: 1 / span 4; }
  .filters-form .fg-sort{ grid-column: 1 / span 4; }
  .filters-form .fg-tags{ grid-column: 1 / span 4; }
  .filters-form .fg-nsfwcat{ grid-column: 1 / span 4; }
  .filters-form .fg-nsfwsub{ grid-column: 1 / span 4; }
  .filters-form .fg-options{ grid-column: 1 / span 4; }
  .filters-form .fg-actions{ grid-column: 1 / span 4; }
}
.filters-form .filter-group{ display:flex; flex-direction:column; gap:6px; }
.filters-form label{ font-weight:600; font-size:13px; opacity:.9 }
.filters-form input[type="text"], .filters-form select{
  width:100%;
  background: var(--neo-surface-2, rgba(14,21,48,.5));
  border: 1px solid rgba(124,58,237,.35);
  color: var(--neo-text, #e6e9f2);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease, transform var(--neo-transition-fast, .22s) ease;
}
/* Theming para desplegables: fondo y texto legibles en ambos modos */
.filters-form select option, .filters-form select optgroup{
  background: var(--neo-surface, #0f1424);
  color: var(--neo-text, #e6e9f2);
}
.filters-form select option:checked{ background: color-mix(in srgb, var(--neo-primary) 28%, transparent); color: #fff; }
.filters-form select option:hover{ background: color-mix(in srgb, var(--neo-primary) 18%, transparent); }
html[data-mode="light"] .filters-form select{ background: #f5f7fd; color:#0b0f19; border-color: rgba(0,0,0,.10); }
html[data-mode="light"] .filters-form select option, html[data-mode="light"] .filters-form select optgroup{ background: var(--neo-surface); color: var(--neo-text); }
html[data-mode="light"] .filters-form select option:checked{ background: color-mix(in srgb, var(--neo-primary) 18%, var(--neo-surface) 82%); color: var(--neo-text); }
/* Hacer buscadores un poco más cortos sin perder responsividad */
.filters-form .fg-search input[type="text"]{ width: min(100%, 720px); }
.filters-form .fg-tags   input[type="text"]{ width: min(100%, 620px); }
.filters-form input[type="text"]:focus, .filters-form select:focus{
  border-color: var(--neo-primary,#7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}
.filters-form .checkbox-label{ display:inline-flex; align-items:center; gap:8px; margin-right:12px; cursor:pointer; padding:6px 10px; border-radius:8px; border:1px solid transparent; transition: border-color .2s, background .2s; }
.filters-form .checkbox-label .checkmark{
  width:18px; height:18px; flex-shrink:0; border-radius:6px; border:1px solid rgba(124,58,237,.45); display:inline-block; position:relative; background: rgba(255,255,255,.06);
}
.filters-form .checkbox-label input[type="checkbox"]{ display:none; }
/* Checkbox y checkmark están separados por input type="hidden" en el HTML */
.filters-form .checkbox-label input[type="checkbox"]:checked + input[type="hidden"] + .checkmark{ background: linear-gradient(135deg, var(--neo-primary,#7c3aed), var(--neo-accent,#22d3ee)); border-color: transparent; }
.filters-form .checkbox-label input[type="checkbox"]:checked + input[type="hidden"] + .checkmark::after{
  content:''; position:absolute; inset:3px; background: rgba(255,255,255,.9); border-radius:4px; mix-blend-mode: screen;
}
/* Estado activo visible: label con borde/fondo cuando está marcado */
.filters-form .checkbox-label:has(input[type="checkbox"]:checked){ border-color: rgba(124,58,237,.4); background: rgba(124,58,237,.08); }
.filters-form .checkbox-label:hover{ background: rgba(255,255,255,.04); }
.filters-form .checkbox-label:has(input[type="checkbox"]:checked):hover{ background: rgba(124,58,237,.12); }
/* Tooltip de opciones de filtro: arriba y centrado para no quedar encima de la opción */
.filters-form .checkbox-label[title]:hover::after{
  bottom: 100%; top: auto; right: auto; left: 50%; margin-bottom: 8px; transform: translateX(-50%);
  max-width: 260px; white-space: normal; word-wrap: break-word;
}
.filters-form .checkbox-label[title]:hover::before{
  bottom: 100%; top: auto; right: auto; left: 50%; margin-bottom: 2px; margin-left: -6px;
  border-bottom: 6px solid rgba(0,0,0,.9); border-top: none;
}
.filters-form .filter-actions{ display:flex; align-items:center; gap:12px; }
.filters-form .filter-actions{ flex-wrap: wrap }
.filters-form .filter-actions .btn{ min-height: 44px; height:44px; min-width: 140px; justify-content:center }

/* Compact layout (no field stretching): keep natural widths, just add separation */
.filters-form .filters-row{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 18px;
}
.filters-form .fg-search,
.filters-form .fg-category,
.filters-form .fg-subcategory,
.filters-form .fg-sort,
.filters-form .fg-tags,
.filters-form .fg-nsfwcat,
.filters-form .fg-nsfwsub,
.filters-form .fg-options{ grid-column: auto; }
.filters-form .fg-actions{ grid-column: 1 / -1; }
.filters-form .filter-group .options-inline{ display:flex; flex-wrap: wrap; gap: 8px 14px; align-items: center }
/* Mostrar/Ocultar filtros NSFW */
.nsfw-filters{ display: none !important; }
.nsfw-enabled .nsfw-filters{ display: block !important; }
/* Forzar búsqueda y etiquetas a ocupar fila completa para que no queden al lado de otros campos */
.filters-form .fg-search{ grid-column: 1 / -1; }
.filters-form .fg-tags{ grid-column: 1 / -1; }
.filters-form .btn{ border-radius:10px; }
.characters-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.character-card{ display:block; text-decoration:none; background: var(--neo-surface, rgba(255,255,255,.04)); border:1px solid rgba(124,58,237,.2); border-radius:14px; overflow:hidden; box-shadow: 0 12px 30px rgba(0,0,0,.28); color: var(--neo-text); }
.character-card .character-image{ position:relative; height:180px; background:#0f1526; display:flex; align-items:center; justify-content:center }
.character-card .character-image img{ width:100%; height:100%; object-fit:cover }
.character-card .character-image .nsfw-card-wrap{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.character-card .character-image .nsfw-card-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.character-card .character-image .nsfw-card-wrap[data-censored="1"] img{ filter:blur(24px); transform:scale(1.05) }
.character-card .character-image .nsfw-card-wrap[data-censored="1"] .nsfw-reveal-label-censor,
.character-card .character-image .nsfw-card-wrap[data-censored="1"] .nsfw-reveal-icon-censor{ display:none }
.character-card .character-image .nsfw-card-wrap[data-censored="0"] .nsfw-reveal-label-reveal,
.character-card .character-image .nsfw-card-wrap[data-censored="0"] .nsfw-reveal-icon-reveal{ display:none }
.character-card .character-image .nsfw-reveal-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; padding:8px 14px; border-radius:10px; border:2px solid rgba(255,255,255,.9); background:rgba(0,0,0,.65); color:#fff; font-weight:600; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .2s, border-color .2s; box-shadow:0 4px 20px rgba(0,0,0,.4) }
.character-card .character-image .nsfw-reveal-btn:hover{ background:rgba(0,0,0,.85); border-color:#fff }
.character-card .character-overlay{ position:absolute; inset:auto 10px 10px auto; display:flex; gap:8px }
.img-tags{ position:absolute; inset:10px 10px auto 10px; pointer-events:none; z-index:3 }
.img-tags-col{ position:absolute; display:flex; flex-direction:column; gap:6px }
.img-tags-col.left{ left:0; top:0; align-items:flex-start }
.img-tags-col.right{ right:0; top:0; align-items:flex-end }
.img-tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; backdrop-filter: blur(2px); border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.28); color:#fff; width:max-content }
html[data-mode="light"] .img-tag{ background: color-mix(in srgb, var(--neo-primary) 15%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 35%, transparent); color: var(--neo-text) }
.img-tag.tg-sealed{ background:linear-gradient(135deg,var(--neo-primary),var(--neo-accent)); color:#0b0f19; border:0 }
.img-tag.tg-nsfw{ background:rgba(239,68,68,.9); color:#fff; border-color:rgba(239,68,68,.9) }
.img-tag.tg-unique{ background:rgba(34,197,94,.92); color:#0b0f19; border-color:rgba(34,197,94,.9) }
.img-tag.tg-featured{ background:rgba(234,179,8,.95); color:#0b0f19; border-color:rgba(234,179,8,.9) }
.creator-badge{ position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; font-size:12px; backdrop-filter: blur(2px); z-index:3 }
html[data-mode="light"] .creator-badge{ background: color-mix(in srgb, var(--neo-primary) 18%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 40%, transparent); color: var(--neo-text) }
.title-badge{ position:absolute; left:10px; bottom:36px; display:inline-flex; align-items:center; padding:4px 8px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; font-size:13px; font-weight:700; backdrop-filter: blur(2px); z-index:3; max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html[data-mode="light"] .title-badge{ background: color-mix(in srgb, var(--neo-primary) 18%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 40%, transparent); color: var(--neo-text) }
.view-badge{ position:absolute; right:10px; bottom:10px; display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:6px 8px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:12px; backdrop-filter: blur(2px); z-index:3 }
.view-badge .icon{ color:#4b5563; filter: drop-shadow(0 0 4px rgba(255,255,255,.15)); }
.view-badge .num{ color:#fff; font-size:12px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.4) }
html[data-mode="light"] .view-badge{ background: color-mix(in srgb, var(--neo-primary) 16%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 35%, transparent) }
html[data-mode="light"] .view-badge .num{ color: var(--neo-text); text-shadow: none }
.like-badge{ position:absolute; left:10px; bottom:10px; display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:6px 8px; background:rgba(0,0,0,.25); backdrop-filter: blur(2px); border-radius:12px; border:1px solid rgba(255,255,255,.15); cursor:pointer; transition: transform var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease; z-index:3 }
.like-badge .ring{ position:absolute; inset:-6px; border-radius:14px; border:1px dashed color-mix(in srgb, var(--neo-primary, #7c3aed) 55%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--neo-accent, #22d3ee) 28%, transparent) inset; pointer-events:none }
.like-badge .star{ color: var(--neo-warning, #f59e0b); text-shadow:0 0 8px color-mix(in srgb, var(--neo-warning, #f59e0b) 70%, transparent); font-size:16px }
.like-badge .heart{ color: var(--neo-danger, #ef4444); text-shadow:0 0 8px color-mix(in srgb, var(--neo-danger, #ef4444) 70%, transparent); font-size:16px }
.like-badge .count{ font-weight:800; color:#fff; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.4) }
.like-badge .trend{ color: color-mix(in srgb, var(--neo-success, #22c55e) 50%, #0b0f19); background:color-mix(in srgb, var(--neo-success, #22c55e) 20%, transparent); border:1px solid color-mix(in srgb, var(--neo-success, #22c55e) 35%, transparent); padding:2px 6px; border-radius:999px; font-size:10px; line-height:1; display:inline-flex; align-items:center; gap:4px }
.like-badge:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.34) }
.like-badge.active .star{ filter:brightness(1.1); animation: glowPulse .7s ease }
.like-badge.active .heart{ filter:brightness(1.1); animation: heartBeat .6s ease }

.like-emblem{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.18); backdrop-filter: blur(2px); cursor:pointer; transition: transform var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease }
.like-emblem .ring{ position:absolute; inset:-8px; border-radius:16px; border:1px dotted color-mix(in srgb, var(--neo-primary, #7c3aed) 55%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--neo-accent, #22d3ee) 25%, transparent) inset }
.like-emblem .star{ color: var(--neo-warning, #f59e0b); text-shadow:0 0 10px color-mix(in srgb, var(--neo-warning, #f59e0b) 70%, transparent); font-size:18px }
.like-emblem .heart{ color: var(--neo-danger, #ef4444); text-shadow:0 0 10px color-mix(in srgb, var(--neo-danger, #ef4444) 70%, transparent); font-size:18px }
.like-emblem .like-counter{ color:#fff; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4) }
.like-emblem .trend{ color: color-mix(in srgb, var(--neo-success, #22c55e) 50%, #0b0f19); background:color-mix(in srgb, var(--neo-success, #22c55e) 20%, transparent); border:1px solid color-mix(in srgb, var(--neo-success, #22c55e) 35%, transparent); padding:2px 6px; border-radius:999px; font-size:11px; line-height:1 }
.like-emblem:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.3) }
.like-emblem.active .star{ filter:brightness(1.1); animation: glowPulse .7s ease }
.like-emblem.active .heart{ filter:brightness(1.1); animation: glowPulse .7s ease }

@keyframes glowPulse{ 0%{ text-shadow:0 0 6px color-mix(in srgb, var(--neo-accent, #22d3ee) 60%, transparent) } 50%{ text-shadow:0 0 14px color-mix(in srgb, var(--neo-accent, #22d3ee) 90%, transparent) } 100%{ text-shadow:0 0 6px color-mix(in srgb, var(--neo-accent, #22d3ee) 60%, transparent) } }

/* Light mode compatibility */
html[data-mode="light"] .like-badge{ background: color-mix(in srgb, var(--neo-primary) 14%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 35%, transparent) }
html[data-mode="light"] .like-emblem{ background: color-mix(in srgb, var(--neo-primary) 14%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 35%, transparent) }
html[data-mode="light"] .like-badge .count{ color: var(--neo-text); text-shadow: none }
html[data-mode="light"] .like-emblem .like-counter{ color:#0b0f19; text-shadow:none }
.character-card .nsfw-badge{ position:absolute; left:10px; top:10px; background:#ef4444; color:#fff; font-weight:700; font-size:12px; padding:4px 8px; border-radius:8px }
.character-card .unique-badge{ position:absolute; left:10px; top:38px; background:#22c55e; color:#0b0f19; font-weight:800; font-size:12px; padding:4px 8px; border-radius:8px }
.character-card .seal-badge{ position:absolute; right:10px; top:10px; background:linear-gradient(135deg,var(--neo-primary),var(--neo-accent)); color:#0b0f19; font-weight:800; font-size:12px; padding:4px 8px; border-radius:8px; box-shadow:var(--neo-shadow) }
.character-card .featured-badge{ position:absolute; left:10px; top:66px; background:rgba(234,179,8,.9); color:#0b0f19; font-weight:800; font-size:12px; padding:4px 8px; border-radius:8px; box-shadow:var(--neo-shadow) }
.character-card .pinned-badge{ position:absolute; right:10px; top:38px; background:rgba(34,197,94,.95); color:#0b0f19; font-weight:800; font-size:14px; line-height:1; padding:4px 8px; border-radius:8px; box-shadow:var(--neo-shadow) }
.character-card .character-content{ padding:8px 10px; display:grid; gap:0; min-width:0; overflow:hidden }
.cc-head2{ display:flex; align-items:center; justify-content:flex-start; margin:0 }
.cc-creator2{ display:inline-flex; align-items:center; gap:4px; padding:0; background:transparent; border:0; border-radius:0; font-size:12px; opacity:.9; margin:0; line-height:1 }
html[data-mode="light"] .cc-creator2{ background:transparent; border-color: transparent }
.cc-title2{ margin:0; font-size:15px; line-height:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cc-title2 .tx{ display:inline-block; padding:0; border-radius:0; background:transparent; border:0 }
html[data-mode="light"] .cc-title2 .tx{ background:transparent; border-color: transparent }
.cc-block{ display:grid; gap:2px }
.cc-head{ display:flex; align-items:center; justify-content:space-between }
.cc-creator{ margin:0; font-size:12px; line-height:1; opacity:.9 }
.cc-title-row{ display:flex; align-items:center; justify-content:space-between; gap:6px }
.cc-title{ margin:0; font-size:15px; line-height:1.08; font-weight:700 }
.cc-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.cc-desc{ margin:0; font-size:12.5px; line-height:1.18; overflow-wrap:break-word; word-break:break-word; white-space:normal; max-width:100% }
.character-card .title-row{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:4px; min-width:0 }
.character-card .title-row .t-left{ display:grid; gap:2px; min-width:0 }
.cc-subtitle{ margin:0; font-size:12px; opacity:.9; line-height:1 }
.character-card .name-like .like-col{ display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.characters-page .character-card .character-content > *{ margin:0 !important }
.character-card .like-badge--content{ position:static; inset:auto; background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.14) }
html[data-mode="light"] .character-card .like-badge--content{ background: color-mix(in srgb, var(--neo-primary) 14%, var(--neo-surface)); border-color: color-mix(in srgb, var(--neo-primary) 35%, transparent) }
.character-card .view-badge--content{ position:static; inset:auto }
.character-card .character-name{ font-size:15px; font-weight:700; color: var(--neo-text); margin:0; line-height:1.08 }
.character-card .character-creator{ margin:0; line-height:1.0; opacity:.9; font-size:12px }
.character-card .character-description{ margin:0; line-height:1.18; font-size:12.5px }
.character-card .character-meta{ display:flex; align-items:center; justify-content:space-between }
.character-card .meta-stats{ display:flex; align-items:center; gap:8px }
.character-card .stat-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10) }
.character-card .stat-pill i{ opacity:.9 }
.character-card .like-mini{ display:inline-flex; align-items:center; gap:10px; padding:9px 12px; min-height:38px; border-radius:999px; font-size:14px; border:1px solid rgba(239,68,68,.45); background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.06)); color:var(--neo-text); cursor:pointer; transition:transform var(--neo-transition-fast, .22s) ease, background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease; box-shadow:0 2px 10px rgba(0,0,0,.18) }
.character-card .like-mini .like-icon{ color:#ef4444; font-size:18px }
.character-card .like-mini .cnt{ font-weight:700 }
.character-card .like-mini:hover{ background:linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.10)); border-color:rgba(239,68,68,.6); box-shadow:0 4px 14px rgba(0,0,0,.22) }
.character-card .like-mini:active{ transform:scale(.97) }
.character-card .like-mini:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(239,68,68,.35), 0 4px 14px rgba(0,0,0,.22) }
.character-card .like-mini.active{ background:linear-gradient(135deg, #ef4444, #f59e0b); color:#0b0f19; border-color:transparent }
.character-card .like-mini.active .like-icon{ color:#0b0f19; animation: heartBeat .6s ease }

/* Like - botón unificado (perfil y mini) */
.like-btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; min-height:40px; border-radius:12px; font-weight:700; font-size:14px; letter-spacing:.2px; border:1px solid rgba(239,68,68,.5); background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.06)); color:var(--neo-text); cursor:pointer; transition: transform var(--neo-transition-fast, .22s) ease, background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease }
.like-btn i{ color:#ef4444; font-size:18px }
.like-btn:hover{ background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.10)); border-color: rgba(239,68,68,.65); box-shadow: 0 6px 18px rgba(0,0,0,.24) }
.like-btn:active{ transform:scale(.98) }
.like-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(239,68,68,.35), 0 6px 18px rgba(0,0,0,.24) }
.like-btn.active{ background: linear-gradient(135deg, #ef4444, #f59e0b); color:#0b0f19; border-color: transparent }
.like-btn.active i{ color:#0b0f19; animation: heartBeat .6s ease }
.like-btn .like-count{ font-weight:800 }
.like-btn--sm{ padding:8px 12px; min-height:36px; border-radius:10px; font-size:13px }

@keyframes heartBeat{ 0%{ transform:scale(1) } 25%{ transform:scale(1.15) } 50%{ transform:scale(1) } 75%{ transform:scale(1.1) } 100%{ transform:scale(1) } }

/* Heart burst particles */
.heart-burst{ position:absolute; pointer-events:none; left:50%; top:50%; width:8px; height:8px; transform: translate(-50%,-50%); opacity:0; }
.heart-burst::before{ content:"\f004"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#ef4444; font-size:10px; display:block }
.heart-burst.b1{ animation: burstUp .6s ease forwards }
.heart-burst.b2{ animation: burstRight .6s ease forwards }
.heart-burst.b3{ animation: burstLeft .6s ease forwards }
.heart-burst.b4{ animation: burstDown .6s ease forwards }
@keyframes burstUp{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.6) } 20%{ opacity:1 } 100%{ opacity:0; transform: translate(-50%,-110%) scale(1.1) rotate(-10deg) } }
@keyframes burstRight{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.6) } 20%{ opacity:1 } 100%{ opacity:0; transform: translate(20%, -60%) scale(1.1) rotate(12deg) } }
@keyframes burstLeft{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.6) } 20%{ opacity:1 } 100%{ opacity:0; transform: translate(-120%, -40%) scale(1.1) rotate(-14deg) } }
@keyframes burstDown{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.6) } 20%{ opacity:1 } 100%{ opacity:0; transform: translate(-60%, 20%) scale(1.1) rotate(8deg) } }

/* Settings menu (perfil personaje) */
.settings-menu{ position:relative; display:inline-block }
.settings-toggle{ display:inline-flex; gap:6px; align-items:center; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: var(--neo-text); cursor:pointer }
.settings-dropdown{ position:absolute; right:0; top:calc(100% + 10px); background: var(--neo-surface); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: var(--neo-shadow); min-width: 200px; padding: 8px; opacity:0; transform: translateY(-6px) scale(.98); pointer-events:none; transition: opacity var(--neo-transition-fast, .22s) ease, transform var(--neo-transition-fast, .22s) ease; transform-origin: top right; z-index: 2000 }
.settings-dropdown.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto }
.settings-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; color: var(--neo-text); text-decoration:none; cursor:pointer }
.settings-item:hover{ background: rgba(255,255,255,.06) }
html[data-mode="light"] .settings-toggle{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03) }
html[data-mode="light"] .settings-dropdown{ border-color: rgba(0,0,0,.08) }
.character-card .character-category{ font-size:12px; padding:4px 8px; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.25); border-radius:999px }
.character-card .character-stats{ display:flex; gap:12px; font-size:12px; opacity:.9 }
/* Chips en tarjetas de personajes */
.characters-grid .chip-section{margin-top:6px; min-width:0; position:relative; z-index:1}
/* .chip-list genérico: solo layout; NO recortar categorías (.cats) — antes max-height:32px las ocultaba en desktop */
.chip-list{display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start; margin-bottom:4px; min-width:0}
.chip-list.cats{max-height:none; overflow:visible}
/* Tags: ~2 líneas hasta expandir (JS “Mostrar más”) */
.chip-list.tags.clamped{max-height:4.75rem; overflow:hidden}
.chip-list.tags.expanded{max-height:none; overflow:visible}
.character-card .chip-list .chip.tag{max-width:100%; overflow-wrap:anywhere; word-break:break-word}
.chip-sep{height:1px; width:100%; background: rgba(255,255,255,.10); margin:4px 0}
.chip{display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.chip.cat{background:rgba(124,58,237,.15); border-color:rgba(124,58,237,.35)}
.chip.sub{background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.28)}
.chip.nsfw{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32)}
.chip.nsfw-cat{background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.22)}
.chip.nsfw-sub{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.18)}
.chip.minors{background:rgba(253,224,71,.10); border-color:rgba(253,224,71,.38); color:#fde047}
.chip.tag{background:rgba(255,255,255,.06)}
.chip-toggle{margin-top:6px}
.chip.unique{background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.32)}
.chip.featured{background:rgba(234,179,8,.18); border-color:rgba(234,179,8,.38)}
.empty-state{ margin-top:12px; background: rgba(255,255,255,.02); border:1px dashed rgba(124,58,237,.35); border-radius:14px; padding:14px }

/* Centrado del formulario y columnas consistentes */
.character-form{ max-width: 960px; margin: 0 auto; padding: 0 16px }
.character-form .form-group input,
.character-form .form-group select,
.character-form .form-group textarea{ width:100% }

@media (min-width: 840px){
  .character-form .form-row{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); justify-items: stretch; align-items: start }
  .character-form .form-row > *{ min-width: 0 }
}
@media (max-width: 991px){
  .character-form .form-row{ grid-template-columns: 1fr }
}
.character-form small{ color: var(--neo-muted) }
.character-form .checkbox-group{ align-self: start }
.character-form .checkbox-group .checkbox-label{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  user-select: none;
  transition: background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease;
}
.character-form .checkbox-label{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  user-select: none;
  transition: background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease;
}
.character-form .checkbox-group .checkbox-label.important{ border-color: rgba(239,68,68,.4); box-shadow: 0 0 0 2px rgba(239,68,68,.15) inset }
.character-form .checkbox-group .checkbox-label.important:hover{ border-color: rgba(239,68,68,.6); }
.character-form .checkbox-group .checkbox-label:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.character-form .checkbox-label:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.character-form .checkbox-group .checkbox-label input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.character-form .checkbox-label input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.character-form .checkbox-group .checkbox-label .checkmark,
.character-form .checkbox-label .checkmark{
  position: relative;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--neo-surface-2);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.10);
  flex: 0 0 20px;
}
.character-form .checkbox-group .checkbox-label .checkmark::after,
.character-form .checkbox-label .checkmark::after{
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 12px;
  border: 2px solid #0b0f19;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
  opacity: 0;
}
.character-form .checkbox-group .checkbox-label input[type="checkbox"]:focus-visible + .checkmark,
.character-form .checkbox-label input[type="checkbox"]:focus-visible + .checkmark{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neo-primary) 25%, transparent);
  border-color: var(--neo-primary);
}
.character-form .checkbox-group .checkbox-label input[type="checkbox"]:checked + .checkmark,
.character-form .checkbox-label input[type="checkbox"]:checked + .checkmark{
  background: linear-gradient(135deg, var(--neo-primary), var(--neo-accent));
  border-color: transparent;
}
.character-form .checkbox-group .checkbox-label input[type="checkbox"]:checked + .checkmark::after,
.character-form .checkbox-label input[type="checkbox"]:checked + .checkmark::after{ opacity: 1 }

/* Light mode for decorated checkbox */
html[data-mode="light"] .character-form .checkbox-group .checkbox-label{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}
html[data-mode="light"] .character-form .checkbox-label{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}
html[data-mode="light"] .character-form .checkbox-group .checkbox-label:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.14);
}
html[data-mode="light"] .character-form .checkbox-label:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.14);
}
html[data-mode="light"] .character-form .checkbox-group .checkbox-label .checkmark{
  background: #f5f7fd;
  border-color: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
}
html[data-mode="light"] .character-form .checkbox-label .checkmark{
  background: #f5f7fd;
  border-color: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
}

/* Asegurar decoración dentro de option-card para la casilla de menores */
.option-card .checkbox-label.important{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(239,68,68,.45) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Inputs del creador de personajes: tema oscuro/claro, focus y autofill */
.create-character-page .page-header h1{ margin:0 0 6px; font-weight:800 }
.create-character-page .page-header p{ color: var(--neo-muted); margin:0 0 16px }

.character-form input:not([type="checkbox"]):not([type="radio"]),
.character-form select,
.character-form textarea{
  width: 100%;
  background: var(--neo-surface-2);
  color: var(--neo-text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--neo-transition-fast, .22s) ease, box-shadow var(--neo-transition-fast, .22s) ease, background var(--neo-transition-fast, .22s) ease;
  display:block;
  box-sizing: border-box;
}
/* Ajuste fino: subir ligeramente los selects en el creador */
.character-form .form-group select{ margin-top: -2px }
.character-form textarea{ min-height: 110px }
.character-form input::placeholder,
.character-form textarea::placeholder{ color: rgba(230,233,242,.65) }
.character-form input:focus,
.character-form select:focus,
.character-form textarea:focus{
  border-color: var(--neo-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neo-primary) 25%, transparent);
}
.character-form input[type="checkbox"]{ accent-color: var(--neo-primary); }

/* File input temático (envoltorio personalizado que mantiene accesibilidad) */
.file-input{ display:flex; align-items:center; gap:10px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:8px 10px; }
.file-input .fi-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color: var(--neo-text); box-shadow:none }
.file-input .fi-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16) }
.file-input .fi-btn i{ color: var(--neo-text) }
.file-input .fi-name{ color: var(--neo-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-input .fi-native{ position:absolute; opacity:0; pointer-events:none; width:0; height:0 }
html[data-mode="light"] .file-input{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10) }
html[data-mode="light"] .file-input .fi-btn{ background: rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.10); color:#0b0f19 }
html[data-mode="light"] .file-input .fi-btn:hover{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.14) }
.character-form .preview{ margin-top: 6px }

/* Evitar solapes en secciones largas */
.character-form .form-section{ padding: 6px 0; }
.character-form .form-section + .form-section{ margin-top: 10px; }

/* Light mode overrides */
html[data-mode="light"] .character-form input:not([type="checkbox"]):not([type="radio"]),
html[data-mode="light"] .character-form select,
html[data-mode="light"] .character-form textarea{
  background: #f5f7fd; border-color: rgba(0,0,0,.10); color: #0b0f19;
}
html[data-mode="light"] .character-form input::placeholder,
html[data-mode="light"] .character-form textarea::placeholder{ color: rgba(11,15,25,.55) }

/* Autofill for dark */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--neo-text);
  -webkit-box-shadow: 0 0 0px 1000px var(--neo-surface-2) inset;
}
.ticket .card-sub{color:var(--neo-muted)}
.ticket textarea{background:var(--neo-surface-2);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--neo-text);padding:10px 12px;min-height:110px}
.ticket button.btn{transition:background var(--neo-transition-fast, .22s),border-color var(--neo-transition-fast, .22s),transform var(--neo-transition-fast, .22s)}
.ticket button.btn:active{transform:scale(.98)}
.ticket button.btn.active, .ticket button.btn[data-active="1"]{background:var(--neo-primary);color:#fff;border-color:var(--neo-primary)}
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* Footer */
.footer { margin-top: 60px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-bottom { text-align: center; color: var(--neo-muted); padding: 24px 0; font-size: 14px; }

/* Responsive */
@media (max-width: 920px) {
  .header-container { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .nav.open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 64px; background: var(--neo-surface); padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* Topbar */
.topbar { background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(34,211,238,.20)); border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; color: var(--neo-text); }
.topbar .topbar-container { max-width: 1200px; margin: 0 auto; padding: 6px 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center; }
.topbar .mini { display: flex; gap: 16px; align-items: center; }
.topbar .pill { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
html[data-mode="light"] .topbar{ background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(6,182,212,.12)); border-bottom-color: rgba(0,0,0,.06); }
html[data-mode="light"] .topbar .pill{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }

/* Back to top - Rehecho correctamente */
#backToTop,
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--neo-accent, #22d3ee);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--neo-shadow);
  transition: opacity 0.3s ease, transform 0.2s ease;
}

#backToTop:hover,
.back-to-top:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

#backToTop.visible,
.back-to-top.visible {
  display: flex;
}

/* Footer simple */
.footer--simple { border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.footer-container-simple { max-width: 1200px; margin: 0 auto; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.footer-left { color: var(--neo-muted); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.footer-links-inline { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer-links-inline a { color: var(--neo-text); font-size: 14px; opacity: .85; }
.footer-links-inline a:hover { opacity: 1; }
.footer-social { display: flex; gap: 10px; justify-content: flex-end; }
.footer-social a { color: var(--neo-text); opacity: .8; }
.footer-social a:hover { opacity: 1; }




/* Admin Drawer (Editor de personajes) */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity var(--neo-transition-fast, .22s) ease; z-index:11000 }
.drawer-backdrop.show{ opacity:1; pointer-events:auto }
.admin-drawer{ position:fixed; right:0; top:0; bottom:0; width:clamp(360px, 92vw, 820px); max-width:100vw; box-sizing:border-box; background:var(--neo-surface); border-left:1px solid rgba(255,255,255,.10); box-shadow:var(--neo-shadow); transform:translateX(100%); transition:transform var(--neo-transition-normal, .3s) ease; z-index:11001; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; overflow-x:hidden }
.admin-drawer.open{ transform:translateX(0) }
.drawer-header{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent) }
.drawer-title{ display:flex; align-items:center; gap:10px; font-weight:800 }
.drawer-title .ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#0b0f19; background:linear-gradient(135deg,var(--neo-primary),var(--neo-accent)); box-shadow:var(--neo-shadow) }
.drawer-actions{ display:flex; align-items:center; gap:8px }
.drawer-actions .btn{ min-height:36px }
.drawer-tabs{ display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02) }
.drawer-tab{ appearance:none; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:var(--neo-text); padding:8px 12px; border-radius:10px; cursor:pointer; font-size:13px; transition:background var(--neo-transition-fast, .22s) ease, border-color var(--neo-transition-fast, .22s) ease }
.drawer-tab:hover{ background:rgba(255,255,255,.06) }
.drawer-tab.active{ background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.35) }
.drawer-content{ height:100%; overflow:auto; padding:12px 14px }
.drawer-section{ display:none; animation: fadeIn var(--neo-animation-duration, .35s) ease; max-height:100%; overflow:auto }
.drawer-section.active{ display:block }
.drawer-footer{ padding:10px 14px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:flex-end; gap:10px; background:linear-gradient(0deg, rgba(255,255,255,.02), transparent) }
@keyframes fadeIn{ from{opacity:.0; transform: translateY(4px)} to{opacity:1; transform: translateY(0)} }

/* Ajustes de formularios dentro del drawer */
.admin-drawer .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
@media (max-width: 760px){ .admin-drawer .form-grid{ grid-template-columns: 1fr } }
.admin-drawer .form-grid > *{ min-width:0 }
.admin-drawer .form-grid input,
.admin-drawer .form-grid select,
.admin-drawer .form-grid textarea{ width:100%; min-width:0; box-sizing:border-box }
.admin-drawer .drawer-body{ display:grid; grid-template-columns: 220px 1fr; gap:0; height:100%; min-height:0 }
@media (max-width: 880px){ .admin-drawer .drawer-body{ grid-template-columns: 1fr } }
.drawer-aside{ border-right:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); padding:10px; height:100%; overflow:auto }
.drawer-nav{ display:flex; flex-direction:column; gap:8px }
.drawer-nav-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:var(--neo-text); cursor:pointer; transition:background var(--neo-transition-fast, .22s), border-color var(--neo-transition-fast, .22s) }
.drawer-nav-item i{ opacity:.9 }
.drawer-nav-item:hover{ background:rgba(255,255,255,.06) }
.drawer-nav-item.active{ background:rgba(124,58,237,.18); border-color:rgba(124,58,237,.35) }
.drawer-main{ height:100%; min-height:0; overflow:auto; overflow-x:hidden; padding:12px 14px }
.drawer-card{ border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-radius:14px; padding:12px; box-shadow:var(--neo-shadow); margin-bottom:12px }
.drawer-card h4{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-weight:800 }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06) }
.badge.featured{ border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.18); color: #fff }
.badge.pinned{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.18); color: #fff }
.badge.danger{ border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.15) }
.badge.warn{ border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.15) }
.badge.ok{ border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.15) }
.admin-drawer textarea{ min-height: 96px }
.admin-drawer hr{ border:0; border-top:1px solid rgba(255,255,255,.08); margin:10px 0 }
.pill-badges{ display:flex; gap:8px; flex-wrap:wrap }
.pill{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:12px }

.neo-glass-panel {
  padding: 1.25rem;
  border-radius: var(--neo-radius, 16px);
  background: var(--neo-surface);
  border: 1px solid var(--neo-border, rgba(255, 255, 255, 0.08));
}

.neo-glass {
  background: var(--neo-surface);
  border: 1px solid var(--neo-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--neo-radius, 16px);
}