/*
 * Tema Green Solutions sobre AdminLTE 4 / Bootstrap 5.3.
 *
 * Paleta tomada del prototipo de Sady.
 * PENDIENTE: validar contra uploads/manual_marca_gs.pdf antes de llevarla al sitio publico.
 */

:root {
  --gs-green: #2cb481;
  --gs-green-light: #52ff81;
  --gs-green-deep: #1f8f65;
  --gs-ink: #2e3437;
  --gs-body: #5b6266;
  --gs-surface: #f4f8f5;
  --gs-line: #e6ece8;
  --gs-pill: #3d4548;

  /* Bootstrap toma estas para utilidades como .text-primary o .bg-primary */
  --bs-primary: var(--gs-green);
  --bs-primary-rgb: 44, 180, 129;
  --bs-success: var(--gs-green);
  --bs-success-rgb: 44, 180, 129;

  --bs-link-color: var(--gs-green-deep);
  --bs-link-color-rgb: 31, 143, 101;
  --bs-link-hover-color: var(--gs-green);
  --bs-link-hover-color-rgb: 44, 180, 129;

  --bs-body-color: var(--gs-body);
  --bs-body-bg: var(--gs-surface);
  --bs-border-color: var(--gs-line);

  --bs-font-sans-serif: "Mulish", system-ui, -apple-system, sans-serif;

  --bs-focus-ring-color: rgba(44, 180, 129, 0.25);
}

/*
 * Bootstrap 5.3 compila los colores dentro de cada .btn-*, asi que no basta
 * con redefinir --bs-primary: hay que pisar las variables del componente.
 */
.btn-primary {
  --bs-btn-bg: var(--gs-green);
  --bs-btn-border-color: var(--gs-green);
  --bs-btn-hover-bg: var(--gs-green-deep);
  --bs-btn-hover-border-color: var(--gs-green-deep);
  --bs-btn-active-bg: var(--gs-green-deep);
  --bs-btn-active-border-color: var(--gs-green-deep);
  --bs-btn-disabled-bg: var(--gs-green);
  --bs-btn-disabled-border-color: var(--gs-green);
}

.btn-outline-primary {
  --bs-btn-color: var(--gs-green-deep);
  --bs-btn-border-color: var(--gs-green);
  --bs-btn-hover-bg: var(--gs-green);
  --bs-btn-hover-border-color: var(--gs-green);
  --bs-btn-active-bg: var(--gs-green-deep);
  --bs-btn-active-border-color: var(--gs-green-deep);
}

.btn-success {
  --bs-btn-bg: var(--gs-green);
  --bs-btn-border-color: var(--gs-green);
  --bs-btn-hover-bg: var(--gs-green-deep);
  --bs-btn-hover-border-color: var(--gs-green-deep);
}

.bg-primary,
.text-bg-primary {
  background-color: var(--gs-green) !important;
}

.text-primary {
  color: var(--gs-green-deep) !important;
}

.badge.text-bg-success {
  background-color: var(--gs-green) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gs-green);
  box-shadow: 0 0 0 0.2rem rgba(44, 180, 129, 0.18);
}

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

/* ---------- barra lateral ---------- */

.app-sidebar {
  --lte-sidebar-width: 16rem;
  --lte-sidebar-color: rgba(255, 255, 255, 0.78);
  --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --lte-sidebar-hover-color: #fff;
  --lte-sidebar-active-color: #fff;
  --lte-sidebar-menu-active-bg: var(--gs-green);
  --lte-sidebar-menu-active-color: #fff;
  --lte-sidebar-header-color: rgba(255, 255, 255, 0.45);
  background-color: var(--gs-pill);
}

.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-text {
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 700;
}

.brand-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(115deg, var(--gs-green), var(--gs-green-light));
}

/* ---------- tipografia ---------- */

body,
.app-wrapper {
  font-family: "Mulish", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.brand-text {
  font-family: "Jost", system-ui, sans-serif;
  letter-spacing: -0.2px;
}

.card {
  --bs-card-border-color: var(--gs-line);
}

.small-box .icon {
  opacity: 0.25;
}

/* ---------- editor Trix ---------- */

trix-editor {
  min-height: 26rem;
  border: 1px solid var(--gs-line);
  border-radius: 0.375rem;
  padding: 1rem;
  background: #fff;
  font-size: 1rem;
  line-height: 1.7;
}

trix-editor:focus {
  outline: none;
  border-color: var(--gs-green);
  box-shadow: 0 0 0 0.2rem rgba(44, 180, 129, 0.18);
}

trix-toolbar .trix-button-group {
  border-color: var(--gs-line);
}

trix-toolbar .trix-button.trix-active {
  background: var(--gs-green);
  color: #fff;
}

trix-editor h2 {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.5rem 0 0.35rem;
  color: var(--gs-ink);
}

trix-editor h3 {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.1rem 0 0.35rem;
  color: var(--gs-ink);
}

trix-editor blockquote {
  border-left: 4px solid var(--gs-green);
  padding-left: 1rem;
  margin: 1.25rem 0;
  color: var(--gs-ink);
}

/* Barra de acciones pegada al fondo del formulario */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--gs-surface);
  border-top: 1px solid var(--gs-line);
  padding: 1rem 0;
}

/* Los botones de Trix son iconos CSS; los de encabezado ahora llevan texto.
   `text-indent` se reinicia porque .trix-button--icon lo empuja a -9999px. */
trix-toolbar .trix-button--label {
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  text-indent: 0;
  padding: 0 0.7rem;
  min-width: 2.6rem;
  width: auto;
}

trix-toolbar .trix-button--label::before {
  content: none;
}

/*
 * El gris de placeholder de Bootstrap (--bs-secondary-color) es casi tan
 * oscuro como el texto real, y los ejemplos se leen como campos ya
 * completados. Se aclara para que la diferencia sea evidente.
 */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
  color: #97a0a3;
  opacity: 1;
}

/* Deja claro por que no se puede guardar todavia. */
.form-actions .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}