/* ============ TOKENS (mismos que portada/capítulo 2, para que se sienta del mismo libro) ============ */
:root{
  color-scheme: light;

  --paper:#f3e9d2;
  --paper-dark:#e9dcbd;
  --ink:#2b211c;
  --burgundy:#7a1f2b;
  --burgundy-fill:#7a1f2b;
  --burgundy-light:#a5384a;
  --pink:#e75480;
  --teal:#1f6f78;
  --teal-deep:#14535c;
  --gold:#d6a419;
  --gold-deep:#7a5a08;
  --warn:#a5384a;
  --shadow: rgba(43,33,28,.25);

  --amber-hi:#f7e6bd;
  --amber:#eecd92;
  --amber-deep:#e0b478;

  /* superficies (cartas, formularios, inputs) y líneas divisorias sutiles */
  --surface:#fff8ea;
  --surface-alt:#fffdf6;
  --surface-strong:#ffffff;
  --line: rgba(0,0,0,.13);
  --line-strong: rgba(0,0,0,.2);
  --on-accent:#fff8ea;
  --btn-ink:#2b211c;

  --notita-cifuentes-bg:#e7f3f2;
  --notita-jimena-bg:#fce9ef;
  --envelope-g1:#fff3d6;
  --envelope-g2:#e9d4a3;
  --flap-g1:#f3e0ab;
  --flap-g2:#e2c988;
  --tape-bg: rgba(255,255,255,.53);

  --halo:0 1px 0 rgba(255,246,220,.85), 0 0 14px rgba(255,240,200,.5);

  --font-heading: 'Bungee', cursive;
  --font-body: 'Quicksand', sans-serif;
  --font-letter: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
}

/* ============ MODO OSCURO ============
   Pensado para los ojos, no solo para verse "bonito de noche": nada de negro puro ni blanco
   puro (el contraste extremo cansa más en un cuarto oscuro), tonos cálidos en vez de fríos
   (menos luz azul) y los mismos nombres de token de arriba, así el resto del CSS no cambia
   una sola línea — todo lo que ya usa var(--algo) hereda el tema solo. Se activa poniendo
   data-theme="dark" en <html> (ver /importantes/js/theme.js). */
:root[data-theme="dark"]{
  color-scheme: dark;

  --paper:#201a13;
  --paper-dark:#171209;
  --ink:#e6dac6;
  --burgundy:#e0929c;
  --burgundy-fill:#b3384a;
  --burgundy-light:#eeb3ba;
  --pink:#f0abc4;
  --teal:#7fd6cb;
  --teal-deep:#5fb0a6;
  --gold:#d6a419;
  --gold-deep:#caa03e;
  --warn:#ef8ea0;
  --shadow: rgba(0,0,0,.55);

  --amber-hi:#241d15;
  --amber:#1c1712;
  --amber-deep:#120e0a;

  --surface:#2a2118;
  --surface-alt:#302518;
  --surface-strong:#382c1c;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.22);
  --on-accent:#f6ead9;

  --notita-cifuentes-bg:#1c2b29;
  --notita-jimena-bg:#2b1c22;
  --envelope-g1:#362b1b;
  --envelope-g2:#251d12;
  --flap-g1:#302614;
  --flap-g2:#21190e;
  --tape-bg: rgba(255,255,255,.1);
  --halo:0 1px 0 rgba(0,0,0,.4), 0 0 16px rgba(180,120,50,.3);
}

@media (inverted-colors: inverted){ html{ filter:invert(1) hue-rotate(180deg); } }
*{ box-sizing:border-box; }

body{
  margin:0;
  background-color:var(--amber-deep);
  background-image:linear-gradient(180deg, var(--amber-hi) 0%, var(--amber) 38%, var(--amber-deep) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
  transition:background-color .25s ease, color .25s ease;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; }
:focus-visible{ outline:3px dashed var(--teal); outline-offset:3px; }
button{ font:inherit; }

#ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 130% 110% at 50% 45%, transparent 52%, rgba(150,75,40,.12) 78%, rgba(150,75,40,.22) 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, #4a2a0810 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #4a2a080a 2px 3px);
}

/* ============ TOGGLE modo oscuro ============ */
.imp-theme-toggle{
  position:fixed; top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right));
  z-index:21000; width:44px; height:44px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1;
  background:var(--surface); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--shadow);
  color:var(--ink); cursor:pointer; transition:transform .15s, box-shadow .15s, background .2s, border-color .2s;
}
.imp-theme-toggle:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--shadow); }
.imp-theme-toggle:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--shadow); }
@media (max-width:480px){
  .imp-theme-toggle{ width:40px; height:40px; font-size:17px; top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right)); }
}

/* ============ HERO ============ */
.imp-hero{ position:relative; z-index:1; max-width:640px; margin:0 auto; padding:64px 24px 20px; text-align:center; }
.imp-hero-kicker{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--teal-deep); margin:0 0 10px; }
.imp-hero-title{ font-family:var(--font-heading); font-size:clamp(1.8rem,6vw,2.6rem); color:var(--burgundy); text-shadow:2px 2px 0 var(--gold); margin:0 0 16px; }
.imp-hero-sub{ font-family:var(--font-letter); font-size:1.35rem; color:var(--ink); line-height:1.45; margin:0; }

.imp-section{ position:relative; z-index:1; max-width:720px; margin:0 auto; padding:56px 20px; }
.imp-section-last{ padding-bottom:80px; }
.section-title{ text-align:center; margin:0 auto 6px; max-width:1100px; }
.title-tag{
  font-family:var(--font-heading); font-size:clamp(1.3rem,4vw,1.9rem); color:var(--burgundy);
  background:linear-gradient(transparent 60%, var(--gold) 60%); padding:0 6px;
}
.section-kicker{ text-align:center; font-family:var(--font-letter); font-size:1.25rem; color:var(--teal-deep); text-shadow:var(--halo); margin:6px auto 32px; max-width:560px; }

/* ============ CARTA (mismo prototipo de portada/capítulo 2) ============ */
.letter-wrap{ max-width:560px; margin:24px auto 0; position:relative; }
.envelope{
  position:relative; width:100%; height:230px; cursor:pointer; perspective:900px;
  background:linear-gradient(160deg,var(--envelope-g1),var(--envelope-g2));
  border:2px solid var(--ink); box-shadow:6px 6px 0 var(--shadow);
  overflow:hidden; z-index:5; transform-origin:center;
  transition:transform .55s cubic-bezier(.5,-.2,.9,.4), opacity .5s ease .05s;
}
.envelope::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(135deg, transparent 49.4%, rgba(43,33,28,.1) 50%, transparent 50.6%),
    linear-gradient(45deg, transparent 49.4%, rgba(43,33,28,.1) 50%, transparent 50.6%);
}
.envelope-letter-peek{
  position:absolute; left:9%; right:9%; bottom:10px; height:72%;
  background:var(--surface-alt); border:2px solid var(--ink); border-radius:2px 2px 0 0;
  display:flex; align-items:flex-start; justify-content:center; padding-top:16px;
  transform:translateY(88%); z-index:2;
  transition:transform .6s cubic-bezier(.34,1.3,.4,1) .12s;
}
.envelope-letter-peek-text{ font-family:var(--font-letter); font-size:1.15rem; color:var(--burgundy); opacity:.8; }
.envelope-flap{
  position:absolute; top:0; left:0; width:100%; height:64%;
  background:linear-gradient(160deg,var(--flap-g1),var(--flap-g2));
  clip-path:polygon(0 0, 100% 0, 50% 90%);
  border-bottom:2px solid var(--ink);
  transform-origin:top center; transition:transform .7s cubic-bezier(.6,.05,.4,1);
  z-index:3;
}
.envelope-seal{
  position:absolute; top:36%; left:50%; z-index:4;
  transform:translate(-50%,-50%) rotate(-6deg); font-size:2.3rem;
  filter:drop-shadow(2px 3px 0 rgba(43,33,28,.3));
  transition:opacity .35s ease, transform .35s ease;
}
.envelope-hint{
  position:absolute; left:0; right:0; bottom:-28px; z-index:2; margin:0;
  text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--teal);
  animation:envelope-bounce 1.6s ease-in-out infinite;
}
@keyframes envelope-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.envelope.opening .envelope-flap{ transform:rotateX(-180deg); }
.envelope.opening .envelope-seal{ opacity:0; transform:translate(-50%,-85%) rotate(12deg) scale(.6); }
.envelope.opening .envelope-letter-peek{ transform:translateY(-22%); }
.envelope.tossed{ transform:translate(-135%, 55px) rotate(-38deg); opacity:0; }
.envelope.opened{ visibility:hidden; pointer-events:none; position:absolute; top:0; left:0; }

.letter{
  max-width:560px; margin:0 auto; background:var(--surface-alt); border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--shadow); padding:40px 36px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  max-height:230px;
  transition:opacity .5s ease .05s, transform .5s cubic-bezier(.34,1.2,.4,1) .05s, max-height .6s cubic-bezier(.34,1.2,.4,1) .05s;
}
.letter.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; max-height:2400px; }
.letter-to{ font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); margin:0 0 18px; position:relative; z-index:1; }
.letter-body{ font-family:var(--font-letter); font-size:1.55rem; line-height:1.5; color:var(--ink); position:relative; z-index:1; white-space:pre-wrap; word-break:break-word; }
.letter-sign{ text-align:right; font-family:var(--font-letter); font-size:1.6rem; color:var(--burgundy); margin-top:10px; position:relative; z-index:1; }
.letter-stain{ position:absolute; z-index:0; pointer-events:none; }
.letter-stain.ring{ border-radius:50%; background:radial-gradient(circle, transparent 53%, rgba(107,79,38,.24) 57%, rgba(107,79,38,.13) 64%, transparent 68%); }
.letter-stain.blob{ border-radius:44% 56% 62% 38% / 50% 44% 56% 50%; background:radial-gradient(circle at 38% 36%, rgba(107,79,38,.13), transparent 70%); }
.letter-stain.drop{ width:24px; height:30px; border-radius:50% 50% 50% 4px; transform:rotate(-30deg); background:radial-gradient(circle at 35% 30%, rgba(90,110,120,.24), rgba(90,110,120,.09) 60%, transparent 76%); }
@media (max-width:480px){ .letter-body{ font-size:1.35rem; } }

/* ============ REGLAS ============ */
.reglas-list{ list-style:none; margin:0; padding:0; max-width:560px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.regla-item{
  display:flex; align-items:center; gap:16px; overflow:hidden;
  background:var(--surface); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--shadow);
  padding:16px 20px;
}
.regla-num{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  background:var(--burgundy-fill); color:var(--on-accent);
}
.regla-text{ font-size:1rem; line-height:1.4; min-width:0; overflow-wrap:break-word; }

/* ============ NOTITAS ============ */
.notitas-form{
  max-width:520px; margin:0 auto 34px; background:var(--surface); border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--shadow); padding:22px 22px 20px;
}
.notitas-who{ display:flex; gap:8px; margin-bottom:12px; }
.notitas-who-btn{
  flex:1; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  padding:9px 6px; background:var(--paper); border:2px solid var(--ink); cursor:pointer; color:var(--ink);
  transition:background .15s, color .15s;
}
.notitas-who-btn.is-active{ background:var(--burgundy-fill); color:var(--on-accent); border-color:var(--burgundy-fill); }
.notitas-textarea{
  width:100%; font-family:var(--font-letter); font-size:1.25rem; color:var(--ink);
  background:var(--surface-alt); border:1px solid var(--line); padding:10px 12px; resize:vertical; margin-bottom:12px;
}
.notitas-submit{
  display:block; margin:0 auto; font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.05em; padding:11px 22px; background:var(--gold); color:var(--btn-ink);
  border:2px solid var(--ink); box-shadow:3px 3px 0 var(--shadow); cursor:pointer;
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.notitas-submit:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--shadow); }
.notitas-submit:disabled{ opacity:.5; cursor:not-allowed; }
.notitas-status{ text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--teal-deep); min-height:14px; margin:10px 0 0; }

.notitas-board{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.notitas-empty{ font-family:var(--font-letter); font-size:1.2rem; color:var(--teal-deep); text-align:center; width:100%; }
.notita{
  width:190px; min-height:130px; padding:18px 16px 14px; position:relative;
  font-family:var(--font-letter); font-size:1.15rem; line-height:1.35; color:var(--ink);
  box-shadow:3px 4px 6px rgba(43,33,28,.22);
  animation:notita-drop .4s cubic-bezier(.34,1.3,.4,1);
}
@keyframes notita-drop{ from{ opacity:0; transform:translateY(-10px) scale(.9); } to{ opacity:1; transform:translateY(0) scale(1); } }
.notita::before{
  content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:26px; height:14px; background:var(--tape-bg); border:1px solid var(--line); box-shadow:0 1px 2px var(--line);
}
.notita-text{ margin:0 0 12px; white-space:pre-wrap; word-break:break-word; }
.notita-meta{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.notita.who-cifuentes{ background:var(--notita-cifuentes-bg); rotate:-2deg; }
.notita.who-cifuentes .notita-meta{ color:var(--teal-deep); }
.notita.who-jimena{ background:var(--notita-jimena-bg); rotate:2deg; }
.notita.who-jimena .notita-meta{ color:var(--burgundy); }
.notita:nth-child(3n){ rotate:-1.5deg; }
.notita:nth-child(4n){ rotate:1.5deg; }

.imp-footer{ position:relative; z-index:1; text-align:center; padding:20px 20px 60px; font-family:var(--font-mono); font-size:12px; }
.imp-footer a{ color:var(--teal-deep); text-decoration:none; }
.imp-footer a:hover{ text-decoration:underline; }
.imp-footer-sep{ margin:0 8px; opacity:.5; }

/* ============ archivo de cartas (solo lectura, desde la página principal) ============ */
.imp-archive-toggle-wrap{ text-align:center; margin:18px 0 0; }
.imp-archive-toggle{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--teal-deep); background:none; border:none; cursor:pointer; text-decoration:underline;
  padding:6px;
}
#imp-archive{ margin-top:18px; }

.imp-title-input{
  display:block; width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--surface-alt); border:1px solid var(--line); padding:9px 12px; margin-bottom:12px;
}