:root {
  --paper:        #FAFAF6;
  --paper-2:      #F2F1EB;
  --paper-3:      #E9E8E1;
  --ink:          #1A1A1A;
  --ink-2:        #4A4A48;
  --ink-3:        #8B8B86;
  --ink-4:        #B8B8B2;
  --line:         rgba(26,26,26,0.10);
  --line-strong:  rgba(26,26,26,0.22);
  --serif:        'Newsreader', 'EB Garamond', Georgia, serif;
  --mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 350;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Touch drag polyfill (src/touch-drag.js): suppress the iOS magnifier,
   the selection callout, AND the native UIDragInteraction so the
   long-press doesn't compete with our touchstart→drag synthesizer.
   Scoped to (pointer: coarse) so it only applies on touch devices —
   on desktop WKWebView / Safari / Chrome we WANT HTML5 drag to keep
   working, and `-webkit-user-drag: none` would otherwise kill it. */
@media (pointer: coarse) {
  [draggable="true"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
  }
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

body {
  display: grid;
  grid-template-columns: 248px 1fr 400px;
  height: 100vh;
}
body.detail-closed {
  grid-template-columns: 248px 1fr;
}
body.detail-closed #detail {
  display: none;
}

/* ---------- Mobile back buttons (hidden on desktop) ---------- */
.mobile-back {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-back:hover { color: var(--ink); border-color: var(--line-strong); }
/* Detail back button sits inline at the top of the pane on mobile so it
   doesn't overlap the title — see media query below for the layout. */
#mobile-back-detail { margin-bottom: 16px; }

/* ---------- Mobile single-pane navigation ---------- */
@media (max-width: 720px) {
  body, body.detail-closed {
    grid-template-columns: 1fr;
    /* In the iOS wrapper the WKWebView extends under the status bar
       and the dynamic island, so the per-pane back/close buttons at
       the top of each pane were sliding under the clock and the
       signal indicator. Push the whole grid down by the safe-area
       inset; no-op on desktop (the env value resolves to 0). */
    padding-top: env(safe-area-inset-top);
  }
  /* Each pane keeps its natural display (sidebar/main are flex columns,
     detail is block) — we only force inactive ones to hide. */
  body.mobile-pane-sidebar #main,
  body.mobile-pane-sidebar #detail { display: none; }
  body.mobile-pane-main #sidebar,
  body.mobile-pane-main #detail { display: none; }
  body.mobile-pane-detail #sidebar,
  body.mobile-pane-detail #main { display: none; }
  /* The detail pane fills the screen */
  #detail {
    width: 100%;
    max-width: none;
    border-left: none;
  }
  /* Show the back buttons */
  .mobile-back { display: inline-flex; align-items: center; justify-content: center; }
  /* Mobile: pull `›` (detail-toggle) out of its desktop absolute slot
     and let it ride along the flex row, so it lines up vertically
     with `‹` (mobile-back). `margin-left: auto` keeps it pinned to
     the right end of the row, with the input filling the middle. */
  #detail-toggle {
    position: static;
    margin-left: auto;
  }
  /* Capture row: [back] [input], hint wraps to a new line. */
  #capture {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    flex-wrap: wrap;
  }
  #capture::before { display: none; }
  /* Two-row capture header on mobile:
       [‹ back]              [› to detail]
       [ Capturar…                       ]
     The input takes its own full-width line below the button row, so
     `‹` and `›` sit flush on the edges with nothing between them. */
  #capture-input { flex: 1 1 100%; width: auto; min-width: 0; order: 2; }
  #mobile-back-main { order: 0; }
  #detail-toggle { order: 1; }
  #capture-hint { flex-basis: 100%; margin-top: 0; order: 3; }
  /* List view side padding tightens up on phones */
  #list-view { padding-left: 16px; padding-right: 16px; }
  /* Title (Bandeja de entrada / Hoy / etc.) on its own line; the
     LISTA · KANBAN · PDF controls drop underneath. */
  .view-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .view-title { width: 100%; flex-wrap: wrap; }
  .view-controls { flex-wrap: wrap; }
  /* Detail rows (LISTA · ASIGNADOS / FECHA · ESTADO · IMPORTANCIA…) stack
     vertically — they were laid out side-by-side and overflowed on phones. */
  .detail-row { flex-direction: column; gap: 22px; }
  .detail-row .detail-field { flex: none; width: 100%; }

  /* Swipe-back transition (src/swipe-back.js). The two panes involved
     in the swipe get lifted onto a fixed-position stack so the JS can
     translate them with the finger; the rules below override the
     display:none coming from body.mobile-pane-X. Specificity is the
     same; this block lives later in the stylesheet so it wins. */
  body.swipe-back-active .pane-outgoing,
  body.swipe-back-active .pane-incoming {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    overflow: hidden;
  }
  body.swipe-back-active .pane-incoming { z-index: 100; }
  body.swipe-back-active .pane-outgoing {
    z-index: 101;
    box-shadow: -2px 0 14px rgba(0, 0, 0, 0.18);
  }
}

/* Kanban needs space — disable it entirely on portrait phones. The button
   in the view-mode toggle disappears, and the JS-side `effectiveKanban()`
   forces the list rendering even if state.kanban === true. Rotate the
   phone to landscape (or widen the window) to get Kanban back. */
@media (max-width: 720px) and (orientation: portrait) {
  .view-mode button:nth-child(2) { display: none; }
}

/* ----------- Sidebar ----------- */
#sidebar {
  border-right: 1px solid var(--line);
  padding: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 0 12px;
}

.app-name {
  padding: 0 20px 14px;
  text-align: center;
  line-height: 0;
}
.app-logo {
  height: 37px;
  width: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.sidebar-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 14px 0 14px;
  background: var(--paper);
}

.sidebar-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 0;
  /* On iPhone the screen's rounded corners can clip the bottom-left
     "GalatIA ©" / ⋯ pair. Push them inward horizontally — vertical
     position stays put so we don't eat interface above. Desktop keeps
     the static 28px; mobile takes whichever is larger between that and
     the safe-area inset. Requires viewport-fit=cover in index.html. */
  padding-left:  max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}
.brand-by {
  font-family: var(--serif);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.01em;
}
.data-menu {
  background: none;
  border: none;
  color: var(--ink-4);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  letter-spacing: 0.1em;
  transition: color 160ms ease;
}
.data-menu:hover { color: var(--ink); }

.menu-user {
  padding: 8px 14px 6px;
  cursor: default;
}
.menu-user-name {
  color: var(--ink);
  font-weight: 500;
}
.menu-user-id {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: none;
  cursor: pointer;
}
.menu-user-id:hover { color: var(--ink); }

/* List/person ID row in their context menus */
.menu-share-row {
  padding: 6px 14px 8px;
  cursor: pointer;
}
.menu-share-row:hover { background: var(--paper-2); }
.menu-share-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.menu-share-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
  text-transform: none;
  margin-top: 2px;
}

/* Subscribed sidebar items render with the same look as the originals — */
/* their read-only nature only manifests in actions, not in the sidebar. */

/* Mark on items the current user has shared (RSS-style broadcast icon) */
.shared-mark {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  margin-right: 8px;
  flex-shrink: 0;
  align-self: center;
}
.side-item.shared:hover .shared-mark { color: var(--ink); }

/* Mark on items the current user has pinned to the top of their section.
   Sibling treatment to .shared-mark so the two glyphs read as a set. */
.pin-mark {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  margin-right: 8px;
  flex-shrink: 0;
  align-self: center;
}
.side-item.pinned:hover .pin-mark { color: var(--ink); }

/* Activity dot: minimal mark next to the task count signalling
   "changes since last visit". Sits in the gutter so it doesn't push
   layout around. Click on the row clears it. */
.activity-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  align-self: center;
}

/* Candado para suscripciones bloqueadas por el plan free. Sustituye al
   activity-dot en la misma posición. El nombre queda atenuado para
   diferenciar visualmente las accesibles. */
.locked-mark {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  margin-right: 4px;
  flex-shrink: 0;
}
.side-item.locked .name { color: var(--ink-3); font-style: italic; }
.side-item.locked .count { opacity: 0.5; }

/* Pantalla de paywall: ocupa el panel central cuando el usuario abre
   una suscripción bloqueada. Tipografía pesada, calmada, accionable. */
.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
  gap: 16px;
  min-height: 60vh;
}
.paywall-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper-2, #ede8da);
  border: 1px solid var(--line);
  position: relative;
}
.paywall-icon::before,
.paywall-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--ink-2);
}
.paywall-icon::before {
  top: 13px;
  width: 18px;
  height: 14px;
  border-radius: 9px 9px 0 0;
  border-bottom: 0;
}
.paywall-icon::after {
  top: 25px;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  background: var(--paper);
}
.paywall-title {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
}
.paywall-body {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 420px;
  line-height: 1.55;
}
.paywall-actions { margin-top: 8px; }
.paywall-actions .auth-submit { min-width: 180px; }


/* Read-only detail */
#detail.readonly .detail-title,
#detail.readonly .detail-field input,
#detail.readonly .detail-field select,
#detail.readonly .detail-field textarea,
#detail.readonly .detail-field button,
#detail.readonly .checkbox,
#detail.readonly .chip,
#detail.readonly .row-del,
#detail.readonly .sub-open {
  pointer-events: none;
  opacity: 0.78;
}
/* Comments are the one writeable channel for subscribers: re-enable
   the compose textarea, send button, and the edit/delete actions on
   the subscriber's own comments, even when the detail panel is
   otherwise readonly. */
#detail.readonly .comments-field textarea,
#detail.readonly .comments-field button {
  pointer-events: auto;
  opacity: 1;
}
.detail-sub-banner {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 8px 12px;
  border-left: 2px solid var(--ink-3);
  margin-bottom: 16px;
}

/* Read-only task rows: a hair lighter, italic title */
.task.readonly .task-title,
.kanban-card.readonly .card-title {
  font-style: italic;
  color: var(--ink-2);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-card {
  background: var(--paper);
  padding: 24px 28px;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.modal-card.wide { width: 520px; }

/* Notes "expand" icon next to the field label and the modal it opens. */
.notes-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notes-expand {
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  letter-spacing: 0;
}
.notes-expand:hover { color: var(--ink); }
.notes-modal {
  width: min(900px, calc(100vw - 40px));
  height: min(80vh, 800px);
  padding: 18px 20px 20px;
}
.notes-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.notes-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.notes-modal-close:hover { color: var(--ink); }
.notes-modal-editor {
  flex: 1;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  padding: 16px;
  resize: none;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.notes-modal-editor:focus { border-color: var(--ink); }
/* Modal preview inherits everything from .notes-preview but takes the
   remaining vertical space, scrolls when overflowing, and uses bigger type. */
.notes-modal-preview {
  flex: 1;
  overflow-y: auto;
  font-size: 16px;
  padding: 16px;
}
.notes-modal-preview h1 { font-size: 22px; }
.notes-modal-preview h2 { font-size: 19px; }
.notes-modal-preview h3 { font-size: 17px; }

.onboarding-tips {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 4px;
}
.onboarding-tip-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.onboarding-tip-body {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.modal-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
}
.modal-hint {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-bottom: 6px;
}
.modal-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.modal-buttons .auth-submit { flex: 1; margin-top: 0; }
.profile-plan {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2, transparent);
}
.profile-plan-summary {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.profile-plan-actions {
  display: flex;
  gap: 8px;
}
.profile-plan-actions .auth-submit,
.profile-plan-actions .modal-cancel {
  flex: 1; margin-top: 0; white-space: nowrap;
  /* letter-spacing 0.2em deja espacio sobrante tras la última letra,
     que en un botón con text-align:center descentra visualmente el
     contenido. Compensamos con un text-indent del mismo valor para
     que el bloque visible quede centrado de verdad. */
  text-indent: 0.2em;
}

/* CTA "Hazte premium" justo debajo del logo del sidebar — sólo visible
   en cuentas que aún no son paid. Sin reborde para que se integre
   limpiamente con el resto del sidebar; el hover destaca por color. */
.go-premium-cta {
  display: block;
  /* -14px top compensa el padding-bottom de .app-name (14px) para
     que HAZTE PREMIUM quede pegado al logo, no flotando lejos. */
  margin: -14px 16px 8px;
  padding: 0 10px 4px;
  text-align: center;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage, #6b8775);
  background: transparent;
  text-decoration: none;
  transition: color 160ms ease;
}
.go-premium-cta:hover { color: var(--ink, #221f1c); }
.modal-cancel {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
}
.modal-cancel:hover { color: var(--ink); }

.side-search {
  position: relative;
  margin: 0 20px 18px;
}
.side-search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  outline: none;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  padding: 6px 22px 6px 16px;
  letter-spacing: -0.005em;
}
.side-search-input::placeholder {
  color: var(--ink-4);
  font-style: italic;
}
.side-search-input:focus { border-bottom-color: var(--ink); }
.side-search::before {
  content: '⌕';
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 14px;
  color: var(--ink-4);
  pointer-events: none;
}
.side-search-clear {
  position: absolute;
  right: 0;
  top: 3px;
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--mono);
  padding: 2px 4px;
}
.side-search-clear:hover { color: var(--ink); }

/* Webkit search clear button hidden — we use our own. */
.side-search-input::-webkit-search-cancel-button { display: none; }

/* Calendar */
.side-calendar {
  margin: 0 16px 2px;
  font-family: var(--mono);
}
/* Phone in landscape: the sidebar is short and the mini-calendar
   eats most of it — hide it. Portrait still shows it. */
@media (orientation: landscape) and (max-height: 540px) {
  .side-calendar { display: none; }
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 4px;
}
.cal-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  flex: 1;
  text-align: center;
}
.cal-title:hover { color: var(--ink); }
.cal-nav {
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--mono);
  padding: 2px 6px;
  line-height: 1;
}
.cal-nav:hover { color: var(--ink); }
.cal-weekdays, .cal-grid {
  display: grid;
  /* Column 1 reserved for the ISO week number (discreet, narrow); the
     remaining 7 columns are the weekdays. */
  grid-template-columns: 20px repeat(7, 1fr);
}
.cal-week-num {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-4);
  text-align: right;
  padding: 5px 4px 0 0;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.cal-week-num.clickable { cursor: pointer; }
.cal-week-num.clickable:hover { opacity: 1; color: var(--ink); }
.cal-week-corner { /* empty cell aligning weekday labels with the week column */ }
.cal-wd {
  font-size: 9px;
  text-align: center;
  color: var(--ink-4);
  padding: 4px 0;
  letter-spacing: 0.06em;
}
.cal-cell {
  font-size: 11px;
  text-align: center;
  padding: 5px 0 8px;
  cursor: pointer;
  color: var(--ink-2);
  position: relative;
  border-radius: 1px;
  transition: background 160ms ease, color 160ms ease;
}
.cal-cell:hover { background: var(--paper-2); color: var(--ink); }
.cal-cell.empty { cursor: default; }
.cal-cell.empty:hover { background: transparent; }
.cal-cell.today {
  font-weight: 500;
  color: var(--ink);
}
.cal-cell.has-tasks::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-3);
  transform: translateX(-50%);
}
/* When the day also has an important task, shift the gray dot left and
   draw a sober red dot next to it so the day reads as "has tasks + at
   least one is important" at a glance. */
.cal-cell.has-tasks.has-important::after { transform: translateX(-150%); }
.cal-cell.has-important::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #b53a2c;
  transform: translateX(50%);
}
.cal-cell.selected {
  background: var(--ink);
  color: var(--paper);
}
.cal-cell.selected.has-tasks::after { background: var(--paper); }
.cal-cell.selected.has-important::before { background: var(--paper); }

.side-section { margin-bottom: 22px; }
.side-title {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  padding: 0 28px 8px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.side-title-menu {
  background: none;
  border: none;
  color: var(--ink-4);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}
.side-title-menu:hover { color: var(--ink); }
.side-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 5px 28px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink);
  transition: color 160ms ease, background 160ms ease;
  position: relative;
  user-select: none;
}
.side-item:hover { color: var(--ink); }
.side-item.active {
  color: var(--ink);
  background: var(--paper-2);
}
.side-item.drop-target {
  color: var(--ink);
  background: var(--paper-2);
  outline: 1px dashed var(--line-strong);
  outline-offset: -2px;
}
.side-item.smart-overdue,
.side-item.smart-overdue:hover,
.side-item.smart-overdue.active,
.side-item.smart-overdue .name,
.side-item.smart-overdue .count { color: #8a1d1d; }
.side-item.disabled .name {
  text-decoration: line-through;
  color: var(--ink-4);
}
.side-item.disabled .list-dot { opacity: 0.35; }
.side-item.disabled .count { opacity: 0.4; }
.side-item .count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.side-item .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right: 8px; }

.list-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  border: 1px solid transparent;
  cursor: pointer;
}

.side-item.indent { padding-left: 40px; font-size: 14px; }

.add-row {
  padding: 6px 28px;
  font-size: 11px;
  color: var(--ink-4);
  cursor: pointer;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transition: color 160ms ease;
}
.add-row:hover { color: var(--ink-2); }
.add-input {
  width: calc(100% - 56px);
  margin: 4px 28px;
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  padding: 2px 0;
}

.project-row {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  font-weight: 400;
}
.project-row .name { letter-spacing: 0.18em; }
.project-row.active { background: transparent; }
.project-row.active::before { background: transparent; }

/* ----------- Main column ----------- */
#main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

#capture {
  border-bottom: 1px solid var(--line);
  padding: 22px 56px 18px 36px;
  position: relative;
}
#detail-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms ease, border-color 160ms ease;
}
#detail-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
#capture::before {
  content: '+';
  position: absolute;
  left: 16px;
  top: 22px;
  font-size: 18px;
  color: var(--ink-4);
  font-family: var(--serif);
  pointer-events: none;
}
#capture-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  outline: none;
  font-weight: 350;
  letter-spacing: -0.005em;
}
#capture-input::placeholder {
  color: var(--ink-4);
  font-style: italic;
}
#capture-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-top: 4px;
  height: 12px;
}

#list-view {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px 64px;
}

.view-header { margin-bottom: 24px; }
.view-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.view-title {
  font-size: 30px;
  font-weight: 350;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.view-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.view-mode {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 1px;
  flex-shrink: 0;
}
.view-export {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-3);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.view-export:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
/* Toggle for showing the "Completadas" section. Same visual language as
   the row checkbox: hollow circle when off, filled with check when on. */
.view-completed {
  background: transparent;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease;
}
.view-completed:hover { border-color: var(--ink); }

/* ⋯ menu button in the view-controls header. Same chunky mono glyph as
   the Inteligentes title menu in the sidebar. inline-flex + align-items
   keeps the glyph centred on the row regardless of its own line-height. */
.view-controls-menu {
  background: none;
  border: none;
  color: var(--ink-4);
  cursor: pointer;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}
.view-controls-menu:hover { color: var(--ink); }
.view-completed.active {
  background: var(--ink);
  border-color: var(--ink);
}
.view-completed.active::after {
  content: '';
  width: 7px;
  height: 3.5px;
  border: 1.4px solid var(--paper);
  border-top: none;
  border-right: none;
  transform: translateY(-1px) rotate(-45deg);
}
.view-mode button {
  background: none;
  border: none;
  color: var(--ink-3);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.view-mode button:hover { color: var(--ink); }
.view-mode button.active {
  background: var(--ink);
  color: var(--paper);
}
.view-title .count {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  font-style: italic;
  color: var(--ink-3);
  margin-left: 6px;
}
.view-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 4px;
}

.section-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.empty-state {
  font-style: italic;
  color: var(--ink-4);
  padding: 20px 0;
  font-size: 15px;
}

/* ----------- Task row ----------- */
.task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 6px 11px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 160ms ease;
  position: relative;
}

.task-disclosure {
  width: 12px;
  text-align: center;
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 7px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  transition: color 160ms ease;
}
.task-disclosure:hover { color: var(--ink); }
.task-disclosure.placeholder { visibility: hidden; cursor: default; }
.task::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--list-color, transparent);
  transition: background 160ms ease, left 160ms ease;
}
/* Cuando una tarea suscrita tiene actividad nueva (la editaron desde
   tu última visita), corremos la raya 8px a la derecha dentro del
   padding-left de 12px y dejamos hueco para un punto a la izquierda.
   El contenido (disclosure, checkbox, título) no se mueve. Usamos un
   span real (no ::after) porque el ::after ya está ocupado por el
   marco de drag-and-drop. */
.task.has-activity::before { left: 8px; }
.task-activity-mark {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
}
.task:hover { background: rgba(26,26,26,0.02); }
.task.selected { background: var(--paper-2); }
.task.completed .task-title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
  text-decoration-color: var(--ink-4);
}

.task.dragging {
  opacity: 0.4;
}
.task.drop-target {
  background: var(--paper-2);
}
.task.drop-target::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px dashed var(--ink-3);
}

.checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid var(--list-color, var(--line-strong));
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease;
  background: transparent;
}
.checkbox:hover { border-color: var(--list-color, var(--ink)); }
.checkbox.checked {
  background: var(--list-color, var(--ink));
  border-color: var(--list-color, var(--ink));
}
.checkbox.checked::after {
  content: '';
  width: 5px;
  height: 2.5px;
  border: 1.2px solid var(--paper);
  border-top: none;
  border-right: none;
  transform: translateY(-1px) rotate(-45deg);
}
.checkbox.progress {
  background: linear-gradient(to right, var(--list-color, var(--ink)) 0 50%, transparent 50% 100%);
  border-color: var(--list-color, var(--ink));
}
.checkbox.paused {
  background: transparent;
  border-color: var(--list-color, var(--ink));
  position: relative;
}
.checkbox.paused::before,
.checkbox.paused::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 2px;
  height: 6px;
  background: var(--list-color, var(--ink));
  transform: translateY(-50%);
}
.checkbox.paused::before { left: 3px; }
.checkbox.paused::after  { right: 3px; }
.checkbox.cancelled {
  background: var(--list-color, var(--ink));
  border-color: var(--list-color, var(--ink));
  position: relative;
}
.checkbox.cancelled::before,
.checkbox.cancelled::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 1.2px;
  background: var(--paper);
}
.checkbox.cancelled::before { transform: translate(-50%, -50%) rotate(45deg); }
.checkbox.cancelled::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.task-body { flex: 1; min-width: 0; }
.task-title {
  font-size: 15px;
  color: var(--ink);
  font-weight: 350;
  line-height: 1.35;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-top: 5px;
}

/* Compact inline comments preview, shown in list rows for shared tasks
   with comments. Lives inside .task-body but with a negative margin-left
   that pulls it back over the disclosure + checkbox gutter so the box
   visually aligns with the .task's content-left instead of with the
   task title. Read-only — the composer is in the detail panel. */
.task-comments-summary {
  /* disclosure (12px) + gap (10px) + checkbox (14px) + gap (10px) = 46px */
  margin: 6px 0 0 -46px;
  padding: 4px 10px;
  background: var(--paper-2);
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-comment-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
  min-width: 0;
}
.task-comment-author {
  flex: 0 0 auto;
  max-width: 30%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-comment-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-meta .meta-sep,
.card-meta .meta-sep {
  color: var(--ink-4);
  font-weight: 400;
  letter-spacing: 0;
  user-select: none;
}
.task-meta .pill { display: inline-flex; align-items: center; gap: 4px; }

/* Bell glyph at the end of the meta row when a task has an alarm. Sits
   in the same line height as the rest, inherits the meta color. */
.alarm-bell {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.task-meta .alarm-bell svg { display: block; }
.task-meta .resp-pill,
.card-meta .resp-pill {
  display: inline;
}
.task-meta .resp-pill .star,
.card-meta .resp-pill .star {
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
}
.task-meta .resp-pill .star svg,
.card-meta .resp-pill .star svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 0 baja, 2 importante, 3 muy importante. 1 normal does not render a pill. */
/* All priority pills share the same color/weight; the label differentiates them. */
.task-meta .pill.paused-pill {
  color: var(--ink);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.task-meta .pill.cancelled-pill,
.card-meta .pill.cancelled-pill {
  color: var(--ink-3);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.task-meta .pill.overdue,
.card-meta .pill.overdue {
  color: #8a1d1d;
  font-weight: 500;
}
.task-meta .pause-reason {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
  font-weight: 350;
  margin-left: -4px;
}
.task-meta .pill.has-icon::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border: 1px solid var(--ink-3);
  margin-right: 2px;
}
.task-meta .pill.dot::before {
  content: '·';
  margin-right: 4px;
  border: none;
  width: auto; height: auto;
}

/* ----------- Detail panel ----------- */
#detail {
  border-left: 1px solid var(--line);
  padding: 28px 28px 64px;
  overflow-y: auto;
  background: var(--paper);
}
#detail.empty { display: flex; align-items: center; justify-content: center; }
.detail-placeholder { color: var(--ink-4); font-style: italic; }

.detail-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  margin-bottom: 4px;
  color: var(--ink);
  line-height: 1.3;
  resize: none;
  letter-spacing: -0.005em;
}
.detail-title.completed { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 0.5px; }

.detail-row-top {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
}

.detail-field { margin-bottom: 22px; }
.detail-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 400;
}
.detail-input,
.detail-select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 4px 0;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.detail-input:focus { border-color: var(--ink); }
.detail-textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--line);
  background: transparent;
  padding: 10px 12px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  outline: none;
  resize: vertical;
  border-radius: 1px;
}
.detail-textarea:focus { border-color: var(--line-strong); }

.notes-preview {
  border: 1px solid transparent;
  background: var(--paper-2);
  padding: 10px 12px;
  border-radius: 1px;
  cursor: text;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  transition: border-color 160ms ease;
}
.notes-preview:hover { border-color: var(--line); }
.notes-preview p { margin: 0 0 0.6em; }
.notes-preview p:last-child { margin-bottom: 0; }
.notes-preview h1, .notes-preview h2, .notes-preview h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0.6em 0 0.3em;
  line-height: 1.25;
}
.notes-preview h1 { font-size: 18px; }
.notes-preview h2 { font-size: 16px; }
.notes-preview h3 { font-size: 14px; }
.notes-preview ul, .notes-preview ol { margin: 0 0 0.5em 1.2em; padding: 0; }
.notes-preview li { margin: 0.1em 0; }
.notes-preview a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.5px; }
.notes-preview code {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(26,26,26,0.06);
  padding: 1px 4px;
  border-radius: 1px;
}
.notes-preview pre {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(26,26,26,0.06);
  padding: 8px 10px;
  border-radius: 1px;
  overflow-x: auto;
  margin: 0.4em 0 0.6em;
}
.notes-preview pre code { background: none; padding: 0; }
.notes-preview blockquote {
  border-left: 2px solid var(--line-strong);
  padding-left: 10px;
  margin: 0.4em 0;
  color: var(--ink-2);
  font-style: italic;
}
.notes-preview hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.8em 0;
}
.notes-preview strong { font-weight: 600; }
.notes-preview em { font-style: italic; }

.detail-row { display: flex; gap: 10px; }
.detail-row .detail-field { flex: 1; }

/* Date editor */
.date-type-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.date-type-row .chip {
  flex: 1 1 auto;
  text-align: center;
}
/* "Sin fecha" (always the first chip) matches the third-of-row width
   used by Con hora / Aviso / Hoy, so all left-aligned toggle chips in
   the detail share one visual rhythm. The remaining four type chips
   (Día / Semana / Mes / Año) split the rest. */
.date-type-row .chip:first-child {
  flex: 0 0 calc((100% - 8px) / 3);
}
/* Priority row holds 4 fairly long labels — tighten padding/letter-spacing
   so "Muy importante" fits on the same line as the rest in a 400px detail. */
.priority-row .chip {
  padding: 3px 4px;
  letter-spacing: 0.02em;
  font-size: 9px;
}
.chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 1px;
  transition: all 160ms ease;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.date-fields {
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  width: 100%;
}
/* Date input grows to fill the row, time input keeps its natural width —
   mirrors the alarm row layout. */
.date-fields > input[type="date"] { flex: 1 1 0; min-width: 0; }
.date-fields > input[type="time"] { flex: 0 0 auto; }
.date-fields input, .date-fields select {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 3px 0;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.date-fields input:focus, .date-fields select:focus { border-color: var(--ink); }
.date-fields input[type="date"], .date-fields input[type="time"] {
  color: var(--ink);
}
.date-fields input[type="time"].unset,
.date-fields input[type="date"].unset {
  color: var(--ink-4);
  opacity: 0.6;
}
.date-fields input[type="time"]:disabled,
.date-fields input[type="date"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Alarm row: chip + date + Hora + time all on one line, filling it. */
.alarm-row { width: 100%; }
.alarm-row input[type="date"] { flex: 1 1 0; min-width: 0; }
.alarm-row input[type="time"] { flex: 0 0 auto; }

/* "Con hora" and "Aviso" chips: same pixel width as a Hoy/Mañana chip
   in the date-quick row below (which lays out 3 chips of equal thirds
   with 4px gaps = `(100% - 8px) / 3`). Locking them to this width keeps
   the row from re-flowing when the chip flips active/inactive. */
.date-fields .date-time-toggle,
.alarm-row .alarm-chip {
  flex: 0 0 calc((100% - 8px) / 3);
  text-align: center;
}

/* ----------- Monthly calendar view (third mode in #list-view) ----------- */
.mcal-header {
  display: flex; align-items: baseline; justify-content: center;
  gap: 14px; margin: 8px 0 14px;
}
.mcal-header .mcal-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink);
}
.mcal-nav {
  background: none; border: none; color: var(--ink-3);
  font-family: var(--mono); font-size: 18px; line-height: 1;
  padding: 2px 8px; cursor: pointer;
}
.mcal-nav:hover { color: var(--ink); }

/* Year / Month / Week scope banners above the grid. Their grid replicates
   the day grid exactly so chips line up with the day cells underneath.
   The 4px chip margins reproduce the internal padding of `.mcal-cell`. */
.mcal-scope-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px 0;
  padding: 4px 0; margin-bottom: 4px;
  /* Mirror the 1px left border that .mcal-grid carries so columns of
     this row align pixel-perfectly with the day columns below. */
  border-left: 1px solid transparent;
}
.mcal-scope-row.with-weeknum-offset {
  grid-template-columns: 32px repeat(7, 1fr);
}
.mcal-scope-row > .mcal-task { margin: 0 4px; }
/* Weekly view (no week-num column): odd at Mon, even at Thu. */
.mcal-scope-row > .mcal-task:nth-child(2n-1) { grid-column: 1 / span 3; }
.mcal-scope-row > .mcal-task:nth-child(2n)   { grid-column: 4 / span 4; }
/* Monthly view (8-col grid): shift everything one column right so col 2
   is Monday, col 5 is Thursday. */
.mcal-scope-row.with-weeknum-offset > .mcal-task:nth-child(2n-1) { grid-column: 2 / span 3; }
.mcal-scope-row.with-weeknum-offset > .mcal-task:nth-child(2n)   { grid-column: 5 / span 4; }

/* 8-column grid: [week-num] + 7 weekdays. */
.mcal-weekdays {
  display: grid; grid-template-columns: 32px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  /* Same 1px left border as .mcal-grid so its day labels align with the
     day cells directly below. */
  border-left: 1px solid transparent;
}
.mcal-week-corner { /* empty cell above the week-number column */ }
.mcal-wd {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-4); text-align: center; padding: 6px 0;
}
.mcal-grid {
  display: grid; grid-template-columns: 32px repeat(7, 1fr);
  grid-auto-rows: minmax(min-content, auto);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.mcal-week-pad {
  border-right: 1px solid var(--line);
  background: transparent;
}
.mcal-week-floaters {
  border-right: 1px solid var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 3px 4px;
  /* 7 columns matching the day cells of the same row, so chips align
     with Mon and Thu exactly like the scope banners above. */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px 0;
  min-height: 18px;
  background: rgba(26,26,26,0.015);
}
.mcal-week-floaters > .mcal-task { margin: 0 4px; }
.mcal-week-floaters > .mcal-task:nth-child(2n-1) { grid-column: 1 / span 3; }
.mcal-week-floaters > .mcal-task:nth-child(2n)   { grid-column: 4 / span 4; }
.mcal-week-num-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 0.04em;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px;
}
.mcal-week-num-cell.clickable { cursor: pointer; }
.mcal-week-num-cell.clickable:active { color: var(--ink); }
.mcal-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; min-height: 96px;
  cursor: pointer;
  transition: background 120ms ease;
}
.mcal-cell:hover { background: var(--paper-2); }
.mcal-cell.empty { background: transparent; cursor: default; }
.mcal-cell.empty:hover { background: transparent; }
.mcal-cell.today .mcal-day-num {
  color: var(--ink); font-weight: 500;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
}
.mcal-cell.drop-target { background: var(--paper-2); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.mcal-day-num {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  align-self: flex-end;
}
.mcal-tasks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcal-task {
  font-family: var(--serif); font-size: 11.5px;
  color: var(--ink); line-height: 1.25;
  padding: 2px 4px 2px 8px;
  border-left: 2px solid var(--list-color, var(--line-strong));
  background: rgba(26,26,26,0.025);
  cursor: pointer;
  display: flex; align-items: center; gap: 0;
  min-width: 0;
}
.mcal-task:hover { background: rgba(26,26,26,0.06); }
.mcal-task.selected { background: var(--paper-2); }
.mcal-task.completed { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 0.5px; }
.mcal-task-time {
  flex: 0 0 auto;
  margin-right: 4px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.02em;
}
.mcal-task-title {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Same look as the mini-cal "has-important" dot: 3×3 red, sitting after
   the title with a small breath of space. */
.mcal-task-imp {
  flex: 0 0 auto;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #b53a2c;
  margin-left: 5px;
  align-self: center;
}

/* Weekly calendar: 7 day columns. Day cells grow to fit all their tasks
   (busy days stretch the whole row, like the monthly view). */
.wcal-header-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}
.wcal-dh {
  text-align: center; padding: 6px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.wcal-dh-wd {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-4);
}
.wcal-dh-day {
  font-family: var(--serif); font-size: 18px;
  font-weight: 350; color: var(--ink);
}
.wcal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(min-content, auto);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.wcal-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 4px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; min-height: 220px;
  cursor: pointer;
  transition: background 120ms ease;
}
.wcal-cell:hover { background: var(--paper-2); }
.wcal-cell.today { background: rgba(26,26,26,0.025); }
.wcal-cell.today:hover { background: var(--paper-2); }
.wcal-cell.drop-target { background: var(--paper-2); outline: 1px dashed var(--ink-3); outline-offset: -1px; }

/* Footer of the weekly view: month-scoped tasks below the day grid. */
.wcal-month-footer {
  margin-top: 14px;
}
.wcal-month-footer-label {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-4); margin-bottom: 6px;
}
.date-arrow {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
}
.date-fields .num { width: 46px; text-align: center; }
.date-fields .yr { width: 56px; }
.date-quick { display: flex; gap: 4px; margin-top: 6px; }
/* Equal widths regardless of label length (Hoy / Mañana / Varios días). */
.date-quick .chip { flex: 1 1 0; text-align: center; }

/* Subtasks */
.subtask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.subtask:last-child { border-bottom: none; }
.subtask .checkbox { width: 11px; height: 11px; margin-top: 0; }
.subtask .checkbox.checked::after { width: 4px; height: 2px; }
.subtask input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 14px;
  outline: none;
  color: var(--ink);
  padding: 2px 0;
}
.subtask.completed input[type="text"] {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
}
.subtask .row-del,
.subtask .sub-open {
  background: none; border: none; color: var(--ink-4);
  cursor: pointer; font-family: var(--mono); font-size: 12px;
  opacity: 0; transition: opacity 160ms ease, color 160ms ease;
  padding: 2px 4px;
}
.subtask:hover .row-del,
.subtask:hover .sub-open { opacity: 1; }
.subtask .row-del:hover,
.subtask .sub-open:hover { color: var(--ink); }
.subtask .sub-count {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  padding: 0 4px;
}

.subtask-add {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; opacity: 0.5; transition: opacity 160ms ease;
}
.subtask-add:hover { opacity: 1; }
.subtask-add .checkbox { width: 11px; height: 11px; margin-top: 0; }
.subtask-add input {
  flex: 1; border: none; background: transparent;
  font-family: var(--serif); font-size: 13px;
  outline: none; color: var(--ink-3); font-style: italic;
}

/* Attachments */
.attach-list { display: flex; flex-direction: column; gap: 4px; }
.attach-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--paper-2);
  font-size: 13px;
  border-radius: 1px;
  border: 1px solid var(--line);
}
.attach-item .name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
}
.attach-item .meta {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--ink-3);
  text-transform: uppercase;
}
.attach-item a { color: var(--ink); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-item a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; }
.attach-item .row-del {
  background: none; border: none;
  color: var(--ink-4); cursor: pointer;
  font-family: var(--mono); font-size: 11px;
}
.attach-item .row-del:hover { color: var(--ink); }
.attach-drop {
  border: 1px dashed var(--line-strong);
  padding: 14px;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  border-radius: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.attach-drop:hover, .attach-drop.dragover {
  color: var(--ink); border-color: var(--ink);
}

/* Comments — per-task thread shared between owner and subscribers. */
.comments-field .detail-label .count {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.16em;
  font-weight: 400;
}
.comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.comment-row {
  padding: 6px 0 6px 10px;
  border-left: 2px solid var(--line);
  position: relative;
}
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.comment-author { color: var(--ink-3); text-transform: uppercase; }
.comment-author.mine { color: var(--ink-2); }
.comment-time { color: var(--ink-4); }
.comment-edited { color: var(--ink-4); font-style: italic; }
.comment-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-edit {
  width: 100%;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 6px 8px;
  outline: none;
  resize: vertical;
  min-height: 60px;
}
.comment-edit:focus { border-color: var(--ink-3); }
.comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.comment-action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.comment-action:hover { color: var(--ink-2); }
.comment-action.danger:hover { color: #b53a2c; }
.comment-compose-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.comment-compose {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 6px 8px;
  outline: none;
  resize: vertical;
  min-height: 44px;
}
.comment-compose:focus { border-color: var(--ink-3); }
.comment-send {
  width: 100%;
}

/* Assignees */
.assign-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 1px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-2);
}
.assign-chip:hover { border-color: var(--line-strong); }
.assign-chip.responsible {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2);
}
.assign-chip .star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--ink);
  transform: translateY(-1px);
}
.assign-chip .star svg { display: block; width: 100%; height: 100%; }
.assign-chip .x {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.assign-chip .x:hover { color: var(--ink); }
/* Add-assignee field: grows to fill whatever room is left on the row of
   chips (alone on its line → full width; with chips next to it → fills
   the rest of the line until under ~minimum, then wraps and goes full
   width again on the new line). */
.assign-add {
  display: flex; align-items: center;
  border: 1px dashed var(--line-strong);
  padding: 4px 10px;
  border-radius: 1px;
  flex: 1 1 140px;
  min-width: 0;
  box-sizing: border-box;
}
.assign-add input {
  border: none; background: transparent; outline: none;
  font-family: var(--serif); font-size: 12px;
  color: var(--ink);
  flex: 1; min-width: 0; width: 100%;
}

/* Buttons */
.btn {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  border-radius: 1px;
  transition: all 160ms ease;
}
.btn:hover { color: var(--ink); border-color: var(--ink); }
.btn.ghost { border-color: transparent; color: var(--ink-3); padding: 5px 8px; }
.btn.ghost:hover { color: var(--ink); border-color: var(--line); }
.btn.danger:hover { color: #8a1d1d; border-color: #8a1d1d; }

.detail-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 14px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.detail-delete {
  color: #8a1d1d;
  border-color: rgba(138, 29, 29, 0.35);
  background: transparent;
}
.detail-delete:hover {
  color: #8a1d1d;
  border-color: #8a1d1d;
  background: rgba(138, 29, 29, 0.05);
}

/* Date display row at top */
.created-row {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.created-row .row { display: flex; gap: 8px; align-items: center; }
.created-row .row label { color: var(--ink-3); min-width: 86px; }
.created-row .row input {
  border: none; background: transparent;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-2); outline: none;
  border-bottom: 1px solid transparent;
  padding: 1px 0;
  letter-spacing: 0.06em;
}
.created-row .row input:hover, .created-row .row input:focus { border-bottom-color: var(--line-strong); color: var(--ink); }

/* ----------- Kanban ----------- */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.kanban-column {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  border: 1px solid var(--line);
  background: rgba(26,26,26,0.015);
  padding: 12px 10px;
  border-radius: 1px;
  transition: background 160ms ease, border-color 160ms ease;
}
.kanban-column.drop-target {
  background: var(--paper-2);
  border-color: var(--line-strong);
}
.kanban-col-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.kanban-col-title .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}
.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kanban-empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-4);
  text-align: center;
  padding: 12px 0;
}

.kanban-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 10px 10px;
  border-radius: 1px;
  cursor: pointer;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.kanban-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--list-color, transparent);
}
.kanban-card:hover { border-color: var(--line-strong); }
.kanban-card.selected { background: var(--paper-2); }
.kanban-card.dragging { opacity: 0.4; }
/* Parent breadcrumb chip above the kanban card title when the task is
   nested. Compact mono label so it reads as metadata, not as a title. */
.card-parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 6px);
  margin: 0 0 5px 6px;
  padding: 2px 6px;
  background: var(--paper-2);
  border-left: 2px solid var(--list-color, var(--line-strong));
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
}
.card-parent:hover { color: var(--ink); }
.card-parent-arrow { flex: 0 0 auto; opacity: 0.7; }
.card-parent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.card-title {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  padding-left: 6px;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-top: 6px;
  padding-left: 6px;
}
.card-meta .pause-reason {
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-2);
  font-weight: 350;
}

/* Animation: ink redraw */
@keyframes ink-fade {
  from { opacity: 0; filter: blur(0.4px); }
  to   { opacity: 1; filter: blur(0); }
}
.task, #list-view > .section-title, #list-view > .view-header { animation: ink-fade 220ms ease-out both; }

/* ----------- Print ----------- */
@media print {
  html, body {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #000;
  }
  body {
    display: block;
  }
  #sidebar,
  #detail,
  #capture,
  .view-controls,
  .task-disclosure {
    display: none !important;
  }
  #main {
    display: block;
    overflow: visible;
  }
  #list-view {
    overflow: visible;
    padding: 0;
  }
  .view-header {
    margin-bottom: 16px;
  }
  .view-title { font-size: 22px; }
  .task {
    break-inside: avoid;
    page-break-inside: avoid;
    border-bottom: 1px solid #ddd;
  }
  /* Hide the left-edge list-color stripe on both list rows and kanban cards.
     Paper is calmer without it. */
  .task::before,
  .kanban-card::before { display: none !important; }
  .kanban-board {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .kanban-column {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff;
  }
  /* Match the on-screen minimalism: no card chrome on paper, just the
     content with a thin underline as separator. */
  .kanban-card {
    break-inside: avoid;
    page-break-inside: avoid;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
  }
  /* Drop the chrome that doesn't make sense on paper */
  .checkbox { border-color: #888 !important; background: transparent !important; }
  /* The on-screen check is a CSS-rotated rectangle that depends on background
     colour to be visible. Browsers strip backgrounds when printing, leaving
     a ghost. Swap to a glyph so it always reads black on white. */
  .checkbox.checked {
    background: transparent !important;
    border-color: #000 !important;
  }
  .checkbox.checked::after {
    content: '✓';
    color: #000 !important;
    font: 600 11px/1 sans-serif;
    width: auto !important;
    height: auto !important;
    border: none !important;
    transform: none !important;
    position: static !important;
  }
  .task.dragging, .task.drop-target,
  .kanban-card.dragging, .kanban-column.drop-target {
    opacity: 1 !important;
    background: transparent !important;
  }
}

/* ----------- Auth ----------- */
body.auth-mode {
  display: block;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: var(--paper);
}

.auth-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 0 64px;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.auth-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-title {
  text-align: center;
  margin-bottom: 4px;
  line-height: 0;
}
.auth-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.auth-mode-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.auth-input {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease;
}
.auth-input::placeholder {
  color: var(--ink-4);
  font-style: italic;
}
.auth-input:focus { border-bottom-color: var(--ink); }
.auth-error {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #8a1d1d;
  min-height: 14px;
}
.auth-submit {
  margin-top: 8px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  transition: opacity 160ms ease;
}
.auth-submit:hover { opacity: 0.85; }

.auth-toggle {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 0;
  transition: color 160ms ease;
  text-align: left;
}
.auth-toggle:hover { color: var(--ink); }
/* Discreto, en una segunda línea, para saltar entre cuenta personal
   (email) y cuenta de empresa (usuario). */
.auth-altpath {
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  transition: color 160ms ease;
  text-align: left;
}
.auth-altpath:hover { color: var(--ink-2); }
.auth-fields { display: flex; flex-direction: column; }
.auth-legal {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  align-self: flex-start;
}
.auth-legal:hover { color: var(--ink-2); border-bottom-color: var(--line-strong); }

/* ---------------- Admin panel ---------------- */
/* El overlay anula la limitación de .modal-card para dejar el panel
   ocupar prácticamente toda la pantalla — es una herramienta de admin,
   no un diálogo. */
.admin-overlay { padding: 24px; align-items: stretch; }
.admin-card {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  height: 90vh;
  max-height: none;
  display: flex;
  flex-direction: column;
}
.admin-body {
  flex: 1;
  overflow: auto;
  margin: 8px 0 12px;
}
.admin-summary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.admin-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.admin-num { font-variant-numeric: tabular-nums; text-align: right; }
.admin-num-inline { font-variant-numeric: tabular-nums; }
.admin-quota-cell { min-width: 180px; }
.admin-quota { display: flex; flex-direction: column; gap: 4px; }
.admin-quota-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.admin-quota-bar {
  width: 100%;
  height: 4px;
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.admin-quota-fill {
  height: 100%;
  background: var(--ink-3);
  transition: width 200ms ease;
}
.admin-quota-fill.warn   { background: #c47a1d; }
.admin-quota-fill.danger { background: #8a1d1d; }
.admin-plan-badge.trial {
  background: var(--paper-3);
  color: var(--ink);
  border-color: var(--line-strong);
}

/* Editor expandible debajo de la fila — se conmuta con .is-open.
   Por defecto está colapsado (max-height 0, sin padding). Cuando se
   abre el contenido aparece como una pestaña limpia con su barra
   inferior. */
.admin-row.is-editing td { background: var(--paper-2); }
.admin-edit-row td {
  padding: 0 !important;
  border-bottom: 0;
  background: var(--paper-2);
}
.admin-edit-cell {
  /* La animación es sobre el .admin-edit-inner para no chocar con
     padding/border de la celda. */
}
.admin-edit-inner {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 18px 28px;
  padding: 0 16px;
  border-bottom: 1px solid transparent;
  transition: max-height 200ms ease, padding 200ms ease, border-color 200ms ease;
}
.admin-edit-row.is-open .admin-edit-inner {
  max-height: 280px;
  padding: 18px 16px 20px;
  border-bottom: 1px solid var(--line);
}
.admin-edit-target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 12px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.admin-edit-target-name {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}
.admin-edit-target-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
.admin-edit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}
.admin-edit-field-check { min-width: 0; }
.admin-edit-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.admin-edit-checklabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 5px;
  cursor: pointer;
}
.admin-edit-input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
}
.admin-edit-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.admin-edit-save, .admin-edit-cancel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
}
.admin-edit-save {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.admin-edit-save:hover { opacity: 0.9; }
.admin-edit-cancel {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
}
.admin-edit-cancel:hover { color: var(--ink); border-color: var(--ink); }

/* Diálogo de editar usuario (separado de la tabla). */
.admin-edit-card { max-width: 480px; }
.admin-edit-card .admin-edit-field { margin-top: 16px; }
.admin-edit-card .admin-edit-input,
.admin-edit-card select.admin-edit-input {
  width: 100%;
}
.admin-edit-sub { color: var(--ink-4); }
.admin-reset-area { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-reset-row { display: flex; gap: 8px; align-items: center; }
.admin-reset-pw {
  flex: 1;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.08em;
  padding: 10px 12px;
  background: var(--paper-3);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  user-select: all;
  word-break: break-all;
}
.admin-danger-area {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.admin-danger-btn {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: transparent;
  color: #8a1d1d;
  border: 1px solid rgba(138,29,29,0.4);
  border-radius: 2px;
  cursor: pointer;
}
.admin-danger-btn:hover {
  background: #8a1d1d;
  color: var(--paper);
  border-color: #8a1d1d;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 14px;
}
.admin-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--line-strong);
  font-weight: 400;
}
.admin-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-cell-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  margin-top: 2px;
}
.admin-cell-empty { color: var(--ink-4); }
.admin-plan-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.admin-plan-badge.free    { color: var(--ink-3); }
.admin-plan-badge.premium { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.admin-plan-badge.expired { color: var(--accent-red, #8a1d1d); border-color: rgba(138,29,29,0.3); }
.admin-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--ink-3);
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.admin-mini-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
}
.admin-mini-btn-quiet {
  background: transparent;
  color: var(--ink-2);
}
.admin-mini-btn:hover { opacity: 0.9; }
.admin-mini-input {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
}
.admin-mini-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}


/* Scrollbar minimal */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* Subtle rule above sections */
hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

/* Edit-in-place input for sidebar items */
.side-item.editing {
  padding-top: 2px; padding-bottom: 2px;
}
.side-item.editing input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  padding: 2px 0;
}

/* ---------- Dark theme ----------
   Inverted ink palette and a soft warm-black paper. The on-screen ink shades
   are dialled to keep the same hierarchy (ink > ink-2 > ink-3 > ink-4) but
   biased lighter so secondary text remains legible against the dark bg. */
body.dark {
  --paper:        #161613;
  --paper-2:      #1f1f1c;
  --paper-3:      #292925;
  --ink:          #ECECE6;
  --ink-2:        #BDBDB6;
  --ink-3:        #898982;
  --ink-4:        #5A5A55;
  --line:         rgba(255, 255, 255, 0.10);
  --line-strong:  rgba(255, 255, 255, 0.22);
}
body.dark .smart-overdue,
body.dark .smart-overdue:hover,
body.dark .smart-overdue.active,
body.dark .smart-overdue .name,
body.dark .smart-overdue .count,
body.dark .task-meta .pill.overdue,
body.dark .card-meta .pill.overdue { color: #d97a7a; }
body.dark .detail-delete { color: #d97a7a; }
body.dark .auth-error { color: #d97a7a; }
/* List-pill colors are stored per-list; soften them so they don't burn. */
body.dark .pill.list-pill { filter: brightness(1.25); }
/* The check / cancelled glyphs are drawn with the paper color — keep them
   readable by tying them to whatever paper is currently. */
body.dark .checkbox.checked::after { border-color: var(--paper); }
body.dark .checkbox.cancelled::before,
body.dark .checkbox.cancelled::after { background: var(--paper); }
/* Inputs in the modal subscribe dialog and auth screen. */
body.dark .auth-input,
body.dark .modal-card input,
body.dark .modal-card select {
  background: var(--paper-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.dark .modal-card { background: var(--paper); box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
body.dark .modal-overlay { background: rgba(0, 0, 0, 0.55); }

/* =================================================================
   Apple-style theme variant (toggle from the user menu).
   Aligned with Apple HIG: SF Pro / Avenir-style sans for content (no
   serif), pure white / Apple dark surfaces, label colors from the
   semantic palette, and livelier accent reds. Lives on `body.theme-apple`
   so it composes orthogonally with the light/dark mode.
   ================================================================= */
body.theme-apple {
  /* Light surfaces (Apple HIG: system / secondary / tertiary background) */
  --paper:        #FFFFFF;
  --paper-2:      #F2F2F7;
  --paper-3:      #E5E5EA;
  /* Label colors — opacity-encoded blacks for the soft hierarchy. */
  --ink:          #1D1D1F;
  --ink-2:        rgba(60, 60, 67, 0.85);
  --ink-3:        rgba(60, 60, 67, 0.60);
  --ink-4:        rgba(60, 60, 67, 0.30);
  --line:         rgba(60, 60, 67, 0.18);
  --line-strong:  rgba(60, 60, 67, 0.36);
  /* Sans-only typography: tries SF Compact / SF Pro first, then Apple
     condensed sans variants, and a system-ui fallback. Lower weight
     since we drop from a 350-weight serif to a regular sans. */
  --serif:        'SF Compact Display', 'SF Compact Text', -apple-system, BlinkMacSystemFont, 'Avenir Next Condensed', 'Avenir Next', 'Avenir', system-ui, sans-serif;
  --mono:         'SF Mono', ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.theme-apple.dark {
  /* Apple's recommended dark-mode surfaces */
  --paper:        #000000;
  --paper-2:      #1C1C1E;
  --paper-3:      #2C2C2E;
  --ink:          #F5F5F7;
  --ink-2:        rgba(235, 235, 245, 0.85);
  --ink-3:        rgba(235, 235, 245, 0.60);
  --ink-4:        rgba(235, 235, 245, 0.30);
  --line:         rgba(84, 84, 88, 0.65);
  --line-strong:  rgba(84, 84, 88, 0.85);
}

/* Accent colours: the Apple variant is more vivid for status/importance
   indicators. List colors stay user-defined per list. */
body.theme-apple .smart-overdue,
body.theme-apple .smart-overdue:hover,
body.theme-apple .smart-overdue.active,
body.theme-apple .smart-overdue .name,
body.theme-apple .smart-overdue .count,
body.theme-apple .task-meta .pill.overdue,
body.theme-apple .card-meta .pill.overdue { color: #FF3B30; }
body.theme-apple.dark .smart-overdue,
body.theme-apple.dark .smart-overdue:hover,
body.theme-apple.dark .smart-overdue.active,
body.theme-apple.dark .smart-overdue .name,
body.theme-apple.dark .smart-overdue .count,
body.theme-apple.dark .task-meta .pill.overdue,
body.theme-apple.dark .card-meta .pill.overdue { color: #FF453A; }
body.theme-apple .detail-delete,
body.theme-apple .auth-error { color: #FF3B30; }
body.theme-apple.dark .detail-delete,
body.theme-apple.dark .auth-error { color: #FF453A; }
body.theme-apple .comment-action.danger:hover { color: #FF3B30; }
body.theme-apple.dark .comment-action.danger:hover { color: #FF453A; }
/* The important-task dot inside calendar chips. */
body.theme-apple .mcal-task-imp { background: #FF3B30; }
body.theme-apple.dark .mcal-task-imp { background: #FF453A; }

/* Body weight in the Apple variant: SF Pro / Avenir render heavier than
   Newsreader 350, so step up to regular (400) so labels don't look too
   thin and so default italic uses still get a proper SF Pro italic. */
body.theme-apple html, body.theme-apple body { font-weight: 400; }
/* Los títulos de tarea por defecto van en 350 (ultra-light) porque
   Newsreader lo lleva bien. En el tema moderno la cara de SF Pro a 350
   se ve enfermiza, así que subimos un punto a 400 para que tenga
   cuerpo legible sin pasarse a semibold. */
body.theme-apple .task-title,
body.theme-apple .mcal-task-title { font-weight: 400; }