/* ========================================================================= */
/* == MÓDULO CONVERSOR v3.5 (SOLUCIÓN DE ALINEACIÓN FINAL)              == */
/* ========================================================================= */

/* --- Variables de color adaptadas --- */
:root {
    --x-green: hsl(130, 85%, 45%);
    --x-green-soft: hsla(130, 85%, 45%, 0.15);
    --x-green-dark: hsl(130, 80%, 30%);
    --chart-gradient-start: hsla(130, 85%, 45%, 0.38);
    --chart-gradient-end: hsla(130, 85%, 45%, 0);
}

/* === ESTILOS BASE === */
.main-content { padding-top: 0.75rem !important; }
.converter-display { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.5rem 1.25rem; background-color: var(--bg-soft); display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.hidden-inputs { display: none; }
.value-and-date-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.display-top-row { display: flex; align-items: baseline; gap: 0.75rem; }
.utm-prefix-info { font-size: 1.2rem; font-weight: 600; color: var(--text-secondary); }
.utm-main-value { display: flex; align-items: baseline; gap: 0.5rem; }
#dailyUfValueText { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1.1; }
#copyDailyUfBtn { font-size: 0.9rem; color: var(--text-muted); }
#copyDailyUfBtn:hover { color: var(--x-green); }
.display-bottom-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); padding-left: 0.1rem; }
#datePickerToggleBtn { font-size: 0.9rem; color: var(--text-muted); }
.date-picker-wrapper { position: relative; display: flex; align-items: center; }
.flatpickr-custom-input { position: absolute; opacity: 0; width: 0; height: 0; border: 0; padding: 0; pointer-events: none; }
.daily-variation-indicator.is-visible { font-weight: 600; font-size: 0.9rem; padding: 0.2rem 0.6rem; border-radius: 9999px; }
.daily-variation-indicator.positive { color: var(--x-green-dark, #059669); background-color: var(--x-green-soft, rgba(16, 185, 129, 0.1)); }
.daily-variation-indicator.negative { color: var(--x-red-dark, #DC2626); background-color: var(--x-red-soft, rgba(239, 68, 68, 0.1)); }

/* --- SECCIÓN DE LA LÍNEA DE TIEMPO (CORREGIDA Y ALINEADA) --- */
.timeline-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 2.25rem;
    
    /* Establecemos un ancho máximo y centramos el contenedor. */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.timeline-viewport { 
    flex-grow: 1; 
    overflow-x: hidden; 
    scroll-behavior: smooth; 
}
.timeline-track { display: flex; gap: .3rem; padding: .25rem 0; justify-content: center; }
.timeline-item { flex: 0 0 72px; height: 70px; padding: .4rem .25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--bg); cursor: pointer; transition: background-color .2s, border-color .2s; text-align: center; }
.timeline-item:hover { background-color: var(--hover-bg); border-color: var(--border-active); }
.timeline-item.selected { background-color: var(--x-green); border-color: var(--x-green); color: #fff; }
.timeline-day-name { font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
.timeline-day-number { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.timeline-uf-value { font-size: .7rem; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .7; }
.timeline-item.selected .timeline-day-number { color: #fff; }
.timeline-item.selected .timeline-day-name, .timeline-item.selected .timeline-uf-value { color: #fff; opacity: .85; }
.timeline-nav-btn { width: 36px; height: 36px; flex-shrink: 0; }
/* --- FIN DE LA SECCIÓN DE LA LÍNEA DE TIEMPO --- */

/* --- SOLUCIÓN MÓVIL: Evita que el navegador "robe" los eventos de toque --- */
.timeline-nav-btn, .timeline-item {
    touch-action: manipulation;
}
/* ----------------------------------------------------------------------- */

.calculator-title { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1.25rem; }
.dual-input-calculator { display: flex; align-items: stretch; gap: 1rem; }
.input-group { flex: 1; min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--bg-soft); display: flex; flex-direction: column; transition: all var(--transition-fast); }
.input-group:focus-within { border-color: var(--x-green); box-shadow: 0 0 0 3px var(--x-green-soft); }
.input-group-header { display: flex; justify-content: space-between; align-items: center; padding: .4rem .85rem; border-bottom: 1px solid var(--border-active); background-color: var(--active-bg); }
.input-group-header label { font-size: .8rem; font-weight: 600; color: var(--text-primary); }
.copy-result-btn { width: 28px; height: 28px; font-size: .85rem; color: var(--text-muted); }
.copy-result-btn:hover { color: var(--x-green); }
.input-group .form-control { height: 60px; font-size: 1.8rem; font-weight: 600; text-align: left; padding: .5rem .85rem; background-color: transparent; border: none; color: var(--text-primary); width: 100%; }
.input-group .form-control:focus { box-shadow: none; background-color: var(--bg); }
.input-group .form-control[readonly] { color: var(--text-secondary); }
.swap-btn { flex-shrink: 0; width: 44px; align-self: center; border-radius: 50%; background-color: var(--active-bg); border: 1px solid var(--border-default); color: var(--x-green); transition: transform .3s ease-out, background-color var(--transition-fast); }
.swap-btn:hover { transform: rotate(180deg); }
.conversion-summary { text-align: center; font-size: .9rem; color: var(--text-secondary); min-height: 1.5em; font-style: italic; margin-top: 1.5rem; }
body.flatpickr-is-open { overflow: auto !important; }
.chart-module { --container-padding: 1.5rem; margin-left: calc(-1 * var(--container-padding)); margin-right: calc(-1 * var(--container-padding)); background-color: var(--bg-soft); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); padding-top: 2.5rem; padding-bottom: 2.5rem; margin-top: 3.5rem; display: flex; flex-direction: column; gap: 2rem; }
.chart-container { padding-left: var(--container-padding); padding-right: var(--container-padding); height: 280px; position: relative; }
.chart-controls { display: flex; justify-content: center; gap: 0.75rem; }
.chart-controls .range-btn { flex: 0 0 auto; border: 1px solid var(--border-default); background-color: var(--bg); color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--radius-md); transition: all var(--transition-fast); cursor: pointer; }
.chart-controls .range-btn:hover:not(.active) { background-color: var(--hover-bg); border-color: var(--border-active); color: var(--text-primary); }
.chart-controls .range-btn.active { background-color: var(--x-green); border-color: var(--x-green); color: #fff; box-shadow: 0 2px 8px -2px var(--x-green-soft); }

/* ===== ESTILOS PARA MÓVILES ===== */
@media (max-width: 768px) {
    .main-content { padding-top: 0.5rem !important; }
    .converter-display { flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.75rem; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    body.dark .converter-display { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    .indicators-container { order: 1; margin-bottom: 0.25rem; }
    .value-and-date-group { order: 2; align-items: center; width: 100%; gap: 0.25rem; }
    .display-top-row { justify-content: center; width: 100%; gap: 0.5rem; }
    .utm-prefix-info { font-size: 1.0rem; font-weight: 500; }
    #dailyUfValueText { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.25px; }
    .display-bottom-row { font-size: 0.8rem; }
    .timeline-item { flex: 0 0 60px; height: 68px; border-radius: var(--radius-lg); }
    .timeline-day-number { font-size: 1.2rem; }
    .timeline-uf-value { font-size: 0.65rem; }
    .timeline-nav-btn { width: 30px; height: 30px; align-self: center; }
    .calculator-title { font-size: 1.0rem; margin-top: 1.5rem; margin-bottom: 1.25rem; }
    .dual-input-calculator { flex-direction: row; align-items: stretch; gap: 0.5rem; }
    .swap-btn { transform: rotate(0deg); width: 38px; height: 38px; align-self: center; flex-shrink: 0; }
    .swap-btn:hover { transform: rotate(180deg); }
    .input-group .form-control { height: auto; min-height: 50px; font-size: 1.15rem; padding: 0.5rem; }
    .input-group-header { padding: .3rem .6rem; }
    .input-group-header label { font-size: .75rem; }
    .conversion-summary { font-size: 0.8rem; margin-top: 1.5rem; }
    .chart-module { --container-padding: 0.75rem; margin-top: 2.5rem; }
    .chart-container { height: 200px; }
    .chart-controls .range-btn { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
}

/* Ajuste para pantallas extra pequeñas */
@media (max-width: 360px) {
    #dailyUfValueText { font-size: 1.5rem; }
    .utm-prefix-info { font-size: 0.9rem; }
    .dual-input-calculator { gap: 0.25rem; }
    .input-group .form-control { font-size: 1.0rem; min-height: 44px; }
    .swap-btn { width: 34px; height: 34px; }
}

/* Ajuste final de posición para el calendario */
.flatpickr-calendar {
    margin-top: 20px !important;
}

/* ========================================================================= */
/* == MARCADOR DE MES ACTUAL EN EL CALENDARIO (MEJORA DE UX v2)        == */
/* ========================================================================= */
.flatpickr-monthSelect-month.current-month-marker {
    position: relative;
    font-weight: 700 !important;
    /* Un borde sutil para que destaque aún más */
    border-color: var(--x-green-soft); 
}

.flatpickr-monthSelect-month.current-month-marker::after {
    content: '•';
    position: absolute;
    bottom: -2px;
    right: 4px;
    font-size: 1.4em;
    line-height: 1;
    color: var(--x-green);
}

/* --- ESTA ES LA CORRECCIÓN CLAVE --- */
/* Cuando el mes actual también está seleccionado, el punto se vuelve blanco */
.flatpickr-monthSelect-month.selected.current-month-marker::after {
    color: #fff;
}

/* ========================================================================= */
/* == MEJORAS VISUALES PREMIUM (PORTADAS DESDE UFHOY)                   == */
/* ========================================================================= */

/* --- TEMA "AIRE Y LIMPIEZA" PARA MODO CLARO --- */

/* Usamos body:not(.dark) para aplicar estos estilos solo cuando el modo oscuro NO está activo */
body:not(.dark) {
    --bg: #ffffff;
    --widget-bg: #ffffff;
    --text-primary: hsl(210, 15%, 18%);
    --text-secondary: hsl(210, 12%, 45%);
    --border-default: hsl(220, 25%, 92%);
}

/* 1. Eliminamos los "cajones" en los widgets principales */
body:not(.dark) .widget.active,
body:not(.dark) .content-block {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* 2. Creamos separadores sutiles ENTRE los módulos */
body:not(.dark) .widget.active + .google-ad-container,
body:not(.dark) .google-ad-container + .content-block,
body:not(.dark) .content-block + .content-block {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-default);
}

/* 3. El display principal ahora tiene un fondo sutil para destacar */
body:not(.dark) .converter-display {
    background-color: hsl(210, 40%, 98%);
    border: 1px solid var(--border-default);
}

/* 4. Inputs de la calculadora con mejor contraste */
body:not(.dark) .dual-input-calculator .input-group {
    background-color: hsl(210, 40%, 97%);
    border-color: hsl(210, 25%, 94%);
}
body:not(.dark) .dual-input-calculator .input-group:focus-within {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--x-green); /* Usamos el color verde de UTM */
}


/* --- ANIMACIÓN DE ENTRADA SUAVE --- */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Aplicamos la animación a los widgets y bloques de contenido */
.widget.active,
.content-block {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* --- "POP" Y DEGRADADO PARA LA LÍNEA DE TIEMPO --- */

.timeline-item {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color var(--transition-fast), 
                box-shadow var(--transition-fast);
}

.timeline-item:hover:not(.selected) {
    transform: scale(1.05);
}

.timeline-item.selected {
    background-image: linear-gradient(135deg, hsl(130, 85%, 50%), var(--x-green)); /* Degradado Verde */
    color: #ffffff !important;
    box-shadow: 0 4px 10px -2px hsla(130, 85%, 45%, 0.4);
    transform: scale(1.05);
}

/* Hacemos blancos los textos del item seleccionado */
.timeline-item.selected .timeline-day-name,
.timeline-item.selected .timeline-day-number,
.timeline-item.selected .timeline-uf-value {
    color: #ffffff;
}