:root{
  --blur: 18px;
  --velo: 31;            /* intensidad del velo, 0–100 */
  --pw: clamp(380px, 38vw, 480px);   /* ancho del panel en escritorio */
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.4,.16,.2,1);
}

/* ---------- Tono de vidrio: OSCURO (negro translúcido, texto blanco) */
body[data-glass="oscuro"]{
  --card-bg:   linear-gradient(170deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.48) 100%);
  --card-line: rgba(255,255,255,.16);
  --ink:   rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.62);
  --faint: rgba(255,255,255,.40);
  --field-bg:    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  --field-line:  rgba(255,255,255,.22);
  --field-focus: rgba(255,255,255,.65);
  --field-ring:  rgba(255,255,255,.12);
  --btn-bg:       linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.80));
  --btn-bg-hover: linear-gradient(180deg, rgba(255,255,255,1),   rgba(255,255,255,.90));
  --btn-ink: rgba(0,0,0,.86);
}
/* ---------- Tono de vidrio: CLARO (blanco lechoso, texto negro) */
body[data-glass="claro"]{
  --card-bg:   linear-gradient(170deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.76) 100%);
  --card-line: rgba(255,255,255,.60);
  --ink:   rgba(0,0,0,.85);
  --muted: rgba(0,0,0,.55);
  --faint: rgba(0,0,0,.35);
  --field-bg:    linear-gradient(180deg, rgba(0,0,0,.045), rgba(0,0,0,.075));
  --field-line:  rgba(0,0,0,.17);
  --field-focus: rgba(0,0,0,.60);
  --field-ring:  rgba(0,0,0,.08);
  --btn-bg:       linear-gradient(180deg, rgba(0,0,0,.84), rgba(0,0,0,.68));
  --btn-bg-hover: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.78));
  --btn-ink: rgba(255,255,255,.96);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  background:#1c1c1e; /* fallback mientras carga la foto */
}

/* ---------- Capa de imagen + velo (degradés negros) ---------- */
#bg{
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:background-image .4s var(--ease);
}
/* velo: charco oscuro abajo-izquierda (donde vive la marca) + base inferior */
#scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(72% 58% at 10% 100%, rgb(0 0 0 / calc(var(--velo) * 1.6%)) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(15deg,  rgb(0 0 0 / calc(var(--velo) * 1.1%)) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(180deg, rgb(0 0 0 / calc(var(--velo) * .4%)) 0%, rgba(0,0,0,0) 30%, rgb(0 0 0 / calc(var(--velo) * .9%)) 100%);
}

/* ---------- Reparto: escaparate + panel ---------- */
#split{
  position:relative; z-index:2;
  min-height:100vh; min-height:100dvh;
  display:grid;
  grid-template-columns: 1fr var(--pw);
}

/* ---------- Escaparate (mitad de imagen) ---------- */
#show{
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:.9rem;
  padding:clamp(1.5rem, 4vw, 3.5rem);
  color:rgba(255,255,255,.94);
}
#show .tag{
  margin:0; max-width:14ch;
  font-size:clamp(2rem, 4.2vw, 3.1rem); line-height:1.06; font-weight:600; letter-spacing:-.01em;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 26px rgba(0,0,0,.55);
  text-wrap:balance;
}

/* ---------- Panel de formulario (vidrio a toda altura) ---------- */
#panel{
  display:flex; flex-direction:column;
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);
  backdrop-filter:blur(var(--blur)) saturate(1.2);
  border-left:1px solid var(--card-line);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.55);
  color:var(--ink);
  overflow-y:auto;
}
#card{
  margin:auto;                       /* centrado vertical e horizontal */
  width:min(360px, 100%);
  padding:2.5rem clamp(1.25rem, 3vw, 2rem);
  display:flex; flex-direction:column; gap:1rem;
}
/* ---------- Logotipo del panel ----------
   Va a lo ancho de los inputs y alineado a la izquierda con ellos.
   object-fit:contain + object-position:left hace que se adapte a
   cualquier formato (horizontal, cuadrado, vertical) sin recortes:
   un logo horizontal llena el ancho; uno cuadrado se topa a la izquierda. */
.logo-slot{
  width:100%;
  display:flex; align-items:center; justify-content:flex-start;
  margin-bottom:.55rem;
  border-radius:12px;
  cursor:pointer; position:relative;
  transition:opacity .18s;
}
.logo-slot:hover{ opacity:.82; }
.logo-slot.logo-over{ outline:2px dashed var(--field-line); outline-offset:6px; }
.logo-slot .logo-ph{
  font-size:1.8rem; font-weight:700; letter-spacing:.02em; color:var(--ink); line-height:1;
}
.logo-slot img{
  width:100%; height:auto; max-height:92px;
  object-fit:contain; object-position:left center; display:block;
}
.logo-slot img[hidden]{ display:none; }
#card .sub{ margin:0 0 .4rem; font-size:.875rem; color:var(--muted); }

/* campos */
.field{ display:flex; flex-direction:column; gap:.42rem; }
.field span{
  font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.fwrap{ position:relative; display:flex; }
.field input{
  width:100%; height:3rem;
  padding:0 1rem; font:inherit; font-size:.95rem;
  color:var(--ink);
  background:var(--field-bg);
  border:1px solid var(--field-line);
  border-radius:.8rem;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.field input::placeholder{ color:var(--faint); }
.field input:focus{
  border-color:var(--field-focus);
  box-shadow:0 0 0 3px var(--field-ring);
}
.fwrap input{ padding-right:3rem; }
.eye{
  position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border:0; background:transparent; border-radius:.65rem;
  color:var(--faint); font-size:.95rem; cursor:pointer;
  transition:color .18s;
}
.eye:hover{ color:var(--ink); }

/* botón */
#enter{
  margin-top:.35rem; height:3.1rem;
  border:0; border-radius:.85rem; cursor:pointer;
  font-size:.95rem; font-weight:650; letter-spacing:.02em;
  color:var(--btn-ink);
  background:var(--btn-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -14px rgba(0,0,0,.55);
  transition:background .18s, transform .12s, box-shadow .18s;
}
#enter:hover{ background:var(--btn-bg-hover); }
#enter:active{ transform:translateY(1px) scale(.99); }

/* pie dentro del panel */
#foot{
  padding:1rem 1.5rem 1.2rem;
  text-align:center; font-size:.72rem;
  color:var(--faint);
}

/* feedback al soltar imagen */
body.dropping #panel{ outline:2px dashed var(--card-line); outline-offset:-8px; }

/* ---------- Responsive: el panel toma todo el ancho ---------- */
@media (max-width:860px){
  #split{ grid-template-columns: 1fr; }
  #show{ display:none; }
  #panel{
    border-left:0;
    box-shadow:none;
  }
}

@media (prefers-reduced-motion: no-preference){
  #panel{ animation:slideIn .6s var(--ease) both; }
  @keyframes slideIn{ from{ opacity:0; transform:translateX(28px); } }
  @media (max-width:860px){
    #panel{ animation:fadeUp .55s var(--ease) both; }
  }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } }
}