/* _content/PeluGes.Web/Views/Sales/Pos.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   TPV — Crystal Design System
   Glass only on the chrome (header bar, cart header).
   Product tiles, cart lines, keypad: SOLID var(--surface).
   Motion discipline: no hover-lift or entrance animation on
   any action repeated hundreds of times per shift.
   ─────────────────────────────────────────────────────────────*/

/* ── Page chrome bar (glass) ────────────────────────────────── */

.pos-chrome[b-lnrjfsh8xr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    margin-bottom: 6px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-highlight);
    color: var(--text);
}

.pos-chrome-title[b-lnrjfsh8xr] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    flex: 1;
}

.pos-chrome-actions[b-lnrjfsh8xr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* La columna izquierda del TPV es estrecha en tablet (~365px a 1024, 768 en vertical con el
   título y 4 botones): el título y las acciones se envuelven en dos líneas en vez de cortarse. */
.pos-chrome[b-lnrjfsh8xr] { flex-wrap: wrap; row-gap: 6px; }
.pos-chrome-title[b-lnrjfsh8xr] { white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.pos-chrome-actions[b-lnrjfsh8xr] { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) {
    .pos-chrome-actions[b-lnrjfsh8xr] { flex: 1 1 100%; }
}

/* ── Screen layout ──────────────────────────────────────────── */

/* NOTA: el LAYOUT del TPV (grid de altura fija + zonas de scroll) vive en app.css (GLOBAL),
   no aquí. Motivo: el CSS scoped (a) no estiliza los elementos internos de MudBlazor sin ::deep
   y (b) se sirve en PeluGes.Web.styles.css, cuyo cacheo no controlamos bien. En global se entrega
   siempre (versionado) y alcanza a todo. Aquí quedan solo estilos visuales (tiles, pills, líneas). */

.pos-grid[b-lnrjfsh8xr]     { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-families[b-lnrjfsh8xr] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .5rem; }

/* ── Product / service tiles (SOLID — no hover lift) ─────────── */

.pos-tile[b-lnrjfsh8xr] {
    min-width: 118px;
    max-width: 160px;
    height: 62px;
    flex: 1 1 118px;
    text-transform: none;
    padding: 4px 6px;
    background: var(--tint-raised) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    /* No hover-lift: these are tapped hundreds of times per shift */
    transition: border-color var(--dur-press) var(--ease-out) !important;
}

.pos-tile:hover[b-lnrjfsh8xr] {
    border-color: var(--border-strong) !important;
}

/* Global :active scale from app.css handles press feedback */

.pos-tile-content[b-lnrjfsh8xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    width: 100%;
}

.pos-tile-name[b-lnrjfsh8xr] {
    font-weight: 600;
    font-size: .8rem;
    color: var(--text);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-tile-price[b-lnrjfsh8xr] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* ── Family filter pills ─────────────────────────────────────── */
/* NOTA: el estilo de las píldoras de familia vive en app.css (GLOBAL). El CSS scoped no
   alcanza el <button> interno del MudButton (no recibe el atributo de scope), así que el
   relleno ciruela del activo y el borde del inactivo no se aplicaban. En global sí. */

/* ── Employee row buttons (no hover-lift) ─────────────────────── */

.pos-emp-btn[b-lnrjfsh8xr] {
    border-radius: var(--radius-md) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    min-width: 80px !important;
    height: 36px !important;
    text-transform: none !important;
    /* Global :active scale is enough; no hover lift here */
    transition: background-color var(--dur-base) var(--ease-standard) !important;
}

/* Punto identificativo del empleado (conserva su color de Agenda sin teñir el botón) */
.pos-emp-dot[b-lnrjfsh8xr] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Sobre el botón seleccionado (relleno ciruela) el punto necesita un anillo claro */
.pos-emp-btn.mud-button-filled .pos-emp-dot[b-lnrjfsh8xr] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1.5px rgba(255, 255, 255, .35);
}

/* ── Cart header (glass chrome) ───────────────────────────────── */

.pos-cart-header[b-lnrjfsh8xr] {
    display: flex;
    align-items: center;
    padding: 8px 10px 6px;
    margin: -8px -8px 8px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom: 1px solid var(--glass-hairline);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* ── Cart line items (SOLID — no hover transitions) ─────────────── */

.pos-cart-line[b-lnrjfsh8xr] {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--glass-border) !important;
    background: var(--tint-raised);
    /* No hover transition: cart lines are touched constantly */
}

.pos-cart-line-lowstock[b-lnrjfsh8xr] {
    border-color: var(--warning) !important;
}

/* Delete button on cart line: subtle, no hover animation */
.pos-cart-line .mud-icon-button[b-lnrjfsh8xr] {
    opacity: .55;
}

.pos-cart-line .mud-icon-button:hover[b-lnrjfsh8xr] {
    opacity: 1;
}

/* ── Totals block ─────────────────────────────────────────────── */

.pos-totals-secondary[b-lnrjfsh8xr] {
    font-size: .82rem;
    color: var(--text-muted);
}

.pos-totals-total[b-lnrjfsh8xr] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── Customer chips ───────────────────────────────────────────── */

.pos-chip-points[b-lnrjfsh8xr] {
    background-color: var(--chip-points-bg) !important;
    color: var(--primary) !important;
    border: 1px solid var(--chip-points-border) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .pos-chip-points[b-lnrjfsh8xr] {
    color: var(--primary-soft) !important;
}

.pos-chip-debt[b-lnrjfsh8xr] {
    background-color: var(--chip-debt-bg) !important;
    color: var(--error) !important;
    border: 1px solid var(--chip-debt-border) !important;
    font-weight: 600 !important;
}

/* ── Vuelta (change) amount ───────────────────────────────────── */

.pos-change-positive[b-lnrjfsh8xr] {
    font-weight: 600;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}

.pos-change-negative[b-lnrjfsh8xr] {
    font-weight: 600;
    color: var(--error);
    font-variant-numeric: tabular-nums;
}

/* ── Pending amount ───────────────────────────────────────────── */

.pos-pending-due[b-lnrjfsh8xr]   { color: var(--error);   font-variant-numeric: tabular-nums; }
.pos-pending-clear[b-lnrjfsh8xr] { color: var(--success); font-variant-numeric: tabular-nums; }

/* ── Tira de ventas abiertas a la vez ──────────────────────────────────────
   Vive bajo la barra del TPV. Se envuelve en varias filas si hay muchas: en un
   TPV táctil es peor un carrusel horizontal que dos filas de fichas. */
.pos-tabs[b-lnrjfsh8xr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pos-tabs-label[b-lnrjfsh8xr] {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 2px;
}
/* _content/PeluGes.Web/Views/Scheduling/Agenda.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   Agenda — Crystal Design System
   Glass on: toolbar (date nav + actions), legend chrome bar.
   Calendar grid, column headers, slot rows, appointment tiles:
   SOLID var(--surface) — crisp, high-contrast, fast on touch.
   Motion discipline: no hover-lift on appointment tiles; they
   are tapped dozens of times per day.
   ─────────────────────────────────────────────────────────────*/

/* ── Toolbar chrome (glass) ─────────────────────────────────── */

.agenda-toolbar[b-ctyupn5d4u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-highlight);
    flex-wrap: wrap;
}

/* ── Day label ───────────────────────────────────────────────── */

.agenda-day-label[b-ctyupn5d4u] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    padding-left: 2px;
}

/* ── Calendar container ──────────────────────────────────────── */

.agenda-container[b-ctyupn5d4u] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Scroll propio en los dos ejes: así la cabecera de empleados (arriba) y las horas (izquierda)
       se quedan fijas al desplazar, en vez de perderse al bajar o al ir a la 5.ª columna. */
    overflow: auto;
    max-height: max(360px, calc(100dvh - 270px));
    overscroll-behavior: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 56px;
    -webkit-overflow-scrolling: touch;
    transition: opacity 120ms ease-out;
    box-shadow: var(--shadow-2), var(--glass-edge);
    background: var(--glass-data);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

/* ── Board layout ────────────────────────────────────────────── */

.agenda-board[b-ctyupn5d4u] {
    display: flex;
    align-items: flex-start;
}

/* ── Time gutter column ──────────────────────────────────────── */

.agenda-timecol[b-ctyupn5d4u] {
    width: 56px;
    flex: 0 0 56px;
    /* Opaco debajo del tinte: es "sticky" y las citas pasan por detrás al desplazar. */
    background: linear-gradient(var(--tint-sunken), var(--tint-sunken)), var(--surface);
    border-right: 1px solid var(--border);
    position: sticky;
    left: 0;
    z-index: 12;
}

.agenda-timebody[b-ctyupn5d4u] { position: relative; }

.agenda-loading[b-ctyupn5d4u] { opacity: .55; pointer-events: none; }

.agenda-timelabel[b-ctyupn5d4u] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: 8px;
    padding-top: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--primary-tint);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.agenda-timelabel span[b-ctyupn5d4u] {
    color: var(--text-muted);
}

/* ── Employee columns ────────────────────────────────────────── */

.agenda-empcol[b-ctyupn5d4u] {
    flex: 1 1 0;
    min-width: 170px; /* mismo valor que ColMinPx en Agenda.razor */
    border-right: 1px solid var(--border);
    scroll-snap-align: start;
}

.agenda-empcol:last-child[b-ctyupn5d4u] {
    border-right: none;
}

/* ── Employee column header (solid, sticky) ─────────────────── */

.agenda-emp-header[b-ctyupn5d4u] {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-bottom: 2px solid var(--border);
    background: linear-gradient(var(--tint-raised), var(--tint-raised)), var(--surface);
    padding: 0 8px;
    position: sticky;
    top: 0;
    z-index: 10;
    /* Color accent bar injected via style="border-top-color:{hex}" in razor */
    border-top: 3px solid transparent;
}

.agenda-emp-name[b-ctyupn5d4u] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

/* Time gutter placeholder header */
.agenda-timecol .agenda-emp-header[b-ctyupn5d4u] {
    border-top: 3px solid transparent;
    background: linear-gradient(var(--tint-sunken), var(--tint-sunken)), var(--surface);
    border-bottom: 2px solid var(--border);
}

/* ── Employee column body ────────────────────────────────────── */

.agenda-empbody[b-ctyupn5d4u] {
    /* Transparente: deja ver el material del contenedor (y el fondo ambiental a traves). */
    position: relative;
    background: transparent;
}

/* ── Clickable slot rows (free time) ────────────────────────── */

.agenda-slot[b-ctyupn5d4u] {
    position: absolute;
    left: 0;
    right: 0;
    cursor: pointer;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    /* No transition: these are background cells, not interactive elements */
}

.agenda-slot.agenda-slot-hour[b-ctyupn5d4u] {
    border-top-color: var(--border-strong);
}

@media (hover: hover) {
    .agenda-slot:hover[b-ctyupn5d4u] {
        background: var(--row-hover);
    }
}

/* ── Appointment tiles ───────────────────────────────────────── */

.agenda-appt[b-ctyupn5d4u] {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: var(--radius-md);
    color: #ffffff;
    padding: 4px 7px 3px;
    overflow: hidden;
    cursor: pointer;
    /* Left accent stripe — same color but darkened via filter */
    border-left: 3px solid rgba(0,0,0,.18);
    box-shadow: var(--shadow-2);
    font-size: 0.75rem;
    line-height: 1.2;
    z-index: 2;
    box-sizing: border-box;
    /* No hover-lift: tapped many times per day.
       Global :active scale from app.css provides press feedback. */
}

/* Cancelled / no-show: dimmed and struck-through */
.agenda-appt-dim[b-ctyupn5d4u] {
    opacity: 0.55;
    text-decoration: line-through;
}

/* ── Appointment tile content ────────────────────────────────── */

.agenda-appt-time[b-ctyupn5d4u] {
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: .01em;
    opacity: 0.88;
    margin-bottom: 1px;
    font-variant-numeric: tabular-nums;
}

.agenda-appt-customer[b-ctyupn5d4u] {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.agenda-appt-service[b-ctyupn5d4u] {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.82;
    margin-top: 1px;
}

/* Cita corta (30 min o menos): hora y cliente en una línea, servicio debajo si cabe. */
.agenda-appt-short[b-ctyupn5d4u] {
    padding: 3px 7px 2px;
}

.agenda-appt-head[b-ctyupn5d4u] {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.agenda-appt-hour[b-ctyupn5d4u] {
    font-weight: 700;
    font-size: 0.68rem;
    opacity: 0.88;
    margin-right: 5px;
    font-variant-numeric: tabular-nums;
}

.agenda-appt-short .agenda-appt-service[b-ctyupn5d4u] { margin-top: 0; }

/* Cita larga: el servicio puede ocupar varias líneas en vez de cortarse con «…». */
.agenda-appt-tall .agenda-appt-service[b-ctyupn5d4u] {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.agenda-appt-tiny .agenda-appt-service[b-ctyupn5d4u] { display: none; }
.agenda-appt-tiny[b-ctyupn5d4u] { padding-top: 1px; padding-bottom: 1px; }

/* ── Línea de "ahora" ────────────────────────────────────────── */

.agenda-now-line[b-ctyupn5d4u] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--error);
    z-index: 4;
    pointer-events: none;
}

.agenda-now-pill[b-ctyupn5d4u] {
    position: absolute;
    right: 3px;
    transform: translateY(-50%);
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    z-index: 5;
    pointer-events: none;
}

/* ── Legend chrome (glass) ───────────────────────────────────── */

.agenda-legend[b-ctyupn5d4u] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* ── Font-size variants ──────────────────────────────────────── */

.agenda-font-sm .agenda-timelabel[b-ctyupn5d4u]     { font-size: 0.60rem; }
.agenda-font-sm .agenda-appt[b-ctyupn5d4u]          { font-size: 0.65rem; }
.agenda-font-sm .agenda-appt-time[b-ctyupn5d4u]     { font-size: 0.58rem; }
.agenda-font-sm .agenda-appt-customer[b-ctyupn5d4u] { font-size: 0.68rem; }
.agenda-font-sm .agenda-emp-name[b-ctyupn5d4u]      { font-size: 0.74rem; }
.agenda-font-sm .agenda-appt-head[b-ctyupn5d4u]     { font-size: 0.68rem; }
.agenda-font-sm .agenda-appt-hour[b-ctyupn5d4u]     { font-size: 0.58rem; }

/* agenda-font-md is the default — no overrides needed */

.agenda-font-lg .agenda-timelabel[b-ctyupn5d4u]     { font-size: 0.85rem; }
.agenda-font-lg .agenda-appt[b-ctyupn5d4u]          { font-size: 0.88rem; }
.agenda-font-lg .agenda-appt-time[b-ctyupn5d4u]     { font-size: 0.80rem; }
.agenda-font-lg .agenda-appt-customer[b-ctyupn5d4u] { font-size: 0.93rem; }
.agenda-font-lg .agenda-emp-name[b-ctyupn5d4u]      { font-size: 1.0rem;  }
.agenda-font-lg .agenda-appt-head[b-ctyupn5d4u]     { font-size: 0.93rem; }
.agenda-font-lg .agenda-appt-hour[b-ctyupn5d4u]     { font-size: 0.80rem; }

/* ── Accessibility: no backdrop-filter fallback ──────────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .agenda-toolbar[b-ctyupn5d4u],
    .agenda-legend[b-ctyupn5d4u] {
        background: var(--surface);
        border-color: var(--border);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .agenda-toolbar[b-ctyupn5d4u],
    .agenda-legend[b-ctyupn5d4u] {
        background: var(--surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Columna de un empleado dado de baja: se ven sus citas, pero no admite citas nuevas. */
.agenda-slot.agenda-slot-off[b-ctyupn5d4u],
.agenda-slot.agenda-slot-off:hover[b-ctyupn5d4u] {
    cursor: default;
    background: repeating-linear-gradient(135deg, transparent 0 8px, var(--tint-sunken) 8px 10px);
}
/* _content/PeluGes.Web/Views/Settings/Settings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Settings.razor.css — Crystal Design System — Scoped styles
   All color references use design tokens from app.css (:root / [data-theme="dark"]).
   No hex values. No inline <style> in .razor (Razor @-escaping avoided here).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page root ─────────────────────────────────────────────────────────── */

.settings-root[b-08ln5oo4ew] {
    max-width: 960px;
    animation: settings-enter-b-08ln5oo4ew var(--dur-overlay) var(--ease-out) both;
}

@keyframes settings-enter-b-08ln5oo4ew {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page header (icon + title + subtitle) ─────────────────────────────── */

.settings-page-header[b-08ln5oo4ew] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.settings-page-header-icon[b-08ln5oo4ew] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.25);
}

.settings-page-title[b-08ln5oo4ew] {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

.settings-page-subtitle[b-08ln5oo4ew] {
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.settings-tabs[b-08ln5oo4ew] {
    background: transparent !important;
}

.settings-tab-panel[b-08ln5oo4ew] {
    padding: 0 !important;
    background: transparent !important;
}

/* ── Glass section cards ────────────────────────────────────────────────── */

.settings-section[b-08ln5oo4ew] {
    padding: 24px 28px;
    margin-bottom: 20px;
}

/* ── Section header (icon + title + description + optional action button) ── */

.settings-section-header[b-08ln5oo4ew] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.settings-section-header-text[b-08ln5oo4ew] {
    flex: 1;
    min-width: 0;
}

.settings-section-icon[b-08ln5oo4ew] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--tint-sunken);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.settings-section-title[b-08ln5oo4ew] {
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}

.settings-section-desc[b-08ln5oo4ew] {
    color: var(--text-muted);
    margin: 3px 0 0 0;
    line-height: 1.4;
}

.settings-section-action[b-08ln5oo4ew] {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
}

/* ── TPV switch cards ───────────────────────────────────────────────────── */

.settings-switch-card[b-08ln5oo4ew] {
    background: var(--tint-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px 12px;
    height: 100%;
    transition: border-color var(--dur-base) var(--ease-standard),
                background   var(--dur-base) var(--ease-standard);
}

.settings-switch-card:hover[b-08ln5oo4ew] {
    border-color: var(--border-strong);
    background: var(--tint-sunken);
}

.settings-switch-hint[b-08ln5oo4ew] {
    color: var(--text-muted);
    margin: 4px 0 0 36px;
    line-height: 1.45;
    display: block;
}

/* Plain switch row (no card background, inside glass) */
.settings-switch-row[b-08ln5oo4ew] {
    padding: 6px 0;
}

/* ── Add-row (new classification / specialty inline form) ─────────────── */

.settings-add-row[b-08ln5oo4ew] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.settings-add-input[b-08ln5oo4ew] {
    max-width: 340px;
    flex: 1 1 240px;
}

/* ── Tables inside glass sections ───────────────────────────────────────── */

.settings-table[b-08ln5oo4ew] {
    background: transparent !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
}

/* Group headers in series table */
.settings-group-header[b-08ln5oo4ew] {
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--primary) !important;
    background: var(--tint-sunken) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-top: 1px solid var(--border) !important;
}

/* Series sample code pill */
.settings-code[b-08ln5oo4ew] {
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
    font-size: .82rem;
    background: var(--tint-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    color: var(--primary-soft);
    font-variant-numeric: tabular-nums;
}

/* ── Save row (fixed at bottom of the settings form tab) ─────────────── */

.settings-save-row[b-08ln5oo4ew] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    padding-bottom: 4px;
}

.settings-save-btn[b-08ln5oo4ew] {
    min-width: 200px;
}

/* ── Backup section (centred call-to-action) ────────────────────────────── */

.settings-backup-section[b-08ln5oo4ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

.settings-backup-content[b-08ln5oo4ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    max-width: 480px;
}

.settings-backup-icon-wrap[b-08ln5oo4ew] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    background: var(--tint-sunken);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
}

.settings-backup-title[b-08ln5oo4ew] {
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0;
}

.settings-backup-desc[b-08ln5oo4ew] {
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Loading / permission states ────────────────────────────────────────── */

.settings-loading[b-08ln5oo4ew] {
    padding: 40px 0;
}

.settings-progress[b-08ln5oo4ew] {
    border-radius: var(--radius-pill) !important;
}

.settings-permission-denied[b-08ln5oo4ew] {
    max-width: 600px;
}

.settings-alert[b-08ln5oo4ew] {
    border-radius: var(--radius-md) !important;
}

/* ── Reduced-motion: remove entrance animation ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .settings-root[b-08ln5oo4ew] {
        animation: none;
    }

    .settings-switch-card[b-08ln5oo4ew] {
        transition: none;
    }
}

/* ── Narrow screens: tighten padding ────────────────────────────────────── */

@media (max-width: 600px) {
    .settings-section[b-08ln5oo4ew] {
        padding: 18px 16px;
    }

    .settings-page-header[b-08ln5oo4ew] {
        margin-bottom: 20px;
    }

    .settings-section-header[b-08ln5oo4ew] {
        flex-wrap: wrap;
    }

    .settings-section-action[b-08ln5oo4ew] {
        margin-left: 0;
        width: 100%;
    }

    .settings-save-row[b-08ln5oo4ew] {
        justify-content: stretch;
    }

    .settings-save-btn[b-08ln5oo4ew] {
        width: 100%;
    }
}
/* _content/PeluGes.Web/Views/Shared/MainLayout.razor.rz.scp.css */
/*
 * MainLayout.razor.css
 *
 * Los estilos de layout y del drawer premium se definen en el bloque <style>
 * del propio MainLayout.razor (.peluges-drawer, .peluges-appbar, etc.).
 * El CSS del template Blazor original (gradiente .sidebar, .top-row) se
 * reemplazó porque el layout usa MudDrawer + MudAppBar, no divs semánticos.
 *
 * El bloque #blazor-error-ui vive en app.css (estilos globales).
 */

/* Layout flex base */
.page[b-mc5m6qyrag] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

@media (min-width: 641px) {
    .page[b-mc5m6qyrag] {
        flex-direction: row;
    }
}
/* _content/PeluGes.Web/Views/Shared/NavMenu.razor.rz.scp.css */
/*
 * NavMenu.razor.css
 *
 * Los estilos del menú lateral MudBlazor se definen en MainLayout.razor <style>
 * bajo el selector .peluges-drawer. El CSS de este archivo era el template
 * Bootstrap/Blazor original que ya no se usa — se vació intencionalmente
 * para evitar conflictos con los selectores premium del tema.
 */