/* /Components/BitacoraIndividualPanel.razor.rz.scp.css */
/* Overlay */
.bpanel-overlay[b-rsuibg0mbv] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99;
}

/* Panel */
.bpanel-container[b-rsuibg0mbv] {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: 480px;
    background: white;
    border-left: 1px solid #E0E0E0;
    z-index: 100;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.bpanel-open[b-rsuibg0mbv] { transform: translateX(0); }

/* Header teal */
.bpanel-header[b-rsuibg0mbv] {
    background: #4BA8AA;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
}
.bpanel-header-left[b-rsuibg0mbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.bpanel-close[b-rsuibg0mbv] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.bpanel-close:hover[b-rsuibg0mbv] { background: rgba(255,255,255,0.3); }
.bpanel-subtitle[b-rsuibg0mbv] { font-size: 10px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; }
.bpanel-name[b-rsuibg0mbv] {
    font-size: 14px;
    font-weight: 500;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* Content */
.bpanel-content[b-rsuibg0mbv] { padding: 16px; }

/* Loading */
.bpanel-loading[b-rsuibg0mbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 12px;
    color: #999;
    font-size: 13px;
}
.bpanel-spinner[b-rsuibg0mbv] {
    width: 28px; height: 28px;
    border: 3px solid #E8F4F8;
    border-top: 3px solid #4BA8AA;
    border-radius: 50%;
    animation: bspin 0.8s linear infinite;
}
@@keyframes bspin { to[b-rsuibg0mbv] { transform: rotate(360deg); } }

/* Sections */
.bpanel-section[b-rsuibg0mbv] { margin-bottom: 14px; }
.bpanel-section-title[b-rsuibg0mbv] {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Visibility card */
.bpanel-visibility-card[b-rsuibg0mbv] {
    background: #F7F7F7;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}
.visibility-toggle[b-rsuibg0mbv] {
    display: flex;
    background: #EBEBEB;
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}
.visibility-option[b-rsuibg0mbv] {
    flex: 1;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
    background: transparent;
    border: 1px solid transparent;
}
.visibility-option.active-public[b-rsuibg0mbv] {
    background: rgba(75,168,170,0.15);
    color: #4BA8AA;
    font-weight: 500;
    border-color: rgba(75,168,170,0.3);
}
.visibility-option.active-private[b-rsuibg0mbv] {
    background: rgba(100,100,100,0.1);
    color: #555;
    font-weight: 500;
    border-color: rgba(100,100,100,0.2);
}
.visibility-hint[b-rsuibg0mbv] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #999;
    margin-top: 8px;
}

/* Textarea */
.bpanel-textarea[b-rsuibg0mbv] {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #333;
    resize: vertical;
    background: #FBFBFB;
    outline: none;
    transition: border-color 0.2s;
}
.bpanel-textarea:focus[b-rsuibg0mbv] { border-color: #4BA8AA; }

/* Char counter */
.char-counter[b-rsuibg0mbv] {
    font-size: 11px;
    color: #BBB;
    text-align: right;
    margin-top: 4px;
}
.char-counter.near-limit[b-rsuibg0mbv] { color: #F0C56D; }
.char-counter.at-limit[b-rsuibg0mbv] { color: #D35D52; }

/* Smart chips */
.bpanel-chips[b-rsuibg0mbv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.bpanel-chip[b-rsuibg0mbv] {
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
    background: rgba(75,168,170,0.08);
    border: 1px solid rgba(75,168,170,0.2);
    color: #4BA8AA;
    transition: opacity 0.2s;
}
.bpanel-chip:hover[b-rsuibg0mbv] { opacity: 0.7; }

/* Submit button */
.bpanel-btn-agregar[b-rsuibg0mbv] {
    width: 100%;
    background: #4BA8AA;
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
    margin-bottom: 12px;
}
.bpanel-btn-agregar:hover:not(:disabled)[b-rsuibg0mbv] { opacity: 0.9; }
.bpanel-btn-agregar:disabled[b-rsuibg0mbv] { opacity: 0.5; cursor: not-allowed; }

/* Toast */
.bpanel-toast[b-rsuibg0mbv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(75,168,170,0.12);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.25);
    margin-bottom: 14px;
    animation: bslideUp 0.3s ease;
}
@@keyframes bslideUp {
    from[b-rsuibg0mbv] { opacity: 0; transform: translateY(10px); }
    to[b-rsuibg0mbv] { opacity: 1; transform: translateY(0); }
}

/* Historial */
.bpanel-historial[b-rsuibg0mbv] {
    background: #F7F7F7;
    border-radius: 12px;
    padding: 14px;
}
.bpanel-hist-item[b-rsuibg0mbv] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid #EAEAEA;
}
.bpanel-hist-item:last-child[b-rsuibg0mbv] { border-bottom: none; }
.bpanel-hist-bar[b-rsuibg0mbv] {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    min-height: 24px;
}
.bpanel-hist-content[b-rsuibg0mbv] { flex: 1; min-width: 0; }
.bpanel-hist-text[b-rsuibg0mbv] { font-size: 11px; color: #555; margin-top: 3px; }
.bpanel-hist-meta[b-rsuibg0mbv] { font-size: 10px; color: #BBB; margin-top: 3px; }

/* Badges */
.badge-public[b-rsuibg0mbv] {
    font-size: 10px;
    color: #4BA8AA;
    background: rgba(75,168,170,0.1);
    padding: 1px 8px;
    border-radius: 4px;
}
.badge-private[b-rsuibg0mbv] {
    font-size: 10px;
    color: #888;
    background: rgba(100,100,100,0.08);
    padding: 1px 8px;
    border-radius: 4px;
}

/* Responsive */
@@media (max-width: 1024px) {
    .bpanel-container[b-rsuibg0mbv] { width: 420px; }
}
@@media (max-width: 768px) {
    .bpanel-container[b-rsuibg0mbv] { width: 100%; }
    .bpanel-name[b-rsuibg0mbv] { max-width: 180px; }
}
/* /Components/BlockToolbar.razor.rz.scp.css */
.block-toolbar[b-6ufv8q43u9] {
    position: absolute;
    background: white;
    border-radius: 10px;
    padding: 5px 8px;
    box-shadow: 0 4px 12px rgba(20,22,25,0.10),
                0 16px 40px rgba(20,22,25,0.14);
    z-index: 1199;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    font-family: 'Figtree', sans-serif;
}

.bt-group[b-6ufv8q43u9] {
    display: flex;
    gap: 1px;
}

.bt-btn[b-6ufv8q43u9] {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: none;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #141619;
    transition: background 0.1s;
    font-family: inherit;
    font-size: 12px;
}

.bt-btn:hover[b-6ufv8q43u9] { background: #F4F0E6; }
.bt-btn.active[b-6ufv8q43u9] {
    background: rgba(45, 127, 249, 0.15);
    color: #2D7FF9;
}
.bt-btn.bt-danger[b-6ufv8q43u9] { color: #888780; }
.bt-btn.bt-danger:hover[b-6ufv8q43u9] {
    background: rgba(163, 45, 45, 0.08);
    color: #A32D2D;
}

.bt-divider[b-6ufv8q43u9] {
    width: 1px;
    height: 18px;
    background: #EAE3D2;
    margin: 0 2px;
}
/* /Components/Chat/ChannelRightPanel.razor.rz.scp.css */
.right-panel[b-zq9afh5fyn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-left: 1px solid #F0F0F0;
    width: 320px;
    min-width: 320px;
}

.rp-tabs[b-zq9afh5fyn] {
    display: flex;
    border-bottom: 1px solid #F0F0F0;
    padding: 0 4px;
}

.rp-tab[b-zq9afh5fyn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 8px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: #8B9098;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.rp-tab .material-symbols-rounded[b-zq9afh5fyn] {
    font-size: 16px;
}

.rp-tab:hover[b-zq9afh5fyn] {
    color: #5C6068;
}

.rp-tab.active[b-zq9afh5fyn] {
    color: #6DC7D0;
    border-bottom-color: #6DC7D0;
}

.rp-badge[b-zq9afh5fyn] {
    background: #6DC7D0;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.rp-content[b-zq9afh5fyn] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.rp-empty[b-zq9afh5fyn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: #8B9098;
    text-align: center;
}

.rp-empty .material-symbols-rounded[b-zq9afh5fyn] {
    font-size: 36px;
    opacity: 0.5;
}

.rp-empty p[b-zq9afh5fyn] {
    font-size: 0.85rem;
    margin: 0;
}

.rp-pinned-item[b-zq9afh5fyn] {
    padding: 10px 12px;
    border-radius: 8px;
    background: #FFFDF5;
    border: 1px solid #F0E8D0;
    margin-bottom: 8px;
}

.rp-pinned-author[b-zq9afh5fyn] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1A1C1F;
    margin-bottom: 3px;
}

.rp-pinned-text[b-zq9afh5fyn] {
    font-size: 0.82rem;
    color: #5C6068;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rp-pinned-time[b-zq9afh5fyn] {
    font-size: 0.7rem;
    color: #8B9098;
}

.rp-thread-item[b-zq9afh5fyn] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #F0F0F0;
    border-radius: 8px;
    background: none;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
}

.rp-thread-item:hover[b-zq9afh5fyn] {
    background: #F8FCFC;
    border-color: #6DC7D0;
}

.rp-thread-preview[b-zq9afh5fyn] {
    font-size: 0.82rem;
    color: #1A1C1F;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rp-thread-meta[b-zq9afh5fyn] {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    color: #8B9098;
}
/* /Components/Chat/ChannelSidebar.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   ChannelSidebar — 276px · azul-verdoso oscuro
   Tokens propios, scoped al componente (no contaminan el sistema v2)
   ──────────────────────────────────────────────────────────────────── */

.ch-sidebar[b-vreutqe1pb] {
    --sb-bg:           #16272A;
    --sb-bg-2:         #1E3437;
    --sb-hover:        #24434A;
    --sb-active:       #2A5560;
    --sb-text:         #A7BDC1;
    --sb-text-muted:   #6B8489;
    --sb-text-bright:  #E8F4F8;
    --sb-border:       rgba(255, 255, 255, 0.06);
    --teal:            #6DC7D0;
    --teal-dark:       #4BA8AA;
    --sem-green:       #1D9E75;
    --sem-yellow:      #BA7517;
    --danger:          #D64545;

    width: 276px;
    background: var(--sb-bg);
    color: var(--sb-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sb-border);
    overflow: hidden;
    font-family: var(--font-sans);
}

/* === Brand === */
.ch-brand[b-vreutqe1pb] {
    padding: 20px 18px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}

.ch-brand-logo[b-vreutqe1pb] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(109, 199, 208, 0.25);
    flex-shrink: 0;
}

.ch-brand-name[b-vreutqe1pb] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ch-brand-name .mi[b-vreutqe1pb] {
    font-size: 15px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: -0.01em;
}

.ch-brand-name .esc[b-vreutqe1pb] {
    font-size: 11px;
    color: var(--sb-text);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* === School switcher === */
.ch-school-switcher[b-vreutqe1pb] {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--sb-border);
    cursor: pointer;
    transition: background 0.15s;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--sb-border);
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    flex-shrink: 0;
}

.ch-school-switcher:hover[b-vreutqe1pb] { background: var(--sb-hover); }

.ch-school-info[b-vreutqe1pb] { overflow: hidden; flex: 1; }

.ch-school-name[b-vreutqe1pb] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sb-text-bright);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ch-school-sub[b-vreutqe1pb] {
    font-size: 10.5px;
    color: var(--sb-text-muted);
    margin-top: 1px;
}

.ch-school-switcher .material-icons[b-vreutqe1pb] {
    font-size: 16px;
    color: var(--sb-text-muted);
}

/* === Search === */
.ch-search[b-vreutqe1pb] {
    margin: 12px 14px 8px;
    background: var(--sb-bg-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    transition: border-color 0.15s;
    flex-shrink: 0;
}

.ch-search:hover[b-vreutqe1pb] { border-color: var(--sb-hover); }

.ch-search .material-icons[b-vreutqe1pb] { font-size: 16px; color: var(--sb-text-muted); }

.ch-search input[b-vreutqe1pb] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--sb-text-bright);
    font-family: inherit;
    font-size: 12.5px;
    min-width: 0;
}

.ch-search input[b-vreutqe1pb]::placeholder { color: var(--sb-text-muted); }

.ch-search kbd[b-vreutqe1pb] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--sb-text-muted);
    background: var(--sb-bg);
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid var(--sb-hover);
}

/* === Scroll de canales === */
.ch-scroll[b-vreutqe1pb] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 12px;
}

.ch-scroll[b-vreutqe1pb]::-webkit-scrollbar { width: 6px; }
.ch-scroll[b-vreutqe1pb]::-webkit-scrollbar-track { background: transparent; }
.ch-scroll[b-vreutqe1pb]::-webkit-scrollbar-thumb { background: var(--sb-hover); border-radius: 3px; }

.ch-section[b-vreutqe1pb] { padding: 6px 0 2px; }

.ch-section-header[b-vreutqe1pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 4px;
    cursor: pointer;
}

.ch-section-title[b-vreutqe1pb] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ch-section-title .material-icons[b-vreutqe1pb] {
    font-size: 14px;
    opacity: 0.7;
}

.ch-section-add[b-vreutqe1pb] {
    font-size: 14px !important;
    color: var(--sb-text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.ch-section-header:hover .ch-section-add[b-vreutqe1pb] { opacity: 1; }

/* === Canal === */
.ch-channel[b-vreutqe1pb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 18px 5px 22px;
    font-size: 13px;
    color: var(--sb-text);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
    font-weight: 500;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.ch-channel:hover[b-vreutqe1pb] { background: var(--sb-hover); }

.ch-channel.active[b-vreutqe1pb] {
    background: var(--sb-active);
    color: var(--sb-text-bright);
    font-weight: 600;
}

.ch-channel.active[b-vreutqe1pb]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--teal);
}

.ch-channel-hash[b-vreutqe1pb] {
    font-family: var(--font-mono);
    color: var(--sb-text-muted);
    font-size: 13px;
    font-weight: 400;
}

.ch-channel.active .ch-channel-hash[b-vreutqe1pb] { color: var(--teal); }

.ch-channel-lock[b-vreutqe1pb] {
    font-size: 13px !important;
    color: var(--sb-text-muted);
}

.ch-channel.unread[b-vreutqe1pb] {
    color: var(--sb-text-bright);
    font-weight: 700;
}

.ch-channel-name[b-vreutqe1pb] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-badge[b-vreutqe1pb] {
    background: var(--danger);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.ch-badge.mention[b-vreutqe1pb] { background: var(--teal-dark); }

.ch-presence-dot[b-vreutqe1pb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sb-text-muted);
    flex-shrink: 0;
}

.ch-presence-dot.online[b-vreutqe1pb] { background: var(--sem-green); }
.ch-presence-dot.class[b-vreutqe1pb]  { background: var(--sem-yellow); }

/* === DM avatar === */
.ch-dm-avatar[b-vreutqe1pb] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, #8FA8AB, #5B7A7D);
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.ch-dm-avatar.c2[b-vreutqe1pb] { background: linear-gradient(135deg, #C4826C, #965C44); }
.ch-dm-avatar.c3[b-vreutqe1pb] { background: linear-gradient(135deg, #6C91C4, #445E96); }

/* === User card === */
.ch-user-card[b-vreutqe1pb] {
    padding: 10px 14px;
    border-top: 1px solid var(--sb-border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sb-bg-2);
    flex-shrink: 0;
}

.ch-user-avatar[b-vreutqe1pb] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 12px;
    position: relative;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.ch-user-avatar[b-vreutqe1pb]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--sem-green);
    border: 2px solid var(--sb-bg-2);
    border-radius: 50%;
}

.ch-user-info[b-vreutqe1pb] { flex: 1; overflow: hidden; }

.ch-user-name[b-vreutqe1pb] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sb-text-bright);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ch-user-role[b-vreutqe1pb] {
    font-size: 10.5px;
    color: var(--sb-text-muted);
    margin-top: 1px;
}

.ch-user-card .material-icons[b-vreutqe1pb] {
    font-size: 18px;
    color: var(--sb-text-muted);
    cursor: pointer;
}

/* Empty state del sidebar */
.ch-empty[b-vreutqe1pb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
    gap: 8px;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}

.ch-empty .material-icons[b-vreutqe1pb] {
    font-size: 32px !important;
    color: rgba(255,255,255,0.25);
}
/* /Components/Chat/ChatPanel.razor.rz.scp.css */
/* ─── ChatPanel Layout ───────────────────────────────────────────────── */
.chat-panel[b-iekg3i95wf] {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.chat-panel-main[b-iekg3i95wf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.cp-header[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #F0F0F0;
    background: #fff;
    flex-shrink: 0;
}

.cp-header-left[b-iekg3i95wf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-title[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-hash[b-iekg3i95wf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-teal, #6DC7D0);
}

.cp-name[b-iekg3i95wf] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #1A1C1F);
}

.cp-desc[b-iekg3i95wf] {
    font-size: 0.78rem;
    color: var(--text-secondary, #5C6068);
}

.cp-header-right[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-hbtn[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #5C6068);
    cursor: pointer;
    transition: background 0.12s;
}

.cp-hbtn:hover[b-iekg3i95wf] {
    background: #F5F5F5;
}

.cp-hbtn .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 16px;
}

.cp-members[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border: 1px solid #E0E0E0;
    background: none;
    border-radius: 20px;
    cursor: pointer;
    transition: border-color 0.12s;
}

.cp-members:hover[b-iekg3i95wf] {
    border-color: #6DC7D0;
}

.cp-avsm[b-iekg3i95wf] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    background: #6DC7D0;
    margin-left: -4px;
    border: 2px solid #fff;
}

.cp-avsm:first-child[b-iekg3i95wf] {
    margin-left: 0;
}

.cp-members-count[b-iekg3i95wf] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #5C6068);
    margin-left: 4px;
}

/* ─── Messages Area ──────────────────────────────────────────────────── */
.cp-messages[b-iekg3i95wf] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
    background: var(--bg-chat, #FCFAF5);
}

.cp-empty[b-iekg3i95wf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: var(--text-muted, #8B9098);
    text-align: center;
    padding: 40px;
}

.cp-empty .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 48px;
    opacity: 0.4;
}

.cp-empty h3[b-iekg3i95wf] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary, #1A1C1F);
}

.cp-empty p[b-iekg3i95wf] {
    margin: 0;
    font-size: 0.88rem;
}

.cp-empty-inline[b-iekg3i95wf] {
    height: auto;
    padding: 60px 20px;
}

/* ─── Day separator ──────────────────────────────────────────────────── */
.cp-day[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    padding: 4px 20px;
    margin: 12px 0;
}

.cp-day[b-iekg3i95wf]::before,
.cp-day[b-iekg3i95wf]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E8E4DC;
}

.cp-day-label[b-iekg3i95wf] {
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted, #8B9098);
    white-space: nowrap;
}

/* ─── Message Blocks ─────────────────────────────────────────────────── */
.cp-msg[b-iekg3i95wf] {
    display: flex;
    padding: 2px 20px;
    position: relative;
    transition: background 0.1s;
}

.cp-msg:hover[b-iekg3i95wf] {
    background: rgba(0, 0, 0, 0.02);
}

.cp-msg.is-new-block[b-iekg3i95wf] {
    padding-top: 10px;
}

.cp-avatar[b-iekg3i95wf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #6DC7D0;
    flex-shrink: 0;
    margin-right: 10px;
}

.cp-avatar.sm[b-iekg3i95wf] {
    width: 26px;
    height: 26px;
    font-size: 0.6rem;
}

.cp-time-inline[b-iekg3i95wf] {
    width: 36px;
    margin-right: 10px;
    font-size: 0.65rem;
    color: transparent;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-msg:hover .cp-time-inline[b-iekg3i95wf] {
    color: var(--text-muted, #8B9098);
}

.cp-msg-body[b-iekg3i95wf] {
    flex: 1;
    min-width: 0;
}

.cp-msg-header[b-iekg3i95wf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.cp-author[b-iekg3i95wf] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary, #1A1C1F);
}

.cp-author.is-lider[b-iekg3i95wf] {
    color: var(--gold, #B8860B);
}

.cp-author.is-directivo[b-iekg3i95wf] {
    color: var(--brand-teal-deep, #3A8F91);
}

.cp-crown[b-iekg3i95wf] {
    font-size: 14px;
    color: var(--gold, #B8860B);
    vertical-align: middle;
    margin-right: 2px;
}

.cp-role-tag[b-iekg3i95wf] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cp-role-tag.is-directivo[b-iekg3i95wf] {
    background: rgba(58, 143, 145, 0.1);
    color: #3A8F91;
}

.cp-role-tag.is-lider[b-iekg3i95wf] {
    background: rgba(184, 134, 11, 0.1);
    color: #B8860B;
}

.cp-role-tag.is-docente[b-iekg3i95wf] {
    background: rgba(109, 199, 208, 0.1);
    color: #5BA8B0;
}

.cp-time[b-iekg3i95wf] {
    font-size: 0.7rem;
    color: var(--text-muted, #8B9098);
}

.cp-content p[b-iekg3i95wf] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary, #1A1C1F);
}

/* ─── Hover Actions ──────────────────────────────────────────────────── */
.cp-actions[b-iekg3i95wf] {
    position: absolute;
    top: -8px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.cp-msg:hover .cp-actions[b-iekg3i95wf] {
    display: flex;
}

.cp-act[b-iekg3i95wf] {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary, #5C6068);
    display: flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}

.cp-act:hover[b-iekg3i95wf] {
    background: #F0F8F9;
    color: #6DC7D0;
}

.cp-act .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 16px;
}

/* ─── Reactions ──────────────────────────────────────────────────────── */
.cp-reactions[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    position: relative;
}

.cp-reaction[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    background: #FAFAFA;
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.cp-reaction:hover[b-iekg3i95wf] {
    border-color: #6DC7D0;
    background: #F0FAFB;
}

.cp-reaction.mine[b-iekg3i95wf] {
    border-color: #6DC7D0;
    background: rgba(109, 199, 208, 0.1);
}

.cp-reaction .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 14px;
}

.cp-reaction-add[b-iekg3i95wf] {
    border-style: dashed;
    color: var(--text-muted, #8B9098);
}

.cp-reaction-add:hover[b-iekg3i95wf] {
    color: #6DC7D0;
}

.cp-emoji-picker[b-iekg3i95wf] {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cp-emoji-pick[b-iekg3i95wf] {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}

.cp-emoji-pick:hover[b-iekg3i95wf] {
    background: #F0F8F9;
}

.cp-emoji-pick .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 18px;
    color: var(--text-secondary, #5C6068);
}

/* ─── Thread ─────────────────────────────────────────────────────────── */
.cp-thread[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-top: 6px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    color: #6DC7D0;
    font-weight: 600;
    transition: background 0.12s;
}

.cp-thread:hover[b-iekg3i95wf] {
    background: rgba(109, 199, 208, 0.08);
}

.cp-thread .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 14px;
}

.cp-thread-count[b-iekg3i95wf] {
    color: #6DC7D0;
}

.cp-thread-last[b-iekg3i95wf] {
    color: var(--text-muted, #8B9098);
    font-weight: 400;
}

.cp-thread-panel[b-iekg3i95wf] {
    margin-top: 8px;
    padding: 12px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid #F0F0F0;
}

.cp-thread-empty[b-iekg3i95wf] {
    font-size: 0.82rem;
    color: var(--text-muted, #8B9098);
    padding: 8px;
}

.cp-reply[b-iekg3i95wf] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.cp-reply-composer[b-iekg3i95wf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #F0F0F0;
}

.cp-reply-input[b-iekg3i95wf] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.cp-reply-input:focus[b-iekg3i95wf] {
    border-color: #6DC7D0;
}

.cp-reply-send[b-iekg3i95wf] {
    background: #6DC7D0;
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
    transition: background 0.12s;
}

.cp-reply-send:hover:not(:disabled)[b-iekg3i95wf] {
    background: #3A8F91;
}

.cp-reply-send:disabled[b-iekg3i95wf] {
    background: #E0E0E0;
    cursor: default;
}

.cp-reply-send .material-symbols-rounded[b-iekg3i95wf] {
    font-size: 16px;
}

/* ─── Skeleton ───────────────────────────────────────────────────────── */
.skeleton[b-iekg3i95wf] {
    background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
    background-size: 200% 100%;
    animation: sk-shimmer-b-iekg3i95wf 1.5s infinite;
    border-radius: 4px;
}

@keyframes sk-shimmer-b-iekg3i95wf {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sk-avatar[b-iekg3i95wf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 10px;
}

.sk-h-16[b-iekg3i95wf] { height: 16px; }
.sk-h-12[b-iekg3i95wf] { height: 12px; }
.sk-h-10[b-iekg3i95wf] { height: 10px; }
.sk-w-90[b-iekg3i95wf] { width: 90%; }
.sk-w-75[b-iekg3i95wf] { width: 75%; }
.sk-w-50[b-iekg3i95wf] { width: 50%; }
/* /Components/Chat/Composer.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Composer del Chat
   ──────────────────────────────────────────────────────────────────── */

.cmp-wrap[b-r60s2hhebk] {
    --teal:        #6DC7D0;
    --teal-dark:   #4BA8AA;
    --teal-darker: #2E7F82;
    --teal-soft:   #E8F4F8;
    --border:      #EAEEF0;
    --border-strong: #D8DEE1;
    --text:        #1A2B2D;
    --text-muted:  #5A6B6E;
    --text-dim:    #8A9699;
    --hover:       #F5F8F9;
    --main-bg:     #FFFFFF;
    --main-subtle: #FAFBFC;

    padding: 0 24px 20px;
    background: var(--main-bg);
    position: relative;
    flex-shrink: 0;
    font-family: var(--font-sans);
    color: var(--text);
}

.cmp[b-r60s2hhebk] {
    border: 1.5px solid var(--teal-dark);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 2px 14px rgba(75, 168, 170, 0.12);
    overflow: visible;
    position: relative;
}

.cmp-channel-hint[b-r60s2hhebk] {
    padding: 6px 14px 0;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmp-channel-hint .material-icons[b-r60s2hhebk] { font-size: 13px; }

.cmp-hash[b-r60s2hhebk] {
    font-family: var(--font-mono);
    color: var(--text);
    font-weight: 600;
}

.cmp-input[b-r60s2hhebk] {
    padding: 10px 14px 8px;
    min-height: 52px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    outline: none;
}

.cmp-typed[b-r60s2hhebk] { background: transparent; }

.cmp-at[b-r60s2hhebk] {
    color: var(--teal-darker);
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--teal-soft);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(75, 168, 170, 0.3);
}

.cmp-cursor[b-r60s2hhebk] {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: var(--teal-dark);
    vertical-align: middle;
    animation: cmp-blink-b-r60s2hhebk 1s infinite;
    margin-left: 1px;
}

@keyframes cmp-blink-b-r60s2hhebk {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* === Toolbar === */
.cmp-toolbar[b-r60s2hhebk] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-top: 1px solid var(--border);
}

.cmp-tb-btn[b-r60s2hhebk] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-muted);
    transition: background 0.12s;
    border: none;
    background: transparent;
}

.cmp-tb-btn:hover[b-r60s2hhebk] { background: var(--hover); color: var(--text); }
.cmp-tb-btn.active[b-r60s2hhebk] { background: var(--teal-soft); color: var(--teal-darker); }
.cmp-tb-btn .material-icons[b-r60s2hhebk] { font-size: 18px; }

.cmp-tb-divider[b-r60s2hhebk] {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

.cmp-send-btn[b-r60s2hhebk] {
    margin-left: auto;
    padding: 7px 14px;
    background: var(--teal-dark);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.cmp-send-btn:hover[b-r60s2hhebk] { background: var(--teal-darker); }
.cmp-send-btn .material-icons[b-r60s2hhebk] { font-size: 15px; }

/* ────────────────────────────────────────────────────────────────────
   Mention popover
   ──────────────────────────────────────────────────────────────────── */

.cmp-popover[b-r60s2hhebk] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    width: 440px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(16, 39, 42, 0.18), 0 2px 8px rgba(16, 39, 42, 0.08);
    overflow: hidden;
    z-index: 10;
}

.cmp-popover-header[b-r60s2hhebk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(to right, #F4FAFB, white);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmp-hint[b-r60s2hhebk] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--text-dim);
}

.cmp-popover-header kbd[b-r60s2hhebk],
.cmp-popover-footer kbd[b-r60s2hhebk],
.cmp-channel-hint kbd[b-r60s2hhebk] {
    font-family: var(--font-mono);
    font-size: 10px;
    background: #FFFFFF;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border-strong);
    color: var(--text);
    margin: 0 1px;
}

.cmp-popover-group-label[b-r60s2hhebk] {
    padding: 8px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    background: var(--main-subtle);
}

.cmp-popover-item[b-r60s2hhebk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    font-family: inherit;
}

.cmp-popover-item:hover[b-r60s2hhebk] { background: var(--hover); }

.cmp-popover-item.selected[b-r60s2hhebk] {
    background: var(--teal-soft);
    border-left-color: var(--teal-dark);
}

.cmp-popover-icon[b-r60s2hhebk] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.cmp-popover-icon.grupo[b-r60s2hhebk]  { background: linear-gradient(135deg, #4F8A4F, #2D5F2D); }
.cmp-popover-icon.grado[b-r60s2hhebk]  { background: linear-gradient(135deg, #7B6BB8, #443B7A); }
.cmp-popover-icon.alumno[b-r60s2hhebk] { background: linear-gradient(135deg, #D69B57, #A06D2B); }

.cmp-popover-item-body[b-r60s2hhebk] { flex: 1; min-width: 0; }

.cmp-popover-item-name[b-r60s2hhebk] {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.cmp-popover-item-name.is-alumno[b-r60s2hhebk] {
    font-family: var(--font-sans);
    font-weight: 600;
}

.cmp-match[b-r60s2hhebk] {
    background: #FFE68A;
    color: #4A3500;
    padding: 0 2px;
    border-radius: 2px;
}

.cmp-popover-item-desc[b-r60s2hhebk] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-popover-item-count[b-r60s2hhebk] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--teal-darker);
    background: var(--teal-soft);
    padding: 2px 7px;
    border-radius: 10px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.cmp-popover-footer[b-r60s2hhebk] {
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    background: var(--main-subtle);
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Modo editable real ─────────────────────────────────────────── */
.cmp-input-real[b-r60s2hhebk] {
    width: 100%;
    min-height: 60px;
    max-height: 200px;
    padding: 10px 12px;
    border: 1px solid #2A3640;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #E5E7EB;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease;
}

.cmp-input-real:focus[b-r60s2hhebk] {
    border-color: var(--brand-teal);
    background: rgba(255,255,255,0.06);
}

.cmp-input-real[b-r60s2hhebk]::placeholder {
    color: rgba(229, 231, 235, 0.35);
}

.cmp-input-real:disabled[b-r60s2hhebk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cmp-send-btn:disabled[b-r60s2hhebk] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* /Components/Chat/PhaseSeparator.razor.rz.scp.css */
.phase-sep[b-mo63zc6if2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    margin: 8px 0;
}

.phase-line[b-mo63zc6if2] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6DC7D0, #3A8F91);
    border-radius: 1px;
}

.phase-sep .phase-line:first-child[b-mo63zc6if2] {
    background: linear-gradient(90deg, transparent, #6DC7D0);
}

.phase-sep .phase-line:last-child[b-mo63zc6if2] {
    background: linear-gradient(90deg, #3A8F91, #6DC7D0, transparent);
}

.phase-pill[b-mo63zc6if2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: linear-gradient(135deg, #6DC7D0 0%, #3A8F91 100%);
    border-radius: 20px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(58, 143, 145, 0.25);
}

.phase-flag[b-mo63zc6if2] {
    font-size: 14px;
}

.phase-text[b-mo63zc6if2] {
    text-transform: uppercase;
}
/* /Components/Chat/PinnedBanner.razor.rz.scp.css */
.pinned-banner[b-5ksbvrttb0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(90deg, #FDF8E8 0%, #FFFDF5 100%);
    border-bottom: 1px solid #E8DFC0;
    font-size: 0.85rem;
    color: #5C4A1E;
}

.pinned-icon[b-5ksbvrttb0] {
    font-size: 16px;
    color: #B8860B;
    transform: rotate(45deg);
}

.pinned-label[b-5ksbvrttb0] {
    font-weight: 600;
    color: #B8860B;
    white-space: nowrap;
}

.pinned-preview[b-5ksbvrttb0] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5C4A1E;
}

.pinned-extra[b-5ksbvrttb0] {
    background: none;
    border: none;
    color: #B8860B;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.pinned-extra:hover[b-5ksbvrttb0] {
    background: rgba(184, 134, 11, 0.1);
}

.pinned-close[b-5ksbvrttb0] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    color: #8B9098;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

.pinned-close:hover[b-5ksbvrttb0] {
    background: rgba(0, 0, 0, 0.06);
    color: #5C6068;
}

.pinned-close .material-symbols-rounded[b-5ksbvrttb0] {
    font-size: 16px;
}
/* /Components/Chat/SlashCommandPopover.razor.rz.scp.css */
.slash-popover[b-6ollnk2qc0] {
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.slash-header[b-6ollnk2qc0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #F0F0F0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5C6068;
}

.slash-header .material-symbols-rounded[b-6ollnk2qc0] {
    font-size: 16px;
    color: #8B9098;
}

.slash-list[b-6ollnk2qc0] {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
}

.slash-empty[b-6ollnk2qc0] {
    padding: 16px;
    text-align: center;
    color: #8B9098;
    font-size: 0.85rem;
}

.slash-item[b-6ollnk2qc0] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.slash-item:hover[b-6ollnk2qc0],
.slash-item.active[b-6ollnk2qc0] {
    background: #F0F8F9;
}

.slash-item-icon[b-6ollnk2qc0] {
    font-size: 18px;
    color: #6DC7D0;
    flex-shrink: 0;
}

.slash-item-body[b-6ollnk2qc0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.slash-item-name[b-6ollnk2qc0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1A1C1F;
}

.slash-item-desc[b-6ollnk2qc0] {
    font-size: 0.78rem;
    color: #8B9098;
}

.slash-footer[b-6ollnk2qc0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid #F0F0F0;
    font-size: 0.72rem;
    color: #8B9098;
}

.slash-footer kbd[b-6ollnk2qc0] {
    display: inline-block;
    padding: 1px 5px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: inherit;
}
/* /Components/Chat/SystemMessage.razor.rz.scp.css */
.sys-msg[b-hvc8rn57mq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin: 4px 0;
    font-size: 0.82rem;
    color: var(--text-secondary, #5C6068);
}

.sys-icon[b-hvc8rn57mq] {
    font-size: 16px;
    flex-shrink: 0;
}

.sys-text[b-hvc8rn57mq] {
    flex: 1;
    font-style: italic;
}

.sys-time[b-hvc8rn57mq] {
    font-size: 0.75rem;
    color: var(--text-muted, #8B9098);
    white-space: nowrap;
}

/* Variantes de color */
.sys-edit .sys-icon[b-hvc8rn57mq] {
    color: #6DC7D0;
}

.sys-member .sys-icon[b-hvc8rn57mq] {
    color: #7C4DFF;
}

.sys-task .sys-icon[b-hvc8rn57mq] {
    color: #4CAF50;
}

.sys-evidence .sys-icon[b-hvc8rn57mq] {
    color: #FF9800;
}

.sys-gold .sys-icon[b-hvc8rn57mq] {
    color: #B8860B;
}

.sys-default .sys-icon[b-hvc8rn57mq] {
    color: #8B9098;
}
/* /Components/Chat/ThreadView.razor.rz.scp.css */
.thread-view[b-kcobc93cd6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

.thread-header[b-kcobc93cd6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #F0F0F0;
}

.thread-title[b-kcobc93cd6] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1A1C1F;
}

.thread-close[b-kcobc93cd6] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: #8B9098;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.thread-close:hover[b-kcobc93cd6] {
    background: #F5F5F5;
    color: #5C6068;
}

.thread-original[b-kcobc93cd6] {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #F0F0F0;
}

.thread-avatar[b-kcobc93cd6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #6DC7D0;
    flex-shrink: 0;
}

.thread-avatar.sm[b-kcobc93cd6] {
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
}

.thread-original-body[b-kcobc93cd6] {
    flex: 1;
    min-width: 0;
}

.thread-original-header[b-kcobc93cd6] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.thread-author[b-kcobc93cd6] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1A1C1F;
}

.thread-author.is-lider[b-kcobc93cd6] {
    color: #B8860B;
}

.thread-time[b-kcobc93cd6] {
    font-size: 0.72rem;
    color: #8B9098;
}

.thread-original-text[b-kcobc93cd6] {
    font-size: 0.88rem;
    color: #1A1C1F;
    line-height: 1.5;
}

.thread-separator[b-kcobc93cd6] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8B9098;
    border-bottom: 1px solid #F0F0F0;
}

.thread-replies[b-kcobc93cd6] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thread-reply[b-kcobc93cd6] {
    display: flex;
    gap: 8px;
}

.thread-reply-body[b-kcobc93cd6] {
    flex: 1;
    min-width: 0;
}

.thread-reply-header[b-kcobc93cd6] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.thread-reply-text[b-kcobc93cd6] {
    font-size: 0.85rem;
    color: #1A1C1F;
    line-height: 1.45;
}

.thread-composer[b-kcobc93cd6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #F0F0F0;
}

.thread-input[b-kcobc93cd6] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #F9F9F9;
    outline: none;
    transition: border-color 0.15s;
}

.thread-input:focus[b-kcobc93cd6] {
    border-color: #6DC7D0;
    background: #fff;
}

.thread-send[b-kcobc93cd6] {
    background: #6DC7D0;
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
    transition: background 0.15s;
}

.thread-send:hover:not(:disabled)[b-kcobc93cd6] {
    background: #3A8F91;
}

.thread-send:disabled[b-kcobc93cd6] {
    background: #E0E0E0;
    cursor: default;
}

.thread-send .material-symbols-rounded[b-kcobc93cd6] {
    font-size: 18px;
}
/* /Components/Clases/SelectorDisciplina.razor.rz.scp.css */
.selector-disciplina[b-7sj4eu986q] {
    display: flex;
    flex-direction: column;
}

.selector-disciplina__label[b-7sj4eu986q] {
    font-size: 12px;
    color: #6B6354;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 500;
}

.selector-disciplina__select[b-7sj4eu986q] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D8D2C4;
    border-radius: 6px;
    background: #FFF;
    font-size: 14px;
    font-family: inherit;
    color: #2E2A24;
}

.selector-disciplina__select:focus[b-7sj4eu986q] {
    outline: none;
    border-color: #6B6354;
    box-shadow: 0 0 0 3px rgba(107, 99, 84, 0.12);
}
/* /Components/Clases/TarjetaClase.razor.rz.scp.css */
.tarjeta-clase[b-r68at96bob] {
    border-radius: 8px;
    padding: 14px 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.tarjeta-clase:hover[b-r68at96bob] {
    transform: translateY(-1px);
}

.tarjeta-clase--seleccionada[b-r68at96bob] {
    box-shadow: 0 0 0 2px var(--acento);
    transform: translateY(-1px);
}

.tarjeta-clase__header[b-r68at96bob] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-bottom: 4px;
}

.tarjeta-clase__header[b-r68at96bob]  .material-symbols-rounded {
    font-size: 14px !important;
}

.tarjeta-clase__nombre[b-r68at96bob] {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}

.tarjeta-clase__cta[b-r68at96bob] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.65;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    margin-top: 4px;
}

.tarjeta-clase__cta[b-r68at96bob]  .material-symbols-rounded {
    font-size: 13px !important;
}

/* ============================================================
   MODO COMPACTO — densidad alta para Mis Clases hub
   ============================================================ */

.tarjeta-clase--compacta[b-r68at96bob] {
    border-radius: 0 4px 4px 0;
    padding: 4px 8px 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    min-width: 0;
    min-height: 0;
}

.tarjeta-clase--compacta:hover[b-r68at96bob] {
    transform: translateY(-1px);
}

.tarjeta-clase--compacta.tarjeta-clase--seleccionada[b-r68at96bob] {
    box-shadow: 0 0 0 2px var(--acento);
    transform: translateY(-1px);
}

.tarjeta-clase__icono-box[b-r68at96bob] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tarjeta-clase__icono-box[b-r68at96bob]  .material-symbols-rounded {
    font-size: 13px !important;
    line-height: 1 !important;
}

.tarjeta-clase__nombre-compacto[b-r68at96bob] {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
/* /Components/Dashboard/DashboardAvisoRow.razor.rz.scp.css */
.aviso-row[b-pzqsepvhgk] {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
    align-items: center;
}

.aviso-row:hover[b-pzqsepvhgk] {
    border-color: var(--border-med);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.aviso-row:focus-visible[b-pzqsepvhgk] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.aviso-row.unread[b-pzqsepvhgk] {
    border-left: 3px solid var(--pin-gold);
    padding-left: 11px;
    background: linear-gradient(90deg, rgba(184, 134, 11, 0.04) 0%, var(--bg-panel) 30%);
}

.aviso-icon[b-pzqsepvhgk] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.aviso-icon .material-symbols-rounded[b-pzqsepvhgk] {
    font-size: 19px !important;
    font-variation-settings: 'FILL' 1 !important;
}

.aviso-icon.oficio[b-pzqsepvhgk]       { background: linear-gradient(135deg, var(--pin-gold), #92400E); }
.aviso-icon.informativo[b-pzqsepvhgk]  { background: linear-gradient(135deg, var(--info), #1E4A6F); }

.aviso-body[b-pzqsepvhgk] { min-width: 0; }

.aviso-head[b-pzqsepvhgk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.aviso-title[b-pzqsepvhgk] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.aviso-badge[b-pzqsepvhgk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    background: rgba(184, 134, 11, 0.12);
    color: var(--pin-gold);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.aviso-badge .material-symbols-rounded[b-pzqsepvhgk] {
    font-size: 11px !important;
    font-variation-settings: 'FILL' 1 !important;
}

.aviso-meta[b-pzqsepvhgk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.aviso-meta-divider[b-pzqsepvhgk] { color: var(--text-muted); }

.aviso-actions[b-pzqsepvhgk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aviso-unread-dot[b-pzqsepvhgk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pin-gold);
}

.aviso-arrow[b-pzqsepvhgk] {
    font-size: 18px !important;
    color: var(--text-muted);
}

.aviso-row:hover .aviso-arrow[b-pzqsepvhgk] { color: var(--brand-teal); }
/* /Components/Dashboard/DashboardMencionRow.razor.rz.scp.css */
.mention-row[b-vpwfftbmn9] {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
    align-items: flex-start;
}

.mention-row:hover[b-vpwfftbmn9] {
    border-color: var(--border-med);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.mention-row:focus-visible[b-vpwfftbmn9] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.mention-avatar[b-vpwfftbmn9] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    flex-shrink: 0;
}

.mention-source-badge[b-vpwfftbmn9] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid var(--bg-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.mention-source-badge.chat[b-vpwfftbmn9]    { background: var(--brand-teal-dark); }
.mention-source-badge.project[b-vpwfftbmn9] { background: var(--t-nem); }

.mention-source-badge .material-symbols-rounded[b-vpwfftbmn9] {
    font-size: 10px !important;
    font-variation-settings: 'FILL' 1 !important;
}

.mention-body[b-vpwfftbmn9] { min-width: 0; }

.mention-head[b-vpwfftbmn9] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.mention-sender[b-vpwfftbmn9] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.mention-context-tag[b-vpwfftbmn9] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.mention-context-tag.chat[b-vpwfftbmn9]     { background: rgba(75, 168, 170, 0.15); color: var(--brand-teal-deep); }
.mention-context-tag.proyecto[b-vpwfftbmn9] { background: rgba(217, 119, 6, 0.12);  color: var(--t-nem); }

.mention-fragment[b-vpwfftbmn9] {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.mention-meta[b-vpwfftbmn9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.mention-time[b-vpwfftbmn9] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.mention-arrow[b-vpwfftbmn9] {
    font-size: 18px !important;
    color: var(--text-muted);
}

.mention-row:hover .mention-arrow[b-vpwfftbmn9] { color: var(--brand-teal); }
/* /Components/Dashboard/DashboardTareaRow.razor.rz.scp.css */
.task-row[b-h93gh8vmvg] {
    display: grid;
    grid-template-columns: 22px 1fr 18px;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
    align-items: center;
}

.task-row:hover[b-h93gh8vmvg] {
    border-color: var(--border-med);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.task-row:focus-visible[b-h93gh8vmvg] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.task-check[b-h93gh8vmvg] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-med);
    background: var(--bg-panel);
}

.task-info[b-h93gh8vmvg] { min-width: 0; }

.task-row1[b-h93gh8vmvg] { margin-bottom: 4px; }

.task-title[b-h93gh8vmvg] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.task-row2[b-h93gh8vmvg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.task-project[b-h93gh8vmvg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-project .material-symbols-rounded[b-h93gh8vmvg] {
    font-size: 11px !important;
    font-variation-settings: 'FILL' 1 !important;
}

.task-project.nem[b-h93gh8vmvg]      { background: rgba(217, 119, 6, 0.12);  color: var(--t-nem); }
.task-project.pmc[b-h93gh8vmvg]      { background: rgba(124, 58, 237, 0.12); color: var(--t-pmc); }
.task-project.evento[b-h93gh8vmvg]   { background: rgba(219, 39, 119, 0.12); color: var(--t-evento); }
.task-project.concurso[b-h93gh8vmvg] { background: rgba(220, 38, 38, 0.12);  color: var(--t-concurso); }
.task-project.proceso[b-h93gh8vmvg]  { background: rgba(107, 114, 128, 0.15); color: #4B5563; }

.task-due[b-h93gh8vmvg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.task-due .material-symbols-rounded[b-h93gh8vmvg] { font-size: 12px !important; }

.task-due.urgent[b-h93gh8vmvg] { color: var(--danger); }
.task-due.soon[b-h93gh8vmvg]   { color: var(--warning); }
.task-due.ok[b-h93gh8vmvg]     { color: var(--text-secondary); }

.task-affecting[b-h93gh8vmvg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: rgba(110, 198, 200, 0.13);
    color: var(--brand-teal-deep);
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
}

.task-affecting .material-symbols-rounded[b-h93gh8vmvg] { font-size: 11px !important; }

.task-arrow[b-h93gh8vmvg] {
    font-size: 18px !important;
    color: var(--text-muted);
}

.task-row:hover .task-arrow[b-h93gh8vmvg] { color: var(--brand-teal); }
/* /Components/Dialogs/EditarReporteDrawer.razor.rz.scp.css */
.erd-overlay[b-x88rte4o8x] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
}

.erd-drawer[b-x88rte4o8x] {
    width: 60%;
    max-width: 640px;
    background: white;
    display: flex;
    flex-direction: column;
    animation: erd-slide-in-b-x88rte4o8x 0.25s ease-out;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}

@keyframes erd-slide-in-b-x88rte4o8x {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (max-width: 767.98px) {
    .erd-drawer[b-x88rte4o8x] {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================================================
   HEADER
   ======================================================================== */

.erd-header[b-x88rte4o8x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.erd-header-main[b-x88rte4o8x] {
    display: flex;
    gap: 11px;
    align-items: center;
}

.erd-icon[b-x88rte4o8x] {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #E1F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.erd-icon .material-icons[b-x88rte4o8x] {
    font-size: 19px;
    color: #0F6E56;
}

.erd-header h2[b-x88rte4o8x] {
    font-size: 16px;
    color: #444;
    margin: 0 0 3px;
    font-weight: 500;
}

.erd-subtitle[b-x88rte4o8x] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
}

.erd-grade-badge[b-x88rte4o8x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 500;
}

.erd-close[b-x88rte4o8x] {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #F5F7F9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.erd-close .material-icons[b-x88rte4o8x] { font-size: 16px; color: #888; }

/* ========================================================================
   BODY
   ======================================================================== */

.erd-body[b-x88rte4o8x] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.erd-field[b-x88rte4o8x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.erd-field > label[b-x88rte4o8x] {
    font-size: 10px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.erd-field-header[b-x88rte4o8x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.erd-count-badge[b-x88rte4o8x] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 500;
}

.erd-count-badge.leve[b-x88rte4o8x]  { background: #FAEEDA; color: #854F0B; }
.erd-count-badge.grave[b-x88rte4o8x] { background: #FCEBEB; color: #A32D2D; }

.erd-char-count[b-x88rte4o8x] { font-size: 10px; color: #888; }

.erd-loading-inline[b-x88rte4o8x] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px;
    color: #888;
    font-size: 12px;
    justify-content: center;
}

.erd-loading-inline .material-icons[b-x88rte4o8x] { font-size: 14px; }

/* ========================================================================
   STUDENT (read-only)
   ======================================================================== */

.erd-student-readonly[b-x88rte4o8x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: #F5F7F9;
    border-radius: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
}

.erd-avatar[b-x88rte4o8x] {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.erd-student-info[b-x88rte4o8x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.erd-student-info > div:first-child[b-x88rte4o8x] {
    font-size: 13px;
    color: #444;
    font-weight: 500;
}

.erd-student-hint[b-x88rte4o8x] {
    font-size: 10px;
    color: #888;
    font-style: italic;
}

/* ========================================================================
   FECHA
   ======================================================================== */

.erd-date-row[b-x88rte4o8x] {
    display: flex;
    gap: 6px;
}

.erd-date-row input[b-x88rte4o8x] {
    padding: 7px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 7px;
    font-size: 12px;
    color: #444;
    font-family: inherit;
    outline: none;
    background: white;
}

.erd-date-row input:focus[b-x88rte4o8x] { border-color: #4BA8AA; }
.erd-date-row input[type="date"][b-x88rte4o8x] { flex: 1.4; }
.erd-date-row input[type="time"][b-x88rte4o8x] { flex: 1; }

/* ========================================================================
   CHIPS DE INCIDENCIAS
   ======================================================================== */

.erd-chips-wrap[b-x88rte4o8x] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.erd-chip[b-x88rte4o8x] {
    padding: 5px 11px;
    border-radius: 99px;
    background: white;
    border: 1px solid #DDD;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.erd-chip.leve:hover[b-x88rte4o8x] {
    border-color: #FAC775;
    color: #854F0B;
}

.erd-chip.grave:hover[b-x88rte4o8x] {
    border-color: #F0B5B5;
    color: #A32D2D;
}

.erd-chip.leve.active[b-x88rte4o8x] {
    background: #FAEEDA;
    border-color: #BA7517;
    color: #854F0B;
    font-weight: 500;
}

.erd-chip.grave.active[b-x88rte4o8x] {
    background: #FCEBEB;
    border-color: #A32D2D;
    color: #A32D2D;
    font-weight: 500;
}

.erd-empty[b-x88rte4o8x] {
    font-size: 11px;
    color: #AAA;
    padding: 5px 0;
}

/* ========================================================================
   TEXTAREA
   ======================================================================== */

.erd-textarea[b-x88rte4o8x] {
    width: 100%;
    min-height: 90px;
    padding: 9px 11px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 7px;
    font-size: 12px;
    color: #444;
    font-family: inherit;
    background: #F9F9F9;
    outline: none;
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
}

.erd-textarea:focus[b-x88rte4o8x] { border-color: #4BA8AA; }
.erd-textarea[b-x88rte4o8x]::placeholder { color: #AAA; }

/* ========================================================================
   FOOTER
   ======================================================================== */

.erd-footer[b-x88rte4o8x] {
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 12px 18px;
    display: flex;
    gap: 8px;
    background: white;
}

.erd-btn-secondary[b-x88rte4o8x],
.erd-btn-primary[b-x88rte4o8x] {
    padding: 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.erd-btn-secondary[b-x88rte4o8x] {
    flex: 1;
    background: white;
    color: #888;
    border: 1px solid #DDD;
}

.erd-btn-secondary:hover[b-x88rte4o8x] { background: #F5F7F9; }

.erd-btn-primary[b-x88rte4o8x] {
    flex: 2;
    background: #0F6E56;
    color: white;
    border: none;
}

.erd-btn-primary:hover:not(:disabled)[b-x88rte4o8x] { background: #0B5543; }
.erd-btn-primary:disabled[b-x88rte4o8x] { background: #B5D4C7; cursor: not-allowed; }
.erd-btn-primary .material-icons[b-x88rte4o8x] { font-size: 14px; }

.erd-spinning[b-x88rte4o8x] { animation: erd-spin-b-x88rte4o8x 1s linear infinite; }
@keyframes erd-spin-b-x88rte4o8x {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* /Components/Dialogs/SelectorAlumnosDialog.razor.rz.scp.css */
.sa-overlay[b-44bu3zv33m] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sa-dialog[b-44bu3zv33m] {
    background: white;
    border-radius: 14px;
    padding: 18px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.sa-header[b-44bu3zv33m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}

.sa-title[b-44bu3zv33m] {
    font-size: 15px;
    font-weight: 500;
    color: #444;
    margin-bottom: 4px;
}

.sa-subtitle[b-44bu3zv33m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
}

.sa-grade-badge[b-44bu3zv33m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
}

.sa-close[b-44bu3zv33m] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F5F7F9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.sa-close .material-icons[b-44bu3zv33m] {
    font-size: 15px;
    color: #888;
}

.sa-actions-row[b-44bu3zv33m] {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.sa-search[b-44bu3zv33m] {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F5F7F9;
    border-radius: 7px;
    padding: 7px 11px;
}

.sa-search .material-icons[b-44bu3zv33m] {
    font-size: 14px;
    color: #AAA;
}

.sa-search input[b-44bu3zv33m] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: #444;
    font-family: inherit;
    min-width: 0;
}

.sa-count-badge[b-44bu3zv33m] {
    font-size: 10px;
    color: #0F6E56;
    background: #E1F5EE;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 500;
}

.sa-btn-toggle[b-44bu3zv33m] {
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    background: white;
    border: 1px solid #DDD;
    color: #666;
    transition: all 0.15s ease;
}

.sa-btn-toggle:hover[b-44bu3zv33m] { background: #F5F7F9; }

.sa-btn-toggle.sa-btn-todos[b-44bu3zv33m] {
    background: rgba(109, 199, 208, 0.1);
    border-color: rgba(109, 199, 208, 0.3);
    color: #0F6E56;
}

.sa-btn-toggle.sa-btn-todos:hover[b-44bu3zv33m] { background: rgba(109, 199, 208, 0.2); }

.sa-btn-toggle .material-icons[b-44bu3zv33m] { font-size: 12px; }

.sa-hint[b-44bu3zv33m] {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #E1F5EE;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sa-hint .material-icons[b-44bu3zv33m] { font-size: 11px; color: #0F6E56; }
.sa-hint span:last-child[b-44bu3zv33m] { font-size: 10px; color: #0F6E56; }

.sa-student-list[b-44bu3zv33m] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.sa-student-row[b-44bu3zv33m] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sa-student-row:hover[b-44bu3zv33m] { background: rgba(109, 199, 208, 0.05); }
.sa-student-row.selected[b-44bu3zv33m] { background: rgba(75, 168, 170, 0.08); }

.sa-checkbox[b-44bu3zv33m] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #CCC;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-checkbox.checked[b-44bu3zv33m] {
    background: #4BA8AA;
    border-color: #4BA8AA;
}

.sa-checkbox.checked .material-icons[b-44bu3zv33m] {
    font-size: 12px;
    color: white;
}

.sa-avatar[b-44bu3zv33m] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    flex-shrink: 0;
}

.sa-name[b-44bu3zv33m] {
    flex: 1;
    font-size: 12px;
    color: #444;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-student-row.selected .sa-name[b-44bu3zv33m] { font-weight: 500; }

.sa-empty[b-44bu3zv33m] {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: #AAA;
}

.sa-actions[b-44bu3zv33m] {
    display: flex;
    gap: 8px;
}

.sa-btn-secondary[b-44bu3zv33m], .sa-btn-primary[b-44bu3zv33m] {
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.sa-btn-secondary[b-44bu3zv33m] {
    flex: 1;
    background: white;
    color: #888;
    border: 1px solid #DDD;
}

.sa-btn-secondary:hover[b-44bu3zv33m] { background: #F5F7F9; }

.sa-btn-primary[b-44bu3zv33m] {
    flex: 2;
    background: #4BA8AA;
    color: white;
    border: none;
}

.sa-btn-primary:hover[b-44bu3zv33m] { background: #3B8D8F; }
/* /Components/EvaluacionIndividualPanel.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   Evaluación individual — panel lateral (prefijo eip-)
   Sistema de diseño v2: tokens, Fraunces para números, gradiente teal.
   ════════════════════════════════════════════════════════════════════════ */

.eip-overlay[b-e7m3whincx] {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 31, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1099;
    animation: eip-fade-in 0.18s ease;
}

@@keyframes eip-fade-in { from[b-e7m3whincx] { opacity: 0; } to[b-e7m3whincx] { opacity: 1; } }

.eip-panel[b-e7m3whincx] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 480px;
    background: var(--bg);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -16px 0 40px rgba(26, 28, 31, 0.18);
    font-family: var(--font-sans);
    color: var(--text-primary);
    animation: eip-slide-in 0.28s cubic-bezier(0.32, 0.72, 0.32, 1);
}

@@keyframes eip-slide-in {
    from[b-e7m3whincx] { transform: translateX(100%); }
    to[b-e7m3whincx]   { transform: translateX(0); }
}

/* ── HEADER ──────────────────────────────────────────────────────── */
/* Header light theme — fondo crema, texto oscuro (matchea Mis Clases / Expediente). */
.eip-header[b-e7m3whincx] {
    background: var(--cream, #F4F0E6);
    padding: 16px 20px 18px;
    display: grid;
    grid-template-columns: 36px 44px 1fr auto;
    align-items: center;
    gap: 12px;
    color: var(--ink, #1A1D22);
    flex-shrink: 0;
    border-bottom: 1px solid var(--line, #E8E2D2);
}

.eip-close[b-e7m3whincx] {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink-2, #4A4F58);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    padding: 0;
}

.eip-close:hover[b-e7m3whincx] { background: rgba(0, 0, 0, 0.07); }
.eip-close .material-symbols-rounded[b-e7m3whincx] { font-size: 20px; }

.eip-avatar[b-e7m3whincx] {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6EC6C8, #2E8B92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.3px;
    box-shadow: 0 4px 12px rgba(46, 139, 146, 0.25);
}

.eip-id[b-e7m3whincx] {
    min-width: 0;
}

.eip-eyebrow[b-e7m3whincx] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--teal-deep, #2E8B92);
    font-weight: 700;
    margin-bottom: 2px;
}

.eip-name[b-e7m3whincx] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #1A1D22);
    letter-spacing: -0.2px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eip-promedio[b-e7m3whincx] {
    text-align: center;
    background: var(--paper, #FFFFFF);
    border: 1px solid var(--line, #E8E2D2);
    border-radius: 12px;
    padding: 6px 14px 7px;
    flex-shrink: 0;
    min-width: 64px;
    box-shadow: 0 1px 2px rgba(20, 22, 25, 0.04);
}

.eip-promedio-value[b-e7m3whincx] {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--teal-deep, #2E8B92);
    line-height: 1;
    letter-spacing: -0.5px;
}

.eip-promedio-label[b-e7m3whincx] {
    font-size: 9.5px;
    color: var(--ink-3, #7C828B);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;
    font-weight: 600;
}

/* ── BODY ────────────────────────────────────────────────────────── */
.eip-body[b-e7m3whincx] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 32px;
    background: var(--bg);
}

.eip-body[b-e7m3whincx]::-webkit-scrollbar { width: 8px; }
.eip-body[b-e7m3whincx]::-webkit-scrollbar-thumb {
    background: #C7C0B1;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ── LOADING ─────────────────────────────────────────────────────── */
.eip-loading[b-e7m3whincx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.eip-spin[b-e7m3whincx] {
    font-size: 32px !important;
    color: var(--brand-teal);
    animation: eip-rotate 1s linear infinite;
}

@@keyframes eip-rotate { to[b-e7m3whincx] { transform: rotate(360deg); } }

/* ── DONUTS ──────────────────────────────────────────────────────── */
.eip-donuts[b-e7m3whincx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.eip-donut-card[b-e7m3whincx] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease;
}

.eip-donut-card:hover[b-e7m3whincx] { border-color: var(--brand-teal); }

.eip-donut-wrap[b-e7m3whincx] {
    position: relative;
    width: 64px; height: 64px;
    flex-shrink: 0;
}

.eip-donut[b-e7m3whincx] {
    width: 64px; height: 64px;
    transform: rotate(-90deg);
}

.eip-donut-pct[b-e7m3whincx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

.eip-donut-pct span[b-e7m3whincx] {
    font-size: 9px;
    color: var(--text-muted);
    margin-left: 1px;
    margin-top: 4px;
    font-weight: 500;
}

.eip-donut-info[b-e7m3whincx] {
    min-width: 0;
    flex: 1;
}

.eip-donut-title[b-e7m3whincx] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 6px;
}

.eip-donut-detail[b-e7m3whincx] {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.eip-dot[b-e7m3whincx] {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 1px;
}

.eip-dot-teal[b-e7m3whincx]    { background: var(--brand-teal); }
.eip-dot-amber[b-e7m3whincx]   { background: var(--warning); }
.eip-dot-success[b-e7m3whincx] { background: var(--success); }
.eip-dot-danger[b-e7m3whincx]  { background: var(--danger); }

/* ── METRICS (4 tiles) ───────────────────────────────────────────── */
.eip-metrics[b-e7m3whincx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.eip-metric[b-e7m3whincx] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 10px 8px 9px;
    text-align: center;
    transition: transform 0.15s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.eip-metric:hover[b-e7m3whincx] { transform: translateY(-1px); }

.eip-metric-icon[b-e7m3whincx] {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-bottom: 5px;
}

.eip-metric-icon .material-symbols-rounded[b-e7m3whincx] { font-size: 16px !important; }

.eip-metric-num[b-e7m3whincx] {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.4px;
    color: var(--text-primary);
}

.eip-metric-lbl[b-e7m3whincx] {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 700;
}

.eip-metric-teal[b-e7m3whincx]   { background: linear-gradient(180deg, #E8F4F8 0%, var(--bg-panel) 70%); border-color: rgba(110, 198, 200, 0.3); }
.eip-metric-teal   .eip-metric-icon[b-e7m3whincx] { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }

.eip-metric-amber[b-e7m3whincx]  { background: linear-gradient(180deg, #FEF3C7 0%, var(--bg-panel) 70%); border-color: rgba(186, 117, 23, 0.3); }
.eip-metric-amber  .eip-metric-icon[b-e7m3whincx] { background: linear-gradient(135deg, #F59E0B, #D97706); }

.eip-metric-violet[b-e7m3whincx] { background: linear-gradient(180deg, #EDE9FE 0%, var(--bg-panel) 70%); border-color: rgba(124, 58, 237, 0.3); }
.eip-metric-violet .eip-metric-icon[b-e7m3whincx] { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }

.eip-metric-danger[b-e7m3whincx] { background: linear-gradient(180deg, #FEE2E2 0%, var(--bg-panel) 70%); border-color: rgba(163, 45, 45, 0.3); }
.eip-metric-danger .eip-metric-icon[b-e7m3whincx] { background: linear-gradient(135deg, #DC2626, #991B1B); }

/* ── SECTION LABEL ───────────────────────────────────────────────── */
.eip-section-label[b-e7m3whincx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 4px 2px 10px;
}

.eip-section-label .material-symbols-rounded[b-e7m3whincx] {
    font-size: 14px !important;
    color: var(--brand-teal);
}

/* ── CRITERIO ────────────────────────────────────────────────────── */
.eip-criterio[b-e7m3whincx] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.eip-criterio-head[b-e7m3whincx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-panel) 100%);
    border-bottom: 1px solid var(--border-soft);
}

.eip-criterio-name[b-e7m3whincx] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.eip-criterio-badges[b-e7m3whincx] {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.eip-badge[b-e7m3whincx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    letter-spacing: 0;
}

.eip-badge .material-symbols-rounded[b-e7m3whincx] { font-size: 12px !important; }

.eip-badge-teal[b-e7m3whincx] {
    background: rgba(110, 198, 200, 0.14);
    color: var(--brand-teal-deep);
}

.eip-badge-violet[b-e7m3whincx] {
    background: rgba(124, 58, 237, 0.12);
    color: var(--t-pmc);
}

/* ── ACTIVIDADES ─────────────────────────────────────────────────── */
.eip-acts[b-e7m3whincx] {
    padding: 4px 0;
}

.eip-act[b-e7m3whincx] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.12s ease;
}

.eip-act:last-child[b-e7m3whincx] { border-bottom: none; }
.eip-act:hover[b-e7m3whincx]      { background: var(--bg-cream); }

.eip-act-name[b-e7m3whincx] {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.eip-grades[b-e7m3whincx] {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

/* Grade buttons (5 = no calificado, 6-10 = nota) */
.eip-grade[b-e7m3whincx] {
    width: 28px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    padding: 0;
    line-height: 1;
}

.eip-grade:hover:not(.selected)[b-e7m3whincx] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.eip-grade.selected[b-e7m3whincx] {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.4);
}

.eip-grade.selected.ungraded[b-e7m3whincx] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    border-color: #D97706;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@@media (max-width: 1024px) {
    .eip-panel[b-e7m3whincx] { width: 440px; }
}

@@media (max-width: 768px) {
    .eip-panel[b-e7m3whincx] { width: 100%; }
    .eip-header[b-e7m3whincx] {
        grid-template-columns: 36px 40px 1fr auto;
        padding: 14px 16px 16px;
    }
    .eip-avatar[b-e7m3whincx] { width: 40px; height: 40px; }
    .eip-name[b-e7m3whincx] { font-size: 15px; }
    .eip-promedio-value[b-e7m3whincx] { font-size: 22px; }
    .eip-body[b-e7m3whincx] { padding: 14px 14px 28px; }
    .eip-grade[b-e7m3whincx] { width: 26px; height: 24px; }
}
/* /Components/FormatToolbar.razor.rz.scp.css */
.format-toolbar[b-y0h0zf1wsm] {
    position: absolute;
    background: white;
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: 0 4px 12px rgba(20,22,25,0.10),
                0 16px 40px rgba(20,22,25,0.14);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 4px;
    user-select: none;
    font-family: 'Figtree', sans-serif;
}

.ft-row[b-y0h0zf1wsm] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ft-btn[b-y0h0zf1wsm] {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13px;
    color: #141619;
    transition: background 0.1s;
    gap: 1px;
}
.ft-btn:hover[b-y0h0zf1wsm] { background: #F4F0E6; }
.ft-btn.active[b-y0h0zf1wsm] {
    background: rgba(45, 127, 249, 0.15);
    color: #2D7FF9;
}

.ft-icon-btn[b-y0h0zf1wsm] { padding: 0 6px; }

.ft-select[b-y0h0zf1wsm] {
    height: 30px;
    border: 1px solid #EAE3D2;
    border-radius: 6px;
    padding: 0 6px;
    font-family: inherit;
    font-size: 12px;
    background: white;
    cursor: pointer;
    color: #141619;
}
.ft-font[b-y0h0zf1wsm] { width: 110px; }
.ft-size[b-y0h0zf1wsm] { width: 60px; }

.ft-divider[b-y0h0zf1wsm] {
    width: 1px;
    height: 20px;
    background: #EAE3D2;
    margin: 0 3px;
    flex-shrink: 0;
}

/* Color buttons */
.ft-color-wrap[b-y0h0zf1wsm] { position: relative; }
.ft-color-btn[b-y0h0zf1wsm] {
    flex-direction: column;
    gap: 1px;
    padding: 0 5px;
}
.ft-color-bar[b-y0h0zf1wsm] {
    width: 16px;
    height: 3px;
    border-radius: 1px;
    margin-top: 1px;
    display: block;
}

.ft-palette[b-y0h0zf1wsm] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(20,22,25,0.12),
                0 12px 28px rgba(20,22,25,0.16);
    display: grid;
    grid-template-columns: repeat(6, 22px);
    gap: 4px;
    z-index: 1300;
}

.ft-color-swatch[b-y0h0zf1wsm] {
    width: 22px;
    height: 22px;
    border: 1.5px solid white;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    transition: transform 0.1s;
    background: transparent;
    padding: 0;
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ft-color-swatch:hover[b-y0h0zf1wsm] { transform: scale(1.15); }
.ft-color-none[b-y0h0zf1wsm] { background: white; }

.ft-clear[b-y0h0zf1wsm] { color: #888780; }
.ft-clear:hover[b-y0h0zf1wsm] { color: #141619; }
/* /Components/GaleriaFondosModal.razor.rz.scp.css */
/* GaleriaFondosModal · Scoped CSS */

.gf-overlay[b-vn1zxq9wdr] {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 25, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: gf-fade-in-b-vn1zxq9wdr 0.2s ease;
}

.gf-modal[b-vn1zxq9wdr] {
    background: #FFFFFF;
    border-radius: 16px;
    width: 100%;
    max-width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(20, 22, 25, 0.25);
    animation: gf-modal-in-b-vn1zxq9wdr 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gf-fade-in-b-vn1zxq9wdr {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes gf-modal-in-b-vn1zxq9wdr {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header */
.gf-header[b-vn1zxq9wdr] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #EAE3D2;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.gf-title[b-vn1zxq9wdr] {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
    color: #141619;
    margin: 0;
    letter-spacing: -0.01em;
}
.gf-search[b-vn1zxq9wdr] {
    flex: 1;
    max-width: 320px;
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
    background: #F4F0E6;
    border-radius: 8px;
    padding: 0 10px;
    height: 36px;
}
.gf-search svg[b-vn1zxq9wdr] {
    width: 14px;
    height: 14px;
    color: #888780;
    flex-shrink: 0;
}
.gf-search input[b-vn1zxq9wdr] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: #141619;
    outline: none;
}
.gf-search input[b-vn1zxq9wdr]::placeholder {
    color: #B4B2A9;
}
.gf-close[b-vn1zxq9wdr] {
    width: 36px;
    height: 36px;
    border: none;
    background: #F4F0E6;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444441;
    transition: all 0.12s ease;
    flex-shrink: 0;
}
.gf-close:hover[b-vn1zxq9wdr] {
    background: #EAE3D2;
    color: #141619;
}

/* Tabs */
.gf-tabs[b-vn1zxq9wdr] {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    border-bottom: 1px solid #EAE3D2;
    flex-shrink: 0;
}
.gf-tab[b-vn1zxq9wdr] {
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-family: 'Figtree', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #888780;
    cursor: pointer;
    position: relative;
    transition: color 0.12s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gf-tab:hover[b-vn1zxq9wdr] {
    color: #444441;
}
.gf-tab.active[b-vn1zxq9wdr] {
    color: #4BA8AA;
}
.gf-tab.active[b-vn1zxq9wdr]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: #4BA8AA;
    border-radius: 2px 2px 0 0;
}
.gf-tab-count[b-vn1zxq9wdr] {
    background: #EAE3D2;
    color: #444441;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
}
.gf-tab.active .gf-tab-count[b-vn1zxq9wdr] {
    background: rgba(75, 168, 170, 0.16);
    color: #4BA8AA;
}

/* Subcategorías */
.gf-subcats[b-vn1zxq9wdr] {
    padding: 12px 20px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid #EAE3D2;
}
.gf-subcat[b-vn1zxq9wdr] {
    padding: 6px 12px;
    border: 1px solid #EAE3D2;
    background: #FFFFFF;
    border-radius: 999px;
    font-family: 'Figtree', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #444441;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.12s;
}
.gf-subcat:hover[b-vn1zxq9wdr] {
    background: #F4F0E6;
}
.gf-subcat.active[b-vn1zxq9wdr] {
    background: #141619;
    color: #FFFFFF;
    border-color: #141619;
}
.gf-subcat.destacada[b-vn1zxq9wdr] {
    border-color: #6DC7D0;
    color: #4BA8AA;
}
.gf-subcat.active.destacada[b-vn1zxq9wdr] {
    background: #4BA8AA;
    border-color: #4BA8AA;
    color: #FFFFFF;
}
.gf-badge-tu[b-vn1zxq9wdr] {
    background: rgba(109, 199, 208, 0.18);
    color: #4BA8AA;
    font-size: 9.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gf-subcat.active .gf-badge-tu[b-vn1zxq9wdr] {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

/* Favorite star on subcategory */
.gf-subcat-fav[b-vn1zxq9wdr] {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, transform 0.12s;
    line-height: 1;
}
.gf-subcat-fav:hover[b-vn1zxq9wdr] {
    color: #141619;
    transform: scale(1.15);
}
.gf-subcat-fav.on[b-vn1zxq9wdr] {
    color: #F59E0B;
}
.gf-subcat-fav.on:hover[b-vn1zxq9wdr] {
    color: #F59E0B;
}
.gf-subcat.active .gf-subcat-fav[b-vn1zxq9wdr] {
    color: rgba(255, 255, 255, 0.4);
}
.gf-subcat.active .gf-subcat-fav:hover[b-vn1zxq9wdr] {
    color: #FFFFFF;
}
.gf-subcat.active .gf-subcat-fav.on[b-vn1zxq9wdr] {
    color: #FCD34D;
}

/* Body / Grid */
.gf-body[b-vn1zxq9wdr] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.gf-grid[b-vn1zxq9wdr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.gf-thumb[b-vn1zxq9wdr] {
    position: relative;
    aspect-ratio: 16/9;
    background: #F4F0E6;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}
.gf-thumb:hover[b-vn1zxq9wdr] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 22, 25, 0.10);
}
.gf-thumb.selected[b-vn1zxq9wdr] {
    border-color: #4BA8AA;
    box-shadow: 0 0 0 3px rgba(75, 168, 170, 0.18);
}
.gf-thumb.locked[b-vn1zxq9wdr] {
    opacity: 0.7;
    cursor: not-allowed;
}
.gf-thumb.locked[b-vn1zxq9wdr]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 25, 0.3);
    z-index: 1;
}
.gf-thumb img[b-vn1zxq9wdr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gf-badge-pro[b-vn1zxq9wdr] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #FCD34D, #F59E0B);
    color: #78350F;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    z-index: 2;
}
.gf-thumb-check[b-vn1zxq9wdr] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: #4BA8AA;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.gf-thumb-name[b-vn1zxq9wdr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(20, 22, 25, 0.7), transparent);
    color: #FFFFFF;
    padding: 16px 8px 6px;
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 500;
    z-index: 1;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Empty / Loading */
.gf-empty[b-vn1zxq9wdr],
.gf-loading[b-vn1zxq9wdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #888780;
    text-align: center;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
}
.gf-empty-icon[b-vn1zxq9wdr] {
    color: #B4B2A9;
    margin-bottom: 12px;
}
.gf-empty h3[b-vn1zxq9wdr] {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 500;
    color: #444441;
    margin: 0 0 6px;
}
.gf-empty p[b-vn1zxq9wdr] {
    font-size: 13px;
    margin: 0;
    max-width: 320px;
}

/* Footer */
.gf-footer[b-vn1zxq9wdr] {
    padding: 14px 20px;
    border-top: 1px solid #EAE3D2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gf-footer-spacer[b-vn1zxq9wdr] {
    flex: 1;
}
.gf-btn[b-vn1zxq9wdr] {
    padding: 9px 18px;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.12s ease;
}
.gf-btn-secondary[b-vn1zxq9wdr] {
    background: #F4F0E6;
    color: #444441;
    border-color: #EAE3D2;
}
.gf-btn-secondary:hover[b-vn1zxq9wdr] {
    background: #EAE3D2;
}
.gf-btn-primary[b-vn1zxq9wdr] {
    background: #4BA8AA;
    color: #FFFFFF;
}
.gf-btn-primary:hover[b-vn1zxq9wdr] {
    background: #3F8E90;
}
.gf-btn-primary:disabled[b-vn1zxq9wdr] {
    background: #B4B2A9;
    cursor: not-allowed;
    opacity: 0.6;
}
/* Upgrade modal */
.gf-overlay-upgrade[b-vn1zxq9wdr] {
    z-index: 1100;
}
.gf-modal-upgrade[b-vn1zxq9wdr] {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 28px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(20, 22, 25, 0.3);
}
.gf-upgrade-icon[b-vn1zxq9wdr] {
    margin-bottom: 14px;
}
.gf-modal-upgrade h3[b-vn1zxq9wdr] {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 500;
    color: #141619;
    margin: 0 0 8px;
}
.gf-modal-upgrade p[b-vn1zxq9wdr] {
    font-family: 'Figtree', sans-serif;
    font-size: 13.5px;
    color: #888780;
    margin: 0 0 22px;
    line-height: 1.5;
}
.gf-upgrade-actions[b-vn1zxq9wdr] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Responsive */
@media (max-width: 720px) {
    .gf-overlay[b-vn1zxq9wdr] {
        padding: 12px;
    }
    .gf-modal[b-vn1zxq9wdr] {
        max-height: 92vh;
    }
    .gf-grid[b-vn1zxq9wdr] {
        grid-template-columns: repeat(2, 1fr);
    }
    .gf-header[b-vn1zxq9wdr] {
        flex-wrap: wrap;
    }
    .gf-search[b-vn1zxq9wdr] {
        max-width: none;
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
    }
}
/* /Components/GaleriaImagenesModal.razor.rz.scp.css */
/* Overlay y modal centrado, mismo patrón visual que GaleriaFondosModal */
.gi-overlay[b-myt6hljgd8] {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 25, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.gi-modal[b-myt6hljgd8] {
    background: #FFFFFF;
    border-radius: 12px;
    width: 90vw;
    max-width: 1100px;
    height: 78vh;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
}

/* Header */
.gi-header[b-myt6hljgd8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
}

.gi-title[b-myt6hljgd8] {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 600;
    color: #1E2126;
    margin: 0;
    flex: 0 0 auto;
}

.gi-search[b-myt6hljgd8] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 8px 12px;
    color: #999;
}

.gi-search input[b-myt6hljgd8] {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #333;
}

.gi-btn[b-myt6hljgd8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.gi-btn-primary[b-myt6hljgd8] {
    background: #6EC6C8;
    color: white;
}

.gi-btn-primary:hover:not(.disabled)[b-myt6hljgd8] {
    background: #4BA8AA;
}

.gi-btn.disabled[b-myt6hljgd8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.gi-close[b-myt6hljgd8] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #999;
    border-radius: 6px;
}

.gi-close:hover[b-myt6hljgd8] {
    background: #F5F5F5;
    color: #333;
}

/* Alertas */
.gi-alert[b-myt6hljgd8] {
    padding: 10px 20px;
    font-size: 13px;
    text-align: center;
}

.gi-alert-warning[b-myt6hljgd8] {
    background: #FEF3C7;
    color: #92400E;
    border-bottom: 1px solid #FCD34D;
}

.gi-alert-danger[b-myt6hljgd8] {
    background: #FEE2E2;
    color: #991B1B;
    border-bottom: 1px solid #FCA5A5;
}

/* Body */
.gi-body[b-myt6hljgd8] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative;
}

.gi-grid[b-myt6hljgd8] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .gi-grid[b-myt6hljgd8] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
    .gi-grid[b-myt6hljgd8] { grid-template-columns: repeat(3, 1fr); }
}

.gi-thumb[b-myt6hljgd8] {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #F5F5F5;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
}

.gi-thumb:hover[b-myt6hljgd8] {
    border-color: #6EC6C8;
    transform: translateY(-1px);
}

.gi-thumb img[b-myt6hljgd8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-thumb-name[b-myt6hljgd8] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    font-size: 11px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}

.gi-thumb:hover .gi-thumb-name[b-myt6hljgd8] { opacity: 1; }

.gi-thumb-delete[b-myt6hljgd8] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(163, 45, 45, 0.85);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.gi-thumb:hover .gi-thumb-delete[b-myt6hljgd8] { opacity: 1; }

.gi-confirm-delete[b-myt6hljgd8] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.gi-confirm-delete p[b-myt6hljgd8] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.gi-btn-mini[b-myt6hljgd8] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #999;
    background: white;
    color: #333;
    cursor: pointer;
}

.gi-btn-mini-danger[b-myt6hljgd8] {
    background: #A32D2D;
    color: white;
    border-color: #A32D2D;
}

/* Skeleton */
.gi-skeleton[b-myt6hljgd8] {
    background: linear-gradient(90deg, #F5F5F5 0%, #EBEBEB 50%, #F5F5F5 100%);
    background-size: 200% 100%;
    animation: gi-skeleton-pulse-b-myt6hljgd8 1.4s ease-in-out infinite;
    border: none;
}

@keyframes gi-skeleton-pulse-b-myt6hljgd8 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gi-uploading-placeholder[b-myt6hljgd8] {
    background: #F0FDFA;
    border: 2px dashed #6EC6C8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: default;
}

.gi-spinner[b-myt6hljgd8] {
    width: 28px;
    height: 28px;
    border: 3px solid #6EC6C8;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gi-spin-b-myt6hljgd8 0.8s linear infinite;
}

@keyframes gi-spin-b-myt6hljgd8 {
    to { transform: rotate(360deg); }
}

.gi-uploading-placeholder .gi-thumb-name[b-myt6hljgd8] {
    position: static;
    opacity: 1;
    background: transparent;
    color: #1D9E75;
    font-size: 11px;
}

/* Empty state */
.gi-empty[b-myt6hljgd8] {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.gi-empty-icon[b-myt6hljgd8] { color: #CCC; margin-bottom: 12px; }

.gi-empty h3[b-myt6hljgd8] {
    font-family: 'Fraunces', serif;
    color: #555;
    margin: 0 0 6px 0;
    font-size: 17px;
}

.gi-empty p[b-myt6hljgd8] { font-size: 14px; max-width: 380px; margin: 0 auto; }

/* Footer cuota */
.gi-footer[b-myt6hljgd8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid #E5E7EB;
    background: #FAFAFA;
    font-size: 13px;
    color: #555;
}

.gi-cuota-label[b-myt6hljgd8] { flex: 0 0 auto; font-weight: 500; }

.gi-cuota-bar[b-myt6hljgd8] {
    flex: 1;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.gi-cuota-bar-fill[b-myt6hljgd8] {
    height: 100%;
    background: #1D9E75;
    transition: width 0.3s, background 0.3s;
}

.gi-cuota-bar-fill.warning[b-myt6hljgd8] { background: #BA7517; }
.gi-cuota-bar-fill.danger[b-myt6hljgd8] { background: #A32D2D; }

.gi-cuota-pct[b-myt6hljgd8] { flex: 0 0 auto; min-width: 36px; text-align: right; font-weight: 500; }
/* /Components/Inicio/AgendaDia.razor.rz.scp.css */
.agenda[b-6ur5julw8c] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 18px 20px 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
}

/* === Header === */
.agenda-header[b-6ur5julw8c] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.agenda-icon[b-6ur5julw8c] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
}

.agenda-icon .material-symbols-rounded[b-6ur5julw8c] { font-size: 17px !important; }

.agenda-title[b-6ur5julw8c] {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.agenda-sub[b-6ur5julw8c] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-left: 4px;
}

.agenda-action[b-6ur5julw8c] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-teal-deep);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    font-family: inherit;
}

.agenda-action:hover[b-6ur5julw8c] { background: var(--bg-light-teal); }
.agenda-action .material-symbols-rounded[b-6ur5julw8c] { font-size: 14px !important; }

/* === Now bar === */
.agenda-now-bar[b-6ur5julw8c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(110, 198, 200, 0.12) 0%, rgba(110, 198, 200, 0.02) 100%);
    border-left: 3px solid var(--brand-teal);
    border-radius: 6px;
}

.now-pulse[b-6ur5julw8c] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-teal-dark);
    animation: ag-pulse-b-6ur5julw8c 2s infinite;
}

@keyframes ag-pulse-b-6ur5julw8c {
    0%, 100% { box-shadow: 0 0 0 0 rgba(75, 168, 170, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(75, 168, 170, 0); }
}

.now-label[b-6ur5julw8c] {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.now-time[b-6ur5julw8c] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* === Timeline === */
.timeline[b-6ur5julw8c] {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0;
    position: relative;
}

.timeline[b-6ur5julw8c]::before {
    content: "";
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-soft);
}

.tl-row[b-6ur5julw8c] { display: contents; }

.tl-time[b-6ur5julw8c] {
    text-align: right;
    padding: 6px 14px 6px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    position: relative;
    line-height: 1.2;
}

.tl-content[b-6ur5julw8c] {
    padding: 4px 0 14px 16px;
    position: relative;
}

.tl-dot[b-6ur5julw8c] {
    position: absolute;
    left: -4px;
    top: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 2px solid var(--border-med);
}

.tl-dot.done[b-6ur5julw8c] {
    background: var(--success);
    border-color: var(--success);
}

.tl-dot.now[b-6ur5julw8c] {
    background: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
    box-shadow: 0 0 0 4px rgba(75, 168, 170, 0.2);
}

.tl-dot.upcoming[b-6ur5julw8c] { background: var(--bg-panel); }

/* === Class card === */
.class-card[b-6ur5julw8c] {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 12px;
    align-items: center;
    transition: all 0.15s;
    cursor: pointer;
    background: var(--bg-panel);
}

.class-card:hover[b-6ur5julw8c] {
    border-color: var(--brand-teal);
    box-shadow: var(--shadow-sm);
}

.class-card.done[b-6ur5julw8c] {
    background: #F8FAF8;
    opacity: 0.85;
}

.class-card.now[b-6ur5julw8c] {
    border-color: var(--brand-teal);
    background: linear-gradient(135deg, rgba(110, 198, 200, 0.08) 0%, var(--bg-panel) 60%);
    box-shadow: 0 4px 14px rgba(110, 198, 200, 0.15);
}

.class-accent[b-6ur5julw8c] {
    align-self: stretch;
    width: 4px;
    border-radius: 2px;
}

.class-info[b-6ur5julw8c] { min-width: 0; }

.class-row1[b-6ur5julw8c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.class-grupo[b-6ur5julw8c] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    line-height: 1;
}

.class-disciplina[b-6ur5julw8c] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.class-disciplina.saberes[b-6ur5julw8c]   { background: var(--cf-saberes-bg);   color: var(--cf-saberes); }
.class-disciplina.lenguajes[b-6ur5julw8c] { background: var(--cf-lenguajes-bg); color: var(--cf-lenguajes); }
.class-disciplina.etica[b-6ur5julw8c]     { background: var(--cf-etica-bg);     color: var(--cf-etica); }
.class-disciplina.humano[b-6ur5julw8c]    { background: var(--cf-humano-bg);    color: var(--cf-humano); }

.class-disciplina .material-symbols-rounded[b-6ur5julw8c] {
    font-size: 12px !important;
    font-variation-settings: "FILL" 1 !important;
}

.class-status-pill[b-6ur5julw8c] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.class-status-pill.in-progress[b-6ur5julw8c] { background: rgba(75, 168, 170, 0.18); color: var(--brand-teal-deep); }
.class-status-pill.completed[b-6ur5julw8c]   { background: rgba(29, 158, 117, 0.15); color: var(--success); }
.class-status-pill.upcoming[b-6ur5julw8c]    { background: #F0ECE2;                  color: var(--text-secondary); }

.class-row2[b-6ur5julw8c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.class-row2 .material-symbols-rounded[b-6ur5julw8c] { font-size: 13px !important; }

.class-meta-item[b-6ur5julw8c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.class-actions[b-6ur5julw8c] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.class-action[b-6ur5julw8c] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.class-action:hover[b-6ur5julw8c] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.class-action.primary[b-6ur5julw8c] {
    background: var(--brand-teal-primary);
    border-color: var(--brand-teal-primary);
    color: #FFFFFF;
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
}

.class-action.primary:hover[b-6ur5julw8c] {
    background: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
    color: #FFFFFF;
}

.class-action .material-symbols-rounded[b-6ur5julw8c] { font-size: 16px !important; }

/* === Eventos inline (receso / CTE) === */
.tl-event[b-6ur5julw8c] {
    border: 1px dashed var(--border-med);
    background: #FBFAF6;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-event.is-cte[b-6ur5julw8c] {
    border-color: rgba(45, 110, 163, 0.4);
    background: linear-gradient(90deg, rgba(45, 110, 163, 0.05) 0%, #FBFAF6 100%);
}

.tl-event-icon[b-6ur5julw8c] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.tl-event-icon.cte[b-6ur5julw8c]   { background: linear-gradient(135deg, #2563EB, #1E40AF); }
.tl-event-icon.break[b-6ur5julw8c] { background: linear-gradient(135deg, #94A3B8, #64748B); }

.tl-event-icon .material-symbols-rounded[b-6ur5julw8c] { font-size: 14px !important; }

.tl-event-info[b-6ur5julw8c] { flex: 1; }

.tl-event-title[b-6ur5julw8c] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.tl-event-meta[b-6ur5julw8c] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.mini-btn[b-6ur5julw8c] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: inherit;
    flex-shrink: 0;
}

.mini-btn:hover[b-6ur5julw8c] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.mini-btn .material-symbols-rounded[b-6ur5julw8c] { font-size: 12px !important; }

/* === Responsive === */
@media (max-width: 720px) {
    .timeline[b-6ur5julw8c] { grid-template-columns: 50px 1fr; }
    .timeline[b-6ur5julw8c]::before { left: 50px; }
    .class-card[b-6ur5julw8c] { grid-template-columns: 4px 1fr; }
    .class-actions[b-6ur5julw8c] {
        grid-column: 2;
        justify-content: flex-end;
        margin-top: 6px;
    }
}
/* /Components/Inicio/HeroSaludo.razor.rz.scp.css */
.hero[b-oh54xv0xfn] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.hero[b-oh54xv0xfn]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background:
        radial-gradient(circle at top right, rgba(110, 198, 200, 0.12), transparent 65%),
        radial-gradient(circle at center right, rgba(217, 119, 6, 0.05), transparent 50%);
    pointer-events: none;
}

.hero-content[b-oh54xv0xfn] {
    position: relative;
    z-index: 1;
}

.hero-date[b-oh54xv0xfn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--brand-teal-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
}

.hero-date .material-symbols-rounded[b-oh54xv0xfn] {
    font-size: 15px !important;
}

.hero-greeting[b-oh54xv0xfn] {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin-bottom: 6px;
}

.hero-greeting strong[b-oh54xv0xfn] {
    font-weight: 700;
    color: var(--brand-teal-deep);
    font-style: italic;
}

.hero-tagline[b-oh54xv0xfn] {
    font-family: var(--font-sans);
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 600px;
    margin-bottom: 22px;
}

.hero-tagline[b-oh54xv0xfn]  strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* === Stats row === */
.hero-stats[b-oh54xv0xfn] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.stat[b-oh54xv0xfn] {
    background: linear-gradient(135deg, #FBFAF6 0%, var(--bg-panel) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
    overflow: hidden;
    text-align: left;
    font-family: var(--font-sans);
}

.stat:hover[b-oh54xv0xfn] {
    border-color: var(--brand-teal);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(110, 198, 200, 0.15);
}

.stat-icon[b-oh54xv0xfn] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.stat-icon .material-symbols-rounded[b-oh54xv0xfn] {
    font-size: 18px !important;
}

.stat-icon.classes[b-oh54xv0xfn]   { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }
.stat-icon.tasks[b-oh54xv0xfn]     { background: linear-gradient(135deg, #F59E0B, #D97706); }
.stat-icon.mentions[b-oh54xv0xfn]  { background: linear-gradient(135deg, #EC4899, #BE185D); }
.stat-icon.events[b-oh54xv0xfn]    { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.stat-icon.approvals[b-oh54xv0xfn] { background: linear-gradient(135deg, #10B981, #047857); }

.stat-row[b-oh54xv0xfn] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-value[b-oh54xv0xfn] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1;
}

.stat-suffix[b-oh54xv0xfn] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-label[b-oh54xv0xfn] {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 4px;
}

.stat-urgent[b-oh54xv0xfn] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--danger);
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* === Responsive === */
@media (max-width: 1100px) {
    .hero-stats[b-oh54xv0xfn] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .hero[b-oh54xv0xfn] { padding: 22px 20px; }
    .hero-greeting[b-oh54xv0xfn] { font-size: 24px; }
    .hero-stats[b-oh54xv0xfn] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat[b-oh54xv0xfn] { padding: 10px 12px; }
    .stat-value[b-oh54xv0xfn] { font-size: 22px; }
}
/* /Components/Proyectos/AgregarIntegrantesModal.razor.rz.scp.css */
.aim-backdrop[b-ya70lcrach] {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 31, 0.45);
    backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.aim-modal[b-ya70lcrach] {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(26, 28, 31, 0.20), 0 8px 16px rgba(26, 28, 31, 0.10);
    width: 100%;
    max-width: 620px;
    overflow: hidden;
    border: 1px solid #E8E4DD;
}

.aim-header[b-ya70lcrach] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #E8E4DD;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.aim-header-text[b-ya70lcrach] { flex: 1; }

.aim-title[b-ya70lcrach] {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #3A3D42;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.aim-subtitle[b-ya70lcrach] {
    font-size: 13px;
    color: #5C6068;
    line-height: 1.5;
}

.aim-close[b-ya70lcrach] {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #5C6068;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aim-close:hover[b-ya70lcrach] { background: #F4F0E6; color: #1A1C1F; }

.aim-body[b-ya70lcrach] {
    padding: 16px 24px;
    max-height: 540px;
    overflow-y: auto;
}

/* Suggest banner */
.aim-suggest-banner[b-ya70lcrach] {
    background: linear-gradient(135deg, #FFF8E7, #FAEFD9);
    border: 1px solid #F1D9A6;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.aim-suggest-icon[b-ya70lcrach] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #B8860B;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aim-suggest-icon .material-symbols-rounded[b-ya70lcrach] {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

.aim-suggest-text[b-ya70lcrach] { flex: 1; }

.aim-suggest-title[b-ya70lcrach] {
    font-size: 13px;
    font-weight: 600;
    color: #5A4309;
    margin-bottom: 2px;
}

.aim-suggest-body[b-ya70lcrach] {
    font-size: 12px;
    color: #6B5511;
    line-height: 1.5;
}

.aim-suggest-body strong[b-ya70lcrach] { color: #5A4309; }

/* Search */
.aim-search[b-ya70lcrach] { margin-bottom: 14px; }

.aim-search input[b-ya70lcrach] {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border: 1px solid #D4CFC5;
    border-radius: 9px;
    background: #FAF7F1;
    font-family: inherit;
    font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B9098' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
}

.aim-search input:focus[b-ya70lcrach] {
    outline: none;
    border-color: #6DC7D0;
    box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.15);
}

/* Selected counter */
.aim-selected[b-ya70lcrach] {
    background: #F4F0E6;
    border: 1px solid #E8E4DD;
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.aim-selected strong[b-ya70lcrach] { color: #1A1C1F; font-weight: 600; }

.aim-pills[b-ya70lcrach] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.aim-pill[b-ya70lcrach] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    color: #1A1C1F;
}

.aim-pill .material-symbols-rounded[b-ya70lcrach] {
    font-size: 12px;
    cursor: pointer;
    color: #8B9098;
}

/* Results */
.aim-results-title[b-ya70lcrach] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8B9098;
    padding: 8px 4px 6px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aim-results-title.suggested[b-ya70lcrach] { color: #B8860B; }
.aim-results-title.suggested .material-symbols-rounded[b-ya70lcrach] {
    font-size: 14px;
    color: #B8860B;
    font-variation-settings: 'FILL' 1;
}

.aim-result-row[b-ya70lcrach] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.aim-result-row:hover[b-ya70lcrach] { background: #FAF7F1; }
.aim-result-row.disabled[b-ya70lcrach] { opacity: 0.5; cursor: not-allowed; }
.aim-result-row.suggested[b-ya70lcrach] { background: rgba(184, 134, 11, 0.05); border: 1px solid rgba(184, 134, 11, 0.15); }
.aim-result-row.suggested:hover[b-ya70lcrach] { background: rgba(184, 134, 11, 0.08); }

.aim-check[b-ya70lcrach] {
    width: 20px; height: 20px;
    border: 2px solid #D4CFC5;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #FFFFFF;
}

.aim-result-row.checked .aim-check[b-ya70lcrach] {
    background: #3A8F91;
    border-color: #3A8F91;
    color: white;
}

.aim-result-row.checked .aim-check .material-symbols-rounded[b-ya70lcrach] {
    font-size: 14px;
    color: white;
    font-variation-settings: 'wght' 700;
}

.aim-result-avatar[b-ya70lcrach] {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.aim-result-info[b-ya70lcrach] { flex: 1; }

.aim-result-name[b-ya70lcrach] {
    font-size: 13px;
    font-weight: 500;
    color: #1A1C1F;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aim-result-meta[b-ya70lcrach] {
    font-size: 11px;
    color: #8B9098;
}

.aim-suggest-tag[b-ya70lcrach] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    background: #B8860B;
    color: white;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aim-suggest-tag .material-symbols-rounded[b-ya70lcrach] { font-size: 11px; color: white; }

.aim-already[b-ya70lcrach] { font-size: 11px; color: #8B9098; font-style: italic; }

/* Footer */
.aim-footer[b-ya70lcrach] {
    padding: 14px 24px;
    border-top: 1px solid #E8E4DD;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #FAF7F1;
}

.aim-footer-left[b-ya70lcrach] { font-size: 12px; color: #8B9098; }
.aim-footer-right[b-ya70lcrach] { display: flex; gap: 8px; }

.aim-btn-secondary[b-ya70lcrach] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    color: #1A1C1F;
    border: 1px solid #D4CFC5;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.aim-btn-secondary:hover[b-ya70lcrach] { background: #F4F0E6; }

.aim-btn-primary[b-ya70lcrach] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #3A3D42;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.aim-btn-primary:hover[b-ya70lcrach] { background: #2A2D32; }
.aim-btn-primary:disabled[b-ya70lcrach] { opacity: 0.4; cursor: not-allowed; }
/* /Components/Proyectos/ArchivarProyectoModal.razor.rz.scp.css */
.apm-backdrop[b-09r1y44nye] {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 31, 0.45);
    backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.apm-modal[b-09r1y44nye] {
    background: var(--bg-panel, #FFFFFF);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(26, 28, 31, 0.20), 0 8px 16px rgba(26, 28, 31, 0.10);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    border: 1px solid var(--border-soft, #E8E4DD);
}

.apm-header[b-09r1y44nye] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #E8E4DD;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.apm-icon-danger[b-09r1y44nye] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FBEAEA;
    color: #A32D2D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apm-icon-danger .material-symbols-rounded[b-09r1y44nye] { font-size: 24px; }

.apm-header-text[b-09r1y44nye] { flex: 1; }

.apm-title[b-09r1y44nye] {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #3A3D42;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.apm-subtitle[b-09r1y44nye] {
    font-size: 13px;
    color: #5C6068;
    line-height: 1.5;
}

.apm-body[b-09r1y44nye] {
    padding: 20px 24px;
}

.apm-detail[b-09r1y44nye] {
    background: #FAF7F1;
    border: 1px solid #E8E4DD;
    border-radius: 9px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #5C6068;
}

.apm-detail + .apm-detail[b-09r1y44nye] {
    margin-top: 8px;
}

.apm-detail strong[b-09r1y44nye] {
    color: #1A1C1F;
    display: block;
    margin-bottom: 4px;
}

.apm-detail p[b-09r1y44nye] {
    margin-top: 4px;
}

.apm-detail-warning[b-09r1y44nye] {
    background: #FFFAF0;
    border-color: #F1D9A6;
}

.apm-detail-warning strong[b-09r1y44nye] {
    color: #8B5E13;
}

.apm-list[b-09r1y44nye] {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.apm-list li[b-09r1y44nye] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: #5C6068;
}

.apm-list li .material-symbols-rounded[b-09r1y44nye] {
    font-size: 16px;
    color: #6DC7D0;
}

.apm-checkbox-area[b-09r1y44nye] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    background: #F4F0E6;
    border-radius: 9px;
    border: 1px solid #E8E4DD;
}

.apm-checkbox-area input[type="checkbox"][b-09r1y44nye] {
    margin-top: 2px;
    accent-color: #A32D2D;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.apm-checkbox-area label[b-09r1y44nye] {
    font-size: 13px;
    color: #1A1C1F;
    cursor: pointer;
    line-height: 1.5;
}

.apm-footer[b-09r1y44nye] {
    padding: 14px 24px;
    border-top: 1px solid #E8E4DD;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: #FAF7F1;
}

.apm-btn-secondary[b-09r1y44nye] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    color: #1A1C1F;
    border: 1px solid #D4CFC5;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.apm-btn-secondary:hover[b-09r1y44nye] { background: #F4F0E6; }

.apm-btn-danger[b-09r1y44nye] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #A32D2D;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.apm-btn-danger:hover[b-09r1y44nye] { background: #8C2424; }
.apm-btn-danger:disabled[b-09r1y44nye] { opacity: 0.4; cursor: not-allowed; }
/* /Components/Proyectos/CoberturaNEMMatrix.razor.rz.scp.css */
.nem-coverage[b-xplmi5lb85] {
    background: #FAF7F1;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.nem-header[b-xplmi5lb85] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.nem-header-icon[b-xplmi5lb85] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6DC7D0, #3A8F91);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nem-header-icon .material-symbols-rounded[b-xplmi5lb85] { font-size: 18px; color: white; }

.nem-header-text[b-xplmi5lb85] { flex: 1; }

.nem-title[b-xplmi5lb85] {
    font-size: 13px;
    font-weight: 600;
    color: #1A1C1F;
    margin-bottom: 2px;
}

.nem-subtitle[b-xplmi5lb85] {
    font-size: 11px;
    color: #5C6068;
}

.nem-badge-warning[b-xplmi5lb85] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #FFF4E1;
    color: #BA7517;
    border: 1px solid #F1D9A6;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nem-badge-warning .material-symbols-rounded[b-xplmi5lb85] { font-size: 12px; }

.nem-matrix[b-xplmi5lb85] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    font-size: 12px;
}

.nem-matrix th[b-xplmi5lb85] {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #5C6068;
    background: #FAF7F1;
    border-bottom: 1px solid #E8E4DD;
    text-align: center;
    vertical-align: bottom;
}

.nem-matrix th.nem-col[b-xplmi5lb85] { position: relative; }

.nem-matrix th.nem-col.required[b-xplmi5lb85] {
    color: #1A1C1F;
    background: white;
    font-weight: 700;
}

.nem-matrix th.nem-col.uncovered[b-xplmi5lb85] {
    background: #FFF4E1;
    color: #BA7517;
}

.nem-matrix th.nem-col-color[b-xplmi5lb85] {
    height: 4px;
    padding: 0;
}

.nem-matrix th.uncovered-color[b-xplmi5lb85] { opacity: 0.5; }

.nem-matrix td[b-xplmi5lb85] {
    padding: 8px 10px;
    border-bottom: 1px solid #E8E4DD;
    vertical-align: middle;
}

.nem-matrix tr:last-child td[b-xplmi5lb85] { border-bottom: none; }

.nem-name-cell[b-xplmi5lb85] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.nem-avatar[b-xplmi5lb85] {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.nem-name[b-xplmi5lb85] {
    font-size: 12px;
    font-weight: 500;
    color: #1A1C1F;
}

.nem-name.lider[b-xplmi5lb85] {
    color: #B8860B;
    font-weight: 600;
}

.nem-check-cell[b-xplmi5lb85] { text-align: center; }

.nem-check[b-xplmi5lb85] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: #E2F4EE;
    color: #1D9E75;
    border: 1px solid #B5DECC;
}

.nem-check .material-symbols-rounded[b-xplmi5lb85] {
    font-size: 14px;
    font-variation-settings: 'wght' 700;
}

.nem-empty[b-xplmi5lb85] {
    display: inline-block;
    width: 22px; height: 22px;
    color: #8B9098;
    opacity: 0.3;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
}
/* /Components/Proyectos/CrearProyectoDialog.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   CrearProyectoDialog v2 — modal para crear proyectos (8 tipos)
   ──────────────────────────────────────────────────────────────────── */

.cpd-overlay[b-0p8vvjy3cy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    font-family: var(--font-sans);
}

.cpd-overlay-modal[b-0p8vvjy3cy] {
    width: 100%;
    max-width: 600px;
}

/* ════ Modal box ════ */
.cpd-modal[b-0p8vvjy3cy] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(26, 28, 31, 0.18), 0 8px 16px rgba(26, 28, 31, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--text-primary);
}

/* ════ Ribbon (top color bar per type) ════ */
.cpd-ribbon[b-0p8vvjy3cy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1;
    background: var(--border-med);
}

.cpd-ribbon.nem[b-0p8vvjy3cy]      { background: linear-gradient(90deg, #6DC7D0, #3A8F91, #6DC7D0); }
.cpd-ribbon.pmc[b-0p8vvjy3cy]      { background: linear-gradient(90deg, #8B5CF6, #6D28D9, #8B5CF6); }
.cpd-ribbon.evento[b-0p8vvjy3cy]   { background: linear-gradient(90deg, #EC4899, #9D174D, #EC4899); }
.cpd-ribbon.concurso[b-0p8vvjy3cy] { background: linear-gradient(90deg, #F59E0B, #D97706, #F59E0B); }
.cpd-ribbon.mural[b-0p8vvjy3cy]    { background: linear-gradient(90deg, #10B981, #047857, #10B981); }
.cpd-ribbon.comite[b-0p8vvjy3cy]   { background: linear-gradient(90deg, #3B82F6, #1D4ED8, #3B82F6); }
.cpd-ribbon.mejora[b-0p8vvjy3cy]   { background: linear-gradient(90deg, #EF4444, #B91C1C, #EF4444); }
.cpd-ribbon.admin[b-0p8vvjy3cy]    { background: linear-gradient(90deg, #6B7280, #374151, #6B7280); }

/* ════ Header ════ */
.cpd-header[b-0p8vvjy3cy] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpd-header-icon[b-0p8vvjy3cy] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    background: var(--border-med);
}

.cpd-header-icon.nem[b-0p8vvjy3cy]      { background: linear-gradient(135deg, #6DC7D0, #3A8F91); }
.cpd-header-icon.pmc[b-0p8vvjy3cy]      { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.cpd-header-icon.evento[b-0p8vvjy3cy]   { background: linear-gradient(135deg, #EC4899, #9D174D); }
.cpd-header-icon.concurso[b-0p8vvjy3cy] { background: linear-gradient(135deg, #F59E0B, #D97706); }
.cpd-header-icon.mural[b-0p8vvjy3cy]    { background: linear-gradient(135deg, #10B981, #047857); }
.cpd-header-icon.comite[b-0p8vvjy3cy]   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.cpd-header-icon.mejora[b-0p8vvjy3cy]   { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.cpd-header-icon.admin[b-0p8vvjy3cy]    { background: linear-gradient(135deg, #6B7280, #374151); }

.cpd-header-icon .material-symbols-rounded[b-0p8vvjy3cy] { font-size: 22px !important; }

.cpd-title-block[b-0p8vvjy3cy] { flex: 1; min-width: 0; }

.cpd-pretitle[b-0p8vvjy3cy] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
    color: var(--text-muted);
}

.cpd-pretitle.nem[b-0p8vvjy3cy]      { color: #3A8F91; }
.cpd-pretitle.pmc[b-0p8vvjy3cy]      { color: #6D28D9; }
.cpd-pretitle.evento[b-0p8vvjy3cy]   { color: #9D174D; }
.cpd-pretitle.concurso[b-0p8vvjy3cy] { color: #D97706; }
.cpd-pretitle.mural[b-0p8vvjy3cy]    { color: #047857; }
.cpd-pretitle.comite[b-0p8vvjy3cy]   { color: #1D4ED8; }
.cpd-pretitle.mejora[b-0p8vvjy3cy]   { color: #B91C1C; }
.cpd-pretitle.admin[b-0p8vvjy3cy]    { color: #374151; }

.cpd-title[b-0p8vvjy3cy] {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpd-close[b-0p8vvjy3cy] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpd-close:hover[b-0p8vvjy3cy] { background: #F3EFE7; color: var(--text-primary); }

/* ════ Stepper ════ */
.cpd-stepper[b-0p8vvjy3cy] {
    padding: 12px 22px;
    background: #FBFAF6;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cpd-step[b-0p8vvjy3cy] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.cpd-step.done[b-0p8vvjy3cy] {
    background: rgba(29, 158, 117, 0.1);
    color: var(--success);
}

.cpd-step.active[b-0p8vvjy3cy] {
    background: rgba(110, 198, 200, 0.18);
    color: var(--brand-teal-deep);
}

.cpd-step-num[b-0p8vvjy3cy] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border-soft);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.cpd-step.done .cpd-step-num[b-0p8vvjy3cy] {
    background: var(--success);
    color: #FFFFFF;
}

.cpd-step.done .cpd-step-num .material-symbols-rounded[b-0p8vvjy3cy] {
    font-size: 11px !important;
}

.cpd-step.active .cpd-step-num[b-0p8vvjy3cy] {
    background: var(--brand-teal);
    color: #FFFFFF;
}

.cpd-step-arrow[b-0p8vvjy3cy] {
    color: var(--border-med);
    font-size: 14px !important;
}

/* ════ Body ════ */
.cpd-body[b-0p8vvjy3cy] {
    padding: 20px 22px 18px;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-med) transparent;
}

.cpd-body[b-0p8vvjy3cy]::-webkit-scrollbar { width: 6px; }
.cpd-body[b-0p8vvjy3cy]::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 3px; }

/* ── Section ── */
.cpd-section[b-0p8vvjy3cy] { margin-bottom: 18px; }

.cpd-section-title[b-0p8vvjy3cy] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cpd-section-title .material-symbols-rounded[b-0p8vvjy3cy] { font-size: 13px !important; }

/* ════ TYPE GRID (Paso 1) ════ */
.cpd-type-grid[b-0p8vvjy3cy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cpd-type-card[b-0p8vvjy3cy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 14px 12px;
    border: 1.5px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-panel);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: inherit;
}

.cpd-type-card:hover[b-0p8vvjy3cy] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.cpd-type-card.selected[b-0p8vvjy3cy] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.08);
    box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.15);
}

.cpd-type-icon[b-0p8vvjy3cy] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.cpd-type-icon.nem[b-0p8vvjy3cy]      { background: linear-gradient(135deg, #6DC7D0, #3A8F91); }
.cpd-type-icon.pmc[b-0p8vvjy3cy]      { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.cpd-type-icon.evento[b-0p8vvjy3cy]   { background: linear-gradient(135deg, #EC4899, #9D174D); }
.cpd-type-icon.concurso[b-0p8vvjy3cy] { background: linear-gradient(135deg, #F59E0B, #D97706); }
.cpd-type-icon.mural[b-0p8vvjy3cy]    { background: linear-gradient(135deg, #10B981, #047857); }
.cpd-type-icon.comite[b-0p8vvjy3cy]   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.cpd-type-icon.mejora[b-0p8vvjy3cy]   { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.cpd-type-icon.admin[b-0p8vvjy3cy]    { background: linear-gradient(135deg, #6B7280, #374151); }

.cpd-type-icon .material-symbols-rounded[b-0p8vvjy3cy] { font-size: 18px !important; }

.cpd-type-name[b-0p8vvjy3cy] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cpd-type-desc[b-0p8vvjy3cy] {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ════ Fields (Paso 2) ════ */
.cpd-field[b-0p8vvjy3cy] { margin-bottom: 12px; }

.cpd-label[b-0p8vvjy3cy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cpd-required[b-0p8vvjy3cy] { color: var(--danger); font-weight: 700; }

.cpd-hint[b-0p8vvjy3cy] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: auto;
}

.cpd-input[b-0p8vvjy3cy],
.cpd-textarea[b-0p8vvjy3cy],
.cpd-select[b-0p8vvjy3cy] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-med);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-panel);
    transition: all 0.15s;
    outline: none;
}

.cpd-input:focus[b-0p8vvjy3cy],
.cpd-textarea:focus[b-0p8vvjy3cy],
.cpd-select:focus[b-0p8vvjy3cy] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.15);
}

.cpd-textarea[b-0p8vvjy3cy] {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.cpd-row-2[b-0p8vvjy3cy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── Phases preview ── */
.cpd-phases-info[b-0p8vvjy3cy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(110, 198, 200, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(110, 198, 200, 0.15);
}

.cpd-phases-info .material-symbols-rounded[b-0p8vvjy3cy] { font-size: 14px !important; color: var(--brand-teal-deep); }

.cpd-phases-preview[b-0p8vvjy3cy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
    margin-top: 4px;
}

.cpd-phase-mini[b-0p8vvjy3cy] {
    padding: 8px 10px;
    border: 1px dashed var(--border-med);
    border-radius: 7px;
    font-size: 10.5px;
    background: #FBFAF6;
}

.cpd-phase-mini-num[b-0p8vvjy3cy] {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1;
}

.cpd-phase-mini-name[b-0p8vvjy3cy] {
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
    font-size: 11px;
}

/* ════ Footer ════ */
.cpd-footer[b-0p8vvjy3cy] {
    padding: 14px 22px;
    border-top: 1px solid var(--border-soft);
    background: #FBFAF6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpd-footer-info[b-0p8vvjy3cy] {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.cpd-footer-info.error[b-0p8vvjy3cy] {
    color: var(--danger);
}

.cpd-footer-info .material-symbols-rounded[b-0p8vvjy3cy] { font-size: 14px !important; }

.cpd-btn[b-0p8vvjy3cy] {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}

.cpd-btn:disabled[b-0p8vvjy3cy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cpd-btn .material-symbols-rounded[b-0p8vvjy3cy] { font-size: 15px !important; }

.cpd-btn-secondary[b-0p8vvjy3cy] {
    border-color: var(--border-med);
    background: var(--bg-panel);
    color: var(--text-secondary);
}

.cpd-btn-secondary:hover:not(:disabled)[b-0p8vvjy3cy] {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.cpd-btn-primary[b-0p8vvjy3cy] {
    background: var(--brand-teal-primary, #6DC7D0);
    color: #FFFFFF;
    border-color: var(--brand-teal-primary, #6DC7D0);
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3);
    font-weight: 700;
}

.cpd-btn-primary:hover:not(:disabled)[b-0p8vvjy3cy] {
    background: var(--brand-teal-dark, #3A8F91);
    border-color: var(--brand-teal-dark, #3A8F91);
}

/* ════ Responsive ════ */
@media (max-width: 720px) {
    .cpd-body[b-0p8vvjy3cy] { padding: 16px; }
    .cpd-header[b-0p8vvjy3cy] { padding: 14px 16px; }
    .cpd-stepper[b-0p8vvjy3cy] { padding: 10px 16px; }
    .cpd-footer[b-0p8vvjy3cy] { padding: 12px 16px; flex-wrap: wrap; }
    .cpd-row-2[b-0p8vvjy3cy] { grid-template-columns: 1fr; }
    .cpd-type-grid[b-0p8vvjy3cy] { grid-template-columns: 1fr; }
    .cpd-phases-preview[b-0p8vvjy3cy] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Proyectos/EditarProyectoModal.razor.rz.scp.css */
.epm-backdrop[b-vq3epck62r] {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 31, 0.45);
    backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.epm-modal[b-vq3epck62r] {
    background: var(--bg-panel, #FFFFFF);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(26, 28, 31, 0.20), 0 8px 16px rgba(26, 28, 31, 0.10);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    border: 1px solid var(--border-soft, #E8E4DD);
}

.epm-header[b-vq3epck62r] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-soft, #E8E4DD);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.epm-header-text[b-vq3epck62r] { flex: 1; }

.epm-title[b-vq3epck62r] {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #3A3D42;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.epm-subtitle[b-vq3epck62r] {
    font-size: 13px;
    color: #5C6068;
    line-height: 1.5;
}

.epm-close[b-vq3epck62r] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #5C6068;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.epm-close:hover[b-vq3epck62r] {
    background: #F4F0E6;
    color: #1A1C1F;
}

.epm-body[b-vq3epck62r] {
    padding: 20px 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.epm-group[b-vq3epck62r] {
    margin-bottom: 16px;
}

.epm-row[b-vq3epck62r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.epm-label[b-vq3epck62r] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5C6068;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.epm-input[b-vq3epck62r],
.epm-textarea[b-vq3epck62r] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #D4CFC5;
    border-radius: 9px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    color: #1A1C1F;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.epm-input:focus[b-vq3epck62r],
.epm-textarea:focus[b-vq3epck62r] {
    outline: none;
    border-color: #6DC7D0;
    box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.15);
}

.epm-input-error[b-vq3epck62r] {
    border-color: #A32D2D;
}

.epm-textarea[b-vq3epck62r] {
    resize: vertical;
    min-height: 80px;
}

.epm-helper[b-vq3epck62r] {
    font-size: 11px;
    color: #8B9098;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

.epm-error[b-vq3epck62r] {
    font-size: 11px;
    color: #A32D2D;
    margin-top: 4px;
    display: block;
}

.epm-chips[b-vq3epck62r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid #D4CFC5;
    border-radius: 9px;
    background: #FAF7F1;
    min-height: 48px;
}

.epm-chip[b-vq3epck62r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #E8E4DD;
    background: #FFFFFF;
    color: #5C6068;
    transition: all 0.12s ease;
}

.epm-chip:hover[b-vq3epck62r] {
    border-color: #BCDFE2;
}

.epm-chip-selected[b-vq3epck62r] {
    background: #EAF5F6;
    color: #3A8F91;
    border-color: #BCDFE2;
}

.epm-locked[b-vq3epck62r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: #FAF7F1;
    border: 1px dashed #D4CFC5;
    border-radius: 9px;
    font-size: 13px;
    color: #8B9098;
}

.epm-locked .material-symbols-rounded[b-vq3epck62r] {
    margin-right: 4px;
}

.epm-footer[b-vq3epck62r] {
    padding: 14px 24px;
    border-top: 1px solid #E8E4DD;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: #FAF7F1;
}

.epm-btn-secondary[b-vq3epck62r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    color: #1A1C1F;
    border: 1px solid #D4CFC5;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.epm-btn-secondary:hover[b-vq3epck62r] { background: #F4F0E6; }

.epm-btn-primary[b-vq3epck62r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #3A3D42;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.epm-btn-primary:hover[b-vq3epck62r] { background: #2A2D32; }
.epm-btn-primary:disabled[b-vq3epck62r] { opacity: 0.5; cursor: not-allowed; }
/* /Components/Proyectos/EvidenciaCard.razor.rz.scp.css */
.ev-card[b-490rc2dmaq] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    background: #fff;
    border: 1px solid var(--border-soft, #E8E4DD);
    display: flex;
    flex-direction: column;
}

.ev-card:hover[b-490rc2dmaq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ev-card-star[b-490rc2dmaq] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.ev-card:hover .ev-card-star[b-490rc2dmaq],
.ev-card-star.active[b-490rc2dmaq] {
    opacity: 1;
}

.ev-card-star.active span[b-490rc2dmaq] {
    color: var(--gold, #B8860B);
}

.ev-card-star span[b-490rc2dmaq] {
    font-size: 18px;
    color: var(--text-muted, #8B9098);
}

/* Visual area */
.ev-card-visual[b-490rc2dmaq] {
    flex: 1;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ev-card-img[b-490rc2dmaq] {
    width: 100%;
    height: 100%;
    min-height: 120px;
    max-height: 200px;
    object-fit: cover;
}

.ev-card-video-placeholder[b-490rc2dmaq] {
    width: 100%;
    height: 140px;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-card-video-placeholder span[b-490rc2dmaq] {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.85);
}

.ev-card-file-placeholder[b-490rc2dmaq] {
    width: 100%;
    height: 120px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ev-card-file-placeholder span.material-symbols-rounded[b-490rc2dmaq] {
    font-size: 36px;
    color: var(--text-secondary, #5C6068);
}

.ev-card-filename[b-490rc2dmaq] {
    font-size: 11px;
    color: var(--text-muted, #8B9098);
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-card-link-placeholder[b-490rc2dmaq] {
    width: 100%;
    height: 120px;
    background: #f0f4f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ev-card-link-placeholder span.material-symbols-rounded[b-490rc2dmaq] {
    font-size: 36px;
    color: var(--brand-teal, #6DC7D0);
}

.ev-card-link-preview[b-490rc2dmaq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-card-domain[b-490rc2dmaq] {
    font-size: 11px;
    color: var(--text-muted, #8B9098);
}

/* Nota style */
.ev-card--nota .ev-card-visual[b-490rc2dmaq] {
    min-height: 100px;
    padding: 16px;
    align-items: flex-start;
}

.ev-card--nota-amarillo[b-490rc2dmaq] { background: var(--note-yellow, #FFF8DC); }
.ev-card--nota-rosa[b-490rc2dmaq] { background: var(--note-pink, #FCE8EA); }
.ev-card--nota-menta[b-490rc2dmaq] { background: var(--note-mint, #E5F5EC); }
.ev-card--nota-cielo[b-490rc2dmaq] { background: var(--note-sky, #E5F1F8); }

.ev-card-nota-body[b-490rc2dmaq] {
    font-family: 'Caveat', cursive;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary, #1A1C1F);
}

/* Info footer */
.ev-card-info[b-490rc2dmaq] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--border-soft, #E8E4DD);
}

.ev-card--nota .ev-card-info[b-490rc2dmaq] {
    border-top: none;
}

.ev-card-title[b-490rc2dmaq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1A1C1F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-card-campo[b-490rc2dmaq] {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--campo-color) 15%, transparent);
    color: var(--campo-color);
    width: fit-content;
}

.ev-card-meta[b-490rc2dmaq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted, #8B9098);
}

.ev-card-author[b-490rc2dmaq] {
    font-weight: 600;
    color: var(--text-secondary, #5C6068);
}
/* /Components/Proyectos/EvidenciaLightbox.razor.rz.scp.css */
.ev-lb-backdrop[b-3tn3at7jsh] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.ev-lb-container[b-3tn3at7jsh] {
    position: relative;
    width: 92vw;
    max-width: 1100px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.ev-lb-close[b-3tn3at7jsh] {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 28px;
    z-index: 10;
}

.ev-lb-close span[b-3tn3at7jsh] { font-size: 28px; }

.ev-lb-nav[b-3tn3at7jsh] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 10;
    transition: background 0.2s;
}

.ev-lb-nav:hover[b-3tn3at7jsh] { background: rgba(255, 255, 255, 0.3); }
.ev-lb-prev[b-3tn3at7jsh] { left: -56px; }
.ev-lb-next[b-3tn3at7jsh] { right: -56px; }
.ev-lb-nav span[b-3tn3at7jsh] { font-size: 28px; }

.ev-lb-main[b-3tn3at7jsh] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
}

.ev-lb-preview[b-3tn3at7jsh] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111;
}

.ev-lb-img[b-3tn3at7jsh] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ev-lb-video[b-3tn3at7jsh] {
    width: 100%;
    max-height: 100%;
}

.ev-lb-pdf[b-3tn3at7jsh] {
    width: 100%;
    height: 100%;
    border: none;
}

.ev-lb-audio-wrap[b-3tn3at7jsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.ev-lb-audio-wrap span[b-3tn3at7jsh] { font-size: 64px; opacity: 0.6; }

.ev-lb-link-wrap[b-3tn3at7jsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

.ev-lb-link-img[b-3tn3at7jsh] {
    max-width: 80%;
    max-height: 60%;
    border-radius: 8px;
}

.ev-lb-link-info[b-3tn3at7jsh] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-teal, #6DC7D0);
}

.ev-lb-link-info a[b-3tn3at7jsh] {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
    font-size: 13px;
}

.ev-lb-nota[b-3tn3at7jsh] {
    padding: 32px;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-primary, #1A1C1F);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-lb-nota--amarillo[b-3tn3at7jsh] { background: var(--note-yellow, #FFF8DC); }
.ev-lb-nota--rosa[b-3tn3at7jsh] { background: var(--note-pink, #FCE8EA); }
.ev-lb-nota--menta[b-3tn3at7jsh] { background: var(--note-mint, #E5F5EC); }
.ev-lb-nota--cielo[b-3tn3at7jsh] { background: var(--note-sky, #E5F1F8); }

.ev-lb-generic[b-3tn3at7jsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 14px;
}

.ev-lb-generic span.material-symbols-rounded[b-3tn3at7jsh] { font-size: 48px; }

/* Meta panel */
.ev-lb-meta[b-3tn3at7jsh] {
    background: #fff;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.ev-lb-title[b-3tn3at7jsh] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #1A1C1F);
    margin: 0;
}

.ev-lb-author[b-3tn3at7jsh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #5C6068);
}

.ev-lb-avatar[b-3tn3at7jsh] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-teal, #6DC7D0), var(--brand-teal-deep, #3A8F91));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-lb-date[b-3tn3at7jsh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted, #8B9098);
}

.ev-lb-date span[b-3tn3at7jsh] { font-size: 16px; }

.ev-lb-desc[b-3tn3at7jsh] {
    font-size: 13px;
    color: var(--text-secondary, #5C6068);
    line-height: 1.5;
    border-top: 1px solid var(--border-soft, #E8E4DD);
    padding-top: 12px;
}

.ev-lb-field[b-3tn3at7jsh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

.ev-lb-field-label[b-3tn3at7jsh] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted, #8B9098);
}

.ev-lb-campo[b-3tn3at7jsh] {
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--campo-color) 15%, transparent);
    color: var(--campo-color);
    font-weight: 500;
    width: fit-content;
}
/* /Components/Proyectos/EvidenciasHighlightReel.razor.rz.scp.css */
.ev-hl-reel[b-3b68d4f7kn] {
    margin-bottom: 20px;
}

.ev-hl-title[b-3b68d4f7kn] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1A1C1F);
    margin-bottom: 12px;
}

.ev-hl-title span[b-3b68d4f7kn] {
    font-size: 18px;
    color: var(--gold, #B8860B);
}

.ev-hl-grid[b-3b68d4f7kn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: 260px;
}

.ev-hl-large[b-3b68d4f7kn] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    min-height: 240px;
}

.ev-hl-small-grid[b-3b68d4f7kn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}

.ev-hl-small[b-3b68d4f7kn] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    min-height: 116px;
}

.ev-hl-thumb[b-3b68d4f7kn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.ev-hl-icon-bg[b-3b68d4f7kn] {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f0f4f8, #e8ecf0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-hl-icon-bg span[b-3b68d4f7kn] {
    font-size: 36px;
    color: var(--text-muted, #8B9098);
}

.ev-hl-overlay[b-3b68d4f7kn] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ev-hl-overlay-title[b-3b68d4f7kn] {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-hl-overlay-author[b-3b68d4f7kn] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

.ev-hl-empty[b-3b68d4f7kn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 20px;
    color: var(--text-muted, #8B9098);
    font-size: 13px;
}

.ev-hl-empty span.material-symbols-rounded[b-3b68d4f7kn] {
    font-size: 20px;
}
/* /Components/Proyectos/HealthCardsRow.razor.rz.scp.css */
.hcr-grid[b-96rvh3286v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.hcr-card[b-96rvh3286v] {
    background: #FAF7F1;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.hcr-card[b-96rvh3286v]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #6DC7D0;
}

.hcr-card.warning[b-96rvh3286v]::before { background: #BA7517; }
.hcr-card.danger[b-96rvh3286v]::before { background: #A32D2D; }
.hcr-card.success[b-96rvh3286v]::before { background: #1D9E75; }

.hcr-card.warning[b-96rvh3286v] { background: #FFF4E1; border-color: #F1D9A6; }
.hcr-card.danger[b-96rvh3286v] { background: #FBEAEA; border-color: #F1C0C0; }
.hcr-card.success[b-96rvh3286v] { background: #E2F4EE; border-color: #B5DECC; }

.hcr-label[b-96rvh3286v] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8B9098;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hcr-label .material-symbols-rounded[b-96rvh3286v] { font-size: 14px; }

.hcr-value[b-96rvh3286v] {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: #1A1C1F;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hcr-suffix[b-96rvh3286v] {
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #5C6068;
}

.hcr-detail[b-96rvh3286v] {
    font-size: 11px;
    color: #5C6068;
    margin-top: 6px;
    line-height: 1.4;
}

.hcr-detail strong[b-96rvh3286v] { color: #1A1C1F; font-weight: 600; }

.hcr-bar[b-96rvh3286v] {
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.hcr-fill[b-96rvh3286v] {
    height: 100%;
    background: linear-gradient(90deg, #6DC7D0, #3A8F91);
    border-radius: 999px;
}

.hcr-card.warning .hcr-fill[b-96rvh3286v] { background: linear-gradient(90deg, #E0A648, #BA7517); }
.hcr-card.danger .hcr-fill[b-96rvh3286v] { background: linear-gradient(90deg, #C95252, #A32D2D); }
.hcr-card.success .hcr-fill[b-96rvh3286v] { background: linear-gradient(90deg, #4BC093, #1D9E75); }

.hcr-mini-bars[b-96rvh3286v] {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 26px;
    margin-top: 6px;
}

.hcr-bar-item[b-96rvh3286v] {
    flex: 1;
    border-radius: 2px;
    min-height: 4px;
}

.hcr-bar-item.load-light[b-96rvh3286v] { background: #1D9E75; }
.hcr-bar-item.load-balanced[b-96rvh3286v] { background: #BA7517; }
.hcr-bar-item.load-heavy[b-96rvh3286v] { background: #A32D2D; }
.hcr-bar-item.load-empty[b-96rvh3286v] { background: #BBB6AC; }

.hcr-dots[b-96rvh3286v] {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}

.hcr-dot[b-96rvh3286v] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #1D9E75;
}

.hcr-dot.muted[b-96rvh3286v] { background: rgba(29, 158, 117, 0.2); }

@media (max-width: 900px) {
    .hcr-grid[b-96rvh3286v] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Proyectos/MemberRow.razor.rz.scp.css */
.mr-row[b-3vql7r3o0z] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 10px;
    position: relative;
    transition: background 0.1s ease;
}

.mr-row:hover[b-3vql7r3o0z] { background: #FAF7F1; }

.mr-row + .mr-row[b-3vql7r3o0z] { border-top: 1px solid #E8E4DD; }

.mr-row.lider[b-3vql7r3o0z] {
    background: linear-gradient(90deg, #FAF1D6 0%, transparent 60%);
    border: 1px solid #E8D7A0;
    margin-bottom: 4px;
}

/* Avatar with ring */
.mr-avatar-ring[b-3vql7r3o0z] {
    position: relative;
    width: 48px; height: 48px;
    flex-shrink: 0;
}

.mr-ring[b-3vql7r3o0z] {
    position: absolute;
    inset: 0;
    width: 48px; height: 48px;
    transform: rotate(-90deg);
}

.mr-ring circle[b-3vql7r3o0z] { fill: none; stroke-width: 3; }
.mr-ring .mr-ring-bg[b-3vql7r3o0z] { stroke: rgba(0,0,0,0.06); }
.mr-ring .mr-ring-fill[b-3vql7r3o0z] { stroke-linecap: round; }
.mr-ring .mr-ring-fill.load-light[b-3vql7r3o0z] { stroke: #1D9E75; }
.mr-ring .mr-ring-fill.load-balanced[b-3vql7r3o0z] { stroke: #BA7517; }
.mr-ring .mr-ring-fill.load-heavy[b-3vql7r3o0z] { stroke: #A32D2D; }

.mr-avatar[b-3vql7r3o0z] {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 14px;
    position: absolute;
    top: 4px; left: 4px;
}

.mr-avatar.online[b-3vql7r3o0z]::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #1D9E75;
    border: 2px solid white;
}

/* Info */
.mr-info[b-3vql7r3o0z] { flex: 1; min-width: 0; }

.mr-name-row[b-3vql7r3o0z] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.mr-name[b-3vql7r3o0z] {
    font-size: 14px;
    font-weight: 600;
    color: #1A1C1F;
}

.mr-name.is-you[b-3vql7r3o0z] { color: #3A8F91; }

.mr-you-tag[b-3vql7r3o0z] {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    background: #6DC7D0;
    color: white;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mr-role[b-3vql7r3o0z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
}

.mr-role.role-lider[b-3vql7r3o0z] {
    background: #FAF1D6;
    color: #B8860B;
    border: 1px solid #E8D7A0;
}

.mr-role.role-lider .material-symbols-rounded[b-3vql7r3o0z] {
    font-size: 12px;
    font-variation-settings: 'FILL' 1;
}

.mr-role.role-colaborador[b-3vql7r3o0z] {
    background: #F4F0E6;
    color: #5C6068;
    border: 1px solid #E8E4DD;
}

/* Field tags (NEM) */
.mr-field-tag[b-3vql7r3o0z] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid;
}

.mr-field-tag.lenguajes[b-3vql7r3o0z] { background: #FCE8EA; color: #E63946; border-color: rgba(230, 57, 70, 0.25); }
.mr-field-tag.saberes[b-3vql7r3o0z] { background: #E8F1F8; color: #2D6EA3; border-color: rgba(45, 110, 163, 0.25); }
.mr-field-tag.etica[b-3vql7r3o0z] { background: #EEF7E8; color: #4F8E2F; border-color: rgba(107, 175, 68, 0.3); }
.mr-field-tag.humano[b-3vql7r3o0z] { background: #FAEFD9; color: #D4870E; border-color: rgba(212, 135, 14, 0.3); }

/* Workload pill */
.mr-workload[b-3vql7r3o0z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.mr-workload.light[b-3vql7r3o0z] { background: #E2F4EE; color: #1D9E75; }
.mr-workload.balanced[b-3vql7r3o0z] { background: #FFF4E1; color: #BA7517; }
.mr-workload.heavy[b-3vql7r3o0z] { background: #FBEAEA; color: #A32D2D; }
.mr-workload.empty[b-3vql7r3o0z] { background: #F4F0E6; color: #8B9098; }
.mr-workload .material-symbols-rounded[b-3vql7r3o0z] { font-size: 12px; }

/* Meta */
.mr-meta[b-3vql7r3o0z] {
    font-size: 12px;
    color: #8B9098;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mr-dot[b-3vql7r3o0z] { opacity: 0.5; }
.mr-vencidas[b-3vql7r3o0z] { color: #BA7517; }

/* Actions */
.mr-actions[b-3vql7r3o0z] {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.mr-row:hover .mr-actions[b-3vql7r3o0z] { opacity: 1; }

.mr-btn-icon[b-3vql7r3o0z] {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5C6068;
}

.mr-btn-icon:hover[b-3vql7r3o0z] {
    background: #F4F0E6;
    border-color: #E8E4DD;
    color: #A32D2D;
}
/* /Components/Proyectos/ModoPresentacion.razor.rz.scp.css */
.ev-pres-backdrop[b-gtmcegtda9] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.ev-pres-close[b-gtmcegtda9] {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 10;
}

.ev-pres-close:hover[b-gtmcegtda9] { background: rgba(255, 255, 255, 0.3); }
.ev-pres-close span[b-gtmcegtda9] { font-size: 24px; }

.ev-pres-counter[b-gtmcegtda9] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

.ev-pres-nav[b-gtmcegtda9] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 10;
    transition: background 0.2s;
}

.ev-pres-nav:hover[b-gtmcegtda9] { background: rgba(255, 255, 255, 0.25); }
.ev-pres-prev[b-gtmcegtda9] { left: 20px; }
.ev-pres-next[b-gtmcegtda9] { right: 20px; }
.ev-pres-nav span[b-gtmcegtda9] { font-size: 32px; }

.ev-pres-content[b-gtmcegtda9] {
    max-width: 85vw;
    max-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-pres-img[b-gtmcegtda9] {
    max-width: 85vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
}

.ev-pres-video[b-gtmcegtda9] {
    max-width: 85vw;
    max-height: 75vh;
}

.ev-pres-nota[b-gtmcegtda9] {
    padding: 48px;
    border-radius: 12px;
    max-width: 600px;
    font-family: 'Caveat', cursive;
    text-align: center;
}

.ev-pres-nota h2[b-gtmcegtda9] { font-size: 28px; margin-bottom: 16px; }
.ev-pres-nota p[b-gtmcegtda9] { font-size: 22px; line-height: 1.5; }

.ev-pres-nota--amarillo[b-gtmcegtda9] { background: var(--note-yellow, #FFF8DC); color: #333; }
.ev-pres-nota--rosa[b-gtmcegtda9] { background: var(--note-pink, #FCE8EA); color: #333; }
.ev-pres-nota--menta[b-gtmcegtda9] { background: var(--note-mint, #E5F5EC); color: #333; }
.ev-pres-nota--cielo[b-gtmcegtda9] { background: var(--note-sky, #E5F1F8); color: #333; }

.ev-pres-link[b-gtmcegtda9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.ev-pres-link-img[b-gtmcegtda9] {
    max-width: 70vw;
    max-height: 50vh;
    border-radius: 8px;
}

.ev-pres-link span.material-symbols-rounded[b-gtmcegtda9] { font-size: 48px; color: var(--brand-teal, #6DC7D0); }
.ev-pres-link span:last-child[b-gtmcegtda9] { font-size: 16px; }

.ev-pres-generic[b-gtmcegtda9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #aaa;
}

.ev-pres-generic span.material-symbols-rounded[b-gtmcegtda9] { font-size: 64px; }
.ev-pres-generic span:last-child[b-gtmcegtda9] { font-size: 16px; }

.ev-pres-info[b-gtmcegtda9] {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.ev-pres-info-title[b-gtmcegtda9] {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.ev-pres-info-author[b-gtmcegtda9] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ev-pres-info-phase[b-gtmcegtda9] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.ev-pres-dots[b-gtmcegtda9] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.ev-pres-dot[b-gtmcegtda9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.2s;
}

.ev-pres-dot.active[b-gtmcegtda9] {
    background: #fff;
}
/* /Components/Proyectos/ProjectsSidebar.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   ProjectsSidebar — 300px · oscuro (mismo paradigma que ChannelSidebar)
   ──────────────────────────────────────────────────────────────────── */

.ps-sidebar[b-l7nv8ossh1] {
    width: 300px;
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-sidebar);
    font-family: var(--font-sans);
}

/* Header */
.ps-header[b-l7nv8ossh1] {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border-sidebar);
    flex-shrink: 0;
}

.ps-title[b-l7nv8ossh1] {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 19px;
    color: #FFFFFF;
    letter-spacing: -0.3px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-title .material-symbols-rounded[b-l7nv8ossh1] {
    color: var(--brand-teal);
    font-size: 22px !important;
}

.ps-subtitle[b-l7nv8ossh1] {
    font-size: 12px;
    color: var(--text-sidebar-muted);
    letter-spacing: 0.2px;
}

/* New button */
.ps-new-btn[b-l7nv8ossh1] {
    margin: 12px 14px 10px;
    padding: 10px 14px;
    background: var(--brand-teal-primary);
    color: #0F3A3C;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(110, 198, 200, 0.25);
}

.ps-new-btn:hover[b-l7nv8ossh1] {
    background: var(--brand-teal);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.35);
}

.ps-new-btn .material-symbols-rounded[b-l7nv8ossh1] { font-size: 18px !important; }

/* Search */
.ps-search[b-l7nv8ossh1] {
    margin: 0 14px 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ps-search .material-symbols-rounded[b-l7nv8ossh1] {
    font-size: 16px;
    color: var(--text-sidebar-muted);
}

.ps-search input[b-l7nv8ossh1] {
    background: none;
    border: none;
    color: var(--text-sidebar);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    flex: 1;
    min-width: 0;
}

.ps-search input[b-l7nv8ossh1]::placeholder { color: var(--text-sidebar-muted); }

/* Chips superiores */
.ps-chips[b-l7nv8ossh1] {
    display: flex;
    gap: 4px;
    padding: 6px 14px 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ps-filter-chip[b-l7nv8ossh1] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-sidebar-muted);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.ps-filter-chip:hover[b-l7nv8ossh1] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-sidebar);
}

.ps-filter-chip.active[b-l7nv8ossh1] {
    background: rgba(110, 198, 200, 0.2);
    color: var(--brand-teal);
    border-color: rgba(110, 198, 200, 0.4);
}

/* Scroll */
.ps-scroll[b-l7nv8ossh1] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 14px;
    scrollbar-width: thin;
    scrollbar-color: #3A3F47 transparent;
}

.ps-scroll[b-l7nv8ossh1]::-webkit-scrollbar { width: 6px; }
.ps-scroll[b-l7nv8ossh1]::-webkit-scrollbar-thumb { background: #3A3F47; border-radius: 3px; }

/* Type group */
.ps-type-group[b-l7nv8ossh1] { padding: 2px 8px; }

.ps-type-header[b-l7nv8ossh1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.ps-type-dot[b-l7nv8ossh1] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ps-type-name[b-l7nv8ossh1] { color: var(--text-sidebar); }

.ps-type-count[b-l7nv8ossh1] {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-sidebar-muted);
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Project item */
.ps-proj[b-l7nv8ossh1] {
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
    position: relative;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.ps-proj:hover[b-l7nv8ossh1] { background: var(--bg-sidebar-hover); }

.ps-proj.active[b-l7nv8ossh1] { background: var(--bg-sidebar-active); }

.ps-proj.active[b-l7nv8ossh1]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--brand-teal);
    border-radius: 0 2px 2px 0;
}

.ps-proj-accent[b-l7nv8ossh1] {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}

.ps-proj-info[b-l7nv8ossh1] { flex: 1; min-width: 0; }

.ps-proj-name[b-l7nv8ossh1] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sidebar);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}

.ps-proj.active .ps-proj-name[b-l7nv8ossh1] {
    color: var(--text-sidebar-active);
    font-weight: 600;
}

.ps-proj:hover .ps-proj-name[b-l7nv8ossh1] { color: var(--text-sidebar-active); }

.ps-proj-meta[b-l7nv8ossh1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-sidebar-muted);
}

.ps-proj-bar[b-l7nv8ossh1] {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.ps-proj-fill[b-l7nv8ossh1] {
    height: 100%;
    border-radius: 2px;
}

.ps-proj-val[b-l7nv8ossh1] {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-sidebar-muted);
    font-variant-numeric: tabular-nums;
}

.ps-proj.active .ps-proj-val[b-l7nv8ossh1] { color: var(--brand-teal); }

/* Footer user */
.ps-user[b-l7nv8ossh1] {
    padding: 10px 12px;
    border-top: 1px solid var(--border-sidebar);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.ps-user-avatar[b-l7nv8ossh1] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #F4B860, #E89B3C);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--font-sans);
}

.ps-user-info[b-l7nv8ossh1] { flex: 1; overflow: hidden; }

.ps-user-name[b-l7nv8ossh1] {
    color: var(--text-sidebar-active);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.1;
}

.ps-user-status[b-l7nv8ossh1] {
    font-size: 10.5px;
    color: var(--text-sidebar-muted);
    margin-top: 2px;
}

/* Empty state del sidebar */
.ps-empty[b-l7nv8ossh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 16px;
    gap: 8px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
}

.ps-empty .material-symbols-rounded[b-l7nv8ossh1] {
    font-size: 32px !important;
    color: rgba(255,255,255,0.25);
}
/* /Components/Proyectos/ProyectoMenuDropdown.razor.rz.scp.css */
.pmd-dropdown[b-ftehxf0s0l] {
    position: absolute;
    top: 44px;
    right: 0;
    width: 220px;
    background: var(--bg-panel, #FFFFFF);
    border: 1px solid var(--border-soft, #E8E4DD);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(26, 28, 31, 0.15), 0 4px 12px rgba(26, 28, 31, 0.08);
    padding: 6px;
    z-index: 100;
}

.pmd-item[b-ftehxf0s0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text-primary, #1A1C1F);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.pmd-item:hover[b-ftehxf0s0l] {
    background: var(--bg-cream, #F4F0E6);
}

.pmd-item .material-symbols-rounded[b-ftehxf0s0l] {
    font-size: 18px;
}

.pmd-shortcut[b-ftehxf0s0l] {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted, #8B9098);
    font-family: 'SF Mono', Menlo, monospace;
}

.pmd-badge-soon[b-ftehxf0s0l] {
    margin-left: auto;
    font-size: 10px;
    background: var(--bg-cream, #F4F0E6);
    color: var(--text-muted, #8B9098);
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pmd-disabled[b-ftehxf0s0l] {
    color: var(--text-muted, #8B9098);
    cursor: not-allowed;
    pointer-events: none;
}

.pmd-divider[b-ftehxf0s0l] {
    height: 1px;
    background: var(--border-soft, #E8E4DD);
    margin: 4px 6px;
}

.pmd-danger[b-ftehxf0s0l] {
    color: #A32D2D;
}

.pmd-danger:hover[b-ftehxf0s0l] {
    background: #FBEAEA;
}
/* /Components/Proyectos/SubirEvidenciaModal.razor.rz.scp.css */
.ev-modal-backdrop[b-gvtaoq9l8q] {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-modal[b-gvtaoq9l8q] {
    background: #fff;
    border-radius: 14px;
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.ev-modal-header[b-gvtaoq9l8q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 0;
}

.ev-modal-header h3[b-gvtaoq9l8q] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #1A1C1F);
}

.ev-modal-close[b-gvtaoq9l8q] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #8B9098);
    font-size: 22px;
}

.ev-modal-tabs[b-gvtaoq9l8q] {
    display: flex;
    gap: 4px;
    padding: 14px 24px 0;
}

.ev-modal-tab[b-gvtaoq9l8q] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary, #5C6068);
    cursor: pointer;
    transition: background 0.15s;
}

.ev-modal-tab:hover[b-gvtaoq9l8q] { background: #f3f4f6; }
.ev-modal-tab.active[b-gvtaoq9l8q] {
    background: color-mix(in srgb, var(--brand-teal, #6DC7D0) 12%, transparent);
    color: var(--brand-teal-deep, #3A8F91);
    font-weight: 600;
}

.ev-modal-tab span[b-gvtaoq9l8q] { font-size: 18px; }

.ev-modal-body[b-gvtaoq9l8q] {
    padding: 18px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ev-modal-dropzone[b-gvtaoq9l8q] {
    position: relative;
    border: 2px dashed var(--border-soft, #E8E4DD);
    border-radius: 10px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.ev-modal-dropzone:hover[b-gvtaoq9l8q] {
    border-color: var(--brand-teal, #6DC7D0);
}

.ev-modal-dropzone span.material-symbols-rounded[b-gvtaoq9l8q] {
    font-size: 36px;
    color: var(--brand-teal, #6DC7D0);
}

.ev-modal-dropzone-text[b-gvtaoq9l8q] {
    font-size: 13px;
    color: var(--text-muted, #8B9098);
}

.ev-modal-file-input[b-gvtaoq9l8q] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ev-modal-field[b-gvtaoq9l8q] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ev-modal-field label[b-gvtaoq9l8q] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #5C6068);
}

.ev-modal-field input[b-gvtaoq9l8q],
.ev-modal-field select[b-gvtaoq9l8q],
.ev-modal-field textarea[b-gvtaoq9l8q] {
    padding: 9px 12px;
    border: 1px solid var(--border-soft, #E8E4DD);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, #1A1C1F);
    outline: none;
    transition: border-color 0.15s;
}

.ev-modal-field input:focus[b-gvtaoq9l8q],
.ev-modal-field select:focus[b-gvtaoq9l8q],
.ev-modal-field textarea:focus[b-gvtaoq9l8q] {
    border-color: var(--brand-teal, #6DC7D0);
}

.ev-modal-nota-text[b-gvtaoq9l8q] {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    min-height: 100px;
    resize: vertical;
}

.ev-modal-colors[b-gvtaoq9l8q] {
    display: flex;
    gap: 8px;
}

.ev-modal-color-btn[b-gvtaoq9l8q] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.ev-modal-color-btn:hover[b-gvtaoq9l8q] { transform: scale(1.15); }
.ev-modal-color-btn.active[b-gvtaoq9l8q] { border-color: var(--text-primary, #1A1C1F); }

.ev-modal-color--amarillo[b-gvtaoq9l8q] { background: var(--note-yellow, #FFF8DC); }
.ev-modal-color--rosa[b-gvtaoq9l8q] { background: var(--note-pink, #FCE8EA); }
.ev-modal-color--menta[b-gvtaoq9l8q] { background: var(--note-mint, #E5F5EC); }
.ev-modal-color--cielo[b-gvtaoq9l8q] { background: var(--note-sky, #E5F1F8); }

.ev-modal-toggle-field label[b-gvtaoq9l8q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.ev-modal-footer[b-gvtaoq9l8q] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--border-soft, #E8E4DD);
}

.ev-modal-btn-cancel[b-gvtaoq9l8q] {
    padding: 9px 16px;
    border: 1px solid var(--border-soft, #E8E4DD);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-secondary, #5C6068);
}

.ev-modal-btn-submit[b-gvtaoq9l8q] {
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background: var(--brand-teal, #6DC7D0);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.ev-modal-btn-submit:hover:not(:disabled)[b-gvtaoq9l8q] { background: var(--brand-teal-deep, #3A8F91); }
.ev-modal-btn-submit:disabled[b-gvtaoq9l8q] { opacity: 0.5; cursor: not-allowed; }
.ev-modal-btn-submit span[b-gvtaoq9l8q] { font-size: 18px; }

.ev-spin[b-gvtaoq9l8q] {
    animation: ev-spin-anim-b-gvtaoq9l8q 1s linear infinite;
}

@keyframes ev-spin-anim-b-gvtaoq9l8q {
    to { transform: rotate(360deg); }
}
/* /Components/Proyectos/TabCanal.razor.rz.scp.css */
.tab-canal-empty[b-b07imhw1g8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #8B9098;
}

.tab-canal-empty .material-symbols-rounded[b-b07imhw1g8] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.tab-canal-empty h3[b-b07imhw1g8] {
    font-size: 16px;
    font-weight: 600;
    color: #5C6068;
    margin-bottom: 6px;
}

.tab-canal-empty p[b-b07imhw1g8] {
    font-size: 13px;
    color: #8B9098;
}
/* /Components/Proyectos/TabEvidencias.razor.rz.scp.css */
.te-loading[b-1ct1vamhoe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 20px;
    color: var(--text-muted, #8B9098);
    font-size: 14px;
}

.te-spin[b-1ct1vamhoe] {
    animation: te-spin-anim-b-1ct1vamhoe 1s linear infinite;
}

@keyframes te-spin-anim-b-1ct1vamhoe {
    to { transform: rotate(360deg); }
}

/* Metrics row */
.te-metrics[b-1ct1vamhoe] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.te-chip[b-1ct1vamhoe] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid var(--border-soft, #E8E4DD);
}

.te-chip span.material-symbols-rounded[b-1ct1vamhoe] {
    font-size: 18px;
    color: var(--brand-teal, #6DC7D0);
}

.te-chip-value[b-1ct1vamhoe] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1A1C1F);
}

.te-chip-label[b-1ct1vamhoe] {
    font-size: 12px;
    color: var(--text-muted, #8B9098);
}

/* Toolbar */
.te-toolbar[b-1ct1vamhoe] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.te-filters[b-1ct1vamhoe] {
    display: flex;
    gap: 4px;
}

.te-filter[b-1ct1vamhoe] {
    padding: 6px 12px;
    border: 1px solid var(--border-soft, #E8E4DD);
    border-radius: 20px;
    background: #fff;
    font-size: 12px;
    color: var(--text-secondary, #5C6068);
    cursor: pointer;
    transition: all 0.15s;
}

.te-filter:hover[b-1ct1vamhoe] {
    border-color: var(--brand-teal, #6DC7D0);
}

.te-filter.active[b-1ct1vamhoe] {
    background: var(--brand-teal, #6DC7D0);
    border-color: var(--brand-teal, #6DC7D0);
    color: #fff;
    font-weight: 600;
}

.te-search[b-1ct1vamhoe] {
    flex: 1;
    min-width: 160px;
    max-width: 260px;
    padding: 7px 12px;
    border: 1px solid var(--border-soft, #E8E4DD);
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}

.te-search:focus[b-1ct1vamhoe] {
    border-color: var(--brand-teal, #6DC7D0);
}

.te-actions[b-1ct1vamhoe] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.te-btn-presentacion[b-1ct1vamhoe] {
    padding: 7px 10px;
    border: 1px solid var(--border-soft, #E8E4DD);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.te-btn-presentacion span[b-1ct1vamhoe] {
    font-size: 20px;
    color: var(--text-secondary, #5C6068);
}

.te-btn-presentacion:hover[b-1ct1vamhoe] {
    border-color: var(--brand-teal, #6DC7D0);
}

.te-btn-subir[b-1ct1vamhoe] {
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: var(--brand-teal, #6DC7D0);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}

.te-btn-subir:hover[b-1ct1vamhoe] {
    background: var(--brand-teal-deep, #3A8F91);
}

.te-btn-subir span[b-1ct1vamhoe] {
    font-size: 18px;
}

/* Gallery */
.te-gallery[b-1ct1vamhoe] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.te-gallery-group-title[b-1ct1vamhoe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #5C6068);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.te-gallery-grid[b-1ct1vamhoe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Empty state */
.te-empty[b-1ct1vamhoe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-muted, #8B9098);
    font-size: 14px;
}

.te-empty span.material-symbols-rounded[b-1ct1vamhoe] {
    font-size: 40px;
    opacity: 0.5;
}
/* /Components/Proyectos/TabIntegrantes.razor.rz.scp.css */
.ti-loading[b-0azmz9hc2x] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 48px 24px;
    color: #5C6068;
    font-size: 14px;
}

.ti-spin[b-0azmz9hc2x] {
    animation: spin-b-0azmz9hc2x 1s linear infinite;
}

@keyframes spin-b-0azmz9hc2x { to { transform: rotate(360deg); } }

.ti-toolbar[b-0azmz9hc2x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ti-search[b-0azmz9hc2x] {
    flex: 1;
    max-width: 320px;
    padding: 8px 12px 8px 36px;
    border: 1px solid #D4CFC5;
    border-radius: 9px;
    background: #FAF7F1;
    font-family: inherit;
    font-size: 13px;
    color: #1A1C1F;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B9098' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.ti-search:focus[b-0azmz9hc2x] {
    outline: none;
    border-color: #6DC7D0;
    box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.15);
}

.ti-filter-chips[b-0azmz9hc2x] {
    display: flex;
    gap: 6px;
}

.ti-chip[b-0azmz9hc2x] {
    padding: 6px 12px;
    border: 1px solid #D4CFC5;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #5C6068;
    background: #FFFFFF;
    cursor: pointer;
}

.ti-chip.active[b-0azmz9hc2x] {
    background: #3A3D42;
    color: white;
    border-color: #3A3D42;
}

.ti-spacer[b-0azmz9hc2x] { flex: 1; }

.ti-btn-primary[b-0azmz9hc2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #3A3D42;
    color: white;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.ti-btn-primary:hover[b-0azmz9hc2x] { background: #2A2D32; }

.ti-section-title[b-0azmz9hc2x] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8B9098;
    padding: 12px 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ti-count[b-0azmz9hc2x] {
    background: #F4F0E6;
    color: #5C6068;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
}

.ti-empty[b-0azmz9hc2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: #8B9098;
}

.ti-empty .material-symbols-rounded[b-0azmz9hc2x] { font-size: 40px; }
/* /Components/Proyectos/WorkloadRing.razor.rz.scp.css */
.wlr-ring[b-tlozm5vjpc] {
    transform: rotate(-90deg);
}

.wlr-ring circle[b-tlozm5vjpc] {
    fill: none;
    stroke-width: 3;
}

.wlr-bg[b-tlozm5vjpc] { stroke: rgba(0,0,0,0.06); }
.wlr-fill[b-tlozm5vjpc] { stroke-linecap: round; }
.wlr-fill.load-light[b-tlozm5vjpc] { stroke: #1D9E75; }
.wlr-fill.load-balanced[b-tlozm5vjpc] { stroke: #BA7517; }
.wlr-fill.load-heavy[b-tlozm5vjpc] { stroke: #A32D2D; }
/* /Components/ReporteRapidoPanel.razor.rz.scp.css */
/* Overlay */
.rpanel-overlay[b-f5btd28fit] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99;
}

/* Panel */
.rpanel-container[b-f5btd28fit] {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: 480px;
    background: white;
    border-left: 1px solid #E0E0E0;
    z-index: 100;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.rpanel-open[b-f5btd28fit] { transform: translateX(0); }

/* Header rojo */
.rpanel-header[b-f5btd28fit] {
    background: #D35D52;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
}
.rpanel-header-left[b-f5btd28fit] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.rpanel-close[b-f5btd28fit] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.rpanel-close:hover[b-f5btd28fit] { background: rgba(255,255,255,0.3); }
.rpanel-subtitle[b-f5btd28fit] { font-size: 10px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; }
.rpanel-name[b-f5btd28fit] {
    font-size: 14px;
    font-weight: 500;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* Content */
.rpanel-content[b-f5btd28fit] { padding: 16px; }

/* Loading */
.rpanel-loading[b-f5btd28fit] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 12px;
    color: #999;
    font-size: 13px;
}
.rpanel-spinner[b-f5btd28fit] {
    width: 28px; height: 28px;
    border: 3px solid #FDEAEA;
    border-top: 3px solid #D35D52;
    border-radius: 50%;
    animation: rspin 0.8s linear infinite;
}
@@keyframes rspin { to[b-f5btd28fit] { transform: rotate(360deg); } }

/* Sections */
.rpanel-section[b-f5btd28fit] { margin-bottom: 16px; }
.rpanel-section-title[b-f5btd28fit] {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Falta chips */
.falta-chips[b-f5btd28fit] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.falta-chip[b-f5btd28fit] {
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.falta-chip-inactive[b-f5btd28fit] {
    background: white;
    border: 1px solid #DDD;
    color: #666;
}
.falta-chip-inactive:hover[b-f5btd28fit] { border-color: #BBB; }
.falta-chip-active[b-f5btd28fit] {
    background: rgba(211,93,82,0.1);
    border: 1.5px solid #D35D52;
    color: #D35D52;
    font-weight: 500;
}

/* Grave dropdown */
.grave-select-wrapper[b-f5btd28fit] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 8px 14px;
}
.grave-select[b-f5btd28fit] {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    background: transparent;
    cursor: pointer;
}

/* Textarea */
.rpanel-textarea[b-f5btd28fit] {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #333;
    resize: vertical;
    background: #FBFBFB;
    outline: none;
    transition: border-color 0.2s;
}
.rpanel-textarea:focus[b-f5btd28fit] { border-color: #D35D52; }

/* Notifications card */
.rpanel-notif-card[b-f5btd28fit] {
    background: #F7F7F7;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}
.rpanel-notif-title[b-f5btd28fit] {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.rpanel-notif-row[b-f5btd28fit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}
.rpanel-notif-info[b-f5btd28fit] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
}

/* Toggle switch */
.toggle-switch[b-f5btd28fit] {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #CCC;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch.active[b-f5btd28fit] { background: #4BA8AA; }
.toggle-switch[b-f5btd28fit]::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch.active[b-f5btd28fit]::after { transform: translateX(18px); }

/* WhatsApp card */
.rpanel-wa-card[b-f5btd28fit] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(37,211,102,0.06);
    border: 1px solid rgba(37,211,102,0.2);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
}

/* Historial */
.rpanel-historial[b-f5btd28fit] {
    background: #F7F7F7;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}
.rpanel-hist-item[b-f5btd28fit] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid #EAEAEA;
}
.rpanel-hist-item:last-child[b-f5btd28fit] { border-bottom: none; }
.rpanel-hist-bar[b-f5btd28fit] {
    width: 3px;
    border-radius: 2px;
    background: #E88D8D;
    flex-shrink: 0;
    min-height: 24px;
}
.rpanel-hist-content[b-f5btd28fit] { flex: 1; min-width: 0; }
.rpanel-hist-faltas[b-f5btd28fit] { font-size: 11px; font-weight: 500; color: #D35D52; margin-bottom: 2px; }
.rpanel-hist-desc[b-f5btd28fit] { font-size: 11px; color: #555; }
.rpanel-hist-meta[b-f5btd28fit] { font-size: 10px; color: #BBB; margin-top: 3px; }

/* Submit button */
.rpanel-btn-agregar[b-f5btd28fit] {
    width: 100%;
    background: #D35D52;
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
    margin-bottom: 12px;
}
.rpanel-btn-agregar:hover:not(:disabled)[b-f5btd28fit] { opacity: 0.9; }
.rpanel-btn-agregar:disabled[b-f5btd28fit] { opacity: 0.5; cursor: not-allowed; }

/* Toast */
.rpanel-toast[b-f5btd28fit] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(75,168,170,0.12);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.25);
    animation: rslideUp 0.3s ease;
}
@@keyframes rslideUp {
    from[b-f5btd28fit] { opacity: 0; transform: translateY(10px); }
    to[b-f5btd28fit] { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@@media (max-width: 1024px) {
    .rpanel-container[b-f5btd28fit] { width: 420px; }
}
@@media (max-width: 768px) {
    .rpanel-container[b-f5btd28fit] { width: 100%; }
    .rpanel-name[b-f5btd28fit] { max-width: 180px; }
}
/* /Components/Tareas/TareaCrearModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   TareaCrearModal — modal de creación (prefijo tcm-).
   ═══════════════════════════════════════════════════════════════════════ */

.tcm-overlay[b-ugow8ayb3e] {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: tcm-fade-b-ugow8ayb3e 0.15s ease forwards;
}

@keyframes tcm-fade-b-ugow8ayb3e { to { opacity: 1; } }

.tcm-modal[b-ugow8ayb3e] {
    width: 520px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--bg-card, #fff);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateY(12px);
    animation: tcm-slide-b-ugow8ayb3e 0.2s ease forwards;
    overflow: hidden;
}

@keyframes tcm-slide-b-ugow8ayb3e { to { transform: translateY(0); } }

/* ── Header ─────────────────────────────────────────────────────── */
.tcm-header[b-ugow8ayb3e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.tcm-header .material-symbols-rounded[b-ugow8ayb3e] { font-size: 22px; color: var(--brand-teal); }

.tcm-header h2[b-ugow8ayb3e] {
    font: 600 16px/1 var(--font-sans);
    color: var(--text-primary);
    margin: 0;
}

.tcm-spacer[b-ugow8ayb3e] { flex: 1; }

.tcm-close[b-ugow8ayb3e] {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s ease;
}

.tcm-close:hover[b-ugow8ayb3e] { background: var(--bg-hover, #f5f4f1); color: var(--text-primary); }
.tcm-close .material-symbols-rounded[b-ugow8ayb3e] { font-size: 22px; }

/* ── Body ───────────────────────────────────────────────────────── */
.tcm-body[b-ugow8ayb3e] {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tcm-field[b-ugow8ayb3e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tcm-label[b-ugow8ayb3e] {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 600 11px/1 var(--font-sans);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tcm-label .material-symbols-rounded[b-ugow8ayb3e] { font-size: 15px; }

.tcm-input[b-ugow8ayb3e],
.tcm-textarea[b-ugow8ayb3e] {
    font: 400 14px/1.4 var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s ease;
}

.tcm-input:focus[b-ugow8ayb3e],
.tcm-textarea:focus[b-ugow8ayb3e] {
    border-color: var(--brand-teal);
}

.tcm-textarea[b-ugow8ayb3e] {
    resize: vertical;
    min-height: 60px;
}

.tcm-textarea[b-ugow8ayb3e]::placeholder,
.tcm-input[b-ugow8ayb3e]::placeholder {
    color: var(--text-muted);
}

.tcm-row[b-ugow8ayb3e] {
    display: flex;
    gap: 12px;
}

.tcm-half[b-ugow8ayb3e] { flex: 1; min-width: 0; }

/* ── Priority buttons ───────────────────────────────────────────── */
.tcm-priority-btns[b-ugow8ayb3e] {
    display: flex;
    gap: 4px;
}

.tcm-priority-btn[b-ugow8ayb3e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s ease;
}

.tcm-priority-btn .material-symbols-rounded[b-ugow8ayb3e] { font-size: 16px; }
.tcm-priority-label[b-ugow8ayb3e] { font: 500 11px/1 var(--font-sans); }

.tcm-priority-btn:hover[b-ugow8ayb3e] { border-color: var(--text-muted); }

.tcm-priority-1.active[b-ugow8ayb3e] { background: #DBEAFE; border-color: #3B82F6; color: #3B82F6; }
.tcm-priority-2.active[b-ugow8ayb3e] { background: #E0E7FF; border-color: #6366F1; color: #6366F1; }
.tcm-priority-3.active[b-ugow8ayb3e] { background: #FEF3C7; border-color: #F59E0B; color: #D97706; }
.tcm-priority-4.active[b-ugow8ayb3e] { background: #FEE2E2; border-color: #EF4444; color: #EF4444; }

/* ── Footer ─────────────────────────────────────────────────────── */
.tcm-footer[b-ugow8ayb3e] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-soft);
}

.tcm-btn-cancel[b-ugow8ayb3e] {
    padding: 8px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: 500 13px/1 var(--font-sans);
    cursor: pointer;
    transition: all 0.12s ease;
}

.tcm-btn-cancel:hover[b-ugow8ayb3e] { background: var(--bg-hover, #f5f4f1); }

.tcm-btn-crear[b-ugow8ayb3e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: var(--brand-teal);
    color: #fff;
    font: 600 13px/1 var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tcm-btn-crear:hover[b-ugow8ayb3e] { opacity: 0.9; box-shadow: 0 2px 8px rgba(110, 198, 200, 0.3); }
.tcm-btn-crear:disabled[b-ugow8ayb3e] { opacity: 0.5; cursor: not-allowed; }
.tcm-btn-crear .material-symbols-rounded[b-ugow8ayb3e] { font-size: 18px; }

@keyframes tcm-spin-anim-b-ugow8ayb3e { to { transform: rotate(360deg); } }
.tcm-spin[b-ugow8ayb3e] { animation: tcm-spin-anim-b-ugow8ayb3e 0.8s linear infinite; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .tcm-row[b-ugow8ayb3e] { flex-direction: column; gap: 14px; }
    .tcm-modal[b-ugow8ayb3e] { max-width: 100vw; border-radius: 14px 14px 0 0; margin-top: auto; }
}
/* /Components/Tareas/TareaDrawer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   TareaDrawer — drawer lateral derecho (prefijo td-).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay + slide animation ──────────────────────────────────── */
.td-overlay[b-353d9cmc8p] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    animation: td-fade-in-b-353d9cmc8p 0.2s ease forwards;
}

@keyframes td-fade-in-b-353d9cmc8p {
    to { opacity: 1; }
}

.td-drawer[b-353d9cmc8p] {
    width: 420px;
    max-width: 100vw;
    height: 100%;
    background: var(--bg-card, #fff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    animation: td-slide-in-b-353d9cmc8p 0.25s ease forwards;
}

@keyframes td-slide-in-b-353d9cmc8p {
    to { transform: translateX(0); }
}

/* ── Loading ────────────────────────────────────────────────────── */
.td-loading[b-353d9cmc8p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 200px;
    color: var(--text-muted);
    font: 400 14px/1 var(--font-sans);
}

.td-loading .material-symbols-rounded[b-353d9cmc8p] { font-size: 32px; }

@keyframes td-spin-anim-b-353d9cmc8p {
    to { transform: rotate(360deg); }
}
.td-spin[b-353d9cmc8p] { animation: td-spin-anim-b-353d9cmc8p 0.8s linear infinite; }

/* ── Header ─────────────────────────────────────────────────────── */
.td-header[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}

.td-close[b-353d9cmc8p] {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s ease;
}

.td-close:hover[b-353d9cmc8p] {
    background: var(--bg-hover, #f5f4f1);
    color: var(--text-primary);
}

.td-close .material-symbols-rounded[b-353d9cmc8p] { font-size: 22px; }

.td-id[b-353d9cmc8p] {
    font: 600 12px/1 var(--font-mono, monospace);
    color: var(--text-muted);
    background: var(--bg-hover, #f5f4f1);
    padding: 2px 8px;
    border-radius: 4px;
}

.td-header-spacer[b-353d9cmc8p] { flex: 1; }

.td-icon-btn[b-353d9cmc8p] {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s ease;
}

.td-icon-btn:hover[b-353d9cmc8p] {
    background: var(--bg-hover, #f5f4f1);
    color: var(--text-primary);
}

.td-icon-btn .material-symbols-rounded[b-353d9cmc8p] { font-size: 20px; }

/* ── Body (scrollable) ──────────────────────────────────────────── */
.td-body[b-353d9cmc8p] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.td-body[b-353d9cmc8p]::-webkit-scrollbar { width: 6px; }
.td-body[b-353d9cmc8p]::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }

/* ── Complete button ────────────────────────────────────────────── */
.td-complete-btn[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid var(--brand-teal);
    border-radius: 10px;
    background: rgba(110, 198, 200, 0.06);
    color: var(--brand-teal);
    font: 600 14px/1 var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
}

.td-complete-btn:hover[b-353d9cmc8p] {
    background: rgba(110, 198, 200, 0.12);
}

.td-complete-btn .material-symbols-rounded[b-353d9cmc8p] { font-size: 22px; }

.td-complete-btn.td-completed[b-353d9cmc8p] {
    border-color: var(--success, #22C55E);
    background: rgba(34, 197, 94, 0.08);
    color: var(--success, #22C55E);
}

/* ── Title ──────────────────────────────────────────────────────── */
.td-title-section[b-353d9cmc8p] { min-height: 32px; }

.td-title[b-353d9cmc8p] {
    font: 600 18px/1.3 var(--font-sans);
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 4px;
    transition: background 0.12s ease;
}

.td-title:hover[b-353d9cmc8p] {
    background: var(--bg-hover, #f5f4f1);
}

.td-title-done[b-353d9cmc8p] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.td-title-input[b-353d9cmc8p] {
    width: 100%;
    font: 600 18px/1.3 var(--font-sans);
    color: var(--text-primary);
    border: 2px solid var(--brand-teal);
    border-radius: 6px;
    padding: 4px 8px;
    background: var(--bg-card, #fff);
    outline: none;
}

/* ── Meta grid ──────────────────────────────────────────────────── */
.td-meta-grid[b-353d9cmc8p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-hover, #f5f4f1);
    border-radius: 10px;
}

.td-meta-row[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.td-meta-icon[b-353d9cmc8p] {
    font-size: 18px;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
}

.td-meta-label[b-353d9cmc8p] {
    font: 500 12px/1 var(--font-sans);
    color: var(--text-muted);
    width: 80px;
    flex-shrink: 0;
}

.td-meta-input[b-353d9cmc8p],
.td-meta-select[b-353d9cmc8p] {
    flex: 1;
    min-width: 0;
    font: 400 13px/1 var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.15s ease;
}

.td-meta-input:focus[b-353d9cmc8p],
.td-meta-select:focus[b-353d9cmc8p] {
    border-color: var(--brand-teal);
}

/* ── Priority buttons ───────────────────────────────────────────── */
.td-priority-btns[b-353d9cmc8p] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.td-priority-btn[b-353d9cmc8p] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s ease;
}

.td-priority-btn .material-symbols-rounded[b-353d9cmc8p] { font-size: 18px; }

.td-priority-btn:hover[b-353d9cmc8p] { border-color: var(--text-muted); }

.td-priority-1.active[b-353d9cmc8p] { background: #DBEAFE; border-color: #3B82F6; color: #3B82F6; }
.td-priority-2.active[b-353d9cmc8p] { background: #E0E7FF; border-color: #6366F1; color: #6366F1; }
.td-priority-3.active[b-353d9cmc8p] { background: #FEF3C7; border-color: #F59E0B; color: #D97706; }
.td-priority-4.active[b-353d9cmc8p] { background: #FEE2E2; border-color: #EF4444; color: #EF4444; }

/* ── Sections ───────────────────────────────────────────────────── */
.td-section[b-353d9cmc8p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.td-section-header[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 13px/1 var(--font-sans);
    color: var(--text-secondary);
}

.td-section-header .material-symbols-rounded[b-353d9cmc8p] { font-size: 18px; }

/* ── Description textarea ───────────────────────────────────────── */
.td-description[b-353d9cmc8p] {
    font: 400 13px/1.5 var(--font-sans);
    color: var(--text-primary);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg-card, #fff);
    resize: vertical;
    min-height: 60px;
    outline: none;
    transition: border-color 0.15s ease;
}

.td-description:focus[b-353d9cmc8p] {
    border-color: var(--brand-teal);
}

.td-description[b-353d9cmc8p]::placeholder {
    color: var(--text-muted);
}

/* ── Subtasks ───────────────────────────────────────────────────── */
.td-subtask-counter[b-353d9cmc8p] {
    margin-left: auto;
    font: 500 11px/1 var(--font-sans);
    color: var(--text-muted);
    background: var(--bg-hover, #f5f4f1);
    padding: 2px 8px;
    border-radius: 10px;
}

.td-subtask-progress[b-353d9cmc8p] { margin-bottom: 4px; }

.td-subtask-bar[b-353d9cmc8p] {
    height: 4px;
    background: var(--bg-skeleton, #eae7de);
    border-radius: 4px;
    overflow: hidden;
}

.td-subtask-bar-fill[b-353d9cmc8p] {
    height: 100%;
    background: var(--brand-teal);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.td-subtask-item[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.td-subtask-check[b-353d9cmc8p] {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    transition: color 0.12s ease;
}

.td-subtask-check:hover[b-353d9cmc8p] { color: var(--brand-teal); }

.td-subtask-check .material-symbols-rounded[b-353d9cmc8p] { font-size: 20px; }

.td-subtask-done .td-subtask-check[b-353d9cmc8p] { color: var(--success, #22C55E); }

.td-subtask-title[b-353d9cmc8p] {
    font: 400 13px/1.4 var(--font-sans);
    color: var(--text-primary);
}

.td-subtask-done .td-subtask-title[b-353d9cmc8p] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.td-subtask-new[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.td-subtask-input[b-353d9cmc8p] {
    flex: 1;
    font: 400 13px/1 var(--font-sans);
    color: var(--text-primary);
    border: 1px solid var(--brand-teal);
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
    background: var(--bg-card, #fff);
}

.td-subtask-add-btn[b-353d9cmc8p],
.td-subtask-cancel-btn[b-353d9cmc8p] {
    padding: 4px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    transition: all 0.12s ease;
}

.td-subtask-add-btn[b-353d9cmc8p] {
    background: var(--brand-teal);
    color: #fff;
}

.td-subtask-add-btn:hover[b-353d9cmc8p] { opacity: 0.85; }

.td-subtask-cancel-btn[b-353d9cmc8p] {
    background: transparent;
    color: var(--text-muted);
}

.td-subtask-cancel-btn:hover[b-353d9cmc8p] {
    background: var(--bg-hover, #f5f4f1);
}

.td-subtask-add-btn .material-symbols-rounded[b-353d9cmc8p],
.td-subtask-cancel-btn .material-symbols-rounded[b-353d9cmc8p] { font-size: 18px; }

.td-add-subtask-btn[b-353d9cmc8p] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px dashed var(--border-soft);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: 500 12px/1 var(--font-sans);
    cursor: pointer;
    transition: all 0.12s ease;
}

.td-add-subtask-btn:hover[b-353d9cmc8p] {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
}

.td-add-subtask-btn .material-symbols-rounded[b-353d9cmc8p] { font-size: 16px; }

/* ── Comments ───────────────────────────────────────────────────── */
.td-comment-count[b-353d9cmc8p] {
    margin-left: auto;
    font: 500 11px/1 var(--font-sans);
    color: var(--text-muted);
    background: var(--bg-hover, #f5f4f1);
    padding: 2px 8px;
    border-radius: 10px;
}

.td-comment[b-353d9cmc8p] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-hover, #f5f4f1);
}

.td-comment:last-of-type[b-353d9cmc8p] { border-bottom: none; }

.td-comment-avatar[b-353d9cmc8p] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px/1 var(--font-sans);
    color: #fff;
    flex-shrink: 0;
}

.td-comment-body[b-353d9cmc8p] {
    flex: 1;
    min-width: 0;
}

.td-comment-header-row[b-353d9cmc8p] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.td-comment-name[b-353d9cmc8p] {
    font: 600 12px/1 var(--font-sans);
    color: var(--text-primary);
}

.td-comment-time[b-353d9cmc8p] {
    font: 400 11px/1 var(--font-sans);
    color: var(--text-muted);
}

.td-comment-text[b-353d9cmc8p] {
    font: 400 13px/1.5 var(--font-sans);
    color: var(--text-secondary);
    word-break: break-word;
}

.td-comment-input-row[b-353d9cmc8p] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

.td-comment-input[b-353d9cmc8p] {
    flex: 1;
    font: 400 13px/1 var(--font-sans);
    color: var(--text-primary);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--bg-card, #fff);
    outline: none;
    transition: border-color 0.15s ease;
}

.td-comment-input:focus[b-353d9cmc8p] {
    border-color: var(--brand-teal);
}

.td-comment-send[b-353d9cmc8p] {
    padding: 6px;
    border: none;
    border-radius: 8px;
    background: var(--brand-teal);
    color: #fff;
    cursor: pointer;
    display: flex;
    transition: opacity 0.12s ease;
}

.td-comment-send:hover[b-353d9cmc8p] { opacity: 0.85; }
.td-comment-send:disabled[b-353d9cmc8p] { opacity: 0.4; cursor: not-allowed; }
.td-comment-send .material-symbols-rounded[b-353d9cmc8p] { font-size: 18px; }

/* ── History ────────────────────────────────────────────────────── */
.td-history[b-353d9cmc8p] {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    overflow: hidden;
}

.td-history-summary[b-353d9cmc8p] {
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--bg-hover, #f5f4f1);
    border-radius: 8px;
}

.td-history-summary[b-353d9cmc8p]::-webkit-details-marker { display: none; }

.td-history[open] .td-history-summary[b-353d9cmc8p] {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border-soft);
}

.td-history-list[b-353d9cmc8p] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.td-history-item[b-353d9cmc8p] {
    font: 400 12px/1.5 var(--font-sans);
    color: var(--text-secondary);
}

.td-history-user[b-353d9cmc8p] {
    font-weight: 600;
    color: var(--text-primary);
}

.td-history-time[b-353d9cmc8p] {
    color: var(--text-muted);
}

/* ── Responsive: fullscreen on mobile ───────────────────────────── */
@media (max-width: 640px) {
    .td-drawer[b-353d9cmc8p] {
        width: 100vw;
    }
}
/* /Components/Tareas/TareasFiltrosDrawer.razor.rz.scp.css */
/* TareasFiltrosDrawer (prefijo tfd-) */

.tfd-overlay[b-kncp3q04y1] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    animation: tfd-fade-b-kncp3q04y1 0.15s ease forwards;
}
@keyframes tfd-fade-b-kncp3q04y1 { to { opacity: 1; } }

.tfd-drawer[b-kncp3q04y1] {
    width: 340px;
    max-width: 100vw;
    height: 100%;
    background: var(--bg-card, #fff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    animation: tfd-slide-b-kncp3q04y1 0.25s ease forwards;
}
@keyframes tfd-slide-b-kncp3q04y1 { to { transform: translateX(0); } }

.tfd-header[b-kncp3q04y1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.tfd-header .material-symbols-rounded[b-kncp3q04y1] { font-size: 20px; color: var(--brand-teal); }
.tfd-header h2[b-kncp3q04y1] { font: 600 15px/1 var(--font-sans); color: var(--text-primary); margin: 0; }
.tfd-spacer[b-kncp3q04y1] { flex: 1; }
.tfd-close[b-kncp3q04y1] {
    padding: 4px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; border-radius: 6px;
}
.tfd-close:hover[b-kncp3q04y1] { background: var(--bg-hover, #f5f4f1); }
.tfd-close .material-symbols-rounded[b-kncp3q04y1] { font-size: 20px; }

.tfd-body[b-kncp3q04y1] {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 20px;
}

.tfd-section[b-kncp3q04y1] { display: flex; flex-direction: column; gap: 8px; }

.tfd-label[b-kncp3q04y1] {
    display: flex; align-items: center; gap: 6px;
    font: 600 12px/1 var(--font-sans); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tfd-label .material-symbols-rounded[b-kncp3q04y1] { font-size: 16px; }

.tfd-check-row[b-kncp3q04y1] {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
    transition: background 0.12s;
}
.tfd-check-row:hover[b-kncp3q04y1] { background: var(--bg-hover, #f5f4f1); }
.tfd-check-row input[type="checkbox"][b-kncp3q04y1] { accent-color: var(--brand-teal); width: 16px; height: 16px; }
.tfd-check-name[b-kncp3q04y1] { flex: 1; font: 400 13px/1.3 var(--font-sans); color: var(--text-primary); }
.tfd-check-role[b-kncp3q04y1] { font: 400 11px/1 var(--font-sans); color: var(--text-muted); }

.tfd-empty[b-kncp3q04y1] { font: 400 12px/1 var(--font-sans); color: var(--text-muted); padding: 4px 0; }

.tfd-prio-grid[b-kncp3q04y1] { display: flex; gap: 4px; }
.tfd-prio-item[b-kncp3q04y1] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 4px; border: 1px solid var(--border-soft); border-radius: 6px;
    background: var(--bg-card, #fff); color: var(--text-muted);
    cursor: pointer; font: 500 11px/1 var(--font-sans); transition: all 0.12s;
}
.tfd-prio-item input[b-kncp3q04y1] { display: none; }
.tfd-prio-item .material-symbols-rounded[b-kncp3q04y1] { font-size: 16px; }
.tfd-prio-item:hover[b-kncp3q04y1] { border-color: var(--text-muted); }
.tfd-prio-1.active[b-kncp3q04y1] { background: #DBEAFE; border-color: #3B82F6; color: #3B82F6; }
.tfd-prio-2.active[b-kncp3q04y1] { background: #E0E7FF; border-color: #6366F1; color: #6366F1; }
.tfd-prio-3.active[b-kncp3q04y1] { background: #FEF3C7; border-color: #F59E0B; color: #D97706; }
.tfd-prio-4.active[b-kncp3q04y1] { background: #FEE2E2; border-color: #EF4444; color: #EF4444; }

.tfd-date-row[b-kncp3q04y1] { display: flex; gap: 8px; }
.tfd-date-field[b-kncp3q04y1] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tfd-date-hint[b-kncp3q04y1] { font: 400 11px/1 var(--font-sans); color: var(--text-muted); }
.tfd-input[b-kncp3q04y1] {
    font: 400 13px/1 var(--font-sans); color: var(--text-primary);
    background: var(--bg-card, #fff); border: 1px solid var(--border-soft);
    border-radius: 6px; padding: 6px 8px; outline: none;
}
.tfd-input:focus[b-kncp3q04y1] { border-color: var(--brand-teal); }

.tfd-footer[b-kncp3q04y1] {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--border-soft);
}
.tfd-btn-ghost[b-kncp3q04y1] {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
    background: transparent; color: var(--text-secondary);
    font: 500 13px/1 var(--font-sans); cursor: pointer;
}
.tfd-btn-ghost:hover[b-kncp3q04y1] { background: var(--bg-hover, #f5f4f1); }
.tfd-btn-ghost .material-symbols-rounded[b-kncp3q04y1] { font-size: 16px; }

.tfd-btn-primary[b-kncp3q04y1] {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 16px; border: none; border-radius: 8px;
    background: var(--brand-teal); color: #fff;
    font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.tfd-btn-primary:hover[b-kncp3q04y1] { opacity: 0.9; }
.tfd-btn-primary .material-symbols-rounded[b-kncp3q04y1] { font-size: 16px; }

@media (max-width: 640px) { .tfd-drawer[b-kncp3q04y1] { width: 100vw; } }
/* /Components/UI/Avatar.razor.rz.scp.css */
.ui-avatar[b-u83zg2vflj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-weight: 700;
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    user-select: none;
}

.ui-avatar.sm[b-u83zg2vflj] { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; }
.ui-avatar.md[b-u83zg2vflj] { width: 36px; height: 36px; font-size: 13px; }
.ui-avatar.lg[b-u83zg2vflj] { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; }
.ui-avatar.xl[b-u83zg2vflj] { width: 56px; height: 56px; font-size: 18px; border-radius: 14px; }

/* === Dot de presencia === */
.ui-avatar-dot[b-u83zg2vflj] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel);
}

.ui-avatar.lg .ui-avatar-dot[b-u83zg2vflj] { width: 12px; height: 12px; }
.ui-avatar.xl .ui-avatar-dot[b-u83zg2vflj] { width: 14px; height: 14px; }

.ui-avatar-dot.online[b-u83zg2vflj]  { background: var(--success); }
.ui-avatar-dot.away[b-u83zg2vflj]    { background: #E0A800; }
.ui-avatar-dot.offline[b-u83zg2vflj] { background: #9CA3AF; }
/* /Components/UI/Breadcrumb.razor.rz.scp.css */
.ui-breadcrumb[b-tz7wi8l3ot] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.ui-breadcrumb-home[b-tz7wi8l3ot] {
    font-size: 16px !important;
    color: var(--text-muted);
    margin-right: 2px;
}

.ui-breadcrumb-link[b-tz7wi8l3ot] {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ui-breadcrumb-link:hover[b-tz7wi8l3ot] { color: var(--brand-teal-deep); }

.ui-breadcrumb-current[b-tz7wi8l3ot] {
    color: var(--text-primary);
    font-weight: 600;
}

.ui-breadcrumb-sep[b-tz7wi8l3ot] {
    font-size: 14px !important;
    color: var(--text-muted);
}
/* /Components/UI/Button.razor.rz.scp.css */
.ui-btn[b-svm6kteyd7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ui-btn.md[b-svm6kteyd7] { font-size: 13px; padding: 8px 16px; }
.ui-btn.sm[b-svm6kteyd7] { font-size: 12px; padding: 6px 12px; }

.ui-btn .msr[b-svm6kteyd7] { font-size: 16px; }
.ui-btn.sm .msr[b-svm6kteyd7] { font-size: 14px; }

.ui-btn:disabled[b-svm6kteyd7] { opacity: 0.5; cursor: not-allowed; }
.ui-btn:not(:disabled):active[b-svm6kteyd7] { transform: translateY(0); }

/* === Primary === */
.ui-btn.primary[b-svm6kteyd7] {
    background: var(--brand-teal-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3);
}
.ui-btn.primary:hover:not(:disabled)[b-svm6kteyd7] {
    background: var(--brand-teal-dark);
    transform: translateY(-1px);
}

/* === Secondary === */
.ui-btn.secondary[b-svm6kteyd7] {
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-color: var(--border-soft);
    font-weight: 600;
}
.ui-btn.secondary.md[b-svm6kteyd7] { padding: 7px 14px; }
.ui-btn.secondary:hover:not(:disabled)[b-svm6kteyd7] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

/* === Ghost === */
.ui-btn.ghost[b-svm6kteyd7] {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    font-weight: 600;
}
.ui-btn.ghost.md[b-svm6kteyd7] { padding: 7px 12px; }
.ui-btn.ghost:hover:not(:disabled)[b-svm6kteyd7] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

/* === Danger === */
.ui-btn.danger[b-svm6kteyd7] {
    background: var(--danger);
    color: #FFFFFF;
}
.ui-btn.danger:hover:not(:disabled)[b-svm6kteyd7] {
    background: #862525;
    transform: translateY(-1px);
}

/* === Icon === */
.ui-btn.icon[b-svm6kteyd7] {
    padding: 0;
    width: 36px;
    height: 36px;
    background: var(--bg-panel);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}
.ui-btn.icon.sm[b-svm6kteyd7] { width: 30px; height: 30px; }
.ui-btn.icon .msr[b-svm6kteyd7] { font-size: 18px; }
.ui-btn.icon.sm .msr[b-svm6kteyd7] { font-size: 15px; }
.ui-btn.icon:hover:not(:disabled)[b-svm6kteyd7] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}
/* /Components/UI/Card.razor.rz.scp.css */
.ui-card[b-wa5d3qtm3l] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.ui-card.elevated[b-wa5d3qtm3l]  { box-shadow: var(--shadow-md); }
.ui-card.hoverable[b-wa5d3qtm3l] { cursor: pointer; }
.ui-card.hoverable:hover[b-wa5d3qtm3l] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-med);
}

.ui-card.p-none[b-wa5d3qtm3l] { padding: 0; }
.ui-card.p-sm[b-wa5d3qtm3l]   { padding: 12px 14px; }
.ui-card.p-md[b-wa5d3qtm3l]   { padding: 18px 20px; }
.ui-card.p-lg[b-wa5d3qtm3l]   { padding: 24px 28px; }
/* /Components/UI/Chip.razor.rz.scp.css */
.ui-chip[b-o56nz3n87b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

.ui-chip.md[b-o56nz3n87b] { padding: 3px 9px; font-size: 11px; }
.ui-chip.sm[b-o56nz3n87b] { padding: 2px 7px; font-size: 9.5px; }

.ui-chip .msr[b-o56nz3n87b] { font-size: 11px !important; }
.ui-chip.sm .msr[b-o56nz3n87b] { font-size: 10px !important; }

.ui-chip.success[b-o56nz3n87b] { background: rgba(29, 158, 117, 0.12); color: var(--success); }
.ui-chip.warning[b-o56nz3n87b] { background: rgba(186, 117, 23, 0.14); color: var(--warning); }
.ui-chip.danger[b-o56nz3n87b]  { background: rgba(163, 45, 45, 0.12);  color: var(--danger); }
.ui-chip.info[b-o56nz3n87b]    { background: rgba(45, 110, 163, 0.12); color: var(--info); }
.ui-chip.muted[b-o56nz3n87b]   { background: #F0ECE2;                  color: var(--text-secondary); }
/* /Components/UI/SectionHeader.razor.rz.scp.css */
.ui-section-header[b-o14e2q5kvq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.ui-section-num[b-o14e2q5kvq] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-teal-deep);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.ui-section-icon[b-o14e2q5kvq] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ui-section-icon .msr[b-o14e2q5kvq] { font-size: 19px; }

.ui-section-titleblock[b-o14e2q5kvq] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.ui-section-title[b-o14e2q5kvq] {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0;
}

.ui-section-sub[b-o14e2q5kvq] {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-muted);
}

.ui-section-action[b-o14e2q5kvq] {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
}
/* /Components/UI/SmartMention.razor.rz.scp.css */
.ui-mention[b-shjd7s5ids] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px 2px;
    border-radius: 5px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.ui-mention .msr[b-shjd7s5ids] { font-size: 12px !important; }

.ui-mention.grupo[b-shjd7s5ids]                { background: rgba(110, 198, 200, 0.18); color: var(--brand-teal-deep); }
.ui-mention.grado[b-shjd7s5ids]                { background: rgba(29, 158, 117, 0.14);  color: #0F6E56; }
.ui-mention.alumno[b-shjd7s5ids]               { background: rgba(186, 117, 23, 0.14);  color: #8B5A10; }
.ui-mention.disciplina-saberes[b-shjd7s5ids]   { background: var(--cf-saberes-bg);      color: var(--cf-saberes); }
.ui-mention.disciplina-lenguajes[b-shjd7s5ids] { background: var(--cf-lenguajes-bg);    color: var(--cf-lenguajes); }
.ui-mention.disciplina-etica[b-shjd7s5ids]     { background: var(--cf-etica-bg);        color: var(--cf-etica); }
.ui-mention.disciplina-humano[b-shjd7s5ids]    { background: var(--cf-humano-bg);       color: var(--cf-humano); }
.ui-mention.rol[b-shjd7s5ids]                  { background: rgba(45, 110, 163, 0.14);  color: #1D4D7A; }
.ui-mention.me[b-shjd7s5ids]                   { background: rgba(245, 158, 11, 0.18);  color: #854D0E; }
/* /Components/UI/StatCard.razor.rz.scp.css */
.ui-stat[b-fv506prcgu] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    flex: 1;
    min-width: 130px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-stat.clickeable[b-fv506prcgu] {
    cursor: pointer;
}

.ui-stat.clickeable:hover[b-fv506prcgu] {
    border-color: var(--brand-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ui-stat-icon[b-fv506prcgu] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.ui-stat-icon .msr[b-fv506prcgu] { font-size: 16px !important; }

.ui-stat-icon.teal[b-fv506prcgu]    { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }
.ui-stat-icon.amber[b-fv506prcgu]   { background: linear-gradient(135deg, #F59E0B, #D97706); }
.ui-stat-icon.pink[b-fv506prcgu]    { background: linear-gradient(135deg, #EC4899, #BE185D); }
.ui-stat-icon.violet[b-fv506prcgu]  { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.ui-stat-icon.emerald[b-fv506prcgu] { background: linear-gradient(135deg, #10B981, #047857); }
.ui-stat-icon.indigo[b-fv506prcgu]  { background: linear-gradient(135deg, #6366F1, #4338CA); }

.ui-stat-value[b-fv506prcgu] {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1;
    color: var(--text-primary);
}

.ui-stat-label[b-fv506prcgu] {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 4px;
}
/* /Components/Widgets/AlarmasList.razor.rz.scp.css */
.al-root[b-iu63rs7bnt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.al-item[b-iu63rs7bnt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.al-left[b-iu63rs7bnt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.al-toggle[b-iu63rs7bnt] {
    width: 44px;
    height: 24px;
    background: #E0E0E0;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.al-toggle.on[b-iu63rs7bnt] { background: #6366F1; }

.al-toggle[b-iu63rs7bnt]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.al-toggle.on[b-iu63rs7bnt]::after { left: 22px; }

.al-hora[b-iu63rs7bnt] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #1E2126;
}

.al-hora.off[b-iu63rs7bnt] { color: #999; }

.al-dots[b-iu63rs7bnt] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 4px 8px;
    display: flex;
    align-items: center;
}

.al-dots:hover[b-iu63rs7bnt] { color: #A32D2D; }

.al-time-input[b-iu63rs7bnt] {
    padding: 8px 12px;
    border: 1.5px solid #D0D0D0;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
}

.al-add-actions[b-iu63rs7bnt] { display: flex; gap: 6px; }

.al-btn-mini[b-iu63rs7bnt] {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1.5px solid #D0D0D0;
    background: white;
    cursor: pointer;
    font-size: 13px;
    color: #555;
}

.al-btn-confirm[b-iu63rs7bnt] { background: #6366F1; color: white; border-color: #6366F1; }

.al-btn-add[b-iu63rs7bnt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1.5px solid #D0D0D0;
    border-radius: 22px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #1E2126;
    margin-top: 8px;
    align-self: flex-start;
}

.al-btn-add:hover[b-iu63rs7bnt] { background: #F5F5F5; }
/* /Components/Widgets/RelojWidget.razor.rz.scp.css */
.rw-root[b-g9522496vu] {
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.rw-analog[b-g9522496vu] {
    width: 60%;
    aspect-ratio: 1;
    max-width: 200px;
    flex-shrink: 1;
}

.rw-digital[b-g9522496vu] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 6vw, 64px);
    color: var(--text);
    letter-spacing: 1px;
    line-height: 1;
}

.rw-badge[b-g9522496vu] {
    background: var(--accent);
    color: #fff;
    padding: 5px 12px;
    border-radius: 18px;
    font-size: clamp(11px, 1.3vw, 14px);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    white-space: nowrap;
}

.rw-badge.ringing[b-g9522496vu] {
    background: #DC2626;
    animation: rw-blink-b-g9522496vu 0.7s infinite;
    cursor: pointer;
}

.rw-badge.ringing svg[b-g9522496vu] {
    animation: rw-shake-b-g9522496vu 0.6s infinite;
}

@keyframes rw-blink-b-g9522496vu {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.55; }
}

@keyframes rw-shake-b-g9522496vu {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}
/* /Components/Widgets/ThemePicker.razor.rz.scp.css */
.tp-grid[b-5l2pwxcwbd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.tp-card[b-5l2pwxcwbd] {
    aspect-ratio: 1.2;
    border: 2.5px solid transparent;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.15s, transform 0.1s;
}

.tp-card:hover[b-5l2pwxcwbd] {
    border-color: #D0D0D0;
    transform: translateY(-1px);
}

.tp-card.selected[b-5l2pwxcwbd] {
    border-color: #6366F1;
}

.tp-card.selected[b-5l2pwxcwbd]::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    background: #6366F1;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.tp-bar1[b-5l2pwxcwbd] {
    width: 32px;
    height: 6px;
    border-radius: 3px;
    margin-bottom: 5px;
}

.tp-row[b-5l2pwxcwbd] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tp-bar2[b-5l2pwxcwbd] {
    width: 22px;
    height: 5px;
    border-radius: 3px;
}

.tp-dot[b-5l2pwxcwbd] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
/* /Components/Widgets/TimerWidget.razor.rz.scp.css */
.tw-root[b-cipf7h7fou] {
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

.tw-mode-tabs[b-cipf7h7fou] {
    position: absolute;
    top: -36px;
    right: 4px;
    display: flex;
    background: white;
    border-radius: 6px;
    padding: 2px;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.tw-mode-tabs button[b-cipf7h7fou] {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    font-weight: 500;
}

.tw-mode-tabs button.active[b-cipf7h7fou] {
    background: var(--accent);
    color: white;
}

.tw-body[b-cipf7h7fou] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.tw-ring[b-cipf7h7fou] {
    width: 22%;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.tw-time-control[b-cipf7h7fou] { flex: 1; display: flex; justify-content: center; }

.tw-time-row[b-cipf7h7fou] { display: flex; align-items: center; }

.tw-digit-col[b-cipf7h7fou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.tw-pm-btn[b-cipf7h7fou] {
    background: transparent;
    border: none;
    color: var(--text);
    opacity: 0.55;
    cursor: pointer;
    padding: 1px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tw-pm-btn:hover[b-cipf7h7fou] { opacity: 1; }

.tw-pm-spacer[b-cipf7h7fou] { height: 18px; }

.tw-digit[b-cipf7h7fou] {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(36px, 9vw, 80px);
    color: var(--text);
    line-height: 1;
    width: 1ch;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding: 0 2px;
}

.tw-digit-input[b-cipf7h7fou] {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(36px, 9vw, 80px);
    color: var(--text);
    line-height: 1;
    width: 1ch;
    text-align: center;
    background: rgba(99, 102, 241, 0.1);
    border: 2px solid var(--accent);
    border-radius: 4px;
    padding: 0;
    outline: none;
}

.tw-colon[b-cipf7h7fou] {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(32px, 8vw, 70px);
    color: var(--text);
    line-height: 1;
    padding: 0 4px;
}

.tw-actions[b-cipf7h7fou] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.tw-btn-play[b-cipf7h7fou],
.tw-btn-stop[b-cipf7h7fou] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tw-btn-play[b-cipf7h7fou] { background: var(--accent); color: white; }
.tw-btn-stop[b-cipf7h7fou] { background: white; color: var(--text); border: 1.5px solid #D0D0D0; }

.tw-root.tw-alarm .tw-digit[b-cipf7h7fou],
.tw-root.tw-alarm .tw-colon[b-cipf7h7fou] {
    color: #DC2626;
    animation: tw-blink-b-cipf7h7fou 0.7s infinite;
}

@keyframes tw-blink-b-cipf7h7fou {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.45; }
}
/* /Components/Widgets/WidgetSidePanel.razor.rz.scp.css */
.wsp-overlay[b-cfx8oriw1d] {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 25, 0.35);
    z-index: 999;
    cursor: pointer;
}

.wsp-panel[b-cfx8oriw1d] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 90vw;
    background: white;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: wsp-slide-in-b-cfx8oriw1d 0.22s ease-out;
    outline: none;
}

@keyframes wsp-slide-in-b-cfx8oriw1d {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.wsp-header[b-cfx8oriw1d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
    flex-shrink: 0;
}

.wsp-title[b-cfx8oriw1d] {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-size: 20px;
    color: #1E2126;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wsp-title-icon[b-cfx8oriw1d] {
    color: #6366F1;
}

.wsp-close[b-cfx8oriw1d] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #E0E0E0;
    background: white;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wsp-close:hover[b-cfx8oriw1d] {
    background: #F5F5F5;
    color: #1E2126;
}

.wsp-body[b-cfx8oriw1d] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
/* /Layout/Aside.razor.rz.scp.css */
.aside-shell[b-zo3mbpookg] {
    grid-column: 4 / 5;
    background: var(--bg-cream);
    border-left: 1px solid var(--border-soft);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    z-index: var(--z-aside);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================================================
   MainLayout — Grid maestro
   ============================================================================ */

.app-shell[b-7jg3phn3b1] {
    display: grid;
    grid-template-columns: 72px 280px 1fr;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    transition: grid-template-columns 0.25s ease;
}

.app-shell.with-aside[b-7jg3phn3b1] {
    grid-template-columns: 72px 280px 1fr 320px;
}

/* Sidebar colapsado */
.app-shell.sidebar-collapsed[b-7jg3phn3b1] {
    grid-template-columns: 72px 64px 1fr;
}

.app-shell.sidebar-collapsed.with-aside[b-7jg3phn3b1] {
    grid-template-columns: 72px 64px 1fr 320px;
}

.main-shell[b-7jg3phn3b1] {
    grid-column: 3 / 4;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg);
    min-width: 0;
}

/* En screens muy pequeñas, el grid se colapsa a sidebar oculto + rail */
@@media (max-width: 991.98px) {
    .app-shell[b-7jg3phn3b1] {
        grid-template-columns: 72px 1fr;
    }
    .app-shell.with-aside[b-7jg3phn3b1] {
        grid-template-columns: 72px 1fr;
    }
    .app-shell.sidebar-collapsed[b-7jg3phn3b1] {
        grid-template-columns: 72px 1fr;
    }
    .main-shell[b-7jg3phn3b1] {
        grid-column: 2 / 3;
    }
    [b-7jg3phn3b1] .sidebar-shell {
        display: none;
    }
    [b-7jg3phn3b1] .aside-shell {
        display: none;
    }
}

@@media (max-width: 575.98px) {
    .app-shell[b-7jg3phn3b1] {
        grid-template-columns: 56px 1fr;
    }
}
/* /Layout/Rail.razor.rz.scp.css */
.rail-shell[b-1kd6ay6576] {
    grid-column: 1 / 2;
    background: var(--bg-rail);
    color: var(--text-sidebar-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 14px;
    gap: 6px;
    border-right: 1px solid #0A0B0D;
    position: relative;
    z-index: var(--z-rail);
}

/* === Logo del gorro de graduado === */
.rail-logo[b-1kd6ay6576] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-decoration: none;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.35);
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease;
}

.rail-logo:hover[b-1kd6ay6576] { transform: scale(1.05); }
.rail-logo .msr[b-1kd6ay6576] { font-size: 26px; font-variation-settings: "FILL" 1, "wght" 500; }

/* === Tooltip lateral común para items y logo === */
[data-tooltip][b-1kd6ay6576]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-rail);
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-tooltip]:hover[b-1kd6ay6576]::after { opacity: 1; }

/* === Items del rail === */
.rail-item[b-1kd6ay6576] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8B9098;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}

.rail-item:hover[b-1kd6ay6576] {
    background: rgba(255, 255, 255, 0.06);
    color: #E5E7EB;
}

.rail-item.active[b-1kd6ay6576] {
    background: rgba(110, 198, 200, 0.15);
    color: var(--brand-teal);
}

.rail-item.active[b-1kd6ay6576]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-teal);
}

.rail-item .msr[b-1kd6ay6576] { font-size: 22px; }

/* === Badge sobre el item === */
.rail-badge[b-1kd6ay6576] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* === Divider y spacer === */
.rail-divider[b-1kd6ay6576] {
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

.rail-spacer[b-1kd6ay6576] { flex: 1; }

/* === Avatar inferior === */
.rail-avatar[b-1kd6ay6576] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #F4B860, #E89B3C);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    border: 2px solid var(--bg-rail);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.15s ease;
}

.rail-avatar:hover[b-1kd6ay6576] { transform: translateY(-1px); }

.rail-avatar[b-1kd6ay6576]::before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-rail);
}
/* /Layout/Sidebar.razor.rz.scp.css */
.sidebar-shell[b-thi63l4anr] {
    grid-column: 2 / 3;
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-sidebar);
    z-index: var(--z-sidebar);
    min-width: 0;                  /* CRÍTICO: vence el min-content de grid item */
    transition: width 0.25s ease;
}

/* === Header con wordmark + collapse === */
.sidebar-header[b-thi63l4anr] {
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--border-sidebar);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sidebar-brand-block[b-thi63l4anr] {
    flex: 1;
    min-width: 0;
}

.sidebar-brand[b-thi63l4anr] {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 17px;
    color: var(--brand-teal);
    letter-spacing: -0.4px;
    font-style: italic;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-brand-sub[b-thi63l4anr] {
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 500;
    margin-top: 2px;
    font-family: var(--font-sans);
}

/* Botón colapsar */
.sidebar-collapse-btn[b-thi63l4anr] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-sidebar-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover[b-thi63l4anr] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-sidebar-active);
    border-color: rgba(255, 255, 255, 0.15);
}

.sidebar-collapse-btn .msr[b-thi63l4anr] {
    font-size: 16px !important;
    transition: transform 0.25s ease;
}

/* Las reglas del estado colapsado viven en wwwroot/css/sidebar-collapse.css
   (CSS global, no scoped). Esto garantiza que los selectores cross-component
   (.app-shell.sidebar-collapsed → .sidebar-brand-block / .nav-text / .user-menu)
   funcionen sin gotchas de scoped CSS. */

/* === Scroll area === */
.sidebar-scroll[b-thi63l4anr] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 14px;
    scrollbar-width: thin;
    scrollbar-color: #3A3F47 transparent;
}

.sidebar-scroll[b-thi63l4anr]::-webkit-scrollbar { width: 6px; }
.sidebar-scroll[b-thi63l4anr]::-webkit-scrollbar-thumb { background: #3A3F47; border-radius: 3px; }

.nav-section[b-thi63l4anr] { padding: 6px 10px; }

.nav-section-label[b-thi63l4anr] {
    padding: 12px 12px 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-sidebar-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-family: var(--font-sans);
    white-space: nowrap;
}

/* === Items principales === */
.nav-item[b-thi63l4anr] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-sidebar);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
    position: relative;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item:hover[b-thi63l4anr] {
    background: var(--bg-sidebar-hover);
    color: var(--text-sidebar-active);
}

.nav-item.active[b-thi63l4anr] {
    background: var(--bg-sidebar-active);
    color: var(--text-sidebar-active);
    font-weight: 600;
}

.nav-item.active[b-thi63l4anr]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    background: var(--brand-teal);
    border-radius: 0 3px 3px 0;
}

.nav-item.active .nav-icon[b-thi63l4anr] { color: var(--brand-teal); }

.nav-icon[b-thi63l4anr] {
    font-size: 18px !important;
    color: var(--text-sidebar-muted);
    flex-shrink: 0;
}

.nav-text[b-thi63l4anr] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-arrow[b-thi63l4anr] {
    font-size: 16px !important;
    color: var(--text-sidebar-muted);
    transition: transform 0.2s ease;
}

.nav-item.has-children.expanded .nav-arrow[b-thi63l4anr] { transform: rotate(180deg); }

.nav-badge[b-thi63l4anr] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--danger);
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

/* === Sub-items === */
.nav-children[b-thi63l4anr] {
    padding: 4px 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-child[b-thi63l4anr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 30px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-sidebar-muted);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
    position: relative;
    text-decoration: none;
}

.nav-child[b-thi63l4anr]::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.nav-child:hover[b-thi63l4anr] {
    background: var(--bg-sidebar-hover);
    color: var(--text-sidebar);
}

.nav-child.active[b-thi63l4anr] {
    background: var(--bg-sidebar-active);
    color: var(--text-sidebar-active);
    font-weight: 600;
}

.nav-child.active[b-thi63l4anr]::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-teal);
    box-shadow: 0 0 0 2px rgba(110, 198, 200, 0.2);
}

.nav-child .msr[b-thi63l4anr] { font-size: 15px !important; }

.nav-child-badge[b-thi63l4anr] {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--danger);
    color: #FFFFFF;
}

/* === Footer del usuario === */
.sidebar-user[b-thi63l4anr] {
    padding: 12px 14px;
    border-top: 1px solid var(--border-sidebar);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
    position: relative;
}

.sidebar-user:hover[b-thi63l4anr] { background: rgba(0, 0, 0, 0.3); }

.sidebar-user.menu-open[b-thi63l4anr] {
    background: rgba(0, 0, 0, 0.4);
    border-top-color: var(--brand-teal-dark);
}

.sidebar-user-avatar[b-thi63l4anr] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F4B860, #E89B3C);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    position: relative;
    flex-shrink: 0;
}

.sidebar-user-avatar[b-thi63l4anr]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-sidebar);
}

.sidebar-user-info[b-thi63l4anr] { flex: 1; overflow: hidden; min-width: 0; }

.sidebar-user-name[b-thi63l4anr] {
    color: var(--text-sidebar-active);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-status[b-thi63l4anr] {
    font-size: 10.5px;
    color: var(--text-sidebar-muted);
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.sidebar-user-status .msr[b-thi63l4anr] {
    font-size: 12px !important;
    color: var(--brand-teal);
}

.sidebar-user-chevron[b-thi63l4anr] {
    color: var(--text-sidebar-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.sidebar-user.menu-open .sidebar-user-chevron[b-thi63l4anr] {
    transform: rotate(180deg);
    color: var(--brand-teal);
}

.sidebar-user-chevron .msr[b-thi63l4anr] { font-size: 16px !important; }

/* Los estilos de .user-menu* viven en Layout/UserMenu.razor.css.
   Blazor scoped CSS no atraviesa fronteras de componente, así que las reglas
   tienen que residir en el componente que renderiza ese DOM. */
/* /Layout/UserMenu.razor.rz.scp.css */
/* ============================================================================
   UserMenu — dropdown flotante anclado al .sidebar-user del Sidebar.

   Estos estilos viven aquí (no en Sidebar.razor.css) porque el div .user-menu
   está renderizado por este componente. Blazor scoped CSS no atraviesa
   fronteras de componente, por lo que ponerlos en el padre los dejaba sin
   efecto.

   Anclaje: position: absolute con bottom: 64px se posiciona contra el
   .sidebar-user del padre, que ya tiene position: relative.
   ============================================================================ */

.user-menu[b-w41b3r7j9v] {
    position: absolute;            /* CRÍTICO — sin esto se mete en el flujo */
    bottom: 64px;                  /* Por encima del bloque de usuario (~64px alto) */
    left: 14px;
    right: 14px;
    background: #16181C;
    border: 1px solid #2F343B;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45),
                0 8px 16px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: none;
    z-index: 50;
}

.user-menu.open[b-w41b3r7j9v] {
    display: block;
    animation: user-menu-slide-up 0.2s ease-out;
}

@@keyframes user-menu-slide-up {
    from[b-w41b3r7j9v] { opacity: 0; transform: translateY(8px); }
    to[b-w41b3r7j9v]   { opacity: 1; transform: translateY(0); }
}

/* Cuando el sidebar está colapsado, ocultar el menú aunque el flag local
   IsOpen=true persista. */
:global(.app-shell.sidebar-collapsed) .user-menu[b-w41b3r7j9v] {
    display: none !important;
}

/* === Header de identidad === */
.user-menu-identity[b-w41b3r7j9v] {
    padding: 14px 14px 12px;
    border-bottom: 1px solid #2F343B;
    background: linear-gradient(180deg, rgba(110, 198, 200, 0.04) 0%, transparent 100%);
}

.user-menu-identity-row[b-w41b3r7j9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.user-menu-avatar[b-w41b3r7j9v] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #F4B860, #E89B3C);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;                /* No se encoge si nombre es largo */
}

.user-menu-info[b-w41b3r7j9v] {
    flex: 1;
    min-width: 0;                  /* Permite que el texto se trunque con ellipsis */
    overflow: hidden;
}

.user-menu-name[b-w41b3r7j9v] {
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-email[b-w41b3r7j9v] {
    color: var(--text-sidebar-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-school[b-w41b3r7j9v] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-sidebar);
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    margin-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-menu-school .msr[b-w41b3r7j9v] {
    font-size: 12px !important;
    color: var(--brand-teal);
    flex-shrink: 0;
}

.user-menu-school > span:last-child[b-w41b3r7j9v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* === Secciones === */
.user-menu-section[b-w41b3r7j9v] { padding: 4px; }
.user-menu-section + .user-menu-section[b-w41b3r7j9v] { border-top: 1px solid #2F343B; }

/* === Items individuales === */
.user-menu-item[b-w41b3r7j9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text-sidebar);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
    min-width: 0;                  /* Para que el texto largo se pueda truncar */
}

.user-menu-item:hover[b-w41b3r7j9v] {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.user-menu-item .msr[b-w41b3r7j9v] {
    font-size: 17px !important;
    color: var(--text-sidebar-muted);
    flex-shrink: 0;                /* El icono nunca se encoge */
}

.user-menu-item:hover .msr[b-w41b3r7j9v] { color: var(--brand-teal); }

.user-menu-item-text[b-w41b3r7j9v] {
    flex: 1;
    min-width: 0;                  /* Permite ellipsis en flex item */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-item-shortcut[b-w41b3r7j9v],
.user-menu-item-current[b-w41b3r7j9v] {
    flex-shrink: 0;                /* Chips/badges nunca se encogen */
    margin-left: auto;             /* Se anclan a la derecha aunque el text falle */
}

.user-menu-item-shortcut[b-w41b3r7j9v] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-sidebar-muted);
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.user-menu-item-current[b-w41b3r7j9v] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.12);
    padding: 1px 7px;
    border-radius: 8px;
}

.user-menu-item-theme[b-w41b3r7j9v] {
    background: rgba(255, 255, 255, 0.02);
}

/* === Logout — color rojo suave === */
.user-menu-item.logout[b-w41b3r7j9v] { color: #FCA5A5; }
.user-menu-item.logout .msr[b-w41b3r7j9v] { color: #FCA5A5; }

.user-menu-item.logout:hover[b-w41b3r7j9v] {
    background: rgba(163, 45, 45, 0.15);
    color: #FECACA;
}

.user-menu-item.logout:hover .msr[b-w41b3r7j9v] { color: #FECACA; }
/* /Pages/Actividades.razor.rz.scp.css */
/* === Actividades · v2 wrapper (Fase D) === */
.act-container[b-ycbmso5zob] {
    padding: 22px 28px 36px;
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.ac-bc[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.ac-bc .material-symbols-rounded[b-ycbmso5zob] { font-size: 14px !important; }
.ac-bc a[b-ycbmso5zob] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.ac-bc a:hover[b-ycbmso5zob] { color: var(--brand-teal-deep); }
.ac-sep[b-ycbmso5zob] { color: var(--text-muted); }
.ac-clase[b-ycbmso5zob] { color: var(--text-secondary); font-weight: 500; }
.ac-current[b-ycbmso5zob] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.ac-h[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.ac-h-icon[b-ycbmso5zob] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #0891B2, #0E7490);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25);
}
.ac-h-icon .material-symbols-rounded[b-ycbmso5zob] { font-size: 24px !important; }
.ac-h-block[b-ycbmso5zob] { flex: 1; min-width: 0; }
.ac-h-title[b-ycbmso5zob] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.ac-h-sub[b-ycbmso5zob] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

.act-periodo[b-ycbmso5zob] {
    font-size: 12px; color: #666; display: flex; align-items: center;
    gap: 4px; margin-bottom: 14px;
}

/* Pills */
.class-pills[b-ycbmso5zob] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-ycbmso5zob] {
    padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s;
}
.pill:hover[b-ycbmso5zob] { border-color: #4BA8AA; color: #4BA8AA; }
.pill.active[b-ycbmso5zob] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Loading */
.loading-state[b-ycbmso5zob] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-ycbmso5zob] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin-b-ycbmso5zob 0.8s linear infinite; }
@keyframes spin-b-ycbmso5zob { to { transform: rotate(360deg); } }

/* Dashboard */
.act-dash[b-ycbmso5zob] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 14px;
}
.act-dc[b-ycbmso5zob] { text-align: center; padding: 10px; border-radius: 8px; }
.act-dc-n[b-ycbmso5zob] { font-size: 20px; font-weight: 500; }
.act-dc-l[b-ycbmso5zob] { font-size: 10px; margin-top: 2px; }
.act-dc-teal[b-ycbmso5zob]  { background: #E8F4F8; color: #3A8E90; }
.act-dc-green[b-ycbmso5zob] { background: #EAF3DE; color: #3B6D11; }
.act-dc-amber[b-ycbmso5zob] { background: #FAEEDA; color: #854F0B; }
.act-dc-red[b-ycbmso5zob]   { background: #FCEBEB; color: #A32D2D; }

/* Avance por criterio */
.act-avance-card[b-ycbmso5zob] {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    padding: 14px 16px; margin-bottom: 14px;
}
.act-avance-title[b-ycbmso5zob] {
    font-size: 13px; font-weight: 500; color: #888; margin-bottom: 10px;
    display: flex; align-items: center; gap: 4px;
}
.act-avance-title .material-icons[b-ycbmso5zob] { font-size: 14px; color: #4BA8AA; }

.act-av-row[b-ycbmso5zob] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.act-av-label[b-ycbmso5zob] {
    font-size: 12px; color: #666; min-width: 120px; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-av-bar[b-ycbmso5zob] {
    flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden;
}
.act-av-fill[b-ycbmso5zob] { height: 100%; border-radius: 4px; background: #4BA8AA; }
.act-av-pct[b-ycbmso5zob] { font-size: 12px; font-weight: 500; color: #3B6D11; min-width: 40px; }

/* Toolbar */
.act-toolbar[b-ycbmso5zob] {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap;
}
.act-search[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 5px;
    border: 1px solid #ddd; border-radius: 8px; padding: 6px 10px;
    flex: 1; max-width: 250px;
}
.act-search input[b-ycbmso5zob] {
    border: none; outline: none; font-size: 12px;
    width: 100%; background: transparent;
}
.act-btn[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid #ddd; border-radius: 8px; padding: 6px 12px;
    font-size: 12px; cursor: pointer; background: #fff; color: #666;
    font-family: inherit;
}
.act-btn:hover[b-ycbmso5zob] { border-color: #4BA8AA; color: #4BA8AA; }
.act-btn:disabled[b-ycbmso5zob] { opacity: 0.6; cursor: not-allowed; }
.act-btn .material-icons[b-ycbmso5zob] { font-size: 14px; }
.act-btn-add[b-ycbmso5zob] {
    background: #4BA8AA; color: #fff; border-color: #4BA8AA; margin-left: auto;
}
.act-btn-add:hover[b-ycbmso5zob] { background: #3A8E90; color: #fff; }

/* Filter chips */
.act-filter-chips[b-ycbmso5zob] {
    display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.act-fchip[b-ycbmso5zob] {
    padding: 5px 12px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent;
}
.act-fchip.active[b-ycbmso5zob] {
    background: #E8F4F8; border-color: #4BA8AA; color: #3A8E90;
}
.act-fchip-cnt[b-ycbmso5zob] { opacity: 0.6; margin-left: 2px; }

/* Empty states */
.act-empty[b-ycbmso5zob] {
    padding: 40px 20px; background: #fafafa; border: 1px dashed #ddd;
    border-radius: 10px; text-align: center; color: #999; font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.act-empty .material-icons[b-ycbmso5zob] { font-size: 36px; color: #ccc; }
.act-empty-mini[b-ycbmso5zob] {
    padding: 10px 14px; background: #fafafa; border-radius: 8px;
    color: #aaa; font-size: 12px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.act-empty-mini .material-icons[b-ycbmso5zob] { font-size: 16px; color: #ccc; }

/* Separador criterio */
.act-crit-sep[b-ycbmso5zob] {
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 0 8px;
}
.act-crit-name[b-ycbmso5zob] {
    font-size: 13px; font-weight: 500; color: #4BA8AA;
    display: flex; align-items: center; gap: 4px;
}
.act-crit-name .material-icons[b-ycbmso5zob] { font-size: 14px; }
.act-crit-count[b-ycbmso5zob] { font-size: 12px; color: #888; }
.act-crit-tipo[b-ycbmso5zob] {
    font-size: 10px; padding: 2px 6px; border-radius: 6px;
    margin-left: 6px; font-weight: 500;
}
.tipo-simple[b-ycbmso5zob] { background: #eee; color: #888; }
.tipo-pond[b-ycbmso5zob]   { background: #E8F4F8; color: #3A8E90; }

.act-pond-info[b-ycbmso5zob] {
    padding: 6px 14px; background: #E8F4F8; border-radius: 6px;
    font-size: 11px; color: #3A8E90; margin-bottom: 8px;
    display: flex; align-items: center; gap: 4px;
}

/* Card actividad */
.act-card[b-ycbmso5zob] {
    background: #fff; border: 1px solid #e0e0e0;
    padding: 14px 16px; margin-bottom: 8px;
    border-left: 3px solid #4BA8AA;
    border-radius: 0 10px 10px 0;
}
.act-card-top[b-ycbmso5zob] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 6px;
}
.act-card-name[b-ycbmso5zob] { font-size: 14px; font-weight: 500; flex: 1; color: #333; }
.act-card-badge[b-ycbmso5zob] {
    font-size: 10px; padding: 2px 8px; border-radius: 8px;
    font-weight: 500; flex-shrink: 0;
}
.act-card-mid[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.act-card-bar[b-ycbmso5zob] {
    flex: 1; height: 6px; background: #eee;
    border-radius: 3px; overflow: hidden;
}
.act-card-fill[b-ycbmso5zob] { height: 100%; border-radius: 3px; }
.fill-green[b-ycbmso5zob] { background: #639922; }
.fill-amber[b-ycbmso5zob] { background: #EF9F27; }
.fill-red[b-ycbmso5zob]   { background: #E24B4A; }

.act-card-pct[b-ycbmso5zob] { font-size: 12px; font-weight: 500; min-width: 35px; text-align: right; }
.pct-green[b-ycbmso5zob] { color: #639922; }
.pct-amber[b-ycbmso5zob] { color: #854F0B; }
.pct-red[b-ycbmso5zob]   { color: #A32D2D; }

.act-card-bottom[b-ycbmso5zob] {
    display: flex; align-items: center; justify-content: space-between;
}
.act-card-count[b-ycbmso5zob] {
    font-size: 12px; color: #888;
    display: flex; align-items: center; gap: 3px;
}
.act-card-actions[b-ycbmso5zob] { display: flex; gap: 6px; }

.act-card-eval[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 3px;
    padding: 5px 12px; border-radius: 6px;
    font-size: 11px; font-weight: 500; cursor: pointer;
    background: #4BA8AA; color: #fff; border: none;
    font-family: inherit;
}
.act-card-eval:hover[b-ycbmso5zob] { background: #3A8E90; }
.act-card-eval .material-icons[b-ycbmso5zob] { font-size: 13px; }

.act-card-del[b-ycbmso5zob] {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid #eee; background: #fff; cursor: pointer; color: #ccc;
}
.act-card-del:hover[b-ycbmso5zob] {
    color: #E24B4A; border-color: #F7C1C1; background: #FCEBEB;
}
.act-card-del .material-icons[b-ycbmso5zob] { font-size: 16px; }

/* Peso */
.act-card-peso[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0;
}
.act-peso-label[b-ycbmso5zob] {
    font-size: 11px; color: #888;
    display: flex; align-items: center; gap: 3px;
}
.act-peso-label .material-icons[b-ycbmso5zob] { font-size: 13px; }
.act-peso-bar[b-ycbmso5zob] {
    flex: 1; height: 4px; background: #eee;
    border-radius: 2px; overflow: hidden;
}
.act-peso-fill[b-ycbmso5zob] { height: 100%; background: #4BA8AA; border-radius: 2px; }
.act-peso-ctrl[b-ycbmso5zob] { display: flex; align-items: center; gap: 3px; }
.act-peso-btn[b-ycbmso5zob] {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid #4BA8AA;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent; color: #4BA8AA;
    font-family: inherit;
}
.act-peso-btn:hover[b-ycbmso5zob] { background: #E8F4F8; }
.act-peso-btn.plus[b-ycbmso5zob] { background: #4BA8AA; color: #fff; }
.act-peso-btn.plus:hover[b-ycbmso5zob] { background: #3A8E90; }
.act-peso-val[b-ycbmso5zob] {
    min-width: 32px; height: 26px; border-radius: 4px;
    background: #E8F4F8; color: #3A8E90;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500;
}

/* Resumen */
.act-resumen[b-ycbmso5zob] {
    padding: 12px 14px; background: #EAF3DE;
    border-left: 3px solid #639922;
    font-size: 12px; color: #3B6D11;
    margin-top: 14px; line-height: 1.4;
}

/* Panel overlay */
.act-panel-overlay[b-ycbmso5zob] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.3);
    z-index: 50; display: flex; justify-content: flex-end;
}
.act-panel[b-ycbmso5zob] {
    width: 400px; background: #fff; height: 100%;
    overflow-y: auto; animation: slideIn-b-ycbmso5zob 0.2s ease;
}
@keyframes slideIn-b-ycbmso5zob {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.act-panel-header[b-ycbmso5zob] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #eee;
    position: sticky; top: 0; background: #fff; z-index: 5;
}
.act-panel-title[b-ycbmso5zob] {
    font-size: 16px; font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}
.act-panel-title .material-icons[b-ycbmso5zob] { font-size: 20px; color: #4BA8AA; }
.act-panel-close[b-ycbmso5zob] { cursor: pointer; color: #aaa; }
.act-panel-close:hover[b-ycbmso5zob] { color: #333; }

.act-panel-body[b-ycbmso5zob] { padding: 16px 20px; }

.act-panel-info[b-ycbmso5zob] {
    padding: 8px 10px; background: #E8F4F8;
    border-left: 3px solid #4BA8AA;
    font-size: 11px; color: #3A8E90;
    margin-bottom: 12px; line-height: 1.4;
    display: flex; align-items: flex-start; gap: 4px;
}

.act-pgroup[b-ycbmso5zob] { margin-bottom: 12px; }
.act-plabel[b-ycbmso5zob] {
    font-size: 11px; font-weight: 500; color: #888;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px; display: block;
}
.act-pinput[b-ycbmso5zob], .act-pselect[b-ycbmso5zob] {
    width: 100%; padding: 8px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; font-family: inherit;
    box-sizing: border-box;
}
.act-pinput:focus[b-ycbmso5zob], .act-pselect:focus[b-ycbmso5zob] { outline: none; border-color: #4BA8AA; }

.act-pdivider[b-ycbmso5zob] { height: 1px; background: #eee; margin: 14px 0; }

.act-palso-label[b-ycbmso5zob] { font-size: 11px; color: #888; margin-bottom: 6px; }
.act-palso-chips[b-ycbmso5zob] {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px;
}
.act-palso-chip[b-ycbmso5zob] {
    font-size: 11px; padding: 3px 10px;
    border-radius: 12px; border: 1px solid #ddd;
    cursor: pointer; color: #888;
}
.act-palso-chip:hover[b-ycbmso5zob] { border-color: #4BA8AA; color: #4BA8AA; }
.act-palso-chip.selected[b-ycbmso5zob] {
    background: #E8F4F8; border-color: #4BA8AA; color: #3A8E90;
}

.act-psave[b-ycbmso5zob] {
    width: 100%; padding: 10px; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    background: #6EC6C8; color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: inherit;
}
.act-psave:hover[b-ycbmso5zob] { background: #4BA8AA; }
.act-psave:disabled[b-ycbmso5zob] { opacity: 0.6; cursor: not-allowed; }

/* Criterio drawer extras */
.crit-total-bar[b-ycbmso5zob] {
    padding: 6px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 500; margin-bottom: 14px;
    display: flex; align-items: center;
}
.crit-total-bar.ok[b-ycbmso5zob]   { background: #EAF3DE; color: #3B6D11; }
.crit-total-bar.warn[b-ycbmso5zob] { background: #FCEBEB; color: #A32D2D; }

.crit-toggle-row[b-ycbmso5zob] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
}
.crit-toggle-label[b-ycbmso5zob] {
    font-size: 13px; display: flex; align-items: center; gap: 4px;
}
.crit-tipo-desc[b-ycbmso5zob] { margin-top: 4px; }

.cc-toggle[b-ycbmso5zob] {
    width: 40px; height: 22px; border-radius: 11px; background: #ccc;
    position: relative; cursor: pointer; transition: background 0.2s;
}
.cc-toggle.on[b-ycbmso5zob] { background: #4BA8AA; }
.cc-toggle[b-ycbmso5zob]::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 2px; left: 2px; transition: left 0.2s;
}
.cc-toggle.on[b-ycbmso5zob]::after { left: 20px; }

.crit-existing-label[b-ycbmso5zob] { font-size: 11px; color: #888; margin-bottom: 6px; }
.crit-existing-list[b-ycbmso5zob] { margin-bottom: 14px; }
.crit-existing-item[b-ycbmso5zob] {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; font-size: 12px;
}
.crit-existing-dot[b-ycbmso5zob] {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.crit-existing-name[b-ycbmso5zob] { flex: 1; color: #555; }
.crit-existing-pct[b-ycbmso5zob] {
    font-weight: 500; color: #4BA8AA; min-width: 50px; text-align: right;
}
.crit-existing-tipo[b-ycbmso5zob] {
    font-size: 10px; padding: 1px 6px; border-radius: 6px; font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .act-toolbar[b-ycbmso5zob] { flex-direction: column; align-items: stretch; }
    .act-search[b-ycbmso5zob]  { max-width: 100%; }
    .act-btn-add[b-ycbmso5zob] { margin-left: 0; justify-content: center; }
}
@media (max-width: 600px) {
    .act-dash[b-ycbmso5zob] { grid-template-columns: repeat(2, 1fr); }
    .act-av-label[b-ycbmso5zob] { min-width: 80px; }
}
@media (max-width: 480px) {
    .act-panel[b-ycbmso5zob] { width: 100%; }
    .act-card-top[b-ycbmso5zob]    { flex-direction: column; gap: 4px; }
    .act-card-bottom[b-ycbmso5zob] { flex-direction: column; align-items: flex-start; gap: 8px; }
    .act-card-actions[b-ycbmso5zob] { width: 100%; justify-content: flex-end; }
}
/* /Pages/Asistencia.razor.rz.scp.css */
/* === Asistencia · v2 wrapper (Fase D) === */
.asistencia-container[b-ppsowu0b0l] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.as-bc[b-ppsowu0b0l] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.as-bc .material-symbols-rounded[b-ppsowu0b0l] { font-size: 14px !important; }
.as-bc a[b-ppsowu0b0l] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.as-bc a:hover[b-ppsowu0b0l] { color: var(--brand-teal-deep); }
.as-sep[b-ppsowu0b0l] { color: var(--text-muted); }
.as-clase[b-ppsowu0b0l] { color: var(--text-secondary); font-weight: 500; }
.as-current[b-ppsowu0b0l] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.as-h[b-ppsowu0b0l] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.as-h-icon[b-ppsowu0b0l] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.25);
}
.as-h-icon .material-symbols-rounded[b-ppsowu0b0l] { font-size: 24px !important; }
.as-h-block[b-ppsowu0b0l] { flex: 1; min-width: 0; }
.as-h-title[b-ppsowu0b0l] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.as-h-sub[b-ppsowu0b0l] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

/* Breadcrumb */
.breadcrumb[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 13px;
    flex-wrap: wrap;
}
.bc-icon[b-ppsowu0b0l] { font-size: 16px; color: #999; }
.bc-link[b-ppsowu0b0l] { color: #4BA8AA; cursor: pointer; }
.bc-link:hover[b-ppsowu0b0l] { text-decoration: underline; }
.bc-separator[b-ppsowu0b0l] { font-size: 14px; color: #CCC; }
.bc-clase[b-ppsowu0b0l] { color: #666; }
.bc-current[b-ppsowu0b0l] { color: #333; font-weight: 500; }

/* Header */
.section-header[b-ppsowu0b0l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.header-left[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-title[b-ppsowu0b0l] { font-size: 18px; font-weight: 500; color: #333; }
.header-clase[b-ppsowu0b0l] { font-size: 13px; color: #999; }

/* Toolbar */
.toolbar[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.date-selector[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.date-arrow[b-ppsowu0b0l] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s;
}
.date-arrow:hover[b-ppsowu0b0l] { background: #EEE; }
.date-display[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 0.5px solid #DDD;
    border-radius: 10px;
    padding: 8px 16px;
    cursor: pointer;
}
.date-text[b-ppsowu0b0l] { font-size: 14px; color: #333; font-weight: 500; }
.btn-guardar[b-ppsowu0b0l] {
    background: #4BA8AA;
    color: white;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-guardar:hover:not(:disabled)[b-ppsowu0b0l] { opacity: 0.9; }
.btn-guardar:disabled[b-ppsowu0b0l] { opacity: 0.6; cursor: not-allowed; }

/* Loading */
.loading-state[b-ppsowu0b0l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    gap: 16px;
    color: #999;
    font-size: 14px;
}
.spinner[b-ppsowu0b0l] {
    width: 36px; height: 36px;
    border: 3px solid #E8F4F8;
    border-top: 3px solid #4BA8AA;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@@keyframes spin { to[b-ppsowu0b0l] { transform: rotate(360deg); } }

/* Stats row */
.stats-row[b-ppsowu0b0l] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.stats-card[b-ppsowu0b0l] {
    background: white;
    border-radius: 14px;
    border: 0.5px solid #EBEBEB;
    padding: 20px 24px;
}
.stats-donut[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}
.stats-summary[b-ppsowu0b0l] {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.donut-wrapper[b-ppsowu0b0l] {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}
.donut-svg[b-ppsowu0b0l] {
    width: 90px;
    height: 90px;
    transform: rotate(-90deg);
}
.donut-center[b-ppsowu0b0l] {
    position: absolute;
    top: 0; left: 0;
    width: 90px; height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.donut-pct[b-ppsowu0b0l] { font-size: 20px; font-weight: 500; color: #4BA8AA; }
.legend-title[b-ppsowu0b0l] {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.legend-items[b-ppsowu0b0l] { display: flex; flex-direction: column; gap: 5px; }
.legend-item[b-ppsowu0b0l] { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.legend-dot[b-ppsowu0b0l] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.summary-title[b-ppsowu0b0l] {
    font-size: 11px; color: #999;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.summary-row[b-ppsowu0b0l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.summary-label[b-ppsowu0b0l] { font-size: 13px; color: #666; }
.summary-value[b-ppsowu0b0l] { font-size: 15px; font-weight: 500; color: #333; }
.progress-bar[b-ppsowu0b0l] {
    height: 6px;
    background: #F0F0F0;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    margin-top: 4px;
}
.progress-segment[b-ppsowu0b0l] { height: 100%; transition: width 0.3s; }

/* Chips upper zone */
.chips-upper[b-ppsowu0b0l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Student table (card layout) */
.student-table[b-ppsowu0b0l] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 20px;
}

/* Student card */
.student-card[b-ppsowu0b0l] {
    background: white;
    border-radius: 12px;
    padding: 6px 18px;
    transition: border-color 0.3s;
}
.student-presente[b-ppsowu0b0l] {
    border: 1.5px solid transparent;
    border-color: #EBEBEB;
}
.student-incidencia[b-ppsowu0b0l] {
    animation: pulse-border 2s ease-in-out infinite;
    border: 1.5px solid rgba(211, 93, 82, 0.4);
    background: rgba(211, 93, 82, 0.02);
}
.student-unmarked[b-ppsowu0b0l] {
    border: 1.5px solid #EBEBEB;
}
@@keyframes pulse-border {
    0%[b-ppsowu0b0l], 100%[b-ppsowu0b0l] { border-color: rgba(211, 93, 82, 0.25); }
    50%[b-ppsowu0b0l] { border-color: rgba(211, 93, 82, 0.7); }
}

/* Row 1 */
.student-row1[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-num[b-ppsowu0b0l] {
    width: 30px;
    text-align: center;
    font-size: 12px;
    color: #BBB;
    flex-shrink: 0;
}
.col-name[b-ppsowu0b0l] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-buttons[b-ppsowu0b0l] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Badges */
.badge[b-ppsowu0b0l] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.badge-presente[b-ppsowu0b0l] {
    background: rgba(75,168,170,0.1);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.25);
}
.badge-falta[b-ppsowu0b0l] {
    background: rgba(232,141,141,0.1);
    color: #D35D52;
    border: 1px solid rgba(232,141,141,0.2);
}
.badge-justificada[b-ppsowu0b0l] {
    background: rgba(240,197,109,0.1);
    color: #C99A2E;
    border: 1px solid rgba(240,197,109,0.3);
}
.badge-retardo[b-ppsowu0b0l] {
    background: rgba(126,196,232,0.1);
    color: #2980B9;
    border: 1px solid rgba(126,196,232,0.3);
}

/* Row 2 */
.student-row2[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-left: 38px;
    flex-wrap: wrap;
}
.row2-left[b-ppsowu0b0l] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.row2-right[b-ppsowu0b0l] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}
.row2-actions[b-ppsowu0b0l] {
    display: flex;
    gap: 8px;
}
.action-icon[b-ppsowu0b0l] {
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.action-note[b-ppsowu0b0l] { color: #3498DB; }
.action-note:hover[b-ppsowu0b0l] { background: rgba(52,152,219,0.08); }

/* Bulk actions */
.bulk-actions[b-ppsowu0b0l] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Attendance buttons — diluted style */
.att-btn[b-ppsowu0b0l] {
    width: 60px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    user-select: none;
}
.att-inactive[b-ppsowu0b0l] {
    background: #FAFAFA;
    color: #CCC;
    border: 0.5px solid #EAEAEA;
}
.att-inactive:hover[b-ppsowu0b0l] { border-color: #BBB; color: #999; }

.att-a.active[b-ppsowu0b0l] {
    background: rgba(75, 168, 170, 0.15);
    color: #4BA8AA;
    font-weight: 500;
    border: 1.5px solid #4BA8AA;
}
.att-f.active[b-ppsowu0b0l] {
    background: rgba(232, 141, 141, 0.15);
    color: #D35D52;
    font-weight: 500;
    border: 1.5px solid #E88D8D;
}
.att-j.active[b-ppsowu0b0l] {
    background: rgba(240, 197, 109, 0.15);
    color: #C99A2E;
    font-weight: 500;
    border: 1.5px solid #F0C56D;
}
.att-r.active[b-ppsowu0b0l] {
    background: rgba(126, 196, 232, 0.15);
    color: #2980B9;
    font-weight: 500;
    border: 1.5px solid #7EC4E8;
}

/* Bitácora section */
.bitacora-section[b-ppsowu0b0l] {
    background: white;
    border-radius: 14px;
    border: 0.5px solid #EBEBEB;
    padding: 20px;
}
.bitacora-header[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.bitacora-title[b-ppsowu0b0l] { font-size: 14px; font-weight: 500; color: #444; }
.bitacora-subtitle[b-ppsowu0b0l] { font-size: 12px; color: #999; }

/* Smart chips */
.chips-container[b-ppsowu0b0l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.smart-chip[b-ppsowu0b0l] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.smart-chip:hover[b-ppsowu0b0l] { opacity: 0.75; }
.chip-teal[b-ppsowu0b0l] {
    background: rgba(75,168,170,0.1);
    border: 1px solid rgba(75,168,170,0.3);
    color: #4BA8AA;
}
.chip-red[b-ppsowu0b0l] {
    background: rgba(231,76,60,0.06);
    border: 1px solid rgba(231,76,60,0.2);
    color: #D35D52;
}
.chip-orange[b-ppsowu0b0l] {
    background: rgba(243,156,18,0.08);
    border: 1px solid rgba(243,156,18,0.2);
    color: #C99A2E;
}
.chip-blue[b-ppsowu0b0l] {
    background: rgba(52,152,219,0.08);
    border: 1px solid rgba(52,152,219,0.2);
    color: #2980B9;
}

/* Bitácora input */
.bitacora-input[b-ppsowu0b0l] { margin-bottom: 12px; }
.bitacora-textarea[b-ppsowu0b0l] {
    width: 100%;
    min-height: 70px;
    padding: 14px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #333;
    resize: vertical;
    background: #FBFBFB;
    outline: none;
    transition: border-color 0.2s;
}
.bitacora-textarea:focus[b-ppsowu0b0l] { border-color: #4BA8AA; }
.bitacora-actions[b-ppsowu0b0l] { display: flex; justify-content: flex-end; }
.btn-agregar-nota[b-ppsowu0b0l] {
    background: #4BA8AA;
    color: white;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-agregar-nota:hover:not(:disabled)[b-ppsowu0b0l] { opacity: 0.9; }
.btn-agregar-nota:disabled[b-ppsowu0b0l] { opacity: 0.5; cursor: not-allowed; }

/* Bitácora historial */
.bitacora-historial[b-ppsowu0b0l] {
    border-top: 0.5px solid #F0F0F0;
    margin-top: 18px;
    padding-top: 16px;
}
.historial-title[b-ppsowu0b0l] {
    font-size: 11px; color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.historial-item[b-ppsowu0b0l] {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    background: #FAFAFA;
    border-radius: 10px;
    margin-bottom: 8px;
}
.historial-item:last-child[b-ppsowu0b0l] { margin-bottom: 0; }
.historial-bar[b-ppsowu0b0l] {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    min-height: 30px;
}
.historial-content[b-ppsowu0b0l] { flex: 1; }
.historial-nota[b-ppsowu0b0l] { font-size: 12px; color: #555; }
.historial-fecha[b-ppsowu0b0l] { font-size: 11px; color: #BBB; margin-top: 3px; }

/* Toast messages */
.toast[b-ppsowu0b0l] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 200;
    animation: slideUp 0.3s ease;
}
.toast-success[b-ppsowu0b0l] {
    background: rgba(75,168,170,0.15);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.3);
}
.toast-error[b-ppsowu0b0l] {
    background: rgba(231,76,60,0.1);
    color: #D35D52;
    border: 1px solid rgba(231,76,60,0.2);
}
.toast-bitacora[b-ppsowu0b0l] {
    background: rgba(75,168,170,0.15);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.3);
}
.toast-chip[b-ppsowu0b0l] {
    background: rgba(75,168,170,0.10);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.2);
    font-size: 12px;
    padding: 8px 16px;
}
@@keyframes slideUp {
    from[b-ppsowu0b0l] { opacity: 0; transform: translateY(20px); }
    to[b-ppsowu0b0l] { opacity: 1; transform: translateY(0); }
}

/* ========== RESPONSIVE ========== */

@@media (max-width: 900px) {
    .stats-row[b-ppsowu0b0l] {
        flex-direction: column;
    }
    .stats-summary[b-ppsowu0b0l] {
        min-width: unset;
    }
    .att-btn[b-ppsowu0b0l] {
        width: 48px;
        height: 34px;
        font-size: 12px;
    }
}

@@media (max-width: 700px) {
    .asistencia-container[b-ppsowu0b0l] {
        padding: 16px;
    }
    .toolbar[b-ppsowu0b0l] {
        flex-direction: column;
        align-items: stretch;
    }
    .date-selector[b-ppsowu0b0l] {
        justify-content: center;
    }
    .btn-guardar[b-ppsowu0b0l] {
        justify-content: center;
        width: 100%;
    }
    .stats-donut[b-ppsowu0b0l] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .donut-legend[b-ppsowu0b0l] {
        text-align: left;
    }
    .att-btn[b-ppsowu0b0l] {
        width: 40px;
        height: 32px;
        font-size: 11px;
        border-radius: 6px;
    }
    .col-name[b-ppsowu0b0l] { font-size: 12px; }
    .student-card[b-ppsowu0b0l] { padding: 12px 14px; }
    .student-row2[b-ppsowu0b0l] { padding-left: 30px; }
    .action-icon[b-ppsowu0b0l] { font-size: 16px; }
    .smart-chip[b-ppsowu0b0l] { font-size: 11px; padding: 5px 10px; }
}

@@media (max-width: 480px) {
    .asistencia-container[b-ppsowu0b0l] {
        padding: 12px;
    }
    .breadcrumb[b-ppsowu0b0l] { font-size: 11px; }
    .header-title[b-ppsowu0b0l] { font-size: 16px; }
    .date-text[b-ppsowu0b0l] { font-size: 12px; }
    .col-num[b-ppsowu0b0l] { width: 24px; font-size: 11px; }
    .col-buttons[b-ppsowu0b0l] { gap: 3px; }
    .att-btn[b-ppsowu0b0l] {
        width: 36px;
        height: 30px;
        font-size: 11px;
        border-radius: 6px;
    }
    .col-name[b-ppsowu0b0l] {
        font-size: 11px;
    }
    .student-row2[b-ppsowu0b0l] { padding-left: 24px; gap: 8px; }
    .row2-actions[b-ppsowu0b0l] { gap: 6px; }
    .bitacora-section[b-ppsowu0b0l] { padding: 14px; }
    .smart-chip[b-ppsowu0b0l] { font-size: 11px; padding: 5px 10px; }
    .toast[b-ppsowu0b0l] {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
}
/* /Pages/Bitacora.razor.rz.scp.css */
/* === Bitácora · v2 wrapper (Fase D) ===
   Solo chrome con tokens v2; el resto del CSS preservado. */
.bitacora-container[b-ms8zm5dtve] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.bi-breadcrumb[b-ms8zm5dtve] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.bi-breadcrumb .material-symbols-rounded[b-ms8zm5dtve] { font-size: 14px !important; }
.bi-breadcrumb a[b-ms8zm5dtve] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.bi-breadcrumb a:hover[b-ms8zm5dtve] { color: var(--brand-teal-deep); }
.bi-sep[b-ms8zm5dtve] { color: var(--text-muted); }
.bi-clase[b-ms8zm5dtve] { color: var(--text-secondary); font-weight: 500; }
.bi-current[b-ms8zm5dtve] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.bi-header[b-ms8zm5dtve] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.bi-header-icon[b-ms8zm5dtve] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #A32D2D, #7F1D1D);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(163, 45, 45, 0.25);
}
.bi-header-icon .material-symbols-rounded[b-ms8zm5dtve] { font-size: 24px !important; }
.bi-title-block[b-ms8zm5dtve] { flex: 1; min-width: 0; }
.bi-title[b-ms8zm5dtve] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.bi-sub[b-ms8zm5dtve] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

/* Class pills */
.class-pills[b-ms8zm5dtve] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-ms8zm5dtve] {
    padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s;
}
.pill:hover[b-ms8zm5dtve] { border-color: #4BA8AA; color: #4BA8AA; }
.pill.active[b-ms8zm5dtve] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Loading */
.loading-state[b-ms8zm5dtve] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-ms8zm5dtve] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-ms8zm5dtve] { transform: rotate(360deg); } }

/* Layout 2 columnas */
.bitacora-layout[b-ms8zm5dtve] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 20px;
    align-items: start;
}

/* ========== REGISTRO CARD ========== */
.registro-card[b-ms8zm5dtve] {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px 20px;
}
.registro-title[b-ms8zm5dtve] {
    font-size: 14px; font-weight: 500; color: #888; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.registro-title .material-icons[b-ms8zm5dtve] { font-size: 16px; color: #4BA8AA; }

.registro-chips[b-ms8zm5dtve] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.registro-chip[b-ms8zm5dtve] {
    padding: 5px 12px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s;
}
.registro-chip:hover[b-ms8zm5dtve] { border-color: #4BA8AA; color: #4BA8AA; }
.registro-chip.selected[b-ms8zm5dtve] { background: #E8F4F8; border-color: #4BA8AA; color: #3A8E90; }
.chip-incidencia[b-ms8zm5dtve] { border-color: #F7C1C1; color: #A32D2D; }
.chip-incidencia:hover[b-ms8zm5dtve], .chip-incidencia.selected[b-ms8zm5dtve] { background: #FCEBEB; border-color: #E24B4A; color: #791F1F; }

.registro-nota[b-ms8zm5dtve] {
    width: 100%; min-height: 80px; border: 1px solid #ddd; border-radius: 8px;
    padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; color: #333;
    box-sizing: border-box;
}
.registro-nota:focus[b-ms8zm5dtve] { outline: none; border-color: #4BA8AA; }

.registro-asignar[b-ms8zm5dtve] {
    display: flex; align-items: center; justify-content: space-between;
    margin: 12px 0; font-size: 13px; color: #888;
}
.asignar-label[b-ms8zm5dtve] { display: flex; align-items: center; gap: 4px; }
.asignar-botones[b-ms8zm5dtve] { display: flex; gap: 6px; }
.asignar-btn[b-ms8zm5dtve] {
    padding: 5px 12px; border-radius: 6px; font-size: 12px; border: 1px solid #ccc;
    cursor: pointer; background: #fff; color: #666; transition: all 0.15s; font-family: inherit;
}
.asignar-btn:hover[b-ms8zm5dtve] { border-color: #4BA8AA; color: #4BA8AA; }
.asignar-btn.active[b-ms8zm5dtve] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

.alumnos-seleccionados[b-ms8zm5dtve] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.alumno-chip[b-ms8zm5dtve] {
    font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #E8F4F8;
    color: #3A8E90; display: flex; align-items: center; gap: 3px;
}
.chip-remove[b-ms8zm5dtve] { font-size: 12px !important; cursor: pointer; }
.chip-remove:hover[b-ms8zm5dtve] { color: #E24B4A; }
.grupo-label[b-ms8zm5dtve] { font-size: 11px; color: #aaa; padding: 2px 0; }

.selector-alumnos[b-ms8zm5dtve] { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 10px; max-height: 200px; overflow-y: auto; }
.selector-search[b-ms8zm5dtve] {
    width: 100%; padding: 8px 10px; border: none; border-bottom: 1px solid #eee;
    font-size: 12px; outline: none; box-sizing: border-box; font-family: inherit;
}
.selector-lista[b-ms8zm5dtve] { max-height: 160px; overflow-y: auto; }
.selector-item[b-ms8zm5dtve] {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    font-size: 12px; cursor: pointer; color: #555;
}
.selector-item:hover[b-ms8zm5dtve] { background: #f5f5f5; }
.selector-item.checked[b-ms8zm5dtve] { color: #4BA8AA; font-weight: 500; }

.registro-guardar[b-ms8zm5dtve] {
    width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 14px;
    font-weight: 500; cursor: pointer; background: #6EC6C8; color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 4px; transition: background 0.15s; font-family: inherit;
}
.registro-guardar:hover[b-ms8zm5dtve] { background: #4BA8AA; }
.registro-guardar:disabled[b-ms8zm5dtve] { opacity: 0.6; cursor: not-allowed; }

/* ========== STATS ========== */
.bitacora-stats[b-ms8zm5dtve] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.bstat[b-ms8zm5dtve] { text-align: center; padding: 8px; border-radius: 8px; }
.bstat-num[b-ms8zm5dtve] { font-size: 18px; font-weight: 500; }
.bstat-label[b-ms8zm5dtve] { font-size: 10px; margin-top: 2px; }
.bstat-total[b-ms8zm5dtve] { background: #E8F4F8; color: #3A8E90; }
.bstat-manual[b-ms8zm5dtve] { background: #F3F0F8; color: #7B68A8; }
.bstat-asist[b-ms8zm5dtve] { background: #EAF3DE; color: #3B6D11; }
.bstat-eval[b-ms8zm5dtve] { background: #FAEEDA; color: #854F0B; }

/* ========== HISTORIAL ========== */
.historial-card[b-ms8zm5dtve] { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px 20px; }
.historial-title[b-ms8zm5dtve] {
    font-size: 14px; font-weight: 500; color: #888; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.historial-title .material-icons[b-ms8zm5dtve] { font-size: 16px; color: #4BA8AA; }

.historial-toolbar[b-ms8zm5dtve] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.historial-search[b-ms8zm5dtve] {
    display: flex; align-items: center; gap: 5px; border: 1px solid #ddd;
    border-radius: 8px; padding: 5px 10px; flex: 1; max-width: 220px;
}
.historial-search input[b-ms8zm5dtve] { border: none; outline: none; font-size: 12px; width: 100%; background: transparent; font-family: inherit; }
.historial-filtros[b-ms8zm5dtve] { display: flex; gap: 4px; }
.hfiltro[b-ms8zm5dtve] {
    padding: 4px 10px; border-radius: 6px; font-size: 11px; border: 1px solid #ddd;
    cursor: pointer; background: transparent; color: #888; transition: all 0.15s; font-family: inherit;
}
.hfiltro:hover[b-ms8zm5dtve] { border-color: #4BA8AA; color: #4BA8AA; }
.hfiltro.active[b-ms8zm5dtve] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

.historial-vacio[b-ms8zm5dtve] {
    display: flex; flex-direction: column; align-items: center; padding: 40px 20px;
    gap: 8px; color: #ccc; font-size: 13px;
}

.historial-entry[b-ms8zm5dtve] {
    border: 1px solid #e8e8e8; border-radius: 10px; padding: 12px 14px;
    margin-bottom: 8px; transition: border-color 0.15s;
}
.historial-entry:hover[b-ms8zm5dtve] { border-color: #ccc; }
.entry-auto[b-ms8zm5dtve] { opacity: 0.6; border-style: dashed; }

.entry-top[b-ms8zm5dtve] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; flex-wrap: wrap; gap: 4px; }
.entry-fecha[b-ms8zm5dtve] { font-size: 12px; font-weight: 500; color: #555; }
.entry-badges[b-ms8zm5dtve] { display: flex; gap: 4px; align-items: center; }
.entry-badge[b-ms8zm5dtve] { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.badge-manual[b-ms8zm5dtve] { background: #E8F4F8; color: #3A8E90; }
.badge-asistencia[b-ms8zm5dtve] { background: #EAF3DE; color: #3B6D11; }
.badge-evaluacion[b-ms8zm5dtve] { background: #FAEEDA; color: #854F0B; }

.entry-texto[b-ms8zm5dtve] { font-size: 13px; margin-bottom: 4px; color: #333; }
.entry-asignado[b-ms8zm5dtve] { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 3px; }

.entry-delete[b-ms8zm5dtve] {
    border: none; background: transparent; cursor: pointer; color: #ccc;
    padding: 2px; display: flex; align-items: center;
}
.entry-delete .material-icons[b-ms8zm5dtve] { font-size: 16px; }
.entry-delete:hover[b-ms8zm5dtve] { color: #E24B4A; }

/* ========== RESPONSIVE ========== */
@@media (max-width: 768px) {
    .bitacora-container[b-ms8zm5dtve] { padding: 12px; }
    .bitacora-layout[b-ms8zm5dtve] { grid-template-columns: 1fr; }
    .historial-toolbar[b-ms8zm5dtve] { flex-direction: column; align-items: stretch; }
    .historial-search[b-ms8zm5dtve] { max-width: 100%; }
    .historial-filtros[b-ms8zm5dtve] { justify-content: flex-end; }
    .registro-asignar[b-ms8zm5dtve] { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@@media (max-width: 480px) {
    .bitacora-stats[b-ms8zm5dtve] { grid-template-columns: repeat(2, 1fr); }
    .registro-chips[b-ms8zm5dtve] { gap: 4px; }
    .registro-chip[b-ms8zm5dtve] { padding: 4px 8px; font-size: 11px; }
    .entry-top[b-ms8zm5dtve] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/Calificaciones.razor.rz.scp.css */
/* === Calificaciones · v2 wrapper (Fase D) === */
.cal-container[b-bw1s9aaqba] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.cl-breadcrumb[b-bw1s9aaqba] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.cl-breadcrumb .material-symbols-rounded[b-bw1s9aaqba] { font-size: 14px !important; }
.cl-breadcrumb a[b-bw1s9aaqba] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.cl-breadcrumb a:hover[b-bw1s9aaqba] { color: var(--brand-teal-deep); }
.cl-sep[b-bw1s9aaqba] { color: var(--text-muted); }
.cl-clase[b-bw1s9aaqba] { color: var(--text-secondary); font-weight: 500; }
.cl-current[b-bw1s9aaqba] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.cl-header[b-bw1s9aaqba] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.cl-header-icon[b-bw1s9aaqba] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.cl-header-icon .material-symbols-rounded[b-bw1s9aaqba] { font-size: 24px !important; }
.cl-title-block[b-bw1s9aaqba] { flex: 1; min-width: 0; }
.cl-title[b-bw1s9aaqba] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.cl-sub[b-bw1s9aaqba] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

/* Pills */
.class-pills[b-bw1s9aaqba] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-bw1s9aaqba] {
    padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s;
}
.pill:hover[b-bw1s9aaqba] { border-color: #4BA8AA; color: #4BA8AA; }
.pill.active[b-bw1s9aaqba] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Loading */
.loading-state[b-bw1s9aaqba] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-bw1s9aaqba] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-bw1s9aaqba] { transform: rotate(360deg); } }

/* Toolbar */
.cal-toolbar[b-bw1s9aaqba] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-toolbar-left[b-bw1s9aaqba] { display: flex; gap: 8px; align-items: center; flex: 1; }
.cal-toolbar-right[b-bw1s9aaqba] { display: flex; gap: 6px; }
.cal-search[b-bw1s9aaqba] { display: flex; align-items: center; gap: 5px; border: 1px solid #ddd; border-radius: 8px; padding: 6px 10px; width: 200px; }
.cal-search input[b-bw1s9aaqba] { border: none; outline: none; font-size: 12px; width: 100%; background: transparent; font-family: inherit; }
.cal-periodo-select[b-bw1s9aaqba] { padding: 6px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; color: #333; background: #fff; font-family: inherit; }
.cal-btn[b-bw1s9aaqba] {
    display: flex; align-items: center; gap: 4px; border: 1px solid #ddd; border-radius: 8px;
    padding: 6px 12px; font-size: 12px; cursor: pointer; background: #fff; color: #666;
    transition: all 0.15s; font-family: inherit;
}
.cal-btn:hover[b-bw1s9aaqba] { border-color: #4BA8AA; color: #4BA8AA; }
.cal-btn .material-icons[b-bw1s9aaqba] { font-size: 14px; }

/* Dashboard */
.cal-dashboard[b-bw1s9aaqba] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.cal-stat[b-bw1s9aaqba] { text-align: center; padding: 10px; border-radius: 8px; }
.cal-stat-num[b-bw1s9aaqba] { font-size: 20px; font-weight: 500; }
.cal-stat-label[b-bw1s9aaqba] { font-size: 10px; margin-top: 2px; }
.cal-stat-teal[b-bw1s9aaqba] { background: #E8F4F8; color: #3A8E90; }
.cal-stat-green[b-bw1s9aaqba] { background: #EAF3DE; color: #3B6D11; }
.cal-stat-red[b-bw1s9aaqba] { background: #FCEBEB; color: #A32D2D; }
.cal-stat-amber[b-bw1s9aaqba] { background: #FAEEDA; color: #854F0B; }
.cal-stat-purple[b-bw1s9aaqba] { background: #F3F0F8; color: #7B68A8; }

/* Distribution chart */
.cal-dist-section[b-bw1s9aaqba] { margin-bottom: 16px; }
.cal-dist-chart[b-bw1s9aaqba] { position: relative; height: 120px; margin-bottom: 8px; }
.cal-dist-legend[b-bw1s9aaqba] { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: #888; }
.cal-dist-item[b-bw1s9aaqba] { display: flex; align-items: center; gap: 3px; }
.cal-dist-dot[b-bw1s9aaqba] { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* Table */
.cal-table-wrap[b-bw1s9aaqba] { border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }
.cal-table-scroll[b-bw1s9aaqba] { overflow-x: auto; }
.cal-table[b-bw1s9aaqba] { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; }
.cal-table th[b-bw1s9aaqba] {
    background: #E8F4F8; font-weight: 500; font-size: 12px; padding: 10px 8px;
    text-align: center; border-bottom: 2px solid #6EC6C8; white-space: nowrap;
}
.cal-th-alumno[b-bw1s9aaqba] {
    text-align: left !important; padding-left: 14px !important; min-width: 230px;
    position: sticky; left: 0; z-index: 15; background: #E8F4F8; cursor: pointer;
    box-shadow: 4px 0 6px -2px rgba(0,0,0,0.08);
}
.cal-th-sort[b-bw1s9aaqba] { cursor: pointer; min-width: 90px; }
.cal-table td[b-bw1s9aaqba] { padding: 8px; text-align: center; font-size: 13px; border-bottom: 1px solid #eee; }
.cal-td-alumno[b-bw1s9aaqba] {
    text-align: left !important; padding-left: 14px !important; min-width: 230px;
    position: sticky; left: 0; z-index: 5; background: #fff;
    box-shadow: 4px 0 6px -2px rgba(0,0,0,0.05);
}
.cal-table tr:hover td[b-bw1s9aaqba] { background: rgba(75,168,170,0.04); }
.cal-table tr:hover .cal-td-alumno[b-bw1s9aaqba] { background: #EFF8F8; }
.cal-alumno-name[b-bw1s9aaqba] { font-weight: 500; font-size: 13px; }

/* Nota colors */
.cal-nota[b-bw1s9aaqba] { border-radius: 6px; padding: 3px 8px; font-size: 13px; font-weight: 500; display: inline-block; min-width: 36px; }
.cal-nota-10[b-bw1s9aaqba] { background: #E8F8E0; color: #2D7A06; }
.cal-nota-9[b-bw1s9aaqba] { background: #E8F8E0; color: #4A8C1A; }
.cal-nota-8[b-bw1s9aaqba] { background: #EAF3DE; color: #5A9A2E; }
.cal-nota-7[b-bw1s9aaqba] { background: #FAEEDA; color: #856404; }
.cal-nota-6[b-bw1s9aaqba] { background: #FFF0D0; color: #9A6B09; }
.cal-nota-5[b-bw1s9aaqba] { background: #F8D7DA; color: #A32D2D; }

/* Faltas */
.cal-faltas[b-bw1s9aaqba] { font-size: 12px; font-weight: 500; }
.cal-faltas-ok[b-bw1s9aaqba] { color: #639922; }
.cal-faltas-warn[b-bw1s9aaqba] { color: #EF9F27; }
.cal-faltas-bad[b-bw1s9aaqba] { color: #E24B4A; }

/* Puntos extra */
.cal-pe-pos[b-bw1s9aaqba] { color: #639922; font-size: 12px; font-weight: 500; }
.cal-pe-zero[b-bw1s9aaqba] { color: #ccc; font-size: 12px; }

/* Category header */
.cal-cat-header[b-bw1s9aaqba] { font-size: 11px; line-height: 1.2; }
.cal-cat-pct[b-bw1s9aaqba] { font-size: 10px; opacity: 0.6; font-weight: 400; }

/* Responsive */
@@media (max-width: 768px) {
    .cal-container[b-bw1s9aaqba] { padding: 12px; }
    .cal-th-alumno[b-bw1s9aaqba], .cal-td-alumno[b-bw1s9aaqba] { min-width: 170px; }
}
@@media (max-width: 600px) {
    .cal-toolbar[b-bw1s9aaqba] { flex-direction: column; align-items: stretch; }
    .cal-toolbar-left[b-bw1s9aaqba] { flex-direction: column; }
    .cal-search[b-bw1s9aaqba] { width: 100%; }
    .cal-toolbar-right[b-bw1s9aaqba] { justify-content: flex-end; }
    .cal-dashboard[b-bw1s9aaqba] { grid-template-columns: repeat(3, 1fr); }
}
@@media (max-width: 480px) {
    .cal-th-alumno[b-bw1s9aaqba], .cal-td-alumno[b-bw1s9aaqba] { min-width: 140px; }
    .cal-alumno-name[b-bw1s9aaqba] { font-size: 12px; }
    .cal-dashboard[b-bw1s9aaqba] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Comunicacion/Bandeja.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Bandeja — replica de `micomunidad-bandeja-v3.html`
   ──────────────────────────────────────────────────────────────────── */

.bdj-page[b-oic1eygpda] {
    display: grid;
    grid-template-columns: 1fr 320px;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg);
}

.bdj-main[b-oic1eygpda] {
    overflow-y: auto;
    background:
        radial-gradient(circle at 15% 10%, rgba(110, 198, 200, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(217, 119, 6, 0.03) 0%, transparent 50%),
        var(--bg);
    display: flex;
    flex-direction: column;
}

.bdj-main[b-oic1eygpda]::-webkit-scrollbar { width: 10px; }
.bdj-main[b-oic1eygpda]::-webkit-scrollbar-thumb {
    background: #C7C0B1;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ════ Page header sticky ═══════════════════════════════════════════ */

.bdj-page-header[b-oic1eygpda] {
    padding: 22px 32px 0;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 4;
}

.bdj-breadcrumb[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.bdj-breadcrumb .material-symbols-rounded[b-oic1eygpda] { font-size: 14px !important; }
.bdj-breadcrumb a[b-oic1eygpda] { color: var(--text-secondary); text-decoration: none; }
.bdj-sep[b-oic1eygpda] { color: var(--text-muted); }
.bdj-current[b-oic1eygpda] { color: var(--text-primary); font-weight: 700; }

.bdj-title-row[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.bdj-title-icon[b-oic1eygpda] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.25);
}

.bdj-title-icon .material-symbols-rounded[b-oic1eygpda] { font-size: 24px !important; }

.bdj-title-block[b-oic1eygpda] { flex: 1; }

.bdj-title[b-oic1eygpda] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.bdj-sub[b-oic1eygpda] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.bdj-actions[b-oic1eygpda] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bdj-icon-btn[b-oic1eygpda] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.bdj-icon-btn:hover[b-oic1eygpda] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.bdj-icon-btn .material-symbols-rounded[b-oic1eygpda] { font-size: 18px !important; }

.bdj-mark-all[b-oic1eygpda] {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: inherit;
}

.bdj-mark-all:hover[b-oic1eygpda] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.bdj-mark-all .material-symbols-rounded[b-oic1eygpda] { font-size: 16px !important; }

/* ════ Tabs ═════════════════════════════════════════════════════════ */

.bdj-tabs[b-oic1eygpda] {
    display: flex;
    gap: 4px;
    padding: 18px 32px 0;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 110px;
    background: var(--bg);
    z-index: 3;
}

.bdj-tab[b-oic1eygpda] {
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    background: transparent;
    font-family: inherit;
}

.bdj-tab:hover[b-oic1eygpda] { color: var(--text-primary); }

.bdj-tab.active[b-oic1eygpda] {
    color: var(--brand-teal-deep);
    border-bottom-color: var(--brand-teal);
}

.bdj-tab .material-symbols-rounded[b-oic1eygpda] { font-size: 16px !important; }

.bdj-tab-count[b-oic1eygpda] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    background: #F0ECE2;
    color: var(--text-secondary);
    border-radius: 10px;
}

.bdj-tab.active .bdj-tab-count[b-oic1eygpda] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

.bdj-tab-count.urgent[b-oic1eygpda] { background: #FEE2E2; color: var(--danger); }

.bdj-tab.active .bdj-tab-count.urgent[b-oic1eygpda] {
    background: rgba(163, 45, 45, 0.15);
    color: var(--danger);
}

/* ════ Filter bar ═══════════════════════════════════════════════════ */

.bdj-filter-bar[b-oic1eygpda] {
    padding: 14px 32px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bdj-filter-chips[b-oic1eygpda] {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.bdj-filter-chip[b-oic1eygpda] {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bdj-filter-chip:focus-visible[b-oic1eygpda] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.bdj-filter-chip:hover[b-oic1eygpda] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.bdj-filter-chip.active[b-oic1eygpda] {
    background: var(--bg-light-teal);
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.bdj-filter-chip.priority-urgent[b-oic1eygpda] {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: var(--danger);
}

.bdj-filter-chip .material-symbols-rounded[b-oic1eygpda] { font-size: 13px !important; }

.bdj-filter-chip-count[b-oic1eygpda] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    background: #F0ECE2;
    border-radius: 8px;
    color: var(--text-muted);
}

.bdj-filter-chip.active .bdj-filter-chip-count[b-oic1eygpda] {
    background: rgba(110, 198, 200, 0.2);
    color: var(--brand-teal-deep);
}

.bdj-filter-divider[b-oic1eygpda] {
    width: 1px;
    height: 18px;
    background: var(--border-soft);
    margin: 0 4px;
}

/* ════ Content / días / notifs ══════════════════════════════════════ */

.bdj-content[b-oic1eygpda] {
    padding: 8px 32px 40px;
    flex: 1;
}

.bdj-day-group[b-oic1eygpda] { margin-bottom: 20px; }

.bdj-day-header[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 12px;
    position: sticky;
    top: 218px;
    background: var(--bg);
    z-index: 2;
}

.bdj-day-label[b-oic1eygpda] {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.bdj-day-date[b-oic1eygpda] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.bdj-day-line[b-oic1eygpda] {
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.bdj-day-count[b-oic1eygpda] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-panel);
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

/* ════ Notif card ════════════════════════════════════════════════════ */

.bdj-notif[b-oic1eygpda] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    transition: all 0.15s;
    position: relative;
    align-items: flex-start;
}

.bdj-notif:hover[b-oic1eygpda] {
    border-color: var(--border-med);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.bdj-notif.unread[b-oic1eygpda] {
    border-left: 3px solid var(--brand-teal);
    padding-left: 13px;
    background: linear-gradient(90deg, rgba(110, 198, 200, 0.04) 0%, var(--bg-panel) 30%);
}

.bdj-notif.urgent[b-oic1eygpda] {
    border-color: #FCA5A5;
    background: linear-gradient(90deg, #FEF2F2 0%, var(--bg-panel) 40%);
    border-left: 3px solid var(--danger);
    padding-left: 13px;
}

.bdj-notif.urgent[b-oic1eygpda]::before {
    content: "URGENTE";
    position: absolute;
    top: 12px;
    right: 60px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--danger);
    padding: 2px 6px;
    background: rgba(163, 45, 45, 0.1);
    border-radius: 4px;
}

.bdj-notif-icon[b-oic1eygpda] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.bdj-notif-icon.alumno[b-oic1eygpda]   { background: linear-gradient(135deg, #DC2626, #991B1B); }
.bdj-notif-icon.task[b-oic1eygpda]     { background: linear-gradient(135deg, #F59E0B, #D97706); }
.bdj-notif-icon.approval[b-oic1eygpda] { background: linear-gradient(135deg, #10B981, #047857); }
.bdj-notif-icon.aviso[b-oic1eygpda]    { background: linear-gradient(135deg, var(--pin-gold), #92400E); }
.bdj-notif-icon.deadline[b-oic1eygpda] { background: linear-gradient(135deg, #BA7517, #92400E); }
.bdj-notif-icon.system[b-oic1eygpda]   { background: linear-gradient(135deg, #6B7280, #374151); }

.bdj-notif-icon .material-symbols-rounded[b-oic1eygpda] { font-size: 22px !important; }

.bdj-notif-avatar[b-oic1eygpda] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
    font-family: var(--font-sans);
}

.bdj-notif-source[b-oic1eygpda] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid var(--bg-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.bdj-notif-source.chat[b-oic1eygpda]    { background: var(--brand-teal-dark); }
.bdj-notif-source.project[b-oic1eygpda] { background: var(--t-nem); }

.bdj-notif-source .material-symbols-rounded[b-oic1eygpda] {
    font-size: 10px !important;
    font-variation-settings: "FILL" 1 !important;
}

.bdj-notif-body[b-oic1eygpda] { min-width: 0; }

.bdj-notif-head[b-oic1eygpda] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.bdj-notif-title[b-oic1eygpda] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.bdj-notif-tag[b-oic1eygpda] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.bdj-notif-tag.chat[b-oic1eygpda]     { background: rgba(75, 168, 170, 0.15); color: var(--brand-teal-deep); }
.bdj-notif-tag.proyecto[b-oic1eygpda] { background: rgba(217, 119, 6, 0.12); color: var(--t-nem); }
.bdj-notif-tag.proceso[b-oic1eygpda]  { background: rgba(107, 114, 128, 0.15); color: #4B5563; }
.bdj-notif-tag.evento[b-oic1eygpda]   { background: rgba(219, 39, 119, 0.12); color: var(--t-evento); }

.bdj-notif-desc[b-oic1eygpda] {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 3px;
}

.bdj-notif-desc strong[b-oic1eygpda] { color: var(--text-primary); font-weight: 700; }

.bdj-smart-mention[b-oic1eygpda] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
}

.bdj-smart-mention .material-symbols-rounded[b-oic1eygpda] {
    font-size: 11px !important;
    font-variation-settings: "FILL" 1 !important;
}

.bdj-smart-mention.alumno[b-oic1eygpda] { background: rgba(186, 117, 23, 0.14); color: #8B5A10; }
.bdj-smart-mention.grupo[b-oic1eygpda]  { background: rgba(110, 198, 200, 0.18); color: var(--brand-teal-deep); }
.bdj-smart-mention.me[b-oic1eygpda]     { background: rgba(245, 158, 11, 0.18); color: #854D0E; }

.bdj-notif-meta[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.bdj-notif-meta-item[b-oic1eygpda] { display: inline-flex; align-items: center; gap: 3px; }
.bdj-notif-meta-item .material-symbols-rounded[b-oic1eygpda] { font-size: 12px !important; }

.bdj-notif-meta-divider[b-oic1eygpda] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
}

.bdj-notif-actions[b-oic1eygpda] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.bdj-notif-time[b-oic1eygpda] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.bdj-notif-quick-actions[b-oic1eygpda] { display: flex; gap: 4px; }

.bdj-notif-action-btn[b-oic1eygpda] {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.bdj-notif-action-btn:hover[b-oic1eygpda] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.bdj-notif-action-btn.primary[b-oic1eygpda] {
    background: var(--brand-teal-primary);
    border-color: var(--brand-teal-primary);
    color: #FFFFFF;
}

.bdj-notif-action-btn.primary:hover[b-oic1eygpda] {
    background: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
}

.bdj-notif-action-btn.success[b-oic1eygpda] {
    background: rgba(29, 158, 117, 0.1);
    border-color: rgba(29, 158, 117, 0.3);
    color: var(--success);
}

.bdj-notif-action-btn.success:hover[b-oic1eygpda] {
    background: var(--success);
    color: #FFFFFF;
    border-color: var(--success);
}

.bdj-notif-action-btn .material-symbols-rounded[b-oic1eygpda] { font-size: 13px !important; }

/* ════ Aside ══════════════════════════════════════════════════════════ */

.bdj-aside[b-oic1eygpda] {
    background: var(--bg-cream);
    border-left: 1px solid var(--border-soft);
    overflow-y: auto;
    padding: 20px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-med) transparent;
}

.bdj-aside[b-oic1eygpda]::-webkit-scrollbar { width: 6px; }
.bdj-aside[b-oic1eygpda]::-webkit-scrollbar-thumb {
    background: var(--border-med);
    border-radius: 3px;
}

.bdj-aside-card[b-oic1eygpda] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}

.bdj-aside-title[b-oic1eygpda] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bdj-aside-title .material-symbols-rounded[b-oic1eygpda] { font-size: 13px !important; }

/* ── Summary stats ─────────────────────────────────────────────────── */

.bdj-summary-stat[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
}

.bdj-summary-stat + .bdj-summary-stat[b-oic1eygpda] {
    border-top: 1px solid var(--border-soft);
}

.bdj-summary-icon[b-oic1eygpda] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.bdj-summary-icon .material-symbols-rounded[b-oic1eygpda] { font-size: 16px !important; }

.bdj-summary-icon.notif[b-oic1eygpda]   { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }
.bdj-summary-icon.mention[b-oic1eygpda] { background: linear-gradient(135deg, #EC4899, #BE185D); }
.bdj-summary-icon.aviso[b-oic1eygpda]   { background: linear-gradient(135deg, var(--pin-gold), #92400E); }
.bdj-summary-icon.urgent[b-oic1eygpda]  { background: linear-gradient(135deg, #DC2626, #991B1B); }

.bdj-summary-info[b-oic1eygpda] { flex: 1; min-width: 0; }

.bdj-summary-label[b-oic1eygpda] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.bdj-summary-sub[b-oic1eygpda] {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.bdj-summary-value[b-oic1eygpda] {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    line-height: 1;
}

/* ── Focus mini ────────────────────────────────────────────────────── */

.bdj-focus[b-oic1eygpda] {
    background: linear-gradient(135deg, #1E2126 0%, #2A2E35 100%);
    border-radius: 14px;
    padding: 16px;
    color: #FFFFFF;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.bdj-focus[b-oic1eygpda]::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 198, 200, 0.25), transparent 65%);
}

.bdj-focus-content[b-oic1eygpda] { position: relative; }

.bdj-focus-icon[b-oic1eygpda] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(110, 198, 200, 0.18);
    color: var(--brand-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.bdj-focus-icon .material-symbols-rounded[b-oic1eygpda] { font-size: 18px !important; }

.bdj-focus-title[b-oic1eygpda] {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}

.bdj-focus-desc[b-oic1eygpda] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    margin-bottom: 11px;
}

.bdj-focus-btn[b-oic1eygpda] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--brand-teal);
    color: #0F3A3C;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.bdj-focus-btn .material-symbols-rounded[b-oic1eygpda] { font-size: 13px !important; }

/* ── Toggles ───────────────────────────────────────────────────────── */

.bdj-toggle[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}

.bdj-toggle + .bdj-toggle[b-oic1eygpda] { border-top: 1px solid var(--border-soft); }

.bdj-toggle-switch[b-oic1eygpda] {
    width: 30px;
    height: 18px;
    background: #D4CFC5;
    border-radius: 9px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}

.bdj-toggle-switch[b-oic1eygpda]::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bdj-toggle.on .bdj-toggle-switch[b-oic1eygpda] { background: var(--brand-teal); }
.bdj-toggle.on .bdj-toggle-switch[b-oic1eygpda]::after { transform: translateX(12px); }

.bdj-toggle-info[b-oic1eygpda] { flex: 1; }

.bdj-toggle-label[b-oic1eygpda] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.bdj-toggle-desc[b-oic1eygpda] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.35;
}

/* ── Devices ───────────────────────────────────────────────────────── */

.bdj-device[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
}

.bdj-device + .bdj-device[b-oic1eygpda] { border-top: 1px solid var(--border-soft); }

.bdj-device-icon[b-oic1eygpda] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F3EFE7;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bdj-device-icon.active[b-oic1eygpda] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

.bdj-device-icon .material-symbols-rounded[b-oic1eygpda] { font-size: 17px !important; }

.bdj-device-info[b-oic1eygpda] { flex: 1; min-width: 0; }

.bdj-device-name[b-oic1eygpda] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.bdj-device-meta[b-oic1eygpda] {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bdj-device-dot[b-oic1eygpda] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

.bdj-device-dot.idle[b-oic1eygpda] { background: #E0A800; }

/* ════ Responsive ═══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .bdj-page[b-oic1eygpda] { grid-template-columns: 1fr; }
    .bdj-aside[b-oic1eygpda] { display: none; }
}

@media (max-width: 720px) {
    .bdj-page-header[b-oic1eygpda] { padding: 16px 16px 0; }
    .bdj-tabs[b-oic1eygpda] { padding: 14px 16px 0; }
    .bdj-filter-bar[b-oic1eygpda] { padding: 12px 16px; }
    .bdj-content[b-oic1eygpda] { padding: 4px 16px 30px; }
    .bdj-title[b-oic1eygpda] { font-size: 22px; }
    .bdj-mark-all[b-oic1eygpda] { display: none; }
    .bdj-notif[b-oic1eygpda] {
        grid-template-columns: 40px 1fr;
        gap: 10px;
    }
    .bdj-notif-actions[b-oic1eygpda] {
        grid-column: 2;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
    }
}

/* ── Loading / Empty states ─────────────────────────────────────── */
.bdj-loading[b-oic1eygpda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.bdj-spin[b-oic1eygpda] {
    font-size: 32px !important;
    color: var(--brand-teal);
    animation: bdj-rotate-b-oic1eygpda 1s linear infinite;
}

@keyframes bdj-rotate-b-oic1eygpda { to { transform: rotate(360deg); } }

.bdj-empty[b-oic1eygpda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}

.bdj-empty .material-symbols-rounded[b-oic1eygpda] {
    font-size: 48px !important;
    color: var(--border-med);
    margin-bottom: 14px;
}

.bdj-empty h3[b-oic1eygpda] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}

.bdj-empty p[b-oic1eygpda] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}

.bdj-empty-btn[b-oic1eygpda] {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-med);
    background: white;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.bdj-empty-btn:hover[b-oic1eygpda] {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-tint);
}

.bdj-empty-btn .material-symbols-rounded[b-oic1eygpda] {
    font-size: 16px !important;
    color: inherit;
    margin: 0 !important;
}

.bdj-mark-all:disabled[b-oic1eygpda] {
    opacity: 0.45;
    cursor: not-allowed;
}

.bdj-notif[b-oic1eygpda] {
    cursor: pointer;
}

/* ── Bulk selection ───────────────────────────────────────────────── */
.bdj-notif-select[b-oic1eygpda] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--border-med);
    background: var(--bg-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    opacity: 0;
    transition: all 0.12s ease;
}

.bdj-notif:hover .bdj-notif-select[b-oic1eygpda],
.bdj-notif.has-selection .bdj-notif-select[b-oic1eygpda],
.bdj-notif.selected .bdj-notif-select[b-oic1eygpda] {
    opacity: 1;
}

.bdj-notif-select:hover[b-oic1eygpda] { border-color: var(--brand-teal); }

.bdj-notif-select.checked[b-oic1eygpda] {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
}

.bdj-notif-select.checked .material-symbols-rounded[b-oic1eygpda] {
    color: white;
    font-size: 14px !important;
    font-variation-settings: 'FILL' 1, 'wght' 700 !important;
}

.bdj-notif.selected[b-oic1eygpda] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.06);
}

/* ── Bulk banner ──────────────────────────────────────────────────── */
.bdj-bulk-banner[b-oic1eygpda] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 0 12px;
    background: linear-gradient(90deg, rgba(110, 198, 200, 0.12) 0%, rgba(110, 198, 200, 0.04) 100%);
    border: 1px solid rgba(110, 198, 200, 0.4);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--brand-teal-deep);
    animation: bdj-bulk-slide-b-oic1eygpda 0.15s ease-out;
}

@keyframes bdj-bulk-slide-b-oic1eygpda {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bdj-bulk-banner > .material-symbols-rounded[b-oic1eygpda] {
    color: var(--brand-teal-dark);
    font-size: 18px;
}

.bdj-bulk-count[b-oic1eygpda] { flex: 1; }
.bdj-bulk-count strong[b-oic1eygpda] { color: var(--text-primary); }

.bdj-bulk-actions[b-oic1eygpda] {
    display: flex;
    gap: 6px;
}

.bdj-bulk-btn[b-oic1eygpda] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.bdj-bulk-btn:hover[b-oic1eygpda] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.bdj-bulk-btn.ghost[b-oic1eygpda] {
    background: transparent;
    border-color: transparent;
}

.bdj-bulk-btn .material-symbols-rounded[b-oic1eygpda] { font-size: 13px !important; }

/* ── Chip "Acusado" ───────────────────────────────────────────────── */
.bdj-notif-acusada[b-oic1eygpda] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(29, 158, 117, 0.12);
    color: var(--success);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bdj-notif-acusada .material-symbols-rounded[b-oic1eygpda] {
    font-size: 13px !important;
    font-variation-settings: 'FILL' 1 !important;
}

/* ── Toggles del aside (cursor pointer + hover) ───────────────────── */
.bdj-toggle[b-oic1eygpda] {
    cursor: pointer;
    user-select: none;
}

.bdj-toggle:hover[b-oic1eygpda] {
    background: var(--bg-cream);
}
/* /Pages/Comunicacion/Chat.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Chat — pantalla principal del módulo Comunicación.
   Tokens propios scoped a .chat-page (no contaminan v2).
   ──────────────────────────────────────────────────────────────────── */

.chat-page[b-g645okq53e] {
    --teal:          #6DC7D0;
    --teal-dark:     #4BA8AA;
    --teal-darker:   #2E7F82;
    --teal-soft:     #E8F4F8;
    --main-bg:       #FFFFFF;
    --main-subtle:   #FAFBFC;
    --hover:         #F5F8F9;
    --border:        #EAEEF0;
    --border-strong: #D8DEE1;
    --text:          #1A2B2D;
    --text-muted:    #5A6B6E;
    --text-dim:      #8A9699;
    --sem-green:     #1D9E75;
    --sem-yellow:    #BA7517;
    --sem-red:       #A32D2D;
    --official-border: #B8860B;
    --official-bg:     #FDF8EC;

    display: grid;
    grid-template-columns: 276px 1fr;
    height: 100vh;
    overflow: hidden;
    background: var(--main-bg);
    font-family: var(--font-sans);
    color: var(--text);
}

.chat-main[b-g645okq53e] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--main-bg);
    overflow: hidden;
    min-width: 0;
}

/* === Channel header === */
.chh[b-g645okq53e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--main-bg);
    flex-shrink: 0;
    gap: 16px;
}

.chh-left[b-g645okq53e] { display: flex; align-items: center; gap: 14px; min-width: 0; }

.chh-title[b-g645okq53e] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
}

.chh-hash[b-g645okq53e] {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 17px;
}

.chh-name[b-g645okq53e] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chh-desc[b-g645okq53e] {
    font-size: 12.5px;
    color: var(--text-muted);
    padding-left: 14px;
    border-left: 1px solid var(--border);
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chh-right[b-g645okq53e] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chh-btn[b-g645okq53e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.12s;
    background: transparent;
    border: none;
    font-family: inherit;
}

.chh-btn:hover[b-g645okq53e] { background: var(--hover); color: var(--text); }
.chh-btn .material-icons[b-g645okq53e] { font-size: 17px; }

.chh-members[b-g645okq53e] {
    display: flex;
    align-items: center;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    border: 1px solid var(--border);
    cursor: pointer;
    gap: 6px;
    transition: background 0.12s;
    background: var(--main-bg);
    font-family: inherit;
}

.chh-members:hover[b-g645okq53e] { background: var(--hover); }

.chh-avsm[b-g645okq53e] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8FA8AB, #5B7A7D);
    border: 2px solid #FFFFFF;
    margin-left: -8px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
}
.chh-avsm:first-child[b-g645okq53e] { margin-left: 0; }
.chh-avsm.c1[b-g645okq53e] { background: linear-gradient(135deg, #C4826C, #965C44); }
.chh-avsm.c2[b-g645okq53e] { background: linear-gradient(135deg, #6C91C4, #445E96); }
.chh-avsm.c3[b-g645okq53e] { background: linear-gradient(135deg, #8BC48B, #4F8A4F); }

.chh-members-count[b-g645okq53e] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

/* === Pinned banner === */
.chp[b-g645okq53e] {
    background: linear-gradient(90deg, rgba(109, 199, 208, 0.08), rgba(109, 199, 208, 0.02));
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.chp:hover[b-g645okq53e] {
    background: linear-gradient(90deg, rgba(109, 199, 208, 0.15), rgba(109, 199, 208, 0.04));
}

.chp .material-icons[b-g645okq53e] { font-size: 16px; color: var(--teal-dark); }

.chp-label[b-g645okq53e] {
    font-weight: 700;
    color: var(--teal-darker);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chp-preview[b-g645okq53e] {
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chp-count[b-g645okq53e] {
    color: var(--text-muted);
    font-weight: 600;
}

/* === Messages === */
.chm[b-g645okq53e] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 20px;
    background: var(--main-bg);
}

.chm[b-g645okq53e]::-webkit-scrollbar { width: 10px; }
.chm[b-g645okq53e]::-webkit-scrollbar-track { background: transparent; }
.chm[b-g645okq53e]::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
}

.chm-day[b-g645okq53e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px 10px;
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, var(--main-bg) 70%, rgba(255, 255, 255, 0));
    z-index: 1;
}

.chm-day[b-g645okq53e]::before, .chm-day[b-g645okq53e]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.chm-day-label[b-g645okq53e] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 3px 10px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 12px;
    letter-spacing: 0.04em;
}

/* === Mensaje === */
.chm-msg[b-g645okq53e] {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0;
    padding: 6px 24px;
    position: relative;
    transition: background 0.08s;
}

.chm-msg:hover[b-g645okq53e] { background: var(--hover); }
.chm-msg:hover .chm-actions[b-g645okq53e] { opacity: 1; }
.chm-msg.is-new-block[b-g645okq53e] { padding-top: 12px; }

.chm-avatar[b-g645okq53e] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8FA8AB, #5B7A7D);
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}

.chm-avatar.c1[b-g645okq53e] { background: linear-gradient(135deg, #C4826C, #965C44); }
.chm-avatar.c2[b-g645okq53e] { background: linear-gradient(135deg, #6C91C4, #445E96); }
.chm-avatar.c3[b-g645okq53e] { background: linear-gradient(135deg, #8BC48B, #4F8A4F); }
.chm-avatar.c4[b-g645okq53e] { background: linear-gradient(135deg, #B89B70, #826D47); }

.chm-avatar.official[b-g645okq53e] {
    background: linear-gradient(135deg, #2E5A8F, #1A3D66);
    position: relative;
}

.chm-avatar.official[b-g645okq53e]::after {
    content: "verified";
    font-family: "Material Icons";
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 14px;
    color: var(--teal-dark);
    background: #FFFFFF;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
}

.chm-time-inline[b-g645okq53e] {
    font-size: 10.5px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-align: center;
    padding-top: 4px;
    visibility: hidden;
}

.chm-msg:hover .chm-time-inline[b-g645okq53e] { visibility: visible; }

.chm-body[b-g645okq53e] { min-width: 0; padding-left: 4px; }

.chm-header[b-g645okq53e] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.chm-author[b-g645okq53e] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.chm-author.directivo[b-g645okq53e] { color: #1A3D66; }

.chm-role-tag[b-g645okq53e] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}

.chm-role-tag.directivo[b-g645okq53e] {
    background: #E6EEF7;
    color: #1A3D66;
}

.chm-role-tag.docente[b-g645okq53e] {
    background: var(--teal-soft);
    color: var(--teal-darker);
}

.chm-time[b-g645okq53e] {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-weight: 500;
}

.chm-content[b-g645okq53e] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    word-wrap: break-word;
}

.chm-content p[b-g645okq53e] { margin: 0; }
.chm-content p + p[b-g645okq53e] { margin-top: 6px; }

/* === Mentions inline === */
.chm-mention[b-g645okq53e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--teal-soft);
    color: var(--teal-darker);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid rgba(75, 168, 170, 0.2);
}

.chm-mention:hover[b-g645okq53e] { background: #D4EBF0; }

.chm-mention .material-icons[b-g645okq53e] { font-size: 13px; opacity: 0.75; }

.chm-mention-alumno[b-g645okq53e] {
    background: #FFF2E4;
    color: #7A4518;
    border-color: rgba(186, 117, 23, 0.25);
}

.chm-mention-alumno:hover[b-g645okq53e] { background: #FEE6CE; }

.chm-mention-grupo[b-g645okq53e] {
    background: #E7F1E7;
    color: #2D5F2D;
    border-color: rgba(29, 158, 117, 0.22);
}

.chm-mention-grado[b-g645okq53e] {
    background: #EAE8F4;
    color: #443B7A;
    border-color: rgba(68, 59, 122, 0.2);
}

.chm-mention-meta[b-g645okq53e] {
    display: inline-block;
    font-size: 11px;
    color: var(--text-dim);
    margin-left: 4px;
    font-style: italic;
}

.chm-inline-grupo[b-g645okq53e] {
    font-size: 12px;
    color: var(--text-muted);
}

/* === Reactions === */
.chm-reactions[b-g645okq53e] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.chm-reaction[b-g645okq53e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--main-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}

.chm-reaction:hover[b-g645okq53e] {
    border-color: var(--teal-dark);
    background: var(--teal-soft);
}

.chm-reaction.mine[b-g645okq53e] {
    background: var(--teal-soft);
    border-color: var(--teal-dark);
    color: var(--teal-darker);
}

.chm-reaction .material-icons[b-g645okq53e] { font-size: 14px; color: inherit; }

.chm-reaction-add[b-g645okq53e] {
    width: 26px;
    padding: 2px 0;
    justify-content: center;
    color: var(--text-muted);
}

/* === Thread indicator === */
.chm-thread[b-g645okq53e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    max-width: fit-content;
    background: transparent;
    border: none;
    font-family: inherit;
}

.chm-thread:hover[b-g645okq53e] {
    background: var(--hover);
    outline: 1px solid var(--border);
}

.chm-thread-avatars[b-g645okq53e] { display: flex; }

.chm-thread-av[b-g645okq53e] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    margin-left: -5px;
    border: 2px solid #FFFFFF;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, #8FA8AB, #5B7A7D);
}

.chm-thread-av:first-child[b-g645okq53e] { margin-left: 0; }
.chm-thread-av.c1[b-g645okq53e] { background: linear-gradient(135deg, #C4826C, #965C44); }
.chm-thread-av.c2[b-g645okq53e] { background: linear-gradient(135deg, #6C91C4, #445E96); }
.chm-thread-av.c3[b-g645okq53e] { background: linear-gradient(135deg, #8BC48B, #4F8A4F); }
.chm-thread-av.c4[b-g645okq53e] { background: linear-gradient(135deg, #B89B70, #826D47); }

.chm-thread-count[b-g645okq53e] {
    color: var(--teal-darker);
    font-weight: 700;
    font-size: 12.5px;
}

.chm-thread-last[b-g645okq53e] {
    color: var(--text-muted);
    font-size: 12px;
}

.chm-thread .material-icons[b-g645okq53e] {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: auto;
}

/* === Attachment === */
.chm-attach[b-g645okq53e] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--main-subtle);
    max-width: 380px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.chm-attach:hover[b-g645okq53e] { border-color: var(--teal-dark); }

.chm-attach-icon[b-g645okq53e] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    background: #1D7A46;
    flex-shrink: 0;
}

.chm-attach-icon.pdf[b-g645okq53e]  { background: #B93B3B; }
.chm-attach-icon.xlsx[b-g645okq53e] { background: #1D7A46; }

.chm-attach-icon .material-icons[b-g645okq53e] { font-size: 18px; color: #FFFFFF; }

.chm-attach-info[b-g645okq53e] { flex: 1; min-width: 0; }

.chm-attach-name[b-g645okq53e] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chm-attach-meta[b-g645okq53e] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* === Official document === */
.chm-official[b-g645okq53e] {
    margin-top: 10px;
    border: 1.5px solid var(--official-border);
    border-radius: 12px;
    background: var(--official-bg);
    overflow: hidden;
    max-width: 560px;
}

.chm-official-header[b-g645okq53e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(to right, #F0DDA8, #E9D28F);
    border-bottom: 1.5px solid var(--official-border);
}

.chm-official-header .material-icons[b-g645okq53e] { font-size: 18px; color: #7A5A0E; }

.chm-official-type[b-g645okq53e] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #7A5A0E;
    letter-spacing: 0.08em;
}

.chm-official-ref[b-g645okq53e] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #7A5A0E;
    margin-left: auto;
}

.chm-official-body[b-g645okq53e] { padding: 14px; }

.chm-official-subject[b-g645okq53e] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.2;
    font-style: italic;
}

.chm-official-text[b-g645okq53e] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
}

.chm-official-text strong[b-g645okq53e] { font-weight: 700; }

.chm-official-auto[b-g645okq53e] {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chm-official-auto .material-icons[b-g645okq53e] { font-size: 16px; color: var(--teal-dark); }
.chm-official-auto strong[b-g645okq53e] { color: var(--text); font-weight: 700; }

.chm-official-actions[b-g645okq53e] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(184, 134, 11, 0.25);
    background: rgba(255, 255, 255, 0.4);
}

.chm-official-btn[b-g645okq53e] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--official-border);
    background: #FFFFFF;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #7A5A0E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

.chm-official-btn:hover[b-g645okq53e] { background: #FFF8E8; }

.chm-official-btn.primary[b-g645okq53e] {
    background: #7A5A0E;
    color: #FFFFFF;
    border-color: #7A5A0E;
}

.chm-official-btn.primary:hover[b-g645okq53e] { background: #9A7615; }
.chm-official-btn .material-icons[b-g645okq53e] { font-size: 15px; }

/* === Hover actions === */
.chm-actions[b-g645okq53e] {
    position: absolute;
    top: -14px;
    right: 24px;
    display: flex;
    gap: 2px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transition: opacity 0.15s;
}

.chm-act[b-g645okq53e] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-muted);
    transition: background 0.12s;
    background: transparent;
    border: none;
}

.chm-act:hover[b-g645okq53e] { background: var(--hover); color: var(--text); }
.chm-act .material-icons[b-g645okq53e] { font-size: 17px; }

/* === Typing indicator === */
.chm-typing[b-g645okq53e] {
    padding: 8px 24px 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
}

.chm-typing-dots[b-g645okq53e] {
    display: inline-flex;
    gap: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

.chm-typing-dots span[b-g645okq53e] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal-dark);
    animation: chm-typing-b-g645okq53e 1.2s infinite;
}

.chm-typing-dots span:nth-child(2)[b-g645okq53e] { animation-delay: 0.15s; }
.chm-typing-dots span:nth-child(3)[b-g645okq53e] { animation-delay: 0.3s; }

@keyframes chm-typing-b-g645okq53e {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* === Responsive === */
@media (max-width: 900px) {
    .chat-page[b-g645okq53e] { grid-template-columns: 1fr; }
    .chh-desc[b-g645okq53e] { display: none; }
    .chh-members[b-g645okq53e] { display: none; }
}

/* ── Empty / Loading states ─────────────────────────────────────── */
.chat-empty[b-g645okq53e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    gap: 14px;
    color: var(--text-muted);
    flex: 1;
}

.chat-empty-inline[b-g645okq53e] {
    flex: 0;
    padding: 60px 24px;
}

.chat-empty .material-symbols-rounded[b-g645okq53e] {
    font-size: 48px !important;
    color: var(--border-med);
}

.chat-empty h3[b-g645okq53e] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.chat-empty p[b-g645okq53e] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}

.chat-spin[b-g645okq53e] {
    color: var(--brand-teal);
    animation: chat-rotate-b-g645okq53e 1s linear infinite;
}

@keyframes chat-rotate-b-g645okq53e { to { transform: rotate(360deg); } }

/* ── Reactions picker ──────────────────────────────────────────── */
.chm-emoji-picker[b-g645okq53e] {
    display: inline-flex;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    margin-left: 4px;
    align-items: center;
}

.chm-emoji-pick[b-g645okq53e] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    padding: 0;
}

.chm-emoji-pick:hover[b-g645okq53e] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
    transform: scale(1.15);
}

.chm-emoji-pick .material-icons[b-g645okq53e] { font-size: 18px; }

/* ── Thread panel inline ───────────────────────────────────────── */
.chm-thread-panel[b-g645okq53e] {
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-cream);
    border-left: 3px solid var(--brand-teal);
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chm-thread-empty[b-g645okq53e] {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

.chm-reply[b-g645okq53e] {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: flex-start;
}

.chm-reply .chm-avatar[b-g645okq53e] {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.chm-reply-composer[b-g645okq53e] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.chm-reply-input[b-g645okq53e] {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.12s ease;
    background: var(--bg-panel);
}

.chm-reply-input:focus[b-g645okq53e] { border-color: var(--brand-teal); }

.chm-reply-send[b-g645okq53e] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: var(--brand-teal);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chm-reply-send:hover:not(:disabled)[b-g645okq53e] { background: var(--brand-teal-dark); }
.chm-reply-send:disabled[b-g645okq53e] { opacity: 0.5; cursor: not-allowed; }
.chm-reply-send .material-icons[b-g645okq53e] { font-size: 16px; }

/* ── Thread indicator más prominente cuando es clickeable ──────── */
.chm-thread[b-g645okq53e] {
    cursor: pointer;
    transition: background 0.12s ease;
}

.chm-thread:hover[b-g645okq53e] { background: var(--bg-light-teal); }
/* /Pages/Comunicacion/CrearProyectoCasos.razor.rz.scp.css */
.cpc-page[b-feass0aqlo] {
    background:
        radial-gradient(circle at 20% 20%, rgba(110, 198, 200, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(217, 119, 6, 0.04) 0%, transparent 50%),
        var(--bg);
    min-height: 100%;
    padding: 32px 24px;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ════ Header ════ */
.cpc-header[b-feass0aqlo] {
    max-width: 1380px;
    margin: 0 auto 28px;
    text-align: center;
}

.cpc-title[b-feass0aqlo] {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.7px;
    margin: 0 0 6px;
}

.cpc-sub[b-feass0aqlo] {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ════ Cases grid ════ */
.cpc-cases[b-feass0aqlo] {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.cpc-case[b-feass0aqlo] {
    background: var(--bg-panel);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
}

.cpc-case-header[b-feass0aqlo] {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpc-case-num[b-feass0aqlo] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}

.cpc-case-title-block[b-feass0aqlo] { flex: 1; min-width: 0; }

.cpc-case-actor[b-feass0aqlo] {
    font-size: 11px;
    color: var(--brand-teal-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 1px;
}

.cpc-case-title[b-feass0aqlo] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.cpc-actor-avatar[b-feass0aqlo] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.cpc-actor-avatar.dir[b-feass0aqlo] { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.cpc-actor-avatar.doc[b-feass0aqlo] { background: linear-gradient(135deg, #F4B860, #D97706); }

.cpc-modal-area[b-feass0aqlo] {
    padding: 24px;
    background: linear-gradient(180deg, #F8F5EE 0%, var(--bg-panel) 60%);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ════ Footnote ════ */
.cpc-footnote[b-feass0aqlo] {
    margin: 18px auto 0;
    max-width: 1380px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    backdrop-filter: blur(8px);
}

.cpc-footnote-icon[b-feass0aqlo] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cpc-footnote-icon .material-symbols-rounded[b-feass0aqlo] { font-size: 18px !important; }

.cpc-footnote-text[b-feass0aqlo] {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    flex: 1;
}

.cpc-footnote-text strong[b-feass0aqlo] { color: var(--text-primary); }

/* ════ Responsive ════ */
@media (max-width: 1100px) {
    .cpc-cases[b-feass0aqlo] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .cpc-page[b-feass0aqlo] { padding: 20px 16px; }
    .cpc-title[b-feass0aqlo] { font-size: 24px; }
    .cpc-modal-area[b-feass0aqlo] { padding: 14px; }
}
/* /Pages/Comunicacion/Proyectos.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Proyectos — replica de `micomunidad-proyectos-mockup.html`
   Tokens locales scoped a .prj-page (incluye t-mural/mejora/admin extras)
   ──────────────────────────────────────────────────────────────────── */

.prj-page[b-2r1eiyol6r] {
    --bg-canvas: #F4F0E6;
    --t-nem-bg:    #FEF3C7;
    --t-nem-soft:  #FDE68A;
    --t-pmc-bg:    #EDE9FE;
    --t-pmc-soft:  #DDD6FE;
    --t-evento-bg: #FCE7F3;
    --t-evento-soft:#FBCFE8;
    --t-concurso-bg:#FEE2E2;
    --t-concurso-soft:#FECACA;
    --t-comite-bg: #DBEAFE;
    --t-comite-soft:#BFDBFE;
    --t-mural:     #7E22CE;
    --t-mural-bg:  #F3E8FF;
    --t-mejora:    #B45309;
    --t-mejora-bg: #FEF3C7;
    --t-admin:     #0E7490;
    --t-admin-bg:  #CFFAFE;

    display: grid;
    grid-template-columns: 300px 1fr;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-canvas);
}

.prj-main[b-2r1eiyol6r] {
    overflow-y: auto;
    background: var(--bg-canvas);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(110, 198, 200, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(217, 119, 6, 0.03) 0%, transparent 50%);
    scrollbar-width: thin;
    scrollbar-color: #C7C0B1 transparent;
}

.prj-main[b-2r1eiyol6r]::-webkit-scrollbar { width: 10px; }
.prj-main[b-2r1eiyol6r]::-webkit-scrollbar-thumb {
    background: #C7C0B1;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ════ Topbar ═══════════════════════════════════════════════════════ */

.prj-topbar[b-2r1eiyol6r] {
    padding: 14px 28px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.prj-breadcrumb[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    flex-wrap: wrap;
}

.prj-breadcrumb .material-symbols-rounded[b-2r1eiyol6r] { font-size: 15px !important; }
.prj-breadcrumb a[b-2r1eiyol6r] { color: var(--text-secondary); text-decoration: none; }
.prj-breadcrumb a:hover[b-2r1eiyol6r] { color: var(--brand-teal-deep); }
.prj-sep[b-2r1eiyol6r] { color: var(--text-muted); }
.prj-current[b-2r1eiyol6r] { color: var(--text-primary); font-weight: 600; }

.prj-topbar-actions[b-2r1eiyol6r] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.prj-icon-btn[b-2r1eiyol6r] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
    font-family: inherit;
}

.prj-icon-btn:hover[b-2r1eiyol6r] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

.prj-icon-btn .material-symbols-rounded[b-2r1eiyol6r] { font-size: 20px; }

.prj-btn-secondary[b-2r1eiyol6r] {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--border-med);
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: inherit;
}

.prj-btn-secondary:hover[b-2r1eiyol6r] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.prj-btn-secondary .material-symbols-rounded[b-2r1eiyol6r] { font-size: 16px !important; }

.prj-btn-primary[b-2r1eiyol6r] {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    border: none;
    background: var(--brand-teal-primary);
    color: #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3);
}

.prj-btn-primary:hover[b-2r1eiyol6r] {
    background: var(--brand-teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(75, 168, 170, 0.4);
}

.prj-btn-primary .material-symbols-rounded[b-2r1eiyol6r] { font-size: 16px !important; }

/* ════ HERO ═════════════════════════════════════════════════════════ */

.prj-hero[b-2r1eiyol6r] {
    margin: 24px 28px 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
}

.prj-hero-banner[b-2r1eiyol6r] {
    height: 120px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 40%, #FCD34D 80%, #F59E0B 100%);
    position: relative;
    overflow: hidden;
}

.prj-hero-banner[b-2r1eiyol6r]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
        radial-gradient(circle at 45% 65%, rgba(255, 255, 255, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
        radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.3) 1px, transparent 2px),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.4) 1px, transparent 2px);
    background-size: 60px 60px, 80px 80px, 100px 100px, 70px 70px, 90px 90px;
}

.prj-hero-banner[b-2r1eiyol6r]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, rgba(217, 119, 6, 0.15) 100%);
}

.prj-hero-type-chip[b-2r1eiyol6r] {
    position: absolute;
    top: 14px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 5px 11px 5px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--t-nem);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.prj-hero-type-chip .material-symbols-rounded[b-2r1eiyol6r] { font-size: 14px !important; }

.prj-hero-status-chip[b-2r1eiyol6r] {
    position: absolute;
    top: 14px;
    right: 20px;
    background: rgba(29, 158, 117, 0.95);
    padding: 5px 11px 5px 9px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.prj-hero-status-chip[b-2r1eiyol6r]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A7F3D0;
    box-shadow: 0 0 0 2px rgba(167, 243, 208, 0.4);
    animation: prj-pulse-b-2r1eiyol6r 2s infinite;
}

@keyframes prj-pulse-b-2r1eiyol6r {
    0%, 100% { box-shadow: 0 0 0 2px rgba(167, 243, 208, 0.4); }
    50%      { box-shadow: 0 0 0 5px rgba(167, 243, 208, 0.2); }
}

.prj-hero-body[b-2r1eiyol6r] { padding: 22px 28px 24px; }

.prj-hero-title[b-2r1eiyol6r] {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.6px;
    margin-bottom: 4px;
}

.prj-hero-subtitle[b-2r1eiyol6r] {
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 18px;
}

.prj-hero-meta-grid[b-2r1eiyol6r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.prj-hero-meta[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #FBFAF6;
}

.prj-hero-meta-icon[b-2r1eiyol6r] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
}

.prj-hero-meta-icon.nem[b-2r1eiyol6r] { background: linear-gradient(135deg, #F59E0B, #D97706); }
.prj-hero-meta-icon.cal[b-2r1eiyol6r] { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.prj-hero-meta-icon.peo[b-2r1eiyol6r] { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.prj-hero-meta-icon.stu[b-2r1eiyol6r] { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }

.prj-hero-meta-icon .material-symbols-rounded[b-2r1eiyol6r] { font-size: 18px !important; }

.prj-hero-meta-text[b-2r1eiyol6r] { min-width: 0; }

.prj-hero-meta-label[b-2r1eiyol6r] {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.prj-hero-meta-value[b-2r1eiyol6r] {
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 600;
}

/* Phases */
.prj-phases[b-2r1eiyol6r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.prj-phase[b-2r1eiyol6r] {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border-soft);
    background: var(--bg-panel);
    position: relative;
    transition: all 0.15s;
}

.prj-phase-num[b-2r1eiyol6r] {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.prj-phase-title[b-2r1eiyol6r] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.prj-phase-dates[b-2r1eiyol6r] {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.prj-phase-bar[b-2r1eiyol6r] {
    height: 4px;
    background: var(--border-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.prj-phase-fill[b-2r1eiyol6r] {
    height: 100%;
    border-radius: 2px;
    background: var(--border-med);
}

.prj-phase-pct[b-2r1eiyol6r] {
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prj-phase.done[b-2r1eiyol6r] {
    border-color: rgba(29, 158, 117, 0.3);
    background: linear-gradient(135deg, rgba(29, 158, 117, 0.06) 0%, var(--bg-panel) 60%);
}

.prj-phase.done .prj-phase-num[b-2r1eiyol6r],
.prj-phase.done .prj-phase-pct[b-2r1eiyol6r] { color: var(--success); }

.prj-phase.done .prj-phase-fill[b-2r1eiyol6r] { background: var(--success); }

.prj-phase.active[b-2r1eiyol6r] {
    border-color: var(--t-nem);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.06) 0%, var(--bg-panel) 60%);
}

.prj-phase.active .prj-phase-num[b-2r1eiyol6r],
.prj-phase.active .prj-phase-pct[b-2r1eiyol6r] { color: var(--t-nem); }

.prj-phase.active .prj-phase-fill[b-2r1eiyol6r] { background: var(--t-nem); }

.prj-phase-check[b-2r1eiyol6r] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--success);
    font-size: 18px !important;
}

.prj-phase-current[b-2r1eiyol6r] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--t-nem);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
    animation: prj-pulse-orange-b-2r1eiyol6r 2s infinite;
}

@keyframes prj-pulse-orange-b-2r1eiyol6r {
    0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.08); }
}

/* ════ Learning banner ══════════════════════════════════════════════ */

.prj-learning[b-2r1eiyol6r] {
    margin: 18px 28px 0;
    padding: 14px 18px;
    background: linear-gradient(90deg, var(--t-nem-bg) 0%, #FFFBEB 100%);
    border: 1px solid var(--t-nem-soft);
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.prj-learning-icon[b-2r1eiyol6r] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--t-nem), #92400E);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prj-learning-icon .material-symbols-rounded[b-2r1eiyol6r] { font-size: 22px !important; }

.prj-learning-content[b-2r1eiyol6r] { flex: 1; min-width: 0; }

.prj-learning-label[b-2r1eiyol6r] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--t-nem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.prj-learning-title[b-2r1eiyol6r] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.4;
}

.prj-learning-fields[b-2r1eiyol6r] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.prj-field-chip[b-2r1eiyol6r] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--t-nem-soft);
    color: #92400E;
}

/* ════ TABS ════════════════════════════════════════════════════════ */

.prj-tabs[b-2r1eiyol6r] {
    margin: 20px 28px 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    gap: 2px;
    padding: 0 8px;
    flex-wrap: wrap;
}

.prj-tab[b-2r1eiyol6r] {
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.15s;
    margin-bottom: -1px;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}

.prj-tab:hover[b-2r1eiyol6r] { color: var(--text-primary); }

.prj-tab.active[b-2r1eiyol6r] {
    color: var(--brand-teal-deep);
    border-bottom-color: var(--brand-teal);
}

.prj-tab .material-symbols-rounded[b-2r1eiyol6r] { font-size: 17px !important; }

.prj-tab-count[b-2r1eiyol6r] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    background: #F0ECE2;
    color: var(--text-secondary);
    border-radius: 10px;
}

.prj-tab.active .prj-tab-count[b-2r1eiyol6r] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

/* ---- TAB CANAL ------------------------------------------------- */

.prj-tab-panel-canal[b-2r1eiyol6r] {
    min-height: 580px;
    display: flex;
    flex-direction: column;
}

/* ---- KANBAN ---------------------------------------------------- */

.prj-kanban-container[b-2r1eiyol6r] {
    padding: 20px 28px 40px;
}

.prj-kanban-header[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.prj-kh-icon[b-2r1eiyol6r] {
    color: var(--brand-teal-deep);
    font-size: 22px !important;
}

.prj-kh-title[b-2r1eiyol6r] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.prj-kh-sub[b-2r1eiyol6r] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-left: 4px;
}

.prj-view-toggle[b-2r1eiyol6r] {
    margin-left: auto;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
}

.prj-view-btn[b-2r1eiyol6r] {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.prj-view-btn.active[b-2r1eiyol6r] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

.prj-view-btn .material-symbols-rounded[b-2r1eiyol6r] { font-size: 14px !important; }

.prj-kanban[b-2r1eiyol6r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.prj-column[b-2r1eiyol6r] {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.prj-column.active-col[b-2r1eiyol6r] {
    border: 1.5px solid var(--t-nem-soft);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.04);
}

.prj-col-header[b-2r1eiyol6r] {
    padding: 12px 14px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-panel);
}

.prj-column.active-col .prj-col-header[b-2r1eiyol6r] {
    background: linear-gradient(90deg, var(--t-nem-bg) 0%, var(--bg-panel) 100%);
}

.prj-col-marker[b-2r1eiyol6r] {
    width: 8px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
}

.prj-col-name[b-2r1eiyol6r] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.prj-col-count[b-2r1eiyol6r] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 2px 7px;
    background: #F0ECE2;
    border-radius: 10px;
}

.prj-col-count.active[b-2r1eiyol6r] {
    background: var(--t-nem-soft);
    color: var(--t-nem);
}

.prj-col-add[b-2r1eiyol6r] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px dashed var(--border-med);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: all 0.15s;
}

.prj-col-add:hover[b-2r1eiyol6r] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.prj-col-add .material-symbols-rounded[b-2r1eiyol6r] { font-size: 14px !important; }

.prj-col-body[b-2r1eiyol6r] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.prj-col-body[b-2r1eiyol6r]::-webkit-scrollbar { width: 6px; }
.prj-col-body[b-2r1eiyol6r]::-webkit-scrollbar-thumb {
    background: var(--border-med);
    border-radius: 3px;
}

/* ════ Task card ════════════════════════════════════════════════════ */

.prj-task[b-2r1eiyol6r] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: grab;
    transition: all 0.15s;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.prj-task:hover[b-2r1eiyol6r] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-med);
}

.prj-task.done[b-2r1eiyol6r] {
    background: #F8FAF6;
    opacity: 0.82;
}

.prj-task.done .prj-task-title[b-2r1eiyol6r] {
    text-decoration: line-through;
    text-decoration-color: rgba(29, 158, 117, 0.5);
    color: var(--text-secondary);
}

.prj-task-tags[b-2r1eiyol6r] {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.prj-tag[b-2r1eiyol6r] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.prj-tag .material-symbols-rounded[b-2r1eiyol6r] {
    font-size: 11px !important;
    font-variation-settings: "FILL" 1 !important;
}

.prj-tag.mate[b-2r1eiyol6r] { background: var(--bg-light-teal); color: var(--brand-teal-deep); }
.prj-tag.esp[b-2r1eiyol6r]  { background: #FCE7F3; color: #9D174D; }
.prj-tag.hist[b-2r1eiyol6r] { background: #FEF3C7; color: #92400E; }
.prj-tag.fcye[b-2r1eiyol6r] { background: #D1FAE5; color: #065F46; }
.prj-tag.nat[b-2r1eiyol6r]  { background: #DBEAFE; color: #1E40AF; }

.prj-priority[b-2r1eiyol6r] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.prj-priority.high[b-2r1eiyol6r] { background: #FEE2E2; color: #991B1B; }
.prj-priority.med[b-2r1eiyol6r]  { background: #FEF3C7; color: #92400E; }

.prj-task-title[b-2r1eiyol6r] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 8px;
}

.prj-task-desc[b-2r1eiyol6r] {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.prj-sm-mention[b-2r1eiyol6r] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 2px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: baseline;
    margin: 0 1px;
}

.prj-sm-mention .material-symbols-rounded[b-2r1eiyol6r] {
    font-size: 11px !important;
    font-variation-settings: "FILL" 1 !important;
}

.prj-sm-mention.grupo[b-2r1eiyol6r]  { background: rgba(110, 198, 200, 0.15); color: var(--brand-teal-deep); }
.prj-sm-mention.alumno[b-2r1eiyol6r] { background: rgba(186, 117, 23, 0.14);  color: #8B5A10; }
.prj-sm-mention.user[b-2r1eiyol6r]   { background: rgba(245, 158, 11, 0.15);  color: #854D0E; }

/* Task footer */
.prj-task-footer[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px;
    color: var(--text-muted);
}

.prj-task-due[b-2r1eiyol6r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.prj-task-due.urgent[b-2r1eiyol6r]   { color: var(--danger); }
.prj-task-due.soon[b-2r1eiyol6r]     { color: var(--warning); }
.prj-task-due.ok[b-2r1eiyol6r]       { color: var(--text-secondary); }
.prj-task-due.done-due[b-2r1eiyol6r] { color: var(--success); }

.prj-task-due .material-symbols-rounded[b-2r1eiyol6r] { font-size: 13px !important; }

.prj-task-stats[b-2r1eiyol6r] {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.prj-task-stat[b-2r1eiyol6r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
}

.prj-task-stat .material-symbols-rounded[b-2r1eiyol6r] {
    font-size: 13px !important;
    color: var(--text-muted);
}

.prj-task-avatars[b-2r1eiyol6r] {
    display: flex;
    margin-left: 4px;
}

.prj-av[b-2r1eiyol6r] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-panel);
    margin-left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-sans);
}

.prj-av:first-child[b-2r1eiyol6r] { margin-left: 0; }

.prj-av.av-more[b-2r1eiyol6r] {
    background: #E5E1D8;
    color: var(--text-secondary);
    font-size: 8px;
}

/* Evidence */
.prj-task-evidence[b-2r1eiyol6r] {
    margin-top: 8px;
    display: flex;
    gap: 4px;
}

.prj-evidence-thumb[b-2r1eiyol6r] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #F0ECE2;
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.prj-evidence-thumb.img[b-2r1eiyol6r]   { background: linear-gradient(135deg, #E0E7FF, #C7D2FE); color: #4338CA; }
.prj-evidence-thumb.pdf[b-2r1eiyol6r]   { background: linear-gradient(135deg, #FEE2E2, #FECACA); color: #991B1B; }
.prj-evidence-thumb.doc[b-2r1eiyol6r]   { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E40AF; }
.prj-evidence-thumb.video[b-2r1eiyol6r] { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; }

.prj-evidence-thumb .material-symbols-rounded[b-2r1eiyol6r] { font-size: 18px !important; }

.prj-evidence-thumb.evidence-more[b-2r1eiyol6r] {
    background: transparent;
    border: 1px dashed var(--border-med);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
}

/* Linked banner */
.prj-task-linked[b-2r1eiyol6r] {
    margin-top: 6px;
    padding: 6px 8px;
    background: #FAF5FF;
    border: 1px solid #E9D5FF;
    border-radius: 6px;
    font-size: 10.5px;
    color: #6D28D9;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.prj-task-linked.teal[b-2r1eiyol6r] {
    background: rgba(110, 198, 200, 0.08);
    border-color: rgba(110, 198, 200, 0.3);
    color: var(--brand-teal-deep);
}

.prj-task-linked .material-symbols-rounded[b-2r1eiyol6r] { font-size: 12px !important; }

/* ── Bulk selection ─────────────────────────────────────────────── */

.prj-bulk-toolbar[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #EEF7F8, #E0F4F5);
    border: 1px solid rgba(109, 199, 208, 0.35);
    border-radius: 10px;
    margin-bottom: 12px;
    animation: slideDown-b-2r1eiyol6r .2s ease;
}

@keyframes slideDown-b-2r1eiyol6r {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.prj-bulk-count[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--brand-teal-deep, #3A8F91);
    white-space: nowrap;
}
.prj-bulk-count .material-symbols-rounded[b-2r1eiyol6r] { font-size: 18px; }

.prj-bulk-actions[b-2r1eiyol6r] {
    display: flex;
    gap: 6px;
    flex: 1;
}

.prj-bulk-btn[b-2r1eiyol6r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-med, #E0E0E0);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
}
.prj-bulk-btn:hover:not(:disabled)[b-2r1eiyol6r] { background: #F5F5F5; }
.prj-bulk-btn:disabled[b-2r1eiyol6r] { opacity: 0.5; cursor: not-allowed; }
.prj-bulk-btn .material-symbols-rounded[b-2r1eiyol6r] { font-size: 16px; }

.prj-bulk-btn.success[b-2r1eiyol6r] { color: #16A34A; border-color: #BBF7D0; }
.prj-bulk-btn.success:hover:not(:disabled)[b-2r1eiyol6r] { background: #F0FDF4; }

.prj-bulk-btn.primary[b-2r1eiyol6r] { color: var(--brand-teal-deep, #3A8F91); border-color: rgba(109,199,208,0.4); }
.prj-bulk-btn.primary:hover:not(:disabled)[b-2r1eiyol6r] { background: #EEF7F8; }

.prj-bulk-btn.danger[b-2r1eiyol6r] { color: #DC2626; border-color: #FECACA; }
.prj-bulk-btn.danger:hover:not(:disabled)[b-2r1eiyol6r] { background: #FEF2F2; }

.prj-bulk-btn.cancel[b-2r1eiyol6r] { color: #666; }
.prj-bulk-btn.cancel:hover:not(:disabled)[b-2r1eiyol6r] { background: #F5F5F5; }

/* Task card in selection mode */
.prj-task.selection-mode[b-2r1eiyol6r] { cursor: pointer; user-select: none; }
.prj-task.selected[b-2r1eiyol6r] {
    outline: 2px solid var(--brand-teal, #6DC7D0);
    outline-offset: -2px;
    background: rgba(109, 199, 208, 0.06);
}

.prj-task-checkbox[b-2r1eiyol6r] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #AAA;
    font-size: 18px;
    line-height: 1;
}
.prj-task-checkbox.checked[b-2r1eiyol6r] { color: var(--brand-teal, #6DC7D0); }
.prj-task-checkbox .material-symbols-rounded[b-2r1eiyol6r] { font-size: 20px; }

.prj-task.selection-mode[b-2r1eiyol6r] { position: relative; }

/* ── Bulk modals ────────────────────────────────────────────────── */

.prj-modal-overlay[b-2r1eiyol6r] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-2r1eiyol6r .15s ease;
}

@keyframes fadeIn-b-2r1eiyol6r {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.prj-modal-card[b-2r1eiyol6r] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 380px;
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.prj-modal-header[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid #F0F0F0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.prj-modal-header .material-symbols-rounded[b-2r1eiyol6r] { font-size: 20px; color: var(--brand-teal, #6DC7D0); }

.prj-modal-body[b-2r1eiyol6r] {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prj-modal-option[b-2r1eiyol6r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background .12s;
}
.prj-modal-option:hover[b-2r1eiyol6r] { background: #F5F5F5; }
.prj-modal-option .material-symbols-rounded[b-2r1eiyol6r] { font-size: 18px; color: #888; }

.prj-modal-role[b-2r1eiyol6r] {
    margin-left: auto;
    font-size: 11px;
    color: #999;
    text-transform: capitalize;
}

.prj-av-sm[b-2r1eiyol6r] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.prj-modal-footer[b-2r1eiyol6r] {
    padding: 12px 16px;
    border-top: 1px solid #F0F0F0;
    display: flex;
    justify-content: flex-end;
}

.prj-modal-btn.cancel[b-2r1eiyol6r] {
    padding: 6px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #666;
}
.prj-modal-btn.cancel:hover[b-2r1eiyol6r] { background: #F5F5F5; }

/* ════ Responsive ═══════════════════════════════════════════════════ */

@media (max-width: 1280px) {
    .prj-kanban[b-2r1eiyol6r] { grid-template-columns: repeat(2, 1fr); }
    .prj-hero-meta-grid[b-2r1eiyol6r] { grid-template-columns: repeat(2, 1fr); }
    .prj-phases[b-2r1eiyol6r] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .prj-page[b-2r1eiyol6r] { grid-template-columns: 1fr; }
    .prj-page > .ps-sidebar[b-2r1eiyol6r] { display: none; }
}

@media (max-width: 720px) {
    .prj-topbar[b-2r1eiyol6r] { padding: 12px 16px; flex-wrap: wrap; }
    .prj-hero[b-2r1eiyol6r] { margin: 16px 16px 0; }
    .prj-hero-body[b-2r1eiyol6r] { padding: 16px 18px 18px; }
    .prj-hero-title[b-2r1eiyol6r] { font-size: 24px; }
    .prj-learning[b-2r1eiyol6r] { margin: 14px 16px 0; }
    .prj-tabs[b-2r1eiyol6r] { margin: 16px 16px 0; padding: 0; overflow-x: auto; flex-wrap: nowrap; }
    .prj-kanban-container[b-2r1eiyol6r] { padding: 16px; }
    .prj-kanban[b-2r1eiyol6r] { grid-template-columns: 1fr; }
}

/* ── Loading / Empty states ─────────────────────────────────────── */
.prj-loading[b-2r1eiyol6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.prj-spin[b-2r1eiyol6r] {
    font-size: 32px !important;
    color: var(--brand-teal);
    animation: prj-rotate-b-2r1eiyol6r 1s linear infinite;
}

@keyframes prj-rotate-b-2r1eiyol6r { to { transform: rotate(360deg); } }

.prj-empty[b-2r1eiyol6r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    color: var(--text-muted);
    flex: 1;
}

.prj-empty .material-symbols-rounded[b-2r1eiyol6r] {
    font-size: 56px !important;
    color: var(--border-med);
    margin-bottom: 16px;
}

.prj-empty h3[b-2r1eiyol6r] {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}

.prj-empty p[b-2r1eiyol6r] {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

/* ── Inline editor: crear tarea desde el botón "+" de la columna ── */
.prj-task-inline[b-2r1eiyol6r] {
    background: var(--bg-panel);
    border: 1.5px dashed var(--brand-teal);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prj-task-inline-input[b-2r1eiyol6r] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.15s ease;
}

.prj-task-inline-input:focus[b-2r1eiyol6r] { border-color: var(--brand-teal); }
.prj-task-inline-input:disabled[b-2r1eiyol6r] { opacity: 0.5; cursor: not-allowed; }

.prj-task-inline-actions[b-2r1eiyol6r] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.prj-inline-btn[b-2r1eiyol6r] {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.prj-inline-btn:hover[b-2r1eiyol6r] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.prj-inline-btn.primary[b-2r1eiyol6r] {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    color: white;
}

.prj-inline-btn.primary:hover[b-2r1eiyol6r] { background: var(--brand-teal-dark); }
.prj-inline-btn:disabled[b-2r1eiyol6r] { opacity: 0.5; cursor: not-allowed; }

/* Estado completado: tachado del título */
.prj-task.done .prj-task-title[b-2r1eiyol6r] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.prj-task-title[b-2r1eiyol6r] {
    transition: color 0.12s ease;
}

.prj-task-title:hover[b-2r1eiyol6r] {
    color: var(--brand-teal-deep);
}
/* /Pages/Comunicacion/Tareas.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Tareas — estilos scoped (prefijo trs-).
   Replica `micomunidad-tareas-mockup.html`.
   Tokens vienen de wwwroot/css/tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

.trs-page[b-b03l502l42] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.trs-main[b-b03l502l42] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background:
        radial-gradient(circle at 15% 10%, rgba(110, 198, 200, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(217, 119, 6, 0.03) 0%, transparent 50%),
        var(--bg);
    display: flex;
    flex-direction: column;
}

.trs-main[b-b03l502l42]::-webkit-scrollbar { width: 10px; }
.trs-main[b-b03l502l42]::-webkit-scrollbar-thumb {
    background: #C7C0B1;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ── HEADER ─────────────────────────────────────────────────────────── */
.trs-page-header[b-b03l502l42] {
    padding: 22px 32px 0;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 4;
}

.trs-breadcrumb[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.trs-breadcrumb[b-b03l502l42]  .material-symbols-rounded { font-size: 14px !important; }

.trs-breadcrumb a[b-b03l502l42] {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.trs-breadcrumb a:hover[b-b03l502l42] { color: var(--brand-teal-deep); }

.trs-sep[b-b03l502l42] { color: var(--text-muted); }
.trs-current[b-b03l502l42] { color: var(--text-primary); font-weight: 700; }

.trs-title-row[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.trs-title-icon[b-b03l502l42] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.trs-title-icon[b-b03l502l42]  .material-symbols-rounded { font-size: 24px !important; }

.trs-title-block[b-b03l502l42] { flex: 1; min-width: 0; }

.trs-title[b-b03l502l42] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.trs-sub[b-b03l502l42] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.trs-actions[b-b03l502l42] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.trs-icon-btn[b-b03l502l42] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.trs-icon-btn:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.trs-icon-btn[b-b03l502l42]  .material-symbols-rounded { font-size: 18px !important; }

.trs-btn-primary[b-b03l502l42] {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9px;
    border: none;
    background: var(--brand-teal-primary);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3);
    transition: all 0.15s;
}

.trs-btn-primary:hover[b-b03l502l42] {
    background: var(--brand-teal-dark);
    transform: translateY(-1px);
}

.trs-btn-primary[b-b03l502l42]  .material-symbols-rounded { font-size: 16px !important; }

/* ── STATS ──────────────────────────────────────────────────────────── */
.trs-stats-row[b-b03l502l42] {
    padding: 20px 32px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.trs-stat-tile[b-b03l502l42] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.trs-stat-tile:hover[b-b03l502l42] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-teal);
}

.trs-stat-tile.danger[b-b03l502l42] {
    border-color: rgba(163, 45, 45, 0.3);
    background: linear-gradient(135deg, #FEF2F2 0%, var(--bg-panel) 60%);
}

.trs-stat-tile.danger:hover[b-b03l502l42] { border-color: var(--danger); }

.trs-stat-icon[b-b03l502l42] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.trs-stat-icon[b-b03l502l42]  .material-symbols-rounded { font-size: 20px !important; }

.trs-stat-icon.danger[b-b03l502l42]  { background: linear-gradient(135deg, #DC2626, #991B1B); }
.trs-stat-icon.warning[b-b03l502l42] { background: linear-gradient(135deg, #F59E0B, #D97706); }
.trs-stat-icon.teal[b-b03l502l42]    { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }
.trs-stat-icon.muted[b-b03l502l42]   { background: linear-gradient(135deg, #94A3B8, #64748B); }

.trs-stat-content[b-b03l502l42] { flex: 1; min-width: 0; }

.trs-stat-row[b-b03l502l42] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.trs-stat-value[b-b03l502l42] {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1;
}

.trs-stat-value.danger[b-b03l502l42] { color: var(--danger); }

.trs-stat-suffix[b-b03l502l42] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.trs-stat-label[b-b03l502l42] {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ── TOOLBAR ────────────────────────────────────────────────────────── */
.trs-toolbar[b-b03l502l42] {
    padding: 8px 32px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trs-view-toggle[b-b03l502l42] {
    display: flex;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    position: relative;
}

.trs-view-btn[b-b03l502l42] {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    border: none;
    background: transparent;
    font-family: inherit;
}

.trs-view-btn:hover[b-b03l502l42] {
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.trs-view-btn.active[b-b03l502l42] {
    background: var(--brand-teal-primary);
    color: white;
    box-shadow: 0 2px 5px rgba(110, 198, 200, 0.3);
}

.trs-view-btn[b-b03l502l42]  .material-symbols-rounded { font-size: 15px !important; }

.trs-view-saved-hint[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-panel);
    border: 1px dashed var(--border-med);
    border-radius: 12px;
}

.trs-view-saved-hint[b-b03l502l42]  .material-symbols-rounded { font-size: 11px !important; }

.trs-filters[b-b03l502l42] {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.trs-filter-chip[b-b03l502l42] {
    padding: 5px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}

.trs-filter-chip:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.trs-filter-chip:focus-visible[b-b03l502l42] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.trs-filter-chip.active[b-b03l502l42] {
    background: var(--bg-light-teal);
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.trs-filter-chip.active.priority-urgent[b-b03l502l42] {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: var(--danger);
}

.trs-filter-chip[b-b03l502l42]  .material-symbols-rounded { font-size: 13px !important; }

.trs-filter-clear[b-b03l502l42] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.trs-filter-clear:hover[b-b03l502l42] {
    border-color: var(--danger);
    color: var(--danger);
}

.trs-filter-clear[b-b03l502l42]  .material-symbols-rounded { font-size: 14px !important; }

.trs-filter-chip-count[b-b03l502l42] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    background: #F0ECE2;
    border-radius: 8px;
    color: var(--text-muted);
}

.trs-filter-chip.active .trs-filter-chip-count[b-b03l502l42] {
    background: rgba(110, 198, 200, 0.2);
    color: var(--brand-teal-deep);
}

.trs-search-input[b-b03l502l42] {
    padding: 6px 12px 6px 32px;
    font-size: 12.5px;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B9098' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
    font-family: inherit;
    outline: none;
    color: var(--text-primary);
    width: 200px;
    transition: all 0.15s;
}

.trs-search-input:focus[b-b03l502l42] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.15);
}

/* ── BULK BANNER ────────────────────────────────────────────────────── */
.trs-bulk-banner[b-b03l502l42] {
    margin: 0 32px 12px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(110, 198, 200, 0.12) 0%, rgba(110, 198, 200, 0.04) 100%);
    border: 1px solid rgba(110, 198, 200, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}

.trs-bulk-icon[b-b03l502l42] { color: var(--brand-teal-dark); }

.trs-bulk-text[b-b03l502l42] {
    flex: 1;
    font-weight: 600;
    color: var(--brand-teal-deep);
}

.trs-bulk-text strong[b-b03l502l42] { color: var(--text-primary); }

.trs-bulk-actions[b-b03l502l42] {
    display: flex;
    gap: 6px;
}

.trs-bulk-btn[b-b03l502l42] {
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.trs-bulk-btn:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
}

.trs-bulk-btn[b-b03l502l42]  .material-symbols-rounded { font-size: 13px !important; }

.trs-bulk-btn-danger[b-b03l502l42] {
    border-color: rgba(163, 45, 45, 0.3);
    color: var(--danger);
}

.trs-bulk-btn-danger:hover[b-b03l502l42] {
    border-color: var(--danger);
    color: var(--danger);
}

/* ── CONTENT ────────────────────────────────────────────────────────── */
.trs-content[b-b03l502l42] {
    padding: 0 32px 80px;
    flex: 1;
}

.trs-task-group[b-b03l502l42] { margin-bottom: 4px; }

.trs-group-header[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 10px;
    position: sticky;
    top: 130px;
    background: var(--bg);
    z-index: 2;
}

.trs-group-icon[b-b03l502l42] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.trs-group-icon[b-b03l502l42]  .material-symbols-rounded { font-size: 14px !important; }

.trs-group-icon.danger[b-b03l502l42]  { background: var(--danger); }
.trs-group-icon.warning[b-b03l502l42] { background: var(--warning); }
.trs-group-icon.teal[b-b03l502l42]    { background: var(--brand-teal-dark); }
.trs-group-icon.muted[b-b03l502l42]   { background: var(--text-muted); }

.trs-group-label[b-b03l502l42] {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.trs-group-line[b-b03l502l42] {
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.trs-group-count[b-b03l502l42] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-panel);
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

/* ── TASK ROW ───────────────────────────────────────────────────────── */
.trs-task[b-b03l502l42] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    padding: 12px 14px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 20px 22px 22px 1fr auto;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.trs-task:hover[b-b03l502l42] {
    border-color: var(--border-med);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.trs-task.selected[b-b03l502l42] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.04);
}

.trs-task.urgent[b-b03l502l42] {
    border-left: 3px solid var(--danger);
    padding-left: 11px;
}

.trs-task.completed[b-b03l502l42] { opacity: 0.6; }

.trs-task.completed .trs-task-title[b-b03l502l42] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.trs-task-select[b-b03l502l42] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border-med);
    background: var(--bg-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.trs-task-select:hover[b-b03l502l42] { border-color: var(--brand-teal); }

.trs-task-select.checked[b-b03l502l42] {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
}

.trs-task-select.checked[b-b03l502l42]  .material-symbols-rounded {
    color: white;
    font-size: 13px !important;
    font-variation-settings: 'FILL' 1, 'wght' 700 !important;
}

.trs-task-check[b-b03l502l42] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-med);
    background: var(--bg-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.trs-task-check:hover[b-b03l502l42] { border-color: var(--success); }

.trs-task-check.done[b-b03l502l42] {
    background: var(--success);
    border-color: var(--success);
}

.trs-task-check.done[b-b03l502l42]  .material-symbols-rounded {
    color: white;
    font-size: 13px !important;
    font-variation-settings: 'FILL' 1, 'wght' 700 !important;
}

.trs-task-info[b-b03l502l42] { min-width: 0; }

.trs-task-row1[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.trs-task-title[b-b03l502l42] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.trs-task-row2[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.trs-task-meta-item[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.trs-task-meta-item[b-b03l502l42]  .material-symbols-rounded { font-size: 12px !important; }

.trs-task-project[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.trs-task-project[b-b03l502l42]  .material-symbols-rounded {
    font-size: 11px !important;
    font-variation-settings: 'FILL' 1 !important;
}

.trs-task-project.nem[b-b03l502l42]      { background: rgba(217, 119, 6, 0.12);  color: var(--t-nem); }
.trs-task-project.pmc[b-b03l502l42]      { background: rgba(124, 58, 237, 0.12); color: var(--t-pmc); }
.trs-task-project.evento[b-b03l502l42]   { background: rgba(219, 39, 119, 0.12); color: var(--t-evento); }
.trs-task-project.proceso[b-b03l502l42]  { background: rgba(107, 114, 128, 0.15); color: #4B5563; }
.trs-task-project.concurso[b-b03l502l42] { background: rgba(220, 38, 38, 0.12);  color: var(--t-concurso); }
.trs-task-project.personal[b-b03l502l42] { background: rgba(245, 158, 11, 0.15); color: #854D0E; }

.trs-task-due[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.trs-task-due[b-b03l502l42]  .material-symbols-rounded { font-size: 12px !important; }

.trs-task-due.urgent[b-b03l502l42] { color: var(--danger); }
.trs-task-due.soon[b-b03l502l42]   { color: var(--warning); }
.trs-task-due.ok[b-b03l502l42]     { color: var(--text-secondary); }

.trs-task-affecting[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: rgba(110, 198, 200, 0.13);
    color: var(--brand-teal-deep);
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
}

.trs-task-affecting[b-b03l502l42]  .material-symbols-rounded { font-size: 11px !important; }

.trs-task-actions[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trs-task-avatars[b-b03l502l42] { display: flex; }

.trs-task-av[b-b03l502l42] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-panel);
    margin-left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 9.5px;
    font-weight: 700;
}

.trs-task-av:first-child[b-b03l502l42] { margin-left: 0; }

.trs-task-action-btn[b-b03l502l42] {
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--brand-teal);
    background: var(--bg-panel);
    color: var(--brand-teal-deep);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}

.trs-task-action-btn:hover[b-b03l502l42] {
    background: var(--brand-teal-primary);
    color: white;
}

.trs-task-action-btn[b-b03l502l42]  .material-symbols-rounded { font-size: 13px !important; }

.trs-task-icon-btn[b-b03l502l42] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trs-task-icon-btn:hover[b-b03l502l42] {
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

.trs-task-icon-btn[b-b03l502l42]  .material-symbols-rounded { font-size: 14px !important; }

/* ── FAB ────────────────────────────────────────────────────────────── */
.trs-fab[b-b03l502l42] {
    position: fixed;
    bottom: 28px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(110, 198, 200, 0.4);
    transition: all 0.2s;
    z-index: 10;
}

.trs-fab:hover[b-b03l502l42] {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(110, 198, 200, 0.5);
}

.trs-fab[b-b03l502l42]  .material-symbols-rounded { font-size: 26px !important; }

/* ── KANBAN PREVIEW ─────────────────────────────────────────────────── */
.trs-kanban-preview[b-b03l502l42] {
    margin: 32px 0 24px;
    padding: 22px 24px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.trs-preview-tag[b-b03l502l42] {
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #1E2126 0%, #2A2E35 100%);
    color: var(--brand-teal);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.trs-preview-tag[b-b03l502l42]  .material-symbols-rounded {
    font-size: 12px !important;
    color: var(--brand-teal);
}

.trs-preview-title[b-b03l502l42] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.trs-preview-sub[b-b03l502l42] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.trs-kanban-grid[b-b03l502l42] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.trs-kanban-col[b-b03l502l42] {
    background: rgba(244, 240, 230, 0.6);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px;
    min-height: 140px;
}

.trs-kanban-col-head[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.trs-kanban-col-marker[b-b03l502l42] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.trs-kanban-col-name[b-b03l502l42] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 1;
}

.trs-kanban-col-count[b-b03l502l42] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-radius: 8px;
}

.trs-kanban-card[b-b03l502l42] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: grab;
    font-size: 11.5px;
}

.trs-kanban-card.overdue[b-b03l502l42] { border-left: 3px solid var(--danger); }

.trs-kanban-card.completed[b-b03l502l42] { opacity: 0.6; }

.trs-kanban-card.completed .trs-kanban-card-title[b-b03l502l42] {
    text-decoration: line-through;
}

.trs-kanban-card-tags[b-b03l502l42] {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}

.trs-kanban-card-title[b-b03l502l42] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 11.5px;
    line-height: 1.3;
    margin-bottom: 5px;
}

.trs-kanban-card-foot[b-b03l502l42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted);
}

.trs-mini-tag[b-b03l502l42] {
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.trs-mini-tag.nem[b-b03l502l42]     { background: rgba(217, 119, 6, 0.12);  color: var(--t-nem); }
.trs-mini-tag.pmc[b-b03l502l42]     { background: rgba(124, 58, 237, 0.12); color: var(--t-pmc); }
.trs-mini-tag.proceso[b-b03l502l42] { background: rgba(107, 114, 128, 0.15); color: #4B5563; }
.trs-mini-tag.evento[b-b03l502l42]  { background: rgba(219, 39, 119, 0.12); color: var(--t-evento); }

/* ── Kanban D&D ─────────────────────────────────────────────── */

.trs-kanban-col.drop-target[b-b03l502l42] {
    background: rgba(20, 184, 166, 0.08);
    border-color: var(--brand-teal);
    border-style: dashed;
}

.trs-kanban-card.dragging[b-b03l502l42] {
    opacity: 0.35;
    transform: scale(0.96);
}

.trs-kanban-card:active[b-b03l502l42] {
    cursor: grabbing;
}

.trs-kanban-empty[b-b03l502l42] {
    text-align: center;
    padding: 20px 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.trs-preview-note[b-b03l502l42] {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg-cream);
    border: 1px dashed var(--border-med);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.trs-preview-note[b-b03l502l42]  .material-symbols-rounded {
    font-size: 14px !important;
    color: var(--brand-teal-deep);
    flex-shrink: 0;
    margin-top: 1px;
}

.trs-preview-note strong[b-b03l502l42] {
    color: var(--text-primary);
    font-weight: 700;
}

/* ── Loading / Empty states ─────────────────────────────────────── */
.trs-loading[b-b03l502l42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.trs-spin[b-b03l502l42] {
    font-size: 32px !important;
    color: var(--brand-teal);
    animation: trs-rotate-b-b03l502l42 1s linear infinite;
}

@keyframes trs-rotate-b-b03l502l42 { to { transform: rotate(360deg); } }

.trs-empty[b-b03l502l42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}

.trs-empty .material-symbols-rounded[b-b03l502l42] {
    font-size: 48px !important;
    color: var(--success);
    margin-bottom: 14px;
    opacity: 0.6;
}

.trs-empty h3[b-b03l502l42] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}

.trs-empty p[b-b03l502l42] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}

.trs-empty-btn[b-b03l502l42] {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-med);
    background: white;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.trs-empty-btn:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.trs-empty-btn[b-b03l502l42]  .material-symbols-rounded {
    font-size: 16px !important;
    color: inherit;
    margin: 0 !important;
    opacity: 1;
}

/* ── Pills de prioridad y meta dentro de la fila de tarea ──────────── */
.trs-task-priority[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.trs-task-priority.alta[b-b03l502l42] {
    background: #FEF3C7;
    color: #B45309;
}

.trs-task-priority.urgent[b-b03l502l42] {
    background: #FEE2E2;
    color: var(--danger);
}

.trs-task-priority[b-b03l502l42]  .material-symbols-rounded {
    font-size: 11px !important;
    font-variation-settings: 'FILL' 1 !important;
}

.trs-tag-pill[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: color-mix(in srgb, var(--tag-color) 18%, transparent);
    color: var(--tag-color);
    white-space: nowrap;
}

/* ── Twisty expand/collapse para sub-tareas ──────────────────────── */
.trs-task-twisty[b-b03l502l42] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.15s;
}

.trs-task-twisty:hover[b-b03l502l42] {
    background: var(--bg-hover);
    color: var(--text-main);
}

.trs-task-twisty[b-b03l502l42]  .material-symbols-rounded {
    font-size: 18px !important;
}

.trs-task-twisty-spacer[b-b03l502l42] {
    width: 20px;
}

.trs-subtask-counter[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    background: #EEF2FF;
    color: #4F46E5;
    cursor: pointer;
}

.trs-subtask-counter:hover[b-b03l502l42] {
    background: #E0E7FF;
}

.trs-subtask-counter[b-b03l502l42]  .material-symbols-rounded {
    font-size: 11px !important;
    font-variation-settings: 'FILL' 1 !important;
    color: var(--success);
}

/* ── Sub-tareas indentadas ──────────────────────────────────────── */
.trs-subtask-list[b-b03l502l42] {
    padding-left: 32px;
    border-left: 2px solid var(--border-soft);
    margin-left: 24px;
    margin-bottom: 4px;
}

.trs-task.trs-task-child[b-b03l502l42] {
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 3px;
    grid-template-columns: 22px 22px 1fr auto;
    gap: 10px;
    background: var(--bg-page, #FAFBFC);
    border-color: transparent;
}

.trs-task.trs-task-child:hover[b-b03l502l42] {
    border-color: var(--border-soft);
    transform: none;
    box-shadow: none;
}

.trs-task.trs-task-child .trs-task-title[b-b03l502l42] {
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Vista Calendario
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sub-toggle (Semana / Agenda / Mes) ─────────────────────────── */
.trs-cal-subtoggle[b-b03l502l42] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    width: fit-content;
    margin-bottom: 16px;
}

.trs-cal-sub-btn[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: 500 13px/1 var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
}

.trs-cal-sub-btn .material-symbols-rounded[b-b03l502l42] { font-size: 18px; }

.trs-cal-sub-btn:hover[b-b03l502l42] { background: var(--bg-hover, #f5f4f1); }

.trs-cal-sub-btn.active[b-b03l502l42] {
    background: var(--brand-teal);
    color: #fff;
    box-shadow: 0 1px 4px rgba(110, 198, 200, 0.35);
}

/* ── Week navigation ────────────────────────────────────────────── */
.trs-cal-nav[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.trs-cal-today-btn[b-b03l502l42] {
    padding: 4px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    font: 500 13px/1 var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
}

.trs-cal-today-btn:hover[b-b03l502l42] {
    background: var(--brand-teal);
    color: #fff;
    border-color: var(--brand-teal);
}

.trs-cal-range[b-b03l502l42] {
    font: 500 14px/1 var(--font-sans);
    color: var(--text-primary);
    min-width: 200px;
}

/* ── 7-column week grid ─────────────────────────────────────────── */
.trs-cal-week-grid[b-b03l502l42] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.trs-cal-day-col[b-b03l502l42] {
    background: var(--bg-card, #fff);
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

.trs-cal-day-col.trs-cal-today[b-b03l502l42] {
    background: rgba(110, 198, 200, 0.06);
}

.trs-cal-day-header[b-b03l502l42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    border-bottom: 1px solid var(--border-soft);
}

.trs-cal-day-name[b-b03l502l42] {
    font: 600 10px/1 var(--font-sans);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.trs-cal-day-num[b-b03l502l42] {
    font: 600 16px/1 var(--font-sans);
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.trs-cal-today-num[b-b03l502l42] {
    background: var(--brand-teal);
    color: #fff;
}

.trs-cal-day-body[b-b03l502l42] {
    flex: 1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    max-height: 200px;
}

.trs-cal-day-body[b-b03l502l42]::-webkit-scrollbar { width: 3px; }
.trs-cal-day-body[b-b03l502l42]::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }

.trs-cal-day-empty[b-b03l502l42] { flex: 1; }

/* ── Calendar task pill ─────────────────────────────────────────── */
.trs-cal-task[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.12s ease;
    background: var(--bg-hover, #f5f4f1);
}

.trs-cal-task:hover[b-b03l502l42] {
    background: var(--bg-skeleton, #eae7de);
}

.trs-cal-task-dot[b-b03l502l42] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.trs-cal-task-nem  .trs-cal-task-dot[b-b03l502l42],
.trs-cal-task-nem.trs-cal-agenda-dot[b-b03l502l42]  { background: var(--brand-teal); }
.trs-cal-task-pmc  .trs-cal-task-dot[b-b03l502l42],
.trs-cal-task-pmc.trs-cal-agenda-dot[b-b03l502l42]  { background: #6366F1; }
.trs-cal-task-evento .trs-cal-task-dot[b-b03l502l42],
.trs-cal-task-evento.trs-cal-agenda-dot[b-b03l502l42] { background: #EC4899; }
.trs-cal-task-proceso .trs-cal-task-dot[b-b03l502l42],
.trs-cal-task-proceso.trs-cal-agenda-dot[b-b03l502l42] { background: #F59E0B; }
.trs-cal-task-concurso .trs-cal-task-dot[b-b03l502l42],
.trs-cal-task-concurso.trs-cal-agenda-dot[b-b03l502l42] { background: #8B5CF6; }
.trs-cal-task-personal .trs-cal-task-dot[b-b03l502l42],
.trs-cal-task-personal.trs-cal-agenda-dot[b-b03l502l42] { background: var(--text-muted); }

.trs-cal-task-title[b-b03l502l42] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 500;
}

.trs-cal-task-time[b-b03l502l42] {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.trs-cal-task-badge[b-b03l502l42] {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bg-skeleton, #eae7de);
    color: var(--text-muted);
    white-space: nowrap;
}

.trs-cal-task-done .trs-cal-task-title[b-b03l502l42] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.trs-cal-task-urgent[b-b03l502l42] {
    background: rgba(239, 68, 68, 0.08);
}

.trs-cal-task-urgent .trs-cal-task-title[b-b03l502l42] {
    color: var(--danger);
}

/* ── Sin fecha section ──────────────────────────────────────────── */
.trs-cal-nofecha[b-b03l502l42] {
    margin-top: 4px;
    padding: 12px 16px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}

.trs-cal-nofecha-header[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 13px/1 var(--font-sans);
    color: var(--text-muted);
    margin-bottom: 8px;
}

.trs-cal-nofecha-header .material-symbols-rounded[b-b03l502l42] { font-size: 18px; }

.trs-cal-nofecha .trs-cal-task[b-b03l502l42] {
    margin-bottom: 4px;
}

/* ── Agenda view ────────────────────────────────────────────────── */
.trs-cal-agenda-group[b-b03l502l42] {
    margin-bottom: 16px;
}

.trs-cal-agenda-header[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font: 600 13px/1 var(--font-sans);
    margin-bottom: 6px;
}

.trs-cal-agenda-header .material-symbols-rounded[b-b03l502l42] { font-size: 18px; }

.trs-cal-agenda-danger[b-b03l502l42]  { background: rgba(239, 68, 68, 0.08); color: var(--danger); }
.trs-cal-agenda-warning[b-b03l502l42] { background: rgba(245, 158, 11, 0.08); color: var(--warning-dark, #D97706); }
.trs-cal-agenda-teal[b-b03l502l42]    { background: rgba(110, 198, 200, 0.08); color: var(--brand-teal); }
.trs-cal-agenda-muted[b-b03l502l42]   { background: var(--bg-hover, #f5f4f1); color: var(--text-muted); }

.trs-cal-agenda-count[b-b03l502l42] {
    margin-left: auto;
    background: rgba(0,0,0,0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.trs-cal-agenda-item[b-b03l502l42] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    margin-bottom: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trs-cal-agenda-item:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
    box-shadow: 0 1px 4px rgba(110, 198, 200, 0.12);
}

.trs-cal-agenda-dot[b-b03l502l42] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.trs-cal-agenda-content[b-b03l502l42] {
    flex: 1;
    min-width: 0;
}

.trs-cal-agenda-title[b-b03l502l42] {
    font: 500 14px/1.4 var(--font-sans);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.trs-cal-agenda-done .trs-cal-agenda-title[b-b03l502l42] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.trs-cal-agenda-urgent[b-b03l502l42] {
    border-left: 3px solid var(--danger);
}

.trs-cal-agenda-meta[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 400 12px/1 var(--font-sans);
    color: var(--text-muted);
}

.trs-cal-agenda-meta .material-symbols-rounded[b-b03l502l42] { font-size: 14px; }

.trs-cal-agenda-tag[b-b03l502l42] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

.trs-cal-agenda-tag.trs-cal-task-nem[b-b03l502l42]     { background: rgba(110,198,200,0.15); color: var(--brand-teal); }
.trs-cal-agenda-tag.trs-cal-task-pmc[b-b03l502l42]     { background: rgba(99,102,241,0.12); color: #6366F1; }
.trs-cal-agenda-tag.trs-cal-task-evento[b-b03l502l42]  { background: rgba(236,72,153,0.12); color: #EC4899; }
.trs-cal-agenda-tag.trs-cal-task-proceso[b-b03l502l42] { background: rgba(245,158,11,0.12); color: #D97706; }

.trs-cal-agenda-action[b-b03l502l42] {
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s ease;
}

.trs-cal-agenda-action:hover[b-b03l502l42] {
    background: var(--bg-hover, #f5f4f1);
    color: var(--brand-teal);
}

.trs-cal-agenda-action .material-symbols-rounded[b-b03l502l42] { font-size: 18px; }

/* ── Responsive: stack week grid on mobile ──────────────────────── */
@media (max-width: 768px) {
    .trs-cal-week-grid[b-b03l502l42] {
        grid-template-columns: 1fr;
    }

    .trs-cal-day-col[b-b03l502l42] {
        min-height: auto;
    }

    .trs-cal-day-header[b-b03l502l42] {
        flex-direction: row;
        gap: 8px;
        justify-content: flex-start;
        padding: 6px 12px;
    }

    .trs-cal-day-body[b-b03l502l42] {
        max-height: none;
        padding: 4px 12px 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Filtros avanzados dot + Kebab menu
   ═══════════════════════════════════════════════════════════════════════ */

.trs-filtros-btn[b-b03l502l42] { position: relative; }

.trs-filter-dot[b-b03l502l42] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--brand-teal);
    color: #fff;
    font: 700 9px/16px var(--font-sans);
    text-align: center;
}

.trs-kebab-wrap[b-b03l502l42] { position: relative; }

.trs-kebab-backdrop[b-b03l502l42] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.trs-kebab-menu[b-b03l502l42] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 200px;
    padding: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.trs-kebab-item[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font: 400 13px/1 var(--font-sans);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.trs-kebab-item:hover[b-b03l502l42] { background: var(--bg-hover, #f5f4f1); }

.trs-kebab-item .material-symbols-rounded[b-b03l502l42] { font-size: 18px; color: var(--text-muted); }

.trs-kebab-disabled[b-b03l502l42] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.trs-kebab-badge[b-b03l502l42] {
    margin-left: auto;
    font: 600 9px/1 var(--font-sans);
    color: var(--text-muted);
    background: var(--bg-skeleton, #eae7de);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Print styles
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    .trs-page-header[b-b03l502l42],
    .trs-stats-row[b-b03l502l42],
    .trs-toolbar[b-b03l502l42],
    .trs-fab[b-b03l502l42],
    .trs-kebab-menu[b-b03l502l42],
    .trs-kebab-backdrop[b-b03l502l42] { display: none !important; }

    .trs-page[b-b03l502l42] { overflow: visible !important; height: auto !important; }
    .trs-main[b-b03l502l42] { overflow: visible !important; }

    .trs-task[b-b03l502l42] { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Bulk Modals (Reasignar / Etiquetar)
   ═══════════════════════════════════════════════════════════════════════ */

.trs-modal-overlay[b-b03l502l42] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.trs-modal-box[b-b03l502l42] {
    background: var(--bg-panel);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trs-modal-header[b-b03l502l42] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.trs-modal-header .material-symbols-rounded:first-child[b-b03l502l42] {
    font-size: 20px;
    color: var(--brand-teal-deep);
}

.trs-modal-close[b-b03l502l42] {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trs-modal-close:hover[b-b03l502l42] { background: #F3EFE7; }

.trs-modal-body[b-b03l502l42] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.trs-modal-label[b-b03l502l42] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: block;
}

.trs-modal-empty[b-b03l502l42] {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trs-modal-empty .material-symbols-rounded[b-b03l502l42] { font-size: 32px; opacity: 0.4; }

/* User list (Reasignar) */
.trs-modal-user-list[b-b03l502l42] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.trs-modal-user-item[b-b03l502l42] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg-panel);
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
    font-family: inherit;
}

.trs-modal-user-item:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.04);
}

.trs-modal-user-item.selected[b-b03l502l42] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.08);
}

.trs-modal-user-avatar[b-b03l502l42] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-deep));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trs-modal-user-info[b-b03l502l42] { flex: 1; min-width: 0; }

.trs-modal-user-name[b-b03l502l42] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.trs-modal-user-role[b-b03l502l42] {
    font-size: 11px;
    color: var(--text-muted);
}

.trs-modal-check[b-b03l502l42] {
    color: var(--brand-teal-deep);
    font-size: 18px !important;
}

/* Tag list (Etiquetar) */
.trs-modal-tag-list[b-b03l502l42] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trs-modal-tag-item[b-b03l502l42] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--border-soft);
    border-radius: 16px;
    background: var(--bg-panel);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.12s;
}

.trs-modal-tag-item:hover[b-b03l502l42] {
    border-color: var(--brand-teal);
}

.trs-modal-tag-item.selected[b-b03l502l42] {
    border-color: var(--brand-teal);
    background: rgba(110, 198, 200, 0.1);
}

.trs-modal-tag-dot[b-b03l502l42] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.trs-modal-tag-item .trs-modal-check[b-b03l502l42] {
    font-size: 14px !important;
}

/* Footer */
.trs-modal-footer[b-b03l502l42] {
    padding: 14px 20px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.trs-modal-btn[b-b03l502l42] {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all 0.12s;
}

.trs-modal-btn:disabled[b-b03l502l42] {
    opacity: 0.5;
    cursor: not-allowed;
}

.trs-modal-btn.secondary[b-b03l502l42] {
    border-color: var(--border-med);
    background: var(--bg-panel);
    color: var(--text-secondary);
}

.trs-modal-btn.secondary:hover:not(:disabled)[b-b03l502l42] {
    border-color: var(--text-secondary);
}

.trs-modal-btn.primary[b-b03l502l42] {
    background: var(--brand-teal-primary, #6DC7D0);
    color: #fff;
    font-weight: 700;
}

.trs-modal-btn.primary:hover:not(:disabled)[b-b03l502l42] {
    background: var(--brand-teal-dark, #3A8F91);
}
/* /Pages/Concentrado.razor.rz.scp.css */
/* === Concentrado · v2 wrapper (Fase D) ===================================
   Solo el chrome (container, breadcrumb, header, save button) usa tokens v2.
   El resto del CSS (toolbar, chips, tabla con sticky, drawers) preservado
   tal cual para no romper la matriz funcional.
   ========================================================================= */
.concentrado-container[b-8rzv3k8r4k] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.cn-breadcrumb[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.cn-breadcrumb .material-symbols-rounded[b-8rzv3k8r4k] { font-size: 14px !important; }

.cn-breadcrumb a[b-8rzv3k8r4k] {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cn-breadcrumb a:hover[b-8rzv3k8r4k] { color: var(--brand-teal-deep); }

.cn-sep[b-8rzv3k8r4k] { color: var(--text-muted); }

.cn-clase[b-8rzv3k8r4k] {
    color: var(--text-secondary);
    font-weight: 500;
}

.cn-current[b-8rzv3k8r4k] {
    color: var(--text-primary);
    font-weight: 600;
}

/* === Header v2 === */
.cn-header[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cn-header-icon[b-8rzv3k8r4k] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.25);
}

.cn-header-icon .material-symbols-rounded[b-8rzv3k8r4k] { font-size: 24px !important; }

.cn-title-block[b-8rzv3k8r4k] { flex: 1; min-width: 0; }

.cn-title[b-8rzv3k8r4k] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0;
}

.cn-sub[b-8rzv3k8r4k] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.cn-save-btn[b-8rzv3k8r4k] {
    padding: 9px 18px;
    background: var(--brand-teal-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3);
}

.cn-save-btn:hover:not(:disabled)[b-8rzv3k8r4k] {
    background: var(--brand-teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(75, 168, 170, 0.35);
}

.cn-save-btn:disabled[b-8rzv3k8r4k] {
    background: #C5D7D9;
    cursor: not-allowed;
    box-shadow: none;
}

.cn-save-btn .material-symbols-rounded[b-8rzv3k8r4k] { font-size: 17px !important; }

/* Loading */
.loading-state[b-8rzv3k8r4k] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-8rzv3k8r4k] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-8rzv3k8r4k] { transform: rotate(360deg); } }

/* Toolbar */
.concentrado-toolbar[b-8rzv3k8r4k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.search-box[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 6px 12px;
    flex: 0 0 220px;
    background: #fff;
}
.search-box input[b-8rzv3k8r4k] {
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
    background: transparent;
    font-family: inherit;
}
.search-box .search-icon[b-8rzv3k8r4k] { font-size: 18px; color: #AAA; }

.filter-btn[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    color: #666;
    transition: all 0.15s;
    font-family: inherit;
}
.filter-btn:hover[b-8rzv3k8r4k] { border-color: #4BA8AA; color: #4BA8AA; }
.filter-btn.active[b-8rzv3k8r4k] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }
.filter-btn .material-icons[b-8rzv3k8r4k] { font-size: 14px; }

.export-btn[b-8rzv3k8r4k] {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    color: #666;
    transition: all 0.15s;
    user-select: none;
}
.export-btn:hover[b-8rzv3k8r4k] { border-color: #4BA8AA; color: #4BA8AA; }
.export-btn .material-icons[b-8rzv3k8r4k] { font-size: 14px; }
.dropdown-arrow[b-8rzv3k8r4k] { font-size: 10px; margin-left: 2px; }

.export-dropdown[b-8rzv3k8r4k] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}
.export-option[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}
.export-option:hover[b-8rzv3k8r4k] { background: #F5F5F5; color: #4BA8AA; }
.export-option .material-icons[b-8rzv3k8r4k] { font-size: 16px; }

@@media (max-width: 600px) {
    .search-box[b-8rzv3k8r4k] { flex: 1 1 100%; }
    .filter-btn[b-8rzv3k8r4k] { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .export-btn[b-8rzv3k8r4k] { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}

/* Criterio chips */
.criterio-chips[b-8rzv3k8r4k] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cchip[b-8rzv3k8r4k] {
    display: flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 16px;
    font-size: 11px; cursor: pointer; border: 1px solid; transition: opacity 0.2s;
}
.cchip:hover[b-8rzv3k8r4k] { opacity: 0.85; }
.cchip-count[b-8rzv3k8r4k] { opacity: 0.8; font-weight: 400; margin-left: 2px; }
.cchip-action[b-8rzv3k8r4k] { background: transparent !important; border: 1px dashed #CCC !important; color: #999 !important; }
.cchip-todas[b-8rzv3k8r4k] {
    background: transparent;
    border: 1px solid #AAA;
    color: #666;
    font-weight: 500;
}
.cchip-todas.active[b-8rzv3k8r4k] {
    background: #555;
    border-color: #555;
    color: #fff;
}

/* ========== MATRIX TABLE ========== */
.matrix-wrapper[b-8rzv3k8r4k] {
    overflow: auto;
    border: 1px solid #EBEBEB;
    margin-bottom: 16px;
    max-height: 72vh;
}

.matrix-table[b-8rzv3k8r4k] {
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
}

/* ----- THEAD ----- */
.hdr-row1 th[b-8rzv3k8r4k] { position: sticky; top: 0; z-index: 3; }
.hdr-row2 th[b-8rzv3k8r4k] { position: sticky; top: 34px; z-index: 3; }

/* Alumno header — sticky corner (top + left) */
.th-alumno[b-8rzv3k8r4k] {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 30;
    background: #555;
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 10px;
    min-width: 200px;
    max-width: 200px;
    text-align: left;
    font-weight: 500;
    border-right: 1px solid #666;
    vertical-align: middle;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.12);
}

/* Calif header — no longer sticky, flows with horizontal scroll */
.th-calif[b-8rzv3k8r4k] {
    background: #555;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 4px;
    min-width: 52px;
    max-width: 52px;
    text-align: center;
    font-weight: 500;
    border-right: 2px solid #444;
    vertical-align: middle;
}

/* Trend indicators (inline in alumno name) */
.trend-up[b-8rzv3k8r4k] { color: #639922; font-size: 11px; font-weight: 700; margin-right: 3px; }
.trend-down[b-8rzv3k8r4k] { color: #E24B4A; font-size: 11px; font-weight: 700; margin-right: 3px; }
.trend-flat[b-8rzv3k8r4k] { color: #CCC; font-size: 10px; margin-right: 3px; }

/* Criterio group header */
.th-criterio[b-8rzv3k8r4k] {
    text-align: center;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
    background: #555;
}
.th-criterio span[b-8rzv3k8r4k] { font-weight: 500; }
.th-pct[b-8rzv3k8r4k] { font-size: 9px; margin-left: 4px; opacity: 0.8; }

.th-criterio-clickable[b-8rzv3k8r4k] { cursor: pointer; user-select: none; transition: filter 0.15s; }
.th-criterio-clickable:hover[b-8rzv3k8r4k] { filter: brightness(0.96); }

.th-sortable[b-8rzv3k8r4k] { cursor: pointer; user-select: none; transition: background 0.15s; }
.th-sortable:hover[b-8rzv3k8r4k] { background: #666; }
.sort-ic[b-8rzv3k8r4k] {
    font-size: 13px !important;
    vertical-align: middle;
    opacity: 0.7;
    margin-left: 2px;
}

.chevron-ic[b-8rzv3k8r4k] {
    font-size: 14px !important;
    vertical-align: middle;
    transition: transform 0.2s ease;
    display: inline-block;
}
.chevron-ic.rotated[b-8rzv3k8r4k] { transform: rotate(90deg); }
.th-collapsed[b-8rzv3k8r4k] {
    min-width: 65px;
    padding: 6px 10px;
    white-space: nowrap;
}
.collapsed-name[b-8rzv3k8r4k] {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}
.collapsed-pct[b-8rzv3k8r4k] {
    font-size: 9px;
    opacity: 0.7;
    margin-top: 2px;
}

/* Activity sub-header — 2 lines: name + code */
.th-act[b-8rzv3k8r4k] {
    background: #F7F7F7;
    text-align: center;
    padding: 8px 4px;
    min-width: 65px;
    max-width: 65px;
    min-height: 40px;
    border-bottom: 0.5px solid #EBEBEB;
    border-right: 0.5px solid #F0F0F0;
    vertical-align: middle;
    white-space: normal;
}
.th-act-last[b-8rzv3k8r4k] { border-right: none; }
.act-name[b-8rzv3k8r4k] {
    font-size: 9px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60px;
    margin: 0 auto;
    line-height: 1.2;
}
.act-code[b-8rzv3k8r4k] {
    font-size: 8px;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1;
}

/* ----- TBODY ----- */
tbody td[b-8rzv3k8r4k] { background: white; }
.row-alt td[b-8rzv3k8r4k] { background: #FAFAFA; }

/* Alumno data cell — sticky left */
.td-alumno[b-8rzv3k8r4k] {
    position: sticky;
    left: 0;
    z-index: 20;
    background: white;
    min-width: 200px;
    max-width: 200px;
    padding: 4px 10px;
    border-right: 1px solid #EBEBEB;
    border-bottom: 0.5px solid #F3F3F3;
    vertical-align: middle;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.08);
}
.row-alt .td-alumno[b-8rzv3k8r4k] { background: #FAFAFA; }

/* Calif data cell — no longer sticky, flows with horizontal scroll */
.td-calif[b-8rzv3k8r4k] {
    background: white;
    min-width: 52px;
    max-width: 52px;
    text-align: center;
    padding: 4px;
    font-size: 12px;
    font-weight: 600;
    border-right: 2px solid #EBEBEB;
    border-bottom: 0.5px solid #F3F3F3;
    vertical-align: middle;
}
.row-alt .td-calif[b-8rzv3k8r4k] { background: #FAFAFA; }

/* Alumno rows */
.alumno-r1[b-8rzv3k8r4k] { font-size: 11px; font-weight: 500; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alumno-r2[b-8rzv3k8r4k] { display: flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.alumno-extras[b-8rzv3k8r4k] { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; }

/* Badges */
.badge[b-8rzv3k8r4k] { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
.badge-pending[b-8rzv3k8r4k] { background: rgba(243,156,18,0.08); color: #C99A2E; border: 1px solid rgba(243,156,18,0.2); }
.badge-complete[b-8rzv3k8r4k] { background: rgba(75,168,170,0.1); color: #4BA8AA; border: 1px solid rgba(75,168,170,0.25); }
.badge-faltas[b-8rzv3k8r4k] { background: rgba(232,141,141,0.1); color: #D35D52; border: 1px solid rgba(232,141,141,0.2); }

/* ----- GRADE CELLS ----- */
.td-grade[b-8rzv3k8r4k] {
    min-width: 65px;
    max-width: 65px;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    border-bottom: 0.5px solid #F3F3F3;
    border-right: 0.5px solid #F0F0F0;
    position: relative;
    cursor: pointer;
}
.td-grade-last[b-8rzv3k8r4k] { border-right: none; }

/* Grade pill */
.grade-pill[b-8rzv3k8r4k] {
    width: 52px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    margin: auto;
}
.pill-ok[b-8rzv3k8r4k] { }
.pill-pending[b-8rzv3k8r4k] {
    background: rgba(243,156,18,0.1);
    color: #C99A2E;
}
.pill-prom[b-8rzv3k8r4k] {
    font-size: 11px;
    cursor: default;
}

/* Grade popup */
.grade-popup[b-8rzv3k8r4k] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: white;
    border: 0.5px solid #E0E0E0;
    border-radius: 8px;
    padding: 4px;
    display: flex;
    gap: 3px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.grade-popup-btn[b-8rzv3k8r4k] {
    width: 28px; height: 24px; border-radius: 5px; display: flex;
    align-items: center; justify-content: center; font-size: 10px;
    cursor: pointer; border: 0.5px solid #E8E8E8; background: #FAFAFA; color: #999;
    transition: all 0.15s;
}
.grade-popup-btn:hover[b-8rzv3k8r4k] { border-color: #BBB; color: #555; }
.grade-popup-btn.selected[b-8rzv3k8r4k] {
    background: rgba(75,168,170,0.15); border: 1.5px solid #4BA8AA;
    color: #4BA8AA; font-weight: 500;
}

/* ========== DASHBOARD ========== */
.dashboard-row[b-8rzv3k8r4k] { display: flex; gap: 14px; flex-wrap: wrap; }
.dash-card[b-8rzv3k8r4k] { background: white; border-radius: 12px; border: 0.5px solid #EBEBEB; padding: 14px 18px; }
.dash-donut[b-8rzv3k8r4k] { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; }
.dash-donut-svg[b-8rzv3k8r4k] { width: 60px; height: 60px; transform: rotate(-90deg); flex-shrink: 0; }
.dash-metrics[b-8rzv3k8r4k] { display: flex; gap: 8px; }
.dash-metric[b-8rzv3k8r4k] { border-radius: 10px; padding: 10px 14px; text-align: center; min-width: 80px; }
.dash-metric-num[b-8rzv3k8r4k] { font-size: 18px; font-weight: 500; }
.dash-metric-lbl[b-8rzv3k8r4k] { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
.dash-alerts[b-8rzv3k8r4k] { display: flex; gap: 8px; }
.dash-alert[b-8rzv3k8r4k] { border-radius: 10px; padding: 10px 14px; text-align: center; min-width: 80px; }
.dash-alert-num[b-8rzv3k8r4k] { font-size: 18px; font-weight: 500; }
.dash-alert-lbl[b-8rzv3k8r4k] { font-size: 9px; }

/* ========== INSIGHTS ========== */
.insights-grid[b-8rzv3k8r4k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.insight-card[b-8rzv3k8r4k] {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #eee;
}
.insight-full[b-8rzv3k8r4k] { grid-column: span 2; }
.insight-title[b-8rzv3k8r4k] {
    font-size: 13px;
    font-weight: 500;
    color: #888;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.insight-row[b-8rzv3k8r4k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.insight-name[b-8rzv3k8r4k] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.insight-val[b-8rzv3k8r4k] {
    font-weight: 500;
    min-width: 50px;
    text-align: right;
    white-space: nowrap;
}
.val-red[b-8rzv3k8r4k] { color: #E24B4A; }
.val-green[b-8rzv3k8r4k] { color: #639922; }
.val-amber[b-8rzv3k8r4k] { color: #EF9F27; }

@@media (max-width: 600px) {
    .insights-grid[b-8rzv3k8r4k] { grid-template-columns: 1fr; }
    .insight-full[b-8rzv3k8r4k] { grid-column: span 1; }
}

/* ========== EMPTY CRITERIO STATE (V2 fix) ========== */
.th-act-empty[b-8rzv3k8r4k] {
    min-width: 130px;
    max-width: 160px;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 0.5px solid #EBEBEB;
}
.act-empty-state[b-8rzv3k8r4k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
}
.act-empty-text[b-8rzv3k8r4k] {
    font-size: 10px;
    opacity: 0.6;
    font-weight: 400;
}
.act-empty-add[b-8rzv3k8r4k] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed currentColor;
    background: transparent;
    color: inherit;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.8;
    font-family: inherit;
    transition: opacity 0.15s, background 0.15s;
}
.act-empty-add:hover[b-8rzv3k8r4k] {
    opacity: 1;
    background: rgba(255,255,255,0.5);
}

.td-empty-placeholder[b-8rzv3k8r4k] {
    text-align: center;
    color: #ccc;
    font-size: 12px;
    min-width: 130px;
    max-width: 160px;
    vertical-align: middle;
    border-bottom: 0.5px solid #F3F3F3;
}

/* ========== ADD BUTTONS / DRAWERS (V2) ========== */
.add-activity-btn[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1.5px dashed #4BA8AA;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    color: #4BA8AA;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s;
}
.add-activity-btn:hover[b-8rzv3k8r4k] { background: #E8F4F8; }
.add-activity-btn .material-icons[b-8rzv3k8r4k] { font-size: 14px; }

.chip-add-criterio[b-8rzv3k8r4k] {
    border: 1.5px dashed #9B59B6 !important;
    color: #9B59B6 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}
.chip-add-criterio:hover[b-8rzv3k8r4k] { background: #F3F0F8 !important; }

/* + button inside each category header */
.cat-header-inner[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}
.cat-header-left[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.cat-add-btn[b-8rzv3k8r4k] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px dashed currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    opacity: 0.7;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
    transition: opacity 0.15s, background 0.15s;
}
.cat-add-btn:hover[b-8rzv3k8r4k] {
    opacity: 1;
    background: rgba(255,255,255,0.5);
}

/* Drawer overlay + panel (shared pattern) */
.act-panel-overlay[b-8rzv3k8r4k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 300;
    display: flex;
    justify-content: flex-end;
}
.act-panel[b-8rzv3k8r4k] {
    width: 400px;
    background: #fff;
    height: 100%;
    overflow-y: auto;
    animation: slideInRight 0.2s ease;
}
@@keyframes slideInRight {
    from[b-8rzv3k8r4k] { transform: translateX(100%); }
    to[b-8rzv3k8r4k]   { transform: translateX(0); }
}
.act-panel-header[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}
.act-panel-title[b-8rzv3k8r4k] {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.act-panel-title .material-icons[b-8rzv3k8r4k] { font-size: 20px; color: #4BA8AA; }
.act-panel-close[b-8rzv3k8r4k] { cursor: pointer; color: #aaa; }
.act-panel-close:hover[b-8rzv3k8r4k] { color: #333; }

.act-panel-body[b-8rzv3k8r4k] { padding: 16px 20px; }

.act-panel-info[b-8rzv3k8r4k] {
    padding: 8px 10px;
    background: #E8F4F8;
    border-left: 3px solid #4BA8AA;
    font-size: 11px;
    color: #3A8E90;
    margin-bottom: 12px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.act-pgroup[b-8rzv3k8r4k] { margin-bottom: 12px; }
.act-plabel[b-8rzv3k8r4k] {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    display: block;
}
.act-pinput[b-8rzv3k8r4k], .act-pselect[b-8rzv3k8r4k] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.act-pinput:focus[b-8rzv3k8r4k], .act-pselect:focus[b-8rzv3k8r4k] { outline: none; border-color: #4BA8AA; }

.act-pdivider[b-8rzv3k8r4k] { height: 1px; background: #eee; margin: 14px 0; }

.act-psave[b-8rzv3k8r4k] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #6EC6C8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}
.act-psave:hover[b-8rzv3k8r4k] { background: #4BA8AA; }
.act-psave:disabled[b-8rzv3k8r4k] { opacity: 0.6; cursor: not-allowed; }

.crit-total-bar[b-8rzv3k8r4k] {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}
.crit-total-bar.ok[b-8rzv3k8r4k]   { background: #EAF3DE; color: #3B6D11; }
.crit-total-bar.warn[b-8rzv3k8r4k] { background: #FCEBEB; color: #A32D2D; }

.crit-toggle-row[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.crit-toggle-label[b-8rzv3k8r4k] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cc-toggle[b-8rzv3k8r4k] {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #ccc;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
.cc-toggle.on[b-8rzv3k8r4k] { background: #4BA8AA; }
.cc-toggle[b-8rzv3k8r4k]::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
}
.cc-toggle.on[b-8rzv3k8r4k]::after { left: 20px; }

.crit-existing-label[b-8rzv3k8r4k] { font-size: 11px; color: #888; margin-bottom: 6px; }
.crit-existing-list[b-8rzv3k8r4k] { margin-bottom: 14px; }
.crit-existing-item[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
}
.crit-existing-dot[b-8rzv3k8r4k] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.crit-existing-name[b-8rzv3k8r4k] { flex: 1; color: #555; }
.crit-existing-pct[b-8rzv3k8r4k] {
    font-weight: 500;
    color: #4BA8AA;
    min-width: 50px;
    text-align: right;
}

@@media (max-width: 480px) {
    .act-panel[b-8rzv3k8r4k] { width: 100%; }
}

/* ========== NEW DRAWER (V2 redesign) ========== */
.drawer-overlay[b-8rzv3k8r4k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 300;
    display: flex;
    justify-content: flex-end;
}
.drawer[b-8rzv3k8r4k] {
    width: 400px;
    background: #fff;
    height: 100%;
    overflow-y: auto;
    animation: slideInRight 0.2s ease;
}
.drawer-header[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}
.drawer-title[b-8rzv3k8r4k] {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
}
.drawer-title .material-icons[b-8rzv3k8r4k] { font-size: 20px; }
.drawer-close[b-8rzv3k8r4k] { cursor: pointer; color: #aaa; }
.drawer-close:hover[b-8rzv3k8r4k] { color: #333; }

.drawer-body[b-8rzv3k8r4k] { padding: 16px 20px; }

.drawer-group[b-8rzv3k8r4k] { margin-bottom: 16px; }
.drawer-label[b-8rzv3k8r4k] {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    display: block;
}
.drawer-input[b-8rzv3k8r4k] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    font-family: inherit;
    box-sizing: border-box;
}
.drawer-input:focus[b-8rzv3k8r4k] {
    outline: none;
    border-color: #4BA8AA;
}

.drawer-crit-chips[b-8rzv3k8r4k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.drawer-crit-chip[b-8rzv3k8r4k] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    border: 1.5px solid #ddd;
    color: #666;
    background: transparent;
    cursor: pointer;
    transition: all 0.12s;
    user-select: none;
}
.drawer-crit-chip:hover[b-8rzv3k8r4k] { opacity: 0.85; }

.drawer-clases-grid[b-8rzv3k8r4k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.drawer-clase-item[b-8rzv3k8r4k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: background 0.1s;
}
.drawer-clase-item:hover[b-8rzv3k8r4k] { background: #f5f5f5; }

.drawer-checkbox[b-8rzv3k8r4k] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}
.drawer-checkbox.checked[b-8rzv3k8r4k] {
    background: #4BA8AA;
    border-color: #4BA8AA;
}

.drawer-clase-name[b-8rzv3k8r4k] { font-size: 12px; }

.drawer-actions[b-8rzv3k8r4k] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.drawer-cancel[b-8rzv3k8r4k] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.drawer-cancel:hover[b-8rzv3k8r4k] { border-color: #ccc; color: #333; }
.drawer-save[b-8rzv3k8r4k] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #6EC6C8;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}
.drawer-save:hover[b-8rzv3k8r4k] { background: #4BA8AA; }
.drawer-save:disabled[b-8rzv3k8r4k] { opacity: 0.6; cursor: not-allowed; }

@@media (max-width: 480px) {
    .drawer[b-8rzv3k8r4k] { width: 100%; }
    .drawer-clases-grid[b-8rzv3k8r4k] { grid-template-columns: 1fr; }
}

/* Toast */
.toast[b-8rzv3k8r4k] {
    position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 10px;
    font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px;
    z-index: 200; animation: slideUp 0.3s ease;
}
.toast-success[b-8rzv3k8r4k] { background: rgba(75,168,170,0.15); color: #4BA8AA; border: 1px solid rgba(75,168,170,0.3); }
@@keyframes slideUp { from[b-8rzv3k8r4k] { opacity: 0; transform: translateY(20px); } to[b-8rzv3k8r4k] { opacity: 1; transform: translateY(0); } }

/* ========== RESPONSIVE ========== */
@@media (max-width: 768px) {
    .concentrado-container[b-8rzv3k8r4k] { padding: 12px; }
    .th-alumno[b-8rzv3k8r4k], .td-alumno[b-8rzv3k8r4k] { min-width: 150px; max-width: 150px; }
    .td-grade[b-8rzv3k8r4k], .th-act[b-8rzv3k8r4k] { min-width: 50px; max-width: 50px; }
    .grade-pill[b-8rzv3k8r4k] { width: 42px; height: 24px; font-size: 11px; }
    .dashboard-row[b-8rzv3k8r4k] { flex-direction: column; }
    .dash-metrics[b-8rzv3k8r4k], .dash-alerts[b-8rzv3k8r4k] { flex-wrap: wrap; }
}

@@media (max-width: 550px) {
    .th-alumno[b-8rzv3k8r4k], .td-alumno[b-8rzv3k8r4k] { min-width: 120px; max-width: 120px; }
    .conc-header[b-8rzv3k8r4k] { flex-direction: column; align-items: stretch; }
    .btn-guardar[b-8rzv3k8r4k] { justify-content: center; width: 100%; }
}

/* ========== PRINT ========== */
@@media print {
    .breadcrumb[b-8rzv3k8r4k], .conc-header[b-8rzv3k8r4k], .concentrado-toolbar[b-8rzv3k8r4k], .criterio-chips[b-8rzv3k8r4k],
    .dashboard-row[b-8rzv3k8r4k], .insights-grid[b-8rzv3k8r4k], .toast[b-8rzv3k8r4k], .btn-guardar[b-8rzv3k8r4k] { display: none !important; }
    .matrix-wrapper[b-8rzv3k8r4k] { overflow: visible !important; max-height: none !important; border: none !important; }
    .td-alumno[b-8rzv3k8r4k], .th-alumno[b-8rzv3k8r4k] { position: static !important; box-shadow: none !important; }
    .matrix-table[b-8rzv3k8r4k] { width: 100% !important; }
    .concentrado-container[b-8rzv3k8r4k] { padding: 0 !important; }
}
/* /Pages/ConfigurarClase.razor.rz.scp.css */
/* === Configurar Clase · v2 wrapper (Fase D) === */
.cc-container[b-ttp62fvvwi] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.cc-bc[b-ttp62fvvwi] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.cc-bc .material-symbols-rounded[b-ttp62fvvwi] { font-size: 14px !important; }
.cc-bc a[b-ttp62fvvwi] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.cc-bc a:hover[b-ttp62fvvwi] { color: var(--brand-teal-deep); }
.cc-sep[b-ttp62fvvwi] { color: var(--text-muted); }
.cc-clase[b-ttp62fvvwi] { color: var(--text-secondary); font-weight: 500; }
.cc-current[b-ttp62fvvwi] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.cc-h[b-ttp62fvvwi] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.cc-h-icon[b-ttp62fvvwi] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #5C6068, #3F4046);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(92, 96, 104, 0.25);
}
.cc-h-icon .material-symbols-rounded[b-ttp62fvvwi] { font-size: 24px !important; }
.cc-h-block[b-ttp62fvvwi] { flex: 1; min-width: 0; }
.cc-h-title[b-ttp62fvvwi] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.cc-h-sub[b-ttp62fvvwi] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

/* Pills */
.class-pills[b-ttp62fvvwi] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-ttp62fvvwi] {
    padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s;
}
.pill:hover[b-ttp62fvvwi] { border-color: #4BA8AA; color: #4BA8AA; }
.pill.active[b-ttp62fvvwi] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Loading */
.loading-state[b-ttp62fvvwi] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-ttp62fvvwi] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-ttp62fvvwi] { transform: rotate(360deg); } }

/* ===== LAYOUT ===== */
.cc-layout[b-ttp62fvvwi] {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0;
    align-items: start; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; background: #fff;
}
.cc-sidenav[b-ttp62fvvwi] {
    background: #f7f7f7; border-right: 1px solid #e0e0e0; padding: 8px 0; min-height: 500px;
    position: sticky; top: 0;
}
.cc-nav-item[b-ttp62fvvwi] {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px;
    cursor: pointer; color: #666; transition: all 0.12s; border-left: 3px solid transparent;
}
.cc-nav-item:hover[b-ttp62fvvwi] { background: rgba(75,168,170,0.06); color: #4BA8AA; }
.cc-nav-item.active[b-ttp62fvvwi] { background: #E8F4F8; color: #3A8E90; font-weight: 500; border-left-color: #4BA8AA; }
.cc-nav-item .material-icons[b-ttp62fvvwi] { font-size: 16px; }

.cc-content[b-ttp62fvvwi] { padding: 20px 24px; }
.cc-section[b-ttp62fvvwi] { margin-bottom: 32px; }
.cc-section:last-child[b-ttp62fvvwi] { margin-bottom: 0; }
.cc-sec-title[b-ttp62fvvwi] { font-size: 16px; font-weight: 500; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.cc-sec-title .material-icons[b-ttp62fvvwi] { font-size: 18px; color: #4BA8AA; }
.cc-divider[b-ttp62fvvwi] { height: 1px; background: #eee; margin: 20px 0; }

/* ===== FORMS ===== */
.cc-form-group[b-ttp62fvvwi] { margin-bottom: 14px; }
.cc-label[b-ttp62fvvwi] { font-size: 11px; font-weight: 500; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; }
.cc-input[b-ttp62fvvwi] {
    width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; color: #333; font-family: inherit; box-sizing: border-box;
}
.cc-input:focus[b-ttp62fvvwi] { outline: none; border-color: #4BA8AA; }
.cc-select[b-ttp62fvvwi] {
    width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; color: #333; font-family: inherit; box-sizing: border-box;
}
.cc-form-row[b-ttp62fvvwi] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Toggle */
.cc-toggle-row[b-ttp62fvvwi] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px;
}
.cc-toggle-label[b-ttp62fvvwi] { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cc-toggle[b-ttp62fvvwi] {
    width: 40px; height: 22px; border-radius: 11px; background: #ccc;
    position: relative; cursor: pointer; transition: background 0.2s;
}
.cc-toggle.on[b-ttp62fvvwi] { background: #4BA8AA; }
.cc-toggle[b-ttp62fvvwi]::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 2px; left: 2px; transition: left 0.2s;
}
.cc-toggle.on[b-ttp62fvvwi]::after { left: 20px; }

/* Buttons */
.cc-save-btn[b-ttp62fvvwi] {
    background: #6EC6C8; color: #fff; border: none; border-radius: 8px; padding: 10px 24px;
    font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center;
    gap: 6px; margin-top: 16px; font-family: inherit; transition: background 0.15s;
}
.cc-save-btn:hover[b-ttp62fvvwi] { background: #4BA8AA; }
.cc-save-btn:disabled[b-ttp62fvvwi] { opacity: 0.6; cursor: not-allowed; }
.cc-cancel-btn[b-ttp62fvvwi] {
    background: transparent; border: 1px solid #ddd; border-radius: 8px; padding: 8px 16px;
    font-size: 13px; cursor: pointer; color: #888; font-family: inherit;
}
.cc-cancel-btn:hover[b-ttp62fvvwi] { border-color: #ccc; color: #666; }
.cc-add-row[b-ttp62fvvwi] {
    display: flex; align-items: center; justify-content: center; padding: 10px;
    border: 1px dashed #ddd; border-radius: 8px; font-size: 12px; color: #4BA8AA;
    cursor: pointer; gap: 4px; margin-top: 10px;
}
.cc-add-row:hover[b-ttp62fvvwi] { background: #E8F4F8; border-color: #4BA8AA; }

/* ===== CRITERIOS ===== */
.crit-total-bar[b-ttp62fvvwi] {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
    margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between;
}
.crit-total-bar.ok[b-ttp62fvvwi] { background: #EAF3DE; color: #3B6D11; }
.crit-total-bar.warn[b-ttp62fvvwi] { background: #FCEBEB; color: #A32D2D; }
.crit-layout[b-ttp62fvvwi] { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 16px; }
.crit-donut[b-ttp62fvvwi] { flex-shrink: 0; }
.crit-list[b-ttp62fvvwi] { flex: 1; }
.crit-item[b-ttp62fvvwi] { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; }
.crit-item:last-child[b-ttp62fvvwi] { border-bottom: none; }
.crit-dot[b-ttp62fvvwi] { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.crit-info[b-ttp62fvvwi] { flex: 1; min-width: 0; }
.crit-name[b-ttp62fvvwi] { font-size: 13px; font-weight: 500; }
.crit-meta[b-ttp62fvvwi] { font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.crit-tipo-badge[b-ttp62fvvwi] { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #F0F0F0; color: #999; }
.crit-tipo-badge.ponderado[b-ttp62fvvwi] { background: rgba(110,198,200,0.1); color: #4A9B9D; }
.crit-pct[b-ttp62fvvwi] { font-size: 14px; font-weight: 500; min-width: 50px; text-align: right; color: #4BA8AA; }
.crit-action-btn[b-ttp62fvvwi] { border: none; background: transparent; cursor: pointer; color: #ccc; padding: 2px; }
.crit-action-btn .material-icons[b-ttp62fvvwi] { font-size: 16px; }
.crit-action-btn:hover[b-ttp62fvvwi] { color: #888; }
.crit-action-btn.delete:hover[b-ttp62fvvwi] { color: #E24B4A; }
.crit-add-form[b-ttp62fvvwi] { border: 1px solid #E8F4F8; border-radius: 8px; padding: 14px; background: #fafafa; margin-top: 10px; }
.crit-actions[b-ttp62fvvwi] { display: flex; gap: 2px; }

/* ===== HORARIOS ===== */
.hor-item[b-ttp62fvvwi] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 6px;
}
.hor-day[b-ttp62fvvwi] { font-size: 13px; font-weight: 500; min-width: 80px; }
.hor-time[b-ttp62fvvwi] { font-size: 13px; color: #666; flex: 1; text-align: center; }
.cc-empty[b-ttp62fvvwi] { text-align: center; padding: 20px; color: #aaa; font-size: 13px; }
.cc-empty .material-icons[b-ttp62fvvwi] { font-size: 32px; display: block; margin-bottom: 6px; opacity: 0.3; }

/* ===== ACTIVIDADES ===== */
.act-category-chips[b-ttp62fvvwi] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.act-cat-chip[b-ttp62fvvwi] {
    padding: 5px 12px; border-radius: 16px; font-size: 12px; border: 1px solid #ddd;
    cursor: pointer; color: #666; transition: all 0.15s;
}
.act-cat-chip.active[b-ttp62fvvwi] { background: #E8F4F8; border-color: #4BA8AA; color: #3A8E90; }
.act-cat-count[b-ttp62fvvwi] { opacity: 0.6; margin-left: 2px; }
.act-add-bar[b-ttp62fvvwi] { display: flex; gap: 8px; margin-bottom: 12px; }
.act-add-input[b-ttp62fvvwi] {
    flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.act-add-input:focus[b-ttp62fvvwi] { outline: none; border-color: #4BA8AA; }
.act-add-btn[b-ttp62fvvwi] {
    padding: 8px 16px; border-radius: 8px; border: none; background: #4BA8AA; color: #fff;
    font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 4px; font-family: inherit;
}
.act-add-btn:hover[b-ttp62fvvwi] { background: #3A8E90; }
.act-add-btn:disabled[b-ttp62fvvwi] { opacity: 0.5; cursor: not-allowed; }
.act-item[b-ttp62fvvwi] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid #eee;
}
.act-item:last-child[b-ttp62fvvwi] { border-bottom: none; }
.act-info[b-ttp62fvvwi] { flex: 1; min-width: 0; }
.act-name[b-ttp62fvvwi] { font-size: 13px; font-weight: 500; }
.act-stats[b-ttp62fvvwi] { font-size: 11px; color: #888; display: flex; gap: 8px; margin-top: 2px; }
.act-stat-ok[b-ttp62fvvwi] { color: #639922; display: flex; align-items: center; gap: 2px; }
.act-stat-pend[b-ttp62fvvwi] { color: #E24B4A; display: flex; align-items: center; gap: 2px; }
.act-progress[b-ttp62fvvwi] { width: 80px; height: 6px; border-radius: 3px; background: #eee; overflow: hidden; margin: 0 12px; }
.act-progress-fill[b-ttp62fvvwi] { height: 100%; border-radius: 3px; background: #4BA8AA; }
.act-valor-input[b-ttp62fvvwi] {
    width: 58px; padding: 6px; border: 1.5px solid #6EC6C8; border-radius: 6px;
    background: #F0FAFA; color: #4A9B9D; font-size: 13px; font-weight: 600;
    text-align: center; font-family: inherit; box-sizing: border-box; margin: 0 4px;
}
.act-valor-input:focus[b-ttp62fvvwi] { outline: none; border-color: #4BA8AA; }

/* ===== RESPONSIVE ===== */
@@media (max-width: 768px) {
    .cc-container[b-ttp62fvvwi] { padding: 12px; }
    .cc-layout[b-ttp62fvvwi] { grid-template-columns: 1fr; }
    .cc-sidenav[b-ttp62fvvwi] {
        display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid #e0e0e0;
        min-height: auto; padding: 0; position: static;
    }
    .cc-nav-item[b-ttp62fvvwi] { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 10px 14px; }
    .cc-nav-item.active[b-ttp62fvvwi] { border-bottom-color: #4BA8AA; border-left-color: transparent; }
    .cc-form-row[b-ttp62fvvwi] { grid-template-columns: 1fr; }
    .crit-layout[b-ttp62fvvwi] { flex-direction: column; }
}

@@media (max-width: 480px) {
    .act-add-bar[b-ttp62fvvwi] { flex-direction: column; }
}
/* /Pages/ControlEscolar/Index.razor.rz.scp.css */
/* ===================================================================
   CONTROL ESCOLAR — Landing (chrome v2 + cards legacy)
   =================================================================== */

/* ── Container + chrome v2 (prefijo cei-) ───────────────────────── */
.cei-container[b-ngeeo2ew6a] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.cei-bc[b-ngeeo2ew6a] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.cei-bc .material-symbols-rounded[b-ngeeo2ew6a] { font-size: 14px; }

.cei-bc a[b-ngeeo2ew6a] {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cei-bc a:hover[b-ngeeo2ew6a] { color: var(--brand-teal-deep); }

.cei-sep[b-ngeeo2ew6a] { color: var(--text-muted); }
.cei-current[b-ngeeo2ew6a] { color: var(--text-primary); font-weight: 600; }

.cei-h[b-ngeeo2ew6a] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.cei-h-icon[b-ngeeo2ew6a] {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, #4F46E5, #3730A3);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.cei-h-icon .material-symbols-rounded[b-ngeeo2ew6a] { font-size: 26px; }

.cei-h-block[b-ngeeo2ew6a] { flex: 1; min-width: 0; }

.cei-h-title[b-ngeeo2ew6a] {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    line-height: 1.1;
}

.cei-h-sub[b-ngeeo2ew6a] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Section label ──────────────────────────────────────────────── */
.ce-section-label[b-ngeeo2ew6a] {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── Grid de cards ──────────────────────────────────────────────── */
.ce-cards-grid[b-ngeeo2ew6a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ce-card[b-ngeeo2ew6a] {
    background: var(--bg-panel);
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    padding: 22px 14px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 148px;
}

.ce-card:hover[b-ngeeo2ew6a] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-teal);
    text-decoration: none;
    color: inherit;
}

.ce-card-icon[b-ngeeo2ew6a] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.ce-card-icon .material-icons[b-ngeeo2ew6a] { font-size: 26px !important; }

.ce-card-title[b-ngeeo2ew6a] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ce-card-subtitle[b-ngeeo2ew6a] {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ce-cards-grid[b-ngeeo2ew6a] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cei-container[b-ngeeo2ew6a] { padding: 18px 16px 24px; }
}

@media (max-width: 575.98px) {
    .ce-cards-grid[b-ngeeo2ew6a] { gap: 10px; }
    .ce-card[b-ngeeo2ew6a] { padding: 16px 8px; min-height: 128px; }
    .ce-card-icon[b-ngeeo2ew6a] {
        width: 42px; height: 42px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .ce-card-icon .material-icons[b-ngeeo2ew6a] { font-size: 22px !important; }
    .ce-card-title[b-ngeeo2ew6a] { font-size: 13px; }
    .ce-card-subtitle[b-ngeeo2ew6a] { font-size: 11px; }
    .cei-h-title[b-ngeeo2ew6a] { font-size: 22px; }
    .cei-h-icon[b-ngeeo2ew6a] { width: 42px; height: 42px; border-radius: 11px; }
    .cei-h-icon .material-symbols-rounded[b-ngeeo2ew6a] { font-size: 22px; }
}
/* /Pages/ControlEscolar/Justificantes.razor.rz.scp.css */
/* ========================================================================
   JUSTIFICANTES — PÁGINA (chrome v2 + contenido legacy intacto)
   ======================================================================== */

.just-page[b-7x37b9suyg] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ── Chrome v2 ───────────────────────────────────────────────────── */
.just-bc[b-7x37b9suyg] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.just-bc .material-symbols-rounded[b-7x37b9suyg] { font-size: 14px; }
.just-bc a[b-7x37b9suyg] {
    color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    transition: color 0.15s ease;
}
.just-bc a:hover[b-7x37b9suyg] { color: var(--brand-teal-deep); }
.just-sep[b-7x37b9suyg] { color: var(--text-muted); }
.just-current[b-7x37b9suyg] { color: var(--text-primary); font-weight: 600; }

.just-h[b-7x37b9suyg] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px;
}
.just-h-icon[b-7x37b9suyg] {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, #10B981, #047857);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.just-h-icon .material-symbols-rounded[b-7x37b9suyg] { font-size: 26px; }
.just-h-block[b-7x37b9suyg] { flex: 1; min-width: 0; }
.just-h-title[b-7x37b9suyg] {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    line-height: 1.1;
}
.just-h-sub[b-7x37b9suyg] {
    font-size: 13px; color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 575.98px) {
    .just-page[b-7x37b9suyg] { padding: 18px 16px 24px; }
    .just-h-title[b-7x37b9suyg] { font-size: 22px; }
    .just-h-icon[b-7x37b9suyg] { width: 42px; height: 42px; border-radius: 11px; }
    .just-h-icon .material-symbols-rounded[b-7x37b9suyg] { font-size: 22px; }
}

/* Loading inicial */
.just-loading-state[b-7x37b9suyg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #888;
    font-size: 13px;
}

.just-spinner-big[b-7x37b9suyg] {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid #E1F5EE;
    border-top-color: #0F6E56;
    animation: just-spin-b-7x37b9suyg 1s linear infinite;
}

/* Grid 2 columnas */
.just-grid[b-7x37b9suyg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 10px;
    align-items: start;
}

.just-col[b-7x37b9suyg] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Card base */
.just-card[b-7x37b9suyg] {
    background: white;
    border-radius: 11px;
    border: 0.5px solid rgba(0,0,0,0.06);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.just-col .just-card[b-7x37b9suyg] { margin-bottom: 0; }

.just-card-header[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    gap: 8px;
}

.just-section-label[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #444;
}

.just-section-icon[b-7x37b9suyg] {
    font-size: 14px !important;
    color: #4BA8AA;
}

.just-section-hint[b-7x37b9suyg] {
    font-size: 10px;
    color: #888;
}

.just-count-badge[b-7x37b9suyg] {
    font-size: 10px;
    color: #0F6E56;
    background: #E1F5EE;
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 500;
    margin-left: 4px;
}

.just-hint-card[b-7x37b9suyg] {
    background: #F5F7F9;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 11px;
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.just-hint-card .material-icons[b-7x37b9suyg] { font-size: 20px; color: #BBB; }

.just-empty[b-7x37b9suyg] {
    text-align: center;
    padding: 20px;
    color: #AAA;
    font-size: 11px;
}

/* ========================================================================
   CHIPS DE GRUPO COLORIZADOS
   ======================================================================== */

.just-group-chips[b-7x37b9suyg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.just-group-chip[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 99px;
    border: 1px solid;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.1s ease;
    font-family: inherit;
}

.just-group-chip:hover[b-7x37b9suyg] { transform: translateY(-1px); }

.just-group-chip.active[b-7x37b9suyg] {
    border-width: 1.5px;
    font-weight: 500;
}

.just-grade-badge[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}

.just-grade-badge-sm[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 500;
    flex-shrink: 0;
}

/* ========================================================================
   MULTI-GROUP STACK (alumnos agrupados por grupo)
   ======================================================================== */

.just-groups-stack[b-7x37b9suyg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.just-group-section[b-7x37b9suyg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.just-group-separator[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.just-group-sep-label[b-7x37b9suyg] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.just-group-sep-line[b-7x37b9suyg] {
    flex: 1;
    height: 1px;
    margin-left: 3px;
    opacity: 0.18;
}

/* ========================================================================
   CHIPS DE ALUMNOS (inline)
   ======================================================================== */

.just-student-chips[b-7x37b9suyg] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.just-student-chip[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 3px;
    background: #F5F7F9;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 99px;
    font-size: 11px;
    color: #444;
}

.just-student-avatar[b-7x37b9suyg] {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 9px;
    font-weight: 500;
    flex-shrink: 0;
}

.just-chip-close[b-7x37b9suyg] {
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.15s ease;
}

.just-chip-close:hover[b-7x37b9suyg] { background: rgba(163, 45, 45, 0.2); }
.just-chip-close .material-icons[b-7x37b9suyg] { font-size: 10px; color: #888; }
.just-chip-close:hover .material-icons[b-7x37b9suyg] { color: #A32D2D; }

.just-chip-add[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: transparent;
    border: 1px dashed #4BA8AA;
    border-radius: 99px;
    font-size: 11px;
    color: #0F6E56;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.just-chip-add:hover[b-7x37b9suyg] { background: rgba(109, 199, 208, 0.1); }
.just-chip-add .material-icons[b-7x37b9suyg] { font-size: 12px; color: #4BA8AA; }

/* ========================================================================
   CHIPS DE FECHAS
   ======================================================================== */

.just-date-chips[b-7x37b9suyg] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.just-date-chip[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px 4px 10px;
    background: #E6F1FB;
    border: 1px solid #85B7EB;
    border-radius: 99px;
    font-size: 11px;
    color: #0C447C;
    font-weight: 500;
}

.just-date-chip .material-icons:first-child[b-7x37b9suyg] {
    font-size: 11px;
    color: #185FA5;
}

.just-date-duration[b-7x37b9suyg] {
    font-size: 9px;
    color: #185FA5;
    background: rgba(24, 95, 165, 0.1);
    padding: 0 5px;
    border-radius: 99px;
}

.just-date-chip .just-chip-close[b-7x37b9suyg] {
    background: rgba(24, 95, 165, 0.15);
}

.just-date-chip .just-chip-close .material-icons[b-7x37b9suyg] {
    color: #185FA5;
}

/* ========================================================================
   SELECTOR DE FECHAS INLINE (modo Día / Rango + calendario Telerik)
   ======================================================================== */

.just-fecha-divider[b-7x37b9suyg] {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 10px 0;
}

.just-fecha-mode-row[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.just-fecha-mode-label[b-7x37b9suyg] {
    font-size: 10px;
    font-weight: 500;
    color: #888;
    letter-spacing: 0.06em;
}

.just-fecha-mode-chip[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    background: white;
    border: 1px solid #DDD;
    color: #666;
}

.just-fecha-mode-chip:hover[b-7x37b9suyg] {
    border-color: #9FE1CB;
    color: #0F6E56;
}

.just-fecha-mode-chip.active[b-7x37b9suyg] {
    background: #E1F5EE;
    border-color: #1D9E75;
    border-width: 1.5px;
    color: #085041;
}

.just-fecha-mode-chip.active .material-icons[b-7x37b9suyg] {
    color: #1D9E75;
}

.just-fecha-mode-chip .material-icons[b-7x37b9suyg] {
    font-size: 12px;
    color: #888;
}

.just-fecha-calendar[b-7x37b9suyg] {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

[b-7x37b9suyg] .just-fecha-calendar .k-calendar {
    border: none;
    width: 100%;
}

.just-dias-multiple-preview[b-7x37b9suyg] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    padding: 7px;
    background: #F5F7F9;
    border-radius: 7px;
}

.just-dia-pill[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 7px;
    background: #E1F5EE;
    border: 1px solid #9FE1CB;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 500;
    color: #085041;
}

.just-dia-pill > .material-icons[b-7x37b9suyg] {
    font-size: 11px;
    color: #1D9E75;
}

.just-dia-pill button[b-7x37b9suyg] {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(29, 158, 117, 0.18);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    padding: 0;
}

.just-dia-pill button:hover[b-7x37b9suyg] { background: rgba(163, 45, 45, 0.25); }

.just-dia-pill button .material-icons[b-7x37b9suyg] { font-size: 9px; color: #085041; }
.just-dia-pill button:hover .material-icons[b-7x37b9suyg] { color: #A32D2D; }

.just-fecha-hint[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #F5F7F9;
    border-radius: 6px;
    margin-bottom: 8px;
}

.just-fecha-hint .material-icons[b-7x37b9suyg] {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}

.just-fecha-hint span:last-child[b-7x37b9suyg] {
    font-size: 10px;
    color: #666;
    line-height: 1.4;
}

.just-fecha-summary[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    background: #F5F7F9;
    border-radius: 7px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #888;
    font-weight: 500;
    transition: background 0.2s ease;
}

.just-fecha-summary.has-selection[b-7x37b9suyg] {
    background: #E1F5EE;
    color: #0F6E56;
}

.just-fecha-summary .material-icons[b-7x37b9suyg] {
    font-size: 14px;
    color: #BBB;
}

.just-fecha-summary.has-selection .material-icons[b-7x37b9suyg] {
    color: #1D9E75;
}

.just-fecha-add-btn[b-7x37b9suyg] {
    width: 100%;
    padding: 9px 12px;
    background: #4BA8AA;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s ease;
}

.just-fecha-add-btn:hover:not(:disabled)[b-7x37b9suyg] {
    background: #3B8D8F;
}

.just-fecha-add-btn:disabled[b-7x37b9suyg] {
    background: #C5D7D9;
    cursor: not-allowed;
}

.just-fecha-add-btn .material-icons[b-7x37b9suyg] {
    font-size: 14px;
}

/* ========================================================================
   MOTIVO + PLANTILLAS
   ======================================================================== */

.just-textarea[b-7x37b9suyg] {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 7px;
    padding: 9px 11px;
    font-size: 12px;
    color: #444;
    font-family: inherit;
    resize: vertical;
    min-height: 54px;
    outline: none;
    transition: border-color 0.15s ease;
    line-height: 1.5;
    box-sizing: border-box;
}

.just-textarea:focus[b-7x37b9suyg] { border-color: #4BA8AA; }
.just-textarea[b-7x37b9suyg]::placeholder { color: #AAA; }

.just-templates[b-7x37b9suyg] { margin-top: 9px; }

.just-templates-label[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 9px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.just-templates-label .material-icons[b-7x37b9suyg] {
    font-size: 11px;
    color: #7F77DD;
}

.just-templates-chips[b-7x37b9suyg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.just-template-chip[b-7x37b9suyg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 10px;
    background: white;
    border: 1px solid #DDD;
    color: #666;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.just-template-chip:hover[b-7x37b9suyg] {
    border-color: #AFA9EC;
    background: #F9F7FF;
    color: #3C3489;
}

.just-template-chip .material-icons[b-7x37b9suyg] { font-size: 9px; }

/* ========================================================================
   TOGGLES + WHATSAPP PREVIEW
   ======================================================================== */

.just-toggle-row[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    gap: 10px;
}

.just-toggle-row + .just-toggle-row[b-7x37b9suyg] {
    border-top: 0.5px solid rgba(0, 0, 0, 0.05);
    margin-top: 7px;
    padding-top: 10px;
}

.just-toggle-info[b-7x37b9suyg] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.just-toggle-info .material-icons[b-7x37b9suyg] { font-size: 15px; flex-shrink: 0; }

.just-toggle-title[b-7x37b9suyg] { font-size: 11px; color: #444; font-weight: 500; }
.just-toggle-sub[b-7x37b9suyg] { font-size: 9px; color: #888; }

.just-switch[b-7x37b9suyg] {
    position: relative;
    width: 30px;
    height: 17px;
    flex-shrink: 0;
    display: inline-block;
}

.just-switch input[b-7x37b9suyg] {
    opacity: 0;
    width: 0;
    height: 0;
}

.just-slider[b-7x37b9suyg] {
    position: absolute;
    inset: 0;
    background: #CCC;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.just-slider[b-7x37b9suyg]::before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.just-switch input:checked + .just-slider[b-7x37b9suyg] { background: #4BA8AA; }
.just-switch input:checked + .just-slider[b-7x37b9suyg]::before { transform: translateX(13px); }

/* WhatsApp preview */
.just-whatsapp-card[b-7x37b9suyg] {
    margin-top: 10px;
    background: white;
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 9px;
    overflow: hidden;
}

.just-whatsapp-header[b-7x37b9suyg] {
    background: rgba(37, 211, 102, 0.08);
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.just-whatsapp-icon[b-7x37b9suyg] {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0;
}

.just-whatsapp-icon .material-icons[b-7x37b9suyg] {
    font-size: 10px;
    color: white;
}

.just-whatsapp-title-block[b-7x37b9suyg] {
    flex: 1;
    min-width: 0;
}

.just-whatsapp-title[b-7x37b9suyg] {
    font-size: 10px;
    color: #0F7A3B;
    font-weight: 500;
}

.just-whatsapp-sub[b-7x37b9suyg] {
    font-size: 8px;
    color: #5B8F5B;
}

.just-whatsapp-count[b-7x37b9suyg] {
    font-size: 9px;
    color: #25D366;
    font-weight: 500;
}

.just-whatsapp-body[b-7x37b9suyg] {
    padding: 9px 10px;
    background: #F0F4E8;
    font-size: 10px;
    color: #444;
    line-height: 1.6;
}

.just-whatsapp-url[b-7x37b9suyg] {
    color: #888;
    font-size: 8px;
    margin-bottom: 4px;
}

.wa-placeholder[b-7x37b9suyg] { color: #0F7A3B; font-weight: 500; }
.wa-fecha[b-7x37b9suyg] { color: #185FA5; font-weight: 500; }
.wa-motivo[b-7x37b9suyg] { color: #3C3489; font-weight: 500; }

.wa-cita[b-7x37b9suyg] {
    font-style: italic;
    color: #666;
}

.wa-footer[b-7x37b9suyg] {
    color: #888;
    font-size: 8px;
    font-style: italic;
}

.just-whatsapp-footer-note[b-7x37b9suyg] {
    padding: 5px 9px;
    background: #F7F9F5;
    border-top: 0.5px dashed rgba(37, 211, 102, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.just-whatsapp-footer-note .material-icons[b-7x37b9suyg] {
    font-size: 10px;
    color: #888;
}

.just-whatsapp-footer-note span:last-child[b-7x37b9suyg] {
    font-size: 8px;
    color: #888;
}

/* ========================================================================
   BOTONES DE ACCIÓN + TOAST
   ======================================================================== */

.just-actions[b-7x37b9suyg] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.just-btn-secondary[b-7x37b9suyg] {
    flex: 1;
    padding: 12px;
    background: white;
    color: #888;
    border: 1px solid #DDD;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.just-btn-secondary:hover[b-7x37b9suyg] { background: #F5F7F9; }

.just-btn-primary[b-7x37b9suyg] {
    flex: 2;
    padding: 12px;
    background: #0F6E56;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.just-btn-primary:hover:not(:disabled)[b-7x37b9suyg] { background: #0B5543; }
.just-btn-primary:active:not(:disabled)[b-7x37b9suyg] { transform: scale(0.98); }
.just-btn-primary:disabled[b-7x37b9suyg] {
    background: #B5D4C7;
    cursor: not-allowed;
}

.just-btn-primary .material-icons[b-7x37b9suyg] { font-size: 14px; }

.just-spinning[b-7x37b9suyg] { animation: just-spin-b-7x37b9suyg 1s linear infinite; }
@keyframes just-spin-b-7x37b9suyg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.just-toast[b-7x37b9suyg] {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.just-toast .material-icons[b-7x37b9suyg] { font-size: 16px; }
.just-toast-ok[b-7x37b9suyg]    { background: #E1F5EE; color: #0F6E56; }
.just-toast-error[b-7x37b9suyg] { background: #FCEBEB; color: #A32D2D; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 991.98px) {
    .just-grid[b-7x37b9suyg] { grid-template-columns: 1fr; }
    .just-page[b-7x37b9suyg] { padding: 16px; }
}

@media (max-width: 575.98px) {
    .just-page[b-7x37b9suyg] { padding: 12px; }
    .just-title[b-7x37b9suyg] { font-size: 17px; }
    .just-card[b-7x37b9suyg] { padding: 11px 12px; }
    .just-group-chip[b-7x37b9suyg] { font-size: 12px; padding: 6px 11px; }
    .just-grade-badge[b-7x37b9suyg] { width: 18px; height: 18px; font-size: 9px; }
    .just-btn-primary[b-7x37b9suyg] { font-size: 12px; padding: 11px; }
}
/* /Pages/ControlEscolar/Reportes.razor.rz.scp.css */
/* ========================================================================
   REPORTES — PÁGINA DE INCIDENCIAS (chrome v2 + contenido legacy intacto)
   ======================================================================== */

.rep-page[b-sliq7djzce] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ── Chrome v2 ───────────────────────────────────────────────────── */
.rep-bc[b-sliq7djzce] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.rep-bc .material-symbols-rounded[b-sliq7djzce] { font-size: 14px; }
.rep-bc a[b-sliq7djzce] {
    color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    transition: color 0.15s ease;
}
.rep-bc a:hover[b-sliq7djzce] { color: var(--brand-teal-deep); }
.rep-sep[b-sliq7djzce] { color: var(--text-muted); }
.rep-current[b-sliq7djzce] { color: var(--text-primary); font-weight: 600; }

.rep-h[b-sliq7djzce] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px;
}
.rep-h-icon[b-sliq7djzce] {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, #DC2626, #991B1B);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.rep-h-icon .material-symbols-rounded[b-sliq7djzce] { font-size: 26px; }
.rep-h-block[b-sliq7djzce] { flex: 1; min-width: 0; }
.rep-h-title[b-sliq7djzce] {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    line-height: 1.1;
}
.rep-h-sub[b-sliq7djzce] {
    font-size: 13px; color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 575.98px) {
    .rep-page[b-sliq7djzce] { padding: 18px 16px 24px; }
    .rep-h-title[b-sliq7djzce] { font-size: 22px; }
    .rep-h-icon[b-sliq7djzce] { width: 42px; height: 42px; border-radius: 11px; }
    .rep-h-icon .material-symbols-rounded[b-sliq7djzce] { font-size: 22px; }
}

/* ===== Loading ===== */
.rep-loading-state[b-sliq7djzce] {
    display: flex; flex-direction: column; align-items: center;
    padding: 60px 20px; gap: 16px; color: #888; font-size: 14px;
}
.rep-spinner-big[b-sliq7djzce] {
    width: 36px; height: 36px;
    border: 3px solid #F0E8E8; border-top: 3px solid #A32D2D;
    border-radius: 50%; animation: rep-spin-b-sliq7djzce 0.8s linear infinite;
}
.rep-loading-inline[b-sliq7djzce] {
    display: flex; align-items: center; gap: 10px;
    padding: 20px; color: #888; font-size: 12px;
}
.rep-spinner[b-sliq7djzce] {
    width: 18px; height: 18px;
    border: 2px solid #E8F4F8; border-top: 2px solid #4BA8AA;
    border-radius: 50%; animation: rep-spin-b-sliq7djzce 0.8s linear infinite;
}
@keyframes rep-spin-b-sliq7djzce { to { transform: rotate(360deg); } }

/* ===== Grid principal ===== */
.rep-grid[b-sliq7djzce] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: start;
}
.rep-col[b-sliq7djzce] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ===== Card base ===== */
.rep-card[b-sliq7djzce] {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
}
.rep-card-header[b-sliq7djzce] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 8px;
}
.rep-section-label[b-sliq7djzce] {
    font-size: 11px; color: #AAA;
    letter-spacing: 0.08em; font-weight: 500;
}
.rep-section-hint[b-sliq7djzce] { font-size: 11px; color: #888; }
.rep-count-accent[b-sliq7djzce] { color: #0F6E56; margin-left: 6px; font-weight: 500; }

.rep-link-btn[b-sliq7djzce] {
    background: none; border: none;
    color: #4BA8AA; font-size: 11px; font-weight: 500;
    cursor: pointer; padding: 0; font-family: inherit;
}
.rep-link-btn:hover[b-sliq7djzce] { color: #0F6E56; }

.rep-hint-card[b-sliq7djzce] {
    background: #F5F7F9;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #888; font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.rep-hint-card .material-icons[b-sliq7djzce] { font-size: 20px; color: #BBB; }

/* ===== Chips ===== */
.rep-chips[b-sliq7djzce] { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chip[b-sliq7djzce] {
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px;
    background: white;
    border: 1px solid #DDD;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.rep-chip:hover[b-sliq7djzce] { border-color: #4BA8AA; color: #0F6E56; }
.rep-chip.selected[b-sliq7djzce] {
    background: #E8F4F8; border-color: #4BA8AA;
    color: #0F6E56; font-weight: 500;
}
.rep-chip-leve.selected[b-sliq7djzce] {
    background: #FAEEDA; border-color: #BA7517; color: #854F0B;
}

/* ===== Búsqueda ===== */
.rep-search[b-sliq7djzce] {
    display: flex; align-items: center; gap: 6px;
    background: #F5F7F9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 7px;
    padding: 6px 10px;
    margin-bottom: 10px;
}
.rep-search .material-icons[b-sliq7djzce] { font-size: 16px; color: #AAA; }
.rep-search input[b-sliq7djzce] {
    border: none; background: transparent; outline: none;
    font-size: 12px; color: #444;
    flex: 1; min-width: 0; font-family: inherit;
}
.rep-search input[b-sliq7djzce]::placeholder { color: #AAA; }

/* ===== Lista alumnos ===== */
.rep-student-list[b-sliq7djzce] {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 320px; overflow-y: auto;
}
.rep-student-row[b-sliq7djzce] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.rep-student-row:hover[b-sliq7djzce] { background: rgba(109, 199, 208, 0.05); }
.rep-student-row.selected[b-sliq7djzce] { background: rgba(75, 168, 170, 0.08); }

.rep-checkbox[b-sliq7djzce] {
    width: 17px; height: 17px;
    border-radius: 4px;
    border: 1.5px solid #CCC;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.rep-checkbox.checked[b-sliq7djzce] { background: #4BA8AA; border-color: #4BA8AA; }
.rep-checkbox.checked .material-icons[b-sliq7djzce] { font-size: 13px; color: white; }

.rep-avatar[b-sliq7djzce] {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #E8F4F8; color: #4BA8AA;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 500; flex-shrink: 0;
}
.rep-student-name[b-sliq7djzce] {
    font-size: 12px; color: #444; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-student-row.selected .rep-student-name[b-sliq7djzce] { font-weight: 500; }

.rep-empty[b-sliq7djzce] {
    text-align: center; padding: 20px; color: #AAA; font-size: 12px;
}

/* ===== Faltas blocks ===== */
.rep-falta-block[b-sliq7djzce] { margin-bottom: 14px; }
.rep-falta-block:last-child[b-sliq7djzce] { margin-bottom: 0; }
.rep-falta-header[b-sliq7djzce] {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.rep-falta-header .material-icons[b-sliq7djzce] { font-size: 14px; }
.falta-icon-leve[b-sliq7djzce]  { color: #BA7517; }
.falta-icon-mod[b-sliq7djzce]   { color: #D85A30; }
.falta-icon-grave[b-sliq7djzce] { color: #A32D2D; }

.rep-falta-title[b-sliq7djzce] { font-size: 12px; color: #444; font-weight: 500; }
.rep-falta-hint[b-sliq7djzce]  { font-size: 10px; color: #888; margin-left: auto; }
.rep-badge-count[b-sliq7djzce] {
    font-size: 10px; color: #0F6E56;
    background: #E1F5EE;
    padding: 2px 7px; border-radius: 99px; font-weight: 500;
}

/* ===== Select ===== */
.rep-select[b-sliq7djzce] {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}
.rep-select:hover[b-sliq7djzce],
.rep-select:focus[b-sliq7djzce] { border-color: #4BA8AA; }

.rep-select-grave[b-sliq7djzce] {
    background: #FCEBEB;
    border-color: rgba(163, 45, 45, 0.2);
    color: #A32D2D;
    font-weight: 500;
}
.rep-select-grave:hover[b-sliq7djzce],
.rep-select-grave:focus[b-sliq7djzce] { border-color: #A32D2D; }

/* ===== Textarea ===== */
.rep-textarea[b-sliq7djzce] {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 13px;
    color: #444;
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
    outline: none;
    transition: border-color 0.15s ease;
    line-height: 1.5;
    box-sizing: border-box;
}
.rep-textarea:focus[b-sliq7djzce] { border-color: #4BA8AA; }
.rep-textarea[b-sliq7djzce]::placeholder { color: #AAA; }

.rep-char-count[b-sliq7djzce] {
    font-size: 10px; color: #AAA;
    text-align: right; margin-top: 4px;
}

/* ===== Toggles ===== */
.rep-toggle-row[b-sliq7djzce] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; gap: 10px;
}
.rep-toggle-row + .rep-toggle-row[b-sliq7djzce] {
    border-top: 0.5px solid rgba(0, 0, 0, 0.05);
    margin-top: 4px; padding-top: 10px;
}
.rep-toggle-info[b-sliq7djzce] {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0;
}
.rep-toggle-info .material-icons[b-sliq7djzce] { font-size: 18px; flex-shrink: 0; }
.toggle-icon-comunidad[b-sliq7djzce] { color: #4BA8AA; }
.toggle-icon-fam[b-sliq7djzce]       { color: #993556; }

.rep-toggle-title[b-sliq7djzce] { font-size: 13px; color: #444; font-weight: 500; }
.rep-toggle-sub[b-sliq7djzce]   { font-size: 10px; color: #888; }

.rep-switch[b-sliq7djzce] {
    position: relative; display: inline-block;
    width: 38px; height: 22px; flex-shrink: 0;
}
.rep-switch input[b-sliq7djzce] { opacity: 0; width: 0; height: 0; }
.rep-slider[b-sliq7djzce] {
    position: absolute; cursor: pointer; inset: 0;
    background: #CCC; border-radius: 99px;
    transition: background 0.2s ease;
}
.rep-slider[b-sliq7djzce]::before {
    content: "";
    position: absolute;
    width: 17px; height: 17px;
    left: 2.5px; top: 2.5px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.rep-switch input:checked + .rep-slider[b-sliq7djzce] { background: #4BA8AA; }
.rep-switch input:checked + .rep-slider[b-sliq7djzce]::before { transform: translateX(16px); }

/* ===== WhatsApp indicator ===== */
.rep-whatsapp-card[b-sliq7djzce] {
    margin-top: 12px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(37, 211, 102, 0.08), rgba(37, 211, 102, 0.03));
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: 9px;
    display: flex; align-items: center; gap: 10px;
}
.rep-whatsapp-icon[b-sliq7djzce] {
    width: 26px; height: 26px; border-radius: 50%;
    background: #25D366;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rep-whatsapp-icon .material-icons[b-sliq7djzce] { font-size: 15px; color: white; }

.rep-whatsapp-text[b-sliq7djzce] { flex: 1; min-width: 0; }
.rep-whatsapp-title[b-sliq7djzce] { font-size: 12px; color: #0F7A3B; font-weight: 500; }
.rep-whatsapp-sub[b-sliq7djzce]   { font-size: 10px; color: #5B8F5B; }
.rep-whatsapp-check[b-sliq7djzce] { font-size: 17px !important; color: #25D366; }

/* ===== Submit ===== */
.rep-submit[b-sliq7djzce] {
    background: #A32D2D; color: white;
    border: none;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}
.rep-submit:hover:not(:disabled)[b-sliq7djzce] { background: #8B2525; }
.rep-submit:active:not(:disabled)[b-sliq7djzce] { transform: scale(0.98); }
.rep-submit:disabled[b-sliq7djzce] { background: #D8B4B4; cursor: not-allowed; }
.rep-submit .material-icons[b-sliq7djzce] { font-size: 18px; }

.rep-spinning[b-sliq7djzce] { animation: rep-spin-b-sliq7djzce 1s linear infinite; }

/* ===== Toast ===== */
.rep-toast[b-sliq7djzce] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 12px; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
}
.rep-toast .material-icons[b-sliq7djzce] { font-size: 16px; }
.rep-toast-ok[b-sliq7djzce] {
    background: rgba(75, 168, 170, 0.1);
    color: #0F6E56;
    border: 1px solid rgba(75, 168, 170, 0.3);
}
.rep-toast-error[b-sliq7djzce] {
    background: rgba(163, 45, 45, 0.08);
    color: #A32D2D;
    border: 1px solid rgba(163, 45, 45, 0.3);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 991.98px) {
    .rep-grid[b-sliq7djzce] { grid-template-columns: 1fr; }
    .rep-page[b-sliq7djzce] { padding: 16px; }
}
@media (max-width: 575.98px) {
    .rep-page[b-sliq7djzce] { padding: 12px; }
    .rep-title[b-sliq7djzce] { font-size: 17px; }
    .rep-header[b-sliq7djzce] {
        flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .rep-card[b-sliq7djzce] { padding: 12px 14px; }
    .rep-chip[b-sliq7djzce] { font-size: 11px; padding: 5px 10px; }
    .rep-student-list[b-sliq7djzce] { max-height: 260px; }
    .rep-submit[b-sliq7djzce] {
        font-size: 13px; padding: 12px;
        position: sticky; bottom: 10px; z-index: 10;
        box-shadow: 0 4px 12px rgba(163, 45, 45, 0.25);
    }
}

/* ============================================================
   FILTRO DE GRUPO — CHIPS POR GRADO (Fase 2)
   ============================================================ */
.rep-group-label[b-sliq7djzce] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rep-group-icon[b-sliq7djzce] {
    font-size: 16px !important;
    color: #4BA8AA;
}
.rep-section-title[b-sliq7djzce] {
    font-size: 13px;
    font-weight: 500;
    color: #444;
}
.rep-count-badge[b-sliq7djzce] {
    font-size: 11px;
    color: #0F6E56;
    background: #E1F5EE;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 500;
}
.rep-group-chips[b-sliq7djzce] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
.rep-group-chip[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 99px;
    border: 1px solid;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.rep-group-chip:hover[b-sliq7djzce] { transform: translateY(-1px); }
.rep-group-chip.active[b-sliq7djzce] {
    border-width: 1.5px;
    font-weight: 500;
}
.rep-grade-badge[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}
.rep-grade-badge-sm[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}

/* ============================================================
   MULTI-GRUPO — Stack con mini-header por grupo
   ============================================================ */
.rep-groups-stack[b-sliq7djzce] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}
.rep-group-section[b-sliq7djzce] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rep-group-separator[b-sliq7djzce] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rep-group-sep-label[b-sliq7djzce] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.rep-group-sep-line[b-sliq7djzce] {
    flex: 1;
    height: 1px;
    margin-left: 3px;
    opacity: 0.18;
}

/* ============================================================
   CHIPS DE ALUMNOS (× para quitar, + para agregar)
   ============================================================ */
.rep-student-chips[b-sliq7djzce] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.rep-student-chip[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px 4px 4px;
    background: #F5F7F9;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 99px;
    font-size: 12px;
    color: #444;
}
.rep-student-avatar[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 500;
    flex-shrink: 0;
}
.rep-chip-close[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}
.rep-chip-close:hover[b-sliq7djzce] { background: rgba(163, 45, 45, 0.2); }
.rep-chip-close .material-icons[b-sliq7djzce] { font-size: 11px; color: #888; }
.rep-chip-close:hover .material-icons[b-sliq7djzce] { color: #A32D2D; }
.rep-chip-add[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    background: transparent;
    border: 1px dashed #4BA8AA;
    border-radius: 99px;
    color: #0F6E56;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.rep-chip-add:hover[b-sliq7djzce] { background: rgba(109, 199, 208, 0.1); }
.rep-chip-add .material-icons[b-sliq7djzce] { font-size: 14px; color: #4BA8AA; }

/* ============================================================
   POPUP — DIALOG DE SELECCIÓN DE ALUMNOS
   ============================================================ */
.rep-dialog-backdrop[b-sliq7djzce] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.rep-dialog[b-sliq7djzce] {
    background: #FFFFFF;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.rep-dialog-header[b-sliq7djzce] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}
.rep-dialog-title[b-sliq7djzce] {
    font-size: 15px;
    font-weight: 500;
    color: #444;
    margin-bottom: 4px;
}
.rep-dialog-subtitle[b-sliq7djzce] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
}
.rep-dialog-close[b-sliq7djzce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F5F7F9;
    border: none;
    cursor: pointer;
}
.rep-dialog-close .material-icons[b-sliq7djzce] { font-size: 15px; color: #888; }
.rep-search-bar[b-sliq7djzce] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F5F7F9;
    border-radius: 10px;
    margin-bottom: 10px;
}
.rep-search-bar .material-icons[b-sliq7djzce] { font-size: 16px; color: #888; }
.rep-search-bar input[b-sliq7djzce] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #444;
    font-family: inherit;
}
.rep-student-list-dialog[b-sliq7djzce] {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
    margin-bottom: 12px;
}
.rep-dialog-footer[b-sliq7djzce] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.rep-btn-secondary[b-sliq7djzce] {
    padding: 9px 16px;
    background: #FFFFFF;
    border: 1px solid #DDD;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.rep-btn-secondary:hover[b-sliq7djzce] { background: #F9F9F9; }
.rep-btn-primary[b-sliq7djzce] {
    padding: 9px 16px;
    background: #4BA8AA;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.rep-btn-primary:hover[b-sliq7djzce] { background: #3E9497; }

/* ============================================================
   RESPONSIVE — chips por grado
   ============================================================ */
@media (max-width: 575.98px) {
    .rep-group-chip[b-sliq7djzce] {
        font-size: 12px;
        padding: 6px 11px;
    }
    .rep-grade-badge[b-sliq7djzce] {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    .rep-group-chips[b-sliq7djzce] { gap: 5px; }
}
/* /Pages/ControlEscolar/VisorReportes.razor.rz.scp.css */
/* ========================================================================
   VISOR DE REPORTES — PÁGINA (chrome v2 + contenido legacy intacto)
   ======================================================================== */

.vr-page[b-m1zk5ut3an] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ── Chrome v2 ───────────────────────────────────────────────────── */
.vr-bc[b-m1zk5ut3an] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.vr-bc .material-symbols-rounded[b-m1zk5ut3an] { font-size: 14px; }
.vr-bc a[b-m1zk5ut3an] {
    color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    transition: color 0.15s ease;
}
.vr-bc a:hover[b-m1zk5ut3an] { color: var(--brand-teal-deep); }
.vr-sep[b-m1zk5ut3an] { color: var(--text-muted); }
.vr-current[b-m1zk5ut3an] { color: var(--text-primary); font-weight: 600; }

.vr-h[b-m1zk5ut3an] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px; flex-wrap: wrap;
}
.vr-h-icon[b-m1zk5ut3an] {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, #0EA5E9, #0369A1);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}
.vr-h-icon .material-symbols-rounded[b-m1zk5ut3an] { font-size: 26px; }
.vr-h-block[b-m1zk5ut3an] { flex: 1; min-width: 0; }
.vr-h-title[b-m1zk5ut3an] {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    line-height: 1.1;
}
.vr-h-sub[b-m1zk5ut3an] {
    font-size: 13px; color: var(--text-secondary);
    margin: 0;
}

.vr-h-actions[b-m1zk5ut3an] { display: flex; gap: 6px; align-items: center; }

.vr-btn-export[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.vr-btn-export:not(:disabled):hover[b-m1zk5ut3an] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.vr-btn-export:disabled[b-m1zk5ut3an] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vr-btn-export .material-symbols-rounded[b-m1zk5ut3an] { font-size: 16px; }

@media (max-width: 575.98px) {
    .vr-page[b-m1zk5ut3an] { padding: 18px 16px 24px; }
    .vr-h-title[b-m1zk5ut3an] { font-size: 22px; }
    .vr-h-icon[b-m1zk5ut3an] { width: 42px; height: 42px; border-radius: 11px; }
    .vr-h-icon .material-symbols-rounded[b-m1zk5ut3an] { font-size: 22px; }
}

/* ========================================================================
   CARD BASE / FILTROS
   ======================================================================== */

.vr-card[b-m1zk5ut3an] {
    background: white;
    border-radius: 11px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.vr-filters-card[b-m1zk5ut3an] { padding: 12px 14px; }

.vr-filters-row[b-m1zk5ut3an] {
    display: flex;
    gap: 8px;
    margin-bottom: 9px;
    align-items: stretch;
}

.vr-search[b-m1zk5ut3an] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F5F7F9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 7px;
    padding: 6px 10px;
}

.vr-search .material-icons[b-m1zk5ut3an] { font-size: 14px; color: #AAA; }

.vr-search input[b-m1zk5ut3an] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: #444;
    font-family: inherit;
    min-width: 0;
}

.vr-search input[b-m1zk5ut3an]::placeholder { color: #AAA; }

.vr-search-clear[b-m1zk5ut3an] {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    padding: 0;
}

.vr-search-clear .material-icons[b-m1zk5ut3an] { font-size: 11px; color: #888; }

.vr-btn-filters[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #DDD;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    font-family: inherit;
}

.vr-btn-filters:hover[b-m1zk5ut3an] { background: #F5F7F9; }
.vr-btn-filters.active[b-m1zk5ut3an] { background: #E1F5EE; border-color: #0F6E56; color: #0F6E56; }
.vr-btn-filters .material-icons[b-m1zk5ut3an] { font-size: 14px; }

.vr-filters-badge[b-m1zk5ut3an] {
    background: #0F6E56;
    color: white;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 99px;
    font-weight: 500;
}

.vr-group-chips-row[b-m1zk5ut3an] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.vr-filter-label[b-m1zk5ut3an] {
    font-size: 10px;
    font-weight: 500;
    color: #888;
    letter-spacing: 0.06em;
}

.vr-group-chip[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 99px;
    border: 1px solid #DDD;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.1s ease;
    font-family: inherit;
    background: white;
    color: #666;
}

.vr-group-chip:hover[b-m1zk5ut3an] { transform: translateY(-1px); }

.vr-group-chip.active[b-m1zk5ut3an] { border-width: 1.5px; font-weight: 500; }

.vr-group-chip.active-generic[b-m1zk5ut3an] {
    background: #E1F5EE;
    border-color: #0F6E56;
    color: #0F6E56;
    font-weight: 500;
}

.vr-grade-badge[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 500;
    flex-shrink: 0;
}

.vr-grade-badge-sm[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 500;
    flex-shrink: 0;
}

.vr-more-link[b-m1zk5ut3an] {
    background: transparent;
    border: none;
    color: #4BA8AA;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.vr-advanced-filters[b-m1zk5ut3an] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px dashed rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.vr-filter-group[b-m1zk5ut3an] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

.vr-filter-group label[b-m1zk5ut3an] {
    font-size: 10px;
    font-weight: 500;
    color: #888;
    letter-spacing: 0.06em;
}

.vr-filter-group select[b-m1zk5ut3an],
.vr-filter-group input[type="date"][b-m1zk5ut3an] {
    padding: 6px 9px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-size: 12px;
    color: #444;
    font-family: inherit;
    background: white;
    outline: none;
}

.vr-date-presets[b-m1zk5ut3an] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.vr-preset[b-m1zk5ut3an] {
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid #DDD;
    background: white;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.vr-preset:hover[b-m1zk5ut3an] { border-color: #9FE1CB; color: #0F6E56; }
.vr-preset.active[b-m1zk5ut3an] { background: #E1F5EE; border-color: #1D9E75; color: #085041; }

.vr-date-range-inputs[b-m1zk5ut3an] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.vr-btn-apply[b-m1zk5ut3an] {
    padding: 5px 11px;
    background: #0F6E56;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.vr-active-filters[b-m1zk5ut3an] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px dashed rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.vr-active-chip[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 9px;
    border: 1px solid;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
}

.vr-active-chip .material-icons[b-m1zk5ut3an] { font-size: 11px; }

.vr-active-chip button[b-m1zk5ut3an] {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    padding: 0;
    margin-left: 2px;
}

.vr-active-chip button .material-icons[b-m1zk5ut3an] { font-size: 9px; color: inherit; }
.vr-active-chip button:hover[b-m1zk5ut3an] { background: rgba(163, 45, 45, 0.25); }

.vr-chip-grupo[b-m1zk5ut3an]    { background: #EEEDFE; border-color: #AFA9EC; color: #3C3489; }
.vr-chip-docente[b-m1zk5ut3an]  { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; }
.vr-chip-fecha[b-m1zk5ut3an]    { background: #FAEEDA; border-color: #FAC775; color: #854F0B; }
.vr-chip-busqueda[b-m1zk5ut3an] { background: #F1EFE8; border-color: #D3D1C7; color: #444441; }

.vr-clear-all[b-m1zk5ut3an] {
    background: transparent;
    border: none;
    color: #A32D2D;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin-left: auto;
}

.vr-clear-all:hover[b-m1zk5ut3an] { text-decoration: underline; }

/* ========================================================================
   ESTADOS LOADING / EMPTY
   ======================================================================== */

.vr-loading[b-m1zk5ut3an] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: #888;
    font-size: 13px;
}

.vr-loading .material-icons[b-m1zk5ut3an] { font-size: 18px; }

.vr-spinning[b-m1zk5ut3an] { animation: vr-spin-b-m1zk5ut3an 1s linear infinite; }
@keyframes vr-spin-b-m1zk5ut3an {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.vr-empty-state[b-m1zk5ut3an] {
    text-align: center;
    padding: 50px 20px;
    color: #888;
    background: white;
    border-radius: 11px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
}

.vr-empty-state .material-icons[b-m1zk5ut3an] {
    font-size: 48px;
    color: #BBB;
    margin-bottom: 8px;
}

.vr-empty-state h3[b-m1zk5ut3an] { font-size: 15px; color: #444; margin: 0 0 4px; }
.vr-empty-state p[b-m1zk5ut3an] { font-size: 12px; margin: 0; }

.vr-link-btn[b-m1zk5ut3an] {
    background: transparent;
    border: none;
    color: #0F6E56;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
}

/* ========================================================================
   TABLA DESKTOP
   ======================================================================== */

.vr-table-wrapper[b-m1zk5ut3an] { margin-bottom: 12px; }

.vr-table[b-m1zk5ut3an] {
    background: white;
    border-radius: 11px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.vr-table-header[b-m1zk5ut3an],
.vr-table-row[b-m1zk5ut3an] {
    display: grid;
    grid-template-columns: 90px 1.6fr 110px 1.4fr 1.8fr 1fr 100px;
    gap: 10px;
    padding: 10px 14px;
    align-items: center;
}

.vr-table-header[b-m1zk5ut3an] {
    background: #F9F9F9;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    font-size: 10px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vr-table-row[b-m1zk5ut3an] {
    font-size: 12px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}

.vr-table-row:nth-child(even)[b-m1zk5ut3an] { background: #FAFBFC; }
.vr-table-row:hover[b-m1zk5ut3an] { background: rgba(109, 199, 208, 0.05); }
.vr-table-row:last-child[b-m1zk5ut3an] { border-bottom: none; }

.vr-cell-fecha .vr-fecha-hoy[b-m1zk5ut3an] {
    color: #0F6E56;
    font-weight: 500;
}

.vr-cell-fecha .vr-fecha-normal[b-m1zk5ut3an] { color: #444; }
.vr-hora[b-m1zk5ut3an] { font-size: 10px; color: #888; }

.vr-cell-alumno[b-m1zk5ut3an] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.vr-avatar[b-m1zk5ut3an] {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}

.vr-nombre-truncate[b-m1zk5ut3an] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vr-group-pill[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 500;
}

.vr-incidencias-pill[b-m1zk5ut3an] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid;
}

.vr-incidencias-pill.leve[b-m1zk5ut3an] {
    background: #FAEEDA;
    border-color: #FAC775;
    color: #854F0B;
}

.vr-incidencias-pill.grave[b-m1zk5ut3an] {
    background: #FCEBEB;
    border-color: #F0B5B5;
    color: #A32D2D;
}

.vr-incidencias-pill .material-icons[b-m1zk5ut3an] { font-size: 11px; }

.vr-descripcion-cell[b-m1zk5ut3an] {
    color: #666;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vr-docente-cell[b-m1zk5ut3an] {
    color: #666;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vr-actions-col[b-m1zk5ut3an],
.vr-actions-cell[b-m1zk5ut3an] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.vr-action-btn[b-m1zk5ut3an] {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid #DDD;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.vr-action-btn .material-icons[b-m1zk5ut3an] { font-size: 14px; }

.vr-action-btn.edit[b-m1zk5ut3an] { color: #4BA8AA; }
.vr-action-btn.edit:hover[b-m1zk5ut3an] { background: #E1F5EE; border-color: #4BA8AA; }

.vr-action-btn.delete[b-m1zk5ut3an] { color: #A32D2D; }
.vr-action-btn.delete:hover[b-m1zk5ut3an] { background: #FCEBEB; border-color: #A32D2D; }

/* ========================================================================
   CARDS MÓVIL
   ======================================================================== */

.vr-cards-wrapper[b-m1zk5ut3an] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.vr-card-reporte[b-m1zk5ut3an] {
    background: white;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 11px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-card-main[b-m1zk5ut3an] { display: flex; gap: 10px; }

.vr-avatar-lg[b-m1zk5ut3an] {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.vr-card-content[b-m1zk5ut3an] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vr-card-top[b-m1zk5ut3an] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
}

.vr-card-alumno[b-m1zk5ut3an] {
    font-size: 13px;
    font-weight: 500;
    color: #444;
}

.vr-card-meta[b-m1zk5ut3an] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #666;
}

.vr-dot[b-m1zk5ut3an] { color: #BBB; }

.vr-card-descripcion[b-m1zk5ut3an] {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    margin-top: 2px;
}

.vr-card-actions[b-m1zk5ut3an] {
    display: flex;
    gap: 6px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    padding-top: 8px;
}

.vr-card-action[b-m1zk5ut3an] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    border: 1px solid #DDD;
    border-radius: 7px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.vr-card-action .material-icons[b-m1zk5ut3an] { font-size: 14px; }
.vr-card-action.edit[b-m1zk5ut3an]   { color: #4BA8AA; }
.vr-card-action.edit:hover[b-m1zk5ut3an] { background: #E1F5EE; }
.vr-card-action.delete[b-m1zk5ut3an] { color: #A32D2D; }
.vr-card-action.delete:hover[b-m1zk5ut3an] { background: #FCEBEB; }

/* ========================================================================
   PAGINACIÓN
   ======================================================================== */

.vr-pagination[b-m1zk5ut3an] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: white;
    border-radius: 11px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.vr-page-size[b-m1zk5ut3an] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
}

.vr-page-size select[b-m1zk5ut3an] {
    padding: 4px 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    font-size: 11px;
    color: #444;
    font-family: inherit;
    background: white;
    outline: none;
}

.vr-page-nav[b-m1zk5ut3an] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.vr-page-nav button[b-m1zk5ut3an] {
    min-width: 28px; height: 28px;
    border: 1px solid #DDD;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
}

.vr-page-nav button .material-icons[b-m1zk5ut3an] { font-size: 14px; }
.vr-page-nav button:hover:not(:disabled)[b-m1zk5ut3an] { background: #F5F7F9; }
.vr-page-nav button:disabled[b-m1zk5ut3an] { opacity: 0.4; cursor: not-allowed; }

.vr-page-nav button.active[b-m1zk5ut3an] {
    background: #0F6E56;
    border-color: #0F6E56;
    color: white;
}

.vr-page-ellipsis[b-m1zk5ut3an] { color: #BBB; padding: 0 4px; }

/* ========================================================================
   CONFIRMAR ELIMINAR + TOAST
   ======================================================================== */

.vr-overlay[b-m1zk5ut3an] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vr-confirm-dialog[b-m1zk5ut3an] {
    background: white;
    border-radius: 14px;
    padding: 22px 20px 16px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.vr-confirm-icon[b-m1zk5ut3an] {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #FCEBEB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.vr-confirm-icon .material-icons[b-m1zk5ut3an] {
    font-size: 28px;
    color: #A32D2D;
}

.vr-confirm-dialog h3[b-m1zk5ut3an] {
    font-size: 15px;
    color: #444;
    margin: 0 0 6px;
}

.vr-confirm-dialog p[b-m1zk5ut3an] {
    font-size: 12px;
    color: #888;
    margin: 0 0 16px;
    line-height: 1.5;
}

.vr-confirm-actions[b-m1zk5ut3an] {
    display: flex;
    gap: 8px;
}

.vr-btn-secondary[b-m1zk5ut3an],
.vr-btn-danger[b-m1zk5ut3an] {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.vr-btn-secondary[b-m1zk5ut3an] {
    background: white;
    color: #888;
    border: 1px solid #DDD;
}

.vr-btn-secondary:hover[b-m1zk5ut3an] { background: #F5F7F9; }

.vr-btn-danger[b-m1zk5ut3an] {
    background: #A32D2D;
    color: white;
    border: none;
}

.vr-btn-danger:hover:not(:disabled)[b-m1zk5ut3an] { background: #862525; }
.vr-btn-danger:disabled[b-m1zk5ut3an] { background: #D38C8C; cursor: not-allowed; }
.vr-btn-danger .material-icons[b-m1zk5ut3an] { font-size: 14px; }

.vr-toast[b-m1zk5ut3an] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100;
}

.vr-toast .material-icons[b-m1zk5ut3an] { font-size: 16px; }
.vr-toast-ok[b-m1zk5ut3an]    { background: #E1F5EE; color: #0F6E56; }
.vr-toast-error[b-m1zk5ut3an] { background: #FCEBEB; color: #A32D2D; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (min-width: 992px) {
    .vr-desktop-only[b-m1zk5ut3an] { display: block; }
    .vr-mobile-only[b-m1zk5ut3an]  { display: none; }
}

@media (max-width: 991.98px) {
    .vr-desktop-only[b-m1zk5ut3an] { display: none; }
    .vr-mobile-only[b-m1zk5ut3an]  { display: flex; flex-direction: column; }
    .vr-page[b-m1zk5ut3an] { padding: 16px; }
}

@media (max-width: 575.98px) {
    .vr-page[b-m1zk5ut3an] { padding: 12px; }
    .vr-title[b-m1zk5ut3an] { font-size: 17px; }
    .vr-pagination[b-m1zk5ut3an] { flex-direction: column; align-items: stretch; }
    .vr-page-nav[b-m1zk5ut3an] { justify-content: center; }
    .vr-toast[b-m1zk5ut3an] { left: 12px; right: 12px; }
}
/* /Pages/EditarAlumnos.razor.rz.scp.css */
/* === Editar Alumnos · v2 wrapper (Fase D) === */
.ea-container[b-e4wb20k277] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.ea-bc[b-e4wb20k277] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.ea-bc .material-symbols-rounded[b-e4wb20k277] { font-size: 14px !important; }
.ea-bc a[b-e4wb20k277] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.ea-bc a:hover[b-e4wb20k277] { color: var(--brand-teal-deep); }
.ea-sep[b-e4wb20k277] { color: var(--text-muted); }
.ea-clase[b-e4wb20k277] { color: var(--text-secondary); font-weight: 500; }
.ea-current[b-e4wb20k277] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.ea-h[b-e4wb20k277] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
}
.ea-h-icon[b-e4wb20k277] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.ea-h-icon .material-symbols-rounded[b-e4wb20k277] { font-size: 24px !important; }
.ea-h-block[b-e4wb20k277] { flex: 1; min-width: 0; }
.ea-h-title[b-e4wb20k277] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.ea-h-sub[b-e4wb20k277] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }
.ea-sub-info[b-e4wb20k277] { font-size: 12px; color: #888; margin-bottom: 14px; display: flex; gap: 12px; }
.ea-count-active[b-e4wb20k277] { font-weight: 500; color: #4BA8AA; }
.ea-count-baja[b-e4wb20k277] { font-weight: 500; color: #E24B4A; }

/* Pills */
.class-pills[b-e4wb20k277] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-e4wb20k277] { padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s; }
.pill:hover[b-e4wb20k277] { border-color: #4BA8AA; color: #4BA8AA; }
.pill.active[b-e4wb20k277] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Loading */
.loading-state[b-e4wb20k277] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-e4wb20k277] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-e4wb20k277] { transform: rotate(360deg); } }

/* Toolbar */
.ea-toolbar[b-e4wb20k277] { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ea-search[b-e4wb20k277] { display: flex; align-items: center; gap: 5px; border: 1px solid #ddd; border-radius: 8px; padding: 6px 10px; flex: 1; max-width: 260px; }
.ea-search input[b-e4wb20k277] { border: none; outline: none; font-size: 12px; width: 100%; background: transparent; font-family: inherit; }
.ea-btn[b-e4wb20k277] { display: flex; align-items: center; gap: 4px; border: 1px solid #ddd; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; background: #fff; color: #666; transition: all 0.12s; font-family: inherit; }
.ea-btn:hover[b-e4wb20k277] { border-color: #4BA8AA; color: #4BA8AA; }
.ea-btn .material-icons[b-e4wb20k277] { font-size: 14px; }
.ea-filter-tabs[b-e4wb20k277] { display: flex; gap: 4px; margin-left: auto; }
.ea-ftab[b-e4wb20k277] { padding: 5px 12px; border-radius: 6px; font-size: 11px; border: 1px solid #ddd; cursor: pointer; background: transparent; color: #888; transition: all 0.12s; font-family: inherit; }
.ea-ftab:hover[b-e4wb20k277] { border-color: #4BA8AA; color: #4BA8AA; }
.ea-ftab.active[b-e4wb20k277] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Layout */
.ea-layout[b-e4wb20k277] { display: flex; gap: 0; align-items: stretch; min-height: 500px; }
.ea-list-col[b-e4wb20k277] { flex: 1; min-width: 0; transition: all 0.25s; }
.ea-empty[b-e4wb20k277] { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 8px; color: #ccc; font-size: 13px; }

/* Letter separator */
.ea-letter-sep[b-e4wb20k277] { display: flex; align-items: center; gap: 8px; padding: 4px 0; margin-top: 10px; }
.ea-letter-sep:first-child[b-e4wb20k277] { margin-top: 0; }
.ea-letter[b-e4wb20k277] { font-size: 14px; font-weight: 500; color: #4BA8AA; min-width: 16px; }
.ea-letter-line[b-e4wb20k277] { flex: 1; height: 1.5px; background: #4BA8AA; border-radius: 1px; }

/* Student row */
.ea-al-row[b-e4wb20k277] { display: flex; align-items: center; padding: 10px 14px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 6px; transition: all 0.12s; gap: 10px; cursor: pointer; }
.ea-al-row:hover[b-e4wb20k277] { border-color: #4BA8AA; background: rgba(75,168,170,0.03); }
.ea-al-row.selected[b-e4wb20k277] { border-color: #4BA8AA; background: #E8F4F8; }
.ea-al-row.baja[b-e4wb20k277] { opacity: 0.5; }
.ea-avatar[b-e4wb20k277] { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #888; flex-shrink: 0; }
.ea-al-info[b-e4wb20k277] { flex: 1; min-width: 0; }
.ea-al-name[b-e4wb20k277] { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-al-phone[b-e4wb20k277] { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 3px; }
.ea-al-status[b-e4wb20k277] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ea-al-status.on[b-e4wb20k277] { background: #639922; }
.ea-al-status.off[b-e4wb20k277] { background: #E24B4A; }
.ea-al-edit[b-e4wb20k277] { border: none; background: transparent; cursor: pointer; color: #ccc; padding: 4px; }
.ea-al-edit:hover[b-e4wb20k277] { color: #4BA8AA; }
.ea-al-edit .material-icons[b-e4wb20k277] { font-size: 16px; }

/* Baja section */
.ea-baja-section[b-e4wb20k277] { margin-top: 14px; padding: 10px; background: #f9f9f9; border-radius: 8px; }
.ea-baja-title[b-e4wb20k277] { font-size: 12px; font-weight: 500; color: #888; margin-bottom: 6px; }
.ea-baja-row[b-e4wb20k277] { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 12px; cursor: pointer; color: #666; }
.ea-baja-row:hover[b-e4wb20k277] { color: #4BA8AA; }

/* Side panel */
.ea-panel[b-e4wb20k277] { width: 360px; flex-shrink: 0; border-left: 1px solid #e0e0e0; background: #fff; padding: 20px; overflow-y: auto; max-height: 80vh; position: sticky; top: 0; }
.ea-panel-header[b-e4wb20k277] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ea-panel-title[b-e4wb20k277] { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.ea-panel-title .material-icons[b-e4wb20k277] { font-size: 18px; color: #4BA8AA; }
.ea-panel-close[b-e4wb20k277] { border: none; background: transparent; cursor: pointer; color: #aaa; padding: 2px; }
.ea-panel-close:hover[b-e4wb20k277] { color: #E24B4A; }
.ea-panel-avatar[b-e4wb20k277] { width: 56px; height: 56px; border-radius: 50%; background: #E8F4F8; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: #3A8E90; margin: 0 auto 14px; }

/* Panel form */
.ea-fg[b-e4wb20k277] { margin-bottom: 12px; }
.ea-fl[b-e4wb20k277] { font-size: 11px; font-weight: 500; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; display: block; }
.ea-fi[b-e4wb20k277] { width: 100%; padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; color: #333; font-family: inherit; box-sizing: border-box; }
.ea-fi:focus[b-e4wb20k277] { outline: none; border-color: #4BA8AA; }
.ea-fsel[b-e4wb20k277] { width: 100%; padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.ea-frow[b-e4wb20k277] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Toggle */
.ea-toggle-row[b-e4wb20k277] { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 12px; }
.ea-toggle-label[b-e4wb20k277] { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.ea-toggle[b-e4wb20k277] { width: 36px; height: 20px; border-radius: 10px; background: #ccc; position: relative; cursor: pointer; transition: background 0.2s; }
.ea-toggle.on[b-e4wb20k277] { background: #4BA8AA; }
.ea-toggle[b-e4wb20k277]::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left 0.2s; }
.ea-toggle.on[b-e4wb20k277]::after { left: 18px; }

/* Section divider */
.ea-sec-divider[b-e4wb20k277] { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; }
.ea-sec-line[b-e4wb20k277] { flex: 1; height: 0.5px; background: #ddd; }
.ea-sec-text[b-e4wb20k277] { font-size: 11px; font-weight: 500; color: #4BA8AA; white-space: nowrap; }

/* Buttons */
.ea-save-btn[b-e4wb20k277] { width: 100%; padding: 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; background: #6EC6C8; color: #fff; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; transition: background 0.15s; font-family: inherit; }
.ea-save-btn:hover[b-e4wb20k277] { background: #4BA8AA; }
.ea-save-btn:disabled[b-e4wb20k277] { opacity: 0.6; cursor: not-allowed; }
.ea-danger-btn[b-e4wb20k277] { width: 100%; padding: 8px; border: 1px solid #F7C1C1; border-radius: 8px; font-size: 12px; cursor: pointer; background: transparent; color: #A32D2D; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; transition: all 0.12s; font-family: inherit; }
.ea-danger-btn:hover[b-e4wb20k277] { background: #FCEBEB; }

/* Responsive */
@@media (max-width: 768px) {
    .ea-container[b-e4wb20k277] { padding: 12px; }
    .ea-layout[b-e4wb20k277] { position: relative; }
    .ea-panel[b-e4wb20k277] { position: absolute; top: 0; right: 0; width: 100%; max-width: 360px; height: 100%; border-left: 1px solid #e0e0e0; z-index: 50; box-shadow: -4px 0 12px rgba(0,0,0,0.08); }
    .ea-frow[b-e4wb20k277] { grid-template-columns: 1fr; }
    .ea-toolbar[b-e4wb20k277] { flex-direction: column; align-items: stretch; }
    .ea-search[b-e4wb20k277] { max-width: 100%; }
    .ea-filter-tabs[b-e4wb20k277] { margin-left: 0; justify-content: flex-end; }
}
@@media (max-width: 480px) {
    .ea-panel[b-e4wb20k277] { max-width: 100%; }
    .ea-al-row[b-e4wb20k277] { padding: 8px 10px; }
    .ea-avatar[b-e4wb20k277] { width: 30px; height: 30px; font-size: 10px; }
    .ea-al-name[b-e4wb20k277] { font-size: 12px; }
}
/* /Pages/Evaluar.razor.rz.scp.css */
/* === Evaluar · v2 wrapper (Fase D) === */
.evaluar-container[b-kkp1bvun4x] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.ev-bc[b-kkp1bvun4x] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.ev-bc .material-symbols-rounded[b-kkp1bvun4x] { font-size: 14px !important; }
.ev-bc a[b-kkp1bvun4x] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.ev-bc a:hover[b-kkp1bvun4x] { color: var(--brand-teal-deep); }
.ev-sep[b-kkp1bvun4x] { color: var(--text-muted); }
.ev-clase[b-kkp1bvun4x] { color: var(--text-secondary); font-weight: 500; }
.ev-current[b-kkp1bvun4x] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.ev-h[b-kkp1bvun4x] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ev-h-icon[b-kkp1bvun4x] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.25);
}
.ev-h-icon .material-symbols-rounded[b-kkp1bvun4x] { font-size: 24px !important; }
.ev-h-block[b-kkp1bvun4x] { flex: 1; min-width: 0; }
.ev-h-title[b-kkp1bvun4x] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.ev-h-sub[b-kkp1bvun4x] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }
.ev-save-btn[b-kkp1bvun4x] {
    padding: 9px 18px;
    background: var(--brand-teal-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3);
}
.ev-save-btn:hover:not(:disabled)[b-kkp1bvun4x] {
    background: var(--brand-teal-dark);
    transform: translateY(-1px);
}
.ev-save-btn:disabled[b-kkp1bvun4x] { background: #C5D7D9; cursor: not-allowed; }
.ev-save-btn .material-symbols-rounded[b-kkp1bvun4x] { font-size: 17px !important; }

/* Breadcrumb */
.breadcrumb[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 13px;
    flex-wrap: wrap;
}
.bc-icon[b-kkp1bvun4x] { font-size: 16px; color: #999; }
.bc-link[b-kkp1bvun4x] { color: #4BA8AA; cursor: pointer; }
.bc-link:hover[b-kkp1bvun4x] { text-decoration: underline; }
.bc-separator[b-kkp1bvun4x] { font-size: 14px; color: #CCC; }
.bc-clase[b-kkp1bvun4x] { color: #666; }
.bc-current[b-kkp1bvun4x] { color: #333; font-weight: 500; }

/* Header */
.section-header[b-kkp1bvun4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.header-left[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-title[b-kkp1bvun4x] { font-size: 18px; font-weight: 500; color: #333; }
.header-clase[b-kkp1bvun4x] { font-size: 13px; color: #999; }
.btn-guardar[b-kkp1bvun4x] {
    background: #4BA8AA;
    color: white;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-guardar:hover:not(:disabled)[b-kkp1bvun4x] { opacity: 0.9; }
.btn-guardar:disabled[b-kkp1bvun4x] { opacity: 0.6; cursor: not-allowed; }

/* Activity toolbar */
.activity-toolbar[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.activity-selector-wrapper[b-kkp1bvun4x] {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1.5px solid #4BA8AA;
    border-radius: 10px;
    padding: 8px 14px;
}
.activity-select[b-kkp1bvun4x] {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    background: transparent;
    cursor: pointer;
}
.activity-actions[b-kkp1bvun4x] {
    display: flex;
    gap: 8px;
}
.btn-icon[b-kkp1bvun4x] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-add[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.1);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.3);
}
.btn-add:hover[b-kkp1bvun4x] { opacity: 0.75; }
.btn-delete[b-kkp1bvun4x] {
    background: rgba(231,76,60,0.06);
    color: #D35D52;
    border: 1px solid rgba(231,76,60,0.2);
}
.btn-delete:hover[b-kkp1bvun4x] { opacity: 0.75; }

/* Loading / Empty */
.loading-state[b-kkp1bvun4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    gap: 16px;
    color: #999;
    font-size: 14px;
}
.spinner[b-kkp1bvun4x] {
    width: 36px; height: 36px;
    border: 3px solid #E8F4F8;
    border-top: 3px solid #4BA8AA;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@@keyframes spin { to[b-kkp1bvun4x] { transform: rotate(360deg); } }

.empty-state[b-kkp1bvun4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    gap: 12px;
}

/* Stats row */
.stats-row[b-kkp1bvun4x] {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}
.stats-card[b-kkp1bvun4x] {
    background: white;
    border-radius: 14px;
    border: 0.5px solid #EBEBEB;
    padding: 10px 16px;
}
.stats-donut[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}
.stats-summary[b-kkp1bvun4x] {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.donut-wrapper[b-kkp1bvun4x] {
    position: relative;
    width: 65px;
    height: 65px;
    flex-shrink: 0;
}
.donut-svg[b-kkp1bvun4x] {
    width: 65px;
    height: 65px;
    transform: rotate(-90deg);
}
.donut-center[b-kkp1bvun4x] {
    position: absolute;
    top: 0; left: 0;
    width: 65px; height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.donut-pct[b-kkp1bvun4x] { font-size: 16px; font-weight: 500; color: #4BA8AA; }
.legend-title[b-kkp1bvun4x] {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.legend-inline[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #555;
}
.legend-sep[b-kkp1bvun4x] { color: #CCC; }
.legend-dot[b-kkp1bvun4x] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.summary-title[b-kkp1bvun4x] {
    font-size: 11px; color: #999;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.summary-row[b-kkp1bvun4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.summary-label[b-kkp1bvun4x] { font-size: 13px; color: #666; }
.summary-value[b-kkp1bvun4x] { font-size: 15px; font-weight: 500; color: #333; }

/* Filter bar */
.filter-bar[b-kkp1bvun4x] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.filter-pill[b-kkp1bvun4x] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    background: #FAFAFA;
    border: 1px solid #EAEAEA;
    color: #888;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.filter-pill:hover[b-kkp1bvun4x] { border-color: #CCC; color: #555; }
.filter-active[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.1);
    border-color: rgba(75,168,170,0.3);
    color: #4BA8AA;
    font-weight: 500;
}
.filter-next[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.06);
    border-color: rgba(75,168,170,0.2);
    color: #4BA8AA;
}

/* Smart chips upper */
.chips-upper[b-kkp1bvun4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.smart-chip[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.smart-chip:hover[b-kkp1bvun4x] { opacity: 0.75; }
.chip-teal[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.1);
    border: 1px solid rgba(75,168,170,0.3);
    color: #4BA8AA;
}
.chip-orange[b-kkp1bvun4x] {
    background: rgba(243,156,18,0.08);
    border: 1px solid rgba(243,156,18,0.2);
    color: #C99A2E;
}

/* Student table */
.student-table[b-kkp1bvun4x] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 20px;
}

/* Student card */
.student-card[b-kkp1bvun4x] {
    background: white;
    border-radius: 12px;
    padding: 6px 18px;
    transition: border-color 0.3s;
}
.student-graded[b-kkp1bvun4x] {
    border: 1.5px solid transparent;
    border-color: #EBEBEB;
    background: var(--bg);
}
.student-ungraded[b-kkp1bvun4x] {
    animation: pulse-border 2s ease-in-out infinite;
    border: 1.5px solid rgba(75,168,170,0.4);
    background: #FFFFFF;
}
@@keyframes pulse-border {
    0%[b-kkp1bvun4x], 100%[b-kkp1bvun4x] { border-color: rgba(75,168,170,0.25); }
    50%[b-kkp1bvun4x] { border-color: rgba(75,168,170,0.7); }
}

/* Row 1 */
.student-row1[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-num[b-kkp1bvun4x] {
    width: 30px;
    text-align: center;
    font-size: 12px;
    color: #BBB;
    flex-shrink: 0;
}
.col-name[b-kkp1bvun4x] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-grades[b-kkp1bvun4x] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Grade buttons */
.grade-btn[b-kkp1bvun4x] {
    width: 40px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    user-select: none;
}
.grade-inactive[b-kkp1bvun4x] {
    background: #FAFAFA;
    color: #CCC;
    border: 0.5px solid #EAEAEA;
}
.grade-inactive:hover[b-kkp1bvun4x] { border-color: #BBB; color: #999; }
.grade-selected[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.15);
    color: #4BA8AA;
    font-weight: 500;
    border: 1.5px solid #4BA8AA;
}
.grade-unreviewed[b-kkp1bvun4x] {
    background: rgba(243,156,18,0.1);
    color: #C99A2E;
    font-weight: 500;
    border: 1px solid rgba(243,156,18,0.3);
}

/* Badges */
.badge[b-kkp1bvun4x] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-sinrevisar[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.1);
    color: #4BA8AA;
}
.badge-pending[b-kkp1bvun4x] {
    background: rgba(243,156,18,0.08);
    color: #C99A2E;
    border: 1px solid rgba(243,156,18,0.2);
}
.badge-faltas[b-kkp1bvun4x] {
    background: rgba(232,141,141,0.1);
    color: #D35D52;
    border: 1px solid rgba(232,141,141,0.2);
}
.badge-complete[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.1);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.25);
}
.badge-nee[b-kkp1bvun4x] {
    background: rgba(155,89,182,0.1);
    color: #9B59B6;
    border: 1px solid rgba(155,89,182,0.2);
}

/* Row 2 */
.student-row2[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-left: 38px;
    flex-wrap: wrap;
}
.row2-left[b-kkp1bvun4x] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.row2-right[b-kkp1bvun4x] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}
.row2-extra[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.extra-icon[b-kkp1bvun4x] { font-size: 16px; color: #F0C56D; }
.extra-label[b-kkp1bvun4x] { font-size: 11px; color: #999; }
.extra-controls[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.extra-btn[b-kkp1bvun4x] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    background: #FAFAFA;
    border: 1px solid #EAEAEA;
    color: #888;
    transition: all 0.15s;
    user-select: none;
}
.extra-btn:hover[b-kkp1bvun4x] { border-color: #CCC; color: #555; }
.extra-value[b-kkp1bvun4x] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    min-width: 20px;
    text-align: center;
}

/* Row 2 actions */
.row2-actions[b-kkp1bvun4x] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.action-icon[b-kkp1bvun4x] {
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.action-flag[b-kkp1bvun4x] { color: #D35D52; }
.action-flag:hover[b-kkp1bvun4x] { background: rgba(231,76,60,0.08); }
.action-note[b-kkp1bvun4x] { color: #3498DB; }
.action-note:hover[b-kkp1bvun4x] { background: rgba(52,152,219,0.08); }
.action-search[b-kkp1bvun4x] { color: #999; }
.action-search:hover[b-kkp1bvun4x] { background: #F0F0F0; color: #666; }

/* Bitácora section */
.bitacora-section[b-kkp1bvun4x] {
    background: white;
    border-radius: 14px;
    border: 0.5px solid #EBEBEB;
    padding: 20px;
    margin-bottom: 20px;
}
.bitacora-header[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.bitacora-title[b-kkp1bvun4x] { font-size: 14px; font-weight: 500; color: #444; }
.bitacora-subtitle[b-kkp1bvun4x] { font-size: 12px; color: #999; }
.bitacora-input[b-kkp1bvun4x] { margin-bottom: 12px; }
.bitacora-textarea[b-kkp1bvun4x] {
    width: 100%;
    min-height: 70px;
    padding: 14px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #333;
    resize: vertical;
    background: #FBFBFB;
    outline: none;
    transition: border-color 0.2s;
}
.bitacora-textarea:focus[b-kkp1bvun4x] { border-color: #4BA8AA; }
.bitacora-actions[b-kkp1bvun4x] { display: flex; justify-content: flex-end; }
.btn-agregar-nota[b-kkp1bvun4x] {
    background: #4BA8AA;
    color: white;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-agregar-nota:hover:not(:disabled)[b-kkp1bvun4x] { opacity: 0.9; }
.btn-agregar-nota:disabled[b-kkp1bvun4x] { opacity: 0.5; cursor: not-allowed; }

/* Bitácora historial */
.bitacora-historial[b-kkp1bvun4x] {
    border-top: 0.5px solid #F0F0F0;
    margin-top: 18px;
    padding-top: 16px;
}
.historial-title[b-kkp1bvun4x] {
    font-size: 11px; color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.historial-item[b-kkp1bvun4x] {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    background: #FAFAFA;
    border-radius: 10px;
    margin-bottom: 8px;
}
.historial-item:last-child[b-kkp1bvun4x] { margin-bottom: 0; }
.historial-bar[b-kkp1bvun4x] {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    min-height: 30px;
}
.historial-content[b-kkp1bvun4x] { flex: 1; }
.historial-nota[b-kkp1bvun4x] { font-size: 12px; color: #555; }
.historial-fecha[b-kkp1bvun4x] { font-size: 11px; color: #BBB; margin-top: 3px; }

/* Toast messages */
.toast[b-kkp1bvun4x] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 200;
    animation: slideUp 0.3s ease;
}
.toast-success[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.15);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.3);
}
.toast-error[b-kkp1bvun4x] {
    background: rgba(231,76,60,0.1);
    color: #D35D52;
    border: 1px solid rgba(231,76,60,0.2);
}
.toast-bitacora[b-kkp1bvun4x] {
    background: rgba(75,168,170,0.15);
    color: #4BA8AA;
    border: 1px solid rgba(75,168,170,0.3);
}
@@keyframes slideUp {
    from[b-kkp1bvun4x] { opacity: 0; transform: translateY(20px); }
    to[b-kkp1bvun4x] { opacity: 1; transform: translateY(0); }
}

/* Modal */
.modal-overlay[b-kkp1bvun4x] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    animation: fadeIn 0.2s ease;
}
@@keyframes fadeIn {
    from[b-kkp1bvun4x] { opacity: 0; }
    to[b-kkp1bvun4x] { opacity: 1; }
}
.modal-card[b-kkp1bvun4x] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.modal-header[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.modal-title[b-kkp1bvun4x] { font-size: 16px; font-weight: 500; color: #333; }
.modal-body[b-kkp1bvun4x] { margin-bottom: 20px; }
.modal-label[b-kkp1bvun4x] {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 6px;
}
.modal-select[b-kkp1bvun4x], .modal-input[b-kkp1bvun4x] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    outline: none;
    background: #FBFBFB;
    transition: border-color 0.2s;
}
.modal-select:focus[b-kkp1bvun4x], .modal-input:focus[b-kkp1bvun4x] { border-color: #4BA8AA; }
.modal-footer[b-kkp1bvun4x] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.btn-modal-cancel[b-kkp1bvun4x] {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    color: #666;
    font-family: inherit;
}
.btn-modal-ok[b-kkp1bvun4x] {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #4BA8AA;
    border: none;
    color: white;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-modal-ok:hover:not(:disabled)[b-kkp1bvun4x] { opacity: 0.9; }
.btn-modal-ok:disabled[b-kkp1bvun4x] { opacity: 0.5; cursor: not-allowed; }
.btn-modal-delete[b-kkp1bvun4x] {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #D35D52;
    border: none;
    color: white;
    font-family: inherit;
    transition: opacity 0.2s;
}
.btn-modal-delete:hover[b-kkp1bvun4x] { opacity: 0.9; }

/* Modal agregar — wider */
.modal-agregar[b-kkp1bvun4x] {
    width: 480px;
}

/* Criterio chips */
.criterio-chips[b-kkp1bvun4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.criterio-chip[b-kkp1bvun4x] {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    background: white;
    border: 1px solid #DDD;
    color: #666;
    transition: all 0.15s;
}
.criterio-chip:hover[b-kkp1bvun4x] { border-color: #BBB; color: #444; }
.criterio-chip-active[b-kkp1bvun4x] {
    background: #4BA8AA;
    border-color: #4BA8AA;
    color: white;
    font-weight: 500;
}

/* Otras clases grid */
.otras-clases-grid[b-kkp1bvun4x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
}
.clase-check[b-kkp1bvun4x] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    padding: 4px 0;
}
.clase-check input[type="checkbox"][b-kkp1bvun4x] {
    accent-color: #4BA8AA;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.clase-check-label[b-kkp1bvun4x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== RESPONSIVE ========== */

@@media (max-width: 1000px) {
    .stats-row[b-kkp1bvun4x] {
        flex-direction: column;
    }
    .stats-summary[b-kkp1bvun4x] {
        min-width: unset;
    }
    .grade-btn[b-kkp1bvun4x] {
        width: 36px;
        height: 34px;
        font-size: 12px;
    }
}

@@media (max-width: 768px) {
    .evaluar-container[b-kkp1bvun4x] {
        padding: 16px;
    }
    .section-header[b-kkp1bvun4x] {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-guardar[b-kkp1bvun4x] {
        justify-content: center;
        width: 100%;
    }
    .filter-bar[b-kkp1bvun4x] {
        gap: 6px;
    }
    .filter-pill[b-kkp1bvun4x] {
        font-size: 11px;
        padding: 5px 10px;
    }
    .grade-btn[b-kkp1bvun4x] {
        width: 34px;
        height: 32px;
        font-size: 12px;
    }
    .col-grades[b-kkp1bvun4x] {
        gap: 4px;
    }
    .student-card[b-kkp1bvun4x] {
        padding: 12px 14px;
    }
    .student-row2[b-kkp1bvun4x] {
        padding-left: 30px;
    }
    .action-icon[b-kkp1bvun4x] { font-size: 16px; }
    .extra-btn[b-kkp1bvun4x] { width: 24px; height: 24px; font-size: 13px; }
    .stats-donut[b-kkp1bvun4x] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@@media (max-width: 550px) {
    .evaluar-container[b-kkp1bvun4x] {
        padding: 12px;
    }
    .breadcrumb[b-kkp1bvun4x] { font-size: 11px; }
    .header-title[b-kkp1bvun4x] { font-size: 16px; }
    .activity-toolbar[b-kkp1bvun4x] {
        flex-direction: column;
    }
    .activity-selector-wrapper[b-kkp1bvun4x] {
        min-width: unset;
    }
    .grade-btn[b-kkp1bvun4x] {
        width: 32px;
        height: 30px;
        font-size: 11px;
        border-radius: 6px;
    }
    .col-grades[b-kkp1bvun4x] {
        gap: 3px;
    }
    .col-name[b-kkp1bvun4x] {
        font-size: 12px;
    }
    .col-num[b-kkp1bvun4x] { width: 24px; font-size: 11px; }
    .student-row2[b-kkp1bvun4x] {
        padding-left: 24px;
        gap: 8px;
    }
    .row2-actions[b-kkp1bvun4x] { gap: 6px; }
    .extra-label[b-kkp1bvun4x] { display: none; }
    .filter-pill[b-kkp1bvun4x] { font-size: 10px; padding: 4px 8px; }
    .smart-chip[b-kkp1bvun4x] { font-size: 11px; padding: 5px 10px; }
    .bitacora-section[b-kkp1bvun4x] { padding: 14px; }
    .toast[b-kkp1bvun4x] {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
}
/* /Pages/Inicio.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Inicio Mi día — replica del mockup
   ──────────────────────────────────────────────────────────────────── */

.iv2-page[b-803lggtgd6] {
    background:
        radial-gradient(circle at 15% 10%, rgba(110, 198, 200, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(217, 119, 6, 0.04) 0%, transparent 50%),
        var(--bg);
    min-height: 100%;
}

.iv2-container[b-803lggtgd6] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 36px 60px;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════════
   Grid 2 cols
   ════════════════════════════════════════════════════════════════════ */

.iv2-grid[b-803lggtgd6] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
}

.iv2-col-main[b-803lggtgd6] { min-width: 0; }
.iv2-col-side[b-803lggtgd6] { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════
   Card base + header
   ════════════════════════════════════════════════════════════════════ */

.iv2-card[b-803lggtgd6],
.iv2-side-card[b-803lggtgd6] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}

.iv2-side-card[b-803lggtgd6] { margin-bottom: 18px; padding: 18px; }

.iv2-card-header[b-803lggtgd6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.iv2-card-icon[b-803lggtgd6] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.iv2-card-icon .material-symbols-rounded[b-803lggtgd6] { font-size: 17px !important; }

.iv2-card-icon.mentions[b-803lggtgd6]  { background: linear-gradient(135deg, #EC4899, #BE185D); }
.iv2-card-icon.tasks[b-803lggtgd6]     { background: linear-gradient(135deg, #F59E0B, #D97706); }
.iv2-card-icon.notices[b-803lggtgd6]   { background: linear-gradient(135deg, var(--pin-gold), #92400E); }
.iv2-card-icon.approvals[b-803lggtgd6] { background: linear-gradient(135deg, #10B981, #047857); }
.iv2-card-icon.upcoming[b-803lggtgd6]  { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.iv2-card-icon.focus[b-803lggtgd6]     { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }

.iv2-card-title[b-803lggtgd6] {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    flex: 1;
}

.iv2-card-count[b-803lggtgd6] {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    background: var(--bg-light-teal);
    color: var(--brand-teal-deep);
}

.iv2-card-count.urgent[b-803lggtgd6]  { background: #FEE2E2; color: var(--danger); }
.iv2-card-count.warning[b-803lggtgd6] { background: #FEF3C7; color: var(--warning); }

.iv2-card-link[b-803lggtgd6] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: auto;
    background: transparent;
    border: none;
    font-family: inherit;
}

.iv2-card-link:hover[b-803lggtgd6] { background: var(--bg-light-teal); color: var(--brand-teal-deep); }
.iv2-card-link .material-symbols-rounded[b-803lggtgd6] { font-size: 13px !important; }

/* ════════════════════════════════════════════════════════════════════
   Mentions
   ════════════════════════════════════════════════════════════════════ */

.iv2-mention[b-803lggtgd6] {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 11px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.iv2-mention:hover[b-803lggtgd6] { background: #FBFAF6; }

.iv2-mention + .iv2-mention[b-803lggtgd6] {
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
}

.iv2-mention:hover[b-803lggtgd6] { border-radius: 10px; }

.iv2-mention-avatar[b-803lggtgd6] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    position: relative;
}

.iv2-mention-source[b-803lggtgd6] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-panel);
    color: #FFFFFF;
}

.iv2-mention-source.chat[b-803lggtgd6]    { background: var(--brand-teal-dark); }
.iv2-mention-source.project[b-803lggtgd6] { background: var(--t-nem); }
.iv2-mention-source.dm[b-803lggtgd6]      { background: #8B5CF6; }

.iv2-mention-source .material-symbols-rounded[b-803lggtgd6] { font-size: 10px !important; }

.iv2-mention-body[b-803lggtgd6] { min-width: 0; }

.iv2-mention-head[b-803lggtgd6] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.iv2-mention-author[b-803lggtgd6] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.iv2-mention-role[b-803lggtgd6] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.iv2-mention-role.directivo[b-803lggtgd6] { background: #E9D5FF; color: #581C87; }
.iv2-mention-role.docente[b-803lggtgd6]   { background: var(--bg-light-teal); color: var(--brand-teal-deep); }

.iv2-mention-context[b-803lggtgd6] {
    font-size: 11.5px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.iv2-mention-context .material-symbols-rounded[b-803lggtgd6] { font-size: 11px !important; }
.iv2-mention-context strong[b-803lggtgd6] { color: var(--text-secondary); font-weight: 600; }

.iv2-mention-time[b-803lggtgd6] {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.iv2-mention-snippet[b-803lggtgd6] {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.45;
    margin-bottom: 5px;
}

.iv2-smart-mention[b-803lggtgd6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 1px;
}

.iv2-smart-mention .material-symbols-rounded[b-803lggtgd6] {
    font-size: 11px !important;
    font-variation-settings: "FILL" 1 !important;
}

.iv2-smart-mention.me[b-803lggtgd6]           { background: rgba(245, 158, 11, 0.18); color: #854D0E; font-weight: 700; }
.iv2-smart-mention.grupo[b-803lggtgd6]        { background: rgba(110, 198, 200, 0.18); color: var(--brand-teal-deep); }
.iv2-smart-mention.alumno[b-803lggtgd6]       { background: rgba(186, 117, 23, 0.14); color: #8B5A10; }
.iv2-smart-mention.disc-saberes[b-803lggtgd6] { background: var(--cf-saberes-bg); color: var(--cf-saberes); }

.iv2-mention-actions[b-803lggtgd6] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   Mini button (compartido por mentions, approvals, etc.)
   ════════════════════════════════════════════════════════════════════ */

.iv2-mini-btn[b-803lggtgd6] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--border-soft);
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: inherit;
}

.iv2-mini-btn:hover[b-803lggtgd6] {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}

.iv2-mini-btn .material-symbols-rounded[b-803lggtgd6] { font-size: 12px !important; }

.iv2-mini-btn.primary[b-803lggtgd6] {
    background: var(--brand-teal-primary);
    border-color: var(--brand-teal-primary);
    color: #FFFFFF;
}

.iv2-mini-btn.primary:hover[b-803lggtgd6] {
    background: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
    color: #FFFFFF;
}

.iv2-mini-btn.success[b-803lggtgd6] {
    background: rgba(29, 158, 117, 0.1);
    border-color: rgba(29, 158, 117, 0.3);
    color: var(--success);
    font-weight: 700;
}

.iv2-mini-btn.success:hover[b-803lggtgd6] {
    background: var(--success);
    color: #FFFFFF;
    border-color: var(--success);
}

.iv2-mini-btn.reject[b-803lggtgd6] {
    background: var(--bg-panel);
    border-color: var(--border-soft);
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   Tasks
   ════════════════════════════════════════════════════════════════════ */

.iv2-task[b-803lggtgd6] {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 12px;
    padding: 11px 8px;
    border-radius: 10px;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s;
}

.iv2-task:hover[b-803lggtgd6] { background: #FBFAF6; }

.iv2-task + .iv2-task[b-803lggtgd6] {
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
}

.iv2-task:hover[b-803lggtgd6] { border-radius: 10px; }

.iv2-task-cb[b-803lggtgd6] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border-med);
    background: var(--bg-panel);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iv2-task-cb:hover[b-803lggtgd6] { border-color: var(--brand-teal); }

.iv2-task-cb.done[b-803lggtgd6] {
    background: var(--success);
    border-color: var(--success);
}

.iv2-task-cb.done .material-symbols-rounded[b-803lggtgd6] {
    color: #FFFFFF;
    font-size: 14px !important;
    font-variation-settings: "FILL" 1, "wght" 700 !important;
}

.iv2-task-info[b-803lggtgd6] { min-width: 0; }

.iv2-task-title[b-803lggtgd6] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 3px;
}

.iv2-task.done .iv2-task-title[b-803lggtgd6] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.iv2-task-meta[b-803lggtgd6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.iv2-task-project[b-803lggtgd6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
}

.iv2-task-project.nem[b-803lggtgd6]     { background: rgba(217, 119, 6, 0.12); color: var(--t-nem); }
.iv2-task-project.proceso[b-803lggtgd6] { background: rgba(107, 114, 128, 0.15); color: #4B5563; }
.iv2-task-project.evento[b-803lggtgd6]  { background: rgba(219, 39, 119, 0.12); color: var(--t-evento); }
.iv2-task-project.pmc[b-803lggtgd6]     { background: rgba(124, 58, 237, 0.12); color: var(--t-pmc); }

.iv2-task-project .material-symbols-rounded[b-803lggtgd6] { font-size: 11px !important; }

.iv2-task-due[b-803lggtgd6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.iv2-task-due .material-symbols-rounded[b-803lggtgd6] { font-size: 12px !important; }

.iv2-task-due.urgent[b-803lggtgd6] { color: var(--danger); }
.iv2-task-due.soon[b-803lggtgd6]   { color: var(--warning); }
.iv2-task-due.ok[b-803lggtgd6]     { color: var(--text-secondary); }

.iv2-task-affecting[b-803lggtgd6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(186, 117, 23, 0.12);
    color: #8B5A10;
    font-size: 10.5px;
    font-weight: 600;
}

.iv2-task-affecting .material-symbols-rounded[b-803lggtgd6] {
    font-size: 11px !important;
    font-variation-settings: "FILL" 1 !important;
}

.iv2-task-btn[b-803lggtgd6] {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--brand-teal);
    background: var(--bg-panel);
    color: var(--brand-teal-deep);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.iv2-task-btn:hover[b-803lggtgd6] {
    background: var(--brand-teal-primary);
    color: #FFFFFF;
}

.iv2-task-btn .material-symbols-rounded[b-803lggtgd6] { font-size: 13px !important; }

/* ════════════════════════════════════════════════════════════════════
   Notices
   ════════════════════════════════════════════════════════════════════ */

.iv2-notice[b-803lggtgd6] {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #F0E4C4;
    background: linear-gradient(135deg, #FFF8E7 0%, #FFFCEF 100%);
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.iv2-notice:hover[b-803lggtgd6] {
    box-shadow: var(--shadow-sm);
    border-color: var(--pin-gold);
}

.iv2-notice-icon[b-803lggtgd6] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iv2-notice-icon .material-symbols-rounded[b-803lggtgd6] { font-size: 18px !important; }

.iv2-notice-info[b-803lggtgd6] { min-width: 0; }

.iv2-notice-label[b-803lggtgd6] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.iv2-notice-title[b-803lggtgd6] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.iv2-notice-meta[b-803lggtgd6] {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════════════
   Focus mode
   ════════════════════════════════════════════════════════════════════ */

.iv2-focus[b-803lggtgd6] {
    background: linear-gradient(135deg, #1E2126 0%, #2A2E35 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.iv2-focus[b-803lggtgd6]::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 198, 200, 0.25), transparent 65%);
    pointer-events: none;
}

.iv2-focus-content[b-803lggtgd6] { position: relative; }

.iv2-focus-icon[b-803lggtgd6] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(110, 198, 200, 0.18);
    color: var(--brand-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.iv2-focus-icon .material-symbols-rounded[b-803lggtgd6] { font-size: 20px !important; }

.iv2-focus-title[b-803lggtgd6] {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}

.iv2-focus-desc[b-803lggtgd6] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    margin-bottom: 12px;
}

.iv2-focus-btn[b-803lggtgd6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--brand-teal);
    color: #0F3A3C;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.iv2-focus-btn:hover[b-803lggtgd6] { background: #FFFFFF; }
.iv2-focus-btn .material-symbols-rounded[b-803lggtgd6] { font-size: 14px !important; }

/* ════════════════════════════════════════════════════════════════════
   Approvals
   ════════════════════════════════════════════════════════════════════ */

.iv2-approval[b-803lggtgd6] {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.iv2-approval:hover[b-803lggtgd6] {
    border-color: var(--brand-teal);
    box-shadow: var(--shadow-sm);
}

.iv2-approval-head[b-803lggtgd6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.iv2-approval-chip[b-803lggtgd6] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.iv2-approval-chip.evento[b-803lggtgd6]  { background: rgba(219, 39, 119, 0.12); color: var(--t-evento); }
.iv2-approval-chip.proceso[b-803lggtgd6] { background: rgba(107, 114, 128, 0.15); color: #4B5563; }

.iv2-approval-time[b-803lggtgd6] {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.iv2-approval-title[b-803lggtgd6] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.iv2-approval-author[b-803lggtgd6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.iv2-approval-avatar[b-803lggtgd6] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 8.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.iv2-approval-actions[b-803lggtgd6] {
    display: flex;
    gap: 5px;
}

.iv2-approval-actions .iv2-mini-btn[b-803lggtgd6] {
    flex: 1;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   Upcoming
   ════════════════════════════════════════════════════════════════════ */

.iv2-upcoming-day[b-803lggtgd6] {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.iv2-upcoming-day:last-child[b-803lggtgd6] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.iv2-upcoming-label[b-803lggtgd6] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.iv2-upcoming-num[b-803lggtgd6] {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.iv2-upcoming-event[b-803lggtgd6] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 4px;
    font-size: 12px;
}

.iv2-upcoming-marker[b-803lggtgd6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.iv2-upcoming-marker.evento[b-803lggtgd6]  { background: var(--t-evento); }
.iv2-upcoming-marker.nem[b-803lggtgd6]     { background: var(--t-nem); }
.iv2-upcoming-marker.proceso[b-803lggtgd6] { background: var(--t-proceso); }
.iv2-upcoming-marker.cte[b-803lggtgd6]     { background: var(--info); }

.iv2-upcoming-info[b-803lggtgd6] { flex: 1; min-width: 0; }

.iv2-upcoming-title[b-803lggtgd6] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 1px;
}

.iv2-upcoming-meta[b-803lggtgd6] {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .iv2-grid[b-803lggtgd6] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .iv2-container[b-803lggtgd6] { padding: 18px 16px 40px; }
    .iv2-card[b-803lggtgd6], .iv2-side-card[b-803lggtgd6] { padding: 14px; }
}

/* ── Empty state inline para secciones vacías del dashboard ─────── */
.iv2-empty[b-803lggtgd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 24px;
    gap: 6px;
}

.iv2-empty .material-symbols-rounded[b-803lggtgd6] {
    font-size: 36px !important;
    color: var(--border-med);
    margin-bottom: 6px;
}

.iv2-empty-title[b-803lggtgd6] {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.1px;
}

.iv2-empty-sub[b-803lggtgd6] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 320px;
}

.iv2-card-link[b-803lggtgd6] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--brand-teal-deep);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.iv2-card-link:hover[b-803lggtgd6] { background: var(--bg-light-teal); }

.iv2-card-link .material-symbols-rounded[b-803lggtgd6] { font-size: 16px !important; }
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================
   Login v2 Premium - miComunidad Escolar
   Split de marca: panel carbon izquierdo + panel crema derecho
   ============================================================ */

.login-page[b-any2qbghpn],
.login-page *[b-any2qbghpn] {
    box-sizing: border-box;
}

.login-page img[b-any2qbghpn],
.login-page svg[b-any2qbghpn] {
    max-width: 100%;
}

.login-page[b-any2qbghpn] {
    --c-carbon: #141619;
    --c-cream: #F4F0E6;
    --c-cream-divider: #EFEAD9;
    --c-card-bg: #FFFFFF;
    --c-input-bg-idle: #FAFAF7;
    --c-input-border-idle: #E5E0D2;
    --c-teal-brand: #6DC7D0;
    --c-teal-dark: #4BA8AA;
    --c-text-primary: #141619;
    --c-text-secondary: #6F6B62;
    --c-text-tertiary: #888780;
    --c-success: #1D9E75;
    --c-danger: #A32D2D;
    --c-danger-bg: #FCEBEB;

    --font-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    display: grid;
    grid-template-columns: minmax(214px, 275px) 1fr;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--c-text-primary);
    background: var(--c-cream);
}

.login-page__left[b-any2qbghpn],
.login-page__right[b-any2qbghpn],
.login-page__center[b-any2qbghpn],
.login-page__card[b-any2qbghpn],
.login-page__field-group[b-any2qbghpn],
.login-page__input-wrapper[b-any2qbghpn],
.login-page__input[b-any2qbghpn] {
    min-width: 0;
}

/* ============== PANEL IZQUIERDO ============== */

.login-page__left[b-any2qbghpn] {
    background: var(--c-carbon);
    color: #FFFFFF;
    padding: clamp(22px, 2.6vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(24px, 3.5vh, 40px);
    min-height: 100vh;
    min-height: 100dvh;
}

.login-page__pitch[b-any2qbghpn] {
    margin-top: 28px;
}

.login-page__signature[b-any2qbghpn] {
    margin: auto 0 2px;
    font-size: 13.2px; /* +10% sobre 12px */
    color: #FFFFFF;
    line-height: 1.45;
    max-width: 22rem;
}

.login-page__wordmark[b-any2qbghpn] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.login-page__wordmark-icon[b-any2qbghpn] {
    width: 32px;
    height: 32px;
    background: var(--c-teal-brand);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.login-page__wordmark-text[b-any2qbghpn] {
    min-width: 0;
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--c-teal-brand);
    line-height: 1.05;
    white-space: normal;
}

.login-page__wordmark-text-bold[b-any2qbghpn] {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 500;
    font-family: var(--font-sans);
}

.login-page__pitch-headline[b-any2qbghpn] {
    max-width: 100%;
    font-family: var(--font-serif);
    font-size: clamp(17px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 12px;
    color: #FFFFFF;
    letter-spacing: 0;
}

.login-page__pitch-sub[b-any2qbghpn] {
    max-width: 34rem;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
}

.login-page__kpis[b-any2qbghpn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    padding-top: 18px;
    margin-top: 26px;
}

.login-page__kpi-value[b-any2qbghpn] {
    display: block;
    color: var(--c-teal-brand);
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 700;
}

.login-page__kpi-label[b-any2qbghpn] {
    display: block;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.65rem;
    line-height: 1.3;
    margin-top: 3px;
    letter-spacing: 0;
}

.login-page__left-mobile-tagline[b-any2qbghpn] {
    display: none;
}

/* ============== PANEL DERECHO ============== */

.login-page__right[b-any2qbghpn] {
    background: var(--c-cream);
    padding: clamp(20px, 2.8vw, 36px);
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

.login-page__top-link[b-any2qbghpn] {
    display: flex;
    justify-content: flex-end;
    font-size: 11.5px;
    color: var(--c-text-secondary);
}

.login-page__top-link a[b-any2qbghpn] {
    color: var(--c-teal-dark);
    margin-left: 5px;
    text-decoration: none;
    font-weight: 500;
}

.login-page__top-link a:hover[b-any2qbghpn] {
    text-decoration: underline;
}

.login-page__center[b-any2qbghpn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.login-page__card[b-any2qbghpn] {
    width: min(100%, 380px);
    max-width: 380px;
    background: var(--c-card-bg);
    border-radius: 20px;
    padding: clamp(22px, 2.8vw, 32px);
    box-shadow: 0 24px 70px rgba(20, 22, 25, 0.12);
    border: 0.5px solid rgba(20, 22, 25, 0.04);
}

.login-page__eyebrow[b-any2qbghpn] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--c-teal-dark);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.login-page__greeting[b-any2qbghpn] {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--c-text-primary);
    line-height: 1.15;
    letter-spacing: 0;
}

.login-page__greeting-sub[b-any2qbghpn] {
    font-size: 12.5px;
    color: var(--c-text-secondary);
    margin: 0 0 20px;
}

/* ----- Form fields ----- */

.login-page__field-group[b-any2qbghpn] {
    width: 100%;
    margin-bottom: 13px;
}

.login-page__field-header[b-any2qbghpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 12px;
}

.login-page__label[b-any2qbghpn] {
    font-size: 11px;
    font-weight: 500;
    color: var(--c-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-page__forgot[b-any2qbghpn] {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--c-teal-dark);
    text-decoration: none;
}

.login-page__forgot:hover[b-any2qbghpn] {
    text-decoration: underline;
}

.login-page__input-wrapper[b-any2qbghpn] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--c-input-bg-idle);
    border: 1px solid var(--c-input-border-idle);
    border-radius: 10px;
    padding: 9px 11px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-page__input-wrapper:focus-within[b-any2qbghpn] {
    background: #FFFFFF;
    border-color: var(--c-teal-brand);
    box-shadow: 0 0 0 3px rgba(109, 199, 208, 0.18);
}

.login-page__input-wrapper--error[b-any2qbghpn] {
    border-color: var(--c-danger) !important;
    box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.12) !important;
}

.login-page__input[b-any2qbghpn] {
    flex: 1;
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--c-text-primary);
}

.login-page__input[b-any2qbghpn]::placeholder {
    color: var(--c-text-tertiary);
}

.login-page__input-icon[b-any2qbghpn] {
    color: var(--c-text-tertiary);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page__input-wrapper:focus-within .login-page__input-icon[b-any2qbghpn] {
    color: var(--c-teal-dark);
}

.login-page__eye-button[b-any2qbghpn] {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--c-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page__eye-button:hover[b-any2qbghpn] {
    color: var(--c-text-secondary);
}

/* ----- Checkbox ----- */

.login-page__checkbox[b-any2qbghpn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #444441;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

.login-page__checkbox input[type="checkbox"][b-any2qbghpn] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-page__checkbox-box[b-any2qbghpn] {
    width: 17px;
    height: 17px;
    background: #FFFFFF;
    border: 1.5px solid var(--c-input-border-idle);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.login-page__checkbox input[type="checkbox"]:checked + .login-page__checkbox-box[b-any2qbghpn] {
    background: var(--c-teal-dark);
    border-color: var(--c-teal-dark);
}

.login-page__checkbox-check[b-any2qbghpn] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.login-page__checkbox input[type="checkbox"]:checked + .login-page__checkbox-box .login-page__checkbox-check[b-any2qbghpn] {
    opacity: 1;
}

/* ----- Boton principal ----- */

.login-page__cta[b-any2qbghpn] {
    width: 100%;
    min-height: 44px;
    background: var(--c-carbon);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease, transform 0.05s ease;
}

.login-page__cta:hover:not(:disabled)[b-any2qbghpn] {
    background: #2A2D31;
}

.login-page__cta:active:not(:disabled)[b-any2qbghpn] {
    transform: scale(0.99);
}

.login-page__cta:disabled[b-any2qbghpn] {
    background: #555555;
    cursor: not-allowed;
    opacity: 0.7;
}

.login-page__spinner[b-any2qbghpn] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

@@keyframes login-spin {
    to[b-any2qbghpn] { transform: rotate(360deg); }
}

/* ----- Mensaje de error ----- */

.login-page__error[b-any2qbghpn] {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

/* ----- Footer del card ----- */

.login-page__app-link[b-any2qbghpn] {
    text-align: center;
    font-size: 11.5px;
    color: var(--c-text-secondary);
    margin-top: 14px;
    padding-top: 11px;
    border-top: 0.5px solid var(--c-cream-divider);
}

.login-page__app-link a[b-any2qbghpn] {
    color: var(--c-teal-dark);
    text-decoration: none;
    font-weight: 500;
}

.login-page__app-link a:hover[b-any2qbghpn] {
    text-decoration: underline;
}

.login-page__security[b-any2qbghpn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--c-text-tertiary);
    margin-top: 10px;
}

.login-page__copyright[b-any2qbghpn] {
    text-align: center;
    font-size: 11px;
    color: var(--c-text-tertiary);
}

/* ============== RESPONSIVE ============== */

@@media (max-width: 1024px) {
    .login-page[b-any2qbghpn] {
        grid-template-columns: minmax(198px, 245px) 1fr;
    }

    .login-page__left[b-any2qbghpn] {
        padding: 22px;
    }

    .login-page__right[b-any2qbghpn] {
        padding: 26px;
    }

    .login-page__pitch-headline[b-any2qbghpn] {
        font-size: 19px;
    }

    .login-page__card[b-any2qbghpn] {
        max-width: 360px;
    }
}

@@media (max-width: 768px) {
    .login-page[b-any2qbghpn] {
        grid-template-columns: 1fr;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .login-page__left[b-any2qbghpn] {
        min-height: auto;
        padding: 22px 20px 24px;
        justify-content: flex-start;
        gap: 0;
    }

    .login-page__wordmark[b-any2qbghpn] {
        gap: 12px;
    }

    .login-page__wordmark-icon[b-any2qbghpn] {
        width: 44px;
        height: 44px;
    }

    .login-page__wordmark-text[b-any2qbghpn] {
        font-size: 1rem;
        line-height: 1.12;
    }

    .login-page__pitch[b-any2qbghpn] {
        margin-top: 0;
    }

    .login-page__pitch-headline[b-any2qbghpn] {
        font-size: clamp(2.15rem, 10vw, 3.1rem);
        line-height: 1.05;
        margin: 42px 0 18px;
    }

    .login-page__pitch-sub[b-any2qbghpn] {
        font-size: 1rem;
        line-height: 1.55;
        max-width: 100%;
        margin-bottom: 0;
    }

    .login-page__kpis[b-any2qbghpn] {
        margin-top: 26px;
        padding-top: 20px;
        gap: 12px;
    }

    .login-page__kpi-value[b-any2qbghpn] {
        font-size: 0.95rem;
    }

    .login-page__kpi-label[b-any2qbghpn] {
        font-size: 0.82rem;
    }

    .login-page__signature[b-any2qbghpn] {
        display: none;
    }
    .login-page__left-mobile-tagline[b-any2qbghpn] {
        display: none;
    }

    .login-page__right[b-any2qbghpn] {
        width: 100%;
        min-height: auto;
        padding: 22px 16px 24px;
        align-items: stretch;
    }

    .login-page__top-link[b-any2qbghpn] {
        position: static;
        width: 100%;
        justify-content: center;
        text-align: center;
        margin: 18px 0 0;
        font-size: 0.95rem;
        order: 2;
    }

    .login-page__center[b-any2qbghpn] {
        padding: 0;
        align-items: flex-start;
        justify-content: center;
        order: 1;
    }

    .login-page__card[b-any2qbghpn] {
        width: 100%;
        max-width: 430px;
        padding: 26px 22px;
        border-radius: 22px;
        box-shadow:
            0 1px 2px rgba(20, 22, 25, 0.04),
            0 8px 24px rgba(20, 22, 25, 0.06);
    }

    .login-page__greeting[b-any2qbghpn] {
        font-size: 24px;
    }

    .login-page__cta[b-any2qbghpn] {
        min-height: 48px;
    }

    .login-page__copyright[b-any2qbghpn] {
        position: static;
        text-align: center;
        padding: 18px 16px 0;
        font-size: 0.8rem;
        order: 3;
    }
}

@@media (max-width: 420px) {
    .login-page__kpis[b-any2qbghpn] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .login-page__kpis > div[b-any2qbghpn] {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .login-page__kpi-value[b-any2qbghpn],
    .login-page__kpi-label[b-any2qbghpn] {
        font-size: 0.95rem;
        margin-top: 0;
    }

    .login-page__pitch-sub[b-any2qbghpn],
    .login-page__left-mobile-tagline[b-any2qbghpn] {
        display: none;
    }

    .login-page__card[b-any2qbghpn] {
        padding: 24px 18px;
    }
}
/* /Pages/MisClases.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Mis clases — v2 (Fase D)
   Tokens del sistema v2 + chrome scoped a .mc-*
   ──────────────────────────────────────────────────────────────────── */

.mc-page[b-6lujzwyna2] {
    padding: 28px 36px 60px;
    max-width: 1280px;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb === */
.mc-breadcrumb[b-6lujzwyna2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.mc-breadcrumb .material-symbols-rounded[b-6lujzwyna2] { font-size: 14px !important; }
.mc-breadcrumb a[b-6lujzwyna2] { color: var(--text-secondary); text-decoration: none; }
.mc-breadcrumb a:hover[b-6lujzwyna2] { color: var(--brand-teal-deep); }
.mc-sep[b-6lujzwyna2] { color: var(--text-muted); }
.mc-current[b-6lujzwyna2] { color: var(--text-primary); font-weight: 600; }

/* === Header === */
.mc-header[b-6lujzwyna2] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.mc-header-icon[b-6lujzwyna2] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.25);
}

.mc-header-icon .material-symbols-rounded[b-6lujzwyna2] { font-size: 24px !important; }

.mc-title-block[b-6lujzwyna2] { flex: 1; min-width: 0; }

.mc-title[b-6lujzwyna2] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0;
}

.mc-sub[b-6lujzwyna2] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

/* === Loading / Empty === */
.mc-loading[b-6lujzwyna2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px;
    color: var(--text-muted);
    font-size: 13px;
}

.mc-loading .material-symbols-rounded[b-6lujzwyna2] { font-size: 20px; }

.mc-spin[b-6lujzwyna2] { animation: mc-spin-b-6lujzwyna2 1s linear infinite; }
@keyframes mc-spin-b-6lujzwyna2 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mc-empty[b-6lujzwyna2] {
    text-align: center;
    padding: 60px 24px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.mc-empty .material-symbols-rounded[b-6lujzwyna2] {
    font-size: 56px !important;
    color: var(--border-med);
    margin-bottom: 10px;
}

.mc-empty h3[b-6lujzwyna2] {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.mc-empty p[b-6lujzwyna2] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 420px;
}

/* === Selector de clases (tarjetas NEM) === */
.mc-class-selector[b-6lujzwyna2] {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}

.mc-class-selector--cards[b-6lujzwyna2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 6px;
    padding: 4px 0;
    margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
    .mc-class-selector--cards[b-6lujzwyna2] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* === Section label === */
.mc-section-label[b-6lujzwyna2] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 22px 0 12px;
}

/* === Quick actions === */
.mc-quick-actions[b-6lujzwyna2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.mc-quick[b-6lujzwyna2] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    text-align: left;
    font-family: inherit;
}

.mc-quick:hover[b-6lujzwyna2] {
    border-color: var(--brand-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mc-quick-icon[b-6lujzwyna2] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.mc-quick-icon .material-symbols-rounded[b-6lujzwyna2] { font-size: 22px !important; }

.mc-quick-icon.teal[b-6lujzwyna2]   { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark)); }
.mc-quick-icon.violet[b-6lujzwyna2] { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.mc-quick-icon.amber[b-6lujzwyna2]  { background: linear-gradient(135deg, #F59E0B, #D97706); }

.mc-quick-label[b-6lujzwyna2] {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.mc-quick-badge[b-6lujzwyna2] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(110, 198, 200, 0.18);
    color: var(--brand-teal-deep);
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* === Options grid === */
.mc-options-grid[b-6lujzwyna2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.mc-option[b-6lujzwyna2] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    text-align: left;
    font-family: inherit;
    min-height: 110px;
}

.mc-option:hover[b-6lujzwyna2] {
    border-color: var(--brand-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mc-option.destacado[b-6lujzwyna2] {
    border-color: var(--brand-teal);
    background: linear-gradient(135deg, rgba(110, 198, 200, 0.06) 0%, var(--bg-panel) 60%);
    box-shadow: 0 4px 14px rgba(110, 198, 200, 0.12);
}

.mc-option-icon[b-6lujzwyna2] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-option-icon .material-symbols-rounded[b-6lujzwyna2] { font-size: 20px !important; }

.mc-option-label[b-6lujzwyna2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.mc-option.destacado .mc-option-label[b-6lujzwyna2] { color: var(--brand-teal-deep); }

.mc-option-sub[b-6lujzwyna2] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: -4px;
}

/* === Responsive === */
@media (max-width: 720px) {
    .mc-page[b-6lujzwyna2] { padding: 18px 16px 40px; }
    .mc-title[b-6lujzwyna2] { font-size: 22px; }
    .mc-class-selector--cards[b-6lujzwyna2] { grid-template-columns: 1fr; }
    .mc-quick-actions[b-6lujzwyna2] { grid-template-columns: 1fr; }
    .mc-options-grid[b-6lujzwyna2] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/PizarronEditor.razor.rz.scp.css */
/* PizarronEditor · Scoped CSS */

/* Loading */
.ed-loading[b-la6fimgfen] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 12px;
    color: #888780;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    text-align: center;
}

/* Editor shell */
.editor-shell[b-la6fimgfen] {
    height: 100vh;
    position: relative;
    background: #F4F0E6;
    overflow: hidden;
}

/* Canvas wrap: padding cremita alrededor */
.canvas-wrap[b-la6fimgfen] {
    position: absolute;
    inset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas: lienzo blanco con esquinas redondeadas */
.canvas[b-la6fimgfen] {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(20, 22, 25, 0.04);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 22, 25, 0.04),
                0 4px 12px rgba(20, 22, 25, 0.06);
}

.canvas-bg[b-la6fimgfen] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    animation: canvas-bg-fade-b-la6fimgfen 0.4s ease;
}

.canvas.with-bg[b-la6fimgfen] {
    background: transparent;
}

@keyframes canvas-bg-fade-b-la6fimgfen {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === CLUSTER TOP-LEFT: Home + Group chip === */
.cluster-tl[b-la6fimgfen] {
    position: absolute;
    top: 26px;
    left: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.cluster-tl.hidden[b-la6fimgfen] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

.home-btn[b-la6fimgfen] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #1E2126;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6DC7D0;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s ease;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
}
.home-btn:hover[b-la6fimgfen] {
    background: #141619;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.group-chip[b-la6fimgfen] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px 9px 12px;
    border-radius: 999px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(20, 22, 25, 0.06);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    background: #FFFFFF;
    color: #0C447C;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
    height: 44px;
}
.group-chip:hover[b-la6fimgfen] {
    transform: translateY(-1px);
}
.chip-dot[b-la6fimgfen] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #378ADD;
}

/* === CLUSTER TOP-RIGHT: Fullscreen + Menu === */
.cluster-tr[b-la6fimgfen] {
    position: absolute;
    top: 26px;
    right: 26px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.cluster-tr.hidden[b-la6fimgfen] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

.float-icon-btn[b-la6fimgfen] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 22, 25, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444441;
    padding: 0;
    transition: all 0.15s ease;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
}
.float-icon-btn:hover[b-la6fimgfen] {
    background: #F4F0E6;
    color: #141619;
    transform: translateY(-1px);
}

/* === WIDGET BAR === */
.widget-bar[b-la6fimgfen] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid rgba(20, 22, 25, 0.06);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    gap: 2px;
    align-items: center;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
    z-index: 9;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.widget-bar.hidden[b-la6fimgfen] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
}

.w-btn[b-la6fimgfen] {
    width: 56px;
    height: 60px;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #5F5E5A;
    font-family: 'Figtree', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    padding: 0;
    position: relative;
    transition: all 0.12s ease;
}
.w-btn:hover[b-la6fimgfen] {
    background: #F4F0E6;
    color: #141619;
}
.w-btn[data-active="true"][b-la6fimgfen] {
    background: rgba(109, 199, 208, 0.18);
    color: #4BA8AA;
}
.w-btn.disabled[b-la6fimgfen] {
    opacity: 0.4;
    cursor: not-allowed;
}
.w-btn.disabled:hover[b-la6fimgfen] {
    background: transparent;
    color: #5F5E5A;
}
.w-icon[b-la6fimgfen] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.w-divider[b-la6fimgfen] {
    width: 1px;
    height: 36px;
    background: #EAE3D2;
    margin: 0 5px;
}

/* Tooltip for w-btn */
.w-btn[data-tt]:hover[b-la6fimgfen]::before {
    content: attr(data-tt);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #141619;
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    font-weight: 500;
}
.w-btn[data-tt]:hover[b-la6fimgfen]::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #141619;
    pointer-events: none;
    z-index: 20;
}

.kbd-hint[b-la6fimgfen] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #FFFFFF;
    font-family: 'Figtree', sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* === MINI BAR === */
.mini-bar[b-la6fimgfen] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid rgba(20, 22, 25, 0.06);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    gap: 2px;
    align-items: center;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateX(-50%) translateY(8px);
}
.mini-bar.visible[b-la6fimgfen] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.mini-btn[b-la6fimgfen] {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5F5E5A;
    padding: 0;
    position: relative;
    transition: all 0.12s ease;
}
.mini-btn:hover[b-la6fimgfen] {
    background: #F4F0E6;
    color: #141619;
}
.mini-btn[data-active="true"][b-la6fimgfen] {
    background: rgba(109, 199, 208, 0.18);
    color: #4BA8AA;
}
.mini-btn[data-tt]:hover[b-la6fimgfen]::before {
    content: attr(data-tt);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #141619;
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    font-weight: 500;
}

/* === PAGES CONTROL === */
.pages-control[b-la6fimgfen] {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 22, 25, 0.06);
    border-radius: 11px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 1px;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
    z-index: 8;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.pages-control.hidden[b-la6fimgfen] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
.page-btn[b-la6fimgfen] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: #5F5E5A;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
}
.page-btn:hover[b-la6fimgfen] {
    background: #F4F0E6;
    color: #141619;
}
.page-btn:disabled[b-la6fimgfen] {
    opacity: 0.3;
    cursor: not-allowed;
}
.page-btn:disabled:hover[b-la6fimgfen] {
    background: transparent;
    color: #5F5E5A;
}
.page-num[b-la6fimgfen] {
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 0 8px;
    color: #444441;
    min-width: 38px;
    text-align: center;
}
.page-add[b-la6fimgfen] {
    color: #1D9E75;
}
.page-add:hover[b-la6fimgfen] {
    background: rgba(29, 158, 117, 0.14);
    color: #0F6E56;
}

/* === GROUP DROPDOWN === */
.dropdown[b-la6fimgfen] {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #EAE3D2;
    border-radius: 11px;
    padding: 5px;
    z-index: 30;
    min-width: 240px;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
}
.dropdown.hidden[b-la6fimgfen] {
    display: none;
}
.group-dd[b-la6fimgfen] {
    top: 80px;
    left: 78px;
}
.dd-item[b-la6fimgfen] {
    padding: 9px 11px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: #444441;
    cursor: pointer;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    transition: background 0.1s ease;
}
.dd-item:hover[b-la6fimgfen] {
    background: #F4F0E6;
}
.dd-item-dot[b-la6fimgfen] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dd-item-name[b-la6fimgfen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.dd-item-name span[b-la6fimgfen] {
    font-weight: 500;
    color: #444441;
}
.dd-item-name small[b-la6fimgfen] {
    color: #888780;
    font-size: 11.5px;
    font-weight: 400;
    margin-top: 1px;
}
.dd-item-check[b-la6fimgfen] {
    color: #1D9E75;
    flex-shrink: 0;
    display: flex;
}
.dd-divider[b-la6fimgfen] {
    height: 1px;
    background: #EAE3D2;
    margin: 5px 4px;
}

/* === SIDE PANEL === */
.side-panel[b-la6fimgfen] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    background: #FFFFFF;
    border-left: 1px solid #EAE3D2;
    z-index: 25;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(20, 22, 25, 0.08);
}
.side-panel.open[b-la6fimgfen] {
    transform: translateX(0);
}

.sp-header[b-la6fimgfen] {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #EAE3D2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.sp-header-title[b-la6fimgfen] {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
    color: #141619;
    margin: 0;
    letter-spacing: -0.01em;
}
.sp-close[b-la6fimgfen] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: #5F5E5A;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
}
.sp-close:hover[b-la6fimgfen] {
    background: #F4F0E6;
    color: #141619;
}

.sp-body[b-la6fimgfen] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
}

.sp-section[b-la6fimgfen] {
    margin-bottom: 22px;
}
.sp-section:last-child[b-la6fimgfen] {
    margin-bottom: 0;
}

.sp-label[b-la6fimgfen] {
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 9px;
}

.sp-title-input[b-la6fimgfen] {
    width: 100%;
    background: #F4F0E6;
    border: 1px solid transparent;
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 500;
    color: #141619;
    padding: 10px 12px;
    border-radius: 8px;
    letter-spacing: -0.01em;
    transition: all 0.12s ease;
}
.sp-title-input:hover[b-la6fimgfen] {
    background: #EAE3D2;
}
.sp-title-input:focus[b-la6fimgfen] {
    outline: none;
    background: #FFFFFF;
    border-color: #1D9E75;
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}
.sp-title-input[b-la6fimgfen]::placeholder {
    color: #B4B2A9;
    font-style: italic;
    font-weight: 400;
}

.sp-saved[b-la6fimgfen] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #888780;
    margin-top: 7px;
}
.sp-saved .check[b-la6fimgfen] {
    color: #1D9E75;
    display: flex;
}

.sp-context-row[b-la6fimgfen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #F4F0E6;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.sp-context-row:last-child[b-la6fimgfen] {
    margin-bottom: 0;
}
.sp-context-row .label[b-la6fimgfen] {
    color: #888780;
    font-size: 12.5px;
}
.sp-context-row .value[b-la6fimgfen] {
    color: #141619;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-context-row .ctx-dot[b-la6fimgfen] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.sp-context-row.clickable[b-la6fimgfen] {
    cursor: pointer;
    transition: background 0.12s ease;
    border: none;
    width: 100%;
    font-family: 'Figtree', sans-serif;
    text-align: left;
}
.sp-context-row.clickable:hover[b-la6fimgfen] {
    background: #EAE3D2;
}

.sp-action[b-la6fimgfen] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: #444441;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
    font-weight: 400;
}
.sp-action:hover[b-la6fimgfen] {
    background: #F4F0E6;
}
.sp-action .icon[b-la6fimgfen] {
    width: 18px;
    height: 18px;
    color: #5F5E5A;
    display: flex;
    flex-shrink: 0;
}
.sp-action.danger[b-la6fimgfen] {
    color: #A32D2D;
}
.sp-action.danger .icon[b-la6fimgfen] {
    color: #A32D2D;
}
.sp-action.danger:hover[b-la6fimgfen] {
    background: rgba(163, 45, 45, 0.06);
}

.sp-divider[b-la6fimgfen] {
    height: 1px;
    background: #EAE3D2;
    margin: 14px -8px;
}

.kbd-hint-dark[b-la6fimgfen] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EAE3D2;
    border: 1px solid #D3D1C7;
    color: #5F5E5A;
    font-family: 'Figtree', sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    min-width: 18px;
    margin-left: auto;
}

/* === TOAST === */
.toast[b-la6fimgfen] {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #141619;
    color: #FFFFFF;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(20, 22, 25, 0.08),
                0 16px 32px rgba(20, 22, 25, 0.10);
}
.toast.show[b-la6fimgfen] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* === KEYBOARD ONBOARDING HINT === */
.kbd-onboard[b-la6fimgfen] {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 22, 25, 0.92);
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 8;
    pointer-events: none;
}
.kbd-onboard.show[b-la6fimgfen] {
    opacity: 1;
}

/* === WIDGETS === */
.widget[b-la6fimgfen] {
    position: absolute;
    cursor: default;
    user-select: none;
    transition: box-shadow 0.12s ease;
}

.widget .w-content[b-la6fimgfen] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* === Widget Texto: contenedor === */
.widget .w-textbox[b-la6fimgfen] {
    display: block;            /* override .w-content flex */
    align-items: initial;
    justify-content: initial;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(20,22,25,0.08),
                0 8px 24px rgba(20,22,25,0.06);
    color: var(--carbon-1, #141619);
    font-family: 'Figtree', sans-serif;
    overflow: auto;
    text-align: left;
    box-sizing: border-box;
}

/* Título h4 */
.widget .w-textbox h4[b-la6fimgfen] {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--carbon-1, #141619);
}

/* Párrafos p */
.widget .w-textbox p[b-la6fimgfen] {
    margin: 4px 0;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--carbon-1, #141619);
}

/* Sub-encabezados label-row */
.widget .w-textbox .label-row[b-la6fimgfen] {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--carbon-2, #1E2126);
}

.widget .w-textbox .label-row:first-child[b-la6fimgfen] {
    margin-top: 0;
}

.widget .w-textbox h4:first-child[b-la6fimgfen] {
    margin-top: 0;
}

.widget .w-textbox p:first-child[b-la6fimgfen] {
    margin-top: 0;
}

/* === Modo edición === */
.widget.editing[b-la6fimgfen] {
    z-index: 9999 !important;
}

.widget.editing .w-textbox[b-la6fimgfen] {
    cursor: text;
    box-shadow: 0 0 0 2px #6EC6C8, 0 2px 12px rgba(110,198,200,0.25);
}

.widget.editing .w-textbox [contenteditable="true"][b-la6fimgfen] {
    outline: none;
    border-radius: 4px;
    transition: background 0.15s;
}

.widget.editing .w-textbox [contenteditable="true"]:focus[b-la6fimgfen] {
    background: rgba(110, 198, 200, 0.06);
}

.widget.editing .w-textbox [contenteditable="true"]:empty[b-la6fimgfen]::before {
    content: "Escribe aquí...";
    color: #aaa;
    font-style: italic;
    pointer-events: none;
}

/* Bloque activo durante edicion (Sprint 12.5) */
[b-la6fimgfen] .widget.editing [data-bloque-activo="true"] {
    border-left: 2.5px solid #2D7FF9;
    padding-left: 8px;
    margin-left: -10.5px;
    transition: border-color 0.15s, padding-left 0.15s;
}

.widget .w-imagen[b-la6fimgfen],
.widget .w-reloj[b-la6fimgfen],
.widget .w-timer[b-la6fimgfen] {
    background: rgba(20,22,25,0.04);
    border: 1.5px dashed rgba(20,22,25,0.2);
    border-radius: 8px;
    color: var(--carbon-5, #888780);
    font-size: 12px;
    font-style: italic;
}

/* Widget imagen con foto real: sin borde dashed ni fondo placeholder */
.widget .w-imagen-llena[b-la6fimgfen] {
    background: none;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

/* === Widget seleccionado === */
.widget.selected[b-la6fimgfen] {
    outline: 2px solid #2D7FF9;
    outline-offset: 2px;
    z-index: 1000 !important;
}

.widget.selected:not([data-bloqueado="true"])[b-la6fimgfen] {
    cursor: grab;
}

.widget.selected[data-bloqueado="true"][b-la6fimgfen] {
    cursor: not-allowed;
}

/* Durante drag activo */
.widget.dragging[b-la6fimgfen] {
    cursor: grabbing !important;
    transition: none !important;
    user-select: none;
    box-shadow: 0 8px 32px rgba(20, 22, 25, 0.18);
}

/* Durante resize activo */
.widget.resizing[b-la6fimgfen] {
    transition: none !important;
    user-select: none;
    box-shadow: 0 8px 32px rgba(20, 22, 25, 0.18);
}

/* Durante rotate activo */
.widget.rotating[b-la6fimgfen] {
    transition: none !important;
    user-select: none;
    box-shadow: 0 8px 32px rgba(20, 22, 25, 0.18);
}

/* Ocultar mini-bar durante drag/resize/rotate */
.canvas:has(.widget.dragging) .ctx-bar[b-la6fimgfen],
.canvas:has(.widget.resizing) .ctx-bar[b-la6fimgfen],
.canvas:has(.widget.rotating) .ctx-bar[b-la6fimgfen] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.ctx-bar[b-la6fimgfen] {
    transition: opacity 0.15s ease;
}

/* === Handles de resize === */
.handle[b-la6fimgfen] {
    position: absolute;
    background: white;
    border: 2px solid #2D7FF9;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10;
    box-sizing: border-box;
}

.handle.tl[b-la6fimgfen] { top: -7px; left: -7px; cursor: nwse-resize; }
.handle.tr[b-la6fimgfen] { top: -7px; right: -7px; cursor: nesw-resize; }
.handle.bl[b-la6fimgfen] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.handle.br[b-la6fimgfen] { bottom: -7px; right: -7px; cursor: nwse-resize; }

.handle.t[b-la6fimgfen] {
    top: -7px; left: 50%; transform: translateX(-50%);
    cursor: ns-resize; border-radius: 4px; width: 16px; height: 6px;
}
.handle.b[b-la6fimgfen] {
    bottom: -7px; left: 50%; transform: translateX(-50%);
    cursor: ns-resize; border-radius: 4px; width: 16px; height: 6px;
}
.handle.l[b-la6fimgfen] {
    left: -7px; top: 50%; transform: translateY(-50%);
    cursor: ew-resize; border-radius: 4px; width: 6px; height: 16px;
}
.handle.r[b-la6fimgfen] {
    right: -7px; top: 50%; transform: translateY(-50%);
    cursor: ew-resize; border-radius: 4px; width: 6px; height: 16px;
}

.handle.rotate[b-la6fimgfen] {
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    background: white;
    border: 2px solid #2D7FF9;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2D7FF9;
}

.handle.rotate:active[b-la6fimgfen] { cursor: grabbing; }

.handle.rotate[b-la6fimgfen]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 8px;
    background: #2D7FF9;
}

/* === Mini-bar contextual === */
.ctx-bar[b-la6fimgfen] {
    position: absolute;
    background: white;
    border-radius: 10px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(20,22,25,0.08), 0 12px 32px rgba(20,22,25,0.12);
    z-index: 1100;
}

.ctx-btn[b-la6fimgfen] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444441;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}

.ctx-btn:hover[b-la6fimgfen] {
    background: #F4F0E6;
    color: #141619;
}

.ctx-btn.ctx-btn-danger[b-la6fimgfen] {
    color: #A32D2D;
}

.ctx-btn.ctx-btn-danger:hover[b-la6fimgfen] {
    background: rgba(163, 45, 45, 0.08);
    color: #A32D2D;
}

.ctx-divider[b-la6fimgfen] {
    width: 1px;
    height: 18px;
    background: #EAE3D2;
    margin: 0 2px;
}

/* === SNAP LINES === */
.snap-line[b-la6fimgfen] {
    position: absolute;
    background: #1D9E75;
    pointer-events: none;
    z-index: 999;
    opacity: 0.85;
    box-shadow: 0 0 6px rgba(29, 158, 117, 0.5);
}

.snap-line-vertical[b-la6fimgfen] {
    width: 1.5px;
    top: 0;
    bottom: 0;
}

.snap-line-horizontal[b-la6fimgfen] {
    height: 1.5px;
    left: 0;
    right: 0;
}

/* === AUTOSAVE INDICATOR === */
.autosave-indicator[b-la6fimgfen] {
    font-size: 11px;
    color: var(--carbon-5, #888780);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.autosave-indicator.saving[b-la6fimgfen] {
    color: var(--carbon-3, #444441);
}

.autosave-indicator.saved[b-la6fimgfen] {
    color: #1D9E75;
}

.autosave-spinner[b-la6fimgfen] {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--cream-deep, #EAE3D2);
    border-top-color: #1D9E75;
    border-radius: 50%;
    animation: spin-b-la6fimgfen 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin-b-la6fimgfen {
    to { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
    .home-btn[b-la6fimgfen], .float-icon-btn[b-la6fimgfen], .group-chip[b-la6fimgfen] {
        height: 38px;
    }
    .home-btn[b-la6fimgfen], .float-icon-btn[b-la6fimgfen] {
        width: 38px;
    }
    .side-panel[b-la6fimgfen] {
        width: 100%;
    }
}

/* === Side panel content styles (Reloj y Timer) === */
.sp-field-row[b-la6fimgfen] {
    display: flex;
    gap: 10px;
}

.sp-field-row select[b-la6fimgfen] {
    flex: 1;
    padding: 12px 14px;
    border: 1.5px solid #D0D0D0;
    border-radius: 10px;
    background: white;
    font-size: 15px;
    color: #1E2126;
    cursor: pointer;
}

.sp-sound-btn[b-la6fimgfen] {
    flex: 0 0 50px;
    background: #F5F5F5;
    border: 1.5px solid #D0D0D0;
    border-radius: 10px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-radio[b-la6fimgfen] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #1E2126;
}

.sp-radio input[type="radio"][b-la6fimgfen] { accent-color: #6366F1; }

.sp-toggle-row[b-la6fimgfen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #1E2126;
}

.sp-switch[b-la6fimgfen] {
    width: 44px;
    height: 24px;
    background: #E0E0E0;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.sp-switch.on[b-la6fimgfen] { background: #6366F1; }

.sp-switch[b-la6fimgfen]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: left 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.sp-switch.on[b-la6fimgfen]::after { left: 22px; }

.w-reloj-host[b-la6fimgfen], .w-timer-host[b-la6fimgfen] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* /Pages/PizarronHome.razor.rz.scp.css */
.pzh-page[b-wrc4kwm1it] {
    padding: 32px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.pzh-header[b-wrc4kwm1it] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.pzh-header-left[b-wrc4kwm1it] {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pzh-header-icon[b-wrc4kwm1it] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #6DC7D0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}
.pzh-title[b-wrc4kwm1it] {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    color: #141619;
    margin: 0;
    line-height: 1.2;
}
.pzh-subtitle[b-wrc4kwm1it] {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: #5F5E5A;
    margin: 2px 0 0;
}
.pzh-btn-nueva[b-wrc4kwm1it] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: #1D9E75;
    color: #fff;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pzh-btn-nueva:hover:not(:disabled)[b-wrc4kwm1it] {
    background: #0F6E56;
}
.pzh-btn-nueva:disabled[b-wrc4kwm1it] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pill proxima clase */
.pzh-pill[b-wrc4kwm1it] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #F1EFE8;
    margin-bottom: 20px;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: #444441;
}
.pzh-pill--hoy[b-wrc4kwm1it] {
    background: #E1F5EE;
    color: #0F6E56;
}
.pzh-pill-icon[b-wrc4kwm1it] {
    font-size: 18px;
}
.pzh-pill-text[b-wrc4kwm1it] {
    line-height: 1.4;
}
.pzh-pill-badge[b-wrc4kwm1it] {
    padding: 2px 10px;
    border-radius: 12px;
    background: #1D9E75;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* Toolbar */
.pzh-toolbar[b-wrc4kwm1it] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
.pzh-search[b-wrc4kwm1it] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 360px;
    background: #fff;
    border: 1px solid #D3D1C7;
    border-radius: 10px;
    padding: 0 12px;
    transition: border-color 0.15s;
}
.pzh-search:focus-within[b-wrc4kwm1it] {
    border-color: #6DC7D0;
}
.pzh-search .material-symbols-rounded[b-wrc4kwm1it] {
    font-size: 20px;
    color: #888780;
}
.pzh-search input[b-wrc4kwm1it] {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    padding: 10px 0;
    width: 100%;
    color: #141619;
}
.pzh-search input[b-wrc4kwm1it]::placeholder {
    color: #B4B2A9;
}
.pzh-filtro-grupo[b-wrc4kwm1it] {
    padding: 10px 14px;
    border: 1px solid #D3D1C7;
    border-radius: 10px;
    background: #fff;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: #444441;
    cursor: pointer;
}
.pzh-filtro-grupo:disabled[b-wrc4kwm1it] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Grid */
.pzh-grid[b-wrc4kwm1it] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.pzh-card[b-wrc4kwm1it] {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20,22,25,0.04), 0 4px 12px rgba(20,22,25,0.06);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}
.pzh-card:hover[b-wrc4kwm1it] {
    box-shadow: 0 2px 4px rgba(20,22,25,0.05), 0 8px 24px rgba(20,22,25,0.08);
    transform: translateY(-2px);
}
.pzh-card-thumb[b-wrc4kwm1it] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #EAE3D2;
    overflow: hidden;
}
.pzh-card-thumb img[b-wrc4kwm1it] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pzh-card-placeholder[b-wrc4kwm1it] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #B4B2A9;
}
.pzh-card-placeholder .material-symbols-rounded[b-wrc4kwm1it] {
    font-size: 40px;
}
.pzh-card--nueva .pzh-card-placeholder[b-wrc4kwm1it] {
    background: #F4F0E6;
    color: #888780;
}
.pzh-card--nueva .pzh-card-placeholder .material-symbols-rounded[b-wrc4kwm1it] {
    font-size: 48px;
}
.pzh-card-pantallas[b-wrc4kwm1it] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(20,22,25,0.72);
    color: #fff;
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}
.pzh-card-body[b-wrc4kwm1it] {
    padding: 12px 14px 14px;
}
.pzh-card-title[b-wrc4kwm1it] {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #141619;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pzh-card-grupo[b-wrc4kwm1it] {
    display: inline-block;
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    color: #0C447C;
    background: #E6F1FB;
    padding: 1px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
}
.pzh-card-meta[b-wrc4kwm1it] {
    display: block;
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    color: #888780;
    margin-top: 4px;
}

/* Loading */
.pzh-loading[b-wrc4kwm1it] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    color: #888780;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
}

/* Empty state */
.pzh-empty[b-wrc4kwm1it] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    text-align: center;
}
.pzh-empty-icon[b-wrc4kwm1it] {
    font-size: 56px;
    color: #D3D1C7;
    margin-bottom: 16px;
}
.pzh-empty h2[b-wrc4kwm1it] {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: #444441;
    margin: 0 0 8px;
    font-weight: 500;
}
.pzh-empty p[b-wrc4kwm1it] {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: #888780;
    margin: 0 0 20px;
}

/* Responsive */
@media (max-width: 1100px) {
    .pzh-grid[b-wrc4kwm1it] {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 860px) {
    .pzh-grid[b-wrc4kwm1it] {
        grid-template-columns: repeat(2, 1fr);
    }
    .pzh-page[b-wrc4kwm1it] {
        padding: 24px 20px;
    }
}
@media (max-width: 540px) {
    .pzh-grid[b-wrc4kwm1it] {
        grid-template-columns: 1fr;
    }
    .pzh-header[b-wrc4kwm1it] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .pzh-toolbar[b-wrc4kwm1it] {
        flex-direction: column;
    }
    .pzh-search[b-wrc4kwm1it] {
        max-width: 100%;
    }
}
/* /Pages/PuntosExtra.razor.rz.scp.css */
/* === Puntos Extra · v2 wrapper (Fase D) === */
.pe-page[b-tdi4d8evnk] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.pe-bc[b-tdi4d8evnk] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.pe-bc .material-symbols-rounded[b-tdi4d8evnk] { font-size: 14px !important; }
.pe-bc a[b-tdi4d8evnk] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.pe-bc a:hover[b-tdi4d8evnk] { color: var(--brand-teal-deep); }
.pe-sep[b-tdi4d8evnk] { color: var(--text-muted); }
.pe-clase[b-tdi4d8evnk] { color: var(--text-secondary); font-weight: 500; }
.pe-current[b-tdi4d8evnk] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.pe-h[b-tdi4d8evnk] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.pe-h-icon[b-tdi4d8evnk] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #1D9E75, #047857);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(29, 158, 117, 0.25);
}
.pe-h-icon .material-symbols-rounded[b-tdi4d8evnk] { font-size: 24px !important; }
.pe-h-block[b-tdi4d8evnk] { flex: 1; min-width: 0; }
.pe-h-title[b-tdi4d8evnk] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.pe-h-sub[b-tdi4d8evnk] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

.pe-periodo[b-tdi4d8evnk] { font-size: 12px; color: #888; margin-bottom: 14px; display: flex; align-items: center; gap: 4px; }
.pe-periodo strong[b-tdi4d8evnk] { color: var(--pe-primary); }

/* Pills */
.class-pills[b-tdi4d8evnk] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-tdi4d8evnk] {
    padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer;
    border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s;
}
.pill:hover[b-tdi4d8evnk] { border-color: var(--pe-primary); color: var(--pe-primary); }
.theme-decimas .pill.active[b-tdi4d8evnk] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }
.theme-puntos .pill.active[b-tdi4d8evnk] { background: #EF9F27; color: #fff; border-color: #EF9F27; }

/* Loading */
.loading-state[b-tdi4d8evnk] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-tdi4d8evnk] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-tdi4d8evnk] { transform: rotate(360deg); } }

/* ===== THEME VARIABLES ===== */
.theme-decimas[b-tdi4d8evnk] {
    --pe-primary: #4BA8AA;
    --pe-primary-light: #6EC6C8;
    --pe-bg: #E8F4F8;
    --pe-dark: #3A8E90;
    --pe-text-on-bg: #3A8E90;
    --pe-text-on-primary: #fff;
    --pe-border: #B5DEDE;
}
.theme-puntos[b-tdi4d8evnk] {
    --pe-primary: #EF9F27;
    --pe-primary-light: #FAC775;
    --pe-bg: #FAEEDA;
    --pe-dark: #BA7517;
    --pe-text-on-bg: #854F0B;
    --pe-text-on-primary: #fff;
    --pe-border: #F4C28A;
}

/* Topbar */
.pe-topbar[b-tdi4d8evnk] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.pe-mode-toggle[b-tdi4d8evnk] {
    display: flex; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--pe-primary);
}
.pe-mode-btn[b-tdi4d8evnk] {
    padding: 8px 28px; font-size: 13px; font-weight: 500; cursor: pointer;
    border: none; background: transparent; color: var(--pe-primary);
    transition: all 0.15s; font-family: inherit;
}
.pe-mode-btn.active[b-tdi4d8evnk] { background: var(--pe-primary); color: var(--pe-text-on-primary); }
.pe-search[b-tdi4d8evnk] {
    display: flex; align-items: center; gap: 5px; border: 1px solid #ddd;
    border-radius: 8px; padding: 6px 10px; width: 200px;
}
.pe-search input[b-tdi4d8evnk] { border: none; outline: none; font-size: 12px; width: 100%; background: transparent; font-family: inherit; }

/* Info banner */
.pe-info-banner[b-tdi4d8evnk] {
    padding: 10px 14px; font-size: 12px; line-height: 1.5; margin-bottom: 16px;
    background: var(--pe-bg); color: var(--pe-text-on-bg);
    border-left: 3px solid var(--pe-primary); border-radius: 0;
}
.pe-info-banner strong[b-tdi4d8evnk] { font-weight: 500; }

/* Filters */
.pe-filters[b-tdi4d8evnk] { display: flex; gap: 6px; margin-bottom: 14px; }
.pe-fc[b-tdi4d8evnk] {
    padding: 4px 10px; border-radius: 6px; font-size: 11px; border: 1px solid #ddd;
    cursor: pointer; background: transparent; color: #888; transition: all 0.15s; font-family: inherit;
}
.pe-fc:hover[b-tdi4d8evnk] { border-color: var(--pe-primary); color: var(--pe-primary); }
.pe-fc.active[b-tdi4d8evnk] { background: var(--pe-primary); color: #fff; border-color: var(--pe-primary); }

/* Summary */
.pe-summary[b-tdi4d8evnk] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.pe-sbox[b-tdi4d8evnk] { text-align: center; padding: 8px; border-radius: 8px; background: var(--pe-bg); color: var(--pe-text-on-bg); }
.pe-sbox-num[b-tdi4d8evnk] { font-size: 18px; font-weight: 500; }
.pe-sbox-label[b-tdi4d8evnk] { font-size: 10px; margin-top: 1px; }

/* List */
.pe-list[b-tdi4d8evnk] { border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }
.pe-list-header[b-tdi4d8evnk] {
    display: grid; grid-template-columns: minmax(0, 1fr) 100px 130px;
    align-items: center; padding: 10px 16px; font-size: 12px; font-weight: 500; gap: 8px;
    background: var(--pe-bg); color: var(--pe-text-on-bg);
}
.pe-list-row[b-tdi4d8evnk] {
    display: grid; grid-template-columns: minmax(0, 1fr) 100px 130px;
    align-items: center; padding: 10px 16px; border-bottom: 0.5px solid #eee; gap: 8px;
    transition: background 0.1s;
}
.pe-list-row:last-child[b-tdi4d8evnk] { border-bottom: none; }
.theme-decimas .pe-list-row:hover[b-tdi4d8evnk] { background: rgba(75,168,170,0.04); }
.theme-puntos .pe-list-row:hover[b-tdi4d8evnk] { background: rgba(239,159,39,0.04); }

.pe-col-name[b-tdi4d8evnk] { overflow: hidden; }
.pe-alumno-name[b-tdi4d8evnk] {
    font-size: 13px; font-weight: 500; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; display: block;
}
.pe-col-acum[b-tdi4d8evnk] { font-size: 14px; font-weight: 500; text-align: center; }
.pe-col-ctrl[b-tdi4d8evnk] { text-align: center; }

.pe-controls[b-tdi4d8evnk] { display: flex; align-items: center; gap: 4px; justify-content: center; }
.pe-ctrl-minus[b-tdi4d8evnk] {
    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--pe-primary);
    color: var(--pe-primary); background: transparent; display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: all 0.12s;
}
.pe-ctrl-minus:hover[b-tdi4d8evnk] { background: var(--pe-bg); }
.pe-ctrl-minus:active[b-tdi4d8evnk] { transform: scale(0.92); }
.pe-ctrl-val[b-tdi4d8evnk] {
    min-width: 44px; height: 32px; border-radius: 6px; display: flex; align-items: center;
    justify-content: center; font-size: 14px; font-weight: 500;
    background: var(--pe-bg); color: var(--pe-text-on-bg);
}
.pe-ctrl-plus[b-tdi4d8evnk] {
    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--pe-primary);
    background: var(--pe-primary); color: var(--pe-text-on-primary); display: flex;
    align-items: center; justify-content: center; cursor: pointer; transition: all 0.12s;
}
.pe-ctrl-plus:hover[b-tdi4d8evnk] { background: var(--pe-dark); border-color: var(--pe-dark); }
.pe-ctrl-plus:active[b-tdi4d8evnk] { transform: scale(0.92); }

.acum-pos[b-tdi4d8evnk] { color: #639922; }
.acum-zero[b-tdi4d8evnk] { color: #bbb; }
.acum-neg[b-tdi4d8evnk] { color: #E24B4A; }

.pe-autosave[b-tdi4d8evnk] {
    text-align: center; font-size: 11px; color: #aaa; margin-top: 10px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* Responsive */
@@media (max-width: 600px) {
    .pe-page[b-tdi4d8evnk] { padding: 12px; }
    .pe-topbar[b-tdi4d8evnk] { flex-direction: column; align-items: stretch; }
    .pe-search[b-tdi4d8evnk] { width: 100%; }
    .pe-mode-toggle[b-tdi4d8evnk] { width: 100%; }
    .pe-mode-btn[b-tdi4d8evnk] { flex: 1; }
    .pe-list-header[b-tdi4d8evnk], .pe-list-row[b-tdi4d8evnk] { grid-template-columns: minmax(0, 1fr) 60px 120px; }
}
@@media (max-width: 480px) {
    .pe-summary[b-tdi4d8evnk] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/ReporteAsistencia.razor.rz.scp.css */
/* === Reporte Asistencia · v2 wrapper (Fase D) === */
.ra-container[b-s4ubuaxhht] {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* === Breadcrumb v2 === */
.ra-bc[b-s4ubuaxhht] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.ra-bc .material-symbols-rounded[b-s4ubuaxhht] { font-size: 14px !important; }
.ra-bc a[b-s4ubuaxhht] { color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.ra-bc a:hover[b-s4ubuaxhht] { color: var(--brand-teal-deep); }
.ra-sep[b-s4ubuaxhht] { color: var(--text-muted); }
.ra-clase[b-s4ubuaxhht] { color: var(--text-secondary); font-weight: 500; }
.ra-current[b-s4ubuaxhht] { color: var(--text-primary); font-weight: 600; }

/* === Header v2 === */
.ra-h[b-s4ubuaxhht] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.ra-h-icon[b-s4ubuaxhht] {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #BA7517, #92400E);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(186, 117, 23, 0.25);
}
.ra-h-icon .material-symbols-rounded[b-s4ubuaxhht] { font-size: 24px !important; }
.ra-h-block[b-s4ubuaxhht] { flex: 1; min-width: 0; }
.ra-h-title[b-s4ubuaxhht] {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.1;
    margin: 0;
}
.ra-h-sub[b-s4ubuaxhht] { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

/* Pills */
.class-pills[b-s4ubuaxhht] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pill[b-s4ubuaxhht] { padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid #ddd; color: #666; background: transparent; transition: all 0.15s; }
.pill:hover[b-s4ubuaxhht] { border-color: #4BA8AA; color: #4BA8AA; }
.pill.active[b-s4ubuaxhht] { background: #4BA8AA; color: #fff; border-color: #4BA8AA; }

/* Loading */
.loading-state[b-s4ubuaxhht] { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; gap: 16px; color: #999; font-size: 14px; }
.spinner[b-s4ubuaxhht] { width: 36px; height: 36px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-s4ubuaxhht] { transform: rotate(360deg); } }

/* Toolbar */
.ra-toolbar[b-s4ubuaxhht] { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ra-search[b-s4ubuaxhht] { display: flex; align-items: center; gap: 5px; border: 1px solid #ddd; border-radius: 8px; padding: 6px 10px; width: 200px; }
.ra-search input[b-s4ubuaxhht] { border: none; outline: none; font-size: 12px; width: 100%; background: transparent; font-family: inherit; }
.ra-periodo[b-s4ubuaxhht] { padding: 6px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; font-family: inherit; }
.ra-btn[b-s4ubuaxhht] { display: flex; align-items: center; gap: 4px; border: 1px solid #ddd; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; background: #fff; color: #666; font-family: inherit; transition: all 0.15s; }
.ra-btn:hover[b-s4ubuaxhht] { border-color: #4BA8AA; color: #4BA8AA; }
.ra-btn .material-icons[b-s4ubuaxhht] { font-size: 14px; }
.ra-btn-save[b-s4ubuaxhht] { background: #6EC6C8; color: #fff; border-color: #6EC6C8; margin-left: auto; }
.ra-btn-save:hover[b-s4ubuaxhht] { background: #4BA8AA; }
.ra-btn-save:disabled[b-s4ubuaxhht] { opacity: 0.5; cursor: not-allowed; }

/* Legend */
.ra-legend[b-s4ubuaxhht] { display: flex; gap: 12px; margin-bottom: 12px; font-size: 12px; color: #888; }
.ra-lg[b-s4ubuaxhht] { display: flex; align-items: center; gap: 4px; }
.ra-lg-dot[b-s4ubuaxhht] { width: 8px; height: 8px; border-radius: 2px; }

/* Dashboard */
.ra-dash[b-s4ubuaxhht] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ra-dc[b-s4ubuaxhht] { text-align: center; padding: 8px; border-radius: 8px; }
.ra-dc-n[b-s4ubuaxhht] { font-size: 18px; font-weight: 500; }
.ra-dc-l[b-s4ubuaxhht] { font-size: 10px; margin-top: 2px; }
.ra-dc-teal[b-s4ubuaxhht] { background: #E8F4F8; color: #3A8E90; }
.ra-dc-green[b-s4ubuaxhht] { background: #EAF3DE; color: #3B6D11; }
.ra-dc-red[b-s4ubuaxhht] { background: #FCEBEB; color: #A32D2D; }
.ra-dc-purple[b-s4ubuaxhht] { background: #F3F0F8; color: #7B68A8; }

/* Table */
.ra-table-wrap[b-s4ubuaxhht] { border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }
.ra-table-scroll[b-s4ubuaxhht] { overflow-x: auto; }
.ra-table[b-s4ubuaxhht] { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1000px; }
.ra-table thead[b-s4ubuaxhht] { position: sticky; top: 0; z-index: 10; }
.ra-table th[b-s4ubuaxhht] { background: #E8F4F8; font-weight: 500; font-size: 12px; padding: 10px 6px; text-align: center; border-bottom: 2px solid #6EC6C8; white-space: nowrap; }
.ra-th-al[b-s4ubuaxhht] { text-align: left; padding-left: 14px; min-width: 220px; position: sticky; left: 0; z-index: 15; background: #E8F4F8; box-shadow: 4px 0 6px -2px rgba(0,0,0,0.08); }
.ra-th-cnt[b-s4ubuaxhht] { min-width: 50px; }
.ra-th-dt[b-s4ubuaxhht] { min-width: 110px; font-size: 11px; }
.ra-table td[b-s4ubuaxhht] { padding: 6px; text-align: center; font-size: 13px; border-bottom: 1px solid #eee; }
.ra-td-al[b-s4ubuaxhht] { text-align: left; padding-left: 14px; min-width: 220px; position: sticky; left: 0; z-index: 5; background: #fff; font-weight: 500; box-shadow: 4px 0 6px -2px rgba(0,0,0,0.05); }
.ra-table tr:hover td[b-s4ubuaxhht] { background: rgba(75,168,170,0.03); }
.ra-table tr:hover .ra-td-al[b-s4ubuaxhht] { background: #EFF8F8; }
.ra-cnt-a[b-s4ubuaxhht] { color: #639922; font-weight: 500; }
.ra-cnt-f[b-s4ubuaxhht] { color: #E24B4A; font-weight: 500; }

/* Attendance cell */
.ra-att-cell[b-s4ubuaxhht] { position: relative; }
.ra-att-btn[b-s4ubuaxhht] {
    display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px;
    border-radius: 6px; font-size: 11px; font-weight: 500; cursor: pointer;
    border: 1px solid; min-width: 80px; justify-content: center; transition: all 0.1s;
}
.ra-att-btn:hover[b-s4ubuaxhht] { filter: brightness(0.95); }
.ra-arrow[b-s4ubuaxhht] { font-size: 10px; opacity: 0.5; margin-left: 2px; }

/* State colors */
.ra-att-a[b-s4ubuaxhht] { background: #EAF3DE; color: #3B6D11; border-color: #C0DD97; }
.ra-att-f[b-s4ubuaxhht] { background: #FCEBEB; color: #A32D2D; border-color: #F7C1C1; }
.ra-att-r[b-s4ubuaxhht] { background: #FAEEDA; color: #854F0B; border-color: #FAC775; }
.ra-att-j[b-s4ubuaxhht] { background: #F3F0F8; color: #7B68A8; border-color: #D5CCE8; }
.ra-att-e[b-s4ubuaxhht] { background: #f9f9f9; color: #bbb; border-color: #e0e0e0; }

/* Dropdown */
.ra-dropdown[b-s4ubuaxhht] {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 4px;
    z-index: 20; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ra-dd-item[b-s4ubuaxhht] { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.ra-dd-item:hover[b-s4ubuaxhht] { background: #f5f5f5; }
.ra-dd-item .material-icons[b-s4ubuaxhht] { font-size: 14px; }
.ra-dd-a[b-s4ubuaxhht] { color: #3B6D11; }
.ra-dd-a .material-icons[b-s4ubuaxhht] { color: #639922; }
.ra-dd-f[b-s4ubuaxhht] { color: #A32D2D; }
.ra-dd-f .material-icons[b-s4ubuaxhht] { color: #E24B4A; }
.ra-dd-r[b-s4ubuaxhht] { color: #854F0B; }
.ra-dd-r .material-icons[b-s4ubuaxhht] { color: #EF9F27; }
.ra-dd-j[b-s4ubuaxhht] { color: #7B68A8; }
.ra-dd-j .material-icons[b-s4ubuaxhht] { color: #9B59B6; }

/* Empty */
.ra-empty[b-s4ubuaxhht] { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 8px; color: #ccc; font-size: 13px; }

/* Responsive */
@@media (max-width: 768px) {
    .ra-container[b-s4ubuaxhht] { padding: 12px; }
    .ra-th-al[b-s4ubuaxhht], .ra-td-al[b-s4ubuaxhht] { min-width: 170px; }
}
@@media (max-width: 600px) {
    .ra-toolbar[b-s4ubuaxhht] { flex-direction: column; align-items: stretch; }
    .ra-search[b-s4ubuaxhht] { width: 100%; }
    .ra-btn-save[b-s4ubuaxhht] { margin-left: 0; }
    .ra-dash[b-s4ubuaxhht] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Showcase.razor.rz.scp.css */
.sw-page[b-qs7e3zec1e] {
    background:
        radial-gradient(circle at 15% 10%, rgba(110, 198, 200, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(217, 119, 6, 0.03) 0%, transparent 50%),
        var(--bg);
    min-height: 100%;
}

/* ===== Banner ===== */
.sw-banner[b-qs7e3zec1e] {
    background: linear-gradient(135deg, #1E2126 0%, #2A2E35 100%);
    color: #FFFFFF;
    padding: 28px 36px;
    position: relative;
    overflow: hidden;
}

.sw-banner[b-qs7e3zec1e]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 198, 200, 0.25), transparent 65%);
}

.sw-banner-content[b-qs7e3zec1e] { position: relative; z-index: 1; }

.sw-banner-tag[b-qs7e3zec1e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    background: rgba(110, 198, 200, 0.18);
    color: var(--brand-teal);
    border-radius: 20px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sw-banner-tag .msr[b-qs7e3zec1e] { font-size: 13px !important; }

.sw-banner-title[b-qs7e3zec1e] {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.7px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.sw-banner-title em[b-qs7e3zec1e] {
    color: var(--brand-teal);
    font-style: italic;
    font-weight: 500;
}

.sw-banner-desc[b-qs7e3zec1e] {
    font-family: var(--font-sans);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    max-width: 700px;
    margin: 0 0 18px;
}

.sw-banner-meta[b-qs7e3zec1e] {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.sw-meta-item[b-qs7e3zec1e] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sw-meta-item .msr[b-qs7e3zec1e] {
    font-size: 14px !important;
    color: var(--brand-teal);
}

.sw-meta-item strong[b-qs7e3zec1e] { color: #FFFFFF; font-weight: 600; }

/* ===== Sections ===== */
.sw-section[b-qs7e3zec1e] {
    padding: 32px 36px;
    border-bottom: 1px solid var(--border-soft);
}

.sw-section:last-child[b-qs7e3zec1e] { border-bottom: none; }

.sw-mt[b-qs7e3zec1e] { margin-top: 16px; }

/* ===== Layout diagram ===== */
.sw-layout-diagram[b-qs7e3zec1e] {
    display: grid;
    grid-template-columns: 60px 220px 1fr 240px;
    height: 220px;
    border: 1px solid var(--border-med);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.sw-zone[b-qs7e3zec1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    gap: 6px;
    border-right: 1px solid var(--border-med);
    text-align: center;
}

.sw-zone:last-child[b-qs7e3zec1e] { border-right: none; }

.sw-zone-label[b-qs7e3zec1e] {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.sw-zone-size[b-qs7e3zec1e] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}

.sw-zone-desc[b-qs7e3zec1e] {
    font-family: var(--font-sans);
    font-size: 10.5px;
    line-height: 1.45;
    margin-top: 4px;
}

.sw-zone.rail-zone[b-qs7e3zec1e] {
    background: var(--bg-rail);
    color: #FFFFFF;
}
.sw-zone.rail-zone .sw-zone-label[b-qs7e3zec1e] { color: rgba(255,255,255,0.5); }
.sw-zone.rail-zone .sw-zone-size[b-qs7e3zec1e],
.sw-zone.rail-zone .sw-zone-desc[b-qs7e3zec1e] { color: rgba(255,255,255,0.7); }

.sw-zone.sidebar-zone[b-qs7e3zec1e] {
    background: var(--bg-sidebar);
    color: #FFFFFF;
}
.sw-zone.sidebar-zone .sw-zone-label[b-qs7e3zec1e] { color: rgba(255,255,255,0.5); }
.sw-zone.sidebar-zone .sw-zone-size[b-qs7e3zec1e],
.sw-zone.sidebar-zone .sw-zone-desc[b-qs7e3zec1e] { color: rgba(255,255,255,0.7); }

.sw-zone.main-zone[b-qs7e3zec1e] {
    background: var(--bg);
    color: var(--text-primary);
}
.sw-zone.main-zone .sw-zone-label[b-qs7e3zec1e] { color: var(--text-muted); }

.sw-zone.aside-zone[b-qs7e3zec1e] {
    background: var(--bg-cream);
    color: var(--text-primary);
}
.sw-zone.aside-zone .sw-zone-label[b-qs7e3zec1e] { color: var(--text-muted); }

.sw-layout-note[b-qs7e3zec1e] {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 12px 14px;
    background: var(--bg-cream);
    border: 1px dashed var(--border-med);
    border-radius: var(--radius-md);
}

.sw-layout-note strong[b-qs7e3zec1e] { color: var(--text-primary); font-weight: 700; }

/* ===== Token swatches ===== */
.sw-token-group-label[b-qs7e3zec1e] {
    margin-bottom: 14px;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sw-token-grid[b-qs7e3zec1e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.sw-swatch[b-qs7e3zec1e] {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sw-swatch:hover[b-qs7e3zec1e] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.sw-swatch-color[b-qs7e3zec1e] {
    height: 60px;
    border-bottom: 1px solid var(--border-soft);
}

.sw-swatch-info[b-qs7e3zec1e] { padding: 10px 12px; }

.sw-swatch-name[b-qs7e3zec1e] {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.sw-swatch-hex[b-qs7e3zec1e] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.sw-swatch-token[b-qs7e3zec1e] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--brand-teal-deep);
    font-weight: 600;
    margin-top: 3px;
}

/* ===== Type grid ===== */
.sw-type-grid[b-qs7e3zec1e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sw-type-label[b-qs7e3zec1e] {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}

.sw-type-line[b-qs7e3zec1e] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-soft);
}

.sw-type-line:last-child[b-qs7e3zec1e] { border-bottom: none; }

.sw-type-size[b-qs7e3zec1e] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 60px;
}

/* ===== Component cards ===== */
.sw-component-grid[b-qs7e3zec1e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sw-comp-title[b-qs7e3zec1e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}

.sw-comp-title .msr[b-qs7e3zec1e] { font-size: 13px !important; }

.sw-row[b-qs7e3zec1e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.sw-row:last-child[b-qs7e3zec1e] { margin-bottom: 0; }

.sw-row-label[b-qs7e3zec1e] {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    width: 80px;
    flex-shrink: 0;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .sw-section[b-qs7e3zec1e] { padding: 24px 20px; }
    .sw-banner[b-qs7e3zec1e] { padding: 20px; }
    .sw-banner-title[b-qs7e3zec1e] { font-size: 26px; }
    .sw-layout-diagram[b-qs7e3zec1e] { grid-template-columns: 1fr 1fr; height: auto; }
    .sw-type-grid[b-qs7e3zec1e],
    .sw-component-grid[b-qs7e3zec1e] { grid-template-columns: 1fr; }
}