/* "Mis pendientes" (dashboard simple view / HomeDashboard::ActionItemsSectionComponent).
   Each tab scrolls its own rows so the paginator below stays visible without
   scrolling the page — same idea as the Órdenes de compra table. */

/* Fixed height, not max-height: a short page (the last one, or a tab with two
   items) must not pull the paginator up — it stays put like in Órdenes de compra.
   The height discounts what sits above the table (banner, greeting, card header,
   tabs) plus the paginator itself, with a floor for short screens. Tune the
   subtracted value to give the paginator more or less air. */
.action-items-scroll {
  height: max(16rem, calc(100vh - 28rem));
  overflow-x: auto;
  overflow-y: auto;
}

/* Sticky goes on th, not on thead/tr — Safari ignores it there. */
.action-items-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f9fafb;
}

/*
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;
}
/* La fundación del design system va ARRIBA DEL TODO: postcss-import sólo
   inlinea los @import que preceden a cualquier otra regla. Más abajo se
   descartan EN SILENCIO — es lo que le pasa a "budget_imports", que no
   entra en este bundle y llega al navegador de rebote por application.css. */
@import "mawi_ui_foundation";
/* Las fuentes NO se importan aquí: viven en mawi_ui_fonts.css.erb y necesitan
   ERB (font_path) para sobrevivir al digest. El binario de Tailwind no evalúa
   ERB, así que las sirve sprockets por el require_tree de application.css. */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hide scrollbar for horizontal filter chips on mobile */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@import "budget_imports";

/* El gris de borde POR OMISIÓN es el del sistema, no el de la paleta de Tailwind.
   Su reset pone `#e5e7eb` en `*, ::before, ::after`, así que cualquier utilidad
   `border` sin color pinta un gris ajeno — y no falla nada, simplemente conviven
   dos grises de borde en la misma pantalla. Va después de `@tailwind base` para
   ganarle al reset. */
*,
::before,
::after {
  border-color: rgb(var(--color-border) / 1);
}

body {
  margin: 0;
  /* La TINTA por omisión es `ink` (#141414) y no el negro puro del navegador.
     Medido contra el prototipo: cualquier texto que no declare su color caía a
     rgb(0,0,0) mientras allí cae a rgb(20,20,20). No se ve en un elemento suelto y
     sí en una pantalla llena, porque el casi-negro del sistema es lo que hace que
     el DATO no compita con el cromo (regla 12). */
  color: rgb(var(--color-ink) / 1);
  /* Geist (regla 12). Esta declaración GANA sobre la utilidad del tema, así que
     cambiar `sans` en tailwind.config.js sin tocar esto no repinta nada — es el
     sitio donde el port de la tipografía se queda a medias sin avisar. */
  font-family: 'Geist Variable', '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;
  /* La costura de la columna CONGELADA. En `border-strong` y no en el
     `#D1D1D1` que tenía: es la misma línea que cierra la cabecera de la tabla y
     el PageBar, así que sale del mismo token o acaban siendo tres grises que hay
     que mantener a la par. Dice lo mismo que el degradado del canto —«esto sigue
     por debajo»— pegada al canto congelado, y las dos juntas se leen como una
     sola rampa (regla 24). */
  box-shadow: inset -1px 0 0 0 rgb(var(--color-border-strong) / 1);
}

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

/* ── Mawi UI · el PUNTO del hijo activo de un grupo del menú ──────────────────
   En un grupo desplegado el estado se reparte entre los dos niveles: el relleno
   morado sólido es del PADRE que contiene la ruta, y el hijo abierto va en
   `brand-700` a peso 600 SIN relleno, con este punto en la columna del icono de
   su padre. Así queda un solo morado sólido por columna — con los dos rellenos a
   4px se leen como dos cosas seleccionadas, y sólo una es la página.

   No se coloca a ojo: se MIDE contra el icono del padre. En este marcado el
   panel lleva `ml-5` y el disparador `px-2`, así que el centro del glifo del
   grupo cae 7px a la izquierda del canto del hijo — de ahí el `-7px`. Si cambia
   la indentación del panel o el relleno del disparador, este número cambia con
   ellos: se vuelve a medir, no se ajusta a ojo.

   Va POSICIONADO y no en el flujo —con hueco reservado habría que restarlo de la
   indentación en otro sitio, y sin reservarlo la etiqueta saltaría 16px al
   seleccionarse— y se centra en la PRIMERA línea (py-1.5 + 20px de interlineado
   = centro a 16px del canto), o en un hijo de dos renglones flotaría entre los
   dos.

   Es `currentColor`, o sea el morado del propio texto, así que no puede
   desafinar de él.

   POR QUÉ CSS Y NO UTILIDADES: `before:content-['']` vive dentro de una cadena
   Ruby interpolada, y el extractor de Tailwind corta el candidato en la comilla
   simple — genera CERO reglas y el punto no aparece, sin que nada falle. Medido.
──────────────────────────────────────────────────────────────────────────── */
.mawi-nav-child-dot::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: currentColor;
  pointer-events: none;
}

/* ── Mawi UI · la LÍNEA que cierra el PageBar (regla 8) ───────────────────────
   Va como SOMBRA INTERIOR y no como `border-b`, y no es un capricho de
   implementación: un borde suma su píxel al alto de la caja, así que la barra
   pinta 53px mientras `items-center` centra el contenido en los 52 de dentro —
   todo (título, controles, CTA) queda medio píxel por encima del centro de la
   caja que el ojo ve, y eso es lo que se lee como «el título está un poco
   alto». Con la sombra dentro, la caja pintada y el área de contenido vuelven a
   ser la misma.

   En `border-strong` al 60%, no en `border`: barra y contenido son el MISMO
   blanco, así que aquí no hay cambio de relleno que ayude y un `border`
   (#e3e7ec) se pierde a 19 niveles del papel. Es el mismo peso que la línea que
   cierra la cabecera de la tabla, que hace el mismo trabajo.

   POR QUÉ CSS Y NO UNA UTILIDAD ARBITRARIA: los tokens del port viven como
   TRIPLETAS DE CANAL (`226 231 235`) para que `<alpha-value>` funcione en v3, y
   `color-mix(in srgb, var(--color-border-strong) 60%, transparent)` —lo que usa
   el prototipo— necesita un COLOR, no tres números. La traducción correcta es
   `rgb(var(--…) / 0.6)`, y esa barra dentro de una utilidad arbitraria de
   Tailwind es justo el carácter que rompe el extractor.

   Las DOS señales conviven y dicen cosas distintas: la línea marca dónde acaba
   el bloque cuyo contenido no cambia entre pantallas, y la sombra marca que hay
   contenido pasando por debajo.
──────────────────────────────────────────────────────────────────────────── */
/* La línea sale de `--mawi-shadow-bar`, que la fundación ya declara: escrita dos
   veces, lo primero que divergiría es el 60% de opacidad. */
.mawi-page-bar {
  box-shadow: var(--mawi-shadow-bar);
  transition: box-shadow 150ms ease;
}

.mawi-page-bar.is-scrolled {
  box-shadow: var(--mawi-shadow-bar), 0 4px 12px -6px rgb(20 20 20 / 0.18);
}

/* ── Mawi UI · la tabla que no cabe tiene que DECIRLO (regla 24) ──────────────
   Medido en `/projects`: 7 columnas, 1.622px de tabla en un contenedor de 1.130
   a 1.440 de ventana, o sea **492px de contenido invisible**. Y con las barras
   de superposición de macOS —el default del sistema— una tabla recortada se ve
   EXACTAMENTE igual que una completa: nadie busca lo que no sabe que está ahí.

   Tres señales, y ninguna es opcional:

   1 · LA BARRA, SIEMPRE VISIBLE. Es el control que el usuario ya sabe leer y
       arrastrar. Personalizarla es justo lo que hace que el navegador deje de
       ocultarla y le reserve sus 10px.
       ⚠️ El ORDEN importa: `scrollbar-width` sólo va dentro del `@supports not
       selector(::-webkit-scrollbar)` —o sea sólo Firefox—, porque si se declara
       en Chrome gana la vía estándar, se ignora el bloque `::-webkit-` y la
       barra vuelve a ser de superposición.
   2 · EL DEGRADADO DEL CANTO (`.mawi-table-edge`), sólo del lado donde queda
       contenido. Es una SOMBRA (tinta al 11%), no un velo blanco: sobre una fila
       con hover o sobre la cabecera, un velo del color del papel se ve como una
       mancha. La caída va ESCALONADA en cuatro paradas —un degradado de dos
       reparte la tinta a ritmo constante, y eso no es como cae una sombra: el
       borde se lee duro al arrancar y la cola se corta de golpe—. Y SIN
       desenfoque: sobre un texto de 13px se lee como que la pantalla está mal
       renderizada, no como profundidad.
   3 · La región enfocable, que la pone el controlador y sólo cuando desborda de
       verdad (`table_scroll_controller.js`): sin `tabindex` en el contenedor que
       scrollea, con teclado NO HAY FORMA de llegar a las columnas de la derecha
       (WCAG 2.1.1).
──────────────────────────────────────────────────────────────────────────── */
.mawi-table-scroll {
  position: relative;
}

.mawi-table-viewport {
  overflow-x: auto;
  /* Y también en VERTICAL, porque la tabla scrollea DENTRO de la card: es lo que
     hace que la cabecera `sticky` tenga contra qué pegarse. Con el documento
     scrolleando, la fila de títulos se va con la página y el `sticky top-0` de
     `.mawi-th` es una promesa que el DOM no cumple. */
  overflow-y: auto;
}

/* Los DOS ejes con el mismo grosor: en cuanto la tabla scrollea en horizontal y
   en vertical a la vez, dos barras de grosor distinto en la misma caja se leen
   como dos controles distintos.
   ⚠️ El selector va PLANO sobre la clase del elemento que scrollea, no como
   `.padre > .hijo::-webkit-scrollbar`: con el combinador delante, webkit no
   aplica el pseudoelemento y la barra vuelve a ser de superposición — medido,
   `offsetHeight - clientHeight` daba 0px con el CSS presente en el bundle y sin
   un solo error. */
.mawi-table-viewport::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

/* La esquina donde se cruzan: sin esto queda un cuadro blanco del navegador
   entre las dos barras. */
.mawi-table-viewport::-webkit-scrollbar-corner {
  background: rgb(var(--color-surface-muted) / 1);
}

/* LOS BOTONES DE LOS EXTREMOS, FUERA. En cuanto se estiliza cualquier
   `::-webkit-scrollbar-*`, el navegador deja de dibujar la barra del sistema y
   pasa a la personalizada, en la que los botones de flecha EXISTEN y se pintan
   con su aspecto por omisión —un cuadro blanco— salvo que se apaguen a mano. En
   la vertical eso deja un cuadrado blanco pegado a la esquina superior derecha de
   la card, justo a la altura de la cabecera: con la cabecera teñida (#fafafa) se
   lee como que el header no llega hasta el canto. Van `display: none` Y las
   medidas a 0 porque Chrome respeta lo primero y Safari lo segundo. */
.mawi-table-viewport::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

.mawi-table-viewport::-webkit-scrollbar-track {
  background: rgb(var(--color-surface-muted) / 1);
}

/* El pulgar lleva un borde del color de la pista: es el truco para darle aire
   dentro de la barra sin poder usar padding. */
.mawi-table-viewport::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border-strong) / 1);
  border: 3px solid rgb(var(--color-surface-muted) / 1);
  border-radius: 999px;
}

.mawi-table-viewport::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-ink-subtle) / 1);
}

@supports not selector(::-webkit-scrollbar) {
  .mawi-table-viewport {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-border-strong) / 1) rgb(var(--color-surface-muted) / 1);
  }
}

.mawi-table-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 25; /* por encima de la cabecera sticky (20), por debajo de la
                  esquina congelada (30): la fila de títulos también continúa a
                  los lados, así que necesita la señal igual que las filas */
}

.mawi-table-edge.is-on {
  opacity: 1;
}

.mawi-table-edge-left {
  left: 0;
  background: linear-gradient(
    to right,
    rgb(20 20 20 / 0.11) 0%,
    rgb(20 20 20 / 0.055) 32%,
    rgb(20 20 20 / 0.02) 64%,
    rgb(20 20 20 / 0) 100%
  );
}

/* El de la derecha NO se planta en el canto de la card: se corre a la IZQUIERDA
   de la región congelada, que es donde el contenido desaparece de verdad —pasa
   por debajo de la columna de acciones, no por el borde—. El desplazamiento sale
   de MEDIR esa región en el DOM (`--mawi-frozen-right`), no de un `data-*` que
   una tabla nueva nacería sin poner. */
.mawi-table-edge-right {
  right: var(--mawi-frozen-right, 0px);
  background: linear-gradient(
    to left,
    rgb(20 20 20 / 0.11) 0%,
    rgb(20 20 20 / 0.055) 32%,
    rgb(20 20 20 / 0.02) 64%,
    rgb(20 20 20 / 0) 100%
  );
}

/* ── Mawi UI · el GUTTER del título: sus dos inquilinos (reglas 9, 11 y 38) ────
   La caja invisible que comparten el toggle del rail contraído y la flecha de
   volver — el mismo sitio, así que se escribe UNA vez: copiada, lo primero que
   divergiría es justo la aritmética que mantiene el título en su píxel.

     px-8 de la barra = 32px · chip de 24 a 4px del canto → 4..28
     margin-left −28  lo mete en el gutter · el `gap` del renglón devuelve los 4
     suma NETA: 24 − 28 + 4 = 0 → el título no se mueve, con glifo y sin él

   Sin caja y sin relleno: la excepción declarada de la regla 11. Lo que la
   justifica es DÓNDE vive y no cómo se ve — un glifo mudo aislado en el gutter no
   tiene vecinos de los que distinguirse, y el contorno le pondría un segundo
   rectángulo a 4px de la primera letra del título.

   El ÁREA DE PULSACIÓN llega a 32×32 por el pseudoelemento, que se sale hacia el
   canto (regla 19): la caja se queda en 24 porque el gutter mide 32 CONTADOS y un
   chip de 32 tocaría la «P» del título por un lado y el canto del lienzo por el
   otro.
──────────────────────────────────────────────────────────────────────────── */
.mawi-gutter-glifo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -1.75rem;
  border-radius: 0.4rem;
  color: rgb(var(--color-ink-soft) / 1);
  transition: background-color 150ms ease, color 150ms ease;
}

.mawi-gutter-glifo::before {
  content: "";
  position: absolute;
  inset: -0.25rem;
}

.mawi-gutter-glifo:hover {
  background-color: rgb(var(--color-surface-sunken) / 1);
}

/* ── Mawi UI · el despliegue de la RUTA (regla 8) ─────────────────────────────
   `grid-template-rows: 0fr → 1fr` y no `hidden`: `display:none` no interpola
   nada, así que la barra pegaba un salto y la ruta aparecía de golpe. Y `1fr` es
   el alto NATURAL de la fila, así que mide lo que mida la ruta sin que nadie lo
   declare — una altura escrita a mano habría que mantenerla a la par del
   contenido, y una ruta de dos renglones se cortaría.

   Entrada y salida ASIMÉTRICAS, con las dos curvas del popover (regla 6): la de
   cerrar no puede ser la de abrir, porque con la de entrada puesta en los dos
   sentidos la región recorre el 99,8% de su alto en los primeros 70ms —la ruta
   desaparece de golpe y el resto del tiempo se va en el último medio píxel—.
──────────────────────────────────────────────────────────────────────────── */
.mawi-page-route {
  grid-template-rows: 0fr;
  transition: grid-template-rows 150ms cubic-bezier(0.4, 0, 1, 1);
}

.mawi-page-route.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* El objetivo de un crumb llega a 24px sin que la fila crezca (regla 19). */
.mawi-crumb {
  position: relative;
  display: inline-block;
}

.mawi-crumb::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: -0.3125rem;
}

/* ── Mawi UI · LOS CONTROLES DE LA FILA DE LA TABLA (reglas 10 y 11) ───────────
   Un solo sitio, como `lib/tableStyles.js` en el prototipo. Escritas a mano,
   `h-8 text-[13px] rounded-lg border-border-strong/60` se copia bien nueve veces
   y mal la décima — y esa décima es la que se ve.

   32px y 13px: es CROMO, no contenido. Los 36/14 son de lo que ES el contenido de
   la pantalla (un formulario, un diálogo). El criterio manda sobre la lista y
   decide los casos de borde: un panel que se abre desde un control de 32 y
   configura la tabla es chrome de arriba abajo, así que va entero a 32/13 aunque
   por dentro parezca un formulario — a 36 se lee como un formulario flotando
   sobre la barra, y el salto salta a la vista en el borde del propio popover: el
   botón de dentro más alto que el que lo abrió.

   Lo que dice «esto se pulsa» es el CONTORNO, no un relleno más claro que su
   fondo: sobre el documento en blanco puro no existe nada más claro donde
   apoyarse.
──────────────────────────────────────────────────────────────────────────── */
/* KPI cards del Centro de Pagos: mismo alto en Pagos / CxP / Conciliación
   aunque CxP lleve la línea de hint bajo el monto. */
.mawi-pc-kpi {
  min-height: 5.5rem;
  box-sizing: border-box;
}

.mawi-toolbar-control {
  display: inline-flex;
  align-items: center;
  /* 8px de hueco y 10px de relleno lateral: el MISMO coste total que el
     `toolbarControl` del prototipo (`gap-2` + el `px-2` que el `Button` de shadcn
     aplica cuando el botón lleva glifo a los dos lados), o sea 32-36px de cromo
     por control. Aquí va un número fijo porque ERB no tiene el
     `has-data-[icon=inline-start]` con el que el primitivo distingue si hay
     glifo.
     ⚠️ Y por eso apretar esto NO es donde se arregla que la fila quepa: medido a
     1440 con el rail abierto hay 1.114px de contenido y los SIETE controles piden
     1.144. Lo que sobraba no era relleno, eran dos rótulos largos: «Columnas
     tabla» (159px) → «Vista» (90px) y «Administrar plantillas» (174px) →
     «Plantillas» (110px). Debajo de `xl-2xl` (1480px) «Plantillas» y «Exportar»
     quedan sólo icono (+ chevron en Exportar) vía `sr-only`. */
  gap: 0.5rem;
  height: 2rem;
  flex-shrink: 0;
  padding-inline: 0.625rem;
  border-radius: 0.4rem;
  border: 1px solid rgb(var(--color-border-strong) / 0.6);
  background-color: rgb(var(--color-surface-raised) / 1);
  font-size: 13px;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--color-ink) / 1);
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.mawi-toolbar-control:hover {
  background-color: rgb(var(--color-surface-muted) / 1);
}

/* ── EL BUSCADOR es el único control de la fila que NO SE PULSA, así que es el
   único con OTRO RELLENO: `canvas`, el MISMO gris del suelo de la app.

   La caja es idéntica a la de sus vecinos —32px, 13px, radio, contorno— y el
   relleno es toda la diferencia: la caja dice «esto es de esta fila», el relleno
   dice qué se hace con ello. Que sea literalmente el token del fondo de la página
   no es una elección de tono: el campo se lee como un HUECO abierto en el
   documento hasta el marco, y al ser ese token no puede desincronizarse de él —
   que es lo que pasa con un gris elegido a ojo.

   La escala medida sobre el documento blanco, que es la que hay que tener delante
   antes de tocar esto: `canvas` 1,044 · `surface-muted` 1,083 · `surface-sunken`
   1,153 · el hairline del contorno 1,599. Estuvo en `surface-sunken` y ahí, al
   lado de cinco pastillas blancas, 1,153 no se leía como un campo hundido sino
   como el elemento MÁS PESADO de la fila.

   Sin grano, claro: la textura del marco dentro de un campo de 32px es ruido, no
   material.

   CEDE ANCHO Y ES EL ÚNICO QUE LO HACE (`flex: 1`, tope 216px, suelo 160): así la
   fila comprime en vez de partirse en dos. Medido antes: a 1.100px de ventana la
   fila se rompía en TRES renglones.

   `padding-right` SIEMPRE, no sólo con algo escrito: si el hueco de la «x»
   llegara con el primer carácter, el texto que se está escribiendo saltaría de
   sitio.
──────────────────────────────────────────────────────────────────────────── */
.mawi-toolbar-search {
  height: 2rem;
  width: 100%;
  min-width: 10rem;
  border-radius: 0.4rem;
  border: 1px solid rgb(var(--color-border-strong) / 0.6);
  /* BLANCO, igual que sus vecinos. Estuvo en `canvas` —el gris del suelo de la
     app— siguiendo el párrafo de la regla 10, y medido contra el prototipo NO es
     lo que éste pinta: `toolbarSearch` en `lib/tableStyles.js` dice `bg-surface`
     y el render da rgb(255,255,255). O sea que el DOCUMENTO y el CÓDIGO del
     prototipo se contradicen, y cuando eso pasa gana el código. Queda anotado en
     el informe para que se decida en un sitio: si el `canvas` es lo correcto, hay
     que cambiarlo en el prototipo primero y volver a portarlo. */
  background-color: rgb(var(--color-surface) / 1);
  padding-left: 2.125rem;
  padding-right: 2.25rem;
  font-size: 13px;
  color: rgb(var(--color-ink) / 1);
}

.mawi-toolbar-search::placeholder {
  color: rgb(var(--color-ink-muted) / 1);
}

.mawi-toolbar-search:focus {
  outline: 2px solid rgb(var(--color-brand-500) / 1);
  outline-offset: 1px;
  border-color: rgb(var(--color-brand-300) / 1);
}

/* ── Mawi UI · EL PANEL DE UN CONTROL DE LA FILA (reglas 6, 11, 13 y 28) ───────
   El panel que se abre desde «Columnas tabla», «Agrupar por» o «Filtros» es
   CROMO DE ARRIBA ABAJO, y eso es lo que decide su talle: **32/13, campos y pie
   incluidos**, aunque por dentro parezca un formulario (regla 11). Los 36/14 son
   de lo que ES el contenido de la pantalla; aquí el panel configura la tabla, o
   sea que recorta el contenido, no lo es.
   El síntoma de equivocarlo se ve en el borde del propio popover: medido antes,
   el botón «Aplicar cambios» de dentro pintaba 40px y el disparador que lo había
   abierto 32 — el panel se leía como un formulario flotando sobre la barra.

   Va aquí y no repetido en cada plantilla por lo mismo que `.mawi-toolbar-control`:
   son TRES paneles y cada uno tiene cabecera, cuerpo y pie. Escrito a mano se
   copia bien dos veces y mal la tercera.

   `rounded-lg` (6,4px) y no `rounded-md`: es la caja de un control de la fila
   ampliada, no un menú de items. La sombra es `--mawi-shadow-pop`, la del sistema
   para lo que flota; `shadow-lg` de Tailwind es de otra escala.

   ⚠️ EL VELO (regla 6) NO ESTÁ AQUÍ, y es a propósito. Estos tres paneles llevan
   borrador + Cancelar + Aplicar, así que el contrato les pide el `PopoverScrim`
   ligero (5% de tinta, 2px de desenfoque) que además CAPTURA el click — hoy
   pinchar una fila con el panel abierto navega y se lleva el borrador sin decir
   nada. Cambiar qué hace un click fuera es comportamiento, no forma, así que
   espera decisión (reglas 30 y 37).
──────────────────────────────────────────────────────────────────────────── */
.mawi-toolbar-panel {
  background-color: rgb(var(--color-surface) / 1);
  border: 1px solid rgb(var(--color-border) / 1);
  border-radius: 0.4rem;
  box-shadow: var(--mawi-shadow-pop);
  color: rgb(var(--color-ink) / 1);
  font-size: 13px;
  line-height: 1.25rem;
}

/* La fila de controles vive ENCIMA de la card de la tabla. Sin un z-index propio,
   los paneles absolutos con `z-20` (Funcionalidades, Agrupar por) empatan con la
   cabecera sticky (`.mawi-th` = 20) y pierden: la tabla va después en el DOM, así
   que el thead tapa el desplegable. Elevar `#filters_section` de una vez —y no
   cada panel— cubre Filtros, Funcionalidades y Agrupar por; 40 gana a sticky (20)
   y al velo de scroll (25). El PageBar va a z-50 (`_upperbar`) para que el menú
   del CTA primario no quede detrás de esta fila. */
#filters_section {
  position: relative;
  z-index: 40;
}

/* La frase que explica el panel («Selecciona las columnas a visualizar»). Es
   AYUDA, o sea cromo: gris medio, nunca `ink` — ése es el color del dato y aquí
   no hay ninguno (regla 12). */
.mawi-toolbar-panel-hint {
  font-size: 13px;
  line-height: 1.25rem;
  color: rgb(var(--color-ink-muted) / 1);
}

/* El pie: Cancelar `outline` + Aplicar sólido, pegados y por la DERECHA. Es la
   forma con la que el producto dice «sí / no» en todas partes (regla 35), así que
   no se reordena por panel. `space-x-3` bajaba a `gap` de 8px: dos botones que
   son una sola decisión no se separan 12px. */
.mawi-toolbar-panel-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid rgb(var(--color-border) / 1);
}

/* El CTA del pie. Es la única excepción de forma de la regla 11: se distingue por
   el RELLENO sólido de marca, no por medir más — misma altura de 32 que su
   Cancelar y que el disparador que abrió el panel.
   `bg-cta` y no `#5D279C`: ese hex estaba escrito a mano en tres plantillas y era
   un morado distinto del de la marca (regla 3). */
.mawi-toolbar-control--primary {
  border-color: transparent;
  background-color: rgb(var(--color-cta) / 1);
  color: rgb(255 255 255 / 1);
  font-weight: 600;
}

.mawi-toolbar-control--primary:hover {
  background-color: rgb(var(--color-cta-dark) / 1);
}

/* Un CAMPO de dentro del panel — el texto de «Contiene:», el rango de fechas, los
   dos extremos del slider. Mismo talle que el pie y que el disparador: 32/13.
   NO fija relleno lateral: el rango de fechas centra su texto y el del slider
   lleva el suyo, así que el `px` se queda donde estaba. */
.mawi-toolbar-field {
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid rgb(var(--color-border-strong) / 0.6);
  background-color: rgb(var(--color-surface) / 1);
  font-size: 13px;
  line-height: 1.25rem;
  color: rgb(var(--color-ink) / 1);
}

.mawi-toolbar-field::placeholder {
  color: rgb(var(--color-ink-muted) / 1);
}

.mawi-toolbar-field:focus {
  outline: 2px solid rgb(var(--color-brand-500) / 1);
  outline-offset: 1px;
  border-color: rgb(var(--color-brand-300) / 1);
  box-shadow: none;
}

/* Los enlaces de acción del panel: «Limpiar», «Limpiar filtros», «+ Agregar
   filtro», «+ Agregar palabra clave». Van en `brand-600` —énfasis, que es uno de
   los tres usos que la regla 3 le deja al morado— y a 13px como todo lo demás de
   aquí dentro. Estaban en `text-mawi`, la paleta anterior. */
.mawi-toolbar-link {
  font-size: 13px;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--color-brand-600) / 1);
  transition: color 150ms ease;
}

.mawi-toolbar-link:hover {
  color: rgb(var(--color-brand-700) / 1);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}


/* ── Mawi UI · LA REJILLA DE UNA TABLA DENSA (reglas 12, 22 y 23) ──────────────
   · CABECERA en `surface-header` (#fafafa: 1,044 contra el papel) — cercana al
     blanco pero no blanca, para que la banda se distinga de las filas sin
     volverse un plano por encima de la rejilla. NO sube a `surface-muted` porque
     ése ES el gris del hover de fila, y la cabecera quedaría del color de una
     fila señalada.
   · TÍTULOS a 12px en mayúsculas con `tracking-wider` y en `ink`: un título de
     columna es una ETIQUETA funcional que se escanea con los datos, no un dato —
     así que va en Geist aunque su columna sea de importes.
   · CELDAS a 13px en `ink`. El gris medio (`ink-muted`) se queda para el cromo:
     una columna en gris medio se lee como desactivada al lado de sus vecinas.
   · REJILLA SUAVE EN LAS DOS DIRECCIONES. Las verticales estuvieron prohibidas y
     ahora son el estándar: en una rejilla ancha —siete columnas que llegan al
     borde— el ojo pierde la columna al saltar del nombre al importe. Van al
     límite de lo visible, que es lo que separa una guía de barrido de una
     cuadrícula de hoja de cálculo.
──────────────────────────────────────────────────────────────────────────── */
/* ⚠️ SE LLAMA `mawi-ui-table` Y NO `mawi-table`, Y ESO ES LO IMPORTANTE DE ESTE
   BLOQUE. `mawi-table` YA EXISTÍA en `task.css`, con `border-collapse: separate` y
   `border-spacing: 0 8px`, y la usan tablas de otras vistas (`api_keys`,
   `companies/clients`, `_grouped_contractors`). Chocar con ella costó dos cosas a
   la vez, y ninguna dio error:

     1 · En el modelo SEPARADO, un `border-bottom` en el `<tr>` NO SE PINTA (así lo
         dice la especificación). Las líneas horizontales de la tabla
         desaparecieron y las verticales se quedaron, o sea una rejilla a medias.
     2 · Mis reglas se FILTRARON a las tres vistas que llevan la clase vieja y que
         nadie ha revisado — el barrido global del que huye el método, por la
         puerta de atrás.

   La lección para la siguiente clase: comprobar que el nombre está libre
   (`grep -rn "\.mi-clase" app/assets/stylesheets`) antes de usarlo.

   POR ESO `.mawi-th`, `.mawi-td` y `.mawi-tr` VAN DENTRO DE `.mawi-ui-table` y no
   sueltas. Sin el scope volvía a pasar lo mismo por otra puerta: `projects/_row`
   lo renderizan también `external_projects` y `_external_projects`, cuyas tablas
   NO llevan `.mawi-ui-table` ni cabeceras migradas, así que esas dos pantallas
   cambiaban de aspecto sin que nadie las hubiera revisado. Con el scope las
   clases siguen en el marcado y no pintan nada fuera de la tabla migrada. */
.mawi-ui-table {
  width: 100%;
  border-collapse: collapse;
  /* El cuerpo se declara AQUÍ y no sólo en la celda: lo que va dentro de una fila
     y no fija su tamaño —una pastilla, el span de un editor en línea— heredaba los
     16px del `body`. Medido contra el prototipo, cuya tabla va a 14. */
  font-size: 13px;
}

.mawi-ui-table .mawi-th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgb(var(--color-surface-header) / 1);
  /* `py-2.5` y no `py-2`: son los 45px de alto del `headCell` del prototipo
     contra los 40 que salían con 8px de relleno. Medido en los dos DOM. */
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* `ink-soft` (#474747) y no `ink` (#141414). Es lo que pinta la pantalla de
     referencia del prototipo, y el motivo es de ROL: un título de columna es una
     etiqueta de grupo, no un dato, y en el mismo negro puro que las celdas
     competía con ellas —12px/600 negro contra 13px/400 negro separa demasiado
     poco—. El otro sitio del producto con ese rol, las secciones del menú, ya va
     en `ink-soft`. Sigue en 9,3:1, o sea AAA.
     ⚠️ En el prototipo esto es un EXPERIMENTO de una sola pantalla: su
     `headCell` compartido todavía dice `ink`. Si allí se revierte, aquí también. */
  color: rgb(var(--color-ink-soft) / 1);
  white-space: nowrap;
  /* Las verticales de la CABECERA van un paso más marcadas que las de las celdas
     (`border-strong/40` contra `border/70`), como en el prototipo: la banda de
     títulos es la que se escanea para encontrar la columna. */
  box-shadow:
    inset -1px 0 0 0 rgb(var(--color-border-strong) / 0.4),
    inset 0 -1px 0 0 rgb(var(--color-border-strong) / 0.6);
}

/* Ni la cabecera ni la celda pintan su vertical en la ÚLTIMA columna: ahí el
   canto lo da la card, y con las dos cosas quedaba una línea doble pegada al
   borde. */
.mawi-ui-table tr > .mawi-th:last-child {
  box-shadow: inset 0 -1px 0 0 rgb(var(--color-border-strong) / 0.6);
}

.mawi-ui-table .mawi-td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.25rem;
  /* PESO 500 y no 400, que es lo que pinta la pantalla de referencia del
     prototipo. No es para «destacar»: es para no quedar por debajo del CROMO.
     Medido, los items del menú van a 14/450 y el nombre de la cuenta a 600, así
     que con la tabla en 400 los rótulos de navegación pesaban más que los datos —
     y la rejilla es el CONTENIDO de la pantalla, no puede ser lo más ligero que
     hay en ella. Subir medio escalón arregla la jerarquía sin tocar la densidad
     (la fila no crece) ni romper la uniformidad. */
  font-weight: 500;
  color: rgb(var(--color-ink) / 1);
  /* La horizontal va en la CELDA y no en el `<tr>`, que es donde estaba: un borde
     en la fila sólo se pinta en el modelo COLAPSADO, y basta que alguien ponga
     `border-collapse: separate` más arriba para que la rejilla se quede a medias
     sin que nada falle. En la celda se pinta siempre. */
  border-bottom: 1px solid rgb(var(--color-border) / 1);
  box-shadow: inset -1px 0 0 0 rgb(var(--color-border) / 0.7);
}

.mawi-ui-table tr > .mawi-td:last-child {
  box-shadow: none;
}

.mawi-ui-table .mawi-tr {
  transition: background-color 100ms ease;
}

.mawi-ui-table .mawi-tr:hover {
  background-color: rgb(var(--color-surface-muted) / 1);
}

/* La MONO es sólo para EL DINERO (regla 12), y la frontera se ha estrechado dos
   veces por el mismo motivo: una señal repartida deja de señalar. Primero fue la
   tabla entera, luego «todo dato numérico» —y seguía cubriendo media tabla,
   porque el código, la fecha y el contador son números tanto como el monto—.
   Ahora aparece en UNA columna por tabla y quiere decir exactamente «esto es
   plata». La razón dura es el colón: en una proporcional el glifo ₡ cae a una
   fuente del sistema y desafina de los dígitos. */
.mawi-cell-money {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Las DEMÁS cifras —código, fecha, conteo, porcentaje, cantidad— alinean por
   dígito SIN cambiar de familia. */
.mawi-cell-figure {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ── Mawi UI · LA COLUMNA CONGELADA, por encima del degradado (regla 24) ───────
   `fixed_actions_column.css` fija la columna de acciones con `!important` y con
   una escala de z-index que es anterior al sistema: `th.actions` a **11** y
   `td.actions` a **1**. Con el degradado del canto en 25 y la cabecera en 20, eso
   deja la columna congelada POR DEBAJO de las dos, y el síntoma es justo el que se
   ve al desplazar la tabla a lo ancho: un velo gris sobre los «…» y, en la esquina
   superior derecha, la cabecera de esa columna pintada por debajo del degradado.

   Y de paso el BLANCO. Ese fichero pinta `background-color: white !important` con
   un selector `.actions` a secas, así que alcanza también a la `th` — que quedaba
   blanca dentro de una banda de cabecera en #fafafa: el cuadro claro de la esquina.
   Aquí la `th` vuelve al token de la cabecera y la `td` al del papel, con su hover
   de fila.

   La escala que queda es la documentada: cabecera 20 · degradado 25 · celda
   congelada 26 · esquina congelada 30.

   Va con `!important` porque hay que ganarle a un `!important`, y SCOPED a
   `.mawi-ui-table` porque las otras diez tablas con columna fija no se han
   revisado — arreglarlo en el fichero global las repintaría todas de una vez.
──────────────────────────────────────────────────────────────────────────── */
.mawi-ui-table thead th.actions {
  z-index: 30 !important;
  background-color: rgb(var(--color-surface-header) / 1) !important;
  box-shadow:
    inset 1px 0 0 0 rgb(var(--color-border-strong) / 0.4),
    inset 0 -1px 0 0 rgb(var(--color-border-strong) / 0.6) !important;
}

.mawi-ui-table tbody td.actions {
  z-index: 26 !important;
  background-color: rgb(var(--color-surface) / 1) !important;
  /* La costura del canto congelado, con el mismo token que la del PageBar y la de
     la cabecera: dice «esto sigue por debajo» pegada al canto, y junto al
     degradado se lee como una sola rampa. El `-2px 0 5px rgba(0,0,0,.05)` del
     fichero legado era una sombra suelta con su propio gris. */
  box-shadow: inset 1px 0 0 0 rgb(var(--color-border-strong) / 1) !important;
}

.mawi-ui-table tbody tr:hover td.actions {
  background-color: rgb(var(--color-surface-muted) / 1) !important;
}

/* ── EL CARET DEL ASISTENTE (regla 34) ──────────────────────────────────────
   2px en `brand-400` mientras MAIA escribe. Es la única señal de que el texto
   está llegando ahora y no de que ya estaba: sin él, un revelado de 1,1s se lee
   como una página que carga a trompicones.
   Alto `1em` y no un valor fijo, para que siga a la línea en la que está.
   El parpadeo vive dentro de `prefers-reduced-motion` (regla 18); sin
   movimiento, el caret ni se pinta — el texto llega entero de una vez y no hay
   nada que acompañar. */
.maia-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background-color: rgb(var(--color-brand-400) / 1);
}

@media (prefers-reduced-motion: no-preference) {
  .maia-caret {
    animation: maia-caret-latido 1s steps(2, start) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maia-caret { display: none; }
}

@keyframes maia-caret-latido {
  to { opacity: 0; }
}

/* ── Mawi UI · EL SWITCHER DE PROYECTO del submenú (reglas 11, 12 y 29) ────────
   Es el `ProjectSwitcher` del prototipo portado sobre el tom-select que ya había.
   Va SCOPED a `[data-controller~="project-sidebar-select"]`: `custom-tom-select.css`
   es global, lleva `!important` en cada línea y lo usan todos los tom-select de la
   app — repintarlo entero alcanzaría a decenas de pantallas sin revisar.

   Lo que se iguala al prototipo, medido en su DOM:
     · la CAJA: 38px de alto, radio 6,4px (`--radius`, el del control), contorno
       `border-strong` y relleno lateral de 12px. Antes traía `rounded-md` (6),
       `border-gray-300` y una `shadow-sm` que ningún otro control de la app lleva.
     · el TEXTO: 14px y peso **500** en `ink-soft`. El cuerpo es el MISMO que los
       items del submenú y la distancia la pone el PESO: este control nombra el
       PROYECTO —el contexto más importante de la columna—, así que tiene que
       ganarles, pero por peso y no por cuerpo. A 500 pesa 7.000 contra los 6.300
       de un item: gana a los items y se retira por detrás del título de la barra
       (9.000) en vez de competir con él a 40px. A 600 mediría 8.400 y la pieza más
       marcada de la pantalla pasaría a ser un rótulo de CONTEXTO.
     · el GLIFO: **chevrons-up-down** (⇅) y no un chevron hacia abajo. No es
       decoración: un chevron dice «esto despliega una lista», y ⇅ dice «esto
       CAMBIA entre elementos del mismo tipo» — que es lo que hace. Es el mismo
       glifo del switcher de cuenta del pie del rail.

   ⚠️ El color del glifo va como HEX dentro del data URI porque un
   `background-image` no puede resolver `var()` ni heredar `currentColor`. Es
   `--color-ink-subtle` (#a3a3a3): si ese token cambia, esta línea cambia con él.
   No hay `url()` DENTRO del SVG, así que aquí no aplica el problema de sprockets
   reescribiendo referencias internas.
──────────────────────────────────────────────────────────────────────────── */
[data-mawi-submenu] .ts-wrapper,
[data-mawi-submenu] .ts-control-wrapper {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
}

[data-mawi-submenu] .ts-wrapper.ts-wrapper .ts-control {
  min-height: 38px !important;
  height: 38px !important;
  /* La hoja base de tom-select declara `.ts-control { display:flex }` SIN
     `align-items`, o sea `stretch`: con el alto clavado en 38px el `.item` se
     estiraba entero y su texto, a `line-height: 20px`, se pintaba pegado al
     canto de ARRIBA — 9px por encima del centro. El glifo ⇅ sí caía centrado
     porque es un `background-image` con `background-position: center`, y ese
     desfase entre glifo y texto es lo que hacía el defecto tan visible. */
  align-items: center !important;
  padding: 0 2.25rem 0 0.75rem !important;
  border: 1px solid rgb(var(--color-border-strong) / 1) !important;
  border-radius: var(--radius, 0.4rem) !important;
  background-color: rgb(var(--color-surface) / 1) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: rgb(var(--color-ink-soft) / 1) !important;
  transition: background-color 150ms ease !important;
  /* ⇅ en vez de ⌄ — ver el porqué arriba. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1rem 1rem !important;
}

[data-mawi-submenu] .ts-wrapper.ts-wrapper .ts-control:hover {
  background-color: rgb(var(--color-surface-muted) / 1) !important;
}

/* El nombre del proyecto casi siempre se trunca —«Casa Cielo Azul - Ejemp…»— y el
   completo se ofrece en el `title` del control. Sin esto, tom-select lo deja
   desbordar por debajo del glifo. */
[data-mawi-submenu] .ts-wrapper.ts-wrapper .ts-control > .item {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgb(var(--color-ink-soft) / 1) !important;
}

/* ── Mawi UI · EL ITEM ACTIVO del submenú de proyecto (reglas 3 y 12) ──────────
   El estado activo lo pinta `.settings-dropdown` (en `application.css`), que es
   anterior al sistema y se comparte con el menú de Configuración. Aquí se corrige
   SCOPED al submenú migrado, con tres desviaciones medidas contra el prototipo:

     · el RELLENO era `#35015D`, escrito a mano, contra el `#35035D` del token
       `brand-deep`. Dos unidades de verde: no se ve solo y sí se ve al lado del
       item activo del rail, que sí sale del token;
     · el RADIO era `0.375rem` (6px) contra los **5,12px** de `rounded-md`. La
       escala de radios de este proyecto sale de `--radius` 0.4rem y está bien
       declarada en `tailwind.config.js`; el que se salía era este valor a mano;
     · y al glifo le faltaba el escalón de TRAZO. Sobre el relleno morado sólido
       el trazo se adelgaza ópticamente y se perdía justo en el item que más tiene
       que leerse, así que el sistema lo sube a 2 — es relativo a sus vecinos en
       1.75, no un absoluto (regla 12).

   No se toca `application.css`: ese `.settings-dropdown` lo usa también el menú de
   Configuración, que no se ha revisado, y cambiarlo allí lo repintaría de paso.
──────────────────────────────────────────────────────────────────────────── */
[data-mawi-submenu] .settings-dropdown {
  background: rgb(var(--color-brand-deep) / 1) !important;
  border-radius: 5.12px !important;
}

[data-mawi-submenu] .settings-dropdown svg :is(path, circle, rect, line, polyline, polygon, ellipse),
[data-mawi-submenu] .settings-dropdown svg[stroke] {
  stroke-width: 2 !important;
}

/* Las bandas de marca del rail y del submenú bajan lo que dice el token derivado
   (ver `--mawi-nav-header-top` en la fundación): así la «m», el nombre del
   proyecto y el título de la pantalla comparten renglón. */
.mawi-nav-header {
  margin-top: var(--mawi-nav-header-top);
}

/* Rail contraíble en el cliente. Las dos ramas viajan en el DOM; el <body>
   decide cuál se ve. El ancho de la columna sigue a esa misma clase para que
   el documento no se quede con el padding del otro estado. Por debajo de md
   el rail ya es `hidden` y el cajón toma el relevo: no tocar el padding.

   El intercambio NO es `display: none`: eso corta el ancho de golpe. Las dos
   ramas se quedan apiladas (`fixed`) y el ancho, el padding del documento y
   la opacidad interpolan. `visibility` espera a que termine el fundido para
   que la rama oculta no reciba foco ni se lea. */
@media (min-width: 768px) {
  .mawi-main-rail {
    padding-left: calc(15rem + 0.625rem);
    transition: padding-left 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.mawi-rail-collapsed .mawi-main-rail {
    padding-left: calc(4rem + 0.625rem);
  }
}

.mawi-rail-pane {
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    visibility 0s linear 0s;
}

.mawi-rail-pane-expanded {
  z-index: 31;
}

.mawi-rail-pane-collapsed {
  z-index: 30;
}

body.mawi-rail-collapsed .mawi-rail-pane-expanded {
  width: 4rem !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

body:not(.mawi-rail-collapsed) .mawi-rail-pane-collapsed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.mawi-rail-expand {
  transition: opacity 200ms ease, background-color 150ms ease, color 150ms ease;
}

body:not(.mawi-rail-collapsed) .mawi-rail-expand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mawi-main-rail,
  .mawi-rail-pane,
  .mawi-rail-expand {
    transition: none;
  }
}

/* ── Mawi UI · LOS HIJOS de un grupo del submenú de proyecto ───────────────────
   Son el `navChild` / `navChildIdle` / `navChildActive` del prototipo. Medido
   antes: el hijo era un enlace suelto de 20px de alto, peso 500, en `ink` y sin
   relleno ni radio — o sea que no tenía área de pulsación propia (el objetivo era
   el texto), no respondía al ratón con superficie y pesaba más que su propio
   padre en reposo.

   Lo que define la pieza y no hay que deshacer:
     · **32px de alto, relleno de 10px y radio de menú**, igual que un item de
       primer nivel: es un enlace de navegación, así que su objetivo es la fila
       entera y no la palabra (regla 19).
     · **Peso 450 y `ink-soft`**, los mismos que el item padre. El hijo no es un
       nivel «menos importante» que haya que aclarar: es la misma clase de cosa,
       un renglón más adentro.
     · **CONSERVA EL HOVER** (`brand-100/40`), al revés que un item con relleno:
       sin fondo propio, un enlace que no responde al ratón mientras sus hermanos
       sí se lee como roto. Lo que dice «ésta es la página» son el texto y el punto.
     · **El activo va en `brand-700` a peso 600 y SIN relleno**, con un punto en la
       columna del icono de su padre. Así queda UN SOLO morado sólido por columna:
       con los dos rellenos a 4px se leen como dos cosas seleccionadas, y sólo una
       es la página (regla 3).
──────────────────────────────────────────────────────────────────────────── */
.mawi-nav-child {
  position: relative;
  display: block;
  border-radius: 5.12px;
  padding: 0.375rem 0.625rem;
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  color: rgb(var(--color-ink-soft) / 1);
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}

.mawi-nav-child:hover {
  background-color: rgb(var(--color-brand-100) / 0.4);
  color: rgb(var(--color-brand-700) / 1);
}

.mawi-nav-child-on {
  font-weight: 600;
  color: rgb(var(--color-brand-700) / 1);
}

/* Un hijo BLOQUEADO: mismo sitio y misma caja, tinta apagada y sin hover. El
   candado que lo acompaña ya dice por qué (regla 4). */
.mawi-nav-child-off {
  color: rgb(var(--color-ink-subtle) / 1);
  cursor: not-allowed;
}

.mawi-nav-child-off:hover {
  background-color: transparent;
  color: rgb(var(--color-ink-subtle) / 1);
}

/* EL PUNTO del hijo activo, en la columna del icono de su padre.
   ⚠️ La geometría NO es la misma que la del rail (`.mawi-nav-child-dot`), y por
   eso son dos clases: allí el panel lleva `ml-5` y el disparador `px-2`, aquí el
   panel lleva `ml-[1.625rem]` (los 10px del `px-2.5` del padre + los 16 de su
   icono) y el hijo `px-2.5`. Con esa indentación, un ancla de 16px colgada a la
   izquierda del hijo cae exactamente sobre el glifo del padre — las dos medidas
   salen del mismo par de números y se mueven juntas.
   Se centra en la PRIMERA línea (`top` + alto de renglón), o en un hijo de dos
   renglones flotaría entre los dos. Y es `bg-current`, o sea el morado del propio
   texto, así que no puede desafinar de él. */
.mawi-nav-child-mark::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.375rem;
  width: 1rem;
  height: 20px;
  background-image: radial-gradient(circle at center, currentColor 3px, transparent 3px);
  pointer-events: none;
}

/* ── Mawi UI · el PageBar no lleva ancho fijo en móvil (reglas 5 y 37) ─────────
   `application.css` fuerza `.upper-bar-mobile { width: 475px }` por debajo de
   430px (y 465 a ≤390, 440 a ≤375). Son hacks de cuando esa barra era otra cosa,
   y con el panel del documento recortando el canto dejaban de ser feos y pasaban
   a ser una pérdida: medido a 430px de ventana, el panel mide 420 y la barra 475,
   así que **56px quedan fuera del recorte y «Crear proyecto» no se puede
   pulsar** — y no hay scroll horizontal al que ir, porque el ancho es del propio
   nav. Un control que existe y no se alcanza es lo que la regla 37 prohíbe.

   Va SCOPED a `nav[data-mawi-ui]`, que es la barra migrada: la misma clase la
   lleva `mobile/_project_upperbar`, que no se ha revisado y podría depender de
   ese ancho. Y con (0,2,1) gana a las tres reglas legadas sin importar el orden
   de carga ni su media query.

   La barra nueva es un flex con `gap` y `shrink-0` en su banda, así que fluida
   comprime en vez de desbordar — que es lo que se le pide a cualquier ancho.
──────────────────────────────────────────────────────────────────────────── */
nav[data-mawi-ui].upper-bar-mobile {
  width: auto;
}
/* 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,
.bulk-assignment-ai-dropdown .searchable-dropdown-component input[type="text"][readonly] {
  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,
.bulk-assignment-ai-dropdown .searchable-dropdown-component input[type="text"][readonly]: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;
}

/* Indeterminate progress bar animation for AI loading states */
@keyframes indeterminate-progress {
  0% { transform: translateX(-100%); width: 40%; }
  50% { width: 60%; }
  100% { transform: translateX(250%); width: 40%; }
}

.animate-indeterminate-progress {
  animation: indeterminate-progress 1.8s ease-in-out infinite;
}

/* Material Match - selected suggestion card */
.material-match-suggestion-selected {
  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;
}

/* Keep dropdowns unclipped. Narrow screens use one review card per line. */
.bulk-assignment-mobile-description { display: none; }
#bulk_assignment_card button:disabled { opacity: .55; cursor: default; }
#bulk_assignment_card[aria-busy="true"] button:disabled { cursor: wait; }
#bulk_assignment_card :is(button, a):focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .bulk-assignment-table table,
  .bulk-assignment-table tbody { display: block; width: 100%; }
  .bulk-assignment-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .bulk-assignment-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 0; }
  .bulk-assignment-table td { display: block; min-width: 0; text-align: left; }
  .bulk-assignment-table td:first-child,
  .bulk-assignment-table td:has(.category-assignment-component) { grid-column: 1 / -1; }
  .bulk-assignment-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; color: #6b7280;
  }
  .bulk-assignment-table .bulk-assignment-description { display: none; }
  .bulk-assignment-mobile-description { display: block; overflow-wrap: anywhere; }
}

@media (max-width: 700px) {
  .bulk-assignment-actions form, .bulk-assignment-actions button { width: 100%; }
}
.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;
}
/* Work Program PDF — app/views/chronograms/pdf.html.erb */

@page {
  size: letter landscape;
  margin: 5mm 5mm 8mm 5mm;
}

.work-program-pdf-root {
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  color: #111;
  padding: 4px 2px 0 2px;
}

.work-program-pdf-root .work-program-pdf-title-project {
  font-size: 13px;
}

.work-program-pdf-root .work-program-pdf-title-main {
  font-size: 18px;
}

.work-program-pdf-root .work-program-pdf-title-meta {
  font-size: 10px;
}

.work-program-pdf-root .work-program-pdf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.work-program-pdf-root .work-program-pdf-table thead {
  display: table-header-group;
}

.work-program-pdf-root .work-program-pdf-table tr {
  page-break-inside: avoid;
}

.work-program-pdf-root .work-program-pdf-table th,
.work-program-pdf-root .work-program-pdf-table td {
  border: 1px solid #d1d5db;
  padding: 3px 4px;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.work-program-pdf-root .work-program-pdf-table th {
  background: #f3f4f6;
  font-weight: 700;
  font-size: 10px;
  text-align: left;
  line-height: 1.2;
}

.work-program-pdf-root .work-program-pdf-table td {
  font-size: 10px;
}

.work-program-pdf-root .work-program-pdf-table .work-program-pdf-description-col,
.work-program-pdf-root .work-program-pdf-table td.work-program-pdf-description {
  width: 16%;
  max-width: 16%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.work-program-pdf-root .text-right {
  text-align: right;
}

.work-program-pdf-root .text-center {
  text-align: center;
}

.work-program-pdf-root .work-program-pdf-description[data-level="1"] { padding-left: 10px; }
.work-program-pdf-root .work-program-pdf-description[data-level="2"] { padding-left: 18px; }
.work-program-pdf-root .work-program-pdf-description[data-level="3"] { padding-left: 26px; }
.work-program-pdf-root .work-program-pdf-description[data-level="4"] { padding-left: 34px; }
.work-program-pdf-root .work-program-pdf-description[data-level="5"] { padding-left: 42px; }
.work-program-pdf-root .work-program-pdf-description[data-level="6"] { padding-left: 50px; }
.work-program-pdf-root .work-program-pdf-description[data-level="7"] { padding-left: 58px; }
.work-program-pdf-root .work-program-pdf-description[data-level="8"] { padding-left: 66px; }
/* 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);
  }
}
/* Progressive AI classification animations — tag badges only (budget_base)

   --classification-anim-t0: elapsed ms since classifying session start (set by
   classification_status_controller). Negative animation-delay joins newly
   inserted sibling tags to the same shimmer/pulse phase instead of restarting. */

.classification-tag--pending {
  position: relative;
  overflow: hidden;
}

.classification-tag--pending::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(93, 39, 156, 0) 0%,
    rgba(93, 39, 156, 0.08) 45%,
    rgba(93, 39, 156, 0.16) 50%,
    rgba(93, 39, 156, 0.08) 55%,
    rgba(93, 39, 156, 0) 100%
  );
  background-size: 220% 100%;
  animation: classification-tag-shimmer 2.8s ease-in-out infinite;
  animation-delay: calc(var(--classification-anim-t0, 0) * -1ms);
}

/* One-shot entrance when a tag flips unclassified → classified on a refresh. */
.classification-tag--just-classified {
  animation: classification-tag-pop 2s ease-out forwards;
}

/* Held for the whole classifying session (until ai_classified hard-reload).
   Soft pulse only when the entrance animation is not running. */
.classification-tag--classified-this-run:not(.classification-tag--just-classified) {
  box-shadow: 0 0 0 1px rgba(93, 39, 156, 0.32), 0 0 8px rgba(93, 39, 156, 0.18);
  animation: classification-tag-this-run-pulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--classification-anim-t0, 0) * -1ms);
}

@keyframes classification-tag-shimmer {
  0% {
    background-position: 200% 0;
    opacity: 0.4;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    background-position: -200% 0;
    opacity: 0.4;
  }
}

@keyframes classification-tag-pop {
  0% {
    transform: scale(0.88);
    opacity: 0.65;
    box-shadow: 0 0 0 2px rgba(93, 39, 156, 0.45), 0 0 10px rgba(93, 39, 156, 0.3);
  }
  18% {
    transform: scale(1.06);
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(93, 39, 156, 0.55), 0 0 14px rgba(93, 39, 156, 0.4);
  }
  45% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(93, 39, 156, 0.25), 0 0 6px rgba(93, 39, 156, 0.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(93, 39, 156, 0.32), 0 0 8px rgba(93, 39, 156, 0.18);
  }
}

@keyframes classification-tag-this-run-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(93, 39, 156, 0.28), 0 0 6px rgba(93, 39, 156, 0.14);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(93, 39, 156, 0.42), 0 0 12px rgba(93, 39, 156, 0.26);
  }
}
.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);
}
/* Consistency Issues Monitor */

/* Health Ring */
.health-ring { position: relative; width: 96px; height: 96px; }
.health-ring svg { transform: rotate(-90deg); }
.health-ring-bg  { fill: none; stroke: #e5e7eb; stroke-width: 8; }
.health-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }

/* Stat Cards */
.stat-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Typography */
.mono { font-family: 'JetBrains Mono', monospace; }
.dash-font { font-family: 'DM Sans', sans-serif; }

/* Bar charts */
.bar-bg  { background: #f3f4f6; border-radius: 4px; height: 8px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }

/* Misc */
.badge-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; margin-bottom: 12px; }

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: ci-shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes ci-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Custom scrollbar */
.dash-font *::-webkit-scrollbar { width: 8px; height: 8px; }
.dash-font *::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 4px; }
.dash-font *::-webkit-scrollbar-thumb { background-color: #9ca3af; border-radius: 4px; border: 1px solid #e5e7eb; }
.dash-font *::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
.dash-font * { scrollbar-width: thin; scrollbar-color: #9ca3af #e5e7eb; }

/* Tom Select overrides for monitor filter */
.monitor-filter .ts-wrapper.single .ts-control {
  height: 2rem;
  min-height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  border-color: #d1d5db;
  border-radius: 0.25rem;
  background: white;
  align-items: center;
}
.monitor-filter .ts-wrapper.single .ts-control input { font-size: 0.75rem; }
.monitor-filter .ts-dropdown { font-size: 0.75rem; }
.monitor-filter .ts-dropdown .option { padding: 6px 10px; }
.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;
  }
/* Dashboard filter bar — project multi-select dropdown styling.
   The dropdown renders into <body> via TomSelect's dropdownParent option,
   so it floats above the canvas instead of pushing content down. */

.dashboard-project-select-dropdown.ts-dropdown {
  z-index: 1000;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}

.dashboard-project-select-dropdown.ts-dropdown .ts-dropdown-content {
  max-height: 16rem;
  overflow-y: auto;
  padding: 4px 0;
}

.dashboard-project-select-dropdown.ts-dropdown .option {
  padding: 0;
  cursor: pointer;
}

.dashboard-project-select-dropdown.ts-dropdown .option.active {
  background-color: #f3f4f6; /* gray-100 */
}

.dashboard-project-select-dropdown.ts-dropdown .option.selected > div > span:first-child {
  background-color: #5D279C; /* mawi */
  border-color: #5D279C;
}

.dashboard-project-select-dropdown.ts-dropdown .option.selected > div > span:first-child > svg {
  opacity: 1;
  color: white;
}
.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: calc(100% + 6px) !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: 60;
  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;
}

/* Bulk-action bar ("Asignación grupal"). Overrides the mobile rules in
   application.css (which we cannot edit) via a `body` prefix for specificity.
   application.css sets `top: -20%` on this fixed bar, which also has an inline
   `bottom: 1.5rem`; with both top and bottom set the box stretches taller than
   the screen and, being pointer-events:auto/z-index:9, covers the viewport and
   hides itself off-screen on Android (<=430px). Dropping `top` collapses it to
   its content height anchored to the bottom, so it becomes visible.
   `width` stays on the element's own utility class: the expenses bar is pinned
   with left+right and centers itself with `w-fit mx-auto`, so forcing
   `width: auto` here stretched it across the whole content area and pushed the
   buttons to the left edge. */
body [data-controller~="components--shared--bulk-actions--code-association-and-tax"] {
  max-width: calc(100vw - 1rem);
}

@media (max-width: 430px) {
  body [data-controller~="components--shared--bulk-actions--code-association-and-tax"] {
    /* Sit a few px from the left/right edges and a small gap above the bottom.
       `bottom` is set inline (1.5rem) on the element, so it needs !important. */
    top: auto;
    left: 5px;
    right: 5px;
    bottom: 14px !important;
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* On phones/tablets shrink the action buttons so the 3 options fit complete in a
   single row without horizontal scroll: they share the bar width, wrap their own
   text, and use a smaller font/padding. */
@media (max-width: 640px) {
  body [data-components--shared--bulk-actions--code-association-and-tax-target="initialForm"] .overflow-x-auto {
    flex-wrap: nowrap;
    overflow-x: visible;
    gap: 0.4rem;
  }

  body [data-components--shared--bulk-actions--code-association-and-tax-target="initialForm"] .overflow-x-auto > button {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
    line-height: 1.15;
  }

  /* Compact the code/category/tax/discount sub-forms so the bar stays roughly the
     same height (and place) as the 3-button view instead of growing tall when one
     opens. application.css stacks them with 1rem gap/padding, which makes the bar
     jump upward. */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"],
  body [data-components--shared--bulk-actions--code-association-and-tax-target="categoryForm"],
  body [data-components--shared--bulk-actions--code-association-and-tax-target="taxForm"],
  body [data-components--shared--bulk-actions--code-association-and-tax-target="discountForm"] {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  /* application.css (<=430) gives `.code-form-container` (the code sub-form) its own
     `position: fixed; top: 60%; left: 65%`, which yanks it out of the bar to a
     floating spot. The category/tax/discount sub-forms have no such rule, so they
     stay inside the bar. Neutralize it so the code form renders in place too,
     in the exact same spot as the initial buttons and the category form. */
  body [data-controller~="components--shared--bulk-actions--code-association-and-tax"] [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"].code-form-container {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: auto;
    z-index: auto;
    box-shadow: none;
  }

  /* The line dropdown is `min-w-[600px]` in its component, which works in the wide
     manual-assignment table (it scrolls horizontally) but overflows the narrow
     bulk-action bar off the phone screen. Here we shrink the menu to the width of
     the select it hangs from so the options (rendered natively, one line each) fit
     on screen instead of being cut off. The bar sits at the bottom of the screen,
     so the menu must open UPWARD (anchored above the input) or it runs off the
     bottom behind the OS taskbar. Forced here so it does not depend on the
     component's `direction` value being re-rendered. */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] {
    min-width: 0;
    width: 100%;
    max-width: calc(100vw - 10px);
    left: 0;
    right: auto;
    /* Open upward: pin the menu's bottom edge to the top of the input. `top: auto`
       cancels the component's `top-full` (open-down) class when present. */
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
    /* The component's `h-[400px]` does not compile here, so give the menu a fixed
       viewport-relative height: tall enough to show several options, but short
       enough to never run off the top of the screen. The list scrolls inside. */
    height: 45vh;
    max-height: 45vh;
  }

  /* application.css (≤430) forces `flex-direction: column` + centering on every
     `.flex` inside the codeForm. That is meant for the form controls, but it also
     hits the dropdown's option rows and tabs, stacking "code · name · category"
     vertically and centering them. Restore a left-aligned single-line row layout
     inside the menu only (the form controls keep application.css's column layout). */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] .flex {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  /* Keep each option on one line (the column layout above had let them wrap), and
     let the description shrink/truncate instead of pushing the category off the
     right edge of the narrow dropdown — flex items need `min-width: 0` to shrink
     below their content width so `truncate` can take effect. */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] .parentLine .description-column,
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] .parentLine .category-column {
    white-space: nowrap;
    min-width: 0;
  }

  /* Compact the dropdown header so more of the limited menu height goes to the
     options list. The helper line ("Selecciona la línea…") is redundant with the
     search placeholder, so hide it here to reclaim its space for the options. */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] > .title-associaton_modal {
    display: none;
  }

  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] > .px-3.py-2 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* Let the options list fill the menu's available height and scroll inside it.
     The component's `h-[260px]` does not compile here, and as a plain flex item
     the list collapses to ~26px (flex-shrink); `flex: 1` + `min-height: 0` makes
     it take the remaining space under the search/tabs so several options show. */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] .budgetLines.modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }

  /* application.css (≤430) pins `.budgetLines { width: 360px }`, which is wider than
     the shrunk dropdown and makes the option rows (w-full) overflow off the right
     edge. Constrain the list to the menu width so the rows fit inside it. */
  body [data-components--shared--bulk-actions--code-association-and-tax-target="codeForm"] [data-code-association-with-menu-target="menu"] .budgetLines {
    width: 100%;
  }

}
.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: auto !important;
    border-collapse: collapse !important;
    width: 100% !important;
  }

  /* Repeat the header row on every printed page and keep rows unbroken. */
  body.financial-report-printing thead {
    display: table-header-group !important;
  }

  body.financial-report-printing tr {
    page-break-inside: avoid !important;
  }

  body.financial-report-printing td,
  body.financial-report-printing th {
    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);
  }
}
/*
 * MAW-1572 — MAIA: inbox message highlight + utilidades de la pantalla.
 *
 * `.maia-msg-highlight` briefly flashes the auto-update message the user jumped to from the
 * concise Inbox list, so the item "expands" visibly in the main area.
 *
 * Loaded via `require_tree .` from application.css.
 *
 * ── Mawi UI (2026-08-23) · lo que se fue de aquí ──
 * Las reglas `.maia-pill.is-active` se han ido CON su pieza: las cuatro
 * pastillas de `_maia_top_actions` pasaron a ser la banda de pestañas de la
 * regla 33 (`_maia_tabs`), donde el estado activo lo dice el subrayado que se
 * desliza y no un relleno. Dejar aquí un selector que apuntaba a un fichero
 * borrado es peor que borrarlo: se lee como que la pieza sigue existiendo.
 * `side_panel_controller` sigue conmutando `.is-active` sobre sus targets
 * `pill`, y en esta pantalla ya no hay ninguno — no falla, simplemente no
 * encuentra nada.
 *
 * ── Mawi UI (2026-08-23) · el morado ──
 * Los seis literales #5D279C / rgba(93,39,156,…) salieron de aquí: el tinte del
 * destello viene ahora de --color-brand-* (tripletas de canal, ver
 * tailwind.config.js). Con un hex suelto, este archivo era el único sitio donde
 * el morado de MAIA podía desafinar del de la app sin que nada fallara.
 */
.maia-msg-highlight {
  animation: maia-msg-pulse 2s ease-out 1;
}

@keyframes maia-msg-pulse {
  0% {
    background-color: rgb(var(--color-brand-100));
  }
  100% {
    background-color: transparent;
  }
}

/* ── El indicador de escritura (regla 18) ────────────────────────────────────
   Los tres puntos iban con `style="animation-delay: …"` en línea, y un estilo
   en línea no se puede desactivar desde la hoja: el bloque global de
   `prefers-reduced-motion` anula la DURACIÓN de la animación, pero el retardo
   escrito en el atributo seguía ahí. Como clases, el bloque global las alcanza
   igual que a todo lo demás. */
.maia-typing-dot:nth-child(1) { animation-delay: 0ms; }
.maia-typing-dot:nth-child(2) { animation-delay: 150ms; }
.maia-typing-dot:nth-child(3) { animation-delay: 300ms; }

/* ── La lista dice que sigue por debajo (regla 24, en vertical) ──────────────
   macOS trae las barras de superposición («mostrar sólo al desplazar»), así que
   un hilo de chat con 40 mensajes por encima se ve EXACTAMENTE igual que uno
   que empieza ahí. Personalizar la barra es lo que hace que el navegador deje
   de ocultarla y le reserve su sitio.

   OJO con el orden: `scrollbar-width` va SÓLO dentro del @supports —o sea sólo
   Firefox—, porque si se declara en Chrome gana la vía estándar, se ignora el
   bloque ::-webkit- y la barra vuelve a ser de superposición. Es el mismo
   comentario que lleva el prototipo, y el mismo fallo.

   Vive aquí y no en la fundación porque la fundación es de otra rama; cuando
   ésa aterrice, esto se mueve tal cual y se le quita el prefijo. */
.mawi-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.mawi-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.mawi-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-border-strong));
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.mawi-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-ink-subtle));
}

@supports not selector(::-webkit-scrollbar) {
  .mawi-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-border-strong)) transparent;
  }
}
/* ===== 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;
  }
}
/* =========================================================================
   MAWI UI · FUENTES AUTO-ALOJADAS
   Geist (texto) e IBM Plex Mono (números). Sin CDN.

   ES .css.erb Y TIENE QUE SERLO: `font_path` resuelve la URL con el digest de
   sprockets, así que el fichero sigue encontrándose después de un deploy. Con
   una ruta escrita a mano, el primer `assets:precompile` la rompe.

   POR ESO NO SE IMPORTA DESDE `application.tailwind.css`: el binario de
   Tailwind no evalúa ERB. Lo sirve sprockets por el `require_tree .` de
   `application.css`.

   ESTE FICHERO SÓLO DECLARA LAS FAMILIAS. Quién las usa lo decide
   `config/tailwind.config.js`, y ahí `font-sans` YA ES Geist:
   `sans: ['Geist Variable', 'Poppins', ...]`. O sea que la letra del producto
   entero cambió —también las ~221 vistas sin migrar—, a propósito y con el
   chrome, porque la fuente es una propiedad global y hacerla por partes deja el
   producto con dos tipografías. Lo que decía aquí antes («font-sans sigue
   siendo Poppins») dejó de ser cierto al escribir ese config.

   `font-display: swap` a propósito: el texto se lee con la fuente del sistema
   mientras carga, en vez de quedarse invisible.
   ========================================================================= */

@font-face {
  font-family: 'Geist Variable';
  src: url(/assets/geist-latin-wght-normal-fade550f01e6f25fe42901a3090d237491c57816a5eea8a69b08948dd40a0781.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/assets/ibm-plex-mono-latin-400-normal-bf724fb240693409729589ab1cd2fc22a9f9d70492d255e2fcf5631cf294654b.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/assets/ibm-plex-mono-latin-500-normal-da9fca28b8d867e1e314d92d78aa3c813e6b9d76a128d17642c4eaa7c8aedc84.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/assets/ibm-plex-mono-latin-600-normal-60a8ebc58c4bce48ebe0ef736ef93b5772f79d9c57692c9f7e86c26957444b07.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* =========================================================================
   MAWI UI · FUNDACIÓN DEL DESIGN SYSTEM
   GENERADO por `node mawi-ui/fundacion.mjs --escribir`. No editar a mano.
   Contrato y reglas: `mawi-ui/reglas.md` · tokens: `mawi-ui/tokens.md`.

   ESTE BLOQUE AÑADE VOCABULARIO Y NO REPINTA NADA. Ningún token que ya existía
   (mawi-500, mawi-900, mawi-gray…) cambia de valor, y font-sans sigue siendo
   Poppins. La migración es vista por vista: cambiar un token existente aquí
   repintaría las ~221 vistas sin migrar de golpe y sin revisión.

   LOS COLORES VAN EN TRIPLETAS DE CANAL, NO EN HEX. Tailwind v3 sólo puede
   aplicar el modificador de opacidad (/60, /70…) si el tema envuelve el token
   en rgb(var(--x) / <alpha-value>). Con un hex dentro de var(), v3 DESCARTA el
   modificador EN SILENCIO: no hay error, y border-border-strong/60 —la línea
   que cierra el PageBar, reglas 8 y 11— sale a opacidad completa en todas las
   pantallas migradas sin que nada lo señale.

   Los valores se LEEN del prototipo con getComputedStyle + rasterizado a 8 bits
   (dev-kit/tokens-canales.mjs), no se calculan: cuatro de los 58 usan
   color-mix() u oklch() relativo.
   ========================================================================= */

:root {
  --color-brand-50: 246 244 249;             /* #f6f4f9 */
  --color-brand-100: 221 215 232;            /* #ddd7e8 */
  --color-brand-200: 157 141 192;            /* #9d8dc0 */
  --color-brand-300: 133 113 173;            /* #8571ad */
  --color-brand-400: 92 63 141;              /* #5c3f8d */
  --color-brand-500: 74 47 119;              /* #4a2f77 */
  --color-brand-600: 49 27 83;               /* #311b53 */
  --color-brand-700: 38 18 63;               /* #26123f */
  --color-brand-800: 30 13 52;               /* #1e0d34 */
  --color-brand-900: 23 4 45;                /* #17042d */
  --color-brand-deep: 53 3 93;               /* #35035d */
  --color-cta: 53 3 93;                      /* #35035d */
  --color-cta-dark: 45 3 78;                 /* #2d034e */
  --color-cta-chevron: 73 32 117;            /* #492075 */
  --color-cta-chevron-dark: 66 22 108;       /* #42166c */
  --color-accent-50: 238 244 247;            /* #eef4f7 */
  --color-accent-100: 211 227 234;           /* #d3e3ea */
  --color-accent-200: 167 199 213;           /* #a7c7d5 */
  --color-accent-300: 111 166 188;           /* #6fa6bc */
  --color-accent-400: 61 137 166;            /* #3d89a6 */
  --color-accent-500: 30 116 153;            /* #1e7499 */
  --color-accent-600: 24 95 126;             /* #185f7e */
  --color-accent-700: 19 74 98;              /* #134a62 */
  --color-accent-800: 15 58 77;              /* #0f3a4d */
  --color-accent-900: 11 44 59;              /* #0b2c3b */
  --color-soft-violet: 157 141 192;          /* #9d8dc0 */
  --color-soft-sand: 86 170 209;             /* #56aad1 */
  --color-surface: 255 255 255;              /* #ffffff */
  --color-canvas: 255 255 255;               /* #ffffff — producto: marco blanco (antes #fafafa) */
  --color-surface-muted: 244 246 248;        /* #f4f6f8 */
  --color-surface-raised: 255 255 255;       /* #ffffff */
  --color-ai-orb-blue: 47 79 176;            /* #2f4fb0 */
  --color-ai-orb-sky: 125 151 230;           /* #7d97e6 */
  --color-surface-sunken: 236 239 243;       /* #eceff3 */
  --color-surface-header: 250 250 250;       /* #fafafa */
  --color-border: 227 231 236;               /* #e3e7ec */
  --color-border-strong: 199 205 214;        /* #c7cdd6 */
  --color-ink: 20 20 20;                     /* #141414 */
  --color-ink-soft: 71 71 71;                /* #474747 */
  --color-ink-muted: 102 102 102;            /* #666666 */
  --color-ink-subtle: 163 163 163;           /* #a3a3a3 */
  --color-graphite: 50 46 60;                /* #322e3c */
  --color-graphite-dark: 34 31 42;           /* #221f2a */
  --color-success: 43 142 53;                /* #2b8e35 */
  --color-success-fg: 12 81 18;              /* #0c5112 */
  --color-success-bg: 238 251 239;           /* #eefbef */
  --color-danger: 188 46 46;                 /* #bc2e2e */
  --color-danger-fg: 143 29 29;              /* #8f1d1d */
  --color-danger-bg: 252 227 227;            /* #fce3e3 */
  --color-video: 230 33 23;                  /* #e62117 */
  --color-warning: 224 175 0;                /* #e0af00 */
  --color-warning-fg: 127 100 0;             /* #7f6400 */
  --color-warning-bg: 252 246 227;           /* #fcf6e3 */
  --color-info: 30 116 153;                  /* #1e7499 */
  --color-info-fg: 19 74 98;                 /* #134a62 */
  --color-info-bg: 238 244 247;              /* #eef4f7 */
  --color-serie-1: 92 63 141;                /* #5c3f8d */
  --color-serie-2: 0 117 164;                /* #0075a4 */
}

/* SIN @layer, a propósito: el require_tree de application.css sirve este mismo
   fichero TAMBIEN en crudo, y ahí una @layer sería una capa de cascada de
   verdad —prioridad menor que lo no-capado—, así que el foco de la regla 19
   quedaría más débil justo en la copia que no pasa por Tailwind. */

/* ---- Radios: la escala sale de --radius 0.4rem y no se inventa fuera de ella.
   No se toca el radio de nada existente: se declaran para que una vista
   migrada pueda pedirlos. */
:root {
  --mawi-radius: 0.4rem;
  --mawi-radius-control: 6.4px;  /* rounded-lg del sistema */
  --mawi-radius-menu: 5.1px;     /* rounded-md */
  --mawi-radius-card: 9px;       /* rounded-xl */
}

/* ---- Sombras del sistema, como variables, para que una vista migrada las
   pida sin recalcularlas. */
:root {
  --mawi-shadow-card: 0 1px 2px 0 rgb(17 17 17 / 0.04), 0 1px 3px 0 rgb(17 17 17 / 0.07);
  --mawi-shadow-pop: 0 4px 16px -2px rgb(17 17 17 / 0.1), 0 2px 6px -2px rgb(17 17 17 / 0.07);
  --mawi-shadow-bar: inset 0 -1px 0 rgb(var(--color-border-strong) / 0.6);

  /* ---- La ALINEACIÓN de la primera fila (regla 8) -------------------------
     Cuánto BAJAN las bandas de marca —la del rail y la del switcher de
     proyecto— para que su contenido caiga en el mismo eje que el título de la
     pantalla.

     Las dos columnas de navegación arrancan en y=0 y el documento no: el lienzo
     deja la calle (`p-2.5` = 10px) y el hairline del panel antes del `PageBar`.
     Con las bandas pegadas al canto, el eje de la barra cae 5px por debajo del
     de la marca — y es la primera fila que el ojo compara al abrir la app, la
     única del producto donde tres piezas de tres columnas comparten renglón.
     Medido contra el prototipo: el switcher a y=13 aquí contra y=18 allí.

     Se DERIVA en vez de escribirse: es la diferencia entre ejes que ya están
     declarados, así que mover la calle o el alto de la barra la recalcula sola.
     A mano volvería a desalinearse en el primer cambio de cualquiera de los dos,
     y el síntoma —5px— es de los que se ven y no se saben nombrar. */
  --mawi-app-gutter: 10px;   /* la calle: el `p-2.5` de la columna del lienzo */
  --mawi-pagebar-h: 52px;    /* el `min-h-13` del PageBar en reposo */
  --mawi-nav-header-h: 64px; /* el `h-16` de las bandas de marca */
  --mawi-nav-header-top: calc(
    var(--mawi-app-gutter) + 1px + (var(--mawi-pagebar-h) - var(--mawi-nav-header-h)) / 2
  );
}

/* ---- Trazo de icono: 1,75 y una sola vez (regla 12) --------------------
   Los SVG del proyecto traen el grosor escrito en el fichero y MEZCLADO (2 en
   unos, 1,5 en otros, 1 en otros): medido en el rail, tres grosores distintos
   en la misma columna. Corregir 300 ficheros no evita que el 301 nazca mal, y
   el CSS gana al atributo — así que la regla se cumple aquí, una vez.

   Se apunta a los HIJOS y no al <svg>: en estos ficheros el stroke vive en cada
   <path>, no en la raíz, así que una regla sobre el svg no casa con nada — y no
   falla, simplemente no hace nada.

   Va SCOPED a lo migrado (data-mawi-ui) a propósito: aplicado a todo el
   producto repintaría el trazo de las ~221 vistas sin revisar, que es el
   barrido global del que huye el método. Una vista migrada se marca con ese
   atributo y hereda el trazo correcto. */
[data-mawi-ui] svg :is(path, circle, rect, line, polyline, polygon, ellipse)[stroke]:not([stroke="none"]) {
  stroke-width: 1.75;
}

/* Y el MISMO trazo cuando el `stroke` vive en la RAÍZ del svg, que es cómo vienen
   los iconos del set de lucide (`icons/mawi/*`) y también los legados que se
   colaron con otro grosor. La regla de arriba apunta a los HIJOS, así que a éstos
   no les llegaba: medido, «Catálogo de Materiales» pintaba a trazo 2 porque
   `icons/3d_box.svg` lo trae escrito en el `<svg>`, y no había manera de verlo
   salvo con los dos iconos juntos en la misma columna.

   Se arregla aquí y no en el fichero por lo de siempre: corregir un icono no evita
   que el siguiente nazca con otro grosor, y esto alcanza también a los que vengan
   de una librería.

   ⚠️ Y ESTA REGLA GANABA AL ESCALÓN DEL ITEM ACTIVO, que es lo que hay que saber
   si algún día se toca. La regla 12 dice que sobre el relleno morado sólido el
   trazo sube a 2, porque ahí se adelgaza ópticamente y se perdía justo en el item
   que más tiene que leerse. Ese 2 lo pone la utilidad del propio item, y su
   selector compilado —`.[&_svg]:stroke-[2] svg`— pesa (0,1,1) contra el (0,3,1) de
   aquí: medido, al añadir esta regla el item activo bajó a 1,75 y el escalón
   desapareció. Se devuelve con `!stroke-[2]` en el item, no rebajando esto: el
   grosor por omisión tiene que ser el del sistema, y la excepción es la que grita.
   Si mañana hace falta otro escalón relativo, va con `!` por el mismo motivo. */
[data-mawi-ui] svg[stroke]:not([stroke="none"]) {
  stroke-width: 1.75;
}

/* ---- Foco visible con contraste >= 3:1 (regla 19) -------------------------
   Global y una sola vez: una regla que se cumple con CSS deja de ser una cosa
   que recordar en cada pantalla. Sólo :focus-visible, así que no aparece al
   hacer click con el ratón. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--color-brand-500) / 1);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- El foco no queda tapado por la barra fija (regla 19) -----------------
   OJO: tiene que scrollear ESTE elemento. Si mañana el scroll pasa a un
   contenedor interno, este scroll-padding deja de aplicar A NADA y el fallo es
   invisible — pasó en el prototipo, donde el foco quedaba bajo la barra. */
html {
  scroll-padding-top: 5rem;
}

/* ---- prefers-reduced-motion (regla 18) ------------------------------------
   Quien lo activa lo hace porque la animación le sienta mal: es accesibilidad,
   no una preferencia estética. No alcanza a lo que se anima en JS — eso hay que
   mirarlo pieza por pieza. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * NO SE EDITA: es una copia literal de `mawi-ui/orbe.css`, que genera el kit
 * desde `src/index.css` del prototipo. Si hay que cambiar el disco, se cambia
 * allí y se vuelve a descargar el kit:
 *   npm run kit -- <este-repo>/mawi-ui
 *   cp mawi-ui/orbe.css app/assets/stylesheets/mawi_ui_orb.css
 *
 * Vive con este nombre y no como `orbe.css` porque `require_tree .` carga TODO
 * el directorio: el prefijo `mawi_ui_` agrupa lo que viene del design system y
 * lo distingue de las hojas del proyecto.
 *
 * Su sitio final es la fundación (`mawi_ui_foundation.css`) — la firma de la IA
 * es de todas las features, no de esta pantalla. Se moverá cuando aterrice esa
 * rama.
 */

/*
 * Mawi UI · EL ORBE — la firma de la IA (regla 34).
 *
 * GENERADO desde src/index.css del prototipo. No se edita a mano: si hay que
 * cambiar el disco, se cambia allí y se vuelve a descargar el kit.
 *
 * Instalación: cópialo a tu hoja de estilos y úsalo así —
 *   <span class="ai-orb" aria-hidden="true" style="width:96px;height:96px">
 *     <span class="ai-orb-grain"></span>
 *   </span>
 * El elemento necesita un `display` distinto de `inline` o se queda en 0x0, y
 * `border-radius: 9999px` para ser un disco. Va SIEMPRE `aria-hidden`: lo que
 * significa lo dice su etiqueta, nunca el orbe.
 *
 * Trae sólo la paleta FRÍA (MAIA). La cálida de la Guía no se porta: un juego
 * de tonos sin nada que lo use es un token que alguien tendrá que redescubrir.
 *
 * OJO CON LOS PARÉNTESIS ESCAPADOS (%28 … %29) del `url()` de dentro del SVG:
 * son obligatorios en Rails/sprockets, que reescribe cualquier `url()` de un
 * CSS contra el asset root —también el que viaja dentro de un data URI— y con
 * la barra delante el filtro del grano deja de resolver, el feTurbulence no se
 * aplica y el disco sale oscuro y liso SIN UN SOLO ERROR. No los "arregles".
 */

/* LA DERIVA — las DOS manchas dan una vuelta cerrada por el disco, en direcciones
   contrarias, creciendo y encogiendo; la banda de los estratos sube y baja un
   poco con ellas.

   LO QUE SE APRENDIÓ AQUÍ, en TRES rondas de «sigue quieto». Cada una es un
   error distinto y ninguno se veía leyendo el CSS:

   1. **El recorrido se mide en píxeles, no en porcentajes.** El margen que una
      capa puede recorrer es (tamaño − 100 %) del diámetro: con la capa a `140%` y
      un keyframe que usaba del 14 % al 40 % de ese margen, el paseo eran **1,7px
      en el orbe de 16 y 2,5px en el de 24**. Declarada, corriendo e invisible.
   2. **Una mancha que se va deja el orbe quieto media vuelta.** El segundo
      intento la mandaba lejos y la traía: en la mitad del ciclo estaba fuera del
      disco y no quedaba nada moviéndose. El camino es ahora un LAZO CERRADO —
      cuatro paradas alrededor del centro— y ninguna mancha sale.
   3. **Una sola mancha no basta, aunque se mueva.** Lo que se ve moverse no es la
      mancha: es la MEZCLA. Con dos manchas de familias distintas paseando en
      contrafase, el punto donde se cruzan cambia de color todo el rato y el disco
      entero se lee vivo; con una, sólo cambiaba una esquina.

   **5s de ciclo.** Empezó en 26 y fue bajando por 22, 12 y 8; cada vez el
   reporte fue el mismo —«sigue quieto»— y cada vez la duración parecía suficiente
   sobre el papel. La lección: **a 16px la lentitud y la invisibilidad son la misma
   cosa**, y la vara no es cuánto tarda una vuelta sino cuánto cambia el orbe en un
   segundo de mirada, que es todo lo que se le dedica. A 12s ese segundo era el
   8 % del recorrido; a 5s es el 20 %.
   Y sigue sin competir con el trabajo del usuario, que es lo que la nota de marca
   protege: lo que se mueve es COLOR desplazándose, sin saltos de luz ni de
   posición ni bordes que se desplacen. De reojo es una superficie viva, no algo
   que pide que lo atiendan — que es la diferencia entre esto y un spinner.

   Los ESTRATOS se mueven poco y a propósito (`124%`, un margen de 0,24
   diámetros): su composición —banda clara arriba, fondo abajo— es la identidad
   del orbe. Con la capa muy grande el disco pasaba a ser casi todo banda en unos
   fotogramas y casi todo fondo en otros, que es un bombeo de luz y no una deriva.

   Sigue siendo UNA sola animación por orbe, y sigue siendo MATERIA y no señal
   —lo que informa (pensar, hablar, escuchar) lo dice el orbe del módulo con
   forma y movimiento rápido—. Mismo recorrido y misma duración que
   `og-orb-drift` en el módulo: las dos bolas tienen que respirar igual. */
@keyframes ai-orb-drift {
  0%,
  100% {
    background-position:
      22% 14%,
      78% 82%,
      50% 30%;
    background-size:
      168% 150%,
      132% 124%,
      100% 124%;
  }
  25% {
    background-position:
      74% 26%,
      26% 70%,
      50% 52%;
    background-size:
      186% 166%,
      124% 118%,
      100% 124%;
  }
  50% {
    background-position:
      82% 74%,
      18% 24%,
      50% 70%;
    background-size:
      172% 154%,
      144% 134%,
      100% 124%;
  }
  75% {
    background-position:
      28% 84%,
      72% 20%,
      50% 48%;
    background-size:
      190% 170%,
      128% 122%,
      100% 124%;
  }
}

.ai-orb {
  /* --------------------------------------------------------------------
     MAIA — FRÍO. Los cuatro tonos son el recorrido del disco de arriba abajo, y
     todos salen de la escala de marca o del acento: aquí no hay color inventado.
       corner  la mancha de arriba-izquierda, el tono que rompe la simetría
       band    la banda clara del tercio superior (lo más claro del disco)
       mid     el cuerpo
       deep    el fondo, y el color de respaldo si algo falla al pintar
     -------------------------------------------------------------------- */
  --orb-corner: #6fa6bc; /* accent-300 — el teal, la OTRA familia */
  /* EL DESTELLO — la segunda mancha, y el quinto tono. Es la que da el
     «más colores» que el disco pedía: con una sola mancha, la mitad del ciclo la
     bola era morado con lila y nada más. Va en la esquina CONTRARIA a `corner` y
     se pasea en contrafase, así que lo que cambia no es dónde está una mancha
     sino cómo se MEZCLAN las dos — que es de donde sale la iridiscencia.
     Este tono se sale de la escala a propósito, igual que los cuatro de la Guía:
     el orbe tiene su propio espacio de color justo para poder llevar tonos que el
     sistema no usa en ningún otro sitio y que por tanto no significan nada. Frío,
     eso sí: la temperatura es lo único que separa a MAIA de la Guía. */
  --orb-glow: #8fd3d8; /* aguamarina — el quinto tono, fuera de la escala */
  --orb-band: #ddd7e8; /* brand-100 — lila casi blanco: la banda clara */
  --orb-mid: #8571ad; /* brand-300 */
  --orb-deep: #4a2f77; /* brand-500 — el primario, NO el casi-negro */
  /* El apagado del canto, en canales para poder darle alfa. */
  --orb-limb: 23 4 45;

  position: relative;
  /* SIN ESTO EL ORBE DESAPARECE fuera de una fila flex. Un `<span>` es `inline`
     por omisión y las utilidades `size-*` no tienen efecto sobre un inline: la
     esfera se quedaba en 0×0. No se notó nunca porque hasta ahora el orbe sólo
     vivía dentro de contenedores flex —la barra, la cabecera del panel—, que
     blockifican a sus hijos y le devolvían el tamaño de rebote. Al ponerlo en un
     renglón de menú se vio el hueco vacío. */
  display: inline-block;
  border-radius: 9999px;
  overflow: hidden;
  isolation: isolate;
  /* Color de respaldo: si algo falla al pintar las capas, el orbe queda como un
     disco de marca sólido en vez de un agujero transparente. */
  background-color: var(--orb-deep);
  /* AQUÍ HABÍA UN ARO de `inset 0 0 0 0.5px`. Se va: es una LÍNEA, y una línea
     dura alrededor de un disco es literalmente un borde — que es lo que se
     reportó («no se ven del todo circulares, como si tuvieran un borde
     fuerte»). Media línea de sombra interior tampoco se rasteriza limpia en una
     caja de 16px: sale con más peso en unos cuadrantes que en otros, y eso es lo
     que rompe la lectura de círculo. Recortar el disco del blanco es trabajo del
     canto de `::after`, que además es un degradado y no un filo.

     LA PLUMA DEL CANTO — el arreglo de verdad del «no se ve circular», y lo que
     lo hizo evidente fue MIRARLO A RESOLUCIÓN REAL: a 8× de zoom el filo parece
     perfecto, y en los 16 píxeles que mide en pantalla se ve la escalera. A ese
     tamaño no hay antialiasing que salve un recorte duro — el círculo tiene
     literalmente cuatro o cinco píxeles por cuadrante para curvarse.
     Así que el último 0,75px de radio se desvanece: el borde deja de ser una
     frontera y pasa a ser una transición, y la escalera desaparece porque ya no
     hay ningún escalón que ver. 0,75 y no 1,25: probado, a 1,25 el orbe de 16px
     empieza a leerse desenfocado en vez de suave.
     Como la máscara envuelve al elemento ENTERO, se lleva por delante también el
     filo del grano —que se rasteriza aparte por el `mix-blend-mode`, ver
     `.ai-orb-grain`—, así que aquél ya no necesita máscara propia. */
  -webkit-mask-image: radial-gradient(
    circle closest-side at 50% 50%,
    #000 calc(100% - 0.75px),
    transparent 100%
  );
  mask-image: radial-gradient(
    circle closest-side at 50% 50%,
    #000 calc(100% - 0.75px),
    transparent 100%
  );
}

.ai-orb::before,
.ai-orb::after,
.ai-orb-grain {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
}

/* LA SUPERFICIE: los estratos, y encima las DOS manchas que se pasean. */
.ai-orb::before {
  background-image:
    /* LA ESQUINA — el hueco de la OTRA familia de color, arriba a la izquierda.
       Se apaga al 62 % del radio: más desvanecida se reparte por todo el tercio
       superior y deja de leerse como una zona con su propio tono, que es justo lo
       que hace en la referencia. Más dura, en cambio, se lee como una segunda
       bola dentro de la bola. */
    radial-gradient(
      ellipse 62% 50% at 30% 22%,
      var(--orb-corner) 0%,
      transparent 62%
    ),
    /* EL DESTELLO — la segunda mancha, abajo a la derecha y en contrafase con la
       primera. Es MENOR que la esquina (52/42 contra 62/50) por lo que pasó al
       probarla del mismo tamaño: se comía el disco y, en media vuelta del ciclo,
       MAIA dejaba de leerse morada. Una mancha que cambia el color de la marca no
       es iridiscencia, es otro orbe. */
      radial-gradient(
        ellipse 52% 42% at 70% 76%,
        var(--orb-glow) 0%,
        transparent 66%
      ),
    /* LOS ESTRATOS. Es una BANDA, no una rampa, y ésa es la diferencia que
       decide el parecido: la referencia va tono medio → claro → medio → fondo,
       con lo más claro cruzando el tercio superior. Con una rampa de claro a
       oscuro —lo primero que se probó— sale una bola de degradado cualquiera: se
       pierde la lectura de «planeta con atmósfera», que es lo que da la banda.
       172deg y no 180: perfectamente horizontales se leen como una bandera. */
      linear-gradient(
        172deg,
        var(--orb-mid) 0%,
        var(--orb-band) 31%,
        var(--orb-band) 40%,
        var(--orb-mid) 66%,
        var(--orb-deep) 100%
      );
  /* Las manchas se pintan MÁS GRANDES que el disco, y de cuánto más grandes
     depende TODO el recorrido de la deriva: el margen que se puede recorrer es
     (tamaño − 100 %) del diámetro, así que con `140%` el paseo entero eran 0,4
     diámetros y con `168%` son 0,68. El porqué de cada número está en
     `@keyframes ai-orb-drift`. */
  background-size:
    168% 150%,
    132% 124%,
    100% 124%;
  background-position:
    22% 14%,
    78% 82%,
    50% 30%;
  background-repeat: no-repeat;
}

/* EL GRANO — el rasgo que más define a la referencia, y el que estaba calibrado
   al revés.

   La celda de ruido tiene que medir ~2px EN PANTALLA, que es lo que se ve en la
   referencia. El cálculo, porque es fácil equivocarse de lado: `baseFrequency`
   va en unidades del lienzo del filtro, así que la celda mide 1/bf unidades, y
   después el SVG de 80px se escala al tamaño de la tesela. Con bf 0.95 y tesela
   de 26px salían celdas de 1,05 × 26/80 = 0,34px: sub-píxel, o sea dithering
   invisible. Con bf 0.5 y tesela de 80px son 2 × 1 = 2px, el grano de la
   referencia.

   DOS PASADAS: la fina da el polvillo y la gruesa lo agrupa en zonas más y menos
   densas. Con una sola el ruido es uniforme y se lee como una textura pegada
   encima; con dos escalas se lee como parte del material.

   En PÍXELES y no en %: el grano vive en la lente, no en el objeto, así que mide
   lo mismo en el orbe de 16px de la barra y en el de 48 del panel. Y NO se
   mueve: girándolo se vería como suciedad dando vueltas.

   `overlay` y no un velo gris: oscurece donde el ruido es oscuro y aclara donde
   es claro, o sea MODULA el color de debajo en vez de taparlo. */
.ai-orb-grain {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='og'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23og%29'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='oc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.14' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23oc%29'/%3E%3C/svg%3E");
  background-size:
    80px 80px,
    190px 190px;
  mix-blend-mode: overlay;
  opacity: 0.8;
  /* ESTA CAPA ES LA QUE ESTROPEABA EL FILO, y ya no hace falta arreglarla aquí.
     Una capa con `mix-blend-mode` se rasteriza aparte y su recorte redondo sale
     SIN suavizar: el canto quedaba escalonado y con un halo pálido —el ruido
     mezclándose en `overlay` contra el blanco de detrás—. Se localizó apagando
     capas de una en una: sin grano, el círculo salía perfecto.
     Llevó una máscara propia que lo retiraba 1px del borde, y se quitó al añadir
     la pluma del canto en `.ai-orb`: aquélla envuelve al elemento ENTERO, así que
     ya se lleva por delante este filo también. Dos máscaras haciendo el mismo
     trabajo es una que alguien va a tocar sin saber cuál manda. */
}

/* EL CANTO. Es todo lo que queda del volumen: el borde de un disco impreso se
   apaga un poco, y nada más. Sin especular y sin sombra proyectada.

   ESTRECHO Y FLOJO —empieza al 78 % del radio y llega al 14 %—, no un viñeteado.
   Con la primera calibración (62 % y 0,28) volvía el problema que la referencia
   no tiene: junto al degradado vertical, un apagado ancho se lee como una ESFERA
   iluminada desde arriba, que es exactamente la canica de la que se venía. Así
   sólo cierra el filo.

   `CLOSEST-SIDE` NO ES UN DETALLE: SIN ÉL ESTE CANTO NO EXISTÍA. Un
   `radial-gradient(circle …)` sin tamaño se dimensiona a `farthest-corner`, o
   sea que su radio es el de la ESQUINA de la caja: 141 % del radio del disco. El
   filo visible caía entonces en el 71 % del degradado —por debajo del 78 % en el
   que empieza a oscurecer—, así que el único trozo que llegaba a pintarse era el
   de las cuatro esquinas, y ésas las recorta el `border-radius`. El comentario
   decía «empieza al 78 % del radio» y era falso desde el primer día: el canto
   estaba escrito, medido y comentado, y no pintaba un solo píxel. Es la misma
   trampa que se llevó por delante la máscara del grano de aquí arriba. */
.ai-orb::after {
  background-image: radial-gradient(
    circle closest-side at 50% 50%,
    rgb(var(--orb-limb) / 0) 78%,
    rgb(var(--orb-limb) / 0.14) 100%
  );
}

/* La deriva: una sola animación por orbe, y sólo si el usuario no pidió menos
   movimiento (regla 18). En reposo el disco tiene que ser legible por sí solo. */
@media (prefers-reduced-motion: no-preference) {
  .ai-orb::before {
    animation: ai-orb-drift 5s ease-in-out infinite;
  }
}
/* 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));
}
/*
 * MAW-1627 — Header/navbar overlapping modals and overlays.
 *
 * The sticky dashboard upper bar (app/views/layouts/dashboard/_upperbar.html.erb)
 * sits at z-30 so it stays above scrolling content (sticky table headers use z-6/z-10).
 * Most legacy modals across the app follow the Tailwind-UI pattern with their dialog
 * wrapper and fixed overlays at z-10, which is BELOW the header, so the header rendered
 * on top of the modal/backdrop in many sections. The header can't simply be lowered
 * because sticky table headers share the z-10 layer.
 *
 * Fix centrally by lifting every ARIA modal dialog to the shared modal layer (z-60,
 * matching app/components/layout/modal_component.html.erb) so it always covers the
 * header. Every modal wrapper is positioned (relative or fixed), so raising its
 * z-index carries its fixed backdrop/content with it. Keyed on the accessibility
 * contract [role="dialog"][aria-modal="true"] — one rule, no per-view edits, and
 * still below the searchable-dropdown portal (z-100000) and bulk bars (z-99999).
 */
[role="dialog"][aria-modal="true"] {
  z-index: 60;
}
/* 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;
}
/* Show cron vs event fields from the checked radio even if Stimulus fails to boot.
   More specific than `.hidden` so it wins either way. */
.radar-trigger-fields:has([data-radar-agent-form-target="triggerType"][value="event"]:checked) [data-trigger-panel="event"] {
  display: block;
}

.radar-trigger-fields:has([data-radar-agent-form-target="triggerType"][value="event"]:checked) [data-trigger-panel="cron"] {
  display: none;
}

.radar-trigger-fields:has([data-radar-agent-form-target="triggerType"][value="cron"]:checked) [data-trigger-panel="cron"] {
  display: block;
}

.radar-trigger-fields:has([data-radar-agent-form-target="triggerType"][value="cron"]:checked) [data-trigger-panel="event"] {
  display: none;
}

/* Same AI CTA language as “Sugerir claves con IA”: gradient rim, white fill, sparkle. */
.radar-ai-compose-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1px;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: linear-gradient(87.48deg, #5D279C 23.1%, #3C7FA4 76.9%);
}

.radar-ai-compose-btn__inner {
  display: inline-flex;
  width: 100%;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.3125rem;
  background: #fff;
  padding: 0 0.75rem;
}

@media (min-width: 1024px) {
  .radar-ai-compose-btn,
  .radar-ai-compose-btn__inner {
    width: auto;
  }
}

.radar-ai-compose-btn:hover .radar-ai-compose-btn__inner {
  background: #f9fafb;
}

.radar-ai-compose-btn:focus-visible {
  outline: 2px solid #5D279C;
  outline-offset: 2px;
}

.radar-ai-compose-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.radar-ai-compose-btn:disabled [data-ai-sparkle] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .radar-ai-compose-btn,
  .radar-ai-compose-btn__inner {
    transition: none;
  }
}

.radar-preset-tab {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4b5563;
}

.radar-preset-tab:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.radar-preset-tab--active,
.radar-preset-tab[aria-selected="true"] {
  border-color: #5D279C;
  background: #F1E4FF;
  color: #5D279C;
}

.radar-preset-tab--active span,
.radar-preset-tab[aria-selected="true"] span {
  color: #5D279C;
}

.radar-preset-card {
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 0.875rem 1rem;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.radar-preset-card:hover {
  border-color: rgba(93, 39, 156, 0.35);
  background: #FDFAFF;
}

.radar-preset-card[aria-selected="true"] {
  border-color: #5D279C;
  background: #FDFAFF;
  box-shadow: 0 0 0 1px #5D279C;
}

.radar-preset-card:focus-visible,
.radar-preset-tab:focus-visible {
  outline: 2px solid #5D279C;
  outline-offset: 2px;
}
.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: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #37AFAF;
  background-clip: content-box;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #374151 #e5e7eb;
}

.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 (min-width: 1280px) {
  /* El contenedor del modal trae `left: 15%` como estilo inline, así que sólo una regla
     !important puede devolverle el ancho completo a los modales marcados como `wide`. */
  .wide-modal-container {
    left: 0 !important;
  }
}

@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%;
  }

  .import-ai-order .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;
}