/*
 * Estilo unico da Intranet ECTA - visual inspirado no iOS com as cores da ECTA (Robson, 29/10/2026).
 * Toda tela da intranet carrega este arquivo antes do estilo proprio dela.
 * Tema escuro: html[data-tema="escuro"], o mesmo atributo que as telas ja usam.
 */

/* ---------- Cores (tokens) ---------- */
:root{
  --azul:#123B5B; --profundo:#0C2C46; --medio:#1B5480; --kicker:#3D7099; --apoio:#9FB6C9; --gelo:#C9D8E4;
  --ios-fundo:#EEF2F6;          /* fundo agrupado */
  --ios-card:#FFFFFF;           /* cartao/lista */
  --ios-preench:rgba(18,59,91,.07);
  --ios-texto:#16283A; --ios-sec:#5B6E80; --ios-ter:#9AA9B7;
  --ios-sep:rgba(18,59,91,.12);
  --ios-tint:#123B5B; --ios-tint-txt:#1B5480; --ios-sobre-tint:#FFFFFF;
  --ios-vidro:rgba(244,247,250,.97);
  --ios-pilula:#FFFFFF;
  --ios-ok:#2F8A5B; --ios-atn:#B7791F; --ios-erro:#C0392B;
  --ios-sombra:0 1px 2px rgba(12,44,70,.04),0 8px 24px rgba(12,44,70,.06);
  --ios-raio:14px;
  --ios-largura:1280px;        /* largura maxima do conteudo em TODAS as telas (padrao unico) */
  --ios-margem:28px;           /* margem lateral; 16px no celular */
  --ios-fonte:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,sans-serif;
  color-scheme:light;
}
html[data-tema="escuro"]{
  --ios-fundo:#071E31; --ios-card:#0F2E48; --ios-preench:rgba(201,216,228,.10);
  --ios-texto:#FFFFFF; --ios-sec:#B5C6D6; --ios-ter:#7F97AC; --ios-sep:rgba(201,216,228,.14);
  --ios-tint:#9FB6C9; --ios-tint-txt:#C9D8E4; --ios-sobre-tint:#0C2C46;
  --ios-vidro:rgba(7,30,49,.97); --ios-pilula:#24496B;
  --ios-ok:#6FCF97; --ios-atn:#F2C26B; --ios-erro:#F08A80; --ios-sombra:none;
  color-scheme:dark;
}

@media (max-width:820px){:root{--ios-margem:16px}}

/* ---------- Base ---------- */
html,body{background:var(--ios-fundo)}
body{font-family:var(--ios-fonte);color:var(--ios-texto);-webkit-font-smoothing:antialiased;line-height:1.35}
button,input,select,textarea{font-family:inherit}

/* ---------- Titulos ---------- */
.ios-rotulo{font-size:13px;font-weight:600;color:var(--ios-sec);letter-spacing:0;text-transform:none}
.ios-titulo{font-family:var(--ios-fonte);font-size:34px;font-weight:700;letter-spacing:-.6px;line-height:1.1;color:var(--ios-texto);margin:4px 0}
.ios-sub{color:var(--ios-sec);font-size:16px}

/* ---------- Busca ---------- */
.ios-busca{display:block;width:100%;border:0;border-radius:12px;background:var(--ios-preench) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235B6E80' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat 12px center;
  padding:10px 12px 10px 38px;font-size:17px;color:var(--ios-texto);outline:none}
.ios-busca::placeholder{color:var(--ios-sec)}
.ios-busca:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--kicker) 35%,transparent)}

/* ---------- Controle segmentado (botoes filhos; o ativo leva .on) ---------- */
.ios-seg{display:inline-flex;gap:0;background:var(--ios-preench);border-radius:10px;padding:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ios-seg::-webkit-scrollbar{display:none}
.ios-seg>button{border:0;background:none;padding:7px 16px;font-size:14px;font-weight:500;border-radius:8px;color:var(--ios-texto);cursor:pointer;white-space:nowrap;transition:background .2s,box-shadow .2s}
.ios-seg>button.on{background:var(--ios-pilula);font-weight:600;box-shadow:0 1px 3px rgba(12,44,70,.12),0 3px 8px rgba(12,44,70,.06)}
/* celular: o segmentado quebra em linhas em vez de rolar para o lado (padrao do Atendimento) */
@media (max-width:820px){.ios-seg{display:flex;flex-wrap:wrap;overflow:visible;gap:2px}.ios-seg>button{flex:1 1 auto;padding:8px 12px;min-height:36px}}

/* ---------- Lista agrupada ---------- */
.ios-grupo-tit{font-size:13px;text-transform:uppercase;letter-spacing:.3px;color:var(--ios-sec);padding:0 16px 7px;margin-top:22px}
.ios-grupo{background:var(--ios-card);border-radius:var(--ios-raio);overflow:hidden;box-shadow:var(--ios-sombra)}
.ios-grupo-rod{font-size:13px;color:var(--ios-sec);padding:7px 16px 0}
.ios-linha{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:11px 16px;border:0;background:none;text-align:left;color:inherit;position:relative;cursor:pointer;transition:background .15s}
.ios-linha:hover{background:var(--ios-preench)}
.ios-linha:active{background:var(--ios-sep)}
.ios-linha+.ios-linha::before{content:"";position:absolute;top:0;right:0;left:var(--ios-recuo,16px);height:1px;background:var(--ios-sep)}
.ios-linha .t{font-size:17px}
.ios-linha .d{font-size:14px;color:var(--ios-sec)}
.ios-linha .v{font-size:15px;color:var(--ios-sec);white-space:nowrap}
.ios-linha .txt{flex:1;min-width:0}
.ios-linha:disabled{cursor:default;opacity:.55}
.ios-linha:disabled:hover{background:none}
.ios-chev{width:9px;height:15px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%239AA9B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 6 6-6 6'/%3E%3C/svg%3E") no-repeat center}

/* icone em quadradinho (estilo Ajustes) */
.ios-ic{width:29px;height:29px;border-radius:7px;flex:none;display:grid;place-items:center;color:#fff;background:var(--azul);font-size:13px;font-weight:700}
.ios-ic svg{width:17px;height:17px}
.ios-ic.c2{background:var(--medio)}.ios-ic.c3{background:var(--kicker)}.ios-ic.c4{background:#5F8DB3}.ios-ic.c5{background:var(--profundo)}
html[data-tema="escuro"] .ios-ic{background:#2E6A99}
html[data-tema="escuro"] .ios-ic.c2{background:#3D7099}html[data-tema="escuro"] .ios-ic.c3{background:#5F8DB3}html[data-tema="escuro"] .ios-ic.c5{background:#245A85}

/* ---------- Selos ---------- */
.ios-selo{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--ios-preench);color:var(--ios-tint-txt);letter-spacing:0;text-transform:none}
.ios-selo.ok{background:color-mix(in srgb,var(--ios-ok) 15%,transparent);color:var(--ios-ok)}
.ios-selo.atn{background:color-mix(in srgb,var(--ios-atn) 18%,transparent);color:var(--ios-atn)}
.ios-selo.erro{background:color-mix(in srgb,var(--ios-erro) 15%,transparent);color:var(--ios-erro)}

/* ---------- Botoes ---------- */
.ios-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:9px 18px;font-size:15px;font-weight:600;cursor:pointer;background:var(--ios-tint);color:var(--ios-sobre-tint);transition:transform .1s,opacity .2s}
.ios-btn:active{transform:scale(.97);opacity:.85}
.ios-btn:disabled{background:var(--ios-preench);color:var(--ios-ter);cursor:not-allowed;transform:none}
.ios-btn.cinza{background:var(--ios-preench);color:var(--ios-tint-txt)}
.ios-btn.texto{background:none;color:var(--ios-tint-txt);padding:9px 10px;font-weight:400}
.ios-btn.grande{width:100%;border-radius:14px;padding:15px;font-size:17px}

/* ---------- Campos de formulario ---------- */
.ios-form label{display:block;font-size:13px;font-weight:600;color:var(--ios-sec);margin:0 0 6px 4px}
.ios-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.ios-form select,.ios-form textarea{
  width:100%;border:0;border-radius:12px;background:var(--ios-card);box-shadow:inset 0 0 0 1px var(--ios-sep);
  padding:12px 14px;font-size:16px;color:var(--ios-texto);outline:none;transition:box-shadow .15s}
.ios-form input:focus,.ios-form select:focus,.ios-form textarea:focus{box-shadow:inset 0 0 0 2px var(--kicker)}
.ios-form select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background:var(--ios-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239AA9B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}

/* ---------- Folha que sobe de baixo: .ios-veu (fundo) + .ios-folha; ambos ganham .on ---------- */
.ios-veu{position:fixed;inset:0;background:rgba(7,30,49,.4);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.ios-veu.on{opacity:1;pointer-events:auto}
.ios-folha{width:min(640px,100%);max-height:92vh;overflow:auto;background:var(--ios-fundo);border-radius:14px 14px 0 0;
  transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1);box-shadow:0 -10px 40px rgba(7,30,49,.25)}
.ios-veu.on .ios-folha{transform:none}
.ios-folha::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--ios-ter);opacity:.5;margin:7px auto 0}
@media (min-width:821px){
  .ios-veu{align-items:center;padding:24px}
  .ios-folha{border-radius:18px;transform:translateY(40px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .25s}
  .ios-veu.on .ios-folha{opacity:1}
  .ios-folha::before{display:none}
}

/* ---------- Barra superior translucida ---------- */
.ios-barra{position:sticky;top:0;z-index:5;background:var(--ios-vidro);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--ios-sep)}

@media (prefers-reduced-motion:reduce){.ios-veu,.ios-folha,.ios-linha,.ios-seg>button,.ios-btn{transition:none}}

/* Sem desfoque (vidro fosco) em nenhuma tela: pesava a rolagem em PCs mais simples (Robson, 29/10/2026).
   As barras usam --ios-vidro quase opaco, com o mesmo visual. */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}