/* ============================================================
   TEMA SMMEUPHORIA - NEGRO Y VERDE
   ------------------------------------------------------------
   Archivo propio, NO es parte de SmartPanel. Se carga al final
   para imponerse sobre el diseno de la version 4.2.

   Se aplica SIEMPRE, sin depender de la clase theme-dark: esa
   clase la agrega JavaScript segun localStorage y no estaba
   activa, por eso las reglas anteriores no tenian efecto.

   Verde #09fe47 = color dominante del logo.
   Para cambiar la paleta, editar solo estas variables.
   ============================================================ */

:root {
  color-scheme: dark;   /* la pagina ES oscura: el navegador no debe forzar colores */
  --brand: #09fe47;                        /* verde del logo */
  --brand-soft: rgba(9, 254, 71, .70);     /* verde atenuado (texto secundario) */
  --brand-line: rgba(9, 254, 71, .38);     /* bordes suaves */
  --brand-glow: rgba(9, 254, 71, .12);     /* fondos sutiles */
  --brand-on: #04140a;                     /* texto sobre fondo verde */
  --bg: #000000;                           /* fondo principal */
  --bg-card: #070b07;                      /* superficies elevadas */
}

/* ============ FONDOS EN NEGRO ============ */
html, body,
body.antialiased,
.app-content,
.page,
.page-main,
.page-content,
.content,
.main-content,
.wrapper {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--brand) !important;
}

/* Barra lateral y encabezado */
.navbar-side,
.navbar-side.js-sidebar,
.js-sidebar,
.header-wrap,
.header,
.header.top,
.navbar,
.navbar-vertical,
.theme-lawrencium .header.top {
  background: var(--bg) !important;
  background-image: none !important;
  border-color: var(--brand-line) !important;
}

/* Tarjetas, paneles, modales y desplegables */
.card, .card-body, .card-header, .card-footer,
.modal-content, .modal-header, .modal-body, .modal-footer,
.dropdown-menu, .popover, .tooltip-inner,
.list-group-item, .accordion, .panel,
.order_resume, .order_resume .service-details,
.tabs-list, .tab-content, .nav-tabs {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-color: var(--brand-line) !important;
  color: var(--brand) !important;
}
body.theme-dark .order_resume,
body.theme-dark .order_resume .service-details {
  background: var(--bg-card) !important;
  border-color: var(--brand-line) !important;
}

/* Tablas */
.table, .table td, .table th, .table thead th,
.table-responsive, .table-hover tbody tr {
  background: transparent !important;
  color: var(--brand) !important;
  border-color: var(--brand-line) !important;
}
.table-hover tbody tr:hover { background: var(--brand-glow) !important; }

/* ============ TEXTO EN VERDE ============ */
body, p, span, div, li, td, th, small, strong, b,
h1, h2, h3, h4, h5, h6,
label, .form-label, .custom-control-label,
.card-title, .page-title h1, .page-title .h1,
.text-muted, .text-secondary, .text-default, .text-dark,
.dropdown-item, .nav-link, .navbar-heading {
  color: var(--brand) !important;
}
.text-muted, .text-secondary, small, .navbar-heading {
  color: var(--brand-soft) !important;
}
i, .icon, .fa, .fe, .icon-fa { color: inherit !important; }

/* Enlaces */
a, a:visited { color: var(--brand) !important; }
a:not(.btn):not(.nav-link):not(.active):hover,
a:not(.btn):not(.nav-link):not(.active):focus { color: #fff !important; }

/* ============ CAMPOS DE FORMULARIO ============ */
.form-control, .form-control.square, .custom-select,
select, select.form-control, textarea, textarea.form-control,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], .input-search-service {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
}
.form-control:focus, .custom-select:focus, textarea:focus, select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .2rem rgba(9, 254, 71, .3) !important;
  background: transparent !important;
  color: var(--brand) !important;
}
.form-control::placeholder { color: rgba(9, 254, 71, .45) !important; }
/* Las opciones del desplegable las dibuja el sistema: fondo solido */
select option, .custom-select option {
  background-color: #000 !important;
  color: var(--brand) !important;
}

/* ============ BOTONES ============ */
.btn-primary, .btn-primary:not(:disabled):not(.disabled),
.theme-lawrencium .btn-primary {
  background: var(--brand) !important;
  background-image: none !important;
  border-color: var(--brand) !important;
  color: var(--brand-on) !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}
/* Botones secundarios y de precio: contorno verde */
.btn-secondary, .btn-info, .btn-info.total_charge,
.btn-outline-primary, .btn-light, .btn-default {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
}
.btn-secondary:hover, .btn-info:hover,
.btn-outline-primary:hover, .btn-light:hover {
  background: var(--brand) !important;
  color: var(--brand-on) !important;
}

/* ============ PESTANAS ============ */
.tabs-list .nav-tabs .nav-link.active,
.tabs-list .nav-tabs li > a.active,
.nav-tabs .nav-link.active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--brand-on) !important;
  font-weight: 600;
}
.tabs-list .nav-tabs .nav-link,
.nav-tabs .nav-link { color: var(--brand) !important; }

/* ============ MENU LATERAL ============ */
.navbar-side .nav-link.active,
.navbar-side .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
  background: var(--brand) !important;
  color: var(--brand-on) !important;
  font-weight: 600;
}
.navbar-side .nav-link.active i,
.navbar-side .nav-link.active .icon { color: var(--brand-on) !important; }
.navbar-side .nav-link:hover { background: var(--brand-glow) !important; }

/* ============ INSIGNIAS ============ */
.badge, .badge-default, .badge-primary, .badge.bg-indigo,
.bg-indigo, .bg-purple, .user-balance,
.service-min-val, .service-max-val, .service-id-title {
  background: var(--brand-glow) !important;
  color: var(--brand) !important;
  border: 1px solid var(--brand-line) !important;
}
.badge-primary, .bg-primary { background: var(--brand) !important; color: var(--brand-on) !important; }

/* ============ PAGINACION E INTERRUPTORES ============ */
.page-item.active .page-link,
.theme-lawrencium .page-item.active .page-link {
  background: var(--brand) !important;
  background-image: none !important;
  border-color: var(--brand) !important;
  color: var(--brand-on) !important;
}
.page-link { background: transparent !important; color: var(--brand) !important; border-color: var(--brand-line) !important; }
.custom-switch-input:checked ~ .custom-switch-indicator,
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* ============ SEPARADORES ============ */
.border-line { border-color: var(--brand) !important; background: var(--brand) !important; }
hr, .dropdown-divider { border-color: var(--brand-line) !important; }

/* ============ LEGIBILIDAD SOBRE FONDO VERDE ============
   Todo lo que va DENTRO de un elemento con fondo verde debe
   usar el color oscuro, o quedaria verde sobre verde.
   ======================================================== */
.btn-primary, .btn-primary *,
.badge-primary, .badge-primary *,
.bg-primary, .bg-primary *,
.nav-link.active, .nav-link.active *,
.navbar-side .nav-link.active, .navbar-side .nav-link.active *,
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active *,
.tabs-list .nav-tabs li > a.active, .tabs-list .nav-tabs li > a.active *,
.page-item.active .page-link, .page-item.active .page-link *,
.btn-secondary:hover *, .btn-info:hover *, .btn-outline-primary:hover * {
  color: var(--brand-on) !important;
}

/* ============ ESTADOS: conservan su color ============
   Errores, avisos y estados de orden son informacion, no
   decoracion. Se mantienen legibles sobre negro.
   ==================================================== */
.alert-danger, .text-danger, .badge-danger, .bg-danger,
.alert-danger *, .invalid-feedback {
  color: #ff5c5c !important;
}
.alert-warning, .text-warning, .badge-warning, .bg-warning,
.alert-warning * {
  color: #ffc107 !important;
}
.badge-danger, .bg-danger  { background: rgba(255, 92, 92, .15) !important; border-color: rgba(255, 92, 92, .45) !important; }
.badge-warning, .bg-warning { background: rgba(255, 193, 7, .15) !important; border-color: rgba(255, 193, 7, .45) !important; }
.alert-danger  { background: rgba(255, 92, 92, .1) !important; border-color: rgba(255, 92, 92, .4) !important; }
.alert-warning { background: rgba(255, 193, 7, .1) !important; border-color: rgba(255, 193, 7, .4) !important; }

/* El campo con error debe notarse */
.is-invalid, .form-control.is-invalid { border-color: #ff5c5c !important; }

/* ============================================================
   CORRECCIONES
   ============================================================ */

/* ---- 1. Texto NEGRO sobre los fondos verdes ----
   Se usan selectores mas especificos que los del tema base,
   que forzaba blanco y ganaba por especificidad.            */
body .btn.btn-primary,
body .btn.btn-primary *,
body .btn-primary.btn-lg,
body .btn-primary.btn-block,
body .btn-primary.btn-spinner-border,
body .btn-primary.btn-spinner-border *,
body .tabs-list .nav-tabs li > a.active,
body .tabs-list .nav-tabs li > a.active *,
body .tabs-list .nav-tabs .nav-link.active,
body .tabs-list .nav-tabs .nav-link.active *,
body .nav-tabs .nav-link.active,
body .nav-tabs .nav-link.active *,
body .navbar-side .nav-link.active,
body .navbar-side .nav-link.active *,
body .navbar-nav .nav-link.active,
body .navbar-nav .nav-link.active *,
body .page-item.active .page-link,
body .badge-primary, body .badge-primary *,
body .bg-primary, body .bg-primary * {
  color: #000 !important;
  text-shadow: none !important;
}
body .btn.btn-primary i,
body .tabs-list .nav-tabs li > a.active i,
body .navbar-side .nav-link.active i,
body .navbar-side .nav-link.active .icon {
  color: #000 !important;
}

/* ---- 2. Centrar el contenido de las insignias ----
   El borde que agrega este archivo desplazaba el numero
   (por ejemplo el contador de Tickets del menu).           */
.badge,
.badge-default, .badge-warning, .badge-danger,
.navbar-side .badge,
.user-balance,
.service-min-val, .service-max-val, .service-id-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  padding: .35em .6em !important;
  min-width: 1.6em;
  vertical-align: middle;
}

/* ---- 3. Colores de estado de las ordenes ----
   Cada estado vuelve a tener su color. Es informacion, no
   decoracion: sin esto no se distingue una orden completada
   de una cancelada. Se adaptan al fondo negro con fondo
   tenue, texto brillante y borde del mismo tono.           */
.badge.bg-green,   .bg-green   { background: rgba(9,254,71,.15)   !important; color: #09fe47 !important; border-color: rgba(9,254,71,.5)   !important; }
.badge.bg-lime,    .bg-lime    { background: rgba(160,255,60,.15) !important; color: #a0ff3c !important; border-color: rgba(160,255,60,.5) !important; }
.badge.bg-blue,    .bg-blue    { background: rgba(70,150,255,.18) !important; color: #6ba8ff !important; border-color: rgba(70,150,255,.5) !important; }
.badge.bg-cyan,    .bg-cyan    { background: rgba(45,212,230,.18) !important; color: #45dcf0 !important; border-color: rgba(45,212,230,.5) !important; }
.badge.bg-indigo,  .bg-indigo  { background: rgba(140,130,255,.18)!important; color: #a99cff !important; border-color: rgba(140,130,255,.5)!important; }
.badge.bg-purple,  .bg-purple  { background: rgba(190,120,255,.18)!important; color: #cb9bff !important; border-color: rgba(190,120,255,.5)!important; }
.badge.bg-pink,    .bg-pink    { background: rgba(255,110,180,.18)!important; color: #ff8ec4 !important; border-color: rgba(255,110,180,.5)!important; }
.badge.bg-red,     .bg-red     { background: rgba(255,92,92,.18)  !important; color: #ff7b7b !important; border-color: rgba(255,92,92,.5)  !important; }
.badge.bg-yellow-lt, .bg-yellow-lt,
.badge.bg-yellow,  .bg-yellow  { background: rgba(255,200,40,.18) !important; color: #ffce4d !important; border-color: rgba(255,200,40,.5) !important; }
.badge.bg-secondary, .bg-secondary { background: rgba(160,170,180,.18)!important; color: #b6c0cb !important; border-color: rgba(160,170,180,.5)!important; }
.badge.bg-orange,  .bg-orange  { background: rgba(255,150,60,.18) !important; color: #ffa64d !important; border-color: rgba(255,150,60,.5) !important; }

/* Estas insignias de estado llevan texto propio: no heredar el negro */
.badge.bg-green *, .badge.bg-lime *, .badge.bg-blue *, .badge.bg-cyan *,
.badge.bg-indigo *, .badge.bg-purple *, .badge.bg-pink *, .badge.bg-red *,
.badge.bg-yellow-lt *, .badge.bg-secondary * { color: inherit !important; }


/* ---- Texto negro sobre verde: maxima prioridad ----
   Se cubren todos los estados (hover, focus, active) y se
   antepone html body para superar cualquier regla del tema.  */
html body button.btn-primary,
html body button.btn-primary *,
html body .btn.btn-primary,
html body .btn.btn-primary *,
html body .btn-primary:hover, html body .btn-primary:hover *,
html body .btn-primary:focus, html body .btn-primary:focus *,
html body .btn-primary:active, html body .btn-primary:active *,
html body .btn-primary.btn-block, html body .btn-primary.btn-block *,
html body .btn-primary.btn-lg, html body .btn-primary.btn-lg *,
html body .btn-spinner-border, html body .btn-spinner-border *,
html body .tabs-list .nav-tabs a.active,
html body .tabs-list .nav-tabs a.active *,
html body .tabs-list .nav-tabs a.active:hover,
html body .tabs-list .nav-tabs a.active:focus,
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-link.active *,
html body .nav-tabs .nav-link.active:hover,
html body .nav-tabs .nav-link.active:focus,
html body .navbar-side .nav-link.active,
html body .navbar-side .nav-link.active *,
html body .navbar-side .nav-link.active:hover,
html body .navbar-side .nav-link.active:focus {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}
/* El boton primario mantiene el verde tambien al pasar el mouse */
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* ============================================================
   PRIORIDAD MAXIMA
   El tema base usa selectores de dos clases con !important
   (por ejemplo .btn-primary.btn-lighten-5), que superan en
   especificidad a los de este archivo. Se repite la clase para
   subir el peso: cuatro repeticiones dan (0,4,x) y ganan sin
   recurrir a estilos en linea.
   ============================================================ */

/* ---- Texto negro sobre los fondos verdes ---- */
html body .btn-primary.btn-primary.btn-primary.btn-primary,
html body .btn-primary.btn-primary.btn-primary.btn-primary *,
html body .btn-primary.btn-primary.btn-primary.btn-primary:hover,
html body .btn-primary.btn-primary.btn-primary.btn-primary:hover *,
html body .btn-primary.btn-primary.btn-primary.btn-primary:focus,
html body .btn-primary.btn-primary.btn-primary.btn-primary:focus *,
html body .btn-primary.btn-primary.btn-primary.btn-primary:active,
html body .btn-primary.btn-primary.btn-primary.btn-primary:active *,
html body .tabs-list .nav-tabs a.active.active.active.active,
html body .tabs-list .nav-tabs a.active.active.active.active *,
html body .tabs-list .nav-tabs a.active.active.active.active:hover,
html body .tabs-list .nav-tabs a.active.active.active.active:focus,
html body .navbar-side .nav-link.active.active.active.active,
html body .navbar-side .nav-link.active.active.active.active *,
html body .navbar-nav .nav-link.active.active.active.active,
html body .navbar-nav .nav-link.active.active.active.active * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
/* El fondo verde se mantiene tambien al pasar el mouse */
html body .btn-primary.btn-primary.btn-primary.btn-primary,
html body .btn-primary.btn-primary.btn-primary.btn-primary:hover,
html body .btn-primary.btn-primary.btn-primary.btn-primary:focus,
html body .btn-primary.btn-primary.btn-primary.btn-primary:active {
  background: var(--brand) !important;
  background-color: var(--brand) !important;
  background-image: none !important;
  border-color: var(--brand) !important;
}


/* ---- Contador del menu lateral: estilo original, centrado ----
   Solo se corrige el centrado. No se toca color, tamano ni forma:
   el borde que agregaba la regla general de .badge era lo que
   descuadraba el numero.                                        */
html body .navbar-side .badge,
html body .navbar-nav .badge,


/* ============================================================
   CENTRADO DE TODOS LOS RECUADROS
   El borde de 1px que agrega este archivo desplazaba el
   contenido: nombre de la categoria, min/max, contador de
   tickets, etc. Se centra el contenido sin tocar los colores.
   ============================================================ */

/* Insignias y valores con recuadro: centrado real por flex */
html body .badge,
html body .service-min-val,
html body .service-max-val,
html body .service-id-title,
html body .user-balance {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: .4em .6em !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Campos y desplegables: texto centrado verticalmente.
   El tema fija height con line-height alto y el texto quedaba
   pegado arriba al sumarse el borde nuevo.                    */
/* Las areas de texto conservan su altura propia */
html body textarea.form-control { height: auto !important; line-height: 1.4 !important; }


/* ---- Botones: centrar SIN pegar el icono al texto ----
   flex colapsa los espacios en blanco entre hijos, por eso el
   icono quedaba pegado al nombre. Se restituye con gap.      */
html body .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  line-height: 1.2 !important;
}
html body .btn-block { display: flex !important; width: 100% !important; }
/* Los botones sociales llevan icono + texto: mismo criterio */
html body .social-btn .btn,
html body .brand-category {
  gap: .45em !important;
  white-space: nowrap !important;
}

/* ---- Contador del menu lateral ----
   El nav-link es flex y no alineaba verticalmente al hijo, por
   eso el numero quedaba arriba. align-self lo centra.        */
html body .navbar-side .nav-link,
html body .navbar-nav .nav-link {
  display: flex !important;
  align-items: center !important;
}

/* ---- Evitar el salto al cargar la tipografia de iconos ----
   Los iconos son webfont: hasta que la fuente baja ocupan otro
   ancho y al llegar reacomodan la fila. Reservar el espacio
   desde el principio elimina ese salto.                      */
html body .btn i,
html body .btn .fa,
html body .btn .fe,
html body .nav-link i,
html body .nav-link .fa,
html body .nav-link .fe,
html body .card-title i {
  display: inline-block !important;
  width: 1.15em !important;
  min-width: 1.15em !important;
  text-align: center !important;
  line-height: inherit !important;
  flex: 0 0 auto !important;
}

/* ============================================================
   AJUSTES SEGUN CAPTURAS DEL USUARIO
   ============================================================ */

/* ---- 1. Quitar la linea bajo las pestanas ----
   .nav-tabs trae border-bottom de Bootstrap y quedaba una raya
   verde suelta debajo de "Orden unica / Orden masiva".        */
html body .tabs-list .nav-tabs,
html body .nav-tabs,
html body .tabs-list {
  border-bottom: none !important;
  box-shadow: none !important;
}
html body .card-header { border-bottom: none !important; }

/* ---- 2. Saldo del encabezado en verde ----
   Usa bg-indigo, la misma clase que el estado "reembolsada",
   asi que la regla de estados lo pintaba violeta. Al ser saldo
   y no un estado, se excluye y va en verde.                   */
html body .user-balance,
html body .badge.bg-indigo.user-balance,
html body small.user-balance {
  background: var(--brand) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: none !important;
  font-weight: 600 !important;
}

/* ---- 3. Contador de Tickets: verde y centrado ----
   Lleva badge-warning, que la regla de avisos pintaba de ambar.
   No es un aviso sino un contador, asi que vuelve al verde del
   tema anterior. Centrado con especificidad alta.             */

/* ---- 4. Casilla de confirmacion ----
   Salia como un cuadro blanco solido. Se integra al tema:
   contorno verde sin marcar, verde solido al marcarse.        */
html body .custom-control-label::before,
html body .custom-checkbox .custom-control-label::before {
  background-color: transparent !important;
  border: 2px solid var(--brand) !important;
  box-shadow: none !important;
}
html body .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
html body .custom-control-input:checked ~ .custom-control-label::after {
  filter: brightness(0) !important;   /* la tilde en negro sobre el verde */
}

/* ---- Campos: texto centrado verticalmente ----
   El min-height anterior hacia el campo mas alto que su
   contenido y el texto quedaba pegado arriba. Con altura
   automatica y padding simetrico el texto queda centrado.   */
html body .form-control:not(textarea):not(.ajaxSearchService):not(.selectized),
html body .custom-select:not(.ajaxSearchService):not(.selectized),
html body select.form-control:not(.ajaxSearchService):not(.selectized),
html body input.form-control:not(.selectize-input) {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.5 !important;
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}
html body textarea.form-control {
  height: auto !important;
  line-height: 1.5 !important;
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}

/* ---- Saldo del encabezado centrado ----
   Lleva d-block, que peleaba con el inline-flex y dejaba el
   texto descentrado. Se usa flex con centrado real.          */
html body .user-balance,
html body small.user-balance,
html body .badge.bg-indigo.user-balance {
  display: block !important;          /* en su propia linea, debajo del nombre */
  width: -moz-fit-content !important;
  width: fit-content !important;      /* ajusta al contenido, no ancho completo */
  padding: .35em .7em !important;
  line-height: 1.2 !important;
  text-align: center !important;      /* las dos lineas (USD/ARS) centradas dentro */
  margin-top: 3px !important;
  min-height: 0 !important;
  height: auto !important;
}

/* ---- El logo debe conservar su color ----
   La imagen es verde (verificado: 100% de los pixeles
   visibles). Se anula cualquier filtro que pudiera alterarla. */
html body .navbar-brand-logo,
html body .mobile-logo img,
html body .navbar-brand img,
html body img.navbar-brand-logo {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}


/* ============================================================
   LOGO: conservar su color en modo oscuro
   admin-core.css:21457 aplica
       body.theme-dark .navbar-brand-logo {
         filter: brightness(0) invert(1);
       }
   que pinta el logo de negro y lo invierte a blanco solido. El
   tema asume que el logo es oscuro; este es verde y no hace
   falta. Como esa regla usa dos clases, aqui se repiten para
   superarla en especificidad.
   ============================================================ */
html body.theme-dark .navbar-brand-logo.navbar-brand-logo,
html body.auto-theme-dark .navbar-brand-logo.navbar-brand-logo,
html body .navbar-brand-logo.navbar-brand-logo,
html body .mobile-logo img.navbar-brand-logo,
html body .navbar-brand img {
  -webkit-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}


/* ---- Pestanas alineadas entre si ----
   'Orden unica' y 'Orden masiva' quedaban a distinta altura por
   no compartir linea base. Se alinean con flex.               */
html body .tabs-list .nav-tabs {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-wrap: wrap !important;
}
html body .tabs-list .nav-tabs > li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
html body .tabs-list .nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4em !important;
  line-height: 1.2 !important;
  padding: .5rem .9rem !important;
  border-radius: 999px !important;
}

html body /* Aire arriba y abajo de las pestanas: estaban pegadas al borde
   superior del recuadro que las contiene. */
.card-header:has(.tabs-list),
html body .tabs-list {
  padding-top: .9rem !important;
  padding-bottom: .9rem !important;
}
.tabs-list .nav-tabs { margin-top: 0 !important; margin-bottom: 0 !important; }


/* --- Flechas de los desplegables centradas ---
   Bootstrap dibuja la flecha como imagen de fondo posicionada
   respecto de la altura original. Al cambiar el alto de los
   campos quedaba corrida: se ancla al centro vertical.        */
html body select.form-control, select.custom-select {
  background-position: right .8rem center !important;
  background-size: 9px 11px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.2rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* La flecha del buscador la dibuja selectize con un pseudo-elemento */

/* --- Misma distancia arriba y abajo de las pestanas ---
   Arriba manda el padding del encabezado; abajo se sumaba
   ademas el del cuerpo. Se anula el de arriba del cuerpo para
   que ambas separaciones sean iguales.                        */
html body .card-header { padding: 1rem 1.25rem !important; }
html body .tabs-list { padding: 0 !important; }
html body .card > .card-body { padding-top: 1rem !important; }

/* Buscador (selectize): SOLO colores.
   No se toca display, position ni altura: el plugin calcula la
   posicion del desplegable a partir del alto del campo, y
   alterarlo lo dejaba desalineado y sin cerrarse.            */
.selectize-input {
  background: transparent !important;
  border: 1px solid #09fe47 !important;
  color: #09fe47 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.selectize-input input, .selectize-input .item {
  color: #09fe47 !important;
  -webkit-text-fill-color: #09fe47 !important;
  background: transparent !important;
}
.selectize-input.focus { border-color: #09fe47 !important; box-shadow: 0 0 0 .2rem rgba(9,254,71,.25) !important; }
.selectize-dropdown { background: #000 !important; border-color: #09fe47 !important; color: #09fe47 !important; }
.selectize-dropdown .option, .selectize-dropdown .optgroup-header { background: #000 !important; color: #09fe47 !important; }
.selectize-dropdown .option.active, .selectize-dropdown .option:hover { background: #09fe47 !important; color: #000 !important; }
.selectize-control.single .selectize-input:after { border-color: #09fe47 transparent transparent transparent !important; }
.selectize-control.single .selectize-input.dropdown-active:after { border-color: transparent transparent #09fe47 transparent !important; }

/* El desplegable como continuacion del campo: mismo ancho, sin
   borde duplicado arriba y esquinas que empalman. Solo borde,
   radio y margen: no se toca position, display ni altura. */
.selectize-dropdown {
  border: 1px solid #09fe47 !important;
  border-top: 0 none !important;
  border-radius: 0 0 .25rem .25rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.6) !important;
}
.selectize-input.dropdown-active {
  border-radius: .25rem .25rem 0 0 !important;
  border-bottom-color: rgba(9,254,71,.35) !important;
}
.selectize-dropdown-content { max-height: 260px !important; }
.selectize-dropdown .option {
  padding: .5rem .75rem !important;
  border-bottom: 1px solid rgba(9,254,71,.15) !important;
}
.selectize-dropdown .option:last-child { border-bottom: 0 none !important; }

/* El contenedor que crea selectize hereda las clases form-control y
   custom-select del <select> original. Sin esto recibia borde y flecha
   propios, duplicando la caja sobre el campo real que va adentro. */
.selectize-control.form-control,
.selectize-control.custom-select,
div.form-control.ajaxSearchService,
.selectize-control {
  border: 0 none !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
}

/* --- Buscador: sin caja interna y a la misma altura ---
   La regla general de campos alcanzaba al <input> que selectize
   crea dentro, dibujandole un borde propio: ese era el recuadro
   chico alrededor del texto. Se lo deja limpio y se iguala la
   altura del campo a la de Categoria y Servicio.
   La altura queda FIJA (no cambia con el texto), que es lo que
   permite al plugin posicionar bien su desplegable.            */
.selectize-input input,
.selectize-input input[type="text"],
.selectize-control input[type="text"] {
  border: 0 none !important;
  outline: 0 none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.5 !important;
}
.selectize-input {
  padding: .55rem .75rem !important;
  line-height: 1.5 !important;
  min-height: calc(1.5em + 1.1rem + 2px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* --- Curvatura del buscador igual a la de los campos nativos ---
   .form-control usa border-radius: 10px; el buscador tenia 6px
   y 4px al abrirse. Se unifica en 10px, con las esquinas
   inferiores rectas mientras el desplegable esta abierto.    */
.selectize-input,
.form-control.ajaxSearchService .selectize-input {
  border-radius: 10px !important;
}
.selectize-input.dropdown-active,
.form-control.ajaxSearchService .selectize-input.dropdown-active {
  border-radius: 10px 10px 0 0 !important;
}
.selectize-dropdown {
  border-radius: 0 0 10px 10px !important;
}


/* --- El servicio elegido no debe desbordar el buscador ---
   El nowrap estaba en el contenedor, pero el texto vive en un
   .item hijo que no heredaba el recorte y se salia de la caja. */
.selectize-input > .item,
.selectize-input .item {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.selectize-input {
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}
.selectize-input.has-items > .item { min-width: 0 !important; }


/* ============================================================
   ESQUINAS REDONDEADAS EN LOS BLOQUES
   Se aplica en todos los dispositivos.
   ============================================================ */
html body .card,
html body .order_resume,
html body .modal-content,
html body .tabs-list,
html body .alert,
html body .list-group,
html body .table-responsive {
  border-radius: 14px !important;
  overflow: hidden !important;
}
/* El encabezado y el pie heredan la curvatura del bloque */
html body .card > .card-header:first-child { border-radius: 14px 14px 0 0 !important; }
html body .card > .card-footer:last-child  { border-radius: 0 0 14px 14px !important; }
/* El resumen del servicio lleva su propio recuadro interno */
html body .order_resume .service-details { border-radius: 10px !important; }

/* ============================================================
   SOLO EN TELEFONO: el fondo de los bloques se aclara para que
   se distinga del fondo negro de la pagina. En pantallas
   grandes se mantiene el verde muy oscuro original.
   ============================================================ */
@media (max-width: 767.98px) {
  :root {
    --bg-card: #0a140a;      /* verde oscuro apenas perceptible: se despega
                                del fondo sin aclarar de mas */
  }
  html body .card,
  html body .order_resume,
  html body .modal-content,
  html body .card-header,
  html body .card-body,
  html body .card-footer,
  html body .tabs-list,
  html body .tab-content {
    background: var(--bg-card) !important;
  }
  html body .card {
    border: 1px solid rgba(9, 254, 71, .22) !important;
  }
  html body .order_resume .service-details {
    background: rgba(0, 0, 0, .35) !important;
  }
}

/* --- Resumen del servicio: separacion pareja en telefono ---
   'Radio por 1000' y 'Tiempo promedio' son columnas completas con
   margen inferior; min y max son medias columnas sin margen,
   porque en escritorio van lado a lado. Al apilarse en telefono
   quedaban pegadas entre si. Se les da el mismo espacio.      */
@media (max-width: 767.98px) {
  html body .order_resume .row > [class*="col-"] {
    margin-bottom: 20px !important;
  }
  html body .order_resume .row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
}

/* --- Contorno en los botones de metodos de pago ---
   Acotado a section.add-funds para no afectar las pestanas de
   otras pantallas (orden unica/masiva, etc.). */
html body .add-funds .tabs-list .nav-tabs > li > a {
  border: 1px solid var(--brand-line) !important;
  border-radius: 999px !important;
}
@media (hover: hover) {
  html body .add-funds .tabs-list .nav-tabs > li > a:hover {
    border-color: var(--brand) !important;
    background: var(--brand-glow) !important;
  }
}
/* En tactil, tras tocar un metodo el navegador deja :hover y :focus
   activos y el boton quedaba oscurecido hasta tocar otra parte. */
html body .add-funds .tabs-list .nav-tabs > li > a:focus:not(.active),
html body .add-funds .tabs-list .nav-tabs > li > a:not(.active):hover {
  outline: 0 !important;
}
@media (hover: none) {
  html body .add-funds .tabs-list .nav-tabs > li > a:not(.active):hover,
  html body .add-funds .tabs-list .nav-tabs > li > a:not(.active):focus {
    background: transparent !important;
    border-color: var(--brand-line) !important;
  }
}
html body .add-funds .tabs-list .nav-tabs > li > a.active {
  border-color: var(--brand) !important;
}


/* --- 2. Caja de Fondos del menu movil ---
   Lleva las clases bg-indigo y text-white del tema, y la regla de
   colores de estado la pintaba violeta. Es el saldo, no un estado. */
html body .navbar-side .nav-link.bg-indigo.bg-indigo,
html body .navbar-nav .nav-link.bg-indigo.bg-indigo {
  background: var(--brand) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: none !important;
}


/* --- 4. Iconos de las tarjetas de estadisticas ---
   El icono quedaba corrido dentro del cuadrado (.stamp). */
html body .stamp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .stamp i { line-height: 1 !important; }

/* --- 5. Titulos de tarjeta alineados (Ordenes recientes, etc.) --- */
html body .card-header .card-title {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4em;
  line-height: 1.3 !important;
}

/* Algunos glifos (fe-list, fe-shopping-cart) traen un margen lateral
   propio y quedaban apenas corridos dentro del cuadrado. Caja fija de
   1em centrada para normalizar cualquier icono. */
html body .stamp i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  text-align: center !important;
}

/* ============================================================
   CONTADOR DEL MENU (Tickets) - REGLA UNICA
   Antes habia cuatro reglas apiladas de distintos intentos y la
   combinacion (line-height 22px de una, font-size 11px de otra)
   dejaba el digito corrido. El centrado sale del padding
   simetrico: sin altura fija, la caja abraza al numero por igual
   en las cuatro direcciones.
   ============================================================ */
html body .navbar-side .nav-link .badge.badge.badge,
html body .navbar-nav .nav-link .badge.badge.badge,
html body .nav-link .badge.badge-warning.badge-warning {
  background: var(--brand) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 5px 8px !important;
  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

/* --- Ordenes recientes (estadisticas) ---
   La fila de graficos esta directo dentro de la tarjeta, sin
   card-body, y los margenes negativos de .row la corrian
   respecto del titulo. Se anulan y se da un relleno simetrico,
   asi las cajas internas quedan centradas y alineadas con el
   encabezado. */
html body .charts > .card > .row {
  margin: 0 !important;
  padding: 0 .75rem .75rem !important;
}
html body .charts > .card > .row > [class*="col-"] {
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  margin-bottom: .75rem !important;
}
html body .charts > .card > .card-header {
  padding: 1rem 1.25rem .75rem !important;
}

/* --- Encabezado: selector de idioma y menu del avatar --- */

/* Bandera mas grande (flag-icon dimensiona por font-size) */
html body .navbar .flag-icon,
html body .header .flag-icon,
html body .nav-link .flag-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}


/* Recuadro azul al tocar el avatar en movil: es el contorno de
   foco del navegador mas el resaltado de toque. Fuera de los
   enlaces del encabezado. */
html body .navbar .nav-link,
html body .header .nav-link,
html body .navbar a,
html body .header a {
  -webkit-tap-highlight-color: transparent !important;
}
html body .navbar .nav-link:focus,
html body .navbar .nav-link:focus-visible,
html body .header .nav-link:focus,
html body .header .nav-link:focus-visible,
html body a.dropdown-toggle:focus,
html body a.dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* ============================================================
   MENU DEL AVATAR (Perfil / Cerrar sesion) - REGLA UNICA
   Tras tres intentos con flex, el icono y el texto seguian sin
   compartir centro: las cajas se centraban pero los glifos no.
   Tecnica clasica en su lugar: fila de altura fija con
   line-height igual a la altura, icono en linea sobre la MISMA
   linea de texto. Al compartir baseline se alinean como
   tipografia, no como cajas.
   ============================================================ */
html body .dropdown-menu .dropdown-item.dropdown-item {
  display: block !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 1.1rem !important;
  text-align: left !important;
  white-space: nowrap !important;
}
html body .dropdown-menu .dropdown-item.dropdown-item i,
html body .dropdown-menu .dropdown-item.dropdown-item .dropdown-icon,
html body .dropdown-menu .dropdown-item.dropdown-item .flag-icon {
  display: inline-block !important;
  width: 1.2em !important;
  height: auto !important;
  line-height: inherit !important;
  font-size: 1.05em !important;
  text-align: center !important;
  vertical-align: baseline !important;
  margin: 0 .4em 0 0 !important;
  float: none !important;
}

/* --- Equivalente en pesos: un solo aspecto en todo el panel ---
   La referencia es el de las tarjetas de estadisticas: verde de
   marca, un poco mas chico que el monto en dolares, seminegrita. */
html body .ars-hint {
  /* Hereda el formato del monto en dolares que acompana: mismo
     tamano, peso y color en cada contexto. Asi en las tarjetas es
     verde grande, y sobre la pildora verde del saldo sale en negro
     (antes forzaba verde y quedaba verde sobre verde: invisible). */
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  font-weight: inherit !important;
  font-size: 1em !important;
  white-space: nowrap !important;
}

/* En las tarjetas de estadisticas el equivalente vuelve al tamano
   reducido que tenia (pedido del usuario): un poco mas chico y
   tenue que el USD. En el resto del panel sigue heredando. */
html body .number .ars-hint {
  font-size: 85% !important;
  opacity: .8 !important;
  font-weight: 600 !important;
}

/* ============================================================
   FUENTE ESTILO iPHONE (San Francisco / sistema de Apple)
   En dispositivos Apple se ve San Francisco, la fuente nativa
   del iPhone; en Android/PC cae a su fuente de sistema (Segoe,
   Roboto), que da el mismo aire limpio. No se toca la fuente de
   los iconos (feather/tabler): esos declaran su propia familia
   directamente y ganan siempre.
   ============================================================ */
html body,
html body p, html body span, html body div, html body a, html body li,
html body td, html body th, html body label, html body small, html body strong, html body b,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body input, html body select, html body textarea, html body button,
html body .form-control, html body .btn, html body .card-title, html body .nav-link,
html body .dropdown-item, html body .page-title, html body .navbar-heading {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* --- Popover de info (drip-feed y similares): al tema negro/verde --- */
html body .popover {
  background: #070b07 !important;
  border: 1px solid rgba(9,254,71,.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
html body .popover .popover-header {
  background: #070b07 !important;
  color: #09fe47 !important;
  border-bottom: 1px solid rgba(9,254,71,.25) !important;
  font-weight: 700 !important;
}
html body .popover .popover-body,
html body .popover .popover-body * {
  color: #cfe9d6 !important;
}
/* La flecha del popover, del color del fondo/borde */
html body .popover .arrow::after { border-right-color: #070b07 !important; border-left-color: #070b07 !important; border-top-color: #070b07 !important; border-bottom-color: #070b07 !important; }
html body .popover .arrow::before { border-right-color: rgba(9,254,71,.4) !important; border-left-color: rgba(9,254,71,.4) !important; border-top-color: rgba(9,254,71,.4) !important; border-bottom-color: rgba(9,254,71,.4) !important; }

/* --- Switches: fondo negro apagado, verde encendido --- */
html body .custom-switch-indicator,
html body .custom-control-input ~ .custom-control-label::before {
  background: #000 !important;
  border: 1px solid rgba(9,254,71,.55) !important;
}
html body .custom-switch-input:checked ~ .custom-switch-indicator,
html body .custom-control-input:checked ~ .custom-control-label::before {
  background: #09fe47 !important;
  border-color: #09fe47 !important;
}


/* --- Casilla de confirmacion (checkbox nativo): negra, alineada, con aire --- */
html body .custom-control.custom-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 0 !important;
  padding-left: 0 !important;
}
html body .custom-checkbox .custom-control-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding-left: 0 !important;
  line-height: 1.3 !important;
  cursor: pointer;
}
/* El checkbox real, estilizado directo */
html body .custom-checkbox input[type="checkbox"],
html body input[name="agree"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  border: 1px solid #09fe47 !important;
  border-radius: 4px !important;
  background: #000 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  margin-right: 0 !important;
}
html body .custom-checkbox input[type="checkbox"]:checked,
html body input[name="agree"]:checked {
  background: #09fe47 !important;
  border-color: #09fe47 !important;
}
/* La tilde en negro sobre el verde */
html body .custom-checkbox input[type="checkbox"]:checked::after,
html body input[name="agree"]:checked::after {
  content: "" !important;
  position: absolute !important;
  margin-left: 6px !important;
  margin-top: 1px !important;
  width: 4px !important;
  height: 9px !important;
  border: solid #000 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}


/* --- Bloque nombre + saldo del header: centrado --- */
html body .nav-link .leading-none {
  text-align: center !important;
}
html body .nav-link .leading-none .user-balance {
  margin-left: auto !important;
  margin-right: auto !important;
}