/* =====================================================================================================
   Access Point Design Studio: sistema visual (paleta y tipografía del libro de marca de Access Point)
   ===================================================================================================== */
@font-face { font-family: 'Brand'; src: url('/api/public/font/regular'); font-weight: 100 549; font-display: swap; }
@font-face { font-family: 'Brand'; src: url('/api/public/font/bold'); font-weight: 550 900; font-display: swap; }
:root {
  /* Marca */
  --brand: #1c2442;          /* azul marino oscuro */
  --brand-2: #262f55;        /* azul marino, estado sobre */
  --cyan: #00a4b4;           /* cian brillante (Pantone 7710C) */
  --cyan-hover: #0095a4;
  --cyan-soft: #e3f4f6;
  --ice: #c5e6ef;
  --ink: #151a30;
  --muted: #706f6f;
  --faint: #9a9aa3;
  --line: #e3e6ed;
  --line-2: #d3d8e1;
  --bg: #f3f5f8;
  --panel: #ffffff;
  --hover: #f1f4f8;
  --accent: var(--cyan);
  --danger: #c8323f;
  --ok: #0f8a67;
  --warn: #b45309;
  /* Disciplinas */
  --cctv: #2f6fe0; --wifi: #0f9f77; --alarma: #d64550; --audio: #8457e6;
  --cctv-soft: #e8f0fd; --wifi-soft: #e2f5ef; --alarma-soft: #fbe9eb; --audio-soft: #f0eafd;
  --radius: 10px;
  --r-sm: 7px;
  --shadow: 0 1px 2px rgba(21, 26, 48, .05), 0 8px 24px rgba(21, 26, 48, .07);
  --shadow-3: 0 12px 40px rgba(21, 26, 48, .18), 0 2px 6px rgba(21, 26, 48, .08);
  font-family: 'Brand', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); }
#app { height: 100%; display: flex; flex-direction: column; }
a { color: var(--brand); text-decoration: none; font-weight: 600; }
a:hover { color: var(--cyan); }
h1 { font-size: 24px; margin: 0; font-weight: 700; letter-spacing: -.3px; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 700; }
h3 { font-size: 14px; margin: 16px 0 8px; font-weight: 700; }
b, strong { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.pad { padding: 8px 12px; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.warn-txt { color: var(--warn); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 24px; height: 24px; stroke-width: 1.5; }

/* ---------- Controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px;
  padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--hover); border-color: #b9c0cc; color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.btn.primary:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); color: #fff; }
.btn.dark { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.dark:hover { background: var(--brand-2); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #fdf0f1; border-color: #eeb4ba; color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.btn.block { width: 100%; white-space: normal; height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.btn.small.block { min-height: 28px; padding-top: 4px; padding-bottom: 4px; }
.btn.icon { width: 34px; padding: 0; }
.btn.small.icon { width: 28px; }
.icon-btn { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--muted); padding: 5px; border-radius: 6px; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
input, select, textarea {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input, select { min-height: 34px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 164, 180, .18); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--cyan); }
input[type=color] { width: 48px; height: 34px; padding: 2px; }
input[type=range] { padding: 0; accent-color: var(--cyan); min-height: 0; }
input[type=search] { -webkit-appearance: none; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #3c4152; font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 0; }
legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-error { color: var(--danger); margin: 0; font-size: 13px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--cyan-soft); color: var(--brand); font-size: 11px; margin: 1px 0; font-weight: 600; }
.tag.ai { background: #efe9fd; color: #5b21b6; }
.tag.warn { background: #fef3c7; color: #92400e; }
.badge { background: #e8ebf1; border-radius: 10px; padding: 1px 8px; font-size: 11px; color: #3c4152; font-weight: 600; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; opacity: .8; }
.dash { display: inline-block; width: 16px; border-top: 2px dashed #7f1d1d; margin-right: 6px; vertical-align: 3px; }
kbd { font-family: inherit; background: #fff; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; height: 32px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); background: var(--hover); }
.seg button.active, .seg button.on { background: var(--brand); color: #fff; }
.seg button .sw { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- Avisos, ventanas y menús ---------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--brand); color: #fff; padding: 11px 18px 11px 16px; border-radius: 10px; transition: .2s; z-index: 100; max-width: 90vw;
  box-shadow: var(--shadow-3); border-left: 4px solid var(--cyan); font-weight: 600;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: #fff; color: var(--danger); border-left-color: var(--danger); }
.modal-bg { position: fixed; inset: 0; background: rgba(21, 26, 48, .5); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(2px); }
.modal { background: #fff; border-radius: 14px; width: min(500px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-3); overflow: hidden; }
.modal.wide { width: min(860px, 100%); }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal header h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal .form-error { padding: 0 20px 10px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: #f8f9fb; }
.menu { position: fixed; z-index: 80; background: #fff; border-radius: 10px; box-shadow: var(--shadow-3); border: 1px solid var(--line); padding: 6px; min-width: 220px; max-width: 340px; }
.menu .mi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; text-decoration: none; }
.menu .mi:hover, .menu .mi:focus { background: var(--hover); outline: none; color: var(--ink); }
.menu .mi small { margin-left: auto; color: var(--faint); font-weight: 400; font-size: 11.5px; }
.menu .mi.danger { color: var(--danger); }
.menu .mi svg { color: var(--muted); }
.menu .mi.danger svg { color: var(--danger); }
.menu .sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu .mh { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 6px 10px 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-2); background: #fff; border-radius: 14px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; color: #3c4152; }
.chip:hover { background: var(--cyan-soft); border-color: var(--cyan); }
.chip b { color: var(--brand); margin-left: 2px; }
.preview { background: #f8f9fb; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.preview h4 { margin: 0 0 8px; font-size: 13px; }
table.mini { width: 100%; border-collapse: collapse; font-size: 12px; }
table.mini th, table.mini td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); }

/* ---------- Inicio de sesión ---------- */
.login { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100%; }
.login-side { background: var(--brand); color: #fff; position: relative; overflow: hidden; padding: 56px; display: flex; flex-direction: column; }
.login-side > * { position: relative; }
.login-side .lockup { align-self: flex-start; }
.login-side .mark { position: absolute; right: 8%; top: 12%; width: min(42vw, 460px); height: auto; }
.login-side h1 { font-size: 44px; margin: auto 0 12px; letter-spacing: -.6px; line-height: 1.08; }
.login-side h1 em { color: var(--cyan); font-style: normal; }
.login-side p { color: rgba(255, 255, 255, .72); font-size: 15px; max-width: 440px; line-height: 1.55; margin: 0 0 26px; }
.login-discs { display: flex; gap: 10px; flex-wrap: wrap; }
.login-discs span { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); padding: 8px 13px; border-radius: 9px; font-weight: 600; font-size: 13px; }
.login-foot { color: rgba(255, 255, 255, .45); font-size: 12px; margin-top: 28px; }
.login-form { display: flex; align-items: center; justify-content: center; background: #fff; padding: 32px; }
.login-form form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.login-form h2 { font-size: 26px; margin: 0; }
.login-form p { margin: 0 0 10px; }
.login-form .field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 12px; color: var(--muted); height: 44px; }
.login-form .field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 164, 180, .18); }
.login-form .field input { border: 0; padding: 0; box-shadow: none; height: 100%; }
.login-form .btn { height: 46px; font-size: 15px; margin-top: 6px; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-side { min-height: 320px; padding: 32px; } .login-side .mark { width: 240px; top: 20px; right: 20px; } }

/* ---------- Barra superior de la aplicación ---------- */
.appbar { display: flex; align-items: center; gap: 24px; padding: 0 22px; height: 56px; background: var(--brand); color: #fff; flex-shrink: 0; }
.appbar .brandlink { display: flex; align-items: center; gap: 12px; color: #fff; }
.appbar .brandlink .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .25); }
.appbar .prod { font-weight: 600; font-size: 14.5px; letter-spacing: .2px; white-space: nowrap; }
.appbar .prod em { font-style: normal; color: var(--cyan); }
.appbar nav { display: flex; gap: 2px; align-self: stretch; }
.appbar nav a { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: rgba(255, 255, 255, .72); font-weight: 600; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.appbar nav a:hover { color: #fff; }
.appbar nav a.active { color: #fff; border-bottom-color: var(--cyan); }
.appbar .user { margin-left: auto; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .88); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.appbar .user:hover { background: rgba(255, 255, 255, .08); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cyan); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
@media (max-width: 900px) { .appbar nav a span { display: none; } .appbar .user span { display: none; } .appbar .prod { display: none; } }

/* ---------- Páginas ---------- */
.page { --pad-t: 28px; --pad-x: 36px; flex: 1; overflow: auto; padding: var(--pad-t) var(--pad-x) 40px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin: 0; }
.page-head input[type=search], .page-head select { width: 220px; }
.page-title { display: flex; flex-direction: column; gap: 4px; }
.page-title p { color: var(--muted); }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: #fff; border-radius: var(--radius); border: 2px dashed var(--line-2); }
.empty-state h3 { margin-top: 0; }
.table-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--line); background: #f6f7fa; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:hover td { background: #fafbfd; }
table.data td.ico svg { width: 26px; height: 26px; display: block; }
table.data td.actions { white-space: nowrap; text-align: right; }
table.data td.actions .btn { margin-left: 4px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.panel form { display: flex; flex-direction: column; gap: 12px; }
.panel form .btn { align-self: flex-start; }
.logo-box { height: 90px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 10px; padding: 8px; background: #f8f9fb; }
.logo-box img { max-height: 72px; max-width: 100%; object-fit: contain; }

/* ---------- Proyectos ---------- */
.proj-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.proj-head h1 { font-size: 28px; }
.proj-head p { margin: 4px 0 0; color: var(--muted); }
.proj-head .btn.primary { height: 40px; padding: 0 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: #fff; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; border: 1px solid transparent; font: inherit; text-align: left; color: var(--ink); min-width: 0; }
button.kpi { cursor: pointer; }
button.kpi:hover { border-color: var(--line-2); }
button.kpi.on { border-color: var(--danger); background: #fffafa; }
.kpi .ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi strong { font-size: 24px; display: block; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: 12px; }
.kpi.bars { flex-direction: column; align-items: stretch; gap: 9px; justify-content: center; }
.kpi .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--line); }
.kpi .bar i { display: block; }
.kpi .legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.kpi .legend b { margin-right: 2px; }
.proj-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.searchbox { display: flex; flex-direction: row; font-weight: 400; align-items: center; gap: 8px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 11px; background: #fff; color: var(--muted); width: 330px; max-width: 100%; }
.searchbox:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 164, 180, .18); }
.searchbox input { border: 0; padding: 0; box-shadow: none !important; min-height: 0; height: 100%; }
.sortbox { display: flex; flex-direction: row; white-space: nowrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.sortbox select { width: auto; min-height: 32px; padding: 4px 8px; font-weight: 600; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.pcard { container-type: inline-size; background: #fff; border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; transition: box-shadow .15s, transform .15s; }
.pcard:hover { box-shadow: 0 2px 4px rgba(21, 26, 48, .06), 0 14px 32px rgba(21, 26, 48, .12); }
.pc-thumb { display: block; height: 128px; border-radius: 12px 12px 0 0; background: linear-gradient(135deg, #f6f8fb, #eceff5); position: relative; overflow: hidden; }
.pc-thumb img { position: absolute; inset: 38px 14px 8px; width: calc(100% - 28px); height: calc(100% - 46px); object-fit: contain; }
.pc-thumb .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--faint); font-size: 12px; font-weight: 600; }
.pc-thumb .ph svg { width: 30px; height: 30px; }
.pc-chips { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; flex-wrap: wrap; z-index: 1; }
.pc-warn { position: absolute; right: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: #fff4e5; color: var(--warn); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.pc-warn svg { width: 13px; height: 13px; }
.dchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.pc-chips .dchip { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.dchip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dchip.cctv { color: var(--cctv); background: var(--cctv-soft); } .dchip.wifi { color: var(--wifi); background: var(--wifi-soft); }
.dchip.alarma { color: var(--alarma); background: var(--alarma-soft); } .dchip.audio { color: var(--audio); background: var(--audio-soft); }
.pc-strip { display: flex; height: 3px; }
.pc-strip i { flex: 1; }
.pc-body { padding: 14px 16px 10px; flex: 1; min-width: 0; }
.pc-body h3 { margin: 0; font-size: 16px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pc-body h3 a { color: var(--ink); }
.pc-body h3 a:hover { color: var(--cyan); }
.pc-body .sub { color: var(--muted); margin-top: 3px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-stats { margin-top: 12px; display: grid; gap: 7px; }
.pc-stat { display: flex; align-items: center; gap: 9px; font-size: 12.5px; min-width: 0; }
.pc-stat .d { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pc-stat .d svg { width: 14px; height: 14px; }
.pc-stat .d.cctv { color: var(--cctv); background: var(--cctv-soft); } .pc-stat .d.wifi { color: var(--wifi); background: var(--wifi-soft); }
.pc-stat .d.alarma { color: var(--alarma); background: var(--alarma-soft); } .pc-stat .d.audio { color: var(--audio); background: var(--audio-soft); }
.pc-stat .v { font-weight: 700; }
.pc-stat .m { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 11.5px; padding: 8px 16px; border-top: 1px dashed var(--line); }
.pc-actions { display: flex; gap: 6px; padding: 10px 12px 12px; }
.pc-actions .btn { height: 32px; }
.pc-actions .btn.primary { flex: 1; min-width: 0; }
.pc-actions .btn span { overflow: hidden; text-overflow: ellipsis; }
.pc-actions .btn .ic-n { display: none; }
/* Tarjetas angostas (pantallas pequeñas): "Equipos" queda como ícono con flecha para que nada se corte. */
@container (max-width: 390px) { .pc-actions .btn .lbl-n { display: none; } .pc-actions .btn .ic-n { display: block; } .pc-actions { gap: 5px; } .pc-actions .btn[data-act=equipos] { width: 32px; padding: 0; } .pc-actions .btn[data-act=equipos] > svg:last-child { display: none; } }
.pc-actions .btn.icon { width: 32px; }
table.data.projects td { padding: 10px 12px; }
table.data.projects .pname { font-weight: 700; color: var(--ink); }
table.data.projects .pname:hover { color: var(--cyan); }
table.data.projects .chips-cell { display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr; } .page { --pad-t: 18px; --pad-x: 16px; } .proj-head { flex-wrap: wrap; } }

/* ---------- Editor ---------- */
.editor { flex: 1; display: grid; grid-template-columns: 260px 1fr 300px; grid-template-rows: auto 1fr; min-height: 0; height: 100%; }
.ed-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-title { display: flex; flex-direction: column; line-height: 1.2; max-width: 220px; }
.ed-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-tabs { display: flex; gap: 2px; overflow-x: auto; max-width: 40vw; margin-left: 8px; }
.tab { border: 1px solid transparent; background: #f1f5f9; padding: 5px 12px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; color: #334155; }
.tab.active { background: var(--brand); color: #fff; }
.save-state { font-size: 12px; color: var(--muted); margin-right: 6px; }
.save-state.ok { color: var(--ok); }
.save-state.pending { color: #b45309; }
.save-state.error { color: var(--danger); font-weight: 600; }

.ed-left, .ed-right { background: #fff; overflow-y: auto; min-height: 0; }
.ed-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.ed-right { border-left: 1px solid var(--line); }
.ed-left > input { margin: 0 10px 8px; width: auto; }
.pane-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 12px 12px 6px; display: flex; align-items: center; gap: 6px; }
.palette { flex: 0 1 auto; overflow-y: auto; max-height: 55%; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pal-group { font-size: 11px; color: var(--muted); padding: 8px 12px 2px; font-weight: 600; }
.pal-item, .cam-row { display: flex; gap: 8px; align-items: center; padding: 6px 12px; cursor: pointer; border-left: 3px solid transparent; }
.pal-item:hover, .cam-row:hover { background: #f1f5f9; }
.pal-item.active, .cam-row.active { background: #e0f2fe; border-left-color: var(--accent); }
.pal-item .ico svg, .cam-row .ico svg { width: 24px; height: 24px; display: block; }
.pal-item strong { display: block; font-size: 12.5px; font-weight: 600; }
.pal-item small { color: var(--muted); font-size: 11px; }
.cam-list { flex: 1; overflow-y: auto; }
.cam-row strong { font-size: 12.5px; min-width: 34px; }
.cam-row small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ed-canvas { position: relative; overflow: hidden; background: #e2e8f0; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 18px 18px; min-height: 0; }
#cv { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
#cv.panning { cursor: grabbing; }
#cv[data-mode=place], #cv[data-mode=calibrate] { cursor: crosshair; }
#cv .cam { cursor: move; }
#cv .cam-label { cursor: move; }
#cv .handle { cursor: pointer; }
#cv .handle.size { cursor: nwse-resize; }
#cv text { font-family: system-ui, sans-serif; } /* el plano conserva su tipografía */
#planImg { image-rendering: auto; }
.canvas-hint { pointer-events: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); max-width: 90%; text-align: center; }
.scale-warn { position: absolute; bottom: 12px; left: 12px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.zoom-ctrl { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.zoom-ctrl button { width: 30px; height: 30px; border: 0; background: #f1f5f9; border-radius: 6px; cursor: pointer; font-size: 16px; }
.zoom-ctrl span { font-size: 12px; color: var(--muted); min-width: 44px; text-align: center; }
.empty-plan { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px; }
.empty-plan h2 { margin: 0; }

#cv .obj { cursor: move; }
#cv[data-mode=select] .hit { cursor: pointer; }
#cv[data-mode=wall], #cv[data-mode=cable], #cv[data-mode=measure], #cv[data-mode=rack] { cursor: crosshair; }
#cv:not([data-mode=select]) .obj, #cv:not([data-mode=select]) .hit { cursor: crosshair; }
#cv[data-mode=cable] .obj { cursor: copy; }
.toolbar { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.toolbar button { width: 36px; height: 36px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #334155; display: grid; place-items: center; }
.toolbar button:hover { background: #f1f5f9; }
.toolbar button.active { background: var(--brand); color: #fff; }
.layers-panel { position: absolute; top: 12px; right: 12px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); font-size: 12.5px; min-width: 150px; }
.layers-panel:empty { display: none; }
.layers-panel summary { padding: 7px 12px; font-weight: 600; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.layers-panel details[open] { padding-bottom: 6px; }
.layers-panel label { padding: 3px 12px; }
.layers-panel label.sub { padding-left: 30px; color: var(--muted); }
.canvas-hint kbd { background: #334155; border-color: #475569; color: #fff; }
.dot.hatch { background: repeating-linear-gradient(45deg, #94a3b8 0 2px, transparent 2px 4px); border: 1px dashed #475569; }
.line { display: inline-block; width: 16px; height: 3px; margin-right: 6px; vertical-align: 3px; border-radius: 2px; }
.cable-sum { padding-bottom: 10px; }
.kv.pad { padding: 6px 12px; border: 0; }
.props { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.props.row { flex-direction: row; }
.props.row .btn { flex: 1; }
.props output { font-weight: 700; color: var(--ink); }
.cam-head { display: flex; gap: 8px; align-items: center; }
.cam-head input { font-weight: 700; font-size: 15px; }
.ico.big svg { width: 34px; height: 34px; display: block; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.kv span { color: var(--muted); }
.kv strong { text-align: right; }
table.zones { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.zones th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 2px; border-bottom: 1px solid var(--line); }
table.zones td { padding: 4px 2px; border-bottom: 1px solid #f1f5f9; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.legend div { font-size: 12.5px; }
.shortcuts div { line-height: 1.9; }

@media (max-width: 1100px) {
  .editor { grid-template-columns: 220px 1fr 260px; }
}
@media (max-width: 800px) {
  .editor { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto auto; }
  .ed-left { order: 3; max-height: 40vh; }
  .ed-right { order: 4; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .page { --pad-t: 16px; --pad-x: 16px; }
}

/* ---------- Vista 3D ---------- */
.view3d { position: absolute; inset: 0; }
.view3d canvas { display: block; width: 100%; height: 100%; }
.panel3d { position: absolute; left: 12px; bottom: 12px; width: 230px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.panel3d summary { padding: 7px 12px; font-weight: 600; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.p3d-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.panel3d p { margin: 0; }
.ed-canvas.is3d #cv, .ed-canvas.is3d .toolbar, .ed-canvas.is3d .canvas-hint, .ed-canvas.is3d .zoom-ctrl, .ed-canvas.is3d .scale-warn { display: none !important; }
.labels3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl3d { position: absolute; left: 0; top: 0; background: rgba(255, 255, 255, .92); border: 1px solid #334155; border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 700; color: #0f172a; white-space: nowrap; margin-top: -4px; }
.layers-panel select.sub { margin: 2px 12px 6px 30px; width: calc(100% - 42px); font-size: 12px; padding: 3px 6px; }

/* ---------- Catálogo con pestañas / equipos ---------- */
.tabs-line { display: flex; gap: 4px; margin-left: 12px; }
.tabs-line button { border: 0; background: none; padding: 7px 14px; border-radius: 6px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs-line button:hover { background: #e2e8f0; color: var(--ink); }
.tabs-line button.active { background: var(--brand); color: #fff; }
.page-head.sub { margin-bottom: 14px; }
.tag.base { background: #f1f5f9; color: #475569; }
.tag.brand { background: #dcfce7; color: #166534; }

/* ---------- Equipos y grabación ---------- */
.bom-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.bom-main, .bom-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bom-side { position: sticky; top: 0; }
.table-wrap.flat { box-shadow: none; border: 1px solid var(--line); }
table.data.bom td { padding: 6px 6px; }
table.data.bom input, table.data.bom select { padding: 5px 6px; font-size: 13px; }
table.data.bom input.num { width: 76px; }
table.data.bom td.qty { font-weight: 700; font-size: 16px; text-align: center; }
table.data.bom td.calc { font-weight: 600; white-space: nowrap; }
table.data.bom tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid var(--line); }
.panel > .row { margin-top: 10px; }
.panel > .btn { margin-top: 10px; }
.rec-form { display: flex; flex-direction: column; gap: 10px; }
.results .big { text-align: center; padding: 14px; border-radius: 8px; background: #f1f5f9; margin-bottom: 10px; }
.results .big span { display: block; font-size: 38px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.results .big.ok { background: #dcfce7; } .results .big.ok span { color: #166534; }
.results .big.warn { background: #fef3c7; } .results .big.warn span { color: #92400e; }
.results .kv { padding: 6px 0; }
.warns { margin: 10px 0 0; padding-left: 18px; color: #92400e; font-size: 12.5px; }
.warns li { margin-bottom: 4px; }
.ok-txt { color: #166534; font-size: 13px; margin: 10px 0 0; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.legend-item { display: flex; gap: 10px; align-items: center; }
.legend-item .ico svg { width: 30px; height: 30px; display: block; }
@media (max-width: 1100px) { .bom-grid { grid-template-columns: 1fr; } .bom-side { position: static; } }
table.data.bom select { min-width: 110px; }
table.data.bom input[data-k=commercial], table.data.bom input[data-k=text] { min-width: 180px; }
table.data.bom td:nth-child(3) { min-width: 170px; }

/* ---------- Marca: formulario y vista previa ---------- */
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 20px; align-items: start; }
.brand-grid .panel h2 { margin-top: 18px; }
.brand-grid .panel h2:first-child, .brand-grid form h2:first-child { margin-top: 0; }
.brand-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; }
.brand-grid code { font-size: 12px; color: var(--muted); }
.fonts { display: flex; flex-direction: column; gap: 8px; }
.font-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.font-row > div { flex: 1; min-width: 0; }
.font-row .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-preview { --bp-primary: #0f3d68; --bp-accent: #0f3d68; --bp-text: #1e293b; --bp-muted: #64748b; --bp-soft: #f1f5f9; --bp-line: #cbd5e1; --bp-on: #fff; --bp-on-soft: #c3cfd9; font-family: 'BrandPreview', Helvetica, Arial, sans-serif; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; color: var(--bp-text); }
.bp-cover { display: grid; grid-template-columns: 38% 1fr; min-height: 180px; }
.bp-band { background: var(--bp-primary); color: var(--bp-on); padding: 22px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.bp-band small { font-size: 9px; letter-spacing: .15em; font-weight: 700; }
.bp-band strong { font-size: 17px; line-height: 1.15; font-weight: 700; }
.bp-band span { font-size: 11px; color: var(--bp-on-soft); }
.bp-right { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bp-logo { display: flex; flex-direction: column; gap: 4px; }
.bp-logo img { max-height: 34px; max-width: 150px; object-fit: contain; align-self: flex-start; }
.bp-logo b { color: var(--bp-accent); font-size: 13px; font-weight: 700; }
.bp-field { border-bottom: 1px solid var(--bp-line); padding-bottom: 4px; }
.bp-field small { display: block; font-size: 8px; color: var(--bp-muted); letter-spacing: .1em; }
.bp-field b { font-size: 12px; font-weight: 700; }
.bp-contact { font-size: 9px; color: var(--bp-muted); margin-top: auto; }
.bp-page { border-top: 1px dashed var(--bp-line); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bp-title { font-size: 16px; font-weight: 700; color: var(--bp-accent); padding-bottom: 6px; position: relative; }
.bp-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--bp-accent); }
.bp-thead { background: var(--bp-primary); color: var(--bp-on); font-size: 9px; font-weight: 700; padding: 4px 6px; margin-top: 4px; }
.bp-row { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--bp-line); padding: 4px 6px; }
.bp-row > b { font-size: 16px; font-weight: 700; width: 18px; }
.bp-row strong { display: block; font-size: 11px; font-weight: 700; }
.bp-row small { font-size: 9px; color: var(--bp-muted); }
.bp-row:nth-of-type(even) { background: var(--bp-soft); }
.bp-kpi { background: var(--bp-soft); padding: 6px 8px; margin-top: 4px; }
.bp-kpi small { display: block; font-size: 8px; color: var(--bp-muted); letter-spacing: .08em; }
.bp-kpi b { font-size: 18px; color: var(--bp-accent); font-weight: 700; }
.bp-foot { font-size: 8px; color: var(--bp-muted); margin-top: 4px; }
@media (max-width: 1000px) { .brand-grid { grid-template-columns: 1fr; } .brand-side { position: static; } }

.palette-edit { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pal-row { display: flex; gap: 8px; align-items: center; }
.pal-row input[type=color] { width: 40px; height: 32px; flex: none; }
.pal-row input:not([type]) { flex: 1; }
.pal-row code { width: 64px; }
.roles { display: flex; flex-direction: column; gap: 6px; }
.role-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; flex-wrap: wrap; }
.role-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.role-info small { font-size: 11.5px; color: #475569; }
.role-pick { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.18); cursor: pointer; padding: 0; display: inline-block; flex: none; }
.swatch.big { width: 30px; height: 30px; cursor: default; }
.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch.custom { display: grid; place-items: center; background: #fff; font-weight: 700; color: var(--muted); position: relative; overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.brand-grid h3 { margin: 14px 0 6px; font-size: 13px; }

/* ---------- Hub de disciplinas ---------- */
.disc-tabs { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; margin-left: 8px; flex-shrink: 0; }
.disc-tabs button { border: 0; background: #fff; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: #334155; cursor: default; display: inline-flex; gap: 4px; align-items: baseline; }
.disc-tabs button + button { border-left: 1px solid #cbd5e1; }
.disc-tabs button.active { background: var(--brand); color: #fff; }
.disc-tabs button:disabled { color: #94a3b8; background: #f8fafc; }
.disc-tabs small { font-size: 10px; font-weight: 600; }
.disc-pick { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; margin: 0; display: grid; gap: 4px; }
.disc-pick legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.disc-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px; }
.disc-chip { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; }
.disc-chip.cctv { background: var(--cctv-soft); color: var(--cctv); }
.disc-chip.wifi { background: var(--wifi-soft); color: var(--wifi); }
.disc-chip.alarma { background: var(--alarma-soft); color: var(--alarma); }
.disc-chip.audio { background: var(--audio-soft); color: var(--audio); }
.stale-warn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: min(640px, 90%); background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; padding: 8px 12px; border-radius: 8px; font-size: 13px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* ---------- WiFi ---------- */
.disc-tabs button[data-disc] { cursor: pointer; }
.ico.inline svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 4px; }
.band-cols { display: grid; grid-template-columns: 90px repeat(3, 1fr); gap: 6px 10px; align-items: center; }
.band-cols .hdr { font-size: 12px; font-weight: 600; color: var(--muted); }
table.data td .sub { display: block; color: var(--muted); font-size: 11.5px; }
table.data td.ap-eq { min-width: 240px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.right-stack { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-height: calc(100% - 70px); pointer-events: none; }
.right-stack > * { pointer-events: auto; }
.right-stack .layers-panel { position: static; }


label.full { grid-column: 1 / -1; }

/* ---------- Módulo WiFi: hojas de Ekahau ---------- */
.disc-tabs a { padding: 4px 10px; font-size: 12.5px; font-weight: 700; color: #334155; background: #fff; text-decoration: none; }
.disc-tabs a:hover { background: #f1f5f9; }
.disc-tabs > * + * { border-left: 1px solid #cbd5e1; }
.page-head .disc-tabs { margin-left: 0; }
.wifi-mod { display: flex; flex-direction: column; gap: 18px; max-width: 1400px; }
.wifi-mod h2 { margin: 0 0 4px; }
.wifi-mod textarea#notes { width: 100%; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ek-file { border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; }
.ek-file-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; flex-wrap: wrap; }
.page-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 10px 12px; }
.page-thumb { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; padding: 6px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.page-thumb:hover { border-color: var(--accent); }
.page-thumb.used { border-color: var(--ok); background: #f0fdf4; }
.page-thumb canvas { width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.pt-num { font-size: 11px; color: var(--muted); }
.pt-tag { font-size: 11.5px; font-weight: 600; min-height: 15px; line-height: 1.25; }
.pt-add { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.page-thumb.used .pt-add { color: var(--ok); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; margin-top: 10px; }
.sheet-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.sheet-prev { background: #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; min-height: 180px; cursor: zoom-in; }
.sheet-prev canvas { max-width: 100%; max-height: 360px; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sheet-prev canvas.legend { max-height: 34px; }
.sheet-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sheet-body label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.sheet-meta { display: flex; gap: 8px; align-items: center; }
.crop-bg { z-index: 60; }
.crop-modal { background: #fff; border-radius: 10px; width: min(1400px, 96vw); height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.crop-modal header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.crop-modal header h3 { margin: 0; font-size: 16px; }
.crop-stage { flex: 1; min-height: 0; display: grid; place-items: center; background: #cbd5e1; overflow: hidden; }
.crop-stage > * { grid-area: 1 / 1; }
.crop-stage canvas { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.crop-stage svg { cursor: crosshair; touch-action: none; }
.crop-stage svg .box.on { cursor: move; }
.crop-stage svg .h { cursor: pointer; }
.crop-modal footer { padding: 10px 16px; border-top: 1px solid var(--line); }
.crop-modal footer p { margin: 0 0 8px; }
.crop-modal footer .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
table.data.bom.items td { vertical-align: top; }
table.data.bom.items input.unit { width: 72px; }
table.data.bom.items td.it-main { min-width: 280px; width: 45%; }
table.data.bom.items td.it-main select, table.data.bom.items td.it-main input { width: 100%; }
table.data.bom.items td.it-main .muted { margin-top: 3px; }
table.data.bom.items td.it-act { white-space: nowrap; }
table.data.bom.items tr.it-group td { background: #f8fafc; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--muted); padding: 5px 8px; }

/* ---------- Alarma ---------- */
.legend-grid.one { grid-template-columns: 1fr; }
.props.legend-grid { display: grid; gap: 8px; }
.zone-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.zone-head { display: flex; gap: 10px; align-items: baseline; }
.zone-devs { display: flex; flex-wrap: wrap; gap: 6px; }
.zone-dev { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; background: #f8fafc; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 3px; }
.zone-dev i svg { width: 18px; height: 18px; display: block; }
.zone-card textarea { width: 100%; }
.results h3 { margin: 14px 0 6px; font-size: 13px; }

/* ---------- Audio ---------- */
[data-show][hidden] { display: none !important; }
.zone-pick { padding: 0 12px 8px; }
.zone-pick select { width: 100%; font-weight: 700; }
.zone-status { display: flex; gap: 6px; align-items: center; margin: 0; }
.zone-status i, .zone-line i { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.zone-status.warn, .zone-line.warn .muted { color: #b45309; }
.zone-line { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.zone-line i { margin-top: 4px; }
table.zones-tbl td { vertical-align: top; }
table.zones-tbl input[type=color] { width: 34px; height: 28px; padding: 0; border: 0; background: none; }
table.zones-tbl textarea { width: 100%; margin-top: 4px; font-size: 12px; }
table.zones-tbl .zone-dev { margin: 0 4px 4px 0; }
table.zones-tbl td:nth-child(2) { min-width: 180px; }
table.zones-tbl td:nth-child(2) input { width: 100%; font-weight: 700; }
table.zones-tbl td:nth-child(5) select { max-width: 240px; }
table.zones-tbl td:nth-child(7) { min-width: 140px; }

/* ---------- Lista final ---------- */
.list-sync { margin-bottom: 14px; }
.sync-warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 8px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sync-ok { color: var(--ok); font-size: 13px; display: flex; gap: 10px; align-items: center; }
table.final-list td { vertical-align: top; padding: 4px 4px; }
table.final-list input { width: 100%; min-width: 70px; font-size: 12.5px; padding: 4px 5px; }
table.final-list input.wide { min-width: 200px; }
table.final-list input.sm { min-width: 90px; }
table.final-list input.unit { min-width: 60px; width: 70px; }
table.final-list input.num { width: 76px; }
table.final-list td.drag { cursor: grab; color: #94a3b8; user-select: none; }
table.final-list td.num-cell { color: var(--muted); font-size: 12px; }
table.final-list tr.excluded td { opacity: 0.45; }
table.final-list tr.excluded input { text-decoration: line-through; }
.tag.origin.auto { background: #dbeafe; color: #1e3a8a; }
.tag.origin.catalogo { background: #dcfce7; color: #166534; }
.tag.origin.libre { background: #f1f5f9; color: #334155; }
.tag.edited { background: #fef3c7; color: #92400e; margin-left: 4px; }
table.final-list td.it-act { white-space: nowrap; }
table.final-list td:nth-child(3) { white-space: nowrap; }
/* El catálogo del editor no se aplasta: la columna se desplaza completa si no cabe. */
.ed-left > .palette { flex: 0 0 auto; min-height: 140px; }
.ed-left.alarma > *, .ed-left.audio > * { flex-shrink: 0; }
.ed-left.alarma .cam-list, .ed-left.audio .cam-list { flex: 0 0 auto; }
.pal-new { margin: 8px 10px 4px; }
/* Editor: amplificador por zona y zonas que alimenta un amplificador */
.zone-line .grow { flex: 1; min-width: 0; }
.zone-line select { margin-top: 4px; width: 100%; font-size: 12px; }
.amp-feeds { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid var(--line, #e2e8f0); border-radius: 6px; }
.amp-feeds .zsw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* =====================================================================================================
   Editor con cinta de opciones
   ===================================================================================================== */
.ed2 { flex: 1; display: grid; grid-template-rows: 48px auto minmax(0, 1fr) 28px; height: 100%; min-height: 0; --insp-w: 320px; }
.ed-titlebar { background: var(--brand); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 8px; min-width: 0; }
.tb-back { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .75); font-weight: 600; padding: 6px 8px; border-radius: 6px; white-space: nowrap; }
.tb-back:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tb-name { display: flex; flex-direction: column; line-height: 1.15; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .18); min-width: 60px; max-width: 360px; flex: 0 1 auto; }
.tb-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-name span { font-size: 11px; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ic { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: rgba(255, 255, 255, .85); background: none; border: 0; cursor: pointer; flex-shrink: 0; }
.tb-ic:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tb-ic:disabled { opacity: .35; cursor: default; background: none; }
.dsw { display: flex; background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 3px; gap: 2px; margin-left: 6px; flex-shrink: 0; }
.dsw button, .dsw a { font: inherit; font-weight: 600; font-size: 12px; color: rgba(255, 255, 255, .78); background: transparent; border: 0; height: 28px; padding: 0 11px; border-radius: 6px; display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.dsw button:hover, .dsw a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.dsw i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dsw button.on { background: #fff; color: var(--ink); }
.dsw a.ext { opacity: .8; }
.plansel { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, .08); border: 0; color: #fff; font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; min-width: 0; max-width: 220px; }
.plansel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plansel:hover { background: rgba(255, 255, 255, .14); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ed-titlebar .save-state { font-size: 12px; margin-right: 8px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.ed-titlebar .save-state.ok { color: #7fe0c4; }
.ed-titlebar .save-state.pending { color: #fcd34d; }
.ed-titlebar .save-state.error { color: #fda4af; }
.ed-titlebar .btn.primary { height: 32px; margin-left: 6px; }

.ribbon { background: #fff; border-bottom: 1px solid var(--line-2); position: relative; z-index: 4; min-width: 0; }
.rtabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); height: 34px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.rtabs button { font: inherit; font-weight: 600; font-size: 12.5px; color: var(--muted); background: transparent; border: 0; padding: 0 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.rtabs button:hover { color: var(--ink); }
.rtabs button.on { color: var(--ink); border-bottom-color: var(--brand); }
.rtabs button.ctx { color: var(--brand); background: var(--cyan-soft); border-radius: 6px 6px 0 0; margin-left: 8px; }
.rtabs button.ctx.on { border-bottom-color: var(--cyan); }
.rbody { display: flex; min-height: 100px; padding: 6px 6px 0; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.rg { display: flex; flex-direction: column; min-height: 94px; padding: 0 8px; border-right: 1px solid var(--line); flex-shrink: 0; }
.rg:last-child { border-right: 0; }
.rg .items { display: flex; gap: 3px; flex: 1; align-items: flex-start; }
.rg .glabel { font-size: 10.5px; color: var(--faint); text-align: center; padding: 2px 0 5px; letter-spacing: .3px; white-space: nowrap; }
.rbig { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 7px; min-width: 56px; max-width: 110px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center; line-height: 1.15; background: none; border: 1px solid transparent; }
.rbig .ico { width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--brand); }
.rbig .lb { display: flex; align-items: center; justify-content: center; gap: 2px; max-width: 100%; white-space: normal; line-height: 1.2; }
.rbig:hover, .rsm:hover { background: var(--hover); color: var(--ink); }
.rbig.on, .rbig.active, .rsm.active { background: var(--cyan-soft); border-color: #9fdce2; }
.rbig:disabled, .rsm:disabled { opacity: .4; cursor: default; background: none; }
.rcol { display: flex; flex-direction: column; gap: 0; }
.rsm { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--ink); background: none; border: 1px solid transparent; text-align: left; max-width: 220px; }
.rsm span { overflow: hidden; text-overflow: ellipsis; }
.rsm svg { color: var(--brand); }
.rsm .mini svg { width: 18px; height: 18px; display: block; }
.rinfo { font-size: 11.5px; line-height: 1.35; padding: 3px 8px; color: var(--ink); white-space: nowrap; }
.rinfo.muted { color: var(--faint); }
.rinfo b { font-weight: 700; }
.rfield { display: flex; flex-direction: row; align-items: center; gap: 6px; height: 26px; font-size: 12px; font-weight: 600; padding: 0 6px; color: var(--muted); white-space: nowrap; }
.rfield select, .rfield input { min-height: 0; height: 26px; padding: 2px 6px; font-size: 12px; width: auto; max-width: 170px; }
.rfield input[type=number] { width: 72px; }
.ribbon .seg button { height: 28px; }

.ed-work { display: grid; grid-template-columns: minmax(0, 1fr) var(--insp-w); min-height: 0; }
.ed2.noinsp .ed-work { grid-template-columns: minmax(0, 1fr) 0; }
.ed2.noinsp .inspector { display: none; }
.ed-work .ed-canvas { position: relative; overflow: hidden; min-height: 0; }
.inspector { background: #fff; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.itabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 6px; flex-shrink: 0; }
.itabs button { flex: 1 1 auto; justify-content: center; min-width: 0; font: inherit; padding: 10px 6px 8px; font-weight: 600; font-size: 12.5px; color: var(--muted); border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.itabs button:hover { color: var(--ink); }
.itabs button.on { color: var(--ink); border-bottom-color: var(--brand); }
.itabs .badge:empty { display: none; }
.ipane { flex: 1; min-height: 0; overflow-y: auto; }
.inspector .ed-right { border-left: 0; }
.statusbar { background: #fff; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 18px; padding: 0 14px; font-size: 11.5px; color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; }
.statusbar b { color: var(--ink); font-weight: 600; }
.statusbar .warn-txt { color: var(--warn); }
.statusbar span:empty { display: none; }
.statusbar .sb-hint { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.statusbar .sb-hint strong { color: var(--ink); }
.statusbar .sb-default { display: none; }
.statusbar #hint[hidden] ~ .sb-default { display: inline; }
.statusbar .sp { margin-left: auto; flex-shrink: 0; }
.statusbar kbd, .gal-bottom kbd { font-size: 10.5px; padding: 0 4px; }

/* Galería del catálogo (menú desplegable de Catálogo / Cámaras) */
.gallery { position: absolute; left: 12px; top: 0; width: min(780px, calc(100% - 24px)); height: min(470px, calc(100% - 16px)); background: #fff; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-3); border: 1px solid var(--line-2); border-top: 0; z-index: 12; display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.gallery[hidden] { display: none !important; }
.gallery.dragging { opacity: .15; pointer-events: none; }
.gal-top { grid-column: 1 / -1; display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; }
.gal-top .searchbox { flex: 1; width: auto; height: 34px; }
.gal-zone { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gal-cats { border-right: 1px solid var(--line); padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.gal-cats button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 12.5px; background: none; border: 0; cursor: pointer; color: var(--ink); text-align: left; }
.gal-cats button:hover { background: var(--hover); }
.gal-cats small { color: var(--faint); font-weight: 400; }
.gallery .palette { max-height: none; border: 0; overflow-y: auto; padding: 10px 12px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; align-content: start; }
.gallery .pal-group { grid-column: 1 / -1; padding: 8px 2px 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.gallery .pal-group:first-child { padding-top: 0; }
.gallery .pal-item { border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; display: flex; gap: 10px; align-items: center; min-width: 0; background: #fff; }
.gallery .pal-item:hover { border-color: var(--cyan); background: #fbfeff; }
.gallery .pal-item.active { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); background: #fff; }
.gallery .pal-item .ico svg { width: 34px; height: 34px; }
.gallery .pal-item > span:last-child { min-width: 0; }
.gallery .pal-item strong { font-size: 12px; line-height: 1.25; display: block; }
.gallery .pal-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 8px 12px; display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; }
.gal-bottom span { margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Capas (menú desplegable de la pestaña Vista) */
.layers-pop { position: absolute; top: 0; left: 12px; z-index: 12; background: #fff; border-radius: 0 0 10px 10px; box-shadow: var(--shadow-3); border: 1px solid var(--line-2); border-top: 0; padding: 8px 0 10px; min-width: 240px; font-size: 12.5px; max-height: calc(100% - 16px); overflow-y: auto; }
.layers-pop .lp-title { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 4px 14px 6px; }
.layers-pop label { padding: 4px 14px; }
.layers-pop label:hover { background: var(--hover); }
.layers-pop select.sub { margin: 2px 14px 6px 36px; width: calc(100% - 50px); font-size: 12px; padding: 3px 6px; min-height: 0; }
/* Controles sobre el plano */
.ed2 .zoom-ctrl { position: absolute; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 0; background: #fff; border-radius: 9px; box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.ed2 .zoom-ctrl button { width: 34px; height: 32px; border: 0; background: #fff; border-radius: 0; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.ed2 .zoom-ctrl button:hover { background: var(--hover); }
.ed2 .zoom-ctrl span { font-size: 12px; color: var(--muted); min-width: 48px; text-align: center; font-weight: 600; }
.ed2 .scale-warn { bottom: 14px; left: 14px; background: #fff8eb; color: #92400e; border: 1px solid #f6d58e; border-radius: 9px; box-shadow: var(--shadow); }
.ed2 .stale-warn { top: 14px; }
.empty-plan svg.lg { width: 44px; height: 44px; color: var(--faint); }
.ed2 .panel3d { left: 14px; bottom: 14px; border-radius: 10px; }
.ed2 .pane-title { padding: 14px 14px 6px; }
.ed2 .props { padding: 4px 14px 14px; }
.ed2 .kv.pad { padding: 6px 14px; }
.ico.inline svg { width: 18px; height: 18px; }
@media (max-width: 1400px) { .ed2 { --insp-w: 300px; } }
@media (max-width: 1200px) { .ed2 { --insp-w: 280px; } .tb-back span, .ed-titlebar .save-state { display: none; } .plansel { max-width: 170px; } }
@media (max-width: 1000px) { .ed2 { --insp-w: 250px; } .tb-name span { display: none; } .dsw button, .dsw a { padding: 0 8px; } }
@media (max-width: 800px) {
  .ed2 { grid-template-rows: auto auto minmax(0, 1fr) 28px; }
  .ed-titlebar { flex-wrap: wrap; padding: 6px 8px; row-gap: 6px; }
  .ed-work { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; }
  .inspector { border-left: 0; border-top: 1px solid var(--line-2); max-height: 45vh; }
}

/* ---------- Encabezado común de las páginas de un proyecto ---------- */
.proj-bar { margin: calc(-1 * var(--pad-t)) calc(-1 * var(--pad-x)) 22px; background: #fff; padding: 14px var(--pad-x) 0; border-bottom: 1px solid var(--line-2); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 6px; min-width: 0; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--cyan); }
.crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs svg { color: var(--faint); }
.pb-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pb-row .page-title { min-width: 0; }
.pb-row .page-title p { max-width: 760px; }
.pb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-actions .save-state { font-size: 12px; margin-right: 4px; }
.ptabs { display: flex; gap: 2px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.ptabs a { display: flex; align-items: center; gap: 7px; padding: 9px 14px 10px; color: var(--muted); font-weight: 600; font-size: 13px; border-bottom: 3px solid transparent; white-space: nowrap; }
.ptabs a:hover { color: var(--ink); }
.ptabs a.on { color: var(--ink); border-bottom-color: var(--cyan); }
.ptabs a svg { color: var(--faint); }
.ptabs a.on svg { color: var(--brand); }
.ok-txt { display: flex; align-items: center; gap: 6px; }
.sync-ok svg { color: var(--ok); }
.ptabs button { display: flex; align-items: center; gap: 7px; padding: 9px 14px 10px; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; border: 0; background: none; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; }
.ptabs button:hover { color: var(--ink); }
.ptabs button.on { color: var(--ink); border-bottom-color: var(--cyan); }
.ptabs button svg { color: var(--faint); }
.ptabs button.on svg { color: var(--brand); }
.proj-bar.notabs { padding-bottom: 18px; }

/* Minimapa del editor */
.minimap { position: absolute; left: 14px; bottom: 14px; width: 176px; height: 118px; background: #fff; border-radius: 9px; box-shadow: var(--shadow); padding: 6px; cursor: pointer; z-index: 3; touch-action: none; }
.minimap svg { width: 100%; height: 100%; display: block; background: #f6f7f9; border-radius: 5px; }
.ed2 .scale-warn { top: 14px; bottom: auto; left: 14px; }
@media (max-width: 1000px) { .minimap { width: 130px; height: 88px; } }

/* Diálogo de exportar: disciplina activa sin contenido */
.export-skip { display: flex; gap: 8px; align-items: flex-start; margin: -2px 0 6px 24px; padding: 8px 10px; border-radius: 7px; background: #fff8eb; color: #92400e; font-size: 12px; line-height: 1.4; }
.export-skip svg { margin-top: 1px; }
.disc-opt { align-items: flex-start; padding: 3px 0; }
.disc-opt input { margin-top: 3px; }
.disc-opt b { display: block; font-weight: 600; }
.disc-opt small { display: block; color: var(--muted); font-size: 11.5px; }

/* Vista previa del reporte (Marca y usuarios) con el diseño nuevo */
.bp-cover { grid-template-columns: 42% 1fr; min-height: 200px; }
.bp-band { position: relative; overflow: hidden; justify-content: flex-start; padding: 14px 12px; }
.bp-band .bp-mark { position: absolute; left: 22%; top: 20%; width: 58%; height: auto; }
.bp-band .bp-lk { position: relative; }
.bp-bottom { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.bp-bottom small { color: #00a4b4; }
.bp-bottom em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 1px 6px; margin-right: 4px; align-self: flex-start; }
.bp-bottom em + em { margin-top: -2px; }
.bp-bottom em i { width: 5px; height: 5px; border-radius: 50%; }
.bp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bp-tile { border: 1px solid var(--bp-line); border-top: 3px solid var(--c); border-radius: 5px; padding: 5px 6px; }
.bp-tile small { display: block; font-size: 8px; font-weight: 700; color: var(--c); }
.bp-tile b { font-size: 16px; font-weight: 700; margin-right: 3px; }
.bp-tile span { font-size: 8px; color: var(--bp-muted); }
.bp-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--bp-line); padding-bottom: 6px; }
.bp-head .bp-tag { background: #2f6fe0; color: #fff; font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: .06em; }
.bp-head .bp-title { padding: 0; font-size: 13px; color: var(--bp-text); }
.bp-head .bp-title::after { display: none; }
.bp-head > b { margin-left: auto; font-size: 8px; color: var(--bp-muted); }
.bp-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--bp-line); padding-top: 4px; }
.bp-pg { background: var(--bp-primary); color: #fff; font-weight: 700; padding: 1px 5px; border-radius: 2px; }

/* ---------- Diseñador de gabinetes ---------- */
.rk-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr) 310px; grid-template-areas: 'pal main side'; gap: 14px; align-items: start; }
.rk-pal { grid-area: pal; }
.rk-main { grid-area: main; }
.rk-side { grid-area: side; }
.rk-main { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.rk-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rk-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.rk-tab { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); text-align: left; }
.rk-tab span { display: flex; flex-direction: column; line-height: 1.2; }
.rk-tab small { color: var(--faint); font-size: 11px; }
.rk-tab svg { color: var(--brand); }
.rk-tab:hover { border-color: #b9c0cc; }
.rk-tab.on { border-color: var(--cyan); background: var(--cyan-soft); box-shadow: 0 0 0 2px rgba(0, 164, 180, .15); }
.rk-stage { display: flex; gap: 28px; justify-content: center; align-items: flex-start; padding: 22px 16px; background: #eef1f5; background-image: radial-gradient(circle, #d6dbe3 1px, transparent 1px); background-size: 18px 18px; min-height: 420px; overflow: auto; user-select: none; touch-action: none; }
.rk-view { flex: 0 1 430px; min-width: 0; }
.rk-view svg { display: block; width: 100%; height: auto; max-height: 78vh; filter: drop-shadow(0 8px 18px rgba(21, 26, 48, .25)); }
.rk-view .rk-item { cursor: grab; }
.rk-view .rk-item.ghost { cursor: default; }
.rk-view .rk-item:hover rect:first-child { filter: brightness(1.08); }
.rk-empty { text-align: center; padding: 50px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rk-empty svg.lg { width: 44px; height: 44px; color: var(--faint); }
.rk-empty h3 { margin: 4px 0 0; color: var(--ink); }
.rk-foot { display: flex; align-items: center; gap: 18px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 12.5px; }
.rk-occ { display: flex; align-items: center; gap: 10px; }
.rk-occ .bar { width: 160px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rk-occ .bar i { display: block; height: 100%; border-radius: 4px; }
.rk-foot .warn-txt { display: flex; align-items: center; gap: 6px; }
.rk-side { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 0; max-height: calc(100vh - 140px); display: flex; flex-direction: column; min-width: 0; }
.rk-side .ipane { overflow-y: auto; }
.rk-head { display: flex; align-items: center; gap: 10px; }
.rk-head b { display: block; font-size: 14px; }
.rk-head small { color: var(--muted); font-size: 12px; }
.rk-kind { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--cyan-soft); color: var(--brand); flex-shrink: 0; }
.rk-kind.big { width: 38px; height: 38px; background: var(--c); color: #fff; }
.rk-unit { display: flex; gap: 10px; align-items: center; padding: 8px 14px; cursor: grab; border-left: 3px solid transparent; }
.rk-unit:hover { background: var(--hover); border-left-color: var(--cyan); }
.rk-unit b { display: block; font-size: 12.5px; }
.rk-unit small { color: var(--muted); font-size: 11.5px; }
.rk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.rk-tray { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rk-tray span { flex: 1; min-width: 0; }
.rk-tray b { display: block; font-size: 12.5px; }
.rk-tray small { color: var(--muted); }
.rk-note { display: flex; gap: 8px; align-items: center; margin: 14px; padding: 10px 12px; border-radius: 8px; background: var(--wifi-soft); color: var(--ok); font-weight: 600; font-size: 12.5px; }
.rk-side .props .row .btn { flex: 1; }
/* Pantallas medianas: columnas laterales más angostas; menores: la lista y las propiedades comparten la columna
   izquierda (cada una con su propio desplazamiento); angostas: todo en una columna. */
.rk-cols { display: contents; }
@media (max-width: 1500px) { .rk-layout { grid-template-columns: 232px minmax(0, 1fr) 280px; } }
@media (max-width: 1180px) {
  .rk-layout { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: 'pal main'; }
  .rk-cols { display: flex; flex-direction: column; gap: 12px; grid-area: pal; position: sticky; top: 0; height: calc(100vh - 140px); min-width: 0; }
  .mod-page .rk-cols { top: 156px; height: calc(100vh - 224px); }
  .rk-cols .rk-pal, .mod-page .rk-cols .rk-pal { position: static; max-height: none; flex: 0 1 44%; min-height: 150px; }
  .rk-cols .rk-side, .mod-page .rk-cols .rk-side { position: static; max-height: none; flex: 1 1 56%; min-height: 180px; }
}
@media (max-width: 820px) {
  .rk-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'pal' 'main'; }
  .rk-cols, .mod-page .rk-cols { position: static; height: auto; }
  .rk-cols .rk-pal, .mod-page .rk-cols .rk-pal { flex: none; max-height: 300px; }
  .rk-cols .rk-side, .mod-page .rk-cols .rk-side { flex: none; }
}
@media (max-width: 640px) { .rk-stage { flex-direction: column; align-items: center; } .rk-view svg { height: auto; width: 100%; } }

/* ---------- Módulos dentro del espacio de trabajo (WiFi, Gabinetes, listas de equipos) ---------- */
.ed2.modmode { grid-template-rows: 48px minmax(0, 1fr); }
.ed2.modmode > .ribbon, .ed2.modmode > .ed-work, .ed2.modmode > .statusbar, .ed2.modmode #planSel,
.ed2.modmode .tb-right > .save-state, .ed2.modmode #undo, .ed2.modmode #redo { display: none; }
.ed2.modmode { grid-template-columns: minmax(0, 1fr); }
.ed-mod { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.ed-mod[hidden] { display: none; }
.mod-page { --pad-t: 0px; --pad-x: 28px; flex: 1; min-height: 0; overflow: auto; padding: 0 var(--pad-x) 40px; }
.mod-page > .pad { padding: 24px 0; }
.mod-ribbon { position: sticky; top: 0; margin: 0 calc(-1 * var(--pad-x)) 20px; z-index: 6; }
.mod-ribbon .rtabs { position: relative; }
.mod-ribbon .rt-right { margin-left: auto; display: flex; align-items: center; padding-right: 6px; }
.mod-ribbon .save-state { font-size: 12px; white-space: nowrap; }
.mod-page [id] { scroll-margin-top: 160px; }
.mod-page .rk-side { top: 156px; max-height: calc(100vh - 224px); }
@media (max-width: 800px) {
  .ed2.modmode { grid-template-rows: auto minmax(0, 1fr); }
  .mod-page { --pad-x: 16px; }
}
/* Tablas anchas: se desplazan dentro de su panel, nunca ensanchan la página. */
.table-scroll { overflow-x: auto; max-width: 100%; }
/* Diseñador de gabinetes: tema, montaje y equipos sobre bandeja */
.rk-segs { gap: 6px; padding-top: 2px; }
.rk-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #3c4152; font-weight: 600; }
.rk-mount { display: flex; width: 100%; }
.rk-mount button { flex: 1; font-size: 11.5px; line-height: 1.15; white-space: normal; padding: 4px 6px; min-height: 30px; justify-content: center; text-align: center; }
.rk-pick { cursor: pointer; }
.rk-pick:hover b { color: var(--cyan); }
.rk-tray.bad b { color: var(--alarma); }
.rk-unit .icon-btn { margin-left: auto; flex-shrink: 0; }
.rk-unit > span:nth-child(2) { min-width: 0; flex: 1; }
.rk-hidden { margin: 10px 14px 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.rk-hidden summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.rk-hidden[open] summary { margin-bottom: 6px; }
.rk-view .rk-dev { cursor: ew-resize; }
/* Ficha técnica en las tablas del catálogo */
.actions .btn.ficha { color: var(--cyan); border-color: #9fdce2; background: var(--cyan-soft); }
.actions .btn.ghost { color: var(--muted); }
.actions .btn { vertical-align: middle; }
/* Nota de una línea de equipos con "Recordar" (se guarda en el artículo del catálogo) */
.it-note { display: flex; align-items: center; gap: 4px; }
.it-note input { flex: 1; min-width: 96px; }
.it-remember { color: var(--faint); flex-shrink: 0; }
.it-remember:hover { color: var(--cyan); }
.it-remember.on { color: var(--cyan); }
.it-remember.on svg { fill: currentColor; }
/* Quién más está en el proyecto (barra de título del editor) */
.tb-people { display: flex; align-items: center; margin-left: auto; padding-left: 8px; flex-shrink: 0; }
.tb-people[hidden] { display: none; }
.tb-people:not([hidden]) + .tb-right { margin-left: 8px; }
.person { width: 28px; height: 28px; border-radius: 50%; background: var(--c, #5f6b7a); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--brand); margin-left: -6px; cursor: default; letter-spacing: .3px; }
.person:first-child { margin-left: 0; }
.person.same { box-shadow: 0 0 0 2px #7fe0c4; }
.person.more { background: rgba(255, 255, 255, .18); }
.stale-warn { flex-wrap: wrap; width: min(640px, 90%); }
.stale-warn > svg { flex-shrink: 0; }
.stale-warn #staleMsg { flex: 1 1 280px; min-width: 0; line-height: 1.35; }
.stale-warn .btn { flex-shrink: 0; }

/* Gabinetes: lista de la izquierda (por colocar y piezas del catálogo) y arrastre con vista previa. */
.rk-pal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 0; max-height: calc(100vh - 140px); display: flex; flex-direction: column; min-width: 0; }
.mod-page .rk-pal { top: 156px; max-height: calc(100vh - 224px); }
.rk-pal-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 9px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; min-height: 46px; }
.rk-pal-head b { font-size: 13.5px; }
.rk-pal-head .badge:empty { display: none; }
.rk-pal-body { overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.rk-pal .pad { padding: 10px 14px 2px; margin: 0; }
.rk-pal .rk-unit { padding: 7px 10px 7px 6px; gap: 8px; user-select: none; touch-action: none; }
.rk-pal .rk-unit.piece { padding-left: 8px; }
.rk-grip { color: var(--faint); display: inline-flex; flex-shrink: 0; }
.rk-unit:hover .rk-grip { color: var(--cyan); }
.rk-thumb { width: 44px; height: 26px; object-fit: contain; border-radius: 4px; background: #f1f3f6; border: 1px solid var(--line); flex-shrink: 0; }
.rk-pieces { margin: 10px 10px 4px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px 8px; }
.rk-pieces summary { cursor: pointer; font-weight: 700; font-size: 12.5px; padding: 0 8px; }
.rk-pieces[open] summary { margin-bottom: 4px; }
.rk-pieces > p { padding: 0 8px; margin: 2px 0 4px; }
.rk-pieces .pane-title.sub { padding: 8px 8px 2px; font-size: 10.5px; }
.rk-pieces .btn.block { margin: 8px 6px 0; width: calc(100% - 12px); }
.rk-view.drop svg { cursor: grabbing; }
body.rk-dragging, body.rk-dragging * { cursor: grabbing !important; user-select: none !important; }
.rk-dragchip { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; background: var(--brand); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.3; box-shadow: 0 6px 18px rgba(21, 26, 48, .3); max-width: 280px; display: flex; flex-direction: column; }
.rk-dragchip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-dragchip span { opacity: .85; }
.rk-dragchip span.bad { color: #ffb4b4; opacity: 1; font-weight: 600; }
.btn.front.has { padding-left: 4px; gap: 6px; }
.btn.front.has img { width: 34px; height: 20px; object-fit: contain; border-radius: 3px; background: #f1f3f6; }

/* Proyectos: buscador con etiquetas (texto por campo, filtros, agrupación) y menús de Filtros / Agrupar / Favoritos. */
.osearch { position: relative; flex: 1 1 380px; max-width: 640px; min-width: 240px; }
.os-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 3px 10px; background: #fff; color: var(--muted); cursor: text; }
.os-box:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 164, 180, .18); }
.os-box > svg { flex-shrink: 0; }
.os-box input { flex: 1 1 120px; min-width: 100px; border: 0; padding: 0; box-shadow: none !important; min-height: 26px; height: 26px; background: transparent; }
.os-facets { display: contents; }
.facet { display: inline-flex; align-items: center; gap: 5px; background: var(--brand); color: #fff; border-radius: 6px; padding: 2px 3px 2px 8px; font-size: 12px; line-height: 1.5; max-width: 100%; }
.facet i { font-style: normal; opacity: .75; }
.facet b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet em { font-style: normal; opacity: .7; font-weight: 400; }
.facet.f { background: #0e7f8c; }
.facet.g { background: #5b4bb5; }
.facet button { border: 0; background: none; color: inherit; display: inline-flex; padding: 2px; border-radius: 4px; cursor: pointer; opacity: .8; }
.facet button:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.os-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-3); padding: 5px; max-height: 360px; overflow-y: auto; }
.os-opt { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; padding: 7px 9px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.os-opt svg { color: var(--faint); flex-shrink: 0; }
.os-opt i { font-style: normal; color: var(--muted); }
.os-opt.on, .os-opt:hover { background: var(--hover); }
.os-opt.val { padding-left: 22px; }
.os-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.os-btns .btn.on { border-color: var(--cyan); background: var(--cyan-soft); }
.os-menu { max-width: min(760px, calc(100vw - 16px)); overflow-y: auto; }
.os-cols { display: flex; gap: 6px; flex-wrap: wrap; }
.os-cols > div { min-width: 168px; flex: 1 1 168px; }
.os-check > svg { visibility: hidden; color: var(--cyan); }
.os-check.on > svg { visibility: visible; }
.os-check.on { color: var(--brand); }
.os-check small { margin-left: auto; color: var(--faint); font-weight: 500; }
.os-hint { padding: 4px 10px 6px; margin: 0; max-width: 260px; }
.os-fav { display: flex; align-items: center; gap: 2px; }
.os-fav .mi { flex: 1; min-width: 0; }
.os-menu .mi:disabled { opacity: .45; cursor: default; }
.os-count { margin: -6px 0 14px; }
.pgroup { margin-bottom: 14px; }
.pgroup > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: var(--shadow); font-size: 13.5px; list-style: none; }
.pgroup > summary::-webkit-details-marker { display: none; }
.pgroup > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; margin-right: 2px; }
.pgroup[open] > summary::before { transform: rotate(45deg); }
.pgroup .pg-l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pgroup .pg-body { padding: 14px 0 2px; }
.pgroup.d1 { margin-left: 18px; }
.pgroup.d1 > summary { background: #f4f6f9; box-shadow: none; }
.pgroup.d2 { margin-left: 18px; }
.pgroup.d2 > summary { background: none; box-shadow: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.pc-co { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-co svg { flex-shrink: 0; }
.co-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
.co-row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.co-row input { flex: 1; min-width: 0; }
.co-row .small { white-space: nowrap; }