/* Kairo Journal - Monthly Recap
   -------------------------------------------------------------------------
   Dos capas bien separadas:
   1. El cromo del modal, que reutiliza la primitiva .k-modal/.k-modal-bd/
      .k-modal-box ya existente y solo anade la variante .is-recap.
   2. La tarjeta .kr-card, que mide SIEMPRE 1080x1350 px reales y se ve
      reducida con transform: scale(). Ninguna medida de su interior depende
      del viewport, para que el preview sea la composicion exacta que se
      exportara en la fase de PNG.
   La tarjeta lleva su propia paleta fija: acabara siendo una imagen, asi que
   no puede cambiar con el tema claro/oscuro de la app.
   ------------------------------------------------------------------------- */

/* ================= cromo del modal ================= */
#kairo-recap-modal{padding:clamp(10px,2.5vw,22px)}
#kairo-recap-modal .k-modal-bd{background:rgba(5,7,10,.80);-webkit-backdrop-filter:none;backdrop-filter:none}
:root:not([data-theme="dark"]) #kairo-recap-modal .k-modal-bd{background:rgba(14,23,38,.62)}

#kairo-recap-modal .k-modal-box.is-recap{
  width:auto;max-width:min(96vw,1140px);max-height:min(92vh,1480px);
  padding:0;border-radius:18px;border:1px solid var(--border);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.62)}

#kairo-recap-modal .kr-h{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;padding:16px 20px 14px;border-bottom:1px solid var(--border-2)}
#kairo-recap-modal .kr-h-ttl{display:flex;flex-direction:column;gap:3px;min-width:0}
#kairo-recap-modal .kr-h-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);font-weight:700;font-size:16px;line-height:1.3;
  letter-spacing:-.015em;color:var(--text)}
#kairo-recap-modal .kr-h-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);font-weight:400;font-size:11px;line-height:1.3;color:var(--text-4)}

#kairo-recap-modal button.kr-x{width:30px;height:30px;flex:0 0 30px;min-width:0;box-sizing:border-box;
  padding:0;border:none;border-radius:9px;background:var(--surface-2);color:var(--text-3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
#kairo-recap-modal button.kr-x:hover{background:var(--surface-3);color:var(--text)}
#kairo-recap-modal button.kr-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round}

#kairo-recap-modal .kr-stage{flex:1 1 auto;min-height:0;overflow:auto;padding:18px;
  display:flex;align-items:flex-start;justify-content:center;background:var(--surface-2)}
#kairo-recap-modal .kr-fit{position:relative;flex:0 0 auto}

#kairo-recap-modal .kr-foot-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:11px 20px;border-top:1px solid var(--border-2)}
#kairo-recap-modal .kr-note{flex:1 1 auto;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);font-weight:400;font-size:11.5px;line-height:1.4;color:var(--text-4)}

/* CTA real de exportacion. Deliberadamente slim y Kairo-native: la accion no
   necesita gritar, y el estado de carga se comunica en el propio texto. */
#kairo-recap-modal .kr-msg{flex:0 1 auto;min-width:0;max-width:190px;
  font-family:var(--font-ui);font-weight:600;font-size:11.5px;line-height:1.35;color:var(--red);
  overflow:hidden;text-overflow:ellipsis}
#kairo-recap-modal .kr-msg[hidden]{display:none!important}
#kairo-recap-modal button.kr-dl{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:32px;padding:0 15px;margin:0;
  border:1px solid var(--border);border-radius:9px;
  background:var(--surface-2);color:var(--text);cursor:pointer;
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;line-height:1;letter-spacing:-.005em;
  transition:background .15s,color .15s,border-color .15s,opacity .15s}
#kairo-recap-modal button.kr-dl:hover:not(:disabled){background:var(--surface-3);border-color:var(--text-3)}
#kairo-recap-modal button.kr-dl:focus-visible{outline:2px solid var(--text-3);outline-offset:2px}
#kairo-recap-modal button.kr-dl:disabled{opacity:.6;cursor:default}
/* Variante HQ. Misma geometria, mismo alto, misma tipografia: solo pesa menos
   visualmente para que la accion principal siga siendo la estandar. No toca
   nada de la tarjeta ni del preview. */
#kairo-recap-modal button.kr-dl-hq{padding:0 13px;background:transparent;color:var(--text-3)}
#kairo-recap-modal button.kr-dl-hq:hover:not(:disabled){background:var(--surface-2);color:var(--text);border-color:var(--text-3)}

/* ================= tarjeta 1080x1350 ================= */
.kr-card{
  --kr-ink:#ffffff;
  --kr-dim:#93a1b6;
  --kr-pos:#2fd07a;
  --kr-neg:#ff5f5f;
  --kr-line:rgba(255,255,255,.10);
  --kr-fill:rgba(255,255,255,.04);
  position:relative;box-sizing:border-box;
  width:1080px;height:1350px;flex:0 0 auto;
  transform-origin:top left;transform:scale(1);
  overflow:hidden;border-radius:0;
  background:#070b12;color:var(--kr-ink);
  font-family:var(--font-ui);
  padding:56px 56px 48px;
  -webkit-font-smoothing:antialiased}

.kr-card .kr-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.20}
.kr-card .kr-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,18,.62) 0%,rgba(7,11,18,.88) 38%,rgba(7,11,18,.97) 74%,#070b12 100%)}
.kr-card .kr-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:15px;height:100%}

.kr-card .kr-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.kr-card .kr-logo{height:46px;width:auto;display:block}
.kr-card .kr-top-tag{font-size:19px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kr-dim)}

.kr-card .kr-mes{flex:0 0 auto}
.kr-card .kr-mes-t{margin:0;font-size:62px;font-weight:900;letter-spacing:-.025em;line-height:1.02;color:var(--kr-ink)}
.kr-card .kr-mes-s,
.kr-card .kr-mes-f{margin:10px 0 0;font-size:21px;font-weight:400;line-height:1.3;color:var(--kr-dim)}
.kr-card .kr-mes-f{font-weight:600;color:#cfd8e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.kr-card .kr-hero{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;
  padding:26px 30px;border-radius:20px;background:none;border:1px solid transparent}
.kr-card .kr-hero-l{font-size:20px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--kr-dim)}
.kr-card .kr-hero-v{font-size:96px;font-weight:900;letter-spacing:-.035em;line-height:1.02;color:var(--kr-ink)}
.kr-card .kr-hero.is-pos .kr-hero-v{color:var(--kr-pos)}
.kr-card .kr-hero.is-neg .kr-hero-v{color:var(--kr-neg)}
.kr-card .kr-hero-r{font-size:22px;font-weight:600;color:var(--kr-dim)}

.kr-card .kr-grid{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kr-card .kr-cell{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:92px;
  padding:16px 18px;border-radius:16px;background:none;border:1px solid transparent}
.kr-card .kr-cell-l{font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--kr-dim)}
.kr-card .kr-cell-v{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--kr-ink)}
.kr-card .kr-cell-v.is-pos{color:var(--kr-pos)}
.kr-card .kr-cell-v.is-neg{color:var(--kr-neg)}

/* ---- Actividad diaria ----
   Panel propio en la mitad inferior: mejor y peor dia viajan en su cabecera
   y las celdas se reparten con grid-auto-rows:1fr todo el alto sobrante, asi
   que un mes de 5 semanas gana altura de celda sin tocar nada mas. */
.kr-card .kr-cal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:20px 20px 22px;border-radius:22px;
  background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.075)}
.kr-card .kr-cal-h{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin-bottom:14px}
.kr-card .kr-cal-l{font-size:17px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#aab6c8}
.kr-card .kr-cal-x{display:flex;align-items:baseline;gap:26px}
.kr-card .kr-xd{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.kr-card .kr-xd-l{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#71809a}
.kr-card .kr-xd-d{font-size:19px;font-weight:700;color:var(--kr-ink)}
.kr-card .kr-xd-v{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--kr-dim)}
.kr-card .kr-xd-v.is-pos{color:var(--kr-pos)}
.kr-card .kr-xd-v.is-neg{color:var(--kr-neg)}

.kr-card .kr-dow{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:10px}
.kr-card .kr-dow span{font-size:14px;font-weight:600;letter-spacing:.10em;color:#6b7a91;text-align:center}
.kr-card .kr-cells{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(7,1fr);
  gap:9px;grid-auto-rows:1fr}

.kr-card .kr-c{display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  padding:8px 10px;border-radius:14px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06)}
.kr-card .kr-c.is-void{background:none;border-color:transparent}
.kr-card .kr-c-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.kr-card .kr-c b{font-size:18px;font-weight:700;line-height:1.1;color:#8e9bb0}
.kr-card .kr-c em{font-style:normal;font-size:13px;font-weight:600;line-height:1.1;color:#71809a;white-space:nowrap}
.kr-card .kr-c i{font-style:normal;font-size:21px;font-weight:800;line-height:1.1;letter-spacing:-.025em;white-space:nowrap}

/* Estados semanticos: sin operar, positivo, negativo y breakeven operado. */
.kr-card .kr-c.is-off b{color:#5a687d}
.kr-card .kr-c.is-pos{background:rgba(47,208,122,.13);border-color:rgba(47,208,122,.34)}
.kr-card .kr-c.is-pos b{color:#bdf0d5}
.kr-card .kr-c.is-pos em{color:#7fc7a2}
.kr-card .kr-c.is-pos i{color:var(--kr-pos)}
.kr-card .kr-c.is-neg{background:rgba(255,95,95,.12);border-color:rgba(255,95,95,.32)}
.kr-card .kr-c.is-neg b{color:#f6cccc}
.kr-card .kr-c.is-neg em{color:#d79a9a}
.kr-card .kr-c.is-neg i{color:var(--kr-neg)}
.kr-card .kr-c.is-be{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.15)}
.kr-card .kr-c.is-be b{color:#c6d0de}
.kr-card .kr-c.is-be em{color:#8e9bb0}
.kr-card .kr-c.is-be i{color:#e4eaf3}

.kr-card .kr-void{flex:0 0 auto;font-size:20px;font-weight:600;color:var(--kr-dim);text-align:center}

.kr-card .kr-foot{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;padding-top:20px;border-top:1px solid var(--kr-line)}
.kr-card .kr-foot-b{font-size:21px;font-weight:900;letter-spacing:.20em;color:var(--kr-ink)}
.kr-card .kr-foot-c{font-size:18px;font-weight:400;color:var(--kr-dim)}
.kr-card .kr-foot-u{font-size:18px;font-weight:600;color:var(--kr-dim)}

/* El escenario nunca deja la tarjeta desbordar el modal en pantallas muy
   estrechas: la escala la calcula el JS, esto solo evita saltos de layout. */
@media(max-width:560px){
  #kairo-recap-modal .kr-note{display:none}
  #kairo-recap-modal .kr-stage{padding:12px}
  #kairo-recap-modal .kr-h{padding:13px 15px 11px}
  #kairo-recap-modal .kr-foot-bar{padding:10px 15px}
}