/* =====================================================================
   Admin Design System — "Mercury" (claro)
   Sistema de diseño de la sección de administración. TOTALMENTE
   independiente del POS (no depende de polotab-theme.css).
   Inspirado en Mercury: claro, minimalista, mucho aire, acento índigo.
   Escala tipográfica slim: base 13px, jerarquía contenida.

   Prefijo `adm-`. Todo vive bajo `.adm-app`.
   Fases: este archivo = tokens + primitivos + componentes.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   (también en #toast-container, .adm-cmdk__overlay, .flatpickr-calendar y la
   confirmación de window.admConfirm: se montan en <body>, fuera de .adm-app,
   y necesitan resolver los tokens)
   ===================================================================== */
.adm-app,
#toast-container,
.adm-cmdk__overlay,
.adm-confirm,
.flatpickr-calendar {
    /* ---- Superficies (claro premium) ---- */
    --adm-bg: #ffffff;
    --adm-surface: #ffffff;
    --adm-surface-sunken: #fafafa;
    /* rail / zonas hundidas */
    --adm-surface-raised: #ffffff;
    /* cards (con sombra/borde) */
    --adm-hover: #f4f4f5;
    /* hover neutro */
    --adm-active: #ececed;

    /* ---- Bordes / divisores ---- */
    --adm-border: #ebebed;
    --adm-border-strong: #dededf;
    --adm-divider: #f1f1f2;

    /* ---- Texto ---- */
    --adm-text: #18181b;
    /* casi negro */
    --adm-text-secondary: #52525b;
    --adm-text-muted: #8a8a93;
    --adm-text-faint: #b4b4bb;

    /* ---- Acento primario (índigo Mercury) ---- */
    --adm-primary: #4661f1;
    --adm-primary-strong: #3a4fd6;
    /* hover / texto sobre soft */
    --adm-primary-soft: #eef1fe;
    /* fondo item activo */
    --adm-on-primary: #ffffff;

    /* ---- Semánticos ---- */
    --adm-positive: #0f7a4d;
    /* dinero que entra (verde) */
    --adm-positive-soft: #e7f6ee;
    --adm-danger: #d92d3f;
    /* fallido / negativo fuerte */
    --adm-danger-soft: #fdecee;
    --adm-warning: #b25e09;
    --adm-warning-soft: #fdf3e7;
    --adm-canceled: #272727;
    --adm-canceled-soft: #ececed;

    /* ---- Badge neutral (pending) ---- */
    --adm-neutral-soft: #f1f1f3;
    --adm-neutral-text: #6b6b73;

    /* ---- Forma ---- */
    --adm-radius-sm: 6px;
    --adm-radius: 8px;
    --adm-radius-md: 10px;
    --adm-radius-lg: 12px;
    --adm-radius-pill: 999px;

    /* ---- Espaciado (slim) ---- */
    --adm-gap: 8px;
    --adm-gap-lg: 14px;
    --adm-pad: 12px;

    /* ---- Sombras (suaves, estilo Mercury) ---- */
    --adm-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
    --adm-shadow: 0 4px 16px rgba(24, 24, 27, 0.08);
    --adm-shadow-lg: 0 16px 40px rgba(24, 24, 27, 0.14);

    /* ---- Iconos ---- */
    --adm-icon-stroke: 1.6;

    /* ---- Tipografía ---- */
    --adm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================================
   2. BASE / RESET (scoped al admin)
   ===================================================================== */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.adm-app {
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* topbar fija arriba + cuerpo */
    background: var(--adm-bg);
    color: var(--adm-text);
    font-family: var(--adm-font);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

.adm-app *,
.adm-app *::before,
.adm-app *::after {
    box-sizing: border-box;
}

.adm-app h1,
.adm-app h2,
.adm-app h3,
.adm-app h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--adm-text);
}

.adm-app button {
    font-family: inherit;
}

/* La navegación del shell son <a> (rutas reales): sin subrayado ni
   color de link — heredan el color de su componente */
.adm-app a.adm-rail__btn,
.adm-app a.adm-side__item,
.adm-app a.adm-branch,
.adm-app a.adm-topbar__brand {
    text-decoration: none;
    color: inherit;
}

.adm-app a.adm-branch {
    color: var(--adm-text);
}

.adm-app ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.adm-app ::-webkit-scrollbar-thumb {
    background: #e2e2e4;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

.adm-app ::-webkit-scrollbar-thumb:hover {
    background: #cfcfd2;
    background-clip: content-box;
}

/* Iconos (sprite lucide). Heredan tamaño del font-size del contexto. */
.adm-ic {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--adm-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}

.adm-muted {
    color: var(--adm-text-muted);
}

.adm-secondary {
    color: var(--adm-text-secondary);
}

/* Cantidades estilo Mercury: centavos en superíndice ($6.⁴¹) -----------
   Uso: <span class="adm-amt">−$6<sup>.41</sup></span>
   o con modificador de signo. */
.adm-amt {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.adm-amt sup {
    font-size: 0.66em;
    top: -0.42em;
    font-weight: 500;
    margin-left: 0.5px;
}

.adm-amt--pos {
    color: var(--adm-positive);
}

.adm-amt--muted {
    color: var(--adm-text-muted);
    text-decoration: line-through;
}

/* =====================================================================
   3a. TOPBAR fija (permanente, ancho completo)
   ===================================================================== */
.adm-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    /* izq 11px: centra el brand (34px) sobre el rail (56px) → 11+17=28
       der 20px: el cluster derecho alinea con el borde del contenido */
    padding: 0 20px 0 11px;
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-border);
}

.adm-topbar__brand {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--adm-radius);
    background: var(--adm-primary);
    color: var(--adm-on-primary);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    /* 11(pad) + 34 + 1 + 10(gap) = 56 → el buscador arranca en el borde
       rail/sidebar */
    margin-right: 1px;
    box-shadow: var(--adm-shadow-sm);
    flex-shrink: 0;
}

.adm-topbar__brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adm-topbar__spacer {
    flex: 1 1 auto;
}

.adm-topbar__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Cuerpo bajo la topbar: rail + sidebar + main */
.adm-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* =====================================================================
   3. RAIL (presidebar) — switcher de secciones
   ===================================================================== */
.adm-rail {
    flex: 0 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 9px;
    background: var(--adm-surface-sunken);
    border-right: 1px solid var(--adm-border);
}

.adm-rail__nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.adm-rail__bottom {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.adm-rail__btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--adm-radius);
    background: transparent;
    color: var(--adm-text-secondary);
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.adm-rail__btn .adm-ic {
    font-size: 18px;
    color: var(--adm-text-muted);
    transition: color 0.12s ease;
}

/* Etiqueta → tooltip (dark pill) que flota a la derecha del rail */
.adm-rail__btn span {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-3px);
    z-index: 60;
    padding: 4px 9px;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-text);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--adm-shadow);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.12s ease 0.05s,
        transform 0.12s ease 0.05s;
}

.adm-rail__btn:hover span,
.adm-rail__btn:focus-visible span {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.adm-rail__btn:hover {
    background: var(--adm-hover);
    color: var(--adm-text);
}

.adm-rail__btn:hover .adm-ic {
    color: var(--adm-text-secondary);
}

.adm-rail__btn.is-active {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-strong);
}

.adm-rail__btn.is-active .adm-ic {
    color: var(--adm-primary);
}

/* =====================================================================
   4. SIDEBAR contextual (mainsidebar)
   ===================================================================== */
.adm-side {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    background: var(--adm-surface);
    border-right: 1px solid var(--adm-border);
    min-height: 0;
}

.adm-side__head {
    flex: 0 0 auto;
    /* izq 17px = nav padding (8) + item padding (9): el título alinea
       con los iconos de los items */
    padding: 15px 14px 10px 17px;
}

.adm-side__head h2 {
    font-size: 14px;
}

.adm-side__subtitle {
    margin: 1px 0 0;
    font-size: 11px;
    color: var(--adm-text-muted);
}

.adm-side__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 3px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
}

.adm-side__group {
    margin: 12px 9px 3px;
    /* 8 (nav) + 9 = 17px: alinea con iconos y título */
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-text-faint);
}

.adm-side__group:first-child {
    margin-top: 2px;
}

.adm-side__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 9px;
    border: none;
    border-radius: var(--adm-radius-sm);
    background: transparent;
    color: var(--adm-text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.adm-side__item .adm-ic {
    font-size: 15px;
    color: var(--adm-text-muted);
    transition: color 0.12s ease;
}

.adm-side__item:hover {
    background: var(--adm-hover);
    color: var(--adm-text);
}

.adm-side__item:hover .adm-ic {
    color: var(--adm-text-secondary);
}

.adm-side__item.is-active {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-strong);
    font-weight: 600;
}

.adm-side__item.is-active .adm-ic {
    color: var(--adm-primary);
}

.adm-side__item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sub-línea opcional (ej. balance bajo el nombre, como las cuentas Mercury) */
.adm-side__item--stacked {
    align-items: flex-start;
}

.adm-side__sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--adm-text-muted);
    margin-top: 1px;
}

.adm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-dot--ok {
    background: var(--adm-positive);
}

.adm-dot--off {
    background: var(--adm-text-faint);
}

.adm-side__footer {
    flex: 0 0 auto;
    padding: 9px 8px 12px;
    /* 8px: el botón alinea con el hover de los items */
    border-top: 1px solid var(--adm-divider);
}

.adm-side__footer:empty {
    display: none;
}

.adm-side__footer .adm-btn {
    width: 100%;
    justify-content: center;
}

/* =====================================================================
   5. MAIN — topbar + página + contenido
   ===================================================================== */
.adm-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--adm-bg);
}

/* ---- Buscador global (vive en la topbar) ---- */
.adm-search {
    flex: 1 1 auto;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 31px;
    padding: 0 10px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface-sunken);
    color: var(--adm-text-muted);
    cursor: text;
    transition:
        border-color 0.12s ease,
        background 0.12s ease;
}

.adm-search:hover {
    border-color: var(--adm-border-strong);
}

.adm-search .adm-ic {
    font-size: 14px;
}

.adm-search input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--adm-text);
}

.adm-search input::placeholder {
    color: var(--adm-text-muted);
}

.adm-kbd {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 5px;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    font-size: 10px;
    color: var(--adm-text-muted);
}

/* ---- Página (título + acciones) ---- */
.adm-page__head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 10px;
}

.adm-crumbs {
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-bottom: 3px;
}

.adm-page__head h1 {
    font-size: 19px;
    letter-spacing: -0.02em;
}

.adm-page__actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ---- Toolbar de filtros (píldoras) ---- */
.adm-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px 12px;
}

.adm-toolbar__spacer {
    flex: 1 1 auto;
}

/* ---- Contenido scrollable ---- */
.adm-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 20px 24px;
    min-height: 0;
}

/* =====================================================================
   6. BOTONES / PÍLDORAS
   ===================================================================== */
.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 32px para igualar la altura de .adm-input/.adm-select: así un botón
       junto a un input (barra "Agregar", filtros, buscadores) queda alineado
       arriba y abajo, no 2px más bajo. */
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-primary);
    color: var(--adm-on-primary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.adm-btn .adm-ic {
    font-size: 14px;
}

.adm-btn:hover {
    background: var(--adm-primary-strong);
}

/* ---- Spinner reutilizable + estados de carga ---- */
@keyframes adm-spin {
    to {
        transform: rotate(360deg);
    }
}

.adm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: adm-spin 0.6s linear infinite;
    vertical-align: middle;
}

.adm-spinner--lg {
    width: 26px;
    height: 26px;
    border-width: 3px;
}

/* Botón en carga: oculta el contenido y muestra un spinner centrado.
   Funciona en cualquier .adm-btn sin depender de íconos del sprite. */
.adm-btn.is-loading {
    position: relative;
    pointer-events: none;
    cursor: progress;
}

.adm-btn.is-loading>* {
    visibility: hidden;
}

.adm-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: adm-spin 0.6s linear infinite;
}

.adm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.adm-btn.is-loading:disabled {
    opacity: 1;
}

/* Secundario: blanco con borde (Move Money, Match Receipts) */
.adm-btn--subtle {
    background: var(--adm-surface);
    border-color: var(--adm-border-strong);
    color: var(--adm-text);
    box-shadow: var(--adm-shadow-sm);
}

.adm-btn--subtle:hover {
    background: var(--adm-hover);
    border-color: var(--adm-border-strong);
}

.adm-btn--subtle .adm-ic {
    color: var(--adm-text-secondary);
}

/* Peligro: la acción que destruye algo (eliminar, dar de baja, cancelar una
   orden). Va sólo en el botón que confirma, nunca en el que cancela. */
.adm-btn--danger {
    background: var(--adm-danger);
    border-color: transparent;
    color: #ffffff;
}

.adm-btn--danger:hover {
    background: #b81f30;
}

/* Fantasma: sin fondo (Editar, View all) */
.adm-btn--ghost {
    background: transparent;
    color: var(--adm-text-secondary);
}

.adm-btn--ghost:hover {
    background: var(--adm-hover);
    color: var(--adm-text);
}

.adm-btn--link {
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--adm-primary);
    font-weight: 500;
}

.adm-btn--link:hover {
    background: transparent;
    color: var(--adm-primary-strong);
    text-decoration: none;
}

/* Botón de solo icono (campana, eye-off) */
.adm-iconbtn {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--adm-radius-sm);
    background: transparent;
    color: var(--adm-text-secondary);
    font-size: 15px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s ease;
}

.adm-iconbtn:hover {
    background: var(--adm-hover);
    color: var(--adm-text);
}

/* Variante flotante: para botones editar/eliminar superpuestos sobre una tarjeta
   (grid de Sucursales), donde hace falta fondo + sombra para contraste. */
.adm-iconbtn--overlay {
    background: var(--adm-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Celda de acciones de tabla (editar/eliminar): iconos en línea, a la derecha. */
.adm-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.adm-iconbtn--dot::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--adm-danger);
    border: 1.5px solid var(--adm-bg);
}

.adm-userbtn {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--adm-radius-pill);
    background: #d8f0e3;
    color: #0f7a4d;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Píldora de filtro (Data Views ▾, Filters, Date ▾ …) */
.adm-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 9px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
    color: var(--adm-text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.12s ease,
        border-color 0.12s ease;
}

.adm-pill .adm-ic {
    font-size: 13px;
    color: var(--adm-text-muted);
}

.adm-pill .adm-ic--chev {
    font-size: 12px;
    margin-left: 1px;
}

.adm-pill:hover {
    background: var(--adm-hover);
    border-color: var(--adm-border-strong);
}

/* Sin esto un pill deshabilitado (ej. "Exportar CSV" antes de cargar el catálogo)
   se ve idéntico a uno activo y el click parece que no responde. */
.adm-pill:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.adm-pill:disabled:hover {
    background: var(--adm-surface);
    border-color: var(--adm-border);
}

/* `display:inline-flex` del pill pisa la regla [hidden] del navegador;
   esta regla (más específica) restaura el ocultado por atributo. */
.adm-pill[hidden] {
    display: none;
}

.adm-pill.is-active {
    background: var(--adm-primary-soft);
    border-color: var(--adm-primary);
    color: var(--adm-primary-strong);
}

.adm-pill.is-active .adm-ic {
    color: var(--adm-primary);
}

/* Filtro con menú desplegable (toolbar) */
.adm-filter {
    position: relative;
}

.adm-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 30;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border-strong);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow);
    display: none;
}

.adm-filter.is-open .adm-menu {
    display: block;
}

.adm-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--adm-radius-sm);
    background: transparent;
    color: var(--adm-text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.adm-menu__item:hover {
    background: var(--adm-hover);
}

.adm-menu__item.is-active {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-strong);
    font-weight: 500;
}

.adm-menu__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Selector de sucursal escalable (_branchFilter): buscador fijo + lista scrollable. */
.adm-branchfilter__menu {
    overflow: visible;
    max-height: none;
    min-width: 240px;
    padding: 6px;
}

.adm-branchfilter__search {
    width: 100%;
    margin-bottom: 6px;
}

.adm-branchfilter__list {
    max-height: 280px;
    overflow-y: auto;
}

.adm-branchfilter__btn .adm-filter__label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
   7. CARDS / DEFINITION LIST
   ===================================================================== */
.adm-card {
    background: var(--adm-surface-raised);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    padding: 14px;
    box-shadow: var(--adm-shadow-sm);
}

.adm-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.adm-card__head h3 {
    font-size: 13px;
}

.adm-card__head .adm-btn {
    height: 26px;
    padding: 0 9px;
    font-size: 11.5px;
}

.adm-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--adm-gap-lg);
}

.adm-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.adm-dl>div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--adm-gap);
    padding: 8px 0;
    border-bottom: 1px solid var(--adm-divider);
}

.adm-dl>div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.adm-dl dt {
    color: var(--adm-text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.adm-dl dd {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    text-align: right;
}

/* =====================================================================
   8. STATS (estilo "Net change this month")
   ===================================================================== */
.adm-statbar {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--adm-divider);
    margin-bottom: 16px;
}

.adm-statbar__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.adm-statbar__label {
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.adm-statbar__value {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.adm-statbar__hint {
    font-size: 11px;
    color: var(--adm-text-muted);
}

/* Cards de métrica (grid) */
.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--adm-gap-lg);
    margin-bottom: var(--adm-gap-lg);
}

.adm-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adm-stat__label {
    color: var(--adm-text-muted);
    font-size: 11.5px;
}

.adm-stat__value {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.adm-stat__delta {
    font-size: 11px;
    color: var(--adm-text-muted);
}

.adm-stat__delta.is-up {
    color: var(--adm-positive);
}

.adm-stat__delta.is-down {
    color: var(--adm-danger);
}

/* =====================================================================
   9. TABLA (estilo Mercury)
   ===================================================================== */
.adm-table {
    width: 100%;
    border-collapse: collapse;
}

.adm-table thead th {
    text-align: left;
    padding: 6px 10px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--adm-text-muted);
    border-bottom: 1px solid var(--adm-border);
    white-space: nowrap;
}

.adm-table th.adm-num,
.adm-table td.adm-num {
    text-align: right;
}

/* La primera/última columna alinean con el título y la toolbar de la
   página (el hover de la fila sigue cubriendo el ancho completo) */
.adm-table thead th:first-child,
.adm-table tbody td:first-child {
    padding-left: 0;
}

.adm-table thead th:last-child,
.adm-table tbody td:last-child {
    padding-right: 0;
}

.adm-table tbody td {
    padding: 9px 10px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--adm-divider);
    vertical-align: middle;
}

.adm-table tbody tr {
    cursor: pointer;
    transition: background 0.1s ease;
}

.adm-table tbody tr:hover {
    background: var(--adm-surface-sunken);
}

.adm-cell-party {
    display: flex;
    align-items: center;
    gap: 9px;
}

.adm-avatar {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--adm-hover);
    color: var(--adm-text-secondary);
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.adm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adm-cell-method {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--adm-text-secondary);
}

.adm-cell-method .adm-ic {
    font-size: 13.5px;
    color: var(--adm-text-muted);
}

/* Celda de estado (cargando / sin resultados) */
.adm-table td.tm-state {
    padding: 20px 0;
    text-align: center;
    color: var(--adm-text-muted);
    font-size: 12px;
    cursor: default;
}

/* Paginador (TableManager) */
.tm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tm-pager__info {
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.tm-pager__pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tm-pager__btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
    color: var(--adm-text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition:
        background 0.1s ease,
        border-color 0.1s ease,
        color 0.1s ease;
}

.tm-pager__btn:hover:not(:disabled):not(.is-active) {
    background: var(--adm-surface-sunken);
    border-color: var(--adm-text-faint);
}

.tm-pager__btn.is-active {
    background: var(--adm-primary);
    border-color: var(--adm-primary);
    color: #fff;
}

.tm-pager__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.tm-pager__gap {
    padding: 0 4px;
    color: var(--adm-text-faint);
    font-size: 12px;
}

/* =====================================================================
   10. BADGES
   ===================================================================== */
.adm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--adm-radius-pill);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.5;
}

.adm-badge--pending {
    background: var(--adm-neutral-soft);
    color: var(--adm-neutral-text);
}

.adm-badge--failed {
    background: var(--adm-danger-soft);
    color: var(--adm-danger);
}

.adm-badge--draft {
    background: var(--adm-warning-soft);
    color: var(--adm-warning);
}

.adm-badge--success {
    background: var(--adm-positive-soft);
    color: var(--adm-positive);
}

.adm-badge--info {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-strong);
}

.adm-badge--warning {
    background: var(--adm-warning-soft);
    color: var(--adm-warning);
}

.adm-badge--danger {
    background: var(--adm-danger-soft);
    color: var(--adm-danger);
}

.adm-badge--canceled {
    background: var(--adm-canceled-soft);
    color: var(--adm-canceled);
}

.adm-badge--violet {
    background: #f5f0ff;
    color: #7839ee;
}

/* Tipos de corte: el modo describe el significado del documento, no su estado. */
.adm-count-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 5px;
    border: 1px solid transparent;
    border-radius: var(--adm-radius);
    white-space: nowrap;
    line-height: 1.05;
}

.adm-count-mode__mark {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.adm-count-mode strong,
.adm-count-mode small {
    display: block;
}

.adm-count-mode strong { font-size: 11px; }
.adm-count-mode small { margin-top: 2px; font-size: 9.5px; opacity: .8; }

.adm-count-mode--simple {
    color: var(--adm-primary-strong);
    background: var(--adm-primary-soft);
    border-color: color-mix(in srgb, var(--adm-primary) 20%, transparent);
}

.adm-count-mode--simple .adm-count-mode__mark {
    color: #fff;
    background: var(--adm-primary);
}

.adm-count-mode--detailed {
    color: #7839ee;
    background: #f5f0ff;
    border-color: #e4d6ff;
}

.adm-count-mode--detailed .adm-count-mode__mark {
    color: #fff;
    background: #7839ee;
}

.adm-inventory-count-row--simple td:first-child { border-left: 3px solid var(--adm-primary); }
.adm-inventory-count-row--detailed td:first-child { border-left: 3px solid #7839ee; }

.adm-count-callout {
    display: grid;
    gap: 3px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--adm-radius);
    font-size: 12px;
}

.adm-count-callout span { color: var(--adm-text-muted); line-height: 1.4; }
.adm-count-callout--simple { background: var(--adm-primary-soft); border-color: color-mix(in srgb, var(--adm-primary) 24%, transparent); color: var(--adm-primary-strong); }
.adm-count-callout--detailed { background: #f5f0ff; border-color: #e4d6ff; color: #7839ee; }

/* Origen del ítem (creado en la sucursal vs heredado de la franquicia). Chips
   sutiles con contorno para que se lean como etiqueta de origen, no como estado;
   se diferencian por ícono (tienda / chef-hat) y texto. */
.adm-badge--local,
.adm-badge--franchise {
    background: var(--adm-surface-sunken);
    color: var(--adm-text-secondary);
    border: 0.5px solid var(--adm-border);
}

.adm-badge--local .adm-ic,
.adm-badge--franchise .adm-ic {
    font-size: 12px;
    color: var(--adm-text-muted);
}

/* =====================================================================
   11. SUCURSALES — grid de cards
   ===================================================================== */
.adm-branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: var(--adm-gap-lg);
}

.adm-branch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.adm-branch:hover {
    border-color: var(--adm-border-strong);
    box-shadow: var(--adm-shadow);
}

.adm-branch__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-branch__icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: var(--adm-radius);
    background: var(--adm-primary-soft);
    color: var(--adm-primary);
    font-size: 15px;
    flex-shrink: 0;
}

.adm-branch__name {
    font-size: 12.5px;
}

.adm-branch__addr {
    margin: 1px 0 0;
    font-size: 11px;
    color: var(--adm-text-muted);
}

.adm-branch__meta {
    display: flex;
    gap: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--adm-divider);
}

.adm-branch__meta>div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.adm-branch__meta span {
    font-size: 10.5px;
    color: var(--adm-text-muted);
}

.adm-branch__meta strong {
    font-size: 12.5px;
    font-weight: 600;
}

/* =====================================================================
   12. PLACEHOLDER (secciones por construir)
   ===================================================================== */
.adm-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 280px;
    text-align: center;
    border: 1px dashed var(--adm-border-strong);
    border-radius: var(--adm-radius-lg);
    background: var(--adm-surface-sunken);
}

.adm-placeholder .adm-ic {
    font-size: 24px;
    color: var(--adm-text-faint);
    margin-bottom: 2px;
}

.adm-placeholder h3 {
    font-size: 13.5px;
}

.adm-placeholder p {
    margin: 0;
    font-size: 12px;
    color: var(--adm-text-muted);
    max-width: 340px;
}

/* =====================================================================
   21. FLOW BUILDER — pasos → preguntas → opciones (productos 'flow')
   Master-detail: lista de pasos (izq) + canvas del paso activo (der).
   ===================================================================== */
.adm-fb {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.adm-fb__steps {
    position: sticky;
    top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adm-fb-step {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    background: var(--adm-surface);
    cursor: pointer;
    transition:
        border-color 0.12s ease,
        background 0.12s ease;
}

.adm-fb-step:hover {
    border-color: var(--adm-border-strong);
}

.adm-fb-step.is-active {
    border-color: var(--adm-primary);
    background: var(--adm-primary-soft);
}

.adm-fb-step__grip {
    color: var(--adm-text-faint);
    font-size: 14px;
    cursor: grab;
    flex-shrink: 0;
}

.adm-fb-step__main {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-fb-step__title {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-fb-step.is-active .adm-fb-step__title {
    color: var(--adm-primary-strong);
}

.adm-fb-step__sub {
    display: block;
    font-size: 11px;
    color: var(--adm-text-muted);
}

.adm-fb__canvas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Encabezado del paso activo: título editable + acciones */
.adm-fb__stephead {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-fb__stephead .adm-input {
    flex: 1 1 auto;
    font-weight: 600;
}

/* Card de pregunta */
.adm-q__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.adm-q__head .adm-q-label {
    flex: 1 1 auto;
}

.adm-q__head .adm-select {
    flex: 0 0 215px;
}

.adm-q__meta {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.adm-q__meta .adm-field {
    gap: 3px;
}

.adm-q__meta .adm-input,
.adm-q__meta .adm-select {
    height: 28px;
    font-size: 12px;
}

.adm-q__meta .adm-input {
    width: 64px;
}

/* Encabezado de columnas de opciones */
.adm-opt-head {
    display: flex;
    gap: 8px;
    padding: 0 2px 4px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--adm-text-faint);
}

/* Fila de opción */
.adm-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
}

.adm-opt__grip {
    color: var(--adm-text-faint);
    font-size: 14px;
    cursor: grab;
    flex-shrink: 0;
}

.adm-opt .adm-opt-label {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-opt .adm-input {
    height: 30px;
    font-size: 12.5px;
}

.adm-opt__price {
    flex: 0 0 110px;
}

.adm-opt__qty {
    flex: 0 0 64px;
}

/* Toggle "recomendada" (estrella) */
.adm-opt__star {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--adm-radius-sm);
    background: transparent;
    color: var(--adm-text-faint);
    font-size: 15px;
    cursor: pointer;
}

.adm-opt__star:hover {
    background: var(--adm-hover);
}

.adm-opt__star.is-on {
    color: var(--adm-warning);
}

.adm-opt__star.is-on .adm-ic {
    fill: currentColor;
}

/* Botones "agregar" punteados */
.adm-fb-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--adm-border-strong);
    border-radius: var(--adm-radius-md);
    background: transparent;
    color: var(--adm-text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease;
}

.adm-fb-add:hover {
    background: var(--adm-surface-sunken);
    color: var(--adm-text);
    border-color: var(--adm-text-faint);
}

.adm-fb-add--sm {
    width: auto;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: var(--adm-radius-sm);
}

/* Estrella de marcado en tablas (favorito del menú en Productos, canal destacado
   en Canales). El estado marcado NO se puede expresar rellenando el icono: los
   símbolos del sprite traen su propio `fill="none"`, que gana sobre el fill
   heredado del <use>, así que una estrella llena no se pinta. Se distingue por
   color + fondo tintado, que además se lee de un vistazo en una tabla larga. */
.adm-app .adm-star-btn {
    color: var(--adm-text-faint);
}
.adm-app .adm-star-btn:hover {
    color: var(--adm-warning);
}
.adm-app .adm-star-btn.is-fav {
    color: var(--adm-warning);
    background: var(--adm-warning-soft);
}

/* Precios editables en la tabla de Productos. El input cabe en la celda sin
   ensancharla, y el error usa el token de peligro porque el design system no trae
   una clase de input inválido. El lápiz/guardar de la fila se alinea con el chevron. */
.adm-app .pd-price-input {
    width: 96px;
    text-align: right;
}
.adm-app .pd-price-input[aria-invalid='true'] {
    border-color: var(--adm-danger);
    box-shadow: 0 0 0 1px var(--adm-danger);
}
.adm-app .pd-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Estado de drag (SortableJS) */
.adm-drag-ghost {
    opacity: 0.4;
}

/* =====================================================================
   22. RECETAS — insumos a descontar (base / por opción), condicionados
   por modo de servicio (ej. vaso y tapa solo para llevar)
   ===================================================================== */
.adm-rec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.adm-rec .adm-select,
.adm-rec .adm-input {
    height: 30px;
    font-size: 12.5px;
}

.adm-rec__insumo {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-rec__qty {
    flex: 0 0 120px;
}

.adm-rec__when {
    flex: 0 0 175px;
}

/* El botón "Aplica" abre los chips de modos; estilizado como select */
.adm-rec__when {
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resaltar condiciones de servicio distintas a "siempre" */
.adm-rec__when.is-conditioned {
    border-color: var(--adm-warning);
    color: var(--adm-warning);
    font-weight: 500;
}

/* Chips de modos de servicio (multi-selección, N:M en DB) */
.adm-rec-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 10px;
}

.adm-modechip {
    padding: 4px 11px;
    border: 1px solid var(--adm-border-strong);
    border-radius: var(--adm-radius-pill);
    background: var(--adm-surface);
    color: var(--adm-text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.1s ease,
        border-color 0.1s ease,
        color 0.1s ease;
}

.adm-modechip:hover {
    background: var(--adm-hover);
}

.adm-modechip.is-on {
    background: var(--adm-primary-soft);
    border-color: var(--adm-primary);
    color: var(--adm-primary-strong);
}

/* Encabezado de columnas */
.adm-rec-head {
    display: flex;
    gap: 8px;
    padding: 0 2px 4px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--adm-text-faint);
}

/* Bloque por opción del flujo */
.adm-rec-option {
    padding: 10px 0 4px;
    border-top: 1px solid var(--adm-divider);
    margin-top: 6px;
}

.adm-rec-option:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 2px;
}

.adm-rec-option__name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 600;
}

.adm-rec-option__name .adm-check__sub {
    font-weight: 400;
}

.adm-rec-empty {
    font-size: 12px;
    color: var(--adm-text-faint);
    padding: 2px 0 4px;
}

/* =====================================================================
   23. SWATCHES — selector de color (categorías)
   ===================================================================== */
.adm-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.adm-swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--adm-radius-pill);
    border: 2px solid transparent;
    outline: 2px solid transparent;
    cursor: pointer;
    transition:
        transform 0.1s ease,
        outline-color 0.1s ease;
}

.adm-swatch:hover {
    transform: scale(1.1);
}

.adm-swatch.is-active {
    border-color: var(--adm-surface);
    outline-color: var(--adm-text);
}

/* =====================================================================
   24. TABS — segmentados estilo Mercury (drawer de producto, etc.)
   ===================================================================== */
.adm-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--adm-surface-sunken);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
}

.adm-tab {
    flex: 1 1 0;
    height: 26px;
    border: none;
    border-radius: var(--adm-radius-sm);
    background: transparent;
    color: var(--adm-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}

.adm-tab:hover {
    color: var(--adm-text);
}

.adm-tab.is-active {
    background: var(--adm-surface);
    color: var(--adm-text);
    font-weight: 600;
    box-shadow: var(--adm-shadow-sm);
}

/* Tabs como links (sub-rutas, ej. detalle de sucursal) */
a.adm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.adm-tabs--inline {
    display: inline-flex;
}

.adm-tabs--inline .adm-tab {
    flex: 0 0 auto;
    padding: 0 13px;
}

/* Strip de tabs bajo el head del drawer */
.adm-drawer__tabs {
    flex: 0 0 auto;
    padding: 10px 16px 0;
}

/* =====================================================================
   25. WIZARD STEPS — pasos numerados (flujo de creación)
   ===================================================================== */
.adm-wiz {
    display: flex;
    align-items: center;
    gap: 7px;
}

.adm-wiz__step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--adm-text-muted);
    white-space: nowrap;
}

.adm-wiz__dot {
    width: 18px;
    height: 18px;
    border-radius: var(--adm-radius-pill);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    background: var(--adm-surface-sunken);
    border: 1px solid var(--adm-border-strong);
    color: var(--adm-text-muted);
}

.adm-wiz__step.is-active {
    color: var(--adm-text);
    font-weight: 600;
}

.adm-wiz__step.is-active .adm-wiz__dot {
    background: var(--adm-primary);
    border-color: var(--adm-primary);
    color: var(--adm-on-primary);
}

.adm-wiz__step.is-done .adm-wiz__dot {
    background: var(--adm-positive-soft);
    border-color: var(--adm-positive);
    color: var(--adm-positive);
}

.adm-wiz__bar {
    flex: 1 1 auto;
    height: 1px;
    min-width: 10px;
    background: var(--adm-border);
}

/* Panes dentro del body del drawer */
.adm-drawer__body [data-pane] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.adm-drawer__body [data-pane][hidden] {
    display: none;
}

/* =====================================================================
   13. Utilidad de paneles (uno visible a la vez)
   ===================================================================== */
.adm-panel[hidden] {
    display: none;
}
[hidden] {
    display: none !important;
}

/* =====================================================================
   15. FORMULARIOS — campos, inputs, selects, switch, checkbox
   ===================================================================== */
.adm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.adm-field>label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--adm-text-muted);
}

.adm-field__hint {
    margin: 0;
    font-size: 11px;
    color: var(--adm-text-faint);
}

/* Fila label-izquierda / control-derecha (para switches) */
.adm-field--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.adm-field--row>label {
    font-size: 12.5px;
    color: var(--adm-text);
}

.adm-field--row .adm-field__hint {
    margin-top: 2px;
}

.adm-input,
.adm-select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
    color: var(--adm-text);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.adm-input:focus,
.adm-select:focus {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px var(--adm-primary-soft);
}

.adm-input::placeholder {
    color: var(--adm-text-faint);
}

textarea.adm-input {
    height: auto;
    min-height: 64px;
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.45;
}

.adm-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    cursor: pointer;
}

/* Input con sufijo (ej. comisión %) */
.adm-input-wrap {
    position: relative;
    display: flex;
}

.adm-input-wrap .adm-input {
    width: 100%;
}

.adm-input-wrap__suffix {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--adm-text-muted);
    pointer-events: none;
}

/* Switch (toggle) */
.adm-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.adm-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.adm-switch__track {
    position: absolute;
    inset: 0;
    border-radius: var(--adm-radius-pill);
    background: var(--adm-border-strong);
    transition: background 0.15s ease;
}

.adm-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--adm-shadow-sm);
    transition: transform 0.15s ease;
}

.adm-switch input:checked+.adm-switch__track {
    background: var(--adm-primary);
}

.adm-switch input:checked+.adm-switch__track::after {
    transform: translateX(14px);
}

.adm-switch input:disabled+.adm-switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Checkbox (lista de sucursales, etc.) */
.adm-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--adm-text);
    cursor: pointer;
    padding: 6px 0;
}

.adm-check .adm-check__sub {
    margin-left: auto;
    font-size: 11px;
    color: var(--adm-text-faint);
}

/* -----------------------------------------------------------------
   Checkbox + radio custom (dibujados, no nativos) — GLOBAL
   Se aplican a TODO input[type=checkbox|radio] dentro de .adm-app,
   sin importar el wrapper ni tocar el markup (los templates JS con
   <input> pelón quedan cubiertos). `appearance:none` reemplaza el
   control del SO por una caja/círculo con tokens del design system.
   Se EXCLUYE el input oculto del switch (.adm-switch input).
   ----------------------------------------------------------------- */
.adm-app input[type='checkbox']:not(.adm-switch input),
.adm-app input[type='radio']:not(.adm-switch input) {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    display: inline-grid;
    place-content: center;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--adm-border-strong);
    border-radius: 5px;
    background: var(--adm-surface);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    vertical-align: middle;
    transition:
        border-color 0.12s ease,
        background-color 0.12s ease,
        box-shadow 0.12s ease;
}

.adm-app input[type='radio']:not(.adm-switch input) {
    border-radius: 50%;
}

/* Hover: el borde se tiñe de primario */
.adm-app input[type='checkbox']:not(.adm-switch input):not(:disabled):hover,
.adm-app input[type='radio']:not(.adm-switch input):not(:disabled):hover {
    border-color: var(--adm-primary);
}

/* Foco accesible: anillo suave (solo teclado) */
.adm-app input[type='checkbox']:not(.adm-switch input):focus-visible,
.adm-app input[type='radio']:not(.adm-switch input):focus-visible {
    outline: none;
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px var(--adm-primary-soft);
}

/* Estado marcado — checkbox: relleno primario + palomita blanca */
.adm-app input[type='checkbox']:not(.adm-switch input):checked,
.adm-app input[type='checkbox']:not(.adm-switch input):indeterminate {
    border-color: var(--adm-primary);
    background-color: var(--adm-primary);
}

.adm-app input[type='checkbox']:not(.adm-switch input):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

.adm-app input.pr-main-input[type='checkbox']:not(.adm-switch input):not(:disabled):hover,
.adm-app input.pr-main-input[type='checkbox']:not(.adm-switch input):focus-visible {
    border-color: var(--adm-positive);
}

.adm-app input.pr-main-input[type='checkbox']:not(.adm-switch input):focus-visible {
    box-shadow: 0 0 0 3px var(--adm-positive-soft);
}

.adm-app input.pr-main-input[type='checkbox']:not(.adm-switch input):checked {
    border-color: var(--adm-positive);
    background-color: var(--adm-positive);
}

/* Estado indeterminado — guion blanco */
.adm-app input[type='checkbox']:not(.adm-switch input):indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

/* Estado marcado — radio: relleno primario + punto blanco */
.adm-app input[type='radio']:not(.adm-switch input):checked {
    border-color: var(--adm-primary);
    background-color: var(--adm-primary);
    background-image: radial-gradient(circle at center, #fff 0 3px, transparent 3.5px);
}

.adm-app input[type='radio']:not(.adm-switch input):checked:active {
    transform: scale(0.94);
}

/* Deshabilitado */
.adm-app input[type='checkbox']:not(.adm-switch input):disabled,
.adm-app input[type='radio']:not(.adm-switch input):disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: var(--adm-surface-sunken);
}

.adm-app input[type='checkbox']:not(.adm-switch input):disabled:checked,
.adm-app input[type='radio']:not(.adm-switch input):disabled:checked {
    background-color: var(--adm-text-faint);
    border-color: var(--adm-text-faint);
}

.adm-check:has(input:disabled) {
    cursor: not-allowed;
    color: var(--adm-text-muted);
}

/* =====================================================================
   16. DRAWER — offcanvas de detalle/edición a la derecha
   Full height + backdrop con blur. Apertura/cierre vía window.admDrawer
   (helper en scripts/admin-v2/main.js); el backdrop vive en el layout.
   ===================================================================== */
.adm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(24, 24, 27, 0.28);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.adm-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.adm-drawer {
    /* Card flotante: full height con aire en los bordes + esquinas redondeadas */
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 520px;
    max-width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    z-index: 80;
    transform: translateX(calc(100% + 20px));
    transition: transform 0.22s ease;
}

.adm-drawer.is-open {
    transform: none;
}

.adm-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--adm-divider);
}

.adm-drawer__title {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-drawer__title h3 {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-drawer__title p {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.adm-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 0;
}

/* Muchos drawers envuelven sus campos en un <form>. Sin esto, el form es un
   único hijo flex y los .adm-field de dentro quedan pegados (sin el gap de
   13px), viéndose apelmazados. Propagamos el mismo layout columna+gap al form
   para que la separación entre campos sea idéntica la envuelvan o no. */
.adm-drawer__body>form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 0;
}

.adm-drawer__section {
    margin: 6px 0 -4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-text-faint);
}

.adm-drawer__section:first-child {
    margin-top: 0;
}

.adm-drawer__foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--adm-divider);
}

/* ---- Confirmación destructiva (window.admConfirm) ----
   Tarjeta centrada de 420px: el mismo look que traían inline los modales
   `delete*.modal.ejs`, ahora en un solo lugar. Sustituye al confirm() del
   navegador. Va por encima de los drawers (z-index 80) con su propio velo, para
   que confirmar algo desde dentro de un drawer no lo cierre detrás. */
.adm-confirm {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(24, 24, 27, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.adm-confirm.is-open {
    opacity: 1;
    pointer-events: auto;
}

.adm-confirm__card {
    width: 420px;
    max-width: 100%;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    overflow: hidden;
    transform: translateY(6px) scale(0.985);
    transition: transform 0.16s ease;
}

.adm-confirm.is-open .adm-confirm__card {
    transform: none;
}

.adm-confirm__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--adm-divider);
}

.adm-confirm__title {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-confirm__title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-text);
}

.adm-confirm__title p {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.adm-confirm__body {
    padding: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--adm-text);
}

.adm-confirm__ack {
    margin: 0;
    padding: 0 16px 14px;
    align-items: flex-start;
    border-bottom: 1px solid var(--adm-divider);
    padding-bottom: 14px;
}

.adm-confirm__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--adm-divider);
    background: var(--adm-surface-sunken);
}

/* =====================================================================
   17. CHIP de canal/marca (cuadro de color con iniciales)
   ===================================================================== */
.adm-chip {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--adm-radius);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.adm-chip .adm-ic {
    font-size: 15px;
}

.adm-chip--sm {
    width: 22px;
    height: 22px;
    border-radius: var(--adm-radius-sm);
    font-size: 7.5px;
}

.adm-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Fila de chips (canales vinculados, etc.) */
.adm-chips {
    display: flex;
    align-items: center;
    gap: 4px;
}

.adm-chips__empty {
    font-size: 12px;
    color: var(--adm-text-faint);
}

/* Etiquetas de producto: píldora con nombre (sobre .adm-badge), punto de color
   opcional y «×» para quitarla en la ficha. Una inactiva se ve atenuada. */
.adm-tagpills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.adm-tagpill.is-inactive {
    opacity: 0.55;
}

.adm-tagpill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-tagpill__remove {
    border: 0;
    background: none;
    padding: 0 0 0 2px;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

/* Renglón del drawer «Etiquetas». */
.adm-tagrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--adm-bg);
    padding: 0.5rem 0.75rem;
    border-radius: var(--adm-radius);
    border: 1px solid var(--adm-border);
}

.adm-tagrow.is-inactive .adm-tagrow__name {
    color: var(--adm-text-faint);
}

.adm-tagrow__color {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.adm-tagrow__name,
.adm-tagrow__input {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.adm-tagrow__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* =====================================================================
   19. PRICE ROWS — precios por lista, compactos y editables inline
   (escala a N listas: una fila delgada por lista, input solo al editar)
   ===================================================================== */
.adm-pricerows {
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    overflow: hidden;
}

.adm-pricerow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--adm-divider);
    cursor: pointer;
    transition: background 0.1s ease;
}

.adm-pricerow:last-child {
    border-bottom: none;
}

.adm-pricerow:hover {
    background: var(--adm-surface-sunken);
}

.adm-thumb {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--adm-radius-sm);
    object-fit: cover;
    background: var(--adm-surface-sunken);
    border: 1px solid var(--adm-border);
}

.adm-pricerow__main {
    flex: 1 1 auto;
    min-width: 0;
}

.adm-pricerow__name {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--adm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-pricerow__sub {
    display: block;
    font-size: 11px;
    color: var(--adm-text-muted);
}

.adm-pricerow__value {
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adm-pricerow__value.is-auto {
    color: var(--adm-text-muted);
    font-weight: 400;
}

/* Modo edición: nombre a la izquierda, controles compactos a la derecha */
.adm-pricerow.is-editing {
    background: var(--adm-surface-sunken);
    cursor: default;
    flex-wrap: nowrap;
}

.adm-pricerow.is-editing .adm-pricerow__main {
    flex: 1 1 0;
    min-width: 96px;
}

.adm-pricerow__edit {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.adm-pricerow__field {
    display: flex;
    align-items: center;
    gap: 4px;
}

.adm-pricerow__field-label {
    font-size: 11px;
    color: var(--adm-text-muted);
    white-space: nowrap;
}

.adm-pricerow__input {
    width: 84px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--adm-primary);
    border-radius: var(--adm-radius-sm);
    box-shadow: 0 0 0 3px var(--adm-primary-soft);
    font-family: inherit;
    font-size: 12.5px;
    text-align: right;
    outline: none;
}

.adm-pricerow__iva {
    width: 52px;
    height: 28px;
    padding: 0 6px;
    text-align: right;
}

.adm-pricerow__reset {
    border: none;
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--adm-primary);
    cursor: pointer;
    white-space: nowrap;
}

.adm-pricerow__reset:hover {
    color: var(--adm-primary-strong);
}

.adm-pricerow__save {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
}

.adm-pricerow__save .adm-ic {
    font-size: 14px;
}

/* =====================================================================
   20. IMAGE PICKER — imagen del producto (preview + acciones)
   ===================================================================== */
.adm-imgpick {
    display: flex;
    align-items: center;
    gap: 12px;
}

.adm-imgpick__preview {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px dashed var(--adm-border-strong);
    border-radius: var(--adm-radius-md);
    background: var(--adm-surface-sunken);
    color: var(--adm-text-faint);
    font-size: 22px;
    overflow: hidden;
}

.adm-imgpick__preview.has-image {
    border-style: solid;
}

.adm-imgpick__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adm-imgpick__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.adm-imgpick__actions .adm-field__hint {
    margin: 0;
}

/* =====================================================================
   18. PROGRESS — barra de cobertura/avance
   ===================================================================== */
.adm-progress {
    width: 90px;
    height: 4px;
    border-radius: var(--adm-radius-pill);
    background: var(--adm-divider);
    overflow: hidden;
    flex-shrink: 0;
}

.adm-progress__fill {
    height: 100%;
    border-radius: var(--adm-radius-pill);
    background: var(--adm-positive);
    transition: width 0.2s ease;
}

.adm-progress__fill.is-warn {
    background: var(--adm-warning);
}

/* Celda de cobertura: barra + texto */
.adm-coverage {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adm-coverage__text {
    font-size: 12px;
    color: var(--adm-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adm-coverage__warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--adm-warning);
    white-space: nowrap;
}

/* =====================================================================
   14. TOASTS — restyle de toastr al sistema Mercury
   (los !important son necesarios: toastr.css marca sus iconos
   base64 y algunos fondos con !important)
   ===================================================================== */
#toast-container>div.toast {
    position: relative;
    width: 330px;
    margin: 0 0 8px;
    padding: 12px 30px 12px 48px !important;
    background-color: var(--adm-surface) !important;
    background-position: 13px center !important;
    background-size: 25px 25px !important;
    background-repeat: no-repeat !important;
    color: var(--adm-text);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    box-shadow: var(--adm-shadow-lg);
    opacity: 1;
    font-family: var(--adm-font);
}

#toast-container>div.toast:hover {
    box-shadow: var(--adm-shadow-lg);
    opacity: 1;
}

/* Iconos en la paleta del sistema (cuadro redondeado soft + trazo 1.6,
   misma geometría lucide que el resto del admin) */
#toast-container>.toast-info {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='26' height='26' rx='7' fill='%234661F1' fill-opacity='0.09'/%3E%3Ccircle cx='13' cy='13' r='6.75' stroke='%234661F1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.0002 10H13.0077' stroke='%234661F1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.25 13H13V16H13.75' stroke='%234661F1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-success {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='26' height='26' rx='7' fill='%230F7A4D' fill-opacity='0.09'/%3E%3Cpath d='M7.75 13L11.5 16.75L19 9.25' stroke='%230F7A4D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-warning {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='26' height='26' rx='7' fill='%23B25E09' fill-opacity='0.09'/%3E%3Cpath d='M13 10V12.8362' stroke='%23B25E09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 15.6543L13 15.6899' stroke='%23B25E09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.74941 18.2504H18.2494C18.7463 18.2469 19.2092 17.9976 19.4856 17.5846C19.7619 17.1716 19.8158 16.6485 19.6294 16.1879L14.3044 7.00038C14.0402 6.5229 13.5376 6.22656 12.9919 6.22656C12.4462 6.22656 11.9436 6.5229 11.6794 7.00038L6.35441 16.1879C6.17171 16.6377 6.218 17.1481 6.47865 17.5577C6.7393 17.9673 7.18207 18.2254 7.66691 18.2504' stroke='%23B25E09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-error {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='26' height='26' rx='7' fill='%23D92D3F' fill-opacity='0.09'/%3E%3Cpath d='M17.5 8.5L8.5 17.5' stroke='%23D92D3F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 8.5L17.5 17.5' stroke='%23D92D3F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#toast-container .toast-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--adm-text);
}

#toast-container .toast-message {
    margin: 0;
    font-size: 12px;
    color: var(--adm-text-secondary);
}

#toast-container .toast-title+.toast-message {
    margin-top: 2px;
}

#toast-container .toast-message a {
    color: var(--adm-primary);
}

/* Botón de cierre (si closeButton: true).
   !important: toastr.css marca right/color con !important */
#toast-container .toast-close-button {
    position: absolute;
    top: 5px !important;
    right: 9px !important;
    color: var(--adm-text-faint) !important;
    text-shadow: none;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1;
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    color: var(--adm-text) !important;
    opacity: 1;
}

/* Barra de progreso slim */
#toast-container .toast-progress {
    height: 2px;
    background: var(--adm-border-strong);
    opacity: 1;
}

/* Corrección del diseño de TomSelect: evitar "caja dentro de caja" y desbordamiento */
.ts-wrapper.adm-select {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}

.ts-wrapper {
    width: 100% !important;
    max-width: 100%;
}

/* La altura, borde y radio deben coincidir EXACTAMENTE con .adm-input /
   .adm-select (32px, --adm-border-strong) para que un TomSelect no se vea
   más bajo ni con un borde más claro que los campos normales del sistema. */
.ts-control {
    border: 1px solid var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    background: var(--adm-surface, #fff);
    color: var(--adm-text);
    font-size: 12.5px;
    display: flex;
    align-items: center;
    box-shadow: none !important;
    cursor: text;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px var(--adm-primary-soft) !important;
}

.ts-control>.item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asegurar que el div de insumo pueda encogerse si es necesario */
.adm-rec__insumo {
    min-width: 160px;
    max-width: 100%;
}

/* La celda de insumo se enriquece con TomSelect: su .ts-control debe verse
   IGUAL que los campos de al lado (.adm-rec .adm-input): misma altura (30px),
   mismo borde (--adm-border-strong) y radio. Sin esto queda más bajo y con un
   borde más claro que la cantidad, y se ve desalineado. */
.adm-rec__insumo .ts-control {
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    border-color: var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    font-size: 12.5px;
}

/* ============================================================
   Modo SOLO LECTURA (read-only)
   La sucursal ve TODO de un producto de franquicia (flujo,
   receta, detalle) pero no puede modificar nada. Se activa con
   [data-readonly] en un ancestro: el <html> en las páginas de
   flujo/receta, o el <aside> del drawer en el menú de sucursal.
   Los controles de mutación se ocultan; los campos se congelan.
   ============================================================ */
.adm-ro-banner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--adm-primary-soft, #eef2ff);
    color: var(--adm-primary, #4f46e5);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.adm-ro-banner .adm-ic {
    width: 13px;
    height: 13px;
}

/* Filosofía: la vista de solo lectura debe verse IDÉNTICA a la de franquicia
   (mismos tamaños, filas, botones) — solo que nada responde. Por eso NO se
   ocultan controles ni se reflowea el layout: se congela el editor completo
   con pointer-events, y el guard de teclado impide escribir en los campos. */

/* Congelar TODO el editor (campos, botones de agregar/eliminar, toggles,
   arrastre). El canvas cubre la receta y el flujo; en el flujo se congela
   además el grip y "Agregar paso" del panel de pasos, dejando el CLICK de
   cada paso vivo para poder navegarlos. */
[data-readonly] .adm-fb__canvas,
[data-readonly] .adm-fb__steps .adm-fb-step__grip,
[data-readonly] #fbAddStep {
    pointer-events: none !important;
}

[data-readonly] .adm-fb-step {
    cursor: pointer;
}

/* Lo único que se oculta es GUARDAR: no existe en solo lectura. El resto del
   layout queda intacto para que coincida con la vista de franquicia. */
[data-readonly] #recSave,
[data-readonly] #fbSave {
    display: none !important;
}

/* ============================================================
   Command palette global (⌘K) — estilo Linear, tokens Mercury
   ============================================================ */
.adm-cmdk__overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    background: rgba(24, 24, 27, 0.32);
    backdrop-filter: blur(2px);
    /* El palette se monta en <body>, fuera de .adm-app: hay que fijar la
       tipografía Inter aquí o hereda el serif por defecto del navegador. */
    font-family: var(--adm-font);
    color: var(--adm-text);
}

.adm-cmdk__overlay[hidden] {
    display: none;
}

.adm-cmdk {
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: 0 16px 48px rgba(24, 24, 27, 0.24);
    overflow: hidden;
    animation: adm-cmdk-in 0.12s ease-out;
    /* Misma base tipográfica que .adm-app (13px), no el 16px por defecto. */
    font-size: 13px;
}

@keyframes adm-cmdk-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.adm-cmdk__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--adm-divider);
}

.adm-cmdk__searchic {
    width: 16px;
    height: 16px;
    color: var(--adm-text-muted);
    flex: none;
}

.adm-cmdk__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--adm-text);
}

.adm-cmdk__input::placeholder {
    color: var(--adm-text-faint);
}

.adm-cmdk__results {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
}

.adm-cmdk__group {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
}

.adm-cmdk__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--adm-radius-sm);
    cursor: pointer;
    color: var(--adm-text-secondary);
}

.adm-cmdk__item.is-active {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-strong);
}

.adm-cmdk__itemic {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-sunken);
    color: var(--adm-text-muted);
}

.adm-cmdk__item.is-active .adm-cmdk__itemic {
    background: #fff;
    color: var(--adm-primary);
}

.adm-cmdk__itemic .adm-ic {
    width: 15px;
    height: 15px;
}

.adm-cmdk__itemtext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.adm-cmdk__itemtitle {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-cmdk__item.is-active .adm-cmdk__itemtitle {
    font-weight: 600;
}

.adm-cmdk__itemsub {
    font-size: 11px;
    color: var(--adm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-cmdk__go {
    width: 15px;
    height: 15px;
    color: var(--adm-text-faint);
    opacity: 0;
    flex: none;
}

.adm-cmdk__item.is-active .adm-cmdk__go {
    opacity: 1;
    color: var(--adm-primary);
}

.adm-cmdk__state {
    padding: 32px 16px;
    text-align: center;
    color: var(--adm-text-muted);
    font-size: 13px;
}

.adm-cmdk__foot {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--adm-divider);
    background: var(--adm-surface-sunken);
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.adm-cmdk__foot .adm-kbd {
    margin-right: 2px;
}

/* ============================================================
   Homologación de toolbars: todos los controles a la misma altura (32px).
   `.adm-pill` (filtros, selector de sucursal, Exportar) medía 27px y quedaba
   más bajo que .adm-btn / .adm-input / .adm-select / TomSelect (todos 32px).
   ============================================================ */
.adm-toolbar .adm-pill,
.adm-toolbar .adm-filter__btn,
.adm-toolbar .adm-branchfilter__btn {
    height: 32px;
    padding: 0 11px;
}

/* ============================================================
   Drawer en solo-lectura (detalle de un ítem gestionado por la franquicia).
   Los controles se deshabilitan por JS; aquí se ocultan Guardar/Eliminar y
   se muestra el aviso. Las pestañas (fuera del body) siguen navegables y el
   cuerpo sigue con scroll para leer todo el detalle.
   ============================================================ */
.adm-drawer.is-readonly #pdSave,
.adm-drawer.is-readonly #pdDelete {
    display: none;
}

.adm-readonly-note {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface-sunken);
    color: var(--adm-text-secondary);
    font-size: 12.5px;
}

.adm-drawer.is-readonly .adm-readonly-note {
    display: flex;
}

.adm-readonly-note .adm-ic {
    width: 15px;
    height: 15px;
    color: var(--adm-text-muted);
    flex: none;
}

/* Producto de franquicia en sucursal: solo KDS es editable.
   Se muestra el aviso, se oculta Eliminar, pero Guardar sigue visible. */
.adm-drawer.is-franchise-product #pdDelete {
    display: none;
}

.adm-drawer.is-franchise-product .adm-readonly-note {
    display: flex;
}

/* ============================================================
   Equipo · Usuarios (PIN OTP + modal eliminar + toggle contraseña)
   ============================================================ */
.us-drawer-steps {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--adm-text-muted);
}

.us-pin {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.us-pin.is-open {
    display: flex;
}

.us-pin__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 24, 27, 0.32);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.us-pin__card {
    position: relative;
    width: 360px;
    max-width: 100%;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    padding: 22px;
    text-align: center;
}

.us-pin__head h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 650;
    color: var(--adm-text);
}

.us-pin__head p {
    margin: 0;
    font-size: 12.5px;
}

.us-pin__code {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0 6px;
}

.us-pin__digit {
    width: 52px;
    height: 60px;
    border: 1.5px solid var(--adm-border-strong);
    border-radius: var(--adm-radius-md);
    background: var(--adm-surface);
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: var(--adm-text);
    caret-color: var(--adm-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.us-pin__digit:focus {
    outline: none;
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px var(--adm-primary-soft);
}

.us-pin__digit.is-filled {
    border-color: var(--adm-primary);
}

.us-pin.has-error .us-pin__digit {
    border-color: var(--adm-danger);
}

.us-pin__error {
    min-height: 16px;
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--adm-danger);
}

.us-pin__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.us-pin__actions .adm-btn {
    flex: 1;
}

.us-pin--digits-6 .us-pin__card {
    width: 420px;
}

.us-pin--digits-6 .us-pin__digit {
    width: 44px;
    height: 52px;
    font-size: 22px;
}

.us-pin-temp .us-drawer-steps {
    margin: 0 0 4px;
}

.us-pin-temp .us-pin__card {
    width: 400px;
    text-align: left;
    padding: 20px 20px 16px;
}

.us-pin-temp .us-pin__head {
    margin-bottom: 12px;
}

.us-pin-temp .us-pin__head h3 {
    margin: 0 0 2px;
}

.us-pin-temp .us-pin__head p {
    margin: 0;
    color: var(--adm-text-muted);
}

.us-pin-temp__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.us-pin-temp__body .adm-field {
    margin: 0;
}

.us-pin-temp__body .adm-field > label {
    display: block;
    margin: 0;
    text-align: left;
}

.us-pin-temp__origin {
    margin: 0;
    font-size: 12.5px;
    color: var(--adm-text-muted);
    line-height: 1.35;
}

.us-pin-temp__origin strong {
    color: var(--adm-text);
    font-weight: 550;
}

.us-pin-temp__options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.us-pin-temp__options .adm-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-md);
    background: var(--adm-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.us-pin-temp__options .adm-check:has(input:checked) {
    border-color: var(--adm-primary);
    background: var(--adm-primary-soft);
}

.us-pin-temp__options .adm-check__sub {
    margin-left: auto;
}

/* Anula el margen grande del OTP genérico (.us-pin__code { margin: 20px 0 6px }) */
.us-pin-temp .us-pin__code {
    margin: 0;
    justify-content: flex-start;
}

.us-pin-temp .us-pin__digit {
    width: 48px;
    height: 54px;
    font-size: 22px;
}

.us-pin-temp .us-pin__error {
    text-align: left;
    min-height: 0;
    margin: 10px 0 0;
}

.us-pin-temp .us-pin__error:empty {
    display: none;
}

.us-pin-temp .us-pin__actions {
    margin-top: 14px;
    gap: 8px;
}

.us-pin-temp.is-step-2 .us-pin__actions .adm-btn {
    flex: 1;
}

/* Flatpickr en Mercury.
   El CSS vendido en dist/libs/flatpickr es el tema Tabler (.light-style …);
   el admin no usa esa clase, así que aquí va el skin real (fondo, sombra, días).
   Se monta en <body>, fuera de .adm-app → tokens también en .flatpickr-calendar. */
.flatpickr-calendar {
    z-index: 1100 !important;
    width: 307px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    font-family: var(--adm-font);
    font-size: 12.5px;
    color: var(--adm-text);
    line-height: 1.4;
    padding: 0 !important;
    /* Tabler pone overflow:visible al abrir → el .flatpickr-time cuadrado
       se asoma como “orejas” blancas bajo el border-radius. */
    overflow: hidden !important;
    background-clip: padding-box;
}

.flatpickr-calendar.open {
    display: inline-block;
    overflow: hidden !important;
}

.flatpickr-months {
    position: relative;
    height: 44px;
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flatpickr-month {
    height: 44px;
    overflow: visible;
    color: var(--adm-text);
    flex: 1;
}

/* Layout clásico: mes centrado, flechas a los lados del HEADER
   (no del calendario entero — top:50% sin position:relative en months
   anclaba las flechas a mitad de la grilla de días). */
.flatpickr-current-month {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-text);
    transform: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600;
    font-size: 13px;
    color: var(--adm-text);
    background: transparent;
    padding: 0 2px;
    height: auto;
    line-height: 1.2;
}

.flatpickr-current-month .numInputWrapper {
    width: 5.5ch;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    position: absolute !important;
    top: 8px !important;
    transform: none !important;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--adm-radius);
    fill: var(--adm-text-secondary);
    color: var(--adm-text-secondary);
    z-index: 4;
}

.flatpickr-prev-month.flatpickr-prev-month {
    left: 8px !important;
    right: auto !important;
}

.flatpickr-next-month.flatpickr-next-month {
    right: 8px !important;
    left: auto !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--adm-hover);
    opacity: 1;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 12px;
    height: 12px;
}

.flatpickr-weekdays {
    background: transparent;
    height: 28px;
    margin-top: 2px;
}

.flatpickr-weekdaycontainer {
    padding: 0 8px;
}

span.flatpickr-weekday {
    color: var(--adm-text-muted);
    font-size: 11px;
    font-weight: 550;
    background: transparent;
}

.flatpickr-innerContainer,
.flatpickr-rContainer {
    display: block;
}

.flatpickr-days {
    width: 307px !important;
    background: var(--adm-surface);
}

.dayContainer {
    width: 307px;
    min-width: 307px;
    max-width: 307px;
    padding: 4px 8px 8px;
}

.flatpickr-day {
    color: var(--adm-text);
    border-radius: var(--adm-radius);
    border: none;
    max-width: 39px;
    height: 36px;
    line-height: 36px;
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--adm-hover);
    border-color: transparent;
    color: var(--adm-text);
}

.flatpickr-day.today {
    border: 1px solid var(--adm-primary);
    background: transparent;
    color: var(--adm-primary);
    font-weight: 600;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--adm-primary-soft);
    border-color: var(--adm-primary);
    color: var(--adm-primary-strong);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--adm-primary) !important;
    border-color: var(--adm-primary) !important;
    color: var(--adm-on-primary) !important;
    font-weight: 600;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--adm-text-faint);
}

.flatpickr-day.flatpickr-disabled {
    cursor: not-allowed;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    height: 40px;
    border-top: 1px solid var(--adm-border);
    background: var(--adm-surface);
    max-height: 40px;
    border-bottom-left-radius: var(--adm-radius-lg);
    border-bottom-right-radius: var(--adm-radius-lg);
}

.flatpickr-time input {
    color: var(--adm-text);
    font-weight: 550;
    font-size: 13px;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--adm-text-secondary);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--adm-text-muted);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--adm-text-muted);
}

#usPinTempModal .is-hidden {
    display: none !important;
}

#udPinTempBlock {
    margin-bottom: 4px;
}

.us-temp-pins__list {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--adm-text-secondary);
}

.us-temp-pins__list li+li {
    margin-top: 4px;
}

.us-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.us-delete-modal.is-open {
    display: flex;
}

.us-delete-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 24, 27, 0.32);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.us-delete-modal__card {
    position: relative;
    width: 420px;
    max-width: 100%;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    overflow: hidden;
}

.us-delete-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-border);
}

.us-delete-modal__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--adm-danger);
}

.us-delete-modal__body {
    padding: 20px;
    font-size: 14px;
    color: var(--adm-text);
}

.us-delete-modal__body p {
    margin: 0;
}

.us-delete-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--adm-border);
    background: var(--adm-surface-sunken);
}

#usuarioDrawer .us-drawer-pin-value {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--adm-text-muted);
}

#usuarioDrawer .us-drawer-pin-value strong {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--adm-text);
}

#usuarioDrawer .us-drawer-skip-pin {
    color: var(--adm-danger);
    border-color: color-mix(in srgb, var(--adm-danger) 40%, var(--adm-border));
}

#usuarioDrawer .us-drawer-skip-pin:hover {
    background: color-mix(in srgb, var(--adm-danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--adm-danger) 55%, var(--adm-border));
}

#usuarioDrawer .us-drawer-step-panel {
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex-shrink: 0;
}

#usuarioDrawer .us-drawer-step-panel.is-hidden {
    display: none;
}

#usuarioDrawer .us-password-wrap .adm-input {
    padding-right: 36px;
}

#usuarioDrawer .us-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--adm-text-muted);
    text-decoration: none;
    border-radius: var(--adm-radius-sm);
}

#usuarioDrawer .us-password-toggle:hover {
    color: var(--adm-text);
    background: var(--adm-surface-sunken);
}

#usuarioDrawer .us-password-toggle svg {
    width: 18px;
    height: 18px;
}

#usuarioDrawer .us-drawer-passwords {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

#usuarioDrawer .adm-field .adm-sel {
    width: 100%;
}

.adm-drawer--wide {
    width: 760px;
}

/* Reglas de regalo: grid evita que el área clicable de una columna se monte
   sobre el selector vecino. El drawer de producto tiene espacio para leer los
   nombres completos sin encoger los controles numéricos. */
#productoDrawer .adm-reward-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 2fr) minmax(105px, 0.8fr) minmax(90px, 0.65fr) 32px;
    align-items: end;
    gap: 12px;
    margin-bottom: 10px;
    cursor: default;
    position: relative;
    isolation: isolate;
}

#productoDrawer .adm-reward-row > div {
    min-width: 0;
    position: relative;
    z-index: 1;
}

#productoDrawer .adm-reward-row .adm-select,
#productoDrawer .adm-reward-row .adm-input {
    width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

#productoDrawer .adm-reward-row [data-reward-remove] {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

@media (max-width: 820px) {
    #productoDrawer.adm-drawer--wide {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    #productoDrawer .adm-reward-row {
        grid-template-columns: minmax(130px, 1fr) minmax(180px, 2fr) 100px 80px 32px;
        gap: 8px;
    }
}

.adm-modifier-options-head {
    align-items: center;
    white-space: nowrap;
}

.adm-modifier-options-head > span {
    flex-shrink: 0;
}

.adm-modifier-options-head__default {
    flex: 0 0 22px;
}

.adm-modifier-options-head__name {
    flex: 1 1 auto;
    text-align: left;
}

.adm-modifier-options-head__price {
    flex: 0 0 110px;
    text-align: left;
}

.adm-modifier-options-head__quantity {
    flex: 0 0 90px;
    text-align: left;
}

.adm-modifier-options-head__sinlimite {
    flex: 0 0 70px;
    text-align: left;
    font-size: 11px;
    color: var(--adm-text-muted);
}

.adm-modifier-options-head__favorite {
    flex: 0 0 30px;
}

.adm-flow-options-head {
    align-items: center;
    white-space: nowrap;
}

.adm-flow-options-head > span {
    flex-shrink: 0;
    text-align: left;
}

.adm-flow-options-head__grip {
    flex: 0 0 14px;
}

.adm-flow-options-head__default {
    flex: 0 0 22px;
}

.adm-flow-options-head__name {
    flex: 1 1 auto !important;
}

.adm-flow-options-head__price {
    flex: 0 0 110px;
    padding-left: 12px;
}

.adm-flow-options-head__quantity {
    flex: 0 0 90px;
    font-size: 9px;
}

.adm-flow-options-head__unlimited {
    flex: 0 0 70px;
    color: var(--adm-text-muted);
    padding-left: 8px;
}

.adm-flow-options-head__ticket {
    flex: 0 0 76px;
}

.adm-flow-options-head__favorite,
.adm-flow-options-head__delete {
    flex: 0 0 30px;
}

/* =====================================================================
   CASCADA DE ARQUEO (detalle del corte de caja)

   Convierte el desglose del efectivo esperado (fondo + venta + entradas
   − retiros) en barras proporcionales, para que se vea DE DÓNDE nace la
   diferencia en vez de tener que restar mentalmente una lista de cifras.
   El ancho lo calcula la vista contra el renglón mayor del corte.
   ===================================================================== */
.adm-flow {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.adm-flow__row {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) minmax(90px, 2fr) minmax(84px, auto);
    align-items: center;
    gap: var(--adm-gap-lg);
    padding: 7px 0;
}

/* El renglón de total se separa con una regla, como una suma de columna. */
.adm-flow__row--total {
    border-top: 1px solid var(--adm-border-strong);
    margin-top: 4px;
    padding-top: 10px;
}

.adm-flow__label {
    font-size: 12px;
    color: var(--adm-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.adm-flow__row--total .adm-flow__label,
.adm-flow__row--total .adm-flow__amount {
    font-weight: 600;
    color: var(--adm-text);
}

/* Carril fijo: las barras se comparan entre sí, no contra su propio texto. */
.adm-flow__track {
    position: relative;
    height: 8px;
    border-radius: var(--adm-radius-pill);
    background: var(--adm-divider);
    overflow: hidden;
}

.adm-flow__bar {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--adm-radius-pill);
    background: var(--adm-text-faint);
    min-width: 2px;
}

.adm-flow__bar--in {
    background: var(--adm-positive);
}

.adm-flow__bar--out {
    background: var(--adm-danger);
}

.adm-flow__bar--expected {
    background: var(--adm-primary);
}

.adm-flow__bar--counted {
    background: var(--adm-text);
}

.adm-flow__amount {
    font-size: 12.5px;
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Movimientos individuales colgando de su renglón (los retiros del turno). */
.adm-flow__sub {
    display: flex;
    justify-content: space-between;
    gap: var(--adm-gap);
    font-size: 11.5px;
    color: var(--adm-text-muted);
    padding: 3px 0 3px 14px;
    border-left: 2px solid var(--adm-border);
    margin-left: 4px;
}

.adm-flow__sub span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Cierre de la cascada: el salto entre esperado y contado. */
.adm-flow__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--adm-gap);
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--adm-radius);
    background: var(--adm-neutral-soft);
}

.adm-flow__result--short {
    background: var(--adm-danger-soft);
}

.adm-flow__result--over {
    background: var(--adm-warning-soft);
}

.adm-flow__result-label {
    font-size: 12px;
    color: var(--adm-text-secondary);
}

.adm-flow__result-value {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ---- Barra de conciliación por método (dentro de la tabla) ---- */
.adm-recon {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 96px;
}

.adm-recon__track {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: var(--adm-radius-pill);
    background: var(--adm-divider);
    overflow: hidden;
}

.adm-recon__expected,
.adm-recon__counted {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--adm-radius-pill);
}

.adm-recon__expected {
    background: var(--adm-border-strong);
}

.adm-recon__counted {
    background: var(--adm-primary);
    height: 6px;
}

.adm-recon__counted--short {
    background: var(--adm-danger);
}

.adm-recon__counted--over {
    background: var(--adm-warning);
}

@media (max-width: 720px) {
    .adm-flow__row {
        grid-template-columns: 1fr auto;
    }

    .adm-flow__track {
        display: none;
    }
}

/* Matriz canal × método: una columna por método de pago, así que la tabla crece
   con el catálogo. Scrollea DENTRO de su card en vez de empujar la página. */
.adm-matrix-scroll {
    overflow-x: auto;
    margin: 0 calc(var(--adm-pad) * -1);
    padding: 0 var(--adm-pad);
}

.adm-matrix-scroll>.adm-table {
    min-width: 620px;
}

/* Renglón de tabla que señala algo pendiente de identificar (un cobro sin
   terminal o sin cuenta): no es un error de datos, es trabajo por hacer. */
.adm-row--warn>td {
    background: var(--adm-warning-soft);
}

.adm-row--warn>td:first-child {
    box-shadow: inset 2px 0 0 var(--adm-warning);
}

/* Aviso a nivel de página: una condición del entorno que limita lo que se puede
   hacer aquí (no un error de la acción del usuario). */
.adm-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: var(--adm-gap-lg);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--adm-text-secondary);
}

.adm-note .adm-ic {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--adm-text-muted);
}

.adm-note strong {
    color: var(--adm-text);
}

.adm-note code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    padding: 1px 5px;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-neutral-soft);
}

.adm-note--warn {
    border-color: var(--adm-warning);
    background: var(--adm-warning-soft);
}

.adm-note--warn .adm-ic {
    color: var(--adm-warning);
}

/* =====================================================================
   ATRIBUTOS — propósito, panel "Usado en" y leyenda
   ===================================================================== */

/* Segunda línea de una celda: el matiz que acompaña al dato principal
   ("Presentación / crea un producto por valor"). Antes cada tabla lo resolvía
   con un style inline distinto y ninguna coincidía con la de al lado. */
.adm-cell-sub {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: var(--adm-text-muted);
    margin-top: 1px;
}

/* El número de "Usado en" es un botón: que se vea que lo es. */
.mod-usedin.is-open {
    font-weight: 600;
}

/* Fila desplegable. Antes era un párrafo con los nombres pegados por puntos:
   en un atributo usado en 57 productos salía un muro de seis renglones que
   mezclaba dónde se PREGUNTA con dónde se DECLARA. */
.mod-usedin-row,
.mod-usedin-row:hover {
    background: var(--adm-surface-sunken);
    cursor: default;
}

.mod-usedin-row>td {
    padding: 0;
    border-bottom: 1px solid var(--adm-border);
}

.mod-usedin {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 13px 0 15px;
}

.mod-usedin__group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mod-usedin__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.mod-usedin__n {
    font-size: 12px;
    font-weight: 500;
    color: var(--adm-text);
    font-variant-numeric: tabular-nums;
}

.mod-usedin__hint {
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

/* Un bloque por categoría del mostrador. La rejilla deja el nombre de la
   categoría en su propia columna para poder recorrerlas en vertical. */
.mod-usedin__cats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 210px;
    overflow-y: auto;
}

.mod-usedin__cat {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: baseline;
}

.mod-usedin__cat-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.mod-usedin__cat-n {
    font-size: 11px;
    color: var(--adm-text-faint);
    font-variant-numeric: tabular-nums;
}

.mod-usedin__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mod-usedin__chip {
    padding: 2px 8px;
    border-radius: var(--adm-radius-sm);
    border: 0.5px solid var(--adm-border-strong);
    background: var(--adm-surface);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--adm-text-secondary);
    white-space: nowrap;
}

/* Leyenda al pie de la tabla: qué hace cada propósito. La rejilla mantiene los
   tres badges en la misma columna para poder leerlos en vertical. */
.adm-attr-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--adm-border);
}

.adm-attr-legend>div {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 10px;
    align-items: baseline;
}

.adm-attr-legend dt {
    margin: 0;
}

.adm-attr-legend dd {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--adm-text-muted);
}

.adm-attr-legend dd strong {
    color: var(--adm-text-secondary);
    font-weight: 500;
}

@media (max-width: 720px) {

    .adm-attr-legend>div,
    .mod-usedin__cat {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .mod-usedin__cat-name {
        justify-content: flex-start;
    }
}

/* =====================================================================
   ELEGIR ENTRE DOS CAMINOS (adm-choice)
   ===================================================================== */
/* Para decisiones donde equivocarse cuesta caro y desigual: crear un producto
   nuevo o enlazar uno que ya existe no se deshacen igual de barato. Las dos
   salidas se dibujan como tarjetas para que la decisión se vea ANTES de pulsar,
   y el cuerpo de cada una solo aparece cuando está elegida — así no hay dos
   formularios compitiendo por atención. */
.adm-choice {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.adm-choice__opt {
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
    padding: 10px 12px;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.adm-choice__opt:hover {
    border-color: var(--adm-border-strong);
}

.adm-choice__opt:has(input:checked) {
    border-color: var(--adm-primary);
    background: var(--adm-primary-soft);
}

.adm-choice__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: start;
    cursor: pointer;
    margin: 0;
}

.adm-choice__head>input {
    grid-row: 1 / span 2;
    margin-top: 2px;
}

.adm-choice__t {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--adm-text);
}

.adm-choice__d {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--adm-text-muted);
}

.adm-choice__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 9px 0 2px 26px;
}

.adm-choice__opt:not(:has(input:checked)) .adm-choice__body {
    display: none;
}

/* Renglón extra dentro de una tarjeta de elección: el ejemplo y la consecuencia.
   Van como bloque y no pegados al texto porque son lo que de verdad decide —
   "crea un producto por valor" pesa más que el título— y en línea se leían como
   una coletilla. */
.adm-choice__ex {
    display: block;
    margin-top: 3px;
    color: var(--adm-text-faint);
}

.adm-choice__opt:has(input:checked) .adm-choice__ex {
    color: var(--adm-text-muted);
}

/* =====================================================================
   GUÍA DE PANTALLA (adm-guide)
   ===================================================================== */
/* El mapa del modelo para quien entra por primera vez. Se abre sola una vez y
   después vive como un renglón: quien ya lo sabe no debe pagar el espacio, y
   quien no, no debería tener que deducirlo leyendo la tabla. */
.adm-guide {
    display: block;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
    margin-bottom: 14px;
    overflow: hidden;
}

.adm-guide__toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 13px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.adm-guide__toggle:hover {
    background: var(--adm-hover);
}

.adm-guide__toggle>.adm-ic {
    flex: 0 0 auto;
    color: var(--adm-primary);
}

.adm-guide__title {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--adm-text);
}

/* La primera línea de la explicación, visible incluso cerrada: con la guía
   plegada el encabezado solo decía "¿Qué es un producto?", que es una pregunta,
   no una respuesta. */
.adm-guide__entry {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: var(--adm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-guide__chev {
    flex: 0 0 auto;
    color: var(--adm-text-faint);
    transition: transform 0.15s ease;
}

.adm-guide__toggle[aria-expanded='true'] .adm-guide__chev {
    transform: rotate(180deg);
}

.adm-guide__body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 4px 13px 13px;
    border-top: 1px solid var(--adm-divider);
}

/* Las tres piezas del catálogo, en fila. Marca en cuál estás para que se lea
   como un mapa y no como tres definiciones sueltas. */
.adm-guide__map {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 11px;
}

.adm-guide__piece {
    flex: 1 1 170px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-sunken);
}

.adm-guide__piece.is-here {
    border-color: var(--adm-primary);
    background: var(--adm-primary-soft);
}

.adm-guide__piece-n {
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-text);
}

.adm-guide__piece-q {
    font-size: 11.5px;
    color: var(--adm-text-secondary);
}

.adm-guide__piece-e {
    font-size: 11px;
    color: var(--adm-text-faint);
}

.adm-guide__map-sep {
    align-self: center;
    font-size: 12px;
    color: var(--adm-text-faint);
}

.adm-guide__blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 11px 18px;
}

.adm-guide__block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.adm-guide__t {
    font-size: 12px;
    font-weight: 500;
    color: var(--adm-text);
}

.adm-guide__d {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--adm-text-muted);
}

.adm-guide__ex {
    display: block;
    color: var(--adm-text-faint);
}

.adm-guide__done {
    align-self: flex-start;
}

@media (max-width: 720px) {
    .adm-guide__entry {
        display: none;
    }

    .adm-guide__map-sep {
        display: none;
    }
}

/* Cuenta dentro de una pestaña: cuántos hay de ese tipo. Sin ella, una pestaña
   vacía parece un filtro roto en vez de un catálogo sin ese tipo todavía. */
.adm-tab__n {
    margin-left: 6px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--adm-text-faint);
}

.adm-tab.is-active .adm-tab__n {
    color: var(--adm-text-muted);
}

/* Los tres tipos de atributo, separados del resto de la guía: son alternativas
   de una misma decisión, no explicaciones sueltas más. */
.adm-guide__kinds {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-sunken);
}

.adm-guide__kinds-t {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
}

/* =====================================================================
   Editor de permisos (drawer de usuario · Roles y permisos)
   public/scripts/shared/permissions-editor.js
   ===================================================================== */
.adm-perm {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adm-perm__group {
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
}

.adm-perm__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.adm-perm__summary::-webkit-details-marker {
    display: none;
}

.adm-perm__chev {
    color: var(--adm-text-muted);
    transition: transform 0.12s ease;
}

.adm-perm__group[open] .adm-perm__chev {
    transform: rotate(90deg);
}

.adm-perm__group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-text);
}

.adm-perm__group-sub {
    font-size: 11px;
    color: var(--adm-text-faint);
}

.adm-perm__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--adm-text-secondary);
}

.adm-perm__rows {
    border-top: 1px solid var(--adm-divider);
    padding: 4px 10px 8px;
}

.adm-perm__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.adm-perm__row + .adm-perm__row {
    border-top: 1px solid var(--adm-divider);
}

.adm-perm__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.adm-perm__label {
    font-size: 12.5px;
    color: var(--adm-text);
}

.adm-perm__hint {
    font-size: 11.5px;
    color: var(--adm-text-muted);
}

.adm-perm__levels {
    flex-shrink: 0;
}

.adm-perm__levels .adm-tab {
    padding: 0 9px;
    font-size: 11.5px;
}

.adm-perm__levels .adm-tab:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.adm-perm__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--adm-text-secondary);
}

.adm-perm__head .adm-btn {
    margin-left: auto;
}

/* =====================================================================
   Página en solo lectura (permiso "Ver"): se retiran las acciones marcadas
   con data-requires-edit. La API rechaza igual cualquier escritura.
   ===================================================================== */
[data-page-access='view'] [data-requires-edit] {
    display: none !important;
}

.adm-readonly-pill {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-pill);
    background: var(--adm-surface-raised);
    box-shadow: var(--adm-shadow);
    color: var(--adm-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

/* Configuración › Caja · renglones de la nota de corte */
.adm-cutnote {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adm-cutnote__line {
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adm-cutnote__head {
    display: flex;
    gap: 8px;
    align-items: center;
}

.adm-cutnote__head .adm-input {
    flex: 1 1 auto;
}

.adm-cutnote__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}