/* ============================================================
   KONECTA SMART DRAWER
   TEMA OSCURO
   SOLO COLORES - NO GEOMETRIA
   ============================================================ */


/* DRAWER COMPLETO */

html[data-kc-theme="system-dark"]
.kc-smart-drawer{

  background:#061426 !important;
  background-color:#061426 !important;
  background-image:none !important;

  color:#F5FAFF !important;

  border-color:
    rgba(50,214,245,.14) !important;

  box-shadow:
    -14px 0 34px rgba(0,0,0,.25) !important;
}


/* ============================================================
   CABECERA
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer-head{

  background:#07182C !important;
  background-color:#07182C !important;
  background-image:none !important;

  border-color:
    rgba(50,214,245,.12) !important;
}


html[data-kc-theme="system-dark"]
.kc-smart-drawer-head h1,

html[data-kc-theme="system-dark"]
.kc-smart-drawer-head h2,

html[data-kc-theme="system-dark"]
.kc-smart-drawer-head h3{

  color:#F5FAFF !important;
}


html[data-kc-theme="system-dark"]
.kc-smart-drawer-head p{

  color:#9CB0C5 !important;
}


/* ============================================================
   CUERPO GENERAL
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer-body,

html[data-kc-theme="system-dark"]
#kcSmartBody{

  background:#061426 !important;
  background-color:#061426 !important;
  background-image:none !important;

  color:#F5FAFF !important;
}


/* ============================================================
   TARJETA PRINCIPAL / DEMO
   ============================================================ */

html[data-kc-theme="system-dark"]
#kcSmartBody .kc-smart-drawer-live,

html[data-kc-theme="system-dark"]
#kcSmartBody .kc-drawer-context-compact{

  background:#0A1F38 !important;
  background-color:#0A1F38 !important;
  background-image:none !important;

  border:
    1px solid rgba(50,214,245,.14) !important;

  box-shadow:none !important;

  color:#F5FAFF !important;
}


/* TEXTOS TARJETA */

html[data-kc-theme="system-dark"]
.kc-smart-drawer-live-copy small{

  color:#32D6F5 !important;
}


html[data-kc-theme="system-dark"]
.kc-smart-drawer-live-copy strong{

  color:#F5FAFF !important;
}


html[data-kc-theme="system-dark"]
.kc-smart-drawer-live-copy p{

  color:#9CB0C5 !important;
}


/* ============================================================
   CAMPOS / INPUTS
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer input,

html[data-kc-theme="system-dark"]
.kc-smart-drawer select,

html[data-kc-theme="system-dark"]
.kc-smart-drawer textarea{

  background:#07182C !important;
  background-color:#07182C !important;

  color:#F5FAFF !important;

  border:
    1px solid rgba(50,214,245,.16) !important;

  box-shadow:none !important;
}


html[data-kc-theme="system-dark"]
.kc-smart-drawer input::placeholder,

html[data-kc-theme="system-dark"]
.kc-smart-drawer textarea::placeholder{

  color:#718AA3 !important;
}


/* ============================================================
   BLOQUES INTERNOS / OPCIONES
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer fieldset,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="field"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="amount"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="estimate"]{

  border-color:
    rgba(50,214,245,.10) !important;
}


/* ============================================================
   BOTONES SECUNDARIOS
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer button:not([class*="primary"]):not([class*="continue"]){

  background:#0D2947 !important;
  background-color:#0D2947 !important;

  color:#D6E5F3 !important;

  border-color:
    rgba(50,214,245,.12) !important;

  box-shadow:none !important;
}


/* ============================================================
   BOTON PRINCIPAL
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="primary"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="continue"]{

  background:#0099EC !important;
  background-color:#0099EC !important;

  color:#FFFFFF !important;

  border-color:#0099EC !important;

  box-shadow:none !important;
}


/* ============================================================
   SOPORTE / FRANJA INFERIOR
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="support"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="help"]{

  background:#07182C !important;
  background-color:#07182C !important;

  color:#9CB0C5 !important;

  border-color:
    rgba(50,214,245,.10) !important;
}


/* ============================================================
   TITULOS Y LABELS GENERALES
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer label,

html[data-kc-theme="system-dark"]
.kc-smart-drawer strong,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h1,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h2,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h3{

  color:#F5FAFF !important;
}


html[data-kc-theme="system-dark"]
.kc-smart-drawer p,

html[data-kc-theme="system-dark"]
.kc-smart-drawer small{

  color:#9CB0C5 !important;
}


/* ============================================================
   FIN
   ============================================================ */

/* ============================================================
   SMART DRAWER DARK
   CORREGIR TEXTOS NEGROS
   SOLO TEXTO - NO FONDOS / NO GEOMETRIA
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer h1,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h2,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h3,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h4,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h5,

html[data-kc-theme="system-dark"]
.kc-smart-drawer h6,

html[data-kc-theme="system-dark"]
.kc-smart-drawer label,

html[data-kc-theme="system-dark"]
.kc-smart-drawer legend,

html[data-kc-theme="system-dark"]
.kc-smart-drawer strong,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="title"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="label"]{

  color:#F5FAFF !important;
}


/* texto secundario */

html[data-kc-theme="system-dark"]
.kc-smart-drawer p,

html[data-kc-theme="system-dark"]
.kc-smart-drawer small,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="hint"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="note"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="description"]{

  color:#9CB0C5 !important;
}


/* valores / cifras */

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="value"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="price"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="total"]{

  color:#FFFFFF !important;
}


/* ============================================================
   FIN TEXT FIX
   ============================================================ */

/* ============================================================
   SMART DRAWER DARK
   UNIFICAR AZULES CON LAS TARJETAS DE LA IZQUIERDA
   AZUL BASE = #1C2E7F
   ============================================================ */

html[data-kc-theme="system-dark"]{
  --kc-unified-blue:#1C2E7F;
  --kc-unified-blue-border:rgba(50,214,245,.18);
  --kc-unified-blue-text:#F5FAFF;
  --kc-unified-accent:#32D6F5;
}


/* ============================================================
   BOTON PRINCIPAL
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="primary"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="continue"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer .btn-primary,

html[data-kc-theme="system-dark"]
.kc-smart-drawer .primary{

  background:var(--kc-unified-blue) !important;
  background-color:var(--kc-unified-blue) !important;
  background-image:none !important;

  color:var(--kc-unified-blue-text) !important;

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

  box-shadow:none !important;
}

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="primary"]:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="continue"]:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer .btn-primary:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer .primary:hover{

  border-color:var(--kc-unified-accent) !important;
}


/* ============================================================
   BOTONES RAPIDOS / MONTOS
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="quick"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="amount"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="preset"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="amount"] button,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="preset"] button{

  background:var(--kc-unified-blue) !important;
  background-color:var(--kc-unified-blue) !important;
  background-image:none !important;

  color:#F5FAFF !important;

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

  box-shadow:none !important;
}

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="quick"]:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="amount"]:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer button[class*="preset"]:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="amount"] button:hover,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="preset"] button:hover{

  border-color:var(--kc-unified-accent) !important;
}


/* ============================================================
   CHIPS / PILLS / TAGS AZULES
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="chip"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="pill"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="tag"],

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="badge"]{

  background:var(--kc-unified-blue) !important;
  background-color:var(--kc-unified-blue) !important;
  background-image:none !important;

  color:#F5FAFF !important;

  border-color:var(--kc-unified-blue-border) !important;
}


/* ============================================================
   BOTONES PEQUENOS SECUNDARIOS DEL PANEL
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer button:not([class*="primary"]):not([class*="continue"]):not(.kc-smart-close){

  background:var(--kc-unified-blue) !important;
  background-color:var(--kc-unified-blue) !important;
  background-image:none !important;

  color:#EAF4FF !important;

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

  box-shadow:none !important;
}

html[data-kc-theme="system-dark"]
.kc-smart-drawer button:not([class*="primary"]):not([class*="continue"]):not(.kc-smart-close):hover{

  border-color:var(--kc-unified-accent) !important;
}


/* ============================================================
   LINKS / ACENTOS AZULES DENTRO DEL DRAWER
   ============================================================ */

html[data-kc-theme="system-dark"]
.kc-smart-drawer a,

html[data-kc-theme="system-dark"]
.kc-smart-drawer [class*="link"]{

  color:var(--kc-unified-accent) !important;
}


/* ============================================================
   FIN
   ============================================================ */