/****************************************************************************************/
/****************************************************************************************/
/**************************** 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 {
  /* Color, spacing and border tokens come from MDDS (styles/mdds/). */
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

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

.md-page-container {
  max-width: 1200px;
  margin: 0 auto;
}

.md-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.error {
  color: var(--md-color-red-60); /* TODO: a3w error red is brighter than --md-content-negative (red-80); use semantic when palette aligns */
}

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

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

.hoverable:hover {
  background-color: var(--md-background-secondary-hover);
  border-radius: var(--md-radius-xs);
}

.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-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 MODAL SIZE*/
.md-modal-lg .modal-dialog {
  width: 618px;
}

.md-modal-xl .modal-dialog {
  width: 1100px;
}
/*endregion*/

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

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

/*endregion*/

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

.section-divider{
  margin: 0;
  padding: 0;
  border-top: var(--md-border-width-sm) solid var(--md-color-neutral-15);
}

/* region Backgrounds */
.bg-dots{
  background-color: var(--md-color-neutral-1);
  background-image: radial-gradient(circle, rgba(0,0,0,.08) 2.5px, transparent 1px);
  background-size: 32px 32px; /* dots separation */
  background-position: 0 0;
}
/*endregion*/

/* region MARGINS */
.margin-top-8 {
  margin-top: var(--md-spacing-3xs) !important;
}

.margin-bottom-24 {
  margin-bottom: var(--md-spacing-sm) !important;
}

.margin-bottom-16 {
  margin-bottom: var(--md-spacing-xs) !important;
}

.margin-bottom-8 {
  margin-bottom: var(--md-spacing-3xs) !important;
}

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

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

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

/* endregion */

/*region PADDINGS */
.padding-16-24 {
  padding: var(--md-spacing-xs) var(--md-spacing-sm) !important;
}

.padding-8-24 {
  padding: var(--md-spacing-3xs) var(--md-spacing-sm) !important;
}

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

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

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

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

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

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

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

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

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

.padding-bottom-16 {
  padding-bottom: var(--md-spacing-xs) !important;
}
/*endregion*/

/* 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-weight-600 {
  font-weight: 600 !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-secondary-600 {
  color: var(--md-content-brand-secondary);
}

/*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(--md-color-green-60); /* TODO: a3w success green is brighter than --md-content-positive (green-80); use semantic when palette aligns */
  background-color: var(--md-color-green-2); /* TODO: candidate for --md-background-positive-subtle once palettes align */
  font-size: 12px;
  border-radius: var(--md-radius-xs);
}

.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(--md-color-neutral-40); /* TODO: no semantic content token at this value (neutral-40 aliases a border); revisit */
  background-color: var(--md-background-secondary);
  font-size: 12px;
}

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

.label-lg {
  border-radius: var(--md-radius-xs);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  padding: var(--md-spacing-3xs) var(--md-spacing-xs);
}

.label-lg.label-lg-secondary {
  color: var(--md-content-tertiary);
  background-color: var(--md-background-secondary);
}

.label-lg.label-lg-inverted {
  color: var(--md-content-brand-secondary);
  border: var(--md-border-width-sm) solid var(--md-border-brand-secondary);
}

.tree-node {
  display: flex;
  gap: var(--md-spacing-3xs);
  padding: var(--md-spacing-4xs);
  border-radius: var(--md-radius-xs);
  align-items: center;
}

.tree-node-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Preview ("Visualizar") button: only revealed on row hover. Based on
   .tree-node (not .hoverable) so leaf rows, which lack .hoverable, are covered too.
   Uses visibility (not display) to reserve the space and keep the row from shifting. */
.tree-node-preview {
  visibility: hidden;
  margin-left: auto;
  flex-shrink: 0;
}

.tree-node:hover .tree-node-preview {
  visibility: visible;
}

.tree-children {
  margin-left: 12px;
  padding-left: var(--md-spacing-3xs);
  border-left: var(--md-border-width-sm) solid var(--md-border-primary);
}

.tag-2xs {
  padding: 2px var(--md-spacing-3xs);
  border-radius: 24px;
  background: var(--md-background-tertiary);
  color: var(--md-content-vivid);
  font-weight: 600;
  font-size: 12px;
}

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

.tag-pill.tag-pill-secondary {
  color: var(--md-content-brand-secondary);
  background: var(--md-background-tertiary);
}

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(--md-background-secondary);
}

/*endregion*/

/* BOTONES <button> .btn */
.btn-primary.inverted {
  color: #337ab7;
  background-color: #fff;
  border-width: var(--md-border-width-mn);
}

.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: var(--md-spacing-3xs);
  cursor: pointer;
  color: var(--md-content-secondary);
  background-color: var(--md-background-primary);
  border: 1px solid var(--md-border-primary);
  border-radius: var(--md-radius-xs);
  padding: var(--md-spacing-3xs) var(--md-spacing-xs);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* Hover state. The .btn-drag-hover class forces the same look on the drag placeholder, which is not actually hovered */
.btn-drag:hover,
.btn-drag-hover {
  background-color: var(--md-background-hover);
  border-color: var(--md-border-secondary);
}

/* Suppress the hover look while dragging so chips the cursor passes over are not highlighted */
.dnd-dragging .btn-drag:hover {
  background-color: var(--md-background-primary);
  border-color: var(--md-border-primary);
}

/* Active state — selected filter, driven by the checkbox checkedness. Wins over the hover border */
.btn-drag:has(input:checked),
.dnd-dragging .btn-drag:hover:has(input:checked) {
  border-color: var(--md-border-brand-secondary);
}

.btn-default.active[uib-btn-radio] {
  color: var(--md-content-brand-secondary);
  font-weight: 600;
}

.btn-choice-chips {
  height: fit-content;
  border: 0;
  border-radius: 16px;
  background: var(--md-background-tertiary);
  color: var(--md-content-brand-primary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 0;
  margin: 0;
}

.btn-choice-chips > span {
  white-space: nowrap;
  padding: 4px 8px 4px 16px;
  border: var(--md-border-width-sm) solid transparent;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.btn-choice-chips > .fmd {
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
  border: var(--md-border-width-sm) solid transparent;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.btn-choice-chips > span:hover {
  border-color: var(--md-border-brand);
}

.btn-choice-chips:has(> .fmd) > span:not(.fmd):hover {
  border-radius: 16px 0 0 16px;
}

.btn-choice-chips > .fmd:hover {
  border-color: var(--md-border-brand);
  border-radius: 0 16px 16px 0;
}

.btn-choice-chips:hover {
  color: var(--md-content-brand-primary);
}

.btn-choice-chips:focus {
  outline: none;
  background: var(--md-background-tertiary);
  color: var(--md-content-brand-primary);
}

.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: var(--md-border-width-sm) 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;
}

/*region ALERTAS */
.md-alert {
  padding: var(--md-spacing-xs);
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-3xs);
  border-radius: var(--md-radius-xs);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
}

.md-alert > .fmd {
  font-size: 24px;
  line-height: 1;
}

.md-alert .md-alert-title {
  font-weight: 700;
}

.md-alert .md-alert-text-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
}

.md-alert-brand {
  background: var(--md-background-tertiary);
}

.md-alert-brand .fmd {
  color: var(--md-content-brand-secondary);
}

.md-alert-negative {
  background: var(--md-background-negative-subtle);
}

.md-alert-negative .fmd {
  color: var(--md-content-negative);
}

.md-alert-discovery {
  background: var(--md-background-discovery-subtle);
}

.md-alert-discovery .fmd {
  color: var(--md-content-discovery);
}

.md-alert-discovery .md-alert-title {
  color: var(--md-content-primary);
}

.md-alert-discovery .md-alert-text-container {
  color: var(--md-content-secondary);
}
/* sweetalert2 */
.swal-close-button {
  font-size: 5em !important;
  color: #337ab7 !important;
}

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

/* 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: var(--md-border-width-sm) solid rgba(0, 0, 0, 0.15);
  z-index: 1;
}

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

/* region PANELS */
.panel-md {
  padding: var(--md-spacing-xs);
  border-radius: var(--md-radius-xs);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  background: var(--md-background-primary);
}

/* 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-xs);
  border-bottom: var(--md-border-width-sm) solid var(--md-border-primary);
}

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

.panel-md-body:has(> .panel-md-body-section) {
  padding: 0;
}

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

.panel-md > .panel-md-footer {
  padding: var(--md-spacing-xs) var(--md-spacing-sm);
  border-top: var(--md-border-width-sm) solid var(--md-border-primary);
}

/*endregion*/

/* 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(--md-background-primary);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  border-radius: 45px;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:hover {
  background-color: var(--md-background-hover);
  border: var(--md-border-width-sm) solid var(--md-border-secondary);
}

input:checked + .slider {
  background-color: var(--md-color-brand-secondary-60); /* TODO: no semantic background token for brand-secondary fill; revisit */
}

input:checked + .slider:hover {
  background-color: var(--md-color-brand-secondary-80); /* TODO: no semantic background token for brand-secondary fill; revisit */
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 5px;
  top: 5px;
  background-color: var(--md-color-neutral-50); /* TODO: no semantic background token at this value (neutral-50 aliases content-tertiary); revisit */
  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);
}

mark {
  background-color: var(--md-background-notice-subtle);
  color: inherit;
  padding: 0;
  border-radius: var(--md-radius-xs);
}

/* MDDS tooltip — matches the Figma spec (ARCREQ-1080). Pair with uib-tooltip
   tooltip-class="no-beyond md-tooltip" so the legacy beyond.css styling is opted out. */
.tooltip.md-tooltip .tooltip-inner {
  background-color: var(--md-content-secondary);
  color: var(--md-content-primary-inverse);
  border-radius: var(--md-radius-sm);
  padding: var(--md-spacing-3xs);
  font-size: 14px;
}

.tooltip.md-tooltip.top .tooltip-arrow {
  border-top-color: var(--md-content-secondary);
}

.tooltip.md-tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--md-content-secondary);
}

.tooltip.md-tooltip.left .tooltip-arrow {
  border-left-color: var(--md-content-secondary);
}

.tooltip.md-tooltip.right .tooltip-arrow {
  border-right-color: var(--md-content-secondary);
}