/*
 * PietroCal shared visual system — 11Q02.4
 *
 * Fuente de verdad visual para encabezados de módulo, navegación contextual,
 * títulos/subtítulos de panel, tablas compactas, chips y formularios base.
 *
 * Las clases pc-* son semánticas y reutilizables. Los selectores heredados
 * permanecen sólo cuando siguen siendo la regla efectiva. 11Q02.4 retira los
 * aliases que competían con la geometría consolidada de Reservas y Contactos.
 */

:root {
    /* Color */
    --pc-ui-ink: #111827;
    --pc-ui-text: #334155;
    --pc-ui-muted: #64748b;
    --pc-ui-subtle: #94a3b8;
    --pc-ui-line: #e2e8f0;
    --pc-ui-line-soft: #eef2f7;
    --pc-ui-soft: #f8fafc;
    --pc-ui-orange: #f28c28;
    --pc-ui-orange-dark: #9a3412;
    --pc-ui-orange-soft: #fff7ed;
    --pc-ui-orange-icon: #ffedd5;

    /* Encabezado de módulo */
    --pc-ui-module-gap: 12px;
    --pc-ui-module-padding-y: 14px;
    --pc-ui-module-padding-x: 16px;
    --pc-ui-module-radius: 16px;
    --pc-ui-module-shadow: 0 12px 32px rgba(15, 23, 42, .045);
    --pc-ui-eyebrow-size: 10px;
    --pc-ui-eyebrow-weight: 600;
    --pc-ui-eyebrow-spacing: .06em;
    --pc-ui-title-size: 20px;
    --pc-ui-title-weight: 600;
    --pc-ui-title-line: 1.2;
    --pc-ui-title-spacing: -.02em;
    --pc-ui-subtitle-size: 12px;
    --pc-ui-subtitle-weight: 400;
    --pc-ui-subtitle-line: 1.4;

    /* Menú contextual */
    --pc-ui-context-gap: 8px;
    --pc-ui-context-item-padding: 13px;
    --pc-ui-context-item-radius: 18px;
    --pc-ui-context-item-border: rgba(148, 163, 184, .28);
    --pc-ui-context-item-shadow: 0 10px 30px rgba(15, 23, 42, .055);
    --pc-ui-context-item-hover-shadow: 0 16px 38px rgba(15, 23, 42, .09);
    --pc-ui-context-item-active-shadow: 0 12px 26px rgba(249, 115, 22, .08);
    --pc-ui-context-icon-size: 38px;
    --pc-ui-context-icon-radius: 14px;
    --pc-ui-context-title-size: 14px;
    --pc-ui-context-title-weight: 950;
    --pc-ui-context-subtitle-size: 12px;
    --pc-ui-context-subtitle-weight: 650;
    --pc-ui-context-count-size: 28px;

    /* Paneles y tablas */
    --pc-ui-panel-radius: 16px;
    --pc-ui-panel-title-size: 20px;
    --pc-ui-panel-title-weight: 600;
    --pc-ui-panel-copy-size: 12px;
    --pc-ui-panel-copy-weight: 400;
    --pc-ui-table-head-size: 9.5px;
    --pc-ui-table-head-weight: 600;
    --pc-ui-row-primary-size: 12px;
    --pc-ui-row-primary-weight: 600;
    --pc-ui-row-secondary-size: 11.5px;
    --pc-ui-row-secondary-weight: 400;

    /* Controles */
    --pc-ui-control-height: 36px;
    --pc-ui-control-radius: 7px;
    --pc-ui-control-size: 11.5px;
    --pc-ui-control-weight: 500;
    --pc-ui-button-height: 34px;
    --pc-ui-button-radius: 7px;
    --pc-ui-button-size: 11.5px;
    --pc-ui-button-weight: 600;
}

/* -------------------------------------------------------------------------
   Encabezados de módulo
   ------------------------------------------------------------------------- */
:is(.pc-module-screen, .bookings-screen, .contacts-screen, .availability-module-screen, #settingsWorkspace .availability-screen) {
    gap: var(--pc-ui-module-gap) !important;
}

:is(.pc-module-header, .availability-module-hero, #settingsWorkspace .availability-module-hero) {
    padding: var(--pc-ui-module-padding-y) var(--pc-ui-module-padding-x) !important;
    border-radius: var(--pc-ui-module-radius) !important;
    box-shadow: var(--pc-ui-module-shadow) !important;
}

:is(
    .pc-module-eyebrow,
    .bookings-toolbar .bookings-kicker,
    .contacts-toolbar .contacts-kicker,
    .availability-module-hero .settings-screen-kicker,
    #settingsWorkspace .availability-module-hero .settings-screen-kicker
) {
    margin-bottom: 3px !important;
    color: var(--pc-ui-subtle) !important;
    font-size: var(--pc-ui-eyebrow-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-eyebrow-weight) !important;
    letter-spacing: var(--pc-ui-eyebrow-spacing) !important;
    text-transform: uppercase !important;
}

:is(
    .pc-module-title,
    .bookings-toolbar h1,
    .contacts-toolbar h1,
    .availability-module-hero h1,
    #settingsWorkspace .availability-module-hero h1,
    #settingsWorkspace .availability-header h1,
    #settingsWorkspace .settings-screen-header h1.pc-module-title
) {
    margin: 1px 0 3px !important;
    color: var(--pc-ui-ink) !important;
    font-size: var(--pc-ui-title-size) !important;
    line-height: var(--pc-ui-title-line) !important;
    font-weight: var(--pc-ui-title-weight) !important;
    letter-spacing: var(--pc-ui-title-spacing) !important;
}

:is(
    .pc-module-subtitle,
    .availability-module-hero p,
    #settingsWorkspace .availability-module-hero p,
    #settingsWorkspace .availability-header p
) {
    margin: 0 !important;
    color: var(--pc-ui-muted) !important;
    font-size: var(--pc-ui-subtitle-size) !important;
    line-height: var(--pc-ui-subtitle-line) !important;
    font-weight: var(--pc-ui-subtitle-weight) !important;
}

:is(
    .pc-module-action,
    .availability-module-hero .btn,
    #settingsWorkspace .availability-module-hero .btn
) {
    min-height: var(--pc-ui-button-height) !important;
    height: var(--pc-ui-button-height) !important;
    padding: 0 12px !important;
    border-radius: var(--pc-ui-button-radius) !important;
    font-size: var(--pc-ui-button-size) !important;
    line-height: 1 !important;
    font-weight: var(--pc-ui-button-weight) !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Menú contextual compartido
   ------------------------------------------------------------------------- */
:is(
    .pc-context-group,
    #contextBookings .bookings-context-block,
    #contextContacts .contacts-context-block
) {
    gap: 0 !important;
}

:is(
    .pc-context-heading,
    #contextBookings .sidebar-title,
    #contextContacts .sidebar-title,
    #contextAvailability .sidebar-title
) {
    color: var(--pc-ui-subtle) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

:is(
    .pc-context-item,
    #contextBookings .bookings-section-card.settings-option.availability-open-card,
    #contextContacts .contacts-section-card.settings-option.availability-open-card,
    #contextAvailability .settings-option.availability-open-card,
    #contextAvailability [data-av-rail-section]
) {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 var(--pc-ui-context-gap) !important;
    padding: var(--pc-ui-context-item-padding) !important;
    border: 1px solid var(--pc-ui-context-item-border) !important;
    border-radius: var(--pc-ui-context-item-radius) !important;
    background: #fff !important;
    display: grid !important;
    grid-template-columns: var(--pc-ui-context-icon-size) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    text-align: left !important;
    box-shadow: var(--pc-ui-context-item-shadow) !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

:is(
    .pc-context-item,
    #contextBookings .bookings-section-card.settings-option.availability-open-card,
    #contextContacts .contacts-section-card.settings-option.availability-open-card,
    #contextAvailability .settings-option.availability-open-card
):last-child {
    margin-bottom: 0 !important;
}

:is(
    .pc-context-item,
    #contextBookings .bookings-section-card.settings-option.availability-open-card,
    #contextContacts .contacts-section-card.settings-option.availability-open-card,
    #contextAvailability .settings-option.availability-open-card
):hover {
    border-color: rgba(233, 145, 56, .45) !important;
    background: linear-gradient(180deg, var(--pc-ui-orange-soft) 0%, #fff 100%) !important;
    box-shadow: var(--pc-ui-context-item-hover-shadow) !important;
    transform: translateY(-1px) !important;
}

:is(
    .pc-context-item.is-active,
    .pc-context-item.active,
    #contextBookings .bookings-section-card.is-active,
    #contextBookings .bookings-section-card.active,
    #contextContacts .contacts-section-card.is-active,
    #contextContacts .contacts-section-card.active,
    #contextAvailability .availability-open-card.is-active,
    #contextAvailability .availability-open-card.active,
    #contextAvailability [data-av-rail-section].is-active,
    #contextAvailability [data-av-rail-section].active,
    #contextAvailability [data-av-rail-section][aria-current="page"]
) {
    border-color: rgba(249, 115, 22, .42) !important;
    background: linear-gradient(180deg, var(--pc-ui-orange-soft) 0%, #fff 100%) !important;
    box-shadow: var(--pc-ui-context-item-active-shadow) !important;
}

:is(
    .pc-context-icon,
    #contextBookings .bookings-section-icon,
    #contextContacts .contacts-section-icon,
    #contextAvailability .settings-option-icon,
    #contextAvailability [data-av-rail-section] .settings-option-icon
) {
    width: var(--pc-ui-context-icon-size) !important;
    height: var(--pc-ui-context-icon-size) !important;
    min-width: var(--pc-ui-context-icon-size) !important;
    border-radius: var(--pc-ui-context-icon-radius) !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(233, 145, 56, .12) !important;
}

:is(
    .pc-context-item.is-active .pc-context-icon,
    .pc-context-item.active .pc-context-icon,
    #contextBookings .bookings-section-card.is-active .bookings-section-icon,
    #contextBookings .bookings-section-card.active .bookings-section-icon,
    #contextContacts .contacts-section-card.is-active .contacts-section-icon,
    #contextContacts .contacts-section-card.active .contacts-section-icon,
    #contextAvailability .availability-open-card.is-active .settings-option-icon,
    #contextAvailability .availability-open-card.active .settings-option-icon,
    #contextAvailability [data-av-rail-section].is-active .settings-option-icon,
    #contextAvailability [data-av-rail-section].active .settings-option-icon,
    #contextAvailability [data-av-rail-section][aria-current="page"] .settings-option-icon
) {
    background: var(--pc-ui-orange-icon) !important;
}

:is(
    .pc-context-copy,
    #contextBookings .bookings-section-copy,
    #contextContacts .contacts-section-copy,
    #contextAvailability .settings-option-copy,
    #contextAvailability [data-av-rail-section] .settings-option-copy
) {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

:is(
    .pc-context-title,
    #contextBookings .bookings-section-copy strong,
    #contextContacts .contacts-section-copy strong,
    #contextAvailability .settings-option-copy strong,
    #contextAvailability [data-av-rail-section] .settings-option-copy strong
) {
    color: var(--pc-ui-ink) !important;
    font-size: var(--pc-ui-context-title-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-context-title-weight) !important;
    letter-spacing: -.02em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

:is(
    .pc-context-subtitle,
    #contextBookings .bookings-section-copy small,
    #contextContacts .contacts-section-copy small,
    #contextAvailability .settings-option-copy small,
    #contextAvailability [data-av-rail-section] .settings-option-copy small
) {
    color: #667085 !important;
    font-size: var(--pc-ui-context-subtitle-size) !important;
    line-height: 1.35 !important;
    font-weight: var(--pc-ui-context-subtitle-weight) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

:is(
    .pc-context-count,
    #contextBookings .bookings-section-count,
    #contextContacts .contacts-section-count
) {
    width: var(--pc-ui-context-count-size) !important;
    height: var(--pc-ui-context-count-size) !important;
    min-width: var(--pc-ui-context-count-size) !important;
    border: 1px solid var(--pc-ui-line-soft) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--pc-ui-muted) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

:is(
    .pc-context-item.is-active .pc-context-count,
    .pc-context-item.active .pc-context-count,
    #contextBookings .bookings-section-card.is-active .bookings-section-count,
    #contextBookings .bookings-section-card.active .bookings-section-count,
    #contextContacts .contacts-section-card.is-active .contacts-section-count,
    #contextContacts .contacts-section-card.active .contacts-section-count
) {
    border-color: rgba(249, 115, 22, .30) !important;
    background: var(--pc-ui-orange-soft) !important;
    color: #c2410c !important;
}

:is(
    .pc-context-summary,
    #contextBookings .bookings-context-note,
    #contextContacts .contacts-context-note
) {
    border: 1px solid #edf1f7 !important;
    border-radius: 18px !important;
    padding: 14px !important;
    background: #fcfdff !important;
    color: var(--pc-ui-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Contrato robusto de Disponibilidad
   El workspace reutiliza #settingsWorkspace y reconstruye el rail dinámicamente.
   Estos aliases con ID garantizan que los mismos tokens gobiernen el título y
   el estado hover/activo, aunque sobrevivan selectores históricos más específicos.
   ------------------------------------------------------------------------- */
#settingsWorkspace .availability-module-hero h1,
#settingsWorkspace .availability-module-hero h1.pc-module-title,
#settingsWorkspace .availability-header h1.pc-module-title {
    font-size: var(--pc-ui-title-size) !important;
    line-height: var(--pc-ui-title-line) !important;
    font-weight: var(--pc-ui-title-weight) !important;
    letter-spacing: var(--pc-ui-title-spacing) !important;
}

#contextAvailability [data-av-rail-section] {
    background: #fff !important;
}

#contextAvailability [data-av-rail-section]:hover {
    border-color: rgba(249, 115, 22, .45) !important;
    background: linear-gradient(180deg, var(--pc-ui-orange-soft) 0%, #fff 100%) !important;
    box-shadow: var(--pc-ui-context-item-hover-shadow) !important;
    transform: translateY(-1px) !important;
}

#contextAvailability [data-av-rail-section].is-active,
#contextAvailability [data-av-rail-section].active,
#contextAvailability [data-av-rail-section][aria-current="page"] {
    border-color: rgba(249, 115, 22, .42) !important;
    background: linear-gradient(180deg, var(--pc-ui-orange-soft) 0%, #fff 100%) !important;
    box-shadow: var(--pc-ui-context-item-active-shadow) !important;
    transform: none !important;
}

#contextAvailability [data-av-rail-section]:hover .settings-option-icon,
#contextAvailability [data-av-rail-section].is-active .settings-option-icon,
#contextAvailability [data-av-rail-section].active .settings-option-icon,
#contextAvailability [data-av-rail-section][aria-current="page"] .settings-option-icon {
    background: var(--pc-ui-orange-icon) !important;
    color: var(--pc-ui-orange-dark) !important;
}

/* -------------------------------------------------------------------------
   Paneles, títulos internos y texto auxiliar
   ------------------------------------------------------------------------- */
:is(
    .pc-panel-title,
    .availability-card-head h2,
    .pricing-ranges-flat-head h3,
    .personal-links-head h3,
    .personal-panel-head h3
) {
    color: var(--pc-ui-ink) !important;
    font-size: var(--pc-ui-panel-title-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-panel-title-weight) !important;
    letter-spacing: -.02em !important;
}

:is(
    .pc-panel-subtitle,
    .availability-card-head p,
    .pricing-ranges-flat-head p,
    .personal-links-head p,
    .availability-empty,
    .availability-empty-state p
) {
    color: var(--pc-ui-muted) !important;
    font-size: var(--pc-ui-panel-copy-size) !important;
    line-height: 1.4 !important;
    font-weight: var(--pc-ui-panel-copy-weight) !important;
}

:is(
    .pc-panel-eyebrow,
    .availability-card-head .availability-kicker,
    .availability-modal .availability-kicker
) {
    color: var(--pc-ui-muted) !important;
    font-size: var(--pc-ui-eyebrow-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-eyebrow-weight) !important;
    letter-spacing: var(--pc-ui-eyebrow-spacing) !important;
    text-transform: uppercase !important;
}

/* -------------------------------------------------------------------------
   Estadísticas, buscadores y tablas compactas
   ------------------------------------------------------------------------- */
:is(.pc-stat-grid, .bookings-stat-grid) {
    gap: 10px !important;
}

:is(.pc-stat-card, .bookings-stat-grid article) {
    padding: 12px 14px !important;
    border-radius: var(--pc-ui-panel-radius) !important;
    box-shadow: none !important;
}

:is(.pc-stat-label, .bookings-stat-grid span) {
    font-size: var(--pc-ui-table-head-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-table-head-weight) !important;
    letter-spacing: .06em !important;
}

:is(.pc-stat-value, .bookings-stat-grid strong) {
    margin-top: 4px !important;
    color: var(--pc-ui-ink) !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
}

:is(.pc-toolbar-card, .bookings-search-card, .contacts-search-card) {
    padding: 8px 10px !important;
    border-radius: var(--pc-ui-panel-radius) !important;
    box-shadow: none !important;
}

:is(.pc-search-input, .bookings-search-box input, .contacts-search-box input) {
    font-size: var(--pc-ui-row-secondary-size) !important;
    font-weight: var(--pc-ui-row-secondary-weight) !important;
}

:is(.pc-count-pill, .bookings-count-pill, .contacts-count-pill) {
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

:is(.pc-data-card, .bookings-list-card, .contacts-list-card-full) {
    border-radius: var(--pc-ui-panel-radius) !important;
    box-shadow: none !important;
}

:is(.pc-data-head, .bookings-table-head, .contacts-table-head) {
    padding: 8px 12px !important;
    color: var(--pc-ui-subtle) !important;
    font-size: var(--pc-ui-table-head-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-table-head-weight) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

:is(.pc-data-row, .bookings-row, .contacts-row) {
    padding: 9px 12px !important;
    gap: 10px !important;
}

:is(.pc-data-primary, .bookings-person strong, .contacts-row-person strong) {
    color: var(--pc-ui-ink) !important;
    font-size: var(--pc-ui-row-primary-size) !important;
    line-height: 1.3 !important;
    font-weight: var(--pc-ui-row-primary-weight) !important;
    letter-spacing: 0 !important;
}

:is(
    .pc-data-secondary,
    .bookings-person span,
    .bookings-row-meta,
    .contacts-row-person span,
    .contacts-row-meta
) {
    color: var(--pc-ui-muted) !important;
    font-size: var(--pc-ui-row-secondary-size) !important;
    line-height: 1.35 !important;
    font-weight: var(--pc-ui-row-secondary-weight) !important;
}

:is(.pc-status-chip, .booking-status) {
    min-height: 23px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

:is(.pc-sync-chip, .booking-sync-chip) {
    min-height: 20px !important;
    margin-top: 3px !important;
    padding: 3px 7px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   Formularios y botones base dentro de módulos
   ------------------------------------------------------------------------- */
:is(
    .pc-control,
    .bookings-form input,
    .bookings-form textarea,
    .bookings-form select,
    .contacts-form input,
    .contacts-form textarea,
    .availability-form-grid input,
    .availability-form-grid select,
    .availability-field input,
    .availability-field select
) {
    font-weight: var(--pc-ui-control-weight) !important;
}

:is(.pc-field-label, .bookings-form label, .contacts-form label, .availability-form-grid label, .availability-field) {
    font-weight: 600 !important;
}

/* Estado activo de “Sin fechas”: comparte los tokens de selección globales. */


/* =========================================================================
   8Q4.6.6 — título visible, Configuración y estado contextual por ruta

   Esta sección consolida los contratos validados por consola sobre el DOM
   realmente visible. No crea estilos por módulo fuera de este archivo:
   Disponibilidad, Configuración, Reservas y Contactos continúan gobernados por
   los mismos tokens --pc-ui-* y por las clases semánticas pc-*.
   ========================================================================= */

/* Disponibilidad reutiliza #settingsWorkspace. El título visible es el h1/h2
   del panel activo, no necesariamente el hero general que permanece oculto. */
#settingsWorkspace
[data-av-section-panel]:not([hidden])
> .availability-card-head
.pc-visible-module-title {
    margin: 1px 0 3px !important;
    color: var(--pc-ui-ink) !important;
    font-size: var(--pc-ui-title-size) !important;
    line-height: var(--pc-ui-title-line) !important;
    font-weight: var(--pc-ui-title-weight) !important;
    letter-spacing: var(--pc-ui-title-spacing) !important;
}

#settingsWorkspace
[data-av-section-panel]:not([hidden])
> .availability-card-head
.pc-module-eyebrow {
    margin-bottom: 3px !important;
    color: var(--pc-ui-subtle) !important;
    font-size: var(--pc-ui-eyebrow-size) !important;
    line-height: 1.2 !important;
    font-weight: var(--pc-ui-eyebrow-weight) !important;
    letter-spacing: var(--pc-ui-eyebrow-spacing) !important;
    text-transform: uppercase !important;
}

#settingsWorkspace
[data-av-section-panel]:not([hidden])
> .availability-card-head
.pc-module-subtitle {
    margin: 0 !important;
    color: var(--pc-ui-muted) !important;
    font-size: var(--pc-ui-subtitle-size) !important;
    line-height: var(--pc-ui-subtitle-line) !important;
    font-weight: var(--pc-ui-subtitle-weight) !important;
}

/* Configuración comparte el mismo encabezado de módulo. */
#settingsWorkspace
.settings-home-screen
.settings-home-header.pc-module-header {
    padding: var(--pc-ui-module-padding-y) var(--pc-ui-module-padding-x) !important;
    border: 1px solid var(--pc-ui-line) !important;
    border-radius: var(--pc-ui-module-radius) !important;
    background: #fff !important;
    box-shadow: var(--pc-ui-module-shadow) !important;
}

#settingsWorkspace .settings-home-screen {
    gap: var(--pc-ui-module-gap) !important;
}

/* Menús contextuales de Disponibilidad y Configuración. aria-current es el
   contrato visual definitivo y se sincroniza desde el hash en el normalizador. */
#contextAvailability [data-av-rail-section].pc-context-item,
#contextSettings [data-settings-home].pc-context-item,
#contextSettings [data-settings-open].pc-context-item {
    background: #fff !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

#contextAvailability [data-av-rail-section].pc-context-item:hover,
#contextSettings [data-settings-home].pc-context-item:hover,
#contextSettings [data-settings-open].pc-context-item:hover {
    border-color: rgba(249, 115, 22, .42) !important;
    background: linear-gradient(180deg, var(--pc-ui-orange-soft) 0%, #fff 100%) !important;
    box-shadow: var(--pc-ui-context-item-hover-shadow) !important;
    transform: translateY(-1px) !important;
}

#contextAvailability [data-av-rail-section].pc-context-item[aria-current="page"],
#contextSettings [data-settings-home].pc-context-item[aria-current="page"],
#contextSettings [data-settings-open].pc-context-item[aria-current="page"] {
    border-color: rgba(249, 115, 22, .46) !important;
    background: linear-gradient(180deg, var(--pc-ui-orange-soft) 0%, #fff 100%) !important;
    box-shadow: var(--pc-ui-context-item-active-shadow) !important;
    transform: none !important;
}

#contextAvailability [data-av-rail-section].pc-context-item[aria-current="page"] .settings-option-icon,
#contextSettings [data-settings-home].pc-context-item[aria-current="page"] .settings-option-icon,
#contextSettings [data-settings-open].pc-context-item[aria-current="page"] .settings-option-icon {
    background: var(--pc-ui-orange-icon) !important;
    color: var(--pc-ui-orange-dark) !important;
}