/* ============================================================
   PAPER-CRAFT — Sistema visual Beeni v1.0
   Sprint 1 (2026-05-20). Reemplaza progresivamente beeni-v12.css.
   Resuelve C13 del Q v14 (tema visual real, conmutable via
   users.visual_theme). NO sobrescribe beeni-v12.css.
   ============================================================ */

:root {
  /* === PALETA === */
  /* Cielos */
  --sky-top: #A8DEF5;
  --sky-mid: #8FCEEC;
  --sky-deep: #5BA3D9;

  /* Noche (Sala de Oracion) */
  --night-1: #1A1A2E;
  --night-2: #252544;
  --night-glow: #3D3A6B;

  /* Naturaleza */
  --hill-green: #7CB342;
  --hill-green-d: #689F38;
  --hill-light: #9CCB78;
  --earth: #A1887F;
  --earth-d: #8D6E63;

  /* Lana de oveja */
  --cream: #FDFAF5;
  --wool: #F5F0E8;
  --wool-shadow: #E4DBC9;
  --wool-dark: #D9CFB8;

  /* Acentos */
  --gold: #FFD54F;
  --gold-d: #F6B73C;
  --coral: #FF7043;
  --coral-d: #E8552B;
  --teal: #26A69A;
  --teal-d: #1D8077;

  /* Tinta */
  --ink: #3E342E;
  --ink-soft: #6E5F54;

  /* Secciones */
  --s-ruta: #4CAF50;
  --s-ruta-d: #3D8B40;
  --s-libros: #42A5F5;
  --s-biblia: #A1887F;
  --s-devo: #FFB74D;
  --s-oracion: #7E57C2;
  --s-oracion-d: #5E35B1;
  --s-pastoral: #26A69A;

  /* === SOMBRAS DE PAPEL (2 capas, regla del Q 4.3) === */
  --paper-sm: 0 2px 0 rgba(62,52,46,.16), 0 4px 9px rgba(62,52,46,.10);
  --paper-md: 0 4px 0 rgba(62,52,46,.18), 0 9px 20px rgba(62,52,46,.13);
  --paper-lg: 0 7px 0 rgba(62,52,46,.20), 0 18px 36px rgba(62,52,46,.18);

  /* === RADII === */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* === LAYOUT === */
  --nav-h: 68px;
  --hud-h: 56px;
  --bottom-nav-h: 72px;
}

/* === RESET MINIMO === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === BASE ===
   Fuentes a cargar desde la vista consumidora:
   Fredoka (titulos), Nunito (UI), Lora (versiculos), Caveat (manuscrita)
*/
body {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === TIPOGRAFIA — utility classes === */
.t-fredoka { font-family: "Fredoka", system-ui, sans-serif; }
.t-nunito  { font-family: "Nunito", system-ui, sans-serif; }
.t-lora    { font-family: "Lora", Georgia, serif; }
.t-lora-i  { font-family: "Lora", Georgia, serif; font-style: italic; }
.t-caveat  { font-family: "Caveat", cursive; }

.t-h1     { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; color: var(--ink); }
.t-h2     { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: clamp(22px, 4vw, 30px); line-height: 1.2;  color: var(--ink); }
.t-h3     { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--ink); }
.t-body   { font-size: 16px; line-height: 1.55; color: var(--ink); }
.t-small  { font-size: 13px; color: var(--ink-soft); }
.t-label  { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); }
.t-verse  { font-family: "Lora", serif; font-style: italic; font-size: 18px; line-height: 1.6; color: var(--ink); }
.t-rebee  { font-family: "Caveat", cursive; font-weight: 700; font-size: 22px; color: var(--ink); }

/* === SOMBRAS — utility classes === */
.shadow-paper-sm { box-shadow: var(--paper-sm); }
.shadow-paper-md { box-shadow: var(--paper-md); }
.shadow-paper-lg { box-shadow: var(--paper-lg); }

/* === FONDOS UTILITARIOS === */
.bg-cream      { background: var(--cream); }
.bg-wool       { background: var(--wool); }
.bg-sky        { background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 60%, var(--sky-deep)); }
.bg-sky-soft   { background: linear-gradient(180deg, var(--sky-top), var(--sky-mid)); }
.bg-night      { background: linear-gradient(180deg, var(--night-1), var(--night-2)); color: var(--cream); }
.bg-paper-card { background: #FFFFFF; border: 1px solid var(--wool-shadow); }

/* === TEXTO UTILITARIO === */
.text-ink   { color: var(--ink); }
.text-soft  { color: var(--ink-soft); }
.text-cream { color: var(--cream); }
.text-gold  { color: var(--gold-d); }
.text-coral { color: var(--coral-d); }
.text-teal  { color: var(--teal-d); }

/* === TEXTURA DE PAPEL ===
   Aplicar a body o contenedor con clase .pc-noise
*/
.pc-noise { position: relative; }
.pc-noise::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === ANIMACIONES FUNDAMENTALES === */
@keyframes pc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pc-pulse-ring {
  0%   { transform: scale(.95); opacity: .8; }
  100% { transform: scale(1.4);  opacity: 0; }
}
@keyframes pc-spin {
  to { transform: rotate(360deg); }
}
@keyframes pc-glow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 12px var(--gold)); }
  50%      { filter: drop-shadow(0 0 10px var(--gold-d)) drop-shadow(0 0 20px var(--gold)); }
}

.pc-anim-float { animation: pc-float 3.5s ease-in-out infinite; }
.pc-anim-glow  { animation: pc-glow 2.5s ease-in-out infinite; }

/* === HELPERS DE LAYOUT === */
.pc-stack    { display: flex; flex-direction: column; }
.pc-row      { display: flex; flex-direction: row; }
.pc-center   { display: flex; align-items: center; justify-content: center; }
.pc-grow     { flex: 1 1 0; }

/* fin paper-craft.css v1.0 */