/* ─── Contrato KOL ──────────────────────────────────────────
   Pantalla izquierda (papel del contrato) + editor de toggles que
   vive dentro del cuerpo del panel. Usa los tokens de diseño de la
   app (var(--bg1/--line/--accent/...)) y la escala de tipos de 5
   pasos (0.6875 / 0.8125 / 1 / 1.375 / 1.875 rem).
   ──────────────────────────────────────────────────────────── */

/* ── Pantalla del documento (a la izquierda del panel de contacto) ── */
.contract-screen {
  position: fixed;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 430px;                 /* deja libre el ancho del panel de contacto */
  background: var(--bg1);
  border-right: 1px solid var(--line);
  z-index: 29;                  /* bajo el panel (z-index:30), sobre el contenido */
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 2px 0 16px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.contract-screen.open {
  transform: translateX(0);
  pointer-events: auto;
}

.contract-screen-hd {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.contract-screen-hd .csh-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}
.contract-screen-hd .csh-sub {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text3);
}
.contract-screen-hd .csh-close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line2);
  color: var(--text3);
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: all .15s;
}
.contract-screen-hd .csh-close:hover { color: var(--text); border-color: var(--accent); }

.contract-doc-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;          /* el papel nunca debe desbordar a los lados */
  padding: 28px 32px;
}

/* El papel — fondo claro fijo (documento imprimible), independiente del tema. */
.contract-doc {
  background: #fff;
  color: #1a1a1a;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 56px;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.55;
}
.contract-doc .header-tag {
  text-align: center; font-size: 9pt; color: #888;
  text-transform: uppercase; letter-spacing: .15em; margin-bottom: 8px; font-weight: 600;
}
.contract-doc h1 { text-align: center; font-size: 18pt; color: #1F4E79; margin: 0 0 6px; font-weight: 700; }
.contract-doc .date-line { text-align: center; font-size: 10pt; color: #555; margin-bottom: 22px; }
.contract-doc .recitals {
  background: #f8f9fa; border-left: 3px solid #1F4E79;
  padding: 10px 14px; margin: 14px 0; font-size: 10pt;
}
.contract-doc .recitals p { margin-bottom: 5px; }
.contract-doc .part-divider {
  text-align: center; font-size: 11pt; font-weight: 700; color: #1F4E79;
  letter-spacing: .2em; text-transform: uppercase; margin: 22px 0 10px;
}
.contract-doc h2 { font-size: 12pt; color: #1F4E79; margin: 20px 0 8px; font-weight: 700; }
.contract-doc h3 { font-size: 10.5pt; margin: 10px 0 4px; font-weight: 700; color: #2a2a2a; }
.contract-doc p { margin-bottom: 8px; text-align: justify; }
.contract-doc ul { margin: 4px 0 10px 22px; }
.contract-doc li { margin-bottom: 3px; }
.contract-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 10pt; }
.contract-doc th { background: #D6E4F0; text-align: left; padding: 6px 10px; border: 1px solid #bbb; font-weight: 600; }
.contract-doc td { padding: 6px 10px; border: 1px solid #bbb; }
/* El papel debe verse IGUAL que el PDF. modern.css aplica globales con
   !important (`table td/th { padding:12px 14px }` y un `table th` gris/sans
   chico) que inflan y destiñen la tabla del documento SÓLO en pantalla (el
   PDF no carga modern.css). Restauramos el look impreso con !important. */
.contract-doc th, .contract-doc td {
  padding: 6px 10px !important;
  font-size: 10pt !important;
  border: 1px solid #bbb !important;
  font-family: inherit !important;
}
.contract-doc th {
  background: #D6E4F0 !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: default !important;
}
/* table.css (Pro Data Grid) aplica globales a TODA <table>: un
   `min-width:1900px` y un `thead{position:sticky}`. Esos globales se cuelan
   en el documento SÓLO en pantalla (el PDF no carga table.css) y empujan la
   tabla a 1900px de ancho → se desborda del papel y los meses 2/3 quedan
   fuera, obligando a scroll. Anulamos ambos: la tabla vuelve a 100% del
   ancho del papel (con pocos meses entra completa; con muchos, el wrap hace
   scroll horizontal contenido, como en el PDF). */
.contract-doc table,
.contract-doc table.kpi-table { min-width: 0 !important; }
.contract-doc thead { position: static !important; z-index: auto !important; }
/* La tabla de KPIs puede tener muchos meses: si no cabe en el papel, hace
   scroll horizontal DENTRO de su contenedor (nunca se sale ni se corta), en
   vez de partir los encabezados. Con pocos meses ocupa el 100% del ancho. */
.contract-doc .doc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.contract-doc .doc-table-wrap::-webkit-scrollbar { height: 6px; }
.contract-doc .doc-table-wrap::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.contract-doc table.kpi-table { width: 100%; }
.contract-doc table.kpi-table th,
.contract-doc table.kpi-table td { white-space: nowrap; text-align: center; }
.contract-doc table.kpi-table th:first-child,
.contract-doc table.kpi-table td:first-child { text-align: left; white-space: normal; min-width: 150px; }
.contract-doc .sig-closing { text-align: center; margin-top: 16px; font-size: 9.5pt; color: #555; font-style: italic; }
.contract-doc .sig-block {
  margin-top: 32px; padding-top: 18px; border-top: 1px solid #ddd;
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
}
.contract-doc .sig-line { border-bottom: 1px solid #888; margin: 32px 0 6px; height: 1px; }
.contract-doc .sig-label { font-size: 9pt; color: #666; }
.contract-doc .ph { background: #fff8d6; padding: 1px 4px; border-radius: 3px; color: #856404; }
.contract-doc strong { color: #1a1a1a; }

/* ── Editor (vive dentro de #panBody, a la derecha) ── */
.kfc-editor { font-family: var(--sans); }
.kfc-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.kfc-action {
  flex: 1; background: var(--accent); color: #1a1a1a; border: none;
  padding: 8px 12px; border-radius: var(--radius); font-weight: 600;
  cursor: pointer; font-size: 0.6875rem; transition: opacity .15s;
}
.kfc-action:hover { opacity: .9; }
.kfc-action.ghost { background: var(--bg2); color: var(--text2); border: 1px solid var(--line2); }
.kfc-doc-toggle { display: none; }   /* solo visible en mobile */

.kfc-sec {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.kfc-sec-hd {
  padding: 9px 12px; background: var(--bg3); cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center;
}
.kfc-sec-tit {
  font-weight: 600; font-size: 0.6875rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
}
.kfc-sec-ar { color: var(--text3); font-size: 0.6875rem; transition: transform .15s; }
.kfc-sec-bd { padding: 12px; display: block; }
.kfc-sec.col .kfc-sec-bd { display: none; }
.kfc-sec.col .kfc-sec-ar { transform: rotate(-90deg); }

.kfc-editor label {
  display: block; font-size: 0.6875rem; color: var(--text2);
  margin: 8px 0 3px;
}
.kfc-sec-bd > label:first-child { margin-top: 0; }
.kfc-editor input[type="text"],
.kfc-editor input[type="number"],
.kfc-editor input[type="date"],
.kfc-editor textarea,
.kfc-editor select {
  width: 100%; background: var(--bg1); border: 1px solid var(--line2);
  border-radius: 6px; padding: 6px 8px; color: var(--text);
  font-size: 0.6875rem; font-family: inherit;
}
.kfc-editor input:focus, .kfc-editor textarea:focus, .kfc-editor select:focus {
  outline: none; border-color: var(--accent);
}
.kfc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kfc-hint { font-size: 0.6875rem; color: var(--text3); margin: 4px 0; font-style: italic; }

/* Toggle group */
.kfc-tg { display: flex; gap: 4px; margin-top: 4px; }
.kfc-tbtn {
  flex: 1; padding: 5px 8px; background: var(--bg1); border: 1px solid var(--line2);
  color: var(--text3); border-radius: 6px; cursor: pointer; font-size: 0.6875rem;
  text-align: center; transition: all .15s;
}
.kfc-tbtn:hover { color: var(--text2); }
.kfc-tbtn.on { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }

/* Sched (retainer por mes) */
.kfc-sched { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; margin-top: 4px; }
.kfc-sched span { font-size: 0.6875rem; color: var(--text3); }

/* Checkboxes */
.kfc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.kfc-check {
  display: flex; align-items: center; padding: 6px 8px;
  background: var(--bg1); border: 1px solid var(--line2);
  border-radius: 6px; cursor: pointer; font-size: 0.6875rem; user-select: none;
  color: var(--text2); transition: all .15s;
}
.kfc-check.on { background: rgba(240, 180, 41, .1); border-color: var(--accent); color: var(--accent); }
.kfc-ck { margin-right: 6px; width: 12px; display: inline-block; }

/* Add button */
.kfc-add {
  background: transparent; border: 1px dashed var(--line2); color: var(--text3);
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 0.6875rem; margin-top: 6px;
  transition: all .15s;
}
.kfc-add:hover { color: var(--accent); border-color: var(--accent); }
.kfc-del { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 0.8125rem; padding: 0 4px; }

/* Calc box */
.kfc-calc {
  background: var(--bg1); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 8px 10px; margin-top: 8px;
  font-size: 0.6875rem; color: var(--text2); font-family: var(--mono); line-height: 1.5;
}
.kfc-calc b { color: var(--accent); }

/* Tarjeta de red */
.kfc-netcard {
  background: var(--bg1); border: 1px solid var(--line2); border-radius: 8px;
  padding: 10px; margin-bottom: 8px;
}
.kfc-nethd { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.kfc-nethd input { flex: 1; font-weight: 600; color: var(--accent); background: var(--bg2); }
.kfc-deliv { display: grid; grid-template-columns: 80px 50px 1fr; gap: 6px; align-items: center; margin-top: 5px; }
.kfc-deliv-lab { font-size: 0.6875rem; color: var(--text2); }
.kfc-deliv input[type="number"] { text-align: center; padding: 5px; }
.kfc-freq { display: flex; gap: 3px; }
.kfc-freq-b {
  flex: 1; padding: 4px 0; text-align: center; font-size: 0.6875rem;
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text3);
  border-radius: 4px; cursor: pointer; transition: all .12s;
}
.kfc-freq-b.on { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }

/* Matriz KPIs — scroll horizontal contenido DENTRO del panel angosto (nunca
   empuja la página). La primera columna (nombre del KPI) queda fija para no
   perder el contexto al deslizar con varios meses. */
.kfc-matrix-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
.kfc-matrix-wrap::-webkit-scrollbar { height: 6px; }
.kfc-matrix-wrap::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; }
.kfc-monthbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.kfc-monthbtns .kfc-add { margin-top: 0; }
/* La matriz NO se estira al ancho del panel: cada columna tiene un ancho
   natural compacto (etiqueta + meses), de modo que las celdas quedan juntas
   y prolijas. Con pocos meses entra completa; con muchos, el wrap hace scroll. */
.kfc-matrix { width: 100%; min-width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 0.6875rem; }
.kfc-matrix th { white-space: nowrap; }
/* Inputs de valor con ancho fijo: no reclaman su ancho intrínseco por defecto. */
.kfc-matrix td input[type="number"] { width: 58px; }
.kfc-matrix .kfc-month-in { width: 58px; }
/* Columna del KPI: pegada a la izquierda mientras se desliza la tabla. */
.kfc-matrix th.rl, .kfc-matrix td.lab {
  position: sticky; left: 0; z-index: 2;
  box-shadow: 1px 0 0 var(--line2);
}

/* Historial de versiones del contrato (por KOL) */
.kfc-hist-empty { font-size: 0.6875rem; color: var(--text3); font-style: italic; margin: 10px 0 2px; }
.kfc-hist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.kfc-hist-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg1); border: 1px solid var(--line2);
  border-radius: 6px; padding: 7px 9px;
}
.kfc-hist-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kfc-hist-meta b { font-size: 0.6875rem; color: var(--text); font-family: var(--mono); }
.kfc-hist-note { font-size: 0.6875rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfc-hist-kol { font-size: 0.6875rem; color: var(--text3); }
.kfc-hist-actions { display: flex; gap: 4px; flex-shrink: 0; }
.kfc-hist-btn {
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text2);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 0.6875rem;
  transition: all .15s;
}
.kfc-hist-btn:hover { border-color: var(--accent); color: var(--accent); }
.kfc-hist-btn.del:hover { border-color: var(--red); color: var(--red); }

/* Barra de plantillas */
.kfc-tplbar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.kfc-tplsel {
  flex: 1; background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px;
  color: var(--text); font-size: 0.6875rem; padding: 6px 8px; font-family: inherit;
}
.kfc-tplbar .kfc-add { margin-top: 0; padding: 6px 9px; }

/* Badges "su info" / "nuestra info" para aclarar de quién es cada dato. */
.kfc-who {
  font-size: 0.6875rem; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-pill);
  margin-left: 6px; text-transform: none; letter-spacing: 0;
}
.kfc-who.them { background: rgba(62,166,255,.14); color: var(--a2); }
.kfc-who.us { background: rgba(240,180,41,.14); color: var(--accent); }
.kfc-matrix th {
  text-align: center; padding: 6px 4px; background: var(--bg3); color: var(--accent);
  font-size: 0.6875rem; font-weight: 600; border: 1px solid var(--line2);
}
.kfc-matrix th.rl { text-align: left; padding-left: 8px; }
.kfc-matrix td.lab { width: 132px; }
/* La etiqueta del KPI llena su columna y se muestra completa, sin truncarse. */
.kfc-matrix .kfc-lab-in { width: 124px; text-align: left; }
.kfc-matrix td { padding: 3px; border: 1px solid var(--line2); background: var(--bg1); }
.kfc-matrix td.lab { background: var(--bg3); padding: 4px 6px; }
.kfc-matrix input { border: none; background: transparent; padding: 3px 5px; width: 100%; font-size: 0.6875rem; text-align: center; }
.kfc-matrix td.lab input, .kfc-matrix .kfc-month-in { color: var(--text); }
.kfc-matrix .kfc-month-in { color: var(--accent); }

/* ── Anula los overrides globales de modern.css que inflaban la matriz:
   `table td, table th { padding: 12px 14px !important }` e
   `input[...] { padding: 9px 12px !important; border-radius: 10px !important }`.
   Sin esto, cada celda sumaba ~28px de padding y las 3 columnas de meses no
   entraban → scroll horizontal con sólo 3 meses. Aquí restauramos celdas
   compactas y dejamos que los meses se repartan el ancho del panel: con 3
   meses la tabla entra completa; el scroll aparece sólo al agregar el 4º/5º. */
.kfc-matrix td, .kfc-matrix th { padding: 3px !important; font-size: 0.6875rem !important; }
.kfc-matrix th { padding: 6px 4px !important; }
.kfc-matrix th.rl { padding-left: 8px !important; }
.kfc-matrix td.lab { padding: 4px 6px !important; }
.kfc-matrix input {
  padding: 4px 6px !important;
  border: 1px solid var(--line2) !important;
  border-radius: 6px !important;
  background: var(--bg1) !important;
  box-sizing: border-box;
}
/* Los inputs de mes llenan su celda (no ancho fijo de 58px) y la celda tiene
   un mínimo razonable: cuando la suma de mínimos supera el ancho del panel,
   recién ahí el wrap hace scroll. */
.kfc-matrix td input[type="number"], .kfc-matrix .kfc-month-in {
  width: 100% !important; min-width: 54px;
}
.kfc-matrix .kfc-lab-in { width: 100% !important; }

/* ── Responsive: en pantallas chicas el panel ocupa todo el ancho,
   así que la pantalla del documento se vuelve overlay full-screen
   que se muestra solo al tocar "Ver contrato". ── */
@media (max-width: 860px) {
  .contract-screen {
    right: 0;
    z-index: 31;                /* por encima del panel cuando se invoca */
    transform: translateX(-100%);
  }
  .contract-screen.open { transform: translateX(-100%); }   /* oculto por defecto */
  .contract-screen.open.mobile-show { transform: translateX(0); }
  .kfc-doc-toggle { display: block; }
  .contract-doc-wrap { padding: 16px 12px; }
  .contract-doc { padding: 28px 22px; }
  /* Matriz KPIs más compacta en móvil para que pocos meses entren sin scroll. */
  .kfc-matrix td.lab { width: 116px; padding: 4px; }
  .kfc-matrix .kfc-lab-in { width: 108px; }
  .kfc-matrix td input[type="number"], .kfc-matrix .kfc-month-in { width: 50px; }
}