* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Inter, Arial, Helvetica, sans-serif;
    }

    body {
      background: #f5f5f2;
      color: #111;
      min-height: 100vh;
    }

    .login-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: radial-gradient(circle at top, #fff, #f5f5f2 55%, #eaeae4);
    }

    .login-card {
      width: 100%;
      max-width: 430px;
      background: #fff;
      border: 1px solid #e3e3dc;
      border-radius: 30px;
      padding: 32px;
      box-shadow: 0 25px 80px rgba(0,0,0,0.08);
    }

    .login-card h1 {
      font-size: 42px;
      letter-spacing: -2px;
      margin-bottom: 8px;
    }

    .login-card p {
      color: #666;
      line-height: 1.45;
      margin-bottom: 24px;
    }

    .brand span,
    .logo span {
      color: #ff6a00;
    }

    .app {
      display: none;
      grid-template-columns: 280px 1fr;
      min-height: 100vh;
    }

    .sidebar {
      background: #111;
      color: #fff;
      padding: 28px;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .logo {
      font-size: 30px;
      font-weight: 900;
      letter-spacing: -1px;
      margin-bottom: 30px;
    }

    .user-box {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 22px;
    }

    .user-box strong {
      display: block;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .user-box span {
      color: #aaa;
      font-size: 12px;
      word-break: break-word;
    }

    .menu-item {
      padding: 15px 0;
      color: #bdbdbd;
      font-size: 15px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
    }

    .menu-item.active {
      color: #fff;
      font-weight: 800;
    }

    .menu-item.hidden {
      display: none;
    }

    .sidebar-footer {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 28px;
      color: #8d8d8d;
      font-size: 13px;
      line-height: 1.45;
    }

    main {
      padding: 34px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-bottom: 28px;
    }

    h1 {
      font-size: 34px;
      letter-spacing: -1.5px;
      margin-bottom: 6px;
    }

    .subtitle {
      color: #666;
      font-size: 15px;
    }

    .status-pill {
      background: #fff;
      border: 1px solid #e0e0da;
      padding: 11px 15px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 13px;
      color: #333;
    }

    .layout {
      display: grid;
      grid-template-columns: 520px 1fr;
      gap: 24px;
      align-items: start;
    }

    .layout.single {
      grid-template-columns: 520px 1fr;
    }

    .card {
      background: #fff;
      border: 1px solid #e3e3dc;
      border-radius: 26px;
      padding: 24px;
      box-shadow: 0 18px 50px rgba(0,0,0,0.045);
    }

    .card + .card {
      margin-top: 24px;
    }

    .card h2 {
      font-size: 22px;
      margin-bottom: 6px;
      letter-spacing: -0.5px;
    }

    .card p {
      color: #666;
      font-size: 14px;
      line-height: 1.45;
      margin-bottom: 20px;
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 8px;
      color: #444;
    }

    input,
    select {
      width: 100%;
      padding: 14px;
      border: 1px solid #ddd;
      border-radius: 14px;
      font-size: 15px;
      background: #fff;
      outline: none;
    }

    input:focus,
    select:focus {
      border-color: #111;
    }

    .field {
      margin-bottom: 16px;
    }

    .toggle-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0 14px;
      font-size: 13px;
      font-weight: 800;
      color: #444;
    }

    .toggle-wrap input {
      width: auto;
      accent-color: #111;
    }

    .btn {
      background: #111;
      color: #fff;
      padding: 13px 18px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 800;
      font-size: 14px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn.secondary {
      background: #fff;
      color: #111;
      border: 1px solid #deded6;
    }

    .btn.full {
      width: 100%;
      margin-top: 4px;
    }

    .btn.logout {
      background: rgba(255,255,255,0.08);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.12);
      width: 100%;
      margin-top: 14px;
    }

    .upload-area {
      border: 2px dashed #cfcfc8;
      border-radius: 20px;
      padding: 22px;
      background: #fafafa;
      text-align: center;
      margin-bottom: 16px;
    }

    .upload-area strong {
      display: block;
      font-size: 16px;
      margin-bottom: 7px;
    }

    .upload-area span {
      display: block;
      color: #777;
      font-size: 13px;
      margin-bottom: 14px;
    }

    .file-input {
      display: none;
    }

    .file-name {
      font-size: 13px;
      color: #0f7b42;
      font-weight: 800;
      margin-top: 10px;
      display: none;
      word-break: break-word;
    }

    .drop-zone {
      transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .drop-zone.is-dragover {
      border-color: #ff5a00 !important;
      background: #fff7f2 !important;
      box-shadow: 0 18px 44px rgba(255, 90, 0, 0.14);
      transform: translateY(-1px);
    }

    .file-preview-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
      text-align: left;
    }

    .file-preview-list:empty {
      display: none;
    }

    .file-preview-card {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px;
      border: 1px solid #ebe9e4;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
      overflow: visible;
    }

    .file-preview-card.is-sortable {
      cursor: grab;
    }

    .file-preview-card.is-dragging {
      opacity: .62;
      cursor: grabbing;
      border-color: #ff5a00;
      box-shadow: 0 16px 38px rgba(255, 90, 0, .12);
    }

    .file-preview-thumb {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: #fff4ed;
      color: #ff5a00;
      font-size: 12px;
      font-weight: 950;
      overflow: visible;
      border: 1px solid #ffe0d0;
    }

    .file-preview-order {
      position: absolute;
      top: -8px;
      left: -8px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #ff5a00;
      color: #fff;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      border: 2px solid #fff;
      box-shadow: 0 8px 16px rgba(255, 90, 0, 0.26);
      pointer-events: none;
    }

    .file-preview-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 12px;
    }

    .file-preview-main strong,
    .file-preview-main span {
      margin: 0;
      display: block;
    }

    .file-preview-main strong {
      font-size: 14px;
      line-height: 1.2;
      color: #111827;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-preview-main span {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 800;
      color: #7b8190;
    }

    .file-preview-main .file-preview-source {
      color: #ff5a00;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .file-preview-actions {
      display: inline-flex;
      gap: 6px;
      align-items: center;
    }

    .file-preview-actions button {
      min-width: 34px;
      min-height: 34px;
      border: 1px solid #e8e5df;
      border-radius: 999px;
      background: #fff;
      color: #111827;
      font-size: 12px;
      font-weight: 900;
      padding: 8px 10px;
      cursor: pointer;
    }

    .file-preview-actions button:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }

    .file-preview-actions button.remove-file {
      color: #b42318;
      background: #fff7f6;
      border-color: #ffd9d5;
    }

    .attachment-preview-modal {
      position: fixed;
      inset: 0;
      z-index: 42000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(15, 23, 42, .54);
      backdrop-filter: blur(9px);
    }

    .attachment-preview-modal.active {
      display: flex;
    }

    .attachment-preview-card {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(1080px, 100%);
      height: min(860px, calc(100vh - 36px));
      border: 1px solid #e7eaf0;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 34px 100px rgba(15, 23, 42, .26);
      overflow: hidden;
    }

    .attachment-preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 20px;
      border-bottom: 1px solid #edf0f4;
    }

    .attachment-preview-head strong {
      overflow: hidden;
      color: #111827;
      font-size: 17px;
      font-weight: 950;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attachment-preview-body {
      display: grid;
      place-items: center;
      min-height: 0;
      overflow: auto;
      padding: 18px;
      background: #f7f8fa;
    }

    .attachment-preview-body img {
      display: block;
      max-width: 100%;
      max-height: none;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 16px 42px rgba(15, 23, 42, .12);
    }

    .attachment-preview-body iframe,
    .attachment-preview-body object,
    .attachment-preview-body embed {
      width: 100%;
      height: 100%;
      min-height: 640px;
      border: 0;
      border-radius: 16px;
      background: #fff;
    }

    .search-combobox {
      position: relative;
      width: 100%;
    }

    .search-combobox input {
      width: 100%;
      padding-right: 44px !important;
    }

    .search-combobox::after {
      content: "";
      position: absolute;
      right: 17px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-right: 2px solid #6b7280;
      border-bottom: 2px solid #6b7280;
      transform: translateY(-65%) rotate(45deg);
      pointer-events: none;
    }

    .search-combobox-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      z-index: 2500;
      display: none;
      max-height: 338px;
      overflow: auto;
      padding: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 22px 60px rgba(15, 23, 42, .14);
    }

    .search-combobox.open .search-combobox-panel {
      display: grid;
      gap: 4px;
    }

    .search-combobox-option,
    .search-combobox-empty,
    .search-combobox-section {
      width: 100%;
      border: 0;
      border-radius: 12px;
      background: transparent;
      text-align: left;
    }

    .search-combobox-section {
      padding: 7px 10px 4px;
      color: #8a93a3;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .search-combobox-option {
      display: grid;
      gap: 3px;
      padding: 10px 11px;
      color: #111827;
      cursor: pointer;
    }

    .search-combobox-option:hover,
    .search-combobox-option.is-active {
      background: #fff4ed;
    }

    .search-combobox-option strong {
      display: block;
      overflow: hidden;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-combobox-option span {
      display: block;
      overflow: hidden;
      color: #6b7280;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-combobox-option mark {
      border-radius: 5px;
      background: #ffe4d4;
      color: inherit;
      padding: 0 2px;
    }

    .search-combobox-empty {
      padding: 14px 12px;
      color: #6b7280;
      font-size: 13px;
      font-weight: 850;
      background: #f8fafc;
    }

    .file-preview-pages {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding: 5px 8px;
      border-radius: 999px;
      background: #fff7ed;
      color: #c2410c !important;
      font-size: 11px !important;
      font-weight: 950 !important;
      width: fit-content;
    }

    .pdf-pages-modal {
      position: fixed;
      inset: 0;
      z-index: 41000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(15, 23, 42, .48);
      backdrop-filter: blur(8px);
    }

    .pdf-pages-modal.active {
      display: flex;
    }

    .pdf-pages-card {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: min(980px, 100%);
      max-height: min(860px, calc(100vh - 36px));
      border: 1px solid #e7eaf0;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 34px 100px rgba(15, 23, 42, .24);
      overflow: hidden;
    }

    .pdf-pages-head,
    .pdf-pages-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 20px 22px;
      border-bottom: 1px solid #edf0f4;
    }

    .pdf-pages-actions {
      border-top: 1px solid #edf0f4;
      border-bottom: 0;
      justify-content: flex-end;
      background: #fbfcfd;
    }

    .pdf-pages-head h2 {
      margin: 0;
      color: #111827;
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .pdf-pages-head p {
      margin: 5px 0 0;
      color: #68707d;
      font-size: 14px;
      font-weight: 760;
    }

	    .pdf-pages-list {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	      gap: 14px;
	      padding: 18px;
	      overflow: auto;
	      background: #f8fafc;
	    }

	    .pdf-pages-toolbar {
	      grid-column: 1 / -1;
	      display: flex;
	      flex-wrap: wrap;
	      align-items: center;
	      gap: 10px;
	      padding: 14px;
	      border: 1px solid #edf0f4;
	      border-radius: 18px;
	      background: #fff;
	    }

	    .pdf-pages-toolbar button {
	      min-height: 40px;
	      padding: 0 14px;
	      border: 1px solid #dfe4ec;
	      border-radius: 999px;
	      background: #fff;
	      color: #111827;
	      font-size: 13px;
	      font-weight: 900;
	      cursor: pointer;
	    }

	    .pdf-pages-toolbar button.primary {
	      border-color: rgba(255, 90, 0, .22);
	      background: rgba(255, 90, 0, .1);
	      color: #ff5a00;
	    }

	    .pdf-pages-toolbar span {
	      color: #68707d;
	      font-size: 13px;
	      font-weight: 750;
	    }

    .pdf-pages-field {
      display: grid;
      gap: 10px;
      padding: 20px;
      border: 1px solid #edf0f4;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
    }

    .pdf-pages-field label {
      color: #111827;
      font-size: 14px;
      font-weight: 950;
    }

    .pdf-pages-field input {
      width: 100%;
      min-height: 52px;
      padding: 0 14px;
      border: 1px solid #dfe4ec;
      border-radius: 14px;
      color: #111827;
      font-size: 18px;
      font-weight: 850;
      outline: none;
    }

    .pdf-pages-field input:focus {
      border-color: #ff5a00;
      box-shadow: 0 0 0 4px rgba(255, 90, 0, .12);
    }

    .pdf-pages-field small {
      color: #68707d;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.45;
    }

	    .pdf-page-option {
	      position: relative;
	      display: grid;
	      gap: 10px;
	      padding: 12px;
      border: 2px solid transparent;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
	      cursor: pointer;
	      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
	    }

	    .pdf-page-option input {
	      position: absolute;
	      width: 1px;
	      height: 1px;
	      opacity: 0;
	      pointer-events: none;
	    }

    .pdf-page-option.is-selected {
      border-color: #ff5a00;
      box-shadow: 0 14px 32px rgba(255, 90, 0, .14);
    }

    .pdf-page-option:hover {
      transform: translateY(-1px);
    }

	    .pdf-page-canvas-wrap {
	      display: grid;
	      place-items: center;
	      min-height: 136px;
      border: 1px solid #edf0f4;
      border-radius: 14px;
      background: #f3f5f8;
      overflow: hidden;
    }

    .pdf-page-canvas-wrap canvas {
      max-width: 100%;
      height: auto !important;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    }

    .pdf-page-canvas-wrap.is-loading {
      color: #68707d;
      font-size: 13px;
      font-weight: 850;
    }

	    .pdf-page-placeholder {
      display: grid;
      place-items: center;
      width: 100%;
	      min-height: 136px;
      color: #ff5a00;
      font-size: 46px;
      font-weight: 950;
      letter-spacing: -.04em;
    }

    .pdf-page-option-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #111827;
      font-size: 13px;
      font-weight: 950;
    }

    .pdf-page-check {
      display: inline-grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border: 1px solid #d9dee7;
      border-radius: 999px;
      background: #fff;
      color: transparent;
      font-size: 15px;
      font-weight: 950;
    }

    .pdf-page-option.is-selected .pdf-page-check {
      border-color: #ff5a00;
      background: #ff5a00;
      color: #fff;
    }

    .pdf-pages-empty {
      grid-column: 1 / -1;
      padding: 34px;
      border: 1px dashed #dbe1ea;
      border-radius: 18px;
      background: #fff;
      color: #68707d;
      text-align: center;
      font-weight: 850;
    }

    .hint {
      background: #eef5ff;
      color: #1557ad;
      border: 1px solid #cfe0ff;
      border-radius: 14px;
      padding: 12px;
      font-size: 13px;
      line-height: 1.45;
      margin-top: 16px;
      font-weight: 700;
    }

    .preview-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 16px;
    }

    .preview-header h2 {
      margin: 0;
    }

    .tools {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 14px;
      padding: 12px;
      background: #fafafa;
      border: 1px solid #e3e3dc;
      border-radius: 18px;
    }

    .tool-btn {
      background: #fff;
      color: #111;
      border: 1px solid #ddd;
      padding: 10px 13px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
    }

    .tool-btn.active.check {
      border-color: #0066ff;
      color: #0066ff;
      background: #eef5ff;
    }

    .permission-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 8px;
      padding: 10px;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      margin: 12px 0 16px;
    }

    .permission-toggle {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 38px;
      padding: 8px 10px;
      background: #fff;
      border: 1px solid #edf0f3;
      border-radius: 10px;
      color: #111827;
      font-size: 12px;
      font-weight: 800;
    }

    .permission-toggle input[type="checkbox"],
    .orders-table input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #ff5a1f;
    }

    .tool-btn.active.approval {
      border-color: #0f8a2f;
      color: #0f8a2f;
      background: #effaf2;
    }

    .tool-btn.danger {
      color: #a20d0d;
    }


    .editor-viewer {
      flex: 1;
      overflow-y: scroll;
      overflow-x: auto;
      background: #e9e9e5;
      text-align: center;
      padding: 42px 40px 160px;
      min-height: 0;
      height: calc(100vh - 260px);
      max-height: calc(100vh - 260px);
      scrollbar-width: auto;
    }

    .pdf-render-wrapper {
      position: relative;
      display: inline-block;
      background: #fff;
      box-shadow: 0 18px 70px rgba(0,0,0,0.20);
      text-align: left;
      margin: 0 auto 120px;
      border-radius: 2px;
    }

    #pdfCanvas {
      display: block;
      background: #fff;
    }


    .editor-shell {
      height: calc(100vh - 40px);
      background: #fff;
      border-radius: 28px;
      padding: 0;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 120px rgba(0,0,0,0.22);
      overflow: hidden;
    }

    .editor-top {
      padding: 18px 24px;
      margin-bottom: 0;
      background: #fff;
      border-bottom: 1px solid #e7e7df;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .editor-shell .tools {
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: none;
      padding: 12px 24px;
      background: #fff;
      position: sticky;
      top: 74px;
      z-index: 19;
    }

    .helper-tools {
      top: 132px !important;
      background: #fafafa !important;
    }

    .editor-viewer {
      flex: 1;
      overflow-y: scroll;
      overflow-x: auto;
      background: #e9e9e5;
      text-align: center;
      padding: 42px 40px 160px;
      min-height: 0;
      height: calc(100vh - 260px);
      max-height: calc(100vh - 260px);
      scrollbar-width: auto;
    }

    .pdf-render-wrapper {
      position: relative;
      display: inline-block;
      background: #fff;
      box-shadow: 0 18px 70px rgba(0,0,0,0.20);
      text-align: left;
      margin: 0 auto 120px;
      border-radius: 2px;
    }

    #pdfCanvas {
      display: block;
      background: #fff;
    }

    .editor-zoom-tools {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-left: auto;
    }

    .zoom-value {
      min-width: 72px;
      text-align: center;
      font-weight: 900;
      color: #333;
      font-size: 13px;
    }

    .editor-page {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #f5f5f2;
      padding: 20px;
      overflow: hidden;
    }

    .editor-page.active {
      display: block;
    }

    .editor-shell {
      height: calc(100vh - 40px);
      background: #fff;
      border-radius: 28px;
      padding: 0;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 120px rgba(0,0,0,0.22);
      overflow: hidden;
    }

    .editor-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 14px;
    }

    .editor-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .editor-viewer {
      flex: 1;
      overflow-y: scroll;
      overflow-x: auto;
      background: #e9e9e5;
      text-align: center;
      padding: 42px 40px 160px;
      min-height: 0;
      height: calc(100vh - 260px);
      max-height: calc(100vh - 260px);
      scrollbar-width: auto;
    }

    .editor-viewer iframe {
      width: 100%;
      height: 100%;
      min-height: 0;
      border: 0;
      background: #fff;
      pointer-events: auto;
    }

    .empty-preview {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      color: #777;
      text-align: center;
      padding: 32px;
    }

    .empty-preview strong {
      color: #111;
      display: block;
      font-size: 20px;
      margin-bottom: 8px;
    }

    .field-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      cursor: default;
      pointer-events: none;
    }

    .field-layer.placement-active {
      cursor: crosshair;
      pointer-events: auto;
    }

    .field-layer.has-fields:not(.placement-active) {
      background: transparent;
      pointer-events: none;
    }

    .field-layer.has-fields:not(.placement-active) .signature-box {
      pointer-events: auto;
    }

    .signature-box {
      backdrop-filter: blur(2px);
      position: absolute;
      width: 230px;
      height: 64px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.84);
      user-select: none;
      cursor: move;
      pointer-events: auto;
    }

    .signature-box.check {
      color: #0066ff;
      border: 2px dashed #0066ff;
      background: rgba(0, 102, 255, 0.08);
    }

    .signature-box.approval {
      color: #0f8a2f;
      border: 2px dashed #0f8a2f;
      background: rgba(15, 138, 47, 0.08);
    }

    .signature-box .delete-field {
      position: absolute;
      right: -10px;
      top: -10px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid #ddd;
      background: #fff;
      color: #111;
      cursor: pointer;
      font-weight: 900;
      line-height: 1;
    }

    .resize-handle {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #fff;
      border: 2px solid currentColor;
      border-radius: 999px;
      z-index: 12;
    }

    .resize-handle.top-left {
      left: -7px;
      top: -7px;
      cursor: nwse-resize;
    }

    .resize-handle.top-right {
      right: -7px;
      top: -7px;
      cursor: nesw-resize;
    }

    .resize-handle.bottom-left {
      left: -7px;
      bottom: -7px;
      cursor: nesw-resize;
    }

    .resize-handle.bottom-right {
      right: -7px;
      bottom: -7px;
      cursor: nwse-resize;
    }

    .pill {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff4e9;
      color: #c95600;
      font-weight: 800;
      font-size: 12px;
      white-space: nowrap;
    }

    .pill.blue {
      background: #eef5ff;
      color: #0066ff;
    }

    .pill.green {
      background: #effaf2;
      color: #0f8a2f;
    }

    .pill.gray {
      background: #efefef;
      color: #555;
    }

    .pill.red {
      background: #fff1f1;
      color: #b42318;
    }

    .pill.orange {
      background: #fff7ed;
      color: #c2410c;
    }

    .orders-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      margin-top: 10px;
    }

    .orders-table th,
    .orders-table td {
      padding: 16px 12px;
      border-bottom: 1px solid #ededE7;
      text-align: left;
      vertical-align: middle;
    }

    .orders-table th {
      color: #555;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: #fafafa;
    }

    .table-btn {
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 800;
      cursor: pointer;
      font-size: 12px;
      margin: 2px;
    }

    .section {
      display: none;
    }

    .section.active {
      display: block;
    }

    .review-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0,0,0,0.58);
      padding: 20px;
    }

    .review-modal.active {
      display: block;
    }

    .review-shell {
      height: calc(100vh - 40px);
      background: #fff;
      border-radius: 28px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 120px rgba(0,0,0,0.35);
    }

    .review-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 14px;
    }

    .review-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .review-content {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 18px;
      flex: 1;
      min-height: 0;
    }

    .review-pdf {
      border: 1px solid #dfdfd8;
      border-radius: 20px;
      overflow: hidden;
      background: #f7f7f4;
      min-height: 0;
    }

    .review-document-viewer,
    .review-document-viewer iframe,
    .review-document-viewer object,
    .review-document-viewer embed {
      width: 100%;
      height: 100%;
      border: 0;
      background: #fff;
    }

    .review-document-viewer {
      position: relative;
      min-height: 520px;
    }

    .review-document-viewer img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 520px;
      object-fit: contain;
      background: #fff;
    }

    .review-document-fallback {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      border: 1px solid #e8e5df;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

    .review-document-fallback span {
      color: #5d6472;
      font-size: 13px;
      font-weight: 800;
    }

    .review-side {
      border: 1px solid #dfdfd8;
      border-radius: 20px;
      background: #fafafa;
      padding: 16px;
      overflow-y: auto;
    }

    .attachment-item {
      background: #fff;
      border: 1px solid #e3e3dc;
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .attachment-item strong {
      display: block;
      font-size: 13px;
      margin-bottom: 8px;
      word-break: break-word;
    }

    .attachment-item img {
      width: 100%;
      max-height: 180px;
      object-fit: contain;
      background: #f5f5f2;
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .attachment-item .file-meta {
      color: #777;
      font-size: 12px;
      margin-bottom: 10px;
    }

    @media (max-width: 1050px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: relative;
        height: auto;
      }

      .sidebar-footer {
        position: static;
        margin-top: 28px;
      }

      .layout,
      .layout.single {
        grid-template-columns: 1fr;
      }

      .review-content {
        grid-template-columns: 1fr;
      }

      .review-side {
        max-height: 280px;
      }
    }
  
    .mobile-menu-btn {
      display: none;
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 20000;
      border: none;
      background: #111;
      color: #fff;
      padding: 14px 18px;
      border-radius: 999px;
      font-weight: 900;
      box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    }

    @media (max-width: 760px) {
      .mobile-menu-btn {
        display: inline-flex;
      }

      .app {
        grid-template-columns: 1fr !important;
      }

      .sidebar {
        position: fixed !important;
        z-index: 15000;
        left: 0;
        top: 0;
        bottom: 0;
        width: 82%;
        max-width: 320px;
        height: 100vh !important;
        transform: translateX(-105%);
        transition: transform .22s ease;
      }

      .sidebar.mobile-open {
        transform: translateX(0);
      }

      main {
        padding: 18px !important;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .orders-table,
      .orders-table thead,
      .orders-table tbody,
      .orders-table tr,
      .orders-table th,
      .orders-table td {
        display: block;
        width: 100%;
      }

      .orders-table thead {
        display: none;
      }

      .orders-table tr {
        background: #fff;
        border: 1px solid #e3e3dc;
        border-radius: 18px;
        padding: 12px;
        margin-bottom: 12px;
      }

      .orders-table td {
        border-bottom: 1px solid #eee;
        padding: 10px 4px;
      }

      .orders-table td:last-child {
        border-bottom: none;
      }

      .review-modal {
        padding: 8px !important;
      }

      .review-shell {
        height: calc(100vh - 16px) !important;
        border-radius: 18px !important;
        padding: 14px !important;
      }

      .review-content {
        grid-template-columns: 1fr !important;
      }

      .review-side {
        max-height: 240px;
      }

      .editor-page {
        padding: 8px !important;
      }

      .editor-shell {
        height: calc(100vh - 16px) !important;
        border-radius: 18px !important;
      }

      .editor-top {
        padding: 14px !important;
      }

      .editor-viewer {
        padding: 24px 14px 140px !important;
      }
    }

  
    :root {
      --bg: #f7f7f5;
      --surface: #ffffff;
      --ink: #111111;
      --muted: #707070;
      --line: #e8e8e2;
      --soft: #f1f1ee;
      --success: #0f8a45;
      --danger: #b42318;
      --warning: #b85b00;
      --shadow-soft: 0 18px 50px rgba(0,0,0,0.06);
    }

    body { background: var(--bg) !important; }

    .login-card, .card, .review-shell, .editor-shell {
      border-color: var(--line) !important;
      box-shadow: var(--shadow-soft) !important;
    }

    .sidebar { background: #0f0f0f !important; }

    input, select {
      border-color: var(--line) !important;
      background: #fff !important;
    }

    .btn, .table-btn, .tool-btn {
      transition: .18s ease;
    }

    .btn:hover, .table-btn:hover, .tool-btn:hover {
      transform: translateY(-1px);
      opacity: .94;
    }

    .auto-reference-preview {
      background: #f7f7f5;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px 14px;
      color: #333;
      font-weight: 800;
      line-height: 1.35;
      min-height: 46px;
    }

    .toast-stack {
      position: fixed;
      right: 22px;
      top: 22px;
      z-index: 30000;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 390px;
      pointer-events: none;
    }

    .toast {
      background: rgba(255,255,255,.96);
      border: 1px solid #e7e7df;
      border-radius: 18px;
      padding: 14px 16px;
      box-shadow: 0 22px 70px rgba(0,0,0,.14);
      display: grid;
      grid-template-columns: 12px 1fr;
      gap: 12px;
      align-items: start;
      animation: toastIn .28s ease forwards;
      backdrop-filter: blur(10px);
    }

    .toast::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #111;
      margin-top: 5px;
    }

    .toast.success::before { background: var(--success); }
    .toast.error::before { background: var(--danger); }
    .toast.warning::before { background: var(--warning); }

    .toast-title {
      font-size: 14px;
      font-weight: 900;
      color: #111;
      margin-bottom: 2px;
    }

    .toast-message {
      color: #666;
      font-size: 13px;
      line-height: 1.35;
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(-8px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes toastOut {
      to { opacity: 0; transform: translateY(-8px) scale(.98); }
    }

    @media (max-width: 760px) {
      .toast-stack {
        top: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
      }
    }

  
/* ========================================
   MODAL PROFESIONAL TSIGNS
======================================== */

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40000;
  background: rgba(15, 15, 15, 0.52);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.app-modal-backdrop.active {
  display: flex;
}

.app-modal-card {
  width: 100%;
  max-width: 620px;
  background: #fff;
  border: 1px solid #e7e7df;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 35px 120px rgba(0,0,0,.28);
  animation: modalIn .22s ease forwards;
  text-align: center;
}

.app-modal-icon {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 900;
  background: #f1f5ff;
  color: #2454d6;
}

.app-modal-card h2 {
  font-size: 30px;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.app-modal-card p {
  color: #666;
  line-height: 1.45;
  margin-bottom: 24px;
}

#appModalInputWrap {
  text-align: left;
  border-top: 1px solid #eee;
  padding-top: 22px;
  margin-top: 12px;
}

#appModalInputWrap label {
  margin-bottom: 10px;
}

#appModalInput {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 14px;
  font-size: 15px;
  outline: none;
}

#appModalInput:focus {
  border-color: #111;
}

.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .app-modal-card {
    padding: 24px;
    border-radius: 22px;
  }

  .app-modal-card h2 {
    font-size: 24px;
  }

  .app-modal-actions {
    flex-direction: column-reverse;
  }

  .app-modal-actions .btn {
    width: 100%;
  }
}

/* ========================================
   UI FUNCIONAL SIMPLE
======================================== */

body {
  background: #f6f7f9;
  color: #111;
}

.app {
  grid-template-columns: 260px 1fr;
}

.sidebar {
  background: #111827;
  color: #fff;
  padding: 22px;
}

.logo {
  font-size: 28px;
  margin-bottom: 24px;
}

.brand span,
.logo span {
  color: #f97316;
}

.user-box,
.card,
.login-card,
.app-modal-card,
.review-modal-card {
  border-radius: 12px;
}

.menu-item {
  border: 0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 4px;
  color: #d1d5db;
}

.menu-item:hover,
.menu-item.active {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.btn,
.table-btn,
.tool-btn {
  border-radius: 8px;
}

.btn {
  background: #111827;
}

input,
select,
textarea {
  border-radius: 8px;
  border-color: #d1d5db;
}

select {
  cursor: pointer;
}

.upload-area {
  border-radius: 12px;
  border-color: #d1d5db;
  background: #fff;
}

.card {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1050px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static !important;
    height: auto !important;
    transform: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }
}

/* ========================================
   TSIGNS V2 VISUAL
======================================== */

:root {
  --v2-bg: #f7f8fb;
  --v2-surface: #ffffff;
  --v2-ink: #101214;
  --v2-muted: #6b7280;
  --v2-line: #e5e7eb;
  --v2-orange: #ff5a1f;
  --v2-orange-dark: #e6460c;
  --v2-sidebar: #0d1117;
  --v2-sidebar-soft: #171c24;
  --v2-shadow: 0 18px 55px rgba(16, 24, 40, 0.08);
  --v2-shadow-strong: 0 24px 80px rgba(16, 24, 40, 0.14);
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 90, 31, 0.08), transparent 34%),
    linear-gradient(180deg, #fbfbfd 0%, var(--v2-bg) 42%, #f4f6f9 100%) !important;
  color: var(--v2-ink);
}

.login-screen {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 90, 31, 0.12), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f5f7fb 100%) !important;
}

.login-card {
  border-radius: 20px !important;
  border: 1px solid rgba(229, 231, 235, 0.92) !important;
  box-shadow: var(--v2-shadow-strong) !important;
}

.app {
  grid-template-columns: 292px 1fr !important;
}

.sidebar {
  background:
    radial-gradient(circle at top left, rgba(255, 90, 31, 0.16), transparent 32%),
    linear-gradient(180deg, #111722 0%, var(--v2-sidebar) 100%) !important;
  padding: 26px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.logo,
.brand {
  letter-spacing: -0.04em !important;
}

.user-box {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
}

.user-box::before {
  content: "T";
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-weight: 900;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-radius: 12px !important;
  color: #cbd5e1 !important;
  font-weight: 750;
}

.menu-item:hover,
.menu-item.active {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.menu-item.active {
  box-shadow: inset 3px 0 0 var(--v2-orange);
}

.nav-icon,
.btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: currentColor;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

main {
  padding: 36px !important;
}

.topbar h1 {
  letter-spacing: -0.04em !important;
}

.status-pill,
.card,
.upload-area,
.orders-table tr,
.app-modal-card,
.review-shell {
  border-color: var(--v2-line) !important;
}

.card {
  border-radius: 16px !important;
  box-shadow: var(--v2-shadow) !important;
}

.btn {
  background: var(--v2-orange) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(255, 90, 31, 0.22);
}

.btn:hover {
  background: var(--v2-orange-dark) !important;
}

.btn.secondary,
.btn.logout {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: none;
}

.btn.logout {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.orders-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.summary-card {
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.05);
}

.summary-card span {
  display: block;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.summary-card strong {
  font-size: 26px;
  letter-spacing: -0.04em;
}

.orders-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.orders-table th {
  background: #f9fafb !important;
  color: #6b7280 !important;
}

.orders-table td {
  color: #1f2937;
}

.table-btn {
  border-radius: 9px !important;
  border-color: var(--v2-line) !important;
  color: #111827;
}

.table-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f9fafb !important;
}

.mark-paid-btn {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #c2410c !important;
}

.mobile-menu-btn {
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.25) !important;
}

@media (max-width: 1050px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  main {
    padding: 24px !important;
  }
}

@media (max-width: 760px) {
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    right: 14px;
    bottom: 14px;
    background: var(--v2-orange) !important;
  }

  .sidebar {
    position: fixed !important;
    height: 100vh !important;
    width: min(86vw, 330px) !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  main {
    padding: 18px !important;
  }

  .topbar {
    gap: 12px;
  }

  .topbar h1 {
    font-size: 28px;
  }

  .preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .preview-header .btn,
  #createOrderFromList {
    width: 100%;
  }

  .orders-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orders-table tr {
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
  }

  .orders-table td {
    display: grid !important;
    grid-template-columns: 112px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    word-break: break-word;
  }

  .orders-table td::before {
    content: attr(data-label);
    color: #6b7280;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .orders-table td:last-child {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  .orders-table td:last-child::before {
    margin-bottom: 2px;
  }

  .table-btn {
    width: 100%;
    min-height: 38px;
  }
}

/* ========================================
   TSIGNS V2.1 PREMIUM VISUAL
======================================== */

body {
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.08) 0%, transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(17, 24, 39, 0.08), transparent 24%),
    #f6f7fb !important;
}

.app {
  grid-template-columns: 304px minmax(0, 1fr) !important;
}

.sidebar {
  background:
    linear-gradient(180deg, #111827 0%, #090d14 100%) !important;
  padding: 30px 24px !important;
}

.logo {
  font-size: 34px !important;
  margin-bottom: 28px !important;
}

.user-box {
  margin-bottom: 28px !important;
  padding: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.menu-item {
  min-height: 48px !important;
  padding: 13px 14px !important;
  margin-bottom: 7px !important;
  font-size: 15px !important;
}

.menu-item.active {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}

.menu-item.active .nav-icon {
  color: var(--v2-orange);
}

main {
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}

.topbar {
  padding: 4px 0 8px;
}

.topbar h1 {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1 !important;
}

.subtitle {
  font-size: 16px !important;
  color: #5b6472 !important;
}

.status-pill {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(16,24,40,.06);
}

.layout,
.layout.single {
  grid-template-columns: minmax(420px, 560px) minmax(0, 1fr) !important;
  gap: 28px !important;
}

.card {
  border-radius: 20px !important;
  padding: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)) !important;
}

.card h2 {
  font-size: 24px !important;
  letter-spacing: -0.03em !important;
}

.preview-header {
  border-bottom: 1px solid #eef0f3;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

input,
select,
textarea,
.auto-reference-preview {
  min-height: 46px;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--v2-orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 31, .12);
}

.upload-area {
  border-radius: 18px !important;
  border-color: #d8dce3 !important;
  background:
    linear-gradient(180deg, #fff, #fbfcfd) !important;
  padding: 24px !important;
}

.upload-area strong {
  font-size: 17px !important;
}

.orders-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.summary-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  padding: 18px !important;
}

.summary-card::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -22px;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255, 90, 31, .10);
}

.summary-card strong {
  color: #111827;
  font-size: 32px !important;
}

.orders-table {
  overflow: hidden;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  background: #fff;
}

.orders-table th,
.orders-table td {
  padding: 15px 14px !important;
}

.orders-table tbody tr:hover {
  background: #fbfcff;
}

.pill {
  border-radius: 999px !important;
  padding: 7px 11px !important;
  font-weight: 900 !important;
}

.table-btn {
  min-height: 34px;
  padding: 8px 11px !important;
  background: #fff !important;
}

.table-btn.combined-pdf-btn {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}

.table-btn.order-action-btn {
  background: #ecfdf3 !important;
  border-color: #bbf7d0 !important;
  color: #047857 !important;
}

.table-btn.reject-order-btn,
.table-btn.delete-order-btn,
.table-btn.admin-delete-user {
  background: #fff7f7 !important;
  border-color: #fecaca !important;
  color: #b42318 !important;
}

.login-card {
  max-width: 460px !important;
  padding: 38px !important;
}

.login-card h1 {
  font-size: 52px !important;
}

@media (max-width: 1050px) {
  .layout,
  .layout.single {
    grid-template-columns: 1fr !important;
  }

  .app {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .topbar h1 {
    font-size: 32px !important;
  }

  .card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .orders-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .summary-card {
    padding: 15px !important;
  }

  .summary-card strong {
    font-size: 28px !important;
  }
}

/* ========================================
   TSIGNS V3 MINIMAL GRID
======================================== */

body {
  background: #f7f7f5 !important;
  color: #0f1115 !important;
}

.app {
  grid-template-columns: 286px minmax(0, 1fr) !important;
}

.sidebar {
  background: linear-gradient(180deg, #171a20 0%, #111419 100%) !important;
  padding: 26px 24px !important;
}

.logo {
  font-size: 34px !important;
  line-height: 1 !important;
  margin-bottom: 28px !important;
}

.user-box {
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 26px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.menu-item {
  border-radius: 0 !important;
  margin: 0 -24px !important;
  padding: 15px 24px !important;
  min-height: 54px !important;
  border-left: 4px solid transparent !important;
  background: transparent !important;
  color: #f2f4f7 !important;
}

.menu-item:hover,
.menu-item.active {
  background: rgba(255,255,255,0.055) !important;
  color: #fff !important;
}

.menu-item.active {
  border-left-color: #ff5a1f !important;
  box-shadow: none !important;
}

.menu-item.active .nav-icon {
  color: #fff !important;
}

.sidebar-footer {
  color: #a5abb6 !important;
}

main {
  max-width: 1220px !important;
  padding: 38px 34px !important;
}

.topbar {
  min-height: 64px;
  margin-bottom: 22px !important;
  align-items: flex-start !important;
}

.topbar h1 {
  font-size: 26px !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px !important;
}

.subtitle {
  font-size: 14px !important;
  color: #5e6470 !important;
}

.status-pill {
  border-radius: 10px !important;
  padding: 12px 15px !important;
  min-height: 48px;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

.layout,
.layout.single {
  display: grid !important;
  grid-template-columns: minmax(360px, 480px) minmax(360px, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.card {
  border-radius: 10px !important;
  padding: 26px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.035) !important;
}

.card h2 {
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 6px !important;
}

.card p {
  margin-bottom: 22px !important;
}

.field {
  margin-bottom: 16px !important;
}

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

input,
select,
textarea,
.auto-reference-preview {
  min-height: 44px !important;
  border-radius: 9px !important;
  border: 1px solid #d9dde5 !important;
  background: #fff !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #ff5a1f !important;
  box-shadow: 0 0 0 3px rgba(255,90,31,.10) !important;
}

.btn,
.table-btn,
.tool-btn {
  border-radius: 9px !important;
  box-shadow: none !important;
}

.btn {
  min-height: 44px;
  background: #ff5a1f !important;
}

.btn:hover {
  background: #ea4d14 !important;
}

.btn.secondary {
  background: #fff !important;
  color: #111827 !important;
}

.upload-area {
  border-radius: 10px !important;
  border: 1px dashed #cfd4dc !important;
  background: #fff !important;
  padding: 24px !important;
}

.hint {
  border-radius: 9px !important;
  background: #fff !important;
}

.orders-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.summary-card {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  padding: 16px !important;
  box-shadow: none !important;
}

.summary-card::after {
  display: none !important;
}

.summary-card strong {
  font-size: 26px !important;
}

.preview-header {
  border-bottom: 0 !important;
  margin-bottom: 18px !important;
  padding-bottom: 8px !important;
}

.orders-table {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #fbfbfb;
}

.orders-table th {
  background: #f6f6f4 !important;
}

.orders-table th,
.orders-table td {
  padding: 14px 12px !important;
  border-color: #f0f0ed !important;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-hub-card {
  width: 100%;
  min-height: 150px;
  padding: 22px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.06);
  text-align: left;
  cursor: pointer;
  display: grid;
  align-content: space-between;
  gap: 16px;
}

.admin-hub-card strong {
  display: block;
  font-size: 18px;
}

.admin-hub-card span {
  color: #6b7280;
  line-height: 1.35;
}

.admin-panel {
  display: none !important;
}

.admin-panel.active {
  display: block !important;
}

.admin-grid.admin-panel.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 980px;
}

.admin-back {
  margin-bottom: 16px;
}

.admin-inner-table {
  margin-top: 18px !important;
}

#adminSection .card {
  border: 1px solid #e6e6e1 !important;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.055) !important;
}

#adminSection input,
#adminSection select,
#adminSection textarea {
  border-color: #ececea !important;
}

.master-row-hidden {
  display: none !important;
}

.master-list-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* Admin width and quiet background */
body {
  background: #f7f7f5 !important;
}

.app {
  grid-template-columns: 286px minmax(0, 1fr) !important;
}

main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 34px 28px !important;
}

#adminSection {
  width: 100%;
  max-width: none;
}

#adminSection .topbar,
#adminSection .admin-panel.active {
  max-width: 1220px;
  margin-left: 0 !important;
  margin-right: auto !important;
}

#adminSection .card {
  width: 100%;
}

#adminSection .admin-grid.admin-panel.active {
  max-width: 1220px !important;
}

#adminSection .admin-panel > .card,
#databaseAdminGrid > .card {
  padding: 28px !important;
}

#databaseAdminGrid .layout {
  gap: 18px !important;
}

@media (max-width: 1050px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  main {
    max-width: none !important;
    padding: 24px !important;
  }

  .layout,
  .layout.single,
  .admin-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body {
    background: #f7f7f5 !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    right: 14px;
    bottom: 14px;
    z-index: 30000;
    background: #ff5a1f !important;
    border-radius: 999px !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 324px) !important;
    height: 100vh !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    z-index: 25000 !important;
    overflow-y: auto !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  main {
    padding: 18px 14px 86px !important;
  }

  .topbar {
    min-height: auto;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .topbar h1 {
    font-size: 25px !important;
  }

  .status-pill {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .card {
    padding: 18px !important;
    border-radius: 10px !important;
  }

  .orders-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .summary-card strong {
    font-size: 24px !important;
  }

  .orders-table {
    border: 0 !important;
    background: transparent !important;
  }

  .orders-table tr {
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: 10px !important;
  }

  .orders-table td {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    padding: 9px 2px !important;
  }

  .orders-table td:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .table-btn,
  .btn {
    width: 100%;
  }
}

/* ========================================
   TSIGNS V3 MOBILE APP
======================================== */

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .app {
    display: none;
    grid-template-columns: 1fr !important;
  }

  main {
    width: 100%;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 18px 14px 96px !important;
  }

  .login-card {
    max-width: 430px !important;
    padding: 26px !important;
    border-radius: 18px !important;
  }

  .topbar {
    margin-bottom: 14px !important;
  }

  .topbar h1 {
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  .subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .status-pill {
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .layout,
  .layout.single,
  .admin-grid {
    gap: 10px !important;
  }

  .card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .card + .card {
    margin-top: 10px !important;
  }

  .card h2 {
    font-size: 17px !important;
  }

  .card p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  .field {
    margin-bottom: 12px !important;
  }

  input,
  select,
  textarea,
  .auto-reference-preview {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  .upload-area {
    padding: 18px !important;
    text-align: left !important;
  }

  .upload-area .btn,
  .upload-area label.btn {
    margin-top: 4px;
  }

  .preview-header {
    gap: 12px !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] .field {
    max-width: none !important;
    width: 100%;
  }

  .orders-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .summary-card {
    min-height: 86px;
    padding: 13px !important;
  }

  .summary-card span {
    font-size: 10px !important;
  }

  .summary-card strong {
    font-size: 24px !important;
  }

  .orders-table,
  .orders-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .orders-table tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    background: #fff !important;
  }

  .orders-table td {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 38px;
    border-bottom: 1px solid #eef0f3 !important;
  }

  .orders-table td:last-child {
    border-bottom: 0 !important;
  }

  .orders-table td::before {
    align-self: center;
  }

  .pill {
    width: fit-content;
  }

  .table-btn {
    min-height: 42px !important;
    font-size: 13px !important;
  }

  .tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tools label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 34px;
  }

  .review-modal {
    padding: 0 !important;
  }

  .review-shell {
    height: 100vh !important;
    border-radius: 0 !important;
  }

  .app-modal-card {
    max-width: 430px !important;
  }
}

/* ========================================
   TSIGNS MOBILE REFERENCE STYLE
======================================== */

.mobile-app-header,
.mobile-bottom-nav,
.mobile-sign-fab {
  display: none;
}

@media (max-width: 760px) {
  .mobile-app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 21000;
    display: none;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 0 20px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #eceff3;
    backdrop-filter: blur(12px);
  }

  body.app-authenticated .mobile-app-header {
    display: grid !important;
  }

  .mobile-brand {
    text-align: center;
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -0.04em;
  }

  .mobile-brand span {
    color: #ff5a1f;
  }

  .mobile-bell {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #0f1115;
    display: grid;
    place-items: center;
  }

  .mobile-bell span {
    position: absolute;
    top: 5px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #ff4d1d;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
  }

  .mobile-menu-btn {
    top: 11px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #0f1115 !important;
    box-shadow: none !important;
    z-index: 22000 !important;
    font-size: 0 !important;
  }

  .mobile-menu-btn .btn-icon {
    width: 24px;
    height: 24px;
  }

  main {
    padding-top: 82px !important;
  }

  #sentOrdersSection .topbar {
    margin-bottom: 12px !important;
  }

  #sentOrdersSection .topbar .status-pill {
    display: none !important;
    width: auto !important;
    min-height: 28px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #ff5a1f !important;
    border-color: #ff5a1f !important;
    color: #fff !important;
  }

  #ordersTitle {
    font-size: 20px !important;
  }

  #ordersSubtitle,
  #ordersTableTitle,
  #ordersTableDescription,
  #createOrderFromList,
  #sentOrdersSection .preview-header {
    display: none !important;
  }

  #sentOrdersSection > .topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #sentOrdersSection .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .orders-summary {
    display: none !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] {
    grid-template-columns: 1fr 50px !important;
    align-items: end !important;
    margin-bottom: 14px !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] .field {
    display: none;
  }

  #sentOrdersSection .card > div[style*="display:flex"] .field:first-child,
  #sentOrdersSection .card > div[style*="display:flex"] .field:nth-child(4) {
    display: block;
  }

  #globalSearchInput {
    min-height: 50px !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding-left: 16px !important;
  }

  #paidFilter {
    min-height: 50px !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    color: transparent !important;
    background: #fff !important;
  }

  #sentOrdersSection .orders-table tr {
    position: relative;
    min-height: 104px;
    border: 1px solid #eef0f3 !important;
    border-radius: 14px !important;
    padding: 18px 48px 18px 58px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
  }

  #sentOrdersSection .orders-table tr::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 26px;
    width: 24px;
    height: 30px;
    border: 2px solid #ff5a1f;
    border-radius: 5px;
  }

  #sentOrdersSection .orders-table tr::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 38px;
    color: #111827;
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
  }

  #sentOrdersSection .orders-table td {
    display: none !important;
    border: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #sentOrdersSection .orders-table td[data-label="Referencia"],
  #sentOrdersSection .orders-table td[data-label="Proveedor"],
  #sentOrdersSection .orders-table td[data-label="Fecha"],
  #sentOrdersSection .orders-table td[data-label="Estado"],
  #sentOrdersSection .orders-table td[data-label="Pago"],
  #sentOrdersSection .orders-table td[data-label="Acción"] {
    display: block !important;
  }

  #sentOrdersSection .orders-table td::before {
    display: none !important;
  }

  #sentOrdersSection .orders-table td[data-label="Referencia"] {
    font-size: 15px !important;
    font-weight: 900;
    color: #111827;
    margin-bottom: 4px;
    padding-right: 82px !important;
  }

  #sentOrdersSection .orders-table td[data-label="Proveedor"] {
    font-size: 13px !important;
    color: #343a46;
    margin-bottom: 3px;
  }

  #sentOrdersSection .orders-table td[data-label="Fecha"] {
    font-size: 13px !important;
    color: #343a46;
  }

  #sentOrdersSection .orders-table td[data-label="Estado"],
  #sentOrdersSection .orders-table td[data-label="Pago"] {
    position: absolute;
    top: 20px;
    right: 44px;
  }

  #sentOrdersSection .orders-table td[data-label="Pago"] {
    top: 50px;
  }

  #sentOrdersSection .orders-table td[data-label="Pago"] .pill.green {
    background: #eaf8ef;
    color: #128a45;
  }

  #sentOrdersSection .orders-table td[data-label="Estado"] .pill,
  #sentOrdersSection .orders-table td[data-label="Pago"] .pill {
    font-size: 11px !important;
    padding: 5px 9px !important;
  }

  #sentOrdersSection .orders-table td[data-label="Acción"] {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  #sentOrdersSection .orders-table td[data-label="Acción"] .combined-pdf-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mobile-sign-fab {
    position: fixed;
    right: 18px;
    bottom: 88px;
    z-index: 21000;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 999px;
    background: #ff5a1f;
    color: #fff;
    box-shadow: 0 16px 32px rgba(255, 90, 31, .34);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    font-weight: 850;
  }

  body.app-authenticated.can-create-orders .mobile-sign-fab {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    z-index: 20000;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255,255,255,.96);
    border-top: 1px solid #eceff3;
    backdrop-filter: blur(12px);
  }

  body.app-authenticated .mobile-bottom-nav {
    display: grid !important;
  }

  .mobile-bottom-nav button {
    border: 0;
    background: transparent;
    color: #5b6472;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    font-weight: 850;
    font-size: 12px;
  }

  .mobile-bottom-nav button.active,
  .mobile-bottom-nav button:hover {
    color: #ff5a1f;
  }

  .sidebar {
    display: none !important;
  }

  #sentOrdersSection .topbar .status-pill {
    display: none !important;
  }

  .mobile-app-header > div:first-child::before {
    content: "";
  }
}

/* ========================================
   TSIGNS FINAL ALIGNMENT PASS
======================================== */

main {
  max-width: 1320px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.user-box {
  grid-template-columns: 42px minmax(0, 1fr) !important;
}

.user-box::before {
  grid-row: 1 / span 2;
}

.user-box strong {
  grid-column: 2;
  align-self: end;
}

.user-box span {
  grid-column: 2;
  align-self: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-box strong,
.user-box span {
  min-width: 0;
}

.topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

.layout,
.layout.single {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr) !important;
}

.card {
  min-width: 0;
}

.preview-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.audit-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.audit-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: #5f6472;
  font-weight: 800;
}

.audit-pagination[hidden] {
  display: none !important;
}

.audit-pagination .btn {
  min-width: 112px;
}

#sentOrdersSection .card > div[style*="display:flex"] {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.05fr) minmax(220px, 1.55fr) minmax(220px, 1.35fr) minmax(150px, .7fr);
  gap: 12px !important;
  align-items: end !important;
  margin-bottom: 22px !important;
}

#sentOrdersSection .card > div[style*="display:flex"] .field {
  max-width: none !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

#creatorFilterWrap {
  max-width: none !important;
  width: min(260px, 100%) !important;
}

@media (min-width: 761px) {
  #sentOrdersSection .card {
    border: 1px solid #e6e6e1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #sentOrdersSection .orders-table {
    display: table !important;
    width: 100% !important;
    min-width: 1320px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border: 1px solid #e4e4df !important;
    white-space: normal !important;
    border-collapse: collapse !important;
  }

  #sentOrdersSection .orders-table thead {
    display: table-header-group !important;
  }

  #sentOrdersSection .orders-table tbody {
    display: table-row-group !important;
  }

  #sentOrdersSection .orders-table tr {
    display: table-row !important;
  }

  #sentOrdersSection .orders-table th,
  #sentOrdersSection .orders-table td {
    display: table-cell !important;
    overflow-wrap: anywhere;
    vertical-align: middle !important;
    border-bottom: 1px solid #ecece7 !important;
  }
}

#sentOrdersSection .orders-table th:nth-child(1),
#sentOrdersSection .orders-table td:nth-child(1) { width: 150px; }
#sentOrdersSection .orders-table th:nth-child(2),
#sentOrdersSection .orders-table td:nth-child(2) { width: 110px; }
#sentOrdersSection .orders-table th:nth-child(3),
#sentOrdersSection .orders-table td:nth-child(3) { width: 84px; }
#sentOrdersSection .orders-table th:nth-child(4),
#sentOrdersSection .orders-table td:nth-child(4) { width: 145px; }
#sentOrdersSection .orders-table th:nth-child(5),
#sentOrdersSection .orders-table td:nth-child(5) { width: 92px; }
#sentOrdersSection .orders-table th:nth-child(6),
#sentOrdersSection .orders-table td:nth-child(6) { width: 150px; }
#sentOrdersSection .orders-table th:nth-child(7),
#sentOrdersSection .orders-table td:nth-child(7) { width: 150px; }
#sentOrdersSection .orders-table th:nth-child(8),
#sentOrdersSection .orders-table td:nth-child(8) { width: 150px; }
#sentOrdersSection .orders-table th:nth-child(9),
#sentOrdersSection .orders-table td:nth-child(9) { width: 150px; }
#sentOrdersSection .orders-table th:nth-child(10),
#sentOrdersSection .orders-table td:nth-child(10) { width: 118px; }
#sentOrdersSection .orders-table th:nth-child(11),
#sentOrdersSection .orders-table td:nth-child(11) { width: 112px; }
#sentOrdersSection .orders-table th:nth-child(12),
#sentOrdersSection .orders-table td:nth-child(12) { width: 130px; }
#sentOrdersSection .orders-table th:nth-child(13),
#sentOrdersSection .orders-table td:nth-child(13) { width: 150px; }

#sentOrdersSection .orders-table td[data-label="Acción"] {
  display: table-cell !important;
  vertical-align: middle !important;
}

#sentOrdersSection .orders-table td[data-label="Acción"] .table-btn {
  display: block;
  width: 100%;
  margin: 0 0 7px !important;
  white-space: normal;
}

#sentOrdersSection .orders-table td[data-label="Acción"] .table-btn:last-child {
  margin-bottom: 0 !important;
}

#newOrderSection .card:first-child h2,
#newOrderSection .card:nth-child(2) h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

#newOrderSection .card:first-child h2::before,
#newOrderSection .card:nth-child(2) h2::before {
  content: none !important;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #fff4ed;
  border: 1px solid #ffd3c2;
}

#newOrderSection .card:nth-child(2) .orders-table {
  border: 0 !important;
  display: block !important;
  overflow: visible !important;
}

#newOrderSection .card:nth-child(2) .orders-table tbody {
  display: grid !important;
  gap: 10px;
}

#newOrderSection .card:nth-child(2) .orders-table tr {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#newOrderSection .card:nth-child(2) .orders-table td {
  padding: 0 !important;
  border: 0 !important;
}

#newOrderSection .card:nth-child(2) .orders-table td:first-child {
  font-weight: 850;
}

#newOrderSection .card:nth-child(2) .orders-table td:last-child {
  color: #ff5a1f;
  font-weight: 800;
}

#newOrderSection .primary-upload {
  min-height: 210px;
  margin-top: 28px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center !important;
}

#newOrderSection .primary-upload strong {
  font-size: 20px !important;
  margin-top: 8px;
}

#newOrderSection .primary-upload::before {
  content: none !important;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #fff4ed;
  border: 1px solid #ffd3c2;
}

#newOrderSection .compact-upload {
  margin-top: 12px;
}

#newOrderSection .section-icon,
#newOrderSection .row-icon,
#newOrderSection .upload-icon {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  color: #ff5a1f;
}

#newOrderSection .section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff4ed;
  border: 1px solid #ffd3c2;
}

#newOrderSection .row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-right: 12px;
  background: #fff7f2;
  border: 1px solid #ffe0d0;
  vertical-align: middle;
}

#newOrderSection .row-icon .btn-icon,
#newOrderSection .section-icon .btn-icon,
#newOrderSection .upload-icon .btn-icon {
  color: currentColor !important;
}

#newOrderSection .admin-sign-icon {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

#newOrderSection .civile-sign-icon {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

#newOrderSection .card:nth-child(2) .orders-table td:first-child {
  display: flex;
  align-items: center;
}

#newOrderSection .upload-icon {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #fff4ed;
  border: 1px solid #ffd3c2;
  margin: 0 auto 8px;
}

#newOrderSection .upload-icon .btn-icon {
  width: 30px !important;
  height: 30px !important;
}

.creation-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  margin: 8px 0 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.creation-mode-btn {
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 12px 16px;
  font-weight: 900;
  color: #6b7280;
  cursor: pointer;
}

.creation-mode-btn.active {
  background: #111827;
  color: #fff;
}

.generated-order-form {
  margin-bottom: 22px;
}

.generated-order-form .preview-header {
  align-items: start;
}

.generated-draft-feedback {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
  margin-top:8px;
  color:#6b7280;
  font-size:12px;
  font-weight:700;
}

.generated-draft-feedback[hidden] {
  display:none !important;
}

.generated-draft-feedback::before {
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#22a35a;
  box-shadow:0 0 0 4px rgba(34,163,90,.10);
}

.generated-draft-clear {
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex:0 0 26px;
  margin-left:2px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#8a919c;
  cursor:pointer;
}

.generated-draft-clear:hover {
  background:#fff1ed;
  color:#d94720;
}

.generated-draft-clear svg {
  width:14px;
  height:14px;
}

.generated-hidden-field {
  display: none !important;
}

.generated-simple-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: end;
}

.generated-items {
  margin: 26px 0 18px;
  padding-top: 22px;
  border-top: 1px solid #edf0f3;
}

.generated-item-row {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 140px 180px 190px 44px;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
}

.generated-item-row .field {
  margin-bottom: 0;
}

.generated-item-total {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-weight: 900;
  color: #ff5a1f;
  white-space: nowrap;
}

.generated-item-total.is-negative {
  color: #168451;
  border-color: #bfe7d1;
  background: #f2fbf6;
}

.generated-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

.generated-summary-grid .field {
  width: 100%;
  margin-bottom: 0;
}

#generatedNotes {
  width: 100% !important;
  max-width: none !important;
  min-height: 220px !important;
  height: 220px;
  resize: none !important;
}

.generated-total-box {
  align-self: stretch;
  min-height: 220px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: #fff;
}

.generated-total-box span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.generated-total-box strong {
  font-size: 26px;
  margin-bottom: 10px;
}

.generated-total-box strong:nth-of-type(2) {
  color: #ff5a1f;
}

#generatedUsdRateSource {
  color: #7a8290;
  font-size: 12px;
  font-weight: 800;
}

.generated-order-form .compact-upload {
  margin-top: 18px;
  min-height: 150px;
}

.smart-invoice-card {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #e7ebf2;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #fff7f2 100%);
}

.smart-invoice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.smart-invoice-head h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.smart-invoice-head p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
}

.smart-invoice-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.smart-invoice-status {
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.smart-invoice-result {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe8ff;
  border-radius: 14px;
  background: #f7fbff;
}

.smart-invoice-result strong {
  color: #111827;
}

.smart-invoice-result ul {
  margin: 0;
  padding-left: 18px;
  color: #5b6472;
}

.smart-invoice-result li + li {
  margin-top: 4px;
}

.team-logo-admin {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.team-logo-preview {
  width: 220px;
  height: 110px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fafafa;
  color: #6b7280;
  font-weight: 900;
}

.team-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

@media (max-width: 1180px) {
  #sentOrdersSection .card > div[style*="display:flex"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  main {
    max-width: 430px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .topbar,
  .preview-header {
    grid-template-columns: 1fr !important;
  }

  .layout,
  .layout.single {
    grid-template-columns: 1fr !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] {
    grid-template-columns: 1fr 52px !important;
  }

  #creatorFilterWrap {
    width: 100% !important;
  }

  #sentOrdersSection .orders-table,
  #sentOrdersSection .orders-table thead,
  #sentOrdersSection .orders-table tbody {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #sentOrdersSection .orders-table td[data-label="Acción"] {
    display: block !important;
  }

  .audit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .audit-pagination {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: center;
  }

  .creation-switch,
  .generated-item-row,
  .generated-order-form .layout,
  .generated-summary-grid,
  .team-logo-admin {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .team-logo-preview {
    width: 100%;
  }
}

/* ========================================
   TSIGNS ICON VISIBILITY FIX
======================================== */

svg.nav-icon,
svg.btn-icon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-item svg.nav-icon {
  color: #f8fafc !important;
}

.menu-item.active svg.nav-icon,
.menu-item:hover svg.nav-icon {
  color: #fff !important;
}

.btn svg.btn-icon,
.table-btn svg.btn-icon,
.mobile-bell svg.btn-icon,
.mobile-bottom-nav svg.btn-icon,
.mobile-menu-btn svg.btn-icon {
  color: currentColor !important;
}

.mobile-bell svg.btn-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  color: #111827 !important;
}

.mobile-bottom-nav svg.btn-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin-bottom: 2px;
}

.mobile-bottom-nav button.active svg.btn-icon,
.mobile-bottom-nav button:hover svg.btn-icon {
  color: #ff5a1f !important;
}

@media (max-width: 760px) {
  .mobile-bottom-nav button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ========================================
   ADMIN CANVAS WIDTH OVERRIDE
======================================== */

@media (min-width: 1051px) {
  body {
    background: #f7f7f5 !important;
  }

  .app {
    grid-template-columns: 286px minmax(0, 1fr) !important;
  }

  main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 28px !important;
  }

  #adminSection {
    width: 100% !important;
  }

  #adminSection .topbar,
  #adminSection .admin-panel.active {
    max-width: 1260px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #adminSection .admin-grid.admin-panel.active {
    max-width: 1260px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #adminSection .card {
    width: 100% !important;
  }

  #databaseAdminGrid > .card {
    padding: 30px !important;
  }
}

@media (min-width: 1051px) {
  main {
    padding: 24px 24px !important;
  }

  .topbar {
    min-height: 0 !important;
    margin-bottom: 14px !important;
  }

  .topbar h1 {
    font-size: 24px !important;
  }

  .subtitle {
    font-size: 13px !important;
  }

  .card {
    border-color: #e4e4df !important;
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.04) !important;
  }

  #sentOrdersSection .card {
    padding: 20px !important;
  }

  #sentOrdersSection .preview-header {
    margin-bottom: 14px !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] {
    margin-bottom: 16px !important;
  }

  .orders-summary {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .summary-card {
    min-height: 74px !important;
    padding: 14px !important;
  }

  .orders-table th {
    height: 42px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .orders-table td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #newOrderSection .layout {
    gap: 14px !important;
  }
}

/* ========================================
   TSIGNS SIMPLE PROFESSIONAL COMPACT PASS
======================================== */

:root {
  --app-bg: #f4f5f7;
  --app-panel: #ffffff;
  --app-ink: #14171f;
  --app-muted: #68707d;
  --app-line: #e2e4e8;
  --app-soft: #f8f9fb;
  --app-orange: #ff5a1f;
  --app-navy: #111827;
}

body {
  background: var(--app-bg) !important;
  color: var(--app-ink) !important;
}

.app {
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

.sidebar {
  padding: 18px !important;
  background: #10151d !important;
}

.logo {
  font-size: 30px !important;
  margin-bottom: 18px !important;
}

.user-box {
  padding: 12px !important;
  margin-bottom: 16px !important;
  border-radius: 12px !important;
}

.menu-item {
  min-height: 40px !important;
  padding: 9px 10px !important;
  margin-bottom: 4px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.btn.logout {
  min-height: 42px !important;
  margin-top: 14px !important;
}

main {
  max-width: none !important;
  width: 100% !important;
  padding: 18px 20px !important;
}

.section.active {
  width: 100% !important;
}

.topbar {
  min-height: 0 !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  align-items: center !important;
}

.topbar h1 {
  font-size: 22px !important;
  line-height: 1.15 !important;
  margin-bottom: 3px !important;
  letter-spacing: -0.02em !important;
}

.subtitle {
  font-size: 13px !important;
  color: var(--app-muted) !important;
}

.status-pill {
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  background: #fff !important;
  border: 1px solid var(--app-line) !important;
}

.layout,
.layout.single {
  grid-template-columns: minmax(360px, 470px) minmax(0, 1fr) !important;
  gap: 12px !important;
}

.card {
  padding: 18px !important;
  border-radius: 10px !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.035) !important;
  background: var(--app-panel) !important;
}

.card + .card {
  margin-top: 12px !important;
}

.card h2 {
  font-size: 17px !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

.card p {
  font-size: 12.5px !important;
  margin-bottom: 16px !important;
}

.field {
  margin-bottom: 12px !important;
}

.field label {
  margin-bottom: 6px !important;
  font-size: 12px !important;
  color: #3d4350 !important;
}

input,
select,
textarea {
  min-height: 42px !important;
  border-radius: 9px !important;
  border: 1px solid #dfe3e8 !important;
  background: #fff !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
}

textarea {
  line-height: 1.35 !important;
}

.btn,
.table-btn,
.creation-mode-btn {
  min-height: 40px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.btn {
  box-shadow: none !important;
}

.creation-switch {
  margin: 4px 0 12px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}

.creation-mode-btn {
  padding: 9px 12px !important;
}

#newOrderSection .primary-upload {
  min-height: 170px !important;
  margin-top: 14px !important;
}

#newOrderSection .card:nth-child(2) .orders-table tr {
  min-height: 52px !important;
  padding: 10px 12px !important;
}

.orders-summary {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.summary-card {
  min-height: 68px !important;
  padding: 12px !important;
  border-radius: 9px !important;
}

.summary-card span {
  font-size: 11px !important;
}

.summary-card strong {
  font-size: 26px !important;
}

#sentOrdersSection .card {
  padding: 14px !important;
}

#sentOrdersSection .preview-header {
  margin-bottom: 10px !important;
}

#sentOrdersSection .card > div[style*="display:flex"] {
  margin-bottom: 12px !important;
  gap: 8px !important;
}

.orders-table {
  border-radius: 9px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.orders-table th {
  height: 38px !important;
  padding: 9px 10px !important;
  background: #f3f4f6 !important;
  color: #68707d !important;
  font-size: 11px !important;
}

.orders-table td {
  padding: 11px 10px !important;
  font-size: 13px !important;
}

.pill {
  border-radius: 999px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}

.app-modal-card {
  width: min(520px, calc(100vw - 32px)) !important;
  padding: 28px !important;
  border-radius: 14px !important;
  text-align: left !important;
}

.app-modal-icon {
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 14px !important;
  font-size: 22px !important;
}

.app-modal-card h2 {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.app-modal-card p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.app-modal-actions {
  margin-top: 22px !important;
}

.generated-simple-grid {
  gap: 10px !important;
}

.generated-items {
  margin-top: 18px !important;
  padding-top: 16px !important;
}

.generated-item-row {
  padding: 10px !important;
  border-radius: 9px !important;
}

.generated-summary-grid {
  gap: 12px !important;
}

#generatedNotes,
.generated-total-box {
  min-height: 170px !important;
  height: auto !important;
}

.orders-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid #e5e7eb;
  scrollbar-gutter: stable;
}

.orders-table-scroll::-webkit-scrollbar {
  height: 12px;
}

.orders-table-scroll::-webkit-scrollbar-track {
  background: #eef0f3;
}

.orders-table-scroll::-webkit-scrollbar-thumb {
  background: #c3c8d0;
  border-radius: 999px;
  border: 3px solid #eef0f3;
}

.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.orders-pagination-info,
#ordersPageLabel {
  color: #68707d;
  font-size: 12px;
  font-weight: 750;
}

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

.dashboard-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(140px, .7fr)) repeat(2, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-toolbar .field {
  margin-bottom: 0;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-grid .card {
  margin-top: 0;
}

.dashboard-pie-card {
  grid-column: span 2;
}

.dashboard-bars {
  display: grid;
  gap: 10px;
}

.dashboard-bar-row {
  border: 1px solid #edf0f4;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
}

.dashboard-bar-head,
.dashboard-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.dashboard-bar-head strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
}

.dashboard-bar-head span {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-bar-track {
  height: 8px;
  background: #f0f2f5;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 7px;
}

.dashboard-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5a1f, #ff8a54);
  border-radius: 999px;
}

.dashboard-bar-meta {
  color: #68707d;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-empty {
  border: 1px dashed #d9dde5;
  border-radius: 10px;
  color: #68707d;
  padding: 18px;
  font-weight: 800;
  background: #fbfcfd;
}

.dashboard-pie-wrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin: 0 auto;
}

.dashboard-pie {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: #f0f2f5;
  box-shadow: inset 0 0 0 26px #fff;
}

.dashboard-pie-legend {
  display: grid;
  gap: 8px;
}

.dashboard-pie-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #343b46;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-pie-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dashboard-provider-detail {
  display: none;
  margin-top: 12px;
}

.dashboard-provider-detail.active {
  display: block;
}

.dashboard-trust-detail-card {
  margin-bottom: 12px;
}

.dashboard-trust-details {
  display: grid;
  gap: 10px;
}

.dashboard-trust-group {
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.dashboard-trust-group summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.dashboard-trust-group summary::-webkit-details-marker {
  display: none;
}

.dashboard-trust-title {
  display: grid;
  gap: 3px;
}

.dashboard-trust-title strong {
  font-size: 15px;
  color: #10131a;
}

.dashboard-trust-title span,
.dashboard-order-meta {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-trust-amount {
  text-align: right;
  display: grid;
  gap: 2px;
}

.dashboard-trust-amount strong {
  color: #10131a;
  font-size: 15px;
}

.dashboard-trust-amount span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-chevron {
  width: 28px;
  height: 28px;
  border: 1px solid #e8ebf0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #667085;
  transition: transform .18s ease;
}

.dashboard-trust-group[open] .dashboard-chevron {
  transform: rotate(180deg);
}

.dashboard-order-list {
  display: grid;
  border-top: 1px solid #edf0f4;
}

.dashboard-order-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, .9fr) minmax(130px, .9fr) minmax(130px, .9fr) minmax(120px, .75fr) minmax(118px, .7fr);
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid #f0f2f5;
}

.dashboard-order-row:first-child {
  border-top: 0;
}

.dashboard-order-main {
  display: grid;
  gap: 3px;
}

.dashboard-order-main strong {
  color: #10131a;
  font-size: 13px;
}

.dashboard-order-provider {
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-order-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-order-cell-label {
  color: #98a2b3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dashboard-order-cell-value {
  color: #374151;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.dashboard-order-amount {
  text-align: right;
  font-weight: 900;
  color: #ff5a1f;
  white-space: nowrap;
}

.dashboard-order-usd {
  text-align: right;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-order-method {
  justify-self: end;
  border: 1px solid #edf0f4;
  border-radius: 999px;
  padding: 6px 9px;
  color: #374151;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  background: #fbfcfd;
}

#usersPanel .tools {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: #f8f9fb !important;
  border: 1px solid #edf0f4 !important;
}

#usersPanel .tools label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 9px 10px;
  border: 1px solid #e5e8ee;
  border-radius: 9px;
  background: #fff;
  color: #343b46;
  font-size: 12px;
  font-weight: 850;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border: 1.5px solid #c9ced8 !important;
  border-radius: 5px !important;
  background: #fff !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background: #ff5a1f !important;
  border-color: #ff5a1f !important;
}

input[type="checkbox"]:checked::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  margin-top: -2px;
}

#adminUsersTableBody input[type="checkbox"] {
  margin: 0 auto;
}

#adminUsersTableBody input[type="file"] {
  font-size: 12px;
  padding: 9px !important;
  border-radius: 8px;
}

#adminUsersTableBody td {
  vertical-align: middle;
}

@media (max-width: 1100px) {
  .dashboard-kpis,
  .dashboard-grid,
  .dashboard-pie-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-order-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #usersPanel .tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .dashboard-toolbar,
  .dashboard-kpis,
  .dashboard-grid,
  .dashboard-pie-wrap,
  .dashboard-order-row,
  .dashboard-trust-group summary,
  #usersPanel .tools {
    grid-template-columns: 1fr !important;
  }

  .dashboard-trust-amount,
  .dashboard-order-amount,
  .dashboard-order-usd {
    text-align: left;
  }

  .dashboard-order-method {
    justify-self: start;
  }
}

#adminSection .topbar,
#adminSection .admin-panel.active {
  max-width: none !important;
}

#adminSection .admin-grid.admin-panel.active,
#databaseAdminGrid {
  max-width: none !important;
}

@media (min-width: 1500px) {
  .layout,
  .layout.single {
    grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) !important;
  }

  #sentOrdersSection .orders-table {
    min-width: 1400px !important;
  }
}

@media (max-width: 760px) {
  main {
    padding: 76px 12px 88px !important;
  }

  .card {
    padding: 14px !important;
  }

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

  .app-modal-card {
    text-align: center !important;
  }

  .app-modal-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ========================================
   LEBANE-INSPIRED OPERATIONS UI
   Clean data app, tsigns palette
======================================== */

@media (min-width: 761px) {
  :root {
    --ops-bg: #f3f4f6;
    --ops-sidebar: #ffffff;
    --ops-panel: #ffffff;
    --ops-hover: #f6f7f9;
    --ops-line: #e3e6eb;
    --ops-line-soft: #eef0f3;
    --ops-text: #171a22;
    --ops-muted: #747b88;
    --ops-muted-2: #9aa1ad;
    --ops-orange: #ff5a1f;
    --ops-orange-soft: #fff0e8;
    --ops-blue-soft: #edf2ff;
    --ops-blue: #315de8;
    --ops-green: #1fb767;
  }

  body {
    background: var(--ops-bg) !important;
    color: var(--ops-text) !important;
    font-size: 13px !important;
  }

  .app {
    grid-template-columns: 248px minmax(0, 1fr) !important;
    background: var(--ops-bg) !important;
  }

  .sidebar {
    background: var(--ops-sidebar) !important;
    color: var(--ops-text) !important;
    border-right: 1px solid var(--ops-line) !important;
    padding: 14px 12px !important;
    box-shadow: none !important;
  }

  .logo {
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    padding: 0 8px !important;
    color: #111827 !important;
    font-size: 27px !important;
  }

  .user-box {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px !important;
    margin: 0 0 12px !important;
    background: #fafbfc !important;
    border: 1px solid var(--ops-line) !important;
    border-radius: 10px !important;
    color: var(--ops-text) !important;
  }

  .user-box::before {
    width: 34px !important;
    height: 34px !important;
    background: var(--ops-orange-soft) !important;
    color: var(--ops-orange) !important;
    border: 1px solid #ffd8c5 !important;
    font-size: 14px !important;
  }

  .user-box strong {
    color: var(--ops-text) !important;
    font-size: 13px !important;
  }

  .user-box span {
    color: var(--ops-muted) !important;
    font-size: 12px !important;
  }

  .menu-item {
    min-height: 34px !important;
    margin: 1px 0 !important;
    padding: 7px 8px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    color: #5f6673 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  .menu-item svg.nav-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    color: #8b93a1 !important;
  }

  .menu-item:hover {
    background: var(--ops-hover) !important;
    color: var(--ops-text) !important;
  }

  .menu-item.active {
    background: var(--ops-orange-soft) !important;
    color: var(--ops-orange) !important;
    box-shadow: inset 3px 0 0 var(--ops-orange) !important;
  }

  .menu-item.active svg.nav-icon,
  .menu-item:hover svg.nav-icon {
    color: currentColor !important;
  }

  .btn.logout {
    min-height: 36px !important;
    margin-top: 10px !important;
    background: #fff !important;
    border: 1px solid var(--ops-line) !important;
    color: #424957 !important;
    box-shadow: none !important;
  }

  .sidebar-footer {
    left: 14px !important;
    right: 14px !important;
    bottom: 16px !important;
    color: #9aa1ad !important;
    font-size: 12px !important;
  }

  main {
    padding: 0 !important;
    background: var(--ops-bg) !important;
    overflow: hidden !important;
  }

  .section.active {
    min-height: 100vh !important;
    padding: 14px 16px 22px !important;
  }

  .topbar {
    min-height: 46px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .topbar h1 {
    font-size: 20px !important;
    font-weight: 780 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
  }

  .subtitle {
    margin-top: 3px !important;
    font-size: 12px !important;
    color: var(--ops-muted) !important;
  }

  .status-pill {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ops-line) !important;
    background: #fff !important;
    color: #464d5b !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  .creation-switch {
    width: fit-content !important;
    margin: 0 0 10px !important;
    padding: 3px !important;
    gap: 3px !important;
    border: 1px solid var(--ops-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
  }

  .creation-mode-btn {
    min-height: 32px !important;
    padding: 7px 12px !important;
    border-radius: 7px !important;
    color: #646b78 !important;
    font-size: 12px !important;
  }

  .creation-mode-btn.active {
    background: #111827 !important;
    color: #fff !important;
  }

  .layout,
  .layout.single {
    grid-template-columns: minmax(340px, 455px) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .card {
    padding: 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ops-line) !important;
    background: var(--ops-panel) !important;
    box-shadow: none !important;
  }

  .card + .card {
    margin-top: 10px !important;
  }

  .card h2 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 3px !important;
    font-weight: 780 !important;
  }

  .card p {
    margin: 0 0 12px !important;
    font-size: 12px !important;
    color: var(--ops-muted) !important;
  }

  .field {
    margin-bottom: 9px !important;
  }

  .field label {
    margin-bottom: 5px !important;
    color: #4b5260 !important;
    font-size: 11px !important;
    font-weight: 740 !important;
  }

  input,
  select,
  textarea {
    min-height: 36px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    border: 1px solid #dfe3e8 !important;
    background: #fff !important;
    font-size: 13px !important;
    color: var(--ops-text) !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #ffb693 !important;
    box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12) !important;
    outline: none !important;
  }

  .btn,
  .table-btn {
    min-height: 34px !important;
    padding: 8px 11px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    box-shadow: none !important;
  }

  .btn {
    background: var(--ops-orange) !important;
    color: #fff !important;
    border: 1px solid var(--ops-orange) !important;
  }

  .btn.secondary,
  .table-btn {
    background: #fff !important;
    color: #424957 !important;
    border: 1px solid var(--ops-line) !important;
  }

  .table-btn.combined-pdf-btn {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
  }

  .upload-area {
    border: 1px dashed #cfd5dd !important;
    background: #fbfcfd !important;
    border-radius: 8px !important;
  }

  #newOrderSection .primary-upload {
    min-height: 148px !important;
    margin-top: 10px !important;
  }

  #newOrderSection .primary-upload strong {
    font-size: 16px !important;
  }

  #newOrderSection .upload-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 6px !important;
    background: var(--ops-orange-soft) !important;
  }

  #newOrderSection .upload-icon .btn-icon {
    width: 23px !important;
    height: 23px !important;
  }

  #newOrderSection .card:nth-child(2) .orders-table tbody {
    gap: 7px !important;
  }

  #newOrderSection .card:nth-child(2) .orders-table tr {
    min-height: 48px !important;
    padding: 9px 10px !important;
    border-radius: 7px !important;
  }

  #newOrderSection .row-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    margin-right: 9px !important;
  }

  .orders-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }

  .summary-card {
    min-height: 54px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--ops-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .summary-card span {
    color: var(--ops-muted) !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
  }

  .summary-card strong {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  #sentOrdersSection .card {
    padding: 0 !important;
    overflow: hidden !important;
  }

  #sentOrdersSection .preview-header {
    padding: 12px 12px 0 !important;
    margin: 0 !important;
  }

  #sentOrdersSection .card > div[style*="display:flex"] {
    padding: 10px 12px !important;
    margin: 0 !important;
    gap: 7px !important;
    background: #f7f8fa !important;
    border-top: 1px solid var(--ops-line-soft) !important;
    border-bottom: 1px solid var(--ops-line) !important;
  }

  #sentOrdersSection .orders-table {
    border: 0 !important;
    border-radius: 0 !important;
    min-width: 1560px !important;
  }

  .orders-table th {
    height: 36px !important;
    padding: 8px 10px !important;
    background: #f8f9fb !important;
    border-bottom: 1px solid var(--ops-line) !important;
    color: #7a818e !important;
    font-size: 10.5px !important;
    font-weight: 780 !important;
  }

  .orders-table td {
    padding: 10px !important;
    border-bottom: 1px solid var(--ops-line-soft) !important;
    color: #252a35 !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  .orders-table tbody tr:hover td {
    background: #fbfcff !important;
  }

  .pill {
    padding: 4px 7px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 780 !important;
  }

  .pill.green {
    background: #eaf8f0 !important;
    color: var(--ops-green) !important;
  }

  .pill.red {
    background: #fff0ee !important;
    color: #c2412d !important;
  }

  .pill.blue {
    background: var(--ops-blue-soft) !important;
    color: var(--ops-blue) !important;
  }

  .generated-simple-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .generated-items {
    margin: 14px 0 12px !important;
    padding-top: 12px !important;
  }

  .generated-item-row {
    grid-template-columns: minmax(260px, 1fr) 112px 150px 150px 38px !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 8px !important;
  }

  .generated-item-total {
    height: 36px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
  }

  .generated-summary-grid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  #generatedNotes,
  .generated-total-box {
    min-height: 145px !important;
    height: auto !important;
  }

  .generated-total-box {
    padding: 14px !important;
    border-radius: 8px !important;
    align-content: start !important;
    overflow: visible !important;
  }

  .generated-total-box strong {
    font-size: 21px !important;
  }

  #adminSection .card,
  #databaseAdminGrid > .card {
    padding: 14px !important;
  }

  .admin-grid.admin-panel.active,
  #databaseAdminGrid {
    gap: 10px !important;
  }

  .admin-inner-table {
    margin-top: 10px !important;
  }

  .app-modal-backdrop {
    backdrop-filter: blur(2px) !important;
  }

  .app-modal-card {
    width: min(460px, calc(100vw - 32px)) !important;
    padding: 22px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ops-line) !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18) !important;
  }

  .app-modal-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 12px !important;
    background: var(--ops-orange-soft) !important;
    color: var(--ops-orange) !important;
  }

  .app-modal-card h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  .app-modal-card p {
    font-size: 14px !important;
    color: #5e6571 !important;
  }
}

@media (min-width: 1400px) {
  .layout,
  .layout.single {
    grid-template-columns: minmax(380px, 500px) minmax(0, 1fr) !important;
  }

  .section.active {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 760px) {
  .mobile-app-header {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .mobile-brand {
    color: #111827 !important;
  }

  .card {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .btn,
  .table-btn {
    border-radius: 9px !important;
  }
}

/* TSIGNS RESPONSIVE PRODUCTION SYSTEM
   Final layer: keeps the existing identity, but normalizes layout behavior
   across desktop, notebook, tablet and mobile. */
:root {
  --ui-bg: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #fbfbfc;
  --ui-text: #10131a;
  --ui-muted: #667085;
  --ui-border: #e6e8ec;
  --ui-border-strong: #d7dbe2;
  --ui-orange: #ff5a1f;
  --ui-radius: 12px;
  --ui-radius-sm: 8px;
  --ui-gap: clamp(12px, 1.4vw, 20px);
  --ui-page-pad: clamp(16px, 2.1vw, 32px);
  --ui-sidebar: 272px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

textarea {
  resize: vertical;
}

.app {
  width: 100%;
  min-height: 100dvh;
  grid-template-columns: var(--ui-sidebar) minmax(0, 1fr) !important;
  background: var(--ui-bg) !important;
}

body.app-authenticated .app {
  display: grid !important;
}

.sidebar {
  width: var(--ui-sidebar) !important;
  height: 100dvh !important;
  position: sticky !important;
  top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-right: 1px solid rgba(17, 24, 39, 0.08) !important;
}

main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: var(--ui-page-pad) !important;
  overflow-x: hidden !important;
}

.section,
.section.active {
  width: 100%;
  min-width: 0;
}

.section.active {
  display: block;
}

.topbar,
.preview-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: var(--ui-gap) !important;
  align-items: start !important;
}

.topbar h1,
.preview-header h2,
.card h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card,
.upload-area,
.app-modal-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.04) !important;
}

.card {
  width: 100%;
  overflow: hidden;
}

.layout,
.layout.single,
.generated-simple-grid,
.dashboard-filter-grid,
.admin-dashboard-grid,
.admin-section-grid,
.orders-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: var(--ui-gap) !important;
  align-items: start !important;
}

.layout.single {
  grid-template-columns: minmax(0, 1fr) !important;
}

.field {
  width: 100%;
}

.field input,
.field select,
.field textarea,
.search-input,
.app-modal-card input,
.app-modal-card textarea {
  width: 100% !important;
  min-height: 42px;
  border-radius: var(--ui-radius-sm) !important;
}

.btn,
.table-btn,
.tool-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.permission-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
}

.permission-toggle {
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  line-height: 1.2;
}

.permission-toggle input[type="checkbox"],
.orders-table input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  accent-color: var(--ui-orange);
}

.system-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}

.system-status-card,
.system-list-item {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
  padding: 16px;
}

.system-status-card span,
.system-list-item span {
  display: block;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.system-status-card strong,
.system-list-item strong {
  display: block;
  margin-top: 6px;
  color: var(--ui-ink);
  font-size: 18px;
}

.system-list {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.compact-header {
  margin-top: 10px;
}

.compact-header h3 {
  margin: 0;
  font-size: 18px;
}

.generated-order-form {
  max-width: none !important;
}

#externalOrderForm {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr) !important;
  gap: 0 !important;
  width: 100%;
  padding: clamp(14px, 1.5vw, 20px) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.04) !important;
}

#externalOrderForm > .card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#externalOrderForm > .card:first-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 12px;
  padding-right: clamp(14px, 1.5vw, 20px) !important;
  border-right: 1px solid var(--ui-border) !important;
}

#externalOrderForm > .card:nth-child(2) {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-left: clamp(14px, 1.5vw, 20px) !important;
}

#externalOrderForm > .card:first-child h2,
#externalOrderForm > .card:first-child p,
#externalOrderForm > .card:first-child .toggle-wrap,
#externalOrderForm > .card:first-child .order-progress-card,
#externalOrderForm > .card:first-child .submit-progress,
#externalOrderForm > .card:first-child #openEditorBtn,
#externalOrderForm > .card:first-child #sendBtn,
#externalOrderForm > .card:first-child #signatureStatusHint {
  grid-column: 1 / -1;
}

#externalOrderForm h2 {
  margin-bottom: 2px !important;
}

#externalOrderForm p {
  margin-bottom: 6px !important;
}

#externalOrderForm .field {
  margin-bottom: 0 !important;
}

#externalOrderForm .auto-reference-preview,
#externalOrderForm input,
#externalOrderForm select {
  min-height: 40px !important;
}

.order-progress-card,
.submit-progress {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, #fff 0%, #fbfbfc 100%);
}

.order-progress-card {
  display: none !important;
}

.generated-progress {
  margin-bottom: 18px;
}

.submit-progress {
  margin: 4px 0 8px;
  border-color: #cfe0ff;
  background: #f4f8ff;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-header strong {
  color: var(--ui-text);
  font-size: 13px;
}

.progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f4;
}

.progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5a1f 0%, #111827 52%, #0f8a45 100%);
  transition: width .28s ease;
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 9px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: #fff;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 850;
}

.progress-step::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c7cdd6;
}

.progress-step.done {
  border-color: #bee8cc;
  color: #0f7a3d;
  background: #f2fbf5;
}

.progress-step.done::before {
  background: #0f8a45;
}

.btn:disabled,
.table-btn:disabled,
.tool-btn:disabled {
  cursor: wait;
  opacity: .68;
  transform: none !important;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin .75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#externalOrderForm .orders-table {
  min-width: 0 !important;
  display: grid !important;
}

#externalOrderForm .orders-table tbody {
  display: grid !important;
  gap: 8px;
}

#externalOrderForm .orders-table tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 12px;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
}

#externalOrderForm .orders-table td {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#externalOrderForm .orders-table td:last-child {
  justify-content: flex-end;
  color: var(--ui-orange);
  font-weight: 900;
  white-space: nowrap;
}

#externalOrderForm .primary-upload {
  min-height: 170px !important;
  padding: 18px !important;
}

#externalOrderForm .compact-upload {
  min-height: 0 !important;
  padding: 14px !important;
}

.generated-simple-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
}

.generated-items {
  overflow: visible !important;
}

.generated-item-row {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(240px, 2fr) minmax(96px, .45fr) minmax(150px, .75fr) minmax(150px, .75fr) 42px !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
}

.generated-item-total {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #fff;
}

.generated-summary-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) !important;
  gap: var(--ui-gap) !important;
  align-items: stretch !important;
}

#generatedNotes {
  min-height: 170px !important;
  resize: vertical;
}

.generated-total-box {
  width: 100%;
  min-height: 0 !important;
  align-self: stretch;
}

.review-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
  gap: var(--ui-gap) !important;
}

.review-pdf,
.editor-viewer {
  min-width: 0 !important;
  overflow: auto !important;
}

.editor-viewer {
  max-width: 100%;
}

.pdf-render-wrapper,
#pdfCanvas {
  max-width: none !important;
}

.orders-table-scroll,
#sentOrdersSection .card,
#finishedOrdersSection .card,
#adminSection .card,
.review-side {
  overflow-x: auto;
  scrollbar-width: thin;
}

.orders-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
}

#sentOrdersSection .orders-table,
#finishedOrdersSection .orders-table {
  min-width: 1240px !important;
}

#adminSection .orders-table,
.admin-inner-table {
  min-width: 980px !important;
}

.orders-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f3f4f6 !important;
}

.orders-table th,
.orders-table td {
  vertical-align: middle !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

.orders-table td[data-label="Acción"] {
  min-width: 140px;
}

.mobile-sidebar-overlay {
  display: none;
}

@media (max-width: 1180px) {
  .app {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar {
    position: fixed !important;
    z-index: 10020 !important;
    inset: 0 auto 0 0 !important;
    display: block !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    box-shadow: 18px 0 60px rgba(15, 23, 42, .24) !important;
  }

  body.sidebar-open .sidebar,
  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  .mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: block;
    pointer-events: none;
    opacity: 0;
    background: rgba(15, 23, 42, .42);
    transition: opacity .2s ease;
  }

  body.sidebar-open .mobile-sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }

  main {
    padding: clamp(18px, 2.6vw, 28px) !important;
  }

  .review-content,
  .generated-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #externalOrderForm {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #externalOrderForm > .card:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
  }

  #externalOrderForm > .card:nth-child(2) {
    padding-left: 0 !important;
    padding-top: 16px !important;
  }

  .generated-item-row {
    grid-template-columns: minmax(220px, 1.4fr) minmax(100px, .5fr) minmax(140px, .7fr) minmax(140px, .7fr) 42px !important;
  }
}

@media (max-width: 760px) {
  body {
    background: var(--ui-bg) !important;
  }

  main {
    padding: 76px 14px 92px !important;
  }

  .mobile-app-header {
    display: grid !important;
  }

  .topbar,
  .preview-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .preview-header .btn,
  .topbar .btn {
    width: 100%;
  }

  .layout,
  .generated-simple-grid,
  .dashboard-filter-grid,
  .orders-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card {
    padding: 16px !important;
  }

  .generated-item-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #externalOrderForm > .card:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #externalOrderForm .orders-table tr {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #externalOrderForm .orders-table td:last-child {
    justify-content: flex-start;
  }

  .generated-remove-item {
    width: 100%;
  }

  .generated-item-total {
    justify-content: flex-start;
  }

  #generatedNotes {
    min-height: 140px !important;
  }

  .orders-table {
    min-width: 0 !important;
  }

  #sentOrdersSection .orders-table,
  #finishedOrdersSection .orders-table,
  #adminSection .orders-table,
  .admin-inner-table {
    min-width: 0 !important;
  }

  .orders-table,
  .orders-table tbody,
  .orders-table tr,
  .orders-table td {
    display: block !important;
    width: 100% !important;
  }

  .orders-table thead {
    display: none !important;
  }

  .orders-table tr {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: #fff !important;
  }

  .orders-table td {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 32px !important;
    padding: 7px 0 !important;
    border: 0 !important;
  }

  .orders-table td::before {
    content: attr(data-label);
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .orders-table td[data-label="Acción"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .orders-table td[data-label="Acción"]::before {
    display: none;
  }

  .orders-table td[data-label="Acción"] .table-btn {
    width: 100%;
  }

  .review-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .review-pdf {
    min-height: 58dvh;
  }

  .app-modal-card {
    width: min(92vw, 520px) !important;
    padding: 24px !important;
  }
}

/* Final UX hardening: keep the desktop sidebar full-height and remove any
   legacy Civile toggle if an older cached DOM ever survives a refresh. */
html,
body,
.app {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

#useSecondSigner,
.toggle-wrap:has(#useSecondSigner) {
  display: none !important;
}

@media (min-width: 1181px) {
  body.app-authenticated .app {
    display: block !important;
    min-height: 100dvh !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--ui-sidebar) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 28px !important;
  }

  .sidebar-footer {
    position: static !important;
    margin-top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  main {
    margin-left: var(--ui-sidebar) !important;
    min-height: 100dvh !important;
  }
}

/* Final layout polish for the order forms. */
@media (min-width: 1181px) {
  main {
    width: calc(100vw - var(--ui-sidebar)) !important;
    max-width: calc(100vw - var(--ui-sidebar)) !important;
  }
}

#newOrderSection,
#generatedOrderForm,
#externalOrderForm {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#generatedOrderForm {
  padding: 18px !important;
}

#generatedOrderForm .preview-header,
#generatedOrderForm .generated-items,
#generatedOrderForm .generated-summary-grid,
#generatedOrderForm .compact-upload {
  max-width: 100% !important;
}

.generated-simple-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.generated-simple-grid > .field {
  min-width: 0 !important;
}

.generated-simple-grid .generated-hidden-field {
  display: none !important;
}

.generated-item-row {
  grid-template-columns:
    minmax(240px, 1fr)
    minmax(96px, 120px)
    minmax(150px, 180px)
    minmax(130px, 160px)
    42px !important;
}

.generated-summary-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) !important;
}

@media (min-width: 761px) {
  #externalOrderForm > .card:first-child .field:has(#signerOneEmail),
  #externalOrderForm > .card:first-child #secondSignerField {
    grid-column: auto !important;
  }
}

@media (max-width: 760px) {
  #generatedOrderForm {
    padding: 14px !important;
  }

  .generated-summary-grid,
  .generated-item-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Financial dashboard refresh */
#dashboardSection {
  color: #08111f;
}

.dashboard-hero {
  align-items: center;
  margin-bottom: 18px;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-date-pill {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.dashboard-toolbar {
  grid-template-columns: minmax(280px, 1.35fr) minmax(160px, .65fr) minmax(160px, .65fr) !important;
  align-items: end;
  padding: 14px !important;
  margin-bottom: 18px !important;
}

.dashboard-secondary-filter {
  display: none !important;
}

.dashboard-kpis {
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.dashboard-kpi-card {
  position: relative;
  min-height: 138px;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  overflow: hidden;
  padding: 24px !important;
  border-radius: 12px !important;
  border-color: #e7ebf1 !important;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.92), transparent 30%),
    #fff !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .07) !important;
}

.dashboard-kpi-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.dashboard-kpi-orange .dashboard-kpi-icon { background: linear-gradient(135deg, #ff5a1f, #ff9a62); }
.dashboard-kpi-violet .dashboard-kpi-icon { background: linear-gradient(135deg, #7865ff, #a990ff); }
.dashboard-kpi-blue .dashboard-kpi-icon { background: linear-gradient(135deg, #1677ff, #62a5ff); font-size: 13px; }
.dashboard-kpi-green .dashboard-kpi-icon { background: linear-gradient(135deg, #4caf59, #7dd38c); }

.dashboard-kpi-card span {
  display: block;
  color: #657083;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.dashboard-kpi-card strong {
  display: block;
  margin-top: 5px;
  color: #0f172a !important;
  font-size: clamp(23px, 2vw, 32px) !important;
  line-height: 1.05;
  letter-spacing: 0;
}

.dashboard-kpi-card em {
  display: block;
  margin-top: 14px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.dashboard-sparkline {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 82px;
  height: 34px;
  opacity: .86;
  background:
    linear-gradient(135deg, transparent 38%, currentColor 39% 42%, transparent 43%),
    linear-gradient(45deg, transparent 58%, currentColor 59% 62%, transparent 63%);
  color: #ff5a1f;
}

.dashboard-kpi-violet .dashboard-sparkline { color: #7865ff; }
.dashboard-kpi-blue .dashboard-sparkline { color: #1677ff; }
.dashboard-kpi-green .dashboard-sparkline { color: #4caf59; }

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, .95fr);
  gap: 18px;
  align-items: start;
}

.dashboard-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .7fr) minmax(300px, .7fr);
  gap: 18px;
  margin-top: 18px;
}

.dashboard-main-grid > .card,
.dashboard-lower-grid > .card,
.dashboard-toolbar {
  border-radius: 14px !important;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .07) !important;
}

.dashboard-pie-card {
  grid-column: auto !important;
}

.dashboard-pie-wrap {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
  max-width: none !important;
}

.dashboard-pie {
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: none !important;
}

.dashboard-pie::after {
  content: "";
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .04);
}

.dashboard-pie-center {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: #0f172a;
  font-weight: 900;
}

.dashboard-pie-center span,
.dashboard-pie-center em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.dashboard-pie-center strong {
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1;
}

.dashboard-pie-legend-row {
  grid-template-columns: 12px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 7px 0;
  font-size: 13px !important;
}

.dashboard-pie-legend-row small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.dashboard-insight-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #ffd0b8;
  border-radius: 12px;
  background: #fff7f1;
  color: #9a3412;
  font-weight: 850;
}

.dashboard-trust-group {
  border-radius: 12px !important;
}

.dashboard-trust-title {
  position: relative;
  padding-left: 52px;
}

.dashboard-trust-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  transform: translateY(-50%);
  background: #fff3ed;
  border: 1px solid #ffd3c2;
}

.dashboard-trust-title::after {
  content: "▥";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff5a1f;
  font-size: 17px;
  font-weight: 950;
}

.dashboard-order-list::before {
  content: none;
}

.dashboard-order-head {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(120px, .72fr) minmax(130px, .85fr) minmax(120px, .8fr) minmax(100px, .65fr) minmax(128px, .8fr) minmax(112px, .65fr);
  gap: 12px;
  padding: 14px 16px 10px;
  color: #667085;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-top: 1px solid #edf0f4;
}

.dashboard-order-row {
  grid-template-columns: minmax(120px, .75fr) minmax(120px, .72fr) minmax(130px, .85fr) minmax(120px, .8fr) minmax(100px, .65fr) minmax(128px, .8fr) minmax(112px, .65fr) !important;
}

.dashboard-order-cell-label {
  display: none;
}

.dashboard-order-method {
  background: #f4f6f9;
}

.dashboard-category-pill {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #ffe1d2;
  color: #9a3412;
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.dashboard-evolution-chart {
  min-height: 250px;
  display: grid;
  align-items: end;
}

.dashboard-evolution-chart svg {
  width: 100%;
  min-height: 230px;
  overflow: visible;
}

.dashboard-top-providers,
.dashboard-insights {
  display: grid;
  gap: 18px;
}

.dashboard-provider-row {
  display: grid;
  gap: 8px;
}

.dashboard-provider-row-header,
.dashboard-insight-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.dashboard-provider-row strong,
.dashboard-insight-row strong {
  color: #0f172a;
  font-size: 14px;
}

.dashboard-provider-track {
  height: 8px;
  border-radius: 999px;
  background: #edf1f5;
  overflow: hidden;
}

.dashboard-provider-fill {
  height: 100%;
  border-radius: 999px;
  background: #ff5a1f;
}

.dashboard-provider-meta,
.dashboard-insight-row p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-insight-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #fff3ed;
  color: #ff5a1f;
  font-weight: 950;
}

@media (max-width: 1380px) {
  .dashboard-kpis,
  .dashboard-lower-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-insights-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1080px) {
  .dashboard-main-grid,
  .dashboard-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .dashboard-hero,
  .dashboard-actions,
  .dashboard-kpis,
  .dashboard-main-grid,
  .dashboard-lower-grid,
  .dashboard-pie-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-actions {
    justify-content: stretch;
  }

  .dashboard-date-pill,
  .dashboard-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .dashboard-order-list::before {
    content: none;
  }

  .dashboard-order-head {
    display: none;
  }

  .dashboard-order-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-order-cell-label {
    display: block;
  }
}

/* Final readability and admin user cards. */
body {
  font-size: 16px !important;
}

.subtitle,
.card p,
.hint,
.toast-message {
  font-size: 15px !important;
}

label {
  color: #353a48 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

input,
select,
textarea {
  min-height: 46px !important;
  font-size: 16px !important;
  border-color: #d9dde5 !important;
}

input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
}

.field input,
.field select,
.field textarea,
.auto-reference-preview {
  background: #fff !important;
  border: 1.5px solid #dde1e8 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
}

.field:focus-within label {
  color: #ff5a1f !important;
}

.btn,
.table-btn,
.tool-btn,
.creation-mode-btn {
  font-size: 15px !important;
}

.admin-users-board {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.admin-users-empty {
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-muted);
  background: #fff;
  font-weight: 800;
}

.admin-user-card {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.55fr) minmax(230px, .65fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

.admin-user-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.admin-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #fff2eb;
  color: #ff5a1f;
  font-size: 18px;
  font-weight: 950;
  border: 1px solid #ffd9ca;
}

.admin-user-title {
  min-width: 0;
}

.admin-user-title strong {
  display: block;
  color: var(--ui-text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-title span {
  display: block;
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-fields {
  display: grid;
  gap: 10px;
}

.admin-user-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.admin-user-field label {
  margin-bottom: 6px !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-user-field input,
.admin-user-field select {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

.admin-user-permissions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: #f8fafc;
}

.admin-user-permission {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #edf0f3;
  border-radius: 11px;
  background: #fff;
  color: #202635;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.admin-user-permission input {
  flex: 0 0 auto;
}

.admin-user-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.admin-user-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-user-signature {
  padding: 12px;
  border: 1px dashed #d9dde5;
  border-radius: 12px;
  background: #fff;
}

.admin-user-signature input[type="file"] {
  width: 100%;
  margin-top: 10px;
}

.admin-user-actions {
  display: grid;
  gap: 8px;
}

.admin-user-actions .table-btn {
  width: 100%;
  min-height: 42px;
}

.company-pill {
  min-width: 150px;
  justify-content: center;
  color: #111827 !important;
}

.company-pill-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-pill-select {
  display: none !important;
  width: min(240px, 34vw);
  min-height: 22px !important;
  padding: 0 18px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  font: inherit !important;
  font-weight: 950 !important;
  outline: none !important;
}

.company-pill.is-switchable .company-pill-name {
  display: none;
}

.company-pill.is-switchable .company-pill-select {
  display: block !important;
}

.admin-team-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 18px 0;
}

.admin-teams-board {
  display: grid;
  gap: 12px;
}

.admin-team-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: #fff;
}

.admin-team-title strong {
  display: block;
  color: var(--ui-text);
  font-size: 17px;
  font-weight: 950;
}

.admin-team-title span {
  display: block;
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 1280px) {
  .admin-user-card {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
  }

  .admin-user-side {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 15.5px !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .admin-user-card,
  .admin-user-side,
  .admin-user-mini-grid,
  .admin-team-create,
  .admin-team-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-user-permissions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Users console: product areas and permissions. */
.user-create-console,
.users-directory {
  margin-top: 24px;
  padding: 28px !important;
  border-radius: 12px !important;
}

.user-console-heading,
.users-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.user-console-heading h2,
.users-directory-head h2 {
  margin: 8px 0 4px;
  color: #111827;
  font-size: 26px;
  line-height: 1.15;
}

.user-console-heading p,
.users-directory-head p {
  margin: 0;
  color: #667085;
}

.user-console-heading .admin-back {
  margin-bottom: 20px;
}

.user-console-eyebrow {
  display: block;
  color: #ff5a1f;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.user-create-submit {
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: 22px !important;
}

.user-identity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.user-area-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eaecf0;
}

.user-section-title,
.user-permission-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.user-section-title span,
.user-permission-group-head span {
  display: block;
  margin-bottom: 3px;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.user-section-title strong,
.user-permission-group-head strong {
  display: block;
  color: #101828;
  font-size: 17px;
}

.user-section-title small,
.user-permission-group-head small {
  color: #667085;
  font-size: 13px;
  font-weight: 750;
}

.user-area-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.user-area-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  min-height: 94px;
  padding: 16px;
  border: 1.5px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.user-area-card:hover {
  border-color: #cfd4dc;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .06);
}

.user-area-card:has(input:checked) {
  border-color: #ffb899;
  background: #fffaf7;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .08);
}

.user-area-card.real-estate:has(input:checked) {
  border-color: #9fc6f6;
  background: #f8fbff;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .07);
}

.user-area-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-area-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff0e9;
  color: #ff5a1f;
}

.user-area-card.real-estate .user-area-card-icon {
  background: #edf5ff;
  color: #2f80ed;
}

.user-area-card-icon svg {
  width: 25px;
  height: 25px;
}

.user-area-card strong,
.user-area-card small {
  display: block;
}

.user-area-card strong {
  color: #101828;
  font-size: 16px;
}

.user-area-card small {
  margin-top: 4px;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.user-area-check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 50%;
  color: transparent;
  background: #fff;
  font-size: 13px;
  font-weight: 950;
}

.user-area-card:has(input:checked) .user-area-check {
  border-color: #ff5a1f;
  background: #ff5a1f;
  color: #fff;
}

.user-area-card.real-estate:has(input:checked) .user-area-check {
  border-color: #2f80ed;
  background: #2f80ed;
}

.user-permission-groups {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.user-permission-group {
  padding: 18px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #f9fafb;
}

.user-permission-group[hidden] {
  display: none !important;
}

.user-permission-group.real-estate {
  background: #f8fbff;
}

.user-permission-group.shared {
  background: #fff;
}

.user-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.user-permission-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-permission-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 68px;
  padding: 12px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.user-permission-option:has(input:checked) {
  border-color: #ffcab3;
  background: #fffaf7;
}

.user-permission-option input {
  margin-top: 2px;
  accent-color: #ff5a1f;
}

.user-permission-option strong,
.user-permission-option small {
  display: block;
}

.user-permission-option strong {
  color: #1d2939;
  font-size: 14px;
  line-height: 1.25;
}

.user-permission-option small {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.users-directory-head {
  align-items: center;
}

.users-directory-head > strong {
  color: #344054;
  font-size: 14px;
}

.user-area-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin-top: 22px;
  padding: 4px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #f9fafb;
}

.user-area-tabs button {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.user-area-tabs button.active {
  background: #fff;
  color: #101828;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
}

.users-directory .admin-user-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .035);
}

.admin-user-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
}

.admin-user-card-header .admin-user-head {
  flex: 1;
}

.admin-user-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.user-area-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #fff1ea;
  color: #d9460b;
  font-size: 11px;
  font-weight: 950;
}

.user-area-badge.real-estate {
  background: #edf5ff;
  color: #1d65bd;
}

.admin-user-card-body {
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.8fr);
  gap: 20px;
  padding: 20px;
}

.admin-user-access-editor {
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-user-access-title {
  color: #475467;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-user-area-toggle {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 14px;
  font-weight: 900;
}

.admin-user-area-toggle:has(input:checked) {
  border-color: #ffcab3;
  background: #fffaf7;
}

.admin-user-area-toggle.real-estate:has(input:checked) {
  border-color: #b7d5f8;
  background: #f8fbff;
}

.admin-user-permission-sections {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-user-permission-section {
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #f9fafb;
}

.admin-user-permission-section[hidden] {
  display: none !important;
}

.admin-user-permission-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-user-permission-section-head strong {
  color: #1d2939;
  font-size: 14px;
}

.admin-user-permission-section-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 750;
}

.admin-user-permission-section .admin-user-permissions {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-user-permission-section .admin-user-permission {
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
}

.admin-user-card-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid #eaecf0;
  background: #fcfcfd;
}

.admin-user-card-footer .admin-user-signature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-user-card-footer .admin-user-signature label {
  flex: 0 0 auto;
  margin: 0 !important;
}

.admin-user-card-footer .admin-user-signature input {
  margin: 0;
  min-height: 40px !important;
}

.admin-user-card-footer .admin-user-actions {
  display: flex;
  gap: 8px;
}

.admin-user-card-footer .admin-user-actions .table-btn {
  width: auto;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .user-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-permission-grid,
  .admin-user-permission-section .admin-user-permissions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .user-create-console,
  .users-directory {
    padding: 20px !important;
  }

  .user-console-heading,
  .users-directory-head,
  .admin-user-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .user-create-submit,
  .user-area-tabs {
    width: 100%;
  }

  .user-area-tabs {
    overflow-x: auto;
  }

  .user-area-tabs button {
    flex: 0 0 auto;
  }

  .user-identity-grid,
  .user-area-picker,
  .user-permission-grid,
  .user-permission-grid.compact,
  .admin-user-card-body,
  .admin-user-permission-section .admin-user-permissions,
  .admin-user-card-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-user-card-badges {
    justify-content: flex-start;
  }

  .admin-user-card-footer .admin-user-signature,
  .admin-user-card-footer .admin-user-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-user-card-footer .admin-user-actions .table-btn {
    width: 100%;
  }
}

/* Enterprise users and permissions */
.users-enterprise-panel {
  --users-accent: #6f43e8;
  --users-accent-strong: #5b32d6;
  --users-ink: #182230;
  --users-muted: #667085;
  --users-line: #e6e9ef;
  --users-canvas: #f6f7f9;
  position: relative;
  margin: 0 !important;
  overflow: visible;
  color: var(--users-ink);
}

.users-enterprise-shell {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  min-height: calc(100vh - 104px);
  overflow: hidden;
  border: 1px solid var(--users-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .055);
}

.users-config-nav {
  padding: 24px 14px;
  background: #111827;
  color: #d0d5dd;
}

.users-config-nav-title {
  padding: 0 12px 16px;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.users-config-nav button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 2px 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.users-config-nav button:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.users-config-nav button.active {
  background: rgba(111, 67, 232, .2);
  color: #c7b7ff;
  box-shadow: inset 3px 0 0 #8b67f3;
}

.users-config-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 950;
}

.users-enterprise-content {
  min-width: 0;
  padding: 28px;
  background: var(--users-canvas);
}

.users-enterprise-header,
.users-modal-head,
.users-detail-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.users-enterprise-header h2 {
  margin: 6px 0 6px;
  color: var(--users-ink);
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: 0;
}

.users-enterprise-header p,
.users-modal-head p {
  margin: 0;
  color: var(--users-muted);
  font-size: 13px;
}

.users-back-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--users-accent);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.users-enterprise-actions,
.users-modal-actions,
.users-security-actions,
.users-signature-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.users-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.users-btn.primary {
  background: var(--users-accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(111, 67, 232, .2);
}

.users-btn.primary:hover {
  background: var(--users-accent-strong);
}

.users-btn.secondary {
  border-color: #d8dde6;
  background: #fff;
  color: #344054;
}

.users-btn.danger {
  border-color: #fecaca;
  background: #fff;
  color: #d92d20;
}

.users-btn.compact {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
}

.users-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 18px;
}

.users-metric-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--users-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .035);
}

.users-metric-card > div > span,
.users-metric-card strong,
.users-metric-card small {
  display: block;
}

.users-metric-card > div > span {
  color: #475467;
  font-size: 12px;
  font-weight: 780;
}

.users-metric-card strong {
  margin: 3px 0 2px;
  color: var(--users-ink);
  font-size: 27px;
  line-height: 1;
}

.users-metric-card small {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 700;
}

.users-metric-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 950;
}

.users-metric-icon.violet {
  background: #f0ebff;
  color: var(--users-accent);
}

.users-metric-icon.blue {
  background: #eaf2ff;
  color: #2f6fed;
}

.users-metric-icon.green {
  position: relative;
  background: #e8f8ef;
}

.users-metric-icon.green::after {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #24b26b;
  box-shadow: 0 0 0 7px rgba(36, 178, 107, .11);
  content: "";
}

.users-directory-surface {
  overflow: hidden;
  border: 1px solid var(--users-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .035);
}

.users-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(112px, .65fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 16px;
  border-bottom: 1px solid var(--users-line);
}

.users-filter-bar label {
  margin: 0;
}

.users-filter-bar label > span {
  display: block;
  margin-bottom: 5px;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.users-filter-bar input,
.users-filter-bar select {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.users-search-field {
  position: relative;
}

.users-search-field > span {
  display: none !important;
}

.users-search-field input {
  padding-left: 37px !important;
}

.users-search-icon {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 13px;
  height: 13px;
  border: 1.8px solid #98a2b3;
  border-radius: 50%;
}

.users-search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: #98a2b3;
  transform: rotate(45deg);
  content: "";
}

.users-filter-clear {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.users-table-wrap {
  overflow-x: auto;
}

.users-enterprise-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.users-enterprise-table th,
.users-enterprise-table td {
  padding: 14px 15px;
  border-bottom: 1px solid #edf0f4;
  color: #344054;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.users-enterprise-table th {
  background: #fbfcfd;
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.users-enterprise-table tbody tr {
  transition: background .15s ease;
}

.users-enterprise-table tbody tr:hover {
  background: #fcfbff;
}

.users-table-user {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.users-table-avatar,
.users-drawer-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ede7ff;
  color: var(--users-accent);
  font-size: 12px;
  font-weight: 950;
}

.users-table-avatar {
  width: 40px;
  height: 40px;
}

.users-table-user strong,
.users-table-user span {
  display: block;
  min-width: 0;
}

.users-table-user strong {
  overflow: hidden;
  color: var(--users-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-table-user span {
  margin-top: 2px;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-admin-tag,
.user-role-badge,
.user-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.users-admin-tag {
  margin-left: 5px;
  background: #f0ebff;
  color: var(--users-accent);
}

.user-role-badge {
  background: #eef2f7;
  color: #475467;
}

.user-role-badge.administrador {
  background: #f0ebff;
  color: var(--users-accent);
}

.user-role-badge.administracion,
.user-role-badge.compras,
.user-role-badge.vendedora {
  background: #e9f8ef;
  color: #16834e;
}

.user-role-badge.civile,
.user-role-badge.director {
  background: #eaf2ff;
  color: #1d5fd1;
}

.user-role-badge.supervisor,
.user-role-badge.gerencia {
  background: #fff3df;
  color: #b76806;
}

.user-status-badge.active {
  background: #e9f8ef;
  color: #16834e;
}

.user-status-badge.suspended,
.user-status-badge.blocked {
  background: #feeceb;
  color: #d92d20;
}

.user-status-badge.invitation_pending {
  background: #fff4d8;
  color: #a86100;
}

.users-last-access strong,
.users-last-access span {
  display: block;
}

.users-last-access strong {
  color: #344054;
  font-size: 11px;
}

.users-last-access span {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 10px;
}

.users-row-actions {
  display: flex;
  gap: 6px;
}

.users-row-action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.users-row-action:hover {
  border-color: #bcaaff;
  color: var(--users-accent);
}

.users-actions-menu {
  position: fixed;
  z-index: 4800;
  width: 210px;
  overflow: hidden;
  border: 1px solid var(--users-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(16, 24, 40, .16);
}

.users-actions-menu button {
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid #f0f2f5;
  background: #fff;
  color: #344054;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.users-actions-menu button:hover {
  background: #f8f7ff;
}

.users-actions-menu button.danger {
  color: #d92d20;
}

.users-empty-state {
  padding: 46px !important;
  color: #667085 !important;
  text-align: center !important;
}

.users-directory-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 11px 16px;
  color: #667085;
  font-size: 11px;
  font-weight: 750;
}

.users-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.users-pagination button,
.users-pagination span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.users-pagination span {
  border-color: var(--users-accent);
  background: var(--users-accent);
  color: #fff;
}

.users-pagination button:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.users-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4900;
  background: rgba(15, 23, 42, .22);
  backdrop-filter: blur(2px);
}

.users-detail-drawer {
  position: fixed;
  z-index: 5000;
  top: 0;
  right: 0;
  width: min(620px, 100vw);
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--users-line);
  background: #fff;
  box-shadow: -20px 0 60px rgba(16, 24, 40, .15);
  transform: translateX(104%);
  transition: transform .22s ease;
}

.users-detail-drawer.open {
  transform: translateX(0);
}

.users-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--users-line);
}

.users-drawer-head > strong {
  color: var(--users-ink);
  font-size: 15px;
}

.users-drawer-head button,
.users-modal-head > button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f3f4f6;
  color: #475467;
  font-size: 22px;
  cursor: pointer;
}

.users-drawer-profile {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
}

.users-drawer-avatar {
  width: 62px;
  height: 62px;
  font-size: 18px;
}

.users-drawer-profile h3 {
  margin: 0;
  color: var(--users-ink);
  font-size: 19px;
}

.users-drawer-profile p {
  margin: 3px 0 9px;
  color: #667085;
  font-size: 12px;
}

.users-drawer-profile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 780;
}

.users-drawer-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 18px;
  border-bottom: 1px solid var(--users-line);
}

.users-drawer-tabs button {
  min-height: 46px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.users-drawer-tabs button.active {
  border-bottom-color: var(--users-accent);
  color: var(--users-accent);
}

.users-drawer-body {
  overflow-y: auto;
  padding: 22px;
}

.users-detail-panel {
  display: none;
}

.users-detail-panel.active {
  display: block;
}

.users-detail-section-title {
  align-items: center;
  margin-bottom: 15px;
}

.users-detail-section-title strong,
.users-detail-section-title span {
  display: block;
}

.users-detail-section-title strong {
  color: var(--users-ink);
  font-size: 14px;
}

.users-detail-section-title span {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 650;
}

.users-detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.users-detail-form label,
.users-modal-select,
.users-multi-field {
  margin: 0;
}

.users-detail-form label > span,
.users-modal-select > span,
.users-multi-field > span {
  display: block;
  margin-bottom: 6px;
  color: #475467;
  font-size: 11px;
  font-weight: 850;
}

.users-detail-form label.full {
  grid-column: 1 / -1;
}

.users-area-access {
  grid-column: 1 / -1;
}

.users-area-access > span,
.users-field-inline > span {
  color: #475467;
  font-size: 11px;
  font-weight: 850;
}

.users-area-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 7px;
}

.users-area-access-grid label {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fbfcfd;
  cursor: pointer;
}

.users-area-access-grid label:has(input:checked) {
  border-color: #c8baff;
  background: #f8f6ff;
}

.users-area-access-grid input {
  width: 18px;
  height: 18px;
  min-height: 18px !important;
  padding: 0 !important;
  accent-color: var(--users-accent);
}

.users-area-access-grid strong,
.users-area-access-grid small {
  display: block;
}

.users-area-access-grid strong {
  color: var(--users-ink);
  font-size: 12px;
}

.users-area-access-grid small {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 10px;
}

.users-field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.users-field-inline button {
  border: 0;
  background: transparent;
  color: var(--users-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.users-detail-form input,
.users-detail-form select,
.users-modal-select select,
.users-multi-field select {
  min-height: 42px !important;
  padding: 10px 11px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.users-detail-form select[multiple],
.users-multi-field select[multiple] {
  min-height: 96px !important;
}

.users-info-readonly {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fafbfc;
}

.users-info-readonly div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.users-info-readonly span {
  color: #667085;
  font-size: 11px;
}

.users-info-readonly strong {
  color: #344054;
  font-size: 11px;
  text-align: right;
}

.users-permission-modules {
  display: grid;
  gap: 8px;
}

.users-permission-module {
  overflow: hidden;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  background: #fff;
}

.users-permission-module-head {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 10px 13px;
  border: 0;
  background: #fff;
  color: #344054;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.users-permission-module-head > span:first-child {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #f0ebff;
  color: var(--users-accent);
  font-size: 10px;
  font-weight: 950;
}

.users-permission-module-head strong {
  font-size: 12px;
}

.users-module-switch {
  position: relative;
  width: 36px;
  height: 21px;
  margin: 0;
}

.users-module-switch input {
  position: absolute;
  opacity: 0;
}

.users-module-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d0d5dd;
  transition: background .16s ease;
}

.users-module-switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
  transition: transform .16s ease;
  content: "";
}

.users-module-switch input:checked + span {
  background: var(--users-accent);
}

.users-module-switch input:checked + span::after {
  transform: translateX(15px);
}

.users-permission-module-body {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 12px 14px 15px;
  border-top: 1px solid #edf0f4;
  background: #fbfcfd;
}

.users-permission-module.expanded .users-permission-module-body {
  display: grid;
}

.users-permission-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  color: #475467;
  font-size: 11px;
  font-weight: 720;
}

.users-permission-check input,
.users-radio-grid input,
.users-switch-row input {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--users-accent);
}

.users-permission-check input:disabled + span {
  color: #b0b7c3;
}

.users-permission-block {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  background: #fafbfc;
}

.users-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.users-radio-grid label,
.users-switch-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
  color: #475467;
  font-size: 11px;
  font-weight: 750;
}

.users-signature-control {
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.users-signature-control > div {
  flex: 1;
  min-width: 150px;
  color: #475467;
  font-size: 11px;
  font-weight: 780;
}

.users-activity-list {
  display: grid;
  gap: 0;
  border-top: 1px solid #edf0f4;
}

.users-activity-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #edf0f4;
}

.users-activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--users-accent);
}

.users-activity-item strong,
.users-activity-item span {
  display: block;
}

.users-activity-item strong {
  color: #344054;
  font-size: 11px;
}

.users-activity-item span {
  margin-top: 3px;
  color: #667085;
  font-size: 10px;
  line-height: 1.45;
}

.users-activity-item time {
  color: #98a2b3;
  font-size: 10px;
  white-space: nowrap;
}

.users-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.users-security-grid > div {
  min-height: 74px;
  padding: 13px;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  background: #fafbfc;
}

.users-security-grid span,
.users-security-grid strong {
  display: block;
}

.users-security-grid span {
  color: #667085;
  font-size: 10px;
  font-weight: 750;
}

.users-security-grid strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: #344054;
  font-size: 12px;
}

.users-security-actions {
  flex-wrap: wrap;
  margin-top: 16px;
}

.users-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--users-line);
  background: #fff;
  box-shadow: 0 -10px 24px rgba(16, 24, 40, .04);
}

.users-modal {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(3px);
}

.users-modal[hidden] {
  display: none !important;
}

.users-modal-card {
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--users-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(16, 24, 40, .2);
}

.users-modal-card.compact {
  width: min(480px, 100%);
}

.users-modal-card.roles {
  width: min(760px, 100%);
}

.users-modal-head {
  margin-bottom: 20px;
}

.users-modal-head > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--users-accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.users-modal-head h3 {
  margin: 0 0 5px;
  color: var(--users-ink);
  font-size: 21px;
}

.users-modal-actions {
  justify-content: flex-end;
  margin-top: 20px;
}

.enterprise-area-picker {
  margin-top: 18px;
}

.users-role-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.users-role-preset {
  padding: 15px;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  background: #fafbfc;
}

.users-role-preset strong,
.users-role-preset span {
  display: block;
}

.users-role-preset strong {
  color: #344054;
  font-size: 12px;
}

.users-role-preset span {
  margin-top: 4px;
  color: #667085;
  font-size: 11px;
  line-height: 1.45;
}

.users-modal-select {
  display: block;
}

@media (max-width: 1280px) {
  .users-enterprise-shell {
    grid-template-columns: 184px minmax(0, 1fr);
  }

  .users-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .users-search-field {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .users-enterprise-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .users-config-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 10px;
  }

  .users-config-nav-title {
    display: none;
  }

  .users-config-nav button {
    flex: 0 0 auto;
    width: auto;
    grid-template-columns: 24px auto;
  }

  .users-enterprise-content {
    padding: 20px;
  }

  .users-metrics {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 700px) {
  .users-enterprise-header {
    align-items: stretch;
    flex-direction: column;
  }

  .users-enterprise-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .users-metrics {
    grid-template-columns: minmax(160px, 1fr);
  }

  .users-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .users-search-field {
    grid-column: 1 / -1;
  }

  .users-table-wrap {
    overflow: visible;
    padding: 12px;
  }

  .users-enterprise-table {
    min-width: 0;
  }

  .users-enterprise-table thead {
    display: none;
  }

  .users-enterprise-table,
  .users-enterprise-table tbody,
  .users-enterprise-table tr,
  .users-enterprise-table td {
    display: block;
    width: 100%;
  }

  .users-enterprise-table tr {
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    background: #fff;
  }

  .users-enterprise-table td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 38px;
    padding: 8px 0;
    border: 0;
  }

  .users-enterprise-table td::before {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .users-enterprise-table td:first-child {
    display: block;
    padding-top: 0;
    border-bottom: 1px solid #edf0f4;
    padding-bottom: 12px;
    margin-bottom: 5px;
  }

  .users-enterprise-table td:first-child::before {
    display: none;
  }

  .users-row-actions {
    justify-content: flex-end;
  }

  .users-detail-drawer {
    width: 100vw;
  }

  .users-detail-form,
  .users-security-grid,
  .users-permission-module-body,
  .users-role-presets,
  .users-area-access-grid {
    grid-template-columns: 1fr;
  }

  .users-detail-form label.full {
    grid-column: auto;
  }

  .users-drawer-tabs {
    overflow-x: auto;
  }

  .users-drawer-tabs button {
    min-width: 98px;
  }
}

/* Users is part of the TSIGNS admin panel, not a second application. */
.users-native-panel {
  --users-accent: #ff5a1f;
  --users-accent-strong: #e94a10;
  --users-ink: #171b24;
  --users-muted: #697180;
  --users-line: #e3e7ed;
  --users-canvas: transparent;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.users-native-panel .users-enterprise-header {
  align-items: flex-end;
  margin-bottom: 22px;
}

.users-native-panel .users-enterprise-header h2 {
  margin-top: 10px;
  font-size: 30px;
}

.users-native-panel .users-enterprise-header p {
  max-width: 660px;
  font-size: 14px;
}

.users-native-panel .users-back-link {
  color: #697180;
}

.users-native-panel .users-btn.primary {
  background: var(--users-accent);
  box-shadow: 0 8px 18px rgba(255, 90, 31, .16);
}

.users-native-panel .users-btn.primary:hover {
  background: var(--users-accent-strong);
}

.users-native-panel .users-directory-surface {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .04);
}

.users-native-filters {
  grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(150px, .7fr)) auto;
  padding: 18px;
  background: #fff;
}

.users-native-panel .users-search-icon {
  top: 14px;
}

.users-native-panel .users-enterprise-table {
  min-width: 820px;
}

.users-native-panel .users-enterprise-table th,
.users-native-panel .users-enterprise-table td {
  padding: 16px 18px;
}

.users-native-panel .users-enterprise-table tbody tr:hover {
  background: #fffaf7;
}

.users-native-panel .users-table-avatar,
.users-native-panel .users-drawer-avatar {
  background: #fff0e8;
  color: var(--users-accent);
}

.users-native-panel .users-admin-tag,
.users-native-panel .user-role-badge.administrador {
  background: #fff0e8;
  color: #c94312;
}

.users-area-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.users-area-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #eef4ff;
  color: #315ea8;
  font-size: 10px;
  font-weight: 850;
}

.users-area-pill.real-estate {
  background: #fff3e9;
  color: #bd4a17;
}

.users-native-panel .users-row-action.edit {
  width: auto;
  padding: 0 12px;
  color: #3e4653;
  font-size: 11px;
}

.users-native-panel .users-row-action:hover {
  border-color: #ffb89d;
  color: var(--users-accent);
}

.users-native-drawer {
  width: min(610px, 100vw);
}

.users-native-drawer .users-drawer-profile {
  border-bottom: 1px solid var(--users-line);
}

.users-native-drawer-body {
  display: grid;
  gap: 0;
  padding: 0 24px 28px;
}

.users-native-section {
  padding: 24px 0;
  border-bottom: 1px solid #edf0f4;
}

.users-native-section:last-child {
  border-bottom: 0;
}

.users-native-section .users-detail-section-title {
  margin-bottom: 15px;
}

.users-native-section .users-detail-section-title strong {
  font-size: 14px;
}

.users-native-section .users-detail-section-title span {
  margin-top: 3px;
  color: var(--users-muted);
  font-size: 11px;
}

.users-native-panel .users-area-access-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-native-panel .users-area-access-grid label {
  min-height: 76px;
  padding: 14px;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  background: #fff;
}

.users-native-panel .users-area-access-grid label:has(input:checked) {
  border-color: #ffb89d;
  background: #fff8f4;
}

.users-native-panel .users-area-access-grid input {
  accent-color: var(--users-accent);
}

.users-native-panel .users-permission-modules {
  gap: 20px;
}

.users-simple-permission-group {
  display: grid;
  gap: 10px;
}

.users-simple-permission-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.users-simple-permission-group > header strong {
  color: #252b36;
  font-size: 12px;
}

.users-simple-permission-group > header span {
  color: #8a919d;
  font-size: 10px;
}

.users-simple-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.users-simple-permission {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e5e8ed;
  border-radius: 8px;
  background: #fff;
  color: #3f4754;
  font-size: 11px;
  font-weight: 760;
}

.users-simple-permission:has(input:is(:checked, :indeterminate)) {
  border-color: #ffc4ad;
  background: #fff9f6;
  color: #b94216;
}

.users-permission-advanced {
  min-width: 0;
}

.users-permission-advanced > summary {
  padding: 10px 0;
  color: #626b75;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.users-permission-partial {
  display: block;
  margin-top: 3px;
  color: #626b75;
  font-size: 10px;
  font-weight: 500;
}

.users-simple-permission > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.users-simple-permission:has(input:disabled) {
  opacity: .46;
}

.users-simple-permission input {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--users-accent);
}

.users-simple-permission input:indeterminate {
  background: #ff5a1f !important;
  border-color: #ff5a1f !important;
}

.users-simple-permission input:indeterminate::after {
  content: "";
  width: 8px;
  height: 2px;
  margin: 0;
  border: 0;
  background: #fff;
  transform: none;
}

.users-native-panel .users-signature-control {
  margin: 0;
  padding: 14px;
  border: 1px solid #e5e8ed;
  border-radius: 8px;
  background: #fafbfc;
}

.users-native-drawer-footer {
  flex-wrap: wrap;
}

.users-drawer-footer-spacer {
  flex: 1;
}

.users-new-user-card {
  width: min(620px, 100%);
  border-radius: 10px;
}

.users-new-user-area-title {
  margin-top: 22px;
}

.users-new-contact-only {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #e5e8ed;
  border-radius: 8px;
  background: #fafbfc;
  cursor: pointer;
}

.users-new-contact-only[hidden] {
  display: none;
}

.users-new-contact-only input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--users-accent);
}

.users-new-contact-only span {
  display: grid;
  gap: 2px;
}

.users-new-contact-only strong {
  color: #171d29;
  font-size: 14px;
}

.users-new-contact-only small {
  color: #707887;
  font-size: 12px;
  line-height: 1.35;
}

.users-native-panel .users-modal-head > div > span {
  color: var(--users-accent);
}

@media (max-width: 1100px) {
  .users-native-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .users-native-filters .users-search-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .users-native-panel .users-enterprise-header {
    align-items: stretch;
  }

  .users-native-filters,
  .users-simple-permission-grid,
  .users-native-panel .users-area-access-grid {
    grid-template-columns: 1fr;
  }

  .users-native-filters .users-search-field {
    grid-column: auto;
  }

  .users-native-drawer-footer .users-btn,
  .users-drawer-footer-spacer {
    width: 100%;
  }
}

/* Reservations: same operational language as Orders. */
.reservations-shell {
  width: 100%;
  max-width: none;
}

.reservations-page-header {
  align-items: flex-end;
  margin-bottom: 18px;
}

.reservations-page-header h1 {
  margin-bottom: 5px;
}

.reservations-new-btn {
  min-height: 44px;
  padding: 0 18px;
  gap: 8px;
  white-space: nowrap;
}

.reservations-new-btn span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.reservations-tabs {
  gap: 24px;
  margin: 0 0 18px;
  padding: 0;
}

.reservations-tab {
  min-height: 42px;
  padding: 0 2px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
}

.reservations-list-surface,
.reservation-create-card {
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .045);
}

.commercial-ledger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 18px;
  border-bottom: 1px solid #e9ecf1;
}

.commercial-ledger-header h2 {
  margin: 0 0 4px;
  color: #202630;
  font-size: 18px;
}

.commercial-ledger-header p {
  margin: 0;
  color: #737b88;
  font-size: 12px;
}

.reservation-filter-panel {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(170px, .7fr) minmax(170px, .7fr) auto;
  align-items: end;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid #e9ecf1;
  background: #fff;
}

.reservation-filter-panel .field {
  margin: 0;
}

.reservation-filter-panel label,
.reservation-commercial-section label {
  color: #606977;
  font-size: 11px;
  font-weight: 800;
}

.reservation-filter-panel input,
.reservation-filter-panel select {
  min-height: 44px;
  border-color: #dfe3e9;
  background: #fff;
}

.reservation-refresh-btn {
  min-height: 44px;
}

.reservation-conformation-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #e9ecf1;
}

.reservation-conformation-tabs > button {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #687181;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.reservation-conformation-tabs > button.active {
  border-bottom-color: var(--orange);
  color: var(--orange);
}

.reservation-conformation-tabs > button span {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f1f3f6;
  color: #677080;
  font-size: 10px;
  text-align: center;
}

.reservation-conformation-tabs > button.active span {
  background: #fff1eb;
  color: var(--orange);
}

.reservation-hidden-summary {
  display: none;
}

.reservations-table-scroll {
  max-width: 100%;
}

.reservations-ledger-table {
  min-width: 1500px;
}

.reservations-ledger-table th {
  padding: 12px 10px;
  color: #667085;
  font-size: 10px;
  white-space: nowrap;
}

.reservations-ledger-table td {
  height: 70px;
  padding: 11px 10px;
  border-bottom-color: #eef0f3;
  color: #343b47;
  font-size: 11px;
  vertical-align: middle;
}

.reservation-main-cell {
  display: grid;
  gap: 4px;
  min-width: 122px;
}

.reservation-main-cell strong {
  color: #202631;
  font-size: 12px;
}

.reservation-main-cell small,
.reservation-seller-cell small,
.reservation-conformation-meta {
  color: #8a919d;
  font-size: 9px;
}

.reservation-address-cell {
  max-width: 220px;
  color: #2c3440;
  font-weight: 750;
  line-height: 1.35;
}

.reservation-money {
  color: #252b35;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.reservation-total-commission {
  color: var(--orange);
}

.reservation-seller-cell {
  display: grid;
  gap: 3px;
}

.reservation-seller-cell strong {
  color: #313844;
  font-size: 11px;
}

.reservation-conformation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.reservation-conformation-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.reservation-conformation-badge.conformed {
  background: #eaf8ef;
  color: #21834c;
}

.reservation-conformation-badge.pending {
  background: #fff4df;
  color: #b66a00;
}

.reservation-actions-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
}

.reservation-action-menu {
  position: fixed;
  z-index: 6200;
  width: 210px;
  padding: 6px;
  border: 1px solid #e0e4ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
}

.reservation-action-menu button {
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #343b46;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.reservation-action-menu button:hover {
  background: #f6f7f9;
}

.reservation-action-menu button.danger {
  color: #b42318;
}

.reservations-pagination {
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid #e9ecf1;
}

.reservation-create-card {
  padding: 24px;
}

.reservation-create-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.reservation-create-heading h2 {
  margin: 12px 0 5px;
}

.reservation-create-heading p,
.reservation-commercial-head p {
  margin: 0;
  color: #717987;
  font-size: 12px;
}

.reservation-auto-seller {
  display: grid;
  gap: 3px;
  min-width: 190px;
  padding: 12px 15px;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  background: #fafbfc;
}

.reservation-auto-seller span {
  color: #818896;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.reservation-auto-seller strong {
  color: #282f3a;
  font-size: 12px;
}

.reservation-create-basics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reservation-commercial-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e8ebef;
}

.reservation-commercial-head {
  margin-bottom: 14px;
}

.reservation-commercial-head h3 {
  margin: 0 0 4px;
}

.reservation-colleague-toggle {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 68px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.reservation-colleague-toggle:has(input:checked) {
  border-color: #ffbea4;
  background: #fff8f5;
}

.reservation-colleague-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}

.reservation-colleague-toggle span {
  display: grid;
  gap: 3px;
}

.reservation-colleague-toggle strong {
  color: #343b46;
  font-size: 12px;
}

.reservation-colleague-toggle small {
  color: #7c8491;
  font-size: 10px;
  line-height: 1.35;
}

.commercial-ledger-modal-card {
  --users-accent: #ff5a1f;
  --users-accent-strong: #e94a10;
  --users-ink: #171b24;
  --users-muted: #697180;
  --users-line: #e3e7ed;
  width: min(720px, 100%);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  padding: 0;
  border-radius: 12px;
}

.commercial-ledger-modal-card .users-modal-head {
  align-items: flex-start;
  margin: 0;
  padding: 24px 28px 18px;
  border-bottom: 1px solid #edf0f3;
}

.commercial-ledger-modal-card .users-modal-head > button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f3f5f7;
  color: #475467;
}

.commercial-ledger-modal-card .users-modal-head > div > span {
  color: var(--orange);
}

.commercial-ledger-modal-card .users-modal-actions {
  justify-content: flex-end;
  min-height: 78px;
  margin: 8px 0 0;
  padding: 16px 28px 22px;
  border-top: 1px solid #edf0f3;
  background: #fff;
}

.commercial-ledger-modal-card .users-modal-actions .users-btn {
  min-width: 148px;
  min-height: 46px;
  margin: 0;
}

.commercial-ledger-modal-card .users-modal-actions .users-btn.primary {
  border-color: #ff5a1f;
  background: #ff5a1f;
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 90, 31, .18);
}

.commercial-ledger-modal-card .users-modal-actions .users-btn.primary:hover {
  background: #e94a10;
}

.commercial-ledger-modal-card .users-modal-actions .users-btn.secondary {
  border-color: #d9dee6;
  background: #f8f9fb;
  color: #344054;
}

.commercial-ledger-form {
  padding: 22px 24px 8px;
}

.commercial-ledger-form .reservation-colleague-toggle {
  display: grid;
}

.commercial-ledger-form .reservation-colleague-toggle > span {
  display: grid;
  gap: 3px;
  margin: 0;
}

.commercial-ledger-form .reservation-colleague-toggle strong,
.commercial-ledger-form .reservation-colleague-toggle small {
  display: block;
}

.orders-date-control {
  position: relative;
  display: block;
  width: 100%;
}

.orders-date-control input[type="date"] {
  width: 100%;
  padding-right: 14px !important;
  color-scheme: light;
}

.orders-date-control > span,
.orders-date-control > i {
  display: none;
}

.orders-date-control input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  opacity: .62;
  cursor: pointer;
  filter: saturate(0) contrast(1.3);
}

@media (max-width: 1050px) {
  .reservation-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reservation-refresh-btn {
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .reservations-page-header,
  .reservation-create-heading,
  .commercial-ledger-header {
    align-items: stretch;
    flex-direction: column;
  }

  .reservations-new-btn,
  .reservation-auto-seller {
    width: 100%;
  }

  .commercial-ledger-modal-card .users-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .commercial-ledger-modal-card .users-modal-actions .users-btn {
    width: 100%;
    min-width: 0;
  }

  .reservation-filter-panel,
  .reservation-create-basics {
    grid-template-columns: 1fr;
  }

  .reservation-conformation-tabs {
    gap: 16px;
    overflow-x: auto;
  }

  .reservations-ledger-table,
  .reservations-ledger-table tbody,
  .reservations-ledger-table tr,
  .reservations-ledger-table td {
    display: block;
    min-width: 0;
  }

  .reservations-ledger-table thead {
    display: none;
  }

  .reservations-ledger-table tr {
    margin: 12px;
    padding: 15px;
    border: 1px solid #e2e6eb;
    border-radius: 8px;
  }

  .reservations-ledger-table td {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    min-height: 36px;
    height: auto;
    padding: 6px 0;
    border: 0;
  }

  .reservations-ledger-table td::before {
    color: #8a919d;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .reservation-actions-cell {
    justify-content: flex-end;
  }
}

/* Orders filters: dense enough for work, calm enough to scan. */
.orders-filter-panel {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #f9fafb;
}

.orders-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.orders-filter-heading span,
.orders-filter-heading strong {
  display: block;
}

.orders-filter-heading span {
  margin-bottom: 3px;
  color: #ff5a1f;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.orders-filter-heading strong {
  color: #101828;
  font-size: 16px;
}

.orders-filter-heading .btn {
  min-height: 40px;
  padding: 8px 13px !important;
  white-space: nowrap;
}

.orders-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.orders-filter-grid .field {
  min-width: 0;
  margin: 0;
}

.orders-filter-grid .field label {
  margin-bottom: 6px !important;
  color: #475467 !important;
  font-size: 12px !important;
}

.orders-filter-grid input,
.orders-filter-grid select {
  width: 100%;
  min-height: 44px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.orders-filter-search {
  grid-column: span 2;
}

@media (max-width: 1180px) {
  .orders-filter-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .orders-filter-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .orders-filter-heading .btn {
    width: 100%;
  }

  .orders-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .orders-filter-search {
    grid-column: auto;
  }
}

/* Dashboard tune-up: keep it aligned with the operational tsigns UI. */
#dashboardSection .card {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035) !important;
}

#dashboardSection .subtitle,
#dashboardSection .card p {
  color: var(--ui-muted) !important;
  font-size: 14px !important;
}

.dashboard-hero {
  align-items: end !important;
  margin-bottom: 12px !important;
}

.dashboard-actions {
  gap: 8px !important;
}

.dashboard-date-pill {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #495060 !important;
  font-size: 13px !important;
}

.dashboard-actions .btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
}

.dashboard-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) minmax(150px, 220px) !important;
  gap: 12px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
}

.dashboard-kpis {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.dashboard-kpi-card {
  min-height: 108px !important;
  display: block !important;
  padding: 18px 18px 16px !important;
  border-radius: var(--ui-radius) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035) !important;
}

.dashboard-kpi-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #ff5a1f;
}

.dashboard-kpi-card.dashboard-kpi-violet::before,
.dashboard-kpi-card.dashboard-kpi-blue::before,
.dashboard-kpi-card.dashboard-kpi-green::before {
  background: #ff5a1f;
}

.dashboard-kpi-icon,
.dashboard-sparkline {
  display: none !important;
}

.dashboard-kpi-card span {
  color: #5c6472 !important;
  font-size: 12px !important;
}

.dashboard-kpi-card strong {
  margin-top: 5px !important;
  color: #111827 !important;
  font-size: clamp(22px, 1.7vw, 28px) !important;
}

.dashboard-kpi-card em {
  margin-top: 9px !important;
  color: #7a8290 !important;
}

.dashboard-main-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .75fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.dashboard-lower-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.dashboard-insights-panel {
  grid-column: 1 / -1;
}

.dashboard-main-grid > .card,
.dashboard-lower-grid > .card {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035) !important;
}

.dashboard-pie-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 12px 0 0 !important;
}

.dashboard-pie {
  width: 176px !important;
  height: 176px !important;
  margin: 0 auto !important;
}

.dashboard-pie::after {
  width: 82px !important;
  height: 82px !important;
}

.dashboard-pie-center strong {
  font-size: 15px !important;
}

.dashboard-pie-legend-row {
  padding: 8px 0 !important;
  border-bottom: 1px solid #edf0f4;
}

.dashboard-pie-legend-row:last-child {
  border-bottom: 0;
}

.dashboard-insight-card {
  margin-top: 12px !important;
  padding: 14px !important;
  border-color: #ffe1d2 !important;
  border-radius: 8px !important;
  background: #fff9f5 !important;
  color: #7c2d12 !important;
}

.dashboard-trust-detail-card,
.dashboard-pie-card,
.dashboard-evolution-card,
.dashboard-top-providers-card,
.dashboard-insights-panel {
  padding: 18px !important;
}

.dashboard-trust-group {
  border-radius: 8px !important;
}

.dashboard-trust-group summary {
  padding: 13px 14px !important;
}

.dashboard-trust-title {
  padding-left: 0 !important;
}

.dashboard-trust-title::before,
.dashboard-trust-title::after {
  content: none !important;
}

.dashboard-order-head {
  grid-template-columns: minmax(115px, .75fr) minmax(110px, .72fr) minmax(120px, .85fr) minmax(110px, .8fr) minmax(90px, .65fr) minmax(118px, .8fr) minmax(105px, .65fr) !important;
  padding: 12px 14px 9px !important;
  background: #fafbfc;
}

.dashboard-order-row {
  grid-template-columns: minmax(115px, .75fr) minmax(110px, .72fr) minmax(120px, .85fr) minmax(110px, .8fr) minmax(90px, .65fr) minmax(118px, .8fr) minmax(105px, .65fr) !important;
  padding: 10px 14px !important;
}

.dashboard-category-pill {
  min-height: 24px !important;
  background: #fff3ed !important;
  color: #9a3412 !important;
  font-size: 11px !important;
}

.dashboard-evolution-chart {
  min-height: 190px !important;
}

.dashboard-evolution-chart svg {
  min-height: 188px !important;
}

.dashboard-evolution-chart .dashboard-empty,
.dashboard-top-providers .dashboard-empty,
.dashboard-trust-details .dashboard-empty,
.dashboard-pie-legend .dashboard-empty {
  min-height: 84px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #fbfcfd !important;
}

.dashboard-top-providers,
.dashboard-insights {
  gap: 12px !important;
}

.dashboard-provider-row {
  gap: 7px !important;
}

.dashboard-provider-track {
  height: 7px !important;
}

.dashboard-insight-row {
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}

.dashboard-insight-row:last-child {
  border-bottom: 0;
}

.dashboard-insight-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #fff3ed !important;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-metric-card {
  position: relative;
  min-height: 118px;
  padding: 18px 18px 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
  overflow: hidden;
}

.dashboard-metric-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #ff5a1f;
}

.dashboard-metric-usd::before {
  background: #111827;
}

.dashboard-metric-mc::before {
  background: #16a34a;
}

.dashboard-metric-fc::before {
  background: #2563eb;
}

.dashboard-metric-pending::before {
  background: #f59e0b;
}

.dashboard-metric-card span {
  display: block;
  color: #5c6472;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.dashboard-metric-card strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.05;
}

.dashboard-metric-card small {
  display: block;
  margin-top: 9px;
  color: #7a8290;
  font-size: 12px;
  font-weight: 850;
}

.dashboard-rubro-card {
  padding: 18px !important;
}

.dashboard-rubro-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-rubro-mc .dashboard-rubro-summary strong,
.dashboard-rubro-mc .dashboard-rubro-list .dashboard-bar-head span {
  color: #15803d !important;
}

.dashboard-rubro-mc .dashboard-bar-fill {
  background: linear-gradient(90deg, #22c55e, #86efac) !important;
}

.dashboard-rubro-fc .dashboard-rubro-summary strong,
.dashboard-rubro-fc .dashboard-rubro-list .dashboard-bar-head span {
  color: #1d4ed8 !important;
}

.dashboard-rubro-fc .dashboard-bar-fill {
  background: linear-gradient(90deg, #2563eb, #93c5fd) !important;
}

.dashboard-rubro-card .preview-header {
  align-items: start;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}

.dashboard-rubro-summary {
  min-width: 220px;
  padding: 14px 16px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  background: #fbfcfd;
  text-align: right;
}

.dashboard-rubro-summary span,
.dashboard-rubro-summary small {
  display: block;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-rubro-summary strong {
  display: block;
  margin: 5px 0 4px;
  color: #111827;
  font-size: 26px;
  line-height: 1.05;
}

.dashboard-rubro-summary small {
  text-transform: none;
}

.dashboard-rubro-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.dashboard-rubro-list .dashboard-bar-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.25fr) minmax(180px, auto);
  gap: 16px;
  align-items: center;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.dashboard-rubro-list .dashboard-bar-head {
  display: contents !important;
}

.dashboard-rubro-list .dashboard-bar-head strong {
  min-width: 0;
  color: #111827 !important;
  font-size: 15px !important;
}

.dashboard-rubro-list .dashboard-bar-head span {
  order: 3;
  justify-self: end;
  color: #ff5a1f !important;
  font-size: 15px !important;
}

.dashboard-rubro-list .dashboard-bar-track {
  order: 2;
  height: 9px !important;
  margin: 0 !important;
  background: #edf0f4 !important;
}

.dashboard-rubro-list .dashboard-bar-meta {
  grid-column: 1 / -1;
  justify-content: flex-start !important;
  margin-top: -6px;
  color: #7a8290 !important;
}

.dashboard-rubro-list .dashboard-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
}

.dashboard-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin: 0 0 14px;
  border: 1px solid #e9edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
}

.dashboard-tab {
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: transparent;
  color: #626b79;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.dashboard-tab.active {
  background: #111827;
  color: #fff;
}

.dashboard-tab-panel {
  display: none;
}

	.dashboard-tab-panel.active {
	  display: block;
	}

	.comparison-toolbar {
	  grid-template-columns: minmax(260px, 1.1fr) minmax(240px, 1fr) minmax(220px, .85fr) !important;
	}

	.comparison-mode-toggle {
	  display: grid;
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  gap: 6px;
	  padding: 5px;
	  border: 1px solid #e5e9f0;
	  border-radius: 12px;
	  background: #f8fafc;
	}

	.comparison-mode-btn {
	  min-height: 42px;
	  border: 0;
	  border-radius: 9px;
	  background: transparent;
	  color: #626b79;
	  font: inherit;
	  font-size: 13px;
	  font-weight: 950;
	  cursor: pointer;
	}

	.comparison-mode-btn.active {
	  background: #111827;
	  color: #fff;
	  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
	}

	.comparison-mode-panel,
	.comparison-pair-controls {
	  display: none;
	}

	.comparison-mode-panel.active,
	.comparison-pair-controls.active {
	  display: block;
	}

	.comparison-pair-controls.active {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 12px;
	}

	.comparison-grid {
	  display: grid;
	  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
	  gap: 14px;
	  align-items: start;
	  margin-bottom: 14px;
	}

	.comparison-lower-grid {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 14px;
	  margin-top: 14px;
	}

	.comparison-table-wrap {
	  overflow-x: auto;
	}

	.comparison-table td,
	.comparison-table th {
	  white-space: nowrap;
	}

	.comparison-diff-pill {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  min-width: 72px;
	  padding: 6px 9px;
	  border-radius: 999px;
	  font-size: 12px;
	  font-weight: 950;
	}

	.comparison-diff-pill.green {
	  color: #15803d;
	  background: #ecfdf3;
	}

	.comparison-diff-pill.yellow {
	  color: #a15c00;
	  background: #fff7db;
	}

	.comparison-diff-pill.red {
	  color: #b42318;
	  background: #fff0ed;
	}

	.comparison-diff-pill.neutral {
	  color: #667085;
	  background: #f2f4f7;
	}

	.comparison-alert-list,
	.comparison-similar-list {
	  display: grid;
	  gap: 10px;
	  margin-top: 12px;
	}

	.comparison-alert,
	.comparison-similar-row,
	.comparison-pair-summary {
	  padding: 14px 16px;
	  border: 1px solid #edf0f4;
	  border-radius: 10px;
	  background: #fff;
	}

	.comparison-alert.red {
	  border-color: #ffd3ca;
	  background: #fff8f5;
	}

	.comparison-alert.green {
	  border-color: #bbf7d0;
	  background: #f5fff8;
	}

	.comparison-alert strong,
	.comparison-similar-row strong,
	.comparison-pair-summary strong {
	  display: block;
	  color: #111827;
	  font-size: 14px;
	  font-weight: 950;
	}

	.comparison-alert span,
	.comparison-similar-row span,
	.comparison-pair-summary span {
	  display: block;
	  margin-top: 4px;
	  color: #667085;
	  font-size: 12px;
	  font-weight: 800;
	}

	.comparison-pair-summary-grid {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 12px;
	}

	.comparison-bars {
	  display: grid;
	  gap: 12px;
	  margin-top: 12px;
	}

	.comparison-executive-toolbar {
	  display: grid;
	  grid-template-columns: minmax(0, 1fr) minmax(380px, .7fr);
	  gap: 16px;
	  align-items: end;
	  margin-bottom: 14px;
	}

	.comparison-work-selectors {
	  display: grid;
	  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	  gap: 12px;
	  align-items: end;
	}

	.comparison-versus {
	  min-width: 44px;
	  height: 44px;
	  display: grid;
	  place-items: center;
	  border: 1px solid #e8edf4;
	  border-radius: 999px;
	  color: #ff5a1f;
	  background: #fff7f1;
	  font-size: 13px;
	  font-weight: 950;
	  text-transform: uppercase;
	}

	.comparison-executive-toggle {
	  grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.comparison-demo-note {
	  grid-column: 1 / -1;
	  padding: 10px 12px;
	  border: 1px solid #ffe0d1;
	  border-radius: 10px;
	  color: #9a3412;
	  background: #fff7ed;
	  font-size: 13px;
	  font-weight: 850;
	}

	.comparison-hero-card {
	  display: grid;
	  grid-template-columns: minmax(0, 1fr) auto;
	  gap: 18px;
	  align-items: center;
	  margin-bottom: 14px;
	  padding: 24px !important;
	  background:
	    radial-gradient(circle at top right, rgba(255, 90, 0, .08), transparent 30%),
	    #fff !important;
	}

	.comparison-eyebrow {
	  display: inline-flex;
	  margin-bottom: 8px;
	  color: #ff5a1f;
	  font-size: 12px;
	  font-weight: 950;
	  text-transform: uppercase;
	}

	.comparison-hero-card h2 {
	  margin: 0;
	  color: #111827;
	  font-size: clamp(28px, 3vw, 44px);
	  line-height: 1.04;
	}

		.comparison-hero-card p {
		  max-width: 720px;
		  margin-top: 8px;
		  color: #667085;
		  font-size: 15px !important;
		}

		.comparison-conclusion {
		  max-width: 760px;
		  margin-top: 14px;
		  padding: 14px 16px;
		  border: 1px solid #ffe0d1;
		  border-radius: 12px;
		  color: #7c2d12;
		  background: #fff7ed;
		  font-size: 15px;
		  font-weight: 900;
		  line-height: 1.45;
		}

	.comparison-hero-meter {
	  min-width: 180px;
	  padding: 18px;
	  border: 1px solid #edf0f4;
	  border-radius: 14px;
	  background: #fbfcfd;
	  text-align: right;
	}

	.comparison-hero-meter strong {
	  display: block;
	  color: #111827;
	  font-size: 34px;
	  line-height: 1;
	}

	.comparison-hero-meter span {
	  display: block;
	  margin-top: 8px;
	  color: #667085;
	  font-size: 12px;
	  font-weight: 900;
	  text-transform: uppercase;
	}

	.comparison-executive-grid {
	  display: grid;
	  grid-template-columns: repeat(4, minmax(0, 1fr));
	  gap: 12px;
	  margin-bottom: 14px;
	}

	.comparison-executive-card,
	.comparison-rubro-card,
	.comparison-mini-card,
	.comparison-chart-row,
	.comparison-ranking-row {
	  border: 1px solid #e9edf3;
	  border-radius: 14px;
	  background: #fff;
	  box-shadow: 0 10px 26px rgba(15, 23, 42, .035);
	}

	.comparison-executive-card {
	  min-height: 128px;
	  padding: 18px;
	}

	.comparison-executive-card span,
	.comparison-rubro-card span,
	.comparison-mini-card span {
	  display: block;
	  color: #667085;
	  font-size: 12px;
	  font-weight: 950;
	  text-transform: uppercase;
	}

	.comparison-executive-card strong {
	  display: block;
	  margin-top: 10px;
	  color: #111827;
	  font-size: clamp(24px, 2.5vw, 34px);
	  line-height: 1.05;
	}

	.comparison-executive-card div {
	  margin-top: 10px;
	  color: #667085;
	  font-size: 13px;
	  font-weight: 850;
	}

	.comparison-view {
	  display: none;
	}

	.comparison-view.active {
	  display: block;
	}

	.comparison-card-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	  gap: 12px;
	  margin-top: 14px;
	}

		.comparison-rubro-card,
		.comparison-mini-card {
		  padding: 18px;
		  cursor: pointer;
		}

		.comparison-rubro-card.red {
		  border-color: #ffd3ca;
		  background: #fffaf8;
		}

		.comparison-rubro-card.yellow {
		  border-color: #ffe8a3;
		  background: #fffdf5;
		}

		.comparison-rubro-card.green {
		  border-color: #ccefd9;
		  background: #fbfffc;
		}

	.comparison-rubro-card:hover {
	  border-color: #ffb38f;
	  transform: translateY(-1px);
	}

	.comparison-rubro-card h3,
	.comparison-mini-card h3 {
	  margin: 8px 0 14px;
	  color: #111827;
	  font-size: 18px;
	}

	.comparison-card-values {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 10px;
	}

	.comparison-card-values div {
	  padding: 10px;
	  border-radius: 10px;
	  background: #f8fafc;
	}

	.comparison-card-values small {
	  display: block;
	  color: #667085;
	  font-size: 11px;
	  font-weight: 900;
	  text-transform: uppercase;
	}

	.comparison-card-values strong {
	  display: block;
	  margin-top: 4px;
	  color: #111827;
	  font-size: 16px;
	}

		.comparison-card-footer {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
	  gap: 12px;
	  margin-top: 14px;
	  padding-top: 14px;
	  border-top: 1px solid #edf0f4;
	  color: #667085;
	  font-size: 12px;
		  font-weight: 850;
		}

		.comparison-card-summary {
		  margin-top: 12px;
		  color: #4b5563;
		  font-size: 13px;
		  font-weight: 850;
		  line-height: 1.4;
		}

	.comparison-chart-stack,
	.comparison-ranking-list {
	  display: grid;
	  gap: 10px;
	  margin-top: 12px;
	}

	.comparison-chart-row,
	.comparison-ranking-row {
	  padding: 14px;
	}

	.comparison-chart-head,
	.comparison-ranking-row {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 12px;
	}

	.comparison-chart-head strong,
	.comparison-ranking-row strong {
	  color: #111827;
	  font-size: 14px;
	  font-weight: 950;
	}

	.comparison-chart-head span,
	.comparison-ranking-row span {
	  color: #667085;
	  font-size: 12px;
	  font-weight: 850;
	}

	.comparison-dual-bars {
	  display: grid;
	  gap: 7px;
	  margin-top: 12px;
	}

	.comparison-dual-bar {
	  height: 10px;
	  overflow: hidden;
	  border-radius: 999px;
	  background: #edf0f4;
	}

	.comparison-dual-bar i {
	  display: block;
	  height: 100%;
	  border-radius: inherit;
	  background: linear-gradient(90deg, #111827, #4b5563);
	}

	.comparison-dual-bar.is-b i {
	  background: linear-gradient(90deg, #ff5a1f, #ff9a68);
	}

	.budget-create-grid,
	.generated-advanced-grid {
	  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.budget-observation-field,
.relation-picker-field {
  grid-column: span 2;
}

.budget-table-wrap {
  overflow-x: auto;
}

.budget-usage-pill {
  display: inline-grid;
  min-width: 74px;
  place-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 12px;
  font-weight: 950;
}

.budget-usage-pill.is-exceeded {
  background: #fff1f1;
  color: #b42318;
}

.dashboard-provider-toolbar {
  grid-template-columns: minmax(320px, 1.2fr) minmax(220px, .8fr) !important;
}

.dashboard-search-control {
  position: relative;
}

.dashboard-search-control input {
  width: 100%;
  padding-left: 44px !important;
}

.provider-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 15px;
  height: 15px;
  border: 2px solid #8a93a3;
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}

.provider-search-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  right: -6px;
  bottom: -4px;
  border-radius: 999px;
  background: #8a93a3;
  transform: rotate(45deg);
}

.provider-account-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(2, minmax(150px, .7fr)) minmax(120px, .45fr);
  gap: 12px;
  margin: 18px 0 16px;
}

.provider-account-summary > div {
  min-height: 88px;
  padding: 16px;
  border: 1px solid #edf0f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

.provider-account-summary span {
  display: block;
  color: #737b8a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.provider-account-summary strong {
  display: block;
  margin-top: 7px;
  color: #111827;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.05;
  font-weight: 950;
}

.provider-account-summary small {
  display: block;
  margin-top: 8px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.provider-eye-btn {
  width: 42px;
  height: 38px;
  justify-content: center;
  padding: 0;
}

.eye-icon {
  position: relative;
  display: inline-block;
  width: 21px;
  height: 13px;
  border: 2px solid #111827;
  border-radius: 999px / 680px;
}

.eye-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a00;
  transform: translate(-50%, -50%);
}

.generated-advanced-card {
  margin: 18px 0 22px;
  border: 1px solid #edf0f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
}

.generated-advanced-card summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
}

.generated-advanced-card summary::-webkit-details-marker {
  display: none;
}

.generated-advanced-card summary span {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.generated-advanced-card summary small {
  color: #6b7280;
  font-size: 13px;
  font-weight: 760;
}

.generated-advanced-card[open] summary {
  border-bottom: 1px solid #edf0f4;
}

.generated-advanced-card .generated-advanced-grid {
  padding: 18px;
  margin-bottom: 0;
}

.relation-picker-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.advanced-budget-hint {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #fbfcfd;
  color: #677084;
  font-size: 13px;
  font-weight: 800;
}

.advanced-budget-hint.is-exceeded {
  border-color: #ffd6cc;
  background: #fff6f2;
  color: #b42318;
}

.relation-modal-card {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
}

.relation-candidates {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  margin: 10px 0 16px;
}

.relation-candidate {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e7ebf0;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  text-align: left;
  cursor: pointer;
}

.relation-candidate:hover {
  border-color: #ffb08a;
  background: #fff8f4;
}

.relation-candidate strong,
.relation-candidate span {
  display: block;
}

.relation-candidate strong {
  font-size: 14px;
  font-weight: 950;
}

.relation-candidate span {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .dashboard-metrics,
  .dashboard-rubro-split,
  .dashboard-rubro-card .preview-header,
  .dashboard-rubro-list .dashboard-bar-row,
	  .dashboard-provider-toolbar,
	  .comparison-toolbar,
	  .comparison-executive-toolbar,
	  .comparison-work-selectors,
	  .comparison-hero-card,
	  .comparison-executive-grid,
	  .comparison-grid,
	  .comparison-lower-grid,
	  .comparison-pair-controls.active,
	  .comparison-pair-summary-grid,
	  .budget-create-grid,
	  .generated-advanced-grid,
	  .provider-account-summary {
	    grid-template-columns: minmax(0, 1fr) !important;
	  }

  .budget-observation-field,
  .relation-picker-field {
    grid-column: auto;
  }

  .dashboard-rubro-summary {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .dashboard-rubro-list .dashboard-bar-head span {
    justify-self: start;
  }
}

@media (max-width: 1380px) {
  .dashboard-lower-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1080px) {
  .dashboard-main-grid,
  .dashboard-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .dashboard-kpis,
  .dashboard-main-grid,
  .dashboard-lower-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.company-settings-card {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #edf0f3;
}

.company-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.company-settings-full {
  grid-column: 1 / -1;
}

.company-settings-card textarea,
.review-activity textarea {
  min-height: 96px;
  resize: vertical;
}

.review-activity {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #edf0f3;
}

.timeline-list,
.comment-list {
  display: grid;
  gap: 10px;
}

.timeline-item,
.comment-item {
  padding: 12px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fff;
}

.timeline-item strong,
.comment-item strong {
  display: block;
  font-size: 14px;
  color: #101828;
}

.timeline-item span,
.comment-item span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #7a8290;
}

.timeline-item p,
.comment-item p {
  margin: 8px 0 0;
  color: #4b5563;
}

.review-activity textarea {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  font: inherit;
}

.review-activity-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Fast approval UX for Civile and pending orders. */
.orders-table.orders-table-card-mode {
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 14px !important;
  background: transparent !important;
  table-layout: auto !important;
}

#sentOrdersSection .orders-table.orders-table-card-mode {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  white-space: normal !important;
  border-collapse: separate !important;
}

.orders-table.orders-table-card-mode thead {
  display: none !important;
}

.orders-table.orders-table-card-mode thead,
#sentOrdersSection .orders-table.orders-table-card-mode thead {
  display: none !important;
}

.orders-table.orders-table-card-mode tbody,
.orders-table.orders-table-card-mode tr,
.orders-table.orders-table-card-mode td,
#sentOrdersSection .orders-table.orders-table-card-mode tbody,
#sentOrdersSection .orders-table.orders-table-card-mode tr,
#sentOrdersSection .orders-table.orders-table-card-mode td {
  display: block !important;
  width: 100% !important;
}

.orders-table.orders-table-card-mode tr,
.orders-table.orders-table-card-mode tbody tr:hover {
  background: transparent !important;
}

.orders-table.orders-table-card-mode td {
  padding: 0 !important;
  border: 0 !important;
}

.orders-card-scroll {
  overflow: visible !important;
}

.approval-order-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #e8ecf2;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96)),
    radial-gradient(circle at top right, rgba(255,90,31,.08), transparent 36%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.approval-order-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.approval-order-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  color: #707786;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.approval-order-title {
  margin: 0;
  color: #111827;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.approval-order-subtitle {
  margin-top: 7px;
  color: #4b5563;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
}

.approval-order-amount {
  min-width: 190px;
  padding: 14px 16px;
  border: 1px solid #ffe0d2;
  border-radius: 16px;
  background: #fff7f2;
  color: #111827;
  text-align: right;
}

.approval-order-amount span {
  display: block;
  margin-bottom: 4px;
  color: #8c93a1;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.approval-order-amount strong {
  display: block;
  color: #ff5a1f;
  font-size: 22px;
  font-weight: 950;
  white-space: nowrap;
}

.approval-order-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.approval-order-info-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid #edf0f3;
  border-radius: 14px;
  background: #fff;
}

.approval-order-info-item span {
  display: block;
  margin-bottom: 5px;
  color: #7a8290;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.approval-order-info-item strong {
  display: block;
  overflow: hidden;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-order-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.approval-order-actions .table-btn {
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  justify-content: center;
  border-radius: 12px !important;
  font-weight: 950 !important;
}

.approval-order-actions .request-changes-btn {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #c2410c !important;
}

.review-fast-mode .review-activity {
  display: none !important;
}

.review-order-details {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #edf0f3;
  border-radius: 14px;
  background: #fbfcfd;
}

.review-order-details h3,
.review-documents-heading {
  margin: 0 0 6px;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.review-order-detail-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  color: #495060;
  font-size: 13px;
  font-weight: 750;
}

.review-order-detail-row span:first-child {
  color: #8a92a1;
  font-weight: 950;
}

.review-document-list {
  display: grid;
  gap: 10px;
}

.review-document-list .attachment-item {
  display: grid;
  gap: 8px;
}

@media (max-width: 980px) {
  .approval-order-card-head,
  .approval-order-info,
  .approval-order-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .approval-order-amount {
    text-align: left;
  }
}

@media (max-width: 760px) {
  #sentOrdersSection .orders-table.orders-table-card-mode tr {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #sentOrdersSection .orders-table.orders-table-card-mode tr::before,
  #sentOrdersSection .orders-table.orders-table-card-mode tr::after {
    content: none !important;
  }

  .approval-order-card {
    padding: 16px;
    border-radius: 16px;
  }

  .approval-order-title {
    font-size: 19px;
  }

  .approval-order-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .company-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.login-help-link {
  display: inline-flex;
  justify-content: center;
  margin-top: 14px;
  color: var(--orange);
  font-weight: 850;
  text-decoration: none;
}

[data-admin-panel="alertsPanel"],
#alertsPanel,
.field:has(#teamSettingNotificationEmail) {
  display: none !important;
}

#mobileNotificationCount[hidden] {
  display: none !important;
}

#ordersSummary {
  display: none !important;
}

.orders-table-card-mode .approval-order-card {
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 16px 44px rgba(15, 23, 42, .07);
}

.approval-order-meta-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.priority-badge,
.document-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .01em;
  color: #475467;
  background: #f2f4f7;
  border: 1px solid rgba(15, 23, 42, .08);
}

.priority-badge.priority-alta {
  color: #9a4b00;
  background: #fff3df;
  border-color: rgba(255, 90, 0, .22);
}

.priority-badge.priority-urgente {
  color: #b42318;
  background: #fff1f0;
  border-color: rgba(180, 35, 24, .18);
}

.document-type-badge.type-mc {
  color: #067647;
  background: #ecfdf3;
  border-color: rgba(6, 118, 71, .18);
}

.document-type-badge.type-fc {
  color: #175cd3;
  background: #eff8ff;
  border-color: rgba(23, 92, 211, .18);
}

.document-type-badge.type-unclassified {
  color: #7a2e0e;
  background: #fff7ed;
  border-color: rgba(255, 90, 0, .18);
}

.document-type-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.document-type-actions .table-btn {
  min-height: 36px;
}

.budget-usage-stack {
  min-width: 120px;
}

.budget-usage-track {
  position: relative;
  height: 10px;
  width: 100%;
  min-width: 120px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f5;
}

.budget-usage-committed,
.budget-usage-spent {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.budget-usage-committed {
  background: rgba(255, 90, 0, .26);
}

.budget-usage-spent {
  background: var(--orange);
}
  .reservations-shell{max-width:1240px;margin:0 auto}.reservations-tabs{display:flex;gap:8px;margin:22px 0;border-bottom:1px solid var(--border);padding-bottom:10px}.reservations-tab{border:0;background:transparent;padding:10px 14px;font-weight:800;color:var(--muted);cursor:pointer}.reservations-tab.active{color:var(--orange);border-bottom:2px solid var(--orange)}.reservations-panel{display:none}.reservations-panel.active{display:block}.reservation-form-sections{display:grid;gap:18px}.reservation-form-section{border-top:1px solid var(--border);padding-top:16px}.reservation-form-section h3{margin:0 0 14px}.reservation-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.reservation-field-wide{grid-column:1/-1}.reservation-percentage-control{position:relative}.reservation-percentage-control input{padding-right:52px}.reservation-percentage-suffix{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-weight:850;color:var(--orange);pointer-events:none}.reservation-calculated-input{background:#f7f8fa!important;color:var(--ink)!important;font-weight:800;cursor:not-allowed}.reservation-calculation-help{display:block;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.35}.reservation-select-or-text{display:grid;gap:8px}.reservation-repeatable-list{display:grid;gap:8px}.reservation-repeatable-row{display:grid;grid-template-columns:32px minmax(0,1fr) 42px;gap:8px;align-items:center}.reservation-repeatable-index{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;background:#f7f8fa;color:var(--muted);font-weight:800}.reservation-repeatable-remove{width:42px;height:42px;padding:0;display:grid;place-items:center}.reservation-repeatable-add{margin-top:10px}.reservation-delete-audit{margin-top:6px;max-width:280px;color:#8b2f20;font-size:12px;line-height:1.4}.reservation-actions{display:flex;gap:10px;align-items:center;margin-top:20px}.reservation-status{font-weight:700;color:var(--muted)}.reservation-template-editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.reservation-template-editor textarea{min-height:420px;font-family:inherit;line-height:1.55}.reservation-variable-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}.reservation-variable-btn{justify-content:flex-start}.reservation-stats-grid,.reservation-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.reservation-stat,.reservation-summary-item{border:1px solid var(--border);padding:16px;border-radius:8px;background:#fff}.reservation-stat strong,.reservation-summary-item strong{display:block;font-size:24px;margin-top:6px;color:var(--ink)}.reservation-summary-item span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.reservation-summary-grid{margin:18px 0}.permission-module-note{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-left:3px solid var(--orange);background:#fff;color:var(--muted);font-size:13px}.permission-module-note strong{color:var(--ink)}.permission-toggle.reservations-permission{border-color:rgba(255,90,0,.24)!important;background:#fff!important}.reservations-only .sidebar-footer,.reservations-only .mobile-bottom-nav{display:none!important}@media(max-width:800px){.reservation-fields-grid,.reservation-template-editor,.reservation-stats-grid,.reservation-summary-grid{grid-template-columns:1fr}.reservation-field-wide{grid-column:1}.reservations-tabs{overflow-x:auto}.reservation-template-editor textarea{min-height:300px}.reservation-history-filters{grid-template-columns:1fr!important}}
  .reservation-template-editor{
    display:grid;
    grid-template-columns:minmax(0,1fr) 370px;
    gap:24px;
    align-items:start;
    margin-top:18px;
  }
  .reservation-editor-main,
  .reservation-field-manager{
    min-width:0;
  }
  .reservation-summary-grid.reservation-summary-grid-compact{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .reservation-editor-toolbar{
    display:flex;
    gap:6px;
    align-items:center;
    padding:8px;
    border:1px solid var(--border);
    border-bottom:0;
    background:#f7f8fa;
    border-radius:8px 8px 0 0;
  }
  .reservation-format-btn{
    width:38px;
    height:36px;
    padding:0;
    display:grid;
    place-items:center;
    font-size:15px;
  }
  .reservation-rich-editor{
    min-height:720px;
    padding:36px 42px;
    border:1px solid var(--border);
    border-radius:0 0 8px 8px;
    background:#fff;
    color:var(--ink);
    font-family:Arial,sans-serif;
    font-size:15px;
    line-height:1.65;
    outline:none;
    overflow:auto;
  }
  .reservation-rich-editor:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(255,90,0,.09);
  }
  .reservation-rich-editor h1,
  .reservation-rich-editor h2{
    text-align:center;
  }
  .reservation-rich-editor .reservation-pdf-page-break{
    position:relative;
    height:42px;
    margin:32px -42px;
    border-top:2px dashed #cfd4dc;
    background:#f7f8fa;
    pointer-events:none;
  }
  .reservation-rich-editor .reservation-pdf-page-break::after{
    content:"Dorso · Página 2";
    position:absolute;
    left:50%;
    top:0;
    transform:translate(-50%,-50%);
    padding:5px 12px;
    border:1px solid #cfd4dc;
    border-radius:999px;
    background:#fff;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
  }
  .reservation-field-conditional-hidden{display:none!important}
  .reservation-field-manager{
    position:sticky;
    top:18px;
    display:grid;
    gap:18px;
  }
  .reservation-field-builder{
    display:grid;
    gap:11px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
  }
  .reservation-field-builder-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .reservation-field-builder .field{
    margin:0;
  }
  .reservation-variable-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:520px;
    overflow:auto;
    padding-right:4px;
  }
  .reservation-variable-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 40px;
    gap:6px;
  }
  .reservation-variable-btn{
    justify-content:flex-start;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .reservation-variable-remove{
    width:40px;
    padding:0;
    display:grid;
    place-items:center;
  }
  .reservation-template-footer-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:20px;
  }
  @media(max-width:1000px){
    .reservation-template-editor{grid-template-columns:1fr}
    .reservation-field-manager{position:static}
    .reservation-rich-editor{min-height:560px;padding:26px}
  }
  @media(max-width:800px){
    .reservation-summary-grid.reservation-summary-grid-compact{grid-template-columns:1fr}
    .reservation-rich-editor{min-height:460px;padding:20px;font-size:14px}
    .reservation-field-builder-grid{grid-template-columns:1fr}
  }

  /* Presupuestos de Obra */
  .work-budget-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin:4px 0 22px;
  }
  .work-budget-eyebrow{
    display:block;
    margin-bottom:8px;
    color:#ff5a1f;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
  }
  .work-budget-header h2{
    margin:0;
    color:#111827;
    font-size:30px;
    line-height:1.12;
  }
  .work-budget-header p{
    max-width:720px;
    margin:8px 0 0;
    color:#667085;
    font-size:14px;
    line-height:1.5;
  }
  .work-budget-header-actions{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(180px,.8fr) auto;
    gap:10px;
    align-items:start;
    min-width:min(680px,54vw);
  }
  .work-budget-header-actions .field{
    margin:0;
  }
  .work-budget-action-field label{
    visibility:hidden;
  }
  .work-budget-action-field .btn{
    width:100%;
  }
  .work-budget-header-actions select,
  .work-budget-filters select,
  .work-budget-filters input{
    min-height:44px;
    padding:10px 12px;
    border-radius:10px;
    border-color:#e2e7ee;
    background:#fff;
    font-size:13px;
    font-weight:750;
  }
  .work-budget-export{
    height:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    border-radius:10px;
    white-space:nowrap;
  }
  .work-budget-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
  }
  .work-budget-metric{
    position:relative;
    min-height:128px;
    padding:20px;
    overflow:hidden;
    border:1px solid #e6eaf0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
    color:#111827;
    text-align:left;
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  .work-budget-metric:hover{
    transform:translateY(-2px);
    border-color:#d5dbe4;
    box-shadow:0 14px 32px rgba(15,23,42,.07);
  }
  .work-budget-metric::after{
    content:"";
    position:absolute;
    top:20px;
    right:20px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ff5a1f;
    box-shadow:0 0 0 7px #fff2ec;
  }
  .work-budget-metric.is-spent::after{background:#169b62;box-shadow:0 0 0 7px #ecf8f2}
  .work-budget-metric.is-deviation::after{background:#64748b;box-shadow:0 0 0 7px #f1f5f9}
  .work-budget-metric.is-deviation.is-negative::after{background:#c53a34;box-shadow:0 0 0 7px #fff0ef}
  .work-budget-metric.is-deviation.is-positive::after{background:#169b62;box-shadow:0 0 0 7px #ecf8f2}
  .work-budget-metric.is-available::after{background:#2878e5;box-shadow:0 0 0 7px #eef5ff}
  .work-budget-metric span{
    display:block;
    padding-right:30px;
    color:#667085;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
  }
  .work-budget-metric strong{
    display:block;
    margin-top:12px;
    font-size:27px;
    line-height:1.08;
  }
  .work-budget-metric small{
    display:block;
    margin-top:10px;
    color:#7a8392;
    font-size:12px;
    font-weight:750;
  }
  .work-budget-metric.is-deviation.is-negative strong{color:#b42318}
  .work-budget-metric.is-deviation.is-positive strong{color:#087a4e}
  .work-budget-overview{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr);
    gap:14px;
    margin-bottom:16px;
  }
  .work-budget-panel{
    min-width:0;
    padding:20px;
    border:1px solid #e6eaf0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 26px rgba(15,23,42,.035);
  }
  .work-budget-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
  }
  .work-budget-panel-head span{
    display:block;
    color:#111827;
    font-size:16px;
    font-weight:950;
  }
  .work-budget-panel-head h3{
    margin:7px 0 0;
    color:#111827;
    font-size:30px;
    line-height:1;
  }
  .work-budget-panel-head p{
    margin:5px 0 0;
    color:#7a8392;
    font-size:12px;
    line-height:1.45;
  }
  .work-budget-link{
    padding:0;
    border:0;
    background:transparent;
    color:#ff5a1f;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
  }
  .work-budget-execution-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 176px;
    gap:28px;
    align-items:center;
  }
  .work-budget-progress-track{
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:#edf0f4;
  }
  .work-budget-progress-track i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:#ff5a1f;
    transition:width .4s ease;
  }
  .work-budget-progress-track i.is-exceeded{background:#c53a34}
  .work-budget-progress-labels{
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-top:10px;
    color:#7a8392;
    font-size:11px;
  }
  .work-budget-progress-labels span:last-child{text-align:right}
  .work-budget-progress-labels strong{
    display:block;
    margin-bottom:3px;
    color:#111827;
    font-size:13px;
  }
  .work-budget-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:22px;
    color:#667085;
    font-size:11px;
    font-weight:800;
  }
  .work-budget-legend span{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .work-budget-legend i{
    width:8px;
    height:8px;
    border-radius:50%;
  }
  .work-budget-legend i.is-spent{background:#ff5a1f}
  .work-budget-legend i.is-committed{background:#f5b945}
  .work-budget-legend i.is-available{background:#e5e9ef}
  .work-budget-legend strong{color:#111827}
  .work-budget-donut{
    width:158px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(#ff5a1f 0 0%,#f5b945 0 0%,#e5e9ef 0 100%);
  }
  .work-budget-donut::before{
    content:"";
    grid-area:1/1;
    width:104px;
    aspect-ratio:1;
    border-radius:50%;
    background:#fff;
  }
  .work-budget-donut>div{
    z-index:1;
    grid-area:1/1;
    text-align:center;
  }
  .work-budget-donut strong{
    display:block;
    color:#111827;
    font-size:22px;
  }
  .work-budget-donut span{
    display:block;
    margin-top:3px;
    color:#7a8392;
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
  }
  .work-budget-deviation-list{
    display:grid;
  }
  .work-budget-deviation-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:14px;
    align-items:center;
    min-height:44px;
    border-top:1px solid #edf0f4;
    color:#111827;
    font-size:12px;
  }
  .work-budget-deviation-row:first-child{border-top:0}
  .work-budget-deviation-row button{
    min-width:0;
    padding:0;
    overflow:hidden;
    border:0;
    background:transparent;
    color:#111827;
    font:inherit;
    font-weight:850;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
  }
  .work-budget-deviation-row strong,
  .work-budget-deviation-row span{
    font-size:12px;
    font-weight:900;
  }
  .work-budget-deviation-row.is-negative strong,
  .work-budget-deviation-row.is-negative span{color:#b42318}
  .work-budget-deviation-row.is-positive strong,
  .work-budget-deviation-row.is-positive span{color:#087a4e}
  .work-budget-tabs{
    display:flex;
    gap:4px;
    margin:0 0 14px;
    overflow-x:auto;
    border-bottom:1px solid #e4e8ee;
  }
  .work-budget-tabs button{
    flex:0 0 auto;
    padding:12px 15px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:#667085;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
  }
  .work-budget-tabs button.active{
    border-bottom-color:#ff5a1f;
    color:#111827;
  }
  .work-budget-view{display:none}
  .work-budget-view.active{display:block}
  .work-budget-main-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 292px;
    gap:14px;
    align-items:start;
  }
  .work-budget-table-panel{padding:0}
  .work-budget-table-panel .work-budget-panel-head{padding:20px 20px 0}
  .work-budget-updated{
    color:#8a93a2!important;
    font-size:11px!important;
    font-weight:800!important;
  }
  .work-budget-table{
    min-width:1240px;
    border-collapse:collapse;
  }
  .work-budget-table th{
    padding:12px 10px;
    border-top:1px solid #edf0f4;
    border-bottom:1px solid #e6eaf0;
    background:#fafbfc;
    color:#727b89;
    font-size:10px;
    font-weight:950;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .work-budget-table td{
    padding:13px 10px;
    border-bottom:1px solid #edf0f4;
    color:#283141;
    font-size:12px;
    font-weight:750;
    white-space:nowrap;
  }
  .work-budget-table tbody tr:hover{background:#fcfcfd}
  .work-budget-table .is-money-button{
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    font-weight:850;
    cursor:pointer;
  }
  .work-budget-table .is-money-button:hover{color:#ff5a1f}
  .work-budget-money-negative{color:#b42318!important;font-weight:900!important}
  .work-budget-money-positive{color:#087a4e!important;font-weight:900!important}
  .work-budget-progress-cell{
    display:grid;
    grid-template-columns:72px auto;
    gap:8px;
    align-items:center;
  }
  .work-budget-progress-cell i{
    display:block;
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:#e8ecf1;
  }
  .work-budget-progress-cell i::after{
    content:"";
    display:block;
    width:var(--progress,0%);
    height:100%;
    border-radius:inherit;
    background:#169b62;
  }
  .work-budget-progress-cell.is-risk i::after{background:#d59a18}
  .work-budget-progress-cell.is-exceeded i::after{background:#c53a34}
  .work-budget-status{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:5px 9px;
    border-radius:999px;
    background:#edf8f2;
    color:#087a4e;
    font-size:10px;
    font-weight:900;
  }
  .work-budget-status.is-risk{background:#fff7df;color:#9b6810}
  .work-budget-status.is-exceeded{background:#fff0ef;color:#b42318}
  .work-budget-eye{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #e2e7ee;
    border-radius:8px;
    background:#fff;
    color:#344054;
    cursor:pointer;
  }
  .work-budget-eye:hover{border-color:#ff5a1f;color:#ff5a1f}
  .work-budget-eye svg{width:15px;height:15px}
  .work-budget-filters{
    position:sticky;
    top:20px;
    display:grid;
    gap:15px;
    align-content:start;
    align-self:start;
    padding:20px;
  }
  .work-budget-filters .work-budget-panel-head{margin-bottom:0}
  .work-budget-filters .field{margin:0}
  .work-budget-filters .btn{
    width:100%;
    min-height:44px;
    margin:0;
  }
  .work-budget-date-grid{
    display:none;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .work-budget-date-grid.is-visible{display:grid}
  .work-budget-filter-note{
    padding:13px;
    border-radius:10px;
    background:#f8fafc;
  }
  .work-budget-filter-note strong,
  .work-budget-filter-note span{display:block}
  .work-budget-filter-note strong{color:#111827;font-size:12px}
  .work-budget-filter-note span{margin-top:5px;color:#7a8392;font-size:11px;line-height:1.4}
  .work-budget-chart{
    min-height:330px;
    display:grid;
    align-items:end;
    overflow-x:auto;
  }
  .work-budget-bars{
    min-width:720px;
    min-height:290px;
    display:flex;
    align-items:flex-end;
    gap:16px;
    padding:28px 8px 8px;
    border-bottom:1px solid #dfe4ea;
  }
  .work-budget-bar-group{
    flex:1 0 58px;
    min-width:58px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
    align-items:end;
    height:245px;
    position:relative;
  }
  .work-budget-bar-group i{
    display:block;
    min-height:2px;
    border-radius:6px 6px 2px 2px;
    background:#ff5a1f;
  }
  .work-budget-bar-group i.is-committed{background:#f5b945}
  .work-budget-bar-group i.is-available{background:#2878e5}
  .work-budget-bar-group span{
    position:absolute;
    left:50%;
    bottom:-26px;
    transform:translateX(-50%);
    color:#7a8392;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
  }
  .work-budget-evolution-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:18px;
  }
  .work-budget-evolution-summary div{
    padding:15px;
    border:1px solid #e6eaf0;
    border-radius:12px;
    background:#fafbfc;
  }
  .work-budget-evolution-summary span,
  .work-budget-evolution-summary strong{display:block}
  .work-budget-evolution-summary span{
    color:#7a8392;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
  }
  .work-budget-evolution-summary strong{
    margin-top:7px;
    color:#111827;
    font-size:17px;
  }
  .work-budget-chart-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    margin-bottom:4px;
    color:#667085;
    font-size:11px;
    font-weight:850;
  }
  .work-budget-chart-legend span{
    display:inline-flex;
    align-items:center;
    gap:7px;
  }
  .work-budget-chart-legend i{
    width:9px;
    height:9px;
    border-radius:3px;
    background:#ff5a1f;
  }
  .work-budget-chart-legend i.is-committed{background:#f5b945}
  .work-budget-chart-legend i.is-available{background:#2878e5}
  .work-budget-svg{
    width:100%;
    min-width:720px;
    height:320px;
  }
  .work-budget-history{
    display:grid;
  }
  .work-budget-history-row{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px 0;
    border-top:1px solid #edf0f4;
  }
  .work-budget-history-row:first-child{border-top:0}
  .work-budget-history-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#fff2ec;
    color:#ff5a1f;
    font-weight:950;
  }
  .work-budget-history-row strong,
  .work-budget-history-row span{display:block}
  .work-budget-history-row strong{color:#111827;font-size:12px}
  .work-budget-history-row span{margin-top:4px;color:#7a8392;font-size:11px}
  .work-budget-history-row time{color:#7a8392;font-size:11px;white-space:nowrap}
  .work-budget-trace-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
  }
  .work-budget-trace-modal.is-open{display:block}
  .work-budget-trace-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.34);
    backdrop-filter:blur(3px);
  }
  .work-budget-trace-sheet{
    position:absolute;
    top:0;
    right:0;
    width:min(620px,100%);
    height:100%;
    padding:24px;
    overflow:auto;
    border-left:1px solid #e4e8ee;
    background:#fff;
    box-shadow:-24px 0 70px rgba(15,23,42,.14);
  }
  .work-budget-trace-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding-bottom:18px;
    border-bottom:1px solid #edf0f4;
  }
  .work-budget-trace-head span{
    color:#ff5a1f;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
  }
  .work-budget-trace-head h3{
    margin:6px 0 0;
    color:#111827;
    font-size:22px;
  }
  .work-budget-trace-head p{
    margin:5px 0 0;
    color:#7a8392;
    font-size:12px;
  }
  .work-budget-trace-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:16px 0;
  }
  .work-budget-trace-summary div{
    padding:13px;
    border:1px solid #e6eaf0;
    border-radius:10px;
    background:#fafbfc;
  }
  .work-budget-trace-summary span,
  .work-budget-trace-summary strong{display:block}
  .work-budget-trace-summary span{color:#7a8392;font-size:10px;font-weight:900;text-transform:uppercase}
  .work-budget-trace-summary strong{margin-top:5px;color:#111827;font-size:15px}
  .work-budget-trace-list{display:grid;gap:9px}
  .work-budget-order-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:15px;
    border:1px solid #e6eaf0;
    border-radius:12px;
    background:#fff;
  }
  .work-budget-order-row strong,
  .work-budget-order-row span{display:block}
  .work-budget-order-row strong{color:#111827;font-size:13px}
  .work-budget-order-row span{margin-top:4px;color:#727b89;font-size:11px;line-height:1.35}
  .work-budget-order-row aside{text-align:right}
  .work-budget-order-row aside strong{color:#ff5a1f}
  .work-budget-order-row .btn{margin-top:8px;padding:7px 10px;border-radius:8px;font-size:10px}
  .completed-works-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
  }
  .completed-works-heading h3{margin:5px 0 5px;color:#111827;font-size:22px}
  .completed-works-heading p{max-width:680px;margin:0;color:#737d8c;font-size:12px;line-height:1.5}
  .completed-works-metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
  }
  .completed-works-metrics article{
    padding:18px;
    border:1px solid #e6eaf0;
    border-radius:8px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
  }
  .completed-works-metrics span,
  .completed-works-metrics strong{display:block}
  .completed-works-metrics span{color:#7a8392;font-size:10px;font-weight:900;text-transform:uppercase}
  .completed-works-metrics strong{margin-top:8px;color:#111827;font-size:20px}
  .completed-works-layout{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
    gap:16px;
    align-items:start;
  }
  .completed-works-list{display:grid;gap:8px}
  .completed-work-row{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(90px,.65fr)) auto;
    gap:14px;
    align-items:center;
    padding:14px 0;
    border-top:1px solid #edf0f4;
  }
  .completed-work-row:first-child{border-top:0}
  .completed-work-row strong,
  .completed-work-row span,
  .completed-work-row small{display:block}
  .completed-work-row strong{color:#111827;font-size:13px}
  .completed-work-row span{margin-top:4px;color:#7a8392;font-size:11px}
  .completed-work-row small{color:#8a93a1;font-size:9px;font-weight:850;text-transform:uppercase}
  .completed-work-row b{margin-top:4px;color:#303846;font-size:12px}
  .completed-work-actions{display:flex;gap:6px}
  .completed-work-actions button{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid #dfe4ea;
    border-radius:7px;
    background:#fff;
    color:#596273;
    cursor:pointer;
  }
  .completed-work-actions button:hover{border-color:#ffb092;color:#e94a10;background:#fff7f3}
  .completed-work-actions button.is-delete:hover{border-color:#f3b5b5;color:#c92a2a;background:#fff5f5}
  .completed-work-compare{position:sticky;top:18px}
  .completed-work-compare-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .completed-work-compare-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
  }
  .completed-work-compare-summary article{
    padding:12px;
    border:1px solid #e7eaf0;
    border-radius:8px;
    background:#fafbfc;
  }
  .completed-work-compare-summary span,
  .completed-work-compare-summary strong{display:block}
  .completed-work-compare-summary span{color:#7f8896;font-size:9px;font-weight:900;text-transform:uppercase}
  .completed-work-compare-summary strong{margin-top:6px;color:#111827;font-size:13px}
  .completed-work-compare-table{margin-top:14px}
  .completed-work-compare-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px 90px 76px;
    gap:8px;
    align-items:center;
    padding:10px 0;
    border-top:1px solid #edf0f4;
    font-size:10px;
  }
  .completed-work-compare-line strong{color:#27303d}
  .completed-work-compare-line span{text-align:right;color:#596273}
  .completed-work-compare-line b{text-align:right;color:#c52b24}
  .completed-work-compare-line b.is-favorable{color:#16874b}
  .completed-work-modal-card{
    --users-accent:#ff5a1f;
    --users-accent-strong:#e94a10;
    width:min(820px,100%);
    max-height:min(92vh,900px);
    overflow:auto;
  }
  .completed-work-modal-card .users-modal-actions .users-btn.primary{
    min-width:180px;
    border-color:#ff5a1f;
    background:#ff5a1f;
    color:#fff;
    box-shadow:0 10px 22px rgba(255,90,31,.2);
  }
  .completed-work-modal-card .users-modal-actions .users-btn.primary:hover{
    border-color:#e94a10;
    background:#e94a10;
  }
  .completed-work-form{padding-bottom:8px}
  .completed-work-costs-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 24px;
    padding:18px 0 12px;
    border-top:1px solid #edf0f4;
  }
  .completed-work-costs-head strong,
  .completed-work-costs-head span{display:block}
  .completed-work-costs-head strong{color:#202631;font-size:13px}
  .completed-work-costs-head span{margin-top:4px;color:#7c8593;font-size:10px}
  .completed-work-costs{display:grid;gap:8px;padding:0 24px 8px}
  .completed-work-cost-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px minmax(0,.8fr) 34px;
    gap:8px;
    align-items:center;
  }
  .completed-work-cost-row select,
  .completed-work-cost-row input{min-height:42px}
  .completed-work-cost-remove{
    width:34px;
    height:34px;
    border:1px solid #e3e7ed;
    border-radius:7px;
    background:#fff;
    color:#8a93a1;
    cursor:pointer;
  }
  .work-budget-composition-list{display:grid;gap:22px}
  .work-budget-composition-work{
    padding-top:22px;
    border-top:1px solid #e8ecf1;
  }
  .work-budget-composition-work:first-child{
    padding-top:0;
    border-top:0;
  }
  .work-budget-composition-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
  }
  .work-budget-composition-head h4{
    margin:0;
    color:#111827;
    font-size:17px;
  }
  .work-budget-composition-head span{
    display:block;
    margin-top:4px;
    color:#7a8392;
    font-size:11px;
  }
  .work-budget-composition-head strong{
    color:#111827;
    font-size:17px;
    white-space:nowrap;
  }
  .work-budget-composition-category{
    display:grid;
    grid-template-columns:minmax(180px,.75fr) minmax(220px,1fr) 120px 62px;
    gap:16px;
    align-items:center;
    min-height:42px;
    padding:7px 0;
  }
  .work-budget-composition-category>strong{
    min-width:0;
    overflow:hidden;
    color:#303846;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .work-budget-composition-track{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#edf0f4;
  }
  .work-budget-composition-track i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:#ff5a1f;
  }
  .work-budget-composition-amount{
    color:#4b5563;
    font-size:12px;
    font-weight:800;
    text-align:right;
    white-space:nowrap;
  }
  .work-budget-composition-percent{
    color:#ff5a1f;
    font-size:13px;
    font-weight:950;
    text-align:right;
    white-space:nowrap;
  }

  @media(max-width:1320px){
    .work-budget-header{align-items:flex-start;flex-direction:column}
    .work-budget-header-actions{width:100%;min-width:0}
    .work-budget-overview{grid-template-columns:1fr}
    .work-budget-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .completed-works-layout{grid-template-columns:1fr}
    .completed-work-compare{position:static}
  }
  @media(max-width:980px){
    .work-budget-main-layout{grid-template-columns:1fr}
    .work-budget-filters{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
    .work-budget-filters .work-budget-panel-head,
    .work-budget-filters .work-budget-filter-note{grid-column:1/-1}
    .work-budget-header-actions{grid-template-columns:1fr 1fr auto}
    .completed-work-row{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(90px,.7fr)) auto}
    .completed-work-row > div:nth-child(4){display:none}
  }
  @media(max-width:720px){
    .work-budget-header h2{font-size:26px}
    .work-budget-header-actions{grid-template-columns:1fr}
    .work-budget-metrics{grid-template-columns:1fr}
    .work-budget-metric{min-height:112px}
    .work-budget-execution-body{grid-template-columns:1fr}
    .work-budget-donut{margin:0 auto}
    .work-budget-filters{grid-template-columns:1fr}
    .work-budget-filters .work-budget-panel-head,
    .work-budget-filters .work-budget-filter-note{grid-column:auto}
    .work-budget-date-grid{grid-template-columns:1fr}
    .work-budget-evolution-summary{grid-template-columns:1fr}
    .completed-works-heading{align-items:stretch;flex-direction:column}
    .completed-works-heading .btn{width:100%}
    .completed-works-metrics{grid-template-columns:1fr}
    .completed-work-row{grid-template-columns:1fr auto;padding:14px}
    .completed-work-row > div:not(:first-child):not(:last-child){display:grid;grid-template-columns:120px 1fr;margin-top:5px}
    .completed-work-row > div:not(:first-child):not(:last-child) small{align-self:center}
    .completed-work-actions{grid-column:2;grid-row:1}
    .completed-work-compare-selects,
    .completed-work-compare-summary{grid-template-columns:1fr}
    .completed-work-compare-line{grid-template-columns:minmax(0,1fr) 78px 78px}
    .completed-work-compare-line b{display:none}
    .completed-work-cost-row{grid-template-columns:1fr 120px 34px}
    .completed-work-cost-row .completed-work-cost-note{grid-column:1/-1;grid-row:2}
    .work-budget-composition-head{align-items:flex-start;flex-direction:column}
    .work-budget-composition-category{
      grid-template-columns:minmax(0,1fr) 58px;
      gap:7px 12px;
      padding:10px 0;
    }
    .work-budget-composition-track{grid-column:1/-1;grid-row:2}
    .work-budget-composition-amount{grid-column:1;grid-row:3;text-align:left}
    .work-budget-composition-percent{grid-column:2;grid-row:1}
    .work-budget-trace-sheet{padding:18px}
    .work-budget-trace-summary{grid-template-columns:1fr}
  }

  /* Orders directory: native TSIGNS density with clearer hierarchy. */
  .work-budget-metric{
    cursor:default;
  }
  .work-budget-metric:hover{
    transform:none;
    border-color:#e6eaf0;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
  }
  #sentOrdersSection{
    --orders-line:#e7eaf0;
    --orders-muted:#707887;
    --orders-ink:#151923;
  }
  #sentOrdersSection .orders-page-header{
    align-items:center;
    margin-bottom:20px;
  }
  #sentOrdersSection .orders-page-header h1{
    margin-bottom:5px;
  }
  .orders-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .orders-header-actions .btn{
    min-height:44px;
    margin:0;
    border-radius:8px;
  }
  #sentOrdersSection .orders-page-surface{
    padding:0 !important;
    overflow:visible !important;
    border:1px solid var(--orders-line) !important;
    border-radius:8px !important;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.035) !important;
  }
  #sentOrdersSection .orders-filter-panel{
    margin:0;
    padding:20px;
    border:0;
    border-bottom:1px solid var(--orders-line);
    border-radius:8px 8px 0 0;
    background:#fff;
  }
  #sentOrdersSection .orders-filter-heading{
    align-items:flex-end;
    margin-bottom:16px;
  }
  #sentOrdersSection .orders-filter-heading span{
    color:#ff5a1f;
    letter-spacing:0;
  }
  #sentOrdersSection .orders-filter-heading strong{
    font-size:15px;
  }
  #sentOrdersSection .orders-filter-heading-actions{
    display:flex;
    align-items:flex-end;
    gap:10px;
  }
  #sentOrdersSection .orders-sort-control{
    display:grid;
    gap:5px;
    min-width:220px;
    margin:0;
  }
  #sentOrdersSection .orders-sort-control small{
    color:#5e6674;
    font-size:10px;
    font-weight:850;
  }
  #sentOrdersSection .orders-sort-control select{
    min-height:38px;
    padding:8px 34px 8px 11px;
    border:1px solid #dfe3e9;
    border-radius:7px;
    background:#f8f9fb;
    color:#222833;
    font:inherit;
    font-size:12px;
    font-weight:750;
  }
  #sentOrdersSection .orders-filter-heading .btn{
    min-height:38px;
    border-color:#dfe3e9;
    background:#f8f9fb;
    color:#4b5565;
    font-size:12px !important;
  }
  #sentOrdersSection .orders-filter-grid{
    grid-template-columns:repeat(4,minmax(150px,1fr));
    gap:12px;
  }
  #sentOrdersSection .orders-filter-search{
    grid-column:1/-1;
  }
  #sentOrdersSection .orders-filter-grid .field label{
    color:#5e6674 !important;
    font-size:11px !important;
    letter-spacing:0;
  }
  #sentOrdersSection .orders-filter-grid input,
  #sentOrdersSection .orders-filter-grid select{
    min-height:42px !important;
    padding:9px 11px !important;
    border:1px solid #dfe3e9 !important;
    border-radius:7px !important;
    color:#222833;
    font-size:13px !important;
    font-weight:700;
  }
  #sentOrdersSection .orders-date-control input{
    padding-right:46px !important;
    cursor:pointer;
  }
  #sentOrdersSection .orders-date-control > span{
    right:7px;
  }
  #sentOrdersSection .orders-table-scroll{
    max-height:none;
    margin:0;
    border:0;
    border-radius:0;
    background:#fff;
  }
  #sentOrdersSection .orders-table{
    min-width:1480px !important;
    border:0 !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    table-layout:fixed !important;
  }
  #sentOrdersSection .orders-table th{
    height:48px;
    padding:12px 14px !important;
    border-bottom:1px solid var(--orders-line) !important;
    background:#fafbfc !important;
    color:#697181 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    text-transform:uppercase;
  }
  #sentOrdersSection .orders-table td{
    height:72px;
    padding:12px 14px !important;
    border-bottom:1px solid #edf0f4 !important;
    color:#303744;
    font-size:12px !important;
    font-weight:720;
    line-height:1.3;
    overflow:visible;
    overflow-wrap:normal;
  }
  #sentOrdersSection .orders-table tbody tr{
    position:relative;
    background:#fff;
    transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
  }
  #sentOrdersSection .orders-table tbody tr:hover{
    z-index:4;
    background:#fcfcfd;
    box-shadow:0 8px 20px rgba(15,23,42,.035);
    transform:translateY(-1px);
  }
  #sentOrdersSection .orders-table tbody tr.is-favorite{
    background:#fffaf7;
  }
  #sentOrdersSection .orders-table th:nth-child(1),
  #sentOrdersSection .orders-table td:nth-child(1){width:250px}
  #sentOrdersSection .orders-table th:nth-child(2),
  #sentOrdersSection .orders-table td:nth-child(2){width:130px}
  #sentOrdersSection .orders-table th:nth-child(3),
  #sentOrdersSection .orders-table td:nth-child(3){width:165px}
  #sentOrdersSection .orders-table th:nth-child(4),
  #sentOrdersSection .orders-table td:nth-child(4){width:115px}
  #sentOrdersSection .orders-table th:nth-child(5),
  #sentOrdersSection .orders-table td:nth-child(5){width:145px}
  #sentOrdersSection .orders-table th:nth-child(6),
  #sentOrdersSection .orders-table td:nth-child(6){width:82px}
  #sentOrdersSection .orders-table th:nth-child(7),
  #sentOrdersSection .orders-table td:nth-child(7){width:155px}
  #sentOrdersSection .orders-table th:nth-child(8),
  #sentOrdersSection .orders-table td:nth-child(8){width:155px}
  #sentOrdersSection .orders-table th:nth-child(9),
  #sentOrdersSection .orders-table td:nth-child(9){width:118px}
  #sentOrdersSection .orders-table th:nth-child(10),
  #sentOrdersSection .orders-table td:nth-child(10){width:105px}
  #sentOrdersSection .orders-table th:nth-child(11),
  #sentOrdersSection .orders-table td:nth-child(11){width:132px}
  #sentOrdersSection .orders-table th:nth-child(12),
  #sentOrdersSection .orders-table td:nth-child(12){width:125px}
  .orders-order-cell{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:9px;
    min-width:0;
  }
  .orders-order-cell > span,
  .orders-order-cell strong,
  .orders-order-cell small{
    display:block;
    min-width:0;
  }
  .orders-order-cell strong{
    overflow:hidden;
    color:var(--orders-ink);
    font-size:12px;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .orders-order-cell small{
    margin-top:4px;
    color:#8a92a0;
    font-size:10px;
    font-weight:800;
  }
  .orders-favorite-btn{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#b1b7c2;
    font-size:17px;
    cursor:pointer;
  }
  .orders-favorite-btn:hover,
  .orders-favorite-btn.active{
    background:#fff2ec;
    color:#ff5a1f;
  }
  .orders-amount{
    display:block;
    color:#151923;
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
  }
  .orders-pdf-btn{
    min-height:30px;
    padding:6px 9px;
    border:1px solid #ffd4c3;
    border-radius:6px;
    background:#fff7f3;
    color:#d94b16;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
  }
  .orders-approval-user{
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 20px;
    align-items:center;
    gap:7px;
    min-width:0;
  }
  .orders-user-avatar{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eef1f5;
    color:#566070;
    font-size:10px;
    font-weight:950;
  }
  .orders-user-name{
    overflow:hidden;
    color:#343b48;
    font-size:11px;
    font-weight:850;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .orders-approval-state{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f2f4f7;
    color:#8d95a2;
    font-size:11px;
    font-weight:950;
  }
  .orders-approval-user.is-approved .orders-user-avatar{
    background:#e9f8ef;
    color:#16834e;
  }
  .orders-approval-user.is-approved .orders-approval-state{
    background:#e9f8ef;
    color:#16834e;
  }
  .orders-status-badge,
  .orders-payment-badge{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:5px 8px;
    border-radius:6px;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
  }
  .orders-status-badge.finalized,
  .orders-payment-badge.paid{background:#eaf8f0;color:#16834e}
  .orders-status-badge.approval{background:#eaf2ff;color:#245fbe}
  .orders-status-badge.pending,
  .orders-payment-badge.unpaid{background:#fff3df;color:#a86100}
  .orders-status-badge.rejected{background:#feeceb;color:#c7352d}
  .orders-status-badge.cancelled{background:#eef1f5;color:#667085}
  #sentOrdersSection td[data-label="Acciones"]{
    position:relative;
    display:table-cell !important;
    white-space:nowrap;
  }
  #sentOrdersSection td[data-label="Acciones"] .table-btn{
    width:auto;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 4px 0 0 !important;
    padding:7px 10px !important;
    border-radius:7px !important;
    font-size:10px !important;
    white-space:nowrap;
  }
  .orders-view-btn{
    border-color:#dfe3e9 !important;
    color:#313846 !important;
  }
  .orders-download-btn{
    width:34px !important;
    height:34px;
    padding:7px !important;
    border-color:#ffd0be !important;
    background:#fff7f3 !important;
    color:#d94812 !important;
  }
  .orders-download-btn svg{
    width:16px;
    height:16px;
    pointer-events:none;
  }
  .orders-download-spinner{
    width:14px;
    height:14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:orders-download-spin .7s linear infinite;
  }
  @keyframes orders-download-spin{to{transform:rotate(360deg)}}
  .orders-download-btn:hover{
    border-color:#ff9f7b !important;
    background:#fff0e9 !important;
  }
  .orders-more-wrap{
    position:relative;
    display:inline-block;
  }
  .orders-more-btn{
    width:34px !important;
    padding:7px !important;
    font-size:17px !important;
  }
  .orders-row-menu{
    position:absolute;
    z-index:60;
    top:40px;
    right:0;
    width:190px;
    overflow:hidden;
    border:1px solid #dfe3e9;
    border-radius:8px;
    background:#fff;
    box-shadow:0 18px 42px rgba(15,23,42,.16);
  }
  .orders-row-menu button{
    width:100%;
    min-height:38px;
    padding:9px 12px;
    border:0;
    border-bottom:1px solid #f0f2f5;
    background:#fff;
    color:#343b48;
    font:inherit;
    font-size:11px;
    font-weight:800;
    text-align:left;
    cursor:pointer;
  }
  .orders-row-menu button:hover{background:#f8f9fb}
  .orders-row-menu button.danger{color:#c7352d}
  #sentOrdersSection .orders-pagination{
    min-height:58px;
    margin:0;
    padding:12px 18px;
    border-top:1px solid var(--orders-line);
    background:#fff;
  }
  #sentOrdersSection .orders-pagination-actions{
    gap:8px;
  }
  #sentOrdersSection .orders-pagination .table-btn{
    min-height:34px;
    margin:0 !important;
    padding:7px 11px !important;
    border-radius:7px !important;
    font-size:11px !important;
  }
  #ordersPageLabel{
    min-width:110px;
    color:#667085;
    font-size:11px !important;
    text-align:center;
  }
  .orders-empty-state{
    min-height:250px;
    display:grid;
    place-content:center;
    justify-items:center;
    padding:40px;
    text-align:center;
  }
  .orders-empty-state > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin-bottom:13px;
    border-radius:50%;
    background:#eaf8f0;
    color:#16834e;
    font-size:20px;
    font-weight:950;
  }
  .orders-empty-state strong{
    color:#1c222d;
    font-size:16px;
  }
  .orders-empty-state p{
    margin:5px 0 0;
    color:#7b8492;
    font-size:12px;
  }
  .orders-empty-state.is-error strong{color:#c7352d}
  .orders-skeleton-row td{
    height:72px !important;
  }
  .orders-skeleton-row td span{
    display:block;
    width:100%;
    height:20px;
    border-radius:6px;
    background:#eef1f4;
    animation:ordersSkeletonPulse 1s ease-in-out infinite alternate;
  }
  @keyframes ordersSkeletonPulse{
    from{opacity:.48}
    to{opacity:1}
  }
  @media(max-width:1180px){
    #sentOrdersSection .orders-filter-grid{
      grid-template-columns:repeat(3,minmax(150px,1fr));
    }
  }
  @media(max-width:760px){
    #sentOrdersSection .orders-page-header{
      align-items:stretch;
      gap:14px;
    }
    .orders-header-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
    }
    #sentOrdersSection .orders-filter-heading{
      align-items:stretch;
    }
    #sentOrdersSection .orders-filter-heading-actions{
      display:grid;
      grid-template-columns:1fr;
    }
    #sentOrdersSection .orders-sort-control{
      min-width:0;
    }
    #sentOrdersSection .orders-filter-heading .btn{
      width:100%;
    }
    #sentOrdersSection .orders-filter-grid{
      grid-template-columns:1fr;
    }
    #sentOrdersSection .orders-filter-search{
      grid-column:auto;
    }
    #sentOrdersSection .orders-table-scroll{
      overflow:visible !important;
      padding:12px;
      background:#f7f8fa;
    }
    #sentOrdersSection .orders-table{
      min-width:0 !important;
      display:block !important;
      border:0 !important;
    }
    #sentOrdersSection .orders-table tbody{
      display:grid !important;
      gap:12px;
    }
    #sentOrdersSection .orders-table tr{
      display:grid !important;
      gap:0;
      padding:15px !important;
      border:1px solid var(--orders-line) !important;
      border-radius:8px !important;
      background:#fff;
      box-shadow:0 6px 18px rgba(15,23,42,.035);
    }
    #sentOrdersSection .orders-table td{
      width:100% !important;
      min-height:42px;
      height:auto;
      display:grid !important;
      grid-template-columns:112px minmax(0,1fr);
      align-items:center;
      gap:10px;
      padding:9px 0 !important;
      border-bottom:1px solid #eef1f4 !important;
    }
    #sentOrdersSection .orders-table td::before{
      color:#7a8290;
      font-size:10px;
      font-weight:900;
      letter-spacing:0;
      text-transform:uppercase;
    }
    #sentOrdersSection .orders-table td:first-child{
      display:block !important;
      padding-top:0 !important;
    }
    #sentOrdersSection .orders-table td:first-child::before{
      display:none;
    }
    #sentOrdersSection td[data-label="Acciones"]{
      display:flex !important;
      padding-bottom:0 !important;
      border-bottom:0 !important;
    }
    #sentOrdersSection td[data-label="Acciones"]::before{
      display:none;
    }
    #sentOrdersSection .orders-view-btn{
      flex:1;
    }
    #sentOrdersSection .orders-download-btn{
      flex:0 0 34px;
    }
    .orders-more-wrap{
      flex:0 0 auto;
    }
    .orders-row-menu{
      top:auto;
      right:0;
      bottom:40px;
    }
    #sentOrdersSection .orders-pagination{
      align-items:stretch;
      flex-direction:column;
      gap:10px;
    }
    #sentOrdersSection .orders-pagination-actions{
      justify-content:space-between;
    }
    .orders-skeleton-row td{
      display:block !important;
      min-height:160px !important;
    }
  }
  @media(min-width:1000px){
    .review-modal{
      padding:0;
      justify-content:flex-end;
      background:rgba(15,23,42,.24);
      backdrop-filter:blur(2px);
    }
    .review-modal.active{
      display:flex;
    }
    .review-shell{
      width:clamp(720px,52vw,980px);
      height:100vh;
      padding:18px;
      border-radius:0;
      box-shadow:-24px 0 70px rgba(15,23,42,.18);
    }
    .review-top{
      min-height:58px;
      margin-bottom:12px;
      padding-bottom:12px;
      border-bottom:1px solid #e7eaf0;
    }
    .review-top h1{
      font-size:20px;
    }
    .review-top .subtitle{
      max-width:540px;
      margin-top:4px;
      overflow:hidden;
      font-size:12px !important;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .review-content{
      grid-template-columns:minmax(0,1fr) minmax(270px,32%);
      gap:12px;
    }
    .review-pdf,
    .review-side{
      border-radius:8px;
    }
    .review-side{
      padding:14px;
    }
  }

  /* Sidebar 2026: actualización visual acotada, sin alterar navegación ni permisos. */
  :root{
    --ui-sidebar:252px;
    --sidebar-orange:#ff5a1f;
    --sidebar-orange-soft:#fff2eb;
    --sidebar-ink:#20242c;
    --sidebar-muted:#727987;
    --sidebar-line:#e9ebef;
  }
  .sidebar{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    width:var(--ui-sidebar) !important;
    padding:18px 14px 14px !important;
    overflow:hidden !important;
    background:#fff !important;
    color:var(--sidebar-ink) !important;
    border-right:1px solid var(--sidebar-line) !important;
    box-shadow:4px 0 22px rgba(15,23,42,.025) !important;
  }
  .sidebar-brand{
    min-height:48px;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    padding:4px 9px;
    margin-bottom:14px;
  }
  .sidebar-brand img{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:block;
    border-radius:11px;
    object-fit:cover;
  }
  .sidebar-nav{
    min-height:0;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    gap:18px;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0 2px 16px;
    scrollbar-width:thin;
    scrollbar-color:#d9dde3 transparent;
  }
  .sidebar-group{
    display:grid;
    gap:3px;
  }
  .sidebar-group:not(:has(.menu-item:not(.hidden))){
    display:none;
  }
  .sidebar-group-label{
    padding:0 9px 5px;
    color:#878e9a;
    font-size:10px;
    font-weight:850;
    letter-spacing:.075em;
    line-height:1.2;
    text-transform:uppercase;
  }
  .sidebar .menu-item{
    position:relative;
    min-height:40px !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    margin:0 !important;
    padding:9px 11px !important;
    overflow:hidden;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#4e5562 !important;
    font-size:13px !important;
    font-weight:680 !important;
    line-height:1.2;
    cursor:pointer;
    transition:background-color .16s ease,color .16s ease,transform .16s ease !important;
  }
  .sidebar .menu-item.hidden{
    display:none !important;
  }
  .sidebar .menu-item:hover{
    background:#f7f8fa !important;
    color:#171b23 !important;
    transform:translateX(1px);
  }
  .sidebar .menu-item.active{
    background:var(--sidebar-orange-soft) !important;
    color:var(--sidebar-orange) !important;
    box-shadow:none !important;
  }
  .sidebar .menu-item.active::after{
    content:"";
    position:absolute;
    top:50%;
    right:5px;
    width:3px;
    height:16px;
    border-radius:999px;
    background:var(--sidebar-orange);
    transform:translateY(-50%);
  }
  .sidebar .menu-item .nav-icon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    flex:0 0 18px;
    color:#626a77 !important;
    stroke-width:1.8;
  }
  .sidebar .menu-item:hover .nav-icon{
    color:#242a34 !important;
  }
  .sidebar .menu-item.active .nav-icon{
    color:var(--sidebar-orange) !important;
  }
  .sidebar .menu-count-badge{
    min-width:22px;
    height:22px;
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    margin-left:auto;
    padding:0 6px;
    border:1px solid #ffdcca;
    border-radius:999px;
    background:#fff6f1;
    color:#e84d16;
    font-size:10px;
    font-weight:900;
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .sidebar .menu-item.active .menu-count-badge{
    border-color:#ffc8ad;
    background:#fff;
    color:var(--sidebar-orange);
  }
  .sidebar-group.admin-links{
    gap:2px;
  }
  .sidebar-group.admin-links .menu-item{
    min-height:36px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
    font-size:12.5px !important;
  }
  .sidebar-group.admin-links .menu-item .nav-icon{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
    flex-basis:17px;
  }
  .sidebar-config-group{
    display:grid;
    gap:2px;
  }
  .sidebar .sidebar-submenu-toggle{
    width:100%;
    font-family:inherit;
    text-align:left;
  }
  .sidebar-config-chevron{
    width:15px;
    height:15px;
    flex:0 0 15px;
    margin-left:auto;
    transition:transform .16s ease;
  }
  .sidebar-config-group.open .sidebar-config-chevron{
    transform:rotate(180deg);
  }
  .sidebar-config-children{
    display:none;
    gap:2px;
    margin:2px 0 3px 17px;
    padding-left:9px;
    border-left:1px solid #e5e8ed;
  }
  .sidebar-config-group.open .sidebar-config-children{
    display:grid;
  }
  .sidebar-config-children .menu-item{
    min-height:34px !important;
    padding:7px 9px !important;
    font-size:12px !important;
  }
  .sidebar-config-children .menu-item .nav-icon{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    flex-basis:16px;
  }
  .sidebar-account{
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 36px;
    align-items:center;
    gap:9px;
    flex:0 0 auto;
    margin-top:auto;
    padding:7px;
    border:1px solid var(--sidebar-line);
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 14px rgba(15,23,42,.035);
  }
  .sidebar-account-copy{
    min-width:0;
    display:grid;
    gap:2px;
  }
  .sidebar-user-avatar{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid #ffd8c5;
    border-radius:50%;
    background:var(--sidebar-orange-soft);
    color:var(--sidebar-orange);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
  }
  .sidebar-account-copy strong{
    margin:0;
    overflow:hidden;
    color:#242933;
    font-size:12px;
    font-weight:800;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .sidebar-account-copy span{
    overflow:hidden;
    color:#858c98;
    font-size:10px;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .sidebar .btn.logout{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    display:grid !important;
    place-items:center;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#7a818d !important;
    box-shadow:none !important;
  }
  .sidebar .btn.logout:hover{
    background:#f4f5f7 !important;
    color:#d43c32 !important;
    transform:none !important;
  }
  .sidebar .btn.logout .btn-icon{
    width:17px;
    height:17px;
  }
  .sidebar .btn.logout span{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .sidebar-footer{
    display:none !important;
  }
  #adminSection .admin-back[data-admin-panel="adminHomePanel"]{
    display:none !important;
  }
  @media(max-width:1180px){
    .sidebar{
      width:min(286px,88vw) !important;
      padding-top:16px !important;
      box-shadow:18px 0 55px rgba(15,23,42,.18) !important;
    }
  }

  /* Rendiciones */
  #renditionsSection{
    padding-bottom:48px;
  }
  .renditions-shell{
    max-width:1440px;
    margin:0 auto;
  }
  .renditions-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
  }
  .renditions-header h1{
    margin:0;
    color:#151922;
    font-size:30px;
    line-height:1.15;
  }
  .renditions-header p{
    max-width:700px;
    margin:8px 0 0;
    color:#737b88;
    font-size:14px;
    line-height:1.55;
  }
  .renditions-tabs{
    display:inline-flex;
    gap:4px;
    padding:4px;
    border:1px solid #e5e8ed;
    border-radius:10px;
    background:#f7f8fa;
  }
  .renditions-tab{
    min-height:38px;
    padding:0 16px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#69717e;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
  }
  .renditions-tab.active{
    background:#fff;
    color:#151922;
    box-shadow:0 2px 8px rgba(15,23,42,.08);
  }
  .renditions-panel{
    display:none;
  }
  .renditions-panel.active{
    display:block;
  }
  .renditions-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
  }
  .renditions-metric{
    min-height:120px;
    padding:18px;
    border:1px solid #e7e9ed;
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 22px rgba(15,23,42,.035);
  }
  .renditions-metric > span{
    display:block;
    color:#7b8491;
    font-size:10px;
    font-weight:900;
    letter-spacing:.03em;
    text-transform:uppercase;
  }
  .renditions-metric strong{
    display:block;
    margin-top:12px;
    color:#161a22;
    font-size:22px;
    line-height:1.1;
    white-space:nowrap;
  }
  .renditions-metric small{
    display:block;
    margin-top:8px;
    color:#8a929e;
    font-size:10px;
    line-height:1.4;
  }
  .renditions-metric small b{
    color:#4f5865;
    font-weight:900;
  }
  .renditions-metric.is-usd{
    border-color:#ffc8ae;
    background:#fffaf7;
  }
  .renditions-metric.is-usd strong{
    color:#ff5a00;
    font-size:24px;
  }
  .renditions-metric.is-balance strong{
    color:#ff5a1f;
  }
  .renditions-rate-input{
    width:100%;
    height:42px !important;
    margin-top:9px;
    padding:0 10px !important;
    border-color:#ffd5c3 !important;
    color:#161a22;
    font-size:18px !important;
    font-weight:900;
  }
  .renditions-toolbar{
    display:grid;
    grid-template-columns:minmax(150px,.8fr) repeat(3,minmax(170px,1fr)) auto;
    gap:12px;
    align-items:end;
    margin-bottom:16px;
    padding:16px;
    border:1px solid #e7e9ed;
    border-radius:12px;
    background:#fff;
  }
  .renditions-toolbar .field{
    margin:0;
  }
  .renditions-custom-dates{
    display:none;
    grid-template-columns:repeat(2,minmax(140px,1fr));
    gap:10px;
  }
  .renditions-custom-dates.active{
    display:grid;
  }
  .renditions-workspace{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
    gap:16px;
    align-items:start;
  }
  .renditions-card{
    border:1px solid #e7e9ed;
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 22px rgba(15,23,42,.035);
  }
  .renditions-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 18px 14px;
    border-bottom:1px solid #eef0f3;
  }
  .renditions-card-head h2{
    margin:0;
    color:#171b23;
    font-size:16px;
  }
  .renditions-card-head p{
    margin:5px 0 0;
    color:#838b97;
    font-size:11px;
  }
  .renditions-table-wrap{
    overflow:auto;
  }
  .renditions-table{
    width:100%;
    border-collapse:collapse;
  }
  .renditions-table th{
    padding:12px 14px;
    background:#fafbfc;
    color:#747d8b;
    font-size:9px;
    font-weight:900;
    letter-spacing:.035em;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .renditions-table td{
    padding:14px;
    border-top:1px solid #eef0f3;
    color:#303641;
    font-size:11px;
    vertical-align:middle;
  }
  .renditions-table tbody tr:hover{
    background:#fffaf7;
  }
  .renditions-table td strong{
    display:block;
    color:#161a22;
    font-size:12px;
  }
  .renditions-table td small{
    display:block;
    max-width:290px;
    margin-top:4px;
    color:#7f8794;
    line-height:1.4;
  }
  .renditions-table .money{
    color:#161a22;
    font-weight:900;
    white-space:nowrap;
  }
  .renditions-table .renditions-usd-value{
    color:#ff5a00;
    font-size:12px;
  }
  .renditions-variance{
    display:inline-flex;
    flex-direction:column;
    gap:3px;
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
  }
  .renditions-variance strong{
    font-size:11px !important;
  }
  .renditions-variance.positive,
  .renditions-variance.positive strong{
    color:#168456;
  }
  .renditions-variance.negative,
  .renditions-variance.negative strong{
    color:#b42318;
  }
  .renditions-checkbox{
    width:18px !important;
    height:18px !important;
    min-height:18px !important;
    margin:0;
    accent-color:#ff5a1f;
  }
  .renditions-empty{
    padding:44px 20px;
    color:#78818e;
    font-size:12px;
    text-align:center;
  }
  .renditions-selection-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 18px;
    border-top:1px solid #e9ecf0;
    background:#fafbfc;
  }
  .renditions-selection-bar span{
    color:#747d89;
    font-size:11px;
  }
  .renditions-selection-bar strong{
    color:#171b23;
    font-size:15px;
  }
  .renditions-movements-list{
    display:grid;
    gap:10px;
    padding:16px;
  }
  .renditions-movement-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px 110px 38px;
    gap:8px;
    align-items:center;
  }
  .renditions-movement-row input,
  .renditions-movement-row select{
    min-height:40px !important;
    padding:8px 10px !important;
    font-size:11px !important;
  }
  .renditions-movement-remove{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #e5e8ed;
    border-radius:8px;
    background:#fff;
    color:#a04037;
    cursor:pointer;
  }
  .renditions-totals{
    display:grid;
    gap:10px;
    margin:0 16px 16px;
    padding:16px;
    border-radius:10px;
    background:#f7f8fa;
  }
  .renditions-total-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color:#747d89;
    font-size:11px;
  }
  .renditions-total-row strong{
    color:#20242c;
    font-size:12px;
  }
  .renditions-total-row.is-final{
    margin-top:4px;
    padding-top:12px;
    border-top:1px solid #dfe3e8;
    color:#20242c;
    font-weight:900;
  }
  .renditions-total-row.is-final strong{
    color:#ff5a1f;
    font-size:18px;
  }
  .renditions-generate{
    width:calc(100% - 32px);
    min-height:48px;
    margin:0 16px 16px;
  }
  .renditions-history-card{
    overflow:hidden;
  }
  .renditions-history-actions{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }
  .renditions-icon-button{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #e1e5ea;
    border-radius:8px;
    background:#fff;
    color:#4b5563;
    cursor:pointer;
  }
  .renditions-icon-button:hover{
    border-color:#ffb795;
    color:#ff5a1f;
  }
  .renditions-icon-button svg{
    width:15px;
    height:15px;
  }
  .renditions-icon-button.is-danger{
    color:#b42318;
  }
  .renditions-pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:14px 16px;
    border-top:1px solid #eef0f3;
  }
  .renditions-pagination span{
    color:#7b8491;
    font-size:11px;
  }
  .renditions-detail-modal{
    position:fixed;
    inset:0;
    z-index:1400;
    display:none;
    place-items:center;
    padding:24px;
    background:rgba(17,24,39,.4);
    backdrop-filter:blur(7px);
  }
  .renditions-detail-modal.active{
    display:grid;
  }
  .renditions-detail-sheet{
    width:min(980px,96vw);
    max-height:90vh;
    overflow:auto;
    border-radius:14px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.22);
  }
  .renditions-detail-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 22px;
    border-bottom:1px solid #e8ebef;
    background:rgba(255,255,255,.96);
  }
  .renditions-detail-head h2{
    margin:0;
    color:#161a22;
    font-size:20px;
  }
  .renditions-detail-head p{
    margin:5px 0 0;
    color:#7c8592;
    font-size:11px;
  }
  .renditions-detail-content{
    display:grid;
    gap:18px;
    padding:22px;
  }
  .renditions-detail-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }
  .renditions-detail-summary div{
    padding:14px;
    border:1px solid #e7e9ed;
    border-radius:10px;
    background:#fafbfc;
  }
  .renditions-detail-summary span,
  .renditions-detail-summary strong{
    display:block;
  }
  .renditions-detail-summary .is-usd{
    border-color:#ffc8ae;
    background:#fff8f4;
  }
  .renditions-detail-summary .is-usd strong{
    color:#ff5a00;
  }
  .renditions-exchange-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px;
    border:1px solid #e7e9ed;
    border-radius:10px;
    background:#fff;
  }
  .renditions-exchange-card span,
  .renditions-exchange-card strong,
  .renditions-exchange-card small{
    display:block;
  }
  .renditions-exchange-card span{
    color:#747d89;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
  }
  .renditions-exchange-card strong{
    margin-top:6px;
    color:#171b23;
    font-size:14px;
  }
  .renditions-exchange-card small{
    margin-top:5px;
    color:#818a96;
    font-size:10px;
  }
  .renditions-exchange-action{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  .renditions-exchange-action input{
    width:130px;
    min-height:40px !important;
    font-size:12px !important;
  }
  .renditions-detail-summary span{
    color:#7c8592;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
  }
  .renditions-detail-summary strong{
    margin-top:8px;
    color:#171b23;
    font-size:14px;
  }
  .renditions-detail-actions{
    display:flex;
    justify-content:flex-end;
  }
  .renditions-pdf-frame{
    display:block;
    width:100%;
    height:min(620px,68vh);
    border:0;
    border-radius:0 0 12px 12px;
    background:#f5f6f8;
  }
  .order-rendition-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding:12px 14px;
    border:1px solid #ffd5c3;
    border-radius:9px;
    background:#fff8f4;
  }
  .order-rendition-link strong,
  .order-rendition-link span{
    display:block;
  }
  .order-rendition-link strong{
    color:#8f3213;
    font-size:11px;
  }
  .order-rendition-link span{
    margin-top:3px;
    color:#9a6755;
    font-size:10px;
  }
  @media(max-width:1240px){
    .renditions-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
    .renditions-workspace{grid-template-columns:1fr}
  }
  @media(max-width:850px){
    .renditions-header{flex-direction:column}
    .renditions-tabs{width:100%}
    .renditions-tab{flex:1}
    .renditions-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .renditions-toolbar{grid-template-columns:1fr}
    .renditions-custom-dates{grid-template-columns:1fr}
    .renditions-movement-row{grid-template-columns:1fr 1fr}
    .renditions-movement-remove{grid-column:2;justify-self:end}
    .renditions-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .renditions-exchange-card{align-items:stretch;flex-direction:column}
    .renditions-exchange-action{align-items:stretch;flex-direction:column}
    .renditions-exchange-action input{width:100%}
  }
  @media(max-width:560px){
    .renditions-metrics{grid-template-columns:1fr}
    .renditions-detail-summary{grid-template-columns:1fr}
    .renditions-card-head{align-items:flex-start;flex-direction:column}
    .renditions-selection-bar{align-items:flex-start;flex-direction:column}
  }

  /* Final layout QA: stable tables, contained media and aligned actions. */
  .section,
  .card,
  .layout > *,
  .users-enterprise-content,
  .users-directory-surface,
  .renditions-shell,
  .review-content > *{
    min-width:0;
  }
  .section img,
  .card img,
  .app-modal img,
  .review-shell img,
  .users-detail-drawer img{
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
  .orders-table-scroll,
  .users-table-wrap,
  .renditions-table-wrap,
  .provider-account-table-wrap,
  .reservations-ledger-table-wrap,
  .work-budget-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .orders-table td,
  .users-enterprise-table td,
  .renditions-table td{
    max-width:100%;
  }
  #sentOrdersSection .orders-table th:nth-child(12),
  #sentOrdersSection .orders-table td:nth-child(12){
    width:166px;
    min-width:166px;
  }
  #sentOrdersSection .orders-table td:nth-child(2),
  #sentOrdersSection .orders-table td:nth-child(3),
  #sentOrdersSection .orders-table td:nth-child(4){
    overflow-wrap:anywhere;
  }
  .orders-row-actions-inline{
    display:grid;
    grid-template-columns:minmax(52px, 1fr) 36px 36px;
    align-items:center;
    gap:6px;
    width:100%;
    min-width:0;
  }
  #sentOrdersSection td[data-label="Acciones"] .orders-row-actions-inline .table-btn{
    margin:0 !important;
  }
  #sentOrdersSection td[data-label="Acciones"] .orders-view-btn{
    width:100% !important;
  }
  #sentOrdersSection td[data-label="Acciones"] .orders-download-btn,
  #sentOrdersSection td[data-label="Acciones"] .orders-more-btn{
    width:36px !important;
    height:36px;
  }
  .orders-row-menu{
    position:fixed !important;
    inset:auto;
    margin:0 !important;
    padding:0 !important;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    z-index:10000;
    width:min(220px, calc(100vw - 24px));
    max-height:min(420px, calc(100vh - 24px));
    overflow-x:hidden;
    overflow-y:auto;
  }
  .orders-row-menu-portal[hidden]{display:none !important}
  button,
  [role="button"]{
    touch-action:manipulation;
  }
  button[aria-busy="true"]{
    cursor:wait;
    pointer-events:none;
  }
  #sentOrdersSection.is-loading .orders-table-scroll{
    opacity:.72;
    transition:opacity .12s ease;
  }
  .users-enterprise-table th,
  .users-enterprise-table td,
  .renditions-table th,
  .renditions-table td,
  .provider-account-table th,
  .provider-account-table td,
  .reservations-ledger-table th,
  .reservations-ledger-table td,
  .work-budget-table th,
  .work-budget-table td{
    vertical-align:middle;
  }
  .users-table-user,
  .orders-approval-user,
  .orders-order-cell{
    max-width:100%;
  }
  @media(max-width:760px){
    #sentOrdersSection .orders-table thead{
      display:none !important;
    }
    #sentOrdersSection .orders-table tr::before,
    #sentOrdersSection .orders-table tr::after{
      display:none !important;
      content:none !important;
    }
    #sentOrdersSection .orders-table td,
    #sentOrdersSection .orders-table td[data-label="Estado"],
    #sentOrdersSection .orders-table td[data-label="Pago"],
    #sentOrdersSection .orders-table td[data-label="Acciones"]{
      position:static !important;
      inset:auto !important;
      opacity:1 !important;
    }
    #sentOrdersSection td[data-label="Acciones"]{
      width:100% !important;
    }
    .orders-row-actions-inline{
      display:grid;
      grid-template-columns:minmax(0,1fr) 40px 40px;
      gap:8px;
    }
    #sentOrdersSection td[data-label="Acciones"] .orders-view-btn{
      width:100% !important;
    }
    #sentOrdersSection td[data-label="Acciones"] .orders-download-btn,
    #sentOrdersSection td[data-label="Acciones"] .orders-more-btn{
      width:40px !important;
      height:40px;
    }
    .users-filter-bar,
    .renditions-toolbar{
      align-items:stretch;
    }
    .users-filter-bar input,
    .users-filter-bar select,
    .renditions-toolbar input,
    .renditions-toolbar select{
      width:100%;
    }
  }

  body.splash-active{
    overflow:hidden !important;
    background:#fff !important;
  }
  body.splash-active:not(.splash-revealing) #loginScreen,
  body.splash-active:not(.splash-revealing) #changePasswordScreen,
  body.splash-active:not(.splash-revealing) #twoFactorScreen,
  body.splash-active:not(.splash-revealing) #appScreen,
  body.splash-active:not(.splash-revealing) #mobileAppHeader,
  body.splash-active:not(.splash-revealing) #mobileMenuBtn,
  body.splash-active:not(.splash-revealing) #mobileBottomNav{
    visibility:hidden !important;
    opacity:0 !important;
  }
  .app-splash{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#fff;
    opacity:1;
    pointer-events:all;
    transition:opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
    contain:strict;
  }
  .app-splash.is-exiting{
    opacity:0;
    transform:scale(1.004);
    pointer-events:none;
  }
  .app-splash-logo{
    position:relative;
    width:clamp(258px, 34vw, 390px);
    height:clamp(82px, 11vw, 124px);
    transform:translateX(39%) scale(.94);
    filter:blur(1.4px);
    animation:tsigns-splash-stage 1.48s cubic-bezier(.22,1,.36,1) forwards;
    will-change:transform, filter;
  }
  .app-splash-wordmark{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    color:#111827;
    font-family:"Arial Black", "Helvetica Neue", Arial, sans-serif;
    font-size:clamp(66px, 8.8vw, 104px);
    font-weight:900;
    font-style:normal;
    line-height:.82;
    letter-spacing:0;
    white-space:nowrap;
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    user-select:none;
  }
  .app-splash-t{
    position:relative;
    z-index:2;
    display:inline-block;
    color:#111827;
    opacity:0;
    animation:tsigns-splash-t-in .5s cubic-bezier(.22,1,.36,1) .08s forwards;
  }
  .app-splash-signs{
    display:inline-flex;
    align-items:center;
    color:#ff5a00;
    margin-left:-.015em;
  }
  .app-splash-letter{
    display:inline-block;
    opacity:0;
    transform:translateX(-.24em) scale(.99);
    animation:tsigns-splash-letter-in .46s cubic-bezier(.22,1,.36,1) forwards;
    will-change:transform, opacity;
  }
  .app-splash-letter-s1{animation-delay:.66s}
  .app-splash-letter-i{animation-delay:.735s}
  .app-splash-letter-g{animation-delay:.81s}
  .app-splash-letter-n{animation-delay:.885s}
  .app-splash-letter-s2{animation-delay:.96s}
  .app-splash.is-exiting .app-splash-logo{
    animation:none;
    transform:scale(.97);
    filter:none;
    transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  @keyframes tsigns-splash-stage{
    0%{transform:translateX(39%) scale(.94);filter:blur(1.4px)}
    30%{transform:translateX(39%) scale(1);filter:blur(0)}
    100%{transform:translateX(0) scale(1);filter:blur(0)}
  }
  @keyframes tsigns-splash-t-in{
    from{opacity:0;transform:scale(.96)}
    to{opacity:1;transform:scale(1)}
  }
  @keyframes tsigns-splash-letter-in{
    from{opacity:0;transform:translateX(-.24em) scale(.99)}
    to{opacity:1;transform:translateX(0) scale(1)}
  }
  @media(max-width:520px){
    .app-splash-logo{
      width:min(76vw, 300px);
      height:min(24vw, 96px);
    }
    .app-splash-wordmark{
      font-size:min(19.5vw, 78px);
    }
  }
  @media(prefers-reduced-motion:reduce){
    .app-splash{
      transition-duration:.2s;
    }
    .app-splash-logo{
      transform:none;
      filter:none;
      animation:none;
    }
    .app-splash-t,
    .app-splash-letter{
      opacity:1;
      transform:none;
      animation:none;
    }
  }

  .notification-center{
    position:relative;
    width:max-content;
    height:48px;
    margin:0 0 14px auto;
    z-index:12000;
  }
  body.order-review-open .notification-center,
  body.order-review-open .mobile-bell{
    display:none !important;
  }
  .notification-bell{
    width:48px;
    height:48px;
    border:1px solid #ffd5bf;
    border-radius:12px;
    background:#fff7f2;
    color:#e84f00;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 9px 24px rgba(255,90,0,.12);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    position:relative;
  }
  .notification-bell:hover{
    border-color:#ff9f70;
    background:#fff;
    box-shadow:0 12px 28px rgba(255,90,0,.18);
    transform:translateY(-1px);
  }
  .notification-bell:focus-visible{
    outline:3px solid rgba(255,90,0,.18);
    outline-offset:2px;
  }
  .notification-bell svg{width:21px;height:21px}
  .notification-count{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:21px;
    height:21px;
    padding:0 6px;
    border:2px solid #fff;
    border-radius:999px;
    background:#ff5a00;
    color:#fff;
    font-size:11px;
    font-weight:800;
    line-height:17px;
    text-align:center;
  }
  .notification-count[hidden]{display:none}
  .notification-panel{
    position:absolute;
    top:58px;
    right:0;
    width:min(410px, calc(100vw - 40px));
    max-height:min(680px, calc(100vh - 100px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #e3e7ec;
    border-radius:14px;
    background:#fff;
    box-shadow:0 24px 64px rgba(17,24,39,.18);
  }
  .notification-panel[hidden]{display:none}
  .notification-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:20px 20px 16px;
    border-bottom:1px solid #edf0f3;
  }
  .notification-panel-head h2{
    margin:0 0 3px;
    color:#111827;
    font-size:20px;
    letter-spacing:0;
  }
  .notification-panel-head p{
    margin:0;
    color:#7a8492;
    font-size:13px;
  }
  .notification-read-all{
    border:0;
    background:transparent;
    color:#e64f00;
    font:inherit;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    padding:4px 0;
  }
  .notification-read-all:disabled{opacity:.42;cursor:default}
  .notification-list{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:8px;
  }
  .notification-item{
    width:100%;
    border:0;
    border-radius:10px;
    background:#fff;
    color:#1a2230;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:12px;
    padding:13px 12px;
    text-align:left;
    cursor:pointer;
    transition:background .16s ease;
  }
  .notification-item + .notification-item{border-top:1px solid #f0f2f4}
  .notification-item:hover{background:#f8f9fa}
  .notification-item.is-unread{background:#fff7f2}
  .notification-item.is-unread:hover{background:#fff2e9}
  .notification-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#fff0e8;
    color:#ff5a00;
  }
  .notification-icon svg{width:19px;height:19px}
  .notification-item.is-rejected .notification-icon,
  .notification-item.is-deleted .notification-icon,
  .notification-item.is-correction .notification-icon{
    background:#fff0f0;
    color:#d63b3b;
  }
  .notification-copy{min-width:0}
  .notification-copy strong{
    display:block;
    color:#141b2a;
    font-size:14px;
    line-height:1.3;
    margin-bottom:4px;
  }
  .notification-copy p{
    margin:0;
    color:#566170;
    font-size:13px;
    line-height:1.42;
    overflow-wrap:anywhere;
  }
  .notification-copy small{
    display:block;
    margin-top:7px;
    color:#8a93a0;
    font-size:11px;
  }
  .notification-dot{
    width:8px;
    height:8px;
    margin-top:7px;
    border-radius:50%;
    background:#ff5a00;
  }
  .notification-item:not(.is-unread) .notification-dot{visibility:hidden}
  .notification-empty{
    padding:48px 24px;
    text-align:center;
    color:#7a8492;
  }
  .notification-empty svg{
    width:30px;
    height:30px;
    color:#ff5a00;
    margin-bottom:12px;
  }
  .notification-empty strong{display:block;color:#1b2330;margin-bottom:5px}
  @media(max-width:760px){
    .notification-center{
      position:fixed;
      top:10px;
      right:14px;
      width:auto;
      height:auto;
      margin:0;
    }
    .notification-center > .notification-bell{display:none}
    .notification-panel{
      position:fixed;
      top:70px;
      right:12px;
      left:12px;
      width:auto;
      max-height:calc(100dvh - 90px);
    }
  }