/* Skybridge CRM — misma identidad que la app Streamlit (navy + naranja, Inter, cards con acento a la izquierda). */
:root { --navy:#0F172A; --orange:#E8652A; --orange-dark:#C04E18; --text:#0F172A; --text2:#64748B; --border:#E2E8F0; --surface:#FFFFFF; --zone:#F1F5F9; --bg:#F8FAFC; --good:#16A34A; --danger:#DC2626; --warn:#D97706;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04); --side:250px; }
:root[data-theme="dark"] { --navy:#E2E8F0; --text:#E2E8F0; --text2:#94A3B8; --border:#334155; --surface:#1E293B; --zone:#0F172A; --bg:#0B1220; --shadow:0 1px 3px rgba(0,0,0,.4); }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:14px; line-height:1.45; }
a { color:var(--orange-dark); }
button, .btn { font-family:inherit; font-size:12.5px; font-weight:600; border-radius:8px; padding:8px 14px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:6px; justify-content:center; white-space:nowrap; }
button:hover, .btn:hover { border-color:var(--orange); }
button.primary, .btn.primary { background:var(--orange); border-color:var(--orange); color:#fff; } button.primary:hover { background:var(--orange-dark); }
button.danger { color:var(--danger); } button.danger:hover { border-color:var(--danger); }
button.icon { padding:6px 8px; font-size:14px; line-height:1; } button.sm { padding:5px 10px; font-size:11.5px; } button.wide { width:100%; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
input, select, textarea { width:100%; font-family:inherit; font-size:13.5px; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:var(--surface); }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--orange); }
textarea { min-height:70px; resize:vertical; }
label { display:block; font-size:11px; font-weight:600; color:var(--text2); margin:0 0 4px; }
.field { margin-bottom:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; } .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 14px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:14px 16px; }
.card.accent { border-left:4px solid var(--orange); }
.card + .card { margin-top:12px; }
.card h3 { margin:0 0 8px; font-size:14px; } .card .cap { color:var(--text2); font-size:12.5px; margin:0 0 10px; }
h2 { font-size:20px; margin:0 0 2px; } .sub { color:var(--text2); font-size:13px; margin:0 0 14px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .row.between { justify-content:space-between; } .grow { flex:1; min-width:0; }
.mut { color:var(--text2); font-size:12px; } .b { font-weight:700; } .num { font-variant-numeric:tabular-nums; }
.tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:3px 7px; border-radius:4px; white-space:nowrap; }
.pill { display:inline-block; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.vacio { padding:22px; text-align:center; color:var(--text2); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin:0 0 14px; flex-wrap:wrap; }
.tabs button { border:none; background:none; border-radius:0; padding:8px 12px; font-weight:600; color:var(--text2); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.on { color:var(--orange-dark); border-bottom-color:var(--orange); }
.pills { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.pills button { border-radius:999px; padding:6px 12px; font-size:12px; } .pills button.on { background:var(--orange); border-color:var(--orange); color:#fff; }
.filtros { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); align-items:end; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin-bottom:14px; }
.stat { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:8px; box-shadow:var(--shadow); padding:14px 16px; }
.stat .l { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text2); margin-bottom:6px; white-space:nowrap; } .stat .v { font-size:1.7rem; font-weight:800; line-height:1.2; }
.kanban { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); align-items:start; }
.zona { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; min-height:120px; }
.zona .zh { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 6px 8px; display:flex; justify-content:space-between; color:var(--text2); }
.zona .zh b { color:var(--text); }
.mini { background:var(--zone); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; font-size:12.5px; }
.mini .t { font-weight:700; font-size:13px; margin-bottom:2px; } .mini .l { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini button { margin-top:6px; }
.fila { display:grid; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); margin-bottom:8px; box-shadow:var(--shadow); border-left:4px solid var(--border); }
.fila .t { font-weight:700; font-size:14px; } .fila .acciones { display:flex; gap:4px; justify-content:flex-end; flex-wrap:wrap; }
.fila.hoverable { cursor:pointer; } .fila.hoverable:hover { border-color:var(--orange); }
.linkish { background:none; border:none; padding:0; color:var(--orange-dark); font-weight:600; cursor:pointer; font-size:13px; text-align:left; }
.linkish:hover { text-decoration:underline; }
.pag { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:12px; color:var(--text2); font-size:13px; }
.ev { border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin-bottom:6px; background:var(--surface); }
.ev .m { font-size:12px; color:var(--text2); } .ev p { margin:4px 0 0; white-space:pre-wrap; }
.bar { height:10px; background:var(--zone); border-radius:5px; overflow:hidden; } .bar span { display:block; height:100%; background:var(--orange); border-radius:5px; }
.hbar { display:grid; grid-template-columns:140px 1fr 60px; gap:8px; align-items:center; font-size:12.5px; margin:5px 0; } .hbar .n { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
table.simple { width:100%; border-collapse:collapse; font-size:13px; } table.simple th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); padding:6px 8px; border-bottom:1px solid var(--border); }
table.simple td { padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle; } table.simple td.n, table.simple th.n { text-align:right; font-variant-numeric:tabular-nums; }
.hdrficha { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.hdrficha .nombre { font-size:20px; font-weight:800; } .hdrficha .datos { font-size:12.5px; color:var(--text2); margin-top:2px; }
details.plegable > summary { cursor:pointer; font-weight:700; padding:6px 0; list-style:none; } details.plegable > summary::before { content:"▸ "; color:var(--text2); } details.plegable[open] > summary::before { content:"▾ "; }
.err { color:var(--danger); font-size:12.5px; min-height:18px; margin-top:8px; }
dialog { border:1px solid var(--border); border-radius:12px; padding:18px 20px; max-width:min(520px, 92vw); background:var(--surface); color:var(--text); box-shadow:0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background:rgba(15,23,42,.45); } dialog p { margin:0 0 14px; line-height:1.5; } dialog .acc { display:flex; gap:8px; justify-content:flex-end; }
/* layout */
.app { display:flex; min-height:100vh; }
aside { width:var(--side); flex:0 0 var(--side); background:var(--surface); border-right:1px solid var(--border); padding:18px 14px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; }
.logo { font-size:18px; font-weight:800; letter-spacing:.16em; padding:0 8px; } .logo span { color:var(--orange); } .tagline { font-size:10px; letter-spacing:.2em; color:var(--text2); padding:0 8px 14px; font-weight:700; }
.nav a { display:flex; gap:8px; align-items:center; padding:9px 10px; border-radius:8px; color:var(--text); text-decoration:none; font-weight:600; font-size:13.5px; border-left:3px solid transparent; }
.nav a:hover { background:var(--zone); } .nav a.on { background:var(--zone); border-left-color:var(--orange); }
.navdiv { border-top:1px solid var(--border); margin:8px 0; }
.cuenta { margin-top:auto; border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; gap:8px; align-items:center; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 30px; }
.cuenta .n { font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cuenta .r { font-size:10.5px; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; }
main { flex:1; min-width:0; padding:18px 22px 60px; }
#marco { width:100%; border:0; display:block; min-height:420px; }
#toast { position:fixed; right:18px; bottom:18px; background:#0F172A; color:#fff; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; max-width:min(440px,90vw); z-index:50; }
#toast.on { opacity:1; transform:none; }
.hamb { display:none; }
#v-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
#v-login .card { width:min(360px, 92vw); padding:24px; border-left:4px solid var(--orange); }
#v-login .logo { padding:0; margin-bottom:2px; } #v-login .tagline { padding:0 0 12px; }
.badge-beta { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--orange-dark); background:rgba(232,101,42,.13); border-radius:5px; padding:2px 6px; margin-left:6px; vertical-align:middle; }
@media (max-width: 900px) {
  aside { position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%); transition:transform .2s; } aside.open { transform:none; }
  .hamb { display:inline-flex; margin-bottom:10px; } main { padding:12px 14px 60px; }
  .grid2, .grid3, .grid4 { grid-template-columns:1fr; } .fila { grid-template-columns:1fr !important; }
}
#f-rapido input.grow { min-width:200px; }