/* Dyserco Studio Apps · «Mis proyectos», chip de proyecto, estados y el hub de entrada. Misma piel que base.css. */

/* ---------- estados con etiquetas amables ---------- */
.hx-est{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);background:rgba(255,255,255,.04);white-space:nowrap}
.hx-est::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mut)}
.hx-est.e-borrador::before{background:var(--mut)}
.hx-est.e-enviado{color:#9fdcf0;border-color:rgba(77,182,214,.45);background:rgba(77,182,214,.08)}.hx-est.e-enviado::before{background:var(--cyan)}
.hx-est.e-en-revision{color:var(--brass2);border-color:rgba(201,169,97,.5);background:rgba(201,169,97,.1)}.hx-est.e-en-revision::before{background:var(--brass);box-shadow:0 0 0 3px rgba(201,169,97,.2);animation:hxPulso 1.8s ease-in-out infinite}
.hx-est.e-cotizado{color:#8fe0b5;border-color:rgba(89,197,143,.5);background:rgba(89,197,143,.1)}.hx-est.e-cotizado::before{background:var(--ok)}
.hx-est.e-cerrado{color:var(--mut);border-color:var(--line);background:transparent}.hx-est.e-cerrado::before{background:#4b5a70}
@keyframes hxPulso{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- chip del proyecto en la cabecera ---------- */
#hxChip{display:flex;align-items:center}
.hx-chip{display:flex;align-items:center;gap:9px;max-width:300px;padding:5px 12px 5px 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(4,12,26,.5);color:var(--ink2);font-size:12px;transition:border-color .2s,background .2s;white-space:nowrap}
.hx-chip:hover{border-color:var(--brass);background:rgba(201,169,97,.08)}
.hx-chip svg.i{width:15px;height:15px;color:var(--brass2)}
.hx-chip b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hx-chip small{color:var(--mut);font-size:11px}
.hx-chip.sin{border-style:dashed}
@media (max-width:1100px){.hx-chip small{display:none}.hx-chip{max-width:200px}}
@media (max-width:820px){.hx-chip{display:none}}

/* ---------- ventana «Mis proyectos» ---------- */
.hx-modal .box.ancha{width:min(720px,94vw)}
.hx-proys{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px;max-height:58vh;overflow:auto;padding-right:2px}
.hx-proy{border:1px solid var(--line);border-radius:14px;background:rgba(4,12,26,.4);padding:12px 14px;transition:border-color .2s,transform .3s var(--ease);animation:hxUp .45s var(--ease) both}
.hx-proy:hover{border-color:var(--line2)}
.hx-proy.abierto{border-color:var(--brass);background:rgba(201,169,97,.07)}
.hx-proy .cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hx-proy .cab b{font:500 16px var(--ser);flex:1;min-width:140px}
.hx-proy .res{color:var(--ink2);font-size:12.5px;margin-top:5px;line-height:1.4}
.hx-proy .meta{color:var(--mut);font-size:11.5px;margin-top:4px}
.hx-proy .nota-dy{margin-top:9px;border-left:3px solid var(--brass);padding:7px 11px;background:rgba(201,169,97,.08);border-radius:0 9px 9px 0;font-size:12.5px;color:var(--ink)}
.hx-proy .nota-dy small{display:block;color:var(--brass2);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:600;margin-bottom:2px}
.hx-proy .acc{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.hx-proy .acc .btn.sm{padding:6px 11px;font-size:12px}
.hx-proy .acc .btn.seguro{border-color:var(--bad);color:var(--bad);background:rgba(226,112,95,.1)}
.hx-vacio{text-align:center;color:var(--mut);padding:26px 10px;border:1px dashed var(--line2);border-radius:14px;font-size:13px}
.hx-vacio svg.i{width:30px;height:30px;color:var(--brass);margin-bottom:8px;display:block;margin-inline:auto}
@keyframes hxUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- ventana «Enviar a Dyserco» ---------- */
.hx-envio .pasos{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.hx-envio .paso{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:12.5px;color:var(--ink2)}
.hx-envio .paso i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--ser);font-style:normal;color:var(--brass2);border:1px solid var(--line2);background:rgba(201,169,97,.08)}
.hx-envio .paso b{color:var(--ink)}
.hx-envio .aviso-fin{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink2);padding:9px 11px;border-radius:10px;background:rgba(77,182,214,.07);border:1px solid rgba(77,182,214,.22);margin:6px 0 12px}
.hx-envio .aviso-fin svg.i{color:var(--cyan);margin-top:1px;width:16px;height:16px}
.hx-hecho{text-align:center}
.hx-hecho .circ{width:68px;height:68px;border-radius:50%;margin:2px auto 14px;display:grid;place-items:center;background:rgba(89,197,143,.14);color:var(--ok);animation:hxPop .6s var(--ease)}
.hx-hecho .circ svg.i{width:30px;height:30px;stroke-width:2.2}
.hx-hecho .estado-final{display:inline-flex;margin:4px 0 10px}

/* ---------- volver y chips de cabecera ---------- */
.hx-top .volver{gap:6px;padding:7px 12px 7px 9px}
.hx-top .volver span{font-size:12.5px;font-weight:600;letter-spacing:.02em}
@media (max-width:560px){.hx-top .volver span{display:none}}

/* ---------- cabecera con chip + 4 botones: que el título no se estruje ---------- */
.hx-top .tt{flex:0 1 auto;min-width:150px}.hx-top .tt span{white-space:nowrap}
.hx-top .tt b{max-width:340px}
@media (max-width:1560px){.hx-top .quien{display:none}}
@media (max-width:1280px){.hx-top .tt b{max-width:200px}.hx-top .volver span{display:none}}