/* Fecha UTM junto al título y elección confirmada en un diálogo accesible. */
#conversor.period-dialog-converter{position:relative;overflow:visible;padding:22px 24px 20px!important;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
#conversor.period-dialog-converter .console-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 18px;padding:0;border:0}
#conversor.period-dialog-converter .console-heading>div{flex:none;min-width:0}
#conversor.period-dialog-converter .console-heading>.converter-heading{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:22px auto;column-gap:8px;align-items:start;flex:1 1 0;min-width:0}
#conversor.period-dialog-converter .console-heading>.converter-heading-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;flex-wrap:nowrap}
#conversor.period-dialog-converter .converter-heading .eyebrow{grid-column:1;grid-row:1;align-self:center}
#conversor.period-dialog-converter .converter-heading .period-return{grid-column:2;grid-row:1;justify-self:end;align-self:center;white-space:nowrap}
#conversor.period-dialog-converter .console-heading h2{grid-column:1/-1;grid-row:2;margin:8px 0 0;font-size:1.45rem;line-height:1.16}
#conversor.period-dialog-converter .rate-pill{display:none;margin:0;white-space:nowrap}
#conversor.period-dialog-converter .period-trigger{display:flex;align-items:center;gap:9px;min-width:163px;min-height:58px;padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
#conversor.period-dialog-converter .period-trigger:hover,#conversor.period-dialog-converter .period-trigger:focus-visible{border-color:var(--green);outline:2px solid transparent}
#conversor.period-dialog-converter .period-trigger svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#conversor.period-dialog-converter .period-trigger span{display:grid;gap:2px;min-width:0}
#conversor.period-dialog-converter .period-trigger small{color:var(--ink-soft);font-size:.8rem;line-height:1.1;white-space:nowrap}
#conversor.period-dialog-converter .period-trigger strong{font-size:.85rem;line-height:1.15;white-space:nowrap;text-transform:capitalize}
#conversor.period-dialog-converter .period-trigger .period-trigger-chevron{width:16px;height:16px;margin-left:auto;stroke:var(--ink)}
#conversor.period-dialog-converter[data-historical-period="true"] .period-trigger{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--paper))}
#conversor.period-dialog-converter[data-historical-period="true"] .period-trigger strong,#conversor.period-dialog-converter[data-historical-period="true"] .period-trigger svg{color:color-mix(in srgb,var(--gold) 65%,var(--ink));stroke:currentColor}
#conversor.period-dialog-converter .period-return,#conversor.period-dialog-converter .period-dialog-today{border:0;background:transparent;color:var(--green);font:inherit;font-size:.8rem;font-weight:800;text-decoration:underline;cursor:pointer}
#conversor.period-dialog-converter .period-return[hidden],#conversor.period-dialog-converter .period-dialog-today[hidden]{display:none!important}
#conversor.period-dialog-converter .converter-row{margin:0}
#conversor.period-dialog-converter .field-label-row{justify-content:flex-start}
#conversor.period-dialog-converter .field-label-row>span{margin-right:auto}
#conversor.period-dialog-converter .converter-clear{flex:0 0 auto;padding:4px 0;border:0;background:transparent;color:var(--green);font:inherit;font-size:.8rem;font-weight:800;text-decoration:underline;cursor:pointer}
#conversor.period-dialog-converter .converter-clear:hover,#conversor.period-dialog-converter .converter-clear:focus-visible{color:var(--action);outline-offset:3px}
#conversor.period-dialog-converter .calm-control-row{grid-template-columns:minmax(0,.9fr) 12px minmax(0,1.1fr)}
#conversor.period-dialog-converter .calm-utilities{display:block}
#conversor.period-dialog-converter .calm-primary-actions .button{white-space:nowrap;font-size:.8rem}
#conversor.period-dialog-converter .copy-label-short{display:none}
#conversor.period-dialog-converter .calm-amounts[data-quick-currency="CLP"] button{font-size:.8rem;line-height:1.1;white-space:nowrap}
#conversor.period-dialog-converter .calm-primary-actions .button:disabled,#conversor.period-dialog-converter .calm-primary-actions a[aria-disabled="true"]{opacity:.52;cursor:not-allowed;pointer-events:none}
#conversor.period-dialog-converter .equation{min-height:1.5em}
#conversor.period-dialog-converter .period-dialog{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:24px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);overflow:auto}
#conversor.period-dialog-converter .period-dialog::backdrop{background:rgba(8,18,30,.58)}
#conversor.period-dialog-converter .period-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
#conversor.period-dialog-converter .period-dialog-head h3{margin:4px 0 0;font-size:1.55rem;line-height:1.18}
#conversor.period-dialog-converter .period-dialog-head button{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);cursor:pointer}
#conversor.period-dialog-converter .period-dialog-head svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#conversor.period-dialog-converter .period-selectors{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;margin-bottom:12px}
#conversor.period-dialog-converter .period-selectors label{display:grid;gap:6px;color:var(--ink-soft);font-size:.8rem;font-weight:850;text-transform:uppercase}
#conversor.period-dialog-converter .period-selectors select{box-sizing:border-box;width:100%;height:50px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:inherit;font-weight:800}
#conversor.period-dialog-converter .period-dialog-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:36px;margin:0 0 16px}
#conversor.period-dialog-converter .period-dialog-rate{min-width:0;margin:0;color:var(--ink-soft);font-size:.8rem;line-height:1.4}
#conversor.period-dialog-converter .period-dialog-summary .period-dialog-today{justify-self:end;white-space:nowrap}
#conversor.period-dialog-converter .period-dialog-summary .period-dialog-today[hidden]{display:block!important;visibility:hidden}
#conversor.period-dialog-converter .month-shortcuts{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;margin:0 0 18px}
#conversor.period-dialog-converter .month-shortcut-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#conversor.period-dialog-converter .month-shortcut,#conversor.period-dialog-converter .month-shortcut-arrow{height:56px}
#conversor.period-dialog-converter .month-shortcut[aria-current="date"]{border-color:var(--green);background:var(--green);color:#fff}
#conversor.period-dialog-converter .period-dialog[data-pending-historical="true"] .month-shortcut[aria-current="date"]{border-color:var(--gold);background:var(--gold);color:#07111f}
#conversor.period-dialog-converter .period-dialog[data-pending-historical="true"] .month-shortcut[aria-current="date"] small,#conversor.period-dialog-converter .period-dialog[data-pending-historical="true"] .month-shortcut[aria-current="date"] strong{color:#07111f}
#conversor.period-dialog-converter .period-dialog-today{display:block;margin:0;padding:2px 0}
#conversor.period-dialog-converter .period-apply{display:block;width:100%;min-height:50px;border:1px solid var(--green);border-radius:4px;background:var(--green);color:#fff;font:inherit;font-weight:850;cursor:pointer}
#conversor.period-dialog-converter .period-dialog[data-pending-historical="true"] .period-apply{border-color:var(--gold);background:var(--gold);color:#07111f}
:root[data-theme="dark"] #conversor.period-dialog-converter .period-apply,
:root[data-theme="dark"] #conversor.period-dialog-converter .month-shortcut[aria-current="date"],
:root[data-theme="dark"] #conversor.period-dialog-converter .month-shortcut[aria-current="date"] small,
:root[data-theme="dark"] #conversor.period-dialog-converter .month-shortcut[aria-current="date"] strong{color:#07111f}
:root[data-theme="dark"] #conversor.period-dialog-converter .calm-primary-actions .button.primary{border-color:var(--green);background:var(--green);color:#07111f}
#conversor.period-dialog-converter .period-apply:disabled{opacity:.5;cursor:not-allowed}
#conversor.period-dialog-converter .period-apply:focus-visible,#conversor.period-dialog-converter .period-trigger:focus-visible,#conversor.period-dialog-converter .period-dialog-head button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
#conversor.period-dialog-converter .kicker-compact{display:none}
@media(min-width:1101px) and (max-width:1350px){#conversor.period-dialog-converter .console-heading h2{font-size:1.3rem}}
@media(max-width:1180px){#conversor.period-dialog-converter .calm-control-row{grid-template-columns:1fr}#conversor.period-dialog-converter .calm-primary-actions{max-width:none}}
@media(max-width:800px) and (min-width:701px){#conversor.period-dialog-converter .calm-amounts[data-quick-currency="CLP"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#conversor.period-dialog-converter{padding:18px 16px!important}#conversor.period-dialog-converter .rate-pill{display:none}#conversor.period-dialog-converter .console-heading{gap:10px}#conversor.period-dialog-converter .period-trigger{gap:6px;min-width:137px;min-height:44px;padding:5px 7px}#conversor.period-dialog-converter .period-trigger svg{width:17px;height:17px}#conversor.period-dialog-converter .period-trigger small{font-size:.8rem}#conversor.period-dialog-converter .period-trigger strong{font-size:.8rem}#conversor.period-dialog-converter .console-heading h2{font-size:1.32rem}}
@media(max-width:700px){#conversor.period-dialog-converter .kicker-full{display:none}#conversor.period-dialog-converter .kicker-compact{display:inline}}
@media(max-width:430px){#conversor.period-dialog-converter{padding:16px 14px!important}#conversor.period-dialog-converter .console-heading{display:grid;grid-template-columns:minmax(0,1fr) 137px;gap:8px;margin-bottom:16px}#conversor.period-dialog-converter .console-heading>.converter-heading,#conversor.period-dialog-converter .console-heading>.converter-heading-tools{display:contents}#conversor.period-dialog-converter .converter-heading>.eyebrow{grid-column:1;grid-row:1;align-self:center;font-size:.8rem}#conversor.period-dialog-converter .kicker-full{display:none}#conversor.period-dialog-converter .kicker-compact{display:inline}#conversor.period-dialog-converter .converter-heading h2{grid-column:1/-1;grid-row:2;margin:0;font-size:1.3rem}#conversor.period-dialog-converter .period-trigger{grid-column:2;grid-row:1;min-width:0;width:137px;min-height:44px;gap:6px;padding:5px 7px}#conversor.period-dialog-converter .period-trigger svg{width:17px;height:17px}#conversor.period-dialog-converter .period-trigger small{font-size:.8rem}#conversor.period-dialog-converter .period-trigger strong{font-size:.8rem}#conversor.period-dialog-converter .period-trigger .period-trigger-chevron{width:13px;height:13px}#conversor.period-dialog-converter .period-return{grid-column:1/-1;grid-row:3;justify-self:start}#conversor.period-dialog-converter .field-label-row{gap:6px}#conversor.period-dialog-converter .field-label-row>span{font-size:.83rem}#conversor.period-dialog-converter .money-field:not(.result-field) .field-label-row>strong{display:none}#conversor.period-dialog-converter .converter-clear{font-size:.8rem}#conversor.period-dialog-converter .calm-amounts[data-quick-currency="CLP"]{grid-template-columns:repeat(2,minmax(0,1fr))}#conversor.period-dialog-converter .copy-label-full{display:none}#conversor.period-dialog-converter .copy-label-short{display:inline}#conversor.period-dialog-converter .period-dialog{width:calc(100vw - 16px);padding:16px}#conversor.period-dialog-converter .period-dialog-head h3{font-size:1.3rem}#conversor.period-dialog-converter .period-selectors{grid-template-columns:minmax(0,1fr) 100px;gap:8px}#conversor.period-dialog-converter .month-shortcuts{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px}#conversor.period-dialog-converter .month-shortcut-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}}
@media(max-width:350px){#conversor.period-dialog-converter .console-heading{grid-template-columns:minmax(0,1fr) 123px}#conversor.period-dialog-converter .period-trigger{width:123px;gap:3px;padding-inline:5px}#conversor.period-dialog-converter .period-trigger .period-trigger-chevron{width:12px;height:12px}}
@media(max-width:500px){#conversor.period-dialog-converter .period-dialog-summary{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(2.8em,auto) 36px;gap:2px}#conversor.period-dialog-converter .period-dialog-summary .period-dialog-today{grid-row:2}}
@media(max-width:430px){#conversor.period-dialog-converter .converter-heading .period-return{grid-column:1;grid-row:1;justify-self:start}#conversor.period-dialog-converter .converter-heading .eyebrow{grid-column:1;grid-row:1}#conversor.period-dialog-converter[data-historical-period="true"] .converter-heading .eyebrow{visibility:hidden}}
/* Keep frequent amounts and the calculation line in place when direction or amount changes. */
@media(max-width:800px) and (min-width:701px){#conversor.period-dialog-converter .calm-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){#conversor.period-dialog-converter .calm-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){#conversor.period-dialog-converter .equation{min-height:32px}}
#conversor.period-dialog-converter .converter-footer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;margin-top:30px}
#conversor.period-dialog-converter .console-note{min-width:0;margin:0;justify-content:flex-start;text-align:left;line-height:1.45}
#conversor.period-dialog-converter .converter-reset-row{display:flex;justify-content:flex-end;margin:0}
#conversor.period-dialog-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:.8rem;font-weight:400;cursor:pointer}
#conversor.period-dialog-converter .converter-reset:hover{text-decoration:underline;text-underline-offset:3px}
#conversor.period-dialog-converter .converter-reset:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:600px){#conversor.period-dialog-converter .converter-footer-row{grid-template-columns:minmax(0,1fr);margin-top:22px;row-gap:2px}#conversor.period-dialog-converter .converter-reset-row{justify-self:end}}
/* Selects del diálogo: texto al tamaño de valor-uf (heredaban el .74rem de la etiqueta) y, con puntero fino, lista desplegable propia. Táctil y navegadores sin base-select conservan la lista nativa. */
#conversor.period-dialog-converter .period-selectors select{font-size:max(1rem,16px);text-transform:none;letter-spacing:0}
@supports (appearance:base-select){@media (hover:hover) and (pointer:fine){
#conversor.period-dialog-converter .period-selectors select,#conversor.period-dialog-converter .period-selectors select::picker(select){appearance:base-select}
#conversor.period-dialog-converter .period-selectors select{display:flex;align-items:center;gap:10px;padding:0 14px;cursor:pointer}
#conversor.period-dialog-converter .period-selectors select:hover,#conversor.period-dialog-converter .period-selectors select:open{border-color:var(--green)}
#conversor.period-dialog-converter .period-selectors select:focus-visible{outline:3px solid var(--green);outline-offset:2px}
#conversor.period-dialog-converter .period-selectors>label::after{display:none}
#conversor.period-dialog-converter .period-selectors 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-dialog-converter .period-selectors select:open::picker-icon{transform:rotate(180deg)}
#conversor.period-dialog-converter .period-selectors 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:6px;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px rgba(8,18,30,.18)}
#conversor.period-dialog-converter .period-selectors option{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:4px;color:var(--ink);font-size:1rem;font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer}
#conversor.period-dialog-converter .period-selectors option:hover,#conversor.period-dialog-converter .period-selectors option:focus-visible{background:color-mix(in srgb,var(--green) 11%,var(--paper));outline:none}
#conversor.period-dialog-converter .period-selectors option:checked{background:var(--green);color:#fff;font-weight:800}
#conversor.period-dialog-converter .period-selectors option::checkmark{order:1;margin-left:auto}
#conversor.period-dialog-converter .period-selectors option:disabled{background:transparent;color:var(--ink-soft);opacity:.55;cursor:not-allowed}
:root[data-theme="dark"] #conversor.period-dialog-converter .period-selectors option:checked{color:#07111f}
:root[data-theme="dark"] #conversor.period-dialog-converter .period-selectors select::picker(select){box-shadow:0 18px 40px rgba(0,0,0,.45)}
}}
/* Fila «Unidades UTM · UTM · Borrar»: en anchos intermedios y con A+ el campo queda angosto y la
   etiqueta se cortaba en «Unidades U…». El campo mide su propio ancho: primero cae la sigla (la
   etiqueta ya dice UTM); si ni así cabe, la sigla pasa a ser la etiqueta. Umbrales en em: escalan con A+. */
#conversor.period-dialog-converter .money-field:not(.result-field){container-type:inline-size}
@container (max-width:13.4em){#conversor.period-dialog-converter .money-field:not(.result-field) .field-label-row>strong{display:none}}
@container (max-width:10.4em){#conversor.period-dialog-converter .money-field:not(.result-field) .field-label-row>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#conversor.period-dialog-converter .money-field:not(.result-field) .field-label-row>strong{display:inline;margin-right:auto;text-align:left}}
/* Sigla y «Borrar» como un par: mismo tamaño (14 px) y la misma línea base que la etiqueta (la fila
   se centraba y «Borrar» quedaba 1,2 px arriba). Mismo criterio en valor-uf.cl. */
#conversor.period-dialog-converter .money-field>.field-label-row{align-items:baseline}
#conversor.period-dialog-converter .field-label-row>strong,#conversor.period-dialog-converter .field-label-row>small,#conversor.period-dialog-converter .field-label-row>.converter-clear{font-size:.875rem}
/* Mes futuro ya publicado (el siguiente): el valor grande y el título también en dorado. Va aquí porque la
   portada recorta su CSS según el HTML inicial y data-future-period lo pone app.js después. */
.hero[data-future-period="true"] [data-period-value],.hero[data-future-period="true"] [data-period-heading]{color:#a16207}
:root[data-theme="dark"] .hero[data-future-period="true"] [data-period-value],:root[data-theme="dark"] .hero[data-future-period="true"] [data-period-heading]{color:#facc15}