/* ============================================================
   KAIRO - JOURNAL (Mapeo por temporalidad + reflexion post-trade)
   Nucleo visual compartido por el drawer del Trade Log y Nueva Operacion.
   Panel continuo de temporalidades con editor enriquecido: texto,
   negrita/cursiva, listas e imagenes intercaladas en el cursor.

   Composicion y medidas del modulo de diseno "Mapeo Temporalidad"; colores,
   tipografia y superficies SIEMPRE desde los tokens de Kairo, asi que claro y
   oscuro salen del mismo CSS. Sin !important: la especificidad .kmp .x basta
   para ganar al `button:hover` y al `textarea` del tema.
   ============================================================ */
.kmp{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0;box-sizing:border-box;
  font-family:var(--font-ui);color:var(--text)}
.kmp *,.kmp *::before,.kmp *::after{box-sizing:border-box}

/* ---------- Cabecera del modulo ---------- */
.kmp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.kmp-titles{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 280px}
.kmp .kmp-title{margin:0}
.kmp-desc{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-3);text-wrap:pretty}
.kmp-meta{display:flex;align-items:center;gap:14px;flex:none}
.kmp-status{white-space:nowrap;font-size:11.5px;line-height:1.3;color:var(--text-4)}
.kmp-status.is-warn{color:var(--text-2)}
.kmp-status.is-err{color:var(--red)}
.kmp-prog{display:flex;align-items:center;gap:8px}
.kmp-segs{display:flex;gap:3px}
.kmp-seg{width:12px;height:4px;border-radius:2px;background:var(--border-hover);transition:background-color .2s ease}
.kmp-seg.is-on{background:var(--primary)}
.kmp-progn{white-space:nowrap;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}

/* ---------- Avisos ---------- */
.kmp-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:11px;border:1px solid rgba(var(--red-rgb),.22);background:var(--red-soft);
  font-size:12px;line-height:1.45;color:var(--red)}
.kmp-banner[hidden]{display:none}
.kmp-banner.is-info{border-color:var(--border);background:var(--surface-2);color:var(--text-2)}
.kmp-banner-t{flex:1 1 240px;min-width:0}
.kmp .kmp-banner-b,.kmp .kmp-banner-b:hover,.kmp .kmp-banner-b:focus,.kmp .kmp-banner-b:active{
  flex:none;border:0;border-radius:8px;padding:8px 12px;margin:0;box-shadow:none;
  background:var(--surface-3);color:var(--text);font:600 12px/1.2 var(--font-ui);text-transform:none;letter-spacing:normal;cursor:pointer}

/* ---------- Panel continuo ---------- */
.kmp-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px}
.kmp-row{min-width:0}
.kmp-row + .kmp-row{border-top:1px solid var(--border)}
.kmp .kmp-rowh,.kmp .kmp-rowh:hover,.kmp .kmp-rowh:focus,.kmp .kmp-rowh:active{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;margin:0;padding:12px 16px;
  border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;
  font:inherit;text-align:left;text-transform:none;letter-spacing:normal;cursor:pointer;
  transition:background-color .13s ease}
.kmp .kmp-rowh:hover{background:rgba(var(--primary-rgb),.04)}
.kmp .kmp-rowh:focus-visible{outline:2px solid rgba(var(--primary-rgb),.6);outline-offset:-2px}
.kmp-badge{flex:none;min-width:46px;padding:6px 8px;border-radius:8px;text-align:center;
  font-family:var(--font-mono);font-size:12px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;
  background:rgba(var(--neutral-rgb),.12);color:var(--text-3);transition:background-color .2s ease,color .2s ease}
.kmp-row.is-doc .kmp-badge{background:var(--primary-soft);color:var(--primary-link)}
.kmp-sum{flex:1 1 0;width:0;min-width:0;display:flex;align-items:center;gap:8px;
  font-size:12.5px;line-height:1.4;color:var(--text-3)}
.kmp-sumt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kmp-sumi{flex:none;display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-3)}
.kmp-sumi[hidden]{display:none}
.kmp-sumi svg{width:12px;height:12px}
.kmp-state{flex:none;display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;color:var(--text-4)}
.kmp-row.is-doc .kmp-state{color:var(--text-2)}
.kmp-dot{width:6px;height:6px;border-radius:50%;background:var(--border-hover)}
.kmp-row.is-doc .kmp-dot{background:var(--primary)}
.kmp-chev{flex:none;width:14px;height:14px;color:var(--text-4);transition:transform .2s ease}
.kmp-row.is-open .kmp-chev{transform:rotate(180deg)}

/* Plegado animado sin medir alturas: rejilla 0fr -> 1fr. */
.kmp-bodyw{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .22s}
.kmp-row.is-open .kmp-bodyw{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .22s cubic-bezier(.2,.7,.2,1),visibility 0s}
.kmp-bodyi{overflow:hidden;min-height:0}
.kmp-body{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px;min-width:0}

/* ---------- Caja del editor ---------- */
.kmp-ed{width:100%;min-width:0;background:var(--field);border:1px solid var(--border);border-radius:10px;
  transition:border-color .13s ease}
.kmp-ed.is-focus{border-color:rgba(var(--primary-rgb),.45)}
.kmp-tb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px 6px;border-bottom:1px solid var(--border-2)}
.kmp-tb[hidden]{display:none}
.kmp .kmp-tbb,.kmp .kmp-tbb:hover,.kmp .kmp-tbb:focus,.kmp .kmp-tbb:active{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:32px;height:30px;margin:0;padding:0 7px;border:0;border-radius:7px;box-shadow:none;
  background:transparent;color:var(--text-3);font:600 13px/1 var(--font-ui);
  text-transform:none;letter-spacing:normal;cursor:pointer;transition:background-color .12s ease,color .12s ease}
.kmp .kmp-tbb:hover{background:rgba(var(--primary-rgb),.08);color:var(--text)}
.kmp .kmp-tbb:focus-visible{outline:2px solid rgba(var(--primary-rgb),.6);outline-offset:1px}
.kmp .kmp-tbb[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary-link)}
.kmp .kmp-tbb:disabled,.kmp .kmp-tbb:disabled:hover{opacity:.38;cursor:default;background:transparent;color:var(--text-3)}
.kmp .kmp-tbb svg{width:15px;height:15px;flex:none}
.kmp .kmp-tbb.is-i{font:italic 500 14px/1 Georgia,"Times New Roman",serif}
.kmp .kmp-tbb.is-img{padding:0 9px;font:500 12px/1 var(--font-ui)}
.kmp-tbsep{width:1px;height:16px;margin:0 4px;background:var(--border)}
.kmp-hint{margin-left:auto;padding:0 6px;white-space:nowrap;font-size:11px;color:var(--text-4)}

/* ---------- Contenido editable (ProseMirror) ----------
   Una linea = un parrafo, sin margen entre ellas: se lee como el cuaderno
   continuo de M4.5. Tamano de texto escrito = el congelado de Kairo (+1px). */
.kmp .kmp-pm{position:relative;min-height:64px}
.kmp .kmp-pm .ProseMirror{outline:none;min-height:64px;padding:12px 16px 16px;
  font-family:var(--font-ui);font-size:14.5px;line-height:1.62;color:var(--text);caret-color:var(--primary);
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.kmp .kmp-pm .ProseMirror p{margin:0;min-height:1.62em}
.kmp .kmp-pm .ProseMirror ul,.kmp .kmp-pm .ProseMirror ol{margin:2px 0;padding-left:22px}
.kmp .kmp-pm .ProseMirror li{margin:0}
.kmp .kmp-pm .ProseMirror li > p{margin:0}
.kmp .kmp-pm .ProseMirror li::marker{color:var(--primary-link)}
.kmp .kmp-pm .ProseMirror strong{font-weight:700;color:var(--text)}
.kmp .kmp-pm .ProseMirror em{font-style:italic}
.kmp .kmp-pm .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);
  float:left;height:0;pointer-events:none;white-space:nowrap;color:var(--text-4)}
.kmp .kmp-pm .ProseMirror-gapcursor::after{border-top-color:var(--primary)}
.kmp-dropcursor{background:var(--primary)}
.kmp .kmp-pm.is-ro .ProseMirror{caret-color:transparent}

/* Esqueleto mientras llega el editor (bundle diferido) */
.kmp-wait{padding:14px 16px 18px;display:flex;flex-direction:column;gap:9px}
.kmp-wait i{display:block;height:10px;border-radius:5px;background:var(--surface-3);
  animation:kmpPulso 1.1s ease-in-out infinite alternate}
.kmp-wait i:nth-child(2){width:78%}
.kmp-wait i:nth-child(3){width:52%}
@keyframes kmpPulso{from{opacity:.5}to{opacity:1}}

/* ---------- Capturas intercaladas ---------- */
.kmp .kmp-cap{position:relative;max-width:100%;margin:12px 0}
.kmp .kmp-cap-frame{position:relative;overflow:hidden;line-height:0;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-3);transition:box-shadow .12s ease}
.kmp .kmp-cap img{display:block;width:100%;height:auto;cursor:grab}
.kmp .kmp-cap.ProseMirror-selectednode .kmp-cap-frame{box-shadow:0 0 0 2px rgba(var(--primary-rgb),.75)}
.kmp-cap-ctrl{position:absolute;top:8px;right:8px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;
  max-width:calc(100% - 16px);opacity:0;transition:opacity .12s ease}
.kmp-cap:hover .kmp-cap-ctrl,.kmp-cap:focus-within .kmp-cap-ctrl,.kmp-cap.ProseMirror-selectednode .kmp-cap-ctrl{opacity:1}
/* Los controles flotan SOBRE la captura: chapa oscura en ambos temas. */
.kmp .kmp-cap-ctrl button,.kmp .kmp-cap-over button,
.kmp .kmp-cap-ctrl button:hover,.kmp .kmp-cap-over button:hover,
.kmp .kmp-cap-ctrl button:focus,.kmp .kmp-cap-over button:focus,
.kmp .kmp-cap-ctrl button:active,.kmp .kmp-cap-over button:active{
  height:30px;min-width:30px;margin:0;padding:0 9px;border:0;border-radius:7px;box-shadow:none;
  background:rgba(8,9,12,.84);color:#C6CDD9;font:500 11.5px/30px var(--font-ui);
  text-transform:none;letter-spacing:normal;cursor:pointer}
.kmp .kmp-cap-ctrl button:hover,.kmp .kmp-cap-over button:hover{background:rgba(19,23,30,.98);color:#EDF0F5}
.kmp .kmp-cap-ctrl button[aria-pressed="true"]{background:rgba(48,62,108,.95);color:#DCE4FA}
.kmp .kmp-cap-ctrl button:focus-visible,.kmp .kmp-cap-over button:focus-visible{outline:2px solid rgba(var(--primary-rgb),.75);outline-offset:1px}
.kmp-sep{width:1px;margin:6px 2px;background:rgba(255,255,255,.14)}
.kmp-cap-over{position:absolute;inset:0;display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  padding:10px;text-align:center;line-height:1.4;background:rgba(8,9,12,.62);color:#C6CDD9;font:500 12px var(--font-ui)}
.kmp-cap-over.is-err{background:rgba(8,9,12,.82);color:#F3B4B7}
.kmp-cap-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(175,192,240,.25);border-top-color:#AFC0F0;
  animation:kmpGiro .8s linear infinite}
@keyframes kmpGiro{to{transform:rotate(360deg)}}
.kmp .kmp-cap.is-atencion .kmp-cap-frame{box-shadow:0 0 0 2px rgba(var(--red-rgb),.65)}
/* Captura estrecha (S/M): la barra no cabe encima sin partirse en varias
   filas que taparian el grafico; se ancla a la izquierda y ocupa el hueco
   libre a la derecha de la captura, que es una figura de bloque. */
.kmp .kmp-cap[data-w="33"] .kmp-cap-ctrl,.kmp .kmp-cap[data-w="50"] .kmp-cap-ctrl{
  left:8px;right:auto;width:max-content;max-width:min(360px,calc(100vw - 96px));justify-content:flex-start}

/* ---------- Mensajes bajo el editor ---------- */
.kmp-errs{display:flex;flex-direction:column;gap:6px}
.kmp-errs[hidden]{display:none}
.kmp-err{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 12px;
  border-radius:9px;background:var(--red-soft);font-size:12px;line-height:1.45;color:var(--red)}
.kmp-err span{flex:1;min-width:0;overflow-wrap:anywhere}
.kmp .kmp-err button,.kmp .kmp-err button:hover,.kmp .kmp-err button:focus,.kmp .kmp-err button:active{
  flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0;padding:0;
  border:0;border-radius:7px;box-shadow:none;background:transparent;color:var(--text-3);cursor:pointer}
.kmp .kmp-err button:hover{background:rgba(var(--red-rgb),.12);color:var(--text)}
.kmp-local{font-size:12px;line-height:1.4;color:var(--text-2)}
.kmp-local[hidden]{display:none}

/* ---------- Lectura (editor no disponible o documento bloqueado) ---------- */
.kmp-ro{padding:12px 16px 16px;font-size:14.5px;line-height:1.62;color:var(--text);overflow-wrap:anywhere}
.kmp-ro p{margin:0;min-height:1.62em;white-space:pre-wrap}
.kmp-ro ul,.kmp-ro ol{margin:2px 0;padding-left:22px}
.kmp-ro li{white-space:pre-wrap}
.kmp-ro strong{font-weight:700}
.kmp-ro figure{margin:12px 0;max-width:100%}
.kmp-ro figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}
.kmp-ro .kmp-ro-vacio{color:var(--text-4)}

/* ---------- Visor de captura ---------- */
.kmp-viewer{position:fixed;inset:0;z-index:100004;display:flex;flex-direction:column;gap:12px;
  padding:clamp(12px,3vw,28px);background:rgba(5,6,9,.92);font-family:var(--font-ui)}
.kmp-viewer[hidden]{display:none}
.kmp-viewer-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kmp-viewer-t{display:flex;align-items:center;gap:10px;min-width:0}
.kmp-viewer-b{flex:none;padding:6px 8px;border-radius:8px;background:rgba(91,124,217,.14);color:#AFC0F0;
  font:600 12px var(--font-mono)}
.kmp-viewer-s{white-space:nowrap;font-size:12.5px;color:#C6CDD9}
.kmp-viewer .kmp-viewer-x,.kmp-viewer .kmp-viewer-x:hover,.kmp-viewer .kmp-viewer-x:focus{
  flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;padding:0;
  border:0;border-radius:9px;box-shadow:none;background:rgba(255,255,255,.08);color:#EDF0F5;cursor:pointer}
.kmp-viewer .kmp-viewer-x:hover{background:rgba(255,255,255,.14)}
.kmp-viewer-c{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.kmp-viewer-c img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}

/* Accesibilidad: texto solo para lectores de pantalla. */
.kmp-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Responsive ---------- */
@media (hover:none){ .kmp-cap-ctrl{opacity:1} }
@media (max-width:720px){
  .kmp .kmp-pm .ProseMirror,.kmp-ro{font-size:15px}
}
@media (max-width:520px){
  .kmp .kmp-rowh{gap:10px;padding:12px}
  .kmp-body{padding:0 12px 12px}
  .kmp-badge{min-width:40px}
  .kmp-state-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .kmp-hint{display:none}
  .kmp .kmp-tbb.is-img span{display:none}
  .kmp .kmp-pm .ProseMirror{padding:10px 12px 14px}
  .kmp-meta{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .kmp-bodyw,.kmp-row.is-open .kmp-bodyw,.kmp-chev,.kmp-seg,.kmp-badge,.kmp-cap-frame,.kmp-cap-ctrl{transition:none}
  .kmp-cap-spin,.kmp-wait i{animation:none}
}

/* ---------- Encaje en el drawer del Trade Log ----------
   La reflexion post-trade sigue justo debajo del panel, dentro de la misma
   seccion, con el aire de una seccion nueva. */
.klog-dw-mapsec > .klog-dw-review{margin-top:26px}

/* ============================================================
   M5-F - JOURNAL UNIFICADO
   El mismo modulo vive en el drawer del Trade Log y en Nueva Operacion. El
   titulo de apartado se pinta aqui con sus propias reglas (las mismas
   medidas que .klog-dw-h del drawer) para que se vea igual en las dos
   pantallas aunque la hoja del Trade Log no este cargada.
   ============================================================ */
.kmp .kmp-title{display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--font-ui);font-size:15px;font-weight:900;line-height:1.3;color:var(--text)}
.kmp .kmp-title .klog-dw-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--primary)}

/* Apartados de la reflexion: Resultado y reflexion, Errores y aprendizajes,
   Informacion adicional. Cada uno = cabecera de apartado + un panel con un
   unico editor; mismo espaciado vertical que entre el Mapeo y la reflexion. */
.kmp.kmp--apartados{gap:26px}
/* kairo-mapdoc.css fija display:block y un margen minimo sobre los ids de los
   contenedores de la libreta; con el journal unificado montado, mandan estas. */
#klog-dw-mapdoc.kmp,#k-nf-mapdoc.kmp{display:flex}
.klog-dw-mapsec > #klog-dw-mapdoc.klog-dw-review.kmp{margin:26px 0 6px}
.kmp-aps{display:flex;flex-direction:column;gap:26px;min-width:0}
.kmp-ap{display:flex;flex-direction:column;gap:12px;min-width:0}
.kmp-ap + .kmp-ap{border-top:0}
.kmp .kmp-aptog,.kmp .kmp-aptog:hover,.kmp .kmp-aptog:focus,.kmp .kmp-aptog:active{
  display:flex;align-items:center;gap:12px;width:100%;min-width:0;margin:0;padding:0;
  border:0;border-radius:6px;box-shadow:none;background:transparent;color:inherit;
  font:inherit;text-align:left;text-transform:none;letter-spacing:normal;cursor:pointer}
.kmp .kmp-aptog:focus-visible{outline:2px solid rgba(var(--primary-rgb),.6);outline-offset:3px}
.kmp .kmp-aptog .kmp-title{flex:none}
/* Resumen visible solo con el apartado plegado. */
.kmp-ap .kmp-aptog .kmp-sum{display:none}
.kmp-ap:not(.is-open) .kmp-aptog .kmp-sum{display:flex}
.kmp-ap:not(.is-open) .kmp-desc{display:none}
.kmp-ap.is-open .kmp-chev{transform:rotate(180deg)}
.kmp-ap .kmp-chev{margin-left:auto}
.kmp .kmp-ap .kmp-bodyw{display:grid}
.kmp-ap.is-open .kmp-bodyw{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .22s cubic-bezier(.2,.7,.2,1),visibility 0s}
.kmp .kmp-appanel .kmp-body{padding:14px 16px 16px}
.kmp-ap .kmp-head{align-items:flex-start}
.kmp-ap .kmp-meta{padding-top:2px}

/* Nueva Operacion: el modulo ocupa el ancho completo del grupo del journal. */
.k-nf-journal{display:flex;flex-direction:column;gap:26px;min-width:0;width:100%}
.k-nf-journal > .kmp,.k-nf-journal > .kmd,.k-nf-journal > .k-nf-mapeo,.k-nf-journal > #k-nf-mapdoc{width:100%;min-width:0}
.k-nf-journal > .k-nf-mapeo:empty{display:none}

/* Nueva Operacion: estado del journal junto a los botones y aviso de
   recuperacion tras un alta fallida. */
.k-nf-savest{display:block;font-family:var(--font-ui);font-size:12px;font-weight:600;line-height:1.35;color:var(--text-3);text-align:center}
.k-nf-savest:empty{display:none}
.k-nf-savest.is-warn{color:var(--text-2)}
.k-nf-savest.is-err{color:var(--red)}
.k-nf-recup{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 16px;
  padding:11px 14px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);
  font-family:var(--font-ui);font-size:12.5px;line-height:1.45;color:var(--text-2)}
.k-nf-recup > span{flex:1 1 260px;min-width:0}
.k-nf-recup .k-nf-recup-b,.k-nf-recup .k-nf-recup-b:hover,.k-nf-recup .k-nf-recup-b:focus{flex:none;margin:0;padding:8px 12px;border:0;border-radius:8px;box-shadow:none;
  background:var(--surface-3);color:var(--text);font:600 12px/1.2 var(--font-ui);text-transform:none;letter-spacing:normal;cursor:pointer}

@media (max-width:520px){
  .kmp.kmp--apartados,.kmp-aps,.k-nf-journal{gap:22px}
  .kmp .kmp-appanel .kmp-body{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .kmp-ap.is-open .kmp-bodyw{transition:none}
}