/* NOTA: no se usa var(--font-ui) porque el token global esta definido de forma
   autorreferencial en kairo.css y computa a cadena vacia; eso invalida el
   shorthand font: COMPLETO y se pierden tambien tamano y peso. Se usa la misma
   pila literal que declara el archivo de diseno. var(--font-mono) si es valido. */
/* =========================================================================
 * Kairo Journal - CALCULADORA DE RIESGO (rediseño)
 * -------------------------------------------------------------------------
 * La paleta del diseño nuevo y los tokens de Kairo son el MISMO sistema
 * (#08090C / #0E1117 / #13171E / #EDF0F5 / #5B7CD9 / #F0555C / #35C77F,
 * Segoe UI en todo), asi que aqui no hay ni un color literal:
 * todo se resuelve por token y el modo claro sale del tema global de Kairo.
 * No existe tema local de la calculadora.
 * ========================================================================= */

/* Los campos usan var(--surface-2) DIRECTO. Pasarlo por una propiedad
   intermedia declarada en el host (--kcalc-field) hacia que el valor quedara
   fijado al tema vigente en el momento de declararla y no siguiera los
   cambios de tema: medido, .kcalc-m con el token directo si cambiaba y .kcalc-inp
   con la indireccion no. */
/* Respiracion vertical del shell. El diseno la declara en su contenedor de
   pagina (padding vertical + 64px inferior); al portarlo se omitio y por eso
   el contenido quedaba pegado arriba y al pie. UNA sola fuente. */
.kairo-calc{
  --kcalc-gap: 14px;
  padding-block: 28px 26px;
  font-family: var(--font-ui);
  color: var(--text);
  display:block;
}
.kairo-calc *{ box-sizing:border-box; }
/* UNICA fuente del ancho de la Calculadora. El diseno original declara
   max-width:1360px centrado; al portarlo se omitio y por eso la herramienta
   se estiraba a todo el contenedor de Astra. No se anade padding en ningun
   ancestro: el ancho se define aqui y solo aqui. */
.kairo-calc .kcalc-wrap{ display:flex; flex-direction:column; gap:16px; max-width:1200px; margin-inline:auto; width:100%; }

/* ---------------------------------------------------------------- cabecera */
.kairo-calc .kcalc-top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--border);
}
.kairo-calc .kcalc-crumb{ display:flex; align-items:center; gap:9px; }
.kairo-calc .kcalc-crumb a{ font:600 12.5px var(--font-ui); color:var(--text-4); text-decoration:none; }
.kairo-calc .kcalc-crumb a:hover{ color:var(--text-2); }
.kairo-calc .kcalc-crumb i{ font:400 11px var(--font-mono); color:var(--text-off); font-style:normal; }
.kairo-calc .kcalc-crumb span{ font:600 12.5px var(--font-ui); color:var(--text); }

.kairo-calc .kcalc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.kairo-calc .kcalc-head-t{ display:flex; flex-direction:column; gap:5px; }
.kairo-calc .kcalc-head-t h1{ margin:0; font:700 clamp(21px,3.2vw,26px)/1.1 var(--font-ui); letter-spacing:-.02em; color:var(--text); }
.kairo-calc .kcalc-head-t span{ font:400 13px/1.45 var(--font-ui); color:var(--text-3); max-width:560px; }
.kairo-calc .kcalc-head-m{ display:flex; flex-direction:column; gap:6px; }
.kairo-calc .kcalc-eyebrow{ font:600 9.5px var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); }

/* --------------------------------------------------------------- segmentos */
.kairo-calc .kcalc-seg{
  display:flex; gap:2px; padding:2px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border); flex-wrap:wrap;
}
.kairo-calc .kcalc-seg-s{ background:var(--surface-2); border-radius:8px; }
.kairo-calc .kcalc-seg-b{
  border:0; border-radius:7px; padding:7px 12px; cursor:pointer;
  font:600 11.5px var(--font-ui); background:transparent; color:var(--text-3);
  transition:background .12s,color .12s;
}
.kairo-calc .kcalc-seg-b:hover{ color:var(--text); }
.kairo-calc .kcalc-seg-b.is-on{ background:var(--primary); color:var(--on-primary); }
.kairo-calc .kcalc-seg-b:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.kairo-calc .kcalc-seg-w .kcalc-seg-b{ flex:1 1 auto; text-align:center; }

/* ------------------------------------------------------------------ paneles */
.kairo-calc .kcalc-cols{ display:flex; flex-wrap:wrap; gap:var(--kcalc-gap); align-items:flex-start; }
.kairo-calc .kcalc-col{ min-width:0; display:flex; flex-direction:column; gap:var(--kcalc-gap); }
.kairo-calc .kcalc-col-a{ flex:1.05 1 430px; }
.kairo-calc .kcalc-col-b{ flex:1 1 380px; }

.kairo-calc .kcalc-panel{
  background:var(--surface); border-radius:16px; padding:20px 22px;
  display:flex; flex-direction:column; gap:16px; border:1px solid var(--border-2);
}
.kairo-calc .kcalc-p-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kairo-calc .kcalc-num{
  font:600 10px var(--font-mono); color:var(--primary-link);
  background:var(--primary-soft); border-radius:6px; padding:3px 7px;
}
.kairo-calc .kcalc-p-t{ font:600 14px var(--font-ui); color:var(--text); }
.kairo-calc .kcalc-p-note{ font:400 11.5px var(--font-ui); color:var(--text-4); margin-left:auto; }
.kairo-calc .kcalc-sep{ height:1px; background:var(--border); }

/* Las tarjetas avanzadas solo existen en nivel Avanzado. */
.kairo-calc .kcalc-adv{ display:none; }
.kairo-calc.is-adv .kcalc-adv{ display:flex; }

/* ------------------------------------------------------------------ campos */
.kairo-calc .kcalc-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:12px; }
.kairo-calc .kcalc-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)); gap:12px; }
.kairo-calc .kcalc-grid4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr)); gap:10px; }
.kairo-calc .kcalc-grid5{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr)); gap:10px; }

.kairo-calc .kcalc-f{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.kairo-calc .kcalc-f.is-off{ opacity:.4; }
.kairo-calc .kcalc-f-l{ font:600 11px var(--font-ui); color:var(--text-3); }
.kairo-calc .kcalc-f-t{ font:600 12px var(--font-ui); color:var(--text-2); }
.kairo-calc .kcalc-inp{
  /* El diseno usa #0A0D12: un escalon POR DEBAJO de la superficie del panel.
     Con --surface-2 el campo quedaba por encima y las superficies se mezclaban. */
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:9px; padding:10px 12px; font:600 14px var(--font-mono);
  color:var(--text); min-width:0;
  /* La altura la declara ESTA regla. El personalizador de Astra fija
     height:40px sobre input/select desde una hoja inline; al no declarar
     height aqui, el padding no podia compactar el control. */
  height:40px; line-height:1.2;
}
.kairo-calc select.kcalc-inp{ font-size:13px; }
/* El foco ELEVA el campo en lugar de hundirlo: antes se quedaba en el fondo
   mas oscuro del modulo y el estado activo se percibia apagado y pesado. */
.kairo-calc .kcalc-inp{ transition:background-color .14s ease, border-color .14s ease, box-shadow .14s ease }
.kairo-calc .kcalc-inp:hover:not(:focus){ border-color:var(--border-2) }
/* IMPORTANTE: literales, no var(). Medido en este navegador: los controles
   nativos NO re-resuelven las sustituciones var() cuando cambia su estado, asi
   que un foco definido con tokens se pintaria con el color anterior. Un <div>
   si se actualiza; un <input> no. Los literales resuelven al instante y son los
   mismos valores del sistema de tokens de Kairo. */
/* El color de texto se declara AQUI a proposito: Astra define
   input[type="number"]:focus{color:#475569} con especificidad (0,2,1), que gana
   a la regla base del modulo (0,2,0). Sin esto el valor se apaga a gris pizarra
   al enfocar (contraste 2.37:1). Este selector es (0,3,0) y lo recupera. */
.kairo-calc .kcalc-inp:focus,.kairo-calc .kcalc-inp:focus-visible{
  outline:none; background:#13171E; border-color:#5B7CD9; color:#EDF0F5;
  box-shadow:0 0 0 3px rgba(91,124,217,.26);
}
[data-theme="light"] .kairo-calc .kcalc-inp:focus,
[data-theme="light"] .kairo-calc .kcalc-inp:focus-visible{
  background:#FFFFFF; border-color:#3F5FC7; color:#141922;
  box-shadow:0 0 0 3px rgba(63,95,199,.20);
}
/* Seleccion de texto integrada con el tema, no el azul del sistema. */
.kairo-calc .kcalc-inp::selection{ background:rgba(91,124,217,.32); color:#EDF0F5 }
[data-theme="light"] .kairo-calc .kcalc-inp::selection{ background:rgba(63,95,199,.20); color:#141922 }
.kairo-calc .kcalc-ro{ display:flex; align-items:center; color:var(--text-2); background:var(--surface-2); }
.kairo-calc .kcalc-seg{ background:var(--surface); }

.kairo-calc .kcalc-toggle{
  margin-left:auto; border:1px solid var(--border); background:transparent;
  color:var(--text-3); border-radius:7px; padding:6px 10px;
  font:600 11px var(--font-ui); cursor:pointer;
}
.kairo-calc .kcalc-toggle.is-on{ background:var(--primary-soft); color:var(--primary-link); border-color:transparent; }
.kairo-calc .kcalc-toggle:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ------------------------------------------------------------------ riesgo */
.kairo-calc .kcalc-riskrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.kairo-calc .kcalc-slider{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kairo-calc .kcalc-range{ flex:1 1 190px; min-width:150px; }
.kairo-calc .kcalc-bigwrap{ display:flex; align-items:baseline; gap:6px; }
.kairo-calc .kcalc-big{ font:700 26px var(--font-mono); letter-spacing:-.02em; color:var(--text); }
.kairo-calc .kcalc-big-u{ font:600 13px var(--font-ui); color:var(--text-4); }
.kairo-calc .kcalc-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kairo-calc .kcalc-chip{
  border:0; border-radius:7px; padding:6px 10px; cursor:pointer;
  font:600 11px var(--font-mono); background:var(--surface-2); color:var(--text-4);
}
.kairo-calc .kcalc-chip.is-on{ background:var(--primary-soft); color:var(--primary-link); }
.kairo-calc .kcalc-chip:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------------------------------------------------------------------- FX */
.kairo-calc .kcalc-fxrow[hidden]{ display:none; }
.kairo-calc .kcalc-fxrow{
  display:grid; grid-template-columns:minmax(140px,200px) 1fr; gap:12px;
  align-items:end; padding-top:3px;
}
.kairo-calc .kcalc-fx-note{ font:400 11px/1.45 var(--font-ui); color:var(--text-4); padding-bottom:10px; }

/* --------------------------------------------------------------- resultado */
/* 03 es el foco visual: superficie ligeramente elevada sobre el resto. */
.kairo-calc .kcalc-result{ background:var(--surface); border-color:var(--border); }
.kairo-calc .kcalc-hero{ display:flex; align-items:baseline; gap:9px; }
.kairo-calc .kcalc-hero-v{ font:700 clamp(30px,5vw,40px)/1 var(--font-mono); letter-spacing:-.03em; color:var(--text); }
.kairo-calc .kcalc-hero-u{ font:600 13px var(--font-ui); color:var(--text-4); }
/* Tiles independientes con radio propio y separacion de 10px, como el archivo
   fuente. La rejilla sin costuras de 1px es el patron del PAYLOAD, no de las
   metricas: mezclarlos aplanaba la jerarquia. */
.kairo-calc .kcalc-mgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:10px; }
.kairo-calc .kcalc-mgrid-3{ grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr)); }
.kairo-calc .kcalc-m{ background:var(--surface-2); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.kairo-calc .kcalc-m-l{ font:600 10.5px var(--font-ui); color:var(--text-4); }
.kairo-calc .kcalc-m-v{ font:600 14.5px var(--font-mono); color:var(--text); overflow-wrap:anywhere; }
.kairo-calc .kcalc-m.is-neg .kcalc-m-v{ color:var(--red); }
.kairo-calc .kcalc-m.is-pos .kcalc-m-v{ color:var(--green); }
.kairo-calc .kcalc-costline,.kairo-calc .kcalc-limnote{ font:400 11.5px var(--font-ui); color:var(--text-4); }
.kairo-calc .kcalc-limnote.is-saving{ color:var(--primary-link); }

/* ---------------------------------------------------------------- mensajes */
.kairo-calc .kcalc-msgs{ display:flex; flex-direction:column; gap:7px; }
.kairo-calc .kcalc-msg{ font:600 11.5px/1.4 var(--font-ui); border-radius:9px; padding:9px 12px; }
.kairo-calc .kcalc-msg.is-err{ background:var(--red-soft); color:var(--red); }
.kairo-calc .kcalc-msg.is-warn{ background:var(--amber-soft); color:var(--amber); }
.kairo-calc .kcalc-fail{ font:600 13px var(--font-ui); color:var(--red); padding:20px; }

/* --------------------------------------------------------- exposicion abierta */
.kairo-calc .kcalc-openlist{ display:flex; flex-direction:column; }
.kairo-calc .kcalc-oh,.kairo-calc .kcalc-orow{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr); gap:10px; align-items:center; }
.kairo-calc .kcalc-oh{ padding:0 0 8px; border-bottom:1px solid var(--border); }
.kairo-calc .kcalc-oh span{ font:600 9.5px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--text-4); }
.kairo-calc .kcalc-orow{ padding:9px 0; border-bottom:1px solid var(--border-2); }
.kairo-calc .kcalc-orow:last-child{ border-bottom:0; }
.kairo-calc .kcalc-osym{ font:600 12.5px var(--font-mono); color:var(--text); }
.kairo-calc .kcalc-oside{ font:600 10.5px var(--font-ui); border-radius:5px; padding:3px 7px; justify-self:start; }
.kairo-calc .kcalc-oside.is-buy{ background:var(--green-soft); color:var(--green); }
.kairo-calc .kcalc-oside.is-sell{ background:var(--red-soft); color:var(--red); }
.kairo-calc .kcalc-orisk{ font:600 12px var(--font-mono); color:var(--text-2); text-align:right; }
.kairo-calc .kcalc-orisk.is-unk{ font-family:var(--font-ui); font-size:11px; font-weight:600; color:var(--amber); }
.kairo-calc .kcalc-empty{ font:400 12px var(--font-ui); color:var(--text-4); padding:10px 0; }

.kairo-calc .kcalc-expo-box{ border-radius:12px; padding:14px 16px; background:var(--surface-2); }
.kairo-calc .kcalc-expo-box.is-over{ background:var(--red-soft); }
.kairo-calc .kcalc-expo-t{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.kairo-calc .kcalc-expo-t span{ font:600 11.5px var(--font-ui); color:var(--text-3); }
.kairo-calc .kcalc-expo-t b{ font:700 22px var(--font-mono); letter-spacing:-.02em; color:var(--text); }
.kairo-calc .kcalc-expo-t b.is-over{ color:var(--red); }
.kairo-calc .kcalc-expo-b{ font:400 11px var(--font-ui); color:var(--text-4); margin-top:4px; }
.kairo-calc .kcalc-bar{ display:flex; height:6px; border-radius:4px; overflow:hidden; background:var(--border); margin-top:11px; }
.kairo-calc .kcalc-bar span{ background:var(--primary); border-radius:4px; }
.kairo-calc .kcalc-expo-box.is-over .kcalc-bar span{ background:var(--red); }

/* ---------------------------------------------------------------- traspaso */
.kairo-calc .kcalc-cta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.kairo-calc .kcalc-cta-b,.kairo-calc .kcalc-cta-g{
  border:0; border-radius:9px; padding:10px 16px; font:600 12px var(--font-ui); cursor:pointer;
}
.kairo-calc .kcalc-cta-b{ background:var(--primary); color:var(--on-primary); }
.kairo-calc .kcalc-cta-g{ background:var(--surface-2); color:var(--text-2); }
.kairo-calc .kcalc-cta-b:disabled,.kairo-calc .kcalc-cta-g:disabled{ opacity:.4; cursor:not-allowed; }
.kairo-calc .kcalc-defer{ margin:0; font:400 11px/1.5 var(--font-ui); color:var(--text-4); }
.kairo-calc .kcalc-payload{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:1px; background:var(--border-2); border-radius:12px; overflow:hidden; }
.kairo-calc .kcalc-pl{ background:var(--surface-2); padding:10px 13px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.kairo-calc .kcalc-pl span{ font:600 10px var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--text-4); }
.kairo-calc .kcalc-pl b{ font:600 13px var(--font-mono); color:var(--text-2); overflow-wrap:anywhere; }

/* -------------------------------------------------------------- responsive */
@media (max-width:900px){
  .kairo-calc .kcalc-col-a,.kairo-calc .kcalc-col-b{ flex:1 1 100%; }
}
@media (max-width:560px){
  .kairo-calc{ padding-block:16px 20px; }
  .kairo-calc .kcalc-panel{ padding:16px 14px; gap:13px; border-radius:14px; }
  /* El escritorio se compacta, el movil NO: area tactil >=44px. */
  .kairo-calc .kcalc-inp{ padding:12px; height:44px; }
  .kairo-calc .kcalc-cta-b,.kairo-calc .kcalc-cta-g{ padding:0 14px; min-height:44px; }
  .kairo-calc .kcalc-head-m{ width:100%; }
  .kairo-calc .kcalc-seg{ width:100%; }
  .kairo-calc .kcalc-seg-b{ flex:1 1 auto; padding:0 8px; min-height:44px; font-size:11px; text-align:center; }
  .kairo-calc .kcalc-p-note{ margin-left:0; width:100%; }
  .kairo-calc .kcalc-fxrow{ grid-template-columns:1fr; }
  .kairo-calc .kcalc-fx-note{ padding-bottom:0; }
  .kairo-calc .kcalc-big{ font-size:23px; }
  .kairo-calc .kcalc-hero-v{ font-size:30px; }
  .kairo-calc .kcalc-m-v{ font-size:13.5px; }
  .kairo-calc .kcalc-oh,.kairo-calc .kcalc-orow{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr); gap:8px; }
  .kairo-calc .kcalc-cta-b,.kairo-calc .kcalc-cta-g{ flex:1 1 auto; text-align:center; }
}

/* ---- contenido recuperado del archivo fuente ---------------------------- */
/* Cabecera del panel 03: el archivo usa un eyebrow en versalitas y un
   indicador de estado, no un badge numerado. */
.kairo-calc .kcalc-p-eb{ margin-right:auto }
.kairo-calc .kcalc-status{ font:600 10.5px var(--font-ui); border-radius:6px; padding:4px 9px; white-space:nowrap }
.kairo-calc .kcalc-status.is-err{ color:var(--red); background:var(--red-soft) }
.kairo-calc .kcalc-status.is-warn{ color:var(--amber); background:var(--amber-soft) }
.kairo-calc .kcalc-status.is-ok{ color:var(--green); background:var(--green-soft) }
.kairo-calc .kcalc-status.is-idle{ color:var(--text-3); background:var(--surface-3) }
/* Hero del archivo: mayor y con el bloque de lotaje sin redondear al lado. */
.kairo-calc .kcalc-herorow{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap }
.kairo-calc .kcalc-hero-v{ font:700 clamp(34px,6vw,50px)/.95 var(--font-mono); letter-spacing:-.03em; color:var(--text) }
.kairo-calc .kcalc-hero-u{ font:600 15px var(--font-ui); color:var(--text-3) }
.kairo-calc .kcalc-herosub{ display:flex; flex-direction:column; gap:3px; padding-bottom:6px }
.kairo-calc .kcalc-herosub span{ font:400 11px var(--font-ui); color:var(--text-4) }
.kairo-calc .kcalc-hint{ margin:0; font:400 11px/1.5 var(--font-ui); color:var(--text-4) }
/* Cajas de filas etiqueta/valor: Costes, Especificaciones y Riesgo diario. */
.kairo-calc .kcalc-rows{ background:var(--surface-2); border-radius:10px; padding:4px 14px }
.kairo-calc .kcalc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border) }
.kairo-calc .kcalc-row.is-last{ border-bottom:0 }
.kairo-calc .kcalc-row span{ font:400 11.5px var(--font-ui); color:var(--text-3) }
.kairo-calc .kcalc-row b{ font:600 11.5px var(--font-mono); color:var(--text-2); text-align:right }
.kairo-calc .kcalc-row.is-cost span,.kairo-calc .kcalc-row.is-cost b{ font-weight:600; color:var(--amber) }
.kairo-calc .kcalc-row.is-net span{ font-weight:600; font-size:12px; color:var(--text) }
.kairo-calc .kcalc-row.is-net b{ font-weight:700; font-size:12.5px; color:var(--red) }
.kairo-calc .kcalc-row.is-pos b{ color:var(--green); font-weight:600 }
.kairo-calc .kcalc-row.is-neg b{ color:var(--red); font-weight:600 }
.kairo-calc .kcalc-row.is-warnv b{ color:var(--amber); font-weight:600 }
/* Proyeccion de racha de perdidas. */
.kairo-calc .kcalc-streak{ display:flex; flex-direction:column; gap:9px }
.kairo-calc .kcalc-streak-h{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.kairo-calc .kcalc-streak-h span{ font:600 11px var(--font-ui); color:var(--text-2) }
.kairo-calc .kcalc-streak-h i{ font:400 10.5px var(--font-ui); color:var(--text-4); font-style:normal }
.kairo-calc .kcalc-streak-b{ font:400 10.5px var(--font-mono); color:var(--text-4); margin-top:-4px }
.kairo-calc .kcalc-sk{ display:flex; align-items:center; gap:10px; padding:3px 0 }
.kairo-calc .kcalc-sk-n{ font:600 10.5px var(--font-mono); color:var(--text-4); width:22px; flex:none }
.kairo-calc .kcalc-sk-bar{ position:relative; flex:1 1 auto; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; min-width:40px }
.kairo-calc .kcalc-sk-bar i{ position:absolute; inset:0 auto 0 0; background:var(--red); border-radius:3px }
.kairo-calc .kcalc-sk-v{ font:600 11px var(--font-mono); color:var(--text-2); flex:none }
.kairo-calc .kcalc-sk-dd{ font:600 10.5px var(--font-mono); color:var(--red); flex:none; width:48px; text-align:right }
@media (max-width:560px){
  .kairo-calc .kcalc-herorow{ gap:10px }
  .kairo-calc .kcalc-herosub{ padding-bottom:0 }
  .kairo-calc .kcalc-rows{ padding:2px 12px }
  .kairo-calc .kcalc-row{ gap:8px }
  .kairo-calc .kcalc-sk-v,.kairo-calc .kcalc-sk-dd{ font-size:10px }
}

/* ---- vista previa: diagrama de zonas y glosario ------------------------- */
.kairo-calc .kcalc-mono{ font-family:var(--font-mono) }
.kairo-calc .kcalc-pv{ display:flex; gap:16px; align-items:stretch; flex-wrap:wrap }
.kairo-calc .kcalc-zones{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column }
.kairo-calc .kcalc-zone{ padding:12px 14px; display:flex }
.kairo-calc .kcalc-zone.is-top{ border-radius:10px 10px 0 0 }
.kairo-calc .kcalc-zone.is-bottom{ border-radius:0 0 10px 10px }
.kairo-calc .kcalc-zone.is-tp{ background:var(--green-soft) }
.kairo-calc .kcalc-zone.is-sl{ background:var(--red-soft) }
.kairo-calc .kcalc-z-l{ font:600 10px var(--font-ui); letter-spacing:.1em; text-transform:uppercase }
.kairo-calc .kcalc-zone.is-tp .kcalc-z-l{ color:var(--green) }
.kairo-calc .kcalc-zone.is-sl .kcalc-z-l{ color:var(--red) }
.kairo-calc .kcalc-z-d{ font:400 11px var(--font-mono); color:var(--text-4) }
.kairo-calc .kcalc-z-m{ font:700 14px var(--font-mono) }
.kairo-calc .kcalc-zone.is-tp .kcalc-z-m{ color:var(--green) }
.kairo-calc .kcalc-zone.is-sl .kcalc-z-m{ color:var(--red) }
/* Franja de entrada: el break-even vive DENTRO, junto a la etiqueta, como en
   el archivo. Antes colgaba como pie suelto bajo toda la tarjeta. */
.kairo-calc .kcalc-entry{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; background:var(--surface-2); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2) }
.kairo-calc .kcalc-entry-l{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap }
.kairo-calc .kcalc-entry-t{ font:600 10px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--primary-link) }
.kairo-calc .kcalc-entry-be{ font:400 10.5px var(--font-mono); color:var(--text-4) }
.kairo-calc .kcalc-entry b{ font:700 14px var(--font-mono); color:var(--text); flex:none }
/* Columna derecha del archivo: ancho fijo de 132px y tarjetas repartidas. */
.kairo-calc .kcalc-pvside{ flex:0 0 132px; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:8px }
.kairo-calc .kcalc-pvc{ background:var(--surface-2); border-radius:10px; padding:11px 13px; display:flex; flex-direction:column; gap:3px; min-width:0 }
.kairo-calc .kcalc-pvc-l{ font:600 10px var(--font-ui); color:var(--text-4) }
.kairo-calc .kcalc-pvc-v{ font:600 13px var(--font-mono); color:var(--text); overflow-wrap:anywhere }
.kairo-calc .kcalc-pvc-s{ font:400 10px var(--font-mono); color:var(--text-4); overflow-wrap:anywhere }
/* glosario */
.kairo-calc .kcalc-m-lw{ display:flex; align-items:center; gap:5px; min-width:0 }
.kairo-calc .kcalc-gl{ width:13px; height:13px; flex:none; border:0; border-radius:50%; background:var(--surface-3); color:var(--text-4); font:600 9px var(--font-ui); line-height:1; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center }
.kairo-calc .kcalc-gl:hover{ background:var(--primary-soft); color:var(--primary-link) }
.kairo-calc .kcalc-gl:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.kairo-calc .kcalc-f-t .kcalc-gl{ margin-left:6px; vertical-align:middle }
.kairo-calc .kcalc-p-h .kcalc-gl{ margin-left:2px }
.kairo-calc{ position:relative }
.kairo-calc .kcalc-glbox{ position:absolute; z-index:30; max-width:280px; background:var(--surface-3); border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; box-shadow:0 8px 24px rgba(0,0,0,.35) }
.kairo-calc .kcalc-glbox[hidden]{ display:none }
.kairo-calc .kcalc-glbox b{ font:600 11.5px var(--font-ui); color:var(--text) }
.kairo-calc .kcalc-glbox span{ font:400 11px/1.5 var(--font-ui); color:var(--text-3) }
@media (max-width:560px){
  .kairo-calc .kcalc-pv{ gap:12px }
  .kairo-calc .kcalc-zones,.kairo-calc .kcalc-pvside{ flex:1 1 100% }
  .kairo-calc .kcalc-glbox{ max-width:calc(100% - 16px) }
  .kairo-calc .kcalc-gl{ width:20px; height:20px; font-size:11px }
}

/* Area tactil del glosario a >=44px en movil SIN agrandar el circulo visible:
   el disparador mantiene su tamano del diseno y amplia su zona de pulsacion con
   un pseudo-elemento centrado. Las metricas contiguas estan a mas de 44px, asi
   que no se solapan controles. */
@media (max-width:560px){
  /* Los chips de preset tambien son interactivos: van en su propia fila, asi
     que crecen en alto sin invadir ningun control contiguo. */
  .kairo-calc .kcalc-chip{ min-height:44px; display:inline-flex; align-items:center }
  .kairo-calc .kcalc-gl{ width:15px; height:15px; font-size:9px; position:relative }
  .kairo-calc .kcalc-gl::after{ content:''; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%) }
}

/* ---- importe de riesgo fijo -------------------------------------------- */
/* Ocupa el mismo hueco flexible que el deslizador, asi que el panel no crece. */
.kairo-calc .kcalc-affix{ flex:1 1 190px; min-width:150px; position:relative; display:flex; align-items:center }
.kairo-calc .kcalc-affix[hidden]{ display:none }
.kairo-calc .kcalc-affix i{ position:absolute; left:11px; font:600 13px var(--font-mono); color:var(--text-4); font-style:normal; pointer-events:none }
/* El relleno izquierdo reserva sitio al simbolo: nunca se solapan. */
.kairo-calc .kcalc-inp-fx{ padding-left:38px }
@media (max-width:560px){
  .kairo-calc .kcalc-affix{ flex:1 1 100%; min-width:0 }
  .kairo-calc .kcalc-inp-fx{ padding-left:40px }
}

/* ---- bloque de riesgo: pulido visual ----------------------------------- */
/* B) Deslizador: pista fina y pulgar proporcionado. La pista se pinta con un
   gradiente en el punto que calcula el controlador, porque al personalizar el
   control se pierde accent-color. Solo estetica. */
/* ===== DESLIZADOR DE RIESGO =============================================
   Pista visual de 3px sobre una zona interactiva de 24px. El relleno termina
   EXACTAMENTE en el centro del pulgar: se compone con calc() a partir de
   --risk-progress (fraccion 0-1) porque el pulgar nativo recorre de radio a
   (ancho - radio), no de 0% a 100%. Una sola fuente de progreso. ======== */
.kairo-calc .kcalc-range{
  -webkit-appearance:none; appearance:none; background:transparent;
  height:24px; cursor:pointer; padding:0; margin:0;
  --risk-thumb:17px;
  --risk-fill:calc(var(--risk-thumb) / 2 + var(--risk-progress,.2) * (100% - var(--risk-thumb)));
  --risk-track-off:rgba(122,131,148,.30);
}
.kairo-calc .kcalc-range[hidden]{ display:none }
/* --- pista: base neutra + progreso activo --- */
/* El pseudo-track es la UNICA fuente visual de la pista. El tema declara
   globalmente input[type=range]::-webkit-slider-runnable-track con
   box-shadow:#CCC 2.6px 2.6px, que se pintaba desplazada abajo y a la derecha
   y producia una SEGUNDA linea. Al no declarar box-shadow aqui, aquella
   seguia ganando. Se anula explicitamente; no se tapa con otra capa. */
.kairo-calc .kcalc-range::-webkit-slider-runnable-track{
  height:3px; border-radius:99px; border:0; box-shadow:none;
  background:
    linear-gradient(90deg,#5B7CD9 0,#7E9BEF var(--risk-fill),transparent var(--risk-fill)),
    var(--risk-track-off);
}
/* El mismo tema repinta la pista al enfocar con (0,2,1), que ganaba a la regla
   base (0,2,0) y la volvia una barra blanquecina. Esta es (0,3,0). */
.kairo-calc .kcalc-range:focus::-webkit-slider-runnable-track,
.kairo-calc .kcalc-range:focus-visible::-webkit-slider-runnable-track{
  box-shadow:none;
  background:
    linear-gradient(90deg,#5B7CD9 0,#7E9BEF var(--risk-fill),transparent var(--risk-fill)),
    var(--risk-track-off);
}
/* --- pulgar: nucleo luminoso, cuerpo azul, aro definido, halo contenido --- */
.kairo-calc .kcalc-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:var(--risk-thumb); height:var(--risk-thumb); border-radius:50%; border:0;
  margin-top:calc((3px - var(--risk-thumb)) / 2);
  /* Degradado hacia adentro: exterior azul oscuro, centro azul luminoso.
     Identidad azul de principio a fin, un solo aro exterior. */
  background:radial-gradient(circle at 50% 50%,
    #AFC1FF 0%, #7E9BEF 34%, #5B7CD9 66%, #3F5FC7 100%);
  box-shadow:
    0 0 0 1px #35508F,
    0 0 10px 1px rgba(126,155,239,.32),
    0 2px 5px rgba(0,0,0,.45);
  transition:transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s ease;
}
.kairo-calc .kcalc-range:hover::-webkit-slider-thumb{
  transform:scale(1.08);
  box-shadow:0 0 0 1px #4468B8,0 0 14px 2px rgba(126,155,239,.44),0 2px 6px rgba(0,0,0,.5);
}
.kairo-calc .kcalc-range:active::-webkit-slider-thumb{ transform:scale(1.04) }
/* Foco accesible: contorno propio, no depende del halo decorativo. El anillo
   punteado por defecto del navegador se retira SOLO en foco por puntero; con
   teclado sigue apareciendo un contorno solido y visible. */
.kairo-calc .kcalc-range:focus{ outline:none }
.kairo-calc .kcalc-range:focus-visible{ outline:2px solid #7E9BEF; outline-offset:4px; border-radius:99px }
/* --- Firefox: progress nativo, ya alineado al pulgar --- */
.kairo-calc .kcalc-range::-moz-range-track{ height:3px; border-radius:99px; background:var(--risk-track-off); border:0; box-shadow:none }
.kairo-calc .kcalc-range::-moz-range-progress{ height:3px; border-radius:99px; background:linear-gradient(90deg,#5B7CD9,#7E9BEF); border:0; box-shadow:none }
.kairo-calc .kcalc-range::-moz-range-thumb{
  width:var(--risk-thumb); height:var(--risk-thumb); border-radius:50%; border:0;
  background:radial-gradient(circle at 50% 50%,#AFC1FF 0%,#7E9BEF 34%,#5B7CD9 66%,#3F5FC7 100%);
  box-shadow:0 0 0 1px #35508F,0 0 10px 1px rgba(126,155,239,.32),0 2px 5px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion:reduce){
  .kairo-calc .kcalc-range::-webkit-slider-thumb{ transition:none }
  .kairo-calc .kcalc-range:hover::-webkit-slider-thumb{ transform:none }
}
/* Proporciones del bloque: el valor grande manda, la unidad lo acompana. */
.kairo-calc .kcalc-slider{ gap:16px; padding:2px 0 }
.kairo-calc .kcalc-big{ font-size:32px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em }
.kairo-calc .kcalc-bigwrap{ flex-direction:column; align-items:flex-end; gap:1px; flex:none }
.kairo-calc .kcalc-big-u{ font-size:10.5px; color:var(--text-4); letter-spacing:.06em; text-transform:uppercase; font-weight:600 }
.kairo-calc .kcalc-riskrow{ padding-top:2px }
/* C) "maximo permitido" junto a los presets, separado por un espaciador. */
.kairo-calc .kcalc-presetrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.kairo-calc .kcalc-spacer{ flex:1 1 auto; min-width:0 }
.kairo-calc .kcalc-maxrisk{ display:flex; align-items:center; gap:8px; flex:none }
.kairo-calc .kcalc-maxrisk span{ font:400 11px var(--font-ui); color:var(--text-4); white-space:nowrap }
.kairo-calc .kcalc-inp-max{ width:64px; height:30px; padding:0 8px; text-align:center; font:600 12px var(--font-mono); border-radius:8px }
@media (max-width:560px){
  /* En movil el maximo pasa a su propia linea completa y recupera area tactil. */
  .kairo-calc .kcalc-spacer{ display:none }
  .kairo-calc .kcalc-maxrisk{ flex:1 1 100%; justify-content:space-between; padding-top:2px }
  .kairo-calc .kcalc-inp-max{ width:88px; height:44px; font-size:13px }
  .kairo-calc .kcalc-big{ font-size:24px }
}


/* ---- bloque de riesgo: composicion v2 ---------------------------------- */
/* Presets y limite comparten zona, pero el limite queda visualmente separado
   como control secundario: es un tope de seguridad, no un objetivo. */
.kairo-calc .kcalc-presetrow{ align-items:flex-end; gap:8px 12px }
.kairo-calc .kcalc-chips{ gap:6px; flex:1 1 auto }
.kairo-calc .kcalc-chip{ padding:6px 9px; font-size:10.5px; border:1px solid transparent }
.kairo-calc .kcalc-chip:hover{ background:var(--surface-3); color:var(--text-2) }
.kairo-calc .kcalc-chip.is-on{ border-color:rgba(91,124,217,.45) }
.kairo-calc .kcalc-maxrisk{ display:flex; align-items:center; gap:6px; flex:none; padding-left:12px; border-left:1px solid var(--border) }
.kairo-calc .kcalc-maxrisk-l{ font:600 10.5px var(--font-ui); color:var(--text-4); white-space:nowrap; letter-spacing:.01em }
.kairo-calc .kcalc-inp-max{ width:58px; height:28px; padding:0 6px; text-align:center; font:600 12px var(--font-mono); border-radius:7px }
/* El deslizador respira mas y su zona activa es mayor sin engordar la pista. */
.kairo-calc .kcalc-slider{ gap:18px; padding:4px 0 2px }
.kairo-calc .kcalc-range{ height:24px }
@media (max-width:560px){
  .kairo-calc .kcalc-presetrow{ gap:10px }
  .kairo-calc .kcalc-chips{ flex:1 1 100%; gap:6px }
  .kairo-calc .kcalc-chip{ flex:1 1 auto; justify-content:center; min-width:52px; padding:0 6px }
  /* En movil el limite recupera su linea completa y su area tactil. */
  .kairo-calc .kcalc-maxrisk{ flex:1 1 100%; justify-content:space-between; padding-left:0; border-left:0; border-top:1px solid var(--border); padding-top:10px }
  .kairo-calc .kcalc-inp-max{ width:92px; height:44px; font-size:13px }
  .kairo-calc .kcalc-big{ font-size:26px }
}
[data-theme="light"] .kairo-calc .kcalc-chip.is-on{ border-color:rgba(63,95,199,.40) }

/* ===== DESLIZADOR: tema claro ===========================================
   Misma identidad azul con emision mucho menor: sobre fondo claro un halo
   como el del modo oscuro se leeria como una mancha. ==================== */
[data-theme="light"] .kairo-calc .kcalc-range{ --risk-track-off:rgba(122,131,148,.34) }
[data-theme="light"] .kairo-calc .kcalc-range::-webkit-slider-runnable-track,
[data-theme="light"] .kairo-calc .kcalc-range:focus::-webkit-slider-runnable-track{
  box-shadow:none;
  background:
    linear-gradient(90deg,#3F5FC7 0,#5B7CD9 var(--risk-fill),transparent var(--risk-fill)),
    var(--risk-track-off);
}
[data-theme="light"] .kairo-calc .kcalc-range::-webkit-slider-thumb{
  background:radial-gradient(circle at 50% 50%,#9FB4FF 0%,#6E8DE8 34%,#4E70D0 66%,#3F5FC7 100%);
  box-shadow:0 0 0 1px rgba(45,70,155,.65),0 0 7px 1px rgba(91,124,217,.22),0 2px 4px rgba(21,26,38,.20);
}
[data-theme="light"] .kairo-calc .kcalc-range:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 1px rgba(45,70,155,.75),0 0 10px 1px rgba(91,124,217,.28),0 2px 6px rgba(21,26,38,.24);
}
[data-theme="light"] .kairo-calc .kcalc-range:focus-visible{ outline-color:#3F5FC7 }
[data-theme="light"] .kairo-calc .kcalc-range::-moz-range-progress{ background:linear-gradient(90deg,#3F5FC7,#5B7CD9) }
[data-theme="light"] .kairo-calc .kcalc-range::-moz-range-thumb{
  background:radial-gradient(circle at 50% 50%,#9FB4FF 0%,#6E8DE8 34%,#4E70D0 66%,#3F5FC7 100%);
  box-shadow:0 0 0 1px rgba(45,70,155,.65),0 2px 4px rgba(21,26,38,.20);
}

/* ===== PANEL 02 - FRANJA R:R OBJETIVO ===================================
   Reproduccion literal del archivo fuente: superficie inset, grupo izquierdo
   compacto, espaciador flexible y accion al extremo derecho. ============ */
.kairo-calc .kcalc-rr{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border-radius:10px; padding:12px 14px;
}
.kairo-calc .kcalc-rr-l{ font:600 11.5px var(--font-ui); color:var(--text-3) }
.kairo-calc .kcalc-rr-in{ display:flex; align-items:center; gap:5px }
.kairo-calc .kcalc-rr-pre{ font:600 12px var(--font-mono); color:var(--text-4) }
/* El input del ratio es pequeno y centrado: no comparte medidas con los
   campos del formulario. Astra fija height:40px sobre input[type=number] con
   (0,1,1); este selector es (0,2,0) y va despues, asi que manda. */
.kairo-calc .kcalc-inp-rr{
  width:60px; min-width:0; height:31px; padding:0 9px;
  font:600 12.5px var(--font-mono); text-align:center; border-radius:8px;
}
.kairo-calc .kcalc-rr-tp{ font:400 11.5px var(--font-mono); color:var(--text-4); white-space:nowrap }
/* Accion secundaria, no CTA primario. */
.kairo-calc .kcalc-rr-btn{
  border:0; border-radius:8px; padding:7px 12px; cursor:pointer;
  background:rgba(122,131,148,.16); color:var(--primary-link);
  font:600 11.5px var(--font-ui);
  transition:background .13s ease;
}
.kairo-calc .kcalc-rr-btn:hover{ background:rgba(91,124,217,.18) }
.kairo-calc .kcalc-rr-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
/* Fila de lotaje: aparte y condicional, como en el archivo. */
.kairo-calc .kcalc-lotsrow{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding-top:2px }
.kairo-calc .kcalc-lotsrow[hidden]{ display:none }
.kairo-calc .kcalc-inp-lots{ width:120px; min-width:0; border-color:rgba(91,124,217,.35) }
@media (max-width:560px){
  /* Se conserva la composicion; solo se recupera el area tactil. */
  .kairo-calc .kcalc-rr{ gap:10px; padding:12px }
  .kairo-calc .kcalc-inp-rr{ height:44px; width:72px; font-size:14px }
  .kairo-calc .kcalc-rr-btn{ min-height:44px; padding:0 14px; flex:1 1 auto }
  .kairo-calc .kcalc-spacer{ display:none }
  .kairo-calc .kcalc-inp-lots{ width:100%; height:44px }
}

/* ===== VISTA PREVIA: contenido interno de las zonas ======================
   Etiqueta con precio + distancia a la izquierda, importe neto a la derecha.
   La zona superior alinea arriba y la inferior abajo, como el archivo. ==== */
.kairo-calc .kcalc-z-row{ display:flex; justify-content:space-between; gap:10px; width:100%; height:100% }
.kairo-calc .kcalc-zone.is-top .kcalc-z-row{ align-items:flex-start }
.kairo-calc .kcalc-zone.is-bottom .kcalc-z-row{ align-items:flex-end }
.kairo-calc .kcalc-z-c{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.kairo-calc .kcalc-z-m{ font:700 15px var(--font-mono); flex:none }
@media (max-width:560px){
  /* A 390 la columna derecha pasa debajo, a ancho completo y en el mismo orden. */
  .kairo-calc .kcalc-pvside{ flex:1 1 100%; justify-content:flex-start }
  .kairo-calc .kcalc-entry-l{ gap:6px }
  .kairo-calc .kcalc-z-m{ font-size:14px }
}