/* ============================================================
   SAPIENS PLANNING · app.css
   Built on the Sapiens design system (styles.css tokens).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sap-cream);
  color: var(--sap-ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(225,6,0,.16); }

:root {
  --accent: #E10600;            /* editorial red — used sparingly */
  --accent-ink: #B60500;
  --ease: cubic-bezier(.22,.61,.36,1);          /* curva base (la que ya se usaba como fallback) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* ease-out fuerte para entradas — responde al instante */
  --date-today: #d97706; --date-tomorrow: #b45309; --date-soon: #78716c;  /* urgencia de fechas (tarjetas y lista) */
  --sap-clay: #A6764C;
  --sap-foco-bajo: #E78C7C; --sap-foco-medio: #ECB870; --sap-foco-alto: #7BAE92;  /* niveles de foco (lente Equilibrio · tarjeta Foco) */  /* tierra cálida — hábitos (dashboard Mi tiempo · lente Equilibrio) */
  --sidebar-w: 268px;
  --panel-w: 460px;
  /* status (mirror of data.js) */
  /* paleta VÍVIDA definitiva (panel de diseño + juez, contraste WCAG ink/soft ≥ 4.5 verificado):
     Pendiente = terracota encendida de marca (adiós gris), matices bien separados entre sí */
  --st-idea:      #7A3BE8; --st-idea-soft:     #E0CDFF; --st-idea-ink:     #5324B8;
  --st-pendiente: #D65F26; --st-pendiente-soft:#FFD6B8; --st-pendiente-ink:#943E0C;
  --st-progreso:  #0C86CE; --st-progreso-soft: #BFE2FF; --st-progreso-ink: #0A5A94;
  --st-revision:  #E28C00; --st-revision-soft: #FFE293; --st-revision-ink: #7A5300;
  --st-hecho:     #0B7B4E; --st-hecho-soft:    #B4EDC8; --st-hecho-ink:    #07603C;
  /* alias de compatibilidad: nombres usados por reglas viejas sin token definido —
     sin esto los menús (.proj-menu/.card-menu/.ctx-menu/.msel-pop) quedan TRANSPARENTES
     (var() inválida → background inicial) y `font: … var(--ff)` cae a serif */
  --bg: var(--sap-cream);
  --line: var(--border-on-light);
  --fg: var(--sap-ink);
  --border: var(--border-on-light);
  --sidebar-hover: var(--sap-sand);
  --secondary: var(--text-muted-on-light);
  --ink-soft: var(--text-muted-on-light);
  --ff: var(--font-ui);
  --sap-green: var(--sap-teal);
  --sap-terracotta: #C96442;
}

/* —— shared type helpers —— */
.disp { font-family: var(--font-display); text-transform: uppercase; line-height: .9;
        letter-spacing: .005em; margin: 0; font-weight: 400; }
.serif { font-family: var(--font-serif); letter-spacing: -.01em; }
.eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: .14em;
           text-transform: uppercase; font-weight: 600; color: var(--text-muted-on-light); }
.muted { color: var(--text-muted-on-light); }

.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
       border-radius: var(--radius-pill); padding: 11px 20px; font-weight: 600;
       font-size: 14px; border: none; background: none; line-height: 1;
       transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease; }
.btn:active { transform: scale(.97); }   /* feedback de presión más perceptible (rango 0.95–0.98) */
/* botón deshabilitado: inerte visual y táctil — bloquea el scale(.97) de :active */
.btn:disabled, .btn:disabled:hover, .btn:disabled:active,
.btn[disabled], button:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; transform: none !important; box-shadow: none; }
.btn .ic { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ink { background: var(--sap-ink); color: var(--sap-cream); }
.btn-ink:hover { background: #2a2320; }
.btn-line { box-shadow: inset 0 0 0 1px var(--border-on-light); color: var(--sap-ink); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.btn-ghost { color: var(--text-muted-on-light); }
.btn-ghost:hover { background: var(--sap-sand); color: var(--sap-ink); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-danger { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(225,6,0,.4); background:#fff; }
.btn-danger:hover { background: var(--accent); color: #fff; }

/* ============================================================
   PILLS / STATUS CHIPS / AVATARS
   ============================================================ */
.chip { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill);
        padding: 5px 11px 5px 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* anillo al 55% (al 32% era casi invisible sobre el soft) + halo del dot: el chip se lee como objeto */
.chip-idea { background: var(--st-idea-soft); color: var(--st-idea-ink); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--st-idea) 55%, transparent); }
.chip-idea .dot { background: var(--st-idea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-idea) 20%, transparent); }
.chip-pendiente { background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--st-pendiente) 55%, transparent); }
.chip-pendiente .dot { background: var(--st-pendiente); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-pendiente) 20%, transparent); }
.chip-progreso { background: var(--st-progreso-soft); color: var(--st-progreso-ink); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--st-progreso) 55%, transparent); }
.chip-progreso .dot { background: var(--st-progreso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-progreso) 20%, transparent); }
.chip-revision { background: var(--st-revision-soft); color: var(--st-revision-ink); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--st-revision) 55%, transparent); }
.chip-revision .dot { background: var(--st-revision); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-revision) 20%, transparent); }
.chip-hecho { background: var(--st-hecho-soft); color: var(--st-hecho-ink); box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--st-hecho) 55%, transparent); }
.chip-hecho .dot { background: var(--st-hecho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-hecho) 20%, transparent); }

.tag { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
       padding: 4px 11px; font-size: 12px; font-weight: 600;
       box-shadow: inset 0 0 0 1px var(--border-on-light); color: var(--text-muted-on-light); white-space: nowrap; }
.tag.client { color: var(--sap-ink); }

.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
      font-weight: 700; color: #14110F; flex-shrink: 0; font-size: 12px;
      box-shadow: inset 0 0 0 1px rgba(16,9,6,.18); }
.av-24 { width: 24px; height: 24px; font-size: 10.5px; }
.av-28 { width: 28px; height: 28px; font-size: 11px; }
.av-32 { width: 32px; height: 32px; font-size: 12px; }
.av-40 { width: 40px; height: 40px; font-size: 14px; }
.av-48 { width: 48px; height: 48px; font-size: 15.5px; }
.av-row { display: inline-flex; }
.av-row .av { margin-left: -8px; box-shadow: inset 0 0 0 1px rgba(16,9,6,.18), 0 0 0 2px var(--sap-cream); }
.av-row .av:first-child { margin-left: 0; }

/* progress bar */
.prog { height: 6px; border-radius: 999px; background: var(--sap-stone); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 999px; background: var(--st-hecho); transition: width .24s var(--ease-out, ease); }
.prog.thin { height: 4px; }

/* ============================================================
   LOGIN  (Pantalla 1)
   ============================================================ */
.login { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
         background: var(--sap-dark); overflow: hidden; }
.login.hide { display: none; }
.login__bg { position: absolute; inset: 0; z-index: 0; }
.login__bg video, .login__bg img { width: 100%; height: 100%; object-fit: cover; }
.login__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(16,9,6,.18), rgba(16,9,6,.62)); }
.login__card { position: relative; z-index: 2; display: grid; place-items: center; padding: 24px; }

/* —— warm welcome card —— */
.welcome { width: min(440px, 92vw); padding: 44px 40px 36px; text-align: center; position: relative;
  border-radius: 28px; background: rgba(255,252,245,.93);
  box-shadow: 0 24px 70px rgba(16,9,6,.5), inset 0 0 0 1px rgba(255,252,245,.6);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.welcome::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--sap-teal), var(--sap-rose) 52%, var(--sap-orange)); }
.welcome__iso { display: block; width: 54px; height: 54px; color: var(--sap-ink); }
.welcome__title { margin: 22px 0 0; font-size: 38px; line-height: 1.02;
  color: var(--sap-ink); letter-spacing: -.015em; }

/* (el formulario vive sobre la TARJETA CREMA — nada de blancos translúcidos del diseño
   oscuro anterior: quedaban invisibles, "campos fantasma") */
.login__div { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 290px; margin: 18px auto 0; color: rgba(16,9,6,.5); font-size: 12px; }
.login__div::before, .login__div::after { content: ""; flex: 1; height: 1px; background: rgba(16,9,6,.16); }
.login__form { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 290px; margin: 14px auto 0; }
.login__inp { padding: 12px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(16,9,6,.22);
  background: #fff; color: var(--sap-ink); font-size: 16px; outline: none; }   /* 16px: sin auto-zoom iOS */
.login__inp::placeholder { color: rgba(16,9,6,.42); }
.login__inp:focus { border-color: rgba(16,9,6,.5); box-shadow: 0 0 0 3px rgba(245,131,68,.18); }
.login__submit { padding: 12px 16px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: var(--sap-ink); color: var(--sap-cream); font-weight: 700; font-size: 14px; }
.login__submit:hover { transform: translateY(-1px); }
.login__submit:disabled { opacity: .6; cursor: default; }
.login__err { color: #B4372A; font-size: 13px; margin: 2px 0 0; }
.login__err.hide { display: none; }

.login__google { margin-top: 28px; padding: 15px 30px; border-radius: var(--radius-pill);
  background: var(--sap-cream); white-space: nowrap;
  color: var(--sap-ink); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center;
  justify-content: center; gap: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(245,131,68,.55), 0 10px 26px rgba(245,131,68,.18);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.login__google:hover { background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--sap-orange), 0 14px 32px rgba(245,131,68,.32); }
.login__google:active { transform: scale(.99); }
.welcome__foot { margin-top: 18px; font-size: 12.5px; color: var(--text-muted-on-light); }

/* welcome card entrance — transform-only so the card is ALWAYS visible even if
   the animation never runs (background tab, reduced motion, print, no-JS) */
@media (prefers-reduced-motion: no-preference) {
  .welcome { animation: welcomeCard .55s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes welcomeCard {
  from { transform: translateY(16px) scale(.99); }
  to   { transform: none; }
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: none; min-height: 100vh; }
.app.show { display: block; }

/* —— Sidebar —— */
.side { position: fixed; left: 0; top: 0; width: var(--sidebar-w); height: 100vh; overflow: hidden;
        background: var(--sap-dark); color: var(--sap-cream);
        border-right: 1px solid rgba(0,0,0,.2); z-index: 40;
        transition: transform .32s cubic-bezier(.4,0,.2,1); }
.app.show.nav-collapsed .side { transform: translateX(-100%); }
.side__inner { width: var(--sidebar-w); height: 100%; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; padding: 22px 16px; }
.side__top { display: flex; align-items: center; gap: 8px; padding-bottom: 22px; }
/* selector de empresa (solo visible con 2+ membresías) */
.org-switch { position: relative; flex-shrink: 0; }
.org-switch__btn { width: 26px; height: 26px; border-radius: 8px; border: none; background: rgba(255,255,255,.08);
  color: var(--sap-cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.org-switch__btn .ic { width: 14px; height: 14px; }
.org-switch__btn:hover { background: rgba(255,255,255,.18); }
.org-menu { position: absolute; top: 32px; left: -120px; min-width: 200px; background: var(--sap-cream); color: var(--sap-ink);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.4); padding: 6px; z-index: 400; }
.org-menu.hide { display: none; }
.org-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: none;
  background: transparent; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--sap-ink); text-align: left; }
.org-menu__item:hover { background: rgba(0,0,0,.07); }
.org-menu__item.on { color: var(--st-activo); }
.org-menu__item .ic { width: 14px; height: 14px; flex-shrink: 0; }
.org-menu__sp { width: 14px; flex-shrink: 0; }

.side__brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 4px 6px 10px;
  font-family: var(--font-serif); text-transform: none; font-size: 25px; font-weight: 500;
  letter-spacing: -.005em; line-height: 1; white-space: nowrap; overflow: hidden; }
.side__brand svg { width: 28px; height: 28px; flex-shrink: 0; }
.side__collapse { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 9px;
  background: rgba(255,252,245,.06); color: var(--text-muted-on-dark);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .14s ease, color .14s ease; }
.side__collapse:hover { background: rgba(255,252,245,.12); color: var(--sap-cream); }
.side__collapse .ic { width: 18px; height: 18px; }

/* reveal tab — only visible when the sidebar is folded */
.nav-reveal { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60;
  width: 26px; height: 72px; border: 1px solid rgba(0,0,0,.2); border-left: none; border-radius: 0 13px 13px 0;
  background: var(--sap-dark); color: var(--sap-cream); cursor: pointer; padding: 0;
  display: none; align-items: center; justify-content: center;
  box-shadow: 6px 0 22px rgba(16,9,6,.22); transition: width .16s ease, background .16s ease; }
.nav-reveal:hover { width: 34px; background: #1d130d; }
.nav-reveal:active { background: #2a1c12; }
.nav-reveal .ic { width: 18px; height: 18px; transition: transform .16s ease; }
.nav-reveal:hover .ic { transform: translateX(2px); }
.app.show.nav-collapsed ~ .nav-reveal { display: inline-flex; }

/* respect reduced-motion for the fold + reveal */
@media (prefers-reduced-motion: reduce) {
  .side, .main, .nav-reveal, .nav-reveal .ic { transition: none !important; }
}
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--text-muted-on-dark); padding: 18px 12px 8px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--text-muted-on-dark); font-weight: 500; font-size: 14.5px; position: relative;
  transition: background .14s ease, color .14s ease; }
.nav-item:hover { background: rgba(255,252,245,.06); color: var(--sap-cream); }
.nav-item.active { background: rgba(255,252,245,.08); color: var(--sap-cream); }
.nav-item.active::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-item .ic { width: 18px; height: 18px; }
.nav-item .count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-dark);
  background: rgba(255,252,245,.08); border-radius: 999px; padding: 2px 8px; }
/* App externa (abre en pestaña nueva): ícono de "salida" tenue a la derecha */
.nav-item.nav-extapp .extapp-ic { margin-left: auto; display: inline-flex; opacity: .5; }
.nav-item.nav-extapp .extapp-ic .ic { width: 14px; height: 14px; }
.nav-item.nav-extapp:hover .extapp-ic { opacity: .9; }
/* collapsible nav groups */
.nav-row { display: flex; align-items: center; gap: 2px; border-radius: 12px; position: relative; }
.nav-row .nav-item { flex: 1; min-width: 0; }
.nav-row .nav-item:hover { background: transparent; }
.nav-row:hover { background: rgba(255,252,245,.06); }
.nav-row.active { background: rgba(255,252,245,.08); }
.nav-row.active .nav-item, .nav-row .nav-item.active { background: transparent; }
.nav-row.active::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-row .nav-item.active::before { display: none; }
.nav-toggle { border: none; background: none; color: var(--text-muted-on-dark); padding: 8px; margin-right: 2px;
  border-radius: 8px; display: inline-flex; cursor: pointer; flex-shrink: 0; transition: transform .2s ease, color .14s ease, background .14s ease; }
.nav-toggle .ic { width: 15px; height: 15px; }
.nav-toggle:hover { color: var(--sap-cream); background: rgba(255,252,245,.1); }
.nav-toggle.open { transform: rotate(90deg); }
.nav-empty { display: block; padding: 8px 12px 8px 14px; font-size: 12.5px; color: var(--text-muted-on-dark);
  font-style: italic; font-family: var(--font-serif); }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 0; }
.nav-sub .nav-item { font-size: 13.5px; padding: 8px 12px 8px 14px; }
.nav-sub .nav-item .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.side__spacer { flex: 1; }
.side__user { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 14px;
  border: 1px solid var(--border-on-dark); margin-top: 12px; }
.side__user .meta { line-height: 1.25; min-width: 0; }
.side__user .meta b { font-size: 13.5px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__user .meta span { font-size: 11.5px; color: var(--text-muted-on-dark); }
.side__user .out { margin-left: auto; color: var(--text-muted-on-dark); display: inline-flex; padding: 6px; border-radius: 8px; }
.side__user .out:hover { background: rgba(255,252,245,.08); color: var(--sap-cream); }

/* —— Main area —— */
.main { min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w);
  transition: margin-left .32s cubic-bezier(.4,0,.2,1); }
.app.show.nav-collapsed .main { margin-left: 0; }
.view { padding: 36px 44px 80px; max-width: 1320px; width: 100%; margin: 0 auto; flex: 1; }
.view.kanban-view { max-width: none; }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted-on-light);
  font-weight: 500; margin-bottom: 14px; flex-wrap: wrap; }
.crumbs a, .crumbs b { white-space: nowrap; }
.crumbs a:hover { color: var(--sap-ink); }
.crumbs .sep { opacity: .5; }
.crumbs b { color: var(--sap-ink); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 32px; }
.page-head h1 { font-family: var(--font-display); text-transform: uppercase; line-height: .9;
  font-size: clamp(40px, 4.4vw, 62px); margin: 0; }
.page-head .lead { font-family: var(--font-serif); font-size: 18px; color: var(--text-muted-on-light);
  margin: 12px 0 0; max-width: 60ch; letter-spacing: -.01em; }
.page-head .actions { display: flex; gap: 10px; align-items: center; }

/* ============================================================
   DASHBOARD (Pantalla 2)
   ============================================================ */
.greet { margin-bottom: 30px; }
.greet h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(38px,4.2vw,58px);
  line-height: .92; margin: 0; }
.greet .date { font-family: var(--font-serif); font-style: italic; font-size: 18px;
  color: var(--text-muted-on-light); margin-top: 8px; }

.dash-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.dash-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-col__head h2 { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.dash-col__head .n { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light);
  background: var(--sap-sand); border-radius: 999px; padding: 2px 9px; }
.dash-col.overdue .dash-col__head h2 { color: var(--accent); }
.dash-col.overdue .dash-col__head .n { background: rgba(225,6,0,.1); color: var(--accent-ink); }
.dash-col__list { display: flex; flex-direction: column; gap: 12px; min-height: 44px; border-radius: var(--radius-md); transition: box-shadow .15s ease, background .15s ease; }
.dash-col.drag-over .dash-col__list { background: #fff; box-shadow: inset 0 0 0 2px var(--col-accent, var(--sap-ink)); }

/* task card (dashboard + kanban share base) */
.tcard { background: var(--sap-cream); border-radius: var(--radius-sm); padding: 15px 16px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); cursor: pointer; text-align: left; width: 100%;
  display: block; transition: transform .14s ease, box-shadow .14s ease; }
.tcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.tcard.is-overdue { box-shadow: inset 0 0 0 1px rgba(225,6,0,.45); }
.tcard.is-overdue:hover { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-soft); }
.tcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tcard__name { font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; line-height: 1.28;
  letter-spacing: -.01em; color: var(--sap-ink); margin: 0; }
.tcard__meta { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.tcard__proj { font-size: 12px; color: var(--text-muted-on-light); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; }
.tcard__proj .pdot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.tcard__date { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light);
  display: inline-flex; align-items: center; gap: 5px; }
.tcard__date.over, .tcard__date.due-overdue { color: var(--accent); font-weight: 700; }
.tcard__date.due-today { color: var(--date-today); font-weight: 700; }
.tcard__date.due-tomorrow { color: var(--date-tomorrow); }
.tcard__date.due-soon { color: var(--date-soon); }
.tcard__date .ic { width: 13px; height: 13px; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

.empty { padding: 34px 22px; text-align: center; border-radius: var(--radius-md);
  border: 1px dashed var(--border-on-light); background: color-mix(in oklab, var(--sap-cream) 55%, transparent); }
.empty p { font-family: var(--font-serif); font-style: italic; color: var(--text-muted-on-light);
  margin: 0; font-size: 15.5px; line-height: 1.5; max-width: 42ch; margin-inline: auto; }

/* foco accesible: anillo visible solo al navegar con teclado (no en clic de mouse) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ——— Mis tareas (freelancer landing) ——— */
.mt-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
/* scopeado a .mt-list: evita la colisión con el .mt-row del form de tiempo manual (más abajo) */
.mt-list .mt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; padding: 16px 20px; background: var(--sap-cream);
  border: 1px solid var(--border-on-light); border-radius: var(--radius-md); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.mt-list .mt-row:hover { transform: translateY(-1px); border-color: var(--sap-ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.mt-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt-name { font-weight: 600; color: var(--text-on-light); font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-meta { font-size: 13px; color: var(--text-muted-on-light); }
.mt-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mt-date { font-size: 13px; color: var(--text-muted-on-light); display: inline-flex;
  align-items: center; gap: 4px; white-space: nowrap; }
.mt-date.due-overdue { color: var(--sap-danger, #c0392b); font-weight: 600; }
.mt-date.due-today { color: var(--sap-ink); font-weight: 600; }
.mt-date svg { width: 15px; height: 15px; }

/* ============================================================
   SPACES GRID (Pantalla 3)
   ============================================================ */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.space-card { background: var(--sap-cream); border-radius: var(--radius-md); padding: 26px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); text-align: left; display: flex; flex-direction: column;
  gap: 14px; transition: transform .15s ease, box-shadow .15s ease; min-height: 200px; }
.space-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.space-card__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #fff; }
.space-card__ic .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.space-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 27px; line-height: .95; margin: 0; }
.space-card p { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.45;
  color: var(--text-muted-on-light); margin: 0; }
.space-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-on-light);
  display: flex; align-items: center; justify-content: space-between; }
.space-card__foot .n { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: 1; }
.space-card__foot .n span { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: var(--text-muted-on-light); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.space-card__foot .go { color: var(--text-muted-on-light); display: inline-flex; }
.space-card:hover .space-card__foot .go { color: var(--sap-ink); }

/* ============================================================
   PROJECTS LIST (Pantalla 4)
   ============================================================ */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.proj-card { background: var(--sap-cream); border-radius: var(--radius-md); padding: 22px 24px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); text-align: left; display: flex; flex-direction: column;
  gap: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.proj-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.proj-card.is-archived { position: relative; }
.proj-card.is-archived .proj-card__top h3 { color: var(--text-muted-on-light); }
.proj-done-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: var(--st-hecho); color: #fff; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; box-shadow: var(--shadow-soft); }
.proj-done-badge .ic { width: 13px; height: 13px; stroke-width: 2.4; }
/* botón "Terminados" en el header del espacio (toggle) */
.space-arch-toggle.on { background: var(--st-hecho-soft); color: var(--st-hecho-ink); box-shadow: inset 0 0 0 1px var(--st-hecho); }
/* sección de proyectos terminados */
.done-projs { margin-top: 32px; padding-top: 20px; border-top: 1px dashed var(--border-on-light); }
.done-projs__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 18px;
  color: var(--text-muted-on-light); margin: 0 0 16px; }
.done-projs__h .ic { width: 18px; height: 18px; color: var(--st-hecho); }
.done-projs__h .n { font-family: var(--font-ui); font-size: 12px; font-weight: 700; background: var(--st-hecho-soft);
  color: var(--st-hecho-ink); border-radius: 999px; padding: 1px 9px; }
.done-projs .proj-card { opacity: .82; }
.done-projs .proj-card:hover { opacity: 1; }
/* cabecera del proyecto: badge terminado + botones guardar/reactivar */
.proj-done-tag { background: var(--st-hecho-soft) !important; color: var(--st-hecho-ink) !important; font-weight: 700; }
.proj-done-tag .ic { width: 13px; height: 13px; }
.btn.proj-guardar { background: var(--st-hecho); color: #fff; }
.btn.proj-guardar:hover { filter: brightness(1.05); }
.proj-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.proj-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.18;
  letter-spacing: -.015em; margin: 0; }
.proj-card .client { margin-top: 7px; }
.proj-card__prog { display: flex; flex-direction: column; gap: 7px; }
.proj-card__prog .row { display: flex; align-items: center; justify-content: space-between; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); }
.proj-card__prog .row b { color: var(--sap-ink); }
.proj-card__foot { display: flex; align-items: center; justify-content: space-between; }
.proj-card__foot .tcount { font-size: 13px; color: var(--text-muted-on-light); font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; }

/* ============================================================
   SPACE — vistas LISTA + KANBAN de proyectos (conservan la portada)
   ============================================================ */
.spaceview-toggle { margin-right: 4px; }
/* miniatura de portada (solo lectura) */
.proj-thumb { position: relative; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); }
.proj-thumb--empty { display: flex; align-items: center; justify-content: center; }
.proj-thumb--empty .ic { width: 38%; height: 38%; opacity: .85; }
/* botón cámara para cambiar portada directo desde la miniatura (kanban / lista) */
.proj-thumb__cam { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 7px; cursor: pointer;
  background: rgba(20,18,16,.55); color: #fff; opacity: 0; transition: opacity .14s ease, transform .12s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.proj-thumb__cam .ic { width: 15px; height: 15px; }
.proj-thumb:hover .proj-thumb__cam, .proj-thumb__cam:focus-visible { opacity: 1; }
.proj-thumb__cam:hover { background: rgba(20,18,16,.78); transform: scale(1.06); }
.proj-thumb--empty .proj-thumb__cam { opacity: .85; background: rgba(20,18,16,.4); }
/* táctil: sin hover, el botón se queda visible para que se pueda usar */
@media (hover: none) { .proj-thumb__cam { opacity: .9; } }

/* ── Inventario (Ayni · Fase 1) ────────────────────────────── */
.inv-wrap { padding: 36px 44px 80px; max-width: 1320px; width: 100%; margin: 0 auto; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.inv-head h1 { margin: 0; }
.inv-head .muted { margin: 2px 0 0; }
.inv-tabs { display: inline-flex; gap: 4px; background: var(--sap-paper); border: 1px solid var(--border-on-light); border-radius: var(--radius-pill); padding: 3px; margin: 0 0 18px; }
.inv-tabs--sm { margin: 0 0 12px; }
.inv-tab { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); background: none; border: 0; padding: 7px 16px; border-radius: var(--radius-pill); cursor: pointer; }
.inv-tab.active { background: var(--sap-cream); color: var(--sap-ink); box-shadow: var(--shadow-soft); }
.inv-section { display: flex; flex-direction: column; gap: 14px; }
.inv-card { background: var(--sap-cream); border: 1px solid var(--border-on-light); border-radius: 14px; padding: 14px 16px; }
.inv-help { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted-on-light); margin: 0 0 2px; }
.inv-formrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-in { font-family: var(--font-ui); font-size: 13px; color: var(--sap-ink); background: var(--sap-paper); border: 1px solid var(--border-on-light); border-radius: 9px; padding: 7px 10px; min-width: 0; }
.inv-in:focus { outline: none; border-color: var(--sap-ink); }
.inv-in--num { width: 92px; }
.inv-in--code { width: 80px; }
.inv-in--wide { flex: 1; min-width: 180px; }
.wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.wh-card { display: flex; flex-direction: column; gap: 10px; }
.wh-card__top { display: flex; gap: 8px; align-items: center; }
.wh-name-in { flex: 1; font-weight: 600; }
.wh-card__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-lbl { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 12px; color: var(--text-muted-on-light); }
.inv-lbl .inv-in--num { width: 64px; }
.wh-cap { display: flex; flex-direction: column; gap: 4px; }
.wh-cap.inline { flex-direction: row; align-items: center; gap: 10px; min-width: 220px; }
.wh-cap__bar { height: 9px; border-radius: 999px; background: var(--sap-paper); overflow: hidden; flex: 1; }
.wh-cap__bar i { display: block; height: 100%; background: var(--st-activo); border-radius: 999px; }
.wh-cap__bar.over i { background: #B5564A; }
.wh-cap__txt { font-family: var(--font-ui); font-size: 11.5px; color: var(--text-muted-on-light); white-space: nowrap; }
.cub-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.cub-card { display: flex; flex-direction: column; gap: 10px; }
.cub-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cub-name { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--sap-ink); }
.cub-derived { margin-left: auto; font-family: var(--font-ui); font-size: 11.5px; color: var(--text-muted-on-light); }
.cub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.inv-lbl2 { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-ui); font-size: 11.5px; color: var(--text-muted-on-light); }
.inv-lbl2 span { display: flex; align-items: center; gap: 5px; }
.inv-lbl2 .inv-in { width: 100%; }
.inv-lbl2 .inv-in--num { width: 66px; }
.cub-flags { display: flex; gap: 16px; flex-wrap: wrap; }
.inv-check { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; color: var(--sap-ink); cursor: pointer; }
.stock-sec { padding: 0; overflow: hidden; }
.stock-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-on-light); flex-wrap: wrap; }
.stock-sec__head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wh-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--sap-paper); font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--sap-ink); }
.inv-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 13px; }
.inv-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light); padding: 8px 12px; }
.inv-table td { padding: 9px 12px; border-top: 1px solid var(--border-on-light); color: var(--sap-ink); vertical-align: middle; }
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table .tr-sub { color: var(--text-muted-on-light); font-size: 12px; }
.inv-table .inv-empty-row { text-align: center; padding: 14px; }
.inv-table tr.lot-exp td { background: color-mix(in oklab, #B5564A 8%, transparent); }
.inv-table tr.lot-soon td { background: color-mix(in oklab, #E0991B 9%, transparent); }
.lot-actions { text-align: right; width: 40px; }
/* alertas perecibilidad */
.inv-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.inv-alert { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); }
.inv-alert .ic { width: 14px; height: 14px; }
.inv-alert--exp { background: color-mix(in oklab, #B5564A 14%, var(--sap-cream)); color: #8a3b32; box-shadow: inset 0 0 0 1px color-mix(in oklab, #B5564A 35%, transparent); }
.inv-alert--soon { background: color-mix(in oklab, #E0991B 16%, var(--sap-cream)); color: #8a5e0c; box-shadow: inset 0 0 0 1px color-mix(in oklab, #E0991B 38%, transparent); }
/* mapa isométrico */
.inv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); background: var(--sap-cream); border: 1px solid var(--border-on-light); border-radius: var(--radius-pill); padding: 6px 14px; cursor: pointer; }
.inv-chip.active { color: var(--sap-ink); border-color: var(--sap-ink); }
.map-card { display: flex; flex-direction: column; gap: 10px; }
.map-proj { display: flex; align-items: center; gap: 12px; }
.map-proj .inv-range { flex: 1; max-width: 360px; }
.map-proj__txt { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--sap-ink); white-space: nowrap; }
.iso-stage { position: relative; width: 100%; }
.iso-stage svg { display: block; width: 100%; height: auto; }
.iso-over { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: #8a3b32; background: color-mix(in oklab, #B5564A 14%, var(--sap-cream)); padding: 5px 11px; border-radius: var(--radius-pill); }
.iso-over .ic { width: 13px; height: 13px; }
.iso-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 4px; border-top: 1px solid var(--border-on-light); }
.iso-leg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted-on-light); }
.iso-leg__sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
/* ── Por Pagar (Tesorería) ─────────────────────────────────── */
.pay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 16px; }
.pay-card { background: var(--sap-cream); border: 1px solid var(--border-on-light); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pay-card--strong { background: var(--sap-ink); border-color: var(--sap-ink); }
.pay-card__lbl { font-family: var(--font-ui); font-size: 12px; color: var(--text-muted-on-light); }
.pay-card--strong .pay-card__lbl { color: color-mix(in oklab, #fff 70%, transparent); }
.pay-card__val { font-family: var(--font-ui); font-size: 22px; font-weight: 700; color: var(--sap-ink); }
.pay-card--strong .pay-card__val { color: #fff; }
.pay-sec { padding: 0; overflow: hidden; margin-bottom: 14px; }
.pay-sec__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border-on-light); }
.pay-sec__head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pay-sec__head h3 .ic { width: 18px; height: 18px; }
.pay-sec__head .muted { font-size: 12px; }
.pay-newform { border: 0; border-bottom: 1px solid var(--border-on-light); border-radius: 0; }
.pay-sec .inv-table { margin: 0; }
.pay-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); }
.pay-pill .ic { width: 12px; height: 12px; }
.pay-ok { background: color-mix(in oklab, var(--st-activo) 16%, var(--sap-cream)); color: #2E7D5B; }
.pay-due { background: color-mix(in oklab, #E0991B 16%, var(--sap-cream)); color: #8a5e0c; }
.pay-late { background: color-mix(in oklab, #B5564A 15%, var(--sap-cream)); color: #8a3b32; }
/* Cuentas por Pagar · toggle activa/inactiva + fila desactivada */
.pay-toggle { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill); border: none; cursor: pointer; }
.pay-toggle .ic { width: 12px; height: 12px; }
.pay-toggle.is-on { background: color-mix(in oklab, var(--st-activo) 16%, var(--sap-cream)); color: #2E7D5B; }
.pay-toggle.is-off { background: var(--border-on-light); color: var(--text-muted-on-light); }
.pay-toggle:hover { box-shadow: inset 0 0 0 1px currentColor; }
.ap-acct-off td { opacity: .55; }
.ap-acct-off td:first-child { opacity: .7; }
.ap-acct-del:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Proyección de caja (CxC − CxP) */
.caja-tabs { display: inline-flex; gap: 4px; margin-left: auto; }
.caja-tab { font-family: var(--font-ui); font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-light); background: var(--sap-cream); cursor: pointer; color: var(--text-muted-on-light); }
.caja-tab.on { background: var(--sap-ink); color: #fff; border-color: var(--sap-ink); }
.caja-body { padding: 6px 18px 16px; }
.caja-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #F1ECE3; }
.caja-row:last-child { border-bottom: none; }
.caja-sign { width: 16px; text-align: center; font-weight: 700; color: var(--text-muted-on-light); font-size: 15px; flex: 0 0 auto; }
.caja-lbl { flex: 1; color: var(--sap-ink); font-size: 13.5px; }
.caja-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sap-ink); white-space: nowrap; }
.caja-in .caja-sign, .caja-in .caja-amt { color: #2E7D5B; }
.caja-net { margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--sap-ink); border-bottom: none; }
.caja-net .caja-lbl { font-weight: 700; }
.caja-net .caja-amt { font-size: 18px; font-family: var(--font-display); }
.caja-net.is-pos .caja-amt, .caja-net.is-pos .caja-sign { color: #1F6044; }
.caja-net.is-neg .caja-amt, .caja-net.is-neg .caja-sign { color: #B0432F; }
.pay-form { border: 2px solid var(--sap-ink); }
.pay-form__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pay-form__head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pay-form__head h3 .ic { width: 18px; height: 18px; }
.pay-form .inv-formrow { margin-bottom: 10px; align-items: flex-end; }
.pay-form input[type=file] { font-family: var(--font-ui); font-size: 12px; }
/* cronograma de pagos (matriz operativa) */
.crono-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.crono-month { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--sap-ink); min-width: 150px; }
.crono-table td { vertical-align: middle; }
.crono-who { display: flex; align-items: center; gap: 8px; }
.crono-name { font-weight: 500; }
.crono-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sap-paper); color: var(--text-muted-on-light); }
.crono-ico .ic { width: 13px; height: 13px; }
.crono-up { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; color: var(--st-activo); }
.crono-up .ic { width: 15px; height: 15px; }
.crono-up input[type=file] { display: none; }
.pay-grat { background: color-mix(in oklab, #8A6FC4 16%, var(--sap-cream)); color: #4a3c7a; }
.crono-payfrom { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted-on-light); }
.crono-payfrom select { min-width: 170px; }
.crono-nav { flex-wrap: wrap; }
.crono-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.crono-table { min-width: 860px; }
.crono-table th, .crono-table td { padding: 10px 12px; }
.crono-acct { max-width: 160px; }
.crono-estado, .crono-comp { display: inline-flex; align-items: center; gap: 6px; }
.crono-undo { display: inline-grid; place-items: center; width: 22px; height: 22px; border: none; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text-muted-on-light); }
.crono-undo:hover { background: color-mix(in oklab, #B5564A 14%, transparent); color: #8a3b32; }
.crono-undo .ic { width: 13px; height: 13px; }
.crono-rxh { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid transparent; }
.crono-rxh .ic { width: 12px; height: 12px; }
.crono-rxh.is-yes { background: color-mix(in oklab, var(--st-activo) 16%, var(--sap-cream)); color: #2E7D5B; border-color: color-mix(in oklab, var(--st-activo) 35%, transparent); }
.crono-rxh.is-no { background: color-mix(in oklab, #B5564A 14%, var(--sap-cream)); color: #8a3b32; border-color: color-mix(in oklab, #B5564A 40%, transparent); }
.crono-rxh:hover { filter: brightness(.97); }
/* —— faltantes en ROJO (comprobante sin subir en un pago hecho) —— */
.crono-up.is-missing { color: #B5564A; font-weight: 700; }
.crono-up.is-missing .ic { color: #B5564A; }
/* —— pago parcial + partes (pagos divididos) —— */
.pay-part { background: color-mix(in oklab, #E0991B 20%, var(--sap-cream)); color: #8a5e0c; }
.crono-table .crono-part td { background: color-mix(in oklab, var(--sap-paper) 60%, transparent); }
.crono-part-ind { padding-left: 26px !important; color: var(--text-muted-on-light); font-family: var(--font-ui); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* —— alertas de meses anteriores (pagos / comprobantes / RxH pendientes) —— */
.crono-alerts { border: 1px solid color-mix(in oklab, #B5564A 32%, transparent); background: color-mix(in oklab, #B5564A 7%, var(--sap-cream)); border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 16px; }
.crono-alerts-head { display: flex; align-items: center; gap: 8px; color: #8a3b32; margin-bottom: 6px; font-family: var(--font-ui); font-size: 13.5px; }
.crono-alerts-head .ic { width: 16px; height: 16px; }
.crono-alerts-head .muted { font-size: 11.5px; font-weight: 500; }
.crono-alert-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--font-ui); font-size: 13px; color: var(--sap-ink); transition: background .12s ease; }
.crono-alert-row:hover { background: color-mix(in oklab, #B5564A 10%, transparent); }
.crono-alert-row:active { transform: scale(0.99); }
.crono-alert-row > .ic { width: 14px; height: 14px; margin-left: auto; color: var(--text-muted-on-light); flex-shrink: 0; }
.ca-month { font-weight: 700; min-width: 132px; }
.ca-bit { padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ca-pay { background: color-mix(in oklab, #B5564A 16%, var(--sap-cream)); color: #8a3b32; }
.ca-comp { background: color-mix(in oklab, #E0991B 18%, var(--sap-cream)); color: #8a5e0c; }
.ca-rxh { background: color-mix(in oklab, #8A6FC4 18%, var(--sap-cream)); color: #4a3c7a; }
/* —— Equipo: input de monto fijo de bonificación —— */
.rc-grat-amt { margin-top: 6px; }
.rc-grat-amt .rc-inp { width: 96px; }

/* —— LISTA —— */
.proj-list { display: flex; flex-direction: column; gap: 10px; }
.proj-row { display: flex; align-items: center; gap: 16px; background: var(--sap-cream);
  border-radius: var(--radius-md); padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--border-on-light);
  cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.proj-row:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.proj-row.is-archived { opacity: .85; }
.proj-row .proj-thumb { width: 88px; height: 62px; }
.proj-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.proj-row__title { display: flex; align-items: center; gap: 10px; }
.proj-row__title h3 { font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 1.15;
  letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-row__done { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: var(--st-hecho-soft);
  color: var(--st-hecho-ink); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; }
.proj-row__done .ic { width: 12px; height: 12px; }
.proj-row__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj-row__date { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted-on-light); }
.proj-row__date .ic { width: 13px; height: 13px; }
.proj-row__prog { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; }
.proj-row__prog .prog { width: 100%; }
.proj-row__pct { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); white-space: nowrap; }
.proj-row__pct b { color: var(--sap-ink); }
.proj-row__status { flex-shrink: 0; }
.proj-row .card-menu-wrap { flex-shrink: 0; }
.proj-row__go { flex-shrink: 0; color: var(--text-muted-on-light); display: flex; }

/* —— KANBAN —— */
.proj-board .col__body { min-height: 60px; }
/* 5 columnas (idea + 4 estados); la de IDEA más angosta que el resto */
.board.proj-board { grid-template-columns: minmax(150px, 0.6fr) repeat(4, minmax(190px, 1fr)); }
@media (max-width: 980px) { .board.proj-board .col[data-col="idea"] { flex: 0 0 58%; } }
.pk-card { padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
/* solo las arrastrables (editables) bloquean el scroll táctil y muestran el cursor de agarre */
.pk-card:not(.is-ro) { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pk-card, .pk-card * { -webkit-user-drag: none; }
.pk-card .proj-thumb { width: 100%; height: 94px; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--border-on-light); }
.pk-card__body { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 12px; }
.pk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.pk-card__name { font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; line-height: 1.2; margin: 0; }
.pk-card__client { align-self: flex-start; }
.pk-card__prog { width: 100%; }
.pk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); }
.pk-card__foot .ic { width: 12px; height: 12px; }
.pk-card .card-menu-btn { margin: -2px -4px 0 0; }
.pk-empty { font-size: 12.5px; color: var(--text-muted-on-light); text-align: center; padding: 16px 8px;
  border: 1px dashed var(--border-on-light); border-radius: 10px; }
/* IDEA: tarjetas compactas, sin portada ni cliente, con nombre completo (envuelve) */
.pk-card--idea .pk-card__body { padding: 7px 9px; gap: 0; }
.pk-card--idea .pk-card__name { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  line-height: 1.25; white-space: normal; word-break: break-word; }
.pk-card--idea .card-menu-btn { margin: -1px -3px 0 0; }
.pk-col[data-col="idea"] .col__body { gap: 7px; }

/* ============================================================
   PROJECT — KANBAN + LIST (Pantalla 5)
   ============================================================ */
.proj-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.proj-head__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.proj-head h1 { font-family: var(--font-display); text-transform: uppercase; line-height: .9;
  font-size: clamp(34px, 3.6vw, 52px); margin: 0; max-width: 22ch; }
.proj-head .sub { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
/* fechas del proyecto (cabecera): Publicación + Entrega */
.proj-dates { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pd-field { display: inline-flex; align-items: center; gap: 5px; background: var(--sap-cream);
  border-radius: 999px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.pd-field > .ic { width: 13px; height: 13px; color: var(--text-muted-on-light); flex-shrink: 0; }
.pd-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted-on-light); }
.proj-date-inp { border: none; background: none; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: var(--sap-ink); padding: 1px 2px; cursor: pointer; color-scheme: light; }
.proj-date-inp::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.proj-dates-ro { display: inline-flex; align-items: center; gap: 5px; }
.proj-dates-ro .ic { width: 13px; height: 13px; margin-right: 2px; }
.pd-dot { margin: 0 6px; color: var(--text-muted-on-light); }
/* fechas en el formulario de nuevo proyecto */
.ns-dates { display: flex; gap: 16px; }
.ns-dates .form-row { flex: 1; }
.proj-head__prog { display: flex; align-items: center; gap: 16px; min-width: 280px; }
.proj-head__prog .prog { flex: 1; }
.proj-head__prog .pct { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.proj-head__prog .pct span { font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: var(--text-muted-on-light); margin-left: 4px; }

.proj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px; }
.viewtoggle { display: inline-flex; background: var(--sap-sand); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.viewtoggle button { border: none; background: none; padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s ease, color .14s ease; }
.viewtoggle button .ic { width: 15px; height: 15px; }
.viewtoggle button.on { background: var(--sap-cream); color: var(--sap-ink); box-shadow: var(--shadow-soft); }

/* Board */
.board { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 16px; align-items: stretch; }
.col { background: var(--sap-paper); border-radius: var(--radius-md); padding: 14px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; gap: 12px;
  min-height: 120px; transition: box-shadow .15s ease, background .15s ease; }
.col.drag-over { background: #fff; box-shadow: inset 0 0 0 2px var(--col-accent, var(--sap-ink)); }
.col__head { display: flex; align-items: center; gap: 9px; padding: 2px 4px; }
.col__head .dot { width: 9px; height: 9px; border-radius: 50%; }
.col__head h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.col__head .n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted-on-light);
  background: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 999px; padding: 1px 9px; }
.col__add { border: none; background: none; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 8px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted-on-light);
  transition: background .14s ease, color .14s ease; }
.col__add:hover { background: var(--sap-cream); color: var(--sap-ink); }
.col__add .ic { width: 15px; height: 15px; }
.col__body { display: flex; flex-direction: column; gap: 10px; min-height: 36px; flex: 1 1 auto; }
.kcard, .dcard { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.kcard, .kcard *, .dcard, .dcard * { -webkit-user-drag: none; }
/* En táctil, touch-action:none bloqueaba el scroll del tablero con el dedo (las tarjetas cubren
   casi todo). En pantallas táctiles priorizamos scrollear; los estados se cambian desde el
   detalle de la tarea / chip de estado. El drag con mouse (escritorio/iPad+trackpad) sigue igual. */
@media (pointer: coarse) {
  .kcard, .dcard, .pk-card:not(.is-ro), .evt-drag { touch-action: pan-x pan-y; }
}
.side__inner, .panel__body, .eq-detail__body, .modal, .tab-sheet { overscroll-behavior: contain; }   /* sin scroll-bleed al fondo en iOS */
.kcard.dragging { opacity: .4; }
.kcard .tcard__name { font-size: 15px; }
/* pointer-drag: floating card follows the cursor */
.kghost { position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; margin: 0 !important;
  box-shadow: var(--shadow-float); background: var(--sap-cream); border-radius: var(--radius-sm);
  box-sizing: border-box; opacity: .97; cursor: grabbing; transition: none !important; }
.kghost:hover { transform: none; }
.kplaceholder { border: 1.5px dashed var(--col-accent, var(--sap-ink)); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--col-accent, #000) 7%, transparent); }
body.dragging-active { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.dragging-active .kcard { cursor: grabbing; }
body.dragging-active .col__add { opacity: .4; }

/* List */
.tlist { background: var(--sap-cream); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-on-light); }
.tlist table { width: 100%; border-collapse: collapse; }
.tlist thead th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--text-muted-on-light); padding: 14px 18px; border-bottom: 1px solid var(--border-on-light); }
.tlist tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border-on-light); font-size: 14px; vertical-align: middle; }
.tlist tbody tr:last-child td { border-bottom: none; }
.tlist tbody tr { cursor: pointer; transition: background .12s ease; }
.tlist tbody tr:hover { background: var(--sap-paper); }
.tlist .c-name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--sap-ink); }
.tlist .c-assignee { display: flex; align-items: center; gap: 9px; color: var(--text-muted-on-light); white-space: nowrap; }
.tlist .c-date { font-weight: 600; color: var(--text-muted-on-light); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
/* celdas editables inline (responsables/fecha): botones con affordance de hover */
.tlist button.c-cell-edit { border: none; background: none; font: inherit; cursor: pointer; text-align: left;
  padding: 5px 9px; margin: -5px -9px; border-radius: 10px; transition: background .12s ease; }
.tlist button.c-cell-edit:hover { background: var(--sap-sand); }
.tlist button.c-cell-edit:active { filter: brightness(.96); }
/* extras del menú flotante: etiqueta, fila activa, check y fecha */
.menu .menu-lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--text-muted-on-light); padding: 7px 10px 5px; }
.menu button.on { background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.menu .asg-check { margin-left: auto; color: var(--st-hecho); display: inline-flex; }
.menu .asg-check .ic { width: 15px; height: 15px; }
.menu .menu-danger { color: #B4372A; }
.menu .menu-datewrap { padding: 7px 8px 5px; border-top: 1px solid var(--border-on-light); margin-top: 5px; }
.menu .menu-date { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--border-on-light); background: #fff; color: var(--sap-ink); }
.tlist .c-date.over, .tlist .c-date.due-overdue { color: var(--accent); }
.tlist .c-date.due-overdue .ic { width: 13px; height: 13px; color: var(--accent); }
.tlist .c-date.due-today { color: var(--date-today); font-weight: 700; }
.tlist .c-date.due-tomorrow { color: var(--date-tomorrow); }
.tlist .c-date.due-soon { color: var(--date-soon); }
.tlist th.col-name { width: 44%; }
/* encabezados ordenables (clic = asc/desc) */
.tlist th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
.tlist th.th-sort:hover { color: var(--sap-ink); }
.tlist th.th-sort.is-sorted { color: var(--sap-ink); }
.tlist th.th-sort .th-arrow { display: inline-block; margin-left: 5px; font-size: 11px; opacity: .45; }
.tlist th.th-sort:hover .th-arrow, .tlist th.th-sort.is-sorted .th-arrow { opacity: 1; }

/* ============================================================
   TASK DETAIL PANEL (Pantalla 6)
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(16,9,6,.42); z-index: 100; opacity: 0;
  pointer-events: none; transition: opacity .28s ease; }
.scrim.show { opacity: 1; pointer-events: auto; }
.panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: var(--panel-w); max-width: 100vw;
  background: var(--sap-cream); z-index: 101; box-shadow: -16px 0 50px rgba(16,9,6,.18);
  transform: translateX(100%); transition: transform .3s var(--ease-out, cubic-bezier(.22,.61,.36,1));
  display: flex; flex-direction: column; }
.panel.show { transform: translateX(0); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--border-on-light); }
.panel__crumb { font-size: 12.5px; color: var(--text-muted-on-light); font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.panel__crumb .pdot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.panel__crumb b { color: var(--sap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__close { border: none; background: none; padding: 8px; border-radius: 9px; color: var(--text-muted-on-light); display: inline-flex; }
.panel__close:hover { background: var(--sap-sand); color: var(--sap-ink); }
.panel__body { padding: 24px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 22px; }
.panel__name { font-family: var(--font-serif); font-weight: 600; font-size: 25px; line-height: 1.18;
  letter-spacing: -.015em; color: var(--sap-ink); border: none; outline: none; width: 100%; resize: none;
  background: #fff; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 10px;
  flex-shrink: 0; min-height: 48px; display: block; }
.panel__name::placeholder { color: var(--text-muted-on-light); font-style: italic; }
.panel__name:focus { box-shadow: inset 0 0 0 1px var(--sap-ink); }

.field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light);
  display: inline-flex; align-items: center; gap: 8px; }
.field > label .ic { width: 15px; height: 15px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: none; background: var(--sap-sand); padding: 7px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); display: inline-flex; align-items: center; gap: 6px;
  transition: transform .1s ease; }
.seg button .dot { width: 8px; height: 8px; border-radius: 50%; }
.seg button:active { transform: scale(.96); }
.seg button.on.s-idea { background: var(--st-idea-soft); color: var(--st-idea-ink); box-shadow: inset 0 0 0 1px var(--st-idea); }
.seg button.on.s-pendiente { background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); box-shadow: inset 0 0 0 1px var(--st-pendiente); }
.seg button.on.s-progreso { background: var(--st-progreso-soft); color: var(--st-progreso-ink); box-shadow: inset 0 0 0 1px var(--st-progreso); }
.seg button.on.s-revision { background: var(--st-revision-soft); color: var(--st-revision-ink); box-shadow: inset 0 0 0 1px var(--st-revision); }
.seg button.on.s-hecho { background: var(--st-hecho-soft); color: var(--st-hecho-ink); box-shadow: inset 0 0 0 1px var(--st-hecho); }

.psel { display: inline-flex; align-items: center; gap: 9px; background: #fff; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); padding: 7px 12px; font-size: 13.5px; font-weight: 500;
  width: 100%; justify-content: space-between; color: var(--sap-ink); }
.psel .who { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; min-width: 0; overflow: hidden; }
.psel .ic { width: 15px; height: 15px; color: var(--text-muted-on-light); }
input.psel { font-family: inherit; }
.date-range { display: flex; align-items: center; gap: 8px; }
.date-col { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.date-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light); font-weight: 600; }
.date-sep { color: var(--text-muted-on-light); font-size: 14px; margin-top: 14px; }
.date-range input.psel { width: 100%; min-width: 0; }
.ref { background: var(--sap-paper); border-radius: 12px; padding: 6px 16px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.ref .row { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; }
.ref .row + .row { border-top: 1px solid var(--border-on-light); }
.ref .k { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-on-light); font-weight: 600; }
.ref .v { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; line-height: 1.3; }
.panel__note { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--sap-ink);
  width: 100%; min-height: 120px; resize: vertical; border-radius: 12px; padding: 14px 15px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); background: #fff; outline: none; letter-spacing: -.005em; }
.panel__note:focus { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.panel__note::placeholder { color: var(--text-muted-on-light); font-style: italic; }
.field-block > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); margin-bottom: 9px; }
.panel__foot { display: flex; align-items: center; gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--border-on-light); }
.panel__foot .spacer { flex: 1; }

/* tiny dropdown for assignee */
.menu { position: fixed; z-index: 170; background: var(--sap-cream); border-radius: 14px;
  box-shadow: var(--shadow-float); border: 1px solid var(--border-on-light); padding: 6px;
  min-width: 220px; display: none; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.menu.show { display: block; transform-origin: top center; animation: ovPop .16s var(--ease-out); }
/* entrada de overlays (menús/popovers): la animación CSS se dispara fiable desde display:none
   y el reposo queda en opacity:1/transform:none — nunca se queda invisible */
@keyframes ovPop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--sap-ink); text-align: left; }
.menu button:hover { background: var(--sap-sand); }
.menu button .role { margin-left: auto; font-size: 11.5px; color: var(--text-muted-on-light); font-weight: 500; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--sap-ink); color: var(--sap-cream); padding: 12px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; z-index: 150; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; display: inline-flex; align-items: center; gap: 9px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .ic { width: 16px; height: 16px; color: var(--sap-mint); }

/* mobile topbar (hidden on desktop) */
.topbar { display: none; align-items: center; gap: 12px; padding: 12px 16px; position: sticky; top: 0; z-index: 30;
  background: rgba(255,252,245,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-on-light); }
.tb-menu { border: none; background: none; padding: 8px; margin: -4px; border-radius: 10px; color: var(--sap-ink); display: inline-flex; }
.tb-menu:hover { background: var(--sap-sand); }
.tb-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.tb-mark { margin-left: auto; color: var(--sap-ink); display: inline-flex; }
.tb-mark svg { width: 22px; height: 22px; }

/* fade-in helper */
.fade { animation: fadeup .42s var(--ease, cubic-bezier(.22,.61,.36,1)) both; }
@keyframes fadeup { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; }
  * { scroll-behavior: auto; }
  /* skeleton sin shimmer */
  .px-skel i { animation: none; background: var(--sap-sand); }
  /* overlays: snap instantáneo, sin escala/desplazamiento de entrada
     (se neutraliza la duración; NO el transform de posición de modal/panel) */
  .menu, .msel-pop, .card-menu, .proj-menu, .modal, .panel, .toast, .tab-sheet {
    transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .menu, .msel-pop, .card-menu, .proj-menu { transform: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .board { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
  .view, .inv-wrap { padding: 30px 32px 70px; }
}
@media (max-width: 980px) {
  .dash-cols { grid-template-columns: 1fr; gap: 30px; }
  .board { display: flex; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity;
    margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .board .col { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; }
}
@media (max-width: 820px) {
  .app.show { grid-template-columns: 1fr; }
  .main { margin-left: 0; }   /* CRÍTICO: el sidebar está off-canvas → contenido a ancho completo (sin esto, todo se aplasta) */
  .side { position: fixed; top: 0; left: 0; width: 280px; height: 100dvh; transform: translateX(-100%);
    transition: transform .26s var(--ease-out, cubic-bezier(.22,.61,.36,1)); box-shadow: 16px 0 50px rgba(16,9,6,.25); }
  /* !important: la preferencia de escritorio .app.show.nav-collapsed .side (translateX(-100%),
     especificidad 0-4-0) persiste en localStorage y le ganaba a esta regla (0-2-1) → en el
     teléfono el menú NUNCA entraba: solo se oscurecía la pantalla. No quitar. */
  body.side-open .side { transform: translateX(0) !important; }
  body.side-open::after { content: ""; position: fixed; inset: 0; background: rgba(16,9,6,.4); z-index: 35; }
  .nav-reveal, .app.show.nav-collapsed ~ .nav-reveal { display: none; }   /* pestañita de escritorio: fuera en móvil */
  .topbar { display: flex; padding-top: calc(12px + env(safe-area-inset-top)); }   /* cápsula iOS: el ☰ no queda bajo el notch */
  .side__inner { padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  /* (overrides de reglas definidas MÁS ABAJO en este archivo — .tb-controls, .sel-bar, .inp,
     .modal, .eq-detail — viven en el bloque "MÓVIL · overrides finales" al FINAL del archivo:
     aquí perderían la cascada por orden.) */
  body.logged .toast, body.logged .av-toast { bottom: calc(78px + env(safe-area-inset-bottom)); }   /* sobre la tabbar */
  body.logged .ver-banner { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .view, .inv-wrap { padding: 20px 18px 28px; }
  .board { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }   /* -20 sobre padding de 18 provocaba 2px de scroll lateral */
  .page-head h1 { font-size: clamp(34px, 9vw, 48px); }
  .greet h1 { font-size: clamp(34px, 9vw, 48px); }
  .proj-head__main { flex-direction: column; align-items: stretch; }
  .proj-head__prog { min-width: 0; }
  .panel { width: 100%; }
  :root { --panel-w: 100vw; }
}
@media (max-width: 560px) {
  .field { grid-template-columns: 1fr; gap: 7px; }
  .tlist { overflow-x: auto; }
  .tlist table { min-width: 540px; }
  .grid-cards, .proj-grid { grid-template-columns: 1fr; }
  .profile, .ns-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MÓVIL — experiencia de bolsillo (centrada en tareas + avatar)
   .view prefija las clases definidas en avatars.css (que carga después)
   para ganarles en cascada.
   ============================================================ */
@media (max-width: 820px) {
  /* títulos y leads a escala de teléfono (antes invadían toda la pantalla) */
  .page-head { margin-bottom: 16px; gap: 8px; }
  .page-head .lead { font-size: 15px; margin-top: 8px; max-width: none; }
  .greet { margin-bottom: 18px; }
  .greet .date { font-size: 15px; }
  /* stats del Inicio: 2 columnas parejas */
  .view .ws-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .view .ws-stat { padding: 14px 15px; }
  .view .ws-stat .n { font-size: 27px; }
  /* cabecera "Mis tareas" del Inicio: apilada, herramientas a ancho completo */
  .view .home-tasks-head { flex-direction: column; align-items: stretch; gap: 12px; margin: 20px 0 4px; }
  .view .home-tasks-head h2 { font-size: 30px; }
  .view .home-tools { width: 100%; }
  .view .home-tools .btn, .view .home-tools .home-default { flex: 1; justify-content: center; }
  .viewtoggle { flex: 1; }
  .viewtoggle button { flex: 1; justify-content: center; }
  /* avatar (dock): levantarlo sobre la barra de pestañas para que no la tape */
  body.logged .dock.pos-br { bottom: calc(78px + env(safe-area-inset-bottom)); right: 14px; }
  body.logged .dock.pos-bl { bottom: calc(78px + env(safe-area-inset-bottom)); left: 14px; }
  body.logged .dock.pos-top { right: 14px; }
  /* panel de tarea a pantalla completa: respetar notch y home indicator */
  .panel__head { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
  .panel__body { padding: 18px 16px; gap: 18px; }
  .panel__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .panel__name { font-size: 22px; }
  /* tablas anchas (Inicio·Lista, Costos): scroll horizontal en vez de romper el layout */
  .tlist { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* modales: ocupar bien el ancho del teléfono */
  .modal { width: calc(100vw - 24px); padding: 20px; }
  .modal-head h3 { font-size: 22px; }
}
@media (max-width: 560px) {
  /* filas de "Mis tareas": apiladas — nombre completo arriba; [estado · fecha ···· ▶timer] abajo */
  .mt-list .mt-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 15px; }
  .mt-name { white-space: normal; font-size: 15.5px; line-height: 1.3; }
  .mt-right { width: 100%; justify-content: flex-start; gap: 10px; }
  .mt-right .tplay { margin-left: auto; }     /* timer compacto, pegado a la derecha */
  .tplay { padding: 9px 13px; }               /* tap target cómodo */
}

/* ============================================================
   v3 — photos, multi-assignee, calendar btn, sidebar icons,
   profile + create-space screens
   ============================================================ */
.av-photo { background-size: cover; background-position: center; color: transparent; }
.av-none { background: var(--sap-sand); color: var(--text-muted-on-light); font-weight: 600; }
.av-more { background: var(--sap-ink); color: var(--sap-cream); font-size: 10px; }
.av-80 { width: 80px; height: 80px; font-size: 28px; }

/* calendar button on cards */
.tcard__foot-r { display: inline-flex; align-items: center; gap: 8px; }
.cal-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: none; background: none; border-radius: 8px; color: var(--text-muted-on-light); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--border-on-light); transition: background .14s ease, color .14s ease, box-shadow .14s ease; }
.cal-btn .ic { width: 15px; height: 15px; }
.cal-btn:hover { background: var(--st-progreso-soft); color: var(--st-progreso-ink); box-shadow: inset 0 0 0 1px var(--st-progreso); }
.cal-btn:active { transform: scale(.94); }
.cal-btn.is-scheduled { background: var(--st-hecho-soft); color: var(--st-hecho-ink); box-shadow: inset 0 0 0 1px var(--st-hecho); }
.cal-btn.is-scheduled:hover { background: var(--st-hecho); color: #fff; box-shadow: inset 0 0 0 1px var(--st-hecho); }
.c-cal { width: 1%; white-space: nowrap; text-align: right; }
.c-anames { white-space: nowrap; }
.tlist .c-assignee { gap: 10px; }

/* sidebar space icons */
.nav-ic { display: inline-flex; flex-shrink: 0; }
.nav-ic .ic { width: 17px; height: 17px; stroke-width: 1.9; }
.nav-sub .nav-item { gap: 11px; }

/* multi-assignee field in panel */
.field.field-top { align-items: start; }
.field.field-top > label { margin-top: 7px; }
.assignees { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ach { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--sap-paper); border-radius: 999px;
  padding: 4px 6px 4px 5px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.ach-n { font-size: 12.5px; font-weight: 600; }
.ach-x { display: inline-flex; border: none; background: none; padding: 2px; border-radius: 50%; color: var(--text-muted-on-light); cursor: pointer; }
.ach-x .ic { width: 13px; height: 13px; }
.ach-x:hover { background: var(--accent); color: #fff; }
.ach-add { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border-on-light);
  background: none; border-radius: 999px; padding: 6px 12px 6px 9px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted-on-light); cursor: pointer; transition: border-color .14s ease, color .14s ease; }
.ach-add .ic { width: 14px; height: 14px; }
.ach-add:hover { border-color: var(--sap-ink); color: var(--sap-ink); }

/* assignee menu (multi) */
.menu button .mn { display: flex; flex-direction: column; line-height: 1.25; }
.menu button.on { background: var(--sap-paper); }
.menu button .ic { margin-left: auto; width: 16px; height: 16px; color: var(--st-hecho); }

/* forms (shared) */
.view.narrow { max-width: 820px; }
.form-row { display: flex; flex-direction: column; gap: 9px; }
.form-row > label { font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); letter-spacing: .01em; }
.inp { font-family: var(--font-ui); font-size: 15px; color: var(--sap-ink); background: #fff; border: none;
  border-radius: 12px; padding: 13px 15px; box-shadow: inset 0 0 0 1px var(--border-on-light); outline: none;
  transition: box-shadow .14s ease; width: 100%; }
.inp:focus { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.inp::placeholder { color: var(--text-muted-on-light); }
.inp.ta { min-height: 96px; resize: vertical; line-height: 1.5; font-family: var(--font-serif); }
.form-actions { display: flex; gap: 10px; margin-top: 32px; }

/* profile */
.profile { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.profile__preview { background: var(--sap-dark); color: var(--sap-cream); border-radius: var(--radius-lg);
  padding: 34px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; position: sticky; top: 24px; }
.profile__av .av { box-shadow: inset 0 0 0 1px rgba(255,252,245,.25), 0 0 0 4px rgba(255,252,245,.08); }
.profile__pv-meta { display: flex; flex-direction: column; gap: 4px; }
.profile__pv-meta b { font-family: var(--font-serif); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.profile__pv-meta > span { font-size: 13.5px; color: var(--text-muted-on-dark); }
.profile__mail { font-size: 12.5px !important; color: rgba(255,252,245,.5) !important; margin-top: 2px; }
.profile__form { display: flex; flex-direction: column; gap: 22px; }
/* photo picker (profile) */
.photo-picker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.photo-opt { position: relative; width: 72px; height: 72px; border: none; border-radius: 16px; background-size: cover; background-position: center;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-on-light); transition: transform .14s ease, box-shadow .14s ease; flex-shrink: 0; }
.photo-opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.photo-opt.on { box-shadow: inset 0 0 0 3px var(--accent); }
.photo-check { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.photo-check .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.photo-opt--google { border: 2px solid #4285F4; }
.photo-google-badge { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); pointer-events: none; }
.photo-google-badge svg { width: 13px; height: 13px; }
.photo-upload-btn, .photo-remove-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1.5px dashed var(--border-on-light); border-radius: 14px; background: transparent;
  cursor: pointer; font: 600 13px/1 var(--ff); color: var(--sap-ink); transition: border-color .15s ease, color .15s ease, background .15s ease; }
.photo-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(5,80,73,.04); }
.photo-upload-btn .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.photo-upload-btn.uploading { opacity: .6; pointer-events: none; }
.photo-remove-btn { border-style: solid; border-color: var(--border-on-light); }
.photo-remove-btn:hover { border-color: #C96187; color: #C96187; background: rgba(201,97,135,.06); }
.photo-remove-btn .ic { width: 16px; height: 16px; stroke-width: 1.8; }
.photo-hint { font-size: 12px; color: var(--secondary); margin-top: 6px; }

/* create space */
.ns-grid { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
.ns-form { display: flex; flex-direction: column; gap: 22px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-opt { width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer; position: relative;
  box-shadow: inset 0 0 0 1px rgba(16,9,6,.12); transition: transform .12s ease; }
.swatch-opt:hover { transform: scale(1.08); }
.swatch-opt.on { box-shadow: inset 0 0 0 1px rgba(16,9,6,.12), 0 0 0 2px var(--sap-cream), 0 0 0 4px var(--sap-ink); }
.icon-row { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-cat { width: 100%; margin-bottom: 10px; }
.icon-cat__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted-on-light); margin-bottom: 6px; }
.icon-cat__row { display: flex; flex-wrap: wrap; gap: 8px; }

.icon-opt { width: 46px; height: 46px; border-radius: 12px; border: none; cursor: pointer; background: var(--sap-paper);
  color: var(--sap-ink); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border-on-light);
  transition: transform .12s ease, box-shadow .14s ease, background .14s ease; }
.icon-opt .ic { width: 21px; height: 21px; }
.icon-opt:hover { transform: translateY(-2px); }
.icon-opt.on { background: var(--sap-ink); color: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--sap-ink); }
.ns-preview { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.ns-preview .space-card { cursor: default; }
.ns-preview .space-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.ns-preview .proj-card { cursor: default; }
.ns-preview .proj-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.ns-space-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--sap-paper); border-radius: 12px;
  padding: 9px 14px; box-shadow: inset 0 0 0 1px var(--border-on-light); font-size: 14px; font-weight: 600; }
.space-card__ic.sm { width: 30px; height: 30px; border-radius: 9px; }
.space-card__ic.sm .ic { width: 16px; height: 16px; }

/* ============================================================
   v4 — task types, subtasks, calendars
   ============================================================ */
/* type badge + subtask progress on cards */
.tcard__tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.tbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--tc); letter-spacing: .01em; white-space: nowrap; }
.tbadge-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--tc); }
.subprog { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); }
.subprog .ic { width: 13px; height: 13px; }
.subprog.all { color: var(--st-hecho-ink); }
.tlist .c-name .tbadge { vertical-align: middle; }

/* type selector in panel */
.type-field { display: flex; flex-direction: column; gap: 10px; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--sap-sand); border-radius: 999px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; }
.tchip-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tc); }
.tchip.on { background: color-mix(in oklab, var(--tc) 15%, transparent); color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.tchip-del { display: inline-flex; align-items: center; margin-left: 2px; opacity: 0; transition: opacity .15s; cursor: pointer; }
.tchip-del .ic { width: 12px; height: 12px; }
.tchip:hover .tchip-del { opacity: .5; }
.tchip-del:hover { opacity: 1 !important; }
.tchip-add { border: 1px dashed var(--border-on-light); background: none; }
.tchip-add .ic { width: 14px; height: 14px; }
.type-creator { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px;
  border-radius: 12px; background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.type-creator[hidden] { display: none; }
.inp-sm { padding: 9px 12px; font-size: 13.5px; border-radius: 9px; flex: 1; min-width: 150px; }
.nt-colors { display: flex; gap: 6px; }
.swatch-opt.sm { width: 24px; height: 24px; border-radius: 7px; }

/* subtasks */
.sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sub-head label { font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); }
.sub-prog { font-size: 12px; font-weight: 700; color: var(--text-muted-on-light); background: var(--sap-sand); border-radius: 999px; padding: 2px 9px; }
.sub-prog.all { color: #fff; background: var(--st-hecho); }
.sub-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.sub-row { display: flex; align-items: center; gap: 11px; padding: 7px 6px; border-radius: 9px; }
.sub-row:hover { background: var(--sap-paper); }
.sub-check { width: 20px; height: 20px; border-radius: 6px; border: none; background: #fff; box-shadow: inset 0 0 0 1px var(--border-on-light);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: #fff; }
.sub-check.on { background: var(--st-hecho); box-shadow: inset 0 0 0 1px var(--st-hecho); }
.sub-check .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.sub-name { flex: 1; font-size: 14px; font-family: var(--font-serif); letter-spacing: -.005em; }
.sub-row.done .sub-name { text-decoration: line-through; color: var(--text-muted-on-light); }
.sub-del { border: none; background: none; color: var(--text-muted-on-light); padding: 3px; border-radius: 6px; cursor: pointer; opacity: 0; flex-shrink: 0; }
.sub-row:hover .sub-del { opacity: 1; }
.sub-del .ic { width: 14px; height: 14px; }
.sub-del:hover { color: var(--accent); }
.sub-add { display: flex; gap: 8px; }
.sub-add .inp { flex: 1; }
.sub-add .btn { flex-shrink: 0; }
/* subtasks-as-tasks: panel rows, list expansion */
.sub-name-btn { flex: 1; min-width: 0; border: none; background: none; text-align: left; cursor: pointer;
  font-size: 14px; font-family: var(--font-serif); letter-spacing: -.005em; color: var(--sap-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-name-btn:hover { text-decoration: underline; }
.sub-row.done .sub-name-btn { text-decoration: line-through; color: var(--text-muted-on-light); }
.sub-row-r { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.sub-hint { font-size: 12px; color: var(--text-muted-on-light); font-style: italic; font-family: var(--font-serif); margin: 10px 0 0; }
.sub-parent { display: inline-flex; align-items: center; gap: 8px; border: none; background: var(--sap-paper); cursor: pointer;
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: var(--text-muted-on-light); box-shadow: inset 0 0 0 1px var(--border-on-light); align-self: flex-start; }
.sub-parent .ic { width: 14px; height: 14px; }
.sub-parent b { color: var(--sap-ink); font-weight: 600; }
.sub-parent:hover { box-shadow: inset 0 0 0 1px var(--sap-ink); }

.proj-tools-r { display: flex; align-items: center; gap: 10px; }
.c-name-wrap { display: inline-flex; align-items: center; gap: 8px; }
.row-caret { border: none; background: none; color: var(--text-muted-on-light); padding: 3px; margin: -3px 0 -3px -3px; border-radius: 6px;
  cursor: pointer; display: inline-flex; flex-shrink: 0; transition: transform .18s var(--ease-out), color .14s ease, background .14s ease, filter .12s ease; }
.row-caret .ic { width: 15px; height: 15px; }
.row-caret:hover { background: var(--sap-sand); color: var(--sap-ink); }
.row-caret:active { filter: brightness(.9); }   /* no scale: competiría con el rotate(90deg) de .open */
.row-caret.open { transform: rotate(90deg); }
.row-caret-sp { width: 18px; flex-shrink: 0; }   /* = ancho del botón caret (21) menos su margin-left -3 → alinea el nombre */
.row-submark { display: inline-flex; color: var(--text-muted-on-light); flex-shrink: 0; }
.row-submark .ic { width: 15px; height: 15px; }
.tlist tr.is-subrow td { background: var(--sap-paper); }
.tlist tr.is-subrow .c-name { padding-left: 30px; }
.tlist tr.is-subrow .c-name-txt { font-size: 14px; }
.tlist tr.is-subrow:hover td { background: var(--sap-stone); }
.c-name-txt { display: inline; }

/* calendars list */
.cal-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.cal-card { display: flex; align-items: center; gap: 16px; text-align: left; background: var(--sap-cream); border-radius: var(--radius-md);
  padding: 20px 22px; box-shadow: inset 0 0 0 1px var(--border-on-light); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.cal-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.cal-card .space-card__ic { width: 46px; height: 46px; flex-shrink: 0; }
.cal-card-main { flex: 1; min-width: 0; }
.cal-card-main h3 { font-family: var(--font-serif); font-weight: 600; font-size: 19px; margin: 0; letter-spacing: -.01em; }
.cal-card-main p { font-size: 13px; color: var(--text-muted-on-light); margin: 4px 0 0; }
.cal-card .go { color: var(--text-muted-on-light); }
.cal-card:hover .go { color: var(--sap-ink); }

/* calendar toolbar */
.cal-wrap { max-width: none; padding-bottom: 22px; }
.cal-crumb-ic { display: inline-flex; }
.cal-crumb-ic .ic { width: 15px; height: 15px; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
/* leyenda de estados del calendario */
.cal-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -6px 0 16px; padding: 9px 14px; background: var(--sap-cream); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.cal-legend .cal-leg-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted-on-light); }
.cal-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sap-ink); }
.cal-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cal-leg-dot-proj { width: 9px; height: 9px; border-radius: 2px; background: var(--text-muted-on-light); }
.cal-leg-proj { color: var(--text-muted-on-light); }
.cal-left { display: flex; align-items: center; gap: 14px; }
.cal-step { display: inline-flex; gap: 4px; }
.cal-step button { width: 34px; height: 34px; border: none; background: none; border-radius: 9px; color: var(--sap-ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.cal-step button:hover { background: var(--sap-sand); }
.cal-step .ic { width: 18px; height: 18px; }
.cal-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; margin: 0; letter-spacing: .005em; }
.cal-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-views button { white-space: nowrap; }
.cal-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-filter { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--sap-cream);
  border-radius: 999px; padding: 0 32px 0 14px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.cal-filter > .ic:first-child { width: 15px; height: 15px; color: var(--text-muted-on-light); flex-shrink: 0; }
.cal-select { appearance: none; -webkit-appearance: none; border: none; background: none; font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; color: var(--sap-ink); padding: 10px 0; cursor: pointer; outline: none; min-width: 152px; }
.cs-chev { width: 14px; height: 14px; position: absolute; right: 12px; pointer-events: none; color: var(--text-muted-on-light); transition: transform .15s ease; }

/* multi-select dropdown (filtros del calendario: calendarios / tipos / personas) */
.msel { position: relative; display: inline-flex; }
.msel-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--sap-cream);
  border-radius: 999px; padding: 10px 32px 10px 14px; box-shadow: inset 0 0 0 1px var(--border-on-light);
  min-width: 168px; cursor: pointer; }
.msel-btn > .ic:first-child { width: 15px; height: 15px; color: var(--text-muted-on-light); flex-shrink: 0; }
.msel-btn .msel-lbl { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel.open .msel-btn { box-shadow: inset 0 0 0 1.5px var(--sap-ink); }
.msel.open .cs-chev { transform: rotate(180deg); }
.msel-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; min-width: 224px; max-height: 320px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px;
  transform-origin: top left; animation: ovPop .14s var(--ease-out); }
.msel-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--sap-ink); }
.msel-opt:hover { background: var(--sap-sand); }
.msel-opt input { width: 15px; height: 15px; accent-color: var(--sap-ink); cursor: pointer; flex-shrink: 0; margin: 0; }
.msel-opt.msel-all { font-weight: 700; }
.msel-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.msel-dot-proj { border-radius: 2px; }
.msel-optlbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* event chip */
.evt { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: none; cursor: pointer; border-radius: 6px;
  padding: 3px 7px; font-size: 12px; font-weight: 600; color: var(--sap-ink); line-height: 1.3;
  background: color-mix(in oklab, var(--evt) 13%, var(--sap-cream)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--evt) 28%, transparent); transition: background .12s ease; }
.evt:hover { background: color-mix(in oklab, var(--evt) 22%, var(--sap-cream)); }
.evt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--evt); flex-shrink: 0; }
.evt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt.done .evt-name { text-decoration: line-through; opacity: .55; }
/* arrastrar eventos para reprogramar su fecha */
.evt-drag { cursor: grab; touch-action: none; }
.evt-drag:active { cursor: grabbing; }
.cal-chip-dragging { opacity: .4; }
.cal-ghost { position: fixed; left: 0; top: 0; z-index: 240; pointer-events: none; margin: 0 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22); transform: rotate(1.5deg); opacity: .96; }
.cal-cell.cal-drop, .cal-wbody.cal-drop { background: color-mix(in oklab, var(--accent) 16%, #fff) !important;
  box-shadow: inset 0 0 0 2px var(--accent); }
body.dragging-active .cal-cell, body.dragging-active .cal-wbody { cursor: copy; }
/* proyecto como evento (hito): punto cuadrado + borde mas marcado */
.evt-proj { background: color-mix(in oklab, var(--evt) 9%, var(--sap-cream)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--evt) 42%, transparent); }
.evt-dot-proj { width: 8px; height: 8px; border-radius: 2px; }
.cal-proj-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--evt); }
.cal-proj-badge .ic { width: 13px; height: 13px; }
.cal-row-proj .cal-row-r .ic { width: 16px; height: 16px; color: var(--text-muted-on-light); }
.evt-more { border: none; background: none; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer;
  padding: 2px 7px; text-align: left; border-radius: 6px; }
.evt-more:hover { background: var(--sap-sand); color: var(--sap-ink); }

/* month */
.cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-on-light); }
.cal-dow { padding: 10px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-on-light); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; }
.cal-cell { position: relative; min-height: 116px; border-right: 1px solid var(--border-on-light); border-bottom: 1px solid var(--border-on-light);
  padding: 8px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; transition: background .12s ease; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-cell:hover { background: var(--sap-paper); }
.cal-daynum { font-size: 13px; font-weight: 600; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-cell.today .cal-daynum { background: var(--accent); color: #fff; }
.cal-evts { display: flex; flex-direction: column; gap: 3px; }

/* mes con SCROLL CONTINUO de semanas (días fluidos, sin separación entre meses) */
.cal-monthscroll { overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-on-light); background: var(--sap-cream); -webkit-overflow-scrolling: touch; }
/* nombre del mes fijado arriba-izquierda; cambia según el mes que domina la vista */
.cal-curmonth { position: sticky; top: 0; z-index: 7; height: 40px; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 16px; background: var(--sap-cream);
  font-family: var(--font-display); text-transform: uppercase; font-size: 16px; letter-spacing: .01em;
  color: var(--sap-ink); box-shadow: 0 1px 0 var(--border-on-light); }
.cal-monthscroll .cal-dows { border-bottom: 1px solid var(--border-on-light); }
.cal-dows-sticky { position: sticky; top: 40px; z-index: 6; background: var(--sap-cream); }
.cal-monthscroll .cal-dow { padding: 9px 12px; }
/* marca discreta del 1.º de mes (abreviatura), sin separadores duros */
.cal-monthtag { position: absolute; top: 7px; right: 8px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent); opacity: .85; pointer-events: none; }
.cal-cell-m1 { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
.cal-monthscroll .cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
/* el mes que DOMINA la vista queda nítido; los demás se atenúan al scrollear, para que no
   se fundan los días entre meses. data-curm lo fija el JS según el mes dominante. */
.cal-weeks .cal-cell { transition: opacity .28s ease; }
.cal-weeks[data-curm] .cal-cell { opacity: .34; }
.cal-weeks[data-curm] .cal-cell:hover { opacity: 1; }
.cal-weeks[data-curm="0"] .cal-cell[data-m="0"],
.cal-weeks[data-curm="1"] .cal-cell[data-m="1"],
.cal-weeks[data-curm="2"] .cal-cell[data-m="2"],
.cal-weeks[data-curm="3"] .cal-cell[data-m="3"],
.cal-weeks[data-curm="4"] .cal-cell[data-m="4"],
.cal-weeks[data-curm="5"] .cal-cell[data-m="5"],
.cal-weeks[data-curm="6"] .cal-cell[data-m="6"],
.cal-weeks[data-curm="7"] .cal-cell[data-m="7"],
.cal-weeks[data-curm="8"] .cal-cell[data-m="8"],
.cal-weeks[data-curm="9"] .cal-cell[data-m="9"],
.cal-weeks[data-curm="10"] .cal-cell[data-m="10"],
.cal-weeks[data-curm="11"] .cal-cell[data-m="11"] { opacity: 1; }

/* week */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-on-light); background: var(--sap-cream); min-height: 440px; }
.cal-wcol { border-right: 1px solid var(--border-on-light); display: flex; flex-direction: column; }
.cal-wcol:last-child { border-right: none; }
.cal-whead { padding: 12px; text-align: center; border-bottom: 1px solid var(--border-on-light); display: flex; flex-direction: column; gap: 4px; }
.cal-wdow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-on-light); }
.cal-wnum { font-family: var(--font-display); font-size: 24px; line-height: 1; width: 38px; height: 38px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; }
.cal-wcol.today .cal-wnum { background: var(--accent); color: #fff; }
.cal-wbody { padding: 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; cursor: pointer; }
.cal-wempty { color: var(--text-muted-on-light); opacity: .4; text-align: center; font-size: 13px; padding-top: 10px; }

/* day + agenda */
.cal-day-view, .cal-agenda { display: flex; flex-direction: column; gap: 8px; }
.cal-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--sap-cream); border: none;
  border-radius: var(--radius-sm); padding: 13px 16px 13px 0; box-shadow: inset 0 0 0 1px var(--border-on-light); cursor: pointer;
  overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.cal-row:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.cal-row-band { width: 4px; align-self: stretch; background: var(--evt); flex-shrink: 0; }
.cal-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-row-name { font-family: var(--font-serif); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.cal-row-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-row-proj { font-size: 12.5px; color: var(--text-muted-on-light); font-weight: 500; }
.cal-row-r { display: flex; align-items: center; gap: 12px; padding-right: 4px; flex-shrink: 0; }
.cal-ag-date { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-on-light); }
.cal-ag-date:first-child { margin-top: 0; }
.cal-ag-d { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.cal-ag-mw { display: flex; flex-direction: column; }
.cal-ag-m { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cal-ag-w { font-size: 12.5px; color: var(--text-muted-on-light); }
.cal-ag-date.today .cal-ag-d { color: var(--accent); }

@media (max-width: 900px) {
  .cal-toolbar { gap: 12px; }
  .cal-right { width: 100%; justify-content: space-between; }
  .cal-cell { min-height: 86px; padding: 6px; }
  .cal-week { display: flex; overflow-x: auto; }
  .cal-week .cal-wcol { flex: 0 0 64%; }
  .cal-row-r .chip { display: none; }
  .profile, .ns-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v5 — CRM Clientes
   ============================================================ */
.cav { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700;
  color: #fff; flex-shrink: 0; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cav-28 { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.cav-40 { width: 40px; height: 40px; font-size: 14px; border-radius: 11px; }
.cav-64 { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; }
.schip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 11px 5px 9px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1; color: var(--sc);
  background: color-mix(in oklab, var(--sc) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 40%, transparent); }
.schip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }

.cl-board .col__body { min-height: 60px; }
.cl-card { display: flex; flex-direction: column; gap: 11px; background: var(--sap-cream); border-radius: var(--radius-sm);
  padding: 14px; box-shadow: inset 0 0 0 1px var(--border-on-light); transition: transform .14s ease, box-shadow .14s ease; }
.cl-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--sap-ink), var(--shadow-soft); }
.cl-card-head { display: flex; align-items: center; gap: 11px; }
.cl-card-id { min-width: 0; }
.cl-card-id b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-card-id span { font-size: 12px; color: var(--text-muted-on-light); }
.cl-card-meta { display: flex; align-items: center; justify-content: space-between; }
.cl-val { font-weight: 700; font-size: 14px; white-space: nowrap; }
.cl-np { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); }
.cl-np .ic { width: 14px; height: 14px; }
.cl-next { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border-on-light); font-size: 12px; color: var(--text-muted-on-light); }
.cl-next .ic { width: 13px; height: 13px; flex-shrink: 0; }
.cl-next-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-next-d { font-weight: 700; color: var(--sap-ink); white-space: nowrap; }

/* Salud del cliente (Prioridad 2): dot, chip, alertas, filtro */
.cl-health { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-left: auto; box-shadow: 0 0 0 3px color-mix(in oklab, var(--hc, #1F6044) 16%, transparent); }
.cl-health--ok, .cl-health--won { --hc: #1F6044; background: #1F6044; }
.cl-health--warn { --hc: #E0991B; background: #E0991B; }
.cl-health--risk { --hc: #B0432F; background: #B0432F; }
.cl-health--paused, .cl-health--dead { --hc: #A79E92; background: #A79E92; }
.cl-card--warn { box-shadow: inset 0 0 0 1px color-mix(in oklab, #E0991B 55%, transparent); }
.cl-card--risk { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, #B0432F 60%, transparent); }
.cl-card-alert { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border-on-light); font-size: 12px; }
.cl-card-alert .ic { width: 13px; height: 13px; flex-shrink: 0; }
.cl-card-alert span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-card-alert--hi { color: #B0432F; }
.cl-card-alert--lo { color: #9A6A12; }
/* chip de salud (header + box) */
.health-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 11px 3px 9px; border-radius: 999px; }
.health-chip .hc-dot { width: 8px; height: 8px; border-radius: 50%; }
.health-chip--ok, .health-chip--won { background: var(--st-hecho-soft); color: var(--st-hecho-ink); } .health-chip--ok .hc-dot, .health-chip--won .hc-dot { background: var(--st-hecho); }
.health-chip--warn { background: var(--st-revision-soft); color: var(--st-revision-ink); } .health-chip--warn .hc-dot { background: var(--st-revision); }
.health-chip--risk { background: #FBE9E4; color: #B0432F; } .health-chip--risk .hc-dot { background: #B0432F; }
.health-chip--paused, .health-chip--dead { background: var(--sap-sand); color: var(--text-muted-on-light); } .health-chip--paused .hc-dot, .health-chip--dead .hc-dot { background: #A79E92; }
.cl-health-box .health-chip { align-self: flex-start; }
.cl-alerts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cl-alert { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.35; }
.cl-alert .ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.cl-alert--hi { color: #B0432F; } .cl-alert--lo { color: #9A6A12; }
.cl-health-ok { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #1F6044; margin: 4px 0 0; }
.cl-health-ok .ic { width: 14px; height: 14px; }
.crm-health-toggle .ic { width: 14px; height: 14px; }
.crm-health-toggle.on { background: #FBE9E4; color: #B0432F; box-shadow: inset 0 0 0 1px #B0432F; }
.crm-att-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #B0432F; color: #fff; font-size: 11px; font-weight: 700; }

.client-head { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.client-head-id { flex: 1; min-width: 200px; }
.client-head-id h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(34px, 3.6vw, 52px); line-height: .9; margin: 0; }
.client-sector { font-family: var(--font-serif); font-size: 17px; color: var(--text-muted-on-light); }
.client-head-stage { display: flex; flex-direction: column; gap: 8px; }
.seg-b { border: none; background: var(--sap-sand); padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-muted-on-light); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.seg-b .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.seg-b.on { background: color-mix(in oklab, var(--sc) 15%, transparent); color: var(--sc); box-shadow: inset 0 0 0 1px var(--sc); }
.client-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.client-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.cl-box { background: var(--sap-cream); border-radius: var(--radius-md); padding: 18px; box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; gap: 12px; }
.cl-box .eyebrow { margin-bottom: 2px; }
/* contactos adicionales (multi-contacto por cliente, opcional por proyecto) */
.cl-contacts { display: flex; flex-direction: column; gap: 10px; }
.cl-contact { background: var(--sap-sand); border-radius: var(--radius-sm); padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.cl-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cl-contact-foot { display: flex; align-items: center; gap: 8px; }
.cl-contact-proj { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 0; }
.cl-contact-proj .cal-select { width: 100%; box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 999px; padding: 7px 30px 7px 13px; background: var(--sap-cream); font-size: 12.5px; }
.cl-contact-proj .cs-chev { right: 11px; }
.cl-contact-del { flex-shrink: 0; color: #B0432F; }
.cl-addcontact-btn { align-self: flex-start; }
.client-main { display: flex; flex-direction: column; gap: 28px; }
.cl-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cl-section-head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1; margin: 0; }
.cl-section-head .n { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); background: var(--sap-sand); border-radius: 999px; padding: 2px 9px; }
.cl-projs { display: flex; flex-direction: column; gap: 10px; }
.cl-proj { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--sap-cream); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.cl-proj-main { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; border: none; background: none; text-align: left; cursor: pointer; }
.cl-proj-main .pdot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cl-proj-name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-proj-space { font-size: 12px; color: var(--text-muted-on-light); white-space: nowrap; }
.cl-proj-main:hover .cl-proj-name { text-decoration: underline; }
.cl-proj-prog { display: flex; align-items: center; gap: 8px; width: 120px; flex-shrink: 0; }
.cl-proj-prog .prog { flex: 1; }
.cl-proj-prog span { font-size: 12px; font-weight: 700; color: var(--text-muted-on-light); width: 34px; text-align: right; }
.cl-proj-rel { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.rel-select { box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 999px; padding: 7px 30px 7px 13px; background: var(--sap-cream); }
.cl-proj-rel .cs-chev { right: 11px; }
/* monto a negociar por proyecto + valor agregado del cliente */
.cl-proj-amt { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cl-amt-cur { font-size: 12px; font-weight: 700; color: var(--text-muted-on-light); }
.cl-amt-inp { width: 96px; text-align: right; padding: 6px 8px; }
.cl-amt-inp::-webkit-outer-spin-button, .cl-amt-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cl-value-total { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--sap-ink); }
.cl-value-row { display: flex; gap: 22px; flex-wrap: wrap; }
.cl-value-cell { display: flex; flex-direction: column; gap: 3px; }
.cl-value-cell .cl-value-total { font-size: 22px; }
.cl-value-hist { color: var(--text-muted-on-light); }
.cl-value-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted-on-light); }

.note-add { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; align-items: flex-start; }
.note-add .ta { width: 100%; min-height: 70px; }
.notes { display: flex; flex-direction: column; gap: 2px; }
.note { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-on-light); }
.note:last-child { border-bottom: none; }
.note-body { flex: 1; }
.note-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.note-meta b { font-size: 13.5px; font-weight: 600; }
.note-meta span { font-size: 12px; color: var(--text-muted-on-light); }
.note-body p { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; margin: 0; color: var(--sap-ink); letter-spacing: -.005em; }

@media (max-width: 900px) {
  .client-grid { grid-template-columns: 1fr; }
  .client-side { position: static; }
  .cl-board { display: flex; overflow-x: auto; }
  .cl-board .col { flex: 0 0 78%; }
  .cl-proj { flex-wrap: wrap; }
}

/* v6 — permisos, móvil, lista por proyecto */
.lockb { display: inline-flex; align-items: center; gap: 4px; color: var(--st-revision-ink); margin-left: 7px; vertical-align: middle; }
.lockb .ic { width: 13px; height: 13px; }
.lockb.inline { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--st-revision-soft); border-radius: 999px; padding: 3px 9px 3px 7px; }
.link-cell { border: none; background: none; cursor: pointer; padding: 0; text-align: left; }
.link-cell:hover b { text-decoration: underline; }
.tlist .stage-select { box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 999px; padding: 6px 28px 6px 12px; background: var(--sap-cream); font-size: 12.5px; }
.tlist .cl-proj-rel { position: relative; display: inline-flex; align-items: center; }
.tlist .cl-proj-rel .cs-chev { right: 10px; }
.tlist .cl-proj-main { display: inline-flex; align-items: center; gap: 9px; border: none; background: none; cursor: pointer; text-align: left; max-width: 100%; }
.tlist .cl-proj-main .cl-proj-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-proj-name.muted { color: var(--text-muted-on-light); font-style: italic; }
.viewas-banner { display: flex; align-items: center; gap: 12px; background: var(--st-revision-soft); border-radius: var(--radius-md);
  padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; color: var(--st-revision-ink); }
.viewas-banner .ic { width: 17px; height: 17px; flex-shrink: 0; }
.viewas-banner span { flex: 1; }
.viewas-banner b { font-weight: 700; }
.vis-box .vis-opts { display: flex; gap: 8px; }
.vis-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--sap-sand);
  border-radius: 10px; padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; }
.vis-opt .ic { width: 15px; height: 15px; }
.vis-opt.on { background: var(--sap-ink); color: var(--sap-cream); }
.vis-users { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.vis-user { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--sap-paper); border-radius: 999px;
  padding: 4px 10px 4px 4px; font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-on-light); }
.vis-user .ic { width: 13px; height: 13px; color: var(--st-hecho); }
.vis-user.on { background: color-mix(in oklab, var(--st-hecho) 14%, transparent); color: var(--st-hecho-ink); box-shadow: inset 0 0 0 1px var(--st-hecho); }
.vis-user[disabled] { opacity: .9; cursor: default; }
.vis-hint { font-size: 11.5px; color: var(--text-muted-on-light); font-style: italic; font-family: var(--font-serif); margin: 6px 0 0; }
.grant-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.grant-row { display: flex; align-items: center; gap: 8px; }
.grant-row .grant-name { flex: 1; font-size: 13px; }
.grant-row .grant-sel { min-width: 120px; }

/* v7 — embudo: acciones comerciales + edición en lista */
.convert-btn { margin-top: 6px; }
.home-projects { margin-top: 34px; }
.home-projects .proj-grid { margin-top: 14px; }

.comm-block { margin-top: 30px; }
.comm-block .dash-col__head { margin-bottom: 14px; }
.comm-block .dash-col__head .ic { width: 18px; height: 18px; color: var(--sap-ink); }
.comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ccard { background: var(--sap-cream); border-radius: var(--radius-sm); padding: 15px 16px; box-shadow: inset 0 0 0 1px var(--border-on-light);
  display: flex; flex-direction: column; }
.ccard.is-overdue { box-shadow: inset 0 0 0 1px rgba(225,6,0,.45); }
.cc-cli { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.cc-cli b { font-weight: 600; }
.cc-name { border: none; background: none; text-align: left; cursor: pointer; font-family: var(--font-serif); font-weight: 600;
  font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; color: var(--sap-ink); margin: 11px 0; padding: 0; }
.cc-name:hover { text-decoration: underline; }
.cc-done { border: none; background: var(--sap-sand); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  cursor: pointer; color: var(--text-muted-on-light); flex-shrink: 0; transition: background .14s ease, color .14s ease; }
.cc-done .ic { width: 15px; height: 15px; }
.cc-done:hover { background: var(--st-hecho); color: #fff; }

.col-na, .c-na { min-width: 230px; }
.na-cell { display: flex; flex-direction: column; gap: 7px; }
.na-label { font-weight: 500; cursor: text; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.na-label:hover { background: var(--sap-sand); }
.na-empty { border: 1px dashed var(--border-on-light); background: none; border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
  font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; align-self: flex-start; }
.na-empty:hover { border-color: var(--sap-ink); color: var(--sap-ink); }
.na-other { font-size: 12px; color: var(--text-muted-on-light); font-style: italic; }
.na-ro { font-weight: 500; }
.na-date-ro { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); }
.na-empty.na-warn { border-color: #B0432F; color: #B0432F; }
.na-empty.na-warn:hover { background: #FDEDEC; }
/* acción comercial → proyecto (obligatorio) */
.cl-na-proj { position: relative; display: inline-flex; align-items: center; }
.cl-na-proj .cal-select { width: 100%; box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 8px; padding: 8px 30px 8px 11px; background: var(--sap-cream); font-size: 13px; }
.cl-na-proj .cs-chev { right: 11px; }
.cl-na-proj.is-warn .cal-select { box-shadow: inset 0 0 0 1.5px #B0432F; }
.cc-proj { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); margin-top: 9px; }
.cc-proj .ic { width: 12px; height: 12px; flex-shrink: 0; }
.na-tools { display: inline-flex; align-items: center; gap: 8px; }
.na-date { border: none; box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 8px; padding: 6px 9px; font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); background: var(--sap-cream); outline: none; }
.na-input { width: 100%; }
.tlist .na-resp { box-shadow: inset 0 0 0 1px var(--border-on-light); border-radius: 999px; padding: 6px 28px 6px 12px; background: var(--sap-cream); font-size: 12.5px; }

/* v8 — imágenes, adjuntos, duplicar, estado/nombre en lista */
.cover { display: block; }
.proj-card.has-cover { position: relative; }
/* ── Drop-zone de imágenes ───────────────────────────── */
.drop-img { border-radius: 13px; overflow: hidden; position: relative; }
.drop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop-img--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0,0,0,.04); border: 1.5px dashed rgba(0,0,0,.18); color: rgba(0,0,0,.4);
  font-size: 13px; font-weight: 500; cursor: default; }
.drop-img--empty svg { opacity: .45; }
.drop-img--over { outline: 2px solid var(--sap-terracotta); outline-offset: -2px; background: rgba(201,100,66,.08) !important; }
.drop-img--cover { width: 100%; height: 138px; margin-bottom: 16px; }
.drop-img--banner { width: 100%; height: 150px; margin-bottom: 22px; border-radius: 18px; }
.card-menu-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
.card-menu-btn { width: 30px; height: 30px; border: none; border-radius: 8px;
  background: rgba(16,9,6,.55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s ease, transform .12s var(--ease-out); }
.proj-card:hover .card-menu-btn { opacity: 1; }
/* En fila de lista y tarjeta kanban NO hay ancestro posicionado: el absolute anclaba el ⋯ al
   top-right de la vista (botón invisible pero tapeable bajo la topbar → menú de un proyecto
   arbitrario). En esas vistas va en el flujo, siempre visible y con estilo neutro. */
.proj-row .card-menu-wrap, .pk-card .card-menu-wrap { position: relative; top: auto; right: auto; }
.proj-row .card-menu-btn, .pk-card .card-menu-btn { opacity: 1; background: transparent; color: var(--text-muted-on-light); }
.proj-row .card-menu-btn:hover, .pk-card .card-menu-btn:hover { background: rgba(16,9,6,.08); color: var(--sap-ink); }
.pk-card:has(.card-menu.show) { overflow: visible; }   /* que el dropdown no quede recortado por overflow:hidden */
.card-menu-btn:active { transform: scale(.92); }
.card-menu-btn .ic { width: 16px; height: 16px; }
.card-menu { display: none; position: absolute; right: 0; top: 34px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 200px; z-index: 100; overflow: hidden; transform-origin: top right; }
.card-menu.show { display: block; animation: ovPop .15s var(--ease-out); }
.kcard .cover-kimg { width: 100%; height: 90px; margin-bottom: 10px; }

.att-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* aviso de versión nueva (deploy mientras la pestaña está abierta) */
.ver-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4000;
  display: flex; align-items: center; gap: 12px; background: var(--sap-ink); color: var(--sap-cream);
  padding: 11px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.28); font-size: 13.5px; }
.ver-banner button { background: var(--sap-cream); color: var(--sap-ink); border: none; border-radius: 999px;
  padding: 6px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.ver-banner button:hover { transform: translateY(-1px); }

/* adjuntos a nivel proyecto (header del proyecto) */
.proj-atts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 2px; }
.proj-atts__label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-on-light); }
.proj-atts__label .ic { width: 13px; height: 13px; }
.proj-atts .proj-att-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; border: 1.5px dashed var(--border-on-light); background: transparent;
  color: var(--text-muted-on-light); cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.proj-atts .proj-att-add:hover { border-color: var(--sap-ink); color: var(--sap-ink); }
.proj-atts .proj-att-add .ic { width: 13px; height: 13px; }
.proj-atts input[type="file"] { display: none; }

/* === Plegado de secciones del Inicio === */
.sec-toggle { width: 34px; height: 34px; border: 1.5px solid var(--border-on-light); background: var(--sap-cream);
  border-radius: 50%; cursor: pointer; color: var(--sap-ink); display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .18s ease, background .12s ease, border-color .12s ease; }
.sec-toggle .ic { width: 18px; height: 18px; }
.sec-toggle:hover { background: var(--sap-ink); color: var(--sap-cream); border-color: var(--sap-ink); }
.sec-toggle.is-collapsed { transform: rotate(-90deg); }
.sec-titlerow { display: flex; align-items: center; gap: 12px; }
.dash-col__head .sec-toggle { margin-left: 4px; }

/* === Reuniones (Google Calendar) en el Inicio === */
.home-meet { margin-top: 30px; }
.home-meet .dash-col__head { display: flex; align-items: center; gap: 10px; }
.home-meet .meet-head-r { margin-left: auto; }
.meet-cfg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border-on-light); background: transparent;
  color: var(--text-muted-on-light); cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.meet-cfg .ic { width: 13px; height: 13px; }
.meet-cfg:hover { border-color: var(--sap-ink); color: var(--sap-ink); }
.meet-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.meet-day-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-on-light); margin-bottom: 6px; }
.meet-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sap-cream);
  border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-on-light); margin-bottom: 6px;
  transition: box-shadow .12s ease, background .12s ease; }
.meet-row.is-rec { background: #fff; box-shadow: inset 0 0 0 1.5px var(--st-progreso); }
.meet-open { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; padding: 2px 0;
  text-decoration: none; color: inherit; cursor: pointer; }
.meet-open:hover .meet-title { text-decoration: underline; }
.meet-time { font-family: var(--font-display); font-size: 16px; color: var(--st-progreso); flex-shrink: 0; min-width: 52px; font-variant-numeric: tabular-nums; }
.meet-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meet-title { font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; }
.meet-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted-on-light); }
.meet-meta .ic { width: 12px; height: 12px; }
.meet-act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* el cronómetro reusa .tplay (idéntico a las tareas); ocultar reusa .cal-btn */
.gcal-hidden-row { justify-content: space-between; cursor: default; }
.tr-meeting td:first-child { font-weight: 600; }
.tr-meeting .tr-sub { color: var(--st-progreso); }
.tr-habit td:first-child { font-weight: 600; }
.tr-habit .tr-sub { color: #8A5BC7; }

.gcal-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 360px; overflow-y: auto; }
.gcal-opt { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border-on-light); cursor: pointer; font-size: 14px; }
.gcal-opt:last-child { border-bottom: none; }
.gcal-opt input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--sap-ink); }
.gcal-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.gcal-name { flex: 1; min-width: 0; }
.gcal-prim { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted-on-light); }

/* === Calendario laboral (RRHH Fase 2) === */
.do-kind-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.do-kind-row .inp { flex: 1; }
.wc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 12px; flex-wrap: wrap; }
.wc-nav { display: flex; align-items: center; gap: 8px; }
.wc-month { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; margin-left: 6px; }
.wc-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12.5px; color: var(--text-muted-on-light); }
.wc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wc-lg { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.wc-lg-work { background: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.wc-lg-wknd { background: #ECE7DD; }
.wc-lg-hol { background: #F3D9D4; }
.wc-lg-off { background: #DDEFE4; }
.wc-lg-pend { background: #F7EBCF; }
.wc-grid { background: var(--sap-cream); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-on-light); overflow: hidden; }
.wc-dows { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-on-light); }
.wc-dow { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-on-light); }
.wc-cells { display: grid; grid-template-columns: repeat(7, 1fr); }
.wc-cell { min-height: 78px; padding: 6px 7px; border-right: 1px solid var(--border-on-light); border-bottom: 1px solid var(--border-on-light); position: relative; }
.wc-cell:nth-child(7n) { border-right: none; }
.wc-empty { background: rgba(0,0,0,.015); }
.wc-num { font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); }
.wc-today .wc-num { background: var(--sap-ink); color: var(--sap-cream); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.wc-weekend { background: #ECE7DD; }
.wc-holiday { background: #F8E4E0; }
.wc-off { background: #DDEFE4; }
.wc-works { background: #E3EEF5; }
.wc-hol { display: block; font-size: 10.5px; font-weight: 600; color: #A6453A; margin-top: 3px; line-height: 1.2; }
.wc-holx { border: none; background: transparent; color: #A6453A; cursor: pointer; padding: 0 0 0 2px; vertical-align: middle; }
.wc-holx .ic { width: 10px; height: 10px; }
.wc-people { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.wc-more { font-size: 10px; color: var(--text-muted-on-light); align-self: center; }
.wc-pend { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #A66E07; background: #F7EBCF; border-radius: 999px; padding: 1px 6px; margin-top: 4px; }
.wc-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; padding: 2px 7px; border-radius: 999px; }
.wc-off .wc-tag { color: var(--st-activo); background: #C9E6D4; }
.wc-works .wc-tag { color: #225C78; background: #CFE3EF; }
@media (max-width: 640px) { .wc-cell { min-height: 56px; } .wc-hol, .wc-people { display: none; } }

/* === RRHH: solicitudes, bandeja, RRHH (Fase 1) === */
.lv-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.lv-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--border-on-light); font-size: 13.5px; }
.lv-row:last-child { border-bottom: none; }
.lv-kind { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--st-progreso); }
.lv-kind .ic { width: 12px; height: 12px; }
.lv-dates { font-weight: 600; }
.lv-reason { color: var(--text-muted-on-light); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-st { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; flex-shrink: 0; }
.lv-st-pend { color: #A66E07; background: #F7EBCF; }
.lv-st-ok { color: var(--st-activo); background: #DDEFE4; }
.lv-st-no { color: var(--accent); background: #F3D9D4; }
.lv-hint { font-size: 12px; color: var(--text-muted-on-light); margin: 8px 0 0; font-style: italic; }
.lv-banked { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7A4FB5; background: #EDE3F7; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.lv-assign { margin-left: auto; }
.lv-assign .ic { width: 12px; height: 12px; }
.do-banked-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted-on-light); margin: 8px 0; cursor: pointer; }
.do-banked-row input { width: 16px; height: 16px; accent-color: var(--sap-ink); }
.do-banked-row b { color: var(--sap-ink); }
.lv-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--cc, #2E7D5B); }
.lv-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc, #2E7D5B); }
.apr-id .lv-cat { display: inline-flex; }
.do-kind-row .inp { flex: 1; min-width: 0; }

.apr-box { background: var(--sap-cream); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-on-light); padding: 16px 18px; margin: 0 0 20px; }
.apr-box.apr-empty { display: flex; align-items: center; gap: 8px; color: var(--text-muted-on-light); font-size: 13.5px; }
.apr-box.apr-empty .ic { width: 15px; height: 15px; color: var(--st-activo); }
.apr-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.apr-head .ic { width: 16px; height: 16px; }
.apr-head h2 { font-size: 15px; margin: 0; font-weight: 700; }
.apr-head .n { font-size: 11px; font-weight: 700; color: #A66E07; background: #F7EBCF; border-radius: 999px; padding: 2px 8px; }
.apr-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border-on-light); }
.apr-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.apr-id b { font-size: 14px; }
.apr-id span { font-size: 12.5px; color: var(--text-muted-on-light); }

.hr-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: #7A4FB5; background: #EDE3F7; border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
.hr-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 8px 13px; border-radius: 999px;
  border: 1.5px dashed var(--border-on-light); background: transparent; color: var(--text-muted-on-light); cursor: pointer; font-weight: 600; font-size: 13px; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.hr-toggle .ic { width: 14px; height: 14px; }
.hr-toggle:hover { border-color: var(--sap-ink); color: var(--sap-ink); }
.hr-toggle.on { border-style: solid; border-color: #7A4FB5; color: #7A4FB5; background: #F6F0FC; }

/* === Panel Empresas (Fase C) === */
.cmp-card { background: var(--sap-cream); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-on-light);
  padding: 20px 22px; margin-bottom: 18px; }
.cmp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cmp-card-head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1; margin: 0; }
.cmp-active { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--st-activo);
  background: #DDEFE4; border-radius: 999px; padding: 3px 9px; vertical-align: middle; margin-left: 6px; }
.cmp-engine { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; vertical-align: middle; margin-left: 6px; }
.cmp-engine .ic { width: 13px; height: 13px; }
.cmp-engine--project { color: #225C78; background: #DDEAF1; }
.cmp-engine--process { color: #1F6044; background: #DCEBE0; }
/* Costos · tabla de tarifas */
.rc-table { overflow-x: auto; }
.rc-table table { width: 100%; border-collapse: collapse; }
/* toggle "flujo de caja": En caja (verde) vs Solo costeo (arena) */
.rc-cash { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: var(--st-hecho-ink); background: var(--st-hecho-soft); border: 1px solid transparent; transition: background .12s, box-shadow .12s; }
.rc-cash:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--st-hecho) 45%, transparent); }
.rc-cash .ic { width: 14px; height: 14px; }
.rc-cash.off { color: var(--sap-clay); background: var(--sap-sand); }
.rc-cash.off:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sap-clay) 45%, transparent); }
.rc-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--text-muted-on-light); text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 10px; }
.rc-table td { padding: 8px 10px; border-top: 1px solid var(--border-on-light); vertical-align: middle; }
.rc-who { display: flex; align-items: center; gap: 10px; }
.rc-id b { display: block; font-size: 14px; }
.rc-id span { font-size: 12px; color: var(--text-muted-on-light); }
.rc-money { display: inline-flex; align-items: center; gap: 6px; }
.rc-money > span { font-size: 13px; color: var(--text-muted-on-light); }
.rc-inp { width: 120px; }
.rc-derived { font-size: 13px; font-weight: 700; color: var(--sap-ink); white-space: nowrap; }
.ov-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-on-light); }
.ov-row label { font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); }
.ov-row .rc-inp { width: 90px; }
.rc-pos { color: #1F6044; }
.rc-neg { color: #B0432F; }
/* P&L por proyecto: fila expandible + desglose */
.cp-name { cursor: pointer; font-weight: 600; }
.cp-name:hover { color: var(--sap-ink); }
.cp-caret { display: inline-block; width: 12px; color: var(--text-muted-on-light); font-size: 11px; }
/* Encabezado de espacio (agrupación colapsable) en la tabla de rentabilidad */
.cs-space-row { cursor: pointer; }
.cs-space-row > td { background: var(--sap-cream); border-top: 1px solid var(--border-on-light); font-weight: 600; }
.cs-space-row:hover > td { background: color-mix(in oklab, var(--sap-cream) 80%, var(--border-on-light)); }
.cs-space-name { font-size: 14px; color: var(--sap-ink); }
.cs-space-n { font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); background: var(--bg); padding: 1px 7px; border-radius: 999px; margin-left: 6px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.cs-space-row .rc-derived { color: var(--text-muted-on-light); }
/* fila de ENTIDAD FISCAL (RUC) — un nivel arriba del espacio en Por proyecto */
.cs-ent-row { cursor: pointer; }
.cs-ent-row > td { background: color-mix(in oklab, var(--accent) 9%, var(--sap-cream)); border-top: 2px solid color-mix(in oklab, var(--accent) 30%, var(--border-on-light)); font-weight: 700; }
.cs-ent-row:hover > td { background: color-mix(in oklab, var(--accent) 15%, var(--sap-cream)); }
.cs-ent-name { font-size: 14px; color: var(--sap-ink); }
.cs-ent-ruc { font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--bg); padding: 1px 8px; border-radius: 999px; margin-left: 8px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, var(--border-on-light)); }
.cs-ent-row .cs-space-row > td { padding-left: 22px; }
.cp-detail > td { background: rgba(46,29,20,.03); padding: 0 !important; }
.cp-detail-in { padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.cp-pl { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--text-muted-on-light); }
.cp-pl b { color: var(--sap-ink); }
.cp-pl-tot { margin-left: auto; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cp-block h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted-on-light); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.cp-block h4 .ic { width: 13px; height: 13px; }
.cp-mini { width: 100%; border-collapse: collapse; }
.cp-mini td { padding: 5px 8px; border-bottom: 1px solid var(--border-on-light); font-size: 13px; }
.cp-mini tr:last-child td { border-bottom: none; }
@media (max-width: 720px) { .cp-grid { grid-template-columns: 1fr; } }
.rc-total td { border-top: 2px solid var(--border-on-light); padding-top: 12px; }
/* Pedidos de Ayni: timeline de cumplimiento + pastillas de estado */
.po-timeline { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: stretch; }
.po-node { flex: 1; min-width: 78px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--sap-sand); box-shadow: inset 0 0 0 1px var(--border-on-light); position: relative; opacity: .55; }
.po-node.is-done { opacity: 1; background: #EAF3EC; box-shadow: inset 0 0 0 1px #BBD9C2; }
.po-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted-on-light); }
.po-node.is-done .po-dot { background: #1F6044; }
.po-node-l { font-size: 11px; font-weight: 700; color: var(--sap-ink); }
.po-node-d { font-size: 11px; color: var(--text-muted-on-light); }
.po-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--sap-sand); color: var(--text-muted-on-light); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.po-pill.ok { background: #EAF3EC; color: #1F6044; box-shadow: inset 0 0 0 1px #BBD9C2; }
.po-pill.mid { background: #FBF3E7; color: #8A6D2F; box-shadow: inset 0 0 0 1px #E8D6B0; }
.po-pill.bad { background: #FBEDEA; color: #B0432F; box-shadow: inset 0 0 0 1px #E8C3B9; }
/* Aging de cobranzas (antigüedad de deuda) */
.aging-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.aging-cell { border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 0 0 1px var(--border-on-light); background: var(--sap-cream); }
.aging-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted-on-light); }
.aging-v { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.aging-cell.aging-ok { background: #EAF3EC; box-shadow: inset 0 0 0 1px #BBD9C2; }
.aging-cell.aging-mid { background: #FBF3E7; box-shadow: inset 0 0 0 1px #E8D6B0; }
.aging-cell.aging-bad { background: #FBEDEA; box-shadow: inset 0 0 0 1px #E8C3B9; }
@media (max-width: 720px) { .aging-row { grid-template-columns: repeat(2, 1fr); } }
/* Alerta de cobranzas vencidas en Inicio (owner) */
.home-overdue { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 18px;
  background: #FBEDEA; box-shadow: inset 0 0 0 1px #E8C3B9; border: none; border-radius: var(--radius-md); padding: 14px 16px; color: var(--sap-ink); }
.home-overdue:hover { box-shadow: inset 0 0 0 1.5px #B0432F; }
.home-overdue .ho-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #B0432F; color: #fff; flex-shrink: 0; }
.home-overdue .ho-ic .ic { width: 18px; height: 18px; }
.home-overdue .ho-t { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.home-overdue .ho-t b { font-size: 15px; font-weight: 700; }
.home-overdue .ho-t span { font-size: 12.5px; color: var(--text-muted-on-light); }
.home-overdue > .ic { width: 16px; height: 16px; color: #B0432F; flex-shrink: 0; }
/* Alerta CxP del Inicio (pagos propios por vencer/vencidos) — ámbar; roja si hay vencidos */
.home-pay { align-items: flex-start; background: #FAF1DD; box-shadow: inset 0 0 0 1px #E8D3A2; }
.home-pay:hover { box-shadow: inset 0 0 0 1.5px #A66E07; }
.home-pay .ho-ic { background: #A66E07; }
.home-pay > .ic { color: #A66E07; margin-top: 9px; }
.home-pay.is-late { background: #FBEDEA; box-shadow: inset 0 0 0 1px #E8C3B9; }
.home-pay.is-late:hover { box-shadow: inset 0 0 0 1.5px #B0432F; }
.home-pay.is-late .ho-ic { background: #B0432F; }
.home-pay.is-late > .ic { color: #B0432F; }
.hp-list { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.hp-item { font-size: 12px; color: var(--text-muted-on-light); line-height: 1.45; }
.hp-who { color: var(--sap-ink); font-weight: 600; }
.hp-more { font-size: 11px; color: var(--text-muted-on-light); font-style: italic; margin-top: 1px; }
/* Costos · Resumen / Por persona (cs-*) */
.cs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.cs-kpis-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.cs-kpi { background: var(--sap-cream); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; gap: 4px; }
.cs-kpi-alert { box-shadow: inset 0 0 0 1px #E2B4AA; background: #FBF1EE; }
.cs-kpi-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted-on-light); }
.cs-kpi-v { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.cs-kpi-v .cs-per { font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 2px; }
.cs-kpi-sub { font-size: 12px; color: var(--secondary); }
.cs-mix { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--sap-sand); }
.cs-mix-seg { display: block; height: 100%; }
.cs-mix-seg + .cs-mix-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.55); }
.cs-legs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.cs-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cs-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cs-leg-v { color: var(--text-muted-on-light); font-size: 12px; }
.cs-fix-flex { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cs-break { flex: 1; min-width: 200px; background: var(--sap-cream); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; gap: 4px; }
.cs-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cs-rank h4 { margin: 0 0 6px; font-size: 13px; }
.cs-rank-row { cursor: pointer; }
.cs-rank-row:hover { background: var(--sap-sand); }
.cs-amber { color: #B8860B; }
.cs-off { opacity: .5; }
.cs-kind { min-width: 74px; }
.cs-kind-var { color: #B8860B; box-shadow: inset 0 0 0 1px #E3C887; }
.cs-pname { display: inline-flex; align-items: center; gap: 2px; }
.cs-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--sap-sand); color: var(--text-muted-on-light); white-space: nowrap; }
.cs-chip.rc-pos { background: #E6F2EA; color: #1F6044; }
.cs-chip.rc-neg { background: #FBE9E4; color: #B0432F; }
.cs-chip.cs-amber { background: #FBF1DC; color: #B8860B; }
@media (max-width: 860px) { .cs-kpis, .cs-kpis-3 { grid-template-columns: repeat(2, 1fr); } .cs-rank-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cs-kpis, .cs-kpis-3 { grid-template-columns: 1fr; } }
/* Invitados (freelancers) en el selector de responsables */
.ach-gi, .mn-gi { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #E0991B; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.gtag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #A66E07; background: #F7EBCF; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.mn-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light); padding: 10px 12px 4px; }
.mn-new .mn { color: var(--text-muted-on-light); }
.cmp-sub { font-size: 13px; color: var(--text-muted-on-light); }
.cmp-members { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.cmp-member { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: 1px solid var(--border-on-light); }
.cmp-member:last-child { border-bottom: none; }
.cmp-m-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmp-m-id b { font-size: 14px; font-weight: 600; }
.cmp-m-id span { font-size: 12px; color: var(--text-muted-on-light); }
.cmp-role { font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); }
.cmp-role-sel { position: relative; display: inline-flex; align-items: center; }
.cmp-role-sel .cal-select { font-size: 12.5px; padding: 5px 26px 5px 10px; }
.cmp-x { width: 24px; height: 24px; border: none; background: transparent; border-radius: 6px; color: var(--text-muted-on-light);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmp-x .ic { width: 13px; height: 13px; }
.cmp-x:hover { background: #F3D9D4; color: var(--accent); }
.cmp-inv-list { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-on-light); }
.cmp-invite { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 13px; }
.cmp-invite .ic { width: 14px; height: 14px; color: var(--text-muted-on-light); flex-shrink: 0; }
.cmp-inv-mail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cmp-inv-role { font-size: 12px; color: var(--text-muted-on-light); }
.cmp-inv-pend { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #A66E07; background: #F7EBCF; border-radius: 999px; padding: 2px 8px; }
.cmp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-err { color: var(--accent); font-size: 13px; margin: 6px 0 0; }
.cmp-err.hide { display: none; }

/* botón + de nueva tarea en el encabezado de cada grupo del Inicio */
.th-add { text-align: right; width: 40px; }
.grp-add { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--border-on-light);
  background: transparent; color: var(--text-muted-on-light); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: border-color .12s ease, color .12s ease, transform .12s ease; }
.grp-add .ic { width: 13px; height: 13px; }
.grp-add:hover { border-style: solid; border-color: var(--sap-ink); color: var(--sap-ink); transform: translateY(-1px); }

/* proyectos en negociación + acciones del detalle de cliente */
.cl-del-btn { margin-top: 14px; width: 100%; justify-content: center; }
.nego-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #A66E07; background: #F7EBCF; border-radius: 999px; padding: 3px 9px;
  margin-left: 8px; flex-shrink: 0; }
.cl-section-head .cl-newproj-btn { margin-left: auto; }

/* CRM × Finanzas (owner-only): tarjetas de cobranza + margen real */
.cl-finance .cl-section-head { margin-bottom: 12px; }
.owner-only-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--sap-ink); color: var(--sap-cream); }
.owner-only-tag .ic { width: 11px; height: 11px; }
.cl-finance .clf-refresh { margin-left: auto; }
.clf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.clf-card { background: var(--sap-cream); border-radius: var(--radius-md); padding: 14px 16px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; gap: 4px; }
.clf-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted-on-light); }
.clf-val { font-family: var(--font-display); font-size: 21px; line-height: 1.05; color: var(--sap-ink); }
.clf-sub { font-size: 11px; color: var(--text-muted-on-light); font-style: italic; }
.clf-pct { font-size: 13px; font-weight: 600; }
.clf-card.clf-pos .clf-val { color: #1F6044; }
.clf-card.clf-neg .clf-val { color: #B0432F; }
.clf-card.clf-warn { box-shadow: inset 0 0 0 1px #E0991B; }
.clf-card.clf-alert { box-shadow: inset 0 0 0 1.5px #B0432F; background: #FBE9E4; }
.clf-card.clf-alert .clf-val { color: #B0432F; }
.clf-muted { color: var(--text-muted-on-light); }
.clf-empty { padding: 16px; color: var(--text-muted-on-light); font-style: italic; }

/* ============================================================
   COBRANZA (Cuentas por Cobrar) — worklist owner-only
   ============================================================ */
.cob-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 4px; }
.cob-kpi { background: var(--sap-cream); border-radius: var(--radius-md); padding: 14px 16px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; gap: 4px; }
.cob-kpi__l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted-on-light); }
.cob-kpi__v { font-family: var(--font-display); font-size: 23px; line-height: 1.05; color: var(--sap-ink); }
.cob-kpi__s { font-size: 11px; color: var(--text-muted-on-light); font-style: italic; }
.cob-kpi--alert { box-shadow: inset 0 0 0 1.5px #B0432F; background: #FBE9E4; }
.cob-kpi--alert .cob-kpi__v { color: #B0432F; }
.cob-kpi--warn { box-shadow: inset 0 0 0 1px #E0991B; }

.cob-clear { display: flex; align-items: center; gap: 14px; padding: 24px 22px; border-radius: var(--radius-md);
  background: #DCEBE0; box-shadow: inset 0 0 0 1px #2E7D5B33; }
.cob-clear .ic { width: 30px; height: 30px; color: #1F6044; flex: 0 0 auto; }
.cob-clear b { display: block; color: #1F6044; font-size: 16px; }
.cob-clear span { color: #3a6b52; font-size: 13px; }

.cob-card { background: #fff; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-on-light), 0 1px 2px rgba(16,9,6,.04);
  margin: 0 0 14px; overflow: hidden; }
.cob-card.is-over { box-shadow: inset 0 0 0 1.5px #E5B6AC, 0 1px 2px rgba(16,9,6,.04); }
.cob-card__head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-on-light); }
.cob-card.is-over .cob-card__head { background: #FCF1ED; }
.cob-cli { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 240px; }
.cob-cli__t { min-width: 0; }
.cob-cli__t b { display: block; font-size: 15px; color: var(--sap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.cob-badge .ic { width: 12px; height: 12px; }
.cob-badge--over { background: #FBE0D9; color: #B0432F; }
.cob-badge--ok { background: #E7EDE9; color: #4a6b5b; }
.cob-reminded { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 0 6px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: #E4ECF1; color: #2C6E8F; }
.cob-reminded .ic { width: 11px; height: 11px; }
.cob-card__tot { text-align: right; flex: 0 0 auto; }
.cob-card__totv { display: block; font-family: var(--font-display); font-size: 19px; color: var(--sap-ink); }
.cob-card.is-over .cob-card__totv { color: #B0432F; }
.cob-card__tots { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted-on-light); }
.cob-card__acts { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.cob-remind.btn { background: var(--sap-ink); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.cob-remind.btn .ic { width: 15px; height: 15px; }
.cob-remind.btn:hover { background: #000; }
.cob-remind.is-off { background: #ECE7DD; color: #8b8276; cursor: help; }
.cob-remind.is-off:hover { background: #ECE7DD; }

.cob-tw { overflow-x: auto; }
.cob-items { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.cob-items td { padding: 9px 18px; border-bottom: 1px solid #F1ECE3; vertical-align: middle; color: var(--sap-ink); }
.cob-items tr:last-child td { border-bottom: none; }
.cob-doc { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light);
  background: #F1ECE3; padding: 1px 6px; border-radius: 5px; }
.cob-cpt { color: var(--text-muted-on-light); }
.cob-dt { white-space: nowrap; color: var(--text-muted-on-light); }
.cob-amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cob-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cob-pill .ic { width: 12px; height: 12px; }
.cob-pill--over { background: #FBE0D9; color: #B0432F; }
.cob-pill--soon { background: #F7EBCF; color: #A66E07; }
.cob-pill--none { background: #ECE7DD; color: #6E665B; }

/* Gastos de la tarea (reembolsos) en la ficha */
.task-exp { display: flex; flex-direction: column; gap: 8px; }
.te-list { display: flex; flex-direction: column; gap: 6px; }
.te-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--border-on-light); font-size: 13px; }
.te-item.te-approved { background: #DCEBE0; box-shadow: inset 0 0 0 1px #2E7D5B33; }
.te-main { min-width: 0; }
.te-main b { font-variant-numeric: tabular-nums; }
.te-cat { color: var(--sap-ink); }
.te-side { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.te-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.te-pill .ic { width: 11px; height: 11px; }
.te-ok { background: #DCEBE0; color: #1F6044; }
.te-no { background: #ECE7DD; color: #6E665B; }
.te-pend { background: #F7EBCF; color: #A66E07; }
.te-x { border: none; background: none; cursor: pointer; color: var(--text-muted-on-light); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.te-x:hover { background: rgba(176,67,47,.12); color: #B0432F; }
.te-approve.btn { background: #2E7D5B; color: #fff; border: none; }
.te-approve.btn:hover { background: #1F6044; }
.te-rcpt { color: #2C6E8F; font-size: 12px; white-space: nowrap; }
.te-rcpt .ic { width: 12px; height: 12px; vertical-align: -2px; }
.te-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--sap-ink); }
.te-form-row { display: flex; gap: 8px; align-items: center; }
.te-form-row .inp { flex: 1; min-width: 0; }
.te-amt { width: 110px; flex: 0 0 auto; }
.te-cur { width: 104px; flex: 0 0 auto; }
.te-fx { width: 120px; flex: 0 0 auto; }
.te-pen { font-size: 11px; color: var(--text-muted-on-light); font-variant-numeric: tabular-nums; }
.te-acct-sel { flex: 1; min-width: 0; }
.te-acct { color: var(--text-muted-on-light); white-space: nowrap; }
.te-acct .ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
/* Registrar tiempo manual en la ficha */
.task-time { display: flex; flex-direction: column; gap: 8px; }
.mt-total { font-size: 13px; color: var(--text-muted-on-light); }
.mt-total b { color: var(--sap-ink); font-variant-numeric: tabular-nums; }
.mt-add { align-self: flex-start; }
.mt-form { display: flex; flex-direction: column; gap: 10px; padding: 11px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--sap-ink); }
.mt-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mt-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); }
.mt-lbl .inp { width: auto; }
.mt-dur { font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); align-self: center; padding-bottom: 6px; }
.mt-dur.ok { color: #1F6044; }
.mt-dur.bad { color: #B0432F; font-weight: 400; font-size: 12px; }
.mt-actions { justify-content: flex-start; }
.te-up { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted-on-light); cursor: pointer; padding: 7px 10px;
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-on-light); white-space: nowrap; }
.te-up:hover { color: var(--sap-ink); }
.te-up input[type="file"] { display: none; }
.te-up .ic { width: 14px; height: 14px; }
.te-form-actions { justify-content: flex-start; }
.te-scan { font-size: 12px; color: var(--text-muted-on-light); }
.te-scan:empty { display: none; }
.te-scan.is-on { color: #2C6E8F; }
.te-scan.is-ok { color: #1F6044; font-weight: 600; }


/* Config de etapas del pipeline (modal) */
.stcfg-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.stcfg-row { display: flex; align-items: center; gap: 8px; }
.stcfg-color { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; flex-shrink: 0; }
.stcfg-label { flex: 1; min-width: 60px; }
.stcfg-kind { position: relative; flex-shrink: 0; }
.stcfg-kind .cal-select { min-width: 124px; }
.stcfg-ord { display: flex; gap: 2px; flex-shrink: 0; }
.stcfg-ord .btn-icon[disabled] { opacity: .3; pointer-events: none; }
.stcfg-del { flex-shrink: 0; color: #B0432F; }
.client-head-stage .cl-save-btn { margin-top: 10px; }

/* botón copiar link de tarea (pegado a la última palabra del nombre) */
.tlink { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: none; background: transparent; border-radius: 6px; color: var(--text-muted-on-light);
  cursor: pointer; opacity: .25; vertical-align: -4px; margin-left: 5px; padding: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease; }
.tlink .ic { width: 13px; height: 13px; }
tr:hover .tlink, .tcard:hover .tlink, .cal-row:hover .tlink { opacity: .75; }
.tlink:hover { opacity: 1 !important; background: var(--sap-paper); color: var(--sap-ink); }
.panel__share { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--sap-paper);
  color: var(--text-muted-on-light); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; margin-right: 8px; }
.panel__share .ic { width: 15px; height: 15px; }
.panel__share:hover { color: var(--sap-ink); transform: translateY(-1px); }

.att-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--sap-paper); border-radius: 999px; padding: 4px 4px 4px 10px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); font-size: 12.5px; font-weight: 600; }
.att-chip a { display: inline-flex; align-items: center; gap: 6px; color: var(--sap-ink); }
.att-chip a .ic { width: 14px; height: 14px; color: var(--st-progreso); }
.att-x { border: none; background: none; padding: 2px; border-radius: 50%; color: var(--text-muted-on-light); cursor: pointer; display: inline-flex; }
.att-x .ic { width: 12px; height: 12px; }
.att-x:hover { background: var(--accent); color: #fff; }
.att-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); }
.att-count .ic { width: 13px; height: 13px; }
.kcard .att-count { margin: 8px 0 0; }

/* ── Attachment action buttons (Drive + URL) ─────────────── */
.att-actions { display: flex; gap: 8px; margin-top: 10px; }
.att-drive-btn, .att-url-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border-on-light); transition: background .15s, border-color .15s;
}
.att-drive-btn {
  background: #1A73E8; color: #fff; border-color: #1A73E8;
}
.att-drive-btn .ic { width: 15px; height: 15px; }
.att-drive-btn:hover { background: #1765CC; }
.att-url-btn {
  background: var(--bg); color: var(--sap-ink);
}
.att-url-btn .ic { width: 14px; height: 14px; }
.att-url-btn:hover { background: var(--sap-sand); border-color: var(--sap-ink); }

/* ── Create file buttons ──────────────────────────────────── */
.att-actions--create { margin-top: 6px; }
.att-create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px;
  font-weight: 600; font-family: inherit; cursor: pointer;
  border: 1.5px dashed var(--border-on-light); background: var(--bg);
  color: var(--sap-ink); transition: background .15s, border-color .15s;
}
.att-create-btn .ic { width: 14px; height: 14px; }
.att-create-btn--doc { color: #4285F4; border-color: #4285F4aa; }
.att-create-btn--doc:hover { background: #4285F40d; border-color: #4285F4; }
.att-create-btn--sheet { color: #0F9D58; border-color: #0F9D58aa; }
.att-create-btn--sheet:hover { background: #0F9D580d; border-color: #0F9D58; }

/* ── Attachment inline form ───────────────────────────────── */
.att-form { margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--sap-paper); border: 1px solid var(--border-on-light); }
.att-form.hide { display: none; }
.att-form__row { display: flex; align-items: center; gap: 8px; }
.att-form__det { display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); }
.att-form__det .ic { width: 16px; height: 16px; }
.att-det--doc { background: #E8F0FE; color: #4285F4; }
.att-det--sheet { background: var(--st-hecho-soft); color: var(--st-hecho-ink); }
.att-det--link { background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); }
.att-form__row .inp { flex: 1; min-width: 0; }
.att-form__meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.att-form__meta.hide { display: none; }
.att-form__meta .inp-sm { flex: 1; min-width: 0; }
.att-tbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.att-tbadge .ic { width: 13px; height: 13px; }
.att-tbadge--doc   { background: #E8F0FE; color: #4285F4; }
.att-tbadge--sheet { background: var(--st-hecho-soft); color: var(--st-hecho-ink); }
.att-tbadge--link  { background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); }
.att-form__hint { font-size: 12px; margin: 6px 0 0; font-style: italic; font-family: var(--font-serif); }
.att-hint--warn { color: #B8860B; }
.att-hint--err  { color: #C0392B; }

/* ── Attachment summary pills (kanban cards) ──────────────── */
.att-summary { display: inline-flex; align-items: center; gap: 4px; }
.att-s { display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
  font-weight: 700; padding: 2px 6px; border-radius: 5px; line-height: 1; }
.att-s .ic { width: 13px; height: 13px; }
.att-s--doc   { background: #E8F0FE; color: #4285F4; }
.att-s--sheet { background: var(--st-hecho-soft); color: var(--st-hecho-ink); }
.att-s--link  { background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); }

/* ── Kanban card attachment row ───────────────────────────── */
.kcard__atts { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; flex-wrap: wrap; }
.kcard__atts .att-links { gap: 3px; }
.kcard__atts .att-link { width: 28px; height: 28px; border-radius: 6px; }

.status-btn { border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; transition: background .14s ease, transform .12s var(--ease-out); }
.status-btn .sb-chev { width: 13px; height: 13px; color: var(--text-muted-on-light); }
.status-btn:hover { background: var(--sap-sand); }
.status-btn:active { transform: scale(.95); }
.c-name-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row-type { display: inline-flex; align-items: center; gap: 8px; }
.c-name-txt { cursor: text; }
.c-acts { white-space: nowrap; text-align: right; }
.c-acts .att-count { margin-right: 6px; }

.name-label { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-muted-on-light); margin-bottom: 8px; }
.proj-head__drive { display: flex; align-items: center; gap: 8px; margin-top: 14px; width: 100%; }
.drive-input { flex: 1; max-width: 340px; }
.drive-create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; font-family: inherit; cursor: pointer;
  border: 1.5px dashed #1A73E8aa; background: var(--bg);
  color: #1A73E8; transition: background .15s, border-color .15s; white-space: nowrap;
}
.drive-create-btn .ic { width: 15px; height: 15px; }
.drive-create-btn:hover { background: #1A73E80d; border-color: #1A73E8; }
.drive-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; font-family: inherit; text-decoration: none;
  background: #1A73E80d; color: #1A73E8; border: 1px solid #1A73E833;
  transition: background .15s, border-color .15s; max-width: 400px;
}
.drive-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-link .ic { width: 15px; height: 15px; flex-shrink: 0; }
.drive-link:hover { background: #1A73E81a; border-color: #1A73E8; }
.drive-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-on-light);
  background: var(--bg); color: var(--text-muted-on-light); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.drive-clear .ic { width: 13px; height: 13px; }
.drive-clear:hover { background: #fee; color: #c33; border-color: #c33; }

.modal-scrim { z-index: 160; }
.modal { position: fixed; z-index: 161; left: 50%; top: 50%; transform: translate(-50%, -47%); width: 460px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 28px); overflow-y: auto;   /* forms largos no se desbordan en pantallas chicas */
  background: var(--sap-cream); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: 1; margin: 0; }
.modal-sub { font-family: var(--font-serif); color: var(--text-muted-on-light); margin: 8px 0 16px; font-size: 15px; }
.dup-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dup-opt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; background: var(--sap-paper); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-on-light); transition: transform .12s var(--ease-out), box-shadow .12s ease; }
.dup-opt:active { transform: scale(.98); }
.dup-opt input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.modal-foot { display: flex; gap: 10px; margin-top: 22px; }
@media (max-width: 560px) { .dup-opts { grid-template-columns: 1fr; } }

/* selector "Subtarea de…" (anidar tareas seleccionadas bajo una principal) */
.nest-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; max-height: 52vh; overflow-y: auto; }
.nest-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border-on-light); background: var(--sap-paper); cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s var(--ease-out); }
.nest-opt:hover { border-color: var(--sap-ink); background: var(--sap-cream); }
.nest-opt:active { transform: scale(.98); }
.nest-opt-name { font-weight: 600; color: var(--sap-ink); font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nest-opt-n { font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); background: var(--sap-cream); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }

/* arrastrar fila de lista para anidar */
.row-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 22px; margin: 0 1px 0 -5px;
  color: var(--text-muted-on-light); cursor: grab; opacity: 0; flex-shrink: 0; touch-action: none; transition: opacity .12s ease; }
.row-grip-sp { display: inline-flex; width: 16px; height: 22px; margin: 0 1px 0 -5px; flex-shrink: 0; }   /* mismo footprint que .row-grip → alinea nombres */
.tlist tr:hover .row-grip { opacity: .5; }
.row-grip:hover { opacity: 1; }
.row-grip:active { cursor: grabbing; }
@media (hover: none) { .row-grip { opacity: .42; } }
tr.nest-drop-target > td { background: color-mix(in oklab, var(--accent) 12%, var(--sap-cream)) !important; }
tr.nest-drop-target > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
body.list-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.list-drag-pill { position: fixed; left: 0; top: 0; z-index: 9000; pointer-events: none; background: var(--sap-ink); color: var(--sap-cream);
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; box-shadow: 0 10px 28px rgba(16, 9, 6, .32);
  max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-drag-pill.ok { background: var(--accent); }
/* des-anidar: resaltar la cabecera como zona "hacer principal" */
thead.promote-target th { background: color-mix(in oklab, var(--accent) 14%, var(--sap-cream)) !important; box-shadow: inset 0 -2px 0 var(--accent); }
/* arrastrar proyecto a un espacio del menú lateral */
.proj-card[data-pdrag] { cursor: grab; }
body.proj-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.nav-item.proj-drop-target { background: color-mix(in oklab, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ícono de espacio en los pickers "Mover" / "Mostrar en otros espacios" */
.mv-sp-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.mv-sp-ic .ic { width: 15px; height: 15px; }
/* multi-select "Mostrar en otros espacios" (checkbox por espacio) */
.xsp-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--border-on-light); background: var(--sap-paper); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.xsp-opt:has(.xsp-chk:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--sap-paper)); }
.xsp-chk { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
/* badge "+N espacios" en la tarjeta de proyecto */
.xsp-badge { color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 28%, var(--border-on-light)); }
.xsp-badge .ic { width: 13px; height: 13px; }

/* ============================================================
   v9 — congelar 1ª columna (CRM), colores de etapa, multi-
   responsable con foto, enlaces de adjuntos abribles
   ============================================================ */

/* Etapa coloreada por estado en la lista (la v1 .tlist-crm se retiró con el tracker v2) */
.tlist .stage-pill .stage-select { color: var(--sc); font-weight: 700;
  background: color-mix(in oklab, var(--sc) 16%, var(--sap-cream));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 42%, transparent); }
.tlist .stage-pill .cs-chev { color: var(--sc); }

/* (3) Multi-responsable con foto */
.resp-stack { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.resp-stack .ach { padding: 3px; gap: 0; }
.resp-stack .ach .ach-x { margin-left: 1px; }
.resp-stack .ach-add { padding: 6px; gap: 0; }
.cl-na-resps { display: flex; flex-direction: column; gap: 9px; }
.cl-na-sub { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-muted-on-light); }
.cl-na-resps .assignees { gap: 7px; }

/* (7) Enlaces de adjuntos abribles desde listas y tarjetas */
.att-links { display: inline-flex; align-items: center; gap: 5px; }
.att-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px;
  color: var(--st-progreso-ink); background: var(--st-progreso-soft); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .14s ease, transform .1s ease; }
.att-link .ic { width: 14px; height: 14px; }
.att-link { position: relative; }
.att-link:hover { box-shadow: inset 0 0 0 1px var(--st-progreso); transform: translateY(-1px); }
.att-link:active { transform: scale(.93); }
.att-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--sap-ink); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.att-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--sap-ink);
}
.att-link:hover .att-tip { opacity: 1; }
/* mini-chips de adjuntos EN LA FILA de la lista (tipo + nombre visibles); heredan el color
   por tipo de las reglas .att-link-* de abajo (por eso van ANTES en el archivo) */
.att-minis { display: inline-flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.att-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; text-decoration: none; max-width: 190px; border: none; cursor: pointer;
  color: var(--text-muted-on-light); background: var(--sap-paper); }
.att-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-mini .ic { width: 12px; height: 12px; flex-shrink: 0; }
.att-mini:hover { filter: brightness(.95); }
.att-mini-more { background: var(--sap-sand); color: var(--sap-ink); font-weight: 700; font-size: 11px; }
.att-link-sheet { color: var(--st-hecho-ink); background: var(--st-hecho-soft); }
.att-link-sheet:hover { box-shadow: inset 0 0 0 1px var(--st-hecho); }
/* ── Adjuntos por tipo de archivo: ícono + color propios (PDF rojo, Word azul, Excel verde…) ── */
.att-link-pdf    { color: #C0392B; background: #FBEAE8; }
.att-link-pdf:hover    { box-shadow: inset 0 0 0 1px #C0392B; }
.att-link-word   { color: #2B6CB0; background: #E8F0FE; }
.att-link-word:hover   { box-shadow: inset 0 0 0 1px #2B6CB0; }
.att-link-excel  { color: #1E8E3E; background: #E6F4EA; }
.att-link-excel:hover  { box-shadow: inset 0 0 0 1px #1E8E3E; }
.att-link-slides { color: #C2410C; background: #FCEDE3; }
.att-link-slides:hover { box-shadow: inset 0 0 0 1px #C2410C; }
.att-link-image  { color: #7C3AED; background: #F1ECFB; }
.att-link-image:hover  { box-shadow: inset 0 0 0 1px #7C3AED; }
.att-link-zip    { color: #5B6470; background: #EEF0F2; }
.att-link-zip:hover    { box-shadow: inset 0 0 0 1px #5B6470; }
/* mismo color en el ícono del chip (panel de tarea / proyecto) */
.att-chip-pdf    a .ic { color: #C0392B; }
.att-chip-word   a .ic { color: #2B6CB0; }
.att-chip-excel  a .ic { color: #1E8E3E; }
.att-chip-slides a .ic { color: #C2410C; }
.att-chip-image  a .ic { color: #7C3AED; }
.att-chip-zip    a .ic { color: #5B6470; }
.kcard .att-links { display: flex; margin: 9px 0 0; }
.c-acts .att-links { margin-right: 8px; vertical-align: middle; }
.tcard__foot-r .att-links { gap: 4px; }

/* ── Team page ───────────────────────────────────────── */
.view-team { padding: 48px 56px; max-width: 820px; }
.view-team .view-head { margin-bottom: 32px; }
.view-team .view-sub { color: var(--ink-soft); font-size: 15px; }
.team-grid { display: flex; flex-direction: column; gap: 8px; }
.team-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line);
  transition: box-shadow .15s;
}
.team-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.team-card--you { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.team-card__left { display: flex; align-items: center; gap: 14px; }
.team-card__info { display: flex; flex-direction: column; }
.team-card__info b { font-size: 15px; }
.team-card__info span { font-size: 13px; color: var(--ink-soft); }
.team-you { font-weight: 400; color: var(--accent); font-size: 12px; }
.team-card__right { display: flex; align-items: center; gap: 10px; }
.team-role {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .03em;
}
.team-role--owner { background: #FEBD38; color: #5A4100; }
.team-role--admin { background: #8ED8F8; color: #0D4E6F; }
.team-role--member { background: var(--st-hecho-soft); color: var(--st-hecho-ink); }
.team-role--viewer { background: var(--st-pendiente-soft); color: var(--st-pendiente-ink); }
.team-role-sel {
  font-size: 13px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer; font-family: inherit;
}
.btn-danger { background: #C0392B; color: #fff; border: 1px solid #C0392B; border-radius: 6px; cursor: pointer; padding: 7px 16px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.btn-danger:hover { background: #A93226; }
.btn-danger svg { width: 16px; height: 16px; }
.btn-danger-line { background: none !important; color: #C0392B !important; border: 1px solid #E6D5D2 !important; }
.btn-danger-line:hover { background: #FDEDEC !important; }

/* ── Project 3-dot menu ────────────────────────────────── */
.proj-menu-wrap { position: relative; }
.proj-menu-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: background .15s; }
.proj-menu-btn:hover { background: var(--sidebar-hover); }
.proj-menu-btn svg { width: 18px; height: 18px; }
.proj-menu { display: none; position: absolute; right: 0; top: 42px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 200px; z-index: 100; overflow: hidden; transform-origin: top right; }
.proj-menu.show { display: block; animation: ovPop .15s var(--ease-out); }
.proj-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: 14px; border: none; background: none; cursor: pointer; color: var(--fg); font-family: inherit; transition: background .12s; }
.proj-menu__item:hover { background: var(--sidebar-hover); }
.proj-menu__item svg { width: 16px; height: 16px; }
.proj-menu__item--danger { color: #C0392B; }
.proj-menu__item--danger:hover { background: #FDEDEC; }

/* ── Checkbox de tareas ────────────────────────────────── */
.c-chk { width: 36px; text-align: center; }
.c-chk input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sap-green); cursor: pointer; border-radius: 4px; }
/* ── Barra de selección en lote ──────────────────────── */
.sel-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--sap-ink); color: #fff;
  padding: 10px 20px; border-radius: 12px; display: none; align-items: center; gap: 14px; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); z-index: 200; white-space: nowrap; }
.sel-bar.show { display: flex; }
.sel-bar .btn { font-size: 13px; }
.sel-bar .btn-danger { background: #C0392B; color: #fff; border: none; }
.sel-bar .btn-line { color: #fff; border-color: rgba(255,255,255,.4); }
.sel-bar .btn-line:hover { background: rgba(255,255,255,.12); }
/* ── Context menu (click-derecho) ────────────────────── */
.ctx-menu { position: fixed; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 200px; z-index: 300; overflow: hidden; }
/* ── Modal warning text ────────────────────────────────── */
.modal-warn { color: #C0392B; background: #FDEDEC; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 8px 0 16px; line-height: 1.5; }

/* ── Pexels Cover Picker ────────────────────────────── */
.pxmodal .modal-body { padding: 0 24px 12px; }
.px-search { display: flex; align-items: center; gap: 8px; background: var(--sap-cream);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; margin-bottom: 14px; }
.px-search svg { flex-shrink: 0; color: var(--text-muted-on-light); }
.px-search input { flex: 1; border: none; background: none; padding: 10px 0; font-size: 14px;
  outline: none; color: var(--sap-ink); }
.px-search input::placeholder { color: var(--text-muted-on-light); }
.px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; max-height: 420px; overflow-y: auto; padding: 2px; }
.px-grid::-webkit-scrollbar { width: 6px; }
.px-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.px-thumb { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color .15s, box-shadow .15s; aspect-ratio: 16/10; }
.px-thumb:hover { border-color: var(--sap-stone); }
.px-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(225,6,0,.25); }
.px-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-credit { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 10px;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-credit a { color: #fff; text-decoration: underline; }
.px-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 48px 24px; color: var(--text-muted-on-light); text-align: center; }
.px-empty svg { width: 32px; height: 32px; opacity: .5; }
.px-empty p { margin: 0; font-size: 14px; }
.px-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.px-skel i { display: block; aspect-ratio: 16/10; border-radius: 8px;
  background: linear-gradient(90deg, var(--sap-cream) 25%, #e8e3db 50%, var(--sap-cream) 75%);
  background-size: 200% 100%; animation: pxShim 1.2s ease-in-out infinite; }
@keyframes pxShim { 0% { background-position: 200% 0 } to { background-position: -200% 0 } }
.px-more { display: flex; justify-content: center; padding: 12px 0; }
.px-more .btn { font-size: 13px; }
.px-attr { display: flex; align-items: center; gap: 6px; padding: 8px 0 0;
  font-size: 11px; color: var(--text-muted-on-light); }
.px-attr a { color: var(--text-muted-on-light); text-decoration: underline; }
.px-attr img { height: 16px; opacity: .6; }

/* pexels tabs */
.px-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px; }
.px-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: none;
  background: none; font-size: 13px; font-weight: 500; color: var(--text-muted-on-light);
  cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-bottom-color .15s; }
.px-tab svg { width: 15px; height: 15px; }
.px-tab:hover { color: var(--text-on-light); }
.px-tab.on { color: var(--sap-stone); border-bottom-color: var(--sap-stone); }

/* upload tab */
.px-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 48px 24px; border: 2px dashed var(--border); border-radius: 12px;
  cursor: pointer; transition: border-color .2s, background .2s; text-align: center; color: var(--text-muted-on-light); min-height: 220px; }
.px-dropzone svg { width: 36px; height: 36px; color: var(--sap-stone); margin-bottom: 4px; }
.px-dropzone p { margin: 0; font-size: 14px; }
.px-dropzone p b { color: var(--text-on-light); }
.px-hint { font-size: 12px; color: var(--text-muted-on-light); margin-top: 4px; }
.px-dropzone:hover, .px-dropzone--over { border-color: var(--sap-stone); background: rgba(0,0,0,.02); }
.px-upload-preview { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.px-upload-preview img { width: 100%; max-height: 300px; object-fit: contain; border-radius: 8px; }
.px-upload-info { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sap-stone); }
.px-upload-info svg { width: 16px; height: 16px; }

/* cover slot click hint */
.drop-img--empty { cursor: pointer; }
.drop-img--empty:hover { border-color: var(--sap-stone); }

/* ── Excel Import Modal ── */
.impmodal .modal-body { max-height: 60vh; overflow-y: auto; }
.imp-start { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 0; }
.imp-option { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 20px; border: 2px dashed var(--border); border-radius: 12px;
  cursor: pointer; transition: border-color .2s, background .2s; text-align: center; }
.imp-option:hover, .imp-option--over { border-color: var(--sap-stone); background: rgba(0,0,0,.02); }
.imp-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--sap-sand); color: var(--sap-stone); }
.imp-icon svg { width: 22px; height: 22px; }
.imp-option h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-on-light); }
.imp-option p { margin: 0; font-size: 12px; color: var(--text-muted-on-light); line-height: 1.4; }
.imp-help { padding: 12px 16px; background: var(--sap-sand); border-radius: 8px;
  font-size: 12px; color: var(--text-muted-on-light); line-height: 1.5; margin-top: 8px; }
.imp-help code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.imp-help b { color: var(--text-on-light); }

/* Preview */
.imp-summary { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 12px; }
.imp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--sap-sand); color: var(--text-on-light); }
.imp-pill--err { background: #FDECEA; color: #B5564A; }
.imp-pill--ok { background: #DCEBE0; color: #1F6044; }
.imp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.imp-tab { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: none;
  background: none; font-size: 13px; font-weight: 500; color: var(--text-muted-on-light);
  cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-bottom-color .15s; }
.imp-tab .count { font-size: 11px; background: var(--sap-sand); padding: 1px 6px; border-radius: 10px; }
.imp-tab:hover { color: var(--text-on-light); }
.imp-tab.on { color: var(--sap-stone); border-bottom-color: var(--sap-stone); }

.imp-table-wrap { overflow-x: auto; max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.imp-table th { position: sticky; top: 0; background: var(--sap-sand); padding: 8px 10px;
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted-on-light); border-bottom: 1px solid var(--border); }
.imp-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-on-light);
  white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.imp-table tr:hover td { background: var(--sap-sand); }
.imp-color { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.imp-sub { font-size: 10px; color: var(--sap-stone); background: var(--sap-sand); padding: 1px 6px; border-radius: 8px; }
.imp-warn { color: #E0991B; }
.imp-empty { padding: 24px; text-align: center; color: var(--text-muted-on-light); font-size: 13px; }
.imp-more { text-align: center; color: var(--text-muted-on-light); font-style: italic; }

/* Errors */
.imp-errors { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.imp-err-critical { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: #FDECEA; color: #B5564A; font-size: 13px; }
.imp-err-critical svg { width: 16px; height: 16px; flex-shrink: 0; }
.imp-err-list { max-height: 140px; overflow-y: auto; }
.imp-err-row { display: flex; gap: 10px; padding: 6px 14px; font-size: 12px; border-top: 1px solid var(--border); }
.imp-err-row--crit { background: #FFF5F4; }
.imp-err-loc { flex-shrink: 0; font-weight: 600; color: var(--text-muted-on-light); min-width: 100px; }
.imp-err-more { padding: 6px 14px; font-size: 12px; color: var(--text-muted-on-light); text-align: center; border-top: 1px solid var(--border); }

/* Done */
.imp-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0; text-align: center; }
.imp-done-icon { width: 56px; height: 56px; border-radius: 50%; background: #DCEBE0;
  display: flex; align-items: center; justify-content: center; color: #2E7D5B; }
.imp-done-icon svg { width: 28px; height: 28px; }
.imp-done h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text-on-light); }
.imp-done-detail { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted-on-light); }
.imp-done-detail div { display: flex; align-items: center; gap: 8px; }
.imp-done-detail svg { width: 16px; height: 16px; color: var(--sap-stone); }

/* ============================================================
   TASK COMMENTS
   ============================================================ */
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-head label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted-on-light); text-transform: uppercase; letter-spacing: .04em; }
.comment-head .ic { width: 14px; height: 14px; }
.comment-n { font-size: 11px; font-weight: 700; color: var(--text-muted-on-light);
  background: var(--sap-sand); border-radius: 999px; padding: 2px 8px; }
.comments { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-on-light); }
.comment:last-child { border-bottom: none; }
.comment .av { flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment-meta b { font-size: 13px; font-weight: 600; color: var(--text-on-light); }
.comment-meta span { font-size: 12px; color: var(--text-muted-on-light); }
.comment-del { background: none; border: none; cursor: pointer; padding: 0; margin-left: auto;
  color: var(--text-muted-on-light); opacity: 0; transition: opacity .15s; }
.comment:hover .comment-del { opacity: 1; }
.comment-del:hover { color: var(--accent); }
.comment-del .ic { width: 12px; height: 12px; }
.comment-body p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; margin: 0;
  color: var(--sap-ink); letter-spacing: -.005em; white-space: pre-wrap; word-break: break-word; }
.comment-add { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.comment-add .ta { width: 100%; min-height: 56px; resize: vertical; }
.comment-bar { display: flex; align-items: center; gap: 12px; }
.comment-bar .sub-hint { font-size: 11px; color: var(--text-muted-on-light); }

/* Comment count badge (list/board views) */
.comment-count { display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
  font-weight: 600; color: var(--text-muted-on-light); margin-right: 4px; }
.comment-count .ic { width: 13px; height: 13px; }

/* ============================================================
   DAYS OFF
   ============================================================ */
.do-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.do-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  background: var(--sap-sand); border-radius: 999px; padding: 5px 12px; }
.do-lbl { color: var(--text-muted-on-light); font-weight: 400; }
.do-x { background: none; border: none; cursor: pointer; padding: 0; color: var(--text-muted-on-light); }
.do-x:hover { color: var(--accent); }
.do-x .ic { width: 12px; height: 12px; }
.do-count { font-size: 11px; color: var(--text-muted-on-light); font-weight: 400; }
.do-add { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.do-dates { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.do-date-lbl { font-size: 11px; color: var(--text-muted-on-light); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.do-arrow { color: var(--text-muted-on-light); font-size: 16px; margin: 0 2px; }
.do-actions { display: flex; gap: 8px; align-items: center; }

/* Calendar day-off indicators */
.cal-off { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; }
.cal-off .av { width: 16px; height: 16px; font-size: 7px; opacity: .55; border: 1.5px solid #fff; margin-left: -4px; }
.cal-off .av:first-child { margin-left: 0; }
.off-more { font-size: 9px; color: var(--text-muted-on-light); font-weight: 700; margin-left: 2px; }

/* ============================================================
   SEARCH MODAL
   ============================================================ */
.search-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); }
.search-box { width: min(560px, 90vw); background: var(--sap-cream); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.25);
  overflow: hidden; animation: fadeUp .15s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.search-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
.search-input-wrap .ic { width: 20px; height: 20px; color: var(--text-muted-on-light); flex-shrink: 0; }
.search-inp { flex: 1; border: none; background: none; font: inherit; font-size: 16px; outline: none; color: var(--sap-ink); }
.search-inp::placeholder { color: #a8a29e; }
.search-esc { font-size: 11px; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.1); border-radius: 4px;
  padding: 2px 6px; color: var(--text-muted-on-light); font-family: inherit; }
.search-results { max-height: 360px; overflow-y: auto; padding: 6px; }
.search-hint { padding: 18px; text-align: center; color: var(--text-muted-on-light); font-size: 14px; }
.sr-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none;
  background: none; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: var(--sap-ink); }
.sr-item:hover, .sr-item.active { background: rgba(0,0,0,.05); }
.sr-item .ic { width: 18px; height: 18px; color: var(--text-muted-on-light); flex-shrink: 0; }
.sr-text { flex: 1; min-width: 0; }
.sr-text b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text span { font-size: 12px; color: var(--text-muted-on-light); display: flex; align-items: center; gap: 5px; }
.sr-text .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sr-type { font-size: 11px; color: var(--text-muted-on-light); background: rgba(0,0,0,.05); border-radius: 4px; padding: 2px 8px; white-space: nowrap; }

/* ============================================================
   NAV SEARCH BUTTON
   ============================================================ */
.nav-search { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; margin: 4px 0 8px;
  border: 1px solid rgba(255,252,245,.12); border-radius: 8px; background: rgba(255,252,245,.06); cursor: pointer;
  color: var(--text-muted-on-dark); font: inherit; font-size: 13px; transition: border-color .15s, background .15s; }
.nav-search:hover { background: rgba(255,252,245,.12); border-color: rgba(255,252,245,.22); color: var(--sap-cream); }
.nav-search .ic { width: 15px; height: 15px; }
.nav-search span { flex: 1; text-align: left; }
.nav-search kbd { font-size: 10px; background: rgba(255,252,245,.08); border: 1px solid rgba(255,252,245,.12);
  border-radius: 3px; padding: 1px 5px; font-family: inherit; color: var(--text-muted-on-dark); }

/* ============================================================
   TAGS / ETIQUETAS
   ============================================================ */
.ttag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tag) 14%, transparent);
  color: var(--tag); white-space: nowrap; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 999px; border: 1.5px solid rgba(0,0,0,.1); background: none;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; color: var(--sap-ink); }
.tag-opt:hover { border-color: var(--tag); }
.tag-opt.on { background: color-mix(in srgb, var(--tag) 14%, transparent); border-color: var(--tag); color: var(--tag); font-weight: 600; }
.tag-opt .ic { width: 12px; height: 12px; }

/* ============================================================
   BIBLIOTECA (repositorio de conocimiento)
   ============================================================ */
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 22px; }
.lib-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; max-width: 480px;
  padding: 10px 14px; border-radius: 12px; background: var(--sap-paper);
  box-shadow: inset 0 0 0 1px var(--border-on-light); }
.lib-search .ic { width: 16px; height: 16px; color: var(--text-muted-on-light); flex-shrink: 0; }
.lib-q { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 14px; color: var(--sap-ink); }
.lib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-filter { border: 1px solid var(--border-on-light); background: none; border-radius: 999px;
  padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.lib-filter:hover { border-color: var(--sap-ink); color: var(--sap-ink); }
.lib-filter.on { background: var(--sap-ink); border-color: var(--sap-ink); color: var(--sap-cream); }

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.lib-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px;
  border-radius: 14px; background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light);
  cursor: pointer; transition: box-shadow .15s, transform .15s; }
.lib-card:hover { box-shadow: inset 0 0 0 1.5px var(--sap-ink); transform: translateY(-1px); }
.lib-card__top { display: flex; align-items: center; justify-content: space-between; }
.lib-kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--lk); background: color-mix(in srgb, var(--lk) 12%, transparent); }
.lib-kind .ic { width: 13px; height: 13px; }
.lib-link-ic .ic { width: 15px; height: 15px; color: var(--text-muted-on-light); }
.lib-card__title { margin: 0; font-family: var(--font-display, inherit); font-size: 17px; font-weight: 700;
  line-height: 1.25; color: var(--sap-ink); }
.lib-card__meta { margin: 0; font-size: 12.5px; color: var(--text-muted-on-light); }
.lib-card__snippet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted-on-light);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.lib-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--sap-sand); color: var(--text-muted-on-light); }
.lib-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; }
.lib-empty .btn { margin-top: 10px; }

/* detalle */
.lib-d-title { margin: 2px 0 4px; font-size: 22px; line-height: 1.25; }
.lib-d-meta { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted-on-light); }
.lib-d-open { margin: 12px 0 4px; }
.lib-d-text { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--sap-ink);
  background: var(--sap-sand); border-radius: 10px; padding: 12px 14px; max-height: 300px; overflow-y: auto; }
.lib-d-by { margin: 14px 0 0; font-size: 12px; color: var(--text-muted-on-light); font-style: italic; }

/* form */
.lib-f-row { display: flex; gap: 12px; }
.lib-f-row .form-block { min-width: 0; }
.form-block { margin: 0 0 14px; }
.form-block > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); margin-bottom: 6px; }
.lib-f-area { resize: vertical; min-height: 70px; }
.lib-f-file input[type="file"] { font-size: 13px; color: var(--text-muted-on-light); }
.lib-f-current { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted-on-light); }
.lib-f-current .ic { width: 14px; height: 14px; }

/* ============================================================
   BIBLIOTECA · Fase 1 — ejes, clasificación IA, fuentes
   ============================================================ */
/* barra de ejes temáticos */
.lib-axbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 4px; }
.lib-axchip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid transparent;
  background: color-mix(in srgb, var(--ax) 9%, transparent); color: var(--ax);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.lib-axchip .axdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ax); }
.lib-axchip:hover { border-color: var(--ax); }
.lib-axchip.on { background: var(--ax); color: #FFFCF5; }
.lib-axchip.on .axdot { background: #FFFCF5; }
.lib-ax-manage { background: none; border: 1.5px dashed var(--border-on-light); color: var(--text-muted-on-light); padding: 7px 10px; }
.lib-ax-manage .ic { width: 14px; height: 14px; }

/* chips de eje en cards y detalle */
.lib-axes { display: flex; flex-wrap: wrap; gap: 5px; }
.lib-axes.sm { margin: -2px 0 0; }
.lib-axis { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px;
  color: var(--ax); background: color-mix(in srgb, var(--ax) 11%, transparent); }

/* card foot + borrador */
.lib-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.lib-card__top-r { display: inline-flex; align-items: center; gap: 8px; }
.lib-draft { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: #FEF3C7; color: #92400E; }
.lib-src-n { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  color: var(--text-muted-on-light); flex-shrink: 0; }
.lib-src-n .ic { width: 12px; height: 12px; }

/* zona de clasificación IA en el form */
.lib-ai-zone { border: 1.5px dashed color-mix(in srgb, var(--sap-green, #055049) 45%, transparent);
  background: color-mix(in srgb, var(--sap-green, #055049) 5%, transparent);
  border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.lib-ai-head { display: flex; gap: 12px; align-items: flex-start; }
.lib-ai-head > .ic { width: 22px; height: 22px; color: var(--sap-green, #055049); flex-shrink: 0; margin-top: 2px; }
.lib-ai-head b { font-size: 14.5px; }
.lib-ai-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted-on-light); line-height: 1.45; }
.lib-ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.lib-ai-row input[type="file"] { font-size: 13px; color: var(--text-muted-on-light); flex: 1; min-width: 200px; }
.lib-ai-status { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted-on-light); min-height: 0; }
.lib-ai-status.ok { color: #1E7D46; font-weight: 600; }
.lib-ai-status.err { color: #C0392B; font-weight: 600; }
.lib-ai-status:empty { margin: 0; }

/* selector de fuentes */
.lib-src-hint { margin: 0 0 8px; font-size: 12px; color: var(--text-muted-on-light); }
.lib-src-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 210px; overflow-y: auto; }
.lib-src-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--border-on-light); background: none; border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s; }
.lib-src-row:hover { border-color: var(--sap-ink); }
.lib-src-row.on { border-color: var(--sap-green, #055049); background: color-mix(in srgb, var(--sap-green, #055049) 6%, transparent); }
.lib-src-chk { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-on-light);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lib-src-row.on .lib-src-chk { background: var(--sap-green, #055049); border-color: var(--sap-green, #055049); color: #FFFCF5; }
.lib-src-chk .ic { width: 11px; height: 11px; }
.lib-src-row .lib-kind { flex-shrink: 0; }
.lib-src-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lib-src-empty { margin: 4px 0; font-size: 12.5px; color: var(--text-muted-on-light); font-style: italic; }

/* mini-filas de fuentes / usado-por en detalle */
.lib-minis { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.lib-mini { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--border-on-light); background: var(--sap-paper); border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .12s; }
.lib-mini:hover { border-color: var(--sap-ink); }
.lib-mini__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lib-mini > .ic { width: 14px; height: 14px; color: var(--text-muted-on-light); flex-shrink: 0; }

/* citas extraídas */
.lib-refs { margin-top: 6px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.lib-ref { font-size: 12.5px; line-height: 1.5; padding: 6px 10px; border-radius: 8px; background: var(--sap-sand); }
.lib-ref a { color: inherit; text-decoration: none; }
.lib-ref a:hover { text-decoration: underline; }
.lib-ref .ic { width: 11px; height: 11px; vertical-align: -1px; }
.lib-ref-a { color: var(--text-muted-on-light); }

/* gestor de ejes */
.axm-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.axm-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.axm-row .axdot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.axm-label { flex: 1; font-weight: 600; font-size: 13.5px; }
.axm-n { font-size: 11.5px; color: var(--text-muted-on-light); }
.axm-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px;
  border-radius: 12px; background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.axm-new .inp { flex: 1; min-width: 160px; }

/* biblioteca en construcción */
.wip-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(254,189,56,.18); color: #FEBD38; flex-shrink: 0; }
.lib-wip-banner { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 11px 15px;
  border-radius: 11px; background: #FEF3C7; color: #92400E; font-size: 13px; }
.lib-wip-banner .ic { width: 16px; height: 16px; flex-shrink: 0; }
.lib-wip-banner b { font-weight: 700; }

/* ============================================================
   BATCH JUNIO — calendario multi, tarea desde calendario, adjuntos
   ============================================================ */
/* chips de calendarios (multi-select) */
.cal-spaces { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 2px; }
.cal-sp-chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid transparent;
  background: color-mix(in srgb, var(--csp) 9%, transparent); color: var(--csp);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cal-sp-chip .csp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--csp); }
.cal-sp-chip:hover { border-color: var(--csp); }
.cal-sp-chip.on { background: var(--csp); color: #FFFCF5; }
.cal-sp-chip.on .csp-dot { background: #FFFCF5; }

/* botón nueva tarea en vista día */
.cal-day-add { margin-top: 12px; }

/* picker de responsables en modal de tarea */
.ct-people { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-person { border: 2px solid transparent; background: none; border-radius: 50%; padding: 2px;
  cursor: pointer; transition: border-color .12s, opacity .12s; opacity: .55; }
.ct-person:hover { opacity: .85; }
.ct-person.on { border-color: var(--sap-green, #055049); opacity: 1; }

/* subir archivo como adjunto */
.att-form__file { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.att-file-or { font-size: 12px; color: var(--text-muted-on-light); font-style: italic; }
.att-file-status { font-size: 12px; color: var(--text-muted-on-light); }
.att-s--file { color: #6b7280; }
.att-link-file { color: #6b7280; }
.att-form__file > input[type="file"] { display: none; }

/* compartir proyecto por link */
.share-row { display: flex; gap: 8px; }
.share-row .inp { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted-on-light); }
.share-hint { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted-on-light); }
.share-hint .ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* edición de usuario (Gestión) — identidad + permisos */
.ued-head { align-items: center; gap: 14px; }
.ued-id { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ued-photo-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; }
.ued-photo-row input[type="file"] { display: none; }
.ued-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-muted-on-light); }
.ro-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted-on-light); padding: 8px 14px; border-radius: 999px;
  background: var(--sap-sand); }
.ro-tag .ic { width: 14px; height: 14px; }

/* ============================================================
   GANTT
   ============================================================ */
.gantt-view { display: flex; flex-direction: column; min-height: 0; }
/* el Gantt usa todo el ancho y más alto (no encajonado) */
.gantt-view { max-width: none; padding: 18px 24px 18px; }
.gantt-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.gantt-head h1 { font-size: 24px; margin: 0; }
.gantt-hint { font-size: 12px; color: var(--text-muted-on-light); }
.gantt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.gantt-toolbar .viewtoggle { margin: 0; }
/* zoom stepper (macro ↔ micro) */
.gantt-zoomctl { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-on-light);
  border-radius: 999px; padding: 2px; background: var(--sap-cream); }
.gz-btn { width: 26px; height: 26px; border: none; background: transparent; border-radius: 50%;
  font-size: 17px; font-weight: 700; line-height: 1; color: var(--sap-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.gz-btn:hover { background: var(--sap-paper); }
.gz-btn:disabled { opacity: .3; cursor: default; }
.gz-lbl { font-size: 12.5px; font-weight: 600; min-width: 64px; text-align: center; color: var(--sap-ink); }
.gantt-q button { min-width: 34px; }
.gantt-msel { position: relative; }
.gantt-msel .msel-btn { min-width: 170px; }
.g-chk { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-on-light);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.g-chk.on { background: var(--sap-ink); border-color: var(--sap-ink); }
.g-chk .ic { width: 12px; height: 12px; }

.gantt-scroll { position: relative; overflow: auto; border: 1px solid var(--border-on-light);
  border-radius: var(--radius-md); background: var(--sap-cream); max-height: calc(100vh - 158px); }
.gantt-inner { position: relative; }

/* —— cabecera (meses + días) —— */
.gantt-headrow { display: flex; position: sticky; top: 0; z-index: 6; }
.gantt-corner { position: sticky; left: 0; z-index: 7; flex: 0 0 var(--glw, 216px); width: var(--glw, 216px); overflow: hidden;
  display: flex; align-items: flex-end; padding: 0 12px 7px; height: 56px; box-sizing: border-box;
  background: var(--sap-paper); border-right: 1px solid var(--border-on-light); border-bottom: 1px solid var(--border-on-light);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-on-light); }
.gantt-time { flex: 0 0 auto; background: var(--sap-paper); border-bottom: 1px solid var(--border-on-light); }
.g-months { display: flex; height: 24px; }
.g-month { flex: 0 0 auto; box-sizing: border-box; border-right: 1px solid var(--border-on-light);
  font-size: 11px; font-weight: 700; color: var(--sap-ink); display: flex; align-items: center; gap: 4px;
  padding-left: 8px; text-transform: capitalize; letter-spacing: .02em; overflow: hidden; white-space: nowrap; }
.g-month.g-month-q { border-left: 2px solid color-mix(in oklab, var(--sap-ink) 35%, transparent); }
.g-qtag { font-size: 9px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #C0563F;
  border-radius: 3px; padding: 1px 4px; text-transform: none; flex-shrink: 0; }
.g-day.g-qstart { border-left: 2px solid color-mix(in oklab, var(--sap-ink) 28%, transparent); }
.g-days { display: flex; height: 32px; }
.g-day { flex: 0 0 auto; box-sizing: border-box; border-right: 1px solid color-mix(in oklab, var(--border-on-light) 55%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font-size: 9px; line-height: 1.1; color: var(--text-muted-on-light); }
.g-day b { font-size: 11.5px; font-weight: 600; color: var(--sap-ink); }
.g-day.g-wknd { background: color-mix(in oklab, var(--sap-sand) 55%, transparent); }
.g-day.g-today-col { background: color-mix(in oklab, var(--sap-gold, #B6852A) 18%, transparent); }
.g-day.g-today-col b { color: var(--sap-ink); }

/* —— filas —— */
.gantt-row, .gantt-grp-head, .gantt-proj-head { display: flex; align-items: stretch; }
.gantt-rowlabel { position: sticky; left: 0; z-index: 4; flex: 0 0 var(--glw, 216px); width: var(--glw, 216px); box-sizing: border-box;
  display: flex; align-items: center; gap: 7px; padding: 0 10px; background: var(--sap-cream); overflow: hidden;
  border-right: 1px solid var(--border-on-light); border-bottom: 1px solid color-mix(in oklab, var(--border-on-light) 60%, transparent); }
/* árbol colapsado: sin borde derecho ni padding que asome */
.gantt-inner.is-treecol .gantt-rowlabel, .gantt-inner.is-treecol .gantt-corner { border-right: none; padding: 0; }
.gantt-track { flex: 0 0 auto; position: relative; border-bottom: 1px solid color-mix(in oklab, var(--border-on-light) 45%, transparent); }
.gantt-row { height: 38px; }
.gantt-row .gantt-track { height: 38px; }
.gantt-grp-head { height: 36px; cursor: pointer; }
.gantt-grp-head .gantt-rowlabel { background: var(--sap-paper); font-weight: 700; font-size: 13.5px; color: var(--sap-ink); }
.gantt-grp-head .gantt-track { background: var(--sap-paper); height: 36px; }
.gantt-grp-space .gantt-rowlabel { font-size: 14px; }
.gantt-proj-head { height: 40px; cursor: pointer; }
.gantt-proj-head .gantt-rowlabel { background: color-mix(in oklab, var(--sap-paper) 55%, var(--sap-cream)); padding-left: 26px; }
.gantt-proj-head .gantt-track { height: 40px; }
.gantt-task-label { cursor: pointer; }
.gantt-task-label:hover { background: var(--sap-paper); }
.g-gname, .g-pname, .g-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-pname { font-weight: 600; font-size: 13px; color: var(--sap-ink); }
.g-tname { font-size: 13px; color: var(--text-on-light); }
.g-chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted-on-light); transition: transform .12s ease; transform: rotate(-90deg); }
.g-chev.g-open { transform: none; }
.g-sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.g-spdot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.g-cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted-on-light);
  background: var(--sap-sand); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.g-warn { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #B5564A;
  flex-shrink: 0; margin-left: 6px; }
.g-warn .ic { width: 13px; height: 13px; }

/* —— barras —— */
.gantt-bar { position: absolute; top: 5px; height: 28px; box-sizing: border-box; border-radius: 9px;
  background: var(--sol); color: #fff; border: none;
  display: flex; align-items: center; gap: 5px; padding: 0 9px;
  cursor: grab; touch-action: none; user-select: none; overflow: hidden; z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,.1); transition: box-shadow .12s ease, transform .12s ease; }
.gantt-bar:hover { box-shadow: 0 4px 12px rgba(0,0,0,.18); transform: translateY(-1px); z-index: 4; }
.gantt-bar.is-dragging { cursor: grabbing; box-shadow: 0 8px 20px rgba(0,0,0,.24); z-index: 6; transition: none; opacity: .97; }
.gantt-bar.gantt-bar--ro { cursor: pointer; }
/* nombre + avatares a la derecha de la barra (estilo referencia) */
.gbar-side { position: absolute; top: 5px; height: 28px; display: inline-flex; align-items: center; gap: 8px;
  z-index: 3; pointer-events: none; white-space: nowrap; }
.gbar-name { font-size: 11.5px; font-weight: 400; color: var(--text-on-light); pointer-events: auto; cursor: pointer; }
.gbar-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.gbar-avs { display: inline-flex; align-items: center; }
.gbar-avs .av, .gbar-avs img, .gbar-avs .avatar { width: 24px !important; height: 24px !important; margin-left: -7px;
  border: 2px solid var(--sap-cream); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.gbar-avs .av:first-child, .gbar-avs img:first-child { margin-left: 0; }
.gbar-h { position: absolute; top: 0; width: 10px; height: 100%; cursor: ew-resize; z-index: 4; }
.gbar-hl { left: -2px; } .gbar-hr { right: -2px; }
.gbar-h::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 3px; height: 13px; border-radius: 2px; background: rgba(255,255,255,.8); opacity: 0; transition: opacity .1s ease; }
.gantt-bar:hover .gbar-h::after { opacity: 1; }
/* nombre del proyecto encima del bracket (estilo referencia) */
.gantt-projname { position: absolute; top: 3px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--sap-ink); white-space: nowrap; cursor: pointer; z-index: 3; }
.gantt-projname .ic { width: 15px; height: 15px; color: var(--acc); flex-shrink: 0; }
.gantt-projname:hover { text-decoration: underline; text-underline-offset: 2px; }
/* resumen de proyecto = bracket fino con topes (estilo referencia) */
.gantt-projbar { position: absolute; top: 25px; height: 8px; border-top: 2px solid color-mix(in oklab, var(--acc) 75%, transparent);
  border-left: 2px solid color-mix(in oklab, var(--acc) 75%, transparent); border-right: 2px solid color-mix(in oklab, var(--acc) 75%, transparent);
  border-radius: 2px 2px 0 0; background: transparent; }
/* bandas de fin de semana / feriados a lo alto del Gantt */
.gantt-shade { position: absolute; top: 56px; bottom: 0; z-index: 0; pointer-events: none;
  background: color-mix(in oklab, var(--sap-sand) 32%, transparent); }
.gantt-shade.is-hol { background: color-mix(in oklab, #C0563F 9%, transparent); }
.gantt-row, .gantt-grp-head, .gantt-proj-head, .gantt-cap-row { position: relative; }

/* —— filtros extra + feriados + carga por persona —— */
.gantt-tb-sp { flex: 1 1 auto; }
.g-day.g-hol { background: color-mix(in oklab, #B5564A 15%, transparent); }
.g-day.g-hol.g-wknd { background: color-mix(in oklab, #B5564A 18%, transparent); }
.g-util { font-size: 11px; font-weight: 700; color: #2E7D5B; flex-shrink: 0; margin-left: 6px;
  background: color-mix(in oklab, #2E7D5B 13%, transparent); border-radius: 999px; padding: 1px 7px; }
.g-util.is-mid { color: #A66E07; background: color-mix(in oklab, #E0991B 16%, transparent); }
.g-util.is-high { color: #B5564A; background: color-mix(in oklab, #B5564A 15%, transparent); }
.gantt-cap-row { height: 22px; }
.gantt-cap-row .gantt-rowlabel { background: var(--sap-cream); border-bottom: 1px solid color-mix(in oklab, var(--border-on-light) 60%, transparent); }
.gantt-cap-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted-on-light); padding-left: 30px !important; }
.gantt-cap-track { height: 22px; display: flex; align-items: stretch; }
.g-cap { flex: 0 0 auto; box-sizing: border-box; border-right: 1px solid color-mix(in oklab, var(--border-on-light) 35%, transparent); }
.g-cap-off { background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--sap-sand) 70%, transparent) 0 3px, transparent 3px 7px); }
.g-cap-1 { background: color-mix(in oklab, #2E7D5B 30%, transparent); }
.g-cap-2 { background: color-mix(in oklab, #E0991B 42%, transparent); }
.g-cap-3 { background: color-mix(in oklab, #B5564A 52%, transparent); }
.g-util.is-none { color: var(--text-muted-on-light); background: var(--sap-sand); font-weight: 600; }
.g-est { margin-left: auto; padding-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--text-muted-on-light); flex-shrink: 0; }
.gantt-task-label .g-tname { flex: 0 1 auto; }
/* —— campo de estimación en el panel de tarea —— */
.field-est .est-row { display: flex; align-items: center; gap: 8px; }
.est-inp { width: 92px; }
.est-unit { font-size: 13px; color: var(--text-muted-on-light); }

.gantt-todayline { position: absolute; top: 56px; bottom: 0; width: 2px; z-index: 1;
  background: #C0563F; pointer-events: none; }
.gantt-empty { padding: 40px 24px; text-align: center; color: var(--text-muted-on-light);
  font-family: var(--font-serif); font-style: italic; }

/* —— bandeja sin fecha —— */
.gantt-tray { margin-top: 14px; border: 1px dashed var(--border-on-light); border-radius: var(--radius-md);
  padding: 12px 14px; background: color-mix(in oklab, var(--sap-sand) 30%, transparent); }
.gantt-tray-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--sap-ink); margin-bottom: 10px; }
.gantt-tray-head .ic { width: 16px; height: 16px; }
.gantt-tray-hint { font-weight: 400; font-size: 12px; color: var(--text-muted-on-light); margin-left: auto; }
.gantt-tray-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gantt-tray-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--border-on-light); background: var(--sap-cream); font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600; color: var(--text-on-light); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.gantt-tray-item:hover { border-color: var(--sap-ink); background: var(--sap-paper); }
.gantt-tray-proj { font-weight: 400; font-size: 11.5px; color: var(--text-muted-on-light); }

/* ============================================================
   Ayni · Flujograma de la ficha de costo del producto
   ============================================================ */
.flow-scroll { overflow-x: auto; padding: 6px 2px 12px; margin: 12px -4px 0; -webkit-overflow-scrolling: touch; }
.flow { display: flex; align-items: stretch; gap: 6px; min-width: min-content; }
.flow-node { flex: 0 0 auto; width: 196px; background: var(--sap-cream); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-on-light); padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.flow-node--mp { width: 132px; justify-content: center; align-items: center; text-align: center; background: var(--sap-sand); }
.flow-node--mp .fn-ic .ic { width: 28px; height: 28px; color: var(--accent); }
.fn-mp-t { font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); }
.fn-mp-kg { font-size: 18px; }
.flow-node--empty { box-shadow: inset 0 0 0 1.5px var(--accent); }
.fn-head { display: flex; align-items: center; gap: 6px; }
.fn-num { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.fn-center { flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 6px; }
.fn-kg { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; color: var(--text-muted-on-light); }
.fn-kg b { color: var(--sap-ink); }
.fn-kg .fn-down { width: 14px; height: 14px; }
.fn-merma { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted-on-light); }
.fn-merma input { width: 62px; padding: 4px 6px; text-align: right; }
.fn-params { display: flex; flex-direction: column; gap: 5px; }
.fn-param { display: flex; align-items: center; gap: 4px; }
.fn-pic { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.fn-pic .ic { width: 14px; height: 14px; }
.fn-pk { width: 46%; padding: 4px 6px; font-size: 11.5px; }
.fn-pv { flex: 1; min-width: 0; padding: 4px 6px; font-size: 11.5px; }
.fn-paramadd { border: 1px dashed var(--border-on-light); background: none; border-radius: 8px; padding: 4px 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; align-self: flex-start; }
.fn-paramadd .ic { width: 12px; height: 12px; }
.fn-paramadd:hover { background: var(--sap-paper); color: var(--sap-ink); }
.fn-cost { margin-top: auto; display: flex; align-items: center; gap: 5px; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--border-on-light); }
.fn-cost .ic { width: 14px; height: 14px; color: var(--text-muted-on-light); }
.flow-arrow { flex: 0 0 auto; display: flex; align-items: center; color: var(--text-muted-on-light); }
.flow-arrow .ic { width: 20px; height: 20px; }
.flow-add { flex: 0 0 auto; align-self: stretch; width: 100px; border: 2px dashed var(--border-on-light); background: none;
  border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-muted-on-light); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .14s ease, color .14s ease; }
.flow-add .ic { width: 22px; height: 22px; }
.flow-add:hover { border-color: var(--accent); color: var(--accent); background: var(--sap-cream); }
.fn-conv { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.fn-conv .ic { width: 15px; height: 15px; color: var(--text-muted-on-light); }
.rnc-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 12px;
  background: var(--sap-paper); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-on-light); }

/* Ayni · categorías de producto */
.cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; background: color-mix(in oklab, var(--cc, #8A6FC4) 14%, var(--sap-cream)); color: var(--cc, #8A6FC4);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cc, #8A6FC4) 35%, transparent); }
.cat-emo { font-size: 13px; line-height: 1; }
.cat-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cat-chip-big { font-size: 13px; padding: 5px 6px 5px 11px; gap: 6px; }
.cat-x { border: none; background: none; color: inherit; opacity: .55; display: inline-flex; cursor: pointer; padding: 0; }
.cat-x .ic { width: 13px; height: 13px; }
.cat-x:hover { opacity: 1; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.emoji-pick { border: 1px solid var(--border-on-light); background: var(--sap-cream); border-radius: 8px; width: 32px; height: 32px;
  font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.emoji-pick:hover { background: var(--sap-paper); border-color: var(--sap-ink); }

/* ============================================================
   BARRA DE PESTAÑAS DE BOLSILLO (solo móvil / app instalada)
   Inicio · Tareas · Hábitat · Crear. Oculta en escritorio.
   ============================================================ */
.tabbar { display: none; }
.tab-sheet, .tab-sheet-scrim { display: none; }

@media (max-width: 820px) {
  body.logged .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--sap-cream); border-top: 1px solid var(--border-on-light);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 22px rgba(16, 9, 6, .09);
  }
  body.logged .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: 0; cursor: pointer; padding: 6px 2px; border-radius: 12px;
    color: var(--sap-ink); opacity: .55; font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    transition: opacity .14s ease, transform .12s ease;
  }
  body.logged .tabbar .tab.on { opacity: 1; }
  body.logged .tabbar .tab__ic { display: grid; place-items: center; width: 46px; height: 30px; border-radius: 10px; transition: background .14s ease; }
  body.logged .tabbar .tab.on .tab__ic { background: rgba(26, 20, 17, .08); }
  body.logged .tabbar .tab__ic .ic { width: 21px; height: 21px; }
  body.logged .tabbar .tab:active { transform: scale(.93); }

  /* aire bajo el contenido para que la barra no lo tape */
  body.logged .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* sheet "Crear" (sube desde la barra) */
  body.logged .tab-sheet-scrim.show { display: block; position: fixed; inset: 0; z-index: 71; background: rgba(16, 9, 6, .34); }
  body.logged .tab-sheet.show {
    display: flex; flex-direction: column; gap: 8px; position: fixed; z-index: 72;
    left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom));
    background: var(--sap-cream); border-radius: 18px; padding: 12px;
    box-shadow: 0 14px 44px rgba(16, 9, 6, .24); animation: tabSheetIn .16s var(--ease-out); }
  body.logged .tab-sheet__opt {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--sap-paper); border: 1px solid var(--border-on-light); border-radius: 12px;
    padding: 15px 16px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--sap-ink);
    transition: transform .12s ease;
  }
  body.logged .tab-sheet__opt:active { transform: scale(.98); }
  body.logged .tab-sheet__opt .ic { width: 20px; height: 20px; opacity: .7; }
}
@keyframes tabSheetIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ===== TIEMPOS dashboard (.tb-*) — del diseño de Claude Design, sin tokens/reset/fuentes (la app ya los tiene) ===== */
.tb-main{max-width:1280px}
/* ============================================================
   SAPIENS PLANNING · timeboard.css
   Estilos del panel "Mi tiempo" (análisis de tiempo del equipo).
   Construido sobre los tokens de la marca + app.css.
   ============================================================ */

/* ensancha el main para el dashboard */
.tb-main { max-width: 1280px; padding-bottom: 64px; }
/* —— barra de control: período + alcance —— */
.tb-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; padding: 16px 0 14px; position: sticky; top: 0; z-index: 40; background: var(--sap-cream); box-shadow: 0 10px 16px -12px rgba(16,9,6,.22), 0 1px 0 var(--border-on-light); }
.tb-seg { display: inline-flex; background: var(--sap-sand); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.tb-seg button { border: none; background: none; padding: 9px 20px; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text-muted-on-light);
  display: inline-flex; align-items: center; gap: 7px; transition: background .14s ease, color .14s ease; cursor: pointer; }
.tb-seg button.on { background: var(--sap-cream); color: var(--sap-ink); box-shadow: var(--shadow-soft); }
.tb-seg button .ic { width: 15px; height: 15px; }
.tb-spacer { flex: 1; }
.tb-lensrow { display: inline-flex; align-items: center; gap: 8px; }
.tb-period { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tb-nav { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-on-light); background: var(--sap-cream); border-radius: var(--radius-sm); color: var(--sap-ink); cursor: pointer; transition: background .14s ease, transform .12s ease; }
.tb-nav:hover { background: var(--sap-sand); }
.tb-nav:active { transform: scale(.95); }
.tb-nav[disabled] { opacity: .38; pointer-events: none; }
.tb-nav .ic { width: 17px; height: 17px; }
.tb-period__pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--border-on-light); background: var(--sap-cream); border-radius: var(--radius-sm); cursor: pointer; color: var(--sap-ink); font: inherit; transition: border-color .14s ease; }
.tb-period__pill:hover { border-color: var(--sap-stone); }
.tb-period__pill.on { border-color: var(--sap-ink); box-shadow: var(--shadow-soft); }
.tb-period__pill b { font-weight: 600; font-size: 15px; white-space: nowrap; letter-spacing: -.01em; }
.tb-period__pill .ic { width: 16px; height: 16px; flex-shrink: 0; }
.tb-period__pill .ic:last-child { width: 13px; height: 13px; color: var(--text-muted-on-light); margin-left: -3px; }
.tb-today { white-space: nowrap; }
.tb-pick-scrim { position: fixed; inset: 0; z-index: 50; background: transparent; }
.tb-picker { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 320px; max-width: 92vw; background: var(--sap-cream); border: 1px solid var(--border-on-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 14px; transform-origin: top right; animation: ovPop .16s cubic-bezier(.23,1,.32,1) both; }
.tb-pick-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; background: var(--sap-sand); padding: 3px; border-radius: var(--radius-pill); margin-bottom: 14px; }
.tb-pick-tabs button { border: none; background: none; padding: 7px 2px; border-radius: var(--radius-pill); font: inherit; font-size: 12.5px; color: var(--text-muted-on-light); cursor: pointer; transition: background .12s ease; }
.tb-pick-tabs button:hover { color: var(--sap-ink); }
.tb-pick-tabs button.on { background: var(--sap-cream); color: var(--sap-ink); font-weight: 600; box-shadow: var(--shadow-soft); }
.tb-pick-yr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tb-pick-yr b { font-size: 15px; font-weight: 600; }
.tb-pick-grid { display: grid; gap: 6px; }
.tb-pick-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.tb-pick-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.tb-pick-c { border: 1px solid var(--border-on-light); background: var(--sap-cream); border-radius: var(--radius-sm); padding: 10px 4px; font: inherit; font-size: 13px; color: var(--sap-ink); cursor: pointer; text-transform: capitalize; transition: background .12s ease; }
.tb-pick-c.wide { text-transform: none; font-size: 12px; padding: 11px 6px; }
.tb-pick-c:hover { background: var(--sap-sand); }
.tb-pick-c.on { background: var(--sap-ink); color: var(--sap-cream); border-color: var(--sap-ink); font-weight: 600; }
.tb-pick-c[disabled] { opacity: .32; pointer-events: none; }
.tb-pick-hint { margin: 12px 2px 0; font-size: 11.5px; color: var(--text-muted-on-light); font-style: italic; font-family: var(--font-serif); line-height: 1.4; }
@media (max-width: 560px) { .tb-period__pill b { font-size: 13.5px; } .tb-picker { width: 290px; padding: 12px; } .tb-today { display: none; } }
/* “Ver como” — previsualización de permisos por rol */
.tb-asrole { display: inline-flex; align-items: center; gap: 8px; background: var(--st-revision-soft); color: var(--st-revision-ink);
  border-radius: var(--radius-pill); padding: 6px 10px 6px 13px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--st-revision) 35%, transparent); }
.tb-asrole .ic { width: 15px; height: 15px; flex-shrink: 0; }
.tb-asrole__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.tb-asrole select { border: none; background: none; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--st-revision-ink); cursor: pointer; outline: none; padding: 2px 2px 2px 0; }
/* botón compartir resumen */
.tb-copy { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; background: var(--sap-ink); color: var(--sap-cream);
  border-radius: var(--radius-pill); padding: 10px 17px; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  transition: background .15s ease, transform .1s ease; white-space: nowrap; }
.tb-copy:hover { background: #2a2320; }
.tb-copy:active { transform: scale(.98); }
.tb-copy .ic { width: 15px; height: 15px; stroke-width: 1.8; }
/* selector de persona / equipo */
.tb-scope { position: relative; }
.tb-scope__btn { display: inline-flex; align-items: center; gap: 11px; background: var(--sap-cream);
  border-radius: var(--radius-pill); padding: 6px 14px 6px 6px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-on-light); transition: box-shadow .14s ease; }
.tb-scope__btn:hover { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.tb-scope__btn .ic { width: 16px; height: 16px; color: var(--text-muted-on-light); margin-left: 2px; }
.tb-scope__id { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tb-scope__id b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tb-scope__id span { font-size: 11px; color: var(--text-muted-on-light); white-space: nowrap; }
/* (dropdown viejo del selector de alcance ELIMINADO: su clase .tb-menu chocaba con el botón ☰
   de la topbar móvil y lo dejaba display:none — el menú lateral quedaba inaccesible. El selector
   de alcance actual es .tb-seg. NO reintroducir reglas globales .tb-menu aquí.) */
/* —— avatar tile (sprite pixel sobre color de la persona) —— */
.tb-avt { display: inline-grid; place-items: center; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16,9,6,.10); }
.tb-avt img { display: block; image-rendering: auto; }
.tb-avt.pix img { image-rendering: pixelated; }
/* ============================================================
   BANDA HERO
   ============================================================ */
.tb-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.tb-hero.c3 { grid-template-columns: repeat(3, 1fr); }
.tb-hero.c2 { grid-template-columns: repeat(2, 1fr); }
.tb-stat { background: var(--sap-cream); border-radius: var(--radius-md); padding: 20px 22px 18px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; min-height: 150px; }
.tb-stat.feature { background: var(--sap-dark); color: var(--sap-cream); box-shadow: none; }
.tb-stat__k { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: var(--text-muted-on-light); }
.tb-stat.feature .tb-stat__k { color: var(--text-muted-on-dark); }
.tb-stat__n { font-family: var(--font-display); text-transform: uppercase; line-height: .88; margin: 12px 0 0;
  font-size: 64px; letter-spacing: .005em; }
.tb-stat__n .u { font-family: var(--font-ui); font-size: 18px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text-muted-on-light); margin-left: 7px; }
.tb-stat.feature .tb-stat__n .u { color: var(--text-muted-on-dark); }
.tb-stat__sub { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--text-muted-on-light);
  font-family: var(--font-serif); letter-spacing: -.005em; }
.tb-stat.feature .tb-stat__sub { color: var(--text-muted-on-dark); }
.tb-stat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* delta pill */
.tb-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 12px;
  font-weight: 700; border-radius: 999px; padding: 4px 9px 4px 7px; white-space: nowrap; }
.tb-delta .ic { width: 13px; height: 13px; }
.tb-delta.up { background: var(--st-hecho-soft); color: var(--st-hecho-ink); }
.tb-delta.down { background: var(--st-revision-soft); color: var(--st-revision-ink); }
.tb-delta.flat { background: var(--sap-sand); color: var(--text-muted-on-light); }
.tb-stat.feature .tb-delta.up { background: rgba(153,212,192,.2); color: var(--sap-mint); }
.tb-stat.feature .tb-delta.down { background: rgba(245,131,68,.2); color: var(--sap-peach); }
/* ============================================================
   GRID + TARJETAS
   ============================================================ */
.tb-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.tb-grid.c2 { grid-template-columns: 1.55fr 1fr; }
.tb-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.tb-grid.c2b { grid-template-columns: 1fr 1.1fr; }
.tb-card { background: var(--sap-cream); border-radius: var(--radius-md); padding: 22px 24px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); min-width: 0; }
.tb-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tb-card__head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 23px; line-height: 1; margin: 0; }
.tb-card__head .sub { font-size: 12.5px; font-weight: 500; color: var(--text-muted-on-light); font-family: var(--font-serif); font-style: italic; }
.tb-card__note { font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); }
/* —— barras horizontales (proyecto) —— */
.tb-bars { display: flex; flex-direction: column; gap: 14px; }
.tb-bar { display: grid; grid-template-columns: 1fr; gap: 7px; }
.tb-bar__top { display: flex; align-items: center; gap: 10px; }
.tb-bar__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tb-bar__name { font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-bar__cli { font-size: 11.5px; color: var(--text-muted-on-light); font-weight: 500; white-space: nowrap; }
.tb-bar__val { margin-left: auto; font-family: var(--font-ui); font-weight: 700; font-size: 14px; white-space: nowrap; }
.tb-bar__val span { font-weight: 500; color: var(--text-muted-on-light); font-size: 12px; margin-left: 5px; }
.tb-bar__track { height: 10px; border-radius: 999px; background: var(--sap-sand); overflow: hidden; }
.tb-bar__fill { height: 100%; border-radius: 999px; transition: width .6s var(--ease, cubic-bezier(.22,.61,.36,1)); }
/* —— donut (facturable) —— */
.tb-donut-wrap { display: flex; align-items: center; gap: 22px; }
.tb-donut { --p: 70; --c1: var(--st-hecho); --c2: var(--sap-stone); width: 132px; height: 132px; border-radius: 50%;
  flex-shrink: 0; background: conic-gradient(var(--c1) calc(var(--p) * 1%), var(--c2) 0); display: grid; place-items: center; position: relative; }
.tb-donut::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--sap-cream); }
.tb-donut__c { position: relative; z-index: 1; text-align: center; line-height: 1; }
.tb-donut__c b { font-family: var(--font-display); font-size: 34px; display: block; }
.tb-donut__c span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); }
.tb-legend { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tb-leg { display: flex; align-items: center; gap: 10px; }
.tb-leg__dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.tb-leg__id { min-width: 0; }
.tb-leg__id b { display: block; font-size: 14px; font-weight: 700; font-family: var(--font-ui); }
.tb-leg__id span { font-size: 12px; color: var(--text-muted-on-light); }
/* —— split bar (espacio / tipo) —— */
.tb-split { display: flex; height: 16px; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.tb-split > i { display: block; height: 100%; }
.tb-split-legend { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.tb-split-leg { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.tb-split-leg .d { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.tb-split-leg .nm { font-weight: 500; }
.tb-split-leg .vl { margin-left: auto; font-weight: 700; font-family: var(--font-ui); white-space: nowrap; }
.tb-split-leg .vl span { font-weight: 500; color: var(--text-muted-on-light); margin-left: 5px; }
/* ============================================================
   HEATMAP (ritmo de días)
   ============================================================ */
.tb-heat { display: flex; flex-direction: column; gap: 6px; }
.tb-heat__grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 5px; }
.tb-heat__grid.week { grid-template-rows: 1fr; grid-auto-flow: column; gap: 8px; }
.tb-heat__cell { aspect-ratio: 1; border-radius: 5px; background: var(--sap-sand); position: relative; }
.tb-heat__grid.week .tb-heat__cell { aspect-ratio: auto; height: 64px; border-radius: 9px; }
.tb-heat__cell[data-lvl="0"] { background: var(--sap-sand); }
.tb-heat__cell.empty { background: transparent; }
.tb-heat__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--text-muted-on-light); }
.tb-heat__scale { display: inline-flex; align-items: center; gap: 5px; }
.tb-heat__scale i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.tb-heat__wlabels { display: grid; grid-auto-flow: column; gap: 8px; margin-top: 4px; }
.tb-heat__wlabels span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); }
.tb-heat__wcell { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 7px 4px 6px; color: #fff; }
.tb-heat__wcell b { font-family: var(--font-display); font-size: 21px; line-height: 1; }
.tb-heat__wcell.zero { color: var(--text-muted-on-light); }
.tb-heat__wcell.zero b { color: var(--text-muted-on-light); opacity: .6; }
/* —— ritmo enriquecido: calendario compacto + perfil de semana + micro —— */
.tb-heat2 { display: grid; grid-template-columns: 1fr 218px; gap: 28px; align-items: start; }
.tb-cal2 { width: 100%; }
.tb-cal2__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.tb-cal2__wd span { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-muted-on-light); }
.tb-cal2__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.tb-cal2__c { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; position: relative; }
.tb-cal2__c.empty { background: transparent !important; }
.tb-cal2__c .dn { font-size: 11px; font-weight: 600; }
.tb-cal2__c.zero { box-shadow: inset 0 0 0 1px var(--border-on-light); }
.tb-cal { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.tb-cal__wd { display: grid; grid-template-rows: repeat(7, 26px); gap: 5px; }
.tb-cal__wd span { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--text-muted-on-light); }
.tb-heat__grid.month { grid-auto-flow: column; grid-template-rows: repeat(7, 26px); grid-auto-columns: 26px; gap: 5px; }
.tb-heat__grid.month .tb-heat__cell { aspect-ratio: auto; width: 26px; height: 26px; border-radius: 6px; position: relative; }
.tb-heat__cell .dn { position: absolute; right: 3px; bottom: 1px; font-size: 8.5px; font-weight: 700; line-height: 1; }
.tb-profile__head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); margin-bottom: 14px; }
.tb-profile__bars { display: flex; align-items: flex-end; gap: 7px; height: 132px; }
.tb-profile__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.tb-profile__track { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; }
.tb-profile__col i { width: 100%; border-radius: 5px 5px 0 0; background: var(--sap-stone); min-height: 3px; transition: height .6s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.tb-profile__col.on i { background: #055049; }
.tb-profile__val { font-size: 10.5px; font-weight: 700; color: var(--text-muted-on-light); line-height: 1; }
.tb-profile__col.on .tb-profile__val { color: #055049; }
.tb-profile__lbl { font-size: 10.5px; font-weight: 700; color: var(--text-muted-on-light); }
.tb-profile__col.on .tb-profile__lbl { color: var(--sap-ink); }
.tb-profile__take { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.4; color: var(--text-muted-on-light); margin: 16px 0 0; letter-spacing: -.005em; }
.tb-profile__take b { color: var(--sap-ink); font-weight: 600; }
.tb-micro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-on-light); }
.tb-micro__i { display: flex; flex-direction: column; gap: 4px; }
.tb-micro__i .k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); }
.tb-micro__i b { font-family: var(--font-display); text-transform: uppercase; font-size: 25px; line-height: 1; }
.tb-micro__i .v { font-size: 12px; color: var(--text-muted-on-light); font-family: var(--font-serif); }
.tb-micro__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-micro__row b { line-height: 1; }
/* leyenda de intensidad del calendario */
.tb-heat-leg-wrap { margin-top: 12px; }
.tb-heat-leg { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); }
.tb-heat-leg__sc { display: inline-flex; gap: 3px; }
.tb-heat-leg__sc i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(16,9,6,.06); }
/* ============================================================
   TENDENCIA (columnas apiladas por espacio)
   ============================================================ */
.tb-trend { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 8px; }
.tb-trend__col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; position: relative; }
.tb-trend__stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.tb-trend__seg { border-radius: 3px; min-height: 0; transition: height .5s ease; }
.tb-trend__col.today::after { content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.tb-trend-axis { display: flex; justify-content: space-between; margin-top: 16px; font-size: 11px; color: var(--text-muted-on-light); font-weight: 600; }
.tb-trend-axis > span { flex: 1 1 0; min-width: 0; overflow: hidden; }   /* que las etiquetas se compriman en vez de desbordar (mes ≈31, trimestre ≈13) */
/* ============================================================
   CARGA DEL EQUIPO
   ============================================================ */
.tb-team { display: flex; flex-direction: column; gap: 4px; }
.tb-trow { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 18px;
  padding: 12px 10px; border-radius: 14px; transition: background .14s ease; }
.tb-trow:hover { background: var(--sap-paper); cursor: pointer; }
.tb-trow.me { background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.tb-trow__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-trow__id .nm { min-width: 0; line-height: 1.2; }
.tb-trow__id .nm b { font-size: 14px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-trow__id .nm span { font-size: 11.5px; color: var(--text-muted-on-light); }
.tb-trow__bar { height: 22px; border-radius: 7px; background: var(--sap-sand); overflow: hidden; display: flex; }
.tb-trow__bar i { height: 100%; transition: width .6s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.tb-trow__val { text-align: right; white-space: nowrap; min-width: 86px; }
.tb-trow__val b { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.tb-trow__val b .u { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 3px; }
.tb-trow__val .cap { display: block; font-size: 11px; color: var(--text-muted-on-light); font-weight: 600; margin-top: 3px; }
.tb-cap-line { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; color: var(--text-muted-on-light); }
.tb-cap-line .seg { flex: 1; height: 1px; background: var(--border-on-light); }
/* ============================================================
   INSIGHTS NARRATIVOS
   ============================================================ */
.tb-insights { display: flex; flex-direction: column; gap: 12px; }
.tb-ins { display: flex; gap: 13px; padding: 16px 17px; border-radius: var(--radius-md);
  background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.tb-ins__ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.tb-ins__ic .ic { width: 18px; height: 18px; }
.tb-ins__b { min-width: 0; }
.tb-ins__b h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; font-family: var(--font-ui); }
.tb-ins__b p { margin: 0; font-family: var(--font-serif); font-size: 14px; line-height: 1.45; color: var(--text-muted-on-light); letter-spacing: -.005em; }
.tb-ins__b p b { color: var(--sap-ink); font-weight: 600; }
/* ============================================================
   HORAS vs VALOR (clientes)
   ============================================================ */
.tb-rate { display: flex; flex-direction: column; }
.tb-rate__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; align-items: center; gap: 14px;
  padding: 14px 6px; border-bottom: 1px solid var(--border-on-light); }
.tb-rate__row:last-child { border-bottom: none; }
.tb-rate__head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); padding: 0 6px 10px; }
.tb-rate__cli { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tb-rate__cli .nm { font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-rate__cell { font-family: var(--font-ui); font-weight: 600; font-size: 14px; }
.tb-rate__cell.muted { color: var(--text-muted-on-light); font-weight: 500; }
.tb-rate__cell.strong { font-family: var(--font-display); font-size: 24px; }
.tb-rate__cell .u { font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 3px; }
.tb-rate__head.r, .tb-rate__cell.r { text-align: right; justify-self: end; }
.fc-card .tb-card__head { align-items: flex-start; }
@media (max-width: 720px) {
  .tb-hero, .tb-hero.c3, .tb-hero.c2 { grid-template-columns: 1fr; }
  .tb-trow { grid-template-columns: 150px 1fr; }
  .tb-trow__val { grid-column: 2; text-align: left; }
  .tb-rate__row { grid-template-columns: 1.4fr 1fr 1fr; }
  .tb-rate__col-rate { display: none; }
  .tb-micro { grid-template-columns: 1fr; gap: 10px; }
  .tb-heat2 { grid-template-columns: 1fr; gap: 18px; }
  .tb-controls { gap: 8px 10px; }
  .tb-period { width: 100%; justify-content: flex-end; }
  .tb-period__pill { flex: 1; justify-content: center; }
  .eq-people { grid-template-columns: 1fr; }                     /* muro "Por persona": 1 columna (evita minmax(280) que desborda) */
  .eq-agg-leg, .eq-balance-leg { min-width: 0; }                 /* leyendas del muro/balance: sin piso de ancho que desborde */
  .tb-card { padding: 18px 16px; }                               /* recuperar ancho útil en móvil */
}
@media (max-width: 430px) {
  .tb-card__head { flex-wrap: wrap; row-gap: 10px; }             /* título display + toggle no caben en 1 fila */
  .eq-wall-toggle { flex-basis: 100%; }
}
@media (min-width: 721px) and (max-width: 1100px) { .tb-heat2 { grid-template-columns: 1fr 190px; gap: 20px; } }
/* Tablet / iPad portrait (721–1100): el sidebar (268px) sigue visible y angosta el
   contenido, así que las grillas de 2-4 columnas se aprietan → colapsar. El ≤720 de
   arriba (móvil) ya pone el hero en 1 columna. */
@media (min-width: 721px) and (max-width: 1100px) {
  .tb-hero, .tb-hero.c3 { grid-template-columns: repeat(2, 1fr); }
  .tb-grid.c2, .tb-grid.c2b, .tb-grid.c3 { grid-template-columns: 1fr; }
  .fc-top { grid-template-columns: 1fr; }
  .tb-rate__col-rate { display: table-cell; }
}
/* Móvil / tablet sin sidebar (≤820): apilar tarjetas; hero a 2 col (≤720 ya lo hace 1) */
@media (min-width: 561px) and (max-width: 820px) {
  .tb-hero { grid-template-columns: repeat(2, 1fr); }
  .tb-grid.c2, .tb-grid.c2b, .tb-grid.c3 { grid-template-columns: 1fr; }
}

/* ===== HÁBITOS dashboard (.eq-* / .gm-*) — diseño Claude Design, Fase 2 ===== */
/* ============================================================
   EQUILIBRIO — hábitos de vida (lente personal)
   ============================================================ */
.eq-note { display: flex; align-items: center; gap: 10px; background: var(--st-revision-soft); color: var(--st-revision-ink);
  border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
.eq-note .ic { width: 16px; height: 16px; flex-shrink: 0; }
.eq-note b { font-weight: 700; }
.eq-split { height: 20px; margin-bottom: 18px; }
.eq-donut { flex-shrink: 0; display: block; }
.eq-donut__seg { transition: opacity .14s ease; }
.eq-donut__seg:hover { opacity: .78; }
.eq-donut__t { font-family: var(--font-display); fill: var(--sap-ink); }
.eq-donut__b { font-family: var(--font-ui); fill: var(--text-muted-on-light); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eq-donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.eq-balance-leg { display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 210px; }
.eq-leg-h { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); margin-top: 4px; }
.eq-leg-h:first-child { margin-top: 0; }
.eq-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* muro: toggle + agregado + por persona */
.eq-wall-toggle { display: inline-flex; background: var(--sap-sand); border-radius: 999px; padding: 3px; gap: 2px; }
.eq-wall-toggle button { border: none; background: none; padding: 6px 14px; border-radius: 999px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; }
.eq-wall-toggle button.on { background: var(--sap-cream); color: var(--sap-ink); box-shadow: var(--shadow-soft); }
.eq-agg-leg { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 244px; }
.eq-agg-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 4px 11px; padding: 9px 0; border-bottom: 1px solid var(--border-on-light); }
.eq-agg-row:last-child { border-bottom: none; }
.eq-agg-n { font-size: 14px; font-weight: 600; font-family: var(--font-serif); }
.eq-agg-v { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; white-space: nowrap; text-align: right; }
.eq-agg-v span { font-weight: 500; color: var(--text-muted-on-light); margin-left: 4px; }
.eq-agg-top { grid-column: 2 / 4; font-size: 11.5px; color: var(--text-muted-on-light); }
.eq-agg-top b { color: var(--sap-ink); font-weight: 600; }
.eq-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.eq-person { display: flex; flex-direction: column; gap: 14px; }
.eq-person.me { box-shadow: inset 0 0 0 1px var(--sap-ink); }
.eq-person__head { display: flex; align-items: center; gap: 11px; }
.eq-person__head .nm { line-height: 1.2; min-width: 0; }
.eq-person__head .nm b { font-size: 15px; font-weight: 600; display: block; }
.eq-person__head .nm span { font-size: 11.5px; color: var(--text-muted-on-light); }
.eq-person__body { display: flex; align-items: center; gap: 16px; }
.eq-person__list { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.eq-person__row { display: flex; align-items: center; gap: 8px; }
.eq-person__n { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-person__st { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: #E0991B; }
.eq-person__st .ic { width: 13px; height: 13px; }
.eq-person__v { margin-left: auto; font-size: 12.5px; font-weight: 700; font-family: var(--font-ui); white-space: nowrap; }
/* racha explícita en el mini-ritmo */
.eq-mini-wrap { display: flex; flex-direction: column; gap: 8px; }
.eq-mini-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--st-revision-ink); }
.eq-mini-lbl .ic { width: 14px; height: 14px; color: #E0991B; }
.eq-mini-lbl b { font-family: var(--font-display); font-size: 16px; color: var(--sap-ink); }
.eq-mini-lbl.off { color: var(--text-muted-on-light); font-style: italic; font-family: var(--font-serif); }
/* engranaje + panel de privacidad */
.eq-gear { position: relative; }
.eq-gear__btn { width: 32px; height: 32px; border: none; cursor: pointer; border-radius: 9px; background: none; color: var(--sap-ink); display: grid; place-items: center; padding: 0; transition: background .14s ease, transform .35s ease; }
.eq-gear__btn:hover { background: var(--sap-sand); }
.eq-gear__btn:active { transform: rotate(40deg); }
.eq-gear__btn .ic { width: 21px; height: 21px; }
.eq-settings { position: absolute; left: 0; right: auto; top: calc(100% + 8px); z-index: 60; width: 302px; max-width: 86vw;
  background: var(--sap-cream); border-radius: 16px; box-shadow: var(--shadow-float); border: 1px solid var(--border-on-light); padding: 16px; display: none; }
.eq-settings.show { display: block; }
.eq-settings__head { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; line-height: 1; margin-bottom: 8px; }
.eq-settings__note { font-family: var(--font-serif); font-size: 12.5px; color: var(--text-muted-on-light); margin: 0 0 12px; line-height: 1.45; }
/* hint + panel de detalle de hábito */
.eq-hint { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: var(--text-muted-on-light); margin: 16px 0 0; }
.eq-scrim { position: fixed; inset: 0; background: rgba(16,9,6,.42); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.eq-scrim.show { opacity: 1; pointer-events: auto; }
.eq-detail { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 444px; max-width: 100vw; background: var(--sap-cream); z-index: 101;
  box-shadow: -16px 0 50px rgba(16,9,6,.18); display: flex; flex-direction: column; }
/* @keyframes (no transition): el drawer se monta vía innerHTML ya en su estado final, así que
   una transición no dispara; el keyframe sí anima al insertar el nodo (ver memoria). */
.eq-detail.show { animation: eqDrawerIn .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes eqDrawerIn { from { transform: translateX(100%); } to { transform: none; } }
.eq-detail__head { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border-on-light); }
.eq-detail__id { flex: 1; min-width: 0; line-height: 1.2; }
.eq-detail__id b { font-family: var(--font-serif); font-weight: 600; font-size: 19px; display: block; }
.eq-detail__id span { font-size: 12px; color: var(--text-muted-on-light); }
.eq-detail__x { border: none; background: none; cursor: pointer; padding: 8px; border-radius: 9px; color: var(--text-muted-on-light); display: inline-flex; }
.eq-detail__x:hover { background: var(--sap-sand); color: var(--sap-ink); }
.eq-detail__x .ic { width: 18px; height: 18px; }
.eq-detail__body { padding: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.eq-detail__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eq-detail__stat { display: flex; flex-direction: column; gap: 3px; }
.eq-detail__stat b { font-family: var(--font-display); text-transform: uppercase; font-size: 27px; line-height: 1; }
.eq-detail__stat b small { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); }
.eq-detail__stat span { font-size: 11.5px; color: var(--text-muted-on-light); }
.eq-detail__sec { display: flex; align-items: baseline; }
.eq-detail__sec h4 { margin: 0 0 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); }
.eq-detail__seclbl { font-size: 11px; color: var(--text-muted-on-light); font-style: italic; font-family: var(--font-serif); margin-left: 8px; }
.eq-tasklist { display: flex; flex-direction: column; gap: 11px; }
.eq-trow { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.eq-trow__n { font-size: 13.5px; font-weight: 600; font-family: var(--font-serif); letter-spacing: -.01em; }
.eq-trow__v { font-size: 11.5px; color: var(--text-muted-on-light); font-weight: 600; white-space: nowrap; }
.eq-trow .bar { grid-column: 1 / 3; height: 9px; border-radius: 999px; background: var(--sap-sand); overflow: hidden; }
.eq-trow--foco { grid-template-columns: 1fr auto auto; }
.eq-trow--foco .bar { grid-column: 1 / 4; }
.eq-trow__foco { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--sap-sand); }
.eq-trow__foco b { font-family: var(--font-display); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; min-width: 22px; text-align: right; }
.eq-trow__foco--none b { color: var(--text-muted-on-light); font-weight: 600; }
.eq-foco__ball { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), var(--c, #B8B0A4);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.18); }
.eq-trow .bar i { display: block; height: 100%; border-radius: 999px; }
.eq-trow.unassigned .eq-trow__n { color: var(--text-muted-on-light); font-style: italic; font-weight: 500; }
.eq-detail__days { display: flex; flex-direction: column; gap: 7px; }
.eq-detail__day { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; }
.eq-detail__day .dd { font-size: 12px; color: var(--text-muted-on-light); font-weight: 600; text-transform: capitalize; }
.eq-detail__day .bar { height: 10px; border-radius: 999px; background: var(--sap-sand); overflow: hidden; }
.eq-detail__day .bar i { display: block; height: 100%; border-radius: 999px; }
.eq-detail__day .vv { font-size: 12px; font-weight: 700; font-family: var(--font-ui); white-space: nowrap; }
.eq-tasks { display: flex; flex-wrap: wrap; gap: 8px; }
.eq-task { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--c); background: color-mix(in oklab, var(--c) 12%, transparent); border-radius: 999px; padding: 6px 13px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent); }
.eq-bleg { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 10px; cursor: pointer; border-radius: 8px; padding: 5px 7px; margin: 0 -7px; transition: background .12s ease; }
.eq-bleg:hover { background: var(--sap-paper); }
.eq-bleg__d { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.eq-bleg__n { font-size: 13.5px; font-weight: 500; min-width: 0; }
.eq-bleg__v { font-weight: 700; font-family: var(--font-ui); font-size: 13.5px; white-space: nowrap; text-align: right; }
.eq-bleg__v span { font-weight: 500; color: var(--text-muted-on-light); margin-left: 5px; }
.eq-empty { font-family: var(--font-serif); font-style: italic; color: var(--text-muted-on-light); margin: 0; }
.eq-summary .eq-sum-grid { display: flex; flex-direction: column; gap: 16px; }
.eq-sum-i { display: flex; flex-direction: column; gap: 3px; }
.eq-sum-i .k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--text-muted-on-light); }
.eq-sum-i b { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; line-height: 1; }
.eq-sum-i b .u { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 3px; }
.eq-sum-i .v { font-size: 12px; color: var(--text-muted-on-light); font-family: var(--font-serif); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; margin-bottom: 16px; }
.eq-habit { display: flex; flex-direction: column; gap: 14px; }
.eq-habit__head { display: flex; align-items: center; gap: 11px; }
.eq-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.eq-ic .ic { width: 20px; height: 20px; }
.eq-ic.sm { width: 30px; height: 30px; border-radius: 9px; }
.eq-ic.sm .ic { width: 16px; height: 16px; }
.eq-habit__id { min-width: 0; line-height: 1.2; }
.eq-habit__id b { font-family: var(--font-serif); font-weight: 600; font-size: 16px; display: block; }
.eq-habit__id span { font-size: 11.5px; color: var(--text-muted-on-light); }
.eq-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 13px; color: #E0991B; }
.eq-streak .ic { width: 15px; height: 15px; }
.eq-habit__stat { display: flex; align-items: baseline; gap: 9px; }
.eq-habit__stat b { font-family: var(--font-display); text-transform: uppercase; font-size: 32px; line-height: 1; }
.eq-habit__stat .v { font-size: 12.5px; color: var(--text-muted-on-light); font-family: var(--font-serif); }
.eq-goal { display: flex; flex-direction: column; gap: 7px; }
.eq-goal__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); }
.eq-goal__top > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-goal__top b { color: var(--sap-ink); font-family: var(--font-ui); white-space: nowrap; flex-shrink: 0; }
.eq-goal__track { height: 8px; border-radius: 999px; background: var(--sap-sand); overflow: hidden; }
.eq-goal__track i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.eq-goal.editable { position: relative; }
.eq-goal.editable .eq-goal__top { padding-right: 30px; }
.eq-goal__own { font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--sap-clay, #A6764C); margin-left: 4px; }
.eq-goal__edit { position: absolute; top: -3px; right: -4px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-on-light); background: var(--sap-paper); color: var(--text-muted-on-light); border-radius: 8px; cursor: pointer; opacity: .85; transition: opacity .18s ease, background .18s ease, color .18s ease; }
.eq-goal__edit .ic { width: 14px; height: 14px; }
.eq-habit:hover .eq-goal__edit { opacity: 1; }
.eq-goal__edit:hover { opacity: 1; background: var(--sap-sand); color: var(--sap-ink); }
.eq-goal-add { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 8px 13px; font-size: 12px; font-weight: 600;
  border: 1px dashed var(--border-on-light); background: transparent; color: var(--text-muted-on-light); border-radius: var(--radius-md); cursor: pointer; transition: all .18s ease; }
.eq-goal-add .ic { width: 15px; height: 15px; }
.eq-goal-add:hover { border-color: var(--sap-ink); color: var(--sap-ink); background: var(--sap-paper); }
/* editor de meta personal */
.gm-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.97); z-index: 102; width: 380px; max-width: calc(100vw - 32px);
  background: var(--sap-cream); border-radius: var(--radius-lg, 18px); box-shadow: 0 24px 70px rgba(16,9,6,.28); padding: 22px;
  display: flex; flex-direction: column; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1); }
.gm-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.gm-head { display: flex; align-items: center; gap: 12px; }
.gm-head .eq-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.gm-id b { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.1; }
.gm-id span { font-size: 12px; color: var(--text-muted-on-light); font-family: var(--font-serif); font-style: italic; }
.gm-seg { display: flex; gap: 4px; padding: 4px; background: var(--sap-sand); border-radius: 12px; }
.gm-seg button { flex: 1; padding: 8px 6px; border: none; background: transparent; border-radius: 9px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; transition: all .16s ease; }
.gm-seg button.on { background: var(--sap-cream); color: var(--sap-ink); box-shadow: 0 1px 4px rgba(16,9,6,.12); }
.gm-stepper { display: flex; align-items: stretch; gap: 8px; }
.gm-stepper > button { width: 46px; flex-shrink: 0; border: 1px solid var(--border-on-light); background: var(--sap-paper); border-radius: 12px; font-size: 22px; font-weight: 500; color: var(--sap-ink); cursor: pointer; transition: all .16s ease; }
.gm-stepper > button:hover { background: var(--sap-sand); }
.gm-val { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; border: 1px solid var(--border-on-light); border-radius: 12px; background: var(--sap-paper); padding: 8px; }
.gm-val input { width: 64px; border: none; background: transparent; text-align: right; font-family: var(--font-display); font-size: 30px; color: var(--sap-ink); outline: none; -moz-appearance: textfield; }
.gm-val input::-webkit-outer-spin-button, .gm-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gm-val span { font-size: 13px; color: var(--text-muted-on-light); font-weight: 600; }
.gm-phrase { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--text-muted-on-light); text-align: center; line-height: 1.4; }
.gm-phrase b { color: var(--sap-ink); font-style: normal; font-family: var(--font-ui); font-weight: 700; }
.gm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.gm-save { padding: 12px; border: none; border-radius: 12px; background: var(--sap-ink); color: var(--sap-cream); font-family: var(--font-ui); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .16s ease; }
.gm-save:hover { opacity: .88; }
.gm-reset, .gm-remove { padding: 9px; border: none; background: transparent; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text-muted-on-light); cursor: pointer; border-radius: 10px; transition: all .16s ease; }
.gm-reset:hover { color: var(--sap-ink); background: var(--sap-sand); }
.gm-remove:hover { color: #B5483A; background: color-mix(in oklab, #B5483A 10%, transparent); }
.eq-mini { display: flex; gap: 3px; }
.eq-mini__c { flex: 1; height: 18px; border-radius: 4px; min-width: 0; }
.eq-share { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; cursor: pointer;
  background: var(--sap-paper); color: var(--text-muted-on-light); border-radius: 999px; padding: 8px 14px; font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-on-light); transition: background .14s ease, color .14s ease, box-shadow .14s ease; align-self: flex-start; }
.eq-share .ic { width: 14px; height: 14px; }
.eq-share.on { background: color-mix(in oklab, var(--st-hecho) 14%, transparent); color: var(--st-hecho-ink); box-shadow: inset 0 0 0 1px var(--st-hecho); }
.eq-priv-note { font-family: var(--font-serif); font-size: 13.5px; color: var(--text-muted-on-light); margin: 0 0 16px; line-height: 1.45; }
.eq-priv { display: flex; flex-direction: column; }
.eq-priv__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-on-light); }
.eq-priv__row:last-child { border-bottom: none; }
.eq-priv__n { flex: 1; font-weight: 500; font-size: 14px; }
.eq-toggle { width: 42px; height: 24px; border-radius: 999px; border: none; cursor: pointer; background: var(--sap-stone); position: relative; transition: background .18s ease; flex-shrink: 0; }
.eq-toggle__k { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.eq-toggle.on { background: var(--st-hecho); }
.eq-toggle.on .eq-toggle__k { transform: translateX(18px); }
.eq-wall { display: flex; flex-direction: column; }
.eq-wall__row { display: flex; align-items: center; gap: 16px; padding: 13px 8px; border-bottom: 1px solid var(--border-on-light); }
.eq-wall__row:last-child { border-bottom: none; }
.eq-wall__row.me { background: var(--sap-paper); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.eq-wall__id { display: flex; align-items: center; gap: 11px; width: 168px; flex-shrink: 0; min-width: 0; }
.eq-wall__id .nm { min-width: 0; line-height: 1.2; }
.eq-wall__id .nm b { font-size: 14px; font-weight: 600; display: block; }
.eq-wall__id .nm span { font-size: 11.5px; color: var(--text-muted-on-light); }
.eq-wall__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.eq-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c);
  background: color-mix(in oklab, var(--c) 12%, transparent); border-radius: 999px; padding: 5px 12px 5px 9px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent); }
.eq-chip .ic { width: 14px; height: 14px; }
.eq-wall__none { font-family: var(--font-serif); font-style: italic; color: var(--text-muted-on-light); font-size: 13.5px; }
@media (max-width: 720px) {
  .eq-wall__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .eq-wall__id { width: auto; }
  .eq-person__body { flex-direction: column; align-items: flex-start; }
}
.fc-hourwrap + .fc-leg, .eq-detail .fc-hourwrap { margin-top: 8px; }

/* ===== FOCO (.fc-*/.fi-*) — diseño Claude Design, Fase 3 ===== */
/* ============================================================
   FOCO — calidad de atención (rampa de tinta índigo)
   ============================================================ */
.fc-card { margin-bottom: 22px; }
.fc-card .tb-card__head { align-items: flex-start; }
.fc-cover-pill { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in oklab, var(--sap-stone) 14%, var(--sap-paper));
  color: var(--sap-ink); border-radius: var(--radius-pill); padding: 6px 12px 6px 10px; font-size: 12px; font-weight: 700;
  white-space: nowrap; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.fc-cover-pill .ic { width: 14px; height: 14px; color: var(--text-muted-on-light); }
.fc-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; margin: 6px 0 22px; }
.fc-score { background: var(--sap-paper); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.fc-score__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-score__head .k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light); }
.fc-score__big { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--sap-ink); margin: 8px 0 2px; }
.fc-score__big span { font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 4px; }
.fc-score__word { font-family: var(--font-ui); font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.fc-gauge { position: relative; display: flex; height: 9px; border-radius: var(--radius-pill); overflow: hidden; }
.fc-gauge__z { flex: 1; }
.fc-gauge__mk { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--sap-ink);
  box-shadow: 0 0 0 3px var(--sap-paper), 0 1px 4px rgba(16,9,6,.35); transform: translate(-50%, -50%); }
.fc-gauge__ax { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; font-weight: 600; color: var(--text-muted-on-light); }
.fc-stat { background: var(--sap-paper); border-radius: var(--radius-md); padding: 16px 18px;
  box-shadow: inset 0 0 0 1px var(--border-on-light); display: flex; flex-direction: column; }
.fc-stat .k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light); }
.fc-stat b { font-family: var(--font-display); font-size: 32px; line-height: 1.05; color: var(--sap-ink); margin: 10px 0 auto; }
.fc-stat b .u { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 2px; }
.fc-stat .v { font-size: 12px; color: var(--text-muted-on-light); margin-top: 8px; }
.fc-distlbl, .fc-items-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-on-light); margin: 0 0 10px; }
.fc-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--sap-sand); }
.fc-bar.lg { height: 18px; }
.fc-bar i { display: block; height: 100%; }
.fc-bar i.un { background: repeating-linear-gradient(135deg, var(--sap-sand) 0 5px, color-mix(in oklab, var(--sap-stone) 22%, var(--sap-sand)) 5px 10px); }
.fc-leg { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 26px; }
.fc-leg__i { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-on-light); }
.fc-leg__i .d { width: 11px; height: 11px; border-radius: 4px; }
.fc-leg__i .d.un { background: repeating-linear-gradient(135deg, var(--sap-sand) 0 3px, var(--sap-stone) 3px 6px); }
.fc-leg__i .nm { color: var(--text-muted-on-light); }
.fc-leg__i b { font-weight: 700; }
.fc-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.fc-irow__top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.fc-irow__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.fc-irow__n { font-weight: 600; font-size: 13.5px; color: var(--sap-ink); }
.fc-irow.meet .fc-irow__n { font-style: italic; color: var(--text-muted-on-light); }
.fc-irow__v { margin-left: auto; font-size: 12px; color: var(--text-muted-on-light); white-space: nowrap; }
.fc-irow__v b { color: #34337A; font-size: 13px; }
.fc-irow .fc-bar { height: 9px; }
.fc-share { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 22px 0 10px; cursor: pointer; user-select: none; }
.fc-share__lbl { font-size: 13.5px; font-weight: 600; color: var(--sap-ink); white-space: nowrap; }
.fc-switch { position: relative; width: 40px; height: 23px; border-radius: 999px; border: none; padding: 0; flex-shrink: 0;
  background: var(--border-on-light); cursor: pointer; transition: background .18s ease; }
.fc-switch i { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s ease; }
.fc-switch.on { background: var(--sap-ink); }
.fc-switch.on i { transform: translateX(17px); }
.fc-share__txt { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--sap-ink); }
.fc-share__txt .ic { width: 17px; height: 17px; color: var(--text-muted-on-light); flex-shrink: 0; }
.fc-share__txt small { font-weight: 500; color: var(--text-muted-on-light); }
.fc-locked { display: flex; align-items: center; gap: 14px; padding: 22px 18px; color: var(--text-muted-on-light); }
.fc-locked .ic { width: 26px; height: 26px; flex-shrink: 0; opacity: .7; }
.fc-locked p { font-size: 13.5px; line-height: 1.5; }
/* —— curva diaria (fluctuación) —— */
.fc-distlbl.mt { margin-top: 26px; }
.fc-curvewrap { margin: 4px 0 2px; }
.fc-curve { width: 100%; height: auto; display: block; overflow: visible; }
.fc-curve-hint { margin: 2px 0 0; font-size: 12px; color: var(--text-muted-on-light); font-style: italic; font-family: var(--font-serif); }
.fc-curve__grid { stroke: var(--border-on-light); stroke-width: 1; stroke-dasharray: 2 5; }
.fc-curve__yl { fill: var(--text-muted-on-light); font-family: var(--font-ui); font-size: 11px; font-weight: 600; }
.fc-curve__xl { fill: var(--text-muted-on-light); font-family: var(--font-ui); font-size: 13px; font-weight: 600; text-anchor: middle; }
.fc-curve__xl.on { fill: var(--sap-ink); font-weight: 700; }
.fc-curve__xs { fill: var(--text-muted-on-light); font-family: var(--font-ui); font-size: 10.5px; text-anchor: middle; opacity: .8; }
.fc-curve__ghost { fill: none; stroke: var(--sap-stone); stroke-width: 3; opacity: .28; stroke-linecap: round; }
.fc-curve__line { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.fc-curve__empty { fill: var(--sap-sand); }
.fc-curve__pt circle { transition: transform .12s ease; transform-origin: center; transform-box: fill-box; }
.fc-curve__pt:hover circle { transform: scale(1.12); }
.fc-hint { font-size: 12px; color: var(--text-muted-on-light); margin: 6px 0 0; }
/* —— curva por hora —— */
.fc-hourwrap { margin: 4px 0 0; }
.fc-hours { width: 100%; height: auto; display: block; overflow: visible; }
.fc-hours__lunch { fill: color-mix(in oklab, #C77D4A 12%, transparent); }
.fc-hours__area { fill: color-mix(in oklab, #34337A 9%, transparent); stroke: none; }
.fc-hours__meal { fill: none; stroke: #34337A; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fc-hours__nomeal { fill: none; stroke: #C77D4A; stroke-width: 3; stroke-dasharray: 3 6; stroke-linecap: round; stroke-linejoin: round; }
.fc-hours__slump { fill: #C77D4A; stroke: #fff; stroke-width: 2.5; }
.fc-hours__slumpl { fill: #B0612F; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; text-anchor: middle; }
.fc-hleg { display: flex; gap: 22px; margin: 10px 0 0; }
.fc-hleg__i { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted-on-light); }
.fc-hleg__i .ln { width: 20px; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 2px; }
.fc-hleg__i .ln.meal { border-color: #34337A; }
.fc-hleg__i .ln.nomeal { border-top-style: dashed; border-color: #C77D4A; }
/* —— insights —— */
.fc-insights { display: flex; flex-direction: column; gap: 8px; }
.fc-ins { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--sap-paper); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-on-light); font-size: 13.5px; line-height: 1.5; color: var(--text-on-light); }
.fc-ins .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--text-muted-on-light); }
.fc-ins.strong { background: color-mix(in oklab, #C77D4A 10%, var(--sap-paper)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #C77D4A 28%, transparent); color: var(--sap-ink); font-weight: 500; }
.fc-ins.strong .ic { color: #B0612F; }
/* —— badge de comida en el detalle por día —— */
.fc-mealbadge { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.fc-mealbadge .ic { width: 16px; height: 16px; }
.fc-mealbadge.ok { background: color-mix(in oklab, #2E7D5B 12%, var(--sap-paper)); color: #1f6347; box-shadow: inset 0 0 0 1px color-mix(in oklab, #2E7D5B 25%, transparent); }
.fc-mealbadge.warn { background: color-mix(in oklab, #C77D4A 13%, var(--sap-paper)); color: #B0612F; box-shadow: inset 0 0 0 1px color-mix(in oklab, #C77D4A 30%, transparent); }
.fc-hourwrap + .fc-leg, .eq-detail .fc-hourwrap { margin-top: 8px; }
/* ============================================================
   LENTE LATERAL · "Qué mueve tu foco"
   ============================================================ */
.fc-insight-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  margin: 2px 0 24px; padding: 15px 16px; cursor: pointer;
  background: color-mix(in oklab, var(--sap-stone) 9%, var(--sap-paper));
  border: none; border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-on-light); transition: background .16s ease, box-shadow .16s ease; }
.fc-insight-cta:hover { background: color-mix(in oklab, var(--sap-stone) 15%, var(--sap-paper));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sap-ink) 18%, transparent); }
.fc-insight-cta__ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--sap-stone) 18%, var(--sap-paper)); }
.fc-insight-cta__ic .ic { width: 19px; height: 19px; color: var(--sap-ink); }
.fc-insight-cta__txt { flex: 1; min-width: 0; line-height: 1.3; }
.fc-insight-cta__txt b { display: block; font-size: 15px; font-weight: 600; color: var(--sap-ink); }
.fc-insight-cta__txt span { font-size: 12.5px; color: var(--text-muted-on-light); }
.fc-insight-cta__go { flex-shrink: 0; color: var(--text-muted-on-light); }
.fc-insight-cta__go .ic { width: 20px; height: 20px; transform: rotate(-90deg); }
.fi-panel { width: min(480px, 94vw); }
.fi-lead { font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--sap-ink); margin: 2px 0 14px; }
.fi-foot, .fi-note { font-size: 12px; line-height: 1.5; color: var(--text-muted-on-light); margin: 12px 0 2px; }
.fi-note b, .fi-foot b { color: var(--sap-ink); font-weight: 600; }
.fi-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* lift diverging */
.fi-lift { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.fi-lift__row { display: grid; grid-template-columns: 122px 1fr 52px; align-items: center; gap: 12px; }
.fi-lift__n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--sap-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-lift__track { position: relative; height: 18px; border-radius: 5px;
  background: color-mix(in oklab, var(--sap-stone) 12%, var(--sap-paper)); box-shadow: inset 0 0 0 1px var(--border-on-light); }
.fi-lift__track .ctr { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; background: color-mix(in oklab, var(--sap-ink) 26%, transparent); transform: translateX(-50%); }
.fi-lift__track .bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; min-width: 2px; }
.fi-lift__v { font-family: var(--font-display); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.fi-lift__v.pos { color: var(--sap-foco-alto, #4F8E6E); }
.fi-lift__v.neg { color: var(--sap-foco-bajo, #C9695A); }
/* foco por actividad */
.fi-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.fi-act { display: grid; grid-template-columns: 150px 1fr 38px; align-items: center; gap: 12px; }
.fi-act__n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--sap-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-tag { font-style: normal; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
  color: var(--text-muted-on-light); background: color-mix(in oklab, var(--sap-stone) 16%, transparent); padding: 1px 6px; border-radius: 999px; }
.fi-act__track { height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--sap-stone) 12%, var(--sap-paper)); box-shadow: inset 0 0 0 1px var(--border-on-light); overflow: hidden; }
.fi-act__track i { display: block; height: 100%; border-radius: 999px; }
.fi-act__v { font-family: var(--font-display); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sap-ink); text-align: right; }
/* ritmo del día */
.fi-hours { margin-top: 6px; }
.fi-hours__bars { display: flex; align-items: flex-end; gap: 3px; height: 78px; padding: 0 1px; }
.fi-hour { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.fi-hour i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; min-height: 3px; }
.fi-hour.peak i { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--sap-ink) 30%, transparent); }
.fi-hours__ticks { display: flex; justify-content: space-between; margin-top: 7px; }
.fi-tick { font-size: 10.5px; color: var(--text-muted-on-light); }
.fi-tick.peak { color: var(--sap-ink); font-weight: 600; }
/* lecturas en lenguaje natural */
.fi-reads { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.fi-read { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--sap-stone) 9%, var(--sap-paper)); box-shadow: inset 0 0 0 1px var(--border-on-light);
  font-size: 13px; line-height: 1.45; color: var(--sap-ink); }
.fi-read.strong { background: color-mix(in oklab, #C77D4A 12%, var(--sap-paper)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #C77D4A 26%, transparent); }
.fi-read__ic { flex-shrink: 0; margin-top: 1px; }
.fi-read__ic .ic { width: 16px; height: 16px; color: var(--text-muted-on-light); }
.fi-read.strong .fi-read__ic .ic { color: #B0612F; }
@media (max-width: 720px) {
  .fc-top { grid-template-columns: 1fr; }
  .fc-items { grid-template-columns: 1fr; }
}

/* ============================================================
   PROVEEDORES · directorio por categorías
   (reusa .lib-toolbar/.lib-search/.lib-filter/.lib-card de Biblioteca)
   ============================================================ */
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.prov-card { cursor: pointer; }
.prov-catdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.prov-stars { letter-spacing: 1px; font-size: 13px; line-height: 1; }
.prov-star { color: color-mix(in srgb, var(--sap-ink) 18%, transparent); }
.prov-star.on { color: #E28C00; }
.prov-rate { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sap-ink); }
.prov-rate .ic { width: 14px; height: 14px; color: var(--text-muted-on-light); }
.prov-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.prov-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--sap-ink); text-decoration: none; max-width: 100%;
  background: var(--sap-cream); box-shadow: inset 0 0 0 1px var(--border-on-light); transition: box-shadow .15s; }
.prov-act__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* emails largos no desbordan la tarjeta */
.prov-act:hover { box-shadow: inset 0 0 0 1.5px var(--sap-ink); }
.prov-act .ic { width: 14px; height: 14px; }
.prov-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 20px;
  border: 2px dashed var(--border-on-light); border-radius: 14px; color: var(--text-muted-on-light); text-align: center; }
.prov-empty .ic { width: 34px; height: 34px; }
.prov-empty p { margin: 0; max-width: 420px; }
.prov-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .prov-form2 { grid-template-columns: 1fr; } }
.prov-cat-manage { display: inline-flex; align-items: center; }
.prov-cat-manage .ic { width: 14px; height: 14px; }
.provcat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.provcat-row { display: flex; align-items: center; gap: 8px; }
.provcat-row .inp { flex: 1; }
.provcat-color { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--border-on-light); border-radius: 8px; background: var(--sap-cream); cursor: pointer; flex-shrink: 0; }
.provcat-n { font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); background: var(--sap-sand); padding: 2px 8px; border-radius: 999px; min-width: 26px; text-align: center; }
.provcat-new { margin-top: 4px; }

/* ============================================================
   PEDIDOS (Ayni) · cumplimiento end-to-end (.pd-*)
   Reusa el kit financiero (.inv-*, .cob-*, .pay-pill, .crono-up).
   ============================================================ */
.pd-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: color-mix(in oklab, var(--pc) 16%, var(--sap-cream));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pc) 45%, transparent);
  color: color-mix(in oklab, var(--pc) 78%, var(--sap-ink)); }
/* filas de la tabla de pedidos: clicables; subtextos apilados */
.pd-table tbody tr[data-action] { cursor: pointer; }
.pd-table .tr-sub { display: block; }
.pd-table tbody tr[data-action]:hover td { background: color-mix(in oklab, var(--sap-sand) 45%, transparent); }
.pd-paycell { max-width: 260px; }
.pd-paycell .pay-pill { margin: 1px 2px 1px 0; }
/* pie de sección con guardar */
.pd-secfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; }
/* .pay-sec pone padding:0 → los formularios directos necesitan el suyo
   (también dentro del envoltorio colapsable .pd-sec-body) */
.pay-sec > .inv-formrow, .pd-sec-body > .inv-formrow { padding: 12px 16px 0; }
.pay-sec > .inv-empty-row, .pd-sec-body > .inv-empty-row { display: block; text-align: center; color: var(--text-muted-on-light); font-size: 13px; }
/* —— secciones colapsables con indicador Pendiente/En proceso/Completado —— */
.pd-sec-tg { border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 4px 2px 0; font: inherit; color: inherit; text-align: left; }
.pd-sec-tg b { font-size: 15px; }
.pd-sec-tg .ic { width: 18px; height: 18px; }
.pd-sec-tg .pd-sec-chev { width: 14px; height: 14px; color: var(--text-muted-on-light);
  transition: transform .18s ease; transform: rotate(90deg); flex-shrink: 0; }
.pd-sec.is-closed .pd-sec-chev { transform: rotate(0deg); }
.pd-sec.is-closed .pd-sec-body { display: none; }
.pd-sec.is-closed .pay-sec__head { border-bottom: none; }
.pd-sec-headact { display: inline-flex; align-items: center; gap: 10px; }
.pd-sec.is-closed .pd-sec-desc, .pd-sec.is-closed .pd-sec-headact { display: none; }
.pd-sec-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.pd-sp-pend { background: var(--sap-stone); color: #57503F; }
.pd-sp-proc { background: #F7E9C8; color: #7A5300; }
.pd-sp-done { background: #CBE8D5; color: #175C3C; }
.pd-sp-n    { background: var(--sap-sand); color: var(--text-muted-on-light); text-transform: none; letter-spacing: 0; }
.pd-sec-hint { font-size: 11.5px; color: #8F5E06; font-weight: 600; } /* AA 4.5:1 en ambos temas */
/* —— stepper del ciclo = INDICADOR de solo lectura (pasado ✓ · actual · futuro) —— */
.pd-track { display: flex; align-items: stretch; overflow-x: auto; padding: 4px 2px 2px; -webkit-overflow-scrolling: touch; }
.pd-tk { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px 7px; border-radius: 12px; min-width: 88px; flex-shrink: 0; }
.pd-tk-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--border-on-light); background: var(--sap-cream); color: #fff; }
.pd-tk-dot .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.pd-tk.is-past .pd-tk-dot { background: var(--pc); box-shadow: none; }
.pd-tk.is-now .pd-tk-dot { background: var(--pc); box-shadow: 0 0 0 4px color-mix(in oklab, var(--pc) 22%, transparent); }
.pd-tk-l { font-size: 11.5px; font-weight: 700; color: var(--text-muted-on-light); white-space: nowrap; }
.pd-tk-d { font-size: 10.5px; color: var(--text-muted-on-light); white-space: nowrap; min-height: 13px; }
.pd-tk.is-past .pd-tk-l { color: var(--sap-ink); }
.pd-tk.is-now { background: color-mix(in oklab, var(--pc) 10%, var(--sap-cream)); box-shadow: inset 0 0 0 1.5px var(--pc); }
/* mezclas ≤75% del acento: AA 4.5:1 con los 7 estados en ambos temas */
.pd-tk.is-now .pd-tk-l { color: color-mix(in oklab, var(--pc) 75%, var(--sap-ink)); }
.pd-tk.is-now .pd-tk-d { color: color-mix(in oklab, var(--pc) 65%, var(--sap-ink)); font-weight: 700; }
/* futuros: atenuar solo el dot — el texto conserva AA (en táctil no hay hover que "revele") */
.pd-tk:not(.is-now):not(.is-past) .pd-tk-dot { opacity: .55; }
/* barra anclada al centro del dot (8px padding + 11px medio dot − 1px media barra) */
.pd-tk-bar { align-self: flex-start; width: 24px; height: 2px; background: var(--sap-stone); flex-shrink: 0; margin-top: 18px; }
.pd-tk-bar.is-past { background: #1F6044; }
.pd-track-hint { font-size: 11.5px; margin: 4px 2px 14px; }
/* icono de categoría del producto (emoji con halo del color de la categoría) —
   acompaña al nombre del producto en listas, detalle e ítems */
.prod-cat-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; font-size: 12.5px; line-height: 1; vertical-align: middle; margin-right: 6px; flex-shrink: 0;
  background: color-mix(in oklab, var(--cc) 16%, var(--sap-cream));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cc) 40%, transparent); }
.pd-prod-sep { margin: 0 6px; color: var(--text-muted-on-light); }
/* tabla de líneas de producto del pedido */
.pd-items .pd-item-prod { min-width: 240px; }
.pd-item-prodw { display: flex; align-items: center; } /* wrapper: el td sigue siendo table-cell */
.pd-items tfoot td { border-top: 2px solid var(--border-on-light); padding-top: 10px; }
/* resumen de cuadre de la cobranza (tfoot de cuotas) */
.pd-cuotas-sum { font-size: 12.5px; color: var(--text-muted-on-light); border-top: 2px solid var(--border-on-light); }
.pd-cuotas-sum b { color: var(--sap-ink); }
.pd-cuotas-sum .pay-pill { margin: 0 4px; }
.pd-cuadrar { border: none; cursor: pointer; font: inherit; font-size: inherit; }
.pd-cuadrar:hover { filter: brightness(.95); }
/* zona de acciones destructivas del detalle */
.pd-dangerrow { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.pd-dangerrow .btn { color: #B0432F; }
/* adjuntos */
.pd-files { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 12px; }
.pd-file { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pd-file-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted-on-light); background: var(--sap-sand); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
.pd-file-name { display: inline-flex; align-items: center; gap: 5px; color: var(--sap-ink); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-file-name:hover { text-decoration: underline; }
.pd-file-name .ic { width: 14px; height: 14px; flex-shrink: 0; }
/* el head de sección admite botones de subida a la derecha */
.pay-sec__head .crono-up { flex-shrink: 0; }

/* ============================================================
   FINANZAS (Ayni) · dashboard financiero (.fz-*)
   Reusa el kit financiero (.inv-*, .cob-kpis, .caja-*, .pay-pill).
   ============================================================ */
.fz-row > b { margin-left: auto; font-variant-numeric: tabular-nums; }
.fz-caja-note { font-size: 12.5px; margin: 10px 0 2px; }
.fz-verdict { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--pc) 8%, var(--sap-cream)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pc) 30%, transparent); margin-bottom: 12px; }
.fz-verdict__t { font-size: 13px; }
/* columnas de flujo mensual (positivo arriba / negativo abajo, línea de cero) */
.fz-chart-card { padding: 16px !important; }
.fz-chart-pad { padding: 12px 16px 16px; }
.fz-cols { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; }
.fz-col { border: none; background: none; cursor: pointer; flex: 1; min-width: 34px; display: flex; flex-direction: column; border-radius: 8px; padding: 2px; }
.fz-col:hover, .fz-col.is-sel { background: var(--sap-sand); }
.fz-col__top { height: 112px; display: flex; align-items: flex-end; justify-content: center; }
.fz-col__bot { height: 54px; display: flex; align-items: flex-start; justify-content: center; border-top: 1.5px solid var(--sap-stone); }
.fz-col__bar { width: 60%; border-radius: 4px 4px 0 0; position: relative; overflow: hidden; }
.fz-col__bar.is-pos { background: #1F6044; }
.fz-col__bar.is-neg { background: #B0432F; border-radius: 0 0 4px 4px; }
.fz-col__sim { position: absolute; left: 0; right: 0; bottom: 0; background: #7A4FB5; opacity: .75; }
.fz-col__l { font-size: 10.5px; color: var(--text-muted-on-light); text-align: center; margin-top: 3px; }
.fz-cash { display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-on-light); }
.fz-cash__l { font-size: 10.5px; color: var(--text-muted-on-light); margin-right: 6px; align-self: center; flex-shrink: 0; }
.fz-cash__bar { flex: 1; min-width: 8px; border-radius: 3px 3px 0 0; }
.fz-cash__bar.is-pos { background: #2C6E8F; }
.fz-cash__bar.is-neg { background: #B0432F; }
/* cuotas dentro del detalle del mes */
.fz-cuotas-mes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fz-cuota-mes { border: none; background: var(--sap-paper); cursor: pointer; text-align: left; font-size: 12.5px;
  padding: 7px 11px; border-radius: 9px; }
.fz-cuota-mes:hover { background: var(--sap-sand); }
/* simulador */
.fz-sim-res { padding: 4px 16px 8px; }
.fz-pos { color: #1F6044; } .fz-neg { color: #B0432F; }
.fz-simc { display: inline-flex; align-items: center; gap: 6px; }
/* tendencias: barras dobles ventas/margen */
.fz-duo { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; }
.fz-duo__col { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; }
.fz-duo__bars { height: 124px; display: flex; align-items: flex-end; gap: 2px; }
.fz-duo__bar { width: 12px; border-radius: 3px 3px 0 0; }
.fz-duo__bar.is-rev { background: #1F6044; }
.fz-duo__bar.is-mar { background: #2C6E8F; }
.fz-duo__pct { font-size: 10px; color: var(--text-muted-on-light); margin-top: 2px; }
/* mix de productos */
.fz-mix-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.fz-mix-name { min-width: 180px; font-size: 13px; font-weight: 600; }
.fz-mix-row .tb-bar__track { flex: 1; }
.fz-mix-row .tb-bar__fill { background: #1F6044; }
.fz-mix-val { font-size: 12px; color: var(--text-muted-on-light); white-space: nowrap; }
.fz-aging { display: flex; gap: 10px; flex-wrap: wrap; }
.fz-rec-off td { opacity: .55; }

/* ============================================================
   TEMA AYNI · identidad orgánica por-organización
   body.theme-ayni la pone SP_DB.applyOrgTheme() (db.js) al
   resolver la org activa. Re-tematiza vía tokens: NO tocar la
   paleta de estados --st-* (semántica compartida con data.js).
   ============================================================ */
body.theme-ayni {
  /* tipografía display: Earthbound (títulos, montos, calendario) */
  --font-display: "Earthbound", "American Grotesk Compressed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* paleta orgánica: bosque · hueso · humus · arcilla · musgo */
  --sap-dark: #212E1C;
  --sap-ink: #201B10;
  --sap-cream: #F9F5E9;
  --sap-paper: #F1EAD7;
  --sap-sand: #EAE1C9;
  --sap-stone: #DCD2B8;
  --sap-teal: #3B5A2E;
  --sap-line: rgba(32,27,16,.40);
  --sap-line-light: rgba(246,240,226,.32);
  --sap-veil: rgba(24,28,16,.50);
  --text-muted-on-light: rgba(32,27,16,.68);  /* .68: AA 4.5:1 sobre --sap-sand (con .62 caía a 4.37) */
  --text-muted-on-dark: rgba(246,240,226,.80);
  --accent: #AE5127;
  --accent-ink: #8A3D1A;
}
body.theme-ayni ::selection { background: rgba(174,81,39,.20); }

/* marca del sidebar: Earthbound Distort solo en el momento grande */
body.theme-ayni .side__brand { font-family: "Earthbound Distort", var(--font-serif); font-size: 27px; letter-spacing: .01em; }
/* sin isotipo de Sapiens en la cuenta de Ayni: la marca es el wordmark solo */
body.theme-ayni .side__brand svg, body.theme-ayni .tb-mark { display: none; }

/* sidebar: TODOS los textos e iconos en blanco/hueso (pedido explícito).
   Los iconos de espacios llevan color inline por-espacio → !important. */
body.theme-ayni .nav-item { color: rgba(249,245,233,.94); }
body.theme-ayni .nav-item .nav-ic { color: inherit !important; }
body.theme-ayni .side__label, body.theme-ayni .nav-item .count { color: rgba(246,240,226,.80); }
body.theme-ayni .nav-reveal:hover { background: #2A3A24; }
body.theme-ayni .nav-reveal:active { background: #33452C; }

/* inputs con #fff hardcodeado: blanco cálido para no chocar con el hueso */
body.theme-ayni .inp, body.theme-ayni .psel, body.theme-ayni .panel__name,
body.theme-ayni .panel__note, body.theme-ayni .menu .menu-date { background: #FFFDF4; }

/* topbar móvil (crema hardcodeada al 90%) → hueso translúcido */
body.theme-ayni .topbar { background: rgba(249,245,233,.9); }

/* ============================================================
   TEMA MINDFUL NUTRITION · identidad por-organización
   body.theme-mindful la pone SP_DB.applyOrgTheme() (db.js) al
   resolver la org activa. Naranja albaricoque del logo (#EE8F59,
   muestreado del asset) como superficie de marca; crema melocotón
   y tinta cacao en lo claro. Re-tematiza vía tokens: NO tocar la
   paleta de estados --st-* (semántica compartida con data.js).
   ============================================================ */
body.theme-mindful {
  /* paleta: albaricoque · blanco · crema melocotón · cacao · naranja quemado */
  --sap-dark: #EE8F59;                 /* el MISMO tono del fondo del logo */
  --sap-ink: #33221A;
  --sap-cream: #FDF6EE;
  --sap-paper: #F8EDE0;
  --sap-sand: #F3E3CE;
  --sap-stone: #E7D2B8;
  --sap-line: rgba(51,34,26,.38);
  --sap-line-light: rgba(255,255,255,.45);
  --sap-veil: rgba(51,34,26,.48);
  --text-muted-on-light: rgba(51,34,26,.68);  /* .68: AA sobre --sap-sand (lección Ayni) */
  --text-muted-on-dark: rgba(255,255,255,.88);
  --accent: #B85218;                   /* quemado: blanco encima da ≥4.5:1 */
  --accent-ink: #97400F;
}
body.theme-mindful ::selection { background: rgba(238,143,89,.30); }

/* marca del sidebar: wordmark oficial "Mindful nutrition" (blanco, extraído del
   logo) en vez del isotipo Sapiens + nombre en texto. El <a> conserva su click
   (dashboard) y aria-label; font-size:0 oculta el texto sin sacarlo del a11y tree. */
body.theme-mindful .side__brand svg, body.theme-mindful .tb-mark { display: none; }
body.theme-mindful .side__brand { font-size: 0; letter-spacing: 0; min-height: 56px;
  background: url("/assets/brand/mindful-wordmark.png") left center / contain no-repeat;
  background-origin: content-box; }

/* sidebar albaricoque: texto e iconos en blanco, como el wordmark del logo.
   Los iconos de espacios llevan color inline por-espacio → !important.
   Los hovers base (blanco al 6%) son invisibles sobre naranja → subir a 16-22%. */
body.theme-mindful .side, body.theme-mindful .nav-reveal { color: #fff; }
body.theme-mindful .nav-item { color: rgba(255,255,255,.97); }
body.theme-mindful .nav-item .nav-ic { color: inherit !important; }
body.theme-mindful .nav-item:hover { background: rgba(255,255,255,.16); color: #fff; }
body.theme-mindful .nav-item.active { background: rgba(255,255,255,.22); color: #fff; }
body.theme-mindful .side__label, body.theme-mindful .nav-item .count { color: rgba(255,255,255,.88); }
body.theme-mindful .side__collapse, body.theme-mindful .org-switch__btn { background: rgba(255,255,255,.14); color: #fff; }
body.theme-mindful .side__collapse:hover, body.theme-mindful .org-switch__btn:hover { background: rgba(255,255,255,.26); }
body.theme-mindful .nav-reveal:hover { background: #E07F45; }
body.theme-mindful .nav-reveal:active { background: #D67539; }

/* inputs con #fff hardcodeado: blanco apenas cálido para no chocar con el melocotón */
body.theme-mindful .inp, body.theme-mindful .psel, body.theme-mindful .panel__name,
body.theme-mindful .panel__note, body.theme-mindful .menu .menu-date { background: #FFFDF9; }

/* topbar móvil (crema hardcodeada al 90%) → melocotón translúcido */
body.theme-mindful .topbar { background: rgba(253,246,238,.9); }

/* ============================================================
   MÓVIL · overrides finales (auditoría de vista vertical)
   Este bloque va al FINAL del archivo a propósito: sobreescribe
   reglas base definidas más arriba (.tb-controls, .sel-bar, .inp,
   .modal, .eq-detail__head) que, por orden de cascada, ganarían a
   un override puesto en los bloques responsive de la mitad del
   archivo. NO mover hacia arriba.
   ============================================================ */
@media (max-width: 820px) {
  /* Tiempos: la barra sticky pega DEBAJO de la topbar (antes top:0 z-40 la tapaba y quedaba bajo el notch) */
  .tb-controls { top: calc(47px + env(safe-area-inset-top)); z-index: 20; }
  /* con el menú lateral abierto, la tabbar (z-70) tapaba usuario/cerrar sesión del menú */
  body.logged.side-open .tabbar, body.side-open .tab-sheet, body.side-open .tab-sheet-scrim { display: none; }
  /* barra de selección en lote: anclada a los bordes, sobre la tabbar (antes desbordaba y quedaba debajo) */
  .sel-bar { left: 12px; right: 12px; transform: none; bottom: calc(76px + env(safe-area-inset-bottom)); flex-wrap: wrap; white-space: normal; justify-content: center; gap: 8px 10px; }
  .inp { font-size: 16px; }                                   /* <16px dispara el auto-zoom de iOS al enfocar */
  .inv-in { font-size: 16px; } /* <16px dispara el auto-zoom de iOS al enfocar (edición celda-a-celda de Pedidos) */
  .side__collapse { display: none; }                          /* plegar barra = gesto de escritorio */
  .eq-detail__head { padding-top: calc(20px + env(safe-area-inset-top)); }   /* drawer a pantalla completa: no bajo el notch */
  .comm-grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }   /* Inicio: en teléfonos angostos el min fijo desbordaba */
  .view { overflow-x: clip; }                                 /* red de seguridad: nada empuja la página en horizontal (los tableros scrollean en su propio contenedor) */
}
@media (max-width: 560px) {
  /* modal anclado ARRIBA: centrado verticalmente, el teclado de iOS tapaba el input enfocado */
  .modal { top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%); max-height: calc(100dvh - 32px - env(safe-area-inset-top)); }
  .modal.show { transform: translateX(-50%); }
}

/* ============================================================
   MÓVIL v2 · rediseño de bolsillo ("se ve todo muy pequeño")
   Prioridad: Inicio · proyecto/espacio · lista · kanban.
   Breakpoint 820 = el mismo del shell móvil (topbar/tabbar).
   Overrides ADITIVOS al final (cascada por orden); las reglas
   cuya base vive en avatars.css (carga después) usan el prefijo
   .view para ganar por especificidad 0-2-0.
   ============================================================ */
@media (max-width: 820px) {
  /* — botones-ícono inline: de 20-28px a 34-36px táctiles — */
  .cal-btn { width: 36px; height: 36px; border-radius: 10px; }
  .cal-btn .ic { width: 17px; height: 17px; }
  .att-link { width: 34px; height: 34px; }
  .att-link .ic { width: 16px; height: 16px; }
  .tlink { width: 34px; height: 34px; opacity: .45; vertical-align: -11px; }
  .tlink .ic { width: 15px; height: 15px; }
  .att-mini { font-size: 12.5px; padding: 6px 11px; }
  .att-mini .ic { width: 13px; height: 13px; }
  .att-minis { gap: 6px; margin-top: 6px; }
  .att-count, .comment-count { font-size: 12.5px; }
  /* cronómetro: base en avatars.css → .view gana por especificidad */
  .view .tplay { padding: 8px 9px 8px 13px; font-size: 15px; min-width: 96px; }
  .view .tplay .pp { width: 26px; height: 26px; }
  .view .tplay .pp .ic { width: 13px; height: 13px; }
  /* chips, tags y avatares legibles */
  .chip { font-size: 13px; padding: 7px 13px 7px 11px; }
  .chip .dot { width: 9px; height: 9px; }
  .tag { font-size: 12.5px; padding: 6px 12px; }
  .tbadge { font-size: 12.5px; }
  .subprog { font-size: 12.5px; }
  .av-24 { width: 28px; height: 28px; font-size: 11.5px; }
  .av-row .av { margin-left: -9px; }
  /* toggle segmentado a dedo (Inicio, proyecto, espacio, calendario, gantt) */
  .viewtoggle button { padding: 11px 14px; font-size: 14px; }
  .viewtoggle button .ic { width: 17px; height: 17px; }

  /* — INICIO: jerarquía compacta + stats carrusel — */
  .greet { margin-bottom: 12px; }
  .greet h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .greet .date { font-size: 14.5px; margin-top: 4px; }
  .view .ws-stats { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 14px -18px 8px; padding: 2px 18px 6px; scrollbar-width: none; }
  .view .ws-stats::-webkit-scrollbar { display: none; }
  .view .ws-stat { flex: 0 0 44%; min-width: 150px; scroll-snap-align: start; padding: 16px; }
  .view .ws-stat .n { font-size: 36px; }
  .view .ws-stat .k { font-size: 12.5px; }
  .view .home-tasks-sub { font-size: 14.5px; }
  .view .home-tools .btn { padding: 13px 18px; font-size: 14.5px; }
  .view .home-tools .home-default { padding: 11px 14px; font-size: 12.5px; }
  .view .ws-group h3 .ct, .view .ws-group h3 .pj { font-size: 12.5px; }
  .home-overdue { padding: 15px 16px; }
  .home-overdue .ho-t b { font-size: 15.5px; }
  .home-overdue .ho-t span, .hp-item { font-size: 13px; }
  .hp-more { font-size: 12px; }
  .meet-row { padding: 13px 14px; gap: 12px; border-radius: 14px; }
  .meet-time { font-size: 17px; min-width: 56px; }
  .meet-title { font-size: 16px; }
  .meet-meta { font-size: 12.5px; }
  .meet-cfg { padding: 10px 14px; font-size: 13px; }
  .dash-col__head h2 { font-size: 15px; }
  .sec-toggle { width: 40px; height: 40px; }
  .sec-toggle .ic { width: 20px; height: 20px; }
  .cc-name { font-size: 16px; }
  .cc-done { width: 36px; height: 36px; border-radius: 10px; }
  .empty { padding: 28px 18px; }

  /* — LISTA: de tabla a fila-tarjeta de 2 líneas — */
  .tlist { overflow-x: hidden; }
  .tlist table { min-width: 0; display: block; }
  .tlist thead, .tlist tbody, .tlist tr, .tlist th, .tlist td { display: block; }
  .tlist thead th { display: none; }
  .tlist thead th.th-add { display: flex; justify-content: flex-end; width: auto; padding: 10px 12px 0; border-bottom: none; }
  .grp-add { width: 36px; height: 36px; }
  .grp-add .ic { width: 16px; height: 16px; }
  .tlist tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 10px; padding: 13px 14px; border-bottom: 1px solid var(--border-on-light); }
  .tlist tbody tr:last-child { border-bottom: none; }
  .tlist tbody td { padding: 0; border-bottom: none; font-size: 15px; }
  /* línea 1: checkbox + nombre (el flex-basis del nombre fuerza el salto) */
  .tlist td.c-chk { order: 0; width: auto; }
  .c-chk input[type="checkbox"] { width: 22px; height: 22px; }
  .chk-tap { display: grid; place-items: center; width: 40px; height: 40px; margin: -9px; }
  .tlist td.c-name { order: 1; flex: 1 1 calc(100% - 46px); font-size: 16px; line-height: 1.3; }
  .tlist .c-name-col { gap: 4px; }
  /* línea 2 (por order, sin tocar markup): estado · fecha · avatares · timer */
  .tlist tbody tr > td:nth-child(5) { order: 2; }   /* estado */
  .tlist tbody tr > td:nth-child(4) { order: 3; }   /* fecha */
  .tlist tbody tr > td:nth-child(3) { order: 4; }   /* responsables */
  .tlist td.c-acts { order: 5; margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .tlist .c-anames { display: none; }               /* solo avatares en móvil */
  .tlist button.c-date { font-size: 13.5px; }
  .tlist button.c-cell-edit { padding: 8px 10px; margin: -8px -10px; border-radius: 12px; }
  .tlist .status-btn { padding: 5px; margin: -5px; }
  .tlist .c-acts .cal-btn { display: none; }        /* clip y GCal viven en el detalle */
  /* subtareas: regleta en vez de sangría de tabla */
  .tlist tr.is-subrow { padding-left: 30px; box-shadow: inset 3px 0 0 var(--border-on-light); background: var(--sap-paper); }
  .tlist tr.is-subrow td { background: none; }
  .tlist tr.is-subrow .c-name { padding-left: 0; }
  .row-caret { padding: 8px; margin: -8px 0 -8px -8px; }
  .row-caret .ic { width: 17px; height: 17px; }
  .row-caret-sp { width: 25px; }
  .row-grip, .row-grip-sp { display: none; }        /* anidar por arrastre no es táctil */

  /* — KANBAN: columna = página con snap horizontal — */
  .board { scroll-snap-type: x mandatory; scroll-padding: 18px; gap: 12px; }
  .board .col { flex: 0 0 86vw; max-width: none; scroll-snap-align: center; padding: 0 14px 14px;
    max-height: calc(100dvh - 200px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .board.proj-board .col[data-col="idea"] { flex: 0 0 72vw; }
  /* cabecera sticky DENTRO del scroll propio de la columna */
  .board .col__head { position: sticky; top: 0; z-index: 2; background: var(--sap-paper); margin: 0 -14px 0; padding: 14px 18px 10px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .board .col__head h3 { font-size: 14px; }
  .board .col__head .n { font-size: 12.5px; padding: 2px 10px; }
  .board .col__body { gap: 12px; }
  .col__add { padding: 12px 10px; font-size: 14px; min-height: 44px; }
  .col__add .ic { width: 17px; height: 17px; }
  /* tarjetas (.tcard sirve a Inicio y kanban) */
  .tcard { padding: 16px; border-radius: 14px; }
  .tcard__name, .kcard .tcard__name { font-size: 16.5px; line-height: 1.3; }
  .tcard__proj, .tcard__date { font-size: 13px; }
  .tcard__date .ic { width: 14px; height: 14px; }
  .tcard__meta { gap: 10px; margin-top: 12px; }
  .tcard__foot { margin-top: 14px; }
  .kcard .cover-kimg { height: 110px; }
  /* kanban de proyectos del espacio */
  .pk-card .proj-thumb { height: 110px; }
  .pk-card__body { padding: 13px 14px 14px; }
  .pk-card__name { font-size: 16px; }
  .pk-card__foot { font-size: 12.5px; }
  .pk-card--idea .pk-card__name { font-size: 13px; }
  .pk-empty { font-size: 13px; }

  /* — PROYECTO / ESPACIO: cabecera compacta, tabs con dedo — */
  .drop-img--banner { height: 96px; margin-bottom: 14px; border-radius: 14px; }
  .crumbs { font-size: 13px; overflow-x: auto; scrollbar-width: none; }
  .crumbs::-webkit-scrollbar { display: none; }
  .proj-head { gap: 12px; margin-bottom: 16px; }
  .proj-head h1 { font-size: clamp(28px, 7.8vw, 38px); max-width: none; }
  .proj-head .sub { gap: 8px; margin-top: 10px; }
  .pd-field { padding: 7px 12px; }
  .proj-date-inp { font-size: 13px; }
  .proj-head__prog { min-width: 0; width: 100%; gap: 12px; }
  .proj-head__prog .pct { font-size: 26px; }
  .proj-head__drive { flex-wrap: wrap; }
  .proj-toolbar { gap: 10px; margin-bottom: 16px; }
  .proj-toolbar .viewtoggle, .spaceview-toggle { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .proj-toolbar .viewtoggle::-webkit-scrollbar, .spaceview-toggle::-webkit-scrollbar { display: none; }
  .proj-toolbar .viewtoggle button, .spaceview-toggle button { flex: 1 0 auto; justify-content: center; white-space: nowrap; }
  .page-head { flex-wrap: wrap; }
  .page-head .actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .page-head .actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   CRM · drill por proyecto en la ficha (finanzas + entregables)
   + moneda del cliente + adjuntos de cobranza
   ============================================================ */
.cl-proj-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; background: none; cursor: pointer; color: var(--text-muted-on-light); border-radius: 8px; flex-shrink: 0; }
.cl-proj-x:hover { background: var(--sap-sand); color: var(--sap-ink); }
.cl-proj-x .ic { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .15s ease-out; }
.cl-proj.is-open .cl-proj-x .ic { transform: rotate(0); }
.cl-proj-detail { grid-column: 1 / -1; width: 100%; margin: 2px 0 10px 38px; padding: 14px 16px;
  background: var(--sap-paper); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-on-light); }
.clpd-fin { display: flex; flex-wrap: wrap; gap: 18px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--border-on-light); }
.clpd-kpi { display: flex; flex-direction: column; gap: 2px; }
.clpd-kpi i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-on-light); }
.clpd-kpi b { font-size: 15.5px; color: var(--sap-ink); }
.clpd-kpi em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted-on-light); margin-left: 4px; }
.clpd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.clpd-head h4 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-on-light); }
.clpd-head .n { font-size: 11px; font-weight: 700; background: var(--sap-sand); border-radius: 999px; padding: 1px 8px; color: var(--text-muted-on-light); }
.clpd-deliv { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none;
  background: none; cursor: pointer; border-radius: 10px; font: inherit; text-align: left; }
.clpd-deliv:hover { background: var(--sap-cream); }
.clpd-dname { flex: 1; font-size: 14px; font-weight: 600; color: var(--sap-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clpd-due { font-size: 12.5px; color: var(--text-muted-on-light); flex-shrink: 0; }
.clpd-due.overdue { color: #B0432F; font-weight: 700; }
.clpd-empty { margin: 0; font-size: 13px; color: var(--text-muted-on-light); }
.cl-cur-pick { margin-left: auto; margin-right: 8px; }
.cl-section-head { flex-wrap: wrap; row-gap: 8px; }   /* el selector de moneda + botón caben en móvil */
.cl-section-head .cl-newproj-btn { margin-left: 0; }
.iv-doc-cell .crono-up input, .iv-doc-cell input[type="file"] { display: none; }
@media (max-width: 820px) {
  .cl-proj-detail { margin-left: 0; }
  .clpd-fin { gap: 12px; }
}

/* ============================================================
   CRM · Lista = tracker punta a punta (tabla plana v2)
   Sin líneas fuertes: agrupación por franja de cliente + hairlines.
   ============================================================ */
.crm-track2 { overflow-x: auto; }
.crm-track2 table { width: 100%; border-collapse: separate; border-spacing: 0; }
.crm-track2 thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted-on-light); padding: 0 14px 12px; white-space: nowrap; border: none; }
.crm-track2 tbody td { padding: 9px 14px; vertical-align: middle; font-size: 13.5px; border: none;
  border-top: 1px solid color-mix(in oklab, var(--border-on-light) 55%, transparent); }
/* celda del cliente (fusionada por rowspan): franja de color suave a la izquierda */
.crm-track2 .ct-cli { vertical-align: top; padding-top: 12px; background: var(--sap-paper);
  border-left: 3px solid var(--sap-clay); border-top: 1px solid var(--border-on-light); min-width: 176px; max-width: 232px; }
.crm-track2 .ct-cli .link-cell { display: block; width: 100%; }
/* el layout flex de .c-assignee vive bajo .tlist; esta tabla es .crm-track2 → replicarlo aquí */
.crm-track2 .ct-cli .c-assignee { display: flex; align-items: center; gap: 8px; white-space: normal; color: inherit; }
.crm-track2 .ct-cli .cav { flex-shrink: 0; }
.crm-track2 .ct-cli .c-assignee b { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--sap-ink); }
.crm-track2 .ct-cli .cl-health { margin-left: 3px; }
.crm-track2 .ct-cli-stage { margin-top: 8px; }
/* primera fila de cada cliente inicia la franja; el resto no repite el borde superior grueso */
.crm-track2 .ct-first > td:not(.ct-cli):not(.ct-resp) { border-top: 1px solid var(--border-on-light); }
.crm-track2 .ct-resp { vertical-align: top; padding-top: 12px; border-top: 1px solid var(--border-on-light); }
/* separador entre clientes: fila-aire sin borde */
.crm-track2 .ct-gap td { padding: 0; height: 10px; border: none; background: none; }
.crm-track2 .ct-gap + tr td { border-top: none; }
/* proyecto */
.crm-track2 .ct-pname .cl-proj-main { display: flex; align-items: center; gap: 9px; border: none; background: none; cursor: pointer; padding: 0; text-align: left; }
.crm-track2 .ct-pname .pdot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.crm-track2 .ct-pname .cl-proj-name { font-weight: 600; color: var(--sap-ink); }
.crm-track2 .ct-pname .cl-proj-main:hover .cl-proj-name { text-decoration: underline; }
.ct-pname-row { display: flex; align-items: center; gap: 6px; }
.ct-proj-menu { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border: none; background: none; cursor: pointer; color: var(--text-muted-on-light); border-radius: 7px; opacity: 0; transition: opacity .12s, background .12s; }
.crm-track2 .ct-row:hover .ct-proj-menu { opacity: 1; }
.ct-proj-menu:hover { background: var(--sap-sand); color: var(--sap-ink); }
.ct-proj-menu .ic { width: 16px; height: 16px; }
@media (pointer: coarse) { .ct-proj-menu { opacity: 1; } }
/* pestaña Clientes: directorio de tarjetas */
.clc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.clc-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; cursor: pointer;
  border-radius: 14px; background: var(--sap-paper); box-shadow: inset 0 0 0 1px var(--border-on-light); transition: box-shadow .15s, transform .15s; }
.clc-card:hover { box-shadow: inset 0 0 0 1.5px var(--sap-ink); transform: translateY(-1px); }
.clc-top { display: flex; align-items: center; gap: 10px; }
.clc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clc-id b { font-size: 15px; font-weight: 700; color: var(--sap-ink); line-height: 1.2; }
.clc-sector { font-size: 12px; color: var(--text-muted-on-light); }
.clc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.clc-nproj { font-size: 12.5px; color: var(--text-muted-on-light); }
.clc-val { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--sap-ink); }
.clc-por-row { display: flex; }
.clc-por { font-size: 12px; font-weight: 700; color: #935F06; background: color-mix(in oklab, #935F06 10%, transparent); border-radius: 999px; padding: 3px 10px; }
.clc-contact { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sap-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clc-contact .ic { width: 14px; height: 14px; color: var(--text-muted-on-light); flex-shrink: 0; }
.clc-contact.clc-mut { color: var(--text-muted-on-light); }
.clc-menu { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: none; cursor: pointer; color: var(--text-muted-on-light); border-radius: 8px; }
.clc-menu:hover { background: var(--sap-sand); color: var(--sap-ink); }
.clc-menu .ic { width: 16px; height: 16px; }
.ct-pdue { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--text-muted-on-light); }
.ct-pdue .ic { width: 12px; height: 12px; }
.ct-pdue.overdue { color: #B0432F; font-weight: 700; }
.ct-mut { color: var(--text-muted-on-light); font-size: 12.5px; }
/* entregables: pastilla clicable */
.ct-deliv-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-on-light);
  background: none; border-radius: 999px; padding: 4px 8px 4px 11px; cursor: pointer; font: inherit; color: var(--sap-ink); transition: background .12s, border-color .12s; }
.ct-deliv-btn:hover { border-color: var(--sap-ink); }
.ct-deliv-btn b { font-size: 13px; }
.ct-deliv-btn .ic { width: 14px; height: 14px; transition: transform .15s ease-out; }
.ct-deliv-btn.on { background: var(--sap-sand); }
.ct-deliv-btn.on .ic { transform: rotate(180deg); }
/* popover compacto de entregables (reusa #menu, ancho justo) */
.dl-pop { min-width: 240px; max-width: 340px; padding: 6px; }
.dl-pop .menu-lbl { padding: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted-on-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-pop-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: none;
  background: none; cursor: pointer; border-radius: 8px; font: inherit; text-align: left; }
.dl-pop-item:hover { background: var(--sap-sand); }
.dl-pop-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--sap-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-pop-due { font-size: 11.5px; color: var(--text-muted-on-light); flex-shrink: 0; }
.dl-pop-due.overdue { color: #B0432F; font-weight: 700; }
.dl-pop-st { flex-shrink: 0; }
.dl-pop-st .chip { font-size: 11px; padding: 3px 8px 3px 7px; }
/* montos */
.crm-track2 .ct-fin { white-space: nowrap; }
.ct-amt { display: inline-flex; align-items: center; gap: 4px; }
.ct-amt i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted-on-light); }
/* monto negociado: se lee como texto en negrita; al enfocar (clic) aparece la pastilla blanca editable */
.ct-amt-inp { width: 86px; text-align: right; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--sap-ink);
  border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer;
  -moz-appearance: textfield; appearance: textfield; transition: background .12s, border-color .12s, box-shadow .12s; }
.ct-amt-inp::-webkit-outer-spin-button, .ct-amt-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-amt-inp:hover { background: color-mix(in oklab, var(--sap-sand) 60%, transparent); }
.ct-amt-inp:focus { outline: none; cursor: text; background: #fff; border-color: var(--border-on-light); box-shadow: 0 1px 3px rgba(16,9,6,.1); }
.ct-amt-inp::placeholder { color: var(--text-muted-on-light); font-weight: 400; }
.ct-pct { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 700; color: var(--text-muted-on-light);
  background: var(--sap-sand); border-radius: 999px; padding: 1px 7px; }
.ct-pend { font-weight: 700; color: #935F06; }
.ct-pend.overdue { color: #B0432F; }
.ct-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--st-hecho-ink); font-size: 13px; }
.ct-ok .ic { width: 14px; height: 14px; }
/* por cobrar: monto arriba + cuándo se cobra abajo */
.ct-cob { display: inline-flex; flex-direction: column; gap: 1px; }
.ct-cob-top { display: flex; align-items: center; gap: 6px; }
.ct-cob-when { font-size: 11px; font-weight: 600; color: var(--text-muted-on-light); }
.ct-cob-when.overdue { color: #B0432F; font-weight: 700; }
/* indicador "Sin facturar" — clicable para registrar */
.ct-nofact { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed #B0432F; background: color-mix(in oklab, #B0432F 7%, transparent);
  color: #B0432F; border-radius: 999px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.ct-nofact:hover { background: color-mix(in oklab, #B0432F 14%, transparent); }
.ct-nofact .ic { width: 13px; height: 13px; }
.ct-mini-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px;
  vertical-align: -5px; border: 1px solid var(--border-on-light); background: var(--sap-cream); border-radius: 6px; cursor: pointer; color: var(--text-muted-on-light); }
.ct-mini-add:hover { border-color: var(--sap-ink); color: var(--sap-ink); }
.ct-mini-add .ic { width: 13px; height: 13px; }
@media (max-width: 820px) {
  .crm-track2 .ct-cli { min-width: 150px; }
  .crm-track2 tbody td, .crm-track2 thead th { padding-left: 10px; padding-right: 10px; }
}

/* ── Formulador de Alimentos (vista integrada · Mindful Nutrition) ── */
.fmd-wrap { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 18px; align-items: start; }
.fmd-card { background: var(--panel, #fff); border: 1px solid var(--line, #e3e7e2); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.fmd-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b7a73); margin: 0 0 12px; }
.fmd-lbl { display: block; font-size: 12px; color: var(--text-muted, #6b7a73); margin: 10px 0 4px; }
.fmd-in { width: 100%; padding: 9px 11px; border: 1px solid var(--line, #e3e7e2); border-radius: 8px; font-size: 14px; background: var(--panel, #fff); color: var(--fg, #1c2b26); }
.fmd-in:focus { outline: none; border-color: var(--accent, #0b7b4e); }
.fmd-search { position: relative; }
.fmd-results { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--panel, #fff); border: 1px solid var(--line, #e3e7e2); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); max-height: 280px; overflow: auto; }
.fmd-results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 11px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--line, #e3e7e2); color: var(--fg, #1c2b26); }
.fmd-results button:hover { background: var(--bg, #f4f5f2); }
.fmd-src { font-size: 11px; color: var(--text-muted, #6b7a73); margin-left: 6px; }
.fmd-nores, .fmd-empty { padding: 8px 11px; color: var(--text-muted, #6b7a73); font-size: 13px; }
.fmd-inglist { margin-top: 10px; }
.fmd-ing { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line, #e3e7e2); }
.fmd-ing-nm { flex: 1; font-size: 13px; color: var(--fg, #1c2b26); }
.fmd-ing input { width: 74px; text-align: right; padding: 6px 8px; border: 1px solid var(--line, #e3e7e2); border-radius: 6px; background: var(--panel, #fff); color: var(--fg, #1c2b26); }
.fmd-g { font-size: 12px; color: var(--text-muted, #6b7a73); }
.fmd-rm { border: 0; background: none; color: #b5564a; cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 6px; }
.fmd-ex { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.fmd-chip { font-size: 12px; padding: 6px 10px; border: 1px solid var(--line, #e3e7e2); background: var(--panel, #fff); border-radius: 20px; cursor: pointer; color: var(--fg, #1c2b26); }
.fmd-chip:hover { border-color: var(--accent, #0b7b4e); color: var(--accent, #0b7b4e); }
.fmd-muted { color: var(--text-muted, #6b7a73); font-size: 12px; }
.fmd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fmd-toggle { display: flex; gap: 8px; margin-top: 4px; }
.fmd-toggle button { flex: 1; padding: 8px; border: 1px solid var(--line, #e3e7e2); background: var(--panel, #fff); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--fg, #1c2b26); }
.fmd-toggle button.on { background: var(--accent, #0b7b4e); color: #fff; border-color: var(--accent, #0b7b4e); }
.fmd-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--fg, #1c2b26); cursor: pointer; }
.fmd-check input { margin-top: 2px; }
.fmd-go { width: 100%; margin-top: 16px; }
.fmd-err { color: #b5564a; font-size: 13px; margin-top: 8px; }
.fmd-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fmd-label { background: var(--panel, #fff); border: 1px solid var(--line, #e3e7e2); border-radius: 10px; padding: 14px; }
.fmd-label-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b7a73); margin-bottom: 10px; }
.fmd-label svg { max-width: 100%; height: auto; }
.fmd-claims { list-style: none; margin: 6px 0 10px; padding: 0; }
.fmd-claims li { padding: 5px 0; border-bottom: 1px solid var(--line, #e3e7e2); font-size: 13px; color: var(--fg, #1c2b26); }
.fmd-mk { font-weight: 700; color: var(--accent, #0b7b4e); margin-right: 8px; }
.fmd-mk.fmd-no { color: #b5564a; } .fmd-mk.fmd-warn { color: #e0991b; }
.fmd-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: #fbeee9; color: #b5564a; margin: 2px 4px 2px 0; }
.fmd-disc { font-size: 11px; color: var(--text-muted, #6b7a73); margin-top: 12px; border-top: 1px solid var(--line, #e3e7e2); padding-top: 10px; }
.fmd-placeholder { text-align: center; color: var(--text-muted, #6b7a73); padding: 50px 20px; }
.fmd-tag { font-size: 38px; margin-bottom: 10px; }
@media (max-width: 900px) { .fmd-wrap { grid-template-columns: 1fr; } }