/* =============================================================
   Modern e-commerce shell (white-label base — same file for all clients)
   ------------------------------------------------------------
   - All new classes prefixed `cn-` to avoid colliding with the
     legacy stylesheet (`app_copianet.css`) and Bootstrap 4.
   - Public shell only. The admin sidebar inherits the
     `cn-theme` variables but otherwise keeps its existing UI.
   ============================================================= */

:root,
.cn-theme {
    /* Brand palette (colores de marca): se define por cliente en theme.css (white-label),
       que se carga DESPUÉS de este archivo y sobreescribe estos tokens. */

    /* Neutrals */
    --cn-ink:           #111418;
    --cn-ink-soft:      #3A3F47;
    --cn-ink-mute:      #6B7280;
    --cn-line:          #ECEEF1;
    --cn-line-strong:   #D9DCE1;
    --cn-bg:            #FFFFFF;
    --cn-bg-soft:       #FAFBFC;
    --cn-bg-soft-2:     #F2F4F7;

    /* Effects */
    --cn-radius-sm:     8px;
    --cn-radius:        12px;
    --cn-radius-lg:     16px;
    --cn-radius-pill:   999px;

    --cn-shadow-sm:     0 1px 2px rgba(17, 20, 24, 0.04);
    --cn-shadow:        0 1px 2px rgba(17, 20, 24, 0.04), 0 6px 16px rgba(17, 20, 24, 0.06);
    --cn-shadow-lg:     0 8px 24px rgba(17, 20, 24, 0.08), 0 24px 48px rgba(17, 20, 24, 0.10);

    --cn-ease:          cubic-bezier(0.16, 1, 0.3, 1);
    --cn-fast:          140ms;
    --cn-medium:        220ms;

    --cn-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Layout tokens */
    --cn-header-h:      64px;
    --cn-promo-h:       32px;
    --cn-cats-h:        48px;
    --cn-content-max:   1280px;
}

/* ============================================================
   Public shell scope
   ------------------------------------------------------------
   Note: the global stylesheet sets `app { display:flex; flex-direction: row; }`
   at >=768px (legacy sidebar layout). We force the public shell to fill
   the available width regardless of the parent flex direction.
   ============================================================ */

.cn-public-shell {
    font-family: var(--cn-font);
    color: var(--cn-ink);
    background: var(--cn-bg);
    width: 100%;
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cn-public-shell main {
    flex: 1;
    width: 100%;
    background: var(--cn-bg);
}

.cn-public-shell .cn-content {
    max-width: var(--cn-content-max);
    margin: 0 auto;
    padding: 24px 16px;
}

/* ============================================================
   Promo strip (very top, brand yellow)
   ============================================================ */

.cn-promo {
    height: var(--cn-promo-h);
    background: var(--cn-yellow);
    color: var(--cn-promo-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.cn-promo .cn-promo-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-promo i { font-size: 13px; }

@media (max-width: 600px) {
    .cn-promo { font-size: 12px; padding: 0 12px; text-align: center; }
}

/* ============================================================
   Sticky header
   ============================================================ */

.cn-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cn-bg);
    border-bottom: 1px solid var(--cn-line);
    transition: box-shadow var(--cn-medium) var(--cn-ease);
}

.cn-header.cn-header--scrolled {
    box-shadow: 0 2px 8px rgba(17, 20, 24, 0.06);
}

.cn-header-inner {
    height: var(--cn-header-h);
    max-width: var(--cn-content-max);
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

/* Brand + hamburger wrapper. Was previously a div with inline
   `style=`; promoted to a class so the responsive grid below
   can target it without a brittle :first-child selector. */
.cn-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Brand */
.cn-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.cn-brand img {
    height: 36px;
    width: auto;
    display: block;
    transition: transform var(--cn-fast) var(--cn-ease);
}

.cn-brand:hover img { transform: scale(1.03); }

/* Search */
.cn-search {
    display: flex;
    align-items: center;
    height: 42px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: var(--cn-bg-soft-2);
    border: 1px solid transparent;
    border-radius: var(--cn-radius-pill);
    padding: 0 6px 0 16px;
    transition: background var(--cn-fast) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease),
                box-shadow var(--cn-fast) var(--cn-ease);
}

.cn-search:focus-within {
    background: var(--cn-bg);
    border-color: var(--cn-accent);
    box-shadow: 0 0 0 4px var(--cn-focus-ring);
}

.cn-search i.cn-search__icon {
    color: var(--cn-ink-mute);
    font-size: 14px;
    margin-right: 10px;
}

.cn-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 14px;
    color: var(--cn-ink);
    height: 100%;
    min-width: 0;
}

.cn-search input::placeholder {
    color: var(--cn-ink-mute);
}

.cn-search__submit {
    height: 32px;
    padding: 0 18px;
    border: none;
    border-radius: var(--cn-radius-pill);
    background: var(--cn-orange);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                transform var(--cn-fast) var(--cn-ease);
    flex-shrink: 0;
}

.cn-search__submit:hover { background: var(--cn-orange-hover); }
.cn-search__submit:active { transform: scale(0.97); }

/* Header actions cluster */
.cn-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cn-icon-btn {
    --size: 42px;
    height: var(--size);
    min-width: var(--size);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius);
    color: var(--cn-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-icon-btn i { font-size: 18px; }

.cn-icon-btn:hover,
.cn-icon-btn:focus-visible {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
    outline: none;
}

.cn-icon-btn__label {
    font-size: 13px;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
}
.cn-icon-btn__label small {
    display: block;
    font-size: 11px;
    color: var(--cn-ink-mute);
    font-weight: 400;
}

@media (max-width: 900px) {
    .cn-icon-btn__label { display: none; }
}

/* Cart badge */
.cn-cart {
    position: relative;
}

/* Anchor the badge to the icon (not the whole button) so it sits at the
   icon's top-right corner instead of overlapping the glyph — keeps both the
   cart icon and the count legible, with or without the "Mi Carrito" label. */
.cn-cart__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cn-cart__badge {
    position: absolute;
    top: -8px;
    left: calc(100% - 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--cn-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: var(--cn-radius-pill);
    border: 2px solid var(--cn-bg);
    box-sizing: border-box;
    transform: scale(1);
    transition: transform var(--cn-medium) var(--cn-ease);
}

/* Desktop shows the "Mi Carrito" label to the right of the icon, so anchoring
   the badge to the icon corner would overlap that text. Float it at the whole
   button's top-right corner instead (past the label) — icon and count stay
   separate and fully legible. Below 901px the label is hidden, so the
   icon-anchored placement above applies. */
@media (min-width: 901px) {
    .cn-cart__icon { position: static; }
    .cn-cart__badge {
        top: 4px;
        left: auto;
        right: 4px;
    }
}

.cn-cart__badge--bump {
    animation: cn-bump 360ms var(--cn-ease);
}

@keyframes cn-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Hamburger (mobile) */
.cn-hamburger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius);
    color: var(--cn-ink);
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease);
}

.cn-hamburger:hover { background: var(--cn-bg-soft-2); }
.cn-hamburger i { font-size: 20px; }

/* Account dropdown */
.cn-dropdown {
    position: relative;
}

.cn-dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--cn-bg);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius);
    box-shadow: var(--cn-shadow-lg);
    padding: 8px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--cn-fast) var(--cn-ease),
                transform var(--cn-fast) var(--cn-ease);
    z-index: 1100;
}

.cn-dropdown.cn-dropdown--open .cn-dropdown__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cn-dropdown__header {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--cn-line);
    margin-bottom: 6px;
}
.cn-dropdown__header strong { display: block; font-size: 14px; color: var(--cn-ink); }
.cn-dropdown__header small  { display: block; font-size: 12px; color: var(--cn-ink-mute); }

.cn-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-dropdown__item i {
    font-size: 15px;
    color: var(--cn-ink-mute);
    width: 18px;
    text-align: center;
}

.cn-dropdown__item:hover {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}

.cn-dropdown__item--danger { color: #C72525; }
.cn-dropdown__item--danger i { color: #C72525; }
.cn-dropdown__item--danger:hover { background: #FEEFEF; color: #C72525; }

.cn-dropdown__cta {
    display: block;
    margin: 6px;
    padding: 10px 14px;
    background: var(--cn-orange);
    color: #fff !important;
    border-radius: var(--cn-radius-sm);
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--cn-fast) var(--cn-ease);
}
.cn-dropdown__cta:hover { background: var(--cn-orange-hover); color: #fff !important; }

/* ============================================================
   Categories bar (desktop megamenu)
   ============================================================ */

.cn-cats-bar {
    background: var(--cn-bg);
    border-bottom: 1px solid var(--cn-line);
}

.cn-cats-bar__inner {
    max-width: var(--cn-content-max);
    margin: 0 auto;
    padding: 0 16px;
    min-height: var(--cn-cats-h);
    display: flex;
    align-items: center;
    gap: 4px;
    /* No overflow rule: any non-`visible` value here clips the absolutely
       positioned .cn-megamenu that drops down from category triggers.
       If categories ever overflow the available width on narrow desktops,
       wrapping is preferable to a horizontal scroll that hides dropdowns. */
    flex-wrap: wrap;
    overflow: visible;
}

.cn-cat-item {
    position: relative;
    flex-shrink: 0;
}

.cn-cat-item__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--cn-radius-pill);
    background: transparent;
    color: var(--cn-ink-soft);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
    white-space: nowrap;
}

.cn-cat-item__trigger:hover,
.cn-cat-item--open .cn-cat-item__trigger {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}

/* No focus ring on the category triggers: the open state is already shown by
   the panel + chevron, and a lingering ring made a clicked division keep an
   "expanded" border after the pointer moved away. */
.cn-cat-item:focus,
.cn-cat-item:focus-visible,
.cn-cat-item__trigger:focus,
.cn-cat-item__trigger:focus-visible {
    outline: none;
    box-shadow: none;
}

.cn-cat-item__trigger i.fa-chevron-down {
    font-size: 10px;
    color: var(--cn-ink-mute);
    transition: transform var(--cn-fast) var(--cn-ease);
}

.cn-cat-item--open .cn-cat-item__trigger i.fa-chevron-down {
    transform: rotate(180deg);
}

.cn-cat-item--featured .cn-cat-item__trigger {
    background: var(--cn-orange-soft);
    color: var(--cn-orange-hover);
    font-weight: 600;
}
.cn-cat-item--featured .cn-cat-item__trigger:hover {
    background: var(--cn-orange);
    color: #fff;
}
.cn-cat-item--featured .cn-cat-item__trigger i { color: inherit; }

/* Megamenu panel */
.cn-megamenu {
    position: absolute;
    /* Sit directly under the trigger; the visual gap is created by margin-top
       and bridged by the ::before pseudo so the cursor never crosses dead air. */
    top: 100%;
    margin-top: 6px;
    left: 0;
    background: var(--cn-bg);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-lg);
    padding: 20px;
    min-width: 560px;
    max-width: 720px;
    /* Safety cap: never let a huge Linea push the panel past the viewport.
       Multi-column flow below keeps it short, this is the backstop. */
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--cn-medium) var(--cn-ease),
                transform var(--cn-medium) var(--cn-ease),
                visibility 0s linear var(--cn-medium);
    z-index: 1050;
}

/* Hover bridge — invisible 6px strip that fills the gap between trigger
   and panel. Because it is a descendant of .cn-megamenu (which is a
   descendant of .cn-cat-item), hovering it keeps `.cn-cat-item:hover`
   true and the megamenu stays open while the cursor travels down. */
.cn-megamenu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

/* Opening is driven entirely by the single `--open` class, which
   CategoriesMegamenu sets on mouseenter/focusin and clears on mouseleave (and
   when another division is entered/focused). Because only one item can hold
   `--open` at a time, only one panel is ever visible — moving to or focusing
   another division collapses the previous one. We deliberately do NOT use
   :hover or :focus-within here: a trigger that keeps DOM focus after a click
   would otherwise keep its panel open while the mouse hovers a sibling,
   showing two megamenus at once. */
.cn-cat-item--open .cn-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* After clicking a category the cursor/focus lingers on the item through the
   SPA navigation. Collapse clears `--open`, but this rule is a belt-and-braces
   override (placed after the open rule) in case the item is re-marked open
   before the next mouseleave. */
.cn-cat-item--collapsed .cn-megamenu,
.cn-cat-item--collapsed.cn-cat-item--open .cn-megamenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
}

.cn-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px 32px;
}

.cn-megamenu__col h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cn-ink-mute);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cn-line);
}

.cn-megamenu__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cn-megamenu__col li + li { margin-top: 2px; }

.cn-megamenu__col a {
    display: block;
    padding: 6px 8px;
    margin: 0 -8px;
    font-size: 14px;
    color: var(--cn-ink-soft);
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                padding-left var(--cn-fast) var(--cn-ease);
}

.cn-megamenu__col a:hover {
    background: var(--cn-orange-soft);
    color: var(--cn-accent-strong);
    padding-left: 12px;
}

/* A Linea with many categorías (10+, e.g. Libreria) would otherwise render as
   one very tall column and drag the whole panel down. Let it span the full
   panel width and flow its items into several short sub-columns, so the menu
   grows wide instead of tall. Targets only oversized lists via the quantity
   query, so normal Lineas keep their single-column layout. */
.cn-megamenu__col:has(li:nth-child(10)) {
    grid-column: 1 / -1;
}

.cn-megamenu__col:has(li:nth-child(10)) ul {
    columns: 200px;
    column-gap: 32px;
}

/* Keep each link from splitting across a sub-column break. */
.cn-megamenu__col li {
    break-inside: avoid;
}

/* Hide the desktop categories bar on small screens */
@media (max-width: 900px) {
    .cn-cats-bar { display: none; }
    .cn-hamburger { display: inline-flex; }
}

@media (min-width: 901px) {
    .cn-hamburger { display: none; }
}

/* ============================================================
   Mobile drawer
   ============================================================ */

.cn-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 24, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cn-medium) var(--cn-ease);
    z-index: 1500;
}

.cn-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--cn-bg);
    box-shadow: var(--cn-shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--cn-medium) var(--cn-ease);
    z-index: 1600;
    display: flex;
    flex-direction: column;
}

.cn-drawer.cn-drawer--open { transform: translateX(0); }
.cn-drawer.cn-drawer--open ~ .cn-drawer-overlay,
.cn-drawer-overlay.cn-drawer-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.cn-drawer__head {
    height: var(--cn-header-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--cn-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cn-drawer__head img { height: 30px; }

.cn-drawer__close {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius);
    color: var(--cn-ink);
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cn-drawer__close:hover { background: var(--cn-bg-soft-2); }
.cn-drawer__close i { font-size: 18px; }

.cn-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px 24px;
}

.cn-drawer__cta {
    padding: 12px 16px;
    border-top: 1px solid var(--cn-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.cn-drawer__cta a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    border-radius: var(--cn-radius);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--cn-fast) var(--cn-ease);
}
.cn-drawer__cta a.primary {
    background: var(--cn-orange);
    color: #fff;
}
.cn-drawer__cta a.primary:hover { background: var(--cn-orange-hover); color: #fff; }
.cn-drawer__cta a.secondary {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}
.cn-drawer__cta a.secondary:hover { background: var(--cn-line); }

/* Drawer overrides over the legacy MenuArticulos collapsibles
   (so the existing component looks at home in the drawer) */
.cn-drawer__body .nav-item { padding-bottom: 2px !important; }
.cn-drawer__body .nav-item .menuParent {
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-ink) !important;
    background: transparent;
    transform: none !important;
    transition: background var(--cn-fast) var(--cn-ease) !important;
}
.cn-drawer__body .nav-item .menuParent:hover {
    background: var(--cn-bg-soft-2) !important;
    color: var(--cn-ink) !important;
    transform: none !important;
}
.cn-drawer__body .nav-item a.active {
    background: var(--cn-orange-soft) !important;
    color: var(--cn-accent-strong) !important;
}
.cn-drawer__body .menuIconWeb {
    color: var(--cn-accent) !important;
    font-size: 18px !important;
}
.cn-drawer__body .lblMenuCategorias {
    font-style: normal !important;
    font-weight: 500 !important;
    font-family: var(--cn-font);
    width: auto !important;
}

/* Lock body scroll when drawer is open */
body.cn-no-scroll {
    overflow: hidden;
    touch-action: none;
}

/* ============================================================
   Admin shell theming (light touch — keeps original layout)
   ------------------------------------------------------------
   `display: contents` makes the wrapper transparent to layout,
   so the legacy `app { display:flex }` rule still treats
   `.sidebar` and `.main` as direct flex children.
   ============================================================ */

.cn-admin-shell {
    display: contents;
    font-family: var(--cn-font);
}

.cn-admin-shell .sidebar {
    background-image: var(--cn-sidebar-bg);
    box-shadow: var(--cn-sidebar-shadow);
}

.cn-admin-shell .sidebar .nav-item a,
.cn-admin-shell .sidebar .menuParent {
    border-radius: var(--cn-radius-sm);
    font-weight: 500;
    color: var(--cn-sidebar-text) !important;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                transform 0s !important;
    transform: none !important;
}

.cn-admin-shell .sidebar .nav-item a:hover,
.cn-admin-shell .sidebar .menuParent:hover {
    background: var(--cn-sidebar-hover-bg) !important;
    color: var(--cn-sidebar-hover-text) !important;
    transform: none !important;
}

.cn-admin-shell .sidebar .nav-item a:hover span,
.cn-admin-shell .sidebar .menuParent:hover span,
.cn-admin-shell .sidebar .nav-item a:hover .menuIconWeb,
.cn-admin-shell .sidebar .menuParent:hover .menuIconWeb {
    color: var(--cn-sidebar-hover-text) !important;
}

.cn-admin-shell .sidebar .nav-item a.active {
    background: var(--cn-sidebar-active-bg) !important;
    color: #fff !important;
    box-shadow: var(--cn-sidebar-active-shadow);
}

.cn-admin-shell .sidebar .menuLabel {
    font-family: var(--cn-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-sidebar-label);
}

.cn-admin-shell .top-row {
    backdrop-filter: saturate(140%) blur(6px);
}

/* ------------------------------------------------------------
   Admin / empleado top-row action cluster (home · bell · account)
   Wrapped in a single flex row so the items keep a consistent gap
   and the bell badge no longer collides with the account dropdown.
   ------------------------------------------------------------ */
.cn-staff-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
}

/* Square icon buttons (home + bell) so they line up with the
   account button but stay compact. */
.cn-icon-btn--square {
    padding: 0;
    width: 42px;
    min-width: 42px;
}

.cn-bell { position: relative; }

/* Badge anchored inside the bell button so it never overflows into
   the neighbouring control. The yellow ring lifts it off the
   #FFE713 top-row. */
.cn-bell__badge {
    position: absolute;
    top: -2px;
    left: calc(100% - 22px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #E11D2A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: var(--cn-radius-pill);
    border: 2px solid var(--cn-bell-ring);
    box-sizing: border-box;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cn-public-shell *,
    .cn-public-shell *::before,
    .cn-public-shell *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   Form-card width modifiers
   ------------------------------------------------------------
   The legacy `.registro-container` class is shared by several
   pages (Registro, MiPerfil, ChangePassword, RecuperarPassword,
   admin CatalogoArticulos) and uses `max-width: 80%`. Rather
   than mutate the shared class, we add a modifier and apply it
   only on the pages we explicitly want to constrain.
   ============================================================ */

.cn-form-card-880 {
    max-width: 880px;
    padding: 28px 24px;
}

/* Narrow variant for the simple auth forms (Login, RecuperarPassword,
   ChangePassword) — matches the Login card width. Registro keeps -880. */
.cn-form-card-640 {
    max-width: 640px;
    padding: 28px 24px;
}

/* ============================================================
   Auth reciprocal link (under the action row on Login/Registro)
   ============================================================ */

.cn-auth-switch {
    text-align: center;
    margin-top: 18px;
    color: var(--cn-ink-mute);
    font-size: 14px;
}

.cn-auth-switch a {
    color: var(--cn-orange);
    font-weight: 600;
    text-decoration: none;
}

.cn-auth-switch a:hover,
.cn-auth-switch a:focus-visible {
    text-decoration: underline;
}

/* ============================================================
   Password input with show/hide toggle
   ------------------------------------------------------------
   Used by InputPassword.razor. The component wraps the
   native <input> in a relative-positioned container and
   places a small icon button at the right edge.
   ============================================================ */

.cn-password {
    position: relative;
    display: block;
}

.cn-password__input {
    padding-right: 42px !important;
}

.cn-password__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-ink-mute);
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-password__toggle:hover,
.cn-password__toggle:focus-visible {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
    outline: none;
}

.cn-password__toggle i { font-size: 14px; }

/* ============================================================
   Page title (semantic h1)
   ============================================================ */

.cn-page-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--cn-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-page-title i {
    font-size: 0.9em;
    color: var(--cn-accent);
}

/* Breathing room between the banner carousel and the section title
   (Destacados / Resultados de tu búsqueda / categoría). */
.cn-home-title-row {
    margin-top: 28px;
}

.cn-page-title__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-ink-mute);
    margin-bottom: 4px;
}

/* ============================================================
   Modern product grid + product card
   ------------------------------------------------------------
   New cn-* classes that coexist with the legacy
   .pizza-cards / .articulo-card / .pizza-info markup
   (still used by AgregarArticulo, Checkout, ArticulosManager).
   ============================================================ */

.cn-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cn-product-card {
    position: relative;
    background: var(--cn-bg);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform var(--cn-fast) var(--cn-ease),
                box-shadow var(--cn-medium) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease);
}

.cn-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cn-shadow);
    border-color: var(--cn-line-strong);
}

.cn-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cn-bg-soft-2);
}

.cn-product-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 600ms var(--cn-ease), opacity 600ms var(--cn-ease);
    opacity: 0;
    animation: cn-fade-in 600ms var(--cn-ease) forwards;
}

.cn-product-card__img--second {
    opacity: 0;
    animation: none;
}

.cn-product-card:hover .cn-product-card__img {
    transform: scale(1.04);
}

.cn-product-card:hover .cn-product-card__img--second {
    opacity: 1;
}

.cn-product-card--no-img .cn-product-card__media {
    background-color: #f5f5f5;
}

.cn-product-card--no-img .cn-product-card__img {
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes cn-fade-in {
    to { opacity: 1; }
}

.cn-product-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 96px;
}

.cn-product-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-ink);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-product-card__desc {
    font-size: 12px;
    color: var(--cn-ink-mute);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-product-card__footer {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
}

.cn-product-card__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--cn-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cn-product-card__price::before {
    content: '$';
    font-weight: 400;
    color: var(--cn-ink-mute);
    margin-right: 2px;
    font-size: 0.85em;
}

.cn-product-card__badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--cn-ink-mute);
    padding: 4px 10px;
    border-radius: var(--cn-radius-pill);
    line-height: 1;
}

.cn-product-card__badge--new {
    background: var(--cn-ink);
    color: var(--cn-badge-new-text);
}

/* Print CTA — branded, sits inline with product cards */
.cn-product-card--print {
    background: linear-gradient(135deg, var(--cn-yellow) 0%, #FFCB1F 60%, var(--cn-orange) 100%);
    border-color: transparent;
}

.cn-product-card--print .cn-product-card__media {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-product-card--print .cn-product-card__media::before {
    content: "\f1c1"; /* fa-file-pdf */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 4.5rem;
    color: rgba(0, 0, 0, 0.22);
}

.cn-product-card--print .cn-product-card__title,
.cn-product-card--print .cn-product-card__desc {
    color: var(--cn-ink);
}

.cn-product-card--print .cn-product-card__desc {
    color: rgba(17, 20, 24, 0.7);
}

/* Skeleton card */
.cn-product-card--skeleton {
    cursor: default;
    pointer-events: none;
}

.cn-product-card--skeleton .cn-product-card__media {
    background-image: url('/images/sinImg2.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) brightness(0.78);
    animation: cn-skeleton-pulse 1.6s ease-in-out infinite;
}

.cn-product-card__skeleton-line {
    height: 12px;
    background: var(--cn-bg-soft-2);
    border-radius: var(--cn-radius-pill);
    animation: cn-skeleton-pulse 1.6s ease-in-out infinite;
}

.cn-product-card__skeleton-line--title { width: 75%; }
.cn-product-card__skeleton-line--desc  { width: 100%; }

@keyframes cn-skeleton-pulse {
    0%   { opacity: 0.55; }
    50%  { opacity: 0.95; }
    100% { opacity: 0.55; }
}

@media (max-width: 600px) {
    .cn-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cn-product-card__body { padding: 10px 12px 12px; min-height: 88px; }
    .cn-product-card__title { font-size: 13px; }
    .cn-product-card__desc { display: none; }
    .cn-product-card__price { font-size: 16px; }
    .cn-product-card--print .cn-product-card__media::before { font-size: 3.5rem; }
}

/* ============================================================
   Chrome-suppression: hide MainLayout's legacy sidebar/top-row
   when a PublicShell is rendered inside the same page. Without
   this, both chromes stack. Uses :has() (Chrome 105+, Safari
   15.4+, Firefox 121+); older browsers fall back to "both
   chromes visible" which is ugly but not broken.

   Staff (admin / empleado) see the same customer chrome as
   everyone else, plus a "Panel staff" link in TopHeader that
   bounces them back to /dashboardhome — see TopHeader.razor.
   ============================================================ */

app:has(.cn-public-shell) > .sidebar {
    display: none !important;
}

app:has(.cn-public-shell) > .main > .top-row {
    display: none !important;
}

app:has(.cn-public-shell) > .main > .whatsapp-button {
    display: none !important;
}

app:has(.cn-public-shell) > .main > .content {
    padding: 0 !important;
    margin: 0 !important;
}

/* MainLayout sets `app { flex-direction: row; }` at >=768px so
   the sidebar sits beside the main column. With the sidebar
   hidden we still need the main column to fill the row. */
@media (min-width: 768px) {
    app:has(.cn-public-shell) > .main {
        width: 100%;
        max-width: 100%;
    }

    app:has(.cn-public-shell) > .main > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
   Staff link in TopHeader — yellow pill, only visible for
   admin/empleado (gated by <AuthorizeView Roles="1,3">).
   Provides an explicit way back to /dashboardhome from any
   customer-facing page.
   ============================================================ */

.cn-staff-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--cn-staff-bg);
    color: var(--cn-staff-text) !important;
    border-radius: var(--cn-radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                box-shadow var(--cn-fast) var(--cn-ease);
    box-shadow: var(--cn-staff-shadow);
}

.cn-staff-link:hover,
.cn-staff-link:focus-visible {
    background: var(--cn-staff-hover-bg);
    color: #fff !important;
    text-decoration: none !important;
    outline: none;
    box-shadow: var(--cn-staff-hover-shadow);
}

.cn-staff-link i { font-size: 13px; }

/* Match the account/cart label-collapse breakpoint (900px) so the
   actions cluster stays compact on tablet widths and below — the
   "Panel staff" text is the widest action label and would
   otherwise crowd the row. */
@media (max-width: 900px) {
    .cn-staff-link {
        padding: 0 10px;
        gap: 0;
    }
    .cn-staff-link__label { display: none; }
}

/* ============================================================
   Mobile header — stack search on a second row
   ------------------------------------------------------------
   On phones the 3-column desktop grid (brand | search | actions)
   has no horizontal room left once "Panel staff" is added to
   the actions cluster: search gets crushed and the staff/cart/
   account buttons get pushed off-screen.

   Below 768px we switch to a 2-row layout:
     row 1: [hamburger + brand]              [actions cluster]
     row 2: [---------- search bar ----------]
   ============================================================ */
@media (max-width: 768px) {
    .cn-header-inner {
        height: auto;
        grid-template-columns: auto 1fr;
        grid-template-rows: 56px auto;
        gap: 8px 12px;
        padding: 0 12px 10px;
        align-items: center;
    }

    .cn-header-inner > .cn-header-left {
        grid-row: 1;
        grid-column: 1;
    }

    .cn-header-inner > .cn-actions {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }

    .cn-header-inner > .cn-search {
        grid-row: 2;
        grid-column: 1 / -1;
        max-width: none;
        margin: 0;
        height: 40px;
    }

    .cn-search__submit {
        height: 30px;
        padding: 0 14px;
        font-size: 12px;
    }

    .cn-brand img { height: 30px; }
}

/* ============================================================
   Checkout header row — page title + item count + vaciar link
   ------------------------------------------------------------
   Sits at the top of /checkout. Pulls "Vaciar carrito" out of
   the bottom action row (where it visually competed with the
   primary "Finalizar pedido" CTA) and demotes it to a quiet
   text link aligned with the title.
   ============================================================ */

.cn-checkout-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.cn-checkout-header .cn-page-title { margin-bottom: 0; }

.cn-checkout-header__count {
    color: var(--cn-ink-mute);
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
    letter-spacing: 0;
}

/* ============================================================
   Quiet danger link — used for "Vaciar carrito"
   ------------------------------------------------------------
   Low-emphasis text button that turns red on hover. Used when
   the action is destructive but should not compete with the
   primary CTA.
   ============================================================ */

.cn-link-danger {
    background: none;
    border: none;
    color: var(--cn-ink-mute);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 10px;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: color var(--cn-fast) var(--cn-ease),
                background var(--cn-fast) var(--cn-ease);
}

.cn-link-danger:hover,
.cn-link-danger:focus-visible {
    color: #C72525;
    background: #FEEFEF;
    text-decoration: none;
    outline: none;
}

.cn-link-danger i {
    margin-right: 6px;
    font-size: 12px;
}

/* ============================================================
   Cart row — icon-only remove button
   ------------------------------------------------------------
   Replaces the per-row giant red `btn btn-danger btn-lg w-100`
   that used to dominate every cart line. Sits at the top-right
   corner of each .pedido-item row.

   Parent row needs position-relative (added in the markup).
   ============================================================ */

.cn-cart-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: var(--cn-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--cn-ink-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease);
    z-index: 1;
}

.cn-cart-remove:hover,
.cn-cart-remove:focus-visible {
    background: #FEEFEF;
    color: #C72525;
    border-color: rgba(199, 37, 37, 0.18);
    outline: none;
}

.cn-cart-remove i { font-size: 14px; }

/* ============================================================
   Product detail page (PDP) — AgregarArticulo.razor
   ------------------------------------------------------------
   Typography + structural classes for the right-column info
   block (title, description, price, stock, in-cart notice).
   Replaces the old `fontAgregarArticulo` h2-as-everything
   approach that gave title and price equal visual weight.
   ============================================================ */

.cn-pdp__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--cn-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.cn-pdp__subtitle {
    font-size: 15px;
    color: var(--cn-ink-soft);
    line-height: 1.5;
    margin: 0 0 8px;
    font-weight: 500;
}

.cn-pdp__description {
    font-size: 14px;
    color: var(--cn-ink-mute);
    line-height: 1.55;
    margin: 0 0 12px;
    white-space: pre-wrap; /* preserve line breaks from server */
}

.cn-pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 6px;
    padding-top: 18px;
    border-top: 1px solid var(--cn-line);
}

.cn-pdp__price {
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700;
    color: var(--cn-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cn-pdp__price-currency {
    font-size: 0.55em;
    font-weight: 400;
    color: var(--cn-ink-mute);
    margin-right: 3px;
    vertical-align: 0.2em;
}

.cn-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cn-stock-ok);
    margin: 0 0 14px;
}

.cn-pdp__stock--low { color: var(--cn-stock-low); }

.cn-pdp__stock i { font-size: 14px; }

.cn-pdp__in-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cn-note-bg);
    border: 1px solid var(--cn-note-border);
    border-radius: var(--cn-radius-sm);
    padding: 10px 14px;
    color: var(--cn-accent-strong);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 16px;
}

.cn-pdp__in-cart i { font-size: 16px; flex-shrink: 0; }

/* ============================================================
   Button variants used by AgregarArticulo (and reusable)
   ------------------------------------------------------------
   Pragmatic additions, not the full button system. A proper
   .cn-btn--variant system is Phase 6.
   ============================================================ */

/* Outline orange — secondary CTA that visually demotes
   relative to the filled `.button-orange` primary. */
.cn-btn-outline-orange {
    display: inline-block;
    text-align: center;
    background: transparent;
    color: var(--cn-orange);
    border: 1.5px solid var(--cn-orange);
    padding: 9px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-btn-outline-orange:hover,
.cn-btn-outline-orange:focus-visible {
    background: var(--cn-orange);
    color: #fff;
    text-decoration: none;
    outline: none;
}

.cn-btn-outline-orange i { margin-right: 6px; }

/* Ghost text link — tertiary action (Volver). */
.cn-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: var(--cn-ink-mute);
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: color var(--cn-fast) var(--cn-ease),
                background var(--cn-fast) var(--cn-ease);
}

.cn-btn-ghost:hover,
.cn-btn-ghost:focus-visible {
    color: var(--cn-ink);
    background: var(--cn-bg-soft-2);
    text-decoration: none;
    outline: none;
}

/* Small outlined danger — used for "Eliminar del carrito"
   on the PDP, where the action is meaningful but should not
   compete with the primary "Agregar" CTAs. */
.cn-btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: #C72525;
    border: 1px solid rgba(199, 37, 37, 0.3);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: background var(--cn-fast) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease);
}

.cn-btn-remove:hover,
.cn-btn-remove:focus-visible {
    background: #FEEFEF;
    border-color: rgba(199, 37, 37, 0.55);
    text-decoration: none;
    outline: none;
}