:root{
  --ok-orange:#ff7817;
  --ok-orange-dark:#e96300;
  --ok-orange-soft:#fff1e5;

  --leve-blue:#0755df;
  --leve-blue-light:#176df3;
  --leve-blue-dark:#063b9f;
  --leve-blue-soft:#edf4ff;

  --ok-purple:#65477f;

  --navy:#081d3b;
  --navy-2:#102d56;

  --text:#172a46;
  --muted:#6a778a;

  --bg:#f5f7fb;
  --surface:#ffffff;

  --border:#e1e7ef;
  --border-strong:#d4dce8;

  --green:#079b6c;
  --green-bg:#e9f8f2;

  --yellow:#c88400;
  --yellow-bg:#fff5db;

  --red:#cd4050;
  --red-bg:#fff0f2;

  --shadow:0 8px 28px rgba(12,35,68,.08);
  --shadow-hover:0 12px 32px rgba(12,35,68,.12);

  --radius:18px;
  --radius-small:12px;
}


/* BASE */

html.okinn-ui body{
  background:
    radial-gradient(
      circle at 0 0,
      rgba(255,120,23,.075),
      transparent 420px
    ),
    radial-gradient(
      circle at 100% 0,
      rgba(7,85,223,.055),
      transparent 520px
    ),
    var(--bg) !important;

  color:var(--text) !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;
}

html.okinn-ui *{
  box-sizing:border-box;
}

html.okinn-ui h1,
html.okinn-ui h2,
html.okinn-ui h3,
html.okinn-ui h4{
  color:var(--navy) !important;
  letter-spacing:-.025em;
}

html.okinn-ui h1{
  font-weight:800;
}

html.okinn-ui h2,
html.okinn-ui h3{
  font-weight:750;
}

html.okinn-ui .muted,
html.okinn-ui .small,
html.okinn-ui .subtitle{
  color:var(--muted) !important;
}


/* IDENTIDADE */

.okinn-brand{
  display:flex;
  align-items:center;
  gap:16px;

  min-height:72px;
  padding:10px 18px;

  background:#fff;

  border:1px solid var(--border);
  border-radius:16px;

  box-shadow:var(--shadow);
}

.okinn-brand img{
  display:block;

  width:auto;
  height:58px;
  max-width:175px;

  object-fit:contain;
}

.okinn-brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;

  min-width:0;
}

.okinn-brand-copy strong{
  color:var(--navy);
  font-size:16px;
  font-weight:800;
}

.okinn-brand-copy span{
  color:var(--muted);
  font-size:12px;
}

.okinn-brand-accent{
  width:32px;
  height:3px;

  margin-top:5px;

  background:var(--ok-orange);

  border-radius:999px;
}


/* CABECALHO */

html.okinn-ui header,
html.okinn-ui .header,
html.okinn-ui .topbar,
html.okinn-ui .page-header{
  background:rgba(255,255,255,.94) !important;

  border-color:var(--border) !important;

  backdrop-filter:blur(12px);

  box-shadow:
    0 1px 0 rgba(10,31,59,.04);
}


/* CARDS */

html.okinn-ui .card,
html.okinn-ui .panel,
html.okinn-ui .box,
html.okinn-ui .module,
html.okinn-ui .hotel-card,
html.okinn-ui .detail-card,
html.okinn-ui .shortcut-card{
  background:var(--surface) !important;

  border:
    1px solid var(--border) !important;

  border-radius:
    var(--radius) !important;

  box-shadow:var(--shadow);
}

html.okinn-ui .shortcut-card{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

html.okinn-ui .shortcut-card:hover{
  transform:translateY(-2px);

  border-color:
    rgba(7,85,223,.25) !important;

  box-shadow:var(--shadow-hover);
}


/* BOTOES */

html.okinn-ui button,
html.okinn-ui .btn,
html.okinn-ui a.btn,
html.okinn-ui .subnav-btn{
  border-radius:12px !important;

  font-weight:700 !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

html.okinn-ui button:hover,
html.okinn-ui .btn:hover{
  transform:translateY(-1px);
}

html.okinn-ui .btn.primary,
html.okinn-ui .primary,
html.okinn-ui .btn-primary,
html.okinn-ui .okinn-primary{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--leve-blue-light),
      var(--leve-blue)
    ) !important;

  border-color:transparent !important;

  box-shadow:
    0 8px 18px rgba(7,85,223,.20) !important;
}

html.okinn-ui .btn.ghost,
html.okinn-ui .ghost,
html.okinn-ui .btn.soft,
html.okinn-ui .soft,
html.okinn-ui .subnav-btn{
  color:var(--navy-2) !important;

  background:#fff !important;

  border:
    1px solid var(--border-strong) !important;
}

html.okinn-ui .btn.ghost:hover,
html.okinn-ui .ghost:hover,
html.okinn-ui .btn.soft:hover,
html.okinn-ui .soft:hover{
  background:var(--leve-blue-soft) !important;

  border-color:
    rgba(7,85,223,.34) !important;
}


/* BOTAO LARANJA */

html.okinn-ui .okinn-orange{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #ff8b31,
      var(--ok-orange)
    ) !important;

  border-color:transparent !important;
}


/* ABAS */

html.okinn-ui .subnav-btn.active,
html.okinn-ui .tab.active,
html.okinn-ui [aria-selected="true"]{
  color:var(--leve-blue) !important;

  background:var(--leve-blue-soft) !important;

  border-color:
    rgba(7,85,223,.25) !important;

  box-shadow:
    inset 0 -2px 0 var(--leve-blue);
}


/* INPUTS */

html.okinn-ui input,
html.okinn-ui select,
html.okinn-ui textarea{
  color:var(--text) !important;

  background:#fff !important;

  border:
    1px solid var(--border-strong) !important;

  border-radius:12px !important;

  outline:none !important;
}

html.okinn-ui input:focus,
html.okinn-ui select:focus,
html.okinn-ui textarea:focus{
  border-color:var(--leve-blue) !important;

  box-shadow:
    0 0 0 4px rgba(7,85,223,.09) !important;
}


/* BADGES */

html.okinn-ui .badge{
  border-radius:999px !important;

  font-weight:800 !important;

  letter-spacing:.02em;
}

html.okinn-ui .badge.ok,
html.okinn-ui .badge.good,
html.okinn-ui .okinn-online{
  color:var(--green) !important;

  background:var(--green-bg) !important;

  border-color:
    rgba(7,155,108,.15) !important;
}

html.okinn-ui .badge.warn{
  color:var(--yellow) !important;

  background:var(--yellow-bg) !important;

  border-color:
    rgba(200,132,0,.16) !important;
}

html.okinn-ui .badge.bad,
html.okinn-ui .badge.error{
  color:var(--red) !important;

  background:var(--red-bg) !important;

  border-color:
    rgba(205,64,80,.16) !important;
}


/* STATUS */

html.okinn-ui .dot.ok,
html.okinn-ui .dot.online{
  background:var(--green) !important;

  box-shadow:
    0 0 0 4px rgba(7,155,108,.10);
}


/* VIDEO */

html.okinn-ui .viewer,
html.okinn-ui .viewer-frame,
html.okinn-ui .viewer-box,
html.okinn-ui .video-frame,
html.okinn-ui .self-video,
html.okinn-ui .tv-preview,
html.okinn-ui .preview,
html.okinn-ui .screen,
html.okinn-ui .player{
  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #031226,
      #07214a 72%,
      #192b45
    ) !important;

  border:
    1px solid rgba(7,85,223,.13) !important;

  border-radius:18px !important;
}

html.okinn-ui iframe,
html.okinn-ui video{
  border-radius:16px;
}

html.okinn-ui .viewer-placeholder{
  color:#acb9cb !important;

  background:
    linear-gradient(
      145deg,
      #04152d,
      #0a2853
    ) !important;

  border-radius:16px !important;
}


/* SIDEBAR */

html.okinn-ui .sidebar{
  color:#fff !important;

  background:
    linear-gradient(
      180deg,
      #071d3e,
      #092b5b
    ) !important;

  border-color:transparent !important;
}

html.okinn-ui .sidebar h1,
html.okinn-ui .sidebar h2,
html.okinn-ui .sidebar h3,
html.okinn-ui .sidebar strong,
html.okinn-ui .sidebar b{
  color:#fff !important;
}

html.okinn-ui .sidebar .muted,
html.okinn-ui .sidebar p{
  color:#bdc9db !important;
}

html.okinn-ui .sidebar button.active{
  color:#fff !important;

  background:
    rgba(255,255,255,.10) !important;

  box-shadow:
    inset 3px 0 0 var(--ok-orange);
}


/* MODAIS */

html.okinn-ui .modal-card,
html.okinn-ui .modal-content,
html.okinn-ui .dialog{
  color:var(--text) !important;

  background:#fff !important;

  border:
    1px solid var(--border) !important;

  border-radius:20px !important;

  box-shadow:
    0 24px 70px rgba(8,29,59,.20) !important;
}


/* LOGIN */

html.okinn-login body{
  min-height:100vh;

  background:
    linear-gradient(
      120deg,
      #fff 0%,
      #fff 50%,
      #f3f6fb 50%,
      #edf3fc 100%
    ) !important;
}

.okinn-login-header{
  position:fixed;

  top:34px;
  left:42px;

  z-index:20;

  display:flex;
  align-items:center;

  gap:20px;
}

.okinn-login-header img{
  width:auto;
  height:95px;

  object-fit:contain;
}

.okinn-login-copy{
  display:flex;
  flex-direction:column;
}

.okinn-login-copy strong{
  color:var(--navy);

  font-size:22px;
  font-weight:850;
}

.okinn-login-copy span{
  color:var(--muted);

  margin-top:3px;

  font-size:13px;
}


/* WSS PLAYER */

html.okinn-tv-wss body{
  background:var(--bg) !important;
}

html.okinn-tv-wss video{
  background:
    linear-gradient(
      145deg,
      #021024,
      #08234a 70%,
      #422215
    ) !important;
}


/* MOBILE */

@media(max-width:850px){

  .okinn-brand{
    padding:8px 12px;
  }

  .okinn-brand img{
    height:45px;
    max-width:135px;
  }

  .okinn-brand-copy{
    display:none;
  }

  .okinn-login-header{
    position:relative;

    top:auto;
    left:auto;

    justify-content:center;

    padding:22px;
  }

  .okinn-login-header img{
    height:72px;
  }

  .okinn-login-copy{
    display:none;
  }

}