/*  Botón intercambiar  */
.btn-swap {
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    border: 1.5px solid var(--color-border, #e5e7eb);
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: all .18s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-swap:hover {
    border-color: #2563eb;
    color: #2563eb;
}

/*
   TABLA DE EQUIVALENCIAS
   */
table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

table th,
table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Anchos fijos para las 3 columnas (suman 100%) */
table th:nth-child(1),
table td:nth-child(1) {
    width: 42%;
}

table th:nth-child(2),
table td:nth-child(2) {
    width: 18%;
    text-align: center;
}

table th:nth-child(3),
table td:nth-child(3) {
    width: 40%;
    text-align: right;
}

table thead th {
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
   CONTENEDOR DE LA TABLA
   */
#tablaWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {

    table th,
    table td {
        font-size: 0.78rem;
        padding: 0.45rem 0.4rem;
    }

    table thead th {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    /* Reajuste de anchos en pantallas muy estrechas */
    table th:nth-child(1),
    table td:nth-child(1) {
        width: 38%;
    }

    table th:nth-child(3),
    table td:nth-child(3) {
        width: 44%;
    }

    /*  Botón intercambiar: ancho completo en móvil  */
    .btn-swap {
        width: 100%;
        justify-content: center;
        font-size: 0.85rem;
    }

    /*  Formulario de botones: apilar verticalmente  */
    .calc-form-section>div[style] {
        flex-direction: column;
    }

    /*  Título de la tabla: tamaño adecuado  */
    #tablaWrap h3 {
        font-size: 0.92rem;
    }
}