/* =========================================================
   Login UI – estilos mínimos e independientes
   Paleta clonada de app.css para coherencia visual
   ========================================================= */
:root{
  --violeta:#7b3fe4;
  --violeta-osc:#6b33ce;
  --bg:#f7f7fb;
  --text:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --ring: rgba(123,63,228,.35);
  --rosado:#9933CC;

  --radius: 14px;
  --shadow: 0 12px 28px rgba(0,0,0,.16);
  --border: 1px solid rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body.pg-login{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Header / Footer (idénticos en alturas a asistencia)
   ========================================================= */
.pg-header{position:sticky; top:0; z-index:50; background:var(--rosado);/*#fff*/; border-bottom:var(--border)}
.pg-header__inner{height:100px; display:flex; align-items:center; gap:16px; padding:0 16px; max-width:1200px; margin:0 auto}
.pg-brand__img{height:64px; width:auto; display:block}
.pg-header__spacer{margin-left:auto}

.pg-footer{background:#fff; border-top:var(--border)}
.pg-footer__inner{height:120px; display:flex; align-items:center; justify-content:center; padding:0 16px}
.pg-footer__txt{margin:0; color:#475569; font-size:14px}

@media (max-width: 768px){
  .pg-header__inner{height:60px}
  .pg-footer__inner{height:80px}
  .pg-brand__img{height:40px}
  .pg-footer__txt{font-size:10px}
}

/* =========================================================
   Estructura de página (main ocupa el alto entre header/footer)
   ========================================================= */
.pg-shell{
  min-height: calc(100vh /*- 100px - 100px*/); /* header + footer desktop */
}
@media (max-width: 768px){
  .pg-shell{ min-height: calc(100vh /*- 60px - 60px*/); }
}

/* =========================================================
   Hero con video de fondo
   ========================================================= */
.pg-hero{position:relative; height:100%; min-height:inherit; overflow:hidden; background:#0b0e14}
.pg-hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.95) contrast(1.05) brightness(.9);
}
.pg-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.42));
}

/* =========================================================
   Card de login
   ========================================================= */
.login-card{
  position:relative; z-index:2;
  display:grid; place-items:center;
  min-height:inherit; padding:24px;
}
.login-card__inner{
  width:100%; max-width:520px;
  background: rgba(255,255,255,.96);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:24px 22px;
  backdrop-filter: blur(6px);
}
@media (min-width: 768px){ .login-card__inner{ padding:28px 26px } }

.login-title{
  margin:0 0 12px; font-size:24px; font-weight:700; letter-spacing:.2px;
}
.login-footnote{
  margin:12px 2px 0; font-size:12px; color:#334155;
}
.link{color:var(--violeta); text-decoration:none; border-bottom:1px dotted currentColor}
.link:hover{color:var(--violeta-osc)}

/* =========================================================
   Formulario
   ========================================================= */
.login-form{margin-top:8px}
.field{margin:12px 0}
.label{display:block; font-size:14px; font-weight:600; color:#0f172a; margin:0 0 6px}

.input{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(0,0,0,.14); outline:0; background:#fff; font-size:16px;
  transition: box-shadow .15s ease, border-color .15s ease, transform .04s ease;
}
.input:focus{
  border-color: var(--violeta);
  box-shadow: 0 0 0 3px var(--ring);
}
.input:active{ transform: scale(.998) }

.hint{display:block; margin-top:6px; font-size:12px; color:var(--muted)}

/* Captcha */
.captcha{margin:10px 0 6px; display:flex; justify-content:center}

/* Alertas */
.alert{
  padding:10px 12px; border-radius:10px; margin:12px 0;
  font-size:14px; line-height:1.3;
}
.alert--error{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca }

/* Botón primario (violeta de la paleta) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:44px; border-radius:12px; font-weight:700; letter-spacing:.2px;
  border:0; cursor:pointer; transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary{
  background: var(--violeta);
  /*background: linear-gradient(180deg, var(--violeta) 0%, var(--violeta-osc) 100%);*/
  color:#fff;
  box-shadow: 0 6px 16px rgba(123,63,228,.20);
}
.btn--primary:hover{ background: var(--violeta-osc) }
.btn:active{ transform: translateY(1px) }
.btn.is-loading{ opacity:.7; pointer-events:none }

/* Accesibilidad foco visible global */
:focus-visible{ outline: 2px solid var(--violeta); outline-offset: 2px }

/**************************************************/

/* ===== Header con título centrado ===== */
.pg-header{ position:sticky; top:0; z-index:50; background:var(--rosado); border-bottom:var(--border); }
.pg-header__inner{ height:100px; display:flex; align-items:center; justify-content:center; padding:0 16px; max-width:1200px; margin:0 auto; }
.pg-header__title{
  color:#fff; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  text-align:center; font-size:28px;
}
@media (max-width:768px){
  .pg-header__inner{ height:60px; }
  /*.pg-header__title{ font-size:18px; letter-spacing:.4px; }*/
}
.pg-header__title{
  color:#fff;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  margin:0;
  line-height:1.2;

  /* tipografía fluida: min 16px, máx 28px */
  font-size: clamp(16px, 1.6vw + 12px, 28px);

  /* tracking también fluido */
  letter-spacing: clamp(.3px, .1vw, 1px);

  /* mejor distribución si llega a partirse en 2 líneas */
  text-wrap: balance;
}


/* ===== Badge de marca dentro de la card ===== */
.brand-badge{
  /*position:absolute; top:16px; right:16px;*/
  /*background:#fff; border:1px solid rgba(0,0,0,.06);*/
  /*border-radius:14px; padding:8px 10px;*/
  /*box-shadow:0 8px 20px rgba(0,0,0,.08);*/
  display:flex; align-items:center; justify-content:center;
  padding: 0 0 12px 0;
}
.brand-badge img{
  /*display:block; height:36px; width:auto;*/
  height: 64px;
  width: auto;
}

/* En pantallas chicas, lo bajamos y centramos para que no tape el título/inputs */
@media (max-width: 560px){
  .brand-badge{
    /*position:static; margin:0 auto 6px; display:inline-block;*/
    /*padding:6px 8px; border-radius:12px;*/
  }
  .brand-badge img{ height:50px; }
}

/* Aseguramos que la card admita el badge absoluto en desktop */
.login-card__inner{ position:relative; /*padding-top:52px; */} /* deja lugar arriba para el badge */
@media (max-width:560px){
  .login-card__inner{ padding-top:24px; } /* ya no hace falta extra espacio */
}

/* Botón: si querés degradé de marca, descomentá */
 /* .btn--primary{ background: linear-gradient(180deg, var(--violeta) 0%, var(--violeta-osc) 100%); } */

 /**************************************************/

/* ===== Footer: sin invadir el video (0px), fade/sombra solo dentro ===== */
/*.pg-footer{
  background:#fff;
  border-top:0;
  position:relative;
  z-index:3;
  box-shadow: 0 -1px 0 rgba(255,255,255,.65) inset;
}*/

/* Sombra interna 100% dentro del footer */
/*.pg-footer::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: clamp(25px, 40px, 100px);
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.40) 0%,
    rgba(0,0,0,.20) 45%,
    rgba(0,0,0,0)   100%
  );
}*/

/* Aseguramos el contenido por encima de la sombra */
/*.pg-footer__inner{ position:relative; z-index:2; }*/

/* Por si dejaste un ::before viejo, desactívalo explícitamente */
/*.pg-footer::before{ display:none !important; }*/