:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193044;background:#f4f7fb;font-size:16px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
button,input{font:inherit}
.layout{min-height:100dvh;display:grid;grid-template-columns:minmax(320px,44%) 1fr}
.marca{background:#123e65;color:white;padding:52px clamp(28px,5vw,76px);display:flex;flex-direction:column;justify-content:space-between;gap:64px}
.nombre{font-size:40px;font-weight:800;letter-spacing:-1px}
.nombre span{display:block;font-size:12px;letter-spacing:2px;font-weight:500;margin-top:8px;color:#c8deef}
.etiqueta{font-size:12px;font-weight:700;letter-spacing:1.6px;color:#9cd8f1}
h1{font-size:clamp(32px,3.5vw,52px);line-height:1.15;letter-spacing:-1.5px;margin:22px 0}
.introduccion p{font-size:18px;line-height:1.7;color:#d4e3ef;max-width:360px}
.pie-marca{font-size:14px;color:#c8deef}
.contenido{padding:48px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:38px}
.tarjeta{width:100%;max-width:460px;background:white;border:1px solid #e0e7ef;border-radius:20px;padding:40px;box-shadow:0 16px 48px #123e6508}
.azul{color:#276890}
h2{font-size:28px;letter-spacing:-.7px;line-height:1.25;margin:14px 0}
.subtitulo{color:#596d80;line-height:1.6;margin:0 0 30px}
label{display:block;font-size:14px;font-weight:650;margin-bottom:9px}
input{width:100%;height:50px;border:1px solid #aebfcd;border-radius:8px;padding:0 13px;background:white;color:#193044;margin-bottom:22px}
input:focus{outline:3px solid #c5e4f7;border-color:#276890}
button{cursor:pointer;width:100%;border:1px solid transparent;border-radius:8px;background:#155681;color:white;padding:14px 18px;font-weight:650;min-height:48px}
button:hover{background:#10446a}
button:disabled{opacity:.65;cursor:wait}
button:focus-visible{outline:3px solid #5da8d9;outline-offset:3px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.enlace{width:auto;min-height:44px;background:transparent;color:#155681;font-size:14px;padding:8px;margin-top:-12px}
.enlace:hover{background:#eef5fa}
.error{background:#fff1f1;border:1px solid #edc4c4;color:#8f2727;font-size:14px;line-height:1.5;padding:12px;border-radius:8px}
.nota,footer{font-size:13px;color:#667b8c;text-align:center;line-height:1.6}
.nota{margin:22px 0 0}
.datos{margin:28px 0}
.datos div{border-bottom:1px solid #e5ebf1;padding:15px 0}
dt{font-size:14px;color:#596d80;margin-bottom:6px}
dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.secundario{background:white;color:#155681;border-color:#aebfcd}
.secundario:hover{background:#eef5fa}
@media(max-width:760px){.layout{grid-template-columns:1fr}.marca{padding:24px;gap:0}.nombre{font-size:30px}.introduccion,.pie-marca{display:none}.nombre span{font-size:12px;letter-spacing:1px}.contenido{padding:28px 18px;justify-content:flex-start}.tarjeta{padding:28px 22px}h2{font-size:26px}}


/* ===== PICSA · HOME CON LOGO ===== */
:root{
  --picsa-negro:#0b0b0b;
  --picsa-verde:#84b94f;
  --picsa-verde-oscuro:#6ea33d;
  --picsa-fondo:#eef2f4;
  --picsa-borde:#d6dee4;
  --picsa-texto:#173047;
}

body{
  background:var(--picsa-fondo);
}

.marca{
  background:var(--picsa-negro) !important;
  color:#ffffff !important;
}

.logo-principal{
  margin-bottom:32px;
}

.logo-principal img{
  display:block;
  width:min(320px, 100%);
  height:auto;
  object-fit:contain;
}

.marca .etiqueta{
  color:var(--picsa-verde) !important;
  letter-spacing:2px;
  font-weight:800;
}

.marca h1{
  color:#ffffff !important;
}

.marca p,
.marca .pie-marca{
  color:#d7e0e6 !important;
}

.tarjeta{
  border:1px solid var(--picsa-borde) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.etiqueta.azul{
  color:var(--picsa-verde) !important;
}

#ingresar,
#reintentar{
  background:var(--picsa-verde) !important;
  border-color:var(--picsa-verde) !important;
  color:#0b0b0b !important;
  font-weight:800;
}

#ingresar:hover,
#reintentar:hover{
  background:var(--picsa-verde-oscuro) !important;
  border-color:var(--picsa-verde-oscuro) !important;
  color:#ffffff !important;
}

#salir,
.secundario{
  border-color:var(--picsa-verde) !important;
  color:var(--picsa-verde) !important;
}

input:focus,
button:focus{
  outline:3px solid rgba(132,185,79,.35) !important;
  outline-offset:2px;
}

@media (max-width: 900px){
  .logo-principal img{
    width:min(240px, 85%);
    margin-inline:auto;
  }
}


/* ===== PICSA · HOME CLARO Y CENTRADO ===== */

.marca{
  background:#f7f8f5 !important;
  color:#111111 !important;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.logo-principal{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:30px;
}

.logo-principal img{
  width:min(300px, 78%);
  margin:0 auto;
}

.marca .introduccion{
  width:100%;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.marca .etiqueta{
  color:#78ad49 !important;
}

.marca h1{
  color:#111111 !important;
  text-align:center;
}

.marca p{
  color:#34424a !important;
  text-align:center;
}

.marca .pie-marca{
  color:#52616a !important;
  text-align:center;
  width:100%;
}


/* ===== PICSA · CENTRADO VISUAL FINAL ===== */

.marca{
  text-align:center !important;
  align-items:center !important;
}

.logo-principal{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.logo-principal img{
  width:min(340px, 82%) !important;
  margin:0 auto !important;
}

.marca .introduccion{
  width:100% !important;
  max-width:700px !important;
  margin-left:auto !important;
  margin-right:auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  text-align:center !important;
}

.marca .introduccion .etiqueta{
  width:100% !important;
  text-align:center !important;
  font-size:13px !important;
  letter-spacing:2.4px !important;
}

.marca .introduccion h1{
  width:100% !important;
  max-width:680px !important;

  margin-left:auto !important;
  margin-right:auto !important;

  text-align:center !important;

  font-size:clamp(44px, 4vw, 62px) !important;
  line-height:1.06 !important;
  letter-spacing:-1.5px !important;
}

.marca .introduccion p{
  width:100% !important;
  max-width:560px !important;

  margin-left:auto !important;
  margin-right:auto !important;

  text-align:center !important;

  font-size:18px !important;
  line-height:1.6 !important;
}

.marca .pie-marca{
  width:100% !important;
  text-align:center !important;
  font-size:13px !important;
}

@media(max-width:700px){

  .logo-principal img{
    width:min(280px, 80%) !important;
  }

  .marca .introduccion h1{
    font-size:38px !important;
  }

  .marca .introduccion p{
    font-size:16px !important;
  }
}


/* ===== PICSA · HOME COMPACTO SIN SCROLL ===== */
html, body{
  height:100%;
  margin:0;
  overflow:hidden;
}

body{
  min-height:100dvh;
}

body > main{
  min-height:100dvh !important;
  height:100dvh !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(460px,540px) !important;
  overflow:hidden !important;
}

body > main > :first-child{
  min-height:100dvh !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:28px 48px 22px !important;
  overflow:hidden !important;
}

body > main > :last-child{
  min-height:100dvh !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  padding:22px 26px !important;
  overflow:hidden !important;
}

body > main > :last-child > *:first-child{
  width:min(100%, 520px) !important;
  margin:0 auto !important;
}

body > main > :last-child > *:last-child{
  margin-top:18px !important;
  text-align:center !important;
}

.logo-principal{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:0 !important;
}

.logo-principal img{
  width:min(240px, 42%) !important;
  max-width:240px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
}

.marca{
  text-align:center !important;
}

.marca .introduccion{
  width:100% !important;
  max-width:680px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}

.marca .introduccion .etiqueta{
  margin:0 0 16px 0 !important;
  text-align:center !important;
  font-size:13px !important;
  letter-spacing:2.5px !important;
}

.marca .introduccion h1{
  margin:0 auto 20px auto !important;
  max-width:700px !important;
  text-align:center !important;
  font-size:clamp(56px, 4.4vw, 74px) !important;
  line-height:1.03 !important;
  letter-spacing:-1.8px !important;
}

.marca .introduccion p{
  margin:0 auto !important;
  max-width:620px !important;
  text-align:center !important;
  font-size:18px !important;
  line-height:1.5 !important;
}

.marca .pie-marca{
  margin-top:14px !important;
  text-align:center !important;
  font-size:13px !important;
}

body > main > :last-child input{
  min-height:54px !important;
}

body > main > :last-child button{
  min-height:60px !important;
  font-size:17px !important;
}

@media (max-height: 920px){
  body > main > :first-child{
    padding:20px 42px 18px !important;
  }

  .logo-principal img{
    width:min(210px, 38%) !important;
    max-width:210px !important;
  }

  .marca .introduccion .etiqueta{
    margin-bottom:12px !important;
    font-size:12px !important;
  }

  .marca .introduccion h1{
    font-size:clamp(48px, 4vw, 64px) !important;
    margin-bottom:14px !important;
  }

  .marca .introduccion p{
    font-size:17px !important;
  }

  .marca .pie-marca{
    font-size:12px !important;
  }

  body > main > :last-child{
    padding:16px 22px !important;
  }

  body > main > :last-child > *:first-child{
    width:min(100%, 500px) !important;
  }
}

@media (max-height: 820px){
  .logo-principal img{
    width:min(180px, 34%) !important;
    max-width:180px !important;
  }

  .marca .introduccion h1{
    font-size:clamp(42px, 3.5vw, 56px) !important;
  }

  .marca .introduccion p{
    font-size:16px !important;
  }

  body > main > :last-child input{
    min-height:50px !important;
  }

  body > main > :last-child button{
    min-height:54px !important;
    font-size:16px !important;
  }
}


/* ===== PICSA · AJUSTE PANEL DERECHO MÁS COMPACTO ===== */
body > main{
  grid-template-columns:minmax(0,1fr) minmax(430px, 520px) !important;
}

body > main > :last-child{
  padding:18px 20px !important;
  justify-content:center !important;
}

body > main > :last-child > *:first-child{
  width:min(100%, 460px) !important;
  max-width:460px !important;
  margin:0 auto !important;
}

body > main > :last-child .panel,
body > main > :last-child .tarjeta,
body > main > :last-child .login,
body > main > :last-child .login-card,
body > main > :last-child .acceso{
  width:min(100%, 460px) !important;
  max-width:460px !important;
  padding:34px 34px 28px !important;
  border-radius:24px !important;
}

body > main > :last-child h1{
  font-size:28px !important;
  line-height:1.1 !important;
  margin-bottom:14px !important;
}

body > main > :last-child p{
  margin-bottom:18px !important;
}

body > main > :last-child label{
  margin-bottom:8px !important;
}

body > main > :last-child input{
  min-height:52px !important;
}

body > main > :last-child button{
  min-height:56px !important;
}

body > main > :last-child > *:last-child{
  margin-top:12px !important;
  font-size:14px !important;
}

@media (max-width: 1200px){
  body > main{
    grid-template-columns:minmax(0,1fr) minmax(400px, 470px) !important;
  }

  body > main > :last-child > *:first-child,
  body > main > :last-child .panel,
  body > main > :last-child .tarjeta,
  body > main > :last-child .login,
  body > main > :last-child .login-card,
  body > main > :last-child .acceso{
    width:min(100%, 420px) !important;
    max-width:420px !important;
    padding:30px 28px 24px !important;
  }
}

@media (max-height: 900px){
  body > main > :last-child{
    padding:12px 16px !important;
  }

  body > main > :last-child > *:first-child,
  body > main > :last-child .panel,
  body > main > :last-child .tarjeta,
  body > main > :last-child .login,
  body > main > :last-child .login-card,
  body > main > :last-child .acceso{
    padding:26px 24px 20px !important;
  }

  body > main > :last-child h1{
    font-size:26px !important;
  }

  body > main > :last-child input{
    min-height:48px !important;
  }

  body > main > :last-child button{
    min-height:52px !important;
  }
}


/* ===== PICSA · PROPORCIÓN HOME 54 / 46 ===== */

/* Panel izquierdo más reducido, similar a ExcelAcademy */
body > main{
  grid-template-columns:
    minmax(0, 54%)
    minmax(0, 46%) !important;
}

/* Restaurar tamaño normal del área de login */
body > main > :last-child{
  padding:22px 26px !important;
  justify-content:center !important;
}

body > main > :last-child > *:first-child{
  width:min(100%, 520px) !important;
  max-width:520px !important;
  margin:0 auto !important;
}

/* Restaurar tarjeta de login, por si se aplicó el ajuste anterior */
body > main > :last-child .panel,
body > main > :last-child .tarjeta,
body > main > :last-child .login,
body > main > :last-child .login-card,
body > main > :last-child .acceso{
  width:auto !important;
  max-width:none !important;
}

/* El contenido del panel izquierdo se adapta al nuevo ancho */
.marca .introduccion{
  max-width:620px !important;
}

.marca .introduccion h1{
  max-width:620px !important;
  font-size:clamp(48px, 4vw, 66px) !important;
}

.marca .introduccion p{
  max-width:560px !important;
}

@media(max-width:1000px){
  body > main{
    grid-template-columns:
      minmax(0, 52%)
      minmax(0, 48%) !important;
  }
}