/*
Trix 1.3.1
Copyright © 2020 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
trix-toolbar * {
  box-sizing: border-box; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%; }
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-dialogs {
  position: relative; }
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
trix-toolbar .trix-dialog--link {
  max-width: 600px; }
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight; }
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }
trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }
trix-editor .trix-button-group {
  display: inline-flex; }
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }
trix-editor .attachment__metadata-container {
  position: relative; }
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }
@charset "UTF-8";
.trix-content {
  line-height: 1.5; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' · '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.trix-content action-text-attachment .attachment__caption {
  margin-top: 10px !important;
}

.trix-content .attachment--file {
  border: 0px !important;
}

.trix-content a {
  text-decoration: underline;
}

trix-editor {
  width: 100%;
}

trix-editor {
  &.input {
    min-height: 24px;
  }

  .attachment--content {
    margin: 0;
    display: inline-flex !important;

    .attachment__toolbar {
      top: 0;
      z-index: 2;
    }
  }
}

trix-editor h1, .trix-content h1 {
  font-size: 1.5rem !important;
  line-height: 1.25rem !important;
  margin-bottom: 1rem;
  font-weight: 600;
}

trix-editor a:not(.no-underline) {
  text-decoration: underline;
}

trix-editor a:visited, .trix-content a:visited {
  color: green;
}

trix-editor ul, .trix-content ul {
  list-style-type: disc !important;
  padding-left: 2rem !important;
}

trix-editor ol, .trix-content ol {
  list-style-type: decimal;
  padding-left: 2rem;
}

trix-editor pre, .trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 1rem;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

trix-editor blockquote, .trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0px;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content .attachment a {
  color: #5D279C;
  text-decoration: underline;
}

trix-toolbar .trix-button-group{
  border-color:rgb(209, 213, 219);
}

@media (max-width: 640px) { 
  .trix-button-group.trix-button-group--history-tools, .trix-button.trix-button--icon.trix-button--icon-link{
    display: none;
  }
}

/* Do not show Trix clip button in RFI modals (use "Add new document") */
.rfi-trix-no-attach .trix-button-group--file-tools,
.rfi-trix-no-attach .trix-button--icon-attach {
  display: none !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "budget_imports";

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button.week {
  @apply bg-white;
  @apply text-gray-900;
}

span.next-month, span.prev-month{ 
  @apply text-gray-400;
}

.today {
  @apply bg-mawi-400;
  @apply font-bold;
  @apply text-mawi-900;
}

.capitalize-first::first-letter {
  text-transform: uppercase;
}

@layer components {
  .btn {
      @apply mt-3 rounded-lg py-1 px-5 inline-block font-medium cursor-pointer bg-mawi;
  }
  
  .inline-edit .edit {
    @apply px-2 py-1 border rounded focus:ring-2 focus:ring-blue-500;
  }
  
  .budget-item.dragging {
    @apply opacity-50 bg-gray-100;
  }
  
  [data-handle] {
    @apply opacity-50 hover:opacity-100 transition-opacity duration-200;
  }
  
  .inline-edit .display {
    @apply transition-colors duration-200;
  }
  
  .inline-edit .display:empty:before {
    content: "Click para editar";
    @apply text-gray-400 italic;
  }
  
  .budget-item td {
    @apply transition-colors duration-200;
  }
  
  .budget-item:hover td {
    @apply bg-gray-50;
  }
  
  .level-1 {
    @apply bg-gray-50 font-semibold;
  }
  
  .level-2 {
    @apply bg-white;
  }
  
  .level-3 {
    @apply bg-blue-50/30;
  }
  
  .level-4 {
    @apply bg-green-50/30;
  }
  
  .level-5 {
    @apply bg-yellow-50/30;
  }
  
  /* Animación de pulso para el botón de envío del chat */
  .pulse-effect {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }

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

.custom-tooltip {
  @apply invisible absolute;
}

.has-tooltip:hover .custom-tooltip {
  @apply visible z-50;
}

@import 'actiontext.css';

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.shadow-right-inset {
  @apply shadow-none;
  box-shadow: inset -1px 0px 0px 0px #D1D1D1;
}

.first-letter-uppercase::first-letter {
  text-transform: uppercase;
}
/* Budget Chat Styles */

/* Animation for fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Budget chat content - Markdown styling */
.budget-chat-content {
  font-size: 0.875rem;
  line-height: 1.5;
}

.budget-chat-content h1,
.budget-chat-content h2,
.budget-chat-content h3,
.budget-chat-content h4 {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.budget-chat-content h1 {
  font-size: 1.25rem;
}

.budget-chat-content h2 {
  font-size: 1.125rem;
}

.budget-chat-content h3 {
  font-size: 1rem;
}

.budget-chat-content p {
  margin-bottom: 0.75rem;
}

.budget-chat-content ul,
.budget-chat-content ol {
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.budget-chat-content ul {
  list-style-type: disc;
}

.budget-chat-content ol {
  list-style-type: decimal;
}

.budget-chat-content li {
  margin-bottom: 0.25rem;
}

.budget-chat-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.8125rem;
}

.budget-chat-content thead {
  background-color: #f3f4f6;
}

.budget-chat-content th,
.budget-chat-content td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.budget-chat-content th {
  font-weight: 600;
  color: #374151;
}

.budget-chat-content tr:nth-child(even) {
  background-color: #f9fafb;
}

.budget-chat-content code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.budget-chat-content pre {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}

.budget-chat-content pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

.budget-chat-content strong {
  font-weight: 600;
  color: #1f2937;
}

.budget-chat-content em {
  font-style: italic;
}

.budget-chat-content blockquote {
  border-left: 4px solid #5D279C;
  padding-left: 1rem;
  margin: 0.75rem 0;
  color: #4b5563;
  background-color: #f9fafb;
  padding: 0.5rem 1rem;
  border-radius: 0 0.25rem 0.25rem 0;
}

.budget-chat-content hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1rem 0;
}

.budget-chat-content a {
  color: #5D279C;
  text-decoration: underline;
}

.budget-chat-content a:hover {
  color: #4A1F7C;
}

/* Custom scrollbar for chat */
#chat-messages::-webkit-scrollbar {
  width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Pulse animation for typing indicator */
@keyframes pulse-dot {
  0%, 60%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Toast notification animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* AI Assistant Button Styles */
.ai-assistant-btn {
  position: relative;
  background: white;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.ai-assistant-btn:hover {
  background-image: linear-gradient(#f9fafb, #f9fafb), linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
}

/* AI Gradient Text */
.ai-gradient-text {
  background: linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.budget-item[data-collapsed="true"] {
  display: none;
}

.level-1 {
  @apply bg-gray-50 font-semibold;
}

.level-2 {
  @apply bg-white;
}

.level-3 {
  @apply bg-blue-50;
}

.level-4 {
  @apply bg-green-50;
}

.level-5 {
  @apply bg-yellow-50;
}

/* Hover effects for all levels */
.level-1:hover {
  @apply bg-gray-100;
}

.level-2:hover {
  @apply bg-gray-50;
}

.level-3:hover {
  @apply bg-blue-100;
}

.level-4:hover {
  @apply bg-green-100;
}

.level-5:hover {
  @apply bg-yellow-100;
}

/* Animation for arrow rotation */
.arrow-down {
  transform: rotate(0deg);
}

.arrow-up {
  transform: rotate(180deg);
}

/* Inline editing styles */
.inline-edit .edit {
  @apply px-2 py-1 border rounded focus:ring-2 focus:ring-blue-500;
}

.budget-item.dragging {
  @apply opacity-50 bg-gray-100;
}

[data-handle] {
  @apply opacity-50 hover:opacity-100 transition-opacity duration-200;
}

.inline-edit .display {
  @apply transition-colors duration-200;
}

.inline-edit .display:empty:before {
  content: "Click para editar";
  @apply text-gray-400 italic;
}

.budget-item td {
  @apply transition-colors duration-200;
}

.budget-item:hover td {
  @apply bg-gray-50;
} 
.ai-gradient-bg {
  background: linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
}

.ai-gradient-bg:hover {
  background: linear-gradient(87.48deg, #4E2085 23.1%, #336D8E 76.9%);
}

.ai-gradient-border {
  position: relative;
  background: white;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.ai-gradient-progress {
  background: linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
}

.bulk-assignment-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.bulk-assignment-card-enter {
  transform: translateX(100px);
  opacity: 0;
}

.bulk-assignment-card-active {
  transform: translateX(0);
  opacity: 1;
}

.bulk-assignment-card-exit-right {
  transform: translateX(100px);
  opacity: 0;
}

.bulk-assignment-card-exit-left {
  transform: translateX(-100px);
  opacity: 0;
}

.bulk-assignment-suggestion-row {
  background-color: rgba(147, 51, 234, 0.03);
}

.bulk-assignment-suggestion-row:hover {
  background-color: rgba(147, 51, 234, 0.06);
}

/* AI gradient border on the dropdown input when suggestion is present */
.bulk-assignment-ai-dropdown input[type="text"].budgetable-name {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.bulk-assignment-ai-dropdown input[type="text"].budgetable-name:focus {
  background-image: linear-gradient(white, white), linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin: auto;
}

.mySlides {
	display: none;
}

/* Next & previous buttons */
.button.prev, .button.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 8px;
	color: rgba(107, 34, 168, 0.3);
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.button.next {
		right: -3%;
		border-radius: 3px 0 0 3px;
}

.button.prev {
		left: -3%;
}

/* On hover, add a black background color with a little bit see-through */
.button.prev:hover, .button.next:hover {
	color: rgba(107, 34, 168, 0.6);
}

/* Fading animation */
.fade-carousel {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade-carousel {
	from {opacity: .4}
	to {opacity: 1}
}
/*Choices.js*/
.choices {
  position: relative;
  background-color: white;
  border: 1px solid #cbd5e0;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  margin-bottom: 2px;
}

.choices[data-type*="select-one"] {
  display: block;
  width: 100%;
  height: 40px;
  padding-bottom: 1rem;
  font-size: 1rem;
  border-color: #cbd5e0;
  outline: none;
  border-radius: 0.375rem;
}

.choices__list--dropdown {
  position: absolute;
  z-index: 10;
  margin-top: -4.2rem !important;
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  max-height: 25rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  outline: none;
}

.choices__item {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 2.25rem;
}

.choices__item--choice {
  display: block;
}

.choices__item--selected {
  background-color: #4c51bf;
  color: white;
}

.choices__item--highlighted {
  background-color: #434190;
  color: white;
}

.choices__inner {
  background-color: white;
  border: none !important;
  font-size: 0.875rem;
}
.choices__item--selectable {
  color: #6b7280;
}
.choices__item .choices__item--choice .has-no-results {
  color: #6b7280;
}
.choices__list--single {
  display: inline-block;
  padding: 2px 16px 4px 4px;
  width: 100%;
}
.choices__item--choice[data-value=""] {
  opacity: 0;
  display: none;
}
.choices[data-type*="select-one"] .choices__input {
  padding-left: 35px !important;
}

.verification-code {
  font-size: 16px;
  padding: 10px;
}

@media (min-width: 250px) {
  .verification-code {
    font-size: 18px;
    padding: 15px;
    width: 3.95rem;
    height: 3.5rem;
    margin: auto;
  }
  .btn-send-code-container {
    margin-right: 20px;
  }
}

@media (min-width: 768px) {
  .verification-code {
    font-size: 20px;
    padding: 20px;
    width: 7rem;
    height: 6.5rem;
    margin: auto;
  }
}

@media (min-width: 1024px) {
  .verification-code {
    font-size: 24px;
    padding: 25px;
    width: 7rem;
    height: 6.5rem;
    margin: auto;
  }
}

@media (min-width: 1280px) {
  .verification-code {
    font-size: 28px;
    padding: 30px;
    width: 7rem;
    height: 6.5rem;
    margin: auto;
  }
}

@media (min-width: 1600px) {
  .verification-code {
    font-size: 32px;
    padding: 35px;
    width: 7rem;
    height: 6.5rem;
    margin: auto;
  }
}
/* Contenedor con scroll horizontal visible y fácil de usar (Mejoras Cronograma) */
.chronogram-table-scroll-wrapper {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.chronogram-table-scroll-wrapper::-webkit-scrollbar {
  height: 10px;
}
.chronogram-table-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.chronogram-table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.chronogram-table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.chronogram-table {
  table-layout: fixed;
  width: max-content;  
}

.chronogram-table col.chronogram-col-checkbox {
  width: 48px;
}


.chronogram-table col.chronogram-col-desc {
  width: max-content;
  min-width: 400px;
}

.chronogram-table col.chronogram-col-date-range {
  width: 300px;
}

.chronogram-table col.chronogram-col-duration {
  width: 150px;
}

.chronogram-table col.chronogram-col-progress {
  width: 200px;
}

.chronogram-table col.chronogram-col-status {
  width: 110px;
}

.chronogram-table col.chronogram-col-actions {
  width: 70px;
}

.chronogram-table col.chronogram-col-generic {
  width: 240px;
}

.chronogram-date-range-left {
  text-align: left !important;
}

.chronogram-date-range-left * {
  text-align: left !important;
  justify-content: flex-start !important;
}

.chronogram-date-range-left > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}


.chronogram-table col.chronogram-col-actions {
  width: 10px;
}

.chronogram-table col.chronogram-col-icons {
  width: 10px;
}

.daterangepicker {
  z-index: 999999 !important;
}



.simple-popover__content {
  position: relative;
  border-radius: 6px;
  background: #000;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

.simple-popover__content::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #000;
}

.simple-popover--right {
  left: auto;
  right: 0;
  transform: none;
}

.simple-popover--right .simple-popover__content::before {
  left: auto;
  right: 10px;
  transform: none;
}
/* AI classification button - icon animation during "Clasificando..." state */
/* Alterna entre morado claro y el gradiente púrpura–teal de forma más visible */

.classification-button-icon--loading {
  background: linear-gradient(
    90deg,
    #D8B8F8 0%,
    #D8B8F8 15%,
    #6B2BAD 35%,
    #2A7FA6 65%,
    #D8B8F8 85%,
    #D8B8F8 100%
  ) !important;
  background-size: 400% 100% !important;
  background-position: 0% 50% !important;
  animation: classification-icon-pulse 2.5s ease-in-out infinite;
}

@keyframes classification-icon-pulse {
  0%, 100% {
    /* Morado claro visible */
    background-position: 0% 50%;
    filter: hue-rotate(0deg) saturate(1.15);
  }
  50% {
    /* Gradiente morado–teal visible, ligero shift hacia cyan */
    background-position: 100% 50%;
    filter: hue-rotate(45deg) saturate(1.35);
  }
}
.files-list {
  @apply bg-white rounded-lg border;
}

.files-list-header {
  @apply sticky top-0 bg-gray-50 z-10;
}

.files-list-body > div {
  @apply cursor-pointer;
}

.files-list-body > div:hover {
  @apply bg-gray-50;
}

/* For the file actions that appear on hover */
.file-actions {
  @apply invisible group-hover:visible absolute right-4;
} 
.guided-card {
  border-width: 1px;
  border-color: #E5E7EB;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.guided-card:hover {
  border-color: #6C2BD9;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.guided-icon-badge {
  background-color: #F4ECFF;
}

.guided-dot {
  background-color: #6C2BD9;
}
.usage-guide-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.usage-guide-icon {
  background-color: #F4ECFF;
  border-radius: 9999px;
}

.usage-guide-max-text {
  max-width: 560px;
}

/* Ejemplo completo (tabla) */
.row-hover-line {
  position: relative;
}

.row-hover-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #7c3aed;
  opacity: 0;
  transform: scaleX(0.95);
  transition: opacity 150ms ease, transform 150ms ease;
}

.row-hover-line:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.level-badge {
  transition: background-color 150ms ease, transform 150ms ease;
}

.row-hover-line:hover .level-badge {
  background-color: #4c1d95 !important;
  transform: translateY(-0.5px);
}
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: black;
    width: 1px;
    border-radius: 10px;
}

/* Handle on hover */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}



.custom-tom-select.ts-control {
    padding: 2.5px !important;
}

.custom-tom-select.ts-wrapper:focus {
    border-radius: 0.375rem !important; /* `rounded` en Tailwind */
}

.custom-tom-select.ts-control:disabled,
.custom-tom-select.ts-wrapper:disabled {
    border-radius: 0.375rem !important; /* `rounded-md` en Tailwind */
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
.custom-tom-select.ts-wrapper.plugin-remove_button.disabled .ts-control .item .remove {
    display: none !important;
}

.custom-tom-select.ts-dropdown-content:focus {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* `shadow-xl` */
}

.custom-tom-select.ts-wrapper.plugin-remove_button .item {
    border-radius: 0.375rem !important; /* `rounded-md` */
}

.custom-tom-select.ts-wrapper.multi .ts-control > div {
    cursor: pointer !important;
    background: #F7F0FF !important;
    color: #000 !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 4px !important;
}

.custom-tom-select.ts-wrapper.plugin-remove_button .item .remove {
    border: none !important;
    font-size: 1.125rem !important; /* `text-lg` */
    line-height: 1 !important;
    padding: 0.25rem !important;
    border-radius: 0.375rem !important; /* `rounded-r-lg` */
}

.custom-tom-select.ts-dropdown {
    border-radius: 0.375rem !important; /* `rounded-md` */
    border: 1px solid #d1d5db !important;
    border-top-width: 1px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* `shadow-xl` */
}

.custom-tom-select.ts-dropdown [data-selectable].option:first-child {
    border-radius: 0.375rem 0.375rem 0 0 !important; /* `rounded-t-md` */
}

.custom-tom-select.ts-dropdown [data-selectable].option:last-child {
    border-radius: 0 0 0.375rem 0.375rem !important; /* `rounded-b-md` */
}

.custom-tom-select.ts-dropdown .create:hover,
.custom-tom-select.ts-dropdown .option:hover,
.custom-tom-select.ts-dropdown .active {
    background-color: #1D4ED8 !important; /* `bg-blue-600` */
    color: #fff !important;
}

.custom-tom-select.ts-wrapper .option .title {
    display: block !important;
}

.custom-tom-select.ts-wrapper .option .url {
    font-size: 12px !important;
    display: block !important;
    color: #a0a0a0 !important;
}

.custom-tom-select.ts-dropdown-content {
    background-color: #F3F4F6 !important; /* `bg-gray-50` */
    color: #111827 !important; /* `text-gray-900` */
    border-color: #D1D5DB !important; /* `border-gray-300` */
    border-radius: inherit !important;
}

.custom-tom-select.ts-wrapper .ts-control,
.custom-tom-select.ts-dropdown.single {
    border-radius: 8px !important;
    background-color: #F9FAFB !important; /* `bg-gray-50` */
    border-color: #D1D5DB !important; /* `border-gray-300` */
    box-shadow: none !important;
}

.custom-tom-selects-wrapper .item {
    color: #111827 !important; /* `text-gray-900` */
}

.custom-tom-select.ts-wrapper .ts-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-color: #ffffff !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
}

.custom-tom-select.ts-control-wrapper {
    position: relative !important;
    width: 100% !important;
    border-radius: 0.375rem !important; /* `rounded-md` */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; /* `shadow-sm` */
    border: 1px solid #D1D5DB !important; /* `border-gray-300` */
    color: #111827 !important; /* `text-gray-900` */
    font-size: 1rem !important; /* `text-base` */
    line-height: 1.5rem !important; /* `leading-6` */
    background-color: #ffffff !important;
}

.custom-tom-select .ts-control {
    border: 1px solid #d0d0d0 !important;
    min-height: 2rem !important;
    padding: 3px 3px 3px 8px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.custom-tom-select.has-items .ts-control > input::placeholder {
    opacity: 0;
}

.custom-tom-select.ts-wrapper .dropdown-header {
    position: static !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
}
.custom-tom-select.border-red-500 .ts-control {
    border-color: #ef4444 !important;
}
/* Styling for the pagination container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    border: 1px solid;
    border-color: rgba(209, 213, 219, 0.722);
    border-radius: 5px;
    width: 10% !important;
  }

  /* Override for grouped projects pagination */
  .pagination.mawi {
    width: auto !important;
    padding: 6px 10px;
    gap: 10px;
  }

  .pagination.mawi span.prev a,
  .pagination.mawi span.next a {
    border: 1px solid rgba(209, 213, 219, 0.722);
    border-radius: 4px;
    padding: 4px 10px;
    background-color: white;
  }

  .pagination.mawi span.prev a:hover,
  .pagination.mawi span.next a:hover {
    background-color: rgba(249, 250, 251, 1);
  }


  .pagination span.prev,
  .pagination span.next {
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 24px !important;
  }
 
  .pagination span.page.gap {
    color: rgba(0, 0, 0, 0.512);
  }
  
  .pagination span.page.current {
    font-weight: bold;
    color: black;
    border-radius: 50%;
  }

  /* Styling for the current page */
  .pagination span.page,
  .pagination span.page.gap a,
  .pagination a,
  .pagination span.prev a,
  .pagination span.next a,
  .pagination span.prev,
  .pagination span.next {
    color: rgba(0, 0, 0, 0.512);
  }

  /* Styling for the other pages */
  .pagination li a {
    color: gray;
    text-decoration: none;
  }
  
  /* Styling for the hover effect */
  .pagination span a:hover,
  .pagination a:hover,
  .pagination span.prev a:hover,
  .pagination span.next a:hover {
    color: black;
  }

  .pagination span.page.gap {
    padding: 5px 10px;
  }

  .custom-pagi-info {
    width: 15%;
    border: 1px solid;
    border-color: rgba(209, 213, 219, 0.722);
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
  }
.dropzone {
  min-height: 20px !important;
  display: flex;
  border-radius: 5px  !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.dropzone .dz-message {
  text-align: center !important;
  margin: 0.3em 0 !important;
}

.dropzone .dz-preview .dz-remove {
  font-size: 12px !important;
  --tw-text-opacity: 1;
  color: rgb(160 163 189/var(--tw-text-opacity));
  border: none;
}

.dropzone .dz-preview .dz-details {
  top: 15px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  top: 30% !important;
  border-radius: 15px;
  margin-left: -36px !important;
  margin-top: -27px;
  background: rgba(0, 0, 0, 0.85) !important;
  padding: 10px !important;
}

.dropzone .dz-preview .dz-error-message {
  font-size: 12px !important;
  top: 90px !important;
  background: #b10606ed !important;
}
.dropzone .dz-preview .dz-error-message:after {
  border-bottom: 6px solid #b10606ed !important;
} 

.file_container{
  width: 20vw;
  text-overflow: ellipsis;
}
/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}
.attachment {
  display: flex !important;
  position: relative;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Tribute styles */
.tribute-container {
  z-index: 10;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);
}

.tribute-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tribute-container li {
  background: #fff;
  padding: 0.2em 1em;
  min-width: 15em;
  max-width: 100%;
}

.tribute-container .highlight {
  background: #1b6ac9;
  color: #fff;
}

.tribute-container .highlight span {
  font-weight: bold;
}
/* Expense / invoice "Asignación de gastos" — scoped; do not add to application.tailwind.css */

.expense-distribution-show-table table {
  table-layout: auto;
  width: 100%;
  text-align: left;
}

.expense-distribution-show-table th,
.expense-distribution-show-table td {
  vertical-align: top;
  text-align: left;
}

/* Text + toggle in one row; toggle aligned to the bottom of the text block (last visible line)
   so "Ver menos" stays next to the end of the text after expand (no need to scroll up to close). */
.expense-distribution-show-table .expense-line-description {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 0.25rem;
  width: 100%;
  justify-content: start;
}

/* Text clamp: inner <p> has -webkit-box (not the grid item that sizes the row alone). */
.expense-distribution-show-table .expense-line-description-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
  -webkit-box-pack: start;
}

.expense-distribution-show-table .expense-line-description-text-wrap {
  justify-self: stretch;
  min-width: 0;
  width: 100%;
  text-align: left;
}

.expense-distribution-show-table .expense-line-description-text-wrap p {
  text-align: left;
}

.expense-distribution-show-table .expense-line-description-toggle {
  justify-self: start;
  width: max-content;
}

/* Narrow value columns: a bit wider than minimum content; description stays capped separately */
.expense-distribution-show-table .expense-distribution-col-narrow {
  white-space: nowrap;
  min-width: 5.75rem;
}

/* Cap width so the column does not span most of the row (~half of previous ~600px+ behavior). */
.expense-distribution-show-table .expense-distribution-col-description {
  min-width: 12rem;
  max-width: 20rem;
  text-align: left;
}

.expense-distribution-show-table th.expense-distribution-col-description,
.expense-distribution-show-table td.expense-distribution-col-description {
  text-align: left;
}

.expense-distribution-show-table .expense-distribution-col-code {
  min-width: 7rem;
  max-width: 12rem;
}

.expense-distribution-show-table .expense-distribution-col-category {
  min-width: 7rem;
  max-width: 14rem;
}

.expense-distribution-show-table .expense-distribution-col-spacer {
  width: 0.25rem;
  min-width: 0.25rem;
  max-width: 1.5rem;
}
.filter-container{
    background: #F7F7FB;
    border-radius: 8px;
}

.scroller{
    max-height: 7rem; 
    overflow-y: auto;
}

.filter-container::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.filter-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.filter-container::-webkit-scrollbar-thumb,
.filter-container::-webkit-scrollbar-thumb:hover {
    background: #6a5782;
}
.column-filter-dropdown{
    width: 370px !important;
  }
/* Estilos para impresión del reporte financiero */

@media print {
  @page {
    size: landscape;
    margin: 0.4cm; 
  }
  
  body.financial-report-printing html,
  body.financial-report-printing {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    zoom: 0.9 !important;
  }
  
  body.financial-report-printing .overflow-x-auto {
    overflow: visible !important;
  }
  
  body.financial-report-printing .fixed-column-header,
  body.financial-report-printing .fixed-column,
  body.financial-report-printing .fixed-bottom-column {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  
  body.financial-report-printing #tabla-reporte {
    transform: scale(0.95) !important;
    transform-origin: top left !important;
  }
  
  body.financial-report-printing table {
    page-break-inside: avoid !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }
  
  body.financial-report-printing td,
  body.financial-report-printing th {
    page-break-inside: avoid !important;
    font-size: 10px !important;
  }
  
  body.financial-report-printing #report-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 1.25rem 2.5rem !important;
    border-bottom: 1px solid #ECECEC !important;
  }
  
  body.financial-report-printing #logo-container {
    width: 10rem !important; /* w-40 */
    height: 10rem !important; /* h-40 */
    display: block !important;
    overflow: visible !important;
  }
  
  body.financial-report-printing #logo-container img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    max-width: none !important;
    max-height: none !important;
  }
  
  body.financial-report-printing button,
  body.financial-report-printing .print\:hidden,
  body.financial-report-printing [data-action="click->financial-report-printer#printPdf"] {
    display: none !important;
  }
  
  body.financial-report-printing p.whitespace-nowrap {
    white-space: normal !important;
    font-size: 10px !important;
  }
  
  body.financial-report-printing .sticky {
    position: static !important;
  }
  
  body.financial-report-printing [class*="min-w-"],
  body.financial-report-printing [class*="max-w-"] {
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
  }
} 
/* Estilos para las celdas de acciones que contienen los tres puntos */
td[data-column-name="actions"],
td.actions,
td[data-components--sortable-table-target="column"][data-column-name="actions"],
.actions {
  position: sticky !important;
  right: 0 !important;
  z-index: 1 !important; /* Valor muy bajo */
  background-color: white !important;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05) !important;
}

/* Todos los encabezados de tabla */
th[data-column-name="actions"],
th.actions,
th[data-components--sortable-table-target="column"][data-column-name="actions"] {
  position: sticky !important;
  right: auto !important; /* Para que solo el último thead tenga right:0 */
  z-index: 10 !important; /* Valor moderado - por encima de los tres puntos pero por debajo de modales */
}

/* Específicamente el encabezado de acciones */
th[data-column-name="actions"],
th.actions {
  right: 0 !important;
  z-index: 11 !important; /* Ligeramente más alto para el encabezado de acciones */
}

.dropdown-actions-menu:has([data-stimulus-dropdown-target="menu"]:not(.hidden)) {
  z-index: 99999 !important;
}

td[data-column-name="actions"]:has(.dropdown-actions-menu [data-stimulus-dropdown-target="menu"]:not(.hidden)),
.sticky-actions-column:has(.dropdown-actions-menu [data-stimulus-dropdown-target="menu"]:not(.hidden)) {
  z-index: 99999 !important;
} 

.dropdown-actions-button {
  position: relative !important;
  z-index: 10 !important;
}
.gantt_side_content.gantt_link_crossing {
  bottom: 8px;
  top: 2px !important;
}
/* Estilos para el modal de inspección - Versión simplificada */

/* Solo ocultar las flechas del dropdown, NO el contenido */
.inspection-dropdown-text .select-arrow,
.inspection-dropdown-text .chevron-down,
.inspection-dropdown-text .select-arrow-icon,
.inspection-dropdown-text .dropdown-icon,
.inspection-dropdown-text .select-icon,
.inspection-dropdown-text .pointer-events-none {
  display: none !important;
}

/* Ocultar específicamente el contenedor del chevron-down */
.inspection-dropdown-text .pointer-events-none.absolute.inset-y-0.right-0.flex.items-center.pr-3 {
  display: none !important;
}

/* Hacer que los valores existentes también sean clickeables */
.inspection-value-clickable {
  cursor: pointer !important;
  transition: opacity 0.2s ease-in-out !important;
}

.inspection-value-clickable:hover {
  opacity: 0.8 !important;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Solo para el selector de asignados en el modal de registros independientes */
[data-assigned-container="true"] .ts-dropdown {
  position: static !important;
  margin-top: 4px;
}

[data-assigned-container="true"] .ts-dropdown .ts-dropdown-content {
  max-height: 140px;
  overflow-y: auto;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgb(185, 138, 185);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
/* ===== Material Allocations (merged) ===== */
/* Container & layout */
.material-allocations-container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.material-allocations-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem;
}

.material-allocations-filters {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.material-allocations-table {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Rows */
.material_allocation__row {
  transition: background-color 0.2s ease;
  height: 2.5rem;
}

/* Unified hover color (uses Tailwind gray-50 tone) */
.material_allocation__row:hover {
  background-color: #f9fafb;
}

/* Active/selected */
.material_allocation__row--active {
  color: #5D279C;
}

/* When hovering a row, emphasize active project task label */
.material_allocation__row:hover .project_task__row--active {
  text-decoration: underline;
  font-weight: 600;
  color: black;
}

/* Expandible line behavior */
.material_allocation__row.expandible-line {
  cursor: pointer;
}

.material_allocation__row.expandible-line:hover {
  background-color: #f3f4f6;
}

/* Icons on hover */
.material_allocation__row:hover .icon {
  display: block;
}

.icon--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.material_allocation__row:hover .icon--hidden {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Expand icon styles */
.expand-icon-right {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.expand-icon-right:hover {
  transform: scale(1.1);
  color: #5D279C;
}

.expand-icon-right.expand-icon-left {
  transform: rotate(180deg);
}

/* Expandible column styles */
.default-expandible {
  width: 18rem;
}

.custom-expandible {
  width: 28rem;
}

.custom-expandible .unexpanded-text {
  display: none;
}

.custom-expandible .expanded-text {
  display: inline-block;
}

.expandible-line:not(.custom-expandible) .unexpanded-text {
  display: inline-block;
}

.expandible-line:not(.custom-expandible) .expanded-text {
  display: none;
}

/* Dropdown actions */
.dropdown-actions-button {
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.dropdown-actions-button:hover {
  background-color: #f3f4f6;
}

.dropdown-actions-menu {
  z-index: 50;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* AI suggestion cards */
.ai-suggestion {
  background-color: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 0.375rem;
  padding: 0.5rem;
}

.ai-suggestion--accepted {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.ai-suggestion--rejected {
  background-color: #fef2f2;
  border-color: #fecaca;
}

/* Material selection dropdown */
.material-selection-dropdown {
  font-size: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: white;
  min-width: 150px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.material-selection-dropdown:focus {
  outline: none;
  border-color: #5D279C;
  box-shadow: 0 0 0 3px rgba(93, 39, 156, 0.1);
}

/* Action buttons */
.action-button {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.action-button--accept {
  background-color: #059669;
  color: white;
}

.action-button--accept:hover {
  background-color: #047857;
}

.action-button--reject {
  background-color: #dc2626;
  color: white;
}

.action-button--reject:hover {
  background-color: #b91c1c;
}

/* Table specifics */
.material-allocations-table table {
  width: 100%;
  border-collapse: collapse;
}

.material-allocations-table th {
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #d1d5db;
  height: 2.5rem;
  font-weight: 600;
  color: #717171;
}

.material-allocations-table td {
  border-bottom: 1px solid #ececec;
  height: 2.5rem;
  vertical-align: middle;
}

.material-allocations-table tr:hover {
  background-color: #f9fafb;
}

/* Pagination */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1.25rem;
  gap: 0.5rem;
}

.pagination-info {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.75rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem;
  height: 2.5rem;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #f3f4f6;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  color: #9ca3af;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5d279c;
  margin-bottom: 0.5rem;
}

.empty-state-description {
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.empty-state-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.empty-state-btn.primary {
  background-color: #5d279c;
  color: white;
}

.empty-state-btn.primary:hover {
  background-color: #4c1d95;
}

.empty-state-btn.secondary {
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

.empty-state-btn.secondary:hover {
  background-color: #f9fafb;
}

/* Responsive */
@media (max-width: 768px) {
  .material_allocation__row {
    font-size: 0.875rem;
  }

  .action-button {
    padding: 0.125rem 0.25rem;
    font-size: 0.625rem;
  }

  .material-selection-dropdown {
    min-width: 120px;
    font-size: 0.625rem;
  }
}
/* Mobile Layout Styles - BEM Methodology */

/* ==========================================================================
   BLOCK: Mobile Layout
   ========================================================================== */

.mobile-layout {
  /* Base styles for mobile layout */
}

/* Elements */
.mobile-layout__container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.mobile-layout__header {
  background: linear-gradient(135deg, #5D279C 0%, #7C3AED 100%);
  color: white;
  padding: 1rem;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: #14a70c;
}

.mobile-layout__header-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.mobile-layout__content {
  padding: 0.1rem;
  min-height: calc(100vh - 120px);
}

/* Global reset for mobile layout */
.mobile-layout * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mobile-layout__body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

/* ==========================================================================
   BLOCK: Mobile Card
   ========================================================================== */

.mobile-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==========================================================================
   BLOCK: Mobile Button
   ========================================================================== */

.mobile-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
}

/* Modifiers */
.mobile-btn--primary {
  background: #5D279C;
  color: white;
}

.mobile-btn--primary:hover {
  background: #4C1D7A;
}

.mobile-btn--secondary {
  background: #6B7280;
  color: white;
}

/* ==========================================================================
   BLOCK: Mobile Observation Item
   ========================================================================== */

.mobile-observation-item {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: white;
}

/* ==========================================================================
   BLOCK: Mobile Alert
   ========================================================================== */

.mobile-alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Modifiers */
.mobile-alert--success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.mobile-alert--error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

/* ==========================================================================
   BLOCK: Mobile Loading
   ========================================================================== */

.mobile-loading {
  display: none;
  text-align: center;
  padding: 2rem;
}

/* Elements */
.mobile-loading__spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #5D279C;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: mobile-loading__spin 1s linear infinite;
  margin: 0 auto 1rem;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes mobile-loading__spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 
/* Estilos del modal de solicitud de materiales: barra de asignación grupal (solo .material-requests-bulk-actions-inline) */

.material-requests-bulk-actions-inline [data-components--shared--bulk-actions--code-association-and-tax-target="initialForm"] {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0;
}

.material-requests-bulk-actions-inline [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"]:not(.hidden),
.material-requests-bulk-actions-inline [data-components--shared--bulk-actions--code-association-and-tax-target="categoryForm"]:not(.hidden),
.material-requests-bulk-actions-inline [data-components--shared--bulk-actions--code-association-and-tax-target="taxForm"]:not(.hidden),
.material-requests-bulk-actions-inline [data-components--shared--bulk-actions--code-association-and-tax-target="discountForm"]:not(.hidden) {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.material-requests-bulk-actions-inline [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="customInput"] {
  min-width: 14rem;
  max-height: 2rem;
  box-sizing: border-box;
}

.material-requests-bulk-actions-inline [data-code-association-with-menu-target="menu"] {
  left: 50%;
  transform: translateX(calc(-50% + 0.5rem));
}
/* Modal Overlay Styles */
.modal-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.249);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.modal-overlay-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Ensure modal is above the backdrop */
.modal-content-budget-massive-action {
  z-index: 9999999;
  position: relative;
}

/* Generic bulk actions container hiding - works for any bulk actions menu */
.modal-overlay-backdrop.active ~ [data-bulk-actions-container] {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

/* Generic content blur for bulk actions modals only - more specific */
body.bulk-actions-modal-open ~ [data-content-container] {
  filter: blur(2px);
  transition: filter 0.3s ease-in-out;
}

/* Backward compatibility - keep specific budget selectors for now */
.modal-overlay-backdrop.active ~ .budget-massive-actions-container {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

body.modal-open-budget-massive-action .budget-table-container {
  filter: blur(2px);
  transition: filter 0.3s ease-in-out;
}

body.modal-open-budget-massive-action .budget-summary-container {
  filter: blur(2px);
  transition: filter 0.3s ease-in-out;
} 
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}
/* Styles for the ordering system */
.ordering-criteria {
    transition: all 0.2s ease-in-out;
    background-color: white;
  }
  
  
  .ordering-select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    outline: none;
  }
  
  /* Styles for the direction checkboxes */
  .ordering-direction-asc,
  .ordering-direction-desc {
    transition: all 0.2s ease-in-out;
  }
  
  .ordering-direction-asc:checked,
  .ordering-direction-desc:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
  }
  
  .ordering-direction-asc:checked:hover,
  .ordering-direction-desc:checked:hover {
    background-color: #6d28d9;
    border-color: #6d28d9;
  }
  
  /* Styles for the delete button */
  .remove-criteria {
    transition: all 0.2s ease-in-out;
  }
  
  .remove-criteria:hover {
    transform: scale(1.1);
    background-color: #fef2f2;
  }
  
  /* Styles for the disabled button */
  button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  /* Animation to add criteria */
  .ordering-criteria {
    animation: slideIn 0.3s ease-out;
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Improve spacing and typography */
  .ordering-criteria label {
    font-weight: 500;
    color: #374151;
  }
  
  .ordering-criteria select {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  /* Styles for the direction checkboxes */
  .ordering-criteria input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
  }
  
  .ordering-criteria input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }
  
  
  /* Tooltip for disabled options */
  .ordering-select option:disabled::after {
    content: " (No disponible - ya agrupado)";
    color: #ef4444;
    font-weight: 500;
  }
  
  /* Styles for disabled buttons in grouping dropdown */
  button[data-grouping-value]:disabled {
    color: #747b87 !important;
    font-style: italic;
    cursor: not-allowed !important;
  }
  
  button[data-grouping-value]:disabled:hover {
    background-color: #f3f4f6 !important;
  }
  
  /* Styles for disabled buttons in ordering dropdown */
  button[data-criteria-value]:disabled {
    color: #747b87 !important;
    font-style: italic;
    cursor: not-allowed !important;
  }
  
  button[data-criteria-value]:disabled:hover {
    background-color: #f3f4f6 !important;
  }
  
  /* Styles for lists in rich text content */
  .rich-text-content ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 16px;
  }
  
  .rich-text-content ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 16px;
  }
  
  .rich-text-content li {
    margin-bottom: 4px;
    line-height: 1.5;
  }
  
  .rich-text-content p {
    margin-bottom: 8px;
  }
  
html,
body {
  background: #fff !important;
}
@media print {
  html,
  body {
    width: 100%;
    height: 100%;
  }
  @page {
    size: letter;
    margin: 1.5cm;
  }
  .page-break {
    display: none !important;
  }
  table {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  thead {
    display: table-header-group !important;
  }
  tfoot {
    display: table-footer-group !important;
  }
  table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  th,
  td {
    border: 1px solid #ececec !important;
    padding: 8px !important;
  }
  .detalles-generales {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Expense PDF — app/views/expenses/pdf.html.erb (.expense-pdf-root) */
  html:has(.expense-pdf-root),
  body:has(.expense-pdf-root) {
    width: 100%;
    height: 100%;
  }

  .expense-pdf-root table {
    page-break-inside: auto !important;
  }

  .expense-pdf-root thead {
    display: table-header-group !important;
  }

  .expense-pdf-root .expense-pdf-line-tables tbody tr {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
}

/* Expense PDF — app/views/expenses/pdf.html.erb (tabla asignación de gastos) */
.expense-pdf-root .expense-pdf-line-tables table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.expense-pdf-root .expense-pdf-line-tables td,
.expense-pdf-root .expense-pdf-line-tables th {
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.project_taks__row:hover {
  background-color: #F7F7F7;
}

.project_taks__row:hover .icon {
  display: block;
}

.icon--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.project_taks__row:hover .icon--hidden {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project_taks__row:hover .project_task__row--active {
  text-decoration: underline;
  font-weight: 600;
  color: black
}
/* ============================================
   Proposal Editor — AI UX Animations
   ============================================ */

/* ── Typing Indicator Dots ────────────────── */
.proposal-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.proposal-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.proposal-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #7c3aed;
  animation: proposalPulseDot 1.4s ease-in-out infinite;
}

.proposal-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.proposal-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes proposalPulseDot {
  0%, 60%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.3);
    opacity: 0.5;
  }
}

/* ── Row Slide-Down Animation ─────────────── */
@keyframes proposalSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.proposal-row-animate-in {
  animation: proposalSlideDown 0.35s ease-out both;
}

/* ── Row Highlight Pulse (modified rows) ──── */
@keyframes proposalHighlightPulse {
  0% { background-color: rgba(250, 204, 21, 0.5); }
  50% { background-color: rgba(250, 204, 21, 0.25); }
  100% { background-color: rgba(250, 204, 21, 0.5); }
}

.proposal-row-modified-pulse {
  animation: proposalHighlightPulse 1.2s ease-in-out 3;
}

/* ── Highlight Fade-Out Transitions ───────── */
.proposal-row-highlight {
  transition: background-color 2s ease-out, box-shadow 2s ease-out;
}

.proposal-row-highlight-added {
  background-color: rgba(187, 247, 208, 0.6) !important;
  box-shadow: inset 3px 0 0 0 #22c55e, inset 0 0 0 1px rgba(74, 222, 128, 0.4);
}

.proposal-row-highlight-modified {
  background-color: rgba(254, 240, 138, 0.6) !important;
  box-shadow: inset 3px 0 0 0 #eab308, inset 0 0 0 1px rgba(250, 204, 21, 0.4);
}

.proposal-row-highlight-fading {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px transparent !important;
}

/* ── Suggestion Chips ─────────────────────── */
.proposal-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e9d5ff;
  border-radius: 9999px;
  background-color: #faf5ff;
  color: #7c3aed;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.proposal-suggestion-chip:hover {
  background-color: #ede9fe;
  border-color: #c4b5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(124, 58, 237, 0.15);
}

.proposal-suggestion-chip:active {
  transform: translateY(0);
}

/* ── Change Summary Card ──────────────────── */
.proposal-change-summary {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  animation: proposalSlideDown 0.3s ease-out;
}

.proposal-change-summary-title {
  font-weight: 600;
  color: #5b21b6;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.proposal-change-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.proposal-change-summary-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.proposal-change-summary-stat.added {
  background-color: #dcfce7;
  color: #166534;
}

.proposal-change-summary-stat.modified {
  background-color: #fef9c3;
  color: #854d0e;
}

.proposal-change-summary-stat.total {
  background-color: #e0e7ff;
  color: #3730a3;
}

.proposal-change-summary-message {
  color: #6b21a8;
  font-size: 0.8125rem;
  margin-top: 4px;
  line-height: 1.4;
}

/* ── AI Gradient for Proposal Header ──────── */
.proposal-ai-gradient-text {
  background: linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Chat Message Fade-in ─────────────────── */
.proposal-chat-fade-in {
  animation: proposalSlideDown 0.3s ease-out;
}

/* ── Insights Tab Bar ────────────────────── */
.proposal-tab-active {
  color: #5D279C;
  border-bottom: 2px solid #5D279C;
  background-color: #faf5ff;
}

.proposal-tab-inactive {
  color: #6b7280;
  border-bottom: 2px solid transparent;
}

.proposal-tab-inactive:hover {
  color: #374151;
  background-color: #f9fafb;
}

/* ── Collapsed Sidebar for Editor ─────────── */
body.proposal-editor-active .md\:fixed.md\:inset-y-0.md\:flex.md\:w-64 {
  width: 5rem !important;
}

body.proposal-editor-active .sidebar-padding {
  padding-left: 5rem !important;
  overflow-x: hidden;
}

/* ── Two-Column Editor Layout ─────────────── */
.proposal-editor-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - 64px);
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.proposal-editor-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.5rem 1rem 1.5rem 1rem;
}

.proposal-editor-chat {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e5e7eb;
  background-color: #fff;
  height: 100%;
  overflow: hidden;
}
.range-slider{touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;display:block;position:relative;width:100%;height:8px;background:#ddd;border-radius:4px}.range-slider[data-vertical]{height:100%;width:8px}.range-slider[data-disabled]{opacity:.5;cursor:not-allowed}.range-slider .range-slider__thumb{position:absolute;z-index:3;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;background:#2196f3}.range-slider .range-slider__thumb:focus-visible{outline:0;box-shadow:0 0 0 6px rgba(33,150,243,.5)}.range-slider[data-vertical] .range-slider__thumb{left:50%}.range-slider .range-slider__thumb[data-disabled]{z-index:2}.range-slider .range-slider__range{position:absolute;z-index:1;transform:translate(0,-50%);top:50%;width:100%;height:100%;background:#51adf6}.range-slider[data-vertical] .range-slider__range{left:50%;transform:translate(-50%,0)}.range-slider input[type=range]{-webkit-appearance:none;pointer-events:none;position:absolute;z-index:2;top:0;left:0;width:0;height:0;background-color:transparent}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none}.range-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:0}.range-slider input[type=range]:focus{outline:0}
/*
 * reCAPTCHA Badge Universal Visibility Fix
 * 
 * Solución universal para asegurar que el badge de reCAPTCHA siempre sea visible
 * en todos los entornos (development, staging, production)
 */

/* Fuerza el badge de reCAPTCHA a ser siempre visible y bien posicionado */
.grecaptcha-badge {
  position: fixed !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 2147483647 !important; /* Z-index máximo para estar por encima de todo */
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: auto !important;
  transform: none !important;
  
  /* Resetear cualquier estilo que pueda interferir */
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  mask: none !important;
  
  /* Prevenir animaciones que puedan ocultarlo */
  transition: none !important;
  animation: none !important;
}

/* Asegurar que el iframe del badge también sea visible */
.grecaptcha-badge iframe {
  position: relative !important;
  z-index: 2147483647 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

/* Prevenir que contenedores padre oculten el badge */
html .grecaptcha-badge,
body .grecaptcha-badge,
* .grecaptcha-badge {
  position: fixed !important;
  z-index: 2147483647 !important;
}

/* Ajustes responsive para diferentes tamaños de pantalla */
@media screen and (max-width: 480px) {
  .grecaptcha-badge {
    right: 5px !important;
    bottom: 5px !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .grecaptcha-badge {
    right: 8px !important;
    bottom: 8px !important;
  }
}

@media screen and (min-width: 1200px) {
  .grecaptcha-badge {
    right: 15px !important;
    bottom: 15px !important;
  }
}

/* Ajustes para elementos comunes que pueden interferir */
/* Widgets de chat (Intercom, Crisp, etc.) */
body:has([id*="intercom"]) .grecaptcha-badge,
body:has([class*="intercom"]) .grecaptcha-badge,
body:has([id*="crisp"]) .grecaptcha-badge,
body:has([class*="crisp"]) .grecaptcha-badge,
body:has([class*="chat"]) .grecaptcha-badge {
  bottom: 70px !important;
}

/* Banners de cookies */
body:has([id*="cookie"]) .grecaptcha-badge,
body:has([class*="cookie"]) .grecaptcha-badge,
body:has([class*="gdpr"]) .grecaptcha-badge {
  bottom: 80px !important;
}

/* Botones flotantes (FAB, back-to-top, help) */
body:has([class*="back-to-top"]) .grecaptcha-badge,
body:has([class*="help-button"]) .grecaptcha-badge,
body:has([class*="fab"]) .grecaptcha-badge {
  right: 70px !important;
}

/* Footers fijos */
body:has(footer[class*="fixed"]) .grecaptcha-badge,
body:has(footer[class*="sticky"]) .grecaptcha-badge {
  bottom: 100px !important;
}

/* Asegurar que el badge sea siempre clickeable */
.grecaptcha-badge,
.grecaptcha-badge * {
  pointer-events: auto !important;
  user-select: auto !important;
}

/* Helper para debug - descomenta para ver el badge con borde rojo */
/*
.grecaptcha-badge {
  border: 2px solid red !important;
  background-color: rgba(255, 0, 0, 0.1) !important;
}
*/
/* Referrals landing page animations and hover effects */

.referral-card-slide-left {
  animation: referral-slide-left 0.5s ease-out forwards;
}

.referral-card-slide-right {
  animation: referral-slide-right 0.5s ease-out forwards;
}

@keyframes referral-slide-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes referral-slide-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.referral-reward-card-initial {
  opacity: 0;
}

.referral-hero-description {
  animation: referral-slide-up 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

@keyframes referral-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.referral-hero-title-left {
  animation: referral-slide-left-title 0.5s ease-out forwards;
  opacity: 0;
}

.referral-hero-title-up {
  animation: referral-slide-up-title 0.5s ease-out 0.15s forwards;
  opacity: 0;
  display: inline-block;
}

@keyframes referral-slide-left-title {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes referral-slide-up-title {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.referral-hover-scale {
  transition: transform 0.2s ease-out;
  cursor: pointer;
}

.referral-hover-scale:hover {
  transform: scale(1.03);
}

.referral-cta-btn {
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.referral-cta-btn:hover {
  background-color: #6D28D9 !important;
  transform: scale(1.03);
}

/* Share/redes section: slide up on scroll into view */
.referral-share-section .referral-share-badge,
.referral-share-section .referral-share-title,
.referral-share-section .referral-share-subtitle,
.referral-share-section .referral-share-card {
  opacity: 0;
}

.referral-share-section.referral-share-visible .referral-share-badge {
  animation: referral-slide-up 0.5s ease-out forwards;
}

.referral-share-section.referral-share-visible .referral-share-title {
  animation: referral-slide-up 0.5s ease-out 0.1s forwards;
}

.referral-share-section.referral-share-visible .referral-share-subtitle {
  animation: referral-slide-up 0.5s ease-out 0.2s forwards;
}

.referral-share-section.referral-share-visible .referral-share-card {
  animation: referral-slide-up 0.5s ease-out 0.3s forwards;
}
.gantt_container {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.gantt_task_line {
  border-radius: 5px !important;
}
/* Estilos para los contadores de estado y anillos de progreso */

.progress-ring-circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Colores de los anillos de progreso */
.progress-ring-circle[data-status="pendiente"] {
  stroke: #B5B5B5;
}

.progress-ring-circle[data-status="en-progreso"] {
  stroke: #D6AD1C;
}

.progress-ring-circle[data-status="finalizado"] {
  stroke: #1C9A11;
}

/* Animación de entrada para los anillos */
.progress-ring-circle {
  animation: fadeInRing 0.5s ease-in-out;
}

@keyframes fadeInRing {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(-90deg) scale(1);
  }
}

/* Responsive adjustments para el nuevo layout */
@media (max-width: 768px) {
  .md\\:h-20 {
    height: auto;
  }
  
  .h-10 {
    height: 2.5rem;
  }
  
  .text-lg {
    font-size: 1.125rem;
  }
  
  /* En móvil, apilar los contadores verticalmente */
  .flex.items-center.space-x-8 {
    flex-direction: column;
    align-items: flex-end;
    space-x: 0;
    space-y: 2;
  }
}

/* Asegurar que los contadores se alineen correctamente a la derecha */
@media (min-width: 769px) {
  .md\\:flex.items-center.justify-between {
    justify-content: space-between;
  }
  
  .flex.items-center.space-x-8 {
    justify-content: flex-end;
  }
} 
table#costs_table, table#tasks_table, table#documents_table,
table.mawi-table, div.table.mawi-table,
table#tenders_table, table#quotes_table,
table#budgets_table, table#suppliers_table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

#inspections_table {
    border-collapse: separate;
    height: 110px;
}

.table-with-border-right {
  border-right: 2px solid #D1D1D1;
  border-collapse: separate;
  border-spacing: 2px 0px;
}

#submittal_table {
    border-spacing: 0 7px;
}

.border-task, .border-left, .border-right{
    border-top: 1px solid #D3D4DA;
    border-bottom: 1px solid #D3D4DA;
}


.border-left{
    border-left: 1px solid #D3D4DA;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.border-right{
    border-right: 1px solid #D3D4DA;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.badge-gray{
    background: #F7F7FB;
    border: 1px solid #C3C5D1;
    border-radius: 3px;
}

.bold-text:hover{
    font-weight: 700;
}

.project_badge{
    background: #F7F7FB;
    border: 1px solid #C3C5D1;
    border-radius: 3px;
}

.kanban-title{
    background: #FFFFFF;
    border-radius: 10px;
    border-left: 8px solid #0fced6;
}


.kanban-container::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.kanban-container::-webkit-scrollbar-track {
    background: #f1f1f15c;
}

/* Handle */
.kanban-container::-webkit-scrollbar-thumb,
.kanban-container::-webkit-scrollbar-thumb:hover {
    background: #bcb4c54d;
}

.dynamic-height {
    height: 71.7vh;
}

/* .kanban-scroll{
    scrollbar-width: thin;
} */

.comment{
    background: #F7F7FB;
    border: 1px solid #C3C5D1;
    border-radius: 3px;
}

trix-editor#project_task_description {
    min-height: 10rem;
    height: auto;
}
.template-ready-card {
  border-width: 1px;
  border-color: #6C2BD9;
  background-color: #F7F2FF;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
}

.white-icon {
  filter: brightness(0) invert(1);
}
.overflow_modal {
  max-height: 70vh;
  overflow-y: auto;
}

table#tenders_table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.border-tender {
  border: 2px dashed #d3d4da;
  border-radius: 8px;
}

.file_container {
  background: #f7f7fb;
  border: 1px solid #c3c5d1;
  border-radius: 3px;
}

.qty {
  max-width: 8vw;
}

.img-file {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#offer_tabs.wrapper {
  display: flex;
  flex-direction: column;
}
#offer_tabs.wrapper .tabs .tab {
  cursor: pointer;
  padding: 10px 20px;
  margin: 0;
  background: white;
  display: inline-block;
  color: #c3c5d1;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
}
#offer_tabs.wrapper .panels {
  background: #f7f7fb;
  min-height: 200px;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  border-radius: 10px;
}
#offer_tabs.wrapper .panels .panel {
  display: none;
  animation: fadein 0.8s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#offer_tabs .radio {
  display: none;
}
#one_tender:checked ~ .panels #one-panel,
#two_tender:checked ~ .panels #two-panel,
#three_tender:checked ~ .panels #three-panel {
  display: block;
}
#one_tender:checked ~ .tabs #one-tab_tender,
#two_tender:checked ~ .tabs #two-tab_tender,
#three_tender:checked ~ .tabs #three-tab_tender {
  background: #f7f7fb;
  color: #35015d;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-left: 5px;
}

.currency-select {
  background: #ffffff;
  border: 1px solid #c3c5d1;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #35015d;
}

.border_dashed {
  background: #ffffff;
  border: 1px dashed #d3d4da;
  border-radius: 8px;
}

.border_input {
  background: #ffffff;
  border: 0.5px solid #c3c5d1;
  border-radius: 3px;
}

input[type="submit"]:disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
}

.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

#select-list {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  overflow-y: auto;
}

ul#select-list:empty {
  display: none !important;
}

.tab_tender_project{
  border-bottom: 0.75px rgb(53, 1, 93) solid;
  color: rgb(53, 1, 93);
}
/* Tom Select Customizations for Inspection Items Form */

/* Scope all styles to inspection items form specifically */
.inspection-items-form .tag-select + .ts-wrapper .ts-control {
  min-height: 38px !important;
  height: auto !important;
  max-height: none !important;
  padding: 4px 8px !important;
  border: 1px solid #d1d5db !important; /* border-gray-300 */
  border-radius: 0.275rem !important; /* rounded */
  background-color: white !important;
  font-size: 0.875rem !important; /* text-sm */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Focus state to match other inputs */
.inspection-items-form .tag-select + .ts-wrapper .ts-control:focus-within {
  border-color: #3b82f6 !important; /* border-blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.inspection-items-form .tag-select + .ts-wrapper .ts-control .ts-input {
  min-height: 38px !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.5 !important;
  padding: 0 !important;
}

.inspection-items-form .tag-select + .ts-wrapper .ts-control .ts-input .item {
  display: inline-block !important;
  margin: 2px 4px 2px 0 !important;
  max-width: calc(33.333% - 8px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background-color: #f3f4f6 !important; /* bg-gray-100 */
  border-radius: 0.25rem !important; /* rounded */
  padding: 2px 6px !important;
  font-size: 0.75rem !important; /* text-xs */
  color: #374151 !important; /* text-gray-700 */
}

.inspection-items-form .tag-select + .ts-wrapper .ts-control .ts-input .item:nth-child(3n) {
  margin-right: 0 !important;
}

/* Remove default Tom Select styling */
.inspection-items-form .tag-select + .ts-wrapper .ts-control .ts-input .item .remove {
  color: #6b7280 !important; /* text-gray-500 */
  margin-left: 4px !important;
  cursor: pointer !important;
}

.inspection-items-form .tag-select + .ts-wrapper .ts-control .ts-input .item .remove:hover {
  color: #ef4444 !important; /* text-red-500 */
}

/* Keep action buttons aligned with other fields - only in inspection items form */
.inspection-items-form .table-cell:last-child {
  vertical-align: top !important;
  padding-top: 8px !important;
}

/* Ensure table row maintains structure - only in inspection items form */
.inspection-items-form .table-row {
  align-items: flex-start !important;
} 
#turbo_confirm{
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    min-width: 15rem;
    min-height: 12rem;
}

#turbo_confirm form h3{
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #000000;
}
/**
* @author: Alumuko https://github.com/alumuko/alumuko
* @copyright: Copyright (c) 2021 Alumuko. All rights reserved.
* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
* @website: https://github.com/alumuko/vanilla-datetimerange-picker
*
* Special thanks to Dan Grossman.
* This program is base on Dan Grossman's bootstrap-daterangepicker (version 3.1)
* I just changed the code a bit to not need jquery.
*/

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI';
  font-size: 15px;
  line-height: 1em;
}


.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #6B22A8;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #6B22A8;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Highcharts Tooltip Styles */
.highcharts-tooltip > span {
  background: rgba(255,255,255,0.98) !important;
  border: 2px solid #333 !important;
  border-radius: 3px !important;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3) !important;
  padding: 8px !important;
  z-index: 999999 !important;
}

.options.menu-dropdown {
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 0.375rem;
}

.menu-dropdown {
  background: #6b22a8;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0.375rem;
}

.settings-dropdown {
  background: #35015D !important;
  color: white !important;
  border-radius: 0.375rem;
  font-weight: 600;
}

.settings-dropdown svg {
  color: white !important;
}

.project-menu .menu-dropdown {
  background: #35015d;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0.375rem;
}

.dropdown-sidenav {
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f15c;
}

/* Handle */
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: #bcb4c54d;
}

.modal ::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.modal ::-webkit-scrollbar-track {
  background: rgb(209 213 219);
}

/* Handle */
.modal ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb:hover,
.scrollHor_cell ::-webkit-scrollbar-thumb,
.scrollHor_cell ::-webkit-scrollbar-thumb:hover {
  background: #6b22a8;
}

.ss-main {
  padding: 0.5rem 0.75rem !important;
}

.ss-main.ss-disabled {
  background-color: #ffff !important;
}

.ss-main .ss-values .ss-value {
  background-color: #6b22a8 !important;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: #6b22a8 !important;
  border-radius: 4px;
}

.ss-content .ss-list .ss-option:hover {
  background-color: #35015d !important;
  border-radius: 4px;
}

.ss-main:focus {
  box-shadow: 0 0 5px #6b22a8 !important;
}

.ss-content .ss-search input:focus {
  box-shadow: 0 0 5px #6b22a8 !important;
}

.dropzone {
  min-height: 150px;
  border: 1px dashed #c4c4c4;
  border-radius: 5px;
  background: #fff;
  /* padding: 20px 20px; */
}

input.placeholder-mawi::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: #35015d;
}

.disabled {
  background-color: rgba(174, 172, 172, 0.736);
}

.disabled-light {
  background-color: rgb(209 213 219/1)
}

.tab_active {
  background-color: rgb(93, 39, 156) !important;
  color: rgb(255 255 255) !important;
  border-width: 1px;
  border-color: rgb(93, 39, 156);
}

.tab_inactive {
  background-color: rgb(255 255 255);
  color: rgb(93, 39, 156);
  border-width: 1px;
  border-color: rgb(209, 213, 219);
}

.sort {
  position: absolute;
  top: 5px;
  left: -1rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.sort-desc {
  border-top: 8px solid #5d279c;
}

.sort-asc {
  border-bottom: 8px solid #5d279c;
}

div#participantTags > .ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 4px 6px;
  background: #ebebeb;
  color: #000;
  border-radius: 2px;
  border: 0px solid #d0d0d0;
  font-size: 16px;
  margin-left: 5px;
}

div#projecMemberTags > .ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 4px 6px;
  background: #EBEBEB;
  color: #000;
  border-radius: 2px;
  border: 0px solid #d0d0d0;
  font-size: 14px;
  margin-left: 5px;
}

div#participantTags > .ts-wrapper.multi .ts-control {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d1d5db;
}

div#projectUses > .ts-wrapper.multi .ts-control > div,
div#optionItems > .ts-wrapper.multi .ts-control > div,
div#projectStages > .ts-wrapper.multi .ts-control > div,
div#projectList > .ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 4px 6px;
  background: #F7F0FF;
  color: #000;
  border-top: none;
  border-bottom: none;
  border-radius: 20px;
  border-left: none;
  border-right: none;
  font-size: 14px;
  margin-left: 3px;
}

div#projectUses > .ts-wrapper.multi .ts-control .item .remove,
div#optionItems > .ts-wrapper.multi .ts-control .item .remove,
div#projectStages > .ts-wrapper.multi .ts-control .item .remove,
div#projectList > .ts-wrapper.multi .ts-control .item .remove {
  color: #000;
  border-radius: 50%;
  border: 1px solid #000;
}

div#tag_financial_control_record > .ts-wrapper .ts-control {
  border-radius: 6px;
  border: 1px solid #D1D1D1;
  min-height: 48px;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 4px 6px;
  background: #5d279c;
  color: #ffff;
  border: 0px solid #d0d0d0;
}

.ts-dropdown .optgroup-header {
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: underline;
}

.shadow-container {
  box-shadow: 0 0 20px #DBDBDB;
}

.disabled-radio-btn {
  border: 1px solid #EDEDED;
  border-radius: 50%;
}

.active_toggle{
  background-color: rgb(107 34 168) !important;
  color: white;
  font-weight: 600;
}

.blur-background {
  filter: blur(5px);
  pointer-events: none; /* Ensures users cannot interact with blurred elements */
}

.progress-ring-circle {
  stroke-dasharray: 400, 400;
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.divider {
  height: 1px;
  width: 106vw;
  background-color: #ccc;
  margin: 20px 0;
}

.divider-budget {
  height: 1px;
  width: 160vw;
  background-color: #ccc;
  margin: 20px 0;
}

/* ---- Styles for range slider ---- */
#range-slider {
  /* padding: 0 16px; */
  height: 7px;
}

#range-slider .noUi-connect {
  background: #5D279C;
}

#range-slider .noUi-handle {
  height: 18px;
  width: 18px;
  top: -7px;
  right: -9px;
  border-radius: 9px;
}

.slider-styled,
.slider-styled .noUi-handle {
  box-shadow: none;
  border-color: #5D279C;
  border-width: 2px;
}

.slider-styled .noUi-handle::before,
.slider-styled .noUi-handle::after {
  display: none;
}

.slider-styled .noUi-handle .noUi-touch-area {
  border: 1px solid transparent;
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  width: auto;
  height: auto;
}

.slider-styled .noUi-handle:hover .noUi-touch-area {
  border-radius: 50%;
  border: 1px dashed #7f7f7f;
}
/* -------------------------------- */

.background-section { 
  background-color: #F7F7F7;
}

.fixed-column-header {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 10;
}

.fixed-column-header:nth-child(2) {
  left: 185.6px;
  z-index: 10;
}

.fixed-column-header:nth-child(3) {
  left: 485.6px;
  z-index: 10;
}

.fixed-column {
  position: sticky;
  left: 0;
  z-index: 6;
}

.fixed-bottom-column {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.fixed-column:nth-child(2) {
  left: 185.6px;
  z-index: 6;
}

.fixed-column:nth-child(3) {
  left: 485.6px;
  z-index: 6;
}

/* Styles for status */
.created-status-color {
  background-color: #F7F0FF;
  color: #2F0B58; 
}

.approved-status-color {
  background-color: #EEFBEF;
  color: #0C5112;
}

.pending-status-color {
  background-color: #F7F7F7;
  color: black;
}

.review-status-color {
  background-color: #FCF6E3;
  color: #977600;
}

.rejected-status-color {
  background-color: #FCE3E3;
  color: #500909;
}
/* -------------------------------- */


@media (max-width: 1400px) {
  .divider {
    width: 160vw;
  }

  .divider-budget {
    width: 300vw;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1500px) {
  .divider {
    width: 145vw;
  }

  .divider-budget {
    width: 300vw;
  }
}

@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .divider {
    width: 130vw;
  }

  .divider-budget {
    width: 240vw;
  }
}

@media screen and (min-width: 1700px) and (max-width: 1900px) {
  .divider {
    width: 120vw;
  }

  .divider-budget {
    width: 220vw;
  }
}

@media screen and (min-width: 1900px) and (max-width: 2000px) {
  .divider {
    width: 110vw;
  }

  .divider-budget {
    width: 200vw;
  }
}

@media screen and (min-width: 2000px) {
  .divider {
    width: 100%;
  }
}

.hide-spinners input::-webkit-outer-spin-button,
.hide-spinners input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 640px) {
  .sidebar-padding {
    padding-left: 0 !important;
  }
}
.gantt_message_area {
  display: none;
}

.max-w-cloning {
  max-width: 43rem;
}

.expand-icon-left {
  transform: rotate(180deg);
}

.default-expandible {
  width: 18rem;
}

.custom-expandible {
  width: 28rem;
}

.custom-expandible .unexpanded-text {
  display: none;
}

.custom-expandible .expanded-text {
  display: inline-block;
}

.expandible-line:not(.custom-expandible) .unexpanded-text {
  display: inline-block;
}

.expandible-line:not(.custom-expandible) .expanded-text {
  display: none;
}

/* Excel Viewer Styles */
.excel-viewer-container {
  width: 100%;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
}

.excel-tabs {
  display: flex;
  flex-wrap: wrap;
  background: #f3f3f3;
  border-bottom: 1px solid #d0d0d0;
  padding: 4px 4px 0;
  gap: 2px;
}

.excel-tab {
  background: #e7e7e7;
  border: 1px solid #c0c0c0;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
  color: #333;
  transition: background 0.2s;
}

.excel-tab:hover {
  background: #f0f0f0;
}

.excel-tab.active {
  background: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
  font-weight: 600;
  color: #217346;
}

.excel-table-wrapper {
  overflow: auto;
  max-height: 600px;
  max-width: 100%;
}

/* Purchase Order Notes modal: allow the Excel table to use all available height.
   The generic viewer cap (max-height: 600px) leaves big empty space in the modal. */
.po-notes-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.po-notes-modal .excel-tabs {
  flex: 0 0 auto;
}

.po-notes-modal .excel-viewer-container {
  flex: 1 1 auto;
  min-height: 0;
}

.po-notes-modal .excel-table-wrapper {
  max-height: none;
  height: 100%;
}

.excel-table {
  border-collapse: collapse;
  font-family: Calibri, Arial, sans-serif;
  font-size: 11px;
  white-space: nowrap;
}

.excel-table td,
.excel-table th {
  border: 1px solid #d0d0d0;
  padding: 2px 6px;
  min-width: 64px;
  max-width: 300px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.excel-header-cell {
  background: linear-gradient(180deg, #f9f9f9 0%, #e8e8e8 100%);
  color: #333;
  font-weight: 600;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 40px;
}

.excel-row-header {
  background: linear-gradient(90deg, #f9f9f9 0%, #e8e8e8 100%);
  color: #333;
  font-weight: 600;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 40px;
  max-width: 40px;
}

thead .excel-row-header {
  z-index: 3;
}

.excel-table tbody tr:hover td:not(.excel-row-header) {
  background-color: rgba(33, 115, 70, 0.05);
}

/* Legacy spreadsheet container styles (keeping for backwards compatibility) */
.spreadsheet-container {
  width: 100%;
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  overflow: auto;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 10px;
}

.tabs .tab-link {
  background-color: #f1f1f1;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  transition: background-color 0.3s, border-bottom 0.3s;
  margin-right: 2px;
  font-size: 16px;
}

.tabs .tab-link.active {
  background-color: #ffffff;
  border-bottom: 2px solid #5D279C;
  color: #5D279C;
  font-weight: bold;
}

.tabs .tab-link:hover {
  background-color: #ddd;
}


.active-link {
  color: #5D279C;
  font-weight: 700;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(93 39 156 / var(--tw-border-opacity)) /* #5d279c */;
}

.unactive-link {
  color: #D1D1D1;
}

.unactive-link:hover {
  color: #5D279C;
}

.shadow-bottom {
  box-shadow: 1px 1px 4px 0px rgba(153,153,153,0.67);
  -webkit-box-shadow: 1px 1px 4px 0px rgba(153,153,153,0.67);
  -moz-box-shadow: 1px 1px 4px 0px rgba(153,153,153,0.67);
}

.shadow-top {
  box-shadow: 1px -1px 4px 0px rgba(153,153,153,0.67);
  -webkit-box-shadow: 1px -1px 4px 0px rgba(153,153,153,0.67);
  -moz-box-shadow: 1px -1px 4px 0px rgba(153,153,153,0.67);
}

.shadow-box-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}

/* media queries for border tables */
@media (min-width: 768px) and (max-width: 1023px) {
  #summary > div:nth-child(2n) {
    border-right: none;
  }
}

@media (min-width: 1024px) and (max-width: 1127px) {
  #summary > div:nth-child(3n) {
    border-right: none;
  }
}

@media (min-width: 1128px) and (max-width: 1279px) {
  #summary > div:nth-child(4n) {
    border-right: none;
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  #summary > div:nth-child(5n) {
    border-right: none;
  }
}

@media (min-width: 1536px) {
  #summary > div:nth-child(6n) {
    border-right: none;
  }
}

.icon-color {
  stroke: currentColor;
  fill: none;
}

.icon-color * {
  stroke: currentColor;
  fill: none;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.pulse-effect {
  animation: pulse 1.5s infinite; /* Adjust the duration as needed */
}

.force-red {
  border-color: #EF4444 !important;
}

.hidden-modal-container {
  display: none;
}

.dynamic-tooltip {
  background-color: #4a4a4a;
  color: #ffffff;
  padding: 8px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  white-space: normal;
  max-width: 329px;
  word-wrap: break-word;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dynamic-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 85%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #4a4a4a transparent transparent transparent;
}

@media (max-width: 430px) {
  .modal-center {
    left: 50%;
    transform: translate(-17%, -25%);
    top: 20%;
  }
}

@media (max-width: 430px) {
  .responsive-modal-purchase-order {
    max-width: 420px;
    margin-bottom: 85%;
    transform: translateY(-15);
    transform: translateX(-14%);
  }
  
  .responsive-modal-purchase-order-container {
    padding: 5px;
  }
}

@media (max-width: 430px) {
  .scrollable-wrapper {
    display: block;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .scrollable-wrapper table {
    display: inline-block;
  }
}

@media (max-width: 430px) {
  .responsive-button {
    height: 3.5rem;
    width: 325px;
    font-size: 1.125rem;
    padding: 0.6rem 0.5rem;
  }
}

@media (max-width: 430px) {
  .modal-purchase-order {
    top: 20%;
    justify-self: start;
    justify-content: start;
  }
}

@media (max-width: 430px) {
  .filters-dropdown-menu {
    min-width: 100%;
    right: 2%;
    transform: translateX(0);
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
  }

  .filters-dropdown-menu div {
    font-size: 0.9rem;
  }
}

@media (max-width: 430px) {
  #filters-container {
    padding: 1rem;
    gap: 1rem;
  }

  #filters-container > * {
    font-size: 0.9rem;
  }

  #filters-container input[type="text"],
  #filters-container input[type="number"],
  #filters-container select {
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  #filters-container .range-slider, 
  #filters-container .date-range, 
  #filters-container .text-component, 
  #filters-container .select-component {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .container_filter_value {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .container_filter_value > div {
    width: 100%;
  }

  .container_filter_value .grid-cols-6 {
    grid-template-columns: 1fr;
  }

  .container_filter_value input {
    width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem;
  }

  .removeFilterBtn {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 430px) {
  .components-shared-table-responsive {
    margin-bottom: 6%;
  }

  table {
    width: 100%;
    font-size: 0.875rem;
  }

  th, td {
    white-space: nowrap;
    padding: 0.5rem;
  }

  th {
    text-align: center;
  }
}

@media (max-width: 430px) {
  .code-association-modal-container-b {
    top: 85%;
    height: 275px;
    left: -1%;
  }
}

@media (max-width: 430px) {
  .new-submit-buttons {
    margin-right: 13%; 
    gap: 2%;
    margin-bottom: 1%;
    padding: 2px;
    grid-template-columns: repeat(1)
  }
}

@media (max-width: 430px) {
  .responsive-table-container {
    margin-bottom: 4%;
  }

  .responsive-table-container table {
    width: 100%;
    font-size: 0.875rem;
  }

  .responsive-table-container th,
  .responsive-table-container td {
    white-space: nowrap;
    padding: 0.5rem;
  }

  .responsive-table-container th {
    text-align: center;
  }
}

@media (max-width: 430px) {
  .responsive-invoice-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 430px) {
  .contact-list-container {
    width: 375px;
    margin-right:10%;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 430px) {
  .modal-close-order {
    width: 375px;
    right: 15%;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 430px) {
  .responsive-buttons-form {
  gap: 3;
  margin-right: 7%;
  margin-top: 8%;
  }
  .responsive-buttons-form-component{
    width: 300px;
  }
}

@media (max-width: 430px) {
  .responsive-buttons-header {
    width: 350px;
  }
}

@media (max-width: 430px) {
  .export-view-dropdown {
    width: 285px;
  }
}

@media (max-width: 430px) {
  .responsive-date-component
  {
    width: 400px;
  }
}

@media (max-width: 430px) {
  .import-ai-order {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    margin-right: 1%;
    transform: translateX(-1%);
  }

  .import-ai-order-container{
    top: -45%;
    justify-content: center;
    align-items: center;
  }

  .import-ai-order .relative.w-full.max-w-7xl {
    max-width: 40%;
  }

  .dropzone-msg {
    flex-direction: column;
    text-align: center;
    min-height: 300px;
  }

  .dropzone-msg .dropzone-msg-title {
    font-size: 0.9rem;
  }

  .dropzone-msg-desc {
    font-size: 0.8rem;
  }
}

@media (max-width: 430px) {
  .import-ai-buttons{
    width: 200px;
    height: 50px;
    align-items: center;
  }
}

@media (max-width: 430px) {
  .import-ai-buttons{
    width: 170px;
    height: 50px;
    left: -20%;
    align-items: center;
  }

  .import-ai-footer{
    align-items: center;
    align-self: center;
    justify-content: center;
  }
}

.modal-scroll::-webkit-scrollbar {
  height: 6px;
}

.modal-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.modal-scroll::-webkit-scrollbar-thumb {
  background: #c0c2c4;
  border-radius: 5px;
}

@media (max-width: 430px) {
  
  .pdf-container {
    padding: 1rem !important;
    height: 130vh;
    flex-direction: column;
    gap: 1;
  }

  .pdf-header {
    flex-direction: flex;
    align-items: center;
    text-align: center;
    height: 100px;
    background-color: white;
    gap: 1;
  }

  .pdf-title {
    font-size: 20px !important;
    text-align: center;
  }

  .company-logo {
    height: 100px !important;
    width: 100px !important;
    margin-top: 10px;
    margin-left: 12px;
  }

  .detalles-generales {
    grid-template-columns: 1fr !important;
    text-align: left;
    font-size: 12.5px;
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
    display: block;
  }

  .responsive-table td, .responsive-table th {
    font-size: 12px !important;
    padding: 5px !important;
    white-space: nowrap;
  }

  .subtotal-box {
    width: 100%;
    font-size: 14px;
    text-align: right;
    padding: 8px;
    border-radius: 6px;
  }

  .approval-buttons {
    flex-direction: column;
    font-size: 13px;
    width: 140px;
    height: 35px;
    gap: 2;
  }

  .approval-buttons a {
    width: 100%;
    height: 35px;
    text-align: center;
    padding: 10px;
  }

  .facturas-container {
    padding: 1rem;
  }

  .info-container{
    font-size: 12px;
  }

  .pdf-container{
    width: 46vh;
  }

  .pdf-modal{
    width: 46vh;
  }
}

@media (max-width: 390px) {
  
  .pdf-container {
    padding: 1rem !important;
    flex-direction: column;
    height: 145vh;
    gap: 1;
  }

  .pdf-header {
    flex-direction: flex;
    align-items: center;
    text-align: center;
    height: 100px;
    background-color: white;
    gap: 1;
    width: 60vh;
  }

  .pdf-title {
    font-size: 18px !important;
    text-align: center;
  }

  .company-logo {
    height: 100px !important;
    width: 100px !important;
    margin-top: 10px;
    margin-left: 12px;
  }

  .detalles-generales {
    grid-template-columns: 1fr !important;
    text-align: left;
    font-size: 12.5px;
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
    display: block;
  }

  .responsive-table td, .responsive-table th {
    font-size: 12px !important;
    padding: 5px !important;
    white-space: nowrap;
  }

  .subtotal-box {
    width: 100%;
    font-size: 14px;
    text-align: right;
    padding: 8px;
    border-radius: 6px;
  }

  .approval-buttons {
    flex-direction: column;
    font-size: 13px;
    width: 140px;
    height: 35px;
    gap: 2;
  }

  .approval-buttons a {
    width: 100%;
    height: 35px;
    text-align: center;
    padding: 10px;
  }

  .facturas-container {
    padding: 1rem;
  }

  .info-container{
    font-size: 12px;
  }

  .pdf-container{
    width: 59vh;
  }

  .pdf-modal{
    width: 60vh;
  }
}

@media (max-width: 375px) {
  
  .pdf-container {
    padding: 1rem !important;
    flex-direction: column;
    height: 165vh;
    gap: 1;
  }

  .pdf-header {
    flex-direction: flex;
    align-items: center;
    text-align: center;
    height: 100px;
    background-color: white;
    gap: 1;
    width: 59vh;
  }

  .pdf-title {
    font-size: 17px !important;
    text-align: center;
  }

  .company-logo {
    height: 90px !important;
    width: 90px !important;
    margin-top: 10px;
    margin-left: 12px;
  }

  .detalles-generales {
    grid-template-columns: 1fr !important;
    text-align: left;
    font-size: 12.5px;
  }

  .table-container {
    overflow-x: auto;
    display: block;
  }

  .responsive-table td, .responsive-table th {
    font-size: 12px !important;
    padding: 5px !important;
    white-space: nowrap;
  }

  .subtotal-box {
    font-size: 14px;
    text-align: right;
    padding: 8px;
    border-radius: 6px;
  }

  .approval-buttons {
    flex-direction: column;
    font-size: 13px;
    width: 140px;
    height: 35px;
    gap: 2;
  }

  .approval-buttons a {
    width: 100%;
    height: 35px;
    text-align: center;
    padding: 10px;
  }

  .facturas-container {
    padding: 1rem;
  }

  .info-container{
    font-size: 12px;
  }

  .pdf-container{
    width: 59vh;
  }

  .pdf-modal{
    width: 60vh;
  }
}

@media (max-width: 430px) {
  [data-controller="components--shared--bulk-actions--code-association-and-tax"] {
    top: -20%;
    left: 68%;
    transform: translate(-50%, 0);
    width: 95%;
    padding: 1rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="initialForm"] {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="initialForm"] button {
    width: 100%;
    font-size: 0.85rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] .flex {
    flex-direction: column;
    gap: 1rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] button {
    width: 100%;
    font-size: 0.85rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="taxForm"] {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="taxForm"] .flex {
    flex-direction: column;
    gap: 1rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="taxForm"] input {
    width: 100%;
    font-size: 0.85rem;
  }

  [data-components--shared--bulk-actions--code-association-and-tax-target="taxForm"] button {
    width: 100%;
    font-size: 0.85rem;
  }

  .code-form{
    margin-top: -40%;
  }
}

@media (max-width: 430px) {
  [data-components__shared__bulk_actions__code_association_and_tax_target="codeInput"] {
    padding: 0.5rem;
    font-size: 0.7rem;
    gap: 0.5rem;
  }

  [data-components__shared__bulk_actions__code_association_and_tax_target="codeInput"] .bg-mawi {
    padding: 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 25%;

  }

  [data-components__shared__bulk_actions__code_association_and_tax_target="codeInput"] .rounded-lg {
    height: 1.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;

  }

  .code-form-container{
    position: fixed;
    top: 60%;
    left: 65%;
    transform: translate(-65%, -69%);
    z-index: 9999;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 370px;
  }

  .budgetLines{
    width: 360px;
    height: 130px;
    font-size: 13.5px;
  }

  .title-associaton_modal{
    font-size: 14px;
  }
  .expense-distribution-table{
    margin-top: 10%;
  }

  .content-list{
    width: 475px;
    padding: 2%;
  }

  .po-content{
    width: 475px;
  }

  .upper-bar-mobile{
    width: 475px;
  }
  .background-section{
    padding: 0%;
  }

  .modal-padding{
    padding-bottom: 0%;
  }
  .modal-padding-container{
    padding: 2%;
  }
}

@media (max-width: 375px) {
  .upper-bar-mobile{
    width: 440px;
  }

  .po-content{
    width: 440px;
  }

  .content-list{
    padding: 3%;
    width: 440px;
  }

  .background-section{
    padding: 0%;
  }
}

@media (max-width: 375px) {
  .responsive-modal-purchase-order {
    width: 425px;
    top: 0%;
    min-height: 835px !important;
    max-height: 835px !important;
  }

  .modal-padding{
    padding-bottom: 0%;
  }

  .code-form-container{
    left: 68%;
  }

  .code-input{
    width: 200px;
    height: 38px;
  }

  .modal-body{
    height: 690px !important;
  }

  .alert-modal{
    margin-right: 35px;
  }
}

@media (max-width: 390px){
  .content-list{
    width: 465px;
    padding: 2%;
  }

  .po-content{
    width: 465px;
  }

  .upper-bar-mobile{
    width: 465px;
  }
  .responsive-modal-purchase-order {
    max-width: 463px;
    min-height: 855px !important;
    max-height: 855px !important;
  }
  .modal-body{
    height: 710px !important;
  }
}

@media print {
  .print-container table {
    font-size: 17px;
    width: 100%;  
    line-height: 5;
    transform: scale(0.4);
    transform-origin: center left;
  }
  
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .scrollable-columns-title {
    color: #000;
    line-height: 1;
    padding: 0;
    font-size: 15px;

  }

  .text-public {
    color: #000;
    font-size: 20px;
  }
  
  .content-pdf {
    margin-top: 20%;
    margin-bottom: 35%;
    height: 500px;
    width: 600px;
    display: grid!important;
    flex-direction: column !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center;
  }

  .logo-pdf{
    margin-left: 80%;
  }
}

@media (max-width: 430px) {
  .modal-mobile-subtask{
    width: 400px !important;
  right: 8% !important;
  }
}

@media (max-width: 390px) {
  .modal-mobile-subtask{
    width: 390px !important;
  }
}

@media (max-width: 375px) {
  .modal-mobile-subtask{
    width: 375px !important;
    left: -13%;
  }
}

.code-column {
  flex: 0 0 10%;
  text-align: left;
}

.category-column {
  flex: 0 0 25%;
  text-align: left;
  margin-left: -2%;
}

.description-column {
  flex-grow: 1;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: -10px;
}

.separator {
  flex: 0 0 3%;
  text-align: center;
  color: #888;
}

.custom-massive-select option {
  background-color: white;
  color: black;
}

.custom-massive-select option:hover {
  background-color: #f0f0f0;
}

.small-tooltip {
  width: 300px;
}

.quotations_code{
  width: 700px !important;
}

.ai-text {
  background: linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}

.roles-overflow-hidden {
  overflow-x: hidden !important;
}