@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Persistent top app bar — always visible (desktop + mobile), full width, themed like the sidebar. */
.app-header[b-krouy4ql8r] {
    position: sticky;
    top: 0;
    /* 🔴 FIX (Lupe, NO APTO mega-build): .bimp-banner (impersonación) también usa
       z-index:1050 — un EMPATE con .app-header. Al empatar, gana quien va
       DESPUÉS en el DOM (el banner), así que el banner tapaba el HIT-TEST del
       dropdown de la campanita (notif-panel, z-index:1061) aunque ese z-index
       más alto sea solo LOCAL al stacking context del header — nunca "se
       escapa" para vencer a un hermano con z-index igual/mayor. Resultado:
       bajo impersonación, "Mark all read" (y cualquier otro control del header
       que caiga bajo la franja del banner) recibía el click en el banner, NO
       en el botón — cero llamada al servidor, cero excepción, silencioso.
       Subir el header por encima del banner (1055 > 1050) deja que TODO su
       contenido (dropdowns, campanita, menú) gane el hit-test sin tocar el
       z-index interno del banner ni del panel. */
    z-index: 1055;
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    background: var(--gradient-sidebar, linear-gradient(180deg, #1E3A5F 0%, #15294A 100%));
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease;
}

    .app-brand[b-krouy4ql8r] {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -0.2px;
        text-decoration: none;
    }

    .app-brand:hover[b-krouy4ql8r] { color: #fff; opacity: 0.92; }

    /* Pole fotorrealista del brand (reemplaza el emoji 💈, 2026-07-08) */
    .app-brand .app-brand-pole[b-krouy4ql8r] {
        height: 1.6rem;
        vertical-align: -0.35rem;
        margin-left: 0.15rem;
    }

.page[b-krouy4ql8r] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-krouy4ql8r] {
    flex: 1;
}

.sidebar[b-krouy4ql8r] {
    /* Background is controlled by the active THEME (theme-*.css → `.sidebar { background: var(--gradient-sidebar) }`),
       so the sidebar recolors with the selected theme. Do NOT hardcode a background here (the old
       Blazor-template gradient was scoped CSS and overrode every theme). Default theme = Lucid. */
    transition: background 0.3s ease;
}

/* ── Floating draggable sidebar toggle ───────────────────────────── */
.sidebar-float-wrap[b-krouy4ql8r] {
    position: fixed;
    top: 200px;
    left: 0;
    z-index: 1060;
    touch-action: none;
    transition: left 0.25s ease;
}

/* Desktop: the toggle sits at the RIGHT edge of the 250px sidebar; when the sidebar
   is collapsed it slides back to the left edge. (Mobile override below pins it top-right.) */
@media (min-width: 641px) {
    .sidebar-float-wrap[b-krouy4ql8r]            { left: 250px; }
    .sidebar-float-wrap.collapsed[b-krouy4ql8r]  { left: 0; }
}

.sft-hamburger[b-krouy4ql8r] {
    width: 2.4rem;
    height: 2.75rem;
    border: none;
    border-radius: 0 0.5rem 0.5rem 0;
    background: rgba(5, 39, 103, 0.92);
    color: #fff;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    touch-action: none;
}

.sft-hamburger:active[b-krouy4ql8r] { cursor: grabbing; }
.sft-hamburger:hover[b-krouy4ql8r]  { background: rgb(5, 39, 103); }
.sft-hamburger:focus-visible[b-krouy4ql8r] { outline: 3px solid #5C8EF0; outline-offset: 2px; }

/* On small screens the toggle sits pinned at the top-right (like the original
   navbar toggler), not as a draggable tab on the left edge. !important beats the
   inline `top` the drag script writes, so it stays put on mobile. */
@media (max-width: 640.98px) {
    .sidebar-float-wrap[b-krouy4ql8r] {
        top: 0.5rem !important;
        left: auto;
        right: 1rem;
    }
    .sft-hamburger[b-krouy4ql8r] {
        border-radius: 0.5rem;
    }
}

/* Collapsed state: hide the whole sidebar so content gets the full width. */
.page.sidebar-hidden .sidebar[b-krouy4ql8r] {
    display: none;
}

@media (min-width: 641px) {
    .page[b-krouy4ql8r] {
        flex-direction: row;
    }

    /* Sidebar sits BELOW the sticky top bar (3.5rem) and fills the rest of the viewport height. */
    .sidebar[b-krouy4ql8r] {
        width: 250px;
        height: calc(100vh - 3.5rem);
        position: sticky;
        top: 3.5rem;
    }

    article[b-krouy4ql8r] {
        /* FIX QA (Tito 2026-07-22): la pestaña flotante del hamburguesa
           (.sft-hamburger, 2.4rem de ancho) sobresale ~2.4rem del borde del
           sidebar; con padding-left:2rem el contenido no la libraba y a ~980px
           la 1ra card de Quick Access ("Citas") se solapaba ~8.7px. Se sube el
           padding izquierdo a 3rem para librar la pestaña (expandido Y colapsado)
           con holgura, sin media-queries frágiles. */
        padding-left: 3rem !important;
        padding-right: 1.5rem !important;
    }
}

/* #blazor-error-ui styles moved to global wwwroot/app.css so they apply to ALL
   layouts. As a SCOPED rule here it only covered MainLayout, so other layouts
   (e.g. PublicLayout = /c/{token}) showed the banner permanently with no real
   error behind it (display:none never reached them). Keep them global. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-jr0v5yjoeo] {
    /* Replaced by the floating draggable hamburger in MainLayout. */
    display: none;
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-jr0v5yjoeo] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-jr0v5yjoeo] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-jr0v5yjoeo] {
    font-size: 1.1rem;
}

.bi[b-jr0v5yjoeo] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-jr0v5yjoeo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-jr0v5yjoeo] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-jr0v5yjoeo] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-jr0v5yjoeo] {
        padding-bottom: 1rem;
    }

    .nav-item[b-jr0v5yjoeo]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        /* Item 29 (Hector 2026-07-10): nombres LARGOS hacian overlap — la
           altura fija de 3rem no crecia con el wrap. min-height + line-height
           normal + wrap permitido = nombres largos en 2 lineas sin montarse.
           Tambien aguanta los fonts de accesibilidad grandes (item 30/31). */
        min-height: 3rem;
        height: auto;
        display: flex;
        align-items: center;
        line-height: 1.3;
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

.nav-item[b-jr0v5yjoeo]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-jr0v5yjoeo]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* About uses a Bootstrap icon (no Lordicon for it); size + color it to match the nav lord-icons.
   Placed after the scoped `.bi` rule so these win for the shared properties. */
.nav-bi-icon[b-jr0v5yjoeo] {
    width: 24px;
    height: 24px;
    margin-right: 0;
    top: 0;
    color: #fff;
    font-size: 1.2rem;
    line-height: 24px;
    text-align: center;
    background: none;
}

.nav-scrollable[b-jr0v5yjoeo] {
    /* Always shown; the floating hamburger collapses the entire sidebar instead. */
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-jr0v5yjoeo] {
        display: none;
    }

    .nav-scrollable[b-jr0v5yjoeo] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Shared/AccessibilityPanel.razor.rz.scp.css */
/* ── Floating trigger button ──────────────────────────────────────── */
.a11y-trigger-btn[b-2kan77xkhn] {
    position:        fixed;
    bottom:          1.5rem;
    right:           1.5rem;
    width:           3.25rem;
    height:          3.25rem;
    border-radius:   50%;
    border:          none;
    background:      var(--accent-color, #3B82F6);
    color:           var(--accent-text-color, #fff);
    font-size:       1.3rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 14px rgba(0,0,0,0.28);
    z-index:         1060;
    cursor:          grab;
    touch-action:    none; /* required for pointer-drag on touch devices */
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.a11y-trigger-btn:active[b-2kan77xkhn] {
    cursor: grabbing;
}

.a11y-trigger-btn:hover[b-2kan77xkhn] {
    transform:  scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.34);
}

.a11y-trigger-btn:focus-visible[b-2kan77xkhn] {
    outline:        3px solid var(--accent-color, #3B82F6);
    outline-offset: 3px;
}

/* ── Panel container ──────────────────────────────────────────────── */
.a11y-panel[b-2kan77xkhn] {
    position:        fixed;
    bottom:          5.75rem;
    right:           1.5rem;
    width:           300px;
    max-height:      82vh;
    overflow-y:      auto;
    background:      var(--surface-color, #fff);
    border:          1px solid var(--border-color, #CBD5E1);
    border-radius:   0.75rem;
    box-shadow:      0 8px 32px rgba(0,0,0,0.20);
    z-index:         1059;
    font-size:       0.85rem;
    color:           var(--bs-body-color, #0F172A);
    scrollbar-width: thin;
}

/* Panel header */
.a11y-panel-header[b-2kan77xkhn] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.65rem 0.9rem;
    border-bottom:   1px solid var(--border-color, #CBD5E1);
    background:      var(--secondary-color, #F8FAFC);
    border-radius:   0.75rem 0.75rem 0 0;
    font-size:       0.875rem;
    color:           var(--text-primary, #fff);
}

.a11y-panel-close[b-2kan77xkhn] {
    background: none;
    border:     none;
    padding:    0.2rem 0.4rem;
    color:      var(--text-primary, #fff);
    cursor:     pointer;
    border-radius: 0.25rem;
    line-height: 1;
    opacity:    0.8;
}

.a11y-panel-close:hover[b-2kan77xkhn]  { opacity: 1; }
.a11y-panel-close:focus-visible[b-2kan77xkhn] {
    outline:        2px solid var(--accent-color, #3B82F6);
    outline-offset: 2px;
}

/* ── Sections ─────────────────────────────────────────────────────── */
.a11y-section[b-2kan77xkhn] {
    padding:       0.65rem 0.9rem;
    border-bottom: 1px solid var(--border-color, #CBD5E1);
}

.a11y-section:last-child[b-2kan77xkhn] { border-bottom: none; }

.a11y-row-label[b-2kan77xkhn] {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    font-weight:   600;
    font-size:     0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    color:         var(--text-secondary, #94A3B8);
}

/* ── Theme swatches ───────────────────────────────────────────────── */
.a11y-theme-grid[b-2kan77xkhn] {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.35rem;
}

.a11y-swatch[b-2kan77xkhn] {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.25rem;
    padding:         0.35rem 0.2rem;
    background:      none;
    border:          2px solid transparent;
    border-radius:   0.4rem;
    cursor:          pointer;
    transition:      border-color 0.15s ease;
}

.a11y-swatch:hover[b-2kan77xkhn] {
    border-color: var(--accent-color, #3B82F6);
}

.a11y-swatch:focus-visible[b-2kan77xkhn] {
    outline:        2px solid var(--accent-color, #3B82F6);
    outline-offset: 1px;
}

.a11y-swatch--active[b-2kan77xkhn] {
    border-color: var(--accent-color, #3B82F6) !important;
    background:   rgba(59,130,246,0.08);
}

.a11y-swatch-dot[b-2kan77xkhn] {
    width:         1.6rem;
    height:        1.6rem;
    border-radius: 50%;
    background:    var(--swatch-bg, #888);
    border:        4px solid var(--swatch-border, #888);
    box-shadow:    0 0 0 2px #ffffff;
    flex-shrink:   0;
}

.a11y-swatch-name[b-2kan77xkhn] {
    font-size:   0.65rem;
    line-height: 1.1;
    text-align:  center;
    color:       var(--bs-body-color, #0F172A);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    max-width:   100%;
}

/* ── Toggle rows ──────────────────────────────────────────────────── */
.a11y-toggles[b-2kan77xkhn] { display: flex; flex-direction: column; gap: 0.45rem; }

.a11y-toggle-row[b-2kan77xkhn] {
    display:     flex;
    align-items: center;
    margin:      0;
    padding:     0;
}

.a11y-toggle-row .form-check-label[b-2kan77xkhn] {
    cursor:    pointer;
    font-size: 0.84rem;
    color:     var(--bs-body-color, #0F172A);
}

.a11y-toggle-row .form-check-input[b-2kan77xkhn] {
    cursor: pointer;
    flex-shrink: 0;
    /* Bootstrap's .form-switch adds margin-left:-2.5em to the input, which (with this flex row)
       pushed the switch off the panel's left edge and clipped it. Reset it so the switch starts
       exactly where the section content / the "100%" font-size button begins, with a small gap
       before its label. */
    margin-left: 0;
    margin-right: 0.6rem;
}

/* ── Reset row ────────────────────────────────────────────────────── */
.a11y-reset-row[b-2kan77xkhn] { padding-top: 0.6rem; padding-bottom: 0.7rem; }

/* ── Scrollbar styling (Webkit) ───────────────────────────────────── */
.a11y-panel[b-2kan77xkhn]::-webkit-scrollbar       { width: 5px; }
.a11y-panel[b-2kan77xkhn]::-webkit-scrollbar-track { background: transparent; }
.a11y-panel[b-2kan77xkhn]::-webkit-scrollbar-thumb { background: var(--border-color, #CBD5E1); border-radius: 99px; }