/* Estilos generales del cuerpo */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f2f5;
    color: #333;
}

/* Estilo para el título principal */
h1 {
    text-align: center;
    color: #2a2a7f;
    margin-bottom: 25px; /* Espacio debajo del título */
}

/* Estilos para las secciones de entrada, resumen y acciones */
.inputs,
.summary,
.actions {
    text-align: center;
    margin-bottom: 20px;
    background-color: #ffffff; /* Fondo blanco para estas secciones */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilos para etiquetas, entradas y botones */
label,
input,
button {
    margin: 8px 5px; /* Ajuste de margen para mejor espaciado */
    padding: 10px; /* Aumento de padding para mejor interacción táctil */
    border-radius: 8px; /* Bordes más redondeados */
    border: 1px solid #ddd; /* Borde más suave */
    font-size: 1.05em;
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto */
}

/* Estilo para los botones */
button {
    background-color: #4c4cff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones más suaves */
    font-weight: bold;
    border: none; /* Elimina el borde por defecto */
}

/* Efecto hover y active para los botones */
button:hover {
    background-color: #2a2a7f;
    transform: translateY(-2px); /* Pequeño levantamiento al pasar el ratón */
}

button:active {
    transform: translateY(0); /* Vuelve a su posición al hacer click */
}

/* Estilos generales de la tabla */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px; /* Espacio encima de la tabla */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen al contenido */
}

/* Estilos para el encabezado de la tabla */
th {
    background-color: #4c4cff;
    color: white;
    padding: 12px;
    text-align: left;
}

/* Estilos para las celdas de la tabla */
td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #eee; /* Solo borde inferior para separación */
}

/* Estilo de fondo para filas pares de la tabla */
tr:nth-child(even) {
    background-color: #f9f9f9; /* Un tono ligeramente diferente */
}

/* Estilos para la última celda de cada fila (sin borde inferior) */
tr:last-child td {
    border-bottom: none;
}

/* Estilos para eliminar los botones de incremento/decremento (flechas) en inputs tipo "number" */
/* Para navegadores basados en Webkit (Chrome, Safari, Edge, Opera) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Elimina la apariencia por defecto del botón de giro */
  margin: 0; /* Elimina cualquier margen residual */
}

/* Para Firefox */
input[type=number] {
  -moz-appearance: textfield; /* Hace que el campo de número se comporte como un campo de texto normal */
}

/* Media query para hacer la aplicación responsiva en dispositivos móviles */
@media (max-width: 768px) {
    body {
        margin: 10px; /* Ajusta el margen del cuerpo para pantallas más pequeñas */
    }

    .inputs, .summary, .actions {
        padding: 15px; /* Reducir padding en móviles */
    }

    /* Estilos para las etiquetas y entradas dentro de .inputs */
    .inputs label {
        display: flex; /* Usar flexbox para alinear etiqueta y campo */
        flex-direction: column; /* Apilar etiqueta y campo verticalmente */
        align-items: flex-start; /* Alinear texto de etiqueta a la izquierda */
        margin-bottom: 15px; /* Más espacio entre grupos de entrada */
    }

    .inputs input {
        width: 100%; /* Ocupa todo el ancho disponible */
        margin: 5px 0 0 0; /* Margen superior para separar del label */
    }

    /* Estilos para los botones dentro de .inputs y .actions */
    .inputs button,
    .actions button {
        width: 100%; /* Hace que los botones ocupen todo el ancho */
        margin-top: 15px; /* Espacio encima del botón */
        padding: 12px; /* Aumento de padding para botones */
    }

    /* Estilos para la responsividad de la tabla en móvil */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block; /* Hace que todos los elementos de la tabla se comporten como bloques para apilarse */
    }

    /* Ocultar el encabezado real de la tabla en móviles */
    thead {
        display: none;
    }

    tr {
        margin-bottom: 15px; /* Añade espacio entre las filas de la tabla apiladas */
        border: 1px solid #ccc; /* Añade un borde alrededor de cada fila apilada */
        border-radius: 8px; /* Bordes redondeados para cada fila apilada */
        overflow: hidden; /* Asegura que los bordes redondeados se apliquen */
    }

    td {
        display: flex; /* Usa flexbox para alinear la etiqueta y el valor */
        justify-content: space-between; /* Espacia la etiqueta a la izquierda y el valor a la derecha */
        align-items: center; /* Alinea verticalmente el contenido */
        padding: 10px 15px; /* Relleno para las celdas */
        border-bottom: 1px solid #eee; /* Separador entre "celdas" de la fila apilada */
        text-align: right; /* Alinea los valores a la derecha */
    }

    td::before {
        content: attr(data-label); /* Usa el atributo data-label como contenido */
        font-weight: bold;
        text-align: left; /* Alinea la etiqueta de datos a la izquierda */
        flex-shrink: 0; /* Evita que la etiqueta se encoja */
        margin-right: 10px; /* Espacio entre etiqueta y valor */
        color: #555; /* Color ligeramente más oscuro para las etiquetas */
    }

    /* Eliminar el borde inferior de la última "celda" en cada fila apilada */
    tr td:last-child {
        border-bottom: none;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9; /* Mantener un fondo sutil para las filas pares apiladas */
    }
}