/* ============================================================
   PAPIRO STUDIO — Layout CSS v9
   Board, Calendar, Gantt, Filters, Admin Forms, Dashboard
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BOARD TOPBAR — Stats strip (compact, inline)
   ══════════════════════════════════════════════════════════ */
.board-stats-strip {
  display:flex; align-items:center; gap:2px;
  flex-shrink:0;
}
.bss-item {
  display:flex; align-items:center; gap:4px;
  padding:3px 7px; border-radius:var(--r-sm); cursor:default;
}
.bss-dot    { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.bss-num    { font-size:12px; font-weight:700; color:var(--text-primary); line-height:1; }
.bss-label  { font-size:10px; color:var(--text-muted); }
.bss-divider{ width:1px; height:13px; background:var(--border-md); margin:0 4px; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   BOARD FILTERBAR — Below topbar, dedicated row
   ══════════════════════════════════════════════════════════ */
.board-filterbar {
  display:flex; align-items:center; gap:8px;
  padding:8px 18px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0; min-height:44px;
}
.board-filterbar-right {
  display:flex; align-items:center; gap:6px;
  margin-left:auto; flex-shrink:0;
}

/* Filter chips */
.filter-chip-row {
  display:flex; align-items:center; gap:5px;
  flex-wrap:nowrap; overflow-x:auto; flex:1;
  scrollbar-width:none; -ms-overflow-style:none;
}
.filter-chip-row::-webkit-scrollbar { display:none; }

.filter-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:500; font-family:var(--font-sans);
  cursor:pointer; border:1px solid var(--border-md);
  background:var(--bg-elevated); color:var(--text-muted);
  transition:all var(--tr-fast); white-space:nowrap; flex-shrink:0;
}
.filter-btn::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:.45; flex-shrink:0;
}
.filter-btn:hover {
  border-color:var(--border-strong);
  color:var(--text-primary); background:var(--bg-card);
}
.filter-btn:hover::before { opacity:.8; }

/* Active network filters */
.filter-btn.active            { font-weight:600; }
.filter-btn.active::before    { opacity:1; }
.filter-btn.active.fb  { background:var(--fb-bg);  border-color:var(--fb-color);  color:var(--fb-text); }
.filter-btn.active.ig  { background:var(--ig-bg);  border-color:var(--ig-color);  color:var(--ig-text); }
.filter-btn.active.li  { background:var(--li-bg);  border-color:var(--li-color);  color:var(--li-text); }
.filter-btn.active.tt  { background:var(--tt-bg);  border-color:rgba(240,240,240,.4); color:var(--tt-text); }
.filter-btn.active.yt  { background:var(--yt-bg);  border-color:var(--yt-color);  color:var(--yt-text); }
.filter-btn.active.tw  { background:var(--tw-bg);  border-color:var(--tw-color);  color:var(--tw-text); }
.filter-btn.active.pi  { background:var(--pi-bg);  border-color:var(--pi-color);  color:var(--pi-text); }
.filter-btn.active.gn  { background:var(--gn-bg);  border-color:var(--gn-color);  color:var(--gn-text); }
/* Inactive: dot still shows network color */
.filter-btn.fb::before  { background:var(--fb-color); opacity:.6; }
.filter-btn.ig::before  { background:var(--ig-color); opacity:.6; }
.filter-btn.li::before  { background:var(--li-color); opacity:.6; }
.filter-btn.tt::before  { background:var(--tt-color); opacity:.5; }
.filter-btn.yt::before  { background:var(--yt-color); opacity:.6; }
.filter-btn.tw::before  { background:var(--tw-color); opacity:.6; }
.filter-btn.pi::before  { background:var(--pi-color); opacity:.6; }
.filter-btn.gn::before  { background:var(--gn-color); opacity:.6; }

/* Search */
.board-search-wrap {
  position:relative; display:flex; align-items:center;
}
.board-search-icon {
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--text-disabled); pointer-events:none;
  display:flex; align-items:center;
}
.board-search-input {
  padding:5px 10px 5px 30px; border-radius:var(--r-full);
  border:1px solid var(--border-md); font-size:var(--fs-xs); font-family:var(--font-sans);
  color:var(--text-primary); background:var(--bg-elevated);
  outline:none; width:160px; transition:all var(--tr-base);
}
.board-search-input:focus {
  border-color:var(--ps-red); background:var(--bg-input);
  width:200px; box-shadow:0 0 0 3px var(--ps-red-muted);
}
.board-search-input::placeholder { color:var(--text-disabled); }

/* Reset button */
.btn-reset-filters {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--r-md);
  border:1px solid var(--border-md); background:var(--bg-elevated);
  color:var(--text-muted); cursor:pointer; transition:all var(--tr-fast);
  flex-shrink:0;
}
.btn-reset-filters:hover { background:var(--bg-card); color:var(--text-primary); border-color:var(--border-strong); }
.btn-reset-filters:active { transform:rotate(180deg); }

/* Light theme filterbar */
[data-theme="light"] .board-filterbar { background:#FFFFFF; }
[data-theme="light"] .filter-btn { background:#F0F2F9; border-color:#C8CDD8; color:#5A6480; }
[data-theme="light"] .filter-btn:hover { background:#E8EBF4; color:#0D1022; }
[data-theme="light"] .board-search-input { background:#F0F2F9; border-color:#C8CDD8; }

/* ══════════════════════════════════════════════════════════
   KANBAN BOARD
   ══════════════════════════════════════════════════════════ */
.kanban-board {
  display:flex; gap:12px; padding:14px 16px 20px;
  overflow-x:auto; overflow-y:hidden; align-items:flex-start;
  flex:1; min-height:0;
}
.kanban-board::-webkit-scrollbar { height:6px; }
.kanban-board::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:var(--r-full); }

.kanban-col {
  flex:0 0 280px; min-width:280px;
  background:var(--bg-elevated); border-radius:var(--r-xl);
  border:1px solid var(--border); display:flex; flex-direction:column;
  max-height:100%;
}
.col-head {
  padding:12px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.col-head-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.col-name  { font-size:13px; font-weight:700; color:var(--text-primary); letter-spacing:-.01em; }
.col-dates { font-size:10px; color:var(--text-muted); margin-top:2px; }
.col-badge {
  font-size:11px; font-weight:700;
  background:var(--bg-card); border:1px solid var(--border);
  padding:2px 7px; border-radius:var(--r-full); color:var(--text-muted);
}

/* Progress bar */
.col-progress-wrap { display:flex; align-items:center; gap:7px; }
.col-progress-bar  {
  flex:1; height:4px; border-radius:var(--r-full);
  background:var(--bg-card); overflow:hidden;
}
.col-progress-fill { height:100%; border-radius:var(--r-full); transition:width .4s ease; }
.col-progress-label { font-size:10px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; min-width:48px; text-align:right; }

/* Cards */
.col-body {
  flex:1; overflow-y:auto; padding:8px 8px 4px;
  display:flex; flex-direction:column; gap:7px;
}
.col-body::-webkit-scrollbar { width:3px; }
.col-body::-webkit-scrollbar-thumb { background:var(--scroll-thumb); }

.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px 13px;
  cursor:pointer; transition:all var(--tr-fast);
}
.card:hover     { border-color:var(--border-md); box-shadow:var(--sh-sm); transform:translateY(-1px); }
.card.is-priority { border-left:3px solid var(--ps-red); }
.card.is-past   { opacity:.55; filter:grayscale(.4); }
.card.hidden    { display:none; }

.card-date   { font-size:10px; color:var(--text-disabled); margin-bottom:4px; font-family:var(--font-mono); }
.card-title  { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); line-height:1.4; margin-bottom:5px; letter-spacing:-.01em; }
.card-hook   { font-size:11px; color:var(--text-muted); line-height:1.4; margin-bottom:8px; font-style:italic; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:4px; flex-wrap:wrap; }
.card-tags   { display:flex; flex-wrap:wrap; gap:3px; }
.card-meta   { display:flex; align-items:center; gap:4px; flex-shrink:0; }

.card-status-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:var(--r-full);
  font-size:10px; font-weight:600;
  background:var(--bg-elevated); color:var(--text-muted);
  border:1px solid var(--border);
}
.card-paid-badge {
  font-size:10px; padding:2px 6px; border-radius:var(--r-full);
  background:var(--c-warning-bg); color:var(--c-warning);
  border:1px solid var(--c-warning-border); font-weight:600;
}

/* Light mode kanban */
[data-theme="light"] .kanban-col  { background:#EDF0F7; border-color:#D8DCE9; }
[data-theme="light"] .col-head    { border-color:#D8DCE9; }
[data-theme="light"] .card        { background:#FFFFFF; border-color:#D8DCE9; }
[data-theme="light"] .card:hover  { border-color:#BFC5D8; box-shadow:0 2px 8px rgba(0,0,0,.07); }
[data-theme="light"] .card.is-past{ background:#F6F8FC; }
[data-theme="light"] .col-badge   { background:#FFFFFF; border-color:#D8DCE9; }

/* ══════════════════════════════════════════════════════════
   CALENDAR VIEW
   ══════════════════════════════════════════════════════════ */
.calendar-view {
  flex:1; overflow-y:auto; padding:16px 20px;
  display:flex; flex-direction:column;
}
.calendar-month-title {
  font-size:var(--fs-lg); font-weight:700; color:var(--text-primary);
  letter-spacing:-.02em; margin-bottom:14px;
}
.calendar-grid {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:1px; background:var(--border-md);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-md); flex:1;
  align-content: stretch; /* celdas se estiran para llenar espacio */
}
/* Vista de rango (semana/15días): celdas más altas */
.cal-week .cal-day,
.cal-biweek .cal-day {
  min-height: 160px;
}
.cal-header-cell {
  background:var(--bg-elevated); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:700; text-align:center;
  padding:9px 4px; text-transform:uppercase; letter-spacing:.07em;
}
.cal-day {
  background:var(--bg-card); min-height:110px; padding:7px;
  display:flex; flex-direction:column; gap:3px;
}
.cal-day.is-other-month { background:var(--bg-page); opacity:.6; }
.cal-day.is-today       { background:rgba(59,130,246,.08); }
.cal-day-num {
  font-size:11px; font-weight:600; color:var(--text-muted);
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; flex-shrink:0; align-self:flex-start;
}
.cal-day.is-today .cal-day-num { background:var(--ps-red); color:#fff; font-weight:700; }
.cal-event {
  font-size:11px; font-weight:500; padding:3px 6px;
  border-radius:var(--r-xs); cursor:pointer; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity var(--tr-fast); border-left:2px solid transparent;
}
.cal-event:hover { opacity:.8; transform:none; }

/* Light mode calendar */
[data-theme="light"] .cal-day             { background:#FFFFFF; }
[data-theme="light"] .cal-day.is-other-month { background:#F0F2F8; }
[data-theme="light"] .cal-header-cell     { background:#EDF0F7; }

/* ══════════════════════════════════════════════════════════
   GANTT VIEW
   ══════════════════════════════════════════════════════════ */
.gantt-view { flex:1; overflow:auto; padding:16px 20px; }
.gantt-table { width:100%; min-width:900px; border-collapse:collapse; }
.gantt-table th {
  background:var(--bg-elevated); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:700; padding:10px 12px; text-align:left;
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  border-bottom:2px solid var(--border-md);
}
.gantt-table td {
  padding:8px 12px; border-bottom:1px solid var(--border);
  font-size:var(--fs-sm); vertical-align:middle; color:var(--text-primary);
}
.gantt-table tr:hover td { background:var(--bg-elevated); }
.gantt-table tr.is-past td { opacity:.5; }
.gantt-bar-cell   { width:55%; padding:6px 12px !important; }
.gantt-bar-track  { height:22px; background:var(--bg-elevated); border-radius:var(--r-sm); position:relative; overflow:hidden; border:1px solid var(--border); }
.gantt-bar {
  position:absolute; top:0; height:100%; border-radius:var(--r-sm);
  display:flex; align-items:center; padding:0 7px;
  font-size:10px; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden;
}
.gantt-today-line {
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--ps-red); opacity:.8;
}

/* ══════════════════════════════════════════════════════════
   ADMIN FORM PANELS — tabbed
   ══════════════════════════════════════════════════════════ */
.form-panel {
  background:var(--bg-card);
  border:1px solid var(--border-md);
  border-radius:var(--r-xl);
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:var(--sh-sm);
  /* Oculto por defecto vía style="display:none" en HTML — JS abre con style.display='' */
}

/* fp-body: tabs secundarias — ocultas via style="display:none" en HTML, JS las controla */
[data-theme="light"] .form-panel {
  background:#FFFFFF;
  border-color:#D8DCE9;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.fp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px; background:var(--bg-card);
}
[data-theme="light"] .fp-header { background:#FFFFFF; }
.fp-title {
  font-size:var(--fs-md); font-weight:700; color:var(--text-primary);
  letter-spacing:-.02em;
}
.fp-close {
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  font-size:14px; padding:4px 6px; border-radius:var(--r-sm); line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tr-fast), color var(--tr-fast);
}
.fp-close:hover { background:var(--bg-elevated); color:var(--text-primary); }

.fp-tabs {
  display:flex; padding:0 18px;
  border-bottom:2px solid var(--border);
  gap:0; background:var(--bg-card);
}
[data-theme="light"] .fp-tabs { background:#FFFFFF; border-bottom-color:#D8DCE9; }
.fp-tab {
  padding:9px 18px; font-size:var(--fs-xs); font-weight:600;
  font-family:inherit; border:none; border-bottom:2px solid transparent;
  background:none; color:var(--text-muted); cursor:pointer;
  margin-bottom:-1px; white-space:nowrap; letter-spacing:.01em;
  transition:color var(--tr-fast), border-color var(--tr-fast);
  line-height:1; appearance:none; -webkit-appearance:none;
}
.fp-tab:hover  { color:var(--text-primary); }
.fp-tab.active { color:var(--ps-red); border-bottom-color:var(--ps-red); font-weight:700; }
[data-theme="light"] .fp-tab        { color:#5A6480; }
[data-theme="light"] .fp-tab:hover  { color:#0D1022; }
[data-theme="light"] .fp-tab.active { color:var(--ps-red); }

.fp-body {
  padding:18px 20px; max-height:60vh; overflow-y:auto;
  background:var(--bg-card);
}
.fp-body::-webkit-scrollbar { width:4px; }
.fp-body::-webkit-scrollbar-thumb { background:var(--border-md); border-radius:var(--r-full); }
[data-theme="light"] .fp-body { background:#FFFFFF; }

.fp-admin-notice {
  font-size:var(--fs-xs); color:var(--c-warning);
  background:var(--c-warning-bg); border:1px solid var(--c-warning-border);
  border-radius:var(--r-md); padding:8px 12px; margin-bottom:16px;
}
.form-panel-sub {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); margin:14px 0 8px;
}
.form-panel-sub:first-child { margin-top:0; }

.fp-footer {
  display:flex; gap:8px; align-items:center;
  padding:12px 20px;
  border-top:1px solid var(--border);
  background:var(--bg-elevated);
}
[data-theme="light"] .fp-footer {
  background:#F0F2F9; border-top-color:#D8DCE9;
}

/* Admin misc */
.field-select-dark {
  background:rgba(255,255,255,.07); color:#E2E4EF;
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm);
  padding:5px 8px; font-size:var(--fs-xs); font-family:var(--font-sans);
  cursor:pointer; width:100%;
}
.field-select-dark option, .field-select-dark optgroup {
  background:#1A1D2E; color:#E2E4EF;
}
.field-input-dark {
  background:var(--bg-elevated); color:var(--text-primary);
  border:1px solid var(--border-md); border-radius:var(--r-sm);
  padding:5px 8px; font-size:var(--fs-xs); font-family:var(--font-sans);
}
.proj-user-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD ADMIN STATS
   ══════════════════════════════════════════════════════════ */
.dash-alert {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:var(--r-md); margin-bottom:7px;
  font-size:var(--fs-xs);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   SPRINT 5 — Fase 3: Kanban, Filterbar, Calendario, Gantt mobile
   ══════════════════════════════════════════════════════════════ */

/* ── Kanban: scroll-snap + peek en mobile ── */
@media (max-width: 768px) {
  .kanban-board {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 16px;
    gap: 10px;
  }
  .kanban-col {
    flex: 0 0 calc(100vw - 48px);
    min-width: calc(100vw - 48px);
    scroll-snap-align: start;
    scroll-margin-left: 12px;
  }
}
@media (max-width: 480px) {
  .kanban-col {
    flex: 0 0 calc(100vw - 32px);
    min-width: calc(100vw - 32px);
  }
}

/* ── Filterbar: 2 filas en mobile ── */
@media (max-width: 768px) {
  .board-filterbar {
    flex-wrap: wrap;
    padding: 6px 12px;
    gap: 6px;
    min-height: auto;
  }
  .board-filterbar-right {
    width: 100%;
    order: 1;
    margin-left: 0;
  }
  .filter-chip-row {
    width: 100%;
    order: 2;
  }
  .board-search-wrap    { flex: 1; }
  .board-search-input   { width: 100% !important; }
  .board-search-input:focus { width: 100% !important; }
}

/* ── Calendario: ocultar modos mes y biweek en mobile ── */
@media (max-width: 768px) {
  .cal-mode-btn[onclick*="'month'"],
  .cal-mode-btn[onclick*="month"],
  .cal-mode-btn[onclick*="biweek"] { display: none; }
  .cal-day { min-height: 70px; }
  .cal-event { font-size: 10px; padding: 2px 4px; }
}

/* ── Gantt: layout mobile tocable ── */
@media (max-width: 768px) {
  .gantt-table { min-width: unset; width: 100%; }
  /* Ocultar columnas Fin y col3 (asignado/redes) en mobile */
  .gantt-table th:nth-child(3),
  .gantt-table td:nth-child(3),
  .gantt-table th:nth-child(4),
  .gantt-table td:nth-child(4) { display: none; }
  .gantt-bar-track { height: 32px; }
  .gantt-bar       { font-size: 11px; padding: 0 8px; }
  .gantt-table td:first-child {
    white-space: normal;
    max-width: 140px;
    font-size: 11px;
  }
  .gantt-bar-cell { width: 45% !important; }
}

/* ── Admin form panels mobile ── */
@media (max-width: 768px) {
  .fp-body { max-height: 50dvh; }
}

/* ── Momentum scroll en contenedores clave ── */
.col-body,
.modal-body,
.cal-list-wrap,
.sidebar-nav {
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════
   SPRINT 4 — Kanban scroll dots (mobile position indicator)
   ══════════════════════════════════════════════════════════════ */
.kanban-scroll-dots {
  display: none; /* oculto en desktop */
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px 0 2px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .kanban-scroll-dots { display: flex; }
}
.ksd {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-md);
  transition: background .2s, width .2s, border-radius .2s;
  flex-shrink: 0;
}
.ksd.active {
  background: var(--ps-red);
  width: 16px;
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════
   CORRECCIONES v28: Responsive Mobile + Sidebar collapse
   ════════════════════════════════════════════════════════════ */

/* Mobile menu button handler */
#mobile-menu-btn {
  display: none;
}

@media (max-width: 768px) {
  #mobile-menu-btn {
    display: flex;
  }

  /* Sidebar hidden by default on mobile */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Overlay para cerrar sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
  }

  .sidebar-overlay.mobile-open {
    display: block;
  }

  /* Main area con sidebar abierto */
  .main-area {
    width: 100%;
  }

  /* Topbar responsive */
  .topbar {
    padding: 10px 12px;
  }

  .topbar-center {
    flex: 0; /* Ocultar en mobile, mostrar solo en mobile-menu */
  }

  /* Board content responsive */
  .view-panel {
    padding: 12px;
  }

  /* Kanban responsive */
  .kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: calc(100vh - 120px);
    padding: 12px;
  }

  .kanban-col {
    flex: 0 0 280px;
    min-height: 200px;
  }

  /* Calendar responsive */
  .calendar-view {
    font-size: 12px;
  }

  .calendar-view table {
    font-size: 11px;
  }

  /* Grid/List responsive */
  .proj-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .proj-list-item {
    padding: 10px;
  }

  /* Font scale controls hidden on mobile */
  .sidebar-font-scale {
    display: none;
  }
}

@media (max-width: 640px) {
  .sidebar {
    width: 100%;
  }

  .topbar {
    padding: 8px 10px;
  }

  #topbar-title {
    font-size: 14px;
  }

  .kanban-col {
    flex: 0 0 240px;
  }

  /* Hide some topbar elements on small screens */
  .topbar-right {
    gap: 8px;
  }
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: 240px;
  }

  .kanban-col {
    flex: 0 0 240px;
  }
}


/* ════════════════════════════════════════════════════════════
   CORRECCIÓN v29: Mobile 9:16 Aggressive Responsive
   ════════════════════════════════════════════════════════════ */

/* Ultra-mobile: 320px to 480px */
@media (max-width: 480px) {
  /* Topbar scaling */
  .topbar {
    padding: 8px 10px;
    gap: 8px;
  }

  #topbar-title {
    font-size: 14px;
    font-weight: 600;
  }

  /* User button compact */
  .tb-user-btn {
    padding: 4px 6px;
    gap: 4px;
    font-size: 12px;
  }

  .tb-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .tb-user-name {
    display: none; /* Hide name on ultra-mobile */
  }

  /* Kanban columns narrower */
  .kanban-col {
    flex: 0 0 220px;
    min-width: 220px;
  }

  /* Card text smaller */
  .card-title {
    font-size: 12px;
  }

  .card-date {
    font-size: 10px;
  }

  /* Sidebar narrower on open */
  .sidebar {
    width: 100% !important;
  }

  /* Main content full width */
  .main-area {
    width: 100%;
  }

  /* Breadcrumb hidden */
  #breadcrumb {
    display: none;
  }

  /* Stats hidden */
  #conn-indicators {
    display: none !important;
  }

  /* View buttons stacked */
  .vista-btn {
    font-size: 11px;
    padding: 4px 8px;
    flex: 1;
  }
}

/* Small mobile: 481px to 640px */
@media (481px) and (max-width: 640px) {
  .topbar {
    padding: 10px 12px;
    gap: 10px;
  }

  #topbar-title {
    font-size: 15px;
  }

  .kanban-col {
    flex: 0 0 240px;
  }

  .card-title {
    font-size: 13px;
  }

  .sidebar {
    width: 280px;
  }
}

/* Tablet: 641px to 1024px */
@media (641px) and (max-width: 1024px) {
  .kanban-col {
    flex: 0 0 300px;
  }

  .topbar {
    padding: 12px 16px;
  }

  #conn-indicators {
    display: flex !important;
  }

  .tb-user-name {
    display: inline;
  }

  .sidebar {
    width: 280px;
  }
}

/* Desktop: 1025px+ */
@media (min-width: 1025px) {
  .kanban-col {
    flex: 0 0 340px;
  }

  #topbar-title {
    font-size: 18px;
  }

  .sidebar {
    width: 280px;
  }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
  .topbar {
    padding: 6px 10px;
    gap: 8px;
  }

  #topbar-title {
    font-size: 13px;
  }

  .sidebar-font-scale {
    display: none;
  }

  .sidebar-controls {
    flex-direction: row;
    gap: 4px;
  }
}

/* Fix para Safari iOS */
@supports (-webkit-touch-callout: none) {
  .topbar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .sidebar {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  .main-area {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  button, a {
    min-height: 44px;
    min-width: 44px;
  }

  .card {
    padding: 12px;
  }

  .col-head {
    padding: 12px;
  }
}