/* ==========================================================================
   ProdMax · modo oscuro
   Se activa con <html data-tema="oscuro"> (botón luna/sol de la barra superior).
   Casi todo se resuelve redefiniendo las variables --pm-* de custom.css; el
   resto son ajustes para las piezas del tema original y de Bootstrap que
   traen colores claros fijos.
   ========================================================================== */

html[data-tema="oscuro"]{
	color-scheme: dark;

	--pm-primary: #34AFC7;
	--pm-primary-dark: #5CC2D6;
	--pm-primary-soft: #183A42;
	--pm-info: #6BCADC;
	--pm-info-dark: #8AD5E3;
	--pm-purple: #8479CF;
	--pm-purple-dark: #9A90DA;
	--pm-purple-soft: #2B2846;

	--pm-success: #2FAF93;
	--pm-success-dark: #4FC6AA;
	--pm-success-soft: #173A33;
	--pm-warning: #EEB83A;
	--pm-warning-dark: #F2C55C;
	--pm-warning-text: #2E2100;
	--pm-warning-soft: #3A3120;
	--pm-warning-ink: #F2C55C;
	--pm-danger: #E2555F;
	--pm-danger-dark: #EF7E86;
	--pm-danger-soft: #3D2327;
	--pm-orange: #EC9050;
	--pm-orange-soft: #3B2C20;

	--pm-sidebar: #12181C;
	--pm-sidebar-hover: #1B2328;
	--pm-sidebar-icon: #8B9CA6;

	--pm-bg: #151B20;
	--pm-surface: #1E262C;
	--pm-surface-2: #242E35;
	--pm-border: #2F3A42;
	--pm-border-strong: #3D4952;
	--pm-text: #E6ECEF;
	--pm-text-2: #B9C5CC;
	--pm-muted: #8796A0;
	--pm-row-hover: #25303A;
	--pm-track: #2C3740;
	--pm-input-border: #3A4650;
	--pm-placeholder: #6E7D87;
	--pm-divider: #2A343C;
	--pm-chip: #27323A;
	--pm-neutral: #4A5862;
	--pm-slate: #5B6B76;

	--pm-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
	--pm-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
	--pm-ring: 0 0 0 3px rgba(52, 175, 199, 0.3);
}

/* ===== Estructura ===== */

html[data-tema="oscuro"] body,
html[data-tema="oscuro"] .page-inner{
	background: var(--pm-bg);
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .navbar,
html[data-tema="oscuro"] .topmenu-outer,
html[data-tema="oscuro"] .page-title,
html[data-tema="oscuro"] .page-footer{
	background: var(--pm-surface);
	border-color: var(--pm-border);
}
html[data-tema="oscuro"] .navbar{
	box-shadow: 0 1px 0 var(--pm-border);
}
html[data-tema="oscuro"] .top-menu .nav > li > a,
html[data-tema="oscuro"] .top-menu .navbar-nav > li > a,
html[data-tema="oscuro"] .sidebar-pusher a,
html[data-tema="oscuro"] .navbar .logo-box a{
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .top-menu .nav > li > a:hover,
html[data-tema="oscuro"] .top-menu .nav > li > a:focus{
	background: var(--pm-surface-2);
	color: var(--pm-text);
}
/* El logotipo de la empresa suele estar pensado para fondo blanco */
html[data-tema="oscuro"] .navbar div.logo-box{
	background-color: var(--pm-surface);
	border-right-color: var(--pm-border);
}
html[data-tema="oscuro"] .navbar div.logo-box img{
	background: #fff;
	border-radius: var(--pm-radius);
	padding: 2px 6px;
}
html[data-tema="oscuro"] .page-title h3,
html[data-tema="oscuro"] .page-inner .page-title h3{
	color: var(--pm-text);
}
html[data-tema="oscuro"] .page-title .breadcrumb > li,
html[data-tema="oscuro"] .page-title .breadcrumb > li > a,
html[data-tema="oscuro"] .page-title .breadcrumb > .active{
	color: var(--pm-muted);
}
html[data-tema="oscuro"] .breadcrumb{
	background: transparent;
}
html[data-tema="oscuro"] hr{
	border-top-color: var(--pm-border);
}
html[data-tema="oscuro"] .text-muted,
html[data-tema="oscuro"] .help-block,
html[data-tema="oscuro"] small{
	color: var(--pm-muted);
}
html[data-tema="oscuro"] dt,
html[data-tema="oscuro"] legend,
html[data-tema="oscuro"] label{
	color: var(--pm-text);
}
html[data-tema="oscuro"] legend{
	border-bottom-color: var(--pm-border);
}
html[data-tema="oscuro"] code,
html[data-tema="oscuro"] pre,
html[data-tema="oscuro"] kbd{
	background: var(--pm-surface-2);
	color: var(--pm-text);
	border-color: var(--pm-border);
}

/* ===== Paneles y tarjetas ===== */

html[data-tema="oscuro"] .panel,
html[data-tema="oscuro"] .panel-white,
html[data-tema="oscuro"] .panel-default,
html[data-tema="oscuro"] .graficos-dashboard-card,
html[data-tema="oscuro"] .tab-content,
html[data-tema="oscuro"] .well,
html[data-tema="oscuro"] .thumbnail,
html[data-tema="oscuro"] .jumbotron{
	background: var(--pm-surface);
	border-color: var(--pm-border);
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .panel > .panel-heading,
html[data-tema="oscuro"] .panel-default > .panel-heading,
html[data-tema="oscuro"] .panel-white > .panel-heading,
html[data-tema="oscuro"] .panel-footer{
	background: var(--pm-surface);
	border-color: var(--pm-border);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .panel-body{
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] [style*="background-color: #fff"],
html[data-tema="oscuro"] [style*="background-color:#fff"],
html[data-tema="oscuro"] [style*="background: #fff"],
html[data-tema="oscuro"] [style*="background:#fff"],
html[data-tema="oscuro"] [style*="background-color: white"],
html[data-tema="oscuro"] [style*="background: white"]{
	background-color: var(--pm-surface) !important;
}

/* ===== Tablas ===== */

html[data-tema="oscuro"] .table{
	color: var(--pm-text-2);
	background: transparent;
}
html[data-tema="oscuro"] .table > thead > tr > th,
html[data-tema="oscuro"] .table > tbody > tr > th,
html[data-tema="oscuro"] .table > tfoot > tr > th,
html[data-tema="oscuro"] .table > thead > tr > td,
html[data-tema="oscuro"] .table > tbody > tr > td,
html[data-tema="oscuro"] .table > tfoot > tr > td,
html[data-tema="oscuro"] .table-bordered{
	border-color: var(--pm-border) !important;
}
html[data-tema="oscuro"] .table > thead > tr > th,
html[data-tema="oscuro"] .table th{
	background: var(--pm-surface-2);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .table-striped > tbody > tr:nth-of-type(odd){
	background: var(--pm-surface-2);
}
html[data-tema="oscuro"] .table > tbody > tr.active > td,
html[data-tema="oscuro"] .table > tbody > tr > td.active{
	background: var(--pm-row-hover);
}
html[data-tema="oscuro"] .table > tbody > tr.success > td,
html[data-tema="oscuro"] .table > tbody > tr > td.success{
	background: var(--pm-success-soft);
}
html[data-tema="oscuro"] .table > tbody > tr.warning > td,
html[data-tema="oscuro"] .table > tbody > tr > td.warning{
	background: var(--pm-warning-soft);
}
html[data-tema="oscuro"] .table > tbody > tr.danger > td,
html[data-tema="oscuro"] .table > tbody > tr > td.danger{
	background: var(--pm-danger-soft);
}
html[data-tema="oscuro"] .table > tbody > tr.info > td,
html[data-tema="oscuro"] .table > tbody > tr > td.info{
	background: var(--pm-primary-soft);
}

/* ===== Formularios ===== */

html[data-tema="oscuro"] .form-control,
html[data-tema="oscuro"] .form-control:focus,
html[data-tema="oscuro"] input[type=text],
html[data-tema="oscuro"] input[type=email],
html[data-tema="oscuro"] input[type=number],
html[data-tema="oscuro"] input[type=password],
html[data-tema="oscuro"] input[type=search],
html[data-tema="oscuro"] input[type=date],
html[data-tema="oscuro"] input[type=url],
html[data-tema="oscuro"] input[type=tel],
html[data-tema="oscuro"] select,
html[data-tema="oscuro"] textarea{
	background-color: var(--pm-surface-2);
	border-color: var(--pm-input-border);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .form-control[disabled],
html[data-tema="oscuro"] .form-control[readonly],
html[data-tema="oscuro"] input[disabled],
html[data-tema="oscuro"] fieldset[disabled] .form-control{
	background-color: var(--pm-bg);
	color: var(--pm-muted);
}
html[data-tema="oscuro"] select option{
	background: var(--pm-surface);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .input-group-addon{
	background: var(--pm-chip);
	border-color: var(--pm-input-border);
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] form div:has(> div.checkbox) > div.checkbox > label{
	background: var(--pm-surface-2);
}
html[data-tema="oscuro"] input[type=checkbox],
html[data-tema="oscuro"] input[type=radio]{
	color-scheme: dark;
}

/* ===== Botones ===== */

html[data-tema="oscuro"] .btn-default,
html[data-tema="oscuro"] .btn-default.disabled,
html[data-tema="oscuro"] .btn-default[disabled]{
	background-color: var(--pm-surface-2);
	border-color: var(--pm-border-strong);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .btn-default:hover,
html[data-tema="oscuro"] .btn-default:focus,
html[data-tema="oscuro"] .btn-default:active,
html[data-tema="oscuro"] .btn-default.active,
html[data-tema="oscuro"] .open > .dropdown-toggle.btn-default{
	background-color: var(--pm-row-hover);
	border-color: var(--pm-border-strong);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .btn-link{
	color: var(--pm-primary-dark);
}
html[data-tema="oscuro"] .close{
	color: var(--pm-text);
	text-shadow: none;
}

/* ===== Menús, ventanas y ayudas ===== */

html[data-tema="oscuro"] .dropdown-menu{
	background: var(--pm-surface);
	border-color: var(--pm-border);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
html[data-tema="oscuro"] .dropdown-menu > li > a,
html[data-tema="oscuro"] .dropdown-menu li a{
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .dropdown-menu > li > a:hover,
html[data-tema="oscuro"] .dropdown-menu > li > a:focus,
html[data-tema="oscuro"] .dropdown-menu li a:hover{
	background: var(--pm-primary-soft);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .dropdown-menu .divider{
	background-color: var(--pm-border);
}
html[data-tema="oscuro"] .modal-content{
	background: var(--pm-surface);
	color: var(--pm-text-2);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
html[data-tema="oscuro"] .modal-header,
html[data-tema="oscuro"] .modal-footer{
	border-color: var(--pm-border);
}
html[data-tema="oscuro"] .modal-title{
	color: var(--pm-text);
}
html[data-tema="oscuro"] .modal-backdrop.in{
	opacity: 0.7;
}
html[data-tema="oscuro"] .popover{
	background: var(--pm-surface-2);
	border-color: var(--pm-border-strong);
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .popover-title{
	background: var(--pm-surface);
	border-bottom-color: var(--pm-border);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .popover.top > .arrow:after{ border-top-color: var(--pm-surface-2); }
html[data-tema="oscuro"] .popover.bottom > .arrow:after{ border-bottom-color: var(--pm-surface-2); }
html[data-tema="oscuro"] .popover.left > .arrow:after{ border-left-color: var(--pm-surface-2); }
html[data-tema="oscuro"] .popover.right > .arrow:after{ border-right-color: var(--pm-surface-2); }

/* ===== Pestañas, listas, paginación ===== */

html[data-tema="oscuro"] .nav-tabs{
	border-bottom-color: var(--pm-border);
}
html[data-tema="oscuro"] .nav-tabs > li > a{
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .nav-tabs > li > a:hover{
	background: var(--pm-surface-2);
	border-color: var(--pm-border);
}
html[data-tema="oscuro"] .nav-tabs > li.active > a,
html[data-tema="oscuro"] .nav-tabs > li.active > a:hover,
html[data-tema="oscuro"] .nav-tabs > li.active > a:focus{
	background: var(--pm-surface);
	border-color: var(--pm-border);
	border-bottom-color: transparent;
	color: var(--pm-text);
}
html[data-tema="oscuro"] .nav-pills > li > a:hover,
html[data-tema="oscuro"] .nav > li > a:focus{
	background: var(--pm-surface-2);
}
html[data-tema="oscuro"] .list-group-item{
	background: var(--pm-surface);
	border-color: var(--pm-border);
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] a.list-group-item:hover,
html[data-tema="oscuro"] .list-group-item.active{
	background: var(--pm-row-hover);
	color: var(--pm-text);
}
html[data-tema="oscuro"] .pagination > li > a,
html[data-tema="oscuro"] .pagination > li > span{
	background: var(--pm-surface);
	border-color: var(--pm-border);
}
html[data-tema="oscuro"] .pagination > li > a:hover,
html[data-tema="oscuro"] .pagination > li > span:hover{
	background: var(--pm-surface-2);
}
html[data-tema="oscuro"] .pagination > .disabled > a,
html[data-tema="oscuro"] .pagination > .disabled > span{
	background: var(--pm-surface);
	color: var(--pm-muted);
}
html[data-tema="oscuro"] .label-default,
html[data-tema="oscuro"] .label.label-default,
html[data-tema="oscuro"] .badge-default{
	background: var(--pm-chip);
	color: var(--pm-text-2);
}

/* ===== Avisos ===== */

html[data-tema="oscuro"] .alert-info{ background: var(--pm-primary-soft); color: var(--pm-info); }
html[data-tema="oscuro"] .alert-success{ background: var(--pm-success-soft); color: var(--pm-success-dark); }
html[data-tema="oscuro"] .alert-danger{ background: var(--pm-danger-soft); color: var(--pm-danger-dark); }
html[data-tema="oscuro"] .alert-warning{ background: var(--pm-warning-soft); color: var(--pm-warning-ink); }
html[data-tema="oscuro"] .alert strong,
html[data-tema="oscuro"] .alert b{
	color: inherit;
}

/* ===== Editor de texto y calendario ===== */

html[data-tema="oscuro"] .cke_chrome{
	border-color: var(--pm-input-border) !important;
}
html[data-tema="oscuro"] .cke_top,
html[data-tema="oscuro"] .cke_bottom{
	background: var(--pm-surface-2) !important;
	border-color: var(--pm-border) !important;
}
html[data-tema="oscuro"] .cke_toolgroup,
html[data-tema="oscuro"] .cke_combo_button{
	background: var(--pm-surface) !important;
	border-color: var(--pm-border) !important;
}
html[data-tema="oscuro"] a.cke_button_off:hover,
html[data-tema="oscuro"] a.cke_button_off:focus{
	background: var(--pm-row-hover) !important;
}
/* Los iconos del editor son imágenes oscuras: se aclaran */
html[data-tema="oscuro"] .cke_button_icon,
html[data-tema="oscuro"] .cke_combo_text,
html[data-tema="oscuro"] .cke_button_arrow,
html[data-tema="oscuro"] .cke_combo_arrow{
	filter: invert(0.85);
}
html[data-tema="oscuro"] .cke_path_item,
html[data-tema="oscuro"] .cke_wordcount{
	color: var(--pm-muted) !important;
}
html[data-tema="oscuro"] .datepicker.dropdown-menu,
html[data-tema="oscuro"] .datepicker table{
	background: var(--pm-surface);
	color: var(--pm-text-2);
}
html[data-tema="oscuro"] .datepicker table tr td.day:hover,
html[data-tema="oscuro"] .datepicker table tr td span:hover,
html[data-tema="oscuro"] .datepicker .datepicker-switch:hover,
html[data-tema="oscuro"] .datepicker .prev:hover,
html[data-tema="oscuro"] .datepicker .next:hover{
	background: var(--pm-row-hover);
}
html[data-tema="oscuro"] .datepicker table tr td.old,
html[data-tema="oscuro"] .datepicker table tr td.new{
	color: var(--pm-placeholder);
}
html[data-tema="oscuro"] .datepicker-dropdown:after{
	border-bottom-color: var(--pm-surface);
}

/* ===== Gráficas Morris (SVG de Raphaël) ===== */

html[data-tema="oscuro"] svg:not(.apexcharts-svg) text{
	fill: var(--pm-muted);
}
html[data-tema="oscuro"] svg:not(.apexcharts-svg) path[stroke="#e9eef2"],
html[data-tema="oscuro"] svg:not(.apexcharts-svg) path[stroke="#aaaaaa"]{
	stroke: var(--pm-border);
}
html[data-tema="oscuro"] svg:not(.apexcharts-svg) path[stroke="#ffffff"],
html[data-tema="oscuro"] svg:not(.apexcharts-svg) circle[stroke="#ffffff"]{
	stroke: var(--pm-surface);
}
html[data-tema="oscuro"] .morris-hover.morris-default-style{
	color: var(--pm-text);
}

/* ===== Menú lateral en celular ===== */

html[data-tema="oscuro"] .page-inner.sidebar-visible:before{
	background: rgba(0, 0, 0, 0.6);
}

/* ===== Botón de modo oscuro ===== */

html[data-tema="oscuro"] .pm-tema-movil{
	color: var(--pm-text-2);
}

/* Logotipo de la empresa en el panel principal: fondo claro para que se lea */
html[data-tema="oscuro"] .dash-hero-logo img{
	background: #fff;
	border-radius: var(--pm-radius);
	padding: 6px 10px;
}

/* Barra deslizante de porcentaje de avance (ion.rangeSlider) */
html[data-tema="oscuro"] .irs-line{
	background: var(--pm-track);
	border-radius: 4px;
}
html[data-tema="oscuro"] .irs-line-left,
html[data-tema="oscuro"] .irs-line-mid,
html[data-tema="oscuro"] .irs-line-right{
	background: none;
}
html[data-tema="oscuro"] .irs-min,
html[data-tema="oscuro"] .irs-max{
	background: var(--pm-chip);
	color: var(--pm-muted);
}
html[data-tema="oscuro"] .irs-grid-text{
	color: var(--pm-muted);
}

/* Recuadro de las gráficas Morris al pasar el mouse */
html[data-tema="oscuro"] .morris-hover.morris-default-style{
	background: var(--pm-surface-2);
	border-color: var(--pm-border-strong);
	color: var(--pm-text);
}