/* ============================================================
   Ficha de la iniciativa: jerarquía, aire y color por bloque.
   Se carga después de las demás, así que gana en lo que solape.
   ============================================================ */

/* ── El cajón ─────────────────────────────────────────────── */
.drawer {
  width: min(860px, 94vw);
  background: var(--surface2);
}
.drawer-head {
  padding: 14px 26px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  font-size: 25px; font-weight: 700; letter-spacing: -.6px; line-height: 1.25;
  padding: 0 26px; margin: 16px 0 4px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  width: calc(100% - 52px); color: var(--tx);
}
.drawer-title:hover { border-color: var(--line); background: var(--surface); }
.drawer-title:focus { outline: 2px solid var(--acc-soft); border-color: var(--acc); background: var(--surface); }

.drawer-tabs {
  padding: 0 26px; gap: 2px; margin: 10px 0 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 6;
}
.dtab {
  padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--tx3);
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.dtab:hover { color: var(--tx2); }
.dtab.active { color: var(--acc); border-bottom-color: var(--acc); }

.drawer-body { padding: 22px 26px 40px; background: var(--surface2); }

/* ── Cada bloque, una tarjeta con su color ────────────────── */
.drawer-body .sec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 16px;
  border-top: 3px solid var(--line2);
}
.drawer-body .sec h4 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 0 0 12px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--tx2); border-bottom: 1px solid var(--line);
}
#sec-resumen  { border-top-color: var(--acc); }
#sec-detalle  { border-top-color: var(--cyan); }
#sec-kpi      { border-top-color: var(--mint); }
#sec-paises   { border-top-color: #b07407; }
#sec-semanas  { border-top-color: var(--rose); }

/* ── Rejilla de campos con aire de verdad ────────────────── */
.drawer-body .grid2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px 18px;
}
.drawer-body .fld { display: grid; gap: 6px; align-content: start; }
.drawer-body .fld.wide { grid-column: 1 / -1; }
.drawer-body .fld > label {
  font: 700 10px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em;
  color: var(--tx3);
}
.drawer-body .fld input,
.drawer-body .fld select,
.drawer-body .fld textarea {
  font: 13.5px/1.55 var(--sans);
  padding: 9px 11px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--tx);
  width: 100%;
}
.drawer-body .fld textarea:not(.paso-tx):not(#paso-nuevo) { min-height: 84px; resize: vertical; }
.drawer-body .fld input:hover,
.drawer-body .fld select:hover,
.drawer-body .fld textarea:hover { border-color: var(--tx3); }
.drawer-body .fld input:focus,
.drawer-body .fld select:focus,
.drawer-body .fld textarea:focus {
  outline: 3px solid var(--acc-soft); border-color: var(--acc);
}
.drawer-body .hint { font-size: 11px; line-height: 1.5; color: var(--tx3); }
.drawer-body .hint a { color: var(--acc); }
.drawer-body .fld .check {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--tx2); text-transform: none; letter-spacing: 0; font-weight: 500;
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 12px; cursor: pointer;
}
.drawer-body .fld .check:hover { border-color: var(--line2); }

/* ── La fila de números del resumen ──────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  margin: 0 0 18px;
}
.stat { background: var(--surface); padding: 13px 15px; }
.stat > span {
  display: block; font: 700 9.5px/1 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--tx3); margin-bottom: 7px;
}
.stat > b {
  display: block; font-size: 20px; font-weight: 700; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--tx);
}
.stat > em {
  display: block; font-style: normal; font-size: 10.5px; line-height: 1.4;
  color: var(--tx3); margin-top: 5px;
}
.stat .pc.ok   { color: var(--mint); }
.stat .pc.warn { color: var(--amber); }
.stat .pc.bad  { color: var(--rose); }

/* ── Pie del cajón ───────────────────────────────────────── */
.drawer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 0 0; margin-top: 6px; border-top: 1px solid var(--line);
}

/* ── Rejilla semanal del cajón ───────────────────────────── */
.wkgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px;
}
.wkcell {
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 9px 7px;
}
.wkcell.now { border-color: var(--acc); background: #f5f3ff; }
.wkcell.fut { opacity: .62; }
.wkcell > label {
  display: block; font: 700 10px/1 var(--mono); color: var(--tx2); margin-bottom: 6px;
}
.wkcell > label .muted { font-weight: 400; color: var(--tx3); }
.wkcell input {
  width: 100%; font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums;
  padding: 5px 6px; border: 1px solid var(--line2); border-radius: 6px;
  background: var(--surface); color: var(--tx); text-align: right;
}
.wkcell input:focus { outline: 2px solid var(--acc-soft); border-color: var(--acc); }
.wkcell .ly {
  display: block; font: 9.5px/1.3 var(--mono); color: var(--tx3);
  margin-top: 5px; text-align: right;
}

/* ── Tarjetas del listado: más respiración ───────────────── */
.card { padding: 17px 18px; border-radius: 14px; }
.card-top { gap: 9px; margin-bottom: 9px; }
.card-desc { font-size: 12.8px; line-height: 1.6; margin: 0 0 13px; }
.card-kpi { padding: 12px 13px; border-radius: 10px; margin-bottom: 12px; }
.card-foot { gap: 8px; padding-top: 11px; }

/* ── Nada de scroll horizontal dentro del cajón ──────────── */
.drawer-body .tbl-wrap { max-width: 100%; overflow-x: auto; }

@media (max-width: 720px) {
  .drawer-title { font-size: 21px; padding: 0 16px; width: calc(100% - 32px); }
  .drawer-head, .drawer-tabs { padding-left: 16px; padding-right: 16px; }
  .drawer-body { padding: 16px 16px 32px; }
  .drawer-body .sec { padding: 16px 15px; border-radius: 12px; }
}

/* ── Checklist: cajas que se ajustan al texto, sin hueco muerto ─────
   El textarea general tiene min-height para escribir párrafos; estos son
   de una línea y crecen solos, así que se les quita a mano. */
.drawer-body .paso {
  /* marca · numero · texto · firma · flechas · borrar */
  grid-template-columns: auto 22px 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 11px;
}
.drawer-body .fld textarea.paso-tx,
.drawer-body .fld textarea#paso-nuevo {
  min-height: 0 !important;
  height: auto;
  resize: none !important;
  padding: 4px 7px;
  font: 13.5px/1.5 var(--sans);
  border-radius: 7px;
  overflow: hidden;
}
.drawer-body .fld textarea.paso-tx { border-color: transparent; background: transparent; width: 100%; min-width: 0; }
.drawer-body .fld textarea.paso-tx:hover { border-color: var(--line); background: var(--surface2); }
.drawer-body .fld textarea.paso-tx:focus { background: var(--surface); }
.drawer-body .paso-add { align-items: center; gap: 9px; margin-top: 4px; }
.drawer-body .paso-add textarea { padding: 9px 11px; }
.drawer-body .paso-add .btn-primary { white-space: nowrap; padding: 9px 15px; }
.drawer-body ol.pasos { gap: 6px; }
.drawer-body .paso-n { line-height: 1.4; text-align: center; }
.drawer-body .paso-ck { margin-top: 0; }

/* ── Campos más estrechos y compactos ─────────────────────────
   Cuatro columnas de 230 px dejaban cajas enormes para escribir una
   fecha o elegir una marca. Se estrechan y se bajan de altura. */
.drawer-body .grid2 {
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 13px 14px;
}
.drawer-body .fld input,
.drawer-body .fld select,
.drawer-body .fld textarea {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 8px;
}
.drawer-body .fld input[type="number"] { max-width: 190px; }
.drawer-body .fld input[type="date"]   { max-width: 190px; }
.drawer-body .fld > label { font-size: 9.5px; }
.drawer-body .fld .check {
  padding: 8px 11px; white-space: nowrap; width: fit-content;
  gap: 9px; font-size: 12.5px;
}
.drawer-body .fld .check input { width: auto; }
.drawer-body .sec { padding: 18px 20px; }
.drawer-body .sec h4 { margin-bottom: 14px; padding-bottom: 10px; }
/* Los textos largos sí siguen anchos: son para escribir párrafos */
.drawer-body .fld.wide textarea { max-width: none; }

/* Más columnas y controles con techo de ancho: un select de marca no
   necesita 233 px, y así la ficha se lee de un vistazo. */
.drawer-body .grid2 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.drawer-body .fld:not(.wide) input,
.drawer-body .fld:not(.wide) select { max-width: 200px; }
.drawer-body .fld:not(.wide) input[type="number"],
.drawer-body .fld:not(.wide) input[type="date"] { max-width: 168px; }

/* Cajón más estrecho: 860 px en vez de 1080. Con menos ancho la ficha se
   lee de arriba abajo sin barrer con la vista, y las tablas anchas (país y
   semanas) siguen teniendo su propio scroll dentro del bloque. */
.drawer-body { padding: 20px 22px 36px; }
.drawer-title { padding: 0 22px; width: calc(100% - 44px); font-size: 23px; }
.drawer-head, .drawer-tabs { padding-left: 22px; padding-right: 22px; }
.stat-row { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.stat { padding: 11px 13px; }
.stat > b { font-size: 18px; }
.drawer-body .grid2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wkgrid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }


/* ── El "por qué" en bloques ─────────────────────────────────
   Cada línea del texto lleva una etiqueta ("EL KPI ·", "A DÓNDE VA ·")
   y se pinta como una fila con la etiqueta a la izquierda, para poder
   leer la iniciativa entera de un barrido. */
.pq-wrap label { display: flex; align-items: center; gap: 10px; }
.pq-edit {
  padding: 1px 8px;
  border: 1px solid #e3e8ef;
  border-radius: 20px;
  background: #fff;
  font-size: 10.5px;
  color: #6b7484;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.pq-edit:hover { border-color: #b9a2ff; color: #6d3fe0; }

.drawer-body .pq-ta { min-height: 260px; }
.pq-wrap .hidden { display: none; }

.pq-bloques { display: flex; flex-direction: column; gap: 1px; }
.pq-b {
  padding: 9px 12px;
  background: #fbfcfe;
  border-left: 2px solid #e3e8ef;
}
.pq-b:first-child { border-top-right-radius: 8px; }
.pq-b:last-child { border-bottom-right-radius: 8px; }
.pq-b:nth-child(1) { border-left-color: #7c5cff; }
.pq-b:nth-child(2) { border-left-color: #22d3ee; }
.pq-b:nth-child(3) { border-left-color: #34d399; }
.pq-b:nth-child(4) { border-left-color: #fbbf24; }
.pq-b:nth-child(5) { border-left-color: #a78bfa; }
.pq-b.pq-ojo { background: #fffbeb; border-left-color: #f59e0b; }

.pq-etq {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .05em;
  color: #6b7484;
}
.pq-b.pq-ojo .pq-etq { color: #b45309; }
.pq-b p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: #38414f;
}
.pq-b.pq-ojo p { color: #78350f; }

.pq-plano p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.62;
  color: #38414f;
}
.pq-plano p:last-child { margin-bottom: 0; }

.pq-vacio {
  margin: 0;
  padding: 11px 13px;
  background: #f8f9fc;
  border-radius: 8px;
  font-size: 12.5px;
  color: #8b93a3;
}
.pq-vacio b { color: #6d3fe0; }


/* ── La fórmula del KPI ─────────────────────────────────────── */
.ck-formula {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #e9edf4;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: #8b95a7;
  cursor: help;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ckf-ig { color: #6d3fe0; font-weight: 700; }

/* En la ficha, desglosada */
.fx-wrap label { display: flex; align-items: center; gap: 10px; }
.drawer-body .fx-ta { min-height: 190px; font-family: var(--mono); font-size: 11.5px; }
.fx-wrap .hidden { display: none; }

.fx {
  border: 1px solid #e9edf4;
  border-radius: 10px;
  overflow: hidden;
}
.fx-eq {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 13px;
  background: #f7f5ff;
  border-bottom: 1px solid #ece7ff;
}
.fx-eq > span {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: #6d3fe0;
  line-height: 1;
}
.fx-eq code {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: #2e1c66;
  background: transparent;
}

.fx-partes { margin: 0; }
.fx-p {
  display: grid;
  grid-template-columns: minmax(94px, 168px) 1fr;
  gap: 10px;
  padding: 8px 13px;
  border-bottom: 1px solid #f4f6fa;
}
.fx-p:last-child { border-bottom: 0; }
.fx-p dt {
  font-size: 11px;
  font-weight: 650;
  color: #5a6478;
  line-height: 1.5;
}
.fx-p dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.58;
  color: #38414f;
}
.fx-p.fx-ojo { background: #fffbeb; }
.fx-p.fx-ojo dt { color: #b45309; }
.fx-p.fx-ojo dd { color: #78350f; }

.fx-vacio {
  margin: 0;
  padding: 11px 13px;
  background: #f8f9fc;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8b93a3;
}
.fx-vacio b { color: #6d3fe0; }

@media (max-width: 560px) {
  .fx-p { grid-template-columns: 1fr; gap: 2px; }
}


/* ── Reordenar los pasos ─────────────────────────────────────
   Flechas y no arrastre: cada paso es un textarea y arrastrar
   desde dentro de un campo de texto pelea con la selección. */
.paso-mov {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
  opacity: 0;
  transition: opacity .12s;
}
.paso:hover .paso-mov,
.paso:focus-within .paso-mov { opacity: 1; }
.pmov {
  width: 17px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #a8b0be;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
}
.pmov:hover { background: #eef1f6; color: #5a6478; }
.pmov:disabled { opacity: .22; cursor: default; }
.pmov:disabled:hover { background: transparent; color: #a8b0be; }