/* STAFF build 2026.08.10-a
   ---------------------------------------------------------------------------
   Zona de acceso del personal de pd4.dev. Solo se carga en /staff/.

   POR QUÉ ESTO ES UNA HOJA Y EL RESTO DEL SITIO NO.
   `index.php` lleva los estilos en el atributo `style` de cada elemento, con
   un bloque `[data-s="N"]` al final para hover y focus. Ahí funciona: es una
   sola página. Aquí son cuatro pantallas que repiten barra, pie y formulario,
   y numerar `data-s` a mano en cuatro archivos se rompe al primer cambio.
   Si prefieres seguir el patrón de la portada, dilo y se pasa a inline.

   Todos los valores están tomados de `index.php`, no inventados: la barra,
   la píldora de acceso, el botón carmín y el pie son los mismos.
   Si tocas esta hoja, sube el sello de arriba.
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --tinta:#14161a;
  --papel:#f4f1ea;
  --papel-hover:#fffcf6;
  --carmin:#a81d14;
  --texto:#332f29;
  --gris:#6e6a61;
  --gris-mono:#5f5b53;
  --gris-tenue:#8a857a;
  --linea:#00000014;
  --linea-media:#00000021;
  --linea-fuerte:#00000026;
  --sans:'Poppins',sans-serif;
  --mono:'Space Mono',monospace;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:14px; font-weight:300;
}

a{ color:var(--tinta); text-decoration:none; }
a:hover{ color:var(--carmin); }
button{ font-family:inherit; }
::selection{ background:var(--carmin); color:#fff; }

/* La portada oculta el cursor del sistema y pinta un anillo de trazos con
   site.js. Aquí NO se carga site.js: arrastra el cargador y las dos escenas
   de three.js, y un login no debe esperar a un bundle 3D. Por eso el cursor
   es el normal en estas pantallas. */

/* ─── Barra ──────────────────────────────────────────────────────
   Copia de la de index.php: mismas medidas, mismo logotipo, misma
   píldora. Si cambias una, cambia la otra. */

.st-nav{
  display:flex; align-items:center; gap:22px;
  padding:22px 40px;
  flex-shrink:0;
}
.st-brand{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.st-brand svg{ width:30px; height:30px; flex-shrink:0; }
.st-wordmark{ display:flex; align-items:baseline; gap:9px; }
.st-name{
  font-size:14px; font-weight:500; letter-spacing:-.2px; line-height:1;
  white-space:nowrap;
}
/* "Deviances" va en 200. El nombre no es de un solo peso. */
.st-name em{ font-style:normal; font-weight:200; }
/* Lo único teñido del logotipo. */
.st-plus{ font-size:8px; font-weight:400; vertical-align:super; color:var(--carmin); }
.st-tag{
  font-family:var(--mono); font-size:8.5px; letter-spacing:2.4px;
  color:var(--gris); line-height:1; white-space:nowrap;
}

.st-links{
  margin-left:auto;
  display:flex; align-items:center; gap:26px;
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
}
.st-links a{ color:var(--gris); transition:color .2s ease; white-space:nowrap; }
.st-links a:hover{ color:var(--carmin); }

.st-pill{
  display:inline-flex; align-items:center; gap:9px;
  margin-left:44px; padding:10px 18px;
  border:1px solid var(--linea-fuerte); border-radius:999px;
  color:var(--tinta);
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  white-space:nowrap;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.st-pill:hover{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.st-pill svg{ width:12px; height:12px; flex-shrink:0; }
.st-pill--static{ pointer-events:none; }

.st-avatar{
  margin-left:auto;
  display:flex; align-items:center; gap:14px;
}
.st-avatar-name{
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  color:var(--gris); white-space:nowrap;
}
/* El símbolo como avatar: papel sobre carmín, aro macizo a la izquierda. */
.st-avatar-mark{
  width:36px; height:36px; border-radius:12px; background:var(--carmin);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.st-avatar-mark svg{ width:70%; height:70%; }

/* ─── Cuerpo ─────────────────────────────────────────────────────
   Sin min-height:0 y con margin:auto en vez de align-items:center.
   Los dos por lo mismo: si el bloque puede encoger por debajo de su
   contenido, la columna se sale del hueco, se pinta sobre la barra o
   sobre el pie, y no aparece scroll —el recorte de un contenedor flex
   no lo genera—. Así empuja el pie y el documento se desplaza. */

.st-main{
  flex:1;
  display:flex; justify-content:center;
  padding:0 40px 70px;
}
.st-col{ width:380px; margin:auto; display:flex; flex-direction:column; gap:26px; }
.st-col--wide{ width:780px; gap:30px; }

.st-head{ display:flex; flex-direction:column; gap:14px; }

.st-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:2.6px;
  color:var(--gris-mono);
}
/* El filete de cuatro trazos que abre cada sección de la portada. */
.st-eyebrow svg{ width:18px; height:12px; flex-shrink:0; }

/* Titulares como los del sitio: ligeros, con tracking negativo, en
   minúsculas, y una sola palabra en 500. No los capitalices ni los
   subas de peso. */
.st-title{
  margin:0;
  font-size:clamp(30px,3.2vw,44px); line-height:1.06;
  font-weight:200; letter-spacing:-1.6px;
}
.st-title b{ font-weight:500; }
.st-title--sm{ font-size:clamp(26px,2.6vw,34px); letter-spacing:-1.2px; line-height:1.12; }

.st-lede{
  margin:0; display:flex; gap:10px;
  font-size:13.5px; font-weight:300; line-height:1.8;
  color:var(--texto); text-wrap:pretty;
}
.st-ast{
  color:var(--carmin); font-family:var(--mono); font-size:12px; line-height:1.9;
  flex-shrink:0;
}

/* ─── Campos ─────────────────────────────────────────────────────
   Radio 14 y padding 19/22 como el formulario de contacto; fondo blanco
   y aro carmín al enfocar como manda la ficha de marca para el acceso. */

.st-fields{ display:flex; flex-direction:column; gap:16px; }
.st-field{ display:flex; flex-direction:column; gap:9px; }

/* La etiqueta mono sobre cada campo es la firma del sistema. La portada
   usa placeholders porque es un formulario de contacto; aquí no: son
   credenciales y el campo tiene que estar rotulado. */
.st-label{
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  color:var(--gris-tenue); text-transform:uppercase;
}

.st-input{
  width:100%;
  background:#fff; color:var(--tinta);
  border:1px solid var(--linea-media); border-radius:14px;
  padding:19px 22px;
  font-family:var(--sans); font-size:14px; font-weight:300;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.st-input::placeholder{ color:#8d877d; opacity:1; }
.st-input:focus{
  border-color:var(--carmin);
  background:var(--papel-hover);
  box-shadow:0 0 0 3px rgba(168,29,20,.18);
}
.st-input--pass{ font-family:var(--mono); font-size:14px; letter-spacing:.18em; }

.st-inputwrap{ position:relative; }
.st-eye{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; padding:0; border:0; background:none;
  color:var(--gris-tenue); cursor:pointer; line-height:0;
  transition:color .2s ease;
}
.st-eye:hover{ color:var(--carmin); }
.st-eye svg{ width:100%; height:100%; }

.st-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.st-check{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.st-check input{ position:absolute; opacity:0; pointer-events:none; }
.st-box{
  width:17px; height:17px; border-radius:5px;
  border:1px solid var(--linea-fuerte); background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .2s ease, border-color .2s ease;
}
.st-box svg{ width:11px; height:11px; opacity:0; transition:opacity .15s ease; }
.st-check input:checked + .st-box{ background:var(--tinta); border-color:var(--tinta); }
.st-check input:checked + .st-box svg{ opacity:1; }
.st-check span{ font-size:12.5px; font-weight:300; color:var(--gris); }

.st-minor{
  margin-left:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:1.6px;
  color:var(--gris-mono);
  border-bottom:1px solid var(--linea-fuerte); padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.st-minor:hover{ color:var(--carmin); border-color:var(--carmin); }

/* ─── Botones ────────────────────────────────────────────────────
   Píldora, nunca rectángulo. Medidas de la portada. */

.st-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:17px 28px; border-radius:999px;
  border:1px solid var(--carmin); background:var(--carmin); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:2px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.st-btn:hover{
  background:var(--papel-hover); color:var(--tinta); border-color:var(--linea);
}
.st-btn .st-arrow{ font-size:14px; line-height:1; }

/* Contorno. Para lo secundario: el acento no se reparte por la pantalla. */
.st-btn--ghost{
  background:transparent; color:var(--tinta); border-color:var(--linea-fuerte);
}
.st-btn--ghost:hover{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }

.st-btn:disabled{
  background:transparent; color:var(--gris-tenue);
  border-color:var(--linea-fuerte); cursor:default;
}
.st-btn:disabled:hover{ background:transparent; color:var(--gris-tenue); }

.st-back{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:1.6px;
  color:var(--gris-mono); width:max-content;
  transition:color .2s ease;
}
.st-back:hover{ color:var(--carmin); }

/* ─── Avisos ─────────────────────────────────────────────────────
   Lo crítico va en tinte, nunca en masa. Sin bloques rojos rellenos.
   El asterisco carmín es el marcador que ya usa la sección de contacto. */

.st-alert{
  display:flex; gap:12px;
  padding:15px 18px; border-radius:14px;
  background:#00000008; border:1px solid rgba(168,29,20,.28);
}
.st-alert .st-ast{ font-size:13px; line-height:1.5; }
.st-alert-txt{ display:flex; flex-direction:column; gap:4px; }
.st-alert-txt strong{ font-size:13px; font-weight:400; color:var(--carmin); line-height:1.5; }
.st-alert-txt small{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px;
  color:var(--gris-mono);
}

.st-note{
  display:flex; gap:10px;
  font-size:12px; font-weight:300; line-height:1.75;
  color:var(--gris-mono); text-wrap:pretty;
}

.st-fine{
  padding-top:18px; border-top:1px solid var(--linea);
  font-family:var(--mono); font-size:9px; letter-spacing:2px;
  color:var(--gris-tenue); line-height:1.8;
}

.st-chip{
  display:flex; align-items:center; gap:12px;
  padding:17px 20px; border-radius:14px;
  background:#ffffff59; border:1px solid var(--linea-media);
  font-family:var(--mono); font-size:12px; letter-spacing:.5px;
}

/* ─── Lanzador ───────────────────────────────────────────────────
   Tarjetas blancas, radio 18, sombra baja. */

.st-who{ display:flex; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.st-meta{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.st-meta-item{ display:flex; flex-direction:column; gap:5px; }
.st-meta-item span{
  font-family:var(--mono); font-size:9px; letter-spacing:2px;
  color:var(--gris-tenue);
}
.st-meta-item strong{
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:1.4px;
}
.st-meta-item strong.is-soft{ font-weight:400; color:var(--gris); }
.st-rule{ width:1px; height:28px; background:var(--linea); }

.st-sect{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:2.6px;
  color:var(--gris-mono);
}
.st-sect svg{ width:18px; height:12px; flex-shrink:0; }
.st-sect::after{ content:''; flex:1; height:1px; background:var(--linea); }

.st-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }

.st-tool{
  display:flex; flex-direction:column; gap:38px;
  padding:24px 22px; border-radius:18px;
  background:#fff; box-shadow:0 2px 8px rgba(30,30,25,.06);
  color:var(--tinta);
  transition:box-shadow .25s ease, transform .25s ease;
}
.st-tool:hover{ box-shadow:0 8px 22px rgba(30,30,25,.11); transform:translateY(-2px); color:var(--tinta); }
.st-tool-top{ display:flex; align-items:flex-start; }
.st-tool-mark{
  width:44px; height:44px; border-radius:50%;
  background:var(--tinta);
  display:flex; align-items:center; justify-content:center;
}
.st-tool-mark svg{ width:62%; height:62%; }
.st-tool-top .st-arrow{ margin-left:auto; font-size:15px; line-height:1; color:var(--gris-tenue); }
.st-tool-txt{ display:flex; flex-direction:column; gap:8px; }
.st-tool-txt b{ font-size:14px; font-weight:400; letter-spacing:-.2px; }
/* El rol EN esa herramienta y su alcance, no el rol global. */
.st-tool-txt small{
  font-family:var(--mono); font-size:9px; letter-spacing:1.6px;
  color:var(--gris-tenue); line-height:1.7;
}

/* Hueco de lo que vendrá. Las herramientas que existen pero no te tocan
   NO se pintan apagadas: no se pintan. */
.st-tool--ghost{
  background:transparent; box-shadow:none;
  border:1px dashed var(--linea-fuerte);
}
.st-tool--ghost:hover{ transform:none; box-shadow:none; }
.st-ghost-mark{
  width:44px; height:44px; border-radius:50%;
  border:1px dashed var(--linea-fuerte);
  display:flex; align-items:center; justify-content:center;
  color:var(--carmin); font-family:var(--mono); font-size:15px; line-height:1;
}
.st-tool--ghost b{ color:var(--gris-tenue); }

.st-aside{
  display:flex; flex-direction:column; justify-content:flex-end; gap:16px;
  padding:0 4px 4px;
}
.st-aside p{
  margin:0; font-size:12.5px; font-weight:300; line-height:1.75;
  color:var(--gris); text-wrap:pretty;
}

/* ─── Pie ────────────────────────────────────────────────────────── */

.st-foot{
  display:flex; align-items:center; gap:20px;
  padding:0 40px 26px; flex-shrink:0;
  font-family:var(--mono); font-size:9px; letter-spacing:2.2px;
  color:var(--gris-tenue);
}
.st-foot span:last-child{ margin-left:auto; }

/* ─── Pantallas estrechas ────────────────────────────────────────
   El menú se retira antes de que la barra se parta: entre 901 y 1180 px
   —iPad apaisado, portátil a media pantalla— el logotipo y el menú se
   pisaban. Al ocultarlo se va con él el único margin-left:auto de la
   barra, así que pasa a la píldora. */

@media (max-width:1180px){
  .st-links{ display:none; }
  .st-pill{ margin-left:auto; }
}

@media (max-width:900px){
  .st-nav{ padding:20px 24px; gap:16px; }
  .st-main{ padding:40px 24px 60px; }
  .st-col, .st-col--wide{ width:100%; max-width:420px; margin:0 auto; }
  .st-grid{ grid-template-columns:1fr; }
  .st-who{ gap:20px; }
  .st-meta{ margin-left:0; flex-wrap:wrap; gap:20px; }
  .st-foot{ padding:0 24px 24px; }
}