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

@layer reset, base, components, utilities;

/* ========================= RESET ========================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; }
}

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

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

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

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

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

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

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

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

  :root { color-scheme: dark light; }

  body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.4 system-ui, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  }

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

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

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

  .icon-btn { border: none; background: transparent; padding: 4px 6px; line-height: 1; cursor: pointer; border-radius: 8px; }
  .icon-btn:hover { background: rgba(0,0,0,.06); }
  .icon-btn.ok { color: #0a7; }
  .icon-btn.danger { color: #c33; }

  /* ===== Header ===== */
  header {
    position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; background: var(--accent); color: #0a0a0a; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 2px 0 #0003; min-width: var(--calMinW);
  }
  header .controls { display: flex; gap: 8px; align-items: center; flex: 1; }
  header button, header select { background: #0009; color: #fff; border: 1px solid #0005; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
  header button:hover { background: #000c; }
  header .btn-ghost { background: transparent; color: #000; border-color: #0005; }
  header .btn-ghost:hover { background: #0001; }

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

  .cal-header { position: sticky; top: var(--headerH); z-index: 5; display: flex; border-bottom: 2px solid #0007; background: var(--accent); color: #000; }
  .right-controls { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .month-title { padding: 8px 10px; font-weight: 900; flex: 0 0 var(--labelW); width: var(--labelW); min-width: var(--labelW); max-width: var(--labelW); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .calendar .row { display: flex; }
  .days { display: grid; grid-template-columns: repeat(var(--days), var(--cellW)); flex: 1; }
  .daycell { display: flex; justify-content: center; align-items: center; font-weight: 800; border-left: 1px solid #0003; height: 34px; }

  /* ===== Estructura filas ===== */
  .row { display: grid; grid-template-columns: var(--labelW) 1fr; border-bottom: 1px solid var(--grid); min-height: var(--cellH); align-items: stretch; }
  .row .label { padding: 6px 10px; color: #d7d7d7; border-right: 1px solid var(--grid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; flex: 0 0 var(--labelW); width: var(--labelW); min-width: var(--labelW); max-width: var(--labelW); }

  .days, .row .cells { display: grid; gap: 0; }
  .daycell, .cell { box-sizing: border-box; border-right: 1px solid rgba(255,255,255,.08); }
  .days > .daycell:last-child, .row .cells > .cell:last-child { border-right: 0; }

  .row .cells {
    position: relative; display: grid; grid-template-columns: repeat(var(--days), var(--cellW)); user-select: none;
    min-height: calc((var(--laneH) + var(--laneGap)) * var(--lanes, 1) + 4px); grid-auto-rows: 1fr;
  }
  .cell { border-left: 1px solid var(--grid); min-height: var(--cellH); }
  .row .cells .cell:hover { outline: 1px dashed #ffffff44; outline-offset: -1px; }
  .cell.sel { background: var(--select); }

  .tech-row { user-select: none; }
  .tech-row.dragging { opacity: .5; }
  .tech-dragging .tech-row .cells { pointer-events: none !important; }

  /* ===== Encabezado de categoría ===== */
  .cat-section { position: relative; }
  .cat-header.row { user-select: none; background: var(--catHeaderBg); color: #ffd54f; font-weight: 900; min-height: var(--cellH); }
  .cat-header .label { display: flex; gap: 6px; align-items: center; background: var(--catHeaderBg); color: #fff; font-weight: 900; }
  .cat-header .cells .cell { min-height: var(--cellH); }

  .drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: #0003; color: #000; font-weight: 900; }
  .drag-handle::after { content: "≡"; font-size: 12px; line-height: 1; opacity: .8; }

  /* Indicadores de drop/reordenación */
  .drop-indicator { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); pointer-events: none; }
  .over-list { outline: 2px dashed #60a5fa; outline-offset: -3px; }
  .tech-list { position: relative; min-height: var(--cellH); }
  .tech-list.empty { outline: 2px dashed #60a5fa55; outline-offset: -3px; }
  .tech-list.empty::after { content: "Suelta aquí para mover técnico"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #9ecbff; pointer-events: none; }
  .tech-list.over-list { outline: 2px dashed #60a5fa; outline-offset: -3px; }
  .cat-header.drop-target { box-shadow: inset 0 0 0 2px #60a5fa; }

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

  /* ===== Notas rápidas ===== */
  .note { position: absolute; min-width: 320px; max-width: 520px; background: #fffb; backdrop-filter: blur(8px); color: #000; border: 2px solid #0008; border-radius: 10px; padding: 10px; box-shadow: var(--shadow-lg); z-index: 2000; }
  .note textarea { width: 100%; min-height: 120px; border: 1px solid #0005; border-radius: 8px; padding: 8px; font: inherit; resize: vertical; background: #fff8; }
  .note .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
  .note button { background: #111; color: #fff; border: 1px solid #000; padding: 6px 10px; border-radius: 8px; cursor: pointer; }

  /* ===== Menú Admin (dropdown + bottom-sheet) ===== */
  .admin-wrap { position: relative; display: inline-block; }
  .admin-menu { position: absolute; right: 0; top: 42px; width: 340px; max-height: 70vh; overflow: auto; background: #111; color: #fff; border: 1px solid #0008; border-radius: 10px; box-shadow: 0 14px 40px #0009; padding: 10px; z-index: 120; display: none; }
  .admin-menu.show { display: block; animation: pop .12s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
  .admin-menu h4 { margin: 8px 0 6px; font-size: 13px; color: #ffd54f; }
  .admin-menu .rowx { display: flex; gap: 8px; margin-bottom: 8px; }
  .admin-menu select, .admin-menu input, .admin-menu button { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid #333; background: #1b1b1b; color: #fff; font: inherit; }
  .admin-menu button { background: #222; cursor: pointer; }
  .admin-menu button:hover { background: #2c2c2c; }
  .admin-menu .muted { font-size: 12px; color: #c7c7c7; }
  .admin-menu .danger { background: #7f1d1d; border-color: #ef4444; }
  .admin-menu .danger:hover { background: #991b1b; }
  .admin-menu .ok { background: #064e3b; border-color: #10b981; }
  .admin-menu .ok:hover { background: #065f46; }

  /* Bottom-sheet en móvil */
  @media (max-width: 560px) {
    .admin-menu { position: fixed !important; left: 50% !important; top: auto !important; bottom: 0 !important; transform: translateX(-50%); width: calc(100vw - 16px) !important; max-width: 640px; max-height: min(86vh, 600px) !important; overflow: auto !important; border-radius: 16px 16px 0 0 !important; border: 1px solid rgba(255,255,255,.12) !important; background: #0f1114 !important; box-shadow: 0 -8px 30px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35) !important; padding: 12px !important; z-index: 11000 !important; display: none; animation: adminSheetIn .18s ease-out; }
    .admin-menu.show { display: block; }
    .admin-menu::before { content: ""; position: sticky; top: 0; display: block; height: 10px; margin: -4px auto 10px; width: 44px; border-radius: 99px; background: #ffffff29; }
    .admin-menu h4:first-child { position: sticky; top: 6px; z-index: 1; background: linear-gradient(180deg, #0f1114 90%, transparent); padding-top: 6px; margin-top: 0; }
    .admin-menu select, .admin-menu input { height: 44px !important; padding: 10px 12px !important; font-size: 16px !important; width: -webkit-fill-available; }
    .admin-menu .rowx { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 10px !important; }
    .admin-menu button { height: 46px !important; font-weight: 800 !important; letter-spacing: .2px; border-radius: 12px !important; }
    .admin-menu .danger { width: 100% !important; margin-top: 6px; }
    .admin-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index: 10990; display: none; }
    .admin-backdrop.show { display: block; }
  }

  @media (min-width: 561px) and (max-width: 840px) {
    .admin-menu { right: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; max-height: 80vh !important; }
    .admin-menu .rowx { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .admin-menu .rowx > *:only-child { grid-column: 1 / -1; }
  }

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

  /* ===== Toasts ===== */
  #toastRoot.toast-wrap { position: fixed !important; top: var(--toast-gap-top); right: var(--toast-gap-right); width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; z-index: 200005 !important; pointer-events: none;isolation: isolate }
  .toast { pointer-events: auto; background: #0b5ea8; color: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px; transform: translateY(-8px); opacity: 0; animation: toast-in .22s ease-out forwards; font: 500 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  .toast .i { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
  .toast .i svg { width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
  .toast .msg { line-height: 1.25; font-weight: 600; }
  .toast.success { background: #16a34a; }
  .toast.warn { background: #d97706; color: #111; }
  .toast.error { background: #dc2626; }
  .toast .x { margin-left: auto; background: transparent; border: 0; color: inherit; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
  .toast .x:hover { background: rgba(255,255,255,.12); }
  @keyframes toast-in { to { opacity: 1; transform: translateY(0); } }

  /* ===== Backdrop genérico ===== */
  .activity-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); z-index: 119990; animation: fadeIn .12s ease-out; }
  .activity-backdrop.sp { background: rgba(0,0,0,.18); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 99980; }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

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

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

  .activity-info .head-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .activity-info .pill { width: 10px; height: 10px; border-radius: 999px; background: var(--bar-1); box-shadow: 0 0 0 3px rgba(21,128,61,.18); }
  .activity-info[data-color="2"] .pill { background: var(--bar-2); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
  .activity-info[data-color="3"] .pill { background: var(--bar-3); box-shadow: 0 0 0 3px rgba(234,88,12,.16); }
  .activity-info[data-color="4"] .pill { background: var(--bar-4); box-shadow: 0 0 0 3px rgba(234,179,8,.18); }
  .activity-info[data-color="5"] .pill { background: var(--bar-5); box-shadow: 0 0 0 3px rgba(6,182,212,.16); }

  .activity-info .close { appearance: none; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
  .activity-info .close:hover { background: rgb(31,64,129); }

  .activity-info .section { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
  .activity-info .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: start; }
  @media (max-width: 640px) { .activity-info .grid-2 { grid-template-columns: 1fr; } }

  .activity-info .fld { display: grid; gap: 6px; align-self: start; }
  .activity-info .fld.block { grid-column: 1 / -1; }
  .activity-info .k { font-size: 11px; letter-spacing: .02em; color: #6b7280; font-weight: 800; }
  .activity-info .v { font-weight: 600; }
  .activity-info .meta { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; align-items: center; margin-bottom: 8px; }

  .activity-info .input, .activity-info textarea, .activity-info select { width: 100%; border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 8px; padding: 7px 9px; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; color: #1d1f23; caret-color: #1d1f23; }
  .activity-info .input.sm { padding: 6px 8px; }
  .activity-info .input:focus, .activity-info textarea:focus, .activity-info select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px var(--ring-blue); }
  .activity-info .invalid, .activity-info .title-input.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px var(--ring-red) !important; }
  .activity-info textarea { min-height: 96px; resize: vertical; }
  .activity-info .fld-inline .inline { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
  .activity-info .chk { display: inline-flex; gap: 6px; align-items: center; }
  .activity-info .fld.total { justify-content: end; align-items: end; }
  .activity-info .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 6px; border-radius: 999px; background: #0ea5e9; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

  .activity-info .btn { appearance: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 10px; background: #111827; color: #fff; font-weight: 700; font-size: 14px; }
  .activity-info .btn:hover { filter: brightness(1.05); }
  .activity-info .btn.ghost { background: transparent; color: #111827; border: 1px solid rgba(0,0,0,.12); }
  .activity-info .btn.danger { background: #7f1d1d; color: #fff; border: 1px solid #ef4444; }
  .activity-info.confirm { max-width: 440px; border-left: 6px solid #ef4444; }

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

  /* Título editable */
  .activity-info .title { font-weight: 700; font-size: 15px; line-height: 1.2; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .activity-info .title-input { font-weight: 700; font-size: 15px; line-height: 1.2; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(0,0,0,.09); background: #fff; flex: 1 1 auto; min-width: 320px; max-width: 100%; }
  .activity-info .input::placeholder, .activity-info textarea::placeholder { color: #6b7280; }

  /* ===== Comentarios (chat) ===== */
  .section.comments { display: grid; gap: 10px; }
  .comments-head .k { font-size: 11px; letter-spacing: .02em; color: #6b7280; font-weight: 800; }
  .comments-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow: auto; padding-right: 4px; }
  .comment-item { display: grid; gap: 4px; max-width: 92%; }
  .comment-item.me { margin-left: auto; }
  .comment-bubble { position: relative; border-radius: 12px; padding: 8px 10px 8px 10px; background: #0ea5e9; color: #fff; padding-right: 28px; }
  .comment-item.me .comment-bubble { background: #16a34a; }
  .comment-meta { font-size: 11px; color: #9ca3af; display: flex; gap: 6px; align-items: baseline; }
  .comment-del { position: absolute; right: 6px; top: 6px; border: none; background: transparent; cursor: pointer; opacity: .6; font-size: 14px; }
  .comment-del:hover { opacity: 1; }
  .comment-item:not(.me) .comment-del { display: none; }
  .comments .compose-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }

  /* Previsualizaciones de adjuntos */
  .comments .compose-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 8px; }
  .comments .compose-previews .p { position: relative; border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; background: #fafafa; }
  .comments .compose-previews img { display: block; width: 100%; height: 88px; object-fit: cover; }
  .comments .compose-previews .rm { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 7px; background: rgba(0,0,0,.6); color: #fff; width: 24px; height: 24px; cursor: pointer; }

  .comment-item .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 6px; }
  .comment-item .photos a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid #eee; }
  .comment-item .photos img { display: block; width: 100%; height: 120px; object-fit: cover; }

  .comment-gallery { display: grid; grid-template-columns:repeat(3, 84px); gap: 8px; margin-top: 8px; }
  .comment-gallery .cg-item { display: block; width: 84px; height: 84px; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; position: relative; }
  .comment-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cg-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-weight: 900; font-size: 14px; }

  /* Composer compacto */
  .comments-compose { display: grid; grid-template-columns: 1fr auto; grid-auto-flow: column; gap: 8px; align-items: center; }
  .comments-compose > * { min-width: 0; }
  .comments-compose .btn, .comments-compose button { white-space: nowrap; width: auto; }
  @media (max-width: 420px) { .comments-compose { grid-template-columns: 1fr; } .comments-compose .btn, .comments-compose button { width: 100%; justify-self: end; } }

  /* ===== HK-módulo multivalor ===== */
  .hkmod-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
  .hkmod-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .hkmod-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .hkmod-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 16px; background: #f1f3f5; color: #3730a3; font-weight: 700; border: 1px solid #e5e7eb; }
  .hkmod-chip button { border: 0; background: transparent; cursor: pointer; font-weight: 900; line-height: 1; opacity: .7; }
  .hkmod-chip button:hover { opacity: 1; }
  .hkmod-del { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; border: 0; background: transparent; cursor: pointer; line-height: 1; }
  .hkmod-list .hkmod-chip.dup { outline: 2px solid #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.25); transition: outline-color .4s ease, box-shadow .4s ease; }

  /* ===== Panel lateral (Administración) ===== */
  .sidepanel.admin-panel { position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh; background: var(--sp-bg); box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: translateX(100%); transition: transform .28s ease; z-index: 99990; display: flex; flex-direction: column; border-left: 1px solid var(--sp-border); border-radius: 8px 0 0 8px; }
  .sidepanel.admin-panel.show { transform: translateX(0); }
  .sidepanel.admin-panel .sp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--sp-elev); border-bottom: 1px solid var(--sp-border); color: var(--sp-text); }
  .sidepanel.admin-panel .sp-title { font-weight: 600; font-size: 16px; color: var(--sp-text); }
  .sidepanel.admin-panel .sp-close { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--sp-text-dim); }
  .sidepanel.admin-panel .sp-close:hover { color: var(--sp-text); }
  .sidepanel.admin-panel .sp-body { padding: 12px 14px 18px; overflow: auto; gap: 18px; display: flex; flex-direction: column; color: var(--sp-text); }
  .sidepanel.admin-panel .sp-section h3 { margin: 10px 0 8px; font-size: 14px; color: var(--sp-text-dim); }
  .sidepanel.admin-panel .rowx { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
  .sidepanel.admin-panel input, .sidepanel.admin-panel select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-input-bg); color: var(--sp-text); }
  .sidepanel.admin-panel input::placeholder { color: #6b7280; }
  .sidepanel.admin-panel .list-wrap { border: 1px solid var(--sp-border); border-radius: 8px; max-height: 260px; overflow: auto; background: var(--sp-elev); }
  .sidepanel.admin-panel .sp-list { list-style: none; margin: 0; padding: 6px; }
  .sidepanel.admin-panel .sp-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--sp-text); }
  .sidepanel.admin-panel .sp-list li:hover { background: var(--sp-hover); }
  .sidepanel.admin-panel .sp-list li.is-selected { background: var(--sp-selected); outline: 1px solid var(--sp-outline); }
  .sidepanel.admin-panel .sp-list .reorder .btn { padding: 4px 8px; border: 1px solid var(--sp-border); background: transparent; color: var(--sp-text-dim); }
  .sidepanel.admin-panel .sp-list .reorder .btn:hover { color: var(--sp-text); background: var(--sp-hover); }
  .sidepanel.admin-panel .btn { border-radius: 8px; padding: 8px 12px; border: 1px solid var(--sp-border); color: var(--sp-text); background: #12151c; }
  .sidepanel.admin-panel .btn:hover { background: var(--sp-hover); }
  .sidepanel.admin-panel .btn.ok { background: var(--sp-accent); border-color: transparent; color: #fff; }
  .sidepanel.admin-panel .btn.ok:hover { filter: brightness(1.06); }
  .sidepanel.admin-panel .btn.ghost { background: transparent; color: var(--sp-text-dim); }
  .sidepanel.admin-panel .btn.ghost:hover { color: var(--sp-text); background: var(--sp-hover); }
  .sidepanel.admin-panel .btn.danger { background: var(--sp-danger); border-color: transparent; color: #fff; }
  .sidepanel.admin-panel .btn.danger:hover { filter: brightness(1.06); }
  .sidepanel.admin-panel .rowx label { color: var(--sp-text-dim); }
  .sidepanel.admin-panel *::-webkit-scrollbar { width: 10px; height: 10px; }
  .sidepanel.admin-panel *::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; border: 2px solid #10131a; }
  .sidepanel.admin-panel *::-webkit-scrollbar-track { background: #0c0f14; }

  /* ===== Inputs - validaciones ===== */
  .input.invalid, select.invalid { outline: 2px solid #e11; border-color: #e11; background-color: #ffecec; }
  .activity-info .money::-webkit-outer-spin-button, .activity-info .money::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .activity-info .money { appearance: textfield; }

  /* ===== Tabs ===== */
  .tabs { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; }
  .tab { background: transparent; border: 0; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
  .tab.is-active { background: #eef2ff; }
  .tabpanel { display: none; padding: 12px; }
  .tabpanel.is-active { display: block; }
  .tabpanel[aria-busy="true"] { opacity: .7; transition: opacity .15s ease; }

  /* ===== Loader gastos ===== */
  .exp-loader { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; margin: 8px 0 14px; font-size: 14px; color: #374151; }
  .exp-loader[hidden] { display: none; }
  .exp-loader .spinner { width: 18px; height: 18px; border: 3px solid #d1d5db; border-top-color: #6b7280; border-radius: 50%; animation: spin .9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ===== Gastos v2 (registros) ===== */
  .expv2 { --ring: #3b82f6; --muted: #000000; --soft: #f3f4f6; }
  .expv2 .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; }
  .expv2 .row { display: grid; gap: 12px; align-items: end; grid-template-columns: 1.1fr .9fr .9fr auto; }
  @media (max-width: 920px) { .expv2 .row { grid-template-columns: 1fr 1fr; } }
  .expv2 label .k { font-weight: 700; color: var(--muted); display: block; margin-bottom: 6px; }
  .expv2 .slider-wrap { padding: 12px; border-radius: 10px; background: var(--soft); }
  .expv2 .slider-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
  .expv2 input[type="range"] { width: 100%; }
  .expv2 .money-wrap { position: relative; }
  .expv2 .money-wrap .prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
  .expv2 .money-wrap .input { padding-left: 58px; }
  .expv2 .list { margin-top: 14px; }
  .expv2 .item { display: grid; grid-template-columns: 1fr 120px 180px 32px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #edf2f7; border-radius: 10px; margin-bottom: 8px; }
  @media (max-width: 920px) { .expv2 .item { grid-template-columns: 1fr 1fr 1fr 32px; } }
  .expv2 .pill { font-weight: 700; padding: 6px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; display: inline-block; }
  .expv2 .sum { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e5e7eb; margin-top: 10px; padding-top: 10px; }
  .expv2 .sum .badge { background: #0ea5e9; color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 900; min-width: 120px; text-align: center; }
  .expv2 .ghost { border-radius: 999px; padding: 8px 14px; }
  .expv2 .item .del { border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: #ef4444; }
  .expv2 .item .del:hover { filter: brightness(.9); }
  @keyframes popIn { 0% { transform: scale(.98); opacity: .2 } 100% { transform: scale(1); opacity: 1 } }
  .expv2 .item.new { animation: popIn .18s ease-out; }

  /* ===== Gastos: form + registro ===== */
  .section-expenses { border-left: 4px solid #2563eb33; }
  .section-expenses .exp-card { display: flex; flex-direction: column; gap: 14px; }
  .section-expenses .exp-form { display: grid; grid-template-columns: 1fr .5fr .5fr .5fr auto; gap: 10px 12px; align-items: end; margin-bottom: 12px; }
  .section-expenses .exp-form .input { width: 100%; }
  .section-expenses .exp-form .add-col { display: flex; justify-content: flex-end; }
  .section-expenses .exp-list { border: 1px solid #e7e7e7; border-radius: 10px; overflow: hidden; background: #fff; }
  .section-expenses .exp-list .row { display: grid; grid-template-columns: 1.2fr 1fr .9fr .9fr .6fr; gap: 10px; align-items: center; padding: 12px 14px; min-height: 50px; border-top: 1px solid #f3f4f6; }
  .section-expenses .exp-list .row.h { background: #f8fafc; font-weight: 600; border-top: 0; }
  .section-expenses .exp-list .row > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .section-expenses .exp-list .row .kind { font-weight: 700; color: #111827; }
  .section-expenses .exp-list .row .when { color: #6b7280; font-variant-numeric: tabular-nums; }
  .section-expenses .exp-list .row .amount { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
  .section-expenses .exp-list .row .actions { justify-self: end; background: transparent; margin-top: -5px; display: flex; gap: 6px; align-items: center; justify-content: flex-end; white-space: nowrap; min-width: 72px; }
  .section-expenses .exp-list .row .input.sm { font-size: 12.5px; padding: 4px 8px; height: 34px; line-height: 1.2; }
  .section-expenses .exp-list .row select.input.sm { padding-right: 24px; }
  .section-expenses .exp-list .row .kind, .section-expenses .exp-list .row .when, .section-expenses .exp-list .row .amount { display: flex; align-items: center; }
  .section-expenses .exp-list .row .kind > .input.sm, .section-expenses .exp-list .row .when > .input.sm { width: 100%; }
  .section-expenses .exp-list .row .amount > .input.sm { width: 60%; }

  /* Campo con prefijo $ */
  .money-field { position: relative; }
  .money-field::before { content: "$"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .85; }
  .money-field > input.input { padding-left: 18px; }
  .section-expenses .exp-list .row .money-field > input.input.sm { padding-left: 18px; }

  /* ===== Responsive gastos ===== */
  @media (max-width: 980px) { .section-expenses .exp-list .row { grid-template-columns: 1.2fr 1fr .9fr .8fr .6fr; } }
  @media (max-width: 960px) {
    .section-expenses .exp-form { grid-template-columns: 1.6fr 1fr 1fr auto; grid-auto-rows: minmax(0,auto); }
    .section-expenses .exp-form .fld:nth-child(1) { grid-column: 1 / -2; }
  }
  @media (max-width: 760px) {
    .section-expenses .exp-form { grid-template-columns: 1fr 1fr; }
    .section-expenses .exp-form .add-col { grid-column: 2 / 3; justify-content: flex-end; }
    .section-expenses .exp-list .row, .section-expenses .exp-list .row.h { grid-template-columns: 1.4fr 1fr .9fr 1fr 72px; }
  }
  @media (max-width: 680px) { .section-expenses .exp-list .row { grid-template-columns: 1fr .9fr .8fr .8fr .6fr; } }
  @media (max-width: 560px) {
    .section-expenses .exp-form { grid-template-columns: 1fr; }
    .section-expenses .exp-form .add-col { justify-content: stretch; }
    .section-expenses .exp-form .add-col .btn { width: 100%; }
    .section-expenses .exp-list .row { grid-template-columns: 1fr 1fr; grid-template-areas: "concepto acciones" "fecha metodo" "monto monto"; row-gap: 6px; padding: 10px; }
    .section-expenses .exp-list .row.h { display: none; }
    .section-expenses .exp-list .row > .kind { grid-area: concepto; min-width: 0; }
    .section-expenses .exp-list .row > .when:nth-of-type(2) { grid-area: fecha; }
    .section-expenses .exp-list .row > .when:nth-of-type(3) { grid-area: metodo; }
    .section-expenses .exp-list .row > .amount { grid-area: monto; text-align: left; font-weight: 600; }
    .section-expenses .exp-list .row > .actions { grid-area: acciones; justify-content: flex-end; align-self: start; }
  }
  @media (max-width: 380px) { .section-expenses .icon-btn { padding: 4px 6px; } .section-expenses .exp-list .row > .actions { gap: 4px; } }

  /* ===== Preferencias de color ===== */
  @media (prefers-color-scheme: dark) {
    .activity-info { --modal-bg: #101214; --modal-fg: #f7f7f7; border-color: rgba(255,255,255,.06); }
    .activity-info .section { background: #0f1216; border-color: rgba(255,255,255,.08); }
    .activity-info .k { color: #9aa4b2; }
    .activity-info .input, .activity-info textarea, .activity-info select { background: #0c0f13; color: #eaeef4; border-color: rgba(255,255,255,.11); }
    .activity-info .close:hover { background: #1b1f26; }
    .activity-info .btn.ghost { color: #eaeef4; border-color: rgba(255,255,255,.15); }
    .activity-info .muted { color: #9ca3af; }
    .comment-bubble { background: #2563eb; }
    .comment-item.me .comment-bubble { background: #22c55e; }

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

  /* ===== Usabilidad móvil / tap ===== */
  .calendar, .calendar *:not(input):not(textarea):not(select) { -webkit-touch-callout: none; }
  /* Selección: permite copiar en label/cell/bar y en submódulos de texto */
  .calendar { user-select: none; }
  .calendar .label, .calendar .bar, .calendar .cell, .note, .comments, .activity-info .content { user-select: text; }
  .calendar .bar, .calendar .cell, .calendar .label { -webkit-tap-highlight-color: transparent; }
  input, textarea, select { -webkit-user-select: text; user-select: text; }

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

  /* ===== Adjuntos: botón eliminar ===== */
  .attach-previews { margin: 8px 0 10px; }
  .attach-previews .cg-item { position: relative; }
  .attach-previews .cg-item .hkmod-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.35); color: #fff; cursor: pointer; z-index: 2; }
  .attach-previews .cg-item .hkmod-del::before, .attach-previews .cg-item .hkmod-del::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: currentColor; border-radius: 2px; transform-origin: center; }
  .attach-previews .cg-item .hkmod-del::before { transform: translate(-50%, -50%) rotate(45deg); }
  .attach-previews .cg-item .hkmod-del::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .attach-previews .comment-gallery { grid-template-columns: repeat(6, 84px); }
  @media (max-width: 560px) { .attach-previews .comment-gallery { grid-template-columns: repeat(3, 84px); } }
}

/* ======================== UTILITIES ====================== */
@layer utilities {
  .u-row { display: flex; align-items: center; gap: 8px; }
  .u-grid-31 { display: grid; grid-template-columns: repeat(var(--days), var(--cellW)); }
}
/* ===========================
   MODO OSCURO — MODAL LIMPIO
   Quita desvanecidos/gradientes
   =========================== */
@media (prefers-color-scheme: dark) {
  .activity-info {
    --modal-bg: #0e1218;    /* superficie principal */
    --modal-fg: #e8edf4;    /* texto */
    background: var(--modal-bg);
    color: var(--modal-fg);
    border: 1px solid #1e2735;
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
  }

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

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

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

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

  /* Controles */
  .activity-info .input,
  .activity-info textarea,
  .activity-info select {
    background: #0a0f15;
    color: #e6edf6;
    border: 1px solid #233149;
  }
  .activity-info .input:focus,
  .activity-info textarea:focus,
  .activity-info select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.16);
  }

  /* Botones */
  .activity-info .btn { background: #111827; }
  .activity-info .btn.ghost { color: #e6edf6; border-color: #2a364a; }
  .activity-info .btn.danger { background: #7f1d1d; border-color: #b91c1c; }

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

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

/* (Opcional) si solo quieres quitar el desvanecido ya, sin tocar colores: */
.activity-info .head,
.activity-info .actions {
  background: transparent;                 /* reemplaza gradiente por transparente ... */
  backdrop-filter: none !important;        /* ... y quita el blur */
  -webkit-backdrop-filter: none !important;
}
@media (prefers-color-scheme: dark) {
  .activity-info .head,
  .activity-info .actions {
    background: #0f141b;                   /* …en dark deja sólido */
  }
}


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

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

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

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


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

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

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

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

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

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

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

/* 7) Controles por encima de la imagen */
.imgbox-x,
.imgbox-prev,
.imgbox-next{
  position: absolute;
  z-index: 200003;
}
.imgbox-x{
  right: 8px; top: 6px;
  background: transparent; color:#fff; border:none;
  font-size: 20px; cursor: pointer;
}
.imgbox-prev,.imgbox-next{
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  color: #fff; border: none;
  padding: 10px 14px; cursor: pointer;
  border-radius: 8px; font-size: 16px;
}
.imgbox-prev[disabled],.imgbox-next[disabled]{ opacity:.4; cursor: default; }
.imgbox-prev{ left: 6px; } .imgbox-next{ right: 6px; }
.imgbox-counter{
  text-align: center;
  font-size: 12px;
  opacity: .8;
  padding-bottom: 4px;
}

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

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

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

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

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

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

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

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

/* Colores (usa las mismas variables que tus barras si ya existen) */
.legend-dot[data-color="1"]{ background: var(--bar-1, #2563eb); }
.legend-dot[data-color="2"]{ background: var(--bar-2, #f59e0b); }
.legend-dot[data-color="3"]{ background: var(--bar-3, #10b981); }
.legend-dot[data-color="4"]{ background: var(--bar-4, #8b5cf6); }
.legend-dot[data-color="5"]{ background: var(--bar-5, #ef4444); }

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

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

/* contenedor deja “respirar” el outline */
.comments-list { overflow: auto; padding: 8px 10px; }
.comment-item   { overflow: visible; position: relative; z-index: 0; }
.comment-bubble { overflow: visible; position: relative; z-index: 1; }

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

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

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

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

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

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

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

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

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

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

  /* === EXP-LIST (tabla de gastos) === */
  .section-expenses .exp-list{
    background:#0f1114 !important;
    border:1px solid #202734 !important;
    color:#e6edf6 !important;
  }
  .section-expenses .exp-list .row{
    background:#0c1117 !important;
    border-top:1px solid #1a2230 !important;
    color:#e6edf6 !important;
  }
  .section-expenses .exp-list .row.h{
    background:#0f141b !important;
    color:#cfd7e3 !important;
    border-top-color:transparent !important;
  }
  .section-expenses .exp-list .row .kind{ color:#e8eef6 !important; font-weight:700; }
  .section-expenses .exp-list .row .when{ color:#9aa7bb !important; font-variant-numeric:tabular-nums; }
  .section-expenses .exp-list .row .amount{ color:#ffffff !important; text-align:right; font-weight:800; }

  /* Acciones y controles */
  .section-expenses .exp-list .row .actions{ color:#c5cfdd !important; }
  .section-expenses .icon-btn:hover{ background:rgba(255,255,255,.06) !important; }

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

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

  /* Botones Editar/Eliminar (texto + icon-only) */
  .section-expenses .exp-list .row .actions .btn{
    background:#111418; color:#e6e6e6; border:1px solid #223045;
    border-radius:10px; height:32px; padding:0 10px;
    box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .section-expenses .exp-list .row .actions .btn:hover{ filter:brightness(1.08); }
  .section-expenses .exp-list .row .actions .btn:focus-visible{
    outline:0; box-shadow:0 0 0 3px rgba(59,130,246,.18);
  }
  .section-expenses .exp-list .row .actions .btn.ghost{
    background:transparent; color:#cfd6e4; border-color:#2a3a55;
  }
  .section-expenses .exp-list .row .actions .btn.danger{
    background:linear-gradient(180deg,#ef4444,#7f1d1d); color:#fff; border-color:#7f1d1d;
  }

  .section-expenses .exp-list .row .actions .icon-btn{
    background:#0f1216; color:#d7deea; border:1px solid #223045;
    width:32px; height:32px; border-radius:8px; display:inline-grid; place-items:center;
  }
  .section-expenses .exp-list .row .actions .icon-btn:hover{ background:rgba(255,255,255,.06); }
  .section-expenses .exp-list .row .actions .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .section-expenses .exp-list .row .actions .icon-btn svg *{ stroke:currentColor; fill:none; }
  .section-expenses .exp-list .row .actions .icon-btn svg[fill]:not([fill="none"]),
  .section-expenses .exp-list .row .actions .icon-btn svg path[fill]:not([fill="none"]){
    fill:currentColor !important;
  }

  /* === TABS: modal ActivityInfo === */
  .activity-info .tabs{ border-bottom:1px solid var(--line,#202734); }
  .activity-info .tab{
    background:#0f1216; color:#cfd6e4;
    border:1px solid #1f2937; border-bottom:none;
  }
  .activity-info .tab:hover{ filter:brightness(1.05); }
  .activity-info .tab.is-active{
    background:#111418; color:#fff; border-color:#263042;
  }
  .activity-info .tabpanel{
    background:#0f1114; border:1px solid #263042; border-top:none; color:#e6edf6;
  }

  /* === TABS: dashboard (.dash-tab) === */
  .dash-tabs{ border-bottom:1px solid var(--line,#202734); }
  .dash-tab{
    background:#0f1216; color:#cfd6e4;
    border:1px solid #1f2937; border-bottom:none; border-radius:10px 10px 0 0;
  }
  .dash-tab:hover{ filter:brightness(1.05); }
  .dash-tab.is-active{ background:#111418; color:#fff; border-color:#263042; }
  .tab-view.is-active{ background:#0f1114; border:1px solid #263042; border-top:none; color:#e6edf6; }

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

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

  /* === EXP-LIST === */
  .section-expenses .exp-list{
    background:#0f1114 !important;
    border:1px solid #202734 !important;
    color:#e6edf6 !important;
  }
  .section-expenses .exp-list .row{
    background:#0c1117 !important;
    border-top:1px solid #1a2230 !important;
    color:#e6edf6 !important;
  }
  .section-expenses .exp-list .row.h{
    background:#0f141b !important;
    color:#cfd7e3 !important;
    border-top-color:transparent !important;
  }
  .section-expenses .exp-list .row .kind{ color:#e8eef6 !important; font-weight:700; }
  .section-expenses .exp-list .row .when{ color:#9aa7bb !important; font-variant-numeric:tabular-nums; }
  .section-expenses .exp-list .row .amount{ color:#ffffff !important; text-align:right; font-weight:800; }
  .section-expenses .exp-list .row .actions{ color:#c5cfdd !important; }
  .section-expenses .icon-btn:hover{ background:rgba(255,255,255,.06) !important; }
  .section-expenses .exp-list .row .input.sm,
  .section-expenses .exp-list .row select.input.sm{
    background:#0a0f15 !important; color:#e6edf6 !important; border:1px solid #233149 !important;
  }
  .section-expenses .exp-list .row .input.sm::placeholder{ color:#7f8da3 !important; }
  .section-expenses .exp-list .row:not(.h):hover{ background:#0e1520 !important; }

  /* Botones acciones */
  .section-expenses .exp-list .row .actions .btn{
    background:#111418; color:#e6e6e6; border:1px solid #223045;
    border-radius:10px; height:32px; padding:0 10px;
    box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .section-expenses .exp-list .row .actions .btn:hover{ filter:brightness(1.08); }
  .section-expenses .exp-list .row .actions .btn:focus-visible{
    outline:0; box-shadow:0 0 0 3px rgba(59,130,246,.18);
  }
  .section-expenses .exp-list .row .actions .btn.ghost{
    background:transparent; color:#cfd6e4; border-color:#2a3a55;
  }
  .section-expenses .exp-list .row .actions .btn.danger{
    background:linear-gradient(180deg,#ef4444,#7f1d1d); color:#fff; border-color:#7f1d1d;
  }
  .section-expenses .exp-list .row .actions .icon-btn{
    background:#0f1216; color:#d7deea; border:1px solid #223045;
    width:32px; height:32px; border-radius:8px; display:inline-grid; place-items:center;
  }
  .section-expenses .exp-list .row .actions .icon-btn:hover{ background:rgba(255,255,255,.06); }
  .section-expenses .exp-list .row .actions .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .section-expenses .exp-list .row .actions .icon-btn svg *{ stroke:currentColor; fill:none; }
  .section-expenses .exp-list .row .actions .icon-btn svg[fill]:not([fill="none"]),
  .section-expenses .exp-list .row .actions .icon-btn svg path[fill]:not([fill="none"]){
    fill:currentColor !important;
  }

  /* Tabs modal ActivityInfo */
  .activity-info .tabs{ border-bottom:1px solid var(--line,#202734); }
  .activity-info .tab{
    background:#0f1216; color:#cfd6e4;
    border:1px solid #1f2937; border-bottom:none;
  }
  .activity-info .tab:hover{ filter:brightness(1.05); }
  .activity-info .tab.is-active{ background:#111418; color:#fff; border-color:#263042; }
  .activity-info .tabpanel{
    background:#0f1114; border:1px solid #263042; border-top:none; color:#e6edf6;
  }

  /* Tabs dashboard */
  .dash-tabs{ border-bottom:1px solid var(--line,#202734); }
  .dash-tab{
    background:#0f1216; color:#cfd6e4;
    border:1px solid #1f2937; border-bottom:none; border-radius:10px 10px 0 0;
  }
  .dash-tab:hover{ filter:brightness(1.05); }
  .dash-tab.is-active{ background:#111418; color:#fff; border-color:#263042; }
  .tab-view.is-active{ background:#0f1114; border:1px solid #263042; border-top:none; color:#e6edf6; }

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