/* style.css - Estilo Banner Compacto */

/* Reset básico y fuente */
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px; /* Tamaño base para la página */
    line-height: 1.5;
}

/* --- Estilos Base del Banner (Desktop First) --- */
.exchange-banner {
    width: 100%;
    min-height: 40px; /* Usamos min-height para permitir que crezca si es necesario */
    height: auto;     /* Altura automática */
    background-color: #1f1f1f; /* Un negro ligeramente menos intenso */
    color: #ecf0f1;
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra el .banner-content horizontalmente */
    box-sizing: border-box;
    padding: 5px 15px; /* Padding vertical y horizontal */
    /* position: fixed; */ /* Descomentar si quieres que sea fijo */
    /* top: 0; */
    /* left: 0; */
    /* z-index: 1000; */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 0.8rem; /* Tamaño base para el banner */
    /* white-space: nowrap; -> Lo quitamos de aquí para permitir wrapping por defecto */
    overflow: hidden; /* Oculta desbordamiento horizontal del banner mismo */
}

.banner-content {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos salten de línea */
    align-items: center; /* Alinea verticalmente los elementos en cada línea */
    justify-content: center; /* Centra los elementos horizontalmente por defecto */
    gap: 8px 12px; /* Espacio vertical y horizontal entre elementos */
    width: 100%;
    max-width: 1200px;
    text-align: center; /* Centra el texto si algún span ocupa toda la línea */
}

/* Sección de la tasa */
.rate-info {
    display: flex; /* Mantiene label y valor juntos */
    align-items: center;
    gap: 6px; /* Espacio entre label y valor */
}

.currency-pair {
    color: #bdc3c7;
    /* margin-right: 5px; -> Usamos gap en .rate-info */
}

.rate-value {
    font-weight: bold;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 8px; /* Un poco más de padding */
    border-radius: 4px;
    min-width: 35px;
    text-align: center;
    transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease, transform 0.4s ease; /* Añadido transform */
}

/* Estilo mientras carga */
.rate-value.loading {
    color: #95a5a6;
    background-color: transparent;
    animation: loadingPulseBanner 1.5s infinite ease-in-out;
}

@keyframes loadingPulseBanner {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Separador (presente por defecto) */
.separator {
    color: #7f8c8d;
    font-weight: lighter;
    /* margin: 0 10px; -> Controlado por gap en .banner-content */
    display: none; /* Oculto por defecto, se mostrará en pantallas más grandes */
}

/* Información de actualización (fecha) */
.update-info {
    color: #bdc3c7;
    font-size: 0.9em;
}

/* Mensaje de error */
.banner-error {
    color: #e74c3c;
    font-weight: bold;
    background-color: rgba(231, 76, 60, 0.15);
    padding: 2px 6px;
    border-radius: 3px;
    width: auto; /* Ocupa solo su contenido */
    /* margin-left: 10px; -> Controlado por gap */
}
/* Ocultar si está vacío */
.banner-error:empty {
    display: none;
}

/* --- Animación de Actualización --- */
.rate-value.updated {
    animation: flashUpdateBanner 0.6s ease-out;
}

@keyframes flashUpdateBanner {
    0%, 100% {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        transform: scale(1);
    }
    30% {
        background-color: #3498db; /* Flash azul */
        color: #ffffff;
        transform: scale(1.08); /* Un poco más de énfasis */
    }
}

/* --- Responsive: Pantallas Medianas (ej. Tablets y móviles grandes en horizontal) --- */
@media (min-width: 577px) {
     /* En pantallas más grandes, mostramos el separador */
    .separator {
        display: inline; /* Muestra el separador */
    }

    /* Hacemos que la fecha y el error se alineen a la derecha si hay espacio */
     .banner-content {
         justify-content: space-between; /* Separa Rate Info (izquierda) de Date/Error (derecha) */
         text-align: left; /* Alinea texto a la izquierda por defecto */
     }
      .update-info {
          text-align: right;
      }
      .banner-error {
          margin-left: 10px; /* Añade un pequeño margen si error y fecha están juntos */
      }
}


/* --- Responsive: Pantallas Pequeñas (ej. Móviles en vertical) --- */
@media (max-width: 576px) {
    .exchange-banner {
        font-size: 0.75rem; /* Reducir un poco más la fuente base del banner */
        padding: 8px 10px; /* Ajustar padding */
    }

    .banner-content {
        justify-content: center; /* Centrar todo el contenido */
        gap: 5px 8px; /* Reducir espacios */
    }

    .rate-value {
        font-size: 1.1em; /* Ajustar tamaño de la tasa relativo al 0.75rem */
        padding: 2px 6px;
    }

    .update-info {
        font-size: 0.85em; /* Reducir tamaño fecha */
        width: 100%; /* Asegura que ocupe una línea si es necesario */
        text-align: center; /* Centrar la fecha */
        margin-top: 3px; /* Pequeño espacio si salta de línea */
    }

     .currency-pair {
        display: inline-block; /* Asegura que se comporte como un elemento en línea */
        font-size: 0.9em; /* Ajusta el tamaño de fuente */
        color: #7f8c8d; /* Color gris claro */
     }

     .separator {
         display: none; /* Asegurarse que el separador esté oculto */
     }

     .banner-error {
         width: 100%; /* Que ocupe su línea */
         text-align: center; /* Centrar error */
         margin-top: 3px;
         font-size: 0.9em;
     }
}