/* ============================================================
   Inventario Pro — Apple Skin (F4 UI + F5 responsive polish)
   Capa final encima de bootstrap + style.css. No altera markup.
   ============================================================ */

:root {
    --bs-primary: #0071e3;
    --bs-primary-rgb: 0, 113, 227;
    --bs-secondary: #86868b;
    --bs-secondary-rgb: 134, 134, 139;
    --bs-success: #34c759;
    --bs-success-rgb: 52, 199, 89;
    --bs-danger: #ff3b30;
    --bs-danger-rgb: 255, 59, 48;
    --bs-warning: #ff9500;
    --bs-warning-rgb: 255, 149, 0;
    --bs-info: #5ac8fa;
    --bs-info-rgb: 90, 200, 250;
    --bs-light: #f5f5f7;
    --bs-body-bg: #f5f5f7;
    --bs-body-color: #1d1d1f;
    --bs-secondary-color: #86868b;
    --bs-border-color: rgba(0, 0, 0, 0.1);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
    --bs-link-color: #0066cc;
    --primary: #0071e3;
    --primary-light: #0a84ff;
    --primary-dark: #0062d6;
    --primary-rgb: 0, 113, 227;
    --bg-gradient: radial-gradient(circle at 20% 10%, #eef3ff 0%, #f5f5f7 45%, #eceef2 100%);
    --login-card-bg: rgba(255, 255, 255, 0.72);
    --sidebar-gradient: linear-gradient(180deg, rgba(250, 250, 252, 0.96) 0%, rgba(241, 242, 246, 0.98) 100%);
    --sidebar-text: #1d1d1f;
    --sidebar-text-muted: #6e6e73;
    --sidebar-hover-bg: rgba(0, 113, 227, 0.09);
    --sidebar-active-bg: linear-gradient(135deg, #0071e3 0%, #0a84ff 100%);
    --sidebar-text-picked: #1d1d1f;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sb-submenu-bg: rgba(0, 113, 227, 0.04);
    --sb-subhead-color: #0071e3;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
}

[data-bs-theme="dark"] {
    --bs-primary: #0a84ff;
    --bs-primary-rgb: 10, 132, 255;
    --bs-secondary: #98989d;
    --bs-secondary-rgb: 152, 152, 157;
    --bs-success: #30d158;
    --bs-success-rgb: 48, 209, 88;
    --bs-danger: #ff453a;
    --bs-danger-rgb: 255, 69, 58;
    --bs-warning: #ff9f0a;
    --bs-warning-rgb: 255, 159, 10;
    --bs-info: #64d2ff;
    --bs-info-rgb: 100, 210, 255;
    --bs-body-bg: #161617;
    --bs-body-color: #f5f5f7;
    --bs-secondary-color: #98989d;
    --bs-border-color: rgba(255, 255, 255, 0.14);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);
    --bs-link-color: #2997ff;
    --primary: #0a84ff;
    --primary-light: #64d2ff;
    --primary-dark: #0071e3;
    --primary-rgb: 10, 132, 255;
    --bg-gradient: radial-gradient(circle at 20% 10%, #1a1a1c 0%, #161617 45%, #0d0d0f 100%);
    --login-card-bg: rgba(30, 30, 32, 0.74);
    --sidebar-gradient: linear-gradient(180deg, #101012 0%, #050506 100%);
    --sidebar-text: #f5f5f7;
    --sidebar-text-muted: #98989d;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: linear-gradient(135deg, #0a84ff 0%, #2997ff 100%);
    --sidebar-text-picked: #f5f5f7;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sb-submenu-bg: rgba(255, 255, 255, 0.03);
    --sb-subhead-color: #64d2ff;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
    --card-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* F8-B · Modo oscuro: acento de color (nada gris apagado) */
[data-bs-theme="dark"] .top-bar {
    background: linear-gradient(160deg, rgba(10, 80, 170, 0.20) 0%, color-mix(in srgb, var(--bs-body-bg) 76%, transparent) 46%);
}
[data-bs-theme="dark"] .top-bar .btn-outline-secondary {
    --bs-btn-color: #8ab4ff;
    --bs-btn-border-color: rgba(120, 168, 255, 0.35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(10, 132, 255, 0.25);
    --bs-btn-hover-border-color: #0a84ff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a84ff;
    --bs-btn-active-border-color: #0a84ff;
}
[data-bs-theme="dark"] .top-bar .btn-outline-primary {
    --bs-btn-bg: rgba(10, 132, 255, 0.16);
    --bs-btn-color: #fff;
}
[data-bs-theme="dark"] .top-bar .btn:disabled,
[data-bs-theme="dark"] .top-bar .btn.disabled { opacity: 0.4; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

/* ---------- Sidebar: cristal claro (light) / grafito (dark) ---------- */
.sidebar {
    background: var(--sidebar-gradient);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06);
    border-right: 1px solid var(--sidebar-border);
}
.sidebar .nav-link {
    color: var(--sidebar-text);
    border-radius: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 1px 6px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
    transform: translateX(2px);
}
.sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
}
.sidebar .nav-link:focus-visible {
    outline: 2px solid var(--sidebar-subhead-color, #0a84ff);
    outline-offset: 2px;
}
.sidebar-header h3 { font-weight: 700; }
.sidebar-header { border-bottom: 1px solid var(--sidebar-border); }
.sidebar-header h3 { color: var(--sidebar-text); }
.sidebar-header p { color: var(--sidebar-text-muted); }
.sidebar.collapsed .sb-chev { display: none !important; }

/* Grupo activo (la sección en la que estás) */
.sidebar .sb-group.sb-active-group > .sb-trigger {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
    font-weight: 700;
}
.sidebar .sb-group.sb-active-group > .sb-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 4px;
    background: var(--sidebar-subhead-color, #0a84ff);
}
.sidebar .sb-group.sb-active-group > .sb-trigger { position: relative; }
/* En modo colapsado el icono del grupo activo se pinta relleno */
.sidebar.collapsed li.sb-group.sb-active-group > .sb-trigger {
    background: var(--sidebar-active-bg);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
}
.sidebar.collapsed li.sb-group.sb-active-group > .sb-trigger::after { display: none; }
/* En el flyout, la opción activa debe verse marcada (antes el hover lo tapaba) */
.sidebar.collapsed .flyout-parent.flyout-open > .sb-submenu .nav-link.active {
    background: var(--sidebar-active-bg);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
}

/* Tooltip flotante del modo recogido (lo pinta app.js en <body>, así no lo
   recorta el overflow-x:hidden del sidebar). */
.sb-float-tip {
    position: fixed;
    z-index: 1100;
    display: none;
    background: #0f172a;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    animation: sbTipIn 0.12s ease;
}
@keyframes sbTipIn {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

/* Logo de la marca: se adapta al tema */
.sidebar-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    object-fit: contain;
    border-radius: 12px;
}
.sidebar-logo--branch {
    max-width: 80px;
    max-height: 80px;
    border: 2px solid var(--sidebar-border);
    padding: 4px;
}
[data-bs-theme="dark"] .sidebar-logo:not(.sidebar-logo--branch) {
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
[data-bs-theme="dark"] .sidebar-logo--branch {
    filter: none;
    background: #fff;
    border-radius: 12px;
}

/* Headings de sección + acordeones modernos */
.sidebar .sb-heading {
    color: var(--sidebar-text-muted);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
.sidebar .sb-group { margin-top: 4px; }
.sidebar .sb-trigger .sb-chev {
    margin-left: auto;
    transition: transform 0.22s ease;
    opacity: 0.6;
}
.sidebar .sb-trigger[aria-expanded="true"] .sb-chev { transform: rotate(180deg); opacity: 1; }
.sidebar .sb-submenu {
    background: var(--sb-submenu-bg);
    border-radius: 12px;
    margin: 2px 6px 6px;
    display: none;
}
.sidebar .sb-group.sb-open > .sb-submenu {
    display: block;
    animation: sbSubIn 0.18s ease;
}
@keyframes sbSubIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.sidebar .sb-submenu .nav-link {
    padding-left: 34px;
    font-size: 0.86rem;
    font-weight: 450;
    margin: 1px 4px;
}
.sidebar .sb-submenu .nav-link .fa-fw { opacity: 0.75; }
.sidebar .sb-subhead {
    display: block;
    padding: 8px 14px 2px;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: var(--sb-subhead-color);
}
[data-bs-theme="dark"] .sidebar .sb-subhead { opacity: 0.92; }

/* ---------- Acordeones compactos tipo "barrita" (escritorio) ----------
   Cuando un grupo (p. ej. Administración) se despliega en la barra, sus
   opciones se muestran como chips en una fila envolvente en vez de una lista
   vertical larga (Administración para el general tiene MUCHOS enlaces y la
   barra se veía enorme). El flyout en modo recogido sigue en lista. */
@media (min-width: 993px) {
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu {
        display: block;
        padding: 4px 6px 8px;
        margin: 2px 8px 8px;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu > ul.nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-start;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu > ul.nav > li.nav-item {
        margin: 0;
        flex: 0 0 auto;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu li.nav-subhead {
        flex: 1 1 100%;
        padding: 6px 8px 2px;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        margin: 0;
        font-size: 0.74rem;
        font-weight: 550;
        border-radius: 999px;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.74rem;
        opacity: 0.8;
        margin: 0;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link.active {
        box-shadow: none;
    }
}
.sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link:active {
        display: block !important;
    }

/* ---------- Sub-acordeones anidados dentro de Administración ----------
   Administración ahora agrupa sub-acordeones (Mi Sucursal, Personal,
   Configuración, Control General). Cada sub-acordeón es un trigger a ancho
   completo con chevron; su submenu (nivel 2) va en LISTA VERTICAL INDENTADA,
   NO en la "barrita" de chips que usa el primer nivel. Los selectores con
   #adminMenuAll ganan especificidad por ID sobre las reglas de chips. */
@media (min-width: 993px) {
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 10px;
        margin: 2px 0;
        border-radius: 9px;
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.8;
        margin: 0;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger:hover {
        transform: none;
    }
    /* Sub-submenus (nivel 2) abiertos dentro de #adminMenuAll: lista vertical */
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu {
        margin: 2px 0 6px 10px;
        padding: 2px 4px;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 5px 10px 5px 26px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.76rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.76rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link.active {
        box-shadow: none;
    }
}
.sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:active {
        display: block !important;
    }

/* ---------- Finanzas: lista vertical con separación (NO "chips") ----------
   El grupo Finanzas (Capital / Gastos Fijos / Liquidación Semanal) tiene
   enlaces planos y pocos items; la regla genérica de la "barrita" (chips
   inline) lo comprime sin separación y parece colapsado. Con especificidad
   de ID (#finMenu) se fuerza lista vertical separada, igual que Admin. */
@media (min-width: 993px) {
    .sidebar:not(.collapsed) #finMenu {
        padding: 6px 6px 8px;
        margin: 2px 8px 8px;
    }
    .sidebar:not(.collapsed) #finMenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        align-items: stretch;
    }
    .sidebar:not(.collapsed) #finMenu > ul.nav > li.nav-item {
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
    }
    .sidebar:not(.collapsed) #finMenu li.nav-subhead {
        flex: 1 1 100%;
        width: 100%;
        padding: 6px 8px 2px;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 6px 12px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link.active {
        box-shadow: none;
    }
}
.sidebar:not(.collapsed) #finMenu .nav-link:active {
        outline: none !important;
        background: var(--sidebar-active-bg) !important;
    }

/* ---------- Administración DENTRO del flyout (modo recogido) ----------
   Cuando el sidebar está recogido y el usuario abre Administración, el panel
   vuela al lado del sidebar y los sub-acordeones (Mi Sucursal, Usuarios, etc.)
   se despliegan dentro de él en lista vertical con acento a la izquierda. */
@media (min-width: 993px) {
    .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-subhead .sb-subhead {
        display: block;
    }
    .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 7px 12px;
        margin: 2px 4px;
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1.25;
    }
    .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger i.fa-fw {
        width: auto;
        font-size: 0.8rem;
        opacity: 0.85;
        margin: 0;
    }
    .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger:hover {
        background: var(--sidebar-hover-bg);
    }
    .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu {
        margin: 2px 0 6px 16px;
        padding: 2px 4px;
        border-left: 2px solid var(--sb-subhead-color, #0a84ff);
        border-radius: 0 10px 10px 0;
    }
    .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }
    .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 6px 10px 6px 12px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link.active {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text);
        box-shadow: none;
    }
}

/* ---------- Top bar: cristal ---------- */
.top-bar {
    background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px !important;
    box-shadow: var(--card-shadow);
}

/* Botón para desplegar/recoger la sidebar (solo móvil): píldora de cristal visible en ambos temas */
.sidebar-toggle-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.55);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(255, 255, 255, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.sidebar-toggle-btn i {
    font-size: 0.95rem;
    color: #1d1d1f;
    transition: color 0.2s ease, transform 0.2s ease;
}
.sidebar-toggle-btn:hover, .sidebar-toggle-btn:focus-visible {
    color: #0071e3;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 113, 227, 0.4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 113, 227, 0.16);
    transform: scale(1.06);
}
.sidebar-toggle-btn:hover i, .sidebar-toggle-btn:focus-visible i { color: #0071e3; }
.sidebar-toggle-btn:active { transform: scale(0.94); }
[data-bs-theme="dark"] .sidebar-toggle-btn {
    color: #f5f5f7;
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .sidebar-toggle-btn i { color: #f5f5f7; }
[data-bs-theme="dark"] .sidebar-toggle-btn:hover, [data-bs-theme="dark"] .sidebar-toggle-btn:focus-visible {
    color: #2997ff;
    background: rgba(60, 60, 63, 0.75);
    border-color: rgba(41, 151, 255, 0.5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(41, 151, 255, 0.22);
}
[data-bs-theme="dark"] .sidebar-toggle-btn:hover i, [data-bs-theme="dark"] .sidebar-toggle-btn:focus-visible i { color: #2997ff; }

/* Cerrar sidebar (móvil): visible en ambos temas (style.css lo fuerza blanco) */
#closeSidebar {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.06);
}
#closeSidebar:hover { background: rgba(0, 0, 0, 0.12); }
[data-bs-theme="dark"] #closeSidebar {
    color: #f5f5f7;
    background: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] #closeSidebar:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- Cards: hairlines + sombras suaves ---------- */
.card, .card-modern {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover, .card-modern:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.card .card-header, .card-modern .card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 650;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-modern .card-footer { border-top: 1px solid var(--bs-border-color); background: transparent; }

/* ---------- Botones: píldora azul Apple ---------- */
.btn { border-radius: 980px; letter-spacing: 0.01em; }
.btn-primary, .btn-login {
    background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.28);
}
.btn-primary:hover, .btn-login:hover {
    background: linear-gradient(180deg, #2997ff 0%, #0a84ff 100%);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.35);
}
.btn-primary:focus, .btn-login:focus { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.28); }
.btn-outline-primary {
    color: #0071e3;
    border-color: #0071e3;
    border-radius: 980px;
}
.btn-outline-primary:hover {
    background: #0071e3;
    border-color: #0071e3;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}
.btn-success { background: #34c759; border-color: transparent; border-radius: 980px; }
.btn-danger { background: #ff3b30; border-color: transparent; border-radius: 980px; }
.btn-warning { background: #ff9500; border-color: transparent; border-radius: 980px; color: #fff; }
.btn-info { background: #5ac8fa; border-color: transparent; border-radius: 980px; color: #1d1d1f; }
[data-bs-theme="dark"] .btn-success { background: #30d158; }
[data-bs-theme="dark"] .btn-danger { background: #ff453a; }
[data-bs-theme="dark"] .btn-warning { background: #ff9f0a; }
[data-bs-theme="dark"] .btn-info { background: #64d2ff; }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15);
}
.input-group-text { border-radius: 10px 0 0 10px; }
.input-group > .form-control:not(:first-child) { border-radius: 0 10px 10px 0; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; }
.table thead th {
    background: color-mix(in srgb, var(--bs-body-bg) 82%, var(--bs-primary) 8%);
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
}
.table thead th, .table > :not(caption) > * > * {
    border-color: var(--bs-border-color);
}
.table-hover tbody tr { transition: background-color 0.12s ease; }

/* ---------- Modales ---------- */
.modal-content {
    background-color: var(--bs-body-bg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.modal-header { border-bottom: 1px solid var(--bs-border-color); }
.modal-footer { border-top: 1px solid var(--bs-border-color); }

/* ---------- Badges / dropdowns / pagination ---------- */
.badge { border-radius: 7px; letter-spacing: 0.02em; font-weight: 600; }
.dropdown-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.pagination .page-link { border-radius: 8px; margin: 0 2px; }

/* ---------- Tarjetas de estadísticas / resumen ---------- */
.stat-card {
    border-radius: 18px;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.stat-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }

/* ---------- Login: cristal ---------- */
.login-card {
    background: var(--login-card-bg);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}
[data-bs-theme="dark"] .login-card { border-color: rgba(255, 255, 255, 0.12); }

/* ---------- Scrollbar sutil ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; background-clip: content-box; border-radius: 8px; }

/* ---------- F5 · Responsive polish extra ---------- */
@media (max-width: 1199px) {
    .card, .card-modern { border-radius: 18px; }
    .modal-content { border-radius: 18px; }
}
@media (max-width: 991px) {
    .card, .card-modern { border-radius: 16px; }
    .stat-card { border-radius: 16px; }
    .content { padding-left: 14px !important; padding-right: 14px !important; }
    /* Finanzas y Admin en viewport < 992px (sidebar expandido 265px en PC) */
    .sidebar:not(.collapsed) #finMenu {
        padding: 6px 6px 8px;
        margin: 2px 8px 8px;
    }
    .sidebar:not(.collapsed) #finMenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        align-items: stretch;
    }
    .sidebar:not(.collapsed) #finMenu > ul.nav > li.nav-item {
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
    }
    .sidebar:not(.collapsed) #finMenu li.nav-subhead {
        flex: 1 1 100%;
        width: 100%;
        padding: 6px 8px 2px;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 6px 12px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link.active {
        box-shadow: none;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link:active {
        outline: none !important;
        background: var(--sidebar-active-bg) !important;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 10px;
        margin: 2px 0;
        border-radius: 9px;
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.8;
        margin: 0;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger:hover {
        transform: none;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu {
        margin: 2px 0 6px 10px;
        padding: 2px 4px;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 5px 10px 5px 26px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.76rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.76rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link.active {
        box-shadow: none;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:active {
        display: block !important;
    }
}
@media (max-width: 767px) {
    .card, .card-modern { border-radius: 14px; box-shadow: var(--card-shadow); }
    .card-modern .card-header { font-size: 0.85rem; font-weight: 650; }
    .top-bar { border-radius: 12px !important; }
    .btn { padding: 6px 13px; }
}
@media (max-width: 575px) {
    .content { padding: 8px !important; }
    .card-modern .card-body { padding: 12px 10px; }
    .modal-dialog { margin: 0.5rem; }
    .modal-content { border-radius: 16px; }
    .table thead th { font-size: 0.66rem; }
}

/* ---------- F7 · Polish global (contraste, temas, foco) ---------- */
::selection { background: rgba(var(--bs-primary-rgb), 0.28); color: inherit; }
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent); }

/* ---------- F8-E · Login: fondo colorido estilo Apple ---------- */
body.login-page {
    background:
        radial-gradient(1100px 700px at 8% -10%, rgba(88, 86, 214, 0.55), transparent 60%),
        radial-gradient(900px 600px at 105% 5%, rgba(10, 132, 255, 0.55), transparent 60%),
        radial-gradient(800px 700px at 50% 110%, rgba(175, 82, 222, 0.42), transparent 62%),
        radial-gradient(600px 480px at 0% 100%, rgba(0, 199, 190, 0.35), transparent 60%),
        linear-gradient(150deg, #6c6cf0 0%, #5b8def 34%, #7f6cf0 68%, #5ce1e6 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}
[data-bs-theme="dark"] body.login-page {
    background:
        radial-gradient(1100px 700px at 8% -10%, rgba(88, 86, 214, 0.42), transparent 60%),
        radial-gradient(900px 600px at 105% 5%, rgba(10, 132, 255, 0.4), transparent 60%),
        radial-gradient(800px 700px at 50% 110%, rgba(175, 82, 222, 0.34), transparent 62%),
        linear-gradient(150deg, #101018 0%, #14142a 40%, #101832 100%);
}
.login-card { border-color: rgba(255, 255, 255, 0.55); }
.login-header h3 {
    background: linear-gradient(135deg, #5b8def 0%, #9d7bf5 55%, #ff6fa5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-bs-theme="dark"] .login-header h3 {
    background: linear-gradient(135deg, #64d2ff 0%, #b48bff 60%, #ff9bb4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.btn-login {
    background: linear-gradient(135deg, #5b8def 0%, #4f7de8 45%, #7a5cf0 100%);
    padding: 10px 16px;
    font-weight: 600;
}
.btn-login:hover {
    background: linear-gradient(135deg, #6f9cff 0%, #5b8def 45%, #8a70ff 100%);
    transform: translateY(-1px);
}

/* ---------- F8-F · Cartel fuera de línea ---------- */
.offline-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    padding: 10px 40px 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #ff9f0a 0%, #ff8a1f 50%, #ff5a2a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 18px rgba(255, 122, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.offline-banner.show {
    display: flex;
    animation: fpBannerDown 0.25s ease;
}
.offline-banner .spinner-border {
    width: 1rem;
    height: 1rem;
    --bs-spinner-border-width: 0.18em;
    flex-shrink: 0;
}
.offline-banner .offline-lock { margin-left: auto; opacity: 0.85; }
[data-bs-theme="dark"] .offline-banner {
    background: linear-gradient(90deg, #e8910a 0%, #ff7a2a 50%, #ff4f1a 100%);
}
@media (max-width: 575.98px) {
    .offline-banner { font-size: 12px; padding: 9px 34px 9px 12px; gap: 6px; }
    .offline-banner .offline-lock { display: none; }
}
@keyframes fpBannerDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-text-muted); border: 2px solid transparent; background-clip: content-box; border-radius: 8px; }
.table-hover tbody tr:hover { --bs-table-accent-bg: color-mix(in srgb, var(--bs-body-bg) 76%, var(--bs-primary) 6%) !important; }
.btn-link { color: var(--bs-link-color); }
.nav-pills.sf-tabs .nav-link { color: var(--bs-secondary-color); }
.nav-pills.sf-tabs .nav-link.active { background: var(--sidebar-active-bg, linear-gradient(135deg,#0071e3,#0a84ff)); color: #fff; box-shadow: 0 4px 14px rgba(0,113,227,0.3); }
.theme-transitioning, .theme-transitioning * { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important; }

/* ---------- F8 · Login responsive (card no rectangular en tablet/móvil) ---------- */
body.login-page .login-card { border-radius: 26px; }
@media (max-width: 1199.98px) { body.login-page .login-card { border-radius: 24px; } }
@media (max-width: 991.98px) {
    body.login-page { background-attachment: scroll; padding: 40px 16px; }
    body.login-page .login-card { border-radius: 22px; }
}
@media (max-width: 767.98px) {
    body.login-page .login-card { border-radius: 20px; width: 94%; max-width: 420px; }
}
@media (max-width: 575.98px) {
    body.login-page { padding: 26px 14px; }
    body.login-page .login-card { border-radius: 18px; width: 100%; }
    body.login-page .login-header { padding: 26px 20px 12px; }
    body.login-page .login-body { padding: 0 20px 26px; }
}
/* Cuentas de cliente (multi-ventas / tabs) en el POS */
#cuentas-fab {
    position: fixed; bottom: 84px; left: 18px; z-index: 1055;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 52px; height: 52px; border: none; border-radius: 50%;
    background: linear-gradient(180deg, #5ac8fa, #0a84ff); color: #fff;
    box-shadow: 0 8px 22px rgba(10, 132, 255, .4); font-size: 1.02rem;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, visibility .15s ease, left .3s cubic-bezier(0.4, 0, 0.2, 1);
}
#cuentas-fab:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(10, 132, 255, .5); }
#cuentas-fab:active { transform: scale(.96); }
#cuentas-fab .badge { font-size: .65rem; }
/* En el modo recogido, mientras un flyout del sidebar está abierto (p. ej. el de
   Administración), replegamos el FAB de Cuentas para que el panel no lo tape:
   se veía la barrita "asomando" por debajo del botón. Torna al soltar el menú. */
body.sb-flyout-open #cuentas-fab,
body.sb-nav-open #cuentas-fab {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.92);
    pointer-events: none;
}
.pos-tab-item .pos-tab-edit { flex: 0 0 auto; }
.pos-tab-item .btn:focus { box-shadow: none; }
@media (min-width: 992px) {
    #cuentas-fab { width: auto; height: 46px; bottom: 24px; left: 24px; padding: 0 18px; border-radius: 23px; font-size: .9rem; font-weight: 600; }
}
/* El FAB vive en el área de contenido: en escritorio se corre con el ancho del
   sidebar (desplegado 260px / recogido 68px) para nunca quedar "encima" de la
   barra. El estado lo marca app.js en <body> (sb-collapsed / sb-nav-open).
   Va DESPUÉS del @media(992px) para ganar la cascada del `left`. */
@media (min-width: 993px) {
    #cuentas-fab { left: calc(var(--sidebar-collapsed) + 14px); }
    body:not(.sb-collapsed) #cuentas-fab { left: calc(var(--sidebar-width) + 18px); }
}

/* ================= Apple skin global ================= */
:root {
    --apple-blue: #0071e3;
    --apple-blue-2: #0a84ff;
    --apple-grad: linear-gradient(135deg, #0071e3, #0a84ff);
}

/* Pills → segmento estilo Apple */
.nav-pills .nav-link { border-radius: 10px; font-weight: 500; color: var(--bs-secondary-color); transition: background .15s ease, color .15s ease; }
.nav-pills .nav-link:hover { color: var(--apple-blue); background: rgba(0, 113, 227, .08); }
.nav-pills .nav-link.active { background: var(--apple-grad); color: #fff; box-shadow: 0 4px 12px rgba(0, 113, 227, .3); }

/* Tabs: hover con tinte azul (mantiene el subrayado actual) */
.nav-tabs .nav-link:hover { color: var(--apple-blue); }

/* Cards redondeadas + bordes suaves */
.card { border-radius: 14px; border-color: rgba(0, 0, 0, .07); }
.card .card-header { border-radius: 13px 13px 0 0; }
[data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, .08); }

/* Modales Apple */
.modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .18); }
.modal-header { border-bottom-color: rgba(0, 0, 0, .05); }

/* Botones primarios Apple */
.btn-primary { background: var(--apple-grad); border: none; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 113, 227, .22); transition: all .15s ease; }
.btn-primary:hover, .btn-primary:focus { background: var(--apple-grad); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(0, 113, 227, .3); }
.btn-primary:disabled, .btn-primary.disabled { background: #96b8d6; }
.btn-outline-primary { color: var(--apple-blue); border-color: rgba(0, 113, 227, .5); font-weight: 500; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--apple-blue); border-color: var(--apple-blue); color: #fff; }
[data-bs-theme="dark"] .btn-outline-primary { color: #4aa2ff; border-color: rgba(10, 132, 255, .55); }
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus { background: #0071e3; border-color: #0071e3; color: #fff; }

/* Listas con hover suave */
.list-group-item { transition: background .15s ease; }
.list-group-item-action:hover { background: rgba(0, 113, 227, .05); }

/* Paginación Apple */
.pagination .page-link { border-radius: 10px; margin: 0 2px; border-color: rgba(0, 0, 0, .08); color: var(--apple-blue); font-weight: 500; transition: all .15s ease; }
.pagination .page-item.active .page-link { background: var(--apple-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(0, 113, 227, .3); }
.pagination .page-link:hover { color: var(--apple-blue); background: rgba(0, 113, 227, .08); border-color: transparent; }
[data-bs-theme="dark"] .pagination .page-link { border-color: rgba(255, 255, 255, .12); }/* Mobile centrado fix */
@media (max-width: 575px) {
  .sidebar .nav-link { text-align: center; white-space: normal; }
  .sidebar .sb-submenu .nav-link { text-align: left; }
  .sidebar .sb-group .nav-link i.fa-fw { margin: 0 auto; display: block; }
}

/* Mobile centrado fix */
@media (max-width: 575px) {
  .sidebar .nav-link { text-align: center; white-space: normal; }
  .sidebar .sb-submenu .nav-link { text-align: left; }
  .sidebar .sb-group .nav-link i.fa-fw { margin: 0 auto; display: block; }
}

/* Mobile centrado fix */
@media (max-width: 575px) {
  .sidebar .nav-link { text-align: center; white-space: normal; }
/* Mobile menu improvements */
@media (max-width: 575px) {
  /* Evitar cierre accidental al pasar el mouse */
  .sidebar:not(.collapsed) .sb-submenu:hover { visibility: visible !important; opacity: 1 !important; }
  .sidebar:not(.collapsed) .sb-submenu.nav-link:hover { visibility: visible !important; opacity: 1 !important; }
  
  /* Centrado y mejor legibilidad */
  .sidebar .nav-link { text-align: center; white-space: normal; font-size: 0.82rem; }
  .sidebar .sb-submenu .nav-link { text-align: left; font-size: 0.8rem; padding: 6px 10px; }
  .sidebar .sb-group .nav-link i.fa-fw { margin: 0 auto; display: block; width: auto; }
  
  /* Mejor contraste en mobile */
  .sidebar .nav-link { color: var(--sidebar-text) !important; }
}

/* Bordes modernos para mobile < 768px */
@media (max-width: 767px) {
  .sidebar .sb-submenu {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
  }
  
  .sidebar .nav-link {
    border-radius: 8px !important;
    margin: 2px 0 !important;
  }
  
  /* Evitar que se cierra al pasar por fuera */
  .sidebar.collapsed .sb-submenu { 
    display: none; 
    visibility: hidden; 
    opacity: 0; 
    transition: none; 
  }
}

/* Bordes consistidos para todas las resoluciones */
.sidebar .nav-link {
  border-radius: 8px;
  margin: 1px 2px;
  transition: all 0.15s ease;
}

/* Hover state sin efecto "pop" indeseado */
.sidebar .nav-link:hover { 
  transform: none !important; 
  background: var(--sidebar-hover-bg) !important; 
  color: var(--sidebar-text) !important; 
}

/* Estados activos más definidos */
.sidebar .nav-link.active {
  border-radius: 8px 8px 0 0 !important;
  background: var(--sidebar-active-bg) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.1) !important;
}

/* Finanzas y Admin - cards style */
.sb-submenu {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 12px !important;
  background: var(--sb-submenu-bg) !important;
}

/* Focus state mejorado */
.sidebar .nav-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}