/* Reset de estilos básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos del cuerpo de la página */
body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #0f1115; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    padding: 20px;
    line-height: 1.6;
}

/* Contenedor principal para centrar el contenido */
.container {
    max-width: 400px;
    margin: 0 auto; /* Centrado simplificado */
}

/* Estilos del encabezado */
.header {
    text-align: center;
    margin-bottom: 20px;
}

.header h2 {
    font-size: 24px;
}

/* Estilos de las pestañas de navegación (Comprar/Vender) */
.tabs {
    display: flex;
    position: relative;
    /* justify-content: center; No es necesario con flex: 1 en los hijos */
    background: #1e1f25; /* Fondo de las pestañas */
    padding: 6px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.tab {
    flex: 1;
    z-index: 1; /* Asegura que el texto de la pestaña esté sobre el indicador */
    text-align: center;
    padding: 10px 0;
    border-radius: 30px;
    cursor: pointer;
    color: #999; /* Color de texto inactivo */
    font-size: 14px;
    transition: color 0.3s ease-in-out;
    border: none; /* Para los botones */
    background-color: transparent; /* Para los botones */
    font-family: inherit; /* Heredar fuente del body */
}

.tab.active {
    color: #000; /* Color de texto activo */
    font-weight: bold;
}

/* Indicador visual de la pestaña activa */
.tab-indicator {
    position: absolute;
    z-index: 0; /* Detrás del texto de las pestañas */
    width: 50%; /* Ocupa la mitad del ancho de las pestañas */
    background: #00ff62; /* Color verde brillante */
    border-radius: 30px;
    top: 6px;
    bottom: 6px; /* Simplifica el cálculo de altura */
    height: auto; /* Reemplaza height: calc(100% - 12px); */
    left: 0;
    transition: transform 0.3s ease-in-out; /* Animación de movimiento */
}

/* Campo de entrada de monto */
#amount { /* Usar ID para especificidad */
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border: none;
    border-radius: 8px;
    background: #2a2c34; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    font-size: 16px;
}

/* Información de la tasa de cambio */
.rate-info {
    font-size: 12px;
    color: #bbb;
    margin-bottom: 8px;
    text-align: right;
}

/* Filtro de forma de pago */
.filter {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.filter label {
    font-size: 12px;
    color: #fff;
    margin-right: 6px;
}

.filter label .arrow {
    display: inline-block;
    transform: rotate(90deg); /* Flecha apuntando a la derecha */
    margin-left: 4px;
}

.filter select {
    padding: 6px 10px; /* Ajuste de padding */
    border: none;
    border-radius: 6px;
    background: #2a2c34; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    font-size: 14px;
    width: auto;
    appearance: none; /* Quitar apariencia por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3e%3cpath d='M7 10l5 5 5-5H7z'/%3e%3c/svg%3e"); /* Flecha custom */
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px; /* Espacio para la flecha */
}

/* Título de las ofertas */
.offers-title {
    font-size: 18px;
    margin: 10px 0;
}

/* Marca de tiempo de la tasa */
.timestamp {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
    text-align: center;
}

/* Estilos de cada oferta de cambista */
.offer {
    background: #1e1f25; /* Fondo de la tarjeta de oferta */
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5); /* Sombra para profundidad */
    transition: transform 0.2s ease-in-out; /* Animación al pasar el ratón */
    cursor: pointer;
}

.offer:hover:not(.no-hover) { /* Evitar hover en tarjetas no clickables o con botones */
    transform: translateY(-2px); /* Efecto de elevación al pasar el ratón */
}

.offer.expanded {
    flex-direction: column; /* Cambia a columna cuando se expande */
    align-items: flex-start;
    cursor: default; /* El cursor cambia si la tarjeta está expandida */
}

/* Avatar del cambista */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #00ff62; /* Fondo verde */
    color: #000; /* Texto negro */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0; /* Evitar que se encoja */
}

/* Información de la oferta */
.offer-info {
    flex: 1;
}

.offer-info h3 {
    font-size: 16px;
    color: #00ff62; /* Color verde */
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

/* Estrellas de calificación */
.stars {
    margin-left: 8px;
    color: #ffd700; /* Color dorado */
    font-size: 12px;
}

.offer-info p {
    font-size: 14px;
    color: #bbb;
    line-height: 1.4;
    margin-bottom: 4px;
}

/* Detalles expandidos de la oferta */
.details {
    display: none; /* Oculto por defecto */
    margin-top: 8px;
    font-size: 12px;
    color: #ccc;
    width: 100%; /* Ocupar todo el ancho en modo expandido */
}

.offer.expanded .details {
    display: block; /* Visible cuando la oferta está expandida */
}

/* Insignia de "Mejor" oferta */
.badge {
    display: inline-block;
    background: #ffd700; /* Fondo dorado */
    color: #000; /* Texto negro */
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
}

/* Botón de acción (Comprar/Vender) */
.btn-action {
    background: #00ff62; /* Fondo verde */
    color: #000 !important; /* Texto negro */
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: inline-flex; /* Usa flexbox para alinear contenido */
    align-items: center; /* Centra verticalmente los elementos */
    flex-shrink: 0; /* Evitar que se encoja */
}

.btn-action.disabled {
    opacity: 0.5; /* Menos opaco cuando está deshabilitado */
    cursor: not-allowed;
    /* color: #fff;  Considerar mantener el color de fondo y solo cambiar opacidad */
}

.btn-action:not(.disabled):hover {
    transform: scale(1.05); /* Efecto de escala al pasar el ratón */
    opacity: 0.9; /* Ligera transparencia en hover */
}

/* Ícono de WhatsApp dentro del botón */
.btn-action img {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    filter: brightness(0); /* Hace el ícono negro */
}

/* Pie de página */
.footer {
    margin-top: 40px;
    font-size: 12px;
    text-align: center;
    color: #777;
}

/* Estilos de enlaces */
a {
    color: #00ff62; /* Color verde */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Clase para accesibilidad: ocultar visualmente pero mantener para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Estilos específicos para las tarjetas de consejo y Osmo/Binance que no deben tener hover de elevación general */
.offer.advice-card, .offer.external-link-card {
    cursor: default;
}
.offer.advice-card:hover, .offer.external-link-card:hover {
    transform: none;
}