/* =============================================================
   CopiaNet — Modern e-commerce shell
   ------------------------------------------------------------
   - 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 — original yellow/orange, retuned for modern UI */
    --cn-yellow:        #FFD400;
    --cn-yellow-soft:   #FFF4B3;
    --cn-orange:        #F29821;
    --cn-orange-hover:  #E08510;
    --cn-orange-soft:   #FFF1E0;

    /* 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-ink);
    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-orange);
    box-shadow: 0 0 0 4px rgba(242, 152, 33, 0.12);
}

.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;
}

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

.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:hover .cn-cat-item__trigger,
.cn-cat-item:focus-within .cn-cat-item__trigger {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}

.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:hover .cn-cat-item__trigger i.fa-chevron-down,
.cn-cat-item:focus-within .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;
    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;
}

.cn-cat-item:hover .cn-megamenu,
.cn-cat-item:focus-within .cn-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.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-orange-hover);
    padding-left: 12px;
}

/* 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-orange-hover) !important;
}
.cn-drawer__body .menuIconWeb {
    color: var(--cn-orange) !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: linear-gradient(180deg, var(--cn-yellow) 0%, var(--cn-yellow) 88%, var(--cn-orange) 100%);
    box-shadow: 1px 0 0 rgba(0,0,0,0.04);
}

.cn-admin-shell .sidebar .nav-item a,
.cn-admin-shell .sidebar .menuParent {
    border-radius: var(--cn-radius-sm);
    font-weight: 500;
    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: rgba(255, 255, 255, 0.45) !important;
    color: var(--cn-ink) !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-ink) !important;
}

.cn-admin-shell .sidebar .nav-item a.active {
    background: var(--cn-orange) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

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

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

/* ============================================================
   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;
}

/* ============================================================
   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-orange);
}

.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-yellow);
}

/* 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-yellow);
    color: var(--cn-ink) !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: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.cn-staff-link:hover,
.cn-staff-link:focus-visible {
    background: var(--cn-orange);
    color: #fff !important;
    text-decoration: none !important;
    outline: none;
    box-shadow: 0 1px 3px rgba(242, 152, 33, 0.4);
}

.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: #1A9B59;
    margin: 0 0 14px;
}

.cn-pdp__stock--low { color: #B86E00; }

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

.cn-pdp__in-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cn-orange-soft);
    border: 1px solid rgba(242, 152, 33, 0.25);
    border-radius: var(--cn-radius-sm);
    padding: 10px 14px;
    color: var(--cn-orange-hover);
    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;
}