@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
    );
  }
}