/* ============================================
    ÍNDICE DE CONTENIDOS
    1. BASE & FONDO (Reset, Body, Background)
    2. HEADER & NAVEGACIÓN
    3. FOOTER
    4. PÁGINA: HOME (Hero, Features, CTA)
    5. PÁGINA: LOGIN (Auth)
    6. PÁGINA: FEED DE ANUNCIOS (Listado, Sidebar, Pagination)
    7. PÁGINA: FORMULARIOS (CRUD, Crear/Editar, Django Forms)
    8. PÁGINA: ADMIN PANEL (Dashboard, Sidebar, Estadísticas)
    9. PÁGINA: LISTA DE USUARIOS & BÚSQUEDA
    10. PÁGINAS ESTÁTICAS (About, Contacto)
    11. PÁGINAS DE SISTEMA (Error, Eliminar/Confirmar)
    12. UTILIDADES & ESTADOS (Badges, Active Links)
    13. MEDIA QUERIES GENERALES (Ajustes finales)
============================================ */

/* ============================================
    1. BASE & FONDO: ENCAJE PERFECTO
============================================ */

/* Fondo base (por si acaso) */
html {
    background-color: #1f332b;
}

/* Cuerpo limpio */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: none !important; /* Quitamos fondo del body */
    position: relative;
    z-index: 1;
}

/* LA CAPA DE FONDO (Imagen fija) */
body::before {
    content: '';
    position: fixed; /* Fijo: No se mueve al hacer scroll */
    
    /* DEFINIMOS EL ESPACIO EXACTO */
    top: 0;                   /* Empieza donde acaba el header */
    left: 0;
    width: 100%;                 /* Ancho completo */
    height: 100vh; /* Altura exacta de la pantalla MENOS el header */
    
    /* LA IMAGEN */
    background-image: url("../img/fondo4.jpg");
    
    /* AQUÍ ESTÁ EL CAMBIO CLAVE: */
    /* 100% 100% obliga a la imagen a estirarse o encogerse para 
       entrar EXACTAMENTE en el hueco disponible. */
    background-size: 100% 100%; 
    
    background-position: center center;
    background-repeat: no-repeat;
    
    z-index: -1; /* Detrás del contenido */
}

/* MÓVIL: Ajuste del fondo */
@media (max-width: 950px) {
    body::before {
        top: 0 !important;           /* En móvil empieza arriba del todo */
        height: 100vh !important;    /* Ocupa toda la altura */
        background-size: cover !important; /* En móvil usamos cover para que no se deforme al girar */
    }
}

/* ============================================
   2. HEADER MODERNO CARELY
============================================ */

header.main-header {
    display: flex;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    
    /* Fondo base */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    
    /* TRUCO: La primera parte (0 1px 0...) crea una línea sólida que tapa el hueco */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0px 4px 20px rgba(0, 0, 0, 0.05);
    
    position: sticky;
    top: 0;
    z-index: 1000;
}

header.main-header > a {
    display: flex;       /* Convierte el enlace en una caja flexible */
    align-items: center; /* Centra el logo verticalmente */
    height: 100%;        /* Ocupa exactamente la altura del header */
    text-decoration: none;
}

#logo {
    width: 150px; /* Ajustado para proporción */
    height: 80px;
    background-image: url("../img/logo2.png");
    background-size: contain; /* Contain evita que se corte */
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Navegación */
.main-header nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre elementos */
}

/* Reset de estilos globales de 'li' para el header */
.main-header li {
    display: block; /* Quitamos inline-block */
    width: auto;    /* Quitamos el ancho fijo de 120px */
    height: auto;
    margin: 0;
    padding: 0;
    background-color: transparent; /* Quitamos el fondo verde */
    border-radius: 0;
}

.main-header li:hover {
    background-color: transparent; /* Evitamos el fondo verde oscuro al hover */
}

/* Estilos de los enlaces */
.linknav {
    text-decoration: none;
    color: #1f332b; /* Verde oscuro elegante */
    font-weight: 600;
    font-size: 16px;
    padding: 8px 12px;
    transition: color 0.3s ease;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Efecto de subrayado animado */
.linknav::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: rgb(27, 136, 116); /* Verde Carely */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.linknav:hover {
    color: rgb(27, 136, 116);
}

.linknav:hover::after {
    width: 80%; /* La línea crece al pasar el ratón */
}

/* --- BOTÓN DESTACADO (ANUNCIOS) --- */
.linknav.btn-highlight {
    background-color: rgb(27, 136, 116);
    color: white !important;
    padding: 10px 20px;
    border-radius: 25px; /* Bordes redondos tipo pastilla */
    box-shadow: 0 4px 10px rgba(27, 136, 116, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.linknav.btn-highlight::after {
    display: none; /* Quitamos la línea de abajo en el botón */
}

.linknav.btn-highlight:hover {
    background-color: rgb(20, 98, 84);
    transform: none !important; 
    margin-top: 0 !important;
    box-shadow: 0 6px 15px rgba(27, 136, 116, 0.4);
    color: white;
}

/* Enlace de Salir (Logout) */
.linknav.logout {
    color: #d9534f; /* Un rojo suave o gris */
    font-size: 15px;
}
.linknav.logout:hover {
    color: #c9302c;
}
.linknav.logout::after {
    background-color: #c9302c;
}

/* --- RESPONSIVE HEADER --- */
@media (max-width: 950px) {
    header.main-header {
        height: auto;
        flex-direction: column; /* Logo arriba, menú abajo */
        padding: 10px 15px;     /* Menos relleno */
        position: relative;     /* CAMBIO CLAVE: Ya no se queda fijo */
    }

    #logo {
        width: 120px;
        height: 50px;
        background-position: center;
        margin-bottom: 10px; /* Separación con el menú */
    }

    .nav-list {
        flex-direction: row;      /* Ponerlos lado a lado */
        flex-wrap: wrap;          /* Que bajen de línea si no caben */
        justify-content: center;  /* Centrados */
        gap: 8px;                 /* Espacio pequeñito entre ellos */
        width: 100%;
        margin-top: 0;
    }
    
    .nav-list li {
        width: auto; /* Que ocupen solo lo necesario */
    }
    
    .linknav {
        display: block;
        padding: 6px 12px;
        font-size: 13px; /* Letra más pequeña */
        background-color: #f4f8f6; /* Fondo gris/verde muy suave */
        border-radius: 20px; /* Bordes redondos */
        color: #333;
    }

    .linknav.btn-highlight {
        background-color: rgb(27, 136, 116);
        color: white !important;
        padding: 6px 15px;
    }
}

/* ============================================
   3. FOOTER
============================================ */

.carely-footer {
    background-color: #1f332b; /* Verde oscuro corporativo */
    color: #e0e0e0;            /* Texto gris claro */
    padding: 60px 40px 20px 40px;
    font-family: 'Segoe UI', sans-serif;
    margin-top: auto;          /* Empuja el footer abajo */
}

/* Footer Grid */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

/* Elementos del Footer */
.footer-logo-text {
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 15px 0;
    letter-spacing: 1px;
}

.footer-desc {
    line-height: 1.6;
    color: #b0c4de;
    font-size: 15px;
}

.footer-title {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
    background: none; 
    padding: 0;
    width: auto;
    display: block;
}

.footer-links a {
    color: #b0c4de;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
    display: inline-block;
    margin: 0; /* Reset */
}

.footer-links a:hover {
    color: #4cd964; /* Verde brillante al pasar el ratón */
    transform: translateX(5px);
}

/* Footer Redes Sociales */
.footer-social {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.footer-social a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background-color: white;
    color: #1f332b;
}

/* Copyright & Legacy Footer */
.footer-copyright {
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    color: #6c8c7f;
}

.user-footer {
    background: #d2e7d1;
    padding: 16px;
    text-align: center;
    color: #21483d;
    margin-top: auto;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

/* ============================================
   4. PÁGINA: HOME (HOME PAGE)
============================================ */

.home-page-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

/* Hero Section */
.hero-section {
    background-image: url("../img/fondo.png"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 85vh; /* Altura de la imagen */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.hero-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1); 
}

.hero-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    padding: 50px;
    border-radius: 20px;
    max-width: 700px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin: 20px;
}

.hero-card h1 {
    color: #1f332b;
    font-size: 3rem;
    margin-top: 0;
    line-height: 1.1;
}

.hero-card p {
    color: #48665c;
    font-size: 1.3rem;
    margin-bottom: 30px;
}

/* Botones Hero */
.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-hero-primary {
    background-color: rgb(27, 136, 116);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.2s, background 0.3s;
}

.btn-hero-primary:hover {
    background-color: rgb(20, 100, 85);
    transform: scale(1.05);
}

.btn-hero-secondary {
    background-color: transparent;
    color: rgb(27, 136, 116);
    border: 2px solid rgb(27, 136, 116);
    padding: 13px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.btn-hero-secondary:hover {
    background-color: rgb(27, 136, 116);
    color: white;
}

/* Features Section */
.features-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #f9fbf9;
}

.features-section h2 {
    color: #1f332b;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.features-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    width: 300px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border: 1px solid #eef3f1;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: rgb(167, 199, 172);
}

.feature-card .icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    color: rgb(27, 136, 116);
    font-size: 1.5rem;
    margin: 10px 0;
}

.feature-card p {
    color: #666;
}

/* CTA Section */
.cta-container {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    background-color: #f9fbf9; 
}

.cta-banner {
    background: linear-gradient(to right, rgb(27, 136, 116), rgb(46, 166, 148));
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    width: 100%;
    max-width: 900px;
}

.cta-banner h3 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 10px;
}

.cta-banner p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.btn-cta {
    background: white;
    color: rgb(27, 136, 116);
    padding: 12px 40px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}

.btn-cta:hover {
    background: #f0fdfa;
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

/* Responsive Home */
@media (max-width: 768px) {
    .hero-section {
        height: auto;
        min-height: 60vh;
        padding: 40px 0;
    }
    
    .hero-card {
        margin: 20px;
        padding: 30px;
    }
    
    .hero-card h1 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .cta-banner {
        padding: 30px;
    }
}

/* ============================================
   5. PÁGINA: LOGIN (AUTHENTICATION)
============================================ */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px); 
    padding: 20px;
    box-sizing: border-box;
}

.login-card {
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5px);
    text-align: left;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    color: #1f332b;
    margin: 0 0 10px 0;
    font-size: 28px;
}

.login-header p {
    color: #5b6b63;
    margin: 0;
    font-size: 15px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.login-form label {
    font-weight: 600;
    color: #375e53;
    font-size: 14px;
    margin-bottom: 8px;
    margin-left: 2px;
}

.login-form input {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    border: 1px solid #d4dcd9;
    background-color: #fff;
    padding-left: 15px;
    font-size: 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
    margin: 0; 
}

.login-form input:focus {
    border-color: rgb(27, 136, 116);
    box-shadow: 0 0 0 4px rgba(27, 136, 116, 0.1);
    outline: none;
}

.btn-login {
    margin-top: 10px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, rgb(15, 79, 67), rgb(27, 136, 116));
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(27, 136, 116, 0.3);
}

.btn-login:hover {
    background: linear-gradient(135deg, rgb(27, 136, 116), rgb(46, 166, 148));
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(27, 136, 116, 0.4);
}

.login-footer {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.login-footer a {
    color: rgb(27, 136, 116);
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    margin: 0;
    display: inline;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* ============================================
   6. PÁGINA: FEED DE ANUNCIOS
============================================ */

.feed-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    min-height: calc(100vh - 150px);
}

.feed-layout {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 40px;
    align-items: flex-start;
}

/* --- SIDEBAR IZQUIERDO FEED --- */
.feed-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

.sidebar-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 30px 20px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.sidebar-profile {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.profile-avatar {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #a7c7ac, #d4eadd);
    color: #1f332b;
    font-size: 28px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
}

.sidebar-profile h3 {
    margin: 0;
    font-size: 18px;
    color: #1f332b;
}

/* Navegación Sidebar */
.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    margin-bottom: 8px;
    display: block; width: auto; padding: 0; background: none;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 10px;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
    font-size: 15px;
}

.sidebar-nav a:hover {
    background-color: #f0f7f4;
    color: rgb(27, 136, 116);
}

.sidebar-nav a.active {
    background-color: rgb(27, 136, 116);
    color: white;
    box-shadow: 0 4px 10px rgba(27, 136, 116, 0.3);
}

.create-ad-link {
    color: rgb(27, 136, 116) !important;
    border: 1px dashed rgb(27, 136, 116);
    margin-top: 10px;
}

.create-ad-link:hover {
    background-color: rgba(27, 136, 116, 0.1) !important;
}

/* --- FEED PRINCIPAL --- */
.feed-main {
    flex: 1;
}

.feed-header {
    background: linear-gradient(135deg, #1f332b 0%, rgb(27, 136, 116) 100%);
    padding: 40px;
    border-radius: 16px;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(27, 136, 116, 0.25);
    color: white;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.feed-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.feed-header h1 {
    margin: 0 0 8px 0;
    color: white;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.feed-header p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Grid de Anuncios */
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* Tarjeta de Anuncio */
.ad-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}

.ad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.ad-image-wrapper {
    height: 180px;
    width: 100%;
    position: relative;
    background-color: #f4f4f4;
}

.ad-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    background-color: #e9f5ee;
}

.category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(31, 51, 43, 0.85);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    backdrop-filter: blur(4px);
}

.ad-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}

.ad-content h4 {
    margin: 0 0 5px 0;
    color: #1f332b;
    font-size: 18px;
    line-height: 1.4;
}

.ad-author {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

.ad-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f9f9f9;
    padding-top: 15px;
}

.view-details {
    font-size: 14px;
    color: rgb(27, 136, 116);
    font-weight: 600;
}

/* Estado vacío */
.empty-feed {
    grid-column: 1 / -1;
    text-align: center;
    background: rgba(255,255,255,0.8);
    padding: 50px;
    border-radius: 20px;
    color: #666;
}

.empty-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

/* Pagination */
.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.step-links {
    display: flex;
    gap: 8px;
    align-items: center;
    background: white;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.page-btn {
    text-decoration: none;
    color: #555;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
}

.page-btn:hover {
    background-color: #f0f7f4;
    color: rgb(27, 136, 116);
}

.current-page {
    font-weight: bold;
    color: rgb(27, 136, 116);
    padding: 0 10px;
}

/* Responsive Feed */
@media (max-width: 900px) {
    .feed-layout { flex-direction: column; }
    .feed-sidebar { width: 100%; position: static; margin-bottom: 30px; }
    .sidebar-nav ul { display: flex; flex-wrap: wrap; gap: 10px; }
    .sidebar-nav li { margin: 0; }
    .sidebar-nav a { background: white; border: 1px solid #eee; }
}

@media (max-width: 600px) {
    .feed-page-wrapper { padding: 15px 10px; }
    .feed-grid { display: grid; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .ad-card { border-radius: 10px; font-size: 13px; }
    .ad-image-wrapper { height: 110px !important; }
    .ad-content { padding: 10px !important; gap: 5px; }
    .ad-content h4 { font-size: 13px !important; margin-bottom: 2px; line-height: 1.2; height: 32px; overflow: hidden; }
    .ad-author { font-size: 11px; margin-bottom: 5px; }
    .category-badge { font-size: 9px !important; padding: 2px 6px !important; top: 6px; right: 6px; }
    .view-details { font-size: 11px !important; display: block; }
    .ad-footer { padding-top: 5px; }
    .sidebar-nav ul { flex-direction: column; }
}

/* ============================================
    7. PÁGINA: FORMULARIOS (CRUD & ANUNCIOS)
============================================ */

/* --- Estilos Genéricos Formulario Anuncio --- */
.anuncio-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 10px;
}

.anuncio-card {
    width: 900px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,.15);
    font-family: Arial, sans-serif;
}


/* 1. Tarjeta base (Por defecto para Publicar Anuncio) */
.anuncio-card {
    width: 900px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,.15);
    font-family: Arial, sans-serif;
    max-width: 100%; /* Evita que se salga en pantallas pequeñas */
}

/* 2. Tarjeta de Registro (Modificación específica) */
/* Se activa solo si pones <div class="anuncio-card registro-card"> */
.anuncio-card.registro-card {
    width: 600px;          /* Más estrecha */
    background: #ffffffcc; /* Fondo semi-transparente */
    backdrop-filter: blur(4px);
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
/* Estilos dentro de la tarjeta anuncio */
.anuncio-card h2 {
    margin: 0;
    font-size: 28px;
    color: #1f332b;
}

.anuncio-card .sub {
    margin: 5px 0 25px;
    color: #5b6b63;
}

.anuncio-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.anuncio-form input,
.anuncio-form select,
.anuncio-form textarea {
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #d4dcd9;
    border-radius: 8px;
    background: #fff;
    transition: .2s;
}

textarea {
    max-height: 150px;
    min-height: 80px;
    resize: vertical;
}

.anuncio-form input:focus,
.anuncio-form select:focus,
.anuncio-form textarea:focus {
    border-color: #1b8874;
    box-shadow: 0 0 4px rgba(27,136,116,.35);
    outline: none;
    background-color: rgb(212, 227, 209);
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA SUBIDA DE IMÁGENES
============================================ */

/* El recuadro del input file */
.anuncio-form input[type="file"] {
    padding: 12px;
    background-color: #f4f8f6; /* Fondo verde muy suave */
    border: 2px dashed #b0c4de; /* Borde discontinuo */
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #555;
}

/* Efecto al pasar el ratón por encima */
.anuncio-form input[type="file"]:hover {
    border-color: rgb(27, 136, 116);
    background-color: #e6f2ef;
}

/* --- ESTILOS PARA CUANDO YA HAY FOTO (EDITAR) --- */
/* Django muestra: "Actualmente: <link> [checkbox] Limpiar" */

/* El enlace del nombre del archivo actual */
.anuncio-form a {
    color: rgb(27, 136, 116);
    font-weight: 600;
    text-decoration: none;
    margin-right: 10px;
}

.anuncio-form a:hover {
    text-decoration: underline;
}

.anuncio-form {
    font-size: 15px;
    color: #666;
}

.anuncio-form input[type="checkbox"] {
    width: auto !important; 
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 10px;
    accent-color: #d9534f; /* Rojo para indicar borrado */
    cursor: pointer;
}

/* ============================================
   ARREGLO DEL CHECKBOX "LIMPIAR" FOTO
============================================ */

/* 1. El texto que pone Django: "Actualmente: ..." */
.anuncio-form {
    font-size: 15px;
    color: #666;
}

/* 2. El enlace al archivo actual */
.anuncio-form a {
    color: rgb(27, 136, 116); /* Tu color verde */
    font-weight: 600;
    text-decoration: none;
    margin-right: 10px;
}

.anuncio-form a:hover {
    text-decoration: underline;
}

/* 3. El Checkbox de "Limpiar" */
/* IMPORTANTE: Usamos !important en width para que no se estire al 100% */
.anuncio-form input[type="checkbox"] {
    width: auto !important; 
    display: inline-block;
    height: 18px; 
    width: 18px !important;
    vertical-align: middle; /* Alineado con el texto */
    margin-left: 15px;      /* Separarlo del enlace de la foto */
    margin-right: 5px;      /* Separarlo de la palabra "Limpiar" */
    cursor: pointer;
    
    /* Le ponemos color rojo porque es una acción de borrar */
    accent-color: #d9534f; 
}

/* 4. Ajuste para que la etiqueta "Limpiar" no quede pegada */
.anuncio-form label[for$="-clear_id"] {
    display: inline;
    font-weight: normal;
    color: #d9534f; /* Color rojo suave */
    font-size: 14px;
    cursor: pointer;
}
.anuncio-botones {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.guardar, .cancelar {
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s;
}

.guardar {
    border: none;
    background: #1b8874;
    color: #fff;
}
.guardar:hover {
    background: #2aa38e;
}

.cancelar {
    background: transparent;
    border: 2px solid #1b8874;
    color: #1b8874;
}
.cancelar:hover {
    background: rgba(27,136,116,.1);
}

/* --- Formulario CRUD Moderno (Carely Form Page) --- */
.carely-form-page {
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 40px 20px;
    min-height: calc(100vh - 150px);
}

.carely-form-card {
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    max-width: 600px;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.form-header h2 {
    margin: 0 0 10px 0;
    color: #1f332b;
    font-size: 26px;
}

.form-header p {
    color: #666;
    margin: 0;
    font-size: 15px;
}

/* Estilos para forms generados por Django */
.django-form-body p {
    margin-bottom: 20px;
}

.django-form-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #375e53;
    font-size: 14px;
}

.django-form-body input[type="text"],
.django-form-body input[type="email"],
.django-form-body input[type="password"],
.django-form-body input[type="number"],
.django-form-body select,
.django-form-body textarea,
.django-form-body input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid #d4dcd9;
    border-radius: 8px;
    font-size: 16px;
    background: #fcfcfc;
    transition: all 0.2s ease;
}

.django-form-body input:focus,
.django-form-body select:focus,
.django-form-body textarea:focus {
    border-color: rgb(27, 136, 116);
    background: white;
    outline: none;
    box-shadow: 0 0 0 4px rgba(27, 136, 116, 0.15);
}

.django-form-body input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: rgb(27, 136, 116);
    margin-right: 10px;
    vertical-align: middle;
}

.helptext {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    font-style: italic;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 35px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-carely-primary {
    flex: 2;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgb(15, 79, 67), rgb(27, 136, 116));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}

.btn-carely-primary:hover {
    background: linear-gradient(135deg, rgb(27, 136, 116), rgb(46, 166, 148));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 136, 116, 0.3);
}

.btn-carely-secondary {
    flex: 1;
    text-decoration: none;
    text-align: center;
    padding: 11px 20px;
    border: 1px solid #ccc;
    background: white;
    color: #555;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
}

.btn-carely-secondary:hover {
    background: #f0f0f0;
    color: #333;
}

.btn-carely-danger {
    flex: 1;
    text-decoration: none;
    text-align: center;
    padding: 11px 20px;
    background: #fff;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
}

.btn-carely-danger:hover {
    background: #dc3545;
    color: white;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
}

/* Formulario Específico de Registro (Overrides) */
.user-list-container .anuncio-card {
     /* Reutilización para registro */
    background: #ffffffcc;
    width: 600px;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    backdrop-filter: blur(4px);
}

/* Responsive Forms */
@media (max-width: 950px) {
    .anuncio-card {
        width: 90%;
        padding: 25px;
    }
}
@media (max-width: 600px) {
    .carely-form-card { padding: 25px; }
    .form-actions { flex-direction: column; }
    .btn-carely-primary, .btn-carely-secondary, .btn-carely-danger { width: 100%; box-sizing: border-box; }
    
    /* Legacy Form Responsive */
    .anuncio-form input, .anuncio-form select, .anuncio-form textarea { font-size: 14px; }
    .anuncio-botones { flex-direction: column; }
    .guardar, .cancelar { width: 100%; }
}


/* ============================================
   8. PÁGINA: PANEL DE ADMINISTRACIÓN
============================================ */

.admin-container {
    display: flex;
    justify-content: center;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.473);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    min-height: calc(100vh - 80px);
    margin-top: 0;
}

.admin-wrapper {
    display: flex;
    width: 100%;
    max-width: 1400px;
    gap: 30px;
    align-items: flex-start;
    padding-bottom: 60px;
}

/* --- SIDEBAR ADMIN --- */
.admin-sidebar {
    width: 260px;
    background: rgba(255, 255, 255, 0.887);
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 100px;
    flex-shrink: 0;
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-img {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1f332b, #3a6b5e);
    color: white;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

.profile-info h3 {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.role-badge {
    font-size: 11px;
    text-transform: uppercase;
    color: #27ae60;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: #e8f5e9;
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 8px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #666;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-size: 15px;
}

.sidebar-menu a:hover {
    background-color: #f5fbf9;
    color: rgb(27, 136, 116);
    transform: translateX(5px);
}

.sidebar-menu a.active {
    background-color: rgb(27, 136, 116);
    color: white;
    box-shadow: 0 4px 12px rgba(27, 136, 116, 0.3);
}

.sidebar-logout {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.sidebar-logout a {
    color: #e74c3c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: block;
    text-align: center;
    transition: 0.2s;
}

.sidebar-logout a:hover {
    color: #c0392b;
}

/* --- ADMIN CONTENIDO PRINCIPAL --- */
.admin-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.content-header h1 {
    font-size: 28px;
    color: #1f332b;
    margin: 0 0 5px 0;
}

.content-header p {
    color: #666;
    margin: 0;
}

.btn-download-report {
    background: white;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 10px;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-download-report:hover {
    background: #f9f9f9;
    border-color: #bbb;
}

/* Tarjetas Estadísticas */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.stat-card {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255,255,255,0.5);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.users-card { background: linear-gradient(145deg, #ffffff, #f0f9ff); border-bottom: 4px solid #3498db; }
.ads-card   { background: linear-gradient(145deg, #ffffff, #f0fff4); border-bottom: 4px solid #2ecc71; }
.alerts-card{ background: linear-gradient(145deg, #ffffff, #fff5f5); border-bottom: 4px solid #e74c3c; }

.stat-icon {
    font-size: 32px;
    background: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.stat-data h3 {
    margin: 0;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-data .number {
    font-size: 32px;
    font-weight: 800;
    color: #333;
    margin: 5px 0;
}

.trend {
    font-size: 13px;
    font-weight: 600;
}
.trend.up { color: #27ae60; }
.trend.down { color: #e74c3c; }

/* Tabla Moderna Dashboard */
.table-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.04);
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.table-header h2 {
    margin: 0;
    font-size: 20px;
    color: #1f332b;
}

.link-view-all {
    color: rgb(27, 136, 116);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.table-wrapper {
    overflow-x: auto;
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.modern-table th {
    text-align: left;
    color: #999;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 15px 10px 15px;
    border-bottom: 1px solid #f0f0f0;
}

.modern-table tbody tr {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: transform 0.2s;
}

.modern-table tbody tr:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.modern-table td {
    padding: 15px;
    color: #444;
    border-top: 1px solid #f9f9f9;
    border-bottom: 1px solid #f9f9f9;
}

.modern-table td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-left: 1px solid #f9f9f9; }
.modern-table td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-right: 1px solid #f9f9f9; }

/* Info de usuario en tabla */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-small {
    width: 35px;
    height: 35px;
    background: #d4eadd;
    color: #1f332b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
}
.avatar-small.purple { background: #e8daef; color: #8e44ad; }
.avatar-small.orange { background: #fae5d3; color: #d35400; }

.user-name { display: block; font-weight: 600; color: #333; }
.user-email { display: block; font-size: 12px; color: #999; }

/* Tabla Admin Completa (Users Container) */
.admin-users-container {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    min-height: calc(100vh - 150px);
}

.admin-users-card {
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    max-width: 1100px;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.admin-header-row h1 { margin: 0; color: #1f332b; font-size: 24px; }
.admin-header-row p { color: #5b6b63; margin: 5px 0 30px 0; }

.admin-search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 20px;
    background: #f9fbf9;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eef3f1;
}

.search-group { display: flex; gap: 10px; flex: 1; }
.search-group input { flex: 1; padding: 10px 15px; border: 1px solid #d4dcd9; border-radius: 8px; font-size: 15px; }
.search-group button { background: rgb(27, 136, 116); color: white; border: none; padding: 0 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.search-group button:hover { background: rgb(20, 100, 85); }

/* Toggle Switch Admin */
.filter-group { display: flex; align-items: center; gap: 10px; }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: rgb(27, 136, 116); }
input:checked + .slider:before { transform: translateX(26px); }
.filter-label { font-size: 14px; color: #375e53; font-weight: 600; }

.table-responsive { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.users-table thead tr { background-color: rgb(27, 136, 116); color: white; text-align: left; }
.users-table th, .users-table td { padding: 15px; border-bottom: 1px solid #eee; }
.users-table th { font-weight: 600; font-size: 15px; }
.users-table tbody tr:hover { background-color: #f1f7f3; }

.table-avatar { width: 35px; height: 35px; background-color: #d4eadd; color: #1f332b; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 14px; }
.fw-bold { font-weight: 600; color: #1f332b; }
.text-muted { color: #666; }

.btn-edit {
    text-decoration: none;
    color: rgb(27, 136, 116);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid rgb(27, 136, 116);
    border-radius: 6px;
    transition: 0.2s;
}
.btn-edit:hover { background-color: rgb(27, 136, 116); color: white; }

.admin-pagination { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
.page-link { display: inline-block; padding: 6px 12px; margin: 0 3px; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; color: #555; background: white; transition: 0.2s; }
.page-link:hover { background-color: rgb(27, 136, 116); color: white; border-color: rgb(27, 136, 116); }

/* Responsive Admin */
@media (max-width: 1100px) {
    .admin-panel { flex-direction: column; align-items: center; } /* Legacy name? */
    .admin-wrapper { flex-direction: column; }
}

@media (max-width: 900px) {
    .admin-sidebar { width: 100%; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 20px; }
    .sidebar-menu ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; width: 100%; }
    .sidebar-logout { display: none; }
    .stats-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .admin-search-bar { flex-direction: column; align-items: flex-start; }
    .search-group { width: 100%; }
}

/* ============================================
   9. PÁGINA: LISTA DE USUARIOS & BÚSQUEDA
============================================ */

.search-form {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-form input {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #bbb;
    font-size: 15px;
}

.search-form button {
    padding: 10px 20px;
    background-color: #6a5acd;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.search-form button:hover {
    background-color: #5847c4;
}

.user-list-page {
    display: flex;
    gap: 30px;
    padding: 20px;
}

/* Sidebar User List */
.user-sidebar {
    width: 220px;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.user-sidebar h2 { font-size: 20px; margin-bottom: 15px; }
.user-sidebar ul { list-style: none; padding: 0; }
.user-sidebar li { margin-bottom: 12px; }
.user-sidebar a { text-decoration: none; font-size: 16px; color: #333; }

.user-list-container { flex: 1; }
.user-list-container h1 { margin-bottom: 20px; }

/* Tabla Usuarios */
.user-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.user-table th { background: rgb(20, 98, 84); color: white; padding: 12px; text-align: left; font-weight: 500; }
.user-table td { padding: 12px; border-bottom: 1px solid #ddd; }
.user-table tr:hover { background: rgba(0,0,0,0.05); }

.avatar-cell { text-align: center; }
.table-btn { padding: 6px 14px; background: rgb(141, 157, 129); color: white; border-radius: 8px; text-decoration: none; font-size: 14px; }
.table-btn:hover { background: rgb(27, 136, 116); }

/* Responsive User List */
@media (max-width: 480px) {
    .user-sidebar ul li { margin-left: 0; width: 100%; }
    .user-sidebar li a { justify-content: center; }
}

/* ============================================
   10. PÁGINAS ESTÁTICAS (ABOUT & CONTACTO)
============================================ */

/* --- ABOUT (Sobre Nosotros) --- */
.about-page-container {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    min-height: calc(100vh - 150px);
}

.about-main-card {
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    max-width: 900px;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.about-hero { text-align: center; border-bottom: 1px solid #eee; padding-bottom: 30px; }
.about-hero h1 { color: #1f332b; font-size: 2.8rem; margin-top: 0; margin-bottom: 20px; }
.intro-lead { color: #5b6b63; font-size: 1.3rem; line-height: 1.6; max-width: 700px; margin: 0 auto; }

.about-story { display: flex; align-items: center; gap: 40px; }
.story-content { flex: 2; }
.story-content h2 { color: rgb(27, 136, 116); font-size: 2rem; margin-bottom: 15px; }
.story-content p { color: #444; line-height: 1.7; font-size: 1.1rem; margin-bottom: 15px; }

.story-image { flex: 1; display: flex; justify-content: center; }
.icon-circle-big {
    width: 120px; height: 120px; background: linear-gradient(135deg, #d4eadd, #a7c7ac); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 60px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.value-card {
    background: white; padding: 30px 20px; border-radius: 15px; text-align: center; border: 1px solid #f0f0f0; transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.value-card:hover { transform: translateY(-5px); border-color: rgb(167, 199, 172); }
.value-icon { font-size: 3rem; margin-bottom: 15px; }
.value-card h3 { color: #1f332b; font-size: 1.4rem; margin: 10px 0; }
.value-card p { color: #666; line-height: 1.5; }

.about-team { text-align: center; background-color: #f9fbf9; padding: 30px; border-radius: 15px; }
.about-team h2 { color: #1f332b; margin-top: 0; margin-bottom: 30px; }
.author-profile {
    background: white; display: flex; justify-content: space-between; align-items: center; padding: 30px;
    border-radius: 12px; border-left: 5px solid rgb(27, 136, 116); box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: left;
}
.author-info h3 { margin: 0; font-size: 1.5rem; color: #1f332b; }
.author-role { display: block; color: rgb(27, 136, 116); font-weight: bold; margin: 5px 0 15px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.author-info p { color: #555; margin: 0; line-height: 1.6; }
.institute-badge { background: #1f332b; color: #d9e7e3; padding: 10px 20px; border-radius: 30px; font-weight: bold; font-family: monospace; font-size: 1.1rem; }

/* Responsive About */
@media (max-width: 768px) {
    .about-main-card { padding: 25px; }
    .about-story { flex-direction: column-reverse; text-align: center; }
    .about-values { grid-template-columns: 1fr; }
    .author-profile { flex-direction: column; text-align: center; gap: 20px; border-left: none; border-top: 5px solid rgb(27, 136, 116); }
}

/* --- CONTACTO --- */
.contact-page-container {
    display: flex; justify-content: center; align-items: center; padding: 40px 20px; min-height: calc(100vh - 150px);
}
.contact-main-card {
    display: flex; background-color: rgba(255, 255, 255, 0.95); width: 100%; max-width: 1000px; border-radius: 20px;
    overflow: hidden; box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px);
}

.contact-info-side {
    background: linear-gradient(135deg, #1f332b, #2a493e); color: white; flex: 1; padding: 50px;
    display: flex; flex-direction: column; justify-content: space-between; position: relative;
}
.contact-info-side::before {
    content: ''; position: absolute; top: -50px; left: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.05); border-radius: 50%;
}
.contact-info-side h2 { font-size: 2rem; margin-top: 0; margin-bottom: 20px; }
.contact-desc { color: #d9e7e3; line-height: 1.6; margin-bottom: 40px; }

.info-items { display: flex; flex-direction: column; gap: 30px; }
.info-item { display: flex; align-items: flex-start; gap: 15px; }
.info-item .icon { font-size: 1.5rem; background: rgba(255,255,255,0.1); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.info-item .text strong { display: block; font-size: 1.1rem; margin-bottom: 5px; }
.info-item .text p { margin: 0; color: #d9e7e3; font-size: 0.95rem; line-height: 1.4; }

.social-links { margin-top: 40px; display: flex; gap: 20px; }
.social-links a { color: white; text-decoration: none; font-weight: bold; font-size: 0.9rem; opacity: 0.8; transition: 0.3s; }
.social-links a:hover { opacity: 1; text-decoration: underline; }

.contact-form-side { flex: 1.5; padding: 50px; background: white; }
.form-row-contact { display: flex; gap: 20px; }
.form-row-contact .form-group { flex: 1; }
.contact-form-side .form-group { margin-bottom: 20px; }
.contact-form-side label { display: block; font-weight: bold; color: #375e53; margin-bottom: 8px; font-size: 14px; }
.contact-form-side input, .contact-form-side textarea {
    width: 100%; box-sizing: border-box; padding: 12px 15px; border: 1px solid #d4dcd9; border-radius: 8px; font-size: 16px; font-family: inherit; transition: 0.3s; background: #f9fbf9;
}
.contact-form-side textarea { height: 120px; resize: vertical; }
.contact-form-side input:focus, .contact-form-side textarea:focus { border-color: rgb(27, 136, 116); background: white; outline: none; box-shadow: 0 0 0 4px rgba(27, 136, 116, 0.1); }

.btn-send-contact {
    background: linear-gradient(135deg, rgb(27, 136, 116), rgb(20, 98, 84)); color: white; border: none; padding: 15px 30px;
    border-radius: 30px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: transform 0.2s, box-shadow 0.3s; margin-top: 10px; width: auto; display: inline-block;
}
.btn-send-contact:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(27, 136, 116, 0.3); }

/* Responsive Contacto */
@media (max-width: 850px) {
    .contact-main-card { flex-direction: column; max-width: 500px; }
    .contact-info-side, .contact-form-side { padding: 40px 30px; }
}
@media (max-width: 600px) {
    .form-row-contact { flex-direction: column; gap: 0; }
    .btn-send-contact { width: 100%; }
}

/* ============================================
   11. PÁGINAS DE SISTEMA (ERROR & DELETE)
============================================ */

/* --- Error Page (Legacy & Modern) --- */
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url(fondo4.jpg);
}

.error-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.error-box {
    background: white;
    display: flex;
    gap: 25px;
    padding: 35px 40px;
    border-radius: 18px;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.08);
    max-width: 750px;
    align-items: center;
}

.error-icon {
    background: #ffe5e5;
    color: red;
    font-size: 45px;
    font-weight: bold;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-info h1 { margin: 0; font-size: 28px; color: #10382f; }
.error-info p { margin: 8px 0 18px; color: #3c524b; }

.error-buttons { display: flex; gap: 12px; }
.btn-error { padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: 0.2s; }
.btn-error.primary { background: rgb(27, 136, 116); color: white; }
.btn-error.primary:hover { opacity: 0.85; }
.btn-error.secondary { border: 2px solid rgb(27, 136, 116); color: rgb(27, 136, 116); }
.btn-error.secondary:hover { background: rgba(27,136,116,0.1); }

/* Modern Error Page */
.error-page-container {
    display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 150px); padding: 20px;
}
.error-card-carely {
    background-color: rgba(255, 255, 255, 0.95); width: 100%; max-width: 550px; padding: 50px 40px;
    border-radius: 24px; box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); text-align: center; border: 1px solid rgba(255, 255, 255, 0.5);
}
.error-icon-bounce {
    font-size: 80px; margin-bottom: 20px; animation: floatError 3s ease-in-out infinite; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}
.error-card-carely h1 { color: #1f332b; font-size: 32px; margin: 0 0 15px 0; font-weight: 800; }
.error-text { color: #5b6b63; font-size: 18px; line-height: 1.6; margin-bottom: 10px; }
.error-code { color: #999; font-size: 14px; font-family: monospace; background: #f5f5f5; display: inline-block; padding: 5px 10px; border-radius: 8px; margin-bottom: 30px; }

.error-actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.btn-error-primary {
    background: rgb(27, 136, 116); color: white; padding: 12px 25px; border-radius: 30px; text-decoration: none;
    font-weight: bold; font-size: 16px; transition: transform 0.2s, background 0.3s; border: none; cursor: pointer;
}
.btn-error-primary:hover { background: rgb(20, 100, 85); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(27, 136, 116, 0.3); }
.btn-error-secondary {
    background: white; color: rgb(27, 136, 116); padding: 12px 25px; border-radius: 30px; text-decoration: none;
    font-weight: bold; font-size: 16px; border: 2px solid rgb(27, 136, 116); transition: all 0.3s; cursor: pointer;
}
.btn-error-secondary:hover { background: #f0fdfa; }

@keyframes floatError {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Responsive Error */
@media (max-width: 850px) {
    .error-box { flex-direction: column; text-align: center; padding: 25px; }
    .error-icon { margin: 0 auto; }
}
@media (max-width: 500px) {
    .error-box { width: 90%; }
    .error-buttons { flex-direction: column; }
    .btn-error { text-align: center; }
    
    .error-card-carely { padding: 30px 20px; }
    .error-icon-bounce { font-size: 60px; }
    .error-card-carely h1 { font-size: 26px; }
    .error-actions { flex-direction: column; }
    .btn-error-primary, .btn-error-secondary { width: 100%; }
}

/* --- Delete Page (Confirmación) --- */
.delete-page-container {
    display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 150px); padding: 20px;
}
.delete-card {
    background-color: rgba(255, 255, 255, 0.95); width: 100%; max-width: 500px; padding: 40px; border-radius: 20px;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); text-align: center; border-top: 5px solid #dc3545;
}
.warning-icon { font-size: 60px; margin-bottom: 20px; animation: pulse 2s infinite; }
.delete-card h2 { color: #1f332b; margin-top: 0; font-size: 28px; margin-bottom: 10px; }
.warning-text { font-size: 18px; color: #444; margin: 20px 0; line-height: 1.5; }
.user-highlight { font-weight: bold; color: #1f332b; background-color: #e9ecef; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 5px; }
.sub-warning { color: #dc3545; font-size: 14px; margin-bottom: 30px; }

.delete-actions { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
.btn-cancel-delete {
    text-decoration: none; padding: 12px 25px; background-color: #f0f0f0; color: #333; border-radius: 8px;
    font-weight: 600; transition: 0.2s; border: 1px solid #ccc; font-size: 16px;
}
.btn-cancel-delete:hover { background-color: #e0e0e0; }
.btn-confirm-delete {
    padding: 12px 25px; background-color: #dc3545; color: white; border: none; border-radius: 8px; font-weight: 600;
    cursor: pointer; font-size: 16px; transition: 0.2s; box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}
.btn-confirm-delete:hover { background-color: #c82333; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4); }

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@media (max-width: 500px) {
    .delete-actions { flex-direction: column; }
    .btn-cancel-delete, .btn-confirm-delete { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ============================================
   12. UTILIDADES Y ESTADOS
============================================ */

/* Pills de estado */
.status-pill { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.status-pill.success { background: #d4edda; color: #155724; }
.status-pill.warning { background: #fff3cd; color: #856404; }
.status-pill.info    { background: #d1ecf1; color: #0c5460; }

.status-resuelto { background-color: #d4edda; color: #155724; }
.status-pendiente { background-color: #fff3cd; color: #856404; }
.status-default { background-color: #e2e3e5; color: #383d41; }

.badge { padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.badge-active { background-color: #d1fae5; color: #065f46; }
.badge-inactive { background-color: #fee2e2; color: #991b1b; }

.empty-state { text-align: center; padding: 40px; color: #888; font-style: italic; }

/* Estados Activos en Navegación */
.linknav.active {
    color: rgb(27, 136, 116) !important;
    position: relative;
}
.linknav.active::after {
    width: 80%; /* Forzamos que la línea aparezca */
}

/* Botón Destacado Activo */
.linknav.btn-highlight.active {
    background-color: rgb(20, 98, 84) !important;
    color: white !important;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.4) !important;
    transform: none !important; 
    margin-top: 0 !important;
    outline: 2px solid rgba(255,255,255,0.3);
    outline-offset: -2px;
    border: none !important;
}

/* ============================================
   13. MEDIA QUERIES GENERALES
   (Manteniendo las originales del final para asegurar el cascade)
============================================ */

/* ========== Header + Navegación ========== */
@media (max-width: 750px) {
    header {
        flex-direction: column;
        height: auto;
        gap: 10px;
        padding: 15px;
    }

    li {
        width: auto;
        padding: 8px 12px;
    }

    #logo {
        width: 130px;
        height: 70px;
    }
}

/* ========== Formulario Login ========== */
@media (max-width: 600px) {
    #formulariologin {
        width: 90%;
        height: auto;
        padding-bottom: 20px;
    }

    form {
        margin: 30px;
    }

    input {
        font-size: medium;
        height: 35px;
    }
}

/* ============================================
   PÁGINA DE PERFIL DE USUARIO (SIN PAGINACIÓN)
============================================ */

.profile-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    min-height: calc(100vh - 150px);
}

.profile-layout {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 40px;
    align-items: flex-start; /* Vital para que el sticky funcione */
}

/* --- COLUMNA IZQUIERDA (Info Usuario - FIJA) --- */
.profile-sidebar {
    width: 350px; 
    flex-shrink: 0;
    
    /* MAGIA STICKY: Se queda fija al bajar */
    position: sticky;
    top: 100px; /* Margen desde el techo al hacer scroll */
    max-height: calc(100vh - 120px);
    overflow-y: auto; /* Si la pantalla es muy bajita, permite scroll dentro de la tarjeta */
}

.user-info-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.5);
}

.profile-header-section {
    text-align: center;
    margin-bottom: 20px;
}

.big-profile-avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #1f332b, rgb(27, 136, 116));
    color: white;
    font-size: 40px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
    box-shadow: 0 5px 15px rgba(27, 136, 116, 0.3);
}

.profile-name {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #1f332b;
}

/* Badges de Rol */
.role-badge-large {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-admin { background-color: #e8daef; color: #8e44ad; }
.role-oferente { background-color: #d4edda; color: #155724; }
.role-solicitante { background-color: #fff3cd; color: #856404; }

.divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 25px 0;
}

/* Lista de detalles */
.profile-details-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.detail-item .icon {
    font-size: 20px;
    background: #f4f8f6;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.detail-item .info label {
    display: block;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}

.detail-item .info p {
    margin: 0;
    color: #333;
    font-weight: 500;
    font-size: 15px;
    word-break: break-all;
}

/* Botones de Perfil */
.profile-actions {
    margin-top: 30px;
}

.btn-profile-edit {
    display: block;
    width: 100%;
    text-align: center;
    background: white;
    border: 1px solid rgb(27, 136, 116);
    color: rgb(27, 136, 116);
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    box-sizing: border-box;
}

.btn-profile-edit:hover {
    background: rgb(27, 136, 116);
    color: white;
}

/* --- COLUMNA DERECHA (Feed propio) --- */
.profile-main-content {
    flex: 1;
    /* Al quitar la paginación, esta columna crecerá hacia abajo */
}

.profile-feed-header {
    margin-bottom: 30px;
    /* Reutiliza estilos de .feed-header si quieres el gradiente, 
       o déjalo limpio. Si usas la clase .feed-header ya cogerá el estilo verde */
}

/* Acciones en las tarjetas de Mis Anuncios */
.my-ad-actions {
    display: flex;
    gap: 10px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    margin-top: 15px;
}

.btn-mini-edit, .btn-mini-delete {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}

.btn-mini-edit {
    background-color: #f0fdfa;
    color: rgb(27, 136, 116);
    border: 1px solid rgba(27, 136, 116, 0.2);
}
.btn-mini-edit:hover {
    background-color: rgb(27, 136, 116);
    color: white;
}

.btn-mini-delete {
    background-color: #fff5f5;
    color: #c0392b;
    border: 1px solid rgba(192, 57, 43, 0.2);
}
.btn-mini-delete:hover {
    background-color: #c0392b;
    color: white;
}

/* Estado Vacío del Perfil */
.empty-feed-profile {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 60px;
    text-align: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* RESPONSIVE */
@media (max-width: 950px) {
    .profile-layout {
        flex-direction: column;
    }
    
    .profile-sidebar {
        width: 100%;
        position: static; /* En móvil deja de ser sticky */
        margin-bottom: 30px;
        max-height: none;
    }
    
    .user-info-card {
        padding: 30px 20px;
    }
}

/* ============================================
   FILTROS DE BÚSQUEDA (ARREGLO DE SOLAPAMIENTO)
============================================ */

.search-filters-form {
    margin-top: 25px;
    display: flex;
    gap: 15px;            /* Espacio vital entre elementos */
    flex-wrap: wrap;      /* Si no caben, bajan de línea */
    align-items: center;  /* Alineados verticalmente al centro */
    width: 100%;
    position: relative; 
    z-index: 10;
}

/* 1. GRUPO INPUT (Buscador) */
.search-input-group {
    flex: 2;              /* Intenta ocupar el doble de espacio que el select */
    min-width: 220px;     /* Ancho mínimo para que no se aplaste */
}

.search-input-group input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid transparent; /* Truco para evitar saltos */
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    background-color: white;
    box-sizing: border-box; /* CLAVE: El padding no aumenta el ancho total */
    outline: none;
    transition: 0.3s;
}

.search-input-group input:focus {
    box-shadow: 0 4px 15px rgba(27, 136, 116, 0.2);
    border-color: rgba(27, 136, 116, 0.3);
}

/* 2. GRUPO SELECT (Categoría) */
.filter-select-group {
    flex: 1;              /* Ocupa 1 parte del espacio */
    min-width: 200px;     /* Ancho mínimo para leer el texto */
}

.filter-select-group select {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid transparent;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    background-color: white;
    box-sizing: border-box; /* CLAVE ANTI-SOLAPAMIENTO */
    appearance: none;       /* Quita el estilo feo por defecto del navegador */
    
    /* Flechita personalizada (opcional, queda más bonito) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231f332b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.filter-select-group select:focus {
    outline: none;
    box-shadow: 0 4px 15px rgba(27, 136, 116, 0.2);
}

/* 3. BOTONES */
.btn-search-icon {
    background: white;
    border: none;
    border-radius: 50%;
    width: 48px;         /* Un poco más grande */
    height: 48px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #1f332b;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;      /* Que no se aplaste nunca */
}

.btn-search-icon:hover {
    transform: scale(1.05);
    color: rgb(27, 136, 116);
}

.btn-clean-filters {
    background: rgba(255,255,255,0.25);
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.4);
    transition: 0.2s;
    white-space: nowrap; /* Que el texto no se rompa */
}

.btn-clean-filters:hover {
    background: rgba(255,255,255,0.4);
    color: #fff;
}

/* RESPONSIVE: En móviles, uno debajo del otro */
@media (max-width: 600px) {
    .search-filters-form {
        flex-direction: column;
        align-items: stretch; /* Que ocupen todo el ancho */
        gap: 10px;
    }
    
    .search-input-group, .filter-select-group {
        width: 100%;
        min-width: 0; /* Reset */
    }
    
    .btn-search-icon {
        width: 100%;     /* Botón ancho en móvil */
        border-radius: 30px;
    }
    
    .btn-clean-filters {
        justify-content: center;
    }
}

/* ============================================
   PÁGINA DE DETALLE DE ANUNCIO
============================================ */

.detail-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    min-height: calc(100vh - 150px);
}

.back-link-container {
    width: 100%;
    max-width: 1000px;
    margin-bottom: 20px;
}

.back-link {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    font-size: 15px;
    transition: 0.2s;
}

.back-link:hover { color: rgb(27, 136, 116); }

/* TARJETA PRINCIPAL */
.detail-card {
    background: white;
    width: 100%;
    max-width: 1000px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex; /* Layout de 2 columnas */
    border: 1px solid rgba(255,255,255,0.5);
}

/* LADO IZQUIERDO: IMAGEN */
.detail-image-side {
    flex: 1;
    background-color: #f4f8f6;
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-no-image {
    font-size: 80px;
    color: #a7c7ac;
    text-align: center;
}
.detail-no-image p { font-size: 18px; margin: 0; }

.detail-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
}

.badge-cat {
    background: rgba(31, 51, 43, 0.9);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    backdrop-filter: blur(4px);
}

.badge-type {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}
.badge-type.oferta { background: #d4edda; color: #155724; }
.badge-type.solicitud { background: #fff3cd; color: #856404; }

/* LADO DERECHO: INFO */
.detail-info-side {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.detail-title {
    margin: 0 0 5px 0;
    color: #1f332b;
    font-size: 32px;
    line-height: 1.2;
}

.detail-date {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
}

.detail-price {
    font-size: 36px;
    color: rgb(27, 136, 116);
    font-weight: 800;
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
}

.price-suffix {
    font-size: 16px;
    color: #666;
    font-weight: normal;
    margin-left: 5px;
}

.detail-description h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
    display: inline-block;
}

.detail-description p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.detail-meta {
    background: #f9fbf9;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meta-item { display: flex; align-items: center; gap: 10px; color: #444; }
.meta-item .icon { font-size: 18px; }

/* BOTONES */
.action-buttons {
    margin-top: auto; /* Empuja los botones abajo del todo */
    display: flex;
    gap: 15px;
}

.btn-action {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-reserve {
    background: linear-gradient(135deg, rgb(27, 136, 116), rgb(20, 98, 84));
    color: white;
}
.btn-reserve:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(27, 136, 116, 0.3);
}

.btn-message {
    background: white;
    border: 2px solid rgb(27, 136, 116);
    color: rgb(27, 136, 116);
}
.btn-message:hover {
    background: #f0fdfa;
}

/* RESPONSIVE */
@media (max-width: 850px) {
    .detail-card { flex-direction: column; }
    .detail-image-side { min-height: 250px; }
    .detail-info-side { padding: 25px; }
    .action-buttons { flex-direction: column; }
}

/* Fechas de reservas */

input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    background: #fff;
    font-family: inherit;
}

input[type="date"]:focus {
    border-color: rgb(27, 136, 116);
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 136, 116, 0.1);
}

/* ============================================
   ALERTAS DE RESERVA EN PERFIL
============================================ */

.reservation-alert {
    margin: 10px;
    background-color: #fff8e1; /* Fondo amarillo suave */
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    animation: fadeIn 0.5s ease;
}

.alert-header {
    display: flex;
    align-items: center;
    color: #f57f17;
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-icon { margin-right: 5px; }

.alert-body p { margin: 2px 0; color: #444; }

.alert-dates {
    font-weight: bold;
    color: #1f332b;
    background: rgba(255,255,255,0.6);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px !important;
}

.alert-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.btn-accept, .btn-reject {
    flex: 1;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
}

.btn-accept {
    background-color: #4caf50;
    color: white;
}
.btn-accept:hover { background-color: #388e3c; }

.btn-reject {
    background-color: #ef5350;
    color: white;
}
.btn-reject:hover { background-color: #d32f2f; }

/* Estado Aceptada */
.reservation-accepted {
    margin: 10px;
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid #c8e6c9;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   ESTILO PARA ANUNCIOS RESERVADOS
============================================ */

/* Capa que cubre toda la imagen */
.reserved-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco transparente */
    backdrop-filter: blur(2px); /* Efecto borroso elegante */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Por encima de la foto */
    border-radius: 15px; /* Mismo borde que la tarjeta */
}

/* El texto de "RESERVADO" */
.reserved-label {
    background-color: #d32f2f; /* Rojo fuerte */
    color: white;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transform: rotate(-5deg); /* Un toque inclinado */
}

/* ============================================
   14. CORRECCIONES RESPONSIVE (ADMIN PANEL)
   (Poner al final del archivo CSS - Versión Compacta)
============================================ */

@media (max-width: 1100px) {

    /* 1. REGLA DE SEGURIDAD */
    body, html { 
        overflow-x: hidden; 
        width: 100%; 
        position: relative; 
    }

    /* 2. CONTENEDORES GENERALES */
    .admin-container, 
    .profile-page-wrapper,
    .feed-page-wrapper { 
        padding: 10px; 
        overflow: hidden; 
        box-sizing: border-box; 
    }

    /* Columnas verticales */
    .admin-wrapper, 
    .profile-layout, 
    .feed-layout { 
        flex-direction: column; 
        width: 100%; 
        gap: 20px; 
    }

    .admin-content, 
    .profile-main-content,
    .feed-main { 
        width: 100%; 
        min-width: 0; 
        display: block; 
    }

    /* 3. SIDEBARS (MENÚS LATERALES) */
    .admin-sidebar, 
    .profile-sidebar,
    .feed-sidebar {
        width: 100%; 
        max-width: 100%; 
        margin-bottom: 10px; 
        padding: 15px;
        box-sizing: border-box; 
        position: relative; 
        top: 0;
        display: flex; 
        flex-direction: column; 
        gap: 10px;
    }

    /* Reset de tarjetas de sidebar */
    .sidebar-profile, 
    .user-info-card,
    .sidebar-card { 
        padding: 15px !important; 
        border-bottom: none; 
        margin-bottom: 0; 
        width: 100%;
        box-sizing: border-box;
    }

    /* MENÚS CARRUSEL (SCROLL HORIZONTAL) */
    .sidebar-menu,
    .sidebar-nav { 
        width: 100%; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 5px; 
        margin-top: 0; 
        border-top: 1px solid #eee; 
        padding-top: 10px;
    }
    
    .sidebar-menu ul,
    .sidebar-nav ul { 
        display: flex; 
        flex-direction: row; 
        gap: 8px; 
        padding: 0; 
        margin: 0; 
        width: max-content; 
    }
    
    .sidebar-menu li,
    .sidebar-nav li { 
        flex: 0 0 auto; 
        margin: 0; 
    }
    
    .sidebar-menu a,
    .sidebar-nav a { 
        display: flex;
        align-items: center;
        white-space: nowrap; 
        background-color: #f7f9f8; 
        border: 1px solid #e0e0e0; 
        padding: 8px 15px; 
        border-radius: 20px; 
        font-size: 14px; 
    }

    /* 4. GRIDS Y TARJETAS */
    .stats-row, 
    .feed-grid { 
        display: flex; 
        flex-direction: column; 
        gap: 15px; 
        width: 100%; 
    }
    
    .stat-card, 
    .ad-card { 
        width: 100% !important; 
        box-sizing: border-box; 
        min-width: 0; 
    }
    
    .stat-data { overflow: hidden; width: 100%; }

    /* 5. TABLAS */
    .table-section { width: 100%; padding: 15px; box-sizing: border-box; overflow: hidden; }
    .table-wrapper, .table-responsive { width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #f0f0f0; border-radius: 10px; }
    .modern-table, .users-table { width: 100%; min-width: 600px; }
    .modern-table th, .modern-table td, .users-table th, .users-table td { padding: 12px 10px; font-size: 13px; white-space: nowrap; }


    /* 6. FORMULARIOS DE BÚSQUEDA Y FILTROS (ARREGLADO) */
    
    .feed-header {
        /* Ajustamos el contenedor padre del filtro */
        padding: 20px !important; /* Reducimos padding para ganar espacio */
        width: 100%;
        box-sizing: border-box;
    }

    .admin-search-bar,
    .search-filters-form { 
        display: flex !important;
        flex-direction: column !important; 
        align-items: stretch !important; 
        gap: 10px !important; 
        height: auto !important; 
        padding: 15px !important; 
        
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        
        /* ESTO ES LO QUE ARREGLA EL DESPLAZAMIENTO A LA DERECHA: */
        width: 100% !important;
        box-sizing: border-box !important; 
        margin: 0 !important; /* Quitamos cualquier margen externo */
        max-width: 100%;
    }
    
    /* Contenedores de inputs */
    .search-group,
    .search-input-group,
    .filter-select-group { 
        width: 100% !important; 
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Inputs y Selects */
    .search-group input,
    .search-input-group input,
    .filter-select-group select { 
        width: 100% !important; 
        margin: 0 !important; 
        box-sizing: border-box !important; 
        height: 45px; 
        max-width: 100%;
    }
    
    /* Botones */
    .search-group button,
    .btn-search-icon { 
        width: 100% !important; 
        margin: 5px 0 0 0 !important; 
        padding: 0;
        height: 45px;
        border-radius: 10px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(27, 136, 116);
        color: white;
    }
    
    .btn-clean-filters {
        width: 100% !important;
        justify-content: center;
        margin-top: 5px;
        background-color: #f0f0f0;
        color: #555;
    }

    /* Toggle switch (Admin) */
    .filter-group { 
        width: 100%; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding-top: 15px; 
        border-top: 1px solid #eee; 
        margin-top: 5px; 
        box-sizing: border-box;
    }

    /* 7. AJUSTES VISUALES (BADGES Y FOTOS) */
    .ad-image-wrapper { 
        height: 180px !important; 
        position: relative; 
    }
    
    .category-badge {
        font-size: 10px !important; 
        padding: 4px 8px !important;
        top: 8px !important; 
        right: 8px !important;
        border-radius: 12px !important; 
        background: rgba(31, 51, 43, 0.95) !important;
        max-width: 70%; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        z-index: 10;
    }
}

/* AJUSTES PARA MÓVILES MUY PEQUEÑOS (menos de 500px) */
@media (max-width: 500px) {
    .content-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px; 
    }
    
    .content-header div { 
        width: 100%; 
    }
    
    .btn-download-report { 
        width: 100%; 
        margin-top: 5px; 
        text-align: center; 
    }
    
    .sidebar-logout button { 
        text-align: center !important; 
        background-color: #fff5f5 !important; 
        padding: 10px; 
        border-radius: 8px; 
        margin-top: 5px; 
        width: 100%; 
    }
}
/* AJUSTES EXTRA PARA MÓVILES PEQUEÑOS */
@media (max-width: 500px) {
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .content-header div {
        width: 100%;
    }

    .btn-download-report {
        width: 100%;
        margin-top: 5px;
        text-align: center;
    }
    
    .sidebar-logout button {
        text-align: center !important;
        background-color: #fff5f5 !important;
        padding: 10px;
        border-radius: 8px;
        margin-top: 5px;
        width: 100%;
    }
}

/* --- Estilos para Recuperar Contraseña y Login --- */

/* Asegura que el input generado por Django se vea bien */
.anuncio-form input[type="email"],
.anuncio-form input[type="password"],  /* <--- AÑADIDO ESTO */
.anuncio-form input[type="text"] {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.anuncio-form input:focus {
    border-color: #1f332b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 51, 43, 0.1); /* Un brillito verde sutil */
}

/* Estilo para mensajes de error */
.alert-error {
    background-color: #fde8e8;
    color: #c81e1e;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
    text-align: center;
}

/* Ajuste para centrar textos en la tarjeta */
.registro-card h2 {
    color: #1f332b;
}

.registro-card .sub {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}