/* Reset básico */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: #e5ddd5; height: 100vh; display: flex; justify-content: center; align-items: center; }

/* PANTALLAS */
.screen { display: none; width: 100%; height: 100%; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* LOGIN / REGISTRO */
.auth-container {
    background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 100%; max-width: 400px; margin: auto; text-align: center;
}
.auth-container input {
    width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;
}
.auth-container button {
    width: 100%; padding: 10px; background: #00a884; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;
}
.auth-container a { color: #00a884; text-decoration: none; }
.error-msg { color: red; margin-top: 10px; font-size: 0.9em; }

/* CHAT LAYOUT */
.chat-container {
    display: flex; width: 90%; height: 90vh; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* BARRA LATERAL */
.user-list-panel {
    width: 30%; border-right: 1px solid #ddd; display: flex; flex-direction: column; background: #fff;
}
.user-list-panel header {
    padding: 15px; background: #f0f2f5; display: flex; justify-content: space-between; align-items: center;
}
.logout-btn { background: #ff5c5c; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
#users-list { list-style: none; overflow-y: auto; flex: 1; }

.user-item {
    padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; display: flex; align-items: center;
}
.user-item:hover, .user-item.active { background: #f5f5f5; }
.status-dot {
    height: 10px; width: 10px; background-color: #bbb; border-radius: 50%; display: inline-block; margin-right: 10px;
}
.status-dot.online { background-color: #25d366; } /* Verde WhatsApp */
.user-info b { display: block; font-size: 1rem; }
.user-info span { font-size: 0.8rem; color: #666; }
.unread-badge {
    background: #25d366; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; margin-left: auto; visibility: hidden;
}
.unread-badge.visible { visibility: visible; }

/* AREA PRINCIPAL */
.chat-area { flex: 1; display: flex; flex-direction: column; background: #efe7dd; } /* Fondo tipo chat */

#chat-header {
    padding: 10px 20px; background: #f0f2f5; border-bottom: 1px solid #ddd; height: 60px; display: flex; align-items: center; justify-content: space-between;
}
#chat-status { font-size: 0.8rem; color: gray; }

.messages-area {
    flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column;
}

.message {
    max-width: 60%; padding: 8px 12px; margin-bottom: 10px; border-radius: 7px; position: relative; font-size: 0.95rem;
    display: flex; flex-direction: column;
}
.message.sent { align-self: flex-end; background: #d9fdd3; }
.message.received { align-self: flex-start; background: white; }

.msg-meta {
    font-size: 0.7rem; color: #999; align-self: flex-end; margin-top: 4px; display: flex; align-items: center; gap: 4px;
}

/* Doble Check */
.ticks { font-size: 0.8rem; }
.tick-1 { color: #999; } /* Enviado */
.tick-2 { color: #53bdeb; } /* Leído (Azul) */

#chat-input-area {
    padding: 10px; background: #f0f2f5; display: flex; gap: 10px;
}
#chat-input-area input {
    flex: 1; padding: 10px; border: none; border-radius: 20px; outline: none;
}
#chat-input-area button {
    padding: 10px 20px; background: #00a884; color: white; border: none; border-radius: 20px; cursor: pointer;
}
.placeholder-text { text-align: center; color: #888; margin-top: 20%; }

/* Header del panel lateral más complejo */
.user-list-panel header {
    flex-direction: column; align-items: stretch; gap: 10px;
}
.header-top { display: flex; justify-content: space-between; align-items: center; }
.header-actions { display: flex; gap: 5px; }
.header-actions button { flex: 1; padding: 5px; cursor: pointer; border: none; border-radius: 4px; color: white; }
#btn-broadcast { background: #6f42c1; } /* Morado */

/* Icono de favorito (Estrella) */
.fav-icon {
    cursor: pointer; font-size: 1.2rem; color: #ccc; margin-right: 8px; transition: color 0.2s;
}
.fav-icon.active { color: #ffc107; } /* Amarillo */
.fav-icon:hover { transform: scale(1.2); }

/* Checkbox para difusión */
.select-check {
    display: none; margin-right: 10px; transform: scale(1.5);
}
.broadcast-mode .select-check { display: block; }
.broadcast-mode .status-dot { display: none; } /* Ocultar estado en modo selección */

/* Panel de input de difusión */
#broadcast-panel {
    padding: 10px; background: #f8f9fa; border-top: 1px solid #ddd; display: flex; flex-direction: column; gap: 5px;
}
#broadcast-panel textarea {
    width: 100%; height: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; resize: none;
}
#broadcast-panel button {
    background: #6f42c1; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer;
}