/*
 * INSANOS — SISTEMA DE TEMAS
 * Esta hoja es la única capa autorizada para colorear componentes de producto.
 * main.css conserva estructura y responsive; aquí viven dos diseños completos.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --insanos-canvas: #f5f4ef;
  --insanos-canvas-alt: #eceae3;
  --insanos-panel: #ffffff;
  --insanos-panel-raised: #ffffff;
  --insanos-panel-soft: #f8f7f3;
  --insanos-panel-hover: #f0f3fb;
  --insanos-nav: rgba(255, 255, 255, .96);
  --insanos-nav-solid: #ffffff;
  --insanos-ink: #181916;
  --insanos-ink-soft: #41433e;
  --insanos-muted: #6c6e67;
  --insanos-faint: #8a8c84;
  --insanos-line: #dcded7;
  --insanos-line-strong: #c8cbc2;
  --insanos-field: #ffffff;
  --insanos-field-ink: #22231f;
  --insanos-field-placeholder: #73766e;
  --insanos-accent: #2457d6;
  --insanos-accent-hover: #1743b4;
  --insanos-accent-soft: #eaf0ff;
  --insanos-accent-ink: #173b96;
  --insanos-on-accent: #ffffff;
  --insanos-positive: #267451;
  --insanos-positive-soft: #e8f4ed;
  --insanos-warning: #80601b;
  --insanos-warning-soft: #fff7df;
  --insanos-danger: #ae2730;
  --insanos-danger-soft: #fff0f0;
  --insanos-on-danger: #ffffff;
  --insanos-overlay: rgba(22, 23, 20, .58);
  --insanos-shadow: 0 20px 60px rgba(32, 35, 28, .11);
  --insanos-shadow-raised: 0 30px 100px rgba(20, 22, 18, .20);
  --insanos-hero-bg: #ffffff;
  --insanos-hero-ink: #181916;
  --insanos-reader-stage: #0c0d0f;
  --insanos-reader-chrome: rgba(25, 26, 28, .94);
  --insanos-reader-ink: #f4f5f2;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --insanos-canvas: #0b0e13;
  --insanos-canvas-alt: #111620;
  --insanos-panel: #141a24;
  --insanos-panel-raised: #19212d;
  --insanos-panel-soft: #101620;
  --insanos-panel-hover: #202b3a;
  --insanos-nav: rgba(13, 18, 26, .94);
  --insanos-nav-solid: #0d121a;
  --insanos-ink: #f1f5fb;
  --insanos-ink-soft: #c6cfdd;
  --insanos-muted: #99a6b8;
  --insanos-faint: #738196;
  --insanos-line: #293545;
  --insanos-line-strong: #3a4a5f;
  --insanos-field: #101721;
  --insanos-field-ink: #f1f5fb;
  --insanos-field-placeholder: #8491a4;
  --insanos-accent: #8da8ff;
  --insanos-accent-hover: #adc0ff;
  --insanos-accent-soft: #1d2b51;
  --insanos-accent-ink: #c8d5ff;
  --insanos-on-accent: #09101b;
  --insanos-positive: #70d7a3;
  --insanos-positive-soft: #143426;
  --insanos-warning: #f0cd77;
  --insanos-warning-soft: #352c17;
  --insanos-danger: #ff9292;
  --insanos-danger-soft: #3b1d22;
  --insanos-on-danger: #25070b;
  --insanos-overlay: rgba(1, 4, 9, .78);
  --insanos-shadow: 0 22px 70px rgba(0, 0, 0, .34);
  --insanos-shadow-raised: 0 34px 120px rgba(0, 0, 0, .58);
  --insanos-hero-bg: #0e1520;
  --insanos-hero-ink: #f4f7fc;
  --insanos-reader-stage: #05070a;
  --insanos-reader-chrome: rgba(13, 18, 26, .94);
  --insanos-reader-ink: #f4f7fc;
}

/* ============================================================
   CONTRATO CANÓNICO DE TOKENS
   ============================================================
   DESIGN.md define los valores; esta capa ofrece nombres semánticos y
   mantiene los alias históricos mientras los componentes se consolidan. */
:root {
  --insanos-sans: Inter, "Segoe UI", system-ui, sans-serif;
  --insanos-serif: Georgia, "Times New Roman", serif;
  --insanos-display: var(--insanos-sans);
  --insanos-radius-xs: 4px;
  --insanos-radius-sm: 8px;
  --insanos-radius-md: 12px;
  --insanos-radius-lg: 18px;
  --insanos-radius-pill: 999px;
  --insanos-space-1: 4px;
  --insanos-space-2: 8px;
  --insanos-space-3: 12px;
  --insanos-space-4: 16px;
  --insanos-space-5: 24px;
  --insanos-space-6: 32px;
  --insanos-space-7: 48px;
  --insanos-space-8: 64px;
  --insanos-elevated: var(--insanos-panel-raised);
  --insanos-surface: var(--insanos-panel);
  --insanos-success: var(--insanos-positive);
  --insanos-shadow-soft: var(--insanos-shadow);
  --insanos-text-muted: var(--insanos-muted);
  --reader-dim: 0;
  --upload-progress: 0%;

  /* Alias temporales de main.css: todos apuntan al sistema INSANOS. */
  --bg: var(--insanos-canvas);
  --surface: var(--insanos-panel);
  --surface2: var(--insanos-panel-soft);
  --border: var(--insanos-line);
  --accent: var(--insanos-accent);
  --accent-h: var(--insanos-accent-hover);
  --danger: var(--insanos-danger);
  --success: var(--insanos-positive);
  --text: var(--insanos-ink);
  --text-muted: var(--insanos-muted);
  --radius: var(--insanos-radius-sm);
  --ink: var(--insanos-ink);
  --paper: var(--insanos-canvas);
  --paper-strong: var(--insanos-panel);
  --line: var(--insanos-line);
  --accent-dark: var(--insanos-accent);
  --shadow-soft: var(--insanos-shadow);
  --workspace-bg: var(--insanos-canvas);
  --workspace-surface: var(--insanos-panel);
  --workspace-ink: var(--insanos-ink);
  --workspace-muted: var(--insanos-muted);
  --workspace-line: var(--insanos-line);
  --workspace-accent: var(--insanos-accent);
  --studio-bg: var(--insanos-canvas);
  --studio-panel: var(--insanos-panel);
  --studio-nav: var(--insanos-nav-solid);
  --studio-muted: var(--insanos-muted);
  --studio-purple: var(--insanos-accent);
  --reader-bg: var(--insanos-canvas);
  --reader-paper: var(--insanos-canvas);
  --reader-white: var(--insanos-panel);
  --reader-ink: var(--insanos-ink);
  --reader-muted: var(--insanos-muted);
  --reader-line: var(--insanos-line);
  --reader-purple: var(--insanos-accent);
  --reader-blue: var(--insanos-accent);
}

/* ============================================================
   IDENTIDAD INSANOS
   ============================================================ */

.brand-mark,
.wordmark-icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: visible;
  isolation: isolate;
}

.brand-mark img,
.wordmark-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--insanos-accent) 32%, transparent));
  transition: filter .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.brand-mark::after,
.wordmark-icon::after {
  position: absolute;
  z-index: -1;
  inset: 16%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--insanos-accent) 40%, #8b5cf6);
  filter: blur(11px);
  opacity: .28;
  content: "";
  transition: opacity .35s ease, transform .45s ease;
}

.insanos-brand-name {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  color: var(--insanos-ink);
  font-family: var(--insanos-sans);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1;
  text-shadow: 0 0 0 transparent;
}

.insanos-brand-name > span {
  color: transparent;
  background: linear-gradient(105deg, var(--insanos-ink) 8%, var(--insanos-accent) 48%, #8b5cf6 72%, var(--insanos-ink) 96%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter .35s ease, letter-spacing .35s ease;
}

.insanos-brand-name b,
.insanos-brand-name strong {
  color: var(--insanos-accent);
  font-size: .72em;
  font-weight: 760;
  letter-spacing: -.02em;
}

.auth-brand:hover .brand-mark img,
.admin-brand:hover .brand-mark img,
.insanos-wordmark:hover .wordmark-icon img {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--insanos-accent) 70%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, #8b5cf6 42%, transparent));
  transform: translateY(-1px) rotate(-3deg) scale(1.07);
}

.auth-brand:hover .brand-mark::after,
.admin-brand:hover .brand-mark::after,
.insanos-wordmark:hover .wordmark-icon::after {
  opacity: .65;
  transform: scale(1.22);
}

.auth-brand:hover .insanos-brand-name > span,
.admin-brand:hover .insanos-brand-name > span,
.insanos-wordmark:hover .insanos-brand-name > span {
  animation: insanos-wordmark-shine 1.15s cubic-bezier(.2,.8,.2,1) both;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--insanos-accent) 38%, transparent));
  letter-spacing: -.025em;
}

.auth-brand .brand-mark { width: 46px; height: 46px; padding: 0; background: transparent !important; box-shadow: none !important; }
.admin-brand .brand-mark { width: 38px; height: 38px; padding: 0; background: transparent !important; box-shadow: none !important; }
.insanos-wordmark .wordmark-icon { width: 36px; height: 36px; padding: 0; color: inherit; background: transparent !important; box-shadow: none !important; }

@keyframes insanos-wordmark-shine {
  0% { background-position: 0% 50%; }
  55% { background-position: 100% 50%; }
  100% { background-position: 72% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark img,
  .wordmark-icon img,
  .insanos-brand-name > span { animation: none !important; transition-duration: .01ms !important; }
}

/* Studio usa los mismos tokens semánticos en todas sus superficies. Estas
   reglas viven después de main.css para neutralizar colores históricos fijos. */
:root[data-theme="dark"] .admin-page {
  --workspace-bg: var(--insanos-canvas);
  --workspace-surface: var(--insanos-panel);
  --workspace-ink: var(--insanos-ink);
  --workspace-muted: var(--insanos-muted);
  --workspace-line: var(--insanos-line);
  --workspace-accent: var(--insanos-accent);
  background: var(--insanos-canvas) !important;
  color: var(--insanos-ink) !important;
}

:root[data-theme="dark"] .admin-page .admin-sidebar {
  border-color: var(--insanos-line) !important;
  background: var(--insanos-nav) !important;
}
:root[data-theme="dark"] .admin-page .admin-brand,
:root[data-theme="dark"] .admin-page .admin-brand b,
:root[data-theme="dark"] .admin-page .admin-identity strong,
:root[data-theme="dark"] .admin-page #admin-nav button:hover,
:root[data-theme="dark"] .admin-page #admin-nav button.active {
  color: var(--insanos-ink) !important;
}
:root[data-theme="dark"] .admin-page .admin-identity span,
:root[data-theme="dark"] .admin-page #admin-nav button,
:root[data-theme="dark"] .admin-page #admin-nav button span,
:root[data-theme="dark"] .admin-page .section-actions p,
:root[data-theme="dark"] .admin-page .text-muted {
  color: var(--insanos-muted) !important;
}
:root[data-theme="dark"] .admin-page .sidebar-footer a,
:root[data-theme="dark"] .admin-page .sidebar-footer button,
:root[data-theme="dark"] .admin-page .command-button,
:root[data-theme="dark"] .admin-page .command-button kbd {
  border-color: var(--insanos-line) !important;
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel) !important;
}
:root[data-theme="dark"] .admin-page .admin-topbar {
  border-color: var(--insanos-line) !important;
  background: transparent !important;
}
:root[data-theme="dark"] .admin-page .admin-topbar h1,
:root[data-theme="dark"] .admin-page .panel-card h2,
:root[data-theme="dark"] .admin-page .content-copy h2 {
  color: var(--insanos-ink) !important;
}
:root[data-theme="dark"] .admin-page .admin-topbar .eyebrow {
  color: var(--insanos-accent) !important;
}
:root[data-theme="dark"] .admin-page .status-dot {
  color: var(--insanos-positive) !important;
}
:root[data-theme="dark"] .admin-page .status-dot i {
  background: var(--insanos-positive) !important;
  box-shadow: 0 0 0 4px var(--insanos-positive-soft) !important;
}

:root[data-theme="dark"] .admin-page .stat-card,
:root[data-theme="dark"] .admin-page .panel-card,
:root[data-theme="dark"] .admin-page .content-card,
:root[data-theme="dark"] .admin-page .empty-panel,
:root[data-theme="dark"] .admin-page .table-wrapper,
:root[data-theme="dark"] .admin-page .moderation-card,
:root[data-theme="dark"] .admin-page .chapter-admin-row,
:root[data-theme="dark"] .admin-page .trash-card,
:root[data-theme="dark"] .admin-page .feedback-ticket {
  border-color: var(--insanos-line) !important;
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel) !important;
}
:root[data-theme="dark"] .admin-page .stat-card strong,
:root[data-theme="dark"] .admin-page .content-card strong,
:root[data-theme="dark"] .admin-page .moderation-card strong {
  color: var(--insanos-ink) !important;
}
:root[data-theme="dark"] .admin-page .stat-card span,
:root[data-theme="dark"] .admin-page .stat-card small,
:root[data-theme="dark"] .admin-page .content-card p,
:root[data-theme="dark"] .admin-page .chapter-admin-row span,
:root[data-theme="dark"] .admin-page .chapter-admin-row small,
:root[data-theme="dark"] .admin-page .moderation-card span {
  color: var(--insanos-muted) !important;
}

:root[data-theme="dark"] .admin-page .admin-table {
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel) !important;
}
:root[data-theme="dark"] .admin-page .admin-table thead,
:root[data-theme="dark"] .admin-page .admin-table th {
  border-color: var(--insanos-line) !important;
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel-soft) !important;
}
:root[data-theme="dark"] .admin-page .admin-table tbody,
:root[data-theme="dark"] .admin-page .admin-table tr,
:root[data-theme="dark"] .admin-page .admin-table td {
  border-color: var(--insanos-line) !important;
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel) !important;
}
:root[data-theme="dark"] .admin-page .admin-table tr:hover td {
  background: var(--insanos-panel-hover) !important;
}
:root[data-theme="dark"] .admin-page .admin-table td strong {
  color: var(--insanos-ink) !important;
}
:root[data-theme="dark"] .admin-page .admin-table td small {
  color: var(--insanos-muted) !important;
}
:root[data-theme="dark"] .admin-page .admin-table button,
:root[data-theme="dark"] .admin-page .content-actions button,
:root[data-theme="dark"] .admin-page .chapter-admin-row button,
:root[data-theme="dark"] .admin-page .moderation-card button {
  border-color: var(--insanos-line-strong) !important;
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel-raised) !important;
}

:root[data-theme="dark"] .admin-page .app-dialog[open],
:root[data-theme="dark"] .admin-page .feedback-dialog {
  border-color: var(--insanos-line) !important;
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel-raised) !important;
  box-shadow: var(--insanos-shadow-raised) !important;
}
:root[data-theme="dark"] .admin-page .dialog-heading,
:root[data-theme="dark"] .admin-page .modal-actions {
  border-color: var(--insanos-line) !important;
  background: var(--insanos-panel-raised) !important;
}
:root[data-theme="dark"] .admin-page input,
:root[data-theme="dark"] .admin-page select,
:root[data-theme="dark"] .admin-page textarea {
  border-color: var(--insanos-line-strong) !important;
  color: var(--insanos-field-ink) !important;
  background: var(--insanos-field) !important;
}
:root[data-theme="dark"] .admin-page input::placeholder,
:root[data-theme="dark"] .admin-page textarea::placeholder {
  color: var(--insanos-field-placeholder) !important;
}

html { background: var(--insanos-canvas); }
body,
body.catalog-page,
body.admin-page,
.reader-catalog {
  color: var(--insanos-ink) !important;
  background: var(--insanos-canvas) !important;
}
body, button, input, select, textarea { color-scheme: inherit; }
a { color: var(--insanos-accent); }
.text-muted,
.section-actions p,
.library-heading p,
.content-copy p,
.content-card small,
.chapter-admin-row small,
.chapter-admin-row span,
.card-meta,
.comment time,
.comment p,
.empty-panel,
.feedback-dialog form > p { color: var(--insanos-muted) !important; }

/* Control de tema: parte del producto, no burbuja añadida. */
.theme-toggle {
  right: 20px !important;
  bottom: 20px !important;
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel-raised) !important;
  border-color: var(--insanos-line-strong) !important;
  box-shadow: var(--insanos-shadow) !important;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover { color: var(--insanos-accent) !important; border-color: var(--insanos-accent) !important; transform: translateY(-2px); }

/* En el lector inmersivo el pie ya ocupa todo el borde inferior. El control
   de tema queda en su propio carril, encima de la navegación de capítulos. */
.chapter-reader .theme-toggle {
  right: 24px !important;
  bottom: 78px !important;
}

/* Formularios globales */
input, select, textarea,
.app-dialog input, .app-dialog select, .app-dialog textarea,
.feedback-dialog input, .feedback-dialog select, .feedback-dialog textarea {
  color: var(--insanos-field-ink) !important;
  background: var(--insanos-field) !important;
  border-color: var(--insanos-line-strong) !important;
}
input::placeholder, textarea::placeholder { color: var(--insanos-field-placeholder) !important; opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--insanos-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--insanos-accent) 18%, transparent) !important;
  outline: 0;
}
label { color: var(--insanos-ink-soft) !important; }
label small { color: var(--insanos-muted) !important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--insanos-accent) 42%, transparent);
  outline-offset: 3px;
}

/* Botones y estados */
.btn-primary, .reader-primary-action, .feedback-review button {
  color: var(--insanos-on-accent) !important;
  background: var(--insanos-accent) !important;
  border-color: var(--insanos-accent) !important;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .reader-primary-action,
:root[data-theme="dark"] .feedback-review button { color: var(--insanos-on-accent) !important; }
.btn-primary:hover, .reader-primary-action:hover { background: var(--insanos-accent-hover) !important; }
html[data-theme] .admin-page .btn-primary {
  color: var(--insanos-on-accent) !important;
  background: var(--insanos-accent) !important;
  border-color: var(--insanos-accent) !important;
}
html[data-theme="dark"] .admin-page .btn-primary { color: var(--insanos-on-accent) !important; }
html[data-theme] .admin-page .btn-primary:hover { background: var(--insanos-accent-hover) !important; }
.btn-secondary, .feedback-actions > button,
.content-actions button, .chapter-admin-row button, .admin-table button, .moderation-card button {
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel) !important;
  border-color: var(--insanos-line-strong) !important;
}
.btn-secondary:hover,
.content-actions button:hover, .chapter-admin-row button:hover, .admin-table button:hover {
  color: var(--insanos-accent) !important;
  border-color: var(--insanos-accent) !important;
  background: var(--insanos-accent-soft) !important;
}
.danger-link { color: var(--insanos-danger) !important; }
.badge-active { color: var(--insanos-positive) !important; background: var(--insanos-positive-soft) !important; }
.badge-off { color: var(--insanos-muted) !important; background: var(--insanos-panel-soft) !important; }
.form-error { color: var(--insanos-danger) !important; background: var(--insanos-danger-soft) !important; border-color: color-mix(in srgb,var(--insanos-danger) 40%,transparent) !important; }
.form-success, .feedback-result { color: var(--insanos-positive) !important; background: var(--insanos-positive-soft) !important; }

/* Studio */
.admin-page {
  --studio-bg: var(--insanos-canvas);
  --studio-panel: var(--insanos-panel);
  --studio-muted: var(--insanos-muted);
}
.admin-page .admin-sidebar {
  color: var(--insanos-ink) !important;
  background: var(--insanos-nav) !important;
  border-color: var(--insanos-line) !important;
  box-shadow: 0 8px 30px color-mix(in srgb,var(--insanos-overlay) 22%,transparent) !important;
}
.admin-brand, .admin-brand:hover,
.admin-identity strong { color: var(--insanos-ink) !important; }
.admin-brand b { color: var(--insanos-accent) !important; }
.admin-identity span, .nav-group-label { color: var(--insanos-faint) !important; }
#admin-nav button,
.sidebar-footer a, .sidebar-footer button,
.command-button { color: var(--insanos-muted) !important; }
#admin-nav button span { color: var(--insanos-faint) !important; }
#admin-nav button:hover,
#admin-nav button.active,
.sidebar-footer a:hover, .sidebar-footer button:hover,
.command-button:hover { color: var(--insanos-ink) !important; }
#admin-nav button.active {
  background: transparent !important;
  box-shadow: inset 0 -2px var(--insanos-accent) !important;
}
.admin-page .admin-main { color: var(--insanos-ink) !important; background: var(--insanos-canvas) !important; }
.admin-topbar { border-color: var(--insanos-line) !important; }
.admin-topbar .eyebrow, .eyebrow { color: var(--insanos-accent) !important; }
.admin-topbar h1, .section-actions h2, .panel-card h2, .content-copy h2,
.dialog-heading h2, .stat-card strong { color: var(--insanos-ink) !important; }
.status-dot { color: var(--insanos-positive) !important; }
.status-dot i { background: var(--insanos-positive) !important; box-shadow: 0 0 0 4px var(--insanos-positive-soft) !important; }
.command-button kbd {
  color: var(--insanos-muted) !important;
  background: var(--insanos-panel-soft) !important;
  border-color: var(--insanos-line) !important;
}
.stat-card, .panel-card, .content-card, .empty-panel, .table-wrapper,
.moderation-card, .feedback-ticket, .studio-scan-card {
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel) !important;
  border-color: var(--insanos-line) !important;
}
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .panel-card,
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .feedback-ticket {
  background: linear-gradient(145deg,var(--insanos-panel-raised),var(--insanos-panel)) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.18) !important;
}
.stat-card span, .stat-card small,
.studio-scan-card p, .feedback-ticket header small, .feedback-ticket time { color: var(--insanos-muted) !important; }
.content-cover, .scan-metrics span { color: var(--insanos-muted) !important; background: var(--insanos-panel-soft) !important; }
.scan-metrics b { color: var(--insanos-ink) !important; }
.admin-table th, .admin-table td,
.chapter-admin-area, .chapter-admin-row,
.feedback-review { border-color: var(--insanos-line) !important; }
.admin-table th { color: var(--insanos-muted) !important; background: var(--insanos-panel-soft) !important; }
.admin-table td, .admin-table tr { color: var(--insanos-ink-soft) !important; background: transparent !important; }
.app-dialog, .feedback-dialog {
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel-raised) !important;
  border: 1px solid var(--insanos-line-strong) !important;
  box-shadow: var(--insanos-shadow-raised) !important;
}
.app-dialog::backdrop, .feedback-dialog::backdrop { background: var(--insanos-overlay) !important; }
.dialog-heading, .feedback-heading { border-color: var(--insanos-line) !important; }
.dialog-heading button, .feedback-heading button, .modal-close-btn {
  color: var(--insanos-muted) !important;
  background: var(--insanos-panel-soft) !important;
}
.feedback-ticket > p { color: var(--insanos-ink-soft) !important; }
html[data-theme] .admin-page .app-dialog label,
html[data-theme] .admin-page .app-dialog .check-row { color: var(--insanos-ink-soft) !important; }
html[data-theme] .admin-page .modal-actions {
  background: color-mix(in srgb,var(--insanos-panel-raised) 96%,transparent) !important;
  border-color: var(--insanos-line) !important;
}
html[data-theme] .admin-page .modal-actions .btn-primary {
  color: var(--insanos-on-accent) !important;
  background: var(--insanos-accent) !important;
  border-color: var(--insanos-accent) !important;
}
html[data-theme="dark"] .admin-page .modal-actions .btn-primary { color: var(--insanos-on-accent) !important; }
html[data-theme] .admin-page .modal-actions .btn-secondary {
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel) !important;
  border-color: var(--insanos-line-strong) !important;
}
html[data-theme] .admin-page .dialog-heading button {
  color: var(--insanos-muted) !important;
  background: var(--insanos-panel-soft) !important;
}
html[data-theme] .feedback-dialog .feedback-actions .reader-primary-action {
  color: var(--insanos-on-accent) !important;
  background: var(--insanos-accent) !important;
  border-color: var(--insanos-accent) !important;
}
html[data-theme="dark"] .feedback-dialog .feedback-actions .reader-primary-action { color: var(--insanos-on-accent) !important; }
html[data-theme] input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  color: var(--insanos-ink-soft);
  background: var(--insanos-panel-soft);
  border: 0;
  border-right: 1px solid var(--insanos-line);
  cursor: pointer;
}

/* Catálogo del lector */
.reader-catalog {
  --reader-paper: var(--insanos-canvas);
  --reader-white: var(--insanos-panel);
  --reader-ink: var(--insanos-ink);
  --reader-muted: var(--insanos-muted);
  --reader-line: var(--insanos-line);
  --reader-blue: var(--insanos-accent);
}
.reader-nav {
  color: var(--insanos-ink) !important;
  background: var(--insanos-nav) !important;
  border-color: var(--insanos-line) !important;
  box-shadow: 0 8px 28px color-mix(in srgb,var(--insanos-overlay) 16%,transparent);
}
.insanos-wordmark, .insanos-wordmark:hover,
.reader-profile strong { color: var(--insanos-ink) !important; }
.wordmark-icon {
  color: var(--insanos-nav-solid) !important;
  background: var(--insanos-ink) !important;
}
:root[data-theme="dark"] .wordmark-icon { color: var(--insanos-on-accent) !important; background: var(--insanos-accent) !important; }
.community-control,
.reader-search {
  color: var(--insanos-muted) !important;
  background: var(--insanos-panel-soft) !important;
  border-color: var(--insanos-line) !important;
}
.community-control select, .community-control option { color: var(--insanos-field-ink) !important; background: var(--insanos-field) !important; }
.reader-search input { color: var(--insanos-field-ink) !important; background: transparent !important; }
.community-control select { background: transparent !important; }
.community-control svg, .reader-search svg { color: var(--insanos-muted) !important; }
.reader-icon-button { color: var(--insanos-muted) !important; background: transparent !important; }
.reader-icon-button:hover { color: var(--insanos-ink) !important; background: var(--insanos-panel-hover) !important; }
.profile-avatar { color: var(--insanos-panel) !important; background: var(--insanos-ink) !important; }
:root[data-theme="dark"] .profile-avatar { color: var(--insanos-on-accent) !important; background: var(--insanos-accent) !important; }

/* Catálogo editorial v3: ficha horizontal, no mosaico genérico de póster. */
.reader-catalog #series-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 22px !important;
}
.reader-catalog #series-grid .series-card {
  display: grid !important;
  grid-template-columns: minmax(142px,38%) minmax(0,1fr) !important;
  min-height: 258px;
  overflow: hidden;
  border: 1px solid var(--insanos-line) !important;
  border-radius: 14px !important;
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel) !important;
  box-shadow: 0 12px 32px color-mix(in srgb,var(--insanos-overlay) 10%,transparent) !important;
}
.reader-catalog #series-grid .series-cover {
  width: 100%;
  height: 100% !important;
  min-height: 258px;
  aspect-ratio: 2 / 3;
  border: 0 !important;
  border-right: 1px solid var(--insanos-line) !important;
  border-radius: 0 !important;
}
.reader-catalog #series-grid .series-info {
  min-height: 258px;
  padding: 20px !important;
  background: var(--insanos-panel) !important;
}
.reader-catalog #series-grid .series-card-kicker {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reader-catalog #series-grid .series-genre { min-width: 0; }
.reader-catalog #series-grid .series-age-rating {
  position: static;
  flex: 0 0 auto;
  max-width: 110px;
  padding: 4px 7px;
  border: 1px solid var(--insanos-line);
  border-radius: 5px;
  color: var(--insanos-muted);
  background: var(--insanos-panel-soft);
  font-size: .55rem;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: none;
}
.reader-catalog #series-grid .series-info h3 {
  min-height: auto;
  margin: 14px 0 10px;
  font-size: clamp(1.05rem,1.4vw,1.28rem) !important;
  line-height: 1.22 !important;
}
.reader-catalog #series-grid .series-card-description {
  display: -webkit-box;
  margin: 0 0 18px;
  overflow: hidden;
  color: var(--insanos-muted);
  font-size: .73rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.reader-catalog #series-grid .card-meta { margin-top: auto; }
.reader-catalog #series-grid .series-card:hover {
  border-color: color-mix(in srgb,var(--insanos-accent) 45%,var(--insanos-line)) !important;
  box-shadow: 0 18px 42px color-mix(in srgb,var(--insanos-overlay) 16%,transparent) !important;
}
.reader-catalog #series-grid .series-card:hover .series-cover { transform: none; }
@media (max-width: 760px) {
  .reader-catalog #series-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .reader-catalog #series-grid .series-card {
    grid-template-columns: 116px minmax(0,1fr) !important;
    min-height: 174px;
  }
  .reader-catalog #series-grid .series-cover { min-height: 174px; }
  .reader-catalog #series-grid .series-info { min-height: 174px; padding: 14px !important; }
  .reader-catalog #series-grid .series-card-description { -webkit-line-clamp: 2; margin-bottom: 10px; }
  .reader-catalog #series-grid .series-age-rating { display: none; }
  .reader-catalog #series-grid .card-meta small { display: none; }
}
.reader-profile { border-color: var(--insanos-line) !important; }
.reader-profile small { color: var(--insanos-muted) !important; }
.reader-nav .membership-badge {
  color: var(--insanos-muted) !important;
  background: transparent !important;
  border-color: var(--insanos-line-strong) !important;
}
.reader-nav .membership-badge.vip {
  color: var(--insanos-warning) !important;
  background: var(--insanos-warning-soft) !important;
  border-color: color-mix(in srgb,var(--insanos-warning) 48%,var(--insanos-line)) !important;
}

.reader-nav-link {
  display: inline-flex; align-items: center; gap: .48rem; border: 0; background: transparent;
  color: var(--insanos-muted); font: 650 .78rem/1 var(--insanos-sans); cursor: pointer; padding: .65rem .35rem;
}
.reader-nav-link:hover { color: var(--insanos-ink); }
.reader-nav-link svg { width: 16px; height: 16px; }
.notification-trigger { position: relative; }
.notification-badge {
  position: absolute; top: 1px; right: 0; display: grid; place-items: center; min-width: 16px; height: 16px;
  padding: 0 4px; border: 2px solid var(--insanos-nav-solid); border-radius: 999px; background: var(--insanos-danger);
  color: #fff; font: 800 .55rem/1 var(--insanos-sans);
}
.notification-backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(4, 7, 12, .4); backdrop-filter: blur(3px); }
.notification-drawer {
  position: fixed; z-index: 1200; top: 0; right: 0; width: min(420px, 100vw); height: 100dvh;
  display: flex; flex-direction: column; padding: 1.25rem; transform: translateX(104%);
  border-left: 1px solid var(--insanos-line); background: var(--insanos-panel); color: var(--insanos-ink);
  box-shadow: -25px 0 70px rgba(0,0,0,.16); transition: transform .32s cubic-bezier(.22,.9,.32,1);
}
.notification-drawer.open { transform: translateX(0); }
.notification-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0 1.1rem; border-bottom: 1px solid var(--insanos-line); }
.notification-head span { color: var(--insanos-accent-ink); font: 800 .62rem var(--insanos-sans); text-transform: uppercase; letter-spacing: .1em; }
.notification-head h2 { margin: .25rem 0 0; font: 760 1.75rem/1 var(--insanos-display); }
.notification-head button, .notification-preferences > div button { border: 0; background: transparent; color: var(--insanos-muted); cursor: pointer; }
.notification-tools { display: flex; justify-content: space-between; gap: .5rem; padding: .8rem 0; }
.notification-tools button { display: inline-flex; gap: .35rem; align-items: center; border: 0; background: transparent; color: var(--insanos-muted); font: 700 .68rem var(--insanos-sans); cursor: pointer; }
.notification-tools button:hover { color: var(--insanos-ink); }
.notification-tools svg { width: 14px; }
.notification-list { overflow-y: auto; display: grid; gap: .4rem; }
.notification-item {
  width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: start; gap: .75rem;
  padding: .85rem; border: 1px solid transparent; border-radius: 13px; background: transparent;
  color: var(--insanos-ink); text-align: left; cursor: pointer;
}
.notification-item:hover { background: var(--insanos-elevated); }
.notification-item.unread { border-color: var(--insanos-line); background: var(--insanos-canvas); }
.notification-item > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--insanos-accent-soft); color: var(--insanos-accent-ink); }
.notification-item > span svg { width: 17px; }
.notification-item strong { display: block; font: 750 .8rem/1.3 var(--insanos-sans); }
.notification-item p { margin: .25rem 0; color: var(--insanos-muted); font: 500 .72rem/1.45 var(--insanos-sans); }
.notification-item time { color: var(--insanos-faint); font: 600 .62rem var(--insanos-sans); }
.unread-dot { width: 7px; fill: var(--insanos-accent); color: var(--insanos-accent); }
.notification-empty { margin: auto; padding: 4rem 2rem; text-align: center; color: var(--insanos-muted); }
.notification-empty > svg { width: 27px; color: var(--insanos-faint); }
.notification-empty h3 { margin: .75rem 0 .3rem; color: var(--insanos-ink); }
.notification-empty p { margin: 0; font-size: .76rem; line-height: 1.5; }
.notification-preferences { display: grid; gap: .6rem; }
.notification-preferences > div { display: flex; justify-content: space-between; padding: .8rem 0; }
.notification-preferences label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem; border: 1px solid var(--insanos-line); border-radius: 12px; }
.notification-preferences label span { display: grid; gap: .2rem; }
.notification-preferences label strong { font: 750 .78rem var(--insanos-sans); }
.notification-preferences label small { color: var(--insanos-muted); font: 500 .67rem/1.35 var(--insanos-sans); }
.notification-preferences input { width: 18px; height: 18px; accent-color: var(--insanos-accent); }
.editorial-release {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: .85rem;
  border: 1px solid var(--insanos-line); border-radius: 13px; background: var(--insanos-canvas);
}
.editorial-release label { display: grid; gap: .35rem; color: var(--insanos-muted); font: 700 .68rem var(--insanos-sans); }
.editorial-release select, .editorial-release input { min-height: 40px; border-color: var(--insanos-line); background: var(--insanos-panel); color: var(--insanos-ink); }
.editorial-release p { grid-column: 1/-1; display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--insanos-muted); font: 600 .67rem var(--insanos-sans); }
.editorial-release p svg { width: 14px; color: var(--insanos-accent-ink); }
.editorial-readiness { display: grid; gap: .35rem; max-width: 360px; margin-top: .7rem; }
.editorial-readiness > span { height: 3px; overflow: hidden; border-radius: 99px; background: var(--insanos-line); }
.editorial-readiness > span i { display: block; height: 100%; border-radius: inherit; background: var(--insanos-warning); }
.editorial-readiness.ready > span i { background: var(--insanos-success); }
.editorial-readiness small { color: var(--insanos-muted); font: 650 .63rem/1.35 var(--insanos-sans); }
.spoiler-check { display: inline-flex !important; align-items: center; gap: .4rem; color: var(--insanos-muted); font: 650 .66rem var(--insanos-sans); }
.spoiler-check input { width: 15px; height: 15px; accent-color: var(--insanos-accent); }
.comment.is-spoiler { position: relative; overflow: hidden; }
.comment.is-spoiler > p { filter: blur(9px); user-select: none; transition: filter .2s ease; }
.comment.is-spoiler.spoiler-revealed > p { filter: none; user-select: text; }
.spoiler-curtain {
  display: flex; align-items: center; gap: .4rem; width: 100%; margin: .55rem 0; padding: .65rem;
  border: 1px solid var(--insanos-line); border-radius: 9px; background: var(--insanos-elevated); color: var(--insanos-ink); cursor: pointer;
}
.spoiler-curtain svg { width: 15px; }
.spoiler-curtain span { font: 750 .68rem var(--insanos-sans); }
.spoiler-curtain small { margin-left: auto; color: var(--insanos-muted); font: 600 .62rem var(--insanos-sans); }
.spoiler-revealed .spoiler-curtain { display: none; }
.report-comment { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; color: var(--insanos-faint); font: 650 .6rem var(--insanos-sans); cursor: pointer; }
.report-comment:hover { color: var(--insanos-danger); }
.report-comment svg { width: 12px; }
.chapter-conversation {
  width: min(880px, calc(100% - 2rem)); margin: 5rem auto 2rem; padding: clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--insanos-line); border-radius: 20px; background: var(--insanos-panel); color: var(--insanos-ink);
}
.chapter-conversation-head span { color: var(--insanos-accent-ink); font: 800 .62rem var(--insanos-sans); text-transform: uppercase; letter-spacing: .1em; }
.chapter-conversation-head h2 { margin: .35rem 0; font: 760 1.7rem/1.15 var(--insanos-display); }
.chapter-conversation-head p { margin: 0 0 1.2rem; color: var(--insanos-muted); font-size: .76rem; }
#chapter-comment-form textarea { width: 100%; min-height: 90px; resize: vertical; border: 1px solid var(--insanos-line); border-radius: 11px; padding: .8rem; background: var(--insanos-canvas); color: var(--insanos-ink); }
#chapter-comment-form > div { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; }
.chapter-comments-list { display: grid; gap: .65rem; margin-top: 1.5rem; }
.reader-comment { padding: .9rem; border-top: 1px solid var(--insanos-line); }
.reader-comment > div { display: flex; justify-content: space-between; gap: 1rem; }
.reader-comment strong { font: 750 .75rem var(--insanos-sans); }
.reader-comment time { color: var(--insanos-faint); font: 600 .6rem var(--insanos-sans); }
.reader-comment p { color: var(--insanos-muted); font: 500 .76rem/1.55 var(--insanos-sans); }
.reader-comment.is-spoiler > p { filter: blur(9px); user-select: none; }
.reader-comment.spoiler-revealed > p { filter: none; user-select: text; }
.moderation-card.is-reported { border-color: color-mix(in srgb, var(--insanos-danger) 45%, var(--insanos-line)); }
.report-count, .moderation-spoiler { display: inline-flex; align-items: center; gap: .3rem; color: var(--insanos-danger); font: 750 .63rem var(--insanos-sans); }
.report-count { margin-right: auto; }
.report-count svg { width: 13px; }
.moderation-spoiler { margin-right: .5rem; padding: .2rem .4rem; border-radius: 5px; background: color-mix(in srgb, var(--insanos-warning) 15%, transparent); color: var(--insanos-warning); }
.series-age-rating { position: absolute; left: .65rem; bottom: .65rem; z-index: 2; padding: .3rem .42rem; border-radius: 6px; background: rgba(8,10,14,.82); color: #fff; font: 800 .58rem var(--insanos-sans); }
.content-advisory { width: min(430px, calc(100vw - 2rem)); border: 1px solid var(--insanos-line); border-radius: 20px; padding: 0; background: var(--insanos-panel); color: var(--insanos-ink); }
.content-advisory[open],
.external-consent-dialog[open] {
  position: fixed !important;
  inset: 0 !important;
  max-height: calc(100dvh - 2rem);
  margin: auto !important;
  overflow: auto;
  overscroll-behavior: contain;
}
.content-advisory::backdrop { background: rgba(4,7,12,.65); backdrop-filter: blur(6px); }
.content-advisory form { display: grid; justify-items: start; padding: 1.6rem; }
.content-advisory form > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--insanos-warning) 14%, transparent); color: var(--insanos-warning); }
.content-advisory form > span svg { width: 20px; }
.content-advisory small { margin-top: 1rem; color: var(--insanos-accent-ink); font: 800 .62rem var(--insanos-sans); text-transform: uppercase; letter-spacing: .1em; }
.content-advisory h2 { margin: .35rem 0; font: 760 1.6rem var(--insanos-display); }
.content-advisory p { color: var(--insanos-muted); font: 500 .78rem/1.6 var(--insanos-sans); }
.content-advisory form > div { display: flex; justify-content: flex-end; gap: .5rem; width: 100%; margin-top: .8rem; }
.content-advisory form > div button:first-child { border: 0; background: transparent; color: var(--insanos-muted); font-weight: 700; cursor: pointer; }
@media (max-width: 520px) {
  .content-advisory form { padding: 1.25rem; }
  .content-advisory form > div { flex-wrap: wrap; }
  .content-advisory form > div button { min-height: 44px; }
}
.chapter-reader::after { content: ""; position: fixed; z-index: 850; inset: 0; pointer-events: none; background: rgba(0,0,0,var(--reader-dim,0)); }
.chapter-reader[data-reader-width="focused"] .reader-page { max-width: 760px !important; }
.chapter-reader[data-reader-width="standard"] .reader-page { max-width: 1080px !important; }
.chapter-reader[data-reader-width="wide"] .reader-page { max-width: 1440px !important; }
.chapter-reader[data-reader-gap="breathing"] .page-wrapper { margin-bottom: 14px !important; }
.chapter-reader[data-reader-gap="seamless"] .page-wrapper { margin-bottom: 0 !important; }
.reading-settings { width: min(460px, calc(100vw - 2rem)); border: 1px solid var(--insanos-line); border-radius: 18px; padding: 0; background: var(--insanos-panel); color: var(--insanos-ink); }
.reading-settings::backdrop { background: rgba(3,6,10,.6); backdrop-filter: blur(5px); }
.reading-settings form { display: grid; gap: 1rem; padding: 1.35rem; }
.reading-settings form > div { position: relative; }
.reading-settings form > div span { color: var(--insanos-accent-ink); font: 800 .61rem var(--insanos-sans); text-transform: uppercase; letter-spacing: .1em; }
.reading-settings h2 { margin: .25rem 0 0; font: 760 1.5rem var(--insanos-display); }
.reading-settings form > div button { position: absolute; top: 0; right: 0; border: 0; background: transparent; color: var(--insanos-muted); cursor: pointer; }
.reading-settings fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; border: 0; padding: 0; }
.reading-settings legend { width: 100%; margin-bottom: .55rem; color: var(--insanos-muted); font: 700 .66rem var(--insanos-sans); }
.reading-settings fieldset label { display: grid; place-items: center; gap: .35rem; padding: .7rem .3rem; border: 1px solid var(--insanos-line); border-radius: 10px; color: var(--insanos-muted); font: 650 .65rem var(--insanos-sans); cursor: pointer; }
.reading-settings input[type="radio"] { accent-color: var(--insanos-accent); }
.reader-dim-control { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; color: var(--insanos-muted); font: 700 .67rem var(--insanos-sans); }
.reader-dim-control input { accent-color: var(--insanos-accent); }
.reading-settings form > p { margin: 0; color: var(--insanos-faint); font: 600 .62rem var(--insanos-sans); }

.personal-library {
  padding: clamp(3.5rem, 7vw, 6.5rem) max(5.2vw, 1.25rem);
  color: var(--insanos-ink); background: var(--insanos-surface);
  border-bottom: 1px solid var(--insanos-line);
}
.catalog-toolbar { align-items: center; gap: 1rem; }
.catalog-status-filters { display: flex; gap: .25rem; }
.catalog-status-filters button {
  border: 0; border-radius: 999px; padding: .62rem .8rem; background: transparent;
  color: var(--insanos-muted); font: 700 .7rem var(--insanos-sans); cursor: pointer;
}
.catalog-status-filters button:hover { color: var(--insanos-ink); background: var(--insanos-elevated); }
.catalog-status-filters button.active { color: var(--insanos-accent-ink); background: var(--insanos-accent-soft); }
.catalog-selectors { display: flex; gap: .5rem; margin-left: auto; }
.catalog-selectors label { display: flex; align-items: center; gap: .45rem; color: var(--insanos-faint); font: 650 .62rem var(--insanos-sans); }
.catalog-selectors select {
  min-height: 36px; border: 1px solid var(--insanos-line); border-radius: 9px; padding: 0 1.8rem 0 .6rem;
  background: var(--insanos-panel); color: var(--insanos-ink); font: 650 .68rem var(--insanos-sans);
}
.discovery-rail { margin: 1.35rem 0 2rem; }
.discovery-rail .subsection-heading { margin-bottom: .75rem; }
.discovery-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.discovery-cards button {
  position: relative; display: grid; gap: .3rem; min-height: 116px; padding: 1rem; overflow: hidden;
  border: 1px solid var(--insanos-line); border-radius: 15px; background: var(--insanos-panel); color: var(--insanos-ink);
  text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease;
}
.discovery-cards button::after {
  content: ""; position: absolute; width: 100px; height: 100px; right: -40px; bottom: -55px;
  border-radius: 50%; background: var(--insanos-accent-soft);
}
.discovery-cards button:hover { transform: translateY(-2px); border-color: var(--insanos-accent); }
.discovery-cards span { color: var(--insanos-accent-ink); font: 800 .61rem var(--insanos-sans); text-transform: uppercase; letter-spacing: .08em; }
.discovery-cards strong { max-width: 80%; font: 760 1rem/1.25 var(--insanos-sans); }
.discovery-cards small { color: var(--insanos-muted); font: 550 .68rem var(--insanos-sans); }
.discovery-cards svg { position: absolute; z-index: 1; right: .9rem; bottom: .9rem; width: 17px; color: var(--insanos-accent-ink); }
.catalog-result-row { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; color: var(--insanos-muted); font: 650 .7rem var(--insanos-sans); }
.catalog-result-row button { border: 0; background: transparent; color: var(--insanos-accent-ink); font: 750 .68rem var(--insanos-sans); cursor: pointer; }
.personal-library .library-heading { margin-bottom: 2rem; }
.library-total {
  align-self: end; padding: .55rem .8rem; border: 1px solid var(--insanos-line); border-radius: 999px;
  color: var(--insanos-muted); font: 700 .72rem/1 var(--insanos-sans);
}
.continue-shelf {
  margin-bottom: 2.1rem; padding: 1.25rem; border: 1px solid var(--insanos-line);
  border-radius: 22px; background: var(--insanos-canvas);
}
.continue-shelf .subsection-heading { margin-bottom: 1rem; }
.continue-shelf .subsection-heading h3 { display: flex; align-items: center; gap: .5rem; }
.continue-shelf .subsection-heading svg { width: 17px; color: var(--insanos-accent); }
.continue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.continue-card {
  display: grid; grid-template-columns: 62px 1fr auto; gap: .9rem; align-items: center;
  min-width: 0; padding: .75rem; border: 1px solid var(--insanos-line); border-radius: 15px;
  background: var(--insanos-panel); color: var(--insanos-ink); text-decoration: none; transition: transform .2s ease, border-color .2s ease;
}
.continue-card:hover { transform: translateY(-2px); border-color: var(--insanos-accent); }
.continue-cover { width: 62px; aspect-ratio: 3/4; overflow: hidden; border-radius: 9px; background: var(--insanos-elevated); }
.continue-cover img, .continue-cover .cover-placeholder { width: 100%; height: 100%; object-fit: cover; }
.continue-card > div:nth-child(2) { min-width: 0; }
.continue-card span, .continue-card small { color: var(--insanos-muted); font: 600 .68rem/1.3 var(--insanos-sans); }
.continue-card h3 { margin: .3rem 0 .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 1rem/1.2 var(--insanos-sans); }
.continue-card > svg { width: 17px; color: var(--insanos-faint); }
.reading-progress { height: 3px; overflow: hidden; margin-bottom: .4rem; border-radius: 999px; background: var(--insanos-line); }
.reading-progress i { display: block; height: 100%; border-radius: inherit; background: var(--insanos-accent); }
.library-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .65rem; margin-bottom: 1rem; scrollbar-width: none; }
.library-tabs button {
  flex: 0 0 auto; display: inline-flex; gap: .45rem; align-items: center; border: 0; border-radius: 999px;
  padding: .65rem .85rem; background: transparent; color: var(--insanos-muted); font: 700 .72rem/1 var(--insanos-sans); cursor: pointer;
}
.library-tabs button span { color: var(--insanos-ink); }
.library-tabs button:hover { color: var(--insanos-ink); background: var(--insanos-elevated); }
.library-tabs button.active { color: var(--insanos-accent-ink); background: var(--insanos-accent-soft); }
.personal-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; min-height: 80px; }
.library-entry {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .85rem;
  padding: .65rem .75rem; border: 1px solid var(--insanos-line); border-radius: 14px; background: var(--insanos-panel); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.library-entry:hover { background: var(--insanos-elevated); border-color: color-mix(in srgb, var(--insanos-accent) 50%, var(--insanos-line)); }
.library-entry-cover { width: 48px; aspect-ratio: 3/4; overflow: hidden; border-radius: 7px; background: var(--insanos-elevated); }
.library-entry-cover img, .library-entry-cover .cover-placeholder { width: 100%; height: 100%; object-fit: cover; }
.library-entry-copy { min-width: 0; }
.library-entry-copy > div { display: flex; gap: .45rem; align-items: center; }
.library-state, .following-dot { color: var(--insanos-accent-ink); font: 750 .62rem/1 var(--insanos-sans); text-transform: uppercase; letter-spacing: .06em; }
.following-dot { color: var(--insanos-muted); }
.following-dot::before { content: "·"; margin-right: .45rem; }
.library-entry h3 { margin: .28rem 0 .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 .9rem/1.2 var(--insanos-sans); }
.library-entry p { margin: 0; color: var(--insanos-muted); font: 500 .7rem/1.2 var(--insanos-sans); }
.library-entry > svg { width: 16px; color: var(--insanos-faint); }
.personal-library-empty {
  grid-column: 1/-1; display: flex; align-items: center; gap: 1rem; padding: 1.15rem;
  border: 1px dashed var(--insanos-line); border-radius: 16px; color: var(--insanos-muted);
}
.personal-library-empty > svg { width: 23px; }
.personal-library-empty h3 { margin: 0 0 .2rem; color: var(--insanos-ink); font: 750 .9rem/1.2 var(--insanos-sans); }
.personal-library-empty p { margin: 0; font-size: .75rem; }
.personal-library-empty button { margin-left: auto; border: 0; background: transparent; color: var(--insanos-accent-ink); font: 750 .72rem var(--insanos-sans); cursor: pointer; }
.detail-library-actions { display: flex; align-items: end; gap: .65rem; margin-top: 1rem; }
.detail-library-actions button {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 41px; border: 1px solid var(--insanos-line);
  border-radius: 10px; padding: 0 .8rem; background: var(--insanos-panel); color: var(--insanos-ink); font: 700 .72rem var(--insanos-sans); cursor: pointer;
}
.detail-library-actions button.active { border-color: var(--insanos-accent); color: var(--insanos-accent-ink); background: var(--insanos-accent-soft); }
.detail-library-actions button svg { width: 16px; }
.detail-library-actions label { display: grid; gap: .25rem; color: var(--insanos-muted); font: 650 .62rem var(--insanos-sans); }
.detail-library-actions select {
  min-height: 41px; border: 1px solid var(--insanos-line); border-radius: 10px; padding: 0 2rem 0 .7rem;
  background: var(--insanos-panel); color: var(--insanos-ink); font: 650 .72rem var(--insanos-sans);
}
.reader-hero {
  color: var(--insanos-hero-ink) !important;
  background: var(--insanos-hero-bg) !important;
  border-color: var(--insanos-line) !important;
}
:root[data-theme="dark"] .reader-hero {
  background:
    radial-gradient(circle at 82% 12%,rgba(91,124,255,.14),transparent 34%),
    linear-gradient(135deg,#0d131d,#101a29 58%,#0b111a) !important;
}
.reader-hero::before { background: linear-gradient(transparent,var(--insanos-line) 20%,var(--insanos-line) 80%,transparent) !important; }
.reader-hero h1, .reader-hero-actions > span strong,
.membership-card > strong { color: var(--insanos-hero-ink) !important; }
.reader-hero-copy > p, .reader-hero-actions > span { color: var(--insanos-muted) !important; }
.reader-kicker, .series-genre, .feedback-heading span { color: var(--insanos-accent) !important; }
.membership-card {
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel-raised) !important;
  border-color: var(--insanos-line-strong) !important;
  box-shadow: var(--insanos-shadow) !important;
}
:root[data-theme="dark"] .membership-card {
  background: linear-gradient(145deg,#1b2636,#141c28) !important;
}
.membership-card-icon {
  color: var(--insanos-warning) !important;
  background: var(--insanos-warning-soft) !important;
  border-color: color-mix(in srgb,var(--insanos-warning) 35%,var(--insanos-line)) !important;
}
.membership-card > span, .membership-card > p, .membership-rule { color: var(--insanos-muted) !important; }
.membership-rule { border-color: var(--insanos-line) !important; }
.reader-library { color: var(--insanos-ink) !important; background: var(--insanos-canvas) !important; }
.library-heading h2 { color: var(--insanos-ink) !important; }
.reader-search kbd {
  color: var(--insanos-muted) !important;
  background: var(--insanos-panel) !important;
  border-color: var(--insanos-line) !important;
}
.catalog-toolbar { color: var(--insanos-muted) !important; border-color: var(--insanos-line) !important; }
.reader-catalog .series-cover {
  background: var(--insanos-panel-soft) !important;
  border-color: var(--insanos-line) !important;
}
.reader-catalog .series-card {
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel) !important;
  border-color: var(--insanos-line) !important;
  box-shadow: var(--insanos-shadow-soft) !important;
}
.reader-catalog .cover-placeholder { color: var(--insanos-faint) !important; background: var(--insanos-panel-soft) !important; }
.reader-catalog .series-info { color: var(--insanos-ink) !important; background: transparent !important; }
.reader-catalog .series-info h3 { color: var(--insanos-ink) !important; }
.reader-catalog .card-meta { color: var(--insanos-muted) !important; }
.reader-catalog .card-meta,
.reader-catalog .card-meta span { border-color: var(--insanos-line) !important; }
.reader-catalog .card-meta strong { color: var(--insanos-ink) !important; }
:root[data-theme="dark"] .reader-catalog .series-card:hover .series-cover {
  border-color: var(--insanos-line-strong) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.42) !important;
}
.reader-empty-state { color: var(--insanos-ink) !important; border-color: var(--insanos-line-strong) !important; }
.reader-empty-state > span { color: var(--insanos-muted) !important; background: var(--insanos-panel) !important; border-color: var(--insanos-line) !important; }
.reader-empty-state p { color: var(--insanos-muted) !important; }
.reader-catalog .modal-overlay { background: var(--insanos-overlay) !important; }
.reader-catalog .series-detail {
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel-raised) !important;
  border-color: var(--insanos-line-strong) !important;
  box-shadow: var(--insanos-shadow-raised) !important;
}
.reader-catalog .series-detail-head, .reader-catalog .comment { border-color: var(--insanos-line) !important; }
.reader-catalog .detail-info h2, .rating-summary strong { color: var(--insanos-ink) !important; }
.reader-catalog .community-column { color: var(--insanos-ink) !important; background: var(--insanos-panel-soft) !important; border-color: var(--insanos-line) !important; }
.chapter-row {
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel) !important;
  border-color: var(--insanos-line) !important;
}
.chapter-row span, .chapter-row small { color: var(--insanos-muted) !important; }
.chapter-row:hover { color: var(--insanos-ink) !important; background: var(--insanos-panel-hover) !important; border-color: var(--insanos-accent) !important; }
.comment-form textarea { color: var(--insanos-field-ink) !important; background: var(--insanos-field) !important; border-color: var(--insanos-line-strong) !important; }
.comment strong { color: var(--insanos-ink) !important; }

/* Carga de capítulos: telemetría real, estados explícitos y contraste en ambos temas. */
.admin-page #chapter-dialog {
  width: min(680px, calc(100vw - 28px)) !important;
}
.admin-page #chapter-form.is-uploading {
  cursor: progress;
}
.admin-page #chapter-form :disabled:not(#chapter-upload-cancel) {
  cursor: not-allowed !important;
  opacity: .58;
}
.upload-progress {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 20px;
  color: var(--insanos-ink) !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--insanos-accent) 14%, transparent), transparent 42%),
    var(--insanos-panel-soft) !important;
  border: 1px solid var(--insanos-line-strong) !important;
  border-radius: 18px;
  box-shadow: inset 0 1px color-mix(in srgb, var(--insanos-panel-raised) 80%, transparent);
}
.upload-progress.hidden { display: none !important; }
.upload-progress::after {
  position: absolute;
  top: -70px;
  right: -42px;
  width: 150px;
  height: 150px;
  content: "";
  pointer-events: none;
  background: color-mix(in srgb, var(--insanos-accent) 8%, transparent);
  border-radius: 50%;
  filter: blur(4px);
}
.upload-progress-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
}
.upload-progress-orbit {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--insanos-accent) !important;
  background: color-mix(in srgb, var(--insanos-accent) 11%, var(--insanos-panel-raised)) !important;
  border: 1px solid color-mix(in srgb, var(--insanos-accent) 26%, var(--insanos-line)) !important;
  border-radius: 50%;
}
.upload-progress-orbit svg { width: 19px; height: 19px; stroke: currentColor; }
.upload-progress[data-state="uploading"] .upload-progress-orbit::after,
.upload-progress[data-state="processing"] .upload-progress-orbit::after {
  position: absolute;
  inset: -4px;
  content: "";
  border: 1.5px solid transparent;
  border-top-color: var(--insanos-accent);
  border-right-color: color-mix(in srgb, var(--insanos-accent) 35%, transparent);
  border-radius: 50%;
  animation: upload-orbit 1.1s linear infinite;
}
.upload-progress[data-state="complete"] .upload-progress-orbit {
  color: var(--insanos-success, #16845b) !important;
  background: color-mix(in srgb, var(--insanos-success, #16845b) 12%, var(--insanos-panel-raised)) !important;
}
.upload-progress[data-state="error"] .upload-progress-orbit,
.upload-progress[data-state="cancelled"] .upload-progress-orbit { color: var(--insanos-danger, #d65353) !important; }
.upload-progress-heading > div { min-width: 0; }
.upload-progress-heading span:not(.upload-progress-orbit) {
  display: block;
  margin-bottom: 3px;
  color: var(--insanos-muted) !important;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.upload-progress-heading strong {
  display: block;
  overflow: hidden;
  color: var(--insanos-ink) !important;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
}
.upload-progress-heading > b {
  color: var(--insanos-accent) !important;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.upload-progress-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--insanos-ink) 9%, var(--insanos-panel)) !important;
  border: 1px solid color-mix(in srgb, var(--insanos-ink) 8%, transparent) !important;
  border-radius: 999px;
}
.upload-progress-track > span {
  display: block;
  width: var(--upload-progress, 0%);
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, var(--insanos-accent), color-mix(in srgb, var(--insanos-accent) 58%, #b890ff)) !important;
  border-radius: inherit;
  box-shadow: 0 0 18px color-mix(in srgb, var(--insanos-accent) 34%, transparent);
  transition: width .24s cubic-bezier(.2,.8,.2,1);
}
.upload-progress-track > span::after {
  display: block;
  width: 46%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  animation: upload-shimmer 1.5s ease-in-out infinite;
}
.upload-progress[data-state="processing"] .upload-progress-track > span {
  width: 34%;
  animation: upload-processing 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
.upload-progress[data-state="complete"] .upload-progress-track > span {
  background: var(--insanos-success, #16845b) !important;
}
.upload-progress[data-state="error"] .upload-progress-track > span,
.upload-progress[data-state="cancelled"] .upload-progress-track > span {
  background: var(--insanos-danger, #d65353) !important;
  box-shadow: none;
}
.upload-progress-metrics {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
}
.upload-progress-metrics > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.upload-progress-metrics small {
  color: var(--insanos-muted) !important;
  font-size: .6rem;
}
.upload-progress-metrics strong {
  overflow: hidden;
  color: var(--insanos-ink-soft) !important;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-progress-phases {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  padding-top: 2px;
}
.upload-progress-phases span {
  position: relative;
  padding-top: 15px;
  color: var(--insanos-muted) !important;
  font-size: .58rem;
  font-weight: 650;
  text-align: center;
}
.upload-progress-phases span::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  content: "";
  background: var(--insanos-panel-raised);
  border: 1px solid var(--insanos-line-strong);
  border-radius: 50%;
}
.upload-progress-phases span:not(:last-child)::after {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--insanos-line-strong);
}
.upload-progress-phases span.is-active { color: var(--insanos-accent) !important; }
.upload-progress-phases span.is-active::before {
  background: var(--insanos-accent);
  border-color: var(--insanos-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--insanos-accent) 14%,transparent);
}
.upload-progress-phases span.is-done::before { background: var(--insanos-accent); border-color: var(--insanos-accent); }
.upload-progress-phases span.is-done::after { background: var(--insanos-accent); }
.upload-cancel {
  justify-self: start;
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
  padding: 5px 0 !important;
  color: var(--insanos-muted) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: .68rem !important;
  font-weight: 650;
  cursor: pointer;
}

.upload-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--insanos-space-2);
  align-items: center;
}

.upload-activity {
  margin: 0 var(--insanos-space-6) var(--insanos-space-4);
  padding: var(--insanos-space-4);
  border: 1px solid var(--insanos-line);
  border-radius: var(--insanos-radius-lg);
  background: var(--insanos-surface);
  box-shadow: var(--insanos-shadow-soft);
}

.upload-activity > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--insanos-space-3);
  margin-bottom: var(--insanos-space-3);
}

.upload-activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--insanos-space-3);
  padding: var(--insanos-space-3) 0;
  border-top: 1px solid var(--insanos-line);
}

.upload-activity-item svg { width: 18px; height: 18px; }
.upload-activity-item div { display: grid; gap: 2px; min-width: 0; }
.upload-activity-item small { color: var(--insanos-text-muted); overflow-wrap: anywhere; }
.upload-activity-item[data-state="failed"] { color: var(--insanos-danger); }

@media (max-width: 720px) {
  .upload-activity { margin-inline: var(--insanos-space-3); }
}

.upload-discard {
  color: var(--insanos-danger);
}
.upload-cancel:hover { color: var(--insanos-danger, #d65353) !important; }
.upload-cancel svg { width: 14px; height: 14px; stroke: currentColor; }
.upload-cancel.hidden { display: none !important; }

@keyframes upload-orbit { to { transform: rotate(360deg); } }
@keyframes upload-shimmer { from { transform: translateX(-140%); } to { transform: translateX(270%); } }
@keyframes upload-processing { 0% { transform: translateX(-105%); } 50% { width: 52%; } 100% { transform: translateX(305%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .upload-progress *, .upload-progress *::before, .upload-progress *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Ciclo de vida de series */
.content-card.is-archived {
  border-style: dashed !important;
  background: color-mix(in srgb, var(--insanos-panel) 84%, var(--insanos-muted) 4%) !important;
}
.content-card.is-archived .content-cover { filter: grayscale(.72); opacity: .72; }
.trash-section-heading { align-items: flex-start !important; }
.trash-section-heading h2 { margin: 5px 0 7px; color: var(--insanos-ink) !important; font-size: clamp(1.35rem,2vw,2rem); }
.trash-section-heading p { max-width: 720px; margin: 0; color: var(--insanos-muted) !important; line-height: 1.55; }
.trash-safety-note {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  padding: 9px 12px;
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel-soft) !important;
  border: 1px solid var(--insanos-line) !important;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 650;
}
.trash-safety-note svg { width: 15px; height: 15px; color: var(--insanos-success, #16845b); }
.trash-grid { display: grid; gap: 14px; }
.trash-card {
  display: grid;
  grid-template-columns: minmax(220px,1fr) minmax(300px,1.2fr) auto;
  gap: 20px;
  align-items: center;
  padding: 19px 20px;
  color: var(--insanos-ink) !important;
  background: var(--insanos-panel) !important;
  border: 1px solid var(--insanos-line) !important;
  border-radius: 16px;
  box-shadow: var(--insanos-shadow-soft);
}
.trash-card header { display: flex; gap: 12px; align-items: center; min-width: 0; }
.trash-card header > span {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--insanos-muted) !important;
  background: var(--insanos-panel-soft) !important;
  border: 1px solid var(--insanos-line) !important;
  border-radius: 12px;
}
.trash-card header svg { width: 18px; height: 18px; }
.trash-card header div { min-width: 0; }
.trash-card header small { color: var(--insanos-muted) !important; font-size: .62rem; }
.trash-card h3 { overflow: hidden; margin: 4px 0 0; color: var(--insanos-ink) !important; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.trash-impact { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.trash-impact span {
  display: grid;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--insanos-line);
  color: var(--insanos-muted) !important;
  font-size: .61rem;
}
.trash-impact b { color: var(--insanos-ink) !important; font-size: .78rem; font-variant-numeric: tabular-nums; }
.trash-card footer { display: flex; gap: 8px; justify-content: flex-end; }
.trash-card footer button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel-raised) !important;
  border: 1px solid var(--insanos-line-strong) !important;
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 650;
  white-space: nowrap;
}
.trash-card footer button:hover { border-color: var(--insanos-accent) !important; }
.trash-card footer button.danger-link { color: var(--insanos-danger, #cf4b4b) !important; }
.trash-card footer svg { width: 14px; height: 14px; }
.trash-empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  align-content: center;
  padding: 36px;
  text-align: center;
  background: var(--insanos-panel-soft) !important;
  border: 1px dashed var(--insanos-line-strong) !important;
  border-radius: 18px;
}
.trash-empty > span { display: grid; width: 52px; height: 52px; place-items: center; color: var(--insanos-muted); background: var(--insanos-panel); border: 1px solid var(--insanos-line); border-radius: 16px; }
.trash-empty h3 { margin: 14px 0 5px; color: var(--insanos-ink) !important; }
.trash-empty p { max-width: 440px; margin: 0; color: var(--insanos-muted) !important; font-size: .78rem; }

.admin-page .destructive-dialog { width: min(620px,calc(100vw - 28px)) !important; }
.destructive-kicker { display: block; margin-bottom: 5px; color: var(--insanos-danger, #cf4b4b) !important; font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.delete-impact-hero { display: flex; gap: 13px; align-items: center; padding: 15px; background: color-mix(in srgb,var(--insanos-danger, #cf4b4b) 8%,var(--insanos-panel-soft)) !important; border: 1px solid color-mix(in srgb,var(--insanos-danger, #cf4b4b) 30%,var(--insanos-line)) !important; border-radius: 14px; }
.delete-impact-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: var(--insanos-danger, #cf4b4b); background: var(--insanos-panel-raised); border-radius: 12px; }
.delete-impact-icon svg { width: 19px; height: 19px; }
.delete-impact-hero strong { display: block; color: var(--insanos-ink) !important; font-size: .88rem; }
.delete-impact-hero p { margin: 3px 0 0; color: var(--insanos-muted) !important; font-size: .69rem; }
.delete-impact-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.delete-impact-grid span { display: grid; gap: 3px; padding: 11px 8px; text-align: center; background: var(--insanos-panel-soft); border: 1px solid var(--insanos-line); border-radius: 10px; }
.delete-impact-grid b { color: var(--insanos-ink) !important; font-size: .9rem; font-variant-numeric: tabular-nums; }
.delete-impact-grid small { color: var(--insanos-muted) !important; font-size: .54rem; line-height: 1.25; }
.destructive-check { padding: 11px 13px; background: var(--insanos-panel-soft) !important; border: 1px solid var(--insanos-line) !important; border-radius: 10px; }
.btn-danger {
  min-height: 40px;
  padding: 0 17px;
  color: var(--insanos-on-danger) !important;
  background: var(--insanos-danger, #c93f45) !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  font-weight: 700;
}
:root[data-theme="light"] .btn-danger,
:root[data-theme="dark"] .btn-danger { color: var(--insanos-on-danger) !important; background: var(--insanos-danger) !important; }
.btn-danger:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .45; }

.chapter-list-tools {
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto;
  gap: 10px;
  margin: 0 0 12px;
  align-items: center;
}
.chapter-search {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
.chapter-search svg {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 15px;
  height: 15px;
  color: var(--insanos-muted);
  pointer-events: none;
}
.chapter-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 38px !important;
  border: 1px solid var(--insanos-line-strong) !important;
  border-radius: 10px !important;
  outline: 0;
  color: var(--insanos-field-ink) !important;
  background: var(--insanos-field) !important;
  font: 500 .72rem var(--insanos-sans);
}
.chapter-search input:focus {
  border-color: var(--insanos-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--insanos-accent) 16%,transparent);
}
.chapter-order-button {
  display: inline-flex;
  min-height: 42px;
  padding: 0 13px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--insanos-line-strong) !important;
  border-radius: 10px;
  color: var(--insanos-ink-soft) !important;
  background: var(--insanos-panel) !important;
  font: 650 .68rem var(--insanos-sans);
  white-space: nowrap;
  cursor: pointer;
}
.chapter-order-button:hover {
  border-color: var(--insanos-accent) !important;
  color: var(--insanos-accent) !important;
  background: var(--insanos-accent-soft) !important;
}
.chapter-order-button svg { width: 15px; height: 15px; }
.chapter-admin-tools {
  margin: 14px 0 5px;
  padding: 12px;
  border: 1px solid var(--insanos-line);
  border-radius: 12px;
  background: var(--insanos-panel-soft);
}
.chapter-filter-empty {
  display: grid;
  min-height: 150px;
  padding: 28px;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed var(--insanos-line-strong);
  border-radius: 12px;
  color: var(--insanos-muted);
  background: var(--insanos-panel-soft);
  text-align: center;
}
.chapter-filter-empty svg { width: 22px; height: 22px; }
.chapter-filter-empty strong { color: var(--insanos-ink) !important; font-size: .8rem; }
.chapter-filter-empty span { color: var(--insanos-muted) !important; font-size: .68rem; }

@media (max-width: 760px) {
  .reader-nav-link span { display: none; }
  .continue-grid, .personal-library-grid { grid-template-columns: 1fr; }
  .personal-library { padding-inline: 1rem; }
  .personal-library-empty { align-items: flex-start; flex-wrap: wrap; }
  .personal-library-empty button { width: 100%; margin: .5rem 0 0; text-align: left; }
  .catalog-toolbar { align-items: stretch; }
  .catalog-status-filters { overflow-x: auto; }
  .catalog-selectors { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .catalog-selectors label { display: grid; }
  .discovery-cards { grid-template-columns: 1fr; }
  .theme-toggle { right: 12px !important; bottom: 12px !important; }
  .chapter-reader .theme-toggle { right: 14px !important; bottom: 70px !important; }
  .upload-progress { padding: 16px; border-radius: 15px; }
  .upload-progress-heading { grid-template-columns: 38px minmax(0,1fr); }
  .upload-progress-heading > b { grid-column: 2; }
  .upload-progress-orbit { width: 38px; height: 38px; grid-row: span 2; }
  .upload-progress-metrics { grid-template-columns: 1fr 1fr; }
  .upload-progress-metrics > span:first-child { grid-column: 1 / -1; }
  .trash-section-heading { display: grid !important; }
  .trash-safety-note { justify-self: start; }
  .trash-card { grid-template-columns: 1fr; gap: 15px; }
  .trash-card footer { justify-content: stretch; }
  .trash-card footer button { flex: 1; justify-content: center; }
  .delete-impact-grid { grid-template-columns: repeat(2,1fr); }
  .chapter-list-tools { grid-template-columns: 1fr; }
  .chapter-order-button { width: 100%; }
  .chapter-admin-heading { align-items: stretch; flex-direction: column; }
  .chapter-admin-heading > div { display: flex; flex-wrap: wrap; }
}

/* Navegador de comunidades — acción principal del lector */
.community-navigator-trigger {
  width: min(360px, 34vw);
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  text-align: left;
  color: var(--insanos-ink);
  background: var(--insanos-panel-soft);
  border: 1px solid var(--insanos-line-strong);
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb,var(--insanos-overlay) 9%,transparent);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.community-navigator-trigger:hover {
  border-color: color-mix(in srgb,var(--insanos-accent) 52%,var(--insanos-line));
  background: var(--insanos-panel-hover);
  box-shadow: 0 8px 24px color-mix(in srgb,var(--insanos-overlay) 15%,transparent);
  transform: translateY(-1px);
}
.community-navigator-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--insanos-accent) 42%,transparent);
  outline-offset: 3px;
}
.community-trigger-avatar,.community-card-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--insanos-panel);
  background: linear-gradient(145deg,var(--insanos-accent),color-mix(in srgb,var(--insanos-accent) 56%,#7ce1d7));
  font-weight: 850;
}
.community-trigger-avatar { width: 36px; height: 36px; border-radius: 10px; }
.community-trigger-avatar svg { width: 17px; height: 17px; }
.community-trigger-copy { min-width: 0; display: grid; gap: 1px; }
.community-trigger-copy small {
  color: var(--insanos-accent);
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
}
.community-trigger-copy strong {
  overflow: hidden;
  color: var(--insanos-ink);
  font-size: .76rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-trigger-copy > span { color: var(--insanos-muted); font-size: .59rem; line-height: 1.2; }
.community-trigger-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--insanos-ink);
  font-size: .61rem;
  font-weight: 750;
}
.community-trigger-action svg { width: 13px; height: 13px; }

.community-navigator {
  width: min(760px,calc(100vw - 32px));
  max-height: min(820px,calc(100dvh - 40px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--insanos-ink);
  background: transparent;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 32px 90px color-mix(in srgb,var(--insanos-overlay) 54%,transparent);
}
.community-navigator::backdrop {
  background: color-mix(in srgb,var(--insanos-overlay) 68%,transparent);
  backdrop-filter: blur(7px);
}
.community-navigator[open] { animation: community-dialog-in .24s cubic-bezier(.2,.85,.3,1); }
@keyframes community-dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
}
.community-navigator-shell {
  max-height: min(820px,calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--insanos-panel);
  border: 1px solid var(--insanos-line);
  border-radius: inherit;
}
.community-navigator-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  padding: 28px 30px 20px;
  border-bottom: 1px solid var(--insanos-line);
}
.community-navigator-head h2 {
  margin: 8px 0 5px;
  color: var(--insanos-ink);
  font: 720 clamp(1.45rem,3vw,2rem)/1.08 var(--insanos-sans);
  letter-spacing: -.04em;
}
.community-navigator-head p { margin: 0; color: var(--insanos-muted); font-size: .72rem; line-height: 1.5; }
.community-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--insanos-muted);
  background: var(--insanos-panel-soft);
  border: 1px solid var(--insanos-line);
  border-radius: 10px;
  cursor: pointer;
}
.community-close:hover { color: var(--insanos-ink); background: var(--insanos-panel-hover); }
.community-close svg { width: 17px; }
.community-search {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 18px 30px 8px;
  padding: 0 13px;
  color: var(--insanos-muted);
  background: var(--insanos-field);
  border: 1px solid var(--insanos-line-strong);
  border-radius: 11px;
}
.community-search:focus-within {
  border-color: var(--insanos-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--insanos-accent) 16%,transparent);
}
.community-search svg { width: 16px; }
.community-search input {
  width: 100%;
  color: var(--insanos-field-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: .74rem;
}
.community-search kbd { color: var(--insanos-muted); background: var(--insanos-panel-soft); border: 1px solid var(--insanos-line); border-radius: 5px; padding: 3px 6px; font-size: .53rem; }
.community-groups { min-height: 170px; padding: 10px 30px 22px; overflow-y: auto; overscroll-behavior: contain; }
.community-group + .community-group { margin-top: 22px; }
.community-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.community-group h3 { margin: 0; color: var(--insanos-ink); font-size: .72rem; }
.community-group header span { color: var(--insanos-muted); font-size: .58rem; }
.community-group > div { display: grid; gap: 7px; }
.community-card {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px;
  text-align: left;
  color: var(--insanos-ink);
  background: transparent;
  border: 1px solid var(--insanos-line);
  border-radius: 13px;
  cursor: pointer;
  transition: background .16s ease,border-color .16s ease,transform .16s ease;
}
.community-card:not(:disabled):hover {
  background: var(--insanos-panel-hover);
  border-color: color-mix(in srgb,var(--insanos-accent) 46%,var(--insanos-line));
  transform: translateX(2px);
}
.community-card:focus-visible { outline: 3px solid color-mix(in srgb,var(--insanos-accent) 35%,transparent); outline-offset: 2px; }
.community-card.is-active { background: var(--insanos-accent-soft); border-color: color-mix(in srgb,var(--insanos-accent) 46%,var(--insanos-line)); cursor: default; }
.community-card.is-restricted { opacity: .62; cursor: not-allowed; }
.community-card.is-restricted .community-card-action { color: var(--insanos-danger); }

.reader-global-search {
  display: grid;
  grid-template-columns: minmax(240px,1fr) auto;
  gap: 9px;
  margin: 0 0 12px;
}
.reader-global-search label {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  color: var(--insanos-muted);
  background: var(--insanos-field);
  border: 1px solid var(--insanos-line-strong);
  border-radius: 10px;
}
.reader-global-search label:focus-within { border-color: var(--insanos-accent); box-shadow: 0 0 0 3px var(--insanos-accent-soft); }
.reader-global-search svg { width: 16px; }
.reader-global-search input { width: 100%; color: var(--insanos-field-ink); background: transparent; border: 0; outline: 0; }
.reader-global-search button { min-height: 42px; padding: 0 16px; color: var(--insanos-accent-ink); background: var(--insanos-accent-soft); border: 1px solid color-mix(in srgb,var(--insanos-accent) 38%,var(--insanos-line)); border-radius: 10px; font-weight: 750; cursor: pointer; }
.reader-search-result { margin: 0 0 10px; color: var(--insanos-muted); font-size: .65rem; }
@media (max-width: 600px) {
  .reader-global-search { grid-template-columns: 1fr; }
}
.community-card-avatar { width: 48px; height: 48px; border-radius: 12px; font-size: .88rem; }
.community-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-card-copy { min-width: 0; display: grid; gap: 3px; }
.community-card-copy strong { overflow: hidden; color: var(--insanos-ink); font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.community-card-copy small { overflow: hidden; color: var(--insanos-muted); font-size: .6rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.community-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.community-card-meta b {
  padding: 3px 6px;
  color: var(--insanos-muted);
  background: var(--insanos-panel-soft);
  border: 1px solid var(--insanos-line);
  border-radius: 999px;
  font-size: .49rem;
  letter-spacing: .05em;
}
.community-card-meta b.is-vip { color: var(--insanos-warning); background: var(--insanos-warning-soft); border-color: color-mix(in srgb,var(--insanos-warning) 45%,var(--insanos-line)); }
.community-card-meta em { color: var(--insanos-muted); font-size: .53rem; font-style: normal; }
.community-card-action { display: inline-flex; align-items: center; gap: 6px; color: var(--insanos-accent); font-size: .6rem; font-weight: 750; white-space: nowrap; }
.community-card-action svg { width: 14px; height: 14px; }
.community-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 10px 30px 0;
  padding: 11px 13px;
  color: var(--insanos-accent);
  background: var(--insanos-accent-soft);
  border: 1px solid color-mix(in srgb,var(--insanos-accent) 34%,var(--insanos-line));
  border-radius: 11px;
}
.community-status > :first-child { grid-row: span 2; align-self: center; }
.community-status strong { color: var(--insanos-ink); font-size: .67rem; }
.community-status small { color: var(--insanos-muted); font-size: .57rem; }
.community-status.is-error { color: var(--insanos-danger); background: var(--insanos-danger-soft); border-color: color-mix(in srgb,var(--insanos-danger) 38%,var(--insanos-line)); }
.community-status-spinner { width: 18px; height: 18px; border: 2px solid color-mix(in srgb,var(--insanos-accent) 25%,transparent); border-top-color: var(--insanos-accent); border-radius: 50%; animation: community-spin .7s linear infinite; }
@keyframes community-spin { to { transform: rotate(360deg); } }
.community-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--insanos-muted); text-align: center; }
.community-empty svg { width: 27px; height: 27px; margin-bottom: 5px; }
.community-empty strong { color: var(--insanos-ink); font-size: .76rem; }
.community-empty span { font-size: .61rem; }
.community-loading { display: grid; gap: 8px; }
.community-loading span { height: 70px; border-radius: 13px; background: linear-gradient(90deg,var(--insanos-panel-soft),var(--insanos-panel-hover),var(--insanos-panel-soft)); background-size: 200% 100%; animation: reader-shimmer 1.4s infinite; }
.community-navigator-foot {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 30px;
  color: var(--insanos-muted);
  background: var(--insanos-panel-soft);
  border-top: 1px solid var(--insanos-line);
  font-size: .58rem;
}
.community-navigator-foot svg { width: 15px; color: var(--insanos-success); }

@media (max-width: 900px) {
  .community-navigator-trigger { width: 100%; }
}
@media (max-width: 600px) {
  .community-navigator-trigger { min-height: 54px; grid-template-columns: 38px minmax(0,1fr) auto; }
  .community-trigger-avatar { width: 38px; height: 38px; }
  .community-trigger-copy strong { font-size: .73rem; }
  .community-navigator {
    width: 100%;
    max-width: none;
    max-height: min(88dvh,780px);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .community-navigator[open] { animation-name: community-sheet-in; }
  @keyframes community-sheet-in { from { opacity: 0; transform: translateY(100%); } }
  .community-navigator-shell { max-height: min(88dvh,780px); border-width: 1px 0 0; }
  .community-navigator-head { padding: 23px 18px 16px; }
  .community-navigator-head::before { content: ""; position: absolute; top: 8px; left: calc(50% - 20px); width: 40px; height: 4px; border-radius: 99px; background: var(--insanos-line-strong); }
  .community-navigator-head p { max-width: 270px; }
  .community-search { margin: 14px 18px 7px; }
  .community-status { margin: 8px 18px 0; }
  .community-groups { padding: 8px 18px 18px; }
  .community-group > header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .community-card { grid-template-columns: 44px minmax(0,1fr); padding: 11px; }
  .community-card-avatar { width: 44px; height: 44px; }
  .community-card-action { grid-column: 2; justify-self: start; }
  .community-navigator-foot { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .community-navigator[open],.community-status-spinner { animation-duration: .01ms !important; }
}

/* Comunidades externas: asociación visible, permisos mínimos y salida siempre accesible. */
.community-card.is-external {
  border-color: color-mix(in srgb,var(--insanos-accent) 32%,var(--insanos-line));
  background: color-mix(in srgb,var(--insanos-accent-soft) 38%,var(--insanos-panel));
}
.community-card.is-external .community-card-avatar {
  color: var(--insanos-on-accent);
  background: var(--insanos-accent);
}
.community-card-meta b.is-external { color: var(--insanos-accent-ink); background: var(--insanos-accent-soft); border-color: color-mix(in srgb,var(--insanos-accent) 38%,var(--insanos-line)); }
.adult-community-label {
  display: inline-flex;
  margin-left: 7px;
  padding: 3px 5px;
  vertical-align: middle;
  border: 1px solid color-mix(in srgb,var(--insanos-danger) 44%,var(--insanos-line));
  border-radius: 5px;
  color: var(--insanos-danger);
  background: var(--insanos-danger-soft);
  font: 800 .52rem/1 var(--insanos-sans);
  letter-spacing: .04em;
}
.external-consent-dialog,
.external-community-viewer { padding: 0; border: 0; color: var(--insanos-ink); background: transparent; }
.external-consent-dialog::backdrop,
.external-community-viewer::backdrop { background: color-mix(in srgb,var(--insanos-overlay) 88%,transparent); backdrop-filter: blur(7px); }
.external-consent-dialog { width: min(500px,calc(100vw - 28px)); border-radius: 18px; }
.external-consent-dialog form {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--insanos-line-strong);
  border-radius: 18px;
  background: var(--insanos-panel-raised);
  box-shadow: var(--insanos-shadow-raised);
}
.external-dialog-close { position: absolute; top: 14px; right: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--insanos-line); border-radius: 8px; color: var(--insanos-muted); background: var(--insanos-panel-soft); }
.external-dialog-close svg { width: 16px; }
.external-consent-icon { display: grid; width: 48px; height: 48px; margin-bottom: 24px; place-items: center; border: 1px solid color-mix(in srgb,var(--insanos-danger) 35%,var(--insanos-line)); border-radius: 12px; color: var(--insanos-danger); background: var(--insanos-danger-soft); }
.external-consent-dialog small { color: var(--insanos-danger); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.external-consent-dialog h2 { margin: 8px 0 10px; color: var(--insanos-ink); font-size: 1.8rem; letter-spacing: -.04em; }
.external-consent-dialog p { color: var(--insanos-muted); font-size: .82rem; line-height: 1.65; }
.external-age-check { display: flex; align-items: flex-start; gap: 11px; margin: 24px 0; padding: 15px; border: 1px solid var(--insanos-line); border-radius: 10px; color: var(--insanos-ink); background: var(--insanos-panel-soft); font-size: .75rem; line-height: 1.45; }
.external-age-check input { flex: 0 0 auto; margin-top: 2px; }
.external-consent-dialog form > div:last-child { display: flex; justify-content: flex-end; gap: 9px; }
.external-consent-dialog form > div:last-child button { min-height: 40px; padding: 0 15px; border: 1px solid var(--insanos-line); border-radius: 8px; color: var(--insanos-ink); background: var(--insanos-panel); }
.external-consent-dialog form > div:last-child .reader-primary-action { color: var(--insanos-on-accent); background: var(--insanos-accent); border-color: var(--insanos-accent); }
.external-community-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; }
.external-viewer-shell { display: grid; width: 100%; height: 100%; grid-template-rows: auto minmax(0,1fr) auto; color: var(--insanos-ink); background: var(--insanos-canvas); }
.external-viewer-bar { display: grid; min-height: 64px; grid-template-columns: minmax(200px,1fr) auto minmax(200px,1fr); align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--insanos-line); background: var(--insanos-panel); box-shadow: 0 5px 20px color-mix(in srgb,var(--insanos-overlay) 10%,transparent); }
.external-viewer-bar > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.external-viewer-mark { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--insanos-on-accent); background: var(--insanos-accent); }
.external-viewer-mark svg { width: 17px; }
.external-viewer-bar small { display: block; color: var(--insanos-accent); font-size: .52rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.external-viewer-bar strong { display: block; overflow: hidden; color: var(--insanos-ink); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.external-viewer-bar p { display: flex; align-items: center; gap: 7px; color: var(--insanos-muted); font-size: .62rem; }
.external-viewer-bar p span { width: 7px; height: 7px; border-radius: 50%; background: var(--insanos-positive); box-shadow: 0 0 0 4px var(--insanos-positive-soft); }
.external-viewer-bar nav { display: flex; justify-self: end; gap: 8px; }
.external-viewer-bar nav button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--insanos-line); border-radius: 8px; color: var(--insanos-ink); background: var(--insanos-panel-soft); font-size: .65rem; font-weight: 700; }
.external-viewer-bar nav svg { width: 15px; }
.external-viewer-frame-wrap { position: relative; min-height: 0; overflow: hidden; background: #0d1016; }
.external-viewer-frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.external-viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--insanos-ink); background: var(--insanos-canvas); text-align: center; transition: opacity .25s ease,visibility .25s ease; }
.external-viewer-loading strong { font-size: .9rem; }
.external-viewer-loading small { max-width: 440px; color: var(--insanos-muted); font-size: .67rem; line-height: 1.5; }
.external-viewer-loading.is-loaded { visibility: hidden; opacity: 0; pointer-events: none; }
.external-viewer-shell > footer { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 6px 12px; color: var(--insanos-muted); background: var(--insanos-panel); border-top: 1px solid var(--insanos-line); font-size: .56rem; }
.external-viewer-shell > footer svg { width: 14px; color: var(--insanos-positive); }
.external-community-admin-dialog { width: min(660px,calc(100vw - 28px)); }
.external-community-admin-dialog .dialog-intro { margin: -4px 0 18px; color: var(--insanos-muted); font-size: .72rem; line-height: 1.55; }
.external-community-admin-dialog input[type="color"] { min-height: 43px; padding: 5px; }
.external-adult-admin { margin-top: 4px; padding: 12px; border: 1px solid var(--insanos-line); border-radius: 8px; background: var(--insanos-panel-soft); }
.studio-scan-card.is-external-community { border-color: color-mix(in srgb,var(--insanos-accent) 34%,var(--insanos-line)); }
.scan-card-actions { display: flex; gap: 8px; }
.scan-card-actions button { flex: 1; }
@media (max-width: 760px) {
  .external-viewer-bar { grid-template-columns: minmax(0,1fr) auto; min-height: 58px; padding: 8px 10px; }
  .external-viewer-bar > p { display: none; }
  .external-viewer-bar nav span { display: none; }
  .external-viewer-bar nav button { width: 38px; padding: 0; justify-content: center; }
  .external-viewer-shell > footer { text-align: center; }
  .external-consent-dialog form { padding: 28px 22px 22px; }
}
body.session-resuming .auth-panel { opacity: .45; pointer-events: none; }

/* Controles funcionales: la guía fija 14 px como piso de lectura. */
button, input, select, textarea { font-size: max(.875rem, 1em); }

/* Campos: neutraliza el rectángulo oscuro nativo/autocompletado dentro de shells. */
.input-shell,.reader-search,.reader-global-search label,.chapter-search,.community-search {
  overflow: hidden;
  background-clip: padding-box;
}
html[data-theme] .input-shell input,html[data-theme] .reader-search input,html[data-theme] .reader-global-search input,html[data-theme] .chapter-search input,html[data-theme] .community-search input {
  appearance: none;
  -webkit-appearance: none;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: var(--insanos-field-ink);
  caret-color: var(--insanos-accent);
}
.input-shell input:-webkit-autofill,.input-shell input:-webkit-autofill:hover,.input-shell input:-webkit-autofill:focus,
.reader-global-search input:-webkit-autofill,.chapter-search input:-webkit-autofill,.community-search input:-webkit-autofill {
  -webkit-text-fill-color: var(--insanos-field-ink) !important;
  caret-color: var(--insanos-accent) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--insanos-field) inset !important;
  box-shadow: 0 0 0 1000px var(--insanos-field) inset !important;
}
.reader-search input:-webkit-autofill,.reader-search input:-webkit-autofill:hover,.reader-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--insanos-field-ink) !important;
  caret-color: var(--insanos-accent) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--insanos-panel-soft) inset !important;
  box-shadow: 0 0 0 1000px var(--insanos-panel-soft) inset !important;
}

/* Exportación de capítulos: selección legible y progreso sin bloquear el panel. */
.chapter-export-check { flex: 0 0 auto; display: grid; place-items: center; width: 30px; min-height: 30px; cursor: pointer; }
.chapter-export-check input { width: 17px; height: 17px; accent-color: var(--insanos-accent); }
.chapter-admin-heading button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chapter-admin-heading button svg { width: 15px; height: 15px; }
.chapter-export-dialog { width: min(590px,calc(100vw - 28px)); }
.export-progress { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--insanos-line); border-radius: 12px; background: var(--insanos-panel-soft); }
.export-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.export-progress > div b { color: var(--insanos-accent); font-variant-numeric: tabular-nums; }
.export-progress > span { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--insanos-line); }
.export-progress > span i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--insanos-accent),color-mix(in srgb,var(--insanos-accent) 55%,#aee9ff)); transition: width .18s linear; }
.export-progress small { color: var(--insanos-muted); }

/* Comunidad de catálogo API: aislada del visor iframe y sin acciones de streaming. */
.api-community-viewer { width: min(1180px,calc(100vw - 28px)); height: min(880px,calc(100dvh - 28px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--insanos-line); border-radius: 18px; color: var(--insanos-ink); background: var(--insanos-canvas); }
.api-community-viewer::backdrop { background: var(--insanos-overlay); backdrop-filter: blur(7px); }
.api-community-viewer > section { display: grid; grid-template-rows: auto auto auto 1fr auto auto; height: 100%; }
.api-community-viewer header,.api-community-viewer footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--insanos-line); background: var(--insanos-panel); }
.api-community-viewer header small { color: var(--insanos-accent); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.api-community-viewer header h2 { margin-top: 3px; font: 700 1.35rem var(--insanos-serif); }
.api-community-viewer header button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--insanos-line); border-radius: 10px; color: var(--insanos-muted); background: transparent; cursor: pointer; }
.api-community-viewer header svg { width: 17px; }
.api-community-viewer nav { display: flex; gap: 7px; padding: 14px 20px 4px; }
.api-community-viewer nav button { padding: 8px 14px; border: 1px solid var(--insanos-line); border-radius: 999px; color: var(--insanos-muted); background: var(--insanos-panel); cursor: pointer; }
.api-community-viewer nav button.is-active { border-color: var(--insanos-accent); color: var(--insanos-accent); background: var(--insanos-accent-soft); }
#api-community-status { padding: 8px 20px; }
.api-community-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 15px; padding: 8px 20px 22px; overflow-y: auto; }
.api-title-card { min-width: 0; padding-bottom: 10px; overflow: hidden; border: 1px solid var(--insanos-line); border-radius: 13px; background: var(--insanos-panel); }
.api-title-card > div { aspect-ratio: 2/3; overflow: hidden; background: var(--insanos-panel-soft); }
.api-title-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.api-title-card > div > span { display: grid; place-items: center; height: 100%; color: var(--insanos-faint); }
.api-title-card > div svg { width: 28px; }
.api-title-card small,.api-title-card h3,.api-title-card p { display: block; margin: 8px 10px 0; }
.api-title-card small { color: var(--insanos-accent); font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.api-title-card h3 { font-size: .78rem; line-height: 1.35; }
.api-title-card p { color: var(--insanos-muted); font-size: .62rem; }
.api-community-loading { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 180px; color: var(--insanos-muted); }
.api-community-viewer footer { border-top: 1px solid var(--insanos-line); border-bottom: 0; }
.api-community-viewer footer button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--insanos-line); border-radius: 9px; color: var(--insanos-ink); background: var(--insanos-panel-soft); cursor: pointer; }
.api-community-viewer footer button:disabled { opacity: .42; cursor: default; }
.api-community-viewer footer svg { width: 15px; }
.api-community-viewer aside { display: flex; align-items: center; gap: 8px; padding: 10px 20px; color: var(--insanos-muted); background: var(--insanos-panel-soft); font-size: .62rem; }
.api-community-viewer aside svg { flex: 0 0 auto; width: 15px; color: var(--insanos-positive); }
@media (max-width: 560px) { .api-community-viewer { width: 100vw; height: 100dvh; border-radius: 0; } .api-community-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-inline: 12px; } }
html[data-theme] .input-shell input:focus,html[data-theme] .reader-search input:focus,html[data-theme] .reader-global-search input:focus,html[data-theme] .chapter-search input:focus,html[data-theme] .community-search input:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

@media (pointer: coarse) {
  button, select, input[type="button"], input[type="submit"], a.reader-icon-button { min-height: 44px; }
}

/* ============================================================
   ANUNCIO EDITORIAL PARA DISCORD
   ============================================================ */

.discord-announcement-dialog { width: min(680px, calc(100vw - 28px)); }
.discord-announcement-dialog form { display: grid; gap: 18px; }
.announcement-summary { display: flex; min-width: 0; padding: 15px; align-items: center; gap: 13px; border: 1px solid color-mix(in srgb,var(--insanos-accent) 28%,var(--insanos-line)); border-radius: var(--insanos-radius-md); background: linear-gradient(125deg,color-mix(in srgb,var(--insanos-accent-soft) 76%,var(--insanos-panel)),var(--insanos-panel)); }
.announcement-summary > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--insanos-on-accent); background: linear-gradient(145deg,var(--insanos-accent),#8b5cf6); box-shadow: 0 9px 24px color-mix(in srgb,var(--insanos-accent) 28%,transparent); }
.announcement-summary svg { width: 20px; }
.announcement-summary div { min-width: 0; }
.announcement-summary strong,.announcement-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-summary strong { color: var(--insanos-ink); font-size: .9rem; }
.announcement-summary small { margin-top: 4px; color: var(--insanos-muted); font-size: .68rem; }
.announcement-mention code { padding: 2px 6px; border: 1px solid var(--insanos-line); border-radius: 5px; color: var(--insanos-accent-ink); background: var(--insanos-accent-soft); }
.announcement-preview-shell { overflow: hidden; border: 1px solid var(--insanos-line); border-radius: var(--insanos-radius-md); background: #111827; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.announcement-preview-shell header { display: flex; min-height: 42px; padding: 0 14px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #2a3648; color: #dce6f5; background: #182232; }
.announcement-preview-shell header span { font-size: .68rem; font-weight: 760; }
.announcement-preview-shell header small { color: #8da8ff; font-variant-numeric: tabular-nums; }
.announcement-preview-shell pre { min-height: 190px; max-height: 34vh; margin: 0; padding: 18px; overflow: auto; color: #edf3ff; background: transparent; font: 500 .78rem/1.65 var(--insanos-sans); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.announcement-preview-shell pre:focus-visible { outline: 3px solid #8da8ff; outline-offset: -3px; }
.discord-announcement-dialog .modal-actions .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
.discord-announcement-dialog .modal-actions svg { width: 16px; }
.discord-announcement-dialog .modal-actions [role="status"] { min-width: 0; margin-right: auto; color: var(--insanos-muted); font-size: .68rem; }
.admin-page .discord-announcement-dialog .modal-actions { bottom: 8px; margin-bottom: 0 !important; }

html[data-theme] .brand-mark,
html[data-theme] .wordmark-icon { color: inherit !important; background: transparent !important; box-shadow: none !important; }

@media (max-width: 620px) {
  .discord-announcement-dialog .form-grid.two-columns { grid-template-columns: 1fr; }
  .announcement-preview-shell pre { min-height: 190px; font-size: .72rem; }
}