/* Fondo sólido azul */
body {
    background-color: rgb(68, 163, 255);
    margin: 0; /* Remove default body margin */
    font-family: Arial, sans-serif; /* Set a default font */
}

/* Estilo del header con degradado */
.header {
    background: linear-gradient(to bottom, rgb(0, 229, 202), rgb(0, 2, 219));
    padding: 20px;
    text-align: center;
    color: white;  /* Texto en blanco para mejor contraste */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 10px 10px;  /* Esquinas redondeadas abajo */
}

/* Ajustes para el logo y título */
.logo {
    height: 70px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));  /* Sombra para destacar el logo */
}

.header h1 {
    margin: 0;
    font-size: 1.8em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);  /* Sombra en el texto */
}

.header h2 { /* Added style for h2 in header */
    margin: 5px 0;
    font-size: 1.5em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.header h3 { /* Added style for h3 in header */
    margin: 5px 0;
    font-size: 1.2em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}


/* Contenedor principal (fondo blanco para contraste) */
.container {
    background-color: white;
    border-radius: 8px;
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 90%; /* Limit container width for larger screens */
}


/* Estilos para el formulario y tabla (opcional) */
input[type="text"] {
    padding: 10px;
    width: calc(100% - 22px); /* Adjust width for padding and border */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-bottom: 10px; /* Add some space below the input */
}

button {
    padding: 10px 20px;
    background-color: #1e90ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Make button full width on small screens */
    font-size: 18px;
}

button:hover {
    background-color: #187bcd;
}

table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 0.9em; /* Slightly reduce table font size for readability */
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.footer {
    margin: 20px 0; /* Adjust margin for footer */
    padding: 10px; /* Add some padding */
    font-size: 1em;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.error { /* Style for the error message */
    color: red;
    text-align: center;
    margin-top: 15px;
    font-size: 1.1em;
}

/* Media Queries for smaller screens */
@media only screen and (max-width: 600px) {
    .header {
        padding: 15px; /* Reduce header padding */
    }

    .logo {
        height: 60px; /* Slightly reduce logo size */
    }

    .header h1 {
        font-size: 1.8em; /* Increased header title font size for mobile */
    }

    .header h2 {
        font-size: 1.6em; /* Increased h2 font size for mobile */
    }

    .header h3 {
        font-size: 1.4em; /* Increased h3 font size for mobile */
    }

    .container {
        margin: 15px auto; /* Adjust container margin */
        padding: 15px; /* Adjust container padding */
    }

    input[type="text"] {
        width: calc(100% - 20px); /* Adjust input width for smaller screens */
        font-size: 1.2em; /* Increased input font size for mobile */
    }

    button {
        font-size: 1.2em; /* Increased button font size for mobile */
        padding: 12px 15px;
    }

    table, th, td {
        font-size: 1em; /* Increased table font size for mobile */
        padding: 10px; /* Adjust table cell padding */
        display: block; /* Make table rows stack on small screens */
        width: 100%; /* Ensure full width for table elements */
        box-sizing: border-box; /* Include padding and border in the element's total width */
    }

    th {
        text-align: center; /* Center align table headers when stacked */
        background-color: #e6e6e6; /* Slightly different background for stacked headers */
    }

    td {
        text-align: center; /* Center align table data when stacked */
    }

    /* Specific styling for table data when stacked to show labels */
    table tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        display: block;
    }

    table tr td:first-child {
        font-weight: bold;
        background-color: #f9f9f9;
        padding-top: 10px;
        padding-bottom: 5px;
    }

    table tr td:last-child {
        padding-top: 5px;
        padding-bottom: 10px;
    }

    /* Hide the second column header for small screens if not needed, as data will stack */
    table th[colspan="2"] {
        display: none;
    }

    .error {
        font-size: 1.3em; /* Increased error message font size */
    }

    .footer {
        font-size: 1.1em; /* Increased footer font size */
    }
}

/* Media Queries for very small screens (e.g., older phones or narrow viewports) */
@media only screen and (max-width: 320px) {
    .header h1 {
        font-size: 1.6em;
    }

    .header h2 {
        font-size: 1.4em;
    }

    .header h3 {
        font-size: 1.2em;
    }

    input[type="text"], button {
        font-size: 1.1em;
        padding: 10px;
    }

    table, th, td {
        font-size: 0.9em;
        padding: 8px;
    }

    .error {
        font-size: 1.2em;
    }

    .footer {
        font-size: 1em;
    }
}