/* ===================================================================
   CAMPAÑAS
   Esta pantalla es parte de la misma aplicación, así que usa su sistema:
   los mismos tokens, sus fichas (.card), su tabla (table.people, que en el
   móvil se convierte sola en tarjetas), sus etiquetas (.tag), su línea de
   tiempo (.timeline) y el color de la persona que lleva cada cuenta.
   Aquí solo vive lo que es propio de una campaña: la ficha del índice, la
   ruta de la secuencia, la lista de preparación, la cola de acciones y el
   diálogo. Todo lo demás viene de styles.css a propósito.
   =================================================================== */

/* ---------- índice: una ficha por campaña ---------- */

.cp-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cp-cards .card { margin-bottom: 0; border-left: 3px solid var(--own, var(--line)); }

.cp-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.cp-card-obj {
  margin-top: 9px; font-size: 13.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-kpis { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.cp-kpi {
  font-size: 12.5px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px;
}
.cp-kpi b { color: var(--text); font-weight: 640; font-variant-numeric: tabular-nums; }
.cp-kpi-avisa { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.cp-kpi-avisa b { color: var(--warn); }

/* ---------- la cabecera de una campaña ---------- */

.cp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
  padding-left: 14px; border-left: 3px solid var(--own, var(--line));
}
.cp-head h1 { font-size: 24px; letter-spacing: -.03em; }
.cp-head-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.cp-head-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-head-obj { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.cp-link { color: var(--accent); }

/* Las cifras de la campaña, con la forma que ya tienen en Métricas. */
.cp-rates { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }

/* ---------- la ruta: qué le pasa a una persona, en orden ---------- */

.cp-ruta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.cp-paso {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.cp-paso b { color: var(--text); font-weight: 600; }
.cp-flecha { color: var(--faint); font-size: 12px; flex: none; }
.cp-nota { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }

/* ---------- preparación: qué falta antes de activar ---------- */

.cp-listo {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; margin-bottom: 24px;
}
.cp-checks { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.cp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.cp-check.is-ok { color: var(--text); }
.cp-tick {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--panel-2); color: var(--faint); border: 1px solid var(--line);
}
.cp-check.is-ok .cp-tick { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.cp-listo-pie { margin-top: 12px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* ---------- las cuatro vistas de una campaña ---------- */

.cp-tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cp-tabs .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cp-tabs .seg::-webkit-scrollbar { display: none; }
.cp-tabs .seg-btn { flex: none; }

/* ---------- participantes ---------- */

/* La tabla ya trae su aire de styles.css; dentro de la página no necesita el
   suyo propio ni el ancho máximo, que lo pone el contenedor. */
#cp-content .table-scroll { padding: 0 0 4px; max-width: none; margin: 0; }
#cp-content table.people { min-width: 720px; }
#cp-content .filters { align-items: center; }
#cp-content .filters .btn { flex: none; }
/* Aquí la caja de búsqueda no lleva el atajo de teclado de Personas, así que la
   ✕ de limpiar se va al borde y el texto recupera ese hueco. */
#cp-content .searchbox input, .modal-body .searchbox input { padding-right: 40px; }
#cp-content .search-clear { right: 11px; }

.cp-sec { margin-bottom: 26px; }
.cp-sec:last-child { margin-bottom: 0; }

.cp-page {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.cp-page-n { font-size: 12.5px; color: var(--faint); margin-right: auto; font-variant-numeric: tabular-nums; }

/* ---------- acciones: la misma fila que la agenda de envíos ---------- */

.cp-accion { cursor: pointer; }
.cp-accion .qprev { cursor: text; }
.cp-accion.is-open .qprev { -webkit-line-clamp: unset; display: block; }
.cp-accion-sub { font-weight: 600; color: var(--text); }
.cp-fallo {
  margin: 2px 0 0; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--err-soft); color: var(--err);
  font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-accion.is-open .cp-fallo { -webkit-line-clamp: unset; display: block; }
.cp-accion-mas { font-size: 11.5px; color: var(--faint); }

/* ---------- formularios ----------
   styles.css viste los campos que usa la aplicación (correo, número, área de
   texto y desplegables). Una campaña además escribe textos y direcciones, así
   que aquí se visten esos con exactamente la misma forma. */

.cp-form input[type=text],
.cp-form input[type=url],
.cp-form input[type=number],
.cp-form textarea,
.cp-form select,
.modal-body input[type=text],
.modal-body input[type=url],
.modal-body select {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.cp-form input:focus, .cp-form textarea:focus, .cp-form select:focus,
.modal-body input:focus, .modal-body select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.cp-form textarea { resize: vertical; line-height: 1.5; }
.cp-form input:disabled { color: var(--muted); background: var(--panel-2); cursor: default; }

.cp-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.cp-grid .field { margin-bottom: 0; }
.cp-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .cp-grid { grid-template-columns: 1fr; } }

.cp-check-field { display: flex; align-items: flex-start; gap: 10px; }
.cp-check-field input[type=checkbox] { width: 17px; height: 17px; margin-top: 2px; flex: none; }
.cp-check-field span { font-size: 14px; color: var(--text); }
.cp-check-field .hint { display: block; margin-top: 3px; }

.cp-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cp-form-foot .msg { margin-top: 0; }

/* Lo que no se edita aquí se lee igual, en una línea por dato. */
.cp-datos { display: grid; gap: 10px; }
.cp-dato { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.cp-dato-t { flex: 0 0 168px; color: var(--faint); font-size: 12.5px; }
.cp-dato-v { color: var(--text); min-width: 0; }
@media (max-width: 560px) { .cp-dato-t { flex-basis: 100%; } }

/* ---------- ficha del participante ---------- */

.cp-hitos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cp-hito {
  font-size: 12.5px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
}
.cp-hito b { color: var(--text); font-weight: 600; }
.cp-hito.is-off { color: var(--faint); }

.cp-riesgo {
  margin-top: 26px; padding: 15px 16px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--err); border-radius: var(--radius-sm);
}
.cp-riesgo .btn { margin-top: 12px; }
.cp-riesgo-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* Detalle de un evento: pares legibles, no un volcado de datos. */
.cp-ev-pares { display: grid; gap: 4px; margin-top: 7px; }
.cp-par { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; flex-wrap: wrap; }
.cp-par-k { color: var(--faint); flex: 0 0 132px; }
.cp-par-v { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.cp-par-v a { color: var(--accent); }
@media (max-width: 560px) { .cp-par-k { flex-basis: 100%; } }

/* ---------- alta de personas ---------- */

.cp-picks { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.cp-pick {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 13px;
  transition: border-color .15s, background .15s;
}
.cp-pick:hover { border-color: var(--accent); }
.cp-pick input { flex: none; }
.cp-pick-n { font-size: 14.5px; font-weight: 560; }
.cp-pick-s { font-size: 12.5px; color: var(--muted); }
.cp-pick-todos {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);
  padding: 2px 2px 0; cursor: pointer;
}
.cp-resultado { display: grid; gap: 6px; margin-top: 12px; }
.cp-res { font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.cp-res-ok { color: var(--ok); }
.cp-res-no { color: var(--muted); }
.cp-res-n { font-weight: 640; }

/* ---------- el diálogo ----------
   Mismo lenguaje que el de contactar: cabecera con el título y la ✕, cuerpo
   con su propio desplazamiento y, en el móvil, pegado abajo. La diferencia es
   que este es un <dialog> de verdad, así que cierra con Esc y devuelve el foco
   a donde estaba. */

#cp-dialog {
  padding: 0; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 18px 60px rgba(10, 12, 18, .28);
  width: min(620px, calc(100% - 32px)); max-width: none;
  max-height: min(86vh, 760px);
  overflow: hidden;
}
#cp-dialog[open] { display: flex; flex-direction: column; animation: pop .18s cubic-bezier(.22, .8, .3, 1); }
#cp-dialog::backdrop { background: rgba(10, 12, 18, .42); animation: fade .16s ease-out; }
#cp-dialog .modal-head { flex: none; }
#cp-dialog .modal-body { flex: 1; min-height: 0; }
#cp-dialog h3 {
  font-size: 12px; font-weight: 620; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin: 26px 0 12px;
}
#cp-dialog .timeline { margin-top: 4px; }

@media (max-width: 560px) {
  #cp-dialog {
    width: 100%; max-width: 100%; max-height: 90dvh;
    margin: auto auto 0; border-radius: 18px 18px 0 0; border-bottom: 0;
  }
  #cp-dialog[open] { animation: sheet .2s cubic-bezier(.22, .8, .3, 1); }
  #cp-dialog .modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- respiración en pantalla estrecha ---------- */

@media (max-width: 720px) {
  .cp-cards { grid-template-columns: 1fr; }
  .cp-head h1 { font-size: 21px; }
  .cp-rates { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .cp-rates .rate { padding: 12px 14px; }
  .cp-rates .rate-n { font-size: 22px; }
  /* La tabla ya se apila en tarjetas: aquí solo se le quita el ancho mínimo
     que necesita en escritorio. */
  #cp-content table.people { min-width: 0; }
  #cp-content .table-scroll { padding-bottom: 0; }
}