#es .es-stream .es-stream-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Max width specific stream elements due to it will affect vertical spaces. */
/*
#es .es-stream-preview .es-photos,
#es .es-stream-embed.is-link,
#es .es-stream-embed.is-ads,
#es .es-stream-embed.is-video {
	max-width: 640px;
}
*/
#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn,
#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn:focus,
#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn:active,
#es .es-story-privacy .es-privacy .es-privacy-toggle,
#es .btn-es-primary {

	background: #4e72e2 !important;
	color: #ffffff !important;
	border-color: rgba(78,114,226, 0) !important;
}

#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn:hover,

#es .es-story-privacy .es-privacy .es-privacy-toggle:hover,
#es .es-story-privacy .es-privacy .es-privacy-toggle:focus,
#es .es-story-privacy .es-privacy .es-privacy-toggle:active,
#es .btn-es-primary:hover,
#es .btn-es-primary:active,
#es .btn-es-primary:focus {
	background-color: #224dd1 !important;
}



/** Danger **/
#es .btn-es-danger {
	background: #f43f5e !important;
	color: #ffffff !important;
	border-color: rgba(244,63,94, 0) !important;
}

#es .btn-es-danger:hover,
#es .btn-es-danger:active,
#es .btn-es-danger:focus {
	background-color: #e80d33 !important;
}

#es .btn-es-danger-o:hover, #es .btn-es-danger-o:active, #es .btn-es-danger-o {
	color: #f43f5e !important;
}

/** Default **/
#es .es-mobile-filter-slider__btn,
#es .btn-es-default {
	background: #ffffff !important;
	color: #333333 !important;
	border: 1px solid rgba(51,51,51, 0.2) !important;
}

#es .btn-es-default-o,
#es .btn-es-default-o:hover,
#es .btn-es-default-o:active,
#es .btn-es-default-o:focus {
	background: #ffffff !important;
	color: #333333 !important;
}

/** Success **/
#es .btn-es-success {
	background: #00a576 !important;
	color: #ffffff !important;
	border-color: rgba(0,165,118, 0) !important;
}

#es .btn-es-success:hover,
#es .btn-es-success:active,
#es .btn-es-success:focus {
	background-color: #00684a !important;
}

#es .btn-es-success-o,
#es .btn-es-success-o:hover,
#es .btn-es-success-o:active,
#es .btn-es-success-o:focus {
	color: #00a576 !important;
}


#es .es-stream .es-stream-content.es-story--bg-1 a,
#es .es-stream .es-stream-content.es-story--bg-1 a:hover,
#es .es-stream .es-stream-content.es-story--bg-1 a:focus {
	font-weight: 700;
	text-decoration: underline;
	color: #000000 !important;
}

#es .es-stream .es-stream-content.es-story--bg-1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	line-height: 1.5;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 4px;
}

#es .es-stream .es-stream-content.es-story--bg-1 .es-stream-info-meta {
	font-size: 16px;
	font-weight: normal;
}

#es .es-story--bg-1 .es-story-panel-contents .es-story-panel-content {
	color: #000000 !important;
}

#es .es-story--bg-1 .es-story-textfield {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
}

#es .es-story--bg-1 .es-story-textfield,
#es .es-story--bg-1 {
	color: #000000 !important;

	
		background-image: -webkit-linear-gradient(left, #FFD1CD 0%, #D5FFFA 100%) !important;
	background-image: -o-linear-gradient(left, #FFD1CD 0%, #D5FFFA 100%) !important;
	background-image: linear-gradient(to right, #FFD1CD 0%, #D5FFFA 100%) !important;
	background-repeat: repeat-x !important;
	}
#es .es-story--bg-1 .es-story-meta,
#es .es-story--bg-1 .es-stream-info-meta {
	color: #000000 !important;
}
#es .es-story--bg-1 .es-story-textfield::-webkit-input-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-1 .es-story-textfield::-moz-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-1 .es-story-textfield:-ms-input-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-1 .es-story-textfield:-moz-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}

#es .es-stream .es-stream-content.es-story--bg-2 a,
#es .es-stream .es-stream-content.es-story--bg-2 a:hover,
#es .es-stream .es-stream-content.es-story--bg-2 a:focus {
	font-weight: 700;
	text-decoration: underline;
	color: #000000 !important;
}

#es .es-stream .es-stream-content.es-story--bg-2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	line-height: 1.5;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 4px;
}

#es .es-stream .es-stream-content.es-story--bg-2 .es-stream-info-meta {
	font-size: 16px;
	font-weight: normal;
}

#es .es-story--bg-2 .es-story-panel-contents .es-story-panel-content {
	color: #000000 !important;
}

#es .es-story--bg-2 .es-story-textfield {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
}

#es .es-story--bg-2 .es-story-textfield,
#es .es-story--bg-2 {
	color: #000000 !important;

	
		background-image: -webkit-linear-gradient(left, #FFAFBC 0%, #FFC3A0 100%) !important;
	background-image: -o-linear-gradient(left, #FFAFBC 0%, #FFC3A0 100%) !important;
	background-image: linear-gradient(to right, #FFAFBC 0%, #FFC3A0 100%) !important;
	background-repeat: repeat-x !important;
	}
#es .es-story--bg-2 .es-story-meta,
#es .es-story--bg-2 .es-stream-info-meta {
	color: #000000 !important;
}
#es .es-story--bg-2 .es-story-textfield::-webkit-input-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-2 .es-story-textfield::-moz-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-2 .es-story-textfield:-ms-input-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-2 .es-story-textfield:-moz-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}

#es .es-stream .es-stream-content.es-story--bg-3 a,
#es .es-stream .es-stream-content.es-story--bg-3 a:hover,
#es .es-stream .es-stream-content.es-story--bg-3 a:focus {
	font-weight: 700;
	text-decoration: underline;
	color: #FFFFFF !important;
}

#es .es-stream .es-stream-content.es-story--bg-3 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	line-height: 1.5;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 4px;
}

#es .es-stream .es-stream-content.es-story--bg-3 .es-stream-info-meta {
	font-size: 16px;
	font-weight: normal;
}

#es .es-story--bg-3 .es-story-panel-contents .es-story-panel-content {
	color: #FFFFFF !important;
}

#es .es-story--bg-3 .es-story-textfield {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
}

#es .es-story--bg-3 .es-story-textfield,
#es .es-story--bg-3 {
	color: #FFFFFF !important;

	
		background-image: -webkit-linear-gradient(left, #DFAFFD 0%, #4E6FFB 100%) !important;
	background-image: -o-linear-gradient(left, #DFAFFD 0%, #4E6FFB 100%) !important;
	background-image: linear-gradient(to right, #DFAFFD 0%, #4E6FFB 100%) !important;
	background-repeat: repeat-x !important;
	}
#es .es-story--bg-3 .es-story-meta,
#es .es-story--bg-3 .es-stream-info-meta {
	color: #FFFFFF !important;
}
#es .es-story--bg-3 .es-story-textfield::-webkit-input-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}
#es .es-story--bg-3 .es-story-textfield::-moz-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}
#es .es-story--bg-3 .es-story-textfield:-ms-input-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}
#es .es-story--bg-3 .es-story-textfield:-moz-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}

#es .es-stream .es-stream-content.es-story--bg-4 a,
#es .es-stream .es-stream-content.es-story--bg-4 a:hover,
#es .es-stream .es-stream-content.es-story--bg-4 a:focus {
	font-weight: 700;
	text-decoration: underline;
	color: #000000 !important;
}

#es .es-stream .es-stream-content.es-story--bg-4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	line-height: 1.5;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 4px;
}

#es .es-stream .es-stream-content.es-story--bg-4 .es-stream-info-meta {
	font-size: 16px;
	font-weight: normal;
}

#es .es-story--bg-4 .es-story-panel-contents .es-story-panel-content {
	color: #000000 !important;
}

#es .es-story--bg-4 .es-story-textfield {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
}

#es .es-story--bg-4 .es-story-textfield,
#es .es-story--bg-4 {
	color: #000000 !important;

	
		background-image: -webkit-linear-gradient(left, #87FCC4 0%, #EBE7B3 100%) !important;
	background-image: -o-linear-gradient(left, #87FCC4 0%, #EBE7B3 100%) !important;
	background-image: linear-gradient(to right, #87FCC4 0%, #EBE7B3 100%) !important;
	background-repeat: repeat-x !important;
	}
#es .es-story--bg-4 .es-story-meta,
#es .es-story--bg-4 .es-stream-info-meta {
	color: #000000 !important;
}
#es .es-story--bg-4 .es-story-textfield::-webkit-input-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-4 .es-story-textfield::-moz-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-4 .es-story-textfield:-ms-input-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}
#es .es-story--bg-4 .es-story-textfield:-moz-placeholder {
	color: #000000 !important;
	opacity: .7 !important;
}

#es .es-stream .es-stream-content.es-story--bg-5 a,
#es .es-stream .es-stream-content.es-story--bg-5 a:hover,
#es .es-stream .es-stream-content.es-story--bg-5 a:focus {
	font-weight: 700;
	text-decoration: underline;
	color: #FFFFFF !important;
}

#es .es-stream .es-stream-content.es-story--bg-5 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	line-height: 1.5;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 4px;
}

#es .es-stream .es-stream-content.es-story--bg-5 .es-stream-info-meta {
	font-size: 16px;
	font-weight: normal;
}

#es .es-story--bg-5 .es-story-panel-contents .es-story-panel-content {
	color: #FFFFFF !important;
}

#es .es-story--bg-5 .es-story-textfield {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
}

#es .es-story--bg-5 .es-story-textfield,
#es .es-story--bg-5 {
	color: #FFFFFF !important;

	
		background-image: -webkit-linear-gradient(left, #ED9286 0%, #D73E68 100%) !important;
	background-image: -o-linear-gradient(left, #ED9286 0%, #D73E68 100%) !important;
	background-image: linear-gradient(to right, #ED9286 0%, #D73E68 100%) !important;
	background-repeat: repeat-x !important;
	}
#es .es-story--bg-5 .es-story-meta,
#es .es-story--bg-5 .es-stream-info-meta {
	color: #FFFFFF !important;
}
#es .es-story--bg-5 .es-story-textfield::-webkit-input-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}
#es .es-story--bg-5 .es-story-textfield::-moz-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}
#es .es-story--bg-5 .es-story-textfield:-ms-input-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}
#es .es-story--bg-5 .es-story-textfield:-moz-placeholder {
	color: #FFFFFF !important;
	opacity: .7 !important;
}




/* MomyClub migrated custom.css */
#es .es-stream {
    border: none;
    border-radius: 10px;
    padding: 0;
    background-color: #fff;
}

#es .es-stream .es-stream-content {
    padding-left: 15%;
    padding-right: 15%;
}

#es .es-actions-wrapper {
    padding: 0 16px 8px 16px;
    border-top: none;
}

#es .es-reaction-stats,
#es .es-comment,
#es .es-comments-form {
    padding: 8px 16px;
    border-top: solid 1px #e1e1e1;
}

#es .es-reaction-stats,
#es .es-comments-control__load,
#es .es-comments-wrap {
    background-color: #c5ceeb;
}

#es .es-reaction-stats__text>a {
    color: #2b47bd;
}

/* Tighten the reactions row: the theme puts 16px between icons (8px margin-right on the item
   plus 8px margin-left between siblings). The popbox tabs keep the roomier spacing. */
#es .es-reaction-stats .es-reaction-icon-stat__item {
    margin-right: 0;
}

#es .es-reaction-stats .es-reaction-icon-stat > * + * {
    margin-left: 6px;
}

/* The viewer's own reaction replaces the heart. `is-active` on the link and the
   `es-icon-reaction--<key>` class on [data-button-main-icon] are both maintained by the
   EasySocial bundle, so no script is needed to keep this in sync. */
#es .es-reaction-option__link .es-action-icon--like .es-icon-reaction--action {
    display: none;
    font-size: 22px;
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

#es .es-reaction-option__link.is-active .es-action-icon--like .es-icon-reaction--action {
    display: inline-block;
}

#es .es-reaction-option__link.is-active .es-action-icon--like > svg {
    display: none;
}

/* Reactions popbox: the "All" tab and the little reaction badge on each avatar.
   The white box is the popbox wrapper (`#es.popbox-reaction`, 254px by default); widening only
   the inner `.es-reaction-stats-pop` makes the content spill outside it. Widen the wrapper and
   let the content fill it. */
#es.popbox-reaction {
    width: 380px;
    max-width: calc(100vw - 24px);
}

#es .es-reaction-stats-pop {
    width: 100%;
}

/* "All" plus one tab per reaction is a tight fit: never let a tab wrap out of the box. */
#es .es-reaction-stats-pop__hd .es-reaction-icon-stat {
    flex-wrap: nowrap;
}

#es .es-reaction-stats-pop__hd .es-reaction-icon-stat__item {
    flex: 0 0 auto;
}

#es .es-reaction-stats-pop__bd {
    max-height: 220px;
}

#es .es-reaction-tab-all__text {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    color: #444;
}

#es .es-reaction-stats-list__avatar {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* The reaction sprite is sized off font-size, so a smaller em gives a smaller badge. */
#es .es-icon-reaction--xs {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

#es .es-reaction-stats-list__avatar .es-icon-reaction--xs {
    position: absolute;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

#es .es-stream-meta {
    padding: 8px 8px 0 8px;
}

#es .es-stream-mini .es-stream .es-stream-meta {
    padding: 5px;
}

#es .es-side-widget {
    border: none;
    border-radius: 10px;
    padding: 15px;
    background-color: #fff;
}

#es .es-container__sidebar {
    position: sticky;
    top: 75px;
    align-self: start;
}

#es .es-container .es-content {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    width: 500px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

#es.is-mobile .es-container .es-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
}

@media (min-width: 1200px) {
    #es.is-mobile .es-container {
        display: flex;
        position: relative;
        height: auto;
    }

    #es.is-mobile .es-container__sidebar {
        display: flex;
    }

    #es.is-mobile .es-container .es-content {
        clear: none;
        display: flex;
        position: relative;
        min-height: 0;
        left: auto;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 500px;
        height: auto;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

#es .es-stream-list>li+li {
    margin-top: 10px;
    padding-top: 0px;
    border-top: none;
}

#es .es-side-widget+.es-side-widget,
#es .es-side-widget+.widgets-wrapper {
    margin-top: 10px;
}

#es .es-profile-header {
    border: none;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
}

#es .es-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2b47bd;
    line-height: 1;
    vertical-align: middle;
}

#es .es-action-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#es .es-reaction-option__link.is-active .es-action-icon--like {
    color: #e11d48 !important;
}

#es .es-action-icon--like.is-es-liked {
    color: #e11d48 !important;
}

#es .es-photo.ar-3x4>a {
    padding-top: 133.33333333333%;
}

#es .es-photo.ar-5x4>a {
    padding-top: 80%;
}

#es .es-photo.ar-4x5>a {
    padding-top: 125%;
}

#es .es-photo.ar-9x16>a {
    padding-top: 177.77777777778%;
}

#es .es-stream-photos-carousel {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #f5f6f8;
}

#es .es-stream-photos-single-cover {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #f5f6f8;
}

#es .es-stream-photos-carousel__viewport {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}

#es .es-stream-photos-carousel__track {
    display: flex;
    width: 100%;
    transition: transform 220ms ease;
    will-change: transform;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide {
    float: none;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide {
    float: none;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-1x1 {
    aspect-ratio: 1 / 1;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-5x4 {
    aspect-ratio: 5 / 4;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-3x4 {
    aspect-ratio: 3 / 4;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-4x3 {
    aspect-ratio: 4 / 3;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-4x5 {
    aspect-ratio: 4 / 5;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-16x9 {
    aspect-ratio: 16 / 9;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__slide.ar-9x16 {
    aspect-ratio: 9 / 16;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-1x1 {
    aspect-ratio: 1 / 1;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-5x4 {
    aspect-ratio: 5 / 4;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-3x4 {
    aspect-ratio: 3 / 4;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-4x3 {
    aspect-ratio: 4 / 3;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-4x5 {
    aspect-ratio: 4 / 5;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-16x9 {
    aspect-ratio: 16 / 9;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__slide.ar-9x16 {
    aspect-ratio: 9 / 16;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__media {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 0;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__media {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 0;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__media u,
#es .es-stream-photos-carousel .es-stream-photos-carousel__media b {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__media u,
#es .es-stream-photos-single-cover .es-stream-photos-single-cover__media b {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__media b:before {
    display: none;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__media b:before {
    display: none;
}

#es .es-stream-photos-carousel .es-stream-photos-carousel__media img {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    opacity: 1;
    object-fit: cover;
    border-radius: 0;
}

#es .es-stream-photos-single-cover .es-stream-photos-single-cover__media img {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    opacity: 1;
    object-fit: cover;
    border-radius: 0;
}

#es .es-stream-photos-carousel__button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(20, 24, 31, 0.72);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transform: translateY(-50%);
    cursor: pointer;
}

#es .es-stream-photos-carousel__button:hover,
#es .es-stream-photos-carousel__button:focus {
    background: rgba(20, 24, 31, 0.88);
    color: #fff;
}

#es .es-stream-photos-carousel__button:disabled {
    opacity: 0;
    pointer-events: none;
}

#es .es-stream-photos-carousel__button svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

#es .es-stream-photos-carousel__button--prev {
    left: 10px;
}

#es .es-stream-photos-carousel__button--next {
    right: 10px;
}

#es.is-mobile .es-stream-photos-carousel__button {
    width: 32px;
    height: 32px;
}

/* =============================================
   STORY FORM – flexbox layout
   .es-story-top: avatar + textarea side-by-side
   .es-story-header: buttons – full width
   .es-story-footer: actions – full width
   ============================================= */
#es .es-story.is-story-alwaysopen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ---- Top row: avatar + body side-by-side ---- */
#es .es-story.is-story-alwaysopen .es-story-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

#es .es-story.is-story-alwaysopen .es-story-avatar {
    position: static;
    flex: 0 0 48px;
    width: 48px;
    padding: 0;
}

#es .es-story.is-story-alwaysopen .es-story-avatar .o-avatar-v2 {
    width: 48px;
    height: 48px;
}

#es .es-story.is-story-alwaysopen .es-story-body {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin-left: 0 !important;
    background: transparent;
}

#es .es-story.is-story-alwaysopen .es-story-text,
#es .es-story.is-story-alwaysopen .es-story-textbox,
#es .es-story.is-story-alwaysopen .mentions {
    min-height: 80px;
    width: 100%;
    max-width: none;
}

#es .es-story.is-story-alwaysopen .es-story-text {
    padding: 8px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background: #fff;
}

#es .es-story.is-story-alwaysopen .es-story-textfield {
    min-height: 80px;
    width: 100% !important;
    max-width: none;
    padding: 0;
    border: 0;
    resize: vertical;
    font-size: 16px;
    line-height: 1.45;
    background: transparent;
    box-sizing: border-box;
}

/* ---- Header (panel buttons) – full width, no columns ---- */
#es .es-story.is-story-alwaysopen .es-story-header {
    width: 100%;
    padding: 0;
    border: 0;
    margin-left: 0 !important;
}

#es .es-story.is-story-alwaysopen .es-story-panel-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: stretch;
    width: 100%;
    justify-content: flex-start;
    padding: 0;
}

#es .es-story.is-story-alwaysopen .es-story-panel-button--slide {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2937;
    text-align: center;
    outline: 0;
    box-shadow: none;
}

#es .es-story.is-story-alwaysopen .es-story-panel-button--slide.active {
    color: #2b47bd;
    border: 0 !important;
    background: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#es .es-story.is-story-alwaysopen .es-story-panel-button--slide.active::before,
#es .es-story.is-story-alwaysopen .es-story-panel-button--slide.active::after,
#es .es-story.is-story-alwaysopen .es-story-panel-button--slide.active .es-story-panel-button__shape::before,
#es .es-story.is-story-alwaysopen .es-story-panel-button--slide.active .es-story-panel-button__shape::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#es .es-story.is-story-alwaysopen .es-story-panel-button--slide .es-story-panel-button__shape {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
}

#es .es-story.is-story-alwaysopen .es-story-panel-button--slide .es-story-panel-button__shape > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
}

#es .es-story.is-story-alwaysopen .es-story-panel-button--slide span {
    display: none;
}

#es .es-story.is-story-alwaysopen .es-story-body > .es-story-panel-content {
    margin-top: 0;
}

#es .es-story.is-story-alwaysopen[class*="plugin-"] .es-story-body > .es-story-panel-content {
    margin-top: 8px;
}

#es .es-story.is-story-alwaysopen [data-story-panel-content]:not(.active) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#es .es-story.is-story-alwaysopen [data-story-panel-content].active {
    margin-top: 0 !important;
}

#es .es-story.is-story-alwaysopen .es-story-panel-contents.active,
#es .es-story.is-story-alwaysopen .es-story-panel-contents .es-story-panel-content.active {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Footer – full width, single line of buttons, boxes wrap below ---- */
#es .es-story.is-story-alwaysopen .es-story-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 0;
    border-top: none;
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0;
}

#es .es-story.is-story-alwaysopen .es-story-meta-contents {
    flex: 1 0 100%;
    width: 100%;
    order: 4;
    margin-top: 8px;
}

#es .es-story.is-story-alwaysopen .es-story-postto {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
}

#es .es-story.is-story-alwaysopen .es-story-postto>a {
    position: relative;
    display: inline-flex;
    min-height: 32px;
    padding: 0 20px 0 8px !important;
    align-items: center;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px;
    background: #fff !important;
    color: #1f2937;
    font-size: 12px;
    white-space: nowrap;
}

#es .is-story-selection .es-story-avatar-popbox-toggle {
    border-radius: 6px !important;
    display: inline-flex !important;
}

#es .es-story.is-story-alwaysopen .es-story-postto .es-story-panel-button__label {
    position: static !important;
    overflow: hidden;
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#es .es-story.is-story-alwaysopen .es-story-postto .es-story-avatar-popbox-toggle__icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
}

#es .es-story.is-story-alwaysopen .es-story-meta-buttons {
    display: flex;
    order: 1;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
}

#es .es-story.is-story-alwaysopen .es-story-meta-button {
    margin-right: 1px !important;
}

#es .es-story.is-story-alwaysopen .es-story-actions {
    display: flex;
    order: 3;
    flex: 0 0 auto;
    gap: 0;
    align-items: center;
    margin-left: auto;
}

#es .es-story.is-story-alwaysopen .es-story-actions__share,
#es .es-story.is-story-alwaysopen .es-story-actions__schedule {
    margin-right: 4px;
}

#es .es-story.is-story-alwaysopen .es-story-submit {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px;
    border-radius: 8px 0 0 8px;
}

#es .es-story.is-story-alwaysopen .es-story-privacy {
    margin-left: -1px;
}

#es .es-story.is-story-alwaysopen .es-story-privacy .es-privacy,
#es .es-story.is-story-alwaysopen .es-story-privacy [data-es-privacy-container] {
    min-height: 36px;
    border-radius: 0 8px 8px 0;
}

#es .es-story.is-story-alwaysopen .story-loading {
    width: 100%;
}

/* ---- Mobile / narrow overrides ---- */
#es.is-mobile .es-story.is-story-alwaysopen,
#es.w480 .es-story.is-story-alwaysopen {
    gap: 12px;
    padding: 12px;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-top,
#es.w480 .es-story.is-story-alwaysopen .es-story-top {
    gap: 12px;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-avatar,
#es.w480 .es-story.is-story-alwaysopen .es-story-avatar {
    flex: 0 0 40px;
    width: 40px;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-avatar .o-avatar-v2,
#es.w480 .es-story.is-story-alwaysopen .es-story-avatar .o-avatar-v2 {
    width: 40px;
    height: 40px;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-swiper-nav,
#es.w480 .es-story.is-story-alwaysopen .es-story-swiper-nav,
#es.is-mobile .es-story.is-story-alwaysopen [data-story-panel-buttons-mobile],
#es.w480 .es-story.is-story-alwaysopen [data-story-panel-buttons-mobile],
#es.is-mobile .es-story.is-story-alwaysopen [data-story-panel-buttons-wrapper],
#es.w480 .es-story.is-story-alwaysopen [data-story-panel-buttons-wrapper] {
    display: flex;
    width: 100%;
    overflow: visible;
}

#es .es-story-swiper-nav:not(.is-end-right)::after,
#es.is-mobile .es-story-swiper-nav:not(.is-end-right)::after,
#es.w480 .es-story-swiper-nav:not(.is-end-right)::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

#es.is-mobile .es-story.is-story-alwaysopen [data-story-panel-buttons-wrapper],
#es.w480 .es-story.is-story-alwaysopen [data-story-panel-buttons-wrapper] {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    transform: none !important;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-panel-button--slide,
#es.w480 .es-story.is-story-alwaysopen .es-story-panel-button--slide {
    flex: 0 0 44px;
    min-width: 44px;
    max-width: 44px;
    width: 44px;
    padding-left: 0;
    padding-right: 0;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-footer,
#es.w480 .es-story.is-story-alwaysopen .es-story-footer {
    align-items: stretch;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-postto,
#es.w480 .es-story.is-story-alwaysopen .es-story-postto,
#es.is-mobile .es-story.is-story-alwaysopen .es-story-meta-buttons,
#es.w480 .es-story.is-story-alwaysopen .es-story-meta-buttons,
#es.is-mobile .es-story.is-story-alwaysopen .es-story-actions,
#es.w480 .es-story.is-story-alwaysopen .es-story-actions {
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 1px;
}

#es.is-mobile .es-story.is-story-alwaysopen .es-story-actions .es-story-submit,
#es.w480 .es-story.is-story-alwaysopen .es-story-actions .es-story-submit {
    flex: 1 1 auto;
}

#es .es-story-panel-button__label {
    position: relative;
    cursor: pointer;
    border-radius: 32px;
    background: #fff;
    color: #444;
    font-weight: bold;
    padding: 0;
    padding-right: 24px;
}

/* ===== Popbox "Postar em" (seletor de destino) em tela estreita =====
   O ES fixa #es.popbox--story-select em 540px. Abaixo disso o popbox — ancorado ao gatilho e
   posicionado pelo JS — sangra para fora da tela e corta a busca e a aba "Grupos".
   Mesmo remedio que o proprio ES ja aplica em #es.popbox--navbar: largura relativa com
   left/margin-left em !important (o `left` vem INLINE do JS de posicionamento, senao perde).
   O min-height:200px do conteudo + max-height:320px da lista deixam a caixa alta demais no
   celular, entao encolhem junto. */
@media (max-width: 560px) {
    #es.popbox--story-select {
        width: 96% !important;
        max-width: none !important;
        left: 50% !important;
        margin-left: -48% !important;
    }

    #es.popbox--story-select .es-story-selection-popbox__content {
        min-height: 120px;
    }

    #es.popbox--story-select .es-story-selection-popbox .es-list {
        max-height: 44vh;
    }
}
/* -- postagem de video no feed --------------------------------------------- */

/* The file-name title is dropped for uploads (streams/videos/preview.php), so the meta line
   becomes the first thing under the player and has to carry the separator's breathing room -
   it only has side padding of its own. */
#es .es-stream-embed__meta.es-video-meta--no-title {
    padding-top: 8px;
}

/* The views counter moved out of that meta line into the stream actions row. It is a plain
   readout, not a button, so it only needs to line up with the icons next to it. */
#es .es-actions-list > li.action-title-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* `#es .es-actions-list > li > span` gets 4px of theme padding, which would push the number
   away from its icon. */
#es .es-actions-list > li.action-title-views > span {
    padding: 0;
}

#es .es-actions-list > li.action-title-views .es-action-count {
    color: #666;
    font-size: 13px;
    line-height: 1;
}

/* -------------------------------------------------------------------------
   PROPORCAO NATIVA DE VIDEO (vertical sem tarja preta)
   -------------------------------------------------------------------------
   O tema empilha DUAS caixas de 16:9 sobre o mesmo player:

       #es .video-container            { padding-bottom: 56.25%; height: 0; overflow: hidden }
       #es .es-video-player .es-viewport { padding-top: 56.25%; height: 100%; overflow: hidden }

   Trocar so uma delas foi exatamente o erro do `.is-9by16` nativo (ele muda apenas o max-width e
   continua herdando o padding-bottom de 56.25%). Aqui as duas sao neutralizadas e a caixa passa a
   ser dirigida por aspect-ratio + as custom properties --es-vr-w/--es-vr-h, que o servidor
   (videoratio-helper.php) ou o video-ratio.js preenchem com os pixels reais.

   NAO usar padding em %: porcentagem de padding resolve contra a largura do PAI, nao contra a
   propria largura do elemento - combinada com o max-width abaixo, a conta sairia errada.

   Sem a classe .es-vr nada muda: o comportamento 16:9 de hoje continua valendo (degrada sozinho).
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Luxofans (17/09/2026): o <video> CRU ocupa a caixa desde o primeiro paint.

   ☠️ O `style.min.css` do tema posiciona so' `#es .es-video-player .es-viewport > div` — e esse
      `div.video-js` SO' EXISTE depois que o video.js embrulha o `<video>`, o que acontece tarde
      (um `EasySocial.require()` assincrono POR VIDEO). Ate la o `<video>` fica no fluxo normal,
      empurrado para baixo pelo `padding-top: 56.25%` do `.es-viewport` e recortado pelo
      `overflow: hidden` do proprio: o poster nao aparece, e quando o player monta ele "pula"
      para dentro da caixa. Era metade do "video pequeno que amplia depois de alguns segundos".
   ⚠️ A outra metade era a proporcao, hoje emitida pelo servidor (`.es-vr` + `--es-vr-w/h`) —
      ver videoratio-helper.php.
   ⚠️ Mesma especificidade do seletor de fabrica (`>div`), so' que para `>video`: nao disputa com
      ele, complementa. Quando o video.js monta, o `div.video-js` assume e esta regra deixa de
      casar sozinha.
   ------------------------------------------------------------------------- */
#es .es-video-player .es-viewport > video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* `contain`, nao `cover`: cortar video vertical e' exatamente o que a politica de altura
       do bloco `.es-vr` acima existe para evitar. */
    object-fit: contain;
    background: #000;
}

#es .video-container.es-vr,
#es .es-video-player.es-vr {
    /* UNICO botao da politica de altura. 625px = 4:5 da coluna de 500px do feed.
       Um video 9:16 renderiza 352x625 centralizado: inteiro, sem corte e sem tarja - so o player
       fica mais estreito que a coluna (e o que YouTube Shorts e Facebook fazem no desktop). */
    --es-vr-maxh: 625px;

    height: auto;
    padding-bottom: 0;
    aspect-ratio: var(--es-vr-w) / var(--es-vr-h);
    max-width: calc(var(--es-vr-maxh) * var(--es-vr-w) / var(--es-vr-h));
    margin-left: auto;
    margin-right: auto;
}

#es .video-container.es-vr .es-video-player {
    display: block;
    height: 100%;
}

#es .video-container.es-vr .es-video-player .es-viewport,
#es .es-video-player.es-vr .es-viewport {
    padding-top: 0;
    height: 100%;
}

/* A caixa agora casa com o video, entao 'contain' e 'cover' dao o mesmo resultado. Usamos cover
   com fundo transparente porque a medida do servidor vem do POSTER e o mp4 transcodificado pode
   diferir ~0,25% - com 'contain' isso viraria um risco preto de 1px na borda. */
#es .video-container.es-vr .vjs-poster,
#es .es-video-player.es-vr .vjs-poster {
    background-size: cover;
    background-color: transparent;
}

#es .video-container.es-vr .video-js,
#es .es-video-player.es-vr .video-js {
    background-color: transparent;
}

/* TARJA PRETA NAS LATERAIS (pillarbox) - so no FEED.

   O bloco acima encolhe a caixa ate a proporcao real do video e a centraliza (max-width +
   margin:auto), entao num vertical 9:16 o player fica com 352px numa coluna de 500px e sobram
   ~74px de cada lado. Esse vao mostrava o BRANCO do cartao (`#es .es-stream-embed
   {background-color:#fff}`); pintar o PAI de preto e o pillarbox do Facebook/Instagram.

   Quem recebe o preto e o `.es-stream-embed__player`, que ja e width:100% + overflow:hidden e ja
   tem os cantos de cima arredondados em 6px - a tarja nasce recortada certa, de graca.

   Nao precisa de :has() nem de gate por `.es-vr`: num video 16:9 (ou num embed externo de
   YouTube/Facebook, que nao ganha a classe) o filho ocupa a largura toda e o preto nunca aparece.

   ⚠️ De proposito NAO vale fora do feed: a pagina do video (`videos/item/default.php`) e o embed
   (`videos/item/embed.php`) usam o mesmo `.es-vr` mas outro invólucro, e a decisao foi manter os
   dois como estao. */
#es .es-stream-embed.is-video .es-stream-embed__player {
    background-color: #000;
}

/* Luxofans (11/09/2026): so sobra o player dentro de `.es-stream-embed.is-video` (titulo,
   descricao e a linha categoria+data foram removidos em streams/videos/preview.php) - a borda
   cinza de 1px que a pele `luxofans` forca em `border-color` (`themes/luxofans/structure/
   custom.css.php`) ficaria abraçando o video sozinha, sem nada mais dentro da caixa pra separar.
   Pedido do dono: sem moldura. `!important` porque a pele usa `!important` no border-color. */
#es .es-stream-embed.is-video {
    border: none !important;
}

@media (max-width: 767px) {
    /* No celular a coluna e 100% da tela, entao o teto passa a ser a viewport - mas sem engolir a
       tela inteira (o cabecalho e a linha de acoes precisam continuar alcancaveis). */
    #es .video-container.es-vr,
    #es .es-video-player.es-vr {
        --es-vr-maxh: 78vh;
    }
}

/* -------------------------------------------------------------------------
   MOMYCLUB 02 - CABECALHOS: o CSS MUDOU DE ENDERECO
   -------------------------------------------------------------------------
   O bloco "PERFIL COMPRIMIDO NA COLUNA DO FEED" que ficava aqui foi para

       media/com_easysocial/cabecalho/css/cabecalho.css

   junto com o redesenho dos quatro cabecalhos (usuario, turma, comunidade, evento).

   Dois motivos:
   1. `addCustomTag` (que emite este arquivo) renderiza DEPOIS de todos os <link>, entao um bloco
      aqui venceria o arquivo novo em qualquer empate de especificidade;
   2. `media/` sobrevive a update do EasySocial e e' 1 copia por site, em vez de 4 (2 forks x 2
      sites) de um PHP de 40 KB para sincronizar a mao.

   ⚠️ NAO reintroduzir regras de `.es-profile-header` aqui. O escopo novo e' `[data-mc2-hdr]`.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   AVATAR DO USUARIO NO COMPOSITOR DE COMENTARIO — oculto por padrao
   -------------------------------------------------------------------------
   `comments/form.php` (compartilhado por ~10 telas: pagina de foto, video, evento,
   grupo, discussao...) sempre renderiza `.es-cmt-composer-avatar`. Fica ESCONDIDO aqui
   e cada superficie que quiser o avatar liga `display:block` por conta propria — hoje
   sao o modal de comentarios (media/com_easysocial/comments-modal/css/comments-modal.css)
   e a folha do lightbox de foto (media/com_easysocial/photoviewer/css/photoviewer-panel.css).
   Sem este gate, o avatar empilharia acima do campo em toda tela que usa este form.
   ------------------------------------------------------------------------- */
#es .es-cmt-composer-avatar {
    display: none;
}

#es .es-cmt-composer-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}



/* =========================================================================
   LUXOFANS — identidade sobre o tema Dark
   =========================================================================
   Paleta, extraida do site legado (os 21 blocos `#es` que viviam no Custom CSS
   do YOOtheme antigo):

     #31242f  ameixa      cartao, painel, widget, caixa
     #210e1e  ameixa esc. comentarios, aba ativa, fundo de midia
     #ff741e  laranja     links dentro do #es e botao outline
     #ffce00  amarelo     nav de perfil ativa
     #cecece  cinza claro nav de perfil inativa
     #c903b8  magenta     botao primario do EasySocial

   O cinza de base (#333 painel, #444 hover, #555 borda, #888 muted, #f5f5f5
   texto) ja' vem do style.min.css do tema Dark — nao se repete aqui.

   ⚠️ DUAS REGRAS DO LEGADO FORAM CORRIGIDAS, NAO COPIADAS. La' existiam
      `#es .btn-es-default-o,:active,:focus,:hover{...!important}` e
      `#es .es-dialog-footer-content .btn-es-primary,:active,:focus,:hover{...}`.
      Os `:active/:focus/:hover` soltos, sem elemento antes, valem como
      `*:active/*:focus/*:hover` — ou seja, pintavam de laranja QUALQUER
      elemento sob o mouse na pagina inteira, com `!important`. Aqui as pseudo-
      classes foram amarradas ao proprio botao.
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   TIER 1 — as tres superficies que respondem por ~80% do branco visivel.
   Sao as tres regras do momyclub02 (custom.css.php l. 222, 349 e 432); aqui so'
   a cor muda, o resto da regra de la' continua valendo.
   ------------------------------------------------------------------------- */
#es .es-stream,
#es .es-side-widget,
#es .es-profile-header {
    background-color: #31242f;
}


/* -------------------------------------------------------------------------
   TIER 2 — identidade Luxofans
   ------------------------------------------------------------------------- */

/* As demais superficies de cartao. `.o-box` e' o cartao generico do ES;
   `.es-convo` e' o chat; `.es-app-item` sao os blocos de aplicativo. */
#es .es-app-item,
#es .es-convo,
#es .es-forms__content,
#es .es-snackbar .es-stream,
#es .o-box {
    background-color: #31242f;
}

/* Nav do perfil (Linha do tempo / Sobre / Amigos / Fotos ...) */
#es .es-profile-header-nav {
    background-color: #31242f;
}

#es .es-profile-header-nav__link {
    color: #cecece;
}

#es .es-profile-header-nav .is-active .es-profile-header-nav__link {
    color: #ffce00;
    border-bottom-color: #ffce00;
}

/* Links. O tema Dark nao declara cor em `#es a`, entao sem isto o link herdaria
   o #ffce00 do YOOtheme. O legado usava laranja dentro do EasySocial. */
#es a {
    color: #ff741e;
}

/* Comentarios e "carregar mais comentarios" */
#es .es-comments-control__load,
#es .es-comments-wrap {
    background-color: #210e1e;
}

#es .es-comments-form .es-form {
    background-color: #31242f;
    border-color: #31242f;
}

/* Aba lateral ativa */
#es .o-tabs--stacked .o-tabs__item.active > .o-tabs__link {
    background-color: #210e1e;
    border-right-color: #ff741e;
}

/* Botao outline — o "Ver Todos os Usuarios", "Ver Quadro de Lideres",
   "Veja Todos os Grupos" e afins. O Dark ja' o deixa `#333`; o legado o pintava
   de laranja. Precisa de `!important` porque o alvo tambem tem. */
#es .btn-es-default-o,
#es .btn-es-default-o:hover,
#es .btn-es-default-o:focus,
#es .btn-es-default-o:active {
    background-color: #ff741e !important;
    color: #fff !important;
    border-color: #ff741e !important;
}

/* Botao primario. O momyclub02 emite `#4e72e2` (azul) a partir de
   `button.primary.bg` do social_config; o Luxofans e' magenta. Resolvido aqui
   para NAO mexer no social_config — trocar de tema reverte sozinho.
   Os seletores acompanham os que o momyclub02 emite (l. 42-52). */
#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn,
#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn:focus,
#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn:active,
#es .es-story-privacy .es-privacy .es-privacy-toggle,
#es .btn-es-primary {
    background: #c903b8 !important;
    color: #ffffff !important;
    border-color: rgba(201, 3, 184, 0) !important;
}

#es .es-mobile-filter-slider .is-active .es-mobile-filter-slider__btn:hover,
#es .es-story-privacy .es-privacy .es-privacy-toggle:hover,
#es .es-story-privacy .es-privacy .es-privacy-toggle:focus,
#es .es-story-privacy .es-privacy .es-privacy-toggle:active,
#es .btn-es-primary:hover,
#es .btn-es-primary:active,
#es .btn-es-primary:focus {
    background-color: #9f0292 !important;
}


/* -------------------------------------------------------------------------
   TIER 3 — varredura do custom.css.php do momyclub02
   Cada regra abaixo neutraliza uma cor clara ou o azul #2b47bd do tema base que
   sobreviveria por cima do tema Dark. A linha citada e' a do arquivo de la'.
   ------------------------------------------------------------------------- */

/* l. 245 — azul-lavanda #c5ceeb na barra de reacoes e no wrap de comentarios */
#es .es-reaction-stats,
#es .es-comments-control__load,
#es .es-comments-wrap {
    background-color: #210e1e;
}

/* l. 239 — divisoria clara #e1e1e1 entre reacoes, comentario e formulario */
#es .es-reaction-stats,
#es .es-comment,
#es .es-comments-form {
    border-top-color: #555;
}

/* l. 249 — o azul #2b47bd do tema base no link "N Reacoes" */
#es .es-reaction-stats__text > a {
    color: #ff741e;
}

/* l. 440 — os icones da linha de acoes do post: coracao, balao de comentario,
   repost e o olho de visualizacoes do video. Laranja #f66b08 (27/08/2026).

   ☠️ O !important NAO E' OPCIONAL, e nao e' por causa de especificidade: a cor
      desses icones vem de um `style=` INLINE no <span>, escrito em tres lugares —
      `stream/actions/default.php` (balao e olho), `likes/action.php` (coracao) e
      `repost/action.php`. Inline vence qualquer folha sem !important, e era por
      isso que a regra antiga (que pintava de #ff741e junto com o link acima)
      nunca teve efeito nenhum aqui: ela existia e o icone continuava azul.

   ☠️ E ha um SEGUNDO escritor: `templates/yootheme/js/custom.js` reescreve
      `icon.style.color` no clique do coracao (#2b47bd solto / #e11d48 curtido).
      So o !important cobre os dois — trocar apenas o PHP faria o coracao voltar
      ao azul depois do primeiro clique. Medido.

   ⚠️ O ESTADO "CURTIDO" CONTINUA VERMELHO, e nao por acaso: o momyclub02 ja
      protege o #e11d48 com dois !important MAIS ESPECIFICOS (l. 451 e 455) —
      `.es-reaction-option__link.is-active .es-action-icon--like` (1,3,0) e
      `.es-action-icon--like.is-es-liked` (1,2,0) — que ganham deste (1,1,0).
      Nao mexer neles achando que sao sobra: sao o unico motivo de o coracao
      curtido nao virar laranja. (Na pratica ele nem apareceria: com reacao, o
      tema poe o <svg> em `display:none` e mostra o sprite no lugar.) Idem
      `.es-pv__rail .es-action-icon`, que mantem os icones brancos no lightbox
      de fotos. Tudo verificado no navegador.

   ⚠️ A cor NAO vai para o momyclub/momyclub02: aqueles sao o tema BASE (e a base
      de rollback), e cor de marca mora na pele. Mesma regra do plg_system_luxofansskin.

   ✅ Contraste sobre o cartao #31242f: **4,93:1** — passa folgado nos 3:1 que a WCAG
      1.4.11 pede para elemento grafico, e ate' nos 4,5:1 de texto. Historico deste
      mesmo ponto: azul #2b47bd = 1,92:1 (o estado de fabrica, reprovado), magenta
      #c903b8 = 2,94:1 (tentativa de 27/08, tambem abaixo do minimo), laranja
      #f66b08 = 4,93:1. Ao trocar esta cor de novo, MEDIR antes.

   ⚠️ Este laranja e' vizinho do #ff741e usado como TINTA DE LINK em todo o #es (e
      logo acima, no "N Reacoes"): (246,107,8) contra (255,116,30). Sao cores
      distintas de proposito — o pedido foi este valor —, mas ficam quase iguais na
      tela. Se um dia a ideia for unifica-las, e' trocar as duas para o mesmo hex,
      nunca deixar as duas "quase" iguais achando que e' uma so'. */
#es .es-action-icon {
    color: #f66b08 !important;
}

/* l. 333-334 — o anel branco que recorta o icone de reacao sobre o avatar.
   Ele existe para separar icones sobrepostos: tem de ser a cor do cartao. */
#es .es-reaction-stats-list__avatar .es-icon-reaction--xs {
    background-color: #31242f;
    box-shadow: 0 0 0 2px #31242f;
}

/* l. 481 e 489 — fundo #f5f6f8 atras das fotos do post (aparece nas bordas de
   foto retrato e no carrossel) */
#es .es-stream-photos-carousel,
#es .es-stream-photos-single-cover {
    background: #210e1e;
}

/* l. 707-709, 757-759, 920-923, 1086 — a caixa "no que voce esta pensando",
   que o momyclub02 redesenhou em branco com borda #e5e7eb */
#es .es-story.is-story-alwaysopen {
    background: #31242f;
    border-color: #555;
}

#es .es-story.is-story-alwaysopen .es-story-text {
    background: #31242f;
    border-color: #555;
}

#es .es-story.is-story-alwaysopen .es-story-postto > a {
    background: #31242f !important;
    border-color: #555 !important;
    color: #f5f5f5;
}

/* O rotulo do seletor "Postar em". O tema Dark ja' o deixa em #f5f5f5, mas o
   momyclub02 o repinta de `#444` sobre `#fff` (l. 1086-1087) — e o `#444` fica
   ilegivel sobre a ameixa. Aparece no composer do feed e dentro do modal do
   botao [+] da toolbar, que e' onde ele mais incomoda. */
#es .es-story-panel-button__label {
    background: #31242f;
    color: #cfcfcf;
}

/* l. 807 e 814 — rotulos dos botoes da story, em #1f2937 e #2b47bd */
#es .es-story.is-story-alwaysopen .es-story-panel-button--active,
#es .es-story.is-story-alwaysopen .es-story-panel-button--active .es-story-panel-button__label {
    color: #ff741e;
}

/* Story em edicao — legado */
#es .is-editing .es-story-text,
#es .is-editing .xes-story-textbox,
#es .is-editing .es-story-panel-content.active,
#es .is-editing .es-story-panel-contents.active {
    background-color: #31242f;
}


/* -------------------------------------------------------------------------
   TIER 4 — o que a conferencia no navegador encontrou
   ------------------------------------------------------------------------- */

/* O fundo atras das fotos do post. Precisa de `!important`, e nao por capricho:
   o `#f5f6f8` nao vem de folha de estilo nenhuma, vem de ATRIBUTO `style`
   INLINE — `themes/momyclub02/stream/photos.php:81` o escreve no HTML e o
   `stream/photos.js:120` o reescreve em runtime. Atributo inline vence
   qualquer regra sem `!important`, por mais especifica que seja. */
#es .es-stream-photos-carousel,
#es .es-stream-photos-single-cover,
#es .es-stream-photos-carousel__viewport {
    background: #210e1e !important;
}


/* -------------------------------------------------------------------------
   Chat (ConverseKit, `plg_system_conversekit`)
   O plugin JA' TEM uma paleta escura completa, so' que atras de um seletor de
   atributo — `[data-ck-theme="dark"]` — que nada neste site liga. Em vez de
   mexer no plugin ou injetar o atributo por JS, redefinimos as variaveis no
   `:root`: mesma especificidade da definicao clara dele, e este bloco entra
   depois. Os valores sao os do proprio modo escuro dele, com a familia de
   fundo trocada pela ameixa do Luxofans para casar com os cartoes, e o
   primario pelo magenta.
   ------------------------------------------------------------------------- */
:root {
    --ck-font-color: #f5f5f5;
    --ck-font-color--d: #888;
    --ck-font-color--l: #ccc;
    --ck-bg-color: #31242f;
    --ck-bg-color--d: #210e1e;
    --ck-bg-color--l: #3b2c39;
    --ck-border-color: #555;
    --ck-border-color--d: #666;
    --ck-border-color--l: #443341;
    --ck-primary-color: #c903b8;
    --ck-primary-color--d: #9f0292;
    --ck-primary-color--l: #9f0292;
    --ck-primary-color--hover: #9f0292;
    --ck-font-color--bubble: #f5f5f5;
    --ck-font-color--bubble-me: #f5f5f5;
    --ck-font-color--bubble-link: #ffce00;
    /* Estes dois sao os valores de referencia; quem PINTA o balao hoje sao as
       regras literais do bloco abaixo (o plugin nao le' estes tokens no
       "WHATSAPP REDESIGN"). Mantidos em sincronia para nao mentir. */
    --ck-bg-color--bubble: #31242f;
    --ck-bg-color--bubble-me: #005c4b;
}

/* As poucas superficies do chat que nao passam pelas variaveis */
#ck .ckit-composer__map,
#ck .ckit-composer__files.ck-att-thumb .ck-att-thumb__img {
    background-color: #210e1e;
}

/* -------------------------------------------------------------------------
   Chat — TIER 5b do ConverseKit: as superficies que NAO passam por token
   -------------------------------------------------------------------------
   O bloco `:root` acima escurece tudo que o plugin dirige por variavel — e e'
   por isso que a faixa lateral, o cabecalho e a lista de conversas ja' estavam
   escuros. Mas o plugin tem um bloco apenso de ~2.250 linhas no fim do
   `assets/css/style.css` (o "WHATSAPP REDESIGN", a partir da l. 10859) que
   pinta com COR LITERAL: dos ~380 declaracoes de cor dentro de `#ck`, so' ~90
   leem `var(--ck-*)`.

   Resultado medido em 19/08/2026: balao recebido `#ffffff` e enviado `#DCF8C6`
   com a tinta ja' clara do `:root` acima = TEXTO INVISIVEL. E' a mesma armadilha
   do Tier 5b do EasySocial: token troca tinta, superficie literal nao.

   ⚠️ POR QUE AQUI E NAO NO PLUGIN. O `CLAUDE.md` manda por CSS novo do chat no
   fim do `assets/css/style.css`. Para COR nao da': aquele arquivo pertence ao
   ConverseKit, que e' plugin de TERCEIRO — um update dele reescreve o arquivo e
   leva a paleta junto. Aqui a cor sobrevive ao update.

   ⚠️ O CHAT NAO ESTA' DENTRO DO `#es`. O `conversekit.php:280-284` injeta o
   widget imediatamente antes de o fim do corpo da pagina, irmao do `#es`. Nada prefixado com
   `#es ` alcanca o chat — por isso todo seletor daqui comeca em `#ck` (ou sem
   prefixo, no caso do painel de mencoes, que o `mentions.js:97` prega no
   o corpo da pagina).

   ⚠️ `!important` EM TUDO. Duas razoes: (a) os baloes sao pintados por
   `#ck:not([data-ck-theme="dark"]) .ck-msg__bubble`, especificidade (1,2,0),
   que ganha de um `#ck .ck-msg__bubble` (1,1,0) mesmo entrando depois; (b) o
   `templates/default.php:23-35` emite um uma tag `style` no FIM DO BODY, depois de
   tudo. Com `!important` some a adivinhacao de especificidade — mas entao e'
   obrigatorio tratar as VARIANTES na mao (`.is-me`, `.is-mine`, `.is-read`,
   `.is-picked`, `.is-selected`, `:disabled`, `:hover`), senao a regra generica
   as engole. Aconteceu duas vezes hoje no EasySocial.

   Duas coisas NAO se resolvem por CSS e foram trocadas na configuracao:
     · fundo da conversa  -> `conversations.conversekit.bgcolor` no
       `#__social_config` (era o lilas `#d5dbf2`, agora `#210e1e`)
     · cor primaria       -> params `button_color`/`button_hover_color` do
       `plg_system_conversekit` (eram `#1976d2`/`#3455c8`, agora o magenta) —
       era esse azul que vencia o `--ck-primary-color` daqui de cima.

   Paleta: conversa #210e1e · recebido #31242f · enviado #005c4b (casa com o
   #00A884 do botao de enviar) · flutuante #31242f · encaixe #210e1e ·
   degrau #3b2c39 · borda #555 · tinta #f5f5f5 · fraca #cfcfcf · apagada #8f8f8f.
   Os verdes de acao (#00A884, #008069, #25D366) e o azul de "lido" (#53BDEB)
   ficam como estao.
   ------------------------------------------------------------------------- */

/* --- Baloes -------------------------------------------------------------- */
#ck .ck-msg__bubble {
    background-color: #31242f !important;
    border-color: #443341 !important;
    color: #f5f5f5 !important;
    box-shadow: none !important;
}
#ck .ck-msg.is-me .ck-msg__bubble {
    background-color: #005c4b !important;
    border-color: #0a6b58 !important;
    color: #f5f5f5 !important;
}
/* Rabinho: SVG data-URI com a cor EMBUTIDA (l. 11516 e 11530) — nao ha' var()
   possivel ali, entao o data-URI e' reescrito inteiro com as cores novas. */
#ck .ck-msg.is-me .ck-msg__bubble::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3E%3Cpath d='M0 0.7 L8 0.7 L0 10' fill='%23005c4b' stroke='%230a6b58' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat !important;
    background-size: contain !important;
}
#ck .ck-msg.is-other .ck-msg__bubble::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3E%3Cpath d='M10 0.7 L2 0.7 L10 10' fill='%2331242f' stroke='%23443341' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat !important;
    background-size: contain !important;
}
#ck .ck-msg__time {
    color: #cfcfcf !important;
}
/* Sobre foto a hora continua branca (fundo e' a imagem, nao o balao). */
#ck .ck-msg__bubble.has-photo .ck-msg__time {
    color: #ffffff !important;
}
#ck .ck-msg__ticks {
    color: #cfcfcf !important;
}
#ck .ck-msg__ticks.is-read {
    color: #53BDEB !important;
}
#ck .ck-msg__fwd,
#ck .ck-msg__date {
    color: #cfcfcf !important;
}
/* A setinha do menu tem um degrade que TERMINA na cor do balao para "sumir"
   dentro dele. Sem reapontar, sobra um borrao claro no meio do balao escuro. */
#ck .ck-msg__menu-btn {
    color: #cfcfcf !important;
}
#ck .ck-msg.is-me .ck-msg__menu-btn {
    background: linear-gradient(to right, rgba(0, 92, 75, 0) 0%, #005c4b 58%) !important;
}
#ck .ck-msg.is-other .ck-msg__menu-btn {
    background: linear-gradient(to right, rgba(49, 36, 47, 0) 0%, #31242f 58%) !important;
}
#ck .ck-msg__menu-btn:hover {
    color: #ffffff !important;
}

/* --- Acento do cabecalho e nome do remetente -----------------------------
   O `--ck-primary-color` (magenta #c903b8) e' otimo como FUNDO — o badge de
   nao-lidas usa ele com texto branco — mas como TINTA sobre a ameixa da'
   2.94:1: a setinha de voltar e o nome de quem falou no grupo ficam apagados.
   Medido na bancada. Onde ele e' tinta, vira o amarelo da nav ativa (8.7:1);
   onde e' fundo, fica como esta'. */
#ck .ckit-container__hd a,
#ck .btn-ckit-head-back,
#ck .ck-msg.is-other .ck-msg__name {
    color: #ffce00 !important;
}

/* --- Midia dentro do balao ---------------------------------------------- */
#ck .ck-photo-grid__img,
#ck .ck-link-preview__img,
#ck .ck-msg__story {
    background-color: #210e1e !important;
}
#ck .ck-link-preview {
    border-color: #555 !important;
}
#ck .ck-msg.is-me .ck-link-preview {
    border-color: #0f7a63 !important;
}
#ck .ck-voice-message__time {
    color: #cfcfcf !important;
}

/* --- Citacao / responder ------------------------------------------------- */
#ck .ck-msg__quote,
#ck .ck-reply-bar__body {
    background: rgba(255, 255, 255, .08) !important;
}
#ck .ck-msg__quote-text,
#ck .ck-reply-bar__text {
    color: #cfcfcf !important;
}

/* --- Composer ------------------------------------------------------------ */
#ck .ck-input-pill {
    background: #31242f !important;
    border-color: #555 !important;
}
#ck .ck-input-pill__btn.btn-custom-rounded {
    color: #cfcfcf !important;
}
#ck .ck-input-pill__btn.btn-custom-rounded:hover,
#ck .ck-input-pill__btn.btn-custom-rounded:focus {
    color: #ffffff !important;
}
#ck .form-control::placeholder {
    color: #8f8f8f !important;
}
#ck .form-control::-webkit-input-placeholder {
    color: #8f8f8f !important;
}
#ck .ck-voice-recorder,
#ck .ck-voice-recorder__timer {
    color: #f5f5f5 !important;
}
#ck .ck-voice-recorder__btn.is-trash {
    background: #3b2c39 !important;
}
#ck .ck-voice-recorder__btn.is-trash:hover {
    background: #4a3a47 !important;
}

/* --- Lista de conversas: o que sobrou de literal ------------------------- */
#ck .ckit-chat-listing__item.has-notification {
    background-color: #3b2c39 !important;
}
#ck .ck-adbar {
    background: #3b2c39 !important;
}
#ck .ckit-alert-msg.is-success {
    background: #12301c !important;
    color: #bbf7d0 !important;
}
#ck .ckit-alert-msg.is-error {
    background: #3a1418 !important;
    color: #fca5a5 !important;
}

/* --- Menu do balao, reacoes --------------------------------------------- */
#ck .ck-msg__menu,
#ck .ck-react-popover {
    background: #31242f !important;
    border-color: #555 !important;
}
#ck .ck-msg__menu .ck-menu__item {
    color: #f5f5f5 !important;
}
#ck .ck-msg__menu .ck-menu__item svg,
#ck .ck-msg__menu .ck-menu__more {
    color: #cfcfcf !important;
}
#ck .ck-msg__menu .ck-menu__item:hover {
    background: #3b2c39 !important;
}
#ck .ck-msg__menu .ck-menu__item--danger {
    color: #fca5a5 !important;
}
#ck .ck-reaction {
    background: #3b2c39 !important;
    border-color: #555 !important;
}
#ck .ck-reaction.is-mine {
    background: #0a5c4a !important;
    border-color: #0f7a63 !important;
}
#ck .ck-reaction__count {
    color: #cfcfcf !important;
}

/* --- Encaminhar e modo de selecao --------------------------------------- */
#ck .ck-forward__box,
#ck .ck-select-bar {
    background: #31242f !important;
    border-color: #555 !important;
}
#ck .ck-forward__hint {
    color: #cfcfcf !important;
}
#ck .ck-forward__hint b,
#ck .ck-select-bar__count {
    color: #f5f5f5 !important;
}
#ck .ck-select-bar__btn {
    color: #cfcfcf !important;
}
#ck .ck-forward-modal .ckit-chat-listing__item.is-picked {
    background: #0b3d33 !important;
}
#ck .ck-msg__check {
    background: #210e1e !important;
    border-color: #555 !important;
}
#ck .ck-forward__send:disabled,
#ck .ck-select-bar__fwd:disabled {
    background: #3b2c39 !important;
    color: #8f8f8f !important;
}

/* --- Criar grupo, mencoes, administracao do grupo ----------------------- */
#ck .ckit-cg-modal__dialog {
    background: #31242f !important;
    color: #f5f5f5 !important;
}
#ck .ckit-cg-count,
#ck .ckit-cg-userlist .ckit-search-msg {
    color: #cfcfcf !important;
}
#ck .ckit-cg-avatar__img {
    background: #3b2c39 !important;
}
#ck .ckit-cg-userlist .ckit-chat-listing__item.is-selected {
    background: #0b3d33 !important;
}
#ck .ckit-admin-badge {
    background: #12301c !important;
    color: #bbf7d0 !important;
}
#ck .ckit-admin-action {
    color: #7fe0b8 !important;
}
#ck .ckit-admin-action.is-demote {
    color: #fdba74 !important;
}
#ck .ckit-admin-action.is-remove {
    color: #fca5a5 !important;
}
/* ⚠️ O painel de mencoes e' o unico pedaco do chat FORA do `#ck`: o
   `assets/js/mentions.js:97` faz `document.body.appendChild(panel)`. Por isso
   estes quatro seletores nao levam o prefixo. */
.ckit-mention-panel {
    background: #31242f !important;
    border-color: #555 !important;
}
.ckit-mention-item:hover,
.ckit-mention-item.is-active {
    background: #3b2c39 !important;
}
.ckit-mention-item__name {
    color: #f5f5f5 !important;
}
.ckit-mention-item__desc {
    color: #8f8f8f !important;
}
.ckit-mention-item__avatar {
    background: #3b2c39 !important;
    color: #cfcfcf !important;
}

/* --- Painel de emoji ----------------------------------------------------- */
#ck .ckit-emoji-panel {
    border-color: #555 !important;
}
#ck .ckit-emoji-item:hover {
    background: #3b2c39 !important;
}

/* --- A UNICA regra deste arquivo que nao e' cor -------------------------
   O ConverseKit tem um botao "Modo escuro" por usuario nas Configuracoes do
   proprio chat (`templates/settings.php:40`, param `darkmode_setting`, hoje
   desligado). Como o chat passa a ser escuro para todo mundo por CSS, ligar ou
   desligar aquele botao nao muda mais nada — e controle inerte confunde. Some.

   ⚠️ O cabecalho deste arquivo diz "SO' COR, nada de display". A regra vale
   para o layout do EasySocial, que nao pode mudar; isto e' o ConverseKit, e a
   decisao de esconder foi do usuario em 19/08/2026. Fica registrada aqui para
   nao ser "corrigida" numa auditoria futura. */
#ck .o-row:has([data-settings-darkmode]) {
    display: none !important;
}

/* --- Janela e scrollbar do chat (ConverseKit) ---------------------------- */
#ck,
#ck *,
.ckit-mention-panel,
.ckit-mention-panel * {
    scrollbar-width: thin;
    scrollbar-color: var(--ck-primary-color, #c903b8) transparent;
}
#ck ::-webkit-scrollbar,
#ck *::-webkit-scrollbar,
.ckit-mention-panel::-webkit-scrollbar,
.ckit-mention-panel *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
#ck ::-webkit-scrollbar-track,
#ck *::-webkit-scrollbar-track,
.ckit-mention-panel::-webkit-scrollbar-track,
.ckit-mention-panel *::-webkit-scrollbar-track {
    background: transparent;
}
#ck ::-webkit-scrollbar-thumb,
#ck *::-webkit-scrollbar-thumb,
.ckit-mention-panel::-webkit-scrollbar-thumb,
.ckit-mention-panel *::-webkit-scrollbar-thumb {
    background-color: var(--ck-primary-color, #c903b8);
    border-radius: 999px;
}
#ck ::-webkit-scrollbar-thumb:hover,
#ck *::-webkit-scrollbar-thumb:hover,
.ckit-mention-panel::-webkit-scrollbar-thumb:hover,
.ckit-mention-panel *::-webkit-scrollbar-thumb:hover {
    background-color: #e024cf;
}
#ck ::-webkit-scrollbar-button,
#ck *::-webkit-scrollbar-button,
.ckit-mention-panel::-webkit-scrollbar-button,
.ckit-mention-panel *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
#ck .ckit-window,
#ck .ckit-container {
    border: none !important;
}
#ck .ckit-window {
    right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: -3px 0 16px rgba(0, 0, 0, 0.25) !important;
}
@media (min-width: 768px) {
    #ck .ckit-window {
        right: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}


/* -------------------------------------------------------------------------
   FORA DO EASYSOCIAL — `mod_edubase_convite` ("Link de Convite")
   ⚠️ Isto e' um MODULO do Joomla, nao uma tela do EasySocial. A regra mora
   aqui, e nao no modulo, de proposito: assim ela some junto com o tema se
   alguem voltar para o momyclub02, e o modulo continua servindo os outros
   sites com o roxo do tema base. O gradiente original era o `#A0A1E4 -> #281EAB`
   do devstack; este e' o mesmo gradiente que o YOOtheme usa em `.uk-card-primary`.
   ------------------------------------------------------------------------- */
.ebc {
    background: linear-gradient(135deg, #812fcb 0%, #d91f71 55%, #ff1445 100%);
}


/* =========================================================================
   TIER 5 — os assets de `media/com_easysocial/`
   =========================================================================
   ⚠️ POR QUE TUDO AQUI LEVA `!important`, E NAO E' PREGUICA. Este bloco inline
   entra pelo `addCustomTag()` durante o `attach()` do EasySocial, mas os ~15
   CSS de `media/com_easysocial/*` sao enfileirados DEPOIS, pelos helpers de
   cada widget, enquanto o componente renderiza. Medido no navegador: este
   bloco e' a folha #16 de 55 — ha' 39 folhas depois dele. Ou seja, contra
   esses arquivos a ordem da cascata joga CONTRA nos, e so' o `!important`
   resolve. (Contra o `style.min.css` do tema e contra o YOOtheme a ordem
   ainda nos favorece, e la' em cima nada precisa de `!important`.)

   ⚠️ EDITAR AQUELES ARQUIVOS ESTA' FORA DE QUESTAO: sao compartilhados entre os
   sites da base, com a exigencia declarada de ficarem byte-identicos.

   Mapa de cores: superficie -> #31242f · encaixe/inset -> #210e1e ·
   borda -> #555 · esqueleto/placeholder -> #3b2c39. Estados semanticos
   mantem o matiz, so' escurecem.
   ------------------------------------------------------------------------- */

/* --- faixa de atalhos do celular (mod_edubase_atalhos) -------------------
   `media/com_easysocial/atalhos/css/atalhos.css`. So' aparece com `is-mobile`
   no `#es` — sinal do user agent, nao da largura da janela —, por isso nao
   aparecia em nenhuma conferencia de computador. Pilula branca sobre o preto.
   O rotulo continua laranja de proposito: e' um link, e quem o pinta e'
   `#es a` (id, especificidade maior que qualquer classe daqui). */
.es-atl__pill {
    background: #31242f !important;
    border-color: #555 !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
}
.es-atl__pill:active {
    background: #3b2c39 !important;
    border-color: #777 !important;
    color: #f5f5f5 !important;
}
.es-atl__pill:focus-visible {
    outline-color: #ff741e !important;
}
.es-atl__icon { color: #c903b8 !important; }
.es-atl__badge { background: #c903b8 !important; }

/* --- sugestoes de amigos -------------------------------------------------
   O `sugestoes.css` TEM um modo escuro completo, so' que atras de
   `[data-bs-theme="dark"]` — atributo que so' o plg_system_edubaseesdarkmode
   escreve, e esse plugin retorna cedo quando o cliente nao e' o admin. No site
   valem so' os valores claros, entao cada cor precisa ser repetida aqui.

   A caixa fica na superficie (#31242f) e o cartao sobe um degrau (#3b2c39):
   pintados da mesma cor os cartoes sumiam dentro da caixa.

   ⚠️ Bloco UNICO — nao criar um segundo la' em cima "por assunto". Aqui e' com
   `!important`, e um bloco sem ele mais acima nao apareceria nem no lugar
   certo: perderia para ESTE e para o proprio sugestoes.css. */
.esug-box {
    background: #31242f !important;
    border-color: #555 !important;
}
.esug-card, .esug-sk {
    background: #3b2c39 !important;
    border-color: #4a3a47 !important;
}
.esug-title {
    color: #f5f5f5 !important;
}
/* `.esug-all` ("Veja todos") fica DE FORA: ja' e' laranja, herdada de `#es a`,
   e e' o unico link da caixa — cinza-la seria piorar o que estava certo. */
.esug-card__sub, .esug-card__badge, .esug-card__x {
    color: #cfcfcf !important;
}
.esug-card__x:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #f5f5f5 !important;
}
/* Vazios: avatar sem foto e as barras do esqueleto. */
.esug-card__av, .esug-sk__av, .esug-sk__ln {
    background: #4a3a47 !important;
}
.esug-card__btn[disabled] {
    background: #4a3a47 !important;
    color: #9a9298 !important;
}
.esug-nav {
    background: #3b2c39 !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}

/* --- paginas pagas ------------------------------------------------------- */
#es .es-ppg-sales, #es .ppg-kpi, #es .ppg-empty,
#es ul.ppg-plans > li.ppg-plan, #es .ppg-tablewrap {
    background: #31242f !important;
    border-color: #555 !important;
}
#es ul.es-ppg-plans > li.es-ppg-plan, #es table.ppg-table th {
    background: #210e1e !important;
    border-color: #555 !important;
}
#es a.ppg-pages__item, #es .ppg-tabs { border-color: #555 !important; }
#es table.ppg-table th, #es table.ppg-table td { border-bottom-color: #555 !important; }
#es .ppg-pill, #es .ppg-pill--2 { background: #3b2c39 !important; }
#es .ppg-msg, #es .ppg-pill--1 { background: #12301c !important; }
#es .ppg-msg.is-error, #es .ppg-pill--3, #es .ppg-pill--4 { background: #3a1418 !important; }
#es .ppg-pill--0 { background: #3a2a12 !important; }

/* --- marketplace --------------------------------------------------------- */
/* ☠️ O FORMULARIO E' O MESMO NOS DOIS LAYOUTS. A secao 1 do `marketplaces.css`
   lista `layout-steps` E `layout-edit` em toda regra, mas este bloco so' citava
   `steps`. Resultado em `/marketplace/<id>/editar`: os tokens `--esmk-*` do
   Tier 7 ja' chegavam escuros (TINTA branca) e os literais claros continuavam
   de pe' (SUPERFICIE branca) — todo campo media `#fbfcfe` com texto `#f5f5f5`,
   1,03:1, branco sobre branco. E' a armadilha "token troca tinta, nao
   superficie" ja' registrada no CLAUDE.md.
   ⚠️ Regra nova aqui entra SEMPRE com os dois layouts. */
#es .esmk-card,
#es.view-marketplaces.layout-item .esmk__report a,
#es.view-marketplaces.layout-steps .o-form-control,
#es.view-marketplaces.layout-steps .o-form-control:focus,
#es.view-marketplaces.layout-steps [data-album-view],
#es.view-marketplaces.layout-steps .es-photo-upload-item,
#es.view-marketplaces.layout-steps .es-forms__actions,
#es.view-marketplaces.layout-edit .o-form-control,
#es.view-marketplaces.layout-edit .o-form-control:focus,
#es.view-marketplaces.layout-edit [data-album-view],
#es.view-marketplaces.layout-edit .es-photo-upload-item,
#es.view-marketplaces.layout-edit .es-forms__actions {
    background: #31242f !important;
}
#es .esmk-card__cover-wrap, #es .esmk-card__chip,
#es.view-marketplaces.layout-item .esmk__chip,
#es.view-marketplaces.layout-steps .es-stepbar__lists > li,
#es.view-marketplaces.layout-steps .o-input-group__addon,
#es.view-marketplaces.layout-steps [data-photo-item],
#es.view-marketplaces.layout-edit .o-input-group__addon,
#es.view-marketplaces.layout-edit [data-photo-item],
.gu-mirror[data-photo-item] {
    background: #210e1e !important;
}

/* ⚠️ Dois seletores deste bloco nunca casaram com nada, nem no `steps`:
   o botao de enviar foto e' o `> a` DENTRO de `[data-album-upload-button]` (o
   involucro so' tem margem, fundo nenhum), e o "Cancelar" do rodape e'
   `.btn-es-default-o`, nao `.btn-es-default`. Os dois seguiam `#fff`. */
#es.view-marketplaces.layout-steps [data-album-upload-button] > a,
#es.view-marketplaces.layout-edit [data-album-upload-button] > a,
#es.view-marketplaces.layout-steps .o-form-actions .btn-es-default-o,
#es.view-marketplaces.layout-edit .o-form-actions .btn-es-default-o {
    background: #3b2c39 !important;
}
#es.view-marketplaces.layout-steps [data-album-upload-button] > a:hover,
#es.view-marketplaces.layout-edit [data-album-upload-button] > a:hover,
#es.view-marketplaces.layout-steps .o-form-actions .btn-es-default-o:hover,
#es.view-marketplaces.layout-edit .o-form-actions .btn-es-default-o:hover {
    background: #4a3a47 !important;
}

/* Bordas claras que sobraram: a tracejada da area de soltar foto (`#cfd8ec`) e
   a do hover do campo (`#cfd6e6`). O hover fica um degrau ACIMA do `#555` de
   repouso — igualar os dois faria o campo parar de responder ao mouse. */
#es.view-marketplaces.layout-steps [data-album-view],
#es.view-marketplaces.layout-edit [data-album-view] {
    border-color: #555 !important;
}
#es.view-marketplaces.layout-steps .o-form-control:hover,
#es.view-marketplaces.layout-edit .o-form-control:hover {
    border-color: #7a7a7a !important;
}

/* Sobras claras da barra de passos e do envio de foto. A bolinha do passo e o
   `> a` DENTRO do `li` (o li ja vem escuro da regra acima) — a do ultimo passo,
   que nunca fica ativa, continuava `#eef1f8`. O trilho da barra de progresso so
   aparece durante o upload, mas claro sobre o cartao escuro parece defeito.

   ⚠️ O `:not(.active):not(.past)` NAO e zelo: com `!important` esta regra e mais
   generica que as variantes `.active` (magenta) e `.past` (verde) do
   `marketplaces.css` e engoliria as duas — a armadilha das variantes ja
   registrada no CLAUDE.md. */
#es.view-marketplaces.layout-steps .es-stepbar__lists > li.stepItem:not(.active):not(.past) > a,
#es.view-marketplaces.layout-steps .upload-progress,
#es.view-marketplaces.layout-edit .upload-progress {
    background: #3b2c39 !important;
}
/* Etiquetas semanticas do marketplace: no claro eram texto escuro sobre um
   fundo translucido da mesma familia. No escuro so' o texto sobrevive, e
   `#1f7a50` / `#b32a41` sobre ameixa nao se le. Matiz mantido, tom invertido.

   ⚠️ TEM de vir DEPOIS da regra generica de `.esmk-card__chip` acima: mesma
   especificidade (1,1,0) e ambas com `!important`, entao quem decide e a ordem. */
#es .esmk-card__chip--ok,
#es.view-marketplaces.layout-item .esmk__chip--ok {
    background: #12301c !important;
    color: #4ade80 !important;
}
#es .esmk-card__chip--danger,
#es.view-marketplaces.layout-item .esmk__chip--danger,
#es .esmk-feed__sold {
    background: #3a1418 !important;
    color: #f43f5e !important;
}

#es.view-marketplaces .o-form-group.has-error .o-form-control { background: #3a1418 !important; }
/* O vermelho `#d4364f` do aviso de erro da' 3,1:1 sobre a ameixa do cartao —
   texto pequeno abaixo do minimo. Mesmo matiz, dois tons acima: 5,4:1. */
#es.view-marketplaces .es-forms .es-fields-error-note:not([hidden]),
#es.view-marketplaces .controls-error,
#es.view-marketplaces .esmk-photos__hint.is-error {
    color: #ff6b81 !important;
}
#es.view-marketplaces .o-alert--warning {
    background: #3a2f14 !important;
    border-color: #6b5a2a !important;
}

/* --- historias: a bandeja do topo ---------------------------------------- */
/* ⚠️ Os aneis `.is-unseen` NAO entram: sao os gradientes que marcam historia
   nao vista, iguais aos do Instagram. Escurece-los apagaria a informacao. */
.es-hst-nav {
    background: #31242f !important;
    border-color: #555 !important;
}
.es-hst-nav:hover { background: #3b2c39 !important; }
.es-hst-tile__avatar,
.es-hst-tray.is-skeleton .es-hst-tile__ring,
.es-hst-tray.is-skeleton .es-hst-tile__avatar,
.es-hst-tray.is-skeleton .es-hst-tile__name {
    background: #3b2c39 !important;
}
.es-hst-tile__plus { border-color: #31242f !important; }
/* `historias-tray.css:282` cravou `#444` no nome sob a bolinha — cinza escuro
   sobre o preto do YOOtheme, ilegivel. */
.es-hst-tile__name { color: #cfcfcf !important; }

/* --- historias: compor --------------------------------------------------- */
.es-hstc__box { background: #31242f !important; }
.es-hstc__drop, .es-hstc__btn--cancel { background: #210e1e !important; }
.es-hstc__hd { border-bottom-color: #555 !important; }
.es-hstc__ft { border-top-color: #555 !important; }
.es-hstc__err { background: #3a1418 !important; }

/* --- avisos -------------------------------------------------------------- */
.es-aviso-modal__panel, .es-avisoc-modal__panel,
.es-avisoc-modal__head, .es-avisoc-input {
    background: #31242f !important;
}
.es-aviso-modal__close, .es-avisoc-modal__close,
.es-avisoc-upload__pick, .es-avisoc-upload__pick:hover {
    background: #210e1e !important;
}
.es-aviso-modal__close:hover, .es-avisoc-modal__close:hover { background: #3b2c39 !important; }
.es-avisoc-modal__head { border-bottom-color: #555 !important; }
.es-avisoc-upload__preview { border-color: #555 !important; }

/* --- barra de reacoes do feed (o modal de comentarios agora nasce escuro
       sozinho: a paleta mora em media/com_easysocial/comments-modal/css/comments-modal.css,
       como custom properties em `.es-cmodal`, e o mesmo vale para a folha do lightbox de
       foto em `.es-pv__sheet` — ver docs/feed.md. Nada aqui precisa mais de !important
       para alcancar o modal: ele e' injetado no fim do <head> e nunca teve branco. ------ */
#es [data-stream-actions] .es-actions__item-stats,
#es [data-stream-actions] .es-reaction-stats {
    background-color: #210e1e !important;
}

/* --- o modulo de convite (ver nota do Tier 4): o proprio modulo emite um
       uma tag style DENTRO do corpo da pagina, que vence qualquer bloco do cabecalho. --------- */
.ebc {
    background: linear-gradient(135deg, #812fcb 0%, #d91f71 55%, #ff1445 100%) !important;
}


/* =========================================================================
   TIER 6 — o que so' apareceu com a pagina montada no navegador
   ------------------------------------------------------------------------- */

/* ⚠️ A COR DO TEXTO DO EASYSOCIAL. Nem o tema Dark nem o momyclub02 declaram
   `color` em `#es` — os dois deixam herdar do `html`. Com isso quem manda e' o
   `#es{color:#444}` que ficou no YOOtheme (esta' no `custom_less` compilado
   dentro do theme.13.css E no `css/custom.css`), escrito quando os paineis do
   EasySocial ainda eram claros. Sobre a ameixa aquilo vira cinza-escuro sobre
   escuro. Declarar aqui resolve sem recompilar o YOOtheme: as duas folhas dele
   entram como tag link, antes deste bloco. */
#es {
    color: #f5f5f5;
}

/* O seletor de reacoes (o popover que abre ao passar o mouse em "curtir").
   O tema Dark de fabrica esquece este: mantem `#fff` mesmo no escuro. */
#es .es-reactions-pop {
    background: #31242f;
    border-color: #555;
}

/* Botao "Copiar link" do modulo de convite: o azul #2b47bd do tema base.
   Precisa de `!important` — o modulo emite a propria tag style DENTRO do corpo
   da pagina, depois deste bloco, e sem isto o azul dele vencia. */
.ebc__btn--copy {
    color: #c903b8 !important;
}


/* =========================================================================
   TIER 7 — os "design systems" por tela
   =========================================================================
   Dezesseis CSS de `media/com_easysocial/` sao dirigidos por TOKENS: cada um
   declara seu proprio punhado de variaveis num seletor proprio e usa `var()`
   no resto do arquivo. Escurecer o token escurece a tela inteira — e' de longe
   o melhor retorno por linha escrita neste trabalho.

   ⚠️ Precisa redeclarar NO MESMO SELETOR (nao adianta por em `#es`): variavel
   herda de cima para baixo, e o elemento redeclara a sua. E precisa de
   `!important` pelo motivo do Tier 5 — esses arquivos entram depois deste
   bloco. `!important` em custom property e' valido e vence.

   Mapa: superficie -> #31242f · encaixe -> #210e1e · linha -> #555 ·
   tinta -> #f5f5f5 · tinta fraca -> #cfcfcf · apagado -> #8f8f8f ·
   marca (era o azul #2b47bd/#4e72e2 do tema base) -> magenta #c903b8.
   Verde/vermelho/ambar sao semanticos e ficam como estao.
   ------------------------------------------------------------------------- */

/* --- cabecalho de perfil / grupo / pagina / evento ----------------------
   `media/com_easysocial/cabecalho/css/cabecalho.css`. Este bloco so' apareceu
   depois que o cabecalho voltou a ser visivel: enquanto o `mc2-hdr-pending`
   ficava preso, a faixa inteira estava em `visibility: hidden` e nenhuma
   varredura de cor a enxergava. Tudo ali dentro sai destas seis variaveis —
   inclusive a faixa de contadores `.mc2-metrics`. */
#es .es-profile-header[data-mc2-hdr] {
    --mc2h-bg: #31242f !important;
    --mc2h-edge: #555 !important;
    --mc2h-line: #443341 !important;
    --mc2h-ink: #f5f5f5 !important;
    --mc2h-ink-2: #cfcfcf !important;
    --mc2h-brand: #ffce00 !important;
}

/* --- anuncios e aprovacoes (mesmo prefixo --esad-) ---------------------- */
#es .esad-wrap, #es .esad-walletbox, #esad-crop,
#es .esadm-modal, #es .esadm-detail {
    --esad-bg: #210e1e !important;
    --esad-card: #31242f !important;
    --esad-border: #555 !important;
    --esad-text: #f5f5f5 !important;
    --esad-muted: #8f8f8f !important;
    --esad-primary: #c903b8 !important;
    --esad-primary-soft: #3b2c39 !important;
}

/* --- cadastro ------------------------------------------------------------ */
#es .esreg-split {
    --esreg-brand: #c903b8 !important;
    --esreg-brand-dark: #9f0292 !important;
    --esreg-aside: #210e1e !important;
    --esreg-ink: #f5f5f5 !important;
    --esreg-ink-soft: #cfcfcf !important;
    --esreg-muted: #8f8f8f !important;
    --esreg-line: #555 !important;
    --esreg-field: #210e1e !important;
}

/* --- registro em etapas -------------------------------------------------- */
#es.view-registration.layout-steps {
    --esreg-brand: #c903b8 !important;
    --esreg-brand-dark: #9f0292 !important;
    --esreg-brand-soft: rgba(201, 3, 184, .18) !important;
    --esreg-ink: #f5f5f5 !important;
    --esreg-ink-soft: #cfcfcf !important;
    --esreg-muted: #8f8f8f !important;
    --esreg-line: #555 !important;
    --esreg-surface: #31242f !important;
}

/* Mesma armadilha do editar perfil, e pelo mesmo motivo: `cadastro.css` e
   `registration.css` tem tokens, mas tambem cravaram claro direto em varias
   regras. Com a tinta ja escurecida pelos tokens acima, cada literal desses
   vira texto claro sobre fundo claro. */
#es .esreg-split {
    background: #31242f !important;
}
#es .esreg-split .o-form-control:focus {
    background: #210e1e !important;
}
#es .esreg-split .has-error .o-form-control {
    background: #3a1418 !important;
}
#es .esreg-phone__toggle:hover {
    background: #3b2c39 !important;
}
#es .esreg-phone__panel {
    background: #31242f !important;
}
#es .esreg-phone__search {
    background: #210e1e !important;
}
#es button.esreg-phone__opt.is-active {
    background: rgba(201, 3, 184, .18) !important;
}

#es.view-registration.layout-steps .es-stepbar__lists > li.stepItem > a {
    background: #3b2c39 !important;
}
#es.view-registration.layout-steps .o-form-control {
    background: #210e1e !important;
}
#es.view-registration.layout-steps .o-form-control:hover {
    border-color: #777 !important;
}
#es.view-registration.layout-steps .o-form-control:focus {
    background: #210e1e !important;
}
#es.view-registration.layout-steps .o-form-control::placeholder {
    color: #8f8f8f !important;
}
#es.view-registration.layout-steps .o-input-group__btn .btn {
    background: #3b2c39 !important;
    color: #f5f5f5 !important;
}
#es.view-registration.layout-steps .o-input-group__btn .btn:hover {
    background: #4a3a47 !important;
}
#es.view-registration.layout-steps .o-form-group.has-error .o-form-control {
    background: #3a1418 !important;
}
#es.view-registration.layout-steps .es-field-avatar,
#es.view-registration.layout-steps .es-field-cover {
    background: #210e1e !important;
    border-color: #555 !important;
}
#es.view-registration.layout-steps .es-forms__actions {
    background: #31242f !important;
}
#es.view-registration.layout-steps .o-form-actions .btn-es-default {
    background: #3b2c39 !important;
    color: #f5f5f5 !important;
}
#es.view-registration.layout-steps .o-form-actions .btn-es-default:hover {
    background: #4a3a47 !important;
}

/* --- diretoria ----------------------------------------------------------- */
.es-diretoria {
    --es-ink: #f5f5f5 !important;
    --es-muted: #8f8f8f !important;
    --es-line: #555 !important;
    --es-card: #31242f !important;
    --es-bg-soft: #210e1e !important;
    /* trilho da barra de armazenamento; era #eceff3 cravado = faixa branca no cartao */
    --es-track: #210e1e !important;
}

/* --- grupos (esu) -------------------------------------------------------- */
.esu-wrap, .esu-modal {
    --esu-accent: #c903b8 !important;
    --esu-accent-dark: #9f0292 !important;
    --esu-accent-soft: #3b2c39 !important;
    --esu-ink: #f5f5f5 !important;
    --esu-muted: #8f8f8f !important;
    --esu-line: #555 !important;
    --esu-line-soft: #443341 !important;
    --esu-surface: #31242f !important;
    --esu-surface-2: #210e1e !important;
    --esu-warn-bg: #3a2a12 !important;
}

/* --- quadro de lideres --------------------------------------------------- */
#es .es-lb {
    --eslb-brand: #c903b8 !important;
    --eslb-brand-2: #b0029f !important;
    --eslb-brand-3: #9f0292 !important;
    --eslb-soft: #3b2c39 !important;
    --eslb-soft-2: #210e1e !important;
    --eslb-ink: #f5f5f5 !important;
    --eslb-ink-2: #cfcfcf !important;
    --eslb-ink-3: #8f8f8f !important;
    --eslb-line: #555 !important;
    --eslb-edge: #555 !important;
}

/* --- marketplace --------------------------------------------------------- */
#es.view-marketplaces.layout-steps, #es.view-marketplaces.layout-edit,
#es.view-marketplaces.layout-create, #es.view-marketplaces.layout-item,
#es .esmk-card {
    --esmk-brand: #c903b8 !important;
    --esmk-brand-dark: #9f0292 !important;
    --esmk-brand-soft: rgba(201, 3, 184, .18) !important;
    --esmk-ink: #f5f5f5 !important;
    --esmk-ink-soft: #cfcfcf !important;
    --esmk-muted: #8f8f8f !important;
    --esmk-line: #555 !important;
    --esmk-surface: #31242f !important;
    --esmk-photo-bg: #210e1e !important;
    --esmk-photo-bg-strip: #3b2c39 !important;
}

/* --- medalhas ------------------------------------------------------------ */
/* ⚠️ Este arquivo JA' tem um bloco escuro, atras de `[data-bs-theme="dark"]`,
   que nada liga aqui. Os valores abaixo sao os dele, com a marca trocada. */
#es .es-med {
    --esmed-brand: #c903b8 !important;
    --esmed-brand-2: #9f0292 !important;
    --esmed-soft: #3b2c39 !important;
    --esmed-ink: #f5f5f5 !important;
    --esmed-ink-2: #cfcfcf !important;
    --esmed-ink-3: #8f8f8f !important;
    --esmed-line: #555 !important;
    --esmed-edge: #555 !important;
}

/* --- editar perfil ------------------------------------------------------- */
/* Redesenho de 12/09/2026 (cartoes de secao, chips, cartao de topo): o
   `perfil/css/profile-edit.css` passou a ler TODA cor de token — superficie
   inclusive —, entao o escuro desta tela e' so' este bloco. Os ~10 literais
   `!important` que existiam aqui (fundo de campo, rodape, botoes) sairam: com o
   CSS por token viraram peso morto. Se uma cor da tela ficar clara, o defeito e'
   um literal que escapou no profile-edit.css, nao falta de linha aqui.
   Contraste CALCULADO dos pares de token (WCAG): branco sobre #c903b8 5,01 e sobre
   #8d00ce 6,94 (chip marcado, Salvar); muted/cartao 4,56; chip-ink/chip 10,41;
   placeholder/campo 5,67; danger/cartao 5,39; icone laranja/bolha 4,83. */
#es.view-profile.layout-edit {
    --espf-card: #31242f !important;
    --espf-soft: #3b2c39 !important;
    --espf-field-bg: #210e1e !important;
    --espf-field-border: #555 !important;
    --espf-field-border-hover: #777 !important;
    --espf-line: rgba(255, 255, 255, .07) !important;
    --espf-ink: #f5f5f5 !important;
    --espf-ink-soft: #cfcfcf !important;
    --espf-muted: #8f8f8f !important;
    --espf-brand: #c903b8 !important;
    --espf-brand-2: #8d00ce !important;
    --espf-brand-soft: rgba(201, 3, 184, .2) !important;
    --espf-on-brand: #fff !important;
    --espf-chip-bg: #3b2c39 !important;
    --espf-chip-border: rgba(255, 255, 255, .1) !important;
    --espf-chip-ink: #ebe3ea !important;
    --espf-accent: #ff741e !important;
    --espf-danger: #ff6b81 !important;
    --espf-danger-bg: #3a1418 !important;
    --espf-success: #4cd28f !important;
    --espf-bar-bg: rgba(33, 14, 30, .84) !important;
    --espf-shadow: 0 8px 30px rgba(0, 0, 0, .25) !important;
    --espf-cover-fade: #31242f !important;
    --espf-scheme: dark !important;
}

/* --- pontos -------------------------------------------------------------- */
#es .es-pts {
    --espt-brand: #c903b8 !important;
    --espt-brand-2: #b0029f !important;
    --espt-brand-3: #9f0292 !important;
    --espt-soft: #3b2c39 !important;
    --espt-ink: #f5f5f5 !important;
    --espt-ink-2: #cfcfcf !important;
    --espt-ink-3: #8f8f8f !important;
    --espt-line: #555 !important;
    --espt-edge: #555 !important;
    --espt-up-bg: #12301c !important;
    --espt-down-bg: #3a1418 !important;
    /* A tinta dos chips "+5"/"-2" nao vinha: verde #0f8a5f e vermelho #b42318
       (l. 29 e 31 do pontos.css) ficavam escuros sobre o chip ja' escurecido
       acima. Mesmo matiz, tom claro. */
    --espt-up: #4ade80 !important;
    --espt-down: #fca5a5 !important;
}

/* --- albuns, amigos e fotos ---------------------------------------------- */
#es .es-album-item.layout-form {
    --edual-surface: #31242f !important;
    --edual-line: #555 !important;
    --edual-line-soft: #443341 !important;
    --edual-ink: #f5f5f5 !important;
    --edual-muted: #8f8f8f !important;
    --edual-brand: #c903b8 !important;
}

#es:is(.view-friends, .view-followers) .es-content .es-list {
    --eduam-surface: #31242f !important;
    --eduam-line: #555 !important;
    --eduam-line-hover: #7a5f74 !important;
    --eduam-ink: #f5f5f5 !important;
    --eduam-muted: #8f8f8f !important;
}

#es .edubase-fotos, #es .o-nav.edubase-fotos-abas {
    --edufo-line: #555 !important;
    --edufo-muted: #8f8f8f !important;
    --edufo-brand: #c903b8 !important;
    --edufo-ink: #f5f5f5 !important;
}

/* =========================================================================
   TIER 5b — SUPERFICIES LITERAIS QUE O TIER 7 NAO ALCANCA
   =========================================================================
   ⚠️ POR QUE ESTE BLOCO EXISTE. O Tier 7 escurece uma tela redeclarando as
   custom properties dela. Isso so' funciona onde o CSS LE' a superficie de um
   token. Onde o arquivo CRAVA `#fff` no `background`, o Tier 7 troca apenas a
   TINTA: o texto vira #f5f5f5 e o cartao continua branco. Medido no navegador
   em 19/08/2026: contraste 1.09:1 — branco sobre branco — na Classificacao, nas
   Medalhas, no Historico de Pontos e no Gerenciar Anuncios.

   Varredura completa (medidor WCAG rodado nas 53 paginas publicadas do menu,
   logado): 115 combinacoes cor/fundo abaixo do minimo, 28 abaixo de 2:1. Este
   bloco fecha as 9 telas de superficie clara + os 3 casos de tinta escura sobre
   o preto + a regressao do magenta na Diretoria.

   ⚠️ `!important` obrigatorio pelo mesmo motivo do Tier 5 (vide l. 313-323):
   os `media/com_easysocial/*` entram DEPOIS deste bloco na cascata. As duas
   telas cujo CSS mora num uma tag `style` inline do template (`cadastro/default.php` e
   `reports/default/default.php`) entram depois AINDA — mas as regras de la' nao
   sao `!important`, entao estas vencem.

   ⚠️ NAO editar os arquivos de origem: `media/com_easysocial/**` e' declarado
   byte-identico entre os sites da base (l. 325-326) e `themes/momyclub02/**` e'
   a base de rollback de um clique.

   Mapa: superficie #31242f · encaixe #210e1e · cartao sobre cartao #3b2c39 ·
   hover #443341 · borda #555 · tinta #f5f5f5 · fraca #cfcfcf · apagada #8f8f8f.
   ------------------------------------------------------------------------- */

/* --- A1 · Classificacao (`leaderboard/css/leaderboard.css`) --------------
   `:39` `.es-lb{background-color:#fff}` e mais tres superficies cravadas. Os
   tokens `--eslb-*` ja' vinham corretos do Tier 7 (l. 713-725) — era so' o
   cartao que ficava branco. */
#es .es-lb {
    background-color: #31242f !important;
    box-shadow: none !important;
}
#es .es-lb__item:hover {
    background-color: #3b2c39 !important;
}
#es a.es-lb__cta {
    background-color: #3b2c39 !important;
    color: #ffce00 !important;
    box-shadow: none !important;
}
#es a.es-lb__more-btn {
    background-color: #210e1e !important;
    color: #f5f5f5 !important;
}
#es a.es-lb__more-btn:hover {
    background-color: #3b2c39 !important;
}

/* --- A2 · Medalhas (`medalhas/css/medalhas.css`) -------------------------
   `:37` o cartao-mae e `:149` cada medalha. Os valores abaixo sao os do bloco
   `[data-bs-theme="dark"]` do proprio arquivo (l. 306-331) — que nunca liga no
   site —, traduzidos para a ameixa. */
#es .es-med {
    background: #31242f !important;
}
#es .es-med__card,
#es a.es-med__card {
    background: #3b2c39 !important;
}
#es a.es-med__card:hover,
#es a.es-med__card:focus {
    background: #443341 !important;
    border-color: #c903b8 !important;
}
#es .es-med__flag {
    color: #bbf7d0 !important;
    background: #14532d !important;
}

/* --- A3 · Historico de Pontos (`pontos/css/pontos.css`) ------------------
   `:35` o cartao, `:109` a pilula do heroi, `:183` o anel do icone (branco
   cravado, sobre a superficie) e `:274` o botao "Carregar mais". */
#es .es-pts {
    background-color: #31242f !important;
    box-shadow: none !important;
}
#es a.es-pts__cta {
    background-color: #3b2c39 !important;
    color: #ffce00 !important;
    box-shadow: none !important;
}
#es .es-pts__icon {
    border-color: #31242f !important;
}
#es button.es-pts__more-btn {
    background-color: #210e1e !important;
    color: #f5f5f5 !important;
}
#es button.es-pts__more-btn:hover {
    background-color: #3b2c39 !important;
}

/* --- A4 · Gerenciar Anuncios (`ads/css/ads.css:926`) ---------------------
   A pilula de conta era a unica superficie de `#fff` literal do arquivo; o
   resto ja' sai do `--esad-*` (Tier 7, l. 674-682). */
#es a.esad-accpill,
#es span.esad-accpill {
    background: #3b2c39 !important;
}

/* --- A5 · Avisos (`avisos/css/*.css`) ------------------------------------
   `/diretoria/avisos` e `/meus-avisos` apontam para a MESMA view: o painel de
   recibos. Painel do grafico e tabela eram dois blocos brancos inteiros. */
#es .es-avisos,
#es .es-avisosm {
    color: #f5f5f5 !important;
}
#es .es-avisos__card,
#es .es-avisosm__card,
#es .es-avisosm__empty {
    background: #31242f !important;
    border-color: #555 !important;
    box-shadow: none !important;
}
#es .es-avisosm__card:hover {
    border-color: #c903b8 !important;
}
#es .es-avisos__cardtitle,
#es .es-avisosm__card-title,
#es .es-avisos-receipts__name {
    color: #f5f5f5 !important;
}
#es .es-avisos__subtitle,
#es .es-avisosm__subtitle,
#es .es-avisosm__card-snippet {
    color: #cfcfcf !important;
}
#es .es-avisos__table th,
#es .es-avisos__empty td,
#es .es-avisosm__card-meta,
#es .es-avisos-receipts__status,
#es .es-avisos-drawer__loading {
    color: #8f8f8f !important;
}
#es .es-avisos__table th,
#es .es-avisos__table td {
    border-bottom-color: #555 !important;
}
#es .es-avisos__table tbody tr:hover {
    background: #3b2c39 !important;
}
#es .es-avisos__new {
    background: #c903b8 !important;
}
#es .es-avisos__new:hover {
    background: #9f0292 !important;
}
#es .es-avisos__btn {
    background: #3b2c39 !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
#es .es-avisos__btn:hover {
    background: #443341 !important;
}
#es .es-avisos__btn.is-danger {
    color: #f87171 !important;
    border-color: #7f1d1d !important;
}
#es .es-avisos__btn.is-danger:hover {
    background: #3a1418 !important;
}
#es .es-avisos__ratebar {
    background: #210e1e !important;
}
#es .es-avisos__badge.is-scheduled {
    background: #3a2a12 !important;
    color: #fcd34d !important;
}
#es .es-avisosm__badge {
    background: #3b2c39 !important;
    color: #cfcfcf !important;
}
#es .es-avisosm__badge.is-new {
    background: #3b2c39 !important;
    color: #c903b8 !important;
}
#es .es-avisosm__dot {
    background: #c903b8 !important;
}

/* Gaveta de recibos. Os dois modais de aviso (compor / ler) JA' estavam cobertos
   pelo Tier 5 (l. 490-500) — a gaveta e' que faltava, e faltavam as TINTAS do
   compositor: o painel ja' era ameixa, mas os rotulos continuavam #4b5563 e as
   opcoes de canal #374151 (1.95:1 e 1.43:1, medidos com o modal aberto).
   ⚠️ Sem prefixo `#es`: os modais sao anexados ao `body`, fora do `#es`. */
.es-avisos-drawer__panel {
    background: #31242f !important;
}
.es-avisos-drawer__head,
.es-avisos-receipts__item {
    border-bottom-color: #555 !important;
}
.es-avisos-drawer__close,
.es-avisos-receipts__av {
    background: #3b2c39 !important;
    color: #f5f5f5 !important;
}
.es-avisos-drawer__close:hover {
    background: #443341 !important;
}
.es-avisoc-label,
.es-avisoc-check,
.es-aviso-modal__content {
    color: #cfcfcf !important;
}
/* O bloco do Tier 5 (l. 494-497) trocou o FUNDO dos "x" de fechar e esqueceu a
   tinta: o glifo continuava #374151 sobre o novo fundo escuro (1.78:1). */
.es-aviso-modal__close,
.es-avisoc-modal__close {
    color: #f5f5f5 !important;
}
.es-avisoc-modal__panel,
.es-aviso-modal__panel {
    color: #f5f5f5 !important;
}
.es-aviso-modal__meta,
.es-avisoc-status {
    color: #8f8f8f !important;
}
.es-aviso-modal__link {
    color: #ff741e !important;
}
.es-avisoc-input,
.es-avisoc-modal input[type="text"],
.es-avisoc-modal textarea {
    background: #210e1e !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
.es-avisoc-upload__pick {
    background: #210e1e !important;
    border-color: #555 !important;
    color: #cfcfcf !important;
}
.es-avisoc-upload__pick:hover {
    background: #3b2c39 !important;
    border-color: #c903b8 !important;
    color: #c903b8 !important;
}

/* --- A6 · Diretoria › Lista de usuarios ---------------------------------
   O CSS desta tela e' um uma tag `style` de 714 linhas dentro de
   `themes/momyclub02/cadastro/default.php` — nao da' para editar la' (base de
   rollback), entao a tabela inteira e' repintada daqui. */
#es .es-cadastro-card,
#es .es-cadastro-actions__menu {
    background: #31242f !important;
    border-color: #555 !important;
}
#es .es-cadastro-actions__menu a:hover {
    background: #3b2c39 !important;
}
#es .es-cadastro-actions__divider {
    background: #555 !important;
}
#es .es-cadastro-table thead th,
#es .es-mass-table th {
    background: #210e1e !important;
    color: #8f8f8f !important;
}
#es .es-cadastro-table tbody tr,
#es .es-cadastro-table tbody tr:nth-child(even) {
    background: #31242f !important;
}
#es .es-cadastro-table tbody tr:hover,
#es .es-mass-hist tbody tr[data-mass-hist-item]:hover {
    background: #3b2c39 !important;
}
#es .es-cadastro-user__username,
#es .es-ms__placeholder,
#es .es-hist-muted {
    color: #8f8f8f !important;
}
#es .es-ms__control,
#es .es-ms__panel,
#es .es-ms__search {
    background: #210e1e !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
#es .es-ms.is-disabled .es-ms__control {
    background: #31242f !important;
}
#es .es-ms__chip {
    background: #3b2c39 !important;
    color: #f5f5f5 !important;
}
#es .es-ms__opt:hover {
    background: #3b2c39 !important;
}
#es .es-switch__track {
    background: #555 !important;
}
/* ⚠️ O `!important` acima tambem vencia o estado LIGADO (`.es-switch input:checked +
   .es-switch__track{background:#22c55e}`, l. 291 do uma tag `style` do cadastro) — o toggle
   "Ativo" perdia o verde. Reposto com a mesma forca. */
#es .es-switch input:checked + .es-switch__track {
    background: #22c55e !important;
}
#es .es-switch__thumb {
    background: #f5f5f5 !important;
}
/* Aba ativa era #1d4ed8 (azul do tema base) direto sobre o preto da pagina. */
#es .es-cadastro-tabs__item {
    color: #cfcfcf !important;
}
#es .es-cadastro-tabs__item:hover,
#es .es-cadastro-tabs__item.is-active {
    color: #ffce00 !important;
    border-bottom-color: #ffce00 !important;
}
#es .es-mass-hist-empty {
    background: #210e1e !important;
    border-color: #555 !important;
    color: #cfcfcf !important;
}
#es .es-badge--mass {
    background: #2a2440 !important;
    color: #c7d2fe !important;
}
#es .es-badge--indiv {
    background: #14532d !important;
    color: #bbf7d0 !important;
}

/* --- A7/B3 · Diretoria › Denuncias --------------------------------------
   Mesmo caso: uma tag `style` inline em `themes/momyclub02/reports/default/default.php`.
   O `.es-rep{color:#1f2937}` da l. 34 era a tinta de TODA a tela — inclusive do
   contador "1 - 0 / 0 itens", que caia direto sobre o preto.

   04/09/2026 — dois pontos da mesma tela, medidos:
   1. `.es-wf-mode` (a faixa do seletor "Remover a palavra / So registrar",
      criada em 04/09) crava `background:#fafafa` e NAO declara tinta: herdava
      o `#f5f5f5` daqui de cima = **1,04:1**, branco sobre branco. A armadilha
      canonica — token troca TINTA, nao SUPERFICIE.
      ⚠️ Ela vai com `.es-wf-col` (#31242f), NUNCA com o #210e1e recuado: as
      duas colunas sao irmas dela e ficam sobre o fundo da pagina, nao dentro
      de um cartao. No claro ela era um degrau ABAIXO das colunas (#fafafa x
      #fff) porque a pagina era clara; repetir isso no escuro a joga para
      baixo do fundo e ela desaparece.
   2. `.es-rep-tab:hover` era o inverso: a regra logo abaixo escurecia so a
      SUPERFICIE e deixava a tinta `#334155` que o template declara na MESMA
      regra = **1,26:1** — a aba sumia ao passar o mouse. Ao escurecer o fundo
      de uma regra do template, conferir se ela tambem declara `color`. */
#es .es-rep {
    color: #f5f5f5 !important;
}
#es .es-rep-empty,
#es .es-rep-card,
#es .es-wf-col,
#es .es-wf-mode {
    background: #31242f !important;
    border-color: #555 !important;
}
#es .es-rep-empty {
    color: #cfcfcf !important;
}
#es .es-rep-card.is-moderated,
#es .es-rep-content,
#es .es-rep-panel {
    background: #210e1e !important;
    border-color: #555 !important;
}
#es .es-rep-file {
    background: #3b2c39 !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
#es .es-rep-tab:hover {
    background: #3b2c39 !important;
    color: #f5f5f5 !important;
}
#es .es-wf-vio__ctx {
    background: #3b2c39 !important;
    color: #cfcfcf !important;
}
/* A lista "Tentativas registradas" e' desenhada pelo JS do template (`wfViolationRowHtml`)
   com as cores do design claro, e so' o `__ctx` acima tinha cobertura. Medido sobre a
   coluna (#31242f):
     nome    #111827 = 1,20:1  -> amarelo da casa   9,89:1  (pedido do dono, 04/09/2026)
     palavra #b91c1c = 2,28:1  -> #fca5a5           7,77:1
   ⚠️ A palavra e' o dado central da tela — reprovava desde que a lista nasceu. O #fca5a5
      e' o vermelho-TINTA que a casa ja usa; o #b91c1c e vizinhos sao vermelho de FUNDO e
      nao passam como tinta sobre escuro (o mais claro deles, #f43f5e, da 4,02:1).
   ⚠️ A divisoria era `#f1f5f9` = 13,46:1: um risco quase BRANCO cortando a lista. Borda
      entre linhas e' decorativa — vai no #555 das demais bordas desta tela.
   Fora de escopo, medido e declarado: `.es-wf-vio__snip` (#64748b) da 3,10:1, a mesma
   faixa 2,5-4,5 que o dono ja decidiu nao tratar; `.es-wf-vio__time` ja da 5,75:1. */
#es .es-wf-vio__user {
    color: #ffce00 !important;
}
#es .es-wf-vio__word {
    color: #fca5a5 !important;
}
#es .es-wf-vio {
    border-bottom-color: #555 !important;
}
#es .es-rep-panel textarea,
#es .es-rep-panel input[type="text"],
#es .es-rep-panel input[type="number"] {
    background: #31242f !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}

/* --- A8/B2 · Diretoria › Ouvidoria (`ouvidoria/css/ouvidoria.css`) -------
   A tela inteira era clara: 25 fundos claros, zero tokens, zero cobertura. O
   `h1` (#111827) caia sobre o preto e sumia. Teal #0f766e vira magenta da casa
   onde e' tinta; onde e' fundo, escurece. */
#es .ouv-wrap {
    color: #f5f5f5 !important;
}
#es .ouv-header h1,
#es .ouv-card__subject,
#es .ouv-tsubject,
#es .ouv-msg__author,
#es .ouv-rate__label {
    color: #f5f5f5 !important;
}
#es .ouv-sub,
#es .ouv-tmeta,
#es .ouv-empty,
#es .ouv-kpi__l,
#es .ouv-kpi__max,
#es .ouv-rate__num,
#es .ouv-timeline summary,
#es .ouv-closed-note,
#es .ouv-field > label,
#es .ouv-mb-item {
    color: #cfcfcf !important;
}
#es .ouv-card__meta,
#es .ouv-msg__time,
#es .ouv-tl-date,
#es .ouv-file-hint,
#es .ouv-table th {
    color: #8f8f8f !important;
}
#es .ouv-kpi,
#es .ouv-newform,
#es .ouv-card,
#es .ouv-table-wrap,
#es .ouv-msg__bubble,
#es .ouv-msg--parent .ouv-msg__bubble,
#es .ouv-att--file {
    background: #31242f !important;
    border-color: #555 !important;
    box-shadow: none !important;
}
#es .ouv-manage-bar,
#es .ouv-closed-note,
#es .ouv-rate,
#es .ouv-empty,
#es .ouv-table th,
#es .ouv-input,
#es .ouv-input--sm {
    background: #210e1e !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
#es .ouv-card.is-unread {
    background: #3b2c39 !important;
    border-left-color: #c903b8 !important;
}
#es .ouv-row:hover,
#es .ouv-att--file:hover,
#es .ouv-msg--staff .ouv-msg__bubble {
    background: #3b2c39 !important;
    border-color: #555 !important;
}
#es .ouv-msg.is-internal .ouv-msg__bubble {
    background: #3a2a12 !important;
    border-color: #7c5a12 !important;
}
#es .ouv-msg__body,
#es .ouv-table td,
#es .ouv-timeline li,
#es .ouv-inline-check,
#es .ouv-rate__comment-text {
    color: #f5f5f5 !important;
}
#es .ouv-table td,
#es .ouv-table th {
    border-bottom-color: #555 !important;
}
#es .ouv-btn--primary {
    background: #c903b8 !important;
    color: #fff !important;
}
#es .ouv-btn--primary:hover {
    background: #9f0292 !important;
    color: #fff !important;
}
#es .ouv-btn--ghost {
    background: #3b2c39 !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
#es .ouv-btn--ghost:hover {
    background: #443341 !important;
}
#es .ouv-proto,
#es .ouv-back,
#es .ouv-kpi__n,
#es .ouv-assignedtag,
#es .ouv-file-btn,
#es .ouv-table a,
#es .ouv-dot {
    color: #ff741e !important;
}
#es .ouv-dot {
    background: #c903b8 !important;
}
#es .ouv-owner-actions {
    background: #12301c !important;
    border-color: #14532d !important;
}
#es .ouv-owner-actions__hint,
#es .ouv-rate__done {
    color: #bbf7d0 !important;
}
/* Chips semanticos: o matiz fica, o fundo escurece e a tinta clareia. */
#es .ouv-cat,
#es .ouv-file-chip { background: #2a2440 !important; color: #c7d2fe !important; }
#es .ouv-cat--reclamacao { background: #3a1418 !important; color: #fca5a5 !important; }
#es .ouv-cat--critica { background: #3a2a12 !important; color: #fdba74 !important; }
#es .ouv-cat--elogio { background: #14532d !important; color: #bbf7d0 !important; }
#es .ouv-cat--sugestao { background: #12303a !important; color: #a5d8f3 !important; }
#es .ouv-cat--duvida { background: #2f1a3d !important; color: #e9d5ff !important; }
#es .ouv-st { background: #3b2c39 !important; color: #cfcfcf !important; }
#es .ouv-st--aberto { background: #3a2a12 !important; color: #fcd34d !important; }
#es .ouv-st--em_andamento { background: #12303a !important; color: #93c5fd !important; }
#es .ouv-st--respondido { background: #123a35 !important; color: #7fe3d4 !important; }
#es .ouv-st--resolvido { background: #14532d !important; color: #bbf7d0 !important; }
#es .ouv-st--fechado { background: #3b2c39 !important; color: #cfcfcf !important; }

/* --- A9 · Calendario de eventos -----------------------------------------
   `#es.es-widget-calendar .day.is-today{background-color:#e9eff7}` vem do
   `styles/style.min.css` do proprio tema — que entra como `<link>` ANTES deste
   bloco inline. A ordem da cascata ja' nos favorece: sem `!important`. */
#es.es-widget-calendar .day.is-today {
    background-color: #3b2c39;
}

/* --- C1 · Diretoria: magenta escuro sobre a ameixa ----------------------
   Regressao do proprio Tier 7 (l. 699-711): `--esu-accent-dark` (#9f0292) e'
   usado como TINTA sobre `--esu-accent-soft` (#3b2c39) em tres lugares — 1.81:1.
   Nao da' para clarear o token (ele tambem e' FUNDO no hover do botao primario),
   entao a correcao e' pontual. Ativo = amarelo, o mesmo da nav de perfil ativa. */
#es .esu-quick__item.is-active,
#es a.esu-quick__item.is-active,
#es .esg-tab.is-active,
.esg-tab.is-active {
    color: #ffce00 !important;
}
#es .esu-quick__item.is-active .esu-quick__ic,
#es .esg-tab.is-active .esg-tab__n {
    background: #210e1e !important;
}
#es .ess-badge {
    color: #f5f5f5 !important;
}

/* --- 2a passada: o que a re-medicao apontou -----------------------------
   Depois de escurecer as superficies acima, a varredura foi refeita nas 48
   paginas. Sobraram cinco pontos — tres que a tinta clara escondia enquanto o
   fundo era branco, e dois causados pelo proprio escurecimento. */

/* (a) Lista de usuarios: a tinta do corpo da tabela (`#1f2937`, l. 180 do
   uma tag `style` do cadastro) so' aparecia como problema depois que a linha ficou
   ameixa — antes era escuro sobre branco. 1.0:1 medido em "Nunca". */
#es .es-cadastro-table tbody td {
    color: #f5f5f5 !important;
    border-bottom-color: #555 !important;
}
#es .es-switch__label {
    color: #cfcfcf !important;
}
#es .es-switch input:checked ~ .es-switch__label {
    color: #4ade80 !important;
}
/* A seta de ordenacao herda o laranja do link e leva `opacity:.4` (l. 169):
   sobre o cabecalho escuro isso caia para 2.08:1. Tinta clara + opacidade um
   pouco maior — nenhuma medida de layout muda. */
#es .es-cadastro-table thead th a[data-table-grid-sort] .es-sort-idle {
    color: #f5f5f5 !important;
    opacity: .55 !important;
}
#es .es-cadastro-table thead th a[data-table-grid-sort]:hover .es-sort-idle {
    opacity: .9 !important;
}

/* (b) Pilula "nova conta" dos Anuncios: magenta da marca sobre o #3b2c39 que
   este bloco passou a dar a' pilula = 2.61:1. Recua para o encaixe e usa o
   laranja de link. */
#es a.esad-accpill--new {
    background: #210e1e !important;
    color: #ff741e !important;
}

/* (c) Medalhas de posicao do modulo "Lideres de pontos"
   (`mod_easysocial_leaderboard`): o numero branco sobre ouro/prata/bronze dava
   1.45–1.58:1 em 27 paginas. O metal fica; o numero escurece. Vem do
   `styles/style.min.css` (link, antes deste bloco) — sem `!important`. */
#es .es-leader-badge--1,
#es .es-leader-badge--2,
#es .es-leader-badge--3 {
    color: #210e1e;
}

/* (d) Faixa "fulano comentou nesta postagem" do feed: `t-text--muted` (#6c757d)
   sobre o painel #444 do tema Dark = 2.08:1. Correcao ESCOPADA ao cabecalho do
   stream — o `.t-text--muted` global e' usado no site inteiro e fica como esta'. */
#es .es-stream-header.t-text--muted {
    color: #cfcfcf !important;
}


/* --- D · Modais "Nova comunidade" / "Nova pagina" (esu) ------------------
   `media/com_easysocial/grupos/css/base.css`. Mesmo padrao das telas do Tier 5b:
   o Tier 7 (l. 699-711) ja' escurecia os TOKENS `--esu-*`, mas o modal e' pintado
   com `#fff` LITERAL em 25 pontos do arquivo. Resultado: caixa branca com titulo,
   rotulos e placeholders em tinta clara — ilegiveis.

   Nao apareceu na varredura das 53 paginas porque o modal so' existe depois do
   clique; a pagina de tras (`/diretoria/grupos`, `/diretoria/turmas`) media limpa.

   ⚠️ Sem prefixo `#es` — e' assim que o `base.css` declara e e' assim que o
   Tier 7 ja' mira (`.esu-wrap, .esu-modal`). */
.esu-modal__box {
    background: #31242f !important;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.6) !important;
}

/* Campos de texto, selects e buscas */
.esu-field input,
.esu-search input,
.esu-f__in,
.esu-consolidate .esu-input,
.esu-xfer__search,
.esu-xfer__leafsel {
    background-color: #210e1e !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
/* A seta do <select> e' um SVG embutido com traco #64748b: invisivel no escuro. */
select.esu-f__in {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23cfcfcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important;
}

/* Numero da secao (1 IDENTIFICACAO, 2 PUBLICACAO...): era marca sobre marca-suave,
   2.6:1. Circulo cheio, digito branco. */
.esu-sec__n {
    background: #c903b8 !important;
    color: #fff !important;
}

/* Caixas de escolha Sim/Nao e cartoes internos */
.esu-bool,
.esu-person,
.esu-xfer__pane-hd,
.esu-xfer__more,
.esu-chip span,
.esu-logo__img,
.esu-logo__rm {
    background-color: #3b2c39 !important;
    border-color: #555 !important;
}
.esu-xfer__row:hover {
    background-color: #3b2c39 !important;
    border-color: #7a5f74 !important;
}
.esu-bool--danger:has(input[value="1"]:checked) {
    background-color: #3a1418 !important;
    border-color: #7f1d1d !important;
}
.esu-bool--danger:has(input[value="1"]:checked) .esu-bool__bd b {
    color: #fca5a5 !important;
}
.esu-logo__rm:hover {
    background-color: #3a1418 !important;
}

/* Botoes neutros (Cancelar, acoes de linha). O `--primary` ja' sai do token. */
.esu-btn {
    background-color: #3b2c39 !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
}
.esu-btn:hover {
    background-color: #443341 !important;
    border-color: #7a5f74 !important;
}
/* ⚠️ O `!important` do `.esu-btn` acima tambem vencia a variante primaria
   (`.esu-btn--primary{background:var(--esu-accent)}`, sem `!important`): o botao
   "Salvar" do modal perdia o magenta e virava mais um botao neutro. Reposto. */
.esu-btn--primary {
    background-color: #c903b8 !important;
    border-color: #c903b8 !important;
    color: #fff !important;
}
.esu-btn--primary:hover {
    background-color: #9f0292 !important;
    border-color: #9f0292 !important;
}
/* Os rotulos dos campos sao o texto que MAIS se le' num formulario; no
   `--esu-muted` (#8f8f8f) davam 4.4:1 sobre a caixa. Sobem um degrau, sem mexer
   no token (que serve dicas e estados vazios da familia inteira). */
.esu-f__lbl,
.esu-field span,
.esu-bool__bd em {
    color: #cfcfcf !important;
}
.esu-btn--danger {
    background-color: #3b2c39 !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}
.esu-btn--danger:hover {
    background-color: #3a1418 !important;
    border-color: #b91c1c !important;
}

/* Etiquetas semanticas: o matiz fica, o fundo escurece e a tinta clareia. */
.esu-badge,
.esu-badge--sub { background: #2f1a3d !important; color: #e9d5ff !important; }
.esu-badge--isolated { background: #3a1418 !important; color: #fca5a5 !important; }
.esu-badge--bubble { background: #3a2a12 !important; color: #fdba74 !important; }
.esu-badge--sede { background: #12303a !important; color: #93c5fd !important; }

/* Sobras de tinta escura cravada */
.esu-node__stats > span,
.esu-node__profiles .esu-prof b {
    color: #cfcfcf !important;
}
.esu-node--lvl1 .esu-node__stats > span {
    background: #210e1e !important;
}
.esu-f__hint.is-ok { color: #4ade80 !important; }
.esu-radio:hover { border-color: #7a5f74 !important; }


/* --- D2 · Suporte (ess) --------------------------------------------------
   `media/com_easysocial/suporte/css/suporte.css`. A MESMA armadilha do bloco D,
   e a mais visivel de todas: `:53` pinta `.ess-input{background:#fff}` com um
   LITERAL enquanto a tinta le' o token (`color:var(--esu-ink)`), que o Tier 7
   (l. 1082-1093) redeclara como #f5f5f5. Resultado: os dois campos de busca da
   tela ficavam BRANCO SOBRE BRANCO — 1.09:1, ilegiveis.

   Nao apareceu na varredura das 53 paginas porque `/suporte` e' Super Users e
   nao entrou na amostra.

   ⚠️ `.ess-input` e' a classe do `<input type=search>` E do `<select>` (template
   l. 80 e 86) — uma declaracao cobre os dois, e cobre tambem os campos do painel
   "Filtros avancados", que reusam a mesma classe.

   ⚠️ Prefixo `#es`: o ES estiliza `#es input` em (1,0,1), que vence classe
   sozinha (0,1,0). Idem `#es label` mais abaixo. */
#es .ess-input {
    background-color: #210e1e !important;
    border-color: #555 !important;
    color: #f5f5f5 !important;
    /* Sem isto o fundo escurece mas a SETA do `<select>`, o cursor e o botao `x`
       do `type=search` continuam sendo desenhados pelo navegador na pele clara —
       e o popup nativo do select abre branco. Mesmo recurso de
       `media/com_easysocial/ganhos/css/ganhos.css:571`. */
    color-scheme: dark;
}
/* Nao havia regra de placeholder em lugar nenhum: a dica "Nome, usuario ou
   e-mail" herdava a tinta clara e sumia junto com o resto.
   ⚠️ `opacity:1` e' obrigatorio — o Firefox aplica opacidade propria ao
   placeholder e o cinza sairia mais apagado do que o declarado. */
#es .ess-input::placeholder {
    color: #8f8f8f !important;
    opacity: 1 !important;
}
/* O popup nativo do `<select>`: com `color-scheme:dark` ele ja' abre escuro, mas
   a tinta da opcao segue a do elemento em alguns navegadores. Explicito nos dois. */
#es .ess-input option {
    background-color: #210e1e !important;
    color: #f5f5f5 !important;
}

/* Borda das linhas da lista: `#cfd7e6` literal (`suporte.css:73`) — azul-claro
   sobre a ameixa. So' destoa, nao quebra leitura, mas e' o mesmo literal. */
#es .ess-item {
    border-color: #555 !important;
}
#es .ess-item:hover {
    border-color: #7a5f74 !important;
}

/* Rotulos, meta da linha e vazio: todos em `--esu-muted` (#8f8f8f), que sobre a
   superficie #31242f da' 4.53:1 — passa raspando. Sobem um degrau pelo MESMO
   argumento do `.esu-f__lbl` do bloco D: e' o texto que mais se le' aqui (o
   e-mail e o @usuario sao justamente como o Suporte identifica a conta). O token
   fica intacto, que serve dicas e estados vazios da familia inteira. */
#es .ess-filters__label,
#es .ess-item__meta,
#es .ess-more__sum,
.ess-empty {
    color: #cfcfcf !important;
}
/* --- E · Editor TinyMCE (descricao do Evento, da Pagina, do artigo...) ---
   O editor era a unica ilha branca do formulario de evento. Aqui vai so' a
   MOLDURA (menu, barra de ferramentas, rodape) — a area de digitacao e' um
   IFRAME com documento proprio, que CSS de fora nao alcanca; ela e' escurecida
   por `templates/yootheme/css/editor.min.css` (ver CLAUDE.md). */
.tox.tox-tinymce {
    background: #31242f !important;
    border-color: #555 !important;
}
/* ⚠️ A pele `oxide` pinta os PROPRIOS botoes de branco (`.tox-mbtn`,`.tox-tbtn`),
   nao so' as barras. Sem zerar isso, o rotulo claro que este bloco da' cai sobre
   branco e o menu "Editar / Inserir / Visualizar" some. */
.tox .tox-mbtn,
.tox .tox-tbtn,
.tox .tox-tbtn--select {
    background: transparent !important;
}
.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
    background: #210e1e !important;
}
.tox .tox-editor-header,
.tox .tox-menubar,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord,
.tox .tox-statusbar {
    background: #31242f !important;
    border-color: #555 !important;
}
.tox .tox-statusbar,
.tox .tox-mbtn,
.tox .tox-tbtn,
.tox .tox-statusbar a,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__wordcount {
    color: #f5f5f5 !important;
}
.tox .tox-tbtn svg { fill: #f5f5f5 !important; }
.tox .tox-mbtn:hover:not(:disabled),
.tox .tox-tbtn:hover:not(:disabled) {
    background: #3b2c39 !important;
}
.tox .tox-mbtn--active,
.tox .tox-tbtn--enabled {
    background: #443341 !important;
}
.tox .tox-menu,
.tox .tox-collection--list .tox-collection__group {
    background: #31242f !important;
    border-color: #555 !important;
}
.tox .tox-collection__item {
    color: #f5f5f5 !important;
}
.tox .tox-collection__item--active {
    background: #3b2c39 !important;
    color: #f5f5f5 !important;
}
.tox .tox-collection__item-accessory {
    color: #8f8f8f !important;
}

/* =========================================================================
   TIER 7 (adicao) — assistente de criacao/edicao de cluster
   =========================================================================
   `media/com_easysocial/grupos/css/grupos-form.css` declara os `--esgf-*` no
   seletor `.esgf` (l. 15-24) e NUNCA teve override aqui. O cabecalho `.esgf__hd`
   fica FORA do `.esgf__card`, entao o titulo (#1e293b) e o subtitulo (#64748b)
   caiam direto sobre o preto do YOOtheme — foi o "Selecione uma Categoria"
   invisivel. O cartao, por sua vez, continuava branco.

   Uma so' declaracao cobre `clusters/create` (Grupo E Pagina), `groups/steps`,
   `groups/edit` e `marketplaces/create` — os quatro templates que usam o prefixo.

   ⚠️ Precisa cair no MESMO elemento que declara os tokens: `.esgf` puro. O
   `#es .esgf` esta' junto so' para garantir a especificidade.
   ------------------------------------------------------------------------- */
#es .esgf,
.esgf {
    --esgf-accent: #c903b8 !important;
    --esgf-accent-dark: #9f0292 !important;
    --esgf-accent-soft: #3b2c39 !important;
    --esgf-ink: #f5f5f5 !important;
    --esgf-muted: #cfcfcf !important;
    --esgf-line: #555 !important;
    --esgf-surface: #31242f !important;
    --esgf-surface-2: #210e1e !important;
}

/* -------------------------------------------------------------------------
   TEXTO DE LEITURA +20%  (08/09/2026)
   =========================================================================
   Pedido: "se for fonte 10 aumente para 12" — fator 1,2, arredondado ao
   inteiro. Vale so' para o TEXTO QUE A PESSOA LE (post, comentario, mensagem
   do chat, bio, descricao de anuncio e de pack). Rotulo de botao, aba, chip,
   badge e menu ficam como estao — decisao do dono, e e' o que preserva as
   medidas calibradas do site (os chips do avatar que so' cabem 2 por linha a
   11px, a coluna de 240px, a barra de abas do feed a 360px).

   ☠️ NAO EXISTE ALAVANCA UNICA NESTE SITE. Medido: ~1.400 declaracoes
   `font-size` em px (443 no style.min.css do tema + 958 em media/com_easysocial
   + 72 no YOOtheme) contra ZERO `rem` no EasySocial. Mexer no
   `html{font-size:16px}` do YOOtheme nao muda uma letra do feed, do chat nem
   do perfil — por isso cada alvo abaixo e' explicito.

   ☠️ OS VALORES DE ORIGEM FORAM MEDIDOS NO DOM, NUNCA LIDOS DO CSS. O
   `.es-stream-content` DECLARA 13px e COMPUTA 20px no post com fundo colorido
   (a regra `.es-story--bg-N` do momyclub02, (1,3,0), com min-height 360px):
   escalar "13 -> 16" ali teria DIMINUIDO a fonte daquele post de 20 para 16.

   ⚠️ Especificidade: este arquivo e' incluido DEPOIS do custom.css.php do
   momyclub02 e sai inline, depois de todos os link — entao empate de
   especificidade e' ganho nosso. Medido no pior caso (regra no fim do corpo):
   as 4 do feed venceram SEM !important. Nao acrescentar !important sem medir.

   ⚠️ O balao do chat e' o alvo certo, nao o `#ck`: o padding dele e'
   `0.65em 0.85em`, entao ele ESCALA JUNTO com a fonte (medido: 8,45 -> 10,4px).
   Mirar `#ck` subiria tambem nome de contato, preview e rotulo de aba.

   Medido depois: zero rolagem horizontal em 1905, 420, 375, 360 e 320px.
   ------------------------------------------------------------------------- */

/* feed — texto do post (13 -> 16) */
#es .es-stream .es-stream-content {
    font-size: 16px;
}

/* feed — post com fundo colorido (20 -> 24). Os 5 presets sao os ids ativos de
   #__social_backgrounds; a regra de origem e' gerada em loop no momyclub02. */
#es .es-stream .es-stream-content.es-story--bg-1,
#es .es-stream .es-stream-content.es-story--bg-2,
#es .es-stream .es-stream-content.es-story--bg-3,
#es .es-stream .es-stream-content.es-story--bg-4,
#es .es-stream .es-stream-content.es-story--bg-5 {
    font-size: 24px;
}

/* feed — titulo do link/video compartilhado (14 -> 17) */
#es .es-stream-embed__title {
    font-size: 17px;
}

/* comentario (13 -> 16) */
#es .es-comment-content {
    font-size: 16px;
}

/* chat — balao da mensagem (13 -> 16; o padding em em acompanha)
   ⚠️ Este arquivo ja' tem OUTRO `#ck .ck-msg__bubble`, no bloco do chat escuro,
   com background/border/color/box-shadow em !important. Nao ha' conflito (sao
   propriedades diferentes) e a medicao confirma 16px — mas ao mexer aqui,
   procurar as DUAS ocorrencias. */
#ck .ck-msg__bubble {
    font-size: 16px;
}

/* perfil — valor dos campos da aba Sobre, incluindo a bio (13 -> 16) */
#es .profile-data-info__content {
    font-size: 16px;
}

/* marketplace — descricao do anuncio (14,5 -> 17)
   ☠️ A origem e' `#es.view-marketplaces.layout-item .esmk__desc` = (1,3,0), e o
   `marketplaces.css` e' injetado por bootstrap DEPOIS do corpo: medido, ele fica
   na posicao 19 e este arquivo na 13. Um `#es .esmk__desc` (1,1,0) NAO vence —
   ficou em 14,5px na primeira tentativa. Daqui sai (1,4,0), citando as duas
   classes que o elemento carrega, para ganhar por especificidade e nao por ordem. */
#es.view-marketplaces.layout-item .es-market-content.esmk__desc {
    font-size: 17px;
}

/* luxopacks — descricao do pack e tagline da vitrine (15 -> 18)
   ⚠️ A origem e' (1,1,0) e a ordem do `produtos.css` MUDA por tela (medido: 5 na
   vitrine, ou seja antes daqui; mas ele tambem e' injetado por bootstrap noutras).
   Por isso o par citando o wrapper `#es.es-pk` (1,2,0), que vence sempre. A forma
   (1,1,0) fica junto como reserva, para uma tela de produtos sem a classe. */
#es .es-pk-item__desc,
#es .es-pk__tagline,
#es.es-pk .es-pk-item__desc,
#es.es-pk .es-pk__tagline {
    font-size: 18px;
}