:root{
  --paper:#f9f6ef;
  --ink:#222;
  --ink-weak:#3a3a3a;
  --card:#ffffffee;
  --shadow:0 10px 30px #00000014;
  --radius:16px;
  /* RULER pastel */
  --y:#FFE58A; /* alegría */
  --g:#C6F1C0; /* calma */
  --b:#C9D7FF; /* tristeza/cansancio */
  --r:#FFB3B3; /* estrés/ansiedad */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto;
  color:var(--ink); background:var(--paper);
  background-image: radial-gradient(#00000007 1px, transparent 1px);
  background-size: 12px 12px;
}
img{max-width:100%; display:block}

.site-header{padding:20px 16px; text-align:center}
.site-header h1{font-family:"Shadows Into Light", cursive; font-size:clamp(28px,4vw,44px); margin:0 0 6px}
.subtitle{margin:0; opacity:.8}
.author{margin:6px 0 0; opacity:.8}

main{max-width:1100px; margin:0 auto; padding:16px}

.filters{background:var(--card); border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; position:relative}
.filters::before{content:""; position:absolute; top:-12px; left:16px; width:120px; height:24px; background:#f2e6c4; border-radius:6px; transform:rotate(-3deg); opacity:.7}
.legend{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.chip{padding:6px 10px; border-radius:999px; border:1px solid #0000001a; color:#222; font-weight:600}
.chip.yellow{background:var(--y)}
.chip.green{background:var(--g)}
.chip.blue{background:var(--b)}
.chip.red{background:var(--r)}
.filters .legend{position:sticky; top:8px; backdrop-filter:blur(4px); background:color-mix(in oklab, var(--paper), #fff 40%); padding:6px 8px; border-radius:12px}
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.controls input[type="search"]{padding:8px 10px; border-radius:10px; border:1px solid #00000022; min-width:240px}
.btn{border:1px solid #00000022; background:#fff; color:#111; padding:8px 12px; border-radius:10px; cursor:pointer}
.btn.ghost{background:transparent}
.btn:focus-visible, .controls input:focus-visible, select:focus-visible{outline:2px solid #111; outline-offset:2px}
.evt-highlight{background:linear-gradient(transparent 60%, #ffe58a 60%)}

/* Timeline */
.timeline{margin-top:18px}
.timeline h2{font-family:"Shadows Into Light", cursive; font-size:clamp(22px,3vw,32px); margin:8px 0 12px}
#timelineGrid{display:grid; grid-template-columns: repeat(5, 1fr); gap:14px}
.day-col{background:var(--card); border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column}
.day-header{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px}
.day-title{font-weight:800}
.day-sub{font-size:12px; opacity:.75}
.events{display:flex; flex-direction:column; gap:8px}
.event{position:relative; border-radius:12px; padding:8px 10px; border:1px solid #0000001a; box-shadow:0 4px 14px #00000012}
.event .label{font-weight:700; display:block}
.event .meta{font-size:12px; opacity:.85}
.event .e-chip{display:inline-block; margin-top:6px; padding:.18rem .5rem; border-radius:999px; font-size:.75rem; border:1px solid #0000001a}
.e-chip.yellow{background:var(--y); color:#222}
.e-chip.green{background:var(--g); color:#222}
.e-chip.blue{background:var(--b); color:#222}
.e-chip.red{background:var(--r); color:#222}
.event[data-color="yellow"]{background:var(--y)}
.event[data-color="green"]{background:var(--g)}
.event[data-color="blue"]{background:var(--b)}
.event[data-color="red"]{background:var(--r)}
.event:focus-visible{outline:3px solid #000}
.help{font-size:12px; opacity:.75}

/* Heatmap */
.heatmap{margin-top:24px}
.heatmap-header{display:flex; align-items:center; justify-content:space-between; gap:10px}
.heatmap-wrap{display:grid; grid-template-columns: 340px 1fr; gap:14px; align-items:start}
#heatFigure{background:var(--card); border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; display:flex; justify-content:center; max-width:340px}
#heatFigure svg{height:320px; max-height:340px; width:auto}
#heatCaption{font-size:13px; opacity:.85}
.disclaimer{font-size:12px; opacity:.75}

/* Narrative */
.narrative h2{font-family:"Shadows Into Light", cursive}
.card{background:var(--card); border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin:14px 0; position:relative}
.card::after{content:""; position:absolute; width:90px; height:18px; top:-10px; right:24px; background:#e9d8fd; border-radius:6px; transform:rotate(2deg); opacity:.6}
.tiny{font-size:12px; opacity:.8}

/* Evidence grid */
.evidence h2{font-family:"Shadows Into Light", cursive}
.grid-evidence{display:grid; grid-template-columns: repeat(12, 1fr); gap:16px}
.polaroid{grid-column: span 6; background:#fff; border-radius:12px; padding:0; box-shadow:0 22px 40px #00000025; border:1px solid #00000018; position:relative; overflow:hidden}
.polaroid .media{position:relative; aspect-ratio:16/9; background:#000}
.polaroid video, .polaroid img{width:100%; height:100%; object-fit:cover}
.polaroid .badge{position:absolute; top:10px; left:10px; padding:.2rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; color:#222; border:1px solid #00000022}
.badge.red{background:var(--r)}
.badge.yellow{background:var(--y)}
.badge.green{background:var(--g)}
.badge.blue{background:var(--b)}
.polaroid figcaption{padding:10px 12px; font-size:14px; background:#fff}
.howto{margin-top:10px}

/* Print */
@media print{
  .filters, .controls, #btnExportTimeline, #btnExportHeat, #btnPrint, .howto{display:none !important}
  body{background:#fff}
  .polaroid{box-shadow:none}
  .evidence video, .polaroid .media{display:none !important}
  .grid-evidence{grid-template-columns:1fr 1fr}
}

/* Responsive */
@media (max-width: 980px){
  #timelineGrid{grid-template-columns: repeat(3, 1fr)}
  .heatmap-wrap{grid-template-columns:1fr}
  #heatFigure{max-width:100%}
  #heatFigure svg{height:280px}
}
@media (max-width: 680px){
  #timelineGrid{grid-template-columns:1fr}
  .grid-evidence{grid-template-columns: repeat(6,1fr)}
  .polaroid{grid-column: span 6}
}

/* Instructions and rubric */
.instructions details{background:#fff; border:1px solid #eee; border-radius:12px; padding:.75rem 1rem}
.instructions summary{font-weight:700; cursor:pointer; font-size:1.05rem}
.instructions .bullets li{margin:.25rem 0}
.rubric-check{margin-top:1rem}
.rubric-list{display:grid; gap:.5rem; grid-template-columns:1fr}
.rubric-item{display:flex; align-items:flex-start; gap:.5rem; background:#fff; border:1px solid #eee; border-radius:10px; padding:.5rem .75rem}
.rubric-item .icon{font-size:1.1rem; line-height:1.4}
.rubric-item.pass{border-color:#b7e4c7; background:#f1fff4}
.rubric-item.warn{border-color:#ffe08a; background:#fff9e6}
.rubric-item.fail{border-color:#ffb3b3; background:#fff3f3}
.ruler-report{margin-top:.5rem; background:#fff; border:1px solid #eee; border-radius:10px; padding:.5rem .75rem; font-size:.95rem}
.ruler-report .bad{color:#b00020; font-weight:600}