/* ================================
   Estilos Generales Minimalistas
================================ */

/* Contenedor principal */
.comparador-casas {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #fff;
}

/* Estilos generales de la tabla */
.tabla-comparacion {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    table-layout: fixed;
}

/* Cabecera de la tabla */
.tabla-comparacion thead th {
    background-color: #f5f5f5;
    color: #333;
    font-weight: 600;
    padding: 12px;
    text-align: center; /* Centrar la cabecera */
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.95rem;
}

/* Segunda fila de la cabecera (Compra/Venta) */
.tabla-comparacion thead tr:nth-child(2) th {
    background-color: #e0e0e0;
    color: #333;
    padding: 10px;
    font-size: 0.85rem;
    text-align: center; /* Centrar la fila de compra/venta */
}

/* Celdas del cuerpo */
.tabla-comparacion tbody td {
    text-align: center; /* Centrar todos los valores */
    padding: 12px;
    font-size: 0.95rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    color: #555;
    vertical-align: middle; /* Centrar verticalmente */
}

/* Alternancia de color en filas pares */
.tabla-comparacion tbody tr:nth-child(even) td {
    background-color: #fafafa;
}

/* Estilo hover para filas */
.tabla-comparacion tbody tr:hover td {
    background-color: #f0f0f0;
}

/* Alinear el texto de la primera celda (moneda) y casa de cambio al centro */
.tabla-comparacion tbody td:first-child {
    font-weight: 600;
    color: #333;
    text-align: center; /* Centrar la casa de cambio */
}

/* Colores específicos para Compra y Venta */
.tabla-comparacion tbody td.compra {
    color: #2a9d8f;
    font-weight: 600;
}

.tabla-comparacion tbody td.venta {
    color: #e76f51;
    font-weight: 600;
}

/* Estilo hover para celdas de Compra y Venta */
.tabla-comparacion tbody td.compra:hover,
.tabla-comparacion tbody td.venta:hover {
    background-color: #eaeaea;
}

/* Estilo para la fecha de la casa */
.fecha-casa {
    font-size: 0.85rem;
    color: #777;
    margin-top: 4px;
    display: block;
    text-align: center; /* Centrar la fecha */
}

/* Contenedor centrado para el botón */
#cargar-mas-container {
    text-align: center;
    margin-top: 20px;
}

/* Estilo para el botón "Cargar más" */
#cargar-mas-btn {
    padding: 8px 24px;
    font-size: 16px;
    background-color: #043c74;
    color: #ffff !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Efecto hover para el botón */
#cargar-mas-btn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

/* Efecto activo cuando se presiona el botón */
#cargar-mas-btn:active {
    background-color: #004494;
    transform: translateY(0);
}

/* Separador entre casas de cambio */

/* Borde sencillo para las columnas */
.tabla-comparacion thead th,
.tabla-comparacion tbody td {
    border-right: 1px solid #e0e0e0;
}

/* Eliminar el borde derecho en la última columna */
.tabla-comparacion tbody td:last-child,
.tabla-comparacion thead th:last-child {
    border-right: none;
}

/* Añadir borde a la primera columna */
.tabla-comparacion tbody td:first-child,
.tabla-comparacion thead th:first-child {
    border-left: 1px solid #e0e0e0;
}


















/* Estilo para la vista en escritorio */
.escritorio {
    display: block;
}

.movil {
    display: none;
}

/* Estilo para la vista en móviles */
@media only screen and (max-width: 768px) {
    .escritorio {
        display: none;
    }

    .movil {
        display: block;
    }

    /* Estilo para el contenedor de moneda en móvil */
    .moneda-movil {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 5px;
        background-color: #ffffff;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Estilo para el título de la moneda */
    .moneda-movil h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }

    /* Estilo para cada casa de cambio en móvil */
.casa-cambio-movil {
    margin-bottom: 20px; /* Espacio extra entre casas de cambio */
    border-bottom: 1px solid #e0e0e0; /* Separador entre sucursales */
    padding-bottom: 10px; /* Espacio antes del separador */
}

    /* Estilo para la casa de cambio (nombre) */
    .nombre-casa-movil {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 2px; /* Espacio entre la casa y la sucursal */
    }

    /* Estilo para la sucursal */
    .sucursal-movil {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px; /* Espacio entre la sucursal y los valores de compra/venta */
    }

    /* Estilo para los detalles adicionales */
    .detalle {
        font-size: 16px;
        color: #555;
        margin: 5px 0;
    }

    .detalle strong {
        color: #000;
    }

    .detalle:last-child {
        font-size: 14px;
        color: #888;
    }

    /* Estilo para contenedor de compra y venta en móvil */
   .compra-venta {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Espacio pequeño entre Compra y Venta */
    margin: 15px 0; /* Más espacio arriba y abajo */
     
}
    /* Estilo para el valor de Compra */
.compra-movil {
    background-color: #d4edda; /* Verde claro para Compra */
    padding: 10px 0; /* Agregado padding arriba y abajo de 10px */
    border-radius: 5px;
    color: #155724;
    font-size: 15px; /* Tamaño de letra ajustado */
    width: 60%;
    text-align: center; /* Centrado del texto */
}

/* Estilo para el valor de Venta */
.venta-movil {
    background-color: #f8d7da; /* Rojo claro para Venta */
    padding: 10px 0; /* Agregado padding arriba y abajo de 10px */
    border-radius: 5px;
    color: #721c24;
    font-size: 15px; /* Tamaño de letra ajustado */
    width: 60%;
    text-align: center; /* Centrado del texto */
}


  .detalle {
    margin: 10px 0;
}
  
  
  /* Estilo del botón de acordeón */
.accordion {
    background-color: #ffffff; /* Fondo blanco para un diseño limpio */
    color: #333; /* Texto oscuro para mejor legibilidad */
    cursor: pointer;
    padding: 15px; /* Aumentar el padding para que el botón sea más grande y espacioso */
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px; /* Tamaño de fuente más grande para mayor legibilidad */
    font-weight: 600; /* Negrita para resaltar el texto */
    border-radius: 8px; /* Bordes redondeados para un aspecto moderno */
   
    transition: background-color 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
}

/* Efectos al pasar el mouse o cuando el acordeón está activo */
.accordion:hover, .accordion.active {
    background-color: #043c84; /* Azul moderno cuando está activo o en hover */
    color: #ffffff; /* Texto blanco para contraste en estado activo */
    transform: translateY(-2px); /* Eleva ligeramente el botón para un efecto visual */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más fuerte para resaltar el botón */
}

/* Estilo del panel oculto y expandido */
.panel {
    padding: 15px 20px; /* Aumentar padding para más espacio en el contenido */
    background-color: #f9f9f9; /* Fondo gris claro para diferenciar el contenido */
    display: none;
    overflow: hidden;
    margin-bottom: 15px;
    transition: max-height 0.4s ease, padding 0.3s ease; /* Transición suave para el contenido */
    border-left: 3px solid #043c84; /* Añadir un borde de color azul para un toque de color moderno */
    border-radius: 5px; /* Bordes redondeados para el panel */
}

.panel.show {
    display: block;
    padding: 0px; /* Más espacio entre los elementos cuando se despliega */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave para el panel cuando se muestra */
}

  
  
  
  
}