/****************************************************************************************/
/****************************************************************************************/
/**************************** M E M O R I A   D I G I T A L *****************************/
/****************************************************************************************/
/****************************************************************************************/
/************************* Nueva hoja de estilos donde iran todas ***********************/
/****************** las nuevas reglas para adecuarse con los prototipos *****************/
/****************************************************************************************/
/****************************************************************************************/

/* region GENERAL */
:root {
  /* region VARIABLES */
  /* region SPACING */
  --a3w-space-24: 24px;
  --a3w-space-16: 16px;
  --a3w-space-8: 8px;
  --a3w-space-4: 4px;
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-mn: 16px;
  --md-spacing-lg: 24px;
  --md-spacing-xl: 32px;
  --md-spacing-2xl: 40px;
  --md-spacing-3xl: 48px;
  --md-spacing-4xl: 56px;
  /* endregion */
  /* region COLORS */
  /* region GRAY */
  --Colors-gray-a3w-gray-100: #F4F4F3;
  --Colors-gray-a3w-gray-200: #EDEDEB;
  --Colors-gray-a3w-gray-400: #BBBBBA;
  --Colors-gray-a3w-gray-300: #DEDEDD;
  --Colors-gray-a3w-gray-500: #9C9C9B;
  --Colors-gray-a3w-gray-600: #737372;
  --Colors-gray-a3w-gray-700: #5F5F5E;
  --Colors-gray-a3w-gray-50: #FAFAF9;
  /* endregion */
  /* region PRIMARY */
  --Colors-primary-a3w-primary-900: #00628F;
  /* endregion */
  /* region SECONDARY */
  --Colors-Secondary-a3w-secondary-800: #0073B4;
  --Colors-Secondary-a3w-secondary-600: #0096DC;
  --Colors-Secondary-a3w-secondary-400: #29B2EE;
  --Colors-Secondary-a3w-secondary-50: #E1F4FD;
  /* endregion */
  /* region SUCCESS */
  --Colors-success-a3w-success-500: #0FB873;
  --Colors-success-a3w-success-50: #E2F5EB;
  /* endregion */
  /* region ERROR */
  --Colors-error-a3w-error-500: #FF281F;
  /* endregion */
  /* region BACKGROUND */
  --Colors-background-a3w-bg-light: #FEFEFE;
  /* endregion */
  /* endregion */
  /* region BORDER */
  --a3w-corner-4: 4px;
  --a3w-corner-40: 40px;
  /* endregion */
  /* endregion */
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

h1.md, h2.md, h3.md, h4.md {
  color: #5F5F5F;
  font-weight: bold;
}

.error {
  color: var(--Colors-error-a3w-error-500);
}

.has-error {
  border-color: #FF3E3F;
}

.has-error:not(input) {
  color: #FF3E3F;
}

.hoverable:hover {
  background-color: #e6e6e6;
}

.hidden-scrollbar {
  /* Para Firefox */
  scrollbar-width: none;
  /* Para IE y Edge */
  -ms-overflow-style: none;
  /* Agrega un degradado sutil al final */
  /*mask-image: linear-gradient(to left, transparent, black 20px);*/
}

/* Para Chrome, Safari y Opera */
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

.position-relative {
  position: relative;
}

/*endregion*/

/* region FLEXBOX */
.flex {
  display: flex;
}

.flex-8 {
  display: flex;
  gap: 8px;
}

.flex-16 {
  display: flex;
  gap: 16px;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.inline-flex-center {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.flex-justify-center {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.flex-justify-between {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.flex-column-justify-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.flex-align-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-align-center-16 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.align-self-end {
  align-self: flex-end;
}

.flex-auto {
  flex: auto;
}

/* endregion */

/* region WIDTH */
.width-100-percent {
  width: 100%;
}

.width-50-percent {
  width: 50%;
}

/*endregion*/

.height-100-percent {
  height: 100%;
}

.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* region MARGINS */
.margin-top-24 {
  margin-top: var(--a3w-space-24) !important;
}

.margin-top-16 {
  margin-top: var(--a3w-space-16) !important;
}

.margin-top-8 {
  margin-top: var(--a3w-space-8) !important;
}

.margin-bottom-24 {
  margin-bottom: var(--a3w-space-24) !important;
}

.margin-bottom-16 {
  margin-bottom: var(--a3w-space-16) !important;
}

.margin-bottom-8 {
  margin-bottom: var(--a3w-space-8) !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.margin-4 {
  margin: var(--a3w-space-4) !important;
}

.no-margin {
  margin: 0 !important;
}

/* endregion */

/* PADDINGS */
.padding-16-24 {
  padding: var(--a3w-space-16) var(--a3w-space-24) !important;
}

.padding-8-24 {
  padding: var(--a3w-space-8) var(--a3w-space-24) !important;
}

.padding-8-16 {
  padding: var(--a3w-space-8) var(--a3w-space-16) !important;
}

.padding-8-0 {
  padding: var(--a3w-space-8) 0 !important;
}

.padding-4-0 {
  padding: var(--a3w-space-4) 0 !important;
}

.padding-0-mn {
  padding: 0 var(--md-spacing-mn) !important;
}

.padding-xl {
  padding: var(--md-spacing-xl) !important;
}

.padding-24 {
  padding: var(--a3w-space-24) !important;
}

.padding-16 {
  padding: var(--a3w-space-16) !important;
}

.padding-mn {
  padding: var(--md-spacing-mn) !important;
}

.padding-8 {
  padding: var(--a3w-space-8) !important;
}

.padding-xs {
  padding: var(--md-spacing-xs) !important;
}

.no-padding {
  padding: 0 !important;
}

.padding-bottom-16 {
  padding-bottom: var(--a3w-space-16) !important;
}

/* region FONTS */
.font-size-24 {
  font-size: 24px !important;
}

.font-size-20 {
  font-size: 20px !important;
}

.font-size-16 {
  font-size: 16px !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-8 {
  font-size: 8px !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.font-weight-bold {
  font-weight: bold !important;
}

/*endregion*/

/* region COLORS */
.blue-primary {
  color: #337AB7;
}

.blue-info {
  color: #0096DC;
}

.blue-info-hover:hover {
  color: #0096DC;
}

.color-primary-900 {
  color: var(--Colors-primary-a3w-primary-900);
}

.color-secondary-600 {
  color: var(--Colors-Secondary-a3w-secondary-600);
}

.gray-default {
  color: #707070;
}

.yellow-warning {
  color: #DDB21B;
}

.orange-success {
  color: #EF6A00;
}

.violet-primary {
  color: #5554B7;
}

.red-danger {
  color: #E5001C;
}

.color-gray-400 {
  color: var(--Colors-gray-a3w-gray-400);
}

.color-gray-300 {
  color: var(--Colors-gray-a3w-gray-300);
}

.color-gray-700 {
  color: var(--Colors-gray-a3w-gray-700);
}

.bg-light-gray {
  background-color: #e6e6e6;
}

.background-color-light {
  background-color: var(--Colors-background-a3w-bg-light);
}

/*endregion*/

/* ENLACES <a> */
a {
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

h1.md > a, h2.md > a, h3 > a {
  color: inherit;
}

h1.md > a:hover, h2.md > a:hover, h3 > a:hover {
  color: #337ab7;
}

/* ETIQUETAS <label> TODO Cambiar el nombre al 'tag', mas correcto */
label.md {
  font-weight: 600;
}

.label-default.md {
  color: #707070;
  background-color: #E0E0E0;
  font-size: 12px;
}

.label-warning.md {
  color: #DDB21B;
  background-color: #FFFAE7;
  font-size: 12px;
}

.label-success.md {
  color: #EF6A00;
  background-color: #FFF3E0;
  font-size: 12px;
}

.label-success-green.md {
  color: var(--Colors-success-a3w-success-500);
  background-color: var(--Colors-success-a3w-success-50);
  font-size: 12px;
  border-radius: var(--a3w-corner-4);
}

.label-info.md {
  color: #0096DC;
  background-color: #ECF9FF;
  font-size: 12px;
}

.label-primary.md {
  color: #5554B7;
  background-color: #EEF;
  font-size: 12px;
}

.label-secondary.md {
  color: var(--Colors-gray-a3w-gray-600);
  background-color: var(--Colors-gray-a3w-gray-100);
  font-size: 12px;
}

.label-danger.md {
  color: #E5001C;
  background-color: #FFEAED;
  font-size: 12px;
}

.label-lg {
  border-radius: var(--a3w-corner-4);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  padding: var(--md-spacing-sm) var(--md-spacing-mn);
}

.label-lg.label-lg-secondary {
  color: var(--Colors-gray-a3w-gray-700);
  background-color: var(--Colors-gray-a3w-gray-200);
}

.label-lg.label-lg-inverted {
  color: var(--Colors-Secondary-a3w-secondary-600);
  border: 1px solid var(--Colors-Secondary-a3w-secondary-600);
}

.tag-pill {
  padding: var(--a3w-space-4) var(--a3w-space-16);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
}

.tag-pill.tag-pill-secondary {
  color: var(--Colors-Secondary-a3w-secondary-600);
  background: var(--Colors-Secondary-a3w-secondary-50);
}

label.no-bootstrap {
  display: initial;
  max-width: initial;
  margin-bottom: initial;
  font-weight: initial;
}

/* region BADGES */
.badge.md {
  padding: 6px 16px;
  font-size: 10px;
  border-radius: 16px;
}

.badge.badge-true {
  color: #0096DC;
  background-color: #E1F4FD;
}

.badge.badge-false {
  color: #9C9C9B;
  background-color: var(--Colors-gray-a3w-gray-200);
}

/*endregion*/

/* BOTONES <button> .btn */
.btn-primary.inverted {
  color: #337ab7;
  background-color: #fff;
  border-width: 2px;
}

.btn-primary:active.inverted {
  color: #286090;
  background-color: #fff;
}

.btn-primary:hover.inverted {
  color: #286090;
  background-color: #fff;
}

.btn-primary:focus.inverted {
  color: #286090;
  background-color: #fff;
}

.btn-primary:active:hover.inverted,
.btn-primary:active:focus.inverted {
  color: #204d74;
  background-color: #fff;
}

.btn-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
}

.btn-drag-hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default.active[uib-btn-radio] {
  color: var(--Colors-Secondary-a3w-secondary-600);
  font-weight: 600;
}

/* TODO Refactor to component */
.btn-choice-chips {
  height: fit-content;
  border: 0;
  border-radius: 24px;
  background: #E1F4FD;
  color: #0096DC;
  padding: 2px 16px;
  margin: 4px;
}

.btn-choice-chips:hover {
  border: 1px solid #0096DC;
  background: #E1F4FD;
  color: #0096DC;
}

.btn-choice-chips:focus {
  outline: none;
  background: #E1F4FD;
  color: #0096DC;
}

.btn-choice-chips:focus-visible {
  outline: none;
}

.btn-choice-chips:active:focus {
  outline: none;
}

/* Iconos en campo de texto TODO Revisar esto */
.input-group.text-icon-group {
  padding: 5px 40px;
}

.text-icon-group > input.text-icon {
  border: 1px solid rgb(204, 204, 204);
  border-right-width: 0;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset;
}

input.text-icon + span.text-icon-right.input-group-addon {
  background: none;
}

input:-webkit-autofill {
  background-color: #FFFFFF !important; /* Fondo azulado en Chrome */
}

input.btn.btn-block.odilo-blue {
  background-color: #00628f !important;
  border-color: #00628f;
}

button.btn.btn-primary.btn-block.odilo-blue {
  background-color: #00628f !important;
  border-color: #00628f;
}

.fmd.odilo-blue {
  color: #00628f !important;
}

.blocked-user {
  text-align: left !important;
  margin-left: 30px;
}

.login-container .loginbox .loginbox-textbox.blocked-user {
  padding: 10px 0;
}

label.text-icon-label {
  padding: 1px 40px;
}

/* INPUTS <input> */
input[type="time"].md::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"].md::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="radio"].no-bootstrap,
input[type="checkbox"].no-bootstrap {
  margin: initial;
  line-height: initial;
  box-sizing: initial;
  padding: initial;
}

/* ALERTAS (sweetalert2) */
.swal-close-button {
  font-size: 5em !important;
  color: #337ab7 !important;
}

.swal-close-button:focus {
  box-shadow: none !important;
}

/* TAB BUTTONS */

/* DROPDOWN (with uib-collapse) */
.dropdown-md {
  width: 100%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* DRAG & DROP */
.dndDraggingSource {
  display: none;
}

/* region PANELS */
.panel-md {
  padding: var(--md-spacing-mn);
  border-radius: var(--a3w-corner-4);
  border: 1px solid var(--Colors-gray-a3w-gray-300);
  background: var(--Colors-background-a3w-bg-light);
}

/* Cuando el panel tiene elementos estructurados, quitamos el padding del contenedor */
.panel-md:has(> .panel-md-heading),
.panel-md:has(> .panel-md-body) {
  padding: 0;
}

.panel-md > .panel-md-heading {
  padding: var(--md-spacing-mn);
  border-bottom: 1px solid var(--Colors-gray-a3w-gray-300);
}

.panel-md > .panel-md-body {
  padding: var(--md-spacing-mn);
}

.panel-md > .panel-md-footer {
  padding: var(--md-spacing-mn) var(--md-spacing-lg);
  border-top: 1px solid var(--Colors-gray-a3w-gray-300);
}

/*endregion*/

/* ICONs (provisional) */
.i-carpeta::before {
  content: '📁';
}

.i-archivo::before {
  content: '📄';
}

.i-abajo::before {
  content: '▼';
}

.i-derecha::before {
  content: '▶';
}

/* SWITCH TODO Revisar esto, posible problema en <a3w-table-toggle> */
.switch {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 60px;
  margin: 0;
}

.switch.form {
  height: 24px;
  width: 40px;
}

.switch input { /* Hide default HTML checkbox */
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  inset: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--Colors-background-a3w-bg-light);
  border: 1px solid var(--Colors-gray-a3w-gray-300);
  border-radius: 45px;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:hover {
  background-color: var(--Colors-gray-a3w-gray-100);
  border: 1px solid var(--Colors-gray-a3w-gray-400);
}

input:checked + .slider {
  background-color: var(--Colors-Secondary-a3w-secondary-600);
}

input:checked + .slider:hover {
  background-color: var(--Colors-Secondary-a3w-secondary-800);
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 5px;
  top: 5px;
  background-color: var(--Colors-gray-a3w-gray-700);
  border-radius: 50%;
  transition: transform .4s, background-color .4s;
}

.switch.form .slider:before {
  height: 14px;
  width: 14px;
  bottom: 4px;
  top: 4px;
}

input:checked + .slider:before {
  background-color: white;
  transform: translateX(26px);
}

.switch.form input:checked + .slider:before {
  transform: translateX(16px);
}