/*
    Estilos CSS para la aplicación web de EGICAR
    Desarrollado por: anonimo
    Descripción: Este archivo contiene los estilos CSS para la aplicación web de EGICAR, incluyendo estilos para formularios, tablas y navegación.
    Fecha: 08/04/2025
*/
body {
    font-family: 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f4f4f9;
}

h1 {
    font-size: 2.5em;
    text-align: center; 
    margin-top: 20px; 
}

h1, h2, h3 {
    color: #333; 
    margin: 0;
    padding: 10px 0;
}

header {
    background-color: #1a1a1a;
    color: #fff; 
    width: 100%;
    padding: 15px 20px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}

header img {
    height: 40px; 
}

header nav {
    display: flex; 
    gap: 5px;
    align-items: center;
    justify-content: center;
}

header nav a {
    color: #fff; 
    text-decoration: none; 
    font-weight: 500; 
    padding: 10px 35px; 
    border-radius: 5px; 
    transition: background-color 0.3s ease, transform 0.2s ease; 
}

header nav a:hover {
    background-color: #333; 
    transform: scale(1.05); 
}
form {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #1a1a1a; 
    color: #fff; 
    cursor: pointer;
    transition: background-color 0.3s ease;
}

input[type="text"],
input[type="date"],
select {
    box-sizing: border-box;
    padding: 8px; 
    margin-bottom: 16px; 
    font-size: 16px; 
}
textarea {
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 15px; /* Espaciado inferior */
    border: 1px solid #ccc; /* Borde consistente con otros elementos */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente consistente */
}
.menu-toggle {
    display: none; 
    background-color: transparent;
    color: #fff;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    transition: transform 0.3s ease;
}


/** Estilos para pantallas pequeñas */
@media (max-width: 425px) {
    header {
        flex-direction: column; /* Apilar elementos verticalmente */
        align-items: flex-start;
        padding: 10px 15px; /* Reducir el padding */
    }

    header img {
        margin-bottom: 10px; /* Espacio debajo del logo */
    }

    .menu-toggle {
        display: block; /* Mostrar el botón en pantallas pequeñas */
        margin-left: auto;
        background-color: #444; /* Fondo oscuro */
        padding: 10px 15px;
        border-radius: 5px; /* Bordes redondeados */
    }

    .menu {
        display: none; /* Ocultar el menú por defecto */
        flex-direction: column; /* Apilar enlaces verticalmente */
        background-color: #222; /* Fondo oscuro */
        width: 100%; /* Ocupa todo el ancho */
        padding: 10px 0; /* Espaciado interno */
        position: absolute;
        top: 60px; /* Debajo del header */
        left: 0;
        z-index: 1000;
    }

    .menu a {
        padding: 12px 20px; /* Ajustar el tamaño de los enlaces */
        font-size: 1.1em; /* Aumentar el tamaño de la fuente */
        text-align: center; /* Centrar el texto */
        color: #fff; /* Texto blanco */
        border-bottom: 1px solid #444; /* Separador entre enlaces */
    }

    .menu a:last-child {
        border-bottom: none;
    }

    .menu.active {
        display: flex; /* Mostrar el menú desplegable cuando esté activo */
    }

    form {
        width: 90%; /* Reducir el ancho del formulario */
        margin: 20px auto; /* Centrar el formulario */
        padding: 15px; /* Reducir el padding interno */
    }

    form input, form select, form button {
        font-size: 1em; /* Ajustar el tamaño de la fuente */
        margin-bottom: 10px; /* Reducir el margen inferior */
    }

    form button {
        background-color: #1a1a1a; /* Fondo oscuro */
        color: #fff; /* Texto blanco */
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    form button:hover {
        background-color: #333; /* Fondo más oscuro al pasar el cursor */
    }
}

/* Contenedor para tablas responsivas */
.table-responsive {
    display: block; /* Convierte la tabla en un bloque */
    width: 100%; /* Ocupa todo el ancho disponible */
    overflow-x: auto; /* Habilita el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos táctiles */
}

/* Estilos para la tabla */
table {
    width: 100%; /* La tabla ocupará todo el ancho disponible */
    border-collapse: collapse; /* Elimina los espacios entre bordes */
    margin: 10px auto; /* Centra la tabla horizontalmente */
    font-family: Arial, sans-serif;
    font-size: 12px; /* Tamaño de la fuente */
}

table th, table td {
    padding: 6px 8px; /* Espaciado interno de las celdas */
    text-align: left; /* Alineación del texto */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

table thead th {
    background-color: #f2f2f2; /* Fondo gris claro para encabezados */
    border-bottom: 2px solid #ddd; /* Línea inferior para encabezados */
}

table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Fondo gris claro para filas impares */
}

table tbody tr:nth-child(even) {
    background-color: #ffffff; /* Fondo blanco para filas pares */
}

table td {
    border-bottom: 1px solid #ddd; /* Líneas horizontales entre filas */
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto; /* Habilita el scroll horizontal */
    }

    table {
        font-size: 10px; /* Reduce el tamaño de la fuente */
    }

    table th, table td {
        padding: 4px 6px; /* Reduce el espaciado interno */
    }
}

@media (max-width: 480px) {
    .table-responsive {
        overflow-x: auto; /* Habilita el scroll horizontal */
    }

    table {
        font-size: 9px; /* Reduce aún más el tamaño de la fuente */
    }

    table th, table td {
        padding: 3px 5px; /* Ajusta el espaciado interno */
    }
}

/** Estilos para botones de acción */
.btn-editar, .btn-ver {
    display: block; /* Apilar los botones verticalmente */
    padding: 4px 8px; /* Reducir el tamaño del botón */
    background-color: #000; /* Fondo negro */
    color: white; /* Texto blanco */
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px; /* Reducir el tamaño de la fuente */
    margin-bottom: 5px; /* Espaciado entre los botones */
    text-align: center; /* Centrar el texto */
}

.btn-editar:hover, .btn-ver:hover {
    background-color: #333; /* Fondo gris oscuro al pasar el cursor */
}

/* Estilos para contenedor de cuadrícula */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajusta el tamaño mínimo y máximo */
    gap: 20px; /* Espaciado entre los elementos */
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Color de fondo */
    border: 1px solid #ccc; /* Borde */
    border-radius: 10px; /* Bordes redondeados */
    height: 200px; /* Altura fija para que sean cuadrados */
    text-align: center;
    text-decoration: none; /* Eliminar subrayado */
    font-size: 18px; /* Tamaño de fuente */
    font-weight: bold;
    color: #333; /* Color del texto */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animación */
}

.grid-item:hover {
    background-color: #ddd; /* Color de fondo al pasar el mouse */
    transform: scale(1.05); /* Efecto de zoom */
    text-decoration: none; /* Asegurar que no se subraye */
}

/* Eliminar subrayado de todos los enlaces */
a {
    text-decoration: none;
}