/* ============================================================
   style.css — Estilos globais do sistema DISP (Pole Alimentos)
   Tema controlado via CSS variables (aplicadas por preferencias.js)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ─────────────────────────────────────────────────────────────
   1. VARIÁVEIS GLOBAIS — TEMA CLARO (padrão)
───────────────────────────────────────────────────────────── */

:root {
    /* Acento (muda conforme cor_destaque) */
    --cor:          #e98b07;
    --cor-hover:    #c47602;
    --cor-light:    rgba(233,139,7,.12);
    --cor-shadow:   rgba(233,139,7,.35);

    /* Backgrounds */
    --bg-body:      #eeeeee;
    --bg-card:      #ffffff;
    --bg-input:     #fafafa;
    --bg-subtle:    #f8f9fa;
    --bg-navbar:    #ffffff;

    /* Textos */
    --txt-base:     #212529;
    --txt-suave:    #6b7280;
    --txt-fraco:    #9ca3af;

    /* Bordas */
    --borda:        #e5e7eb;
    --borda-forte:  #dee2e6;

    /* Sombras */
    --sombra-sm:    0 1px 3px rgba(0,0,0,.07);
    --sombra-md:    0 4px 12px rgba(0,0,0,.10);
    --sombra-lg:    0 10px 30px rgba(0,0,0,.15);

    /* Tipografia */
    --fonte:        'Quicksand', sans-serif;
    --fonte-sz:     1rem;     /* base: 16px */

    /* Densidade */
    --pad-card:     20px;
    --pad-cell:     .75rem 1rem;

    /* Legados (mantidos para compatibilidade) */
    --branco:       #ffffff;
    --gelo:         #f1f1f1;
    --laranja:      #e98b07;
}

/* ── Paletas de acento ───────────────────────────────────────── */

:root[data-cor="azul"] {
    --cor:        #2563eb;
    --cor-hover:  #1d4ed8;
    --cor-light:  rgba(37,99,235,.12);
    --cor-shadow: rgba(37,99,235,.35);
    --laranja:    #2563eb;
}

:root[data-cor="verde"] {
    --cor:        #16a34a;
    --cor-hover:  #15803d;
    --cor-light:  rgba(22,163,74,.12);
    --cor-shadow: rgba(22,163,74,.35);
    --laranja:    #16a34a;
}

:root[data-cor="roxo"] {
    --cor:        #7c3aed;
    --cor-hover:  #6d28d9;
    --cor-light:  rgba(124,58,237,.12);
    --cor-shadow: rgba(124,58,237,.35);
    --laranja:    #7c3aed;
}

:root[data-cor="vermelho"] {
    --cor:        #dc2626;
    --cor-hover:  #b91c1c;
    --cor-light:  rgba(220,38,38,.12);
    --cor-shadow: rgba(220,38,38,.35);
    --laranja:    #dc2626;
}

/* ── Tema escuro ─────────────────────────────────────────────── */

:root[data-tema="escuro"] {
    --bg-body:      #0f172a;
    --bg-card:      #1e293b;
    --bg-input:     #1e293b;
    --bg-subtle:    #273548;
    --bg-navbar:    #1e293b;

    --txt-base:     #f1f5f9;
    --txt-suave:    #94a3b8;
    --txt-fraco:    #64748b;

    --borda:        #334155;
    --borda-forte:  #475569;

    --sombra-sm:    0 1px 3px rgba(0,0,0,.3);
    --sombra-md:    0 4px 12px rgba(0,0,0,.4);
    --sombra-lg:    0 10px 30px rgba(0,0,0,.5);

    --branco:       #1e293b;
    --gelo:         #273548;
}

/* ── Tamanho de fonte ────────────────────────────────────────── */

:root[data-fonte="pequena"] { --fonte-sz: .875rem; }
:root[data-fonte="grande"]  { --fonte-sz: 1.0625rem; }

/* ── Densidade ───────────────────────────────────────────────── */

:root[data-densidade="compacta"] {
    --pad-card: 12px;
    --pad-cell: .45rem .75rem;
}
:root[data-densidade="espaçada"] {
    --pad-card: 28px;
    --pad-cell: 1rem 1.25rem;
}

/* ── Fontes alternativas ─────────────────────────────────────── */

:root[data-fonte-familia="inter"]   { --fonte: 'Inter', sans-serif; }
:root[data-fonte-familia="roboto"]  { --fonte: 'Roboto', sans-serif; }
:root[data-fonte-familia="sistema"] { --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #dad8d4b4;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* ── CONTAINER PRINCIPAL ── */
    .split-container {
      display: flex;
      width: 92%;
      max-width: 980px;
      min-height: 560px;
      border-radius: 20px;
      box-shadow: 0 32px 80px rgba(0,0,0,.35);
      animation: fadeUp .5s ease both;
    }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ── PAINEL ESQUERDO ── */
    .panel-left {
      width: 45%;
      background: #da8002;
      border-radius: 20px 0 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 40px 36px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .circle {
      position: absolute;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.15);
      animation: pulse 6s ease-in-out infinite;
      pointer-events: none;
    }
    .circle-1 { width:300px; height:300px; bottom:-110px; right:-110px; }
    .circle-2 { width:190px; height:190px; bottom:-45px;  right:-45px;  animation-delay:.8s;  border-color:rgba(255,255,255,.22); }
    .circle-3 { width: 95px; height: 95px; bottom: 35px;  right: 35px;  animation-delay:1.6s; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.38); }
    .circle-4 { width:130px; height:130px; top:-45px;     left:-45px;   animation-delay:2.4s; border-color:rgba(255,255,255,.1); }
    @keyframes pulse {
      0%,100% { transform:scale(1);    opacity:.7; }
      50%      { transform:scale(1.06); opacity:1;  }
    }

    .brand { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
    .brand-icon {
      width:44px; height:44px; border-radius:12px;
      background:rgba(255,255,255,.65); border:1.5px solid rgba(255,255,255,.32);
      display:flex; align-items:center; justify-content:center;
      font-size:20px; font-weight:800; color:#fff; flex-shrink:0;
    }
    .brand-text strong { display:block; font-size:18px; font-weight:700; color:#fff; letter-spacing:.03em; }
    .brand-text small  { font-size:11px; color:rgba(255,255,255,.45); }

    .panel-left-body { position:relative; z-index:1; }
    .panel-left-body h2 { font-size:26px; font-weight:700; color:#fff; line-height:1.35; margin-bottom:12px; }
    .panel-left-body h2 span { color:rgba(255,255,255,.65); }
    .panel-left-body p  { font-size:13px; color:rgba(255,255,255,.5); line-height:1.7; max-width:220px; }

    .status-chip {
      display:inline-flex; align-items:center; gap:7px;
      background:rgba(22,163,74,.18); border:1px solid rgba(22,163,74,.4);
      border-radius:20px; padding:5px 12px; margin-top:22px;
    }
    .status-dot {
      width:7px; height:7px; border-radius:50%; background:#22c55e;
      box-shadow:0 0 0 2px rgba(34,197,94,.25);
      animation:blink 2s ease-in-out infinite;
    }
    @keyframes blink {
      0%,100% { box-shadow:0 0 0 2px rgba(34,197,94,.25); }
      50%      { box-shadow:0 0 0 4px rgba(34,197,94,.15); }
    }
    .status-chip span { font-size:11px; font-weight:600; color:#4ade80; }
    .panel-left-footer { position:relative; z-index:1; font-size:10px; color:rgba(255,255,255,.28); }

    /* ── PAINEL DIREITO (slide) ── */
    .panel-right {
      width: 55%;
      background: #fff;
      border-radius: 0 20px 20px 0;
      overflow: hidden;
      position: relative;
    }

    /* Trilho de slides */
    .slides-track {
      display: flex;
      transition: transform .55s cubic-bezier(.4,0,.2,1);
      will-change: transform;       /* força compositing layer → renderiza ambos os slides */
      transform: translateZ(0);     /* promove ao GPU imediatamente */
    }

    /* Cada slide ocupa exatamente o painel */
    .slide {
      min-width: 100%;
      flex: 0 0 100%;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px 52px;
      backface-visibility: hidden;  /* evita flickering de ícones em transform */
    }
    .slide-recovery { justify-content: flex-start; padding-top: 52px; background: #fff; }

    /* ── FORMULÁRIO ── */
    .form-header { margin-bottom:28px; }
    .form-header h3 { font-size:22px; font-weight:700; color:#111827; margin-bottom:6px; }
    .form-header p  { font-size:13px; color:#6b7280; }

    .field { margin-bottom:16px; }
    .field label {
      display:flex; align-items:center; gap:5px;
      font-size:12px; font-weight:600; color:#374151; margin-bottom:6px;
    }
    .field label .lbl-icon { font-size:14px; color:#9ca3af; }
    .field-wrap { position:relative; }
    .field input {
      width:100%; height:44px;
      border:1.5px solid #e5e7eb; border-radius:10px;
      padding:0 44px 0 14px; font-size:14px; color:#111827;
      background:#fafafa; outline:none;
      transition:border-color .2s,background .2s,box-shadow .2s;
    }
    .field input:focus {
      border-color:#eb9012; background:#fff;
      box-shadow:0 0 0 3px rgba(235,144,18,.12);
    }
    .field input::placeholder { color:#d1d5db; }
    .field-action {
      position:absolute; right:12px; top:50%;
      transform:translateY(-50%);
      display:flex; align-items:center; gap:6px;
    }
    .toggle-password, .info-password, .info-user {
      font-size:16px; color:#9ca3af; cursor:pointer;
      transition:color .15s; background:none; border:none; padding:0; line-height:1;
    }
    .toggle-password:hover, .info-password:hover, .info-user:hover { color:#eb9012; }

    .btn-login {
      width:100%; height:46px; background:#eb9012; border:none;
      border-radius:10px; color:#fff; font-size:15px; font-weight:700;
      cursor:pointer; transition:background .2s,transform .1s,box-shadow .2s;
      box-shadow:0 4px 14px rgba(235,144,18,.35); margin-bottom:16px;
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .btn-login:hover  { background:var(--cor-hover); box-shadow:0 6px 20px rgba(235,144,18,.45); }
    .btn-login:active { transform:scale(.98); }

    .divider { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .divider-line { flex:1; height:1px; background:#f3f4f6; }
    .divider span  { font-size:11px; font-weight:600; color:#d1d5db; letter-spacing:.05em; }

    .btn-microsoft {
      width:100%; height:44px; background:#fff;
      border:1.5px solid #e5e7eb; border-radius:10px;
      display:flex; align-items:center; justify-content:center; gap:10px;
      font-size:14px; font-weight:600; color:#374151; cursor:pointer;
      transition:border-color .2s,background .2s,box-shadow .2s;
    }
    .btn-microsoft:hover { border-color:#93c5fd; background:#f0f7ff; box-shadow:0 2px 8px rgba(59,130,246,.1); }
    .ms-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; width:16px; height:16px; }
    .ms-grid span { display:block; }
    .ms-grid span:nth-child(1) { background:#f25022; }
    .ms-grid span:nth-child(2) { background:#7fba00; }
    .ms-grid span:nth-child(3) { background:#00a4ef; }
    .ms-grid span:nth-child(4) { background:#ffb900; }

    .link-btn {
      background:none; border:none; font-size:12px;
      color:#9ca3af; cursor:pointer; padding:0;
      display:inline-flex; align-items:center; gap:5px;
      transition:color .15s;
    }
    .link-btn:hover { color:#eb9012; }

    /* Verso */
    .back-icon {
      width:48px; height:48px; border-radius:14px;
      background:#fff7ed; border:1.5px solid #fed7aa;
      display:flex; align-items:center; justify-content:center;
      font-size:22px; color:#ea580c; margin-bottom:16px;
    }
    #resultadoCPF { font-size:13px; color:#6b7280; margin-top:8px; }

    .footer-text { text-align:center; margin-top:24px; font-size:10px; color:#d1d5db; }

    /* -- MODO ESCURO -- */
    [data-tema="escuro"] body {
      background: #0f172a;
    }

    [data-tema="escuro"] .panel-right {
      background: #1e293b;
    }

    [data-tema="escuro"] .slide,
    [data-tema="escuro"] .slide-recovery {
      background: #1e293b;
    }

    [data-tema="escuro"] .form-header h3 {
      color: #f1f5f9;
    }

    [data-tema="escuro"] .form-header p {
      color: #94a3b8;
    }

    [data-tema="escuro"] .field label {
      color: #cbd5e1;
    }

    [data-tema="escuro"] .field label .lbl-icon {
      color: #64748b;
    }

    [data-tema="escuro"] .field input {
      background: #273548;
      border-color: #334155;
      color: #f1f5f9;
    }

    [data-tema="escuro"] .field input:focus {
      background: #1e293b;
      border-color: #eb9012;
    }

    [data-tema="escuro"] .field input::placeholder {
      color: #475569;
    }

    [data-tema="escuro"] .divider-line {
      background: #334155;
    }

    [data-tema="escuro"] .divider span {
      color: #475569;
    }

    [data-tema="escuro"] .btn-microsoft {
      background: #273548;
      border-color: #334155;
      color: #cbd5e1;
    }

    [data-tema="escuro"] .btn-microsoft:hover {
      background: #1e293b;
      border-color: #60a5fa;
    }

    [data-tema="escuro"] .link-btn {
      color: #64748b;
    }

    [data-tema="escuro"] .link-btn:hover {
      color: #eb9012;
    }

    [data-tema="escuro"] .back-icon {
      background: #273548;
      border-color: #334155;
    }

    [data-tema="escuro"] #resultadoCPF {
      color: #94a3b8;
    }

    [data-tema="escuro"] .footer-text {
      color: #475569;
    }

    [data-tema="escuro"] .toggle-password,
    [data-tema="escuro"] .info-password,
    [data-tema="escuro"] .info-user {
      color: #64748b;
    }

    /* -- RESPONSIVO -- */
    @media (max-width: 700px) {
      body { align-items: flex-start; background: #fff; }

      .split-container {
        flex-direction: column;
        width: 100%;
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
      }

      /* Painel laranja vira barra compacta no topo */
      .panel-left {
        width: 100%;
        border-radius: 0;
        padding: 20px 24px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
      }
      .panel-left-body,
      .panel-left-footer { display: none; }
      .circle-1, .circle-2, .circle-3, .circle-4 { opacity: .4; }

      /* Painel direito toma o resto */
      .panel-right {
        width: 100%;
        border-radius: 0;
        flex: 1;
      }

      .slide {
        padding: 32px 24px 40px;
        min-height: unset;
        height: 100%;
      }
      .slide-recovery { padding-top: 32px; }
    }
/* ─── Seletor de ambiente na tela de login ────────────────────── */
.ambiente-seletor {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 0 0 18px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
}
.ambiente-seletor .amb-opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.ambiente-seletor .amb-opt:hover {
  color: #374151;
}
/* Opção ativa = ambiente desta instância */
.ambiente-seletor .amb-opt.ativo {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  cursor: default;
}
.ambiente-seletor .amb-opt[data-amb="prd"].ativo { color: #16a34a; }
.ambiente-seletor .amb-opt[data-amb="hml"].ativo { color: #d97706; }