/* GRUPO WAREHOUSE ARGENTINA — /apps/ — misma paleta que el sitio público */
:root{
  --hormigon:#E4E2DD;
  --plancha:#F4F2EE;
  --acero:#14181D;
  --acero-2:#4A525C;
  --alta-vis:#F2A007;
  --senal:#1F6F5C;
  --rojo:#B23A2E;
  --linea:rgba(20,24,29,.14);
  --display:"Big Shoulders Display","Big Shoulders","Archivo Black",Impact,sans-serif;
  --texto:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--hormigon);color:var(--acero);
  font-family:var(--texto);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--alta-vis);color:var(--acero)}
:focus-visible{outline:3px solid var(--alta-vis);outline-offset:3px}

.contenedor{width:100%;max-width:1100px;margin:0 auto;padding:0 24px}

.cinta{height:10px;background:repeating-linear-gradient(45deg,
  var(--alta-vis) 0 14px, var(--acero) 14px 28px)}

.rotulo{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acero-2);margin:0 0 14px}

h1{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:-.005em;font-size:clamp(38px,6.5vw,64px)}

.placa-logo{display:inline-block;margin-bottom:30px}
.placa-logo img{height:auto;width:auto;max-height:64px;max-width:min(70vw,300px)
  /* ;mix-blend-mode:multiply */ }

/* ── Pantalla de acceso ────────────────────────────────────── */
.pantalla-acceso{display:flex;flex-direction:column;min-height:100vh}
.acceso-caja{width:100%;max-width:440px;margin:auto;padding:48px 24px}

.formulario{margin-top:32px}
.formulario label{display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acero-2);margin-bottom:8px}
.formulario input[type=password]{
  width:100%;padding:15px 16px;font-family:var(--mono);font-size:16px;
  background:var(--plancha);color:var(--acero);
  border:2px solid var(--acero);border-radius:0;
}
.formulario input[type=password]:disabled{opacity:.5}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:20px;padding:15px 26px;width:100%;
  font-family:var(--mono);font-size:13.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--acero);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn--vis{background:var(--alta-vis);color:var(--acero);box-shadow:5px 5px 0 var(--acero)}
.btn--vis:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--acero)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.error{
  margin:16px 0 0;padding:12px 14px;
  background:rgba(178,58,46,.10);border-left:4px solid var(--rojo);
  font-family:var(--mono);font-size:13px;color:var(--rojo);
}

.pie-acceso{margin-top:36px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;color:var(--acero-2);line-height:2}
.pie-acceso a{text-decoration:none;border-bottom:1px solid var(--linea)}
.pie-acceso a:hover{border-bottom-color:var(--alta-vis)}

/* ── Panel ─────────────────────────────────────────────────── */
.barra{background:var(--acero);color:var(--hormigon)}
.barra-int{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:16px;padding-bottom:16px}
.barra-logo{height:auto;width:auto;max-height:34px;max-width:min(50vw,190px)}
.salir{margin:0}
.salir button{
  background:transparent;color:var(--hormigon);border:1px solid rgba(228,226,221,.35);
  padding:9px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease;
}
.salir button:hover{background:var(--alta-vis);color:var(--acero);border-color:var(--alta-vis)}

.panel{padding:56px 24px 80px}
.panel h1{margin-bottom:36px}

.grilla-apps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.herramienta{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--plancha);border:1px solid var(--linea);border-left:5px solid var(--acero);
  padding:24px;transition:transform .18s ease,border-left-color .18s ease;
}
.herramienta:hover{transform:translateY(-3px);border-left-color:var(--alta-vis)}
.herramienta .etiqueta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acero-2)}
.herramienta h2{margin:14px 0 8px;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:28px;line-height:.95}
.herramienta p{margin:0;font-size:15px;color:var(--acero-2)}
.herramienta .ir{margin-top:16px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase}
.herramienta:hover .ir{color:var(--senal)}

.vacio{
  border:2px dashed var(--linea);padding:48px 28px;text-align:center;color:var(--acero-2);
}
.vacio p{margin:0}
.vacio .chico{margin-top:10px;font-family:var(--mono);font-size:12.5px}
.vacio code{background:var(--plancha);padding:2px 6px;border:1px solid var(--linea)}

.pie-panel{border-top:1px solid var(--linea);padding:22px 0;
  font-family:var(--mono);font-size:12px;color:var(--acero-2)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}