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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/Schedule.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   ÍTEM 429 — ESTADOS VISUALES DE ARRASTRAR UNA CITA EN LA AGENDA
   ══════════════════════════════════════════════════════════════════════════════
   🔒 VA EN CSS **CON ÁMBITO** (Schedule.razor.css), no en `wwwroot/app.css`:
   app.css es terreno compartido y este ítem no tiene por qué tocarlo. Aquí solo
   se pinta lo que el arrastre AÑADE; ni una regla existente de `.sch-*` se
   modifica.
   ⚠️ El fantasma que sigue al dedo y la marca de aterrizaje NO están aquí: nacen
   colgados de <body>, fuera del ámbito de este componente, y por eso se visten
   en línea desde `wwwroot/js/bsp-schedule-drag.js`.
   ══════════════════════════════════════════════════════════════════════════════ */

/* La tarjeta que se está arrastrando se queda en su sitio, apagada: el usuario
   necesita ver DE DÓNDE la sacó mientras decide dónde la suelta. */
.sch-appt-block.bsp-dragging[b-2u0w64whx2] {
    opacity: .32;
    filter: grayscale(.5);
}

/* La columna sobre la que se está soltando. Sutil a propósito: la información
   fuerte la da la marca de aterrizaje (dónde cae y cuánto ocupa); la columna
   solo confirma DE QUIÉN es. */
.sch-barber-col.bsp-drop-col[b-2u0w64whx2] {
    background: rgba(201, 162, 39, .10);
    box-shadow: inset 0 0 0 2px rgba(201, 162, 39, .55);
}

/* Señal de que la tarjeta se puede agarrar. `grab` solo aplica a ratón; en
   táctil la pista la da el texto del panel (rb_drag_hint). */
.sch-appt-block[data-bsp-drag="1"][b-2u0w64whx2] {
    cursor: grab;
}

.sch-appt-block[data-bsp-drag="1"]:active[b-2u0w64whx2] {
    cursor: grabbing;
}

/* ⚠️ El "no seleccionar texto mientras se arrastra" NO puede vivir aquí: se
   aplica a <body>, que está FUERA del ámbito de este componente y por tanto no
   lleva el atributo de ámbito. Se pone en línea desde el JS (`arm()`), y se
   quita en `reset()`. */
/* /Components/Shared/AccessibilityPanel.razor.rz.scp.css */
/* ── Floating trigger button ──────────────────────────────────────── */
.a11y-trigger-btn[b-2kan77xkhn] {
    position:        fixed;
    bottom:          1.5rem;
    right:           1.5rem;
    width:           3.25rem;
    height:          3.25rem;
    border-radius:   50%;
    border:          none;
    background:      var(--accent-color, #3B82F6);
    color:           var(--accent-text-color, #fff);
    font-size:       1.3rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 14px rgba(0,0,0,0.28);
    z-index:         1060;
    cursor:          grab;
    touch-action:    none; /* required for pointer-drag on touch devices */
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Scrollbar styling (Webkit) ───────────────────────────────────── */
.a11y-panel[b-2kan77xkhn]::-webkit-scrollbar       { width: 5px; }
.a11y-panel[b-2kan77xkhn]::-webkit-scrollbar-track { background: transparent; }
.a11y-panel[b-2kan77xkhn]::-webkit-scrollbar-thumb { background: var(--border-color, #CBD5E1); border-radius: 99px; }
/* /Components/Shared/ServiceGalleryEditor.razor.rz.scp.css */
/* ══ ÍTEM 664 · LV-17 — GALERÍA DE FOTOS DEL SERVICIO (lado del barbero) ══════
   Paleta de la casa (R-228): porcelana #F7F5F0 lienzo · navy #14224E estructura
   · rojo barber #C8102E acento. El acento se reserva para la ⭐ principal —
   marcar CUÁL representa al servicio ES la decisión de esta pantalla.

   📱 390x844 es la superficie principal: las tarjetas son de 150px con
   flex-wrap ⇒ 2 por fila con holgura, y todo botón llega a 44px de alto. */

.svcgal-grid[b-11um054c90] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .35rem;
}

.svcgal-card[b-11um054c90] {
    width: 150px;
    border: 1px solid #D8D4C8;
    border-radius: 12px;
    background: #FBFAF6;
    padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* La ⭐ principal se distingue SIN color solo: borde grueso + halo. En temas de
   alto contraste el color puede colapsar; el grosor del borde nunca. */
.svcgal-card.svcgal-primary[b-11um054c90] {
    border: 2px solid #C8102E;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}

.svcgal-thumb-wrap[b-11um054c90] { position: relative; }

.svcgal-thumb[b-11um054c90] {
    width: 100%;
    height: 110px;
    object-fit: cover;
    /* R-237 / ítem 206 — el encuadre PROTEGE LA CARA: la cabeza vive en el
       tercio superior, así que el recorte se ancla arriba (mismo 50% 25% de las
       tarjetas y popups del mapa). Un corte de pelo con la cabeza cortada es
       anti-marketing pagado. */
    object-position: 50% 25%;
    border-radius: 8px;
    background: #F7F5F0;
    display: block;
}

/* Insignias sobre la foto: par porcelana + navy (la REGLA DEL PAR, R-236c) —
   la foto de fondo no la controlamos, así que superficie clara + tinta oscura
   SIEMPRE juntas. */
.svcgal-star[b-11um054c90],
.svcgal-pos[b-11um054c90] {
    position: absolute;
    top: .3rem;
    background: #F7F5F0;
    border: 1px solid #14224E;
    color: #14224E;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .4rem;
}

.svcgal-star[b-11um054c90] { left: .3rem; }
.svcgal-pos[b-11um054c90] { right: .3rem; min-width: 1.35rem; text-align: center; }

.svcgal-actions[b-11um054c90] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Botones de dedo: 44px de alto (estándar táctil de la casa, R-347). */
.svcgal-actions .btn[b-11um054c90] {
    min-height: 44px;
    font-size: .74rem;
    padding: .25rem .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}

.svcgal-move[b-11um054c90] { display: flex; gap: .3rem; }
/* Las flechas de reordenar son un control de dedo IGUAL que los demás botones
   de la tarjeta: 44px de alto (R-347) y área de toque llena — antes solo tenían
   `flex:1` y quedaban cortas y poco obvias en 390x844 (no se podían usar a dedo
   en el teléfono, R-270). El ícono se agranda para que se lea claro cuál mueve
   atrás y cuál adelante. Solo afordancia; la lógica de Move() no se toca. */
.svcgal-move .btn[b-11um054c90] {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.svcgal-move .btn i[b-11um054c90] { font-size: 1.1rem; }

.svcgal-empty[b-11um054c90] {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px dashed #D8D4C8;
    border-radius: 12px;
    padding: .75rem .9rem;
    font-size: .82rem;
    background: #FBFAF6;
    flex: 1;
    min-width: 220px;
}

.svcgal-empty i[b-11um054c90] { font-size: 1.3rem; }

/* ══ LV-24 · 716-DISEÑO(b) — EL MARCADOR "SIN DECLARAR" ═══════════════════════
   Tres tintas, tres significados (mockup congelado): rojo SÓLIDO = ⭐ principal ·
   navy = insignias de posición · ámbar PUNTEADO = pendiente (punteado =
   incompleto). Ámbar de la casa: #B45309 tinta / #92400E tinta oscura /
   #FFF7ED superficie (par claro+tinta, R-236c).
   Va DESPUÉS de .svcgal-primary a propósito: si la foto pendiente es además la
   ⭐ (la legada adoptada como #1), gana el ámbar punteado — lo pendiente es lo
   accionable; la ⭐ sigue dicha por su insignia de arriba-izquierda. */
.svcgal-card.svcgal-undeclared[b-11um054c90] {
    border: 2px dashed #B45309;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .10);
}

/* El chip vive ABAJO de la foto — no compite con la ⭐ (arriba-izq) ni con el
   numerito (arriba-der). */
.svcgal-undeclared-chip[b-11um054c90] {
    position: absolute;
    left: .3rem;
    right: .3rem;
    bottom: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    background: #FFF7ED;
    border: 1px solid #B45309;
    color: #92400E;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    padding: .25rem .35rem;
}

/* La caja ámbar de pendientes, arriba de la galería. */
.svcgal-pendbox[b-11um054c90] {
    background: #FFF7ED;
    border: 1px solid rgba(180, 83, 9, .4);
    border-left: 5px solid #B45309;
    border-radius: 12px;
    padding: .6rem .75rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .84rem;
    color: #92400E;
}

.svcgal-pend-txt[b-11um054c90] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1.35;
}

.svcgal-pend-sub[b-11um054c90] {
    font-size: .74rem;
    opacity: .85;
}

/* El ⓘ de la caja, en tinta ámbar sobre blanco (mockup: help-btn "dark"). */
.svcgal-pendbox[b-11um054c90]  .bsp-help-btn {
    border-color: #B45309;
    color: #92400E;
    background: #fff;
}

/* ══ ÍTEM 725 · LV-22 — CERTIFICACIÓN DE PERMISO DE IMAGEN ════════════════════
   Clona el mockup congelado (mockup-certificacion-fotos.html): cabecera navy con
   la RAYA DEL POSTE, cuerpo porcelana, acento rojo barber. Paleta de la casa
   (R-228). Móvil-primero: el modal cabe en 390px y todo control llega a 44px. */

/* El <input type=file> queda oculto pero accesible (lo activa el <label>). No se
   usa display:none para no romper el foco/activación del label en algún navegador. */
.svcgal-file-hidden[b-11um054c90] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.svcgal-upload-btn[b-11um054c90] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ÍTEM 740 — "Vista previa": mismo porte de dedo que el botón de subir. */
.svcgal-preview-btn[b-11um054c90] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── El velo y el modal (overlay real, centrado en el viewport) ── */
.svccert-scrim[b-11um054c90] {
    position: fixed;
    inset: 0;
    background: rgba(11, 19, 48, .55);
    backdrop-filter: blur(1.5px);
    z-index: 1080;
}

.svccert-modal[b-11um054c90] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    z-index: 1081;
    background: #FFFFFF;
    border: 1px solid #D8D4C8;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(20, 34, 78, .22);
}

/* Cabecera navy + raya del poste al pie (border-image no se lleva con el radio,
   así que la raya va en un ::after de 4px). */
.svccert-head[b-11um054c90] {
    position: relative;
    background: #14224E;
    color: #fff;
    padding: 14px 16px 16px;
}

    .svccert-head[b-11um054c90]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        background: repeating-linear-gradient(135deg, #C8102E 0 12px, #FFFFFF 12px 24px, #14224E 24px 36px);
    }

.svccert-eyebrow[b-11um054c90] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #BFDBFE;
    font-weight: 700;
    margin-bottom: 5px;
}

.svccert-title-row[b-11um054c90] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.svccert-title[b-11um054c90] {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

/* El ⓘ de HelpHint vive en la cabecera navy: se aclara para que contraste
   (::deep alcanza el markup interno del componente hijo). */
.svccert-title-row[b-11um054c90]  .bsp-help-btn {
    border-color: #BFDBFE;
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.svccert-body[b-11um054c90] {
    padding: 15px 16px 6px;
}

.svccert-statement[b-11um054c90] {
    font-size: .86rem;
    line-height: 1.5;
    color: #14224E;
    white-space: pre-wrap;
    margin: 0;
}

/* El cotejo — fila de checkbox grande, de dedo. */
.svccert-cotejo[b-11um054c90] {
    margin-top: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid #D8D4C8;
    border-radius: 13px;
    padding: 13px 14px;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s;
}

    .svccert-cotejo:hover[b-11um054c90] {
        border-color: #2B4AA0;
    }

    .svccert-cotejo.checked[b-11um054c90] {
        border-color: #15803D;
        background: rgba(21, 128, 61, .06);
    }

    .svccert-cotejo:focus-visible[b-11um054c90] {
        outline: 2px solid #2B4AA0;
        outline-offset: 2px;
    }

.svccert-cbox[b-11um054c90] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid #B9B4A5;
    background: #fff;
    display: grid;
    place-items: center;
    color: #fff;
    transition: all .15s;
}

.svccert-cotejo.checked .svccert-cbox[b-11um054c90] {
    background: #15803D;
    border-color: #15803D;
}

.svccert-cbox i[b-11um054c90] {
    opacity: 0;
    transform: scale(.5);
    transition: all .15s;
    font-size: 1.05rem;
}

.svccert-cotejo.checked .svccert-cbox i[b-11um054c90] {
    opacity: 1;
    transform: scale(1);
}

.svccert-cotejo-lbl[b-11um054c90] {
    font-weight: 700;
    font-size: .92rem;
    color: #14224E;
}

/* Pie: acciones apiladas (móvil-primero) sobre fondo footer. */
.svccert-foot[b-11um054c90] {
    background: #EFEDE6;
    border-top: 1px solid #D8D4C8;
    padding: 13px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.svccert-certify[b-11um054c90] {
    width: 100%;
    min-height: 48px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.svccert-cancel[b-11um054c90] {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.svccert-gate[b-11um054c90] {
    text-align: center;
    font-size: .72rem;
    color: #64748B;
}

/* ══ LV-24 — LO PROPIO DEL MODAL DEL BACKFILL (el resto clona svccert-*) ══════ */

/* La franja ámbar de contexto: miniaturas de LAS VIEJAS + la línea aprobada. */
.svccert-oldstrip[b-11um054c90] {
    background: #FFF7ED;
    border: 1px solid rgba(180, 83, 9, .4);
    border-radius: 12px;
    padding: .6rem .7rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 12px;
}

.svccert-oldstrip-thumbs[b-11um054c90] {
    display: flex;
    gap: .35rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    max-width: 152px;   /* 3 por fila: con 8 viejas la franja no se traga el modal */
}

    .svccert-oldstrip-thumbs img[b-11um054c90] {
        width: 44px;
        height: 44px;
        object-fit: cover;
        object-position: 50% 25%;   /* mismo encuadre protege-caras de la galería */
        border-radius: 8px;
        border: 2px dashed #B45309; /* el mismo punteado ámbar del marcador */
        display: block;
    }

.svccert-oldstrip-cap[b-11um054c90] {
    font-size: .78rem;
    color: #92400E;
    line-height: 1.4;
}

/* "Guardar sin certificar" — secundario, de dedo, con su pista debajo. */
.svccert-skip[b-11um054c90] {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.svccert-skip-hint[b-11um054c90] {
    text-align: center;
    font-size: .7rem;
    color: #64748B;
    line-height: 1.4;
}

/* "Volver a editar" — terciario, sin caja (mockup), pero con alto de dedo. */
.svccert-back[b-11um054c90] {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-decoration: none;
    font-weight: 700;
}

/* Contenido del ⓘ: filas Regla → Problema → Solución con su chip de color. Este
   markup viaja como ChildContent de HelpHint pero lo declara ESTE componente, así
   que el CSS scoped lo alcanza sin ::deep. */
.svccert-help-row[b-11um054c90] {
    margin: 0 0 6px;
    font-size: .8rem;
    line-height: 1.4;
    color: #14224E;
}

    .svccert-help-row:last-child[b-11um054c90] {
        margin-bottom: 0;
    }

.svccert-help-k[b-11um054c90] {
    display: inline-block;
    font-weight: 800;
    font-size: .6rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    margin-right: 5px;
}

    .svccert-help-k.regla[b-11um054c90] {
        background: rgba(29, 78, 216, .12);
        color: #1D4ED8;
    }

    .svccert-help-k.problema[b-11um054c90] {
        background: rgba(180, 83, 9, .14);
        color: #B45309;
    }

    .svccert-help-k.solucion[b-11um054c90] {
        background: rgba(21, 128, 61, .12);
        color: #15803D;
    }
/* /Components/Shared/ServicePhotoModal.razor.rz.scp.css */
/* ══ ÍTEM 664 · LV-17 — EL MODAL DEL CLIENTE (fotos del servicio girando) ═══
   El look clona el mockup aprobado (mockup-664-fotos-rotando.html):
   · escenario TRANSPARENTE (punto 5) — el fondo del modal se ve entre fotos,
     jamás negro;
   · perspectiva LEJANA 2200px (punto 3) — el rotateY inclina sin deformar;
   · SIN scale en ninguna parte del giro — la foto no se achica (bug #2 cazado);
   · ✕ = clase compartida .sch-m-close (LV-05, app.css) — aquí no se re-declara.
   z-index: mismas capas que el resto de modales tras el ítem 410 (por encima
   de la hamburguesa 1060; debajo de la pantalla de reconexión 1080). */

.svrot-scrim[b-4n70pqgx7h] {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 25, .72);
    z-index: 1070;
}

.svrot-modal[b-4n70pqgx7h] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1071;
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    background: var(--surface-color, #fff);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
    outline: none;
}

/* Cabecera navy con la ✕ LV-05 (posicionada absolute por la clase compartida
   ⇒ esta cabecera es su ancestro posicionado) */
.svrot-head[b-4n70pqgx7h] {
    position: relative;
    background: var(--primary-900, #14224E);
    color: #fff;
    padding: .7rem 3.2rem .7rem 1rem;   /* aire a la derecha para la ✕ */
    min-height: 52px;
    display: flex;
    align-items: center;
}
.svrot-title[b-4n70pqgx7h] { font-weight: 700; font-size: .98rem; line-height: 1.25; }
/* tamaño/fuente propios de la ✕ en ESTE modal (el diseño viene de app.css) */
.svrot-head[b-4n70pqgx7h]  .sch-m-close,
.svrot-head .sch-m-close[b-4n70pqgx7h] { width: 34px; height: 34px; font-size: 1.15rem; line-height: 1; }

/* ── El escenario ─────────────────────────────────────────────────────────── */
.svrot-stage[b-4n70pqgx7h] {
    position: relative;
    background: transparent;            /* punto 5: TRANSPARENTE, jamás negro */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    perspective: 2200px;                /* punto 3: perspectiva LEJANA */
}
.svrot-frame[b-4n70pqgx7h] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
    backface-visibility: hidden;
    user-select: none;
    -webkit-user-drag: none;
}
.svrot-frame.on[b-4n70pqgx7h] { opacity: 1; }
/* modo 360: sin crossfade — el giro lo hace el transform del motor */
.svrot-stage.spin .svrot-frame[b-4n70pqgx7h] { transition: none; }

.svrot-drag[b-4n70pqgx7h] {
    position: absolute;
    inset: 0;
    z-index: 900;                       /* SIEMPRE sobre los frames (z 0-2): el dedo cae aquí */
    cursor: grab;
    touch-action: pan-y;                /* el arrastre horizontal gira; el vertical sigue scrolleando */
}
.svrot-drag:active[b-4n70pqgx7h] { cursor: grabbing; }

.svrot-lbl[b-4n70pqgx7h] {
    position: absolute;
    z-index: 901;                       /* la etiqueta del ángulo SIEMPRE visible sobre la foto */
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .45));
    padding: 1.6rem .5rem .5rem;
    font-weight: 700;
    letter-spacing: .03em;
    pointer-events: none;               /* jamás roba el arrastre */
}

/* ── Los dos modos ────────────────────────────────────────────────────────── */
.svrot-modes[b-4n70pqgx7h] { display: flex; gap: .4rem; padding: .6rem 1rem 0; }
.svrot-mode[b-4n70pqgx7h] {
    flex: 1;
    min-height: 44px;                   /* R-347 táctil */
    border: 1.5px solid var(--border-color, #dde4ec);
    background: var(--surface-color, #fff);
    color: var(--bs-secondary-color, #5b6a7a);
    border-radius: 999px;
    padding: .35rem .5rem;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}
.svrot-mode.on[b-4n70pqgx7h] {
    background: var(--primary-900, #14224E);
    border-color: var(--primary-900, #14224E);
    color: #fff;
}

/* ── Puntitos + ⓘ ─────────────────────────────────────────────────────────── */
.svrot-dots-row[b-4n70pqgx7h] { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .45rem .6rem; }
.svrot-dots[b-4n70pqgx7h] { display: flex; gap: .4rem; align-items: center; }
.svrot-dot[b-4n70pqgx7h] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--border-color, #dde4ec);
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}
/* 🟡 LUPE 664 vuelta-1 (MENOR-2): el activo era --primary-900 y en los temas
   oscuros (Onyx: rgb(13,17,25)) desaparecía contra el modal (~1.2:1). El
   ACENTO rojo de la casa contrasta en TODOS los temas — el mismo criterio del
   disco rojo del cartel del TV (5,9:1) — y el borde fino lo separa de la foto
   pase lo que pase. */
.svrot-dot.on[b-4n70pqgx7h] {
    background: var(--accent-color, #C8102E);
    /* box-shadow y no border: un border sumaría 2px al cajón y movería la fila */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
    transform: scale(1.25);
}
/* Área táctil de 44px DE ALTO sin agrandar el puntito (truco de la ✕ LV-05).
   El ANCHO del área es 20px = el paso entre puntitos (11px + gap): con 8
   puntitos, áreas de 44px de ancho se SOLAPARÍAN y el toque caería en el
   puntito vecino — peor que un blanco más angosto. El gesto principal para
   moverse entre ángulos es ARRASTRAR el escenario (ese sí es enorme); los
   puntitos son el atajo fino. */
.svrot-dot[b-4n70pqgx7h]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ── Controles ────────────────────────────────────────────────────────────── */
.svrot-ctl[b-4n70pqgx7h] { display: flex; gap: .5rem; padding: 0 1rem 1rem; }
.svrot-play[b-4n70pqgx7h],
.svrot-choose[b-4n70pqgx7h] {
    flex: 1;
    min-height: 44px;                   /* R-347 táctil */
    border-radius: 10px;
    padding: .5rem;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
}
.svrot-play[b-4n70pqgx7h] {
    border: 1.5px solid var(--border-color, #dde4ec);
    background: var(--surface-color, #fff);
    color: var(--bs-body-color, #1C2333);
}
.svrot-choose[b-4n70pqgx7h] {
    border: 1.5px solid #198754;
    background: #198754;
    color: #fff;
}

/* 🟡 LUPE 664 vuelta-1 (MENOR-3) — HORIZONTAL 844×390: el escenario 1:1 se
   comía los ~366px del modal y modos/puntitos/⏸ nacían bajo el pliegue. En
   landscape bajito el escenario deja el aspect-ratio y toma la ALTURA QUE
   SOBRA tras el chrome (~250px: cabecera 52 + modos ~54 + puntitos ~33 +
   controles ~60 + aire) — los controles quedan visibles SIN scroll interno.
   La foto sigue entera por object-fit: contain (se hace más chica, no se
   corta — R-280). */
@media (orientation: landscape) and (max-height: 500px) {
    .svrot-stage[b-4n70pqgx7h] {
        aspect-ratio: auto;
        height: calc(100vh - 250px);
        min-height: 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svrot-frame[b-4n70pqgx7h] { transition: none; }
    .svrot-dot.on[b-4n70pqgx7h] { transform: none; }
}
/* /Components/Shared/TipSplitEditor.razor.rz.scp.css */
/* ══ ÍTEM 657 — REPARTO DE PROPINA · estilos portados del mockup CONGELADO ══════
   MBS\kahlo\mockup-657-reparto-propina.html (aprobado 100% por el dueño).
   Colores del poste: navy #14224E · rojo #C8102E · oro #B8860B (= .crud-price). */

.tip-split[b-i9zg0nau57] {
    border: 1px solid #D8D4C8;
    border-radius: 12px;
    padding: .85rem;
    background: #FBFAF6;
    margin-top: .6rem;
    max-width: 560px;
}

.ts-head[b-i9zg0nau57] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ts-title[b-i9zg0nau57] { font-weight: 700; font-size: .95rem; color: #14224E; }
.ts-tipbadge[b-i9zg0nau57] {
    background: rgba(184,134,11,.14); color: #7a5a08; font-weight: 700; font-size: .78rem;
    border: 1px solid rgba(184,134,11,.35); border-radius: 999px; padding: .1rem .55rem;
}
.ts-count[b-i9zg0nau57] { margin-left: auto; font-size: .72rem; color: #5b6472; font-weight: 600; }

/* Chips de modo (≥44px táctil) */
.ts-modes[b-i9zg0nau57] { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ts-chip[b-i9zg0nau57] {
    appearance: none; cursor: pointer; border: 1px solid #D8D4C8; background: #fff; color: #14224E;
    border-radius: 999px; padding: .55rem .85rem; font-weight: 600; font-size: .82rem; min-height: 44px;
    display: inline-flex; align-items: center; gap: .35rem; transition: box-shadow .12s ease;
}
.ts-chip:hover[b-i9zg0nau57] { border-color: #14224E; }
.ts-chip.active[b-i9zg0nau57] {
    background: linear-gradient(135deg,#C8102E,#9E0C24); border-color: #9E0C24; color: #fff;
    box-shadow: 0 4px 12px rgba(200,16,46,.25);
}

.ts-hint[b-i9zg0nau57] { font-size: .8rem; color: #5b6472; margin-bottom: .6rem; }

/* Filas: Barbero · Servicio · Precio · Propina */
.ts-rows[b-i9zg0nau57] { }
.ts-row[b-i9zg0nau57] { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px dashed #E7E3D8; }
.ts-row:first-child[b-i9zg0nau57] { border-top: 0; }
.avatar[b-i9zg0nau57] {
    width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex;
    align-items: center; justify-content: center; font-weight: 800; font-size: .85rem;
}
.who[b-i9zg0nau57] { flex: 1; min-width: 0; }
.who .nm[b-i9zg0nau57] { font-weight: 700; font-size: .9rem; color: #14224E; }
.who .svc[b-i9zg0nau57] { font-size: .75rem; color: #5b6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.who .svc .price[b-i9zg0nau57] { font-weight: 700; color: #3a4256; }
.amt[b-i9zg0nau57] { font-weight: 800; color: #B8860B; font-size: 1.02rem; white-space: nowrap; text-align: right; }
.amt small[b-i9zg0nau57] { display: block; font-size: .58rem; font-weight: 700; color: #5b6472; text-transform: uppercase; letter-spacing: .4px; }

/* Modo Personalizada: textbox de $ (48px, prefijo $, sin flechitas) */
.ts-inputbox[b-i9zg0nau57] { position: relative; display: inline-flex; align-items: center; width: 118px; flex: none; }
.ts-inputbox .cur[b-i9zg0nau57] { position: absolute; left: 11px; font-weight: 800; color: #5b6472; pointer-events: none; font-size: 1.02rem; }
.ts-inputbox input[b-i9zg0nau57] {
    width: 100%; height: 48px; border: 1px solid #D8D4C8; border-radius: 10px;
    padding: 0 .65rem 0 1.55rem; font-size: 1.08rem; font-weight: 800; color: #14224E; background: #fff; text-align: right;
}
.ts-inputbox input:focus[b-i9zg0nau57] { outline: none; border-color: #14224E; box-shadow: 0 0 0 3px rgba(20,34,78,.15); }
.ts-inputbox.bad input[b-i9zg0nau57] { border-color: #C8102E; box-shadow: 0 0 0 3px rgba(200,16,46,.18); }
.ts-auto[b-i9zg0nau57] {
    display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; flex: none;
    width: 118px; height: 48px; border: 1px dashed #B8860B; border-radius: 10px; background: #FBF6E9; padding: 0 .65rem;
}
.ts-auto .v[b-i9zg0nau57] { font-weight: 800; color: #B8860B; font-size: 1.08rem; line-height: 1.05; }
.ts-auto .v.bad[b-i9zg0nau57] { color: #C8102E; }
.ts-auto .tag[b-i9zg0nau57] { font-size: .56rem; color: #7a5a08; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }

/* Termómetro con los colores del poste */
.ts-bar[b-i9zg0nau57] {
    height: 18px; border-radius: 6px; overflow: hidden; display: flex; margin: .55rem 0 .35rem;
    border: 1.5px solid #14224E; background: #EAE6DA;
}
.ts-bar span[b-i9zg0nau57] {
    height: 100%; min-width: 7px; box-shadow: inset 0 0 0 1px rgba(11,18,32,.28);
    border-right: 2px solid #0B1220; transition: width .18s ease;
}
.ts-bar span:last-child[b-i9zg0nau57] { border-right: 0; }
.ts-legend[b-i9zg0nau57] { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .15rem 0 .12rem; font-size: .76rem; font-weight: 600; color: #14224E; }
.ts-legend .lg[b-i9zg0nau57] { display: inline-flex; align-items: center; gap: .35rem; }
.ts-legend .sw[b-i9zg0nau57] { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(11,18,32,.4); flex: none; }
.ts-barcap[b-i9zg0nau57] { font-size: .68rem; color: #5b6472; margin: 0 0 .55rem; }

.ts-totalrow[b-i9zg0nau57] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ts-total-chip[b-i9zg0nau57] {
    font-size: .78rem; font-weight: 800; border-radius: 999px; padding: .22rem .6rem;
    background: rgba(46,125,91,.14); color: #1f6a48; border: 1px solid rgba(46,125,91,.4);
}
.ts-total-chip.bad[b-i9zg0nau57] { background: rgba(200,16,46,.12); color: #C8102E; border-color: rgba(200,16,46,.4); }
.ts-reset[b-i9zg0nau57] {
    margin-left: auto; appearance: none; cursor: pointer; background: #fff; border: 1px solid #D8D4C8;
    color: #14224E; border-radius: 999px; padding: .4rem .7rem; font-weight: 600; font-size: .76rem; min-height: 40px;
}
.ts-reset:hover[b-i9zg0nau57] { border-color: #14224E; }

.ts-foot[b-i9zg0nau57] { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid #E7E3D8; font-size: .82rem; color: #14224E; font-weight: 600; }
.ts-foot[b-i9zg0nau57]  .ok { color: #2E7D5B; font-weight: 800; }
.ts-foot[b-i9zg0nau57]  .err { color: #C8102E; font-weight: 800; }