/* =====================================================================
   THEME — WELL COLLECTIVE
   ---------------------------------------------------------------------
   Hoja de tema ÚNICA para el back-office "Well Collective" sobre
   Bootstrap 5 + plantilla Stisla. Punto único de personalización: NO se
   editan archivos de Bootstrap ni de la plantilla.

   Paleta tomada de  theme_wellcollective_suggested.json  y los design
   tokens de la referencia  https://modern-catalog-ui.replit.app/
   (shadcn/Tailwind): verde bosque + crema cálido, tipografía DM Sans
   (cuerpo) + Fraunces (títulos serif), esquinas .75rem, sombras planas.

   Orden de carga (ver include.vm): app.min.css (BS5) -> style.css ->
   custom.css (capa de modernización --mcom-*) -> /cm/theme.css (tema del
   inquilino) -> ESTE archivo. Por eso gana en cascada y casi no necesita
   !important.

   Estrategia (sin tocar markup ni lógica):
     1. Redefinir las variables del inquilino (--sidebar-background, etc.)
        que /cm/theme.css ya consume  -> reskin de sidebar/navbar/cards.
     2. Redefinir los tokens --mcom-* de custom.css -> reskin de
        botones/cards/tablas/forms/dashboard.
     3. Mapear variables nativas de Bootstrap 5 (--bs-*).
     4. Pulir a mano sólo lo que la referencia aporta de nuevo
        (títulos serif, borde de card, cabecera de tabla, alerts suaves,
        bloque de usuario del sidebar).
   Para revertir el tema: quitar el <link> de include.vm y borrar este
   archivo. Nada más se ve afectado.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* ------------------------------------------------------------------ */
  /* 1) Paleta Well Collective (canónica, desde el JSON + referencia)   */
  /* ------------------------------------------------------------------ */
  --wc-bg:               #f7f5f0;  /* body-background-color  */
  --wc-surface:          #ffffff;  /* card / sidebar         */
  --wc-fg:               #1d3029;  /* body / header font     */

  --wc-primary:          #295643;  /* btn-primary / success  */
  --wc-primary-hover:    #1f4233;  /* btn-*-hover            */
  --wc-primary-active:   #18331f;  /* presionado (más oscuro)*/
  --wc-primary-fg:       #ffffff;
  --wc-primary-soft:     #eef1ee;  /* hover de filas / tint  */

  --wc-secondary:        #ece6da;  /* arena cálida (ref)     */
  --wc-secondary-hover:  #e2dac9;
  --wc-secondary-fg:     #295643;
  --wc-accent:           #ead6c8;  /* durazno cálido (ref)   */

  --wc-muted:            #efeae2;  /* superficies tenues     */
  --wc-muted-fg:         #677e77;  /* texto secundario/footer*/

  --wc-border:           #e5e2dc;  /* tab-line / shadow JSON  */
  --wc-card-border:      #ece7dd;
  /* Fondo de la cabecera de las cards. CAMBIA AQUÍ el color del header.
     Acepta cualquier color CSS válido (hex, rgb, etc.). Sustituye al
     original `color-mix(in oklab, hsl(var(--muted)) 30%, transparent)` del
     tema base: aquel `hsl(var(--muted))` esperaba un triplete "H S% L%"
     (p.ej. 40 15% 92%); aquí las variables ya son colores reales, así que
     NO se usa hsl(). Si prefieres el tinte translúcido al 30% como el
     original, pon:  color-mix(in oklab, var(--wc-muted) 30%, transparent) */
  --wc-card-header-bg:   #f5f2ec;

  --wc-danger:           #cc3333;  /* destructive (ref)      */
  --wc-danger-hover:     #b32b2b;
  --wc-danger-fg:        #ffffff;
  --wc-warning:          #c9852b;
  --wc-info:             #3a7d8c;

  --wc-sidebar-bg:        #ffffff;
  --wc-sidebar-fg:        #1d3029;  /* hsl(160 25% 15%) — texto de menú inactivo */
  --wc-sidebar-hover-fg:  #1d3029;
  --wc-sidebar-hover-bg:  #eeece8;  /* hsl(40 15% 92%) — gris cálido de hover  */
  --wc-sidebar-active-bg: #1d3029;  /* hsl(160 25% 15%) — fondo de ítem activo */
  --wc-sidebar-active-fg: #f7f5f0;  /* hsl(40 20% 97%) — texto de ítem activo  */

  --wc-header-bg:        #f7f5f0;
  --wc-header-fg:        #1d3029;
  --wc-footer-fg:        #677e77;

  --wc-focus-ring:       rgba(41, 86, 67, 0.25);

  /* Radios y tipografía (referencia: --radius .75rem) */
  --wc-radius:           0.75rem;
  --wc-radius-sm:        0.5rem;
  --wc-radius-lg:        1rem;
  --wc-font-sans:        "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wc-font-serif:       "Fraunces", Georgia, "Times New Roman", serif;

  /* Sombras planas y sutiles (referencia usa color #1f2e29 a baja alfa) */
  --wc-shadow-sm:        0 1px 2px rgba(31, 46, 41, 0.05);
  --wc-shadow:           0 1px 3px rgba(31, 46, 41, 0.07), 0 1px 2px rgba(31, 46, 41, 0.04);
  --wc-shadow-lg:        0 8px 24px rgba(31, 46, 41, 0.10), 0 2px 6px rgba(31, 46, 41, 0.05);

  /* ------------------------------------------------------------------ */
  /* 2) Variables nativas de Bootstrap 5                                */
  /* ------------------------------------------------------------------ */
  --bs-primary:            var(--wc-primary);
  --bs-primary-rgb:        41, 86, 67;
  --bs-secondary:          var(--wc-muted-fg);
  --bs-secondary-rgb:      103, 126, 119;
  --bs-success:            var(--wc-primary);
  --bs-success-rgb:        41, 86, 67;
  --bs-danger:             var(--wc-danger);
  --bs-danger-rgb:         204, 51, 51;
  --bs-warning:            var(--wc-warning);
  --bs-warning-rgb:        201, 133, 43;
  --bs-info:               var(--wc-info);
  --bs-info-rgb:           58, 125, 140;

  --bs-body-bg:            var(--wc-bg);
  --bs-body-color:         var(--wc-fg);
  --bs-body-color-rgb:     29, 48, 41;
  --bs-body-font-family:   var(--wc-font-sans);
  --bs-emphasis-color:     var(--wc-fg);

  --bs-border-color:       var(--wc-border);
  --bs-border-radius:      var(--wc-radius);
  --bs-border-radius-sm:   var(--wc-radius-sm);
  --bs-border-radius-lg:   var(--wc-radius-lg);

  --bs-link-color:         var(--wc-primary);
  --bs-link-color-rgb:     41, 86, 67;
  --bs-link-hover-color:   var(--wc-primary-hover);

  /* ------------------------------------------------------------------ */
  /* 3) Variables del inquilino (consumidas por /cm/theme.css).          */
  /*    Redefinirlas reskina sidebar, navbar, btn-success, cards, tabs,  */
  /*    footer y loader SIN tocar sus reglas.                            */
  /* ------------------------------------------------------------------ */
  --body-background-color:      var(--wc-bg);
  --body-font-color:            var(--wc-fg);

  --btn-primary-background:        var(--wc-primary);
  --btn-primary-font-color:        var(--wc-primary-fg);
  --btn-primary-hover-background:  var(--wc-primary-hover);
  --btn-primary-hover-font-color:  var(--wc-primary-fg);
  --btn-primary-shadow:            var(--wc-border);
  --btn-success-background:        var(--wc-primary);
  --btn-success-font-color:        var(--wc-primary-fg);
  --btn-success-hover-background:  var(--wc-primary-hover);
  --btn-success-hover-font-color:  var(--wc-primary-fg);
  --btn-success-shadow:            var(--wc-border);

  --sidebar-background:         var(--wc-sidebar-bg);
  --sidebar-font-color:         var(--wc-sidebar-fg);
  --sidebar-link-hover-color:   var(--wc-sidebar-hover-fg);
  --sidebar-link-hover-background: var(--wc-sidebar-hover-bg);

  --header-background:          var(--wc-header-bg);
  --header-font-color:          var(--wc-header-fg);

  --footer-background:          var(--wc-bg);
  --footer-font-color:          var(--wc-footer-fg);

  --card-background-color:      var(--wc-surface);
  --card-font-color:            var(--wc-fg);

  --loader-background:          var(--wc-bg);
  --loader-dots-background:     var(--wc-primary);

  --tab-color:                  var(--wc-primary);
  --tab-line-color:             var(--wc-border);
  --tab-font-color:             var(--wc-fg);

  /* ------------------------------------------------------------------ */
  /* 4) Tokens de la capa de modernización (custom.css, --mcom-*).       */
  /*    Redefinirlos reskina botones/cards/tablas/forms/dashboard.       */
  /* ------------------------------------------------------------------ */
  --mcom-primary:        var(--wc-primary);
  --mcom-primary-hover:  var(--wc-primary-hover);
  --mcom-primary-active: var(--wc-primary-active);
  --mcom-primary-soft:   var(--wc-primary-soft);
  --mcom-focus-ring:     var(--wc-focus-ring);
  --mcom-accent:         var(--wc-accent);

  --mcom-success:        var(--wc-primary);
  --mcom-warning:        var(--wc-warning);
  --mcom-danger:         var(--wc-danger);
  --mcom-info:           var(--wc-info);

  --mcom-font-sans:      var(--wc-font-sans);
  --mcom-text-color:     var(--wc-fg);

  --mcom-radius-sm:      var(--wc-radius-sm);
  --mcom-radius:         var(--wc-radius);
  --mcom-radius-lg:      var(--wc-radius-lg);
  --mcom-shadow-sm:      var(--wc-shadow-sm);
  --mcom-shadow:         var(--wc-shadow);
  --mcom-shadow-lg:      var(--wc-shadow-lg);

  /* Rampa de grises re-equilibrada hacia tonos cálidos/verdosos */
  --mcom-gray-50:  #f7f5f0;
  --mcom-gray-100: #efeae2;
  --mcom-gray-200: #e5e2dc;
  --mcom-gray-300: #d8d2c6;
  --mcom-gray-400: #b3aea2;
  --mcom-gray-500: #8a8579;
  --mcom-gray-600: #677e77;
  --mcom-gray-700: #3f4f48;
  --mcom-gray-800: #2a3a33;
  --mcom-gray-900: #1d3029;
}

/* ===================================================================== */
/* Base: tipografía y fondo                                              */
/* ===================================================================== */
body {
  font-family: var(--wc-font-sans);
  background-color: var(--wc-bg);
  color: var(--wc-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos en serif Fraunces (firma visual de la referencia).
   Sólo encabezados/títulos; el resto sigue en DM Sans. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.page-title,
.card-title,
.section-title {
  font-family: var(--wc-font-serif);
  font-weight: 600;
  letter-spacing: normal;
  font-optical-sizing: auto;
  color: var(--wc-fg)!important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-menu a) {
  color: var(--wc-primary);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
  color: var(--wc-primary-hover);
}

/* ===================================================================== */
/* Sidebar — sólo color/tipografía, estructura intacta                   */
/* ===================================================================== */
.main-sidebar,
.main-sidebar #sidebar-wrapper {
  background-color: var(--wc-sidebar-bg);
  border-right: 1px solid var(--wc-border);
}
.main-sidebar .sidebar-menu li a {
  color: var(--wc-sidebar-fg);
  border-radius: var(--wc-radius-sm);
  margin: 1px 8px;
  transition: background-color .15s ease, color .15s ease;
}
.main-wrapper .main-sidebar .sidebar-menu li a:hover,
.main-wrapper .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
  color: var(--wc-sidebar-hover-fg);
  background-color: var(--wc-sidebar-hover-bg);
}
/* Ítem activo/seleccionado (no hover): pill verde oscuro + texto crema.
   Selector con prefijo body .main-wrapper para ganar a la regla :hover de
   /cm/theme.css (evita que el ítem activo se ponga gris al pasar el cursor). */
body .main-wrapper .main-sidebar .sidebar-menu > li.active > a,
body .main-wrapper .main-sidebar .sidebar-menu > li.active > a:hover {
  color: var(--wc-sidebar-active-fg);
  background-color: var(--wc-sidebar-active-bg);
  font-weight: 600;
  box-shadow: none;  /* anula el glow de color de Stisla (.active>a{box-shadow:...}) */
}
/* Stisla (sidebar-style-2) dibuja una barra de acento ::before con color
   hardcodeado en el ítem activo; la ocultamos para el pill limpio de la ref. */
body .main-sidebar .sidebar-menu > li.active > a:before {
  display: none;
}
.main-sidebar .sidebar-menu li a .feather,
.main-sidebar .sidebar-menu li a i {
  color: inherit;
}

/* ===================================================================== */
/* Header / topbar — color/tipografía                                    */
/* ===================================================================== */
.navbar-bg,
nav.navbar.main-navbar,
nav.navbar.navbar-top.main-navbar {
  background-color: var(--wc-header-bg);
}
nav.navbar.main-navbar {
  border-bottom: 1px solid var(--wc-border);
}
.navbar .nav-link,
.navbar .nav-link .feather,
.navbar .login-link,
.navbar .nav-profile-info-aux a,
.navbar .nav-profile-info-aux span,
.navbar .user-name.navbar-name {
  color: var(--wc-header-fg);
}
/* El icono de usuario (y el segundo .nav-link-user del header) es un <svg fill="currentColor">
   en linea, sin la clase .feather, por lo que NO le aplica
   .theme-white .navbar .nav-link .feather{color:#555556} de style.css y se queda con el
   color:#fff que style.css le pone a .nav-link-user (pensado para el avatar + nombre sobre un
   navbar de color). Sobre el header claro quedaba blanco sobre blanco. Se iguala al resto de
   los iconos del header. */
.theme-white .navbar .nav-link.nav-link-user {
  color: #555556;
}
.theme-black .navbar .nav-link.nav-link-user {
  color: var(--header-font-color);
}

/* ===================================================================== */
/* Bloque de usuario logueado (parte inferior del sidebar)               */
/* ---------------------------------------------------------------------- */
/* Reutiliza .sidebar-user (avatar + nombre + rol). Como la referencia:   */
/* caja a TODO el ancho del sidebar, MISMO fondo que el sidebar (blanco), */
/* separador superior, avatar redondo a la izquierda y nombre/rol a la    */
/* derecha. La reubicación al fondo en escritorio se hace más abajo en    */
/* el bloque @media (min-width: 1025px).                                  */
/* ===================================================================== */
.sidebar-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background-color: var(--wc-sidebar-bg);
  border-top: 1px solid var(--wc-border);
}
.sidebar-user .sidebar-user-picture { flex: 0 0 auto; line-height: 0; }
.sidebar-user .sidebar-user-picture img,
.sidebar-user-picture img {
  /* width !important para vencer a custom.css (.sidebar-user-picture img{width:auto!important}) */
  width: 42px !important;
  height: 42px !important;
  max-width: 42px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--wc-muted);
}
.sidebar-user .sidebar-user-details {
  text-align: left;
  min-width: 0;
}
.sidebar-user-details .user-name {
  color: var(--wc-fg);
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-details .user-role,
#userrole {
  color: var(--wc-muted-fg);
  font-size: 0.8rem;
  line-height: 1.2;
}

/* En escritorio: mostrar el bloque de usuario (avatar+nombre+rol) pegado
   al fondo del sidebar, en lugar del bloque "Logged in as" del layout base.
   El layout de custom.css ya hace #sidebar-wrapper flex-column min-height:100%;
   aquí sólo reordenamos (menú arriba, usuario abajo con margin-top:auto). */
@media (min-width: 1025px) {
  .main-sidebar .sidebar-menu { order: 1; }
  .main-sidebar .sidebar-user {
    display: flex;
    order: 2;
    margin-top: auto;
  }
  .main-sidebar .sidebar-footer { display: none; }
}
/* En el rail colapsado (65px) no hay espacio para el bloque: ocultarlo,
   igual que hacía el footer original. */
.sidebar-mini .main-sidebar .sidebar-user { display: none; }

/* ===================================================================== */
/* Cards — borde fino + radio + sombra plana (referencia)                */
/* (custom.css pone border:0; aquí restauramos el hairline de la ref)    */
/* ===================================================================== */
.card {
  border: 1px solid var(--wc-card-border);
  border-radius: var(--wc-radius);
  box-shadow: var(--wc-shadow);
}
.card > .card-header {
  background-color: var(--wc-card-header-bg);
  border-bottom: 1px solid var(--wc-card-border);
  color: var(--wc-fg);
  font-weight: 600;
}
.card > .card-footer {
  background-color: var(--wc-surface);
  border-top: 1px solid var(--wc-card-border);
}
/* Acento superior de la card "primary" de la plantilla */
.card.card-primary { border-top: 2px solid var(--wc-primary); }

/* ===================================================================== */
/* Tablas — cabecera tenue, bordes suaves, hover de fila                 */
/* ===================================================================== */
.table {
  --bs-table-hover-bg: var(--wc-primary-soft);
  color: var(--wc-fg);
}
.table thead th {
  background-color: var(--wc-muted);
  color: var(--wc-primary);
  border-bottom: 2px solid var(--wc-border);
  border-top: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.table td,
.table th {
  border-color: var(--wc-border);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--wc-primary-soft);
  color: var(--wc-fg);
}
/* Tablas a rayas con un crema muy tenue */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(41, 86, 67, 0.035);
}

/* ===================================================================== */
/* Botones — primario via tokens; aquí afinamos secundario/peligro       */
/* ===================================================================== */
.btn { border-radius: var(--wc-radius-sm); font-weight: 500; }

.btn-secondary {
  background-color: var(--wc-secondary);
  border-color: var(--wc-border);
  color: var(--wc-secondary-fg);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--wc-secondary-hover);
  border-color: var(--wc-border);
  color: var(--wc-secondary-fg);
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: var(--wc-secondary-hover);
  border-color: var(--wc-border);
  color: var(--wc-secondary-fg);
}

.btn-danger {
  background-color: var(--wc-danger);
  border-color: var(--wc-danger);
  color: var(--wc-danger-fg);
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--wc-danger-hover);
  border-color: var(--wc-danger-hover);
  color: var(--wc-danger-fg);
}

.btn-outline-primary {
  color: var(--wc-primary);
  border-color: var(--wc-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--wc-primary);
  border-color: var(--wc-primary);
  color: var(--wc-primary-fg);
}

/* ===================================================================== */
/* Formularios — foco de marca, controles seleccionados                  */
/* ===================================================================== */
.form-control,
.form-select,
.custom-select {
  border-radius: var(--wc-radius-sm);
  border-color: var(--wc-border);
  color: var(--wc-fg);
}
.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: var(--wc-primary);
  box-shadow: 0 0 0 0.2rem var(--wc-focus-ring);
}
.form-control::placeholder { color: var(--wc-muted-fg); opacity: 0.7; }
.form-check-input:checked {
  background-color: var(--wc-primary);
  border-color: var(--wc-primary);
}
.form-check-input:focus {
  border-color: var(--wc-primary);
  box-shadow: 0 0 0 0.2rem var(--wc-focus-ring);
}
.form-switch .form-check-input:checked { background-color: var(--wc-primary); }
label, .col-form-label, .form-label { color: var(--wc-muted-fg); font-weight: 500; }

/* ===================================================================== */
/* Badges y alerts — variantes suaves (referencia usa tintes claros)     */
/* ===================================================================== */
.badge.bg-primary,
.badge.bg-success,
.badge-primary,
.badge-success { background-color: var(--wc-primary) !important; color: var(--wc-primary-fg); }
.badge.bg-secondary,
.badge-secondary { background-color: var(--wc-muted-fg) !important; color: #fff; }
.badge.bg-danger,
.badge-danger { background-color: var(--wc-danger) !important; color: #fff; }
.badge { border-radius: var(--wc-radius-sm); font-weight: 600; }

.alert { border: 1px solid transparent; border-radius: var(--wc-radius-sm); }
.alert-primary,
.alert-success {
  background-color: var(--wc-primary-soft);
  border-color: var(--wc-border);
  color: var(--wc-primary-hover);
}
.alert-secondary {
  background-color: var(--wc-secondary);
  border-color: var(--wc-border);
  color: var(--wc-secondary-fg);
}
.alert-danger {
  background-color: #faecec;
  border-color: #f0d2d2;
  color: #92302f;
}
.alert-warning {
  background-color: #f7efe1;
  border-color: #ecdcc0;
  color: #7d551c;
}

/* ===================================================================== */
/* Navegación interna: tabs y pills con color de marca                   */
/* ===================================================================== */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--wc-primary);
  border-bottom-color: var(--wc-primary);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--wc-primary);
  color: var(--wc-primary-fg);
}
.nav-pills .nav-link {
  color: var(--wc-primary);
  border-color: var(--wc-primary);
}
.page-item.active .page-link {
  background-color: var(--wc-primary);
  border-color: var(--wc-primary);
}
.page-link { color: var(--wc-primary); }

/* ===================================================================== */
/* Misceláneos                                                            */
/* ===================================================================== */
.breadcrumb { background: transparent; }
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
  background-color: var(--wc-primary);
  border-color: var(--wc-primary);
  color: var(--wc-primary-fg);
}
.progress-bar { background-color: var(--wc-primary); }
.text-primary { color: var(--wc-primary) !important; }
.bg-primary { background-color: var(--wc-primary) !important; }
.border-primary { border-color: var(--wc-primary) !important; }

/* Loader (dots ya vienen de --loader-dots-background) */
.custom-loader { background-color: var(--wc-bg); }

/* ===================================================================== */
/* Responsividad                                                          */
/* El comportamiento responsivo (grid BS5, colapso del sidebar y la      */
/* barra inferior móvil, table-responsive) lo gobiernan app.min.css y    */
/* custom.css; este tema NO altera estructura, sólo color/tipografía,    */
/* por lo que esos breakpoints se conservan intactos.                    */
/* Refuerzo: scroll horizontal de tablas dentro de cards en pantallas    */
/* pequeñas, por si alguna no trae el wrapper .table-responsive.         */
/* ===================================================================== */
@media (max-width: 575.98px) {
  .card-body > .table:not(.table-responsive) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* =====================  END THEME WELL COLLECTIVE  ===================== */