/* Voice shared components (design/DESIGN-SYSTEM.md §8), v2.3. Every page loads tokens.css, then THIS file, then its
   own screen file (call.css, list.css, settings.css) with only what that screen has. A component lives here once:
   changing a button here changes it everywhere, in the app and in the mockups (they load the same files). */
*{box-sizing:border-box}
html,body{margin:0;background:var(--sand);color:var(--ink);font:var(--t-body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
ul{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}

/* icons: one Lucide sprite (icons.svg), stroke 2 everywhere; the size comes from where the icon sits */
.i{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i:not([width]){width:16px;height:16px}

/* shell: sidebar + one content width for every page */
.app{display:grid;grid-template-columns:80px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0;border-right:1px solid var(--line);background:var(--sand)}
.mark{width:40px;height:40px;border-radius:10px;background:var(--ink);display:grid;place-items:center;margin-bottom:14px;text-decoration:none}
.mark svg{width:22px;height:22px}
.rail a{width:66px;padding:9px 0 7px;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;gap:3px;font:var(--t-caption);color:var(--ink-2);text-decoration:none}
.rail a .i{width:21px;height:21px}
.rail a:hover{background:var(--sand-2)}
.rail a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.rail .bottom{margin-top:auto}
.main{padding:24px 32px 48px;min-width:0;width:100%;max-width:var(--page-max);margin:0 auto}
.crumbs{display:inline-flex;align-items:center;gap:4px;font:var(--t-label);color:var(--ink-2);margin-bottom:6px}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{color:var(--ink)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-bottom:16px}
.head .acts{margin-left:auto;display:flex;gap:8px}
h1{font:var(--t-page);letter-spacing:-.02em;margin:0}
.page-h{display:flex;align-items:flex-end;gap:12px;margin:4px 0 16px}
.meta{display:flex;flex-wrap:wrap;gap:2px 0;align-items:center;color:var(--ink-2);font:var(--t-secondary);margin-top:6px}
.meta .sep{color:var(--line-2);margin:0 7px}
.meta .kind{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}

/* tag = information, never a control: pale fill, no border (a white box with a border means "you can press it") */
.tag{display:inline-block;font:var(--t-caption);border-radius:5px;padding:2px 8px;background:var(--ty-neutral-bg);color:var(--ty-neutral);white-space:nowrap}
.t-neutral{background:var(--ty-neutral-bg);color:var(--ty-neutral)}.t-blue{background:var(--ty-blue-bg);color:var(--ty-blue)}.t-green{background:var(--ty-green-bg);color:var(--ty-green)}
.t-violet{background:var(--ty-violet-bg);color:var(--ty-violet)}.t-rose{background:var(--ty-rose-bg);color:var(--ty-rose)}.t-ochre{background:var(--ty-ochre-bg);color:var(--ty-ochre)}
.tag.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
/* "Empresa nueva": not a type but a pending action (classify it), so gold and dashed, and it is a link */
.newco{display:inline-flex;align-items:center;gap:4px;font:var(--t-caption);color:var(--gold-ink);border:1px dashed var(--gold-edge);border-radius:5px;padding:1px 7px;text-decoration:none;white-space:nowrap}
.newco:hover{background:var(--gold-soft)}
/* Medido / Inferido (phase 4): outlined, caption size, never colored */
.badge{font:var(--t-caption);color:var(--ink-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 7px;margin-left:auto}

/* buttons: one height for every control; gold = the one primary action of the screen */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r-sm);padding:7px 14px;font:var(--t-label);min-height:var(--control-h)}
.btn:hover{background:var(--tint)}
.btn.gold{background:var(--gold);border-color:var(--gold-edge);box-shadow:inset 0 -2px 0 var(--gold-edge)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.danger,.btn.danger-btn{background:var(--danger);border-color:var(--danger);color:var(--card)}
.btn[disabled]{opacity:.5;cursor:default}
.btn-ico{width:var(--control-h);justify-content:center;padding:0}
a.btn{color:var(--ink);text-decoration:none}   /* a link that looks like a button (e.g. "Conectar calendario") never shows link blue */
.linkbtn{font:var(--t-label);color:var(--ink-2);padding:2px 4px;border-radius:6px}
.linkbtn:hover{color:var(--ink);background:var(--tint)}
.linkbtn.danger{color:var(--danger)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card-h h2{font:var(--t-section);margin:0}
.card-h .count{font:var(--t-num);color:var(--ink-2)}
.card-h .sp{flex:1}
.ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;color:var(--ink-2)}
.ico .i{width:15px;height:15px}
.card-b{padding:14px 16px}
.notice{margin:0 0 16px;padding:12px 16px;border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold-ink);border-radius:var(--r-sm);font:var(--t-secondary)}
.empty{padding:32px 16px;text-align:center;color:var(--ink-2)}

/* controls */
.search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:0 10px;min-height:var(--control-h)}
.search .i{color:var(--ink-2)}
.search input{border:0;outline:0;font:var(--t-secondary);color:var(--ink);flex:1;background:transparent}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.seg button{padding:6px 12px;font:var(--t-label);color:var(--ink-2);border-left:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;min-height:calc(var(--control-h) - 2px)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.sw{position:relative;width:40px;height:24px;flex:none}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sw span{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .15s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--card);transition:transform .15s;box-shadow:var(--sh-knob)}
.sw input:checked+span{background:var(--ink)}
.sw input:checked+span::after{transform:translateX(16px)}
.sw input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.jump{display:inline-flex;align-items:center;gap:6px;font:var(--t-num);border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--card);white-space:nowrap;color:var(--ink-2)}
.jump .pl{font-size:9px;/* glyph, not text */color:var(--gold-edge)}
.jump:hover{border-color:var(--gold-edge);background:var(--gold-soft);color:var(--ink)}

/* feedback and overlays */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--card);font:var(--t-label);border-radius:var(--r-sm);padding:10px 16px;z-index:60;display:flex;align-items:center;gap:12px}
.toast button{color:var(--gold);font:var(--t-label);text-decoration:underline}
.scrim{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:50;padding:16px}
.dlg{width:100%;max-width:480px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-dlg)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.dlg-h h3{margin:0;font:var(--t-section)}
.dlg-h button{color:var(--ink-2);font-size:20px;/* × glyph */line-height:1;padding:2px 6px;border-radius:6px}
.dlg-b{padding:16px 18px;display:grid;gap:14px}
.dlg .lbl{font:var(--t-label);color:var(--ink)}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}

/* access (sign-in page) */
.gate{min-height:100vh;display:grid;place-items:center;padding:16px}
.gate-box{width:100%;max-width:340px;display:grid;justify-items:center;gap:16px;padding:32px 24px}
.gate-mark{width:48px;height:48px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.gate-mark svg{width:26px;height:26px}
.gate .err{font:var(--t-secondary);color:var(--danger);margin:0;text-align:center}
.btn.google{width:100%;justify-content:center;gap:10px;text-decoration:none;color:var(--ink)}

/* phones: the sidebar becomes a bottom bar (Llamadas · Ajustes · Salir) */
@media (max-width:640px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;justify-content:space-around;padding:6px;border-right:0;border-top:1px solid var(--line);z-index:30}
  .rail .mark{display:none}.rail .bottom{margin-top:0}
  .main{padding:12px 10px 90px}.head .acts{margin-left:0}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea{font-size:16px} /* iOS zooms into any input under 16px */
  .toast{bottom:84px}
}