/* KLC Notas · estilo de KLC Portal (KEY Language Consulting)
   Pantone 5503C #92B5B4 · 2336C #4D4D4C · 163C #F4A16F */
:root {
  --teal: #92B5B4;
  --teal-d: #6E9594;
  --teal-dd: #4F7271;
  --teal-s: #E7F0EF;
  --teal-xs: #F3F7F7;
  --grey: #4D4D4C;
  --ink: #3A3F3E;
  --side: #3E4443;
  --side-2: #485050;
  --muted: #7C8584;
  --line: #E1E9E8;
  --orange: #F4A16F;
  --orange-d: #E8834A;
  --orange-s: #FDEEE4;
  --white: #fff;
  --ok: #4E9A73;
  --ok-s: #E3F2EA;
  --err: #C8553D;
  --err-s: #F9E3DD;
  --r: 14px;
  --r-sm: 8px;
  --sh: 0 1px 2px rgba(58,63,62,.04), 0 6px 18px rgba(58,63,62,.05);
  --head: 'Lato', system-ui, sans-serif;
  --body: 'Montserrat', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--grey); background: var(--teal-xs); }
h1, h2, h3 { font-family: var(--head); color: var(--ink); margin: 0; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 900; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
h3 > i { color: var(--teal-d); font-size: 14px; }
a { color: var(--teal-dd); }
p { margin: 0; }
code { background: var(--teal-s); border-radius: 4px; padding: 1px 6px; font-size: .92em; }
.muted { color: var(--muted); }
.small, small { font-size: 12px; }
.ta-r { text-align: right; justify-content: flex-end; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: grid; gap: 18px; align-content: start; }

/* ---------- barra lateral ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 262px; background: var(--side); color: #DCE4E3; display: flex; flex-direction: column; z-index: 40; }
.sb-brand { display: flex; align-items: center; gap: 12px; padding: 16px 18px; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); }
.sb-mark { width: 42px; height: 42px; border-radius: 10px; }
.sb-brand span { font-family: var(--head); font-size: 21px; line-height: 1; color: var(--teal); font-weight: 400; }
.sb-brand b { color: #fff; font-weight: 900; }
.sb-brand small { display: block; font-family: var(--body); font-size: 9.5px; letter-spacing: .14em; color: #B8C4C3; margin-top: 5px; font-weight: 600; }
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.sb-section { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--teal); padding: 18px 10px 8px; }
.sb-link { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--r-sm); color: #E7EEED; text-decoration: none; font-weight: 500; position: relative; margin-bottom: 2px; }
.sb-link i { width: 18px; text-align: center; color: var(--teal); font-size: 15px; }
.sb-link:hover { background: rgba(255,255,255,.05); }
.sb-link.on { background: var(--side-2); color: #fff; font-weight: 700; }
.sb-link.on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--orange); }
.sb-link.on i { color: var(--orange); }
.sb-count { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--teal-d); color: #fff; }
.sb-count.orange { background: var(--orange); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.sb-user div { display: grid; min-width: 0; flex: 1; }
.sb-user b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user span { font-size: 11px; color: #AEBBBA; }
.sb-out { color: #AEBBBA; padding: 6px; border-radius: 6px; }
.sb-out:hover { color: #fff; background: rgba(255,255,255,.07); }
.sb-backdrop { display: none; }

.shell { margin-left: 262px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 64px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 28px; position: sticky; top: 0; z-index: 30; }
.burger { display: none; border: 0; background: none; font-size: 18px; color: var(--grey); cursor: pointer; padding: 6px; }
.crumbs { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs > span, .crumbs > a:last-child { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs i { font-size: 10px; color: #B5BFBE; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--teal-dd); background: var(--teal-xs); border: 1px solid var(--line); padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.role-pill i { color: var(--teal-d); }
.role-superadmin { color: #9a5a2e; background: var(--orange-s); border-color: #F7D9C5; }
.role-superadmin i { color: var(--orange-d); }
.page { padding: 26px 28px 50px; display: grid; gap: 18px; align-content: start; max-width: 1500px; width: 100%; }

/* ---------- piezas comunes ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.pad { padding: 20px 22px; display: grid; gap: 12px; align-content: start; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head p { margin-top: 4px; max-width: 720px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.two.wide-left { grid-template-columns: 1.4fr 1fr; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.btn { appearance: none; border: 0; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: 14px; border-radius: var(--r-sm); padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-d); }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 4px 12px rgba(244,161,111,.3); }
.btn-orange:hover { background: var(--orange-d); }
.btn-ghost { background: #fff; color: var(--teal-dd); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--teal); background: var(--teal-xs); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-icon { padding: 7px 10px; }
.icon-btn { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 5px 7px; border-radius: 6px; font-size: 13px; }
.icon-btn:hover { background: var(--teal-xs); color: var(--teal-dd); }
.icon-btn.danger:hover { color: var(--err); background: var(--err-s); }
.link-btn { border: 0; background: none; padding: 0; color: var(--teal-dd); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid #D7E1E0; border-radius: var(--r-sm); padding: 10px 12px; outline: none; }
select { padding-right: 30px; cursor: pointer; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-s); }
label { font-weight: 600; font-size: 13px; color: var(--ink); display: block; margin-bottom: 6px; }
input[type=checkbox] { accent-color: var(--teal-d); width: 16px; height: 16px; cursor: pointer; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; cursor: pointer; white-space: nowrap; }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.alert > i { margin-top: 3px; }
.alert-ok { background: var(--ok-s); color: #2f6a4b; }
.alert-warn { background: var(--orange-s); color: #8a4a22; }
.alert-err { background: var(--err-s); color: #8c2f1d; }
.alert.small { font-size: 13px; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.st-guardada { background: var(--orange-s); color: #b6602f; }
.st-transcribiendo, .st-analizando { background: var(--teal-s); color: var(--teal-dd); }
.st-transcrita { background: #EEF1F1; color: var(--grey); }
.st-lista { background: var(--ok-s); color: #2f6a4b; }
.st-error { background: var(--err-s); color: var(--err); }
.temp { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.temp.hot { background: var(--orange); color: #fff; }
.temp.warm { background: var(--orange-s); color: var(--orange-d); }
.temp.cold { background: var(--teal-s); color: var(--teal-dd); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--teal-dd); background: var(--teal-s); padding: 2px 9px; border-radius: 6px; }
.tag i { font-size: 10px; }
.chip { display: inline-block; font-size: 12px; background: var(--teal-s); color: var(--teal-dd); padding: 2px 9px; border-radius: 99px; font-weight: 600; }
.count { font-family: var(--body); font-size: 11px; font-weight: 700; background: var(--teal-s); color: var(--teal-dd); border-radius: 99px; padding: 1px 8px; }

.av { --av: var(--teal-d); width: 34px; height: 34px; border-radius: 50%; background: var(--av); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; letter-spacing: .02em; }
.av.sm { width: 28px; height: 28px; font-size: 10.5px; }
.av.xs { width: 22px; height: 22px; font-size: 9px; }
.av.lg { width: 54px; height: 54px; font-size: 18px; }
.av.more { background: #E4EAEA; color: var(--grey); }
.people-stack { display: flex; }
.people-stack .av, .c-people .av { border: 2px solid #fff; margin-left: -7px; }
.people-stack .av:first-child, .c-people .av:first-child { margin-left: 0; }

.empty { padding: 50px 24px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.empty-ico { width: 64px; height: 64px; border-radius: 16px; background: var(--teal-s); color: var(--teal-d); display: grid; place-items: center; font-size: 26px; flex: none; }
.empty p { max-width: 460px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--err); }

.copy-row { display: flex; gap: 8px; }
.copy-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.token-new input { border-color: var(--orange); background: var(--orange-s); }

/* ---------- cabecera oscura (como el dashboard del portal) ---------- */
.hero-dark { background: linear-gradient(120deg, #4D4D4C, #3A3F3E); color: #fff; border-radius: 16px; padding: 30px 34px; position: relative; overflow: hidden; }
.hero-dark h1 { color: #fff; font-size: 30px; margin: 14px 0 8px; }
.hero-dark p { color: #DCE3E2; max-width: 680px; font-size: 15px; }
.hero-dark p b { color: #fff; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--orange); border: 1px solid rgba(244,161,111,.55); background: rgba(244,161,111,.08); padding: 5px 14px; border-radius: 99px; }
.hd-ring { position: absolute; right: -40px; top: 50%; width: 200px; height: 200px; transform: translateY(-50%); border-radius: 50%; border: 28px solid rgba(255,255,255,.05); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpis-5 { grid-template-columns: repeat(5, 1fr); }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; box-shadow: var(--sh); min-width: 0; }
a.kpi:hover { border-color: var(--teal); }
.kpi > div { min-width: 0; flex: 1; }
.kpi small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.kpi b { font-family: var(--head); font-size: 22px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.kpi b em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--muted); font-family: var(--body); }
.kpi-ico { width: 46px; height: 46px; border-radius: 10px; background: var(--teal-s); color: var(--teal-d); display: grid; place-items: center; font-size: 18px; flex: none; }
.kpi-ico.orange { background: var(--orange-s); color: var(--orange-d); }
.kpi-ico.dark { background: #ECEEEE; color: var(--grey); }
.talk { display: block; height: 6px; background: #E7EDEC; border-radius: 99px; overflow: hidden; width: 70px; }
.talk i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.talk.lg { width: 100%; margin-top: 6px; }

/* ---------- filtros y listado ---------- */
.filters { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.filters select { width: auto; min-width: 150px; }
.search { position: relative; flex: 1; min-width: 220px; }
.search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.search input { padding-left: 36px !important; }

.mtable { display: grid; }
.mrow { display: grid; grid-template-columns: 78px minmax(0, 1fr) 128px 104px 130px 110px 82px; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.mtable .mrow:not(.mhead):hover { background: var(--teal-xs); }
.mhead { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: 10px; padding-bottom: 10px; background: #FAFCFC; }
.mrow:last-child { border-bottom: 0; }
.c-date { display: grid; justify-items: start; }
.c-date b { font-family: var(--head); font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; }
.c-date small { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10.5px; margin-top: 3px; }
.c-main { display: grid; gap: 4px; min-width: 0; }
.c-title { font-family: var(--head); font-weight: 700; font-size: 15.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; color: var(--muted); }
.c-sub i { font-size: 11px; }
.c-tasks { color: var(--orange-d); font-weight: 600; }
.c-summary { font-size: 12.5px; color: #6B7473; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-people { display: flex; }
.c-talk { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.c-talk .talk { width: 52px; }
.c-owner { display: flex; align-items: center; gap: 7px; }
.c-cost { font-weight: 600; font-size: 13px; }
/* sin columnas de propietario/coste */
.mtable:not(:has(.c-owner)) .mrow { grid-template-columns: 78px minmax(0, 1fr) 128px 104px 130px; }
.mtable:has(.c-owner):not(:has(.c-cost)) .mrow { grid-template-columns: 78px minmax(0, 1fr) 128px 104px 130px 110px; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }
.pager .muted { margin-right: auto; }
.pager a { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; text-decoration: none; color: var(--grey); font-weight: 600; }
.pager a.on { background: var(--teal); color: #fff; }

/* ---------- ficha de reunión ---------- */
.meeting { display: grid; gap: 18px; }
.m-head { padding: 22px 24px 20px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; position: relative; }
.m-head::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, var(--grey), var(--teal) 55%, var(--orange)); }
.m-head-main { min-width: 0; flex: 1; display: grid; gap: 10px; }
.m-title { font-size: 25px; outline: none; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }
.m-title:hover, .m-title:focus { background: var(--teal-xs); }
.m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--muted); font-size: 13px; }
.m-meta i { color: var(--teal-d); margin-right: 3px; }
.m-meta .owner { display: inline-flex; align-items: center; gap: 7px; }
.m-meta .cost { color: #9a5a2e; background: var(--orange-s); padding: 2px 10px; border-radius: 99px; font-weight: 600; }
.m-meta .cost i { color: var(--orange-d); }
.tag-edit { outline: none; cursor: text; min-width: 40px; }
.tag-edit:empty::before { content: attr(data-placeholder); color: var(--teal-d); opacity: .8; }
.tag-edit:focus { box-shadow: 0 0 0 2px var(--teal); }
.m-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(58,63,62,.14); padding: 6px; min-width: 250px; z-index: 20; display: grid; }
.menu-pop button, .menu-pop a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); border-radius: 8px; cursor: pointer; text-decoration: none; }
.menu-pop i { width: 16px; color: var(--teal-d); }
.menu-pop button:hover, .menu-pop a:hover { background: var(--teal-xs); }
.menu-pop .danger, .menu-pop .danger i { color: var(--err); }

.m-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 18px; align-items: start; }
.m-main { display: grid; gap: 18px; min-width: 0; }
.m-side { display: grid; gap: 18px; position: sticky; top: 82px; max-height: calc(100vh - 100px); overflow-y: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); padding: 11px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tabs button i { font-size: 12px; }
.tabs button.on { color: var(--teal-dd); border-bottom-color: var(--teal); }
.tab-panel { display: grid; gap: 18px; }
.lead { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.next-step { background: linear-gradient(120deg, #4D4D4C, #3A3F3E); color: #fff; border-radius: var(--r); padding: 18px 22px; display: grid; gap: 6px; position: relative; overflow: hidden; }
.next-step::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; border: 20px solid rgba(244,161,111,.35); }
.next-step span { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--orange); }
.next-step p { font-size: 15.5px; max-width: 88%; position: relative; z-index: 1; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.list li { padding-left: 20px; position: relative; }
.list li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.list.check li::before { background: var(--orange); }
.list.q li::before { content: '?'; width: auto; height: auto; background: none; top: 0; color: var(--orange-d); font-weight: 800; }
.model-line { text-align: right; }

.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.tasks li:last-child { border-bottom: 0; }
.tasks label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--grey); margin: 0; cursor: pointer; }
.tasks label input { margin-top: 3px; flex: none; }
.tasks li.done label > span { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.when { font-size: 12px; color: var(--grey); background: #EFF2F2; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.prio { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .05em; }
.p-alta { background: var(--orange); color: #fff; }
.p-media { background: var(--orange-s); color: var(--orange-d); }
.p-baja { background: var(--teal-s); color: var(--teal-dd); }
.src { color: var(--teal); font-size: 11px; padding: 0 4px; }
.task-form { display: grid; grid-template-columns: 2fr 1fr 1fr 110px auto; gap: 8px; background: var(--teal-xs); border-radius: 10px; padding: 10px; }

.moments { display: grid; gap: 12px; }
.moment { margin: 0; border-left: 3px solid var(--orange); background: #FFFAF6; border-radius: 0 10px 10px 0; padding: 12px 16px; display: grid; gap: 8px; }
.moment blockquote { margin: 0; font-family: var(--head); font-size: 15.5px; font-style: italic; color: var(--ink); }
.moment figcaption { font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seek, .ts { border: 0; background: var(--teal-s); color: var(--teal-dd); font: inherit; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seek i { font-size: 8px; }
.seek:hover, .ts:hover { background: var(--teal); color: #fff; }
.facts { display: grid; grid-template-columns: 140px 1fr; gap: 12px 18px; margin: 0; }
.facts dt { font-weight: 700; font-size: 12.5px; color: var(--teal-dd); }
.facts dd { margin: 0; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.who { display: flex; gap: 12px; }
.who > div { display: grid; gap: 1px; }
.email-body { background: var(--teal-xs); border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; padding: 16px 18px; line-height: 1.65; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table td .av { vertical-align: middle; margin-right: 6px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.dot-ok { background: var(--ok); }
.dot-err { background: var(--err); }

.analyze-card { gap: 14px; }
.analyze-head { display: flex; gap: 16px; align-items: center; }
.analyze-head p { margin-top: 4px; }
.progress-card h3 i { color: var(--orange); }
.steps { display: grid; gap: 10px; }
.step { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.step i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.step.done { color: var(--ink); }
.step.done i { background: var(--teal); border-color: var(--teal); }
.step.now { color: var(--ink); font-weight: 600; }
.step.now i { border-color: var(--teal-s); border-top-color: var(--orange); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tr-tools { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.transcript { padding: 6px 0; max-height: 72vh; overflow-y: auto; }
.seg { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 18px 10px 12px; border-left: 3px solid transparent; }
.seg:hover { background: var(--teal-xs); }
.seg.now { background: #FFF8F2; border-left-color: var(--orange); }
.seg .ts { justify-self: start; align-self: start; background: none; color: var(--muted); font-weight: 600; }
.who-name { font-weight: 700; font-size: 12.5px; color: var(--c); }
.seg p { margin-top: 2px; color: var(--ink); }
mark { background: #FCE3D1; color: inherit; border-radius: 3px; padding: 0 1px; }

/* lateral */
.player { display: flex; gap: 12px; align-items: center; }
.play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--teal); color: #fff; font-size: 15px; cursor: pointer; flex: none; display: grid; place-items: center; }
.play:hover { background: var(--teal-d); }
.pl-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.timeline { position: relative; height: 10px; background: #E5ECEB; border-radius: 99px; cursor: pointer; }
.tl-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--teal); border-radius: 99px; pointer-events: none; }
.tl-mark { position: absolute; top: -3px; width: 3px; height: 16px; background: var(--orange); border-radius: 2px; transform: translateX(-1px); pointer-events: none; }
.pl-times { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-times select { width: auto; padding: 1px 20px 1px 6px; font-size: 11px; border-radius: 6px; min-width: 0; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapter { display: flex; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--grey); }
.chapter:hover, .chapter.now { background: var(--teal-xs); }
.chapter.now .ch-time { background: var(--orange); color: #fff; }
.ch-time { font-size: 11px; font-weight: 700; background: var(--teal-s); color: var(--teal-dd); padding: 2px 7px; border-radius: 6px; height: fit-content; font-variant-numeric: tabular-nums; }
.chapter span:last-child { display: grid; gap: 2px; }
.chapter b { font-size: 13px; color: var(--ink); }
.chapter small { color: var(--muted); line-height: 1.4; }
.speakers { display: grid; gap: 12px; }
.speaker { display: grid; gap: 4px; }
.sp-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; }
.sp-name { font-weight: 700; color: var(--ink); }
.sp-pct { color: var(--muted); font-weight: 600; font-size: 12px; }
.sp-input { padding: 5px 8px !important; font-size: 13px !important; }
.sp-bar { height: 7px; background: #EEF2F2; border-radius: 99px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: var(--c); border-radius: 99px; }
.note-form { display: grid; gap: 8px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notes li { background: #FFFCF0; border: 1px solid #F3EBCB; border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px; }
.note-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; flex-wrap: wrap; }
.note-head b { color: var(--ink); }
.note-tools { margin-left: auto; display: flex; }
.note-body { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; }
.note-body:empty { display: none; }

/* ---------- tareas ---------- */
.seg-control { display: inline-flex; background: var(--teal-xs); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg-control a { padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--grey); font-weight: 600; font-size: 13px; }
.seg-control a.on { background: #fff; color: var(--teal-dd); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.task-board { list-style: none; margin: 0; padding: 0; }
.task-board li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.task-board li:last-child { border-bottom: 0; }
.tb-check { margin: 0; }
.tb-main { display: grid; gap: 4px; min-width: 0; }
.tb-text { color: var(--ink); font-weight: 500; }
.task-board li.done .tb-text { text-decoration: line-through; color: var(--muted); }
.tb-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); align-items: center; }
.tb-sub a { color: var(--teal-dd); text-decoration: none; font-weight: 600; }
.tb-side { display: flex; align-items: center; gap: 8px; }

/* ---------- usuarios ---------- */
.utable { display: grid; }
.urow { display: grid; grid-template-columns: minmax(0, 2fr) 170px 140px 120px 90px 110px 110px; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.urow:last-child { border-bottom: 0; }
.uhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: #FAFCFC; padding-top: 10px; padding-bottom: 10px; }
.u-person { display: flex; gap: 12px; align-items: center; min-width: 0; }
.u-person > span { display: grid; min-width: 0; }
.u-person b { color: var(--ink); }
.u-person small { overflow: hidden; text-overflow: ellipsis; }
.u-actions { display: flex; justify-content: flex-end; gap: 2px; }
.u-actions form { margin: 0; }
.state { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.state-on { background: var(--ok-s); color: #2f6a4b; }
.state-pending { background: var(--orange-s); color: #b6602f; }
.state-off { background: #EEF0F0; color: var(--muted); }
.roles-help p { margin-top: 8px; font-size: 13px; color: var(--muted); }
.modal { border: 0; border-radius: 16px; padding: 0; width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.modal::backdrop { background: rgba(40,46,45,.45); }
.modal-body { padding: 24px; display: grid; gap: 4px; border-top: 4px solid var(--teal); }
.modal-body h3 { margin-bottom: 6px; }
.modal-body label { margin-top: 10px; }
.modal-body .row { margin-top: 16px; }

/* ---------- cuenta / sistema ---------- */
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 16px; }
.steps-list li { display: grid; gap: 8px; }
.steps-list li::marker { font-weight: 700; color: var(--orange-d); }
.profile { display: flex; gap: 14px; align-items: center; }
.profile > div { display: grid; gap: 3px; justify-items: start; }
.profile b { font-family: var(--head); font-size: 17px; color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 190px; padding-top: 10px; }
.bar-col { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; gap: 4px; }
.bar-col .bar { width: 70%; max-width: 46px; background: linear-gradient(180deg, var(--teal), var(--teal-d)); border-radius: 6px 6px 2px 2px; align-self: end; }
.bar-col:last-child .bar { background: linear-gradient(180deg, var(--orange), var(--orange-d)); }
.bar-val { font-size: 11px; color: var(--muted); font-weight: 600; }
.bar-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.activity li { display: flex; gap: 10px; align-items: center; }
.activity li > span:not(.av) { flex: 1; min-width: 0; }
.activity li > small { white-space: nowrap; }
.activity small { margin-left: 4px; }

/* ---------- acceso (login) ---------- */
body.auth { min-height: 100vh; background: linear-gradient(135deg, #F4F8F8, #E6EFEE); display: grid; place-items: center; padding: 24px 16px; }
.auth-wrap { width: 100%; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 480px; background: #fff; border-radius: 20px; padding: 44px 48px 30px; box-shadow: 0 20px 60px rgba(58,63,62,.10); border: 1px solid var(--line); position: relative; overflow: hidden; display: grid; gap: 16px; }
.auth-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #4D4D4C, var(--teal) 55%, var(--orange)); }
.auth-mark { justify-self: center; }
.auth-mark img { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 8px 20px rgba(146,181,180,.35); }
.auth-title { font-family: var(--head); text-align: center; font-size: 32px; font-weight: 400; color: var(--teal-d); }
.auth-title b { color: var(--grey); font-weight: 900; }
.auth-sub { text-align: center; font-size: 13px; letter-spacing: .06em; color: var(--muted); margin-top: -10px; }
.auth-text { text-align: center; color: var(--grey); }
.auth-form { display: grid; gap: 4px; margin-top: 6px; }
.auth-form label { margin-top: 12px; }
.auth-form label i { color: var(--teal-d); margin-right: 6px; }
.auth-form input { background: #EEF4FA; border-color: #E0E9F2; padding: 13px 16px; }
.auth-form .btn { margin-top: 22px; padding: 14px; font-size: 16px; }
.auth-link { text-align: center; margin-top: 14px; font-size: 13px; color: var(--teal-dd); }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px; line-height: 1.7; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .m-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .kpis-5 { grid-template-columns: repeat(3, 1fr); }
  .mrow, .mtable:not(:has(.c-owner)) .mrow, .mtable:has(.c-owner):not(:has(.c-cost)) .mrow { grid-template-columns: 70px minmax(0, 1fr) 130px 104px 76px; }
  .hide-md { display: none !important; }
  .urow { grid-template-columns: minmax(0, 2fr) 170px 140px 110px; }
}
@media (max-width: 1024px) {
  .m-grid { display: flex; flex-direction: column; align-items: stretch; }
  .m-side { display: contents; }
  .m-side > .panel { order: 2; }
  .m-main { order: 1; }
  .m-side > .player-card { order: 0; position: sticky; top: 72px; z-index: 15; box-shadow: 0 8px 24px rgba(58,63,62,.12); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .two, .two.wide-left, .three { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.3); }
  .sb-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }
  .shell { margin-left: 0; }
  .burger { display: block; }
  .topbar { padding: 0 14px; }
  .page { padding: 16px 14px 40px; }
}
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .mrow, .mtable:not(:has(.c-owner)) .mrow, .mtable:has(.c-owner):not(:has(.c-cost)) .mrow { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .mhead { display: none; }
  .c-status { grid-column: 2; }
  .kpis, .kpis-5 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px; gap: 10px; }
  .kpi-ico { width: 36px; height: 36px; font-size: 15px; }
  .kpi b { font-size: 18px; }
  .hero-dark { padding: 22px; }
  .hero-dark h1 { font-size: 24px; }
  .m-head { padding: 16px; }
  .m-title { font-size: 21px; }
  .task-form { grid-template-columns: 1fr 1fr; }
  .task-form input[name=tarea] { grid-column: 1 / -1; }
  .tasks li { flex-direction: column; align-items: flex-start; }
  .facts { grid-template-columns: 1fr; gap: 4px; }
  .facts dd { margin-bottom: 10px; }
  .seg { grid-template-columns: 1fr; gap: 0; }
  .urow { grid-template-columns: minmax(0, 1fr) auto; }
  .urow > span:nth-child(2) { display: none; }
  .uhead { display: none; }
  .task-board li { grid-template-columns: 22px 1fr; }
  .tb-side { grid-column: 2; }
  .filters select { flex: 1; min-width: 130px; }
  .auth-card { padding: 36px 24px 24px; }
  .form-grid { grid-template-columns: 1fr; }
}