/* Zervio5 Deploy — hoja de despliegue.
   Papel frio + tinta, azul senal para acciones, mono para todo lo tecnico.
   El elemento firma es el carril de pasos (.carril). */
:root{
  --papel:#E7EBF0; --panel:#FFFFFF; --tinta:#101720; --tinta-2:#5C6875;
  --linea:#D2D9E1; --azul:#143C8C; --azul-claro:#E8EDF9;
  --ambar:#B8720F; --teal:#0E7566; --coral:#AF3A2B;
  --r:10px; --sombra:0 1px 2px rgba(16,23,32,.06), 0 8px 24px -16px rgba(16,23,32,.35);
  --display:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--papel);color:var(--tinta);font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em;margin:0}
h1{font-size:26px;font-weight:700}
h2{font-size:17px;font-weight:600}
h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-2)}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* --------------------------------------------------------------- estructura */
.barra{display:flex;align-items:center;gap:24px;padding:0 20px;height:56px;background:var(--panel);
  border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.marca{font-family:var(--display);font-weight:700;color:var(--tinta);display:flex;align-items:center;gap:8px}
.marca:hover{text-decoration:none}
.marca-z{background:var(--azul);color:#fff;font-size:12px;padding:3px 6px;border-radius:5px;letter-spacing:.04em}
.barra nav{display:flex;gap:18px;font-size:14px}
.barra nav a{color:var(--tinta-2)}
.barra nav a.activo{color:var(--tinta);font-weight:600}
.barra-fin{margin-left:auto;display:flex;align-items:center;gap:10px}
.en-linea{display:inline}
.lienzo{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.pie{text-align:center;color:var(--tinta-2);font-size:12px;font-family:var(--mono);padding:0 0 30px}

/* ------------------------------------------------------------------ piezas */
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:20px;box-shadow:var(--sombra)}
.tarjeta + .tarjeta{margin-top:16px}
.cabecera{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cabecera .crece{flex:1;min-width:220px}
.mono{font-family:var(--mono);font-size:13px}
.apagado{color:var(--tinta-2)}
.rejilla{display:grid;gap:16px}
@media(min-width:760px){.rejilla-2{grid-template-columns:1fr 1fr}}

.btn{font:600 14px/1 var(--body);padding:9px 14px;border-radius:8px;border:1px solid var(--linea);
  background:var(--panel);color:var(--tinta);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:#b9c3cf;text-decoration:none}
.btn-primario{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-primario:hover{background:#0f327a;color:#fff}
.btn-plano{border-color:transparent;background:transparent;color:var(--tinta-2)}
.btn-peligro{color:var(--coral);border-color:#e6c5bf}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-fila{display:flex;gap:8px;flex-wrap:wrap}

label{display:block;font-size:13px;font-weight:600;margin:0 0 5px}
.campo{margin-bottom:16px}
.campo .pista{font-size:12px;color:var(--tinta-2);font-weight:400;margin-top:5px}
input[type=text],input[type=password],input[type=tel],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:8px;background:#fff;
  font:400 14px/1.4 var(--body);color:var(--tinta)}
input[name=subdominio]{font-family:var(--mono)}
input[type=color]{width:46px;height:38px;padding:2px;border:1px solid var(--linea);border-radius:8px;background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px var(--azul-claro)}

.aviso{padding:11px 14px;border-radius:8px;margin-bottom:18px;font-size:14px;border:1px solid}
.aviso-ok{background:#E6F4F1;border-color:#B7DED6;color:#0B5A4E}
.aviso-error{background:#FBEBE8;border-color:#EFC7BF;color:#8E2C20}

.etiqueta{font:500 11px/1 var(--mono);padding:4px 7px;border-radius:5px;border:1px solid var(--linea);
  color:var(--tinta-2);background:#F4F6F9;letter-spacing:.02em;white-space:nowrap}
.punto{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.e-activo .punto{background:var(--teal)} .e-activo{color:var(--teal)}
.e-error .punto{background:var(--coral)} .e-error{color:var(--coral)}
.e-desplegando .punto{background:var(--ambar);animation:latido 1s infinite} .e-desplegando{color:var(--ambar)}
.e-pendiente .punto{background:#A9B3BF} .e-pendiente{color:var(--tinta-2)}
.e-archivado .punto{background:#A9B3BF} .e-archivado{color:var(--tinta-2)}
@keyframes latido{50%{opacity:.25}}

/* ------------------------------------------------------------ lista clientes */
.lista{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.fila{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--linea)}
.fila:last-child{border-bottom:0}
.fila:hover{background:#F7F9FC}
.fila .nom{font-weight:600}
.fila .sub{font-family:var(--mono);font-size:12.5px;color:var(--tinta-2)}
.fila .crece{flex:1;min-width:0}
.fila .metas{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vacio{padding:48px 20px;text-align:center}
.vacio h2{margin-bottom:6px}

/* ------------------------------------------- FIRMA: el carril de despliegue */
.carril{list-style:none;margin:0;padding:0;position:relative}
.carril::before{content:'';position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--linea)}
.carril .conducto{position:absolute;left:15px;top:14px;width:2px;background:var(--azul);
  transition:height .45s cubic-bezier(.4,0,.2,1);height:0}
.paso{position:relative;padding:10px 0 10px 46px;min-height:44px}
.paso .nodo{position:absolute;left:8px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--papel);
  border:2px solid var(--linea);font:500 9px/12px var(--mono);color:var(--tinta-2);text-align:center;z-index:1}
.paso .titulo{font-size:14px;font-weight:600}
.paso .detalle{font-family:var(--mono);font-size:12px;color:var(--tinta-2);margin-top:3px;word-break:break-word}
.paso .ms{float:right;font-family:var(--mono);font-size:11px;color:var(--tinta-2)}
.paso.ok .nodo{background:var(--teal);border-color:var(--teal);color:#fff}
.paso.ok .nodo::after{content:'✓'}
.paso.ok .nodo span{display:none}
.paso.omitido .nodo{border-color:#C3CBD5;background:#fff}
.paso.omitido .titulo{color:var(--tinta-2)}
.paso.error .nodo{background:var(--coral);border-color:var(--coral);color:#fff}
.paso.error .detalle{color:var(--coral)}
.paso.corriendo .nodo{border-color:var(--ambar);background:#fff;animation:latido 1s infinite}
.paso.corriendo .titulo{color:var(--ambar)}

/* --------------------------------------------------------------------- log */
.consola{background:#0E141C;color:#C6D2E0;border-radius:var(--r);padding:14px 16px;font-family:var(--mono);
  font-size:12.5px;line-height:1.65;max-height:340px;overflow:auto}
.consola .l-ok{color:#5BC8AE} .consola .l-error{color:#F08A78}
.consola .l-aviso{color:#E9B45E} .consola .l-info{color:#8C9AAB}
.consola time{color:#5A6674;margin-right:8px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-2);
  padding:8px 10px;border-bottom:1px solid var(--linea)}
td{padding:9px 10px;border-bottom:1px solid #EDF1F5;vertical-align:top}
tr:last-child td{border-bottom:0}

.panel-acceso{max-width:400px;margin:9vh auto}
.panel-acceso .tarjeta{padding:28px}
.panel-acceso .marca{justify-content:center;margin-bottom:22px;font-size:20px}
details.zona-peligro{margin-top:14px;border:1px solid #E6C5BF;border-radius:8px;padding:12px 14px;background:#FDF6F5}
details.zona-peligro summary{cursor:pointer;font-weight:600;color:var(--coral)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:620px){
  .barra{gap:12px;padding:0 12px}.barra nav{display:none}
  .lienzo{padding:18px 12px 50px}.fila{flex-wrap:wrap}
}