@charset "utf-8";
        /* ===========================
           ESTILOS BASE (COPIADOS DE TU INDEX)
           =========================== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Quicksand', sans-serif;
            background-color: #EED638; /* El amarillo de tu marca */
            color: #2e2e2e;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* TOP BAR */
        .topbar {
            background-color: #2e2e2e;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 28px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .topbar-logo { color: #EED638; font-weight: 700; font-size: 1.4rem; }
        .topbar-btn {
            color: #ffffff;
            background: none;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 6px 16px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 700;
        }

        /* LAYOUT */
        .layout { display: flex; min-height: calc(100vh - 54px); }

        /* SIDEBAR */
.sidebar {
	width: 180px;
	flex-shrink: 0;
	background-color: #2e2e2e;
	display: flex;
	flex-direction: column;
	padding: 24px 0;
	gap: 4px;
}

.nav-item {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.6);
	padding: 12px 20px;
	border-left: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-item:hover {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.activo {
	color: #EED638;
	border-left-color: #EED638;
	background-color: rgba(238, 214, 56, 0.08);
	text-decoration: none;
}
.nav-item.activo a{
	text-decoration: none;
}


        /* CONTENIDO PRINCIPAL */
        .contenido { flex: 1; padding: 36px 40px; }

        /* ===========================
           ESTILOS ESPECÍFICOS DEL CHAT
           =========================== */
        .chat-container {
            display: flex;
            background-color: #2e2e2e; /* Fondo oscuro para el bloque de chat */
            border-radius: 20px;
            height: 70vh;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        /* Lista de contactos (Izquierda) */
        .chat-lista {
            width: 280px;
            overflow-y: auto;
        }
        .contacto-item {
            display: flex;
            align-items: center;
            padding: 20px;
            gap: 12px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .contacto-item:hover { background-color: rgba(255, 255, 255, 0.05); }
        .contacto-item.activo { 
			background-color: rgba(46,46,46,0.2); 
		}

        .avatar {
            width: 45px; height: 45px;
            border-radius: 50%;
            background-color: #2e2e2e;
            color: #eed638;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .contacto-info { display: flex; flex-direction: column; overflow: hidden; }
        .contacto-nombre { color: #2e2e2e; font-weight: 700; font-size: 0.95rem; }
        .contacto-previo { color: #2e2e2e; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Ventana de chat (Derecha) */
        .chat-ventana { flex: 1; display: flex; flex-direction: column; background-color: #333333; }
        .chat-header {
            padding: 15px 25px;
            background-color: #2e2e2e;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .chat-header h2 { color: #EED638; font-size: 1rem; }

        .mensajes-area {
            flex: 1;
            padding: 25px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .mensaje {
            max-width: 75%;
            padding: 12px 16px;
            border-radius: 15px;
            font-size: 0.95rem;
            line-height: 1.4;
        }
        .recibido { align-self: flex-start; background-color: #454545; color: white; border-bottom-left-radius: 2px; }
        .enviado { align-self: flex-end; background-color: #EED638; color: #2e2e2e; border-bottom-right-radius: 2px; font-weight: 700; }

        /* Input */
        .input-zona {
            padding: 20px;
            background-color: #2e2e2e;
            display: flex;
            gap: 12px;
        }
        #texto-mensaje {
            flex: 1;
            background-color: #454545;
            border: none;
            border-radius: 12px;
            padding: 14px;
            color: white;
            font-family: inherit;
        }
        #texto-mensaje:focus { outline: 2px solid #EED638; }
        .btn-enviar {
            background-color: #EED638;
            border: none;
            border-radius: 12px;
            width: 50px;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex; align-items: center; justify-content: center;
        }

        @media (max-width: 800px) {
            .chat-lista { width: 80px; }
            .contacto-info { display: none; }
            .contenido { padding: 15px; }
        }