/* /Pages/Chat.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Solbit Chat — diseño estilo WhatsApp
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Contenedor raíz ────────────────────────────────────────────────────── */
.wa-app[b-d1y8kx3xad] {
    display: flex;
    height: calc(100vh - 60px);   /* resta la navbar de la app */
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    background: #111b21;
}

/* ═══════════════════════════════════════════════════════ SIDEBAR */
.wa-sidebar[b-d1y8kx3xad] {
    width: 360px;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    background: #111b21;
    border-right: 1px solid #222e35;
    overflow: hidden;
}

/* Cabecera del propio usuario */
.wa-sidebar__header[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #202c33;
    min-height: 60px;
}

.wa-sidebar__header-info[b-d1y8kx3xad] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wa-sidebar__my-name[b-d1y8kx3xad] {
    font-weight: 700;
    font-size: .9rem;
    color: #e9edef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pill de estado */
.wa-status-pill[b-d1y8kx3xad] {
    font-size: .68rem;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    width: fit-content;
    margin-top: 2px;
}
.wa-status-pill--disponible[b-d1y8kx3xad] { background: #1a472a; color: #25d366; }
.wa-status-pill--ausente[b-d1y8kx3xad]    { background: #4a3800; color: #fbc531; }
.wa-status-pill--ocupado[b-d1y8kx3xad]    { background: #4a1010; color: #e74c3c; }

/* Menú 3 puntos */
.wa-sidebar__menu-wrap[b-d1y8kx3xad] { position: relative; }

.wa-dropdown[b-d1y8kx3xad] {
    position: absolute;
    right: 0;
    top: 34px;
    background: #233138;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}
.wa-dropdown button[b-d1y8kx3xad] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    color: #e9edef;
    font-size: .88rem;
    cursor: pointer;
}
.wa-dropdown button:hover[b-d1y8kx3xad] { background: #2a3942; }

/* Buscador */
.wa-search-wrap[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px;
    background: #202c33;
    border-radius: 8px;
    padding: 6px 12px;
}
.wa-search-icon[b-d1y8kx3xad] { font-size: .85rem; color: #8696a0; }
.wa-search-input[b-d1y8kx3xad] {
    flex-grow: 1;
    background: none;
    border: none;
    outline: none;
    color: #e9edef;
    font-size: .88rem;
}
.wa-search-input[b-d1y8kx3xad]::placeholder { color: #8696a0; }

/* Lista de chats */
.wa-chat-list[b-d1y8kx3xad] {
    flex-grow: 1;
    overflow-y: auto;
}

.wa-chat-item[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #222e35;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.wa-chat-item:hover[b-d1y8kx3xad]        { background: #202c33; }
.wa-chat-item--active[b-d1y8kx3xad]      { background: #2a3942; }

.wa-chat-item__body[b-d1y8kx3xad] { flex-grow: 1; overflow: hidden; }

.wa-chat-item__top[b-d1y8kx3xad] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}

.wa-chat-item__name[b-d1y8kx3xad] {
    font-weight: 600;
    font-size: .88rem;
    color: #e9edef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.wa-chat-item__time[b-d1y8kx3xad]  { font-size: .72rem; color: #8696a0; white-space: nowrap; }

.wa-chat-item__bottom[b-d1y8kx3xad] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wa-chat-item__last-msg[b-d1y8kx3xad] {
    font-size: .8rem;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Badge no leídos */
.wa-badge[b-d1y8kx3xad] {
    background: #25d366;
    color: #111b21;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    padding: 0 4px;
    flex-shrink: 0;
}

/* Nuevo chat */
.wa-new-chat[b-d1y8kx3xad] {
    padding: 10px 12px;
    background: #202c33;
    border-top: 1px solid #222e35;
}
.wa-new-chat__select[b-d1y8kx3xad] {
    width: 100%;
    background: #2a3942;
    color: #e9edef;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .85rem;
    cursor: pointer;
}
.wa-new-chat__select option[b-d1y8kx3xad] { background: #2a3942; }

/* ═══════════════════════════════════════════════════════ AVATARS */
.wa-avatar[b-d1y8kx3xad] {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
    font-size: 1rem;
    text-transform: uppercase;
}
.wa-avatar--md[b-d1y8kx3xad] { width: 46px; height: 46px; }
.wa-avatar--sm[b-d1y8kx3xad] { width: 38px; height: 38px; font-size: .85rem; }

/* Punto de estado sobre el avatar */
.wa-status-dot[b-d1y8kx3xad] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #111b21;
}
.wa-status-dot--disponible[b-d1y8kx3xad] { background: #25d366; }
.wa-status-dot--ausente[b-d1y8kx3xad]    { background: #fbc531; }
.wa-status-dot--ocupado[b-d1y8kx3xad]    { background: #e74c3c; }

/* ═══════════════════════════════════════════════════════ MAIN */
.wa-main[b-d1y8kx3xad] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #0b141a;
    /* Fondo de puntos sutil estilo WhatsApp */
    background-image: radial-gradient(circle, #1a2a33 1px, transparent 1px);
    background-size: 22px 22px;
    overflow: hidden;
}

/* Cabecera del chat activo */
.wa-main__header[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #202c33;
    border-bottom: 1px solid #222e35;
    min-height: 60px;
}

.wa-main__header-info[b-d1y8kx3xad] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.wa-main__contact-name[b-d1y8kx3xad] {
    font-weight: 700;
    font-size: .95rem;
    color: #e9edef;
}

.wa-main__status-text[b-d1y8kx3xad] { font-size: .72rem; }

.wa-online[b-d1y8kx3xad]  { color: #25d366; }
.wa-offline[b-d1y8kx3xad] { color: #8696a0; }

/* Zona de mensajes */
.wa-messages[b-d1y8kx3xad] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 12px 8%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Separador de fecha */
.wa-date-sep[b-d1y8kx3xad] {
    text-align: center;
    margin: 10px 0 6px;
}
.wa-date-sep[b-d1y8kx3xad]::before {
    content: attr(data-label);
}
.wa-date-sep[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .73rem;
    color: #8696a0;
}
.wa-date-sep[b-d1y8kx3xad]::before,
.wa-date-sep[b-d1y8kx3xad]::after {
    content: "";
    flex: 1;
    border-top: 1px solid #222e35;
    margin: 0 10px;
}

/* Fila de mensaje */
.wa-msg-row[b-d1y8kx3xad] {
    display: flex;
    margin-bottom: 2px;
}
.wa-msg-row--out[b-d1y8kx3xad] { justify-content: flex-end; }
.wa-msg-row--in[b-d1y8kx3xad]  { justify-content: flex-start; }

/* Burbuja */
.wa-bubble[b-d1y8kx3xad] {
    max-width: 65%;
    padding: 7px 10px 5px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    word-break: break-word;
}

.wa-bubble--out[b-d1y8kx3xad] {
    background: #005c4b;
    border-bottom-right-radius: 2px;
}

.wa-bubble--in[b-d1y8kx3xad] {
    background: #202c33;
    border-bottom-left-radius: 2px;
}

.wa-bubble__text[b-d1y8kx3xad] {
    font-size: .9rem;
    color: #e9edef;
    line-height: 1.4;
}

.wa-bubble__meta[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.wa-bubble__time[b-d1y8kx3xad] {
    font-size: .68rem;
    color: #8696a0;
    white-space: nowrap;
}

/* Check marcas */
.wa-check[b-d1y8kx3xad]         { font-size: .75rem; color: #8696a0; }
.wa-check--read[b-d1y8kx3xad]   { color: #53bdeb; }

/* Barra de input */
.wa-input-bar[b-d1y8kx3xad] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #202c33;
    border-top: 1px solid #222e35;
}

.wa-input-bar__field[b-d1y8kx3xad] {
    flex-grow: 1;
    background: #2a3942;
    color: #e9edef;
    border: none;
    border-radius: 24px;
    padding: 10px 16px;
    font-size: .9rem;
    outline: none;
}
.wa-input-bar__field[b-d1y8kx3xad]::placeholder { color: #8696a0; }

.wa-send-btn[b-d1y8kx3xad] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #00a884;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.wa-send-btn:hover:not(:disabled)[b-d1y8kx3xad] { background: #00c49a; }
.wa-send-btn:disabled[b-d1y8kx3xad] { background: #2a3942; cursor: not-allowed; }

/* Pantalla de bienvenida */
.wa-welcome[b-d1y8kx3xad] {
    margin: auto;
    text-align: center;
    color: #8696a0;
    padding: 40px;
}
.wa-welcome__icon[b-d1y8kx3xad] { font-size: 3.5rem; margin-bottom: 16px; }
.wa-welcome h3[b-d1y8kx3xad]    { color: #e9edef; margin-bottom: 8px; }
.wa-welcome p[b-d1y8kx3xad]     { font-size: .9rem; }

/* Botones genéricos */
.wa-icon-btn[b-d1y8kx3xad] {
    background: none;
    border: none;
    color: #aebac1;
    font-size: 1.3rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
    flex-shrink: 0;
}
.wa-icon-btn:hover[b-d1y8kx3xad] { background: rgba(255,255,255,.08); }

.wa-back-btn[b-d1y8kx3xad] { display: none; } /* solo visible en móvil */

/* ═══════════════════════════════════════════════════════ RESPONSIVE */
@media (max-width: 768px) {
    .wa-app[b-d1y8kx3xad]     { position: relative; }

    .wa-sidebar[b-d1y8kx3xad] {
        width: 100% !important;
        min-width: 100% !important;
        position: absolute;
        inset: 0;
        z-index: 20;
    }
    .wa-sidebar--hidden[b-d1y8kx3xad] { display: none !important; }

    .wa-main[b-d1y8kx3xad] {
        width: 100%;
        position: absolute;
        inset: 0;
        z-index: 10;
    }
    .wa-main--hidden[b-d1y8kx3xad] { display: none !important; }

    .wa-back-btn[b-d1y8kx3xad] { display: flex !important; }

    .wa-bubble[b-d1y8kx3xad] { max-width: 85%; }
    .wa-messages[b-d1y8kx3xad] { padding: 12px 4%; }
}
/* /Pages/Planing.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Planificador Vikunja — Gantt 100% Blazor (sin JavaScript)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.vk-navbar[b-t5hqutpn0z] {
    background: #2c3e50;
    color: white;
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-radius: 6px 6px 0 0;
    margin-bottom: 16px;
}

.vk-title[b-t5hqutpn0z] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* ─── Botones ─── */
.btn-vk[b-t5hqutpn0z] {
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: opacity .15s;
}
.btn-vk:disabled[b-t5hqutpn0z] { opacity: .5; cursor: not-allowed; }
.btn-primary[b-t5hqutpn0z]  { background: #1a73e8; color: white; }
.btn-primary:hover:not(:disabled)[b-t5hqutpn0z] { background: #1558b0; }
.btn-secondary[b-t5hqutpn0z] { background: #e8eaed; color: #333; }
.btn-secondary:hover:not(:disabled)[b-t5hqutpn0z] { background: #d2d4d7; }

/* ─── Cards ─── */
.vk-card[b-t5hqutpn0z] {
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    padding: 18px 20px;
    margin-bottom: 16px;
}

/* ─── Filtros ─── */
.vk-filters[b-t5hqutpn0z] {}

.filter-row[b-t5hqutpn0z] {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filter-group[b-t5hqutpn0z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #555;
}

.vk-input[b-t5hqutpn0z] {
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* ─── Grid de usuarios ─── */
.user-grid[b-t5hqutpn0z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    background: #fafafa;
}

.user-item[b-t5hqutpn0z] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 5px 8px;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* ─── Card Gantt ──────────────────────────────────────────────────────────── */
.vk-gantt-card[b-t5hqutpn0z]  { padding: 0; overflow: hidden; }
.vk-alert[b-t5hqutpn0z]       { background: #fff3cd; border-left: 4px solid #f0ad4e;
                  padding: 10px 16px; border-radius: 4px; margin-bottom: 12px;
                  font-size: .9rem; color: #856404; }

.gantt-toolbar[b-t5hqutpn0z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    background: #fafafa;
}

.gantt-counter[b-t5hqutpn0z] { margin-left: auto; font-size: .8rem; color: #888; }

/* ─── Scroll wrapper (scroll horizontal del Gantt) ─────────────────────────── */
.gantt-scroll-wrapper[b-t5hqutpn0z] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 72vh;
    position: relative;
}

/* ─── Cabeceras ──────────────────────────────────────────────────────────── */
.gantt-header-row[b-t5hqutpn0z] {
    display: flex;
    align-items: stretch;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-weeks-row[b-t5hqutpn0z] { top: 22px; }  /* segunda fila de cabecera */

.gantt-label-header[b-t5hqutpn0z] {
    background: #f8f9fa;
    border-right: 2px solid #dee2e6;
    flex-shrink: 0;
    width: 200px;
}

.gantt-month-marker[b-t5hqutpn0z] {
    position: absolute;
    top: 0; bottom: 0;
    border-right: 1px solid #dee2e6;
    padding: 3px 6px;
    font-size: .72rem;
    font-weight: 700;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f8f9fa;
    text-transform: capitalize;
}

.gantt-week-marker[b-t5hqutpn0z] {
    position: absolute;
    top: 0; bottom: 0;
    border-right: 1px solid #e9ecef;
    padding: 2px 4px;
    font-size: .68rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
}

.today-col[b-t5hqutpn0z] { background: #fff9e6 !important; }

/* ─── Filas de tareas ─────────────────────────────────────────────────────── */
.gantt-row[b-t5hqutpn0z] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f0f0;
    min-height: 36px;
}

.gantt-row:hover[b-t5hqutpn0z]           { background: #f8f9fa; }
.gantt-row.row-editing[b-t5hqutpn0z]     { background: #fffbe6; }

.gantt-label-cell[b-t5hqutpn0z] {
    width: 200px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-right: 2px solid #dee2e6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 5;
}

.label-user[b-t5hqutpn0z]    { font-size: .8rem; font-weight: 700; color: #2c3e50; line-height: 1.2; }
.label-project[b-t5hqutpn0z] { font-size: .72rem; color: #6c757d; line-height: 1.2;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Zona de barras ──────────────────────────────────────────────────────── */
.gantt-cells[b-t5hqutpn0z] {
    position: relative;
    min-height: 36px;
    flex-shrink: 0;
}

/* Líneas verticales de la cuadrícula */
.grid-col[b-t5hqutpn0z] {
    position: absolute;
    top: 0; bottom: 0;
    border-right: 1px solid #f0f0f0;
    pointer-events: none;
}

.grid-today[b-t5hqutpn0z] { background: rgba(255, 220, 50, .12); }

/* ─── Barras ──────────────────────────────────────────────────────────────── */
.gantt-bar[b-t5hqutpn0z] {
    position: absolute;
    top: 5px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    transition: filter .15s, transform .1s;
    z-index: 2;
}

.gantt-bar:hover[b-t5hqutpn0z] {
    filter: brightness(1.1);
    transform: scaleY(1.05);
    z-index: 3;
}

.bar-pending[b-t5hqutpn0z] { background: #4a90e2; color: white; }
.bar-done[b-t5hqutpn0z]    { background: #34a853; color: white; }

/* Evento de un solo día (solo tiene una fecha válida en Vikunja) */
.bar-single[b-t5hqutpn0z] {
    background: #f39c12;
    width: 20px !important;
    height: 20px !important;
    top: 8px;
    border-radius: 3px;
    transform: rotate(45deg);  /* diamante */
    cursor: pointer;
    transition: filter .15s, transform .1s;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.bar-single:hover[b-t5hqutpn0z] {
    filter: brightness(1.15);
    transform: rotate(45deg) scale(1.15);
}

.bar-label[b-t5hqutpn0z] {
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ─── Panel de edición inline ─────────────────────────────────────────────── */
.edit-panel[b-t5hqutpn0z] {
    background: #fffbe6;
    border-top: 2px solid #f0ad4e;
    border-bottom: 2px solid #f0ad4e;
    padding: 12px 16px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .875rem;
}

.edit-fields[b-t5hqutpn0z] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.edit-error[b-t5hqutpn0z] {
    color: #d93025;
    font-size: .8rem;
    font-weight: 600;
    align-self: center;
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.vk-toast[b-t5hqutpn0z] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 22px;
    border-radius: 24px;
    color: white;
    font-weight: 600;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeInOut-b-t5hqutpn0z 2.5s ease forwards;
}

.toast-ok[b-t5hqutpn0z]  { background: #34a853; }
.toast-err[b-t5hqutpn0z] { background: #d93025; }

/* ─── Spinner ─────────────────────────────────────────────────────────────── */
.vk-spinner[b-t5hqutpn0z] {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-t5hqutpn0z .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin-b-t5hqutpn0z      { to { transform: rotate(360deg); } }
@keyframes fadeInOut-b-t5hqutpn0z { 0%,100%{opacity:0} 10%,85%{opacity:1} }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .filter-row[b-t5hqutpn0z]   { flex-direction: column; align-items: stretch; }
    .gantt-scroll-wrapper[b-t5hqutpn0z] { max-height: 60vh; }
    .gantt-label-cell[b-t5hqutpn0z] { width: 130px; }
}