/* ============================================================================
   conversor-yenes.css — Conversor de euros a yenes (UI v2, rediseño oct-2026).
   Patrón de herramientas: cabecera compacta, el conversor y la calculadora de presupuesto
   en el panel de herramienta común (.ui-tool-panel, ui.css) con los controles en blanco;
   tablas, notas, CTA, relacionados y FAQ con los componentes comunes. Solo tokens --ui-*
   (no carga reservajapon.css). Todas las cifras salen de RJ_EUR_TO_JPY.

   CONTRATO con conversor-yenes.js — no renombrar: eur-input, jpy-input, days-minus/val/plus,
   calc-result, .cy-style-btn[data-profile] (+ .active). El JS inyecta en #calc-result:
   .ui-table > table.cy-calc-table (+ tr.cy-calc-total).
   ============================================================================ */

/* Cabecera compacta: el conversor tiene que verse en la primera pantalla */
.ui-cy .cy-top { padding-top: 32px; }
body.ui2 .ui-cy .cy-top .ui-article-title { font-size: clamp(28px, 3.4vw, 36px); }
body.ui2 .ui-cy .cy-top .ui-article-sub { margin-top: 8px; font-size: 17px; }
.ui-cy .ui-article-body { padding-top: 28px; }
.ui-cy .cy-first { margin-top: 0; }
.ui-cy .ui-article-section > .ui-prose + .ui-tool-panel { margin-top: 24px; }
.ui-cy .ui-tool-panel + .ui-prose { margin-top: 24px; }

/* ── Campos comunes ────────────────────────────────────────────────────────── */
.cy-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cy-label { font-size: 14px; color: var(--ui-ink-2); }

/* ── Conversor EUR ↔ JPY ───────────────────────────────────────────────────── */
.cy-conv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; }
.cy-input {
    width: 100%; height: 72px; padding: 0 18px;
    border: 1px solid var(--ui-line-strong); border-radius: 14px; background: var(--ui-bg);
    font: inherit; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-ink);
    font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.cy-input::-webkit-outer-spin-button, .cy-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cy-input:focus-visible { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }
.cy-conv-eq { height: 72px; display: flex; align-items: center; font-size: 28px; color: var(--ui-ink-3); }
.cy-rate { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ui-ink-2); }
.cy-rate strong { color: var(--ui-ink); font-weight: 600; }

/* ── Tabla de conversión rápida: las dos direcciones lado a lado ───────────── */
.ui-cy .ui-prose + .cy-tables { margin-top: 24px; }
.cy-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
body.ui2 .cy-table-h { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ui-ink); }
body.ui2 .ui-cy .ui-article-body table td { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Calculadora de presupuesto ───────────────────────────────────────────── */
.cy-calc-inputs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: end; }
.cy-stepper {
    display: flex; align-items: center; gap: 8px; padding: 8px;
    border: 1px solid var(--ui-line-strong); border-radius: 14px; background: var(--ui-bg);
}
.cy-stepper button {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ui-surface); cursor: pointer;
    font: inherit; font-size: 20px; line-height: 1; color: var(--ui-ink);
}
.cy-stepper-val { min-width: 56px; text-align: center; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
/* Estilo de viaje: control segmentado (botones blancos; el elegido, en tinta) */
.cy-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cy-style-btn {
    height: 62px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: 14px; background: var(--ui-bg);
    cursor: pointer; font: inherit; font-size: 16px; font-weight: 500; color: var(--ui-ink);
}
.cy-style-btn.active { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff; }
.cy-style-btn:focus-visible, .cy-stepper button:focus-visible { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }

/* Resultado (lo pinta el JS): tabla blanca con el total destacado */
.cy-calc-result { margin-top: 24px; }
.cy-calc-result .ui-table { padding: 4px 20px; border-radius: 14px; background: var(--ui-bg); }
body.ui2 .ui-cy .cy-calc-table :is(th, td):not(:first-child) { text-align: right; padding-right: 0; padding-left: 12px; }
body.ui2 .ui-cy .cy-calc-table tr:last-child td { border-bottom: 0; }
body.ui2 .ui-cy .cy-calc-table tr.cy-calc-total td { color: var(--ui-ink); font-weight: 700; }
.cy-calc-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ui-ink-2); }
.cy-calc-note a { color: var(--ui-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (hover: hover) {
    .cy-stepper button:hover { background: var(--ui-line); }
    .cy-style-btn:not(.active):hover { border-color: var(--ui-ink-3); }
}

@media (max-width: 600px) {
    .ui-cy .cy-top { padding-top: 20px; }
    .ui-cy .ui-article-body { padding-top: 20px; }
    .cy-conv-row { grid-template-columns: 1fr; gap: 12px; }
    .cy-conv-eq { display: none; }
    .cy-input { height: 60px; font-size: 28px; }
    .cy-tables { grid-template-columns: 1fr; }
    .cy-calc-inputs { grid-template-columns: 1fr; }
    .cy-stepper { justify-content: space-between; }
    .cy-style-btn { height: 52px; font-size: 15px; }
    .cy-calc-result .ui-table { padding: 2px 14px; }
}