/* Notion-Style Theme System */
:root {
  --bg-main: #fcfcfb;
  --bg-sidebar: #f7f6f3;
  --bg-card: #ffffff;
  --bg-hover: #efeee9;
  --bg-subtle: #f1f0ec;
  --border-light: rgba(55, 53, 47, 0.09);
  --border-strong: rgba(55, 53, 47, 0.16);

  --text-main: #37352f;
  --text-muted: #787774;
  --text-light: #9b9a97;

  /* Notion Stage Column Colors */
  --column-gray: rgba(227, 226, 224, 0.5);
  --column-blue: rgba(211, 229, 239, 0.6);
  --column-purple: rgba(232, 222, 238, 0.6);
  --column-amber: rgba(250, 222, 201, 0.6);
  --column-emerald: rgba(219, 237, 219, 0.6);
  --column-pink: rgba(245, 224, 233, 0.6);

  /* Notion Tag Pill Colors */
  --tag-blue-bg: #e0f2fe; --tag-blue-txt: #0369a1;
  --tag-purple-bg: #f3e8ff; --tag-purple-txt: #6b21a8;
  --tag-amber-bg: #fef3c7; --tag-amber-txt: #b45309;
  --tag-emerald-bg: #d1fae5; --tag-emerald-txt: #047857;
  --tag-red-bg: #ffe4e6; --tag-red-txt: #be123c;
  --tag-gray-bg: #f3f4f6; --tag-gray-txt: #4b5563;

  --shadow-sm: 0 1px 3px rgba(15, 15, 15, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 15, 15, 0.14);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark Mode Overrides */
body.dark-mode {
  --bg-main: #191919;
  --bg-sidebar: #202020;
  --bg-card: #252525;
  --bg-hover: #2c2c2c;
  --bg-subtle: #2d2d2d;
  --border-light: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text-main: #e3e3e3;
  --text-muted: #9b9b9b;
  --text-light: #737373;

  --column-gray: rgba(255, 255, 255, 0.05);
  --column-blue: rgba(56, 189, 248, 0.15);
  --column-purple: rgba(192, 132, 252, 0.15);
  --column-amber: rgba(251, 191, 36, 0.15);
  --column-emerald: rgba(52, 211, 153, 0.15);

  --tag-blue-bg: rgba(3, 105, 161, 0.25); --tag-blue-txt: #7dd3fc;
  --tag-purple-bg: rgba(107, 33, 168, 0.25); --tag-purple-txt: #e9d5ff;
  --tag-amber-bg: rgba(180, 83, 9, 0.25); --tag-amber-txt: #fde68a;
  --tag-emerald-bg: rgba(4, 120, 87, 0.25); --tag-emerald-txt: #a7f3d0;
  --tag-red-bg: rgba(190, 18, 60, 0.25); --tag-red-txt: #fecdd3;
  --tag-gray-bg: rgba(75, 85, 99, 0.25); --tag-gray-txt: #e5e7eb;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
}

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  font-size: 14px;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* App Layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for modern mobile browsers */
}

/* Header Navbar */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-light);
  gap: 16px;
  flex-wrap: wrap;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}

.brand-title-group h1 {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  color: var(--text-main);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: var(--bg-subtle);
  color: var(--text-muted);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
}

.status-badge.demo .status-dot {
  background-color: #f59e0b;
}

/* Notion Views Bar Tabs */
.notion-views-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
}

.views-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.view-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.view-tab:hover {
  color: var(--text-main);
  background-color: var(--bg-hover);
}

.view-tab.active {
  color: var(--text-main);
  font-weight: 600;
  border-bottom-color: #2383e2;
}

/* Toolbar Controls */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Partner Filter Bar */
.partner-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  background-color: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-muted);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.partner-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-main);
}

.partner-btn.active {
  background-color: #2383e2;
  color: #ffffff;
  border-color: #1b74cb;
  font-weight: 600;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper svg {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
}

.search-input {
  padding: 6px 12px 6px 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
  width: 180px;
  transition: all 0.15s ease;
}

.search-input:focus {
  width: 240px;
  background-color: var(--bg-card);
  border-color: var(--border-strong);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-main);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  background-color: var(--bg-hover);
}

.btn-primary {
  background-color: #2383e2;
  color: #ffffff;
  border-color: #1b74cb;
}

.btn-primary:hover {
  background-color: #1d70c4;
}

.btn-danger {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #dc2626;
}

.btn-danger:hover {
  background-color: #dc2626;
}

.btn-icon {
  padding: 6px;
  border-radius: var(--radius-md);
}

/* Floating Undo Toast Notification */
.undo-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.undo-toast {
  pointer-events: auto;
  background-color: var(--text-main);
  color: var(--bg-main);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.undo-btn-action {
  background-color: #2383e2;
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.undo-btn-action:hover {
  background-color: #1d70c4;
}

/* Kanban Workspace */
.kanban-workspace {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
}

.kanban-board {
  display: flex;
  gap: 16px;
  height: 100%;
  align-items: flex-start;
}

/* Add Column Button */
.add-column-btn {
  width: 280px;
  min-width: 280px;
  padding: 12px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--bg-sidebar);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.add-column-btn:hover {
  border-color: #2383e2;
  color: #2383e2;
  background-color: rgba(35, 131, 226, 0.05);
}

/* Column Styling */
.kanban-column {
  width: 290px;
  min-width: 290px;
  max-height: 100%;
  background-color: var(--bg-sidebar);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  transition: background-color 0.15s ease;
}

.kanban-column.drag-over {
  background-color: var(--bg-hover);
  border-color: #2383e2;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}

.column-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-color-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.column-color-indicator:hover {
  transform: scale(1.3);
}

.column-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
}

.column-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 10px;
}

.column-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.column-move-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.column-move-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-main);
}

.column-delete-btn:hover {
  color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Cards Drop Area */
.cards-container {
  flex: 1;
  overflow-y: auto;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 50px;
}

.cards-container::-webkit-scrollbar {
  width: 4px;
}
.cards-container::-webkit-scrollbar-thumb {
  background-color: var(--border-light);
  border-radius: 4px;
}

/* Notion Card Component */
.notion-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.notion-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.notion-card.dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.card-cover {
  width: calc(100% + 24px);
  height: 110px;
  margin: -12px -12px 10px -12px;
  object-fit: cover;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-word;
  flex: 1;
}

.edit-title-icon {
  opacity: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  transition: opacity 0.15s ease;
}

.notion-card:hover .edit-title-icon {
  opacity: 1;
}

.inline-title-input {
  width: 100%;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid #2383e2;
  background-color: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  outline: none;
}

/* Progress Bar Component */
.card-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.progress-track {
  flex: 1;
  height: 6px;
  background-color: var(--bg-subtle);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #2383e2;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-fill.complete {
  background-color: #10b981;
}

.progress-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 28px;
  text-align: right;
}

/* Card Meta Footer */
.card-meta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.meta-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.priority-star {
  font-size: 10px;
  font-weight: 600;
  color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.15);
  padding: 1px 6px;
  border-radius: 10px;
}

.deadline-pill {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deadline-pill.overdue {
  color: #ef4444;
  font-weight: 600;
}

.subtasks-pill {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* User Avatars */
.user-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.avatar-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  color: #ffffff;
}

.avatar-badge.abelardo { background-color: #3b82f6; }
.avatar-badge.regina { background-color: #ec4899; }
.avatar-badge.both { background-color: #8b5cf6; }

/* Tag Pills */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.tag-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

.tag-blue { background-color: var(--tag-blue-bg); color: var(--tag-blue-txt); }
.tag-purple { background-color: var(--tag-purple-bg); color: var(--tag-purple-txt); }
.tag-amber { background-color: var(--tag-amber-bg); color: var(--tag-amber-txt); }
.tag-emerald { background-color: var(--tag-emerald-bg); color: var(--tag-emerald-txt); }
.tag-red { background-color: var(--tag-red-bg); color: var(--tag-red-txt); }
.tag-gray { background-color: var(--tag-gray-bg); color: var(--tag-gray-txt); }
.tag-pink { background-color: #fce7f3; color: #be185d; }
.tag-indigo { background-color: #e0e7ff; color: #4338ca; }

/* Quick Add Button inside Column */
.quick-add-btn {
  width: 100%;
  padding: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.quick-add-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-main);
}

.quick-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid #2383e2;
}

.quick-add-input {
  width: 100%;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
}

/* Notion Table & Gallery Views */
.notion-table-view {
  flex: 1;
  padding: 20px 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.notion-table {
  width: 100%;
  /* Sin esto, en pantallas angostas el layout "auto" podía comprimir columnas
     a un ancho ilegible en vez de activar el scroll horizontal del wrapper. */
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.notion-table th {
  padding: 10px 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-sidebar);
}

.notion-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
  cursor: pointer;
}

.notion-table tr:hover td {
  background-color: var(--bg-hover);
}

.notion-gallery-view {
  flex: 1;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  overflow-y: auto;
}

.gallery-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.gallery-card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background-color: var(--bg-subtle);
}

.gallery-card-body {
  padding: 12px;
}

/* File Attachments Component */
.upload-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  background-color: var(--bg-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.upload-dropzone:hover {
  border-color: #2383e2;
  background-color: rgba(35, 131, 226, 0.05);
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.attachment-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
  background-color: var(--bg-subtle);
}

.attachment-img-preview {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.attachment-doc-badge {
  padding: 16px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.attachment-footer {
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  background-color: var(--bg-card);
}

.set-cover-btn {
  background: none;
  border: none;
  color: #2383e2;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

/* Sub-Kanban inside Card Modal */
.sub-kanban-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  background-color: var(--bg-sidebar);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid var(--border-light);
}

.sub-kanban-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-kanban-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.sub-kanban-col {
  background-color: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 8px;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  transition: background-color 0.15s ease;
}

.sub-kanban-col-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-kanban-card {
  background-color: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: grab;
  user-select: none;
  border: 1px solid var(--border-light);
  transition: all 0.15s ease;
  position: relative;
}

.sub-kanban-card:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-strong);
}

.sub-card-text {
  flex: 1;
  cursor: pointer;
  word-break: break-word;
}

.delete-sub-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0.7;
  transition: all 0.15s ease;
}

.sub-kanban-card:hover .delete-sub-btn {
  opacity: 1;
}

.delete-sub-btn:hover {
  color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.15);
}

/* Modal Windows */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  width: 92%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(10px);
  transition: transform 0.2s ease;
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
}

.form-control:focus {
  border-color: #2383e2;
  background-color: var(--bg-card);
}

/* Cover Image Banner & Component */
.modal-cover-banner {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
}

.cover-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  gap: 8px;
}

.cover-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  background-color: var(--bg-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cover-dropzone:hover {
  border-color: #2383e2;
  background-color: rgba(35, 131, 226, 0.05);
}

.cover-quick-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.cover-thumb-option {
  width: 52px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.cover-thumb-option:hover {
  transform: scale(1.08);
  border-color: #2383e2;
}

.cover-thumb-option.active {
  border-color: #10b981;
}

/* ============================================================
   📱 Universal 100% Responsive & Anti-Overlap Architecture
   ============================================================ */

/* Tablet Screens (768px - 1024px) */
@media (max-width: 1024px) {
  .app-header {
    padding: 10px 16px;
  }
  .notion-views-bar, .partner-filter-bar {
    padding: 6px 16px;
  }
  .kanban-workspace {
    padding: 14px 16px;
  }
  .kanban-column {
    width: 270px;
    min-width: 270px;
  }
}

/* Mobile Screens (< 768px) */
@media (max-width: 768px) {
  /* Prevent iOS Safari 16px Input Auto-Zoom Trap */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Header Navbar Stacking */
  .app-header {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .brand-section {
    width: 100%;
    justify-content: space-between;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  #project-select {
    flex: 1;
    max-width: 170px;
  }

  .notion-views-bar {
    padding: 0 12px;
  }

  .partner-filter-bar {
    padding: 6px 12px;
  }

  .search-input-wrapper {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .search-input:focus {
    width: 100%;
  }

  /* Kanban Touch Scroll */
  .kanban-workspace {
    padding: 10px 12px;
  }

  .kanban-board {
    gap: 12px;
    scroll-snap-type: x mandatory;
  }

  .kanban-column {
    width: 84vw;
    min-width: 270px;
    scroll-snap-align: center;
  }

  /* Always show edit title pencil icon on mobile touch screens */
  .edit-title-icon {
    opacity: 0.85 !important;
  }

  /* Modal Optimization for Mobile */
  .modal-overlay {
    padding: 10px;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    padding: 14px;
    margin: 0;
    max-height: 94vh;
    border-radius: 12px;
  }

  .modal-cover-banner {
    height: 120px;
  }

  /* Stack 3-column modal form grids vertically on mobile */
  .modal-card div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Stack Sub-Kanban columns vertically for touch clarity */
  .sub-kanban-board {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sub-kanban-col {
    min-height: 80px;
  }

  /* Dark Mode Toggle Button Styling on Mobile */
  #dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
  }

  /* Toast Notification positioning on mobile */
  .undo-toast-container {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }

  .undo-toast {
    justify-content: space-between;
    width: 100%;
  }
}

/* Notion Block Content Builder */
.notion-block-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  background-color: var(--bg-sidebar);
  border-radius: var(--radius-md);
  padding: 14px;
  border: 1px solid var(--border-light);
}

.notion-builder-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.notion-block-card {
  position: relative;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.notion-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Callout Block Styling */
.notion-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background-color: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.notion-callout-icon {
  font-size: 20px;
  line-height: 1;
}

/* Notion Grid Table Block Styling */
/* Contenedor de scroll propio: si la tabla no cabe, se desplaza SOLO ella, no
   el modal completo (antes el modal entero se corría en horizontal). */
.notion-grid-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 6px;
  border-radius: var(--radius-sm);
}

.notion-grid-table {
  width: 100%;
  min-width: 420px;
  /* table-layout:fixed hace el ancho de columnas predecible. En modo "auto"
     (por defecto), un <input> sin ancho propio deja el reparto de columnas a
     un algoritmo heurístico del navegador que en la práctica podía asentarse
     en el ancho máximo de contenido y desbordar el contenedor. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 0;
}

.notion-grid-table th:first-child,
.notion-grid-table td:first-child {
  width: 34%;
}

.notion-grid-table th, .notion-grid-table td {
  border: 1px solid var(--border-light);
  padding: 6px 10px;
}

.notion-grid-table th {
  background-color: var(--bg-sidebar);
  font-weight: 600;
  color: var(--text-muted);
}

/* Los inputs deben llenar su celda en vez de usar el ancho intrínseco del
   navegador (~20 caracteres, ~200px) — esa era la causa real del desborde. */
.notion-grid-table td input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Carousel Slider Block */
.notion-carousel-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}

.carousel-slide-item {
  width: 160px;
  min-width: 160px;
  height: 110px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-light);
}



/* ============================================================
   v5.5.0 — Resumen del proyecto, edición inline y pulido visual
   ============================================================ */

/* Franja de resumen del proyecto */
.project-summary {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 12px 20px;
  margin: 0 0 2px;
  background-color: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-light);
}

.project-summary.is-hidden { display: none; }

.summary-metrics { display: flex; gap: 18px; }

.summary-metric {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.summary-metric.is-alert .summary-value { color: #ef4444; }
.summary-metric.is-warn .summary-value { color: #f59e0b; }

.summary-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.summary-progress-group { min-width: 170px; flex: 0 1 220px; }

.summary-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.summary-percent {
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
  font-variant-numeric: tabular-nums;
}

/* Mini gráfico de barras por etapa */
.summary-stages {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 46px;
}

.summary-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 42px;
}

.summary-stage-bar {
  width: 100%;
  min-height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--border-light);
  border-bottom: none;
  transition: height 0.3s ease;
}

.summary-stage-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.summary-stage-name {
  font-size: 9px;
  color: var(--text-light);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-partners { display: flex; gap: 10px; }

.summary-partner {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 3px 10px;
}

/* Edición inline */
.editable-pill {
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.editable-pill:hover {
  box-shadow: 0 0 0 2px var(--border-strong);
}

.editable-pill.is-neutral {
  color: var(--text-light);
  background-color: transparent;
  border: 1px dashed var(--border-strong);
}

.inline-edit-control {
  font-family: var(--font-family);
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #2383e2;
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.18);
  outline: none;
  max-width: 100%;
  box-sizing: border-box;
}

/* Dentro de una celda de tabla SÍ debe llenarla: sin esto, un <input>/<select>
   dentro de una <td> pide su ancho intrínseco de navegador (~200px) durante
   el cálculo de columnas, ensanchando la tabla de más al editar. max-width
   por sí solo no evita esa petición inicial de espacio.
   Fuera de una tabla (p. ej. las píldoras editables de la tarjeta Kanban, que
   viven en un contenedor flex) NO se aplica: ahí el control debe conservar su
   tamaño de contenido para no romper la fila de píldoras. */
.cell-editable .inline-edit-control {
  width: 100%;
}

.cell-editable { cursor: pointer; }
.cell-editable:hover { background-color: var(--bg-hover); }
.cell-value.is-overdue { color: #ef4444; font-weight: 600; }

/* Cabeceras ordenables de la tabla */
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.sortable-th:hover { background-color: var(--bg-hover); }
.sortable-th.is-sorted { color: var(--text-main); font-weight: 700; }

.sort-arrow {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  color: #2383e2;
}

/* Estados vacíos */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.empty-state-icon { font-size: 40px; opacity: 0.65; }

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.empty-state-detail {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 340px;
}

.empty-state-action { margin-top: 8px; }

.kanban-board.is-empty { display: block; }

/* Metadatos en las tarjetas de galería */
.gallery-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  font-size: 11px;
  color: var(--text-muted);
}

.gallery-card-meta .is-overdue { color: #ef4444; font-weight: 600; }

/* Arrastre: destino visible */
.kanban-column.drag-over {
  outline: 2px dashed #2383e2;
  outline-offset: -3px;
  background-color: var(--column-blue);
}

.kanban-column.drag-over .cards-container::after {
  content: 'Soltar aquí';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 6px;
  border: 2px dashed #2383e2;
  border-radius: var(--radius-md);
  color: #2383e2;
  font-size: 11px;
  font-weight: 600;
  animation: dropPulse 1.2s ease-in-out infinite;
}

@keyframes dropPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.notion-card.dragging {
  opacity: 0.45;
  transform: rotate(1.5deg) scale(0.98);
}

.notion-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* Esqueleto de carga */
.skeleton-column { pointer-events: none; }

.skeleton-bar, .skeleton-card {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-hover) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.3s ease-in-out infinite;
}

.skeleton-header { height: 20px; margin-bottom: 12px; width: 65%; }
.skeleton-card { height: 76px; margin-bottom: 8px; }

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

/* Notificaciones */
.undo-toast {
  animation: toastIn 0.22s ease-out;
}

.undo-toast.toast-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.undo-toast.toast-success { background-color: #10b981; }
.undo-toast.toast-error { background-color: #ef4444; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Transición al cambiar de vista */
.kanban-board, .notion-table-view, .notion-gallery-view {
  animation: viewFadeIn 0.22s ease-out;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kanban-board, .notion-table-view, .notion-gallery-view,
  .undo-toast, .skeleton-bar, .skeleton-card,
  .kanban-column.drag-over .cards-container::after {
    animation: none;
  }
}

/* Resumen y tabla en móvil */
@media (max-width: 768px) {
  .project-summary {
    gap: 14px;
    padding: 10px 12px;
    overflow-x: auto;
  }

  .summary-stages { display: none; }
  .summary-progress-group { flex: 1 1 130px; min-width: 130px; }
}

/* ============================================================
   Secciones opcionales del modal de detalle
   ============================================================ */
.section-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--border-strong);
  border-bottom: 1px dashed var(--border-strong);
}

.section-toggle-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

.section-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, border-style 0.15s ease;
}

.section-toggle-chip:hover {
  background-color: var(--bg-hover);
}

/* Sección oculta: la píldora queda tenue y punteada, como una casilla sin
   marcar, para que sea obvio con un vistazo cuáles secciones están activas. */
.section-toggle-chip.is-off {
  border-style: dashed;
  background-color: transparent;
  color: var(--text-light);
  opacity: 0.6;
}

.section-toggle-chip.is-off:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .section-toggle-bar {
    gap: 5px;
  }
  .section-toggle-chip {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ============================================================
   Indicador de sincronización con el servidor
   ============================================================ */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}

.sync-badge.is-online {
  color: #047857;
  background-color: var(--tag-emerald-bg);
  border-color: transparent;
}

/* Aviso claro: lo que se esté editando no le llega al otro socio. */
.sync-badge.is-offline {
  color: #b45309;
  background-color: var(--tag-amber-bg);
  border-color: transparent;
}

@media (max-width: 768px) {
  .sync-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
}