/* ========================================================================= */
/* == MÓDULO DE INPUTS DEL CONVERSOR v5.3 (AJUSTE RESPONSIVO FINAL)       == */
/* ========================================================================= */

.widget-content {
    padding-top: 0 !important;
}

/* 1. EL MARCO INTELIGENTE */
.converter-display {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 240px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: 1rem 0;
}

/* 2. LAS ZONAS DE CONTENIDO */
.converter-display-header   { grid-row: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 0.5rem; }
.converter-display-main     { grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 0.75rem; gap: 0.25rem; overflow: hidden; }
.converter-display-footer   { grid-row: 3; display: flex; align-items: center; justify-content: center; padding-top: 1rem; }

/* 3. ESTILOS DE CONTENIDO REFINADOS */
.date-display-container { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.converter-display-label { font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }

/* ---------- Caja que contiene el resultado ---------- */
.converter-display-main {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 2.2rem 1rem;   /* 🔥 +0.4 rem más que antes */
    gap: 0.25rem;
    overflow: hidden;
}

/* ---------- Línea “1 UF equivale a” ---------- */
.converter-display-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
}

/* ---------- Fila: resultado + botón copiar ---------- */
.converter-display-value-container {
    display: flex;
    align-items: center;
    justify-content: center; /* 🔥 siempre centrado */
    gap: 0.75rem;
    width: 100%;
    min-height: 0;
}

/* ---------- Número grande ---------- */
.converter-display-value {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    line-height: 1.40;      /* 🔥 +0.05 más de altura de línea */
    padding: 0.5em 0;       /* 🔥 +0.1 em extra arriba/abajo */
}

/* ---------- Botón copiar ---------- */
#copyBtn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}

/* --- BLOQUE 2: INPUT PREMIUM (sin cambios) --- */
.single-input-container { display: flex; align-items: center; max-width: 420px; margin: 1.25rem auto; background-color: var(--hover-bg); border-radius: var(--radius-lg); border: 1px solid var(--border-default); }
.input-group { position: relative; flex-grow: 1; border-right: 1px solid var(--border-default); overflow: hidden; }
.input-group:focus-within { box-shadow: 0 0 0 2px var(--x-blue-focus-ring); border-radius: var(--radius-lg); }
.input-group__label { position: absolute; top: 0.6rem; left: 1rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); pointer-events: none; }
.input-group__control { width: 100%; height: 68px; padding: 1.7rem 1rem 0.5rem 1rem; font-size: 2rem; font-weight: 600; color: var(--text-primary); background-color: transparent; border: none; outline: none; text-align: left; -moz-appearance: textfield; }
.input-group__control::-webkit-outer-spin-button, .input-group__control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-actions-wrapper { display: flex; align-items: center; padding: 0 0.5rem; }
.swap-btn, .clear-btn { width: 42px; height: 42px; border-radius: var(--radius-md); color: var(--text-secondary); transition: background-color var(--transition-fast), color var(--transition-fast); }
.input-actions-wrapper .swap-btn { background-color: var(--active-bg); border: 1px solid var(--border-default); }
.input-actions-wrapper .swap-btn i { color: var(--x-blue); font-size: 1.2rem; }
.input-actions-wrapper .swap-btn:hover { border-color: var(--x-blue); }
.input-actions-wrapper .swap-btn:active { transform: scale(0.95); }
.clear-btn { display: none; }
.clear-btn:hover { background-color: var(--active-bg); }

/* --- BLOQUE 3: GRÁFICO (sin cambios) --- */
.chart-container { margin-top: 1.5rem; }

/* 4. MEDIA QUERIES (sin cambios) */
@media (min-width: 768px) { .converter-display { height: 240px; min-height: 240px; } }
@media (max-width: 480px) { .input-group__control { font-size: 1.8rem; } }

@media (max-width: 480px) {
    .converter-display-main { padding: 2rem 1rem; } /* aún más aire */
}


/* -------------------------------------------------
   RESPONSIVE: justito + 0.25 rem (medio cm más)
------------------------------------------------- */
@media (max-width: 768px) {
    .converter-display {
        min-height: auto;
        padding: 0.75rem 0;       /* 🔥 +0.25 rem vs antes */
    }
    .converter-display-header {
        padding-bottom: 0.45rem;  /* 🔥 +0.25 rem */
    }
    .converter-display-main {
        padding: 0.65rem 0.75rem; /* 🔥 +0.25 rem */
        gap: 0.1rem;
    }
    .converter-display-footer {
        padding-top: 0.65rem;     /* 🔥 +0.25 rem */
    }
    .converter-display-label {
        font-size: 1rem;
        margin-bottom: 0.25rem;   /* 🔥 +0.15 rem */
    }
    .converter-display-value {
        line-height: 1.2;
        padding: 0.25em 0;        /* 🔥 +0.15 em */
    }
}

@media (max-width: 480px) {
    .converter-display {
        padding: 0.55rem 0;       /* 🔥 +0.25 rem vs antes */
    }
    .converter-display-main {
        padding: 0.55rem 0.5rem;
    }
}

/* Compactación móvil del conversor */
@media (max-width: 768px) {
  /* Marco del display (fecha + valor + timeline) */
  .converter-display {
    min-height: auto;
    padding: 0.35rem 0 0.15rem;    /* antes ~0.75–0.55rem */
    margin-bottom: var(--space-4); /* menos separación con inputs */
  }
  .converter-display-header { padding-bottom: 0.25rem; }
  .date-display-container { font-size: 0.95rem; gap: 0.25rem; }

  .converter-display-main {
    padding: 0.4rem 0.5rem 0.15rem;
    gap: 0.05rem;                  /* reducir espacio interno */
  }
  .converter-display-label {      /* “1 UF equivale a” */
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
  }
  .converter-display-value {
    line-height: 1.15;
    padding: 0.15em 0 0.1em;
  }
  .converter-display-footer { padding-top: 0.45rem; }

  /* Timeline: menos alto y padding */
  .timeline-navigation-container {
    max-width: 240px;
    padding: var(--space-1) 0;
  }
  .timeline-item {
    min-width: 56px;
    height: 46px;
    padding: var(--space-1);
  }
  .timeline-item .month-name { font-size: 0.6em; }
  .timeline-item .day-number { font-size: 0.78em; }

  /* Input premium: compactar altura y márgenes */
  .single-input-container { margin: 0.75rem auto 0.5rem; }
  .input-groupcontrol {
    height: 58px;                 /* antes ~68px */
    padding: 1.3rem 0.9rem 0.4rem;
    font-size: 1.6rem;            /* mantiene legibilidad */
  }
  .input-grouplabel { top: 0.5rem; font-size: 0.75rem; }
  .input-actions-wrapper .swap-btn,
  .input-actions-wrapper .clear-btn {
    width: 38px; height: 38px;
  }

  /* Mini-chart y controles de rango */
  .chart-container {
    height: 140px;
    margin: 0 var(--space-2) var(--space-3);
    padding-bottom: var(--space-1);
  }
  .chart-controls {
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }
  .range-btn { min-height: 30px; font-size: var(--text-sm); }
}

@media (max-width: 480px) {
  .converter-display { padding: 0.3rem 0 0.1rem; }
  .converter-display-main { padding: 0.3rem 0.4rem 0.1rem; }
  .converter-display-value { font-size: 2.1rem; } /* ya existe regla similar; reafirmar */
  .timeline-navigation-container { max-width: 220px; }
  .timeline-item { min-width: 52px; height: 44px; }
  .single-input-container { margin: 0.6rem auto 0.45rem; }
  .input-groupcontrol { height: 54px; font-size: 1.5rem; }
  .chart-container { height: 130px; margin-bottom: var(--space-2); }
}

/* Fecha blanca y un poco más grande en móvil */
@media (max-width: 768px) {
  .date-display-container {
    color: var(--text-on-primary, #fff);
    font-size: 1.05rem;        /* antes ~1rem */
    font-weight: 600;          /* +legibilidad */
    letter-spacing: 0.1px;
  }
  .date-display-container .icon-btn { opacity: 0.9; }
}