/* ][Liah-PLex][ — fondo y superficies compartidas de todas las pantallas.
   Se referencia con <link> para que no se desincronice copia por copia. */

body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- Color de acento del fondo: cambia según el fondo elegido en Configuración de la cuenta ---------- */
/* html[data-bg="..."] lo pone theme.js al cargar, leyendo localStorage 'liahplex-bg'. Default: dorado. */

:root { --accent-rgb: 229,160,13; }
html[data-bg="blue"]   { --accent-rgb: 59,130,246; }
html[data-bg="carbon"] { --accent-rgb: 200,200,205; }
html[data-bg="amber"]  { --accent-rgb: 230,90,20; }

/* ---------- Fondo de la app: claro y oscuro, cada uno con su propio patrón, coloreado con --accent-rgb ---------- */

/* claro: marfil cálido + spotlight arriba (más presencia) + resplandores en las esquinas + viñeta */
.bg-app {
  background-color: #faf6ec;
  background-image:
    radial-gradient(ellipse 65% 40% at 50% -12%, rgba(var(--accent-rgb),0.30), transparent 62%),
    radial-gradient(ellipse 45% 30% at 100% 108%, rgba(var(--accent-rgb),0.14), transparent 60%),
    radial-gradient(ellipse 40% 28% at 0% 108%, rgba(var(--accent-rgb),0.10), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(20,15,0,0.05) 100%);
}

/* oscuro: negro real + spotlight tipo reflector + líneas de carrete + grano de película */
html.dark .bg-app {
  background-color: #000000;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(var(--accent-rgb),0.22), transparent 60%),
    radial-gradient(ellipse 55% 35% at 100% 108%, rgba(var(--accent-rgb),0.10), transparent 60%),
    radial-gradient(ellipse 45% 30% at 0% 108%, rgba(var(--accent-rgb),0.06), transparent 60%);
}

/* overlay de puntos, más presentes en tema claro */
.paper-grid {
  display: block;
  background-image: radial-gradient(circle, rgba(var(--accent-rgb),0.22) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}
html.dark .paper-grid { display: none; }

/* overlay de líneas verticales, tema claro (misma familia visual que el carrete oscuro) */
.light-strip {
  display: block;
  background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.12) 0 1.5px, transparent 1.5px 56px);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
html.dark .light-strip { display: none; }

/* overlay de líneas tipo carrete, solo tema oscuro */
.film-strip {
  display: none;
  background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.08) 0 1px, transparent 1px 48px);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
html.dark .film-strip { display: block; }

/* overlay de grano, solo tema oscuro (siempre neutro, es textura, no color) */
.film-grain {
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}
html.dark .film-grain { display: block; }

/* ---------- Superficies ---------- */

.panel { background-color: #ffffff; border-color: rgb(226 232 240); }
html.dark .panel { background-color: #141414; border-color: rgba(var(--accent-rgb),0.15); }

.skeleton {
  background: linear-gradient(90deg, rgba(148,163,184,.25) 25%, rgba(148,163,184,.4) 37%, rgba(148,163,184,.25) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Shell de app con dos columnas de scroll independiente ---------- */
/* body con class "app-shell": altura fija a la ventana, sin scroll propio.
   El <aside> (sidebar) y el <main> llevan su propio overflow-y-auto. */
.app-shell { height: 100vh; overflow: hidden; }
.app-sidebar-scroll { overflow-y: auto; }
.app-main-scroll { overflow-y: auto; scroll-behavior: smooth; }