/* ============================================================
   ProjectSuite — Portal Cliente
   Manual de Imagen v1.0 · Dark SaaS + Liquid Glass + Glassmorphism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. VARIABLES ProjectSuite
   ============================================================ */
:root {
    /* Fondos */
    --ps-bg:              #07111F;
    --ps-bg-secondary:    #0F172A;
    --ps-panel:           #111827;
    --ps-card:            rgba(15, 23, 42, 0.72);
    --ps-glass:           rgba(255, 255, 255, 0.07);
    --ps-glass-strong:    rgba(255, 255, 255, 0.09);
    --ps-border:          rgba(148, 163, 184, 0.18);
    --ps-border-strong:   rgba(255, 255, 255, 0.16);

    /* Texto */
    --ps-text:            #F8FAFC;
    --ps-text-soft:       #CBD5E1;
    --ps-text-muted:      #94A3B8;

    /* Paleta corporativa */
    --ps-blue:            #2563EB;
    --ps-blue-electric:   #3B82F6;
    --ps-cyan:            #22D3EE;
    --ps-purple:          #7C3AED;
    --ps-green:           #22C55E;
    --ps-amber:           #F59E0B;
    --ps-red:             #F43F5E;

    /* Geometría */
    --ps-radius-sm:       12px;
    --ps-radius-md:       16px;
    --ps-radius-lg:       22px;
    --ps-radius-xl:       28px;
    --ps-shadow:          0 24px 70px rgba(0, 0, 0, 0.38);

    /* Layout */
    --ps-header-h:        72px;
    --ps-sidebar-w:       248px;
    --ps-font:            'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--ps-font);
    color: var(--ps-text);
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.28), transparent 32%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.22), transparent 35%),
        linear-gradient(135deg, #07111F 0%, #0F172A 48%, #111827 100%);
    background-attachment: fixed;
}

/* Reemplazos globales text-muted / text-primary / text-danger */
.text-muted   { color: var(--ps-text-muted) !important; }
.text-primary { color: var(--ps-blue-electric) !important; }
.text-danger  { color: var(--ps-red) !important; }
.text-success { color: var(--ps-green) !important; }

/* Scrollbar sutil */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(148,163,184,.20); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.35); }

/* ============================================================
   3. ORBES DE FONDO (atmósfera Liquid Glass)
   ============================================================ */
.portal-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.portal-bg-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.portal-bg-orb-1 {
    width: 720px; height: 720px;
    background: radial-gradient(circle at 40% 40%, rgba(37,99,235,0.40) 0%, transparent 65%);
    top: -220px; left: -180px;
    animation: orbFloat1 24s ease-in-out infinite;
}
.portal-bg-orb-2 {
    width: 620px; height: 620px;
    background: radial-gradient(circle at 60% 60%, rgba(124,58,237,0.32) 0%, transparent 65%);
    bottom: -120px; right: -160px;
    animation: orbFloat2 30s ease-in-out infinite;
}
.portal-bg-orb-3 {
    width: 460px; height: 460px;
    background: radial-gradient(circle at 50% 50%, rgba(34,211,238,0.20) 0%, transparent 65%);
    top: 45%; left: 48%;
    transform: translate(-50%, -50%);
    animation: orbFloat3 19s ease-in-out infinite;
}
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0,    0)    scale(1);    }
    33%      { transform: translate(70px, 90px) scale(1.06); }
    66%      { transform: translate(-50px,40px) scale(0.94); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0,     0)     scale(1);    }
    33%      { transform: translate(-80px,-60px) scale(1.09); }
    66%      { transform: translate(50px, -35px) scale(0.91); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%,-50%) scale(1);    }
    50%      { transform: translate(-50%,-50%) scale(1.18); }
}

/* ============================================================
   4. ACCESO — Pantalla de login del portal
   ============================================================ */
.portal-acceso-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
}

.portal-acceso-wrap {
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
}

.portal-acceso-card {
    background: var(--ps-card);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid var(--ps-border-strong);
    border-radius: var(--ps-radius-xl);
    padding: 2.75rem 2.25rem 2.5rem;
    box-shadow: var(--ps-shadow), 0 0 80px rgba(37,99,235,0.18);
    position: relative;
    overflow: hidden;
}

.portal-acceso-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}

.portal-acceso-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.portal-acceso-logo-img {
    height: 44px;
    width: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 22px rgba(59,130,246,0.55));
}

.portal-acceso-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .35rem;
    letter-spacing: -.025em;
}

.portal-acceso-subtitle {
    color: var(--ps-text-muted);
    font-size: .875rem;
    margin: 0;
}

.portal-acceso-form .form-label {
    color: var(--ps-text-soft);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .4rem;
}

.portal-acceso-form .input-group-text {
    background: rgba(2,6,23,.65);
    border: 1px solid var(--ps-border);
    border-right: none;
    color: var(--ps-text-soft);
    border-radius: 12px 0 0 12px;
}

.portal-acceso-form .form-control,
.portal-acceso-form .form-control-lg {
    background: rgba(2,6,23,.65);
    border: 1px solid var(--ps-border);
    border-left: none;
    color: #fff;
    font-size: .975rem;
    border-radius: 0 12px 12px 0;
    transition: all .2s;
}

.portal-acceso-form .form-control:focus {
    background: rgba(2,6,23,.8);
    border-color: var(--ps-blue-electric);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    color: #fff;
    outline: none;
}

.portal-acceso-form .form-control::placeholder { color: var(--ps-text-muted); }
.portal-acceso-form .form-text { color: var(--ps-text-muted); font-size: .77rem; }

.portal-acceso-trust {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .72rem;
    color: var(--ps-text-muted);
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.portal-acceso-trust .bi { color: var(--ps-blue-electric); font-size: .85rem; }

.portal-acceso-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
    text-align: center;
    font-size: .74rem;
    color: var(--ps-text-muted);
}
.portal-acceso-footer a {
    color: var(--ps-blue-electric);
    text-decoration: none;
    font-weight: 600;
}
.portal-acceso-footer a:hover { text-decoration: underline; }

/* ============================================================
   5. BOTONES ProjectSuite (globales en el portal)
   ============================================================ */
.ps-btn,
.portal-topbar .btn,
.portal-modal .btn,
.portal-filtros-card .btn,
.portal-acceso-form .btn,
.portal-reunion-banner .btn,
.portal-help-card .btn,
#tareasAniosBtns .btn {
    font-family: var(--ps-font);
    font-weight: 600;
    border-radius: var(--ps-radius-sm);
    transition: all .2s ease;
    letter-spacing: -.005em;
}

/* Primary → degradado azul/violeta del manual */
.btn-primary,
.portal-topbar .btn-primary,
.portal-modal .btn-primary,
.portal-filtros-card .btn-primary,
.portal-acceso-form .btn-primary {
    background: linear-gradient(135deg, var(--ps-blue) 0%, var(--ps-purple) 100%) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    padding: .6rem 1.1rem !important;
    box-shadow: 0 12px 30px rgba(37,99,235,.35),
                inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-primary:hover,
.portal-topbar .btn-primary:hover,
.portal-modal .btn-primary:hover,
.portal-filtros-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(37,99,235,.45),
                inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-primary:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* Secondary / outline */
.btn-outline-secondary,
.btn-secondary,
.portal-topbar .btn-outline-secondary {
    background: rgba(255,255,255,.06) !important;
    color: var(--ps-text-soft) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 14px !important;
    padding: .55rem 1rem !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover,
.portal-topbar .btn-outline-secondary:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-color: rgba(148,163,184,.35) !important;
}

/* Danger sutil */
.btn-outline-danger {
    background: rgba(244,63,94,.12) !important;
    color: #FB7185 !important;
    border: 1px solid rgba(244,63,94,.35) !important;
    border-radius: 14px !important;
}
.btn-outline-danger:hover {
    background: rgba(244,63,94,.22) !important;
    color: #fff !important;
}

.btn-outline-warning {
    background: rgba(245,158,11,.12) !important;
    color: #FCD34D !important;
    border: 1px solid rgba(245,158,11,.38) !important;
    border-radius: 14px !important;
}
.btn-outline-warning:hover {
    background: rgba(245,158,11,.22) !important;
    color: #fff !important;
}

.btn-success {
    background: rgba(34,197,94,.20) !important;
    border: 1px solid rgba(34,197,94,.45) !important;
    color: #86EFAC !important;
    border-radius: 14px !important;
}
.btn-success:hover {
    background: rgba(34,197,94,.32) !important;
    color: #fff !important;
}

/* ============================================================
   6. LAYOUT SHELL — Header + Sidebar + Main
   ============================================================ */
.portal-shell {
    display: grid;
    grid-template-columns: var(--ps-sidebar-w) 1fr;
    grid-template-rows: var(--ps-header-h) 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.portal-topbar  { grid-area: header; }
.portal-sidebar { grid-area: sidebar; }
.portal-main    { grid-area: main; }

/* ============================================================
   7. TOPBAR
   ============================================================ */
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--ps-header-h);
    background: rgba(7, 17, 31, 0.72);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.portal-topbar-inner {
    height: 100%;
    padding: 0 1.25rem 0 1.5rem;
    display: grid;
    grid-template-columns: var(--ps-sidebar-w) 1fr auto;
    align-items: center;
    gap: 1.25rem;
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    padding-right: 1rem;
}

.portal-brand-logo { height: 32px; width: auto; flex-shrink: 0; }
.portal-brand-logo--full { height: 36px; }

.portal-brand-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -.02em;
}

/* Chip central con el nombre del cliente */
.portal-project-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .9rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ps-border);
    border-radius: 12px;
    color: var(--ps-text);
    font-weight: 600;
    font-size: .92rem;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.portal-project-chip .bi { color: var(--ps-blue-electric); font-size: 1rem; flex-shrink: 0; }

.portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.portal-topbar-actions .btn { font-size: .85rem; }

/* Pill de usuario (cliente) */
.portal-user-pill {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .3rem .75rem .3rem .3rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ps-border);
    border-radius: 999px;
}

.portal-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ps-blue), var(--ps-purple));
    color: #fff;
    font-weight: 800;
    font-size: .92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.22);
    flex-shrink: 0;
}

.portal-user-meta { display: flex; flex-direction: column; line-height: 1.1; }
.portal-user-name { font-size: .82rem; font-weight: 700; color: #fff; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-user-role { font-size: .7rem; color: var(--ps-text-muted); letter-spacing: .02em; }

/* ============================================================
   8. SIDEBAR
   ============================================================ */
.portal-sidebar {
    background: rgba(7, 17, 31, 0.55);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 1.25rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - var(--ps-header-h));
}

.portal-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.portal-nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem;
    border-radius: var(--ps-radius-sm);
    color: var(--ps-text-soft);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    font-family: var(--ps-font);
    transition: all .18s ease;
    width: 100%;
}

.portal-nav-item .bi { font-size: 1.05rem; color: var(--ps-text-muted); }

.portal-nav-item:hover {
    background: rgba(255,255,255,.04);
    color: #fff;
}
.portal-nav-item:hover .bi { color: var(--ps-text-soft); }

.portal-nav-item.active {
    background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(124,58,237,.22));
    border-color: rgba(59,130,246,.45);
    color: #fff;
    box-shadow: 0 8px 24px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.portal-nav-item.active .bi { color: var(--ps-blue-electric); }

.portal-sidebar-spacer { flex: 1; }

/* Tarjeta de ayuda */
.portal-help-card {
    background: var(--ps-glass);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 1rem;
    text-align: center;
    backdrop-filter: blur(14px);
}

.portal-help-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.35);
    color: var(--ps-blue-electric);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .55rem;
    font-size: 1.1rem;
}

.portal-help-card h5 {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}

.portal-help-card p {
    color: var(--ps-text-muted);
    font-size: .78rem;
    margin: 0 0 .75rem;
    line-height: 1.45;
}

.portal-help-card .btn {
    width: 100%;
    font-size: .82rem;
    padding: .45rem .8rem !important;
}

/* Footer sidebar */
.portal-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: var(--ps-text-muted);
    font-size: .72rem;
}

.portal-sidebar-footer-brand {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: -.01em;
}

.portal-sidebar-footer-brand img { height: 18px; width: auto; }

.portal-sidebar-footer a { color: var(--ps-blue-electric); text-decoration: none; }
.portal-sidebar-footer a:hover { text-decoration: underline; }

/* ============================================================
   9. MAIN CONTENT
   ============================================================ */
.portal-main {
    padding: 1.75rem 2rem 3rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.portal-container { max-width: 1180px; margin: 0 auto; }

/* Cabecera de sección con icono cuadrado grande */
.portal-section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.portal-section-icon {
    width: 56px; height: 56px;
    border-radius: var(--ps-radius-md);
    background: linear-gradient(135deg, var(--ps-blue) 0%, var(--ps-purple) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 14px 30px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.2);
    flex-shrink: 0;
}

.portal-section-title  { font-size: 1.65rem; font-weight: 800; color: #fff; margin: 0 0 .15rem; letter-spacing: -.02em; }
.portal-section-sub    { font-size: .9rem;  color: var(--ps-text-muted); margin: 0; }

/* ============================================================
   10. BANNER DE REUNIÓN
   ============================================================ */
.portal-reunion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    background: var(--ps-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--ps-text);
    font-size: .9rem;
}

.portal-reunion-banner .portal-banner-info {
    display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0;
}
.portal-reunion-banner .portal-banner-info .bi { font-size: 1.1rem; flex-shrink: 0; }
.portal-reunion-banner .portal-banner-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.portal-reunion-banner .btn { font-size: .78rem; padding: .4rem .75rem !important; }

.portal-reunion-confirmada {
    background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(20,83,45,.18));
    border-color: rgba(34,197,94,.35);
    color: #BBF7D0;
}
.portal-reunion-confirmada .bi { color: var(--ps-green); }

.portal-reunion-pendiente {
    background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(120,53,15,.20));
    border-color: rgba(245,158,11,.40);
    color: #FDE68A;
}
.portal-reunion-pendiente .bi { color: var(--ps-amber); }

.portal-reunion-cancelada {
    background: linear-gradient(135deg, rgba(244,63,94,.14), rgba(127,29,29,.18));
    border-color: rgba(244,63,94,.35);
    color: #FECACA;
}
.portal-reunion-cancelada .bi { color: var(--ps-red); }

/* ============================================================
   11. FILTROS
   ============================================================ */
.portal-filtros-card {
    background: var(--ps-card);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--ps-shadow);
    position: relative;
}

.portal-filtros-card::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

.portal-filtros-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: flex-end;
}

.portal-filtros-group { min-width: 0; }

.portal-filtros-label {
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ps-text-muted);
    margin: 0 0 .4rem;
    display: block;
}

.portal-presets { display: flex; flex-wrap: wrap; gap: .4rem; }

.portal-preset {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ps-border);
    border-radius: 10px;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ps-text-soft);
    cursor: pointer;
    transition: all .18s;
    font-family: var(--ps-font);
}

.portal-preset:hover {
    background: rgba(59,130,246,.12);
    border-color: rgba(59,130,246,.35);
    color: #fff;
}

.portal-preset.active {
    background: linear-gradient(135deg, var(--ps-blue) 0%, var(--ps-purple) 100%);
    border-color: rgba(255,255,255,.16);
    color: #fff;
    box-shadow: 0 10px 22px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

.portal-filtros-search-group { flex: 1; min-width: 220px; }

.portal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.portal-search-wrap .bi-search {
    position: absolute;
    left: .85rem;
    color: var(--ps-text-muted);
    pointer-events: none;
}

.portal-search-input {
    width: 100%;
    background: rgba(2,6,23,.55);
    border: 1px solid var(--ps-border);
    border-radius: 12px;
    color: #fff;
    font-family: var(--ps-font);
    font-size: .88rem;
    padding: .55rem 2.4rem .55rem 2.3rem;
    transition: all .18s;
}

.portal-search-input:focus {
    outline: none;
    border-color: var(--ps-blue-electric);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    background: rgba(2,6,23,.75);
}

.portal-search-input::placeholder { color: var(--ps-text-muted); }

.portal-search-clear {
    position: absolute;
    right: .5rem;
    background: transparent;
    border: none;
    color: var(--ps-text-muted);
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: 8px;
    transition: all .15s;
}
.portal-search-clear:hover { background: rgba(255,255,255,.08); color: #fff; }

.portal-filtros-card .form-control,
.portal-filtros-card .form-control-sm {
    background: rgba(2,6,23,.55);
    border: 1px solid var(--ps-border);
    color: #fff;
    border-radius: 10px;
    font-family: var(--ps-font);
}

.portal-filtros-card .form-control:focus {
    border-color: var(--ps-blue-electric);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    color: #fff;
    background: rgba(2,6,23,.75);
}

.portal-filtros-card .form-control[type="date"] { color-scheme: dark; }

/* ============================================================
   12. STATS / RESUMEN
   ============================================================ */
.portal-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.portal-resumen-item {
    background: var(--ps-card);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--ps-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    transition: transform .2s ease;
}

.portal-resumen-item::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

.portal-resumen-item:hover { transform: translateY(-2px); }

.portal-resumen-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: var(--ps-radius-sm);
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.30);
    color: var(--ps-blue-electric);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.portal-resumen-content { min-width: 0; }

.portal-resumen-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ps-text-muted);
    margin-bottom: .2rem;
}

.portal-resumen-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.1;
}

.portal-resumen-foot {
    display: block;
    font-size: .75rem;
    color: var(--ps-text-muted);
    margin-top: .1rem;
}

/* ============================================================
   13. CARD genérica
   ============================================================ */
.portal-card {
    background: var(--ps-card);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    box-shadow: var(--ps-shadow);
    position: relative;
    isolation: isolate;
}

.portal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    pointer-events: none;
    z-index: 2;
}

.portal-card-body { padding: 1.25rem; position: relative; z-index: 1; }

.portal-card-tall { min-height: 340px; }

.portal-tab-content { position: relative; }

.portal-filtros-custom {
    margin-top: .85rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-sm);
}

/* ============================================================
   14. TABLA Informe
   ============================================================ */
.portal-table {
    --bs-table-bg:              transparent;
    --bs-table-color:           var(--ps-text);
    --bs-table-border-color:    rgba(255,255,255,.05);
    --bs-table-striped-color:   var(--ps-text);
    --bs-table-striped-bg:      rgba(255,255,255,.02);
    --bs-table-hover-color:     var(--ps-text);
    --bs-table-hover-bg:        rgba(255,255,255,.04);

    font-size: .875rem;
    margin-bottom: 0;
    color: var(--ps-text);
    background: transparent;
}

.portal-table > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
    color: var(--ps-text);
}

.portal-table th {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ps-text-muted) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    padding: .65rem .85rem;
    background: transparent !important;
    white-space: nowrap;
}

.portal-table td {
    padding: .7rem .85rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: var(--ps-text);
}

.portal-table tbody tr:last-child td { border-bottom: none !important; }
.portal-table tbody tr:hover td { background: rgba(255,255,255,.035) !important; }

.portal-table-group td {
    background: linear-gradient(90deg, rgba(37,99,235,.18) 0%, rgba(124,58,237,.12) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: .85rem;
    padding: .55rem .9rem !important;
    border-top: 1px solid rgba(59,130,246,.30) !important;
    border-bottom: none !important;
}

.portal-table-group td .bi { color: var(--ps-blue-electric); margin-right: .35rem; }

.portal-table-total td {
    background: rgba(255,255,255,.05) !important;
    font-weight: 700;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    padding: .8rem !important;
    color: #fff !important;
}

.portal-total-value { color: var(--ps-blue-electric); font-size: 1.05rem; letter-spacing: -.01em; }

.portal-descripcion {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ps-text-soft);
}

/* ============================================================
   15. Empty / Loading
   ============================================================ */
.portal-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ps-text-muted);
    font-size: .9rem;
}

.portal-empty .bi { color: rgba(59,130,246,.4); }

.portal-loading {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ps-text-muted);
}

.portal-loading .spinner-border {
    color: var(--ps-blue-electric) !important;
    width: 2rem;
    height: 2rem;
}

/* ============================================================
   16. TAREAS (listado portal)
   ============================================================ */
.portal-anio-btns { display: flex; flex-wrap: wrap; gap: .4rem; }

.portal-anio-btns .btn {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--ps-border) !important;
    color: var(--ps-text-soft) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: .35rem .9rem !important;
    font-size: .82rem !important;
    font-family: var(--ps-font);
}

.portal-anio-btns .btn:hover {
    background: rgba(59,130,246,.12) !important;
    border-color: rgba(59,130,246,.35) !important;
    color: #fff !important;
}

.portal-anio-btns .btn-primary {
    background: linear-gradient(135deg, var(--ps-blue) 0%, var(--ps-purple) 100%) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

.portal-proyecto-grupo { margin-bottom: 1.25rem; }

.portal-proyecto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    padding: .75rem 1.1rem;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border);
    border-bottom: none;
    border-radius: var(--ps-radius-md) var(--ps-radius-md) 0 0;
}

.portal-proyecto-header .portal-proyecto-nombre {
    display: flex; align-items: center; gap: .5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-proyecto-header .bi { color: var(--ps-blue-electric); }

.portal-tareas-lista {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--ps-border);
    border-top: none;
    border-radius: 0 0 var(--ps-radius-md) var(--ps-radius-md);
}

.portal-tarea-item {
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    cursor: pointer;
    transition: background .15s;
}

.portal-tarea-item:last-child {
    border-bottom: none;
    border-radius: 0 0 calc(var(--ps-radius-md) - 1px) calc(var(--ps-radius-md) - 1px);
}

.portal-tarea-item:hover { background: rgba(255,255,255,.04); }

.portal-tarea-main {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

.portal-tarea-nombre {
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    flex: 1;
    min-width: 160px;
    letter-spacing: -.005em;
}

.portal-tarea-desc {
    font-size: .82rem;
    color: var(--ps-text-soft);
    margin-bottom: .3rem;
    line-height: 1.5;
}

.portal-tarea-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .78rem;
    color: var(--ps-text-soft);
}

.portal-tarea-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.portal-tarea-meta .bi { color: var(--ps-text-muted); }
.portal-tarea-meta strong { color: #fff; font-weight: 700; }

/* ============================================================
   17. BADGES de estado (según manual)
   ============================================================ */
.portal-badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.portal-badge-info,
.portal-badge-planificada,
.portal-badge-pendiente {
    background: rgba(59,130,246,.14);
    color: #93C5FD;
    border: 1px solid rgba(59,130,246,.35);
}

.portal-badge-success,
.portal-badge-encurso {
    background: rgba(59,130,246,.14);
    color: #93C5FD;
    border: 1px solid rgba(59,130,246,.35);
}

.portal-badge-warning,
.portal-badge-espera,
.badge-waiting-client {
    background: rgba(245,158,11,.16);
    color: #FCD34D;
    border: 1px solid rgba(245,158,11,.38);
}

.portal-badge-completed,
.badge-completed {
    background: rgba(34,197,94,.16);
    color: #86EFAC;
    border: 1px solid rgba(34,197,94,.35);
}

.portal-badge-muted {
    background: rgba(148,163,184,.14);
    color: var(--ps-text-soft);
    border: 1px solid rgba(148,163,184,.30);
}

.portal-badge-urgente {
    background: rgba(244,63,94,.14);
    color: #FCA5A5;
    border: 1px solid rgba(244,63,94,.35);
}

/* Etiqueta "En curso" inline en tabla */
.portal-encurso {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    font-weight: 700;
    color: #93C5FD;
    background: rgba(59,130,246,.14);
    border: 1px solid rgba(59,130,246,.35);
    border-radius: 999px;
    padding: .1rem .55rem;
}

/* ============================================================
   18. INFO NOTICE al pie
   ============================================================ */
.portal-info-notice {
    margin-top: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.15rem;
    background: var(--ps-card);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-size: .85rem;
    color: var(--ps-text-soft);
}

.portal-info-notice-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.30);
    color: var(--ps-blue-electric);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.portal-info-notice strong { color: #fff; display: block; margin-bottom: .25rem; }
.portal-info-notice a { color: var(--ps-blue-electric); text-decoration: none; }
.portal-info-notice a:hover { text-decoration: underline; }

/* ============================================================
   19. MODALES — Liquid Glass profundo
   ============================================================ */
.modal-backdrop {
    background-color: rgba(0,0,0,.65) !important;
    backdrop-filter: blur(6px);
}

.portal-modal.modal-content,
.portal-modal {
    --bs-modal-bg: transparent;
    --bs-modal-color: var(--ps-text);
    --bs-modal-border-color: var(--ps-border);
    --bs-modal-header-border-color: rgba(255,255,255,.08);
    --bs-modal-footer-border-color: rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(15,23,42,.94) 0%, rgba(7,17,31,.94) 100%) !important;
    backdrop-filter: blur(44px) saturate(180%);
    -webkit-backdrop-filter: blur(44px) saturate(180%);
    border: 1px solid var(--ps-border-strong) !important;
    border-radius: var(--ps-radius-xl) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.6),
                inset 0 1px 0 rgba(255,255,255,.12),
                0 0 80px rgba(37,99,235,.18) !important;
    color: var(--ps-text) !important;
    overflow: hidden;
    position: relative;
}

.portal-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    z-index: 2;
    pointer-events: none;
}

.portal-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(37,99,235,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(124,58,237,.14) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.portal-modal > * { position: relative; z-index: 1; }

.portal-modal-header {
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 1.1rem 1.4rem;
}

.portal-modal-header .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.portal-modal-header .btn-close {
    filter: invert(1) brightness(.7);
    transition: opacity .15s;
}
.portal-modal-header .btn-close:hover { opacity: .95; }

.portal-modal .modal-footer,
.portal-modal-footer {
    background: rgba(255,255,255,.025);
    border-top: 1px solid rgba(255,255,255,.07);
    padding: .9rem 1.25rem;
}

.portal-modal .modal-body { color: var(--ps-text); }
.portal-modal .text-muted { color: var(--ps-text-muted) !important; }

/* Inputs dentro del modal */
.portal-modal .form-label {
    color: var(--ps-text-soft);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

.portal-modal .form-control {
    background: rgba(2,6,23,.65);
    border: 1px solid var(--ps-border);
    color: #fff;
    border-radius: 12px;
    font-family: var(--ps-font);
    padding: .6rem .85rem;
    transition: all .18s;
}

.portal-modal .form-control:focus {
    background: rgba(2,6,23,.85);
    border-color: var(--ps-blue-electric);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    color: #fff;
    outline: none;
}

.portal-modal .form-control::placeholder { color: var(--ps-text-muted); }

/* Alerts en modal */
.portal-modal .alert-success {
    background: rgba(34,197,94,.14) !important;
    border: 1px solid rgba(34,197,94,.35) !important;
    color: #86EFAC !important;
    border-radius: 12px !important;
}
.portal-modal .alert-danger {
    background: rgba(244,63,94,.14) !important;
    border: 1px solid rgba(244,63,94,.35) !important;
    color: #FCA5A5 !important;
    border-radius: 12px !important;
}

.alert-danger {
    background: rgba(244,63,94,.14) !important;
    border: 1px solid rgba(244,63,94,.35) !important;
    color: #FCA5A5 !important;
    border-radius: 12px !important;
}

/* ============================================================
   20. MODAL AGENDAR REUNIÓN — Slots calendario
   ============================================================ */
.portal-modal-intro {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1rem;
    margin-bottom: 1.1rem;
    background: linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(124,58,237,.08) 100%);
    border: 1px solid rgba(59,130,246,.28);
    border-radius: var(--ps-radius-sm);
    color: var(--ps-text-soft);
    font-size: .86rem;
    line-height: 1.5;
}

.portal-modal-intro .bi {
    color: var(--ps-blue-electric);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.portal-modal-intro strong { color: #fff; font-weight: 700; }

/* Cabecera de contexto dentro del modal: con quién, dónde, etc. */
.portal-modal-context {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.portal-modal-context .portal-context-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ps-border);
    border-radius: 999px;
    color: var(--ps-text-soft);
    font-size: .76rem;
    font-weight: 600;
}
.portal-modal-context .portal-context-chip .bi { color: var(--ps-blue-electric); font-size: .9rem; }
.portal-modal-context .portal-context-chip strong { color: #fff; font-weight: 700; }

.portal-semana { margin-bottom: 1.4rem; }

.portal-semana-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ps-text-muted);
    margin-bottom: .7rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.portal-semana-header .bi { color: var(--ps-blue-electric); }

.portal-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}

.portal-slot-dia {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-sm);
    padding: .6rem .55rem .55rem;
    transition: border-color .2s;
}

.portal-slot-dia:hover { border-color: rgba(148,163,184,.30); }

.portal-slot-dia-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .55rem;
    padding-bottom: .35rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-transform: capitalize;
}

.portal-slot-dia-label .portal-slot-dia-name {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ps-text-muted);
}

.portal-slot-dia-label .portal-slot-dia-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}

.portal-slot-dia.is-today .portal-slot-dia-num {
    color: var(--ps-blue-electric);
}
.portal-slot-dia.is-today .portal-slot-dia-name {
    color: var(--ps-blue-electric);
}
.portal-slot-dia.is-today {
    border-color: rgba(59,130,246,.35);
    background: rgba(59,130,246,.05);
}

.portal-slot-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ps-border);
    border-radius: 10px;
    padding: .55rem .55rem;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: all .18s ease;
    margin-bottom: .35rem;
    text-align: center;
    font-family: var(--ps-font);
    position: relative;
    overflow: hidden;
    letter-spacing: -.005em;
}

.portal-slot-btn:last-child { margin-bottom: 0; }

.portal-slot-btn .portal-slot-time {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
}

.portal-slot-btn .portal-slot-duration {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    color: var(--ps-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: color .18s;
}

.portal-slot-btn:hover {
    background: rgba(59,130,246,.14);
    border-color: rgba(59,130,246,.45);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37,99,235,.20);
}
.portal-slot-btn:hover .portal-slot-duration { color: #93C5FD; }

.portal-slot-btn:focus-visible {
    outline: none;
    border-color: var(--ps-blue-electric);
    box-shadow: 0 0 0 3px rgba(59,130,246,.32);
}

.portal-slot-btn.selected {
    background: linear-gradient(135deg, rgba(34,197,94,.78) 0%, rgba(21,128,61,.78) 100%);
    border-color: rgba(34,197,94,.85);
    color: #fff;
    box-shadow: 0 10px 26px rgba(34,197,94,.42), inset 0 1px 0 rgba(255,255,255,.25);
    transform: translateY(-1px);
}

.portal-slot-btn.selected .portal-slot-duration { color: rgba(255,255,255,.85); }

.portal-slot-btn.selected::after {
    content: '\F26B'; /* bi-check-lg */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: .7rem;
    color: #fff;
    opacity: .9;
}

.portal-slot-btn.selected:hover {
    background: linear-gradient(135deg, rgba(34,197,94,.88) 0%, rgba(21,128,61,.88) 100%);
}

/* ----- Selección actual (chip resumen del slot escogido) ----- */
.portal-slot-summary {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, rgba(34,197,94,.14) 0%, rgba(34,197,94,.06) 100%);
    border: 1px solid rgba(34,197,94,.35);
    border-radius: var(--ps-radius-sm);
    color: #fff;
    font-size: .9rem;
    line-height: 1.35;
    animation: portalFadeIn .25s ease both;
}

.portal-slot-summary .portal-slot-summary-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(34,197,94,.22);
    border: 1px solid rgba(34,197,94,.5);
    color: #86EFAC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.portal-slot-summary .portal-slot-summary-text {
    min-width: 0;
    flex: 1;
}
.portal-slot-summary .portal-slot-summary-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #BBF7D0;
    margin-bottom: .15rem;
}
.portal-slot-summary .portal-slot-summary-value {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: .95rem;
    letter-spacing: -.01em;
}

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

/* ----- Hint horario laboral disponible ----- */
.portal-horario-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .55rem .8rem;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(148,163,184,.25);
    border-radius: var(--ps-radius-sm);
    color: var(--ps-text-muted);
    font-size: .78rem;
}
.portal-horario-hint .bi { color: var(--ps-blue-electric); font-size: .95rem; }
.portal-horario-hint strong { color: var(--ps-text-soft); font-weight: 700; }

/* ============================================================
   21. Detalle tarea (DL)
   ============================================================ */
.portal-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1.1rem;
    margin: 0;
}

.portal-dl dt {
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ps-text-muted);
    align-self: start;
    padding-top: .15rem;
}

.portal-dl dd {
    margin: 0;
    font-size: .9rem;
    color: var(--ps-text);
}

.portal-pre { white-space: pre-wrap; word-break: break-word; }

.portal-notas-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.portal-notas-lista li {
    padding: .45rem .8rem;
    background: rgba(59,130,246,.10);
    border-left: 3px solid rgba(59,130,246,.55);
    border-radius: 0 .5rem .5rem 0;
    font-size: .85rem;
    color: var(--ps-text);
    word-break: break-word;
}

/* ============================================================
   22. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .portal-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "main";
    }
    .portal-sidebar {
        display: none;
    }
    .portal-topbar-inner {
        grid-template-columns: auto 1fr auto;
    }
    .portal-topbar-inner .portal-brand { padding-right: 0; }
}

@media (max-width: 768px) {
    .portal-main { padding: 1.25rem 1rem 2rem; }
    .portal-topbar-inner { padding: 0 .9rem; gap: .75rem; }
    .portal-project-chip { display: none; }
    .portal-user-meta { display: none; }
    .portal-user-pill { padding: .25rem; }
    .portal-section-title { font-size: 1.35rem; }
    .portal-section-icon { width: 46px; height: 46px; font-size: 1.2rem; }
    .portal-resumen { grid-template-columns: 1fr; }
    .portal-resumen-value { font-size: 1.25rem; }
    .portal-topbar-actions .btn span:not(.visually-hidden) { display: none; }
    .portal-slots-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 540px) {
    .portal-bg-orb-1 { width: 360px; height: 360px; }
    .portal-bg-orb-2 { width: 320px; height: 320px; }
    .portal-bg-orb-3 { width: 220px; height: 220px; }
    .portal-acceso-card { padding: 2rem 1.4rem; }
    .portal-brand-name { display: none; }
    .portal-dl { grid-template-columns: 1fr; }
    .portal-dl dt { margin-top: .5rem; }
    .portal-reunion-banner { flex-direction: column; align-items: flex-start; }
}