/* ============================================================
   Módulo: Cotizaciones (Monedas + Cereales)
   Archivo: /modulos/cotizaciones/assets/css/cotizaciones.css
   Depende de variables CSS definidas en template.css (:root)
   ============================================================ */

/* --- Sección contenedora ---
   El módulo vive dentro de <main class="container">.
   Compensamos el padding horizontal del container Bootstrap
   para que el fondo gris se extienda de borde a borde del área de contenido. */

#modulo-cotizaciones {
    /* Compensar el padding horizontal del .container Bootstrap padre,
       para que el fondo se extienda de borde a borde del área de contenido */
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding: 0.6rem calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    background-color: var(--rc-blanco);
    border-bottom: 1px solid var(--rc-divider);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* --- Wrapper y flechas de navegación --- */

#modulo-cotizaciones .cotiz-scroll-wrapper {
    display: flex;
    align-items: center;
}

#modulo-cotizaciones .cotiz-arrow {
    display: none;
    flex-shrink: 0;
    width: 1.6rem;
    height: 100%;
    min-height: 2.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--rc-gris-medio);
    font-size: 1rem;
    transition: color 0.2s ease;
}

#modulo-cotizaciones .cotiz-arrow:hover {
    color: var(--rc-gris-oscuro);
}

#modulo-cotizaciones .cotiz-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    #modulo-cotizaciones .cotiz-arrow {
        display: flex;
    }
}

/* --- Grilla: siempre en una sola fila con scroll horizontal --- */

#modulo-cotizaciones .cotiz-grid {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    align-items: stretch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#modulo-cotizaciones .cotiz-grid::-webkit-scrollbar {
    display: none;
}

/* --- Tarjeta base --- */

#modulo-cotizaciones .cotiz-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border-radius: 6px;
    flex-shrink: 0;
    flex-grow: 1;
    text-align: center;
    min-width: 105px;
}

/* --- Etiqueta del nombre --- */

#modulo-cotizaciones .cotiz-nombre {
    font-family: var(--rc-font-primary);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rc-gris-medio);
    line-height: 1.2;
    margin-bottom: 0.2rem;
    white-space: nowrap;
}

/* --- Valor cotización --- */

#modulo-cotizaciones .cotiz-valor {
    font-family: var(--rc-font-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* --- Tipo: Moneda (verde suave) --- */

#modulo-cotizaciones .cotiz-moneda {
    background-color: #dbf3dd;
    border: 1px solid #a8d5aa;
}

#modulo-cotizaciones .cotiz-moneda .cotiz-valor {
    color: #343a40;
}

/* --- Tipo: Riesgo País (neutro) --- */

#modulo-cotizaciones .cotiz-riesgo {
    background-color: var(--rc-blanco);
    border: 1px solid var(--rc-divider);
}

#modulo-cotizaciones .cotiz-riesgo .cotiz-valor {
    color: var(--rc-gris-oscuro);
}

/* --- Tipo: Cereales (amarillo suave) --- */

#modulo-cotizaciones .cotiz-cereales {
    background-color: #fcf3d5;
    border: 1px solid #e0ca80;
}

#modulo-cotizaciones .cotiz-cereales .cotiz-valor {
    color: #343a40;
}

/* --- Responsive: tablet y móvil (< 768px) ---
   Mismo diseño de tarjeta vertical que desktop.
   Tamaños levemente reducidos. Scroll horizontal. */

@media (max-width: 767px) {
    #modulo-cotizaciones .cotiz-grid {
        -webkit-overflow-scrolling: touch;
    }

    #modulo-cotizaciones .cotiz-card {
        padding: 1rem 0.9rem;
        min-width: 95px;
    }

    #modulo-cotizaciones .cotiz-nombre {
        font-size: 0.8rem;
    }

    #modulo-cotizaciones .cotiz-valor {
        font-size: 1.6rem;
    }
}