@import url('source-sans-pro.css');

/* ══════════════════════════════════════
   VARIABLES
══════════════════════════════════════ */
:root {
  --col-todo:   #f59e0b;
  --col-doing:  #6366f1;
  --col-done:   #10b981;
  --text-1:     #1a2238;
  --text-2:     #64748b;
  --text-3:     #94a3b8;
  --border:     rgba(26,34,56,0.07);
  --bg-page:    #edf0f7;
  --bg-col:     #ffffff;
  --bg-list:    #f3f6fb;
  --bg-card:    #f8fafd;
  --r-col:      14px;
  --r-card:     10px;
  --sh-col:     0 2px 10px rgba(26,34,56,0.07), 0 16px 48px rgba(26,34,56,0.05);
  --sh-card:    0 1px 3px rgba(26,34,56,0.06), 0 4px 12px rgba(26,34,56,0.04);
  --sh-hover:   0 8px 28px rgba(26,34,56,0.13);
}

/* ══════════════════════════════════════
   BOARD
══════════════════════════════════════ */
.board {
  display: flex;
  gap: 14px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: var(--bg-page);
  padding: 14px;
  font-family: 'Source Sans Pro', sans-serif;
}

/* ══════════════════════════════════════
   COLUMN
══════════════════════════════════════ */
.column {
  background: var(--bg-col);
  border-radius: var(--r-col);
  flex: 1 1 0;
  min-width: 0;
  box-shadow: var(--sh-col);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
}

.column[data-column="todo"]  { border-top-color: var(--col-todo);  }
.column[data-column="doing"] { border-top-color: var(--col-doing); }
.column[data-column="done"]  { border-top-color: var(--col-done);  }

.column h2 {
  margin: 0;
  padding: 14px 16px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.column[data-column="todo"]  h2 { color: #92400e; }
.column[data-column="doing"] h2 { color: #3730a3; }
.column[data-column="done"]  h2 { color: #065f46; }

.column h2::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.column[data-column="todo"]  h2::before { background: var(--col-todo);  }
.column[data-column="doing"] h2::before { background: var(--col-doing); }
.column[data-column="done"]  h2::before { background: var(--col-done);  }

/* ══════════════════════════════════════
   TASK LIST
══════════════════════════════════════ */
.task-list {
  flex: 1;
  padding: 10px;
  background: var(--bg-list);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.task-list::-webkit-scrollbar         { width: 3px; }
.task-list::-webkit-scrollbar-track   { background: transparent; }
.task-list::-webkit-scrollbar-thumb   { background: #d1d5db; border-radius: 2px; }

/* Sortable placeholder */
.ui-state-highlight {
  background: rgba(99,102,241,0.05) !important;
  border: 2px dashed rgba(99,102,241,0.25) !important;
  border-radius: var(--r-card) !important;
  box-shadow: none !important;
  height: 54px;
  min-height: 54px;
}

/* ══════════════════════════════════════
   NEW TASK INPUT
══════════════════════════════════════ */
.new-task-wrapper {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  background: #fafbff;
  border-radius: 0 0 var(--r-col) var(--r-col);
  padding: 0 14px;
  gap: 8px;
  transition: background 0.2s;
}
.new-task-wrapper:focus-within {
  background: #fff;
  box-shadow: inset 0 -2px 0 var(--col-todo);
}
.new-task-wrapper .new-task-icon {
  color: var(--text-3);
  font-size: 13px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.new-task-wrapper:focus-within .new-task-icon {
  color: var(--col-todo);
}
.new-task-input {
  margin: 0;
  padding: 12px 0;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--text-1);
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}
.new-task-input::placeholder { color: var(--text-3); }

/* ══════════════════════════════════════
   TASK CARD
══════════════════════════════════════ */
.task {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: 11px 13px;
  cursor: grab;
  font-size: 13.5px;
  font-family: 'Source Sans Pro', sans-serif;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease, background 0.15s;
  box-shadow: var(--sh-card);
  border: 1px solid var(--border);
  border-left: 3px solid #e2e8f0;
  position: relative;
  margin-bottom: 0;
}

.task:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
}

.task.ui-sortable-helper {
  transform: rotate(1.5deg) scale(1.02);
  box-shadow: 0 16px 40px rgba(26,34,56,0.18);
  cursor: grabbing;
}

.task:active { cursor: grabbing; }

/* Label variants */
.etiqueta-prioridad { border-left-color: var(--col-todo);   }
.etiqueta-urgente   { border-left-color: #ef4444;           }
.etiqueta-info      { border-left-color: #3b82f6;           }

/* Header row */
.task .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 5px;
}

.text-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.task .text {
  font-weight: 500;
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.text-edit-input {
  font-size: 13.5px;
  padding: 4px 8px;
  flex: 1;
  border: 1.5px solid var(--col-doing);
  border-radius: 6px;
  outline: none;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
  color: var(--text-1);
}

/* Action buttons */
.actions { display: flex; gap: 2px; flex-shrink: 0; }

.edit-btn-mio,
.delete-btn {
  border: none;
  background: transparent;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  transition: background 0.15s, color 0.15s;
  font-size: 12px;
  padding: 0;
  opacity: 0;
}

.task:hover .edit-btn-mio,
.task:hover .delete-btn { opacity: 1; }

.edit-btn-mio:hover  { background: #eef2ff; color: var(--col-doing); }
.delete-btn:hover    { background: #fee2e2; color: #ef4444; }

/* Meta — fecha + user */
.task .fecha {
  font-size: 11px;
  color: var(--text-3);
  font-style: normal;
  display: block;
  margin-left: 0;
}

.task-user {
  font-size: 11px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
}

/* Label select */
.label-select {
  margin-top: 8px;
  width: 100%;
  padding: 5px 28px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--text-2);
  background: #fff;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  outline: none;
  transition: border-color 0.15s;
}
.label-select:focus { border-color: var(--col-doing); }

/* ══════════════════════════════════════
   COMMENTS
══════════════════════════════════════ */
.comments-section {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 7px;
}

.add-comment-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--text-3);
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.add-comment-btn:hover {
  background: #eef2ff;
  color: var(--col-doing);
}

.comment-input-area { margin-top: 6px; }

.comment-input {
  padding: 7px 10px;
  width: 100%;
  border: 1.5px solid var(--col-doing);
  border-radius: 7px;
  font-size: 12.5px;
  font-family: 'Source Sans Pro', sans-serif;
  outline: none;
  box-sizing: border-box;
  color: var(--text-1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}

.comment-img-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.comment-img-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #f1f4f9;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background 0.15s;
}
.comment-img-btn input[type="file"] { display: none; }
.comment-img-btn:hover { background: #e2e8f0; }

.comment {
  background: #f8fafd;
  padding: 7px 10px;
  border-left: 2px solid #e2e8f0;
  border-radius: 7px;
  margin-top: 5px;
  font-size: 12.5px;
  font-family: 'Source Sans Pro', sans-serif;
  transition: border-color 0.15s;
}
.comment:hover { border-left-color: #c7d2fe; }

.comment-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-row .comment-text {
  flex: 1;
  color: var(--text-1);
  font-size: 12.5px;
}

.comment-time {
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.comment-delete-btn {
  border: none;
  background: none;
  color: #d1d5db;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.comment-delete-btn:hover { color: #ef4444; background: #fee2e2; }

.comment-img-thumb {
  max-height: 36px;
  max-width: 72px;
  border-radius: 4px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.comment-img-uploading { font-size: 11px; color: var(--text-3); font-style: italic; }
.comment-img-error     { font-size: 11px; color: #ef4444; }
.comment-img-wrap      { margin-top: 6px; }

.comment-img-full {
  max-width: 100%;
  max-height: 180px;
  border-radius: 7px;
  border: 1px solid var(--border);
  display: block;
  cursor: zoom-in;
  transition: opacity 0.15s, transform 0.15s;
}
.comment-img-full:hover { opacity: 0.88; transform: scale(1.01); }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
#trello-img-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#trello-img-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,12,25,0.80);
  backdrop-filter: blur(5px);
}

#trello-img-modal-box {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.45);
}

#trello-img-modal-img {
  display: block;
  max-width: 85vw;
  max-height: 82vh;
  border-radius: 8px;
}

#trello-img-modal-close {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--text-1);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#trello-img-modal-close:hover { background: #ef4444; }

#trello-img-modal-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-family: 'Source Sans Pro', sans-serif;
}

#trello-img-modal-text { font-size: 13.5px; color: var(--text-1); flex: 1; }
#trello-img-modal-time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }