/* LicitIA · Design system Talos — azul #003C70, acento #E8873D, gris #EDEDEF */
:root{
  --azul:#003C70; --azul-2:#00509A; --azul-08:rgba(0,60,112,.08);
  --naranja:#E8873D; --gris:#EDEDEF; --tinta:#1B1F24; --meta:#5A6068;
  --ok:#2E7D32; --warn:#A05A1C; --ko:#B71C1C;
  --card:#FFFFFF; --borde:#DDE1E6; --radio:10px;
  --sombra:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tinta);background:var(--gris)}
.hidden{display:none!important}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;padding:.5rem .65rem;border:1px solid var(--borde);border-radius:8px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-08);border-color:var(--azul)}
.btn{border:0;border-radius:8px;padding:.5rem .9rem;font-weight:550}
.btn.primary{background:var(--azul);color:#fff}.btn.primary:hover{background:var(--azul-2)}
.btn.ghost{background:transparent;border:1px solid var(--borde);color:var(--azul)}
.btn.ghost:hover{border-color:var(--azul)}
.btn.sm{padding:.32rem .6rem;font-size:.85rem}
.btn.block{width:100%}
.spacer{flex:1}
.err{color:var(--ko);font-size:.85rem;min-height:1.1em;margin:.3rem 0}
.meta{color:var(--meta);font-size:.84rem}

/* Login */
#loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--azul) 0%,#062B4C 60%,#0A1B2E 100%)}
.logincard{background:#fff;border-radius:14px;padding:2.2rem;width:min(400px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.loginbrand{display:flex;align-items:center;gap:.6rem}
.loginbrand h1{margin:0;color:var(--azul);font-size:1.9rem;letter-spacing:.5px}
.loginsub{color:var(--meta);margin:.2rem 0 0;font-size:.88rem}
.logincount{color:var(--naranja);font-weight:650;font-size:.95rem;margin:.9rem 0}
.logincard input{width:100%;margin:.3rem 0}
.loginfoot{color:var(--meta);font-size:.75rem;text-align:center;margin:.9rem 0 0}
.logomark{width:26px;height:26px;border-radius:7px;flex:none;
  background:conic-gradient(from 210deg,var(--naranja),var(--azul) 40%,var(--azul-2))}

/* Layout app */
#app{display:grid;grid-template-columns:230px 1fr auto;height:100vh}
#sidebar{background:var(--azul);color:#fff;display:flex;flex-direction:column;padding:.9rem .7rem}
.brand{display:flex;gap:.55rem;align-items:center;padding:.2rem .5rem 1rem}
.brand b{font-size:1.15rem;letter-spacing:.4px}
.brand small{display:block;opacity:.65;font-size:.72rem}
nav{display:flex;flex-direction:column;gap:.15rem}
.navlink{color:#fff;text-decoration:none;padding:.55rem .7rem;border-radius:8px;opacity:.82;font-size:.95rem}
.navlink .ic{display:inline-block;width:1.3rem;color:var(--naranja)}
.navlink:hover{background:rgba(255,255,255,.08);opacity:1}
.navlink.activo{background:rgba(255,255,255,.14);opacity:1;font-weight:600}
.sidefoot{margin-top:auto;font-size:.78rem;opacity:.85;display:flex;flex-direction:column;gap:.5rem}
.gasto{background:rgba(255,255,255,.1);border-radius:8px;padding:.45rem .6rem}
.hitl{border-left:3px solid var(--naranja);padding:.3rem .5rem;opacity:.8;line-height:1.35}

#main{display:flex;flex-direction:column;min-width:0}
#topbar{display:flex;align-items:center;gap:.5rem;background:#fff;border-bottom:1px solid var(--borde);padding:.55rem 1rem}
#viewtitle{font-weight:650;color:var(--azul);font-size:1.05rem}
.user{color:var(--meta);font-size:.85rem}
#view{padding:1rem 1.2rem;overflow:auto}

/* Cards y componentes */
.card{background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);padding:1rem 1.1rem;margin:.6rem 0}
.grid{display:grid;gap:.7rem}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kpi{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:.9rem 1rem}
.kpi .v{font-size:1.7rem;font-weight:700;color:var(--azul)}
.kpi .v small{font-size:.9rem;color:var(--meta);font-weight:400}
.kpi .l{color:var(--meta);font-size:.8rem;margin-top:.15rem}
.kpi.naranja .v{color:var(--naranja)}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.4rem 0 .8rem}
.chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{background:#fff;border-radius:999px;padding:.28rem .75rem;font-size:.82rem;color:var(--meta);box-shadow:var(--sombra)}
.chip b{color:var(--azul)}
.tag{display:inline-block;border-radius:5px;padding:.08rem .45rem;font-size:.73rem;background:var(--azul-08);color:var(--azul);margin-right:.25rem}
.estado{display:inline-block;border-radius:5px;padding:.1rem .5rem;font-size:.75rem;background:var(--gris)}
.estado.candidata{background:#E3EFFF;color:var(--azul)}
.estado.en_trabajo{background:#FFF3E0;color:var(--warn)}
.estado.presentada{background:#E8F5E9;color:var(--ok)}
.estado.adjudicada{background:#C8E6C9;color:#1B5E20}
.estado.no_adjudicada{background:#FFEBEE;color:var(--ko)}
.estado.descartada{background:#EEE;color:#777}
.sem{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;margin-right:.3rem}
.sem.v{background:var(--ok)}.sem.a{background:var(--naranja)}.sem.r{background:var(--ko)}
table.tabla{width:100%;border-collapse:collapse;font-size:.86rem}
.tabla th{text-align:left;color:var(--meta);font-weight:600;padding:.35rem .5rem;border-bottom:2px solid var(--borde)}
.tabla td{padding:.4rem .5rem;border-bottom:1px solid var(--gris)}
.licit h3{margin:.1rem 0 .25rem;font-size:.98rem;line-height:1.35}
.licit .score{color:var(--azul);font-weight:700;margin-left:.4rem;white-space:nowrap}
.acciones{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.55rem;align-items:center}
.acciones select,.acciones input{font-size:.82rem;padding:.3rem .45rem}
details.det summary{cursor:pointer;color:var(--azul);font-size:.85rem;margin-top:.4rem}
.tabs{display:flex;gap:.3rem;margin:.6rem 0 .4rem}
.tabs button{border:1px solid var(--borde);background:#fff;border-radius:7px;padding:.3rem .7rem;font-size:.82rem}
.tabs button.on{background:var(--azul);color:#fff;border-color:var(--azul)}
pre.jsonbox{background:#F7F8FA;border:1px solid var(--borde);border-radius:8px;padding:.7rem;font-size:.78rem;white-space:pre-wrap;max-height:300px;overflow:auto}

/* Chat dock */
#chatdock{width:340px;background:#fff;border-left:1px solid var(--borde);display:flex;flex-direction:column;height:100vh}
#litidocktab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:41;
 width:18px;height:32px;padding:0;border:1px solid var(--naranja);border-right:0;
 border-radius:8px 0 0 8px;
 background:#fff;color:var(--naranja);font-size:.78rem;font-weight:600;line-height:1;cursor:pointer;
 opacity:.8;box-shadow:-1px 1px 4px rgba(0,0,0,.10);transition:right .2s ease,opacity .15s ease}
#litidocktab:hover{opacity:1;background:#fff7f0}
#litidocktab.abierto{right:340px}
body.imprimiendo #litidocktab{display:none!important}
.chathead{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--borde);color:var(--azul)}
.chatsub{color:var(--meta);font-size:.78rem}
#chatlog{flex:1;overflow:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:88%;padding:.55rem .75rem;border-radius:12px;font-size:.87rem;line-height:1.45;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.msg.liti{align-self:flex-start;background:var(--gris);border-bottom-left-radius:4px}
.msg.pensando{align-self:flex-start;color:var(--meta);font-style:italic}
.chatinput{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--borde)}
.chatinput textarea{flex:1;resize:none}

/* Editor */
.editorbar{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
#editor{background:#fff;border:1px solid var(--borde);border-radius:10px;min-height:52vh;padding:1.2rem 1.4rem;outline:none;line-height:1.55;overflow:auto}
#editor h1{color:var(--azul);font-size:1.5rem;border-bottom:2px solid var(--gris);padding-bottom:.2rem}
#editor h2{color:var(--azul);font-size:1.2rem}
#editor h3{color:var(--azul-2);font-size:1.02rem}
.editwrap{display:grid;grid-template-columns:220px 1fr;gap:.8rem}
#listaprop{max-height:60vh;overflow:auto}
#listaprop .item{padding:.45rem .55rem;border-radius:7px;cursor:pointer;font-size:.82rem}
#listaprop .item:hover{background:var(--azul-08)}
#listaprop .item.on{background:var(--azul);color:#fff}

/* SVG charts */
.chartbox{overflow-x:auto}
.bar{fill:var(--azul)} .bar.n2{fill:var(--naranja)}
.axis{stroke:var(--borde)} .lbl{font-size:10px;fill:var(--meta)}
.linea{fill:none;stroke:var(--azul);stroke-width:2}
.zona-tem{fill:rgba(183,28,28,.08)}
.marca-sac{stroke:var(--naranja);stroke-dasharray:4 3;stroke-width:1.5}

/* Avatar Liti flotante — elegante: borde azul, cara gris suave */
#litiavatar{position:fixed;right:22px;bottom:22px;z-index:45;width:64px;height:64px;border-radius:50%;
 border:2px solid var(--azul);background:#fff;box-shadow:0 6px 24px rgba(0,60,112,.28);cursor:pointer;
 display:flex;align-items:center;justify-content:center;transition:transform .15s,right .2s ease}
#litiavatar.dockabierto{right:352px}
#litiavatar:hover{transform:scale(1.08) rotate(-3deg)}
#litiavatar .ojo{animation:parpadeo 5s infinite;transform-origin:center}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
#litiavatar .cara-pensando{display:none}
#litiavatar.pensando .cara-normal{display:none}
#litiavatar.pensando .cara-pensando{display:block}
#litiavatar.pensando{animation:cavila 1.6s ease-in-out infinite}
@keyframes cavila{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(4deg)}}
#litibadge{position:absolute;top:-6px;right:-6px;font-size:1.05rem;background:transparent}

/* Raíl de estado en tarjetas del Radar (gobernanza visual, idea Sergi 05-07):
   blanco+borde azul = nueva · azul+filete naranja = seleccionada para Liti · naranja = tratada */
.licit{position:relative;padding-left:1.75rem!important}
.rail{position:absolute;left:0;top:0;bottom:0;width:18px;border-radius:10px 0 0 10px;cursor:pointer;
 background:#fff;border:1.5px solid var(--azul);border-right-width:2px;transition:background .15s}
.rail:hover{background:var(--azul-08)}
.rail.sel{background:var(--azul);box-shadow:inset 0 0 0 2px var(--naranja)}
.rail.tratada{background:var(--naranja);border-color:var(--naranja)}
.rail.tratada.sel{box-shadow:inset 0 0 0 2px var(--azul)}

/* Tarjetas del Radar: levantarse al pasar (detalle Sergi) */
.card.licit{transition:transform .13s ease,box-shadow .13s ease}
.card.licit:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,60,112,.14)}

/* Botón Liti corporativo: borde animado azul/naranja, interior blanco, letras naranja */
.btn.liti{position:relative;overflow:hidden;background:transparent;padding:0;border:0;border-radius:10px}
.btn.liti::before{content:"";position:absolute;width:220%;padding-bottom:220%;top:50%;left:50%;
 transform:translate(-50%,-50%);background:conic-gradient(var(--azul) 0deg,var(--naranja) 120deg,var(--azul) 240deg,var(--naranja) 360deg);
 animation:girabtn 3s linear infinite;z-index:0}
@keyframes girabtn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.btn.liti span{position:relative;z-index:1;display:flex;align-items:center;gap:.4rem;
 background:#fff;margin:2.5px;padding:.42rem .85rem;border-radius:8px;
 color:var(--naranja);font-weight:650}
.btn.liti:hover span{background:#FFF8F2}
.clicable{cursor:pointer;text-decoration:underline dotted;color:var(--azul)!important}
.clicable:hover{color:var(--naranja)!important}
#modalcard.ancho{width:min(880px,95vw)}

/* Vista cuadrícula del Radar */
#rout.gridview{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:.6rem}
#rout.gridview .card{margin:0}
#rout.gridview .licit h3{font-size:.88rem}
#rout.gridview .acciones select,#rout.gridview .acciones input{max-width:110px}
.propview{background:#fff;border-radius:10px;box-shadow:var(--sombra);padding:1.1rem 1.3rem;line-height:1.55}
.propview h1{color:var(--azul);font-size:1.3rem}.propview h2{color:var(--azul);font-size:1.1rem}
.propview h3{color:var(--azul-2);font-size:.98rem}
.selcheck{transform:scale(1.25);margin-right:.3rem;accent-color:var(--azul)}

/* Modal */
#modal{position:fixed;inset:0;background:rgba(10,20,30,.45);display:flex;align-items:center;justify-content:center;z-index:50}
#modalcard{background:#fff;border-radius:12px;padding:1.3rem;width:min(560px,94vw);max-height:88vh;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.35)}

/* Impresión estilo Talos: al imprimir un informe, solo el informe */
@media print{
 body.imprimiendo #sidebar,body.imprimiendo #topbar,body.imprimiendo #chatdock,
 body.imprimiendo #litiavatar,body.imprimiendo .controls,body.imprimiendo .chips,
 body.imprimiendo .card:not(:has(.zona-imprimir)){display:none!important}
 body.imprimiendo #app{display:block}
 body.imprimiendo .zona-imprimir{box-shadow:none;border:0;padding:0}
 body.imprimiendo .zona-imprimir h1{color:#003C70!important;border-bottom:3px solid #E8873D}
}

@media (max-width:1100px){#chatdock{position:fixed;right:0;top:0;z-index:40;box-shadow:-8px 0 30px rgba(0,0,0,.15)}}
@media (max-width:820px){#app{grid-template-columns:64px 1fr auto}
 .brand div,.navlink span:not(.ic),.sidefoot{display:none}
 .navlink{text-align:center}.navlink .ic{width:auto}}
