@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap");
/* =========================================================
   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;
    --header-bg: #111418;
    --header-fg: #e6e6e6;
    --header-border: #1e2329;
    --hc-bg: #0f1216;
    --hc-fg: #e6e6e6;
    --hc-border: #273244;
    --hc-hover: #161c26;
    --hc-focus: rgba(96,165,250,.45);

    /* 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: 190px;
    --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);

    /* Botones (look tipo Material 3) */
    --btn-h: 36px;
    --btn-radius: 10px;
    --btn-pad-x: 16px;
    --btn-bg: #1f2937;
    --btn-fg: #f8fafc;
    --btn-border: rgba(255,255,255,.14);
    --btn-hover: #2b3442;
    --btn-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.22);
    --btn-ghost-fg: #e6edf6;
    --btn-ghost-border: rgba(255,255,255,.2);
    --btn-ghost-hover: rgba(255,255,255,.08);

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

    /* Carriles en filas con varias barras */
    --laneH: 24px;
    --laneGap: 3px;

    /* Gantt (enterprise look) */
    --g-panel: #0f131a;
    --g-line: #232a36;
    --g-header-bg: #121823;
    --g-header-fg: #e9eef7;
    --g-label-bg: #0f141c;
    --g-label-fg: #dbe4f2;
    --g-label-border: #1f2a3a;
    --g-cell-bg: #0f141c;
    --g-row-hover: rgba(255,255,255,.04);
    --g-row-alt: #101722;
    --g-bar-shadow: rgba(0,0,0,.25);

    /* 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;

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

  :root[data-theme="light"],
  [data-theme="light"] :root {
    /* Base */
    --bg: #e6ebf2;
    --grid: #d7dee8;
    --text: #1f2937;
    --accent: #f2b705;
    --header-bg: #eef2f7;
    --header-fg: #1f2937;
    --header-border: #d7dee8;
    --hc-bg: #e9eef4;
    --hc-fg: #1f2937;
    --hc-border: #d7dee8;
    --hc-hover: #eef2f7;
    --hc-focus: rgba(37,99,235,.35);

    /* Calendar layout */
    --select: rgba(31, 41, 55, .08);
    --catHeaderBg: #e7edf5;

    /* Tokens de sombras/anillos */
    --shadow-lg: 0 12px 30px rgba(15, 23, 42, .14);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .08);
    --ring-blue: rgba(37, 99, 235, .16);
    --ring-red: rgba(239, 68, 68, .18);

    /* Botones (look tipo Material 3) */
    --btn-bg: #111827;
    --btn-fg: #ffffff;
    --btn-border: #0f172a;
    --btn-hover: #0f172a;
    --btn-shadow: 0 1px 2px rgba(15, 23, 42, .16), 0 6px 12px rgba(15, 23, 42, .12);
    --btn-ghost-fg: #1f2937;
    --btn-ghost-border: #cbd5e1;
    --btn-ghost-hover: rgba(37, 99, 235, .08);

    /* Sidepanel (tema claro corporativo) */
    --sp-bg: #e9eef4;
    --sp-elev: #e3e9f1;
    --sp-border: #d8e0ec;
    --sp-text: #111827;
    --sp-text-dim: #5f6c82;
    --sp-accent: #2563eb;
    --sp-accent-2: #16a34a;
    --sp-danger: #dc2626;
    --sp-hover: #eef2f7;
    --sp-selected: #e3ecfb;
    --sp-outline: #8fb7f7;
    --sp-input-bg: #e7ecf3;

    /* Modal */
    --modal-bg: #ffffff;
    --modal-fg: #1b2430;

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

    /* Gantt (enterprise look) */
    --g-panel: #eef2f6;
    --g-line: #d9e1ec;
    --g-header-bg: #e8edf3;
    --g-header-fg: #1f2937;
    --g-label-bg: #edf1f6;
    --g-label-fg: #1f2937;
    --g-label-border: #d7dee8;
    --g-cell-bg: #f1f4f8;
    --g-row-hover: rgba(15,23,42,.04);
    --g-row-alt: #e9eef4;
    --g-bar-shadow: rgba(15,23,42,.18);
  }

:root { color-scheme: dark light; }

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

  /* 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; }

  .btn {
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    font: inherit;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, transform .04s ease;
  }
  .btn:hover { background: var(--btn-hover); }
  .btn:active { transform: translateY(1px); box-shadow: none; }
  .btn.ghost {
    background: transparent;
    color: var(--btn-ghost-fg);
    border: 1px solid var(--btn-ghost-border);
    box-shadow: none;
  }
  .btn.ghost:hover { background: var(--btn-ghost-hover); }
  .btn.danger { background: #b91c1c; border-color: transparent; color: #fff; }
  .btn.danger:hover { background: #991b1b; }

  /* ===== 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: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
  }
  header .controls { display: flex; gap: 8px; align-items: center; flex: 1; }
  .hdr-controls button,
  .hdr-controls .btn {
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, transform .04s ease;
  }
  .hdr-controls button:hover,
  .hdr-controls .btn:hover { background: var(--btn-hover); }
  .hdr-controls button:active,
  .hdr-controls .btn:active { transform: translateY(1px); box-shadow: none; }
  .hdr-controls button:focus-visible,
  .hdr-controls .btn:focus-visible {
    outline: 2px solid var(--hc-focus);
    outline-offset: 2px;
  }
  .hdr-controls select {
    height: var(--btn-h);
    padding: 0 36px 0 12px;
    border-radius: var(--btn-radius);
    background: var(--hc-bg);
    color: var(--hc-fg);
    border: 1px solid var(--hc-border);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    appearance: none;
    background-image: none;
  }
  .hdr-controls select:hover { background: var(--hc-hover); }
  .app-header .page-title { display: none; }
  header .btn-ghost { background: transparent; }

  /* ===== Calendario ===== */
  .calendar-scroll {
    overflow-x: auto;
    max-width: 100%;
    overscroll-behavior-x: contain;
    background: var(--bg);
    touch-action: pan-x pan-y;
  }
  .cal-header, .cat-header { cursor: grab; }
  .calendar-scroll.is-dragging .cal-header,
  .calendar-scroll.is-dragging .cat-header { cursor: grabbing; }
  .calendar { position: relative; width: max-content; overflow-x: visible; }
  .calendar .cal-header,
  .calendar .body,
  .calendar .row { width: max-content; }
  .days,
  .row .cells { min-width: calc(var(--days) * var(--cellW)); }
  .calendar.is-loading { display: block; min-height: auto; }
  .calendar .loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    backdrop-filter: saturate(.8) blur(1px);
    z-index: 6;
  }
  .calendar.is-loading .loading { display: flex; }
  :root[data-theme="light"] .calendar .loading {
    background: rgba(255,255,255,.75);
    color: #1f2937;
  }

  /* Loader dentro del panel admin */
  .admin-panel { position: relative; }
  .admin-panel .admin-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    backdrop-filter: saturate(.8) blur(1px);
    z-index: 4;
  }
  .admin-panel.is-loading .admin-loading { display: flex; }
  :root[data-theme="light"] .admin-panel .admin-loading {
    background: rgba(255,255,255,.75);
    color: #1f2937;
  }

  .cal-header { position: sticky; top: 0; z-index: 1; 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;
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--header-bg);
  }

  .calendar .row { display: flex; }
  .days { display: grid; grid-template-columns: repeat(var(--days), var(--cellW)); flex: 0 0 auto; width: max-content; }
  .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) max-content; 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);
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg);
  }

  .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 {
    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; }
  :root[data-theme="light"] .row .cells .cell:hover {
    outline: 1px dashed rgba(37, 99, 235, .6);
    outline-offset: -1px;
  }
  .cell.sel { background: var(--select); }
  :root[data-theme="light"] .cell.sel{
    background: rgba(37, 99, 235, .18);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .35);
  }

  .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;
    position: sticky;
    left: 0;
    z-index: 3;
  }
  :root[data-theme="light"] .cat-header.row {
    background: var(--catHeaderBg);
    color: #111827;
    border-top: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
  }
  :root[data-theme="light"] .cat-header .label {
    background: var(--catHeaderBg);
    color: #111827;
  }
  :root[data-theme="light"] .cat-header .cells .cell {
    background: var(--catHeaderBg);
    border-left-color: #d7dee8;
    border-right-color: #d7dee8;
  }
  :root[data-theme="light"] .cat-header .cells {
    background: var(--catHeaderBg);
  }
  :root[data-theme="light"] .row .label { color: #1f2937; }
  :root[data-theme="light"] .row.tech { background: #f2f6ff; }
  :root[data-theme="light"] .row.tech .label { background: #eaf1ff; border-right-color: #d6e6ff; }
  :root[data-theme="light"] .cat-header.row .label,
  :root[data-theme="light"] .cat-header.row .label span {
    color: #111827;
  }
  .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: 8px;
    display: flex; align-items: center; gap: 8px; padding: 0 10px; font-weight: 700; white-space: nowrap; overflow: visible; text-overflow: ellipsis;
    border: 1px solid color-mix(in oklab, var(--bar-current, var(--bar-1)) 70%, #000);
    cursor: grab; z-index: 1;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--bar-current, var(--bar-1)) 86%, white),
      var(--bar-current, var(--bar-1))
    );
    box-shadow:
      0 6px 14px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 0 0 1px rgba(255,255,255,.12);
  }
  .bar:hover,
  .bar.show-title {
    z-index: 6;
  }
  .bar.flash {
    animation: barFlash 2.2s ease-in-out 0s 2;
    z-index: 4;
  }
  @media (hover: none) and (pointer: coarse) {
    .bar.flash {
      outline: 3px solid #f59e0b;
      outline-offset: 2px;
      box-shadow:
        0 0 0 6px rgba(245, 158, 11, 0.25),
        0 12px 24px rgba(0,0,0,.35);
    }
  }
  @keyframes barFlash {
    0% {
      transform: scale(1);
      filter: saturate(1);
      box-shadow:
        0 6px 14px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 0 0 1px rgba(255,255,255,.12);
    }
    45% {
      transform: scale(1.02);
      filter: saturate(1.2);
      box-shadow:
        0 0 0 2px color-mix(in oklab, var(--bar-current, var(--bar-1)) 70%, white),
        0 10px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.45);
    }
    100% {
      transform: scale(1);
      filter: saturate(1);
      box-shadow:
        0 6px 14px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 0 0 1px rgba(255,255,255,.12);
    }
  }
    .bar:active { cursor: grabbing; }
    .bar .title { display: none; }
  .bar .bar-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      order: 0;
      margin-right: 6px;
      position: absolute;
      left: -2px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: rgba(15, 23, 42, .85);
      filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
    }
    .bar .report-notch {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 1px 2px 0 0;
      font-size: 7px;
      font-weight: 800;
      letter-spacing: -0.2px;
      color: #f8fafc;
      background: transparent;
      border-top-right-radius: 6px;
      pointer-events: none;
      z-index: 2;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }
    .bar .report-notch::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #0f172a;
      clip-path: polygon(100% 0, 0 0, 100% 100%);
      border-top: 1px solid rgba(15,23,42,.85);
      border-right: 1px solid rgba(15,23,42,.85);
      border-top-right-radius: 6px;
      z-index: 0;
    }
    .bar .report-notch > span {
      position: relative;
      z-index: 1;
    }
    :root[data-theme="dark"] .bar .report-notch::before {
      background: rgba(15, 23, 42, .85);
      border-top: 1px solid rgba(248,250,252,.35);
      border-right: 1px solid rgba(248,250,252,.35);
    }
    .bar .incident-notch {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 0 2px 1px 0;
      font-size: 7px;
      font-weight: 800;
      letter-spacing: -0.2px;
      color: #f8fafc;
      background: transparent;
      border-bottom-right-radius: 6px;
      pointer-events: none;
      z-index: 2;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }
    .bar .incident-notch::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #0f172a;
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      border-bottom: 1px solid rgba(15,23,42,.85);
      border-right: 1px solid rgba(15,23,42,.85);
      border-bottom-right-radius: 6px;
      z-index: 0;
    }
    .bar .incident-notch > span {
      position: relative;
      z-index: 1;
    }
    :root[data-theme="dark"] .bar .incident-notch::before {
      background: rgba(15, 23, 42, .85);
      border-bottom: 1px solid rgba(248,250,252,.35);
      border-right: 1px solid rgba(248,250,252,.35);
    }
    .bar.has-expenses {
      padding-left: 0;
    }
    :root[data-theme="dark"] .bar .bar-ico {
      color: rgba(255, 255, 255, .92);
      filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
    }
.legend-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      font-size: 9px;
      font-weight: 800;
      color: #0f172a;
      background: #f8fafc;
      border: 1px solid rgba(15,23,42,.25);
      border-radius: 4px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="dark"] .legend-badge {
      color: #f8fafc;
      background: rgba(15, 23, 42, .85);
      border-color: rgba(248,250,252,.35);
    }
    .bar::after{
      content: attr(data-title);
      position: absolute;
      left: 0;
    bottom: calc(100% + 8px);
    transform: translateY(6px);
    padding: 10px 12px;
    border-radius: 12px;
    background: #111827;
    border: 1px solid rgba(255,255,255,.12);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: normal;
    width: max-content;
    max-width: 360px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
      z-index: 40000;
    }
    .bar::before{
    content:"";
    position:absolute;
    left: 22px;
    top: calc(-8px);
    width: 12px;
    height: 12px;
    background: #111827;
    border-left: 1px solid rgba(255,255,255,.12);
    border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
      z-index: 39999;
    }
  .bar:hover::after{
    opacity: 1;
    transform: translateY(0);
  }
  .bar:hover::before{
    opacity: 1;
    transform: translateY(-2px) rotate(45deg);
  }
  .bar.show-title::after{
    opacity: 1;
    transform: translateY(0);
  }
  .bar.show-title::before{
    opacity: 1;
    transform: translateY(-2px) rotate(45deg);
  }
  .bar.tooltip-below::after{
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateY(-6px);
  }
  .bar.tooltip-below::before{
    top: auto;
    bottom: calc(-8px);
    transform: rotate(225deg);
  }
  .bar.tooltip-below:hover::after,
  .bar.tooltip-below.show-title::after{
    transform: translateY(0);
  }
  .bar.tooltip-below:hover::before,
  .bar.tooltip-below.show-title::before{
    transform: translateY(2px) rotate(225deg);
  }
  @media (max-width: 640px){
      .bar.has-expenses { padding-left: 20px; }
      .bar .bar-ico { left: 4px; }
      .bar .report-notch {
        width: 12px;
        height: 12px;
        font-size: 8px;
      }
      .bar.short.has-expenses { padding-left: 0; }
      .bar.short.has-expenses .bar-ico { left: 50% !important; margin-right: 0; transform: translate(-50%, -50%) !important; }
      .bar::after{
        left: 50%;
        right: auto;
      transform: translate(-50%, 6px);
      width: max-content;
      max-width: calc(100vw - 32px);
      text-align: center;
      font-size: 13px;
      line-height: 1.25;
      padding: 12px 14px;
    }
    .bar:hover::after,
    .bar.show-title::after{
      transform: translate(-50%, 0);
    }
    .bar::before{
      left: 50%;
      top: calc(-10px);
      transform: translate(-50%, 0) rotate(45deg);
    }
    .bar:hover::before,
    .bar.show-title::before{
      transform: translate(-50%, -2px) rotate(45deg);
    }
    .bar.tooltip-below::after{
      top: calc(100% + 8px);
      bottom: auto;
      transform: translate(-50%, -6px);
    }
    .bar.tooltip-below::before{
      top: auto;
      bottom: calc(-8px);
      transform: translate(-50%, 0) rotate(225deg);
    }
    .bar.tooltip-below:hover::after,
    .bar.tooltip-below.show-title::after{
      transform: translate(-50%, 0);
    }
    .bar.tooltip-below:hover::before,
    .bar.tooltip-below.show-title::before{
      transform: translate(-50%, 2px) rotate(225deg);
    }
  }
  :root[data-theme="light"] .bar{
    border: 1px solid rgba(15, 23, 42, .18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  }
  :root[data-theme="light"] .bar::after{
    background: #ffffff;
    color: #111827;
    border: 1px solid #d7dee8;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
  }
  :root[data-theme="light"] .bar::before{
    background: #ffffff;
    border-left: 1px solid #d7dee8;
    border-top: 1px solid #d7dee8;
  }
  :root[data-theme="light"] .cell.is-range{
    background: rgba(37, 99, 235, .18);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .45);
  }
  :root[data-theme="light"] .daycell.is-range{
    background: rgba(37, 99, 235, .22);
    box-shadow: inset 0 -2px 0 rgba(37, 99, 235, .55);
  }
  .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; }

body.viewer-mode [data-expense-clear] {
    display: none !important;
}

.legend-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      color: #0f172a;
    }
    :root[data-theme="dark"] .legend-ico {
      color: #f8fafc;
    }

body.viewer-mode [data-tab="gastos"],
body.viewer-mode [data-panel="gastos"] {
    display: none !important;
}

  .title-ico,
  .btn-ico,
  .icon-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .title-ico svg { width: 18px; height: 18px; }
.btn-ico svg { width: 16px; height: 16px; margin-right: 6px; }
.icon-plain svg { width: 16px; height: 16px; }
.icon-ico { width: 16px; height: 16px; margin-right: 6px; }

  /* 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;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  @media (max-width: 720px) and (hover: none){
    .activity-backdrop{ display: none; }
  }
  body.force-backdrop .activity-backdrop{ display: block !important; }
  .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(900px, calc(96vw - 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; align-items: center; 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 .actions .actions-left { display: flex; gap: 6px; margin-right: auto; align-items: center; }
  .activity-info .actions .actions-right { display: flex; gap: 6px; align-items: center; }
  .activity-info .actions .btn { font-weight: 600; letter-spacing: 0; }
  .activity-info .actions .btn-incident { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); color: #0f6f2b; }
  .activity-info .actions .btn-incident:hover { background: rgba(34,197,94,.2); }
  .activity-info .actions .btn-service { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.45); color: #1f4fa3; }
  .activity-info .actions .btn-service:hover { background: rgba(59,130,246,.2); }

  .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 .tech-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
    .activity-info .tech-line .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activity-info .tech-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
    .activity-info .chip { display: inline-flex; align-items: center; gap: 6px; }
  .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 .fld { min-width: 0; }
  .activity-info .input,
  .activity-info select,
  .activity-info input[type="date"] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .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: 46px; padding: 3px 10px; border-radius: 999px; background: #0ea5e9; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; height: 22px; }
    .activity-info .badge.missing { background: #ef4444; }
    @media (max-width: 520px) {
      .activity-info .tech-line { flex-direction: column; align-items: flex-start; }
      .activity-info .tech-line .v { white-space: normal; }
      .activity-info .tech-chips { flex-wrap: wrap; row-gap: 6px; }
      .activity-info .chip { gap: 4px; }
    }

  .activity-info .btn {
    appearance: none;
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, transform .04s ease;
  }
  .activity-info .btn:hover { background: var(--btn-hover); }
  .activity-info .btn:active { transform: translateY(1px); box-shadow: none; }
  .activity-info .btn.ghost { background: transparent; color: var(--btn-ghost-fg); border: 1px solid var(--btn-ghost-border); box-shadow: none; }
  .activity-info .btn.ghost:hover { background: var(--btn-ghost-hover); }
  .activity-info .btn.danger { background: #b91c1c; border-color: transparent; color: #fff; }
  .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; }

  /* ===== Modal responsive refinements ===== */
  @media (max-width: 720px){
    .activity-info{
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
      inset: 0 !important;
      margin: 0 !important;
      max-width: 100%;
    }
    .activity-info .head{
      padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 8px;
    }
    .activity-info .actions{
      padding: 10px;
      gap: 8px;
      display: grid;
      grid-template-columns: 1fr;
    }
    .activity-info .actions .actions-left,
    .activity-info .actions .actions-right{
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      justify-content: stretch;
    }
    .activity-info .actions .btn{
      width: 100%;
    }
    .activity-info .title,
    .activity-info .title-input{
      max-width: 100%;
      min-width: 0;
    }
  }
  @media (max-width: 560px){
    .activity-info{
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
      inset: 0 !important;
      margin: 0 !important;
    }
    @supports (height: 100svh){
      .activity-info{
        height: 100svh;
        max-height: 100svh;
      }
    }
    .activity-info .content{
      padding: 10px;
    }
    .activity-info .actions{
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      flex-direction: column;
      align-items: stretch;
    }
    .activity-info .actions .actions-left{
      width: 100%;
    }
    .activity-info .actions .actions-right{
      width: 100%;
      justify-content: stretch;
    }
    .activity-info .actions .actions-left{
      width: 100%;
    }
    .activity-info .actions .btn{
      width: 100%;
    }
    .activity-info .meta{
      grid-template-columns: 1fr;
    }
  }

  /* ===== 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-item.system { max-width: 100%; }
.comment-item.system .comment-bubble{
  background: transparent;
  color: #6b7280;
  border: 0;
  padding: 6px 0;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: none;
  border-radius: 0;
}
.comment-item.system .comment-bubble::before,
.comment-item.system .comment-bubble::after{
  content: "";
  height: 1px;
  background: rgba(0,0,0,.12);
  flex: 1 1 auto;
}
.comment-item.system .system-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,.35);
  font-weight: 700;
}
.comment-item.system .system-link:hover{
  text-decoration-color: rgba(0,0,0,.6);
}
.comment-item.system .comment-meta{
  justify-content: center;
  font-size: 10px;
  color: #9aa1ac;
}
.comment-item.system .comment-del{
  display: none;
}
  .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; }
  .comment-gallery .cg-file {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #e5e7eb;
    text-decoration: none;
    text-align: center;
    padding: 6px;
    gap: 4px;
    transition: transform .08s ease, border-color .12s ease, background .12s ease;
  }
  .comment-gallery .cg-file:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
  }
  .comment-gallery .cg-file-ic {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,.35);
    color: #fff;
    letter-spacing: .04em;
  }
  .comment-gallery .cg-file-name {
    font-size: 11px;
    max-width: 72px;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    text-align: center;
  }
  .comment-gallery .cg-file-meta { font-size: 10px; opacity: .8; }

  .comment-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .comment-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #e5e7eb;
    text-decoration: none;
    max-width: 100%;
    transition: transform .08s ease, border-color .12s ease, background .12s ease;
  }
  .comment-file:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
  }
  .comment-file-ic {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,.35);
    color: #fff;
    letter-spacing: .04em;
  }
  .comment-file-name {
    max-width: 240px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
  }
  .comment-file-meta { font-size: 11px; opacity: .75; }
  @media (max-width: 560px) {
    .comment-file { width: 100%; justify-content: space-between; }
    .comment-file-name { max-width: 60vw; }
  }
  .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 .fld { min-width: 0; }
  .section-expenses .exp-form .input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .section-expenses .exp-form select.input,
  .section-expenses .exp-form input[type="date"].input { min-width: 0; max-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); } }
}
.legend-notch {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1px 2px 0 0;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #f8fafc;
  background: #0f172a;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top: 1px solid rgba(15,23,42,.85);
  border-right: 1px solid rgba(15,23,42,.85);
  border-top-right-radius: 6px;
}
.legend-expense-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #0f172a;
  overflow: visible;
}
.legend-expense-ico svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
  transform: scale(1.9);
  transform-origin: center;
}
:root[data-theme="dark"] .legend-expense-ico {
  color: #f8fafc;
}
:root[data-theme="dark"] .legend-notch {
  color: #f8fafc;
  background: rgba(15, 23, 42, .85);
  border-top: 1px solid rgba(248,250,252,.35);
  border-right: 1px solid rgba(248,250,252,.35);
}
.legend-notch.inc {
  background: #0f172a;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom: 1px solid rgba(15,23,42,.85);
  border-right: 1px solid rgba(15,23,42,.85);
  border-top: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 6px;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 2px 1px 0;
}
.legend-notch.inc > span {
  display: inline-block;
}
:root[data-theme="dark"] .legend-notch.inc::before {
  background: transparent;
}
:root[data-theme="dark"] .legend-notch.inc {
  background: rgba(15, 23, 42, .85);
  border-bottom: 1px solid rgba(248,250,252,.35);
  border-right: 1px solid rgba(248,250,252,.35);
}

/* ======================== 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)); }

    /* Skeleton (boot) */
    .bita-skeleton {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        grid-template-rows: auto 1fr;
        background: var(--bg);
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
    html[data-bita-loading="1"] .bita-skeleton {
        top: calc(var(--headerH) + var(--legendH, 0px));
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transition: none;
    }

    html[data-bita-ready="1"] .bita-skeleton {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .35s ease, visibility 0s linear .35s;
    }

    .sk-head {
        height: var(--headerH);
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 0 16px;
        background: var(--header-bg);
        border-bottom: 1px solid var(--header-border);
    }

    .sk-head-left,
    .sk-head-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sk-btn { width: 36px; height: 28px; border-radius: 10px; }
    .sk-btn.lg { width: 120px; }
    .sk-btn.md { width: 90px; }
    .sk-btn.sm { width: 70px; }
    .sk-title { height: 18px; width: 200px; border-radius: 10px; }

    .sk-cal {
        margin: 12px;
        border-radius: 16px;
        border: 1px solid var(--grid);
        background: color-mix(in srgb, var(--bg) 92%, #000);
        overflow: hidden;
        position: relative;
    }

    .sk-legend {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--grid);
        background: color-mix(in srgb, var(--bg) 96%, #000);
        flex-wrap: wrap;
    }

    .sk-chip {
        height: 18px;
        width: 90px;
        border-radius: 999px;
    }
    .sk-legend .sk-chip:nth-child(1) { width: 78px; }
    .sk-legend .sk-chip:nth-child(2) { width: 86px; }
    .sk-legend .sk-chip:nth-child(3) { width: 132px; }
    .sk-legend .sk-chip:nth-child(4) { width: 92px; }
    .sk-legend .sk-chip:nth-child(5) { width: 84px; }
    .sk-legend .sk-chip:nth-child(6) { width: 96px; }
    .sk-legend .sk-chip:nth-child(7) { width: 98px; }

    html[data-bita-loading="1"] .sk-head,
    html[data-bita-loading="1"] .sk-legend {
        display: none;
    }

    .sk-cal-head {
        display: grid;
        grid-template-columns: var(--labelW) 1fr;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--grid);
        background: color-mix(in srgb, var(--bg) 96%, #000);
    }

    .sk-days {
        display: grid;
        grid-template-columns: repeat(var(--days), var(--cellW));
        gap: 0;
        justify-content: start;
    }

    .sk-row {
        display: grid;
        grid-template-columns: var(--labelW) 1fr;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--grid);
    }

    .sk-row:last-child { border-bottom: none; }

    .sk-cells {
        display: grid;
        grid-template-columns: repeat(var(--days), var(--cellW));
        gap: 0;
    }

    .sk-cell {
        height: 18px;
        border-radius: 6px;
        margin: 0 2px;
    }

    .sk-bar,
    .sk-line,
    .sk-pill {
        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-bar { height: 18px; width: 160px; }
    .sk-line { height: 12px; width: 120px; }
    .sk-pill { height: 10px; width: 60px; border-radius: 999px; }
    .sk-w-20 { width: 20%; }
    .sk-day { height: 18px; border-radius: 6px; margin: 0 2px; }
    .sk-chip,
    .sk-btn,
    .sk-cell,
    .sk-day,
    .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; }

    .sk-grid {
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(90deg, transparent 0 35px, rgba(255,255,255,.04) 35px 36px),
            repeating-linear-gradient(180deg, transparent 0 30px, rgba(255,255,255,.04) 30px 31px);
        opacity: .6;
        pointer-events: none;
    }

    html:not([data-bita-ready="1"]) .calendar {
        opacity: 0;
        transform: translateY(6px);
    }
    html[data-bita-ready="1"] .calendar {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .35s ease, transform .35s ease;
    }
    html[data-bita-loading="1"] .calendar {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .4s ease, transform .4s ease;
    }

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

/* ===== Theme-sync guard for modal (avoid mixed modes) ===== */
:root[data-theme="light"] .activity-info {
  background: #ffffff;
  color: #1f2937;
  border-color: #d7dee8;
}
:root[data-theme="light"] .activity-info .head,
:root[data-theme="light"] .activity-info .actions {
  background: #ffffff;
  border-color: #e2e8f0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .activity-info .section {
  background: #f8fafc;
  border-color: #e2e8f0;
}
:root[data-theme="light"] .activity-info .input,
:root[data-theme="light"] .activity-info textarea,
:root[data-theme="light"] .activity-info select {
  background: #ffffff;
  color: #111827;
  border-color: #d7dee8;
}
:root[data-theme="light"] .activity-info .tabs{ border-bottom: 1px solid #d7dee8; }
:root[data-theme="light"] .activity-info .tab{
  background: #f8fafc;
  color: #1f2937;
  border: 1px solid #d7dee8;
  border-bottom: none;
}
:root[data-theme="light"] .activity-info .tab.is-active{
  background: #ffffff;
  color: #111827;
  border-color: #cfd8e6;
}
:root[data-theme="light"] .activity-info .tabpanel{
  background: #ffffff;
  border: 1px solid #d7dee8;
  border-top: none;
  color: #1f2937;
}

:root[data-theme="dark"] .activity-info {
  background: #0e1218;
  color: #e8edf4;
  border: 1px solid #1e2735;
}
:root[data-theme="dark"] .activity-info .head,
:root[data-theme="dark"] .activity-info .actions {
  background: #0f141b;
  border-color: #1e2735;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="dark"] .activity-info .section {
  background: #0c1117;
  border-color: #1a2230;
}
:root[data-theme="dark"] .comment-item.system .comment-bubble{
  color: #cbd5f5;
}
:root[data-theme="dark"] .comment-item.system .comment-bubble::before,
:root[data-theme="dark"] .comment-item.system .comment-bubble::after{
  background: rgba(255,255,255,.18);
}
:root[data-theme="dark"] .comment-item.system .system-link{
  text-decoration-color: rgba(255,255,255,.45);
}
:root[data-theme="dark"] .activity-info .input,
:root[data-theme="dark"] .activity-info textarea,
:root[data-theme="dark"] .activity-info select {
  background: #0a0f15;
  color: #e6edf6;
  border: 1px solid #233149;
}
:root[data-theme="dark"] .activity-info .tabs{ border-bottom:1px solid #202734; }
:root[data-theme="dark"] .activity-info .tab{
  background:#0f1216; color:#cfd6e4;
  border:1px solid #1f2937; border-bottom:none;
}
:root[data-theme="dark"] .activity-info .tab.is-active{
  background:#111418; color:#fff; border-color:#263042;
}
:root[data-theme="dark"] .activity-info .tabpanel{
  background:#0f1114; border:1px solid #263042; border-top:none; color:#e6edf6;
}

/* ===== Light-mode fixes for mixed dark UI ===== */
:root[data-theme="light"] .sidepanel.admin-panel .btn {
  background: #f3f6fb;
  color: var(--sp-text);
  border-color: var(--sp-border);
}
:root[data-theme="light"] .sidepanel.admin-panel .btn:hover {
  background: #e9eef5;
}
:root[data-theme="light"] .sidepanel.admin-panel .btn.ghost {
  background: transparent;
  color: var(--sp-text-dim);
}
:root[data-theme="light"] .sidepanel.admin-panel .btn.ghost:hover {
  color: var(--sp-text);
  background: var(--sp-hover);
}
:root[data-theme="light"] .sidepanel.admin-panel .list-wrap {
  background: #ffffff;
}
:root[data-theme="light"] .sidepanel.admin-panel *::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 55, .25);
  border: 2px solid #eef2f7;
}
:root[data-theme="light"] .sidepanel.admin-panel *::-webkit-scrollbar-track {
  background: #f6f8fb;
}
:root[data-theme="light"] .activity-info {
  --modal-bg: #ffffff;
  --modal-fg: #1f2937;
  border-color: #d7dee8;
}
 :root[data-theme="light"] .activity-info .head {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .activity-info .actions {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .activity-info .section {
  background: #f8fafc;
  border-color: #e2e8f0;
}
:root[data-theme="light"] .activity-info .k,
:root[data-theme="light"] .activity-info .muted {
  color: #667085;
}
:root[data-theme="light"] .activity-info .input,
:root[data-theme="light"] .activity-info textarea,
:root[data-theme="light"] .activity-info select {
  background: #ffffff;
  color: #111827;
  border-color: #d7dee8;
}
:root[data-theme="light"] .activity-info .close:hover {
  background: rgba(15,23,42,.06);
}
:root[data-theme="light"] .comment-bubble {
  background: #2563eb;
}
:root[data-theme="light"] .comment-item.me .comment-bubble {
  background: #16a34a;
}
:root[data-theme="light"] .comment-item.system .comment-bubble {
  background: transparent;
  color: #6b7280;
}
:root[data-theme="light"] .comment-gallery .cg-file {
  border-color: #d7dee8;
  background: #f7f9fc;
  color: #1f2937;
 }
:root[data-theme="light"] .comment-gallery .cg-file-ic {
  background: #e2e8f0;
  color: #0f172a;
 }
:root[data-theme="light"] .comment-file {
  border-color: #d7dee8;
  background: #f7f9fc;
  color: #1f2937;
 }
:root[data-theme="light"] .comment-file-ic {
  background: #e2e8f0;
  color: #0f172a;
 }

:root[data-theme="light"] .icon-btn:hover { background: rgba(15,23,42,.06); }
:root[data-theme="light"] .drag-handle { background: #e6ebf2; color: #1f2937; }
:root[data-theme="light"] .note button { background: #1f2937; color: #fff; border-color: #1f2937; }

:root[data-theme="light"] .admin-menu {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #d7dee8;
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
}
:root[data-theme="light"] .admin-menu select,
:root[data-theme="light"] .admin-menu input,
:root[data-theme="light"] .admin-menu button {
  background: #f7f9fc;
  color: #1f2937;
  border: 1px solid #d7dee8;
}
:root[data-theme="light"] .admin-menu button:hover { background: #eef3f9; }
:root[data-theme="light"] .admin-menu .ok { background: #16a34a; border-color: #16a34a; color: #fff; }

@media (max-width: 720px) {
  :root[data-theme="light"] .admin-menu {
    background: #ffffff !important;
    border: 1px solid #d7dee8 !important;
    box-shadow: 0 -8px 30px rgba(15,23,42,.12), 0 8px 24px rgba(15,23,42,.10) !important;
  }
}

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

:root[data-theme="light"] .activity-info .btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
}
:root[data-theme="light"] .activity-info .btn.ghost {
  color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-border);
  background: transparent;
  box-shadow: none;
}
:root[data-theme="light"] .activity-info .btn:hover { background: var(--btn-hover); }
:root[data-theme="light"] .activity-info .btn.ghost:hover { background: var(--btn-ghost-hover); }
:root[data-theme="light"] .activity-info .btn.danger {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}
:root[data-theme="light"] .activity-info .tabs{
  border-bottom: 1px solid #d7dee8;
}
:root[data-theme="light"] .activity-info .tab{
  background: #f8fafc;
  color: #1f2937;
  border: 1px solid #d7dee8;
  border-bottom: none;
}
:root[data-theme="light"] .activity-info .tab.is-active{
  background: #ffffff;
  color: #111827;
  border-color: #cfd8e6;
}
:root[data-theme="light"] .activity-info .tabpanel{
  background: #ffffff;
  border: 1px solid #d7dee8;
  border-top: none;
  color: #1f2937;
}
:root[data-theme="light"] .section-expenses .exp-list .row.h{
  background: #f8fafc;
  border-top: 0;
  color: #1f2937;
}
:root[data-theme="light"] .calendar {
  background: #fdfdff;
  border: 1px solid #cfd8e6;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
:root[data-theme="light"] .cal-header {
  background: #f8fafc;
  border-bottom-color: #cbd5e1;
}
:root[data-theme="light"] .daycell,
:root[data-theme="light"] .cell {
  border-right-color: #d6deea;
}
:root[data-theme="light"] .cell {
  border-left-color: #d6deea;
  background: #ffffff;
}
:root[data-theme="light"] .daycell {
  background: #eef2f7;
  color: #0f172a;
}
:root[data-theme="light"] .row {
  border-bottom-color: #d6deea;
  background: #ffffff;
}
:root[data-theme="light"] .row:nth-child(odd) {
  background: #f8fafc;
}
:root[data-theme="light"] .row .label {
  background: #f1f5fb;
  border-right-color: #cbd5e1;
  color: #0f172a;
}
:root[data-theme="light"] .cat-header.row {
  background: var(--catHeaderBg);
  color: #111827;
  border-top: 1px solid #d7dee8;
  border-bottom: 1px solid #d7dee8;
}
:root[data-theme="light"] .cat-header .label {
  background: var(--catHeaderBg);
  color: #111827;
}
:root[data-theme="light"] .cat-header .cells {
  background: var(--catHeaderBg);
}
:root[data-theme="light"] .cat-header .cells .cell {
  background: var(--catHeaderBg);
  border-left-color: #d7dee8;
  border-right-color: #d7dee8;
}
/* ===========================
   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: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); box-shadow: var(--btn-shadow); }
  .activity-info .btn.ghost { color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); background: transparent; box-shadow: none; }
  .activity-info .btn.danger { background: #b91c1c; border-color: transparent; color: #fff; }

  /* 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);
}

:root[data-theme="light"] .legend.chips .legend-item{
  background: var(--chip-bg, #f1f4f9);
  border: 1px solid #d7dee8;
  color: #1f2937;
}

@media (max-width: 640px){
  .legend.chips .legend-item{ font-size: .78rem; padding: 5px 9px; }
  .legend.chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .legend.chips .legend-item{ flex: 0 0 auto; }
  .legend.chips::-webkit-scrollbar{ display: none; }
}
@media (max-width: 520px){
  .legend.chips .legend-label{ display:inline; }
  .legend.chips .legend-item{ padding: 6px 8px; }
}

/* Listado de reportes de incidencia dentro del modal */
.inc-list-section .inc-list-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.inc-list-section .inc-list-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}
.inc-list-wrap{
  max-height: min(50vh, 360px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
}
.inc-list-table{
  width: 100%;
  border-collapse: collapse;
}
.inc-list-table thead th{
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  text-align: left;
  font-size: 12px;
  padding: 8px 10px;
}
.inc-list-table tbody td{
  padding: 8px 10px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 12px;
}
.inc-state{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
  background: #e5e7eb;
  color: #374151;
}
.inc-state.ok{
  background: #dcfce7;
  color: #166534;
}
.inc-state.nok{
  background: #fee2e2;
  color: #991b1b;
}
:root[data-theme="dark"] .inc-list-wrap{
  background: #0f1216;
  border-color: rgba(255,255,255,.08);
}
:root[data-theme="dark"] .inc-list-table thead th{
  background: #0e1218;
}
:root[data-theme="dark"] .inc-list-table tbody td{
  border-top: 1px solid rgba(255,255,255,.08);
}
:root[data-theme="dark"] .inc-state{
  background: #1f2937;
  color: #e5e7eb;
}
:root[data-theme="dark"] .inc-state.ok{
  background: #064e3b;
  color: #a7f3d0;
}
:root[data-theme="dark"] .inc-state.nok{
  background: #7f1d1d;
  color: #fecaca;
}
@media (max-width: 640px){
  .inc-list-wrap{ max-height: 50svh; }
  .inc-list-table thead th,
  .inc-list-table tbody td{ padding: 7px 8px; font-size: 11px; }
}

/* SweetAlert: listado de reportes de incidencia */
.swal-inc-list{
  width: min(720px, 94vw);
}
.swal-inc-list .swal2-html-container{
  margin: 0;
  padding: 0;
}
.inc-list-wrap{
  max-height: min(60vh, 460px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.inc-list-table{
  width: 100%;
  border-collapse: collapse;
}
.inc-list-table thead th{
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}
@media (max-width: 640px){
  .swal-inc-list{ width: min(96vw, 720px); }
  .inc-list-wrap{ max-height: 60svh; }
}

/* ===== Responsive refinements (general) ===== */
@media (max-width: 980px){
  :root{
    --labelW: 150px;
    --cellW: 32px;
    --cellH: 28px;
    --headerH: 84px;
  }
  .app-header{
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }
  .app-header .controls{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  #monthLabel{ flex: 1; text-align: center; min-width: 140px; }
  main{ padding: 0 8px; }
  .calendar-scroll{ margin: 0 -8px; }
  .calendar{ overflow-x: visible; }
  .legend.chips{ margin: 8px 0 4px; }
}
@media (max-width: 640px){
  :root{
    --labelW: 120px;
    --cellW: 26px;
    --cellH: 26px;
    --btn-h: 34px;
    --btn-pad-x: 12px;
    --headerH: 96px;
  }
  .month-title{ font-size: 12px; }
  .daycell{ font-size: 12px; }
  .row .label{ font-size: 12px; }
  .app-header .controls button,
  .app-header .controls .btn{
    padding: 0 10px;
  }
  .hdr-controls .controls{
    flex-wrap: wrap;
  }
  #prevBtn{ order: 1; }
  #monthLabel{ order: 2; flex: 1 1 auto; text-align: center; }
  #nextBtn{ order: 3; }
  .hdr-controls .controls::after{
    content: "";
    flex-basis: 100%;
    order: 4;
  }
  .admin-wrap{ order: 5; }
  #exportBtn{ order: 6; }
}
@media (max-width: 420px){
  :root{
    --labelW: 100px;
    --cellW: 24px;
    --headerH: 104px;
  }
  #monthLabel{ min-width: 120px; }
}

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

/* Hover range highlight */
.cell.is-range{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.daycell.is-range{
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* 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; }

/* ===== Mobile polish: Activity modal ===== */
@media (max-width: 560px){
  .activity-info{
    box-shadow: none;
  }
  .activity-info .head{
    background: var(--modal-bg);
    border-bottom: 1px solid rgba(0,0,0,.08);
    backdrop-filter: none;
  }
  .activity-info .tabs{
    position: sticky;
    top: calc(44px + env(safe-area-inset-top, 0px));
    z-index: 6;
    background: var(--modal-bg);
    padding: 6px 8px;
  }
  .activity-info .tab{
    flex: 1 1 0;
    text-align: center;
    padding: 8px 10px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .activity-info .content{
    padding: 12px;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  .activity-info .section{
    padding: 12px;
    margin-bottom: 10px;
  }
  .activity-info .actions{
    position: sticky;
    bottom: 0;
    background: var(--modal-bg);
    border-top: 1px solid rgba(0,0,0,.08);
  }
  :root[data-theme="dark"] .activity-info .tabs{
    background: #101214;
    border-bottom: 1px solid #202734;
  }
  :root[data-theme="dark"] .activity-info .tab{
    background: #0f1216;
    color: #cfd6e4;
    border: 1px solid #1f2937;
    border-bottom: none;
  }
  :root[data-theme="dark"] .activity-info .tab.is-active{
    background: #111418;
    color: #ffffff;
    border-color: #263042;
  }
}

/* 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):not([data-theme="light"] *) {

  /* === 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);
  }
}
/* ===== Global loading spinner (reusable) ===== */
.is-loading{
  display:grid;
  place-items:center;
  min-height:180px;
}
.is-loading .loading{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--muted, #9aa4b2);
  letter-spacing:.2px;
}
.is-loading .loading::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid var(--line, rgba(255,255,255,.15));
  border-top-color: var(--accent, #f2b705);
  animation: spin .8s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}