/* Light theme overrides — loaded after app.css/custom.css, activated by html.theme-light */

/* Body & base text */
html.theme-light body {
	background-color: #f4f5f7;
	color: #404043;
}

/* Headings (app.css:334 los pone en #fff) */
html.theme-light h1, html.theme-light h2, html.theme-light h3,
html.theme-light h4, html.theme-light h5, html.theme-light h6,
html.theme-light .h1, html.theme-light .h2, html.theme-light .h3,
html.theme-light .h4, html.theme-light .h5, html.theme-light .h6 {
	color: #262626;
}

/* Content area (app.css:2064,2085) */
html.theme-light .content {
	background-color: #ffffff;
	border-left-color: #e2e4e8;
}
html.theme-light.rtl .content {
	border-right-color: #e2e4e8;
}

/* Footer (app.css:2152) */
html.theme-light .main-wrap > footer {
	background-color: #ffffff;
	border-left-color: #e2e4e8;
}

/* Paneles/cards (app.css:1399,1408,1499-1503) */
html.theme-light .panel {
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
html.theme-light .panel-default {
	border-color: #e2e4e8;
}
html.theme-light .panel-default > .panel-heading {
	color: #262626;
	border-color: #e2e4e8;
}
html.theme-light .panel-footer {
	background-color: #f7f8fa;
	border-top-color: #e2e4e8;
}
html.theme-light .panel > .panel-body + .table,
html.theme-light .panel > .table + .panel-body,
html.theme-light .panel > .table-responsive + .panel-body {
	border-top-color: #e2e4e8;
}
html.theme-light .panel-group .panel-heading + .panel-collapse > .list-group,
html.theme-light .panel-group .panel-heading + .panel-collapse > .panel-body,
html.theme-light .panel-group .panel-footer + .panel-collapse .panel-body {
	border-color: #e2e4e8;
}
/* panel-primary/success/info/warning/danger ya usan fondos pastel claros + #262626 — sin cambios */

/* Tablas (app.css:641-666) */
html.theme-light .table > tbody > tr > td, html.theme-light .table > tbody > tr > th,
html.theme-light .table > tfoot > tr > td, html.theme-light .table > tfoot > tr > th,
html.theme-light .table > thead > tr > td, html.theme-light .table > thead > tr > th {
	border-top-color: #e2e4e8;
}
html.theme-light .table > thead > tr > th {
	border-bottom-color: #dde0e4;
}
html.theme-light .table > tbody + tbody {
	border-top-color: #dde0e4;
}
html.theme-light .table-bordered, html.theme-light .table-bordered > tbody > tr > td,
html.theme-light .table-bordered > tbody > tr > th, html.theme-light .table-bordered > tfoot > tr > td,
html.theme-light .table-bordered > tfoot > tr > th, html.theme-light .table-bordered > thead > tr > td,
html.theme-light .table-bordered > thead > tr > th {
	border-color: #e2e4e8;
}
html.theme-light .table .table {
	background-color: #ffffff;
}
html.theme-light .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #f7f8fa;
}
html.theme-light .table-hover > tbody > tr:hover {
	background-color: #eef0f2;
}
/* filas success/info/warning/danger ya son pasteles claros — sin cambios.
   DataTables reutiliza estas mismas clases .table + .pagination, sin CSS propio en app.css. */

html.theme-light hr {
	border-top-color: #e2e4e8;
}

html.theme-light .breadcrumb {
	background-color: #eef0f2;
}
html.theme-light .breadcrumb > .active {
	color: #6b7280;
}

/* Form controls (app.css:1899,1038) */
html.theme-light .form-control {
	color: #33383d;
	background-color: #ffffff;
	border-color: #ccd0d5;
}
html.theme-light .input-group-addon {
	color: #33383d;
	border-color: #ccd0d5;
}

/* Dropdowns (app.css:961-968) */
html.theme-light .dropdown-menu {
	background-color: #ffffff;
	border-color: #e2e4e8;
}
html.theme-light .dropdown-menu .divider {
	background-color: #eef0f2;
}
html.theme-light .dropdown-menu > li > a {
	color: #33383d;
}
/* .dropdown-menu > li > a:hover (fondo azul + texto blanco) no necesita cambios */

/* Modales (app.css:1550-1907) */
html.theme-light .modal-content {
	background-color: #ffffff;
}
html.theme-light .modal-header {
	border-bottom-color: #eef0f2;
}
html.theme-light .modal-header .close {
	color: #33383d;
}
html.theme-light .modal-footer {
	border-top-color: #eef0f2;
}

/* Popovers de x-editable (app.css:1583-1600) — .popover ya es blanco en ambos temas;
   solo .popover-title tiene fondo oscuro fijo (#2d2d2d) y hereda el color de body,
   así que hay que fijarle texto blanco explícito. */
html.theme-light .popover-title {
	color: #ffffff;
}

/* custom.css:8 */
html.theme-light #facturaDetalle {
	background-color: #ffffff;
}

/* ===== Navbar (app.css:1199-1228) ===== */
html.theme-light .navbar-inverse {
	background-color: #ffffff;
	border-color: #e2e4e8;
}
html.theme-light .navbar-inverse .navbar-brand:focus,
html.theme-light .navbar-inverse .navbar-brand:hover {
	color: #1a1a1a;
}
html.theme-light .navbar-inverse .navbar-nav > .active > a,
html.theme-light .navbar-inverse .navbar-nav > .active > a:focus,
html.theme-light .navbar-inverse .navbar-nav > .active > a:hover,
html.theme-light .navbar-inverse .navbar-nav > li > a:focus,
html.theme-light .navbar-inverse .navbar-nav > li > a:hover,
html.theme-light .navbar-inverse .navbar-nav > .open > a,
html.theme-light .navbar-inverse .navbar-nav > .open > a:focus,
html.theme-light .navbar-inverse .navbar-nav > .open > a:hover {
	color: #1a1a1a;
	background-color: #eef0f2;
}
html.theme-light .navbar-inverse .navbar-toggle {
	border-color: #ccd0d5;
}
html.theme-light .navbar-inverse .navbar-toggle:focus,
html.theme-light .navbar-inverse .navbar-toggle:hover {
	background-color: #eef0f2;
}
html.theme-light .navbar-inverse .navbar-toggle .icon-bar {
	background-color: #33383d;
}
html.theme-light .navbar-inverse .navbar-collapse,
html.theme-light .navbar-inverse .navbar-form {
	border-color: #e2e4e8;
}
@media (max-width:767px) {
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
		border-color: #e2e4e8;
	}
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
		background-color: #e2e4e8;
	}
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus,
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
	html.theme-light .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
		color: #1a1a1a;
		background-color: #eef0f2;
	}
}
html.theme-light .navbar-inverse .navbar-link:hover,
html.theme-light .navbar-inverse .btn-link:focus,
html.theme-light .navbar-inverse .btn-link:hover {
	color: #1a1a1a;
}

/* ===== Sidebar + main-wrap (app.css:2088-3213 aprox.) ===== */
html.theme-light .main-wrap {
	background-color: #eef0f2;
}
html.theme-light .sidebar .avatar-container {
	border-right-color: #e2e4e8;
	border-bottom-color: #e2e4e8;
}
html.theme-light .sidebar-logo {
	border-bottom-color: #e2e4e8;
	border-right-color: #e2e4e8;
}
html.theme-light .sidebar .sidebar-overlay-head {
	border-color: #e2e4e8;
}
html.theme-light .navigation .sidebar ul.side-menu > li {
	border-right-color: #e2e4e8;
}
html.theme-light .navigation .sidebar ul.side-menu > li > a:hover,
html.theme-light .navigation .sidebar ul.side-menu li ul li a:hover,
html.theme-light .navigation .sidebar ul.side-menu > li:hover:not(.nested-active):not(.active) > a {
	color: #1a1a1a;
	background-color: #e2e4e8;
	box-shadow: none;
}
html.theme-light .navigation .sidebar ul.side-menu > li > a:hover > i:first-child,
html.theme-light .navigation .sidebar ul.side-menu > li:hover:not(.nested-active):not(.active) > a > i:first-child {
	color: #1a1a1a;
}
html.theme-light .navigation .sidebar ul.side-menu > li.active > a,
html.theme-light .navigation .sidebar ul.side-menu > li.nested-active:not(.expanded) > a,
html.theme-light .navigation .sidebar ul.side-menu li ul li.active > a,
html.theme-light .navigation .sidebar ul.side-menu li ul li.active > a:hover,
html.theme-light .navigation .sidebar ul.side-menu li ul li.nested-active:not(.expanded) > a {
	color: #1a1a1a;
	background-color: #e2e4e8;
	box-shadow: 3px 0 0 0 #2c97de inset;
}
html.theme-light .navigation .sidebar ul.side-menu > li.active > a > i:first-child,
html.theme-light .navigation .sidebar ul.side-menu > li.nested-active:not(.expanded) > a > i:first-child {
	color: #1a1a1a;
}
html.theme-light .navigation .sidebar hr {
	border-top-color: #e2e4e8;
}
/* Submenús flotantes en modo slim/big-icons (activables desde el toggle #sidebar-switch) */
html.theme-light body.sidebar-big-icons .navigation .sidebar ul.side-menu > li > ul,
html.theme-light body.sidebar-slim .navigation .sidebar ul.side-menu > li > ul {
	background: #ffffff;
	border-color: #e2e4e8;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
html.theme-light body.sidebar-big-icons .navigation .sidebar ul.side-menu > li:hover:not(.nested-active):not(.active) > a,
html.theme-light body.sidebar-slim .navigation .sidebar ul.side-menu > li:hover:not(.nested-active):not(.active) > a,
html.theme-light body.sidebar-slim .navigation .sidebar ul.side-menu > li ul > li:hover:not(.active) > a {
	color: #1a1a1a;
	background-color: #eef0f2;
}

/* ===== Logos: PNG monocromáticos blancos con transparencia — se invierten a oscuro ===== */
html.theme-light .navbar-brand img,
html.theme-light .sidebar-logo img,
html.theme-light .sidebar-overlay-head img {
	filter: invert(1);
}

/* .text-white (app.css:2420, ~115 usos en templates) pasa a oscuro en todo el tema claro,
   incluida la navbar/sidebar, ya que ambas dejan de ser oscuras. */
html.theme-light .text-white {
	color: #33383d !important;
}

/* Toggle de tema en el dropdown "Your Profile" */
html.theme-light .theme-toggle-label {
	color: #33383d;
}

/* Sub-navbar de breadcrumbs (app.css:2141) — quedaba con el fondo oscuro original */
html.theme-light .sub-navbar.sub-navbar__header-breadcrumbs {
	background-color: #ffffff;
	border-bottom: 1px solid #e2e4e8;
}

/* KPI del dashboard Financiero (.bg-gray-dark, app.css:2533) — se piden en un blanco
   ligeramente más oscuro para diferenciarlos del fondo general, no blanco puro */
html.theme-light .bg-gray-dark {
	background-color: #eef0f2;
}

/* Cabeceras de tabla (thead), incl. DataTables — se piden con fondo oscuro y texto claro,
   igual que pedía el usuario aunque difiera del criterio "no tocar botones/th" inicial */
html.theme-light .table > thead > tr > th,
html.theme-light .table > thead > tr > td {
	background-color: #33383d;
	color: #ffffff;
	border-color: #4b4f56;
}

/* .hr-text (app.css:3074-3080) — el bloque de texto sobre la línea divisoria tenía
   fondo oscuro fijo (#212121) para tapar la línea; con .text-white ahora en oscuro
   quedaba texto oscuro sobre fondo oscuro */
html.theme-light .hr-text:before {
	background-color: #e2e4e8;
}
html.theme-light .hr-text > :first-child {
	background-color: #ffffff;
}

/* Pestañas .nav-tabs (app.css:1071-1096) — activa quedaba con fondo negro (#212121) */
html.theme-light .nav-tabs {
	border-bottom-color: #e2e4e8;
}
html.theme-light .nav-tabs > li > a:hover {
	border-color: #e2e4e8;
}
html.theme-light .nav-tabs > li.active > a,
html.theme-light .nav-tabs > li.active > a:focus,
html.theme-light .nav-tabs > li.active > a:hover {
	color: #1a1a1a;
	background-color: #eef0f2;
	border-color: #e2e4e8 #e2e4e8 transparent;
}

/* Labels/badges outline (app.css:1825-1849) — usadas para estados de factura/gasto
   (wrp.gasto.php, wrp.ejercicio.php, class.sbapp.php) y en las plantillas *Lateral.php.
   En tema claro se piden rellenas en vez de outline (fondo transparente + borde). */
html.theme-light .label.label-outline {
	border-color: transparent;
}
html.theme-light .label.label-outline.label-primary { background-color: #2c97de; color: #ffffff; }
html.theme-light .label.label-outline.label-success { background-color: #84b547; color: #ffffff; }
html.theme-light .label.label-outline.label-info { background-color: #2dbda8; color: #ffffff; }
html.theme-light .label.label-outline.label-warning { background-color: #e76d3b; color: #ffffff; }
html.theme-light .label.label-outline.label-danger { background-color: #cc3e4a; color: #ffffff; }
html.theme-light .label.label-outline.label-cerulean { background-color: #00A3E3; color: #ffffff; }
html.theme-light .label.label-outline.label-curious-blue { background-color: #2986c7; color: #ffffff; }
html.theme-light .label.label-outline.label-endaveour { background-color: #0055a3; color: #ffffff; }
html.theme-light .label.label-outline.label-minsk { background-color: #362d88; color: #ffffff; }
html.theme-light .label.label-outline.label-eminence { background-color: #742787; color: #ffffff; }
html.theme-light .label.label-outline.label-violet-eggplant { background-color: #aa1985; color: #ffffff; }
html.theme-light .label.label-outline.label-mint-green { background-color: #72ff96; color: #1a1a1a; }
html.theme-light .label.label-outline.label-aquamarine { background-color: #62ffe0; color: #1a1a1a; }
html.theme-light .label.label-outline.label-malibu { background-color: #6abfff; color: #1a1a1a; }
html.theme-light .label.label-outline.label-dodger-blue { background-color: #5e6cff; color: #ffffff; }
html.theme-light .label.label-outline.label-heliotrope { background-color: #a26bff; color: #ffffff; }
html.theme-light .label.label-outline.label-perfume { background-color: #f57ffe; color: #1a1a1a; }
html.theme-light .label.label-outline.label-brand-cerulean { background-color: #00A3E3; color: #ffffff; }
html.theme-light .label.label-outline.label-gray-darker { background-color: #262626; color: #ffffff; }
html.theme-light .label.label-outline.label-gray-dark { background-color: #2d2d2d; color: #ffffff; }
html.theme-light .label.label-outline.label-gray { background-color: #383838; color: #ffffff; }
html.theme-light .label.label-outline.label-gray-light { background-color: #444444; color: #ffffff; }
html.theme-light .label.label-outline.label-gray-lighter { background-color: #5c5c5c; color: #ffffff; }
html.theme-light .label.label-outline.label-white { background-color: #ffffff; color: #262626; border-color: #e2e4e8; }

/* .b-gray-dark (app.css:2278, usada como utilidad de borde en paneles como el de login) */
html.theme-light .b-gray-dark {
	border-color: #e2e4e8 !important;
}

/* .btn-default (app.css:1698-1714) — texto blanco sobre fondo transparente pensado para
   tema oscuro; en claro quedaba casi invisible y el botón .active (solo un halo blanco al
   .07 de opacidad) era indistinguible del resto, p.ej. el toggle trimestral/anual de
   wrp.financiero.php. Se pinta como los demás botones "clarito" y el activo con relleno. */
html.theme-light .btn-default {
	color: #404043;
	background-color: #ffffff;
	border-color: #d7dae0;
}
html.theme-light .btn-default.focus, html.theme-light .btn-default:focus {
	color: #404043;
	background-color: #ffffff;
	border-color: #b9bec7;
}
html.theme-light .btn-default:hover {
	color: #262626;
	background-color: #f7f8fa;
	border-color: #c7cbd2;
}
html.theme-light .open > .btn-default.dropdown-toggle,
html.theme-light .btn-default.active,
html.theme-light .btn-default:active {
	color: #ffffff;
	background-color: #2c97de;
	border-color: #2c97de;
}
html.theme-light .open > .btn-default.dropdown-toggle.focus,
html.theme-light .open > .btn-default.dropdown-toggle:focus,
html.theme-light .open > .btn-default.dropdown-toggle:hover,
html.theme-light .btn-default.active.focus,
html.theme-light .btn-default.active:focus,
html.theme-light .btn-default.active:hover,
html.theme-light .btn-default:active.focus,
html.theme-light .btn-default:active:focus,
html.theme-light .btn-default:active:hover {
	color: #ffffff;
	background-color: #2589cc;
	border-color: #2589cc;
}
html.theme-light .btn-default.disabled.focus, html.theme-light .btn-default.disabled:focus,
html.theme-light .btn-default.disabled:hover, html.theme-light .btn-default[disabled].focus,
html.theme-light .btn-default[disabled]:focus, html.theme-light .btn-default[disabled]:hover,
html.theme-light fieldset[disabled] .btn-default.focus,
html.theme-light fieldset[disabled] .btn-default:focus,
html.theme-light fieldset[disabled] .btn-default:hover {
	background-color: #ffffff;
	border-color: #d7dae0;
}
html.theme-light .btn-default .badge {
	color: #ffffff;
	background-color: #404043;
}