* Archivo: estilos.css
 * Descripción: Estilos profesionales y responsivos para la aplicación de WebSoluciones.
 * Paleta de Colores:
 * --color-principal: Azul corporativo (enfoque, profesionalismo)
 * --color-acento: Verde vibrante (éxito, acción, guardado)
 * --color-fondo: Blanco o Gris muy claro
 * --color-borde: Gris suave
 */

:root {
    --color-principal: #414d6c; /* Azul corporativo oscuro */
    --color-secundario: #007bff; /* Azul primario */
    --color-acento: #28a745;    /* Verde para éxito/guardar */
    --color-peligro: #dc3545;   /* Rojo para eliminar */
    --color-fondo: #f8f9fa;     /* Gris muy claro */
    --color-texto: #343a40;     /* Gris oscuro para texto */
    --color-borde: #dee2e6;     /* Gris suave para bordes */
    --sombra-card: 0 4px 12px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: #343a40;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f2eded;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* --- Encabezado y Títulos --- */

.encabezado {
    width: 100%;
    background-color: #414d6c;
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.encabezado h1, .encabezado h2 {
    color: white;
    margin: 0;
    font-size: 1.8em;
}

h3, h4 {
    color: 007bff;
    border-bottom: 2px solid 007bff;
    padding-bottom: 5px;
    margin-top: 20px;
}

p {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 6px;
	max-width: 90%;
	font-size: 1.2rem;
	line-height: 2rem;
	padding: 2px;
	border-left: 2px solid #414d6c;
	border-right: 2px solid #414d6c;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(65, 77, 108, 0.9);
	border-radius: 10px;
}

/* --- Contenedor Principal (Formularios y Tablas) --- */

.table-dispositivos {
	width: 100%;
    margin: 20px auto;
    overflow-x: auto; /* Permite scroll horizontal en móviles */
    padding: 2px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}
.form-container, .table-container {
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 90%;
    
    margin-bottom: 10px;
}

/* --- Formularios --- */

form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre elementos del formulario */
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select {
    padding: 7px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 1em;
    width: 100%;
    transition: border-color 0.3s;
}

input:focus, select:focus {
    border-color: #007bff;
    outline: none;
}

/* Estilo para los labels/textos antes de los inputs */
form > * {
    display: block;
    margin-bottom: 2px;
}

form br {
    display: none; /* Elimina los saltos de línea molestos en formularios */
}


/* --- Botones --- */

button, .button-link {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    color: white;
    transition: background-color 0.3s, transform 0.1s;
    text-decoration: none;
    text-align: center;
}

/* Botón principal (Acciones primarias como Login, Guardar) */
button[type="submit"], button[name="editar_usuario"], button[name="solicitar_codigo"] {
    background-color: #0056b3;
}

button[type="submit"]:hover, button[name="editar_usuario"]:hover, button[name="solicitar_codigo"]:hover {
    background-color: #004085; /* Azul más oscuro */
    transform: translateY(-1px);
}

/* Botón de éxito (Registro, etc) */
button[name="cambiar_password"] {
    background-color: #28a745;
}

button[name="cambiar_password"]:hover {
    background-color: #1e7e34;
    transform: translateY(-1px);
}

/* Botón de peligro (Eliminar) */
button[name="eliminar_usuario"] {
    background-color: #dc3545;
    width: 100%; /* Opcional: para que ocupe todo el ancho */
}

button[name="eliminar_usuario"]:hover {
    background-color: #bd2130;
    transform: translateY(-1px);
}

/* --- Mensajes y Enlaces --- */

a {
    color: #007bff;
    text-decoration: none;
    margin-top: 10px;
    text-align: center;
}

a:hover {
    text-decoration: underline;
}

/* Estilos de mensaje de estado */
.mensaje-exito {
    color: #28a745;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.mensaje-error {
    color: #dc3545;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* --- Estilos de Tabla (Administrar Usuarios) --- */

.table-container {
    max-width: 70%;
    margin: 20px auto;
    overflow-x: auto; /* Permite scroll horizontal en móviles */
    padding: 10px;
}

.data-table {
    
    border-collapse: collapse;
    margin-top: 10px;
    min-width: 800px; /* Asegura un mínimo de ancho para escritorio */
}

.data-table th, .data-table td {
    padding: 12px 12px;
    text-align: left;
    border: 1px solid #dee2e6;
    vertical-align: top; /* Alineación vertical para inputs */
}

.data-table th {
    background-color: #0056b3;
    color: white;
    font-weight: 600;
}

.data-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Cebra para mejor lectura */
}

.data-table tr:hover {
    background-color: #e9ecef;
}

.data-table td input[type="text"], 
.data-table td input[type="email"], {
    width: 60%;
    padding: 8px;
    margin: 5px 0;
    font-size: 0.9em;
}

.data-table td form, {
    gap: 1px; /* Reduce el espacio entre elementos del formulario de edición */
}
/* *** MODIFICACIÓN CRÍTICA PARA LA DISTRIBUCIÓN DE 3 COLUMNAS *** */

/* La celda que contiene todo el contenido de la fila */
.data-table td.user-row {
    padding: 0; /* Quitamos padding de la celda externa */
    /* Usamos display: grid en la celda para crear las 3 columnas internas */
    display: grid;
    grid-template-columns: 2fr 3fr 2fr; /* Columna 1 (Info) | Columna 2 (Edición) | Columna 3 (Acción) */
    gap: 1px; /* Separación mínima entre las columnas */
    align-items: stretch; /* Estira el contenido */
}

/* Estilo para los contenedores internos (las 3 columnas) */
.user-info, .user-edit, .user-actions {
    padding: 10px;
    border-right: 1px solid #f2eded; /* Separador visual */
}

.user-actions {
    border-right: none; /* Última columna no lleva separador */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Estilo de los campos de edición dentro de la columna 2 */
.user-edit form {
    gap: 5px; 
}

.user-info p {
    text-align: left;
    margin: 0;
    padding: 2px 0;
    max-width: none;
    font-size: 0.95em;
}

.user-info strong {
    font-weight: bold;
    display: inline-block;
    min-width: 80px; /* Para alinear etiquetas */
    color: #414d6c;
}



/* Responsive para Tablas */
@media (max-width: 1024px) {
    .data-table td.user-row {
        /* En tablet y móvil, apilamos las columnas */
        grid-template-columns: 1fr; 
    }

    .user-info, .user-edit, .user-actions {
        border-right: none;
        border-bottom: 1px solid var(--color-borde);
    }
    .user-actions {
        border-bottom: none;
    }
}
/* Responsive para Tablas */
@media (max-width: 768px) {
    .form-container {
        max-width: 90%;
        padding: 20px;
    }
    
    .data-table {
        /* Permite el scroll horizontal */
        display: block; 
        min-width: 100%;
    }
    
    .data-table th, .data-table td {
        font-size: 0.9em;
    }

    .data-table td {
        white-space: normal;
    }

    .data-table td form {
        display: block; /* Vuelve la edición a formato de bloque */
    }

    button {
        font-size: 0.9em;
        padding: 10px 15px;
    }
}