/* RedAI-Web – Character view page (estilos centralizados; solo background-image de page-fx-bg queda inline por backend) */

/* ========== FIX EN LA RAÍZ: main sin flex en esta página ========== */
/* El layout global usa main { display: flex; flex-direction: column }. Aquí forzamos block + ancho completo
   para que el contenido no quede limitado por el contenedor padre. */
.main-fullwidth {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Esta página usa todo el ancho disponible (sin límite 1280px del .container). */
.main-fullwidth .container {
  max-width: 100%;
  width: 100%;
}

/* ========== LAYOUT PRINCIPAL: 1 columna, 3 filas (banner | perfil | galería+stats+comentarios) ========== */
.character-profile.container.character-profile--grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "banner"
    "profile"
    "content";
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 2rem;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.character-profile__banner-area { grid-area: banner; width: 100%; min-width: 0; }
.character-profile__profile-area { grid-area: profile; width: 100%; min-width: 0; }
.character-profile__content-area {
  grid-area: content;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 24px;
  box-sizing: border-box;
}
.character-profile__content-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 24px;
  align-items: stretch;
  box-sizing: border-box;
}
.character-profile__content-grid > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.character-profile.container {
  padding-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.character-view-page {
  padding: 1rem 0;
}

.character-view-header {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--neo-surface);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}

.character-view-avatar {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.character-view-info {
  flex: 1;
  min-width: 0;
}

.character-view-title {
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
  color: var(--neo-text);
}

.character-view-description {
  font-size: 1rem;
  color: var(--neo-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.character-view-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.character-view-category,
.character-view-rating {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  background: rgba(124,58,237,.15);
  color: var(--neo-primary);
}

.character-view-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.character-view-actions .btn {
  min-width: 120px;
}

.character-view-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.character-view-main {
  background: var(--neo-surface);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem;
}

.character-view-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.character-view-card {
  background: var(--neo-surface);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 1.25rem;
}

.character-view-card h3 {
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  color: var(--neo-text);
}

/* ===== Zona content (Galería, Estadísticas, Comentarios): ancho completo vía grid-area ===== */
.character-profile__content-area {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.character-profile__content-grid,
.character-profile .character-profile__content-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 24px;
  align-items: stretch;
  box-sizing: border-box;
}
.character-profile__content-grid > *,
.character-profile .character-profile__content-grid > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.character-profile__content-grid .gallery,
.character-profile__content-grid .stats,
.character-profile__content-grid .comments,
.character-profile__content-grid .card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ===== RESPONSIVE CHARACTER VIEW (perfil .character-profile) ===== */

/* Contenedor principal: sin scroll horizontal */
.character-profile.container {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* Tablet (hasta 980px) */
@media (max-width: 980px) {
  .character-profile .profile-info-card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Tablet / móvil (hasta 768px) */
@media (max-width: 768px) {
  .character-profile.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .character-profile .profile-info-card {
    min-width: 0;
  }
  .character-profile .meta .name small {
    display: inline;
    word-break: break-word;
  }
}

/* Móvil (hasta 720px) */
@media (max-width: 720px) {
  .character-profile.container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .character-profile .content-grid .card {
    min-width: 0;
  }
}

/* Móvil pequeño: safe area para muescas */
@media (max-width: 480px) {
  .character-profile.container {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* Legacy: Móvil (max-width: 1023px) – clases character-view-* si se usan */
@media (max-width: 1023px) {
  .character-view-page {
    padding: 0.75rem 0;
  }
  .character-view-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  .character-view-avatar {
    width: 100px;
    height: 100px;
    align-self: center;
  }
  .character-view-title {
    font-size: 1.5rem;
    text-align: center;
  }
  .character-view-description {
    font-size: 0.9375rem;
    text-align: center;
  }
  .character-view-meta {
    justify-content: center;
    gap: 0.75rem;
  }
  .character-view-actions {
    width: 100%;
    flex-direction: column;
  }
  .character-view-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .character-view-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .character-view-main {
    padding: 1rem;
  }
  .character-view-card {
    padding: 1rem;
  }
}

/* ===== Character view – from template (decoración en CSS) ===== */

.page-fx-bg{position:fixed; inset:-40px; background-size:cover; background-position:center center; background-repeat:no-repeat; background-attachment:fixed; opacity:.22; z-index:0; filter: blur(2px); pointer-events:none}
/* Follow pill */
/* Seguir: pill outline consistente con la familia de botones */
.follow-pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:12px; border:1px solid color-mix(in srgb, var(--color-primary, #7c3aed) 45%, transparent); background:rgba(255,255,255,.04); color:var(--color-primary, #7c3aed); cursor:pointer; font-weight:600; font-size:14px; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; box-shadow:0 2px 8px rgba(0,0,0,.12) }
.follow-pill i{ color: currentColor; font-size:14px }
.follow-pill:hover{ background:color-mix(in srgb, var(--color-primary, #7c3aed) 12%, transparent); border-color:color-mix(in srgb, var(--color-primary, #7c3aed) 55%, transparent); box-shadow:0 4px 14px color-mix(in srgb, var(--color-primary, #7c3aed) 25%, transparent); transform:translateY(-1px) }
.follow-pill:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.15) }
html[data-mode="light"] .follow-pill{ background:rgba(124,58,237,.06); border-color:rgba(124,58,237,.35); box-shadow:0 1px 4px rgba(0,0,0,.06) }
html[data-mode="light"] .follow-pill:hover{ background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.5); box-shadow:0 4px 12px rgba(124,58,237,.2) }

/* ===== Menú de acciones (botón a la derecha de Seguir): abrir/cerrar sin overlay ===== */
.character-profile .actions-grid .char-actions{ order:4; position:relative; height:42px; display:inline-flex; align-items:center; z-index:100; }
.char-actions.is-open{ z-index:101; }
.char-actions-trigger{
  height:42px; min-height:42px; padding:0 16px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; border:1px solid rgba(255,255,255,.18); background:var(--color-bg-card, #101625); color:var(--neo-text, #e6e9f2);
  box-shadow:0 2px 10px rgba(0,0,0,.12); cursor:pointer; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
  -webkit-appearance:none; appearance:none;
}
.char-actions-trigger:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); box-shadow:0 4px 14px rgba(0,0,0,.18); transform:translateY(-1px); }
.char-actions-trigger:active{ transform:translateY(0); }
.char-actions-trigger:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(124,58,237,.4); }
.char-actions-trigger .fa-chevron-down{ font-size:10px; opacity:.9; transition:transform .2s ease; }
.char-actions.is-open .char-actions-trigger .fa-chevron-down{ transform:rotate(180deg); }

.char-actions-menu{
  display:none; position:absolute; right:0; top:100%; margin-top:8px; min-width:280px; max-width:min(360px, calc(100vw - 24px)); max-height:60vh;
  flex-direction:column; gap:14px; padding:16px; overflow-y:auto; overflow-x:hidden;
  background:var(--color-bg-card, #101625); border:1px solid var(--color-border, rgba(255,255,255,.12)); border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.32); z-index:14000; isolation:isolate; pointer-events:auto;
}
.char-actions.is-open .char-actions-menu{ display:flex; }
/* Evitar que nada encima del menú intercepte clics: contenido del menú clickeable, hijos de botones no */
.char-actions-menu .char-actions-tile,
.char-actions-menu .char-actions-item{ pointer-events:auto !important; }
.char-actions-menu .char-actions-tile *,
.char-actions-menu .char-actions-item *{ pointer-events:none !important; }
.char-actions-menu .char-actions-sep{ pointer-events:none; }
/* Que ningún tooltip ni pseudo-elemento de elementos con [title] quede por encima del menú */
.char-actions-menu [title]::before,
.char-actions-menu [title]::after{ pointer-events:none !important; z-index:-1; }

.char-actions-sep{ height:1px; background:linear-gradient(90deg, transparent, var(--color-border, rgba(255,255,255,.18)), transparent); margin:10px 0; border-radius:1px; }

.char-actions-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--color-primary, #7c3aed);
  cursor:pointer; min-height:52px; box-sizing:border-box; font-weight:600; font-size:14px; text-decoration:none;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.char-actions-item i{ flex-shrink:0; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(124,58,237,.15); font-size:15px; }
.char-actions-item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.char-actions-item:hover{ background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.4); box-shadow:0 6px 20px rgba(124,58,237,.18); transform:translateY(-1px); }
.char-actions-item-owner{ background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.4); }
.char-actions-item-owner:hover{ background:rgba(124,58,237,.16); border-color:rgba(124,58,237,.55); }
.char-actions-item-danger{ color:#ef4444; background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.25); }
.char-actions-item-danger i{ background:rgba(239,68,68,.2); color:#ef4444; }
.char-actions-item-danger:hover{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.45); }

.char-actions-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.char-actions-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:88px; padding:16px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:var(--neo-text); cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06); -webkit-appearance:none; appearance:none;
}
.char-actions-tile i{ font-size:22px; margin-bottom:8px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(124,58,237,.12); color:var(--color-primary, #7c3aed); }
.char-actions-tile span{ font-size:13px; font-weight:600; line-height:1.3; text-align:center; }
.char-actions-tile:hover{ transform:translateY(-3px); background:linear-gradient(180deg, rgba(124,58,237,.14), rgba(124,58,237,.06)); border-color:rgba(124,58,237,.4); box-shadow:0 10px 24px rgba(124,58,237,.2); }
.char-actions-tile:active{ transform:translateY(-1px); }
.char-actions-tile-warn i{ color:var(--color-warning, #f59e0b); background:rgba(245,158,11,.12); }
.char-actions-tile-warn:hover{ background:linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06)); border-color:rgba(245,158,11,.4); }
.char-actions-tile-danger i{ color:var(--color-error, #ef4444); background:rgba(239,68,68,.12); }
.char-actions-tile-danger:hover{ background:linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.06)); border-color:rgba(239,68,68,.4); }
.char-actions-tile.saved{ background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.08)); border-color:rgba(59,130,246,.45); }
.char-actions-tile.saved i{ background:rgba(59,130,246,.2); color:#3b82f6; }

html[data-mode="light"] .char-actions-trigger{ background:#f8fafc; border-color:rgba(0,0,0,.12); color:#0f172a; box-shadow:0 1px 4px rgba(0,0,0,.06); }
html[data-mode="light"] .char-actions-trigger:hover{ background:#f1f5f9; border-color:rgba(0,0,0,.18); }
html[data-mode="light"] .char-actions-menu{ background:var(--color-bg-card, #fff); border-color:var(--color-border, #e5e7eb); box-shadow:0 18px 40px rgba(0,0,0,.08); }
html[data-mode="light"] .char-actions-item{ color:var(--color-text-primary, #0b0f19); background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
html[data-mode="light"] .char-actions-item i{ background:rgba(124,58,237,.12); }
html[data-mode="light"] .char-actions-item:hover{ background:color-mix(in srgb, var(--color-primary, #7c3aed) 8%, #fff); border-color:color-mix(in srgb, var(--color-primary, #7c3aed) 26%, transparent); }
html[data-mode="light"] .char-actions-tile{ background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); border-color:rgba(0,0,0,.1); }
html[data-mode="light"] .char-actions-tile i{ background:rgba(124,58,237,.1); }
html[data-mode="light"] .char-actions-tile:hover{ background:linear-gradient(180deg, rgba(124,58,237,.1), rgba(124,58,237,.04)); border-color:rgba(124,58,237,.35); }

/* Mega Like 2.0: botón de like grande con partículas y compatible con temas */
.character-profile .actions{ position:relative; z-index:12000; isolation:isolate }
.character-profile .actions .btn.btn-primary{ position:relative; z-index:1 }
/* Like: botón compacto y decorado, misma familia que el resto */
.mega-like{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:42px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.mega-like:hover{transform:translateY(-1px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.mega-like .mlk-heart{font-size:20px;color:var(--color-like, var(--color-error, #ef4444));text-shadow:0 0 0 rgba(0,0,0,0);transition:transform .18s ease, color .18s ease, text-shadow .18s ease}
.mega-like .mlk-count{font-weight:700;font-size:14px;min-width:1.6em;text-align:right;opacity:.95;letter-spacing:.02em}
.mega-like .mlk-bg{position:absolute;inset:0;background:radial-gradient(700px 700px at var(--x,50%) var(--y,50%), color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 28%, transparent), transparent 58%);opacity:.0;transition:opacity .25s ease}
.mega-like .mlk-glow{position:absolute;filter:blur(18px);inset:-30%;background:conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 22%, transparent), transparent, color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 22%, transparent));opacity:.0;transition:opacity .25s ease}
.mega-like .mlk-burst{position:absolute;inset:0;pointer-events:none}
.mega-like:hover .mlk-bg{opacity:.8}
.mega-like:hover .mlk-glow{opacity:.35}
.mega-like:active{transform:translateY(0)}
.mega-like.liked{background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.12));border-color:rgba(239,68,68,.5);box-shadow:0 4px 18px rgba(239,68,68,.28), inset 0 1px 0 rgba(255,255,255,.08)}
.mega-like.liked .mlk-heart{color:#ef4444;text-shadow:0 0 16px rgba(239,68,68,.5);animation:mlkPop .35s ease}
.mega-like.liked .mlk-bg{opacity:.95}
.mega-like.liked .mlk-glow{opacity:.5}
@keyframes mlkPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
/* Partículas */
.mlk-burst::before,.mlk-burst::after{content:"";position:absolute;inset:0;background:
  radial-gradient(6px 6px at 20% 40%, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 60%, transparent 61%),
  radial-gradient(5px 5px at 80% 30%, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 60%, transparent 61%),
  radial-gradient(4px 4px at 40% 80%, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 60%, transparent 61%),
  radial-gradient(5px 5px at 70% 70%, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 60%, transparent 61%);
opacity:0; transform:scale(.8);}
.mega-like.liked .mlk-burst::before{animation:mlkBurst 680ms ease-out}
.mega-like.liked .mlk-burst::after{animation:mlkBurst 780ms ease-out; animation-delay:.06s}
@keyframes mlkBurst{0%{opacity:0; transform:scale(.6) rotate(0deg)}20%{opacity:1}100%{opacity:0; transform:scale(1.8) rotate(25deg)}}
/* Modo claro */
html[data-mode="light"] .mega-like{ background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03)); border-color:rgba(0,0,0,.12) }
html[data-mode="light"] .mega-like:hover{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04)); border-color:rgba(0,0,0,.18) }
html[data-mode="light"] .mega-like .mlk-heart{ color:var(--color-like, var(--color-error, var(--color-accent, #ef4444))) }
html[data-mode="light"] .mega-like .mlk-bg{ background:radial-gradient(700px 700px at var(--x,50%) var(--y,50%), color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 32%, transparent), transparent 58%) }
html[data-mode="light"] .mega-like.liked{ background:linear-gradient(180deg, color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 14%, transparent), rgba(0,0,0,.02)); border-color:color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 42%, rgba(0,0,0,.16)) }
html[data-mode="light"] .mega-like.liked .mlk-heart{ color:var(--color-like, var(--color-error, var(--color-accent, #ef4444))); text-shadow:0 0 20px color-mix(in srgb, var(--color-like, var(--color-error, var(--color-accent, #ef4444))) 40%, transparent) }
/* Banner mejorado con overlay y radios consistentes */
.character-profile .banner{position:relative;z-index:3;height:260px;border-radius:16px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.08);box-shadow:var(--neo-shadow);overflow:hidden; cursor: zoom-in}
.character-profile .banner .overlay{display:none}
/* NSFW censura: contenedor y blur */
.nsfw-censored-wrap{position:relative;display:block}
.character-profile .nsfw-avatar-wrap{
  position: relative;
  display: inline-block;
  overflow: visible;
  padding-right: 0;
  isolation: isolate;
}
.character-profile .nsfw-banner-wrap[data-censored="1"] .banner{filter:blur(24px);transform:scale(1.05)}
.character-profile .nsfw-avatar-wrap[data-censored="1"] .avatar{filter:blur(24px)}
.character-profile .nsfw-avatar-wrap .avatar-wrap{
  position: relative;
  z-index: 1;
}
.nsfw-censored-wrap[data-censored="1"] .nsfw-reveal-label-censor,
.nsfw-censored-wrap[data-censored="1"] .nsfw-reveal-icon-censor{display:none}
.nsfw-censored-wrap[data-censored="0"] .nsfw-reveal-label-reveal,
.nsfw-censored-wrap[data-censored="0"] .nsfw-reveal-icon-reveal{display:none}
.nsfw-reveal-btn{
  position:absolute;top:12px;right:12px;left:auto;transform:none;
  z-index:10;padding:10px 18px;border-radius:12px;border:2px solid rgba(255,255,255,.9);
  background:rgba(0,0,0,.65);color:#fff;font-weight:600;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:background .2s, border-color .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.4)
}
.nsfw-reveal-btn:hover{background:rgba(0,0,0,.85);border-color:#fff}
.character-profile .nsfw-banner-wrap .nsfw-reveal-btn{
  top:50%;
  right:16px;
  transform:translateY(-50%);
}
.character-profile .nsfw-avatar-wrap .nsfw-reveal-btn{
  top:12px;
  right:12px;
  left:auto;
  transform:none;
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  justify-content:center;
  z-index:60 !important;
  pointer-events:auto;
}
.character-profile .nsfw-avatar-wrap .nsfw-reveal-btn .nsfw-reveal-label-reveal,
.character-profile .nsfw-avatar-wrap .nsfw-reveal-btn .nsfw-reveal-label-censor{
  display:none;
}

/* Panel de información del perfil: grid 2 columnas — columna izquierda SOLO foto, derecha meta + tags + descripción + amigos (sin auto para evitar bugs) */
.character-profile .profile-info-card{
  margin-top:20px;
  padding:24px;
  background:var(--neo-surface, rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:var(--neo-shadow, 0 8px 32px rgba(0,0,0,.2));
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:340px 1fr;
  grid-template-rows:1fr;
  gap:20px;
  align-items:start;
}
html[data-mode="light"] .character-profile .profile-info-card{
  background:#fff;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
/* Header sin layout propio: sus hijos pasan a ser hijos del grid del panel */
.character-profile .profile-info-card .header{display:contents}
/* Columna 1: solo avatar (a la izquierda; amigos/desc no se mueven, siguen a la derecha) */
.character-profile .profile-info-card .avatar-card{grid-column:1;grid-row:1;align-self:start}
/* Columna 2: meta-col = nombre, badges, by, tags → descripción → amigos; ancho completo para no dejar huecos */
.character-profile .profile-info-card .meta-col{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0;width:100%;align-items:stretch;align-self:stretch}
/* Meta: nombre, badges, creado por, tags — ancho completo de la columna, sin huecos */
.character-profile .profile-info-card .meta{padding:0;display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;flex-shrink:0}
/* meta-head por encima de badges/tags/desc/amigos para que el menú de acciones no quede tapado */
.character-profile .meta-head{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:20}
.character-profile .avatar-card{background:var(--neo-surface);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:10px;display:grid;grid-template-rows:auto auto;gap:8px;width:340px}
.character-profile .avatar-wrap{position:relative;width:320px;height:320px;justify-self:center}
.character-profile .avatar-wrap.portrait{width:320px;height:480px}
.character-profile .avatar{width:100%;height:100%;border-radius:18px;object-fit:cover;display:block;box-shadow:0 12px 34px rgba(0,0,0,.55); cursor: zoom-in}
.character-profile .avatar-wrap::before{content:"";position:absolute;inset:-3px;border-radius:20px;background:linear-gradient(135deg, var(--neo-primary), var(--neo-accent));filter:blur(0);z-index:-1}
.character-profile .avatar-wrap::after{content:"";position:absolute;inset:0;border-radius:18px;border:2px solid rgba(255,255,255,.85);mix-blend-mode:screen;pointer-events:none;z-index:1}
.character-profile .nsfw-avatar-wrap .avatar-wrap .avatar{position:relative;z-index:0}
.character-profile .nsfw-avatar-wrap .avatar-wrap .nsfw-reveal-btn{z-index:80 !important}

.character-profile .meta .name{margin:0}
/* Todo lo que va debajo de meta-head (badges, creado por, tags) no intercepta clics para que el menú de acciones reciba los clics */
.character-profile .meta .badges,
.character-profile .meta .by,
.character-profile .meta .tags{ pointer-events:none }
.character-profile .meta .by button,
.character-profile .meta .by .btn,
.character-profile .meta .by a,
.character-profile .meta .tags a,
.character-profile .meta .badges a,
.profile-creator-link { pointer-events:auto }
.character-profile .badges{display:flex;gap:6px;margin:0;flex-wrap:wrap; position:relative; z-index:1}
.dropdown{ position:relative; z-index:5 }
.dropdown .dropdown-menu{ z-index:6 }
.badge{padding:4px 8px;border-radius:999px;border:1px solid rgba(124,58,237,.35);font-size:12px}
.badge.tag{border-color:rgba(124,58,237,.25);background:rgba(124,58,237,.12)}
.character-profile .meta .tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;padding:2px 4px}
.badge.nsfw{background:#ef4444;color:#fff;border-color:#ef4444}
  /* Todas las categorías NSFW en rojo, en cualquier parte */
  .badge.nsfw-cat, .badge.nsfw-sub, .chip.nsfw, .chip.nsfw-red{
    background:#ef4444 !important; color:#fff !important; border-color:#ef4444 !important;
  }
.badge.unique{background:#22d3ee;color:#0b0f19;border-color:#22d3ee}
.badge.featured{ background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.45); color: var(--color-text-primary, #fff) }
.badge.pinned{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.45); color: var(--color-text-primary, #fff) }
.badge.cloned{ background: rgba(99,102,241,.18); border-color: rgba(129,140,248,.55); color: var(--color-text-primary, #e6e9f2) }
/* Categorías personalizadas con estilo especial */
.badge.cat.custom, .badge.subcat.custom{
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  border-color: #f59e0b;
  font-weight: 600;
  position: relative;
}
.badge.cat.custom::before, .badge.subcat.custom::before{
  content: "⭐";
  margin-right: 4px;
  font-size: 10px;
}
/* Modo claro: asegurar contraste del texto en badges */
html[data-mode="light"] .badge{ color: var(--color-text-primary, #0b0f19) }
html[data-mode="light"] .badge.tag{ color: #0b0f19 }
.seal-tag{display:inline-block;margin-left:8px;background:linear-gradient(135deg,var(--neo-primary),var(--neo-accent));color:#0b0f19;border-radius:8px;padding:2px 6px;font-size:12px;font-weight:800}
.character-profile .actions{display:flex;gap:10px;align-items:center}
.character-profile .actions .copy-hidden-btn{flex:0 0 auto}
/* Amigos (friend links) */
.friends-wrap{margin-top:10px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg, rgba(255,255,255,.04), transparent)}
.friends-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.friends-title{margin:0;display:flex;align-items:center;gap:8px}
.friends-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.friend-card{display:grid;grid-template-columns:96px 1fr;gap:10px;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03)}
.friend-card .fc-thumb{position:relative;width:96px;height:96px;overflow:hidden;border-radius:12px}
.friend-card .fc-thumb::before{content:"";position:absolute;inset:-2px;border-radius:14px;background:conic-gradient(from 0deg, var(--ring-a, #7c3aed), var(--ring-b, #22d3ee), var(--ring-a, #7c3aed));filter:blur(0);z-index:0}
.friend-card .fc-thumb::after{content:"";position:absolute;inset:0;border-radius:12px;background:rgba(0,0,0,.35);z-index:1}
.friend-card .fc-thumb img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
.friend-card:hover .fc-thumb::before{filter:brightness(1.15)}
.friend-card.is-featured .fc-thumb{--ring-a:#7c3aed;--ring-b:#c084fc}
.friend-card.is-pinned .fc-thumb{--ring-a:#3b82f6;--ring-b:#93c5fd}
.friend-card.is-nsfw .fc-thumb{--ring-a:#ef4444;--ring-b:#fca5a5}
.friend-card .fc-body{display:grid;gap:6px;padding:8px}
.friend-card .fc-name{margin:0}
.friend-card .fc-meta{opacity:.85;font-size:12px}
.friend-card .fc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.friend-card .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:12px;opacity:.95}
.friend-card .chip.pinned{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.12)}
.friend-card .chip.featured{border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.14)}
.friend-card .chip.unique{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.12)}
.friend-card .chip.nsfw{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.15);color:#fff}
.friend-card .chip.nsfw-red{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.18);color:#fff}
.friend-card .chip.cat{border-color:rgba(255,255,255,.18)}
.friend-card .chip.subcat{border-color:rgba(255,255,255,.18)}
.friend-card .chip.seal{border-color:rgba(124,58,237,.55);background:rgba(124,58,237,.18)}
.friend-card .fc-desc{white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}
.friend-card .fc-actions{display:flex;gap:8px}
.friends-panel{margin-top:10px;border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:10px}
.fp-row{display:flex;gap:8px}
.fp-search{flex:1;min-width:0;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:inherit;border-radius:10px;padding:8px 10px}
.friends-results{max-height:280px;overflow:auto;display:grid;gap:8px;margin-top:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.friends-results .r{display:grid;grid-template-columns:60px 1fr auto;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 8px}
.friends-results .r img{width:60px;height:60px;object-fit:cover;border-radius:8px}
.friends-results .r .n{font-weight:700}
.friends-results .r .m{font-size:12px;opacity:.85}
html[data-mode="light"] .friend-card{background:#fff;border-color:#e5e7eb}
html[data-mode="light"] .friend-card .fc-thumb::after{background:rgba(255,255,255,.15)}
/* Selector decorado (checkbox) en resultados de amigos */
.friends-results .r > div:last-child{display:flex;align-items:center;justify-content:center}
.friends-results .r input[type="checkbox"]{
  /* Reset */
  -webkit-appearance:none; appearance:none; margin:0;
  width:22px; height:22px; border-radius:6px;
  border:2px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 0 0 0 rgba(124,58,237,.0);
  cursor:pointer; position:relative; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  accent-color: var(--neo-primary, #7c3aed);
}
.friends-results .r input[type="checkbox"]:hover{
  border-color: color-mix(in srgb, var(--neo-primary, #7c3aed) 45%, rgba(255,255,255,.22));
  box-shadow:0 5px 12px rgba(0,0,0,.22), inset 0 0 0 0 rgba(124,58,237,.0);
}
.friends-results .r input[type="checkbox"]:focus-visible{
  outline:2px solid color-mix(in srgb, var(--neo-primary, #7c3aed) 55%, transparent); outline-offset:2px;
}
.friends-results .r input[type="checkbox"]::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:12px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg) scale(.7);
  opacity:0; transition:opacity .12s ease, transform .12s ease;
}
.friends-results .r input[type="checkbox"]:checked{
  background:linear-gradient(180deg, color-mix(in srgb, var(--neo-primary, #7c3aed) 70%, transparent), rgba(124,58,237,.25));
  border-color: color-mix(in srgb, var(--neo-primary, #7c3aed) 70%, rgba(255,255,255,.22));
  box-shadow:0 6px 14px rgba(0,0,0,.24), inset 0 0 0 2px color-mix(in srgb, var(--neo-primary, #7c3aed) 35%, transparent);
}
.friends-results .r input[type="checkbox"]:checked::after{
  opacity:1; transform:rotate(45deg) scale(1);
}
html[data-mode="light"] .friends-results .r input[type="checkbox"]{
  border-color:#e5e7eb; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.06), inset 0 0 0 0 rgba(124,58,237,.0);
}
html[data-mode="light"] .friends-results .r input[type="checkbox"]:hover{ border-color: color-mix(in srgb, var(--neo-primary, #7c3aed) 35%, #e5e7eb) }
/* ===== Barra de acciones del perfil: botones decorados y coherentes ===== */
.character-profile .meta-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0}
.character-profile .meta-head .name{flex:1 1 auto;min-width:0;max-width:100%}
.character-profile .meta-head .actions{flex-shrink:0}
.character-profile .actions-grid{display:flex;flex-wrap:wrap;align-items:center;gap:12px;position:relative;z-index:13010}
/* Chat en perfil: botón que despliega menú (nuevo + recientes) */
.character-profile .profile-chat-nsfw-notice{
  margin:10px 0 0;
  max-width:min(520px,100%);
}
.character-profile .profile-chat-nsfw-notice .api-nsfw-notice{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(251,191,36,.35);
  background:rgba(251,191,36,.08);
  font-size:13px;
  line-height:1.5;
}
.character-profile .profile-chat-nsfw-notice .api-nsfw-notice-title{margin:0 0 6px;font-weight:600;font-size:13px}
.character-profile .profile-chat-nsfw-notice .api-nsfw-notice-text{margin:0;opacity:.92}
/* Aviso de personaje con menores: contenido estrictamente SFW */
.character-profile .profile-chat-minors-notice{
  margin:10px 0 0;
  max-width:min(520px,100%);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(253,224,71,.4);
  background:rgba(253,224,71,.08);
  font-size:13px;
  line-height:1.5;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}
.character-profile .profile-chat-dd{position:relative;display:inline-flex;vertical-align:middle;z-index:13020}
.character-profile .profile-chat-dd-btn{
  height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:700;border-radius:12px;
  box-shadow:0 4px 14px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.character-profile .profile-chat-dd-menu{
  position:absolute;left:0;top:calc(100% + 8px);min-width:min(320px,92vw);max-width:92vw;padding:8px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:var(--neo-surface, rgba(14,21,48,.98));box-shadow:var(--neo-shadow, 0 18px 40px rgba(0,0,0,.5));
  display:flex;flex-direction:column;gap:2px;
}
.character-profile .profile-dd-subhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.65;padding:.35rem .6rem .1rem}
.character-profile .profile-dd-item{display:flex;align-items:center;padding:10px 12px;border-radius:10px;color:var(--neo-text);text-decoration:none;font-size:.9rem}
.character-profile .profile-dd-item:hover{background:rgba(255,255,255,.06)}
.character-profile .profile-dd-recent{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:0}
html[data-mode="light"] .character-profile .profile-chat-dd-menu{background:#fff;border-color:#e5e7eb;color:#0b0f19}
html[data-mode="light"] .character-profile .profile-dd-item:hover{background:#f3f4f6}
/* Todos los botones: altura 42px, radio 12px, transiciones */
.character-profile .actions-grid .ag-like{order:1;height:42px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:12px}
.character-profile .actions-grid .ag-chat{order:2;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;font-size:14px;font-weight:700;border-radius:12px;border:1px solid transparent;background:linear-gradient(135deg, var(--color-primary, #7c3aed), #6d28d9);color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.2);transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;text-decoration:none}
.character-profile .actions-grid .ag-chat:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.25);filter:brightness(1.05)}
.character-profile .actions-grid .ag-chat:active{transform:translateY(0);box-shadow:0 2px 10px rgba(124,58,237,.35)}
.character-profile .actions-grid .ag-chat:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(124,58,237,.5)}
.character-profile .actions-grid .ag-follow{order:3;height:42px;padding:0 18px;border-radius:12px}
.character-profile .actions-grid .ag-follow:focus-visible,.character-profile .actions-grid .ag-like:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(124,58,237,.4)}
html[data-mode="light"] .character-profile .actions-grid .ag-chat{background:linear-gradient(135deg, #7c3aed, #6d28d9);box-shadow:0 4px 14px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
html[data-mode="light"] .character-profile .actions-grid .ag-chat:hover{box-shadow:0 6px 20px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.3)}
@media (max-width: 720px){ .character-profile .meta-head{flex-direction:column;align-items:flex-start} .character-profile .actions-grid{width:100%;gap:10px} .character-profile .actions-grid .ag-chat{padding:0 16px;font-size:13px} }
/* Grid genérico solo cuando NO es el content-grid del perfil de personaje */
.content-grid:not(.character-profile__content-grid){display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
  /* Galería */
  .gal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
  .gallery .gal-title{display:flex;align-items:center;gap:10px;margin:0}
  .gal-tools .file-btn{display:inline-flex;align-items:center;gap:8px}
  .gallery .card-body{position:relative}
  /* Galería: 3 visibles con scroll horizontal (hasta 5 máx) */
  .gallery .gal-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 20px)/3);
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  /* Scrollbar decorada */
  .gallery .gal-grid::-webkit-scrollbar{height:10px}
  .gallery .gal-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
  .gallery .gal-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg, rgba(124,58,237,.6), rgba(34,211,238,.6));border-radius:999px;border:1px solid rgba(255,255,255,.2)}
  html[data-mode="light"] .gallery .gal-grid::-webkit-scrollbar-track{background:#f3f4f6}
  html[data-mode="light"] .gallery .gal-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg, rgba(124,58,237,.75), rgba(34,211,238,.75));border-color:#e5e7eb}
  /* Nav buttons */
  .gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center}
  .gal-prev{left:6px}
  .gal-next{right:6px}
  html[data-mode="light"] .gal-nav{background:rgba(255,255,255,.9);color:#0b0f19;border-color:#e5e7eb}
  .gallery .gal-item{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
  .gallery .gal-item img{width:100%;height:100%;object-fit:cover;display:block}
  .gallery .gal-item .gal-del{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;z-index:10;pointer-events:auto}
  html[data-mode="light"] .gallery .gal-item .gal-del{background:rgba(255,255,255,.9);color:#0b0f19;border-color:#e5e7eb}
  .gallery .gal-item[data-type="image"]{aspect-ratio:4/3}
  .gallery .gal-item[data-type="video"]{aspect-ratio:16/9}
  .gallery .gal-item .nsfw-overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);gap:10px}
  .gallery .nsfw-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(239,68,68,.6);background:rgba(239,68,68,.15);color:#fff;border-radius:10px;padding:6px 10px}
  .gal-video{width:100%;height:100%;display:block}
  .vid-len{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:2px 8px;font-size:12px}
  html[data-mode="light"] .gallery .gal-item{background:#fff;border-color:#e5e7eb}
  @media (max-width: 980px){ .gallery .gal-grid{ grid-auto-columns:calc((100% - 10px)/2) } }
  @media (max-width: 640px){ .gallery .gal-grid{ grid-auto-columns:100% } }
  /* Zona de arrastrar y soltar galería */
  .gal-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:140px;padding:24px;border:2px dashed rgba(127,127,127,.35);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
  .gal-empty i.fa-cloud-upload-alt{font-size:2rem;opacity:.6}
  .gal-empty .gal-drop-hint{font-size:13px;opacity:.8}
  .gal-empty.gal-dragover{border-color:rgba(124,58,237,.6);background:rgba(124,58,237,.08)}
  .gal-card-body.gal-dragover{box-shadow:inset 0 0 0 2px rgba(124,58,237,.5);border-radius:14px}
  html[data-mode="light"] .gal-empty{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.12)}
  html[data-mode="light"] .gal-card-body.gal-dragover,.gal-empty.gal-dragover{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.06)}
/* Que los comentarios ocupen fila completa (solo cuando .content-grid es grid) */
.content-grid .comments{grid-column:1 / -1}

/* Perfil personaje: content-grid como flex columna ancho completo (gana sobre .content-grid genérico) */
.character-profile .character-profile__content-area{margin-top:24px}
.character-profile .character-profile__content-grid{display:flex !important;flex-direction:column !important;width:100% !important;max-width:100% !important;gap:24px;align-items:stretch;grid-template-columns:unset !important;grid-template-rows:unset !important;min-width:0;box-sizing:border-box}
.character-profile .character-profile__content-grid > *{width:100% !important;max-width:100% !important;min-width:0;box-sizing:border-box}
.character-profile .character-profile__content-grid .card{width:100%;max-width:100%;min-width:0}

.stats .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats .dates-mini{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;display:grid;gap:6px}
/* Historial */
.hist-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.hist-left{display:flex;align-items:center;gap:16px}
.hist-toggle{display:flex;align-items:center;gap:10px}
.hist-version{opacity:.9}
.hist-list{display:grid;gap:8px;margin-top:8px}
.hist-item{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.03)}
.hist-item .ht{font-weight:700}
.hist-item time{opacity:.85;font-size:12px}

/* ===== RESPONSIVE: perfil de personaje — tablets y móviles ===== */

/* Tablet (hasta 980px): banner más bajo, 2 columnas con ancho fijo para no bugear */
@media (max-width: 980px){
  .character-profile .banner{height:220px;border-radius:14px}
  .character-profile .profile-info-card{padding:20px;gap:18px;grid-template-columns:300px 1fr}
  .character-profile .avatar-card{width:300px}
  .character-profile .avatar-wrap{width:280px;height:280px}
  .character-profile .avatar-wrap.portrait{width:280px;height:380px}
  .char-actions-menu{max-width:min(320px, calc(100vw - 24px));max-height:55vh}
}

/* Tablet estrecha / móvil grande (hasta 768px): una columna, avatar centrado, meta-col abajo sin huecos */
@media (max-width: 768px){
  .character-profile .banner{height:200px;border-radius:12px}
  .character-profile .profile-info-card{padding:18px;margin-top:18px;grid-template-columns:1fr;grid-template-rows:auto auto;gap:18px}
  .character-profile .profile-info-card .avatar-card{grid-column:1;grid-row:1;width:100%;max-width:300px;justify-self:center;margin:0 auto}
  .character-profile .profile-info-card .meta-col{grid-column:1;grid-row:2;gap:14px;width:100%;min-width:0}
  .character-profile .avatar-card{width:100%;max-width:300px;padding:10px}
  .character-profile .avatar-wrap{width:100%;max-width:280px;height:280px;margin:0 auto}
  .character-profile .avatar-wrap.portrait{max-width:260px;height:360px}
  .character-profile .avatar{width:100%;height:100%}
  .character-profile .meta .name{font-size:1.35rem}
  .character-profile .character-profile__content-grid .card .card-body,
  .character-profile .content-grid .card .card-body{padding:1.35rem}
  .character-profile .character-profile__content-grid{gap:20px}
  .friends-list{grid-template-columns:1fr;gap:12px}
  .friend-card{grid-template-columns:80px 1fr;gap:12px}
  .friend-card .fc-thumb{width:80px;height:80px}
  .composer-grid{grid-template-columns:1fr !important;gap:16px;min-width:0}
  .cg-right{align-items:stretch;min-width:0}
  .char-actions-menu{max-width:min(300px, calc(100vw - 24px));max-height:50vh}
}

/* Móvil (hasta 720px) */
@media (max-width: 720px){
  .character-profile .banner{height:180px;border-radius:12px}
  .character-profile .profile-info-card{padding:16px;margin-top:16px;gap:16px}
  .character-profile .profile-info-card .avatar-card{max-width:280px}
  .character-profile .avatar-wrap{max-width:240px;height:240px}
  .character-profile .avatar-wrap.portrait{max-width:260px;height:340px}
  .character-profile .meta .name{font-size:1.25rem}
  .character-profile .meta-head{flex-direction:column;align-items:flex-start;gap:10px}
  .character-profile .actions-grid{width:100%;gap:10px}
  .character-profile .actions-grid .ag-chat{padding:0 16px;font-size:13px}
  .character-profile .actions-grid .ag-like,.character-profile .actions-grid .ag-follow,.character-profile .actions-grid .char-actions-trigger{min-height:44px}
  .character-profile .character-profile__content-grid{display:flex !important;flex-direction:column !important;width:100% !important;max-width:100% !important;gap:20px !important;align-items:stretch !important}
  .character-profile .character-profile__content-grid > *{width:100% !important;max-width:100% !important}
  .character-profile .character-profile__content-grid .card .card-body,
  .character-profile .content-grid .card .card-body{padding:1.25rem}
  .character-profile .character-profile__content-grid .card h3,
  .character-profile .content-grid .card h3{font-size:1.0625rem}
  .stats .stats-grid{grid-template-columns:1fr;gap:10px}
  .hist-row{flex-direction:column;align-items:flex-start;gap:10px}
  .hist-left{flex-wrap:wrap}
  .comments-head{flex-wrap:wrap;gap:10px}
  .composer-grid{grid-template-columns:1fr !important;min-width:0}
  .cg-left textarea{min-height:140px;min-width:0}
  .char-actions-menu{max-width:calc(100vw - 24px);max-height:50vh}
}

/* Móvil pequeño (hasta 480px) */
@media (max-width: 480px){
  .character-profile .container{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));box-sizing:border-box}
  .character-profile .banner{height:160px;border-radius:10px}
  .character-profile .profile-info-card{padding:12px;margin-top:14px;gap:14px;border-radius:14px}
  .character-profile .profile-info-card .avatar-card{max-width:100%;padding:8px}
  .character-profile .avatar-wrap{max-width:200px;height:200px}
  .character-profile .avatar-wrap.portrait{max-width:220px;height:300px}
  .character-profile .meta .name{font-size:1.15rem}
  .character-profile .badges{gap:4px}
  .character-profile .meta .tags{gap:6px}
  .badge{font-size:11px;padding:3px 6px}
  .character-profile .actions-grid{flex-wrap:wrap;gap:8px}
  .character-profile .actions-grid .ag-chat{flex:1 1 100%;justify-content:center;min-height:44px}
  .character-profile .actions-grid .ag-like,.character-profile .actions-grid .ag-follow,.character-profile .actions-grid .char-actions-trigger{min-height:44px}
  .character-profile .character-profile__content-grid{width:100%;max-width:100%;gap:16px}
  .character-profile .character-profile__content-grid .card{width:100%;max-width:100%}
  .character-profile .character-profile__content-grid .card .card-body,
  .character-profile .content-grid .card .card-body{padding:1rem}
  .character-profile .character-profile__content-grid .card h3,
  .character-profile .content-grid .card h3{font-size:1rem;margin-bottom:0.75rem}
  .friend-card{grid-template-columns:64px 1fr;gap:10px}
  .friend-card .fc-thumb{width:64px;height:64px}
  .friend-card .fc-name{font-size:0.9375rem}
  .friend-card .fc-desc{font-size:0.8125rem}
  .gal-head{flex-direction:column;align-items:flex-start}
  .desc-header{flex-direction:column;align-items:flex-start}
  .c-item{padding:10px 12px}
  .c-meta{flex-wrap:wrap}
  .composer{padding:14px}
  .cg-left textarea{min-height:120px;padding:12px 14px;min-width:0}
  .char-actions-menu{max-width:calc(100vw - 24px);max-height:45vh}
  .gallery .gal-grid{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
}
.avatar-actions{margin-top:0; display:flex; justify-content:center; align-items:center}
.btn-sm{padding:6px 9px;font-size:12.5px;border-radius:10px}
.avatar-actions .export-btn{width:auto; min-width:120px; display:inline-flex; align-items:center; justify-content:center; gap:6px}
.avatar-actions .export-btn i{opacity:.9}
.avatar-actions:empty{display:none}
.comments .card-body{display:grid;gap:12px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}
.comments .card-body p{ text-align:center }
.comments{scroll-margin-top:70px;min-width:0;overflow:visible}


/* Nuevo layout visual para comentarios (estilo chat-cards con líneas de tiempo) */
.comments-modern{display:grid;gap:18px}
.comments-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px;border-bottom:1px dashed rgba(255,255,255,.12)}
.comments-title{margin:0;display:flex;align-items:center;gap:8px}
.comments-title::before{content:"💬"}
.comments-tools{display:flex;align-items:center;gap:10px}
.count-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);opacity:.9;background:linear-gradient(180deg, rgba(255,255,255,.06), transparent)}
.sort{padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit}
.c-skeleton{display:grid;gap:12px}
.c-sk{height:72px;border-radius:14px;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));background-size:200% 100%;animation:skS 1.2s linear infinite}
@keyframes skS{0%{background-position:200% 0}100%{background-position:-200% 0}}
.c-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.c-list::before{content:"";position:absolute;left:18px;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.1)}
.c-list > li{position:relative;margin-left:0;padding-left:48px}
.c-list > li::before{content:"";position:absolute;left:11px;top:14px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #7c3aed, #4f46e5)}
.c-item{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.c-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;opacity:.9;font-size:12px}
.c-meta .who{display:flex;align-items:center;gap:8px}
.c-meta .who .avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.16)}
.c-body{white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}
.c-actions{display:flex;gap:8px;opacity:.9}
.c-actions .btn-icon{height:32px;display:inline-flex;align-items:center;gap:8px;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);cursor:pointer;color:#fff;padding:0 10px}
.c-actions .btn-icon i{color:currentColor}
html[data-mode="light"] .c-actions .btn-icon{background:#fff;color:#0b0f19;border-color:#e5e7eb}
html[data-mode="light"] .c-actions .btn-icon:hover{background:#f3f4f6}
/* Like decorado */
.c-actions .c-like{position:relative; overflow:hidden}
.c-actions .c-like .heart-wrap{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.c-actions .c-like .c-like-cnt{font-weight:800; min-width:1.2em; text-align:right; opacity:.95}
.c-actions .c-like.liked{border-color:color-mix(in srgb, var(--color-error, #ef4444) 45%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--color-error, #ef4444) 14%, transparent), transparent)}
.c-actions .c-like.liked i{color: var(--color-error, #ef4444)}
/* Hijos */
.c-children{ list-style:none; margin:10px 0 0 0; padding:0 0 0 28px; display:grid; gap:8px; border-left:1px dashed rgba(255,255,255,.12) }
html[data-mode="light"] .c-children{ border-color:#e5e7eb }
/* Caja de respuesta */
.c-reply-box textarea{ width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.16); color:inherit; border-radius:10px; padding:10px }
html[data-mode="light"] .c-reply-box textarea{ background:#fff; border-color:#e5e7eb }
.composer{position:sticky;bottom:0;background:linear-gradient(180deg, rgba(124,58,237,.08), transparent);padding:18px;border-radius:12px;border:1px dashed rgba(124,58,237,.35)}
.composer-grid{display:grid;grid-template-columns:minmax(520px, 1fr) auto;gap:24px;align-items:start}
.cg-left textarea{width:100%;display:block;resize:vertical;min-height:160px;max-height:480px;margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.16);color:var(--neo-text);padding:16px 18px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cg-left textarea:focus{outline:none;border-color:color-mix(in srgb, var(--neo-primary, #7c3aed) 75%, transparent);box-shadow:0 0 0 3px rgba(124,58,237,.25), 0 2px 10px rgba(0,0,0,.18)}
.anon-switch{display:inline-flex;align-items:center;gap:12px;padding:9px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer}
.anon-switch .check{width:48px;height:26px;border-radius:999px;background:rgba(255,255,255,.16);position:relative}
.anon-switch .check::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s ease}
.anon-switch input:checked + .check{background:var(--neo-primary, #7c3aed)}
.anon-switch input:checked + .check::after{transform:translateX(22px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html[data-mode="light"] .c-list::before{border-color:#e5e7eb}
html[data-mode="light"] .c-item{background:linear-gradient(180deg, #fff, #fff);border-color:#e5e7eb}
html[data-mode="light"] .composer{background:linear-gradient(180deg, rgba(124,58,237,.08), rgba(124,58,237,.02));border-color:rgba(124,58,237,.35)}

.comments textarea{width:min(100%, 900px);margin:0 auto;display:block;background:var(--neo-surface-2);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--neo-text);padding:10px 12px}
.comments .mt-2{display:flex;justify-content:center}
.btn.danger{border-color:rgba(239,68,68,.4)}

/* Descripción avanzada */
.desc-card .desc-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.desc-card .desc-actions-row{display:flex;gap:8px}
.desc-card .desc-text{white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.desc-card .desc-text.clamped{--clamp-h: 120px; max-height: var(--clamp-h); overflow:hidden; mask-image:linear-gradient(180deg,#000 78%,transparent); -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent)}
.desc-card .desc-text.expanded{max-height:none; mask-image:none; -webkit-mask-image:none}
.link-btn{background:transparent;border:0;color:var(--neo-text);opacity:.8;cursor:pointer;margin-top:6px}
.link-btn:hover{opacity:1;text-decoration:underline}
/* Nuevo header de descripción */
.desc-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.desc-title{margin:0}
.desc-stats{font-size:12px;opacity:.8}
.desc-actions-row{display:flex;justify-content:center}
/* Lista de comentarios */
.comments-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.comments-list li{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.comments-list .meta{font-size:12px;opacity:.8;margin-bottom:6px;display:flex;justify-content:space-between}
.muted{opacity:.8}
/* Composer de comentarios fijo y decorado */
.composer{position:sticky;bottom:0;background:transparent;padding:18px;border-radius:12px}
.composer-grid{display:grid;grid-template-columns:minmax(520px, 1fr) auto;gap:24px;align-items:start}
.cg-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.cg-left textarea{width:100%;display:block;resize:vertical;min-height:180px;max-height:500px;margin:0;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--neo-text);padding:16px 18px;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:border-color .15s ease, box-shadow .15s ease}
.cg-left textarea:focus{outline:none;border-color:var(--neo-primary, #7c3aed);box-shadow:0 0 0 3px rgba(124,58,237,.25), 0 2px 10px rgba(0,0,0,.18)}
.cg-left textarea::placeholder{color:var(--neo-text);opacity:.6}
.counter-row{display:flex;justify-content:flex-start;padding-top:4px}
.composer .counter{font-size:12px;opacity:.8}
.cg-right{display:flex;flex-direction:column;gap:12px;align-items:flex-end;min-width:220px}

/* Switch de anonimato más espacioso */
.anon-switch{display:inline-flex;align-items:center;gap:12px;padding:9px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;user-select:none;transition:background .15s ease,border-color .15s ease}
.anon-switch:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.anon-switch input{display:none}
.anon-switch .check{width:48px;height:26px;border-radius:999px;background:rgba(255,255,255,.16);position:relative;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.anon-switch .check::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s ease}
.anon-switch input:checked + .check{background:var(--neo-primary, #7c3aed)}
.anon-switch input:checked + .check::after{transform:translateX(22px)}
.anon-switch .label{font-size:13px;opacity:.92}

/* ===== LAYOUT PERFIL PERSONAJE: orden fijo (Descripción → Galería → Estadísticas → Amigos → Comentarios) ===== */
.character-profile{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}
/* Con modifier --grid: layout de 1 columna (banner | perfil | content) */
.character-profile.character-profile--grid{display:grid !important;grid-template-columns:1fr !important;grid-template-rows:auto auto 1fr !important;grid-template-areas:"banner" "profile" "content" !important}
.character-profile > .banner{display:block;width:100%;max-width:100%}
.character-profile > .header{display:grid;grid-template-columns:auto 1fr;gap:18px;margin-top:12px;width:100%}
/* Galería, Estadísticas y Comentarios: ancho completo (grid-area content) */
.character-profile .character-profile__content-area{display:block;width:100%;max-width:100%;margin-top:24px;box-sizing:border-box}
.character-profile .character-profile__content-grid{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  gap:24px !important;
  align-items:stretch !important;
  grid-template-columns:unset !important;
  grid-template-rows:unset !important;
  min-width:0;
  box-sizing:border-box;
}
.character-profile .character-profile__content-grid > *{width:100% !important;max-width:100% !important;min-width:0;box-sizing:border-box;position:relative;flex-shrink:0}
.character-profile .character-profile__content-grid .gallery,
.character-profile .character-profile__content-grid .stats,
.character-profile .character-profile__content-grid .comments{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.character-profile .meta{min-width:0}
.character-profile .meta-head{flex-wrap:wrap;align-items:flex-start;gap:12px}
.character-profile .meta .name{flex:1 1 auto;min-width:0;max-width:100%;font-size:clamp(1.25rem, 4vw, 1.75rem);line-height:1.2}
.character-profile .meta .name small{display:inline}
.character-profile .meta-head .actions{flex-shrink:0}
.character-profile .actions{flex-wrap:wrap;gap:8px;justify-content:flex-end}
.character-profile .actions-grid{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:auto;max-width:100%}
.character-profile .actions-grid .ag-like{order:1}
.character-profile .actions-grid .ag-chat{order:2}
.character-profile .actions-grid .ag-follow{order:3}
.character-profile .actions-grid .char-actions{order:4}
.character-profile .meta .by{margin:2px 0 0;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.08);font-size:0.9375rem;line-height:1.4}
.character-profile .meta .by .profile-creator-link{color:var(--neo-primary,#a78bfa);text-decoration:none;font-weight:600;cursor:pointer}
.character-profile .meta .by .profile-creator-link:hover{text-decoration:underline;color:var(--neo-accent,#22d3ee)}

/* Badge de cuenta suspendida en vista de personaje */
.suspended-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.suspended-badge i {
  font-size: 0.85rem;
}
.friend-creator-link, .comment-author-link, .comment-author-link-wrapper {
    color: var(--neo-primary, #a78bfa);
    text-decoration: none;
    font-weight: 600;
}
.friend-creator-link:hover, .comment-author-link:hover, .comment-author-link-wrapper:hover .name {
    text-decoration: underline;
    color: var(--neo-accent, #22d3ee);
}
.comment-author-link-wrapper {
    display: contents;
    cursor: pointer;
}
html[data-mode="light"] .character-profile .meta .by .profile-creator-link{color:var(--neo-primary,#7c3aed)}
html[data-mode="light"] .character-profile .meta .by .profile-creator-link:hover{color:var(--neo-accent,#0d9488)}
.character-profile .meta .badges{margin:0}
.character-profile .meta .tags{margin:4px 0 0}
/* Descripción debajo de las etiquetas (tags), misma columna que nombre/badges/tags; misma distribución */
.character-profile .profile-info-card .profile-desc{margin:0;margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);width:100%;min-width:0;flex-shrink:0;position:relative;z-index:1}
.character-profile .profile-info-card .profile-desc .card-body{padding:0}
.character-profile .profile-info-card .profile-desc .desc-title{margin:0 0 0.5rem 0;font-size:1.0625rem}
.character-profile .profile-info-card .profile-desc .desc-text{font-size:0.9375rem;line-height:1.55}
html[data-mode="light"] .character-profile .profile-info-card .profile-desc{border-top-color:rgba(0,0,0,.08)}
/* Amigos a la derecha de la foto, debajo de descripción (no se mueve) */
.character-profile .profile-info-card .profile-friends{margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);width:100%;min-width:0;flex-shrink:0;position:relative;z-index:1}
.character-profile .profile-info-card .profile-friends .card-body{padding:0.75rem 0 0}
.character-profile .profile-info-card .profile-friends .friends-title{margin:0 0 0.5rem 0;font-size:1.0625rem}
html[data-mode="light"] .character-profile .profile-info-card .profile-friends{border-top-color:rgba(0,0,0,.08)}

/* Content-grid perfil: una columna ancho completo, orden Galería → Estadísticas → Comentarios */
.character-profile .character-profile__content-grid{display:flex;flex-direction:column;gap:24px;align-items:stretch;width:100%;max-width:100%}
.character-profile .character-profile__content-grid .gallery{order:1;width:100%;max-width:100%}
.character-profile .character-profile__content-grid .stats{order:2;width:100%;max-width:100%}
.character-profile .character-profile__content-grid .comments{order:3;width:100%;max-width:100%}
/* Tarjetas de sección: ancho completo (también cuando content-grid está fuera de .character-profile) */
.character-profile__content-grid .card,
.character-profile .character-profile__content-grid .card,
.character-profile .content-grid .card{
  width:100%;
  max-width:100%;
  min-width:0;
  background:var(--neo-surface, rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:var(--neo-shadow, 0 6px 24px rgba(0,0,0,.18));
  overflow:hidden;
  box-sizing:border-box;
}
.character-profile__content-grid .card .card-body,
.character-profile .character-profile__content-grid .card .card-body,
.character-profile .content-grid .card .card-body{
  padding:1.5rem 1.5rem;
  width:100%;
  box-sizing:border-box;
}
.character-profile__content-grid .card h3,
.character-profile .character-profile__content-grid .card h3,
.character-profile .content-grid .card h3{
  margin:0 0 1rem 0;
  font-size:1.125rem;
  font-weight:700;
  color:var(--neo-text, #fff);
  padding-bottom:0.75rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-mode="light"] .character-profile__content-grid .card,
html[data-mode="light"] .character-profile .character-profile__content-grid .card,
html[data-mode="light"] .character-profile .content-grid .card{
  background:#fff;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
html[data-mode="light"] .character-profile__content-grid .card h3,
html[data-mode="light"] .character-profile .character-profile__content-grid .card h3,
html[data-mode="light"] .character-profile .content-grid .card h3{
  border-bottom-color:rgba(0,0,0,.08);
  color:var(--color-text-primary, #0b0f19);
}

.gal-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gal-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.character-profile__content-grid .gallery .gal-title,
.character-profile .character-profile__content-grid .gallery .gal-title,
.character-profile .content-grid .gallery .gal-title{margin:0 0 0.75rem 0;padding-bottom:0.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.desc-card .card-body{display:flex;flex-direction:column;align-items:stretch;min-height:auto}
.desc-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.character-profile .character-profile__content-grid .desc-card .desc-title,
.character-profile .content-grid .desc-card .desc-title{margin:0 0 0.75rem 0;padding-bottom:0.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.desc-stats{font-size:11px;opacity:.75;white-space:nowrap}
.friends-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.friends-tools{flex-shrink:0}
.character-profile .character-profile__content-grid .friends-wrap .friends-title,
.character-profile .content-grid .friends-wrap .friends-title{margin:0 0 0.75rem 0;padding-bottom:0.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.character-profile .content-grid .friends-wrap.card{margin-top:0;padding:0}
.character-profile .content-grid .friends-wrap.card .card-body{padding:1.5rem 1.5rem}
.character-profile .character-profile__content-grid .comments .comments-head,
.character-profile .content-grid .comments .comments-head{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:0.75rem;margin-bottom:0}
.character-profile .content-grid .comments .comments-title{margin:0}
html[data-mode="light"] .character-profile .character-profile__content-grid .gallery .gal-title,
html[data-mode="light"] .character-profile .content-grid .gallery .gal-title,
html[data-mode="light"] .character-profile .content-grid .desc-card .desc-title,
html[data-mode="light"] .character-profile .content-grid .friends-wrap .friends-title{border-bottom-color:rgba(0,0,0,.08)}
.character-profile__content-grid .stats h3,
.character-profile .character-profile__content-grid .stats h3,
.character-profile .content-grid .stats h3{margin:0 0 1rem 0}
@media (max-width: 720px){
  .character-profile .meta-head{flex-direction:column;align-items:stretch}
  .character-profile .actions{justify-content:flex-start}
  .character-profile .actions-grid{justify-content:flex-start}
}

/* Lightbox centrado para imágenes */
.img-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:12000 }
.img-lightbox:not(.show){
  visibility:hidden;
  pointer-events:none !important;
}
.img-lightbox.show{ display:flex; visibility:visible }
.img-lightbox-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.88); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1) }
.img-lightbox-content{ position:relative; z-index:1; max-width: min(92vw, 1400px); max-height: 92vh; display:grid; align-items:center; justify-items:center }
.img-viewport{ position:relative; width:100%; height:100%; max-height:92vh; max-width:100%; overflow:hidden; cursor: grab }
.img-viewport:active{ cursor: grabbing }
.img-viewport img{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center; user-select:none; pointer-events:none; will-change: transform; width:auto; height:auto; max-width:none; max-height:none; image-rendering:auto }
.img-lightbox-close{ position:absolute; top:-12px; right:-12px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.12); color:#fff; cursor:pointer }
html[data-mode="light"] .img-lightbox-close{ color:#0b0f19 }
.img-ctrls{ position:absolute; bottom:-56px; left:50%; transform: translateX(-50%); display:flex; gap:8px }
.img-btn{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.12); color:#fff; cursor:pointer }

/* Estilos para botones de seguir y guardar */
.follow-pill.following {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.55);
    color: #86efac;
    box-shadow:0 2px 10px rgba(34, 197, 94, 0.2);
}
.follow-pill.following:hover {
    background: rgba(34, 197, 94, 0.28);
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow:0 4px 14px rgba(34, 197, 94, 0.3);
}

.action-tile.saved {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.action-tile.saved:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.7);
}

/* Modal confirmación eliminar personaje */
.char-delete-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 13000;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Fuera de .actions: por encima de badges/tags y del menú Acciones */
.char-delete-modal.char-delete-modal--root {
  z-index: 250000;
}
.char-delete-modal--staff-api .char-delete-modal-content--wide {
  max-width: min(560px, calc(100vw - 20px));
}
.char-delete-modal--staff-api #staffApiCurlPre {
  max-height: min(140px, 28vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Mismo criterio que el configurador: pestaña API (segmentos) */
.char-delete-modal--staff-api .staff-api-source-mode.segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.char-delete-modal--staff-api .staff-api-source-mode .segment {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 10px;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.28);
  background: rgba(15, 18, 28, 0.35);
  flex: 1 1 220px;
  box-sizing: border-box;
}
.char-delete-modal--staff-api .staff-api-source-mode .segment.active {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}
.char-delete-modal--staff-api .staff-api-source-mode .segment input[type="radio"] {
  margin-top: 4px;
}
.char-delete-modal--staff-api .staff-api-source-mode .seg-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
}
.char-delete-modal--staff-api .staff-api-source-mode .seg-desc {
  font-size: 0.85em;
}
.char-delete-modal--staff-api .char-delete-modal-lead {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--neo-muted, #94a3b8);
}
.char-delete-modal--staff-api .char-delete-modal-field {
  margin-top: 0.75rem;
}
.char-delete-modal--staff-api .char-delete-modal-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--neo-text, #e6e9f2);
}
.char-delete-modal--staff-api .char-delete-modal-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--neo-text, #e6e9f2);
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid rgba(127, 127, 127, 0.28);
}
.char-delete-modal--staff-api .char-delete-modal-input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}
.char-delete-modal--staff-api .char-delete-modal-actions--row {
  margin-top: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#imgLightbox.img-lightbox {
  z-index: 250000;
}
.char-delete-modal[hidden] {
  display: none !important;
}
.char-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.char-delete-modal-content {
  position: relative;
  z-index: 1;
  background: var(--neo-surface, #1e1e2e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  width: 100%;
  max-width: min(400px, calc(100vw - 20px));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  margin: 0 auto;
  flex-shrink: 0;
}
.char-delete-modal-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--neo-text, #f1f5f9);
}
.char-delete-modal-text {
  margin: 0 0 1.25rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--neo-muted, #94a3b8);
}
.char-delete-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.char-delete-modal-actions .btn-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
}
.char-delete-modal-actions .btn-danger:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #fff;
}