/* =========================================================================
   EXERGÍA · Kit visual "exg-ui" para Herramientas de Cálculo (V5)
   Componentes inspirados en cult-ui (recreados en CSS/JS sin dependencias):
   · Botones neumórficos (acciones sin subselección)
   · Botón con borde degradado giratorio (llamadas a la acción)
   · Pestañas con píldora deslizante y contenido direccional (subselecciones)
   · Gráficas analíticas con trazo degradado, animación y tooltips
   · Tablero kanban de pendientes del expediente
   · Ficha del expediente junto a la descripción de la herramienta
   Identidad: Azul #174C73 · Naranja #FF751F · Papel #F4F2EE · Tinta #0E1116
   © 2026 EXERGÍA. Todos los derechos reservados.
   ========================================================================= */
:root{
  --nb-hi:rgba(255,255,255,.85); --nb-lo:rgba(14,17,22,.07); --nb-sh:rgba(14,17,22,.10);
  --xg1:#174C73; --xg2:#2F7FBF; --xg3:#FF751F;
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--nb-hi:rgba(255,255,255,.07);--nb-lo:rgba(0,0,0,.35);--nb-sh:rgba(0,0,0,.45);--xg1:#6FA6D6;--xg2:#8EC0EA}}
:root[data-theme="dark"]{--nb-hi:rgba(255,255,255,.07);--nb-lo:rgba(0,0,0,.35);--nb-sh:rgba(0,0,0,.45);--xg1:#6FA6D6;--xg2:#8EC0EA}

/* ---------- Botones neumórficos ---------- */
.btn{position:relative;border:1px solid var(--line);border-radius:10px;padding:7px 13px;font-weight:600;font-size:13px;color:var(--ink);
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 90%,var(--bg)));
  box-shadow:inset 0 1px 0 var(--nb-hi),inset 0 -1px 0 var(--nb-lo),0 1px 2px var(--nb-sh),0 4px 10px -4px var(--nb-sh);
  transition:transform .2s var(--ease-spring),box-shadow .2s,border-color .2s,background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:scale(1.02);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.btn:active{transform:scale(.98);box-shadow:inset 0 2px 5px var(--nb-sh),inset 0 -1px 0 var(--nb-hi)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn.pri{color:#fff;border-color:#123d5d;background:linear-gradient(180deg,#2a6596,#174C73 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.2),0 2px 8px -2px rgba(23,76,115,.55)}
.btn.pri:hover{border-color:#0D2438}
.btn.nar{color:#fff;border-color:#d65a0c;background:linear-gradient(180deg,#ff9150,#FF751F 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.15),0 2px 8px -2px rgba(255,117,31,.55)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger);background:var(--danger-soft,#f7dede)}
.btn.sm{padding:4px 10px;font-size:12px;border-radius:8px}
.btn.lg{padding:11px 20px;font-size:15px;border-radius:12px}
.btn.full{width:100%;justify-content:center}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading>*{visibility:hidden}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid currentColor;border-color:var(--accent) transparent var(--accent) transparent;animation:xspin .7s linear infinite}
.btn.pri.is-loading::after,.btn.nar.is-loading::after{border-color:#fff transparent #fff transparent}
.btn .bdg{font-family:var(--f-mono);font-size:10.5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:var(--naranja);color:#fff;font-weight:600}
.btn .bdg.z{background:var(--ok)}

/* ---------- Botón con borde degradado giratorio (CTA) ---------- */
.xanim{position:relative;display:inline-flex;border-radius:13px;padding:2px;overflow:hidden;isolation:isolate;text-decoration:none;color:var(--ink);
  box-shadow:0 6px 18px -8px rgba(255,117,31,.55);transition:transform .2s var(--ease-spring)}
.xanim::before{content:"";position:absolute;inset:-180%;z-index:-1;background:conic-gradient(from 0deg,#174C73,#2F7FBF,#FF751F,#FFB37A,#174C73);animation:xspin 4.5s linear infinite}
.xanim.fast::before{animation-duration:2s}.xanim.slow::before{animation-duration:8s}
.xanim.g-agua::before{background:conic-gradient(from 0deg,#0E7C86,#4FC3CC,#174C73,#7fd1d8,#0E7C86)}
.xanim.g-solar::before{background:conic-gradient(from 0deg,#E8A100,#FFC23D,#FF751F,#FFE08A,#E8A100)}
.xanim>span{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:9px 16px;background:var(--surface);font-weight:700;font-size:13.5px;line-height:1.2;width:100%}
.xanim.solid>span{background:linear-gradient(180deg,#123d5d,#0D2438);color:#fff}
.xanim svg{width:17px;height:17px;flex:0 0 auto}
.xanim:hover{transform:scale(1.02)}.xanim:active{transform:scale(.98)}
.xanim.full{display:flex;width:100%}
@keyframes xspin{to{transform:rotate(1turn)}}

/* ---------- Pestañas con píldora deslizante ---------- */
.seg.xpilled,.lvl.xpilled{position:relative;isolation:isolate}
.seg.xpilled{border-radius:11px;padding:3px;gap:2px;overflow:visible;background:color-mix(in srgb,var(--surface) 80%,var(--bg));box-shadow:inset 0 1px 2px var(--nb-lo)}
.seg.xpilled button{border:0!important;border-radius:8px;position:relative;z-index:1;background:transparent!important;color:var(--muted);font-weight:600;transition:color .25s}
.seg.xpilled button.on{color:var(--accent-ink)!important}
.seg.xpilled button:hover:not(.on){color:var(--ink)}
.lvl.xpilled button{position:relative;z-index:1;background:transparent!important;transition:color .25s}
.lvl.xpilled button.on{color:var(--bg)}
.xpill{position:absolute;z-index:0;left:0;top:0;border-radius:8px;background:var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.2);pointer-events:none;
  transition:transform .42s var(--ease-spring),width .42s var(--ease-spring),height .3s var(--ease-out),opacity .2s}
.lvl .xpill{background:var(--ink);border-radius:999px}
.xpill.noanim{transition:none!important}
/* contenido direccional */
.xs-r{animation:xslideR .38s var(--ease-out)}
.xs-l{animation:xslideL .38s var(--ease-out)}
@keyframes xslideR{from{opacity:0;transform:translateX(28px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes xslideL{from{opacity:0;transform:translateX(-28px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Ficha del expediente junto a la descripción ---------- */
/* descripción (izq.) y ficha (der.) con tamaños iguales y genéricos en todas las herramientas */
.xhead{grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:16px!important}
@media (min-width:1000px){.xhead{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.xmain{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--rc,var(--accent));border-radius:var(--r,10px);box-shadow:var(--sh);padding:16px 18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc,var(--accent)) 7%,var(--surface)),var(--surface) 46%)}
.xmain .xtitle{align-items:flex-start}
.xmain .xsub{font-size:13.5px;max-width:none;color:var(--ink);opacity:.82}
.xmain .xtools{justify-content:flex-start!important;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.xsteps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.xsteps:empty{display:none}
@media (max-width:999px){.xsteps{display:none}}
.xsteps p{grid-column:1/-1;margin:0 0 2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.xsteps button{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 9px;font-size:12.5px;font-weight:600;color:var(--ink);min-width:0;transition:border-color .2s,transform .2s var(--ease-spring)}
.xsteps button:hover{border-color:var(--sc);transform:translateY(-1px)}
.xsteps button.on{border-color:var(--sc);box-shadow:inset 3px 0 0 var(--sc)}
.xsteps button i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:#fff;background:var(--sc);border-radius:6px;padding:1px 5px;flex:0 0 auto}
.xsteps button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xsteps button .ck{margin-left:auto;color:var(--ok);font-size:11px}
.xsteps button .ck.wn{color:var(--naranja)}
.xhead .side{position:static!important;max-height:none!important;overflow:visible!important;min-width:0}
.xhead .side .card{margin:0}
.app{grid-template-columns:minmax(0,1fr)!important}
.ficha{border-top:4px solid var(--fc,var(--accent));padding:14px 16px!important;display:flex;flex-direction:column;gap:6px;height:100%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc,var(--accent)) 7%,var(--surface)),var(--surface) 46%)!important}
.ficha>*{flex-shrink:0}
.ficha>details.semd{flex-shrink:1}
.ficha .fhd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ficha .fhd h2{margin:0!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ficha .fpj{font-weight:700;font-size:14.5px;line-height:1.25}
.ficha .fpj.muted{font-weight:500;font-size:12.5px}
.ficha .fkp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start}
.ficha .fkp>.big,.ficha .fkp>.note,.ficha .fkp>p,.ficha .fkp>div:not(.sl),.ficha .fkp>h3{grid-column:1/-1}
.ficha .fkp .big{font-size:30px}
.ficha .fkp .sl{font-size:13px;padding:5px 0}
.ficha .fkp .sl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
@media (max-width:420px){.ficha .fkp{grid-template-columns:1fr}}
@media (min-width:1000px){
  .xhead .side{position:relative!important;min-height:330px}
  .xhead .side .ficha{position:absolute;inset:0;overflow:auto}
  .ficha details.semd[open]{flex:1 1 auto;min-height:60px;overflow:auto}
}
details.semd{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0;margin-top:4px}
details.semd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;font-size:12px;font-weight:600}
details.semd>summary::-webkit-details-marker{display:none}
details.semd>summary::after{content:"▾";color:var(--muted);transition:transform .2s}
details.semd[open]>summary::after{transform:rotate(180deg)}
details.semd .sem{padding:2px 10px 10px}
.semc{display:inline-flex;gap:4px;margin-left:auto}
.semc i{font-style:normal;font-family:var(--f-mono);font-size:11px;min-width:22px;text-align:center;border-radius:999px;padding:0 6px;color:#fff}
.semc i.s-ok{background:var(--ok)}.semc i.s-wn{background:var(--naranja)}.semc i.s-no{background:var(--danger)}
.fcta{margin-top:auto;padding-top:6px;flex:0 0 auto}
details.semd>summary{position:sticky;top:0;background:var(--surface);z-index:1;border-radius:10px}
.fcta small{display:block;color:var(--muted);font-size:11px;margin-top:5px;text-align:center}

/* ---------- Gráficas analíticas ---------- */
.xchart{position:relative;outline:none;border-radius:14px}
.xchart:focus-visible{outline:2px solid var(--naranja);outline-offset:4px}
.xchart svg{width:100%;height:auto;display:block;overflow:visible}
.xchart .gl{stroke:var(--line);stroke-dasharray:2 4}
.xchart .ax{stroke:var(--line)}
.xchart .zl{stroke:var(--muted);stroke-width:1;opacity:.6}
.xchart text{font-family:var(--f-mono);font-size:10px;fill:var(--muted)}
.xc-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.xc-dot{fill:var(--surface);stroke-width:2}
.xc-hdot{fill:var(--surface);stroke-width:2.6;opacity:0;transition:opacity .12s}
.xc-guide{stroke:var(--muted);stroke-dasharray:3 3;opacity:0;transition:opacity .12s}
.xchart.hov .xc-guide,.xchart.hov .xc-hdot{opacity:1}
.xc-bar{transition:opacity .15s}
.xchart.hov .xc-bar.dim{opacity:.38}
.xc-pin rect{fill:var(--ink)}.xc-pin text{fill:var(--bg)!important;font-weight:600}
.xc-tip{position:absolute;left:0;top:0;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:10px;padding:7px 10px;font-size:11.5px;line-height:1.4;white-space:nowrap;
  transform:translate(-50%,calc(-100% - 14px));opacity:0;transition:opacity .12s;box-shadow:0 8px 22px -6px rgba(0,0,0,.35);z-index:5;font-family:var(--f-body)}
.xc-tip.on{opacity:1}
.xc-tip .h{font-weight:700;margin-bottom:2px}
.xc-tip .r{display:flex;align-items:center;gap:6px}
.xc-tip .r i{width:8px;height:8px;border-radius:50%;display:inline-block}
.xc-tip .r b{font-family:var(--f-mono);font-weight:600;margin-left:auto;padding-left:10px}
.xc-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);margin-top:6px}
.xc-leg i{display:inline-block;width:16px;height:4px;border-radius:2px;vertical-align:3px;margin-right:6px}
.xc-hint{font-size:11px;color:var(--muted);text-align:center;opacity:.7;margin-top:2px}
.xchart.xc-anim .xc-line{stroke-dasharray:1;stroke-dashoffset:1;animation:xcdraw 1.15s var(--ease-out) forwards}
.xchart.xc-anim .xc-area{opacity:0;animation:xcfade .9s .35s var(--ease-out) forwards}
.xchart.xc-anim .xc-dot{opacity:0;animation:xcpop .35s var(--ease-spring) forwards;animation-delay:var(--d,0s)}
.xchart.xc-anim .xc-bar{transform-box:fill-box;transform-origin:50% 100%;animation:xcgrow .7s var(--ease-out) both;animation-delay:var(--d,0s)}
.xchart.xc-anim .xc-bar.neg{transform-origin:50% 0%}
@keyframes xcdraw{to{stroke-dashoffset:0}}
@keyframes xcfade{to{opacity:1}}
@keyframes xcpop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes xcgrow{from{transform:scaleY(0)}}
.xc-dot{transform-box:fill-box;transform-origin:center}

/* ---------- Tablero kanban de pendientes ---------- */
.kbpanel{margin:-4px 0 16px}
.kbwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r,10px);box-shadow:var(--sh);padding:14px 16px}
.kbtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.kbtop h3{font-size:15px;margin:0;display:flex;align-items:center;gap:8px}
.kbtop p{margin:0;color:var(--muted);font-size:12px;max-width:70ch}
.kb{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.kb{grid-template-columns:1fr}}
.kbcol{background:color-mix(in srgb,var(--bg) 70%,var(--surface));border:1px solid var(--line);border-radius:14px;padding:10px;min-height:120px;transition:background .2s,border-color .2s,box-shadow .2s}
.kbcol.over{border-color:var(--naranja);background:var(--naranja-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--naranja) 22%,transparent)}
.kbh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;margin:2px 4px 10px}
.kbh i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kbh .n{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.kbc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 10px 9px 28px;margin-bottom:8px;font-size:12.5px;line-height:1.35;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px -6px rgba(0,0,0,.12);cursor:grab;user-select:none;outline:none;transition:box-shadow .2s,border-color .2s}
.kbc:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.kbc:focus-visible{border-color:var(--naranja);box-shadow:0 0 0 3px color-mix(in srgb,var(--naranja) 25%,transparent)}
.kbc .grip{position:absolute;left:4px;top:6px;bottom:6px;width:18px;display:grid;place-items:center;color:var(--muted);cursor:grab;touch-action:none;border-radius:6px}
.kbc .grip:hover{background:var(--bg)}
.kbc .grip svg{width:12px;height:12px}
.kbc .kt{font-weight:600}
.kbc .kd{color:var(--muted);font-size:11.5px;margin-top:2px}
.kbc .kf{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
.kbc .tag{display:inline-block;font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 7px}
.tag.s-no{background:var(--danger-soft,#f7dede);color:var(--danger)}.tag.s-wn{background:var(--naranja-soft);color:var(--warn)}.tag.s-ok{background:var(--ok-soft);color:var(--ok)}.tag.nota{background:var(--accent-soft);color:var(--accent)}
.kbc .kmv{margin-left:auto;display:flex;gap:2px}
.kbc .kmv button{border:0;background:none;color:var(--muted);font-size:13px;line-height:1;padding:2px 5px;border-radius:5px}
.kbc .kmv button:hover{background:var(--bg);color:var(--ink)}
.kbc.ghost{position:fixed;z-index:60;pointer-events:none;margin:0;transform:rotate(2.5deg) scale(1.03);box-shadow:0 22px 44px -12px rgba(0,0,0,.4);cursor:grabbing}
.kbc.ph{opacity:.3}
.kbadd{display:flex;gap:6px;margin-top:4px}
.kbadd input{flex:1;min-width:0;padding:6px 9px;border:1px dashed var(--line);border-radius:9px;background:var(--surface);font-size:12.5px}
.kbempty{color:var(--muted);font-size:12px;text-align:center;padding:14px 6px;border:1px dashed var(--line);border-radius:10px}
.rep .kbrep td.c{white-space:nowrap;font-weight:600}

/* ---------- pie de página en listas ---------- */
.bf-cols{display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.bf-cols b{display:block;color:var(--ink);font-size:12px;letter-spacing:.04em;margin-bottom:4px}
.bf-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.bf-cols li{position:relative;padding-left:12px;font-size:12px;line-height:1.4}
.bf-cols li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--naranja)}
.kbpanel{margin:18px 0 0!important}
.linea ol{grid-auto-columns:minmax(92px,1fr)!important}
.linea button{min-width:86px!important}
.linea .nom{font-size:12px!important}

/* ---------- impresión y movimiento reducido ---------- */
@media print{
  .xc-tip,.xc-hint,.kbpanel,.fcta,.xanim{display:none!important}
  .xchart .xc-line{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
  .xchart .xc-area,.xchart .xc-dot,.xchart .xc-bar{opacity:1!important;animation:none!important;transform:none!important}
  .btn{box-shadow:none!important}
}
@media (prefers-reduced-motion:reduce){
  .xanim::before,.xs-r,.xs-l,.xchart.xc-anim .xc-line,.xchart.xc-anim .xc-area,.xchart.xc-anim .xc-dot,.xchart.xc-anim .xc-bar{animation:none!important}
  .xchart.xc-anim .xc-line{stroke-dasharray:none;stroke-dashoffset:0}
  .xchart.xc-anim .xc-area,.xchart.xc-anim .xc-dot{opacity:1}
  .xpill,.btn,.xanim,.kbc{transition:none!important}
}