/* Pantallas de acceso del portal (diseño «Estudio», el mismo del portal y del sitio). */
:root {
  --fondo: #f6f6f3; --tarjeta: #fff; --linea: #e6e5df; --tinta: #13162b; --texto: #13162b; --texto-2: #5f606c;
  --verde: #07b257; --lila: #6d5dfc; --rojo: #c8283c;
  --degradado: linear-gradient(120deg, #07b257 0%, #19c9a0 45%, #6d5dfc 100%);
  --f-titulo: "Barlow Condensed", system-ui, sans-serif; --f-texto: "Inter", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; font: 400 1rem/1.55 var(--f-texto); color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: #4b3bd6; }
:focus-visible { outline: 3px solid var(--lila); outline-offset: 3px; border-radius: 6px; }
.acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.acceso__arte { background: var(--tinta); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  background-image: radial-gradient(700px 420px at 100% 0, rgba(109, 93, 252, .35), transparent 60%), radial-gradient(600px 420px at 0 100%, rgba(7, 178, 87, .3), transparent 60%); }
.acceso__logo { width: 220px; height: auto; }
.acceso__lema { font: 800 clamp(2.6rem, 5vw, 4.4rem)/1 var(--f-titulo); text-transform: uppercase; margin: 0; max-width: 12ch; }
.acceso__lema em { font-style: normal; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acceso__conteo { display: flex; gap: 14px; font: 800 1.6rem var(--f-titulo); opacity: .55; }
.acceso__conteo span:last-child { color: #19c9a0; opacity: 1; }
.acceso__form { display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; }
.caja { width: min(420px, 100%); margin: 0 auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 24px; padding: 32px 28px;
  box-shadow: 0 22px 60px rgba(20, 20, 45, .09); position: relative; }
.caja h1 { font: 800 2.2rem/1 var(--f-titulo); text-transform: uppercase; margin: 0 0 8px; }
.idioma { position: absolute; top: 18px; right: 18px; font: 700 .8rem var(--f-texto); text-decoration: none; color: var(--texto-2); border: 1px solid var(--linea); border-radius: 99px; padding: 4px 10px; }
.tenue { color: var(--texto-2); } .chico { font-size: .86rem; }
.formulario { display: grid; gap: 14px; margin: 18px 0; }
.campo { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.campo input { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.campo input:focus { border-color: var(--lila); outline: none; box-shadow: 0 0 0 3px rgba(109, 93, 252, .2); }
.codigo { font: 700 1.6rem var(--f-titulo) !important; letter-spacing: .3em; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.check input { margin-top: 3px; width: 18px; height: 18px; }
.btn { display: inline-flex; justify-content: center; align-items: center; padding: .85em 1.3em; border-radius: 99px; border: 0; font: 700 1rem var(--f-texto); cursor: pointer; text-decoration: none; }
.btn--primario { background: var(--degradado); color: #fff; box-shadow: 0 10px 26px rgba(7, 178, 87, .28); }
.btn-texto { background: none; border: 0; color: #4b3bd6; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.aviso { background: #fff6d6; border-radius: 12px; padding: 10px 14px; font-size: .9rem; }
.aviso--error { background: #fde8eb; color: var(--rojo); }
.qr { width: 200px; margin: 8px auto; } .qr svg { width: 100%; height: auto; }
.clave-app { font: 700 1.05rem ui-monospace, monospace; letter-spacing: .06em; word-break: break-all; background: #f1f1ec; padding: 10px; border-radius: 10px; }
.pie { width: min(420px, 100%); margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--texto-2); }
@media (max-width: 820px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__arte { padding: 22px 20px; gap: 14px; }
  .acceso__lema { font-size: 2.2rem; } .acceso__conteo { display: none; } .acceso__logo { width: 160px; }
  .acceso__form { padding: 22px 16px 32px; justify-content: flex-start; }
  .caja { padding: 26px 20px; }
}
.aviso--ok { background: #e3f7ec; color: #067a3c; font-weight: 600; }
.ficha-vf { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0; }
.ficha-vf dt { color: var(--texto-2); font-size: .86rem; } .ficha-vf dd { margin: 0; font-weight: 600; }
.aviso--alerta { background: #fff4d6; color: #8a5a00; font-weight: 600; }
.vf-estado { font-size: 1.05rem; }
.vf-historial { margin: 10px 0; font-size: .9rem; } .vf-historial ul { margin: 8px 0 0; padding-left: 18px; }