/* Conversor principal: fecha en la cabecera y selector modal, sin riel lateral. */
#conversor.period-popup-converter {
  --period-accent: var(--green, var(--teal));
  --period-historical: var(--amber, #b45309);
  position: relative;
  overflow: visible;
  padding-inline: clamp(14px, 2vw, 30px) !important;
}
#conversor.period-popup-converter .converter-header-row { gap: 16px; border-bottom: 0; }
#conversor.period-popup-converter .converter-heading { min-width: 0; }
#conversor.period-popup-converter .converter-header-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}
#conversor.period-popup-converter .converter-header-tools .converter-badge { display: none; }
#conversor.period-popup-converter .period-kicker-compact { display: none; }
#conversor.period-popup-converter .period-return { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; padding: 4px 5px; border: 0; background: transparent; color: var(--period-historical); font: inherit; font-size: .81rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
#conversor.period-popup-converter .period-return[hidden] { display: none; }
#conversor.period-popup-converter .period-return:focus-visible { outline: 3px solid var(--period-historical); outline-offset: 2px; }
#conversor.period-popup-converter .period-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-width: 156px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas, var(--paper));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
#conversor.period-popup-converter .period-trigger:hover { border-color: var(--period-accent); }
#conversor.period-popup-converter .period-trigger:focus-visible,
#conversor.period-popup-converter .converter-clear:focus-visible,
#conversor.period-popup-converter .period-apply:focus-visible { outline: 3px solid var(--period-accent); outline-offset: 2px; }
#conversor.period-popup-converter .period-trigger > svg:first-child { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--period-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#conversor.period-popup-converter .period-trigger span { display: grid; gap: 2px; min-width: 0; }
#conversor.period-popup-converter .period-trigger small { color: var(--ink-soft); font-size: .75rem; line-height: 1.1; }
#conversor.period-popup-converter .period-trigger strong { font-size: .85rem; line-height: 1.15; white-space: nowrap; }
#conversor.period-popup-converter .period-trigger-chevron { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; }
#conversor.period-popup-converter[data-historical-period="true"] .period-trigger { 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-trigger strong,
#conversor.period-popup-converter[data-historical-period="true"] .period-trigger > svg:first-child { color: var(--period-historical); stroke: var(--period-historical); }

#conversor.period-popup-converter .period-panel {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(2, 8, 23, .25);
}
#conversor.period-popup-converter .period-panel::backdrop { background: rgba(2, 8, 23, .6); }
#conversor.period-popup-converter .period-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#conversor.period-popup-converter .period-panel-head h3 { margin: 0; font-size: clamp(1.2rem, 4.5vw, 1.55rem); line-height: 1.2; }
#conversor.period-popup-converter .period-panel-head button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas, var(--paper)); color: var(--ink); cursor: pointer; }
#conversor.period-popup-converter .period-panel-head button:focus-visible { outline: 3px solid var(--period-accent); outline-offset: 2px; }
#conversor.period-popup-converter .period-panel-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#conversor.period-popup-converter .period-panel .converter-period-row { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 16px; }
#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: 72px minmax(0, 1fr) 112px; gap: 8px; }
#conversor.period-popup-converter .period-panel .converter-date-fields select { height: 50px; min-height: 50px; color-scheme: light; }
:root[data-theme="dark"] #conversor.period-popup-converter .period-panel .converter-date-fields select { color-scheme: dark; }
#conversor.period-popup-converter .period-panel .converter-period-status { grid-column: 1; grid-row: 2; }
#conversor.period-popup-converter .period-panel .period-panel-summary { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; }
#conversor.period-popup-converter .period-panel .period-rate-preview { min-width: 0; margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
#conversor.period-popup-converter .period-panel .period-today { justify-self: end; white-space: nowrap; }
#conversor.period-popup-converter .period-panel .converter-date-shortcuts { display: grid; }
#conversor.period-popup-converter .period-panel .date-shortcut-track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#conversor.period-popup-converter .period-today { display: block; min-height: 36px; margin: 0; padding: 4px 0; border: 0; background: transparent; color: var(--period-accent); font: inherit; font-size: .84rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#conversor.period-popup-converter .period-today[hidden] { display: block; visibility: hidden; }
#conversor.period-popup-converter .period-today:focus-visible { outline: 3px solid var(--period-accent); outline-offset: 2px; }
#conversor.period-popup-converter .period-apply { display: block; width: 100%; min-height: 44px; margin-top: 18px; border: 1px solid var(--period-accent); border-radius: var(--radius); background: var(--period-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
#conversor.period-popup-converter .period-apply:hover { filter: brightness(.92); }
#conversor.period-popup-converter .period-panel[data-pending-historical="true"] .converter-date-fields select { border-color: color-mix(in srgb, var(--period-historical) 72%, var(--line)); background: color-mix(in srgb, var(--period-historical) 7%, var(--paper)); }
#conversor.period-popup-converter .period-panel[data-pending-historical="true"] .period-apply { border-color: var(--period-historical); background: var(--period-historical); }
#conversor.period-popup-converter .period-panel[data-pending-historical="true"] .period-apply:focus-visible { outline-color: var(--period-historical); }
:root[data-theme="dark"] #conversor.period-popup-converter .period-apply,
:root[data-theme="dark"] #conversor.period-popup-converter #copy-result { color: #07111f; }

#conversor.period-popup-converter .calc-label-and-unit { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
#conversor.period-popup-converter .calc-label-and-unit .calc-label { white-space: nowrap; }
#conversor.period-popup-converter .calc-label-and-unit .calc-currency-tag { margin: 0; }
#conversor.period-popup-converter .converter-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 48px; min-height: 36px; margin: -8px -6px -8px 0; padding: 4px 6px; border: 0; background: transparent; color: var(--teal-dark); font: inherit; font-size: .82rem; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#conversor.period-popup-converter .converter-clear:hover { color: var(--teal); }
#conversor.period-popup-converter .converter-footer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; margin-top: 30px; }
#conversor.period-popup-converter .converter-helper { display: block; min-width: 0; margin: 0; line-height: 1.45; text-align: left; }
#conversor.period-popup-converter .converter-live-dot { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }
#conversor.period-popup-converter .converter-reset-row { display: flex; justify-content: flex-end; margin: 0; }
#conversor.period-popup-converter .converter-reset { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: .78rem; font-weight: 400; cursor: pointer; }
#conversor.period-popup-converter .converter-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
#conversor.period-popup-converter .converter-reset:focus-visible { outline: 2px solid var(--period-accent); outline-offset: 2px; }
#conversor.period-popup-converter .converter-actions-row .action-btn:disabled,
#conversor.period-popup-converter .converter-actions-row .action-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

@media (max-width: 600px) {
  #conversor.period-popup-converter .converter-footer-row { grid-template-columns: minmax(0, 1fr); margin-top: 22px; row-gap: 2px; }
  #conversor.period-popup-converter .converter-reset-row { justify-self: end; }
}

@media (max-width: 700px) {
  #conversor.period-popup-converter .converter-header-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  #conversor.period-popup-converter .converter-heading,
  #conversor.period-popup-converter .converter-header-tools { display: contents; }
  #conversor.period-popup-converter .hero-kicker { grid-column: 1; grid-row: 1; align-self: center; }
  #conversor.period-popup-converter[data-historical-period="true"] .hero-kicker { display: none; }
  #conversor.period-popup-converter .period-return { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; }
  #conversor.period-popup-converter .period-kicker-full { display: none; }
  #conversor.period-popup-converter .period-kicker-compact { display: inline; }
  #conversor.period-popup-converter .converter-title { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 2px; }
  #conversor.period-popup-converter .period-trigger { grid-column: 2; grid-row: 1; min-width: 128px; min-height: 44px; padding: 5px 7px; gap: 6px; }
  #conversor.period-popup-converter .period-trigger > svg:first-child { width: 17px; height: 17px; flex-basis: 17px; }
  #conversor.period-popup-converter .period-trigger small { font-size: .75rem; }
  #conversor.period-popup-converter .period-trigger strong { font-size: .76rem; }
}
@media (max-width: 430px) {
  #conversor.period-popup-converter .period-panel { padding: 16px; }
  #conversor.period-popup-converter .period-panel .converter-date-fields { grid-template-columns: 78px minmax(0, 1fr); }
  #conversor.period-popup-converter .period-panel .converter-date-fields label:last-child { grid-column: 1 / -1; }
  #conversor.period-popup-converter .period-panel .period-panel-summary { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(2.8em, auto) 36px; gap: 2px; }
  #conversor.period-popup-converter .period-panel .period-today { grid-row: 2; }
  #conversor.period-popup-converter .period-panel .date-shortcut-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #conversor.period-popup-converter .calc-label-and-unit { gap: 5px; }
  #conversor.period-popup-converter .calc-label-and-unit .calc-label { font-size: .82rem; }
  #conversor.period-popup-converter .calc-label-and-unit .calc-currency-tag { font-size: .78rem; }
}
@media (max-width: 360px) {
  #conversor.period-popup-converter .converter-header-row { column-gap: 14px; }
  #conversor.period-popup-converter .calc-label-and-unit .calc-currency-tag { display: none; }
  #conversor.period-popup-converter .period-trigger { min-width: 0; gap: 3px; padding-inline: 5px; }
  #conversor.period-popup-converter .period-trigger-chevron { width: 12px; height: 12px; }
}
/* Texto de los selects del diálogo a 1rem en todo ancho: bajo 430 px heredaba .75rem (12 px), más chico que en escritorio y con zoom automático en iPhone. */
#conversor.period-popup-converter .period-panel .converter-date-fields select { font-size: 1rem; }
/* Selects del diálogo: con puntero fino, lista desplegable propia con el mismo aire que el texto del campo. Táctil y navegadores sin base-select conservan la lista nativa. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    #conversor.period-popup-converter .period-panel .converter-date-fields select,
    #conversor.period-popup-converter .period-panel .converter-date-fields select::picker(select) { appearance: base-select; }
    #conversor.period-popup-converter .period-panel .converter-date-fields select { display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; }
    #conversor.period-popup-converter .period-panel .converter-date-fields select:hover,
    #conversor.period-popup-converter .period-panel .converter-date-fields select:open { border-color: var(--period-accent); }
    #conversor.period-popup-converter .period-panel .converter-date-fields select:focus-visible { outline: 3px solid var(--period-accent); outline-offset: 2px; }
    #conversor.period-popup-converter .period-panel .converter-date-fields select::picker-icon { content: ""; flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .15s ease; }
    #conversor.period-popup-converter .period-panel .converter-date-fields select:open::picker-icon { transform: rotate(180deg); }
    #conversor.period-popup-converter .period-panel .converter-date-fields select::picker(select) { box-sizing: border-box; min-width: anchor-size(width); max-height: min(528px, calc(100% - 12px)); margin-block: 6px; padding: 6px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px rgba(2, 8, 23, .18); }
    #conversor.period-popup-converter .period-panel .converter-date-fields select[data-date-part="day"]::picker(select) { min-width: max(anchor-size(width), 100px); }
    #conversor.period-popup-converter .period-panel .converter-date-fields option { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: var(--radius); color: var(--ink); font-size: 1rem; font-weight: 600; cursor: pointer; }
    #conversor.period-popup-converter .period-panel .converter-date-fields option:hover,
    #conversor.period-popup-converter .period-panel .converter-date-fields option:focus-visible { background: color-mix(in srgb, var(--period-accent) 11%, var(--paper)); outline: none; }
    #conversor.period-popup-converter .period-panel .converter-date-fields option:checked { background: var(--period-accent); color: #fff; font-weight: 800; }
    #conversor.period-popup-converter .period-panel .converter-date-fields option::checkmark { order: 1; margin-left: auto; }
    #conversor.period-popup-converter .period-panel .converter-date-fields option:disabled { background: transparent; color: var(--ink-soft); opacity: .55; cursor: not-allowed; }
    :root[data-theme="dark"] #conversor.period-popup-converter .period-panel .converter-date-fields option:checked { color: #07111f; }
    :root[data-theme="dark"] #conversor.period-popup-converter .period-panel .converter-date-fields select::picker(select) { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
  }
}

/* Fila «Unidad de Fomento · UF · Borrar»: en anchos intermedios (la calculadora comparte fila con
   el hero) y con A+, el campo queda angosto y la sigla se montaba sobre «Borrar». El campo mide
   su propio ancho: primero cae la sigla (la etiqueta ya dice Unidad de Fomento); si ni así cabe,
   la sigla pasa a ser la etiqueta y el nombre completo queda solo para lectores de pantalla.
   Umbrales en em: escalan con A+. */
#conversor.period-popup-converter .calc-field-group:has(.converter-clear) { container-type: inline-size; }
@container (max-width: 16.5em) {
  #conversor.period-popup-converter .calc-label-and-unit .calc-currency-tag { display: none; }
}
/* Como en valor-utm.cl: etiqueta a la izquierda y sigla a la derecha, pegada a «Borrar» en el
   campo donde se escribe («Unidad de Fomento ··· UF Borrar») y sola en el de resultado
   («Pesos chilenos ··· CLP»). */
#conversor.period-popup-converter .calc-label-and-unit { display: flex; flex: 1 1 auto; justify-content: space-between; }
/* La fila separa 10 px y «Borrar» suma su relleno: la sigla quedaba a 16 px. En UTM está a 8. */
#conversor.period-popup-converter .calc-field-group:has(.converter-clear) .calc-label-and-unit .calc-currency-tag { margin-right: -8px; }
@container (max-width: 13.4em) {
  #conversor.period-popup-converter .calc-label-and-unit .calc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #conversor.period-popup-converter .calc-label-and-unit .calc-currency-tag { display: inline; }
}
/* Sigla y «Borrar» se leen como un par: mismo tamaño (14 px), misma línea base que la etiqueta y
   8 px de letra a letra, igual que en valor-utm.cl. La sigla tenía min-width de 38 px con el texto
   centrado: 8 px invisibles que la alejaban de «Borrar». */
#conversor.period-popup-converter .calc-label-and-unit .calc-currency-tag { min-width: 0; text-align: right; font-size: .875rem; }
#conversor.period-popup-converter .calc-label-row .converter-clear { font-size: .875rem; }

/* Fecha futura ya publicada (la UF de mañana): todo lo que en el pasado va en ámbar va en dorado,
   y el valor grande también, para que nadie la confunda con la de hoy. #a16207 da 4,9:1 sobre blanco.
   Va aquí y no en styles.css: la portada recorta su CSS según el HTML inicial, y data-future-period
   lo pone app.js después. */
.home-quote-stage[data-future-period="true"],
#conversor[data-future-period="true"] { --amber: #a16207; }
:root[data-theme="dark"] .home-quote-stage[data-future-period="true"],
:root[data-theme="dark"] #conversor[data-future-period="true"] { --amber: #facc15; }
.home-quote-stage[data-future-period="true"] #main-rate-display,
.home-quote-stage[data-future-period="true"] #hero-period-heading { color: var(--amber); }