/* components.css — Explorador del Ciclo de Temporadas widget */

.cycle-explorer{
  background:var(--c-bg-dark); color:var(--c-text-dark);
  border-radius:16px; padding:1.4em; margin:1.6em 0;
}
.cycle-toolbar{
  display:flex; flex-wrap:wrap; gap:.8em; align-items:center; justify-content:space-between;
  margin-bottom:1em;
}
.cycle-hint{font-size:var(--fs-14); color:#c9d8ce; margin:0}
.cycle-list-toggle{
  background:var(--c-accent); color:#fff; border:0; border-radius:8px;
  padding:.6em 1.1em; font-weight:600; cursor:pointer; font-size:var(--fs-14);
}
.cycle-list-toggle[aria-pressed="true"]{background:#8f4c22}
.cycle-list-toggle:disabled{opacity:.6; cursor:not-allowed}

.cycle-session-note{font-size:var(--fs-12); color:#9fb0a6; margin:.4em 0 0}

.cycle-resume-banner{
  background:var(--c-surface-dark); border:1px solid #345544; border-radius:8px;
  padding:.8em 1em; margin-bottom:1em; display:flex; gap:.8em; flex-wrap:wrap;
  align-items:center; justify-content:space-between; font-size:var(--fs-14);
}
.cycle-resume-banner button{
  background:var(--c-accent); color:#fff; border:0; border-radius:6px; padding:.5em .9em;
  font-weight:600; cursor:pointer;
}
.cycle-resume-banner .dismiss{background:transparent; color:#c9d8ce; border:1px solid #3f5a4b}

/* ---- Radial diagram ---- */
.cycle-radial-wrap{
  display:flex; justify-content:center; position:relative;
}
.cycle-svg{width:100%; max-width:520px; height:auto; touch-action:manipulation}
.cycle-svg .sector-btn{
  cursor:pointer; transition:transform .15s ease, filter .15s ease, opacity .15s ease;
  transform-box:fill-box; transform-origin:center;
}
@media (prefers-reduced-motion: reduce){
  .cycle-svg .sector-btn{transition:none}
}
.cycle-svg .sector-btn:hover, .cycle-svg .sector-btn:focus-visible{
  filter:brightness(1.12);
}
.cycle-svg .sector-btn.is-hover, .cycle-svg .sector-btn:hover{
  transform:scale(1.04);
}
.cycle-svg .sector-btn:focus{outline:none}
.cycle-svg .sector-btn:focus-visible path,
.cycle-svg .sector-btn.has-focus path{
  stroke:#fff; stroke-width:3px;
}
.cycle-svg .sector-btn.is-dimmed{opacity:.25}
.cycle-svg .sector-btn.is-compare{filter:brightness(1.25)}
.cycle-svg .sector-btn.is-missing path{
  fill-opacity:.35;
}
.cycle-svg .outer-sector{cursor:pointer}
.cycle-svg .outer-sector:focus-visible path,
.cycle-svg .outer-sector.has-focus path{stroke:#fff; stroke-width:3px}
.cycle-svg text{font-family:var(--font-body); fill:var(--c-text-dark); pointer-events:none}
.cycle-svg .decade-label{font-size:9px; fill:#c9d8ce}
.cycle-svg .season-label{font-size:12px; font-weight:700; fill:#fff}

.cycle-legend{display:flex; flex-wrap:wrap; gap:.8em 1.2em; margin-top:.8em; font-size:var(--fs-12); color:#c9d8ce}
.cycle-legend .swatch{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:.35em; vertical-align:middle}

/* ---- Fact card ---- */
.fact-card{
  background:var(--c-surface-dark); border-radius:12px; padding:1.3em;
  margin-top:1.2em; border:1px solid #2c4738; position:relative;
}
.fact-card .fact-close{
  position:absolute; top:.7em; right:.7em; background:transparent; border:0;
  color:#c9d8ce; font-size:var(--fs-18); cursor:pointer; padding:.2em .5em; border-radius:6px;
}
.fact-card .fact-close:hover{color:#fff}
.fact-card h3{margin-top:0; padding-right:2em}
.fact-card .fact-meta{display:flex; flex-wrap:wrap; gap:.5em; margin:.4em 0 .8em}
.chip{
  display:inline-block; font-size:var(--fs-12); padding:.2em .6em; border-radius:999px;
  background:#274436; color:#dfe7e0;
}
.chip.chip-alta{background:var(--c-ok)}
.chip.chip-media{background:#4a6e75}
.chip.chip-baja{background:#5a4a2e}
.chip.chip-cerrado{background:#3a3a3a}
.fact-card .casino-note{
  font-size:var(--fs-14); border-left:3px solid var(--c-accent); padding-left:.8em; margin-top:.8em;
}
.fact-card .tags{margin-top:.8em; font-size:var(--fs-12); color:#9fb0a6}

.compare-table{width:100%; border-collapse:collapse; margin-top:.8em; font-size:var(--fs-14)}
.compare-table th, .compare-table td{border:1px solid #2c4738; padding:.5em .6em; text-align:left}
.compare-table thead th{background:#20392c}

.data-missing-msg{
  background:#2b1e18; border:1px solid var(--c-warn); border-radius:8px; padding:.8em 1em;
  font-size:var(--fs-14); color:#f0d9cf;
}

/* ---- List mode ---- */
.cycle-list{list-style:none; margin:0; padding:0}
.cycle-list .decade-group{
  border-top:1px solid #2c4738; padding:1em 0;
}
.cycle-list .decade-group h3{margin:0 0 .6em; font-size:var(--fs-18)}
.season-sub-list{list-style:none; margin:0; padding:0; display:grid; gap:.6em; grid-template-columns:1fr}
@media (min-width:600px){ .season-sub-list{grid-template-columns:repeat(2,1fr)} }
.season-btn{
  width:100%; text-align:left; background:var(--c-surface-dark); border:1px solid #2c4738;
  border-radius:8px; padding:.7em .9em; color:var(--c-text-dark); cursor:pointer; font-size:var(--fs-14);
}
.season-btn:hover{border-color:var(--c-accent)}
.season-btn .season-btn-title{display:block; font-weight:700; margin-bottom:.2em}
.season-btn[aria-expanded="true"]{border-color:var(--c-accent)}

/* ---- Static fallback table (no-JS) ---- */
.fallback-table-wrap{margin-top:1.2em}

/* Responsive: force list on very small screens is handled by JS adding a class */
.cycle-explorer.force-list-only .cycle-radial-wrap{display:none}
.cycle-explorer.force-list-only .cycle-list-toggle{display:none}