/* * Archivo: estilos.css
 * Propósito: Dar un aspecto visual básico a nuestra aplicación CRM.
 */

/* Configuración general del cuerpo de la página */
body {
    font-family: Arial, sans-serif;
    margin: 0; /* Quitamos márgenes por defecto */
    background-color: #f4f7f6; /* Un gris muy claro de fondo */
    color: #333; /* Color de texto principal */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa al menos toda la altura de la pantalla */
}

/* Cabecera (Título y menú) */
header {
    background-color: #2c3e50; /* Azul oscuro */
    color: #ffffff; /* Texto blanco */
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

header h1 {
    margin: 0;
    text-align: center;
    font-size: 1.8rem;
}

/* Barra de navegación */
nav {
    background-color: #34495e; /* Azul un poco más claro */
    padding: 0.5rem;
    text-align: center;
}

nav a {
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-decoration: none; /* Quitamos el subrayado de los enlaces */
    font-weight: bold;
    display: inline-block;
}

nav a:hover {
    background-color: #4e6a85; /* Color al pasar el ratón */
    border-radius: 4px;
}

/* Contenido principal */
main.container {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto; /* Centrado automático (arriba/abajo y izq/der) */
    flex-grow: 1; /* Hace que el contenido principal crezca para empujar el footer hacia abajo */
}

/* Cajas de "widgets" o módulos */
.widget {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem; /* Separación entre cajas */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.widget h3 {
    margin-top: 0;
    color: #34495e; /* Azul oscuro para los títulos de sección */
    border-bottom: 2px solid #f4f7f6;
    padding-bottom: 0.5rem;
}

/* Pie de página */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #2c3e50;
    color: #aaa;
    margin-top: auto; /* Se pega abajo */
}
/* --- NUEVOS ESTILOS PARA index.php (Filtros y Buscador) --- */

/* Mensajes de estado (éxito/error) */
.mensaje {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
}
.mensaje.exito {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.mensaje.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Estilos para las tablas */
.tabla-datos {
    width: 100%;
    border-collapse: collapse; /* Bordes de celdas se juntan */
    margin-top: 1rem;
}
.tabla-datos th, .tabla-datos td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.tabla-datos th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.tabla-datos tr:nth-child(even) {
    background-color: #f9f9f9; /* Color para filas pares */
}
.tabla-datos tr:hover {
    background-color: #f1f1f1; /* Resaltar fila al pasar el ratón */
}
.accion-botones a {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem; /* Un poco más pequeño para que quepa */
}
.accion-botones a.editar { background-color: #2ecc71; }
.accion-botones a.eliminar { background-color: #e74c3c; }
.accion-botones a.imprimir { background-color: #9b59b6; }
.accion-botones a:hover { opacity: 0.9; }

.no-records {
    text-align: center;
    padding: 20px;
    color: #666;
    background-color: #f0f0f0;
    border-radius: 5px;
    margin-top: 15px;
}

/* --- ESTILOS PARA LOS FILTROS --- */
.zona-filtros {
    /* (usamos la clase .widget que ya existe) */
}
.zona-filtros form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para los 'select' */
    gap: 1.5rem; 
}
.campo-buscador {
    grid-column: 1 / -1; /* Ocupa desde la columna 1 hasta la última */
}
.zona-filtros .campo-filtro, .campo-buscador {
    flex-grow: 1;
}
.zona-filtros label { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: bold; 
}
.zona-filtros select,
.zona-filtros input[type="search"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
}
.botones-filtro {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    display: flex;
    gap: 1rem;
    justify-content: flex-end; /* Alinea botones a la derecha */
}
.zona-filtros button, .zona-filtros a { 
    padding: 0.5rem 1rem; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
}
.zona-filtros button[type="submit"] { background-color: #3498db; }
.zona-filtros a.limpiar { background-color: #e74c3c; }
/* --- NUEVOS ESTILOS PARA LA PAGINACIÓN --- */

.paginacion {
    margin-top: 2rem; /* Espacio arriba */
    text-align: center; /* Centra los botones */
}

.paginacion a {
    color: #3498db; /* Azul */
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 4px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* El botón de la página actual */
.paginacion a.activo {
    background-color: #3498db; /* Azul */
    color: white; /* Texto blanco */
    border: 1px solid #3498db;
}

/* Efecto al pasar el ratón (que no sea el activo) */
.paginacion a:hover:not(.activo) {
    background-color: #f4f4f4;
}