/* Entrada y tutorial de instalación.
   El público que compra esto son padres y abuelos: letra grande, botones
   grandes, y un solo camino visible en cada pantalla. */

/* ---------- entrar ---------- */
.login-card h1{font-size:28px;line-height:1.2}
.lg-sub{margin:12px 0 26px!important;font-size:16px;line-height:1.5}
.lg-campo{display:block;text-align:left;font-weight:800;font-size:15px;margin-bottom:9px}
.lg-caja{display:flex;align-items:center;gap:11px;padding:0 16px;border-radius:16px;
 background:oklch(.99 .004 300);border:2px solid oklch(.72 .13 300 / .5)}
.lg-caja:focus-within{border-color:oklch(.78 .16 345);box-shadow:0 0 0 4px oklch(.78 .16 345 / .25)}
.lg-caja svg{flex:none;width:23px;height:23px;color:oklch(.45 .13 300)}
.lg-caja input{flex:1;min-width:0;padding:17px 0;border:0;outline:0;background:none;
 font-family:'DM Sans',sans-serif;font-size:17px;color:oklch(.22 .09 298)}
.lg-caja input::placeholder{color:oklch(.6 .04 300)}
.lg-error{margin:12px 0 0!important;padding:11px 14px;border-radius:12px;font-size:15px;font-weight:700;
 color:oklch(.97 .02 25);background:oklch(.5 .16 25 / .55);text-align:left}
.lg-entrar{margin-top:20px;padding:18px!important;font-size:19px!important;font-weight:800}

.lg-instalar{display:flex;align-items:center;gap:13px;width:100%;margin-top:26px;padding:15px 16px;
 text-align:left;border-radius:18px;color:white;border:2px solid oklch(.75 .13 300 / .45);
 background:oklch(.36 .13 295 / .55)}
.lg-instalar:hover{background:oklch(.44 .15 295 / .6)}
.lg-instalar strong{display:block;font-family:'Nunito',sans-serif;font-weight:800;font-size:16px}
.lg-instalar small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:oklch(.86 .05 290)}
.lg-instalar>span:nth-child(2){flex:1;min-width:0}
.lg-instalar>svg{flex:none;width:22px;height:22px;opacity:.8}
.lg-instalar-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
 background:oklch(.88 .14 88);color:oklch(.25 .1 298)}
.lg-instalar-ico svg{width:25px;height:25px;stroke-width:2}

/* ---------- cómo instalar ---------- */
.ins-dialog{width:min(540px,calc(100% - 20px));max-height:92dvh;margin:auto;padding:0;border:0;border-radius:26px;
 background:oklch(.985 .006 300);color:oklch(.22 .09 298);overflow:auto}
.ins-dialog::backdrop{background:oklch(.16 .07 298 / .66)}
.ins{padding:24px 22px 28px}
.ins-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.ins-top h2{flex:1;font-family:'Nunito',sans-serif;font-size:24px;font-weight:900;line-height:1.15}
.ins-cerrar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
 background:oklch(.93 .02 300);color:oklch(.33 .1 298)}
.ins-intro{font-size:15px;line-height:1.5;color:oklch(.42 .05 298)}
.ins-aviso{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:14px 15px;border-radius:15px;
 font-size:15px;line-height:1.5;background:oklch(.94 .07 90);color:oklch(.33 .09 70)}
.ins-aviso svg{flex:none;width:22px;height:22px;margin-top:1px}
.ins-aviso span{flex:1;min-width:0}

.ins-ahora{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:20px;
 padding:18px;border-radius:999px;font-family:'Nunito',sans-serif;font-weight:800;font-size:19px;
 color:white;background:oklch(.55 .2 300);box-shadow:0 5px 0 oklch(.4 .16 300)}
.ins-ahora svg{width:23px;height:23px;stroke-width:2}
.ins-o{margin-top:14px;text-align:center;font-size:14px;color:oklch(.5 .04 298)}

.ins-pestanas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 14px;
 padding:5px;border-radius:16px;background:oklch(.93 .02 300)}
.ins-pestanas button{padding:13px;border-radius:12px;font-family:'Nunito',sans-serif;font-weight:800;
 font-size:16px;color:oklch(.42 .07 298)}
.ins-pestanas button.activa{background:oklch(1 0 0);color:oklch(.33 .15 300);box-shadow:0 2px 6px -2px oklch(.2 .08 298 / .45)}

.ins-pasos{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ins-pasos li{display:flex;align-items:center;gap:12px;padding:13px;border-radius:17px;background:oklch(.95 .013 300)}
.ins-num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
 font-family:'Nunito',sans-serif;font-weight:900;font-size:17px;color:white;background:oklch(.55 .2 300)}
.ins-texto{flex:1;min-width:0;font-size:16px;line-height:1.45}
.ins-texto b{font-weight:800}
.ins-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
 background:oklch(1 0 0);color:oklch(.45 .15 300)}
.ins-ico svg{width:24px;height:24px;stroke-width:2}
.ins-pie{margin-top:18px;font-size:14px;line-height:1.5;color:oklch(.5 .04 298);text-align:center}
.ins-listo{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px 10px;
 font-size:17px;line-height:1.5;color:oklch(.42 .13 150)}
.ins-listo svg{flex:none;width:26px;height:26px;stroke-width:2.6}
.ins-listo span{max-width:30ch}

@media(max-width:420px){
 .ins{padding:20px 16px 24px}
 .ins-top h2{font-size:21px}
 .ins-texto{font-size:15px}
 .ins-ico{width:38px;height:38px}
 .login-card h1{font-size:25px}
}

/* A foto de perfil tem que preencher o círculo.
   O pai é um grid com place-items:center, e isso impede o filho de esticar: a
   imagem ficava encaixotada, com fundo aparecendo em volta. Ocupando a mesma
   célula e esticando, ela preenche; o recorte sobe um pouco porque em retrato
   o rosto fica na metade de cima, e cortar pelo meio decepava a cabeça. */
.avatar{overflow:hidden;position:relative}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.profile-avatar-wrap{position:relative;overflow:hidden}
.profile-avatar-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;border-radius:50%}
.profile-edit-preview img{object-fit:cover;object-position:center 30%}

/* Quando o navegador deixa instalar de uma vez, o botão fica com cara de ação
   principal — é o caminho mais curto e o que mais ajuda quem tem mais idade. */
.lg-instalar--ya{background:oklch(.88 .14 88);border-color:oklch(.88 .14 88);color:oklch(.25 .1 298)}
.lg-instalar--ya:hover{background:oklch(.92 .15 88)}
.lg-instalar--ya small{color:oklch(.38 .08 80)}
.lg-instalar--ya .lg-instalar-ico{background:oklch(.55 .2 300);color:white}
.lg-comoinstalar{display:block;width:100%;margin-top:10px;padding:10px;font-size:14px;
 font-weight:700;color:oklch(.88 .08 290);text-decoration:underline}