/* ===============================
   BRAND TOKENS
   =============================== */
:root{
  /* Colores base (de tu brand book) */
  --color-primary: #2B2A29;   /* principal */
  --color-secondary: #898176; /* apoyo */
  --color-accent: #BFB7A6;    /* acento suave */
  --color-surface: #ECEAE6;   /* superficies claras */

  /* Derivados (usados en hovers, bordes, etc.) */
  --color-primary-contrast: #ffffff;
  --color-text: #2B2A29;
  --color-muted: #5b5a58;
  --color-border: #dedbd6;

  /* Fallbacks/mezclas suaves (si el navegador soporta color-mix) */
  --hover-surface: color-mix(in srgb, var(--color-primary) 6%, #ffffff);
  --active-surface: color-mix(in srgb, var(--color-primary) 12%, #ffffff);

  /* Si no hay soporte de color-mix, se usan estos */
  --hover-surface-fallback: #f1f0ef;  /* ≈ 6% de #2B2A29 sobre blanco */
  --active-surface-fallback: #e8e6e4; /* ≈ 12% de #2B2A29 sobre blanco */

  /* Compat con tu CSS original */
  --brand: var(--color-primary);
}

/* Paleta */
.text-indigo, .border-indigo, .btn-outline-indigo { color:#6610f2!important; border-color:#6610f2!important; }
.text-orange, .border-orange, .btn-outline-orange { color:#fd7e14!important; border-color:#fd7e14!important; }
.text-teal,   .border-teal,   .btn-outline-teal   { color:#20c997!important; border-color:#20c997!important; }
.text-blue,   .border-blue,   .btn-outline-blue   { color:#0d6efd!important; border-color:#0d6efd!important; }
.text-lime,   .border-lime,   .btn-outline-lime   { color:#84cc16!important; border-color:#84cc16!important; }
.text-emerald,.border-emerald,.btn-outline-emerald{ color:#059669!important; border-color:#059669!important; }

/* Hover de cada botón outlined */
.btn-outline-indigo:hover  { background-color:#6610f2!important; color:#fff!important; }
.btn-outline-orange:hover  { background-color:#fd7e14!important; color:#fff!important; }
.btn-outline-teal:hover    { background-color:#20c997!important; color:#fff!important; }
.btn-outline-blue:hover    { background-color:#0d6efd!important; color:#fff!important; }
.btn-outline-lime:hover    { background-color:#84cc16!important; color:#212529!important; }
.btn-outline-emerald:hover { background-color:#059669!important; color:#fff!important; }

/* ===============================
   TIPOGRAFÍAS
   =============================== */
/* Poppins por Google Fonts (cárgala en tu layout): 
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
*/
/* Calmius Sans: asume font-face propio; ajusta URL a tus archivos */
@font-face{
  font-family: "Calmius Sans";
  src: url("/fonts/CalmiusSans-Regular.woff2") format("woff2"),
       url("/fonts/CalmiusSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body{
  font-family: "Poppins", "Calmius Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* ===============================
   LAYOUT (topbar, sidebar, content)
   =============================== */
.topbar{
  height:56px;
  background:#fff;
  position:sticky; top:0; z-index:1030;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-col{ min-width:250px; }
.sidebar-wrapper{
  position:sticky; top:56px;
  height:calc(100vh - 56px);
  overflow:auto;
  background:#ffffff;
  border-right: 1px solid var(--color-border);
}
.sidebar{
  min-width:250px;
  color: var(--color-text);
}
.sidebar .nav-link{
  color:#44505c; /* puedes cambiarlo por var(--color-muted) si prefieres */
  border-radius:.5rem;
}
.sidebar .nav-link:hover{
  background: var(--hover-surface, var(--hover-surface-fallback));
}
.sidebar .nav-link.active{
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.content-col{ min-height: calc(100vh - 56px); }

/* ===============================
   CARDS & INTERACTION
   =============================== */
.card-link{
  transition:.15s transform ease, .15s box-shadow ease;
}
.card-link:hover{
  transform:translateY(-2px);
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.08);
}

/* ===============================
   TIPOS & CÓDIGO
   =============================== */
.text-monospace{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
code{ user-select:all; }

/* ===============================
   SELECT2 (tema Bootstrap)
   =============================== */
.select2-container .select2-selection--single{
  height: 38px; padding: .375rem .75rem;
  border-color: var(--color-border);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 26px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 36px; right: 6px;
}
.select2-container .select2-dropdown{ z-index: 2000; }
.select2-container{ width: 100% !important; }

/* ===============================
   RESPONSVIO
   =============================== */
@media (max-width: 991.98px){
  .sidebar-col { min-width:0; }
}

/* ===============================
   OPCIONAL: Overrides Bootstrap
   (si quieres que .btn-primary y enlaces sigan tu marca)
   =============================== */
.btn-primary{
  --bs-btn-color: var(--color-primary-contrast);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: #3a3938; /* un paso más claro que #2B2A29 */
  --bs-btn-hover-border-color: #3a3938;
  --bs-btn-active-bg: #222120;
  --bs-btn-active-border-color: #222120;
}
.btn-outline-primary{
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-primary-contrast);
}
a{ color: var(--color-secondary); }
a:hover{ color: #736c60; } /* hover del secundario */
[data-item-tags-display] .tag-chip .remove { 
  display: none !important; 
}
/* contenedor */
.status-picker { position: relative; display: inline-block; min-width: 160px; }

/* botón actual */
.status-picker .sp-trigger {
  border: 1px;
  border-style: solid;
  border-radius: .25rem;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: .25rem .5rem;
}

/* caret */
.status-picker .sp-caret { margin-left: .5rem; opacity: .8; }

/* menú */
.status-picker .sp-menu {
  position: absolute; z-index: 2000; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: .3rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  min-width: 220px; max-height: 260px; overflow: auto;
  padding: 0; margin: 0;
}
.status-picker .sp-menu ul { list-style: none; padding: 0; margin: 0; }

/* opción = botón cuadrado full-width, SIN espacios */
.status-picker .sp-opt {
  border: 0; border-radius: 0;
  padding: .35rem .55rem; margin: 0; width: 100%; text-align: left;
  line-height: 1.15; font-weight: 600;
}
.status-picker .sp-opt:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }

/* respeta colores de texto */
.status-picker .text-white { color: #fff !important; }
.status-picker .text-dark  { color: #212529 !important; }

/* Para el estado actual (badge estilo outlined elegante) */
.status-outline {
  border-width: 1.5px;
  border-style: solid;
  border-radius: .35rem;
  font-weight: 600;
  display: inline-flex;
  padding: .25rem .6rem;
  min-width: 130px;
  background-color: #fff !important;
  transition: all 0.2s ease-in-out;
}

.status-outline:hover { filter: brightness(0.97); }