/* CONTENEDOR PRINCIPAL */
.jarv-comp-container {
    width: 100%;
    max-width: 90vw;
    margin: 0 auto 40px;
    text-align: center; /* Para centrar el botón */
}

/* BOTÓN TOGGLE */
.jarv-toggle-btn {
    background-color: var(--jarv-gold, #eeba68);
    color: var(--jarv-ink-main, #000);
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--jarv-radius-sm, 8px);
    cursor: pointer;
    display: inline-block; /* Mejor que block para centrar con text-align */
    margin-bottom: 20px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.jarv-toggle-btn:hover {
    background-color: var(--jarv-gold-hover, #dcb356);
    transform: translateY(-2px);
}

/* CONTENEDOR OCULTO (LA TABLA) */
.jarv-comp-wrap {
    display: none; /* Oculto por defecto */
    background: var(--jarv-white, #fff);
    border-radius: 12px;
    overflow: hidden; /* Para las esquinas redondeadas de la tabla */
    box-shadow: var(--jarv-shadow, 0 5px 15px rgba(0,0,0,0.08));
    text-align: left; /* Resetear alineación del texto */
    margin-top: 10px;
}

.jarv-comp-wrap.is-visible {
    display: block; /* Visible al activar */
    animation: jarvSlideDown 0.4s ease-out;
}

@keyframes jarvSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* TABLA - ESTILOS GENERALES */
.jarv-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-family: var(--font-inter, sans-serif);
    color: var(--jarv-ink-body, #333);
}

.jarv-comp-table th,
.jarv-comp-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--jarv-grey-border, #eee);
}

/* CABECERA DE TABLA */
.jarv-comp-table thead th {
    background-color: var(--jarv-gold, #eeba68);
    color: var(--jarv-ink-main, #000);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-bottom: none;
}
.jarv-comp-table thead th:first-child {
    text-align: left;
    border-top-left-radius: 8px; /* Redondear esquina superior izq */
}
.jarv-comp-table thead th:last-child {
    border-top-right-radius: 8px; /* Redondear esquina superior der */
}

/* SECCIONES (TÍTULOS INTERMEDIOS) */
.jarv-comp-section th {
    background-color: #fcf6e9; /* Tono crema suave */
    color: #666;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 10px 18px;
    text-align: left;
    border-bottom: 1px solid #e0d0b0;
}

/* FILAS Y CELDAS */
.jarv-comp-table tbody tr:nth-child(even):not(.jarv-comp-section) {
    background-color: var(--jarv-grey-bg, #f9f9f9);
}

.jarv-comp-table tbody tr:hover:not(.jarv-comp-section) {
    background-color: #fffdf5; /* Highlight suave al pasar el mouse */
}

.jarv-comp-table td.center {
    text-align: center;
    font-size: 18px; /* Emojis un poco más grandes */
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .jarv-comp-wrap {
        overflow-x: auto; /* Scroll horizontal en móvil */
    }
    .jarv-comp-table {
        min-width: 500px; /* Forzar ancho mínimo para que no se rompa */
    }
    .jarv-toggle-btn {
        width: 100%;
        box-sizing: border-box;
    }
}