/* =========================
   Theme — Teal / Modern UI (palette #116466)
   ========================= */

/* --------- Tokens --------- */
:root {
  /* Brand scale mapeada a tu paleta */
  --brand-900: #0D4D4F;
  /* hover/dark */
  --brand-800: #116466;
  /* principal */
  --brand-700: #167678;
  /* +10% luz aprox */
  --brand-600: #1A7F81;
  /* +15% luz aprox */
  --brand-500: #1F8F91;
  /* +25% luz aprox */
  --brand-100: #DCE9E8;
  /* badges / pills */

  /* Ink / texto */
  --ink-900: #212529;
  /* texto fuerte */
  --ink-700: #3a4348;
  --ink-600: #4c565c;
  --ink-500: #6b757c;

  /* Líneas y fondos */
  --line-200: #e4e9e8;
  --line-250: #dbe3e2;
  --line-300: #c8d2d1;

  --bg-50: #ffffff;
  /* fondo app */
  --bg-card: #ffffff;

  --shadow: 0 8px 22px rgba(2, 6, 23, .08);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* Base */
* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  background: var(--bg-50);
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cards genéricas */
.app-card {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

/* ---------- Navbar ---------- */
.navbar {
  border-bottom: 1px solid var(--line-200)
}

.navbar .navbar-brand {
  color: var(--ink-900);
  letter-spacing: .2px
}

.navbar .nav-link {
  color: var(--ink-600);
  font-weight: 600
}

.navbar .nav-link.active {
  color: var(--brand-800)
}

/* ---------- Buscador ---------- */
.search-wrap {
  position: relative
}

.search-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-500);
}

.search-input {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding-left: 42px;
  height: 52px;
  background: #fff;
}

/* ---------- Sidebar ---------- */
.sidebar-card {
  position: sticky;
  top: 76px;
  background: #fff;
  border: 1px solid var(--line-250);
  border-radius: var(--radius-md);
  padding: 16px;
}

.side-group-title {
  color: var(--brand-900);
  font-weight: 800;
  font-size: .92rem;
  margin: .75rem 0 .35rem;
}

.side-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
}

.side-nav .nav-link .left {
  display: inline-flex;
  gap: .6rem;
  align-items: center
}

.side-nav .nav-link:hover,
.side-nav .nav-link.active {
  background: var(--brand-100);
  color: var(--brand-800);
}

.count-badge {
  background: var(--brand-100);
  color: var(--brand-800);
  border: 1px solid #b9cfcf;
  border-radius: 999px;
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: 800;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block
}

/* Chips de personas */
.assignee-list {
  row-gap: .5rem
}

.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--line-250);
  border-radius: 999px;
  padding: .25rem .55rem;
  background: #fff;
  cursor: pointer;
  user-select: none;
}

.assignee-chip img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover
}

.assignee-chip.active {
  border-color: var(--brand-600);
  background: var(--brand-100)
}

/* ---------- Task row ---------- */
.task-row {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  position: relative;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.task-row:hover {
  background: #dce9e8;
  border-color: #d8e2e1;
  box-shadow: var(--shadow)
}

.task-line {
  display: grid;
  grid-template-columns: 20px 20px 44px 1fr auto 130px;
  column-gap: 12px;
  align-items: center;
}

.drag-handle {
  cursor: grab;
  color: #94a3b8
}

.drag-handle:active {
  cursor: grabbing
}

.drag-ghost {
  opacity: 0.85 !important;
}

.drag-chosen {
  box-shadow: 0 8px 20px rgba(2, 6, 23, .12) !important
}

.drag-dashed {
  border: 2px dashed #94a3b8 !important;
  transform: rotate(-1.5deg) !important;
  background: #f8fafc !important
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover
}

.task-title {
  font-weight: 800;
  color: var(--brand-900)
}

.task-desc {
  color: var(--ink-600)
}

.badge-soft {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .8rem;
}

.task-checked .task-title,
.task-checked .task-desc {
  text-decoration: line-through;
  color: #94a3b8
}

/* Progreso dentro de la tarjeta */
.task-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem
}

.task-progress .bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden
}

.task-progress .bar>span {
  display: block;
  height: 100%;
  background: var(--brand-800);
  width: 0;
  transition: width .2s;
  border-radius: 999px
}

.task-progress .count {
  font-size: .8rem;
  color: var(--ink-600);
  font-weight: 700
}

/* Botonera en cada row */
.task-actionsbtn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
}

.task-actions .btn:hover {
  background: #f1f5f9
}

/* ---------- Calendar (FullCalendar) ---------- */
#calendar {
  min-height: 650px
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard .fc-list {
  border: 1px solid #e6eaef;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(2, 6, 23, .06);
}

.fc .fc-toolbar-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: #334155;
  text-transform: capitalize;
}

.fc .fc-button-group .fc-button,
.fc .fc-button {
  border: 1px solid #d5dde6;
  background: #f3f6fa;
  color: var(--brand-900);
  border-radius: 10px !important;
  padding: .45rem .9rem;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: lowercase;
}

.fc .fc-button-primary:not(:disabled):hover,
.fc .fc-button-primary.fc-button-active {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
}

.fc .fc-col-header-cell {
  background: #f7f9fc;
  border-color: #eef2f6
}

.fc .fc-col-header-cell-cushion {
  text-transform: uppercase;
  color: #475569;
  font-weight: 800
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: #eef2f6
}

.fc .fc-daygrid-day:hover {
  background: #f6fbff
}

.fc .fc-daygrid-day-number {
  color: #64748b;
  font-weight: 800;
  padding: 6px 10px;
  text-decoration: none !important
}

.fc .fc-day-today {
  background: #eef8f7 !important
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--brand-800);
  color: #fff;
  border-radius: 10px;
  padding: 2px 8px;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: #cbd5e1
}

.fc .fc-daygrid-event,
.fc .fc-timegrid-event {
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(2, 6, 23, .06);
  overflow: hidden;
  padding: 0 !important;
}

.fc-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .28rem .5rem;
  font-weight: 700
}

.fc-task-title.is-completed {
  text-decoration: line-through;
  opacity: .75
}

.avatar-mini {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .7)
}

.fc .fc-timegrid-slot,
.fc .fc-timegrid-axis,
.fc .fc-timegrid-divider {
  border-color: #eef2f6
}

.fc .fc-list .fc-list-day-cushion {
  background: #f7f9fc;
  color: #334155;
  font-weight: 800
}

/* Chips de clientes (sidebar del calendario) */
.client-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: grab;
  user-select: none;
  font-weight: 700;
}

.client-chip:active {
  cursor: grabbing
}

.client-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block
}

/* ---------- Config tables ---------- */
.area-row,
.client-row {
  display: grid;
  gap: .5rem;
  align-items: center
}

.area-row {
  grid-template-columns: 22px 1fr 1fr 46px 42px
}

.client-row {
  grid-template-columns: 22px 1fr 90px 42px
}

.icon-preview {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #111827;
}

.badge-active {
  background: #dcefe9;
  color: #0f4e4f;
  border: 1px solid #b8d9d5
}

.person-row {
  display: grid;
  grid-template-columns: 20px 180px 1fr auto;
  gap: .5rem;
  align-items: center;
  margin-bottom: .4rem;
}

/* ---------- Modal (branding y tabs) ---------- */
.modal-brand {
  border-radius: 12px;
  overflow: hidden
}

.modal-brand-header {
  background: var(--brand-800);
  color: #fff;
  padding: 1rem 1.25rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}

.modal-title {
  margin: 0;
  font-weight: 800
}

.modal-subtitle {
  font-size: .875rem;
  opacity: .9
}

.btn-close-white {
  filter: invert(1)
}

.modal-brand-footer {
  background: #f8fafc;
  border-top: 1px solid var(--line-250)
}

.btn.btn-brand-primary {
  background: var(--brand-800);
  border: 1px solid var(--brand-900);
  color: #fff;
}

.btn.btn-brand-primary:hover {
  background: var(--brand-900)
}

.btn.btn-ghost {
  background: #fff;
  border: 1px solid var(--line-300);
  color: var(--ink-900)
}

.btn.btn-ghost:hover {
  background: #f1f5f9
}

.modal-brand .nav-tabs .nav-link {
  border: 0;
  color: var(--ink-700)
}

.modal-brand .nav-tabs .nav-link.active {
  color: var(--brand-800);
  font-weight: 700;
  border-bottom: 2px solid var(--brand-800);
}

/* ---------- Editor (redacción) ---------- */
.editor-toolbar {
  display: flex;
  gap: .5rem
}

.btn-editor {
  border: 1px solid var(--line-300);
  background: #fff
}

.btn-editor:focus {
  outline: none;
  box-shadow: none
}

.editor-surface {
  min-height: 200px;
  border: 1px solid var(--line-300);
  border-radius: .5rem;
  padding: .75rem .875rem;
  background: #fff;
}

.editor-surface:focus {
  outline: 3px solid rgba(17, 100, 102, .15);
  /* halo tipo brand */
}

/* ---------- Subtareas ---------- */
.subtask-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  background: #fff;
}

.subtask-row input[type="text"] {
  border-radius: 8px;
  height: 36px
}

.subtask-row .drag {
  cursor: grab;
  color: #94a3b8
}

.subtask-row .drag:active {
  cursor: grabbing
}

.subtask-row .btn-group .btn {
  padding: .25rem .5rem
}

/* ---------- Choices.js (selects bonitos) ---------- */
/* Aplica: choicesEl.containerOuter.classList.add('choices--brand') en JS */
.choices--brand .choices__inner {
  border: 1px solid var(--line-300);
  border-radius: .5rem;
  min-height: 2.5rem;
  padding: .4rem .6rem;
}

.choices--brand.is-focused .choices__inner {
  border-color: var(--brand-800);
  box-shadow: 0 0 0 3px rgba(17, 100, 102, .15);
}

.choices--brand .choices__list--dropdown {
  border-color: #b9cfcf
}

.choices--brand .choices__item--selectable.is-highlighted {
  background: var(--brand-100);
  color: var(--brand-800);
}

/* Avatares en las options del Responsable */
.choice-avatar {
  display: inline-flex;
  align-items: center;
  gap: .5rem
}

.choice-avatar img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover
}

/* ---------- Helpers ---------- */
.badge.badge-soft {
  background: #f8fafc;
  border: 1px solid var(--line-200)
}

.fc .fc-task .mini-progress {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 800;
  opacity: .85
}

/* Áreas ocultas (las sin tareas activas) */
.area-hidden {
  display: none
}

.area-hidden.show {
  display: flex
}

/* Fix botón “Mostrar más/ Ocultar” en sidebar */
#btnAreasMore {
  margin-top: .5rem
}


/* ===== Campañas: timeline ===== */
.campaign-card {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.campaign-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: .75rem;
  padding: 12px 8px;
}

.campaign-track::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: calc(50% - 2px);
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
}

.campaign-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.campaign-step .dot {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 3px solid #e5e7eb;
  z-index: 1;
}

.campaign-step.done .dot {
  border-color: var(--brand-800);
  background: var(--brand-100);
}

.campaign-step .dot i {
  font-size: 20px;
}

.campaign-step .lbl {
  font-size: .82rem;
  text-align: center;
  color: var(--ink-700);
}

.campaign-step .date {
  font-size: .75rem;
  color: #94a3b8;
}

.campaign-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Rich editor simple del modal de campañas */
.richbox {
  overflow: auto;
}

.richbox:focus {
  outline: 2px solid var(--brand-200);
}

/* ===== Campañas: descripción en tarjeta ===== */
.campaign-card .small.text-muted {
  line-height: 1.3;
}

/* ===== Constructor de tareas (modal paso 2) ===== */
.cb-rows .cb-row {
  display: grid;
  grid-template-columns: 180px 1fr 170px 40px;
  gap: .5rem;
  align-items: center;
}

@media (max-width: 640px) {
  .cb-rows .cb-row {
    grid-template-columns: 1fr;
  }
}


/* ====== Campañas ====== */
.campaign-list {
  display: grid;
  gap: 14px;
}

.campaign-card {
  background: var(--bs-body-bg);
  border-radius: 14px;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
  padding: 18px 18px 14px;
}

.campaign-actions .btn-ghost {
  background: transparent;
  border: 0;
}

.campaign-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-top: 10px;
  align-items: start;
}

.campaign-step {
  text-align: center;
  opacity: .9;
}

.campaign-step .dot {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
  border: 2px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.campaign-step.done .dot {
  border-color: var(--bs-success);
  background: color-mix(in srgb, var(--bs-success) 10%, transparent);
}

.campaign-step .lbl {
  font-weight: 600;
  font-size: .9rem;
}

.campaign-step .date {
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

/* Badges suaves */
.badge-soft {
  border: 1px solid transparent;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Chips de cliente para drag en calendario */
.client-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid;
  border-radius: 999px;
  cursor: grab;
  user-select: none;
  margin: 4px 6px 0 0;
  font-size: .85rem;
}

.client-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

/* Rich text “objetivos” */
.richbox:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

/* Choices “bonitos” */
.choices--brand .choices__inner {
  border-radius: 10px;
  padding: 6px 8px;
  min-height: auto;
}

.choices--brand .choices__list--single {
  padding: 0;
}


/* Opcional: resaltar la campaña activa igual que el resto de side-nav */
#campaignNav .nav-link.active {
  background-color: #f1f3f5;
  border-radius: .5rem;
}