/* styles.css */

/* 
  Reset básico (algunos proyectos usan normalize.css o similar).
  Ajustaremos box-sizing y removemos márgenes.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 
  Body y html 
  - Ajustamos fuente, color de fondo
*/
html, body {
    font-family: Arial, sans-serif;
    background: #f8f9fa;
    color: #212529;
}

/* Ajuste general del contenedor principal. Bootstrap en sí ya es responsive, 
   pero podemos añadir un margen vertical extra si queremos. */
.container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Navbar (si usas .navbar) 
   - Si usas header.php con "navbar-dark bg-dark" 
   no tocaremos mucho, solo detallitos. */
.navbar-brand {
    font-weight: bold;
    letter-spacing: 1px;
}

.nav-link:hover {
    text-decoration: underline;
}

/* Tablas 
   - Creamos un fondo blanco y un borde general */
.table {
    background: #fff;
    border: 1px solid #dee2e6;
}
.table thead th {
    background-color: #e9ecef;
}

/* Paginación */
.pagination {
    margin-top: 1rem;
    text-align: center;
}
.pagination button {
    margin: 2px;
}

/* Botones, formularios, etc. 
   - Podríamos personalizar, pero confiamos mayormente en Bootstrap. */
.form-control {
    margin-bottom: 0.8rem;
}

/* Alertas personalizadas (si las usas). 
   - De nuevo, Bootstrap ya te ofrece .alert. */
.alert-custom {
    border: 1px solid #d6d8db;
    background-color: #e2e3e5;
    color: #383d41;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

/* Miniaturas en la evidencia (view_case.php) */
.img-thumbnail {
    max-width: 150px;
    cursor: pointer;
}

/* Footer (si lo usas) */
footer {
    background: #343a40;
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* 
  Responsividad adicional 
  (Bootstrap maneja la mayoría de los breakpoints, 
   pero si requieres algo específico, podrías añadirlo):
*/
@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
    }
    .form-group label {
        font-size: 0.9rem;
    }
}