@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Archivo:wght@500;600;700&display=swap');

:root{
  --cork-a:#b98a56;
  --cork-b:#a97841;
  --frame:#6b4a2b;
  --frame-dark:#4a3119;
  --paper:#f3ead9;
  --paper-edge:#e2d3b3;
  --ink:#3a2f22;
  --ink-soft:#6b5c47;
  --accent-todo:#7a8b99;
  --accent-doing:#c98a3e;
  --accent-done:#6f9b6a;
  --y1:#ffe066; --y2:#f4cf3f;
  --p1:#ff9eb5; --p2:#ff7a9c;
  --b1:#8ecbff; --b2:#63addf;
  --g1:#b2f2a0; --g2:#8fdd77;
  --o1:#ffb870; --o2:#ff9f40;
  --l1:#d6bbff; --l2:#c39bfa;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  font-family:'Archivo', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(0,0,0,0.05) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 55%, rgba(0,0,0,0.05) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 80%, rgba(0,0,0,0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 15%, rgba(0,0,0,0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 40%, rgba(0,0,0,0.04) 0 2px, transparent 3px),
    linear-gradient(135deg, var(--cork-a), var(--cork-b));
  background-size: 60px 60px, 70px 70px, 55px 55px, 65px 65px, 50px 50px, cover;
  padding:28px 20px 120px;
}

button{font-family:inherit;}
button:focus-visible, input:focus-visible, [contenteditable]:focus-visible{
  outline:2px solid #2b6cb0;
  outline-offset:2px;
}

.pin{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a8a, #c62828);
  box-shadow:0 3px 4px rgba(0,0,0,0.4);
  margin:0 auto 6px;
}
h1{
  font-family:'Kalam', cursive;
  font-size:2.1rem;
  margin:0;
  color:#fff8ea;
  text-shadow:0 2px 3px rgba(0,0,0,0.4);
  transform:rotate(-1deg);
  display:inline-block;
  background:rgba(0,0,0,0.12);
  padding:6px 22px;
  border-radius:4px;
}
.subtitle{
  font-size:0.85rem;
  color:#fff0d8;
  opacity:0.85;
  margin-top:8px;
}

/* ============ Vistas genéricas ============ */
.view{width:100%;}
.view[hidden]{display:none !important;}
.link-btn{
  background:none;
  border:none;
  color:#fff8ea;
  text-decoration:underline;
  cursor:pointer;
  font-size:0.8rem;
  opacity:0.85;
}
.link-btn:hover{opacity:1;}

/* ============ Login ============ */
.login-view{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:80vh;
}
.login-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:10px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
  padding:32px 30px;
  width:100%;
  max-width:340px;
  text-align:center;
}
.login-card h1{color:var(--ink);text-shadow:none;background:none;padding:0;}
.login-card .subtitle{color:var(--ink-soft);}
#loginForm{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
  text-align:left;
}
#loginForm label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.8rem;
  font-weight:600;
  color:var(--ink-soft);
}
#loginForm input, .admin-form input, .adminGateForm input{
  font-family:'Archivo', sans-serif;
  padding:9px 10px;
  border-radius:6px;
  border:1px solid var(--paper-edge);
  font-size:0.9rem;
}
#loginForm button, .admin-form button, #adminGateForm button{
  background:var(--accent-done);
  color:#fff;
  border:none;
  padding:10px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  font-size:0.9rem;
}
#loginForm button:hover, .admin-form button:hover, #adminGateForm button:hover{opacity:0.9;}
.form-error{
  color:#c62828;
  font-size:0.78rem;
  min-height:1em;
}

/* ============ Selector de tableros ============ */
.app-header{
  text-align:center;
  margin-bottom:26px;
  position:relative;
}
.board-list-view{max-width:900px;margin:0 auto;}
.board-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
}
.board-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
  padding:22px 18px;
  cursor:pointer;
  text-align:center;
  font-family:'Kalam', cursive;
  font-size:1.2rem;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.board-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 22px rgba(0,0,0,0.32);
}
.board-card .folder-tab{
  width:46px;height:8px;
  background:var(--accent-doing);
  border-radius:3px;
  margin:0 auto 12px;
}
.empty-hint{
  width:100%;
  text-align:center;
  color:#fff0d8;
  font-size:0.9rem;
  font-style:italic;
  margin-top:24px;
  opacity:0.85;
}

/* ============ Tablero kanban ============ */
.frame{
  max-width:1180px;
  margin:0 auto;
  border:14px solid var(--frame);
  border-radius:10px;
  box-shadow: inset 0 0 0 4px var(--frame-dark), 0 20px 40px rgba(0,0,0,0.35);
  padding:26px 26px 34px;
}
.kanban-view header{
  text-align:center;
  margin-bottom:22px;
  position:relative;
}
.back-btn{
  position:absolute;
  left:0; top:0;
}

.board{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:820px){
  .board{grid-template-columns:1fr;}
}

.column{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px 8px 4px 4px;
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
  min-height:340px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.column-tab{
  font-family:'Kalam', cursive;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
  padding:8px 16px;
  border-radius:4px 4px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.column[data-col="todo"] .column-tab{background:var(--accent-todo);}
.column[data-col="doing"] .column-tab{background:var(--accent-doing);}
.column[data-col="done"] .column-tab{background:var(--accent-done);}
.count-badge{
  background:rgba(255,255,255,0.28);
  border-radius:10px;
  padding:1px 9px;
  font-size:0.78rem;
  font-family:'Archivo',sans-serif;
  font-weight:600;
}

.notes-area{
  flex:1;
  padding:16px 14px 10px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:14px;
  min-height:220px;
  transition:background 0.15s ease;
}
.notes-area.dragover{
  background:rgba(0,0,0,0.05);
  outline:2px dashed var(--ink-soft);
  outline-offset:-8px;
}
.notes-area .empty-hint{
  color:var(--ink-soft);
  font-size:0.82rem;
  opacity:0.7;
  margin-top:24px;
}

.add-btn{
  margin:10px 14px 14px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  border:1.5px dashed var(--paper-edge);
  transition:all 0.15s ease;
}
.add-btn:hover{
  background:rgba(0,0,0,0.05);
  color:var(--ink);
}

.postit{
  width:158px;
  min-height:140px;
  padding:14px 12px 10px;
  border-radius:2px;
  cursor:grab;
  position:relative;
  box-shadow:3px 5px 10px rgba(0,0,0,0.28);
  font-family:'Kalam', cursive;
  font-size:0.95rem;
  line-height:1.3;
  color:#2b2410;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.postit:hover{box-shadow:5px 9px 16px rgba(0,0,0,0.35);}
.postit.dragging{opacity:0.35;}
.postit::before{
  content:'';
  position:absolute;
  top:-6px; left:50%;
  transform:translateX(-50%);
  width:16px;height:16px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f2f2f2, #b6b6b6);
  box-shadow:0 2px 3px rgba(0,0,0,0.4);
}
.postit[data-color="y"]{background:linear-gradient(160deg, var(--y1), var(--y2));}
.postit[data-color="p"]{background:linear-gradient(160deg, var(--p1), var(--p2));}
.postit[data-color="b"]{background:linear-gradient(160deg, var(--b1), var(--b2));}
.postit[data-color="g"]{background:linear-gradient(160deg, var(--g1), var(--g2));}
.postit[data-color="o"]{background:linear-gradient(160deg, var(--o1), var(--o2));}
.postit[data-color="l"]{background:linear-gradient(160deg, var(--l1), var(--l2));}

.postit-text{
  outline:none;
  min-height:62px;
  word-break:break-word;
}
.postit-text:empty::before{content:'Escribe algo...';opacity:0.55;}

.postit-meta{
  font-family:'Archivo', sans-serif;
  font-size:0.6rem;
  font-weight:700;
  color:rgba(43,36,16,0.5);
  margin-top:4px;
}

.postit-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:6px;
}
.postit-timestamp{
  font-family:'Archivo', sans-serif;
  font-size:0.62rem;
  font-weight:600;
  color:rgba(43,36,16,0.55);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.discard-btn, .archive-btn{
  background:rgba(0,0,0,0.12);
  border:none;
  border-radius:4px;
  width:22px;height:22px;
  font-size:0.72rem;
  cursor:pointer;
  color:#2b2410;
  line-height:1;
}
.discard-btn:hover, .archive-btn:hover{background:rgba(0,0,0,0.25);}

/* ============ Docks (Archivo + Papelera) ============ */
.docks-row{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:20;
  display:flex;
  align-items:flex-end;
  gap:22px;
}
.dock{display:flex;flex-direction:column;align-items:center;}
.trash-can{
  width:64px;height:60px;
  background:linear-gradient(160deg, #8a8f96, #5f636a);
  border-radius:6px 6px 12px 12px;
  position:relative;
  box-shadow:0 8px 16px rgba(0,0,0,0.4);
  cursor:pointer;
  border:none;
  transition:transform 0.15s ease;
}
.trash-can::before{
  content:'';
  position:absolute;
  top:-9px; left:-4px; right:-4px;
  height:10px;
  background:#6b6f76;
  border-radius:4px;
  box-shadow:0 2px 3px rgba(0,0,0,0.3);
}
.trash-can .slit{
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  width:34px; height:5px;
  background:#3f4247;
  border-radius:3px;
}
.dock.dragover .trash-can{
  transform:scale(1.12) rotate(-3deg);
  box-shadow:0 12px 22px rgba(0,0,0,0.5);
}
.archive-can{background:linear-gradient(160deg, #cfa06a, #a97841);border-radius:4px;}
.archive-can::before{background:#8a6539;height:8px;}
.archive-can .slit{background:#6b4a2b;width:40px;top:6px;}
.archive-can::after{
  content:'';
  position:absolute;
  left:50%; top:22px;
  transform:translateX(-50%);
  width:2px; height:26px;
  background:rgba(0,0,0,0.15);
}
.trash-label{
  font-size:0.72rem;
  color:#fff8ea;
  margin-top:6px;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.trash-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:#c62828;
  color:#fff;
  font-size:0.68rem;
  font-weight:700;
  border-radius:10px;
  padding:1px 6px;
  box-shadow:0 2px 3px rgba(0,0,0,0.4);
}

/* ============ Paneles laterales (trash / archive / admin) ============ */
.trash-panel{
  position:fixed;
  right:0; top:0; bottom:0;
  width:340px;
  max-width:90vw;
  background:#efe6d4;
  box-shadow:-8px 0 24px rgba(0,0,0,0.4);
  transform:translateX(100%);
  transition:transform 0.25s ease;
  z-index:30;
  display:flex;
  flex-direction:column;
  padding:20px 16px;
  overflow-y:auto;
}
.trash-panel.open{transform:translateX(0);}
.trash-panel h2{font-family:'Kalam',cursive;margin:0 0 4px;font-size:1.4rem;}
.trash-panel .hint{font-size:0.78rem;color:var(--ink-soft);margin-bottom:16px;}
.close-panel{
  align-self:flex-end;
  background:none;
  border:none;
  font-size:1.3rem;
  cursor:pointer;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.trash-item{
  background:#fff;
  border:1px solid var(--paper-edge);
  border-radius:6px;
  padding:10px 12px;
  margin-bottom:10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.trash-item .swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0;margin-top:3px;}
.trash-item .txt{flex:1;font-family:'Kalam',cursive;font-size:0.9rem;word-break:break-word;}
.trash-item .txt .meta{
  display:block;
  font-family:'Archivo',sans-serif;
  font-size:0.62rem;
  color:var(--ink-soft);
  margin-top:3px;
}
.trash-item .actions{display:flex;flex-direction:column;gap:4px;}
.trash-item button{
  font-size:0.7rem;
  padding:4px 7px;
  border-radius:4px;
  border:none;
  cursor:pointer;
  font-family:'Archivo',sans-serif;
  font-weight:600;
}
.restore-btn{background:#6f9b6a;color:#fff;}
.restore-btn:hover{background:#5c8657;}
.forget-btn{background:#c62828;color:#fff;}
.forget-btn:hover{background:#a81f1f;}
.forget-btn.confirm-armed{
  background:#7a1414;
  box-shadow:0 0 0 2px rgba(255,255,255,0.6) inset;
  animation:pulse-armed 0.9s ease-in-out infinite;
}
@keyframes pulse-armed{0%,100%{opacity:1;}50%{opacity:0.75;}}
.trash-empty{color:var(--ink-soft);font-size:0.85rem;font-style:italic;text-align:center;margin-top:30px;}

.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.25);
  z-index:25;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;
}
.overlay.open{opacity:1;pointer-events:auto;}

.save-flag{
  position:fixed;
  left:20px; bottom:20px;
  font-size:0.72rem;
  color:#fff8ea;
  opacity:0;
  transition:opacity 0.4s ease;
  font-family:'Archivo',sans-serif;
  z-index:40;
}
.save-flag.show{opacity:0.85;}
.save-flag.error{color:#fff;background:#c62828;padding:5px 10px;border-radius:5px;opacity:0.95;}

/* ============ Engranaje + Admin ============ */
.gear-btn{
  position:fixed;
  top:18px; right:18px;
  z-index:50;
  width:42px;height:42px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.25);
  font-size:1.3rem;
  cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease;
}
.gear-btn:hover{background:rgba(0,0,0,0.4);transform:rotate(25deg);}

.admin-panel{width:420px;}
.admin-section{margin-bottom:24px;}
.admin-section h3{
  font-family:'Kalam',cursive;
  margin:0 0 10px;
  font-size:1.1rem;
}
.admin-list{margin-bottom:12px;}
.admin-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#fff;
  border:1px solid var(--paper-edge);
  border-radius:6px;
  padding:8px 10px;
  margin-bottom:6px;
  font-size:0.82rem;
}
.admin-row .name{font-weight:700;}
.admin-row .sub{color:var(--ink-soft);font-size:0.72rem;}
.admin-row .row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.admin-row button{
  font-size:0.68rem;
  padding:3px 7px;
  border-radius:4px;
  border:none;
  cursor:pointer;
  font-weight:600;
}
.assign-btn{background:var(--accent-done);color:#fff;}
.unassign-btn{background:#8a7a5c;color:#fff;}
.delete-row-btn{background:#c62828;color:#fff;}
.assign-select{
  font-size:0.75rem;
  padding:4px;
  border-radius:4px;
  border:1px solid var(--paper-edge);
}
.admin-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#adminGateForm{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#adminGateForm label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.8rem;
  font-weight:600;
  color:var(--ink-soft);
}
.assigned-chip{
  display:inline-block;
  background:var(--paper-edge);
  border-radius:10px;
  padding:1px 8px;
  font-size:0.68rem;
  margin:2px 3px 0 0;
}