/* Herramienta «Cuándo ir» (scripts/build_crowd_calendar.py, js/crowds.js).
   Estilo «noche mágica» del sitio: cielo nocturno, papel crema y oro. La afluencia va
   en una sola escala de azul noche (más oscuro, más gente); los días más tranquilos
   llevan una estrella dorada. Sin rojos. */

:root { --cr-1: #e4ecf6; --cr-2: #b8cbe4; --cr-3: #7c9ac5; --cr-4: #3d5d95; --cr-5: #1a2251; --cr-line: #e7dcc2; }
.cr-tool, .cr-hub { margin: 1.2rem 0 2.6rem; }
.cr-l1 { background: var(--cr-1); } .cr-l2 { background: var(--cr-2); } .cr-l3 { background: var(--cr-3); }
.cr-l4 { background: var(--cr-4); } .cr-l5 { background: var(--cr-5); }
.cr-l0 { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(107, 103, 136, .22) 4px 5px); }

/* Cielo con el selector y las cifras */
.cr-sky {
  position: relative; border-radius: 18px; padding: 1.4rem 1.5rem 1.5rem; color: #f4e7c3;
  background:
    radial-gradient(1.3px 1.3px at 92% 22%, #fdf3d0 99%, transparent),
    radial-gradient(1px 1px at 84% 62%, rgba(255, 255, 255, .7) 99%, transparent),
    radial-gradient(1.2px 1.2px at 97% 84%, #fff 99%, transparent),
    radial-gradient(1px 1px at 70% 12%, rgba(255, 255, 255, .55) 99%, transparent),
    radial-gradient(ellipse 55% 90% at 90% 0%, rgba(233, 201, 120, .16), transparent 70%),
    linear-gradient(165deg, var(--night) 0%, var(--night-2) 100%);
}
.cr-sky > p { margin: .9rem 0 0; max-width: 560px; color: #e9dfc5; }
.cr-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.cr-pick span { font-family: var(--display); color: var(--gold-2); font-size: 1.15rem; }
.cr-pick select {
  font: inherit; font-size: 1rem; color: var(--night); background: #fbf6ea; border: 0; border-radius: 999px;
  padding: .55rem 2.3rem .55rem 1rem; min-width: min(100%, 280px); max-width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--night) 50%), linear-gradient(135deg, var(--night) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.cr-pick select:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem 1.4rem; margin: 1.3rem 0 0; }
.cr-stats div { border-top: 1px solid rgba(233, 201, 120, .4); padding-top: .55rem; }
.cr-stats dt { font-size: .84rem; color: #cfc4a6; }
.cr-notice { margin: 1.1rem 0 0; padding: .8rem 1rem; border: 1px solid rgba(233, 201, 120, .55); border-radius: 12px; color: #fbf3dc; }
.cr-stats dd { margin: .15rem 0 0; font-family: var(--display); font-size: 1.22rem; color: #fbf3dc; line-height: 1.2; }

/* El año en miniatura */
.cr-year { display: flex; gap: .55rem; overflow-x: auto; padding: 1rem .1rem .6rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cr-mini {
  flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--cr-line); background: #fffdf8; border-radius: 10px;
  padding: .45rem .5rem .5rem; cursor: pointer; text-align: left; font: inherit; color: var(--text);
}
.cr-mini b { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; text-transform: capitalize; }
.cr-mini b span { color: var(--text-muted); font-weight: 400; }
.cr-dots { display: grid; grid-template-columns: repeat(7, 7px); gap: 2px; }
.cr-dots i { width: 7px; height: 7px; border-radius: 2px; }
.cr-mini.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.cr-mini:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mes grande y detalle */
.cr-main { display: grid; gap: 1.2rem; margin-top: .6rem; }
@media (min-width: 900px) { .cr-main { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.cr-month { background: #fffdf8; border: 1px solid var(--cr-line); border-radius: 16px; padding: 1.1rem 1.1rem 1.2rem; margin-bottom: 1rem; }
.cr-month h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0; text-transform: capitalize; color: var(--text); }
.cr-month h3 span { color: var(--gold-ink); }
.cr-month-sum { margin: .1rem 0 .8rem; color: var(--text-muted); font-size: .92rem; }
.cr-head { display: flex; align-items: center; gap: .6rem; }
.cr-head h3 { flex: 1; }
.cr-arrow {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--cr-line); background: #fff; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--night);
}
.cr-arrow:disabled { opacity: .35; cursor: default; }
.cr-arrow:not(:disabled):hover { border-color: var(--gold); }
.cr-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cr-wd { display: contents; }
.cr-wd span { text-align: center; font-size: .78rem; color: var(--text-muted); padding-bottom: .15rem; }
.cr-d {
  position: relative; aspect-ratio: 1 / .86; border: 0; border-radius: 9px; font: inherit; font-size: .98rem; font-weight: 600;
  color: var(--night); cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-start; padding: .35rem .45rem;
}
.cr-d.cr-l4, .cr-d.cr-l5 { color: #f4efe2; }
.cr-d.cr-l0 { color: var(--text-muted); font-weight: 400; }
.cr-best::after {
  content: ""; position: absolute; right: .4rem; bottom: .4rem; width: .7rem; height: .7rem; background: var(--gold);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}
.cr-d:hover { box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .7); }
.cr-d:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cr-d.is-sel { box-shadow: inset 0 0 0 2.5px var(--gold); }
.cr-d.is-past { opacity: .38; }
.cr-d.is-today::before { content: ""; position: absolute; left: .45rem; bottom: .35rem; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; }

.cr-detail {
  background: var(--night); color: #efe6cc; border-radius: 16px; padding: 1.2rem 1.3rem; min-height: 150px;
  position: sticky; top: 1rem;
}
.cr-detail h4 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: #fbf3dc; margin: 0 0 .5rem; line-height: 1.2; }
.cr-detail .cr-chip { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--gold-2); margin-bottom: .7rem; }
.cr-detail .cr-chip i { width: 1rem; height: 1rem; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.cr-detail ul { margin: 0; padding: 0; list-style: none; }
.cr-detail li { padding: .4rem 0; border-top: 1px solid rgba(233, 201, 120, .22); font-size: .96rem; }
.cr-hint { margin: 0; color: #cfc4a6; }

.cr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: .2rem; }
.cr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: .6rem 0; padding: 0; font-size: .9rem; color: var(--text); }
.cr-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.cr-legend i { width: .95rem; height: .95rem; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(20, 21, 55, .12); }
.cr-note { color: var(--text-muted); font-size: .9rem; margin: .4rem 0; }

/* Con JS se ve un mes cada vez */
.cr-tool.is-js .cr-month { display: none; }
.cr-tool.is-js .cr-month.is-on { display: block; margin-bottom: 0; }

/* Clima */
.cr-section { margin: 2.4rem 0; }
.cr-section h2 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; margin: 0 0 .4rem; color: var(--text); }
.cr-climate { list-style: none; margin: 1rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.cr-climate li { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.cr-temp { position: relative; height: 170px; background: linear-gradient(#fffdf8, #fbf6ea); border: 1px solid var(--cr-line); border-radius: 8px; }
.cr-temp i { display: block; position: absolute; left: 22%; right: 22%; border-radius: 6px; background: linear-gradient(var(--gold-2), var(--cr-3)); }
.cr-temp b, .cr-temp em { position: absolute; left: 50%; transform: translateX(-50%); font-size: .74rem; font-style: normal; white-space: nowrap; }
.cr-temp b { bottom: 100%; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.cr-temp em { top: 100%; margin-top: 2px; color: var(--text-muted); }
.cr-rain { height: 6px; border-radius: 3px; background: #efe8d6; overflow: hidden; margin-top: 14px; }
.cr-rain i { display: block; height: 100%; background: var(--cr-4); }
.cr-mname { text-align: center; font-size: .8rem; color: var(--text-muted); }

.cr-events { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.cr-events li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--cr-line); }
.cr-events b { font-weight: 600; }
.cr-events span { color: var(--text-muted); }
.cr-events small { color: var(--gold-ink); }

.cr-method p { max-width: 760px; }
.cr-sources { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: .2rem 0; font-size: .9rem; }
.cr-qt a, .cr-method a { color: var(--gold-ink); }
.cr-real { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--cr-line); border-radius: 14px; background: #fffdf8; }
.cr-real h3 { margin: 0 0 .2rem; font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.cr-real ol { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.cr-real li { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: .72rem; color: var(--text-muted); }
.cr-real li i { width: 100%; background: var(--cr-4); border-radius: 4px 4px 0 0; }
.cr-real li b { order: -1; font-weight: 600; color: var(--text); }
.cr-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0; }
.cr-links a { border: 1px solid var(--gold); color: var(--night); border-radius: 999px; padding: .5rem 1rem; text-decoration: none; }
.cr-links a:hover { background: var(--night); color: var(--gold-2); }

/* Años, tabla mes a mes y afiliados */
.cr-years { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }
.cr-years button { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--gold); border-radius: 999px; padding: .4rem 1rem; background: #fff; color: var(--night); }
.cr-years button.is-on { background: var(--night); color: var(--gold-2); border-color: var(--night); }
.cr-years button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cr-table-wrap { overflow-x: auto; }
.cr-table { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .95rem; background: #fffdf8; }
.cr-table th, .cr-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--cr-line); text-align: left; vertical-align: top; }
.cr-table thead th { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.cr-table tbody th { text-transform: capitalize; font-weight: 600; }
.cr-lv { white-space: nowrap; }
.cr-lv i { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; margin-right: .45rem; vertical-align: -.1rem; box-shadow: inset 0 0 0 1px rgba(20, 21, 55, .12); }
.cr-plan .travel-cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: .8rem; }
.cr-plan .ticket-cta { margin: 0; }

/* Portada de la herramienta */
.cr-next30 { margin: 1.6rem 0 0; color: var(--text-muted); }
.cr-country h2 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; margin: 1.8rem 0 .4rem; color: var(--text); }
.cr-parks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .7rem; }
.cr-parks a {
  display: grid; gap: .45rem; padding: .85rem 1rem; border: 1px solid var(--cr-line); border-radius: 14px; background: #fffdf8;
  text-decoration: none; color: var(--text);
}
.cr-parks a:hover { border-color: var(--gold); }
.cr-parks b { font-weight: 600; }
.cr-strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
.cr-strip i { height: 18px; border-radius: 3px; }
.cr-row-best { font-size: .86rem; color: var(--text-muted); }

@media (max-width: 640px) {
  .cr-sky { padding: 1.1rem 1rem 1.2rem; border-radius: 14px; }
  .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
  .cr-stats dd { font-size: 1.05rem; }
  .cr-month { padding: .8rem .6rem 1rem; }
  .cr-grid { gap: 3px; }
  .cr-d { font-size: .86rem; padding: .25rem .3rem; border-radius: 7px; aspect-ratio: 1 / 1; }
  .cr-best::after { width: .5rem; height: .5rem; right: .25rem; bottom: .25rem; }
  .cr-climate { gap: 3px; }
  .cr-temp { height: 130px; }
  .cr-temp b, .cr-temp em { font-size: .64rem; }
  .cr-mname { font-size: .68rem; }
  .cr-detail { position: static; }
}
:lang(ja) :is(.cr-month h3, .cr-detail h4, .cr-section h2, .cr-stats dd, .cr-pick span, .cr-country h2),
:lang(zh) :is(.cr-month h3, .cr-detail h4, .cr-section h2, .cr-stats dd, .cr-pick span, .cr-country h2) { font-weight: 700; font-synthesis: none; }