/* Pantallas de ingreso y de cambio de contraseña (visibles sin sesión: viven en /publico/).
   Panel negro con el logo y la trama de líneas finas del manual de marca; formulario sobre blanco. */
:root {
  --tinta: #231f20;
  --gris: #6d6869;
  --linea: #d8d5d3;
  --violeta: #be08ef;
  --degrade: linear-gradient(180deg, #be08ef 0%, #ff6633 70%, #ff6633 100%);
  --titulos: "Raleway", "Golos Text", system-ui, sans-serif;
  --texto: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { font-variant-numeric: lining-nums; font-family: var(--texto); color: var(--tinta); background: #fff; display: grid; grid-template-columns: minmax(300px, 42%) 1fr; min-height: 100vh; }

.panel {
  background-color: var(--tinta); border-right: 3px solid; border-image: var(--degrade) 1;
  display: grid; place-items: center; padding: 40px;
  /* trama: cuatro líneas finas que se cruzan, como en las piezas del manual */
  --hilo: rgba(190, 8, 239, .38);
  background-image:
    linear-gradient(var(--hilo), var(--hilo)), linear-gradient(var(--hilo), var(--hilo)),
    linear-gradient(var(--hilo), var(--hilo)), linear-gradient(var(--hilo), var(--hilo));
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 18% 0, 82% 0, 0 30%, 0 72%;
  background-repeat: no-repeat;
}
.panel img { width: min(250px, 70%); height: auto; }

main { display: grid; place-items: center; padding: 40px 20px; }
.caja { width: 100%; max-width: 350px; }
h1 { font-family: var(--titulos); font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 8px; }
.bajada { color: var(--gris); margin: 0 0 30px; font-size: 16px; line-height: 1.45; }
label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.ayuda { display: block; font-size: 13px; font-weight: 400; color: var(--gris); margin-top: 2px; }
input {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; margin: 0 0 18px;
  border: 1px solid var(--linea); border-radius: 6px; background: #fff; color: var(--tinta);
}
input:focus { outline: 2px solid var(--violeta); outline-offset: 1px; border-color: transparent; }
button {
  font: inherit; font-weight: 600; font-size: 16px; color: #fff; background: var(--tinta);
  border: 0; border-radius: 999px; padding: 10px 28px; cursor: pointer; margin-top: 6px;
}
button:hover { background: #000; }
.mensaje { border-left: 3px solid var(--violeta); padding: 4px 0 4px 10px; margin: 0 0 22px; font-size: 15px; }
.mensaje[hidden], .volver[hidden] { display: none; }
.volver { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--gris); }

@media (max-width: 760px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panel { border-right: 0; border-bottom: 3px solid; border-image: linear-gradient(90deg, #ff6633 30%, #be08ef) 1; padding: 26px 20px; place-items: center start; background-image: none; }
  .panel img { width: 170px; }
  main { place-items: start center; padding-top: 34px; }
}