/* Home converter: compact date rail with a floating selector. */
#conversor.period-popup-converter { --period-accent:var(--green,var(--teal)); --period-soft:var(--green-soft,var(--mint)); --period-historical:var(--gold,#d1a62c); --period-historical-mix:55%; position:relative; padding-left:86px!important; overflow:visible; }
#conversor.period-popup-converter .period-date-controls { position:absolute; z-index:30; top:18px; left:12px; display:flex; flex-direction:column; gap:8px; width:58px; }
#conversor.period-popup-converter .period-disclosure { position:relative; z-index:30; width:100%; }
#conversor.period-popup-converter .period-disclosure > summary { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; width:100%; min-height:0; padding:11px 4px; border:1px solid var(--line); border-radius:4px; background:var(--canvas,var(--surface)); color:var(--ink); cursor:pointer; list-style:none; text-align:center; }
#conversor.period-popup-converter .period-disclosure > summary::-webkit-details-marker { display:none; }
#conversor.period-popup-converter .period-disclosure > summary:focus-visible { outline:3px solid var(--period-accent); outline-offset:2px; }
#conversor.period-popup-converter .period-rail-title { color:var(--ink-soft); font-size:.66rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
#conversor.period-popup-converter .period-rail-action { color:var(--period-accent); font-size:.64rem; font-weight:800; }
#conversor.period-popup-converter .period-disclosure summary strong { max-width:100%; font-size:.78rem; font-weight:850; line-height:1.15; overflow-wrap:anywhere; text-transform:uppercase; }
#conversor.period-popup-converter .period-disclosure[open] > summary { border-color:var(--period-accent); background:var(--period-soft); }
#conversor.period-popup-converter .period-panel { position:absolute; z-index:31; top:0; left:calc(100% + 10px); box-sizing:border-box; width:min(420px,calc(100vw - 135px)); overflow:visible; padding:12px 16px 16px; border:1px solid var(--line); border-radius:4px; background:var(--paper); box-shadow:0 12px 30px rgba(0,0,0,.15); opacity:0; transform:translateX(-12px); transition:opacity 150ms ease-out,transform 150ms ease-out; }
#conversor.period-popup-converter .period-disclosure.is-open .period-panel { opacity:1; transform:none; }
#conversor.period-popup-converter .period-panel-head { display:flex; align-items:center; justify-content:space-between; min-height:44px; margin:-4px 0 12px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.8rem; font-weight:800; }
#conversor.period-popup-converter .period-panel-head button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; }
#conversor.period-popup-converter .period-panel-head button:hover { color:var(--period-accent); }
#conversor.period-popup-converter .period-panel-head button:focus-visible { outline:3px solid var(--period-accent); outline-offset:-3px; }
#conversor.period-popup-converter .period-panel-head svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
#conversor.period-popup-converter .period-panel .converter-period-row,
#conversor.period-popup-converter .period-panel .period-row { margin:0 0 12px; }
#conversor.period-popup-converter .period-panel .converter-date-shortcuts,
#conversor.period-popup-converter .period-panel .month-shortcuts { display:grid; }
#conversor.period-popup-converter .month-shortcut-track { grid-template-columns:repeat(5,minmax(0,1fr)); }
#conversor.period-popup-converter .period-panel .period-actions,
#conversor.period-popup-converter .period-panel .converter-date-actions { display:none!important; }
#conversor.period-popup-converter .period-rail-reset { position:relative; z-index:29; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; height:52px; min-width:0; padding:4px 2px; border:1px solid var(--line); border-radius:4px; background:var(--canvas,var(--surface)); color:var(--ink-soft); cursor:pointer; }
#conversor.period-popup-converter .period-rail-reset:hover,
#conversor.period-popup-converter .period-rail-reset:focus-visible { border-color:var(--period-accent); color:var(--period-accent); }
#conversor.period-popup-converter .period-rail-reset:focus-visible { outline:3px solid var(--period-accent); outline-offset:2px; }
#conversor.period-popup-converter .period-rail-reset svg { width:20px; height:20px; }
#conversor.period-popup-converter .period-rail-reset span { font-size:.75rem; font-weight:800; line-height:1.1; }
#conversor.period-popup-converter .period-panel .converter-period-row { grid-template-columns:minmax(0,1fr); gap:8px; }
#conversor.period-popup-converter .period-panel .converter-date-group { grid-column:1; grid-row:1; min-width:0; }
#conversor.period-popup-converter .period-panel .converter-date-fields { width:100%; grid-template-columns:60px minmax(0,1fr) 96px; gap:6px; }
#conversor.period-popup-converter .period-panel .converter-period-status { grid-column:1; grid-row:2; }

/* Modo historico: el boton de fecha se marca igual que el resto del conversor.
   Es el control que puso el sitio en historico; que fuera el unico en azul
   mientras el resto iba en ambar era justo lo contrario de lo que ayuda.
   Cada sitio define --period-historical arriba: --amber en UF, --gold en UTM. */
#conversor.period-popup-converter[data-historical-period="true"] .period-disclosure > summary { border-color:var(--period-historical); background:color-mix(in srgb, var(--period-historical) 12%, var(--paper)); }
#conversor.period-popup-converter[data-historical-period="true"] .period-disclosure > summary strong,
#conversor.period-popup-converter[data-historical-period="true"] .period-rail-action { color:color-mix(in srgb, var(--period-historical) var(--period-historical-mix), var(--ink)); }

@media(min-width:431px) and (max-width:801px) {
  #conversor.period-popup-converter .month-shortcut[data-initial-mobile-hidden] { display:flex; }
}
@media(max-width:430px) {
  #conversor.period-popup-converter .month-shortcut-track { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:700px) {
  #conversor.period-popup-converter { padding-left:14px!important; }
  #conversor.period-popup-converter .period-date-controls { position:static; width:auto; }
  #conversor.period-popup-converter .period-date-controls { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:start; gap:8px; margin:12px 0; }
  #conversor.period-popup-converter .period-rail-reset { width:48px; min-width:48px; height:48px; margin:0; }
  #conversor.period-popup-converter .period-disclosure { width:100%; min-width:0; margin:0; }
  #conversor.period-popup-converter .period-disclosure > summary { flex-direction:row; justify-content:space-between; gap:4px; width:100%; min-height:48px; padding:8px; text-align:left; }
  #conversor.period-popup-converter .period-disclosure summary strong { margin-right:auto; overflow-wrap:normal; }
  #conversor.period-popup-converter .period-panel { top:56px; left:0; width:calc(100% + 56px); padding:12px; }
  #conversor.period-popup-converter .period-panel .period-row { grid-template-columns:minmax(0,1fr); }
  #conversor.period-popup-converter .period-panel .period-selectors { grid-column:1; grid-row:1; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); }
  #conversor.period-popup-converter .period-panel .converter-date-fields { grid-template-columns:42px minmax(0,1fr) 60px; gap:5px; }
}
@media(min-width:701px) {
  #conversor.period-popup-converter .converter-row { margin-top:12px; }
}
@media(min-width:1181px) {
  #conversor.period-popup-converter .calm-control-row { grid-template-columns:minmax(0,1fr) minmax(340px,1.1fr); gap:12px; }
  #conversor.period-popup-converter .calm-primary-actions { grid-column:2; grid-template-columns:minmax(0,1fr) minmax(174px,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  #conversor.period-popup-converter .period-panel { transition:none; transform:none; }
}