:root {
  --ink: #18211d;
  --muted: #68736d;
  --paper: #f5f5ef;
  --card: #fffefa;
  --line: #dfe4dc;
  --green: #1b765b;
  --green-dark: #145441;
  --mint: #d8eee1;
  --yellow: #f3c865;
  --orange: #e68d56;
  --red: #c75e59;
  --price-0: #145441;
  --price-1: #3f8658;
  --price-2: #a89535;
  --price-3: #bd5d43;
  --price-4: #8c2f2b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 90% 0%, #eaf3e7 0, transparent 28rem), var(--paper); }
.topbar, .shell, .footer { max-width: 1160px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--ink); font-size: 1.1rem; font-weight: 600; text-decoration: none; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.brand b { color: var(--green); }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--green); color: #fff; font-size: 1rem; }
.source-pill { color: var(--green-dark); border: 1px solid #b9d8c5; background: #eaf5ed; border-radius: 999px; padding: 7px 12px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 70px 0 54px; }
.eyebrow { color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 12px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); letter-spacing: -.075em; line-height: .94; margin-bottom: 24px; font-weight: 750; }
h1 em { color: var(--green); font-style: normal; }
.intro { max-width: 500px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin-bottom: 0; }
.hero-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .82rem; white-space: nowrap; padding-bottom: 8px; }
.pulse { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px #d5eee0; }
.day-panel, .history-panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: 0 16px 50px rgba(38, 61, 47, .05); }
.history-panel { margin-top: 22px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
h2 { font-size: 1.8rem; letter-spacing: -.04em; margin-bottom: 0; }
.day-switcher { display: flex; gap: 4px; padding: 4px; background: #eff2ed; border-radius: 12px; }
button { font: inherit; cursor: pointer; }
.day-button { min-height: 44px; border: 0; color: var(--muted); background: transparent; border-radius: 9px; padding: 9px 14px; font-size: .82rem; }
.day-button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(20, 44, 31, .1); font-weight: 700; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 34px; }
.summary { min-height: 94px; background: #f4f6f1; border-radius: 14px; padding: 15px; }
.summary.highlight { background: var(--mint); }
.summary-label { color: var(--muted); font-size: .72rem; display: block; margin-bottom: 10px; }
.summary-value { font-size: 1.35rem; font-weight: 750; letter-spacing: -.04em; }
.summary-sub { color: var(--muted); font-size: .72rem; display: block; margin-top: 5px; }
.chart-wrap { overflow-x: auto; }
.chart-labels { color: var(--muted); display: flex; justify-content: space-between; font-size: .72rem; margin-bottom: 9px; }
.bar-chart { height: 250px; min-width: 690px; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid var(--line); padding: 0 3px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 61px, rgba(217, 224, 216, .65) 62px); }
.bar-item { height: 100%; flex: 1 1 0; min-width: 15px; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; }
.bar { width: min(100%, 26px); min-height: 3px; background: var(--green); border-radius: 5px 5px 0 0; transition: height .4s ease; }
.bar-item[data-level="0"] .bar { background: var(--price-0); }
.bar-item[data-level="1"] .bar { background: var(--price-1); }
.bar-item[data-level="2"] .bar { background: var(--price-2); }
.bar-item[data-level="3"] .bar { background: var(--price-3); }
.bar-item[data-level="4"] .bar { background: var(--price-4); }
.bar-hour { color: var(--muted); font-size: .63rem; }
.pending { color: #8a5e23; background: #fff3d6; border-radius: 10px; padding: 12px 14px; font-size: .82rem; margin: 18px 0 0; }
.update-state { display: flex; align-items: center; gap: 9px; border-radius: 10px; padding: 12px 14px; margin-top: 12px; color: var(--muted); background: #f1f3ef; font-size: .82rem; }
.update-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #87928a; }
.update-state.green { color: #145441; background: #e1f2e7; }
.update-state.green .update-dot { background: var(--green); }
.update-state.amber { color: #8a5e23; background: #fff3d6; }
.update-state.amber .update-dot { background: #d9952f; }
.update-state.red { color: #8c302d; background: #fbe3e1; }
.update-state.red .update-dot { background: var(--red); }
.date-form { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.date-form label { display: grid; gap: 5px; color: var(--muted); font-size: .68rem; }
input { min-height: 44px; color: var(--ink); background: #f4f6f1; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: .8rem; }
.primary-button { min-height: 44px; border: 0; border-radius: 9px; color: white; background: var(--green); padding: 10px 15px; font-size: .8rem; font-weight: 700; }
.primary-button:hover { background: var(--green-dark); }
.history-meta { color: var(--muted); min-height: 23px; font-size: .78rem; margin: -8px 0 14px; }
.heatmap { display: grid; gap: 7px; }
.heatmap-row { display: grid; grid-template-columns: 90px repeat(24, minmax(12px, 1fr)); gap: 3px; align-items: center; }
.heatmap-date { color: var(--muted); font-size: .7rem; }
.heat-cell { height: 22px; border-radius: 4px; background: #eef1ec; position: relative; }
.heat-cell[data-level="0"] { background: var(--price-0); }
.heat-cell[data-level="1"] { background: var(--price-1); }
.heat-cell[data-level="2"] { background: var(--price-2); }
.heat-cell[data-level="3"] { background: var(--price-3); }
.heat-cell[data-level="4"] { background: var(--price-4); }
.legend { display: flex; align-items: center; justify-content: end; gap: 5px; color: var(--muted); font-size: .68rem; margin-top: 17px; }
.swatch { width: 14px; height: 10px; border-radius: 3px; background: var(--price-0); }
.s0 { background: var(--price-0); } .s1 { background: var(--price-1); } .s2 { background: var(--price-2); }
.s3 { background: var(--price-3); } .s4 { background: var(--price-4); }
.note-card { display: flex; gap: 14px; margin: 22px 0 50px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.note-card strong { color: var(--ink); display: block; margin-bottom: 3px; } .note-card p { margin: 0; }
.note-icon { flex: 0 0 22px; height: 22px; border: 1px solid #aab9ad; color: var(--green); display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.footer { border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 30px; color: var(--muted); display: flex; justify-content: space-between; font-size: .7rem; }
.empty { color: var(--muted); padding: 22px 0; font-size: .85rem; }
@media (max-width: 700px) {
  .topbar, .shell, .footer { padding-left: 18px; padding-right: 18px; }
  .topbar { height: 64px; } .source-pill { display: none; }
  .hero { display: block; padding: 50px 0 34px; } .hero-note { margin-top: 26px; }
  .day-panel, .history-panel { padding: 20px 16px; border-radius: 17px; }
  .section-head, .history-head { display: block; } .day-switcher { margin-top: 18px; width: max-content; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 25px; }
  .date-form { margin-top: 17px; } .date-form label { flex: 1; } .primary-button { width: 100%; }
  .heatmap { overflow-x: auto; padding-bottom: 4px; } .heatmap-row { min-width: 600px; }
  .footer { display: block; line-height: 1.8; }
}

/* Identidad El Abeto Dev: misma cabecera, pie y tokens que la portada. */
:root { --ink:#0a0a0a; --muted:#52525b; --paper:#fff; --card:#fff; --line:#e4e4e7; --green:#0f766e; --green-dark:#0b5c56; --mint:#f0fdfa; color-scheme:only light; }
body { background:#fff; }
.shell { max-width:1080px; padding-left:20px; padding-right:20px; }
.site-wrap { max-width:1080px; margin:auto; padding:0 20px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; z-index:100; background:#fff; padding:12px; }
.site-top { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.site-top-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:64px; }
.site-mark { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font:500 1rem 'JetBrains Mono',monospace; text-decoration:none; }
.site-nav { display:none; gap:20px; }
.site-nav a,.site-menu a { color:var(--muted); text-decoration:none; }
.site-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.92rem; }
.site-nav a:hover,.site-menu a:hover { color:var(--green); }
.site-menu summary { display:flex; gap:8px; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; color:var(--green); font:.92rem 'JetBrains Mono',monospace; cursor:pointer; list-style:none; }
.site-menu summary::-webkit-details-marker { display:none; }
.site-menu nav { position:absolute; top:calc(100% + 8px); left:12px; right:12px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 16px 34px rgba(15,23,42,.14); }
.site-menu nav a { display:flex; align-items:center; min-height:52px; padding:0 14px; }
.hero { padding:56px 0 40px; }
h1 { font-size:clamp(2.25rem,5vw,3.8rem); letter-spacing:-.05em; line-height:1.08; font-weight:600; }
.eyebrow { font-family:'JetBrains Mono',monospace; font-weight:500; letter-spacing:.04em; }
.day-panel,.history-panel { border-radius:14px; box-shadow:none; }
.summary { background:#fafafa; border:1px solid var(--line); }
.summary.highlight { background:var(--mint); border-color:#99f6e4; }
.day-switcher,input { background:#fafafa; }
.site-footer { border-top:1px solid var(--line); color:#52525b; font-size:.8rem; padding:24px 0; }
.site-footer-inner { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
.site-footer a { color:#52525b; }
.source-credit { margin-top:14px; font-size:.72rem; color:#5b6472; }
@media (min-width:900px) { .site-nav { display:flex; } .site-menu { display:none; } }
@media (max-width:700px) { .shell { padding-left:18px; padding-right:18px; } .hero { padding:38px 0 30px; } .site-footer-inner { display:grid; gap:8px; } }

.update-state[hidden] { display: none; }

/* El cero es un eje real, también cuando los precios cambian de signo. */
.bar-chart { position:relative; align-items:stretch; }
.bar-item { position:relative; display:block; }
.bar-plot { position:absolute; inset:0 0 24px; }
.bar-plot::after { content:""; position:absolute; z-index:1; left:0; right:-5px; bottom:var(--zero); border-top:1px solid #71717a; pointer-events:none; }
.bar-plot .bar { position:absolute; left:50%; transform:translateX(-50%); min-height:0; }
.bar-hour { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); }
.bar-item .bar.negative, .heat-cell.negative, .swatch.negative { background:#000; }
.bar-item .bar.negative { border-radius:0 0 5px 5px; }