:root {
  --md-green-300: #90e0a0;
  --md-green-400: #60bf79;
  --md-green-500: #22b254;
  --md-green-600: #1e9a49;
  --md-green-700: #27743e;
  --md-green-900: #204828;
  --md-red-300: #f2b3b3;

  --md-bg: #0a1110;
  --md-surface-1: #0e1715;
  --md-surface-2: #101d1a;
  --md-surface-3: #152420;
  --md-border: rgba(144, 224, 160, 0.16);
  --md-border-strong: rgba(144, 224, 160, 0.32);
  --md-text: #e8f5ee;
  --md-text-muted: #9ab0a4;
  --md-input-bg: #0c1513;
  --md-input-border: rgba(144, 224, 160, 0.18);
  --md-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  --md-grad: radial-gradient(1200px 600px at 10% -10%, rgba(34, 178, 84, 0.2), transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(144, 224, 160, 0.12), transparent 55%);
  --md-hover: rgba(34, 178, 84, 0.15);
}

body[data-theme="light"] {
  --md-bg: #f6faf7;
  --md-surface-1: #ffffff;
  --md-surface-2: #f0f6f2;
  --md-surface-3: #e9f2ec;
  --md-border: rgba(32, 72, 40, 0.14);
  --md-border-strong: rgba(32, 72, 40, 0.28);
  --md-text: #1b2a22;
  --md-text-muted: #57665d;
  --md-input-bg: #ffffff;
  --md-input-border: rgba(32, 72, 40, 0.22);
  --md-shadow: 0 16px 30px rgba(23, 41, 32, 0.12);
  --md-grad: radial-gradient(1000px 500px at 10% -10%, rgba(34, 178, 84, 0.18), transparent 60%),
    radial-gradient(700px 400px at 90% -20%, rgba(144, 224, 160, 0.16), transparent 55%);
  --md-hover: rgba(34, 178, 84, 0.12);
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--md-text);
  background-color: var(--md-bg);
}

::selection {
  background: rgba(34, 178, 84, 0.35);
  color: #0b1511;
}

.medusaColor {
  color: var(--md-green-500);
}

.colorTexto {
  color: var(--md-text) !important;
}

.colorHover:hover {
  color: var(--md-green-300) !important;
}

.contenedor {
  background-color: var(--md-bg);
  background-image: var(--md-grad);
}

.contenedor .navBarIzquierda,
.contenedor .columnaDerechaArriba,
.contenedor .navBarDerechaBtn,
.contenedor .navBarDerecha,
.contenedor .offcanvas-body,
.contenedor .offcanvas-header {
  background-color: var(--md-surface-1);
  color: var(--md-text);
}

.contenedor .navBarIzquierda .iconoEmpresaIzquierda {
  letter-spacing: 0.08em;
}

/* .contenedor .navBarDerechaBtn {
  border-bottom: 1px solid var(--md-border);
  gap: 6px;
} */

.contenedor .navBarDerechaBtn div {
  /* border-radius: 999px; */
  /* padding: 6px 12px; */
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.contenedor .navBarDerechaBtn div:hover {
  border-top: 1px solid transparent;
  /* border-color: var(--md-border-strong);
  background-color: var(--md-hover); */
  color: var(--md-green-300) !important;
}

.contenedor .marca {
  background-image: linear-gradient(90deg, rgba(34, 178, 84, 0.6), rgba(144, 224, 160, 0.45));
}

.contenedor .navBarDerecha {
  border-bottom: 1px solid var(--md-border);
  box-shadow: var(--md-shadow);
}

.contenedor .navBarDerecha .nombreEmpresa .bloqueoBadge {
  color: var(--md-red-300);
  background: rgba(242, 179, 179, 0.12);
  border: 1px solid rgba(242, 179, 179, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
}

.contenedor .navBarDerecha .btnMasDatosIcon {
  transition: color 0.15s ease, transform 0.15s ease;
}

.contenedor .navBarDerecha .btnMasDatosIcon:hover {
  color: var(--md-green-400);
  transform: translateY(-1px);
}

.contenedor .navBarDerecha .form-control {
  background-color: var(--md-input-bg);
  border: 1px solid var(--md-input-border);
  color: var(--md-text);
  border-radius: 999px;
  padding: 6px 12px;
  margin-right: 5px;
}

.contenedor .navBarDerecha .form-control::placeholder {
  color: var(--md-text-muted);
}

.contenedor .registro,
.contenedor .chat {
  background-color: var(--md-surface-2);
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow);
}

.contenedor .datosDelCliente {
  color: var(--md-text);
}

.contenedor .datosDelCliente .card,
.contenedor .datosDelCliente .card .list-group-item {
  background-color: var(--md-surface-1);
  color: var(--md-text);
  border-color: var(--md-border);
}

.contenedor .datosDelCliente .card .list-group-item input,
.contenedor .datosDelCliente .card .card-body input,
.contenedor .datosDelCliente .card .card-body textarea {
  background-color: var(--md-input-bg);
  color: var(--md-text);
  border: 1px solid var(--md-input-border);
}

.contenedor .datosDelCliente .card .list-group-item input::placeholder,
.contenedor .datosDelCliente .card .card-body input::placeholder,
.contenedor .datosDelCliente .card .card-body textarea::placeholder {
  color: var(--md-text-muted);
}

.contenedor .registro .buscador {
  background-color: var(--md-surface-2);
  border-bottom: 1px solid var(--md-border);
  padding-bottom: 6px;
}

.contenedor .registro .buscador .buscadorRegistro {
  background-color: var(--md-input-bg);
  border: 1px solid var(--md-input-border);
  color: var(--md-text);
  border-radius: 12px;
}

.contenedor .registro .buscador .buscadorRegistro::placeholder {
  color: var(--md-text-muted);
}

.contenedor .registro .buscador .btnNuevoChat {
  color: var(--md-green-400) !important;
}

.contenedor .registro .cajaRegistro {
  background-color: var(--md-surface-3);
  border: 1px solid var(--md-border);
  transition: all 0.15s ease;
}

.contenedor .registro .cajaRegistro:hover {
  background-color: var(--md-hover);
  border-color: var(--md-border-strong);
  transform: translateY(-1px);
}

.contenedor .registro .cajaRegistroActive {
  background: linear-gradient(90deg, rgba(34, 178, 84, 0.2), transparent 70%);
  border: 1px solid var(--md-border-strong);
}

.contenedor .registro .cajaRegistro .texto .mensaje {
  color: var(--md-text-muted);
}

.contenedor .registro .cajaRegistroBloqueada {
  border: 1px dashed rgba(242, 179, 179, 0.6);
  background-color: rgba(242, 179, 179, 0.06);
}

/* .contenedor .chat {
  padding: 12px 14px;
} */

/* .contenedor .chat .msj .fecha {
  color: var(--md-text-muted);
} */

.contenedor .chat .msj.msj-media {
  background-color: rgb(42, 157, 122);
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.metricaColor {
  color: var(--md-green-500) !important;
}
.contenedor .chat .msj.msj-media .texto.media {
  display: none;
}

.contenedor .chat .msj.msj-media .fecha {
  /* margin-top: 6px; */
  
  padding-top: 0;
  justify-self: center;
  align-self: center;
  /* background-color: rgb(42, 157, 122); */
}

.contenedor .enviarMensaje {
  background-color: var(--md-surface-1);
  /* border-top: 1px solid var(--md-border); */
  box-shadow: var(--md-shadow);
}

.contenedor .enviarMensaje .form-control {
  background-color: var(--md-surface-1);
  /* border: 1px solid var(--md-input-border); */
  color: var(--md-text);
  border-radius: 12px;
  margin: 10px;
  padding: 10px 12px;
}

.contenedor .enviarMensaje .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: var(--md-surface-1);
}


.contenedor .enviarMensaje .form-control::placeholder {
  color: var(--md-text-muted);
}

.contenedor .enviarMensaje .adjuntar {
  background-color: var(--md-input-bg);
  /* border-left: 1px solid var(--md-border); */
  border-radius: 10px;
  margin: 10px 12px 10px 0;
}


.dropdown-respuestas {
  background: var(--md-surface-1);
  border: 1px solid var(--md-border);
  box-shadow: var(--md-shadow);
}

.dropdown-menuCerrarChat {
  background-color: var(--md-surface-1);
  color: var(--md-text);
  border: 1px solid var(--md-border);
}

.opcion-respuesta {
  color: var(--md-text);
}

.opcion-respuesta:hover {
  background-color: var(--md-hover);
}

.modalDerivar {
  background-color: var(--md-surface-1);
  color: var(--md-text);
}

.list-group-item:hover {
  background-color: var(--md-hover);
}

/* Dashboard / módulos */
.sidebar {
  background-color: var(--md-surface-1) !important;
  box-shadow: inset -1px 0 0 var(--md-border) !important;
}

.sidebar .nav-link {
  color: var(--md-text) !important;
}

.sidebar .nav-link.active {
  color: var(--md-green-400) !important;
}

.sidebar .nav-link .feather {
  color: var(--md-text-muted) !important;
}

nav,
.navbar,
.navbar-brand {
  background-color: var(--md-surface-1) !important;
  color: var(--md-text) !important;
}

.form-control:focus {
  border-color: rgba(34, 178, 84, 0.35) !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 178, 84, 0.2) !important;
}

.form-control-dark {
  color: var(--md-text);
  background-color: rgba(34, 178, 84, 0.12);
  border-color: rgba(34, 178, 84, 0.2);
}

.table-dark {
  background-color: var(--md-surface-2) !important;
}

.form-check-input:checked {
  background-color: var(--md-green-500);
  border-color: var(--md-green-500);
}

.form-check-input:focus {
  border-color: var(--md-green-400);
  box-shadow: 0 0 0 0.2rem rgba(34, 178, 84, 0.2);
}