@import "shared.css";

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ── Chart page wrapper ──────────────────────────────────────── */
.chart-page { flex: 1; padding: 1.25rem 1.5rem 2rem; }

.chart-page-header { margin-bottom: 1rem; }
.chart-page-header h1 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .15rem; }
.subtitle { font-size: .82rem; color: #64748b; margin: 0; }

/* ── Layout ─────────────────────────────────────────────────── */
.layout { display: flex; gap: 1rem; align-items: flex-start; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  flex: 0 0 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
  padding: .85rem;
  position: sticky;
  top: 1rem;
}

.sidebar h2 {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
}

.param-group { margin-bottom: .75rem; }

.param-group-title {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  margin: 0 0 .3rem;
}

.param-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .3rem;
  min-height: 36px;        /* comfortable touch target */
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.param-row:hover { background: #f8fafc; }

/* Hide the native checkbox but keep it reachable for keyboard/AT */
.param-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Custom checkbox box drawn on .param-check ────────────────────────────
   The DOM order inside .param-row is:
     input[checkbox] · .param-check · span

   .param-check is a plain <span> added by JS that renders the checkbox
   square + tick.  Sibling selectors on the hidden input drive all states.
   The ref row additionally appends a .param-swatch after .param-check to
   show its distinctive dashed-amber line indicator.                        */

.param-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1.5px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  position: relative;
  transition: background .12s, border-color .12s;
}

/* Checked state: filled square in the param's colour (set via --chk-color) */
.param-row input[type="checkbox"]:checked ~ .param-check {
  background: var(--chk-color, #2563eb);
  border-color: var(--chk-color, #2563eb);
}

/* Checkmark drawn with ::after */
.param-check::after {
  content: '';
  display: none;
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.param-row input[type="checkbox"]:checked ~ .param-check::after {
  display: block;
}

/* ── Colour swatch (ref row only) ──────────────────────────────────────── */
/* Regular param rows no longer have a swatch — the coloured checkbox fills
   that role.  The reference row keeps a swatch for its dashed-amber style. */
.param-swatch {
  flex-shrink: 0;
}

.param-row span { font-size: .78rem; line-height: 1.3; }

/* Unchecked: dim label text */
.param-row input[type="checkbox"]:not(:checked) ~ span { color: #94a3b8; }

/* Focus ring on the row when the hidden checkbox is focused */
.param-row:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

/* ── Chart area ─────────────────────────────────────────────── */
.chart-area { flex: 1 1 0; min-width: 0; }

/* ── Timespan bar ───────────────────────────────────────────── */
.timespan-bar {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
  padding: .7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
  margin-bottom: .85rem;
}

.timespan-bar label { font-size: .82rem; font-weight: 500; }

.timespan-bar input[type=month],
.timespan-bar input[type=number] {
  padding: .3rem .55rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: .82rem;
  background: #fff;
}

.timespan-bar input[type=number].year-input { width: 5.5rem; }

.presets { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: .25rem; }

.presets button {
  padding: .28rem .7rem;
  min-height: 36px;        /* touch target */
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: .76rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.presets button:hover,
.presets button.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* ── View toggle (Mensual / Anual) ──────────────────────────── */
.view-toggle {
  display: flex;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  overflow: hidden;
}

.view-btn {
  padding: .28rem .85rem;
  min-height: 36px;        /* touch target */
  border: none;
  background: #fff;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  color: #64748b;
}
.view-btn + .view-btn { border-left: 1px solid #cbd5e1; }
.view-btn.active {
  background: #2563eb;
  color: #fff;
}

.bar-sep {
  width: 1px;
  height: 1.4rem;
  background: #e2e8f0;
  align-self: center;
}

#monthlyControls,
#yearlyControls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
}

/* ── Chart canvas wrapper ───────────────────────────────────── */
/* Chart.js needs a position:relative parent with an explicit height
   when maintainAspectRatio:false is used (the recommended mobile setup).
   The canvas fills the container; height is controlled here in CSS.       */
.chart-wrapper {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
  padding: 1rem 1rem .75rem;
}

.chart-canvas-container {
  position: relative;
  height: 420px;           /* desktop: enough room for labels + legend */
}

#mainChart {
  display: block;
  width: 100% !important;  /* override canvas default 300px */
  height: 100% !important; /* fill the .chart-canvas-container */
}

.legend-note {
  margin-top: .6rem;
  font-size: .74rem;
  color: #94a3b8;
}

/* ── About page ─────────────────────────────────────────────── */
.about-content {
  max-width: 680px;
  margin: 0 auto;
}

.about-content h1 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  color: #0f172a;
}

.about-lead {
  font-size: 1rem;
  color: #334155;
  margin: 0 0 1.75rem;
  line-height: 1.6;
}

.about-content section {
  margin-bottom: 1.75rem;
}

.about-content h2 {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  margin: 0 0 .55rem;
}

.about-content p {
  font-size: .88rem;
  line-height: 1.7;
  color: #334155;
  margin: 0 0 .65rem;
}

.about-content ul {
  margin: 0 0 .65rem;
  padding-left: 1.4rem;
}

.about-content li {
  font-size: .88rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: .45rem;
}

.about-content a {
  color: #2563eb;
  text-decoration: none;
}
.about-content a:hover { text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Stack layout vertically */
  .layout          { flex-direction: column; }
  .sidebar         { flex: none; width: 100%; position: static; }

  /* Reduce page padding */
  .chart-page      { padding: .75rem .9rem 1.5rem; }
  .chart-page-header h1 { font-size: 1.05rem; }
  .subtitle        { font-size: .79rem; }

  /* Shorter chart on portrait mobile */
  .chart-canvas-container { height: 280px; }

  /* Timespan bar: tighter */
  .timespan-bar    { padding: .55rem .75rem; gap: .4rem .6rem; }

  /* Hide vertical separator — meaningless once controls wrap */
  .bar-sep         { display: none; }

  /* Date inputs: fill available space so they don't overflow */
  .timespan-bar input[type=month] {
    width: calc(50% - 3rem);
    min-width: 7rem;
  }
  .timespan-bar input[type=number].year-input {
    width: 4.5rem;
  }

  /* Preset buttons: slightly smaller text but still large touch targets */
  .presets         { margin-left: 0; }
  .presets button  { font-size: .73rem; padding: .28rem .55rem; }

  /* Sidebar: two-column param grid on small screens */
  .sidebar         { padding: .75rem; }
  #paramList       { column-count: 2; column-gap: .5rem; }
  .param-group     { break-inside: avoid; margin-bottom: .5rem; }
}

@media (max-width: 380px) {
  /* Very small phones: single column param list */
  #paramList       { column-count: 1; }

  /* Even shorter chart to leave room for controls */
  .chart-canvas-container { height: 240px; }
}

/* ── Mobile landscape — chart fills the screen ──────────────── */
/* Phones rotated to landscape have a short viewport (≤ 450 px tall).
   In this orientation:
   - constrain body to the viewport so flex children cannot overflow
   - hide everything that isn't the chart itself to reclaim vertical space
   - thread flex:1 + min-height:0 from body down to .chart-canvas-container
     so the canvas expands to fill all remaining height
   - override the fixed pixel heights set by the portrait rules above       */
@media (orientation: landscape) and (max-height: 450px) {
  /* Cap body at viewport height — prevents flex children from growing past it */
  body {
    height: 100dvh;
    overflow: hidden;
  }

  /* Minimal header: just the nav — drop subtitle, reduce padding */
  .site-header     { padding: .3rem .75rem; }
  .site-sub        { display: none; }

  /* Hide non-essential chrome */
  .chart-page-header { display: none; }
  .site-footer       { display: none; }
  #legendNote        { display: none !important; }

  /* Thread flex:1 + min-height:0 all the way down */
  .chart-page {
    flex: 1;
    padding: .4rem .6rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .layout {
    flex: 1;
    min-height: 0;
    gap: .5rem;
    align-items: stretch;
  }

  /* Sidebar: collapse to a narrow scrollable strip on the left */
  .sidebar {
    flex: 0 0 auto;
    width: 140px;
    max-height: 100%;
    overflow-y: auto;
    position: static;
    padding: .4rem .5rem;
  }
  .sidebar h2     { display: none; }     /* "Parámetros" heading wastes space */
  .param-row      { min-height: 28px; padding: .15rem .2rem; }
  .param-group    { margin-bottom: .35rem; }
  #paramList      { column-count: 1; }   /* single column in narrow strip */

  /* Chart area fills remaining width; min-height:0 lets it shrink in flex */
  .chart-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Compact controls bar */
  .timespan-bar   { padding: .3rem .5rem; gap: .3rem .5rem; margin-bottom: .35rem; }
  .bar-sep        { display: none; }

  /* Chart wrapper fills remaining height */
  .chart-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .4rem .5rem .3rem;
  }

  /* Canvas container fills wrapper; height:auto overrides portrait fixed-px */
  .chart-canvas-container {
    flex: 1;
    min-height: 0;
    height: auto;
  }
}