@charset "UTF-8";
/*
 * v1.0 (alfa)
 * Copyright 2023-2023 Authors Hologa
 * Copyright 2023-2023 contacta.mx
 * Licensed under MIT (contacta.mx)
 */

/*
  / \__
 (    @\____
 /         O
/   (_____/
/_____/   U
¡Guau! hologa
*/

:root{
  --bg-contacta-100: #05AFF2;
  --bg-contacta-200: #03658C;
  --bg-contacta-300: #05DBF2;
  --bg-contacta-400: #05F2F2;
  --bg-contacta-500: #0072AF;
  --bg-contacta-600: #54B4D3;
  --bg-contacta-700: #005B8E;
  --bg-contacta-800: #00426B;
  --text-primary: #025373;
  --text-secondary: #7B809A;
  --text-success: #4CAF50;
  --text-danger: #F44335;
  --text-warning: #FB8C00;
  --text-info: #1A73E8;
  --text-light: #F0F2F5;
  --text-dark: #344767;
  --text-body: ;
  --text-muted: ;
  --text-white: #FFFFFF;
  --text-black: #000000;
  --text-white-50: #999696;
  --text-black-50: #181820;
}


/*
 * Fuentes 
 */

/** @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); **/
/** fuentes integradas
* IBM Plex Sans
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 100; 100 al 700
  font-style: normal;

* Fira Code
  font-family: "Fira Code", monospace
  font-style: normal;

* Fira Mono
  font-family: "Fira Mono", monospace;
  font-weight: 400; 400,500,700
  font-style: normal;

* Ubuntu
  font-family: "Ubuntu", sans-serif;
  font-weight: 300; 300,400,500,
  font-style: normal;

* Ubuntu Mono
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400; 700,
  font-style: normal;

* Roboto
  font-family: "Roboto", sans-serif;
  font-weight: 100; 100,300,400,500,700,900
* 
**/

.dc {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/*
 *  inputs estilo google
 */

.input-outline {
  /* position: fixed; */
  height: 100%;
  width: 100%;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  font-family: Arial, sans-serif;
}

.input-content-box {
  position: relative;
}

.input-force {
  height: 40px; /* 28px */
  font-size: 16px;
  padding: 13px 15px; /*   padding: 13px 15px; */
  border-radius: 4px;
  border: 1px solid grey;
  width: -webkit-fill-available; /* 300px */
  outline: none;
}

.input-force:not(:placeholder-shown).input-force:not(:focus) + .input-outline-name {
  transform: scale(0.75) translateY(-39px) translateX(-5px);
  color: grey;
}

.input-force:focus {
  border-color: #025373;
}

.input-force:focus + .input-outline-name {
  transform: scale(0.75) translateY(-39px) translateX(-5px);
  color: #025373;
}

.input-outline-name {
  position: absolute;
  font-family: 'Roboto';
  font-size: 15px;
  top: 20px;
  left: 8px;
  padding: 0 8px;
  background-color: #FFF;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: grey;
}




  /*
   * imagenes de fondo de inicio
   */
  
   .bg-img-100{
    background-image: url('../images/background/bg-1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #2a5bd5;
  }
  
  .bg-img-200{
    background-image: url('../images/background/bg-2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #2a5bd5;
  }
  
  .bg-img-300{
    background-image: url('../images/background/bg-3.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #2a5bd5;
  }


.form-basic .form-control {
  border: 2px solid #135291 !important;
}

.form-basic .form-control:hover {
  border: 2px solid #135291 !important;
}

.form-floating .form-control {
  border: 2px solid #135291 !important;
}

.form-floating .form-control:hover {
  border: 2px solid #135291 !important;
}

/* animaciones */

.fade-In1{
    animation-duration:1.5s
  }
.fade-In2{
    animation-duration:1.75s
  }
.fade-In3{
    animation-duration:2s
  }
.fade-In4{
    animation-duration:2.25s
  }
.fade-In5{
    animation-duration:2.5s
  }
.fade-In1,.fade-In2,.fade-In3,.fade-In4,.fade-In5{
    animation-fill-mode:both
  }
.fade-In-Bottom{
    animation-name:fd
  }
  @keyframes fd{
    0%{
        opacity:0;
        transform:translateY(100%)
    }
    to{
        opacity:1
    }
  }


/*
 *  Colores Internos
 */

.text-contacta-100 {
  color: #05AFF2;
}

.text-contacta-200 {
  color: #03658C;
}

.text-contacta-300 {
  color: #05DBF2;
}

.text-contacta-400 {
  color: #05F2F2;
}

.bg-contacta-100 {
  background-color: var(--bg-contacta-100);
}

.bg-contacta-200 {
  background-color: var(--bg-contacta-200);
}

.bg-contacta-300 {
  background-color: var(--bg-contacta-300);
}

.bg-contacta-400 {
  background-color: var(--bg-contacta-400);
}

.bg-contacta-500 {
  background-color: var(--bg-contacta-500);
}

.bg-contacta-600 {
  background-color: var(--bg-contacta-600);
}

.bg-contacta-700 {
  background-color: var(--bg-contacta-700);
}

.bg-contacta-800 {
  background-color: var(--bg-contacta-800);
}

/* 
 *  Colores bg-colors
 */


 /* navegacion settings */
 .nav-item .nav-link {
  color: #344767;
 }




/* 
 *  notas 
 */

.note {
  padding: 10px;
  border-width: 6px;
  border-radius: 5px;
  font-weight: 600;
  border-left: 6px solid;
  border-radius: 5px;
}

.note-primary {
  background-color: #d6e4fa;
  color: #2454a8;
}

.note-secondary {
  background-color: #c5c9cc;
  color: #575a61;
}

.note-success {
  background-color: #c7f5d9;
  color: #036329;
}

.note-danger {
  background-color: #fad6dd;
  color: #bd2d45;
}

.note-warning {
  background-color: #FBF1DD;
  color: #f0c164;
}

.note-info {
  background-color: #E5F4F8;
  color: #2a7c97;
}

.note-light {
  background-color: #F5F5F5;
  color: #616161;
}

.note-dark {
  background-color: #222020;
  color: #8c929c;
}

/* 
 *  Dark/Ligth Mode
 */

  .toggle-button {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    width: 30px;
    height: 31px;
    border-radius: 3px;
    position: relative;
    transition: 0.4s;
    background: url("../img/icons/moon.png") no-repeat center;
/*  background: url("../img/icons/moon.png") no-repeat center #007bff;  */
    background-size: 20px;
    cursor: pointer;
    margin-bottom: -7px; /* margin-bottom: -11px; */
    margin-right: 2px;
  }
  
  .toggle-button:checked {
    background: url("../img/icons/sun.png") no-repeat center;
/*  background: url("../img/icons/sun.png") no-repeat center #ffffff; */
    background-size: 28px;
  }

  [data-theme="dark"] {
    --bg-form-control: #0C1728;
    --text-form-control: #FFFFFF;
    --bg-note-primary: #0C1728;
    --text-note-primary: #628dd5;
    --bg-note-secondary: #202124;
    --text-note-secondary: #C5C9CC;
    --bg-note-success: #04210F;
    --text-note-success: #72C894;
    --bg-note-danger: #2C0F14;
    --text-note-danger:#E37083;
    --bg-note-warning: #2E2005;
    --text-note-warning: #EFC776;
    --bg-note-info: #11242A;
    --text-note-info: #87CBE0;
    --bg-note-light: #4F4F4F;
    --text-note-light: #F5F5F5;
    --bg-note-dark: #262626;
    --text-note-dark:#9FA6B2;
    --bg-table-dark: #202940;
    --text-table-dark: #CBCFE7;
    --bg-card-dark: #202940;
    --text-card-dark: #CBCFE7;


  }

  [data-theme="dark"] {
    .form-control {
      background-color: var(--bg-form-control);
      color: var(--text-form-control);
    }

    .form-control:hover {
      background-color: var(--bg-form-control);
      color: var(--text-form-control);
    }

    .form-control:active {
      background-color: var(--bg-form-control);
      color: var(--text-form-control);
    }

    /*
    input[type="email"] {
      background-color: var(--bg-form-control);
      color: var(--bg-form-control);
    }
    */

    .bg-transparent {
      color: #FFFFFF !important;
    }

    .note-primary {
      background-color: var(--bg-note-primary);
      color: var(--text-note-primary);
    }

    .note-secondary {
      background-color: var(--bg-note-secondary);
      color: var(--text-note-secondary);
    }

    .note-success {
      background-color: var(--bg-note-success);
      color: var(--text-note-success);
    }

    .note-danger {
      background-color: var(--bg-note-danger);
      color: var(--text-note-danger);
    }

    .note-warning {
      background-color: var(--bg-note-warning);
      color: var(--text-note-warning);
    }

    .note-info {
      background-color: var(--bg-note-info);
      color: var(--text-note-info);
    }

    .note-light {
      background-color: var(--bg-note-light);
      color: var(--text-note-light);
    }

    .note-dark {
      background-color: var(--bg-note-dark);
      color: var(--text-note-dark);
    }

    .table>:not(caption)>*>* {
      background-color: var(--bg-table-dark) !important;
      color: var(--text-table-dark);
    }

    /* card */
    .card {
      background-color: var(--bg-card-dark);
      color: var(--text-card-dark);
    }

    
    /*variado*/
    .text-muted {
      color: var(--text-black-50);
    }

    /* navegacion settings */
    .nav-item .nav-link {
      color: #f2f2f2;
    }

    /* hr horizontal en settings */
    hr.horizontal.dark {
      background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 40%), transparent);
  }
  
  }