/* @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@200&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@200&display=swap");
[data-theme="light"] {
  --primary: #2a83d6;
  --background: rgb(32, 32, 32);
  --backgroundbox: rgb(255, 255, 255);
  --backgroundfond: rgb(240, 240, 240);
  --backgroundthead: rgb(113, 113, 113);
  --text: #4d4d4d;
  --textable: #707070;
  --texth: #efefef;
  --infobox: #424242;
  --buton: #555555;
}

[data-theme="dark"] {
  --primary: #00e676;
  --background: rgb(18, 18, 18);
  --backgroundbox: rgb(22, 22, 22);
  --backgroundfond: rgb(28, 28, 28);
  --backgroundthead: rgb(30, 50, 30);
  --text: #00e676;
  --textable: #00c060;
  --texth: #00ff88;
  --infobox: #1a3a1a;
  --buton: #0a2a0a;
}
[data-theme="green"] {
  --primary: #e9833e;
  --background: #60994d;
  --backgroundbox: rgb(255, 255, 255);
  --backgroundfond: rgb(243, 243, 243);
  --backgroundthead: rgb(113, 113, 113);
  --text: #535353;
  --textable: #707070;
  --texth: #efefef;
  --infobox: #424242;
  --button: #2f9c84;
}

.cabecera-m {
  background-color: var(--background) !important;
}
.cabecera-m .logo {
  background-color: var(--background) !important;
}

.content-wrapper {
  background-color: var(--backgroundfond) !important;
  color: var(--text) !important;
}

.main-sidebar {
  background-color: var(--backgroundbox) !important;
  color: var(--text) !important;
}
.main-sidebar .sidebar-menu li {
  color: var(--text) !important;
}
.main-sidebar .sidebar {
  background-color: var(--backgroundbox) !important;
  color: var(--text) !important;
}

.box {
  background-color: var(--backgroundbox) !important;
  color: var(--text) !important;
  border-right-style: none;
  border-left-style: none;
  box-shadow: none !important;
}
.box label,
.box h3 {
  /* background-color: var(--backgroundbox) !important; */
  color: var(--text) !important;
}
legend {
  color: var(--text) !important;
}
.main-footer,
.main-footer * {
  background-color: var(--backgroundbox);
  color: var(--text) !important;
  border-style: none;
}
.user-panel2 .info p {
  color: var(--text) !important;
}

.main-sidebar .sidebar p,
.main-sidebar .sidebar span {
  color: var(--text) !important;
  letter-spacing: 1px !important;
}
.main-sidebar .sidebar i {
  color: var(--text) !important;
}
.sidebar-menu li > a:hover {
  background-color: rgb(245, 245, 245) !important;
}
.sidebar-menu > li:hover {
  background-color: rgb(230, 230, 230) !important;
}
.sidebar-menu .treeview > ul {
  background-color: rgb(255, 255, 255) !important;
  color: #000;
}
/* .sidebar-menu .treeview > ul:hover {
    background-color:rgb(230, 230, 230) !important;
} */
.sidebar-menu .treeview .treeview-menu > li {
  padding: 0.5em !important;
  background-color: var(--backgroundbox) !important;
  color: var(--text) !important;
}
.sidebar-menu .treeview .treeview-menu li > a {
  color: var(--text) !important;
  background-color: rgb(231, 231, 231, 0) !important;
}
.sidebar-menu .treeview .treeview-menu li > a:hover {
  color: #000;
}
.sidebar-menu .treeview .treeview-menu > li:hover {
  background-color: rgb(233, 233, 233) !important;
}

.contenedor-btns-carrito {
  background-color: var(--backgroundbox) !important;
}

.contenedor-widget .info-box {
  color: var(--infobox) !important;
}
.pro-mas-v ul li a {
  color: var(--text) !important;
}

.contenedor-selva {
  background-color: var(--backgroundbox) !important;
}
table thead tr{
  background-color: var(--background) !important;
}
table thead tr th{

border-style: none !important;
color: var(--texth) !important;
}
.modo-contenedor-email label, .contenedor-selva .toggle-group label{
  color: white !important;
}
#themecolor {
  position: fixed;
  padding: 5px;
  z-index: 10000;
  bottom: 20px;
  left: 15px;
  top: auto;
  right: auto;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.2);
}
#themecolor button {
  border: none;
  outline: 0;
  margin: 0;
  width: auto;
  height: auto;
  padding: 4px 8px;
  border-radius: 12px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: transform .15s;
}
#themecolor button:hover {
  transform: scale(1.25);
}

/* ===== MODO OSCURO: letras verdes estilo terminal ===== */
[data-theme="dark"] body,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .box,
[data-theme="dark"] .box label,
[data-theme="dark"] .box h3,
[data-theme="dark"] legend,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] li,
[data-theme="dark"] a {
  color: #00e676 !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #111 !important;
  color: #00e676 !important;
  border-color: #00e676 !important;
}
[data-theme="dark"] .form-control {
  background-color: #111 !important;
  color: #00e676 !important;
  border: 1px solid #00e676 !important;
}
[data-theme="dark"] .form-control::placeholder {
  color: #006633 !important;
}
[data-theme="dark"] table thead tr {
  background-color: #0a1f0a !important;
}
[data-theme="dark"] table thead tr th {
  color: #00ff88 !important;
}
[data-theme="dark"] table tbody tr td {
  color: #00c060 !important;
}
[data-theme="dark"] .box-header {
  background: #0a1a0a !important;
  color: #00e676 !important;
  border-bottom: 1px solid #00e676 !important;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-info {
  background: #0a2a0a !important;
  border-color: #00e676 !important;
  color: #00e676 !important;
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background-color: #161616 !important;
  color: #00e676 !important;
  border-color: #00e676 !important;
}
[data-theme="dark"] .modal-content label,
[data-theme="dark"] .modal-content .control-label,
[data-theme="dark"] .modal-content p,
[data-theme="dark"] .modal-content span,
[data-theme="dark"] .modal-content td,
[data-theme="dark"] .modal-content th,
[data-theme="dark"] .modal-content h1,
[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3,
[data-theme="dark"] .modal-content h4,
[data-theme="dark"] .modal-content h5,
[data-theme="dark"] .modal-content legend,
[data-theme="dark"] .modal-content small,
[data-theme="dark"] .modal-content a {
  color: #00e676 !important;
}
[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea,
[data-theme="dark"] .modal-content .form-control {
  background-color: #0d1f0d !important;
  color: #00e676 !important;
  border: 1px solid #00e676 !important;
}
[data-theme="dark"] .modal-content input::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder {
  color: #006633 !important;
}
[data-theme="dark"] .modal-content select option {
  background-color: #0d1f0d !important;
  color: #00e676 !important;
}
[data-theme="dark"] .modal-content table thead tr {
  background-color: #0a1f0a !important;
}
[data-theme="dark"] .modal-content .input-group-addon {
  background-color: #0a1f0a !important;
  color: #00e676 !important;
  border-color: #00e676 !important;
}
[data-theme="dark"] .modal-title {
  color: #00e676 !important;
}
[data-theme="dark"] .modal-content .close {
  color: #00e676 !important;
  opacity: 1 !important;
}
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: #00e676 !important;
}


[data-theme="bank"] {
  --primary: #00ff41;
  --background: #000000;
  --backgroundbox: #0a0a0a;
  --backgroundfond: #050505;
  --backgroundthead: #001a00;
  --text: #00ff41;
  --textable: #00cc33;
  --texth: #00ff41;
  --infobox: #003300;
  --buton: #003300;
}
[data-theme="bank"] body,
[data-theme="bank"] .content-wrapper,
[data-theme="bank"] .box,
[data-theme="bank"] .modal-content,
[data-theme="bank"] .modal-body,
[data-theme="bank"] .modal-header,
[data-theme="bank"] .modal-footer,
[data-theme="bank"] input,
[data-theme="bank"] select,
[data-theme="bank"] textarea {
  background-color: #000 !important;
  color: #00ff41 !important;
  border-color: #00ff41 !important;
  font-family: 'Courier New', monospace !important;
}
[data-theme="bank"] table thead tr {
  background-color: #001a00 !important;
}
[data-theme="bank"] table thead tr th {
  color: #00ff41 !important;
  border-color: #00ff41 !important;
}
[data-theme="bank"] table tbody tr td {
  color: #00cc33 !important;
  border-color: #003300 !important;
}
[data-theme="bank"] .box-header {
  background: #001a00 !important;
  color: #00ff41 !important;
  border-bottom: 1px solid #00ff41 !important;
}
[data-theme="bank"] .btn-primary,
[data-theme="bank"] .btn-success,
[data-theme="bank"] .btn-info {
  background: #003300 !important;
  border-color: #00ff41 !important;
  color: #00ff41 !important;
}
[data-theme="bank"] .btn-danger {
  background: #330000 !important;
  border-color: #ff0000 !important;
  color: #ff4444 !important;
}
[data-theme="bank"] .form-control {
  background: #000 !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
}
[data-theme="bank"] .form-control::placeholder {
  color: #006600 !important;
}
[data-theme="bank"] .main-sidebar,
[data-theme="bank"] .main-header,
[data-theme="bank"] .main-footer {
  background: #000 !important;
  border-color: #00ff41 !important;
}
[data-theme="bank"] a { color: #00ff41 !important; }
[data-theme="bank"] label { color: #00ff41 !important; }
[data-theme="bank"] h1, [data-theme="bank"] h2,
[data-theme="bank"] h3, [data-theme="bank"] h4 { color: #00ff41 !important; }
[data-theme="bank"] .modal-backdrop { background: #000 !important; }

/* ===== FIX: botón tema SIEMPRE visible sobre modales ===== */
#themecolor {
  position: fixed !important;
  z-index: 99999 !important;
  bottom: 20px !important;
  left: 15px !important;
  top: auto !important;
  right: auto !important;
  background-color: rgba(255,255,255,0.85) !important;
  border-radius: 20px !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  pointer-events: all !important;
}
/* Asegurar que quede sobre el backdrop del modal */
.modal-backdrop {
  z-index: 1040 !important;
}
.modal {
  z-index: 1050 !important;
}
#themecolor {
  z-index: 99999 !important;
}
#themecolor button {
  border: none !important;
  outline: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 20px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .15s !important;
}
#themecolor button:hover { transform: scale(1.25) !important; }

/* ===== GRÁFICOS MORRIS — modo oscuro ===== */
[data-theme="dark"] .morris-hover,
[data-theme="bank"] .morris-hover {
  background: #0a1a0a !important;
  border-color: #00e676 !important;
  color: #00e676 !important;
}
[data-theme="dark"] .morris-hover-point,
[data-theme="bank"] .morris-hover-point {
  color: #00e676 !important;
}
[data-theme="dark"] .chart svg,
[data-theme="dark"] #revenue-chart svg,
[data-theme="dark"] #bar-chart1 svg,
[data-theme="dark"] #bar-chart2 svg,
[data-theme="bank"] .chart svg,
[data-theme="bank"] #revenue-chart svg,
[data-theme="bank"] #bar-chart1 svg,
[data-theme="bank"] #bar-chart2 svg {
  background: transparent !important;
}

/* Cards dashboard sin círculos */
.info-box {
  display: flex;
  align-items: center;
}
.info-box .info-box-content {
  padding: 12px 16px;
  width: 100%;
}
[data-theme="dark"] .info-box,
[data-theme="bank"] .info-box {
  background: #161616 !important;
  border: 1px solid #003300 !important;
}
[data-theme="dark"] .info-box-text,
[data-theme="dark"] .info-box-number,
[data-theme="bank"] .info-box-text,
[data-theme="bank"] .info-box-number {
  color: #00e676 !important;
}

/* ===== DASHBOARD — fondo negro en modo oscuro ===== */
[data-theme="dark"] .db2,
[data-theme="dark"] .db2-card,
[data-theme="dark"] .db2-filtro,
[data-theme="bank"] .db2,
[data-theme="bank"] .db2-card,
[data-theme="bank"] .db2-filtro {
  background: #111 !important;
  background-color: #111 !important;
  color: #00e676 !important;
  border-color: #003300 !important;
}
[data-theme="dark"] .db2-tit,
[data-theme="dark"] .db2-tit i,
[data-theme="dark"] .db2-filtro label,
[data-theme="dark"] .db2-filtro input,
[data-theme="dark"] .db2-filtro select,
[data-theme="bank"] .db2-tit,
[data-theme="bank"] .db2-tit i,
[data-theme="bank"] .db2-filtro label,
[data-theme="bank"] .db2-filtro input,
[data-theme="bank"] .db2-filtro select {
  color: #00e676 !important;
  background-color: #0a1a0a !important;
  border-color: #00e676 !important;
}
/* Fuerza fondo negro en SVG de Morris (rect de fondo) */
[data-theme="dark"] .chart svg rect:first-child,
[data-theme="dark"] #revenue-chart svg rect:first-child,
[data-theme="bank"] .chart svg rect:first-child,
[data-theme="bank"] #revenue-chart svg rect:first-child {
  fill: #111 !important;
}
/* Textos de ejes Morris */
[data-theme="dark"] .chart svg text,
[data-theme="dark"] #revenue-chart svg text,
[data-theme="dark"] #bar-chart1 svg text,
[data-theme="dark"] #bar-chart2 svg text,
[data-theme="bank"] .chart svg text,
[data-theme="bank"] #revenue-chart svg text,
[data-theme="bank"] #bar-chart1 svg text,
[data-theme="bank"] #bar-chart2 svg text {
  fill: #00e676 !important;
}
/* Líneas de grilla Morris */
[data-theme="dark"] .chart svg path.morris-area-path,
[data-theme="bank"] .chart svg path.morris-area-path {
  fill: #00e67622 !important;
}

/* ===== CARDS EN UNA SOLA FILA — textos compactos ===== */
.info-box-text {
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-box-number {
  font-size: 1rem !important;
  font-weight: 800 !important;
}
.info-box {
  min-height: 0 !important;
  padding: 10px 8px !important;
  border-radius: 10px !important;
}
.info-box-content {
  padding: 4px 8px !important;
}

/* ===== BOTONES FILTRO FECHA — modo oscuro ===== */
[data-theme="dark"] .db2-per,
[data-theme="bank"] .db2-per {
  background: #0a1a0a !important;
  border: 2px solid #00e676 !important;
  color: #00e676 !important;
}
[data-theme="dark"] .db2-per:hover,
[data-theme="dark"] .db2-per.on,
[data-theme="bank"] .db2-per:hover,
[data-theme="bank"] .db2-per.on {
  background: #00e676 !important;
  border-color: #00e676 !important;
  color: #000 !important;
}
[data-theme="dark"] .db2-filtro input[type=text],
[data-theme="bank"] .db2-filtro input[type=text] {
  background: #0a1a0a !important;
  border: 2px solid #00e676 !important;
  color: #00e676 !important;
}
[data-theme="dark"] .db2-filtro label,
[data-theme="bank"] .db2-filtro label {
  color: #00e676 !important;
}
[data-theme="dark"] .db2-filtro i,
[data-theme="bank"] .db2-filtro i {
  color: #00e676 !important;
}
[data-theme="dark"] .db2-suc,
[data-theme="bank"] .db2-suc {
  background: #0a1a0a !important;
  border: 2px solid #00e676 !important;
  color: #00e676 !important;
}

/* ===== SELECT2 DROPDOWN global — modo oscuro ===== */
[data-theme="dark"] .select2-dropdown,
[data-theme="bank"] .select2-dropdown {
  background-color: #0a1a0a !important;
  border: 1px solid #00e676 !important;
}
[data-theme="dark"] .select2-results__option,
[data-theme="bank"] .select2-results__option {
  background-color: #0a1a0a !important;
  color: #00e676 !important;
}
[data-theme="dark"] .select2-results__option--highlighted,
[data-theme="dark"] .select2-results__option[aria-selected=true],
[data-theme="bank"] .select2-results__option--highlighted,
[data-theme="bank"] .select2-results__option[aria-selected=true] {
  background-color: #003300 !important;
  color: #00ff88 !important;
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field,
[data-theme="bank"] .select2-search--dropdown .select2-search__field {
  background-color: #0a1a0a !important;
  color: #00e676 !important;
  border: 1px solid #00e676 !important;
}