@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap");
    :root {
      /* Base dashboard */
      --bg: #0e0f10;
      --card: #0f1216;
      --muted: #9aa4b2;
      --text: #eaeef4;
      --border: #1f2937;
      --shadow: 0 10px 28px rgba(0, 0, 0, .35);
      --r: 14px;

      /* Typo tokens */
      --fs-12: clamp(11px, .8vw, 12px);
      --fs-13: clamp(12px, .9vw, 13px);
      --fs-14: clamp(13px, 1vw, 14px);
      --fs-22: clamp(18px, 2.2vw, 22px);
      --pad: clamp(10px, 1.4vw, 14px);

      /* Layout colors */
      --occupied: #1b2a40;
      --vacio: #232a36;
      --layout-pad: 10px;

      /* Rail size for monitors */
      --monitor-rail: 70px;

      /* Scrollbar PRO (unificado) */
      --sb-size: 10px;
      --sb-track: rgba(15, 18, 22, .90);
      --sb-thumb: rgba(255, 255, 255, .10);
      --sb-thumb-hover: rgba(255, 255, 255, .16);
      --sb-border: 2px solid rgba(15, 18, 22, .90);

      --head-bg: #111418;
      --head-fg: #e6e6e6;
      --head-border: #1e2329;

      /* Skeleton */
      --sk-base: #1b2330;
      --sk-hi: #273246;
    }

    :root[data-theme="light"] {
      --bg: #f5f7fb;
      --card: #ffffff;
      --muted: #6b778c;
      --text: #1f2937;
      --border: #d7dee8;
      --shadow: 0 12px 26px rgba(15, 23, 42, .12);
      --occupied: #dfe7f4;
      --vacio: #eef2f7;
      --sb-track: rgba(236, 240, 246, .95);
      --sb-thumb: rgba(31, 41, 55, .18);
      --sb-thumb-hover: rgba(31, 41, 55, .26);
      --sb-border: 2px solid rgba(236, 240, 246, .95);

      --head-bg: #ffffff;
      --head-fg: #1f2937;
      --head-border: #d7dee8;

      /* Skeleton */
      --sk-base: #e2e8f0;
      --sk-hi: #f1f5f9;
    }

    /* ===== Skeleton (layout boot) ===== */
    .layout-skeleton {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      grid-template-rows: 56px 1fr;
      background: var(--bg);
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }
    html[data-layout-ready="1"] .layout-skeleton {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease, visibility 0s linear .2s;
    }
    @media (prefers-reduced-motion: reduce) {
      html[data-layout-ready="1"] .layout-skeleton { transition: none; }
    }
    html:not([data-layout-ready="1"]) .dash-wrap {
      opacity: 0;
      pointer-events: none;
    }
    html[data-layout-ready="1"] .dash-wrap {
      opacity: 1;
      transition: opacity .2s ease;
    }

    .sk-head {
      background: var(--head-bg);
      border-bottom: 1px solid var(--head-border);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
    }
    .sk-main {
      display: grid;
      grid-template-columns: minmax(280px, 360px) 1fr;
      gap: 12px;
      padding: 12px;
      min-height: 0;
    }
    .sk-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      padding: 12px;
      min-height: 0;
    }
    .sk-sidebar {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .sk-layout {
      position: relative;
      overflow: hidden;
    }
    .sk-grid {
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.04) 70px 71px),
        repeating-linear-gradient(180deg, transparent 0 70px, rgba(255,255,255,.04) 70px 71px);
      opacity: .6;
      pointer-events: none;
    }
    .sk-row {
      display: grid;
      grid-template-columns: 1fr 60px;
      gap: 10px;
      align-items: center;
    }
    .sk-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .sk-line,
    .sk-pill,
    .sk-square,
    .sk-title {
      background: linear-gradient(90deg, var(--sk-base), var(--sk-hi), var(--sk-base));
      background-size: 200% 100%;
      animation: sk-shimmer 1.2s ease-in-out infinite;
      border-radius: 10px;
    }
    .sk-title { height: 18px; width: 240px; }
    .sk-line { height: 12px; }
    .sk-pill { height: 16px; border-radius: 999px; }
    .sk-square { width: 28px; height: 28px; border-radius: 8px; }
    .sk-w-40 { width: 40%; }
    .sk-w-60 { width: 60%; }
    .sk-w-80 { width: 80%; }

    @keyframes sk-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    :root[data-theme="light"] .card h2 {
      color: #1f2937;
      border-bottom-color: #d7dee8;
      background: #f8fafc;
    }
    :root[data-theme="light"] label { color: #5f6c82; }
    :root[data-theme="light"] input, 
    :root[data-theme="light"] select {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
    }
    :root[data-theme="light"] button {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
    }
    :root[data-theme="light"] button:hover { background: #f2f5fb; }

    :root[data-theme="light"] .card.sidebar {
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border-color: #d7dee8;
      box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
      backdrop-filter: none;
    }
    :root[data-theme="light"] .card.sidebar > h2 {
      background: #f8fafc;
      border-bottom-color: #e2e8f0;
    }
    :root[data-theme="light"] .headTitle .t { color: #1f2937; }
    :root[data-theme="light"] .headTitle .d { color: #6b778c; }
    :root[data-theme="light"] .sidebar-toolbar { border-top-color: #e2e8f0; }
    :root[data-theme="light"] .miniHint { color: #6b778c; border-top-color: #e2e8f0; }
    :root[data-theme="light"] .miniHint.bad {
      color: #991b1b;
      border-top-color: rgba(239, 68, 68, .35);
    }
    :root[data-theme="light"] .miniHint.warn {
      color: #92400e;
      border-top-color: rgba(245, 158, 11, .45);
    }
    :root[data-theme="light"] .badge {
      background: #f1f5fb;
      border-color: #d7dee8;
      color: #4b5563;
    }
    :root[data-theme="light"] .badge b { color: #1f2937; }
    :root[data-theme="light"] .badge.ok {
      color: #166534;
      border-color: rgba(22, 163, 74, .35);
      background: rgba(22, 163, 74, .10);
    }
    :root[data-theme="light"] .badge.warn {
      color: #92400e;
      border-color: rgba(245, 158, 11, .35);
      background: rgba(245, 158, 11, .12);
    }
    :root[data-theme="light"] .badge.bad {
      color: #991b1b;
      border-color: rgba(239, 68, 68, .35);
      background: rgba(239, 68, 68, .12);
    }
    :root[data-theme="light"] .monitorPreview {
      border-color: rgba(2, 132, 199, .9);
      background: rgba(2, 132, 199, .12);
      color: #075985;
      box-shadow: 0 8px 18px rgba(2, 132, 199, .18);
    }
    :root[data-theme="light"] .monitorPreview.bad {
      border-color: rgba(220, 38, 38, .9);
      background: rgba(220, 38, 38, .12);
      color: #991b1b;
      box-shadow: 0 8px 18px rgba(220, 38, 38, .18);
    }
    :root[data-theme="light"] .monitorPreview.warn {
      border-color: rgba(217, 119, 6, .95);
      background: rgba(217, 119, 6, .14);
      color: #92400e;
      box-shadow: 0 8px 18px rgba(217, 119, 6, .2);
    }
    :root[data-theme="light"] details.section {
      background: #f8fafc;
      border-color: #e2e8f0;
      box-shadow: none;
    }
    :root[data-theme="light"] details.section > summary {
      background: #f1f5f9;
      color: #1f2937;
    }
    :root[data-theme="light"] details.section > summary:hover {
      background: #e9eff8;
    }
    :root[data-theme="light"] details.section[open] {
      box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    }
    :root[data-theme="light"] .sumLeft .k { color: #64748b; }
    :root[data-theme="light"] .sumLeft .s { color: #1f2937; }
    :root[data-theme="light"] .chev {
      background: #ffffff;
      border-color: #d7dee8;
      color: #475569;
    }
    :root[data-theme="light"] details.section > summary:hover .chev {
      background: #eef2f7;
      color: #1f2937;
      border-color: #cbd5e1;
    }
    :root[data-theme="light"] .sectionBody {
      border-top-color: #e2e8f0;
      background: #ffffff;
    }
    :root[data-theme="light"] .segBtn {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
    }
    :root[data-theme="light"] .segBtn.active {
      background: #e8f0ff;
      border-color: #bcd1ff;
      box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
    }
    :root[data-theme="light"] .card.sidebar input,
    :root[data-theme="light"] .card.sidebar select {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
    }
    :root[data-theme="light"] .card.sidebar button {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
    }
    :root[data-theme="light"] .card.sidebar button:hover {
      background: #f2f5fb;
      border-color: #cfd8e6;
    }
    :root[data-theme="light"] .card.sidebar button.primary {
      background: #2563eb;
      border-color: #1d4ed8;
      color: #fff;
      box-shadow: 0 10px 20px rgba(37, 99, 235, .2);
    }
    :root[data-theme="light"] .card.sidebar button.danger {
      background: #dc2626;
      border-color: #b91c1c;
      color: #fff;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 14px/1.4 "Montserrat", "Roboto", sans-serif;
    }

    .dash-wrap, .wrap {
      padding: 12px 14px;
      max-width: 1240px;
      margin: 0 auto;
    }

    /* Header neutral */
    header {
      background: var(--head-bg);
      border-bottom: 1px solid var(--head-border);
      color: var(--head-fg);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 10px 14px;
      flex-wrap: wrap;
    }

    header .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    header .controls .muted {
      color: rgba(17, 24, 39, .85);
      font-weight: 700;
      font-size: var(--fs-12);
    }
    header .page-title { display: none; }

    .hTitle {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .hSub {
      font-size: var(--fs-12);
    }

    .topbar {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .title {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    h1 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -.02em;
      font-weight: 700;
    }

    .sub {
      color: var(--muted);
      font-size: 13px;
    }

    /* Layout grid */
    .grid2 {
      display: grid;
      grid-template-columns:420px 1fr;
      gap: 14px;
      align-items: start;
    }

    .is-hidden { display: none !important; }
    .span-full { width: 100%; }

    /* Cards base */
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .card h2 {
      margin: 0;
      font-size: var(--fs-14);
      font-weight: 750;
      padding: 14px;
      border-bottom: 1px solid var(--border);
      color: #e7edf6;
    }

    /* Form base (global) */
    label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    input, select, button {
      font: inherit;
    }

    input, select {
      height: 36px;
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid #273244;
      background: #0b0f14;
      color: var(--text);
      outline: none;
      min-width: 130px;
    }

    input:focus, select:focus {
      border-color: rgba(37, 99, 235, .65);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
    }

    button {
      height: 40px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid #273244;
      background: #111827;
      color: #fff;
      font-weight: 750;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      line-height: 1;
      touch-action: manipulation;
    }

    button:hover {
      background: #0f172a;
    }

    button.primary {
      background: rgba(59, 130, 246, .18);
      border-color: rgba(59, 130, 246, .35);
    }

    button.danger {
      background: rgba(239, 68, 68, .14);
      border-color: rgba(239, 68, 68, .35);
      color: #fecaca;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .03);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
    }

    .pill b {
      color: var(--text);
      font-weight: 700;
    }

    .small {
      font-size: 12px;
      color: var(--muted);
    }

    .ok {
      color: rgba(22, 163, 74, .9);
    }

    .bad {
      color: rgba(185, 28, 28, .9);
    }

    .kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 11px;
      border: 1px solid rgba(17, 24, 39, .35);
      background: rgba(17, 24, 39, .10);
      padding: 3px 6px;
      border-radius: 8px;
      color: #111827;
    }

    .kbd.dark {
      color: var(--text);
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .15);
    }

    .log {
      background: rgba(0, 0, 0, .22);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      padding: 10px;
      font-size: 12px;
      color: var(--muted);
      max-height: 150px;
      overflow: auto;
      white-space: pre-wrap;
      margin: 0;
    }

    /* =========================
       Scrollbar PRO (unificado)
       ========================= */
    .scrollbar-pro {
      scrollbar-gutter: stable;
      scrollbar-width: thin; /* Firefox */
      scrollbar-color: var(--sb-thumb) var(--sb-track); /* Firefox */
    }

    .scrollbar-pro::-webkit-scrollbar {
      width: var(--sb-size);
      height: var(--sb-size);
    }

    .scrollbar-pro::-webkit-scrollbar-track {
      background: var(--sb-track);
      border-radius: 999px;
    }

    .scrollbar-pro::-webkit-scrollbar-thumb {
      background: var(--sb-thumb);
      border-radius: 999px;
      border: var(--sb-border);
    }

    .scrollbar-pro::-webkit-scrollbar-thumb:hover {
      background: var(--sb-thumb-hover);
    }

    /* ======= LAYOUT AREA ======= */
    .layout-wrap {
      padding: 12px;
    }

    .legend {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .sw {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      border: 1px solid var(--border);
    }

    .sw.empty {
      background: #000;
      border-color: #222;
    }

    .sw.occ {
      background: var(--occupied);
    }

    .sw.vac {
      background: var(--vacio);
    }

    .sw.mon {
      background: rgba(16, 185, 129, .18);
      border-color: rgba(16, 185, 129, .55);
    }

    .layout-scroll {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(0, 0, 0, .18);
      position: relative;
      max-height: 70vh;
      cursor: grab;
    }
    .layout-scroll.is-dragging {
      cursor: grabbing;
      user-select: none;
    }
    :root[data-theme="light"] .layout-scroll {
      background: #ffffff;
      border-color: #d7dee8;
      box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    }

    .layout-stage {
      position: relative;
      display: inline-block;
      padding-left: 0;
      padding-right: 0;
      isolation: isolate;
    }

    .layout-stage.hasMonLeft {
      padding-left: var(--monitor-rail);
    }

    .layout-stage.hasMonRight {
      padding-right: var(--monitor-rail);
    }

    .layout-stage.hasMonTop {
      padding-top: var(--monitor-rail);
    }

    .layout-stage.hasMonBottom {
      padding-bottom: var(--monitor-rail);
    }

    .monitorRail {
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--monitor-rail);
      background: linear-gradient(180deg, rgba(16, 185, 129, .10), rgba(16, 185, 129, .06)),
      rgba(0, 0, 0, .20);
      z-index: 1;
      pointer-events: auto;
    }

    .monitorRail.left {
      left: 0;
      border-right: 2px solid rgba(255, 196, 0, .95);
    }

    .monitorRail.right {
      right: 0;
      border-left: 2px solid rgba(255, 196, 0, .95);
    }

    .monitorRail.top,
    .monitorRail.bottom {
      left: 0;
      right: 0;
      width: auto;
      height: var(--monitor-rail);
    }

    .monitorRail.top {
      top: 0;
      bottom: auto;
      border-bottom: 2px solid rgba(255, 196, 0, .95);
    }

    .monitorRail.bottom {
      bottom: 0;
      top: auto;
      border-top: 2px solid rgba(255, 196, 0, .95);
    }

    .layout {
      display: grid;
      gap: 2px;
      padding: var(--layout-pad);
      min-width: 820px;
      position: relative;
      z-index: 2;
    }

    .overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 40;
    }

    .overlay-modules {
      z-index: 20;
    }

    .hdrCell {
      position: sticky;
      z-index: 100;
      background: #0b1118;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 6px;
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      box-shadow:
        0 1px 0 rgba(0, 0, 0, .35),
        1px 0 0 rgba(0, 0, 0, .35);
    }
    :root[data-theme="light"] .hdrCell {
      background: #f5f7fb;
      border-color: #d7dee8;
      color: #4b5563;
      box-shadow:
        0 1px 0 rgba(15, 23, 42, .12),
        1px 0 0 rgba(15, 23, 42, .12);
    }

    .hdrTop {
      position: sticky;
      top: var(--layout-pad);
      z-index: 110;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hdrLeft {
      position: sticky;
      left: var(--layout-pad);
      z-index: 110;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .layout-stage.hasMonLeft .hdrLeft {
      left: calc(var(--layout-pad) + var(--monitor-rail));
    }

    .hdrCorner {
      position: sticky;
      top: var(--layout-pad);
      left: var(--layout-pad);
      z-index: 120;
    }

    .layout-stage.hasMonLeft .hdrCorner {
      left: calc(var(--layout-pad) + var(--monitor-rail));
    }

    .cell100 {
      width: 72px;
      height: 72px;
      background: #000;
      border: 1px solid #1f2937;
      border-radius: 12px;
      overflow: hidden;
      display: grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:1fr 1fr;
      position: relative;
      z-index: 1;
    }
    :root[data-theme="light"] .cell100 {
      background: #ffffff;
      border-color: #d7dee8;
    }

    .sub50 {
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0;
      min-width: 0;
      min-height: 0;
    }
    :root[data-theme="light"] .sub50 { background: #ffffff; color: #1f2937; }

    .sub50:hover {
      outline: 2px solid rgba(99, 179, 237, .45);
      outline-offset: -2px;
    }

    .sub50.occupied {
      background: var(--occupied);
      z-index: 10;
    }

    .sub50.vacio {
      background: var(--vacio);
    }

    /* Overlay modules */
    .placementBox {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
      z-index: 45;
      background: var(--occupied);
      border: 2px solid rgba(255, 255, 255, .18);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .55) inset,
      0 10px 22px rgba(0, 0, 0, .25);
    }
    :root[data-theme="light"] .placementBox {
      border-color: rgba(15, 23, 42, .18);
      box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset,
      0 10px 22px rgba(15, 23, 42, .14);
    }

    .placementBox::after {
      content: "";
      position: absolute;
      inset: -1px;
      border: 1px solid rgba(0, 0, 0, .35);
      pointer-events: none;
    }

    .placementBox.isVacio {
      background: var(--vacio);
      border-color: rgba(255, 255, 255, .12);
    }

    .placementLabel {
      display: inline-block;
      white-space: nowrap;
      font-weight: 900;
      letter-spacing: .02em;
      line-height: 1;
      color: #fff;
      background: rgba(0, 0, 0, .82);
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 10px;
      padding: 5px 10px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
      backdrop-filter: blur(4px);
      transform-origin: center center;
      will-change: transform;
    }

    .placementLabel.vacio {
      background: rgba(0, 0, 0, .66);
      border-color: rgba(255, 255, 255, .18);
      opacity: .92;
    }

    .checkRow {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .checkRow input[type="checkbox"] {
      width: 18px;
      height: 18px;
      min-width: 18px;
      accent-color: #3b82f6;
    }


    /* LED dot */
    .ledDot {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #ef4444;
      border: 2px solid rgba(0, 0, 0, .45);
      box-shadow: 0 0 0 2px rgba(239, 68, 68, .18),
      0 6px 16px rgba(0, 0, 0, .35);
      --led-m: 8px;
    }

    /* LED transparente para no tapar el chip del nombre (módulos chicos) */
    .placementBox.ledSeeThrough .ledDot {
      background: rgba(239, 68, 68, .35); /* rojo transparente */
      border: 2px solid rgba(239, 68, 68, .55);
      box-shadow: 0 0 0 2px rgba(239, 68, 68, .10),
      0 6px 16px rgba(0, 0, 0, .20);
      pointer-events: none; /* clicks pasan al módulo */
    }


    /* Para que el LED pueda salir un poquito sin recortarse */
    .placementBox {
      overflow: visible;
    }

    /* En barras (50×100 / 100×50) empujo el LED hacia afuera */
    .placementBox.ledOut {
      --led-m: -6px; /* ajusta: -4 a -8 según te guste */
    }


    /* esquinas (como ya tienes) */
    .led-tr {
      top: var(--led-m);
      right: var(--led-m);
    }

    .led-tl {
      top: var(--led-m);
      left: var(--led-m);
    }

    .led-br {
      bottom: var(--led-m);
      right: var(--led-m);
    }

    .led-bl {
      bottom: var(--led-m);
      left: var(--led-m);
    }

    /* ✅ NUEVO: posiciones “en arista” (centrado) */
    .led-top {
      top: var(--led-m);
      left: 50%;
      transform: translateX(-50%);
    }

    .led-bottom {
      bottom: var(--led-m);
      left: 50%;
      transform: translateX(-50%);
    }

    .led-left {
      left: var(--led-m);
      top: 50%;
      transform: translateY(-50%);
    }

    .led-right {
      right: var(--led-m);
      top: 50%;
      transform: translateY(-50%);
    }

    .led-center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }


    /* Monitors outside grid */
    .monitorBlock {
      position: absolute;
      width: calc(var(--monitor-rail) - 20px);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)),
        linear-gradient(135deg, #1b222c, #0f141b);
      border: 2px solid rgba(255, 196, 0, .9);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255,255,255,.06);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      cursor: pointer;
    }

    body.mode-erase .monitorBlock {
      box-shadow: 0 10px 22px rgba(239, 68, 68, .35), inset 0 0 0 1px rgba(255,255,255,.06);
      border-color: rgba(239, 68, 68, .9);
    }

    .monitorBlock.left {
      left: 10px;
    }

    .monitorBlock.right {
      right: 10px;
    }

    .monitorBlock.top {
      top: 10px;
      height: calc(var(--monitor-rail) - 20px);
      width: auto;
    }

    .monitorBlock.bottom {
      bottom: 10px;
      height: calc(var(--monitor-rail) - 20px);
      width: auto;
    }

    .monitorPreview {
      position: absolute;
      border-radius: 12px;
      border: 2px dashed rgba(56, 189, 248, .9);
      background: rgba(56, 189, 248, .12);
      color: #7dd3fc;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      box-shadow: 0 8px 18px rgba(14, 165, 233, .18);
      z-index: 5;
    }

    .monitorPreview.bad {
      border-color: rgba(239, 68, 68, .9);
      background: rgba(239, 68, 68, .12);
      color: #fecaca;
      box-shadow: 0 8px 18px rgba(239, 68, 68, .18);
    }
    .monitorPreview.warn {
      border-color: rgba(245, 158, 11, .95);
      background: rgba(245, 158, 11, .14);
      color: #fde68a;
      box-shadow: 0 8px 18px rgba(245, 158, 11, .2);
    }

    .monitorPreview.left {
      left: 10px;
      width: calc(var(--monitor-rail) - 20px);
    }

    .monitorPreview.right {
      right: 10px;
      width: calc(var(--monitor-rail) - 20px);
    }

    .monitorPreview.top {
      top: 10px;
      height: calc(var(--monitor-rail) - 20px);
    }

    .monitorPreview.bottom {
      bottom: 10px;
      height: calc(var(--monitor-rail) - 20px);
    }

    .monitorPreviewLabel {
      font-size: 11px;
      line-height: 1;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 6px;
    }

    /* Estética “monitor visto desde arriba” para rail superior/inferior */
    .monitorBlock.top .monitorBlockInner,
    .monitorBlock.bottom .monitorBlockInner {
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.35)),
        linear-gradient(90deg, rgba(24,32,44,.92), rgba(8,12,18,.95));
      border: 1px solid rgba(255,255,255,.08);
      position: relative;
      overflow: hidden;
    }
    .monitorBlock.top .monitorBlockInner::before,
    .monitorBlock.bottom .monitorBlockInner::before {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: 10%;
      height: 40%;
      background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
      border-radius: 8px;
      opacity: .6;
      pointer-events: none;
    }
    .monitorBlock.top .monitorBlockInner::after,
    .monitorBlock.bottom .monitorBlockInner::after {
      content: "";
      position: absolute;
      left: 40%;
      right: 40%;
      bottom: 6%;
      height: 18%;
      background: rgba(0,0,0,.45);
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,.35);
      pointer-events: none;
    }

    .monitorBlockInner {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      background:
        radial-gradient(120px 80px at 30% 20%, rgba(34, 197, 94, .18), transparent 60%),
        radial-gradient(140px 90px at 70% 80%, rgba(34, 197, 94, .08), transparent 60%),
        rgba(8, 12, 16, .9);
      border: 1px solid rgba(34, 197, 94, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .monitorBlockInner::before{
      content:"";
      position:absolute;
      top:6px;
      left:8px;
      width:6px;
      height:6px;
      border-radius:999px;
      background:#22c55e;
      box-shadow:0 0 8px rgba(34,197,94,.8);
      opacity:.85;
    }

    .monitorBlockInner::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,0) 40%),
        linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%);
      pointer-events:none;
    }

    .monitorCode {
      font-weight: 900;
      color: #c7ffd3;
      text-shadow: 0 2px 8px rgba(34,197,94,.35), 0 6px 16px rgba(0, 0, 0, .55);
      letter-spacing: .08em;
      font-size: 14px;
      line-height: 1;
      white-space: nowrap;
      display: inline-block;
      transform-origin: center center;
      will-change: transform;
    }

    /* ===== Sidebar (unificado) ===== */
    .card.sidebar {
      position: sticky;
      top: 10px;
      max-height: calc(100vh - 92px);
      overflow: auto;
      scrollbar-gutter: stable;

      border-radius: 18px;

      background: radial-gradient(900px 500px at 20% 0%, rgba(59, 130, 246, .10), transparent 55%),
      radial-gradient(700px 420px at 100% 10%, rgba(16, 185, 129, .08), transparent 55%),
      rgba(15, 18, 22, .96);

      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
      backdrop-filter: blur(10px);
    }

    .card.sidebar > h2 {
      padding: 12px 14px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .sidebar-head {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .headRow {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .headTitle {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .headTitle .t {
      font-weight: 800;
      letter-spacing: -.015em;
      font-size: 15px;
      color: rgba(231, 237, 246, .95);
    }

    .headTitle .d {
      font-size: 12px;
      color: rgba(154, 164, 178, .92);
    }

    .sidebar-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .toolbar-left, .toolbar-right {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .03);
      font-size: 12px;
      color: rgba(154, 164, 178, .95);
    }

    .badge b {
      color: rgba(231, 237, 246, .95);
      font-weight: 800;
    }

    .badge.ok {
      color: rgba(22, 163, 74, .95);
      border-color: rgba(22, 163, 74, .28);
      background: rgba(22, 163, 74, .08);
    }

    .badge.warn {
      color: rgba(245, 158, 11, .95);
      border-color: rgba(245, 158, 11, .28);
      background: rgba(245, 158, 11, .08);
    }

    .badge.bad {
      color: rgba(239, 68, 68, .92);
      border-color: rgba(239, 68, 68, .28);
      background: rgba(239, 68, 68, .08);
    }

    /* Accordion sections */
    details.section {
      padding: 0;
      border: 0;
      margin: 10px 12px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(0, 0, 0, .18);
    }

    details.section:first-of-type {
      margin-top: 12px;
    }

    details.section > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      user-select: none;
      background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
    }

    details.section > summary::-webkit-details-marker {
      display: none;
    }

    details.section > summary:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01));
    }

    details.section[open] {
      box-shadow: 0 10px 26px rgba(0, 0, 0, .30);
    }

    details.section[open] > summary {
      position: relative;
    }


    .sumLeft {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .sumLeft .k {
      font-size: 11px;
      letter-spacing: .12em;
      color: rgba(154, 164, 178, .95);
      text-transform: uppercase;
    }

    .sumLeft .s {
      font-size: 12px;
      color: rgba(231, 237, 246, .86);
    }

    .chev {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .02);
      color: rgba(231, 237, 246, .70);
      transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }

    .chev-ico {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    details[open] > summary .chev {
      transform: rotate(180deg);
    }

    details.section > summary:hover .chev {
      background: rgba(255, 255, 255, .06);
      color: rgba(231, 237, 246, .92);
      border-color: rgba(255, 255, 255, .16);
    }

    details.section > summary:focus-visible {
      outline: 2px solid rgba(59, 130, 246, .55);
      outline-offset: 2px;
      border-radius: 14px;
    }

    .sectionBody {
      padding: 12px;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .fieldGrid {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 10px;
    }

    .fieldGrid .span2 {
      grid-column: span 2;
    }

    /* ✅ Botones: defaults */
    .actionsPrimary {
      display: grid;
      grid-template-columns:1fr;
      gap: 10px;
      margin-top: 10px;
    }

    /* ✅ Row de 2 botones */
    .actionsRow {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    /* ✅ Para “Crear/Rehacer” + “Limpiar” EN LA MISMA FILA (desktop) */
    .actionsRow-2 {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    @media (max-width: 520px) {
      .actionsRow-2 {
        grid-template-columns:1fr;
      }
    }

    .btnWide {
      width: 100%;
      justify-content: center;
    }

    .segment {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 10px;
    }

    .segBtn {
      width: 100%;
      justify-content: center;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .03);
      color: rgba(231, 237, 246, .88);
      cursor: pointer;
      user-select: none;
      font-weight: 700;
    }

    .segBtn.active {
      background: rgba(59, 130, 246, .22);
      border-color: rgba(59, 130, 246, .35);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
    }

    .miniHint {
      margin-top: 10px;
      font-size: 12px;
      color: rgba(154, 164, 178, .92);
      line-height: 1.35;
      padding-top: 8px;
      border-top: 1px dashed rgba(255, 255, 255, .10);
    }

    .miniHint.bad {
      color: rgba(252, 165, 165, .95);
      border-top-color: rgba(239, 68, 68, .45);
    }
    .miniHint.warn {
      color: rgba(253, 224, 71, .95);
      border-top-color: rgba(245, 158, 11, .6);
    }

    /* Inputs premium SOLO en sidebar */
    .card.sidebar input,
    .card.sidebar select {
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(0, 0, 0, .22);
      color: rgba(231, 237, 246, .95);
    }

    .card.sidebar input:focus,
    .card.sidebar select:focus {
      border-color: rgba(59, 130, 246, .55);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
    }

    .card.sidebar button {
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .03);
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .card.sidebar button:hover {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .16);
    }

    .card.sidebar button.primary {
      background: linear-gradient(180deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .12));
      border-color: rgba(59, 130, 246, .30);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
    }

    .card.sidebar button.danger {
      background: linear-gradient(180deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .10));
      border-color: rgba(239, 68, 68, .28);
      color: rgba(254, 202, 202, .92);
    }

    /* =========================
       Quickbar (Vista superior)
       ========================= */
    .quickbar {
      margin-top: 12px;
      padding: 12px;
      border-top: 1px solid rgba(255, 255, 255, .08);

      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
    }

    .quick-left {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .quick-right {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .quick-right .btnWide {
      width: auto;
      min-width: 160px;
      height: 42px;
    }

    .quick-mode {
      display: grid;
      grid-template-columns:1fr 1fr;
      gap: 10px;
      min-width: 220px;
    }

    .quick-mode .segBtn {
      height: 42px;
      border-radius: 999px;
    }

    @media (max-width: 720px) {
      .quick-right {
        width: 100%;
      }

      .quick-right .btnWide {
        width: 100%;
        min-width: 0;
      }

      .quick-mode {
        width: 100%;
        min-width: 0;
      }
    }

    /* ===== Quickbar compacta ===== */
    .quickbar.quickbar-compact {
      margin-top: 10px;
      padding: 10px;
      border-top: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
    }

    .quickbar-compact .segBtn {
      height: 36px;
      padding: 8px 10px;
      font-size: 12px;
      border-radius: 999px;
    }

    .quickbar-compact .quick-mode {
      min-width: 190px;
      gap: 8px;
    }

    .quickbar-compact .btnWide {
      height: 36px;
      min-width: 140px;
      padding: 0 12px;
      font-size: 12px;
      border-radius: 12px;
    }

    @media (max-width: 720px) {
      .quickbar-compact .btnWide {
        width: 100%;
        min-width: 0;
      }
    }

    /* ===== Layout card: h2 en una sola fila (titulo + legend) ===== */
    .layout-card > h2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .layout-head-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .fs-np {
      display: none;
      align-items: center;
    }

    body.layout-fullscreen .fs-np {
      display: flex;
    }

    #fsNpInput {
      height: 32px;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .06);
      color: #e7edf6;
      font-size: 12px;
      min-width: 220px;
    }

    #fsNpInput:focus {
      border-color: rgba(59, 130, 246, .65);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
    }

    :root[data-theme="light"] #fsNpInput {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
    }

    :root[data-theme="light"] #fsNpInput:focus {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
    }

    .btnInline {
      height: 32px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .06);
      color: #e7edf6;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }
    .btnInline:hover { background: rgba(255, 255, 255, .12); }
    :root[data-theme="light"] .btnInline {
      background: #ffffff;
      border-color: #d7dee8;
      color: #1f2937;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
    }
    :root[data-theme="light"] .btnInline:hover { background: #f2f5fb; }

    .layout-card .legend.legend-top {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: flex-end;
      white-space: nowrap;

      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .layout-card .legend.legend-top .pill {
      flex: 0 0 auto;
      padding: 6px 9px;
      font-size: 11px;
    }

    /* =========================
   Responsive (Mobile-first)
   Pega esto AL FINAL del <style>
   ========================= */

    /* 1) Mejor comportamiento general en móviles */
    html, body {
      width: 100%;
    }

    body {
      overflow-x: hidden;
    }

    /* Inputs/botones más “touch friendly” */
    @media (max-width: 720px) {
      input, select {
        height: 42px;
        min-width: 0;
      }

      button {
        height: 44px;
      }
    }

    /* 2) Header: que no se apriete, y controles a 100% cuando haga falta */
    @media (max-width: 720px) {
      header {
        padding: 10px 12px;
        gap: 8px;
      }

      header .controls {
        width: 100%;
        justify-content: flex-start;
      }

      .hTitle {
        width: 100%;
      }
    }

    /* 3) Grid principal: sidebar arriba y layout abajo (1 columna) */
    @media (max-width: 960px) {
      .grid2 {
        grid-template-columns:1fr;
      }

      /* Sidebar deja de ser sticky en móvil para que no “robe” pantalla */
      .card.sidebar {
        position: relative;
        top: auto;
        max-height: none;
      }
      :root{
        --monitor-rail: 60px;
        --layout-pad: 8px;
      }
      .layout-scroll{
        max-height: 60vh;
      }
    }

    /* 4) Sidebar: menos padding y mejor densidad */
    @media (max-width: 720px) {
      .card.sidebar > h2 {
        padding: 12px;
      }

      details.section {
        margin: 10px 10px;
      }

      details.section > summary {
        padding: 12px;
      }

      .sectionBody {
        padding: 12px;
      }

      .fieldGrid {
        grid-template-columns:1fr;
      }

      /* campos en una sola columna */
      .fieldGrid .span2 {
        grid-column: auto;
      }

      /* ya no fuerza “span 2” */
    }

    /* 5) Quickbar: todo a una columna y botones full width */
    @media (max-width: 720px) {
      .quickbar, .quickbar.quickbar-compact {
        gap: 10px;
      }

      .quick-left, .quick-right {
        width: 100%;
        justify-content: flex-start;
      }

      .quick-right .btnWide {
        width: 100%;
        min-width: 0;
      }

      .quick-mode {
        width: 100%;
        min-width: 0;
        grid-template-columns:1fr 1fr;
      }
    }

    /* 6) Acciones: “Crear/Rehacer” + “Limpiar” en fila, pero en móvil apiladas */
    @media (max-width: 520px) {
      .actionsRow, .actionsRow-2 {
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 560px) {
      :root{
        --monitor-rail: 46px;
        --layout-pad: 6px;
      }
      .layout{
        min-width: 560px;
      }
      .layout-scroll{
        max-height: 55vh;
      }
      .monitorBlock.left{ left: 6px; }
      .monitorBlock.right{ right: 6px; }
      .monitorPreview.left{ left: 6px; }
      .monitorPreview.right{ right: 6px; }
    }

    /* 7) Layout grid: escala mejor en pantallas chicas (más compacto) */
    @media (max-width: 720px) {
      .layout-wrap {
        padding: 10px;
      }

      /* Contenedor scrolleable horizontal, el contenido NO se rompe */
      .layout-scroll {
        border-radius: 14px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      /* Celdas ligeramente más pequeñas para que se vea más “mobile friendly” */
      .cell100 {
        width: 60px;
        height: 60px;
        border-radius: 12px;
      }

      .hdrCell {
        font-size: 10px;
        padding: 6px 5px;
        border-radius: 10px;
      }
      :root{
        --monitor-rail: 52px;
        --layout-pad: 6px;
      }
      .layout{
        min-width: 640px;
      }
      .monitorPreviewLabel{
        font-size: 10px;
      }
    }

    /* 8) Legend del título del layout: scroll horizontal suave y sin saltos */
    @media (max-width: 720px) {
      .layout-card > h2 {
        flex-direction: column; /* título arriba, legend abajo */
        align-items: flex-start;
        gap: 10px;
      }

      .layout-head-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .layout-card .legend.legend-top {
        width: 100%;
        justify-content: flex-start;
      }
    }

    /* ===== Fullscreen right panel ===== */
    body.layout-fullscreen .grid2 {
      grid-template-columns: 1fr;
    }

    body.layout-fullscreen .card.sidebar {
      display: none;
    }

    body.layout-fullscreen .layout-card {
      width: 100%;
    }

    body.layout-fullscreen .layout-scroll {
      max-height: calc(100vh - 220px);
    }

    /* 9) Mejor manejo de texto largo en pills/badges */
    @media (max-width: 720px) {
      .pill, .badge {
        max-width: 100%;
      }

      .pill {
        flex-wrap: nowrap;
      }
    }

    /* 10) Scrollbars PRO en móvil: más delgados (opcional) */
    @media (max-width: 720px) {
      :root {
        --sb-size: 8px;
      }
    }

    /* =========================
   Buscador de módulos (Sidebar)
   ========================= */
    .searchBox {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: end; /* ✅ alinea el botón con el input */
    }

    .searchBox label {
      width: 100%;
      margin: 0;
    }

    .searchBox button {
      height: 40px;
      line-height: 40px; /* ✅ fuerza mismo baseline visual */
      padding: 0 14px;
      align-self: end;
    }


    /* En móvil: apilar y que el botón sea full width */
    @media (max-width: 720px) {
      .searchBox {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .searchBox button {
        width: 100%;
      }
    }


    .searchBox input {
      width: 100%;
    }

    .searchResults {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .resultItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(0, 0, 0, .18);
    }

    .resultItem .meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .resultItem .np {
      font-weight: 800;
      color: rgba(231, 237, 246, .95);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .resultItem .pos {
      font-size: 12px;
      color: rgba(154, 164, 178, .92);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .resultItem button {
      height: 34px;
      padding: 0 10px;
      border-radius: 12px;
    }

    .searchEmpty {
      margin-top: 10px;
      padding: 10px;
      border-radius: 14px;
      border: 1px dashed rgba(255, 255, 255, .12);
      color: rgba(154, 164, 178, .92);
      background: rgba(0, 0, 0, .16);
      font-size: 12px;
    }

    /* Resaltado en overlay */
    .placementBox.flash {
      outline: 3px solid rgba(59, 130, 246, .55);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .55) inset,
      0 0 0 6px rgba(59, 130, 246, .18),
      0 18px 40px rgba(0, 0, 0, .40);
    }

    /* =========================================================
   Calendar UI — Refactor con capas, tokens y A11Y
   ========================================================= */

    @layer reset, base, components, utilities;

    /* ========================= RESET ========================= */
    @layer reset {
      *, *::before, *::after {
        box-sizing: border-box;
      }

      html, body {
        height: 100%;
      }

      body {
        margin: 0;
      }
    }

    /* ========================== BASE ========================= */
    @layer base {
      :root {
        /* Base */
        --bg: #0e0f10;
        --grid: #2a2b2d;
        --text: #e6e6e6;
        --accent: #ffc400;

        /* Barras */
        --bar-1: #16a34a;
        --bar-2: #2563eb; /* garantía */
        --bar-3: #ea580c; /* solicitado_cliente */
        --bar-4: #eab308; /* kufferath */
        --bar-5: #06b6d4; /* cortesía */

        /* Calendar layout */
        --cellW: 36px;
        --cellH: 30px;
        --labelW: 170px;
        --days: 31;
        --calMinW: calc(var(--labelW) + (var(--days) * var(--cellW)) + 2px);
        --headerH: 56px;
        --select: #ffffff55;
        --catHeaderBg: #1f2937;

        /* Tokens de sombras/anillos */
        --shadow-lg: 0 12px 30px #0007;
        --shadow-md: 0 10px 24px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .2);
        --ring-blue: rgba(37, 99, 235, .12);
        --ring-red: rgba(239, 68, 68, .15);

        /* Toasts */
        --toast-gap-top: 16px;
        --toast-gap-right: 16px;

        /* Carriles en filas con varias barras */
        --laneH: 22px;
        --laneGap: 2px;

        /* Sidepanel (tema oscuro) */
        --sp-bg: #0f1115;
        --sp-elev: #12161c;
        --sp-border: #20242d;
        --sp-text: #e7eaf0;
        --sp-text-dim: #a7b0c0;
        --sp-accent: #3b82f6;
        --sp-accent-2: #22c55e;
        --sp-danger: #ef4444;
        --sp-hover: #1a1f29;
        --sp-selected: #13233a;
        --sp-outline: #1f3b6b;
        --sp-input-bg: #0d1016;

        /* Modal (auto con prefers-color-scheme) */
        --modal-bg: #f7f7f8;
        --modal-fg: #1d1f23;
      }

      :root {
        color-scheme: dark light;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font: 14px/1.4 "Montserrat", "Roboto", sans-serif;
      }

      /* Accesibilidad: focus */
      :where(button, .btn, .icon-btn, input, select, textarea):focus-visible {
        outline: 2px solid color-mix(in oklab, var(--sp-accent) 70%, white);
        outline-offset: 2px;
      }

      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }
    }

    /* ======================= COMPONENTS ====================== */
    @layer components {
      /* ===== Utilidades visuales de base (component-scope) ===== */
      .hr {
        height: 1px;
        background: #333;
        margin: 8px 0;
      }

      .icon-btn {
        border: none;
        background: transparent;
        padding: 4px 6px;
        line-height: 1;
        cursor: pointer;
        border-radius: 8px;
      }

      .icon-btn:hover {
        background: rgba(0, 0, 0, .06);
      }

      .icon-btn.ok {
        color: #0a7;
      }

      .icon-btn.danger {
        color: #c33;
      }

      /* ===== Header ===== */
      header {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 14px;
        background: var(--header-bg);
        color: var(--header-fg);
        font-weight: 700;
        letter-spacing: .3px;
        box-shadow: 0 2px 0 var(--header-border);
        min-width: var(--calMinW);
      }

      header .controls {
        display: flex;
        gap: 8px;
        align-items: center;
        flex: 1;
      }

      header button, header select {
        background: #0009;
        color: #fff;
        border: 1px solid #0005;
        border-radius: 8px;
        padding: 6px 10px;
        cursor: pointer;
      }

      header button:hover {
        background: #000c;
      }

      header .btn-ghost {
        background: transparent;
        color: #000;
        border-color: #0005;
      }

      header .btn-ghost:hover {
        background: #0001;
      }
      :root[data-theme="light"] header button,
      :root[data-theme="light"] header select {
        background: rgba(15, 23, 42, .08);
        color: #1f2937;
        border-color: rgba(15, 23, 42, .2);
      }
      :root[data-theme="light"] header button:hover,
      :root[data-theme="light"] header select:hover {
        background: rgba(15, 23, 42, .12);
      }
      :root[data-theme="light"] header .btn-ghost {
        color: #1f2937;
        border-color: rgba(15, 23, 42, .2);
      }
      :root[data-theme="light"] header .btn-ghost:hover { background: rgba(15, 23, 42, .08); }

      /* ===== Calendario ===== */
      .calendar {
        position: relative;
        min-width: var(--calMinW);
      }

      .cal-header {
        position: sticky;
        top: var(--headerH);
        z-index: 5;
        display: flex;
        border-bottom: 2px solid var(--header-border);
        background: var(--header-bg);
        color: var(--header-fg);
      }

      .right-controls {
        margin-left: auto;
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .month-title {
        padding: 8px 10px;
        font-weight: 900;
        flex: 0 0 var(--labelW);
        width: var(--labelW);
        min-width: var(--labelW);
        max-width: var(--labelW);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .calendar .row {
        display: flex;
      }

      .days {
        display: grid;
        grid-template-columns: repeat(var(--days), var(--cellW));
        flex: 1;
      }

      .daycell {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 800;
        border-left: 1px solid #0003;
        height: 34px;
      }

      /* ===== Estructura filas ===== */
      .row {
        display: grid;
        grid-template-columns: var(--labelW) 1fr;
        border-bottom: 1px solid var(--grid);
        min-height: var(--cellH);
        align-items: stretch;
      }

      .row .label {
        padding: 6px 10px;
        color: #d7d7d7;
        border-right: 1px solid var(--grid);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        flex: 0 0 var(--labelW);
        width: var(--labelW);
        min-width: var(--labelW);
        max-width: var(--labelW);
      }

      .days, .row .cells {
        display: grid;
        gap: 0;
      }

      .daycell, .cell {
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, .08);
      }

      .days > .daycell:last-child, .row .cells > .cell:last-child {
        border-right: 0;
      }

      .row .cells {
        --lanes: 1;
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--days), var(--cellW));
        user-select: none;
        min-height: calc((var(--laneH) + var(--laneGap)) * var(--lanes, 1) + 4px);
        grid-auto-rows: 1fr;
      }

      .cell {
        border-left: 1px solid var(--grid);
        min-height: var(--cellH);
      }

      .row .cells .cell:hover {
        outline: 1px dashed #ffffff44;
        outline-offset: -1px;
      }

      .cell.sel {
        background: var(--select);
      }

      .tech-row {
        user-select: none;
      }

      .tech-row.dragging {
        opacity: .5;
      }

      .tech-dragging .tech-row .cells {
        pointer-events: none !important;
      }

      /* ===== Encabezado de categoría ===== */
      .cat-section {
        position: relative;
      }

      .cat-header.row {
        user-select: none;
        background: var(--catHeaderBg);
        color: #ffd54f;
        font-weight: 900;
        min-height: var(--cellH);
      }

      .cat-header .label {
        display: flex;
        gap: 6px;
        align-items: center;
        background: var(--catHeaderBg);
        color: #fff;
        font-weight: 900;
      }

      .cat-header .cells .cell {
        min-height: var(--cellH);
      }

      .drag-handle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background: #0003;
        color: #000;
        font-weight: 900;
      }

      .drag-handle::after {
        content: "≡";
        font-size: 12px;
        line-height: 1;
        opacity: .8;
      }

      /* Indicadores de drop/reordenación */
      .drop-indicator {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--accent);
        pointer-events: none;
      }

      .over-list {
        outline: 2px dashed #60a5fa;
        outline-offset: -3px;
      }

      .tech-list {
        position: relative;
        min-height: var(--cellH);
      }

      .tech-list.empty {
        outline: 2px dashed #60a5fa55;
        outline-offset: -3px;
      }

      .tech-list.empty::after {
        content: "Suelta aquí para mover técnico";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #9ecbff;
        pointer-events: none;
      }

      .tech-list.over-list {
        outline: 2px dashed #60a5fa;
        outline-offset: -3px;
      }

      .cat-header.drop-target {
        box-shadow: inset 0 0 0 2px #60a5fa;
      }

      /* ===== Barras de actividad ===== */
      .bar {
        position: absolute;
        top: 3px;
        height: var(--laneH);
        line-height: var(--laneH);
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid color-mix(in oklab, #000 40%, transparent);
        cursor: grab;
        box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 35%, transparent);
        z-index: 1;
        background: var(--bar-current, var(--bar-1));
      }

      .bar:active {
        cursor: grabbing;
      }

      .bar[data-color="1"] {
        --bar-current: var(--bar-1);
      }

      .bar[data-color="2"] {
        --bar-current: var(--bar-2);
      }

      .bar[data-color="3"] {
        --bar-current: var(--bar-3);
      }

      .bar[data-color="4"] {
        --bar-current: var(--bar-4);
      }

      .bar[data-color="5"] {
        --bar-current: var(--bar-5);
      }

      /* ===== Notas rápidas ===== */
      .note {
        position: absolute;
        min-width: 320px;
        max-width: 520px;
        background: #fffb;
        backdrop-filter: blur(8px);
        color: #000;
        border: 2px solid #0008;
        border-radius: 10px;
        padding: 10px;
        box-shadow: var(--shadow-lg);
        z-index: 2000;
      }

      .note textarea {
        width: 100%;
        min-height: 120px;
        border: 1px solid #0005;
        border-radius: 8px;
        padding: 8px;
        font: inherit;
        resize: vertical;
        background: #fff8;
      }

      .note .actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 8px;
      }

      .note button {
        background: #111;
        color: #fff;
        border: 1px solid #000;
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
      }

      /* ===== Menú Admin (dropdown + bottom-sheet) ===== */
      .admin-wrap {
        position: relative;
        display: inline-block;
      }

      .admin-menu {
        position: absolute;
        right: 0;
        top: 42px;
        width: 340px;
        max-height: 70vh;
        overflow: auto;
        background: #111;
        color: #fff;
        border: 1px solid #0008;
        border-radius: 10px;
        box-shadow: 0 14px 40px #0009;
        padding: 10px;
        z-index: 120;
        display: none;
      }

      .admin-menu.show {
        display: block;
        animation: pop .12s ease-out;
      }

      @keyframes pop {
        from {
          opacity: 0;
          transform: translateY(-4px)
        }
        to {
          opacity: 1;
          transform: none
        }
      }
      .admin-menu h4 {
        margin: 8px 0 6px;
        font-size: 13px;
        color: #ffd54f;
      }

      .admin-menu .rowx {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
      }

      .admin-menu select, .admin-menu input, .admin-menu button {
        width: 100%;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid #333;
        background: #1b1b1b;
        color: #fff;
        font: inherit;
      }

      .admin-menu button {
        background: #222;
        cursor: pointer;
      }

      .admin-menu button:hover {
        background: #2c2c2c;
      }

      .admin-menu .muted {
        font-size: 12px;
        color: #c7c7c7;
      }

      .admin-menu .danger {
        background: #7f1d1d;
        border-color: #ef4444;
      }

      .admin-menu .danger:hover {
        background: #991b1b;
      }

      .admin-menu .ok {
        background: #064e3b;
        border-color: #10b981;
      }

      .admin-menu .ok:hover {
        background: #065f46;
      }

      /* Bottom-sheet en móvil */
      @media (max-width: 560px) {
        .admin-menu {
          position: fixed !important;
          left: 50% !important;
          top: auto !important;
          bottom: 0 !important;
          transform: translateX(-50%);
          width: calc(100vw - 16px) !important;
          max-width: 640px;
          max-height: min(86vh, 600px) !important;
          overflow: auto !important;
          border-radius: 16px 16px 0 0 !important;
          border: 1px solid rgba(255, 255, 255, .12) !important;
          background: #0f1114 !important;
          box-shadow: 0 -8px 30px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35) !important;
          padding: 12px !important;
          z-index: 11000 !important;
          display: none;
          animation: adminSheetIn .18s ease-out;
        }

        .admin-menu.show {
          display: block;
        }

        .admin-menu::before {
          content: "";
          position: sticky;
          top: 0;
          display: block;
          height: 10px;
          margin: -4px auto 10px;
          width: 44px;
          border-radius: 99px;
          background: #ffffff29;
        }

        .admin-menu h4:first-child {
          position: sticky;
          top: 6px;
          z-index: 1;
          background: linear-gradient(180deg, #0f1114 90%, transparent);
          padding-top: 6px;
          margin-top: 0;
        }

        .admin-menu select, .admin-menu input {
          height: 44px !important;
          padding: 10px 12px !important;
          font-size: 16px !important;
          width: -webkit-fill-available;
        }

        .admin-menu .rowx {
          display: grid !important;
          grid-template-columns: 1fr !important;
          gap: 10px !important;
          margin-bottom: 10px !important;
        }

        .admin-menu button {
          height: 46px !important;
          font-weight: 800 !important;
          letter-spacing: .2px;
          border-radius: 12px !important;
        }

        .admin-menu .danger {
          width: 100% !important;
          margin-top: 6px;
        }

        .admin-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, .45);
          backdrop-filter: blur(2px);
          z-index: 10990;
          display: none;
        }

        .admin-backdrop.show {
          display: block;
        }
      }

      @media (min-width: 561px) and (max-width: 840px) {
        .admin-menu {
          right: 12px !important;
          left: 12px !important;
          width: auto !important;
          max-width: none !important;
          max-height: 80vh !important;
        }

        .admin-menu .rowx {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 10px !important;
        }

        .admin-menu .rowx > *:only-child {
          grid-column: 1 / -1;
        }
      }

      @keyframes adminSheetIn {
        from {
          transform: translate(-50%, 12px);
          opacity: 0
        }
        to {
          transform: translate(-50%, 0);
          opacity: 1
        }
      }

      /* ===== Backdrop genérico ===== */
      .activity-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        backdrop-filter: blur(2px);
        z-index: 119990;
        animation: fadeIn .12s ease-out;
      }

      .activity-backdrop.sp {
        background: rgba(0, 0, 0, .18);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 99980;
      }

      @keyframes fadeIn {
        from {
          opacity: 0
        }
        to {
          opacity: 1
        }
      }

      /* =========================================================
         MODAL DE ACTIVIDAD — UNIFICADO (iOS safe)
         ========================================================= */
      .activity-info {
        position: fixed;
        z-index: 120000;
        width: min(680px, calc(95vw - 16px));
        max-height: min(100dvh - 16px, 95vh - 16px);
        display: grid;
        grid-template-rows: auto 1fr auto;
        background: var(--modal-bg);
        color: var(--modal-fg);
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .30);
        overflow: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        will-change: auto;
        transform: none;
        animation: modal-pop .12s ease-out;
      }

      @supports (-webkit-touch-callout: none) {
        .activity-info {
          max-height: calc(100svh - 16px);
        }

        input, select, textarea {
          font-size: 16px;
        }
      }

      .activity-info .head {
        position: sticky;
        top: max(env(safe-area-inset-top, 0px), 0px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, .7), transparent);
        backdrop-filter: blur(4px);
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        z-index: 6;
      }

      .activity-info .content {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        padding: 10px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      }

      .activity-info .actions {
        position: sticky;
        bottom: env(safe-area-inset-bottom, 0px);
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        padding: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6), transparent);
        backdrop-filter: blur(4px);
        border-top: 1px solid rgba(0, 0, 0, .06);
        z-index: 5;
      }

      .activity-info .head-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
      }

      .activity-info .pill {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--bar-1);
        box-shadow: 0 0 0 3px rgba(21, 128, 61, .18);
      }

      .activity-info[data-color="2"] .pill {
        background: var(--bar-2);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
      }

      .activity-info[data-color="3"] .pill {
        background: var(--bar-3);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, .16);
      }

      .activity-info[data-color="4"] .pill {
        background: var(--bar-4);
        box-shadow: 0 0 0 3px rgba(234, 179, 8, .18);
      }

      .activity-info[data-color="5"] .pill {
        background: var(--bar-5);
        box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
      }

      .activity-info .close {
        appearance: none;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 16px;
        line-height: 1;
        padding: 4px 6px;
        border-radius: 8px;
        cursor: pointer;
      }

      .activity-info .close:hover {
        background: rgb(31, 64, 129);
      }

      .activity-info .section {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 8px;
      }

      .activity-info .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        align-items: start;
      }

      @media (max-width: 640px) {
        .activity-info .grid-2 {
          grid-template-columns: 1fr;
        }
      }

      .activity-info .fld {
        display: grid;
        gap: 6px;
        align-self: start;
      }

      .activity-info .fld.block {
        grid-column: 1 / -1;
      }

      .activity-info .k {
        font-size: 11px;
        letter-spacing: .02em;
        color: #6b7280;
        font-weight: 800;
      }

      .activity-info .v {
        font-weight: 600;
      }

      .activity-info .meta {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 6px 10px;
        align-items: center;
        margin-bottom: 8px;
      }

      .activity-info .input, .activity-info textarea, .activity-info select {
        width: 100%;
        border: 1px solid rgba(0, 0, 0, .12);
        background: #fff;
        border-radius: 8px;
        padding: 7px 9px;
        font: inherit;
        outline: none;
        transition: border-color .15s, box-shadow .15s, background .15s;
        color: #1d1f23;
        caret-color: #1d1f23;
      }

      .activity-info .input.sm {
        padding: 6px 8px;
      }

      .activity-info .input:focus, .activity-info textarea:focus, .activity-info select:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px var(--ring-blue);
      }

      .activity-info .invalid, .activity-info .title-input.invalid {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px var(--ring-red) !important;
      }

      .activity-info textarea {
        min-height: 96px;
        resize: vertical;
      }

      .activity-info .fld-inline .inline {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        align-items: center;
      }

      .activity-info .chk {
        display: inline-flex;
        gap: 6px;
        align-items: center;
      }

      .activity-info .fld.total {
        justify-content: end;
        align-items: end;
      }

      .activity-info .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        padding: 2px 6px;
        border-radius: 999px;
        background: #0ea5e9;
        color: #fff;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }

      .activity-info .btn {
        appearance: none;
        border: 0;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 10px;
        background: #111827;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
      }

      .activity-info .btn:hover {
        filter: brightness(1.05);
      }

      .activity-info .btn.ghost {
        background: transparent;
        color: #111827;
        border: 1px solid rgba(0, 0, 0, .12);
      }

      .activity-info .btn.danger {
        background: #7f1d1d;
        color: #fff;
        border: 1px solid #ef4444;
      }

      .activity-info.confirm {
        max-width: 440px;
        border-left: 6px solid #ef4444;
      }

      @keyframes modal-pop {
        from {
          transform: translateY(6px) scale(.98);
          opacity: 0
        }
        to {
          transform: none;
          opacity: 1
        }
      }

      /* Título editable */
      .activity-info .title {
        font-weight: 700;
        font-size: 15px;
        line-height: 1.2;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .activity-info .title-input {
        font-weight: 700;
        font-size: 15px;
        line-height: 1.2;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, .09);
        background: #fff;
        flex: 1 1 auto;
        min-width: 320px;
        max-width: 100%;
      }

      .activity-info .input::placeholder, .activity-info textarea::placeholder {
        color: #6b7280;
      }

      /* ===== Comentarios (chat) ===== */
      .section.comments {
        display: grid;
        gap: 10px;
      }

      .comments-head .k {
        font-size: 11px;
        letter-spacing: .02em;
        color: #6b7280;
        font-weight: 800;
      }

      .comments-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 240px;
        overflow: auto;
        padding-right: 4px;
      }

      .comment-item {
        display: grid;
        gap: 4px;
        max-width: 92%;
      }

      .comment-item.me {
        margin-left: auto;
      }

      .comment-bubble {
        position: relative;
        border-radius: 12px;
        padding: 8px 10px 8px 10px;
        background: #0ea5e9;
        color: #fff;
        padding-right: 28px;
      }

      .comment-item.me .comment-bubble {
        background: #16a34a;
      }

      .comment-meta {
        font-size: 11px;
        color: #9ca3af;
        display: flex;
        gap: 6px;
        align-items: baseline;
      }

      .comment-del {
        position: absolute;
        right: 6px;
        top: 6px;
        border: none;
        background: transparent;
        cursor: pointer;
        opacity: .6;
        font-size: 14px;
      }

      .comment-del:hover {
        opacity: 1;
      }

      .comment-item:not(.me) .comment-del {
        display: none;
      }

      .comments .compose-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
      }

      /* Previsualizaciones de adjuntos */
      .comments .compose-previews {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 8px;
        margin-top: 8px;
      }

      .comments .compose-previews .p {
        position: relative;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        overflow: hidden;
        background: #fafafa;
      }

      .comments .compose-previews img {
        display: block;
        width: 100%;
        height: 88px;
        object-fit: cover;
      }

      .comments .compose-previews .rm {
        position: absolute;
        top: 4px;
        right: 4px;
        border: 0;
        border-radius: 7px;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }

      .comment-item .photos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
        margin-top: 6px;
      }

      .comment-item .photos a {
        display: block;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eee;
      }

      .comment-item .photos img {
        display: block;
        width: 100%;
        height: 120px;
        object-fit: cover;
      }

      .comment-gallery {
        display: grid;
        grid-template-columns:repeat(3, 84px);
        gap: 8px;
        margin-top: 8px;
      }

      .comment-gallery .cg-item {
        display: block;
        width: 84px;
        height: 84px;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        position: relative;
      }

      .comment-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .cg-more {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: rgba(0, 0, 0, .45);
        color: #fff;
        font-weight: 900;
        font-size: 14px;
      }

      /* Composer compacto */
      .comments-compose {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-auto-flow: column;
        gap: 8px;
        align-items: center;
      }

      .comments-compose > * {
        min-width: 0;
      }

      .comments-compose .btn, .comments-compose button {
        white-space: nowrap;
        width: auto;
      }

      @media (max-width: 420px) {
        .comments-compose {
          grid-template-columns: 1fr;
        }

        .comments-compose .btn, .comments-compose button {
          width: 100%;
          justify-self: end;
        }
      }

      /* ===== HK-módulo multivalor ===== */
      .hkmod-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px 10px;
        align-items: center;
      }

      .hkmod-wrap {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
      }

      .hkmod-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
      }

      .hkmod-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 16px;
        background: #f1f3f5;
        color: #3730a3;
        font-weight: 700;
        border: 1px solid #e5e7eb;
      }

      .hkmod-chip button {
        border: 0;
        background: transparent;
        cursor: pointer;
        font-weight: 900;
        line-height: 1;
        opacity: .7;
      }

      .hkmod-chip button:hover {
        opacity: 1;
      }

      .hkmod-del {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        min-height: 20px;
        border: 0;
        background: transparent;
        cursor: pointer;
        line-height: 1;
      }

      .hkmod-list .hkmod-chip.dup {
        outline: 2px solid #f59e0b;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, .25);
        transition: outline-color .4s ease, box-shadow .4s ease;
      }

      /* ===== Panel lateral (Administración) ===== */
      .sidepanel.admin-panel {
        position: fixed;
        top: 0;
        right: 0;
        width: 380px;
        max-width: 92vw;
        height: 100vh;
        background: var(--sp-bg);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
        transform: translateX(100%);
        transition: transform .28s ease;
        z-index: 99990;
        display: flex;
        flex-direction: column;
        border-left: 1px solid var(--sp-border);
        border-radius: 8px 0 0 8px;
      }

      .sidepanel.admin-panel.show {
        transform: translateX(0);
      }

      .sidepanel.admin-panel .sp-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: var(--sp-elev);
        border-bottom: 1px solid var(--sp-border);
        color: var(--sp-text);
      }

      .sidepanel.admin-panel .sp-title {
        font-weight: 600;
        font-size: 16px;
        color: var(--sp-text);
      }

      .sidepanel.admin-panel .sp-close {
        border: 0;
        background: transparent;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        color: var(--sp-text-dim);
      }

      .sidepanel.admin-panel .sp-close:hover {
        color: var(--sp-text);
      }

      .sidepanel.admin-panel .sp-body {
        padding: 12px 14px 18px;
        overflow: auto;
        gap: 18px;
        display: flex;
        flex-direction: column;
        color: var(--sp-text);
      }

      .sidepanel.admin-panel .sp-section h3 {
        margin: 10px 0 8px;
        font-size: 14px;
        color: var(--sp-text-dim);
      }

      .sidepanel.admin-panel .rowx {
        display: flex;
        gap: 8px;
        align-items: center;
        margin: 6px 0;
      }

      .sidepanel.admin-panel input, .sidepanel.admin-panel select {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--sp-border);
        border-radius: 6px;
        background: var(--sp-input-bg);
        color: var(--sp-text);
      }

      .sidepanel.admin-panel input::placeholder {
        color: #6b7280;
      }

      .sidepanel.admin-panel .list-wrap {
        border: 1px solid var(--sp-border);
        border-radius: 8px;
        max-height: 260px;
        overflow: auto;
        background: var(--sp-elev);
      }

      .sidepanel.admin-panel .sp-list {
        list-style: none;
        margin: 0;
        padding: 6px;
      }

      .sidepanel.admin-panel .sp-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 6px;
        cursor: pointer;
        color: var(--sp-text);
      }

      .sidepanel.admin-panel .sp-list li:hover {
        background: var(--sp-hover);
      }

      .sidepanel.admin-panel .sp-list li.is-selected {
        background: var(--sp-selected);
        outline: 1px solid var(--sp-outline);
      }

      .sidepanel.admin-panel .sp-list .reorder .btn {
        padding: 4px 8px;
        border: 1px solid var(--sp-border);
        background: transparent;
        color: var(--sp-text-dim);
      }

      .sidepanel.admin-panel .sp-list .reorder .btn:hover {
        color: var(--sp-text);
        background: var(--sp-hover);
      }

      .sidepanel.admin-panel .btn {
        border-radius: 8px;
        padding: 8px 12px;
        border: 1px solid var(--sp-border);
        color: var(--sp-text);
        background: #12151c;
      }

      .sidepanel.admin-panel .btn:hover {
        background: var(--sp-hover);
      }

      .sidepanel.admin-panel .btn.ok {
        background: var(--sp-accent);
        border-color: transparent;
        color: #fff;
      }

      .sidepanel.admin-panel .btn.ok:hover {
        filter: brightness(1.06);
      }

      .sidepanel.admin-panel .btn.ghost {
        background: transparent;
        color: var(--sp-text-dim);
      }

      .sidepanel.admin-panel .btn.ghost:hover {
        color: var(--sp-text);
        background: var(--sp-hover);
      }

      .sidepanel.admin-panel .btn.danger {
        background: var(--sp-danger);
        border-color: transparent;
        color: #fff;
      }

      .sidepanel.admin-panel .btn.danger:hover {
        filter: brightness(1.06);
      }

      .sidepanel.admin-panel .rowx label {
        color: var(--sp-text-dim);
      }

      .sidepanel.admin-panel *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      .sidepanel.admin-panel *::-webkit-scrollbar-thumb {
        background: #2a2f3a;
        border-radius: 8px;
        border: 2px solid #10131a;
      }

      .sidepanel.admin-panel *::-webkit-scrollbar-track {
        background: #0c0f14;
      }

      /* ===== Inputs - validaciones ===== */
      .input.invalid, select.invalid {
        outline: 2px solid #e11;
        border-color: #e11;
        background-color: #ffecec;
      }

      .activity-info .money::-webkit-outer-spin-button, .activity-info .money::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      .activity-info .money {
        appearance: textfield;
      }

      /* ===== Tabs ===== */
      .tabs {
        display: flex;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid #e5e7eb;
      }

      .tab {
        background: transparent;
        border: 0;
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
      }

      .tab.is-active {
        background: #eef2ff;
      }

      .tabpanel {
        display: none;
        padding: 12px;
      }

      .tabpanel.is-active {
        display: block;
      }

      .tabpanel[aria-busy="true"] {
        opacity: .7;
        transition: opacity .15s ease;
      }

      /* ===== Loader gastos ===== */
      .exp-loader {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin: 8px 0 14px;
        font-size: 14px;
        color: #374151;
      }

      .exp-loader[hidden] {
        display: none;
      }

      .exp-loader .spinner {
        width: 18px;
        height: 18px;
        border: 3px solid #d1d5db;
        border-top-color: #6b7280;
        border-radius: 50%;
        animation: spin .9s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* ===== Gastos v2 (registros) ===== */
      .expv2 {
        --ring: #3b82f6;
        --muted: #000000;
        --soft: #f3f4f6;
      }

      .expv2 .card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 14px;
      }

      .expv2 .row {
        display: grid;
        gap: 12px;
        align-items: end;
        grid-template-columns: 1.1fr .9fr .9fr auto;
      }

      @media (max-width: 920px) {
        .expv2 .row {
          grid-template-columns: 1fr 1fr;
        }
      }
      .expv2 label .k {
        font-weight: 700;
        color: var(--muted);
        display: block;
        margin-bottom: 6px;
      }

      .expv2 .slider-wrap {
        padding: 12px;
        border-radius: 10px;
        background: var(--soft);
      }

      .expv2 .slider-labels {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px;
      }

      .expv2 input[type="range"] {
        width: 100%;
      }

      .expv2 .money-wrap {
        position: relative;
      }

      .expv2 .money-wrap .prefix {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: var(--muted);
        pointer-events: none;
      }

      .expv2 .money-wrap .input {
        padding-left: 58px;
      }

      .expv2 .list {
        margin-top: 14px;
      }

      .expv2 .item {
        display: grid;
        grid-template-columns: 1fr 120px 180px 32px;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        border: 1px solid #edf2f7;
        border-radius: 10px;
        margin-bottom: 8px;
      }

      @media (max-width: 920px) {
        .expv2 .item {
          grid-template-columns: 1fr 1fr 1fr 32px;
        }
      }
      .expv2 .pill {
        font-weight: 700;
        padding: 6px 10px;
        border-radius: 999px;
        background: #eef2ff;
        color: #3730a3;
        display: inline-block;
      }

      .expv2 .sum {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px dashed #e5e7eb;
        margin-top: 10px;
        padding-top: 10px;
      }

      .expv2 .sum .badge {
        background: #0ea5e9;
        color: #fff;
        border-radius: 999px;
        padding: 8px 16px;
        font-weight: 900;
        min-width: 120px;
        text-align: center;
      }

      .expv2 .ghost {
        border-radius: 999px;
        padding: 8px 14px;
      }

      .expv2 .item .del {
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        color: #ef4444;
      }

      .expv2 .item .del:hover {
        filter: brightness(.9);
      }

      @keyframes popIn {
        0% {
          transform: scale(.98);
          opacity: .2
        }
        100% {
          transform: scale(1);
          opacity: 1
        }
      }
      .expv2 .item.new {
        animation: popIn .18s ease-out;
      }

      /* ===== Gastos: form + registro ===== */
      .section-expenses {
        border-left: 4px solid #2563eb33;
      }

      .section-expenses .exp-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .section-expenses .exp-form {
        display: grid;
        grid-template-columns: 1fr .5fr .5fr .5fr auto;
        gap: 10px 12px;
        align-items: end;
        margin-bottom: 12px;
      }

      .section-expenses .exp-form .input {
        width: 100%;
      }

      .section-expenses .exp-form .add-col {
        display: flex;
        justify-content: flex-end;
      }

      .section-expenses .exp-list {
        border: 1px solid #e7e7e7;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
      }

      .section-expenses .exp-list .row {
        display: grid;
        grid-template-columns: 1.2fr 1fr .9fr .9fr .6fr;
        gap: 10px;
        align-items: center;
        padding: 12px 14px;
        min-height: 50px;
        border-top: 1px solid #f3f4f6;
      }

      .section-expenses .exp-list .row.h {
        background: #f8fafc;
        font-weight: 600;
        border-top: 0;
      }

      .section-expenses .exp-list .row > * {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .section-expenses .exp-list .row .kind {
        font-weight: 700;
        color: #111827;
      }

      .section-expenses .exp-list .row .when {
        color: #6b7280;
        font-variant-numeric: tabular-nums;
      }

      .section-expenses .exp-list .row .amount {
        text-align: right;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }

      .section-expenses .exp-list .row .actions {
        justify-self: end;
        background: transparent;
        margin-top: -5px;
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
        min-width: 72px;
      }

      .section-expenses .exp-list .row .input.sm {
        font-size: 12.5px;
        padding: 4px 8px;
        height: 34px;
        line-height: 1.2;
      }

      .section-expenses .exp-list .row select.input.sm {
        padding-right: 24px;
      }

      .section-expenses .exp-list .row .kind, .section-expenses .exp-list .row .when, .section-expenses .exp-list .row .amount {
        display: flex;
        align-items: center;
      }

      .section-expenses .exp-list .row .kind > .input.sm, .section-expenses .exp-list .row .when > .input.sm {
        width: 100%;
      }

      .section-expenses .exp-list .row .amount > .input.sm {
        width: 60%;
      }

      /* Campo con prefijo $ */
      .money-field {
        position: relative;
      }

      .money-field::before {
        content: "$";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: .85;
      }

      .money-field > input.input {
        padding-left: 18px;
      }

      .section-expenses .exp-list .row .money-field > input.input.sm {
        padding-left: 18px;
      }

      /* ===== Responsive gastos ===== */
      @media (max-width: 980px) {
        .section-expenses .exp-list .row {
          grid-template-columns: 1.2fr 1fr .9fr .8fr .6fr;
        }
      }
      @media (max-width: 960px) {
        .section-expenses .exp-form {
          grid-template-columns: 1.6fr 1fr 1fr auto;
          grid-auto-rows: minmax(0, auto);
        }

        .section-expenses .exp-form .fld:nth-child(1) {
          grid-column: 1 / -2;
        }
      }
      @media (max-width: 760px) {
        .section-expenses .exp-form {
          grid-template-columns: 1fr 1fr;
        }

        .section-expenses .exp-form .add-col {
          grid-column: 2 / 3;
          justify-content: flex-end;
        }

        .section-expenses .exp-list .row, .section-expenses .exp-list .row.h {
          grid-template-columns: 1.4fr 1fr .9fr 1fr 72px;
        }
      }
      @media (max-width: 680px) {
        .section-expenses .exp-list .row {
          grid-template-columns: 1fr .9fr .8fr .8fr .6fr;
        }
      }
      @media (max-width: 560px) {
        .section-expenses .exp-form {
          grid-template-columns: 1fr;
        }

        .section-expenses .exp-form .add-col {
          justify-content: stretch;
        }

        .section-expenses .exp-form .add-col .btn {
          width: 100%;
        }

        .section-expenses .exp-list .row {
          grid-template-columns: 1fr 1fr;
          grid-template-areas: "concepto acciones" "fecha metodo" "monto monto";
          row-gap: 6px;
          padding: 10px;
        }

        .section-expenses .exp-list .row.h {
          display: none;
        }

        .section-expenses .exp-list .row > .kind {
          grid-area: concepto;
          min-width: 0;
        }

        .section-expenses .exp-list .row > .when:nth-of-type(2) {
          grid-area: fecha;
        }

        .section-expenses .exp-list .row > .when:nth-of-type(3) {
          grid-area: metodo;
        }

        .section-expenses .exp-list .row > .amount {
          grid-area: monto;
          text-align: left;
          font-weight: 600;
        }

        .section-expenses .exp-list .row > .actions {
          grid-area: acciones;
          justify-content: flex-end;
          align-self: start;
        }
      }
      @media (max-width: 380px) {
        .section-expenses .icon-btn {
          padding: 4px 6px;
        }

        .section-expenses .exp-list .row > .actions {
          gap: 4px;
        }
      }

      /* ===== Preferencias de color ===== */
      @media (prefers-color-scheme: dark) {
        .activity-info {
          --modal-bg: #101214;
          --modal-fg: #f7f7f7;
          border-color: rgba(255, 255, 255, .06);
        }

        .activity-info .section {
          background: #0f1216;
          border-color: rgba(255, 255, 255, .08);
        }

        .activity-info .k {
          color: #9aa4b2;
        }

        .activity-info .input, .activity-info textarea, .activity-info select {
          background: #0c0f13;
          color: #eaeef4;
          border-color: rgba(255, 255, 255, .11);
        }

        .activity-info .close:hover {
          background: #1b1f26;
        }

        .activity-info .btn.ghost {
          color: #eaeef4;
          border-color: rgba(255, 255, 255, .15);
        }

        .activity-info .muted {
          color: #9ca3af;
        }

        .comment-bubble {
          background: #2563eb;
        }

        .comment-item.me .comment-bubble {
          background: #22c55e;
        }

        /* Scrollbars dark global */
        *::-webkit-scrollbar-thumb {
          background: #2a2f3a;
          border-radius: 8px;
          border: 2px solid #0b0d10;
        }

        *::-webkit-scrollbar-track {
          background: #0b0d10;
        }
      }

      /* ===== Usabilidad móvil / tap ===== */
      .calendar, .calendar *:not(input):not(textarea):not(select) {
        -webkit-touch-callout: none;
      }

      /* Selección: permite copiar en label/cell/bar y en submódulos de texto */
      .calendar {
        user-select: none;
      }

      .calendar .label, .calendar .bar, .calendar .cell, .note, .comments, .activity-info .content {
        user-select: text;
      }

      .calendar .bar, .calendar .cell, .calendar .label {
        -webkit-tap-highlight-color: transparent;
      }

      input, textarea, select {
        -webkit-user-select: text;
        user-select: text;
      }

      /* Hit targets más grandes en dispositivos táctiles */
      @media (hover: none) and (pointer: coarse) {
        .icon-btn, .toast .x, .comment-del {
          padding: 8px 10px;
          min-width: 40px;
          min-height: 40px;
        }
      }

      /* ===== Adjuntos: botón eliminar ===== */
      .attach-previews {
        margin: 8px 0 10px;
      }

      .attach-previews .cg-item {
        position: relative;
      }

      .attach-previews .cg-item .hkmod-del {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(0, 0, 0, .24);
        border: 1px solid rgba(255, 255, 255, .35);
        color: #fff;
        cursor: pointer;
        z-index: 2;
      }

      .attach-previews .cg-item .hkmod-del::before, .attach-previews .cg-item .hkmod-del::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 1.5px;
        background: currentColor;
        border-radius: 2px;
        transform-origin: center;
      }

      .attach-previews .cg-item .hkmod-del::before {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      .attach-previews .cg-item .hkmod-del::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      .attach-previews .comment-gallery {
        grid-template-columns: repeat(6, 84px);
      }

      @media (max-width: 560px) {
        .attach-previews .comment-gallery {
          grid-template-columns: repeat(3, 84px);
        }
      }
    }

    /* ======================== UTILITIES ====================== */
    @layer utilities {
      .u-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .u-grid-31 {
        display: grid;
        grid-template-columns: repeat(var(--days), var(--cellW));
      }
    }

    /* ===========================
       MODO OSCURO — MODAL LIMPIO
       Quita desvanecidos/gradientes
       =========================== */
    @media (prefers-color-scheme: dark) {
      .activity-info {
        --modal-bg: #0e1218; /* superficie principal */
        --modal-fg: #e8edf4; /* texto */
        background: var(--modal-bg);
        color: var(--modal-fg);
        border: 1px solid #1e2735;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
      }

      /* Header sin degradado ni blur */
      .activity-info .head {
        background: #0f141b; /* sólido, leve elevación */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: 1px solid #1e2735;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
      }

      /* Footer sin degradado ni blur */
      .activity-info .actions {
        background: #0f141b; /* sólido */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: 1px solid #1e2735;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      }

      /* Secciones internas más nítidas */
      .activity-info .section {
        background: #0c1117;
        border: 1px solid #1a2230;
      }

      /* Tipografía secundaria */
      .activity-info .k,
      .activity-info .muted {
        color: #9aa7bb;
      }

      /* Controles */
      .activity-info .input,
      .activity-info textarea,
      .activity-info select {
        background: #0a0f15;
        color: #e6edf6;
        border: 1px solid #233149;
      }

      .activity-info .input:focus,
      .activity-info textarea:focus,
      .activity-info select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
      }

      /* Botones */
      .activity-info .btn {
        background: #111827;
      }

      .activity-info .btn.ghost {
        color: #e6edf6;
        border-color: #2a364a;
      }

      .activity-info .btn.danger {
        background: #7f1d1d;
        border-color: #b91c1c;
      }

      /* Close (sin halo claro) */
      .activity-info .close:hover {
        background: #15202b;
      }

      /* Burbujas de comentarios coherentes en dark */
      .comment-bubble {
        background: #2563eb;
      }

      .comment-item.me .comment-bubble {
        background: #22c55e;
      }
    }

    /* (Opcional) si solo quieres quitar el desvanecido ya, sin tocar colores: */
    .activity-info .head,
    .activity-info .actions {
      background: transparent; /* reemplaza gradiente por transparente ... */
      backdrop-filter: none !important; /* ... y quita el blur */
      -webkit-backdrop-filter: none !important;
    }

    @media (prefers-color-scheme: dark) {
      .activity-info .head,
      .activity-info .actions {
        background: #0f141b; /* …en dark deja sólido */
      }
    }


    /* Evitar que la URL bar tape el footer del modal */
    @supports (-webkit-touch-callout: none) {
      /* Levanta el modal un poco si hay área segura inferior */
      .activity-info {
        /* deja un margen para la barra del navegador */
        margin-bottom: max(env(safe-area-inset-bottom), 12px);
      }

      /* El footer ya es sticky; dale colchón real de safe-area */
      .activity-info .actions {
        bottom: env(safe-area-inset-bottom);
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
      }

      /* El contenido no debe quedar oculto tras el footer */
      .activity-info .content {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
      }
    }

    /* Con dvh la altura respeta barras dinámicas de iOS */
    @supports (height: 90dvh) {
      .activity-info {
        /* evita que el modal “crezca” hasta chocar con la barra inferior */
        max-height: calc(90dvh - 16px - env(safe-area-inset-bottom, 0px));
      }
    }


    /* =========================================================
       FIX UNIFICADO — Lightbox centrado + Toast sobre todo
       (pegar al FINAL del CSS)
       ========================================================= */

    /* 1) Toast: que gane a cualquier stacking context mientras el lightbox está abierto */
    body.imgbox-open #toastRoot.toast-wrap {
      position: fixed !important;
      z-index: 2147483647 !important; /* capa máxima práctica */
    }

    /* 2) Si el layout tiene transform/filters en wrappers, neutralízalos SOLO con lightbox */
    body.imgbox-open .has-transform-context {
      transform: none !important;
      filter: none !important;
      perspective: none !important;
      will-change: auto !important;
    }

    /* 3) Backdrop del carrusel: fijo, centrado y con safe-areas */
    .activity-backdrop.imgbox {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(0, 0, 0, .55);
      z-index: 200001; /* por encima de cualquier modal normal */
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    /* 4) Wrap del carrusel: sin offsets, sin transforms, centrado real dentro del grid */
    .imgbox-wrap {
      position: relative; /* NO fixed */
      margin: 0;
      left: auto;
      top: auto; /* evita herencias raras */
      transform: none;
      inline-size: min(92vw, 1100px);
      max-block-size: min(90dvh, 900px); /* respeta barras dinámicas */
      background: #111;
      color: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
      display: grid;
      grid-template-rows: auto 1fr auto; /* [x][stage flex][counter] */
      gap: 8px;
      padding: 12px;
      overflow: hidden; /* evita empujes por overflow */
      z-index: 200002;
    }

    /* 5) Stage: permite que 1fr realmente encoja y centre */
    .imgbox-stage {
      min-height: 0; /* clave para que 1fr funcione */
      display: grid;
      place-items: center;
      position: relative;
    }

    /* 6) Imagen contenida dentro del viewport real */
    .imgbox-img {
      display: block;
      object-fit: contain;
      max-inline-size: 86vw;
      max-block-size: calc(80dvh - 60px); /* reserva para paddings/controles */
    }

    /* 7) Controles por encima de la imagen */
    .imgbox-x,
    .imgbox-prev,
    .imgbox-next {
      position: absolute;
      z-index: 200003;
    }

    .imgbox-x {
      right: 8px;
      top: 6px;
      background: transparent;
      color: #fff;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }

    .imgbox-prev, .imgbox-next {
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, .12);
      color: #fff;
      border: none;
      padding: 10px 14px;
      cursor: pointer;
      border-radius: 8px;
      font-size: 16px;
    }

    .imgbox-prev[disabled], .imgbox-next[disabled] {
      opacity: .4;
      cursor: default;
    }

    .imgbox-prev {
      left: 6px;
    }

    .imgbox-next {
      right: 6px;
    }

    .imgbox-counter {
      text-align: center;
      font-size: 12px;
      opacity: .8;
      padding-bottom: 4px;
    }

    /* 8) Estado del body cuando hay lightbox */
    body.imgbox-open {
      overflow: hidden;
      overscroll-behavior: contain;
    }

    /* 9) iOS/Safari: usa svh para alturas dinámicas reales */
    @supports (-webkit-touch-callout: none) {
      .imgbox-img {
        max-block-size: calc(80svh - 60px);
      }
    }

    .imgbox-wrap {
      max-width: min(95vw, 1100px);
      max-height: 92vh;
    }

    .imgbox-stage img {
      max-width: 90vw;
      max-height: 70vh; /* deja espacio a flechas/contador */
      object-fit: contain;
      display: block;
    }

    /* Leyenda como chips compactos */
    .legend.chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 10px;
      align-items: center;
      margin: 10px 0 6px;
    }

    .legend.chips .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .82rem; /* más pequeño */
      line-height: 1; /* compacto */
      padding: 6px 10px; /* chip padding */
      border-radius: 9999px; /* forma píldora */
      background: var(--chip-bg, #202020);
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    }

    @media (max-width: 640px) {
      .legend.chips .legend-item {
        font-size: .78rem;
        padding: 5px 9px;
      }
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    }

    /* Colores (usa las mismas variables que tus barras si ya existen) */
    .legend-dot[data-color="1"] {
      background: var(--bar-1, #2563eb);
    }

    .legend-dot[data-color="2"] {
      background: var(--bar-2, #f59e0b);
    }

    .legend-dot[data-color="3"] {
      background: var(--bar-3, #10b981);
    }

    .legend-dot[data-color="4"] {
      background: var(--bar-4, #8b5cf6);
    }

    .legend-dot[data-color="5"] {
      background: var(--bar-5, #ef4444);
    }

    /* Si quieres que el chip tenga el color muy suave del tono principal */
    .legend.chips .legend-item[data-color="1"] {
      --chip-bg: color-mix(in oklab, #2563eb 8%, white);
    }

    .legend.chips .legend-item[data-color="2"] {
      --chip-bg: color-mix(in oklab, #f59e0b 12%, white);
    }

    .legend.chips .legend-item[data-color="3"] {
      --chip-bg: color-mix(in oklab, #10b981 10%, white);
    }

    .legend.chips .legend-item[data-color="4"] {
      --chip-bg: color-mix(in oklab, #8b5cf6 10%, white);
    }

    .legend.chips .legend-item[data-color="5"] {
      --chip-bg: color-mix(in oklab, #ef4444 8%, white);
    }

    /* ===== Comment highlight — versión outline externa (limpia) ===== */

    /* contenedor deja “respirar” el outline */
    .comments-list {
      overflow: auto;
      padding: 8px 10px;
    }

    .comment-item {
      overflow: visible;
      position: relative;
      z-index: 0;
    }

    .comment-bubble {
      overflow: visible;
      position: relative;
      z-index: 1;
    }

    /* highlight: una sola definición */
    .comment-item .comment-bubble {
      position: relative;
    }

    .comment-highlight {
      position: relative;
      border-radius: 10px;
      outline: 2px solid var(--accent, #ffc400);
      outline-offset: 3px;
      box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent, #ffc400) 28%, transparent),
      0 12px 28px rgba(0, 0, 0, .28);
      animation: ch-fade 1.2s ease-out;
      scroll-margin: 12px;
    }

    /* persistente (sin animación) opcional */
    .comment-highlight--persist {
      animation: none !important;
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #ffc400) 30%, transparent),
      0 6px 18px rgba(0, 0, 0, .18);
    }

    /* dark mode: halo un poco más notorio */
    @media (prefers-color-scheme: dark) {
      .comment-highlight {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #ffc400) 22%, transparent),
        0 10px 24px rgba(0, 0, 0, .40);
      }
    }

    /* táctil: ring más grueso */
    @media (hover: none) and (pointer: coarse) {
      .comment-highlight {
        outline-width: 3px;
        outline-offset: 4px;
      }
    }

    /* motion reducido */
    @media (prefers-reduced-motion: reduce) {
      .comment-highlight {
        animation: none;
      }
    }

    /* alto contraste */
    @media (forced-colors: active) {
      .comment-highlight {
        outline: 2px solid Highlight;
        box-shadow: none;
      }
    }

    /* animación única (suavizada con degradado de salida) */
    @keyframes ch-fade {
      0% {
        outline-offset: 3px;
        box-shadow: /* halo interno fuerte al inicio */ 0 0 0 6px color-mix(in oklab, var(--accent, #ffc400) 32%, transparent),
          /* sombra profunda inicial */ 0 12px 28px rgba(0, 0, 0, .28);
      }
      40% {
        outline-offset: 3px;
        box-shadow: /* el halo crece y baja intensidad */ 0 0 0 10px color-mix(in oklab, var(--accent, #ffc400) 18%, transparent),
        0 10px 24px rgba(0, 0, 0, .22);
      }
      70% {
        outline-offset: 3px;
        box-shadow: /* último aliento del halo, muy suave */ 0 0 0 14px color-mix(in oklab, var(--accent, #ffc400) 6%, transparent),
        0 8px 20px rgba(0, 0, 0, .16);
      }
      100% {
        outline-offset: 3px;
        /* sin halo ni sombra: termina limpio */
        box-shadow: none;
      }
    }

    /* =========================================
       MODO OSCURO — UNIFICADO (Gastos + Botones + Tabs)
       ========================================= */

    /* ---------- Scope 1: oscuro por clase/atributo ---------- */
    :where(.dark, [data-theme="dark"], .theme-dark) {

      /* === EXP-LIST (tabla de gastos) === */

      .section-expenses .exp-list {
        background: #0f1114 !important;
        border: 1px solid #202734 !important;
        color: #e6edf6 !important;
      }

      .section-expenses .exp-list .row {
        background: #0c1117 !important;
        border-top: 1px solid #1a2230 !important;
        color: #e6edf6 !important;
      }

      .section-expenses .exp-list .row.h {
        background: #0f141b !important;
        color: #cfd7e3 !important;
        border-top-color: transparent !important;
      }

      .section-expenses .exp-list .row .kind {
        color: #e8eef6 !important;
        font-weight: 700;
      }

      .section-expenses .exp-list .row .when {
        color: #9aa7bb !important;
        font-variant-numeric: tabular-nums;
      }

      .section-expenses .exp-list .row .amount {
        color: #ffffff !important;
        text-align: right;
        font-weight: 800;
      }

      /* Acciones y controles */

      .section-expenses .exp-list .row .actions {
        color: #c5cfdd !important;
      }

      .section-expenses .icon-btn:hover {
        background: rgba(255, 255, 255, .06) !important;
      }

      .section-expenses .exp-list .row .input.sm,
      .section-expenses .exp-list .row select.input.sm {
        background: #0a0f15 !important;
        color: #e6edf6 !important;
        border: 1px solid #233149 !important;
      }

      .section-expenses .exp-list .row .input.sm::placeholder {
        color: #7f8da3 !important;
      }

      .section-expenses .exp-list .row:not(.h):hover {
        background: #0e1520 !important;
      }

      /* Botones Editar/Eliminar (texto + icon-only) */

      .section-expenses .exp-list .row .actions .btn {
        background: #111418;
        color: #e6e6e6;
        border: 1px solid #223045;
        border-radius: 10px;
        height: 32px;
        padding: 0 10px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
      }

      .section-expenses .exp-list .row .actions .btn:hover {
        filter: brightness(1.08);
      }

      .section-expenses .exp-list .row .actions .btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
      }

      .section-expenses .exp-list .row .actions .btn.ghost {
        background: transparent;
        color: #cfd6e4;
        border-color: #2a3a55;
      }

      .section-expenses .exp-list .row .actions .btn.danger {
        background: linear-gradient(180deg, #ef4444, #7f1d1d);
        color: #fff;
        border-color: #7f1d1d;
      }

      .section-expenses .exp-list .row .actions .icon-btn {
        background: #0f1216;
        color: #d7deea;
        border: 1px solid #223045;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-grid;
        place-items: center;
      }

      .section-expenses .exp-list .row .actions .icon-btn:hover {
        background: rgba(255, 255, 255, .06);
      }

      .section-expenses .exp-list .row .actions .icon-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
      }

      .section-expenses .exp-list .row .actions .icon-btn svg * {
        stroke: currentColor;
        fill: none;
      }

      .section-expenses .exp-list .row .actions .icon-btn svg[fill]:not([fill="none"]),
      .section-expenses .exp-list .row .actions .icon-btn svg path[fill]:not([fill="none"]) {
        fill: currentColor !important;
      }

      /* === TABS: modal ActivityInfo === */

      .activity-info .tabs {
        border-bottom: 1px solid var(--line, #202734);
      }

      .activity-info .tab {
        background: #0f1216;
        color: #cfd6e4;
        border: 1px solid #1f2937;
        border-bottom: none;
      }

      .activity-info .tab:hover {
        filter: brightness(1.05);
      }

      .activity-info .tab.is-active {
        background: #111418;
        color: #fff;
        border-color: #263042;
      }

      .activity-info .tabpanel {
        background: #0f1114;
        border: 1px solid #263042;
        border-top: none;
        color: #e6edf6;
      }

      /* === TABS: dashboard (.dash-tab) === */

      .dash-tabs {
        border-bottom: 1px solid var(--line, #202734);
      }

      .dash-tab {
        background: #0f1216;
        color: #cfd6e4;
        border: 1px solid #1f2937;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
      }

      .dash-tab:hover {
        filter: brightness(1.05);
      }

      .dash-tab.is-active {
        background: #111418;
        color: #fff;
        border-color: #263042;
      }

      .tab-view.is-active {
        background: #0f1114;
        border: 1px solid #263042;
        border-top: none;
        color: #e6edf6;
      }

      /* Accesibilidad focus */

      .activity-info .tab:focus-visible,
      .dash-tab:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .22);
      }
    }

    /* ---------- Scope 2: oscuro por prefers-color-scheme ---------- */
    @media (prefers-color-scheme: dark) {

      /* === EXP-LIST === */
      .section-expenses .exp-list {
        background: #0f1114 !important;
        border: 1px solid #202734 !important;
        color: #e6edf6 !important;
      }

      .section-expenses .exp-list .row {
        background: #0c1117 !important;
        border-top: 1px solid #1a2230 !important;
        color: #e6edf6 !important;
      }

      .section-expenses .exp-list .row.h {
        background: #0f141b !important;
        color: #cfd7e3 !important;
        border-top-color: transparent !important;
      }

      .section-expenses .exp-list .row .kind {
        color: #e8eef6 !important;
        font-weight: 700;
      }

      .section-expenses .exp-list .row .when {
        color: #9aa7bb !important;
        font-variant-numeric: tabular-nums;
      }

      .section-expenses .exp-list .row .amount {
        color: #ffffff !important;
        text-align: right;
        font-weight: 800;
      }

      .section-expenses .exp-list .row .actions {
        color: #c5cfdd !important;
      }

      .section-expenses .icon-btn:hover {
        background: rgba(255, 255, 255, .06) !important;
      }

      .section-expenses .exp-list .row .input.sm,
      .section-expenses .exp-list .row select.input.sm {
        background: #0a0f15 !important;
        color: #e6edf6 !important;
        border: 1px solid #233149 !important;
      }

      .section-expenses .exp-list .row .input.sm::placeholder {
        color: #7f8da3 !important;
      }

      .section-expenses .exp-list .row:not(.h):hover {
        background: #0e1520 !important;
      }

      /* Botones acciones */
      .section-expenses .exp-list .row .actions .btn {
        background: #111418;
        color: #e6e6e6;
        border: 1px solid #223045;
        border-radius: 10px;
        height: 32px;
        padding: 0 10px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
      }

      .section-expenses .exp-list .row .actions .btn:hover {
        filter: brightness(1.08);
      }

      .section-expenses .exp-list .row .actions .btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
      }

      .section-expenses .exp-list .row .actions .btn.ghost {
        background: transparent;
        color: #cfd6e4;
        border-color: #2a3a55;
      }

      .section-expenses .exp-list .row .actions .btn.danger {
        background: linear-gradient(180deg, #ef4444, #7f1d1d);
        color: #fff;
        border-color: #7f1d1d;
      }

      .section-expenses .exp-list .row .actions .icon-btn {
        background: #0f1216;
        color: #d7deea;
        border: 1px solid #223045;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-grid;
        place-items: center;
      }

      .section-expenses .exp-list .row .actions .icon-btn:hover {
        background: rgba(255, 255, 255, .06);
      }

      .section-expenses .exp-list .row .actions .icon-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
      }

      .section-expenses .exp-list .row .actions .icon-btn svg * {
        stroke: currentColor;
        fill: none;
      }

      .section-expenses .exp-list .row .actions .icon-btn svg[fill]:not([fill="none"]),
      .section-expenses .exp-list .row .actions .icon-btn svg path[fill]:not([fill="none"]) {
        fill: currentColor !important;
      }

      /* Tabs modal ActivityInfo */
      .activity-info .tabs {
        border-bottom: 1px solid var(--line, #202734);
      }

      .activity-info .tab {
        background: #0f1216;
        color: #cfd6e4;
        border: 1px solid #1f2937;
        border-bottom: none;
      }

      .activity-info .tab:hover {
        filter: brightness(1.05);
      }

      .activity-info .tab.is-active {
        background: #111418;
        color: #fff;
        border-color: #263042;
      }

      .activity-info .tabpanel {
        background: #0f1114;
        border: 1px solid #263042;
        border-top: none;
        color: #e6edf6;
      }

      /* Tabs dashboard */
      .dash-tabs {
        border-bottom: 1px solid var(--line, #202734);
      }

      .dash-tab {
        background: #0f1216;
        color: #cfd6e4;
        border: 1px solid #1f2937;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
      }

      .dash-tab:hover {
        filter: brightness(1.05);
      }

      .dash-tab.is-active {
        background: #111418;
        color: #fff;
        border-color: #263042;
      }

      .tab-view.is-active {
        background: #0f1114;
        border: 1px solid #263042;
        border-top: none;
        color: #e6edf6;
      }

      .activity-info .tab:focus-visible,
      .dash-tab:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .22);
      }
    }

    /* =========================
   PDF: Light capture mode (ink saver)
   ========================= */
    html.pdf-light {
      --bg: #ffffff;
      --card: #ffffff;
      --text: #111827;
      --muted: #4b5563;
      --border: #d1d5db;
      --shadow: none;

      /* lighten layout fills */
      --occupied: #dbeafe; /* azul muy claro */
      --vacio: #f3f4f6; /* gris muy claro */
    }

    /* evitar fondos oscuros fijos */
    html.pdf-light body {
      background: #fff;
      color: var(--text);
    }

    html.pdf-light .card {
      box-shadow: none;
    }

    html.pdf-light .layout-scroll {
      background: #fff;
      border-color: var(--border);
    }

    html.pdf-light .hdrCell {
      background: rgba(255, 255, 255, .95);
      color: #374151;
      backdrop-filter: none;
    }

    /* celdas y subceldas que estaban en negro */
    html.pdf-light .cell100,
    html.pdf-light .sub50,
    html.pdf-light .sw.empty {
      background: #fff;
      border-color: var(--border);
    }

    /* chip del nombre (menos tinta, más legible) */
    html.pdf-light .placementLabel {
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(0, 0, 0, .20);
      color: #111827;
      box-shadow: none;
      backdrop-filter: none;
    }

    /* rail de monitores: claro */
    html.pdf-light .monitorRail {
      background: rgba(16, 185, 129, .10);
    }

    .pdfBusy {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(0, 0, 0, .45);
      backdrop-filter: blur(6px);
      z-index: 9999;
    }

    .pdfBusyCard {
      width: min(420px, calc(100vw - 32px));
      background: rgba(20, 20, 20, .92);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
      color: #fff;
    }

    .pdfBusyTitle {
      font-weight: 700;
      margin-bottom: 6px;
    }

    .pdfBusyMsg {
      color: rgba(255, 255, 255, .75);
      margin-bottom: 12px;
      font-size: 13px;
    }

    .pdfBusyBar {
      height: 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
      overflow: hidden;
    }

    .pdfBusyFill {
      width: 12%;
      height: 100%;
      border-radius: 999px;
      background: rgba(255, 196, 0, .92);
      transition: width .18s ease;
    }

    .pdfBusyHint {
      margin-top: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, .55);
    }

    /* I force the native hidden attribute to always hide the element. */
    .pdfBusy[hidden] {
      display: none !important;
    }

    .pdfBusyOpen[hidden] {
      display: none !important;
    }

    .pdfBusyOpen {
      margin-top: 12px;
      width: 100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 196, 0, .92);
      color: #111;
      font-weight: 700;
      cursor: pointer;
    }

    .pdfBusyOpen:active {
      transform: translateY(1px);
    }

    .pdfBusyClose {
      margin-top: 10px;
      width: 100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .10);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }

    :root[data-theme="light"] .pdfBusy {
      background: rgba(15, 23, 42, .28);
      backdrop-filter: blur(4px);
    }

    :root[data-theme="light"] .pdfBusyCard {
      background: #ffffff;
      color: #111827;
      border-color: #d7dee8;
      box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    }

    :root[data-theme="light"] .pdfBusyMsg {
      color: #4b5563;
    }

    :root[data-theme="light"] .pdfBusyBar {
      background: #eef2f7;
    }

    :root[data-theme="light"] .pdfBusyHint {
      color: #64748b;
    }

    :root[data-theme="light"] .pdfBusyClose {
      background: #f5f7fb;
      color: #111827;
      border-color: #d7dee8;
    }

    .pdfBusyClose:hover {
      background: rgba(255, 255, 255, .14);
    }

    .pdfBusyClose:active {
      transform: translateY(1px);
    }

    .pdfBusyClose[disabled] {
      opacity: .45;
      cursor: not-allowed;
    }

    /* ===== Top badge (messages) ===== */
    .topBadge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      font-size: 12px;
      font-weight: 750;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.65);
      color:#111827;
      max-width: min(680px, 92vw);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .topBadge::before{
      content:"";
      width:8px; height:8px;
      border-radius: 999px;
      background: currentColor;
      opacity:.75;
    }

    /* tones */
    .topBadge.ok{
      background: rgba(16,185,129,.18);
      border-color: rgba(16,185,129,.35);
      color: #0a8f6a;
    }
    .topBadge.warn{
      background: rgba(245,158,11,.18);
      border-color: rgba(245,158,11,.35);
      color: #cf5c17;
    }
    .topBadge.err{
      background: rgba(239,68,68,.18);
      border-color: rgba(239,68,68,.35);
      color: #bd2d2d;
    }

    .legend-top{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap: wrap;
    }

    .legend-top .topBadge{
      flex: 0 1 auto;
      max-width: min(520px, 92vw);
    }

    .topBadge[hidden]{ display:none !important; }