/* =========================
   Variables & Reset
========================= */
:root{
  --sd-primary:#6d7e4a; /* verde Puntelo */
  --sd-dark:#1d2214;
  --sd-accent:#a8b77a;
  --bg:#f6f7f5;
  --card:#ffffff;
  --muted:#8a8f84;
  --ctl-h: 42px;        /* alto unificado de controles */

  /* Paleta por categoría (slots 1..8, colores distintivos) */
  --cat-1:#16a34a;  /* verde - General */
  --cat-2:#0ea5e9;  /* sky  - Trabajo */
  --cat-3:#8b5cf6;  /* violeta - Marketing */
  --cat-4:#f43f5e;  /* rosa/rojo - Contactos */
  --cat-5:#f59e0b;  /* ámbar */
  --cat-6:#10b981;  /* esmeralda */
  --cat-7:#14b8a6;  /* teal */
  --cat-8:#6366f1;  /* índigo */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#1b1b1b;
  display:flex; flex-direction:column; align-items:center;
}

/* =========================
   Header / Brand
========================= */
header{
  width:100%; background:linear-gradient(135deg, var(--sd-dark), #2a3320); color:#fff;
  padding:16px 20px; position:sticky; top:0; z-index:10; box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.brand{ display:flex; align-items:center; gap:12px; max-width:1200px; margin:0 auto; }
.logo{ width:36px; height:36px; border-radius:10px; background:radial-gradient(circle at 30% 30%, var(--sd-accent), var(--sd-primary)); display:grid; place-items:center; color:#122; font-weight:800 }
.brand h1{ font-size:1.2rem; margin:0; letter-spacing:.3px }
.brand small{ color:#d6dfc7 }

/* =========================
   Toolbar (layout)
========================= */
.toolbar{
  max-width:1200px; margin:14px auto 8px; width:90%;
  display:grid; grid-template-columns: 1fr auto auto; gap:10px;
}
.toolbar .row{
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center;
}
.toolbar .row > .field,
.toolbar .row > .btn{
  align-self:flex-start;
}

/* =========================
   Field + Controles internos
========================= */
.field{
  display:flex; gap:8px; align-items:center;
  background:var(--card); border:1px solid #e4e7df; padding:8px 10px;
  border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  height: var(--ctl-h);
}
.field label{
  display:inline-flex; align-items:center; height:100%;
  white-space:nowrap; margin-right:6px;
}
.field input[type="text"],
.field input[type="date"],
.field select{
  border:none; outline:none; background:transparent;
  height:100%; line-height:1;
}
.field input[type="text"]{
  height: calc(var(--ctl-h) - 16px); /* restar padding 8+8 */
  padding-block:0; margin-block:0; display:block; width:100%;
  -webkit-appearance:none; appearance:none;
}
.field select{
  appearance:auto;                  /* Chrome/Firefox */
  -webkit-appearance: menulist;     /* Safari/iOS */
  padding-block:0; line-height:1;
}

/* =========================
   Buttons
========================= */
.btn{
  appearance:none; border:none; padding:10px 14px;
  border-radius:10px; background:var(--sd-primary); color:#fff;
  font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .04s ease; height: var(--ctl-h);
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:active{ transform:translateY(1px) }
.btn.secondary{ background:#e9ecdf; color:#2b2f26; box-shadow:none }

/* =========================
   Categorías (panel/edición)
========================= */
.field.cat-editor{
  height:auto; align-items:flex-start; position:relative;
}
.cat-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#eef2ff; color:#1b2a3a; border-radius:999px;
  padding:4px 10px; font-weight:600; font-size:.82rem; border:1px solid #dde3f7;
}
.cat-chip .cat-remove{
  appearance:none; border:none; background:transparent;
  font-weight:900; cursor:pointer; padding:0 4px; line-height:1; color:#5b6270;
}
.cat-chip .cat-remove:hover{ color:#000 }
#catEditor input{ border:none; outline:none; background:transparent; flex:1; min-width:0 }
.cat-editor .cat-close{
  position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:8px;
  appearance:none; border:none; background:#eef1ea; color:#2b2f26; font-weight:900; cursor:pointer;
}
.cat-editor .cat-close:hover{ background:#e5e9e0 }
.cat-editor .cat-close:active{ transform:translateY(1px) }

/* =========================
   Board / Columns / Tasks
========================= */
.board{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
  width:90%; max-width:1200px; margin:8px auto 36px; align-items:stretch;
}
.column{ background:var(--card); border-radius:14px; min-height:420px; box-shadow:0 2px 8px rgba(0,0,0,.08); border:1px solid #e7eadf; display:flex; flex-direction:column }
.col-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eef1e6 }
.col-head h2{ margin:0; font-size:1rem; letter-spacing:.2px }
.badge{ background:var(--sd-accent); color:#122; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:700 }
.tasks{ padding:12px; display:flex; flex-direction:column; gap:10px; padding-bottom:72px; flex:1; min-height:40px }

.task{
  background:#f7f9f3; border:1px solid #e3e8d9; border-left:4px solid #6d7e4a;
  border-radius:12px; padding:10px 12px; cursor:grab;
  display:flex; justify-content:space-between; align-items:start; gap:10px; transition:background .15s ease;
}
.task:hover{ background:#f1f5e8 }
.task.dragging{ opacity:.6 }
.tmain{ display:flex; flex-direction:column; gap:6px; flex:1 }
.ttext{ white-space:pre-wrap; line-height:1.25 }
.meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:.78rem }

.chip{ padding:2px 8px; border-radius:999px; background:#eef2ff; font-weight:600 }
.chip.type{ color:#fff }  /* el fondo lo pone cat-1..8 */
.chip.prio{ background:#e8efe0; color:#233 }
.chip.date{ background:#eceff3; color:#243 }

/* Colores por categoría (chip de tipo) */
.chip.type.cat-1{ background:var(--cat-1) !important; color:#fff; }
.chip.type.cat-2{ background:var(--cat-2) !important; color:#062433; }
.chip.type.cat-3{ background:var(--cat-3) !important; color:#fff; }
.chip.type.cat-4{ background:var(--cat-4) !important; color:#fff; }
.chip.type.cat-5{ background:var(--cat-5) !important; color:#251d03; }
.chip.type.cat-6{ background:var(--cat-6) !important; color:#062d20; }
.chip.type.cat-7{ background:var(--cat-7) !important; color:#062a28; }
.chip.type.cat-8{ background:var(--cat-8) !important; color:#fff; }

.actions{ display:flex; gap:6px }
.icon-btn{ background:transparent; border:none; cursor:pointer; padding:4px; border-radius:8px; color:#3b412f }
.icon-btn:hover{ background:#e9eedf }

.column.drop-active{ box-shadow:0 0 0 2px var(--sd-accent) inset }

/* =========================
   Footer / Utils
========================= */
.foot{
  max-width:1200px; margin:0 auto 18px; width:90%; color: var(--muted);
  font-size: .85rem; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.hidden{ display:none !important; }
.touch-dragging { opacity:.7; transform:scale(.98); }

/* Canvas confetti overlay */
#confettiCanvas{
  position: fixed; inset:0; width:100vw; height:100vh;
  pointer-events: none; z-index: 9999; display: none;
}

/* =========================
   Responsive
========================= */
@media (max-width:980px){
  .board{ grid-template-columns:1fr }
  .toolbar{ grid-template-columns:1fr }
}

/* iOS: evita selección/callout en el tablero */
.board,
.board *:not(input):not(textarea):not(select) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* sin menú de copiar/definir */
}

/* Evita que iOS interprete gestos como scroll/zoom durante drag */
.task { touch-action: none; }

/* (opcional) quita el flash gris al tocar en iOS */
* { -webkit-tap-highlight-color: transparent; }
/* Botones táctiles dentro de la tarjeta: prioriza tap */
.icon-btn { touch-action: manipulation; }

/* --- Evita zoom al escribir en iPhone/iPad --- */
@supports (-webkit-touch-callout: none) {
  .field input[type="text"],
  .field input[type="date"],
  .field select {
    font-size: 16px !important;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}