/* Portal de estado para clientes de Pahlass — diseño "pahlass-portal-despliegue".
   Sin estilos ni scripts inline (CSP estricta); tipografías servidas desde aquí. */
@font-face{font-family:'Inter Tight';src:url(/fonts/inter-tight.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/fonts/jetbrains-mono.woff2) format('woff2');font-weight:100 800;font-display:swap}
:root{--bg:#08090B;--sup:#0D0F12;--linea:#1F2329;--linea2:#2A2E35;--tx:#FFFFFF;--tx2:#A3A9B2;--tx3:#6B717A;
  --ok:#5FD19B;--ok2:#3E8A62;--rie:#E6B35A;--mal:#F07A7A;
  --mono:"JetBrains Mono",ui-monospace,monospace;--sans:"Inter Tight",system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#E9EAEC;color:var(--tx);font-family:var(--sans);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 80%)}
.bar{position:relative;display:flex;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:1px solid #D4D6DA;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5C626B}
.bar span:last-child{display:flex;align-items:center;gap:8px}
.bar span:last-child::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok2)}
.wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.card{width:min(660px,100%);background:#0D0F12;border:1px solid var(--linea2);border-radius:8px;padding:38px 40px;box-shadow:0 30px 70px rgba(10,12,16,.28)}
.head{display:flex;align-items:flex-start;gap:16px;padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid var(--linea)}
.head img{height:24px;width:auto;display:block;margin-top:2px}
.folio{margin-left:auto;text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);line-height:1.6}
.folio b{display:block;color:var(--tx);font-weight:500}
.et{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
h1{font-size:34px;font-weight:300;letter-spacing:-.03em;line-height:1.1}
.cli{margin:10px 0 32px;font-size:15px;color:var(--tx2)}
.avlbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.avlbl span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.avlbl b{font-size:28px;font-weight:300;letter-spacing:-.03em}
.pbar{height:4px;background:var(--linea);border-radius:2px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--tx);border-radius:2px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.fases{margin-top:30px;border-top:1px solid var(--linea)}
.fase{display:grid;grid-template-columns:28px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linea)}
.fic{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--linea2);display:grid;place-items:center}
.f-done .fic{background:var(--ok2);border-color:var(--ok2)}
.f-done .fic::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg) translate(1px,-1px)}
.f-doing .fic{border-color:var(--rie)}
.f-doing .fic::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--rie)}
.ft{font-size:17px;font-weight:400}
.f-done .ft{color:var(--tx2)}
.f-todo .ft{color:var(--tx3)}
.fs{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--tx3);text-align:right}
.f-doing .fs{color:var(--rie)}
.msg{margin-top:28px;padding:18px 20px;border:1px solid var(--linea);border-left:2px solid var(--tx);border-radius:4px;background:rgba(255,255,255,.02)}
.msg .mt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.msg p{font-size:15.5px;line-height:1.6;color:var(--tx2)}
.datos{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.chip{padding:16px 16px 18px 0}
.chip+.chip{padding-left:16px;border-left:1px solid var(--linea)}
.chip .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.chip b{font-size:16px;font-weight:400}
.chip.ok b{color:var(--ok)}.chip.warn b{color:var(--rie)}.chip.bad b{color:var(--mal)}
.pfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:24px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.pfoot a{color:var(--tx2);text-decoration:none}.pfoot a:hover,.pfoot a:focus-visible{color:var(--tx)}


/* fondo de datos en movimiento */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 70%,rgba(0,0,0,.4) 100%);mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 70%,rgba(0,0,0,.4) 100%)}
.bar,.wrap{z-index:1}
/* inicio de sesión */
.login{width:min(460px,100%)}
.login .head{margin-bottom:26px}
.login h1{font-size:30px}
.login .cli{margin-bottom:28px}
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.campo span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.campo input{background:#08090B;border:1px solid var(--linea2);border-radius:6px;padding:13px 14px;font:400 16px var(--sans);color:var(--tx);outline:none;transition:border-color .2s}
.campo input::placeholder{color:#4A5058}
.campo input:focus{border-color:var(--tx)}
.campo input[aria-invalid="true"]{border-color:var(--mal)}
.err{min-height:20px;font-size:14px;color:var(--mal);margin:-4px 0 14px}
.entrar{width:100%;display:flex;justify-content:center;gap:10px;padding:14px;border:0;border-radius:6px;background:var(--tx);color:#08090B;font:500 15.5px var(--sans);cursor:pointer;transition:opacity .2s}
.entrar:hover{opacity:.9}.entrar:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
.ayuda{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);font-size:14px;line-height:1.55;color:var(--tx3)}
.ayuda a{color:var(--tx2)}
.salir{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--tx2);cursor:pointer}
.salir:hover,.salir:focus-visible{color:var(--tx)}
[hidden]{display:none!important}
/* entrada */
.gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s}
.gate.hide{opacity:0;pointer-events:none}
.gin{width:min(460px,88%);font-family:var(--mono)}
.gin img{height:26px;width:auto;display:block;margin-bottom:10px}
.gin .gs{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3);margin-bottom:28px}
.gin .ln{font-size:13px;min-height:22px;color:var(--tx2)}
.gin .ln .ok{color:var(--ok)}.gin .ln b{color:var(--tx);font-weight:500}
.cur::after{content:"\2588";animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cur::after{animation:none}.gate,.pbar i{transition:none}}
@media(max-width:560px){.card{padding:26px 20px}.head{flex-wrap:wrap}.folio{margin-left:0;text-align:left;width:100%}
  .fase{grid-template-columns:28px 1fr}.fs{grid-column:2;text-align:left}.datos{grid-template-columns:1fr}.chip{padding-left:0!important;border-left:0!important}.chip+.chip{border-top:1px solid var(--linea)}
  .bar span:first-child{display:none}}

/* estados que el diseño no traía: cargando, botón ocupado, fases vacías */
.carga{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5C626B}
.entrar[disabled]{opacity:.6;cursor:wait}
.fs time{font:inherit}
.msg p{white-space:pre-line}
.chip b{word-break:break-word}

/* línea de tiempo de cada fase (qué se hizo y cuándo) */
.ftl{grid-column:2/-1;margin:10px 0 2px;padding-left:16px;border-left:1px solid var(--linea2);display:grid;gap:10px}
.fh{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;position:relative}
.fh::before{content:"";position:absolute;left:-20px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--linea2)}
.f-done .fh::before{background:var(--ok2)}
.fh time{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--tx3)}
.fh p{font-size:14.5px;line-height:1.55;color:var(--tx2);white-space:pre-line}
@media(max-width:560px){.ftl{grid-column:1/-1;margin-left:10px}.fh{grid-template-columns:1fr;gap:2px}}

/* estado de cada paso (Completado, Enviado, Autorizado…) e historial de estados */
.fps{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:4px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.fps.ok{color:var(--ok);background:rgba(95,209,155,.12)}
.fps.info{color:#8FB3F5;background:rgba(143,179,245,.12)}
.fps.warn{color:var(--rie);background:rgba(230,179,90,.12)}
.fps.bad{color:var(--mal);background:rgba(240,122,122,.12)}
.fh p small{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--tx3)}
/* el punto de la línea de tiempo toma el color del estado del paso */
.fh.s-ok::before{background:var(--ok2)} .fh.s-info::before{background:#5F7CA3} .fh.s-warn::before{background:var(--rie)} .fh.s-bad::before{background:var(--mal)}
.f-doing .fh:last-child::before{box-shadow:0 0 0 3px rgba(230,179,90,.18)}