/* Avisos da tela de login no visual do cartão (tokens do tema do Keycloak, como app/styles.css):
   - a janela de modalPrompt() (#modal_script_message: "Tempo esgotado…", "Conta ativada!", respostas
     do servidor) e as de senha/PIN atualizados — ícone num círculo e título pelo tipo (data-tipo,
     posto por app/loginAvisos.js), texto centralizado, um botão "Entendi" e fundo esmaecido, em vez
     da janela genérica do app (sombra dura deslocada, título vazio, ícone de alerta para tudo);
   - as caixinhas fixas do formulário (.form_info: ambiente de testes, regra de senha) com ícone.
   O modal fica fora de .kcx, por isso os tokens são repetidos aqui. */
body.lp .modal{
  --av-card:oklch(100% 0 0);--av-texto:oklch(18% .014 262);--av-suave:oklch(51% .02 260);--av-borda:oklch(91% .008 250);
  --av-primaria:oklch(42.3% .11 259.865);--av-primaria-texto:oklch(98% .01 259.865);
  --av-cor:var(--av-primaria);--av-fundo:oklch(94% .03 259.865)}
body.lp.darkmode .modal{
  --av-card:oklch(20.5% .014 262);--av-texto:oklch(97% .004 260);--av-suave:oklch(72% .014 260);--av-borda:oklch(100% 0 0/.1);
  --av-primaria:oklch(65% .13 259.865);--av-primaria-texto:oklch(14% .01 259.865);
  --av-fundo:oklch(28% .04 259.865)}
body.lp .modal[data-tipo="success"]{--av-cor:oklch(52% .13 155);--av-fundo:oklch(95% .045 155)}
body.lp .modal[data-tipo="warning"]{--av-cor:oklch(58% .14 60);--av-fundo:oklch(95.5% .05 75)}
body.lp .modal[data-tipo="error"]{--av-cor:oklch(55% .2 27);--av-fundo:oklch(95% .03 25)}
body.lp.darkmode .modal[data-tipo="success"]{--av-cor:oklch(76% .14 155);--av-fundo:oklch(30% .05 155)}
body.lp.darkmode .modal[data-tipo="warning"]{--av-cor:oklch(82% .13 75);--av-fundo:oklch(31% .05 65)}
body.lp.darkmode .modal[data-tipo="error"]{--av-cor:oklch(74% .15 25);--av-fundo:oklch(30% .06 25)}

body.lp .modal.open{background:oklch(18% .014 262/.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.lp .modal .modal-window{max-width:380px !important;align-items:center;gap:0;padding:28px 24px 20px;border:1px solid var(--av-borda);border-radius:18px;
  background:var(--av-card) !important;color:var(--av-texto);box-shadow:0 1px 2px #0000000a,0 24px 48px -16px #0000003d !important;transition:scale .18s cubic-bezier(.2,.8,.2,1),opacity .18s !important}
body.lp.darkmode .modal .modal-window{box-shadow:0 1px 2px #0003,0 24px 48px -16px #0000008c !important}
body.lp .modal .modal-drag-handle{display:none}
body.lp .modal *{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* Ícone (círculo na cor do tipo) + título */
body.lp .modal .modal-window .title{flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;padding:0;border:0 !important}
body.lp .modal .modal-window .title .left{flex-direction:column;gap:14px}
body.lp .modal .modal-window .title img{display:none}
body.lp .modal .modal-window .title .left::before{content:"";width:48px;height:48px;border-radius:50%;
  background:var(--av-fundo) var(--av-ico) center/24px no-repeat;
  --av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23314f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
body.lp .modal[data-tipo="success"] .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177a4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
body.lp .modal[data-tipo="warning"] .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a35a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
body.lp .modal[data-tipo="error"] .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4231a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E")}
/* No escuro os traços claros (o SVG de fundo não herda currentColor) */
body.lp.darkmode .modal .modal-window .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c2f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
body.lp.darkmode .modal[data-tipo="success"] .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378dba5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
body.lp.darkmode .modal[data-tipo="warning"] .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c56f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
body.lp.darkmode .modal[data-tipo="error"] .title .left::before{--av-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f19a8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E")}
body.lp .modal .title h5{display:block;height:auto;margin:0;padding:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-align:center;color:var(--av-texto) !important}
body.lp .modal .title h5:empty{display:none}

/* Texto */
body.lp .modal .modal-window .modal-content{height:auto !important;gap:20px;margin-top:8px}
body.lp .modal .modal-window .modal-content-container{padding:0}
body.lp .modal p,body.lp .modal p.center{margin:0;font-size:14px;line-height:1.55;text-align:center;color:var(--av-suave) !important;text-wrap:pretty;overflow-wrap:break-word}
body.lp .modal p a{color:var(--av-primaria);font-weight:600;text-underline-offset:2px}

/* Botão: primário, largura toda (o app pinta todo button pelo tema; aqui volta ao do cartão) */
body.lp .modal options{margin-top:22px}
body.lp .modal options button,body.lp.darkmode .modal options button{width:100% !important;height:42px !important;top:auto !important;margin:0;border:0 !important;border-radius:10px;
  background:var(--av-primaria) !important;color:var(--av-primaria-texto) !important;font-size:14px !important;font-weight:600 !important;box-shadow:none !important;filter:none !important;transition:filter .15s}
body.lp .modal options button:hover{filter:brightness(1.08) !important}
body.lp .modal options button:focus-visible{outline:2px solid var(--av-primaria);outline-offset:3px}

@media (prefers-reduced-motion:reduce){body.lp .modal .modal-window{transition:none !important}}

/* Caixinhas fixas do formulário: ícone à esquerda, texto alinhado à esquerda. */
.kcx #loginBox .form_info{position:relative;padding:10px 12px 10px 38px;border-radius:10px;font-size:12.5px;line-height:1.45;text-align:left}
.kcx #loginBox .form_info::before{content:"";position:absolute;left:12px;top:11px;width:16px;height:16px;background:currentColor;opacity:.75;
  -webkit-mask:var(--fi-ico) center/contain no-repeat;mask:var(--fi-ico) center/contain no-repeat;
  --fi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31M14 9.3V2M8.5 2h7M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E")}
.kcx #loginBox .form_info.blue::before{color:var(--primary);opacity:1;
  --fi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
.kcx #loginBox .form_info.blue{color:var(--foreground) !important}
.kcx #loginBox .form_info b{font-weight:600}

/* Retorno do formulário em toast (app/loginAvisos.js): no topo da tela, fundo sólido escuro e texto branco
   (≥ 6:1 nos dois temas, as cores dos toasts da Agenda), ícone e título pelo tipo, barra do tempo restante. */
body.lp .kcx-toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:2147483000;width:min(460px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
body.lp .kcx-toast{--t-fundo:#1F3E66;--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  position:relative;overflow:hidden;pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:16px 14px 18px 16px;border-radius:12px;
  background:var(--t-fundo);color:#fff;box-shadow:0 2px 4px #0000001f,0 18px 40px -12px #00000073;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;text-align:left;animation:kcxToastEntra .22s cubic-bezier(.2,.8,.2,1)}
body.lp .kcx-toast[data-tipo="success"]{--t-fundo:#1F6E46;--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
body.lp .kcx-toast[data-tipo="warning"]{--t-fundo:#7A4A00;--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
body.lp .kcx-toast[data-tipo="error"]{--t-fundo:#B42318;--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E")}
body.lp .kcx-toast-ico{flex:none;width:34px;height:34px;border-radius:50%;background:#ffffff26;display:grid;place-items:center}
body.lp .kcx-toast-ico::before{content:"";width:18px;height:18px;background:#fff;-webkit-mask:var(--t-ico) center/contain no-repeat;mask:var(--t-ico) center/contain no-repeat}
body.lp .kcx-toast-txt{flex:1;min-width:0;padding-top:1px}
body.lp .kcx-toast-txt b{display:block;font-size:15px;font-weight:700;line-height:1.3;color:#fff}
body.lp .kcx-toast-txt p{margin:2px 0 0;font-size:15px;line-height:1.4;color:#fff !important;font-family:inherit !important;overflow-wrap:anywhere}
body.lp .kcx-toast-x{flex:none;width:28px;height:28px;min-height:0;margin:-4px -4px 0 0;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;
  grid-column:auto;position:static;top:auto;box-shadow:none;opacity:.85}
body.lp .kcx-toast-x:hover,body.lp .kcx-toast-x:focus-visible{background:#ffffff2e;opacity:1;outline:2px solid #fff;outline-offset:1px}
body.lp .kcx-toast-barra{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#ffffffa6;transform-origin:left;animation:kcxToastTempo var(--resta,6000ms) linear forwards}
body.lp .kcx-toast.is-pausado .kcx-toast-barra{animation-play-state:paused}
body.lp .kcx-toast.is-saindo{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
body.lp .kcx #loginBox .form-item.kcx-invalido,body.lp .kcx #loginBox .form-item.kcx-invalido:focus,body.lp .kcx-invalido,body.lp [aria-invalid="true"]{border-color:var(--destructive,oklch(57.7% .245 27.325)) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive,oklch(57.7% .245 27.325)) 25%,transparent) !important}
@keyframes kcxToastEntra{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes kcxToastTempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){body.lp .kcx-toast{animation:none}body.lp .kcx-toast-barra{animation:none;display:none}}

/* Carregamento (app/loginAvisos.js): o botão diz o que está acontecendo e o formulário fica travado enquanto
   espera. O ícone girando já vem do genérico (img.spin); aqui só alinhamento e o formulário esmaecido. */
body.lp .kcx button[type="submit"] .btnContent{display:inline-flex;align-items:center;justify-content:center;gap:8px}
body.lp .kcx button[type="submit"]:disabled{cursor:progress;opacity:1}
body.lp .kcx button[type="submit"] .btnContent img.spin{width:16px;height:16px;margin:0}
body.lp form.kcx-ocupado{cursor:progress}
body.lp form.kcx-ocupado .form-item,body.lp form.kcx-ocupado input,body.lp form.kcx-ocupado select,body.lp form.kcx-ocupado textarea,
body.lp form.kcx-ocupado .kcx-link,body.lp form.kcx-ocupado .kcx-check,body.lp form.kcx-ocupado button:not([type="submit"]){pointer-events:none;opacity:.6;transition:opacity .15s}