/* ============================================================
   Kanban — Sistema de diseño "Taller editorial cálido"
   Display: Fraunces · Cuerpo: Hanken Grotesk · Acento: terracota
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Superficies cálidas */
  --paper:       #f4efe4;
  --paper-2:     #ece5d6;
  --surface:     #fffdf8;
  --surface-2:   #faf6ec;

  /* Tinta y texto */
  --ink:         #221d17;
  --ink-soft:    #4b4339;
  --muted:       #8c8373;

  /* Líneas */
  --line:        #e4dccb;
  --line-strong: #d6ccb6;

  /* Acento terracota */
  --accent:      #c5512a;
  --accent-deep: #a53f1d;
  --accent-tint: #f6e7df;

  /* Funcionales (armonizados al tema cálido) */
  --gold:    #b07d2c;
  --sage:    #5c7d5f;
  --slate:   #5b6b80;
  --ok:      #3f7d54;
  --danger:  #bb3b2e;

  /* Compatibilidad con nombres previos */
  --bg:      var(--paper);
  --text:    var(--ink);
  --border:  var(--line);
  --primary: var(--accent);

  --radius:    14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(34,29,23,.06);
  --shadow:    0 8px 26px -14px rgba(34,29,23,.30);
  --shadow-lg: 0 30px 70px -28px rgba(34,29,23,.45);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(197,81,42,.07), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(176,125,44,.06), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grano sutil de papel sobre todo el lienzo */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hidden { display: none !important; }
.muted  { color: var(--muted); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }

::selection { background: var(--accent-tint); color: var(--accent-deep); }

/* ---------- Botones ---------- */
.btn {
  cursor: pointer;
  font-family: var(--font-body);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .62rem 1.1rem;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .12s ease, background .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }

.btn-primary {
  background: var(--accent); color: #fff; width: 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-deep); box-shadow: var(--shadow); }

.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }

/* ============================================================
   Autenticación
   ============================================================ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2.25rem;
  position: relative;
  animation: rise .6s cubic-bezier(.2,.7,.2,1) both;
}
.auth-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.auth-logo {
  text-align: center; margin: 0 0 .15rem;
  font-family: var(--font-display);
  font-size: 2.3rem; font-weight: 600; letter-spacing: -.025em; color: var(--ink);
}
.auth-sub {
  text-align: center; margin: 0 0 1.9rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.logo-dot { color: var(--accent); }

.tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; background: var(--paper-2); padding: .3rem; border-radius: 11px; }
.tab {
  flex: 1; background: transparent; border: none; border-radius: 8px;
  padding: .55rem; cursor: pointer; color: var(--muted);
  font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tab.active { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }

.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-form label,
.modal label {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted);
}
.auth-form input,
.modal input,
.modal textarea,
.modal select {
  padding: .7rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  color: var(--ink); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.auth-form input::placeholder,
.modal input::placeholder,
.modal textarea::placeholder { color: #b6ad9b; font-weight: 400; }
.auth-form input:focus,
.modal input:focus,
.modal textarea:focus,
.modal select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.auth-msg { margin: 1.1rem 0 0; text-align: center; min-height: 1.2em; font-size: .9rem; }
.auth-msg.error { color: var(--danger); }

/* ============================================================
   Barra superior
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,253,248,.85);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: .8rem 1.4rem;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: .85rem; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.board-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; }
.user-name { font-weight: 600; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .92rem;
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--surface);
}

/* ============================================================
   Contenedor / dashboard
   ============================================================ */
.container { max-width: 1040px; margin: 2.5rem auto; padding: 0 1.5rem; }

.placeholder-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow); padding: 2.25rem;
}
.placeholder-card h2 { margin-top: 0; font-size: 1.6rem; }

.btn-auto { width: auto; }

.dash-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.75rem; gap: 1rem; }
.dash-head h1 {
  font-size: 2.1rem; margin: 0; line-height: 1.1; color: var(--ink);
}
.dash-head h1::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: .6rem;
  background: var(--accent); border-radius: 2px;
}

.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.15rem;
}

.project-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  animation: rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.projects-grid .project-card:nth-child(1) { animation-delay: .02s; }
.projects-grid .project-card:nth-child(2) { animation-delay: .06s; }
.projects-grid .project-card:nth-child(3) { animation-delay: .10s; }
.projects-grid .project-card:nth-child(4) { animation-delay: .14s; }
.projects-grid .project-card:nth-child(5) { animation-delay: .18s; }
.projects-grid .project-card:nth-child(n+6) { animation-delay: .22s; }
.project-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--line-strong); }

.project-card-body { padding: 1.25rem 1.3rem; cursor: pointer; flex: 1; }
.project-card-body h3 { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.2; }
.project-desc {
  margin: 0 0 1rem; color: var(--ink-soft); font-size: .9rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .8rem; }
.project-card-actions {
  display: flex; gap: .2rem; justify-content: flex-end;
  padding: .5rem .7rem; border-top: 1px solid var(--line); background: var(--surface-2);
}

.icon-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 1rem; padding: .38rem .5rem; border-radius: 8px; line-height: 1;
  transition: background .12s, transform .1s;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.danger:hover { background: #f7ddd9; }

/* Insignias */
.badge {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800; padding: .2rem .6rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid transparent;
}
.role-owner  { background: var(--accent-tint); color: var(--accent-deep); border-color: #eccfc2; }
.role-editor { background: #e3ece2; color: #3f6044; border-color: #d2e0d1; }
.role-viewer { background: var(--paper-2); color: var(--muted); border-color: var(--line); }

.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 4rem 1.5rem;
  background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: 18px;
}
.empty-state p { color: var(--muted); margin-bottom: 1.25rem; font-size: 1.05rem; }

/* ============================================================
   Modales
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(34,29,23,.45);
  backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 1.5rem;
  animation: fade .2s ease both;
}
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 470px; padding: 2rem; max-height: 90vh; overflow: auto;
  animation: pop .24s cubic-bezier(.2,.8,.2,1) both;
}
.modal h3 { margin: 0 0 1.4rem; font-size: 1.45rem; }
.modal textarea { resize: vertical; font-family: var(--font-body); }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }

.form-msg { margin: .55rem 0 0; font-size: .88rem; min-height: 1.1em; }
.form-msg.error   { color: var(--danger); }
.form-msg.success { color: var(--ok); }

/* Lista de miembros */
.members-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.member-row { display: flex; align-items: center; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.member-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.member-info .muted { font-size: .8rem; }
.avatar-sm { width: 30px; height: 30px; font-size: .8rem; }
.role-select {
  padding: .35rem .55rem; border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: var(--font-body); font-size: .85rem; background: var(--surface); color: var(--ink);
}
.add-member { display: flex; gap: .5rem; margin-top: .5rem; }
.add-member input { flex: 1; padding: .6rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-body); }
.add-member select { padding: .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-body); background: var(--surface); }

/* ============================================================
   Tablero Kanban
   ============================================================ */
.board-page {
  height: 100vh;            /* respaldo para navegadores sin dvh */
  height: 100dvh;          /* altura real visible (descuenta la barra del navegador) */
  display: flex; flex-direction: column; overflow: hidden;
}

.board {
  flex: 1; display: flex; gap: 1.15rem;
  padding: 1.5rem;
  overflow-x: auto; align-items: flex-start;
}
.board-loading { padding: 2rem; }

/* Pestañas de columnas — ocultas en escritorio, visibles en móvil */
.board-tabs { display: none; }
.board-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  flex-shrink: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .8rem;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--ink-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.board-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.board-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; }
.board-tab .tab-count {
  background: var(--paper-2); color: var(--ink-soft);
  font-size: .7rem; font-weight: 800; padding: 0 .4rem; border-radius: 999px; min-width: 1.3em; text-align: center;
}
.board-tab.active .tab-count { background: rgba(255,255,255,.2); color: #fff; }
.board-tab.tab-add { font-size: 1.1rem; font-weight: 700; padding: .35rem .75rem; }

.column {
  background: rgba(255,253,248,.7);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 300px; min-width: 300px; max-height: 100%;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.column-head {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem .95rem;
  border-bottom: 1px solid var(--line);
  cursor: grab;
}
.column-head:active { cursor: grabbing; }
.column-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.column-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  flex: 1; cursor: text; letter-spacing: -.01em;
}
.column-count {
  background: var(--paper-2); color: var(--ink-soft);
  font-size: .72rem; font-weight: 800;
  padding: .15rem .55rem; border-radius: 999px;
}
.column-count.over-wip { background: #f5d9d4; color: var(--danger); }
.col-menu { font-size: .85rem; }

.column-cards {
  flex: 1; overflow-y: auto; padding: .65rem;
  display: flex; flex-direction: column; gap: .6rem; min-height: 44px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  padding: .75rem .8rem;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s, border-color .15s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
.card-title { font-size: .94rem; font-weight: 600; line-height: 1.35; margin-bottom: .55rem; color: var(--ink); word-break: break-word; }
.card-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.card-spacer { flex: 1; }
.card-due { font-size: .74rem; color: var(--muted); font-weight: 600; }
.card-due.overdue { color: var(--danger); }

.card-ghost   { opacity: .35; }
.column-ghost { opacity: .5; }

/* Prioridades — fondos suaves, texto firme */
.prio-low    { background: #e8ebe6; color: #5d6b5a; }
.prio-med    { background: #e2e9f1; color: var(--slate); }
.prio-high   { background: #f6e8d4; color: var(--gold); }
.prio-urgent { background: var(--accent-tint); color: var(--accent-deep); }

/* Añadir tarjeta / columna */
.add-card-btn {
  margin: 0 .65rem .65rem; padding: .55rem; width: calc(100% - 1.3rem);
  background: transparent; border: 1px dashed var(--line-strong); border-radius: 9px;
  color: var(--muted); cursor: pointer; font-family: var(--font-body); font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.add-card-btn:hover { background: var(--surface); color: var(--accent-deep); border-color: var(--accent); }

.add-column { background: transparent; border: none; min-width: 260px; box-shadow: none; }
.add-column-btn {
  width: 100%; padding: .95rem; border: 1.5px dashed var(--line-strong);
  border-radius: 16px; background: rgba(255,253,248,.4);
  color: var(--muted); cursor: pointer; font-family: var(--font-body); font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.add-column-btn:hover { background: var(--surface); color: var(--accent-deep); border-color: var(--accent); }

/* Modal de tarjeta */
.form-row { display: flex; gap: .8rem; }
.form-row label { flex: 1; }
.form-row select, .form-row input { width: 100%; }
.danger-text { color: var(--danger); border-color: transparent; }
.danger-text:hover { background: #f7ddd9; border-color: transparent; color: var(--danger); }

/* ============================================================
   Etiquetas, comentarios y actividad
   ============================================================ */
.modal-wide { max-width: 580px; }

.card-labels { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.label-chip-mini {
  font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  padding: .12rem .5rem; border-radius: 999px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0,0,0,.12) inset;
}

.field-block { display: flex; flex-direction: column; gap: .5rem; }
.field-label { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.label-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.label-toggle {
  --lc: #94a3b8;
  border: 1.5px solid var(--lc); background: transparent; color: var(--lc);
  border-radius: 999px; padding: .28rem .75rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: background .12s, color .12s, transform .1s;
}
.label-toggle:hover { transform: translateY(-1px); }
.label-toggle.active { background: var(--lc); color: #fff; }
.label-toggle.new { --lc: var(--muted); border-style: dashed; }
.label-toggle:disabled { cursor: default; opacity: .8; }

/* Creador de etiquetas en línea */
.label-creator {
  margin-top: .7rem; padding: .85rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); display: flex; flex-direction: column; gap: .7rem;
}
.label-creator #label-name {
  padding: .55rem .7rem; border: 1px solid var(--line-strong);
  border-radius: 8px; font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: var(--surface);
}
.label-creator #label-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.color-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.swatch {
  width: 27px; height: 27px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0; transition: transform .1s;
}
.swatch:hover { transform: scale(1.14); }
.swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.label-creator-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* Comentarios */
.card-comments { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.card-comments h4 { margin: 0 0 .85rem; font-size: 1.05rem; }
.comments-list { list-style: none; padding: 0; margin: 0 0 .85rem; display: flex; flex-direction: column; gap: .85rem; }
.comment { display: flex; gap: .6rem; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }
.comment-meta strong { color: var(--ink); }
.comment-meta .comment-del { margin-left: auto; font-size: .75rem; padding: .1rem .35rem; }
.comment-text {
  font-size: .92rem; white-space: pre-wrap; word-break: break-word; margin-top: .2rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem;
}
.comment-form { display: flex; flex-direction: column; gap: .55rem; }
.comment-form textarea {
  padding: .6rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .92rem; resize: vertical; color: var(--ink); background: var(--surface);
}
.comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.comment-form button { align-self: flex-end; }

/* Panel de actividad */
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 90vw; z-index: 60;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: slidein .24s cubic-bezier(.2,.8,.2,1);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-size: 1.2rem; }
.activity-list { list-style: none; margin: 0; padding: .85rem 1.1rem; overflow-y: auto; }
.activity-item { display: flex; gap: .65rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.activity-info { flex: 1; min-width: 0; }
.activity-time { font-size: .75rem; margin-top: .15rem; }

/* ============================================================
   Animaciones
   ============================================================ */
@keyframes rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop    { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slidein{ from { transform: translateX(100%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Scrollbars discretas */
.board::-webkit-scrollbar, .column-cards::-webkit-scrollbar, .activity-list::-webkit-scrollbar { height: 10px; width: 10px; }
.board::-webkit-scrollbar-thumb, .column-cards::-webkit-scrollbar-thumb, .activity-list::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}

/* Etiquetas de botón colapsables (icono-solo en móvil) */
.btn-icon-only { display: none; }

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 768px) {
  .container { margin: 1.75rem auto; padding: 0 1.1rem; }
  .dash-head h1 { font-size: 1.8rem; }
  .board { padding: 1rem; gap: .9rem; }
}

/* ============================================================
   Responsive — móvil
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 14.5px; }

  /* Barra superior compacta */
  .topbar { padding: .6rem .8rem; gap: .5rem; }
  .topbar-left, .topbar-right { gap: .5rem; min-width: 0; }
  .btn { padding: .55rem .8rem; font-size: .88rem; }
  .btn-label { display: none; }                 /* botones colapsan a icono */
  .btn-icon-only { display: inline; }
  #btn-logout { padding: .55rem .7rem; }
  .board-title {
    font-size: 1rem; max-width: 42vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .role-badge { display: none; }                /* el rol se omite por espacio */
  .brand { font-size: 1.15rem; }
  .user-name { display: none; }
  .avatar { width: 30px; height: 30px; font-size: .82rem; }

  /* Dashboard */
  .dash-head { flex-direction: column; align-items: stretch; gap: .9rem; }
  .dash-head h1 { font-size: 1.65rem; }
  .dash-head .btn-primary { width: 100%; }
  .projects-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Tablero: una columna a la vez, navegada por pestañas */
  .board-tabs {
    display: flex; gap: .5rem; overflow-x: auto;
    padding: .7rem .85rem; background: rgba(255,253,248,.9);
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .board-tabs::-webkit-scrollbar { display: none; }

  .board {
    padding: .85rem; gap: 0; overflow-x: hidden; flex-direction: column;
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
  }
  .column { display: none; width: 100%; min-width: 100%; }
  .column.is-active { display: flex; flex: 1; min-height: 0; }
  .column-cards { gap: .65rem; }
  .add-column { display: none; }   /* se añade desde la pestaña "+" */

  /* Modales a pantalla casi completa */
  .modal-backdrop { padding: 0; place-items: end stretch; }
  .modal, .modal-wide {
    max-width: 100%; width: 100%;
    border-radius: 20px 20px 0 0; padding: 1.5rem 1.25rem;
    max-height: 92vh;
    animation: sheet .26s cubic-bezier(.2,.8,.2,1) both;
  }
  .modal h3 { font-size: 1.3rem; }

  /* Campos de 3 columnas se apilan */
  .form-row { flex-direction: column; gap: 1rem; }

  /* Acciones del modal a lo ancho */
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > span { display: none; }      /* espaciador flexible no aplica */
  .modal-actions .btn { flex: 1; min-width: 44%; }
  .modal-actions #card-delete { order: 3; flex-basis: 100%; }

  /* Invitar miembro: apila correo / rol / botón */
  .add-member { flex-direction: column; }
  .add-member select, .add-member .btn { width: 100%; }

  /* Panel de actividad ocupa casi toda la pantalla */
  .drawer { width: 100vw; max-width: 100vw; }
}

@media (max-width: 600px) {
  @keyframes sheet { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
}

/* Conmutador de vista y proyectos archivados */
.dash-actions { display: flex; gap: .6rem; flex-shrink: 0; }
.project-card.is-archived { opacity: .72; background: var(--surface-2); }
.project-card.is-archived:hover { opacity: 1; }
.archived-tag {
  font-family: var(--font-body); font-size: .6rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
  color: var(--muted); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .45rem; margin-left: .3rem;
}
.project-card-actions [data-restore],
.project-card-actions [data-archive] { font-size: .85rem; }
.project-card-actions [data-restore] { white-space: nowrap; font-weight: 600; }

@media (max-width: 600px) {
  .dash-actions { flex-direction: column; }
  .dash-actions .btn { width: 100%; }
}

/* ============================================================
   Vista de Resumen
   ============================================================ */
.summary-wrap { max-width: 920px; }
.summary-title { font-size: 2rem; margin: 0 0 1.25rem; }

/* Indicadores */
.summary-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.stat {
  display: flex; flex-direction: column; gap: .15rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: .85rem 1rem; cursor: pointer; text-align: left;
  font-family: var(--font-body); transition: border-color .15s, box-shadow .15s, transform .12s;
}
.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.stat.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.stat-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--ink); }
.stat-label { font-size: .76rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }

/* Filtros */
.summary-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.5rem; }
.f-search, .f-select {
  padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: var(--surface);
}
.f-search { flex: 1; min-width: 180px; }
.f-search:focus, .f-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.f-toggle { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.f-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Grupos */
.summary-groups { display: flex; flex-direction: column; gap: 1.5rem; }
.sum-group-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.05rem; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.sum-group-count { font-family: var(--font-body); font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: .1rem .55rem; }
.sum-list { display: flex; flex-direction: column; gap: .55rem; }

/* Tarjeta de resumen */
.sum-card {
  display: flex; align-items: stretch; gap: .8rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem .8rem .7rem 0; overflow: hidden;
  transition: box-shadow .15s, transform .12s, border-color .15s;
}
.sum-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
.prio-bar { width: 5px; border-radius: 0 4px 4px 0; flex-shrink: 0; }
.prio-bar.prio-urgent { background: var(--accent); }
.prio-bar.prio-high   { background: var(--gold); }
.prio-bar.prio-med    { background: var(--slate); }
.prio-bar.prio-low    { background: #b6c0b3; }
.sum-main { flex: 1; min-width: 0; }
.sum-card-title { font-weight: 600; color: var(--ink); margin-bottom: .35rem; word-break: break-word; }
.sum-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.sum-project { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.status-chip {
  --cc: var(--muted);
  font-size: .72rem; font-weight: 700; color: var(--ink-soft);
  background: color-mix(in srgb, var(--cc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc) 35%, transparent);
  border-radius: 999px; padding: .08rem .5rem;
}
.sum-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.sum-due { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sum-due.due-overdue { color: var(--danger); }
.sum-due.due-today   { color: var(--gold); }
.avatar-sm.unassigned { background: var(--paper-2) !important; color: var(--muted); border: 1px dashed var(--line-strong); box-shadow: none; }

@media (max-width: 700px) {
  .summary-stats { grid-template-columns: repeat(2, 1fr); }
  .summary-title { font-size: 1.6rem; }
}
@media (max-width: 600px) {
  .sum-right { flex-direction: column-reverse; gap: .35rem; align-items: flex-end; }
  .summary-filters .f-select { flex: 1; }
}