/**
 * Cream Magazine – Dark Mode
 * Modes: light | dark (noche) | darker (oscuro)
 *
 * Body background (custom-background / boxed outer color) is NEVER overridden.
 * Only .page-wrapper and inner content follow the active mode.
 */

:root,
html[data-theme="light"] {
	--cm-bg-body: #ffffff;
	--cm-bg-secondary: #f6f6f6;
	--cm-bg-tertiary: #eeeeee;
	--cm-bg-header: #ffffff;
	--cm-bg-nav: #ffffff;
	--cm-bg-footer: #010101;
	--cm-bg-card: #ffffff;
	--cm-bg-input: #ffffff;
	--cm-text-primary: #010101;
	--cm-text-secondary: #2b2b2b;
	--cm-text-muted: #666666;
	--cm-border: #e2e2e2;
	--cm-accent: #ff3d00;
	--cm-shadow: rgba(0,0,0,0.08);
	--cm-overlay: rgba(0,0,0,0.5);
}

html[data-theme="dark"] {
	--cm-bg-body: #1a1a1a;
	--cm-bg-secondary: #242424;
	--cm-bg-tertiary: #2e2e2e;
	--cm-bg-header: #1f1f1f;
	--cm-bg-nav: #1f1f1f;
	--cm-bg-footer: #0d0d0d;
	--cm-bg-card: #242424;
	--cm-bg-input: #2e2e2e;
	--cm-text-primary: #f0f0f0;
	--cm-text-secondary: #d4d4d4;
	--cm-text-muted: #b0b0b0;
	--cm-border: #3a3a3a;
	--cm-accent: #ff3d00;
	--cm-shadow: rgba(0,0,0,0.4);
	--cm-overlay: rgba(0,0,0,0.7);
}

html[data-theme="darker"] {
	--cm-bg-body: #0a0a0a;
	--cm-bg-secondary: #121212;
	--cm-bg-tertiary: #1a1a1a;
	--cm-bg-header: #0d0d0d;
	--cm-bg-nav: #0d0d0d;
	--cm-bg-footer: #000000;
	--cm-bg-card: #121212;
	--cm-bg-input: #1a1a1a;
	--cm-text-primary: #ececec;
	--cm-text-secondary: #c8c8c8;
	--cm-text-muted: #9a9a9a;
	--cm-border: #2a2a2a;
	--cm-accent: #ff3d00;
	--cm-shadow: rgba(0,0,0,0.6);
	--cm-overlay: rgba(0,0,0,0.8);
}

html { color-scheme: light; }
html[data-theme="dark"],
html[data-theme="darker"] { color-scheme: dark; }

/* =========================================================
   IMPORTANT: Do NOT override body background-color.
   WordPress custom-background and "diseño de caja" outer
   color must remain exactly as configured in Customizer.
   ========================================================= */

/* Page wrapper = the "box" content area */
html[data-theme="dark"] .page-wrapper,
html[data-theme="darker"] .page-wrapper {
	background-color: var(--cm-bg-body) !important;
	color: var(--cm-text-primary) !important;
}

/* Text inside the site */
html[data-theme="dark"] .page-wrapper,
html[data-theme="darker"] .page-wrapper,
html[data-theme="dark"] .page-wrapper p,
html[data-theme="darker"] .page-wrapper p,
html[data-theme="dark"] .page-wrapper li,
html[data-theme="darker"] .page-wrapper li,
html[data-theme="dark"] .page-wrapper td,
html[data-theme="darker"] .page-wrapper td,
html[data-theme="dark"] .page-wrapper th,
html[data-theme="darker"] .page-wrapper th,
html[data-theme="dark"] .page-wrapper label,
html[data-theme="darker"] .page-wrapper label,
html[data-theme="dark"] .entry-content,
html[data-theme="darker"] .entry-content,
html[data-theme="dark"] .entry-content p,
html[data-theme="darker"] .entry-content p,
html[data-theme="dark"] .the_content,
html[data-theme="darker"] .the_content,
html[data-theme="dark"] .the_content p,
html[data-theme="darker"] .the_content p,
html[data-theme="dark"] .cm-post-excerpt,
html[data-theme="darker"] .cm-post-excerpt,
html[data-theme="dark"] .post-excerpt,
html[data-theme="darker"] .post-excerpt,
html[data-theme="dark"] .comment-content,
html[data-theme="darker"] .comment-content,
html[data-theme="dark"] .comment-content p,
html[data-theme="darker"] .comment-content p {
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .page-wrapper a,
html[data-theme="darker"] .page-wrapper a {
	color: var(--cm-text-primary);
}
html[data-theme="dark"] .page-wrapper a:hover,
html[data-theme="darker"] .page-wrapper a:hover {
	color: var(--cm-accent) !important;
}

html[data-theme="dark"] .page-wrapper h1,
html[data-theme="darker"] .page-wrapper h1,
html[data-theme="dark"] .page-wrapper h2,
html[data-theme="darker"] .page-wrapper h2,
html[data-theme="dark"] .page-wrapper h3,
html[data-theme="darker"] .page-wrapper h3,
html[data-theme="dark"] .page-wrapper h4,
html[data-theme="darker"] .page-wrapper h4,
html[data-theme="dark"] .page-wrapper h5,
html[data-theme="darker"] .page-wrapper h5,
html[data-theme="dark"] .page-wrapper h6,
html[data-theme="darker"] .page-wrapper h6 {
	color: var(--cm-text-primary) !important;
}

/* Header */
html[data-theme="dark"] .general-header,
html[data-theme="darker"] .general-header,
html[data-theme="dark"] header.cm-header-style-one,
html[data-theme="darker"] header.cm-header-style-one,
html[data-theme="dark"] header.cm_header-five,
html[data-theme="darker"] header.cm_header-five {
	background-color: var(--cm-bg-header) !important;
	border-bottom-color: var(--cm-border);
}

html[data-theme="dark"] .top-header,
html[data-theme="darker"] .top-header {
	background-color: var(--cm-bg-secondary) !important;
	border-bottom-color: var(--cm-border);
}

html[data-theme="dark"] .site-title a,
html[data-theme="darker"] .site-title a,
html[data-theme="dark"] .site-title,
html[data-theme="darker"] .site-title,
html[data-theme="dark"] .site-description,
html[data-theme="darker"] .site-description {
	color: var(--cm-text-primary) !important;
}

/* Navigation */
html[data-theme="dark"] .main-navigation,
html[data-theme="darker"] .main-navigation,
html[data-theme="dark"] .primary-navigation,
html[data-theme="darker"] .primary-navigation,
html[data-theme="dark"] .primary-navigation ul,
html[data-theme="darker"] .primary-navigation ul,
html[data-theme="dark"] .navigation-container,
html[data-theme="darker"] .navigation-container {
	background-color: var(--cm-bg-nav) !important;
}

html[data-theme="dark"] .primary-navigation li a,
html[data-theme="darker"] .primary-navigation li a,
html[data-theme="dark"] .primary-navigation .menu-toggle,
html[data-theme="darker"] .primary-navigation .menu-toggle,
html[data-theme="dark"] .primary-navigation .close-menu,
html[data-theme="darker"] .primary-navigation .close-menu {
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .primary-navigation .menu-toggle svg,
html[data-theme="darker"] .primary-navigation .menu-toggle svg,
html[data-theme="dark"] .primary-navigation li a svg,
html[data-theme="darker"] .primary-navigation li a svg,
html[data-theme="dark"] .primary-navigation li.primarynav_search_icon a svg,
html[data-theme="darker"] .primary-navigation li.primarynav_search_icon a svg {
	fill: var(--cm-text-primary) !important;
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .primary-navigation li a:hover,
html[data-theme="darker"] .primary-navigation li a:hover,
html[data-theme="dark"] .primary-navigation li.current-menu-item > a,
html[data-theme="darker"] .primary-navigation li.current-menu-item > a {
	color: var(--cm-accent) !important;
}

html[data-theme="dark"] .primary-navigation ul ul,
html[data-theme="darker"] .primary-navigation ul ul {
	background-color: var(--cm-bg-card) !important;
	border-color: var(--cm-border) !important;
}

/* =========================================================
   SEARCH – only colors in dark modes; never touch display/position/size
   ========================================================= */
html[data-theme="dark"] .header-search-container .search-form-entry,
html[data-theme="darker"] .header-search-container .search-form-entry {
	background-color: var(--cm-bg-card) !important;
	border-top-color: var(--cm-accent) !important;
	box-shadow: 0 2px 8px var(--cm-shadow) !important;
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .header-search-container input,
html[data-theme="darker"] .header-search-container input,
html[data-theme="dark"] .search-form input,
html[data-theme="darker"] .search-form input,
html[data-theme="dark"] .cm-search-form input,
html[data-theme="darker"] .cm-search-form input {
	background-color: var(--cm-bg-input) !important;
	color: var(--cm-text-primary) !important;
	border-color: var(--cm-border) !important;
}

html[data-theme="dark"] .cm-search-form .cm-submit-btn svg,
html[data-theme="darker"] .cm-search-form .cm-submit-btn svg {
	fill: var(--cm-text-primary) !important;
}

/* =========================================================
   Toggle button – place without breaking nav layout
   ========================================================= */
.cm-dark-mode-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-left: 8px;
	margin-right: 4px;
	padding: 0;
	border: 1px solid var(--cm-border, #e2e2e2);
	border-radius: 50%;
	background-color: var(--cm-bg-secondary, #f6f6f6);
	color: var(--cm-text-primary, #010101);
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s, transform .2s;
	flex-shrink: 0;
	vertical-align: middle;
	position: relative;
	z-index: 20;
	float: right;
}

.cm-dark-mode-toggle:hover {
	background-color: var(--cm-accent, #ff3d00);
	color: #fff;
	border-color: var(--cm-accent, #ff3d00);
	transform: scale(1.05);
}

.cm-dark-mode-toggle:focus {
	outline: 2px solid var(--cm-accent, #ff3d00);
	outline-offset: 2px;
}

.cm-dark-mode-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}

.cm-dark-mode-toggle .icon-sun,
.cm-dark-mode-toggle .icon-moon,
.cm-dark-mode-toggle .icon-darker {
	display: none !important;
}

html[data-theme="light"] .cm-dark-mode-toggle .icon-sun,
html:not([data-theme]) .cm-dark-mode-toggle .icon-sun {
	display: block !important;
}
html[data-theme="dark"] .cm-dark-mode-toggle .icon-moon {
	display: block !important;
}
html[data-theme="darker"] .cm-dark-mode-toggle .icon-darker {
	display: block !important;
}

/* Cards / post widgets – only post cards, not every sidebar widget */
html[data-theme="dark"] .card,
html[data-theme="darker"] .card,
html[data-theme="dark"] .cm-post-widget-one .card,
html[data-theme="darker"] .cm-post-widget-one .card,
html[data-theme="dark"] .cm-post-widget-two .card,
html[data-theme="darker"] .cm-post-widget-two .card,
html[data-theme="dark"] .cm-post-widget-three .card,
html[data-theme="darker"] .cm-post-widget-three .card,
html[data-theme="dark"] .cm_middle_post_widget_one .card,
html[data-theme="darker"] .cm_middle_post_widget_one .card,
html[data-theme="dark"] .cm_related_post_container .card,
html[data-theme="darker"] .cm_related_post_container .card {
	background-color: var(--cm-bg-card) !important;
	color: var(--cm-text-primary) !important;
	border-color: var(--cm-border) !important;
}

/* Sidebar widgets: only text color + title, light border – no full fill */
html[data-theme="dark"] .sidebar .widget,
html[data-theme="darker"] .sidebar .widget,
html[data-theme="dark"] .sidebar-widget-area .widget,
html[data-theme="darker"] .sidebar-widget-area .widget {
	color: var(--cm-text-primary) !important;
	border-color: var(--cm-border) !important;
	/* transparent / inherit so ads and clock widgets keep their look */
	background-color: transparent !important;
	box-shadow: none !important;
}

html[data-theme="dark"] .sidebar .widget .widget-title,
html[data-theme="darker"] .sidebar .widget .widget-title,
html[data-theme="dark"] .widget .widget-title,
html[data-theme="darker"] .widget .widget-title {
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .sidebar .widget p,
html[data-theme="darker"] .sidebar .widget p,
html[data-theme="dark"] .sidebar .widget li,
html[data-theme="darker"] .sidebar .widget li,
html[data-theme="dark"] .sidebar .widget a,
html[data-theme="darker"] .sidebar .widget a {
	color: var(--cm-text-primary) !important;
}

/* Text widget / custom HTML – avoid painting the whole box */
html[data-theme="dark"] .widget_text,
html[data-theme="darker"] .widget_text,
html[data-theme="dark"] .widget_custom_html,
html[data-theme="darker"] .widget_custom_html {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Titles */
html[data-theme="dark"] .post_title,
html[data-theme="darker"] .post_title,
html[data-theme="dark"] .post_title h2,
html[data-theme="darker"] .post_title h2,
html[data-theme="dark"] .post_title h3,
html[data-theme="darker"] .post_title h3,
html[data-theme="dark"] .post_title a,
html[data-theme="darker"] .post_title a,
html[data-theme="dark"] .post_title h2 a,
html[data-theme="darker"] .post_title h2 a,
html[data-theme="dark"] .the_title,
html[data-theme="darker"] .the_title,
html[data-theme="dark"] .the_title h1,
html[data-theme="darker"] .the_title h1,
html[data-theme="dark"] .the_title a,
html[data-theme="darker"] .the_title a,
html[data-theme="dark"] .entry-title,
html[data-theme="darker"] .entry-title,
html[data-theme="dark"] .entry-title a,
html[data-theme="darker"] .entry-title a,
html[data-theme="dark"] .section-title,
html[data-theme="darker"] .section-title,
html[data-theme="dark"] .section-title h2,
html[data-theme="darker"] .section-title h2,
html[data-theme="dark"] .section-title h1,
html[data-theme="darker"] .section-title h1,
html[data-theme="dark"] body.page .content-entry article .the_title h1,
html[data-theme="darker"] body.page .content-entry article .the_title h1,
html[data-theme="dark"] body.single .content-entry article .the_title h1,
html[data-theme="darker"] body.single .content-entry article .the_title h1 {
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .post_title a:hover,
html[data-theme="darker"] .post_title a:hover,
html[data-theme="dark"] .the_title a:hover,
html[data-theme="darker"] .the_title a:hover,
html[data-theme="dark"] .entry-title a:hover,
html[data-theme="darker"] .entry-title a:hover {
	color: var(--cm-accent) !important;
}

html[data-theme="dark"] .meta,
html[data-theme="darker"] .meta,
html[data-theme="dark"] .post-meta,
html[data-theme="darker"] .post-meta,
html[data-theme="dark"] .entry-meta,
html[data-theme="darker"] .entry-meta,
html[data-theme="dark"] .cm-post-meta,
html[data-theme="darker"] .cm-post-meta,
html[data-theme="dark"] .cat-links,
html[data-theme="darker"] .cat-links,
html[data-theme="dark"] .cat-links a,
html[data-theme="darker"] .cat-links a,
html[data-theme="dark"] .posted-on,
html[data-theme="darker"] .posted-on,
html[data-theme="dark"] .byline,
html[data-theme="darker"] .byline,
html[data-theme="dark"] .comments-link,
html[data-theme="darker"] .comments-link,
html[data-theme="dark"] .cm-post-meta a,
html[data-theme="darker"] .cm-post-meta a,
html[data-theme="dark"] .entry-meta a,
html[data-theme="darker"] .entry-meta a {
	color: var(--cm-text-muted) !important;
}

/* Content areas inside page-wrapper */
html[data-theme="dark"] .site-content,
html[data-theme="darker"] .site-content,
html[data-theme="dark"] #content,
html[data-theme="darker"] #content,
html[data-theme="dark"] .content-entry,
html[data-theme="darker"] .content-entry,
html[data-theme="dark"] .archive-container,
html[data-theme="darker"] .archive-container,
html[data-theme="dark"] .blog-container,
html[data-theme="darker"] .blog-container,
html[data-theme="dark"] .single-container,
html[data-theme="darker"] .single-container,
html[data-theme="dark"] .page-container,
html[data-theme="darker"] .page-container,
html[data-theme="dark"] .cm_banner-five,
html[data-theme="darker"] .cm_banner-five,
html[data-theme="dark"] .top-news-section,
html[data-theme="darker"] .top-news-section,
html[data-theme="dark"] .middle-news-section,
html[data-theme="darker"] .middle-news-section,
html[data-theme="dark"] .bottom-news-section,
html[data-theme="darker"] .bottom-news-section {
	background-color: transparent !important;
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .post_thumb .post-holder .post_title a,
html[data-theme="darker"] .post_thumb .post-holder .post_title a,
html[data-theme="dark"] .post_thumb .post-holder .post_title h2,
html[data-theme="darker"] .post_thumb .post-holder .post_title h2,
html[data-theme="dark"] .post_thumb .post-holder .post_title h3,
html[data-theme="darker"] .post_thumb .post-holder .post_title h3 {
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}

/* Footer */
html[data-theme="dark"] .footer,
html[data-theme="darker"] .footer,
html[data-theme="dark"] .footer .footer_inner,
html[data-theme="darker"] .footer .footer_inner,
html[data-theme="dark"] .site-footer,
html[data-theme="darker"] .site-footer {
	background-color: var(--cm-bg-footer) !important;
	color: var(--cm-text-muted) !important;
}

html[data-theme="dark"] .footer a,
html[data-theme="darker"] .footer a,
html[data-theme="dark"] .footer p,
html[data-theme="darker"] .footer p,
html[data-theme="dark"] .footer li,
html[data-theme="darker"] .footer li {
	color: var(--cm-text-secondary) !important;
}
html[data-theme="dark"] .footer a:hover,
html[data-theme="darker"] .footer a:hover {
	color: var(--cm-accent) !important;
}
html[data-theme="dark"] .footer .widget-title,
html[data-theme="darker"] .footer .widget-title {
	color: var(--cm-text-primary) !important;
}

/* Forms */
html[data-theme="dark"] input[type="text"],
html[data-theme="darker"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="darker"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="darker"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="darker"] input[type="password"],
html[data-theme="dark"] input[type="url"],
html[data-theme="darker"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="darker"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="darker"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="darker"] textarea,
html[data-theme="dark"] select,
html[data-theme="darker"] select {
	background-color: var(--cm-bg-input) !important;
	color: var(--cm-text-primary) !important;
	border-color: var(--cm-border) !important;
}

/* Pagination */
html[data-theme="dark"] .pagination a,
html[data-theme="darker"] .pagination a,
html[data-theme="dark"] .pagination span,
html[data-theme="darker"] .pagination span,
html[data-theme="dark"] .page-numbers,
html[data-theme="darker"] .page-numbers {
	background-color: var(--cm-bg-card) !important;
	color: var(--cm-text-primary) !important;
	border-color: var(--cm-border) !important;
}
html[data-theme="dark"] .pagination a:hover,
html[data-theme="darker"] .pagination a:hover,
html[data-theme="dark"] .pagination .current,
html[data-theme="darker"] .pagination .current,
html[data-theme="dark"] .page-numbers.current,
html[data-theme="darker"] .page-numbers.current {
	background-color: var(--cm-accent) !important;
	color: #fff !important;
	border-color: var(--cm-accent) !important;
}

/* News ticker */
html[data-theme="dark"] .news-ticker,
html[data-theme="darker"] .news-ticker,
html[data-theme="dark"] .news_ticker_wrap,
html[data-theme="darker"] .news_ticker_wrap,
html[data-theme="dark"] .ticker_items,
html[data-theme="darker"] .ticker_items {
	background-color: var(--cm-bg-secondary) !important;
	color: var(--cm-text-primary) !important;
	border-color: var(--cm-border) !important;
}
html[data-theme="dark"] .news-ticker a,
html[data-theme="darker"] .news-ticker a,
html[data-theme="dark"] .ticker_items a,
html[data-theme="darker"] .ticker_items a {
	color: var(--cm-text-primary) !important;
}

/* Misc */
html[data-theme="dark"] hr,
html[data-theme="darker"] hr {
	border-color: var(--cm-border) !important;
	background-color: var(--cm-border) !important;
}
html[data-theme="dark"] blockquote,
html[data-theme="darker"] blockquote {
	background-color: var(--cm-bg-secondary) !important;
	border-left-color: var(--cm-accent) !important;
	color: var(--cm-text-secondary) !important;
}
html[data-theme="dark"] pre,
html[data-theme="darker"] pre,
html[data-theme="dark"] code,
html[data-theme="darker"] code {
	background-color: var(--cm-bg-tertiary) !important;
	color: var(--cm-text-primary) !important;
}

html[data-theme="dark"] .primary-navigation.fixed,
html[data-theme="darker"] .primary-navigation.fixed {
	background-color: var(--cm-bg-nav) !important;
	box-shadow: 0 2px 8px var(--cm-shadow);
}

html[data-theme="dark"] .cm_header-five .mask,
html[data-theme="darker"] .cm_header-five .mask {
	background: linear-gradient(to bottom, transparent, var(--cm-overlay)) !important;
}

/* Buttons – exclude our toggle */
html[data-theme="dark"] button:not(.cm-dark-mode-toggle),
html[data-theme="darker"] button:not(.cm-dark-mode-toggle),
html[data-theme="dark"] .button,
html[data-theme="darker"] .button,
html[data-theme="dark"] input[type="submit"],
html[data-theme="darker"] input[type="submit"],
html[data-theme="dark"] .wp-block-button__link,
html[data-theme="darker"] .wp-block-button__link {
	background-color: var(--cm-text-primary) !important;
	color: var(--cm-bg-body) !important;
	border-color: var(--cm-text-primary) !important;
}
html[data-theme="dark"] button:not(.cm-dark-mode-toggle):hover,
html[data-theme="darker"] button:not(.cm-dark-mode-toggle):hover,
html[data-theme="dark"] .button:hover,
html[data-theme="darker"] .button:hover,
html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="darker"] input[type="submit"]:hover {
	background-color: var(--cm-accent) !important;
	border-color: var(--cm-accent) !important;
	color: #fff !important;
}

.page-wrapper,
.general-header,
.card,
.footer,
.primary-navigation {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}