/*
Template Name: Personalización de Estilos HRM
Author: Luis Liberal
Email: luiseliberal.cl@gmail.com
File: default */

/*============================= VARIABLES PRINCIPALES ================================*/
:root {
  /******** PANEL DE COLORES *********/
  /*
  * on : Elemento sobre la superficie o sobre el color
  */

  /*PRIMARY*/
  --primary-color:#f7a400; /*#009da1;*/
  --primary-variant-dark-color: #b76400;/*#007e81;*/
  --primary-variant-light-color: #ffe440;/*#00c4c9;*/

  --on-primary-color: #000000;
  --on-primary-variant-dark-color: #000000;
  --on-primary-variant-light-color: #000000;

  /*SECONDARY*/
  --secondary-color: #5a7ebe;/*#0077bb;*/
  --secondary-variant-dark-color: #1a3e7e;/*#005f96;*/
  --secondary-variant-light-color: #9abefe;/*#0095ea;*/

  --on-secondary-color: #ffffff;
  --on-secondary-variant-dark-color: #ffffff;
  --on-secondary-variant-light-color: #ffffff;

  /*GRADIENTE*/
  --gradiente-color: #f7a400;/*#009da1;*/
 
  /*TOP*/ /*IMPORTANTE: "TOP" ES EL FILTRO PARA OBTENER VARIABLES CSS EN EL EDITOR HRMADM*

  /*ELEMENTS*/
  --background-color: #f1f1f1;
  --surface-color: #ffffff;

  --on-background-color: #000000;
  --on-surface-color: #000000;

  /*ALERTS*/
  --success-color: #32c861;/*#28a745;*/
  --warning-color: #ffa91c; /*#dab601;*/
  --error-color: #E3263E; /*#bd0000;*/

  --on-success-color: #ffffff;
  --on-warning-color: #ffffff;
  --on-error-color: #ffffff;

  /***********************************/
  /***********************************/

  --titlemain-text-color: #000000;
  /********* FONT ********/
  --font-primary: "Raleway", sans-serif;
  /********* HEX *********/
  --side-menu-bg-color: var(--secondary-color);
  --side-menu-text-color: var(--on-secondary-color);
  --top-bar-bg-color: var(--primary-color);
  --top-menu-text-color: var(--on-primary-color);
  --page-title-box-text-color: var(--on-surface-color);
  --body-bg-color: var(--background-color);
  --body-text-color: var(--on-background-color);
  --form-text-label-color: var(--on-surface-color);
  --btn-primary-color: var(--primary-color);
  --btn-primary-text-color: var(--on-primary-color);
  --btn-edit-color: var(--warning-color);
  --btn-edit-text-color: var(--on-warning-color);
  --btn-delete-color: var(--error-color);
  --btn-delete-text-color: var(--on-error-color);
  /********* RGBA *******/
  /** BARRA TITULO **/
  --page-title-box-bg-color-a: var(--surface-color); /*1*/
  --page-title-box-bg-color-b: var(--surface-color); /*255*/
  /** BARRA SUBTITULO **/
  --page-subtitle-box-bg-color-a: var(--secondary-color); /*1*/
  --page-subtitle-box-bg-color-b: var(--surface-color); /*1*/
  /**BARRA SUBTITULO NIVEL TRES**/
  --page-subtitletwo-box-bg-color-a: var(--primary-color);
  --page-subtitletwo-box-bg-color-b: var(--gradiente-color);

  /******** HSLA (Gradients customizados automatizados) *********/
  /* Color principal */
  --page-portlet-box-main-color: var(--gradiente-color);
  --page-portlet-box-main-color-b: var(--primary-color);
  --page-portlet-box-opa: 0%;
  /* Tonalidad variante sobre color principal automática */
  --page-portlet-subbox-opa: 25%;
  /* Variables finales */
  --page-portlet-box-bg-color: linear-gradient(
    250deg,
    var(--page-portlet-box-main-color),
    var(--page-portlet-box-opa)
  );
  --page-card-box-bg-color: linear-gradient(
    250deg,
    var(--page-portlet-box-main-color),
    var(--page-portlet-subbox-opa)
  );

  --jchart-color-primary: #ebeff2;
  --jchart-color-secondary: #9aa1f2;
  --jchart-color-tertiary: #6ad9c3;
  --jchart-color-quaternary: #6ee9c3;
}