/* Estilos base */
.jmcalc-container { 
    font-family: 'Inter', sans-serif; 
    background-color: transparent; 
}
.jmcalc-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#jmcalc-table { 
    width: 100%; 
    border-collapse: collapse; 
    border: none; 
    min-width: 600px; /* Forzar ancho mínimo para scroll lateral */
}
#jmcalc-table th {
    font-family: 'Inter', sans-serif;
    color: #0567DB; /* Color de los encabezados */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2em;
    padding: 6px;
    text-align: center;
    border: none;
    border-bottom: 1px solid #96B6BF33; /* Borde inferior para encabezados */
    vertical-align: middle;
}
#jmcalc-table td {
    padding: 4px;
    text-align: center;
    border: none;
    border-bottom: 1px solid #96B6BF33; /* Reemplazar box-shadow por borde */
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    color: #ffffff;
    background-color: transparent;
}
.jmcalc-left-align { 
    text-align: left !important; 
    color: #ffffff; 
    padding-left: 8px;
}
#jmcalc-table th:nth-child(1), #jmcalc-table td:nth-child(1) { 
    width: 28%; 
}
#jmcalc-table th:nth-child(2), #jmcalc-table th:nth-child(3), 
#jmcalc-table th:nth-child(4), #jmcalc-table th:nth-child(5), 
#jmcalc-table td:nth-child(2), #jmcalc-table td:nth-child(3), 
#jmcalc-table td:nth-child(4), #jmcalc-table td:nth-child(5) { 
    width: 18%; 
}
.jmcalc-input-wrapper { 
    display: flex; 
    flex-direction: row;
    align-items: center; 
    justify-content: center; 
    gap: 4px;
}
/* Estilos específicos para los botones */
.jmcalc-btn, 
.jmcalc-btn.jmcalc-decrement, 
.jmcalc-btn.jmcalc-increment,
.jmcalc-btn.jmcalc-decrement-hours,
.jmcalc-btn.jmcalc-increment-hours { 
    color: #f47c00 !important; /* Color base */
    border: none !important; /* Sin borde */
    background: transparent !important; /* Fondo transparente */
    font-size: 16px; 
    cursor: pointer; 
    padding: 2px 6px; 
    line-height: 1;
}
.jmcalc-btn:hover, 
.jmcalc-btn.jmcalc-decrement:hover, 
.jmcalc-btn.jmcalc-increment:hover,
.jmcalc-btn.jmcalc-decrement-hours:hover,
.jmcalc-btn.jmcalc-increment-hours:hover { 
    color: #ffffff !important; /* Color al pasar el cursor */
    border: none !important; /* Sin borde */
    background: #0567DB !important; /* Fondo al pasar el cursor */
}
.jmcalc-btn:focus,
.jmcalc-btn:active,
.jmcalc-btn.jmcalc-decrement:focus,
.jmcalc-btn.jmcalc-increment:focus,
.jmcalc-btn.jmcalc-decrement-hours:focus,
.jmcalc-btn.jmcalc-increment-hours:focus,
.jmcalc-btn.jmcalc-decrement:active,
.jmcalc-btn.jmcalc-increment:active,
.jmcalc-btn.jmcalc-decrement-hours:active,
.jmcalc-btn.jmcalc-increment-hours:active { 
    color: #ffffff !important; /* Color en focus/activo */
    border: none !important; /* Sin borde */
    background: #0567DB !important; /* Fondo en focus/activo */
    outline: none !important; /* Eliminar contorno predeterminado */
}
.jmcalc-input.jmcalc-cantidad,
.jmcalc-input.jmcalc-horas { 
    border: none; /* Sin borde */
    width: 40px; 
    text-align: center; 
    background: transparent;
    font-size: 14px;
    color: #ffffff; /* Color blanco */
    padding: 2px;
}
.jmcalc-total { 
    font-weight: bold; 
}
tbody { 
    border-bottom: 1px solid #96B6BF33; /* Borde inferior del cuerpo */
}
.jmcalc-total-consumo { 
    margin-top: 10px; 
    font-size: 24px; /* Tamaño base para desktop */
    color: #ffffff; 
    text-align: right;
    padding-right: 32px; /* Padding a la derecha para desktop */
}
.jmcalc-total-label {
    font-weight: bold;
}
.jmcalc-total-value {
    color: #0567DB; /* Color del valor total */
    margin-left: 5px;
}

/* Estilos responsivos para tabletas (hasta 768px) */
@media (max-width: 768px) {
    #jmcalc-table th {
        font-size: 14px;
        padding: 4px;
        border-bottom: 1px solid #96B6BF33; /* Reforzar borde en tablet */
    }
    #jmcalc-table td {
        font-size: 12px;
        padding: 2px;
        border-bottom: 1px solid #96B6BF33; /* Reforzar borde en tablet */
    }
    .jmcalc-input-wrapper {
        gap: 2px;
    }
    .jmcalc-btn,
    .jmcalc-btn.jmcalc-decrement,
    .jmcalc-btn.jmcalc-increment,
    .jmcalc-btn.jmcalc-decrement-hours,
    .jmcalc-btn.jmcalc-increment-hours {
        font-size: 14px;
        padding: 2px 4px;
    }
    .jmcalc-input.jmcalc-cantidad,
    .jmcalc-input.jmcalc-horas {
        width: 35px;
        font-size: 12px;
    }
    .jmcalc-total-consumo {
        font-size: 22px; /* Tamaño para tablet */
        margin-top: 8px;
        padding-right: 32px; /* Padding a la derecha para tablet */
    }
    tbody { 
        border-bottom: 1px solid #96B6BF33; /* Mantener borde en tablet */
    }
}

/* Estilos responsivos para móviles (hasta 480px) */
@media (max-width: 480px) {
    #jmcalc-table th {
        font-size: 12px;
        padding: 4px; /* Aumentar padding para visibilidad */
        border-bottom: 1px solid #96B6BF33; /* Reforzar borde en móvil */
    }
    #jmcalc-table td {
        font-size: 10px;
        padding: 2px;
        border-bottom: 1px solid #96B6BF33; /* Reforzar borde en móvil */
    }
    .jmcalc-btn,
    .jmcalc-btn.jmcalc-decrement,
    .jmcalc-btn.jmcalc-increment,
    .jmcalc-btn.jmcalc-decrement-hours,
    .jmcalc-btn.jmcalc-increment-hours {
        font-size: 12px;
        padding: 1px 3px;
    }
    .jmcalc-input.jmcalc-cantidad,
    .jmcalc-input.jmcalc-horas {
        width: 30px;
        font-size: 10px;
    }
    .jmcalc-total-consumo {
        font-size: 20px; /* Tamaño para móvil */
        display: flex;
        flex-direction: column; /* Dos filas en móvil */
        align-items: center; /* Centrado */
        text-align: center;
        margin-top: 8px;
        padding-right: 0; /* Sin padding en móvil */
    }
    .jmcalc-total-label {
        margin-bottom: 5px; /* Espacio entre texto y valor */
    }
    .jmcalc-total-value {
        margin-left: 0; /* Eliminar margen en móvil */
    }
    tbody { 
        border-bottom: 1px solid #96B6BF33; /* Mantener borde en móvil */
    }
}