/* ==========================================================================
   GESTWORK UI  ·  Design System v1.0
   --------------------------------------------------------------------------
   Sistema de diseño único para Gestwork.

   REGLAS DE ORO DE ESTE ARCHIVO
   1. NO reemplaza a Tailwind: convive con él. Se carga DESPUÉS del CDN.
   2. Todas las clases propias llevan el prefijo `gw-`.
   3. Los componentes usan doble clase (`.gw-x.gw-x`) para ganar especificidad
      a las utilidades de Tailwind sin recurrir a `!important`.
   4. NO toca lógica: solo presentación, estructura visual y animación.
   5. Todo degrada con elegancia: si este archivo no cargara, el sistema
      seguiría funcionando con las utilidades de Tailwind ya presentes.
   ========================================================================== */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root {
  /* ── Neutros (rampa fría, base del look minimalista) ─────────────────── */
  --gw-0:    #ffffff;
  --gw-25:   #fdfdfe;
  --gw-50:   #f8fafc;
  --gw-100:  #f2f5f9;
  --gw-150:  #eaeff5;
  --gw-200:  #e3e8ef;
  --gw-300:  #cbd5e1;
  --gw-400:  #94a3b8;
  --gw-500:  #64748b;
  --gw-600:  #475569;
  --gw-700:  #334155;
  --gw-800:  #1e293b;
  --gw-900:  #0f172a;
  --gw-950:  #020617;

  /* ── Semántica de superficie ─────────────────────────────────────────── */
  --gw-bg:          #f6f8fb;   /* fondo de aplicación */
  --gw-surface:     #ffffff;   /* tarjetas, modales */
  --gw-surface-2:   #f8fafc;   /* zonas hundidas, cabeceras de tabla */
  --gw-surface-3:   #f2f5f9;   /* chips neutros, tracks */
  --gw-border:      #e8ecf2;   /* borde estándar (muy suave) */
  --gw-border-soft: #f0f3f7;   /* separadores internos */
  --gw-border-strong:#dbe2ec;  /* borde de foco/hover */

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --gw-text:        #0f172a;
  --gw-text-2:      #475569;
  --gw-text-3:      #64748b;
  --gw-text-muted:  #94a3b8;
  --gw-text-faint:  #b4bfcd;
  --gw-text-invert: #ffffff;

  /* ── Acentos PASTEL (bg / border / ink) ──────────────────────────────
     `ink` siempre cumple contraste AA sobre su propio `bg`.               */
  --gw-violet-bg:  #f4efff;  --gw-violet-bd:  #e6dbff;  --gw-violet-ink:  #6d28d9;
  --gw-indigo-bg:  #eef0ff;  --gw-indigo-bd:  #dfe2ff;  --gw-indigo-ink:  #4338ca;
  --gw-blue-bg:    #eaf2ff;  --gw-blue-bd:    #d8e5ff;  --gw-blue-ink:    #1d4ed8;
  --gw-sky-bg:     #e6f5fd;  --gw-sky-bd:     #cfeafa;  --gw-sky-ink:     #0369a1;
  --gw-teal-bg:    #e2f7f3;  --gw-teal-bd:    #c8efe8;  --gw-teal-ink:    #0f766e;
  --gw-green-bg:   #e8f7ee;  --gw-green-bd:   #d0edda;  --gw-green-ink:   #15803d;
  --gw-lime-bg:    #f2f8e3;  --gw-lime-bd:    #e3f0c8;  --gw-lime-ink:    #4d7c0f;
  --gw-amber-bg:   #fff6e6;  --gw-amber-bd:   #fbe8c6;  --gw-amber-ink:   #b45309;
  --gw-orange-bg:  #fff0e7;  --gw-orange-bd:  #ffe0cd;  --gw-orange-ink:  #c2410c;
  --gw-rose-bg:    #ffeff2;  --gw-rose-bd:    #ffdde3;  --gw-rose-ink:    #be123c;
  --gw-pink-bg:    #fdeef7;  --gw-pink-bd:    #f9ddef;  --gw-pink-ink:    #a21caf;
  --gw-slate-bg:   #f2f5f9;  --gw-slate-bd:   #e3e8ef;  --gw-slate-ink:   #475569;

  /* Alias semánticos */
  --gw-success-bg: var(--gw-green-bg);  --gw-success-bd: var(--gw-green-bd);  --gw-success-ink: var(--gw-green-ink);
  --gw-warn-bg:    var(--gw-amber-bg);  --gw-warn-bd:    var(--gw-amber-bd);  --gw-warn-ink:    var(--gw-amber-ink);
  --gw-danger-bg:  var(--gw-rose-bg);   --gw-danger-bd:  var(--gw-rose-bd);   --gw-danger-ink:  var(--gw-rose-ink);
  --gw-info-bg:    var(--gw-blue-bg);   --gw-info-bd:    var(--gw-blue-bd);   --gw-info-ink:    var(--gw-blue-ink);

  /* Sólidos (solo para acciones destructivas / estados críticos) */
  --gw-danger-solid:  #e11d48;
  --gw-success-solid: #10b981;
  --gw-warn-solid:    #f59e0b;

  /* ── Marca (puente con el motor de temas existente) ───────────────────
     --p-color / --p-rgb los inyecta includes/theme_engine.php.            */
  --gw-brand:      var(--p-color, #b0e511);
  --gw-brand-ink:  var(--t-p-color, #ffffff);
  --gw-brand-rgb:  var(--p-rgb, 176 229 17);
  --gw-brand-04:   rgb(var(--gw-brand-rgb) / 0.04);
  --gw-brand-08:   rgb(var(--gw-brand-rgb) / 0.08);
  --gw-brand-12:   rgb(var(--gw-brand-rgb) / 0.12);
  --gw-brand-20:   rgb(var(--gw-brand-rgb) / 0.20);
  --gw-brand-35:   rgb(var(--gw-brand-rgb) / 0.35);
  /* Color de marca ya corregido para leerse sobre fondos claros. Lo calcula
     includes/theme_engine.php: con paletas claras (lima, ámbar) el color puro
     sobre un fondo tintado del mismo color era invisible. */
  --gw-brand-on-soft: var(--p-ink, #617F06);

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --gw-r-xs:   6px;
  --gw-r-sm:   8px;
  --gw-r-md:   10px;
  --gw-r-lg:   14px;
  --gw-r-xl:   18px;
  --gw-r-2xl:  22px;
  --gw-r-3xl:  28px;
  --gw-r-pill: 999px;

  /* ── Sombras (muy suaves, difusas, nunca duras) ──────────────────────── */
  --gw-sh-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --gw-sh-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --gw-sh-md: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -8px rgba(15, 23, 42, .12);
  --gw-sh-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 14px 32px -12px rgba(15, 23, 42, .16);
  --gw-sh-xl: 0 4px 10px rgba(15, 23, 42, .05), 0 28px 60px -20px rgba(15, 23, 42, .26);
  --gw-sh-pop: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 40px -14px rgba(15, 23, 42, .22);
  --gw-ring:  0 0 0 3px var(--gw-brand-12);
  --gw-ring-danger: 0 0 0 3px rgba(225, 29, 72, .12);

  /* ── Espaciado ───────────────────────────────────────────────────────── */
  --gw-sp-1: 4px;   --gw-sp-2: 8px;   --gw-sp-3: 12px;  --gw-sp-4: 16px;
  --gw-sp-5: 20px;  --gw-sp-6: 24px;  --gw-sp-8: 32px;  --gw-sp-10: 40px;

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --gw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gw-fs-2xs: 10px;
  --gw-fs-xs:  11px;
  --gw-fs-sm:  12px;
  --gw-fs-md:  13px;
  --gw-fs-lg:  14px;
  --gw-fs-xl:  16px;
  --gw-fs-2xl: 19px;
  --gw-fs-3xl: 24px;
  --gw-tracking-tight: -0.014em;
  --gw-tracking-wide:  0.06em;

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --gw-ease:     cubic-bezier(.22, 1, .36, 1);
  --gw-ease-io:  cubic-bezier(.65, 0, .35, 1);
  --gw-ease-pop: cubic-bezier(.34, 1.4, .5, 1);
  --gw-dur-1: 120ms;
  --gw-dur-2: 200ms;
  --gw-dur-3: 320ms;
  --gw-dur-4: 480ms;

  /* ── Capas (z-index centralizado, fin de los conflictos) ─────────────── */
  --gw-z-base:     1;
  --gw-z-sticky:   30;
  --gw-z-sidebar:  40;
  --gw-z-dropdown: 60;
  --gw-z-float:    900;   /* barras flotantes: por encima de la página, por debajo de los modales */
  --gw-z-overlay:  1000;
  --gw-z-modal:    1001;
  --gw-z-toast:    1200;
  --gw-z-tooltip:  1300;
}


/* ==========================================================================
   2 · BASE · refinamientos globales seguros
   ========================================================================== */

.gw-ui {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

/* Lienzo de la aplicación */
body.gw-ui { background: var(--gw-bg); color: var(--gw-text); }
body.gw-ui > main { background: var(--gw-bg); }

.gw-ui ::selection {
  background: var(--gw-brand-20);
  color: var(--gw-text);
}

/* Cifras siempre alineadas en columnas numéricas */
.gw-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Scrollbars finas y discretas en toda la app */
.gw-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
.gw-ui ::-webkit-scrollbar-track { background: transparent; }
.gw-ui ::-webkit-scrollbar-thumb {
  background: var(--gw-300);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--gw-r-pill);
}
.gw-ui ::-webkit-scrollbar-thumb:hover { background: var(--gw-400); background-clip: padding-box; }
.gw-ui ::-webkit-scrollbar-corner { background: transparent; }
.gw-scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.gw-scroll-thin::-webkit-scrollbar-thumb { border-width: 1.5px; }
/* Oculta la barra pero mantiene el scroll (carruseles, tabs) */
.gw-scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }
.gw-scroll-hide::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Foco accesible y consistente (solo teclado) */
.gw-ui :focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
  border-radius: var(--gw-r-sm);
}
/* …salvo dentro de un marco que YA enseña el foco por su cuenta. El buscador
   de la barra, los grupos de campos, la caja y el buscador del chat (y
   cualquier .gw-campo-compuesto) se tiñen enteros al enfocarse; el contorno
   del campo de dentro dibujaba un segundo borde pegado al texto. Uno solo,
   el del marco, que es el que se ve. Ver §6, «Campo compuesto». */
.gw-ui .gw-appbar-search :focus-visible,
.gw-ui .gw-input-group > :focus-visible,
.gw-ui .gw-campo-compuesto :focus-visible,
.gw-ui .gw-chat-busca :focus-visible,
.gw-ui .gw-chat-caja :focus-visible { outline: none; }

/* Placeholders */
.gw-ui ::placeholder { color: var(--gw-text-faint); font-weight: 400; }

/* Utilidades de recorte de texto */
.gw-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gw-clamp-1, .gw-clamp-2, .gw-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; overflow-wrap: anywhere;
}
.gw-clamp-1 { -webkit-line-clamp: 1; }
.gw-clamp-2 { -webkit-line-clamp: 2; }
.gw-clamp-3 { -webkit-line-clamp: 3; }

/* Bloque anti-desbordes: obliga a que el contenido largo nunca rompa la caja */
.gw-safe { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }


/* ==========================================================================
   3 · TIPOGRAFÍA DE PRODUCTO
   ========================================================================== */

.gw-h1 { font-size: var(--gw-fs-3xl); font-weight: 700; letter-spacing: var(--gw-tracking-tight); color: var(--gw-text); line-height: 1.2; }
.gw-h2 { font-size: var(--gw-fs-2xl); font-weight: 700; letter-spacing: var(--gw-tracking-tight); color: var(--gw-text); line-height: 1.25; }
.gw-h3 { font-size: var(--gw-fs-xl); font-weight: 650; letter-spacing: var(--gw-tracking-tight); color: var(--gw-text); line-height: 1.3; }
.gw-h4 { font-size: var(--gw-fs-lg); font-weight: 650; letter-spacing: -0.008em;  color: var(--gw-text); line-height: 1.35; }

.gw-body   { font-size: var(--gw-fs-md); color: var(--gw-text-2); line-height: 1.6; }
.gw-caption{ font-size: var(--gw-fs-sm); color: var(--gw-text-3); line-height: 1.5; }
.gw-meta   { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); line-height: 1.4; }

/* Etiqueta de sección: la única mayúscula del sistema */
.gw-eyebrow {
  font-size: var(--gw-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--gw-tracking-wide);
  text-transform: uppercase;
  color: var(--gw-text-muted);
}


/* ==========================================================================
   4 · SUPERFICIES · tarjetas y paneles
   ========================================================================== */

.gw-card.gw-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xl);
  box-shadow: var(--gw-sh-sm);
  transition: box-shadow var(--gw-dur-2) var(--gw-ease),
              border-color var(--gw-dur-2) var(--gw-ease),
              transform var(--gw-dur-2) var(--gw-ease);
  min-width: 0;
}
.gw-card-hover.gw-card-hover:hover {
  box-shadow: var(--gw-sh-md);
  border-color: var(--gw-border-strong);
}
.gw-card-flat.gw-card-flat { box-shadow: none; }
.gw-card-quiet.gw-card-quiet { background: var(--gw-surface-2); border-color: var(--gw-border-soft); box-shadow: none; }

/* Cabecera / cuerpo / pie de tarjeta */
.gw-card-head {
  display: flex; align-items: center; gap: var(--gw-sp-3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--gw-border-soft);
  min-width: 0;
}
/* Estas dos solo existían anidadas bajo .gw-card-head, así que fuera de la
   cabecera eran clases fantasma: quien las usaba creía estar dando jerarquía y
   no daba ninguna, y con el reset de Tailwind los dos párrafos salían iguales y
   pegados. La doble clase mantiene la misma especificidad que tenían, así que
   ninguna cabecera cambia un píxel. */
.gw-card-title.gw-card-title {
  font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text);
  letter-spacing: -0.008em; margin: 0; min-width: 0;
}
.gw-card-sub.gw-card-sub { font-size: var(--gw-fs-sm); color: var(--gw-text-3); margin: 2px 0 0; }
.gw-card-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gw-card-body { padding: 20px; min-width: 0; }
.gw-card-body-tight { padding: 14px 16px; }
.gw-card-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--gw-border-soft);
  background: var(--gw-surface-2);
  border-radius: 0 0 var(--gw-r-xl) var(--gw-r-xl);
}

/* Icono cuadrado que acompaña a los títulos */
.gw-card-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md);
  background: var(--gw-surface-3);
  color: var(--gw-text-3);
}
.gw-card-icon svg { width: 17px; height: 17px; }
.gw-card-icon.is-brand { background: var(--gw-brand-08); color: var(--gw-brand-on-soft); }

/* Separadores */
.gw-divider { height: 1px; background: var(--gw-border-soft); border: 0; margin: var(--gw-sp-5) 0; }
.gw-divider-v { width: 1px; align-self: stretch; background: var(--gw-border-soft); }

/* Etiqueta de sección con línea */
.gw-section-label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--gw-fs-2xs); font-weight: 600; letter-spacing: var(--gw-tracking-wide);
  text-transform: uppercase; color: var(--gw-text-muted);
  margin-bottom: 10px;
}
.gw-section-label::after { content: ''; flex: 1; height: 1px; background: var(--gw-border-soft); }


/* ==========================================================================
   5 · BOTONES
   ========================================================================== */

.gw-btn.gw-btn {
  --gw-btn-h: 38px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  height: var(--gw-btn-h);
  padding: 0 16px;
  border-radius: var(--gw-r-md);
  border: 1px solid transparent;
  font-family: var(--gw-font);
  font-size: var(--gw-fs-md);
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io),
              border-color var(--gw-dur-1) var(--gw-ease-io),
              color var(--gw-dur-1) var(--gw-ease-io),
              box-shadow var(--gw-dur-2) var(--gw-ease),
              transform var(--gw-dur-1) var(--gw-ease-io);
  transform: none;            /* neutraliza el translateY global heredado */
  box-shadow: var(--gw-sh-xs);
}
.gw-btn.gw-btn:hover:not(:disabled) { transform: none; }
.gw-btn.gw-btn:active:not(:disabled) { transform: scale(.975); }
.gw-btn.gw-btn:disabled,
.gw-btn.gw-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Bloqueado pero no mudo: se ve apagado, y al tocarlo explica por qué
   (p. ej. «Editar» un proyecto cuyo contrato ya firmó el cliente). */
.gw-btn.gw-btn.is-bloqueado { opacity: .6; }
.gw-btn.gw-btn svg,
.gw-btn.gw-btn i[data-lucide] { width: 15px; height: 15px; flex-shrink: 0; }
/* Anula el hack global de hitbox que descuadra los iconos dentro de botones */
.gw-btn.gw-btn i[data-lucide] { padding: 0; margin: 0; }

/* — Primario: color de marca — */
.gw-btn-primary.gw-btn-primary {
  background: var(--gw-brand);
  color: var(--gw-brand-ink);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px -6px var(--gw-brand-35);
}
.gw-btn-primary.gw-btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 2px 4px rgba(15,23,42,.07), 0 8px 20px -8px var(--gw-brand-35); }

/* — Oscuro: acción principal neutra — */
.gw-btn-dark.gw-btn-dark { background: var(--gw-900); color: #fff; }
.gw-btn-dark.gw-btn-dark:hover:not(:disabled) { background: var(--gw-800); box-shadow: var(--gw-sh-md); }

/* — Secundario: superficie con borde — */
.gw-btn-secondary.gw-btn-secondary {
  background: var(--gw-surface); color: var(--gw-text-2); border-color: var(--gw-border);
}
.gw-btn-secondary.gw-btn-secondary:hover:not(:disabled) {
  background: var(--gw-surface-2); color: var(--gw-text); border-color: var(--gw-border-strong);
}

/* — Soft: pastel de marca, sin peso visual — */
.gw-btn-soft.gw-btn-soft { background: var(--gw-brand-08); color: var(--gw-brand-on-soft); box-shadow: none; }
.gw-btn-soft.gw-btn-soft:hover:not(:disabled) { background: var(--gw-brand-12); }

/* — Ghost: solo texto — */
.gw-btn-ghost.gw-btn-ghost { background: transparent; color: var(--gw-text-3); box-shadow: none; }
.gw-btn-ghost.gw-btn-ghost:hover:not(:disabled) { background: var(--gw-surface-3); color: var(--gw-text); }

/* — Peligro — */
.gw-btn-danger.gw-btn-danger { background: var(--gw-danger-bg); color: var(--gw-danger-ink); border-color: var(--gw-danger-bd); box-shadow: none; }
.gw-btn-danger.gw-btn-danger:hover:not(:disabled) { background: var(--gw-danger-solid); color: #fff; border-color: transparent; }
.gw-btn-danger-solid.gw-btn-danger-solid { background: var(--gw-danger-solid); color: #fff; }
.gw-btn-danger-solid.gw-btn-danger-solid:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 6px 16px -8px rgba(225,29,72,.5); }

/* — Éxito suave — */
.gw-btn-success.gw-btn-success { background: var(--gw-success-bg); color: var(--gw-success-ink); border-color: var(--gw-success-bd); box-shadow: none; }
.gw-btn-success.gw-btn-success:hover:not(:disabled) { background: var(--gw-success-solid); color: #fff; border-color: transparent; }

/* — Tamaños — */
.gw-btn-xs.gw-btn-xs { --gw-btn-h: 28px; padding: 0 10px; font-size: var(--gw-fs-sm); border-radius: var(--gw-r-sm); gap: 5px; }
.gw-btn-xs.gw-btn-xs svg, .gw-btn-xs.gw-btn-xs i[data-lucide] { width: 13px; height: 13px; }
.gw-btn-sm.gw-btn-sm { --gw-btn-h: 32px; padding: 0 12px; font-size: var(--gw-fs-sm); gap: 6px; }
.gw-btn-sm.gw-btn-sm svg, .gw-btn-sm.gw-btn-sm i[data-lucide] { width: 14px; height: 14px; }
.gw-btn-lg.gw-btn-lg { --gw-btn-h: 46px; padding: 0 24px; font-size: var(--gw-fs-lg); border-radius: var(--gw-r-lg); }
.gw-btn-block.gw-btn-block { display: flex; width: 100%; }

/* — Botón-icono cuadrado — */
.gw-icon-btn.gw-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--gw-r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gw-text-muted);
  cursor: pointer;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io), border-color var(--gw-dur-1) var(--gw-ease-io);
  transform: none;
  box-shadow: none;
}
.gw-icon-btn.gw-icon-btn:hover:not(:disabled) { background: var(--gw-surface-3); color: var(--gw-text); transform: none; box-shadow: none; }
.gw-icon-btn.gw-icon-btn:active:not(:disabled) { transform: scale(.93); }
.gw-icon-btn.gw-icon-btn svg,
.gw-icon-btn.gw-icon-btn i[data-lucide] { width: 16px; height: 16px; padding: 0; margin: 0; }
.gw-icon-btn-sm.gw-icon-btn-sm { width: 28px; height: 28px; border-radius: var(--gw-r-sm); }
.gw-icon-btn-sm.gw-icon-btn-sm svg, .gw-icon-btn-sm.gw-icon-btn-sm i[data-lucide] { width: 14px; height: 14px; }
.gw-icon-btn-bordered.gw-icon-btn-bordered { border-color: var(--gw-border); background: var(--gw-surface); box-shadow: var(--gw-sh-xs); }
.gw-icon-btn-danger.gw-icon-btn-danger:hover:not(:disabled) { background: var(--gw-danger-bg); color: var(--gw-danger-ink); }

/* — Contador flotante sobre un botón — */
.gw-btn-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill);
  background: var(--gw-danger-solid); color: #fff;
  font-size: var(--gw-fs-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--gw-surface);
  pointer-events: none;
}
.gw-btn-badge.is-brand { background: var(--gw-brand); color: var(--gw-brand-ink); }

/* — Opción rectangular seleccionable (ordenar, elegir) — */
.gw-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  background: var(--gw-surface);
  color: var(--gw-text-2);
  font-size: var(--gw-fs-sm); font-weight: 600;
  cursor: pointer; text-align: center;
  transition: all var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: var(--gw-sh-xs);
  min-width: 0;
}
.gw-opt:hover { border-color: var(--gw-border-strong); color: var(--gw-text); transform: none; }
.gw-opt.is-on { background: var(--gw-brand-08); border-color: var(--gw-brand-20); color: var(--gw-brand-on-soft); box-shadow: none; }

/* — Píldora seleccionable (filtros por etiqueta) — */
.gw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-pill);
  background: var(--gw-surface);
  color: var(--gw-text-2);
  font-size: var(--gw-fs-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.gw-pill:hover { border-color: var(--gw-border-strong); color: var(--gw-text); transform: none; }
.gw-pill.is-on { background: var(--gw-900); border-color: transparent; color: #fff; }
body.dark-mode .gw-pill.is-on { background: var(--gw-brand); color: var(--gw-brand-ink); }

/* — Fila con interruptor nativo — */
.gw-toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  background: var(--gw-surface);
  cursor: pointer;
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), background-color var(--gw-dur-1) var(--gw-ease-io);
  min-width: 0;
}
.gw-toggle-row:hover { border-color: var(--gw-border-strong); background: var(--gw-surface-2); }
.gw-toggle-ico {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-sm);
  background: var(--gw-surface-3); color: var(--gw-text-3);
}
.gw-toggle-ico svg, .gw-toggle-ico i[data-lucide] { width: 14px; height: 14px; padding: 0; margin: 0; }
.gw-toggle-label { flex: 1; min-width: 0; font-size: var(--gw-fs-md); font-weight: 550; color: var(--gw-text-2); }
.gw-native-check {
  width: 17px; height: 17px; flex-shrink: 0;
  accent-color: var(--gw-brand);
  cursor: pointer;
}

/* — Spinner interno — */
.gw-spin {
  display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: gw-rotate .6s linear infinite;
  opacity: .85;
}
@keyframes gw-rotate { to { transform: rotate(360deg); } }

/* — Grupo segmentado (toggles de vista) — */
.gw-segment {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  background: var(--gw-surface-3);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
}
.gw-segment > button,
.gw-segment > .gw-segment-item {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-sm);
  font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text-3);
  transition: all var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-segment > button:hover { color: var(--gw-text); transform: none; box-shadow: none; }
.gw-segment > button.is-active,
.gw-segment > .gw-segment-item.is-active {
  background: var(--gw-surface); color: var(--gw-text); box-shadow: var(--gw-sh-xs);
}
.gw-segment svg, .gw-segment i[data-lucide] { width: 14px; height: 14px; padding: 0; margin: 0; }


/* ==========================================================================
   6 · FORMULARIOS
   ========================================================================== */

.gw-field { display: block; margin-bottom: 16px; min-width: 0; }
.gw-form-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.gw-form-stack .gw-field:last-child { margin-bottom: 0; }
.gw-label {
  display: block; margin-bottom: 6px;
  font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text-2);
  letter-spacing: -0.003em;
}
.gw-label .gw-req { color: var(--gw-danger-ink); margin-left: 2px; }

.gw-input.gw-input,
.gw-select.gw-select,
.gw-textarea.gw-textarea {
  display: block; width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  font-family: var(--gw-font);
  font-size: var(--gw-fs-md);
  font-weight: 500;
  color: var(--gw-text);
  line-height: 1.45;
  outline: none;
  box-shadow: var(--gw-sh-xs);
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease), background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-input.gw-input:hover:not(:disabled),
.gw-select.gw-select:hover:not(:disabled),
.gw-textarea.gw-textarea:hover:not(:disabled) { border-color: var(--gw-border-strong); }
.gw-input.gw-input:focus,
.gw-select.gw-select:focus,
.gw-textarea.gw-textarea:focus {
  border-color: var(--gw-brand);
  box-shadow: var(--gw-ring);
  outline: none;
}
.gw-input.gw-input:disabled,
.gw-select.gw-select:disabled,
.gw-textarea.gw-textarea:disabled {
  background: var(--gw-surface-2); color: var(--gw-text-muted); cursor: not-allowed; box-shadow: none;
}
.gw-textarea.gw-textarea { min-height: 92px; resize: vertical; }

.gw-select.gw-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}

/* Campos de fecha y hora: el icono nativo del navegador es negro y en modo
   oscuro se queda invisible sobre el fondo. Se invierte y se atenúa para que
   siga la línea del resto de la interfaz. */
.gw-input[type="date"],
.gw-input[type="time"],
.gw-input[type="datetime-local"],
.gw-input[type="month"] { position: relative; }
.gw-input::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  transition: opacity var(--gw-dur-1) var(--gw-ease-io);
}
.gw-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
body.dark-mode .gw-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .65; }
body.dark-mode .gw-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Firefox y navegadores sin ese pseudo-elemento */
body.dark-mode .gw-input[type="date"],
body.dark-mode .gw-input[type="datetime-local"] { color-scheme: dark; }

/* iPhone: un campo de fecha u hora trae un ancho mínimo propio y, en una grilla
   de dos columnas, se salía de la hoja (lo vio el usuario en «Pedir una
   corrección», 2026-10-18). Sin la apariencia nativa y con min-width 0 se
   ajusta a su columna; el selector nativo se sigue abriendo al tocarlo. Vacío,
   Safari lo dejaba sin alto: el min-height lo sostiene. */
.gw-input[type="date"],
.gw-input[type="time"],
.gw-input[type="datetime-local"],
.gw-input[type="month"] { display: block; width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.gw-input::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }

/* Estado de error */
.gw-input.is-invalid, .gw-select.is-invalid, .gw-textarea.is-invalid {
  border-color: var(--gw-danger-solid);
  box-shadow: var(--gw-ring-danger);
}
.gw-hint  { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); margin-top: 5px; }
.gw-error { font-size: var(--gw-fs-xs); color: var(--gw-danger-ink); font-weight: 600; margin-top: 5px; display: flex; align-items: center; gap: 4px; }

/* Input con icono a la izquierda */
.gw-input-wrap { position: relative; display: block; min-width: 0; }
.gw-input-wrap > .gw-input-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--gw-text-muted); pointer-events: none; display: flex;
}
.gw-input-wrap > .gw-input-ico svg,
.gw-input-wrap > .gw-input-ico i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }
.gw-input-wrap > .gw-input { padding-left: 35px; }

/* Buscador */
.gw-search.gw-search { border-radius: var(--gw-r-pill); background: var(--gw-surface-2); box-shadow: none; }
.gw-search.gw-search:focus { background: var(--gw-surface); }

/* Campo con prefijo (arroba, moneda, protocolo…) */
.gw-input-group {
  display: flex; align-items: stretch; min-width: 0;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-sh-xs);
  overflow: hidden;
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease);
}
.gw-input-group:hover { border-color: var(--gw-border-strong); }
.gw-input-group:focus-within { border-color: var(--gw-brand); box-shadow: var(--gw-ring); }
.gw-input-group-addon {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 11px; flex-shrink: 0;
  background: var(--gw-surface-2);
  border-right: 1px solid var(--gw-border);
  color: var(--gw-text-muted);
  font-size: var(--gw-fs-md); font-weight: 600;
  white-space: nowrap;
}
.gw-input-group-addon svg,
.gw-input-group-addon i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }
.gw-input-group > .gw-input.gw-input {
  border: 0; box-shadow: none; border-radius: 0; background: transparent; flex: 1; min-width: 0;
}
.gw-input-group > .gw-input.gw-input:focus { box-shadow: none; }

/* ── Campo compuesto ───────────────────────────────────────────────────────
   Un marco que enseña el foco entero (su :focus-within: borde lima y anillo)
   con un campo desnudo dentro: .gw-input-group, el buscador de la barra, la
   caja y el buscador del chat, y cualquier marco nuevo con
   .gw-campo-compuesto (el campo de dentro, .gw-campo-compuesto-campo).

   El campo de dentro NO dibuja nada propio —ni borde, ni anillo, ni contorno,
   ni fondo— en ninguno de los dos temas: un solo indicador de foco, el del
   marco. Lleva !important y especificidad de sobra porque en oscuro hay dos
   reglas con !important que lo pintaban: «body.dark-mode input, select,
   textarea» (includes/theme_engine.php) y «body.dark-mode .gw-input.gw-input
   :focus» (más abajo, §modo oscuro). Era el doble borde verde de la caja del
   chat. */
.gw-campo-compuesto:focus-within { border-color: var(--gw-brand); box-shadow: var(--gw-ring); }
body .gw-campo-compuesto .gw-campo-compuesto-campo.gw-campo-compuesto-campo,
body .gw-campo-compuesto .gw-campo-compuesto-campo.gw-campo-compuesto-campo:focus,
body .gw-input-group > .gw-input.gw-input.gw-input,
body .gw-input-group > .gw-input.gw-input.gw-input:focus,
body.gw-ui .gw-appbar-search > input,
body.gw-ui .gw-appbar-search > input:focus,
body.gw-ui.dark-mode .gw-appbar-search > input,
body.gw-ui.dark-mode .gw-appbar-search > input:focus,
body .gw-chat-busca .gw-chat-busca-campo.gw-chat-busca-campo,
body .gw-chat-busca .gw-chat-busca-campo.gw-chat-busca-campo:focus,
body .gw-chat-caja .gw-chat-entrada.gw-chat-entrada,
body .gw-chat-caja .gw-chat-entrada.gw-chat-entrada:focus,
body.dark-mode .gw-campo-compuesto .gw-campo-compuesto-campo.gw-campo-compuesto-campo,
body.dark-mode .gw-campo-compuesto .gw-campo-compuesto-campo.gw-campo-compuesto-campo:focus,
body.dark-mode .gw-input-group > .gw-input.gw-input.gw-input,
body.dark-mode .gw-input-group > .gw-input.gw-input.gw-input:focus,
body.dark-mode .gw-chat-busca .gw-chat-busca-campo.gw-chat-busca-campo,
body.dark-mode .gw-chat-busca .gw-chat-busca-campo.gw-chat-busca-campo:focus,
body.dark-mode .gw-chat-caja .gw-chat-entrada.gw-chat-entrada,
body.dark-mode .gw-chat-caja .gw-chat-entrada.gw-chat-entrada:focus {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* En oscuro, la tinta de los campos del chat sale de los tokens y no del
   blanco fijo que pone theme_engine.php con !important. */
body.dark-mode .gw-chat-caja .gw-chat-entrada.gw-chat-entrada { color: var(--gw-text) !important; }
body.dark-mode .gw-chat-busca .gw-chat-busca-campo.gw-chat-busca-campo { color: var(--gw-text) !important; }

/* Bloque de campos agrupados */
.gw-fieldset {
  padding: 18px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border-soft);
  border-radius: var(--gw-r-lg);
  min-width: 0;
}

/* Avisos en línea */
.gw-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--gw-slate-bd);
  background: var(--gw-slate-bg);
  color: var(--gw-slate-ink);
  border-radius: var(--gw-r-lg);
  font-size: var(--gw-fs-md); font-weight: 550; line-height: 1.5;
  min-width: 0; overflow-wrap: anywhere;
}
.gw-alert > svg, .gw-alert > i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; padding: 0; }
.gw-alert-danger  { background: var(--gw-danger-bg);  border-color: var(--gw-danger-bd);  color: var(--gw-danger-ink); }
.gw-alert-warn    { background: var(--gw-warn-bg);    border-color: var(--gw-warn-bd);    color: var(--gw-warn-ink); }
.gw-alert-success { background: var(--gw-success-bg); border-color: var(--gw-success-bd); color: var(--gw-success-ink); }
.gw-alert-info    { background: var(--gw-info-bg);    border-color: var(--gw-info-bd);    color: var(--gw-info-ink); }

/* Checkbox / radio a medida */
.gw-check {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gw-300);
  border-radius: 5px;
  background: var(--gw-surface);
  color: transparent;
  transition: all var(--gw-dur-1) var(--gw-ease-io);
  cursor: pointer;
}
.gw-check svg, .gw-check i[data-lucide] { width: 12px; height: 12px; padding: 0; margin: 0; }
.gw-check.is-checked { background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink); }
/* Se nota que es pulsable: sin esto la casilla parecía decorativa */
label:hover > .gw-check,
.gw-row:hover .gw-check { border-color: var(--gw-brand); }
label:hover > .gw-check.is-checked,
.gw-row:hover .gw-check.is-checked { filter: brightness(1.06); }
.gw-check-round { border-radius: 50%; }

/* Tarjeta de canal seleccionable (multiselección) */
.gw-channel {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 12px;
  text-align: left;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  cursor: pointer;
  box-shadow: var(--gw-sh-xs);
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), background-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease);
  transform: none;
  min-width: 0;
}
.gw-channel:hover { border-color: var(--gw-border-strong); transform: none; box-shadow: var(--gw-sh-sm); }
.gw-channel.is-on { border-color: var(--gw-brand); background: var(--gw-brand-04); box-shadow: var(--gw-ring); }
.gw-channel-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md);
  background: var(--gw-surface-3); color: var(--gw-text-3);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-channel-ico svg { width: 17px; height: 17px; }
.gw-channel.is-on .gw-channel-ico { background: var(--gw-brand); color: var(--gw-brand-ink); }
.gw-channel-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.gw-channel-name { font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-channel-hint { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); }
.gw-channel .gw-check { color: transparent; }
.gw-channel .gw-check.is-checked { color: var(--gw-brand-ink); }

/* Interruptor */
.gw-switch {
  position: relative; display: inline-block;
  width: 40px; height: 23px; flex-shrink: 0;
  border-radius: var(--gw-r-pill);
  background: var(--gw-300);
  cursor: pointer;
  transition: background-color var(--gw-dur-2) var(--gw-ease-io);
}
.gw-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: var(--gw-sh-sm);
  transition: transform var(--gw-dur-2) var(--gw-ease);
}
.gw-switch.is-on { background: var(--gw-brand); }
.gw-switch.is-on::after { transform: translateX(17px); }


/* ==========================================================================
   7 · CHIPS / BADGES PASTEL
   ========================================================================== */

.gw-chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: var(--gw-r-pill);
  border: 1px solid var(--gw-slate-bd);
  background: var(--gw-slate-bg);
  color: var(--gw-slate-ink);
  font-size: var(--gw-fs-xs);
  font-weight: 600;
  letter-spacing: -0.002em;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.gw-chip > svg,
.gw-chip > i[data-lucide] { width: 12px; height: 12px; flex-shrink: 0; padding: 0; margin: 0; }
.gw-chip-sm { padding: 2px 7px; font-size: var(--gw-fs-2xs); gap: 4px; }
.gw-chip-lg { padding: 5px 12px; font-size: var(--gw-fs-sm); }
.gw-chip-square { border-radius: var(--gw-r-sm); }

.gw-chip-violet { background: var(--gw-violet-bg); border-color: var(--gw-violet-bd); color: var(--gw-violet-ink); }
.gw-chip-indigo { background: var(--gw-indigo-bg); border-color: var(--gw-indigo-bd); color: var(--gw-indigo-ink); }
.gw-chip-blue   { background: var(--gw-blue-bg);   border-color: var(--gw-blue-bd);   color: var(--gw-blue-ink); }
.gw-chip-sky    { background: var(--gw-sky-bg);    border-color: var(--gw-sky-bd);    color: var(--gw-sky-ink); }
.gw-chip-teal   { background: var(--gw-teal-bg);   border-color: var(--gw-teal-bd);   color: var(--gw-teal-ink); }
.gw-chip-green  { background: var(--gw-green-bg);  border-color: var(--gw-green-bd);  color: var(--gw-green-ink); }
.gw-chip-lime   { background: var(--gw-lime-bg);   border-color: var(--gw-lime-bd);   color: var(--gw-lime-ink); }
.gw-chip-amber  { background: var(--gw-amber-bg);  border-color: var(--gw-amber-bd);  color: var(--gw-amber-ink); }
.gw-chip-orange { background: var(--gw-orange-bg); border-color: var(--gw-orange-bd); color: var(--gw-orange-ink); }
.gw-chip-rose   { background: var(--gw-rose-bg);   border-color: var(--gw-rose-bd);   color: var(--gw-rose-ink); }
.gw-chip-pink   { background: var(--gw-pink-bg);   border-color: var(--gw-pink-bd);   color: var(--gw-pink-ink); }
.gw-chip-slate  { background: var(--gw-slate-bg);  border-color: var(--gw-slate-bd);  color: var(--gw-slate-ink); }
.gw-chip-brand  { background: var(--gw-brand-08);  border-color: var(--gw-brand-20);  color: var(--gw-brand-on-soft); }

/* Variantes de intensidad */
.gw-chip-solid  { border-color: transparent; background: var(--gw-900); color: #fff; }
.gw-chip-outline{ background: transparent; }
.gw-chip-ghost  { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }

/* Icono inyectado con v-html dentro de un chip: el SVG puede traer sus
   propias clases de tamaño, así que las neutralizamos desde aquí. */
.gw-chip-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gw-chip-ico svg { width: 14px; height: 14px; }
.gw-chip-sm .gw-chip-ico svg { width: 12px; height: 12px; }

/* Punto de estado */
.gw-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.gw-dot-pulse { position: relative; }
.gw-dot-pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: gw-pulse 1.8s var(--gw-ease-io) infinite;
}
@keyframes gw-pulse {
  0%   { transform: scale(.7); opacity: .45; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Contador */
.gw-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--gw-r-pill);
  background: var(--gw-surface-3);
  color: var(--gw-text-3);
  font-size: var(--gw-fs-xs); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.gw-count-brand { background: var(--gw-brand-12); color: var(--gw-brand-on-soft); }
.gw-count-danger{ background: var(--gw-danger-solid); color: #fff; }


/* ==========================================================================
   8 · AVATARES
   ========================================================================== */

.gw-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--gw-r-md);
  overflow: hidden;
  background: var(--gw-surface-3);
  color: #fff;
  font-size: var(--gw-fs-sm); font-weight: 650;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  user-select: none;
}
.gw-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-avatar-round { border-radius: 50%; }
.gw-avatar-xs { width: 20px; height: 20px; font-size: 9px;  border-radius: var(--gw-r-xs); }
.gw-avatar-sm { width: 26px; height: 26px; font-size: 10px; border-radius: var(--gw-r-sm); }
.gw-avatar-lg { width: 44px; height: 44px; font-size: var(--gw-fs-xl); border-radius: var(--gw-r-lg); }
.gw-avatar-xl { width: 72px; height: 72px; font-size: 26px; border-radius: var(--gw-r-2xl); }
.gw-avatar-ring { box-shadow: 0 0 0 2px var(--gw-surface), 0 0 0 3px var(--gw-border); }

.gw-avatar-group { display: inline-flex; align-items: center; }
.gw-avatar-group > * { margin-left: -7px; box-shadow: 0 0 0 2px var(--gw-surface); }
.gw-avatar-group > *:first-child { margin-left: 0; }


/* ==========================================================================
   9 · TABS
   ========================================================================== */

.gw-tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--gw-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.gw-tabs::-webkit-scrollbar { display: none; }
.gw-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text-muted);
  white-space: nowrap;
  transition: color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-tab:hover { color: var(--gw-text-2); transform: none; box-shadow: none; }
.gw-tab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--gw-brand);
  transform: scaleX(0);
  transition: transform var(--gw-dur-2) var(--gw-ease);
}
.gw-tab.is-active { color: var(--gw-text); }
.gw-tab.is-active::after { transform: scaleX(1); }
.gw-tab svg, .gw-tab i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }

/* Tabs tipo píldora */
.gw-tabs-pill { border-bottom: 0; gap: 4px; padding: 3px; background: var(--gw-surface-3); border-radius: var(--gw-r-lg); }
.gw-tabs-pill .gw-tab { padding: 7px 14px; border-radius: var(--gw-r-md); font-size: var(--gw-fs-sm); }
.gw-tabs-pill .gw-tab::after { display: none; }
.gw-tabs-pill .gw-tab.is-active { background: var(--gw-surface); box-shadow: var(--gw-sh-xs); }

/* EN EL IPHONE, TOCAR UN CAMPO NO AGRANDA LA PÁGINA (2026-10-11). Safari
   amplía la vista al enfocar un campo con letra de menos de 16 px, y no la
   devuelve al salir: el acceso de GW Connection se quedaba descuadrado
   (visto en el simulador). En pantallas táctiles los campos de texto van a
   16 px; con ratón no cambia nada. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}

/* EN EL TELÉFONO, TODAS LAS PESTAÑAS A LA VISTA (2026-10-11). La fila se
   deslizaba con la barra escondida y sin asomar por el borde: en un iPhone 14,
   «Seguridad» y «Notificaciones» de Configuraciones quedaban fuera de la
   pantalla sin nada que dijera que existían, y la pestaña abierta podía ser
   una que no se veía. Aquí pasan a pastillas que bajan de línea. Las etapas
   del lead (.gw-tabs-etapa) siguen en su fila: son un camino, no un menú. */
@media (max-width: 640px) {
  .gw-tabs:not(.gw-tabs-etapa) {
    flex-wrap: wrap; overflow: visible; gap: 6px;
    border-bottom: 0; padding-bottom: 2px;
  }
  .gw-tabs:not(.gw-tabs-etapa) .gw-tab {
    padding: 7px 12px; border-radius: 999px;
    background: var(--gw-surface-3); font-size: var(--gw-fs-sm);
    min-height: 36px;
  }
  .gw-tabs:not(.gw-tabs-etapa) .gw-tab::after { display: none; }
  .gw-tabs:not(.gw-tabs-etapa) .gw-tab.is-active {
    background: var(--gw-surface); color: var(--gw-text);
    box-shadow: inset 0 0 0 1.5px var(--gw-brand);
  }
}


/* ==========================================================================
   10 · TABLAS
   ========================================================================== */

.gw-table-wrap {
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xl);
  background: var(--gw-surface);
  overflow: hidden;
  box-shadow: var(--gw-sh-sm);
}
.gw-table-scroll { overflow: auto; max-width: 100%; }
.gw-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.gw-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--gw-surface-2);
  padding: 10px 16px;
  text-align: left;
  font-size: var(--gw-fs-2xs); font-weight: 600;
  letter-spacing: var(--gw-tracking-wide); text-transform: uppercase;
  color: var(--gw-text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--gw-border);
}
.gw-table tbody td {
  padding: 12px 16px;
  font-size: var(--gw-fs-md);
  color: var(--gw-text-2);
  border-bottom: 1px solid var(--gw-border-soft);
  vertical-align: middle;
}
.gw-table tbody tr { transition: background-color var(--gw-dur-1) var(--gw-ease-io); }
.gw-table tbody tr:hover { background: var(--gw-surface-2); }
.gw-table tbody tr:last-child td { border-bottom: 0; }
.gw-table .gw-td-strong { color: var(--gw-text); font-weight: 600; }
.gw-table .gw-td-actions { text-align: right; white-space: nowrap; }


/* ==========================================================================
   10b · LISTAS DE FILAS
   ========================================================================== */

.gw-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ── Una lista NO puede tocar el borde de su tarjeta ───────────────────────
   .gw-card no trae padding —lo pone .gw-card-body— y .gw-list tampoco. Cuando
   alguien escribe la lista directamente dentro de la tarjeta, las filas quedan
   a ras: borde de la fila contra borde de la tarjeta, y el radio de 14px de la
   fila chocando con el de 18px de la caja. Es la esquina doble que se ve fea.

   Pasaba en trece sitios de nueve pantallas, así que la regla va aquí y no en
   cada página. El combinador `>` es lo que la hace segura: el patrón sano
   —tarjeta > cuerpo > lista— no es hijo directo y no se toca.

   20px a los lados, no 16, para que la lista quede alineada con el texto de
   .gw-card-head cuando la tarjeta lleva cabecera. */
.gw-card > .gw-list { padding: 14px 20px; }

/* ── Filas apiladas sin lista que las separe ───────────────────────────────
   .gw-row tiene borde, radio y sombra, pero margin 0: los 8px de aire los pone
   .gw-list. Cada vez que alguien apila filas dentro de un cuerpo de tarjeta, de
   un modal o desde JavaScript, salen pegadas de dos en dos.

   El :not(.gw-list) deja intacto el caso bueno, incluidas las listas que llevan
   además otras clases o un id. */
:not(.gw-list) > .gw-row + .gw-row { margin-top: 8px; }

.gw-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  box-shadow: var(--gw-sh-xs);
  min-width: 0;
  transition: border-color var(--gw-dur-2) var(--gw-ease), box-shadow var(--gw-dur-2) var(--gw-ease);
}
.gw-row:hover { border-color: var(--gw-border-strong); box-shadow: var(--gw-sh-sm); }
.gw-row-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.gw-row-title {
  /* De bloque a propósito: el recorte con puntos suspensivos y el max-width de
     abajo son inertes en un elemento en línea, y hay veintinueve sitios que
     ponen esta clase en un <span>. Los que van dentro de un flex se salvaban
     por casualidad; el resto fallaba en silencio. */
  display: block;
  font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text);
  letter-spacing: -0.008em; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; min-width: 0;
}
.gw-row-title-sub { color: var(--gw-text-muted); font-weight: 500; }
.gw-row-sub { display: block; font-size: var(--gw-fs-sm); color: var(--gw-text-3); line-height: 1.45; }
.gw-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gw-row-rank {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-sm);
  background: var(--gw-surface-3); color: var(--gw-text-3);
  font-size: var(--gw-fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gw-row.is-p1 { border-color: var(--gw-rose-bd); }
.gw-row.is-p1 .gw-row-rank { background: var(--gw-rose-bg); color: var(--gw-rose-ink); }
.gw-row.is-p2 { border-color: var(--gw-amber-bd); }
.gw-row.is-p2 .gw-row-rank { background: var(--gw-amber-bg); color: var(--gw-amber-ink); }

@media (max-width: 560px) {
  .gw-row { flex-wrap: wrap; }
  .gw-row-actions { width: 100%; }
  .gw-row-actions > .gw-btn { flex: 1; }
}


/* ==========================================================================
   11 · ESTADOS VACÍOS Y CARGA
   ========================================================================== */

.gw-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 4px;
}
.gw-empty-ico {
  width: 52px; height: 52px; margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-xl);
  background: var(--gw-surface-3);
  color: var(--gw-text-faint);
}
.gw-empty-ico svg, .gw-empty-ico i[data-lucide] { width: 22px; height: 22px; padding: 0; margin: 0; }
.gw-empty-title { font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text-2); }
.gw-empty-text  { font-size: var(--gw-fs-md); color: var(--gw-text-muted); max-width: 32ch; }
.gw-empty-dashed { border: 1.5px dashed var(--gw-200); border-radius: var(--gw-r-xl); background: var(--gw-25); }

/* Skeletons */
.gw-skel {
  position: relative; overflow: hidden;
  background: var(--gw-100);
  border-radius: var(--gw-r-sm);
}
.gw-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%);
  animation: gw-shimmer 1.4s var(--gw-ease-io) infinite;
}
@keyframes gw-shimmer { 100% { transform: translateX(100%); } }
.gw-skel-line { height: 10px; }
.gw-skel-title { height: 14px; width: 55%; }
.gw-skel-circle { border-radius: 50%; }

/* Barra de progreso */
.gw-progress { height: 6px; border-radius: var(--gw-r-pill); background: var(--gw-surface-3); overflow: hidden; }
.gw-progress > span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--gw-brand);
  transition: width var(--gw-dur-4) var(--gw-ease);
}

/* Barra de carga superior (indeterminada) */
.gw-topbar-loading {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: var(--gw-z-toast);
  background: var(--gw-brand-12); overflow: hidden;
}
.gw-topbar-loading::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gw-brand);
  transform: translateX(-100%);
  animation: gw-indeterminate 1.1s var(--gw-ease-io) infinite;
}
@keyframes gw-indeterminate { 100% { transform: translateX(100%); } }


/* ==========================================================================
   12 · SISTEMA DE MODALES  ·  el corazón del rediseño
   ========================================================================== */

.gw-modal-overlay {
  position: fixed; inset: 0;
  z-index: var(--gw-z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  overscroll-behavior: contain;
}
.gw-modal-overlay > .gw-modal-scrim { position: absolute; inset: 0; cursor: default; }

.gw-modal {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 900px);
  background: var(--gw-surface);
  border-radius: var(--gw-r-2xl);
  box-shadow: var(--gw-sh-xl);
  border: 1px solid var(--gw-border);
  overflow: hidden;                /* mantiene los radios en head/foot */
  min-width: 0;
}
.gw-modal-xs { max-width: 380px; }
.gw-modal-sm { max-width: 460px; }
.gw-modal-md { max-width: 620px; }
.gw-modal-lg { max-width: 820px; }
.gw-modal-xl { max-width: 1040px; }
.gw-modal-full { max-width: min(1280px, 96vw); max-height: 92vh; }

/* — Cabecera fija — */
.gw-modal-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--gw-border-soft);
  flex-shrink: 0;
  background: var(--gw-surface);
  min-width: 0;
}
.gw-modal-head-ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-lg);
  background: var(--gw-brand-08);
  color: var(--gw-brand-on-soft);
}
.gw-modal-head-ico svg, .gw-modal-head-ico i[data-lucide] { width: 18px; height: 18px; padding: 0; margin: 0; }
.gw-modal-head-ico.is-danger  { background: var(--gw-danger-bg);  color: var(--gw-danger-ink); }
.gw-modal-head-ico.is-success { background: var(--gw-success-bg); color: var(--gw-success-ink); }
.gw-modal-head-ico.is-warn    { background: var(--gw-warn-bg);    color: var(--gw-warn-ink); }
.gw-modal-head-ico.is-info    { background: var(--gw-info-bg);    color: var(--gw-info-ink); }
.gw-modal-head-ico.is-neutral { background: var(--gw-surface-3);  color: var(--gw-text-3); }

.gw-modal-head-txt { flex: 1; min-width: 0; padding-top: 1px; }
.gw-modal-title {
  margin: 0;
  font-size: var(--gw-fs-xl); font-weight: 650; color: var(--gw-text);
  letter-spacing: var(--gw-tracking-tight); line-height: 1.3;
  overflow-wrap: anywhere;
}
.gw-modal-sub { margin: 3px 0 0; font-size: var(--gw-fs-md); color: var(--gw-text-3); line-height: 1.5; }
.gw-modal-close.gw-modal-close {
  width: 32px; height: 32px; flex-shrink: 0; margin: -2px -4px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-md);
  color: var(--gw-text-muted);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-modal-close.gw-modal-close:hover { background: var(--gw-surface-3); color: var(--gw-text); transform: none; box-shadow: none; }
.gw-modal-close.gw-modal-close svg,
.gw-modal-close.gw-modal-close i[data-lucide] { width: 17px; height: 17px; padding: 0; margin: 0; }

/* — Cuerpo con scroll propio — */
.gw-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 22px;
  /* Sin -webkit-overflow-scrolling: en iOS abre una capa propia y es lo que
     metía los modales por debajo de la barra inferior (ver .gw-main). */
}
.gw-modal-body-flush { padding: 0; }
.gw-modal-body-quiet { background: var(--gw-surface-2); }

/* — Pie fijo — */
.gw-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--gw-border-soft);
  background: var(--gw-surface);
  flex-shrink: 0;
}
.gw-modal-foot-between { justify-content: space-between; }
.gw-modal-foot .gw-modal-foot-note { margin-right: auto; font-size: var(--gw-fs-sm); color: var(--gw-text-muted); }

/* — Modal centrado tipo alerta — */
.gw-modal-center .gw-modal-head { flex-direction: column; align-items: center; text-align: center; border-bottom: 0; padding-bottom: 4px; }
.gw-modal-center .gw-modal-head-ico { width: 52px; height: 52px; border-radius: var(--gw-r-xl); }
.gw-modal-center .gw-modal-head-ico svg { width: 24px; height: 24px; }
.gw-modal-center .gw-modal-head-txt { text-align: center; }
.gw-modal-center .gw-modal-body { padding-top: 10px; text-align: center; }
.gw-modal-center .gw-modal-foot { justify-content: center; border-top: 0; padding-top: 4px; }

/* — Animaciones — */
@keyframes gw-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gw-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gw-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.gw-modal-overlay { animation: gw-overlay-in var(--gw-dur-2) var(--gw-ease-io) both; }
.gw-modal { animation: gw-modal-in var(--gw-dur-3) var(--gw-ease) both; }
.gw-modal-overlay.is-closing { animation: gw-overlay-in var(--gw-dur-2) var(--gw-ease-io) reverse both; }
.gw-modal-overlay.is-closing .gw-modal { animation: gw-modal-in var(--gw-dur-2) var(--gw-ease-io) reverse both; }

/* — Móvil: hoja inferior — */
@media (max-width: 640px) {
  .gw-modal-overlay { padding: 0; align-items: flex-end; }
  .gw-modal {
    max-width: 100%;
    max-height: 92vh;
    /* Con la barra de Safari a la vista, 92vh mide más que la pantalla y la
       hoja se salía por arriba. dvh mide lo que de verdad se ve. */
    max-height: 92dvh;
    /* Con la app instalada, la hoja nunca sube por debajo de la hora. */
    max-height: min(92dvh, calc(100dvh - var(--gw-safe-top) - 12px));
    border-radius: var(--gw-r-2xl) var(--gw-r-2xl) 0 0;
    border-bottom: 0;
    animation: gw-sheet-in var(--gw-dur-3) var(--gw-ease) both;
  }
  .gw-modal-overlay.is-closing .gw-modal { animation: gw-sheet-in var(--gw-dur-2) var(--gw-ease-io) reverse both; }
  /* Asidero visual de la hoja */
  .gw-modal-head::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 4px; border-radius: var(--gw-r-pill); background: var(--gw-200);
  }
  .gw-modal-head { position: relative; padding-top: 22px; }
  .gw-modal-body { padding: 18px; }
  .gw-modal-foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .gw-modal-foot .gw-btn { flex: 1; }
  .gw-modal-center .gw-modal-head::before { display: none; }
  /* Las vistas a pantalla completa (un PDF) ocupan lo que se ve, no un 88vh
     fijo que en el teléfono se salía por arriba. */
  .gw-modal.gw-modal-full { height: calc(100dvh - var(--gw-safe-top) - 12px) !important; max-height: none; }
  /* Un formulario con su propio scroll dentro de un modal que ya se desplaza
     son dos barras peleando por el mismo dedo: en el teléfono manda el modal. */
  .gw-modal .gw-fp { max-height: none; overflow: visible; }
  /* Las filas de campos escritas a mano dentro de un diálogo se pueden partir
     en vez de salirse por el lado. */
  .gw-modal-html div[style*="display:flex"] { flex-wrap: wrap; }
}

/* La fila «Día · Hora · Dura» de agendar: en el teléfono el día ocupa la
   fila entera y hora y duración comparten la de abajo. Antes el día se
   quedaba en 69 px, sin sitio ni para la fecha. */
.gw-ag-fila { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 10px; margin-top: 10px; }
@media (max-width: 640px) {
  .gw-ag-fila { grid-template-columns: 1fr 1fr; }
  .gw-ag-fila > :first-child { grid-column: 1 / -1; }
}

/* Mientras hay un modal, lo de detrás no se desplaza con el dedo. */
body:has(.gw-modal-overlay:not([style*="display: none"])) .gw-main,
body:has(.gw-drawer-overlay:not([style*="display: none"])) .gw-main { overflow: hidden; }

/* — Con un modal abierto, la navegación del móvil se retira —
   Un modal es un paréntesis: mientras está abierto, la barra de abajo sobra y
   estorba. Aunque el modal ya va por encima, ocultarla es la garantía de que
   ningún navegador vuelva a dibujarla sobre el pie de botones. Se ignoran los
   modales ocultos con v-show, que siguen en la página con display:none. */
body:has(.gw-modal-overlay:not([style*="display: none"])) .gw-mobilenav,
body:has(.gw-drawer-overlay:not([style*="display: none"])) .gw-mobilenav { visibility: hidden; }

/* — Panel lateral (slide-over) — */
.gw-drawer-overlay {
  position: fixed; inset: 0; z-index: var(--gw-z-overlay);
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.gw-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: var(--gw-z-modal);
  display: flex; flex-direction: column;
  width: 100%; max-width: 420px;
  background: var(--gw-surface);
  border-left: 1px solid var(--gw-border);
  box-shadow: var(--gw-sh-xl);
}
.gw-drawer-lg { max-width: 560px; }
.gw-drawer > .gw-modal-head { border-radius: 0; }
@media (max-width: 640px) {
  .gw-drawer { max-width: 100%; }
  /* Un panel lateral no es una hoja: sin asidero, y su cabecera baja por
     debajo de la hora y su pie por encima de la barra de inicio. */
  .gw-drawer .gw-modal-head::before { display: none; }
  .gw-drawer > .gw-modal-head { padding-top: calc(16px + var(--gw-safe-top)); }
  .gw-drawer > .gw-modal-foot { padding-bottom: calc(14px + var(--gw-safe-bottom)); }
}

/* — Toasts — */
.gw-toast-stack {
  position: fixed; z-index: var(--gw-z-toast);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  top: 18px; right: 18px;
  max-width: min(380px, calc(100vw - 36px));
}
.gw-toast-stack.is-bottom { top: auto; bottom: 18px; flex-direction: column-reverse; }
.gw-toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  box-shadow: var(--gw-sh-pop);
  animation: gw-toast-in var(--gw-dur-3) var(--gw-ease) both;
  min-width: 260px;
}
.gw-toast-x {
  flex-shrink: 0; width: 22px; height: 22px; margin: -1px -3px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-sm);
  color: var(--gw-text-faint);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-toast-x:hover { background: var(--gw-surface-3); color: var(--gw-text-2); transform: none; box-shadow: none; }
.gw-toast-x svg { width: 13px; height: 13px; }
@keyframes gw-toast-in { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }
.gw-toast.is-closing { animation: gw-toast-in var(--gw-dur-2) var(--gw-ease-io) reverse both; }
.gw-toast-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md);
}
.gw-toast-ico svg { width: 16px; height: 16px; }
.gw-toast-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gw-toast-title { display: block; font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); line-height: 1.4; overflow-wrap: anywhere; }
.gw-toast-sub { display: block; font-size: var(--gw-fs-sm); color: var(--gw-text-3); line-height: 1.45; overflow-wrap: anywhere; }
.gw-toast-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--gw-brand); opacity: .45;
  transform-origin: left center;
  animation: gw-countdown linear both;
}
@keyframes gw-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  .gw-toast-stack { top: auto; bottom: calc(var(--gw-mobilenav-total) + 12px); left: 12px; right: 12px; max-width: none; }
  .gw-toast { min-width: 0; }
  @keyframes gw-toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
}

/* — Piezas internas que produce el motor de modales — */

/* Bloqueo de scroll mientras hay un diálogo abierto */
html.gw-modal-open, body.gw-modal-open { overflow: hidden !important; }

/* Contenido HTML libre dentro del cuerpo */
.gw-modal-html { font-size: var(--gw-fs-md); color: var(--gw-text-2); line-height: 1.6; overflow-wrap: anywhere; }
.gw-modal-html > *:first-child { margin-top: 0; }
.gw-modal-html > *:last-child { margin-bottom: 0; }
.gw-modal-html a { color: var(--gw-brand-on-soft); text-decoration: underline; text-underline-offset: 2px; }
.gw-modal-html ul { list-style: disc; padding-left: 1.25em; margin: .5em 0; }
.gw-modal-html ol { list-style: decimal; padding-left: 1.35em; margin: .5em 0; }
.gw-modal-html strong { color: var(--gw-text); font-weight: 650; }

.gw-modal-footnote {
  margin: 16px 0 0; padding-top: 13px;
  border-top: 1px solid var(--gw-border-soft);
  font-size: var(--gw-fs-sm); color: var(--gw-text-muted); text-align: center;
}
.gw-modal-input-wrap { margin-bottom: 0; }
.gw-modal-html + .gw-modal-input-wrap { margin-top: 18px; }
.gw-modal-center .gw-modal-input-wrap { text-align: left; }

.gw-modal-checkline {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--gw-fs-md); color: var(--gw-text-2); cursor: pointer;
}
.gw-modal-checkline input { width: 17px; height: 17px; accent-color: var(--gw-brand); cursor: pointer; }

.gw-modal-inline-loader { display: flex; align-items: center; justify-content: center; padding: 14px 0 4px; }

/* Barra de cuenta atrás del temporizador */
.gw-modal-timer {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--gw-brand); opacity: .4;
  transform-origin: left center;
  animation: gw-countdown linear both;
}

/* Sacudida al fallar la validación */
@keyframes gw-shake-kf {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.gw-shake { animation: gw-shake-kf .42s var(--gw-ease-io); }

/* — Barra flotante de acciones masivas — */
.gw-bulkbar {
  position: fixed; bottom: 24px; left: 0; right: 0;
  margin: 0 auto;
  width: -moz-fit-content; width: fit-content;
  max-width: calc(100vw - 32px);
  z-index: var(--gw-z-float);
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px 7px 15px;
  background: var(--gw-950);
  color: #fff;
  border-radius: var(--gw-r-pill);
  box-shadow: 0 18px 44px -14px rgba(2, 6, 23, .6), 0 3px 10px rgba(2, 6, 23, .28);
}
.gw-bulkbar-count { font-size: var(--gw-fs-md); font-weight: 550; color: rgba(255,255,255,.72); white-space: nowrap; }
.gw-bulkbar-count b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.gw-bulkbar-sep { width: 1px; height: 20px; background: rgba(255,255,255,.16); margin: 0 4px; flex-shrink: 0; }
.gw-bulkbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  border: 0; cursor: pointer;
  border-radius: var(--gw-r-pill);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-size: var(--gw-fs-sm); font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-bulkbar-btn:hover { background: rgba(255,255,255,.18); color: #fff; transform: none; box-shadow: none; }
.gw-bulkbar-btn.is-danger { background: rgba(244,63,94,.18); color: #fda4af; }
.gw-bulkbar-btn.is-danger:hover { background: var(--gw-danger-solid); color: #fff; }
.gw-bulkbar-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.gw-bulkbar-x {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; border-radius: 50%;
  background: transparent; color: rgba(255,255,255,.55);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-bulkbar-x:hover { background: rgba(255,255,255,.12); color: #fff; transform: none; box-shadow: none; }
.gw-bulkbar-x svg { width: 15px; height: 15px; }

.gw-bulk-enter-active { transition: opacity var(--gw-dur-2) var(--gw-ease-io), transform var(--gw-dur-3) var(--gw-ease); }
.gw-bulk-leave-active { transition: opacity var(--gw-dur-1) var(--gw-ease-io), transform var(--gw-dur-2) var(--gw-ease-io); }
.gw-bulk-enter-from, .gw-bulk-leave-to { opacity: 0; transform: translateY(18px) scale(.96); }

@media (max-width: 767px) {
  .gw-bulkbar {
    bottom: calc(var(--gw-mobilenav-total) + 16px);
    left: 12px; right: 12px; margin: 0;
    width: auto; max-width: none;
    justify-content: space-between;
    padding-right: 6px;
  }
  .gw-bulkbar-label { display: none; }
  .gw-bulkbar-btn { padding: 0 11px; }
}

/* — Cargador global — */
.gw-loader-box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px 38px;
  background: var(--gw-surface);
  border-radius: var(--gw-r-2xl);
  box-shadow: var(--gw-sh-xl);
  border: 1px solid var(--gw-border);
  animation: gw-modal-in var(--gw-dur-3) var(--gw-ease) both;
}
.gw-loader-ring {
  width: 34px; height: 34px;
  border: 3px solid var(--gw-150);
  border-top-color: var(--gw-brand);
  border-radius: 50%;
  animation: gw-rotate .7s linear infinite;
}
.gw-loader-txt { font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text-3); letter-spacing: -0.002em; }


/* ==========================================================================
   13 · DROPDOWN / MENÚ / TOOLTIP
   ========================================================================== */

.gw-menu {
  position: absolute;
  z-index: var(--gw-z-dropdown);
  min-width: 190px;
  padding: 5px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  box-shadow: var(--gw-sh-pop);
  animation: gw-menu-in var(--gw-dur-2) var(--gw-ease) both;
  overflow: hidden auto;
  max-height: 320px;
  overscroll-behavior: contain;
}
@keyframes gw-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
.gw-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-sm);
  font-size: var(--gw-fs-md); font-weight: 500; color: var(--gw-text-2);
  text-align: left;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-menu-item:hover { background: var(--gw-surface-3); color: var(--gw-text); transform: none; box-shadow: none; }
.gw-menu-item.is-active { background: var(--gw-brand-08); color: var(--gw-brand-on-soft); font-weight: 600; }
.gw-menu-item.is-danger { color: var(--gw-danger-ink); }
.gw-menu-item.is-danger:hover { background: var(--gw-danger-bg); }
.gw-menu-item svg, .gw-menu-item i[data-lucide] { width: 15px; height: 15px; flex-shrink: 0; padding: 0; margin: 0; }
.gw-menu-sep { height: 1px; background: var(--gw-border-soft); margin: 5px 0; }
.gw-menu-label { padding: 7px 10px 4px; font-size: var(--gw-fs-2xs); font-weight: 600; letter-spacing: var(--gw-tracking-wide); text-transform: uppercase; color: var(--gw-text-faint); }

/* Tooltip por atributo */
.gw-tip { position: relative; }
.gw-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: var(--gw-z-tooltip);
  padding: 5px 9px;
  background: var(--gw-900); color: #fff;
  font-size: var(--gw-fs-xs); font-weight: 550; white-space: nowrap;
  border-radius: var(--gw-r-sm);
  box-shadow: var(--gw-sh-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--gw-dur-1) var(--gw-ease-io), transform var(--gw-dur-2) var(--gw-ease);
}
.gw-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.gw-tip-b::after { bottom: auto; top: calc(100% + 7px); transform: translateX(-50%) translateY(-3px); }
.gw-tip-b:hover::after { transform: translateX(-50%) translateY(0); }


/* ==========================================================================
   14 · KANBAN  ·  tablero y tarjetas
   ========================================================================== */

.gw-kb-board {
  display: flex;
  gap: 14px;
  height: 100%;
  padding-bottom: 6px;
  align-items: stretch;
}

.gw-kb-col {
  display: flex; flex-direction: column;
  flex: 0 0 auto;
  width: 312px;
  min-width: 0;
  max-height: 100%;
  background: var(--gw-100);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xl);
  transition: background-color var(--gw-dur-2) var(--gw-ease), border-color var(--gw-dur-2) var(--gw-ease);
}
.gw-kb-col.is-dropping { background: var(--gw-brand-04); border-color: var(--gw-brand-20); }

.gw-kb-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--gw-border);
  min-width: 0;
  /* La cabecera lleva el color de la etapa como fondo: sin este radio, ese
     color asomaba en pico por las esquinas superiores de la columna. */
  border-radius: calc(var(--gw-r-xl) - 1px) calc(var(--gw-r-xl) - 1px) 0 0;
}
.gw-kb-col-name {
  font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text);
  letter-spacing: -0.006em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gw-kb-col-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gw-kb-col-count {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: var(--gw-r-pill);
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  font-size: var(--gw-fs-xs); font-weight: 650; color: var(--gw-text-3);
  font-variant-numeric: tabular-nums;
}
.gw-kb-col-sum { font-size: var(--gw-fs-xs); font-weight: 600; color: var(--gw-text-muted); font-variant-numeric: tabular-nums; }

.gw-kb-col-body {
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  display: flex; flex-direction: column; gap: 9px;
  overscroll-behavior: contain;
}

/* ── LA TARJETA ─────────────────────────────────────────────────────────── */
.gw-kb-card.gw-kb-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 9px;
  padding: 12px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  box-shadow: var(--gw-sh-xs);
  cursor: grab;
  min-width: 0;
  transition: box-shadow var(--gw-dur-2) var(--gw-ease),
              border-color var(--gw-dur-2) var(--gw-ease),
              transform var(--gw-dur-2) var(--gw-ease),
              opacity var(--gw-dur-2) var(--gw-ease);
}
.gw-kb-card.gw-kb-card:hover {
  box-shadow: var(--gw-sh-md);
  border-color: var(--gw-border-strong);
  transform: translateY(-1px);
}
.gw-kb-card.gw-kb-card:active { cursor: grabbing; }

/* Franja de acento a la izquierda (color de la etapa) */
.gw-kb-card::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--gw-kb-accent, transparent);
  opacity: .85;
  transition: top var(--gw-dur-2) var(--gw-ease), bottom var(--gw-dur-2) var(--gw-ease);
}
.gw-kb-card:hover::before { top: 8px; bottom: 8px; }

/* Fila 1 · identidad */
.gw-kb-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gw-kb-ident { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.gw-kb-name {
  font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text);
  letter-spacing: -0.01em; line-height: 1.3;
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; min-width: 0;
  transition: color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-kb-name:hover { color: var(--gw-brand-on-soft); }
.gw-kb-sub {
  font-size: var(--gw-fs-xs); color: var(--gw-text-muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  margin-top: 1px;
}

/* Acciones rápidas: solo al pasar el ratón, sin mover el layout */
.gw-kb-actions {
  display: flex; align-items: center; gap: 1px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--gw-dur-2) var(--gw-ease), transform var(--gw-dur-2) var(--gw-ease);
}
.gw-kb-card:hover .gw-kb-actions,
.gw-kb-card:focus-within .gw-kb-actions { opacity: 1; transform: none; }
@media (hover: none) {
  .gw-kb-actions { opacity: 1; transform: none; }
}

/* Fila 2 · etiquetas (máximo dos líneas, nunca más) */
.gw-kb-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 46px; overflow: hidden;
  min-width: 0;
}

/* Fila 3 · métricas */
.gw-kb-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--gw-fs-xs); color: var(--gw-text-muted);
  min-width: 0;
}
.gw-kb-meta-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.gw-kb-meta-item svg, .gw-kb-meta-item i[data-lucide] { width: 12px; height: 12px; flex-shrink: 0; padding: 0; margin: 0; opacity: .8; }
.gw-kb-value {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-green-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.012em;
}

/* Bloque de cadencia operativa: sólo aparece en su etapa */
.gw-kb-cadence {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--gw-border-soft);
  min-width: 0;
}

/* Fila 4 · pie: responsable + navegación */
.gw-kb-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--gw-border-soft);
  min-width: 0;
}
.gw-kb-owner { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.gw-kb-owner-name {
  font-size: var(--gw-fs-xs); font-weight: 550; color: var(--gw-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gw-kb-nav { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.gw-kb-nav-btn.gw-kb-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--gw-r-sm);
  border: 1px solid var(--gw-border);
  background: var(--gw-surface);
  color: var(--gw-text-3);
  cursor: pointer;
  transition: all var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-kb-nav-btn.gw-kb-nav-btn:hover:not(:disabled) { background: var(--gw-surface-3); color: var(--gw-text); border-color: var(--gw-border-strong); transform: none; box-shadow: none; }
.gw-kb-nav-btn.gw-kb-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.gw-kb-nav-btn.gw-kb-nav-btn svg,
.gw-kb-nav-btn.gw-kb-nav-btn i[data-lucide] { width: 13px; height: 13px; padding: 0; margin: 0; }
.gw-kb-nav-btn.is-next { background: var(--gw-900); border-color: transparent; color: #fff; }
.gw-kb-nav-btn.is-next:hover:not(:disabled) { background: var(--gw-800); color: #fff; border-color: transparent; }

/* ── Estados de la tarjeta ──────────────────────────────────────────────── */

/* Prioritaria (proceso obligatorio de hoy) */
.gw-kb-card.is-priority {
  border-color: var(--gw-amber-bd);
  box-shadow: 0 0 0 1px var(--gw-amber-bd), var(--gw-sh-md);
  background: linear-gradient(180deg, var(--gw-amber-bg) 0%, var(--gw-surface) 46px);
}
.gw-kb-flag {
  position: absolute; top: -7px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: var(--gw-r-pill);
  background: var(--gw-warn-solid); color: #fff;
  font-size: var(--gw-fs-2xs); font-weight: 650; letter-spacing: .02em;
  box-shadow: 0 2px 8px -2px rgba(245, 158, 11, .55);
  z-index: 2;
}
.gw-kb-flag svg { width: 11px; height: 11px; }

/* Atenuada (modo bloqueo activo y esta tarjeta no es obligatoria) */
.gw-kb-card.is-dimmed { opacity: .34; filter: saturate(.35); pointer-events: none; }

/* Solo lectura / no asignada */
.gw-kb-card.is-readonly { cursor: default; background: var(--gw-25); }
.gw-kb-card.is-readonly:hover { transform: none; box-shadow: var(--gw-sh-xs); border-color: var(--gw-border); }
.gw-kb-readonly-note {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding-top: 9px; border-top: 1px solid var(--gw-border-soft);
  font-size: var(--gw-fs-xs); color: var(--gw-text-faint); font-weight: 550;
}
.gw-kb-readonly-note svg, .gw-kb-readonly-note i[data-lucide] { width: 12px; height: 12px; padding: 0; margin: 0; }

/* Estados de arrastre de SortableJS */
.gw-kb-card.gw-drag-ghost {
  opacity: 1 !important;
  background: var(--gw-brand-04) !important;
  border: 1.5px dashed var(--gw-brand-20) !important;
  box-shadow: none !important;
}
.gw-kb-card.gw-drag-ghost > * { opacity: 0; }
.gw-kb-card.gw-drag-ghost::before { display: none; }
.gw-kb-card.gw-drag-chosen { cursor: grabbing; }
.gw-kb-card.gw-drag-active {
  box-shadow: var(--gw-sh-xl) !important;
  transform: rotate(1.4deg) scale(1.015) !important;
  border-color: var(--gw-brand-20) !important;
  opacity: 1 !important;
}

/* Zona vacía */
.gw-kb-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 12px;
  border: 1.5px dashed var(--gw-200);
  border-radius: var(--gw-r-lg);
  color: var(--gw-text-faint);
  font-size: var(--gw-fs-sm); font-weight: 550;
  transition: all var(--gw-dur-2) var(--gw-ease);
}
.gw-kb-drop svg, .gw-kb-drop i[data-lucide] { width: 17px; height: 17px; opacity: .6; padding: 0; margin: 0; }

@media (max-width: 767px) {
  .gw-kb-board { gap: 12px; }
  .gw-kb-col { width: 84vw; }
}


/* ==========================================================================
   14b · FICHA DE LEAD · piezas propias
   ========================================================================== */

/* Valor bloqueado (no editable por permisos) */
.gw-locked-value {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 12px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text-2);
  min-width: 0;
}
.gw-locked-value svg,
.gw-locked-value i[data-lucide] { width: 14px; height: 14px; flex-shrink: 0; color: var(--gw-text-muted); padding: 0; margin: 0; }

/* Icono pequeño dentro de una etiqueta de campo */
.gw-label-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; color: var(--gw-text-muted); padding: 0; }

/* Acordeón nativo (<details>/<summary>): sin estado extra en JavaScript */
.gw-acc-group { display: flex; flex-direction: column; gap: 8px; }
.gw-acc {
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  background: var(--gw-surface);
  overflow: hidden;
  transition: border-color var(--gw-dur-2) var(--gw-ease), box-shadow var(--gw-dur-2) var(--gw-ease);
}
.gw-acc[open] { border-color: var(--gw-border-strong); box-shadow: var(--gw-sh-xs); }
.gw-acc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
  min-width: 0;
}
.gw-acc-head::-webkit-details-marker { display: none; }
.gw-acc-head:hover { background: var(--gw-surface-2); }
.gw-acc-ico {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-sm);
  background: var(--gw-surface-3); color: var(--gw-text-3);
}
.gw-acc-ico svg, .gw-acc-ico i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }
.gw-acc-title {
  flex: 1; min-width: 0;
  font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-acc-caret {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--gw-text-muted);
  transition: transform var(--gw-dur-2) var(--gw-ease);
  padding: 0; margin: 0;
}
.gw-acc[open] .gw-acc-caret { transform: rotate(180deg); }
.gw-acc-body { padding: 0 12px 12px; }

/* Zona de arrastre de archivos */
.gw-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 22px 14px;
  border: 1.5px dashed var(--gw-200);
  border-radius: var(--gw-r-lg);
  background: var(--gw-surface-2);
  color: var(--gw-text-muted);
  cursor: pointer; text-align: center;
  transition: border-color var(--gw-dur-2) var(--gw-ease), background-color var(--gw-dur-2) var(--gw-ease), color var(--gw-dur-2) var(--gw-ease);
}
.gw-drop:hover { border-color: var(--gw-brand-20); background: var(--gw-brand-04); color: var(--gw-brand-on-soft); }
.gw-drop.is-over { border-color: var(--gw-brand); background: var(--gw-brand-08); color: var(--gw-brand-on-soft); border-style: solid; }
.gw-drop.is-busy { cursor: progress; }
.gw-drop svg, .gw-drop i[data-lucide] { width: 22px; height: 22px; padding: 0; margin: 0; }
.gw-drop-txt { font-size: var(--gw-fs-sm); font-weight: 600; }

/* Nota interna (comentario) */
.gw-note { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gw-note-body {
  flex: 1; min-width: 0;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border-soft);
  border-radius: var(--gw-r-md);
  border-top-left-radius: 3px;
  padding: 10px 12px;
}
.gw-note-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gw-note-author { font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); flex: 1; min-width: 0; }
.gw-note-actions {
  display: flex; gap: 1px; flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--gw-dur-2) var(--gw-ease);
}
.gw-note:hover .gw-note-actions,
.gw-note:focus-within .gw-note-actions { opacity: 1; }
@media (hover: none) { .gw-note-actions { opacity: 1; } }
.gw-note-text { font-size: var(--gw-fs-md); color: var(--gw-text-2); line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }

/* Fila marcada como completada */
.gw-row.is-done { background: var(--gw-surface-2); }
.gw-row.is-done .gw-row-title { color: var(--gw-text-muted); text-decoration: line-through; }

/* Selector de etiquetas B2B */
.gw-b2b-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 7px 10px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-sh-xs);
  cursor: pointer; text-align: left;
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease);
  transform: none;
  min-width: 0;
}
.gw-b2b-trigger:hover:not(:disabled) { border-color: var(--gw-border-strong); transform: none; }
.gw-b2b-trigger:disabled { opacity: .6; cursor: not-allowed; }
.gw-b2b-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.gw-b2b-placeholder { font-size: var(--gw-fs-md); color: var(--gw-text-faint); }
.gw-b2b-caret { width: 15px; height: 15px; flex-shrink: 0; color: var(--gw-text-muted); transition: transform var(--gw-dur-2) var(--gw-ease); padding: 0; margin: 0; }
.gw-b2b-caret.is-open { transform: rotate(180deg); }

.gw-b2b-panel {
  margin-top: 8px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-sh-sm);
  overflow: hidden;
}
.gw-b2b-list { max-height: 240px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.gw-b2b-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border-radius: var(--gw-r-sm);
  cursor: pointer;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
  min-width: 0;
}
.gw-b2b-opt:hover { background: var(--gw-surface-3); }
.gw-b2b-opt.is-on { background: var(--gw-brand-08); }
.gw-b2b-opt-name { flex: 1; min-width: 0; font-size: var(--gw-fs-md); font-weight: 550; color: var(--gw-text-2); overflow-wrap: anywhere; }
.gw-b2b-opt.is-on .gw-b2b-opt-name { color: var(--gw-brand-on-soft); font-weight: 650; }
.gw-b2b-opt .gw-check { width: 17px; height: 17px; }
.gw-b2b-foot {
  display: flex; justify-content: flex-end;
  padding: 8px 10px;
  background: var(--gw-surface-2);
  border-top: 1px solid var(--gw-border-soft);
}
.gw-b2b-panel.gw-collapse-enter-to,
.gw-b2b-panel.gw-collapse-leave-from { max-height: 320px; }


/* ==========================================================================
   15 · LÍNEA DE TIEMPO
   ========================================================================== */

.gw-timeline { position: relative; padding-left: 26px; }
.gw-timeline::before {
  content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px;
  width: 1.5px; background: var(--gw-border);
  border-radius: 2px;
}
.gw-tl-item { position: relative; padding-bottom: 18px; min-width: 0; }
.gw-tl-item:last-child { padding-bottom: 0; }
.gw-tl-dot {
  position: absolute; left: -21px; top: 3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gw-surface);
  border: 2px solid var(--gw-300);
  box-shadow: 0 0 0 3px var(--gw-surface);
}
.gw-tl-dot.is-brand   { border-color: var(--gw-brand); }
.gw-tl-dot.is-success { border-color: var(--gw-success-solid); }
.gw-tl-dot.is-warn    { border-color: var(--gw-warn-solid); }
.gw-tl-dot.is-danger  { border-color: var(--gw-danger-solid); }
.gw-tl-time { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); font-weight: 550; }
.gw-tl-title { font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); margin-top: 1px; overflow-wrap: anywhere; }
.gw-tl-text { font-size: var(--gw-fs-md); color: var(--gw-text-3); line-height: 1.55; margin-top: 3px; overflow-wrap: anywhere; }


/* ==========================================================================
   15b · CHASIS · menú lateral, navegación móvil y área principal
   ========================================================================== */

:root {
  /* Altura real de la barra inferior en móvil. <main> la reutiliza para
     calcular su alto, en vez del antiguo 70px codificado a mano. */
  --gw-mobilenav-h: 60px;
  /* Las áreas seguras del teléfono: la hora y la muesca arriba, la barra de
     inicio abajo. Solo valen algo con viewport-fit=cover en la etiqueta
     viewport; sin ella el iPhone las da en cero y, con la app instalada, el
     menú quedaba pegado al borde y la barra de arriba debajo de la hora. */
  --gw-safe-top: env(safe-area-inset-top, 0px);
  --gw-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Aire bajo los iconos del menú: la barra de inicio del iPhone o, donde no
     la hay (Android, escritorio estrecho), 8 px para no rozar el borde. */
  --gw-mobilenav-pie: max(8px, env(safe-area-inset-bottom, 0px));
  --gw-mobilenav-total: calc(var(--gw-mobilenav-h) + var(--gw-mobilenav-pie));
  --gw-topbar-h: calc(58px + var(--gw-safe-top));
  --gw-sidebar-w: 256px;
  --gw-sidebar-w-min: 80px;
}

/* ── Área principal ─────────────────────────────────────────────────────── */
.gw-main {
  background: var(--gw-bg);
  height: calc(100vh - var(--gw-mobilenav-total));
  margin-bottom: var(--gw-mobilenav-total);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  /* Sin «-webkit-overflow-scrolling: touch», a propósito. Desde iOS 13 ya no
     cambia cómo se desplaza nada, pero Safari lo sigue usando para abrir una
     capa propia: los modales, que viven dentro de <main>, quedaban por debajo
     de la barra de navegación del móvil, y la barra tapaba justo el pie con
     los botones. «No se ve el botón para terminar de crear la cotización» era
     esto. En el ordenador y en Android no se notaba. */
}
@supports (height: 100dvh) {
  .gw-main { height: calc(100dvh - var(--gw-mobilenav-total)); }
}
@media (min-width: 768px) {
  .gw-main { height: 100vh; margin-bottom: 0; }
  @supports (height: 100dvh) { .gw-main { height: 100dvh; } }
}

/* ── Barra superior global ──────────────────────────────────────────────
   Vive en el chasis, así que está en todas las pantallas: sección actual,
   buscador general, avisos, tema y perfil. */
.gw-appbar {
  position: sticky; top: 0;
  z-index: calc(var(--gw-z-sticky) + 5);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  height: var(--gw-topbar-h);
  padding: var(--gw-safe-top) max(14px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  border-bottom: 1px solid var(--gw-border);
  min-width: 0;
}
body.dark-mode .gw-appbar { background: rgba(30, 41, 59, .86); }

.gw-appbar-section {
  display: none; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding-right: 14px;
  margin-right: 2px;
  border-right: 1px solid var(--gw-border);
  font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text);
  letter-spacing: -0.01em;
  max-width: 260px; min-width: 0;
}
@media (min-width: 900px) { .gw-appbar-section { display: flex; } }
.gw-appbar-section i[data-lucide] { width: 17px; height: 17px; color: var(--gw-brand-on-soft); }

/* Buscador general */
.gw-appbar-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto;
  max-width: 520px;
  min-width: 0;
  height: 36px;
  padding: 0 10px 0 11px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease), background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-appbar-search:focus-within {
  background: var(--gw-surface);
  border-color: var(--gw-brand);
  box-shadow: var(--gw-ring);
}
.gw-appbar-search i[data-lucide] { width: 15px; height: 15px; color: var(--gw-text-muted); flex-shrink: 0; }
.gw-appbar-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: var(--gw-font); font-size: var(--gw-fs-md); color: var(--gw-text);
}
.gw-appbar-search kbd {
  display: none;
  padding: 1px 6px; flex-shrink: 0;
  border: 1px solid var(--gw-border); border-bottom-width: 2px;
  border-radius: var(--gw-r-xs);
  background: var(--gw-surface);
  font-family: var(--gw-font); font-size: var(--gw-fs-xs); font-weight: 600;
  color: var(--gw-text-muted);
}
@media (min-width: 1100px) { .gw-appbar-search kbd { display: block; } }

.gw-appbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.gw-appbar-cta { display: none; }
@media (min-width: 768px) { .gw-appbar-cta { display: inline-flex; } }

.gw-appbar-dot {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gw-danger-solid);
  box-shadow: 0 0 0 2px var(--gw-surface);
}
.gw-appbar-dot.hidden { display: none; }

.gw-appbar-user {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 8px 0 5px;
  margin-left: 2px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-pill);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), border-color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
  max-width: 220px; min-width: 0;
}
.gw-appbar-user:hover { background: var(--gw-surface-2); border-color: var(--gw-border); transform: none; box-shadow: none; }
.gw-appbar-user .gw-avatar { width: 30px; height: 30px; font-size: var(--gw-fs-xs); }
.gw-appbar-user i[data-lucide] { width: 14px; height: 14px; color: var(--gw-text-muted); flex-shrink: 0; }
.gw-appbar-user-txt { display: none; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
@media (min-width: 1024px) { .gw-appbar-user-txt { display: flex; } }
.gw-appbar-user-name { font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-appbar-user-mail { font-size: var(--gw-fs-2xs); color: var(--gw-text-muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La cabecera propia de cada página se queda pegada justo debajo de la
   global, en lugar de superponerse a ella al hacer scroll. */
.gw-main .gw-topbar { top: var(--gw-topbar-h); }

/* ── Menú lateral ───────────────────────────────────────────────────────── */
.gw-sidebar {
  z-index: var(--gw-z-sidebar);
  background: var(--gw-surface);
  border-right: 1px solid var(--gw-border);
  flex-shrink: 0;
}

/* Cabecera: logotipo a la izquierda y control de plegado a la derecha, ambos
   DENTRO del menú. Nunca invaden el área de contenido ni la barra superior. */
.gw-sidebar-head {
  display: flex; align-items: center; gap: 8px;
  height: 58px; flex-shrink: 0;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--gw-border-soft);
  min-width: 0;
}
.gw-sidebar-logo {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0;
  text-decoration: none;
  color: var(--gw-text);
}
.gw-sidebar-logo-ico {
  width: 28px; height: 23px; display: block; flex-shrink: 0;
  background-color: var(--p-color);
  -webkit-mask-image: url('../img/iconogestwork.svg'); mask-image: url('../img/iconogestwork.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: transform var(--gw-dur-4) var(--gw-ease);
}
.gw-sidebar-logo:hover .gw-sidebar-logo-ico { transform: rotate(-12deg) scale(1.06); }
.gw-sidebar-logo-txt {
  width: 104px; height: 17px; display: block; flex-shrink: 0;
  background-color: var(--gw-text);
  -webkit-mask-image: url('../img/letrasgestwork.svg'); mask-image: url('../img/letrasgestwork.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
}

.gw-sidebar-toggle {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-sm);
  color: var(--gw-text-muted);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io), border-color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
}
.gw-sidebar-toggle:hover { background: var(--gw-surface-3); color: var(--gw-text); border-color: var(--gw-border); transform: none; box-shadow: none; }
.gw-sidebar-toggle i[data-lucide] { width: 16px; height: 16px; transition: transform var(--gw-dur-3) var(--gw-ease); }

/* Plegado: sólo se ve el isotipo. El control de desplegar no ocupa sitio
   propio: aparece encima del logotipo al pasar el cursor, cubriendo toda la
   cabecera para que sea fácil de acertar. */
.gw-sidebar.is-collapsed .gw-sidebar-head {
  position: relative;
  justify-content: center;
  padding: 0;
  gap: 0;
}
.gw-sidebar.is-collapsed .gw-sidebar-logo {
  flex: 0 0 auto;
  justify-content: center;
  pointer-events: none;          /* el clic lo recoge el botón que hay encima */
}
.gw-sidebar.is-collapsed .gw-sidebar-logo-txt { display: none; }
.gw-sidebar.is-collapsed .gw-sidebar-logo-ico {
  transition: opacity var(--gw-dur-2) var(--gw-ease-io), transform var(--gw-dur-2) var(--gw-ease);
}

.gw-sidebar.is-collapsed .gw-sidebar-toggle {
  position: absolute;
  inset: 6px 12px;
  width: auto; height: auto;
  border-radius: var(--gw-r-md);
  opacity: 0;
  background: transparent;
  border-color: transparent;
  transition: opacity var(--gw-dur-2) var(--gw-ease-io), background-color var(--gw-dur-1) var(--gw-ease-io);
}
/* El icono del panel sirve para plegar y para desplegar (elegido por el
   usuario): plegado cubre toda la cabecera, así que va un punto más grande. */
.gw-sidebar.is-collapsed .gw-sidebar-toggle i[data-lucide] { width: 18px; height: 18px; }

/* Se descubre al pasar el cursor o al llegar con el TECLADO (:focus-visible).
   Antes era :focus-within, y tras pulsar «plegar» con el ratón el botón se
   quedaba con el foco: la flecha seguía puesta encima del logotipo hasta
   hacer clic en otra parte. */
.gw-sidebar.is-collapsed .gw-sidebar-head:hover .gw-sidebar-logo-ico,
.gw-sidebar.is-collapsed .gw-sidebar-head:has(.gw-sidebar-toggle:focus-visible) .gw-sidebar-logo-ico {
  opacity: 0;
  transform: scale(.9);
}
.gw-sidebar.is-collapsed .gw-sidebar-head:hover .gw-sidebar-toggle,
.gw-sidebar.is-collapsed .gw-sidebar-toggle:focus-visible {
  opacity: 1;
  background: var(--gw-surface-3);
  color: var(--gw-text);
}

/* En pantallas táctiles no hay cursor: el control se queda siempre visible */
@media (hover: none) {
  .gw-sidebar.is-collapsed .gw-sidebar-toggle { opacity: 1; background: var(--gw-surface-3); }
  .gw-sidebar.is-collapsed .gw-sidebar-logo-ico { opacity: 0; }
}

.gw-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  /* Los hijos de un contenedor flexible encogen antes que desbordar, así que
     cuando el menú no cabía —pantalla corta, o simplemente más secciones— los
     enlaces se aplastaban de 38 px a 20 y los títulos de grupo desaparecían
     del todo, en vez de aparecer la barra de desplazamiento que este mismo
     bloque ya pide con overflow-y. Se les prohíbe encoger unas líneas más
     abajo; aquí queda dicho por qué. */
}

.gw-nav-title {
  font-size: var(--gw-fs-2xs); font-weight: 600;
  letter-spacing: var(--gw-tracking-wide); text-transform: uppercase;
  color: var(--gw-text-faint);
  padding: 0 10px; margin: 20px 0 6px;
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--gw-dur-2) var(--gw-ease-io), height var(--gw-dur-2) var(--gw-ease-io), margin var(--gw-dur-2) var(--gw-ease-io);
}
.gw-nav-title:first-child { margin-top: 0; }

/* Ni los títulos ni los enlaces encogen: si el menú no cabe, se desplaza. Un
   enlace de 20 px de alto con el texto cortado es peor que tener que rodar la
   rueda del ratón. */
.gw-sidebar-nav > .gw-nav-title,
.gw-sidebar-nav > .gw-nav-item { flex-shrink: 0; }

.gw-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: 38px; padding: 0 10px;
  border-radius: var(--gw-r-md);
  color: var(--gw-text-3);
  font-size: var(--gw-fs-md); font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
  min-width: 0;
}
.gw-nav-item:hover { background: var(--gw-surface-3); color: var(--gw-text); transform: none; }
.gw-nav-item .nav-icon,
.gw-nav-item .nav-icon-wrap { flex-shrink: 0; }
.gw-nav-item svg,
.gw-nav-item i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; padding: 0; margin: 0; }
.gw-nav-item .nav-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity var(--gw-dur-2) var(--gw-ease-io);
}
/* Cuando el enlace lleva contador o etiqueta, el texto cede el ancho justo */
.gw-nav-item:has(.gw-nav-tag) .nav-text,
.gw-nav-item:has(.gw-nav-count) .nav-text { flex: 0 1 auto; }
.gw-nav-item.is-active { background: var(--gw-brand-08); color: var(--gw-brand-on-soft); font-weight: 650; }
.gw-nav-item.is-active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--gw-brand);
}
.gw-nav-item.is-logout { margin-top: 4px; color: var(--gw-text-3); }
.gw-nav-item.is-logout:hover { background: var(--gw-danger-bg); color: var(--gw-danger-ink); }

/* Contenedor del icono cuando lleva un distintivo encima */
.nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.gw-nav-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill);
  background: var(--gw-danger-solid); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--gw-surface);
}
.gw-nav-badge.hidden { display: none; }

/* Contador a la derecha del enlace (notificaciones sin leer) */
.gw-nav-count {
  margin-left: auto; flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill);
  background: var(--gw-danger-solid); color: #fff;
  font-size: var(--gw-fs-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gw-nav-count.hidden { display: none; }

/* Plegado: el contador deja de ser una píldora al final del enlace (donde no
   cabe y acaba tapando el icono) y se convierte en un distintivo apoyado en
   la esquina superior derecha de la campana, como en cualquier aplicación.
   Se ancla al centro del enlace, que es donde queda el icono al plegarse. */
.gw-sidebar.is-collapsed .gw-nav-count {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(1px);
  right: auto;
  margin-left: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  font-size: 9px; line-height: 1;
  border: 2px solid var(--gw-surface);
  box-sizing: content-box;
  pointer-events: none;
}
.gw-sidebar.is-collapsed .gw-nav-tag { display: none; }

/* Al plegarse desaparece el texto del rótulo, pero el elemento sigue ahí como
   caja de altura cero: su margen superior es lo único que separa un grupo del
   siguiente. Nada dibujado, igual que en el menú desplegado. */
.gw-sidebar.is-collapsed .gw-nav-title {
  display: block;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: none;
  border: 0;
}
.gw-sidebar.is-collapsed .gw-nav-item + .gw-nav-title { margin-top: 14px; }
.gw-sidebar.is-collapsed .gw-nav-title:first-child { display: none; }

/* Etiqueta discreta de permiso */
.gw-nav-tag {
  margin-left: auto; flex-shrink: 0;
  padding: 1px 6px;
  border-radius: var(--gw-r-pill);
  background: var(--gw-surface-3);
  color: var(--gw-text-muted);
  font-size: var(--gw-fs-2xs); font-weight: 650;
  letter-spacing: .02em;
}
.gw-nav-item.is-active .gw-nav-tag { background: var(--gw-brand-12); color: var(--gw-brand-on-soft); }

/* Separación entre grupos SIN línea divisoria: 22px de aire por encima del
   rótulo (2 de gap + 20 de margen) frente a 8px por debajo (6 de margen +
   2 de gap). Esa proporción de casi 3 a 1 es la que hace que el rótulo se
   lea pegado a SU grupo y despegado del anterior; con eso la jerarquía se
   entiende sola y la línea sobra. */
.gw-nav-title + .gw-nav-item { margin-top: 0; }
.gw-nav-item + .gw-nav-title {
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}

/* ── Pie del menú lateral ───────────────────────────────────────────────── */
.gw-sidebar-foot {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--gw-border-soft);
  display: flex; flex-direction: column; gap: 2px;
}

/* Separa los avisos y la papelera de la ficha de usuario. Sin esta línea, los
   cuatro elementos del pie se leen como una sola lista y «Papelera» parece
   parte de la identidad de quien ha entrado. */
.gw-sidebar-sep {
  border: 0; border-top: 1px solid var(--gw-border-soft);
  margin: 8px 2px; height: 0;
}
.gw-nav-user {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 8px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--gw-r-md);
  text-align: left;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
  min-width: 0;
}
.gw-nav-user:hover { background: var(--gw-surface-3); transform: none; box-shadow: none; }
.gw-nav-user .gw-avatar { width: 34px; height: 34px; font-size: var(--gw-fs-sm); }
.gw-nav-user-txt { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.gw-nav-user-name { font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-nav-user-role { font-size: var(--gw-fs-xs); color: var(--gw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-nav-user-job { font-size: var(--gw-fs-2xs); color: var(--gw-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Estado plegado ─────────────────────────────────────────────────────── */
.gw-sidebar.is-collapsed .nav-text,
.gw-sidebar.is-collapsed .gw-nav-user-txt { display: none; }
.gw-sidebar.is-collapsed .gw-nav-item,
.gw-sidebar.is-collapsed .gw-nav-user { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.gw-sidebar.is-collapsed .gw-nav-item.is-active::before { display: none; }
.gw-sidebar.is-collapsed .sidebar-logo-container .nav-text { display: none; }
.gw-sidebar.is-collapsed .gw-sidebar-nav { padding-left: 10px; padding-right: 10px; }

/* Rótulo emergente cuando el menú está plegado */
.gw-sidebar.is-collapsed .gw-nav-item::after {
  content: attr(title);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  z-index: var(--gw-z-tooltip);
  padding: 5px 9px;
  background: var(--gw-900); color: #fff;
  font-size: var(--gw-fs-xs); font-weight: 550; white-space: nowrap;
  border-radius: var(--gw-r-sm);
  box-shadow: var(--gw-sh-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--gw-dur-1) var(--gw-ease-io), transform var(--gw-dur-2) var(--gw-ease);
}
.gw-sidebar.is-collapsed .gw-nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Navegación inferior móvil ──────────────────────────────────────────── */
.gw-mobilenav {
  z-index: var(--gw-z-sidebar);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid var(--gw-border);
  /* Laterales por la muesca en horizontal; abajo, el aire de --gw-mobilenav-pie. */
  padding: 0 max(4px, env(safe-area-inset-right, 0px)) var(--gw-mobilenav-pie) max(4px, env(safe-area-inset-left, 0px));
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
body.dark-mode .gw-mobilenav { background: rgba(30, 41, 59, .94); }
/* iOS con la página más corta que la pantalla (ver layout.php, gw-ios-corto):
   la barra de inicio queda FUERA de la página, así que el menú no le guarda
   sitio. Esa franja de fuera la pinta iOS con el fondo del <body> (medido en
   el simulador: no sigue al del <html>), así que es el menú el que toma ese
   mismo color, y los dos se ven como una sola barra. */
html.gw-ios-corto { --gw-mobilenav-pie: 8px; --gw-safe-bottom: 0px; }
/* LA APP INSTALADA DEL IPHONE, BAJO LA HORA (2026-10-11). iOS difumina lo que
   queda justo debajo de la barra de estado (el efecto de cristal de iOS 26,
   que no se puede apagar desde la página): el nombre de la conversación, que
   caía ahí, salía borroso (visto en el simulador). Las cabeceras dejan 16 px
   más bajo la hora, con su fondo; el texto queda fuera de la zona difuminada. */
html.gw-ios-app { --gw-safe-top: calc(env(safe-area-inset-top, 0px) + 16px); }
html.gw-ios-corto .gw-mobilenav { background: var(--gw-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gw-mobilenav-inner {
  display: flex; align-items: stretch; gap: 2px;
  height: var(--gw-mobilenav-h);
  padding: 5px 0 0;
}
.gw-mn-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--gw-text-muted);
  text-decoration: none;
  transition: color var(--gw-dur-1) var(--gw-ease-io);
  transform: none; box-shadow: none;
  padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.gw-mn-item:hover { transform: none; box-shadow: none; }
/* El icono va dentro de una píldora que se tiñe en la sección activa: se ve
   dónde se está sin leer, como en las apps del teléfono. */
.gw-mn-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 30px; width: 100%; max-width: 58px;
  border-radius: var(--gw-r-pill);
  transition: background-color var(--gw-dur-2) var(--gw-ease), transform var(--gw-dur-1) var(--gw-ease-io);
}
.gw-mn-ico svg, .gw-mn-ico i[data-lucide] { width: 22px; height: 22px; padding: 0; margin: 0; }
.gw-mn-item:active .gw-mn-ico { transform: scale(.9); }
.gw-mn-label {
  font-size: 11px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.gw-mn-item.is-active { color: var(--gw-brand-on-soft); }
.gw-mn-item.is-active .gw-mn-ico { background: var(--gw-brand-20); }
.gw-mn-item.is-active .gw-mn-label { color: var(--gw-text); font-weight: 700; }
.gw-mn-dot {
  position: absolute; top: 3px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gw-danger-solid);
  box-shadow: 0 0 0 2px var(--gw-surface);
}
.gw-mn-dot.hidden { display: none; }


/* ==========================================================================
   16 · CABECERA DE PÁGINA
   ========================================================================== */

.gw-topbar {
  position: sticky; top: 0;
  z-index: var(--gw-z-sticky);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  min-height: 62px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid var(--gw-border);
  min-width: 0;
}
.gw-topbar-title {
  font-size: var(--gw-fs-2xl); font-weight: 680; color: var(--gw-text);
  letter-spacing: var(--gw-tracking-tight); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gw-topbar-sub { font-size: var(--gw-fs-sm); color: var(--gw-text-muted); margin-top: 1px; }
.gw-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 767px) {
  .gw-topbar { padding: 10px 14px; min-height: 56px; }
  .gw-topbar-title { font-size: var(--gw-fs-xl); }
}

/* Migas de pan */
.gw-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--gw-fs-sm); color: var(--gw-text-muted); min-width: 0; }
.gw-crumbs a { color: var(--gw-text-muted); text-decoration: none; transition: color var(--gw-dur-1) var(--gw-ease-io); }
.gw-crumbs a:hover { color: var(--gw-text-2); }
.gw-crumbs-sep { opacity: .5; }


/* ==========================================================================
   17 · ESTADÍSTICAS / KPI
   ========================================================================== */

.gw-stat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xl);
  box-shadow: var(--gw-sh-xs);
  min-width: 0;
  transition: box-shadow var(--gw-dur-2) var(--gw-ease), border-color var(--gw-dur-2) var(--gw-ease);
}
.gw-stat:hover { box-shadow: var(--gw-sh-md); border-color: var(--gw-border-strong); }
.gw-stat-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gw-stat-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md);
  background: var(--gw-surface-3); color: var(--gw-text-3);
}
.gw-stat-ico svg, .gw-stat-ico i[data-lucide] { width: 16px; height: 16px; padding: 0; margin: 0; }
.gw-stat-label { font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gw-stat-value { font-size: 27px; font-weight: 700; color: var(--gw-text); letter-spacing: -0.024em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gw-stat-foot { display: flex; align-items: center; gap: 6px; font-size: var(--gw-fs-xs); color: var(--gw-text-muted); }
.gw-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-size: var(--gw-fs-xs); }
.gw-trend.is-up { color: var(--gw-green-ink); }
.gw-trend.is-down { color: var(--gw-rose-ink); }
.gw-trend svg { width: 12px; height: 12px; }

/* Tonos pastel para los iconos de KPI */
.gw-stat-ico.t-violet { background: var(--gw-violet-bg); color: var(--gw-violet-ink); }
.gw-stat-ico.t-blue   { background: var(--gw-blue-bg);   color: var(--gw-blue-ink); }
.gw-stat-ico.t-sky    { background: var(--gw-sky-bg);    color: var(--gw-sky-ink); }
.gw-stat-ico.t-teal   { background: var(--gw-teal-bg);   color: var(--gw-teal-ink); }
.gw-stat-ico.t-green  { background: var(--gw-green-bg);  color: var(--gw-green-ink); }
.gw-stat-ico.t-amber  { background: var(--gw-amber-bg);  color: var(--gw-amber-ink); }
.gw-stat-ico.t-orange { background: var(--gw-orange-bg); color: var(--gw-orange-ink); }
.gw-stat-ico.t-rose   { background: var(--gw-rose-bg);   color: var(--gw-rose-ink); }
.gw-stat-ico.t-pink   { background: var(--gw-pink-bg);   color: var(--gw-pink-ink); }
.gw-stat-ico.t-lime   { background: var(--gw-lime-bg);   color: var(--gw-lime-ink); }
.gw-stat-ico.t-indigo { background: var(--gw-indigo-bg); color: var(--gw-indigo-ink); }
.gw-stat-ico.t-slate  { background: var(--gw-slate-bg);  color: var(--gw-slate-ink); }
.gw-stat-ico.t-brand  { background: var(--gw-brand-08);  color: var(--gw-brand-on-soft); }

/* Tarjeta de perfil del usuario (diálogo del menú lateral) */
.gw-perfil { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.gw-perfil-avatar { width: 68px; height: 68px; font-size: 22px; margin-bottom: 12px; }
.gw-perfil-nombre { font-size: var(--gw-fs-xl); font-weight: 650; color: var(--gw-text); letter-spacing: var(--gw-tracking-tight); }
.gw-perfil-email { font-size: var(--gw-fs-md); color: var(--gw-text-3); margin-bottom: 16px; overflow-wrap: anywhere; }
.gw-perfil-datos {
  width: 100%; text-align: left;
  padding: 14px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border-soft);
  border-radius: var(--gw-r-lg);
}
.gw-perfil-dato {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 11px; margin-top: 11px;
  border-top: 1px solid var(--gw-border-soft);
  min-width: 0;
}
.gw-perfil-valor {
  font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text);
  text-align: right; overflow-wrap: anywhere; min-width: 0;
}

/* ── Salud del pipeline ─────────────────────────────────────────────────── */
.gw-health-kpis { display: flex; flex-wrap: wrap; gap: 22px; flex-shrink: 0; }
.gw-health-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-health-kpi-val {
  font-size: var(--gw-fs-2xl); font-weight: 700; color: var(--gw-text);
  letter-spacing: -0.022em; line-height: 1.1;
}
.gw-health-bar {
  display: flex; align-items: stretch;
  height: 14px;
  border-radius: var(--gw-r-pill);
  overflow: hidden;
  background: var(--gw-surface-3);
  margin-bottom: 14px;
}
.gw-health-seg { display: block; height: 100%; transition: width var(--gw-dur-4) var(--gw-ease); }
.gw-health-seg.is-open { background: var(--gw-brand); }
.gw-health-seg.is-won  { background: var(--gw-success-solid); }
.gw-health-seg.is-lost { background: var(--gw-danger-solid); }
.gw-health-seg + .gw-health-seg { border-left: 2px solid var(--gw-surface); }

.gw-health-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.gw-health-leg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-pill);
  background: var(--gw-surface);
  text-decoration: none;
  font-size: var(--gw-fs-md);
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), background-color var(--gw-dur-1) var(--gw-ease-io);
  min-width: 0;
}
.gw-health-leg:hover { border-color: var(--gw-border-strong); background: var(--gw-surface-2); }
.gw-health-leg-txt { color: var(--gw-text-3); font-weight: 550; }
.gw-health-leg-num { color: var(--gw-text); font-weight: 700; }
.gw-dot.is-open { background: var(--gw-brand); }
.gw-dot.is-won  { background: var(--gw-success-solid); }
.gw-dot.is-lost { background: var(--gw-danger-solid); }

/* ── Motivos de pérdida ─────────────────────────────────────────────────── */
.gw-reason-list { display: flex; flex-direction: column; gap: 15px; }
.gw-reason { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gw-reason-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.gw-reason-txt {
  font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gw-reason-num { font-size: var(--gw-fs-lg); font-weight: 700; color: var(--gw-text); flex-shrink: 0; }

/* Bloque destacado de conversión */
.gw-conv {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 20px; padding: 16px 18px;
  background: var(--gw-blue-bg);
  border: 1px solid var(--gw-blue-bd);
  border-radius: var(--gw-r-lg);
  min-width: 0;
}
@media (min-width: 640px) {
  .gw-conv { flex-direction: row; align-items: center; justify-content: space-between; }
}
.gw-conv-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; flex-shrink: 0;
  background: var(--gw-surface);
  border: 1px solid var(--gw-blue-bd);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-sh-xs);
  color: var(--gw-blue-ink);
  font-size: var(--gw-fs-xl); font-weight: 700; letter-spacing: -0.02em;
}
.gw-conv-badge svg, .gw-conv-badge i[data-lucide] { width: 16px; height: 16px; padding: 0; margin: 0; }

/* Avatar del usuario en la cabecera del panel */
.gw-dash-avatar {
  position: relative; flex-shrink: 0;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  border-radius: 50%;
  transform: none; box-shadow: none;
  transition: box-shadow var(--gw-dur-2) var(--gw-ease);
}
.gw-dash-avatar:hover { box-shadow: 0 0 0 3px var(--gw-brand-12); transform: none; }
.gw-dash-avatar-dot {
  position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--gw-surface);
}

/* Desplegable de fecha: se abre al pasar el ratón sobre su contenedor */
.gw-dash-datemenu {
  animation: none;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--gw-dur-2) var(--gw-ease-io),
              transform var(--gw-dur-2) var(--gw-ease),
              visibility var(--gw-dur-2);
}
.group:hover > .gw-dash-datemenu,
.group:focus-within > .gw-dash-datemenu,
.gw-dash-datemenu:hover,
.gw-dash-datemenu:focus-within { opacity: 1; visibility: visible; transform: none; }

/* KPI destacado con el color de marca */
.gw-stat-feature {
  background: var(--card-bg, var(--gw-brand));
  border-color: transparent;
  color: var(--card-text, #fff);
}
.gw-stat-feature .gw-stat-label,
.gw-stat-feature .gw-stat-value,
.gw-stat-feature .gw-stat-foot { color: inherit; }
.gw-stat-feature .gw-stat-label,
.gw-stat-feature .gw-stat-foot { opacity: .78; }
.gw-stat-feature .gw-stat-ico { background: rgba(255,255,255,.16); color: inherit; }


/* ==========================================================================
   18 · ANIMACIONES DE ENTRADA
   ========================================================================== */

@keyframes gw-fade-up { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes gw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gw-pop-in  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.gw-anim-up   { animation: gw-fade-up var(--gw-dur-4) var(--gw-ease) both; }
.gw-anim-in   { animation: gw-fade-in var(--gw-dur-3) var(--gw-ease-io) both; }
.gw-anim-pop  { animation: gw-pop-in  var(--gw-dur-3) var(--gw-ease-pop) both; }

/* Entrada escalonada para listas y rejillas */
.gw-stagger > * { animation: gw-fade-up var(--gw-dur-4) var(--gw-ease) both; }
.gw-stagger > *:nth-child(1) { animation-delay: 0ms; }
.gw-stagger > *:nth-child(2) { animation-delay: 40ms; }
.gw-stagger > *:nth-child(3) { animation-delay: 80ms; }
.gw-stagger > *:nth-child(4) { animation-delay: 120ms; }
.gw-stagger > *:nth-child(5) { animation-delay: 160ms; }
.gw-stagger > *:nth-child(6) { animation-delay: 200ms; }
.gw-stagger > *:nth-child(7) { animation-delay: 240ms; }
.gw-stagger > *:nth-child(8) { animation-delay: 280ms; }
.gw-stagger > *:nth-child(n+9) { animation-delay: 320ms; }

/* Transiciones nombradas de Vue, listas para usar */
.gw-fade-enter-active, .gw-fade-leave-active { transition: opacity var(--gw-dur-2) var(--gw-ease-io); }
.gw-fade-enter-from, .gw-fade-leave-to { opacity: 0; }

.gw-pop-enter-active { transition: opacity var(--gw-dur-2) var(--gw-ease), transform var(--gw-dur-3) var(--gw-ease); }
.gw-pop-leave-active { transition: opacity var(--gw-dur-1) var(--gw-ease-io), transform var(--gw-dur-2) var(--gw-ease-io); }
.gw-pop-enter-from, .gw-pop-leave-to { opacity: 0; transform: translateY(8px) scale(.98); }

.gw-slide-enter-active, .gw-slide-leave-active { transition: transform var(--gw-dur-3) var(--gw-ease), opacity var(--gw-dur-2) var(--gw-ease-io); }
.gw-slide-enter-from, .gw-slide-leave-to { transform: translateX(100%); opacity: .6; }

/* Despliegue vertical (buscador móvil, acordeones) */
.gw-collapse-enter-active, .gw-collapse-leave-active {
  transition: max-height var(--gw-dur-3) var(--gw-ease), opacity var(--gw-dur-2) var(--gw-ease-io);
  overflow: hidden;
}
.gw-collapse-enter-from, .gw-collapse-leave-to { max-height: 0; opacity: 0; }
.gw-collapse-enter-to, .gw-collapse-leave-from { max-height: 180px; opacity: 1; }

/* Lista con reordenación suave (v-for + TransitionGroup) */
.gw-list-move { transition: transform var(--gw-dur-3) var(--gw-ease); }


/* ==========================================================================
   19 · MODO OSCURO
   ========================================================================== */

/* La rampa oscura se alinea a propósito con la que ya fuerza
   includes/theme_engine.php (body #0f172a, superficies #1e293b), para que
   los componentes nuevos y los antiguos convivan sin saltos de tono. */
body.dark-mode {
  --gw-bg:          #0f172a;
  --gw-surface:     #1e293b;
  --gw-surface-2:   #182234;
  --gw-surface-3:   #273449;
  --gw-border:      #2c3a52;
  --gw-border-soft: #243146;
  --gw-border-strong:#3a4a66;

  --gw-text:        #f1f5f9;
  --gw-text-2:      #cbd5e1;
  --gw-text-3:      #a3b1c6;
  --gw-text-muted:  #7d8da6;
  --gw-text-faint:  #5c6b85;

  --gw-100: #273449;
  --gw-150: #2c3a52;
  --gw-200: #35455f;
  --gw-300: #445673;

  --gw-violet-bg: #241d3d; --gw-violet-bd: #362a5c; --gw-violet-ink: #c4b1ff;
  --gw-indigo-bg: #1d2148; --gw-indigo-bd: #2c3168; --gw-indigo-ink: #b3bcff;
  --gw-blue-bg:   #16243f; --gw-blue-bd:   #21365c; --gw-blue-ink:   #9ec1ff;
  --gw-sky-bg:    #10283a; --gw-sky-bd:    #173b54; --gw-sky-ink:    #8ed3f5;
  --gw-teal-bg:   #102b2b; --gw-teal-bd:   #17403f; --gw-teal-ink:   #7fd9cd;
  --gw-green-bg:  #122a20; --gw-green-bd:  #1b402f; --gw-green-ink:  #86dfaa;
  --gw-lime-bg:   #1e2913; --gw-lime-bd:   #2e3d1c; --gw-lime-ink:   #bfe07a;
  --gw-amber-bg:  #2d2312; --gw-amber-bd:  #45351a; --gw-amber-ink:  #f3c579;
  --gw-orange-bg: #2f2015; --gw-orange-bd: #48301f; --gw-orange-ink: #f7b487;
  --gw-rose-bg:   #2e1922; --gw-rose-bd:   #472532; --gw-rose-ink:   #ffa3b6;
  --gw-pink-bg:   #2c1a2b; --gw-pink-bd:   #43273f; --gw-pink-ink:   #f0a6e4;
  --gw-slate-bg:  #1c2740; --gw-slate-bd:  #2b3a54; --gw-slate-ink:  #a3b1c6;

  /* Los alias semánticos hay que REDECLARARLOS aquí, no basta con cambiar la
     rampa de color de la que salen.

     Motivo: una propiedad personalizada resuelve su var() en el elemento donde
     se DECLARA. Como --gw-danger-bg solo se declara en :root, su
     var(--gw-rose-bg) se sustituye allí por el rosa CLARO, y ese valor ya
     resuelto es el que se hereda. Redefinir --gw-rose-bg aquí abajo no lo
     alcanza. Sin estas doce líneas, las alertas, los botones de peligro, los
     iconos de los modales y el hover de Cerrar sesión se quedaban con su
     aspecto de modo claro dentro de la interfaz oscura. */
  --gw-success-bg: #122a20;  --gw-success-bd: #1b402f;  --gw-success-ink: #86dfaa;
  --gw-warn-bg:    #2d2312;  --gw-warn-bd:    #45351a;  --gw-warn-ink:    #f3c579;
  --gw-danger-bg:  #2e1922;  --gw-danger-bd:  #472532;  --gw-danger-ink:  #ffa3b6;
  --gw-info-bg:    #16243f;  --gw-info-bd:    #21365c;  --gw-info-ink:    #9ec1ff;

  --gw-sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --gw-sh-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --gw-sh-md: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .5);
  --gw-sh-lg: 0 4px 10px rgba(0, 0, 0, .35), 0 18px 40px -14px rgba(0, 0, 0, .6);
  --gw-sh-xl: 0 8px 20px rgba(0, 0, 0, .4),  0 32px 64px -20px rgba(0, 0, 0, .7);
  --gw-sh-pop:0 4px 12px rgba(0, 0, 0, .35), 0 20px 44px -16px rgba(0, 0, 0, .6);
}
body.dark-mode .gw-modal-overlay,
body.dark-mode .gw-drawer-overlay { background: rgba(2, 6, 23, .66); }
body.dark-mode .gw-topbar { background: rgba(19, 28, 46, .82); }
body.dark-mode .gw-btn-dark.gw-btn-dark { background: var(--gw-brand); color: var(--gw-brand-ink); }
body.dark-mode .gw-btn-dark.gw-btn-dark:hover:not(:disabled) { filter: brightness(1.1); background: var(--gw-brand); }
body.dark-mode .gw-kb-nav-btn.is-next { background: var(--gw-brand); color: var(--gw-brand-ink); }
body.dark-mode .gw-kb-col { background: var(--gw-surface-2); }
body.dark-mode .gw-chip-solid { background: var(--gw-surface-3); color: var(--gw-text); }
body.dark-mode .gw-skel { background: var(--gw-surface-3); }
body.dark-mode .gw-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
body.dark-mode { --gw-brand-on-soft: var(--p-ink-dark, #b0e511); }
body.dark-mode .gw-tip::after { background: var(--gw-surface-3); color: var(--gw-text); border: 1px solid var(--gw-border); }
body.dark-mode .gw-nav-title { color: var(--gw-text-muted); }
body.dark-mode .gw-sidebar.is-collapsed .gw-nav-item::after { background: var(--gw-surface-3); color: var(--gw-text); border: 1px solid var(--gw-border); }
body.dark-mode .gw-bulkbar { border: 1px solid var(--gw-border-strong); }
body.dark-mode .gw-btn-secondary.gw-btn-secondary:hover:not(:disabled) { background: var(--gw-surface-3); }
body.dark-mode .gw-empty-dashed { background: transparent; border-color: var(--gw-border); }
body.dark-mode .gw-login-body { background: var(--gw-bg); }

/* includes/theme_engine.php fuerza con !important el fondo y el borde de
   todos los input/select/textarea en modo oscuro. Aquí se reafirma el
   aspecto del design system, incluido el borde de foco, que de lo contrario
   quedaba pisado por esa regla global. */
body.dark-mode .gw-input.gw-input,
body.dark-mode .gw-select.gw-select,
body.dark-mode .gw-textarea.gw-textarea {
  background-color: var(--gw-surface-2) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text) !important;
}
body.dark-mode .gw-input.gw-input:focus,
body.dark-mode .gw-select.gw-select:focus,
body.dark-mode .gw-textarea.gw-textarea:focus {
  background-color: var(--gw-surface) !important;
  border-color: var(--gw-brand) !important;
}
body.dark-mode .gw-input-group { background: var(--gw-surface-2); }
body.dark-mode .gw-input-group > .gw-input.gw-input { background-color: transparent !important; }
body.dark-mode .gw-input-group-addon { background: var(--gw-surface-3); }
body.dark-mode .gw-ui ::selection { background: var(--gw-brand-35); color: #fff; }
body.dark-mode .gw-select.gw-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8da6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* ==========================================================================
   20 · CORRECCIONES GLOBALES  ·  anti-colapso y anti-solapamiento
   ========================================================================== */

/* Los contenedores flex sin `min-width:0` desbordan cuando su contenido es
   más ancho que ellos. Esta es la causa nº1 de tarjetas rotas. */
.gw-ui .flex > .flex-1,
.gw-ui .flex > .flex-auto { min-width: 0; }

/* ── Iconos ────────────────────────────────────────────────────────────
   El motor de iconos dibuja el <svg> DENTRO del <i data-lucide>, nunca lo
   sustituye (así no rompe el DOM virtual de Vue). Por eso quien manda en el
   tamaño es el <i>, y el <svg> simplemente lo rellena. */
i[data-lucide] {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 1em; height: 1em;
  line-height: 0;
}
i[data-lucide] > svg { width: 100%; height: 100%; display: block; }
.gw-ui svg[class*="lucide"] { flex-shrink: 0; }

/* Imágenes nunca desbordan su contenedor */
.gw-ui img { max-width: 100%; }

/* Los popovers dentro de tarjetas con radios no deben recortarse */
.gw-allow-overflow { overflow: visible !important; }

/* Sombra de scroll: indica que hay más contenido */
.gw-fade-b { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.gw-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }


/* ==========================================================================
   21 · ACCESIBILIDAD E IMPRESIÓN
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gw-ui *,
  .gw-ui *::before,
  .gw-ui *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {

  @page { size: A4 portrait; margin: 12mm 10mm; }

  /* Se respetan los fondos: sin esto Chrome imprime las tarjetas en blanco
     y las barras de progreso desaparecen. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* El chasis de la aplicación no forma parte del documento */
  .gw-no-print,
  .gw-topbar,
  .gw-appbar,
  .gw-sidebar,
  #desktop-sidebar,
  .gw-mobilenav,
  .gw-modal-overlay,
  .gw-drawer-overlay,
  .gw-drawer,
  .gw-toast-stack,
  .gw-fab,
  .gw-page-head-actions,
  .gw-btn,
  .gw-icon-btn,
  .gw-check,
  .gw-dropdown,
  .gw-tabs { display: none !important; }

  .gw-main, .gw-shell, .gw-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* El modo oscuro no se imprime: se devuelve la paleta clara a la hoja
     para no gastar tóner y, sobre todo, para que se lea. */
  body.dark-mode,
  body.dark-mode .gw-card,
  body.dark-mode .gw-panel,
  body.dark-mode .gw-stat { background: #ffffff !important; }
  body.dark-mode,
  body.dark-mode .gw-h1,
  body.dark-mode .gw-h2,
  body.dark-mode .gw-card-title,
  body.dark-mode .gw-stat-value,
  body.dark-mode .gw-row-title { color: #0f172a !important; }
  body.dark-mode .gw-caption,
  body.dark-mode .gw-stat-label,
  body.dark-mode .gw-row-sub { color: #64748b !important; }

  body { background: #ffffff !important; }

  /* Ninguna tarjeta debe partirse entre dos hojas */
  .gw-card, .gw-kb-card, .gw-stat, .gw-panel, .gw-row, .gw-empty {
    box-shadow: none !important;
    border: 1px solid #dfe5ec !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .gw-card { margin-bottom: 12px !important; }

  /* Un título nunca se queda solo al pie de una hoja */
  .gw-h1, .gw-h2, .gw-card-title, .gw-section-label {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Las tablas largas repiten su cabecera en cada hoja */
  .gw-table thead { display: table-header-group !important; }
  .gw-table tr { break-inside: avoid; page-break-inside: avoid; }

  /* Lo que en pantalla se desplaza, en papel se despliega entero */
  .gw-scroll-thin,
  .gw-table-wrap,
  [style*="overflow-y:auto"],
  [style*="overflow-y: auto"] {
    max-height: none !important;
    overflow: visible !important;
  }

  a[href]::after { content: none !important; }
}


/* ==========================================================================
   22 · ACCESO · pantalla de inicio de sesión y páginas públicas
   ==========================================================================
   La fotografía ocupa la ventana entera y todo lo demás flota encima:
   a la izquierda la marca y el mensaje, a la derecha la tarjeta de acceso.
   ========================================================================== */

.gw-login-body { margin: 0; min-height: 100vh; background: var(--gw-950); }

.gw-login {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  padding-top: calc(32px + var(--gw-safe-top));
  padding-bottom: calc(32px + var(--gw-safe-bottom));
  min-width: 0;
}
@media (min-width: 1024px) {
  .gw-login { justify-content: flex-end; padding: 40px clamp(40px, 6vw, 96px) 40px 0; }
}

/* ── Fondo a pantalla completa ──────────────────────────────────────────── */
.gw-login-slides { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--gw-950); }
/* Sin transición hasta que el carrusel arranca: así la primera fotografía
   aparece de inmediato en vez de fundirse desde negro durante segundo y medio. */
.gw-login-slides .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  will-change: opacity, transform;
}
.gw-login-slides.is-ready .slide {
  transition: opacity 1.6s var(--gw-ease-io), transform 8s linear;
}
.gw-login-slides .slide.active { opacity: 1; transform: scale(1); }
.gw-login-slides .slide > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo: oscurece lo justo para que el texto blanco y la tarjeta destaquen */
.gw-login-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(2,6,23,.74) 0%, rgba(2,6,23,.42) 38%, rgba(2,6,23,.14) 66%, rgba(2,6,23,.06) 100%),
    radial-gradient(1000px 640px at 6% 46%, rgb(var(--p-rgb) / .22), transparent 60%);
}
@media (max-width: 1023px) {
  .gw-login-veil { background: linear-gradient(180deg, rgba(2,6,23,.58), rgba(2,6,23,.78)); }
}

/* ── Marca y mensaje (izquierda) ────────────────────────────────────────── */
.gw-login-brand {
  position: absolute;
  left: clamp(40px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: min(42vw, 520px);
  color: #fff;
  display: none;
}
@media (min-width: 1024px) { .gw-login-brand { display: block; } }

.gw-login-mark { display: flex; align-items: center; gap: 11px; margin-bottom: 48px; }
.gw-login-mark-ico {
  width: 32px; height: 26px; display: block; flex-shrink: 0;
  background-color: #fff;
  -webkit-mask-image: url('../img/iconogestwork.svg'); mask-image: url('../img/iconogestwork.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.gw-login-mark-txt {
  width: 116px; height: 19px; display: block; flex-shrink: 0;
  background-color: #fff;
  -webkit-mask-image: url('../img/letrasgestwork.svg'); mask-image: url('../img/letrasgestwork.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
}

/* Los tres mensajes se apilan en la misma caja y se funden entre sí, así el
   bloque nunca cambia de alto ni desplaza los puntos indicadores. */
.gw-login-copy { position: relative; min-height: 230px; }
.gw-login-copy-item {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--gw-ease-io), transform .8s var(--gw-ease);
  pointer-events: none;
}
.gw-login-copy-item.is-on { opacity: 1; transform: none; }
.gw-login-copy-item h2 {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 680;
  letter-spacing: -0.028em;
  line-height: 1.14;
  margin: 0 0 18px;
  max-width: 17ch;
  text-shadow: 0 2px 18px rgba(2, 6, 23, .35);
}
.gw-login-copy-item p {
  font-size: var(--gw-fs-xl);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  margin: 0;
  max-width: 44ch;
}

.gw-login-dots { display: flex; gap: 8px; margin-top: 34px; }
.gw-login-dots .indicator {
  width: 30px; height: 4px; padding: 0;
  border: 0; border-radius: var(--gw-r-pill);
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background-color var(--gw-dur-3) var(--gw-ease), width var(--gw-dur-3) var(--gw-ease);
  transform: none; box-shadow: none;
}
.gw-login-dots .indicator:hover { background: rgba(255, 255, 255, .55); transform: none; }
.gw-login-dots .indicator.is-on { background: #fff; width: 46px; }

/* ── Pantalla suelta: una tarjeta centrada y el cierre abajo del todo ──────
   Recuperar la contraseña, crearla desde la invitación, pedir acceso. El
   rótulo «Gestwork · …» iba pegado debajo de la tarjeta y, como la columna
   entera estaba centrada, quedaba flotando a media pantalla. Ahora la
   tarjeta se centra en el espacio que sobra (.gw-suelta-centro) y el cierre
   se queda al fondo de la ventana; si la tarjeta es más alta que la
   pantalla, el cierre baja con ella y nunca se monta encima. */
.gw-suelta {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40px + var(--gw-safe-top)) 16px 0;
  background: transparent;
}
@supports (height: 100dvh) { .gw-suelta { min-height: 100dvh; } }
.gw-suelta-centro {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-suelta-pie {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 28px 16px calc(20px + var(--gw-safe-bottom));
  text-align: center;
}

/* ── Tarjeta de acceso (derecha, flotando) ────────────────────────────────
   Es un panel alto: ocupa buena parte de la altura de la pantalla en vez de
   quedarse como una cajita pequeña perdida en medio del fondo. */
.gw-login-main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  min-width: 0;
}
.gw-login-main .gw-card {
  background: var(--gw-0);
  border-color: rgba(255, 255, 255, .5);
  border-radius: var(--gw-r-3xl);
  box-shadow: 0 36px 80px -22px rgba(2, 6, 23, .6), 0 12px 28px -14px rgba(2, 6, 23, .38);
  display: flex; flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .gw-login-main .gw-card { min-height: min(78vh, 720px); }
}
/* Más aire dentro: el formulario respira en lugar de comprimirse */
.gw-login-main .gw-card > .gw-card-body {
  padding: 44px 44px 36px;
  /* Columna: cabecera arriba, formulario en medio y pie pegado al fondo.
     Antes el contenido acababa a media tarjeta y dejaba un hueco muerto. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 640px) {
  .gw-login-main .gw-card > .gw-card-body { padding: 30px 24px 26px; }
}
.gw-login-main .gw-field { margin-bottom: 20px; }
.gw-login-main .gw-input,
.gw-login-main .gw-select { min-height: 48px; font-size: var(--gw-fs-lg); }
.gw-login-main .gw-label { font-size: var(--gw-fs-md); margin-bottom: 8px; }
.gw-login-main .gw-btn-lg { --gw-btn-h: 52px; font-size: var(--gw-fs-xl); }
.gw-login-main .gw-h2 { font-size: var(--gw-fs-3xl); }
.gw-login-main .gw-body { font-size: var(--gw-fs-lg); }

/* En móvil no hay panel de marca, así que el logotipo va sobre la tarjeta.
   La especificidad doble es necesaria: el CDN de Tailwind carga después que
   esta hoja y su utilidad `.flex` ganaría a un `display:none` simple. */
.gw-login-mark-mobile span { background-color: #fff !important; }
@media (min-width: 1024px) {
  .gw-login-mark-mobile.gw-login-mark-mobile { display: none; }
}

/* El pie del login se lee sobre la fotografía */
.gw-login-main > div > .gw-meta {
  color: rgba(255, 255, 255, .8) !important;
  text-shadow: 0 1px 3px rgba(2, 6, 23, .5);
}

/* ══════════════════════════════════════════════════════════════════════════
   23 · DOCUMENTOS PDF
   ──────────────────────────────────────────────────────────────────────────
   Lenguaje visual de todo lo que se descarga en PDF (ficha del lead,
   historial de pérdidas…). Va aparte del resto de la interfaz por dos
   motivos:

   1. html2canvas fotografía el DOM y no entiende CSS moderno. Aquí no se
      usa color-mix(), ni oklch(), ni la sintaxis "rgb(r g b / a)", ni gap
      en flex: sólo hex, rgba() y tablas. Todo lo que se salga de eso sale
      en negro o descolocado en la hoja.
   2. Un documento impreso necesita reglas que la pantalla no tiene: evitar
      que una tarjeta se parta entre dos páginas, márgenes en centímetros,
      jerarquía tipográfica que aguante el papel.

   La única variable que se lee del tema es --p-color (hexadecimal), que sí
   resuelve html2canvas porque consulta el estilo ya calculado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hoja ───────────────────────────────────────────────────────────────── */
.gw-pdf {
  width: 794px;                 /* A4 a 96 ppp */
  box-sizing: border-box;
  background: #ffffff;
  color: #1e293b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.gw-pdf * { box-sizing: border-box; }
.gw-pdf p { margin: 0; }
.gw-pdf-body { padding: 34px 46px 40px; }

/* Franja de marca en el borde superior de la hoja */
.gw-pdf-band { height: 7px; background: var(--p-color, #b0e511); }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.gw-pdf-head {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
}
.gw-pdf-head td { vertical-align: top; padding: 0; border: 0; }
.gw-pdf-head-r { text-align: right; }
.gw-pdf-logo img { display: block; }
.gw-pdf-logo-row { border-collapse: collapse; }
.gw-pdf-logo-row td { padding: 0 5px 0 0; vertical-align: middle; border: 0; }

.gw-pdf-doc {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #94a3b8;
}
.gw-pdf-doc-name {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
  margin-top: 2px;
}
.gw-pdf-doc-meta { font-size: 10px; color: #94a3b8; margin-top: 3px; }

/* ── Titular del documento ──────────────────────────────────────────────── */
.gw-pdf-hero {
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--p-color, #b0e511);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
  background: #fbfcfd;
  page-break-inside: avoid;
  break-inside: avoid;
}
.gw-pdf-hero-t {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.gw-pdf-hero-s { font-size: 12px; color: #64748b; margin-top: 4px; }

/* ── Sección ────────────────────────────────────────────────────────────── */
.gw-pdf-sec { margin-bottom: 22px; }
.gw-pdf-sec-avoid { page-break-inside: avoid; break-inside: avoid; }
.gw-pdf-sec-t {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
  padding-bottom: 7px;
  margin: 0 0 14px;
  border-bottom: 1px solid #e2e8f0;
  page-break-after: avoid;
  break-after: avoid;
}
.gw-pdf-sec-t span { color: #cbd5e1; font-weight: 700; }

/* ── Rejilla de campos (en tabla: html2canvas la mide bien siempre) ─────── */
.gw-pdf-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 10px 10px; margin: -10px; }
.gw-pdf-grid td { vertical-align: top; padding: 0; border: 0; width: 50%; }
.gw-pdf-grid-3 td { width: 33.33%; }

.gw-pdf-field {
  border: 1px solid #e8edf3;
  border-radius: 10px;
  padding: 11px 13px;
  background: #f8fafc;
  page-break-inside: avoid;
  break-inside: avoid;
}
.gw-pdf-field-l {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 3px;
}
.gw-pdf-field-v {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}
.gw-pdf-field-v.is-brand { color: var(--p-ink, #617f06); }
.gw-pdf-field-v.is-money { color: #047857; }
.gw-pdf-field-v.is-muted { color: #94a3b8; font-weight: 600; }

/* ── Paneles de contenido largo ─────────────────────────────────────────── */
.gw-pdf-panel {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #ffffff;
  page-break-inside: avoid;
  break-inside: avoid;
}
.gw-pdf-panel-t {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #475569;
  margin: 0 0 8px;
}
.gw-pdf-panel-c { font-size: 12px; color: #334155; line-height: 1.65; word-break: break-word; }
.gw-pdf-panel-c p { margin: 0 0 7px; }
.gw-pdf-panel-c p:last-child { margin-bottom: 0; }
.gw-pdf-panel-c ul,
.gw-pdf-panel-c ol { margin: 0 0 7px; padding-left: 18px; }
.gw-pdf-panel-c li { margin-bottom: 3px; }
.gw-pdf-panel-c strong { color: #0f172a; }

.gw-pdf-panel.is-info   { background: #f5faff; border-color: #d8ecfb; }
.gw-pdf-panel.is-info   .gw-pdf-panel-t { color: #0369a1; }
.gw-pdf-panel.is-warn   { background: #fffbf3; border-color: #fbe8c4; }
.gw-pdf-panel.is-warn   .gw-pdf-panel-t { color: #b45309; }
.gw-pdf-panel.is-danger { background: #fff6f6; border-color: #fbdada; }
.gw-pdf-panel.is-danger .gw-pdf-panel-t { color: #b91c1c; }
.gw-pdf-panel.is-brand  { background: #fafdf0; border-color: #e4f2b8; }
.gw-pdf-panel.is-brand  .gw-pdf-panel-t { color: var(--p-ink, #617f06); }

/* Guiones de venta: se apilan muchos seguidos, así que en vez de rellenar el
   bloque entero de color (que satura la hoja) sólo se marca el canto. */
.gw-pdf-panel.is-script {
  background: #ffffff;
  border-color: #eef2f7;
  border-left: 3px solid var(--p-color, #b0e511);
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
  margin-bottom: 9px;
}
.gw-pdf-panel.is-script .gw-pdf-panel-t { color: var(--p-ink, #617f06); }

/* Subbloque dentro de un panel (cada script de venta) */
.gw-pdf-sub { padding: 10px 0 0; border-top: 1px solid #eef2f7; margin-top: 10px; page-break-inside: avoid; break-inside: avoid; }
.gw-pdf-sub:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.gw-pdf-sub-t {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 5px;
}

/* ── Tabla de datos ─────────────────────────────────────────────────────── */
.gw-pdf-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; word-break: break-word; }
.gw-pdf-table thead { display: table-header-group; }   /* la cabecera se repite por página */
.gw-pdf-table th {
  text-align: left;
  padding: 9px 10px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
}
.gw-pdf-table th:first-child { border-top-left-radius: 8px; }
.gw-pdf-table th:last-child  { border-top-right-radius: 8px; text-align: right; }
.gw-pdf-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #eef2f7;
  color: #475569;
  vertical-align: top;
  page-break-inside: avoid;
  break-inside: avoid;
}
.gw-pdf-table tbody tr { page-break-inside: avoid; break-inside: avoid; }
.gw-pdf-table tbody tr:nth-child(even) td { background: #fbfcfd; }
.gw-pdf-table .c-strong { color: #0f172a; font-weight: 700; }
.gw-pdf-table .c-num    { text-align: right; color: #0f172a; font-weight: 700; white-space: nowrap; }
.gw-pdf-table .c-note   { color: #64748b; }
.gw-pdf-table .c-empty  { text-align: center; color: #94a3b8; padding: 26px 10px; }

/* ── Tarjetas de resumen ────────────────────────────────────────────────── */
.gw-pdf-kpis { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 10px 0; margin: 0 -10px 20px; }
.gw-pdf-kpis td { padding: 0; border: 0; vertical-align: top; }
.gw-pdf-kpis .gw-pdf-kpi { height: 100%; }
.gw-pdf-kpi {
  border: 1px solid #e8edf3;
  border-radius: 12px;
  padding: 13px 15px;
  background: #f8fafc;
  page-break-inside: avoid;
  break-inside: avoid;
}
.gw-pdf-kpi-l {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 3px;
}
.gw-pdf-kpi-v { font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; line-height: 1.15; }
.gw-pdf-kpi-v.is-danger { color: #b91c1c; }
.gw-pdf-kpi-v.is-money  { color: #047857; }

/* ── Etiquetas ──────────────────────────────────────────────────────────── */
.gw-pdf-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.gw-pdf-pill.is-brand  { background: #fafdf0; color: var(--p-ink, #617f06); border-color: #e4f2b8; }
.gw-pdf-pill.is-danger { background: #fff1f1; color: #b91c1c; border-color: #fbdada; }

/* ── Lista de enlaces / redes ───────────────────────────────────────────── */
.gw-pdf-links { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.gw-pdf-links td { padding: 6px 0; border-bottom: 1px solid #f1f5f9; color: #334155; word-break: break-all; }
.gw-pdf-links td:first-child { width: 120px; color: #94a3b8; font-weight: 700; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; word-break: normal; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.gw-pdf-foot {
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 9px;
  color: #94a3b8;
  width: 100%;
  border-collapse: collapse;
}
.gw-pdf-foot td { border: 0; padding: 0; }
.gw-pdf-foot td:last-child { text-align: right; }
.gw-pdf-foot strong { color: #64748b; font-weight: 700; }


/* ── Estructura interna de la tarjeta de acceso ─────────────────────────── */
.gw-login-head { margin-bottom: 26px; }
.gw-login-eyebrow {
  font-size: var(--gw-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gw-brand-on-soft);
  margin: 0 0 7px;
}
.gw-login-form { flex: 0 0 auto; }

.gw-login-foot {
  margin-top: auto;            /* empuja el pie al fondo de la tarjeta */
  padding-top: 26px;
}
.gw-login-foot-cta {
  text-align: center;
  margin: 0 0 16px;
}
.gw-login-foot-cta a {
  font-weight: 650;
  color: var(--gw-brand-on-soft);
  text-decoration: none;
}
.gw-login-foot-cta a:hover { text-decoration: underline; }

/* Señales de confianza: cierran la tarjeta y explican por qué el acceso
   pide un segundo paso, en lugar de dejar el borde inferior vacío. */
.gw-login-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 0;
  padding: 15px 0 0;
  list-style: none;
  border-top: 1px solid var(--gw-border-soft, #eef2f7);
}
.gw-login-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--gw-fs-xs);
  font-weight: 600;
  color: var(--gw-text-faint);
  white-space: nowrap;
}
.gw-login-trust svg { width: 13px; height: 13px; stroke-width: 2.2; }

/* ── Capacidades del producto, en el panel sobre la fotografía ──────────── */
.gw-login-feats {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  max-width: 420px;
}
.gw-login-feats li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--gw-fs-md);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .76);
}
.gw-login-feats svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 2px;
  stroke-width: 2;
  color: var(--p-color, #b0e511);
}


/* Canto de marca en la tarjeta: la ata a la identidad y al resto de
   documentos del sistema (los PDF llevan la misma franja). */
.gw-login-main .gw-card {
  position: relative;
  overflow: hidden;
}
.gw-login-main .gw-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--p-color, #b0e511), rgb(var(--p-rgb, 176 229 17) / .35));
}

/* Un poco más de cuerpo para el pie: sobre blanco el gris más claro
   quedaba casi invisible. */
.gw-login-trust li { color: var(--gw-text-3, #64748b); }
.gw-login-trust svg { color: var(--gw-brand-on-soft); opacity: .9; }

/* Pantallas bajas: la tarjeta no debe forzar scroll por la altura mínima */
@media (max-height: 760px) and (min-width: 1024px) {
  .gw-login-main .gw-card { min-height: 0; }
  .gw-login-main .gw-card > .gw-card-body { padding: 32px 40px 28px; }
  .gw-login-head { margin-bottom: 20px; }
  .gw-login-foot { padding-top: 20px; }
  .gw-login-feats { margin-top: 26px; gap: 10px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   24 · UTILIDADES DE TOKEN
   ──────────────────────────────────────────────────────────────────────────
   Equivalentes a `text-gray-500`, `bg-gray-50`… pero apuntando a las
   variables del sistema, así que cambian solas con el modo oscuro. Las
   utilidades de Tailwind son fijas: un `text-gray-900` sigue siendo casi
   negro sobre una tarjeta oscura, y ahí es donde el dashboard se veía mal.

   Van dobladas (`.gw-t.gw-t`) porque el CDN de Tailwind inyecta su hoja
   DESPUÉS de esta y, a igualdad de especificidad, ganaría él.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-t.gw-t             { color: var(--gw-text); }
.gw-t2.gw-t2           { color: var(--gw-text-2); }
.gw-t3.gw-t3           { color: var(--gw-text-3); }
.gw-t4.gw-t4           { color: var(--gw-text-muted); }
.gw-t5.gw-t5           { color: var(--gw-text-faint); }

.gw-sf.gw-sf           { background-color: var(--gw-surface); }
.gw-sf2.gw-sf2         { background-color: var(--gw-surface-2); }
.gw-sf3.gw-sf3         { background-color: var(--gw-surface-3); }

.gw-bd.gw-bd           { border-color: var(--gw-border); }
.gw-bd-soft.gw-bd-soft { border-color: var(--gw-border-soft); }
.gw-bd-strong.gw-bd-strong { border-color: var(--gw-border-strong); }

.gw-hover-sf2:hover        { background-color: var(--gw-surface-2); }
.gw-hover-bd:hover         { border-color: var(--gw-border); }
.gw-hover-bd-strong:hover  { border-color: var(--gw-border-strong); }

/* Medalla del ranking de asesores */
.gw-medal.gw-medal     { background-color: var(--gw-amber-bg); color: var(--gw-amber-ink); }
.gw-medal-off.gw-medal-off { background-color: var(--gw-surface-3); color: var(--gw-text-3); }


/* ══════════════════════════════════════════════════════════════════════════
   25 · FICHAS DE ELECCIÓN RÁPIDA
   ──────────────────────────────────────────────────────────────────────────
   Motivos habituales dentro de un diálogo. Rellenan un campo de texto en
   lugar de sustituirlo: el usuario elige lo típico con un clic y sigue
   pudiendo escribir el matiz. Se usa al marcar un lead como perdido.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
}

.gw-pick.gw-pick {
  appearance: none;
  border: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
  color: var(--gw-text-2);
  font-family: inherit;
  font-size: var(--gw-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-align: left;
}
.gw-pick.gw-pick:hover {
  background: var(--gw-surface-3);
  border-color: var(--gw-border-strong);
  color: var(--gw-text);
}
.gw-pick.gw-pick:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
}
.gw-pick.gw-pick.is-on {
  background: rgb(var(--gw-brand-rgb) / .14);
  border-color: rgb(var(--gw-brand-rgb) / .45);
  color: var(--gw-brand-on-soft);
}


/* ── Qué esperar al entrar · rellena el sobrante de la tarjeta ──────────── */
/* Con un solo `margin-top:auto` (el del pie) TODO el espacio libre se
   acumulaba en un hueco de ~160 px entre el botón y el pie. Poniendo un
   segundo `auto` aquí, el navegador reparte el sobrante a partes iguales
   entre los dos, y además este bloque se lo come en su mayor parte. */
.gw-login-aside {
  margin: auto 0 0;
  padding-top: 22px;
  list-style: none;
  display: grid;
  gap: 11px;
}
.gw-login-aside li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--gw-fs-sm);
  line-height: 1.5;
  color: var(--gw-text-3);
}
.gw-login-aside strong { color: var(--gw-text-2); font-weight: 650; }
.gw-login-aside svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  stroke-width: 2;
  color: var(--gw-brand-on-soft);
}

/* Pantallas bajas: la tarjeta ya no tiene altura mínima, así que este
   bloque sólo añadiría alto y forzaría scroll. Ahí se oculta. */
@media (max-height: 760px) and (min-width: 1024px) {
  .gw-login-aside { display: none; }
}


/* ==========================================================================
   26 · GUIONES POR CADENCIA
   --------------------------------------------------------------------------
   La tarjeta del guion del día y las pestañas de etapa dentro del acordeón.
   Todo sale de tokens, así que el modo oscuro y el tema de marca funcionan
   solos, sin una sola regla extra.
   ========================================================================== */

/* ── Cabecera de canal: contador de guiones escritos ──────────────────── */
.gw-acc-count {
  flex-shrink: 0;
  font-size: var(--gw-fs-2xs);
  font-weight: 600;
  color: var(--gw-text-muted);
  white-space: nowrap;
}

/* ── Pestañas de etapa ────────────────────────────────────────────────── */
.gw-tabs-etapa { margin-bottom: 12px; }
.gw-tabs-etapa .gw-tab { padding: 8px 11px; font-size: var(--gw-fs-xs); gap: 6px; }

/* Punto de estado: lleno = ese guion está escrito, hueco = sigue vacío.
   Se lee de un vistazo cuáles faltan sin abrir ninguna pestaña. */
.gw-dot-etapa {
  width: 6px; height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gw-border-strong);
  background: transparent;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io),
              border-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-dot-etapa.is-lleno { background: var(--gw-brand); border-color: var(--gw-brand); }

/* La etapa que toca HOY lleva un anillo, para distinguirla de la que está
   simplemente seleccionada. */
.gw-tab.is-toca { color: var(--gw-brand-on-soft); }
.gw-tab.is-toca .gw-dot-etapa { box-shadow: 0 0 0 3px var(--gw-brand-20); }

/* ── Cuerpo de la etapa ───────────────────────────────────────────────── */
.gw-etapa-cuerpo { min-width: 0; }
.gw-etapa-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; min-height: 26px;
}
.gw-etapa-estado {
  font-size: var(--gw-fs-2xs);
  color: var(--gw-text-muted);
  min-width: 0;
}
.gw-etapa-estado.is-error { color: var(--gw-danger-ink); font-weight: 600; }
.gw-etapa-reintentar {
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}

/* ── Tarjeta del guion del día ────────────────────────────────────────── */
.gw-hoy {
  border: 1px solid var(--gw-brand-20);
  background: var(--gw-brand-08);
  border-radius: var(--gw-r-lg);
  padding: 14px;
  margin-bottom: 12px;
  min-width: 0;
}
/* Atrasado: es el estado que dispara la acción, así que cambia de color. */
.gw-hoy.is-atraso { border-color: var(--gw-danger-bd); background: var(--gw-danger-bg); }
/* Cadencia terminada: ya no hay nada que hacer, se apaga. */
.gw-hoy.is-fin    { border-color: var(--gw-border);    background: var(--gw-surface-2); }

.gw-hoy-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gw-hoy-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-sm);
  background: var(--gw-surface);
  color: var(--gw-brand-on-soft);
  font-size: 13px;
}
.gw-hoy.is-atraso .gw-hoy-ico { color: var(--gw-danger-ink); }
.gw-hoy.is-fin    .gw-hoy-ico { color: var(--gw-text-muted); }

.gw-hoy-title {
  font-size: var(--gw-fs-md); font-weight: 700; line-height: 1.35;
  color: var(--gw-brand-on-soft);
}
.gw-hoy.is-atraso .gw-hoy-title { color: var(--gw-danger-ink); }
.gw-hoy.is-fin    .gw-hoy-title { color: var(--gw-text-2); }
.gw-hoy-sub {
  margin-top: 2px;
  font-size: var(--gw-fs-xs); line-height: 1.45;
  color: var(--gw-text-2);
}

/* ── Fichas de canal dentro de la tarjeta ─────────────────────────────── */
.gw-hoy-canales { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gw-hoy-canal {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--gw-r-sm);
  padding: 3px;
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-hoy-canal:hover  { border-color: var(--gw-border-strong); }
.gw-hoy-canal.is-sel { border-color: var(--gw-brand); background: var(--gw-surface); }
.gw-hoy-canal-ico {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-sm);
  font-size: 14px;
}

/* ── Contenido del guion ──────────────────────────────────────────────── */
.gw-hoy-cuerpo {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  max-height: 200px;          /* no deja que un guion largo empuje la ficha */
  overflow-y: auto;
  font-size: var(--gw-fs-sm);
  color: var(--gw-text-2);
  overflow-wrap: anywhere;
}
.gw-hoy-vacio {
  margin-top: 10px;
  font-size: var(--gw-fs-sm);
  color: var(--gw-text-3);
}
.gw-hoy-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

@media (max-width: 640px) {
  .gw-acc-count { display: none; }   /* la cabecera de canal ya va justa */
  .gw-hoy-foot .gw-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Kanban · cargar más leads de una columna ────────────────────────────
   El tablero sigue pintando por lotes para no ahogar al navegador, pero el
   recorte ya no es invisible: antes se cortaba en 50 y los leads que pasaban
   de ahí no aparecían por ningún lado.                                     */
.gw-kb-mas {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 8px; padding: 9px 10px;
  border: 1px dashed var(--gw-border-strong);
  border-radius: var(--gw-r-md);
  background: var(--gw-surface-2);
  font-size: var(--gw-fs-xs); font-weight: 600; color: var(--gw-text-2);
  cursor: pointer;
  transition: border-color var(--gw-dur-1) var(--gw-ease-io),
              background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-kb-mas:hover { border-color: var(--gw-brand); background: var(--gw-brand-08); color: var(--gw-brand-on-soft); }
.gw-kb-mas-n {
  padding: 1px 7px; border-radius: var(--gw-r-pill);
  background: var(--gw-surface-3); color: var(--gw-text-3);
  font-size: var(--gw-fs-2xs); font-weight: 700;
}

/* ── Filtros activos ─────────────────────────────────────────────────────
   Una fila de chips bajo la cabecera del Kanban. Cada uno retira su filtro
   al pulsarlo; sin ella hay que abrir el panel entero solo para saber por
   qué el listado viene corto.                                             */
.gw-chips-activos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 var(--gw-pad-x, 16px) 10px;
  min-width: 0;
}
.gw-chips-activos-t {
  font-size: var(--gw-fs-2xs); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--gw-text-muted); margin-right: 2px;
}
.gw-chip-x { cursor: pointer; border-style: solid; }
.gw-chip-x:hover { background: var(--gw-brand-20); }
.gw-chip-x span { font-weight: 700; opacity: .65; }
.gw-chips-limpiar {
  border: 0; background: none; padding: 2px 4px; cursor: pointer;
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text-3);
  text-decoration: underline;
}
.gw-chips-limpiar:hover { color: var(--gw-danger-ink); }
.gw-preset { padding: 4px 9px; font-size: var(--gw-fs-2xs); }
.gw-preset:hover { background: var(--gw-brand-08); color: var(--gw-brand-on-soft); }

/* ── Pie de la tabla de leads ────────────────────────────────────────── */
.gw-tabla-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 14px;
  border-top: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
}
.gw-tabla-pie-t { font-size: var(--gw-fs-xs); color: var(--gw-text-2); }
.gw-tabla-pie-nav { display: flex; align-items: center; gap: 8px; }
.gw-tabla-pie-n {
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text-3);
  min-width: 46px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COTIZACIONES Y DOCUMENTOS DE COBRO
   ───────────────────────────────────────────────────────────────────────────
   Piezas propias del editor de documentos: el filtro en forma de chip, la
   ficha de cada línea de detalle y el bloque de totales.

   Todo se apoya en los tokens --gw-*, así que el modo oscuro sale solo. La
   única excepción son los alias semánticos, que sí hay que redeclarar dentro
   de body.dark-mode: una propiedad personalizada resuelve su var() DONDE SE
   DECLARA, no donde se usa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Filtro con forma de chip pulsable */
.gw-chip-btn {
  cursor: pointer;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  color: var(--gw-text-3);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gw-chip-btn:hover { border-color: var(--gw-border-strong); color: var(--gw-text-2); }
.gw-chip-btn.is-active.is-active {
  background: var(--gw-brand);
  border-color: var(--gw-brand);
  color: var(--gw-brand-ink);
  font-weight: 650;
}

/* Número de documento: tabular, para que las series se lean alineadas */
.gw-mono {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--gw-text-2);
}

/* Fila con realce al pasar por encima */
.gw-row-hover { transition: background .13s ease; }
.gw-row-hover:hover { background: var(--gw-surface-2); }

.gw-section-title {
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  color: var(--gw-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Un título de sección y su explicación salían pegados: ninguna de las dos
   clases declara margen y el reset de Tailwind, que carga después, deja los
   h2 y los p a cero. */
.gw-section-title + .gw-caption { margin-top: 2px; }

.gw-label-xs { font-size: var(--gw-fs-2xs); margin-bottom: 3px; }
.gw-label-opt { font-weight: 400; color: var(--gw-text-muted); }

/* (La casilla en línea se definía aquí Y más abajo, con valores distintos; la
   de aquí dejaba un `white-space: nowrap` que la de abajo no anulaba y los
   textos largos se salían en el teléfono. Queda una sola, más abajo.) */

.gw-empty-sm { padding: 22px 16px; gap: 7px; }
.gw-empty-sm p { font-size: var(--gw-fs-sm); }

/* ── Ficha de una línea de detalle ────────────────────────────────────────── */
.gw-linea {
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
  background: var(--gw-surface-2);
  padding: 11px 13px;
  margin-bottom: 10px;
}
.gw-linea:hover { border-color: var(--gw-border-strong); }
.gw-linea-cab {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.gw-linea-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; flex: 0 0 21px;
  border-radius: 50%;
  background: var(--gw-brand); color: var(--gw-brand-ink);
  font-size: var(--gw-fs-2xs); font-weight: 700;
}
.gw-linea-total {
  font-size: var(--gw-fs-md); font-weight: 700; color: var(--gw-text);
  font-variant-numeric: tabular-nums; padding-top: 5px;
}
.gw-linea-total.is-opcional {
  color: var(--gw-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--gw-border-strong);
}

/* ── Bloque de totales ────────────────────────────────────────────────────── */
.gw-totales {
  margin-top: 14px; margin-left: auto;
  max-width: 340px;
  border-top: 1px solid var(--gw-border);
  padding-top: 10px;
}
.gw-totales-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: var(--gw-fs-sm); color: var(--gw-text-3);
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.gw-totales-fila.is-total {
  border-top: 2px solid var(--gw-brand);
  margin-top: 6px; padding-top: 9px;
  font-size: var(--gw-fs-lg); font-weight: 700; color: var(--gw-text);
}
.gw-totales-nota {
  font-size: var(--gw-fs-xs); color: var(--gw-text-muted);
  text-align: right; margin-top: 7px; font-style: italic;
}

/* ── Menú de acciones dentro de un diálogo ────────────────────────────────── */
.gw-menu-lista { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.gw-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 11px;
  border: 1px solid transparent; border-radius: var(--gw-r-md);
  background: transparent; color: var(--gw-text-2);
  font-size: var(--gw-fs-sm); font-weight: 550; text-align: left;
  cursor: pointer; transition: background .13s ease, border-color .13s ease;
}
.gw-menu-item:hover { background: var(--gw-surface-2); border-color: var(--gw-border); }
.gw-menu-item svg, .gw-menu-item i[data-lucide] { width: 16px; height: 16px; flex: 0 0 16px; }

/* Avisos del panel de resumen */
.gw-stat.is-warn   { border-color: var(--gw-warn-bd);   background: var(--gw-warn-bg); }
.gw-stat.is-warn .gw-stat-value   { color: var(--gw-warn-ink); }
.gw-stat.is-danger { border-color: var(--gw-danger-bd); background: var(--gw-danger-bg); }
.gw-stat.is-danger .gw-stat-value { color: var(--gw-danger-ink); }
.gw-stat-hint { font-size: var(--gw-fs-2xs); color: var(--gw-text-muted); line-height: 1.4; }

/* ── Modo oscuro ──────────────────────────────────────────────────────────── */
body.dark-mode .gw-linea { background: var(--gw-surface-2); }
body.dark-mode .gw-chip-btn { background: var(--gw-surface); }
body.dark-mode .gw-linea-total.is-opcional { text-decoration-color: var(--gw-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   EJECUCIÓN DE PROYECTOS
   ───────────────────────────────────────────────────────────────────────────
   El tablero de tareas reutiliza el kanban de leads (.gw-kb-*): mismas
   columnas, mismas tarjetas y una sola definición que mantener. Aquí solo van
   las piezas que ese kanban no tenía: el cronómetro, la barra de consumo y
   la lista de hitos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Contenedor con desplazamiento horizontal para el tablero */
.gw-kb-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.gw-kb-vacia {
  padding: 18px 10px; text-align: center;
  font-size: var(--gw-fs-xs); color: var(--gw-text-muted);
  border: 1.5px dashed var(--gw-border); border-radius: var(--gw-r-lg);
}

/* ── Cronómetro ───────────────────────────────────────────────────────────── */
.gw-timer-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--gw-r-lg);
  background: var(--gw-surface-2); color: var(--gw-text-3);
  border: 1px solid var(--gw-border);
}
.gw-timer-ico svg, .gw-timer-ico i[data-lucide] { width: 18px; height: 18px; padding: 0; margin: 0; }
.gw-timer-ico.is-on {
  background: var(--gw-brand); color: var(--gw-brand-ink); border-color: var(--gw-brand);
}
/* El punto que late avisa de que hay tiempo corriendo sin tener que leer nada */
.gw-card.is-corriendo { border-color: var(--gw-brand); }
.gw-card.is-corriendo .gw-timer-ico.is-on { animation: gw-latido 2.4s ease-in-out infinite; }
@keyframes gw-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gw-brand) 26%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .gw-card.is-corriendo .gw-timer-ico.is-on { animation: none; }
}

/* ── Barra de consumo ─────────────────────────────────────────────────────── */
.gw-barra {
  /* display explícito: si alguien la pinta con un <span>, un elemento en línea
     ignora la anchura y la barra se ve vacía sin que nada falle. */
  display: block;
  position: relative;
  height: 9px; width: 100%;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-pill);
  overflow: hidden;
}
.gw-barra-relleno {
  display: block;
  height: 100%;
  border-radius: var(--gw-r-pill);
  transition: width var(--gw-dur-3, .35s) var(--gw-ease, ease);
  background: var(--gw-green-ink);
}
.gw-barra-relleno.is-en_riesgo { background: var(--gw-amber-ink); }
.gw-barra-relleno.is-excedido  { background: var(--gw-rose-ink); }
/* Marca del umbral de aviso: el punto donde conviene mirar el alcance */
.gw-barra-marca {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--gw-text-3); opacity: .55;
}

/* ── Dato suelto con su rótulo ────────────────────────────────────────────── */
.gw-dato-r {
  display: block;
  font-size: var(--gw-fs-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--gw-text-muted); font-weight: 600;
}
.gw-dato-v {
  display: block;
  font-size: var(--gw-fs-lg); font-weight: 700; color: var(--gw-text);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.gw-dato-v.is-negativo { color: var(--gw-rose-ink); }

/* ── Hitos ────────────────────────────────────────────────────────────────── */
.gw-hito-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px; margin-right: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--gw-border-strong);
  background: var(--gw-surface); color: var(--gw-text-muted);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.gw-hito-check svg, .gw-hito-check i[data-lucide] { width: 13px; height: 13px; padding: 0; margin: 0; }
.gw-hito-check:hover { border-color: var(--gw-brand); color: var(--gw-text-2); }
.gw-hito-check.is-on {
  background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink);
}

/* ── Comentarios de tarea ─────────────────────────────────────────────────── */
.gw-coment {
  padding: 9px 11px; margin-bottom: 7px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg);
}
.gw-coment-cab {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--gw-fs-xs); color: var(--gw-text-3); margin-bottom: 3px;
}
.gw-coment-txt { font-size: var(--gw-fs-sm); color: var(--gw-text-2); line-height: 1.5; white-space: pre-wrap; }

/* ── Modo oscuro ──────────────────────────────────────────────────────────── */
body.dark-mode .gw-barra { background: var(--gw-surface-3, var(--gw-surface-2)); }
body.dark-mode .gw-coment { background: var(--gw-surface-2); }
body.dark-mode .gw-timer-ico { background: var(--gw-surface-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   §27 · PAGINACIÓN NUMERADA Y AGRUPACIÓN POR DÍA
   ───────────────────────────────────────────────────────────────────────────
   Hasta aquí solo existía el pie de tabla con anterior/siguiente, y varias
   pantallas se cortaban en silencio al llegar al límite de filas sin decirlo.
   Con la paginación numerada se ve cuánto hay y se puede saltar.

   Doble clase en los elementos que Tailwind podría pisar: el CDN se carga
   DESPUÉS de esta hoja.
   ═══════════════════════════════════════════════════════════════════════════ */

.gw-pager {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: 16px; padding: 4px 0;
}
.gw-pager-btn.gw-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 9px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  background: var(--gw-surface);
  color: var(--gw-text-2);
  font-size: var(--gw-fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.gw-pager-btn.gw-pager-btn svg,
.gw-pager-btn.gw-pager-btn i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }
.gw-pager-btn.gw-pager-btn:hover:not(:disabled):not(.is-gap) {
  background: var(--gw-100);
  border-color: var(--gw-border-strong);
  color: var(--gw-text);
}
.gw-pager-btn.gw-pager-btn.is-active {
  background: var(--gw-brand);
  border-color: var(--gw-brand);
  color: var(--gw-brand-ink);
}
.gw-pager-btn.gw-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Los puntos suspensivos no son un botón: no reaccionan ni al ratón */
.gw-pager-btn.gw-pager-btn.is-gap {
  border-color: transparent; background: transparent;
  cursor: default; opacity: .65; min-width: 22px; padding: 0;
}
.gw-pager-info {
  margin-left: auto;
  font-size: var(--gw-fs-xs); color: var(--gw-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Cabecera de día, pegajosa: en una lista larga dice siempre en qué día vas */
.gw-dia-cab {
  position: sticky; top: 0; z-index: 3;
  padding: 7px 12px; margin-bottom: 7px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  font-size: var(--gw-fs-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gw-text-3);
  backdrop-filter: blur(6px);
}

/* ── Modo oscuro ────────────────────────────────────────────────────────────
   Los valores se repiten literales, no con var() heredado: una variable se
   resuelve donde SE DECLARA, así que un alias declarado en :root conserva el
   valor claro aunque el token al que apunta cambie aquí. */
body.dark-mode .gw-pager-btn.gw-pager-btn { background: var(--gw-surface); border-color: var(--gw-border); }
body.dark-mode .gw-pager-btn.gw-pager-btn:hover:not(:disabled):not(.is-gap) { background: var(--gw-surface-2); }
body.dark-mode .gw-dia-cab { background: var(--gw-surface-2); border-color: var(--gw-border); }

@media (max-width: 640px) {
  .gw-pager-info { width: 100%; margin-left: 0; margin-top: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §28 · HOJA «MÁS» DE LA NAVEGACIÓN MÓVIL
   ───────────────────────────────────────────────────────────────────────────
   .gw-mn-item reparte el ancho a partes iguales y no tiene desplazamiento: con
   nueve elementos cada uno bajaba a ~41 px en un teléfono de 375 px y la
   etiqueta se cortaba. La barra se queda en cinco y el resto vive aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

.gw-mas-scrim {
  position: fixed; inset: 0; z-index: 68;
  background: rgba(15, 23, 42, .45);
  opacity: 0; transition: opacity .2s var(--gw-ease, ease);
}
.gw-mas-scrim.is-open { opacity: 1; }

.gw-mas {
  position: fixed; z-index: 69;
  left: 0; right: 0; bottom: 0;
  background: var(--gw-surface);
  border-top: 1px solid var(--gw-border);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 34px rgba(15, 23, 42, .16);
  /* Va por encima de la barra (z 69 contra 40), así que no hay que dejarle
     hueco: antes reservaba 78 px vacíos al pie. Solo la barra de inicio. */
  padding: 8px 12px calc(14px + var(--gw-safe-bottom));
  max-height: min(82vh, calc(100dvh - var(--gw-safe-top) - 24px)); overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .22s var(--gw-ease, cubic-bezier(.4, 0, .2, 1));
}
.gw-mas.is-open { transform: none; }

.gw-mas-tirador {
  width: 38px; height: 4px; margin: 4px auto 12px;
  border-radius: 99px; background: var(--gw-300, #cbd5e1);
}

.gw-mas-lista { display: flex; flex-direction: column; gap: 3px; }

.gw-mas-item.gw-mas-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent; border-radius: var(--gw-r-lg);
  background: transparent; color: var(--gw-text);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.gw-mas-item.gw-mas-item:active { background: var(--gw-100); border-color: var(--gw-border); }
.gw-mas-item.is-salir { color: var(--gw-rose-ink); }

.gw-mas-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--gw-r-md);
  background: var(--gw-surface-2); border: 1px solid var(--gw-border);
  color: var(--gw-text-2);
}
.gw-mas-ico svg, .gw-mas-ico i[data-lucide] { width: 17px; height: 17px; padding: 0; margin: 0; }
.gw-mas-item.is-salir .gw-mas-ico { color: var(--gw-rose-ink); }

.gw-mas-txt { display: flex; flex-direction: column; min-width: 0; }
.gw-mas-txt strong { font-size: var(--gw-fs-md); font-weight: 650; line-height: 1.3; }
.gw-mas-txt em {
  font-style: normal; font-size: var(--gw-fs-xs); color: var(--gw-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
body.dark-mode .gw-mas { background: var(--gw-surface); border-top-color: var(--gw-border); }
body.dark-mode .gw-mas-ico { background: var(--gw-surface-2); border-color: var(--gw-border); }
body.dark-mode .gw-mas-scrim { background: rgba(2, 6, 23, .62); }

@media (prefers-reduced-motion: reduce) {
  .gw-mas, .gw-mas-scrim { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §29 · PLAN DEL DÍA
   ───────────────────────────────────────────────────────────────────────────
   La lista de hoy dejó de ser un listado para pasar a ser una recomendación:
   cada fila explica POR QUÉ ese lead está ahí. Estas clases visten ese porqué.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Banda del modo enfocado ─────────────────────────────────────────────── */
.gw-enfoque {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 14px;
  background: var(--gw-amber-bg);
  border: 1px solid var(--gw-amber-bd);
  border-radius: var(--gw-r-lg);
  color: var(--gw-amber-ink);
}
.gw-enfoque-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.gw-enfoque-ico svg, .gw-enfoque-ico i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }
.gw-enfoque-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 260px; }
.gw-enfoque-txt strong { font-size: var(--gw-fs-md); font-weight: 700; }
.gw-enfoque-txt span   { font-size: var(--gw-fs-sm); line-height: 1.45; opacity: .92; }
.gw-enfoque-acciones { display: flex; gap: 7px; flex-shrink: 0; }

/* ── Salir del plan ───────────────────────────────────────────────────────
   Ocupa la fila entera debajo del aviso, dentro del mismo recuadro ámbar: la
   salida es parte de la conversación con el modo enfocado, no otra ventana.
   El ancho completo obliga a que se vea el plan mientras se escribe por qué
   se abandona. */
.gw-enfoque-salida {
  flex: 1 1 100%;
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 4px; padding-top: 11px;
  border-top: 1px solid var(--gw-amber-bd);
}
.gw-enfoque-salida .gw-label { color: var(--gw-amber-ink); margin: 0; }
.gw-enfoque-salida .gw-hint  { color: var(--gw-amber-ink); opacity: .8; margin: 0; }

/* ── Avance del día, en la cabecera del modal ────────────────────────────── */
.gw-plan-avance { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; }
.gw-plan-avance-txt { font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text-2); font-variant-numeric: tabular-nums; }
.gw-plan-avance-sub { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .gw-plan-avance { display: none; } }

/* ── Cabecera de cada grupo de prioridad ─────────────────────────────────── */
.gw-plan-grupo { display: flex; align-items: center; gap: 8px; padding: 4px 2px 8px; flex-wrap: wrap; }
.gw-plan-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gw-plan-punto.is-p1 { background: var(--gw-rose-ink); }
.gw-plan-punto.is-p2 { background: var(--gw-amber-ink); }
.gw-plan-punto.is-p3 { background: var(--gw-text-muted); }
.gw-plan-grupo-tit { font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text); }
.gw-plan-grupo-sub { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); }

/* ── Fila de lead del plan ───────────────────────────────────────────────── */
.gw-plan-fila { align-items: flex-start; padding-top: 11px; padding-bottom: 11px; }
.gw-plan-fila.is-p1 { border-left: 3px solid var(--gw-rose-ink); }
.gw-plan-fila.is-p2 { border-left: 3px solid var(--gw-amber-ink); }
.gw-plan-fila.is-p3 { border-left: 3px solid var(--gw-border-strong); }
.gw-plan-fila.is-done   { opacity: .55; }
.gw-plan-fila.is-done .gw-plan-nombre { text-decoration: line-through; }
.gw-plan-fila.is-aplazado { opacity: .7; }

.gw-plan-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; margin: 2px 10px 0 0;
  border: 1.5px solid var(--gw-border-strong); border-radius: 50%;
  background: var(--gw-surface); color: var(--gw-text-muted);
  cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.gw-plan-check svg, .gw-plan-check i[data-lucide] { width: 12px; height: 12px; padding: 0; margin: 0; }
.gw-plan-check:hover { border-color: var(--gw-brand); }
.gw-plan-check.is-on { background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink); }

.gw-plan-nombre { text-decoration: none; color: inherit; display: block; }
.gw-plan-nombre:hover { color: var(--gw-brand-on-soft, var(--gw-text)); }

/* Los motivos: el porqué de que este lead esté hoy en la lista */
.gw-plan-motivos { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 4px; }
.gw-plan-motivo {
  font-size: var(--gw-fs-2xs); line-height: 1.5;
  padding: 2px 7px; border-radius: var(--gw-r-pill);
  background: var(--gw-surface-2); border: 1px solid var(--gw-border);
  color: var(--gw-text-3);
}

.gw-plan-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: var(--gw-fs-xs); color: var(--gw-text-muted);
}
.gw-plan-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gw-plan-meta svg, .gw-plan-meta i[data-lucide] { width: 11px; height: 11px; padding: 0; margin: 0; opacity: .8; }
.gw-plan-accion { font-weight: 650; color: var(--gw-text-2); }
.gw-plan-etapa { margin-left: auto; }

.gw-plan-aplazado {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: var(--gw-fs-xs); color: var(--gw-amber-ink);
}
.gw-plan-aplazado svg, .gw-plan-aplazado i[data-lucide] { width: 11px; height: 11px; padding: 0; margin: 0; }

/* ── Día terminado ───────────────────────────────────────────────────────── */
.gw-plan-listo {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 14px;
  background: var(--gw-green-bg); border: 1px solid var(--gw-green-bd);
  border-radius: var(--gw-r-lg); color: var(--gw-green-ink);
}
.gw-plan-listo-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%; background: rgba(255, 255, 255, .55);
}
.gw-plan-listo-ico svg, .gw-plan-listo-ico i[data-lucide] { width: 16px; height: 16px; padding: 0; margin: 0; }
.gw-plan-listo strong { display: block; font-size: var(--gw-fs-md); font-weight: 700; }
.gw-plan-listo p { font-size: var(--gw-fs-sm); line-height: 1.45; margin: 1px 0 0; opacity: .92; }

/* ── Nada se sale de su tarjeta ───────────────────────────────────────────
   `.gw-row-main` alinea a la izquierda (flex-start), y en una columna flex eso
   le da a cada hijo el ancho de su propio contenido: una línea con
   white-space:nowrap medía lo que midiera su texto y atravesaba la tarjeta
   («Aceptada hace 7 días · falta crear el proyecto y…» seguía de largo en el
   móvil), y una palabra sin cortes —una URL en un motivo— ensanchaba la
   fila entera y con ella todos los motivos. El tope va en la fila genérica:
   ningún hijo de una fila puede ser más ancho que la fila. */
.gw-row-main > * { max-width: 100%; }
.gw-truncate { max-width: 100%; }

/* En el plan el texto importa más que la línea recta: hasta dos líneas, y
   solo entonces puntos suspensivos. */
.gw-plan-fila .gw-row-title,
.gw-plan-fila .gw-row-sub {
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.gw-plan-motivos, .gw-plan-meta { min-width: 0; }
.gw-plan-motivo,
.gw-plan-meta span,
.gw-plan-aplazado { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* La acción de un pendiente del negocio: nunca más ancha que un tercio largo
   de la fila, y si no cabe parte en dos líneas en vez de cortarse en seco. */
.gw-plan-fila-accion.gw-plan-fila-accion {
  flex-shrink: 0; max-width: 38%;
  white-space: normal; text-align: center; line-height: 1.35; border-radius: 11px;
}
@media (max-width: 560px) {
  /* En el teléfono el texto se queda con todo el ancho junto al icono y la
     acción baja a su propia línea, alineada con el texto. */
  .gw-plan-fila > .gw-row-main { flex: 1 1 calc(100% - 46px); }
  .gw-plan-fila-accion.gw-plan-fila-accion { max-width: calc(100% - 46px); margin-left: 46px; text-align: left; }
  /* «Gestionar» se estira; el botón de aplazar se queda en su icono. */
  .gw-plan-fila .gw-row-actions > .gw-btn-ghost { flex: 0 0 auto; }
}

/* Sin leads pero con pendientes del negocio: una línea, no un estado vacío. */
.gw-plan-nota {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 16px;
  font-size: var(--gw-fs-sm); line-height: 1.45; color: var(--gw-text-3);
}
.gw-plan-nota.gw-plan-nota svg,
.gw-plan-nota.gw-plan-nota i[data-lucide] { width: 15px; height: 15px; flex-shrink: 0; padding: 0; margin: 0; color: var(--gw-green-ink); }

/* La barra de consumo se reutiliza aquí con otro significado: avance del día */
.gw-barra-relleno.is-sano { background: var(--gw-green-ink); }

/* ── Modo oscuro ─────────────────────────────────────────────────────────
   Valores literales, no var() heredado: un alias declarado en :root conserva
   el valor claro aunque el token al que apunta cambie en oscuro. */
body.dark-mode .gw-enfoque-ico     { background: rgba(0, 0, 0, .22); }
body.dark-mode .gw-plan-listo-ico  { background: rgba(0, 0, 0, .22); }
body.dark-mode .gw-plan-motivo     { background: var(--gw-surface-2); border-color: var(--gw-border); }
body.dark-mode .gw-plan-check      { background: var(--gw-surface); border-color: var(--gw-border-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
   §30 · VARIANTES PEQUEÑAS QUE FALTABAN
   ───────────────────────────────────────────────────────────────────────────
   Se usaban en varias pantallas y no estaban definidas, así que esos elementos
   salían sin estilo: un botón de icono con el ancho de un botón normal, un
   campo de tabla igual de alto que uno de formulario. No se ve como un error,
   se ve como un descuido, que es peor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botón cuadrado, solo icono, dentro de la familia .gw-btn */
.gw-btn.gw-btn-icon {
  width: 34px; padding: 0; flex: 0 0 34px;
  justify-content: center;
}
.gw-btn.gw-btn-icon.gw-btn-sm { width: 30px; flex-basis: 30px; }
.gw-btn.gw-btn-icon.gw-btn-xs { width: 26px; flex-basis: 26px; }
.gw-btn.gw-btn-icon svg,
.gw-btn.gw-btn-icon i[data-lucide] { margin: 0; }

/* Distintivo aún más pequeño, para meterlo dentro de una tarjeta ya densa */
.gw-chip.gw-chip-xs {
  padding: 1px 6px;
  font-size: 9.5px;
  gap: 3px;
  line-height: 1.5;
}
.gw-chip.gw-chip-xs svg,
.gw-chip.gw-chip-xs i[data-lucide] { width: 10px; height: 10px; }

/* Campo compacto, para las rejillas de líneas de una cotización */
.gw-input.gw-input-sm,
.gw-select.gw-input-sm {
  height: 32px;
  padding-top: 4px; padding-bottom: 4px;
  font-size: var(--gw-fs-sm);
}

/* Rótulo diminuto sobre un campo compacto */
.gw-label.gw-label-xs {
  font-size: var(--gw-fs-2xs);
  margin-bottom: 2px;
}
.gw-label-opt { font-weight: 400; color: var(--gw-text-muted); }

/* Casilla con su texto en la misma línea */
.gw-check-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--gw-fs-sm); color: var(--gw-text-2);
  cursor: pointer; user-select: none; white-space: normal; line-height: 1.4;
}
/* VARIAS CASILLAS SEGUIDAS (2026-10-11). Eran inline-flex sueltas dentro de un
   bloque y Vue borra el espacio entre etiquetas: «✓ Es el contacto principal☐
   Puede acceder al portal» salía pegado en un solo renglón. En un diálogo o
   una tarjeta, cada casilla va en su línea y con aire entre ellas; y el grupo
   explícito (.gw-check-grupo) para cuando no son hijas directas. Clase doblada
   porque el CDN de Tailwind se carga después de esta hoja. */
.gw-modal-body > .gw-check-inline.gw-check-inline,
.gw-card-body > .gw-check-inline.gw-check-inline,
.gw-check-grupo > .gw-check-inline.gw-check-inline { display: flex; width: fit-content; max-width: 100%; }
.gw-modal-body > .gw-check-inline + .gw-check-inline,
.gw-card-body > .gw-check-inline + .gw-check-inline { margin-top: 12px; }
.gw-check-grupo.gw-check-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Chips que vienen detrás de un texto o de otro chip dentro de un título o un
   subtítulo de fila: sin esto se tocaban («Activo[término]», «hace 2 h[sin
   responder]»). Los títulos que ya son flex con gap no se tocan. */
.gw-row-title:not(.flex) > * + .gw-chip,
.gw-row-sub:not(.flex) > * + .gw-chip,
.gw-topbar-sub > .gw-chip + * { margin-left: 6px; }
.gw-check-inline input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--gw-brand);
}

/* Vacío reducido, para dentro de una tarjeta */
.gw-empty.gw-empty-sm { padding: 18px 12px; gap: 6px; }
.gw-empty.gw-empty-sm p { font-size: var(--gw-fs-sm); color: var(--gw-text-muted); margin: 0; }

/* Total de una línea de cotización */
.gw-linea-total { font-size: var(--gw-fs-md); font-weight: 700; color: var(--gw-text); font-variant-numeric: tabular-nums; }
.gw-linea-total.is-opcional { color: var(--gw-text-muted); font-style: italic; }

body.dark-mode .gw-input.gw-input-sm,
body.dark-mode .gw-select.gw-input-sm { background: var(--gw-surface); border-color: var(--gw-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   §31 · ENLACE DENTRO DE UN TEXTO
   Para cuando una frase corriente —el texto de un aviso, una ayuda— tiene
   que llevar a otra página. Doble clase porque Tailwind entra por CDN
   después de esta hoja y su reset se lleva por delante el subrayado.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-link.gw-link {
  color: var(--gw-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--gw-brand) 45%, transparent);
  border-radius: 3px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.gw-link.gw-link:hover { text-decoration-color: var(--gw-brand); }
.gw-link.gw-link:focus-visible {
  outline: none; box-shadow: var(--gw-ring);
  text-decoration-color: var(--gw-brand);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §32 · FIRMAR
   El cuadro donde se firma, compartido por el portal y por el panel. Estaba
   escrito dentro de portal/contrato.php, así que el trabajador no lo tenía y
   solo podía firmar sin trazo.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-firma-caja {
  position: relative;
  display: block;
  border: 1px dashed var(--gw-border-strong);
  border-radius: var(--gw-r-md);
  background: var(--gw-surface);
  min-height: 150px;
  overflow: hidden;
}
.gw-firma-lienzo {
  display: block; width: 100%; height: 150px;
  touch-action: none;          /* sin esto, arrastrar el dedo desplaza la página */
  cursor: crosshair;
}
.gw-firma-pista {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--gw-fs-sm); color: var(--gw-text-muted);
}
/* La vista previa de una firma subida o guardada se centra en la caja. */
.gw-firma-caja img { display: block; margin: 0 auto; max-height: 140px; max-width: 92%; padding: 5px; }

/* `hidden` tiene que ganar: la caja es display:block y la pista display:flex,
   y cualquiera de las dos pisaba el atributo y enseñaba lo que no tocaba. */
.gw-fm-panel[hidden], .gw-firma-caja[hidden], .gw-firma-pista[hidden] { display: none !important; }

/* Las pestañas de «cómo firmar»: ocupan todo el ancho, cada una con su icono.
   En el teléfono el icono sobra y el texto puede partirse en dos líneas en
   vez de salirse de la caja. */
.gw-fm-tabs.gw-fm-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  width: 100%; margin-bottom: 12px;
}
.gw-fm-tabs.gw-fm-tabs > button {
  justify-content: center; gap: 7px;
  height: auto; min-height: 34px; padding: 6px 10px;
  white-space: normal; line-height: 1.2; text-align: center;
}
.gw-fm-tabs.gw-fm-tabs .gw-fm-ico { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 640px) {
  .gw-fm-tabs.gw-fm-tabs .gw-fm-ico { display: none; }
  .gw-fm-tabs.gw-fm-tabs > button { padding: 7px 6px; min-height: 38px; }
  /* Con la firma guardada son cuatro: dos filas de dos, que caben siempre. */
  .gw-fm-tabs.gw-fm-tabs-4 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}

/* La firma se dibuja en negro sobre blanco porque así se imprime en el PDF.
   Sobre el fondo oscuro del modo noche no se vería, así que la caja mantiene
   su fondo claro también de noche: es una hoja de papel, no una pantalla. */
body.dark-mode .gw-firma-caja { background: #ffffff; border-color: #cbd5e1; }
body.dark-mode .gw-firma-pista { color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════════════
   §33 · LA VISTA PREVIA DEL LOGO
   El logo se imprime sobre el papel blanco del PDF, así que aquí se enseña
   sobre blanco aunque el portal esté en modo noche: enseñarlo sobre el gris
   oscuro escondería justo el problema que hay que ver, un logo con el fondo
   sin recortar.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-logo-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 14px;
    background: #ffffff;
    border: 1px dashed var(--gw-border-strong);
    border-radius: var(--gw-r-md);
}
.gw-logo-caja img { max-height: 60px; max-width: 100%; object-fit: contain; }

body.dark-mode .gw-logo-caja { background: #ffffff; border-color: #cbd5e1; }
body.dark-mode .gw-logo-caja .gw-hint { color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════════════
   §34 · EL CHAT DEL EQUIPO
   Dos columnas que ocupan lo que queda de alto bajo la cabecera. En móvil se
   turnan: primero la lista, y al entrar en una conversación la lista se aparta.

   Rehecho el 2026-10-09 con la vara de Microsoft Teams: listas de filas con la
   cara y el estado, mensajes en burbujas (los de los demás a la izquierda en
   gris, los míos a la derecha en lima), cabecera con llamar y un «⋯», y una
   caja de escribir con un solo anillo de foco. Lo de base vive aquí, en la
   hoja que carga siempre; gestwork-chat.css añade lo propio de chat.php
   (notas de voz, llamadas, hojas del teléfono, visor).

   Los tonos del chat son tokens propios con su versión oscura (Regla del
   Alias Redeclarado): --gw-chat-*.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-chat {
  --gw-chat-lado:        var(--gw-surface-2);          /* la columna de la lista */
  --gw-chat-fondo:       var(--gw-surface);            /* detrás de los mensajes */
  --gw-chat-burbuja:     var(--gw-surface-3);          /* los mensajes de los demás */
  --gw-chat-mia:         rgb(var(--gw-brand-rgb) / .16); /* los míos: lima suave */
  --gw-chat-cita:        rgba(15, 23, 42, .045);       /* el bloque citado dentro de la burbuja */
  --gw-chat-enlace:      var(--gw-lime-ink);           /* AA sobre gris y sobre lima */
  --gw-chat-av:          #dbe2ec;                      /* cara sin color elegido (con tinta oscura) */
  --gw-chat-r:           14px;
  --gw-chat-r-esq:       4px;                          /* la esquina junto a la cara */

  display: flex;
  height: calc(100vh - var(--gw-topbar-h, 56px));
  min-height: 420px;
  background: var(--gw-surface);
  overflow: hidden;
}
body.dark-mode .gw-chat {
  --gw-chat-lado:        var(--gw-surface-2);
  --gw-chat-fondo:       var(--gw-bg);
  --gw-chat-burbuja:     var(--gw-surface-2);          /* #182234 sobre el fondo #0f172a */
  --gw-chat-mia:         rgb(var(--gw-brand-rgb) / .17); /* un verde lima oscuro */
  --gw-chat-cita:        rgba(255, 255, 255, .06);
  --gw-chat-enlace:      var(--gw-lime-ink);
  --gw-chat-av:          #cbd5e1;
}
.gw-chat [v-cloak] { display: none; }
/* Las caras de las personas llevan las iniciales en tinta oscura sobre su
   color, en los dos temas (DESIGN.md · Avatares de persona). */
.gw-chat .gw-avatar { color: var(--gw-900); font-weight: 650; }

/* ── La columna de la izquierda ─────────────────────────────────────────── */
.gw-chat-lado {
  width: 340px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--gw-border);
  background: var(--gw-chat-lado);
  min-height: 0;
}
.gw-chat-lado-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-shrink: 0; height: 60px; padding: 0 12px 0 20px;
}
.gw-chat-titulo { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.016em; color: var(--gw-text); }
.gw-chat .gw-chat-lado-btn.gw-icon-btn { width: 36px; height: 36px; border-radius: var(--gw-r-md); color: var(--gw-text-2); }
.gw-chat .gw-chat-lado-btn.gw-icon-btn svg { width: 18px; height: 18px; }

/* El buscador: un campo compuesto. El marco enseña el foco; el campo de
   dentro va desnudo (ver §6, «Campo compuesto»). */
.gw-chat-buscar { flex-shrink: 0; padding: 0 16px 10px; }
.gw-chat-busca {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 8px 0 12px;
  border: 1px solid transparent; border-radius: var(--gw-r-md);
  background: var(--gw-surface-3);
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease), background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-busca:hover { border-color: var(--gw-border); }
.gw-chat-busca:focus-within { background: var(--gw-surface); border-color: var(--gw-brand); box-shadow: var(--gw-ring); }
.gw-chat-busca-ico { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; color: var(--gw-text-muted); }
.gw-chat-busca-ico svg { width: 16px; height: 16px; }
.gw-chat-busca-campo {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; outline: 0; background: transparent; box-shadow: none;
  font-family: var(--gw-font); font-size: var(--gw-fs-md); font-weight: 500; color: var(--gw-text);
}
.gw-chat-kbd {
  flex-shrink: 0; padding: 0 6px; height: 20px; line-height: 18px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-xs);
  background: var(--gw-surface); color: var(--gw-text-3);
  font-family: var(--gw-font); font-size: var(--gw-fs-xs); pointer-events: none;
}
.gw-chat-limpiar {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: var(--gw-r-sm);
  background: transparent; color: var(--gw-text-3); cursor: pointer;
}
.gw-chat-limpiar:hover { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-chat-limpiar svg, .gw-chat-limpiar [data-lucide] { width: 14px; height: 14px; }

.gw-chat-lista { flex: 1; overflow-y: auto; min-height: 0; padding: 0 8px 16px; }
.gw-chat-grupo {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 12px 4px;
  font-size: var(--gw-fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--gw-text-3);
}
.gw-chat-grupo-n { font-weight: 500; color: var(--gw-text-muted); font-variant-numeric: tabular-nums; }

/* ── Una fila de la lista (persona, canal, resultado) ───────────────────── */
.gw-chat-fila {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 10px 12px;
  border: 0; border-radius: var(--gw-r-md);
  background: transparent; color: var(--gw-text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-fila:hover { background: var(--gw-surface-3); }
/* La abierta, como en Teams: una tarjeta blanca sobre la lista gris, con la
   barra lima del elemento activo del menú. */
.gw-chat-fila.is-active { background: var(--gw-surface); box-shadow: var(--gw-sh-sm), inset 3px 0 0 var(--gw-brand); }
/* La fila que señalan las flechas del teclado en el buscador. */
.gw-chat-fila.is-marcada { box-shadow: var(--gw-ring); }
.gw-ui .gw-chat-fila:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: -2px; border-radius: var(--gw-r-md); }

.gw-chat-fila-av { position: relative; flex-shrink: 0; display: inline-flex; }
.gw-chat-fila-av .gw-avatar { width: 40px; height: 40px; font-size: 14px; }
.gw-chat-canal-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--gw-slate-bg); color: var(--gw-slate-ink);
}
.gw-chat-canal-av svg, .gw-chat-canal-av [data-lucide] { width: 18px; height: 18px; }
.gw-chat-canal-av.is-publico  { background: var(--gw-sky-bg);    color: var(--gw-sky-ink); }
.gw-chat-canal-av.is-privado  { background: var(--gw-amber-bg);  color: var(--gw-amber-ink); }
.gw-chat-canal-av.is-proyecto { background: var(--gw-violet-bg); color: var(--gw-violet-ink); }

.gw-chat-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gw-chat-fila-l1, .gw-chat-fila-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gw-chat-fila-nom {
  flex: 1; min-width: 0;
  font-size: var(--gw-fs-lg); font-weight: 600; letter-spacing: -.005em; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-chat-fila-hora { flex-shrink: 0; font-size: var(--gw-fs-xs); color: var(--gw-text-3); font-variant-numeric: tabular-nums; }
.gw-chat-fila-prev {
  flex: 1; min-width: 0;
  font-size: 12.5px; line-height: 1.4; color: var(--gw-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-chat-fila.is-sin-leer .gw-chat-fila-nom { font-weight: 750; }
.gw-chat-fila.is-sin-leer .gw-chat-fila-prev { color: var(--gw-text); font-weight: 550; }
.gw-chat-fila.is-sin-leer .gw-chat-fila-hora { color: var(--gw-brand-on-soft); font-weight: 650; }
.gw-chat-fila-n {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill);
  background: var(--gw-brand); color: var(--gw-brand-ink);
  font-size: var(--gw-fs-xs); font-weight: 750; font-variant-numeric: tabular-nums;
}
.gw-chat-fila-n.is-apagado { background: var(--gw-surface-3); color: var(--gw-text-3); }
.gw-chat-fila-mute { display: inline-flex; flex-shrink: 0; width: 14px; height: 14px; color: var(--gw-text-muted); }
.gw-chat-fila-mute svg { width: 14px; height: 14px; }
.gw-chat-fila.is-silenciado .gw-chat-fila-nom { color: var(--gw-text-2); }
.gw-chat-fila.is-abierto .gw-chat-fila-nom { color: var(--gw-text-2); }
.gw-chat-fila-entrar { flex-shrink: 0; font-size: var(--gw-fs-sm); font-weight: 650; color: var(--gw-brand-on-soft); }

/* El «⋯» de un canal: aparece al pasar el ratón o al llegar con el teclado,
   encima de la hora. Con opacidad y no con display, para que el tabulador lo
   alcance. En pantallas táctiles no está: allí se mantiene pulsada la fila. */
.gw-chat-fila-env { position: relative; }
.gw-chat-fila-mas {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-sm);
  background: var(--gw-surface); color: var(--gw-text-2); box-shadow: var(--gw-sh-xs);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-fila-mas svg, .gw-chat-fila-mas [data-lucide] { width: 16px; height: 16px; }
.gw-chat-fila-mas:hover { color: var(--gw-text); border-color: var(--gw-border-strong); }
.gw-chat-fila-env:hover .gw-chat-fila-mas,
.gw-chat-fila-env:focus-within .gw-chat-fila-mas,
.gw-chat-fila-env.is-menu .gw-chat-fila-mas { opacity: 1; pointer-events: auto; }
.gw-chat-fila-env:hover .gw-chat-fila-hora,
.gw-chat-fila-env:focus-within .gw-chat-fila-hora,
.gw-chat-fila-env.is-menu .gw-chat-fila-hora { visibility: hidden; }
.gw-chat.is-tactil .gw-chat-fila-mas { display: none; }
.gw-chat.is-tactil .gw-chat-fila-env .gw-chat-fila-hora { visibility: visible; }

/* ── La conversación ────────────────────────────────────────────────────── */
.gw-chat-conv { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gw-chat-fondo); }

.gw-chat-vacio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 32px; text-align: center; color: var(--gw-text-2);
}
.gw-chat-vacio-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: 8px; border-radius: 20px;
  background: var(--gw-brand-12); color: var(--gw-brand-on-soft);
}
.gw-chat-vacio-ico svg, .gw-chat-vacio-ico [data-lucide] { width: 28px; height: 28px; }

/* ── La cabecera de la conversación ─────────────────────────────────────── */
.gw-chat-cab {
  position: relative; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; height: 60px; padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-surface);
}
.gw-chat-cab-quien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.gw-chat-cab-av { position: relative; flex-shrink: 0; display: inline-flex; }
.gw-chat-cab-av .gw-avatar { width: 36px; height: 36px; font-size: 13px; }
.gw-chat-cab-av .gw-chat-canal-av { width: 36px; height: 36px; border-radius: var(--gw-r-md); }
.gw-chat-cab-av .gw-chat-canal-av svg { width: 17px; height: 17px; }
.gw-chat-cab-txt { min-width: 0; display: flex; flex-direction: column; }
.gw-chat-cab-nombre {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-chat-cab-sub {
  font-size: var(--gw-fs-sm); line-height: 1.35; color: var(--gw-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-chat-cab-sub:empty { display: none; }
.gw-chat-cab-sub.is-escribiendo { color: var(--gw-brand-on-soft); font-weight: 550; }

.gw-chat-cab-acc { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gw-chat .gw-chat-cab-btn.gw-icon-btn { width: 36px; height: 36px; border-radius: var(--gw-r-md); color: var(--gw-text-2); }
.gw-chat .gw-chat-cab-btn.gw-icon-btn svg { width: 18px; height: 18px; }
.gw-chat .gw-chat-cab-btn.gw-icon-btn.is-on { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-chat-cab-gente {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; margin-right: 4px; padding: 0 10px 0 5px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-pill);
  background: var(--gw-surface); cursor: pointer;
  transition: border-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-cab-gente:hover { border-color: var(--gw-border-strong); }
.gw-chat-cab-gente .gw-avatar { width: 24px; height: 24px; font-size: 9px; }
.gw-chat-cab-gente-n { font-size: var(--gw-fs-sm); font-weight: 650; color: var(--gw-text-2); font-variant-numeric: tabular-nums; }
.gw-chat .gw-chat-volver.gw-icon-btn { display: none; width: 40px; height: 40px; border-radius: 50%; }
.gw-chat .gw-chat-volver.gw-icon-btn svg { width: 20px; height: 20px; }

/* ── Los menús «⋯» (cabecera y filas de canal) ────────────────────────────
   Un desplegable de verdad: sus etiquetas solo existen mientras está
   abierto. En el teléfono, el de la cabecera sube como hoja desde abajo. */
.gw-chat-menu-ancla { position: relative; display: inline-flex; }
.gw-chat-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 232px; max-width: min(300px, calc(100vw - 24px));
  padding: 6px;
  background: var(--gw-surface); color: var(--gw-text);
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-lg);
  box-shadow: var(--gw-sh-pop);
  animation: gw-menu-in var(--gw-dur-2, .16s) var(--gw-ease, ease) both;
}
.gw-chat-menu.is-flotante { position: fixed; right: auto; z-index: 80; }
.gw-chat-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 36px; padding: 7px 10px;
  border: 0; border-radius: var(--gw-r-sm);
  background: transparent; color: var(--gw-text);
  font: inherit; font-size: var(--gw-fs-md); font-weight: 500; text-align: left; cursor: pointer;
}
.gw-chat-menu-item:hover { background: var(--gw-surface-3); }
.gw-ui .gw-chat-menu-item:focus-visible { outline: none; background: var(--gw-surface-3); box-shadow: inset 0 0 0 2px var(--gw-brand); }
.gw-chat-menu-item > i { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; color: var(--gw-text-3); }
.gw-chat-menu-item > i svg { width: 16px; height: 16px; }
.gw-chat-menu-item > span { flex: 1; min-width: 0; }
.gw-chat-menu-item > .gw-chat-menu-n {
  flex: 0 0 auto; min-width: 20px; padding: 0 6px; border-radius: var(--gw-r-pill);
  background: var(--gw-surface-3); color: var(--gw-text-3);
  font-size: var(--gw-fs-xs); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums;
}
.gw-chat-menu-item.is-peligro, .gw-chat-menu-item.is-peligro > i { color: var(--gw-danger-ink); }
.gw-chat-menu-item.is-peligro:hover { background: var(--gw-danger-bg); }
.gw-chat-menu-sep { height: 1px; margin: 5px 4px; background: var(--gw-border-soft); }
.gw-chat-menu-tit, .gw-chat-menu-cerrar, .gw-chat-menu-fondo { display: none; }

/* ── Los mensajes ───────────────────────────────────────────────────────── */
/* Los mensajes se apoyan ABAJO, como en WhatsApp, Slack o Teams: con pocos
   mensajes el hueco queda arriba. Se hace con `margin-top:auto` en el primer
   hijo y NO con `justify-content:flex-end`, que en un contenedor que se
   desplaza deja el principio de la lista fuera de alcance. */
.gw-chat-mensajes {
  flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;
  display: flex; flex-direction: column;
  padding: 16px 20px 8px;
  background: var(--gw-chat-fondo);
}
.gw-chat-mensajes > :first-child { margin-top: auto; }
.gw-chat-mas { text-align: center; padding: 4px 0 10px; }

.gw-chat-fecha, .gw-chat-nuevos {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 6px; font-size: var(--gw-fs-xs); font-weight: 600; color: var(--gw-text-3);
}
.gw-chat-fecha::before, .gw-chat-fecha::after,
.gw-chat-nuevos::before, .gw-chat-nuevos::after {
  content: ''; flex: 1; height: 1px; background: var(--gw-border);
}
.gw-chat-fecha > span {
  padding: 2px 10px; border: 1px solid var(--gw-border); border-radius: var(--gw-r-pill);
  background: var(--gw-surface);
}
.gw-chat-nuevos { color: var(--gw-danger-ink); font-weight: 700; }
.gw-chat-nuevos::before, .gw-chat-nuevos::after { background: var(--gw-danger-bd); }

/* Una fila por mensaje: 12 px entre tandas, 2 px dentro de una tanda. */
.gw-chat-msg { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.gw-chat-msg.is-seguido { margin-top: 2px; }
.gw-chat-msg.is-mio { justify-content: flex-end; }

/* La columna de la cara (solo en los de los demás). La cara cae a la altura
   de la burbuja, no del nombre: ahí está la esquina afinada. */
.gw-chat-msg-lado { flex: 0 0 32px; width: 32px; display: flex; justify-content: center; }
.gw-chat-msg-av { width: 32px; height: 32px; margin-top: 20px; font-size: 12px; }

/* La hora de los mensajes seguidos, al pasar el ratón: así se sabe cuándo se
   dijo cada línea sin repetir la cabecera en todas. */
.gw-chat-msg-hueco {
  align-self: center; white-space: nowrap;
  font-size: var(--gw-fs-2xs); line-height: 1; color: var(--gw-text-3); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity var(--gw-dur-1) var(--gw-ease);
}
.gw-chat-msg:hover .gw-chat-msg-hueco { opacity: 1; }

.gw-chat-msg-col {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; max-width: min(640px, 78%);
}
.gw-chat-msg.is-mio .gw-chat-msg-col { align-items: flex-end; }
.gw-chat-msg-cab {
  display: flex; align-items: baseline; gap: 8px; max-width: 100%;
  height: 18px; margin: 0 0 2px; padding: 0 4px;
  font-size: var(--gw-fs-sm); line-height: 18px; white-space: nowrap;
}
.gw-chat-msg-autor { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 650; color: var(--gw-text-2); }
.gw-chat-msg-hora { flex-shrink: 0; font-size: var(--gw-fs-xs); color: var(--gw-text-3); font-variant-numeric: tabular-nums; }

/* La burbuja: 14 px de radio con la esquina afinada junto a la cara (arriba
   a la izquierda en los de los demás, arriba a la derecha en los míos). En
   una tanda, la esquina de abajo también se afina mientras siga otro. */
.gw-chat-burbuja {
  position: relative; max-width: 100%; min-width: 0;
  padding: 8px 12px;
  border-radius: var(--gw-chat-r);
  border-top-left-radius: var(--gw-chat-r-esq);
  background: var(--gw-chat-burbuja); color: var(--gw-text);
  overflow-wrap: anywhere;
}
.gw-chat-msg.is-sigue .gw-chat-burbuja { border-bottom-left-radius: var(--gw-chat-r-esq); }
.gw-chat-msg.is-mio .gw-chat-burbuja {
  background: var(--gw-chat-mia);
  border-top-left-radius: var(--gw-chat-r);
  border-top-right-radius: var(--gw-chat-r-esq);
}
.gw-chat-msg.is-mio.is-sigue .gw-chat-burbuja { border-bottom-left-radius: var(--gw-chat-r); border-bottom-right-radius: var(--gw-chat-r-esq); }
/* Solo una foto o un vídeo: la burbuja se ciñe a la imagen. */
.gw-chat-burbuja.is-media { padding: 3px; }
.gw-chat-burbuja.is-media .gw-chat-adj { margin-top: 0; }
.gw-chat-burbuja.is-media .gw-chat-adj-img,
.gw-chat-burbuja.is-media .gw-chat-adj-video { border-radius: 11px; }

.gw-chat-texto {
  margin: 0; font-size: var(--gw-fs-lg); line-height: 1.45; color: inherit;
  overflow-wrap: anywhere;
}
.gw-chat-texto a { color: var(--gw-chat-enlace, var(--gw-brand-on-soft)); text-decoration: underline; text-underline-offset: 2px; font-weight: 550; }
.gw-chat-mencion {
  color: var(--gw-chat-enlace, var(--gw-brand-on-soft)); font-weight: 650;
  padding: 0 2px; border-radius: var(--gw-r-xs); background: var(--gw-brand-12);
}
.gw-chat-msg.is-mio .gw-chat-mencion { background: transparent; }
.gw-chat-editado { display: block; margin-top: 2px; text-align: right; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-chat-fijado {
  display: flex; align-items: center; gap: 4px; margin: 0 0 4px;
  font-size: var(--gw-fs-xs); font-weight: 650; color: var(--gw-amber-ink);
}
.gw-chat-fijado svg, .gw-chat-fijado [data-lucide] { width: 12px; height: 12px; }
.gw-chat-borrado {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--gw-fs-md); color: var(--gw-text-3); font-style: italic;
}
.gw-chat-borrado [data-lucide], .gw-chat-borrado svg { width: 13px; height: 13px; }

/* La cita va dentro de la burbuja, como un bloque hundido de una o dos líneas:
   citar un mensaje largo llenaba media pantalla con algo que ya está arriba.
   Desde el 2026-10-11 es un botón (lleva al original) y su color dice de quién
   es lo citado, como en WhatsApp: celeste si es de otro, lima si es tuyo. */
.gw-chat-cita {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; min-width: min(200px, 100%); margin: 2px 0 6px; padding: 5px 10px 6px;
  border: 0; border-left: 3px solid var(--gw-sky-ink); border-radius: 8px;
  background: var(--gw-chat-cita); color: var(--gw-text-2);
  font: inherit; font-size: var(--gw-fs-sm); line-height: 1.35; text-align: left; cursor: pointer;
  transition: filter var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-cita:hover { filter: brightness(.97); }
body.dark-mode .gw-chat-cita:hover { filter: brightness(1.15); }
.gw-chat-cita-autor { font-weight: 700; font-size: 12.5px; color: var(--gw-sky-ink); }
.gw-chat-cita-txt {
  max-width: 100%; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gw-chat-cita.is-mia { border-left-color: var(--gw-lime-ink); }
.gw-chat-cita.is-mia .gw-chat-cita-autor { color: var(--gw-lime-ink); }
.gw-chat-cita.is-borrado { cursor: default; border-left-color: var(--gw-border-strong); }
.gw-chat-cita.is-borrado:hover { filter: none; }
.gw-chat-cita.is-borrado .gw-chat-cita-autor { color: var(--gw-text-3); }
.gw-chat-cita.is-borrado .gw-chat-cita-txt { font-style: italic; color: var(--gw-text-3); }
.gw-ui .gw-chat-cita:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: 1px; }

/* ── Adjuntos ───────────────────────────────────────────────────────────── */
.gw-chat-adj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gw-chat-burbuja > .gw-chat-adj:first-child { margin-top: 0; }
.gw-chat-adj-img {
  display: block; padding: 0; border: 0; border-radius: var(--gw-r-md); overflow: hidden;
  max-width: min(300px, 100%); background: transparent; cursor: zoom-in;
}
/* La caja de la foto la mide chat.php (estiloImagen: ancho y proporción del
   servidor), así que no salta al cargar; la imagen la llena. */
.gw-chat-adj-img img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 320px; object-fit: cover; }
.gw-chat-adj-doc {
  display: flex; align-items: center; gap: 10px;
  min-width: min(220px, 100%); max-width: 300px; padding: 8px 10px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-md);
  background: var(--gw-surface); color: var(--gw-text); text-decoration: none;
  transition: border-color var(--gw-dur-1) var(--gw-ease);
}
.gw-chat-adj-doc:hover { border-color: var(--gw-border-strong); }
.gw-chat-adj-doc-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--gw-r-sm);
  background: var(--gw-blue-bg); color: var(--gw-blue-ink);
}
.gw-chat-adj-doc-ico svg, .gw-chat-adj-doc-ico [data-lucide] { width: 17px; height: 17px; }
.gw-chat-adj-nombre {
  display: block; font-size: var(--gw-fs-md); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-chat-adj-peso { display: block; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-chat-adj-baja { width: 15px; height: 15px; margin-left: auto; color: var(--gw-text-3); flex-shrink: 0; }

/* ── Reacciones: una pastilla pegada al borde de abajo de la burbuja ──────
   Como en WhatsApp (2026-10-11): una sola, con hasta tres emojis distintos y
   el total. Tocarla abre quién puso cada uno. Mide 26 px, pero su zona de
   toque (::after) llega a los 42. */
.gw-chat-reacs {
  position: relative; z-index: 2; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 1px;
  height: 26px; margin: -9px 0 0 10px; padding: 0 8px 0 6px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-pill);
  background: var(--gw-surface); color: var(--gw-text); box-shadow: var(--gw-sh-xs);
  font: inherit; line-height: 1; cursor: pointer;
  animation: gw-chat-asoma .16s var(--gw-ease, ease) both;
}
.gw-chat-reacs::after { content: ''; position: absolute; inset: -8px -4px; }
.gw-chat-msg.is-mio .gw-chat-reacs { align-self: flex-end; margin: -9px 10px 0 0; }
.gw-chat-reacs-e { font-size: 15px; line-height: 1; }
.gw-chat-reacs-n { margin-left: 4px; font-size: var(--gw-fs-xs); font-weight: 650; color: var(--gw-text-2); font-variant-numeric: tabular-nums; }
.gw-chat-reacs:hover { border-color: var(--gw-border-strong); }
.gw-chat-reacs.is-mia { border-color: var(--gw-lime-bd); background: var(--gw-lime-bg); }
.gw-chat-reacs.is-mia .gw-chat-reacs-n { color: var(--gw-lime-ink); }
.gw-ui .gw-chat-reacs:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: 2px; }
/* En el hilo no hay burbuja de la que colgar: va debajo del texto. */
.gw-chat-reacs.is-hilo { margin: 6px 0 0; }
.gw-chat-msg.con-reacs { margin-bottom: 4px; }
.gw-chat-msg-col > .gw-chat-hilo-abrir { margin-top: 6px; }

/* ── Las acciones que salen al pasar el ratón ───────────────────────────────
   Una barra corta, como en Teams (2026-10-11): reaccionar, responder y «más».
   Va FUERA de la burbuja, a su lado y hacia el centro de la conversación (a
   la derecha en los de los demás, a la izquierda en los míos): no tapa el
   texto ni el nombre, y el ratón llega a ella sin salir de la fila. Se
   enseña con :hover o con el foco del teclado (:focus-visible, no
   :focus-within: tras un clic no se queda colgada), y mientras su
   desplegable está abierto. */
.gw-chat-msg-acc {
  position: absolute; top: 50%; right: 0; z-index: 5;
  transform: translate(calc(100% + 6px), -50%);
  display: none; align-items: center; gap: 1px;
  padding: 2px; white-space: nowrap;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-pill);
  background: var(--gw-surface); box-shadow: var(--gw-sh-md);
}
.gw-chat-msg.is-mio .gw-chat-msg-acc { right: auto; left: 0; transform: translate(calc(-100% - 6px), -50%); }
.gw-chat-msg:hover .gw-chat-msg-acc,
.gw-chat-msg:has(:focus-visible) .gw-chat-msg-acc,
.gw-chat-msg.is-pop .gw-chat-msg-acc { display: flex; }
.gw-chat-acc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--gw-text-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.gw-chat-acc-btn:hover { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-chat-acc-btn.is-emoji:hover { transform: scale(1.12); }
.gw-chat-acc-btn.is-danger:hover { background: var(--gw-danger-bg); color: var(--gw-danger-ink); }
.gw-chat-acc-btn [data-lucide], .gw-chat-acc-btn svg { width: 17px; height: 17px; }
.gw-chat-acc-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--gw-border); }

/* ── El botón de bajar ──────────────────────────────────────────────────── */
.gw-chat-bajar { position: relative; height: 0; text-align: center; z-index: 7; }
/* Redondo y abajo a la derecha, como en WhatsApp (2026-10-11), con el número
   de mensajes que han llegado mientras se leía más arriba. */
.gw-chat-bajar > .gw-chat-bajar-btn {
  position: absolute; left: auto; right: 16px; bottom: 12px; transform: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--gw-border); background: var(--gw-surface); color: var(--gw-text-2);
  box-shadow: var(--gw-sh-md); cursor: pointer;
  animation: gw-chat-asoma .16s var(--gw-ease, ease) both;
}
.gw-chat-bajar > .gw-chat-bajar-btn:hover { color: var(--gw-text); border-color: var(--gw-border-strong); }
.gw-chat-bajar-btn svg, .gw-chat-bajar-btn [data-lucide] { width: 22px; height: 22px; }
.gw-chat-bajar-n {
  position: absolute; top: -7px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill); background: var(--gw-brand); color: var(--gw-brand-ink);
  font-size: var(--gw-fs-xs); font-weight: 750; font-variant-numeric: tabular-nums;
}
.gw-chat-bajar > button, .gw-chat-bajar > .gw-btn.gw-btn { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); box-shadow: var(--gw-sh-md); border-radius: var(--gw-r-pill); }
.gw-chat-bajar > .gw-btn.gw-btn:hover:not(:disabled) { transform: translateX(-50%); }
.gw-chat-bajar > .gw-btn.gw-btn:active:not(:disabled) { transform: translateX(-50%) scale(.975); }

/* ── Redactar ───────────────────────────────────────────────────────────── */
.gw-chat-redactar {
  position: relative; flex-shrink: 0;
  padding: 8px 16px 12px;
  background: var(--gw-chat-fondo);
}
.gw-chat-respondiendo,
.gw-chat-subiendo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: var(--gw-fs-sm); color: var(--gw-text-2);
}
/* La tarjeta de lo que se responde (o se edita), encima de la caja: barra de
   color, quién y un extracto, como en WhatsApp (2026-10-11). Celeste si es de
   otro, lima si es tuyo; «Editando mensaje» con el lápiz. */
.gw-chat-respondiendo {
  flex-wrap: nowrap; gap: 10px; min-height: 52px; padding: 5px 4px 5px 12px;
  border-left: 3px solid var(--gw-sky-ink); border-radius: 10px;
  background: var(--gw-surface-3);
  animation: gw-chat-asoma .16s var(--gw-ease, ease) both;
}
.gw-chat-respondiendo.is-mia { border-left-color: var(--gw-lime-ink); }
.gw-chat-respondiendo.is-editando { border-left-color: var(--gw-brand-on-soft); }
.gw-chat-resp-ico { display: inline-flex; flex-shrink: 0; color: var(--gw-brand-on-soft); }
.gw-chat-resp-ico svg, .gw-chat-resp-ico [data-lucide] { width: 18px; height: 18px; }
.gw-chat-resp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.gw-chat-resp-txt > b { font-size: 12.5px; font-weight: 700; color: var(--gw-sky-ink); }
.gw-chat-respondiendo.is-mia .gw-chat-resp-txt > b { color: var(--gw-lime-ink); }
.gw-chat-respondiendo.is-editando .gw-chat-resp-txt > b { color: var(--gw-brand-on-soft); }
.gw-chat-resp-txt > span { font-size: 13px; color: var(--gw-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-chat-resp-mini { flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.gw-chat-resp-x {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--gw-text-3); cursor: pointer;
}
.gw-chat-resp-x:hover { background: var(--gw-surface); color: var(--gw-text); }
.gw-chat-resp-x svg, .gw-chat-resp-x [data-lucide] { width: 18px; height: 18px; }
.gw-chat-sub-mini { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.gw-chat-sub-item {
  display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
  padding: 3px 8px; border: 1px solid var(--gw-border); border-radius: var(--gw-r-pill);
  background: var(--gw-surface);
}
.gw-chat-sub-item [data-lucide] { width: 13px; height: 13px; }
.gw-chat-sub-prog { color: var(--gw-text-3); }
.gw-chat-sub-err { color: var(--gw-danger-ink); font-weight: 600; }

/* La caja: un campo compuesto. Su anillo lima es el ÚNICO indicador de foco;
   el textarea de dentro va desnudo en los dos temas (§6, «Campo compuesto»). */
.gw-chat-caja {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px;
  border: 1px solid var(--gw-border-strong); border-radius: var(--gw-r-lg);
  background: var(--gw-surface); box-shadow: var(--gw-sh-xs);
  transition: border-color var(--gw-dur-1) var(--gw-ease-io), box-shadow var(--gw-dur-2) var(--gw-ease);
}
.gw-chat-caja:focus-within { border-color: var(--gw-brand); box-shadow: var(--gw-ring); }
.gw-chat-entrada {
  flex: 1; min-width: 0; display: block;
  min-height: 34px; max-height: 160px; margin: 0; padding: 7px 6px;
  border: 0; outline: 0; background: transparent; box-shadow: none;
  -webkit-appearance: none; appearance: none; border-radius: 0;
  resize: none;
  font-family: var(--gw-font); font-size: var(--gw-fs-lg); font-weight: 400; line-height: 20px; color: var(--gw-text);
}
.gw-chat-caja-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--gw-r-md);
  background: transparent; color: var(--gw-text-3); cursor: pointer;
}
.gw-chat-caja-btn:hover, .gw-chat-caja-btn:focus-visible { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-chat-caja-btn svg, .gw-chat-caja-btn [data-lucide] { width: 18px; height: 18px; }
.gw-chat-enviar {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--gw-r-md);
  background: var(--gw-brand); color: var(--gw-brand-ink); cursor: pointer;
  transition: filter var(--gw-dur-1) var(--gw-ease-io), transform var(--gw-dur-1) var(--gw-ease-io), background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-enviar:hover:not(:disabled), .gw-chat-enviar:focus-visible { filter: brightness(1.07); }
.gw-chat-enviar:active:not(:disabled) { transform: scale(.94); }
.gw-chat-enviar:disabled { background: var(--gw-surface-3); color: var(--gw-text-muted); cursor: default; }
.gw-chat-enviar svg, .gw-chat-enviar [data-lucide] { width: 17px; height: 17px; }
.gw-chat-pista { margin: 6px 4px 0; font-size: var(--gw-fs-xs); color: var(--gw-text-muted); }

/* ── El panel: hilo (mensajes compactos) y miembros ─────────────────────── */
.gw-chat-hmsg { display: flex; gap: 10px; padding: 8px 12px; }
.gw-chat-hmsg.is-raiz { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--gw-border); }
.gw-chat-hmsg-av { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.gw-chat-hmsg-cuerpo { flex: 1; min-width: 0; }
.gw-chat-hmsg-cab { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.gw-chat-hmsg-autor { font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); }
.gw-chat-hmsg-hora { font-size: var(--gw-fs-xs); color: var(--gw-text-3); font-variant-numeric: tabular-nums; }
.gw-chat-hmsg .gw-chat-texto { font-size: 13.5px; }
.gw-chat-hmsg .gw-chat-reacs { margin: 6px 0 0; }
.gw-chat-hmsg.is-enviando { opacity: .85; }
.gw-chat-hmsg .gw-chat-meta.is-linea { margin-left: 4px; }

.gw-chat-mie {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px; border: 0; border-radius: var(--gw-r-md);
  background: transparent; color: var(--gw-text); font: inherit; text-align: left;
}
button.gw-chat-mie { cursor: pointer; }
button.gw-chat-mie:hover { background: var(--gw-surface-3); }
.gw-chat-mie .gw-chat-fila-av .gw-avatar { width: 36px; height: 36px; font-size: 13px; }
.gw-chat-mie-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gw-brand-12); color: var(--gw-brand-on-soft);
}
.gw-chat-mie-ico svg, .gw-chat-mie-ico [data-lucide] { width: 18px; height: 18px; }
.gw-chat-mie-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-chat-mie-nom { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-chat-mie-sub { font-size: var(--gw-fs-sm); color: var(--gw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-chat-mie-sub:empty { display: none; }
.gw-chat-mie-anadir .gw-chat-mie-nom { color: var(--gw-brand-on-soft); }
.gw-chat-fij-txt-env { flex: 1; min-width: 0; display: block; }
.gw-chat-fij-txt-env > .gw-chat-fij-txt,
.gw-chat-fij-txt-env > .gw-chat-fij-meta { display: block; }
.gw-chat-fij-txt-env > .gw-chat-fij-txt { display: -webkit-box; }

@keyframes gw-chat-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Móvil: las dos columnas se turnan ──────────────────────────────────── */
@media (max-width: 900px) {
  .gw-chat { height: calc(100vh - var(--gw-topbar-h) - var(--gw-mobilenav-total)); }
  @supports (height: 100dvh) { .gw-chat { height: calc(100dvh - var(--gw-topbar-h) - var(--gw-mobilenav-total)); } }
  .gw-chat-lado { width: 100%; flex: 1 1 auto; border-right: 0; background: var(--gw-surface); }
  .gw-chat-lado.is-oculto { display: none; }
  .gw-chat-conv.is-oculto { display: none; }
  .gw-chat .gw-chat-volver.gw-icon-btn { display: inline-flex; }

  .gw-chat-lado-cab { height: 56px; padding: 0 8px 0 16px; }
  .gw-chat-titulo { font-size: 22px; }
  .gw-chat-buscar { padding: 0 12px 8px; }
  .gw-chat-busca { height: 40px; border-radius: 12px; }
  /* 16 px: con menos, Safari hace zoom al tocar el campo. */
  .gw-chat-busca-campo { font-size: 16px; }
  .gw-chat-kbd { display: none; }
  .gw-chat-lista { padding: 0 4px 16px; }
  .gw-chat-grupo { margin: 16px 12px 4px; }
  .gw-chat-fila { min-height: 68px; padding: 12px; gap: 12px; }
  .gw-chat-fila-nom { font-size: 15px; }
  .gw-chat-fila-prev { font-size: 13.5px; }
  .gw-chat-fila-hora { font-size: var(--gw-fs-sm); }

  .gw-chat-cab { height: 56px; padding: 0 6px 0 4px; gap: 6px; }
  .gw-chat-mensajes { padding: 12px 12px 6px; }
  .gw-chat-msg-col { max-width: 84%; }
  .gw-chat-msg-lado { flex-basis: 28px; width: 28px; }
  .gw-chat-msg-av { width: 28px; height: 28px; font-size: 11px; }
  .gw-chat-texto { font-size: 15px; line-height: 1.42; }
  .gw-chat-redactar { padding: 6px 8px 8px; }
}
@media (max-width: 640px) {
  .gw-chat-cab-gente { display: none; }
  /* El «⋯» de la cabecera, como hoja desde abajo. */
  .gw-chat-menu-fondo { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(15, 23, 42, .45); }
  .gw-chat-menu:not(.is-flotante) {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 90;
    min-width: 0; max-width: none; max-height: 82vh; overflow-y: auto;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 40px -18px rgba(15, 23, 42, .45);
    animation: gw-chat-sube .22s cubic-bezier(.2, .8, .2, 1);
  }
  .gw-chat-menu:not(.is-flotante) .gw-chat-menu-tit {
    display: block; margin: 4px 8px 6px; text-align: center;
    font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gw-chat-menu:not(.is-flotante) .gw-chat-menu-item { min-height: 50px; gap: 14px; padding: 10px 8px; font-size: 15px; font-weight: 550; }
  .gw-chat-menu:not(.is-flotante) .gw-chat-menu-item > i,
  .gw-chat-menu:not(.is-flotante) .gw-chat-menu-item > i svg { width: 20px; height: 20px; }
  .gw-chat-menu:not(.is-flotante) .gw-chat-menu-cerrar {
    display: block; width: 100%; height: 48px; margin-top: 8px;
    border: 1px solid var(--gw-border); border-radius: 12px;
    background: var(--gw-surface); color: var(--gw-text);
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gw-chat-menu, .gw-chat-menu:not(.is-flotante) { animation: none; }
}

/* ── El mensaje como en WhatsApp (2026-10-11) ──────────────────────────────
   Hora y estado dentro de la burbuja, la banda de lo fijado, el «no se
   envió», deslizar para responder y el desplegable de un mensaje. */
@keyframes gw-chat-asoma { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

/* La hora, «Editado», el alfiler y el estado del envío. Con solo texto flota
   en la esquina de abajo; una copia invisible al final del texto (is-hueco)
   le guarda el sitio en la última línea, o abre una si no cabe. */
.gw-chat-meta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--gw-text-3); font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
}
.gw-chat-meta svg { display: block; width: 15px; height: 15px; flex-shrink: 0; }
.gw-chat-meta .gw-chat-meta-pin { width: 12px; height: 12px; color: var(--gw-amber-ink); }
.gw-chat-meta-ed { margin-right: 2px; font-style: italic; }
.gw-chat-tick { display: inline-flex; margin-left: 1px; }
.gw-chat-tick.is-enviando { color: var(--gw-text-muted); }
.gw-chat-tick.is-enviado { color: var(--gw-text-3); }
.gw-chat-tick.is-visto { color: var(--gw-sky-ink); }
.gw-chat-tick.is-error { color: var(--gw-danger-ink); }
.gw-chat-meta.is-flota { position: absolute; right: 10px; bottom: 7px; }
.gw-chat-meta.is-hueco { visibility: hidden; margin-left: 10px; vertical-align: -1px; }
.gw-chat-meta.is-pie { display: flex; justify-content: flex-end; margin: 4px -2px -2px 16px; }
/* Sobre una foto: una pastilla oscura encima de la imagen. */
.gw-chat-meta.is-foto {
  position: absolute; right: 9px; bottom: 9px;
  padding: 4px 7px; border-radius: var(--gw-r-pill);
  background: rgba(15, 23, 42, .55); color: #fff;
}
.gw-chat-meta.is-foto .gw-chat-tick,
.gw-chat-meta.is-foto .gw-chat-meta-pin { color: #fff; }
.gw-chat-meta.is-foto .gw-chat-tick.is-visto { color: #9ee0ff; }
.gw-chat-msg.is-mio .gw-chat-meta.is-flota,
.gw-chat-msg.is-mio .gw-chat-meta.is-pie { color: var(--gw-text-3); }

/* La nota de voz con ancho propio: con «min(300px, 100%)» dentro de una
   burbuja que se ciñe a lo que lleva, el 100 % no tenía de qué sacarse y la
   onda se quedaba en cero (solo se veían el play y el tiempo). */
.gw-chat-burbuja .gw-chat-voz { width: 250px; max-width: 100%; }

/* La burbuja recién enviada asoma; la que no salió se recuadra en rojo. */
.gw-chat-msg.is-enviando .gw-chat-burbuja { animation: gw-chat-asoma .16s var(--gw-ease, ease) both; }
.gw-chat-msg.is-error .gw-chat-burbuja { box-shadow: inset 0 0 0 1px var(--gw-danger-bd); }
.gw-chat-burbuja.is-pulsado { box-shadow: 0 0 0 2px var(--gw-brand-35); }

/* «No se envió · Reintentar · Descartar», bajo la burbuja. Los botones miden
   30 px y su zona de toque llega a los 40. */
.gw-chat-fallo {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px;
  margin: 5px 2px 2px; font-size: var(--gw-fs-sm);
}
.gw-chat-fallo-txt { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--gw-danger-ink); font-weight: 650; }
.gw-chat-fallo-txt svg { width: 15px; height: 15px; flex-shrink: 0; }
.gw-chat-fallo-btn {
  position: relative; height: 30px; padding: 0 12px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-pill);
  background: var(--gw-surface); color: var(--gw-text);
  font: inherit; font-size: var(--gw-fs-sm); font-weight: 650; cursor: pointer;
}
.gw-chat-fallo-btn::after { content: ''; position: absolute; inset: -5px -2px; }
.gw-chat-fallo-btn:hover { border-color: var(--gw-border-strong); }
.gw-chat-fallo-btn.is-tenue { color: var(--gw-text-2); }
.gw-chat-hmsg .gw-chat-fallo { justify-content: flex-start; }

/* ── Deslizar para responder (teléfono) ─────────────────────────────────
   pan-y: el navegador se queda el desplazamiento vertical y le deja el
   horizontal al gesto, así que deslizar no mueve la lista ni la lista
   dispara el gesto. La flecha asoma a la izquierda de la burbuja. */
.gw-chat.is-tactil .gw-chat-msg { touch-action: pan-y; }
.gw-chat-desliza {
  position: absolute; left: 2px; top: 50%; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: var(--gw-surface-3); color: var(--gw-text-2);
  opacity: 0; transform: scale(.55); pointer-events: none;
}
.gw-chat-desliza svg { width: 17px; height: 17px; }
.gw-chat-msg.is-listo .gw-chat-desliza { background: var(--gw-brand); color: var(--gw-brand-ink); }
.gw-chat-msg.is-volviendo .gw-chat-msg-col,
.gw-chat-msg.is-volviendo .gw-chat-desliza { transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }

/* ── Lo fijado: la banda bajo la cabecera ───────────────────────────────── */
.gw-chat-fijbar {
  position: relative; z-index: 5; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 6px 16px 6px 14px;
  border: 0; border-bottom: 1px solid var(--gw-border);
  background: var(--gw-surface); color: var(--gw-text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-fijbar:hover { background: var(--gw-surface-2); }
.gw-ui .gw-chat-fijbar:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: -2px; }
.gw-chat-fijbar-marcas { align-self: stretch; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.gw-chat-fijbar-marcas > i { flex: 1; width: 3px; border-radius: 2px; background: var(--gw-border-strong); }
.gw-chat-fijbar-marcas > i.is-on { background: var(--gw-amber-ink); }
.gw-chat-fijbar-ico { display: inline-flex; flex-shrink: 0; color: var(--gw-amber-ink); }
.gw-chat-fijbar-ico svg, .gw-chat-fijbar-ico [data-lucide] { width: 16px; height: 16px; }
.gw-chat-fijbar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.gw-chat-fijbar-tit { font-size: var(--gw-fs-xs); font-weight: 700; color: var(--gw-amber-ink); }
.gw-chat-fijbar-cuerpo { font-size: 13.5px; color: var(--gw-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-chat-fijbar-cuerpo > b { font-weight: 650; color: var(--gw-text); }

/* ── El desplegable de un mensaje (ordenador) ───────────────────────────── */
.gw-chat-pop {
  position: fixed; z-index: 85;
  padding: 6px;
  background: var(--gw-surface); color: var(--gw-text);
  border: 1px solid var(--gw-border); border-radius: 16px;
  box-shadow: var(--gw-sh-pop);
  animation: gw-menu-in var(--gw-dur-2, .16s) var(--gw-ease, ease) both;
}
.gw-chat-pop.is-reaccion { border-radius: 28px; padding: 5px 6px; }
.gw-chat-pop.is-reaccion:has(.gw-chat-emojis-rejilla) { border-radius: 18px; }
.gw-chat-pop.is-acciones { min-width: 224px; }
.gw-chat-pop.is-quien { min-width: 240px; max-width: min(320px, calc(100vw - 24px)); }
.gw-chat-pop-emojis { display: flex; align-items: center; gap: 2px; }
.gw-chat-pop-emojis > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; font-size: 23px; line-height: 1; cursor: pointer;
  transition: transform var(--gw-dur-1) var(--gw-ease-io), background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-chat-pop-emojis > button:hover { background: var(--gw-surface-3); transform: scale(1.12); }
.gw-chat-pop-emojis > button.is-mia { background: var(--gw-lime-bg); box-shadow: inset 0 0 0 1px var(--gw-lime-bd); }
.gw-chat-pop-emojis > button.is-mas,
.gw-chat-hoja-emojis > button.is-mas { color: var(--gw-text-2); }
.gw-chat-pop-emojis > button.is-mas svg,
.gw-chat-hoja-emojis > button.is-mas svg { width: 20px; height: 20px; }
.gw-chat-pop-emojis > button.is-mas:hover { transform: none; }
.gw-chat-pop-emojis > button.is-mas.is-on,
.gw-chat .gw-chat-hoja-emojis > button.is-mas.is-on { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-ui .gw-chat-pop button:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: -2px; }

/* Más emojis: una rejilla bajo la fila rápida (ordenador y hoja). */
.gw-chat-emojis-rejilla {
  display: grid; grid-template-columns: repeat(8, 40px); gap: 2px;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--gw-border-soft);
}
.gw-chat-emojis-rejilla > button {
  height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; font-size: 22px; line-height: 1; cursor: pointer;
}
.gw-chat-emojis-rejilla > button:hover { background: var(--gw-surface-3); }
.gw-chat-emojis-rejilla > button.is-mia { background: var(--gw-lime-bg); box-shadow: inset 0 0 0 1px var(--gw-lime-bd); }
.gw-chat-hoja .gw-chat-emojis-rejilla { grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0 0 8px; padding-top: 8px; }
.gw-chat-hoja .gw-chat-emojis-rejilla > button { height: 44px; font-size: 24px; }

/* Quién reaccionó: cada persona con su emoji; la mía se quita tocándola. */
.gw-chat-pop-tit { margin: 4px 8px 6px; font-size: var(--gw-fs-sm); font-weight: 650; color: var(--gw-text-3); }
.gw-chat-quien { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.gw-chat-quien-fila {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 6px 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--gw-text);
  font: inherit; text-align: left;
}
button.gw-chat-quien-fila { cursor: pointer; }
button.gw-chat-quien-fila:hover { background: var(--gw-surface-3); }
.gw-chat-quien-nom {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-chat-quien-nom > small { font-size: var(--gw-fs-xs); font-weight: 500; color: var(--gw-text-3); }
.gw-chat-quien-e { font-size: 22px; line-height: 1; }

/* En el teléfono, la lista de quién reaccionó sube como hoja desde abajo. */
.gw-chat-pop.is-hoja {
  top: auto; right: 0; bottom: 0; left: 0; z-index: 91;
  max-height: 72vh; overflow-y: auto;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 40px -18px rgba(15, 23, 42, .45);
  animation: gw-chat-sube .22s cubic-bezier(.2, .8, .2, 1);
}
.gw-chat-pop.is-hoja.is-hoja { min-width: 0; max-width: none; }
.gw-chat-pop.is-hoja .gw-chat-quien { max-height: none; }
.gw-chat-pop.is-hoja .gw-chat-quien-fila { min-height: 52px; }
.gw-chat-pop.is-hoja .gw-chat-pop-tit { font-size: 15px; text-align: center; margin: 0 0 8px; }

/* La hoja de un mensaje: la fila de reacciones arriba y un vistazo al
   mensaje antes de las acciones. */
.gw-chat-hoja.gw-chat-hoja-msg .gw-chat-hoja-emojis { gap: 6px; margin: 4px 0 10px; }
.gw-chat-hoja-prev { margin: 0 0 6px; }
.gw-chat-hoja-prev .gw-chat-hoja-cita {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gw-chat-reacs, .gw-chat-bajar > .gw-chat-bajar-btn, .gw-chat-respondiendo,
  .gw-chat-msg.is-enviando .gw-chat-burbuja, .gw-chat-pop, .gw-chat-pop.is-hoja { animation: none; }
  .gw-chat-msg.is-volviendo .gw-chat-msg-col, .gw-chat-msg.is-volviendo .gw-chat-desliza { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §35 · LA GENTE, PRIMERO
   El chat se abre para escribirle a alguien más que para entrar en un canal,
   así que la lista de personas manda y los canales van debajo. Las filas son
   las de §34 (.gw-chat-fila); el punto de estado es el de
   gestwork-presencia.css (.gw-pres, con .gw-pres--esquina sobre la cara).

   El aro del punto tiene que ser del color de lo que hay detrás para que se
   separe de la cara: la lista es gris, la fila abierta blanca y la fila bajo
   el ratón un gris más hondo. Se le pasa con --gw-pres-aro (si la hoja de
   presencia lo usa; si no, no estorba).
   ══════════════════════════════════════════════════════════════════════════ */
.gw-chat-lado { --gw-pres-aro: var(--gw-chat-lado); }
.gw-chat-fila:hover { --gw-pres-aro: var(--gw-surface-3); }
.gw-chat-fila.is-active { --gw-pres-aro: var(--gw-surface); }
.gw-chat-cab, .gw-chat-menu { --gw-pres-aro: var(--gw-surface); }
.gw-chat-panel { --gw-pres-aro: var(--gw-surface-2); }
@media (max-width: 900px) { .gw-chat-lado { --gw-pres-aro: var(--gw-surface); } }

/* ═══════════════════════════════════════════════════════════════════════════
   §36 · EL FORMULARIO DEL PROYECTO
   Son muchos campos porque son los que acaban impresos en un contrato. Se
   agrupan por lo que significan —el trabajo, lo que se firma, el dinero, lo
   legal— para que se lea como un documento y no como una lista.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-fp { text-align: left; }

.gw-fp-seccion {
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gw-border);
  font-size: var(--gw-fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-2);
}
.gw-fp-seccion:first-child { margin-top: 0; }

.gw-fp-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
@media (max-width: 640px) {
  .gw-fp-rejilla { grid-template-columns: 1fr; }
}
/* Una fila entera: la forma de pago, para que lo que depende de ella —el % de
   anticipo o el número de cuotas— quede al lado de los días para pagar. */
.gw-fp-entera { grid-column: 1 / -1; }
.gw-fp-rejilla > [hidden] { display: none; }

/* El diálogo puede crecer mucho: sin esto la ventana se estira más allá de la
   pantalla y los botones de guardar quedan fuera de alcance. */
.gw-fp { max-height: min(66vh, 620px); overflow-y: auto; padding-right: 4px; }

.gw-fp-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }

/* Rellenar desde un contrato en PDF (gestwork-importar-pdf.js): el botón va
   arriba del formulario, y lo que se rellenó queda marcado en verde para
   revisarlo antes de guardar. */
.gw-fp-importar { margin: 0 0 4px; }
.gw-fp-importar > .gw-btn { margin-bottom: 6px; }
.gw-fp-importar .gw-alert { margin-bottom: 6px; }
.gw-fp-rellenado .gw-input,
.gw-fp-rellenado .gw-textarea,
.gw-fp-rellenado .gw-select { border-color: var(--gw-success-bd); box-shadow: 0 0 0 3px var(--gw-success-bg); }
.gw-fp-check.gw-fp-rellenado { color: var(--gw-success-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   §37 · SUGERENCIAS DE REDACCIÓN
   Van debajo del campo, discretas. No son errores: son cosas a mirar antes de
   firmar, y el color lo dice —ámbar para lo que conviene revisar, no rojo de
   alarma—, porque muchas de estas frases están bien en su contexto.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-red {
  margin-top: 7px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  background: var(--gw-surface-2);
  overflow: hidden;
}

.gw-red-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--gw-border);
  font-size: var(--gw-fs-2xs);
  color: var(--gw-text-2);
}
.gw-red-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--gw-r-pill);
  background: var(--gw-surface-3); color: var(--gw-text);
  font-weight: 700;
}
.gw-red-n.is-alta { background: var(--gw-amber-bg); color: var(--gw-amber-ink); }
.gw-red-cerrar {
  margin-left: auto; border: 0; background: transparent;
  color: var(--gw-text-2); font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 2px;
}
.gw-red-cerrar:hover { color: var(--gw-text); }

.gw-red-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }

.gw-red-aviso {
  padding: 9px 10px;
  border-left: 3px solid var(--gw-border-strong);
  border-bottom: 1px solid var(--gw-border-soft, var(--gw-border));
}
.gw-red-aviso:last-child { border-bottom: 0; }
.gw-red-aviso.is-alta  { border-left-color: var(--gw-amber-ink); }
.gw-red-aviso.is-media { border-left-color: var(--gw-blue-ink); }
.gw-red-aviso.is-baja  { border-left-color: var(--gw-border-strong); }

.gw-red-cab { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }
.gw-red-titulo { font-size: var(--gw-fs-xs); font-weight: 700; color: var(--gw-text); }
.gw-red-frag {
  padding: 1px 5px; border-radius: var(--gw-r-xs);
  background: var(--gw-amber-bg); color: var(--gw-amber-ink);
  font-size: var(--gw-fs-2xs); font-family: inherit;
}
.gw-red-porque {
  /* Un escalón por encima del resto del panel: esto no es una etiqueta,
     es la explicación que hay que leer para decidir si se acepta. */
  margin: 0 0 6px; font-size: var(--gw-fs-xs);
  color: var(--gw-text-2); line-height: 1.5;
}
.gw-red-aplicar {
  display: inline-block; padding: 3px 9px;
  border: 1px solid var(--gw-border-strong); border-radius: var(--gw-r-sm);
  background: var(--gw-surface); color: var(--gw-text);
  font-size: var(--gw-fs-2xs); cursor: pointer;
  transition: border-color var(--gw-dur-1) var(--gw-ease);
}
.gw-red-aplicar:hover { border-color: var(--gw-brand); }
.gw-red-aplicar b { font-weight: 700; }
.gw-red-manual {
  margin: 0; font-size: var(--gw-fs-2xs); font-style: italic;
  color: var(--gw-text-3, var(--gw-text-2));
}

/* ═══════════════════════════════════════════════════════════════════════════
   §38 · RESOLVER UNA SOLICITUD
   Al aprobar una carga se puede dejar fuera parte de los leads. La fila
   descartada no se esconde —hay que poder recuperarla de un clic— pero deja
   de leerse como algo que va a entrar: se apaga y se tacha.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-fila-descartada > td { opacity: .42; text-decoration: line-through; }
.gw-fila-descartada > td:first-child {
  opacity: 1; text-decoration: none;   /* la casilla sigue viva y pulsable */
}

/* ═══════════════════════════════════════════════════════════════════════════
   §39 · LA SALA DE VIDEOLLAMADA
   Va siempre en oscuro, entre el sistema en claro o en oscuro: un vídeo sobre
   fondo blanco cansa y roba atención a lo único que importa, que son las
   caras. Por eso aquí se usan colores fijos y no los tokens del tema.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-vc { height: 100dvh; display: flex; flex-direction: column; color: #e2e8f0; }
.gw-vc [v-cloak] { display: none; }

/* ── Antes de entrar ─────────────────────────────────────────────────────── */
.gw-vc-previa {
  flex: 1; display: grid; place-items: center; padding: 18px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.gw-vc-previa-caja {
  display: grid; gap: 20px; width: 100%; max-width: 880px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .gw-vc-previa-caja { grid-template-columns: 1.25fr 1fr; align-items: center; } }

.gw-vc-previa-video {
  position: relative; aspect-ratio: 16/9; background: #000;
  border-radius: 14px; overflow: hidden; border: 1px solid #1e293b;
}
.gw-vc-previa-video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.gw-vc-previa-ctrl {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 10px;
}
.gw-vc-previa-datos { display: flex; flex-direction: column; gap: 8px; }
.gw-vc-previa-datos .gw-label { color: #cbd5e1; }
.gw-vc-previa-datos .gw-hint  { color: #94a3b8; }
.gw-vc-titulo { font-size: 21px; font-weight: 700; margin: 0; color: #f1f5f9; }
.gw-vc-sub    { font-size: 13px; color: #94a3b8; margin: 0 0 6px; }
.gw-vc-selectores { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }

/* ── Un aviso a pantalla completa ────────────────────────────────────────── */
.gw-vc-aviso {
  flex: 1; display: grid; place-items: center; padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.gw-vc-aviso-caja { text-align: center; max-width: 420px; display: grid; gap: 12px; justify-items: center; }
.gw-vc-aviso-ico {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: #1e293b; color: #94a3b8;
}
.gw-vc-aviso-ico svg { width: 26px; height: 26px; }
.gw-vc-aviso-tit { font-size: 19px; font-weight: 700; margin: 0; color: #f1f5f9; }
.gw-vc-aviso-sub { font-size: 13px; color: #94a3b8; margin: 0; line-height: 1.5; }
.gw-vc-latido { animation: gwVcLatido 1.8s ease-in-out infinite; }
@keyframes gwVcLatido { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gw-vc-latido { animation: none; } }

/* ── La sala ─────────────────────────────────────────────────────────────── */
.gw-vc-sala { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Con la app instalada en el iPhone, la página llega hasta arriba del todo y
   la cabecera quedaba debajo de la muesca, con los botones sin poder tocarse.
   Las áreas seguras valen cero en el navegador normal, así que ahí no cambia
   nada. Lo mismo a los lados, para el teléfono en horizontal. */
.gw-vc-cab {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px))
           max(14px, env(safe-area-inset-right, 0px))
           10px
           max(14px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid #1e293b; flex-shrink: 0;
}
.gw-vc-cab-tit { font-size: 15px; font-weight: 700; margin: 0; color: #f1f5f9;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-vc-cab-sub { font-size: 11px; color: #94a3b8; margin: 0; }
.gw-vc-cab-nota { color: #64748b; }
.gw-vc-cab-acciones { margin-left: auto; display: flex; gap: 7px; flex-shrink: 0; }

/* ── Quién llama a la puerta ─────────────────────────────────────────────── */
.gw-vc-puerta {
  margin: 10px 14px 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(176, 229, 17, .10); border: 1px solid rgba(176, 229, 17, .35);
  display: grid; gap: 7px; flex-shrink: 0;
}
.gw-vc-puerta-fila { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gw-vc-puerta-nom { font-size: 13px; font-weight: 600; color: #f1f5f9; flex: 1; min-width: 120px; }
.gw-vc-puerta-nom em { font-style: normal; font-weight: 400; color: #94a3b8; font-size: 11px; }

/* ── La rejilla de caras ─────────────────────────────────────────────────────
   El número de columnas sale del número de personas, no de un punto de rotura:
   dos caras en un monitor ancho tienen que salir lado a lado, y cuatro en dos
   por dos, sea cual sea el tamaño de la ventana. */
.gw-vc-rejilla {
  flex: 1; min-height: 0; display: grid; gap: 8px; padding: 10px 14px;
  grid-template-columns: 1fr;
}
.gw-vc-rejilla[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.gw-vc-rejilla[data-n="3"],
.gw-vc-rejilla[data-n="4"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
@media (max-width: 640px) {
  .gw-vc-rejilla[data-n="2"],
  .gw-vc-rejilla[data-n="3"],
  .gw-vc-rejilla[data-n="4"] { grid-template-columns: 1fr; grid-template-rows: none; }
}

.gw-vc-celda {
  position: relative; background: #000; border-radius: 12px; overflow: hidden;
  border: 2px solid transparent; min-height: 120px;
}
.gw-vc-celda video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El propio se ve en espejo, como en todas partes: verse al revés desconcierta. */
.gw-vc-celda.is-yo video { transform: scaleX(-1); }
/* Quien habla se enciende. En una rejilla de caras calladas, esto es lo que
   evita que dos personas arranquen a la vez. */
.gw-vc-celda.is-hablando { border-color: var(--gw-brand, #b0e511); }

.gw-vc-sincam {
  position: absolute; inset: 0; display: grid; place-items: center; background: #111827;
}
.gw-vc-inicial {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: #334155; color: #e2e8f0; font-size: 26px; font-weight: 700;
}
.gw-vc-inicial-sm { width: 28px; height: 28px; font-size: 12px; }

.gw-vc-etiqueta {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  display: flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(15, 23, 42, .72); backdrop-filter: blur(4px);
  font-size: 11px; color: #e2e8f0;
}
.gw-vc-etiqueta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-vc-etiqueta em { font-style: normal; color: #94a3b8; }
.gw-vc-etiqueta svg { width: 13px; height: 13px; flex-shrink: 0; }
.gw-vc-mudo { color: #fb7185; }
.gw-vc-senal.is-regular { color: #fbbf24; }
.gw-vc-senal.is-mala    { color: #fb7185; }

/* El cartel de «conectando» ya no es una palabra suelta: cuando la cosa se
   atasca crece hasta explicar qué pasa y ofrecer el detalle. */
.gw-vc-conectando {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; padding: 16px;
  background: rgba(2, 6, 23, .78); font-size: 12px; color: #cbd5e1;
  text-align: center;
}
.gw-vc-conectando strong { color: #f1f5f9; font-size: 13px; }
.gw-vc-conectando span   { max-width: 300px; line-height: 1.45; }

/* El volcado del diagnóstico. Monoespaciado y seleccionable entero: está para
   copiarlo y pegarlo en un mensaje, no para leerlo con calma. */
.gw-vc-diag {
  margin: 0; padding: 11px; border-radius: 9px;
  background: var(--gw-surface-2, #0f172a); border: 1px solid var(--gw-border);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; line-height: 1.5; color: var(--gw-text-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow: auto; user-select: all;
}
.gw-vc-echar {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: 8px; background: rgba(15, 23, 42, .72); color: #e2e8f0;
  opacity: 0; transition: opacity .15s;
}
.gw-vc-celda:hover .gw-vc-echar,
.gw-vc-echar:focus-visible { opacity: 1; }
.gw-vc-echar:hover { background: #be123c; }
.gw-vc-echar svg { width: 15px; height: 15px; }

/* ── La barra de control ─────────────────────────────────────────────────── */
.gw-vc-barra {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px max(14px, env(safe-area-inset-right, 0px))
           calc(12px + env(safe-area-inset-bottom, 0px))
           max(14px, env(safe-area-inset-left, 0px));
  border-top: 1px solid #1e293b; flex-shrink: 0;
}
.gw-vc-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  background: #1e293b; color: #e2e8f0; transition: background .15s, color .15s;
}
.gw-vc-btn:hover { background: #334155; }
.gw-vc-btn svg { width: 19px; height: 19px; }
/* Apagado en rojo apagado, no en gris: hay que poder ver de un vistazo que el
   micro está cerrado, que es el error más caro de una reunión. */
/* Compartir pantalla no existe en móvil, así que su botón se esconde ahí.
   Se hace con `display:none` en una media query y NO con las utilidades de
   Tailwind: `hidden sm:inline-flex` cambiaba el display a flex y se llevaba
   por delante el `place-items:center` del grid, descentrando el icono. */
@media (max-width: 640px) { .gw-vc-solo-escritorio { display: none !important; } }

.gw-vc-btn.is-off { background: #7f1d1d; color: #fecaca; }
.gw-vc-btn.is-on  { background: var(--gw-brand, #b0e511); color: #0b1220; }
.gw-vc-colgar     { background: #be123c; color: #fff; width: 62px; border-radius: 999px; }
.gw-vc-colgar:hover { background: #9f1239; }

.gw-vc-btn-min {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 9px; border: 1px solid #334155;
  background: transparent; color: #cbd5e1; font-size: 12px; cursor: pointer;
}
.gw-vc-btn-min:hover { background: #1e293b; }
.gw-vc-btn-min.is-on { border-color: var(--gw-brand, #b0e511); color: var(--gw-brand, #b0e511); }
.gw-vc-btn-min svg { width: 14px; height: 14px; }
.gw-vc-terminar { border-color: #be123c; color: #fda4af; }
.gw-vc-terminar:hover { background: #7f1d1d; }

.gw-vc-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 9px 14px; border-radius: 999px; z-index: 40;
  background: rgba(15, 23, 42, .94); border: 1px solid #334155;
  font-size: 12px; color: #e2e8f0;
}
.gw-vc-toast svg { width: 15px; height: 15px; }

/* ── §39b · Dos piezas de la lista de reuniones ──────────────────────────── */

/* El punto que dice «esto está pasando ahora». Late, porque una reunión en
   curso es la única fila de esa lista sobre la que se puede actuar ya. */
.gw-punto-vivo {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gw-brand); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(176, 229, 17, .55);
  animation: gwLatePunto 2s ease-out infinite;
}
@keyframes gwLatePunto {
  70%  { box-shadow: 0 0 0 7px rgba(176, 229, 17, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 229, 17, 0); }
}
@media (prefers-reduced-motion: reduce) { .gw-punto-vivo { animation: none; } }

/* El código que se dicta por teléfono. Grande y espaciado a propósito: se lee
   en voz alta a alguien que lo está escribiendo al otro lado. */
.gw-codigo {
  margin: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: 3px;
  color: var(--gw-text); user-select: all;
}

/* ── §39c · Panel de personas y chat en la llamada ───────────────────────────
   Va al LADO de las caras y no encima: en una reunión se escribe mientras se
   mira a alguien, y un panel flotante taparía justo eso. En móvil no cabe al
   lado, así que ahí sí ocupa la pantalla. */
.gw-vc-cuerpo { flex: 1; min-height: 0; display: flex; }
.gw-vc-cuerpo > .gw-vc-rejilla { flex: 1; min-width: 0; }

.gw-vc-panel {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  border-left: 1px solid #1e293b; background: #0e1729; min-height: 0;
}
@media (max-width: 720px) {
  .gw-vc-cuerpo { flex-direction: column; }
  .gw-vc-panel { width: auto; border-left: 0; border-top: 1px solid #1e293b; max-height: 52%; }
}

.gw-vc-panel-tabs { display: flex; align-items: center; border-bottom: 1px solid #1e293b; flex-shrink: 0; }
.gw-vc-panel-tabs > button {
  flex: 1; padding: 11px 8px; border: 0; background: transparent; cursor: pointer;
  color: #94a3b8; font-size: 12px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.gw-vc-panel-tabs > button.is-active { color: #f1f5f9; border-bottom-color: var(--gw-brand, #b0e511); }
.gw-vc-panel-cerrar { flex: 0 0 38px !important; color: #64748b; }
.gw-vc-panel-cerrar svg { width: 15px; height: 15px; }
.gw-vc-panel-n {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 3px;
  border-radius: 999px; background: #1e293b; font-size: 10px; line-height: 17px;
}
.gw-vc-panel-n.is-alta { background: var(--gw-brand, #b0e511); color: #0b1220; }

.gw-vc-panel-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.gw-vc-panel-nota { font-size: 11px; color: #64748b; margin: 0 0 8px; line-height: 1.45; }
.gw-vc-panel-pie { margin-top: 12px; padding-top: 10px; border-top: 1px solid #1e293b; }

/* ── Una persona de la lista ─────────────────────────────────────────────── */
.gw-vc-persona { display: flex; align-items: center; gap: 8px; padding: 7px 4px; }
.gw-vc-persona-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-vc-persona-nom {
  font-size: 12px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gw-vc-persona-sub { font-size: 10px; color: #64748b; }
.gw-vc-persona svg { width: 14px; height: 14px; color: #64748b; flex-shrink: 0; }
.gw-vc-persona-echar {
  border: 0; background: transparent; color: #64748b; cursor: pointer;
  padding: 3px; border-radius: 6px; flex-shrink: 0;
}
.gw-vc-persona-echar:hover { background: #7f1d1d; color: #fecaca; }

/* ── El hilo del chat ────────────────────────────────────────────────────── */
.gw-vc-chat { display: flex; flex-direction: column; overflow: hidden; }
.gw-vc-chat-hilo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 10px; }
/* Burbujas (2026-10-10): lo de los demás a la izquierda con su nombre, lo
   propio a la derecha en el color de la marca. Antes eran tres líneas de
   texto pegadas una debajo de otra y no se distinguía quién decía qué. */
.gw-vc-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 86%; }
.gw-vc-msg.is-mio { align-self: flex-end; align-items: flex-end; }
.gw-vc-msg-de   { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: #94a3b8; padding: 0 8px; }
.gw-vc-msg.is-mio .gw-vc-msg-de { color: var(--gw-brand, #b0e511); }
.gw-vc-msg-txt  { font-size: 13px; color: #e2e8f0; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
                  padding: 8px 12px; border-radius: 16px 16px 16px 5px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .07); }
.gw-vc-msg.is-mio .gw-vc-msg-txt { background: var(--gw-brand, #b0e511); border-color: transparent; color: #0f172a; border-radius: 16px 16px 5px 16px; }
.gw-vc-msg-hora { font-size: 9.5px; color: #64748b; padding: 0 8px; }
.gw-vc-msg + .gw-vc-msg.is-mio, .gw-vc-msg.is-mio + .gw-vc-msg:not(.is-mio) { margin-top: 4px; }
.gw-vc-chat-pie {
  display: flex; gap: 6px; padding-top: 9px; margin-top: 9px;
  border-top: 1px solid #1e293b; flex-shrink: 0;
}
.gw-vc-chat-pie .gw-input { flex: 1; min-width: 0; }

/* El punto del botón de chat cuando hay algo sin leer. */
.gw-vc-btn { position: relative; }
.gw-vc-btn-punto {
  position: absolute; top: 9px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gw-brand, #b0e511); border: 2px solid #1e293b;
}

/* Títulos de grupo en la hoja «Más» del móvil, con el mismo aire que los de
   la barra lateral: quien usa el sistema en las dos pantallas no tiene que
   aprenderse dos ordenaciones distintas. */
.gw-mas-titulo {
  margin: 14px 4px 4px; padding: 0;
  font-size: var(--gw-fs-2xs); font-weight: 600;
  letter-spacing: var(--gw-tracking-wide); text-transform: uppercase;
  color: var(--gw-text-faint);
}
.gw-mas-lista > .gw-mas-titulo:first-child { margin-top: 2px; }

/* La foto de perfil cuando alguien tiene la cámara apagada. Redonda y del
   mismo tamaño que el círculo de iniciales, para que la rejilla no dé un
   salto según quién tenga foto y quién no. */
.gw-vc-foto {
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.12);
}
.gw-vc-foto-sm {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}

/* ── Las dos opciones al colgar ──────────────────────────────────────────────
   Botones grandes con su consecuencia escrita debajo, no dos palabras sueltas.
   La grave se marca en rojo solo al pasar por encima: teñirla de entrada haría
   que la mirada fuera justo a lo que no conviene pulsar por inercia. */
.gw-vc-opcion {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 13px; margin-bottom: 9px; cursor: pointer; text-align: left;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-md);
  background: transparent; color: var(--gw-text);
  transition: border-color .15s, background .15s;
}
.gw-vc-opcion:hover { border-color: var(--gw-brand); background: var(--gw-brand-04); }
.gw-vc-opcion-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gw-surface-2); color: var(--gw-text-2);
}
.gw-vc-opcion-ico svg { width: 17px; height: 17px; }
.gw-vc-opcion-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-vc-opcion-txt strong { font-size: var(--gw-fs-md); font-weight: 650; }
.gw-vc-opcion-txt em {
  font-style: normal; font-size: var(--gw-fs-xs); color: var(--gw-text-2); line-height: 1.45;
}
.gw-vc-opcion.is-grave:hover {
  border-color: var(--gw-rose-ink, #be123c);
  background: var(--gw-rose-bg, rgba(190, 18, 60, .08));
}
.gw-vc-opcion.is-grave:hover .gw-vc-opcion-ico {
  background: var(--gw-rose-ink, #be123c); color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §40 · EL CHAT, LA SEGUNDA VUELTA
   Tres piezas que el chat prometía y no daba: leer un hilo junto, tener a mano
   lo fijado, y escribir una mención sin adivinar cómo se llama el otro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El panel de la derecha ───────────────────────────────────────────────
   Hilos y fijados comparten sitio: nunca hacen falta los dos a la vez, y dos
   columnas más dejarían la conversación en un pasillo. */
.gw-chat-panel {
  width: 340px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
  min-height: 0;
}
.gw-chat-panel-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--gw-border);
  flex-shrink: 0;
}
.gw-chat-panel-tit {
  margin: 0; font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text);
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.gw-chat-panel-tit svg, .gw-chat-panel-tit i[data-lucide] { width: 15px; height: 15px; color: var(--gw-text-2); flex-shrink: 0; }
.gw-chat-panel-sub { margin: 1px 0 0; font-size: var(--gw-fs-2xs); color: var(--gw-text-2); }
.gw-chat-panel-x { margin-left: auto; flex-shrink: 0; }
.gw-chat-panel-cuerpo {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 10px 4px 14px;
  display: flex; flex-direction: column;
}
/* La raíz del hilo se separa de sus respuestas con una línea, para que se vea
   de un vistazo qué se contestó y qué son contestaciones. */
.gw-chat-hilo-raiz { border-bottom: 1px solid var(--gw-border); padding-bottom: 8px; margin-bottom: 4px; }
.gw-chat-hilo-n {
  padding: 4px 12px 8px 12px; margin: 0;
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text-2);
}

/* ── «3 respuestas», bajo el mensaje ──────────────────────────────────────
   Siempre visible, no solo al pasar por encima: es contenido, no una acción
   escondida. Si un mensaje tiene hilo, hay que verlo sin buscarlo. */
.gw-chat-hilo-abrir {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; padding: 2px 8px 2px 6px;
  border: 1px solid transparent; border-radius: var(--gw-r-pill, 999px);
  background: var(--gw-brand-12);
  font-size: var(--gw-fs-2xs); font-weight: 700;
  color: var(--gw-brand-on-soft, var(--gw-brand-ink));
  cursor: pointer;
}
.gw-chat-hilo-abrir:hover { border-color: var(--gw-brand); }
.gw-chat-hilo-abrir svg, .gw-chat-hilo-abrir i[data-lucide] { width: 12px; height: 12px; }

/* ── Lo fijado ────────────────────────────────────────────────────────── */
.gw-chat-fij {
  display: flex; gap: 8px; align-items: flex-start;
  width: 100%; text-align: left;
  padding: 8px 12px; border: 0; background: none; cursor: pointer;
  border-radius: var(--gw-r-md, 10px);
}
.gw-chat-fij:hover { background: var(--gw-surface-3); }
.gw-chat-fij-txt {
  margin: 0; font-size: var(--gw-fs-sm); color: var(--gw-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gw-chat-fij-meta { margin: 2px 0 0; font-size: var(--gw-fs-2xs); color: var(--gw-text-2); }

/* ── El desplegable de menciones ──────────────────────────────────────────
   Va anclado sobre la caja de escribir, no dentro: la caja crece al escribir y
   el desplegable no puede empujarla ni quedarse cortado por su overflow. */
.gw-chat-arroba {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 6px;
  width: min(320px, 100%);
  max-height: 232px; overflow-y: auto;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg, 12px);
  box-shadow: var(--gw-sh-lg, var(--gw-sh-md));
  padding: 4px;
  z-index: 30;
}
.gw-chat-arroba-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: var(--gw-r-md, 10px);
}
.gw-chat-arroba-item:hover,
.gw-chat-arroba-item.is-marcada { background: var(--gw-brand-12); }
.gw-chat-arroba-nom {
  font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gw-chat-arroba-rol { font-size: var(--gw-fs-2xs); color: var(--gw-text-2); margin-left: auto; flex-shrink: 0; }

/* La caja de escribir pasa a ser el ancla del desplegable. */
.gw-chat-redactar { position: relative; }

/* ── En el móvil ──────────────────────────────────────────────────────────
   El panel se come la pantalla entera, como la conversación: caben dos
   columnas de 340 px en un escritorio, no en un teléfono. */
@media (max-width: 900px) {
  .gw-chat-panel { width: 100%; flex: 1 1 auto; border-left: 0; }
  .gw-chat-conv.is-tapado { display: none; }
}

/* Un parpadeo al saltar a un mensaje desde lo fijado o desde la búsqueda: sin
   esto se hace scroll y no se sabe cuál de los de la pantalla era. */
.gw-resaltado { animation: gw-resaltar 1.6s ease-out; border-radius: var(--gw-r-md, 10px); }
@keyframes gw-resaltar {
  0%, 55% { background: var(--gw-brand-12); box-shadow: inset 2px 0 0 var(--gw-brand); }
  100%    { background: transparent; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §41 · CÓMO QUIERES VERIFICARTE
   El paso que hay entre la contraseña y el código. Cada opción es un botón
   entero, no una fila con un radio: se elige de un toque, que es como se usa
   esta pantalla en el móvil.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-2fa-opciones { display: flex; flex-direction: column; gap: 10px; }
.gw-2fa-opcion {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 14px; cursor: pointer;
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg, 12px);
  transition: border-color .12s, background .12s;
}
.gw-2fa-opcion:hover { border-color: var(--gw-brand); background: var(--gw-surface-2); }
.gw-2fa-opcion:focus-visible { outline: none; box-shadow: var(--gw-ring); }
.gw-2fa-opcion.is-recomendada { border-color: var(--gw-brand); background: var(--gw-brand-12); }
.gw-2fa-opcion.is-menor { padding: 11px 14px; background: none; }
.gw-2fa-opcion.is-menor .gw-2fa-opcion-tit { font-weight: 600; }

.gw-2fa-opcion-ico {
  flex-shrink: 0; width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: var(--gw-r-md, 10px);
  background: var(--gw-surface-3); color: var(--gw-text);
}
.gw-2fa-opcion-ico svg, .gw-2fa-opcion-ico i[data-lucide] { width: 18px; height: 18px; }
.gw-2fa-opcion.is-recomendada .gw-2fa-opcion-ico { background: var(--gw-brand); color: var(--gw-brand-ink); }

.gw-2fa-opcion-tit {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text);
}
.gw-2fa-opcion-sub {
  display: block; margin-top: 2px;
  font-size: var(--gw-fs-2xs); line-height: 1.45; color: var(--gw-text-2);
}
.gw-2fa-opcion-fin { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: var(--gw-text-2); align-self: center; }

/* Las salidas de la pantalla del código. Van en fila y se parten solas en el
   móvil, que es donde tres enlaces seguidos no caben. */
.gw-2fa-pie {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin-top: 18px;
}
.gw-2fa-pie a {
  font-size: var(--gw-fs-2xs); font-weight: 600;
  color: var(--gw-text-2); text-decoration: none;
}
.gw-2fa-pie a:hover { color: var(--gw-brand-ink, var(--gw-text)); text-decoration: underline; }

/* ── Rejilla que se acomoda sola ───────────────────────────────────────────
   Tantas columnas como quepan con `--gw-min` de ancho mínimo. Sirve para las
   listas de tarjetitas de Ajustes (temas, etapas, campos) sin tener que elegir
   a mano cuántas columnas van en cada pantalla. */
.gw-rejilla-auto {
  display: grid; gap: 12px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(var(--gw-min, 240px), 1fr));
}

/* ═══════════════════════════════════════════════════════════════════════════
   §42 · SEGURIDAD DE LA CUENTA (Configuraciones)
   Cada asunto —la aplicación de autenticación, los dispositivos de confianza,
   las sesiones guardadas, los avisos al móvil— en su propio panel.

   Antes eran bloques sueltos separados por una línea, y el texto y las listas
   arrancaban pegados al borde de la tarjeta: parecían párrafos caídos, no
   secciones. El panel les da su sitio y su aire, y es el mismo recurso que ya
   usa el alta de la aplicación de autenticación.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-panel,
.gw-seg-bloque {
  padding: 16px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-lg, 14px);
  background: var(--gw-surface-2);
  margin-bottom: 14px; min-width: 0;
}
.gw-panel:last-child,
.gw-seg-bloque:last-child { margin-bottom: 0; }
.gw-panel-cab,
.gw-seg-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
/* El botón de la cabecera —«Cerrar todas»— se va a la derecha y, si no cabe,
   baja entero en vez de estrujar el título. */
.gw-panel-cab-accion,
.gw-seg-cab-accion { margin-left: auto; flex-shrink: 0; }
/* Campos dentro de un panel: en rejilla, para no dejar media tarjeta vacía a
   la derecha. Se acomodan solos al ancho que haya. */
.gw-panel-campos,
.gw-seg-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 16px; border: 0; padding: 0; margin: 0; min-width: 0;
}
.gw-panel-campos .gw-field,
.gw-seg-campos .gw-field { min-width: 0; }
@media (max-width: 560px) {
  .gw-panel-cab,
  .gw-seg-cab { flex-wrap: wrap; row-gap: 10px; }
  /* 48px = el icono (36) más su hueco (12): el título se queda a su lado y lo
     que baja es el botón, alineado con el texto. */
  .gw-panel-cab > div:not(.gw-panel-cab-accion),
  .gw-seg-cab > div:not(.gw-seg-cab-accion) { flex-basis: calc(100% - 48px); }
  .gw-panel-cab-accion,
  .gw-seg-cab-accion { margin-left: 48px; }
}
.gw-panel-ico,
.gw-seg-ico {
  flex-shrink: 0; width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: var(--gw-r-md, 10px);
  background: var(--gw-surface-3); color: var(--gw-text-2);
}
.gw-seg-ico.is-on { background: var(--gw-brand); color: var(--gw-brand-ink); }
.gw-panel-ico svg, .gw-panel-ico i[data-lucide],
.gw-seg-ico svg, .gw-seg-ico i[data-lucide] { width: 18px; height: 18px; }
.gw-panel-tit,
.gw-seg-tit {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 2px;
  font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text);
}
.gw-panel-sub,
.gw-seg-sub { margin: 0; font-size: var(--gw-fs-2xs); line-height: 1.5; color: var(--gw-text-2); }
.gw-seg-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── El alta: QR y clave ─────────────────────────────────────────────────
   El QR y la clave escrita van uno al lado del otro a propósito: en un móvil
   no se puede escanear la pantalla del propio móvil, y ahí la clave es la
   única vía. */
.gw-seg-alta {
  margin-top: 12px; padding: 14px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-lg, 12px);
  background: var(--gw-surface);          /* dentro del panel, al revés: sube */
}
.gw-seg-pasos { margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--gw-fs-2xs); color: var(--gw-text-2); }
.gw-seg-pasos li { margin-bottom: 3px; }
.gw-seg-pasos b { color: var(--gw-text); }
.gw-seg-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.gw-seg-qr-caja {
  flex-shrink: 0; width: 158px; height: 158px;
  display: grid; place-items: center; padding: 4px;
  background: #ffffff;                 /* el lector necesita fondo claro, también en modo oscuro */
  border-radius: var(--gw-r-md, 10px);
}
.gw-seg-qr-caja img, .gw-seg-qr-caja canvas { display: block; }
.gw-seg-secreto {
  margin: 0 0 4px; font-family: var(--gw-font-mono, ui-monospace, monospace);
  font-size: var(--gw-fs-sm); font-weight: 700; letter-spacing: .06em;
  color: var(--gw-text); word-break: break-all;
}

/* ── Los códigos de rescate ────────────────────────────────────────────── */
.gw-seg-rescates { align-items: flex-start; }
.gw-seg-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 5px; margin: 0; padding: 0; list-style: none;
}
.gw-seg-lista li {
  font-family: var(--gw-font-mono, ui-monospace, monospace);
  font-size: var(--gw-fs-2xs); font-weight: 700; letter-spacing: .04em;
  padding: 5px 7px; text-align: center;
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm, 8px);
}

/* ── Dispositivos y sesiones ─────────────────────────────────────────────
   Cada equipo es una ficha, no una línea de lista: icono en su cuadrado,
   nombre, lo de debajo en pequeño y el botón de retirar al final. Con dos o
   tres seguidos se lee de un vistazo cuál es cuál. */
.gw-seg-disp { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gw-seg-disp li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--gw-r-md, 10px);
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  transition: border-color .15s ease;
}
.gw-seg-disp li:hover { border-color: var(--gw-border-strong); }
.gw-seg-disp-ico {
  flex-shrink: 0; width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: var(--gw-r-sm, 8px);
  background: var(--gw-surface-3); color: var(--gw-text-2);
}
.gw-seg-disp-ico svg, .gw-seg-disp-ico i[data-lucide] { width: 15px; height: 15px; }
.gw-seg-disp li > svg, .gw-seg-disp li > i[data-lucide] { width: 16px; height: 16px; color: var(--gw-text-2); flex-shrink: 0; }
/* El cuadrado del icono NO se estira: lo que crece es el texto. */
.gw-seg-disp li > span:not(.gw-seg-disp-ico) { flex: 1; min-width: 0; }
.gw-seg-disp li .gw-btn { flex-shrink: 0; }
.gw-seg-disp-nom {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text);
}
.gw-seg-disp-meta { display: block; font-size: var(--gw-fs-2xs); line-height: 1.5; color: var(--gw-text-2); margin-top: 1px; }
/* En el móvil el botón se va debajo: con el nombre de un navegador entero al
   lado no cabía y se comía la fecha. */
@media (max-width: 560px) {
  .gw-seg-disp li { flex-wrap: wrap; row-gap: 8px; }
  /* 42px = el cuadrado del icono (30) más su hueco (12): así el nombre ocupa
     el resto de la primera línea y el botón baja entero a la segunda. */
  .gw-seg-disp li > span:not(.gw-seg-disp-ico) { flex-basis: calc(100% - 42px); }
  .gw-seg-disp li .gw-btn { margin-left: 42px; }
}

/* Un «quitar» que no grita hasta que se apunta a él. */
.gw-btn-danger-ghost:hover { background: var(--gw-danger-bg); color: var(--gw-danger-ink); }

/* Los cuatro interruptores de qué avisos se quieren. Se guardan al tocarlos,
   así que no hay botón: la rejilla es todo lo que hay. */
.gw-seg-tipos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 4px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--gw-border);
}
.gw-seg-tipo {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; cursor: pointer;
  border-radius: var(--gw-r-md, 10px);
}
.gw-seg-tipo:hover { background: var(--gw-surface); }
.gw-seg-tipo input { margin-top: 2px; flex-shrink: 0; }
.gw-seg-tipo-nom { display: block; font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text); }
.gw-seg-tipo-sub { display: block; font-size: var(--gw-fs-2xs); line-height: 1.4; color: var(--gw-text-2); }

/* ── Comprobantes de pago en el detalle de un cobro ───────────────────────
   La miniatura va a la izquierda: con verla se sabe si es una captura del
   banco, una foto torcida o un PDF, antes de abrir nada. */
.gw-cob-cc { gap: 12px; }
.gw-cob-cc-vista {
  flex-shrink: 0; width: 64px; height: 64px; overflow: hidden;
  border-radius: var(--gw-r-md, 10px); border: 1px solid var(--gw-border);
  background: #fff; display: block;
}
.gw-cob-cc-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-cob-cc-ico {
  flex-shrink: 0; width: 64px; height: 64px;
  display: inline-grid; place-items: center;
  border-radius: var(--gw-r-md, 10px); background: var(--gw-surface-3); color: var(--gw-text-2);
}
.gw-cob-cc-ico svg, .gw-cob-cc-ico i[data-lucide] { width: 22px; height: 22px; }
.gw-chip-btn.gw-chip-sky { cursor: pointer; }

/* ── Qué falta para que lleguen los avisos ─────────────────────────────────
   Se enseña justo debajo del botón de activar, y lleva su propio «volver a
   comprobar»: sin recargar la página se ve si ya quedó. */
.gw-push-motivo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding: 9px 11px;
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-md, 10px);
  background: var(--gw-surface);
  font-size: var(--gw-fs-2xs); line-height: 1.5; color: var(--gw-text-2);
}
.gw-push-motivo > svg, .gw-push-motivo > i[data-lucide] {
  width: 15px; height: 15px; flex-shrink: 0; color: var(--gw-text-3);
}
.gw-push-motivo > span { flex: 1 1 220px; }
.gw-push-motivo .gw-btn { flex-shrink: 0; }

/* ── La prueba de los avisos al móvil ──────────────────────────────────────
   Antes todo era «enviado», y eso no distinguía lo que importa: que el
   servicio de Apple o de Google ACEPTÓ el aviso no es lo mismo que el teléfono
   lo ENSEÑÓ. La caja cambia de color según hasta dónde se llegó. */
.gw-push-prueba {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--gw-r-lg, 12px);
  background: var(--gw-info-bg); color: var(--gw-info-ink);
  font-size: var(--gw-fs-sm); line-height: 1.45;
}
.gw-push-prueba.is-ok    { background: var(--gw-success-bg); color: var(--gw-success-ink); }
.gw-push-prueba.is-aviso { background: var(--gw-warn-bg);    color: var(--gw-warn-ink); }
.gw-push-prueba.is-error { background: var(--gw-danger-bg);  color: var(--gw-danger-ink); }
.gw-push-prueba > i[data-lucide] { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.gw-push-prueba > i[data-lucide] svg { width: 16px; height: 16px; }
.gw-push-prueba b { display: block; font-weight: 700; }
.gw-push-prueba-det { display: block; font-size: var(--gw-fs-2xs); line-height: 1.5; }
.gw-push-prueba-det + .gw-push-prueba-det { margin-top: 2px; }

/* La vía que existe pero todavía no está dada de alta. Misma forma que las
   demás para que se lea igual de bien; sin cursor ni hover, porque desde la
   pantalla de acceso no lleva a ninguna parte. */
.gw-2fa-opcion.is-apagada {
  cursor: default;
  background: var(--gw-surface-2);
  border-style: dashed;
}
.gw-2fa-opcion.is-apagada:hover { border-color: var(--gw-border); background: var(--gw-surface-2); }
.gw-2fa-opcion.is-apagada .gw-2fa-opcion-ico { background: var(--gw-surface-3); color: var(--gw-text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   §43 · EL CALENDARIO
   Tres columnas. La de los lados no se desplazan —son el mando y el detalle,
   y si se movieran habría que buscarlas—; la del centro sí, que es lo único
   que crece con el día.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-cal {
  display: flex;
  height: calc(100vh - var(--gw-topbar-h, 56px));
  min-height: 480px;
  background: var(--gw-surface);
  overflow: hidden;
}
.gw-cal [v-cloak] { display: none; }

/* ── Izquierda ─────────────────────────────────────────────────────────── */
.gw-cal-lado {
  width: 276px; flex: 0 0 276px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
  overflow-y: auto; min-height: 0;
  padding: 14px 12px;
}
.gw-cal-lado-cab { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.gw-cal-mes  { margin: 0; font-size: var(--gw-fs-lg); font-weight: 700; color: var(--gw-text); line-height: 1.1; }
.gw-cal-anio { margin: 0; font-size: var(--gw-fs-2xs); color: var(--gw-text-2); }
.gw-cal-mes-nav { margin-left: auto; display: flex; gap: 2px; flex-shrink: 0; }

.gw-cal-mini { margin-bottom: 2px; }
.gw-cal-mini-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
}
.gw-cal-mini-dow span {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--gw-text-3, var(--gw-text-2)); text-transform: uppercase;
}
.gw-cal-mini-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gw-cal-mini-dia {
  position: relative; aspect-ratio: 1; border: 0; background: none; cursor: pointer;
  border-radius: var(--gw-r-sm, 8px);
  font-size: var(--gw-fs-2xs); font-weight: 600; color: var(--gw-text);
  display: grid; place-items: center;
}
.gw-cal-mini-dia:hover { background: var(--gw-surface-3); }
.gw-cal-mini-dia.is-fuera { color: var(--gw-text-3, var(--gw-text-2)); opacity: .45; }
.gw-cal-mini-dia.is-hoy   { color: var(--gw-brand-on-soft, var(--gw-brand-ink)); font-weight: 800; }
.gw-cal-mini-dia.is-sel   { background: var(--gw-brand); color: var(--gw-brand-ink); }
/* El punto dice «aquí hay algo». Sin él, encontrar el trabajo dentro del mes
   es ir pinchando día por día. */
.gw-cal-mini-punto {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
}
.gw-cal-mini-dia.is-sel .gw-cal-mini-punto { background: var(--gw-brand-ink) !important; }

.gw-cal-hoy { width: 100%; margin: 10px 0 14px; }

.gw-cal-filtros { border-top: 1px solid var(--gw-border); padding-top: 12px; margin-top: 4px; }
.gw-cal-filtros-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gw-cal-todos {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-brand-on-soft, var(--gw-brand-ink));
}
.gw-cal-filtro {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 6px; border-radius: var(--gw-r-sm, 8px);
}
.gw-cal-filtro:hover { background: var(--gw-surface-3); }
.gw-cal-punto { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.gw-cal-filtro-nom {
  font-size: var(--gw-fs-2xs); font-weight: 600; color: var(--gw-text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-cal-filtro-n {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--gw-text-2);
  background: var(--gw-surface-3); border-radius: 999px; padding: 1px 6px; flex-shrink: 0;
}

/* ── Centro ────────────────────────────────────────────────────────────── */
.gw-cal-centro { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gw-cal-cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--gw-border); flex-shrink: 0;
}
.gw-cal-volver { display: none; }
.gw-cal-vistas { display: flex; gap: 2px; background: var(--gw-surface-3); border-radius: var(--gw-r-md, 10px); padding: 2px; }
.gw-cal-vista {
  border: 0; background: none; cursor: pointer; padding: 5px 12px;
  border-radius: var(--gw-r-sm, 8px);
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text-2);
}
.gw-cal-vista.is-on { background: var(--gw-surface); color: var(--gw-text); box-shadow: var(--gw-sh-sm, 0 1px 2px rgba(15,23,42,.08)); }
.gw-cal-fecha-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.gw-cal-fecha-txt {
  font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Sin capitalize: en castellano pondría «Septiembre De 2026». La mayúscula
     inicial la pone el JS, que sabe dónde acaba la primera palabra. */
}
.gw-cal-cab-acc { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* La franja de «todo el día». Un cobro no vence a las nueve en punto: vence
   ese día. Colocarlo en una hora concreta sería inventarse un dato.
   Vive dentro de la rejilla —ver calendario.php—: debajo de la cabecera de
   cada día y, en la columna de las horas, su rótulo. Las dos piezas se quedan
   pegadas arriba al desplazar las horas, como la cabecera. */
.gw-cal-horas-esquina {
  position: sticky; top: 0; z-index: 3;
  height: 38px; background: var(--gw-surface); border-bottom: 1px solid var(--gw-border);
}
.gw-cal-horas-todo {
  position: sticky; top: 38px; z-index: 3;
  height: var(--gw-cal-todo-h, 0px);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px 0 4px;
  background: var(--gw-surface); border-bottom: 1px solid var(--gw-border);
  font-size: 9px; font-weight: 700; line-height: 1.15; letter-spacing: .02em;
  color: var(--gw-text-2); text-transform: uppercase; text-align: right;
  /* Dos líneas si hace falta, nunca por encima del día de al lado. */
  overflow: hidden; overflow-wrap: anywhere;
}
.gw-cal-col-todo {
  position: sticky; top: 38px; z-index: 2;
  height: var(--gw-cal-todo-h, 0px);
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px; overflow-y: auto; min-width: 0;
  background: var(--gw-surface); border-bottom: 1px solid var(--gw-border);
}
.gw-cal-col-todo .gw-cal-pastilla { flex-shrink: 0; }
.gw-cal-rejilla-marco { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }

.gw-cal-rejilla { flex: 1; overflow: auto; display: flex; min-height: 0; }
.gw-cal-horas {
  width: 62px; flex-shrink: 0;
  border-right: 1px solid var(--gw-border); background: var(--gw-surface);
  position: sticky; left: 0; z-index: 2;
}
.gw-cal-hora {
  display: block; height: 56px; padding-right: 8px; text-align: right;
  font-size: 10px; font-weight: 600; color: var(--gw-text-2);
  transform: translateY(-6px);
}
.gw-cal-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(110px, 1fr)); min-width: 0; }
.gw-cal-col { border-right: 1px solid var(--gw-border); min-width: 0; }
.gw-cal-col:last-child { border-right: 0; }
.gw-cal-col-cab {
  height: 38px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-bottom: 1px solid var(--gw-border);
  position: sticky; top: 0; background: var(--gw-surface); z-index: 1;
}
.gw-cal-col-dow { font-size: 10px; font-weight: 700; color: var(--gw-text-2); text-transform: uppercase; }
.gw-cal-col-n   { font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text); }
.gw-cal-col-cab.is-hoy .gw-cal-col-n {
  background: var(--gw-brand); color: var(--gw-brand-ink);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
}
/* z-index 0 encierra los bloques, la línea de «ahora» y los fantasmas en su
   propia capa: al desplazar las horas pasan POR DEBAJO de la cabecera y de la
   franja de todo el día, que se quedan pegadas arriba, en vez de pintarse
   encima de ellas. */
.gw-cal-col-cuerpo { position: relative; z-index: 0; cursor: crosshair; }
.gw-cal-linea { height: 56px; border-bottom: 1px solid var(--gw-border-soft, var(--gw-border)); opacity: .55; }

.gw-cal-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--gw-danger-solid, #ef4444); z-index: 3; pointer-events: none; }
.gw-cal-ahora-punto {
  position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gw-danger-solid, #ef4444);
}

/* El bloque. El color entra por --c: así un bloque no necesita una clase por
   cada tipo, y una categoría nueva no obliga a tocar el CSS. */
.gw-cal-ev {
  position: absolute; overflow: hidden; text-align: left; cursor: pointer;
  padding: 4px 7px; border: 0; border-left: 3px solid var(--c, var(--gw-brand));
  border-radius: var(--gw-r-sm, 8px);
  background: color-mix(in srgb, var(--c, #6366f1) 16%, var(--gw-surface));
  color: var(--gw-text);
  display: flex; flex-direction: column; gap: 1px;
  transition: box-shadow .12s, transform .12s;
}
.gw-cal-ev:hover { box-shadow: var(--gw-sh-md); z-index: 4; }
.gw-cal-ev.is-sel { box-shadow: var(--gw-ring); z-index: 5; }
.gw-cal-ev.is-hecho { opacity: .55; }
.gw-cal-ev.is-hecho .gw-cal-ev-t { text-decoration: line-through; }
.gw-cal-ev-h { font-size: 10px; font-weight: 700; color: var(--gw-text-2); }
.gw-cal-ev-t {
  font-size: var(--gw-fs-2xs); font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-cal-ev-c {
  font-size: 10px; color: var(--gw-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Vista de mes ──────────────────────────────────────────────────────── */
.gw-cal-mes-grid { flex: 1; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.gw-cal-mes-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--gw-border); position: sticky; top: 0;
  background: var(--gw-surface); z-index: 1;
}
.gw-cal-mes-dow span {
  padding: 7px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--gw-text-2); text-align: center;
}
.gw-cal-mes-celdas { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, 1fr); }
.gw-cal-mes-celda {
  border-right: 1px solid var(--gw-border); border-bottom: 1px solid var(--gw-border);
  padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: crosshair;
}
.gw-cal-mes-celda.is-fuera { background: var(--gw-surface-2); }
.gw-cal-mes-celda.is-fuera .gw-cal-mes-n { opacity: .4; }
.gw-cal-mes-n { font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text); padding: 1px 3px; }
.gw-cal-mes-celda.is-hoy .gw-cal-mes-n {
  background: var(--gw-brand); color: var(--gw-brand-ink);
  border-radius: 999px; width: 20px; height: 20px; display: grid; place-items: center;
}
.gw-cal-pastilla {
  display: flex; align-items: center; gap: 4px; width: 100%; text-align: left;
  border: 0; cursor: pointer; padding: 2px 6px; border-radius: var(--gw-r-sm, 8px);
  background: color-mix(in srgb, var(--c, #6366f1) 18%, var(--gw-surface));
  border-left: 3px solid var(--c, var(--gw-brand));
  font-size: 10px; font-weight: 600; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-cal-pastilla.is-hecho { opacity: .55; text-decoration: line-through; }
.gw-cal-pastilla-h { font-weight: 700; color: var(--gw-text-2); flex-shrink: 0; }
.gw-cal-mas-n { font-size: 10px; font-weight: 700; color: var(--gw-text-2); padding-left: 6px; }

.gw-cal-cargando {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: 999px; padding: 5px 14px; box-shadow: var(--gw-sh-md);
  font-size: var(--gw-fs-2xs); font-weight: 600; color: var(--gw-text-2);
}

/* ── Derecha ───────────────────────────────────────────────────────────── */
.gw-cal-detalle {
  width: 300px; flex: 0 0 300px;
  border-left: 1px solid var(--gw-border); background: var(--gw-surface-2);
  overflow-y: auto; min-height: 0; padding: 14px;
}
.gw-cal-det-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gw-cal-det-tit { margin: 0 0 4px; font-size: var(--gw-fs-lg); font-weight: 700; color: var(--gw-text); line-height: 1.25; }
.gw-cal-det-con {
  display: flex; align-items: center; gap: 5px; margin: 0 0 12px;
  font-size: var(--gw-fs-2xs); color: var(--gw-text-2);
}
.gw-cal-det-con svg, .gw-cal-det-con i[data-lucide] { width: 13px; height: 13px; flex-shrink: 0; }
.gw-cal-det-monto {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--gw-border);
}
.gw-cal-det-rot { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--gw-text-2); }
.gw-cal-det-val { margin-left: auto; font-size: var(--gw-fs-lg); font-weight: 800; color: var(--gw-text); }
.gw-cal-det-caja {
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg, 12px); padding: 10px 12px; margin-bottom: 12px;
}
.gw-cal-det-hora, .gw-cal-det-dia {
  display: flex; align-items: center; gap: 7px; margin: 0 0 4px;
  font-size: var(--gw-fs-2xs); color: var(--gw-text);
}
.gw-cal-det-hora { font-weight: 700; }
.gw-cal-det-hora span { font-weight: 500; color: var(--gw-text-2); margin-left: auto; }
.gw-cal-det-dia:last-child { margin-bottom: 0; color: var(--gw-text-2); }
.gw-cal-det-hora svg, .gw-cal-det-dia svg,
.gw-cal-det-hora i[data-lucide], .gw-cal-det-dia i[data-lucide] { width: 13px; height: 13px; flex-shrink: 0; color: var(--gw-text-2); }
.gw-cal-det-acc { margin-bottom: 12px; }
.gw-cal-det-notas {
  margin: 0 0 12px; padding: 9px 11px; border-radius: var(--gw-r-md, 10px);
  background: var(--gw-surface-3); font-size: var(--gw-fs-2xs); line-height: 1.5; color: var(--gw-text);
  white-space: pre-wrap; word-break: break-word;
}
.gw-cal-det-bloque { margin-bottom: 12px; }
.gw-cal-det-gente { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.gw-cal-det-txt { margin: 3px 0 0; font-size: var(--gw-fs-2xs); color: var(--gw-text); }
.gw-cal-det-pie { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.gw-cal-prox {
  display: flex; gap: 9px; width: 100%; text-align: left; align-items: stretch;
  border: 0; background: none; cursor: pointer; padding: 7px 6px;
  border-radius: var(--gw-r-md, 10px);
}
.gw-cal-prox:hover { background: var(--gw-surface-3); }
.gw-cal-prox-barra { width: 3px; border-radius: 3px; flex-shrink: 0; }
.gw-cal-prox-tit {
  display: block; font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-cal-prox-meta {
  display: block; font-size: 10px; color: var(--gw-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── En el móvil ───────────────────────────────────────────────────────────
   Tres columnas de 280 px no caben en 375. Se turnan, con una barra abajo
   para pasar de una a otra: es lo mismo que hace el chat. */
.gw-cal-movil { display: none; }
@media (max-width: 900px) {
  .gw-cal { flex-direction: column; height: calc(100vh - var(--gw-topbar-h) - var(--gw-mobilenav-total)); }
  @supports (height: 100dvh) { .gw-cal { height: calc(100dvh - var(--gw-topbar-h) - var(--gw-mobilenav-total)); } }
  .gw-cal-lado, .gw-cal-detalle { width: 100%; flex: 1 1 auto; border: 0; }
  .gw-cal-lado.is-oculto, .gw-cal-centro.is-oculto, .gw-cal-detalle.is-oculto { display: none; }
  .gw-cal-volver { display: inline-flex; }
  .gw-cal-nueva-txt { display: none; }
  .gw-cal-movil {
    display: flex; flex-shrink: 0;
    border-top: 1px solid var(--gw-border); background: var(--gw-surface);
  }
  .gw-cal-movil button {
    flex: 1; border: 0; background: none; cursor: pointer; padding: 8px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; color: var(--gw-text-2);
  }
  .gw-cal-movil button.is-on { color: var(--gw-brand-on-soft, var(--gw-brand-ink)); }
  /* Clase doblada y el elemento nombrado, como el resto del archivo: el CDN
     de Tailwind se carga DESPUÉS de esta hoja, así que una regla de una sola
     clase pierde. Y hay que dimensionar el <svg> además del <i>, porque Lucide
     mete el svg DENTRO del <i> y sin medidas propias sale de 1×1. */
  .gw-cal-movil.gw-cal-movil svg,
  .gw-cal-movil.gw-cal-movil i[data-lucide] { width: 17px; height: 17px; flex-shrink: 0; }
}

.gw-cal-fallo { margin: 8px 14px 0; }

/* La fecha de una tarea del lead. Discreta cuando no la tiene —es opcional— y
   con color cuando ya pasó, que es cuando hay que mirarla. */
.gw-tarea-fecha {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: 2px 7px; border-radius: var(--gw-r-pill, 999px);
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text-3, var(--gw-text-2));
}
.gw-tarea-fecha:hover { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-tarea-fecha.is-puesta { background: var(--gw-surface-3); color: var(--gw-text-2); }
.gw-tarea-fecha.is-tarde  { background: var(--gw-danger-bg); color: var(--gw-danger-ink); border-color: var(--gw-danger-bd); }
.gw-tarea-fecha.gw-tarea-fecha svg,
.gw-tarea-fecha.gw-tarea-fecha i[data-lucide] { width: 12px; height: 12px; flex-shrink: 0; }
.gw-cal-fallo-det {
  display: block; margin-top: 3px;
  font-family: var(--gw-font-mono, ui-monospace, monospace);
  font-size: 10px; opacity: .8; word-break: break-word;
}

/* A quién se citó a una sala que nació del calendario. */
.gw-vc-citados { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.gw-vc-citados-rot {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--gw-text-2); margin-right: 2px;
}

/* ── Arrastrar sobre la rejilla ──────────────────────────────────────────
   La tarjeta fantasma: lo que se va a crear, mientras se arrastra. Es lo que
   convierte «pulsar y rezar» en «ver dónde lo estoy poniendo». */
.gw-cal-fantasma {
  position: absolute; left: 2%; right: 2%; z-index: 6; pointer-events: none;
  border-radius: var(--gw-r-sm, 8px);
  border: 2px dashed var(--gw-brand);
  background: var(--gw-brand-12);
  padding: 3px 7px;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.gw-cal-fantasma.is-mover {
  border-style: solid; border-color: var(--c, var(--gw-brand));
  background: color-mix(in srgb, var(--c, #6366f1) 26%, var(--gw-surface));
  box-shadow: var(--gw-sh-lg, var(--gw-sh-md));
}
.gw-cal-fantasma-h {
  font-size: 10px; font-weight: 800;
  color: var(--gw-brand-on-soft, var(--gw-brand-ink));
}
.gw-cal-fantasma.is-mover .gw-cal-fantasma-h { color: var(--gw-text); }
.gw-cal-fantasma-d {
  font-size: 10px; font-weight: 600; color: var(--gw-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* El bloque que se está moviendo se atenúa: el fantasma es el que manda. */
.gw-cal-ev.is-arrastrando { opacity: .3; }
.gw-cal-ev.is-movible { cursor: grab; }
.gw-cal-ev.is-movible:active { cursor: grabbing; }

/* El tirador de abajo, para alargar. Solo se ve al pasar por encima: una
   pestaña permanente en cada bloque llenaría la semana de ruido. */
.gw-cal-ev-tirador {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  cursor: ns-resize; opacity: 0;
}
.gw-cal-ev:hover .gw-cal-ev-tirador { opacity: 1; }
.gw-cal-ev-tirador::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 3px; background: var(--c, var(--gw-brand));
}

/* `pan-y` y no `none`: con el dedo hay que poder seguir desplazando la rejilla
   para ver más tarde en el día. El arrastre para crear es del ratón y del
   lápiz; con el dedo se toca. Ver la nota de empezarGesto(). */
.gw-cal-col-cuerpo { touch-action: pan-y; user-select: none; }
/* Los bloques también desplazan con el dedo: en un día lleno el dedo casi
   siempre cae sobre uno, y con `none` la rejilla no se movía. Para moverlo se
   mantiene pulsado (400 ms) y el JS frena el desplazamiento desde ahí. Sin el
   menú ni la lupa que el teléfono saca al mantener pulsado. */
.gw-cal-ev {
  touch-action: pan-y; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
}
/* Agarrado con el dedo: se levanta, para que se note que ya se puede mover. */
.gw-cal-ev.is-agarrado { box-shadow: var(--gw-sh-lg, var(--gw-sh-md)); transform: scale(1.03); z-index: 6; }

/* ── La agenda ──────────────────────────────────────────────────────────────
   La vista por defecto en el teléfono y en Gestwork Chat: una lista por días.
   La cabecera de cada día se queda pegada arriba mientras se desplaza: así
   nunca hay que subir para saber de qué día es la reunión que se está viendo. */
.gw-cal-agenda { flex: 1; overflow-y: auto; min-height: 0; padding: 2px 14px 18px; }
.gw-cal-ag-dia { margin-top: 8px; }
.gw-cal-ag-cab {
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: 9px 4px 6px;
  background: var(--gw-surface);
  border-bottom: 1px solid var(--gw-border-soft, var(--gw-border));
  font-size: var(--gw-fs-2xs); font-weight: 800; letter-spacing: .02em;
  color: var(--gw-text-2);
}
.gw-cal-ag-cab.is-hoy { color: var(--gw-brand-on-soft, var(--gw-brand-ink)); }
.gw-cal-ag-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; margin: 2px 0;
  border-radius: var(--gw-r-md, 10px); cursor: pointer;
}
.gw-cal-ag-fila:hover { background: var(--gw-surface-3); }
.gw-cal-ag-fila.is-sel { background: var(--gw-brand-08, var(--gw-surface-3)); box-shadow: inset 0 0 0 1px var(--gw-brand-20, var(--gw-border)); }
.gw-cal-ag-fila.is-hecho .gw-cal-ag-tit,
.gw-cal-ag-fila.is-hecho .gw-cal-ag-hora { opacity: .55; }
.gw-cal-ag-hora {
  width: 54px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.2;
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text);
  font-variant-numeric: tabular-nums;
}
.gw-cal-ag-hora small { font-size: 10px; font-weight: 600; color: var(--gw-text-2); }
.gw-cal-ag-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gw-cal-ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gw-cal-ag-tit {
  font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-cal-ag-meta {
  font-size: var(--gw-fs-2xs); color: var(--gw-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Si vas o no, de un vistazo. «Sin responder» con borde discontinuo: es lo
   único de la fila que pide que hagas algo. */
.gw-cal-ag-rsvp {
  align-self: flex-start; margin-top: 1px;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--gw-surface-3); color: var(--gw-text-2); border: 1px solid transparent;
}
.gw-cal-ag-rsvp.is-si        { background: var(--gw-success-bg); color: var(--gw-success-ink); }
.gw-cal-ag-rsvp.is-no        { background: var(--gw-danger-bg); color: var(--gw-danger-ink); }
.gw-cal-ag-rsvp.is-quizas    { background: var(--gw-amber-bg, var(--gw-surface-3)); color: var(--gw-amber-ink, var(--gw-text-2)); }
.gw-cal-ag-rsvp.is-pendiente { color: var(--gw-text); border: 1px dashed var(--gw-border); }
.gw-cal-ag-pie {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 0 4px;
}
.gw-cal-ag-hasta { font-size: var(--gw-fs-2xs); color: var(--gw-text-2); }
.gw-cal-ag-vacio { margin-top: 24px; }

/* ── Unirse ─────────────────────────────────────────────────────────────────
   Verde y grande: de diez minutos antes al final, entrar es lo único que se
   quiere hacer con una reunión. Clase doblada por el CDN de Tailwind, que se
   carga después de esta hoja. */
.gw-cal-unirse.gw-cal-unirse {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  min-height: 36px; padding: 0 14px; border-radius: var(--gw-r-md, 10px);
  background: var(--gw-success-solid, #10b981); color: #fff;
  font-size: var(--gw-fs-sm); font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px -8px var(--gw-success-solid, #10b981);
}
.gw-cal-unirse.gw-cal-unirse:hover { filter: brightness(1.06); color: #fff; }
.gw-cal-unirse.gw-cal-unirse svg,
.gw-cal-unirse.gw-cal-unirse i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.gw-cal-unirse.gw-cal-unirse-grande { display: flex; width: 100%; min-height: 46px; margin: 2px 0 12px; }
.gw-cal-unirse-cuando { font-size: var(--gw-fs-2xs); font-weight: 600; opacity: .9; }

/* ── ¿Vas a ir? y quién va ───────────────────────────────────────────────── */
.gw-cal-rsvp-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.gw-cal-rsvp-btn.gw-cal-rsvp-btn {
  min-height: 36px; border-radius: var(--gw-r-md, 10px); cursor: pointer;
  border: 1px solid var(--gw-border); background: var(--gw-surface);
  font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text);
}
.gw-cal-rsvp-btn.gw-cal-rsvp-btn:hover:not(:disabled) { background: var(--gw-surface-3); }
.gw-cal-rsvp-btn.gw-cal-rsvp-btn.is-on { background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink); }
.gw-cal-rsvp-btn.gw-cal-rsvp-btn:disabled { opacity: .6; cursor: default; }
.gw-cal-rsvp-resumen { margin: 4px 0 6px; font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text); }
.gw-cal-invitados { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gw-cal-invitado { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gw-cal-invitado-nom {
  flex: 1; min-width: 0;
  font-size: var(--gw-fs-2xs); font-weight: 600; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-cal-invitado .gw-chip { flex-shrink: 0; }

/* ── El formulario de agendar (gestwork-agendar.js): la duración ────────────
   Botones para lo de siempre y un campo de minutos para lo raro. La hora de
   fin, arriba, dice lo mismo que los dos: cambiar cualquiera mueve los otros. */
.gw-ag-dur-txt { font-weight: 600; color: var(--gw-text-2); text-transform: none; letter-spacing: 0; }
.gw-ag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gw-ag-chip.gw-ag-chip {
  min-height: 32px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gw-border); background: var(--gw-surface);
  font-size: var(--gw-fs-2xs); font-weight: 700; color: var(--gw-text);
}
.gw-ag-chip.gw-ag-chip:hover { background: var(--gw-surface-3); }
.gw-ag-chip.gw-ag-chip.is-on { background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink); }
.gw-ag-min { display: inline-flex; align-items: center; gap: 5px; font-size: var(--gw-fs-2xs); color: var(--gw-text-2); }
.gw-ag-min .gw-input.gw-input { width: 84px; }

@media (max-width: 640px) {
  .gw-cal-vista { padding: 5px 9px; }
  .gw-cal-agenda { padding: 0 10px 16px; }
  .gw-cal-ag-fila { padding: 10px 4px; gap: 8px; }
  .gw-cal-unirse.gw-cal-unirse { padding: 0 11px; }
}


/* ==========================================================================
   PUESTA EN MARCHA
   --------------------------------------------------------------------------
   La pantalla que sigue a una propuesta aceptada. Cuatro tarjetas numeradas
   —proyecto, hitos, cobro, contrato— y al lado lo que se leyó de la propuesta
   y lo que va a pasar al confirmar. Solo tokens: modo oscuro y marca solos.
   ========================================================================== */
.gw-pm-paso {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gw-brand); color: var(--gw-brand-ink);
  font-size: var(--gw-fs-xs); font-weight: 800;
}
.gw-pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gw-pm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .gw-pm-grid, .gw-pm-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.gw-pm-resumen { display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* Una cuota: concepto e importe arriba, cuándo vence debajo. */
.gw-pm-cuota {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--gw-border-soft);
  scroll-margin-top: 90px;
}
.gw-pm-cuota:last-child { border-bottom: 0; }
/* La que falta por completar se marca en el borde, sin gritar. */
.gw-pm-cuota.is-error {
  box-shadow: inset 3px 0 0 var(--gw-danger-solid);
  padding-left: 12px; border-radius: var(--gw-r-sm, 8px);
  background: var(--gw-danger-bg);
}
.gw-pm-importe { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.gw-pm-importe strong { display: block; font-size: var(--gw-fs-md); font-weight: 800; color: var(--gw-text); }
.gw-pm-importe span { display: block; font-size: var(--gw-fs-2xs); color: var(--gw-text-muted); margin-top: 2px; }
.gw-pm-cuando { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.gw-pm-cuando .gw-input, .gw-pm-cuando .gw-select { width: auto; min-width: 170px; max-width: 100%; }
@media (max-width: 520px) {
  .gw-pm-cuando .gw-input, .gw-pm-cuando .gw-select { width: 100%; }
}

/* Un hito: casilla, nombre y fecha. */
.gw-pm-hito {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 170px; gap: 10px;
  align-items: start; padding: 8px 0; border-bottom: 1px solid var(--gw-border-soft);
}
.gw-pm-hito:last-child { border-bottom: 0; }
.gw-pm-hito > input[type="checkbox"] { margin-top: 12px; }
.gw-pm-hito.is-fuera { opacity: .6; }
@media (max-width: 560px) {
  .gw-pm-hito { grid-template-columns: auto minmax(0, 1fr); }
  .gw-pm-hito .gw-pm-hito-fecha { grid-column: 2; }
}
.gw-pm-origen {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: var(--gw-fs-2xs); color: var(--gw-text-muted);
}
.gw-pm-origen svg, .gw-pm-origen i[data-lucide] { width: 12px; height: 12px; flex-shrink: 0; }

/* Lo que se leyó, con la frase de la que salió. */
.gw-pm-pista { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gw-border-soft); min-width: 0; }
.gw-pm-pista:last-child { border-bottom: 0; }
.gw-pm-pista > svg, .gw-pm-pista > i[data-lucide] {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--gw-brand-on-soft);
}
.gw-pm-frase {
  display: block; margin-top: 3px;
  font-size: var(--gw-fs-2xs); line-height: 1.45; color: var(--gw-text-muted); font-style: italic;
  overflow-wrap: anywhere;
}

.gw-pm-consecuencias { list-style: none; margin: 0; padding: 0; }
.gw-pm-consecuencias li {
  display: flex; gap: 8px; padding: 5px 0;
  font-size: var(--gw-fs-sm); line-height: 1.45; color: var(--gw-text-2);
}
.gw-pm-consecuencias svg, .gw-pm-consecuencias i[data-lucide] {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--gw-brand-on-soft);
}
@media (min-width: 1024px) {
  .gw-pm-lado { position: sticky; top: 16px; }
}


/* ==========================================================================
   EL CAMINO DEL PROYECTO
   --------------------------------------------------------------------------
   De la propuesta aceptada al trabajo en marcha, paso a paso. Hecho = punto
   lleno; lo que toca = anillo; lo que espera a otro (la firma, el pago) =
   borde discontinuo, para que se lea que no depende de nosotros.
   ========================================================================== */
.gw-camino { list-style: none; margin: 0; padding: 0; }
.gw-camino-paso {
  position: relative;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px;
  align-items: start; padding: 8px 0;
}
.gw-camino-paso::before {
  content: ''; position: absolute; left: 13px; top: 36px; bottom: -8px; width: 2px;
  background: var(--gw-border);
}
.gw-camino-paso:last-child::before { display: none; }
.gw-camino-paso.is-hecho::before { background: var(--gw-brand); }
.gw-camino-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--gw-border-strong); background: var(--gw-surface); color: var(--gw-text-muted);
}
.gw-camino-dot svg, .gw-camino-dot i[data-lucide] { width: 13px; height: 13px; }
.gw-camino-paso.is-hecho .gw-camino-dot { background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink); }
.gw-camino-paso.is-actual .gw-camino-dot { border-color: var(--gw-brand); color: var(--gw-brand-on-soft); box-shadow: 0 0 0 4px var(--gw-brand-20); }
.gw-camino-paso.is-espera .gw-camino-dot { border-style: dashed; }
.gw-camino-titulo { display: block; font-size: var(--gw-fs-sm); font-weight: 700; color: var(--gw-text); line-height: 1.3; }
.gw-camino-paso.is-pendiente .gw-camino-titulo { color: var(--gw-text-muted); font-weight: 600; }
.gw-camino-detalle { display: block; margin-top: 2px; font-size: var(--gw-fs-2xs); line-height: 1.45; color: var(--gw-text-muted); overflow-wrap: anywhere; }
.gw-camino-paso > .gw-btn { margin-top: 1px; }
@media (max-width: 560px) {
  .gw-camino-paso { grid-template-columns: 28px minmax(0, 1fr); }
  .gw-camino-paso > .gw-btn { grid-column: 2; justify-self: start; }
}

/* ── La ficha del proyecto ────────────────────────────────────────────────────
   Rótulo arriba, dato debajo y, si hace falta, una línea de contexto: «Faltan
   12 d», «Aceptada el…». Se reparte solo en tantas columnas como quepan. */
.gw-ficha-grid {
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.gw-ficha-grid > div { min-width: 0; }
.gw-ficha-v {
  display: block; margin-top: 3px;
  font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); line-height: 1.3;
  overflow-wrap: anywhere;
}
.gw-ficha-s { display: block; margin-top: 2px; font-size: var(--gw-fs-xs); color: var(--gw-text-muted); overflow-wrap: anywhere; }
.gw-ficha-s.is-negativo { color: var(--gw-rose-ink); font-weight: 650; }
.gw-atajos { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pares rótulo · valor, apretados: las condiciones del contrato en la ficha. */
.gw-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.gw-kv dt, .gw-kv dd {
  margin: 0; padding: 7px 0; border-bottom: 1px solid var(--gw-border-soft);
  font-size: var(--gw-fs-sm); line-height: 1.35;
}
.gw-kv dt { color: var(--gw-text-muted); }
.gw-kv dd { color: var(--gw-text); font-weight: 700; text-align: right; padding-left: 12px; font-variant-numeric: tabular-nums; }
.gw-kv dt:last-of-type, .gw-kv dd:last-of-type { border-bottom: 0; }

/* Lo resaltado dentro de un aviso va en el color del aviso. En contrato.php el
   cuerpo del contrato se pinta con su propia hoja de estilos, que pone los
   <strong> en tinta de papel: sin esto, «No refleja los últimos cambios» salía
   casi negro sobre el ámbar oscuro del modo oscuro. */
.gw-alert strong, .gw-alert b { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   §40 · GESTWORK COMO APP
   ───────────────────────────────────────────────────────────────────────────
   Lo que hace que, instalada en la pantalla de inicio, se sienta una app y no
   una web metida en una ventana.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El cuerpo mide lo que se ve. h-screen es 100vh, que en Safari incluye la
   barra de herramientas: el final de cada pantalla quedaba detrás de ella. */
@supports (height: 100dvh) {
  body.gw-ui.h-screen { height: 100dvh; }
}

/* Nada de rebotes ni de «tirar para recargar» del navegador dentro de la app:
   cada zona con scroll se desplaza sola. */
@media (display-mode: standalone) {
  html, body.gw-ui { overscroll-behavior: none; }
}

/* La hoja inferior se puede arrastrar hacia abajo para cerrarla (ver
   gestwork-modal.js): mientras se arrastra no anima, y al soltar vuelve. */
@media (max-width: 640px) {
  .gw-modal.is-arrastrando { animation: none; transition: none; }
  .gw-modal.is-cerrada { animation: none !important; }
  .gw-modal.is-soltando { transition: transform .22s var(--gw-ease); }
  .gw-modal-head { touch-action: none; }
  .gw-modal-center .gw-modal-head, .gw-drawer .gw-modal-head { touch-action: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §41 · CONFIRMAR LA FIRMA (firma_confirmar.php)
   ───────────────────────────────────────────────────────────────────────────
   La página a la que lleva el enlace del correo. Un solo sello animado cambia
   de forma según el paso: la firma que espera, el aro que gira mientras se
   confirma, el visto que se dibuja con ondas y chispas cuando sale bien, y el
   aviso que se sacude cuando no. Es pública y sin preferencias guardadas, así
   que sigue el tema oscuro del teléfono (html.gw-fx-oscuro).
   ═══════════════════════════════════════════════════════════════════════════ */
.gw-fx {
  margin: 0; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: calc(28px + var(--gw-safe-top)) 16px calc(28px + var(--gw-safe-bottom));
  background:
    radial-gradient(900px 540px at 50% -12%, rgb(var(--p-rgb, 176 229 17) / .32), transparent 62%),
    radial-gradient(700px 420px at 50% 112%, rgb(var(--p-rgb, 176 229 17) / .12), transparent 60%),
    var(--gw-bg);
  font-family: var(--gw-font); color: var(--gw-text);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
/* Esta página no carga Tailwind, y sin su reinicio un enlace con width:100%
   le suma su relleno: el botón «Ver el documento» se salía de la tarjeta. */
.gw-fx, .gw-fx *, .gw-fx *::before, .gw-fx *::after { box-sizing: border-box; }
.gw-fx-marca { display: flex; align-items: center; gap: 10px; color: var(--gw-text); animation: gw-fx-aparece .5s var(--gw-ease) both; }
.gw-fx-marca-iso { width: 34px; height: 28px; background: var(--p-color, #b0e511);
  -webkit-mask: url('../img/iconogestwork.svg') center / contain no-repeat; mask: url('../img/iconogestwork.svg') center / contain no-repeat; }
.gw-fx-marca-letras { width: 118px; height: 19px; background: currentColor;
  -webkit-mask: url('../img/letrasgestwork.svg') left center / contain no-repeat; mask: url('../img/letrasgestwork.svg') left center / contain no-repeat; }

.gw-fx-tarjeta {
  position: relative; width: 100%; max-width: 430px; box-sizing: border-box;
  padding: 34px 26px 24px; text-align: center;
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: 28px; box-shadow: var(--gw-sh-xl);
  animation: gw-fx-sube .6s var(--gw-ease) both;
}
@keyframes gw-fx-sube { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gw-fx-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Los pasos: solo se ve el del estado actual. «exito» enseña el de «hecho»
   con la animación completa; «hecho» a secas, quieto. */
.gw-fx-paso { display: none; }
.gw-fx[data-estado="confirmar"]   [data-paso="confirmar"],
.gw-fx[data-estado="confirmando"] [data-paso="confirmando"],
.gw-fx[data-estado="exito"]       [data-paso="hecho"],
.gw-fx[data-estado="hecho"]       [data-paso="hecho"],
.gw-fx[data-estado="error"]       [data-paso="error"] { display: block; }

/* ── El sello ─────────────────────────────────────────────────────────── */
.gw-fx-icono { position: relative; width: 128px; height: 128px; margin: 0 auto 18px; }
.gw-fx-svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.gw-fx-pista   { fill: none; stroke: var(--gw-border); stroke-width: 5; }
.gw-fx-aro     { fill: none; stroke: var(--p-color, #b0e511); stroke-width: 5; stroke-linecap: round;
                 stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 60px 60px; transform: rotate(-90deg); }
.gw-fx-relleno { fill: var(--p-color, #b0e511); transform-origin: 60px 60px; transform: scale(0); }
.gw-fx-check   { fill: none; stroke: var(--t-p-color, #0b0b0b); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;
                 stroke-dasharray: 1; stroke-dashoffset: 1; }
.gw-fx-firma, .gw-fx-signo { display: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gw-fx-firma { stroke: var(--gw-text); stroke-width: 4; }
.gw-fx-signo { stroke: var(--gw-rose-ink); stroke-width: 8; }
.gw-fx-onda { position: absolute; inset: 10px; border-radius: 50%; border: 2px solid rgb(var(--p-rgb, 176 229 17) / .55); opacity: 0; z-index: 1; }
.gw-fx-chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; }
.gw-fx-chispas i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
                   background: var(--p-color, #b0e511); opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
.gw-fx-chispas i:nth-child(3n)   { width: 6px; height: 6px; left: -3px; top: -3px; background: var(--gw-text); }
.gw-fx-chispas i:nth-child(4n+1) { border-radius: 2px; }
.gw-fx-chispas i:nth-child(1)  { --a: 0deg;   --d: 74px; }
.gw-fx-chispas i:nth-child(2)  { --a: 36deg;  --d: 86px; }
.gw-fx-chispas i:nth-child(3)  { --a: 72deg;  --d: 70px; }
.gw-fx-chispas i:nth-child(4)  { --a: 108deg; --d: 90px; }
.gw-fx-chispas i:nth-child(5)  { --a: 144deg; --d: 76px; }
.gw-fx-chispas i:nth-child(6)  { --a: 180deg; --d: 84px; }
.gw-fx-chispas i:nth-child(7)  { --a: 216deg; --d: 72px; }
.gw-fx-chispas i:nth-child(8)  { --a: 252deg; --d: 88px; }
.gw-fx-chispas i:nth-child(9)  { --a: 288deg; --d: 74px; }
.gw-fx-chispas i:nth-child(10) { --a: 324deg; --d: 82px; }

/* Confirmar: la firma espera dentro de un círculo suave que respira */
.gw-fx[data-estado="confirmar"] .gw-fx-aro     { stroke-dashoffset: 0; opacity: .35; }
.gw-fx[data-estado="confirmar"] .gw-fx-relleno { transform: scale(1); fill: rgb(var(--p-rgb, 176 229 17) / .16); }
.gw-fx[data-estado="confirmar"] .gw-fx-firma   { display: inline; }
.gw-fx[data-estado="confirmar"] .gw-fx-firma path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gw-fx-traza 1.1s cubic-bezier(.65, 0, .35, 1) .3s forwards; }
.gw-fx[data-estado="confirmar"] .gw-fx-firma path + path { animation-delay: 1.2s; animation-duration: .4s; }
.gw-fx[data-estado="confirmar"] .gw-fx-icono   { animation: gw-fx-flota 3.6s ease-in-out 1.4s infinite; }

/* Confirmando: el aro gira */
.gw-fx[data-estado="confirmando"] .gw-fx-aro { stroke-dasharray: .22 1; stroke-dashoffset: 0; animation: gw-fx-gira 1s linear infinite; }
@keyframes gw-fx-gira { to { transform: rotate(270deg); } }

/* Éxito: el aro se cierra, el círculo late, el visto se dibuja, ondas y chispas */
.gw-fx[data-estado="exito"] .gw-fx-aro     { animation: gw-fx-traza .55s cubic-bezier(.65, 0, .35, 1) forwards; }
.gw-fx[data-estado="exito"] .gw-fx-relleno { animation: gw-fx-late .55s cubic-bezier(.2, 1.5, .4, 1) .38s forwards; }
.gw-fx[data-estado="exito"] .gw-fx-check   { animation: gw-fx-traza .42s cubic-bezier(.65, 0, .35, 1) .66s forwards; }
.gw-fx[data-estado="exito"] .gw-fx-onda    { animation: gw-fx-onda 1.25s ease-out .5s; }
.gw-fx[data-estado="exito"] .gw-fx-onda + .gw-fx-onda { animation-delay: .72s; }
.gw-fx[data-estado="exito"] .gw-fx-chispas i { animation: gw-fx-chispa .9s cubic-bezier(.15, .8, .3, 1) .62s forwards; }
.gw-fx[data-estado="exito"] .gw-fx-icono   { animation: gw-fx-flota 3.6s ease-in-out 1.6s infinite; }

/* Hecho (volver a abrir un enlace ya usado): el visto, quieto */
.gw-fx[data-estado="hecho"] .gw-fx-aro     { stroke-dashoffset: 0; }
.gw-fx[data-estado="hecho"] .gw-fx-relleno { transform: scale(1); }
.gw-fx[data-estado="hecho"] .gw-fx-check   { stroke-dashoffset: 0; }

/* Error: aro rosa, el signo, una sacudida */
.gw-fx[data-estado="error"] .gw-fx-aro     { stroke: var(--gw-rose-ink); stroke-dashoffset: 0; }
.gw-fx[data-estado="error"] .gw-fx-relleno { fill: var(--gw-rose-bg); transform: scale(1); }
.gw-fx[data-estado="error"] .gw-fx-check   { display: none; }
.gw-fx[data-estado="error"] .gw-fx-signo   { display: inline; }
.gw-fx[data-estado="error"] .gw-fx-icono   { animation: gw-fx-sacude .5s ease .2s; }

@keyframes gw-fx-traza  { to { stroke-dashoffset: 0; } }
@keyframes gw-fx-late   { 0% { transform: scale(.2); } 70% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes gw-fx-onda   { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes gw-fx-chispa {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}
@keyframes gw-fx-flota  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes gw-fx-sacude { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* ── Textos ───────────────────────────────────────────────────────────── */
.gw-fx-titulo { margin: 0 0 8px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--gw-text); overflow-wrap: anywhere; }
.gw-fx-texto  { margin: 0 auto; max-width: 340px; font-size: 14px; line-height: 1.55; color: var(--gw-text-2); overflow-wrap: anywhere; }
.gw-fx-datos  { margin: 20px 0 0; padding: 4px 16px; text-align: left; background: var(--gw-surface-2, var(--gw-bg)); border: 1px solid var(--gw-border); border-radius: 16px; }
.gw-fx-dato   { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 13px; }
.gw-fx-dato + .gw-fx-dato { border-top: 1px solid var(--gw-border); }
.gw-fx-dato dt { color: var(--gw-text-3); flex-shrink: 0; }
.gw-fx-dato dd { margin: 0; color: var(--gw-text); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.gw-fx-verificado { display: inline-flex; align-items: center; gap: 5px; color: var(--gw-green-ink); }
.gw-fx-verificado svg { width: 14px; height: 14px; flex-shrink: 0; }
.gw-fx-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.gw-fx-acciones .gw-btn { width: 100%; justify-content: center; }
.gw-fx-confirmar.gw-fx-confirmar { --gw-btn-h: 52px; font-size: 15px; font-weight: 700; }
.gw-fx-nofui {
  align-self: center; margin-top: 2px; padding: 6px 10px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--gw-text-3); text-decoration: underline; text-underline-offset: 3px;
}
.gw-fx-nofui:hover { color: var(--gw-text); }
.gw-fx-nofui[hidden], .gw-fx-anular[hidden] { display: none; }
.gw-fx-anular { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--gw-rose-bg); color: var(--gw-rose-ink); font-size: 13px; line-height: 1.45; }
.gw-fx-anular p { margin: 0 0 10px; }
.gw-fx-anular-botones { display: flex; gap: 8px; justify-content: center; }
.gw-fx-legal { margin: 16px 0 0; font-size: 11px; line-height: 1.5; color: var(--gw-text-muted); }
.gw-fx-pie { font-size: 11px; color: var(--gw-text-muted); animation: gw-fx-aparece .5s var(--gw-ease) 1.1s both; }

/* Los textos entran detrás del sello */
.gw-fx-paso .gw-fx-titulo  { animation: gw-fx-aparece .5s var(--gw-ease) .35s both; }
.gw-fx-paso .gw-fx-texto   { animation: gw-fx-aparece .5s var(--gw-ease) .45s both; }
.gw-fx-paso .gw-fx-datos   { animation: gw-fx-aparece .5s var(--gw-ease) .55s both; }
.gw-fx-paso .gw-fx-acciones{ animation: gw-fx-aparece .5s var(--gw-ease) .65s both; }
.gw-fx-paso .gw-fx-legal   { animation: gw-fx-aparece .5s var(--gw-ease) .75s both; }
.gw-fx[data-estado="exito"] .gw-fx-paso .gw-fx-titulo  { animation-delay: .7s; }
.gw-fx[data-estado="exito"] .gw-fx-paso .gw-fx-texto   { animation-delay: .8s; }
.gw-fx[data-estado="exito"] .gw-fx-paso .gw-fx-datos   { animation-delay: .9s; }
.gw-fx[data-estado="exito"] .gw-fx-paso .gw-fx-acciones{ animation-delay: 1s; }
.gw-fx[data-estado="exito"] .gw-fx-paso .gw-fx-legal   { animation-delay: 1.1s; }

html.gw-fx-oscuro .gw-fx { --gw-bg: #0b0f17; --gw-surface: #121826; --gw-surface-2: #0f1522; --gw-border: #1f2837;
  --gw-text: #e8edf5; --gw-text-2: #b3bdcc; --gw-text-3: #8d98aa; --gw-text-muted: #6b7689;
  --gw-green-ink: #4ade80; --gw-rose-ink: #fb7185; --gw-rose-bg: #3a1620; }

@media (max-width: 480px) {
  .gw-fx { justify-content: flex-start; padding-top: calc(34px + var(--gw-safe-top)); }
  .gw-fx-tarjeta { padding: 30px 20px 22px; border-radius: 24px; }
  .gw-fx-titulo { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-fx *, .gw-fx *::before, .gw-fx *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .gw-fx-onda, .gw-fx-chispas { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §42 · ESPERANDO LA CONFIRMACIÓN (gestwork-verificacion.js)
   El panel «Revisa tu correo» que se queda en la pantalla del documento
   mientras se toca el enlace. El sobre flota con una onda; al confirmarse se
   convierte en un visto que se dibuja.
   ═══════════════════════════════════════════════════════════════════════════ */
.gw-fv { text-align: center; padding: 6px 2px 2px; }
.gw-fv-ico {
  position: relative; width: 72px; height: 72px; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gw-brand-20); color: var(--gw-brand-on-soft);
}
.gw-fv-ico > span:not(.gw-fv-onda) { display: none; }
.gw-fv-ico svg { width: 32px; height: 32px; }
.gw-fv[data-estado="esperando"] .gw-fv-ico-sobre { display: inline-flex; animation: gw-fx-flota 2.8s ease-in-out infinite; }
.gw-fv[data-estado="confirmada"] .gw-fv-ico { background: var(--p-color, #b0e511); color: var(--t-p-color, #0b0b0b); animation: gw-fx-late .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.gw-fv[data-estado="confirmada"] .gw-fv-ico-visto { display: inline-flex; }
.gw-fv[data-estado="confirmada"] .gw-fv-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gw-fx-traza .42s cubic-bezier(.65, 0, .35, 1) .25s forwards; }
.gw-fv[data-estado="vencida"] .gw-fv-ico,
.gw-fv[data-estado="anulada"] .gw-fv-ico,
.gw-fv[data-estado="reemplazada"] .gw-fv-ico { background: var(--gw-amber-bg); color: var(--gw-amber-ink); }
.gw-fv[data-estado="vencida"] .gw-fv-ico-alerta,
.gw-fv[data-estado="anulada"] .gw-fv-ico-alerta,
.gw-fv[data-estado="reemplazada"] .gw-fv-ico-alerta { display: inline-flex; }
.gw-fv-onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--p-rgb, 176 229 17) / .5); opacity: 0; }
.gw-fv[data-estado="esperando"] .gw-fv-onda { animation: gw-fx-onda 2.4s ease-out infinite; }
.gw-fv[data-estado="confirmada"] .gw-fv-onda { animation: gw-fx-onda 1.1s ease-out .2s; }

.gw-fv-titulo { margin: 0 0 6px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; color: var(--gw-text); }
.gw-fv-texto  { margin: 0 auto; max-width: 380px; font-size: 13.5px; line-height: 1.55; color: var(--gw-text-2); overflow-wrap: anywhere; }
.gw-fv-texto strong { color: var(--gw-text); }
.gw-fv-estado { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--gw-surface-2, var(--gw-bg)); font-size: 12px; color: var(--gw-text-3); }
.gw-fv:not([data-estado="esperando"]) .gw-fv-estado { display: none; }
.gw-fv-giro { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gw-border-strong); border-top-color: var(--gw-brand-on-soft); animation: gw-fx-gira-simple .8s linear infinite; }
@keyframes gw-fx-gira-simple { to { transform: rotate(360deg); } }
.gw-fv-nota { margin: 10px auto 0; max-width: 380px; font-size: 11.5px; line-height: 1.5; color: var(--gw-text-muted); }
.gw-fv-nota:empty { display: none; }
.gw-fv-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.gw-fv[data-estado="confirmada"] .gw-fv-acciones { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gw-fv *, .gw-fv *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §45 · EL CUADRITO DE INICIALES DE UN CLIENTE
   Dos letras y un color que sale del nombre (window.gwTono, el mismo cálculo
   de los leads): el mismo cliente se reconoce igual en Clientes, en Cobros y
   en su ficha. Aquí se decide el color a partir del tono, con el contraste
   medido: tinta al 26 % de luz sobre fondo al 93 %, que cumple AA incluso en
   los tonos amarillos, que son los más claros. Con logo, el logo sobre blanco.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-mono-av {
  --h: 210;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--gw-r-md);
  background: hsl(var(--h) 70% 93%);
  color: hsl(var(--h) 55% 26%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 85%);
  font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1;
  overflow: hidden; user-select: none;
}
.gw-mono-av.is-sm { width: 32px; height: 32px; font-size: 12px; border-radius: var(--gw-r-sm); }
.gw-mono-av.is-lg { width: 52px; height: 52px; font-size: 18px; border-radius: var(--gw-r-lg); }
.gw-mono-av.is-xl { width: 76px; height: 76px; font-size: 26px; border-radius: var(--gw-r-xl); }
/* El aire alrededor del logo en em y no en %: un padding en porcentaje se
   mide contra el ANCHO DEL PADRE (la tarjeta entera), no contra el cuadrito,
   y dejaba el logo a cero píxeles. Con em crece con cada tamaño (.is-*). */
.gw-mono-av.tiene-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--gw-border); padding: .34em; }
.gw-mono-av.gw-mono-av > img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.dark-mode .gw-mono-av {
  background: hsl(var(--h) 32% 22%);
  color: hsl(var(--h) 80% 84%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 28% 31%);
}
/* El logo siempre sobre blanco: casi todos están pensados para eso, y un logo
   oscuro sobre el fondo oscuro desaparecería. */
body.dark-mode .gw-mono-av.tiene-logo { background: #fff; box-shadow: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   §46 · COBROS (cobros.php)
   Tres bloques en el orden en que se trabaja: lo que toca hacer, las cifras y
   todos los documentos. Los colores de los gráficos se validaron con el
   método de visualización (rampa ordinal de un solo tono para lo vencido,
   que en oscuro se invierte para no hundirse en el fondo; cobrado en azul, lo
   emitido en gris de contexto). El texto nunca lleva el color del dato.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-cob-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; min-width: 0; }
.gw-cob-tit { margin: 0; font-size: var(--gw-fs-xl); font-weight: 700; letter-spacing: var(--gw-tracking-tight); color: var(--gw-text); }
.gw-cob-sub { margin: 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); min-width: 0; }
.gw-cob-cab .gw-segment { align-self: center; }

/* ── Lo que toca hacer ───────────────────────────────────────────────────── */
.gw-cob-tareas { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .gw-cob-tareas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gw-cob-tarea { display: flex; flex-direction: column; min-width: 0; }
.gw-cob-tarea-cab { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; min-width: 0; }
.gw-cob-tarea-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md); background: var(--gw-surface-3); color: var(--gw-text-3);
}
.gw-cob-tarea-ico.gw-cob-tarea-ico svg, .gw-cob-tarea-ico.gw-cob-tarea-ico i[data-lucide] { width: 18px; height: 18px; }
.gw-cob-tarea.is-sky   .gw-cob-tarea-ico { background: var(--gw-sky-bg);   color: var(--gw-sky-ink); }
.gw-cob-tarea.is-rose  .gw-cob-tarea-ico { background: var(--gw-rose-bg);  color: var(--gw-rose-ink); }
.gw-cob-tarea.is-amber .gw-cob-tarea-ico { background: var(--gw-amber-bg); color: var(--gw-amber-ink); }
.gw-cob-tarea.is-blue  .gw-cob-tarea-ico { background: var(--gw-blue-bg);  color: var(--gw-blue-ink); }
.gw-cob-tarea-tit { margin: 0; font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text); }
.gw-cob-tarea-sub { margin: 2px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-cob-tarea-n {
  margin-left: auto; flex-shrink: 0; min-width: 30px; height: 26px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill); background: var(--gw-surface-3); color: var(--gw-text);
  font-size: var(--gw-fs-md); font-weight: 700; font-variant-numeric: tabular-nums;
}
.gw-cob-tarea.is-rose .gw-cob-tarea-n { background: var(--gw-rose-bg); color: var(--gw-rose-ink); }
.gw-cob-tarea.is-sky  .gw-cob-tarea-n { background: var(--gw-sky-bg);  color: var(--gw-sky-ink); }
.gw-cob-tarea-lista { list-style: none; margin: 0; padding: 0 8px 8px; }
.gw-cob-tarea-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px;
  padding: 8px 10px; border-top: 1px solid var(--gw-border-soft);
}
.gw-cob-tarea-abrir {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  background: none; border: 0; padding: 2px 0; margin: 0; text-align: left; cursor: pointer; color: inherit;
}
.gw-cob-tarea-abrir:hover .gw-cob-tarea-quien { text-decoration: underline; text-underline-offset: 3px; }
.gw-cob-tarea-quien { display: block; max-width: 100%; font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); }
.gw-cob-tarea-que { font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-cob-tarea-monto { font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gw-cob-tarea-vacia { margin: 0; padding: 0 18px 16px; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-cob-tarea-mas {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin: auto 18px 14px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-brand-on-soft);
}
.gw-cob-tarea-mas:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-cob-tarea-mas.gw-cob-tarea-mas svg, .gw-cob-tarea-mas.gw-cob-tarea-mas i[data-lucide] { width: 14px; height: 14px; }
.gw-cob-dias.is-malo { color: var(--gw-danger-ink); font-weight: 600; }
@media (max-width: 520px) {
  .gw-cob-tarea-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .gw-cob-tarea-fila .gw-btn { grid-column: 1 / -1; justify-self: stretch; }
}

.gw-cob-todo-bien { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.gw-cob-todo-ico {
  width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md); background: var(--gw-success-bg); color: var(--gw-success-ink);
}
.gw-cob-todo-ico.gw-cob-todo-ico svg, .gw-cob-todo-ico.gw-cob-todo-ico i[data-lucide] { width: 20px; height: 20px; }
.gw-cob-todo-tit { margin: 0; font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text); }
.gw-cob-todo-txt { margin: 2px 0 0; font-size: var(--gw-fs-md); color: var(--gw-text-3); }

/* ── Las cifras ──────────────────────────────────────────────────────────
   Importes largos («$14.759.045»): cifras proporcionales —las tabulares dejan
   huecos en los números grandes— y un cuerpo que entra en la rejilla de dos
   columnas del móvil. */
.gw-cob-cifra.gw-cob-cifra { font-size: 24px; font-variant-numeric: normal; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .gw-cob-cifra.gw-cob-cifra { font-size: 19px; }
  /* En dos columnas de móvil el rótulo va en dos líneas antes que cortado:
     «Cobrado es…» no dice qué cifra es. */
  .gw-stat:has(> .gw-cob-cifra) .gw-stat-label { white-space: normal; line-height: 1.25; }
  .gw-stat:has(> .gw-cob-cifra) .gw-stat-head { align-items: flex-start; }
}

/* La ficha de un cliente usa los mismos colores para lo cobrado (§47): el
   mismo dato se pinta igual en las dos pantallas. */
.gw-cob-panel, .gw-clf-dinero {
  --cob-cobrado: #2a78d6; --cob-emitido: #cbd5e1;
  --cob-al_dia: #0ca30c; --cob-d30: #fb7185; --cob-d60: #e11d48; --cob-d90: #be123c; --cob-d90m: #881337;
}
body.dark-mode .gw-cob-panel, body.dark-mode .gw-clf-dinero {
  --cob-cobrado: #3987e5; --cob-emitido: #445673;
  --cob-al_dia: #0ca30c; --cob-d30: #be123c; --cob-d60: #e11d48; --cob-d90: #fb7185; --cob-d90m: #fda4af;
}
.gw-cob-nada { margin: 0; padding: 8px 0; font-size: var(--gw-fs-md); color: var(--gw-text-3); }

/* La barra de antigüedad: 16 px, 2 px de fondo entre tramos, puntas redondas. */
.gw-cob-edad { display: flex; gap: 2px; height: 16px; margin: 4px 0 16px; }
.gw-cob-edad-seg { display: block; height: 100%; flex-shrink: 1; flex-basis: 0; cursor: default;
                   transition: filter var(--gw-dur-1) var(--gw-ease), transform var(--gw-dur-1) var(--gw-ease); }
.gw-cob-edad-seg:first-child { border-radius: 4px 0 0 4px; }
.gw-cob-edad-seg:last-child  { border-radius: 0 4px 4px 0; }
.gw-cob-edad-seg:only-child  { border-radius: 4px; }
.gw-cob-edad-seg:hover, .gw-cob-edad-seg:focus-visible { filter: brightness(1.12); transform: scaleY(1.18); outline: none; }
.gw-cob-edad-seg.is-al_dia, .gw-cob-muestra.is-al_dia { background: var(--cob-al_dia); }
.gw-cob-edad-seg.is-d30,    .gw-cob-muestra.is-d30    { background: var(--cob-d30); }
.gw-cob-edad-seg.is-d60,    .gw-cob-muestra.is-d60    { background: var(--cob-d60); }
.gw-cob-edad-seg.is-d90,    .gw-cob-muestra.is-d90    { background: var(--cob-d90); }
.gw-cob-edad-seg.is-d90m,   .gw-cob-muestra.is-d90m   { background: var(--cob-d90m); }
.gw-cob-muestra.is-cobrado { background: var(--cob-cobrado); }
.gw-cob-muestra.is-emitido { background: var(--cob-emitido); }
.gw-cob-muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.gw-cob-leyenda { list-style: none; margin: 0; padding: 0; }
.gw-cob-leyenda li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto 40px; align-items: center; gap: 10px;
  padding: 7px 8px; margin: 0 -8px; border-radius: var(--gw-r-sm);
  font-size: var(--gw-fs-md); color: var(--gw-text-2);
}
.gw-cob-leyenda li.is-activo { background: var(--gw-surface-2); }
.gw-cob-leyenda li.is-vacio { color: var(--gw-text-muted); }
.gw-cob-leyenda li.is-vacio .gw-cob-muestra { opacity: .45; }
.gw-cob-ley-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-cob-ley-n { font-size: var(--gw-fs-sm); color: var(--gw-text-muted); font-variant-numeric: tabular-nums; }
.gw-cob-ley-monto { font-weight: 650; color: var(--gw-text); font-variant-numeric: tabular-nums; text-align: right; }
.gw-cob-leyenda li.is-vacio .gw-cob-ley-monto { color: var(--gw-text-muted); font-weight: 500; }
.gw-cob-ley-pct { font-size: var(--gw-fs-sm); color: var(--gw-text-3); font-variant-numeric: tabular-nums; text-align: right; }

.gw-cob-ley-series { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: var(--gw-fs-sm); color: var(--gw-text-2); }
.gw-cob-ley-series > span { display: inline-flex; align-items: center; gap: 7px; }

/* El gráfico de meses se dibuja al ancho real (ver G en cobros.php). */
.gw-cob-meses { position: relative; width: 100%; min-width: 0; }
.gw-cob-meses-svg { display: block; overflow: visible; }
.gw-cob-rejilla { stroke: var(--gw-border-soft); stroke-width: 1; }
.gw-cob-base { stroke: var(--gw-border-strong); stroke-width: 1; }
.gw-cob-eje { fill: var(--gw-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.gw-cob-valor { fill: var(--gw-text-2); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gw-cob-col.is-emitido { fill: var(--cob-emitido); }
.gw-cob-col.is-cobrado { fill: var(--cob-cobrado); }
.gw-cob-hit { fill: transparent; }
.gw-cob-mes { cursor: default; outline: none; }
.gw-cob-mes.is-activo .gw-cob-hit { fill: var(--gw-surface-2); }
.gw-cob-mes:focus-visible .gw-cob-hit { fill: var(--gw-surface-2); stroke: var(--gw-brand-on-soft); stroke-width: 1.5; }
.gw-cob-globo {
  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; z-index: 2;
  min-width: 150px; padding: 8px 11px; border-radius: var(--gw-r-md);
  background: var(--gw-surface); border: 1px solid var(--gw-border); box-shadow: var(--gw-sh-pop);
}
.gw-cob-globo-tit { margin: 0 0 4px; font-size: var(--gw-fs-xs); color: var(--gw-text-3); text-transform: capitalize; }
.gw-cob-globo-fila { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); white-space: nowrap; }
.gw-cob-globo-fila strong { color: var(--gw-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.gw-cob-clave { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.gw-cob-clave.is-cobrado { background: var(--cob-cobrado); }
.gw-cob-clave.is-emitido { background: var(--cob-emitido); }
.gw-cob-tabla { width: 100%; border-collapse: collapse; font-size: var(--gw-fs-md); }
.gw-cob-tabla th, .gw-cob-tabla td { padding: 7px 4px; border-bottom: 1px solid var(--gw-border-soft); text-align: left; }
.gw-cob-tabla thead th { font-size: var(--gw-fs-xs); font-weight: 600; color: var(--gw-text-muted); text-transform: uppercase; letter-spacing: var(--gw-tracking-wide); }
.gw-cob-tabla tbody th { font-weight: 600; color: var(--gw-text-2); text-transform: capitalize; }
.gw-cob-tabla td { color: var(--gw-text); font-variant-numeric: tabular-nums; }
.gw-cob-tabla .text-right { text-align: right; }

/* Quién debe más y las cuotas que vienen: filas que llevan a su sitio. */
.gw-cob-deudores { list-style: none; margin: 0; padding: 0; }
.gw-cob-deudor {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 8px; margin: 0 -8px; border-radius: var(--gw-r-md);
  color: inherit; text-decoration: none;
}
.gw-cob-deudores li + li .gw-cob-deudor { border-top: 1px solid var(--gw-border-soft); border-radius: 0; }
a.gw-cob-deudor[href]:hover { background: var(--gw-surface-2); }
.gw-cob-deudor-nombre { display: block; font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); }
.gw-cob-deudor-sub { display: block; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-cob-deudor-monto { flex-shrink: 0; font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); font-variant-numeric: tabular-nums; }
.gw-cob-dia {
  width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--gw-r-md); background: var(--gw-surface-3); color: var(--gw-text-3);
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
}
.gw-cob-dia strong { font-size: 15px; color: var(--gw-text); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ── Todos los documentos ────────────────────────────────────────────── */
.gw-cob-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  /* En el móvil los filtros van en una fila que se desliza: en tres líneas
     empujaban la lista fuera de la pantalla. */
  .gw-cob-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -16px; padding-right: 16px;
                    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gw-cob-filtros::-webkit-scrollbar { display: none; }
  .gw-cob-filtros > .gw-chip { flex-shrink: 0; }
}
.gw-cob-fila-monto { min-width: 120px; }
@media (max-width: 640px) {
  .gw-cob-fila.gw-cob-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; }
  .gw-cob-fila .gw-row-main { grid-column: 2 / 4; }
  .gw-cob-fila-monto { grid-column: 2; grid-row: 2; min-width: 0; text-align: left; }
  .gw-cob-fila-acc { grid-column: 3; grid-row: 2; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §47 · CLIENTES (clientes.php): la cartera y la ficha
   La tarjeta responde a lo que se mira antes de llamar —quién es, cuánto
   debe, qué hay en marcha— y deja escribir o llamar sin entrar. La ficha abre
   con una cabecera que identifica al cliente y un resumen con el dinero, el
   trabajo y la actividad a la vista, sin cambiar de pestaña. La empresa lleva
   su cuadrito (§45) y la persona un círculo: de un vistazo se sabe qué es qué.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-mono-av.is-xs { width: 28px; height: 28px; font-size: 11px; border-radius: 50%; }

/* ── La cartera: estados, orden y vista ─────────────────────────────────── */
.gw-cl-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 18px; min-width: 0; }
.gw-cl-estados { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.gw-cl-estados .gw-chip { gap: 6px; padding: 5px 12px; font-size: var(--gw-fs-sm); }
.gw-cl-estados .gw-chip-n { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .75; }
.gw-cl-estados .gw-chip.is-deuda:not(.is-active) { border-color: var(--gw-rose-bd); color: var(--gw-rose-ink); }
.gw-cl-estados .gw-chip.gw-chip svg { width: 13px; height: 13px; }
.gw-cl-herr { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.gw-cl-herr .gw-select { width: auto; max-width: 200px; height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--gw-fs-md); }
@media (max-width: 640px) {
  /* Una sola fila que se desliza: en tres líneas empujaban las tarjetas. */
  .gw-cl-estados { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 0 16px 2px 0;
                   scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gw-cl-estados::-webkit-scrollbar { display: none; }
  .gw-cl-estados > * { flex-shrink: 0; }
  .gw-cl-herr { width: 100%; margin-left: 0; }
  .gw-cl-herr .gw-select { flex: 1 1 0; min-width: 0; max-width: none; }
  .gw-cl-vista { display: none; }
}

.gw-clc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }

/* ── La tarjeta de un cliente ───────────────────────────────────────────── */
.gw-clc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.gw-clc-cab { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px 16px 0; }
.gw-clc-id { flex: 1; min-width: 0; padding-top: 4px; }
/* El nombre es lo que se busca con la vista: hasta dos líneas antes de
   recortarlo, que «Clínica Dental So…» no dice de quién es la tarjeta. */
.gw-clc-enlace {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  font-size: var(--gw-fs-xl); font-weight: 650; letter-spacing: -0.012em; line-height: 1.3;
  color: var(--gw-text); text-decoration: none; outline: none;
}
/* Toda la tarjeta es el enlace: esta capa la cubre entera y los botones de
   contacto quedan por encima. Al ser un enlace de verdad se llega con el
   teclado y se puede abrir en otra pestaña. */
.gw-clc-enlace::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: var(--gw-r-xl); }
.gw-clc-enlace:focus-visible::after { box-shadow: 0 0 0 2px var(--gw-surface), 0 0 0 4px var(--gw-brand); }
.gw-clc-sub { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clc-cab > .gw-chip { flex-shrink: 0; margin-top: 5px; }

.gw-clc-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 16px 0; }
.gw-clc-r { display: block; font-size: var(--gw-fs-xs); font-weight: 500; color: var(--gw-text-3); }
.gw-clc-v {
  display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--gw-text);
}
.gw-clc-v.is-cero { font-weight: 600; color: var(--gw-text-3); }

.gw-clc-alerta {
  display: flex; align-items: center; gap: 7px; margin: 12px 16px 0; padding: 7px 10px;
  border-radius: var(--gw-r-md); background: var(--gw-danger-bg); color: var(--gw-danger-ink);
  font-size: var(--gw-fs-sm); font-weight: 600; line-height: 1.35;
}
.gw-clc-alerta.gw-clc-alerta svg { width: 14px; height: 14px; flex-shrink: 0; }

.gw-clc-trabajo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 16px 0; font-size: var(--gw-fs-sm); color: var(--gw-text-2); }
.gw-clc-trabajo > span { display: inline-flex; align-items: center; gap: 6px; }
.gw-clc-trabajo.gw-clc-trabajo svg { width: 14px; height: 14px; color: var(--gw-text-muted); }

.gw-clc-pie { margin-top: auto; padding: 14px 16px 0; }
.gw-clc-contacto { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 0; border-top: 1px solid var(--gw-border-soft); }
.gw-clc-quien { flex: 1; min-width: 0; }
.gw-clc-cnombre { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); }
.gw-clc-ccargo { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-clc-acc { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.gw-clc-meta {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0 12px;
  border-top: 1px solid var(--gw-border-soft); font-size: var(--gw-fs-xs); color: var(--gw-text-3);
}
.gw-clc-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.gw-clc-meta > span:first-child { flex: 1; }
.gw-clc-meta > span > span { overflow: hidden; text-overflow: ellipsis; }
.gw-clc-meta.gw-clc-meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.gw-clc-meta > .gw-icon-btn { position: relative; z-index: 1; margin: -6px -6px -6px 0; }
.gw-clc.is-cerrado .gw-mono-av { filter: grayscale(1); opacity: .7; }

/* La tabla lleva el mismo cuadrito, más pequeño */
.gw-cl-tabla-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gw-cl-tabla-id > div { min-width: 0; }
.gw-cl-tabla-id a { color: inherit; text-decoration: none; }
.gw-cl-tabla-id a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-cl-vencido { font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-danger-ink); }

/* ── La ficha: cabecera ─────────────────────────────────────────────────── */
.gw-clf-cab { margin: 0 0 16px; padding: 22px; }
.gw-clf-top { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.gw-clf-av { position: relative; flex-shrink: 0; }
.gw-clf-logo-btn {
  position: absolute; right: -7px; bottom: -7px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--gw-border); background: var(--gw-surface); color: var(--gw-text-2);
  box-shadow: var(--gw-sh-sm); cursor: pointer;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io), color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-clf-logo-btn:hover { background: var(--gw-surface-3); color: var(--gw-text); }
.gw-clf-logo-btn:focus-visible { outline: none; box-shadow: var(--gw-ring), var(--gw-sh-sm); }
.gw-clf-logo-btn:disabled { cursor: progress; }
.gw-clf-logo-btn.gw-clf-logo-btn svg { width: 14px; height: 14px; }
.gw-clf-av > .gw-menu { top: calc(100% + 12px); left: 0; }
.gw-clf-av.is-subiendo .gw-mono-av { opacity: .4; }
.gw-clf-av-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gw-text); }
.gw-clf-av-spin .gw-spin { width: 22px; height: 22px; }

.gw-clf-id { flex: 1; min-width: 0; }
.gw-clf-nombre {
  margin: 0; overflow-wrap: anywhere; text-wrap: balance;
  font-size: var(--gw-fs-3xl); font-weight: 700; letter-spacing: var(--gw-tracking-tight); line-height: 1.2; color: var(--gw-text);
}
.gw-clf-legal { margin: 4px 0 0; overflow-wrap: anywhere; font-size: var(--gw-fs-md); color: var(--gw-text-3); }
.gw-clf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clf-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gw-clf-meta.gw-clf-meta > span > svg { width: 14px; height: 14px; flex-shrink: 0; }
button.gw-clf-deuda { cursor: pointer; }
button.gw-clf-deuda:hover { border-color: var(--gw-danger-ink); }
.gw-clf-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; max-width: 45%; }

.gw-clf-contacto { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gw-border-soft); }
.gw-clf-quien { flex: 1; min-width: 0; }
.gw-clf-cnombre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text); }
.gw-clf-cdatos { margin: 2px 0 0; overflow-wrap: anywhere; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clf-cacc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-shrink: 0; }

@media (max-width: 720px) {
  .gw-clf-cab { padding: 16px; }
  .gw-clf-top { flex-wrap: wrap; gap: 14px 16px; }
  .gw-clf-av .gw-mono-av.is-xl { width: 60px; height: 60px; font-size: 21px; border-radius: var(--gw-r-lg); }
  .gw-clf-id { flex-basis: calc(100% - 80px); }
  .gw-clf-nombre { font-size: var(--gw-fs-2xl); }
  .gw-clf-meta { gap: 6px 12px; }
  .gw-clf-acciones { width: 100%; max-width: none; justify-content: stretch; }
  .gw-clf-acciones > .gw-btn { flex: 1 1 0; justify-content: center; }
  .gw-clf-contacto { flex-wrap: wrap; }
  .gw-clf-cacc { width: 100%; }
  .gw-clf-cacc > .gw-btn { flex: 1 1 0; justify-content: center; }
}

/* ── La ficha: el resumen ───────────────────────────────────────────────── */
.gw-clf-resumen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.gw-clf-col { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1024px) { .gw-clf-resumen { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }

/* Cuatro columnas solo si caben: la tarjeta mide su propio ancho (container
   query) y por debajo de 620 px pasa a 2 × 2. Un importe no se parte nunca:
   «$2.016.06 / 0» en dos líneas se lee como otro número. */
.gw-clf-dinero > .gw-card-body { container-type: inline-size; }
.gw-clf-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gw-clf-cifra { min-width: 0; padding: 0 16px; border-left: 1px solid var(--gw-border-soft); }
.gw-clf-cifra:first-child { padding-left: 0; border-left: 0; }
.gw-clf-cifra-r { display: flex; align-items: center; gap: 5px; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clf-cifra-r.gw-clf-cifra-r svg { width: 13px; height: 13px; flex-shrink: 0; }
.gw-clf-cifra-v {
  display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gw-text);
}
.gw-clf-cifra-v.is-cero { font-weight: 600; color: var(--gw-text-3); }
.gw-clf-cifra.is-vencido .gw-clf-cifra-r, .gw-clf-cifra.is-vencido .gw-clf-cifra-v { color: var(--gw-danger-ink); }
@container (max-width: 620px) {
  .gw-clf-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .gw-clf-cifra:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) { .gw-clf-cifra-v { font-size: 18px; } }

/* Cuánto de lo facturado ya está cobrado: una sola serie sobre su resto. */
.gw-clf-medidor { margin: 20px 0 0; }
.gw-clf-medidor-barra { display: flex; gap: 2px; height: 10px; }
.gw-clf-medidor-barra > span { display: block; height: 100%; }
.gw-clf-medidor-barra > .is-cobrado { background: var(--cob-cobrado); border-radius: 4px 0 0 4px; }
.gw-clf-medidor-barra > .is-resto { flex: 1; background: var(--cob-emitido); border-radius: 0 4px 4px 0; }
.gw-clf-medidor-barra > span:only-child { border-radius: 4px; }
.gw-clf-medidor-txt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clf-medidor-txt strong { font-weight: 650; color: var(--gw-text); }

.gw-clf-apartado { display: flex; align-items: center; gap: 8px; margin: 22px 0 6px; font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); }
.gw-clf-apartado .gw-count { margin-left: 2px; }
.gw-clf-apartado > .gw-btn, .gw-clf-apartado > a.gw-clf-ver { margin-left: auto; }
.gw-clf-ver { display: inline-flex; align-items: center; gap: 5px; font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-brand-on-soft); text-decoration: none; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.gw-clf-ver:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-clf-ver.gw-clf-ver svg { width: 14px; height: 14px; }

.gw-clf-filas { list-style: none; margin: 0; padding: 0; }
.gw-clf-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 14px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--gw-border-soft); }
.gw-clf-fila-tit { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); }
.gw-clf-fila-sub { display: block; margin-top: 1px; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clf-fila-sub.is-malo { font-weight: 600; color: var(--gw-danger-ink); }
.gw-clf-fila-monto { font-size: var(--gw-fs-md); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--gw-text); }
.gw-clf-fila-acc { display: flex; align-items: center; gap: 2px; }
@media (max-width: 520px) {
  .gw-clf-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .gw-clf-fila-monto { grid-column: 1; grid-row: 2; text-align: left; }
  .gw-clf-fila-acc { grid-column: 2; grid-row: 1 / span 2; }
}

.gw-clf-proy { min-width: 0; padding: 14px 0; border-top: 1px solid var(--gw-border-soft); }
.gw-clf-proy:first-child { padding-top: 2px; border-top: 0; }
.gw-clf-proy-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gw-clf-proy-nombre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--gw-fs-lg); font-weight: 650; color: var(--gw-text); text-decoration: none;
}
a.gw-clf-proy-nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-clf-proy-sub { margin: 3px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-clf-proy-sub .is-malo { font-weight: 600; color: var(--gw-danger-ink); }
.gw-clf-proy-avance { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.gw-clf-proy-avance .gw-progress { flex: 1; min-width: 60px; }
.gw-clf-proy-avance > span { font-size: var(--gw-fs-xs); color: var(--gw-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gw-clf-proy-avance > .is-excedido { font-weight: 600; color: var(--gw-danger-ink); }

.gw-clf-check { list-style: none; margin: 0; padding: 0; }
.gw-clf-check li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--gw-border-soft); font-size: var(--gw-fs-md); color: var(--gw-text-2); }
.gw-clf-check li:first-child { padding-top: 0; border-top: 0; }
.gw-clf-check-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--gw-success-bg); color: var(--gw-success-ink);
}
.gw-clf-check-ico.gw-clf-check-ico svg { width: 13px; height: 13px; }
.gw-clf-check li.is-falta .gw-clf-check-ico { background: var(--gw-warn-bg); color: var(--gw-warn-ink); }
.gw-clf-check-txt { flex: 1; min-width: 0; }
.gw-clf-check-txt small { display: block; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-clf-check li > .gw-btn { flex-shrink: 0; }
.gw-clf-listo { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-success-ink); }
.gw-clf-listo.gw-clf-listo svg { width: 15px; height: 15px; }

/* La fila del logo en la pestaña Datos */
.gw-clf-logo-fila { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--gw-border-soft); }
.gw-clf-logo-fila > div { flex: 1; min-width: 0; }
.gw-clf-logo-fila .gw-btn { flex-shrink: 0; }
@media (max-width: 520px) {
  .gw-clf-logo-fila { flex-wrap: wrap; }
  .gw-clf-logo-fila > div { flex-basis: calc(100% - 66px); }
}

/* ── El logo del cliente en su portal, junto al nombre de su empresa ─────── */
.gw-chip.gw-chip-con-logo { gap: 7px; padding-left: 3px; }
.gw-chip-logo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; padding: 2px; overflow: hidden;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
}
.gw-chip-logo > img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════════════════════
   §60 · COMUNICACIONES EN EL TELÉFONO (CRM y Gestwork Chat)
   ══════════════════════════════════════════════════════════════════════════ */

/* El número de conversaciones con mensajes nuevos sobre el icono del chat, en
   la barra de abajo. Un punto no basta: «3» dice a cuántos sitios hay que ir. */
.gw-mn-count {
  position: absolute; top: -2px; left: calc(50% + 4px);
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gw-r-pill);
  background: var(--gw-danger-solid); color: #fff;
  font-size: var(--gw-fs-2xs); font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--gw-surface);
  pointer-events: none;
}
.gw-mn-count.hidden { display: none; }

/* Con una conversación abierta en el teléfono, la barra de abajo se aparta y
   la conversación ocupa la pantalla entera, como en cualquier app de
   mensajería. Se vuelve con la flecha de la cabecera. La clase la pone
   chat.php. --gw-mobilenav-total se cambia en el body y no en :root porque
   allí ya está calculado. */
@media (max-width: 767.98px) {
  body.gw-chat-conv-abierta { --gw-mobilenav-total: 0px; }
  body.gw-chat-conv-abierta .gw-mobilenav { display: none; }
  /* Con el teclado abierto (html.gw-teclado, ver layout.php) la conversación
     ocupa justo la parte visible: la cabecera no se va por arriba y la caja
     queda pegada al teclado. Sin el margen de la barra de inicio, que queda
     detrás del teclado. */
  html.gw-teclado body.gw-chat-conv-abierta .gw-chat {
    position: fixed !important; left: 0; right: 0; z-index: 40;
    top: var(--gw-vv-top, 0px) !important; height: var(--gw-vv-h, 100%) !important; min-height: 0 !important;
    padding-top: var(--gw-safe-top); box-sizing: border-box;
  }
  html.gw-teclado body.gw-chat-conv-abierta .gw-chat-redactar { padding-bottom: 8px !important; }
}

/* El enlace para instalar Gestwork Chat: discreto, y fuera cuando ya se usa. */
.gw-nav-instalar-chat { opacity: .82; }
.gw-nav-instalar-chat:hover { opacity: 1; }
html.gw-com-instalada [data-gw-instalar-chat] { display: none !important; }
.gw-mas-ico--chat { padding: 0; overflow: hidden; background: #0f172a; border-color: #0f172a; }
.gw-mas-ico--chat img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   §61 · PORTAL DE CLIENTES
   El portal usa el chasis del CRM —menú lateral, barra superior, barra
   inferior en el móvil— y sus mismos componentes. Lo que vive aquí es solo lo
   que el CRM no tiene: la empresa del cliente en lo alto del menú, su
   contacto en el pie, la actividad del equipo y la ficha de un proyecto vista
   desde fuera. Todo con tokens: claro y oscuro salen solos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chasis · el logotipo del portal en la cabecera del menú ──────────── */
.gw-pt-logo { display: block; line-height: 0; color: var(--gw-text); min-width: 0; }
.gw-sidebar:not(.is-collapsed) .gw-pt-logo-ico { display: none; }
.gw-sidebar.is-collapsed .gw-pt-logo { display: none; }

/* ── Chasis · la empresa del cliente, en lo alto del menú ─────────────── */
.gw-pt-empresa {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  margin: 12px 12px 0; padding: 9px 10px;
  border-radius: var(--gw-r-lg);
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-border-soft);
  flex-shrink: 0;
}
.gw-pt-empresa .gw-mono-av { width: 34px; height: 34px; font-size: 12px; border-radius: var(--gw-r-sm); }
.gw-pt-empresa-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gw-pt-empresa-nombre {
  font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-pt-empresa-sub { font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-sidebar.is-collapsed .gw-pt-empresa {
  margin: 10px 10px 0; padding: 4px; justify-content: center;
  background: transparent; border-color: transparent;
}
.gw-sidebar.is-collapsed .gw-pt-empresa-txt { display: none; }

/* ── Chasis · quien lleva su cuenta, siempre a un toque ───────────────── */
.gw-pt-tucontacto {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px; margin: 0 0 8px;
  border-radius: var(--gw-r-lg);
  background: var(--gw-brand-08);
}
.gw-pt-tucontacto .gw-avatar { width: 34px; height: 34px; font-size: var(--gw-fs-sm); color: #0f172a; }
.gw-pt-tucontacto-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gw-pt-tucontacto-nombre {
  font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-pt-tucontacto-papel { font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-pt-tucontacto .gw-icon-btn { flex-shrink: 0; background: var(--gw-surface); }
.gw-sidebar.is-collapsed .gw-pt-tucontacto { justify-content: center; padding: 6px 0; background: transparent; }
.gw-sidebar.is-collapsed .gw-pt-tucontacto-txt,
.gw-sidebar.is-collapsed .gw-pt-tucontacto .gw-icon-btn { display: none; }

/* ── La página ────────────────────────────────────────────────────────── */
.gw-pt-pagina { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16px 28px; min-width: 0; }
@media (min-width: 768px) { .gw-pt-pagina { padding: 28px 28px 36px; } }
/* Las páginas de lectura limitan su contenido, no su marco: el título queda
   en el mismo sitio en todas las pantallas del portal.
   NUNCA a los fondos de paneles y ventanas: llevan backdrop-filter, que los
   convierte en el bloque contenedor de lo `fixed` que llevan dentro, y con
   960 px de ancho el panel lateral quedaba encajonado a media pantalla y el
   fondo sin cubrirla entera (pasó en «Abrir un ticket», 2026-10-10). */
.gw-pt-pagina.is-estrecha > :not(.gw-drawer-overlay):not(.gw-modal-overlay) { max-width: 960px; }
.gw-pt-pagina.is-estrecha .gw-drawer-overlay,
.gw-pt-pagina.is-estrecha .gw-modal-overlay { max-width: none; }

.gw-pt-cab {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 20px; margin: 0 0 22px; min-width: 0;
}
.gw-pt-cab > div { min-width: 0; }
.gw-pt-titulo {
  margin: 0; font-size: 26px; line-height: 1.2; font-weight: 720;
  letter-spacing: -0.022em; color: var(--gw-text); text-wrap: balance;
}
.gw-pt-sub { margin: 6px 0 0; max-width: 62ch; font-size: var(--gw-fs-lg); line-height: 1.5; color: var(--gw-text-3); }
.gw-pt-cab-acc { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .gw-pt-titulo { font-size: 22px; } }

/* Un bloque dentro de la página: título corto + enlace a la derecha */
.gw-pt-bloque-cab {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 16px 18px 12px;
}
.gw-pt-bloque-tit { margin: 0; flex: 1; min-width: 0; font-size: var(--gw-fs-lg); font-weight: 680; color: var(--gw-text); }
.gw-pt-bloque-tit small { display: block; margin-top: 2px; font-size: var(--gw-fs-sm); font-weight: 500; color: var(--gw-text-3); }
.gw-pt-bloque-cab > a,
.gw-pt-bloque-cab > .gw-pt-ver {
  flex-shrink: 0; font-size: var(--gw-fs-sm); font-weight: 600;
  color: var(--gw-brand-on-soft); text-decoration: none;
}
.gw-pt-bloque-cab > a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── El pie: abajo del todo, nunca a media pantalla ───────────────────
   .gw-main es una columna flexible con la altura de la ventana; el pie va
   con margin-top:auto, así que en las páginas cortas baja al fondo y en las
   largas aparece al terminar el contenido. Ningún bloque de página puede
   llevar min-height:100% (se comería el hueco y el pie quedaría fuera). */
.gw-pt-pie {
  margin-top: auto; flex-shrink: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
  padding: 14px 20px;
  border-top: 1px solid var(--gw-border);
  background: var(--gw-bg);
  font-size: var(--gw-fs-sm); color: var(--gw-text-3);
}
.gw-pt-pie a { color: var(--gw-brand-on-soft); font-weight: 600; text-decoration: none; }
.gw-pt-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-pt-pie > :last-child { margin-left: auto; }
@media (max-width: 640px) { .gw-pt-pie > :last-child { margin-left: 0; } .gw-pt-pie { padding: 12px 16px; } }

/* ── Un avatar de persona del equipo: iniciales sobre su color ────────── */
.gw-pt-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1;
  color: #0f172a; user-select: none;
  box-shadow: 0 0 0 2px var(--gw-surface);
}
.gw-pt-av.is-sm { width: 26px; height: 26px; font-size: 10px; }
.gw-pt-av.is-lg { width: 44px; height: 44px; font-size: 15px; }
.gw-pt-av.is-equipo { background: var(--gw-surface-3); color: var(--gw-text-3); }
.gw-pt-av.is-equipo.is-equipo svg, .gw-pt-av.is-equipo.is-equipo i[data-lucide] { width: 16px; height: 16px; }
.gw-pt-avs { display: inline-flex; align-items: center; }
.gw-pt-avs { gap: 3px; }

/* ═══ INICIO ══════════════════════════════════════════════════════════════ */

/* ── Lo que te toca ─────────────────────────────────────────────────────
   Una lista con su acción en línea, no tarjetas iguales: se lee de arriba
   abajo en el orden en que conviene hacerlo. */
.gw-pt-toca { margin: 0 0 24px; overflow: hidden; }
.gw-pt-toca .gw-pt-bloque-cab { padding-bottom: 6px; }
.gw-pt-toca-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; margin-left: 6px; vertical-align: 2px;
  border-radius: var(--gw-r-pill); background: var(--gw-brand); color: var(--gw-brand-ink, #0b0b0b);
  font-size: var(--gw-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.gw-pt-toca-lista { list-style: none; margin: 0; padding: 0 8px 8px; }
.gw-pt-toca-fila {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px; border-radius: var(--gw-r-md);
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-pt-toca-fila:hover { background: var(--gw-surface-2); }
.gw-pt-toca-fila + .gw-pt-toca-fila { border-top: 1px solid var(--gw-border-soft); }
.gw-pt-toca-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--gw-r-md);
  background: var(--gw-amber-bg); color: var(--gw-amber-ink);
}
.gw-pt-toca-ico.gw-pt-toca-ico i[data-lucide], .gw-pt-toca-ico.gw-pt-toca-ico svg { width: 18px; height: 18px; }
.gw-pt-toca-ico.is-rose  { background: var(--gw-rose-bg);  color: var(--gw-rose-ink); }
.gw-pt-toca-ico.is-blue  { background: var(--gw-blue-bg);  color: var(--gw-blue-ink); }
.gw-pt-toca-ico.is-lime  { background: var(--gw-lime-bg);  color: var(--gw-lime-ink); }
.gw-pt-toca-ico.is-violet{ background: var(--gw-violet-bg);color: var(--gw-violet-ink); }
.gw-pt-toca-txt { flex: 1; min-width: 0; }
.gw-pt-toca-txt strong {
  display: block; font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw-pt-toca-txt span { display: block; margin-top: 1px; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-pt-toca-txt .is-malo { color: var(--gw-danger-ink); font-weight: 600; }
.gw-pt-toca-fila > .gw-btn { flex-shrink: 0; }
/* En el teléfono el título respira en dos líneas y la acción baja debajo,
   alineada con el texto: con el botón al lado, el título quedaba en tres
   palabras y unos puntos suspensivos. */
@media (max-width: 560px) {
  .gw-pt-toca-fila { flex-wrap: wrap; align-items: flex-start; }
  .gw-pt-toca-txt { flex: 1 1 calc(100% - 48px); }
  .gw-pt-toca-txt strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gw-pt-toca-fila > .gw-btn { margin-left: 48px; }
}
.gw-pt-toca-ok {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  margin: 0 0 24px; padding: 14px 16px;
  border-radius: var(--gw-r-xl);
  background: var(--gw-success-bg); color: var(--gw-success-ink);
  border: 1px solid var(--gw-success-bd);
}
.gw-pt-toca-ok strong { display: block; font-size: var(--gw-fs-md); }
.gw-pt-toca-ok span { display: block; font-size: var(--gw-fs-sm); opacity: .9; }
.gw-pt-toca-ok.gw-pt-toca-ok i[data-lucide], .gw-pt-toca-ok.gw-pt-toca-ok > svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ── Dos columnas: la actividad y, a su lado, lo que hay que tener a mano ─
   En el móvil el orden cambia a propósito: la próxima reunión y los
   proyectos suben por encima de la actividad, que es lo que más se alarga. */
.gw-pt-rejilla {
  display: grid; gap: 20px; min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "reu" "feed" "proy" "equipo" "pagos";
}
.gw-pt-rejilla > * { min-width: 0; }
.gw-pt-a-feed   { grid-area: feed; }
.gw-pt-a-reu    { grid-area: reu; }
.gw-pt-a-proy   { grid-area: proy; }
.gw-pt-a-equipo { grid-area: equipo; }
.gw-pt-a-pagos  { grid-area: pagos; }
@media (min-width: 1080px) {
  .gw-pt-rejilla {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "feed reu" "feed proy" "feed equipo" "feed pagos";
    gap: 20px 24px; align-items: start;
  }
}

/* ── La actividad del equipo ──────────────────────────────────────────── */
.gw-pt-feed { overflow: hidden; }
.gw-pt-vivo {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: var(--gw-fs-xs); font-weight: 600; color: var(--gw-success-ink);
}
.gw-pt-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.gw-pt-dia {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 14px 18px 4px;
  font-size: var(--gw-fs-xs); font-weight: 650; letter-spacing: .02em; color: var(--gw-text-3);
}
.gw-pt-dia::after { content: ''; flex: 1; height: 1px; background: var(--gw-border-soft); }
.gw-pt-evs { list-style: none; margin: 0; padding: 0 0 6px; position: relative; }
/* El raíl que une los avatares de un mismo día */
.gw-pt-evs::before {
  content: ''; position: absolute; left: 34px; top: 18px; bottom: 22px;
  width: 2px; border-radius: 2px; background: var(--gw-border-soft);
}
.gw-pt-ev {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 12px;
  padding: 10px 18px;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-pt-ev:hover { background: var(--gw-surface-2); }
.gw-pt-ev-av { position: relative; width: 34px; height: 34px; }
.gw-pt-ev-tipo {
  position: absolute; right: -9px; bottom: -7px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gw-surface);
  background: var(--gw-slate-bg); color: var(--gw-slate-ink);
}
.gw-pt-ev-tipo.gw-pt-ev-tipo i[data-lucide], .gw-pt-ev-tipo.gw-pt-ev-tipo svg { width: 11px; height: 11px; }
.gw-pt-ev-tipo svg { stroke-width: 2.4; }
.gw-pt-ev-tipo.is-green  { background: var(--gw-green-bg);  color: var(--gw-green-ink); }
.gw-pt-ev-tipo.is-lime   { background: var(--gw-lime-bg);   color: var(--gw-lime-ink); }
.gw-pt-ev-tipo.is-sky    { background: var(--gw-sky-bg);    color: var(--gw-sky-ink); }
.gw-pt-ev-tipo.is-violet { background: var(--gw-violet-bg); color: var(--gw-violet-ink); }
.gw-pt-ev-tipo.is-amber  { background: var(--gw-amber-bg);  color: var(--gw-amber-ink); }
.gw-pt-ev-tipo.is-blue   { background: var(--gw-blue-bg);   color: var(--gw-blue-ink); }
.gw-pt-ev-tipo.is-rose   { background: var(--gw-rose-bg);   color: var(--gw-rose-ink); }
.gw-pt-ev-tipo.is-indigo { background: var(--gw-indigo-bg); color: var(--gw-indigo-ink); }
.gw-pt-ev-cuerpo { min-width: 0; }
.gw-pt-ev-linea { margin: 0; font-size: var(--gw-fs-md); line-height: 1.45; color: var(--gw-text-2); }
.gw-pt-ev-linea strong { font-weight: 650; color: var(--gw-text); }
.gw-pt-ev-obj {
  display: block; margin-top: 1px;
  font-size: var(--gw-fs-md); font-weight: 600; line-height: 1.4; color: var(--gw-text);
  text-decoration: none; overflow-wrap: anywhere;
}
a.gw-pt-ev-obj:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-pt-ev-detalle {
  margin: 6px 0 0; padding: 8px 10px;
  border-radius: var(--gw-r-md); background: var(--gw-surface-2);
  font-size: var(--gw-fs-sm); line-height: 1.5; color: var(--gw-text-2); overflow-wrap: anywhere;
}
.gw-pt-ev-detalle.is-cifra { display: inline-block; padding: 3px 8px; font-weight: 650; color: var(--gw-text); font-variant-numeric: tabular-nums; }
.gw-pt-ev-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px;
  font-size: var(--gw-fs-xs); color: var(--gw-text-3);
}
.gw-pt-ev-meta a { color: inherit; text-decoration: none; }
.gw-pt-ev-meta a:hover { color: var(--gw-text); text-decoration: underline; text-underline-offset: 2px; }
.gw-pt-ev-hora { font-size: var(--gw-fs-xs); color: var(--gw-text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; white-space: nowrap; }
.gw-pt-nuevo {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: var(--gw-r-pill); background: var(--gw-brand-20); color: var(--gw-brand-on-soft);
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.gw-pt-feed-mas { display: flex; justify-content: center; padding: 6px 18px 16px; }

/* ── La próxima reunión ───────────────────────────────────────────────── */
.gw-pt-reu { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 4px 18px 18px; }
.gw-pt-reu + .gw-pt-reu { padding-top: 14px; border-top: 1px solid var(--gw-border-soft); }
.gw-pt-fecha {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 52px; border-radius: var(--gw-r-md);
  background: var(--gw-indigo-bg); color: var(--gw-indigo-ink);
  font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; line-height: 1.1;
}
.gw-pt-fecha strong { font-size: 19px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.gw-pt-fecha.is-hoy { background: var(--gw-brand); color: var(--gw-brand-ink, #0b0b0b); }
.gw-pt-reu-txt { flex: 1; min-width: 0; }
.gw-pt-reu-tit { margin: 0; font-size: var(--gw-fs-md); font-weight: 650; line-height: 1.35; color: var(--gw-text); overflow-wrap: anywhere; }
.gw-pt-reu-cuando { margin: 3px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-pt-reu-con { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-pt-reu-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.gw-pt-reu-acc .gw-hint { margin: 0; }

/* ── Los proyectos, con su avance y lo que viene ──────────────────────── */
.gw-pt-proys { list-style: none; margin: 0; padding: 0 8px 8px; }
.gw-pt-proy {
  display: block; min-width: 0; padding: 12px 10px; border-radius: var(--gw-r-md);
  text-decoration: none; color: inherit;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-pt-proy:hover { background: var(--gw-surface-2); }
li + li > .gw-pt-proy { border-top: 1px solid var(--gw-border-soft); border-radius: 0 0 var(--gw-r-md) var(--gw-r-md); }
.gw-pt-proy-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gw-pt-proy-nombre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text);
}
.gw-pt-proy-avance { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.gw-pt-proy-avance .gw-progress { flex: 1; min-width: 40px; }
.gw-pt-proy-avance > span { font-size: var(--gw-fs-xs); font-weight: 650; color: var(--gw-text-2); font-variant-numeric: tabular-nums; }
.gw-pt-proy-sig { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; font-size: var(--gw-fs-xs); color: var(--gw-text-3); min-width: 0; }
.gw-pt-proy-sig.gw-pt-proy-sig i[data-lucide], .gw-pt-proy-sig.gw-pt-proy-sig svg { width: 13px; height: 13px; flex-shrink: 0; }
.gw-pt-proy-sig span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pt-proy-sig .is-malo { color: var(--gw-danger-ink); font-weight: 600; }

/* ── El equipo ─────────────────────────────────────────────────────────── */
.gw-pt-gente { list-style: none; margin: 0; padding: 0 8px 4px; }
.gw-pt-persona { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 10px; }
.gw-pt-persona + .gw-pt-persona { border-top: 1px solid var(--gw-border-soft); }
.gw-pt-persona-txt { flex: 1; min-width: 0; }
.gw-pt-persona-nombre { display: block; font-size: var(--gw-fs-md); font-weight: 650; color: var(--gw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pt-persona-papel { display: block; font-size: var(--gw-fs-xs); color: var(--gw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pt-persona .gw-icon-btn { flex-shrink: 0; }
.gw-pt-gente-pie { padding: 4px 18px 16px; }

/* ═══ FICHA DE UN PROYECTO ═════════════════════════════════════════════════ */

/* ── Lo primero: cuánto lleva y qué viene ─────────────────────────────── */
.gw-pt-hero { padding: 22px; margin: 0 0 20px; }
.gw-pt-hero-top { display: flex; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; min-width: 0; }
.gw-pt-hero-id { flex: 1; min-width: 0; }
.gw-pt-hero-nombre { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 720; letter-spacing: -0.02em; color: var(--gw-text); text-wrap: balance; }
.gw-pt-hero-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-pt-hero-desc { margin: 10px 0 0; max-width: 68ch; font-size: var(--gw-fs-lg); line-height: 1.55; color: var(--gw-text-2); }
.gw-pt-hero-cuerpo {
  display: grid; gap: 18px; margin-top: 20px; min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .gw-pt-hero-cuerpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; } }
.gw-pt-avance {
  min-width: 0; padding: 16px 18px; border-radius: var(--gw-r-lg);
  background: var(--gw-surface-2); border: 1px solid var(--gw-border-soft);
}
.gw-pt-avance-cifra { display: flex; align-items: baseline; gap: 10px; }
.gw-pt-avance-cifra strong { font-size: 44px; line-height: 1; font-weight: 750; letter-spacing: -0.03em; color: var(--gw-text); font-variant-numeric: tabular-nums; }
.gw-pt-avance-cifra span { font-size: var(--gw-fs-md); color: var(--gw-text-3); }
.gw-pt-avance .gw-progress { height: 10px; margin-top: 14px; }
.gw-pt-avance-fechas { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-pt-avance-fechas b { display: block; font-size: var(--gw-fs-sm); font-weight: 650; color: var(--gw-text); }
.gw-pt-avance-fechas > :last-child { text-align: right; }
.gw-pt-sig {
  min-width: 0; padding: 16px 18px; border-radius: var(--gw-r-lg);
  background: var(--gw-brand-08); border: 1px solid var(--gw-brand-20);
}
.gw-pt-sig-ico.gw-pt-sig-ico { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: var(--gw-brand-on-soft); }
.gw-pt-sig-pre { font-weight: 550; color: var(--gw-text-2); }
.gw-pt-sig-nombre { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; color: var(--gw-text); overflow-wrap: anywhere; }
.gw-pt-sig-desc { margin: 4px 0 0; font-size: var(--gw-fs-sm); line-height: 1.5; color: var(--gw-text-2); }
.gw-pt-sig-cuando { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: var(--gw-fs-sm); color: var(--gw-text-2); }
.gw-pt-sig-cuando .gw-chip { font-variant-numeric: tabular-nums; }
.gw-pt-sig-tareas { margin-top: 10px; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }

/* ── La ruta de entregas: estaciones en fila en el escritorio, en columna
   en el móvil. Hecho, en curso y pendiente se distinguen por forma además
   de por color (relleno, anillo, hueco). ───────────────────────────────── */
.gw-pt-ruta { list-style: none; margin: 0; padding: 4px 18px 18px; display: grid; gap: 0; }
.gw-pt-est { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 12px; padding: 0 0 18px; }
.gw-pt-est:last-child { padding-bottom: 0; }
.gw-pt-est::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 2px; border-radius: 2px; background: var(--gw-border);
}
.gw-pt-est:last-child::before { display: none; }
.gw-pt-est.is-hecho::before { background: var(--gw-brand); }
.gw-pt-est-dot {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gw-surface); border: 2px solid var(--gw-border-strong); color: var(--gw-text-3);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gw-pt-est-dot.gw-pt-est-dot i[data-lucide], .gw-pt-est-dot.gw-pt-est-dot svg { width: 14px; height: 14px; }
.gw-pt-est-dot svg { stroke-width: 2.6; }
.gw-pt-est.is-hecho .gw-pt-est-dot { background: var(--gw-brand); border-color: var(--gw-brand); color: var(--gw-brand-ink, #0b0b0b); }
.gw-pt-est.is-actual .gw-pt-est-dot { border-color: var(--gw-brand); color: var(--gw-brand-on-soft); box-shadow: 0 0 0 4px var(--gw-brand-20); }
.gw-pt-est-txt { min-width: 0; padding-top: 2px; }
.gw-pt-est-nombre { margin: 0; font-size: var(--gw-fs-md); font-weight: 650; line-height: 1.35; color: var(--gw-text); overflow-wrap: anywhere; }
.gw-pt-est-fecha { margin: 2px 0 0; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-pt-est-fecha .is-malo { color: var(--gw-danger-ink); font-weight: 600; }
.gw-pt-est-desc { margin: 6px 0 0; font-size: var(--gw-fs-sm); line-height: 1.5; color: var(--gw-text-2); }
.gw-pt-est-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
@media (min-width: 1000px) {
  .gw-pt-ruta.is-fila { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 14px; padding-top: 8px; }
  .gw-pt-ruta.is-fila .gw-pt-est { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .gw-pt-ruta.is-fila .gw-pt-est::before { left: 30px; right: -14px; top: 12px; bottom: auto; width: auto; height: 2px; }
  .gw-pt-ruta.is-fila .gw-pt-est-txt { padding-top: 12px; }
}

/* ── Las tareas, por estado ─────────────────────────────────────────────── */
.gw-pt-tareas-filtro { padding: 0 18px 12px; }
.gw-pt-tareas { list-style: none; margin: 0; padding: 0 8px 8px; }
.gw-pt-tarea { border-radius: var(--gw-r-md); }
.gw-pt-tarea + .gw-pt-tarea { border-top: 1px solid var(--gw-border-soft); }
.gw-pt-tarea-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0;
  padding: 11px 10px; border: 0; background: transparent; text-align: left; cursor: pointer;
  border-radius: var(--gw-r-md); color: inherit; font: inherit;
  transition: background-color var(--gw-dur-1) var(--gw-ease-io);
}
.gw-pt-tarea-fila:hover { background: var(--gw-surface-2); }
.gw-pt-tarea-estado { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--gw-400); }
.gw-pt-tarea-estado.is-en_curso { background: #3b82f6; }
.gw-pt-tarea-estado.is-revision { background: #a855f7; }
.gw-pt-tarea-estado.is-bloqueada { background: #f43f5e; }
.gw-pt-tarea-estado.is-hecha { background: #22c55e; }
.gw-pt-tarea-txt { flex: 1; min-width: 0; }
.gw-pt-tarea-tit { display: block; font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); overflow-wrap: anywhere; }
.gw-pt-tarea.is-hecha .gw-pt-tarea-tit { color: var(--gw-text-3); text-decoration: line-through; text-decoration-color: var(--gw-border-strong); }
.gw-pt-tarea-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-pt-tarea-hilo { padding: 0 10px 12px 32px; }

/* ── Los archivos de un proyecto ───────────────────────────────────────── */
.gw-pt-archivos { list-style: none; margin: 0; padding: 0 8px 8px; }
.gw-pt-archivo { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: var(--gw-r-md); }
.gw-pt-archivo + .gw-pt-archivo { border-top: 1px solid var(--gw-border-soft); }
.gw-pt-archivo-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--gw-r-md); background: var(--gw-sky-bg); color: var(--gw-sky-ink);
}
.gw-pt-archivo-ico.gw-pt-archivo-ico i[data-lucide], .gw-pt-archivo-ico.gw-pt-archivo-ico svg { width: 17px; height: 17px; }
.gw-pt-archivo-txt { flex: 1; min-width: 0; }
.gw-pt-archivo-nombre { display: block; font-size: var(--gw-fs-md); font-weight: 600; color: var(--gw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pt-archivo-sub { display: block; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }

/* ── La lista de proyectos ─────────────────────────────────────────────── */
.gw-pt-proylista { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .gw-pt-proylista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gw-pt-proyc { position: relative; display: flex; flex-direction: column; gap: 0; padding: 18px; min-width: 0; }
.gw-pt-proyc-cab { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gw-pt-proyc-enlace {
  flex: 1; min-width: 0; margin: 0;
  font-size: var(--gw-fs-xl); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--gw-text); text-decoration: none; overflow-wrap: anywhere;
}
/* Toda la tarjeta lleva al proyecto, sin anidar enlaces */
.gw-pt-proyc-enlace::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.gw-pt-proyc:hover { border-color: var(--gw-border-strong); box-shadow: var(--gw-sh-md); }
.gw-pt-proyc-sub { margin: 4px 0 0; font-size: var(--gw-fs-sm); color: var(--gw-text-3); }
.gw-pt-proyc .gw-pt-proy-avance { margin-top: 16px; }
.gw-pt-proyc-sig { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gw-border-soft); font-size: var(--gw-fs-sm); color: var(--gw-text-2); min-width: 0; }
.gw-pt-proyc-sig.gw-pt-proyc-sig i[data-lucide], .gw-pt-proyc-sig.gw-pt-proyc-sig svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gw-text-3); }
.gw-pt-proyc-sig span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pt-proyc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; position: relative; z-index: 1; pointer-events: none; }

/* ── Reuniones ─────────────────────────────────────────────────────────── */
.gw-pt-reus { overflow: hidden; }
.gw-pt-reus .gw-pt-reu { padding: 16px 18px; }
.gw-pt-reus .gw-pt-reu + .gw-pt-reu { padding-top: 16px; }
.gw-pt-reu.is-pasada .gw-pt-fecha { background: var(--gw-surface-3); color: var(--gw-text-3); }
.gw-pt-reu.is-en_curso .gw-pt-fecha { background: var(--gw-success-bg); color: var(--gw-success-ink); }

/* ── Movimiento: solo lo que cambia de estado ─────────────────────────── */
@keyframes gw-pt-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gw-pt-ev.is-recien { animation: gw-pt-entra var(--gw-dur-3) var(--gw-ease) both; }
@media (prefers-reduced-motion: reduce) { .gw-pt-ev.is-recien { animation: none; } }

/* ── Ficha de proyecto: dos columnas en el escritorio; en el teléfono una
   sola, con la próxima reunión arriba. Las columnas se disuelven
   (display:contents) para que `order` reordene sus bloques. ─────────────── */
.gw-pt-ficha { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.gw-pt-ficha-col { display: contents; }
.gw-pt-ficha .gw-pt-o1 { order: 1; } .gw-pt-ficha .gw-pt-o2 { order: 2; } .gw-pt-ficha .gw-pt-o3 { order: 3; }
.gw-pt-ficha .gw-pt-o4 { order: 4; } .gw-pt-ficha .gw-pt-o5 { order: 5; } .gw-pt-ficha .gw-pt-o6 { order: 6; }
@media (min-width: 1080px) {
  .gw-pt-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .gw-pt-ficha-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
}
.gw-pt-volver {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  font-size: var(--gw-fs-sm); font-weight: 600; color: var(--gw-text-3); text-decoration: none;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.gw-pt-volver:hover { color: var(--gw-text); }
.gw-pt-hero-aviso {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0;
  margin-top: 16px; padding: 12px 14px; border-radius: var(--gw-r-lg);
  background: var(--gw-warn-bg); color: var(--gw-warn-ink); border: 1px solid var(--gw-warn-bd);
  font-size: var(--gw-fs-md); font-weight: 600;
}
.gw-pt-hero-aviso > span { flex: 1; min-width: 0; }
.gw-pt-hero-aviso.gw-pt-hero-aviso i[data-lucide], .gw-pt-hero-aviso.gw-pt-hero-aviso > svg { width: 18px; height: 18px; flex-shrink: 0; }
.gw-pt-est-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gw-pt-hilo { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--gw-border-soft); }

/* Iconos en línea con el texto (metadatos de una fila) */
.gw-pt-ico-linea.gw-pt-ico-linea { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.gw-pt-ev-meta.gw-pt-ev-meta i[data-lucide] { width: 13px; height: 13px; }
/* La hora y la marca «nuevo», en su columna: dentro de la frase partían
   «quién hizo qué» en dos líneas en el teléfono. */
.gw-pt-ev-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* ── Los planes (fases) de un proyecto en el portal ─────────────────────── */
.gw-pt-plan + .gw-pt-plan { border-top: 1px solid var(--gw-border-soft); padding-top: 4px; }
.gw-pt-plan-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 18px 12px; min-width: 0; }
.gw-pt-plan-nombre { margin: 0; flex: 1; min-width: 0; font-size: var(--gw-fs-lg); font-weight: 680; color: var(--gw-text); overflow-wrap: anywhere; }
.gw-pt-plan-n { font-size: var(--gw-fs-sm); color: var(--gw-text-3); font-variant-numeric: tabular-nums; }
.gw-pt-plan-desc { margin: 0; flex-basis: 100%; font-size: var(--gw-fs-sm); line-height: 1.5; color: var(--gw-text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   §62 · PLANES DE ENTREGA (ficha del proyecto en el CRM)
   Cada plan es una fase: su cabecera con el estado (borrador o publicado) y
   sus acciones, y debajo sus entregas como filas. Lo que ve el cliente en su
   portal sale de aquí al publicar.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-plan { min-width: 0; }
.gw-plan + .gw-plan { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gw-border-soft); }
.gw-plan-cab { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; min-width: 0; margin-bottom: 4px; }
.gw-plan-tit { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--gw-fs-lg); font-weight: 680; color: var(--gw-text); }
.gw-plan-desc { margin: 4px 0 0; font-size: var(--gw-fs-sm); line-height: 1.5; color: var(--gw-text-2); max-width: 70ch; }
.gw-plan-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gw-plan-vacio { padding: 4px 0; }
.gw-entrega-fila { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--gw-border-soft); }
.gw-entrega-fila:last-of-type { margin-bottom: 12px; }
.gw-entrega-n {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 8px; border-radius: 50%;
  background: var(--gw-surface-3); color: var(--gw-text-3);
  font-size: var(--gw-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.gw-entrega-campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gw-entrega-linea { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
@media (max-width: 560px) { .gw-entrega-linea { grid-template-columns: 1fr; } }

/* El destinatario de un ticket dirigido (mesa de ayuda del portal) */
.gw-ay-para {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
  margin: 0 0 18px; padding: 10px 12px; border-radius: var(--gw-r-lg);
  background: var(--gw-brand-08); border: 1px solid var(--gw-brand-20);
}
.gw-ay-para-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-ay-para-txt strong { font-size: var(--gw-fs-md); color: var(--gw-text); }
.gw-ay-para-txt span { font-size: var(--gw-fs-xs); color: var(--gw-text-3); }

/* ── «Te están esperando» · la llamada entrante del portal ───────────────────
   Una franja bajo la barra superior, en todas las páginas, mientras alguien
   del equipo espere al cliente en una videollamada. Verde de «en vivo» con los
   tokens de base (los alias semánticos no heredan el modo oscuro). */
.gw-pt-envivo-zona:empty { display: none; }
.gw-pt-envivo-zona { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; min-width: 0; }
@media (min-width: 768px) { .gw-pt-envivo-zona { padding: 16px 28px 0; } }
.gw-pt-envivo {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  width: 100%; max-width: 1144px; margin: 0 auto;
  padding: 10px 12px 10px 14px; border-radius: var(--gw-r-lg);
  background: var(--gw-green-bg); border: 1px solid var(--gw-green-bd);
}
.gw-pt-envivo-punto {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gw-green-ink); animation: gwVcLatido 1.6s ease-in-out infinite;
}
.gw-pt-envivo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-pt-envivo-txt strong { font-size: var(--gw-fs-md); color: var(--gw-green-ink); font-weight: 650; }
.gw-pt-envivo-txt span { font-size: var(--gw-fs-xs); color: var(--gw-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-pt-envivo .gw-btn { flex: none; }
@media (prefers-reduced-motion: reduce) { .gw-pt-envivo-punto { animation: none; } }

/* ── Planes anulados (CRM y portal) ──────────────────────────────────────── */
.gw-plan.is-anulado .gw-plan-tit .gw-truncate { text-decoration: line-through; color: var(--gw-text-3); }
.gw-plan.is-anulado .gw-plan-desc { color: var(--gw-text-3); }
.gw-row.is-anulada { opacity: .6; }
.gw-row.is-anulada .gw-row-title { text-decoration: line-through; }
.gw-plan-eliminar:hover:not(:disabled) { color: var(--gw-rose-ink); }
.gw-pt-plan.is-anulado .gw-pt-plan-nombre { text-decoration: line-through; color: var(--gw-text-3); }
.gw-pt-plan.is-anulado .gw-pt-plan-cab { align-items: center; }
.gw-pt-est.is-anulado { opacity: .62; }
.gw-pt-est.is-anulado .gw-pt-est-nombre { text-decoration: line-through; }
.gw-pt-est.is-anulado .gw-pt-est-dot { background: var(--gw-rose-bg); color: var(--gw-rose-ink); border-color: var(--gw-rose-bd); }

/* ── Horas por mes: el mes a mes de un proyecto ─────────────────────────── */
.gw-horas-mes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--gw-border); }
.gw-horas-meses .gw-horas-mes:first-of-type { border-top: 0; margin-top: 4px; }
.gw-horas-mes-nombre { font-size: var(--gw-fs-sm); color: var(--gw-text-2); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-horas-mes-nombre em { font-style: normal; color: var(--gw-text-3); text-transform: none; }
.gw-horas-mes.is-actual .gw-horas-mes-nombre { color: var(--gw-text); font-weight: 650; }
.gw-horas-mes-n { font-size: var(--gw-fs-sm); font-variant-numeric: tabular-nums; color: var(--gw-text-2); white-space: nowrap; }
.gw-horas-mes-n.is-negativo { color: var(--gw-rose-ink); font-weight: 650; }
.gw-barra-sm { height: 6px; }
@media (max-width: 560px) { .gw-horas-mes { grid-template-columns: minmax(0, 1fr) auto; } .gw-horas-mes .gw-barra { grid-column: 1 / -1; } }

/* ══════════════════════════════════════════════════════════════════════════
   §63 · PANTALLAS TÁCTILES · nada se esconde hasta «pasar el ratón»
   ──────────────────────────────────────────────────────────────────────────
   En un teléfono o una tablet no hay cursor: un botón que solo aparece con
   :hover no existe hasta que se apoya el dedo encima, y hay que adivinar
   dónde está (2026-10-10). Aquí se dejan siempre visibles. Se pregunta por
   (hover: none) Y por (pointer: coarse): un iPad con teclado o trackpad, y
   algunos Android, dicen tener hover aunque se usen con el dedo.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .gw-kb-actions { opacity: 1; transform: none; }
  .gw-note-actions { opacity: 1; }
  .gw-sidebar.is-collapsed .gw-sidebar-toggle { opacity: 1; background: var(--gw-surface-3); }
  .gw-sidebar.is-collapsed .gw-sidebar-logo-ico { opacity: 0; }
  .gw-vc-echar { opacity: 1; }
  .gw-cal-ev-tirador { opacity: .75; }
}
/* El desplegable de fecha del panel: con ratón se abre al pasar; con el dedo
   (y con un clic, en cualquier sitio) alterna con .is-abierto. */
.group.is-abierto > .gw-dash-datemenu { opacity: 1; visibility: visible; transform: none; }
.gw-dash-datemenu { max-width: calc(100vw - 32px); }
/* Tablet (768–900): la barra inferior del móvil ya no está, pero el chat y el
   calendario seguían restándole su alto y dejaban 68 px vacíos abajo. */
@media (min-width: 768px) and (max-width: 900px) {
  .gw-chat, .gw-cal { height: calc(100vh - var(--gw-topbar-h)); }
  @supports (height: 100dvh) { .gw-chat, .gw-cal { height: calc(100dvh - var(--gw-topbar-h)); } }
}
/* Cotizaciones en el teléfono: la fila se parte en dos líneas (título y
   chips arriba; importe, fecha y botones abajo) en vez de aplastar el título
   contra tres iconos (2026-10-10). */
@media (max-width: 640px) {
  .gw-cot-fila { flex-wrap: wrap; row-gap: 6px; }
  .gw-cot-fila > .gw-row-main { flex-basis: 100%; }
  .gw-cot-fila > .text-right { text-align: left; min-width: 0 !important; }
  .gw-cot-fila > .flex { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §64 · BRIEFS · la página y el bloque de descubrimiento de la ficha del lead
   ══════════════════════════════════════════════════════════════════════════ */
.gw-bf-fila { align-items: center; }
.gw-row.is-selected { background: var(--gw-brand-08); }
.gw-bf-preguntas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.gw-bf-preg { padding: 10px 12px; border: 1px solid var(--gw-border); border-radius: var(--gw-r-md); background: var(--gw-surface-2); display: flex; flex-direction: column; gap: 8px; }
.gw-bf-preg-cab { display: flex; align-items: center; gap: 6px; }
.gw-bf-preg-cab .gw-input { flex: 1; min-width: 0; }
.gw-bf-preg-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--gw-fs-xs); font-weight: 700; background: var(--gw-surface-3); color: var(--gw-text-2); }
.gw-bf-preg-det { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gw-bf-preg-det .gw-input { flex: 1; min-width: 140px; }
.gw-bf-preg-det .gw-check-inline { font-size: var(--gw-fs-sm); color: var(--gw-text-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gw-bf-resp dt { font-size: var(--gw-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gw-text-3); margin-top: 14px; }
.gw-bf-resp dd { margin: 3px 0 0; color: var(--gw-text); white-space: pre-line; line-height: 1.5; }
.gw-drawer-xl { max-width: 980px; }
.gw-bf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
@media (max-width: 900px) { .gw-bf-cols { grid-template-columns: 1fr; } .gw-bf-lado { order: -1; } }
.gw-ld-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gw-ld-paso { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--gw-r-md); background: var(--gw-surface-2); }
.gw-ld-paso-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gw-surface-3); color: var(--gw-text-2); }
.gw-ld-paso-ico svg, .gw-ld-paso-ico i[data-lucide] { width: 15px; height: 15px; padding: 0; margin: 0; }
.gw-ld-paso.is-ok .gw-ld-paso-ico { background: var(--gw-green-bg); color: var(--gw-green-ink); }
.gw-ld-paso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.gw-ld-paso-txt strong { font-size: var(--gw-fs-sm); color: var(--gw-text); }
.gw-ld-paso-txt em { font-style: normal; font-size: var(--gw-fs-xs); color: var(--gw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-ld-rec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gw-border); }
.gw-ld-rec-tit { display: flex; align-items: center; gap: 6px; font-size: var(--gw-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gw-text-3); margin: 0 0 8px; }
.gw-ld-rec-tit svg, .gw-ld-rec-tit i[data-lucide] { width: 14px; height: 14px; padding: 0; margin: 0; }
.gw-ld-rec-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--gw-border-soft, var(--gw-border)); }
.gw-ld-rec-item:first-of-type { border-top: 0; }
.gw-ld-rec-item strong { font-size: var(--gw-fs-sm); color: var(--gw-text); }
.gw-ld-rec-item p { margin: 2px 0 0; font-size: var(--gw-fs-xs); color: var(--gw-text-2); line-height: 1.45; }
.gw-ld-rec-item.is-primera { background: var(--gw-brand-08); margin: 0 -10px; padding: 10px; border-radius: var(--gw-r-md); border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   §65 · EL BRIEF A PANTALLA ENTERA (brief.php) · 2026-10-10
   ──────────────────────────────────────────────────────────────────────────
   Antes era un cajón por la derecha con todo apretado. Ahora: el documento a
   la izquierda en tarjetas con aire, el camino y la precotización a la
   derecha (pegajosos), y las acciones en una barra que no se va al bajar.
   ══════════════════════════════════════════════════════════════════════════ */
.gw-br-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.gw-br-main { display: grid; gap: 20px; min-width: 0; }
.gw-br-lado { display: grid; gap: 16px; position: sticky; top: 16px; }
.gw-br-main .gw-card-body { padding: 22px 24px; }
.gw-br-main .gw-field { margin-bottom: 20px; }
.gw-br-main .gw-field:last-child { margin-bottom: 0; }
.gw-br-main .gw-label { margin-bottom: 7px; }
.gw-br-main .gw-label-opt { display: block; margin-top: 2px; font-weight: 400; font-size: var(--gw-fs-xs); line-height: 1.35; }
.gw-br-main .gw-textarea { line-height: 1.55; }
.gw-br-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.gw-br-sec-contexto { padding: 14px 16px; border-radius: var(--gw-r-md); background: var(--gw-surface-2); border: 1px dashed var(--gw-border); }
.gw-br-lado .gw-card-body { padding: 18px 20px; }
.gw-br-lado .gw-card-quiet .gw-card-body { padding: 16px 18px; }
.gw-br-lado .gw-label { margin-bottom: 8px; }
.gw-br-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gw-br-pasos li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; position: relative; }
.gw-br-pasos li + li::before { content: ''; position: absolute; left: 11px; top: -8px; height: 14px; border-left: 2px solid var(--gw-border); }
.gw-br-paso-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gw-surface-3); color: var(--gw-text-3); }
.gw-br-paso-ico svg, .gw-br-paso-ico i[data-lucide] { width: 13px; height: 13px; padding: 0; margin: 0; }
.gw-br-pasos li.is-ok .gw-br-paso-ico { background: var(--gw-green-bg); color: var(--gw-green-ink); }
.gw-br-pasos li.is-ahora .gw-br-paso-ico { background: var(--gw-brand); color: var(--gw-brand-ink, #0f172a); }
.gw-br-paso-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.gw-br-paso-txt strong { font-size: var(--gw-fs-sm); color: var(--gw-text-2); font-weight: 600; }
.gw-br-pasos li.is-ahora .gw-br-paso-txt strong, .gw-br-pasos li.is-ok .gw-br-paso-txt strong { color: var(--gw-text); }
.gw-br-paso-txt em { font-style: normal; font-size: var(--gw-fs-xs); color: var(--gw-text-3); }
.gw-br-acciones { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
                  margin: 28px -16px -20px; padding: 14px 92px calc(14px + env(safe-area-inset-bottom, 0px)) 16px;
                  background: color-mix(in srgb, var(--gw-surface) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
                  border-top: 1px solid var(--gw-border); }
.gw-br-acciones .gw-btn { min-height: 40px; padding-left: 16px; padding-right: 16px; }
/* «Borrar» a la izquierda, separado del resto por el hueco; lo principal a la derecha. */
.gw-br-acciones .gw-br-acc-sep { flex: 1 1 24px; min-width: 24px; }
/* El botón flotante de AILAB se pisaba con el botón verde de la barra: en esta
   página sube por encima de la barra (brief.php marca el <body>). La barra deja
   además 92 px a la derecha por si el botón vuelve a bajar. */
body.gw-con-barra .ailab-flota { bottom: 84px; }
@media (min-width: 768px) { .gw-br-acciones { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 96px; } }
@media (max-width: 1024px) {
  .gw-br-cols { grid-template-columns: 1fr; }
  .gw-br-lado { position: static; }
}
@media (max-width: 767px) {
  body.gw-con-barra .ailab-flota { bottom: calc(var(--gw-mobilenav-total, 68px) + 92px); }
}
@media (max-width: 640px) {
  .gw-br-grid { grid-template-columns: 1fr; }
  .gw-br-main .gw-card-body { padding: 16px; }
  .gw-br-acciones { padding-right: 16px; gap: 10px; }
  .gw-br-acciones .gw-btn { flex: 1 1 auto; justify-content: center; }
  .gw-br-acciones .gw-br-acc-borrar { flex: 0 0 auto; }
  .gw-br-acciones .gw-br-acc-sep { display: none; }
}
/* Las filas de la lista de briefs son enlaces: sin subrayado ni color de enlace. */
a.gw-bf-fila { display: flex; }

/* ══════════════════════════════════════════════════════════════════════════
   §66 · GW CONNECTION · el acceso de la app de comunicaciones (/com/) · 2026-10-11
   ──────────────────────────────────────────────────────────────────────────
   /com/index.php (con su verificación en dos pasos), /com/cambiar_clave.php y
   /com/auth/recover.php son las pantallas de acceso del equipo con la marca
   de GW Connection: la burbuja con la W en lima y las letras «GestWork /
   Connection». Todo cuelga de .gw-conn-* o de body.gw-login-com, que solo se
   ponen en /com/: el acceso del CRM no cambia.

   El isotipo va en línea (gw_conn_iso(), en includes/gw_carga.php) para poder
   dibujarse; las letras van por máscara, porque el SVG trae un clip-path con
   id y dos copias en línea en la misma página chocarían.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El logotipo ────────────────────────────────────────────────────────────
   Isotipo y letras a la misma altura, que es como vienen dibujados (los dos
   SVG miden 117 de alto). Las letras guardan su proporción de 400 × 117. */
.gw-conn-marca { display: flex; align-items: center; gap: 8px; }
.gw-conn-marca-iso { display: block; flex: none; width: 48px; height: 48px; overflow: visible; }
.gw-conn-letras {
  display: block; flex: none;
  width: 164px; height: 48px;
  background-color: #fff;
  -webkit-mask: url('../img/gwconnection-letras.svg') left center / contain no-repeat;
          mask: url('../img/gwconnection-letras.svg') left center / contain no-repeat;
}

/* Panel de escritorio, sobre la fotografía. */
.gw-login-mark.gw-conn-marca { gap: 10px; margin-bottom: 44px; }
.gw-login-mark.gw-conn-marca .gw-conn-marca-iso { width: 56px; height: 56px; }
.gw-login-mark.gw-conn-marca .gw-conn-letras { width: 191px; height: 56px; }

/* Teléfono: encima de la tarjeta, también sobre la fotografía (en el móvil
   ocupa todo el alto), así que las letras siguen en blanco. Doblada: Tailwind
   carga después y su `.flex` ganaría al display:none del escritorio. */
.gw-conn-marca.gw-conn-marca--movil { justify-content: center; margin: 0 0 26px; }
@media (min-width: 1024px) {
  .gw-conn-marca.gw-conn-marca--movil { display: none; }
}

/* Recuperar la contraseña es una página clara: ahí va el icono de la app
   (azul noche) y las letras en tinta, porque el isotipo lima suelto sobre
   blanco no se lee. */
.gw-conn-marca.gw-conn-marca--clara { gap: 12px; }
.gw-conn-marca-app {
  display: block; flex: none; width: 44px; height: 44px;
  border-radius: 12px;
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .55);
}
.gw-conn-marca--clara .gw-conn-letras { width: 151px; height: 44px; background-color: var(--gw-text); }

/* Al llegar, el isotipo se dibuja una vez, trazo a trazo y en el mismo orden
   que la pantalla de carga: burbuja, cola y la W. pathLength="1" deja las
   cuentas en 0 → 1. Quien pidió menos movimiento lo ve ya dibujado. */
.gw-conn-iso.is-dibuja path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gw-conn-dibuja .9s cubic-bezier(.65, 0, .35, 1) .15s forwards;
}
.gw-conn-iso.is-dibuja path:nth-child(2) { animation-delay: .3s; }
.gw-conn-iso.is-dibuja path:nth-child(3) { animation-delay: .5s; }
.gw-conn-iso.is-dibuja path:nth-child(4) { animation-delay: .62s; }
.gw-conn-iso.is-dibuja path:nth-child(5) { animation-delay: .74s; }
@keyframes gw-conn-dibuja { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gw-conn-iso.is-dibuja path { animation: none; stroke-dashoffset: 0; }
}

/* Los iconos de la lista de ventajas, en el lima de la marca y no en el del
   tema: el logotipo de al lado no cambia con el tema, y si el tema es otro
   color la lista parecía de otra app. */
.gw-login-com .gw-login-feats svg { color: #b0e511; }

/* ── El formulario ──────────────────────────────────────────────────────────
   «¿La olvidaste?» sube a la fila de la etiqueta de la contraseña y la casilla
   de mantener la sesión ocupa su propia fila. Con las dos juntas, el texto
   largo de la casilla y el enlace se partían en renglones pegados.
   En el documento el enlace va DESPUÉS del campo (2026-10-11), para que el Tab
   pase del correo a la contraseña; la rejilla lo pinta arriba a la derecha,
   en la fila de la etiqueta. */
.gw-field.gw-login-clave {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 12px; row-gap: 8px;
}
.gw-login-main .gw-login-clave .gw-label { grid-column: 1; grid-row: 1; margin-bottom: 0; min-width: 0; }
.gw-login-clave .gw-login-olvido { grid-column: 2; grid-row: 1; }
.gw-login-clave .gw-input-wrap { grid-column: 1 / -1; grid-row: 2; }
.gw-login-olvido {
  flex: none;
  font-size: var(--gw-fs-sm); font-weight: 650;
  color: var(--gw-brand-on-soft);
  text-decoration: none;
  border-radius: 4px;
}
.gw-login-olvido:hover { text-decoration: underline; }
.gw-login-olvido:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: 2px; }

.gw-login-recordar {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 0;
  font-size: var(--gw-fs-md); font-weight: 600; line-height: 1.4;
  color: var(--gw-text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ═══ El turno en el pie del menú (fase 3 · v37) ═══════════════════════════
   includes/layout.php: «En turno 3 h 12 min», «En pausa · Volver», «Sin marcar
   entrada». Plegado, queda el reloj con su punto de color. Colores de tokens
   directos (no alias): ver gestwork-tokens-y-iconos en la memoria. */
.gw-turno { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 5px 6px 5px 5px; border-radius: var(--gw-r-lg); background: var(--gw-surface-2); border: 1px solid var(--gw-border-soft); min-width: 0; }
.gw-turno-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--gw-text); text-decoration: none; border-radius: var(--gw-r-md); padding: 2px; }
.gw-turno-link:focus-visible { outline: 2px solid var(--gw-brand); outline-offset: 2px; }
.gw-turno-ico { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--gw-surface); color: var(--gw-text-3); border: 1px solid var(--gw-border); }
.gw-turno-ico i[data-lucide], .gw-turno-ico svg { width: 16px; height: 16px; }
.gw-turno-dot { position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gw-surface-2); background: var(--gw-slate-ink); }
.gw-turno[data-estado="turno"] .gw-turno-ico { color: var(--gw-green-ink); background: var(--gw-green-bg); border-color: var(--gw-green-bd); }
.gw-turno[data-estado="turno"] .gw-turno-dot { background: var(--gw-green-ink); }
.gw-turno[data-estado="pausa"] .gw-turno-ico { color: var(--gw-amber-ink); background: var(--gw-amber-bg); border-color: var(--gw-amber-bd); }
.gw-turno[data-estado="pausa"] .gw-turno-dot { background: var(--gw-amber-ink); }
.gw-turno[data-estado="sin_marcar"] .gw-turno-ico { color: var(--gw-rose-ink); background: var(--gw-rose-bg); border-color: var(--gw-rose-bd); }
.gw-turno[data-estado="sin_marcar"] .gw-turno-dot { background: var(--gw-rose-ink); }
.gw-turno-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gw-turno-txt b { font-size: 12.5px; font-weight: 700; color: var(--gw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-turno-txt em { font-style: normal; font-size: 11.5px; color: var(--gw-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gw-turno-volver { flex: none; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--gw-amber-bd); background: var(--gw-amber-bg); color: var(--gw-amber-ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.gw-turno-volver:disabled { opacity: .6; cursor: progress; }
.gw-sidebar.is-collapsed .gw-turno { padding: 4px 0; justify-content: center; background: transparent; border-color: transparent; }
.gw-sidebar.is-collapsed .gw-turno-link { justify-content: center; gap: 0; }
/* «Mi día» en la hoja «Más» del teléfono: el mismo color del estado. */
.gw-mas-turno[data-estado="turno"] .gw-mas-ico { color: var(--gw-green-ink); background: var(--gw-green-bg); border-color: var(--gw-green-bd); }
.gw-mas-turno[data-estado="pausa"] .gw-mas-ico { color: var(--gw-amber-ink); background: var(--gw-amber-bg); border-color: var(--gw-amber-bd); }
.gw-mas-turno[data-estado="sin_marcar"] .gw-mas-ico { color: var(--gw-rose-ink); background: var(--gw-rose-bg); border-color: var(--gw-rose-bd); }