/* Global styles */

:root {
  /* Typography */
  --font-family-base: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* --font-weight-light: 300; */  /* No utilizada */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Colors - Background */
  /* --color-bg-primary: #02070C; */
  --color-bg-primary: #FAFBFB;
  --color-bg-primary-dark: #E6E7E8;
  /* --color-bg-secondary: #060F1A; */
  --color-bg-secondary: #F4F9F9;
  --color-bg-default: #FFFFFF;
  --color-bg-dark: #081525;  /* Es posible que se use poco*/

  /* Colors - Gradient */
  --gradient-start: #ABB6B8;
  --gradient-end: #081525;
  /* --gradient-bg-start: #102C4D; */
  --gradient-bg-start: #08302A;
  /* --gradient-bg-end: #02070C; */
  --gradient-bg-end: #0E4E44;

  /* Colors - Text */
  /* --color-text-primary: #FFFFFF; */
  --color-text-primary: #324844;
  --color-text-secondary: #4B6561;
  --color-text-tertiary: #8B949E;
  --color-text-default: #02070C;
  --color-text-neutral: #96A7BC;
  /* --color-text-light: #E3E7E7; */
  --color-text-light:#8B949E;
  /* --color-text-lighter: #EEF2F2; */  /* No utilizada */
  --color-text-dark: #081525;
  --color-text-darker: #060F1A;
  --color-text-placeholder: #738589;
  --btn-color-text-light: #FFFFFF;

  /* Colors - Border */
  --color-border: #738589;
  --color-border-light: #96A7BC;
  --color-border-lighter: #ABB6B8;
  --color-border-focus: #02070C;
  --color-border-urgent: #EB2026;

  /*  Colors - Alert box, priority box & status box */
  --color-alert-box: #EEF2F2;
  --color-alert-box-hover: #E3E7E7;
  --color-alert-box-active: #D5D9D9;
  --color-priority-box-low: #8CFBCD;
  --color-priority-box-low-hover: #65F9BC;
  --color-priority-box-low-active: #3FF8AB;
  --color-priority-box-medium: #FBE88C;
  --color-priority-box-medium-hover: #F9E165;
  --color-priority-box-medium-active: #F8D93F;
  --color-priority-box-high: #FBAD8C;
  --color-priority-box-high-hover: #F99265;
  --color-priority-box-high-active: #F8763F;
  --color-priority-box-urgent: #F3797D;
  --color-priority-box-urgent-hover: #EF4D51;
  --color-priority-box-urgent-active: #EB2026;
  --color-priority-box-critical: #E31B23;
  --color-priority-box-critical-hover: #C61118;
  --color-priority-box-critical-active: #A00D11;
  --color-status-box: #8CD9FB;
  --color-status-box-hover: #65CDF9;
  --color-status-box-active: #3FC0F8;

  /* Colors - Status tag */
  --color-status-tag-bg-new: #8CFBCD;
  --color-status-tag-text-new: #1A6C4A;
  --color-status-tag-bg-in-process: #FBE88C;
  --color-status-tag-text-in-process: #6C5E1A;
  --color-status-tag-bg-closed: #8CD9FB;
  --color-status-tag-text-closed: #1A536C;
  --color-status-tag-bg-stopped: #FBAD8C;
  --color-status-tag-text-stopped: #6C331A;

  /* Colors - Priority tag */
  --color-priority-tag-low: #3FF8AB;
  --color-priority-tag-medium: #F8D93F;
  --color-priority-tag-high: #F8763F;
  --color-priority-tag-urgent: #EB2026;

  /* Colors - Icons */
  --color-icon: #FFFFFF;
  /* --color-icon-hover: #96A7BC; */  /* No utilizada - revisar */
  --color-icon-input: #738589;
  --color-user-icon-bg: #F7A6A8;
  --color-user-icon-bg-hover: #F3797D;
  --color-user-icon-bg-active: #EB2026;
  --color-user-icon-border: #FFFFFF;
  --color-user-icon-text: #5E0D0F;
  --color-user-icon-text-active: #02070C;

  /* Colors - Dropdown */
  /* --color-dropdown-hover: #163C69; */
  --color-dropdown-hover: #b9babb;

  /* Colors - Selector */
  --color-selector-active: #EB2026;

  /* Colors - Flash messages */
  --color-message-info-bg: #D9FEEE;
  --color-message-info-border: #33C98B;
  --color-message-info-text: #0D3E2A;
  --color-message-info-divider: #8CFBCD;
  --color-message-warning-bg: #FEF7D9;
  --color-message-warning-border: #F8D93F;
  --color-message-warning-text: #3E360D;
  --color-message-warning-divider: #FBE88C;
  --color-message-danger-bg: #FBD2D4;
  --color-message-danger-border: #EB2026;
  --color-message-danger-text: #2F0608;
  --color-message-danger-divider: #F3797D;
}


html,
body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
}


/* LAYOUT */

.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background-color: var(--color-bg-primary);
}

.hidden {
  display: none !important;
}


/* BUTTON GRADIENT */

.btn-gradient-primary,
.btn-gradient-secondary {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, var(--gradient-bg-start), var(--gradient-bg-end));
  border: none;
  color: var(--btn-color-text-light);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  padding: 8px 16px;
  margin: 1px;
  cursor: pointer;
}

.btn-gradient-secondary {
  color: var(--color-text-primary);
  background: none;
  border: none;
  font-weight: var(--font-weight-medium);
}

/* .btn-gradient-primary::before,
.btn-gradient-secondary::before {
  content: '';
  position: absolute;
  background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
  border-radius: 4px;
  padding: 1px;
  inset: -1px;
  mask: linear-gradient(rgb(0, 0, 0) 0 0) content-box, linear-gradient(rgb(0, 0, 0) 0 0);
  mask-composite: exclude;
} */
 .btn-gradient-primary::before {
  content: '';
  position: absolute;
  background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
  border-radius: 4px;
  padding: 1px;
  inset: -1px;
  mask: linear-gradient(rgb(0, 0, 0) 0 0) content-box, linear-gradient(rgb(0, 0, 0) 0 0);
  mask-composite: exclude;
}

/* .btn-gradient-primary:hover,
.btn-gradient-secondary:hover {
  background: var(--gradient-bg-start);
} */
.btn-gradient-primary:hover {
  background: var(--gradient-bg-start);
}

.btn-gradient-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}


/* HEADER */

.app-header {
  background-color: var(--color-bg-secondary);
  padding: 16px;
}

.logo-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}

.logo-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  padding: 0;
}

.logo-list-item {
  display: flex;
}

.button-sign-up:hover {
  background: linear-gradient(to bottom, var(--gradient-end), var(--gradient-start));
}

.header-nav {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.header-nav-button {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  padding: 0;
  margin: 0;
  transition: background-color .2s;
}

.header-nav-button:hover,
.header-nav-button:focus,
.header-nav-button:active {
  background-color: var(--color-bg-primary-dark);
}

.header-nav-button.setting-icon {
  background-image: url(/static/img/icons/icon-settings.svg);
}

.header-nav-button.info-icon {
  background-image: url(/static/img/icons/icon-info.svg);
}


/* NAVBAR */

.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
  padding: 16px;
  margin: 0;
}

.navbar-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.navbar-list .navbar-link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  padding: 8px 16px;
  margin: 1px;
  text-decoration: none;
}

.navbar-list .navbar-link:hover {
  color: var(--color-text-neutral);
}

.navbar-list .navbar-link.btn-gradient-primary {
  color: var(--btn-color-text-light);
  pointer-events: none;
}


/* USER INFO */

.user-info-container {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.user-info-button {
  display: flex;
  gap: 8px;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.user-info-button::after {
  display: none;
}

.user-info-avatar {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-user-icon-bg);
  border-radius: 50%;
  color: var(--color-user-icon-text);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 24px;
  text-transform: uppercase;
}

.user-info-button:hover .user-info-avatar {
  background-color: var(--color-user-icon-bg-hover);
  border: 2px solid var(--color-user-icon-border);
}

.user-info-button:focus .user-info-avatar,
.user-info-button:active .user-info-avatar {
  background-color: var(--color-user-icon-bg-active);
  border: none;
  color: var(--color-user-icon-text-active);
}

.user-info-details {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
}

.user-info-name {
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  padding: 0;
  margin: 0;
}

.user-info-email {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  padding: 0;
  margin: 0;
}


/* DROPDOWN MENU */

.dropdown-menu {
  position: absolute;
  min-width: 200px;
  background-color: var(--color-bg-primary-dark);
  border: 1px solid var(--color-border-lighter);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1;
}

.dropdown-menu[data-bs-popper] {
  top: calc(100% - 8px);
  right: 8px;
}

.dropdown-menu>.dropdown-item {
  border-bottom: 1px solid var(--color-border-lighter);
  padding: 8px 16px;
}

.dropdown-menu>.dropdown-item:hover {
  background-color: var(--color-dropdown-hover);
}

.dropdown-menu>.dropdown-item:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.dropdown-menu>.dropdown-item:first-of-type:hover {
  background-color: unset;
}

.dropdown-menu>.dropdown-item:last-of-type {
  border-bottom: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dropdown-menu>.dropdown-item .dropdown-text {
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  padding: 0;
  margin: 0;
}

.dropdown-menu>.dropdown-item>.dropdown-link {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin: -8px -16px;
  text-decoration: none;
}

.dropdown-menu>.dropdown-item>.dropdown-link>.dropdown-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}

.dropdown-menu>.dropdown-item>.dropdown-link>.dropdown-icon.icon-log-out {
  background-image: url(/static/img/icons/icon-log-out.svg);
}


/* DROPDOWN MENU DOTS */

.dropdown-menu-dots {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.dropdown-menu-dots>.dropdown>.dropdown-button {
  width: 40px;
  height: 40px;
}

.dropdown-menu-dots>.dropdown>.dropdown-button>.dropdown-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  color: var(--color-icon);
  font-size: 24px;
}

.dropdown-menu-dots>.dropdown>.dropdown-content {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  min-width: max-content;
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-lighter);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  z-index: 1;
}

.dropdown-menu-dots>.dropdown>.dropdown-content>a {
  display: block;
  border-bottom: 1px solid var(--color-border-lighter);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  padding: 8px 16px;
  text-decoration: none;
}

.dropdown-menu-dots>.dropdown>.dropdown-content>a:hover {
  background-color: var(--color-dropdown-hover);
}

.dropdown-menu-dots>.dropdown>.dropdown-content>a:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.dropdown-menu-dots>.dropdown>.dropdown-content>a:last-of-type {
  border-bottom: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dropdown-menu-dots>.dropdown:hover>.dropdown-content {
  display: block;
}


/* MAIN */

.app-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  margin: 24px 16px 0;
}


/* FOOTER */

.app-footer {
  padding: 48px 16px 24px;
}

.app-footer .logo-list {
  max-width: 992px;
  margin: 0 auto;
}


/* TB CARD */

.tb-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.tb-card-container-40 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: calc(40% - 12px);
}

.tb-card-container-60 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: calc(60% - 12px);
}

.tb-card-container-50 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: calc(50% - 12px);
}

.tb-card-container-75 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: calc(75% - 12px);
}

.tb-card-container-25 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: calc(25% - 12px);
}

.tb-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}

.tb-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 576px) {
  .tb-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tb-card-header-title {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 28px;
  padding: 0;
  margin: 0;
}

.tb-card-body {
  display: flex;
  flex-direction: column;
}


/* FORM */

.form-group {
  position: relative;
  margin-bottom: 16px;
}

.label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-text-default);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
}

.form-control {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-default);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  padding: 8px;
  transition: border-color .2s;
}

.password-toggle {
  position: absolute;
  top: 2.4rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  padding: 0;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--color-text-dark);
}


/* ICONS */

.alarm-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.last-alarm-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.trash-icon {
  width: 24px;
  height: 24px;
  background-image: url(/static/img/icons/icon-trash.svg);
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 -8px;
}

.left-arrow-icon {
  width: 24px;
  height: 24px;
  background-image: url(/static/img/icons/icon-arrow-left.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.right-arrow-icon {
  width: 24px;
  height: 24px;
  background-image: url(/static/img/icons/icon-arrow-right.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.download-icon {
  width: 16px;
  height: 16px;
  background-image: url(/static/img/icons/icon-download.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.delete-icon {
  width: 16px;
  height: 16px;
  background-image: url(/static/img/icons/icon-delete.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.reset-icon {
  width: 16px;
  height: 16px;
  background-image: url(/static/img/icons/icon-reset.svg);
  background-repeat: no-repeat;
  background-position: center;
}


/* STATUS TAG */

.status-tag {
  display: flex;
  justify-content: center;
  width: fit-content;
  border-radius: 4px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  padding: 2px 8px;
  white-space: nowrap;
}

.status-tag.new {
  background-color: var(--color-status-tag-bg-new);
  border: 1px solid var(--color-status-tag-bg-new);
  color: var(--color-status-tag-text-new);
}

.status-tag.in-process {
  background-color: var(--color-status-tag-bg-in-process);
  border: 1px solid var(--color-status-tag-bg-in-process);
  color: var(--color-status-tag-text-in-process);
}

.status-tag.closed {
  background-color: var(--color-status-tag-bg-closed);
  border: 1px solid var(--color-status-tag-bg-closed);
  color: var(--color-status-tag-text-closed);
}

.status-tag.stopped {
  background-color: var(--color-status-tag-bg-stopped);
  border: 1px solid var(--color-status-tag-bg-stopped);
  color: var(--color-status-tag-text-stopped);
}


/* PRIORITY TAG & ALERT PRIORITY TAG */

.priority-tag,
.alert-priority-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--color-border-lighter);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
}

.priority-tag {
  font-size: 14px;
  line-height: 22px;
  padding: 2px 8px;
}

.alert-priority-tag {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
}

.priority-tag-icon,
.alert-priority-tag-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  color: var(--color-icon);
  font-size: 12px;
  margin-right: 8px;
}

.priority-tag.baja .priority-tag-icon,
.alert-priority-tag.baja .alert-priority-tag-icon {
  color: var(--color-priority-tag-low);
}

.priority-tag.media .priority-tag-icon,
.alert-priority-tag.media .alert-priority-tag-icon {
  color: var(--color-priority-tag-medium);
}

.priority-tag.alta .priority-tag-icon,
.alert-priority-tag.alta .alert-priority-tag-icon {
  color: var(--color-priority-tag-high);
}

.priority-tag.urgente .priority-tag-icon,
.alert-priority-tag.urgente .alert-priority-tag-icon {
  color: var(--color-priority-tag-urgent);
}

.priority-tag.critica .priority-tag-icon,
.alert-priority-tag.critica .alert-priority-tag-icon {
  color: #A00D11;
}


/* FLASH MESSAGES (info, warning, danger) */

.flash-messages-container {
  position: fixed;
  top: 3px;
  left: 50%;
  width: 90%;
  max-width: 576px;
  transform: translateX(-50%);
  z-index: 1050;
  pointer-events: none;
}

.flash-messages-container .alert {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  padding: 12px;
  margin: 0;
  pointer-events: auto;
}

.flash-messages-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 12px;
}

.alert-info .flash-messages-icon {
  background-image: url(/static/img/icons/icon-message-info.svg);
}

.alert-warning .flash-messages-icon {
  background-image: url(/static/img/icons/icon-message-warning.svg);
}

.alert-danger .flash-messages-icon {
  background-image: url(/static/img/icons/icon-message-danger.svg);
}

.flash-messages-text {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  padding: 0;
  margin: 0;
}

.flash-messages-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 40px;
  background: none;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-left: 1px solid transparent;
  padding: 0;
  margin: 4px 0 4px 12px;
}

.alert-info .flash-messages-button {
  background-image: url(/static/img/icons/icon-message-info-close.svg);
  border-left: 1px solid var(--color-message-info-divider);
}

.alert-warning .flash-messages-button {
  background-image: url(/static/img/icons/icon-message-warning-close.svg);
  border-left: 1px solid var(--color-message-warning-divider);
}

.alert-danger .flash-messages-button {
  background-image: url(/static/img/icons/icon-message-danger-close.svg);
  border-left: 1px solid var(--color-message-danger-divider);
}

.flash-messages-container .alert-info {
  --bs-alert-bg: var(--color-message-info-bg);
  --bs-alert-border-color: var(--color-message-info-border);
  --bs-alert-color: var(--color-message-info-text);
  --bs-alert-link-color: var(--color-message-info-text);
}

.flash-messages-container .alert-warning {
  --bs-alert-bg: var(--color-message-warning-bg);
  --bs-alert-border-color: var(--color-message-warning-border);
  --bs-alert-color: var(--color-message-warning-text);
  --bs-alert-link-color: var(--color-message-warning-text);
}

.flash-messages-container .alert-danger {
  --bs-alert-bg: var(--color-message-danger-bg);
  --bs-alert-border-color: var(--color-message-danger-border);
  --bs-alert-color: var(--color-message-danger-text);
  --bs-alert-link-color: var(--color-message-danger-text);
}


/* LOADING */

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .8);
  z-index: 1000;
}

.loading-image {
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* Override browser's autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* -webkit-box-shadow: 0 0 0 30px var(--color-text-primary) inset !important; */
  -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary-dark) inset !important;
  -webkit-text-fill-color: var(--color-text-dark) !important;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.input-button {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}

.input-button-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
}

/* MODAL DE DETALLES DE ALERTA */

.alerta-modal {
  display: none !important;
  position: fixed !important;
  z-index: 9999 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  justify-content: center !important;
  align-items: center !important;
}

.alerta-modal[style*="display: flex"] {
  display: flex !important;
}

.alerta-modal-content {
  background-color: var(--color-bg-primary, white);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.alerta-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.alerta-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.alerta-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.alerta-modal-close:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.alerta-modal-body {
  padding: 24px;
}

.alerta-modal-section {
  margin-bottom: 24px;
}

.alerta-modal-section:last-child {
  margin-bottom: 0;
}

.alerta-modal-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border-lighter);
  padding-bottom: 8px;
}

.alerta-modal-field {
  display: flex;
  margin-bottom: 12px;
}

.alerta-modal-field-label {
  font-weight: 500;
  color: var(--color-text-secondary);
  min-width: 120px;
  margin-right: 12px;
}

.alerta-modal-field-value {
  color: var(--color-text-primary);
  flex: 1;
  word-break: break-word;
}

.alerta-modal-field-value code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Responsive */
@media (max-width: 768px) {
  .alerta-modal-content {
    width: 95%;
    margin: 10px;
  }
  
  .alerta-modal-field {
    flex-direction: column;
  }
  
  .alerta-modal-field-label {
    min-width: unset;
    margin-right: 0;
    margin-bottom: 4px;
  }
}