/* ===========================================================================
   ivalene-modal.css — SISTEMA DE MENSAGENS DO IVALENE EXPRESS
   ===========================================================================
   Substitui as janelas nativas do navegador (alert/confirm/prompt), que
   mostravam "localhost diz" e não têm nada a ver com a identidade da
   plataforma. Um único componente serve modais e toasts em toda a
   aplicação — loja, comprador, vendedor, transportadora, motorista e
   administração.

   Cores: azul institucional (informação/títulos), laranja (acção principal),
   vermelho (destrutivo/erro), verde (sucesso).
   ========================================================================= */
.ivm{
    --ivm-azul:#0f2a52; --ivm-azul-2:#1d4ed8; --ivm-azul-l:#eef4ff;
    --ivm-laranja:var(--ix-cta,#ea580c); --ivm-laranja-d:var(--ix-cta-hover,#c2410c); --ivm-laranja-l:var(--ix-cta-soft,#fff1e8);
    --ivm-vermelho:#dc2626; --ivm-vermelho-l:#fdecec;
    --ivm-verde:#16a34a; --ivm-verde-l:#ecfdf5;
    --ivm-amarelo:#b45309; --ivm-amarelo-l:#fff8e6;
    --ivm-ink:#0f172a; --ivm-ink-2:#475569; --ivm-ink-3:#94a3b8;
    --ivm-linha:#e6ebf2; --ivm-linha-2:#d8e0ea;
    --ivm-r:18px;
    font-family:inherit;
}

/* ---------- Camada ---------- */
.ivm-overlay{
    position:fixed; inset:0; z-index:100000;
    background:rgba(9,18,36,.55);
    display:flex; align-items:center; justify-content:center;
    padding:24px 16px;
    opacity:0; transition:opacity .18s ease;
    overflow-y:auto;
}
.ivm-overlay.is-aberto{ opacity:1; }
body.ivm-bloqueado{ overflow:hidden; }

/* ---------- Caixa ---------- */
.ivm-caixa{
    background:#fff; border-radius:var(--ivm-r); width:100%;
    box-shadow:0 24px 70px -20px rgba(9,18,36,.45), 0 2px 8px rgba(9,18,36,.08);
    position:relative; margin:auto;
    transform:translateY(12px) scale(.97); opacity:0;
    transition:transform .2s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
    max-height:calc(100vh - 48px); display:flex; flex-direction:column;
}
.ivm-overlay.is-aberto .ivm-caixa{ transform:none; opacity:1; }
.ivm-caixa[data-tam="small"]{ max-width:420px; }
.ivm-caixa[data-tam="medium"]{ max-width:560px; }
.ivm-caixa[data-tam="large"]{ max-width:760px; }

.ivm-fechar{
    position:absolute; top:14px; right:14px; z-index:2;
    width:38px; height:38px; border-radius:10px; border:0; background:transparent;
    color:var(--ivm-ink-3); font-size:19px; cursor:pointer; line-height:1;
    display:inline-flex; align-items:center; justify-content:center; transition:.15s;
}
.ivm-fechar:hover{ background:#f1f5f9; color:var(--ivm-ink); }
.ivm-fechar:focus-visible{ outline:2px solid var(--ivm-azul-2); outline-offset:2px; }

.ivm-corpo{ padding:30px 30px 8px; overflow-y:auto; }
.ivm-cab{ display:flex; align-items:flex-start; gap:16px; padding-right:30px; }
.ivm-ico{
    width:56px; height:56px; border-radius:16px; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center; font-size:24px;
}
.ivm-titulo{ margin:0; font-size:23px; line-height:1.25; font-weight:800; color:var(--ivm-azul); letter-spacing:-.01em; }
.ivm-msg{ margin:9px 0 0; font-size:15.5px; line-height:1.6; color:var(--ivm-ink-2); }
.ivm-detalhe{ margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--ivm-ink-3); }

/* bloco informativo (ex.: "Os seus dados estão seguros") */
.ivm-nota{
    display:flex; align-items:flex-start; gap:12px; margin:20px 0 0;
    background:var(--ivm-azul-l); border:1px solid #dbe7ff; border-radius:13px; padding:14px 16px;
}
.ivm-nota i{ font-size:17px; color:var(--ivm-azul-2); margin-top:2px; flex:0 0 auto; }
.ivm-nota b{ display:block; font-size:14.5px; font-weight:700; color:var(--ivm-azul); }
.ivm-nota span{ display:block; font-size:13.5px; color:var(--ivm-ink-2); line-height:1.5; margin-top:2px; }
.ivm-nota--ok{ background:var(--ivm-verde-l); border-color:#bbf7d0; }
.ivm-nota--ok i{ color:var(--ivm-verde); }
.ivm-nota--aviso{ background:var(--ivm-amarelo-l); border-color:#fde68a; }
.ivm-nota--aviso i{ color:var(--ivm-amarelo); }

/* campo de texto (substitui o prompt do navegador) */
.ivm-campo{ margin:20px 0 0; display:flex; flex-direction:column; gap:7px; }
.ivm-campo label{ font-size:14px; font-weight:600; color:var(--ivm-ink-2); margin:0; }
.ivm-campo input, .ivm-campo textarea{
    width:100%; border:1px solid var(--ivm-linha-2); border-radius:11px;
    padding:12px 14px; font-size:15px; color:var(--ivm-ink); background:#fff; font-family:inherit;
}
.ivm-campo textarea{ min-height:92px; resize:vertical; }
.ivm-campo input:focus, .ivm-campo textarea:focus{
    outline:none; border-color:var(--ivm-laranja); box-shadow:0 0 0 3px rgba(242,101,34,.14);
}
.ivm-erro-campo{ font-size:13px; color:var(--ivm-vermelho); min-height:1em; }

/* ---------- Acções ---------- */
.ivm-accoes{
    display:flex; align-items:center; justify-content:flex-end; gap:12px;
    padding:22px 30px 26px; flex-wrap:wrap;
}
.ivm-btn{
    border:0; border-radius:999px; font-size:15px; font-weight:700; cursor:pointer;
    padding:0 26px; height:50px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    transition:.15s; font-family:inherit; white-space:nowrap; text-decoration:none;
}
.ivm-btn:focus-visible{ outline:2px solid var(--ivm-azul-2); outline-offset:2px; }
.ivm-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.ivm-btn--sec{ background:#fff; border:1.5px solid var(--ivm-azul); color:var(--ivm-azul); }
.ivm-btn--sec:hover:not([disabled]){ background:#f4f7fc; }
.ivm-btn--pri{ background:var(--ivm-laranja); color:#fff; box-shadow:0 10px 22px -12px rgba(242,101,34,.9); }
.ivm-btn--pri:hover:not([disabled]){ background:var(--ivm-laranja-d); color:#fff; }
.ivm-btn--perigo{ background:var(--ivm-vermelho); color:#fff; box-shadow:0 10px 22px -12px rgba(220,38,38,.9); }
.ivm-btn--perigo:hover:not([disabled]){ background:#b91c1c; color:#fff; }
.ivm-spin{
    width:17px; height:17px; border-radius:50%; flex:0 0 auto;
    border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
    animation:ivm-gira .7s linear infinite; display:none;
}
.ivm-btn.is-ocupado .ivm-spin{ display:inline-block; }
@keyframes ivm-gira{ to{ transform:rotate(360deg); } }

/* ---------- Cores por tipo ---------- */
.ivm-caixa[data-tipo="info"]    .ivm-ico{ background:var(--ivm-azul-l);    color:var(--ivm-azul-2); }
.ivm-caixa[data-tipo="auth"]    .ivm-ico{ background:var(--ivm-laranja-l); color:var(--ivm-laranja); }
.ivm-caixa[data-tipo="warning"] .ivm-ico{ background:var(--ivm-amarelo-l); color:var(--ivm-amarelo); }
.ivm-caixa[data-tipo="error"]   .ivm-ico{ background:var(--ivm-vermelho-l);color:var(--ivm-vermelho); }
.ivm-caixa[data-tipo="danger"]  .ivm-ico{ background:var(--ivm-vermelho-l);color:var(--ivm-vermelho); }
.ivm-caixa[data-tipo="success"] .ivm-ico{ background:var(--ivm-verde-l);   color:var(--ivm-verde); }
.ivm-caixa[data-tipo="confirm"] .ivm-ico{ background:var(--ivm-azul-l);    color:var(--ivm-azul-2); }
.ivm-caixa[data-tipo="loading"] .ivm-ico{ background:var(--ivm-azul-l);    color:var(--ivm-azul-2); }
.ivm-caixa[data-tipo="error"] .ivm-titulo,
.ivm-caixa[data-tipo="danger"] .ivm-titulo{ color:#991b1b; }

/* estado de carregamento */
.ivm-carregar{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.ivm-carregar__spin{
    width:22px; height:22px; border-radius:50%;
    border:2.5px solid var(--ivm-linha-2); border-top-color:var(--ivm-azul-2);
    animation:ivm-gira .8s linear infinite;
}

/* ---------- Toasts ---------- */
.ivm-toasts{
    position:fixed; top:18px; right:18px; z-index:100010;
    display:flex; flex-direction:column; gap:10px; width:min(370px, calc(100vw - 32px));
    pointer-events:none;
}
.ivm-toast{
    pointer-events:auto; display:flex; align-items:flex-start; gap:12px;
    background:#fff; border:1px solid var(--ivm-linha); border-left:4px solid var(--ivm-azul-2);
    border-radius:13px; padding:14px 15px; box-shadow:0 12px 30px -12px rgba(9,18,36,.35);
    transform:translateX(14px); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.ivm-toast.is-aberto{ transform:none; opacity:1; }
.ivm-toast__ico{ font-size:17px; margin-top:1px; flex:0 0 auto; }
.ivm-toast__txt{ flex:1 1 auto; min-width:0; font-size:14.5px; color:var(--ivm-ink); line-height:1.45; }
.ivm-toast__txt b{ display:block; font-weight:700; margin-bottom:2px; }
.ivm-toast__x{
    border:0; background:transparent; color:var(--ivm-ink-3); cursor:pointer;
    font-size:15px; line-height:1; padding:2px 4px; border-radius:6px; flex:0 0 auto;
}
.ivm-toast__x:hover{ color:var(--ivm-ink); background:#f1f5f9; }
.ivm-toast[data-tipo="success"]{ border-left-color:var(--ivm-verde); }
.ivm-toast[data-tipo="success"] .ivm-toast__ico{ color:var(--ivm-verde); }
.ivm-toast[data-tipo="error"]{ border-left-color:var(--ivm-vermelho); }
.ivm-toast[data-tipo="error"] .ivm-toast__ico{ color:var(--ivm-vermelho); }
.ivm-toast[data-tipo="warning"]{ border-left-color:var(--ivm-amarelo); }
.ivm-toast[data-tipo="warning"] .ivm-toast__ico{ color:var(--ivm-amarelo); }
.ivm-toast[data-tipo="info"] .ivm-toast__ico{ color:var(--ivm-azul-2); }

/* ---------- Ecrãs pequenos ---------- */
@media (max-width:600px){
    .ivm-overlay{ padding:16px; align-items:flex-end; }
    .ivm-caixa{ max-width:100% !important; border-radius:20px; max-height:calc(100vh - 32px); }
    .ivm-corpo{ padding:26px 20px 6px; }
    .ivm-cab{ gap:13px; padding-right:26px; }
    .ivm-ico{ width:48px; height:48px; border-radius:14px; font-size:21px; }
    .ivm-titulo{ font-size:20px; }
    .ivm-msg{ font-size:15px; }
    .ivm-accoes{ padding:18px 20px 22px; flex-direction:column-reverse; align-items:stretch; gap:10px; }
    .ivm-btn{ width:100%; height:52px; }
    .ivm-toasts{ top:auto; bottom:14px; right:14px; left:14px; width:auto; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
    .ivm-overlay, .ivm-caixa, .ivm-toast{ transition:none; }
    .ivm-caixa{ transform:none; }
    .ivm-spin, .ivm-carregar__spin{ animation:none; }
}

/* Nos painéis o cabeçalho fixo ocupa o topo: os toasts descem para não o tapar. */
body.ix-panel .ivm-toasts, body.app .ivm-toasts{ top:76px; }
@media (max-width:600px){
    body.ix-panel .ivm-toasts, body.app .ivm-toasts{ top:auto; }
}