@font-face {
  font-family: "Outfit";
  src: url("../../tipografia/Outfit-Light.woff2")format("woff2"),
    url("../../tipografia/Outfit-Thin.woff")format("woff")
}



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-base);
}

body.modal-open {
  overflow: hidden;
}


:root {
  --font-base: "Poppins", sans-serif;
  --font-title: "Outfit", sans-serif;
  /*/STILOS DE body/*/
  --color-fondo-body: #f2f2f2;
  /*/STILOS DE SIDEBAR/*/
  --color-fondo-sidebar: white;
  --color-hover-item-sidebar: #f2f2f2;
  --color-item-closed-sidebar:red;
  --color-item-active-sidebar: #202020;
  --color-subItem-active-sidebar: #f2f2f2;
  --color-tipografia-sidebar: #212121;
  --color-tipografia-neutro-sidebar: white;
  --color-tipografia-active-sidebar: white;
  --color-icon-sidebar: rgb(93, 93, 93);
  --color-border-sidebar: #dddddd;
  --color-border-item-sidebar:black;

  --color-item-normal-sidebar: darkblue;
  --color-hover-tipografia-sidebar: green;
  --color-hover-icon-sidebar: yellow;

  /*/ESTILOS HEADER/*/
  --color-fondo-header: white;
  --color-border-header: white;
  --color-tipografia-one-header: black;

  /*/ESTILOS HEADER DE CONTENIDOS/*/
  --color-fondo-header-panel: white;
  --color-border-header-panel: #dddddd;
  --color-tipografia-one-header-panel: #6b7280;
  --color-tipografia-two-header-panel: white;
  --color-tipografia-three-header-panel: #222222;
  --color-input-search-header-panel: white;
  --color-border-input-header-panel: #e5e7eb;
  --color-btn-create-header-panel: #f70454;
   --color-btn2-create-header-panel:#f70454;
  --color-box-shadow-header-panel: 0 10px 25px rgba(0, 0, 0, 0.08);


  /*/ESTILOS DE TABLA/*/
  --color-fondo-table: white;
  --color-header-table: #1d212d;
  --color-subheader-table: #141824;
  --color-even-table: #ededed;
  --color-hover-fila-table: rgb(216, 216, 216);
  --color-border-table: #ededed;
  --color-tipografia-one-table: #222222;
  --color-resalt-result: yellow;


  /*/ESTILOS DE MODAL/*/
  --color-show-modal: rgba(255, 255, 255, 0.198);
  --color-form-modal: white;
  --color-shadow-modal: 0 40px 120px rgba(0, 0, 0, .35);
  --color-title-modal: #5d5d5d;
  --color-icon-modal: black;
  --color-border-form-modal: #e5e7eb;
  --color-border-input-modal: rgba(169, 169, 169, 0.523);
  --color-fondo-input-modal: white;
  --color-tipografia-input-modal: black;
  --color-placeholder-input-modal: darkgray;


  /*/ ESTILOS BOTONES//*/
  --color-btn-send: darkblue;
  --color-btn-cancel: #f2f2f2;
  --color-btn-closed: red;
  --color-btn-open: blue;
  --color-btn-accept: black;

  /* ===== SKELETON ===== */
  --skeleton-base: #eeeeee;
  --skeleton-highlight: #dddddd;


  /*/ESTILOS DE FORMULARIOS/*/
  --color-fondo-form: white;
  --color-fondo-form-2: white;
  --color-border-form: red;
  --color-border-input-form: rgb(192, 192, 192);
  --color-shadow-form: 0 40px 120px rgba(165, 165, 165, 0.571);
  --color-border-form: #dddddd;
  --color-tipografia-title: black;
  --color-tipografia-description-form: #252525;
  --color-tipografia-body-form: white;

  /*/ESTILOS DE FORMULARIOS GRADIENTE/*/
  --color-gradient-start: #ffffff;
  --color-gradient-end: #ffffff;
  --color-border-gradient: #dddddd;
  --color-border-input-gradient: #dddddd;


}


.dark-mode {
  /*/STILOS DE body/*/
  --color-fondo-body: #050810;
  /*/STILOS DE SIDEBAR/*/
  --color-fondo-sidebar: #0b0e18;
  --color-hover-item-sidebar: #171f2f;
  --color-item-closed-sidebar:rgba(255, 0, 0, 0.199);
  --color-item-active-sidebar: rgba(0, 0, 255, 0.144);
  --color-subItem-active-sidebar: #171f2f;
  --color-tipografia-sidebar: #99a4b8;
  --color-tipografia-neutro-sidebar:red;
  --color-tipografia-active-sidebar: #3167f3;
  --color-icon-sidebar: #99a4b8;
  --color-border-sidebar: #1d2939;
  --color-border-item-sidebar: blue;
  --color-item-normal-sidebar: darkblue;
  --color-hover-tipografia-sidebar: green;
  --color-hover-icon-sidebar: yellow;

  /*/ESTILOS HEADER/*/
  --color-fondo-header: #0b0e18;
  --color-border-header: #1d2939;
  --color-tipografia-one-header: white;

  /*/ESTILOS HEADER DE CONTENIDOS/*/
  --color-fondo-header-panel: #0b0e18;
  --color-border-header-panel: #1d2939;
  --color-tipografia-one-header-panel: white;
  --color-tipografia-two-header-panel: white;
  --color-tipografia-three-header-panel: white;
  --color-input-search-header-panel: #101828;
  --color-border-input-header-panel: #344054;
  --color-btn-create-header-panel:#014ddf;
  --color-btn2-create-header-panel:#009ff3;
  --color-box-shadow-header-panel: 0 10px 25px rgba(0, 0, 0, 0);

  /*/ESTILOS DE TABLA/*/
  --color-fondo-table: #0b0e18;
  --color-header-table: #0b0e18;
  --color-subheader-table: #002396;
  --color-even-table: #101828;
  --color-hover-fila-table: rgba(68, 68, 68, 0.215);
  --color-border-table: #1d2939;
  --color-tipografia-one-table:#99a4b8;
  --color-resalt-result: darkblue;

  /*/ESTILOS DE MODAL/*/
  --color-show-modal: rgba(255, 255, 255, 0.068);
  --color-form-modal: #0b0e18;
  --color-shadow-modal: 0 40px 120px rgba(0, 0, 0, 0.09);
  --color-title-modal: white;
  --color-icon-modal: white;
  --color-border-form-modal: #1d2939;
  --color-border-input-modal: #1e293b;
  --color-fondo-input-modal: #101828;
  --color-tipografia-input-modal: white;
  --color-placeholder-input-modal: #64748b;

  /*/ ESTILOS BOTONES//*/
  --color-btn-send: darkblue;
  --color-btn-cancel: #64748b;
  --color-btn-closed: red;
  --color-btn-open: blue;
  --color-btn-accept: #101828;

  /* ===== SKELETON ===== */
  --skeleton-base: #1f2937;
  --skeleton-highlight: #374151;


  /*/ESTILOS DE FORMULARIOS/*/
  --color-fondo-form: #0b0e18;
  --color-fondo-form-2: #020617;
  --color-border-form: #1d2939;
  --color-shadow-form: 0 40px 120px rgba(0, 0, 0, 0.09);
  --color-border-input-form: #344054;
  --color-tipografia-title-form: white;
  --color-tipografia-description-form: rgb(198, 198, 198);
  --color-tipografia-body-form: white;

  /*/ESTILOS DE FORMULARIOS GRADIENTE/*/
  --color-gradient-start: #011d20;
  --color-gradient-end: #2c4263;
  --color-border-gradient: darkcyan;
  --color-border-input-gradient: darkcyan;


}

.btn-one {
  background-color: #1c2e69;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.btn-two {
  background-color: #f70454;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}


body {
  background-color: var(--color-fondo-body);
}



option {
  background-color: var(--color-fondo-body);
}


.show-not-modal {
  position: fixed;
  width: 100%;
  height: 0%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: var(--color-show-modal);
  z-index: 104;
  transition: all 0.3s ease;
  align-content: center;
  justify-items: center;
  backdrop-filter: blur(10px);
}

.show-modal {
  height: 100%;
  transition: all 0.3s ease;
}





/*/CLASES Y ESTILOS CARGANDO CONTENIDO/*/
.container-loanding {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-content: center;
}




.loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  color: var(--color-loandig-one);
  box-sizing: border-box;
  animation: animloader 0.8s linear infinite;
}

@keyframes animloader {
  0% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }

  25% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
  }

  50% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
  }

  75% {
    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }

  100% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }
}


/*/SCROLL/*/
.body-sidebar::-webkit-scrollbar {
  width: 6px;
  height: 100vh;
  background-color: var(--color-bg);
  background-color: transparent;
  background-color: #162042;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(114, 110, 110);
  height: 10px;
  border-radius: 20px;
}

::-webkit-scrollbar-corner {
  height: 6px;
}



i {
  color: var(--color-icon-sidebar);
  font-size: 1.2em;
}

#content {

  padding: 1%;
}

/*/contenedor de todo del sidebar del contenido y header/*/
.container-app {
  display: flex;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
}


.title {
  color: var(--color-tipografia-description-form);
}








/* ===============================
   SWITCH PERMISOS - ROLES ONLY
================================*/

.role-perm-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.role-perm-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.role-perm-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #2a2f45;
  border-radius: 30px;
  transition: 0.3s ease;
}

.role-perm-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s ease;
}

.role-perm-switch input:checked+.role-perm-slider {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
}

.role-perm-switch input:checked+.role-perm-slider:before {
  transform: translateX(20px);
}










.credit-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #e2e8f0;
    border-top: 5px solid #0f172a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}