/* _content/TicketsTI.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-jsan9dfvw0] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.sidebar[b-jsan9dfvw0] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-jsan9dfvw0] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-jsan9dfvw0]  a, .top-row[b-jsan9dfvw0]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-jsan9dfvw0]  a:hover, .top-row[b-jsan9dfvw0]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-jsan9dfvw0]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-jsan9dfvw0] {
        justify-content: space-between;
    }

    .top-row[b-jsan9dfvw0]  a, .top-row[b-jsan9dfvw0]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-jsan9dfvw0] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-jsan9dfvw0] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-jsan9dfvw0]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-jsan9dfvw0], article[b-jsan9dfvw0] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-jsan9dfvw0] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-jsan9dfvw0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===========================================================
   Cambio de contraseña pendiente — aviso persistente del shell
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Solo se ve si el middleware no interceptó la navegación. Es una
   red de contención, no el camino normal.
   =========================================================== */
.pending-password-banner[b-jsan9dfvw0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: 12px var(--space-md);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.pending-password-banner i[b-jsan9dfvw0] {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--amber);
}

.pending-password-action[b-jsan9dfvw0] {
    margin-left: auto;
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--petrol);
    color: var(--sand);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease;
}

.pending-password-action:hover[b-jsan9dfvw0] {
    background: var(--petrol-2);
}

@media (max-width: 640px) {
    .pending-password-banner[b-jsan9dfvw0] {
        flex-wrap: wrap;
    }

    .pending-password-action[b-jsan9dfvw0] {
        margin-left: 0;
    }
}
/* _content/TicketsTI.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-k9eu7uac6g] {
    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-k9eu7uac6g] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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-k9eu7uac6g] {
    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");
}

/* Tab del backoffice VD: icono + label alineados.
   ::deep porque NavLink es un componente Blazor y el <a> que renderiza
   NO hereda el atributo scoped b-xxx (D-040, §17.19). */
.tabs[b-k9eu7uac6g]  .tab-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tabs[b-k9eu7uac6g]  .tab-admin i {
    font-size: 15px;
}

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

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

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

    .nav-item[b-k9eu7uac6g]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

.nav-scrollable[b-k9eu7uac6g] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-k9eu7uac6g] {
    display: block;
}

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/TicketsTI.Web/Components/Layout/UserMenu.razor.rz.scp.css */
/* ===========================================================
   UserMenu — dropdown del avatar en el topnav
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Reutiliza las clases globales .fa-meta / .fa-name / .fa-bd /
   .fa-avatar del topnav (app.css) para que el disparador se vea
   igual que antes de volverse clickeable. Acá solo se ajusta lo
   que cambió: eran <div> y ahora son <span> dentro de un <button>.
   =========================================================== */

.user-menu[b-gj8gfty3lw] {
    position: relative;
    display: flex;
    align-items: center;
}

/* === TOGGLE (el bloque nombre + avatar) === */
.user-menu-toggle[b-gj8gfty3lw] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 8px 4px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    color: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.user-menu-toggle:hover[b-gj8gfty3lw] {
    background: rgba(214, 197, 143, 0.08);
    border-color: rgba(214, 197, 143, 0.22);
}

.user-menu-toggle:focus-visible[b-gj8gfty3lw] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Los tres eran elementos de bloque en el topnav original. */
.user-menu-toggle .fa-meta[b-gj8gfty3lw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-menu-toggle .fa-name[b-gj8gfty3lw],
.user-menu-toggle .fa-bd[b-gj8gfty3lw] {
    display: block;
}

.user-menu-caret[b-gj8gfty3lw] {
    font-size: 15px;
    color: rgba(246, 243, 238, 0.55);
    transition: transform 0.18s ease, color 0.18s ease;
}

.user-menu-toggle:hover .user-menu-caret[b-gj8gfty3lw] {
    color: var(--gold-light);
}

.user-menu-caret.is-open[b-gj8gfty3lw] {
    transform: rotate(180deg);
    color: var(--gold-light);
}

/* === BACKDROP (click afuera) ===
   Transparente y a pantalla completa: capta el click sin taparle
   nada al usuario. Queda por debajo del panel pero por encima del
   resto de la página. */
.user-menu-backdrop[b-gj8gfty3lw] {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: transparent;
}

/* === DROPDOWN ===
   Superficie clara sobre el topnav petrol: el mismo lenguaje que
   los cards del contenido, y el contraste lo separa del nav.
   z-index por encima del topnav (100) y de la tabbar (90). */
.user-menu-dropdown[b-gj8gfty3lw] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    min-width: 248px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.user-menu-header[b-gj8gfty3lw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-md);
    background: var(--sand);
    border-bottom: 1px solid var(--line);
}

.user-menu-header-name[b-gj8gfty3lw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.user-menu-header-email[b-gj8gfty3lw] {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.3;
    word-break: break-all;
}

/* === ITEMS === */
.user-menu-item[b-gj8gfty3lw] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.user-menu-item i[b-gj8gfty3lw] {
    font-size: 17px;
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.18s ease;
}

.user-menu-item:hover[b-gj8gfty3lw] {
    background: var(--sand-2);
    color: var(--ink);
}

.user-menu-item:hover i[b-gj8gfty3lw] {
    color: var(--gold-deep);
}

.user-menu-item:focus-visible[b-gj8gfty3lw] {
    outline: none;
    background: var(--sand-2);
    box-shadow: inset 0 0 0 2px var(--gold-soft);
}

/* Cerrar sesión: misma estructura, menos peso visual. */
.user-menu-item-quiet[b-gj8gfty3lw] {
    color: var(--muted);
}

.user-menu-item-quiet:hover[b-gj8gfty3lw] {
    color: var(--red);
}

.user-menu-item-quiet:hover i[b-gj8gfty3lw] {
    color: var(--red);
}

.user-menu-badge[b-gj8gfty3lw] {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--amber);
    white-space: nowrap;
}

.user-menu-separator[b-gj8gfty3lw] {
    height: 1px;
    background: var(--line);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .user-menu-toggle .fa-meta[b-gj8gfty3lw] {
        display: none;
    }

    .user-menu-dropdown[b-gj8gfty3lw] {
        min-width: 220px;
    }
}
/* _content/TicketsTI.Web/Components/Pages/AccessDenied.razor.rz.scp.css */
/* ===========================================================
   /access-denied — rechazo por rol (sub-paso 2.3.b, sub-hito Reportes)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Destino de AccessDeniedPath: la ven los usuarios de /reports,
   /admin/tenants y /users que no tienen el rol. Hasta este
   sub-paso la ruta no existía y devolvía un 404 crudo.

   El <main class="shell"> del MainLayout ya aporta el ancho y el
   padding; acá solo se centra el bloque en el alto disponible.

   D-040: no aplica. Sin componentes Blazor de input en la página.
   =========================================================== */

.access-denied-page[b-s45ea1dydg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    animation: access-denied-fade-up-b-s45ea1dydg 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes access-denied-fade-up-b-s45ea1dydg {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .access-denied-page[b-s45ea1dydg] {
        animation: none;
    }
}

.access-denied-card[b-s45ea1dydg] {
    text-align: center;
    max-width: 480px;
    padding: var(--space-xl);
}

/* El candado va en petrol sobre arena, no en rojo: no es un fallo del
   sistema ni algo que el usuario hizo mal, es el sistema funcionando.
   Un tile de alarma sugeriría que hay algo que reparar. */
.access-denied-icon[b-s45ea1dydg] {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-lg);
    background: var(--sand-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--petrol);
}

.access-denied-icon i[b-s45ea1dydg] {
    font-size: 44px;
}

.access-denied-title[b-s45ea1dydg] {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 var(--space-md) 0;
}

.access-denied-message[b-s45ea1dydg] {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 var(--space-xl) 0;
}

.access-denied-actions[b-s45ea1dydg] {
    display: flex;
    justify-content: center;
}

/* === BOTON === */
.btn[b-s45ea1dydg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-lg);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.btn i[b-s45ea1dydg] {
    font-size: 16px;
}

.btn-primary[b-s45ea1dydg] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover[b-s45ea1dydg] {
    background: var(--petrol-2);
    transform: translateY(-1px);
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
    .access-denied-card[b-s45ea1dydg] {
        padding: var(--space-lg) var(--space-md);
    }

    .access-denied-title[b-s45ea1dydg] {
        font-size: 26px;
    }

    .access-denied-icon[b-s45ea1dydg] {
        width: 76px;
        height: 76px;
    }

    .access-denied-icon i[b-s45ea1dydg] {
        font-size: 36px;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Account/ChangePassword.razor.rz.scp.css */
/* ===========================================================
   ChangePassword — cambio de contraseña propia
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   D-040: ::deep en .form-control, mismo criterio que el resto del
   proyecto. Hoy los inputs son HTML plano y heredarían el scope,
   pero el selector queda válido si mañana pasan a <InputText>.
   =========================================================== */

.password-page[b-bdx3mkv1ob] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-sm);
}

/* Angosto a propósito: tres campos y nada más. Un ancho de página
   completa haría que el formulario se lea como un trámite largo. */
.password-card[b-bdx3mkv1ob] {
    width: 100%;
    max-width: 480px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.password-card.state-centered[b-bdx3mkv1ob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

/* === HEADER === */
.card-header[b-bdx3mkv1ob] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.header-icon[b-bdx3mkv1ob] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
}

.header-icon i[b-bdx3mkv1ob] {
    font-size: 20px;
    color: var(--gold-deep);
}

.header-text[b-bdx3mkv1ob] {
    min-width: 0;
}

.page-title[b-bdx3mkv1ob] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.page-subtitle[b-bdx3mkv1ob] {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 4px 0 0;
}

.page-title.centered[b-bdx3mkv1ob],
.page-subtitle.centered[b-bdx3mkv1ob] {
    text-align: center;
}

/* === BODY === */
.card-body[b-bdx3mkv1ob] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.field[b-bdx3mkv1ob] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-label[b-bdx3mkv1ob] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.field[b-bdx3mkv1ob]  .form-control,
.field .form-control[b-bdx3mkv1ob] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-bdx3mkv1ob]  .form-control:focus,
.field .form-control:focus[b-bdx3mkv1ob] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-bdx3mkv1ob]  .form-control:disabled,
.field .form-control:disabled[b-bdx3mkv1ob] {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-bdx3mkv1ob]  .form-control.has-error,
.field .form-control.has-error[b-bdx3mkv1ob] {
    border-color: var(--red);
}

.field[b-bdx3mkv1ob]  .form-control.has-error:focus,
.field .form-control.has-error:focus[b-bdx3mkv1ob] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

/* Requisitos de la contraseña: presente pero secundario, para que no
   compita con el label ni con el mensaje de error. */
.field-helper[b-bdx3mkv1ob] {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
    margin: 0;
}

.field-error[b-bdx3mkv1ob] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
    line-height: 1.4;
}

/* === BANNERS === */
.banner[b-bdx3mkv1ob] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0 var(--space-lg);
    margin-top: var(--space-lg);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
}

.state-centered .banner[b-bdx3mkv1ob] {
    margin: 0;
    width: 100%;
}

.banner i[b-bdx3mkv1ob] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-warning[b-bdx3mkv1ob] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    color: var(--ink-soft);
}

.banner-warning i[b-bdx3mkv1ob] {
    color: var(--amber);
}

.banner-error[b-bdx3mkv1ob] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--ink-soft);
}

.banner-error i[b-bdx3mkv1ob] {
    color: var(--red);
}

/* === SUCCESS === */
.success-tile[b-bdx3mkv1ob] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
}

.success-tile i[b-bdx3mkv1ob] {
    font-size: 30px;
    color: var(--green);
}

.loading-line[b-bdx3mkv1ob] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* === FOOTER === */
.card-footer[b-bdx3mkv1ob] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
}

.card-footer.centered[b-bdx3mkv1ob] {
    justify-content: center;
    border-top: none;
    padding-top: 0;
}

/* === BOTONES === */
.btn[b-bdx3mkv1ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn i[b-bdx3mkv1ob] {
    font-size: 16px;
}

.btn:focus-visible[b-bdx3mkv1ob] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-bdx3mkv1ob] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-bdx3mkv1ob] {
    background: var(--petrol-2);
}

.btn-secondary[b-bdx3mkv1ob] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled)[b-bdx3mkv1ob] {
    background: var(--sand-2);
}

.btn:disabled[b-bdx3mkv1ob] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-bdx3mkv1ob] {
    animation: change-password-spin-b-bdx3mkv1ob 0.8s linear infinite;
}

@keyframes change-password-spin-b-bdx3mkv1ob {
    to { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 560px) {
    .card-header[b-bdx3mkv1ob],
    .card-body[b-bdx3mkv1ob] {
        padding: var(--space-md);
    }

    .banner[b-bdx3mkv1ob] {
        margin-left: var(--space-md);
        margin-right: var(--space-md);
        margin-top: var(--space-md);
    }

    .card-footer[b-bdx3mkv1ob] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Account/ForgotPassword.razor.rz.scp.css */
/* ===========================================================
   ForgotPassword — pedido del enlace de recuperación (público)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Card angosta sobre fondo sand, con el mismo peso visual que el
   login: son dos pantallas de la misma etapa (todavía sin sesión) y
   el usuario pasa de una a la otra en el mismo gesto.

   D-040: ::deep en .form-control. Hoy el input es HTML plano y
   heredaría el scope, pero el selector queda válido si mañana pasa
   a <InputText>.
   =========================================================== */

.auth-page[b-xivrq1r0px] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    background:
        radial-gradient(ellipse 60% 80% at 50% 0%, rgba(16, 100, 110, 0.08), transparent 70%),
        var(--sand);
}

.auth-card[b-xivrq1r0px] {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Filete dorado superior: la firma del card de login. */
.auth-card[b-xivrq1r0px]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold) 30%,
        var(--gold-light) 50%,
        var(--gold) 70%,
        transparent 100%);
}

/* === BRAND === */
.auth-brand[b-xivrq1r0px] {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.auth-brand-name[b-xivrq1r0px] {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1;
}

.auth-brand-divider[b-xivrq1r0px] {
    width: 40px;
    height: 1px;
    margin: var(--space-md) auto 0;
    background: var(--gold);
}

/* === TÍTULOS === */
.auth-title[b-xivrq1r0px] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.auth-subtitle[b-xivrq1r0px] {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: var(--space-sm) 0 0;
    text-align: center;
}

/* === FORMULARIO === */
.auth-form[b-xivrq1r0px] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.field[b-xivrq1r0px] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-label[b-xivrq1r0px] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.field[b-xivrq1r0px]  .form-control,
.field .form-control[b-xivrq1r0px] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-xivrq1r0px]  .form-control:focus,
.field .form-control:focus[b-xivrq1r0px] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-xivrq1r0px]  .form-control::placeholder,
.field .form-control[b-xivrq1r0px]::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

.field[b-xivrq1r0px]  .form-control:disabled,
.field .form-control:disabled[b-xivrq1r0px] {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-xivrq1r0px]  .form-control.has-error,
.field .form-control.has-error[b-xivrq1r0px] {
    border-color: var(--red);
}

.field[b-xivrq1r0px]  .form-control.has-error:focus,
.field .form-control.has-error:focus[b-xivrq1r0px] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.field-error[b-xivrq1r0px] {
    font-size: 11.5px;
    color: var(--red);
    line-height: 1.4;
    margin: 0;
}

/* === ESTADOS (enviado / error) === */
.auth-state[b-xivrq1r0px] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
}

.state-tile[b-xivrq1r0px] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.state-tile i[b-xivrq1r0px] {
    font-size: 30px;
}

/* Ámbar y no verde: lo que se confirma es que el pedido se recibió,
   no que exista una cuenta ni que el correo haya salido. Un tilde
   verde prometería más de lo que el sistema puede afirmar. */
.tile-info[b-xivrq1r0px] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
}

.tile-info i[b-xivrq1r0px] {
    color: var(--amber);
}

.tile-error[b-xivrq1r0px] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
}

.tile-error i[b-xivrq1r0px] {
    color: var(--red);
}

.auth-state .btn[b-xivrq1r0px] {
    margin-top: var(--space-sm);
}

/* === FOOTER === */
.auth-footer[b-xivrq1r0px] {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--line);
    text-align: center;
}

.link-secondary[b-xivrq1r0px] {
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.link-secondary:hover[b-xivrq1r0px] {
    color: var(--petrol-glow);
}

/* === BOTONES === */
.btn[b-xivrq1r0px] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn i[b-xivrq1r0px] {
    font-size: 16px;
}

.btn-block[b-xivrq1r0px] {
    width: 100%;
}

.btn:focus-visible[b-xivrq1r0px] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-xivrq1r0px] {
    background: var(--navy);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-xivrq1r0px] {
    background: var(--petrol-glow);
    box-shadow: var(--shadow-md);
}

.btn:disabled[b-xivrq1r0px] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-xivrq1r0px] {
    animation: forgot-password-spin-b-xivrq1r0px 0.8s linear infinite;
}

@keyframes forgot-password-spin-b-xivrq1r0px {
    to { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .auth-page[b-xivrq1r0px] {
        padding: var(--space-md);
    }

    .auth-card[b-xivrq1r0px] {
        padding: var(--space-lg) var(--space-md) var(--space-md);
    }
}

/* El estado "enviado" ahora lleva botón + footer: los dos a ancho
   completo para que la tarjeta no quede con un botón flotando. */
.auth-state .auth-footer[b-xivrq1r0px] {
    width: 100%;
}
/* _content/TicketsTI.Web/Components/Pages/Account/ResetPassword.razor.rz.scp.css */
/* ===========================================================
   ResetPassword — elección de la contraseña nueva vía token (público)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Mismos tokens y misma estructura de card que ForgotPassword: son dos
   pasos del mismo flujo y el usuario llega de uno al otro. La copia no
   se factoriza a app.css a propósito —el CSS scoped es por componente,
   y moverlo lo volvería global para toda la app—.

   D-040: ::deep en .form-control. Hoy los inputs son HTML plano y
   heredarían el scope, pero el selector queda válido si mañana pasan
   a <InputText>.
   =========================================================== */

.auth-page[b-ws6fqe5766] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    background:
        radial-gradient(ellipse 60% 80% at 50% 0%, rgba(16, 100, 110, 0.08), transparent 70%),
        var(--sand);
}

.auth-card[b-ws6fqe5766] {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Filete dorado superior: la firma del card de login. */
.auth-card[b-ws6fqe5766]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold) 30%,
        var(--gold-light) 50%,
        var(--gold) 70%,
        transparent 100%);
}

/* === BRAND === */
.auth-brand[b-ws6fqe5766] {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.auth-brand-name[b-ws6fqe5766] {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1;
}

.auth-brand-divider[b-ws6fqe5766] {
    width: 40px;
    height: 1px;
    margin: var(--space-md) auto 0;
    background: var(--gold);
}

/* === TÍTULOS === */
.auth-title[b-ws6fqe5766] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.auth-subtitle[b-ws6fqe5766] {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: var(--space-sm) 0 0;
    text-align: center;
}

/* La cuenta sobre la que se va a escribir: el usuario tiene que poder
   confirmar de un vistazo que el enlace es el suyo. */
.account-email[b-ws6fqe5766] {
    color: var(--ink-soft);
    font-weight: 500;
    word-break: break-all;
}

/* === FORMULARIO === */
.auth-form[b-ws6fqe5766] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.field[b-ws6fqe5766] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-label[b-ws6fqe5766] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.field[b-ws6fqe5766]  .form-control,
.field .form-control[b-ws6fqe5766] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-ws6fqe5766]  .form-control:focus,
.field .form-control:focus[b-ws6fqe5766] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-ws6fqe5766]  .form-control:disabled,
.field .form-control:disabled[b-ws6fqe5766] {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-ws6fqe5766]  .form-control.has-error,
.field .form-control.has-error[b-ws6fqe5766] {
    border-color: var(--red);
}

.field[b-ws6fqe5766]  .form-control.has-error:focus,
.field .form-control.has-error:focus[b-ws6fqe5766] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

/* Requisitos de la contraseña: presente pero secundario, para que no
   compita con el label ni con el mensaje de error. */
.field-helper[b-ws6fqe5766] {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
    margin: 0;
}

.field-error[b-ws6fqe5766] {
    font-size: 11.5px;
    color: var(--red);
    line-height: 1.4;
    margin: 0;
}

/* === ESTADOS === */
.auth-state[b-ws6fqe5766] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
}

.auth-state .auth-footer[b-ws6fqe5766],
.auth-state .btn[b-ws6fqe5766] {
    width: 100%;
}

.state-tile[b-ws6fqe5766] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.state-tile i[b-ws6fqe5766] {
    font-size: 30px;
}

.tile-success[b-ws6fqe5766] {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
}

.tile-success i[b-ws6fqe5766] {
    color: var(--green);
}

/* Ámbar y no rojo: un enlace vencido no es un error del usuario, es el
   paso del tiempo. La salida existe y está a un clic. */
.tile-warning[b-ws6fqe5766] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
}

.tile-warning i[b-ws6fqe5766] {
    color: var(--amber);
}

.tile-error[b-ws6fqe5766] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
}

.tile-error i[b-ws6fqe5766] {
    color: var(--red);
}

.countdown[b-ws6fqe5766] {
    font-size: 11.5px;
    color: var(--muted);
    margin: 0;
    text-align: center;
}

.loading-line[b-ws6fqe5766] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    padding: var(--space-lg) 0;
}

/* === FOOTER === */
.auth-footer[b-ws6fqe5766] {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--line);
    text-align: center;
}

.link-secondary[b-ws6fqe5766] {
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.link-secondary:hover[b-ws6fqe5766] {
    color: var(--petrol-glow);
}

/* === BOTONES === */
.btn[b-ws6fqe5766] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn i[b-ws6fqe5766] {
    font-size: 16px;
}

.btn-block[b-ws6fqe5766] {
    width: 100%;
}

.btn:focus-visible[b-ws6fqe5766] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-ws6fqe5766] {
    background: var(--navy);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-ws6fqe5766] {
    background: var(--petrol-glow);
    box-shadow: var(--shadow-md);
}

.btn:disabled[b-ws6fqe5766] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-ws6fqe5766] {
    animation: reset-password-spin-b-ws6fqe5766 0.8s linear infinite;
}

@keyframes reset-password-spin-b-ws6fqe5766 {
    to { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .auth-page[b-ws6fqe5766] {
        padding: var(--space-md);
    }

    .auth-card[b-ws6fqe5766] {
        padding: var(--space-lg) var(--space-md) var(--space-md);
    }
}

/* ===========================================================
   Añadidos del flujo con OTP
   =========================================================== */

/* El campo del código. Monoespaciado, grande y espaciado: el usuario
   está copiando seis dígitos de otro dispositivo, y esta es la parte
   del formulario donde un error cuesta un intento. */
.field[b-ws6fqe5766]  .otp-input,
.field .otp-input[b-ws6fqe5766] {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 600;
}

/* El placeholder NO hereda el espaciado: con letter-spacing sobre
   "123456" el texto de ejemplo se lee casi igual que un valor real y
   el usuario cree que el campo ya está completo. */
.field[b-ws6fqe5766]  .otp-input::placeholder,
.field .otp-input[b-ws6fqe5766]::placeholder {
    letter-spacing: 4px;
    font-weight: 400;
    color: var(--muted);
    opacity: 0.5;
}

.field[b-ws6fqe5766]  .form-control::placeholder,
.field .form-control[b-ws6fqe5766]::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

/* Aviso arriba del formulario, para lo que no pertenece a un campo. */
.banner[b-ws6fqe5766] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
}

.banner i[b-ws6fqe5766] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-error[b-ws6fqe5766] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--ink-soft);
}

.banner-error i[b-ws6fqe5766] {
    color: var(--red);
}

.footer-separator[b-ws6fqe5766] {
    color: var(--muted);
    font-size: 12px;
    margin: 0 6px;
}
/* _content/TicketsTI.Web/Components/Pages/Admin/CreateTenantModal.razor.rz.scp.css */
/* ===========================================================
   CreateTenantModal — alta de tenant + primer admin (Sub-paso 2.4)
   Design System BANQUO: 100% tokens de app.css.

   D-040: ::deep en .form-control. Hoy los inputs son HTML directo
   del .razor (heredan b-xxx), pero se mantiene el patrón de
   Tenants.razor.css / Dashboard.razor.css para que migrar a
   <InputText> no rompa los estilos en silencio.
   =========================================================== */

/* === BACKDROP === */
.modal-backdrop[b-s05nw23lds] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--petrol-deep) 55%, transparent);
    backdrop-filter: blur(2px);
    animation: modal-backdrop-in-b-s05nw23lds 0.18s ease-out;
    overflow-y: auto;
}

@keyframes modal-backdrop-in-b-s05nw23lds {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Centinelas del focus trap: focusables pero invisibles y sin espacio. */
.focus-sentinel[b-s05nw23lds] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* === PANEL === */
.modal-panel[b-s05nw23lds] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--space-xl));
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-panel-in-b-s05nw23lds 0.22s cubic-bezier(.2,.7,.3,1);
}

@keyframes modal-panel-in-b-s05nw23lds {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === HEADER === */
.modal-header[b-s05nw23lds] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--line);
}

.modal-title[b-s05nw23lds] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.modal-subtitle[b-s05nw23lds] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: var(--space-xs) 0 0 0;
}

.modal-title.centered[b-s05nw23lds],
.modal-subtitle.centered[b-s05nw23lds] {
    text-align: center;
}

.icon-btn[b-s05nw23lds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn i[b-s05nw23lds] {
    font-size: 18px;
}

.icon-btn:hover:not(:disabled)[b-s05nw23lds] {
    background: var(--sand-2);
    color: var(--ink);
}

.icon-btn:focus-visible[b-s05nw23lds] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.icon-btn:disabled[b-s05nw23lds] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === BODY === */
.modal-body[b-s05nw23lds] {
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-body.state-centered[b-s05nw23lds] {
    align-items: center;
    text-align: center;
    padding-top: var(--space-xl);
}

/* === SECCIONES DEL FORM === */
.form-section[b-s05nw23lds] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-head[b-s05nw23lds] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon[b-s05nw23lds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    flex-shrink: 0;
}

.section-icon i[b-s05nw23lds] {
    font-size: 16px;
}

.section-title[b-s05nw23lds] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* === CAMPOS === */
.field[b-s05nw23lds] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-row[b-s05nw23lds] {
    display: grid;
    gap: var(--space-md);
}

.field-row.two-cols[b-s05nw23lds] {
    grid-template-columns: 1fr 1fr;
}

.field-row.email-mode[b-s05nw23lds] {
    grid-template-columns: 2fr 1fr;
}

.field-label[b-s05nw23lds] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.optional[b-s05nw23lds] {
    font-weight: 400;
    color: var(--muted);
    font-size: 11px;
}

.field[b-s05nw23lds]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-s05nw23lds]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-s05nw23lds]  .form-control::placeholder {
    color: var(--muted);
}

.field[b-s05nw23lds]  .form-control:disabled {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-s05nw23lds]  .form-control.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
}

.field[b-s05nw23lds]  textarea.form-control {
    resize: vertical;
    line-height: 1.5;
}

/* Estado de error de validación en cliente */
.field[b-s05nw23lds]  .form-control.has-error {
    border-color: var(--red);
}

.field[b-s05nw23lds]  .form-control.has-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.field-error[b-s05nw23lds] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
    line-height: 1.4;
}

/* === BANNERS === */
.banner[b-s05nw23lds] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.banner i[b-s05nw23lds] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-info[b-s05nw23lds] {
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    color: var(--ink-soft);
}

.banner-info i[b-s05nw23lds] {
    color: var(--gold-deep);
}

.banner-warning[b-s05nw23lds] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    color: var(--ink-soft);
}

.banner-warning i[b-s05nw23lds] {
    color: var(--amber);
}

.banner-error[b-s05nw23lds] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--ink-soft);
}

.banner-error i[b-s05nw23lds] {
    color: var(--red);
}

/* === SUCCESS === */
.success-tile[b-s05nw23lds] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
    margin-bottom: var(--space-xs);
}

.success-tile i[b-s05nw23lds] {
    font-size: 30px;
}

.credentials-card[b-s05nw23lds] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: left;
}

.credentials-label[b-s05nw23lds] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.credential-row[b-s05nw23lds] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.credential-key[b-s05nw23lds] {
    font-size: 12px;
    color: var(--muted);
    width: 68px;
    flex-shrink: 0;
}

.credential-value[b-s05nw23lds] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink);
    word-break: break-all;
}

.copy-fallback[b-s05nw23lds] {
    font-size: 11.5px;
    color: var(--amber);
    margin: 0;
    line-height: 1.4;
}

/* === FOOTER === */
.modal-footer[b-s05nw23lds] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    background: var(--sand);
}

.modal-footer.centered[b-s05nw23lds] {
    justify-content: center;
}

/* === BOTONES === */
.btn[b-s05nw23lds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.btn i[b-s05nw23lds] {
    font-size: 16px;
}

.btn:focus-visible[b-s05nw23lds] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-s05nw23lds] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-s05nw23lds] {
    background: var(--petrol-2);
}

.btn-secondary[b-s05nw23lds] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled)[b-s05nw23lds] {
    background: var(--sand-2);
}

.btn:disabled[b-s05nw23lds] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-copy[b-s05nw23lds] {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
    flex-shrink: 0;
}

.btn-copy:hover[b-s05nw23lds] {
    background: var(--sand-2);
}

.btn-copy i[b-s05nw23lds] {
    font-size: 14px;
}

.spinning[b-s05nw23lds] {
    animation: modal-spin-b-s05nw23lds 0.8s linear infinite;
}

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

/* === RESPONSIVE === */
@media (max-width: 560px) {
    .modal-backdrop[b-s05nw23lds] {
        padding: var(--space-sm);
        align-items: flex-start;
    }

    .field-row.two-cols[b-s05nw23lds],
    .field-row.email-mode[b-s05nw23lds] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-s05nw23lds] {
        flex-direction: column-reverse;
    }

    .modal-footer .btn[b-s05nw23lds] {
        width: 100%;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Admin/CreateUserModal.razor.rz.scp.css */
/* ===========================================================
   CreateUserModal — alta de usuario en un tenant (Sub-paso 2.5)
   Design System BANQUO: 100% tokens de app.css.

   Comparte el lenguaje visual de CreateTenantModal pero NO su
   archivo: el scoped CSS de Blazor es por componente, y extraer
   una clase base compartida obligaría a tocar el modal de
   tenants (fuera del alcance de este sub-paso).

   D-040: ::deep en .form-control, mismo criterio que el resto
   del backoffice.
   =========================================================== */

/* === BACKDROP === */
.modal-backdrop[b-8h0phdk0je] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--petrol-deep) 55%, transparent);
    backdrop-filter: blur(2px);
    animation: user-modal-backdrop-in-b-8h0phdk0je 0.18s ease-out;
    overflow-y: auto;
}

@keyframes user-modal-backdrop-in-b-8h0phdk0je {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Centinelas del focus trap: focusables pero invisibles y sin espacio. */
.focus-sentinel[b-8h0phdk0je] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* === PANEL === */
.modal-panel[b-8h0phdk0je] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--space-xl));
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: user-modal-panel-in-b-8h0phdk0je 0.22s cubic-bezier(.2,.7,.3,1);
}

@keyframes user-modal-panel-in-b-8h0phdk0je {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === HEADER === */
.modal-header[b-8h0phdk0je] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--line);
}

.modal-title[b-8h0phdk0je] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.modal-subtitle[b-8h0phdk0je] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: var(--space-xs) 0 0 0;
}

.modal-title.centered[b-8h0phdk0je],
.modal-subtitle.centered[b-8h0phdk0je] {
    text-align: center;
}

.icon-btn[b-8h0phdk0je] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn i[b-8h0phdk0je] {
    font-size: 18px;
}

.icon-btn:hover:not(:disabled)[b-8h0phdk0je] {
    background: var(--sand-2);
    color: var(--ink);
}

.icon-btn:focus-visible[b-8h0phdk0je] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.icon-btn:disabled[b-8h0phdk0je] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === BODY === */
.modal-body[b-8h0phdk0je] {
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-body.state-centered[b-8h0phdk0je] {
    align-items: center;
    text-align: center;
    padding-top: var(--space-xl);
}

/* === SECCIONES === */
.form-section[b-8h0phdk0je] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-head[b-8h0phdk0je] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon[b-8h0phdk0je] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    flex-shrink: 0;
}

.section-icon i[b-8h0phdk0je] {
    font-size: 16px;
}

.section-title[b-8h0phdk0je] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* === CAMPOS === */
.field[b-8h0phdk0je] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-row[b-8h0phdk0je] {
    display: grid;
    gap: var(--space-md);
}

.field-row.two-cols[b-8h0phdk0je] {
    grid-template-columns: 1fr 1fr;
}

.field-label[b-8h0phdk0je] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

/* Mensaje en lugar del select: cargando tenants o sin tenants activos. */
.field-hint[b-8h0phdk0je] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 9px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.field-hint strong[b-8h0phdk0je] {
    color: var(--ink-soft);
    font-weight: 500;
}

.field[b-8h0phdk0je]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-8h0phdk0je]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-8h0phdk0je]  .form-control::placeholder {
    color: var(--muted);
}

.field[b-8h0phdk0je]  .form-control:disabled {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-8h0phdk0je]  .form-control.has-error {
    border-color: var(--red);
}

.field[b-8h0phdk0je]  .form-control.has-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.field-error[b-8h0phdk0je] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
    line-height: 1.4;
}

/* === BANNERS === */
.banner[b-8h0phdk0je] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.banner i[b-8h0phdk0je] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-info[b-8h0phdk0je] {
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    color: var(--ink-soft);
}

.banner-info i[b-8h0phdk0je] {
    color: var(--gold-deep);
}

.banner-warning[b-8h0phdk0je] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    color: var(--ink-soft);
}

.banner-warning i[b-8h0phdk0je] {
    color: var(--amber);
}

.banner-error[b-8h0phdk0je] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--ink-soft);
}

.banner-error i[b-8h0phdk0je] {
    color: var(--red);
}

/* === SUCCESS === */
.success-tile[b-8h0phdk0je] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
    margin-bottom: var(--space-xs);
}

.success-tile i[b-8h0phdk0je] {
    font-size: 30px;
}

.credentials-card[b-8h0phdk0je] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: left;
}

.credentials-label[b-8h0phdk0je] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.credential-row[b-8h0phdk0je] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.credential-key[b-8h0phdk0je] {
    font-size: 12px;
    color: var(--muted);
    width: 68px;
    flex-shrink: 0;
}

.credential-value[b-8h0phdk0je] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink);
    word-break: break-all;
}

.copy-fallback[b-8h0phdk0je] {
    font-size: 11.5px;
    color: var(--amber);
    margin: 0;
    line-height: 1.4;
}

/* === FOOTER === */
.modal-footer[b-8h0phdk0je] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    background: var(--sand);
}

.modal-footer.centered[b-8h0phdk0je] {
    justify-content: center;
}

/* === BOTONES === */
.btn[b-8h0phdk0je] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.btn i[b-8h0phdk0je] {
    font-size: 16px;
}

.btn:focus-visible[b-8h0phdk0je] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-8h0phdk0je] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-8h0phdk0je] {
    background: var(--petrol-2);
}

.btn-secondary[b-8h0phdk0je] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled)[b-8h0phdk0je] {
    background: var(--sand-2);
}

.btn:disabled[b-8h0phdk0je] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-copy[b-8h0phdk0je] {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
    flex-shrink: 0;
}

.btn-copy:hover[b-8h0phdk0je] {
    background: var(--sand-2);
}

.btn-copy i[b-8h0phdk0je] {
    font-size: 14px;
}

.spinning[b-8h0phdk0je] {
    animation: user-modal-spin-b-8h0phdk0je 0.8s linear infinite;
}

@keyframes user-modal-spin-b-8h0phdk0je {
    to { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 560px) {
    .modal-backdrop[b-8h0phdk0je] {
        padding: var(--space-sm);
        align-items: flex-start;
    }

    .field-row.two-cols[b-8h0phdk0je] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-8h0phdk0je] {
        flex-direction: column-reverse;
    }

    .modal-footer .btn[b-8h0phdk0je] {
        width: 100%;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Admin/EditTenantModal.razor.rz.scp.css */
/* ===========================================================
   EditTenantModal — edición de tenant (Feature #1 post-piloto)
   Design System BANQUO: 100% tokens de app.css.

   D-040: ::deep en .form-control. Hoy los inputs son HTML directo
   del .razor (heredan b-xxx), pero se mantiene el patrón de
   CreateTenantModal.razor.css para que migrar a <InputText> no
   rompa los estilos en silencio.
   =========================================================== */

/* === BACKDROP === */
.modal-backdrop[b-27615ocpjn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--petrol-deep) 55%, transparent);
    backdrop-filter: blur(2px);
    animation: modal-backdrop-in-b-27615ocpjn 0.18s ease-out;
    overflow-y: auto;
}

@keyframes modal-backdrop-in-b-27615ocpjn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Centinelas del focus trap: focusables pero invisibles y sin espacio. */
.focus-sentinel[b-27615ocpjn] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* === PANEL === */
.modal-panel[b-27615ocpjn] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--space-xl));
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-panel-in-b-27615ocpjn 0.22s cubic-bezier(.2,.7,.3,1);
}

@keyframes modal-panel-in-b-27615ocpjn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === HEADER === */
.modal-header[b-27615ocpjn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--line);
}

.modal-title[b-27615ocpjn] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.modal-subtitle[b-27615ocpjn] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: var(--space-xs) 0 0 0;
}

.modal-title.centered[b-27615ocpjn],
.modal-subtitle.centered[b-27615ocpjn] {
    text-align: center;
}

.icon-btn[b-27615ocpjn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn i[b-27615ocpjn] {
    font-size: 18px;
}

.icon-btn:hover:not(:disabled)[b-27615ocpjn] {
    background: var(--sand-2);
    color: var(--ink);
}

.icon-btn:focus-visible[b-27615ocpjn] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.icon-btn:disabled[b-27615ocpjn] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === BODY === */
.modal-body[b-27615ocpjn] {
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-body.state-centered[b-27615ocpjn] {
    align-items: center;
    text-align: center;
    padding-top: var(--space-xl);
}

.loading-icon[b-27615ocpjn] {
    font-size: 30px;
    color: var(--muted);
}

/* === SLUG READ-ONLY === */
.readonly-box[b-27615ocpjn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.readonly-icon[b-27615ocpjn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--sand-2);
    color: var(--muted);
}

.readonly-icon i[b-27615ocpjn] {
    font-size: 15px;
}

.readonly-text[b-27615ocpjn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.readonly-label[b-27615ocpjn] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.readonly-value[b-27615ocpjn] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink-soft);
    word-break: break-all;
}

.readonly-hint[b-27615ocpjn] {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

/* === SECCIONES DEL FORM === */
.form-section[b-27615ocpjn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-head[b-27615ocpjn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon[b-27615ocpjn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    flex-shrink: 0;
}

.section-icon i[b-27615ocpjn] {
    font-size: 16px;
}

.section-title[b-27615ocpjn] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* === CAMPOS === */
.field[b-27615ocpjn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-row[b-27615ocpjn] {
    display: grid;
    gap: var(--space-md);
}

.field-row.two-cols[b-27615ocpjn] {
    grid-template-columns: 1fr 1fr;
}

.field-label[b-27615ocpjn] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.optional[b-27615ocpjn] {
    font-weight: 400;
    color: var(--muted);
    font-size: 11px;
}

.field[b-27615ocpjn]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-27615ocpjn]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-27615ocpjn]  .form-control::placeholder {
    color: var(--muted);
}

.field[b-27615ocpjn]  .form-control:disabled {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-27615ocpjn]  textarea.form-control {
    resize: vertical;
    line-height: 1.5;
}

.field[b-27615ocpjn]  .form-control.has-error {
    border-color: var(--red);
}

.field[b-27615ocpjn]  .form-control.has-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.field-error[b-27615ocpjn] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
    line-height: 1.4;
}

/* === ESTADO DEL TENANT + TOGGLE === */
.state-box[b-27615ocpjn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.state-text[b-27615ocpjn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.state-label[b-27615ocpjn] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.state-hint[b-27615ocpjn] {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.4;
}

.toggle[b-27615ocpjn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    flex-shrink: 0;
}

/* El input real queda invisible pero sigue siendo el que recibe foco y
   teclado: el track y el thumb son solo su representación visual. */
.toggle[b-27615ocpjn]  .toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.toggle-track[b-27615ocpjn] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background-color 0.18s ease;
    flex-shrink: 0;
}

.toggle-thumb[b-27615ocpjn] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease;
}

.toggle.is-on .toggle-track[b-27615ocpjn] {
    background: var(--green);
}

.toggle.is-on .toggle-thumb[b-27615ocpjn] {
    transform: translateX(16px);
}

.toggle.is-off .toggle-track[b-27615ocpjn] {
    background: color-mix(in srgb, var(--red) 45%, var(--line-strong));
}

.toggle-label[b-27615ocpjn] {
    font-size: 12.5px;
    font-weight: 500;
}

.toggle.is-on .toggle-label[b-27615ocpjn] {
    color: var(--green);
}

.toggle.is-off .toggle-label[b-27615ocpjn] {
    color: var(--red);
}

.toggle[b-27615ocpjn]  .toggle-input:focus-visible + .toggle-track {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.toggle[b-27615ocpjn]  .toggle-input:disabled ~ * {
    opacity: 0.55;
}

/* === BANNERS === */
.banner[b-27615ocpjn] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.banner i[b-27615ocpjn] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-info[b-27615ocpjn] {
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    color: var(--ink-soft);
}

.banner-info i[b-27615ocpjn] {
    color: var(--gold-deep);
}

/* Acento para cambios que alteran cómo opera el tenant (A-07). */
.banner-accent[b-27615ocpjn] {
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    color: var(--ink-soft);
}

.banner-accent i[b-27615ocpjn] {
    color: var(--gold-deep);
}

.banner-warning[b-27615ocpjn] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    color: var(--ink-soft);
}

.banner-warning i[b-27615ocpjn] {
    color: var(--amber);
}

.banner-error[b-27615ocpjn] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--ink-soft);
}

.banner-error i[b-27615ocpjn] {
    color: var(--red);
}

/* === TILES DE ESTADO === */
.success-tile[b-27615ocpjn],
.conflict-tile[b-27615ocpjn] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xs);
}

.success-tile[b-27615ocpjn] {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
}

.conflict-tile[b-27615ocpjn] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}

.success-tile i[b-27615ocpjn],
.conflict-tile i[b-27615ocpjn] {
    font-size: 30px;
}

/* === CONFIRMACIÓN DE BAJA ===
   Overlay dentro del panel: el formulario queda visible detrás, atenuado,
   para que se entienda que la baja es un paso sobre lo que ya se editó. */
.confirm-overlay[b-27615ocpjn] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--petrol-deep) 40%, transparent);
    animation: modal-backdrop-in-b-27615ocpjn 0.15s ease-out;
}

.confirm-card[b-27615ocpjn] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.confirm-tile[b-27615ocpjn] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.confirm-tile i[b-27615ocpjn] {
    font-size: 26px;
}

.confirm-title[b-27615ocpjn] {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}

.confirm-text[b-27615ocpjn] {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.confirm-field[b-27615ocpjn] {
    width: 100%;
    text-align: left;
}

.confirm-actions[b-27615ocpjn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
}

/* === FOOTER === */
.modal-footer[b-27615ocpjn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    background: var(--sand);
}

.modal-footer.centered[b-27615ocpjn] {
    justify-content: center;
}

/* === BOTONES === */
.btn[b-27615ocpjn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.btn i[b-27615ocpjn] {
    font-size: 16px;
}

.btn:focus-visible[b-27615ocpjn] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-27615ocpjn] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-27615ocpjn] {
    background: var(--petrol-2);
}

.btn-secondary[b-27615ocpjn] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled)[b-27615ocpjn] {
    background: var(--sand-2);
}

.btn-danger[b-27615ocpjn] {
    background: var(--red);
    color: var(--white);
}

.btn-danger:hover:not(:disabled)[b-27615ocpjn] {
    background: color-mix(in srgb, var(--red) 85%, var(--ink));
}

.btn:disabled[b-27615ocpjn] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-27615ocpjn] {
    animation: modal-spin-b-27615ocpjn 0.8s linear infinite;
}

@keyframes modal-spin-b-27615ocpjn {
    to { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 560px) {
    .modal-backdrop[b-27615ocpjn] {
        padding: var(--space-sm);
        align-items: flex-start;
    }

    .field-row.two-cols[b-27615ocpjn] {
        grid-template-columns: 1fr;
    }

    .state-box[b-27615ocpjn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-footer[b-27615ocpjn],
    .confirm-actions[b-27615ocpjn] {
        flex-direction: column-reverse;
    }

    .modal-footer .btn[b-27615ocpjn],
    .confirm-actions .btn[b-27615ocpjn] {
        width: 100%;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Admin/EditUserModal.razor.rz.scp.css */
/* ===========================================================
   EditUserModal — edición de usuario (Feature #2 post-piloto)
   Design System BANQUO: 100% tokens de app.css.

   Hermano de EditTenantModal.razor.css: mismo esqueleto de modal,
   mismos boxes read-only y mismo toggle. Agrega el checkbox de
   contraseña forzada y el estado ForbiddenTarget.

   D-040: ::deep en .form-control y en los inputs ocultos del
   toggle/checkbox. Hoy son HTML directo del .razor (heredan
   b-xxx), pero se mantiene el patrón para que migrar a
   <InputText> no rompa los estilos en silencio.
   =========================================================== */

/* === BACKDROP === */
.modal-backdrop[b-frhcoraaxm] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--petrol-deep) 55%, transparent);
    backdrop-filter: blur(2px);
    animation: modal-backdrop-in-b-frhcoraaxm 0.18s ease-out;
    overflow-y: auto;
}

@keyframes modal-backdrop-in-b-frhcoraaxm {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Centinelas del focus trap: focusables pero invisibles y sin espacio. */
.focus-sentinel[b-frhcoraaxm] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* === PANEL === */
.modal-panel[b-frhcoraaxm] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--space-xl));
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-panel-in-b-frhcoraaxm 0.22s cubic-bezier(.2,.7,.3,1);
}

@keyframes modal-panel-in-b-frhcoraaxm {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === HEADER === */
.modal-header[b-frhcoraaxm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--line);
}

.modal-title[b-frhcoraaxm] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}

.modal-subtitle[b-frhcoraaxm] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: var(--space-xs) 0 0 0;
}

.modal-title.centered[b-frhcoraaxm],
.modal-subtitle.centered[b-frhcoraaxm] {
    text-align: center;
}

.icon-btn[b-frhcoraaxm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-btn i[b-frhcoraaxm] {
    font-size: 18px;
}

.icon-btn:hover:not(:disabled)[b-frhcoraaxm] {
    background: var(--sand-2);
    color: var(--ink);
}

.icon-btn:focus-visible[b-frhcoraaxm] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.icon-btn:disabled[b-frhcoraaxm] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === BODY === */
.modal-body[b-frhcoraaxm] {
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-body.state-centered[b-frhcoraaxm] {
    align-items: center;
    text-align: center;
    padding-top: var(--space-xl);
}

.loading-icon[b-frhcoraaxm] {
    font-size: 30px;
    color: var(--muted);
}

/* === IDENTIDAD READ-ONLY (email + tenant) === */
.readonly-group[b-frhcoraaxm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.readonly-box[b-frhcoraaxm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.readonly-icon[b-frhcoraaxm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--sand-2);
    color: var(--muted);
}

.readonly-icon i[b-frhcoraaxm] {
    font-size: 15px;
}

.readonly-text[b-frhcoraaxm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.readonly-label[b-frhcoraaxm] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.readonly-value[b-frhcoraaxm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink-soft);
    word-break: break-all;
}

/* El nombre del tenant es prosa, no un identificador técnico. */
.readonly-value.plain[b-frhcoraaxm] {
    font-family: var(--font-body);
    font-size: 13px;
    word-break: normal;
}

.readonly-hint[b-frhcoraaxm] {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

/* === SECCIONES DEL FORM === */
.form-section[b-frhcoraaxm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-head[b-frhcoraaxm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon[b-frhcoraaxm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    flex-shrink: 0;
}

.section-icon i[b-frhcoraaxm] {
    font-size: 16px;
}

.section-title[b-frhcoraaxm] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* === CAMPOS === */
/* Mensaje en lugar del select de sucursal mientras carga (REQ-06, 8.0.def).
   Copiado de CreateUserModal.razor.css para que ambos modales se vean igual. */
.field-hint[b-frhcoraaxm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 9px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.field[b-frhcoraaxm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-row[b-frhcoraaxm] {
    display: grid;
    gap: var(--space-md);
}

.field-row.two-cols[b-frhcoraaxm] {
    grid-template-columns: 1fr 1fr;
}

.field-label[b-frhcoraaxm] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.field[b-frhcoraaxm]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-frhcoraaxm]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-frhcoraaxm]  .form-control::placeholder {
    color: var(--muted);
}

.field[b-frhcoraaxm]  .form-control:disabled {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-frhcoraaxm]  .form-control.has-error {
    border-color: var(--red);
}

.field[b-frhcoraaxm]  .form-control.has-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.field-error[b-frhcoraaxm] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
    line-height: 1.4;
}

/* === OPCIÓN CON CHECKBOX (contraseña forzada) === */
.option-box[b-frhcoraaxm] {
    padding: var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.checkbox-row[b-frhcoraaxm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

/* El input real queda invisible pero sigue recibiendo foco y teclado: la
   marca es solo su representación visual. */
.checkbox-row[b-frhcoraaxm]  .checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.checkbox-mark[b-frhcoraaxm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.checkbox-mark i[b-frhcoraaxm] {
    font-size: 13px;
}

.checkbox-row[b-frhcoraaxm]  .checkbox-input:checked + .checkbox-mark {
    background: var(--petrol);
    border-color: var(--petrol);
    color: var(--sand);
}

.checkbox-row[b-frhcoraaxm]  .checkbox-input:focus-visible + .checkbox-mark {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.checkbox-row[b-frhcoraaxm]  .checkbox-input:disabled ~ * {
    opacity: 0.55;
}

.checkbox-text[b-frhcoraaxm] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.option-label[b-frhcoraaxm] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.option-hint[b-frhcoraaxm] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
}

/* === ESTADO DE LA CUENTA + TOGGLE === */
.state-box[b-frhcoraaxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.state-text[b-frhcoraaxm] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.state-label[b-frhcoraaxm] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.state-hint[b-frhcoraaxm] {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.4;
}

.toggle[b-frhcoraaxm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.toggle[b-frhcoraaxm]  .toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.toggle-track[b-frhcoraaxm] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background-color 0.18s ease;
    flex-shrink: 0;
}

.toggle-thumb[b-frhcoraaxm] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease;
}

.toggle.is-on .toggle-track[b-frhcoraaxm] {
    background: var(--green);
}

.toggle.is-on .toggle-thumb[b-frhcoraaxm] {
    transform: translateX(16px);
}

.toggle.is-off .toggle-track[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--red) 45%, var(--line-strong));
}

.toggle-label[b-frhcoraaxm] {
    font-size: 12.5px;
    font-weight: 500;
}

.toggle.is-on .toggle-label[b-frhcoraaxm] {
    color: var(--green);
}

.toggle.is-off .toggle-label[b-frhcoraaxm] {
    color: var(--red);
}

.toggle[b-frhcoraaxm]  .toggle-input:focus-visible + .toggle-track {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.toggle[b-frhcoraaxm]  .toggle-input:disabled ~ * {
    opacity: 0.55;
}

/* === BANNERS === */
.banner[b-frhcoraaxm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.banner i[b-frhcoraaxm] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-info[b-frhcoraaxm] {
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    color: var(--ink-soft);
}

.banner-info i[b-frhcoraaxm] {
    color: var(--gold-deep);
}

/* Acento para cambios que alteran qué puede hacer la cuenta. */
.banner-accent[b-frhcoraaxm] {
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    color: var(--ink-soft);
}

.banner-accent i[b-frhcoraaxm] {
    color: var(--gold-deep);
}

.banner-warning[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    color: var(--ink-soft);
}

.banner-warning i[b-frhcoraaxm] {
    color: var(--amber);
}

.banner-error[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--ink-soft);
}

.banner-error i[b-frhcoraaxm] {
    color: var(--red);
}

/* === TILES DE ESTADO === */
.success-tile[b-frhcoraaxm],
.conflict-tile[b-frhcoraaxm],
.forbidden-tile[b-frhcoraaxm] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xs);
}

.success-tile[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
}

.conflict-tile[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}

/* El objetivo protegido no es un error del operador: es una regla del
   sistema. Va en petrol (institucional), no en rojo. */
.forbidden-tile[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--petrol) 10%, transparent);
    color: var(--petrol);
}

.success-tile i[b-frhcoraaxm],
.conflict-tile i[b-frhcoraaxm],
.forbidden-tile i[b-frhcoraaxm] {
    font-size: 30px;
}

/* === CONFIRMACIÓN DE BAJA ===
   Overlay dentro del panel: el formulario queda visible detrás, atenuado,
   para que se entienda que la baja es un paso sobre lo que ya se editó. */
.confirm-overlay[b-frhcoraaxm] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--petrol-deep) 40%, transparent);
    animation: modal-backdrop-in-b-frhcoraaxm 0.15s ease-out;
}

.confirm-card[b-frhcoraaxm] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.confirm-tile[b-frhcoraaxm] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.confirm-tile i[b-frhcoraaxm] {
    font-size: 26px;
}

.confirm-title[b-frhcoraaxm] {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}

.confirm-text[b-frhcoraaxm] {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.confirm-actions[b-frhcoraaxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
}

/* === FOOTER === */
.modal-footer[b-frhcoraaxm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    background: var(--sand);
}

.modal-footer.centered[b-frhcoraaxm] {
    justify-content: center;
}

/* === BOTONES === */
.btn[b-frhcoraaxm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.btn i[b-frhcoraaxm] {
    font-size: 16px;
}

.btn:focus-visible[b-frhcoraaxm] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-frhcoraaxm] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-frhcoraaxm] {
    background: var(--petrol-2);
}

.btn-secondary[b-frhcoraaxm] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled)[b-frhcoraaxm] {
    background: var(--sand-2);
}

.btn-danger[b-frhcoraaxm] {
    background: var(--red);
    color: var(--white);
}

.btn-danger:hover:not(:disabled)[b-frhcoraaxm] {
    background: color-mix(in srgb, var(--red) 85%, var(--ink));
}

.btn:disabled[b-frhcoraaxm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-frhcoraaxm] {
    animation: modal-spin-b-frhcoraaxm 0.8s linear infinite;
}

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

/* === RESPONSIVE === */
@media (max-width: 560px) {
    .modal-backdrop[b-frhcoraaxm] {
        padding: var(--space-sm);
        align-items: flex-start;
    }

    .field-row.two-cols[b-frhcoraaxm] {
        grid-template-columns: 1fr;
    }

    .state-box[b-frhcoraaxm] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-footer[b-frhcoraaxm],
    .confirm-actions[b-frhcoraaxm] {
        flex-direction: column-reverse;
    }

    .modal-footer .btn[b-frhcoraaxm],
    .confirm-actions .btn[b-frhcoraaxm] {
        width: 100%;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Admin/Tenants.razor.rz.scp.css */
/* ===========================================================
   /admin/tenants — Backoffice VD (Sub-paso 2.3, BLOQUE 2)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos
   salvo los pills semánticos definidos abajo.

   D-040: ::deep aplicado a .search-input. El <input> es HTML directo
   del .razor (hereda b-xxx), pero se mantiene el mismo patrón que
   Dashboard.razor.css para que un futuro cambio a <InputText> no
   rompa los estilos en silencio.
   =========================================================== */

.tenants-page[b-suqc0z82o2] {
    animation: tenants-fade-up-b-suqc0z82o2 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes tenants-fade-up-b-suqc0z82o2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.page-header[b-suqc0z82o2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page-title[b-suqc0z82o2] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-suqc0z82o2] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* === BOTÓN PRIMARIO === */
.btn[b-suqc0z82o2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn i[b-suqc0z82o2] {
    font-size: 16px;
}

.btn-primary[b-suqc0z82o2] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-suqc0z82o2] {
    background: var(--petrol-2);
}

/* Acción por fila: discreta en reposo para no competir con el CTA de la
   cabecera, y con contorno propio al pasar por encima. */
.btn-ghost[b-suqc0z82o2] {
    padding: 6px 12px;
    font-size: 12.5px;
    background: transparent;
    color: var(--muted);
    border-color: transparent;
}

.btn-ghost i[b-suqc0z82o2] {
    font-size: 14px;
}

.btn-ghost:hover[b-suqc0z82o2] {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-ghost:focus-visible[b-suqc0z82o2] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary:disabled[b-suqc0z82o2] {
    background: var(--sand-2);
    color: var(--muted);
    border-color: var(--line);
    cursor: not-allowed;
}

/* === CARD CONTENEDORA === */
.table-card[b-suqc0z82o2] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

/* === TOOLBAR (buscador + contador) === */
.toolbar[b-suqc0z82o2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.search-wrapper[b-suqc0z82o2] {
    position: relative;
    flex: 1 1 260px;
    max-width: 380px;
}

.search-icon[b-suqc0z82o2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--muted);
    pointer-events: none;
}

.search-wrapper[b-suqc0z82o2]  .search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-wrapper[b-suqc0z82o2]  .search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.search-wrapper[b-suqc0z82o2]  .search-input::placeholder {
    color: var(--muted);
}

.result-count[b-suqc0z82o2] {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* === ESTADOS === */
.loading-state[b-suqc0z82o2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 13px;
}

.loading-state i[b-suqc0z82o2] {
    font-size: 18px;
    animation: tenants-spin-b-suqc0z82o2 0.8s linear infinite;
}

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

.empty-state[b-suqc0z82o2] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-suqc0z82o2] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile i[b-suqc0z82o2] {
    font-size: 32px;
}

.empty-title[b-suqc0z82o2] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-suqc0z82o2] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 420px;
}

/* === TABLA === */
.table-scroll[b-suqc0z82o2] {
    overflow-x: auto;
}

.tenants-table[b-suqc0z82o2] {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tenants-table thead tr[b-suqc0z82o2] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.tenants-table th[b-suqc0z82o2] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.tenants-table tbody tr[b-suqc0z82o2] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.tenants-table tbody tr:hover[b-suqc0z82o2] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.tenants-table tbody tr:last-child[b-suqc0z82o2] {
    border-bottom: none;
}

.tenants-table td[b-suqc0z82o2] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Anchos y tratamiento por columna */
.col-name[b-suqc0z82o2] { min-width: 220px; }
.col-taxid[b-suqc0z82o2] { width: 140px; color: var(--ink-soft); }
.col-email[b-suqc0z82o2] { min-width: 200px; color: var(--ink-soft); }
.col-mode[b-suqc0z82o2] { width: 130px; }
.col-count[b-suqc0z82o2] { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.col-state[b-suqc0z82o2] { width: 110px; }
.col-actions[b-suqc0z82o2] { width: 104px; text-align: right; }

.tenants-table th.col-count[b-suqc0z82o2] {
    text-align: right;
}

/* Encabezado de "Acciones": la columna se entiende sola por el botón, así que
   el texto queda solo para lectores de pantalla. */
.sr-only[b-suqc0z82o2] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.tenant-name[b-suqc0z82o2] {
    display: block;
    font-weight: 500;
    color: var(--ink);
}

.tenant-slug[b-suqc0z82o2] {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--muted);
}

/* === PILLS SEMÁNTICOS === */
.pill[b-suqc0z82o2] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Managed (teal) — modo del piloto vigente */
.pill-managed[b-suqc0z82o2] {
    background: #E1F5EE;
    color: #085041;
}

/* Self-service (purple) — se habilita cuando el primer cliente compre */
.pill-selfservice[b-suqc0z82o2] {
    background: #EEEDFE;
    color: #26215C;
}

.pill-active[b-suqc0z82o2] {
    background: #EAF3DE;
    color: #27500A;
}

.pill-inactive[b-suqc0z82o2] {
    background: #FCEBEB;
    color: #501313;
}

.pill-neutral[b-suqc0z82o2] {
    background: var(--sand-2);
    color: var(--ink-soft);
}

/* === INFO BANNER === */
.info-banner[b-suqc0z82o2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 12px var(--space-md);
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.info-banner i[b-suqc0z82o2] {
    font-size: 16px;
    color: var(--gold-deep);
    flex-shrink: 0;
    margin-top: 1px;
}

.info-banner strong[b-suqc0z82o2] {
    color: var(--ink);
    font-weight: 500;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .page-title[b-suqc0z82o2] {
        font-size: 28px;
    }

    .page-header[b-suqc0z82o2] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar[b-suqc0z82o2] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrapper[b-suqc0z82o2] {
        max-width: none;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Admin/Users.razor.rz.scp.css */
/* ===========================================================
   /users — Gestión de usuarios (Sub-paso 2.5, BLOQUE 2; ruta y
   gate Administrator desde 8.0.def+: antes /admin/users, VD only)
   Design System BANQUO: 100% tokens de app.css, salvo los pills
   semánticos por rol definidos abajo.

   D-040: ::deep en los controles del toolbar, mismo criterio que
   Tenants.razor.css / Dashboard.razor.css.
   =========================================================== */

.users-page[b-pcdnm5w9t6] {
    animation: users-fade-up-b-pcdnm5w9t6 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes users-fade-up-b-pcdnm5w9t6 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.page-header[b-pcdnm5w9t6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page-title[b-pcdnm5w9t6] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-pcdnm5w9t6] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* === BOTÓN PRIMARIO === */
.btn[b-pcdnm5w9t6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn i[b-pcdnm5w9t6] {
    font-size: 16px;
}

.btn-primary[b-pcdnm5w9t6] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-pcdnm5w9t6] {
    background: var(--petrol-2);
}

/* Acción por fila: discreta en reposo para no competir con el CTA de la
   cabecera, y con contorno propio al pasar por encima. */
.btn-ghost[b-pcdnm5w9t6] {
    padding: 6px 12px;
    font-size: 12.5px;
    background: transparent;
    color: var(--muted);
    border-color: transparent;
}

.btn-ghost i[b-pcdnm5w9t6] {
    font-size: 14px;
}

.btn-ghost:hover:not(:disabled)[b-pcdnm5w9t6] {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-ghost:focus-visible[b-pcdnm5w9t6] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Fila protegida (VDSuperAdmin): visible pero inerte. */
.btn-ghost:disabled[b-pcdnm5w9t6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === CARD CONTENEDORA === */
.table-card[b-pcdnm5w9t6] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

/* === TOOLBAR DE FILTROS === */
.toolbar[b-pcdnm5w9t6] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.search-wrapper[b-pcdnm5w9t6] {
    position: relative;
    flex: 1 1 240px;
    max-width: 320px;
}

.search-icon[b-pcdnm5w9t6] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--muted);
    pointer-events: none;
}

.search-wrapper[b-pcdnm5w9t6]  .search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-wrapper[b-pcdnm5w9t6]  .search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.search-wrapper[b-pcdnm5w9t6]  .search-input::placeholder {
    color: var(--muted);
}

.toolbar[b-pcdnm5w9t6]  .filter-select {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    max-width: 200px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.toolbar[b-pcdnm5w9t6]  .filter-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.checkbox-field[b-pcdnm5w9t6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-field[b-pcdnm5w9t6]  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--petrol);
    cursor: pointer;
}

.result-count[b-pcdnm5w9t6] {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* === ESTADOS === */
.loading-state[b-pcdnm5w9t6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 13px;
}

.loading-state i[b-pcdnm5w9t6] {
    font-size: 18px;
    animation: users-spin-b-pcdnm5w9t6 0.8s linear infinite;
}

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

.empty-state[b-pcdnm5w9t6] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-pcdnm5w9t6] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile i[b-pcdnm5w9t6] {
    font-size: 32px;
}

.empty-title[b-pcdnm5w9t6] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-pcdnm5w9t6] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 420px;
}

/* === TABLA === */
.table-scroll[b-pcdnm5w9t6] {
    overflow-x: auto;
}

.users-table[b-pcdnm5w9t6] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.users-table thead tr[b-pcdnm5w9t6] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.users-table th[b-pcdnm5w9t6] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.users-table tbody tr[b-pcdnm5w9t6] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.users-table tbody tr:hover[b-pcdnm5w9t6] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.users-table tbody tr:last-child[b-pcdnm5w9t6] {
    border-bottom: none;
}

.users-table td[b-pcdnm5w9t6] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Anchos y tratamiento por columna */
.col-user[b-pcdnm5w9t6] { min-width: 240px; }
.col-role[b-pcdnm5w9t6] { width: 150px; }
.col-tenant[b-pcdnm5w9t6] { min-width: 180px; color: var(--ink-soft); }
.col-branch[b-pcdnm5w9t6] { min-width: 160px; color: var(--ink-soft); }
.col-state[b-pcdnm5w9t6] { width: 110px; }
.col-confirmed[b-pcdnm5w9t6] { width: 110px; text-align: center; }
.col-created[b-pcdnm5w9t6] { width: 200px; }
.col-actions[b-pcdnm5w9t6] { width: 132px; text-align: right; }

.users-table th.col-confirmed[b-pcdnm5w9t6] {
    text-align: center;
}

/* Encabezado de "Acciones": la columna se entiende sola por el botón, así que
   el texto queda solo para lectores de pantalla. */
.sr-only[b-pcdnm5w9t6] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.user-email[b-pcdnm5w9t6] {
    display: block;
    font-weight: 500;
    color: var(--ink);
    word-break: break-all;
}

.user-name[b-pcdnm5w9t6] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.vendor-tenant[b-pcdnm5w9t6] {
    color: var(--muted);
    font-style: italic;
}

.confirmed-yes[b-pcdnm5w9t6] {
    font-size: 17px;
    color: var(--green);
}

.confirmed-no[b-pcdnm5w9t6] {
    font-size: 17px;
    color: var(--muted);
}

.created-date[b-pcdnm5w9t6] {
    display: block;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.created-by[b-pcdnm5w9t6] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
    word-break: break-all;
}

/* === PILLS === */
.pill[b-pcdnm5w9t6] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Un color por rol: el listado se escanea por color antes que por texto. */
.pill-vdsuperadmin[b-pcdnm5w9t6] {
    background: #EEEDFE;
    color: #26215C;
}

.pill-administrator[b-pcdnm5w9t6] {
    background: #E6F1FB;
    color: #0C447C;
}

.pill-supervisor[b-pcdnm5w9t6] {
    background: #E1F5EE;
    color: #085041;
}

.pill-agent[b-pcdnm5w9t6] {
    background: #FAECE7;
    color: #712B13;
}

.pill-requester[b-pcdnm5w9t6] {
    background: #F1EFE8;
    color: #444441;
}

.pill-active[b-pcdnm5w9t6] {
    background: #EAF3DE;
    color: #27500A;
}

.pill-inactive[b-pcdnm5w9t6] {
    background: #FCEBEB;
    color: #501313;
}

.pill-neutral[b-pcdnm5w9t6] {
    background: var(--sand-2);
    color: var(--ink-soft);
}

/* === INFO BANNER === */
.info-banner[b-pcdnm5w9t6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 12px var(--space-md);
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.info-banner i[b-pcdnm5w9t6] {
    font-size: 16px;
    color: var(--gold-deep);
    flex-shrink: 0;
    margin-top: 1px;
}

.info-banner strong[b-pcdnm5w9t6] {
    color: var(--ink);
    font-weight: 500;
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
    .page-title[b-pcdnm5w9t6] {
        font-size: 28px;
    }

    .page-header[b-pcdnm5w9t6] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar[b-pcdnm5w9t6] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrapper[b-pcdnm5w9t6] {
        max-width: none;
    }

    .toolbar[b-pcdnm5w9t6]  .filter-select {
        max-width: none;
        width: 100%;
    }

    .result-count[b-pcdnm5w9t6] {
        margin-left: 0;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Branches/BranchForm.razor.rz.scp.css */
/* ===========================================================
   BranchForm — campos compartidos del alta y la edición de
   sucursales (REQ-06, 8.0.def). Mismos tokens y misma anatomía que
   CreateUserModal.razor.css para que las pantallas de sucursales se
   lean como parte del mismo backoffice.

   D-040: ::deep en .form-control.
   =========================================================== */

.form-section[b-h68gwwj8cd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-head[b-h68gwwj8cd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon[b-h68gwwj8cd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    flex-shrink: 0;
}

.section-icon i[b-h68gwwj8cd] {
    font-size: 16px;
}

.section-title[b-h68gwwj8cd] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.field[b-h68gwwj8cd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field-label[b-h68gwwj8cd] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}

.field-label .optional[b-h68gwwj8cd] {
    font-weight: 400;
    color: var(--muted);
}

.field-hint[b-h68gwwj8cd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 9px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.field-hint strong[b-h68gwwj8cd] {
    color: var(--ink-soft);
    font-weight: 500;
}

.field[b-h68gwwj8cd]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-h68gwwj8cd]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-h68gwwj8cd]  .form-control::placeholder {
    color: var(--muted);
}

.field[b-h68gwwj8cd]  .form-control:disabled {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

.field[b-h68gwwj8cd]  .form-control.has-error {
    border-color: var(--red);
}

.field[b-h68gwwj8cd]  .form-control.has-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.field-error[b-h68gwwj8cd] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
    line-height: 1.4;
}

.spinning[b-h68gwwj8cd] {
    animation: branch-form-spin-b-h68gwwj8cd 0.8s linear infinite;
}

@keyframes branch-form-spin-b-h68gwwj8cd {
    to { transform: rotate(360deg); }
}
/* _content/TicketsTI.Web/Components/Pages/Branches/Create.razor.rz.scp.css */
/* ===========================================================
   /branches/create — Alta de sucursal (REQ-06, 8.0.def)
   Página de formulario (no modal): header con back-link, card con el
   BranchForm y footer de acciones. Tokens BANQUO; los campos viven en
   BranchForm.razor.css. El select de tenant (solo VD) replica el .field
   del formulario con ::deep (D-040).
   =========================================================== */

.branch-form-page[b-95colfxzz1] {
    max-width: 720px;
    animation: branch-form-fade-up-b-95colfxzz1 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes branch-form-fade-up-b-95colfxzz1 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-header[b-95colfxzz1] {
    margin-bottom: var(--space-xl);
}

.back-link[b-95colfxzz1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: var(--space-sm);
}

.back-link:hover[b-95colfxzz1] {
    color: var(--ink);
}

.page-title[b-95colfxzz1] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-95colfxzz1] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    max-width: 560px;
    line-height: 1.5;
}

.form-card[b-95colfxzz1] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.form-body[b-95colfxzz1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-lg);
}

/* Sección de tenant (solo VD): mismo look que las secciones del BranchForm. */
.form-section[b-95colfxzz1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-head[b-95colfxzz1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-icon[b-95colfxzz1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    flex-shrink: 0;
}

.section-icon i[b-95colfxzz1] {
    font-size: 16px;
}

.section-title[b-95colfxzz1] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

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

.field-label[b-95colfxzz1] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
}

.field-hint[b-95colfxzz1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 9px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--muted);
}

.field[b-95colfxzz1]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
}

.field[b-95colfxzz1]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-95colfxzz1]  .form-control.has-error {
    border-color: var(--red);
}

.field-error[b-95colfxzz1] {
    font-size: 11.5px;
    color: var(--red);
    margin: 0;
}

.banner[b-95colfxzz1] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.banner i[b-95colfxzz1] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-error[b-95colfxzz1] {
    background: color-mix(in srgb, var(--red) 10%, white);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--ink);
}

.banner-error i[b-95colfxzz1] {
    color: var(--red);
}

.form-footer[b-95colfxzz1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    background: var(--sand);
}

.btn[b-95colfxzz1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.btn i[b-95colfxzz1] {
    font-size: 16px;
}

.btn:focus-visible[b-95colfxzz1] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-95colfxzz1] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-95colfxzz1] {
    background: var(--petrol-2);
}

.btn-secondary[b-95colfxzz1] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover[b-95colfxzz1] {
    background: var(--sand-2);
}

.btn:disabled[b-95colfxzz1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-95colfxzz1] {
    animation: branch-form-spin-b-95colfxzz1 0.8s linear infinite;
}

@keyframes branch-form-spin-b-95colfxzz1 {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .page-title[b-95colfxzz1] {
        font-size: 28px;
    }

    .form-footer[b-95colfxzz1] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Branches/Edit.razor.rz.scp.css */
/* ===========================================================
   /branches/{id}/edit — Edición de sucursal (REQ-06, 8.0.def)
   Misma anatomía que Create.razor.css, más la fila de contadores y el
   toggle de estado (copiado de EditUserModal para que la baja lógica
   se vea igual en usuarios y sucursales). Tokens BANQUO. D-040: ::deep
   en el checkbox del toggle.
   =========================================================== */

.branch-form-page[b-re42ioqlt3] {
    max-width: 720px;
    animation: branch-edit-fade-up-b-re42ioqlt3 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes branch-edit-fade-up-b-re42ioqlt3 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-header[b-re42ioqlt3] {
    margin-bottom: var(--space-xl);
}

.back-link[b-re42ioqlt3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: var(--space-sm);
}

.back-link:hover[b-re42ioqlt3] {
    color: var(--ink);
}

.page-title[b-re42ioqlt3] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-re42ioqlt3] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.form-card[b-re42ioqlt3] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.form-body[b-re42ioqlt3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-lg);
}

/* === CONTADORES === */
.stats-row[b-re42ioqlt3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.stat[b-re42ioqlt3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-md);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.stat-value[b-re42ioqlt3] {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink);
    line-height: 1;
}

.stat-label[b-re42ioqlt3] {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* === ESTADO (toggle) === */
.state-box[b-re42ioqlt3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sand);
}

.state-text[b-re42ioqlt3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.state-label[b-re42ioqlt3] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.state-hint[b-re42ioqlt3] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.toggle[b-re42ioqlt3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.toggle[b-re42ioqlt3]  .toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track[b-re42ioqlt3] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background-color 0.18s ease;
}

.toggle-thumb[b-re42ioqlt3] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease;
}

.toggle.is-on .toggle-track[b-re42ioqlt3] {
    background: var(--green);
}

.toggle.is-on .toggle-thumb[b-re42ioqlt3] {
    transform: translateX(18px);
}

.toggle:focus-within .toggle-track[b-re42ioqlt3] {
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.toggle-label[b-re42ioqlt3] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    min-width: 52px;
}

/* === PILLS === */
.pill[b-re42ioqlt3] {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pill-active[b-re42ioqlt3] {
    background: #EAF3DE;
    color: #27500A;
}

.pill-inactive[b-re42ioqlt3] {
    background: #FCEBEB;
    color: #501313;
}

/* === BANNERS === */
.banner[b-re42ioqlt3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.banner i[b-re42ioqlt3] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-warning[b-re42ioqlt3] {
    background: color-mix(in srgb, var(--amber) 12%, white);
    border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
    color: var(--ink);
}

.banner-warning i[b-re42ioqlt3] {
    color: var(--amber);
}

.banner-error[b-re42ioqlt3] {
    background: color-mix(in srgb, var(--red) 10%, white);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--ink);
}

.banner-error i[b-re42ioqlt3] {
    color: var(--red);
}

/* === ESTADOS DE CARGA / VACÍO === */
.loading-state[b-re42ioqlt3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 13px;
}

.empty-state[b-re42ioqlt3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-re42ioqlt3] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-sm);
}

.empty-icon-tile i[b-re42ioqlt3] {
    font-size: 32px;
}

.empty-title[b-re42ioqlt3] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0;
}

.empty-text[b-re42ioqlt3] {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 var(--space-md) 0;
}

/* === FOOTER Y BOTONES === */
.form-footer[b-re42ioqlt3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    background: var(--sand);
}

.btn[b-re42ioqlt3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.btn i[b-re42ioqlt3] {
    font-size: 16px;
}

.btn:focus-visible[b-re42ioqlt3] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-primary[b-re42ioqlt3] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-re42ioqlt3] {
    background: var(--petrol-2);
}

.btn-secondary[b-re42ioqlt3] {
    background: var(--white);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-secondary:hover[b-re42ioqlt3] {
    background: var(--sand-2);
}

.btn:disabled[b-re42ioqlt3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.spinning[b-re42ioqlt3] {
    animation: branch-edit-spin-b-re42ioqlt3 0.8s linear infinite;
}

@keyframes branch-edit-spin-b-re42ioqlt3 {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .page-title[b-re42ioqlt3] {
        font-size: 28px;
    }

    .stats-row[b-re42ioqlt3] {
        grid-template-columns: 1fr;
    }

    .state-box[b-re42ioqlt3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-footer[b-re42ioqlt3] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Branches/Index.razor.rz.scp.css */
/* ===========================================================
   /branches — Gestión de sucursales (REQ-06, sub-hito 8.0.def)
   Misma anatomía que /admin/tenants y /users (Tenants.razor.css):
   header, card con toolbar, tabla, pills y banner. 100% tokens BANQUO.

   D-040: ::deep en los controles de la toolbar.
   =========================================================== */

.branches-page[b-u3ehqy2txu] {
    animation: branches-fade-up-b-u3ehqy2txu 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes branches-fade-up-b-u3ehqy2txu {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.page-header[b-u3ehqy2txu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page-title[b-u3ehqy2txu] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-u3ehqy2txu] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* === BOTONES === */
.btn[b-u3ehqy2txu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn i[b-u3ehqy2txu] {
    font-size: 16px;
}

.btn-primary[b-u3ehqy2txu] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-u3ehqy2txu] {
    background: var(--petrol-2);
}

.btn-primary:disabled[b-u3ehqy2txu] {
    background: var(--sand-2);
    color: var(--muted);
    border-color: var(--line);
    cursor: not-allowed;
}

.btn-ghost[b-u3ehqy2txu] {
    padding: 6px 12px;
    font-size: 12.5px;
    background: transparent;
    color: var(--muted);
    border-color: transparent;
}

.btn-ghost i[b-u3ehqy2txu] {
    font-size: 14px;
}

.btn-ghost:hover:not(:disabled)[b-u3ehqy2txu] {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-ghost:focus-visible[b-u3ehqy2txu] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.btn-ghost:disabled[b-u3ehqy2txu] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Confirmación inline de la baja: rojo BANQUO, nunca un hex suelto. */
.btn-danger[b-u3ehqy2txu] {
    padding: 6px 12px;
    font-size: 12.5px;
    background: var(--red);
    color: var(--white);
}

.btn-danger:hover:not(:disabled)[b-u3ehqy2txu] {
    background: color-mix(in srgb, var(--red) 85%, black);
}

.confirm-inline[b-u3ehqy2txu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.confirm-text[b-u3ehqy2txu] {
    font-size: 12px;
    color: var(--ink-soft);
    margin-right: var(--space-xs);
}

/* === CARD CONTENEDORA === */
.table-card[b-u3ehqy2txu] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

/* === TOOLBAR === */
.toolbar[b-u3ehqy2txu] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.toolbar[b-u3ehqy2txu]  .filter-select {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    min-width: 240px;
    max-width: 320px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.toolbar[b-u3ehqy2txu]  .filter-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.checkbox-field[b-u3ehqy2txu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-field[b-u3ehqy2txu]  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--petrol);
    cursor: pointer;
}

.result-count[b-u3ehqy2txu] {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* === BANNER DE ERROR DE ACCIÓN === */
.banner[b-u3ehqy2txu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: var(--space-md) var(--space-md) 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.banner i[b-u3ehqy2txu] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-error[b-u3ehqy2txu] {
    background: color-mix(in srgb, var(--red) 10%, white);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--ink);
}

.banner-error i[b-u3ehqy2txu] {
    color: var(--red);
}

/* === ESTADOS === */
.loading-state[b-u3ehqy2txu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 13px;
}

.loading-state i[b-u3ehqy2txu] {
    font-size: 18px;
    animation: branches-spin-b-u3ehqy2txu 0.8s linear infinite;
}

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

.empty-state[b-u3ehqy2txu] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-u3ehqy2txu] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile i[b-u3ehqy2txu] {
    font-size: 32px;
}

.empty-title[b-u3ehqy2txu] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-u3ehqy2txu] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 420px;
}

/* === TABLA === */
.table-scroll[b-u3ehqy2txu] {
    overflow-x: auto;
}

.branches-table[b-u3ehqy2txu] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.branches-table thead tr[b-u3ehqy2txu] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.branches-table th[b-u3ehqy2txu] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.branches-table tbody tr[b-u3ehqy2txu] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.branches-table tbody tr:hover[b-u3ehqy2txu] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.branches-table tbody tr:last-child[b-u3ehqy2txu] {
    border-bottom: none;
}

.branches-table tbody tr.row-inactive td[b-u3ehqy2txu] {
    color: var(--muted);
}

.branches-table td[b-u3ehqy2txu] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

.col-name[b-u3ehqy2txu] { min-width: 240px; }
.col-city[b-u3ehqy2txu] { width: 160px; color: var(--ink-soft); }
.col-phone[b-u3ehqy2txu] { width: 150px; color: var(--ink-soft); }
.col-count[b-u3ehqy2txu] { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.col-state[b-u3ehqy2txu] { width: 110px; }
.col-actions[b-u3ehqy2txu] { width: 230px; text-align: right; white-space: nowrap; }

.branches-table th.col-count[b-u3ehqy2txu] {
    text-align: right;
}

.sr-only[b-u3ehqy2txu] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.branch-name[b-u3ehqy2txu] {
    display: block;
    font-weight: 500;
    color: var(--ink);
}

.branch-address[b-u3ehqy2txu] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

/* === PILLS === */
.pill[b-u3ehqy2txu] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pill-active[b-u3ehqy2txu] {
    background: #EAF3DE;
    color: #27500A;
}

.pill-inactive[b-u3ehqy2txu] {
    background: #FCEBEB;
    color: #501313;
}

/* === INFO BANNER === */
.info-banner[b-u3ehqy2txu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 12px var(--space-md);
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.info-banner i[b-u3ehqy2txu] {
    font-size: 16px;
    color: var(--gold-deep);
    flex-shrink: 0;
    margin-top: 1px;
}

.info-banner strong[b-u3ehqy2txu] {
    color: var(--ink);
    font-weight: 500;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .page-title[b-u3ehqy2txu] {
        font-size: 28px;
    }

    .page-header[b-u3ehqy2txu],
    .toolbar[b-u3ehqy2txu] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar[b-u3ehqy2txu]  .filter-select {
        max-width: none;
        width: 100%;
    }

    .result-count[b-u3ehqy2txu] {
        margin-left: 0;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* ============================================================
   Dashboard.razor.css — Dashboard unificado BANQUO
   Mini-hito 0.8 PASO REFACTOR (unifica Home + Mine).
   Tokens BANQUO desde wwwroot/app.css (D-032).
   ::deep aplicado a .search-input (D-040).
   ============================================================ */

/* ============================================================
   WELCOME SECTION (saludo serif + fecha + tagline)
   ============================================================ */

.welcome[b-phl1r3oqr6] {
    margin-bottom: var(--space-lg);
}

/* Empresa del usuario: el elemento dominante del encabezado. Eyebrow chico
   en mayúsculas con filete dorado, y el nombre en serif grande de acento. */
.welcome-tenant[b-phl1r3oqr6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-sm);
}

.welcome-eyebrow[b-phl1r3oqr6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--petrol);
}

.welcome-eyebrow[b-phl1r3oqr6]::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
}

.welcome-tenant-name[b-phl1r3oqr6] {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--gold-deep);
    overflow-wrap: anywhere;
}

.welcome-greeting[b-phl1r3oqr6] {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 26px);
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.welcome-name[b-phl1r3oqr6] {
    color: var(--ink);
}

/* Anula el capitalize global de app.css solo acá: el código ya pone en
   mayúscula el día, y "de" y el mes van en minúscula en español. */
.welcome-date[b-phl1r3oqr6] {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
    text-transform: none;
}

.welcome-tagline[b-phl1r3oqr6] {
    font-style: italic;
    color: var(--muted);
    font-size: 13px;
}

/* Page wrapper */
.dashboard-page[b-phl1r3oqr6] {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-2xl);
}

/* Admin banner */
.admin-banner[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    border-radius: 10px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--ink-soft);
}

.admin-banner i[b-phl1r3oqr6] {
    font-size: 16px;
    color: var(--gold-deep);
}

.admin-banner strong[b-phl1r3oqr6] {
    color: var(--ink);
    font-weight: 500;
}

/* Table card wrapper */
.table-card[b-phl1r3oqr6] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

/* Loading state */
.loading-state[b-phl1r3oqr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 13px;
}

.loading-state i[b-phl1r3oqr6] {
    font-size: 18px;
    animation: dashboard-spin-b-phl1r3oqr6 0.8s linear infinite;
}

/* Empty state */
.empty-state[b-phl1r3oqr6] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-phl1r3oqr6] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile i[b-phl1r3oqr6] {
    font-size: 32px;
}

.empty-title[b-phl1r3oqr6] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-phl1r3oqr6] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto var(--space-lg) auto;
    max-width: 420px;
}

/* Tabla */
.tickets-table[b-phl1r3oqr6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tickets-table thead tr[b-phl1r3oqr6] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.tickets-table th[b-phl1r3oqr6] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ============================================================
   SORTABLE COLUMNS (Mini-hito 0.9 extra hour)
   ============================================================ */

.tickets-table th.sortable[b-phl1r3oqr6] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.tickets-table th.sortable:hover[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--sand-2) 60%, var(--sand));
}

.th-content[b-phl1r3oqr6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sort-icon[b-phl1r3oqr6] {
    font-size: 12px;
    color: var(--gold);
}

.tickets-table tbody tr[b-phl1r3oqr6] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
    cursor: pointer;
}

.tickets-table tbody tr:hover[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.tickets-table tbody tr:last-child[b-phl1r3oqr6] {
    border-bottom: none;
}

.tickets-table td[b-phl1r3oqr6] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Column widths */
.col-tk[b-phl1r3oqr6] { width: 110px; }
.col-category[b-phl1r3oqr6] { width: 200px; color: var(--ink-soft); }
.col-priority[b-phl1r3oqr6] { width: 100px; }
.col-status[b-phl1r3oqr6] { width: 130px; }
.col-date[b-phl1r3oqr6] { width: 110px; color: var(--muted); font-size: 11.5px; }

/* Solicitante (email): recorta con "…" y el title muestra el valor completo.
   Se oculta en pantallas angostas, donde la grilla ya no tiene lugar. */
.col-requester[b-phl1r3oqr6] {
    width: 210px;
    max-width: 210px;
    color: var(--ink-soft);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .col-requester[b-phl1r3oqr6] {
        display: none;
    }
}

/* TK Number (monospace + gold) */
.tk-number[b-phl1r3oqr6] {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Subcategory inline pill */
.subcategory-pill[b-phl1r3oqr6] {
    color: var(--muted);
    font-size: 11.5px;
}

/* Priority badge */
.priority-badge[b-phl1r3oqr6] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    color: var(--white);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Status badge base */
.status-badge[b-phl1r3oqr6] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

/* Status NEW */
.status-badge.status-new[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* Status IN_PROGRESS */
.status-badge.status-in_progress[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}

/* Status PENDING + PENDING_USER */
.status-badge.status-pending[b-phl1r3oqr6],
.status-badge.status-pending_user[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--gold-deep);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}

/* Status ASSIGNED + CLASSIFIED */
.status-badge.status-assigned[b-phl1r3oqr6],
.status-badge.status-classified[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--petrol) 10%, transparent);
    color: var(--petrol);
    border-color: color-mix(in srgb, var(--petrol) 25%, transparent);
}

/* Status RESOLVED + CLOSED + CANCELLED */
.status-badge.status-resolved[b-phl1r3oqr6],
.status-badge.status-closed[b-phl1r3oqr6],
.status-badge.status-cancelled[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--muted) 14%, transparent);
    color: var(--muted);
    border-color: color-mix(in srgb, var(--muted) 30%, transparent);
}

/* Table footer */
.table-footer[b-phl1r3oqr6] {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--line);
    background: var(--sand);
    font-size: 11px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.pagination-info[b-phl1r3oqr6] {
    /* texto a la izquierda */
}

/* Footer-right: paginación + botón crear lado a lado */
.footer-right[b-phl1r3oqr6] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.btn-create[b-phl1r3oqr6] {
    /* Botón crear ticket en el footer (sin overrides — usa .btn + .btn-primary) */
}

/* Buttons */
.btn[b-phl1r3oqr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn i[b-phl1r3oqr6] {
    font-size: 15px;
}

.btn-primary[b-phl1r3oqr6] {
    background: var(--petrol);
    color: var(--sand);
    border-color: var(--petrol);
}

.btn-primary:hover[b-phl1r3oqr6] {
    background: var(--petrol-2);
    border-color: var(--petrol-2);
}

/* ============================================================
   KPI CARDS STRIP (clickeables)
   ============================================================ */

.kpi-strip[b-phl1r3oqr6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.kpi-card[b-phl1r3oqr6] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kpi-card:hover[b-phl1r3oqr6] {
    border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.kpi-icon-tile[b-phl1r3oqr6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon-tile i[b-phl1r3oqr6] {
    font-size: 20px;
}

/* Colores semánticos por KPI */
.kpi-total .kpi-icon-tile[b-phl1r3oqr6] {
    background: var(--gold-soft);
    color: var(--gold-deep);
}

.kpi-new .kpi-icon-tile[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
}

.kpi-progress .kpi-icon-tile[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}

.kpi-closed .kpi-icon-tile[b-phl1r3oqr6] {
    background: color-mix(in srgb, var(--muted) 14%, transparent);
    color: var(--muted);
}

.kpi-content[b-phl1r3oqr6] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-phl1r3oqr6] {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 500;
}

.kpi-value[b-phl1r3oqr6] {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink);
    line-height: 1;
}

.kpi-placeholder[b-phl1r3oqr6] {
    color: var(--muted);
    opacity: 0.5;
}

/* ============================================================
   TOOLBAR: BÚSQUEDA + FILTROS
   ============================================================ */

.toolbar[b-phl1r3oqr6] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}

.search-wrapper[b-phl1r3oqr6] {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.search-icon[b-phl1r3oqr6] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
}

/* ::deep aplicado al <input> (D-040): aunque sea HTML nativo,
   el atributo b-xxx no siempre se propaga a través del wrapper
   posicional. ::deep desde el día 1 garantiza que los estilos
   matcheen sin depender de la propagación del scope. */
.toolbar[b-phl1r3oqr6]  .search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}

.toolbar[b-phl1r3oqr6]  .search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
    background: var(--white);
}

.toolbar[b-phl1r3oqr6]  .search-input::placeholder {
    color: var(--muted);
}

.filter-chips[b-phl1r3oqr6] {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

/* Separador visual entre grupos de chips (status vs assignment) — 0.10.4c */
.filter-chips-separator[b-phl1r3oqr6] {
    color: var(--muted);
    margin: 0 var(--space-xs);
    font-size: 14px;
    user-select: none;
}

.filter-chip[b-phl1r3oqr6] {
    padding: 6px 12px;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip:hover:not(.active)[b-phl1r3oqr6] {
    background: var(--sand-2);
    border-color: var(--ink-soft);
}

.filter-chip.active[b-phl1r3oqr6] {
    background: var(--petrol);
    color: var(--sand);
    border-color: var(--petrol);
}

/* ============================================================
   PAGINATION CONTROLS
   ============================================================ */

.pagination-controls[b-phl1r3oqr6] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pagination-btn[b-phl1r3oqr6] {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--white);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled):not(.active)[b-phl1r3oqr6] {
    background: var(--sand-2);
    border-color: var(--ink-soft);
    color: var(--ink);
}

.pagination-btn:disabled[b-phl1r3oqr6] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.active[b-phl1r3oqr6] {
    background: var(--petrol);
    color: var(--sand);
    border-color: var(--petrol);
}

.pagination-arrow i[b-phl1r3oqr6] {
    font-size: 14px;
}

.pagination-ellipsis[b-phl1r3oqr6] {
    color: var(--muted);
    font-size: 13px;
    padding: 0 6px;
    user-select: none;
}

/* Spin animation */
@keyframes dashboard-spin-b-phl1r3oqr6 {
    to { transform: rotate(360deg); }
}

/* ============ SUCURSALES (F2, REQ-06) ============
   Versión compacta de la fila 5 de /reports: misma card que .table-card,
   tabla más chica (11.5px, padding corto) y sin badges, porque en el
   Dashboard es un vistazo, no el análisis. Todo el markup lo emite esta
   página: sin ::deep. */
.branches-mini[b-phl1r3oqr6] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.branches-mini-head[b-phl1r3oqr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.branches-mini-title[b-phl1r3oqr6] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.branches-mini-title i[b-phl1r3oqr6] {
    font-size: 18px;
    color: var(--gold);
}

.branches-mini-link[b-phl1r3oqr6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--petrol);
    text-decoration: none;
    white-space: nowrap;
}

.branches-mini-link:hover[b-phl1r3oqr6],
.branches-mini-link:focus-visible[b-phl1r3oqr6] {
    text-decoration: underline;
    outline: none;
}

.branches-mini-table[b-phl1r3oqr6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.branches-mini-table thead tr[b-phl1r3oqr6] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.branches-mini-table th[b-phl1r3oqr6] {
    text-align: left;
    padding: 6px var(--space-sm);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.branches-mini-table td[b-phl1r3oqr6] {
    padding: 7px var(--space-sm);
    color: var(--ink);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.branches-mini-table tbody tr:last-child td[b-phl1r3oqr6] {
    border-bottom: none;
}

.branches-mini-table .branch-name[b-phl1r3oqr6] {
    font-weight: 500;
}

.branches-mini-table .col-num[b-phl1r3oqr6] {
    width: 110px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.branches-mini-table td.overdue[b-phl1r3oqr6] {
    color: var(--red);
    font-weight: 600;
}

.branches-mini-note[b-phl1r3oqr6] {
    font-size: 11.5px;
    color: var(--muted);
    margin: var(--space-sm) 0 0;
}

/* ============ F4 (27/09/2026): UX Requester ============ */

/* Cabecera en dos columnas: texto a la izquierda, acción a la derecha.
   En pantallas chicas el botón baja debajo del saludo. */
.welcome[b-phl1r3oqr6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.welcome-text[b-phl1r3oqr6] {
    min-width: 0;
}

.welcome-actions[b-phl1r3oqr6] {
    flex-shrink: 0;
    padding-top: var(--space-xs);
}

@media (max-width: 640px) {
    .welcome[b-phl1r3oqr6] {
        flex-direction: column;
    }
}

/* KPI card activa: mismo petrol que .filter-chip.active, para que la
   card y el chip se lean como el mismo filtro. Borde + halo y el ícono
   invertido; el fondo queda blanco para no perder el color por métrica. */
.kpi-card.is-active[b-phl1r3oqr6] {
    border-color: var(--petrol);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--petrol) 18%, transparent);
}

.kpi-card.is-active .kpi-icon-tile[b-phl1r3oqr6] {
    background: var(--petrol);
    color: var(--sand);
}

.kpi-card.is-active .kpi-label[b-phl1r3oqr6] {
    color: var(--petrol);
}
/* _content/TicketsTI.Web/Components/Pages/Reports/AdminReport.razor.rz.scp.css */
/* ===========================================================
   /reports — Reporte Admin Cliente (sub-paso 2.3, sub-hito Reportes)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   NO fija max-width ni padding propio: el <main class="shell"> del
   MainLayout ya aporta 1440px centrados con 36px/32px. Repetirlo acá
   daría doble margen y una columna más angosta que el resto del sistema.

   D-040: no aplica todavía. La página es read-only y no tiene ningún
   componente Blazor de input. En cuanto el sub-paso de filtros meta un
   <InputDate>, sus estilos necesitan ::deep desde el primer commit (L-05).
   =========================================================== */

.reports-page[b-bqixkegtew] {
    animation: reports-fade-up-b-bqixkegtew 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes reports-fade-up-b-bqixkegtew {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.page-header[b-bqixkegtew] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page-title[b-bqixkegtew] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-bqixkegtew] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* === BOTONES === */
.btn[b-bqixkegtew] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.btn i[b-bqixkegtew] {
    font-size: 16px;
}

.btn-primary[b-bqixkegtew] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-bqixkegtew] {
    background: var(--petrol-2);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-bqixkegtew] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-retry[b-bqixkegtew] {
    margin-top: var(--space-lg);
}

/* === FILA DE FILTROS (REQ-06, 8.0.g) ===
   Mismo contenedor que en TeamAnalysisReport.razor.css. El select en sí lo
   emite BranchFilter y lleva su propio CSS scoped. */
.filters-row[b-bqixkegtew] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

/* === FILAS DEL REPORTE === */
.report-row[b-bqixkegtew] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.report-row-head[b-bqixkegtew] {
    margin-bottom: var(--space-md);
}

.report-row-title[b-bqixkegtew] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.report-row-hint[b-bqixkegtew] {
    font-size: 12.5px;
    color: var(--muted);
    margin: var(--space-xs) 0 0 0;
}

/* === PLACEHOLDER (se va yendo entre 2.4 y 2.7) === */
.placeholder-row[b-bqixkegtew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--sand);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--muted);
    font-size: 13px;
}

.placeholder-row i[b-bqixkegtew] {
    font-size: 28px;
    color: var(--gold-deep);
    opacity: 0.7;
}

/* === SKELETON DE CARGA === */
.loading-skeleton .skeleton-row[b-bqixkegtew] {
    /* El barrido va sobre los dos tonos de arena del sistema, no sobre grises
       genéricos: un shimmer gris al lado del header petrol se ve prestado. */
    background: linear-gradient(90deg,
        var(--sand-2) 25%,
        var(--sand) 50%,
        var(--sand-2) 75%);
    background-size: 200% 100%;
    animation: reports-shimmer-b-bqixkegtew 1.4s ease-in-out infinite;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: var(--space-lg);
}

.skeleton-kpi[b-bqixkegtew]   { height: 140px; }
.skeleton-chart[b-bqixkegtew] { height: 300px; }
.skeleton-table[b-bqixkegtew] { height: 340px; }

@keyframes reports-shimmer-b-bqixkegtew {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respeta la preferencia del sistema: una animación infinita es justo el tipo
   de movimiento que molesta a quien pidió reducirlo. */
@media (prefers-reduced-motion: reduce) {
    .reports-page[b-bqixkegtew] {
        animation: none;
    }

    .loading-skeleton .skeleton-row[b-bqixkegtew] {
        animation: none;
        background: var(--sand-2);
    }
}

/* === ESTADO DE ERROR === */
.empty-state[b-bqixkegtew] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-bqixkegtew] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile-danger[b-bqixkegtew] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.empty-icon-tile i[b-bqixkegtew] {
    font-size: 32px;
}

.empty-title[b-bqixkegtew] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-bqixkegtew] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 420px;
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
    .page-title[b-bqixkegtew] {
        font-size: 28px;
    }

    .page-header[b-bqixkegtew] {
        flex-direction: column;
        align-items: stretch;
    }

    .report-row[b-bqixkegtew] {
        padding: var(--space-md);
    }

    .placeholder-row[b-bqixkegtew] {
        padding: var(--space-xl) var(--space-md);
    }
}

/* ===========================================================
   FILA 5 — Comparativa por sucursal (F2, REQ-06)
   Misma tabla que AgentPerformanceTable y PortfolioTopTenantsTable
   (thead en sand-2, th de 10px en mayúsculas), badges de abiertos y
   vencidos idénticos al Portfolio para que las cifras se lean igual en
   los dos reportes. Todo el markup lo emite esta página: sin ::deep.
   =========================================================== */

.table-scroll[b-bqixkegtew] {
    overflow-x: auto;
}

.branches-table[b-bqixkegtew] {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.branches-table thead tr[b-bqixkegtew] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.branches-table th[b-bqixkegtew] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.branches-table tbody tr[b-bqixkegtew] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.branches-table tbody tr:last-child[b-bqixkegtew] {
    border-bottom: none;
}

.branches-table tbody tr:hover[b-bqixkegtew] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.branches-table td[b-bqixkegtew] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Fila destacada = la sucursal del BranchFilter. Borde dorado a la
   izquierda y fondo champagne tenue: se nota sin gritar, y sobrevive al
   hover porque el destaque es más fuerte que el hover. */
.branches-table tbody tr.is-selected[b-bqixkegtew],
.branches-table tbody tr.is-selected:hover[b-bqixkegtew] {
    background: color-mix(in srgb, var(--gold-soft) 85%, transparent);
    box-shadow: inset 3px 0 0 var(--gold-deep);
}

.col-branch[b-bqixkegtew] {
    min-width: 220px;
}

.branch-name[b-bqixkegtew] {
    font-weight: 500;
    color: var(--ink);
}

.selected-tag[b-bqixkegtew] {
    display: inline-block;
    margin-left: var(--space-sm);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gold-deep);
    color: var(--white);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.col-num[b-bqixkegtew] {
    width: 140px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.open-badge[b-bqixkegtew],
.overdue-badge[b-bqixkegtew] {
    display: inline-block;
    min-width: 36px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    text-align: center;
}

.open-badge[b-bqixkegtew] {
    background: color-mix(in srgb, var(--petrol) 10%, transparent);
    color: var(--petrol);
}

.overdue-danger[b-bqixkegtew] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.overdue-none[b-bqixkegtew] {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}

.branches-empty[b-bqixkegtew] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    color: var(--muted);
    font-size: 13px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
}
/* _content/TicketsTI.Web/Components/Pages/Reports/AgentPerformanceTable.razor.rz.scp.css */
/* ===========================================================
   AgentPerformanceTable — fila 4 del Reporte Admin (sub-paso 2.7)
   Design System BANQUO: 100% tokens de app.css.

   Misma tabla que Users.razor.css (thead en sand-2, th de 10px en
   mayúsculas, hover dorado tenue) para que el reporte y el backoffice
   se lean como el mismo producto. No hace falta ::deep: todo el markup
   lo emite este mismo componente (D-040 aplica a hijos, no acá).
   =========================================================== */

.table-scroll[b-a9ygwmfosa] {
    overflow-x: auto;
}

.agent-table[b-a9ygwmfosa] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.agent-table thead tr[b-a9ygwmfosa] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.agent-table th[b-a9ygwmfosa] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.agent-table tbody tr[b-a9ygwmfosa] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.agent-table tbody tr:hover[b-a9ygwmfosa] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.agent-table tbody tr:last-child[b-a9ygwmfosa] {
    border-bottom: none;
}

.agent-table td[b-a9ygwmfosa] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Columnas numéricas a la derecha y con dígitos de ancho fijo, para que
   las cifras queden alineadas fila contra fila. */
.col-num[b-a9ygwmfosa] {
    width: 140px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.col-agent[b-a9ygwmfosa] {
    min-width: 260px;
}

/* === CELDA DE AGENTE: avatar + email === */
.agent-cell[b-a9ygwmfosa] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.agent-avatar[b-a9ygwmfosa] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    flex-shrink: 0;
}

.agent-email[b-a9ygwmfosa] {
    font-weight: 500;
    color: var(--ink);
    word-break: break-all;
}

/* === RESUELTOS: la cifra que importa, con el verde de éxito === */
.resolved-badge[b-a9ygwmfosa] {
    display: inline-block;
    min-width: 36px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    font-weight: 600;
    text-align: center;
}

/* === SIN DATOS === */
.table-empty[b-a9ygwmfosa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-md);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.table-empty i[b-a9ygwmfosa] {
    font-size: 28px;
    opacity: 0.6;
}

.table-empty p[b-a9ygwmfosa] {
    margin: 0;
}
/* _content/TicketsTI.Web/Components/Pages/Reports/DistributionRow.razor.rz.scp.css */
/* ===========================================================
   DistributionRow — fila 2 del Reporte Admin (sub-paso 2.5)
   Design System BANQUO: 100% tokens de app.css.

   ::deep en TODO lo que no sea .distribution-grid: las cards las
   renderizan StatusChart y PriorityChart, que son otros componentes.
   El markup de un hijo NO hereda el atributo de scope del padre, así
   que sin ::deep estos selectores no matchearían nada. Mismo mecanismo
   que D-040 describe para los componentes de input.

   Los colores de las series NO están acá: viven en el config de cada
   chart, porque Chart.js pinta sobre <canvas> y ahí el CSS no llega.
   =========================================================== */

.distribution-grid[b-xjz919nqbl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* El donut con la leyenda a la derecha necesita ancho: por debajo de
   900px las dos columnas lo dejan sin espacio para el círculo. */
@media (max-width: 900px) {
    .distribution-grid[b-xjz919nqbl] {
        grid-template-columns: 1fr;
    }
}

/* === CARD DE CHART === */
[b-xjz919nqbl] .chart-card {
    display: flex;
    flex-direction: column;
    height: 380px;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}

[b-xjz919nqbl] .chart-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-md) 0;
}

/* El contenedor que arma ChartCanvas trae un height inline; flex-basis 0
   gana sobre él en el eje principal, así que la card manda sobre el alto
   y los dos charts quedan alineados aunque un título ocupe dos líneas.
   min-height: 0 es lo que permite que el flex item se encoja: sin eso el
   canvas fuerza el alto mínimo y desborda la card. */
[b-xjz919nqbl] .chart-card > .chart-container {
    flex: 1 1 0;
    min-height: 0;
}

/* === SIN DATOS === */
[b-xjz919nqbl] .chart-empty {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

[b-xjz919nqbl] .chart-empty i {
    font-size: 28px;
    opacity: 0.6;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    [b-xjz919nqbl] .chart-card {
        height: 340px;
        padding: var(--space-md);
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/KpiRow.razor.rz.scp.css */
/* ===========================================================
   KpiRow — fila 1 del Reporte Admin (sub-paso 2.4, sub-hito Reportes)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Los tintes de cada variante salen de color-mix sobre el token real,
   no de un rgba escrito a mano: un rgba fijo se desincroniza en
   silencio si alguna vez se ajusta la paleta. Precedente en
   MainLayout.razor.css, UserMenu.razor.css y ChangePassword.razor.css.

   D-040: no aplica. El componente es read-only, sin inputs Blazor.
   =========================================================== */

.kpi-grid[b-w9k8zij3a4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

/* 4 columnas se vuelven muy angostas antes de los 1200px: con labels de dos
   palabras ("Tiempo prom. resolución") el número y el texto empiezan a
   competir por el ancho. */
@media (max-width: 1200px) {
    .kpi-grid[b-w9k8zij3a4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .kpi-grid[b-w9k8zij3a4] {
        grid-template-columns: 1fr;
    }
}

/* === CARD === */
.kpi-card[b-w9k8zij3a4] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover[b-w9k8zij3a4] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card[b-w9k8zij3a4] {
        transition: none;
    }

    .kpi-card:hover[b-w9k8zij3a4] {
        transform: none;
    }
}

/* === ICONO === */
.kpi-icon[b-w9k8zij3a4] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon i[b-w9k8zij3a4] {
    font-size: 28px;
}

/* === CONTENIDO === */
.kpi-content[b-w9k8zij3a4] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-w9k8zij3a4] {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 6px;
}

.kpi-value[b-w9k8zij3a4] {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    font-weight: normal;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.kpi-hint[b-w9k8zij3a4] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

/* === VARIANTES ===
   El color comunica estado, nunca es el único canal: el texto del hint dice
   lo mismo en palabras, para quien no distingue los tonos. */

.kpi-neutral[b-w9k8zij3a4] {
    border-left-color: var(--petrol);
}

.kpi-neutral .kpi-icon[b-w9k8zij3a4] {
    background: color-mix(in srgb, var(--petrol) 8%, transparent);
    color: var(--petrol);
}

.kpi-accent[b-w9k8zij3a4] {
    border-left-color: var(--gold-deep);
}

.kpi-accent .kpi-icon[b-w9k8zij3a4] {
    background: var(--gold-soft);
    color: var(--gold-deep);
}

.kpi-good[b-w9k8zij3a4] {
    border-left-color: var(--green);
}

.kpi-good .kpi-icon[b-w9k8zij3a4] {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}

.kpi-warning[b-w9k8zij3a4] {
    border-left-color: var(--amber);
}

.kpi-warning .kpi-icon[b-w9k8zij3a4] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}

.kpi-danger[b-w9k8zij3a4] {
    border-left-color: var(--red);
}

.kpi-danger .kpi-icon[b-w9k8zij3a4] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .kpi-card[b-w9k8zij3a4] {
        padding: var(--space-md);
    }

    .kpi-icon[b-w9k8zij3a4] {
        width: 48px;
        height: 48px;
    }

    .kpi-icon i[b-w9k8zij3a4] {
        font-size: 24px;
    }

    .kpi-value[b-w9k8zij3a4] {
        font-size: 28px;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/PortfolioAlertsList.razor.rz.scp.css */
/* ===========================================================
   PortfolioAlertsList — fila 2B del Reporte Portfolio VD
   (sub-paso 4.2.c, sub-hito Reportes fase 2)
   Design System BANQUO: 100% tokens de app.css.

   Misma card que PortfolioTimelineChart (alto, fondo sand, borde, título)
   para que las dos mitades de la fila se lean como una sola grilla. La
   lista scrollea dentro de la card si hay más alertas de las que entran
   en 380px, así el timeline de al lado no se estira.

   No hace falta ::deep: todo el markup lo emite este mismo componente.
   =========================================================== */

.alerts-card[b-43vd7473vn] {
    display: flex;
    flex-direction: column;
    height: 380px;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.alerts-card-title[b-43vd7473vn] {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-md) 0;
}

/* === LISTA === */
.alerts-list[b-43vd7473vn] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.alert-item[b-43vd7473vn] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    /* La barra de semántica va como box-shadow inset y no como border-left:
       así no desplaza el contenido ni cambia el ancho entre variantes. */
    box-shadow: inset 3px 0 0 var(--alert-color);
}

.alert-icon[b-43vd7473vn] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--alert-color) 12%, transparent);
    color: var(--alert-color);
}

.alert-icon i[b-43vd7473vn] {
    font-size: 20px;
}

.alert-body[b-43vd7473vn] {
    flex: 1 1 auto;
    min-width: 0;
}

.alert-title[b-43vd7473vn] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.alert-detail[b-43vd7473vn] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.alert-badge[b-43vd7473vn] {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: color-mix(in srgb, var(--alert-color) 12%, transparent);
    color: var(--alert-color);
}

/* === SEMÁNTICA POR TIPO ===
   Una sola variable por variante: barra, ícono y badge la consumen. */
.alert-danger[b-43vd7473vn]  { --alert-color: var(--red); }
.alert-warning[b-43vd7473vn] { --alert-color: var(--amber); }
.alert-info[b-43vd7473vn]    { --alert-color: var(--petrol); }
.alert-neutral[b-43vd7473vn] { --alert-color: var(--muted); }

/* === SIN ALERTAS: verde, es la buena noticia === */
.alerts-empty[b-43vd7473vn] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--green);
    font-size: 13px;
    font-weight: 500;
    background: var(--white);
    border: 1px dashed color-mix(in srgb, var(--green) 40%, transparent);
    border-radius: var(--radius-lg);
}

.alerts-empty i[b-43vd7473vn] {
    font-size: 32px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .alerts-card[b-43vd7473vn] {
        height: auto;
        min-height: 240px;
        max-height: 420px;
        padding: var(--space-md);
    }

    .alert-item[b-43vd7473vn] {
        flex-wrap: wrap;
    }

    .alert-badge[b-43vd7473vn] {
        order: -1;
        margin-left: auto;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/PortfolioKpiGrid.razor.rz.scp.css */
/* ===========================================================
   PortfolioKpiGrid — fila 1 del Reporte Portfolio VD
   (sub-paso 4.2.a, sub-hito Reportes fase 2)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Calcado de KpiRow.razor.css con una diferencia: son 6 cards en
   grilla 3x2, no 4 en una fila. Los tintes salen de color-mix sobre el
   token real, no de un rgba escrito a mano (precedente: KpiRow,
   MainLayout, UserMenu, ChangePassword).

   D-040: no aplica. El componente es read-only, sin inputs Blazor.
   =========================================================== */

.kpi-grid[b-2iqwcp2mk7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

/* 3 columnas con labels de tres palabras ("Tiempo prom. resolución") se
   quedan sin aire antes de los 1100px: pasa a 2 columnas (3 filas). */
@media (max-width: 1100px) {
    .kpi-grid[b-2iqwcp2mk7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .kpi-grid[b-2iqwcp2mk7] {
        grid-template-columns: 1fr;
    }
}

/* === CARD === */
.kpi-card[b-2iqwcp2mk7] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover[b-2iqwcp2mk7] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card[b-2iqwcp2mk7] {
        transition: none;
    }

    .kpi-card:hover[b-2iqwcp2mk7] {
        transform: none;
    }
}

/* === ICONO === */
.kpi-icon[b-2iqwcp2mk7] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon i[b-2iqwcp2mk7] {
    font-size: 28px;
}

/* === CONTENIDO === */
.kpi-content[b-2iqwcp2mk7] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-2iqwcp2mk7] {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 6px;
}

.kpi-value[b-2iqwcp2mk7] {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    font-weight: normal;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.kpi-hint[b-2iqwcp2mk7] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

/* === VARIANTES ===
   El color comunica estado, nunca es el único canal: el texto del hint dice
   lo mismo en palabras, para quien no distingue los tonos. */

.kpi-neutral[b-2iqwcp2mk7] {
    border-left-color: var(--petrol);
}

.kpi-neutral .kpi-icon[b-2iqwcp2mk7] {
    background: color-mix(in srgb, var(--petrol) 8%, transparent);
    color: var(--petrol);
}

.kpi-good[b-2iqwcp2mk7] {
    border-left-color: var(--green);
}

.kpi-good .kpi-icon[b-2iqwcp2mk7] {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}

.kpi-warning[b-2iqwcp2mk7] {
    border-left-color: var(--amber);
}

.kpi-warning .kpi-icon[b-2iqwcp2mk7] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}

.kpi-danger[b-2iqwcp2mk7] {
    border-left-color: var(--red);
}

.kpi-danger .kpi-icon[b-2iqwcp2mk7] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .kpi-card[b-2iqwcp2mk7] {
        padding: var(--space-md);
    }

    .kpi-icon[b-2iqwcp2mk7] {
        width: 48px;
        height: 48px;
    }

    .kpi-icon i[b-2iqwcp2mk7] {
        font-size: 24px;
    }

    .kpi-value[b-2iqwcp2mk7] {
        font-size: 28px;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/PortfolioReport.razor.rz.scp.css */
/* ===========================================================
   /reports/portfolio — Reporte Portfolio VD (sub-paso 4.2.a,
   sub-hito Reportes fase 2)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Calcado de AdminReport.razor.css: misma cabecera, mismas filas, mismo
   skeleton y estado de error. Se duplica y no se comparte porque el CSS
   scoped de Blazor es por componente; extraer un .css común a app.css
   sería la alternativa si aparece un tercer reporte.

   NO fija max-width ni padding propio: el <main class="shell"> del
   MainLayout ya aporta 1440px centrados con 36px/32px.

   D-040: el DateRangePicker trae su propio .razor.css con ::deep; esta
   página no estila ningún input Blazor.
   =========================================================== */

.reports-page[b-9qslnynqjx] {
    animation: reports-fade-up-b-9qslnynqjx 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes reports-fade-up-b-9qslnynqjx {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.page-header[b-9qslnynqjx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page-title[b-9qslnynqjx] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-9qslnynqjx] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* === BOTONES === */
.btn[b-9qslnynqjx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.btn i[b-9qslnynqjx] {
    font-size: 16px;
}

.btn-primary[b-9qslnynqjx] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-9qslnynqjx] {
    background: var(--petrol-2);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-9qslnynqjx] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-retry[b-9qslnynqjx] {
    margin-top: var(--space-lg);
}

/* === FILAS DEL REPORTE === */
.report-row[b-9qslnynqjx] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.report-row-head[b-9qslnynqjx] {
    margin-bottom: var(--space-md);
}

.report-row-title[b-9qslnynqjx] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.report-row-hint[b-9qslnynqjx] {
    font-size: 12.5px;
    color: var(--muted);
    margin: var(--space-xs) 0 0 0;
}

/* === FILA 2: timeline 60% + alertas 40% (sub-paso 4.2.c) ===
   Sin ::deep: el div de la grilla lo emite esta página; las cards que van
   adentro se estilan solas en su propio .razor.css. */
.portfolio-row-2[b-9qslnynqjx] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-md);
    align-items: stretch;
}

/* 30 etiquetas de fecha en el eje x necesitan ancho: por debajo de 900px
   la línea queda ilegible al 60% de la fila. */
@media (max-width: 900px) {
    .portfolio-row-2[b-9qslnynqjx] {
        grid-template-columns: 1fr;
    }
}

/* === SKELETON DE CARGA === */
.loading-skeleton .skeleton-row[b-9qslnynqjx] {
    /* El barrido va sobre los dos tonos de arena del sistema, no sobre grises
       genéricos: un shimmer gris al lado del header petrol se ve prestado. */
    background: linear-gradient(90deg,
        var(--sand-2) 25%,
        var(--sand) 50%,
        var(--sand-2) 75%);
    background-size: 200% 100%;
    animation: reports-shimmer-b-9qslnynqjx 1.4s ease-in-out infinite;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: var(--space-lg);
}

/* Dos filas de cards (3x2) más cabecera de la fila: el doble del skeleton
   de KpiRow, que anticipa una sola fila. */
.skeleton-kpi[b-9qslnynqjx] { height: 300px; }

@keyframes reports-shimmer-b-9qslnynqjx {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respeta la preferencia del sistema: una animación infinita es justo el tipo
   de movimiento que molesta a quien pidió reducirlo. */
@media (prefers-reduced-motion: reduce) {
    .reports-page[b-9qslnynqjx] {
        animation: none;
    }

    .loading-skeleton .skeleton-row[b-9qslnynqjx] {
        animation: none;
        background: var(--sand-2);
    }
}

/* === ESTADO DE ERROR === */
.empty-state[b-9qslnynqjx] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-9qslnynqjx] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile-danger[b-9qslnynqjx] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.empty-icon-tile i[b-9qslnynqjx] {
    font-size: 32px;
}

.empty-title[b-9qslnynqjx] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-9qslnynqjx] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 420px;
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
    .page-title[b-9qslnynqjx] {
        font-size: 28px;
    }

    .page-header[b-9qslnynqjx] {
        flex-direction: column;
        align-items: stretch;
    }

    .report-row[b-9qslnynqjx] {
        padding: var(--space-md);
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/PortfolioTimelineChart.razor.rz.scp.css */
/* ===========================================================
   PortfolioTimelineChart — fila 2A del Reporte Portfolio VD
   (sub-paso 4.2.c, sub-hito Reportes fase 2)
   Design System BANQUO: 100% tokens de app.css.

   Copia de TeamComparisonChart.razor.css: la card se estila a sí misma
   porque va directo dentro de la grilla de la página, sin una fila
   intermedia que la vista (como hace TrendsRow con ::deep). Solo
   .chart-container lleva ::deep: ese div lo emite ChartCanvas, no este
   componente (mismo mecanismo que D-040 describe para los inputs).

   Los colores de la línea y el relleno NO están acá: viven en el config
   del chart, porque Chart.js pinta sobre <canvas> y ahí el CSS no llega.
   =========================================================== */

.chart-card[b-7ffknfir7g] {
    display: flex;
    flex-direction: column;
    height: 380px;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.chart-card-title[b-7ffknfir7g] {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-md) 0;
}

/* El contenedor que arma ChartCanvas trae un height inline; flex-basis 0
   gana sobre él en el eje principal, así que la card manda sobre el alto.
   min-height: 0 permite que el flex item se encoja: sin eso el canvas
   fuerza el alto mínimo y desborda la card. */
.chart-card[b-7ffknfir7g]  .chart-container {
    flex: 1 1 0;
    min-height: 0;
}

/* === SIN DATOS === */
.chart-empty[b-7ffknfir7g] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.chart-empty i[b-7ffknfir7g] {
    font-size: 28px;
    opacity: 0.6;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .chart-card[b-7ffknfir7g] {
        height: 340px;
        padding: var(--space-md);
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/PortfolioTopTenantsTable.razor.rz.scp.css */
/* ===========================================================
   PortfolioTopTenantsTable — fila 3 del Reporte Portfolio VD
   (sub-paso 4.2.c, sub-hito Reportes fase 2)
   Design System BANQUO: 100% tokens de app.css.

   Copia de TeamPerformanceTable.razor.css (thead en sand-2, th de 10px en
   mayúsculas, hover dorado tenue, table-scroll para mobile) más el badge
   de ranking, el de abiertos, el de vencidos y las tres variantes de
   color del cumplimiento. Se duplica y no se comparte porque el CSS
   scoped de Blazor es por componente. No hace falta ::deep: todo el
   markup lo emite este mismo componente (D-040 aplica a hijos, no acá).
   =========================================================== */

.table-scroll[b-dgzsuqs7qn] {
    overflow-x: auto;
}

.tenant-table[b-dgzsuqs7qn] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tenant-table thead tr[b-dgzsuqs7qn] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.tenant-table th[b-dgzsuqs7qn] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.tenant-table tbody tr[b-dgzsuqs7qn] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.tenant-table tbody tr:hover[b-dgzsuqs7qn] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.tenant-table tbody tr:last-child[b-dgzsuqs7qn] {
    border-bottom: none;
}

.tenant-table td[b-dgzsuqs7qn] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Columnas numéricas a la derecha y con dígitos de ancho fijo, para que
   las cifras queden alineadas fila contra fila. */
.col-num[b-dgzsuqs7qn] {
    width: 130px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.col-rank[b-dgzsuqs7qn] {
    width: 64px;
}

.col-tenant[b-dgzsuqs7qn] {
    min-width: 240px;
}

/* === RANKING: petrol, es la columna que ordena la tabla === */
.rank-badge[b-dgzsuqs7qn] {
    display: inline-block;
    min-width: 36px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--petrol);
    color: var(--sand);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tenant-name[b-dgzsuqs7qn] {
    font-weight: 500;
    color: var(--ink);
}

/* === DESGLOSE POR SUCURSAL (REQ-06, 8.0.g) ===
   El botón de expandir va pegado al nombre del tenant; las sub-filas se
   indentan y llevan un fondo arena para leerse como hijas de la fila de
   arriba, con los mismos badges en las mismas columnas. */
.tenant-cell[b-dgzsuqs7qn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.expand-btn[b-dgzsuqs7qn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    color: var(--petrol);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.expand-btn:hover:not(:disabled)[b-dgzsuqs7qn] {
    background: var(--sand-2);
    border-color: var(--line-strong);
}

.expand-btn:focus-visible[b-dgzsuqs7qn] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.expand-btn:disabled[b-dgzsuqs7qn] {
    opacity: 0.35;
    cursor: default;
}

.branch-count[b-dgzsuqs7qn] {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.tenant-row.is-expanded[b-dgzsuqs7qn] {
    background: color-mix(in srgb, var(--sand-2) 60%, transparent);
}

.branch-row[b-dgzsuqs7qn] {
    background: var(--sand-2);
}

.branch-row td[b-dgzsuqs7qn] {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
}

.branch-name[b-dgzsuqs7qn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding-left: 34px; /* ancho del botón + gap: alinea con el nombre del tenant */
    color: var(--ink);
}

.branch-name i[b-dgzsuqs7qn] {
    color: var(--muted);
    font-size: 14px;
}

/* === ABIERTOS: petrol tenue, es trabajo pendiente pero no un problema === */
.open-badge[b-dgzsuqs7qn] {
    display: inline-block;
    min-width: 36px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--petrol) 10%, transparent);
    color: var(--petrol);
    font-weight: 600;
    text-align: center;
}

/* === VENCIDOS: rojo con al menos uno, neutro con cero === */
.overdue-badge[b-dgzsuqs7qn] {
    display: inline-block;
    min-width: 36px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    text-align: center;
}

.overdue-danger[b-dgzsuqs7qn] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.overdue-none[b-dgzsuqs7qn] {
    background: var(--sand-2);
    color: var(--muted);
}

/* === CUMPLIMIENTO: solo texto, sin fondo ===
   Al lado de dos badges con fondo, un tercer pill de color compite. */
.rate-value[b-dgzsuqs7qn] {
    font-weight: 600;
}

.rate-neutral[b-dgzsuqs7qn] { color: var(--muted); }
.rate-good[b-dgzsuqs7qn]    { color: var(--green); }
.rate-warning[b-dgzsuqs7qn] { color: var(--amber); }
.rate-danger[b-dgzsuqs7qn]  { color: var(--red); }

/* === SIN DATOS === */
.table-empty[b-dgzsuqs7qn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-md);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.table-empty i[b-dgzsuqs7qn] {
    font-size: 28px;
    opacity: 0.6;
}

.table-empty p[b-dgzsuqs7qn] {
    margin: 0;
}
/* _content/TicketsTI.Web/Components/Pages/Reports/TeamAnalysisReport.razor.rz.scp.css */
/* ===========================================================
   /reports/team-analysis — Reporte Team Analysis (sub-paso 5.0.c.1,
   REQ-04 §17.38)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Calcado de PortfolioReport.razor.css (que a su vez sale de
   AdminReport.razor.css): misma cabecera, mismas filas, mismo skeleton y
   estado de error. Se duplica y no se comparte porque el CSS scoped de
   Blazor es por componente. Este es el TERCER reporte con el mismo
   bloque: la extracción a app.css que anticipaba PortfolioReport ya
   tiene con qué justificarse, pero toca archivos existentes y queda
   fuera de este sub-paso.

   NO fija max-width ni padding propio: el <main class="shell"> del
   MainLayout ya aporta 1440px centrados con 36px/32px.

   D-040: el DateRangePicker trae su propio .razor.css con ::deep; esta
   página no estila ningún input Blazor.
   =========================================================== */

.reports-page[b-brcpbuuz3g] {
    animation: reports-fade-up-b-brcpbuuz3g 0.4s cubic-bezier(.2,.7,.3,1);
}

@keyframes reports-fade-up-b-brcpbuuz3g {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.page-header[b-brcpbuuz3g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page-title[b-brcpbuuz3g] {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm) 0;
}

.page-subtitle[b-brcpbuuz3g] {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* === BOTONES === */
.btn[b-brcpbuuz3g] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.btn i[b-brcpbuuz3g] {
    font-size: 16px;
}

.btn-primary[b-brcpbuuz3g] {
    background: var(--petrol);
    color: var(--sand);
}

.btn-primary:hover:not(:disabled)[b-brcpbuuz3g] {
    background: var(--petrol-2);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-brcpbuuz3g] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-retry[b-brcpbuuz3g] {
    margin-top: var(--space-lg);
}

/* === FILAS DEL REPORTE === */
.report-row[b-brcpbuuz3g] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.report-row-head[b-brcpbuuz3g] {
    margin-bottom: var(--space-md);
}

.report-row-title[b-brcpbuuz3g] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.report-row-hint[b-brcpbuuz3g] {
    font-size: 12.5px;
    color: var(--muted);
    margin: var(--space-xs) 0 0 0;
}

/* === FILA DE FILTROS (5.0.c.3.b) ===
   Debajo del DateRangePicker y arriba de las filas del reporte. Los dos
   <select> los emite esta misma página (HTML directo, no un componente
   Blazor), así que llevan el atributo scoped y NO necesitan ::deep: D-040
   aplica a InputSelect y compañía, no a un <select> nativo. */
.filters-row[b-brcpbuuz3g] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.filter-field[b-brcpbuuz3g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

/* Mismo tratamiento que los th de las tablas del reporte: 10px, mayúsculas,
   muted. Es una etiqueta de control, no un título. */
.filter-label[b-brcpbuuz3g] {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.filter-select[b-brcpbuuz3g] {
    min-width: 240px;
    max-width: 320px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.filter-select:focus[b-brcpbuuz3g] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.filter-select:disabled[b-brcpbuuz3g] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Botón secundario: borde y texto, sin relleno. Es una acción de deshacer,
   no puede competir con "Actualizar" ni con "Aplicar" del picker. */
.btn-ghost[b-brcpbuuz3g] {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.btn-ghost:hover:not(:disabled)[b-brcpbuuz3g] {
    background: var(--gold-soft);
    border-color: var(--gold);
}

.btn-ghost:disabled[b-brcpbuuz3g] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Alineado con la base de los selects, que tienen la etiqueta arriba. */
.btn-clear-filters[b-brcpbuuz3g] {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* === SKELETON DE CARGA === */
.loading-skeleton .skeleton-row[b-brcpbuuz3g] {
    /* El barrido va sobre los dos tonos de arena del sistema, no sobre grises
       genéricos: un shimmer gris al lado del header petrol se ve prestado. */
    background: linear-gradient(90deg,
        var(--sand-2) 25%,
        var(--sand) 50%,
        var(--sand-2) 75%);
    background-size: 200% 100%;
    animation: reports-shimmer-b-brcpbuuz3g 1.4s ease-in-out infinite;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: var(--space-lg);
}

/* Una sola fila de 4 cards más la cabecera de la fila. */
.skeleton-kpi[b-brcpbuuz3g] { height: 190px; }

@keyframes reports-shimmer-b-brcpbuuz3g {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respeta la preferencia del sistema: una animación infinita es justo el tipo
   de movimiento que molesta a quien pidió reducirlo. */
@media (prefers-reduced-motion: reduce) {
    .reports-page[b-brcpbuuz3g] {
        animation: none;
    }

    .loading-skeleton .skeleton-row[b-brcpbuuz3g] {
        animation: none;
        background: var(--sand-2);
    }
}

/* === ESTADO DE ERROR === */
.empty-state[b-brcpbuuz3g] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.empty-icon-tile[b-brcpbuuz3g] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile-danger[b-brcpbuuz3g] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

.empty-icon-tile i[b-brcpbuuz3g] {
    font-size: 32px;
}

.empty-title[b-brcpbuuz3g] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-brcpbuuz3g] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 420px;
}

/* === RESPONSIVE === */
@media (max-width: 720px) {
    .page-title[b-brcpbuuz3g] {
        font-size: 28px;
    }

    .page-header[b-brcpbuuz3g] {
        flex-direction: column;
        align-items: stretch;
    }

    .report-row[b-brcpbuuz3g] {
        padding: var(--space-md);
    }

    .filters-row[b-brcpbuuz3g] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select[b-brcpbuuz3g] {
        min-width: 0;
        max-width: none;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/TeamComparisonChart.razor.rz.scp.css */
/* ===========================================================
   TeamComparisonChart — fila 2 del Reporte Team Analysis (sub-paso 5.0.c.2)
   Design System BANQUO: 100% tokens de app.css.

   Misma card que DistributionRow / TrendsRow le dan a sus charts. Allá el
   estilo vive en la FILA (con ::deep, porque las cards las emiten los
   hijos); acá la card va sola dentro del report-row de la página, así que
   el componente se estila a sí mismo. Solo .chart-container lleva ::deep:
   ese div lo emite ChartCanvas, no este componente (mismo mecanismo que
   D-040 describe para los inputs).

   Los colores de las barras NO están acá: viven en el config del chart,
   porque Chart.js pinta sobre <canvas> y ahí el CSS no llega.
   =========================================================== */

.chart-card[b-j4mbt1iln1] {
    display: flex;
    flex-direction: column;
    height: 380px;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.chart-card-title[b-j4mbt1iln1] {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-md) 0;
}

/* El contenedor que arma ChartCanvas trae un height inline; flex-basis 0
   gana sobre él en el eje principal, así que la card manda sobre el alto.
   min-height: 0 es lo que permite que el flex item se encoja: sin eso el
   canvas fuerza el alto mínimo y desborda la card. */
.chart-card[b-j4mbt1iln1]  .chart-container {
    flex: 1 1 0;
    min-height: 0;
}

/* === SIN DATOS === */
.chart-empty[b-j4mbt1iln1] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.chart-empty i[b-j4mbt1iln1] {
    font-size: 28px;
    opacity: 0.6;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .chart-card[b-j4mbt1iln1] {
        height: 340px;
        padding: var(--space-md);
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/TeamKpiRow.razor.rz.scp.css */
/* ===========================================================
   TeamKpiRow — fila 1 del reporte Team Analysis
   (sub-paso 5.0.c.1, REQ-04 §17.38)
   Design System BANQUO: 100% tokens de app.css, cero hex sueltos.

   Calcado de KpiRow.razor.css: 4 cards en UNA fila horizontal, no la
   grilla 3x2 de PortfolioKpiGrid. Los tintes salen de color-mix sobre el
   token real, no de un rgba escrito a mano (precedente: KpiRow,
   MainLayout, UserMenu, ChangePassword).

   D-040: no aplica. El componente es read-only, sin inputs Blazor.

   El contenedor es .team-kpi-row y NO .kpi-row: ese nombre ya existe como
   clase GLOBAL en app.css (Dashboard) y arrastra un margin-bottom de 32px.
   =========================================================== */

.team-kpi-row[b-3vum4fgpk3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

/* 4 columnas se vuelven muy angostas antes de los 1200px: con labels de tres
   palabras ("Tiempo prom. resolución") el número y el texto empiezan a
   competir por el ancho. */
@media (max-width: 1200px) {
    .team-kpi-row[b-3vum4fgpk3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .team-kpi-row[b-3vum4fgpk3] {
        grid-template-columns: 1fr;
    }
}

/* === CARD === */
.kpi-card[b-3vum4fgpk3] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover[b-3vum4fgpk3] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card[b-3vum4fgpk3] {
        transition: none;
    }

    .kpi-card:hover[b-3vum4fgpk3] {
        transform: none;
    }
}

/* === ICONO === */
.kpi-icon[b-3vum4fgpk3] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon i[b-3vum4fgpk3] {
    font-size: 28px;
}

/* === CONTENIDO === */
.kpi-content[b-3vum4fgpk3] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-3vum4fgpk3] {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 6px;
}

.kpi-value[b-3vum4fgpk3] {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    font-weight: normal;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.kpi-hint[b-3vum4fgpk3] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

/* === VARIANTES ===
   El color comunica estado, nunca es el único canal: el texto del hint dice
   lo mismo en palabras, para quien no distingue los tonos. */

.kpi-neutral[b-3vum4fgpk3] {
    border-left-color: var(--petrol);
}

.kpi-neutral .kpi-icon[b-3vum4fgpk3] {
    background: color-mix(in srgb, var(--petrol) 8%, transparent);
    color: var(--petrol);
}

.kpi-good[b-3vum4fgpk3] {
    border-left-color: var(--green);
}

.kpi-good .kpi-icon[b-3vum4fgpk3] {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}

.kpi-warning[b-3vum4fgpk3] {
    border-left-color: var(--amber);
}

.kpi-warning .kpi-icon[b-3vum4fgpk3] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}

.kpi-danger[b-3vum4fgpk3] {
    border-left-color: var(--red);
}

.kpi-danger .kpi-icon[b-3vum4fgpk3] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .kpi-card[b-3vum4fgpk3] {
        padding: var(--space-md);
    }

    .kpi-icon[b-3vum4fgpk3] {
        width: 48px;
        height: 48px;
    }

    .kpi-icon i[b-3vum4fgpk3] {
        font-size: 24px;
    }

    .kpi-value[b-3vum4fgpk3] {
        font-size: 28px;
    }
}
/* _content/TicketsTI.Web/Components/Pages/Reports/TeamPerformanceTable.razor.rz.scp.css */
/* ===========================================================
   TeamPerformanceTable — fila 3 del Reporte Team Analysis
   (sub-paso 5.0.c.3.a)
   Design System BANQUO: 100% tokens de app.css.

   Copia de AgentPerformanceTable.razor.css (thead en sand-2, th de 10px en
   mayúsculas, hover dorado tenue, table-scroll para mobile) más las tres
   variantes de color de la tasa. Se duplica y no se comparte porque el
   CSS scoped de Blazor es por componente. No hace falta ::deep: todo el
   markup lo emite este mismo componente (D-040 aplica a hijos, no acá).
   =========================================================== */

.table-scroll[b-pw9yfl3keq] {
    overflow-x: auto;
}

.agent-table[b-pw9yfl3keq] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.agent-table thead tr[b-pw9yfl3keq] {
    background: var(--sand-2);
    border-bottom: 1px solid var(--line);
}

.agent-table th[b-pw9yfl3keq] {
    text-align: left;
    padding: 10px var(--space-md);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.agent-table tbody tr[b-pw9yfl3keq] {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background-color 0.12s ease;
}

.agent-table tbody tr:hover[b-pw9yfl3keq] {
    background: color-mix(in srgb, var(--gold-soft) 50%, transparent);
}

.agent-table tbody tr:last-child[b-pw9yfl3keq] {
    border-bottom: none;
}

/* === FILA DEL AGENTE FILTRADO (5.0.c.3.b) ===
   Fondo dorado tenue —el mismo token que el hover, pero al 100%— y una
   barra de 3px a la izquierda. La barra va como box-shadow inset sobre la
   primera celda y no como border-left del <tr>: con border-collapse, el
   borde de una fila lo pinta el navegador de forma inconsistente. */
.agent-table tbody tr.row-highlighted[b-pw9yfl3keq] {
    background: var(--gold-soft);
}

.agent-table tbody tr.row-highlighted td:first-child[b-pw9yfl3keq] {
    box-shadow: inset 3px 0 0 var(--gold-deep);
}

.agent-table tbody tr.row-highlighted .agent-email[b-pw9yfl3keq] {
    color: var(--petrol);
}

/* El hover tiene que seguir siendo visible sobre la fila resaltada: un
   escalón más de dorado, no el mismo tono. */
.agent-table tbody tr.row-highlighted:hover[b-pw9yfl3keq] {
    background: color-mix(in srgb, var(--gold) 24%, transparent);
}

.agent-table td[b-pw9yfl3keq] {
    padding: 12px var(--space-md);
    color: var(--ink);
    vertical-align: middle;
}

/* Columnas numéricas a la derecha y con dígitos de ancho fijo, para que
   las cifras queden alineadas fila contra fila. Un poco más angostas que
   en la tabla del Admin: acá son cinco y tienen que entrar en 1440px. */
.col-num[b-pw9yfl3keq] {
    width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.col-agent[b-pw9yfl3keq] {
    min-width: 260px;
}

/* === CELDA DE AGENTE: avatar + email === */
.agent-cell[b-pw9yfl3keq] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.agent-avatar[b-pw9yfl3keq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    flex-shrink: 0;
}

.agent-email[b-pw9yfl3keq] {
    font-weight: 500;
    color: var(--ink);
    word-break: break-all;
}

/* === RESUELTOS: la cifra que importa, con el verde de éxito === */
.resolved-badge[b-pw9yfl3keq] {
    display: inline-block;
    min-width: 36px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    font-weight: 600;
    text-align: center;
}

/* === TASA: mismos umbrales y colores que el KPI 4 de TeamKpiRow ===
   Solo texto, sin fondo: en una tabla de 5 filas, cinco pills de colores
   distintos compiten con el badge verde de la columna de al lado. */
.rate-value[b-pw9yfl3keq] {
    font-weight: 600;
}

.rate-neutral[b-pw9yfl3keq] { color: var(--muted); }
.rate-good[b-pw9yfl3keq]    { color: var(--green); }
.rate-warning[b-pw9yfl3keq] { color: var(--amber); }
.rate-danger[b-pw9yfl3keq]  { color: var(--red); }

/* === SIN DATOS === */
.table-empty[b-pw9yfl3keq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-md);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.table-empty i[b-pw9yfl3keq] {
    font-size: 28px;
    opacity: 0.6;
}

.table-empty p[b-pw9yfl3keq] {
    margin: 0;
}
/* _content/TicketsTI.Web/Components/Pages/Reports/TrendsRow.razor.rz.scp.css */
/* ===========================================================
   TrendsRow — fila 3 del Reporte Admin (sub-paso 2.6)
   Design System BANQUO: 100% tokens de app.css.

   Espejo de DistributionRow.razor.css: mismas cards, mismo alto, para
   que las filas 2 y 3 se lean como una sola grilla. Si se cambia una
   medida acá hay que cambiarla allá también.

   ::deep en TODO lo que no sea .trends-grid: las cards las renderizan
   TimelineChart y TopCategoriesChart, que son otros componentes. El
   markup de un hijo NO hereda el atributo de scope del padre, así que
   sin ::deep estos selectores no matchearían nada (D-040).

   Los colores de las series NO están acá: viven en el config de cada
   chart, porque Chart.js pinta sobre <canvas> y ahí el CSS no llega.
   =========================================================== */

.trends-grid[b-o4ua8j1lek] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* 30 etiquetas de fecha en el eje x necesitan ancho: por debajo de 900px
   la línea queda ilegible a media columna. */
@media (max-width: 900px) {
    .trends-grid[b-o4ua8j1lek] {
        grid-template-columns: 1fr;
    }
}

/* === CARD DE CHART === */
[b-o4ua8j1lek] .chart-card {
    display: flex;
    flex-direction: column;
    height: 380px;
    padding: var(--space-lg);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
}

[b-o4ua8j1lek] .chart-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: normal;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-md) 0;
}

/* El contenedor que arma ChartCanvas trae un height inline; flex-basis 0
   gana sobre él en el eje principal, así que la card manda sobre el alto.
   min-height: 0 permite que el flex item se encoja: sin eso el canvas
   fuerza el alto mínimo y desborda la card. */
[b-o4ua8j1lek] .chart-card > .chart-container {
    flex: 1 1 0;
    min-height: 0;
}

/* === SIN DATOS === */
[b-o4ua8j1lek] .chart-empty {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

[b-o4ua8j1lek] .chart-empty i {
    font-size: 28px;
    opacity: 0.6;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    [b-o4ua8j1lek] .chart-card {
        height: 340px;
        padding: var(--space-md);
    }
}
/* _content/TicketsTI.Web/Components/Pages/Tickets/Confirmation.razor.rz.scp.css */
/* ============================================================
   Confirmation.razor.css — Mockup Opción 1 (Hero Success Card)
   Mini-hito 0.7 PASO 0.7.3.
   Tokens BANQUO desde wwwroot/app.css (D-032).
   NO tiene InputText/InputSelect/InputTextArea → NO necesita ::deep.
   ============================================================ */

/* Page wrapper */
.confirmation-page[b-5top911xif] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-2xl);
}

/* Loading state */
.loading-state[b-5top911xif] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 14px;
}

.loading-state i[b-5top911xif] {
    font-size: 18px;
    animation: spin-b-5top911xif 0.8s linear infinite;
}

/* Empty state */
.empty-state[b-5top911xif] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-2xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-icon-tile[b-5top911xif] {
    width: 64px;
    height: 64px;
    background: var(--gold-soft);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.empty-icon-tile i[b-5top911xif] {
    font-size: 32px;
}

.empty-title[b-5top911xif] {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.empty-text[b-5top911xif] {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto var(--space-xl) auto;
    max-width: 480px;
}

/* Back nav */
.back-nav[b-5top911xif] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.back-btn[b-5top911xif] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--white);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-btn:hover[b-5top911xif] {
    color: var(--ink);
    border-color: var(--ink-soft);
    background: var(--sand-2);
}

.back-btn i[b-5top911xif] {
    font-size: 16px;
}

.back-text[b-5top911xif] {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

/* HERO SUCCESS CARD */
.hero-card[b-5top911xif] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.hero-icon-tile[b-5top911xif] {
    width: 64px;
    height: 64px;
    background: color-mix(in srgb, var(--green) 14%, transparent);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    margin-bottom: var(--space-md);
}

.hero-icon-tile i[b-5top911xif] {
    font-size: 36px;
}

.hero-title[b-5top911xif] {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.01em;
}

.hero-subtitle[b-5top911xif] {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto var(--space-lg) auto;
    max-width: 480px;
}

/* Ticket number badge */
.ticket-number-badge[b-5top911xif] {
    background: var(--gold-soft);
    border: 1px solid var(--gold-stronger);
    padding: var(--space-md) var(--space-xl);
    border-radius: 12px;
    display: inline-block;
}

.ticket-number-label[b-5top911xif] {
    font-size: 11px;
    color: var(--gold-deep);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 500;
}

.ticket-number-value[b-5top911xif] {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--petrol-deep);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* DETAILS CARD */
.details-card[b-5top911xif] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.details-header[b-5top911xif] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.details-header i[b-5top911xif] {
    font-size: 18px;
    color: var(--gold);
}

.details-header span[b-5top911xif] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}

/* Título destacado */
.details-title-block[b-5top911xif] {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
}

.meta-title-value[b-5top911xif] {
    font-size: 15px;
    color: var(--ink);
    line-height: 1.5;
    margin-top: 4px;
}

/* Grid de metadata */
.details-grid[b-5top911xif] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.meta-label[b-5top911xif] {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.meta-value[b-5top911xif] {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}

/* Priority badge - reusa el inline style del Razor */
.priority-badge[b-5top911xif] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Status badge - estilo "Nuevo" verde con outline */
.status-badge[b-5top911xif] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}

/* Actions bar */
.actions-bar[b-5top911xif] {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

/* Buttons (reusa convenciones del Create) */
.btn[b-5top911xif] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 11px 22px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn i[b-5top911xif] {
    font-size: 15px;
}

.btn-primary[b-5top911xif] {
    background: var(--petrol);
    color: var(--sand);
    border-color: var(--petrol);
}

.btn-primary:hover[b-5top911xif] {
    background: var(--petrol-2);
    border-color: var(--petrol-2);
}

.btn-secondary[b-5top911xif] {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-secondary:hover[b-5top911xif] {
    background: var(--sand-2);
    border-color: var(--ink-soft);
}

/* Spin animation (para loading state) */
@keyframes spin-b-5top911xif {
    to { transform: rotate(360deg); }
}

/* ============ ADJUNTOS (REQ-05 extendido, 7.0.g) ============
   Misma card que .details-card; el AttachmentPanel trae su propio CSS
   scoped (incluido el ::deep del InputFile, D-040), acá solo se aloja. */
.attachments-card[b-5top911xif] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.attachments-hint[b-5top911xif] {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 var(--space-md);
}

.attachments-feedback[b-5top911xif] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 13px;
    color: var(--green);
    margin-bottom: var(--space-md);
}

.attachments-feedback i[b-5top911xif] {
    font-size: 18px;
}
/* _content/TicketsTI.Web/Components/Pages/Tickets/Create.razor.rz.scp.css */
/* ============================================================
   Create.razor.css — Mockup Opción 3 (Single Page Premium)
   Mini-hito 0.7 PASO 0.7.2 BLOQUE B.
   Tokens BANQUO desde wwwroot/app.css (D-032).
   ============================================================ */

/* ─────────── Page wrapper ─────────── */

.create-page[b-r5tky933oe] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-2xl);
}

/* ─────────── Back nav ─────────── */

.back-nav[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.back-btn[b-r5tky933oe] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--white);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.back-btn:hover[b-r5tky933oe] {
    color: var(--ink);
    border-color: var(--ink-soft);
    background: var(--sand-2);
}

.back-btn i[b-r5tky933oe] {
    font-size: 16px;
}

.back-text[b-r5tky933oe] {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

/* ─────────── Page header ─────────── */

.page-title[b-r5tky933oe] {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: -0.01em;
}

.page-subtitle[b-r5tky933oe] {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 var(--space-xl) 0;
    max-width: 600px;
}

/* ─────────── Layout grid (form + sidebar) ─────────── */

.page-grid[b-r5tky933oe] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-lg);
}

@media (max-width: 1024px) {
    .page-grid[b-r5tky933oe] {
        grid-template-columns: 1fr;
    }
}

/* ─────────── Cards (form sections) ─────────── */

.card[b-r5tky933oe] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.card-header[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.icon-tile[b-r5tky933oe] {
    width: 36px;
    height: 36px;
    background: var(--gold-soft);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    flex-shrink: 0;
}

.icon-tile i[b-r5tky933oe] {
    font-size: 18px;
}

.card-header-text[b-r5tky933oe] {
    flex: 1;
}

.card-title[b-r5tky933oe] {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
}

.card-subtitle[b-r5tky933oe] {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* ─────────── Form rows / fields ─────────── */

.create-page .form-row[b-r5tky933oe] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.form-field[b-r5tky933oe] {
    margin-bottom: var(--space-md);
}

.form-row .form-field[b-r5tky933oe] {
    margin-bottom: 0;
}

.form-field label[b-r5tky933oe] {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.req[b-r5tky933oe] {
    color: var(--red);
}

/* ─────────── Inputs / selects / textarea ─────────── */

/* Stretch wrappers para que el form ocupe todo el ancho disponible.
   min-width: 0 evita que el contenido fuerce overflow en grid items. */
.create-page .card[b-r5tky933oe],
.create-page .form-field[b-r5tky933oe],
.create-page .select-wrapper[b-r5tky933oe] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Asegurar que el body de la card permita stretch de hijos block-level. */
.create-page .card-body[b-r5tky933oe] {
    display: block;
    width: 100%;
}

/* !important en width y focus state es necesario para ganarle al UA
   stylesheet del browser en form elements (select/textarea default a
   width: auto en algunos navegadores). */
.create-page[b-r5tky933oe]  .form-control {
    width: 100% !important;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    max-width: 100%;
}

.create-page[b-r5tky933oe]  .form-control:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--gold-soft) !important;
}

.create-page[b-r5tky933oe]  .form-control:hover:not(:focus):not(:disabled) {
    border-color: var(--ink-soft);
}

.create-page[b-r5tky933oe]  .form-control.textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

/* Select wrapper con chevron */
.create-page .select-wrapper[b-r5tky933oe] {
    position: relative;
    display: block;
    width: 100%;
}

.select-wrapper .chevron-icon[b-r5tky933oe] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
}

.select-wrapper[b-r5tky933oe]  .form-control {
    padding-right: 36px;
}

/* ─────────── Helpers (counter, hint, validation) ─────────── */

.char-counter[b-r5tky933oe] {
    text-align: right;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.field-hint[b-r5tky933oe] {
    font-size: 11px;
    color: var(--muted);
    margin-top: var(--space-xs);
    line-height: 1.5;
}

[b-r5tky933oe] .validation-message {
    display: block;
    font-size: 12px;
    color: var(--red);
    margin-top: var(--space-xs);
}

/* ─────────── Priority result ─────────── */

.priority-result[b-r5tky933oe] {
    background: color-mix(in srgb, var(--p-color, var(--gold)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-color, var(--gold)) 25%, transparent);
    border-radius: 8px;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-md);
}

.priority-result-info[b-r5tky933oe] {
    flex: 1;
}

.priority-result-label[b-r5tky933oe] {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.priority-result-row[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.priority-badge[b-r5tky933oe] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--p-color, var(--gold));
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.priority-sla[b-r5tky933oe] {
    font-size: 12px;
    color: var(--ink-soft);
}

.priority-result-icon[b-r5tky933oe] {
    font-size: 28px;
    color: var(--p-color, var(--gold-deep));
}

/* Priority pending */
.priority-pending[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--sand-2);
    border-radius: 8px;
    margin-top: var(--space-md);
}

.priority-pending i[b-r5tky933oe] {
    font-size: 16px;
    color: var(--muted);
}

.priority-pending span[b-r5tky933oe] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

/* ─────────── Action bar ─────────── */

.action-bar[b-r5tky933oe] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.action-hint[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--muted);
}

.action-hint i[b-r5tky933oe] {
    font-size: 14px;
}

.action-buttons[b-r5tky933oe] {
    display: flex;
    gap: var(--space-sm);
}

/* ─────────── Buttons (BANQUO, no Bootstrap) ─────────── */

.btn[b-r5tky933oe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn i[b-r5tky933oe] {
    font-size: 15px;
}

.btn-primary[b-r5tky933oe] {
    background: var(--petrol);
    color: var(--sand);
    border-color: var(--petrol);
}

.btn-primary:hover:not(:disabled)[b-r5tky933oe] {
    background: var(--petrol-2);
    border-color: var(--petrol-2);
}

.btn-primary:disabled[b-r5tky933oe] {
    background: var(--petrol);
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-secondary[b-r5tky933oe] {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-secondary:hover:not(:disabled)[b-r5tky933oe] {
    background: var(--sand-2);
    border-color: var(--ink-soft);
}

.btn-secondary:disabled[b-r5tky933oe] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─────────── Spinner (hereda color via currentColor) ─────────── */

.spinner[b-r5tky933oe] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-r5tky933oe 0.6s linear infinite;
}

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

/* ─────────── Alerts ─────────── */

.alert[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: 8px;
    margin-bottom: var(--space-md);
    font-size: 13px;
    line-height: 1.5;
}

.alert i[b-r5tky933oe] {
    font-size: 18px;
    flex-shrink: 0;
}

.alert-danger[b-r5tky933oe] {
    background: color-mix(in srgb, var(--red) 8%, transparent);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 20%, transparent);
}

/* ─────────── Sidebar info column ─────────── */

.info-card[b-r5tky933oe] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.info-card-header[b-r5tky933oe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.info-card-header i[b-r5tky933oe] {
    font-size: 18px;
    color: var(--gold);
}

.info-card-header span[b-r5tky933oe] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}

/* Tips list */
.tips-list[b-r5tky933oe] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li[b-r5tky933oe] {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-xs);
}

.tips-list li i[b-r5tky933oe] {
    font-size: 12px;
    color: var(--green);
    margin-top: 4px;
}

/* Recent tickets */
.recent-item[b-r5tky933oe] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid var(--line-strong);
    border-radius: 0 6px 6px 0;
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
    transition: background 0.15s ease;
}

.recent-item:last-child[b-r5tky933oe] {
    margin-bottom: 0;
}

.recent-id[b-r5tky933oe] {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.recent-title[b-r5tky933oe] {
    font-size: 12px;
    color: var(--ink);
    line-height: 1.4;
    margin: 2px 0;
}

.recent-status[b-r5tky933oe] {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* Sidebar "últimos tickets" (7.0.g): el item es un <a> al detalle; el color
   del estado sale del StatusCode (Tipo B, §18.2), nunca del Name editable. */
.recent-item:hover[b-r5tky933oe],
.recent-item:focus-visible[b-r5tky933oe] {
    background: var(--sand);
    outline: none;
}

.recent-loading[b-r5tky933oe],
.recent-empty[b-r5tky933oe] {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.status-new[b-r5tky933oe],
.status-classified[b-r5tky933oe] {
    color: var(--petrol);
}

.status-assigned[b-r5tky933oe],
.status-in_progress[b-r5tky933oe] {
    color: var(--amber);
}

.status-pending[b-r5tky933oe],
.status-pending_user[b-r5tky933oe] {
    color: var(--gold-deep);
}

.status-resolved[b-r5tky933oe] {
    color: var(--green);
}

.status-closed[b-r5tky933oe],
.status-cancelled[b-r5tky933oe] {
    color: var(--muted);
}
/* _content/TicketsTI.Web/Components/Pages/Tickets/Detail.razor.rz.scp.css */
/* ============================================================
   Detail.razor.css — Hero + Cards Apilados
   Mini-hito 0.9 PASO 0.9.4
   Tokens BANQUO desde wwwroot/app.css (D-032)
   ============================================================ */

/* Page wrapper */
.detail-page[b-ytp5mhm56x] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-2xl);
}

/* Back link */
.back-link[b-ytp5mhm56x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
    transition: color 0.15s ease;
}

.back-link:hover[b-ytp5mhm56x] {
    color: var(--ink);
}

.back-link i[b-ytp5mhm56x] {
    font-size: 14px;
}

/* ============================================================
   HERO CARD
   ============================================================ */

.hero-card[b-ytp5mhm56x] {
    background: var(--white);
    border: 1.5px solid var(--gold);
    border-radius: 14px;
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.hero-content[b-ytp5mhm56x] {
    flex: 1;
    min-width: 320px;
}

.hero-eyebrow[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.hero-tk[b-ytp5mhm56x] {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.hero-type-badge[b-ytp5mhm56x] {
    background: var(--gold-soft);
    color: var(--gold-deep);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}

.hero-title[b-ytp5mhm56x] {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hero-meta[b-ytp5mhm56x] {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    font-style: italic;
}

.hero-badges[b-ytp5mhm56x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-end;
    flex-shrink: 0;
}

.hero-status-pill[b-ytp5mhm56x],
.hero-priority-pill[b-ytp5mhm56x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    min-width: 132px;
    justify-content: center;
}

.pill-dot[b-ytp5mhm56x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.pill-dot-light[b-ytp5mhm56x] {
    background: rgba(255, 255, 255, 0.7);
}

.hero-priority-pill[b-ytp5mhm56x] {
    /* background inline desde PriorityColorHex */
    color: var(--white);
}

/* Status pill colors (mismo patron que Dashboard) */
.hero-status-pill.status-new[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

.hero-status-pill.status-in_progress[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}

.hero-status-pill.status-pending[b-ytp5mhm56x],
.hero-status-pill.status-pending_user[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--gold-deep);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}

.hero-status-pill.status-assigned[b-ytp5mhm56x],
.hero-status-pill.status-classified[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--petrol) 10%, transparent);
    color: var(--petrol);
    border-color: color-mix(in srgb, var(--petrol) 25%, transparent);
}

.hero-status-pill.status-resolved[b-ytp5mhm56x],
.hero-status-pill.status-closed[b-ytp5mhm56x],
.hero-status-pill.status-cancelled[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--muted) 14%, transparent);
    color: var(--muted);
    border-color: color-mix(in srgb, var(--muted) 30%, transparent);
}

.hero-last-update[b-ytp5mhm56x] {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

/* ============================================================
   INFO CARDS (genericos)
   ============================================================ */

.info-card[b-ytp5mhm56x] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.card-label[b-ytp5mhm56x] {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

/* Description body */
.description-body p[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6;
    margin: 0 0 var(--space-sm) 0;
}

.description-body p:last-child[b-ytp5mhm56x] {
    margin-bottom: 0;
}

/* Card "Resolución": acento verde a la izquierda (--green, éxito) para que
   se distinga de la descripción sin competir con el hero. */
.resolution-card[b-ytp5mhm56x] {
    border-left: 3px solid var(--green);
}

.resolution-meta[b-ytp5mhm56x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

.resolution-category[b-ytp5mhm56x] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--green);
}

.resolution-date[b-ytp5mhm56x] {
    font-size: 12px;
    color: var(--muted);
}

/* El operador escribe en un textarea: los saltos simples se respetan. */
.resolution-card .description-body p[b-ytp5mhm56x] {
    white-space: pre-line;
}

/* Metadata grid (4 cols responsive) */
.metadata-grid[b-ytp5mhm56x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.metadata-item[b-ytp5mhm56x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-label[b-ytp5mhm56x] {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

.metadata-value[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}

.metadata-sub[b-ytp5mhm56x] {
    font-size: 11px;
    color: var(--muted);
}

/* Location body */
.location-body[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 4px;
}

/* Icono de sucursal (REQ-06, 8.0.def): acento BANQUO, alineado al texto. */
.location-body i[b-ytp5mhm56x] {
    font-size: 14px;
    color: var(--gold-deep);
    margin-right: 4px;
    vertical-align: -2px;
}

/* ============================================================
   SOLICITANTE (feature/requester-info-on-ticket)
   ============================================================ */
.requester-card[b-ytp5mhm56x] {
    border-left: 3px solid var(--gold-deep);
}

.requester-row[b-ytp5mhm56x] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.requester-icon[b-ytp5mhm56x] {
    font-size: 20px;
    color: var(--petrol);
    background: var(--sand);
    border-radius: 50%;
    padding: 6px;
    line-height: 1;
}

.requester-identity[b-ytp5mhm56x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.requester-name[b-ytp5mhm56x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
}

.requester-inactive-badge[b-ytp5mhm56x] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 1px 8px;
}

.requester-email[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--petrol-2);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.requester-email:hover[b-ytp5mhm56x] {
    color: var(--gold-deep);
    text-decoration: underline;
}

.requester-email i[b-ytp5mhm56x] {
    font-size: 13px;
    margin-right: 2px;
    vertical-align: -1px;
}

.requester-missing[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    align-self: center;
}

.requester-location[b-ytp5mhm56x] {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
}

.location-separator[b-ytp5mhm56x] {
    color: var(--muted);
}

.location-footnote[b-ytp5mhm56x] {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    margin: var(--space-xs) 0 0 0;
}

/* ============================================================
   LOADING + NOT FOUND STATES
   ============================================================ */

.loading-state[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--muted);
    font-size: 13px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.loading-state i[b-ytp5mhm56x] {
    font-size: 18px;
    animation: detail-spin-b-ytp5mhm56x 0.8s linear infinite;
}

.not-found-state[b-ytp5mhm56x] {
    padding: var(--space-2xl);
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.not-found-icon-tile[b-ytp5mhm56x] {
    width: 72px;
    height: 72px;
    background: var(--gold-soft);
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.not-found-icon-tile i[b-ytp5mhm56x] {
    font-size: 36px;
}

.not-found-title[b-ytp5mhm56x] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-sm) 0;
}

.not-found-text[b-ytp5mhm56x] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto var(--space-lg) auto;
    max-width: 420px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn[b-ytp5mhm56x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn i[b-ytp5mhm56x] {
    font-size: 15px;
}

.btn-primary[b-ytp5mhm56x] {
    background: var(--petrol);
    color: var(--sand);
    border-color: var(--petrol);
}

.btn-primary:hover[b-ytp5mhm56x] {
    background: var(--petrol-2);
    border-color: var(--petrol-2);
}

/* Spin animation (namespaced) */
@keyframes detail-spin-b-ytp5mhm56x {
    to { transform: rotate(360deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .detail-page[b-ytp5mhm56x] {
        padding: var(--space-md);
    }

    .hero-card[b-ytp5mhm56x] {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-badges[b-ytp5mhm56x] {
        align-items: flex-start;
    }

    .metadata-grid[b-ytp5mhm56x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   ASSIGNMENT CARD (Mini-hito 0.10)
   ============================================================ */

.assignment-status-text[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    margin: 0 0 var(--space-md) 0;
}

.assignment-loading[b-ytp5mhm56x],
.assignment-message[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    padding: var(--space-sm);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.assignment-loading[b-ytp5mhm56x] {
    color: var(--muted);
    background: color-mix(in srgb, var(--sand) 50%, var(--white));
}

.assignment-loading i[b-ytp5mhm56x] {
    animation: detail-spin-b-ytp5mhm56x 0.8s linear infinite;
}

.assignment-message.success[b-ytp5mhm56x] {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
}

.assignment-message.error[b-ytp5mhm56x] {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
}

/* Section labels (RECOMENDADOS, OTROS AGENTS) */
.agents-section-label[b-ytp5mhm56x] {
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    margin: var(--space-sm) 0 var(--space-xs) 0;
}

.agents-section-label.gold[b-ytp5mhm56x] {
    color: var(--gold);
}

/* Agent rows */
.agent-row[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    margin-bottom: var(--space-xs);
    transition: all 0.15s ease;
}

.agent-row.recommended[b-ytp5mhm56x] {
    background: var(--gold-soft);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}

.agent-row:hover[b-ytp5mhm56x] {
    border-color: color-mix(in srgb, var(--gold) 50%, transparent);
    transform: translateY(-1px);
}

.agent-avatar[b-ytp5mhm56x] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--white);
    flex-shrink: 0;
}

.agent-avatar.gold[b-ytp5mhm56x] {
    background: var(--gold);
}

.agent-avatar.petrol[b-ytp5mhm56x] {
    background: var(--petrol);
}

.agent-avatar.large[b-ytp5mhm56x] {
    width: 44px;
    height: 44px;
    font-size: 13px;
}

.agent-info[b-ytp5mhm56x] {
    flex: 1;
    min-width: 0;
}

.agent-name[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}

.agent-meta[b-ytp5mhm56x] {
    font-size: 11px;
    color: var(--muted);
}

/* Assign / Reassign buttons */
.btn-assign[b-ytp5mhm56x],
.btn-reassign[b-ytp5mhm56x],
.btn-toggle-others[b-ytp5mhm56x] {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--petrol);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-assign[b-ytp5mhm56x] {
    color: var(--gold-deep);
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}

.btn-assign:hover:not(:disabled)[b-ytp5mhm56x] {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

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

.btn-reassign:hover[b-ytp5mhm56x] {
    background: var(--sand);
    border-color: var(--petrol);
}

.btn-toggle-others[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-sm) 0;
    background: transparent;
    border: none;
    color: var(--gold-deep);
    padding: 4px 8px;
}

.btn-toggle-others:hover[b-ytp5mhm56x] {
    color: var(--petrol);
}

.btn-toggle-others i[b-ytp5mhm56x] {
    font-size: 12px;
}

/* Current agent card (estado B) */
.current-agent-card[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: color-mix(in srgb, var(--sand-2) 40%, var(--white));
    border-radius: 10px;
    border: 1px solid var(--line);
}

/* Reassign list wrapper (estado C) */
.reassign-list-wrapper[b-ytp5mhm56x] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--line);
}

/* ============================================================
   ACTIONS CARD (Mini-hito 0.11)
   ============================================================ */

.actions-buttons[b-ytp5mhm56x] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.actions-hint[b-ytp5mhm56x] {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    margin: var(--space-sm) 0 0 0;
}

.action-message[b-ytp5mhm56x] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.action-message.success[b-ytp5mhm56x] {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
}

.action-message.error[b-ytp5mhm56x] {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
}

/* Botones de acción con colores semánticos */
.btn-action[b-ytp5mhm56x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

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

.btn-action i[b-ytp5mhm56x] {
    font-size: 16px;
}

/* Resolver (verde) */
.btn-resolve[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

.btn-resolve:hover:not(:disabled)[b-ytp5mhm56x] {
    background: var(--green);
    color: var(--white);
}

/* Cerrar (petrol) */
.btn-close[b-ytp5mhm56x] {
    background: var(--sand);
    color: var(--petrol);
    border-color: color-mix(in srgb, var(--petrol) 30%, transparent);
}

.btn-close:hover:not(:disabled)[b-ytp5mhm56x] {
    background: var(--petrol);
    color: var(--white);
}

/* Reabrir (amber) */
.btn-reopen[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}

.btn-reopen:hover:not(:disabled)[b-ytp5mhm56x] {
    background: var(--amber);
    color: var(--white);
}

/* Cancelar (rojo) */
.btn-cancel[b-ytp5mhm56x] {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

.btn-cancel:hover:not(:disabled)[b-ytp5mhm56x] {
    background: var(--red);
    color: var(--white);
}

/* ============================================================
   MODAL DE ACCIÓN (Mini-hito 0.11)

   D-040: los <select> y <textarea> del modal son HTML nativos con @bind,
   NO componentes Blazor (InputSelect / InputTextArea). Reciben el atributo
   scoped b-xxx normalmente, por lo que ::deep NO se requiere acá.
   ============================================================ */

.modal-overlay[b-ytp5mhm56x] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--petrol-deep) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-md);
    backdrop-filter: blur(2px);
}

.modal-content[b-ytp5mhm56x] {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--gold);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header[b-ytp5mhm56x] {
    padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.modal-title[b-ytp5mhm56x] {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: normal;
    color: var(--ink);
    margin: 0 0 var(--space-xs) 0;
}

.modal-subtitle[b-ytp5mhm56x] {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

.modal-body[b-ytp5mhm56x] {
    padding: var(--space-lg);
}

.modal-confirm-text[b-ytp5mhm56x] {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
}

.form-field[b-ytp5mhm56x] {
    margin-bottom: var(--space-md);
}

.form-field:last-child[b-ytp5mhm56x] {
    margin-bottom: 0;
}

.form-label[b-ytp5mhm56x] {
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.form-select[b-ytp5mhm56x],
.form-textarea[b-ytp5mhm56x] {
    width: 100%;
    padding: 10px 12px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    box-sizing: border-box;
}

.form-select:focus[b-ytp5mhm56x],
.form-textarea:focus[b-ytp5mhm56x] {
    outline: none;
    border-color: var(--gold);
    background: var(--white);
}

.form-textarea[b-ytp5mhm56x] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.modal-footer[b-ytp5mhm56x] {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* Botón de descarte del modal.
   NOTA: se llama btn-modal-dismiss (NO btn-modal-cancel) a propósito:
   la clase del botón de confirmar se genera como btn-modal-@_modalAction,
   que para la acción "cancel" produciría btn-modal-cancel y colisionaría
   con los estilos de este botón. Ver comentario en .btn-modal-cancel. */
.btn-modal-dismiss[b-ytp5mhm56x] {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-modal-dismiss:hover:not(:disabled)[b-ytp5mhm56x] {
    background: var(--sand);
    border-color: var(--ink-soft);
}

.btn-modal-confirm[b-ytp5mhm56x] {
    background: var(--petrol);
    color: var(--sand);
    border: 1px solid var(--petrol);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-modal-confirm:disabled[b-ytp5mhm56x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-modal-confirm.btn-modal-resolve[b-ytp5mhm56x] {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.btn-modal-confirm.btn-modal-close[b-ytp5mhm56x] {
    background: var(--petrol);
    border-color: var(--petrol);
}

.btn-modal-confirm.btn-modal-reopen[b-ytp5mhm56x] {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--white);
}

.btn-modal-confirm.btn-modal-cancel[b-ytp5mhm56x] {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}
/* _content/TicketsTI.Web/Components/Shared/AttachmentPanel.razor.rz.scp.css */
/* ============================================================
   AttachmentPanel.razor.css — Sección "Adjuntos" del ticket
   REQ-05 sub-paso 7.0.d
   Tokens BANQUO desde wwwroot/app.css (D-032)
   Mismo look que los .info-card de Detail.razor.
   ============================================================ */

.attachment-panel[b-9gylzufrl0] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: var(--space-md);
    overflow: hidden;
}

/* ---------- Header colapsable ---------- */

.attachment-panel-header[b-9gylzufrl0] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: color-mix(in srgb, var(--sand) 55%, var(--white));
    border: none;
    color: var(--ink);
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.attachment-panel-header:hover[b-9gylzufrl0] {
    background: var(--sand);
}

.attachment-panel-header > i[b-9gylzufrl0] {
    font-size: 16px;
    color: var(--petrol);
}

.attachment-panel-title[b-9gylzufrl0] {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.attachment-badge[b-9gylzufrl0] {
    background: var(--gold);
    color: var(--petrol-deep);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

.attachment-panel-spacer[b-9gylzufrl0] {
    flex: 1;
}

.attachment-panel-body[b-9gylzufrl0] {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

/* ---------- Zona de drop ---------- */

.upload-zone[b-9gylzufrl0] {
    position: relative;
    border: 2px dashed var(--line-strong);
    border-radius: 10px;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    background: color-mix(in srgb, var(--sand) 40%, var(--white));
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-bottom: var(--space-md);
}

.upload-zone:hover[b-9gylzufrl0] {
    border-color: var(--gold);
}

.upload-zone.drag-over[b-9gylzufrl0] {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.upload-zone.busy[b-9gylzufrl0] {
    opacity: 0.6;
}

/* D-040: el <input> lo renderiza el componente InputFile y NO recibe el
   atributo scoped, así que solo se alcanza con ::deep.
   Se estira transparente sobre TODA la zona (inset: 0): así el drop nativo
   y el click caen siempre sobre el input, sin JavaScript. */
.upload-zone[b-9gylzufrl0]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}

.upload-zone.busy[b-9gylzufrl0]  input[type="file"] {
    cursor: progress;
}

/* Lo que está debajo del input no captura eventos: el input es el único
   target de drag/drop, y así no hay flicker de dragenter/dragleave. */
.upload-label[b-9gylzufrl0] {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.upload-label > i[b-9gylzufrl0] {
    font-size: 32px;
    color: var(--gold-deep);
    margin-bottom: var(--space-xs);
}

.upload-text[b-9gylzufrl0] {
    margin: 0;
    font-size: 13px;
    color: var(--ink);
}

.upload-text strong[b-9gylzufrl0] {
    color: var(--petrol);
    font-weight: 600;
}

.upload-hint[b-9gylzufrl0] {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
}

/* ---------- Cola de subida ---------- */

.upload-queue[b-9gylzufrl0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.upload-item[b-9gylzufrl0] {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: var(--space-sm) var(--space-md);
    background: var(--white);
    font-size: 13px;
}

.upload-item-row[b-9gylzufrl0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.upload-item-row > i[b-9gylzufrl0] {
    font-size: 16px;
    color: var(--muted);
    flex-shrink: 0;
}

.upload-item-row > i.spin[b-9gylzufrl0] {
    animation: attachment-spin-b-9gylzufrl0 0.8s linear infinite;
}

.upload-item.success .upload-item-row > i[b-9gylzufrl0] {
    color: var(--green);
}

.upload-item.error .upload-item-row > i[b-9gylzufrl0] {
    color: var(--red);
}

.upload-item.success[b-9gylzufrl0] {
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
    background: color-mix(in srgb, var(--green) 6%, transparent);
}

.upload-item.error[b-9gylzufrl0] {
    border-color: color-mix(in srgb, var(--red) 25%, transparent);
    background: color-mix(in srgb, var(--red) 6%, transparent);
}

.upload-item-name[b-9gylzufrl0] {
    flex: 1;
    min-width: 0;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-item-status[b-9gylzufrl0] {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.upload-item-error[b-9gylzufrl0] {
    margin-top: var(--space-xs);
    padding-left: 24px;
    font-size: 12px;
    color: var(--red);
}

.progress-bar[b-9gylzufrl0] {
    height: 6px;
    background: var(--sand-2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: var(--space-sm);
}

.progress-fill[b-9gylzufrl0] {
    height: 100%;
    background: var(--gold);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.progress-fill.saving[b-9gylzufrl0] {
    background: var(--petrol);
    animation: attachment-pulse-b-9gylzufrl0 1.2s ease-in-out infinite;
}

/* ---------- Mensajes / loading / vacío ---------- */

.attachment-message[b-9gylzufrl0],
.attachment-loading[b-9gylzufrl0] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    padding: var(--space-sm);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.attachment-loading[b-9gylzufrl0] {
    color: var(--muted);
    background: color-mix(in srgb, var(--sand) 50%, var(--white));
}

.attachment-loading i[b-9gylzufrl0] {
    animation: attachment-spin-b-9gylzufrl0 0.8s linear infinite;
}

.attachment-message.success[b-9gylzufrl0] {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
}

.attachment-message.error[b-9gylzufrl0] {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
}

.attachment-empty[b-9gylzufrl0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border-radius: 8px;
    background: color-mix(in srgb, var(--sand-2) 60%, var(--white));
    color: var(--muted);
    font-size: 13px;
}

.attachment-empty > i[b-9gylzufrl0] {
    font-size: 28px;
}

.attachment-empty p[b-9gylzufrl0] {
    margin: 0;
}

/* ---------- Grilla de adjuntos ---------- */

.attachment-grid[b-9gylzufrl0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

.attachment-card[b-9gylzufrl0] {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.attachment-card:hover[b-9gylzufrl0] {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.attachment-preview[b-9gylzufrl0] {
    background: var(--sand);
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.attachment-preview img[b-9gylzufrl0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attachment-preview > i[b-9gylzufrl0] {
    font-size: 40px;
    color: var(--petrol);
    opacity: 0.75;
}

.attachment-info[b-9gylzufrl0] {
    padding: var(--space-sm) var(--space-md);
    flex: 1;
    min-width: 0;
}

.attachment-filename[b-9gylzufrl0] {
    margin: 0 0 2px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta[b-9gylzufrl0] {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-actions[b-9gylzufrl0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
    padding: 0 var(--space-sm) var(--space-sm);
}

.btn-icon[b-9gylzufrl0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--petrol);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icon i[b-9gylzufrl0] {
    font-size: 15px;
}

.btn-icon:hover:not(:disabled)[b-9gylzufrl0] {
    background: var(--gold-soft);
    border-color: var(--gold);
}

.btn-icon.danger[b-9gylzufrl0] {
    color: var(--red);
}

.btn-icon.danger:hover:not(:disabled)[b-9gylzufrl0] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

.btn-icon:disabled[b-9gylzufrl0] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* El botón de descarga se vuelve <a> cuando la URL está lista:
   mismo look, sin subrayado. */
a.btn-icon[b-9gylzufrl0] {
    text-decoration: none;
}

/* ---------- Barra de la lista + selección múltiple (7.0.e) ---------- */

.attachment-list-bar[b-9gylzufrl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.attachment-list-count[b-9gylzufrl0] {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn-text[b-9gylzufrl0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--petrol);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-text i[b-9gylzufrl0] {
    font-size: 15px;
}

.btn-text:hover:not(:disabled)[b-9gylzufrl0] {
    background: var(--gold-soft);
    border-color: var(--gold);
}

.btn-text:disabled[b-9gylzufrl0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-9gylzufrl0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-danger i[b-9gylzufrl0] {
    font-size: 15px;
}

.btn-danger:hover:not(:disabled)[b-9gylzufrl0] {
    background: color-mix(in srgb, var(--red) 85%, var(--ink));
}

.btn-danger:disabled[b-9gylzufrl0] {
    opacity: 0.6;
    cursor: progress;
}

.bulk-actions-toolbar[b-9gylzufrl0] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--sand);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.bulk-count[b-9gylzufrl0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.attachment-card[b-9gylzufrl0] {
    position: relative;
}

.attachment-card.selectable[b-9gylzufrl0] {
    cursor: default;
}

.attachment-card.selected[b-9gylzufrl0] {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-soft);
}

.attachment-checkbox-label[b-9gylzufrl0] {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 5;
    display: flex;
    padding: 4px;
    border-radius: 6px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.attachment-checkbox[b-9gylzufrl0] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--petrol);
}

/* ---------- Modal de preview PDF (7.0.e) ---------- */

.pdf-preview-modal[b-9gylzufrl0] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: rgba(6, 44, 55, 0.72); /* --petrol-deep translúcido */
    outline: none;
    animation: attachment-fade-in-b-9gylzufrl0 0.15s ease;
}

.pdf-preview-content[b-9gylzufrl0] {
    display: flex;
    flex-direction: column;
    width: min(92vw, 960px);
    height: 86vh;
    overflow: hidden;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.pdf-preview-header[b-9gylzufrl0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--sand) 55%, var(--white));
}

.pdf-preview-header > i[b-9gylzufrl0] {
    font-size: 18px;
    color: var(--red);
    flex-shrink: 0;
}

.pdf-preview-title[b-9gylzufrl0] {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pdf-preview-meta[b-9gylzufrl0] {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

.pdf-preview-iframe[b-9gylzufrl0] {
    flex: 1;
    width: 100%;
    border: none;
    background: var(--sand-2);
}

/* ---------- Accesibilidad: foco visible por teclado ---------- */

.attachment-panel-header:focus-visible[b-9gylzufrl0],
.btn-icon:focus-visible[b-9gylzufrl0],
.btn-text:focus-visible[b-9gylzufrl0],
.btn-danger:focus-visible[b-9gylzufrl0],
.attachment-checkbox:focus-visible[b-9gylzufrl0] {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

.upload-zone:focus-within[b-9gylzufrl0] {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

/* ---------- Animaciones ---------- */

@keyframes attachment-fade-in-b-9gylzufrl0 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes attachment-spin-b-9gylzufrl0 {
    to { transform: rotate(360deg); }
}

@keyframes attachment-pulse-b-9gylzufrl0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .attachment-panel-body[b-9gylzufrl0] {
        padding: var(--space-md);
    }

    .attachment-grid[b-9gylzufrl0] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
/* _content/TicketsTI.Web/Components/Shared/DateRangePicker.razor.rz.scp.css */
/* ===========================================================
   DateRangePicker — filtro de rango para reportes (sub-paso 2.8)
   Design System BANQUO: 100% tokens de app.css.

   Los inputs los emite <InputDate>, un componente Blazor: su <input> NO
   hereda el atributo de scope de este archivo, así que .form-control va
   con ::deep o el user-agent gana y el date-picker sale con look de
   Windows 95 (D-040, L-05). Estilos calcados de los modales de Admin
   (.field ::deep .form-control) para que el reporte y el backoffice
   tengan el mismo input.
   =========================================================== */

.date-range-picker[b-mld7e572y3] {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.picker-inline[b-mld7e572y3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
}

/* === CAMPOS === */
.field[b-mld7e572y3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.field-label[b-mld7e572y3] {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.field[b-mld7e572y3]  .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field[b-mld7e572y3]  .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.field[b-mld7e572y3]  .form-control:disabled {
    background: var(--sand);
    color: var(--muted);
    cursor: not-allowed;
}

/* El ícono del calendario nativo, en el tono del texto secundario. */
.field[b-mld7e572y3]  .form-control::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
}

/* === ACCIONES === */
.picker-actions[b-mld7e572y3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.btn-preset[b-mld7e572y3],
.btn-apply[b-mld7e572y3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn-preset[b-mld7e572y3] {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
}

.btn-preset:hover:not(:disabled)[b-mld7e572y3] {
    background: var(--sand);
    border-color: var(--line-strong);
}

/* Preset que coincide con el rango aplicado: se pinta como chip activo. */
.btn-preset.active[b-mld7e572y3] {
    background: var(--petrol);
    border-color: var(--petrol);
    color: var(--sand);
}

.btn-apply[b-mld7e572y3] {
    background: var(--petrol);
    border: 1px solid var(--petrol);
    color: var(--sand);
}

.btn-apply:hover:not(:disabled)[b-mld7e572y3] {
    background: var(--petrol-2);
    transform: translateY(-1px);
}

.btn-apply i[b-mld7e572y3] {
    font-size: 16px;
}

.btn-preset:disabled[b-mld7e572y3],
.btn-apply:disabled[b-mld7e572y3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-preset:focus-visible[b-mld7e572y3],
.btn-apply:focus-visible[b-mld7e572y3] {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-soft);
}

/* === VALIDACIÓN === */
.picker-error[b-mld7e572y3] {
    margin: var(--space-sm) 0 0 0;
    font-size: 12.5px;
    color: var(--red);
}

/* === RESPONSIVE === */
@media (max-width: 700px) {
    .picker-inline[b-mld7e572y3] {
        flex-direction: column;
        align-items: stretch;
    }

    .field[b-mld7e572y3] {
        min-width: 0;
    }

    .picker-actions[b-mld7e572y3] {
        margin-left: 0;
    }

    .btn-apply[b-mld7e572y3] {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* _content/TicketsTI.Web/Components/Shared/Reports/BranchFilter.razor.rz.scp.css */
/* ===========================================================
   BranchFilter — filtro por sucursal de los reportes (REQ-06, 8.0.g)
   Design System BANQUO: 100% tokens de app.css.

   Copia del .filter-field / .filter-label / .filter-select de
   TeamAnalysisReport.razor.css: el CSS scoped es por componente, y como
   este select lo emite BranchFilter, las reglas de la página que lo
   hospeda no le llegan. Se duplican acá para que el filtro se vea igual
   al lado de los de Agente y Solicitante. No hace falta ::deep (D-040).
   =========================================================== */

.branch-filter[b-586qit4cxs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

/* Mismo tratamiento que los th de las tablas del reporte: 10px, mayúsculas,
   muted. Es una etiqueta de control, no un título. */
.filter-label[b-586qit4cxs] {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.filter-select[b-586qit4cxs] {
    min-width: 240px;
    max-width: 320px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.filter-select:focus[b-586qit4cxs] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.filter-select:disabled[b-586qit4cxs] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .filter-select[b-586qit4cxs] {
        min-width: 0;
        max-width: none;
    }
}
/* _content/TicketsTI.Web/Components/Shared/TicketCommentsPanel.razor.rz.scp.css */
/* ===========================================================
   TicketCommentsPanel — hilo de comentarios del ticket (REQ-10, 12.0)
   Design System BANQUO: 100% tokens de app.css. Misma card que las
   info-card de Detail. El <textarea> es HTML directo: sin ::deep (D-040).
   =========================================================== */

.comments-panel[b-8fvxku862n] {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-lg);
}

.comments-header[b-8fvxku862n] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.comments-header i[b-8fvxku862n] {
    font-size: 18px;
    color: var(--gold);
}

.comments-title[b-8fvxku862n] {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.comments-badge[b-8fvxku862n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    font-size: 11px;
    font-weight: 600;
}

.comments-readonly[b-8fvxku862n] {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* === Composer === */
.composer[b-8fvxku862n] {
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--sand);
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.composer:focus-within[b-8fvxku862n] {
    border-color: var(--petrol);
}

.composer-internal[b-8fvxku862n] {
    background: color-mix(in srgb, var(--amber) 10%, var(--white));
    border-color: color-mix(in srgb, var(--amber) 45%, var(--line-strong));
}

.composer-input[b-8fvxku862n] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    padding: var(--space-xs);
    min-height: 72px;
}

.composer-input:focus[b-8fvxku862n] {
    outline: none;
}

.composer-footer[b-8fvxku862n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-top: var(--space-xs);
}

.composer-internal-toggle[b-8fvxku862n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}

.composer-internal-toggle i[b-8fvxku862n] {
    color: var(--amber);
}

.composer-actions[b-8fvxku862n] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.composer-count[b-8fvxku862n] {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.btn-send[b-8fvxku862n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--petrol);
    color: var(--sand);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-send:hover:not(:disabled)[b-8fvxku862n] {
    background: var(--petrol-2);
}

.btn-send:disabled[b-8fvxku862n] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-small[b-8fvxku862n] {
    padding: 5px 12px;
    font-size: 12px;
}

.spinner[b-8fvxku862n] {
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, var(--sand) 40%, transparent);
    border-top-color: var(--sand);
    border-radius: 50%;
    animation: spin-b-8fvxku862n 0.7s linear infinite;
}

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

/* === Mensajes === */
.comments-message[b-8fvxku862n] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12.5px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: var(--space-md);
}

.comments-message.is-error[b-8fvxku862n] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
}

.comments-message.is-ok[b-8fvxku862n] {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
}

.comments-note[b-8fvxku862n],
.comments-empty[b-8fvxku862n] {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.comments-closed-note[b-8fvxku862n] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--muted);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--sand);
}

.comments-empty[b-8fvxku862n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
}

/* === Lista === */
.comments-list[b-8fvxku862n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.comment-card[b-8fvxku862n] {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
}

.comment-card.is-internal[b-8fvxku862n] {
    background: color-mix(in srgb, var(--amber) 9%, var(--white));
    border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
    border-left: 3px solid var(--amber);
}

.comment-avatar[b-8fvxku862n] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
}

.comment-main[b-8fvxku862n] {
    flex: 1;
    min-width: 0;
}

.comment-meta[b-8fvxku862n] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--space-sm);
    margin-bottom: 4px;
    font-size: 12px;
}

.comment-author[b-8fvxku862n] {
    font-weight: 600;
    color: var(--ink);
    word-break: break-all;
}

.comment-role[b-8fvxku862n] {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--petrol) 10%, transparent);
    color: var(--petrol);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comment-internal-badge[b-8fvxku862n] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 18%, transparent);
    color: var(--amber);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comment-time[b-8fvxku862n],
.comment-edited[b-8fvxku862n] {
    color: var(--muted);
    font-size: 11.5px;
}

.comment-edited[b-8fvxku862n] {
    font-style: italic;
}

.comment-body[b-8fvxku862n] {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.edit-input[b-8fvxku862n] {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--sand);
    margin-top: 4px;
}

.comment-actions[b-8fvxku862n],
.comment-edit-actions[b-8fvxku862n] {
    display: flex;
    gap: var(--space-md);
    margin-top: 6px;
    align-items: center;
}

.comment-edit-actions[b-8fvxku862n] {
    justify-content: flex-end;
}

.btn-link[b-8fvxku862n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--muted);
    cursor: pointer;
}

.btn-link:hover:not(:disabled)[b-8fvxku862n] {
    color: var(--petrol);
    text-decoration: underline;
}

.btn-link-danger:hover:not(:disabled)[b-8fvxku862n] {
    color: var(--red);
}

.btn-link:disabled[b-8fvxku862n] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .comments-panel[b-8fvxku862n] {
        padding: var(--space-md);
    }

    .comment-card[b-8fvxku862n] {
        gap: var(--space-sm);
    }
}