/* FX Scout dashboard — Cálido theme, light and dark (values from the approved mocks). */
:root, :root[data-theme="claro"] {
  color-scheme: light;
  --bg:#F2EFEA;--side:rgba(255,255,255,.55);--glass:rgba(255,255,255,.72);--glass-line:rgba(255,255,255,.95);
  --line:#E0D9CF;--hover:rgba(26,26,26,.05);--ink:#1A1A1A;--mut:#635E57;--soft:#8A8378;
  --g1:linear-gradient(135deg,#3F4A1E 0%,#5F6B22 55%,#B8CB3E 100%);--g2:linear-gradient(135deg,#6E4134 0%,#8F5C4C 55%,#D9AE9B 100%);
  --accent:#55621F;--accent-soft:#E6ECCB;--bar:#2D2A26;--ghost:#DED7CD;--peak-g:linear-gradient(to top,#3F4A1E,#A9BE35);--heat:85,98,31;
  --alert:#E8572A;--alert-soft:#FCE9E1;--alert-ink:#7A2A10;--ok:#55621F;--pause:#7A6E5F;--pause-soft:#ECE6DC;
  --s0:#232A10;--s1:#3F4A1E;--s2:#6E7B28;--s3:#9DB032;--s4:#CCDC7A;
  --btn:#141414;--btn-ink:#FFFFFF;--glow1:#F6C9AE;--glow2:#D7E6BE;--shadow:rgba(70,50,30,.08);--sheet:#F7F4EF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    color-scheme: dark;
    --bg:#14130F;--side:rgba(28,26,22,.75);--glass:rgba(36,33,28,.78);--glass-line:rgba(255,255,255,.06);
    --line:#36312A;--hover:rgba(255,255,255,.06);--ink:#F3EFE8;--mut:#B8AFA2;--soft:#8F877B;
    --g1:linear-gradient(135deg,#2E3714 0%,#4A5419 55%,#9FB22E 100%);--g2:linear-gradient(135deg,#4F2D23 0%,#6E4436 55%,#BC8670 100%);
    --accent:#C3D650;--accent-soft:rgba(195,214,80,.14);--bar:#E9E3D8;--ghost:#3A352E;--peak-g:linear-gradient(to top,#7D8E24,#D3E46A);--heat:195,214,80;
    --alert:#F47B4E;--alert-soft:rgba(244,123,78,.14);--alert-ink:#FFB394;--ok:#C3D650;--pause:#B8AFA2;--pause-soft:rgba(255,255,255,.07);
    --s0:#E4EEA6;--s1:#C3D650;--s2:#9DB032;--s3:#C08E78;--s4:#6E7B28;
    --btn:#F3EFE8;--btn-ink:#141414;--glow1:#3B2418;--glow2:#26301A;--shadow:rgba(0,0,0,.35);--sheet:#1C1A16;
  }
}
:root[data-theme="oscuro"] {
  color-scheme: dark;
  --bg:#14130F;--side:rgba(28,26,22,.75);--glass:rgba(36,33,28,.78);--glass-line:rgba(255,255,255,.06);
  --line:#36312A;--hover:rgba(255,255,255,.06);--ink:#F3EFE8;--mut:#B8AFA2;--soft:#8F877B;
  --g1:linear-gradient(135deg,#2E3714 0%,#4A5419 55%,#9FB22E 100%);--g2:linear-gradient(135deg,#4F2D23 0%,#6E4436 55%,#BC8670 100%);
  --accent:#C3D650;--accent-soft:rgba(195,214,80,.14);--bar:#E9E3D8;--ghost:#3A352E;--peak-g:linear-gradient(to top,#7D8E24,#D3E46A);--heat:195,214,80;
  --alert:#F47B4E;--alert-soft:rgba(244,123,78,.14);--alert-ink:#FFB394;--ok:#C3D650;--pause:#B8AFA2;--pause-soft:rgba(255,255,255,.07);
  --s0:#E4EEA6;--s1:#C3D650;--s2:#9DB032;--s3:#C08E78;--s4:#6E7B28;
  --btn:#F3EFE8;--btn-ink:#141414;--glow1:#3B2418;--glow2:#26301A;--shadow:rgba(0,0,0,.35);--sheet:#1C1A16;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Manual: bold text at 700 (b/strong default to 'bolder', 900 on a 600/700 parent). */
b, strong { font-weight: 700; }
body { background: var(--bg); color: var(--ink); font: 14px/1.4 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Shell ---------- */
.app { position: relative; display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .75; pointer-events: none; }
.glow.a { width: 520px; height: 520px; background: var(--glow1); top: -180px; right: 120px; }
.glow.b { width: 460px; height: 460px; background: var(--glow2); bottom: -200px; left: 180px; }
.side { flex: 0 0 232px; display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; background: var(--side); border-right: 1px solid var(--glass-line); backdrop-filter: blur(20px); position: relative; z-index: 2; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font-size: 17px; font-weight: 700; }
.logo { width: 30px; height: 30px; border-radius: 50%; background: var(--g1); flex: none; }
.nav { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 14px; font-weight: 700; color: var(--mut); border: 0; background: none; cursor: pointer; text-align: left; width: 100%; }
.nav:hover { background: var(--hover); color: var(--ink); }
.nav.on { background: var(--btn); color: var(--btn-ink); }
.side-title { display: flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--mut); padding: 20px 12px 6px; }
.side-title a { margin-left: auto; letter-spacing: 0; font-size: 12px; color: var(--accent); }
.store { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 0; background: none; cursor: pointer; width: 100%; text-align: left; }
.store.sub { padding-left: 28px; }
.store:hover { background: var(--hover); }
.store.on { background: var(--hover); font-weight: 700; }
.group { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px; font-size: 12px; font-weight: 700; color: var(--mut); border: 0; background: none; cursor: pointer; width: 100%; text-align: left; }
.group.on { color: var(--ink); }
.side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.equip { padding: 12px; border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--mut); border: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.equip b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.equip.on { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.equip.on b { color: var(--btn-ink); }
.equip .warn { color: var(--alert-ink); font-weight: 700; }
.main { flex: 1; position: relative; z-index: 1; padding: 26px 32px 40px; overflow-y: auto; }
.topbar, .tabbar { display: none; }

/* ---------- Pieces ---------- */
.card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px; box-shadow: 0 10px 30px var(--shadow); backdrop-filter: blur(18px); padding: 20px 22px; }
.gcard { border-radius: 22px; color: #fff; box-shadow: 0 14px 34px var(--shadow); padding: 20px 22px; }
.gcard.g1 { background: var(--g1); } .gcard.g2 { background: var(--g2); }
.num { font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.lbl { font-size: 13px; font-weight: 700; }
.sub { font-size: 12px; color: var(--mut); font-weight: 600; }
.gcard .sub { color: rgba(255,255,255,.88); }
.h2 { font-size: 17px; font-weight: 700; }
.pill { font: 700 13px Manrope, sans-serif; min-height: 36px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.pill:hover { border-color: var(--ink); }
.pill.on { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.pill.sm { min-height: 32px; padding: 5px 12px; }
/* Text on an alert fill is dark ink in both themes (Manual: white on the orange is under 3:1) */
.pill.danger { background: var(--alert); color: #14130F; border-color: var(--alert); }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hover); }
.seg .pill { border-color: transparent; background: transparent; min-height: 32px; padding: 5px 12px; }
.seg .pill.on { background: var(--btn); color: var(--btn-ink); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: .04em; text-transform: uppercase; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; display: inline-block; }
.dot.off { background: var(--alert); box-shadow: 0 0 0 4px var(--alert-soft); }
.dot.mute { background: var(--soft); box-shadow: none; }
.banner { display: flex; align-items: center; gap: 12px; border-radius: 16px; font-size: 13px; font-weight: 700; padding: 12px 14px; margin-bottom: 18px; }
.banner.alert { background: var(--alert-soft); color: var(--alert-ink); border: 1px solid color-mix(in srgb, var(--alert) 35%, transparent); }
.banner.alert .ic { color: var(--alert); }
.banner.ok { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.banner.ok .ic { color: var(--accent); }
.banner.pause { background: var(--pause-soft); border: 1px solid var(--line); }
.banner .ic { display: flex; flex: none; }
.banner .act { margin-left: auto; font: 700 12px Manrope, sans-serif; padding: 7px 12px; border-radius: 999px; background: var(--alert); color: #14130F; border: none; cursor: pointer; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip.ok { background: var(--accent-soft); color: var(--accent); }
.chip.off { background: var(--alert-soft); color: var(--alert-ink); }
.chip.mute { background: var(--pause-soft); color: var(--pause); }
.legend { display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: var(--mut); flex-wrap: wrap; margin-bottom: 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mut); }
.list b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.page-head .crumb { font-size: 13px; font-weight: 600; color: var(--mut); margin: 0 0 6px; }
.page-head .lead { font-size: 15px; font-weight: 500; color: var(--mut); margin-top: 8px; }
.page-head .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumb { color: var(--mut); }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1fr) 320px; }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-height: 176px; padding: 22px 20px 22px 24px; transition: transform .25s ease; }
.kpi:hover { transform: translateY(-4px); }
.kpi .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.kpi .top .lbl { font-size: 14px; font-weight: 700; }
.card.kpi .top .lbl { color: var(--mut); }
.kpi .num { font-size: 64px; line-height: 1.05; margin-top: auto; }
.kpi .ksub { font-size: 13px; font-weight: 600; color: var(--mut); }
.gcard.kpi .ksub { font-weight: 700; color: #fff; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0; }
.gcard .iconbtn { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: #fff; }
.iconbtn svg { transition: transform .25s ease; }
.kpi:hover .iconbtn svg { transform: rotate(45deg); }
.meter { height: 6px; border-radius: 9px; background: var(--ghost); margin-bottom: 8px; overflow: hidden; }
.meter > div { height: 100%; background: var(--accent); border-radius: 9px; }

/* Hour chart */
.chart { display: flex; gap: 6px; align-items: flex-end; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.chart .bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.chart .b { width: min(18px, 42%); border-radius: 8px; background: var(--bar); }
.chart .b.peak { background-image: var(--peak-g); }
.chart .b.typ { background: var(--ghost); }
.chart .b.lost { background: var(--alert-soft); height: 6px !important; }
.chart .h { font-size: 12px; font-weight: 600; color: var(--mut); margin-top: 8px; height: 16px; }
.chart .h.now { color: var(--ink); font-weight: 700; }
.hbar { display: grid; grid-template-columns: 84px 1fr 48px; align-items: center; gap: 12px; font-size: 13px; padding: 4px 0; }
.hbar .track { height: 14px; border-radius: 7px; background: var(--hover); overflow: hidden; }
.hbar .fill { height: 14px; border-radius: 7px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--mut); padding: 0 6px 8px; }
.table td { padding: 10px 6px; border-top: 1px solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: var(--hover); }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 30px 20px; }
.empty .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.sk { background: linear-gradient(90deg, var(--ghost) 0%, var(--hover) 50%, var(--ghost) 100%); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; border-radius: 10px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* A number that changed on the 15 s refresh glows for a moment (the owner's prototype, «Barra lateral» .fx-flash). */
.num.fx-flash { animation: fx-fl 1.1s ease-out; }
@keyframes fx-fl { 0% { transform: scale(1.06); text-shadow: 0 0 18px rgba(255, 255, 255, .9); } 100% { transform: none; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .num.fx-flash { animation: none; } }

/* Overlays */
.dim { position: fixed; inset: 0; background: rgba(10,8,6,.42); backdrop-filter: blur(3px); z-index: 50; }
.sheet { position: fixed; z-index: 51; background: var(--sheet); border: 1px solid var(--glass-line); box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.dialog { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 24px; padding: 26px 28px; }
.dropdown { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: 320px; border-radius: 20px; padding: 10px; background: var(--sheet); border: 1px solid var(--glass-line); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; }
.opt:hover, .opt.on { background: var(--hover); }
.opt.sub { padding-left: 34px; }
.step { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.step .n.ok { background: var(--accent-soft); color: var(--accent); }
.step .n.bad { background: var(--alert-soft); color: var(--alert); }
.toggle { width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; flex: none; border: 0; cursor: pointer; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 19px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; background: var(--btn); color: var(--btn-ink); padding: 12px 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
input.field, select.field { font: 600 14px Manrope, sans-serif; color: var(--ink); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-height: 38px; }
input.field:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Organizar */
.grp { border-radius: 22px; border: 1px solid var(--line); background: var(--glass); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.grp.over { border-color: var(--accent); background: var(--accent-soft); }
.drag-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--hover); cursor: grab; }
.drag-row.dragging { opacity: .4; }
.new-grp { border: 2px dashed var(--line); border-radius: 22px; color: var(--mut); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 700; min-height: 260px; background: none; cursor: pointer; }

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .side { display: none; }
  .app { flex-direction: column; }
  .topbar { display: flex; position: relative; z-index: 3; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 10px; background: var(--side); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-line); }
  .topbar .brand { padding: 0; font-size: 16px; }
  .topbar .logo { width: 26px; height: 26px; }
  .main { padding: 16px 16px 112px; }
  .tabbar { display: flex; position: fixed; z-index: 20; left: 12px; right: 12px; bottom: 14px; padding: 6px; background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: 0 12px 32px var(--shadow), 0 2px 6px var(--shadow); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; font-size: 12px; font-weight: 700; color: var(--mut); border: 0; background: none; cursor: pointer; }
  .tab span { display: flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 999px; }
  .tab.on { color: var(--ink); }
  .tab.on span { background: var(--btn); color: var(--btn-ink); }
  .page-head h1 { font-size: 28px; }
  .page-head .tools.desk { display: none; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-main, .g-1-2, .g2 { grid-template-columns: minmax(0, 1fr); }
  .kpi { min-height: 124px; padding: 14px; }
  .kpi .num { font-size: 38px; margin: 10px 0 8px; }
  .card { padding: 16px; }
  .chart { gap: 2px; }
  .chart .b { border-radius: 5px; }
  .chart .h { font-size: 12px; }
  .dialog { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; border-radius: 26px 26px 0 0; padding: 18px; }
  .dropdown { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; border-radius: 26px 26px 0 0; padding: 12px 12px 26px; z-index: 51; }
  .hide-phone { display: none !important; }
  .toggle::before { content: ''; position: absolute; inset: -10px -4px; } /* bigger tap area, same look */
}
@media (min-width: 901px) { .hide-desk { display: none !important; } }

/* Hour bars as in the prototype: 13 columns, two wide bars each, tooltip on hover */
.bars13 { display: grid; gap: 8px; align-items: end; padding-top: 6px; }
.bars13 .hb { position: relative; display: flex; align-items: flex-end; gap: 3px; cursor: pointer; transition: opacity .2s; }
.bars13.hovering .hb:not(.on) { opacity: .4; }
.bars13 .bb { flex: 1; border-radius: 8px; background-color: var(--bar); }
.bars13 .bb.peak { background-image: var(--peak-g); }
.bars13 .bb.typ { background: var(--ghost); }
.bars13 .bb.future { height: 6px; border-radius: 3px; background: var(--line); }
.bars13 .bb.lost { height: 6px; border-radius: 3px; background: var(--alert-soft); }
.bars13 .stack { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; }
.bars13 .stack > div { border-radius: 4px; }
.hlabels { display: grid; gap: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--mut); margin-top: 6px; }
.hlabels .now { font-weight: 700; color: var(--ink); }
.tip { position: absolute; z-index: 5; background: var(--btn); color: var(--btn-ink); border-radius: 12px; padding: 8px 12px; white-space: nowrap; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px var(--shadow); pointer-events: none; }
.tip b { display: block; font-size: 13px; font-weight: 700; }
.tip .row { display: flex; align-items: center; gap: 6px; }
.tip .sw { width: 9px; height: 9px; border-radius: 2px; border: 1px solid rgba(255,255,255,.7); flex: none; }
.tip .dim2 { opacity: .75; }
.switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; margin: 0; flex: none; transition: background-color .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.sel { font: 600 13px Manrope, sans-serif; min-height: 40px; padding: 8px 34px 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; }
.selwrap { position: relative; display: inline-flex; }
.selwrap::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mut); pointer-events: none; }
.flabel { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--mut); }
.evrow { display: grid; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.evrow:hover { background: var(--hover); }
.big-sentence { font-size: 30px; line-height: 1.25; font-weight: 300; letter-spacing: -.015em; color: var(--mut); margin: 4px 0 18px; }
.big-sentence strong { font-weight: 700; color: var(--ink); }
.pop { position: absolute; top: 48px; left: 0; z-index: 40; min-width: 250px; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px var(--shadow); }
@media (max-width: 900px) {
  .page-head h1 { font-size: 28px; }
  .kpi .num { font-size: 40px; }
  .kpi { min-height: 132px; padding: 14px; }
  .iconbtn { width: 36px; height: 36px; }
  .bars13, .hlabels { gap: 3px; }
  .bars13 .bb { border-radius: 5px; }
  .big-sentence { font-size: 22px; }
}

/* Reportes (round 6 mocks): month list, report card, day bars, small rows */
.box { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--mut); }
.mcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, transform .2s; }
.mcard:hover { border-color: var(--ink); transform: translateX(2px); }
.mcard.on { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.mcard .mmut { color: var(--mut); }
.mcard.on .mmut { color: inherit; opacity: .8; }
.rep-wrap { display: flex; gap: 18px; align-items: flex-start; }
.rep-nav { flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; }
.rep-card { flex: 1; min-width: 0; padding: 28px 30px; display: flex; flex-direction: column; gap: 24px; }
.kgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kbox { display: flex; flex-direction: column; gap: 6px; }
.kbox .v { font-size: 32px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chip.up { background: var(--accent-soft); color: var(--accent); }
.chip.down { background: var(--alert-soft); color: var(--alert-ink); }
.chip.flat { background: var(--hover); color: var(--mut); }
.dbars { display: grid; gap: 4px; align-items: end; height: 196px; }
.dbars .d { position: relative; height: 190px; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; transition: opacity .2s; }
.dbars .d > i { flex: 1; max-width: 48px; border-radius: 4px; background: var(--bar); }
.dbars .d > i.we { background: var(--s2); }
.dbars .d > i.pk { background-image: var(--peak-g); }
.dbars .d > i.fut { height: 4px !important; background: var(--line); }
.dbars.hovering .d:not(.on) { opacity: .4; }
.dlabels { display: grid; gap: 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--mut); }
.wrow { display: grid; grid-template-columns: 86px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.wrow .t { height: 12px; border-radius: 6px; background: var(--hover); overflow: hidden; }
.wrow .t > div { height: 12px; border-radius: 6px; }
.wrow b { text-align: right; font-variant-numeric: tabular-nums; }
.hcols { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; align-items: end; height: 120px; }
.hcols > div { border-radius: 4px; }
.two { display: flex; flex-wrap: wrap; gap: 16px; }
.two > section { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.opt-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; }
@media (max-width: 900px) {
  .rep-wrap { flex-direction: column; gap: 12px; }
  .rep-nav { flex: none; width: 100%; flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .rep-nav .eyebrow, .rep-nav .msub { display: none; }
  .rep-nav .mcard, .rep-nav .pill { flex: 0 0 auto; width: auto; padding: 10px 14px; }
  .rep-card { padding: 18px 16px; gap: 18px; }
  .rep-card h2 { font-size: 24px !important; }
  .kgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kbox { padding: 12px 14px; }
  .kbox .v { font-size: 24px; }
  .dbars { height: 140px; }
  .dbars .d { height: 136px; }
  .rep-actions { width: 100%; }
  .rep-actions .pill { flex: 1; justify-content: center; }
}

/* Printing a report (Descargar PDF → Guardar como PDF): only the report card, on white */
@media print {
  :root { --glass: #fff; --glass-line: #ddd; }
  body, .app { background: #fff !important; height: auto; overflow: visible; }
  .side, .topbar, .tabbar, .glow, .page-head, .rep-nav, .rep-actions, .banner, .dim, .sheet, .toast { display: none !important; }
  .main { padding: 0; overflow: visible; }
  .rep-card { box-shadow: none; border: 0; padding: 0; backdrop-filter: none; }
  .box, .rep-card section { break-inside: avoid; }
}

/* Ventas in Configuración (round 6 mocks D6v, D6l, D6e) */
.drop { border: 2px dashed var(--line); border-radius: 16px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--hover); }
.file .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.file .ic.bad { background: var(--alert-soft); color: var(--alert); }
.cal { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.cal span { height: 22px; border-radius: 6px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--hover); color: var(--mut); }
.cal span.ok { background: var(--accent); color: var(--bg); }
.cal span.fut { background: transparent; border: 1px dashed var(--line); }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.steps li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mut); }
.steps li i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink); flex: none; }
@media (max-width: 900px) { .cal { grid-template-columns: repeat(8, 1fr); } }

/* Sign-in page: the dashboard shell hides until there is a session */
.app.signed-out .side, .app.signed-out .topbar, .app.signed-out .tabbar { display: none !important; }
.app.signed-out .main { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.login-card .flabel input { width: 100%; min-height: 44px; font-size: 15px; }
.login-card .pw { position: relative; display: flex; }
.login-card .pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.login-card .go { width: 100%; justify-content: center; min-height: 46px; font-size: 14px; }

/* Account screens (round 9, diseno/bocetos/09-cuenta): text links, field hints and errors, tips, email badge.
   .acct is the «Tu cuenta» card in Configuración, which reuses the same pieces. */
.login-card .lnk, .acct .lnk { color: var(--accent); font-weight: 700; cursor: pointer; display: inline-block; line-height: 20px; padding: 12px 6px; margin: -12px -6px; border-radius: 10px; text-decoration: none; }
.login-card .lnk:hover, .acct .lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-card .hint { font-size: 12px; font-weight: 600; color: var(--mut); margin-top: -2px; }
.login-card .ferr, .acct .ferr { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; font-weight: 700; color: var(--alert-ink); margin-top: -2px; }
.login-card .ferr svg, .acct .ferr svg { color: var(--alert); flex: none; margin-top: 1px; }
.login-card .bad, .acct .bad { border-color: var(--alert) !important; outline: 1px solid var(--alert); }
.login-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.login-card .foot { margin: 2px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mut); text-align: center; }
.login-card .tips, .acct .tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.login-card .tips li, .acct .tips li { display: flex; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mut); }
.login-card .tips li svg, .acct .tips li svg { color: var(--accent); flex: none; margin-top: 1px; }
.login-card .two { display: flex; flex-direction: column; gap: 8px; }
.login-card .two .pill { width: 100%; justify-content: center; min-height: 44px; }
.login-card .badge, .acct .badge { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.login-card .badge.warn { background: var(--alert-soft); color: var(--alert); }
.login-card .go:disabled, .login-card .two .pill:disabled { opacity: .55; }
.login-card .field:disabled, .acct .field:disabled { opacity: .6; }
.acct .pw { position: relative; display: flex; }
.acct .pw input { width: 100%; min-height: 44px; font-size: 15px; }
.acct .pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
/* Dark: light text on a dark fill reads heavier than dark text on a light fill, so the secondary button goes 600
   and the main one keeps 700 (approved with round 9; the Manual leaves no weight above 700). */
:root[data-theme="oscuro"] .login-card .two .pill:not(.on) { font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .login-card .two .pill:not(.on) { font-weight: 600; }
}
/* A card taller than the screen (phone in landscape, large text) starts at the top instead of being cut off */
.app.signed-out .main { align-items: safe center; }

/* Accounts by negocio (CONFIG.negocios). Ported from the approved mocks: rounds 13 and 14
   (diseno/bocetos/13-cuentas-empresa/fuente/empresa.mjs EXTRA, 14-cuentas-faltantes/fuente/panel.mjs EXTRA14) and
   round 15 (15-nombre-negocio/fuente/panel.mjs EXTRA15, por aprobar). Rules that would also touch the screens of
   today (.lnk, the phone .dialog, .topbar and .toast) only apply under html.negocios, which app.js sets with the flag. */
.emp { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; margin: 0 0 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.emp:hover, .emp.open { border-color: var(--ink); }
.emp .t { flex: 1; min-width: 0; }
.emp .nm { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp .rl { display: block; font-size: 12px; font-weight: 600; color: var(--mut); }
.emp > svg { color: var(--mut); flex: none; }
.av { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.av.b { background: var(--pause-soft); color: var(--pause); }
.av.p { border-radius: 50%; width: 36px; height: 36px; background: var(--hover); color: var(--ink); }
.av.inv { border-radius: 50%; width: 36px; height: 36px; background: transparent; border: 1.5px dashed var(--line); color: var(--mut); }
.emp-top { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 15px Manrope,sans-serif; cursor: pointer; min-width: 0; }
.emp-top .av { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.emp-top .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-top > svg { flex: none; color: var(--mut); }
@media (min-width: 901px) { .emp-menu { position: fixed; left: 16px; top: 118px; right: auto; width: 300px; } }
.emp-menu .opt { min-height: 52px; }
.emp-menu .opt .sub { font-weight: 600; }
.emp-menu .new { color: var(--accent); border-top: 1px solid var(--line); margin-top: 6px; border-radius: 0 0 12px 12px; font-size: 13px; }
.side-empty { padding: 4px 12px 0; font-size: 12px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.negocios .lnk { color: var(--accent); font-weight: 700; cursor: pointer; display: inline-block; line-height: 20px; padding: 12px 6px; margin: -12px -6px; border-radius: 10px; border: 0; background: none; font-family: inherit; font-size: 13px; }
.negocios .lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.side-empty .lnk { font-size: 12px; }
.people { display: flex; flex-direction: column; margin-top: 12px; }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.prow .t { flex: 1 1 150px; min-width: 0; }
.prow .t .chip { margin-top: 6px; }
@media (max-width: 900px) { .prow { flex-wrap: nowrap; } .prow .t { flex: 1 1 0; } .prow.inv { flex-wrap: wrap; } .prow.inv .t { flex: 1 1 220px; } }
.prow .t b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.prow .t .ml { display: block; font-size: 12px; font-weight: 600; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .acts { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.eyebrow2 { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--mut); margin: 16px 0 2px; }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; font-weight: 600; color: var(--mut); margin-top: 12px; line-height: 1.45; }
.note svg { flex: none; margin-top: 1px; color: var(--soft); }
.dlg { display: flex; flex-direction: column; gap: 14px; }
.dlg .hd { display: flex; align-items: flex-start; gap: 12px; }
.dlg .hd h2 { flex: 1; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.dlg .lead2 { margin: -6px 0 0; font-size: 14px; font-weight: 500; color: var(--mut); line-height: 1.45; }
.dlg .flabel input, .dlg .flabel select { width: 100%; min-height: 44px; font-size: 15px; }
.dlg .hint { font-size: 12px; font-weight: 600; color: var(--mut); margin-top: -6px; line-height: 1.45; }
.dlg .ferr { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; font-weight: 700; color: var(--alert-ink); margin-top: -6px; line-height: 1.45; }
.dlg .ferr svg { color: var(--alert); flex: none; margin-top: 1px; }
.dlg .bad { border-color: var(--alert) !important; outline: 1px solid var(--alert); }
.dlg .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dlg .acts .pill { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.code { font: 700 28px Manrope,sans-serif !important; letter-spacing: .16em; text-transform: uppercase; text-align: center; min-height: 60px !important; font-variant-numeric: tabular-nums; }
.codechip { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 14px; border: 1.5px dashed var(--line); font: 700 24px Manrope,sans-serif; letter-spacing: .16em; color: var(--ink); background: var(--glass); }
.linkbox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); }
.linkbox span { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbox .pill { min-height: 40px; }
.or { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--mut); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.warnbox { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--hover); font-size: 13px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.warnbox svg { flex: none; margin-top: 1px; }
.warnbox.ok svg { color: var(--accent); }
.warnbox.lose svg { color: var(--alert); }
.empty-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 32px; padding: 30px 32px; align-items: start; }
.empty-hero h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 16px 0 8px; }
.empty-hero p { margin: 0; font-size: 15px; font-weight: 500; color: var(--mut); line-height: 1.5; }
.empty-hero .go { min-height: 46px; padding: 10px 20px; font-size: 14px; margin-top: 20px; }
.ghostkpi { box-shadow: none; }
.ghostkpi .num { color: var(--ghost); }
.newcard { outline: 2px solid var(--accent); outline-offset: -1px; }
.waiting { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 14px; background: var(--hover); font-size: 13px; font-weight: 600; color: var(--mut); }
.emp.none { cursor: default; }
.emp.none:hover { border-color: var(--line); }
.emp.none .av { background: transparent; border: 1.5px dashed var(--line); color: var(--mut); }
.combo { position: relative; display: flex; align-items: center; }
.combo input { padding-right: 132px; }
.combo .tag { position: absolute; right: 38px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.combo > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mut); pointer-events: none; }
.combo.open input { border-color: var(--ink); outline: 1px solid var(--ink); padding-right: 40px; }
.combolist { margin-top: -8px; border: 1px solid var(--line); border-radius: 14px; padding: 6px; background: var(--sheet); display: flex; flex-direction: column; gap: 2px; }
.combolist .opt { min-height: 48px; }
.combolist .opt .sub { font-weight: 600; }
.combolist .opt.new { color: var(--accent); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.combolist .opt.new .sub { color: var(--mut); }
.rolebtn { min-height: 44px; padding: 8px 12px; font-size: 13px; gap: 6px; }
.rolebtn svg { color: var(--mut); }
.rolewrap { position: relative; flex: none; }
.role-menu { width: 330px; top: calc(100% + 6px); }
.role-menu .opt { align-items: flex-start; min-height: 56px; }
.role-menu .opt .sub { font-weight: 600; line-height: 1.4; margin-top: 2px; }
.roles { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--hover); font-size: 12px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.roles b { color: var(--ink); font-weight: 700; }
.rolepick { display: flex; flex-direction: column; gap: 6px; }
.rolepick label { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--mut); line-height: 1.4; }
.rolepick label b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.rolepick label.on { border-color: var(--ink); outline: 1px solid var(--ink); }
.dlg .rolepick input { accent-color: var(--accent); width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; flex: none; font-size: inherit; }
@media (max-width: 900px) { .negocios .dialog { padding: 18px 18px 28px; max-height: calc(100vh - 40px); } .dlg .hd h2 { font-size: 22px; } .dlg .acts .pill { flex: 1 1 100%; justify-content: center; } .empty-hero { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; } .empty-hero h2 { font-size: 24px; margin-top: 12px; } .empty-hero .go { width: 100%; justify-content: center; } .negocios .topbar { gap: 6px; } .role-menu { width: 100%; top: auto; } .rolebtn { padding: 8px 10px; } }
.spin14 { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid color-mix(in srgb,currentColor 25%,transparent); border-top-color: currentColor; display: inline-block; flex: none; animation: spin14 .8s linear infinite; }
@keyframes spin14 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin14 { animation-duration: 2.4s; } }
.dlg .banner { margin: 0; align-items: flex-start; }
.dlg .banner .ic { margin-top: 1px; }
.dlg .banner b { color: inherit; }
.swapbox { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.swapbox .side2 { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--hover); font-size: 12px; font-weight: 600; color: var(--mut); line-height: 1.4; min-width: 0; }
.swapbox .side2.new { background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 30%,transparent); }
.swapbox .side2 b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin: 3px 0 2px; }
.swapbox .side2 .k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mut); }
.swapbox .arr { display: flex; align-items: center; color: var(--mut); }
.lockrow { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.lockrow svg { flex: none; margin-top: 1px; color: var(--soft); }
@media (max-width: 900px) { .swapbox { grid-template-columns: 1fr; gap: 8px; } .swapbox .arr { display: none; } }
.nombrar { width: min(480px,calc(100vw - 32px)); }
.nombrar .dlg { gap: 16px; }
.nombrar .badge15 { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.nombrar .hd h2 { font-size: 26px; }
.nombrar .acts .pill { flex: 1 1 100%; justify-content: center; min-height: 48px; font-size: 15px; }
.nombrar .keep { display: flex; gap: 8px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.nombrar .keep svg { flex: none; margin-top: 1px; color: var(--accent); }
/* «Cambiar el nombre» (round 19, D10e–D10f): the D10a window with its × and «Cancelar» side by side. */
.renombrar .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.renombrar .acts .pill { flex: 1 1 140px; }
.emp .av svg, .emp-top .av svg { display: block; }
@media (max-width: 900px) { .nombrar { width: 100%; } .nombrar .hd h2 { font-size: 23px; } .negocios .toast { bottom: 96px; width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.4; } }

/* Phone tap areas (phone audit): pills and round icon buttons keep their size and look, but an invisible
   ::before gives the finger at least 40 px (a 32 px pill gets 4 px above and below; a 36 px icon button 2 px around). */
@media (max-width: 900px) {
  .pill, .iconbtn { position: relative; }
  .pill::before, .iconbtn::before { content: ''; position: absolute; inset: -4px 0; border-radius: inherit; }
  .iconbtn::before { inset: -2px; }
  input.field, select.field { min-height: 40px; }
  select.field[data-move] { min-height: 40px !important; } /* Organizar «Mover a…»: a select cannot take a ::before */
  /* Configuración › Personas: a long email (invitations) wraps inside the card instead of running out of it, and so does the
     line under it (a member's email, an invitation's role and time) instead of being cut off with «…». */
  .prow .t b { overflow-wrap: anywhere; }
  .prow .t .ml { white-space: normal; overflow-wrap: anywhere; }
}
/* Round 20 «Del equipo | Corregido» (D2a–D2d, D1cr): the switch and its «?» in the page head, the note over the sentence
   of Histórico, the hint under Resumen's date and the popover that explains «Corregido». */
.sw20 { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.q20 { min-width: 36px; justify-content: center; padding: 8px 0; }
.hint20 { font-size: 12px; font-weight: 600; color: var(--mut); }
.note20 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--mut); margin: -4px 0 14px; }
.note20 b { color: var(--ink); }
.ayuda20 { left: auto; right: 0; width: 340px; max-width: calc(100vw - 32px); max-height: none; overflow: visible; padding: 16px 18px; white-space: normal; }
.ayuda20 h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.ayuda20 p, .ayuda20 li { font-size: 13px; font-weight: 500; line-height: 1.45; margin: 0 0 8px; color: var(--ink); }
.ayuda20 ul { margin: 0 0 8px; padding-left: 18px; }
.ayuda20 .fin { color: var(--mut); margin: 0; }
@media (max-width: 900px) { .ayuda20 { right: auto; left: 0; } }
/* Round 21 (D2f, D7c): the notice of dates without corrected numbers in Histórico; in Reportes the «Del equipo y corregido»
   box and the pale top of a corrected day's bar (what the correction took out). */
.aviso21 { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin: 0 0 14px; border-radius: 14px; background: var(--pause-soft); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.aviso21 svg { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso21 b { color: var(--ink); font-weight: 700; }
.dbars .d > i { position: relative; }
.dbars .d > i > u.cut21 { position: absolute; left: 0; right: 0; top: 0; background: var(--sheet); opacity: .62; border-radius: 4px 4px 0 0; text-decoration: none; }
.legend i.cut21 { background: linear-gradient(to bottom, var(--ghost) 45%, var(--bar) 45%); }
.c21 { display: flex; flex-direction: column; gap: 6px; }
.c21 h3 { margin: 0; font-size: 16px; font-weight: 700; }
.c21 .c21-r { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.c21 .c21-r.hd { border-top: 0; padding: 6px 0 4px; font-size: 12px; font-weight: 700; color: var(--mut); }
.c21 .c21-r b { font-weight: 700; font-variant-numeric: tabular-nums; }
.c21 .c21-r .m { color: var(--mut); font-variant-numeric: tabular-nums; }
.c21 p { margin: 0; }
@media (max-width: 900px) { .c21 .c21-r { grid-template-columns: minmax(0, 1.2fr) 1fr 1fr auto; gap: 6px; } }