/*
 * Portal del cliente (nuevo) — /portal/
 * Hoja propia: NO carga bootstrap.min.css ni sidebar.css. El portal no debe
 * parecerse al dashboard interno (CEO, 13-oct-2026).
 * Layout: carril oscuro de 6 destinos + lienzo amplio; en móvil, barra inferior.
 */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --line: #dde3ec;
  --fg: #141b2b;
  --fg-2: #4a556b;
  --fg-3: #636d82;
  --accent: #1d4ed8;
  --accent-soft: #e5ecfd;
  --accent-ink: #ffffff;
  --rail: #0f172a;
  --rail-fg: #c9d2e3;
  --rail-active: #ffffff;
  --ok: #15803d; --ok-soft: #e3f5e9;
  --warn: #a14a06; --warn-soft: #fdf1df;
  --bad: #b91c1c; --bad-soft: #fde7e7;
  --info: #1d4ed8; --info-soft: #e5ecfd;
  --ia-1: #6d28d9; --ia-2: #c026d3;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.05);
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 14px;
  color-scheme: light;
}
/* Claro por defecto (CEO, 13-oct-2026: «no me gusta la vista oscura»). El oscuro es una opción de
   Configuración → Apariencia: el armazón pone data-theme="light" (claro), "dark" (oscuro) o nada
   («como mi dispositivo», que sigue a prefers-color-scheme). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b111c; --surface: #131b29; --surface-2: #1a2434; --line: #263247;
  --fg: #e8edf6; --fg-2: #b3bdd0; --fg-3: #95a0b5;
  --accent: #7aa2ff; --accent-soft: #1b2a4d; --accent-ink: #0b111c;
  --rail: #070b13; --rail-fg: #9aa6bc; --rail-active: #ffffff;
  --ok: #5fd08a; --ok-soft: #12291d; --warn: #f2b25c; --warn-soft: #2e2213;
  --bad: #f68b8b; --bad-soft: #321718; --info: #7aa2ff; --info-soft: #1b2a4d;
  --shadow: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0b111c; --surface: #131b29; --surface-2: #1a2434; --line: #263247;
  --fg: #e8edf6; --fg-2: #b3bdd0; --fg-3: #95a0b5;
  --accent: #7aa2ff; --accent-soft: #1b2a4d; --accent-ink: #0b111c;
  --rail: #070b13; --rail-fg: #9aa6bc; --rail-active: #ffffff;
  --ok: #5fd08a; --ok-soft: #12291d; --warn: #f2b25c; --warn-soft: #2e2213;
  --bad: #f68b8b; --bad-soft: #321718; --info: #7aa2ff; --info-soft: #1b2a4d;
  --shadow: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body.pt { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.pt a { color: inherit; text-decoration: none; }
.pt button { font: inherit; color: inherit; cursor: pointer; }
.pt :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .pt * { transition: none !important; animation: none !important; } }
.pt .bi { line-height: 1; }

/* ---------- Armazón ---------- */
.pt-app { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100vh; }
.pt-rail { background: var(--rail); color: var(--rail-fg); display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.pt-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; color: var(--rail-active); font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.pt-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); font-size: 14px; flex: none; }
.pt-cuenta { margin: 0 4px 16px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13px; }
.pt-cuenta b { display: block; color: var(--rail-active); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pt-nav { display: flex; flex-direction: column; gap: 2px; }
.pt-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 14.5px; color: var(--rail-fg); }
.pt-nav a:hover { background: rgba(255,255,255,.06); color: var(--rail-active); }
.pt-nav a[aria-current="page"] { background: rgba(255,255,255,.12); color: var(--rail-active); font-weight: 600; }
.pt-nav .bi { font-size: 18px; width: 20px; text-align: center; }
.pt-nav .pt-badge { margin-left: auto; background: #f59e0b; color: #1a1205; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.pt-nav .pt-badge.pt-badge-rojo { background: #dc2626; color: #fff; }
.pt-rail .pt-sp { flex: 1; }
.pt-rail .pt-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.pt-clasico { font-size: 12.5px; color: var(--rail-fg); opacity: .75; padding: 8px 12px; }
.pt-clasico:hover { opacity: 1; text-decoration: underline; }

.pt-main { min-width: 0; display: flex; flex-direction: column; }
.pt-top { display: flex; align-items: center; gap: 12px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.pt-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; color: var(--fg-3); font-size: 14px; text-align: left; }
.pt-search:hover { border-color: var(--line); }
.pt-search kbd { margin-left: auto; font-family: var(--f-body); font-size: 11.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--fg-2); }
.pt-top .pt-sp { flex: 1; }
.pt-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.pt-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pt-user small { display: block; color: var(--fg-3); font-size: 12px; }
.pt-mbrand { display: none; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.pt-icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--fg-2); }

.pt-vcc { background: #fef3c7; color: #5b3a06; padding: 8px 32px; font-size: 13.5px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pt-vcc button { border: 1px solid #b45309; background: transparent; border-radius: 8px; padding: 3px 10px; font-weight: 600; color: #5b3a06; }

.pt-content { padding: 32px; display: flex; flex-direction: column; gap: 24px; max-width: 1240px; width: 100%; }

/* ---------- Tipografía ---------- */
.pt-h1 { font-family: var(--f-display); font-size: 30px; line-height: 1.15; margin: 0; letter-spacing: -.02em; text-wrap: balance; font-weight: 700; }
.pt-lead { color: var(--fg-2); margin: 6px 0 0; font-size: 16px; max-width: 64ch; }
.pt-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); font-weight: 600; }

/* ---------- Componentes ---------- */
.pt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.pt-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pt-card-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.pt-link { color: var(--accent) !important; font-weight: 600; font-size: 13.5px; white-space: nowrap; border: 0; background: none; padding: 0; }
.pt-link:hover { text-decoration: underline; }

.pt-grid-2 { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 24px; align-items: start; }
.pt-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.pt-ask { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r); padding: 20px; }
.pt-ask h2 { margin: 0; font-size: 16px; }
.pt-ask .pt-sub { color: var(--fg-2); font-size: 14px; margin: 4px 0 14px; }
.pt-ask-item { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line); }
.pt-ask-item + .pt-ask-item { margin-top: 8px; }
.pt-ask-item .pt-what { flex: 1; min-width: 0; }
.pt-ask-item .pt-what b { display: block; font-weight: 600; }
.pt-ask-item .pt-what span { color: var(--fg-2); font-size: 13.5px; }

.pt-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--accent); color: var(--accent-ink) !important; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 10px; white-space: nowrap; }
.pt-btn:hover { filter: brightness(1.08); }
.pt-btn.ghost { background: transparent; color: var(--fg) !important; border: 1px solid var(--line); }

.pt-figs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.pt-fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; min-width: 0; }
.pt-fig .k { font-size: 13px; color: var(--fg-2); }
.pt-fig .v { font-family: var(--f-display); font-size: 28px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pt-fig .v.ok { color: var(--ok); }
.pt-fig .v.bad { color: var(--bad); }
.pt-fig .n { font-size: 13px; color: var(--fg-3); }

.pt-list { display: flex; flex-direction: column; }
.pt-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.pt-row:first-child { border-top: 0; padding-top: 0; }
.pt-row:last-child { padding-bottom: 0; }
a.pt-row:hover b { color: var(--accent); }
.pt-row .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--fg-2); font-size: 17px; }
.pt-row .t { flex: 1; min-width: 0; }
.pt-row .t b { display: block; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.pt-row .t span { color: var(--fg-3); font-size: 13px; }
.pt-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.pt-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pt-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pt-chip.ok { background: var(--ok-soft); color: var(--ok); }
.pt-chip.warn { background: var(--warn-soft); color: var(--warn); }
.pt-chip.bad { background: var(--bad-soft); color: var(--bad); }
.pt-chip.info { background: var(--info-soft); color: var(--info); }
.pt-chip.mute { background: var(--surface-2); color: var(--fg-2); }

.pt-job { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pt-job:first-child { border-top: 0; padding-top: 0; }
.pt-job:last-child { padding-bottom: 0; }
.pt-job b { font-weight: 600; overflow-wrap: anywhere; }
.pt-job .meta { color: var(--fg-3); font-size: 13px; grid-column: 1; }
.pt-steps { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 6px; }
.pt-steps i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-2); }
.pt-steps i.on { background: var(--accent); }
.pt-steps i.wait { background: var(--warn); }
.pt-steps i.done { background: var(--ok); }

.pt-ia { background: linear-gradient(135deg, var(--ia-1), var(--ia-2)); color: #fff; border-radius: var(--r); padding: 20px; }
.pt-ia h2 { margin: 0 0 6px; font-size: 15px; color: #fff; }
.pt-ia p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #fff; }

.pt-person { display: flex; gap: 12px; align-items: center; }
.pt-person + .pt-person { margin-top: 12px; }
.pt-person b { display: block; font-weight: 600; font-size: 14.5px; }
.pt-person span { font-size: 13px; color: var(--fg-3); overflow-wrap: anywhere; }

.pt-date { width: 54px; text-align: center; border-radius: 12px; border: 1px solid var(--line); padding: 6px 0; flex: none; background: var(--surface); }
.pt-date small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bad); font-weight: 700; }
.pt-date b { font-family: var(--f-display); font-size: 22px; line-height: 1.1; }

/* Pestañas como las de un navegador (CEO, 14-oct-2026): la activa en color, unida a la raya de abajo; las demás en gris. */
.pt-tabs { display: flex; gap: 4px; border-bottom: 3px solid var(--accent); overflow-x: auto; padding: 0 2px; }
.pt-tabs a { padding: 10px 18px 9px; font-weight: 600; color: var(--fg-3); background: var(--surface-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; white-space: nowrap; font-size: 14.5px; }
.pt-tabs a:hover { color: var(--fg); background: var(--line); }
.pt-tabs a[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pt-tabs a[aria-selected="true"] .n { background: rgba(255,255,255,.25); color: inherit; }
.pt-tabs .n { font-size: 12px; background: var(--surface-2); padding: 1px 7px; border-radius: 99px; margin-left: 6px; color: var(--fg-2); }

.pt-tools { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.pt-tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; min-width: 0; }
.pt-tool:hover { border-color: var(--accent); transform: translateY(-1px); }
.pt-tool .ti { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.pt-tool b { font-size: 15.5px; }
.pt-tool span { color: var(--fg-2); font-size: 13.5px; }
.pt-grupo { font-size: 13px; font-weight: 700; color: var(--fg-2); margin: 8px 0 -6px; }

.pt-tbl-wrap { overflow-x: auto; }
.pt table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pt th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); font-weight: 600; padding: 0 12px 10px; }
.pt td { padding: 13px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.pt td.num, .pt th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pt-vacio { text-align: center; padding: 28px 16px; color: var(--fg-2); }
.pt-vacio .bi { font-size: 30px; color: var(--fg-3); display: block; margin-bottom: 8px; }
.pt-vacio b { display: block; color: var(--fg); margin-bottom: 2px; }
.pt-vacio p { margin: 0 auto; max-width: 48ch; font-size: 14px; }

.pt-banner { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--accent-soft); border-radius: var(--r); padding: 16px 20px; }
.pt-banner .t { flex: 1; min-width: 200px; }
.pt-bar { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.pt-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* ---------- Barra inferior (móvil) ---------- */
.pt-tabbar { display: none; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); margin-top: auto; z-index: 20; }
.pt-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--fg-3); padding: 4px 6px; min-width: 56px; }
.pt-tabbar a .bi { font-size: 21px; }
.pt-tabbar a[aria-current="page"] { color: var(--accent); }

/* ---------- Ctrl+K ---------- */
.pt-pal-bg { position: fixed; inset: 0; background: rgba(8,12,22,.45); display: grid; place-items: start center; padding: 12vh 16px 0; z-index: 50; }
.pt-pal-bg[hidden] { display: none; }
.pt-pal { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.pt-pal input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font: inherit; font-size: 16px; background: transparent; color: var(--fg); outline: none; }
.pt-pal ul { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow: auto; }
.pt-pal li a { padding: 10px 12px; border-radius: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.pt-pal li a[aria-selected="true"] { background: var(--accent-soft); }
.pt-pal li small { color: var(--fg-3); }
.pt-pal .grp { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); padding: 10px 12px 4px; font-weight: 600; }
.pt-pal .nada { padding: 14px 12px; color: var(--fg-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pt-grid-2 { grid-template-columns: minmax(0,1fr); }
  .pt-tools { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .pt-app { grid-template-columns: minmax(0,1fr); }
  .pt-rail { display: none; }
  .pt-tabbar { display: flex; }
  .pt-top { padding: 12px 16px; }
  .pt-search, .pt-user .pt-uname { display: none; }
  .pt-mbrand { display: flex; }
  .pt-vcc { padding: 8px 16px; }
  .pt-content { padding: 20px 16px 28px; gap: 20px; }
  .pt-h1 { font-size: 25px; }
  .pt-figs { grid-template-columns: 1fr 1fr; }
  .pt-figs .pt-fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pt-tools { grid-template-columns: minmax(0,1fr); }
  .pt-ask-item { flex-wrap: wrap; }
  .pt-ask-item .pt-btn { width: 100%; justify-content: center; }
}

/* ---------- Inicio de empresa de servicios (13-oct-2026) ---------- */
.pt-h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.pt-txt { margin: 0 0 14px; color: var(--fg-2); font-size: 14.5px; }
.pt-sel { user-select: all; overflow-wrap: anywhere; }
.pt-figs-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.pt-canales { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.pt-canal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-canal-h { display: flex; align-items: center; gap: 10px; }
.pt-canal-h b { flex: 1; font-size: 15px; }
.pt-canal-h .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 16px; flex: none; }
.pt-canal p { margin: 4px 0 0; font-size: 14px; color: var(--fg-2); }
.pt-canal p b { color: var(--fg); }
.pt-canal small { color: var(--fg-3); font-size: 12.5px; }
.pt-canal .pt-link { margin-top: auto; padding-top: 4px; }

.pt-servicios { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.pt-serv { display: flex; flex-direction: column; gap: 16px; }
.pt-serv-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pt-serv-h h3 { margin: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.pt-serv-meta { color: var(--fg-3); font-size: 13px; }
.pt-serv-gente { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.pt-serv-gente .pt-person + .pt-person { margin-top: 0; }
.pt-avatar.alt { background: var(--surface); color: var(--fg-2); border: 1px solid var(--line); }
.pt-serv-canales { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--fg-2); }
.pt-serv-canales .bi { color: var(--fg-3); }
.pt-serv-emp-h { font-size: 13px; font-weight: 700; color: var(--fg-2); margin-bottom: 8px; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-tag { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tag.more { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

@media (max-width: 1000px) {
  .pt-figs-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pt-canales, .pt-servicios { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .pt-figs-4 .pt-fig:last-child:nth-child(odd) { grid-column: auto; }
}

/* Cifra con enlace al detalle */
.pt-fig-link { display: block; transition: border-color .15s, transform .15s; }
.pt-fig-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.pt-fig-link .k .bi { color: var(--accent); font-size: 16px; vertical-align: -2px; }

/* Lista de empresas */
.pt-buscar { width: 100%; max-width: 360px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14.5px; background: var(--surface); color: var(--fg); }
.pt-tipo { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pt-tipo.sociedad { background: var(--info-soft); color: var(--info); }
.pt-tipo.autonomo { background: var(--ok-soft); color: var(--ok); }
.pt-tipo.otra, .pt-tipo.sin { background: var(--surface-2); color: var(--fg-2); }
.pt td.wrap { white-space: normal; min-width: 200px; }

/* ---------- Perfiles y Configuración ---------- */
.pt-vcc-perf { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pt-vcc-perf a { padding: 2px 9px; border-radius: 999px; border: 1px solid #b45309; color: #5b3a06; font-weight: 600; font-size: 12.5px; }
.pt-vcc-perf a[aria-current="true"] { background: #b45309; color: #fff; }
.pt-aviso { background: var(--info-soft); color: var(--fg); border-radius: 12px; padding: 12px 16px; font-size: 14.5px; }
.pt-aviso.ok { background: var(--ok-soft); }
.pt-aviso.bad { background: var(--bad-soft); }
a.pt-user:hover .pt-avatar { outline: 2px solid var(--accent); }

.pt-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.pt-field { display: flex; flex-direction: column; gap: 6px; }
.pt-field label, .pt-field .lbl { font-weight: 600; font-size: 14px; }
.pt-field small { color: var(--fg-3); font-size: 12.5px; }
.pt-input, .pt-select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; background: var(--surface); color: var(--fg); min-height: 42px; }
.pt-input:focus, .pt-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pt-input[readonly] { background: var(--surface-2); color: var(--fg-2); }
.pt-opciones { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.pt-opcion { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; background: var(--surface); }
.pt-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.pt-opcion b { font-size: 14.5px; }
.pt-opcion span { color: var(--fg-3); font-size: 13px; }
.pt-opcion:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pt-opcion:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-opcion.off { opacity: .55; cursor: not-allowed; }
.pt-muestra { height: 44px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; }
.pt-muestra.claro { background: linear-gradient(90deg, #0f172a 22%, #f4f6f9 22%); }
.pt-muestra.oscuro { background: linear-gradient(90deg, #070b13 22%, #0b111c 22%); }
.pt-muestra.sistema { background: linear-gradient(90deg, #0f172a 22%, #f4f6f9 22% 61%, #0b111c 61%); }

.pt-accesos .pt-row { flex-wrap: wrap; }
.pt-accesos .acc-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pt-accesos .pt-select { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.pt-btn.peligro { background: transparent; color: var(--bad) !important; border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.pt-btn.sm { padding: 6px 12px; font-size: 13.5px; }
.pt-perfiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.pt-cupo { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--fg-2); }
.pt-cupo .pt-bar { flex: 1; max-width: 220px; margin: 0; }
@media (max-width: 760px) {
  .pt-opciones, .pt-perfiles { grid-template-columns: minmax(0,1fr); }
  .pt-vcc-perf { width: 100%; }
}

/* Grupo aparte en el menú (WhatsApp, 13-oct-2026) */
.pt-nav-grupo { margin: 18px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rail-fg); opacity: .85; }

/* Servicios como entradas propias (13-oct-2026) */
.pt-nav .pt-badge.pt-badge-n { background: rgba(255,255,255,.12); color: var(--rail-active); font-weight: 600; }
.pt-avatar.alt2 { background: var(--surface); color: var(--accent); border: 1px dashed var(--accent); }
a.pt-serv-a { color: inherit; text-decoration: none; }
a.pt-serv-a:hover { color: var(--accent); text-decoration: underline; }
.pt-serv-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--fg-2); }
.pt-canal-nota { display: block; margin-top: 6px; font-size: 13px; color: var(--fg-3); }
.pt-servicio-canales { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .pt-servicio-canales { grid-template-columns: minmax(0,1fr); } }

/* Cinta de esquina «Sin coste durante 2026» (agente de WhatsApp, 13-oct-2026) */
.pt-con-cinta { position: relative; overflow: hidden; }
.pt-con-cinta .pt-serv-h { padding-right: 88px; }
.pt-cinta { position: absolute; top: 26px; right: -58px; width: 230px; transform: rotate(45deg); text-align: center;
  background: linear-gradient(90deg, #6d28d9, #c026d3); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  line-height: 1.25; padding: 6px 0; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none; }

/* «Tus servicios»: el estado se lee de un vistazo (CEO, 13-oct-2026). Activo verde lleno, Disponible amarillo. */
.pt-serv-h .pt-chip { font-size: 14px; padding: 6px 14px; }
.pt-serv-h .pt-chip::before { width: 8px; height: 8px; }
.pt-serv-h .pt-chip.ok { background: #15803d; color: #fff; }
.pt-chip.amarillo { background: #fde047; color: #422006; }

/* WhatsApp dentro del portal (13-oct-2026): el panel de siempre en un marco a toda la altura. */
.pt-marco { width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 1px solid var(--line); border-radius: var(--r); background: #f8f9fa; }
.pt-content:has(.pt-marco) { max-width: none; }
.pt-wa-cab .pt-h1 .bi { color: #16a34a; }

/* ---------- Agente de WhatsApp: funciones y tour (CEO, 13-oct-2026) ---------- */
.pt-wafn { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pt-wafn-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.pt-wafn-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pt-wafn-i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #dcfce7; color: #15803d; font-size: 18px; }
.pt-wafn-c h3 { margin: 4px 0 0; font-size: 16px; font-weight: 700; }
.pt-wafn-c p { margin: 0; font-size: 14px; color: var(--fg-2); }
.pt-wafn-c .pt-wafn-ia { font-size: 13px; color: var(--fg-3); }
.pt-wafn-c .pt-wafn-ia.si { background: linear-gradient(135deg, var(--ia-1), var(--ia-2)); color: #fff; padding: 8px 10px; border-radius: 10px; }
.pt-wafn-acc { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 6px; }
.pt-wafn-ver { align-self: flex-start; background: none; border: 0; padding: 6px 0 0; font-weight: 600; color: var(--accent) !important; display: inline-flex; gap: 6px; align-items: center; }
.pt-wa-tourbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.pt-tour { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.6); display: grid; place-items: center; padding: 16px; }
.pt-tour[hidden] { display: none; }
.pt-tour-caja { position: relative; background: var(--surface); color: var(--fg); border-radius: 20px; width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 28px; padding: 28px; }
.pt-tour-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); }
.pt-tour-movil { border: 10px solid #111827; border-radius: 34px; background: #efeae2; height: 560px; display: flex; flex-direction: column; overflow: hidden; }
.pt-tour-barra { background: #075e54; color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 12px; font-size: 14px; }
.pt-tour-barra b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tour-av { width: 30px; height: 30px; border-radius: 50%; background: #cbd5e1; color: #0f172a; display: grid; place-items: center; font-weight: 700; flex: none; }
.pt-tour-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.pt-tour-b { max-width: 82%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: #111827; white-space: pre-line; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.pt-tour-b.in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.pt-tour-b.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.pt-tour-esc { display: flex; gap: 4px; }
.pt-tour-esc i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: ptEsc 1s infinite; }
.pt-tour-esc i:nth-child(2) { animation-delay: .15s; } .pt-tour-esc i:nth-child(3) { animation-delay: .3s; }
@keyframes ptEsc { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.pt-tour-sys { align-self: center; background: #fff7d6; color: #422006; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; text-align: center; }
.pt-tour-ia { align-self: flex-end; max-width: 88%; background: linear-gradient(135deg, var(--ia-1), var(--ia-2)); color: #fff; padding: 9px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; }
.pt-tour-ia small { display: block; font-size: 11.5px; opacity: .85; margin-bottom: 3px; font-weight: 600; }
.pt-tour-ia-b { display: flex; gap: 6px; margin-top: 8px; }
.pt-tour-ia-b span { background: rgba(255,255,255,.2); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.pt-tour-ia-b span:first-child { background: #fff; color: #6d28d9; }
.pt-tour-card { align-self: stretch; background: #fff; color: #111827; border-radius: 12px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid #6d28d9; }
.pt-tour-qr { align-self: center; margin: 30px 0 10px; background: #fff; border-radius: 14px; padding: 18px 22px; text-align: center; color: #111827; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pt-tour-qr .bi { font-size: 110px; }
.pt-tour-entra { animation: ptEntra .35s ease-out; }
@keyframes ptEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pt-tour-txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 8px; }
.pt-tour-txt .pt-h1 { margin: 0; }
.pt-tour-puntos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.pt-tour-nota { margin: 0; font-size: 13px; color: var(--fg-3); }
.pt-tour-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.pt-tour-pie .pt-link { background: none; border: 0; display: inline-flex; gap: 6px; align-items: center; color: var(--accent) !important; font-weight: 600; }
.pt-tour-pie button:disabled { opacity: .4; cursor: default; }
.pt-tour-puntitos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pt-tour-puntitos button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--line); }
.pt-tour-puntitos button.on { background: var(--accent); width: 24px; border-radius: 6px; }
@media (max-width: 760px) {
  .pt-tour { padding: 0; place-items: stretch; }
  .pt-tour-caja { grid-template-columns: minmax(0,1fr); border-radius: 0; max-height: 100vh; padding: 16px; gap: 16px; }
  .pt-tour-movil { height: 360px; border-width: 6px; border-radius: 22px; }
  .pt-tour-qr .bi { font-size: 70px; }
}

/* ---------- Servicios con IA en «Tus servicios» (CEO, 13-oct-2026) ---------- */
.pt-servia-con { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ia-1), var(--ia-2)); padding: 2px 9px; border-radius: 999px; }
.pt-servia-con.pt-servia-auto { background: #0f766e; }   /* solo automatización, sin IA */
.pt-servia h3 .bi { color: var(--ia-1); }
.pt-servia-ia { margin: 0; font-size: 13.5px; color: #fff; background: linear-gradient(135deg, var(--ia-1), var(--ia-2)); padding: 10px 12px; border-radius: 10px; }
.pt-servia-extra { margin: 0; font-size: 13.5px; color: var(--fg-2); background: var(--surface-2); padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--ia-1); }
.pt-servia-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.pt-servia-pie [role=status] { font-size: 13.5px; color: var(--ok); font-weight: 600; }

/* ---------- Móvil y tableta (CEO, 13-oct-2026: «¿es responsive? no parece») ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .pt-app { grid-template-columns: 210px minmax(0,1fr); }
  .pt-search kbd { display: none; }
  .pt-search { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
@media (max-width: 760px) {
  /* Tablas → una ficha por fila: sin columnas escondidas a la derecha. */
  .pt-tbl-fichas thead { display: none; }
  .pt-tbl-fichas, .pt-tbl-fichas tbody, .pt-tbl-fichas tr, .pt-tbl-fichas td { display: block; width: 100%; }
  .pt-tbl-fichas tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .pt-tbl-fichas tr:last-child { border-bottom: 0; }
  .pt-tbl-fichas td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; white-space: normal; }
  .pt-tbl-fichas td[data-l] { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  .pt-tbl-fichas td[data-l]::before { content: attr(data-l); color: var(--fg-3); font-size: 13px; font-weight: 500; }
  .pt-tbl-fichas td:first-child { display: block; font-size: 15.5px; }
  .pt-tbl-fichas td:first-child::before { content: none; }
  .pt-tbl-fichas td:empty { display: none; }
  /* Cabecera de tarjeta: el estado baja debajo del título; la cinta no se come el título. */
  .pt-serv-h { flex-wrap: wrap; }
  .pt-con-cinta .pt-serv-h { padding-right: 56px; }
  .pt-cinta { top: 18px; right: -70px; font-size: 11px; }
  .pt-serv .pt-btn { width: 100%; justify-content: center; }
  /* El panel de WhatsApp a pantalla completa, por encima de la barra inferior. */
  .pt-marco { height: calc(100dvh - 150px); min-height: 460px; border-radius: 10px; }
}

/* ---------- Pantallas grandes (CEO, 13-oct-2026: «en 4K se queda en la mitad izquierda») ----------
   El contenido va centrado y crece con la pantalla; en 2K/4K las tarjetas se reparten en más columnas. */
.pt-content { margin: 0 auto; }
@media (min-width: 1700px) {
  .pt-content { max-width: 1560px; padding: 40px 48px; }
  .pt-top { padding-left: 48px; padding-right: 48px; }
  .pt-servicios { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 2300px) {
  .pt-app { grid-template-columns: 280px minmax(0,1fr); }
  .pt-content { max-width: 2000px; }
  body.pt { font-size: 16px; }
  .pt-servicios { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .pt-search { max-width: 640px; }
}
@media (min-width: 3000px) {
  .pt-content { max-width: 2900px; }
  body.pt { font-size: 17px; }
  .pt-app { grid-template-columns: 300px minmax(0,1fr); }
}

/* Servicio activo en verde pastel y su dedicación a la vista (CEO, 13-oct-2026). */
.pt-serv-activo { background: #ecfdf3; border-color: #86efac; }
.pt-serv-activo .pt-serv-gente { background: #ffffff; }
.pt-serv-jornada { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 14px; font-weight: 600; color: #14532d; }
.pt-serv-jornada + .pt-serv-meta { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-serv-activo { background: #10251a; border-color: #1f5135; }
  :root:not([data-theme="light"]) .pt-serv-activo .pt-serv-gente { background: var(--surface); }
  :root:not([data-theme="light"]) .pt-serv-jornada { color: #9fe3b8; } }
:root[data-theme="dark"] .pt-serv-activo { background: #10251a; border-color: #1f5135; }
:root[data-theme="dark"] .pt-serv-activo .pt-serv-gente { background: var(--surface); }
:root[data-theme="dark"] .pt-serv-jornada { color: #9fe3b8; }
/* La cinta dice «Sin coste hasta 31/12/2026» (CEO, 13-oct-2026): algo más larga, se ensancha. */
.pt-cinta { width: 270px; right: -72px; top: 32px; font-size: 10.5px; }
.pt-con-cinta .pt-serv-h { padding-right: 100px; }
@media (max-width: 760px) { .pt-cinta { top: 24px; right: -82px; } .pt-con-cinta .pt-serv-h { padding-right: 64px; } }
.pt-cinta { width: 280px; right: -58px; top: 50px; letter-spacing: .01em; }
.pt-con-cinta .pt-serv-h { padding-right: 116px; }
@media (max-width: 760px) { .pt-cinta { top: 50px; right: -58px; } .pt-con-cinta .pt-serv-h { padding-right: 96px; } }
.pt-servia-prueba { font-size: 13px; color: var(--fg-3); }
.pt-cinta { width: 260px; right: -66px; top: 40px; font-size: 10px; letter-spacing: 0; }
.pt-con-cinta > p { padding-right: 36px; }
@media (max-width: 760px) { .pt-cinta { top: 40px; right: -66px; } .pt-con-cinta > p { padding-right: 24px; } }
.pt-servia-ia .bi-stars { font-size: 15px; margin-right: 4px; vertical-align: -1px; color: #fde68a; }
.pt-wafn-amb { margin: 18px 0 4px; display: flex; align-items: center; gap: 8px; }
.pt-wafn-amb .bi { color: #15803d; }
.pt-wafn + .pt-wafn-amb { margin-top: 28px; }
/* Logo real (CEO, 13-oct-2026) en lugar del cuadrado con la «C». */
.pt-brand img { display: block; height: 28px; width: auto; max-width: 100%; }
.pt-mbrand img { display: block; height: 20px; width: auto; }

/* ---------- «Ver cómo funciona» de los servicios con IA (CEO, 13-oct-2026) ---------- */
.pt-servia-pie .pt-servia-prueba { flex-basis: 100%; }
.pt-guia-pant { border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; height: 460px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.12); }
.pt-guia-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #0f172a; color: #e2e8f0; font-size: 13px; }
.pt-guia-barra span { width: 10px; height: 10px; border-radius: 50%; background: #475569; }
.pt-guia-barra span:nth-child(1) { background: #f87171; } .pt-guia-barra span:nth-child(2) { background: #fbbf24; } .pt-guia-barra span:nth-child(3) { background: #4ade80; }
.pt-guia-barra b { margin-left: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-guia-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pt-guia-i { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: #1e293b; line-height: 1.4; }
.pt-guia-i .bi { font-size: 16px; flex: none; margin-top: 1px; }
.pt-guia-i.archivo .bi { color: #1d4ed8; }
.pt-guia-i.paso .bi { color: #6d28d9; }
.pt-guia-i.paso.corre .bi { animation: ptGira 1s linear infinite; }
.pt-guia-i.paso.hecho { border-color: #c4b5fd; }
.pt-guia-i.ok { border-left: 4px solid #16a34a; } .pt-guia-i.ok .bi { color: #16a34a; }
.pt-guia-i.aviso { border-left: 4px solid #d97706; } .pt-guia-i.aviso .bi { color: #d97706; }
.pt-guia-i.mal { border-left: 4px solid #dc2626; } .pt-guia-i.mal .bi { color: #dc2626; }
.pt-guia-i.dato { border-left: 4px solid #6d28d9; } .pt-guia-i.dato .bi { color: #6d28d9; }
@keyframes ptGira { to { transform: rotate(360deg); } }
.pt-guia-final { margin: auto 0; text-align: center; padding: 28px 20px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--ia-1), var(--ia-2)); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.pt-guia-final .bi { font-size: 42px; color: #fde68a; }
.pt-guia-final b { font-size: 18px; line-height: 1.35; }
.pt-guia-d { margin: 0; font-size: 15.5px; color: var(--fg-2); }
.pt-guia-gana { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pt-guia-gana li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.pt-guia-gana li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #dcfce7; color: #15803d; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.pt-guia .pt-tour-ia { align-self: flex-end; }
@media (max-width: 760px) { .pt-guia-pant { height: 320px; } }
/* Servicio activo: borde verde grueso para que destaque (CEO, 13-oct-2026). */
.pt-serv-activo { border: 3px solid #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.12), var(--shadow); }
:root[data-theme="dark"] .pt-serv-activo { border-color: #22c55e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-serv-activo { border-color: #22c55e; } }
.pt-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.pt-servia-soft { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 700; color: #1e3a8a; background: #dbeafe; padding: 2px 9px; border-radius: 999px; }
:root[data-theme="dark"] .pt-servia-soft { color: #bfdbfe; background: #1e3a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-servia-soft { color: #bfdbfe; background: #1e3a5f; } }
.pt-nota-ast { margin: 10px 0 0; font-size: 13px; color: var(--fg-3); }
.pt-servia-local { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 700; color: #065f46; background: #d1fae5; padding: 2px 9px; border-radius: 999px; }
:root[data-theme="dark"] .pt-servia-local { color: #a7f3d0; background: #064e3b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-servia-local { color: #a7f3d0; background: #064e3b; } }
/* Flecha para volver (CEO, 13-oct-2026) */
.pt-volver { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg) !important; font-weight: 600; font-size: 14px; flex: none; }
.pt-volver:hover { border-color: var(--accent); color: var(--accent) !important; }
.pt-volver .bi { font-size: 17px; }
@media (max-width: 760px) { .pt-volver { padding: 7px 10px; } .pt-volver span { display: none; } }

/* ---------- Checklist contable: la hoja del mes en versión agradable (CEO, 13-oct-2026) ---------- */
.ck-mes { display: flex; align-items: center; gap: 14px; align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px; }
.ck-mes b { font-family: var(--f-display); font-size: 18px; min-width: 150px; text-align: center; }
.ck-flecha { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--fg) !important; }
.ck-flecha:hover { background: var(--accent-soft); color: var(--accent) !important; }
.ck-flecha.off { opacity: .35; }
.ck-resumen { display: flex; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow); }
.ck-anillo { --p: 0; width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(#16a34a calc(var(--p) * 1%), var(--surface-2) 0); }
.ck-anillo span { font-family: var(--f-display); font-size: 30px; font-weight: 700; }
.ck-anillo small { font-size: 15px; margin-left: 1px; }
.ck-resumen-txt h2 { margin: 0; font-size: 18px; }
.ck-resumen-txt p { margin: 2px 0 12px; color: var(--fg-2); font-size: 14px; }
.ck-cuentas { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-f { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.ck-f b { color: var(--fg); }
.ck-f.ok .bi { color: #16a34a; } .ck-f.warn .bi { color: #d97706; } .ck-f.mute .bi { color: var(--fg-3); }
.ck-f.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ck-barra-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ck-buscar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; flex: 1; max-width: 380px; }
.ck-buscar input { border: 0; background: transparent; font: inherit; font-size: 14.5px; padding: 9px 0; width: 100%; color: var(--fg); outline: none; }
.ck-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--fg-2); }
.ck-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ck-lista { display: flex; flex-direction: column; gap: 8px; }
.ck-emp { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 12px; }
.ck-emp.revisado { border-left-color: #16a34a; } .ck-emp.en_proceso { border-left-color: #f59e0b; } .ck-emp.sin_iniciar { border-left-color: #cbd5e1; }
.ck-emp summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(130px, .8fr) minmax(0, 2fr) auto 18px; gap: 16px; align-items: center; padding: 12px 16px; }
.ck-emp summary::-webkit-details-marker { display: none; }
.ck-emp-nom { min-width: 0; } .ck-emp-nom b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-emp-nom small { color: var(--fg-3); font-size: 12.5px; }
.ck-emp-av { display: flex; align-items: center; gap: 10px; }
.ck-av { flex: 1; height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.ck-av span { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 99px; }
.ck-pct { font-size: 13px; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.ck-puntos { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ck-bl { display: inline-flex; gap: 3px; }
.ck-p { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--surface-2); border: 1px solid #cbd5e1; }
.ck-p.hecho { background: #16a34a; border-color: #16a34a; } .ck-p.en_curso { background: #f59e0b; border-color: #f59e0b; }
.ck-p.usted { background: #7c3aed; border-color: #7c3aed; } .ck-p.na { background: repeating-linear-gradient(45deg, #e2e8f0 0 2px, #f8fafc 2px 4px); border-color: #e2e8f0; }
.ck-chev { color: var(--fg-3); transition: transform .2s; }
.ck-emp[open] .ck-chev { transform: rotate(180deg); }
.ck-det { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.ck-det-res { margin: 10px 0; font-size: 13.5px; color: var(--fg-2); }
.ck-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ck-bloque { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.ck-bloque h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); }
.ck-bloque ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ck-bloque li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.ck-bloque li em { font-style: normal; font-size: 12px; color: var(--fg-3); }
.ck-bloque li.hecho .bi { color: #16a34a; } .ck-bloque li.en_curso .bi { color: #d97706; } .ck-bloque li.usted .bi { color: #7c3aed; }
.ck-bloque li.pendiente .bi, .ck-bloque li.na .bi { color: var(--fg-3); }
.ck-bloque li.hecho em { color: #15803d; font-weight: 600; } .ck-bloque li.en_curso em { color: #b45309; font-weight: 600; }
.ck-nada { color: var(--fg-3); text-align: center; }
@media (max-width: 1000px) { .ck-emp summary { grid-template-columns: minmax(0, 1fr) auto 18px; } .ck-emp-av, .ck-puntos { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ck-resumen { flex-direction: column; align-items: flex-start; } .ck-mes { align-self: stretch; justify-content: space-between; } }
/* Checklist: por mes o por trimestre (CEO, 13-oct-2026) */
.ck-nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ck-vista { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.ck-vista a { padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--fg-2) !important; }
.ck-vista a.on { background: var(--surface); color: var(--fg) !important; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.ck-trim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ck-tm { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 12.5px; }
.ck-tm em { font-style: normal; font-weight: 700; color: var(--fg-2); }
.ck-tm i { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; display: block; }
.ck-tm i span { display: block; height: 100%; background: #f59e0b; }
.ck-tm.revisado i span { background: #16a34a; }
.ck-tm b { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 34px; text-align: right; }
.ck-tm.futuro { opacity: .45; }
.ck-tabla-w { overflow-x: auto; margin-top: 10px; }
.ck-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ck-tabla th { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ck-tabla th:first-child { text-align: left; }
.ck-tabla td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.ck-tabla td:not(:first-child) { text-align: center; width: 90px; }
.ck-tabla .ck-p { width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; }
.ck-tabla-bl td { background: var(--surface-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); }
.ck-sr { position: absolute; left: -9999px; }

/* ---------- Ficha del encargo, versión cliente (CEO, 13-oct-2026) ---------- */
a.pt-job-a { color: inherit; border-radius: 10px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
a.pt-job-a:hover { background: var(--surface-2); }
.pt-job-ver { color: var(--accent); font-weight: 600; margin-left: 6px; white-space: nowrap; }
.enc-estado { display: flex; flex-direction: column; gap: 10px; }
.enc-estado-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.enc-estado-h .pt-chip { font-size: 14px; padding: 6px 14px; }
.enc-cuando { color: var(--fg-2); font-size: 14px; }
.enc-pasos-txt { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 12.5px; color: var(--fg-3); }
.enc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.enc-fechas, .enc-dias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.enc-fechas li, .enc-dias li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.enc-fechas li:first-child, .enc-dias li:first-child { border-top: 0; }
.enc-fechas .bi { color: var(--fg-3); }
.enc-fechas span, .enc-dias span { flex: 1; color: var(--fg-2); }
.enc-num b { font-family: var(--f-display); font-size: 34px; margin-right: 8px; }
.enc-num span { color: var(--fg-2); }
.enc-texto { white-space: normal; }
.enc-coms { display: flex; flex-direction: column; gap: 12px; }
.enc-com { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.enc-com small { color: var(--fg-3); }
.enc-com p { margin: 2px 0 0; font-size: 14.5px; }
/* Grupos del menú que se abren y se cierran (CEO, 13-oct-2026) */
details.pt-grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 8px; padding: 6px 8px; margin-left: 4px; margin-right: 4px; }
details.pt-grupo > summary::-webkit-details-marker { display: none; }
details.pt-grupo > summary:hover { background: rgba(255,255,255,.06); opacity: 1; }
details.pt-grupo > summary .bi { font-size: 12px; transition: transform .2s; }
details.pt-grupo:not([open]) > summary .bi { transform: rotate(-90deg); }
/* Botón secundario («Ver cómo funciona»…) en un gris algo más marcado (CEO, 13-oct-2026). */
.pt-btn.ghost { background: #e8ecf2; border-color: #c3ccd9; }
.pt-btn.ghost:hover { background: #dde3ec; filter: none; }
:root[data-theme="dark"] .pt-btn.ghost { background: #222d3f; border-color: #33415a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-btn.ghost { background: #222d3f; border-color: #33415a; } }
.pt-guia-i.logo .bi { font-size: 20px; width: 24px; text-align: center; }
/* «Tu servicio»: particularidades y radar (CEO, 13-oct-2026) */
.pa-lista { display: flex; flex-direction: column; }
.pa-it { padding: 12px 0; border-top: 1px solid var(--line); }
.pa-it:first-child { border-top: 0; padding-top: 0; }
.pa-it b { font-size: 14.5px; }
.pa-it p { margin: 4px 0 0; color: var(--fg-2); font-size: 14px; white-space: normal; }
.pa-grupo .pt-card-h h2 .bi { color: var(--fg-3); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.rd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rd-lista li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; font-size: 14px; }
.rd-lista .bi { color: #16a34a; margin-top: 2px; }
.rd-lista small { color: var(--fg-3); font-size: 12.5px; white-space: nowrap; }
.rd-pedido { font-style: normal; font-size: 11.5px; font-weight: 700; color: #6d28d9; background: #ede9fe; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
/* Inicio: como mucho 3 tarjetas de servicio por línea (CEO, 13-oct-2026). */
@media (min-width: 1300px) { .pt-servicios { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 2300px) { .pt-servicios { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Funciones del WhatsApp: tarjetas alineadas por filas (CEO, 13-oct-2026). Cada tarjeta comparte con las de su fila
   las 5 filas internas (cabecera, título, texto, IA, botón): la caja de IA empieza a la misma altura en todas. */
@supports (grid-template-rows: subgrid) {
  .pt-wafn-c { display: grid; grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
  .pt-wafn-c .pt-wafn-ia { align-self: start; }
  .pt-wafn-c .pt-wafn-acc { align-self: end; }
}
.pt-wafn-h { flex-wrap: wrap; min-width: 0; }
.pt-wafn-h .pt-chip { white-space: normal; max-width: 100%; }
/* Contratar otro contable (CEO, 13-oct-2026) */
/* «Contratar otro contable» llamativa (CEO, 16-oct-2026): degradado azul, icono que late y botón blanco. En «próximamente», gris. */
a.pc-card { position: relative; overflow: hidden; isolation: isolate; border: 0; background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #0ea5e9 100%); color: #fff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .35); align-items: flex-start; justify-content: flex-start; transition: transform .15s, box-shadow .15s; }   /* contenido arriba (CEO, 19-oct-2026) */
a.pc-card::before, a.pc-card::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); z-index: -1; pointer-events: none; }
a.pc-card::before { width: 220px; height: 220px; right: -70px; top: -90px; }
a.pc-card::after { width: 140px; height: 140px; right: 40px; bottom: -80px; background: rgba(255,255,255,.08); }
a.pc-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(37, 99, 235, .45); }
a.pc-card h3 { margin: 0; font-size: 20px; color: #fff; }
a.pc-card .pt-sub { color: #e0f2fe !important; font-size: 14.5px; }
a.pc-card .pt-btn.ghost { background: #fff; color: #1d4ed8; border-color: #fff; font-weight: 800; }
a.pc-card .pc-precio { align-self: flex-start; display: inline-block; line-height: 1.5; padding: 4px 12px !important; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; color: #fff; }
a.pc-card .pc-precio b { font-size: 16px; font-weight: 800; white-space: nowrap; }
a.pc-card:hover .pt-btn.ghost { background: #eff6ff; }
.pc-mas { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.18); color: #fff; font-size: 26px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: pc-mas-late 2.4s ease-out infinite; }
@keyframes pc-mas-late { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .pc-mas { animation: none; } }
/* próximamente: vuelve a la tarjeta discreta en gris */
a.pc-card.pt-pronto { background: var(--surface); color: inherit; box-shadow: none; border: 2px dashed #94a3b8; }
a.pc-card.pt-pronto::before, a.pc-card.pt-pronto::after { display: none; }
a.pc-card.pt-pronto h3 { color: inherit; } a.pc-card.pt-pronto .pt-sub { color: var(--fg-2) !important; }
a.pc-card.pt-pronto .pc-mas { background: var(--surface-2); color: var(--fg-3); animation: none; }
a.pc-card.pt-pronto .pt-btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.pc-form { display: flex; flex-direction: column; gap: 16px; }
.pc-opc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pc-o { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.pc-o input { margin-top: 3px; accent-color: var(--accent); }
.pc-o b { display: block; font-size: 14.5px; }
.pc-o small { color: var(--fg-2); font-size: 13px; }
.pc-o:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pc-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pc-campos label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.pc-campos .pc-ancho { grid-column: 1 / -1; }
.pc-campos input, .pc-campos textarea { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); color: var(--fg); }
.pc-campos small { font-weight: 400; color: var(--fg-3); font-size: 12.5px; }
.pc-pie { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pc-ok { display: flex; gap: 16px; align-items: flex-start; }
.pc-ok > .bi { font-size: 34px; color: #16a34a; }
.pc-ok h2 { margin: 0 0 4px; font-size: 19px; }
/* «Desactivar (DEMO)» discreto: tres puntos en la esquina inferior derecha (CEO, 13-oct-2026) */
.pt-serv { position: relative; }
.pt-demo-menu { position: absolute; right: 10px; bottom: 8px; z-index: 3; }
.pt-demo-menu > summary { list-style: none; cursor: pointer; width: 26px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--fg-3); font-size: 14px; opacity: .55; }
.pt-demo-menu > summary::-webkit-details-marker { display: none; }
.pt-demo-menu > summary:hover, .pt-demo-menu[open] > summary { opacity: 1; background: var(--surface-2); }
.pt-demo-menu .pt-desactivar { position: absolute; right: 0; bottom: 26px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 8px; padding: 7px 12px; font-size: 13px; box-shadow: var(--shadow); }
.pt-demo-menu .pt-desactivar:hover { background: var(--surface-2); }
/* «Quién te atiende» con sus vías (CEO, 13-oct-2026): correo junto al cargo, chat y videollamada a la derecha. */
.pt-person.con-acc { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.pt-person-acc { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pt-person-a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg) !important; white-space: nowrap; }
a.pt-person-a:hover { border-color: var(--accent); color: var(--accent) !important; }
.pt-person-a.off { color: var(--fg-3) !important; font-weight: 500; }
@media (max-width: 760px) { .pt-person.con-acc { grid-template-columns: auto minmax(0,1fr); } .pt-person-acc { grid-column: 1 / -1; justify-content: flex-start; } }
/* Funciones del WhatsApp: como mucho 4 por fila y adaptable (CEO, 14-oct-2026). */
.pt-wafn { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1400px) { .pt-wafn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .pt-wafn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pt-wafn { grid-template-columns: minmax(0, 1fr); } }
.pt-txt .pt-link, .pt-sub .pt-link { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Informes de tu equipo: calendario + ventana (CEO, 14-oct-2026) ---------- */
.inf-leyenda { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.inf-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow); }
.inf-dsem { font-size: 12px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 4px 0; }
.inf-dia { min-height: 104px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); min-width: 0; }
.inf-dia.vacio { border: 0; background: transparent; }
.inf-dia.finde { background: var(--surface-2); }
.inf-dia.futuro { opacity: .5; }
.inf-dia.sinserv { background: var(--surface-2); }
.inf-sinserv { font-size: 12px; color: var(--fg-3); line-height: 1.3; }   /* festivo o día fuera de jornada (16-oct-2026) */
.inf-dia.hoy { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.inf-num { font-size: 12.5px; font-weight: 700; color: var(--fg-2); }
.inf-chip { display: flex; align-items: center; gap: 5px; width: 100%; border: 0; border-radius: 7px; padding: 5px 7px; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; min-width: 0; }
.inf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inf-leyenda .inf-chip { width: auto; cursor: default; }
.inf-chip.plan { background: #fef3c7; color: #92400e; }
.inf-chip.hecho { background: #dcfce7; color: #14532d; }
.inf-chip.docs { background: #e0e7ff; color: #3730a3; }
button.inf-chip:hover { filter: brightness(.95); outline: 2px solid currentColor; outline-offset: -2px; }
.inf-caja { display: block; width: min(820px, 100%); }
.inf-cab { margin-bottom: 14px; padding-right: 40px; }
.inf-cab h2 { margin: 8px 0 2px; font-family: var(--f-display); font-size: 24px; }
.inf-cab p { margin: 0; color: var(--fg-2); font-size: 14px; }
.inf-tipo { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.inf-tipo.plan { background: #fef3c7; color: #92400e; } .inf-tipo.hecho { background: #dcfce7; color: #14532d; } .inf-tipo.docs { background: #e0e7ff; color: #3730a3; }
.inf-emp { margin-top: 14px; }
.inf-emp h3 { font-size: 15px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.inf-emp h3 .bi { color: var(--fg-3); }
.inf-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.inf-b { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.inf-b.pedido { background: #fff7ed; border: 1px solid #fed7aa; }
.inf-b h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; gap: 6px; align-items: center; }
.inf-b dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; }
.inf-b dt { color: var(--fg-3); }
.inf-b dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.inf-b ul { margin: 0; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.inf-adj { display: flex; flex-direction: column; gap: 6px; }
.inf-adj a { color: var(--accent) !important; font-weight: 600; font-size: 14px; }
@media (max-width: 760px) {
  .inf-cal { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .inf-dsem, .inf-dia.vacio, .inf-dia:not(:has(.inf-chip)) { display: none; }
  .inf-dia { min-height: 0; }
}
.inf-b dt.largo, .inf-b dd.largo { grid-column: 1 / -1; } .inf-b dd.largo { font-weight: 500; margin-bottom: 4px; }
/* Informe inicio cálido, informe fin azul (CEO, 14-oct-2026) */
.inf-chip.plan, .inf-tipo.plan { background: #ffedd5; color: #9a3412; }
.inf-chip.hecho, .inf-tipo.hecho { background: #dbeafe; color: #1e40af; }
.inf-chip.docs, .inf-tipo.docs { background: #ede9fe; color: #5b21b6; }
.inf-cal .inf-chip span { white-space: normal; line-height: 1.2; overflow: visible; }

/* ---------- Tu trabajo: hoy, 7 días y el ciclo contable (CEO, 14-oct-2026) ---------- */
.tr-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.tr-cifras { display: flex; gap: 28px; margin-bottom: 12px; }
.tr-cifras b { display: block; font-family: var(--f-display); font-size: 34px; line-height: 1; }
.tr-cifras span { color: var(--fg-2); font-size: 13.5px; }
.tr-lista { display: flex; flex-direction: column; }
.tr-li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); color: inherit; }
.tr-li:first-child { border-top: 0; }
.tr-li:hover b { color: var(--accent); }
.tr-li-t b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-li-t small { color: var(--fg-3); font-size: 12.5px; }
.tr-ok { color: #16a34a; font-size: 18px; }
.tr-vol { font-size: 12.5px; font-weight: 700; color: #1e40af; background: #dbeafe; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.tr-etapa { --c: #64748b; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-2); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.tr-etapa i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tr-barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 150px; margin: 6px 0 8px; }
.tr-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.tr-col { flex: 1; width: 100%; max-width: 38px; display: flex; flex-direction: column-reverse; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.tr-col .he { background: #16a34a; } .tr-col .av { background: #93c5fd; }
.tr-dia b { font-size: 12.5px; min-height: 16px; } .tr-dia small { color: var(--fg-3); font-size: 12px; font-weight: 600; }
.tr-dia.hoy small { color: var(--accent); }
.tr-ley { display: flex; gap: 14px; font-size: 12.5px; color: var(--fg-2); }
.tr-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tr-ley .he { background: #16a34a; } .tr-ley .av { background: #93c5fd; }
.tr-etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tr-et { --c: #64748b; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--c); color: inherit; background: var(--surface); }
.tr-et b { font-size: 13.5px; }
.tr-et span { font-size: 12.5px; color: var(--fg-2); }
.tr-et:hover { border-color: var(--c); }
.tr-et.on { background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-color: var(--c); }
.tr-et.vacio { opacity: .45; }
@media (max-width: 900px) { .tr-grid { grid-template-columns: minmax(0, 1fr); } }
/* Tu trabajo en tabla (CEO, 14-oct-2026) */
.et-bus { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.et-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.et-tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.et-tabla td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.et-tabla tbody tr { cursor: pointer; }
.et-tabla tbody tr:hover { background: var(--surface-2); }
.et-tit { color: var(--fg) !important; font-weight: 600; }
.et-tabla tbody tr:hover .et-tit { color: var(--accent) !important; }
.et-tabla td:nth-child(6) { white-space: nowrap; }
.et-tabla .pt-steps { min-width: 90px; }
.et-nada { color: var(--fg-3); text-align: center; }
.et-tabla { table-layout: auto; }
.et-tabla td:first-child { min-width: 220px; max-width: 360px; white-space: normal; }
.et-tabla td:nth-child(2) { max-width: 200px; white-space: normal; }
.et-tabla td:nth-child(3), .et-tabla td:nth-child(5) { white-space: nowrap; }

/* Onboarding completado: check verde a la derecha en el menú (14-oct-2026) */
.pt-nav a .pt-nav-ok { margin-left: auto; color: #16a34a; font-size: .95em; }
/* Estado («Servicio disponible / activo») ENCIMA del título (14-oct-2026): en la misma fila, la pastilla y la cinta
   dejaban al título sin ancho y lo partían letra a letra («Agent / e de / What / sApp…»). column-reverse: en el HTML
   sigue el título primero (es lo que se lee antes), en pantalla la pastilla va arriba. */
.pt-serv-h { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 10px; flex-wrap: nowrap; }
.pt-serv-h > div { width: 100%; }

/* Encargos potenciales (14-oct-2026) */
.pot-cita { display: block; margin-top: 4px; color: var(--fg-2); font-size: 13px; font-style: italic; line-height: 1.4; }
.pot-canal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--fg-2); }
.pot-tabla td:first-child { min-width: 260px; }

/* Lo que gana el cliente, primero en cada tarjeta de servicio con IA (14-oct-2026) */
.pt-servia-gana { margin: 4px 0 2px; }
.pt-servia-gana p { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--fg); }
.pt-servia-gana ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pt-servia-gana li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--fg); line-height: 1.35; }
.pt-servia-gana li i { color: var(--ok); margin-top: 2px; flex: none; }
/* Cinta «Sin coste hasta…» en NARANJA y con la letra más grande (CEO, 14-oct-2026). #c2410c con letra blanca = 5,2:1. */
.pt-cinta { background: linear-gradient(90deg, #c2410c, #cc4a0d, #c2410c); font-size: 13px; font-weight: 800; letter-spacing: .01em;
  width: 320px; right: -84px; top: 64px; padding: 7px 0; box-shadow: 0 3px 8px rgba(194,65,12,.35); }
.pt-con-cinta > p, .pt-con-cinta .pt-servia-gana { padding-right: 56px; }
.pt-con-cinta .pt-serv-h { padding-right: 130px; }
@media (max-width: 760px) { .pt-cinta { top: 60px; right: -88px; font-size: 12px; } .pt-con-cinta .pt-serv-h { padding-right: 110px; } }
/* Naranja más claro (CEO, 14-oct-2026). Con fondo claro la letra va oscura: blanco sobre #fb923c no llega a leerse bien. */
.pt-cinta { background: linear-gradient(90deg, #fb923c, #fdba74, #fb923c); color: #431407; box-shadow: 0 3px 8px rgba(251,146,60,.4); }
/* Tres cifras arriba en Inicio (14-oct-2026: los clientes van dentro de cada servicio) */
.pt-figs-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px) { .pt-figs-3 { grid-template-columns: 1fr; } }
.pt-figs-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 760px) { .pt-figs-2 { grid-template-columns: 1fr; } }
/* Cifra con algo pendiente o en mora: tarjeta en rojo suave (14-oct-2026) */
.pt-fig.pt-fig-mal { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.pt-fig.pt-fig-mal .k, .pt-fig.pt-fig-mal .n { color: var(--bad); }

/* Facturas: ponte al día y cómo pagar (14-oct-2026) */
.fp-caja.fp-mal { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.fp-caja h2 .bi, .pt-card h2 .bi-bank { margin-right: 6px; }
.fp-total { font-size: 17px; margin: 0 0 14px; } .fp-total b { font-size: 22px; } .fp-venc { color: var(--bad); font-weight: 700; }
.fp-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 20px; }
.fp-cols h3, .fp-ya h3 { font-size: 15px; margin: 0 0 8px; }
.fp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.fp-lista small { display: block; color: var(--fg-2); font-size: 12.5px; }
.fp-datos { display: grid; gap: 6px; }
.fp-dato { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.fp-dato span { color: var(--fg-2); font-size: 13px; } .fp-dato b { overflow-wrap: anywhere; } .fp-dato b.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.fp-copiar { border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fp-copiar:hover { border-color: var(--accent); } .fp-copiar.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.fp-nota { color: var(--fg-2); font-size: 13.5px; margin: 8px 0 0; }
.fp-ya { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.fp-form { display: grid; gap: 10px; } .fp-form fieldset { border: 0; padding: 0; margin: 0; }
.fp-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fp-checks label { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.fp-file { display: grid; gap: 4px; font-weight: 600; font-size: 14px; max-width: 560px; }
.fp-file input[type=text], .fp-file input[type=file] { font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); }
.fp-pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fp-ok { color: var(--ok); font-weight: 600; } .fp-err { color: var(--bad); font-weight: 600; }
@media (max-width: 860px) { .fp-cols { grid-template-columns: 1fr; } .fp-dato { grid-template-columns: 1fr auto; } .fp-dato span { grid-column: 1 / -1; } }
.fp-lista .num { white-space: nowrap; }

/* Personas del servicio: las vías DEBAJO del nombre, cargo y correo (14-oct-2026) */
.pt-person.con-acc { display: flex; align-items: flex-start; gap: 12px; }
.pt-person.con-acc .pt-person-t { min-width: 0; flex: 1; }
.pt-person.con-acc .pt-person-acc { justify-content: flex-start; margin-top: 10px; }
button.pt-person-a { cursor: pointer; font-family: inherit; }
button.pt-person-a:hover { border-color: var(--accent); color: var(--accent) !important; }
/* Ventana «Enviar correo» */
.pt-correo-caja { position: relative; background: var(--surface); color: var(--fg); border-radius: 16px; padding: 24px; width: min(560px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); display: grid; gap: 10px; }
.pt-correo-l { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.pt-correo-l input, .pt-correo-l textarea { font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); resize: vertical; }
.pt-correo-l input:focus, .pt-correo-l textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pt-correo-pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
button.pt-person-a { font-size: 13px; font-weight: 600; line-height: inherit; }

/* Notificaciones (14-oct-2026) */
.nt-srv h2 .bi { margin-right: 6px; }
.nt-tabla .nt-c { text-align: center; width: 150px; }
.nt-mail { display: block; color: var(--fg-2); font-size: 13px; overflow-wrap: anywhere; }
.nt-sw { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.nt-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.nt-sw span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; }
.nt-sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.nt-sw input:checked + span { background: #16a34a; }
.nt-sw input:checked + span::after { transform: translateX(20px); }
.nt-sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.nt-sw input:disabled + span { opacity: .55; }
.nt-anadir { margin-top: 14px; }
.nt-anadir summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.nt-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.nt-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.nt-form input[type=text], .nt-form input[type=email] { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); min-width: 220px; }
.nt-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nt-form .nt-chk { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.nt-msg { margin: 10px 0 0; min-height: 1.2em; }
@media (max-width: 760px) { .nt-tabla .nt-c { width: auto; text-align: right; } }
.nt-h3 { font-size: 15px; margin: 16px 0 6px; display: flex; gap: 8px; align-items: center; }
.nt-sub { margin: 0 0 10px; }
.nt-chat { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.nt-chat-i { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.nt-chat-i small { display: block; color: var(--fg-2); font-size: 13px; }
.nt-chat-i.off { background: var(--surface-2); }
/* Notificaciones en una sola tabla (14-oct-2026) */
.nt-canal { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.nt-canal.chat { background: #dcfce7; color: #166534; }
.nt-canal.correo { background: var(--info-soft); color: var(--info); }
.nt-fila-chat td { background: color-mix(in srgb, #dcfce7 35%, transparent); }
.nt-no { font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.nt-nada { color: var(--fg-2); font-size: 14px; }
@media (min-width: 761px) { .nt-tabla th:first-child, .nt-tabla td:first-child { width: 110px; } }

/* «Próximamente» del Control del portal (14-oct-2026): se ve en gris, como adelanto, sin poder usarse */
.pt-nav-pronto { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-weight: 500; color: rgba(255,255,255,.42); font-size: 14.5px; cursor: not-allowed; }
.pt-nav-pronto .bi { width: 18px; text-align: center; }
.pt-pronto-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 1px 7px; }
.pt-card.pt-pronto { background: var(--surface-2); }
.pt-card.pt-pronto > .pt-serv-h, .pt-card.pt-pronto > p, .pt-card.pt-pronto > ul, .pt-card.pt-pronto > div:not(.pt-servia-pie), .pt-card.pt-pronto .pt-servia-pie .pt-btn[disabled] { filter: grayscale(1); opacity: .72; }
.pt-guia-int { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pt-guia-int span { font-size: 14px; color: var(--fg-2); }
.pt-guia-int[hidden] { display: none; }
.pt-card.pt-pronto .pt-ver-guia, .pt-btn.pt-ver-guia { background: linear-gradient(135deg,#2563eb,#7c3aed); color: #fff !important; box-shadow: 0 4px 14px rgba(99,102,241,.35); }
.pt-card.pt-pronto .pt-servia-con { background: #94a3b8; }
.pt-card.pt-pronto [data-guia], .pt-card.pt-pronto a.pt-btn { filter: none; opacity: 1; }
a.pt-card.pt-pronto, div.pt-card.pt-pronto { pointer-events: auto; cursor: default; }

/* «Próximamente» = se entra y se ve por dentro, no se toca (14-oct-2026) */
a.pt-nav-pronto { text-decoration: none; cursor: pointer; }
a.pt-nav-pronto:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); }
a.pt-nav-pronto[aria-current="page"] { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.pt-pronto-franja { display: flex; gap: 12px; align-items: center; background: #475569; color: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.pt-pronto-franja .bi { font-size: 22px; }
.pt-pronto-franja b { display: block; font-size: 15px; } .pt-pronto-franja span { font-size: 14px; opacity: .92; }
.pt-solo-ver > :not(.pt-pronto-franja):not(.pt-pronto-toast):not(.pt-demo-datos):not(script) { filter: grayscale(.6); }
.pt-demo-datos { position: relative; z-index: 7; }
.pt-solo-ver input, .pt-solo-ver select, .pt-solo-ver textarea, .pt-solo-ver button:not([data-tour]):not([data-guia]) { cursor: not-allowed; }
.pt-pronto-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pt-marco-wrap { position: relative; }
.pt-marco-tapa { position: absolute; inset: 0; cursor: not-allowed; }
.pt-card.pt-pronto-abre { cursor: pointer; }
.pt-card.pt-pronto-abre:hover { opacity: .9; }

/* Checklist en cuadrícula, como el original pero sin recargar (14-oct-2026) */
.ck-grid-w { overflow: auto; max-height: calc(100vh - 220px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.ck-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13.5px; }
.ck-grid th, .ck-grid td { border-bottom: 1px solid var(--line); padding: 0; }
.ck-grid thead th { position: sticky; background: var(--surface); z-index: 2; color: var(--fg-2); font-weight: 700; }
.ck-g-bl th { top: 0; height: 34px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; text-align: center; padding: 0 6px; white-space: nowrap; border-left: 2px solid var(--surface); }
.ck-g-bl th span { display: block; overflow: hidden; text-overflow: ellipsis; }
.ck-g-pasos th { top: 34px; height: 150px; vertical-align: bottom; padding: 6px 0; width: 34px; min-width: 34px; }
.ck-g-pasos th span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 138px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 34px; }
.ck-grid .b0 { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ck-grid thead .b1, .ck-grid tbody .b1 { background: var(--surface); }
.ck-grid thead .b0 { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.ck-g-emp { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 8px 14px !important; min-width: 220px; max-width: 280px; border-right: 1px solid var(--line); }
thead .ck-g-emp { z-index: 3; vertical-align: bottom; font-size: 13px; }
.ck-g-emp b { display: block; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-g-emp small { color: var(--fg-3); font-weight: 400; font-size: 12px; }
.ck-grid td { text-align: center; height: 44px; }
.ck-c { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid #cbd5e1; font-style: normal; color: #fff; font-size: 13px; vertical-align: middle; }
.ck-c.hecho { background: #16a34a; border-color: #16a34a; } .ck-c.en_curso { background: #f59e0b; border-color: #f59e0b; }
.ck-c.usted { background: #7c3aed; border-color: #7c3aed; } .ck-c.na { background: #e2e8f0; border-color: #e2e8f0; color: #64748b; }
.ck-c .bi { line-height: 1; }
.ck-g-fila:hover td, .ck-g-fila:hover th { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.ck-g-fin { padding: 0 12px !important; white-space: nowrap; text-align: left !important; min-width: 120px; }
.ck-g-fin .ck-av { width: 80px; display: inline-block; vertical-align: middle; }
.ck-g-mes { min-width: 120px; padding: 0 12px !important; }
.ck-g-mb { display: inline-block; width: 80px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.ck-g-mb i { display: block; height: 100%; background: #16a34a; }
.ck-g-mb.en_proceso i { background: #f59e0b; } .ck-g-mb.futuro { opacity: .4; }
.ck-g-mes small { margin-left: 6px; color: var(--fg-2); }
.ck-sr { position: absolute; left: -9999px; }
/* Ajuste: columnas de paso fijas, nombre completo en vertical (dos líneas) y sin mayúsculas */
.ck-grid { table-layout: fixed; }
.ck-g-pasos th { width: 40px; min-width: 40px; max-width: 40px; height: 190px; }
.ck-g-pasos th span { white-space: normal; max-height: 180px; line-height: 1.15; font-size: 11.5px; text-transform: none; letter-spacing: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; }
.ck-g-bl th { max-width: 0; font-size: 11px; }
.ck-grid td { width: 40px; }
.ck-grid .ck-g-emp { width: 260px; } .ck-grid .ck-g-fin { width: 140px; } .ck-grid .ck-g-mes { width: 160px; }
.ck-g-emp b { text-transform: none; }
/* Marca de agua a 45° en «próximamente» (14-oct-2026): sobre todo el contenido, sin estorbar los clics */
.pt-solo-ver { position: relative; }
.pt-solo-ver::after { content: ""; position: absolute; inset: 0; background-image: var(--marca); background-repeat: repeat; pointer-events: none; z-index: 6; }
.ck-g-bl th { padding: 0 2px; font-size: 10.5px; letter-spacing: .02em; }
.ck-g-bl th { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* Inicio: borde algo más grueso en las tarjetas (CEO, 14-oct-2026). Las de servicio activo siguen con su verde de 3 px. */
.pt-fig, .pt-serv:not(.pt-serv-activo) { border-width: 2px; border-color: color-mix(in srgb, var(--line) 70%, #94a3b8); }
.pt-fig.pt-fig-mal { border-width: 2px; }
.pc-card { border-width: 2px; }

/* «Activar sin coste» se mueve para que se vea que de ahí se activa (CEO, 15-oct-2026: «más visible»): el botón crece y
   vuelve, dos ondas salen de él, un brillo lo cruza y el icono salta. Se para al pasar el ratón o con el foco; nada de
   esto con «reducir movimiento». */
.pt-btn.pt-activar{position:relative;overflow:visible;isolation:isolate;background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:transparent;color:#fff;
  font-weight:800;animation:pt-act-late 1.6s ease-in-out infinite}
.pt-btn.pt-activar::before,.pt-btn.pt-activar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.pt-btn.pt-activar::before{z-index:-1;animation:pt-act-onda 1.6s ease-out infinite}
.pt-btn.pt-activar::after{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;
  animation:pt-act-brillo 2.4s linear infinite;mix-blend-mode:overlay}
.pt-btn.pt-activar i{display:inline-block;animation:pt-act-salta 1.6s ease-in-out infinite}
.pt-btn.pt-activar:hover,.pt-btn.pt-activar:focus-visible{animation:none;transform:translateY(-2px) scale(1.04);box-shadow:0 8px 22px rgba(124,58,237,.45)}
.pt-btn.pt-activar:hover i,.pt-btn.pt-activar:focus-visible i,.pt-btn.pt-activar:hover::before{animation:none}
@keyframes pt-act-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes pt-act-onda{0%{box-shadow:0 0 0 0 rgba(124,58,237,.7),0 0 0 0 rgba(37,99,235,.5)}70%{box-shadow:0 0 0 14px rgba(124,58,237,0),0 0 0 26px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0),0 0 0 0 rgba(37,99,235,0)}}
@keyframes pt-act-brillo{0%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes pt-act-salta{0%,60%,100%{transform:none}70%{transform:translateY(-4px) rotate(-12deg) scale(1.3)}80%{transform:none}}
@media (prefers-reduced-motion:reduce){.pt-btn.pt-activar,.pt-btn.pt-activar::before,.pt-btn.pt-activar::after,.pt-btn.pt-activar i{animation:none}}
/* Contratar otro contable: funciones del Radar en chips (16-oct-2026) */
.pc-fgr { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); margin: 14px 0 8px; }
.pc-func { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-f { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; background: var(--surface); user-select: none; min-height: 38px; }
.pc-f input { position: absolute; opacity: 0; pointer-events: none; }
.pc-f i { display: none; }
.pc-f:hover { border-color: var(--accent); }
.pc-f:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-f:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pc-f:has(input:checked) i { display: inline; }
.pc-agenda { font-weight: 700; color: var(--accent); white-space: nowrap; }
/* Chat de WhatsApp: botón para abrirlo en su propia pestaña (16-oct-2026) */
.pt-wasep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #dcfce7; border: 1px solid #86efac; color: #14532d; font-size: 15px; }
.pt-wasep > .bi-whatsapp { font-size: 24px; color: #15803d; }
.pt-wasep > span { flex: 1 1 260px; }
.pt-wasep-btn { display: inline-flex; align-items: center; gap: 8px; background: #15803d; color: #fff !important; font-weight: 700; border-radius: 10px; padding: 10px 18px; text-decoration: none; white-space: nowrap; min-height: 44px; }
.pt-wasep-btn:hover { background: #166534; }
.pt-wasep-btn:focus-visible { outline: 3px solid #14532d; outline-offset: 2px; }
[data-theme="dark"] .pt-wasep { background: #052e16; border-color: #166534; color: #dcfce7; }
[data-theme="dark"] .pt-wasep > .bi-whatsapp { color: #4ade80; }
.pt-content:has(.pt-wasep) .pt-marco { height: calc(100vh - 225px); }
/* «IA local»: qué significa (16-oct-2026) */
.pt-servia-localtxt { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b; font-size: 13.5px; line-height: 1.45; }
.pt-servia-localtxt .bi { color: #047857; font-size: 16px; margin-top: 1px; }
:root[data-theme="dark"] .pt-servia-localtxt { background: #022c22; border-color: #065f46; color: #d1fae5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-servia-localtxt { background: #022c22; border-color: #065f46; color: #d1fae5; } }
/* ver.php: el marco toma el alto de su página, una sola barra de desplazamiento (16-oct-2026) */
.pt-marco.pt-marco-auto { height: 600px; min-height: 420px; overflow: hidden; }
/* Guía de la página la primera vez (16-oct-2026, includes/portal/guias-paginas.php) */
.pt-guia-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 18px; cursor: pointer; }
.pt-guia-btn[hidden] { display: none !important; }
.pt-guia-btn:hover { border-color: var(--accent); color: var(--accent); }
.pg-capa { position: fixed; inset: 0; z-index: 1200; }
.pg-capa[hidden] { display: none; }
.pg-luz { position: fixed; border-radius: 14px; box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 9999px rgba(15, 23, 42, .62); transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.pg-globo { position: fixed; width: 380px; background: var(--surface); color: var(--fg); border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); transition: left .25s, top .25s; }
.pg-n { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.pg-t { font-size: 19px; margin: 4px 0 6px; line-height: 1.25; }
.pg-x { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.pg-bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-sp { flex: 1; }
.pg-saltar { background: none; border: 0; color: var(--fg-2); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px 4px; min-height: 40px; }
.pg-bot .pt-btn { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .pg-luz, .pg-globo { transition: none; } }
/* «Soluciones a medida» en Inicio (16-oct-2026): la misma tarjeta llamativa que Contratar, en morado de IA */
a.pc-card.sol-card { background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #c026d3 100%); }
a.pc-card.sol-card:hover { box-shadow: 0 20px 40px rgba(109, 40, 217, .45); }
a.pc-card.sol-card .pt-btn.ghost { color: #6d28d9; }
.sol-card-l { margin: 0; padding-left: 18px; color: #f5f3ff; font-size: 14px; line-height: 1.5; }
/* Chat de WhatsApp sin línea conectada (16-oct-2026): rojo si no entra nada, ámbar si solo falla alguna. */
.pt-wasin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 14px 16px; border-radius: 12px; background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; font-size: 15px; }
.pt-wasin > .bi { font-size: 26px; color: #b91c1c; }
.pt-wasin > div { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.pt-wasin b { font-size: 16.5px; color: #7f1d1d; }
.pt-wasin-btn { display: inline-flex; align-items: center; gap: 8px; background: #b91c1c; color: #fff !important; font-weight: 700; border-radius: 10px; padding: 10px 18px; text-decoration: none; white-space: nowrap; min-height: 44px; }
.pt-wasin-btn:hover { background: #991b1b; }
.pt-wasin-btn:focus-visible { outline: 3px solid #7f1d1d; outline-offset: 2px; }
.pt-wasin.aviso { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.pt-wasin.aviso > .bi, .pt-wasin.aviso b { color: #92400e; }
.pt-wasin.aviso .pt-wasin-btn { background: #92400e; }
.pt-wasin.aviso .pt-wasin-btn:hover { background: #78350f; }
[data-theme="dark"] .pt-wasin { background: #450a0a; border-color: #991b1b; color: #fee2e2; }
[data-theme="dark"] .pt-wasin b, [data-theme="dark"] .pt-wasin > .bi { color: #fecaca; }
[data-theme="dark"] .pt-wasin.aviso { background: #451a03; border-color: #92400e; color: #fef3c7; }
[data-theme="dark"] .pt-wasin.aviso b, [data-theme="dark"] .pt-wasin.aviso > .bi { color: #fde68a; }
.pt-content:has(.pt-wasin) .pt-marco { height: calc(100vh - 320px); min-height: 420px; }
/* Demo de 3 días del WhatsApp (alta autoservicio, 16-oct-2026) */
.pt-demo-fr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #fef3c7; border: 1px solid #fcd34d; color: #78350f; font-size: 15px; }
.pt-demo-fr > .bi { font-size: 22px; color: #b45309; }
.pt-demo-fr > span { flex: 1 1 280px; }
.pt-content:has(.pt-demo-fr) .pt-marco { height: calc(100vh - 225px); }
/* Inicio de quien se acaba de registrar (alta autoservicio, 16-oct-2026) */
.pt-bienv { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, #6d28d9, #c026d3); color: #fff; font-size: 15.5px; line-height: 1.5; }
.pt-bienv > .bi { font-size: 26px; color: #fde68a; }
.pt-bienv > div { flex: 1 1 300px; }
.pt-bienv .pt-btn.ghost { background: #fff; color: #6d28d9; border-color: #fff; font-weight: 700; }
a.pt-oferta { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; }
a.pt-oferta:hover { border-color: var(--accent); }
a.pt-oferta h3 { margin: 0; font-size: 17px; }
a.pt-oferta:not(.pc-card) .pc-precio { background: var(--info-soft); color: var(--info); border-radius: 999px; padding: 3px 12px; font-size: 13.5px; }
/* Ofertas al prospecto en ficha de color (19-oct-2026): de la altura de la fila y el contenido arriba (centrado no gustó) */
a.pc-card.pt-oferta, a.pc-card.pt-arriba { justify-content: flex-start; }   /* pt-arriba: «Soluciones a medida» del prospecto, igual */
a.pc-card .pc-ver { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); cursor: pointer; }
a.pc-card .pc-ver:hover, a.pc-card .pc-ver:focus-visible { background: rgba(255,255,255,.26); }
a.pc-card.pc-tareas { background: linear-gradient(135deg, #0f766e 0%, #0d9488 45%, #06b6d4 100%); }
a.pc-card.pc-tareas:hover { box-shadow: 0 20px 40px rgba(13, 148, 136, .45); }
a.pc-card.pc-tareas .pt-sub { color: #ccfbf1 !important; }
a.pc-card .pt-btn.pt-cta { color: #1d4ed8 !important; font-weight: 800; }
a.pc-card.pc-tareas .pt-btn.pt-cta { color: #0f766e !important; }
a.pc-card.sol-card .pt-btn.pt-cta { color: #6d28d9 !important; }
/* Botón de las fichas de color (CEO, 19-oct-2026: «más llamativo y animado»): blanco, brillo que lo cruza y halo que late */
a.pc-card .pt-btn.pt-cta { position: relative; overflow: hidden; white-space: normal; text-align: left; font-size: 15.5px; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35); animation: pt-cta-latido 2.6s ease-out infinite; transition: transform .15s ease; }
a.pc-card .pt-btn.pt-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); mix-blend-mode: overlay; animation: pt-cta-brillo 3.2s ease-in-out infinite; }
a.pc-card .pt-cta-flecha { transition: transform .2s ease; }
a.pc-card:hover .pt-btn.pt-cta { transform: scale(1.04); }
a.pc-card:hover .pt-cta-flecha { transform: translateX(5px); }
@keyframes pt-cta-latido { 0% { box-shadow: 0 8px 20px -6px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.7); } 70%, 100% { box-shadow: 0 8px 20px -6px rgba(0,0,0,.35), 0 0 0 12px rgba(255,255,255,0); } }
@keyframes pt-cta-brillo { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { a.pc-card .pt-btn.pt-cta, a.pc-card .pt-btn.pt-cta::after { animation: none; } }

/* Servicio activo sin estrenar (18-oct-2026): «Conecta tu primera línea de WhatsApp ahora mismo» */
.pt-aviso-rojo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; font-weight: 700; font-size: 14px; text-decoration: none; }
.pt-aviso-rojo:hover { background: #fee2e2; }
.pt-aviso-rojo .bi-arrow-right { margin-left: auto; }

/* Aviso de datos de prueba en «Próximamente» (19-oct-2026) */
.pt-demo-datos { display: flex; gap: 12px; align-items: flex-start; background: #fef3c7; border: 2px dashed #d97706; color: #78350f; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.pt-demo-datos i { font-size: 24px; color: #d97706; line-height: 1; }
.pt-demo-datos b { display: block; font-size: 16px; } .pt-demo-datos span { font-size: 14px; }
/* Segundo botón (contable temporal) en la ficha de contratar (19-oct-2026): igual de visible, latido desfasado para que no vayan a la par */
a.pc-card .pt-btn.pt-cta.pt-cta2 { animation-delay: 1.3s; margin-top: -4px; }
a.pc-card .pt-btn.pt-cta.pt-cta2::after { animation-delay: 1.6s; }
a.pc-card:hover .pt-btn.pt-cta.pt-cta2 { transform: none; }
a.pc-card .pt-btn.pt-cta.pt-cta2:hover, a.pc-card .pt-btn.pt-cta.pt-cta2:focus-visible { transform: scale(1.04); }

/* «Últimos 30 días» en la tarjeta de un servicio activo (20-oct-2026, servicios-cifras.php) */
.pt-cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 2px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.pt-cifras-t { flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.pt-cifra { font-size: 14px; color: var(--fg); line-height: 1.3; }
.pt-cifra b { font-size: 19px; font-weight: 800; margin-right: 2px; font-variant-numeric: tabular-nums; }
.pt-cifras.vacio .pt-cifra { color: var(--fg-3); }

/* Al llegar desde un anuncio a su tarjeta de Inicio (#of-tareas, #ia-…; 21-oct-2026): que se vea cuál es */
.pt-oferta:target, .pt-servia:target { scroll-margin-top: 90px; box-shadow: 0 0 0 3px var(--accent); animation: pt-diana 1.6s ease-out 2; }
@keyframes pt-diana { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 3px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .pt-oferta:target, .pt-servia:target { animation: none; } }