/* /Layout/MainLayout.razor.rz.scp.css */
/* ================================================================
   MAINLAYOUT — Shell personalizado
   Sidebar + Topbar unificados en #1c1e22
   ================================================================ */

/* ---- Contenedor raíz del shell ---- */

.shell[b-7t9lfcrn4q] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--shell-bg);
}

/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar[b-7t9lfcrn4q] {
    width: var(--sidebar-width, 220px);
    flex-shrink: 0;
    background-color: var(--shell-bg);
    border-right: 1px solid var(--shell-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background-color var(--transition-normal);
}

/* ---- Logo / marca ---- */

.sidebar-logo[b-7t9lfcrn4q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--shell-border);
    flex-shrink: 0;
}

/* Cuadrado ámbar con la inicial */
.brand-mark[b-7t9lfcrn4q] {
    width: 30px;
    height: 30px;
    background-color: #c9963a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: #1c1e22;
    flex-shrink: 0;
    letter-spacing: -.02em;
    user-select: none;
}

/* Nombre en monospace */
.brand-name[b-7t9lfcrn4q] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--shell-brand-name);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Acento del nombre de marca */
.brand-accent[b-7t9lfcrn4q] {
    color: #c9963a;
}

/* ---- Navegación ---- */

/* NOTA: .nav-item y derivados están en Common.css (global)
   porque NavLink es un componente hijo y el CSS scoped no lo alcanza. */

.sidebar-nav[b-7t9lfcrn4q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) 0 var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--shell-scrollbar) transparent;
}

.sidebar-nav[b-7t9lfcrn4q]::-webkit-scrollbar       { width: 4px; }
.sidebar-nav[b-7t9lfcrn4q]::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav[b-7t9lfcrn4q]::-webkit-scrollbar-thumb { background: var(--shell-scrollbar); border-radius: 2px; }

/* ================================================================
   COLUMNA PRINCIPAL
   ================================================================ */

.main-col[b-7t9lfcrn4q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ================================================================
   TOPBAR
   ================================================================ */

.topbar[b-7t9lfcrn4q] {
    height: var(--header-height, 52px);
    flex-shrink: 0;
    background-color: var(--shell-bg);
    border-bottom: 1px solid var(--shell-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6) 0 var(--space-5);
    gap: var(--space-4);
    transition: background-color var(--transition-normal);
}

/* ---- Breadcrumb ---- */

.bc[b-7t9lfcrn4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bc-item[b-7t9lfcrn4q] {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--shell-bc-text);
    white-space: nowrap;
}

.bc-current[b-7t9lfcrn4q] {
    color: var(--shell-bc-current);
    font-weight: var(--font-medium);
}

.bc-sep[b-7t9lfcrn4q] {
    color: var(--shell-bc-sep);
    font-size: 12px;
    user-select: none;
    flex-shrink: 0;
}

/* ---- Usuario ---- */

.topbar-user[b-7t9lfcrn4q] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Avatar de iniciales */
.user-avatar[b-7t9lfcrn4q] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background-color: #c9963a;
    color: #1c1e22;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    flex-shrink: 0;
    user-select: none;
    cursor: default;
}

/* Nombre + botón de logout */
.user-meta[b-7t9lfcrn4q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.user-display-name[b-7t9lfcrn4q] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--shell-user-name);
    line-height: 1.2;
    white-space: nowrap;
}

.logout-btn[b-7t9lfcrn4q] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--shell-logout-color);
    font-family: var(--font-sans);
    line-height: 1.2;
    transition: color var(--transition-fast);
}

.logout-btn:hover[b-7t9lfcrn4q] {
    color: var(--amber-500);
}

/* ================================================================
   ÁREA DE CONTENIDO (PAGE BODY)
   ================================================================ */

.page-body[b-7t9lfcrn4q] {
    flex: 1;
    background-color: var(--surface-page);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ================================================================
   SIDEBAR FOOTER — ajustes de apariencia
   ================================================================ */

.sidebar-footer[b-7t9lfcrn4q] {
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-top: 1px solid var(--shell-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* Toggle nativo — pastilla continua sin huecos entre ítems */
.app-toggle[b-7t9lfcrn4q] {
    display: inline-flex;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--shell-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.app-toggle-item[b-7t9lfcrn4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--shell-nav-text);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 6px 14px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1;
}

.app-toggle-item .material-icons[b-7t9lfcrn4q] {
    font-size: 15px;
}

.app-toggle-item:not(.app-toggle-item--active):hover[b-7t9lfcrn4q] {
    background: rgba(255, 255, 255, .09);
    color: var(--shell-nav-text-hi);
}

.app-toggle-item--active[b-7t9lfcrn4q] {
    background: var(--neutral-0);
    color: var(--neutral-900);
    font-weight: var(--font-semibold);
}

/* ================================================================
   TOPBAR — elementos exclusivos de móvil (hamburguesa + marca)
   ================================================================ */

/* Botón hamburguesa */
.topbar-hamburger[b-7t9lfcrn4q] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--shell-nav-text-hi);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.topbar-hamburger:hover[b-7t9lfcrn4q] {
    background: var(--shell-nav-hover-bg);
}

.topbar-hamburger .material-icons[b-7t9lfcrn4q] {
    font-size: 22px;
}

/* Marca en topbar (solo móvil) */
.topbar-mobile-brand[b-7t9lfcrn4q] {
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-brand-name[b-7t9lfcrn4q] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--shell-brand-name);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Botón cerrar en sidebar (solo móvil) */
.sidebar-close-btn[b-7t9lfcrn4q] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--shell-nav-text-hi);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.sidebar-close-btn:hover[b-7t9lfcrn4q] {
    background: var(--shell-nav-hover-bg);
}

.sidebar-close-btn .material-icons[b-7t9lfcrn4q] {
    font-size: 22px;
}

/* Desktop: marca en sidebar visible, elementos móvil ocultos */
.sidebar-logo-desktop[b-7t9lfcrn4q] {
    display: flex;
}

/* ================================================================
   RESPONSIVE — MÓVIL
   ================================================================ */

/* Overlay detrás del drawer */
.sidebar-overlay[b-7t9lfcrn4q] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999;
}

@media (max-width: 768px) {

    /* Sidebar: drawer oculto por defecto, desliza desde la izquierda */
    .sidebar[b-7t9lfcrn4q] {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 220px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        box-shadow: none;
    }

    .sidebar--open[b-7t9lfcrn4q] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    /* main-col ocupa todo el ancho (sin margen de sidebar) */
    .shell[b-7t9lfcrn4q] {
        flex-direction: column;
    }

    .main-col[b-7t9lfcrn4q] {
        width: 100%;
    }

    /* Topbar: hamburguesa + marca visibles, breadcrumb oculto */
    .topbar-hamburger[b-7t9lfcrn4q]     { display: flex; }
    .topbar-mobile-brand[b-7t9lfcrn4q]  { display: flex; }
    .bc[b-7t9lfcrn4q]                   { display: none; }

    /* Sidebar-logo: mostrar botón cierre, ocultar marca */
    .sidebar-close-btn[b-7t9lfcrn4q]    { display: flex; }
    .sidebar-logo-desktop[b-7t9lfcrn4q] { display: none !important; }

    /* Restaurar sidebar-logo layout */
    .sidebar-logo[b-7t9lfcrn4q] {
        justify-content: flex-start;
        padding: 18px 16px 16px;
        gap: 10px;
    }

    /* Restaurar secciones y footer visibles dentro del drawer */
    .nav-section-label[b-7t9lfcrn4q],
    .nav-divider[b-7t9lfcrn4q] {
        display: block;
    }

    .sidebar-footer[b-7t9lfcrn4q] { display: flex; }

    .user-meta[b-7t9lfcrn4q] { display: none; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-m86zd3m4ie] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

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

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

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

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

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

    .nav-item[b-m86zd3m4ie]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

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

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

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

    .collapse[b-m86zd3m4ie] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-m86zd3m4ie] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Appointment/Appointments.razor.rz.scp.css */
/* ================================================================
   AGENDA — Scoped CSS
   ================================================================ */

/* ── RAÍZ ─────────────────────────────────────────────────────── */

.ag-root[b-of5vvatlmm] {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
}

/* ── PANEL IZQUIERDO — PROFESIONALES ─────────────────────────── */

.ag-sidebar[b-of5vvatlmm] {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e2e0db;
    overflow: hidden;
}

.ag-sidebar-header[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px 12px;
    border-bottom: 1px solid #e2e0db;
    flex-shrink: 0;
}

.ag-sidebar-icon[b-of5vvatlmm] {
    font-size: 18px;
    color: #c9963a;
}

.ag-sidebar-title[b-of5vvatlmm] {
    font-size: 13px;
    font-weight: 600;
    color: #1c1a17;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ag-sidebar-list[b-of5vvatlmm] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ag-sidebar-list[b-of5vvatlmm]::-webkit-scrollbar { width: 4px; }
.ag-sidebar-list[b-of5vvatlmm]::-webkit-scrollbar-track { background: transparent; }
.ag-sidebar-list[b-of5vvatlmm]::-webkit-scrollbar-thumb { background: #d4d1cb; border-radius: 2px; }

/* Employee item */
.ag-employee-item[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: background 120ms;
    position: relative;
}

.ag-employee-item:hover[b-of5vvatlmm] {
    background: #f7f6f3;
}

.ag-employee-item--active[b-of5vvatlmm] {
    background: #fdf6e7;
}

.ag-employee-item--active:hover[b-of5vvatlmm] {
    background: #faefd6;
}

.ag-employee-info[b-of5vvatlmm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ag-employee-name[b-of5vvatlmm] {
    font-size: 13px;
    font-weight: 500;
    color: #1c1a17;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-employee-pos[b-of5vvatlmm] {
    font-size: 11px;
    color: #9e9b94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.ag-employee-check[b-of5vvatlmm] {
    font-size: 16px;
    color: #c9963a;
    flex-shrink: 0;
}

/* Loading spinner */
.ag-sidebar-loading[b-of5vvatlmm] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    color: #c9963a;
}

.ag-spin[b-of5vvatlmm] {
    animation: ag-spin-b-of5vvatlmm 1s linear infinite;
}

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

/* ── ÁREA DERECHA ─────────────────────────────────────────────── */

.ag-content[b-of5vvatlmm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── PAGE HEADER ─────────────────────────────────────────────── */

.pg-page-header[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 0;
    flex-shrink: 0;
}

.pg-page-title[b-of5vvatlmm] {
    font-size: var(--text-2xl, 22px);
    font-weight: var(--font-bold, 700);
    color: var(--neutral-900, #1c1a17);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 2px;
}

.pg-page-subtitle[b-of5vvatlmm] {
    font-size: var(--text-sm, 13px);
    color: var(--neutral-500, #737373);
    margin: 0;
    font-weight: var(--font-normal, 400);
}

/* ── NAVEGACIÓN DE FECHA ─────────────────────────────────────── */

.ag-date-nav[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #faf9f7;
    border: 1px solid #e2e0db;
    border-radius: 6px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.ag-nav-btn[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e2e0db;
    border-radius: 4px;
    background: transparent;
    color: #6b6860;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
    flex-shrink: 0;
}

.ag-nav-btn:hover[b-of5vvatlmm] {
    background: #e2e0db;
    border-color: #ccc9c1;
    color: #1a1a18;
}

.ag-date-label[b-of5vvatlmm] {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a18;
    white-space: nowrap;
    padding: 0 6px;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.ag-today-btn[b-of5vvatlmm] {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #e2e0db;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'IBM Plex Sans', sans-serif;
    color: #6b6860;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 140ms ease;
    white-space: nowrap;
}

.ag-today-btn:hover[b-of5vvatlmm] {
    background: #c9963a;
    border-color: #c9963a;
    color: #fff;
}

/* ── ESTADO VACÍO ────────────────────────────────────────────── */

.ag-empty-state[b-of5vvatlmm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #b0aca4;
}

.ag-empty-icon[b-of5vvatlmm] {
    font-size: 56px;
}

.ag-empty-text[b-of5vvatlmm] {
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

/* ── VISTA SEMANAL (1 profesional) ───────────────────────────── */

.ag-week-wrap[b-of5vvatlmm] {
    flex: 1;
    min-height: 0;
    padding: 16px 24px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── GRID DE COLUMNAS (día por profesional) ──────────────────── */

.ag-grid[b-of5vvatlmm] {
    display: grid;
    gap: 14px;
    padding: 16px 24px 20px;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── COLUMNA ─────────────────────────────────────────────────── */

.ag-column[b-of5vvatlmm] {
    display: flex;
    flex-direction: column;
    background: #faf9f7;
    border: 1px solid #e2e0db;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    min-height: 0;
}

/* ── CABECERA DE COLUMNA ─────────────────────────────────────── */

.ag-column-header[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #1c1e22;
    border-bottom: 1px solid #2e3138;
    flex-shrink: 0;
}

.ag-column-header-left[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ag-avatar[b-of5vvatlmm] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #1c1a17;
    flex-shrink: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}

.ag-column-name[b-of5vvatlmm] {
    font-size: 13px;
    font-weight: 500;
    color: #f0ede8;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.ag-add-btn[b-of5vvatlmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #c9963a;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: background 140ms ease, transform 100ms ease;
    flex-shrink: 0;
}

.ag-add-btn:hover[b-of5vvatlmm]  { background: #b5842e; }
.ag-add-btn:active[b-of5vvatlmm] { transform: scale(0.94); }

/* ── SCHEDULER WRAP ──────────────────────────────────────────── */

.ag-scheduler-wrap[b-of5vvatlmm] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.ag-scheduler-wrap[b-of5vvatlmm]::-webkit-scrollbar       { width: 5px; }
.ag-scheduler-wrap[b-of5vvatlmm]::-webkit-scrollbar-track { background: transparent; }
.ag-scheduler-wrap[b-of5vvatlmm]::-webkit-scrollbar-thumb { background: #ccc9c1; border-radius: 3px; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ag-sidebar[b-of5vvatlmm] {
        width: 60px;
    }
    .ag-sidebar-header[b-of5vvatlmm] { padding: 14px 0; justify-content: center; }
    .ag-sidebar-title[b-of5vvatlmm]  { display: none; }
    .ag-employee-item[b-of5vvatlmm]  { justify-content: center; padding: 10px 0; }
    .ag-employee-info[b-of5vvatlmm]  { display: none; }
    .ag-employee-check[b-of5vvatlmm] { display: none; }
}

@media (max-width: 640px) {
    .ag-root[b-of5vvatlmm] { flex-direction: column; height: auto; overflow: visible; }
    .ag-sidebar[b-of5vvatlmm] { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid #e2e0db; height: auto; }
    .ag-sidebar-header[b-of5vvatlmm] { border-bottom: none; padding: 10px 12px; }
    .ag-sidebar-list[b-of5vvatlmm] { display: flex; flex-direction: row; overflow-x: auto; padding: 6px 8px; gap: 6px; }
    .ag-employee-item[b-of5vvatlmm] { width: auto; border-radius: 8px; padding: 6px 10px; }
    .ag-employee-info[b-of5vvatlmm] { display: flex; }
    .ag-employee-name[b-of5vvatlmm] { font-size: 12px; }
    .ag-employee-pos[b-of5vvatlmm]  { display: none; }
    .ag-content[b-of5vvatlmm] { overflow: visible; }
    .ag-week-wrap[b-of5vvatlmm] { padding: 12px 12px 16px; }
    .ag-grid[b-of5vvatlmm] { padding: 12px 12px 16px; grid-template-columns: 1fr !important; height: auto; }
    .pg-page-header[b-of5vvatlmm] { flex-direction: column; align-items: flex-start; padding: 14px 12px 0; }
}
/* /Pages/Employee/EmployeeComponent.razor.rz.scp.css */
/* ── Avatar + nombre en el grid ──────────────────────────────── */
.emp-name-cell[b-mhg6wlg8ar] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emp-avatar[b-mhg6wlg8ar] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #1c1a17;
    font-family: 'IBM Plex Sans', sans-serif;
}

/* ── Diálogos inline (crear / editar empleado) ───────────────── */

.dialog-backdrop[b-mhg6wlg8ar] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.dialog-content[b-mhg6wlg8ar] {
    background: var(--surface-card);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    padding: 1.5rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog-header[b-mhg6wlg8ar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.dialog-title[b-mhg6wlg8ar] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
    margin: 0;
}
/* /Pages/Employee/EmployeeDialog.razor.rz.scp.css */
/* ----------------------------------------------------------------
   EMPLOYEE DIALOG — layout y secciones tipo tarjeta
   ---------------------------------------------------------------- */

.employee-dialog-body[b-bylbr04ppb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cada sección: recuadro blanco con borde y radio */
.ed-section[b-bylbr04ppb] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* Cabecera: icono a la izquierda, texto a la derecha */
.ed-section-header[b-bylbr04ppb] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Icono de sección */
.ed-section-icon[b-bylbr04ppb] {
    font-size: 20px !important;
    color: #c9963a;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Columna de texto (título + subtítulo) */
.ed-section-header-text[b-bylbr04ppb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ed-section-title[b-bylbr04ppb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.ed-section-subtitle[b-bylbr04ppb] {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

/* Footer con botones */
.ed-footer[b-bylbr04ppb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}
/* /Pages/Login.razor.rz.scp.css */
/* ================================================================
   LOGIN — Diseño split-screen
   ================================================================ */

.login-root[b-0u5okc0yxa] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--neutral-0);
}

/* ---- Panel izquierdo (imagen + overlay) ---- */

.login-panel-left[b-0u5okc0yxa] {
    flex: 1;
    background-image: url('images/backgroundLogin.jpg');
    background-size: cover;
    background-position: center;
    display: none; /* visible solo en desktop */
    position: relative;
}

.login-panel-overlay[b-0u5okc0yxa] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(30, 27, 75, .80) 0%,
        rgba(99, 102, 241, .55) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: var(--space-12);
}

.login-panel-quote[b-0u5okc0yxa] {
    color: #fff;
}

.quote-text[b-0u5okc0yxa] {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-3);
    max-width: 38ch;
}

.quote-brand[b-0u5okc0yxa] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--brand-200);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
}

/* ---- Panel derecho (formulario) ---- */

.login-panel-right[b-0u5okc0yxa] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
    overflow-y: auto;
    background-color: var(--neutral-50);
}

.login-form-wrapper[b-0u5okc0yxa] {
    width: 100%;
    max-width: 400px;
}

/* ---- Logo y títulos ---- */

.login-logo-area[b-0u5okc0yxa] {
    text-align: center;
    margin-bottom: var(--space-8);
}

.login-logo[b-0u5okc0yxa] {
    width: 72px !important;
    height: auto !important;
    margin-bottom: var(--space-5);
}

.login-title[b-0u5okc0yxa] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
}

.login-subtitle[b-0u5okc0yxa] {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin: 0;
}

/* ---- Card del formulario ---- */

.login-card[b-0u5okc0yxa] {
    background: var(--surface-card);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--card-shadow);
}

/* ---- Campos del formulario ---- */

.login-field[b-0u5okc0yxa] {
    margin-bottom: var(--space-4);
}

.login-field-label[b-0u5okc0yxa] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--neutral-700);
    margin-bottom: var(--space-2);
}

.login-input[b-0u5okc0yxa] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--neutral-900);
    background: var(--neutral-0);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.login-input:focus[b-0u5okc0yxa] {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-500) 15%, transparent);
}

.login-input[b-0u5okc0yxa]::placeholder {
    color: var(--neutral-400);
}

/* ---- Botón submit (RadzenButton primary) ---- */

.login-card[b-0u5okc0yxa]  .rz-button-primary,
.login-card[b-0u5okc0yxa]  .rz-variant-filled.rz-button-primary {
    height: 42px;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    border-radius: var(--radius-md) !important;
    letter-spacing: .01em;
}

/* ---- "¿Olvidaste tu contraseña?" ---- */

.login-card-extras[b-0u5okc0yxa] {
    text-align: right;
    margin-top: var(--space-3);
}

.login-forgot-link[b-0u5okc0yxa] {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-forgot-link:hover[b-0u5okc0yxa] {
    color: var(--neutral-600);
}

/* ---- Mensaje de error ---- */

.login-error[b-0u5okc0yxa] {
    margin-top: var(--space-4);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    color: #dc2626;
    font-size: var(--text-sm);
    text-align: center;
}

/* ---- Prompt de registro ---- */

.login-signup-prompt[b-0u5okc0yxa] {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-top: var(--space-5);
    margin-bottom: 0;
}

.login-signup-prompt a[b-0u5okc0yxa] {
    color: var(--brand-600);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.login-signup-prompt a:hover[b-0u5okc0yxa] {
    color: var(--brand-700);
    text-decoration: underline;
}

/* ---- Footer ---- */

.login-footer-text[b-0u5okc0yxa] {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--neutral-400);
    margin-top: var(--space-6);
    margin-bottom: 0;
}

/* ---- Responsive móvil ---- */

@media (max-width: 480px) {
    .login-panel-right[b-0u5okc0yxa] {
        padding: var(--space-6) var(--space-4);
        align-items: flex-start;
        padding-top: var(--space-10);
    }

    .login-card[b-0u5okc0yxa] {
        padding: var(--space-5) var(--space-4);
        border-radius: var(--radius-lg);
    }

    .login-logo-area[b-0u5okc0yxa] {
        margin-bottom: var(--space-6);
    }

    .login-title[b-0u5okc0yxa] {
        font-size: var(--text-xl);
    }
}

/* ---- Responsive desktop: mostrar panel izquierdo en >=1024px ---- */

@media (min-width: 1024px) {
    .login-panel-left[b-0u5okc0yxa] {
        display: block;
    }

    .login-panel-right[b-0u5okc0yxa] {
        max-width: 480px;
        flex-shrink: 0;
        background-color: var(--neutral-0);
    }
}
/* /Pages/Maintenance/Categories.razor.rz.scp.css */
/* Estilos CRUD comunes → Common.css */
/* /Pages/Maintenance/Maintenance.razor.rz.scp.css */
/* Estilos CRUD comunes → Common.css */
/* /Pages/Maintenance/Products.razor.rz.scp.css */
/* Estilos CRUD comunes → Common.css */
/* /Pages/Maintenance/Providers.razor.rz.scp.css */
/* Estilos CRUD comunes → Common.css */
/* /Pages/Person/Peoples.razor.rz.scp.css */
/* Estilos CRUD comunes → Common.css */
/* /Pages/Person/PersonDialog.razor.rz.scp.css */


[b-qjmjc5sba9] .rz-tabview-panel {
    padding-inline: 0;
}

/* Enlace ámbar para el número de venta en el histórico */
[b-qjmjc5sba9] .sale-number-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #c9963a;
    font-weight: 600;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 120ms;
}

[b-qjmjc5sba9] .sale-number-link:hover {
    color: #9a6f20;
}

.avatar-container[b-qjmjc5sba9] {
    width: 150px;
    height: 145px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #e9ecef;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}

.avatar-container:hover[b-qjmjc5sba9] {
    border-color: #3f51b5;
    background: #e8eaf6;
}

.avatar-overlay[b-qjmjc5sba9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
}

.avatar-container:hover .avatar-overlay[b-qjmjc5sba9] {
    opacity: 1;
}

.edit-icon[b-qjmjc5sba9] {
    font-size: 32px;
    color: white;
}

.avatar-placeholder[b-qjmjc5sba9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9aa4b2;
    text-align: center;
}

.avatar-text[b-qjmjc5sba9] {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.avatar-icon[b-qjmjc5sba9] {
    font-size: 90px;
    margin-bottom: 4px;
    opacity: 0.8;
}
/* /Pages/Principal.razor.rz.scp.css */
/* ================================================================
   PRINCIPAL (DASHBOARD) — Scoped CSS
   ================================================================ */

.dashboard-root[b-3zc29u6zlk] {
    padding: var(--space-8) var(--space-6);
    max-width: 1100px;
}

/* ---- Encabezado ---- */

.dashboard-header[b-3zc29u6zlk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-10);
    gap: var(--space-4);
}

.dashboard-title[b-3zc29u6zlk] {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
}

.dashboard-subtitle[b-3zc29u6zlk] {
    font-size: var(--text-base);
    color: var(--neutral-500);
    margin: 0;
}

.dashboard-logo[b-3zc29u6zlk] {
    width: 56px !important;
    height: auto !important;
    opacity: .65;
    flex-shrink: 0;
}

/* ---- Secciones ---- */

.dashboard-section[b-3zc29u6zlk] {
    margin-bottom: var(--space-10);
}

.section-heading[b-3zc29u6zlk] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--neutral-400);
    margin-bottom: var(--space-4);
}

/* ---- Quick access cards ---- */

.quick-access-grid[b-3zc29u6zlk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}

.quick-card[b-3zc29u6zlk] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}

.quick-card:hover[b-3zc29u6zlk] {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--brand-200);
    color: inherit;
    text-decoration: none;
}

.quick-card-icon[b-3zc29u6zlk] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-card-icon .material-icons[b-3zc29u6zlk] {
    font-size: 22px;
    color: #fff;
}

.quick-card-icon--indigo[b-3zc29u6zlk]  { background-color: var(--brand-600); }
.quick-card-icon--violet[b-3zc29u6zlk]  { background-color: #7c3aed; }
.quick-card-icon--sky[b-3zc29u6zlk]     { background-color: #0284c7; }
.quick-card-icon--emerald[b-3zc29u6zlk] { background-color: #059669; }

.quick-card-body[b-3zc29u6zlk] {
    flex: 1;
    min-width: 0;
}

.quick-card-title[b-3zc29u6zlk] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
    margin-bottom: 2px;
}

.quick-card-desc[b-3zc29u6zlk] {
    display: block;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-card-arrow[b-3zc29u6zlk] {
    font-size: 18px;
    color: var(--neutral-300);
    flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.quick-card:hover .quick-card-arrow[b-3zc29u6zlk] {
    color: var(--brand-500);
    transform: translateX(2px);
}

/* ---- Feature cards ---- */

.feature-grid[b-3zc29u6zlk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.feature-card[b-3zc29u6zlk] {
    padding: var(--space-6);
    background: var(--surface-card);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.feature-card:hover[b-3zc29u6zlk] {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.feature-icon[b-3zc29u6zlk] {
    font-size: 28px;
    color: var(--brand-600);
    margin-bottom: var(--space-3);
    display: block;
}

.feature-title[b-3zc29u6zlk] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
}

.feature-desc[b-3zc29u6zlk] {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    line-height: var(--leading-normal);
    margin: 0;
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .dashboard-root[b-3zc29u6zlk] {
        padding: var(--space-4);
    }

    .dashboard-header[b-3zc29u6zlk] {
        flex-direction: column;
    }

    .dashboard-logo[b-3zc29u6zlk] {
        display: none;
    }

    .dashboard-title[b-3zc29u6zlk] {
        font-size: var(--text-2xl);
    }
}
/* /Pages/Sale/PaymentDialog.razor.rz.scp.css */
/* ── Root ─────────────────────────────────────────────────────── */
.cobro-root[b-bjhrit1dsd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: inherit;
    background: #fff;
}

/* ── Sale chip (dentro de totales) ───────────────────────────── */
.cobro-sale-chip[b-bjhrit1dsd] {
    font-size: 11px;
    font-weight: 600;
    color: #525252;
    background: #f3f4f6;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Body ────────────────────────────────────────────────────── */
.cobro-body[b-bjhrit1dsd] {
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    overflow-y: auto;
}

/* ── Totales ─────────────────────────────────────────────────── */
.cobro-totals[b-bjhrit1dsd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cobro-totals-label[b-bjhrit1dsd] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a3a3a3;
    margin-bottom: 2px;
}

.cobro-totals-main[b-bjhrit1dsd] {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
}

.cobro-customer[b-bjhrit1dsd] {
    font-size: 12px;
    color: #737373;
    margin-top: 3px;
}

.cobro-pending-block[b-bjhrit1dsd] {
    text-align: right;
}

.cobro-pending-label[b-bjhrit1dsd] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a3a3a3;
    margin-bottom: 2px;
}

.cobro-pending-value[b-bjhrit1dsd] {
    font-size: 22px;
    font-weight: 800;
    color: #c9963a;
    line-height: 1.1;
}

.cobro-paid-detail[b-bjhrit1dsd] {
    font-size: 11px;
    color: #a3a3a3;
    margin-top: 2px;
}

/* ── Barra de progreso ───────────────────────────────────────── */
.cobro-progress[b-bjhrit1dsd] {
    height: 6px;
    border-radius: 99px;
    background: #f3f4f6;
    overflow: hidden;
}

.cobro-progress-fill[b-bjhrit1dsd] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #c9963a, #e8b86d);
    transition: width 300ms ease;
}

/* ── Sección label ───────────────────────────────────────────── */
.cobro-section-label[b-bjhrit1dsd] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a3a3a3;
}

/* ── Métodos de pago ─────────────────────────────────────────── */
.cobro-methods[b-bjhrit1dsd] {
    display: flex;
    gap: 0.625rem;
}

.cobro-method-btn[b-bjhrit1dsd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    border: 2px solid #e5e5e5;
    background: #fff;
    cursor: pointer;
    color: #525252;
    transition: border-color 140ms, background 140ms, color 140ms;
}

.cobro-method-btn:hover[b-bjhrit1dsd] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

.cobro-method-btn--active[b-bjhrit1dsd] {
    border-color: #c9963a !important;
    background: #fdf6e7 !important;
    color: #9a6f20 !important;
}

.cobro-method-icon[b-bjhrit1dsd] {
    font-size: 26px;
}

.cobro-method-label[b-bjhrit1dsd] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Importe entregado ───────────────────────────────────────── */
.cobro-amount-label[b-bjhrit1dsd] {
    font-size: 12px;
    font-weight: 600;
    color: #404040;
    margin-bottom: -0.25rem;
}

.cobro-amount-row[b-bjhrit1dsd] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.cobro-amount-input-wrap[b-bjhrit1dsd] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    padding: 0.5rem 0.875rem;
    background: #fff;
    flex: 1;
    transition: border-color 140ms;
}

.cobro-amount-input-wrap:focus-within[b-bjhrit1dsd] {
    border-color: #c9963a;
}

.cobro-currency-sign[b-bjhrit1dsd] {
    font-size: 15px;
    color: #737373;
    font-weight: 600;
}

.cobro-amount-input[b-bjhrit1dsd] {
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    width: 100%;
    background: transparent;
}

.cobro-quick-btns[b-bjhrit1dsd] {
    display: flex;
    gap: 0.375rem;
}

.cobro-quick-btn[b-bjhrit1dsd] {
    font-size: 12px;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border: 1.5px solid #e5e5e5;
    background: #fff;
    cursor: pointer;
    color: #525252;
    white-space: nowrap;
    transition: border-color 140ms, background 140ms;
}

.cobro-quick-btn:hover[b-bjhrit1dsd] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

/* ── Cambio ──────────────────────────────────────────────────── */
.cobro-change-row[b-bjhrit1dsd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    border-radius: 10px;
    padding: 0.625rem 1rem;
    font-size: 13px;
    font-weight: 600;
    color: #166534;
}

.cobro-change-icon[b-bjhrit1dsd] {
    font-size: 18px;
    color: #16a34a;
}

.cobro-change-value[b-bjhrit1dsd] {
    margin-left: auto;
    font-size: 16px;
    font-weight: 800;
    color: #16a34a;
}

/* ── Referencia ──────────────────────────────────────────────── */
.cobro-reference-input[b-bjhrit1dsd] {
    width: 100%;
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    padding: 0.5rem 0.875rem;
    font-size: 13px;
    color: #1a1a1a;
    outline: none;
    transition: border-color 140ms;
    box-sizing: border-box;
}

.cobro-reference-input:focus[b-bjhrit1dsd] {
    border-color: #c9963a;
}

/* ── Pagos en curso ──────────────────────────────────────────── */
.cobro-session[b-bjhrit1dsd] {
    border: 1.5px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}

.cobro-session-header[b-bjhrit1dsd] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    background: #fafafa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #737373;
    border-bottom: 1px solid #f0f0f0;
}

.cobro-session-item[b-bjhrit1dsd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid #f5f5f5;
}

.cobro-session-item:last-child[b-bjhrit1dsd] {
    border-bottom: none;
}

.cobro-session-icon[b-bjhrit1dsd] {
    font-size: 18px;
    color: #737373;
}

.cobro-session-info[b-bjhrit1dsd] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cobro-session-method[b-bjhrit1dsd] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.cobro-session-ref[b-bjhrit1dsd] {
    font-size: 11px;
    color: #a3a3a3;
}

.cobro-session-amount[b-bjhrit1dsd] {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.cobro-session-remove[b-bjhrit1dsd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #a3a3a3;
    line-height: 1;
    transition: background 140ms, color 140ms;
}

.cobro-session-remove:hover[b-bjhrit1dsd] {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Footer ──────────────────────────────────────────────────── */
.cobro-footer[b-bjhrit1dsd] {
    display: flex;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem 1rem;
    border-top: 1px solid #f0f0f0;
}

.cobro-cancel-btn[b-bjhrit1dsd] {
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    border: 1.5px solid #e5e5e5;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #525252;
    cursor: pointer;
    transition: background 140ms, border-color 140ms;
}

.cobro-cancel-btn:hover[b-bjhrit1dsd] {
    background: #f5f5f5;
}

.cobro-partial-btn[b-bjhrit1dsd] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.6rem 1.125rem;
    border-radius: 10px;
    border: 1.5px solid #e5e5e5;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #525252;
    cursor: pointer;
    transition: background 140ms, border-color 140ms;
}

.cobro-partial-btn:hover[b-bjhrit1dsd] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

.cobro-confirm-btn[b-bjhrit1dsd] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    border: none;
    background: #c9963a;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background 140ms;
}

.cobro-confirm-btn:hover:not(:disabled)[b-bjhrit1dsd] {
    background: #b07d2a;
}

.cobro-confirm-btn:disabled[b-bjhrit1dsd] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* /Pages/Sale/PaymentsDialog.razor.rz.scp.css */
.pr-root[b-3226gznzs1] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.25rem 1.5rem 1.25rem;
    background: #fff;
}

/* ── Badge de número de venta ── */
.pr-salenumber-row[b-3226gznzs1] {
    display: flex;
    align-items: center;
    margin-bottom: 1.375rem;
}

.pr-salenumber-badge[b-3226gznzs1] {
    font-size: 12px;
    font-weight: 600;
    color: #525252;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 3px 10px;
    letter-spacing: 0.03em;
}

/* ── Resumen (4 stats) ── */
.pr-summary[b-3226gznzs1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pr-stat[b-3226gznzs1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pr-stat-label[b-3226gznzs1] {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pr-stat-value[b-3226gznzs1] {
    font-size: 22px;
    font-weight: 700;
    color: #171717;
    line-height: 1;
}

.pr-stat-value--paid[b-3226gznzs1] {
    color: #059669;
}

.pr-estado-badge[b-3226gznzs1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    width: fit-content;
    line-height: 1;
}

.pr-estado-badge--paid[b-3226gznzs1] {
    background: #d1fae5;
    color: #065f46;
}

.pr-estado-badge--pending[b-3226gznzs1] {
    background: #fee2e2;
    color: #991b1b;
}


.pr-estado-icon[b-3226gznzs1] {
    font-size: 13px;
}

/* ── Divisores ── */
.pr-divider[b-3226gznzs1] {
    height: 1px;
    background: #e5e7eb;
    margin-bottom: 1rem;
}

.pr-divider--footer[b-3226gznzs1] {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ── Grid ── */
.pr-grid[b-3226gznzs1] {
    margin: 0 -1.5rem;
}

/* ── Celda de método de pago ── */
.pr-method-cell[b-3226gznzs1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.pr-method-icon[b-3226gznzs1] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pr-method-icon .material-icons[b-3226gznzs1] {
    font-size: 16px;
}

.pr-method-icon--cash[b-3226gznzs1]         { background: #d1fae5; color: #065f46; }
.pr-method-icon--card[b-3226gznzs1]         { background: #dbeafe; color: #1d4ed8; }
.pr-method-icon--banktransfer[b-3226gznzs1] { background: #ede9fe; color: #6d28d9; }
.pr-method-icon--check[b-3226gznzs1]        { background: #fef3c7; color: #d97706; }
.pr-method-icon--other[b-3226gznzs1]        { background: #f3f4f6; color: #6b7280; }

/* ── Footer ── */
.pr-footer[b-3226gznzs1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pr-footer-info[b-3226gznzs1] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #737373;
}

.pr-footer-info-icon[b-3226gznzs1] {
    font-size: 15px;
    opacity: 0.55;
}

.pr-footer-actions[b-3226gznzs1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Botón Añadir pago (ámbar) */
.pr-add-btn[b-3226gznzs1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9px;
    border: none;
    background: #c9963a;
    color: #fff;
    cursor: pointer;
    transition: background 120ms, transform 80ms;
    white-space: nowrap;
    line-height: 1;
}

.pr-add-btn:hover[b-3226gznzs1]  { background: #b07e28; }
.pr-add-btn:active[b-3226gznzs1] { transform: translateY(1px); }
.pr-add-btn:focus[b-3226gznzs1]  { outline: none; }
.pr-add-btn:disabled[b-3226gznzs1] { opacity: 0.6; cursor: not-allowed; }

.pr-add-btn .material-icons[b-3226gznzs1] {
    font-size: 16px;
}

/* Botón Imprimir recibo */
.pr-print-btn[b-3226gznzs1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #404040;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, color 120ms;
    white-space: nowrap;
    line-height: 1;
}

.pr-print-btn:hover[b-3226gznzs1] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

.pr-print-btn:focus[b-3226gznzs1]  { outline: none; }

.pr-print-btn .material-icons[b-3226gznzs1] {
    font-size: 15px;
}

/* ── Responsive ── */
@media (max-width: 540px) {
    .pr-summary[b-3226gznzs1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Aviso solo lectura ────────────────────────────────────────────── */
.pr-readonly-notice[b-3226gznzs1] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #a3a3a3;
}
/* /Pages/Sale/RefundDialog.razor.rz.scp.css */
/* ── Root ──────────────────────────────────────────────────────────── */
.dev-root[b-nt9r3zk8ap] {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
}

/* ── Summary bar ───────────────────────────────────────────────────── */
.dev-summary[b-nt9r3zk8ap] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    background: var(--brand-50, #fdf8ee);
    border: 1px solid var(--brand-200, #f0d99a);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.dev-summary-item[b-nt9r3zk8ap] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dev-summary-label[b-nt9r3zk8ap] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #a3a3a3;
    text-transform: uppercase;
}

.dev-summary-value[b-nt9r3zk8ap] {
    font-size: 15px;
    font-weight: 600;
    color: #171717;
}

.dev-summary-value--refund[b-nt9r3zk8ap] {
    color: #c9963a;
    font-size: 17px;
}

/* ── Lines header ──────────────────────────────────────────────────── */
.dev-lines-header[b-nt9r3zk8ap] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.dev-lines-header > span:first-child[b-nt9r3zk8ap] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #737373;
    text-transform: uppercase;
}

.dev-lines-hint[b-nt9r3zk8ap] {
    font-size: 12px;
    color: #a3a3a3;
}

/* ── Lines list ────────────────────────────────────────────────────── */
.dev-lines[b-nt9r3zk8ap] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.dev-line[b-nt9r3zk8ap] {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    transition: background 0.15s, border-color 0.15s;
}

.dev-line--selected[b-nt9r3zk8ap] {
    background: #fff8ec;
    border-color: var(--brand-300, #e8c56e);
}

.dev-line-check input[type="checkbox"][b-nt9r3zk8ap] {
    width: 16px;
    height: 16px;
    accent-color: #c9963a;
    cursor: pointer;
}

.dev-line-info[b-nt9r3zk8ap] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dev-line-name[b-nt9r3zk8ap] {
    font-size: 13px;
    font-weight: 500;
    color: #171717;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dev-line-price[b-nt9r3zk8ap] {
    font-size: 11px;
    color: #a3a3a3;
}

/* ── Qty input ─────────────────────────────────────────────────────── */
.dev-line-qty-wrap[b-nt9r3zk8ap] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dev-line-qty[b-nt9r3zk8ap] {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
}

.dev-line-qty:focus[b-nt9r3zk8ap] {
    border-color: #c9963a;
}

.dev-line-qty:disabled[b-nt9r3zk8ap] {
    background: #f5f5f5;
    color: #a3a3a3;
    cursor: not-allowed;
}

.dev-line-qty-max[b-nt9r3zk8ap] {
    font-size: 11px;
    color: #a3a3a3;
    white-space: nowrap;
}

/* ── Line total ────────────────────────────────────────────────────── */
.dev-line-total[b-nt9r3zk8ap] {
    font-size: 13px;
    font-weight: 500;
    color: #a3a3a3;
    min-width: 70px;
    text-align: right;
}

.dev-line-total--active[b-nt9r3zk8ap] {
    color: #c9963a;
    font-weight: 700;
}

/* ── Method selector ───────────────────────────────────────────────── */
.dev-method-section[b-nt9r3zk8ap] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dev-method-label[b-nt9r3zk8ap] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #737373;
    text-transform: uppercase;
}

.dev-methods[b-nt9r3zk8ap] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dev-method-btn[b-nt9r3zk8ap] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
    font-size: 13px;
    font-weight: 500;
    color: #525252;
    cursor: pointer;
    transition: all 0.15s;
}

.dev-method-btn:hover[b-nt9r3zk8ap] {
    border-color: #c9963a;
    color: #c9963a;
}

.dev-method-btn--active[b-nt9r3zk8ap] {
    border-color: #c9963a;
    background: #fff8ec;
    color: #a07020;
    font-weight: 600;
}

.dev-method-icon[b-nt9r3zk8ap] {
    font-size: 18px;
}

/* ── Error ─────────────────────────────────────────────────────────── */
.dev-error[b-nt9r3zk8ap] {
    color: #dc2626;
    font-size: 13px;
    margin: 0;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.dev-footer[b-nt9r3zk8ap] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
/* /Pages/Sale/Sale.razor.rz.scp.css */
/* ══════════════════════════════════════════
   Contenedor raíz
   ══════════════════════════════════════════ */
.caja-root[b-68zzfuezhe] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height, 64px));
    padding: 1.25rem 1.5rem 0;
    gap: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* En móvil: altura natural y scroll libre */
@media (max-width: 767.98px) {
    .caja-root[b-68zzfuezhe] {
        height: auto;
        overflow: visible;
        padding: 0.75rem 0.75rem 1rem;
    }
}

/* ══════════════════════════════════════════
   Cabecera
   ══════════════════════════════════════════ */
.caja-header[b-68zzfuezhe] {
    flex-shrink: 0;
}

.caja-title[b-68zzfuezhe] {
    font-size: 22px;
    font-weight: 700;
    color: var(--neutral-900, #1c1a17);
    margin: 0;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .caja-title[b-68zzfuezhe] {
        font-size: 18px;
    }
}

.caja-subtitle[b-68zzfuezhe] {
    font-size: 13px;
    color: var(--neutral-500, #737373);
    margin: 2px 0 0;
}

.caja-header-actions[b-68zzfuezhe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ══════════════════════════════════════════
   Botones de acción
   ══════════════════════════════════════════ */
.caja-action-btn[b-68zzfuezhe] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid #e5e5e5;
    background: #fff;
    color: #525252;
    transition: border-color 120ms, background 120ms, color 120ms;
    white-space: nowrap;
}

/* En móvil solo icono: menos padding */
@media (max-width: 575.98px) {
    .caja-action-btn[b-68zzfuezhe] {
        padding: 0.45rem 0.6rem;
    }
}

.caja-action-btn:hover[b-68zzfuezhe] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

.caja-action-btn--primary[b-68zzfuezhe] {
    background: #c9963a;
    border-color: #c9963a;
    color: #fff;
}

.caja-action-btn--primary:hover[b-68zzfuezhe] {
    background: #b8892f;
    border-color: #b8892f;
    color: #fff;
}

/* ══════════════════════════════════════════
   Tabs de ventas  (layout → ver Common.css)
   ══════════════════════════════════════════ */

/* En móvil las tabs no necesitan altura fija */
@media (max-width: 767.98px) {
    .caja-tabs[b-68zzfuezhe] {
        flex: none !important;
        height: auto !important;
    }
}

/* ══════════════════════════════════════════
   Botón cerrar tab
   ══════════════════════════════════════════ */
[b-68zzfuezhe] .tab-close-btn {
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    color: #000;
    opacity: 0.5;
    vertical-align: middle;
}

[b-68zzfuezhe] .tab-close-btn:hover {
    opacity: 1;
}
/* /Pages/Sale/SaleComponent.razor.rz.scp.css */
/* ══════════════════════════════════════════
   Contenedor raíz y fila Bootstrap
   ══════════════════════════════════════════ */
.venta-container[b-080t8ibgth] {
    height: 100%;
    overflow: hidden;
    padding-bottom: 1.25rem;
}

.venta-row[b-080t8ibgth] {
    height: 100%;
}

/* En md+ la fila no se wrappea, usa gap controlado y flex-grow para el reparto */
@media (min-width: 768px) {
    .venta-row[b-080t8ibgth] {
        flex-wrap: nowrap;
        gap: 1.5rem;
    }

    /* Anular el ancho fijo de Bootstrap (41.66% / 58.33%) para que el gap
       se descuente del espacio disponible antes de repartirlo. */
    .venta-row > [class*="col-"][b-080t8ibgth] {
        width: auto !important;
        flex-basis: 0 !important;
        height: 100%;
        min-height: 0;
    }

    /* Proporción 5 : 7 equivalente a col-md-5 / col-md-7 */
    .venta-row > :first-child[b-080t8ibgth]  { flex-grow: 5; }
    .venta-row > :last-child[b-080t8ibgth]   { flex-grow: 7; }
}

/* En móvil los paneles se apilan con altura natural */
@media (max-width: 767.98px) {
    .venta-container[b-080t8ibgth] {
        height: auto;
        overflow: visible;
        padding-bottom: 1rem;
    }

    .venta-row[b-080t8ibgth] {
        height: auto;
    }

    .items-list[b-080t8ibgth] {
        max-height: 40vh;
    }

    .order-lines[b-080t8ibgth] {
        max-height: 40vh;
    }
}

/* ══════════════════════════════════════════
   Panel (columna de contenido)
   ══════════════════════════════════════════ */
.panel[b-080t8ibgth] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-height: 0;
    overflow: hidden;
}

/* Estado bloqueado: fondo levemente grisáceo + borde más apagado */
.panel--locked[b-080t8ibgth] {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

/* ══════════════════════════════════════════
   Cabecera de sección
   ══════════════════════════════════════════ */
.panel-section-title[b-080t8ibgth] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--neutral-500, #737373);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Pills de categoría
   ══════════════════════════════════════════ */
.category-pills[b-080t8ibgth] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex-shrink: 0;
}

.category-pill[b-080t8ibgth] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    background: #fff;
    color: var(--neutral-600, #525252);
    transition: border-color 120ms, background 120ms, color 120ms;
    white-space: nowrap;
}

.category-pill:hover[b-080t8ibgth] {
    border-color: #c9963a;
    color: #9a6f20;
}

.category-pill--active[b-080t8ibgth] {
    background: #c9963a;
    border-color: #c9963a;
    color: #fff;
}

.category-pill--active:hover[b-080t8ibgth] {
    background: #b8892f;
    border-color: #b8892f;
}

/* ══════════════════════════════════════════
   Buscador compartido
   ══════════════════════════════════════════ */
.search-wrap[b-080t8ibgth] {
    position: relative;
    flex-shrink: 0;
}

.search-icon[b-080t8ibgth] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--neutral-400, #a3a3a3);
    pointer-events: none;
}

.search-input[b-080t8ibgth] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    border-radius: 8px;
    font-size: 13px;
    background: var(--neutral-50, #fafafa);
    color: var(--neutral-800, #262626);
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}

.search-input:focus[b-080t8ibgth] {
    border-color: #c9963a;
    box-shadow: 0 0 0 3px rgba(201, 150, 58, 0.13);
    background: #fff;
}

/* Input deshabilitado — aspecto claramente no editable */
.search-input:disabled[b-080t8ibgth],
.search-input--locked[b-080t8ibgth] {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════
   Lista de artículos del catálogo
   ══════════════════════════════════════════ */
.items-list[b-080t8ibgth] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.catalog-item[b-080t8ibgth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 120ms, background 120ms, transform 100ms, box-shadow 120ms;
    user-select: none;
    flex-shrink: 0;
}

.catalog-item:hover[b-080t8ibgth] {
    border-color: #c9963a;
    background: #fdf6e7;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(201, 150, 58, 0.12);
}

.catalog-item:active[b-080t8ibgth] {
    transform: translateY(0);
}

/* Catálogo bloqueado: gris, sin hover, sin cursor de puntero */
.catalog-item--disabled[b-080t8ibgth] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(60%);
}

.catalog-item-info[b-080t8ibgth] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.catalog-item-name[b-080t8ibgth] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-800, #262626);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-item-cat[b-080t8ibgth] {
    font-size: 11px;
    color: var(--neutral-500, #737373);
}

.catalog-item-price[b-080t8ibgth] {
    font-size: 13px;
    font-weight: 600;
    color: #9a6f20;
    white-space: nowrap;
    flex-shrink: 0;
}

.empty-catalog[b-080t8ibgth] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--neutral-400, #a3a3a3);
    font-size: 13px;
    text-align: center;
    padding: 2rem 1rem;
}

.item-skeleton[b-080t8ibgth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--neutral-100, #f5f5f5);
    border-radius: 8px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Selector de cliente
   ══════════════════════════════════════════ */
.customer-section[b-080t8ibgth] {
    position: relative;
    flex-shrink: 0;
}

.customer-search-wrap[b-080t8ibgth] {
    position: relative;
    display: flex;
    align-items: center;
}

.customer-actions[b-080t8ibgth] {
    position: absolute;
    right: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.customer-action-btn[b-080t8ibgth] {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--neutral-400, #a3a3a3);
    padding: 2px;
    border-radius: 4px;
    transition: color 120ms, background 120ms;
}

.customer-action-btn:hover[b-080t8ibgth] {
    color: var(--neutral-600, #525252);
    background: var(--neutral-100, #f5f5f5);
}

/* Nombre de cliente clicable (modo bloqueado) */
.customer-name-link[b-080t8ibgth] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-800, #262626);
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 120ms, text-decoration 120ms;
    line-height: calc(1.5rem + 2px); /* match input height */
}

.customer-name-link:hover[b-080t8ibgth] {
    color: #c9963a;
    text-decoration: underline;
}

/* Botón "+ Nuevo cliente" */
.customer-new-btn[b-080t8ibgth] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
    transition: color 120ms;
    line-height: 1;
}

.customer-new-btn:hover[b-080t8ibgth] {
    color: #c9963a;
}

.customer-new-btn:focus[b-080t8ibgth] {
    outline: none;
}

.customer-dropdown[b-080t8ibgth] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 200;
    overflow: hidden;
}

.customer-option[b-080t8ibgth] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 120ms;
}

.customer-option:hover[b-080t8ibgth] {
    background: var(--neutral-50, #fafafa);
}

.customer-option-icon[b-080t8ibgth] {
    font-size: 20px;
    color: var(--neutral-400, #a3a3a3);
    flex-shrink: 0;
}

.customer-option-name[b-080t8ibgth] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-800, #262626);
}

.customer-option-sub[b-080t8ibgth] {
    font-size: 11px;
    color: var(--neutral-500, #737373);
}

/* ══════════════════════════════════════════
   Separador
   ══════════════════════════════════════════ */
.section-divider[b-080t8ibgth] {
    height: 1px;
    background: var(--neutral-100, #f5f5f5);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Ticket header con indicador de estado
   ══════════════════════════════════════════ */
.ticket-header[b-080t8ibgth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Aviso de solo lectura cuando está bloqueado */
.locked-notice[b-080t8ibgth] {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
    margin-left: auto;
}

/* Icono de sync girando */
.sync-spin[b-080t8ibgth] {
    font-size: 13px;
    color: #c9963a;
    animation: spin-b-080t8ibgth 0.9s linear infinite;
    display: inline-block;
    line-height: 1;
}

/* Punto verde de "guardado" */
.saved-dot[b-080t8ibgth] {
    font-size: 8px;
    color: #2d9e6b;
    line-height: 1;
}

/* ══════════════════════════════════════════
   Líneas del ticket
   ══════════════════════════════════════════ */
.order-lines[b-080t8ibgth] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Zona de líneas bloqueada: fondo gris, sin scroll de acción */
.order-lines--locked[b-080t8ibgth] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 0.25rem;
}

/* Tarjeta de línea */
.order-line[b-080t8ibgth] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--neutral-100, #f5f5f5);
    border-radius: 8px;
    background: #fff;
    flex-shrink: 0;
}

/* Línea bloqueada: fondo apagado, texto más tenue */
.order-line--locked[b-080t8ibgth] {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.order-line--locked .order-line-name[b-080t8ibgth] {
    color: #6b7280;
}

.order-line--locked .order-line-total[b-080t8ibgth] {
    color: #6b7280;
}

/* Fila principal: info / cantidad / total / eliminar */
.order-line-main[b-080t8ibgth] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.75rem;
}

.order-line-info[b-080t8ibgth] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.order-line-name[b-080t8ibgth] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-800, #262626);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-line-tax[b-080t8ibgth] {
    font-size: 11px;
    color: var(--neutral-400, #a3a3a3);
}

.order-line-qty[b-080t8ibgth] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.qty-btn[b-080t8ibgth] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-600, #525252);
    transition: border-color 120ms, background 120ms, color 120ms;
}

.qty-btn:hover:not(:disabled)[b-080t8ibgth] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

/* Botones deshabilitados (estado bloqueado) */
.qty-btn:disabled[b-080t8ibgth],
.remove-line-btn:disabled[b-080t8ibgth],
.discount-toggle:disabled[b-080t8ibgth],
.disc-type-btn:disabled[b-080t8ibgth] {
    opacity: 0.35;
    cursor: not-allowed;
}

.qty-value[b-080t8ibgth] {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-800, #262626);
}

.order-line-total[b-080t8ibgth] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-800, #262626);
    min-width: 64px;
    text-align: right;
}

.remove-line-btn[b-080t8ibgth] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--neutral-300, #d4d4d4);
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 120ms;
}

.remove-line-btn:hover:not(:disabled)[b-080t8ibgth] {
    color: #d94f4f;
}

/* ── Fila de descuento ── */
.order-line-discount[b-080t8ibgth] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-left: 0.1rem;
}

.discount-toggle[b-080t8ibgth] {
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    background: #fff;
    color: var(--neutral-400, #a3a3a3);
    letter-spacing: 0.04em;
    transition: border-color 120ms, background 120ms, color 120ms;
    white-space: nowrap;
}

.discount-toggle:hover:not(:disabled)[b-080t8ibgth] {
    border-color: #c9963a;
    color: #9a6f20;
}

.discount-toggle--active[b-080t8ibgth] {
    background: #fdf6e7;
    border-color: #c9963a;
    color: #9a6f20;
}

.disc-type-btn[b-080t8ibgth] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-500, #737373);
    transition: border-color 120ms, background 120ms, color 120ms;
    flex-shrink: 0;
}

.disc-type-btn:hover:not(:disabled)[b-080t8ibgth] {
    border-color: #c9963a;
    color: #9a6f20;
}

.disc-type-btn--active[b-080t8ibgth] {
    background: #c9963a;
    border-color: #c9963a;
    color: #fff;
}

.discount-input[b-080t8ibgth] {
    width: 64px;
    padding: 0.15rem 0.4rem;
    border: 1.5px solid var(--neutral-200, #e5e5e5);
    border-radius: 6px;
    font-size: 12px;
    color: var(--neutral-800, #262626);
    background: var(--neutral-50, #fafafa);
    outline: none;
    transition: border-color 120ms;
    flex-shrink: 0;
}

.discount-input:focus[b-080t8ibgth] {
    border-color: #c9963a;
    background: #fff;
}

.discount-input:disabled[b-080t8ibgth] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

.discount-amount-label[b-080t8ibgth] {
    font-size: 11px;
    font-weight: 600;
    color: #d94f4f;
    white-space: nowrap;
    margin-left: 0.1rem;
}

.empty-order[b-080t8ibgth] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--neutral-400, #a3a3a3);
    font-size: 13px;
    text-align: center;
    padding: 2rem 1rem;
}

.empty-order-icon[b-080t8ibgth] {
    font-size: 42px;
    opacity: 0.3;
}

/* ══════════════════════════════════════════
   Resumen y botón de cobro
   ══════════════════════════════════════════ */
.order-summary[b-080t8ibgth] {
    border-top: 1.5px solid var(--neutral-100, #f5f5f5);
    padding-top: 0.75rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-row[b-080t8ibgth] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--neutral-600, #525252);
    padding: 0.1rem 0;
}

.summary-row--tax[b-080t8ibgth] {
    font-size: 12px;
    color: var(--neutral-500, #737373);
}

.summary-row--discount[b-080t8ibgth] {
    font-size: 12px;
    color: #d94f4f;
}

.summary-row--total[b-080t8ibgth] {
    font-size: 19px;
    font-weight: 700;
    color: var(--neutral-900, #171717);
    padding: 0.25rem 0 0.5rem;
}

/* Botón principal de cobro */
.cobrar-btn[b-080t8ibgth] {
    padding: 0.75rem 1rem;
    background: #c9963a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms, opacity 120ms;
    letter-spacing: 0.02em;
}

.cobrar-btn:hover:not(:disabled)[b-080t8ibgth] {
    background: #b8892f;
}

.cobrar-btn:disabled[b-080t8ibgth] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Botón de desbloquear: gris neutro, discreta */
.cobrar-btn--unlock[b-080t8ibgth] {
    background: #e5e7eb;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cobrar-btn--unlock:hover:not(:disabled)[b-080t8ibgth] {
    background: #d1d5db;
    color: #374151;
    border-color: #9ca3af;
}

/* ══════════════════════════════════════════
   Badge de estado del ticket
   ══════════════════════════════════════════ */
.sale-status-badge[b-080t8ibgth] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Barra de info del ticket
   ══════════════════════════════════════════ */
.ticket-info-bar[b-080t8ibgth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--neutral-50, #fafafa);
    border: 1.5px solid var(--neutral-100, #f5f5f5);
    border-radius: 10px;
    flex-shrink: 0;
}

.ticket-info-item[b-080t8ibgth] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ticket-info-icon[b-080t8ibgth] {
    font-size: 16px;
    color: var(--neutral-400, #a3a3a3);
}

.ticket-info-label[b-080t8ibgth] {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-400, #a3a3a3);
    line-height: 1.1;
}

.ticket-info-value[b-080t8ibgth] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-700, #404040);
    line-height: 1.2;
}

.ticket-info-value--number[b-080t8ibgth] {
    font-weight: 700;
    color: #c9963a;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   Animación de spinner
   ══════════════════════════════════════════ */
@keyframes spin-b-080t8ibgth {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.spin[b-080t8ibgth] {
    display: inline-block;
    animation: spin-b-080t8ibgth 0.8s linear infinite;
}
/* /Pages/Sale/SearchSaleComponent.razor.rz.scp.css */
.search-sale-root[b-mp3kpqmv99] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 0.25rem 0;
}

/* Buscador */
.ss-search-wrap[b-mp3kpqmv99] {
    position: relative;
    flex-shrink: 0;
}

.ss-search-icon[b-mp3kpqmv99] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #a3a3a3;
    pointer-events: none;
}

.ss-search-input[b-mp3kpqmv99] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
    background: #fafafa;
    color: #262626;
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}

.ss-search-input:focus[b-mp3kpqmv99] {
    border-color: #c9963a;
    box-shadow: 0 0 0 3px rgba(201, 150, 58, 0.13);
    background: #fff;
}

/* ── Barra de filtros ── */
.ss-filters[b-mp3kpqmv99] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ss-filter-item[b-mp3kpqmv99] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ss-filter-label[b-mp3kpqmv99] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9ca3af;
}

.ss-filter-select[b-mp3kpqmv99],
.ss-filter-date[b-mp3kpqmv99] {
    height: 34px;
    padding: 0 0.6rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
    background: #fafafa;
    color: #262626;
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
    cursor: pointer;
}

.ss-filter-select[b-mp3kpqmv99] {
    min-width: 140px;
    appearance: auto;
}

.ss-filter-date[b-mp3kpqmv99] {
    min-width: 138px;
}

.ss-filter-select:focus[b-mp3kpqmv99],
.ss-filter-date:focus[b-mp3kpqmv99] {
    border-color: #c9963a;
    box-shadow: 0 0 0 3px rgba(201, 150, 58, 0.13);
    background: #fff;
}

/* Botón limpiar filtros */
.ss-clear-btn[b-mp3kpqmv99] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    height: 34px;
    padding: 0 0.75rem;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #737373;
    cursor: pointer;
    transition: border-color 120ms, color 120ms;
    align-self: flex-end;
}

.ss-clear-btn:hover[b-mp3kpqmv99] {
    border-color: #c9963a;
    color: #9a6f20;
}

.ss-clear-btn:focus[b-mp3kpqmv99] {
    outline: none;
}

/* Grid wrapper */
.ss-grid-wrap[b-mp3kpqmv99] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.ss-grid[b-mp3kpqmv99] {
    cursor: pointer;
}

/* Estados vacío / cargando */
.ss-loading[b-mp3kpqmv99],
.ss-empty[b-mp3kpqmv99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #a3a3a3;
    font-size: 13px;
    gap: 0.5rem;
}

.ss-loading-spin[b-mp3kpqmv99] {
    font-size: 28px;
    animation: ss-spin-b-mp3kpqmv99 0.9s linear infinite;
}

@keyframes ss-spin-b-mp3kpqmv99 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pills de estado */
.ss-status[b-mp3kpqmv99] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
}

.ss-status--draft[b-mp3kpqmv99] {
    background: #dbeafe;
    color: #1d4ed8;
}

.ss-status--confirmed[b-mp3kpqmv99] {
    background: #d1fae5;
    color: #065f46;
}

.ss-status--cancelled[b-mp3kpqmv99] {
    background: #fef3c7;
    color: #d97706;
}

.ss-status--pending[b-mp3kpqmv99] {
    background: #fee2e2;
    color: #991b1b;
}

.ss-status--creditnote[b-mp3kpqmv99] {
    background: #ede9fe;
    color: #5b21b6;
}
/* /Pages/ScheduleComponent.razor.rz.scp.css */
/* ================================================================
   ScheduleComponent — Horario semanal y festivos del tenant
   ================================================================ */

.schedule-section[b-qkvny9azse] {
    padding: 0;
}

.schedule-section-header[b-qkvny9azse] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.schedule-section-icon[b-qkvny9azse] {
    font-size: 22px;
    color: var(--rz-primary);
    flex-shrink: 0;
}

.schedule-section-title[b-qkvny9azse] {
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--neutral-900, #111);
    margin: 0 0 2px;
}

.schedule-section-subtitle[b-qkvny9azse] {
    font-size: 12.5px;
    color: var(--neutral-500, #6b7280);
    margin: 0;
}

/* ---- Grid de días ---- */

.schedule-grid[b-qkvny9azse] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.schedule-row[b-qkvny9azse] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--neutral-200, #e5e7eb);
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 0.5rem;
}

.schedule-row:hover[b-qkvny9azse] {
    border-color: var(--rz-primary, #c9963a);
    box-shadow: 0 0 0 2px rgba(201, 150, 58, 0.08);
}

/* Nombre del día */
.schedule-day[b-qkvny9azse] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-day-icon[b-qkvny9azse] {
    font-size: 16px;
    color: var(--neutral-400, #9ca3af);
}

.schedule-day-name[b-qkvny9azse] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--neutral-800, #1f2937);
    text-transform: capitalize;
}

/* Toggle abierto/cerrado */
.schedule-toggle[b-qkvny9azse] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.schedule-toggle-label[b-qkvny9azse] {
    font-size: 12.5px;
    color: var(--neutral-600, #4b5563);
}

/* Campos de hora */
.schedule-times[b-qkvny9azse] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.schedule-times--empty[b-qkvny9azse] {
    flex: 1;
}

.schedule-time-field[b-qkvny9azse] {
    width: 130px;
}

.schedule-time-input[b-qkvny9azse] {
    flex: 1;
    min-width: 75px;
    max-width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--neutral-300, #d1d5db);
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--neutral-800, #1f2937);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.schedule-time-input:focus[b-qkvny9azse] {
    border-color: var(--rz-primary, #c9963a);
    box-shadow: 0 0 0 2px rgba(201, 150, 58, 0.15);
}

.schedule-time-label[b-qkvny9azse] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-400, #9ca3af);
    flex-shrink: 0;
}

.schedule-time-sep[b-qkvny9azse] {
    color: var(--neutral-400, #9ca3af);
    font-size: 13px;
    flex-shrink: 0;
}

.schedule-closed-label[b-qkvny9azse] {
    font-size: 12.5px;
    color: var(--neutral-400, #9ca3af);
    font-style: italic;
}

/* ---- Slots de horario ---- */

.schedule-slots[b-qkvny9azse] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.schedule-slot[b-qkvny9azse] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.schedule-slot-split[b-qkvny9azse] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.schedule-slot-label[b-qkvny9azse] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-400, #9ca3af);
    width: 52px;
    flex-shrink: 0;
}

/* Pills continuo / partido */
.schedule-type-pills[b-qkvny9azse] {
    display: flex;
    gap: 2px;
    background: var(--neutral-100, #f3f4f6);
    border-radius: 6px;
    padding: 2px;
    align-self: center;
    flex-shrink: 0;
}

.schedule-type-pill[b-qkvny9azse] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--neutral-500, #6b7280);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.schedule-type-pill:hover[b-qkvny9azse] {
    color: var(--neutral-800, #1f2937);
}

.schedule-type-pill--active[b-qkvny9azse] {
    background: #fff;
    color: var(--rz-primary, #c9963a);
    box-shadow: 0 1px 3px rgba(0,0,0,.10);
    font-weight: 600;
}

/* ---- Estado vacío (festivos) ---- */

.schedule-empty[b-qkvny9azse] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--neutral-400, #9ca3af);
    text-align: center;
}

.schedule-empty-icon[b-qkvny9azse] {
    font-size: 36px;
}

.schedule-empty p[b-qkvny9azse] {
    font-size: 13.5px;
    margin: 0;
    color: var(--neutral-500, #6b7280);
}

/* ---- Badge festivo nacional (solo lectura) ---- */

.holiday-badge-national[b-qkvny9azse] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    vertical-align: middle;
}
/* /Pages/Shared/PymeButton.razor.rz.scp.css */
/* ── Base ─────────────────────────────────────────────────────── */
.pyme-btn[b-bbuurirg7b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 1.125rem;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
    text-decoration: none;
    outline: none;
}

.pyme-btn:disabled[b-bbuurirg7b] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Icons ───────────────────────────────────────────────────── */
.pyme-btn-icon[b-bbuurirg7b] {
    font-size: 16px;
    line-height: 1;
}

/* ── Spinner ─────────────────────────────────────────────────── */
.pyme-btn-spin[b-bbuurirg7b] {
    font-size: 16px;
    animation: pyme-spin 0.8s linear infinite;
}

@@keyframes pyme-spin {
    from[b-bbuurirg7b] { transform: rotate(0deg); }
    to[b-bbuurirg7b]   { transform: rotate(360deg); }
}

/* ── Variant: primary ────────────────────────────────────────── */
.pyme-btn--primary[b-bbuurirg7b] {
    background: #c9963a;
    border-color: #c9963a;
    color: #fff;
}

.pyme-btn--primary:hover:not(:disabled)[b-bbuurirg7b] {
    background: #b07d28;
    border-color: #b07d28;
}

/* ── Variant: secondary ──────────────────────────────────────── */
.pyme-btn--secondary[b-bbuurirg7b] {
    background: #fff;
    border-color: #e5e5e5;
    color: #525252;
}

.pyme-btn--secondary:hover:not(:disabled)[b-bbuurirg7b] {
    border-color: #c9963a;
    background: #fdf6e7;
    color: #9a6f20;
}

/* ── Variant: danger ─────────────────────────────────────────── */
.pyme-btn--danger[b-bbuurirg7b] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.pyme-btn--danger:hover:not(:disabled)[b-bbuurirg7b] {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* ── Variant: ghost ──────────────────────────────────────────── */
.pyme-btn--ghost[b-bbuurirg7b] {
    background: transparent;
    border-color: #e5e0d6;
    color: #737373;
}

.pyme-btn--ghost:hover:not(:disabled)[b-bbuurirg7b] {
    background: #f5f5f5;
    border-color: #c9963a;
    color: #525252;
}

/* ── Variant: success ────────────────────────────────────────── */
.pyme-btn--success[b-bbuurirg7b] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.pyme-btn--success:hover:not(:disabled)[b-bbuurirg7b] {
    background: #15803d;
    border-color: #15803d;
}

/* ── Variant: ghost-danger ───────────────────────────────────── */
.pyme-btn--ghost-danger[b-bbuurirg7b] {
    background: transparent;
    border-color: #e5e5e5;
    color: #a3a3a3;
}

.pyme-btn--ghost-danger:hover:not(:disabled)[b-bbuurirg7b] {
    background: #fee2e2;
    border-color: #f87171;
    color: #dc2626;
}

/* ── Size: sm (icon-only 32×32) ──────────────────────────────── */
.pyme-btn--sm[b-bbuurirg7b] {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
}

.pyme-btn--sm .pyme-btn-icon[b-bbuurirg7b] {
    font-size: 16px;
}

/* ── Full width ──────────────────────────────────────────────── */
.pyme-btn--full[b-bbuurirg7b] {
    width: 100%;
}
/* /Pages/Shared/PymeColor.razor.rz.scp.css */
/* ── Header ──────────────────────────────────────────────────── */
.pyme-color-header[b-rbqc2ryy9n] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pyme-color-title[b-rbqc2ryy9n] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color, #a3a3a3);
    line-height: 1.3;
}

/* Nombre del color seleccionado — justo debajo del título */
.pyme-color-selected-name[b-rbqc2ryy9n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-text-color, #1c1a17);
    line-height: 1.3;
}

/* ── Swatch row ──────────────────────────────────────────────── */
.pyme-color-swatches[b-rbqc2ryy9n] {
    display: flex;
    flex-wrap: nowrap;      /* never break into a second row */
    gap: 6px;
    align-items: center;
}

/* ── Individual swatch ───────────────────────────────────────── */
.pyme-color-swatch[b-rbqc2ryy9n] {
    flex-shrink: 0;         /* prevent shrinking below 30 px */
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

.pyme-color-swatch:hover:not(:disabled)[b-rbqc2ryy9n] {
    border-color: rgba(0, 0, 0, 0.22);
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pyme-color-swatch:disabled[b-rbqc2ryy9n] {
    cursor: default;
    opacity: 0.55;
}

.pyme-color-swatch--selected[b-rbqc2ryy9n] {
    border-color: rgba(0, 0, 0, 0.38) !important;
    transform: scale(1.1);
}

/* ── Check icon ──────────────────────────────────────────────── */
.pyme-color-check[b-rbqc2ryy9n] {
    font-size: 16px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.45);
}
/* /Pages/Shared/PymeSubHeader.razor.rz.scp.css */
.pyme-subheader[b-n7shkxufn7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pyme-subheader-icon[b-n7shkxufn7] {
    font-size: 22px;
    color: var(--rz-primary);
    flex-shrink: 0;
}

.pyme-subheader-text[b-n7shkxufn7] {
    flex: 1;
    min-width: 0;
}

.pyme-subheader-title[b-n7shkxufn7] {
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--neutral-900, #111);
    margin: 0 0 2px;
}

.pyme-subheader-subtitle[b-n7shkxufn7] {
    font-size: 12.5px;
    color: var(--neutral-500, #6b7280);
    margin: 0;
}

.pyme-subheader-actions[b-n7shkxufn7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* /Pages/Shared/TitlePage.razor.rz.scp.css */
.title-page-root[b-rk5az82kh5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.title-page-actions[b-rk5az82kh5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* /Pages/Signup.razor.rz.scp.css */
/* ================================================================
   SIGNUP — Diseño split-screen (comparte estructura con Login)
   ================================================================ */

.signup-root[b-su2l4lr08a] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--neutral-0);
}

/* ---- Panel izquierdo ---- */

.signup-panel-left[b-su2l4lr08a] {
    flex: 1;
    background-image: url('images/backgroundLogin.jpg');
    background-size: cover;
    background-position: center;
    display: none;
    position: relative;
}

.signup-panel-overlay[b-su2l4lr08a] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(30, 27, 75, .80) 0%,
        rgba(99, 102, 241, .55) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: var(--space-12);
}

.signup-panel-quote[b-su2l4lr08a] {
    color: #fff;
}

.quote-text[b-su2l4lr08a] {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-3);
    max-width: 38ch;
}

.quote-brand[b-su2l4lr08a] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--brand-200);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
}

/* ---- Panel derecho ---- */

.signup-panel-right[b-su2l4lr08a] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    overflow-y: auto;
    background-color: var(--neutral-50);
}

.signup-form-wrapper[b-su2l4lr08a] {
    width: 100%;
    max-width: 440px;
}

/* ---- Logo y títulos ---- */

.signup-logo-area[b-su2l4lr08a] {
    text-align: center;
    margin-bottom: var(--space-8);
}

.signup-logo[b-su2l4lr08a] {
    width: 72px !important;
    height: auto !important;
    margin-bottom: var(--space-5);
}

.signup-title[b-su2l4lr08a] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
}

.signup-subtitle[b-su2l4lr08a] {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin: 0;
}

/* ---- Card del formulario ---- */

.signup-card[b-su2l4lr08a] {
    background: var(--surface-card);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--card-shadow);
}

/* Fila de dos columnas (Nombre + Apellidos) */
.signup-row[b-su2l4lr08a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Campo individual */
.signup-field[b-su2l4lr08a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
}

.signup-field:last-of-type[b-su2l4lr08a] {
    margin-bottom: 0;
}

/* Overrides Radzen */
.signup-card[b-su2l4lr08a]  .rz-textbox,
.signup-card[b-su2l4lr08a]  .rz-password {
    height: 40px;
    font-size: var(--text-base) !important;
    width: 100%;
}

.signup-card[b-su2l4lr08a]  .rz-label,
.signup-card[b-su2l4lr08a]  label {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    color: var(--neutral-700) !important;
}

.signup-card[b-su2l4lr08a]  .rz-message.rz-messages-error {
    font-size: var(--text-xs) !important;
    color: #dc2626 !important;
}

/* Botón submit */
.signup-submit-btn[b-su2l4lr08a] {
    width: 100% !important;
    height: 42px !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    background-color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    border-radius: var(--radius-md) !important;
    margin-top: var(--space-6);
    letter-spacing: .01em;
}

.signup-submit-btn:hover[b-su2l4lr08a] {
    background-color: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}

/* ---- Mensaje de error ---- */

.signup-error[b-su2l4lr08a] {
    margin-top: var(--space-4);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    color: #dc2626;
    font-size: var(--text-sm);
    text-align: center;
}

/* ---- Link a login ---- */

.signup-login-prompt[b-su2l4lr08a] {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-top: var(--space-5);
    margin-bottom: 0;
}

.signup-login-prompt a[b-su2l4lr08a] {
    color: var(--brand-600);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

.signup-login-prompt a:hover[b-su2l4lr08a] {
    color: var(--brand-700);
    text-decoration: underline;
}

/* ---- Footer ---- */

.signup-footer-text[b-su2l4lr08a] {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--neutral-400);
    margin-top: var(--space-6);
    margin-bottom: 0;
}

/* ---- Responsive ---- */

@media (min-width: 1024px) {
    .signup-panel-left[b-su2l4lr08a] {
        display: block;
    }

    .signup-panel-right[b-su2l4lr08a] {
        max-width: 520px;
        flex-shrink: 0;
        background-color: var(--neutral-0);
    }
}

@media (max-width: 480px) {
    .signup-row[b-su2l4lr08a] {
        grid-template-columns: 1fr;
    }
}