/* Acceso del equipo de MS Studio · estilo Hielo (blanco azulado con vidrio) */
:root {
  --tinta: #0b1a20;
  --muted: rgb(11 26 32 / 66%);
  --faint: rgb(11 26 32 / 42%);
  --cian: #8af4ff;
  --cian-fuerte: #0aa8bc;
  --cian-texto: #00707f;
  --radio: 12px;
  --fuente: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: #b8d0db; color: var(--tinta); font-family: var(--fuente); min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--cian-texto); outline-offset: 2px; }

.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg svg { width: 100%; height: 100%; display: block; transform: scale(1.06) translate(var(--px, 0px), var(--py, 0px)); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgb(11 26 32 / 14%) 100%); }
.mv, .flujo { transform-box: fill-box; }

.auth { --c: 72px; position: relative; z-index: 1; width: min(460px, 100%); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.auth__glass { position: absolute; inset: 0; background: linear-gradient(145deg, rgb(255 255 255 / 72%), rgb(255 255 255 / 40%)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.auth__borde { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.auth__cuerpo { position: relative; display: grid; padding: 40px 30px calc(var(--c) * 0.75); }

.chip { position: absolute; width: var(--t); height: var(--t); pointer-events: none; z-index: 2; will-change: transform; }
.chip svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chip--tl { left: 0; top: 0; }
.chip--br { right: 0; bottom: 0; }
.orbe { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #8af4ff 40%, rgb(138 244 255 / 0%) 72%); box-shadow: 0 0 40px 12px rgb(138 244 255 / 70%); opacity: 0; pointer-events: none; z-index: 3; }
.anillo { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid rgb(10 168 188 / 60%); opacity: 0; pointer-events: none; z-index: 3; }
.luz { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff 0, #8af4ff 24%, #a3c0cf 62%, #cfe1e8 100%); }

.conmutador { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 22px; border-radius: 999px; background: rgb(255 255 255 / 62%); border: 1px solid rgb(11 26 32 / 12%); }
.conmutador button { position: relative; z-index: 1; height: 34px; border: 0; background: none; color: var(--muted); font: 500 12.5px/1 var(--fuente); cursor: pointer; border-radius: 999px; transition: color 0.3s; }
.conmutador button[aria-selected="true"] { color: #fff; }
.conmutador__pastilla { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--tinta); box-shadow: 0 8px 16px -8px rgb(11 26 32 / 30%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.25, 1); }
.conmutador.control .conmutador__pastilla { transform: translateX(100%); }

.cab { padding-left: calc(var(--c) - 18px); margin-bottom: 22px; }
.cab { padding-left: 0; text-align: center; }
.cab h1 { font-size: 0; line-height: 0; }
.cab__logo { display: block; width: 170px; height: auto; margin: 0 auto; }
.cab p { margin-top: 12px; font-size: 13px; color: var(--muted); }
.cab p:empty { display: none; }

.form { display: grid; gap: 14px; }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo label { font-size: 13px; font-weight: 600; }
.entrada { display: flex; align-items: center; height: 46px; border-radius: var(--radio); background: rgb(255 255 255 / 62%); border: 1px solid rgb(11 26 32 / 12%); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.entrada:focus-within { border-color: var(--cian-fuerte); box-shadow: 0 0 0 3px rgb(10 168 188 / 18%); background: rgb(255 255 255 / 85%); }
.entrada > svg { flex: none; width: 16px; height: 16px; margin: 0 10px 0 14px; stroke: var(--muted); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.entrada input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--tinta); font: inherit; font-size: 14px; padding-right: 14px; }
.entrada input::placeholder { color: var(--faint); }
.ojo { flex: none; background: none; border: 0; padding: 0 14px 0 6px; height: 100%; cursor: pointer; display: grid; place-items: center; }
.ojo svg { margin: 0; }
.ojo:hover svg { stroke: var(--tinta); }
.error { min-height: 1.2em; font-size: 13px; color: #b3261e; }
.boton { height: 48px; border: 0; border-radius: var(--radio); background: var(--tinta); color: #fff; font: 600 15px/1 var(--fuente); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 12px 26px -10px rgb(11 26 32 / 30%), inset 0 1px 0 rgb(255 255 255 / 18%); transition: transform 0.15s, box-shadow 0.2s, filter 0.2s; }
.boton:hover { transform: translateY(-1px); filter: brightness(1.25); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: 0.7; pointer-events: none; }
.boton svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.boton:hover svg { transform: translateX(3px); }
.pie { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }
.pie a { color: var(--cian-texto); font-weight: 600; text-decoration: none; }
.pie a:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .auth__cuerpo { padding: 34px 20px calc(var(--c) * 0.7); }
  .conmutador { margin-left: 0; }
}