/* =========================================
   ESTILOS GENERALES
   ========================================= */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #121212; 
    color: #e0e0e0; 
    margin: 0; 
    padding: 0; 
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

.main-content {
    flex: 1; 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* =========================================
   ENCABEZADO Y LOGO
   ========================================= */
.header-container { text-align: center; margin-bottom: 30px; }
.logo { max-width: 280px; height: auto; margin-bottom: 15px; }
h1 { color: #ffffff; margin-top: 0; font-size: 32px; font-weight: 600; letter-spacing: 1px; }

/* =========================================
   BOTONES
   ========================================= */
.botones-container { margin-bottom: 25px; display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; align-items: center; }
button { 
    padding: 12px 24px; 
    color: white; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 600; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: all 0.2s ease-in-out;
}
button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
button:disabled { background-color: #555; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-eventos { background-color: #d32f2f; }
.btn-eventos:hover { background-color: #b71c1c; }
.btn-auto { background-color: #2e7d32; font-size: 16px; border: 1px solid #4caf50; }
.btn-auto:hover { background-color: #1b5e20; }
.btn-config { background-color: #424242; }
.btn-config:hover { background-color: #616161; }

/* =========================================
   PANEL DE CONFIGURACIÓN
   ========================================= */
#panel-config { 
    background-color: #1e1e1e; 
    border: 1px solid #333; 
    padding: 25px; 
    border-radius: 8px; 
    margin-bottom: 25px; 
    display: none; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.config-grupo { margin-bottom: 20px; }
.config-grupo label { display: block; font-weight: bold; margin-bottom: 8px; color: #bdbdbd; font-size: 15px;}
.config-input { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #424242; background-color: #121212; color: white; box-sizing: border-box; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; background: #121212; padding: 15px; border-radius: 5px;}
.checkbox-grid label { font-weight: normal; color: #e0e0e0; display: flex; align-items: center; cursor: pointer; margin: 0;}
.checkbox-grid input { margin-right: 10px; width: 18px; height: 18px; cursor: pointer; accent-color: #d32f2f; }

/* =========================================
   TARJETAS DE ALERTAS
   ========================================= */
.alerta-card { 
    background-color: #1e1e1e; 
    padding: 18px; 
    margin-top: 15px; 
    border-radius: 6px; 
    border-left: 6px solid #d32f2f; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    line-height: 1.5;
}
.alerta-card:hover { transform: translateX(5px); }
.alerta-card strong { color: #ffffff; }

/* =========================================
   PIE DE PÁGINA
   ========================================= */
.footer-container { 
    width: 100%;
    background-color: #121212;
    margin-top: auto; 
}
.footer-img { 
    width: 100%; 
    height: auto; 
    display: block; 
    opacity: 0.9; 
    transition: opacity 0.3s; 
}
.footer-img:hover { opacity: 1; }

p.centrado { text-align: center; color: #aaa; margin-bottom: 15px; }

/* =========================================
   PAGINACIÓN (CORREGIDA)
   ========================================= */
.paginacion-container { 
    display: flex; 
    justify-content: center; 
    margin-top: 25px; 
    margin-bottom: 30px; /* Da un respiro antes del pie de página */
    gap: 8px; 
    align-items: center; 
    flex-wrap: wrap; /* Evita que se amontonen si la pantalla es chica */
}

.paginacion-btn { 
    padding: 8px 16px; 
    background-color: #2a2a2a !important; /* Fuerza el fondo gris oscuro */
    border: 1px solid #555 !important; 
    color: #ffffff !important; /* Fuerza el texto a ser blanco puro */
    cursor: pointer; 
    border-radius: 5px; 
    transition: all 0.2s ease; 
    font-weight: bold;
}

.paginacion-btn:hover:not(:disabled) { 
    background-color: #444 !important; 
    border-color: #888 !important;
}

.paginacion-btn.active { 
    background-color: #d32f2f !important; /* Rojo institucional para resaltar */
    color: #ffffff !important; 
    border-color: #b71c1c !important; 
}

.paginacion-btn:disabled { 
    color: #666 !important; 
    cursor: not-allowed; 
    background-color: #181818 !important; 
    border-color: #333 !important; 
}

.paginacion-ellipsis { 
    color: #aaa; 
    padding: 0 5px; 
    font-weight: bold;
    letter-spacing: 2px;
}
/* =========================================
   PANTALLA DE LOGIN Y LOGOUT
   ========================================= */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}
.login-box {
    background-color: #1e1e1e;
    padding: 40px;
    border-radius: 8px;
    border-top: 6px solid #d32f2f;
    text-align: center;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.login-box input {
    width: 90%;
    padding: 12px;
    margin: 10px 0;
    background-color: #121212;
    border: 1px solid #444;
    color: white;
    border-radius: 4px;
}
.login-box button {
    width: 95%;
    padding: 12px;
    margin-top: 20px;
    background-color: #d32f2f;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s;
}
.login-box button:hover { background-color: #b71c1c; }
.error-login { color: #ff5252; margin-bottom: 15px; font-size: 14px; font-weight: bold; }

.btn-salir {
    background-color: #333;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    position: absolute;
    top: 20px;
    right: 20px;
    border: 1px solid #555;
}
.btn-salir:hover { background-color: #555; }