:root {
  --navy: #1E233B; --navy-2: #2A3150; --green: #75A748; --green-d: #4E7A2C; --blue: #8CB9CA; --blue-d: #3C6E80;
  --bg: #F4F6F3; --card: #FFFFFF; --line: #DDE2E6; --line-2: #EDF0F2; --text: #1E233B; --muted: #5F6875;
  --red: #B42318; --red-bg: #FDECEA; --amber: #9A5B00; --amber-bg: #FFF4E0; --ok-bg: #EAF3E2; --dev-bg: #E6F0F4;
  --ink: #1E233B; --soft: #F4F6F8; --input: #FFFFFF;
  --radius: 8px; --font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue-d); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.boot { padding: 40px; color: var(--muted); }

/* layout */
.shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.side { background: var(--navy); color: #E8ECF0; display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; position: sticky; top: 0; height: 100vh; }
.side .brand { background: #fff; border-radius: 8px; padding: 6px; margin-bottom: 14px; }
.side .brand img { width: 100%; display: block; }
.side .proj { font-size: 12px; color: var(--blue); padding: 0 8px 10px; letter-spacing: .03em; }
.nav-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 6px; color: #E8ECF0; text-decoration: none; }
.nav-link:hover { background: var(--navy-2); }
.nav-link.active { background: var(--navy-2); box-shadow: inset 3px 0 0 var(--green); }
.badge { background: var(--green); color: var(--ink); font-weight: 700; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.side .spacer { flex: 1; }
.side .who { border-top: 1px solid var(--navy-2); padding: 12px 8px 0; font-size: 12px; color: #BFCBD6; }
.side .who b { color: #fff; display: block; font-size: 13px; }
.side .who button { background: none; border: none; color: var(--blue); padding: 6px 0 0; cursor: pointer; margin-right: 12px; }
main { padding: 22px 28px 40px; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* cards & grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; overflow-x: auto; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; border-top: 4px solid var(--blue); }
.kpi .v { font-size: 30px; font-weight: 700; line-height: 1.1; }
.kpi .l { color: var(--muted); font-size: 12px; margin-top: 4px; }
.kpi.bad { border-top-color: var(--red); } .kpi.bad .v { color: var(--red); }
.kpi.warn { border-top-color: #E0A030; } .kpi.good { border-top-color: var(--green); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* tables */
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.t tr.click { cursor: pointer; } .t tr.click:hover td { background: #F7F9FA; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); padding: 10px 0; font-size: 13px; }
.mono { font-family: Consolas, "SFMono-Regular", monospace; font-size: 12.5px; }

/* chips & bars */
.chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.m-ne { background: #EEF0F2; color: #59616B; }
.chip.m-bc { background: var(--red-bg); color: var(--red); }
.chip.m-ed { background: var(--dev-bg); color: var(--blue-d); }
.chip.m-ca { background: var(--ok-bg); color: var(--green-d); }
.chip.late { background: var(--red-bg); color: var(--red); }
.chip.soon { background: var(--amber-bg); color: var(--amber); }
.chip.gray { background: #EEF0F2; color: #59616B; }
.bar { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.bar .track { flex: 1; height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--green); }
.bar .pct { width: 38px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.warn-line { background: var(--amber-bg); color: var(--amber); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.err-line { background: var(--red-bg); color: var(--red); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.info-line { background: var(--dev-bg); color: var(--blue-d); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }

/* buttons & forms */
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #b9c1c8; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.danger { color: var(--red); }
.btn.small { padding: 4px 9px; font-size: 12.5px; }
.btn.link { border: none; background: none; color: var(--blue-d); padding: 2px 4px; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=url], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; background: var(--card); font-weight: 400; color: var(--text); min-width: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
textarea { resize: vertical; min-height: 60px; }
input:disabled, select:disabled, textarea:disabled { background: #F6F7F8; color: #4A5260; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.form-grid .span2 { grid-column: span 2; } .form-grid .span4 { grid-column: 1 / -1; }
@media (max-width: 1300px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }

/* tree */
.tree-wrap { display: grid; grid-template-columns: minmax(400px, 44%) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .tree-wrap { grid-template-columns: 1fr; } }
.tree-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tree-tools input[type=text] { flex: 1; min-width: 160px; }
.tree { max-height: calc(100vh - 210px); overflow: auto; border: 1px solid var(--line-2); border-radius: 6px; }
.tn { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.tn:hover { background: #F7F9FA; }
.tn.sel { background: #E9F1F5; box-shadow: inset 3px 0 0 var(--navy); }
.caret { flex: none; width: 18px; height: 18px; border: none; background: none; cursor: pointer; color: var(--muted); padding: 0; font-size: 11px; }
.tn .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn .code { color: var(--muted); margin-right: 6px; }
.tn .meta { display: flex; gap: 6px; align-items: center; }
.tn .mini { width: 46px; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.tn .mini i { display: block; height: 100%; background: var(--green); }
.tn .owner { font-size: 12px; color: var(--muted); width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.lvl-0 .name { font-weight: 700; } .lvl-1 .name { font-weight: 600; }
.detail { position: sticky; top: 16px; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.detail-title { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; }
.calc { display: flex; gap: 18px; flex-wrap: wrap; background: #F7F9FA; border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }
.calc b { display: block; font-size: 18px; }
.section { margin-top: 18px; }
.section > .card-head { margin-bottom: 8px; }
.asg { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 10px; }
.asg-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.asg-row .who { font-size: 12.5px; color: var(--muted); }
.asg-row.done .task { text-decoration: line-through; color: var(--muted); }
.inline-form { background: #F7F9FA; border: 1px solid var(--line-2); border-radius: 6px; padding: 10px; margin-top: 8px; display: grid; grid-template-columns: 1.2fr 1fr 1.6fr .9fr auto; gap: 8px; align-items: end; }
@media (max-width: 1400px) { .inline-form { grid-template-columns: 1fr 1fr; } }
.ev { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.hist { font-size: 12.5px; max-height: 260px; overflow: auto; }
.hist div { padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.hist .when { color: var(--muted); }
details.more > summary { cursor: pointer; color: var(--blue-d); font-size: 13px; margin-top: 12px; }

/* gates */
.gates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.gate { border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--card); position: relative; }
.gate .c { font-weight: 800; font-size: 16px; } .gate .n { font-size: 12.5px; margin: 2px 0 6px; min-height: 32px; }
.gate .d { font-size: 12px; color: var(--muted); }
.gate.next { border-color: var(--green); box-shadow: inset 0 3px 0 var(--green); }
@media (max-width: 1100px) { .gates { grid-template-columns: repeat(4, 1fr); } }

/* login & modal & toast */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--navy); padding: 20px; }
.login .box { background: var(--card); border-radius: 12px; padding: 28px; width: 100%; max-width: 400px; }
.login img { width: 100%; margin-bottom: 14px; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.modal-bg { position: fixed; inset: 0; background: rgba(20, 24, 40, .45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: var(--card); border-radius: 10px; padding: 20px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.modal h2 { margin-bottom: 12px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60; max-width: 90vw; }
#toast.show { opacity: 1; } #toast.err { background: var(--red); }
.notif { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.notif.unread .msg { font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 6px; }
.dot.off { background: transparent; }
.tag-temp { font-family: Consolas, monospace; background: var(--ok-bg); padding: 6px 10px; border-radius: 6px; font-size: 15px; user-select: all; }
[hidden] { display: none !important; }
.t .num { text-align: right; }
.demo-as { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; color: #BFCBD6; font-size: 12px; }
.demo-as select { background: var(--navy-2); color: #fff; border-color: #3A4366; }
.side .who #demo-reset { display: block; }
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { min-width: 0; } .demo-as select { width: 100%; min-width: 0; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .side .brand { width: 120px; margin: 0 8px 0 0; } .side .proj, .side .spacer { display: none; }
  .side .who { width: 100%; }
  main { padding-block: 16px 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .kpis { grid-template-columns: repeat(2, 1fr); } .gates { grid-template-columns: repeat(2, 1fr); }
  .card { overflow-x: auto; } .tree-wrap { grid-template-columns: 1fr; } .detail { position: static; }
  .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: auto; } .inline-form { grid-template-columns: 1fr; }
  .tn { grid-template-columns: auto 1fr auto; } .tn .owner { display: none; }
}

/* barra de edición del árbol */
.edit-bar { background: var(--soft); border: 1px solid #D6E4CC; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.edit-bar .eb-title { font-size: 12px; color: var(--green-d); font-weight: 700; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn { grid-template-columns: auto minmax(0, 1fr) auto auto 26px; }
.row-add { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--green-d); font-weight: 700; cursor: pointer; opacity: .55; padding: 0; line-height: 1; }
.tn:hover .row-add, .tn.sel .row-add, .row-add:focus-visible { opacity: 1; }
.row-add:hover { background: var(--green); color: #fff; border-color: var(--green); }
.calc.sched { background: #F4F8FA; }
.calc .sub { display: block; font-size: 12px; }

/* Gantt */
.gantt { overflow: auto; max-height: calc(100vh - 250px); position: relative; border-radius: var(--radius); }
.g-grid { display: grid; --gl: 340px; position: relative; }
.g-corner { grid-area: 1 / 1; position: sticky; top: 0; left: 0; z-index: 7; background: #F7F9FA; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 0 10px 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.g-head { grid-area: 1 / 2; position: sticky; top: 0; z-index: 5; background: #F7F9FA; border-bottom: 1px solid var(--line); overflow: hidden; }
.g-lefts { grid-area: 2 / 1; position: sticky; left: 0; z-index: 6; background: var(--card); border-right: 1px solid var(--line); }
.g-body { grid-area: 2 / 2; position: relative; overflow: hidden; }
.g-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.g-tick.major { border-left-color: #C9D1D9; }
.g-tick.minor { border-left: 1px dashed #EEF1F3; }
.g-head .g-tick span { position: absolute; bottom: 6px; left: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.g-head .g-tick.major span { color: var(--text); font-weight: 600; }
.g-gate { position: absolute; top: 2px; transform: translateX(-50%); }
.g-gate span { display: inline-block; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.g-stripe { position: absolute; left: 0; right: 0; height: 32px; background: var(--soft); }
.g-gline { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgba(30,35,59,.28); }
.g-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid #E0A030; z-index: 2; }
.g-row-bars { position: absolute; left: 0; right: 0; height: 32px; }
.g-plan { position: absolute; top: 22px; height: 4px; background: #B9CBD4; border-radius: 2px; }
.g-bar { position: absolute; top: 7px; height: 14px; background: var(--blue-d); border-radius: 3px; cursor: pointer; z-index: 3; }
.g-bar:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(60,110,128,.25); }
.g-bar.crit { background: #C0392B; }
.g-bar.done { background: var(--green); }
.g-slip { position: absolute; top: 22px; height: 4px; background: repeating-linear-gradient(45deg, #B42318 0 4px, #F3B7B1 4px 7px); border-radius: 2px; }
.g-sum { position: absolute; height: 10px; background: var(--navy); border-radius: 2px; cursor: pointer; z-index: 3; }
.g-sum::before, .g-sum::after { content: ""; position: absolute; bottom: -5px; border: 5px solid transparent; border-top-color: var(--navy); }
.g-sum::before { left: 0; border-left-color: var(--navy); } .g-sum::after { right: 0; border-right-color: var(--navy); }
.g-sum.crit { box-shadow: 0 0 0 2px #E8A49C; }
.g-arrows { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.g-arrows path { fill: none; stroke: #5F6875; stroke-width: 1.4; }
.g-arrows path.crit { stroke: #B42318; stroke-width: 1.8; }
.g-left { position: absolute; left: 0; right: 0; height: 32px; display: flex; align-items: center; gap: 6px; padding-right: 8px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line-2); background: var(--card); }
.g-left:hover { background: #F4F8FA; }
.g-left.crit .g-code { color: #B42318; font-weight: 700; }
.g-code { color: var(--muted); font-size: 12px; flex: none; }
.g-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.g-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 22px; height: 10px; border-radius: 2px; }
.lg.plan { height: 4px; background: #B9CBD4; } .lg.bar { background: var(--blue-d); } .lg.crit { background: #C0392B; }
.lg.slip { height: 4px; background: repeating-linear-gradient(45deg, #B42318 0 4px, #F3B7B1 4px 7px); } .lg.sum { height: 6px; background: var(--navy); }
.lg.arrow { height: 0; border-top: 2px solid #5F6875; width: 18px; border-radius: 0; } .lg.gate { width: 0; height: 14px; border-left: 2px dashed rgba(30,35,59,.5); border-radius: 0; }
.lg.today { width: 0; height: 14px; border-left: 2px solid #E0A030; border-radius: 0; }
@media (max-width: 820px) { .g-grid { --gl: 200px; } }

/* plan congelado, chat, costos, curvas */
.chip.lock { background: #E6E9F2; color: var(--ink); }
.chat { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.chat .msg { background: var(--soft); border-radius: 10px; padding: 8px 12px; max-width: 85%; align-self: flex-start; }
.chat .msg.mine { background: #EAF3E2; align-self: flex-end; }
.chat .msg .who { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.chat .msg .txt { white-space: pre-wrap; word-break: break-word; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; }
.chat-form textarea { flex: 1; min-height: 44px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.catrow { display: grid; grid-template-columns: 210px 1fr 110px; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.catrow:hover, .catrow.on { background: var(--soft); }
.catrow .ct { height: 10px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.catrow .ct i { display: block; height: 100%; background: #5E9A35; border-radius: 0 4px 4px 0; }
.catrow .cv { text-align: right; font-variant-numeric: tabular-nums; }
.chartbox { position: relative; }
.chartbox svg { width: 100%; height: auto; display: block; }
.chartbox .cg { stroke: #EDF0F2; stroke-width: 1; }
.chartbox .cax { stroke: #C9D1D9; stroke-width: 1; }
.chartbox .ct { fill: var(--muted); font-size: 11.5px; font-family: var(--font); }
.chartbox .cl { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chartbox .cl.plan { stroke: #8A94A3; stroke-dasharray: 6 5; }
.chartbox .cl.real { stroke: #5E9A35; }
.chartbox .cl.ev { stroke: #2F7EA3; }
.chartbox .cd { stroke: #fff; stroke-width: 2; }
.chartbox .cd.plan { fill: #8A94A3; } .chartbox .cd.real { fill: #5E9A35; } .chartbox .cd.ev { fill: #2F7EA3; }
.chartbox .ctoday { stroke: #E0A030; stroke-width: 1.5; stroke-dasharray: 3 3; }
.chartbox .ccross { stroke: #9AA3AE; stroke-width: 1; }
.ctip { position: absolute; top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(20,24,40,.12); pointer-events: none; min-width: 170px; }
.ctip div { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.clegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.clegend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.sw.plan { background: repeating-linear-gradient(90deg, #8A94A3 0 5px, transparent 5px 8px); } .sw.real { background: #5E9A35; } .sw.ev { background: #2F7EA3; }
@media (max-width: 820px) { .catrow { grid-template-columns: 1fr 90px; } .catrow .ct { display: none; } .grid-3 { grid-template-columns: 1fr; } }
/* campos que se ajustan al ancho del panel */
.form-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.form-grid > * { min-width: 0; }
.form-grid .span2 { grid-column: span 2; }
label.f > input, label.f > select, label.f > textarea { width: 100%; }
@media (max-width: 820px) { .form-grid .span2 { grid-column: auto; } }
.t .num { white-space: nowrap; }
.t td:first-child { white-space: nowrap; }

/* ---------- inicio: solo proyectos ---------- */
.home { min-height: 100vh; background: var(--bg, #F4F6F8); }
.home-in { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.home-top { background: var(--navy); color: #fff; }
.home-top .home-in { display: flex; align-items: center; gap: 18px; padding-block: 12px; flex-wrap: wrap; }
.home-logo { height: 76px; background: var(--card); border-radius: 8px; padding: 4px 8px; }
.home-title { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.home-title b { font-size: 17px; } .home-title span { color: var(--blue); font-size: 12.5px; letter-spacing: .03em; }
.home-who { display: flex; flex-direction: column; font-size: 12px; color: #BFCBD6; min-width: 0; }
.home-who b { color: #fff; font-size: 13px; }
.home-who button { background: none; border: none; color: var(--blue); padding: 4px 0 0; cursor: pointer; text-align: left; }
.home-who .demo-as select { max-width: 260px; }
.home-main { padding-block: 24px 40px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; background: var(--card); }
.seg button { border: none; background: none; padding: 8px 16px; font: inherit; cursor: pointer; color: var(--muted); }
.seg button span { font-variant-numeric: tabular-nums; margin-left: 4px; color: var(--muted); }
.seg button.on { background: var(--navy); color: #fff; } .seg button.on span { color: var(--blue); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pcard { text-align: left; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 3px 0 var(--green); min-width: 0; }
.pcard:hover { border-color: var(--blue-d); }
.pcard.cerrado { box-shadow: inset 0 3px 0 #9AA4AE; }
.pc-top { display: flex; gap: 8px; align-items: center; } .pc-top .mono { font-weight: 700; color: var(--blue-d); }
.pc-name { font-size: 18px; font-weight: 700; color: var(--ink); }
.pc-desc { color: var(--muted); font-size: 13px; }
.pc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.pc-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pc-facts dd { margin: 0; font-size: 13.5px; }
.pc-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.pc-foot .warn-t { color: #B4471F; font-weight: 600; }
.pc-closed { font-size: 12.5px; color: var(--muted); background: var(--soft); border-radius: 6px; padding: 6px 8px; }
/* dentro de un proyecto */
.side .back-link { color: var(--blue); font-size: 13px; padding: 2px 8px 10px; text-decoration: none; }
.side .back-link:hover { text-decoration: underline; }
.side .proj-card { background: var(--navy-2); border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.side .proj-card .mono { color: var(--blue); font-size: 12px; } .side .proj-card b { color: #fff; font-size: 14px; }
.side .proj-card .sub2 { font-size: 11.5px; color: #BFCBD6; } .side .proj-card .chip { align-self: flex-start; }
.side .brand.small { margin: 8px 0 10px; padding: 4px; }
.closed-banner { background: #EEF0F2; border: 1px solid #C9CFD5; color: #3E4954; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }

/* ---------- panel de la tarea ---------- */
.detail { max-height: calc(100vh - 32px); overflow-y: auto; }
.tp-nav { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.tp-nav a { color: var(--blue-d); text-decoration: none; } .tp-nav a:hover { text-decoration: underline; }
.tp-head { display: flex; align-items: center; gap: 10px; }
.tp-code { color: var(--muted); font-size: 15px; white-space: nowrap; }
.tp-title { flex: 1; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; color: var(--ink); border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent; }
.tp-title:hover:not(:disabled) { border-color: var(--line); } .tp-title:focus { border-color: var(--blue-d); outline: none; background: var(--card); }
.tp-title:disabled { color: var(--ink); }
.tp-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.tp-sec { border-top: 1px solid var(--line); padding: 12px 0; }
.tp-sec h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.tp-sec h3 .sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tp-sec textarea { width: 100%; box-sizing: border-box; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tp-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 8px; }
.tp-grid .f select, .tp-grid4 .f input, .tp-grid4 .f select, .tp-grid .f input { width: 100%; box-sizing: border-box; }
.people { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; font-weight: 400; }
.person { background: #E9F1F5; color: var(--ink); border-radius: 14px; padding: 3px 4px 3px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.person button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; }
.person button:hover { color: #B4471F; }
.pred-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pred-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.pred-row a { color: var(--text); text-decoration: none; flex: 1; min-width: 160px; } .pred-row a:hover { color: var(--blue-d); }
.pred-add { background: var(--soft); border: 1px dashed var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pred-add input[type=text] { width: 100%; box-sizing: border-box; }
.pred-add select { flex: 1; min-width: 0; max-width: 100%; }
.pred-add .lag { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.pred-add .lag input { width: 60px; }
.sub-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.sub-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; font-size: 13.5px; }
.sub-row + .sub-row { border-top: 1px solid var(--line-2); }
.sub-row:hover { background: var(--soft); } .sub-row .mono { color: var(--muted); font-size: 12.5px; }
.sub-row .sr-go { color: var(--muted); font-size: 18px; }
.sub-add { display: flex; gap: 8px; } .sub-add input { flex: 1; min-width: 0; }
.tp-more { margin: 0; border-top: 1px solid var(--line); padding: 10px 0; }
.tp-more summary { font-weight: 600; color: var(--ink); }
.tp-more-in { padding-top: 10px; }
@media (max-width: 1200px) { .detail { max-height: none; overflow: visible; } }
.root-add { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tn .name { white-space: normal; overflow: visible; line-height: 1.3; }
.tn .meta .chip { display: none; }   /* el estado se ve en el panel; el árbol deja espacio al nombre */
/* árbol solo y pantalla de actividad */
.tree-page { max-width: 1100px; }
.tree-page .tree { max-height: none; }
.crumbs { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; overflow-wrap: anywhere; }
.crumbs a { color: var(--blue-d); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--text); font-weight: 600; }
.task-page { position: static; max-height: none; overflow: visible; max-width: 1240px; padding: 18px 22px; }
.tp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 1100px) { .tp-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.tp-extra { margin-top: 6px; }
.task-page .chat { max-height: 360px; }
.tree-page .tn .meta .chip { display: inline-block; } .tree-page .tn .owner { width: 170px; }
/* avance y completada */
.pblock { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.pb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-num { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 150px; }
.pb-num b { font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-quick { display: flex; gap: 4px; }
.pb-quick .btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pb-bar { height: 10px; background: var(--line-2); border-radius: 5px; overflow: hidden; }
.pb-fill { display: block; height: 100%; background: var(--blue-d); border-radius: 5px; transition: width .15s; }
#prog-range { width: 100%; accent-color: var(--navy); margin: 0; }
.btn.ok { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.btn.ok:hover:not(:disabled) { filter: brightness(.95); }
.btn.ok:disabled { background: #C9D9BD; border-color: #C9D9BD; cursor: not-allowed; }
.pblock.done { background: #EEF6E8; border-color: #B9D7A2; }
.pb-head .pb-check, .done-check { display: inline-grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; }
.pb-head .pb-check { width: 34px; height: 34px; font-size: 18px; }
.pblock.done .pb-head > div { flex: 1; } .pblock.done b { color: #3F6E22; font-size: 16px; }
.done-check { width: 17px; height: 17px; font-size: 11px; margin-right: 6px; vertical-align: 1px; }
.tn.done { background: #F3F9EF; } .tn.done .mini i { background: var(--green); }
.sub-row.done { background: #F3F9EF; }
.sr-right { display: flex; align-items: center; gap: 8px; }
.sr-right .mini { width: 46px; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; } .sr-right .mini i { display: block; height: 100%; background: var(--blue-d); }
.sub-row.done .sr-right .mini i { background: var(--green); }
.chip.ok-c { background: #E3F0D9; color: #3F6E22; }
@media (max-width: 520px) { .sr-right .mini, .sr-right .sub { display: none; } }
#prog-range { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--blue-d) var(--v, 0%), var(--line-2) var(--v, 0%)); }
#prog-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--navy); cursor: pointer; }
#prog-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; cursor: pointer; }
/* validación */
.pblock.review { background: #FFF7E6; border-color: #EBCB8B; }
.pblock.review .pb-head > div:not(.row) { flex: 1; min-width: 200px; } .pblock.review b { color: #8A5A00; font-size: 16px; }
.pb-head .pb-check.rv { background: #E0A100; font-size: 15px; }
.rv-note { font-size: 13px; color: var(--text); margin-top: 4px; font-style: italic; }
.chip.rv-c { background: #FFF1D6; color: #8A5A00; }
.rv-card { border-color: #EBCB8B; box-shadow: inset 0 3px 0 #E0A100; }
/* riesgos */
.risk-top { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .risk-top { grid-template-columns: minmax(0, 1fr); } }
.heat { border-collapse: separate; border-spacing: 3px; }
.heat th { font-size: 11px; color: var(--muted); font-weight: 600; width: 18px; }
.heat td.hm { width: 54px; height: 40px; border-radius: 4px; text-align: center; font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.heat td.hm span { display: inline-block; background: rgba(255,255,255,.85); border-radius: 3px; padding: 0 3px; margin: 1px; color: var(--ink); }
.heat td.lo { background: #E3F0D9; } .heat td.mid { background: #FBE7B5; } .heat td.hi { background: #F4C2B5; }
.kpis3 { display: flex; gap: 12px; flex-wrap: wrap; }
.kpis3 > div { flex: 1; min-width: 120px; display: flex; flex-direction: column; } .kpis3 b { font-size: 28px; color: var(--ink); } .kpis3 span { color: var(--muted); font-size: 13px; }
/* gates */
.gate-list { display: flex; flex-direction: column; gap: 10px; }
.gate { padding: 0; } .gate summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.gate summary::-webkit-details-marker { display: none; }
.gate .gcode { font-weight: 700; color: var(--blue-d); width: 34px; } .gname { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gprog { display: flex; align-items: center; gap: 8px; } .gprog .mini { width: 80px; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; } .gprog .mini i { display: block; height: 100%; background: var(--green); }
.gate.ok { box-shadow: inset 4px 0 0 var(--green); }
.gate-in { padding: 0 16px 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.gitem { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.gitem input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--green); } .gitem.done > div:first-of-type { color: #3F6E22; }
/* carga */
.load th.wk { font-size: 11px; white-space: nowrap; text-align: center; }
.load td.wkc { text-align: center; font-weight: 600; background: rgba(30, 35, 59, var(--a)); color: var(--ink); min-width: 38px; }
.load td.wkc.over { background: #F4C2B5; color: #8E2A10; }
.tscroll { overflow-x: auto; max-width: 100%; }
.load td.wkc.dark { color: #fff; }
.imp-cols { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; } .imp-cols span { background: #E9F1F5; color: var(--ink); border-radius: 4px; padding: 3px 8px; font-size: 12.5px; }
.imp-sum { margin: 10px 0 6px; } .err-t { color: #B4471F; }
.imp-table { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
/* cuenta, registro y acuerdo */
.acct { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; padding: 8px; border-radius: 8px; margin: 2px 0 8px; }
.acct:hover { background: var(--navy-2); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.avatar.big { width: 64px; height: 64px; font-size: 24px; }
.acct-t { display: flex; flex-direction: column; min-width: 0; } .acct-t b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-t span { font-size: 11.5px; color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-top .acct { margin: 0; max-width: 260px; }
.back-l { display: inline-block; color: var(--blue-d); text-decoration: none; margin-bottom: 12px; font-size: 13.5px; } .back-l:hover { text-decoration: underline; }
.acct-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; } .acct-head h1 { margin: 0; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.kv { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.kv > span { color: var(--muted); font-size: 13px; } .kv b { font-weight: 600; overflow-wrap: anywhere; } .kv input { min-width: 0; flex: 1; }
@media (max-width: 520px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.onb { max-width: 900px; }
.legal { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--soft); margin-bottom: 12px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0 12px; } .check input { margin-top: 3px; accent-color: var(--green); }
.nda-sign { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.nda-pend { background: #FFF7E6; border: 1px solid #EBCB8B; color: #8A5A00; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.acct-grid > .card { margin: 0; } .acct-grid { margin-bottom: 16px; }
/* ---------- pantalla de la actividad (estilo tarjeta) ---------- */
.task-page { max-width: 820px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0 8px; }
.tk-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); background: var(--card); z-index: 3; border-radius: var(--radius) var(--radius) 0 0; }
.tk-back { color: var(--ink); text-decoration: none; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; }
.tk-back span { font-size: 13px; color: var(--muted); font-family: var(--mono, monospace); }
.tk-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.btn.tk-complete { border: 1px solid var(--line); background: var(--card); border-radius: 22px; padding: 8px 16px; font-weight: 600; color: var(--ink); }
.btn.tk-complete:hover:not(:disabled) { border-color: var(--green); color: #3F6E22; background: #F3F9EF; }
.btn.tk-complete:disabled { opacity: .5; cursor: not-allowed; }
.tk-state { border-radius: 22px; padding: 7px 14px; font-weight: 600; font-size: 14px; } .tk-state.ok { background: var(--green); color: #fff; } .tk-state.rv { background: #FFF1D6; color: #8A5A00; }
.tk-code { padding: 16px 18px 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-title { display: block; width: calc(100% - 24px); margin: 2px 12px 6px; font-size: 26px !important; }
.tk-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 6px 18px 4px; }
.tk-cell { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tk-cell .avatar { width: 44px; height: 44px; font-size: 15px; background: #7FCFB5; }
.tk-ico { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 18px; flex: none; }
.tk-ico.ok, .tk-ico.soon { border-color: var(--green); } .tk-ico.late { border-color: #D9694A; }
.tk-cv { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-lbl { font-size: 12.5px; color: var(--muted); }
.tk-cv select, .tk-cv input[type=date] { border: none; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); padding: 2px 0; max-width: 100%; }
.tk-cv select:disabled, .tk-cv input:disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--navy); }
.tk-cv input.soon, .tk-cv input.ok { color: #3F8A2A; -webkit-text-fill-color: #3F8A2A; } .tk-cv input.late { color: #B4471F; -webkit-text-fill-color: #B4471F; }
.tk-rel { font-size: 12px; } .tk-rel.late { color: #B4471F; } .tk-rel.soon { color: #3F8A2A; }
.tk-co { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 18px 4px; }
.tk-co .tk-lbl { margin-right: 4px; } .co-add { font-size: 13px; padding: 3px 6px; border-radius: 14px; }
.avatar.xs { width: 22px; height: 22px; font-size: 10px; margin-right: 6px; }
.person { padding-left: 3px; }
.task-page .pblock { margin: 10px 18px; }
.task-page .err-line { margin: 0 18px 8px; }
.tk-sec { border-top: 1px solid var(--line); padding: 14px 18px; }
.tk-sec h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); font-weight: 700; }
.acc > summary { list-style: none; cursor: pointer; } .acc > summary::-webkit-details-marker { display: none; }
.acc-add { border: 1px solid var(--line); border-radius: 22px; padding: 12px 16px; text-align: center; font-weight: 600; color: var(--ink); font-size: 15px; }
.acc-add:hover { background: var(--soft); }
.acc[open] > .acc-add { display: none; }
.acc-sum { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; color: var(--text); font-size: 14px; white-space: pre-wrap; position: relative; padding-right: 34px; }
.acc-sum::after { content: '⌄'; position: absolute; right: 14px; top: 8px; color: var(--muted); }
.acc[open] > .acc-sum { border-color: transparent; padding: 0 30px 8px 0; color: var(--muted); font-size: 13px; } .acc[open] > .acc-sum::after { content: '⌃'; top: -2px; right: 0; }
.acc-in { padding-top: 4px; } .acc-in textarea { width: 100%; box-sizing: border-box; }
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 8px; }
.qa .qa-name { grid-column: 1 / -1; } .qa .span-all { grid-column: 1 / -1; margin: 0; }
.qa input, .qa select { width: 100%; box-sizing: border-box; } .qa .opt { font-weight: 400; color: var(--muted); }
.qa-title { font-weight: 600; color: var(--ink); margin-top: 12px; }
.qa-wrap { margin-bottom: 12px; } .qa-wrap[open] { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.tk-comments h3 { display: inline; } .acc-c > summary { list-style: none; cursor: pointer; margin-bottom: 10px; } .acc-c > summary::-webkit-details-marker { display: none; }
.tk-comments .msg { display: flex; gap: 8px; align-items: flex-start; } .tk-comments .msg .avatar.xs { margin-top: 2px; }
.tk-composer { border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 2px 10px rgba(30,35,59,.06); margin-top: 8px; }
.tk-composer textarea { border: none; resize: vertical; }
@media (max-width: 520px) { .tk-title { font-size: 22px !important; } .tk-bar { padding: 10px 12px; } .tk-sec, .tk-people, .tk-co, .tk-code { padding-left: 12px; padding-right: 12px; } }
.tk-sec h3, .tk-comments h3 { text-transform: none; letter-spacing: 0; font-size: 18px; }
.tk-title { border-color: transparent !important; } .tk-title:focus { border-color: var(--blue-d) !important; }
/* menú ••• y hoja de opciones */
.btn.tk-dots { border: none; background: none; font-size: 18px; letter-spacing: 1px; padding: 6px 8px; color: var(--ink); line-height: 1; }
.btn.tk-dots:hover { background: var(--soft); border-radius: 8px; }
.tk-state.no { background: #F4C2B5; color: #8E2A10; }
.modal-bg.sheet-bg { align-items: flex-end; }
.modal-bg.sheet-bg .modal { width: min(560px, 100%); border-radius: 22px 22px 0 0; padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 85vh; overflow-y: auto; }
@media (min-width: 700px) { .modal-bg.sheet-bg { align-items: center; } .modal-bg.sheet-bg .modal { border-radius: 18px; } }
.sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #D5D9DE; margin: 0 auto 8px; }
.sheet-t { text-align: center; font-weight: 700; font-size: 17px; padding: 6px 0 10px; color: var(--ink); }
.sheet-g + .sheet-g { border-top: 8px solid #F1F3F5; }
.sheet-i { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: none; padding: 14px 22px; font: inherit; cursor: pointer; color: var(--text); }
.sheet-i + .sheet-i { border-top: 1px solid var(--line-2); }
.sheet-i:hover:not(:disabled) { background: var(--soft); } .sheet-i:disabled { opacity: .45; cursor: not-allowed; }
.sheet-i b { font-weight: 500; font-size: 16px; display: block; } .sheet-i .sub { display: block; font-size: 12.5px; }
.sheet-i.danger b, .sheet-i.danger .si-ico { color: #B4271F; }
.si-ico { width: 24px; text-align: center; font-size: 18px; color: var(--muted); flex: none; }
.sheet-x { display: block; margin: 10px auto 0; }
.kind { font-family: var(--font, inherit); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.kind.hito { background: #E9F1F5; color: var(--ink); } .kind.apr { background: #FFF1D6; color: #8A5A00; }
.kind-i { margin-right: 5px; color: var(--blue-d); }
.tk-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 6px; }
.tag { background: #EEF2F6; color: #3E4954; border-radius: 10px; padding: 2px 9px; font-size: 12px; font-weight: 500; } .tag.sm { font-size: 10.5px; padding: 1px 6px; vertical-align: 1px; }
.g-ms { position: absolute; top: 6px; width: 16px; height: 16px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; cursor: pointer; }
.g-ms.crit { background: #D9694A; } .g-ms.done { background: var(--green); }
/* mis tareas */
.view-btn { border-radius: 20px; font-weight: 600; }
.my-g { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.my-g > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-size: 16px; color: var(--ink); }
.my-g > summary::-webkit-details-marker { display: none; }
.my-g .tri { transition: transform .15s; color: var(--muted); } .my-g:not([open]) .tri { transform: rotate(-90deg); }
.my-g .cnt, .b-head .cnt { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.my-g.vencidas > summary b { color: #B4471F; } .my-g.validar > summary b { color: #8A5A00; }
.my-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line-2); cursor: pointer; }
.my-row:hover { background: var(--soft); }
.my-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #9AA4AE; display: grid; place-items: center; font-size: 12px; color: #fff; }
.my-check.ok { background: var(--green); border-color: var(--green); } .my-check.rv { border-color: #E0A100; font-size: 11px; }
.my-name { font-size: 15px; color: var(--text); overflow-wrap: anywhere; } .my-row.done .my-name { color: var(--muted); text-decoration: line-through; }
.due-chip { display: inline-block; border-radius: 6px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; background: #EEF2F6; color: #3E4954; white-space: nowrap; }
.due-chip.soon { background: #E3F0D9; color: #3F6E22; } .due-chip.late { background: #FBE1D9; color: #B4471F; }
.empty.sm { padding: 10px 16px; font-size: 13px; }
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.b-col { background: var(--soft); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.b-head { display: flex; align-items: center; padding: 2px 4px 4px; color: var(--ink); }
.b-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.b-card:hover { border-color: var(--blue-d); } .b-card b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .b-card.done b { color: var(--muted); }
.b-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.b-foot .mini { width: 50px; height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; } .b-foot .mini i { display: block; height: 100%; background: var(--blue-d); }
.b-alert { background: #FFF7E6; border: 1px solid #EBCB8B; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13.5px; }
@media (max-width: 700px) { .board { grid-template-columns: repeat(4, 78vw); scroll-snap-type: x mandatory; } .b-col { scroll-snap-align: start; } }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cal-head b { font-size: 17px; color: var(--ink); min-width: 150px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 660px; }
.c-h { font-size: 11.5px; color: var(--muted); text-align: center; padding: 6px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.c-day { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.c-day.out { background: var(--soft); } .c-n { font-size: 12px; color: var(--muted); } .c-day.today .c-n { background: var(--navy); color: #fff; border-radius: 10px; padding: 0 7px; align-self: flex-start; }
.c-ev { font-size: 11.5px; background: #E9F1F5; color: var(--ink); border-radius: 4px; padding: 2px 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-ev.late { background: #FBE1D9; color: #B4471F; } .c-ev.done { background: #E3F0D9; color: #3F6E22; text-decoration: line-through; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 4px; }
.tile { display: flex; flex-direction: column; gap: 2px; } .tile b { font-size: 30px; color: var(--ink); font-variant-numeric: tabular-nums; } .tile span { color: var(--muted); font-size: 13px; }
.tile.bad b { color: #B4471F; } .tile.warn b { color: #B07A00; }
.mychart { width: 100%; max-width: 640px; height: auto; } .mychart .ch-v { font-size: 12px; font-weight: 700; fill: var(--navy); } .mychart .ch-l { font-size: 10.5px; fill: var(--muted); }
.tn.ctx { cursor: default; background: var(--soft); } .tn.ctx .name { color: var(--muted); } .tn.ctx:hover { background: var(--soft); }
.pred-na { flex: 1; min-width: 160px; color: var(--muted); }
/* mi espacio personal */
.seg-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; text-decoration: none; color: var(--ink); font-weight: 600; border-left: 1px solid var(--line); }
.seg-link span { background: var(--green); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11.5px; }
.p-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .p-layout { grid-template-columns: minmax(0, 1fr); } }
.p-side { display: flex; flex-direction: column; gap: 2px; padding: 10px; margin: 0; }
.p-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14px; }
.p-nav:hover { background: var(--soft); } .p-nav.on { background: #E9F1F5; color: var(--ink); font-weight: 600; } .p-nav > span:first-child { width: 18px; text-align: center; }
.p-nav .cnt { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.p-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 10px 4px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; } .dot.big { width: 14px; height: 14px; margin-right: 10px; }
.p-side .sub-add { margin-top: 6px; } .p-side .sub-add input { width: 100%; }
.p-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 10px; margin-bottom: 12px; }
@media (max-width: 600px) { .p-add { grid-template-columns: 1fr 1fr; } .p-add [name=title] { grid-column: 1 / -1; } }
.p-group { padding: 0; overflow: hidden; } .p-gh { padding: 10px 16px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-2); } .p-gh .cnt { color: var(--muted); font-weight: 400; margin-left: 4px; }
.pt + .pt { border-top: 1px solid var(--line-2); }
.pt-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; }
.pt-row:hover { background: var(--soft); } .pt-main { cursor: pointer; min-width: 0; }
.pt button.my-check { cursor: pointer; background: var(--card); padding: 0; } .pt button.my-check:hover { border-color: var(--green); }
.pt.done .my-name { text-decoration: line-through; color: var(--muted); }
.pt-edit { background: var(--soft); padding: 12px 16px 14px 54px; border-top: 1px solid var(--line-2); }
@media (max-width: 600px) { .pt-edit { padding-left: 16px; } }
.pt-subs { margin-top: 10px; } .pt-subs .check { margin: 4px 0; align-items: center; } .st-done { text-decoration: line-through; color: var(--muted); }
.dot { flex: none; }
/* plataforma TFS */
.tfs-mark { display: inline-flex; flex-direction: column; align-items: flex-start; background: #fff; border-radius: 8px; padding: 6px 10px 6px; line-height: 1; }
.tfs-mark svg { display: block; width: 96px; height: auto; } .tfs-sub { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #1E233B; font-weight: 700; margin-top: 3px; }
.side .brand { display: block; } .side .brand .tfs-mark { width: 100%; box-sizing: border-box; align-items: center; padding: 12px; } .side .brand .tfs-mark svg { width: 120px; }
.home-logo-a { text-decoration: none; } .login-logo { display: flex; justify-content: center; margin-bottom: 12px; } .login-logo .tfs-mark { box-shadow: 0 0 0 1px var(--line); padding: 12px 16px; } .login-logo svg { width: 140px; }
.prog-logo { width: 100%; max-height: 64px; object-fit: contain; background: var(--card); border-radius: 6px; padding: 4px; margin-bottom: 6px; box-sizing: border-box; }
.pc-logo { height: 26px; border-radius: 4px; background: var(--card); border: 1px solid var(--line); padding: 1px 3px; }
.home-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .home-filters input[type=search] { max-width: 360px; }
.area-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.achip { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.achip span { color: var(--muted); margin-left: 2px; } .achip.on { background: var(--navy); color: #fff; border-color: var(--navy); } .achip.on span { color: var(--blue); }
.area-h { font-size: 15px; color: var(--ink); margin: 18px 0 10px; text-transform: uppercase; letter-spacing: .05em; } .area-h span { color: var(--muted); font-weight: 400; }
tr.inactive td { color: var(--muted); } tr.inactive td b { text-decoration: line-through; }
#admq { max-width: 280px; }
input[type=search] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); box-sizing: border-box; width: 100%; }
td select { font-size: 13px; padding: 4px 6px; }
.tfs-mark { padding: 6px 10px; } .tfs-mark img { display: block; height: 40px; width: auto; }
.side .brand .tfs-mark img { width: 100%; height: auto; max-width: 180px; margin: 0 auto; }
.login-logo .tfs-mark img { height: 64px; }
.home-top .tfs-mark img { height: 52px; }
/* buscador de personas */
.pp { position: relative; } .pp-q { width: 100%; box-sizing: border-box; }
.pp-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(30,35,59,.15); max-height: 280px; overflow-y: auto; }
.pp-i { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; cursor: pointer; font: inherit; }
.pp-i:hover { background: var(--soft); } .pp-i b { display: block; font-weight: 600; font-size: 14px; } .pp-i .sub { display: block; font-size: 12px; }
.tk-person { border: none; background: none; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); padding: 2px 0; text-align: left; cursor: pointer; }
.tk-person:hover:not(:disabled) { text-decoration: underline; } .tk-person:disabled { cursor: default; }
.preview-hint { margin-top: 14px; background: #FFF7E6; border: 1px solid #EBCB8B; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #6B4A00; text-align: left; }
.demo-tag { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #EBCB8B; margin-bottom: 4px; }
.reg-box { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; } .reg-box .btn { width: 100%; }
.pp-i.invite { border-top: 1px solid var(--line-2); } .pp-i.invite b { color: #3F6E22; }
.mail { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; } .mail-s { font-weight: 700; color: var(--ink); margin: 4px 0; }
.mail-b { white-space: pre-wrap; font-family: inherit; font-size: 13px; margin: 0; color: var(--text); }
.conf-b { display: inline-flex; align-items: center; gap: 3px; background: #1E233B; color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.conf-b.cside { background: #8CB9CA; color: #1E233B; align-self: flex-start; margin-top: 4px; }
.conf-pick { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .conf-pick .check { margin: 4px 0; }

/* ---------- modo nocturno ---------- */
:root[data-theme="dark"] {
  --bg: #10131C; --card: #191D2A; --line: #2D3446; --line-2: #232838; --text: #E3E8EF; --muted: #98A3B3; --ink: #E9EEF5; --soft: #202536; --input: #141826;
  --blue-d: #8CB9CA; --navy-2: #2A3150; --red-bg: #3A1F1F; --amber-bg: #3A2F17; --ok-bg: #1F3020; --dev-bg: #1C2D36; color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--input); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .side .brand, :root[data-theme="dark"] .tfs-mark, :root[data-theme="dark"] .prog-logo, :root[data-theme="dark"] .pc-logo { background: #fff; }
:root[data-theme="dark"] .btn { background: var(--soft); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .btn.primary { background: #3C4A7A; border-color: #3C4A7A; color: #fff; }
:root[data-theme="dark"] .btn.ok { background: var(--green); border-color: var(--green); color: #fff; }
:root[data-theme="dark"] .btn.danger { color: #FF9A85; }
:root[data-theme="dark"] .modal { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .login .box { background: var(--card); }
:root[data-theme="dark"] .chip, :root[data-theme="dark"] .due-chip { filter: saturate(.9) brightness(.92); }
:root[data-theme="dark"] .legal { background: var(--input); }
:root[data-theme="dark"] .tn:hover, :root[data-theme="dark"] .sub-row:hover, :root[data-theme="dark"] .my-row:hover, :root[data-theme="dark"] .pt-row:hover { background: var(--soft); }
:root[data-theme="dark"] .tn.sel { background: #24304A; }
:root[data-theme="dark"] .tn.done, :root[data-theme="dark"] .sub-row.done { background: #1C2A1E; }
:root[data-theme="dark"] .pblock.done { background: #1C2A1E; border-color: #3E5E2A; } :root[data-theme="dark"] .pblock.done b { color: #A9D58A; }
:root[data-theme="dark"] .pblock.review, :root[data-theme="dark"] .preview-hint, :root[data-theme="dark"] .nda-pend, :root[data-theme="dark"] .b-alert { background: #33290F; border-color: #6B5520; color: #F1D9A0; }
:root[data-theme="dark"] .warn-line { background: var(--amber-bg); color: #F1D9A0; } :root[data-theme="dark"] .err-line { background: var(--red-bg); color: #FFB4A6; }
:root[data-theme="dark"] .info-line { background: var(--dev-bg); color: var(--text); }
:root[data-theme="dark"] .t th { color: var(--muted); } :root[data-theme="dark"] .t td { border-color: var(--line-2); }
:root[data-theme="dark"] .b-col { background: #161A26; } :root[data-theme="dark"] .c-day.out { background: #141826; } :root[data-theme="dark"] .c-h { background: var(--soft); }
:root[data-theme="dark"] .person, :root[data-theme="dark"] .tag, :root[data-theme="dark"] .imp-cols span { background: #24304A; color: var(--text); }
:root[data-theme="dark"] .p-nav.on { background: #24304A; color: var(--ink); } :root[data-theme="dark"] .p-nav:hover { background: var(--soft); }
:root[data-theme="dark"] .seg, :root[data-theme="dark"] .achip { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .achip.on { background: #3C4A7A; color: #fff; border-color: #3C4A7A; }
:root[data-theme="dark"] .seg-link { color: var(--ink); }
:root[data-theme="dark"] .heat td.lo { background: #24402A; } :root[data-theme="dark"] .heat td.mid { background: #4A3D17; } :root[data-theme="dark"] .heat td.hi { background: #4F2519; }
:root[data-theme="dark"] .load td.wkc { background: rgba(140, 185, 202, var(--a)); color: var(--ink); }
:root[data-theme="dark"] .pp-list, :root[data-theme="dark"] .sheet-i { background: var(--card); color: var(--text); } :root[data-theme="dark"] .pp-i:hover, :root[data-theme="dark"] .sheet-i:hover:not(:disabled) { background: var(--soft); }
:root[data-theme="dark"] .tk-cv select:disabled, :root[data-theme="dark"] .tk-cv input:disabled { color: var(--ink); -webkit-text-fill-color: var(--ink); }
:root[data-theme="dark"] .btn.tk-complete { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .gantt, :root[data-theme="dark"] .g-head, :root[data-theme="dark"] .g-name { background: var(--card); }
/* botón de tema */
.theme-btn { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #E8ECF0; border-radius: 16px; padding: 4px 10px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.theme-btn:hover { background: var(--navy-2); }
.side .theme-btn { align-self: flex-start; margin: 0 0 8px 8px; }
/* obligatorio / opcional */
.rq { color: #C0392B; font-weight: 700; margin-left: 2px; } .opt { font-weight: 400; color: var(--muted); }
.req-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
/* ver contraseña */
.pw { position: relative; display: block; } .pw input { width: 100%; padding-right: 42px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 16px; padding: 4px 6px; color: var(--muted); line-height: 1; }
.login { position: relative; } .login-theme { position: absolute; top: 16px; right: 16px; }
.login { position: relative; } .login-theme { position: absolute; top: 16px; right: 16px; }
.f > .lbl { display: block; } .f > .lbl .opt { font-weight: 400; }
.side { overflow-y: auto; } .side .brand .tfs-mark img { max-width: 150px; }
:root[data-theme="dark"] .calc, :root[data-theme="dark"] .calc.sched, :root[data-theme="dark"] .inline-form, :root[data-theme="dark"] .g-corner, :root[data-theme="dark"] .g-head { background: var(--soft); color: var(--text); }
:root[data-theme="dark"] .t tr.click:hover td, :root[data-theme="dark"] .tn:hover, :root[data-theme="dark"] .g-left:hover { background: rgba(140,185,202,.10); }
:root[data-theme="dark"] input:disabled, :root[data-theme="dark"] select:disabled, :root[data-theme="dark"] textarea:disabled { background: var(--soft); color: var(--muted); }
:root[data-theme="dark"] .tn.done, :root[data-theme="dark"] .sub-row.done { background: rgba(117,167,72,.14); }
:root[data-theme="dark"] .pblock.review, :root[data-theme="dark"] .nda-pend, :root[data-theme="dark"] .b-alert, :root[data-theme="dark"] .preview-hint { background: rgba(235,203,139,.12); border-color: #8A6A2A; color: #F1D9A6; }

.logo-pick { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.logo-pv { width: 120px; height: 72px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.logo-pv img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-pv span { font-size: 12px; color: #8a909a; }
.logo-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; flex: 1; }
.logo-act .sub { font-weight: 400; }
.pc-logo, .prog-logo { object-fit: contain; }
.pc-logo { height: 40px; max-width: 130px; }
div.f > .lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
div.f > .lbl .opt { font-weight: 400; color: var(--muted); }
.ms-btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
@media (max-width: 699px) { .modal-bg.sheet-bg { padding: 0; } .modal-bg.sheet-bg .modal { width: 100%; } }
:root[data-theme="dark"] .modal-bg { background: rgba(0, 0, 0, .68); }
:root[data-theme="dark"] .modal-bg .modal { box-shadow: 0 -1px 0 rgba(140,185,202,.25), 0 10px 40px rgba(0,0,0,.6); }
:root[data-theme="dark"] .sheet-g + .sheet-g { border-top-color: var(--soft); }
:root[data-theme="dark"] .sheet::before { background: #4A5266; }