/* ========================================================= */
/* HOJA DE ESTILOS - PANEL DE ADMINISTRACIÓN (admin.css) */
/* ========================================================= */










/* 1. GLOBALES ADMIN */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
    color: #333;
    /* Flex para "Sticky Footer" (Footer siempre abajo) */
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

a { text-decoration: none; }










/* 2. ENCABEZADO ADMIN (OSCURO) */
header {
    background-color: #2c3e50;
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
    position: relative; /* No fijo, se mueve con la página */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link { display: flex; align-items: center; }
.logo-img { height: 40px; width: auto; } /* Logo más compacto */

.admin-header ul {
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-header a,
.admin-header button {
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    transition: 0.2s;
    font-size: 14px;
    font-weight: normal;
}

.admin-header a:hover { background-color: rgba(255, 255, 255, 0.2); }

#logout-btn { background-color: #dc3545; border-color: #dc3545; }
#logout-btn:hover { background-color: #c82333; }














/* 3. LOGIN Y RESET PASSWORD */
.login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    min-height: 80vh;
}

#login-section, #reset-section {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

#login-section h2, #reset-section h2 { 
    text-align: center; 
    margin-top: 0; 
    color: #2c3e50; 
    margin-bottom: 20px;
}

.form-group { margin-bottom: 20px; width: 100%; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; }
.form-group input, .form-group select, .form-group textarea { 
    width: 100%; padding: 12px; border: 1px solid #ddd; 
    border-radius: 4px; box-sizing: border-box; font-family: inherit;
}

button[type="submit"] {
    width: 100%; padding: 12px; background: #007bff; color: white; 
    border: none; border-radius: 4px; font-weight: bold; cursor: pointer;
    font-size: 1.1em; transition: 0.3s; margin-top: 10px;
}
button[type="submit"]:hover { background: #0056b3; }

.forgot-password-link { text-align: center; margin-top: 15px; }
.forgot-password-link a { color: #007bff; font-size: 14px; }
.forgot-password-link a:hover { text-decoration: underline; }





















/* ========================================================= */
/* 4. PANEL PRINCIPAL Y PESTAÑAS (REDDISEÑADO MODERN) */
/* ========================================================= */

.container-main {
    max-width: 1200px;
    width: 100%; /* Asegurar ancho completo */
    margin: 0 auto;
    padding: 0 25px 50px 25px;
    box-sizing: border-box;
    
    /* ▼▼▼ ESTABILIDAD: Altura mínima del 85% de la ventana ▼▼▼ */
    min-height: 85vh; 
    /* Esto evita que el footer suba y baje bruscamente */
    
    flex: 1; /* Empuja el footer hacia abajo */
}

/* Contenedor de las pestañas (Barra Gris Suave) */
.admin-tabs {
    display: inline-flex; /* Se ajusta al contenido, no ocupa todo el ancho */
    gap: 5px;
    background: #e9ecef; /* Fondo gris contenedor */
    padding: 5px;
    border-radius: 8px; /* Bordes redondeados */
    margin-bottom: 25px;
    border: none; /* Quitamos la línea fea de abajo */
}

/* Botón de Pestaña (Inactivo) */
.admin-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    color: #6c757d; /* Gris medio */
    transition: all 0.2s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 0; /* Sin márgenes raros */
}

.admin-tab-btn i {
    margin-right: 8px;
    font-size: 1.1em;
}

/* Efecto Hover */
.admin-tab-btn:hover {
    color: #333;
    background-color: rgba(255,255,255,0.5);
}

/* Botón de Pestaña (ACTIVO) */
.admin-tab-btn.active {
    background: white; /* Blanco puro */
    color: #007bff; /* Azul corporativo */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Sombra suave 3D */
    border: none;
}

/* Clase para ocultar paneles */
.admin-section-hidden {
    display: none !important; /* Important para asegurar que se oculte */
}



























/* 5. FORMULARIO DE INMUEBLES (CRUD) */
#form-crud, #form-user-crud {
    background: white; padding: 30px; border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #eee;
}

fieldset {
    border: 1px solid #eee; padding: 25px; margin-bottom: 25px; border-radius: 6px;
}
legend {
    color: #007bff; font-weight: bold; padding: 0 10px; font-size: 1.1em;
}

.form-group-inline { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.form-group-inline > div { flex: 1; min-width: 200px; }

/* Checkboxes Especiales (Venta/Arriendo) */
.checkbox-group { display: flex; gap: 20px; margin-top: 5px; }
.checkbox-group label { font-weight: normal; cursor: pointer; display: flex; align-items: center; }
.checkbox-group input { width: auto; margin-right: 8px; }

/* Scrollable Selects (números grandes) */
.scrollable-select { max-height: 150px; overflow-y: auto; }

























/* 6. TAG INPUTS (Amenidades) */
.tag-input-wrapper {
    border: 1px solid #ccc; border-radius: 4px; padding: 5px; background: white;
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    min-height: 42px;
}
.tag-input-wrapper:focus-within { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.1); }

.tag-item {
    background-color: #e3f2fd; color: #007bff; border-radius: 3px; padding: 4px 8px;
    font-size: 14px; display: flex; align-items: center; gap: 6px; border: 1px solid #bbdefb;
}
.tag-close { cursor: pointer; font-weight: bold; font-size: 16px; line-height: 1; }
.tag-close:hover { color: #d32f2f; }

.tag-input {
    border: none !important; outline: none !important; padding: 8px !important;
    flex-grow: 1; min-width: 150px; background: transparent; box-shadow: none !important;
}

.suggestions-list {
    position: absolute; top: 100%; left: 0; width: 100%; background: white;
    border: 1px solid #ddd; border-radius: 0 0 4px 4px; list-style: none;
    margin: 0; padding: 0; max-height: 200px; overflow-y: auto; z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: none;
}
.suggestions-list li { padding: 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.suggestions-list li:hover { background-color: #f8f9fa; color: #007bff; }




















/* 7. DRAG & DROP IMÁGENES */
#upload-drop-zone {
    border: 3px dashed #ccc; padding: 30px; text-align: center; background: #f8f9fa;
    border-radius: 8px; cursor: pointer; transition: 0.3s;
}
#upload-drop-zone.dragover { background: #e9ecef; border-color: #007bff; }
#upload-drop-zone i { font-size: 48px; color: #007bff; margin-bottom: 10px; display: block; }

.btn-upload-label {
    display: inline-block; padding: 10px 20px; background: #007bff; color: white;
    border-radius: 6px; cursor: pointer; font-weight: 500; margin-top: 15px;
}

#image-preview-container {
    display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; padding: 10px;
    border: 1px solid #eee; border-radius: 6px; min-height: 100px;
    background: #fafafa;
}
.img-preview-wrapper { position: relative; width: 120px; height: 120px; cursor: grab; }
.img-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
.img-preview-delete {
    position: absolute; top: -8px; right: -8px; background: #dc3545; color: white;
    border-radius: 50%; width: 24px; height: 24px; text-align: center; line-height: 24px;
    cursor: pointer; font-weight: bold; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


















/* ========================================================= */
/* 8. LISTA DE GESTIÓN Y FILTROS (ESTILO PREMIUM) */
/* ========================================================= */

.admin-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Más espacio entre elementos */
    padding: 25px;
    background: white; /* Fondo blanco limpio */
    border: 1px solid #eef2f7;
    border-radius: 12px; /* Bordes más redondeados */
    margin-bottom: 30px;
    align-items: flex-end; /* Alinea los inputs con los botones abajo */
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* Sombra sutil elegante */
}

/* Etiquetas de los filtros */
.admin-filtros label {
    font-size: 13px;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contenedores de cada filtro */
.filtro-item {
    flex: 1;
    min-width: 200px; /* Ancho mínimo para que no se aplasten */
    display: flex;
    flex-direction: column;
}

/* El input de búsqueda (texto) debe ser más ancho */
.filtro-item:first-child {
    flex: 2; /* Ocupa el doble de espacio */
    min-width: 280px;
}

/* Estilos de Inputs y Selects */
.admin-filtros input, 
.admin-filtros select {
    width: 100%;
    height: 45px; /* Altura fija para alinear con botones */
    padding: 0 15px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa; /* Fondo gris muy suave */
    font-size: 15px;
    color: #495057;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

/* Efecto al hacer clic (Focus) */
.admin-filtros input:focus, 
.admin-filtros select:focus {
    background-color: #fff;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    outline: none;
}

/* Botones de Filtrar y Limpiar */
#btn-admin-filtrar, 
#btn-admin-limpiar {
    height: 45px; /* Misma altura que los inputs */
    padding: 0 25px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 0; /* Quitamos margen izquierdo antiguo */
}

#btn-admin-filtrar {
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}

#btn-admin-filtrar:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

#btn-admin-limpiar {
    background-color: #e2e6ea;
    color: #495057;
}

#btn-admin-limpiar:hover {
    background-color: #dbe2e8;
    color: #212529;
}

/* --- TARJETAS DE LA LISTA (ADMIN CARD) --- */
.admin-card {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: white; 
    padding: 20px; 
    margin-bottom: 15px; 
    border: 1px solid #eee; 
    border-left: 5px solid #007bff; 
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); 
    transition: 0.2s;
}

.admin-card:hover { 
    box-shadow: 0 8px 15px rgba(0,0,0,0.05); 
    transform: translateY(-2px);
}

/* Botones de Acción (Editar, Borrar, etc) dentro de la tarjeta */
.btn-admin-accion {
    border: none; 
    border-radius: 6px; 
    padding: 0 15px; 
    height: 38px;
    cursor: pointer; 
    font-weight: 600; 
    margin-left: 8px; 
    font-size: 14px;
    /* FLEXBOX PARA CENTRAR EL CONTENIDO */
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    color: white; 
    transition: 0.2s;
    /* ALINEACIÓN Y TAMAÑO CORREGIDOS */
    vertical-align: middle; /* Alinea todos al centro de la línea */
    box-sizing: border-box; /* El borde queda DENTRO de los 38px */
}

.btn-editar { background: #ffc107; color: #212529; }
.btn-editar:hover { background-color: #e0a800; }

.btn-borrar { background: #dc3545; }
.btn-borrar:hover { background-color: #c82333; }

.btn-ver-publico { background: #17a2b8; min-width: 38px; padding: 0; }
.btn-ver-publico:hover { background-color: #138496; }

/* Botón Estrella */
.btn-destacado {
    background: #f8f9fa; 
    border: 1px solid #dee2e6; 
    color: #ccc; 
    width: 38px; 
    height: 38px;
    font-size: 1.2em; 
    padding: 0;
    /* Aseguramos que herede las correcciones */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.btn-destacado.activo { 
    color: #ffc107; 
    border-color: #ffc107; 
    background: #fff9e6; 
}

























/* 9. RESPONSIVE ADMIN */
@media (max-width: 768px) {
    .admin-container { flex-direction: column; gap: 15px; }
    .admin-header ul { flex-wrap: wrap; justify-content: center; }
    
    .admin-card { flex-direction: column; align-items: flex-start; gap: 15px; }
    .admin-card > div:last-child { width: 100%; display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
    
    .form-group-inline { flex-direction: column; gap: 0; }
    
    .admin-tabs { flex-direction: column; }
    .admin-tab-btn { border-bottom: 1px solid #ddd; border-radius: 4px; text-align: left;}
    


    
    .admin-filtros { flex-direction: column; align-items: stretch; gap: 15px; }
    .filtro-item, .filtro-item:first-child { width: 100%; min-width: 0; }
    #btn-admin-filtrar, #btn-admin-limpiar { width: 100%; margin-top: 5px; }
    
    .admin-card { flex-direction: column; align-items: flex-start; gap: 15px; }
    .admin-card > div:last-child { width: 100%; display: flex; gap: 5px; justify-content: space-between; }
    .btn-admin-accion { flex: 1; margin-left: 0; }
}








/* ========================================================= */
/* 10. ANIMACIONES DE INTERFAZ */
/* ========================================================= */

@keyframes fadeInTab {
    from { 
        opacity: 0; 
        transform: translateY(5px); /* Pequeño movimiento hacia arriba */
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Aplicar animación a las secciones principales cuando se muestran */
#lista-gestion, 
#form-inmueble, 
#gestion-roles {
    /* Solo se anima cuando display deja de ser none */
    animation: fadeInTab 0.3s ease-out;
}