/* Estilos de las celdas de la tabla */

.table td,
.table th {
    padding: 10px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    /* Mantiene el texto alineado a la izquierda */
    /* Evita que el contenido haga salto de línea */
}


/* Flexbox para la alineación del contenido en las celdas */

.table td {
    justify-content: space-between;
    /* Distribuye el texto y los campos rellenables */
    align-items: center;
}


/* Establecer el tamaño fijo para los inputs y selects */

.table td input,
.table td select {
    width: 100%;
    max-width: 250px;
    /* Tamaño máximo uniforme para los campos rellenables */
    padding: 5px;
    background-color: #d9d9d9;
    border: none;
    margin-left: auto;
    /* Asegura que el campo quede alineado a la derecha */
    box-sizing: border-box;
}


/* Cambiar el color del campo al enfocarlo */

.table td select:focus,
.table td input:focus {
    outline: none;
    background-color: #c9c9c9;
}


/* Fondo alternado para las filas */

.table tbody tr:nth-child(1),
.table tbody tr:nth-child(3),
.table tbody tr:nth-child(5),
.table tbody tr:nth-child(7),
.table tbody tr:nth-child(9), 
.table tbody tr:nth-child(11),
.table tbody tr:nth-child(13),
.table tbody tr:nth-child(15),
.table tbody tr:nth-child(17),
.table tbody tr:nth-child(19),
.table tbody tr:nth-child(21),
.table tbody tr:nth-child(23) {
    background-color: #e0e0e0;
}

.table tbody tr:nth-child(2) {
    background-color: #fff;
}


/* Estilo del encabezado */

.header-icon {
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: #f2f2f2;
    padding: 10px;
}

.header-icon img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.header-text {
    font-size: 24px;
    font-weight: bold;
    color: rgb(48, 48, 222);
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

.service-plan {
    background-color: black;
    color: white;
    font-weight: bold;
}


/* Alinear el precio a la derecha */

.price {
    text-align: right;
}


/* Asegurar que todos los campos de entrada tengan el mismo tamaño */

.input-field {
    width: 100%;
    max-width: 250px;
    /* Todos los campos tendrán el mismo tamaño máximo */
    padding: 5px;
    margin-left: auto;
    /* Alinea los campos a la derecha */
    box-sizing: border-box;
    /* Garantiza que el padding no expanda el ancho total */
}

#submitButton {
    background-color: #007bff; /* Color de fondo */
    color: #ffffff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de la fuente */
    border: none; /* Quita el borde predeterminado */
    border-radius: 5px; /* Esquinas redondeadas */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-left: 20px; /* Mueve el botón hacia la derecha */
    
}

#submitButton:hover {
    background-color: #0056b3; /* Color de fondo al pasar el cursor */
    transform: scale(1.05); /* Aumenta un poco el tamaño */
}

#submitButton:active {
    background-color: #004085; /* Color de fondo al hacer clic */
    transform: scale(0.98); /* Reduce ligeramente el tamaño */
}