/* =============================================== */
/* 1. ESTILOS BASE Y GLOBALES (APLICAN AL DASHBOARD/ADMIN) */
/* =============================================== */

/* Estilos Generales para todo el sitio */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    color: #333;
    background-color: #f4f7f9; 
    
    /* AJUSTE CLAVE DE POSICIÓN: ESPACIO PARA EL HEADER (LOGOS) + NAVBAR. */
    padding-top: 150px !important; /* AUMENTADO para compensar el logo más grande */ 
}

/* --- Contenedores y Estructura (Usado en Dashboard y Admin) --- */
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
h2 { 
    color: #1a73e8; 
    border-bottom: 2px solid #e0e0e0; 
    padding-bottom: 10px; 
    margin-bottom: 20px;
}
.dashboard-link {
    display: block;
    margin-top: 30px;
    color: #1a73e8;
    text-decoration: none;
    font-weight: 600;
}
.dashboard-link:hover {
    text-decoration: underline;
}

/* --- Estilos de Botones y Enlaces de Acción --- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}
.btn-primary {
    background-color: #28a745; 
    color: white;
}
.btn-primary:hover {
    background-color: #218838;
}

/* --- Mensaje de Error (Usado en Login y Dashboard) --- */
.error-message {
    background-color: #ffe0e0;
    color: #cc0000;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #ff9999;
    text-align: left;
}
.success-message {
    background-color: #e6ffed;
    color: #00793b;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #b3e0c7;
    text-align: left;
}

/* =============================================== */
/* 2. ESTILOS DE TABLA (admin_users.php) */
/* =============================================== */
.user-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
}
.user-table th, .user-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}
.user-table th {
    background-color: #f8f9fa;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
}
.user-table tr:hover {
    background-color: #eaf1fb;
}
.actions a {
    margin-right: 12px;
    text-decoration: none;
    color: #1a73e8;
}
.actions a.delete {
    color: #dc3545; 
}
.status-dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
.available { background-color: #28a745; }
.unavailable { background-color: #dc3545; }
.call-icon a { color: #007bff; font-size: 1.2em; text-decoration: none; }
.call-icon a:hover { color: #0056b3; }
.call-icon i.disabled { color: #ccc; cursor: default; }


/* =============================================== */
/* 3. ESTILOS DE HEADER CON LOGOTIPOS (BARRA SUPERIOR) - CORRECCIÓN DEFINITIVA */
/* =============================================== */

.header-content-wrapper {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%;
    padding-bottom: 0; 
    background-color: white; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
    z-index: 9999; 
}

.header-logos {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px; 
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    position: static; 
}

/* TAMAÑO GENÉRICO BASE (APLICA AL LOGO DERECHO) */
.header-logos > img,
.header-logos img {
    max-height: 80px !important; 
    width: auto !important; 
}

/* AJUSTE CLAVE: AUMENTAMOS EL TAMAÑO DEL LOGO IZQUIERDO EN UN 50% (80px -> 120px) */
.logo-left { 
    max-height: 120px !important; 
    max-width: 300px !important; 
}

.logo-right { 
    max-width: 100px !important; 
}

.header-welcome-info {
    text-align: center; 
    flex-grow: 1; 
    margin: 0 20px; 
    line-height: 1.2; 
}

.header-welcome-info h1 {
    font-size: 1.2em; 
    margin: 0; 
    color: #333; 
    font-weight: 600;
}

.header-welcome-info p {
    font-size: 0.8em; 
    margin: 3px 0 0; 
    color: #666; 
}
/* =============================================== */


/* =============================================== */
/* 4. ESTILOS ESPECÍFICOS del LOGIN (login.php) - SOLUCIÓN AISLADA */
/* =============================================== */

/* Aplica el centrado y fondo solo en la página que contenga .login-container */
body:has(.login-container) { 
    display: flex !important; 
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    /* CLAVE: Anula el padding-top del body global */
    padding: 0 !important; 

    /* Estilos para el fondo */
    background-image: url('images/fondo_bcms.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

/* OCULTA LAS BARRAS FIJAS, PERO SOLO EN LA PÁGINA DE LOGIN */
body:has(.login-container) .header-content-wrapper,
body:has(.login-container) .top-navbar {
    display: none !important; 
}


.login-container {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.95); 
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 0 auto; 
    position: relative;
    padding-top: 60px; 
}

/* Regla para el Logo en la página de Login */
.login-container .logo-login {
    height: 60px; 
    width: 450; 
}

/* Estilos de inputs y grupos para Login */
.input-group {
    margin-bottom: 20px;
    text-align: left;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}
.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.input-group input:focus {
    border-color: #1a73e8;
    outline: none;
}

/* Botón de Login (Microsoft) */
.btn-login, .btn-microsoft {
    width: 100%;
    padding: 12px;
    background-color: #1a73e8; 
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.btn-login:hover, .btn-microsoft:hover {
    background-color: #165ab7;
}

/* Botón de Microsoft (ajuste de color y diseño) */
.btn-microsoft {
    background-color: #0078D4; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-microsoft:hover {
    background-color: #005a9e;
}
.btn-microsoft img {
    height: 20px;
    width: auto;
    margin-right: 8px;
}
.forgot-password {
    color: #1a73e8; 
    text-decoration: none;
}
.forgot-password:hover {
    text-decoration: underline;
}

/* =============================================== */
/* 5. ESTILOS DE LA BARRA DE NAVEGACIÓN FIJA (BARRA INFERIOR) - (DASHBOARD/ADMIN) */
/* =============================================== */

.top-navbar {
    position: fixed;
    /* AJUSTE CLAVE DE POSICIÓN: Se mueve para que el logo quede arriba */
    top: 100px;
    left: 100;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    height: 50px;
}

/* CLAVE PARA EL ANCHO: Centra y limita el contenido de la barra de navegación para que coincida con los logos */
.top-navbar-content {
    max-width: 1200px; /* Mismo ancho del contenedor de los logos */
    margin: 0 auto; /* Centra el contenido en el viewport */
    padding: 0px;
    height: 100%;
    display: flex; 
    /* 🔑 CAMBIO CLAVE: Centra los elementos (nav-item) en el eje horizontal */
    justify-content: center; 
    align-items: center;
}

/* Aplicamos los estilos de flexbox al nuevo contenedor de contenido */
.nav-item {
    text-align: center;
    padding: 0 15px;
    text-decoration: none;
    color: black;
    font-size: 0.85em;
    /* Mantiene los ítems en línea y apila su contenido interno */
    display: inline-flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}
.nav-item:hover {
    background-color: #eaf1fb;
}
.nav-icon {
    font-size: 1.2em;
    margin-bottom: 2px;
}

/* Estilo para el botón de Cerrar Sesión (Rojo) */
.logout-btn {
    background-color: #ffffff !important;
    padding-left: 15px;
    padding-right: 15px;
    /* 🔑 AJUSTE CLAVE: Anulamos el 'margin-left: auto' para que se centre con los demás. */
    /* Si quieres que el botón de Logout se quede a la derecha, mantén el 'margin-left: auto' */
    margin-left: 0; 
    /* Si quieres que se centre junto a los demás, usa margin-left: 0; */
    
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* NOTA IMPORTANTE sobre el botón de CERRAR SESIÓN: */
/*
Si deseas que el botón de Cerrar Sesión (`.logout-btn`) permanezca **pegado a la derecha**
mientras el resto de los iconos está centrado, DEBES mantener el estilo original:

.logout-btn {
    ...
    margin-left: auto; 
    ...
}
Si quieres que se centre junto a los demás, el código de arriba es correcto (margin-left: 0; o simplemente quitarlo).
*/

.logout-btn:hover {
    background-color: #e74c3c !important;
    color: white !important;
}

/* =============================================== */
/* 6. ESTILOS ESPECÍFICOS DE ADMIN_CONTACTOS */
/* =============================================== */

/* Fondo Salmón para la caja de selección de usuario (Homologación) */
.select-form-container {
    margin-bottom: 25px; 
    padding: 15px;
    border-radius: 5px;
    background-color: #ffeaea; 
    border: 1px solid #cc0000; 
}

/* Fondo Salmón para el formulario de añadir nuevo contacto (Homologación) */
.add-form-box {
    border: 1px dashed #cc0000; 
    padding: 20px; 
    margin-bottom: 25px; 
    border-radius: 5px;
    background-color: #ffeaea; 
}

/* Estilo para el enlace/botón de volver al Dashboard */
.dashboard-link {
    display: inline-block;
    padding: 8px 15px;
    margin-top: 15px;
    background-color: #007bff; 
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.dashboard-link:hover {
    background-color: #0056b3;
}

/* =============================================== */
/* 7. ESTILOS DE ADMIN USUARIOS */
/* =============================================== */

/* Estilos de Botones y Enlaces */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}
.btn-primary {
    background-color: #28a745; 
    color: white;
}
.btn-primary:hover {
    background-color: #218838;
}

/* Estilos de Tabla (Profesional) */
.user-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
}
.user-table th, .user-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}
.user-table th {
    background-color: #f8f9fa; 
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
}
.user-table tr:hover {
    background-color: #eaf1fb; 
}
.user-table tr:last-child td {
    border-bottom: none; 
}

/* Estilos de Acciones (Enlaces dentro de la tabla) */
.actions a {
    margin-right: 12px;
    text-decoration: none;
    color: #1a73e8; 
    font-size: 0.95em;
}
.actions a.delete {
    color: #dc3545; 
}
.actions a:hover {
    text-decoration: underline;
}