/* =====================================================
   CONECTA AI ENTERPRISE
   DESIGN SYSTEM FUTURISTA
   Versao 1.0 - Homologacao
   ===================================================== */

:root {
  --ce-bg: #090b10;
  --ce-panel: #11151d;
  --ce-panel-alt: #171c26;

  --ce-orange: #ff914d;
  --ce-orange-light: #ffb078;
  --ce-orange-dark: #392317;

  --ce-border: #603b2b;

  --ce-text: #f4f5f7;
  --ce-muted: #a3adbd;

  --ce-green: #35d399;
  --ce-red: #ff6474;
  --ce-blue: #67b7ff;
  --ce-yellow: #ffd166;

  --ce-radius: 14px;
  --ce-speed: 0.22s;
}

/* =====================================================
   BASE VISUAL
   ===================================================== */

body.ce-futurista {
  background: var(--ce-bg);
  color: var(--ce-text);
  font-family: Inter, Arial, sans-serif;
}

.ce-futurista *,
.ce-futurista *::before,
.ce-futurista *::after {
  box-sizing: border-box;
}

/* =====================================================
   PAINEIS
   ===================================================== */

.ce-futurista .ce-panel,
.ce-futurista .oc-panel {
  background: var(--ce-panel);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius);

  box-shadow:
    0 0 16px rgba(255,145,77,0.08);

  transition:
    border-color var(--ce-speed) ease,
    box-shadow var(--ce-speed) ease;
}

.ce-futurista .ce-panel:hover,
.ce-futurista .oc-panel:hover {
  border-color: rgba(255,145,77,0.65);

  box-shadow:
    0 0 22px rgba(255,145,77,0.13);
}

/* =====================================================
   TITULOS
   ===================================================== */

.ce-futurista .ce-heading,
.ce-futurista .oc-title {
  color: var(--ce-orange);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ce-futurista .ce-muted,
.ce-futurista .oc-muted {
  color: var(--ce-muted);
}

/* =====================================================
   BOTOES - PADRAO FUTURISTA
   ===================================================== */

.ce-futurista .ce-button,
.ce-futurista .oc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 11px 17px;

  border: 1px solid var(--ce-orange);
  border-radius: 10px;

  background: #231811;
  color: var(--ce-text);

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;

  cursor: pointer;

  transition:
    transform var(--ce-speed) ease,
    box-shadow var(--ce-speed) ease,
    background-color var(--ce-speed) ease,
    border-color var(--ce-speed) ease;
}

/* SALTAR E DESTACAR */

@media (hover: hover) and (pointer: fine) {
  .ce-futurista .ce-button:hover:not(:disabled),
  .ce-futurista .oc-button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.055);

    background: var(--ce-orange-dark);
    border-color: var(--ce-orange-light);

    box-shadow:
      0 0 12px rgba(255,145,77,0.45),
      0 0 24px rgba(255,145,77,0.20);
  }
}

/* EFEITO AO CLICAR */

.ce-futurista .ce-button:active:not(:disabled),
.ce-futurista .oc-button:active:not(:disabled) {
  transform: scale(0.97);
}

/* =====================================================
   BOTOES DE ACAO
   ===================================================== */

/* ATENDER */

.ce-futurista .ce-button--success {
  border-color: var(--ce-green);
  background: #102a21;
  color: #b5ffe1;
}

@media (hover: hover) and (pointer: fine) {
  .ce-futurista .ce-button--success:hover:not(:disabled) {
    background: #174333;
    border-color: var(--ce-green);

    box-shadow:
      0 0 15px rgba(53,211,153,0.50),
      0 0 30px rgba(53,211,153,0.20);
  }
}

/* DESLIGAR */

.ce-futurista .ce-button--danger {
  border-color: var(--ce-red);
  background: #30161d;
  color: #ffd0d6;
}

@media (hover: hover) and (pointer: fine) {
  .ce-futurista .ce-button--danger:hover:not(:disabled) {
    background: #481e29;
    border-color: var(--ce-red);

    box-shadow:
      0 0 15px rgba(255,100,116,0.50),
      0 0 30px rgba(255,100,116,0.20);
  }
}

/* INFORMACOES */

.ce-futurista .ce-button--info {
  border-color: var(--ce-blue);
  background: #142639;
  color: #d5ebff;
}

@media (hover: hover) and (pointer: fine) {
  .ce-futurista .ce-button--info:hover:not(:disabled) {
    background: #1b3854;
    border-color: var(--ce-blue);

    box-shadow:
      0 0 18px rgba(103,183,255,0.40);
  }
}

/* ALERTA / SOS */

.ce-futurista .ce-button--warning {
  border-color: var(--ce-yellow);
  background: #302713;
  color: #ffe8a4;
}

@media (hover: hover) and (pointer: fine) {
  .ce-futurista .ce-button--warning:hover:not(:disabled) {
    background: #493a18;
    border-color: var(--ce-yellow);

    box-shadow:
      0 0 18px rgba(255,209,102,0.45);
  }
}

/* =====================================================
   BOTOES DESABILITADOS
   ===================================================== */

.ce-futurista .ce-button:disabled,
.ce-futurista .oc-button:disabled {
  opacity: 0.40;
  cursor: not-allowed;

  transform: none;
  box-shadow: none;
}

/* =====================================================
   FORMULARIOS
   ===================================================== */

.ce-futurista input,
.ce-futurista select,
.ce-futurista textarea {
  background: var(--ce-panel-alt);
  color: var(--ce-text);

  border: 1px solid var(--ce-border);
  border-radius: 8px;

  padding: 10px;
}

.ce-futurista input:focus,
.ce-futurista select:focus,
.ce-futurista textarea:focus {
  border-color: var(--ce-orange);
  outline: none;

  box-shadow:
    0 0 10px rgba(255,145,77,0.18);
}

/* =====================================================
   INDICADORES
   ===================================================== */

.ce-futurista .ce-status-online {
  color: var(--ce-green);
}

.ce-futurista .ce-status-offline {
  color: var(--ce-red);
}

.ce-futurista .ce-status-warning {
  color: var(--ce-yellow);
}

/* =====================================================
   ACESSIBILIDADE
   ===================================================== */

.ce-futurista :focus-visible {
  outline: 2px solid var(--ce-orange-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ce-futurista *,
  .ce-futurista *::before,
  .ce-futurista *::after {
    animation: none !important;
    transition: none !important;
  }

  .ce-futurista .ce-button:hover,
  .ce-futurista .oc-button:hover,
  .ce-futurista .ce-button:active,
  .ce-futurista .oc-button:active {
    transform: none !important;
  }
}

/* =====================================================
   RESPONSIVIDADE
   ===================================================== */

@media (max-width: 650px) {
  .ce-futurista .ce-button,
  .ce-futurista .oc-button {
    min-height: 44px;
    padding: 11px 13px;
  }
}


/* CONECTA FUTURISTA - LAYOUT 3 COLUNAS V1 */

body.ce-futurista.agent-premium {
  background: #090b10;
  color: #f4f5f7;
}

body.ce-futurista.agent-premium .oc-layout {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.95fr)
    minmax(420px, 1.7fr)
    minmax(280px, 0.95fr);
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: none;
}

body.ce-futurista.agent-premium .oc-panel {
  min-width: 0;
  padding: 20px;
  background: #11151d;
  border: 1px solid #603b2b;
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(255,145,77,.10);
}

body.ce-futurista.agent-premium .oc-card {
  background: #171c26;
  border: 1px solid #493327;
  border-radius: 12px;
  padding: 15px;
  margin-top: 15px;
}

body.ce-futurista.agent-premium .oc-title {
  color: #ff914d;
  text-transform: uppercase;
  letter-spacing: .055em;
}

body.ce-futurista.agent-premium .oc-channel {
  border: 1px solid #603b2b;
  border-radius: 8px;
  color: #ffb078;
  background: #241a16;
}

body.ce-futurista.agent-premium #g28-softphone {
  border-color: #ff914d;
  box-shadow: 0 0 15px rgba(255,145,77,.12);
}

@media (max-width: 1200px) {
  body.ce-futurista.agent-premium .oc-layout {
    grid-template-columns: minmax(260px,1fr) minmax(360px,1.6fr);
  }

  body.ce-futurista.agent-premium .oc-right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.ce-futurista.agent-premium .oc-layout {
    grid-template-columns: minmax(0,1fr);
  }

  body.ce-futurista.agent-premium .oc-right {
    grid-column: auto;
  }
}


/* CONECTA FUTURISTA - LOGIN DARK NEON V1 */

body:not(.agent-premium) {
    background: #080a0f !important;
    color: #f4f5f7 !important;
}

body:not(.agent-premium) header {
    background: #10141c !important;
    color: #f4f5f7 !important;
    border-bottom: 1px solid #593824 !important;
}

body:not(.agent-premium) main {
    background: #080a0f !important;
}

body:not(.agent-premium) article {
    background: #121720 !important;
    color: #f4f5f7 !important;
    border: 1px solid #754326 !important;
    border-radius: 16px !important;
    box-shadow: 0 0 30px rgba(255, 132, 46, .10) !important;
}

body:not(.agent-premium) input,
body:not(.agent-premium) select,
body:not(.agent-premium) textarea {
    background: #1a202b !important;
    color: #ffffff !important;
    border: 1px solid #63432e !important;
    border-radius: 8px !important;
}

body:not(.agent-premium) input:focus,
body:not(.agent-premium) select:focus {
    outline: 2px solid #ff914d !important;
    border-color: #ff914d !important;
}

body:not(.agent-premium) button {
    background: #ff914d !important;
    color: #101014 !important;
    border: 1px solid #ff914d !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

body:not(.agent-premium) button:hover {
    background: #ffad73 !important;
}

body:not(.agent-premium) p,
body:not(.agent-premium) label,
body:not(.agent-premium) small {
    color: #c4c9d3 !important;
}

body:not(.agent-premium) a {
    color: #ffad73;
}


/* CONECTA LOGIN CARD DARK FIX V2 */

body:not(.agent-premium) main > div,
body:not(.agent-premium) main > section,
body:not(.agent-premium) main > article {
    background-color: #121720 !important;
    color: #f5f6fa !important;
}

body:not(.agent-premium) main h1,
body:not(.agent-premium) main h2,
body:not(.agent-premium) main h3,
body:not(.agent-premium) main strong {
    color: #ffffff !important;
}

body:not(.agent-premium) main label {
    color: #d6dbe5 !important;
}

body:not(.agent-premium) main p,
body:not(.agent-premium) main small {
    color: #aeb8c8 !important;
}


/* CONECTA LOGIN CARD FIX V3 */

body:not(.agent-premium) #app > section.card {
    background: #121720 !important;
    background-color: #121720 !important;
    color: #f5f6fa !important;
    border: 1px solid #754326 !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,.45) !important;
}

body:not(.agent-premium) #app > section.card h1,
body:not(.agent-premium) #app > section.card .brand {
    color: #ffffff !important;
}

body:not(.agent-premium) #app > section.card label {
    color: #d6dbe5 !important;
}

body:not(.agent-premium) #app > section.card p {
    color: #aeb8c8 !important;
}

body:not(.agent-premium) #app > section.card input {
    background: #1a202b !important;
    color: #ffffff !important;
    border: 1px solid #63432e !important;
}

body:not(.agent-premium) #app > section.card button.primary {
    background: #ff914d !important;
    color: #101014 !important;
    border-color: #ff914d !important;
}