.tema-sel {
  padding: 2px 0 8px;
}
.tema-sel-t {
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tema-sel-opc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 10px;
}
.tema-card {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  font: 600 11.5px system-ui, sans-serif;
  color: #334155;
  background: #fff;
}
.tema-card:hover {
  border-color: #cbd5e1;
}
.tema-card.on {
  border-color: var(--tm-ac, #2563eb);
  box-shadow: 0 0 0 2px var(--tm-ac-s2, #dbeafe);
}
.tema-mini {
  height: 34px;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  margin-bottom: 5px;
  border: 1px solid #e2e8f0;
}
.tema-mini i {
  width: 15px;
  display: block;
  border-right: 1px solid #e2e8f0;
}
.tema-mini b {
  flex: 1;
  display: block;
  margin: 5px 5px 0 5px;
  border-radius: 4px 4px 0 0;
}
.tema-predet {
  font-weight: 500;
  color: #94a3b8;
  font-size: 10.5px;
}
html[data-tema=rojo],
html[data-tema=negro],
html[data-tema=total] {
  --tm-ac: #E52E32;
  --tm-ac-dk: #B81F23;
  --tm-ac-lt: #EF5A5E;
  --tm-ac-s: #FDECEC;
  --tm-ac-s2: #FBD9DA;
  --tm-ac-s3: #F6B8BA;
  --tm-ac-rgb:
    229,46,50;
  --tm-ac-lt-rgb:
    239,90,94;
  --color-primary: #E52E32;
  --b360-accent: #E52E32;
  --b360-accent-2: #B81F23;
  --b360-accent-soft: #F6B8BA;
}
html[data-tema=rojo] .btn-danger,
html[data-tema=negro] .btn-danger,
html[data-tema=total] .btn-danger {
  background: #991b1b;
}
html[data-tema=rojo] .toast-success,
html[data-tema=negro] .toast-success,
html[data-tema=total] .toast-success {
  background: #15803d;
}
html[data-tema=rojo] .link-ver-todas,
html[data-tema=negro] .link-ver-todas,
html[data-tema=total] .link-ver-todas {
  color: #E52E32;
}
html[data-tema=rojo] .hero-banner::before,
html[data-tema=total] .hero-banner::before,
html[data-tema=rojo] .hero-banner::after,
html[data-tema=total] .hero-banner::after {
  display: none;
}
html[data-tema=rojo] {
  --color-bg: #EFEDEB;
  --color-panel: #FFFFFF;
  --b360-line: #E7E4E1 ;
}
html[data-tema=rojo] body {
  background: #EFEDEB;
}
html[data-tema=rojo] .main {
  background-image: none;
  background-color: #EFEDEB;
}
html[data-tema=rojo] .sidebar {
  background: #fff;
}
html[data-tema=rojo] .menu-item:hover {
  background: #EFEDEB;
}
html[data-tema=rojo] .hero-banner:not(.hero-banner--rojo) {
  background-color: #E52E32;
  background-image: url(../img/tema-personas.jpg);
  background-repeat: no-repeat;
  background-size: 660px auto;
  background-position: right -49px top -118px;
  box-shadow: 0 6px 20px rgba(229, 46, 50, .25);
}
html[data-tema=rojo] .hero-badge {
  background: #141414;
  border-color: #141414;
}
html[data-tema=rojo] .kpi-card {
  background: #fff;
  color: #141414;
  border: 1px solid #E7E4E1;
  border-top: 3px solid #E52E32;
  box-shadow: none;
}
html[data-tema=rojo] .kpi-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
html[data-tema=rojo] .kpi-breakdown {
  border-top-color: #E7E4E1;
}
html[data-tema=rojo] .kpi-breakdown span {
  background: #FDECEC;
  color: #B81F23;
}
html[data-tema=rojo] .accion-btn {
  background: #fff;
  color: #141414;
  border: 1px solid #E7E4E1;
  border-left: 4px solid #E52E32;
  box-shadow: none;
}
html[data-tema=rojo] .accion-btn:hover {
  filter: none;
  background: #FDECEC;
  border-color: #E52E32;
  box-shadow: none;
}
html[data-tema=rojo] .tipo-pedido {
  background: #FDECEC;
  color: #B81F23;
}
html[data-tema=rojo] .tipo-traslado {
  background: #F1EFED;
  color: #141414;
}
html[data-tema=rojo] .tipo-compra {
  background: #EFEDEB;
  color: #444;
}
html[data-tema=negro] {
  --color-bg: #EBEBEB;
  --color-panel: #111;
  --b360-line: #E2E2E2 ;
}
html[data-tema=negro] body {
  background: #EBEBEB;
}
html[data-tema=negro] .main {
  background-image: none;
  background-color: #EBEBEB;
}
html[data-tema=negro] .sidebar {
  background: #111;
  border-right-color: #111;
  --ink: #F2F2F2;
  --ink-2: #D9D9D9;
  --ink-3: #8f8f8f;
  --surface-2: #232323;
  --line: #2a2a2a ;
}
html[data-tema=negro] .sidebar-logo {
  filter: invert(1);
}
html[data-tema=negro] .menu-item {
  color: #E9E9E9;
}
html[data-tema=negro] .menu-item:hover {
  background: #222;
}
html[data-tema=negro] .menu-item.active,
html[data-tema=negro] .mn-leaf.active {
  background: #E52E32;
  color: #fff;
}
html[data-tema=negro] .mn-leaf.active {
  font-weight: 700;
}
html[data-tema=negro] .hero-banner:not(.hero-banner--rojo) {
  background: #111;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
html[data-tema=negro] .hero-banner::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  height: 5px;
  border-radius: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(
      90deg,
      #fff 0 14px,
      #111 14px 28px);
}
html[data-tema=negro] .hero-banner::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 360px;
  height: auto;
  border-radius: 0;
  background: #E52E32 url(../img/tema-clips.jpg) -232px -113px / 660px auto no-repeat;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
html[data-tema=negro] .hero-texto,
html[data-tema=negro] .hero-badge {
  position: relative;
  z-index: 1;
}
html[data-tema=negro] .hero-badge {
  background: #111;
  border-color: #fff;
  color: #fff;
}
html[data-tema=negro] .kpi-card {
  background: #fff;
  color: #111;
  border: 1px solid #E2E2E2;
  border-left: 5px solid #E52E32;
  box-shadow: none;
}
html[data-tema=negro] .kpi-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
html[data-tema=negro] .kpi-breakdown {
  border-top-color: #E2E2E2;
}
html[data-tema=negro] .kpi-breakdown span {
  background: #111;
  color: #fff;
}
html[data-tema=negro] .accion-btn {
  background: #111;
  color: #fff;
  border: 0;
  border-left: 4px solid #E52E32;
  box-shadow: none;
}
html[data-tema=negro] .accion-btn:hover {
  filter: none;
  background: #E52E32;
  border-left-color: #111;
  box-shadow: none;
}
html[data-tema=negro] .tabla-recientes th {
  background: #111;
  color: #fff;
  border-bottom: 0;
}
html[data-tema=negro] .tabla-recientes th:first-child {
  border-radius: 8px 0 0 8px;
}
html[data-tema=negro] .tabla-recientes th:last-child {
  border-radius: 0 8px 8px 0;
}
html[data-tema=negro] .tipo-pedido {
  background: #111;
  color: #fff;
}
html[data-tema=negro] .tipo-traslado {
  background: #E9E9E9;
  color: #111;
}
html[data-tema=negro] .tipo-compra {
  background: #FDECEC;
  color: #B81F23;
}
html[data-tema=total] {
  --color-bg: #F7EDE9;
  --color-panel: #E52E32;
  --b360-line: #EADFDA ;
}
html[data-tema=total] body {
  background: #F7EDE9;
}
html[data-tema=total] .main {
  background-image: none;
  background-color: #F7EDE9;
}
html[data-tema=total] .sidebar {
  background: #E52E32;
  border-right-color: #E52E32;
  --ink: #fff;
  --ink-2: #fff;
  --ink-3: #FFD6D3;
  --surface-2: rgba(255,255,255,.16);
  --line: #EE5A5D ;
}
html[data-tema=total] .sidebar-logo {
  filter: invert(1) brightness(2);
}
html[data-tema=total] .menu-item {
  color: #fff;
}
html[data-tema=total] .menu-item:hover {
  background: rgba(255, 255, 255, .16);
}
html[data-tema=total] .menu-item.active,
html[data-tema=total] .mn-leaf.active {
  background: #fff;
  color: #E52E32;
  font-weight: 700;
}
html[data-tema=total] .chat-widget {
  background: #141414;
}
html[data-tema=total] .hero-banner:not(.hero-banner--rojo) {
  min-height: 0;
  padding: 150px 28px 18px;
  color: #141414;
  border: 1px solid #EADFDA;
  box-shadow: none;
  background-color: #E52E32;
  background-image: linear-gradient(#fff, #fff), url(../img/tema-clips.jpg);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% calc(100% - 128px), 760px auto;
  background-position: 0 128px, center -148px;
}
html[data-tema=total] .hero-badge {
  background: #141414;
  border-color: #141414;
  color: #fff;
}
html[data-tema=total] .kpi-card {
  background: #fff;
  color: #141414;
  border: 1px solid #EADFDA;
  box-shadow: none;
}
html[data-tema=total] .kpi-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
html[data-tema=total] .kpi-card:first-child {
  background: #E52E32;
  color: #fff;
  border-color: #E52E32;
}
html[data-tema=total] .kpi-breakdown {
  border-top-color: #EADFDA;
}
html[data-tema=total] .kpi-breakdown span {
  background: #FFE9E7;
  color: #B81F23;
}
html[data-tema=total] .kpi-card:first-child .kpi-breakdown {
  border-top-color: rgba(255, 255, 255, .3);
}
html[data-tema=total] .kpi-card:first-child .kpi-breakdown span {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
html[data-tema=total] .accion-btn {
  background: #fff;
  color: #141414;
  border: 1px solid #EADFDA;
  border-left: 4px solid #E52E32;
  box-shadow: none;
}
html[data-tema=total] .accion-btn:hover {
  filter: none;
  background: #FFE9E7;
  border-color: #E52E32;
  box-shadow: none;
}
html[data-tema=total] .tabla-recientes th {
  color: #B81F23;
  border-bottom: 2px solid #E52E32;
}
html[data-tema=total] .tipo-pedido {
  background: #FFE9E7;
  color: #B81F23;
}
html[data-tema=total] .tipo-traslado {
  background: #F1EFED;
  color: #141414;
}
html[data-tema=total] .tipo-compra {
  background: #F7EDE9;
  color: #444;
}
html[data-tema=rojo] .cot-columna {
  background: #F9F8F7;
  border: 1px solid #E2DFDC;
}
html[data-tema=negro] .cot-columna {
  background: #F7F7F7;
  border: 1px solid #DADADA;
}
html[data-tema=total] .cot-columna {
  background: #FDF8F6;
  border: 1px solid #EBD9D3;
}
html[data-tema=rojo] .breadcrumb-item,
html[data-tema=negro] .breadcrumb-item,
html[data-tema=total] .breadcrumb-item {
  color: #141414;
  text-decoration: none;
}
html[data-tema=rojo] .breadcrumb-item:hover,
html[data-tema=negro] .breadcrumb-item:hover,
html[data-tema=total] .breadcrumb-item:hover {
  color: #E52E32;
  text-decoration: underline;
}
html[data-tema=rojo] a.btn-outline,
html[data-tema=negro] a.btn-outline,
html[data-tema=total] a.btn-outline {
  color: #141414;
}
html[data-tema=rojo],
html[data-tema=negro],
html[data-tema=total] {
  --brand: #E52E32;
  --brand-s: #FDECEC;
  --navy: #141414;
  --c-n: #141414;
  --s-n: #F1EFED;
  --c-as: #141414;
  --s-as: #F1EFED;
  --c-ep: #141414;
  --s-ep: #F1EFED;
  --c-dv: #141414;
  --s-dv: #F1EFED;
  --c-ok: #141414;
  --s-ok: #F1EFED;
  --c-ca: #6b6b6b;
  --s-ca: #F1EFED;
  --c-at: #B81F23;
  --s-at: #FDECEC;
  --t-bor: #141414;
  --t-bors: #F1EFED;
  --t-vip: #141414;
  --t-vips: #F1EFED;
  --t-alt: #141414;
  --t-alts: #F1EFED;
  --t-r53: #141414;
  --t-r53s: #F1EFED;
  --t-urg: #B81F23;
  --t-urgs: #FDECEC;
  --p-h: #6b6b6b;
}
html[data-tema=rojo] .tkt-navy,
html[data-tema=negro] .tkt-navy,
html[data-tema=total] .tkt-navy {
  background: #141414;
}