:root {
  /* Estos --yt-* son de una maqueta antigua y el nombre ya no significa nada,
     pero siguen vivos en 117 reglas. Sus valores son los de Titanio Tecnico;
     renombrarlos seria otra tarea y no aportaria color. */
  --app-max-width: 1880px;
  --app-side-gap: 1rem;
  --yt-bg: #070809;
  --yt-surface: #0c0f11;
  --yt-hover: #202a2e;
  --yt-text: #f4f7f5;
  --yt-text-dim: #9da8a3;
  --yt-accent: #59a8e8;
  --yt-border: #202a2e;
  --header-height: 56px;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--yt-hover) transparent;
}

body.yt-dark {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--yt-text);
  background: var(--yt-bg);
}

/* Header */
.yt-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--yt-bg);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  border-bottom: 1px solid var(--yt-border);
}

.header-left { display: flex; align-items: center; gap: 16px; width: 240px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-logo { background: #ef7272; color: white; padding: 2px 8px; border-radius: 4px; font-weight: 900; }
.brand-name { font-weight: 500; font-size: 1.125rem; }

.header-center { flex: 1; display: flex; justify-content: center; }
.search-bar { display: flex; width: 60%; max-width: 600px; background: #12171a; border: 1px solid var(--yt-border); border-radius: 40px; overflow: hidden; }
.search-bar input { flex: 1; background: transparent; border: none; padding: 8px 16px; color: white; outline: none; }
.search-btn { background: #12171a; border: none; padding: 0 20px; color: white; border-left: 1px solid var(--yt-border); cursor: pointer; }

.header-right { display: flex; align-items: center; gap: 12px; width: 240px; justify-content: flex-end; }
.yt-btn-primary { background: var(--yt-accent); color: #070809; border: none; padding: 6px 16px; border-radius: 18px; font-weight: 500; cursor: pointer; }
.user-avatar { width: 32px; height: 32px; background: #9da8a3; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; }

/* Layout */
.yt-layout {
  display: grid;
  grid-template-columns: 240px 1fr 400px;
  height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
}

.yt-sidebar { padding: 12px 0; overflow-y: auto; }
.module-nav { display: flex; align-items: center; gap: 24px; padding: 10px 24px; color: white; background: transparent; border: none; width: 100%; cursor: pointer; border-radius: 0 20px 20px 0; text-align: left; }
.module-nav:hover { background: var(--yt-hover); }
.module-nav.is-active { background: #1b2327; font-weight: 500; }

/* Content */
.yt-main-content { padding: 24px; overflow-y: auto; background: var(--yt-bg); }

.video-container {
  background: #070809; 
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(7, 8, 9,0.5);
  min-height: 520px;
}

.sheet-viewport {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  height: auto;
}

.video-details { padding: 0 4px; }
.video-details h2 { font-size: 1.3125rem; margin: 0 0 16px; }

.builder-tabs { display: flex; border-bottom: 1px solid var(--yt-border); margin-bottom: 24px; }
.builder-tab { background: transparent; border: none; color: var(--yt-text-dim); padding: 12px 20px; cursor: pointer; font-weight: 500; border-bottom: 2px solid transparent; }
.builder-tab.is-active { color: white; border-bottom-color: white; }

/* Right Panel */
.yt-right-panel { padding: 24px; border-left: 1px solid var(--yt-border); overflow-y: auto; }
.panel-header-yt h3 { margin: 0; font-size: 1.125rem; }
.panel-header-yt p { color: var(--yt-text-dim); font-size: 0.875rem; margin-top: 4px; }

.suggestions-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Tarjetas de sugerencias */
.suggestion-card {
  display: flex;
  gap: 12px;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
}

.suggestion-card:hover { background: var(--yt-hover); }

.suggestion-thumb {
  width: 120px;
  height: 68px;
  background: #1b2327;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #2a3338;
  flex-shrink: 0;
}

.suggestion-info { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.suggestion-title { font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: white; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.suggestion-meta { font-size: 0.75rem; color: var(--yt-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Forms & UI Elements inside Dark Mode */
.form-block { background: var(--yt-surface); padding: 20px; border-radius: 12px; border: 1px solid var(--yt-border); margin-bottom: 16px; }
.form-block h3 { margin: 0 0 16px; font-size: 1rem; color: var(--yt-accent); border-bottom: 1px solid var(--yt-border); padding-bottom: 8px; }

.builder-panel {
    animation: reveal-up 0.3s ease-out;
}

label span { display: block; margin-bottom: 8px; font-size: 0.875rem; color: var(--yt-text-dim); }
input, select, textarea {
  background: #12171a;
  border: 1px solid var(--yt-border);
  color: white;
  padding: 10px;
  border-radius: 6px;
  width: 100%;
  outline: none;
}

.upload-grid, .single-grid, .dual-grid, .triple-grid { display: grid; gap: 16px; }
.single-grid { grid-template-columns: 1fr; }
.dual-grid { grid-template-columns: 1fr 1fr; }
.triple-grid { grid-template-columns: 1fr 1fr 1fr; }

.primary-button { background: var(--yt-accent); color: #070809; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.secondary-button { background: #1b2327; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; }

/* Final Sheet - Must stay white */
.final-sheet {
  width: 1080px !important;
  min-width: 1080px !important;
  background: #f4f7f5;
  color: #070809;
  border: none;
  box-shadow: 0 0 50px rgba(7, 8, 9,0.8);
  transform: scale(0.72);
  transform-origin: top center;
  margin-bottom: -170px; /* Ajuste para que el contenido de abajo suba correctamente */
}

/* Utility */
[hidden] { display: none !important; }

/* Form Tabs (Builder Nav) */
.builder-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--modern-surface-soft);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.builder-jump {
  flex: 1;
  padding: 0.6rem;
  border: none;
  background: transparent;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.builder-jump.is-active {
  background: var(--modern-surface);
  color: var(--modern-brand);
  box-shadow: var(--modern-shadow-sm);
}

.module-panel,
.builder-panel,
.form-block,
.module-overview-card,
.resource-summary-card,
.upload-card,
.detail-card {
  animation: reveal-up 0.34s ease both;
}

.module-panel[hidden],
.builder-panel[hidden] {
  display: none !important;
}

@keyframes reveal-up {
  from {
    opacity: 0; transform: translateY(15px);
  }
  to {
    opacity: 1; transform: translateY(0);
  }
}

.app-topbar,
.controls-panel,
.preview-panel {
  animation: reveal-up 0.45s ease both;
}

.sidebar-brand-badge {
  animation: soft-pulse 3.8s ease-in-out infinite;
}

.module-panel::-webkit-scrollbar,
.controls-panel::-webkit-scrollbar,
.preview-panel::-webkit-scrollbar,
.module-nav-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.module-panel::-webkit-scrollbar-thumb,
.controls-panel::-webkit-scrollbar-thumb,
.preview-panel::-webkit-scrollbar-thumb,
.module-nav-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(157, 168, 163, 0.38);
}

/* template overlay layout */
.template-sheet {
  --template-font-family: "Helvetica Neue LT Std 77 Bold Condensed", "Helvetica Neue LT Std 67 Medium Condensed", "Helvetica Neue LT Std 87 Heavy Condensed", "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --template-font-size: 8.5pt;
  --ofs-vigencia-x: 0cm;
  --ofs-vigencia-y: 0cm;
  --ofs-version-x: 0cm;
  --ofs-version-y: 0cm;
  --ofs-customer-x: 0cm;
  --ofs-customer-y: 0cm;
  --ofs-reference-x: 0cm;
  --ofs-reference-y: 0cm;
  --ofs-material-x: 1.32cm;
  --ofs-material-y: 0cm;
  --ofs-gramaje-x: 2.80cm;
  --ofs-gramaje-y: 0cm;
  --ofs-handle-x: 2.54cm;
  --ofs-handle-y: 0.1cm;
  --ofs-handle-color-x: 1.94cm;
  --ofs-handle-color-y: 0.1cm;
  --ofs-barcode-x: 1.90cm;
  --ofs-barcode-y: 0.1cm;
  --ofs-gramaje-tolerance-x: 1.05cm;
  --ofs-gramaje-tolerance-y: 0cm;
  --ofs-production-summary-x: 0cm;
  --ofs-production-summary-y: 0.02cm;
  --ofs-tolerance-block-x: 0cm;
  --ofs-tolerance-block-y: -0.08cm;
  --ofs-fsc-mark-x: 0cm;
  --ofs-fsc-mark-y: 0cm;
  --ofs-refuerzo-si-x: 0cm;
  --ofs-refuerzo-si-y: 0cm;
  --ofs-refuerzo-no-x: 0cm;
  --ofs-refuerzo-no-y: 0cm;
  --pantone-mark-1-x: 10.67%;
  --pantone-mark-2-x: 21.30%;
  --pantone-mark-3-x: 33.03%;
  --pantone-mark-4-x: 42.84%;
  --pantone-mark-y: 19.65%;
  --ofs-change-date-x: 0cm;
  --ofs-change-date-y: 0cm;
  --ofs-change-version-x: 0cm;
  --ofs-change-version-y: 0cm;
  --ofs-responsable-x: 0cm;
  --ofs-responsable-y: 0cm;
  --ofs-change-description-x: 0cm;
  --ofs-change-description-y: 0cm;
  --ofs-observaciones-x: 0cm;
  --ofs-observaciones-y: 0cm;
  --ofs-signature-x: 0cm;
  --ofs-signature-y: -0.12cm;
  padding: 0;
  border-radius: 18px;
  background: #fff;
}

.template-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f4f7f5;
  background-image: url("./assets/app/FICHAS-TECNICAS-BOLSAS-DE-PAPEL-v11.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  font-family: var(--template-font-family);
  color: #070809;
}

.template-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.template-canvas > *:not(.template-background) {
  z-index: 1;
}

.template-sheet .tpl-box,
.template-sheet .tpl-color-item,
.template-sheet .tpl-instruction-item,
.template-sheet .tpl-preview,
.template-sheet .tpl-pill {
  position: absolute;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.template-sheet .tpl-title,
.template-sheet .tpl-guide-top,
.template-sheet .vertical-guides,
.template-sheet .callout-target,
.template-sheet .callout-link,
.template-sheet .tpl-certification,
.template-sheet .tpl-legal {
  display: none;
}

.template-sheet .tpl-label,
.template-sheet .tpl-side-label,
.template-sheet .tpl-color-item span,
.template-sheet .tpl-instruction-item span,
.template-sheet .tpl-heading,
.template-sheet .tpl-change-col small,
.template-sheet .tpl-date-grid small {
  display: none;
}

.template-sheet .tpl-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.18rem;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 1;
  font-weight: 700;
  font-stretch: condensed;
  color: #111;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-sheet .brand-cell {
  left: 2.35%;
  top: 2.05%;
  width: 12.7%;
  height: 4.95%;
  display: grid;
  place-items: center;
  padding: 0.18rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 0.28rem;
}

.template-sheet .brand-cell.use-template-brand {
  background: transparent;
}

.template-sheet .brand-cell.use-template-brand #preview-brand-image,
.template-sheet .brand-cell.use-template-brand #preview-brand-text {
  opacity: 0;
}

.template-sheet #preview-brand-image {
  max-width: 78%;
  max-height: 68%;
  object-fit: contain;
  display: none;
}

.template-sheet .brand-cell.has-image #preview-brand-image {
  display: block;
}

.template-sheet .brand-cell.has-image #preview-brand-text {
  display: none;
}

.template-sheet #preview-brand-text {
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  letter-spacing: 0.08em;
  font-weight: 800;
  font-stretch: condensed;
  line-height: 1;
  text-transform: uppercase;
}

.template-sheet .tpl-meta {
  width: 12.1%;
  height: 2.45%;
  padding: 0;
  display: grid;
  place-items: center;
}

.template-sheet .tpl-effective {
  right: 2.8%;
  top: 1.9%;
}

.template-sheet .tpl-version-box {
  right: 2.8%;
  top: 4.95%;
}

.template-sheet .tpl-meta .tpl-value {
  align-items: flex-end;
  padding: 0 0 0.04rem;
  font-size: var(--template-font-size);
}

.template-sheet .tpl-effective,
.template-sheet .tpl-version-box {
  display: none;
}

/* Fila superior reorganizada: cada valor vive solo dentro del bloque blanco bajo su titulo. */
.template-sheet .tpl-date {
  left: 2.44%;
  top: 8.18%;
  width: 11.89%;
  height: 1.3%;
  padding: 0;
}

.template-sheet .tpl-date-grid {
  display: grid;
  grid-template-columns: 0.82fr 0.82fr 1.08fr;
  gap: 0;
  width: 82%;
  height: 100%;
  margin: 0 auto;
}

.template-sheet .tpl-date-grid div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  text-align: center;
}

.template-sheet .tpl-date-grid strong {
  display: block;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 1;
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: -0.015em;
}

.template-sheet .tpl-customer,
.template-sheet .tpl-reference,
.template-sheet .tpl-material,
.template-sheet .tpl-gramaje,
.template-sheet .tpl-handle,
.template-sheet .tpl-handle-color,
.template-sheet .tpl-barcode,
.template-sheet .tpl-gramaje-tolerance {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-sheet .tpl-customer {
  left: 14.34%;
  top: 8.38%;
  width: 37.38%;
  height: 1.3%;
}

.template-sheet .tpl-reference {
  left: 51.72%;
  top: 8.38%;
  width: 35.14%;
  height: 1.3%;
}

.template-sheet .tpl-fsc-block {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.template-sheet .tpl-material {
  left: 2.55%;
  top: 12.18%;
  width: 19.55%;
  height: 1.25%;
}

.template-sheet .tpl-gramaje {
  left: 22.12%;
  top: 12.18%;
  width: 10.82%;
  height: 1.25%;
}

.template-sheet .tpl-handle {
  left: 33.05%;
  top: 12.18%;
  width: 14.55%;
  height: 1.25%;
}

.template-sheet .tpl-handle-color {
  left: 47.68%;
  top: 12.18%;
  width: 10.85%;
  height: 1.25%;
}

.template-sheet .tpl-barcode {
  left: 58.62%;
  top: 12.18%;
  width: 17.45%;
  height: 1.25%;
}

.template-sheet .tpl-reinforcement {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.template-sheet .tpl-gramaje-tolerance {
  right: 2.75%;
  top: 12.18%;
  width: 9.18%;
  height: 1.25%;
}

.template-sheet .tpl-customer .tpl-value {
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.26rem 0 0.32rem;
  text-align: left;
  letter-spacing: 0.012em;
}

.template-sheet .tpl-reference .tpl-value {
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.2rem 0 0.22rem;
  text-align: left;
}

.template-sheet .tpl-material .tpl-value,
.template-sheet .tpl-gramaje .tpl-value,
.template-sheet .tpl-handle .tpl-value,
.template-sheet .tpl-handle-color .tpl-value,
.template-sheet .tpl-barcode .tpl-value,
.template-sheet .tpl-gramaje-tolerance .tpl-value {
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.template-sheet .tpl-fsc-block .check-options,
.template-sheet .tpl-reinforcement .check-options {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.template-sheet .tpl-fsc-block .check-option,
.template-sheet .tpl-reinforcement .check-option {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.template-sheet .tpl-fsc-block .check-option {
  width: 1.43%;
  height: 1.38%;
}

.template-sheet .tpl-reinforcement .check-option {
  width: 1.43%;
  height: 1.38%;
}

.template-sheet .tpl-fsc-block .check-option[data-value="si"] {
  left: 89.57%;
  top: 9.07%;
  transform: translate(-50%, -50%);
}

.template-sheet .tpl-fsc-block .check-option[data-value="no"] {
  left: 94.09%;
  top: 9.07%;
  transform: translate(-50%, -50%);
}

.template-sheet .tpl-reinforcement .check-option[data-value="si"] {
  left: 84.75%;
  top: 12.79%;
  transform: translate(-50%, -50%);
}

.template-sheet .tpl-reinforcement .check-option[data-value="no"] {
  left: 89.17%;
  top: 12.79%;
  transform: translate(-50%, -50%);
}

.template-sheet .check-option i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.template-sheet .check-option.is-active i::before {
  content: "X";
  display: block;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #000;
}

.template-sheet .tpl-color-row {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.template-sheet .tpl-color-item {
  position: absolute;
  overflow: hidden;
  top: 14.04%;
  height: 3.93%;
  --swatch-center-x: 11.42%;
  --swatch-center-y: 62.98%;
  --swatch-width: 15.03%;
  --swatch-height: 54.10%;
  --color-text-left: 22.20%;
  --color-text-right: 3.75%;
  --color-text-center-y: 62.98%;
}

.template-sheet .tpl-color-item:nth-child(1) {
  left: 2.44%;
  width: 11.90%;
}

.template-sheet .tpl-color-item:nth-child(2) {
  left: 14.34%;
  width: 11.95%;
}

.template-sheet .tpl-color-item:nth-child(3) {
  left: 26.28%;
  width: 11.95%;
}

.template-sheet .tpl-color-item:nth-child(4) {
  left: 38.23%;
  width: 11.95%;
}

.template-sheet .tpl-color-item:nth-child(5) {
  left: 50.17%;
  width: 11.95%;
}

.template-sheet .tpl-color-item:nth-child(6) {
  left: 62.12%;
  width: 11.95%;
}

.template-sheet .tpl-color-item:nth-child(7) {
  left: 74.07%;
  width: 11.95%;
}

.template-sheet .tpl-color-item:nth-child(8) {
  left: 86.01%;
  width: 11.95%;
}

.template-sheet .tpl-color-item strong {
  position: absolute;
  left: var(--color-text-left);
  right: var(--color-text-right);
  top: var(--color-text-center-y);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--swatch-height);
  padding: 0 0.04rem;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 1;
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.template-sheet .tpl-color-item i {
  position: absolute;
  left: var(--swatch-center-x);
  top: var(--swatch-center-y);
  transform: translate(-50%, -50%);
  width: var(--swatch-width);
  height: var(--swatch-height);
  box-sizing: border-box;
  border: 0.5px solid #000;
  background-color: currentColor;
  border-radius: 0;
  box-shadow: inset 0 0 0 999px currentColor;
  flex-shrink: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.template-sheet .tpl-color-item i[data-unknown-color="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff !important;
  color: #111 !important;
  box-shadow: none;
  font-family: var(--template-font-family);
  font-size: calc(var(--template-font-size) * 1.15);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.template-sheet .tpl-instruction-row {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.template-sheet .tpl-instruction-item {
  position: absolute;
  top: var(--pantone-mark-y);
  width: 2.08%;
  height: 2.46%;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
}

.template-sheet .tpl-instruction-item:nth-child(1) {
  left: var(--pantone-mark-1-x);
}

.template-sheet .tpl-instruction-item:nth-child(2) {
  left: var(--pantone-mark-2-x);
}

.template-sheet .tpl-instruction-item:nth-child(3) {
  left: var(--pantone-mark-3-x);
}

.template-sheet .tpl-instruction-item:nth-child(4) {
  left: var(--pantone-mark-4-x);
}

.template-sheet .tpl-instruction-item strong {
  border: 0;
  background: transparent;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  font-weight: 700;
  font-stretch: condensed;
  line-height: 1;
}

.template-sheet .tpl-plan-area {
  --plan-frame-left: 8.67%;
  --plan-frame-top: 14.8%;
  --plan-frame-width: 90.7%;
  --plan-frame-height: 74.6%;
  --plan-frame-center-x: 52.35%;
  --plan-frame-center-y: 52.1%;
  position: absolute;
  left: 1.9%;
  top: 22.6%;
  width: 74.1%;
  height: 55.6%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.template-sheet #preview-plan-object,
.template-sheet #preview-plan-canvas,
.template-sheet #preview-plan-image {
  position: absolute;
  display: none;
  border: 0;
  background: transparent;
  z-index: 1;
}

.template-sheet #preview-plan-object,
.template-sheet #preview-plan-image {
  left: var(--plan-frame-left);
  top: var(--plan-frame-top);
  width: var(--plan-frame-width);
  height: var(--plan-frame-height);
  object-fit: contain;
}

.template-sheet #preview-plan-canvas {
  left: var(--plan-frame-center-x);
  top: var(--plan-frame-center-y);
  max-width: var(--plan-frame-width);
  max-height: var(--plan-frame-height);
  transform: translate(-50%, -50%);
}

.template-sheet .plan-annotation-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.template-sheet .plan-paper-texture {
  position: absolute;
  display: none;
  pointer-events: none;
  /* Equivale al preserveAspectRatio="none" de la capa TEXTURA KRAFT original:
     la hoja debe cubrir a la vez todo el ancho y todo el alto del viewBox. */
  object-fit: fill;
  mix-blend-mode: multiply;
  opacity: 1;
  z-index: 3;
}

.template-sheet .plan-surface.has-app-paper-texture .plan-paper-texture {
  display: block;
  left: var(--paper-texture-left, var(--plan-frame-left));
  top: var(--paper-texture-top, var(--plan-frame-top));
  width: var(--paper-texture-width, var(--plan-frame-width));
  height: var(--paper-texture-height, var(--plan-frame-height));
}

.template-sheet .plan-dim-line,
.template-sheet .plan-dim-tick,
.template-sheet .plan-dim-extension {
  fill: none;
  stroke: #111827;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.template-sheet .plan-dim-extension {
  opacity: 0.36;
  stroke-width: 0.75;
}

.template-sheet .plan-dim-text {
  fill: #111827;
  font-family: "Myriad Pro Cond", "Myriad Pro", Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3px;
  text-rendering: geometricPrecision;
}

.template-sheet .plan-dim-text-group {
  pointer-events: none;
}

.template-sheet .plan-dim-text-box {
  fill: rgba(255, 255, 255, 0.94);
  stroke: none;
}

.template-sheet .plan-dim-text-compact {
  stroke-width: 1px;
}

.template-sheet .plan-callout-layer {
  pointer-events: none;
}

.template-sheet .plan-callout-label-group {
  cursor: move;
  pointer-events: auto;
}

.template-sheet .plan-callout-label-group.is-dragging,
.template-sheet .plan-callout-label-group:hover .plan-callout-box {
  filter: drop-shadow(0 2px 4px rgba(225, 29, 72, 0.24));
}

.template-sheet .plan-callout-line {
  fill: none;
  stroke: #e11d48;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.template-sheet .plan-callout-dot {
  fill: #e11d48;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.template-sheet .plan-callout-box {
  fill: rgba(255, 255, 255, 0.94);
  stroke: #e11d48;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.template-sheet .plan-callout-label {
  fill: #e11d48;
  font-family: "Myriad Pro Cond", "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", "Myriad Pro", Arial, Helvetica, sans-serif;
  font-size: 6.4pt;
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.015em;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  text-rendering: geometricPrecision;
}

.template-sheet .plan-handle-layer,
.template-sheet .plan-handle-shape {
  pointer-events: none;
}

.template-sheet .plan-surface.show-object #preview-plan-object,
.template-sheet .plan-surface.show-canvas #preview-plan-canvas,
.template-sheet .plan-surface.show-image #preview-plan-image {
  display: block;
}

html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .plan-surface.print-raster-canvas #preview-plan-image {
  display: none !important;
}

html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .plan-surface.print-raster-canvas #preview-plan-canvas {
  display: block !important;
  left: 8.67% !important;
  top: 11.8% !important;
  width: 90.7% !important;
  height: 78.8% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  object-fit: contain;
}

.template-sheet .plan-surface.has-asset .plan-placeholder {
  display: none;
}

.template-sheet .plan-placeholder {
  position: absolute;
  left: 2.2%;
  top: 2.6%;
  width: 95.6%;
  height: 94.8%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.6rem 2.4rem;
  font-size: 0.58rem;
  line-height: 1.35;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
}

.template-sheet .plan-loading-overlay {
  position: absolute;
  inset: 4.8% 5.2%;
  z-index: 6;
  display: none;
  place-items: center;
  pointer-events: none;
}

.template-sheet .plan-surface.is-loading-plan .plan-loading-overlay,
.template-sheet .food-svg-plan-area.is-loading-plan .plan-loading-overlay {
  display: grid;
}

.template-sheet .plan-loading-card {
  width: min(24rem, 78%);
  display: grid;
  gap: 0.22rem;
  padding: 0.78rem 0.92rem;
  border: 1px solid rgba(29, 41, 57, 0.12);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.template-sheet .plan-loading-kicker {
  font-size: 0.44rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 83, 9, 0.84);
}

.template-sheet .plan-loading-title {
  font-family: var(--template-font-family);
  font-size: 0.72rem;
  line-height: 1.12;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.9);
}

.template-sheet .plan-loading-detail,
.template-sheet .plan-loading-hint {
  margin: 0;
}

.template-sheet .plan-loading-detail {
  font-size: 0.54rem;
  line-height: 1.32;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.66);
}

.template-sheet .plan-loading-hint {
  font-size: 0.46rem;
  line-height: 1.28;
  color: rgba(71, 85, 105, 0.82);
}

/* Anillo de avance de la carga del plano.
   No es un adorno: se llena con las etapas que el propio proceso va anunciando,
   asi que si el numero no sube es que algo se atasco. El perimetro del circulo
   de radio 15.5 es 97.39, y de ahi salen el dasharray y el dashoffset. */
.template-sheet .plan-loading-ring {
  position: relative;
  justify-self: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.16rem;
}

.template-sheet .plan-loading-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  /* El avance arranca arriba, no a las tres en punto. */
  transform: rotate(-90deg);
}

.template-sheet .plan-loading-ring circle {
  fill: none;
  stroke-width: 3.2;
}

.template-sheet .plan-loading-ring-pista {
  stroke: rgba(180, 83, 9, 0.16);
}

.template-sheet .plan-loading-ring-avance {
  stroke: rgba(180, 83, 9, 0.84);
  stroke-linecap: round;
  stroke-dasharray: 97.39;
  stroke-dashoffset: 97.39;
  transition: stroke-dashoffset 260ms ease;
}

/* Sin etapas conocidas no hay avance que mostrar: el anillo gira para decir
   "sigo trabajando", que es mejor que quedarse quieto y parecer colgado. */
.template-sheet .plan-loading-ring.es-indeterminado svg {
  animation: dtr-plan-loading-giro 1.1s linear infinite;
}

.template-sheet .plan-loading-ring.es-indeterminado .plan-loading-ring-avance {
  stroke-dasharray: 24 97.39;
  stroke-dashoffset: 0;
  transition: none;
}

.template-sheet .plan-loading-ring-paso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--template-font-family);
  font-size: 0.5rem;
  font-weight: 800;
  color: rgba(180, 83, 9, 0.9);
}

@keyframes dtr-plan-loading-giro {
  to { transform: rotate(270deg); }
}

@media (prefers-reduced-motion: reduce) {
  .template-sheet .plan-loading-ring.es-indeterminado svg {
    animation: none;
  }
  .template-sheet .plan-loading-ring-avance {
    transition: none;
  }
}

.template-sheet .tpl-preview {
  right: 4.45%;
  width: 17.75%;
  padding: 0;
  overflow: hidden;
}

.template-sheet.has-pdf-variant .tpl-plan-area {
  --plan-frame-left: 0%; --plan-frame-top: 0%; --plan-frame-width: 100%; --plan-frame-height: 100%;
}
.template-sheet.has-pdf-variant #preview-plan-canvas,
.template-sheet.has-pdf-variant #food-preview-plan-canvas,
.template-sheet.has-pdf-variant .plan-annotation-overlay { display: none !important; }
.template-sheet.has-pdf-variant .food-svg-plan-area { background: white; overflow: hidden; }
.template-sheet.has-pdf-variant #food-preview-plan-image { left: 0; top: 0; width: 100%; height: 100%; }
#food-pdf-variant-views { position: absolute; z-index: 2; left: 71%; top: 25%; width: 27%; height: 52%; object-fit: contain; background: white; }
.template-sheet.has-pdf-variant-views .tpl-preview-top,
.template-sheet.has-pdf-variant-views .tpl-preview-qr,
.template-sheet.has-pdf-variant-views .tpl-preview-imprint > .tpl-preview-label {
  display: none !important;
}
.template-sheet.has-pdf-variant-views.has-imprint-only .tpl-preview-imprint {
  top: 26%; right: 3%; width: 21%; height: 48%;
}
.template-sheet.has-pdf-variant-views .tpl-preview-imprint .extract-preview-media {
  width: 100%; height: 100%; max-height: 100%;
}
.template-sheet.has-pdf-variant-views.has-imprint-only #preview-imprint-image {
  width: 100%; height: 100%; max-height: 100%; object-fit: contain;
}

.pdf-variant-dialog { width: min(1450px, 96vw); max-width: 96vw; max-height: 94dvh; padding: 24px; border: 1px solid var(--app-success, #21ba85); border-radius: 16px; background: #111819; color: #eef4f1; overflow: auto; }
.pdf-variant-dialog::backdrop { background: #000b; }
.pdf-variant-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pdf-variant-dialog h2 { font-size: 22px; margin: 0; }
.pdf-variant-dialog p { line-height: 1.5; overflow-wrap: anywhere; }
.pdf-variant-status { padding: 10px 14px; background: #1b2b27; border-radius: 8px; }
.template-sheet.has-pdf-variant-full .tpl-plan-area,
.template-sheet.has-pdf-variant-full .food-svg-plan-area { left: 1.9%; width: 96.2%; z-index: 2; background: white; }
.template-sheet.has-pdf-variant-full .food-svg-plan-area { height: 54%; }
.template-sheet.has-pdf-variant-full .food-svg-observaciones { white-space: pre-line; }
.template-sheet.has-pdf-variant-full .tpl-preview,
.template-sheet.has-pdf-variant-full .tpl-preview-warning,
.template-sheet.has-pdf-variant-full #food-pdf-variant-views,
.template-sheet.has-pdf-variant-full .food-svg-plan-name,
.template-sheet.has-pdf-variant-full .food-svg-ancho-material,
.template-sheet.has-pdf-variant-full .food-svg-alto-total,
.template-sheet.has-pdf-variant-full .food-svg-alto-util,
.template-sheet.has-pdf-variant-full .food-svg-fuelle-fondo,
.template-sheet.has-pdf-variant-full .plan-paper-texture { display: none !important; }
.pdf-variant-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pdf-variant-extracted { padding: 12px 16px; border: 1px solid #42574d; border-radius: 8px; }
.pdf-variant-body details { margin: 12px 0; }
.pdf-variant-body summary { cursor: pointer; padding: 8px 0; }
#pdf-variant-reading-status { width: 100%; box-sizing: border-box; font-size: 13px; line-height: 1.5; }
.pdf-variant-body section, .pdf-variant-body form { min-width: 0; }
.pdf-variant-body form { display: flex; flex-direction: column; gap: 12px; }
.pdf-variant-dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pdf-variant-dialog input, .pdf-variant-dialog select { width: 100%; min-width: 0; padding: 9px; color: #eef4f1; background: #0b1011; border: 1px solid #53615b; border-radius: 6px; }
.pdf-variant-dialog :focus-visible { outline: 2px solid #50d5a3; outline-offset: 3px; }
.pdf-variant-toolbar { display: flex; flex-wrap: wrap; gap: 16px; }
.pdf-variant-toolbar label { flex: 1; }
.pdf-variant-help { font-size: 13px; color: #b7c8c0; }
.pdf-variant-stage { position: relative; width: 100%; background: white; touch-action: none; cursor: crosshair; overflow: hidden; }
.pdf-variant-stage canvas { display: block; width: 100%; height: auto; }
.pdf-variant-selection { position: absolute; border: 2px solid #008756; background: #13b97822; pointer-events: none; box-sizing: border-box; }
.pdf-variant-positions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.pdf-variant-crops { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.pdf-variant-crops figure { margin: 0; border: 1px solid #42574d; padding: 8px; border-radius: 8px; }
.pdf-variant-crops img { display: block; width: 100%; height: 140px; object-fit: contain; background: white; }
.pdf-variant-crops figcaption { margin: 8px 0; font-size: 13px; }
.pdf-variant-dialog label.pdf-variant-check { flex-direction: row; align-items: flex-start; line-height: 1.4; }
.pdf-variant-check input { width: 18px; height: 18px; flex: 0 0 18px; }
@media(max-width:800px) {
  .pdf-variant-dialog { padding: 14px; }
  .pdf-variant-body { grid-template-columns: 1fr; }
  .pdf-variant-dialog h2 { font-size: 18px; }
  .pdf-variant-positions { grid-template-columns: 1fr 1fr; }
}

.template-sheet .tpl-preview-top {
  top: 26.82%;
  height: 10.35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.template-sheet .tpl-preview-top-copy {
  order: 1;
  gap: 0.01rem;
  margin-top: 0.04rem;
}

.template-sheet .tpl-preview-top-copy span {
  display: block;
  font-family: var(--template-font-family);
  font-size: 0.34rem;
  line-height: 0.95;
  font-weight: 800;
  font-stretch: condensed;
  text-align: center;
  text-transform: uppercase;
}

.template-sheet .tpl-preview-top #preview-vista {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0.05rem auto 0.04rem;
  padding: 0.05rem 0.22rem;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 1;
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.015em;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  text-transform: uppercase;
}

.template-sheet .tpl-preview-imprint {
  top: 47.1%;
  right: 14.95%;
  width: 9.05%;
  height: 15.8%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.08rem;
}

.template-sheet .tpl-preview-qr {
  top: 47.1%;
  right: 4.45%;
  width: 9.05%;
  height: 15.8%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.08rem;
}

.template-sheet.has-imprint-preview .tpl-preview-imprint,
.template-sheet.has-imprint-preview.has-qr-preview .tpl-preview-qr {
  display: flex;
}

.template-sheet.has-imprint-only .tpl-preview-imprint {
  top: 43.55%;
  right: 4.55%;
  width: 18.25%;
  height: 21.15%;
}

.template-sheet.has-imprint-only #preview-imprint-image {
  width: auto;
  max-width: 100%;
  max-height: calc(100% - 0.68rem);
  height: auto;
}

.template-sheet.has-imprint-only #preview-imprint-image.needs-kraft-texture {
  background-size: 100% 100%;
}

.template-sheet.missing-imprint-preview .tpl-preview-imprint,
.template-sheet.missing-imprint-preview .tpl-preview-qr {
  display: none;
}

.template-sheet .tpl-preview-warning {
  position: absolute;
  top: 51.2%;
  right: 5.1%;
  width: 16.6%;
  min-height: 1.05rem;
  display: grid;
  place-items: center;
  gap: 0.04rem;
  padding: 0.14rem 0.18rem;
  font-family: var(--template-font-family);
  font-size: 0.48rem;
  line-height: 1;
  font-weight: 800;
  font-stretch: condensed;
  text-align: center;
  text-transform: uppercase;
  color: #9d1f1f;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(157, 31, 31, 0.55);
  border-radius: 0.18rem;
}

.template-sheet .tpl-preview-warning strong,
.template-sheet .tpl-preview-warning span {
  display: block;
  font: inherit;
}

.template-sheet .tpl-preview-warning[hidden] {
  display: none;
}

.template-sheet .tpl-preview-label {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0.58rem;
  font-family: var(--template-font-family);
  font-size: 0.4rem;
  line-height: 0.95;
  font-weight: 800;
  font-stretch: condensed;
  text-align: center;
  text-transform: uppercase;
  color: #111;
}

.template-sheet .tpl-preview-label strong,
.template-sheet .tpl-preview-label span {
  display: block;
  font: inherit;
}

.template-sheet .extract-preview-media {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-sheet .extract-preview-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0.24rem;
  pointer-events: none;
  display: none;
  z-index: 0;
}

.template-sheet #preview-top-edge-image,
.template-sheet #preview-imprint-image {
  object-fit: contain;
  border: 0;
  border-radius: 0.24rem;
  background: rgba(255, 255, 255, 0.94);
  margin: 0;
}

.template-sheet #preview-top-edge-image {
  order: 3;
  width: 100%;
  height: calc(100% - 1.28rem);
  object-position: center 58%;
}

.template-sheet #preview-imprint-image {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-position: center 50%;
}

.template-sheet #preview-imprint-image.needs-kraft-texture,
.template-sheet #preview-qr-image.needs-kraft-texture {
  background-color: #c9a274;
  background-image: url("./assets/texturas/kraft-natural.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.template-sheet #preview-qr-image {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}

html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-preview-imprint.needs-kraft-texture .extract-preview-texture,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-preview-qr.needs-kraft-texture .extract-preview-texture,
body.exporting-tech-sheet-pdf .template-sheet .tpl-preview-imprint.needs-kraft-texture .extract-preview-texture,
body.exporting-tech-sheet-pdf .template-sheet .tpl-preview-qr.needs-kraft-texture .extract-preview-texture,
.template-sheet.is-pdf-capture .tpl-preview-imprint.needs-kraft-texture .extract-preview-texture,
.template-sheet.is-pdf-capture .tpl-preview-qr.needs-kraft-texture .extract-preview-texture {
  display: block !important;
}

html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-preview-imprint.needs-kraft-texture #preview-imprint-image,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-preview-qr.needs-kraft-texture #preview-qr-image,
body.exporting-tech-sheet-pdf .template-sheet .tpl-preview-imprint.needs-kraft-texture #preview-imprint-image,
body.exporting-tech-sheet-pdf .template-sheet .tpl-preview-qr.needs-kraft-texture #preview-qr-image,
.template-sheet.is-pdf-capture .tpl-preview-imprint.needs-kraft-texture #preview-imprint-image,
.template-sheet.is-pdf-capture .tpl-preview-qr.needs-kraft-texture #preview-qr-image {
  background-image: none !important;
  background-color: transparent !important;
}

.template-sheet #preview-top-edge-image[hidden],
.template-sheet #preview-imprint-image[hidden],
.template-sheet #preview-qr-image[hidden] {
  display: none;
}

.template-sheet .tpl-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 0.35rem;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 1;
  font-weight: 800;
  font-stretch: condensed;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  z-index: 4;
}

.template-sheet .tpl-pill-left {
  left: 2.50%;
  top: 78.47%;
  width: 29.20%;
  height: 2.14%;
  overflow: hidden;
}

.template-sheet .tpl-pill-right {
  left: 61.05%;
  bottom: 15.24%;
  width: 15.65%;
  height: 2.02%;
}

.template-sheet .tpl-pill strong {
  font-size: inherit;
}

.template-sheet .tpl-changelog {
  left: 2.43%;
  top: 80.53%;
  width: 64.98%;
  height: 10.27%;
  padding: 0;
  z-index: 1;
}

.template-sheet .tpl-observations {
  left: 65.68%;
  bottom: 6.18%;
  width: 29.82%;
  height: 9.86%;
  padding: 0;
  z-index: 1;
}

.template-sheet .tpl-change-table {
  position: absolute;
  inset: 0;
  display: block;
}

.template-sheet .tpl-change-col {
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 53.95%;
  height: 13%;
  padding: 0;
  transform: translate(-50%, -50%);
}

.template-sheet .tpl-change-col:nth-child(1) {
  left: 3.24%;
  width: 6.48%;
}

.template-sheet .tpl-change-col:nth-child(2) {
  left: 10.58%;
  width: 8.20%;
}

.template-sheet .tpl-change-col:nth-child(3) {
  left: 20.72%;
  width: 12.08%;
}

.template-sheet .tpl-change-col:nth-child(4) {
  left: 63.38%;
  width: 73.24%;
}

.template-sheet .tpl-change-col strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 0.96;
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-sheet .tpl-observations-text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.44rem 0.26rem 0.08rem;
  font-family: var(--template-font-family);
  font-size: 10pt;
  line-height: 1.05;
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: 0;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.template-sheet .tpl-signature {
  bottom: 0.62%;
  height: 4.92%;
  padding: 0;
  overflow: hidden;
}

.template-sheet .tpl-signature-designer {
  left: 74.42%;
  width: 10.43%;
  --signature-art-left: 0%;
  --signature-art-right: -40%;
  --signature-art-top: -30%;
  --signature-art-bottom: 0%;
  --signature-image-left: 0%;
  --signature-image-top: 0%;
  --signature-image-width: 50%;
  --signature-image-height: 50%;
  --signature-image-x: 0%;
  --signature-image-y: 0%;
  --signature-image-scale: 1;
}

.template-sheet .tpl-signature-designer.signature-style-andres {
  left: 76.68%;
  top: 93.68%;
  bottom: auto;
  width: 9.30%;
  height: 4.08%;
  --signature-art-left: 6%;
  --signature-art-right: 6%;
  --signature-art-top: 4%;
  --signature-art-bottom: 4%;
  --signature-image-left: 0%;
  --signature-image-top: 0%;
  --signature-image-width: 100%;
  --signature-image-height: 100%;
  --signature-image-x: 0%;
  --signature-image-y: 0%;
  --signature-image-scale: 1;
}

.template-sheet .tpl-signature-designer.signature-style-alex {
  left: 76.68%;
  top: 93.68%;
  bottom: auto;
  width: 9.30%;
  height: 4.08%;
  --signature-art-left: 6%;
  --signature-art-right: 6%;
  --signature-art-top: 4%;
  --signature-art-bottom: 4%;
  --signature-image-left: 0%;
  --signature-image-top: 0%;
  --signature-image-width: 100%;
  --signature-image-height: 100%;
  --signature-image-x: 0%;
  --signature-image-y: 0%;
  --signature-image-scale: 1;
}

.template-sheet .tpl-signature-designer.signature-style-camilo {
  left: 76.68%;
  top: 93.68%;
  bottom: auto;
  width: 9.30%;
  height: 4.08%;
  --signature-art-left: 6%;
  --signature-art-right: 6%;
  --signature-art-top: 4%;
  --signature-art-bottom: 4%;
  --signature-image-left: 0%;
  --signature-image-top: 0%;
  --signature-image-width: 100%;
  --signature-image-height: 100%;
  --signature-image-x: 0%;
  --signature-image-y: 0%;
  --signature-image-scale: 1;
}

.template-sheet .tpl-signature-designer.signature-style-hector {
  left: 76.68%;
  top: 93.68%;
  bottom: auto;
  width: 9.30%;
  height: 4.08%;
  --signature-art-left: 6%;
  --signature-art-right: 6%;
  --signature-art-top: 4%;
  --signature-art-bottom: 4%;
  --signature-image-left: 0%;
  --signature-image-top: 0%;
  --signature-image-width: 100%;
  --signature-image-height: 100%;
  --signature-image-x: 0%;
  --signature-image-y: 0%;
  --signature-image-scale: 1;
}

.template-sheet .tpl-signature-client {
  left: 84.82%;
  width: 10.58%;
}

.template-sheet .tpl-signature-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.18rem 0.12rem 0;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  line-height: 1;
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-sheet .tpl-signature.has-image .tpl-signature-value {
  display: none;
}

.template-sheet .tpl-signature.has-image {
  font-size: 0;
  line-height: 0;
}

.template-sheet .tpl-signature-art {
  position: absolute;
  left: var(--signature-art-left);
  right: var(--signature-art-right);
  top: var(--signature-art-top);
  bottom: var(--signature-art-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-sheet .tpl-signature-art .tpl-signature-value {
  width: 100%;
  height: 100%;
  padding: 0;
}

.template-sheet .tpl-signature-image {
  display: block;
  position: absolute;
  left: var(--signature-image-left);
  top: var(--signature-image-top);
  width: var(--signature-image-width);
  height: var(--signature-image-height);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center center;
  transform: translate(var(--signature-image-x), var(--signature-image-y)) scale(var(--signature-image-scale));
  transform-origin: center center;
}

.template-sheet .tpl-signature-image[hidden] {
  display: none;
}

/* template calibration offsets */
.template-sheet #preview-vigencia {
  transform: translate(var(--ofs-vigencia-x), var(--ofs-vigencia-y));
}

.template-sheet #preview-version {
  transform: translate(var(--ofs-version-x), var(--ofs-version-y));
}

.template-sheet .tpl-customer .tpl-value {
  transform: translate(var(--ofs-customer-x), var(--ofs-customer-y));
}

.template-sheet .tpl-reference .tpl-value {
  transform: translate(var(--ofs-reference-x), var(--ofs-reference-y));
}

.template-sheet .tpl-material .tpl-value {
  transform: translate(var(--ofs-material-x), var(--ofs-material-y));
}

.template-sheet .tpl-gramaje .tpl-value {
  transform: translate(var(--ofs-gramaje-x), var(--ofs-gramaje-y));
}

.template-sheet .tpl-handle .tpl-value {
  transform: translate(var(--ofs-handle-x), var(--ofs-handle-y));
}

.template-sheet .tpl-handle-color .tpl-value {
  transform: translate(var(--ofs-handle-color-x), var(--ofs-handle-color-y));
}

.template-sheet .tpl-barcode .tpl-value {
  transform: translate(var(--ofs-barcode-x), var(--ofs-barcode-y));
}

.template-sheet .tpl-gramaje-tolerance .tpl-value {
  transform: translate(var(--ofs-gramaje-tolerance-x), var(--ofs-gramaje-tolerance-y));
}

.template-sheet #preview-production-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.065cm;
  width: 100%;
  white-space: nowrap;
  font-size: var(--template-font-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transform-origin: center center;
  transform: translate(var(--ofs-production-summary-x), var(--ofs-production-summary-y));
}

.template-sheet #preview-production-summary strong {
  font-weight: 800;
  margin-left: 0.025cm;
}

.template-sheet #preview-production-summary .production-separator {
  margin: 0 0.025cm;
}

html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet #preview-production-summary {
  gap: 0.075cm;
  font-size: 8pt;
  letter-spacing: -0.025em;
  text-rendering: geometricPrecision;
}

.template-sheet #preview-tolerance-block {
  display: inline-block;
  transform: translate(var(--ofs-tolerance-block-x), var(--ofs-tolerance-block-y));
}

.template-sheet #fsc-mark-si,
.template-sheet #fsc-mark-no {
  transform: translate(var(--ofs-fsc-mark-x), var(--ofs-fsc-mark-y));
}

.template-sheet #refuerzo-mark-si {
  transform: translate(var(--ofs-refuerzo-si-x), var(--ofs-refuerzo-si-y));
}

.template-sheet #refuerzo-mark-no {
  transform: translate(var(--ofs-refuerzo-no-x), var(--ofs-refuerzo-no-y));
}

.template-sheet #pantone-mark-1 {
  display: inline-block;
}

.template-sheet #pantone-mark-2 {
  display: inline-block;
}

.template-sheet #pantone-mark-3 {
  display: inline-block;
}

.template-sheet #pantone-mark-4 {
  display: inline-block;
}

.template-sheet #preview-change-date {
  transform: translate(var(--ofs-change-date-x), var(--ofs-change-date-y));
}

.template-sheet #preview-change-version {
  transform: translate(var(--ofs-change-version-x), var(--ofs-change-version-y));
}

.template-sheet #preview-responsable {
  transform: translate(var(--ofs-responsable-x), var(--ofs-responsable-y));
}

.template-sheet #preview-change-description {
  transform: translate(var(--ofs-change-description-x), var(--ofs-change-description-y));
}

.template-sheet #preview-observaciones {
  transform: translate(var(--ofs-observaciones-x), var(--ofs-observaciones-y));
}

.template-sheet #preview-customer-signature {
  transform: translate(var(--ofs-signature-x), var(--ofs-signature-y));
}

@media (max-width: 1760px) {
  .app-topbar-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-workspace {
    grid-template-columns: 92px minmax(420px, 0.92fr) minmax(700px, 1.08fr);
  }
}

@media (max-width: 1480px) {
  .app-workspace {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .preview-panel {
    position: static;
    min-height: auto;
    max-height: none;
  }

  .final-sheet {
    width: 100%;
  }
}

@media (max-width: 1220px) {
  .app-shell {
    width: min(100%, calc(100% - 1rem));
    padding-top: 0.75rem;
  }

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

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

  .app-sidebar-rail {
    position: static;
    width: 100%;
    min-height: auto;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: stretch;
    padding: 0.9rem;
  }

  .sidebar-brand-rail,
  .sidebar-note-rail {
    display: none;
  }

  .module-nav-list {
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 0.6rem;
    padding-bottom: 0.12rem;
  }

  .module-nav {
    width: auto;
    min-width: 88px;
    min-height: 4rem;
  }

  .module-nav-copy {
    left: 50%;
    top: calc(100% + 0.7rem);
    transform: translateX(-50%) translateY(-8px);
  }

  .module-nav-copy::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(135deg);
  }

  .module-nav:hover .module-nav-copy,
  .module-nav:focus-visible .module-nav-copy,
  .module-nav.is-active .module-nav-copy {
    transform: translateX(-50%) translateY(0);
  }

  .controls-panel,
  .preview-panel {
    min-height: auto;
    max-height: none;
  }
}

@media (max-width: 960px) {
  .panel-head,
  .panel-head-system,
  .preview-shell-head,
  .inline-actions,
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .module-overview-grid,
  .resource-summary-grid,
  .client-module-grid,
  .config-module-grid,
  .config-textarea-grid,
  .config-default-grid,
  .upload-grid-2,
  .dual-grid,
  .triple-grid,
  .builder-nav {
    grid-template-columns: 1fr;
  }

  .app-topbar-status {
    grid-template-columns: 1fr;
  }

  .topbar-card {
    min-height: 72px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: calc(100% - 0.75rem);
  }

  .app-topbar {
    padding: 0.9rem 0.85rem;
  }

  .app-topbar-copy h1 {
    font-size: clamp(1.55rem, 9vw, 2.1rem);
  }

  .controls-panel,
  .preview-panel {
    padding: 0.85rem;
    border-radius: 20px;
  }

  .builder-jump {
    font-size: 0.8125rem;
    padding: 0.72rem 0.78rem;
  }

  .template-sheet {
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.login-locked {
  overflow: hidden;
  background: #24b47e;
}

body.login-locked .yt-header,
body.login-locked .app-shell {
  display: none !important;
}

body.login-ready .login-gate,
.login-gate[hidden] {
  display: none !important;
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
  align-items: center;
  gap: 56px;
  min-height: 100vh;
  padding: 56px 70px;
  overflow: auto;
  color: #f4f7f5;
  background-color: #24b47e;
  background-image:
    linear-gradient(90deg, rgba(7, 8, 9, 0.92) 0%, rgba(7, 8, 9, 0.64) 42%, rgba(7, 8, 9, 0.94) 100%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.18) 0%, rgba(7, 8, 9, 0.78) 100%),
    url("./assets/app/FONDO%20LOGUIN.png");
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

.login-gate::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(244, 247, 245, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 245, 0.024) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.72;
  pointer-events: none;
}

.login-visual-panel,
.login-card {
  position: relative;
  z-index: 1;
}

.login-visual-panel {
  display: grid;
  align-content: space-between;
  min-height: min(760px, calc(100vh - 112px));
  max-width: 820px;
  text-shadow: 0 2px 18px rgba(7, 8, 9, 0.72);
}

.login-brand-logo {
  display: block;
  width: 300px;
  height: 72px;
  background: url("./assets/app/LOGO.svg") left center / contain no-repeat;
  filter: brightness(0) invert(1);
}

.login-visual-copy {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.login-kicker,
.login-card-kicker {
  margin: 0;
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.login-visual-copy h1 {
  max-width: 760px;
  margin: 0;
  font-family: "Roboto Condensed", "Arial Narrow", ui-monospace, monospace;
  font-size: 4.25rem;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.login-visual-copy p {
  max-width: 720px;
  margin: 0;
  color: #f4f7f5;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
}

.login-module-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin-top: 32px;
}

.login-module-strip span,
.login-role-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(199, 165, 75, 0.24);
  border-radius: 999px;
  color: #e0c765;
  background: rgba(18, 23, 26, 0.66);
  font-size: 0.75rem;
  font-weight: 800;
}

.login-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-top: 30px;
}

.login-summary-grid article {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(199, 165, 75, 0.2);
  border-radius: 8px;
  background: rgba(7, 8, 9, 0.72);
}

.login-summary-grid strong {
  color: #f4f7f5;
  font-size: 1.625rem;
  line-height: 1.3;
}

.login-summary-grid span {
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.login-card {
  display: grid;
  gap: 20px;
  width: min(100%, 520px);
  padding: 40px 34px;
  border: 1px solid rgba(199, 165, 75, 0.32);
  border-radius: 8px;
  background: rgba(12, 15, 17, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 28px 70px rgba(7, 8, 9, 0.46);
}

.login-card h2 {
  margin: 0;
  color: #f4f7f5;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.login-card-copy {
  margin: 0;
  color: #cad4cf;
  font-size: 1rem;
  font-weight: 700;
}

.login-field {
  display: grid;
  gap: 8px;
}

.login-field span,
.login-remember span {
  margin: 0;
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.login-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 8px;
  color: #0c0f11;
  background: #f4f7f5;
  font-weight: 800;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.login-field input:focus {
  border-color: rgba(199, 165, 75, 0.72);
  box-shadow: 0 0 0 4px rgba(199, 165, 75, 0.18);
  background: #f4f7f5;
}

.login-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.login-show-password,
.login-submit {
  min-height: 52px;
  border: 1px solid rgba(199, 165, 75, 0.28);
  border-radius: 8px;
  font-weight: 900;
}

.login-show-password {
  padding: 0 18px;
  color: #f4f7f5;
  background: rgba(18, 23, 26, 0.94);
}

.login-submit {
  width: 100%;
  color: #0c0f11;
  background: linear-gradient(135deg, #e0c765, #c7a54b);
}

.login-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}

.login-remember {
  display: inline-grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.login-remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #c7a54b;
}

.login-status {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(199, 165, 75, 0.22);
  border-radius: 8px;
  color: #e0c765;
  background: rgba(18, 23, 26, 0.82);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.5;
}

.login-status[data-status="error"] {
  border-color: rgba(239, 114, 114, 0.48);
  color: #ef7272;
  background: rgba(239, 114, 114, 0.58);
}

.login-status[data-status="success"] {
  border-color: rgba(80, 209, 154, 0.48);
  color: #50d19a;
  background: rgba(36, 180, 126, 0.58);
}

.login-status[data-status="warning"] {
  border-color: rgba(224, 199, 101, 0.52);
  color: #e0c765;
  background: rgba(199, 165, 75, 0.58);
}

.login-role-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1080px) {
  .login-gate {
    position: fixed;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 22px;
  }

  .login-visual-panel {
    min-height: auto;
    gap: 28px;
  }

  .login-visual-copy h1 {
    font-size: 2.625rem;
  }

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

  .login-card {
    justify-self: stretch;
    width: 100%;
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .login-gate {
    padding: 22px 14px;
  }

  .login-brand-logo {
    width: 220px;
    height: 54px;
  }

  .login-visual-copy h1 {
    font-size: 2rem;
  }

  .login-visual-copy p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .login-summary-grid {
    grid-template-columns: 1fr;
  }

  .login-card {
    padding: 26px 18px;
  }

  .login-password-row {
    grid-template-columns: 1fr;
  }

  .login-show-password {
    width: 100%;
  }
}

/* clean serious overrides */
body.app-body-pro {
  background:
    linear-gradient(180deg, #f4f7f5 0%, #f4f7f5 100%);
}

body.app-body-pro::before {
  opacity: 0.4;
}

.page-glow {
  opacity: 0.4;
  filter: blur(40px);
}

.app-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.85rem 1rem;
}

.app-topbar::after {
  height: 3px;
  background: #59a8e8;
}

.app-topbar-copy {
  gap: 0.12rem;
}

.app-topbar-copy .eyebrow {
  color: #9da8a3;
}

.app-topbar-copy h1 {
  font-size: clamp(2rem, 2.8vw, 3rem);
  letter-spacing: -0.05em;
}

.app-topbar-text,
.app-topbar-status,
.topbar-card,
.preview-badges,
.output-copy-text,
.module-overview-card p,
.resource-summary-card p,
.upload-note {
  display: none !important;
}

.app-topbar-compact {
  display: grid;
  justify-items: end;
  gap: 0.08rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid #cad4cf;
  border-radius: 12px;
  background: #59a8e8;
}

.app-topbar-compact span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9da8a3;
}

.app-topbar-compact strong {
  font-size: 1rem;
  font-weight: 700;
  color: #59a8e8;
}

.app-hidden-metrics {
  display: none;
}

.panel-head-system {
  align-items: center;
}

.module-stage-head {
  gap: 0.1rem;
}

.module-stage-head h2 {
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.module-stage-copy,
.detail-card p,
.module-help {
  display: none;
}

#clients-storage-status {
  display: block;
  margin: 0;
  color: #9da8a3;
  font-size: 0.8125rem;
}

#clients-storage-status.status-surface {
  color: var(--yt-dark-text);
}

button {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 42px;
  border-radius: 10px;
  box-shadow: none;
}

.primary-button {
  background: #59a8e8;
  border-color: #59a8e8;
  color: #f4f7f5;
}

.primary-button:hover {
  background: #59a8e8;
  filter: none;
}

.secondary-button,
.ghost-button {
  background: #f4f7f5;
  color: #59a8e8;
  border-color: #cad4cf;
}

.secondary-button:hover,
.ghost-button:hover {
  background: #59a8e8;
  border-color: #9da8a3;
}

.builder-nav {
  background: #59a8e8;
  border-color: #cad4cf;
  box-shadow: none;
}

.builder-jump {
  border-radius: 12px;
  border-color: #cad4cf;
  color: #2a3338;
}

.builder-jump::before {
  background: #59a8e8;
}

.builder-jump.is-active {
  background: #59a8e8;
  border-color: #59a8e8;
  color: #f4f7f5;
  box-shadow: none;
}

.sidebar-brand-badge {
  animation: none;
}

.clients-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#panel-clientes .client-module-grid {
  grid-template-columns: minmax(290px, 0.78fr) minmax(540px, 1.22fr);
  align-items: start;
}

.clients-save-block {
  align-content: start;
}

.clients-inventory-block {
  gap: 0.75rem;
}

.inventory-head {
  margin-bottom: 0.1rem;
}

.inventory-toolbar {
  display: grid;
  gap: 0.45rem;
}

.inventory-toolbar input {
  min-height: 42px;
}

.inventory-table-wrap {
  border: 1px solid #f4f7f5;
  border-radius: 14px;
  background: #f4f7f5;
  overflow: auto;
}

.inventory-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.inventory-table thead th {
  padding: 0.66rem 0.72rem;
  text-align: left;
  border-bottom: 1px solid #f4f7f5;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9da8a3;
  background: #f4f7f5;
}

.inventory-table td {
  padding: 0.64rem 0.72rem;
  border-top: 1px solid #f4f7f5;
  color: #59a8e8;
  font-size: 0.8125rem;
  vertical-align: middle;
}

.inventory-table tbody tr:hover {
  background: #f4f7f5;
}

.inventory-table tbody tr.is-active {
  background: #59a8e8;
}

.inventory-actions-col {
  width: 170px;
}

.inventory-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-start;
}

.table-action {
  border: 1px solid #cad4cf;
  background: #f4f7f5;
  color: #2a3338;
  border-radius: 8px;
  padding: 0.35rem 0.62rem;
  min-height: 32px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

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

.table-action-load {
  border-color: #59a8e8;
  background: #59a8e8;
  color: #f4f7f5;
}

.table-action-load:hover {
  background: #59a8e8;
}

.table-action-delete {
  border-color: #ef7272;
  color: #ef7272;
  background: #ef7272;
}

.table-action-delete:hover {
  background: #ef7272;
}

.inventory-empty {
  text-align: center;
  color: #9da8a3;
  padding: 1rem 0.8rem !important;
}

.inventory-detail {
  display: none;
}

@media (max-width: 1420px) {
  #panel-clientes .client-module-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1220px) {
  .app-topbar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.55rem;
  }

  .app-topbar-compact {
    justify-items: start;
  }
}

@media (max-width: 760px) {
  .module-stage-head h2 {
    font-size: 1.625rem;
  }

  .inventory-table {
    min-width: 620px;
  }

  .inventory-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 1220px) {
  .app-workspace.is-preview-hidden {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .inline-actions > *,
  .toolbar-grid > * {
    flex: 0 0 auto;
  }
}


.app-topbar-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.app-brand-mark {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f4f7f5;
  background: linear-gradient(140deg, var(--brand-slate-900), var(--brand-slate-700));
  box-shadow: 0 10px 20px rgba(27, 35, 39, 0.24);
}

.app-topbar-copy {
  gap: 0.35rem !important;
}

.app-topbar-copy h1 {
  font-size: clamp(1.8rem, 2.25vw, 2.5rem) !important;
  letter-spacing: -0.045em !important;
  color: var(--brand-slate-900) !important;
}

.app-topbar-text {
  display: block !important;
  margin: 0;
  color: #9da8a3;
  font-size: 0.875rem;
  line-height: 1.4;
  max-width: 64ch;
}

.app-topbar-status {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.topbar-card {
  display: grid !important;
  gap: 0.35rem;
  min-height: 84px;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 8px 16px rgba(27, 35, 39, 0.08);
}

.topbar-card span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9da8a3;
}

.topbar-card strong {
  font-size: 1rem;
  color: #1b2327;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-card small {
  color: #9da8a3;
  font-size: 0.75rem;
}

.app-topbar-compact,
.app-hidden-metrics {
  display: none !important;
}

button {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

button:focus-visible {
  outline: 3px solid rgba(36, 180, 126, 0.22);
  outline-offset: 2px;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 44px !important;
  padding: 0 1rem;
  border-radius: 12px !important;
}

.primary-button {
  border: 1px solid transparent !important;
  color: #f4f7f5 !important;
  background: linear-gradient(135deg, var(--brand-green-500), var(--brand-teal-500)) !important;
  box-shadow: 0 10px 18px rgba(36, 180, 126, 0.24);
}

.primary-button:hover {
  transform: translateY(-1px);
  filter: brightness(0.97);
}

.secondary-button,
.ghost-button {
  border: 1px solid var(--ui-line-strong) !important;
  background: var(--ui-surface) !important;
  color: #202a2e !important;
}

.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
  border-color: #9da8a3 !important;
  background: #59a8e8 !important;
}

.module-stage-copy,
.module-overview-card p,
.resource-summary-card p,
.upload-note,
.output-copy-text {
  display: block !important;
}

.preview-badges {
  display: flex !important;
  gap: 0.45rem;
}

.preview-badge {
  border-color: #cad4cf;
  color: #2a3338;
  background: #59a8e8;
}

.builder-nav {
  border-color: var(--ui-line-strong) !important;
  background: #59a8e8 !important;
  box-shadow: none !important;
}

.builder-jump {
  border-color: #cad4cf !important;
  color: #2a3338 !important;
  border-radius: 12px !important;
}

.builder-jump.is-active {
  border-color: transparent !important;
  color: #f4f7f5 !important;
  background: linear-gradient(135deg, var(--brand-slate-900), var(--brand-slate-700)) !important;
}

#panel-clientes .client-module-grid {
  grid-template-columns: 1fr !important;
  gap: 1rem;
}

.clients-save-block,
.clients-inventory-block {
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(160deg, #f4f7f5, #59a8e8) !important;
  box-shadow: 0 14px 26px rgba(27, 35, 39, 0.08);
}

.inventory-toolbar {
  display: flex !important;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.inventory-toolbar input {
  flex: 1 1 420px;
  min-height: 44px;
}

.inventory-toolbar-meta {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
  color: #9da8a3;
  font-size: 0.8125rem;
}

.inventory-toolbar-meta p {
  margin: 0;
  padding: 0.38rem 0.66rem;
  border: 1px solid #f4f7f5;
  border-radius: 999px;
  background: #f4f7f5;
}

.inventory-toolbar-meta strong {
  color: #202a2e;
}

.inventory-table-wrap {
  border: 1px solid #f4f7f5 !important;
  border-radius: 16px !important;
  background: #f4f7f5 !important;
  box-shadow: 0 8px 18px rgba(27, 35, 39, 0.08);
}

.inventory-table {
  min-width: 1080px;
}

.inventory-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.75rem 0.72rem !important;
  border-bottom: 1px solid #f4f7f5 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.14em !important;
  color: #9da8a3 !important;
  background: #59a8e8 !important;
}

.inventory-table td {
  padding: 0.72rem !important;
  font-size: 0.8125rem !important;
  border-top: 1px solid #f4f7f5 !important;
  color: #202a2e !important;
}

.inventory-index {
  width: 42px;
  text-align: center;
  font-weight: 700;
  color: #9da8a3;
}

.inventory-actions-col {
  width: 200px;
}

.inventory-actions {
  display: inline-flex !important;
  gap: 0.42rem;
  justify-content: flex-start;
}

.table-action {
  min-height: 33px;
  border-radius: 9px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.01em;
}

.table-action-load {
  border-color: transparent !important;
  color: #f4f7f5 !important;
  background: linear-gradient(135deg, var(--brand-slate-900), var(--brand-slate-700)) !important;
}

.table-action-delete {
  border-color: #ef7272 !important;
  color: #ef7272 !important;
  background: #ef7272 !important;
}

.inventory-table tbody tr.is-active {
  background: linear-gradient(90deg, rgba(36, 180, 126, 0.12), rgba(36, 180, 126, 0.06)) !important;
}

.inventory-empty {
  padding: 1.2rem 0.8rem !important;
  color: #9da8a3 !important;
}

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

  .app-topbar-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .inventory-table {
    min-width: 900px;
  }
}

@media (max-width: 760px) {
  .app-topbar-main {
    align-items: flex-start;
  }

  .app-brand-mark {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
  }

  .app-topbar-copy h1 {
    font-size: 1.625rem !important;
  }

  .inventory-table {
    min-width: 760px;
  }

  .inventory-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* 2026 industrial dark redesign */
:root {
  --brand-black: #1b2327;
  --brand-kraft: #c7a54b;
  --brand-green: #24b47e;
  --brand-gold: #c7a54b;
  --app-bg: #070809;
  --app-bg-soft: #0c0f11;
  --app-panel: rgba(18, 23, 26, 0.92);
  --app-panel-strong: rgba(12, 15, 17, 0.98);
  --app-panel-alt: rgba(18, 23, 26, 0.94);
  --app-card: #12171a;
  --app-card-soft: #1b2327;
  --app-line: rgba(157, 168, 163, 0.18);
  --app-line-strong: rgba(157, 168, 163, 0.34);
  --app-text: #f4f7f5;
  --app-text-dim: #cad4cf;
  --app-text-muted: #9da8a3;
  --app-accent: #c7a54b;
  --app-accent-strong: #c7a54b;
  --app-accent-soft: rgba(157, 168, 163, 0.14);
  --app-success: #24b47e;
  --app-warning: #c7a54b;
  --app-danger: #ef7272;
  --app-shadow-lg: 0 26px 70px rgba(7, 8, 9, 0.42);
  --app-shadow-md: 0 18px 40px rgba(7, 8, 9, 0.28);
  --app-shadow-sm: 0 10px 20px rgba(7, 8, 9, 0.18);
  --header-height: 78px;
  --sidebar-width: 248px;
  --rightbar-width: 360px;
  --shell-gap: 18px;
  --sheet-base-width: 1080px;
  --sheet-base-height: 834.5454545455px;
}

html {
  color-scheme: dark;
}

body.yt-dark {
  min-height: 100vh;
  overflow: hidden;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--app-text);
  background:
    radial-gradient(circle at top left, rgba(36, 180, 126, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(157, 168, 163, 0.14), transparent 24%),
    linear-gradient(180deg, #0c0f11 0%, #070809 100%);
}

body.yt-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(244, 247, 245, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 245, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, rgba(7, 8, 9, 0.9), transparent 88%);
  opacity: 0.22;
}

body.yt-dark a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.yt-header {
  height: var(--header-height);
  padding: 0 22px;
  background: rgba(12, 15, 17, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(157, 168, 163, 0.16);
  box-shadow: 0 12px 32px rgba(7, 8, 9, 0.24);
}

.header-left,
.header-right {
  width: min(28vw, 320px);
  gap: 14px;
}

.brand {
  gap: 12px;
  align-items: center;
}

.brand-logo {
  width: 168px;
  height: 38px;
  display: block;
  flex: 0 0 auto;
  background-image: url("./assets/app/LOGO.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 38px;
  filter: drop-shadow(0 8px 18px rgba(7, 8, 9, 0.22));
  overflow: hidden;
}

.brand-copy {
  display: none !important;
}

.brand-name {
  display: none !important;
}

.brand-subtitle {
  display: none !important;
}

.menu-toggle,
.user-avatar,
.yt-btn-icon,
.zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-line);
  background: rgba(12, 15, 17, 0.9);
  color: var(--app-text);
  border-radius: 14px;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.menu-toggle {
  width: 44px;
  height: 44px;
}

.menu-toggle:hover,
.yt-btn-icon:hover,
.zoom-btn:hover,
.user-avatar:hover {
  transform: translateY(-1px);
  background: rgba(18, 23, 26, 0.96);
  border-color: var(--app-line-strong);
}

.header-center {
  padding: 0 18px;
}

.search-bar {
  position: relative;
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.2);
  background: rgba(12, 15, 17, 0.92);
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.03);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.search-bar svg {
  color: var(--app-text-dim);
  flex: 0 0 auto;
}

.search-bar input {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-text);
  min-width: 0;
}

.search-bar input::placeholder {
  color: var(--app-text-muted);
}

.search-bar input:focus {
  outline: none;
}

.search-bar:focus-within {
  border-color: rgba(157, 168, 163, 0.52);
  box-shadow: 0 0 0 4px rgba(157, 168, 163, 0.12);
  background: rgba(18, 23, 26, 0.98);
}

.search-btn {
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(157, 168, 163, 0.28), rgba(36, 180, 126, 0.42));
  color: var(--app-text);
  font-weight: 600;
}

.header-right {
  justify-content: flex-end;
}

.yt-btn-icon {
  min-height: 44px;
  gap: 8px;
  padding: 0 14px;
}

.yt-btn-primary,
.yt-btn-secondary,
.primary-button,
.secondary-button,
.table-action {
  min-height: 44px;
  padding: 0.78rem 1.08rem;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.yt-btn-primary,
.primary-button,
.table-action-load {
  color: #0c0f11;
  background: linear-gradient(135deg, #c7a54b 0%, #c7a54b 55%, #c7a54b 100%);
  box-shadow: 0 14px 28px rgba(157, 168, 163, 0.22);
}

.yt-btn-secondary,
.secondary-button {
  color: var(--app-text);
  background: linear-gradient(135deg, rgba(36, 180, 126, 0.96), rgba(36, 180, 126, 0.92));
  border-color: var(--app-line);
}

.yt-btn-primary:hover,
.yt-btn-secondary:hover,
.primary-button:hover,
.secondary-button:hover,
.table-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(7, 8, 9, 0.2);
}

.menu-toggle:focus-visible,
.yt-btn-icon:focus-visible,
.yt-btn-primary:focus-visible,
.yt-btn-secondary:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.search-btn:focus-visible,
.module-nav:focus-visible,
.builder-tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: rgba(157, 168, 163, 0.56);
  box-shadow: 0 0 0 4px rgba(157, 168, 163, 0.12);
}

.user-avatar {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #24b47e 0%, #24b47e 100%);
  font-size: 0.8125rem;
  font-weight: 800;
}

.app-shell {
  width: 100%;
  height: 100vh;
  padding: calc(var(--header-height) + 18px) 18px 18px;
}

.yt-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--rightbar-width);
  gap: var(--shell-gap);
  height: calc(100vh - var(--header-height) - 36px);
  margin-top: 0;
}

.yt-sidebar,
.yt-main-content,
.yt-right-panel {
  min-height: 0;
  border: 1px solid rgba(157, 168, 163, 0.12);
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.94) 0%, rgba(7, 8, 9, 0.98) 100%);
  box-shadow: var(--app-shadow-md);
}

.yt-sidebar,
.yt-right-panel {
  overflow-y: auto;
}

.yt-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 16px;
  border-radius: 26px;
}

.sidebar-section {
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  background: rgba(18, 23, 26, 0.74);
}

.sidebar-intro h2 {
  margin: 0 0 6px;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.125rem;
}

.workflow-guide {
  display: none !important;
  gap: 12px;
}

.workflow-step-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  background: rgba(12, 15, 17, 0.9);
  color: var(--app-text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.workflow-step[data-state="complete"] {
  border-color: rgba(80, 209, 154, 0.24);
  background: rgba(36, 180, 126, 0.72);
  color: #50d19a;
}

.workflow-step[data-state="current"] {
  border-color: rgba(89, 168, 232, 0.28);
  background: rgba(89, 168, 232, 0.82);
  color: #59a8e8;
  transform: translateY(-1px);
}

body.sidebar-collapsed .workflow-guide {
  display: none;
}

.sidebar-intro p,
.sidebar-status small,
.workspace-copy p,
.viewer-copy,
.editor-copy,
.panel-header-yt p,
.module-help,
.detail-card p {
  color: var(--app-text-dim);
}

.sidebar-eyebrow,
.workspace-kicker,
.viewer-kicker {
  margin: 0 0 8px;
  color: var(--app-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.module-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.module-nav {
  position: relative;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-text);
}

.module-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(89, 168, 232, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.module-nav:hover::before,
.module-nav.is-active::before {
  opacity: 1;
}

.module-nav:hover,
.module-nav.is-active {
  background: rgba(18, 23, 26, 0.94);
  border-color: rgba(89, 168, 232, 0.18);
}

.module-nav-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(12, 15, 17, 0.96);
  border: 1px solid rgba(157, 168, 163, 0.14);
  color: var(--brand-kraft);
}

.module-nav-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.module-nav-copy strong {
  font-size: 1rem;
}

.module-nav-copy small {
  color: var(--app-text-dim);
  font-size: 0.75rem;
}

.sidebar-status {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

.sidebar-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(18, 23, 26, 0.92));
  border: 1px solid rgba(157, 168, 163, 0.14);
  min-height: 84px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-card span,
.hero-stat-card span,
.detail-card span,
.side-summary-card span,
.viewer-meta span {
  color: var(--app-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-card strong,
.hero-stat-card strong,
.detail-card strong,
.side-summary-card strong,
.viewer-meta strong {
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
}

.sidebar-card small,
.hero-stat-card small {
  line-height: 1.42;
}

.sidebar-card[data-status="success"],
.hero-stat-card[data-status="success"],
.compact-status-item[data-status="success"],
.status-surface[data-status="success"] {
  border-color: rgba(80, 209, 154, 0.22);
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.98), rgba(18, 23, 26, 0.94));
  box-shadow: 0 12px 28px rgba(36, 180, 126, 0.24);
}

.sidebar-card[data-status="warning"],
.hero-stat-card[data-status="warning"],
.compact-status-item[data-status="warning"],
.status-surface[data-status="warning"] {
  border-color: rgba(224, 199, 101, 0.22);
  background: linear-gradient(180deg, rgba(199, 165, 75, 0.98), rgba(18, 23, 26, 0.94));
  box-shadow: 0 12px 28px rgba(199, 165, 75, 0.22);
}

.sidebar-card[data-status="error"],
.hero-stat-card[data-status="error"],
.compact-status-item[data-status="error"],
.status-surface[data-status="error"] {
  border-color: rgba(239, 114, 114, 0.22);
  background: linear-gradient(180deg, rgba(239, 114, 114, 0.98), rgba(18, 23, 26, 0.94));
  box-shadow: 0 12px 28px rgba(239, 114, 114, 0.22);
}

.sidebar-card[data-status="info"],
.hero-stat-card[data-status="info"],
.compact-status-item[data-status="info"],
.status-surface[data-status="info"] {
  border-color: rgba(89, 168, 232, 0.18);
}

.yt-main-content {
  overflow-y: auto;
  padding: 22px;
  border-radius: 30px;
}

.yt-main-content > * + * {
  margin-top: 18px;
}

.workspace-hero,
.viewer-shell,
.editor-shell {
  border-radius: 28px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.97), rgba(7, 8, 9, 0.99)),
    radial-gradient(circle at top right, rgba(157, 168, 163, 0.08), transparent 30%);
  box-shadow: var(--app-shadow-lg);
}

.workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
  gap: 18px;
  padding: 24px 26px;
}

.workspace-copy h1,
.viewer-shell-head h2,
.editor-shell-head h2,
.panel-header-yt h3 {
  margin: 0;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
}

.workspace-copy h1 {
  font-size: clamp(1.8rem, 2.3vw, 2.5rem);
}

.workspace-copy p:last-child,
.viewer-copy,
.editor-copy {
  margin: 8px 0 0;
  max-width: 60ch;
  line-height: 1.6;
  color: var(--app-text-dim);
}

.workspace-stats,
.side-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hero-stat-card,
.side-summary-card,
.detail-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background: linear-gradient(180deg, rgba(7, 8, 9, 0.92), rgba(18, 23, 26, 0.84));
}

.hero-stat-card strong {
  font-size: 1rem;
}

.viewer-shell,
.editor-shell {
  padding: 22px;
}

.viewer-shell-head,
.editor-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.viewer-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.viewer-toggle-button {
  min-width: 260px;
  display: inline-grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  padding: 11px 14px;
  border-radius: 16px;
}

.viewer-toggle-button span {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.viewer-toggle-button small {
  color: rgba(244, 247, 245, 0.82);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.viewer-toggle-button[data-mode="simulated"] {
  border-color: rgba(199, 165, 75, 0.34);
  background: rgba(199, 165, 75, 0.56);
}

.viewer-toggle-button[data-mode="original"] {
  border-color: rgba(80, 209, 154, 0.32);
  background: rgba(36, 180, 126, 0.56);
}

.viewer-meta {
  display: grid;
  gap: 4px;
  min-width: 170px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background: rgba(12, 15, 17, 0.9);
}

.zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  background: rgba(7, 8, 9, 0.88);
}

.zoom-btn {
  width: 40px;
  height: 40px;
  padding: 0;
}

.zoom-btn.is-active {
  background: rgba(89, 168, 232, 0.14);
  border-color: rgba(89, 168, 232, 0.34);
  color: #59a8e8;
}

.zoom-btn-fit {
  width: auto;
  padding: 0 14px;
  font-weight: 700;
}

.zoom-value {
  min-width: 58px;
  text-align: center;
  color: var(--app-text-dim);
  font-weight: 700;
}

.validation-monitor {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background: rgba(12, 15, 17, 0.84);
  color: var(--app-text);
  font-size: 0.875rem;
}

.viewer-stage {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  background:
    radial-gradient(circle at top, rgba(89, 168, 232, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.98), rgba(12, 15, 17, 0.98));
}

.sheet-viewport {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  min-height: 520px;
  border-radius: 18px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(13, 17, 21, 0.95), rgba(6, 9, 13, 0.98)),
    radial-gradient(circle at center, rgba(96, 214, 255, 0.08), transparent 35%);
  box-shadow: inset 0 0 0 1px rgba(131, 162, 196, 0.12);
}

.sheet-stage {
  --sheet-scale: 0.72;
  width: calc(var(--sheet-base-width) * var(--sheet-scale));
  height: calc(var(--sheet-base-height) * var(--sheet-scale));
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.sheet-stage .final-sheet {
  transform: scale(var(--sheet-scale));
  transform-origin: top center;
}

.final-sheet {
  width: var(--sheet-base-width) !important;
  min-width: var(--sheet-base-width) !important;
  margin: 0 !important;
  aspect-ratio: 2376 / 1836;
  border-radius: 18px;
  background: #f4f7f5;
  transform: none;
  box-shadow: 0 38px 90px rgba(7, 8, 9, 0.56);
}

.template-sheet {
  overflow: hidden;
}

.template-sheet.sheet-type-bolsa-fondo-v .template-canvas,
.template-sheet.sheet-type-etiqueta-caja .template-canvas,
.alternate-sheet[hidden] {
  display: none !important;
}

.alternate-sheet {
  width: 100%;
  height: 100%;
  padding: 54px 62px;
  color: #0c0f11;
  background: #f4f7f5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.35;
}

.alternate-sheet-food,
.alternate-sheet-label {
  display: grid;
  gap: 20px;
  grid-template-rows: auto auto auto auto 1fr auto;
}

.alternate-sheet-food {
  display: block;
  padding: 0;
}

.food-svg-template-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4f7f5;
}

.food-svg-template-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.food-svg-field {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 1.75%;
  padding: 0 0.18%;
  overflow: hidden;
  color: #0c0f11;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  font-weight: 800;
  font-stretch: condensed;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.food-svg-vigencia {
  left: 91.74%;
  top: 3.78%;
  width: 6.22%;
}

.food-svg-version {
  left: 91.74%;
  top: 5.98%;
  width: 6.22%;
}

.food-svg-date-grid {
  left: 2.44%;
  top: 8.98%;
  width: 8.08%;
  display: grid;
  grid-template-columns: 0.82fr 0.82fr 1.08fr;
  gap: 0;
  padding: 0 0.24%;
}

.food-svg-date-grid strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  font-weight: 800;
  font-stretch: condensed;
  line-height: 1;
  text-align: center;
}

.food-svg-cliente {
  left: 10.52%;
  top: 9.55%;
  width: 44.3%;
  justify-content: flex-start;
  padding-left: 0.72%;
  text-align: left;
}

.food-svg-referencia {
  left: 54.82%;
  top: 9.55%;
  width: 43.12%;
  justify-content: flex-start;
  padding-left: 0.72%;
  text-align: left;
}

.food-svg-material {
  left: 2.44%;
  top: 15.82%;
  width: 39.45%;
}

.food-svg-gramaje {
  left: 41.89%;
  top: 15.82%;
  width: 6.56%;
}

.food-svg-barcode {
  left: 73.46%;
  top: 15.82%;
  width: 15.96%;
}

.food-svg-check {
  height: 1.38%;
  padding: 0;
  font-size: 10px;
  line-height: 1;
}

.food-svg-color-ref {
  top: 22.30%;
  width: 1.85%;
  height: 2.45%;
  font-size: 11px;
}

.food-svg-color-ref-1 {
  left: 9.72%;
}

.food-svg-color-ref-2 {
  left: 20.34%;
}

.food-svg-color-ref-3 {
  left: 32.08%;
}

.food-svg-color-ref-4 {
  left: 41.89%;
}

.food-svg-packaging-v {
  left: 50.2%;
  top: 15.66%;
  width: 1.09%;
}

.food-svg-packaging-square {
  left: 58.08%;
  top: 15.66%;
  width: 1.09%;
}

.food-svg-packaging-sheet {
  left: 67.15%;
  top: 15.66%;
  width: 1.09%;
}

.food-svg-fsc-si {
  left: 90.06%;
  top: 15.66%;
  width: 1.43%;
}

.food-svg-fsc-no {
  left: 94.62%;
  top: 15.66%;
  width: 1.43%;
}

.food-svg-ancho-material {
  left: 25.55%;
  top: 29.42%;
  width: 26.85%;
}

.food-svg-alto-total {
  left: 17.85%;
  top: 49.4%;
  width: 9.4%;
  transform: rotate(-90deg);
  transform-origin: center;
}

.food-svg-alto-util {
  left: 21.95%;
  top: 49.4%;
  width: 9.4%;
  transform: rotate(-90deg);
  transform-origin: center;
}

.food-svg-fuelle-fondo {
  left: 24.7%;
  top: 72.9%;
  width: 13.8%;
  text-align: center;
}

.food-svg-ancho-material,
.food-svg-alto-total,
.food-svg-alto-util,
.food-svg-fuelle-fondo {
  display: none;
}

.food-svg-plan-name {
  left: 2.44%;
  top: 77.05%;
  width: 27.6%;
  text-align: center;
}

.food-svg-production {
  left: 3.00%;
  top: 76.68%;
  width: 26.55%;
  height: 1.78%;
  padding: 0 0.35rem;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  font-weight: 800;
  font-stretch: condensed;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.015em;
}

.food-svg-color-list {
  position: absolute;
  z-index: 3;
  left: 2.44%;
  top: 19.28%;
  display: block;
  width: 95.52%;
  height: 2.13%;
  pointer-events: none;
}

.food-svg-color-list .alternate-color-chip {
  position: absolute;
  top: 0;
  display: block;
  min-height: 0;
  width: 12.5%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0c0f11;
  font-family: var(--template-font-family);
  font-size: var(--template-font-size);
  font-weight: 800;
  font-stretch: condensed;
  line-height: 1;
  text-transform: uppercase;
}

.food-svg-color-list .alternate-color-chip:nth-child(1) { left: 0; }
.food-svg-color-list .alternate-color-chip:nth-child(2) { left: 12.5%; }
.food-svg-color-list .alternate-color-chip:nth-child(3) { left: 25%; }
.food-svg-color-list .alternate-color-chip:nth-child(4) { left: 37.5%; }
.food-svg-color-list .alternate-color-chip:nth-child(5) { left: 50%; }
.food-svg-color-list .alternate-color-chip:nth-child(6) { left: 62.5%; }
.food-svg-color-list .alternate-color-chip:nth-child(7) { left: 75%; }
.food-svg-color-list .alternate-color-chip:nth-child(8) { left: 87.5%; }

.food-svg-color-list .alternate-color-chip span {
  position: absolute;
  left: 22.2%;
  right: 3.75%;
  top: 50%;
  height: 62%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 0.04rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-svg-color-list .alternate-color-chip i {
  position: absolute;
  left: 11.4%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15.03%;
  height: 100%;
  border: 1px solid #12171a;
}

.food-svg-color-list .alternate-color-chip i[data-unknown-color="true"],
.alternate-color-chip i[data-unknown-color="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f7f5 !important;
  color: #0c0f11;
  font-family: var(--template-font-family);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.food-svg-plan-area {
  position: absolute;
  z-index: 1;
  left: 1.72%;
  top: 24.25%;
  width: 66.7%;
  height: 56.4%;
  overflow: visible;
  background: transparent;
}

.food-svg-plan-area #food-preview-plan-canvas,
.food-svg-plan-area #food-preview-plan-image {
  position: absolute;
  display: none;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.food-svg-plan-area #food-preview-plan-image {
  left: 11%;
  top: 12%;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.food-svg-plan-area #food-preview-plan-canvas {
  left: 50%;
  top: 50%;
  max-width: 78%;
  max-height: 78%;
  transform: translate(-50%, -50%);
}

.food-svg-plan-area.show-canvas #food-preview-plan-canvas,
.food-svg-plan-area.show-image #food-preview-plan-image {
  display: block;
}

.food-svg-plan-area.has-asset .food-plan-placeholder {
  display: none;
}

.food-plan-placeholder {
  position: absolute;
  inset: 8%;
  z-index: 4;
  border-radius: 8px;
  background: rgba(244, 247, 245, 0.72);
}

.food-svg-plan-area .plan-loading-overlay {
  inset: 10%;
}

.food-svg-observaciones {
  left: 67.62%;
  top: 81.35%;
  width: 29.9%;
  height: 7.15%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.18;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.food-svg-designer {
  left: 76.7%;
  top: 92.95%;
  width: 9.3%;
  font-size: 8px;
}

.food-svg-designer-signature {
  position: absolute;
  left: 76.7%;
  top: 92.35%;
  z-index: 4;
  width: 9.3%;
  height: 3.1%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

.food-svg-designer-signature[hidden] {
  display: none;
}

.food-svg-customer-signature {
  left: 86%;
  top: 92.95%;
  width: 11.85%;
  font-size: 8px;
}

.alternate-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 20px;
  align-items: stretch;
  border: 3px solid #0c0f11;
}

.alternate-sheet-head > div,
.alternate-sheet-head aside {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px 18px;
}

.alternate-sheet-head > div {
  border-right: 3px solid #0c0f11;
}

.alternate-sheet-head strong {
  font-size: 26px;
  line-height: 1.3;
  text-transform: uppercase;
}

.alternate-sheet-head span,
.alternate-meta-grid span,
.alternate-data-grid span,
.alternate-plan-box span,
.alternate-preview-box span,
.alternate-signature-grid span,
.label-art-preview span {
  color: #2a3338;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.alternate-meta-grid,
.alternate-data-grid,
.alternate-body-grid,
.alternate-signature-grid,
.label-layout-grid {
  display: grid;
  gap: 12px;
}

.alternate-meta-grid {
  grid-template-columns: 1.1fr 1.4fr 0.72fr 0.9fr;
}

.alternate-sheet-label .alternate-meta-grid {
  grid-template-columns: 1.1fr 1.5fr 0.8fr;
}

.alternate-meta-grid article,
.alternate-data-grid article,
.alternate-plan-box,
.alternate-preview-box,
.alternate-signature-grid article,
.label-art-preview,
.label-detail-panel,
.alternate-important-note {
  display: grid;
  gap: 8px;
  min-height: 76px;
  padding: 13px 15px;
  border: 2px solid #0c0f11;
  background: #f4f7f5;
}

.alternate-meta-grid strong,
.alternate-data-grid strong,
.alternate-plan-box strong,
.alternate-preview-box strong,
.alternate-signature-grid strong {
  font-size: 18px;
  line-height: 1.3;
}

.alternate-section {
  display: grid;
  gap: 12px;
}

.alternate-section h3 {
  margin: 0;
  padding: 9px 12px;
  color: #f4f7f5;
  background: #0c0f11;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

.alternate-data-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alternate-body-grid,
.label-layout-grid {
  grid-template-columns: 1.15fr 0.85fr;
}

.alternate-plan-box,
.alternate-preview-box,
.label-art-preview {
  min-height: 210px;
  align-content: center;
}

.alternate-plan-box p,
.alternate-preview-box p,
.alternate-observations p,
.alternate-important-note p {
  margin: 0;
  color: #12171a;
  font-size: 16px;
  line-height: 1.45;
}

.alternate-color-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.alternate-color-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid #0c0f11;
  font-weight: 800;
}

.alternate-color-chip i {
  width: 28px;
  height: 28px;
  border: 1px solid #0c0f11;
  background: var(--chip-color, #f4f7f5);
}

.alternate-observations {
  min-height: 100px;
}

.alternate-signature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alternate-signature-grid article {
  align-content: end;
  min-height: 96px;
  border-top-width: 4px;
}

.alternate-signature-designer {
  position: relative;
}

.alternate-signature-designer.has-image {
  justify-items: center;
}

.alternate-signature-designer.has-image strong {
  display: none;
}

.alternate-signature-image {
  display: block;
  justify-self: center;
  width: min(150px, 100%);
  height: 44px;
  object-fit: contain;
  object-position: center center;
}

.alternate-signature-image[hidden] {
  display: none;
}

.label-template-sheet {
  display: block;
  padding: 0;
  background: #f4f7f5;
}

.label-template-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4f7f5;
}

.label-template-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.label-template-field {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7%;
  margin: 0;
  padding: 0 0.2%;
  overflow: hidden;
  color: #0c0f11;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  font-stretch: normal;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-template-vigencia {
  display: none;
}

.label-template-version {
  display: none;
}

.label-template-cliente {
  left: 15.75%;
  top: 10.95%;
  width: 36.55%;
  height: 2.85%;
  font-size: 12px;
  justify-content: flex-start;
  text-align: left;
}

.label-template-referencia {
  left: 53.45%;
  top: 10.95%;
  width: 43%;
  height: 2.85%;
  font-size: 11.5px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.05;
}

.label-template-date-day,
.label-template-date-month,
.label-template-date-year {
  top: 10.95%;
  height: 2.85%;
  color: #0c0f11;
  font-size: 11.5px;
}

.label-template-date-day {
  left: 3.85%;
  width: 1.95%;
}

.label-template-date-month {
  left: 6.45%;
  width: 2.05%;
}

.label-template-date-year {
  left: 9.05%;
  width: 4.25%;
}

.label-template-main-text {
  display: block;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  white-space: normal;
}

.label-template-secondary-text {
  margin: 18px 0 0;
  font-size: 31px;
  font-weight: 500;
  line-height: 1;
}

.label-template-size {
  display: block;
  margin-top: 31px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.label-template-material {
  left: 3.55%;
  top: 17.45%;
  width: 10.95%;
  height: 3.1%;
  font-size: 10.5px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.label-template-cantidad {
  display: block;
  margin-top: 32px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.label-template-ancho {
  z-index: 6;
  left: 41.4%;
  top: 24.25%;
  width: 18.6%;
  overflow: visible;
  font-size: 13px;
  text-overflow: clip;
}

.label-template-alto {
  z-index: 6;
  left: 11.55%;
  top: 56.8%;
  width: 14.2%;
  overflow: visible;
  font-size: 13px;
  text-overflow: clip;
}

.label-template-observaciones {
  left: 14.65%;
  top: 17.15%;
  width: 81.8%;
  height: 3.65%;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.18;
  text-align: left;
  white-space: normal;
}

.label-template-art {
  position: absolute;
  left: 26.65%;
  top: 32.05%;
  z-index: 3;
  width: 48.6%;
  height: 50.5%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #f4f7f5;
  color: #070809;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  text-transform: uppercase;
  pointer-events: auto;
}

.label-template-art::before {
  content: "";
  position: absolute;
  left: var(--label-art-inner-left, 0%);
  top: var(--label-art-inner-top, 0%);
  width: var(--label-art-inner-width, 100%);
  height: var(--label-art-inner-height, 100%);
  z-index: 0;
  border: 2px solid #0c0f11;
  box-sizing: border-box;
  pointer-events: none;
}

.label-template-art-lines {
  position: absolute;
  left: var(--label-art-inner-left, 0%);
  top: var(--label-art-inner-top, 0%);
  z-index: 1;
  width: var(--label-art-inner-width, 100%);
  height: var(--label-art-inner-height, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6% 5%;
  box-sizing: border-box;
}

.label-template-source-image {
  position: absolute;
  left: var(--label-art-inner-left, 0%);
  top: var(--label-art-inner-top, 0%);
  z-index: 1;
  width: var(--label-art-inner-width, 100%);
  height: var(--label-art-inner-height, 100%);
  object-fit: contain;
  object-position: center;
}

.label-template-source-image[hidden] {
  display: none;
}

.label-template-origin {
  display: block;
  margin-top: 42px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

.label-template-source-badge {
  position: absolute;
  right: 5%;
  bottom: 5%;
  max-width: 90%;
  padding: 4px 8px;
  border: 1px solid #2a3338;
  background: rgba(244, 247, 245, 0.88);
  color: #0c0f11;
  font-size: 8px;
  font-weight: 700;
  text-transform: none;
}

.label-builder-module {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--yt-border);
  border-radius: 12px;
  background: rgba(244, 247, 245, 0.03);
}

.label-builder-module .block-head {
  margin: 0;
}

.label-size-grid {
  align-items: end;
}

.label-editor-toolbar,
.label-editor-template-tools,
.label-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.label-rich-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px;
  border: 1px solid rgba(244, 247, 245, 0.12);
  border-radius: 9px;
  background: rgba(244, 247, 245, 0.045);
}

.label-rich-tool {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #e0c765;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.label-rich-tool:hover,
.label-rich-tool.is-active {
  border-color: rgba(199, 165, 75, 0.45);
  background: rgba(199, 165, 75, 0.16);
  color: #e0c765;
}

.label-rich-tool {
  min-width: 30px;
  justify-content: center;
}

.label-rich-divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: rgba(244, 247, 245, 0.13);
}

.label-direct-editor-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(224, 199, 101, 0.16);
  border-radius: 12px;
  background: rgba(157, 168, 163, 0.05);
}

.label-text-compose {
  gap: 6px;
}

.label-text-compose textarea {
  min-height: 82px;
  line-height: 1.3;
  resize: vertical;
}

.label-direct-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 72px 62px;
  gap: 8px;
  align-items: end;
}

.label-direct-controls input[type="color"] {
  min-height: 38px;
  padding: 6px;
}

.label-direct-controls label:nth-child(4),
.label-direct-controls label:nth-child(5) {
  grid-column: span 1;
}

.label-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(244, 247, 245, 0.16);
  border-radius: 9px;
  background: rgba(244, 247, 245, 0.055);
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.3;
  box-shadow: none;
  cursor: pointer;
}

.label-tool-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(199, 165, 75, 0.38);
  background: rgba(244, 247, 245, 0.085);
}

.label-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.label-tool-button.is-primary {
  border-color: rgba(80, 209, 154, 0.66);
  background: linear-gradient(180deg, #24b47e 0%, #24b47e 100%);
  color: #f4f7f5;
}

.label-tool-button.is-gold {
  border-color: rgba(224, 199, 101, 0.72);
  background: linear-gradient(180deg, #e0c765 0%, #c7a54b 100%);
  color: #c7a54b;
}

.label-tool-button.is-danger {
  border-color: rgba(239, 114, 114, 0.28);
  color: #ef7272;
}

.label-editor-template-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.label-editor-object-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.label-editor-object-actions .label-tool-button:nth-child(3) {
  grid-column: 1 / -1;
}

.label-editor-actions .label-tool-button {
  width: 100%;
}

.label-editor-object {
  position: absolute;
  min-width: 24px;
  min-height: 18px;
  padding: 2px 4px;
  color: var(--label-object-color, #0c0f11);
  font-family: var(--label-object-font, Arial, Helvetica, sans-serif);
  font-size: calc(var(--label-object-size, 24) * 1px);
  font-weight: var(--label-object-weight, 600);
  font-style: var(--label-object-style, normal);
  line-height: 1.3;
  text-align: var(--label-object-align, center);
  white-space: pre-wrap;
  cursor: move;
  user-select: none;
}

.label-editor-object.is-selected {
  outline: 1px solid #59a8e8;
  outline-offset: 2px;
}

.label-template-editor-layer {
  position: absolute;
  left: var(--label-art-inner-left, 0%);
  top: var(--label-art-inner-top, 0%);
  width: var(--label-art-inner-width, 100%);
  height: var(--label-art-inner-height, 100%);
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
}

.label-template-editor-object {
  position: absolute;
  min-width: 24px;
  min-height: 16px;
  padding: 1px 3px;
  width: var(--label-object-width, auto);
  height: var(--label-object-height, auto);
  box-sizing: border-box;
  color: var(--label-object-color, #0c0f11);
  font-family: var(--label-object-font, Arial, Helvetica, sans-serif);
  font-size: calc(var(--label-object-size, 24) * 1px);
  font-weight: var(--label-object-weight, 600);
  font-style: var(--label-object-style, normal);
  line-height: 1.05;
  text-align: var(--label-object-align, center);
  white-space: pre-wrap;
  text-transform: none;
  cursor: move;
  outline: 1px solid transparent;
  outline-offset: 2px;
  user-select: none;
}

.label-template-editor-object.is-rect {
  padding: 0;
  border: 2px solid var(--label-object-color, #0c0f11);
  background: transparent;
}

.label-template-editor-object.is-selected {
  outline-color: #59a8e8;
}

.label-template-editor-object.is-editing {
  cursor: text;
  outline-color: var(--brand-gold);
  user-select: text;
}

.label-template-editor-object[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

.label-object-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #f4f7f5;
  border-radius: 3px;
  background: #59a8e8;
  box-shadow: 0 1px 4px rgba(7, 8, 9, 0.35);
  cursor: nwse-resize;
  pointer-events: auto;
}

.file-drop-inline {
  gap: 8px;
}

.file-drop-inline input[type="file"] {
  min-height: auto;
  padding: 10px;
}

.file-drop-inline small {
  color: var(--yt-text-dim);
  font-size: 12px;
}

.label-template-designer {
  left: 71.65%;
  top: 91.85%;
  width: 10.85%;
  font-size: 7px;
}

.label-template-designer-signature {
  position: absolute;
  left: 71.65%;
  top: 91.0%;
  z-index: 4;
  width: 10.85%;
  height: 4.55%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

.label-template-designer-signature[hidden] {
  display: none;
}

.label-template-customer-signature {
  left: 82.5%;
  top: 91.85%;
  width: 13.95%;
  font-size: 7px;
}

.label-art-box {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 22px;
  border: 3px dashed #0c0f11;
  text-align: center;
}

.label-art-box strong {
  font-size: 26px;
  line-height: 1.3;
  text-transform: uppercase;
}

.label-art-box p {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
}

.label-art-preview small {
  color: #0c0f11;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.editor-shell-head {
  margin-bottom: 16px;
}

.builder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

.builder-tab {
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 999px;
  color: var(--app-text-dim);
  background: rgba(12, 15, 17, 0.88);
}

.builder-tab.is-active {
  color: #59a8e8;
  border-color: transparent;
  background: linear-gradient(135deg, #59a8e8 0%, #59a8e8 48%, #59a8e8 100%);
  box-shadow: 0 12px 26px rgba(89, 168, 232, 0.24);
}

.template-library-shell {
  display: grid;
  gap: 18px;
}

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

.template-library-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  border-radius: 8px;
  color: var(--app-text);
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.98)),
    radial-gradient(circle at top right, rgba(224, 199, 101, 0.08), transparent 34%);
  text-align: left;
  box-shadow: none;
}

.template-library-card:hover,
.template-library-card:focus-visible,
.template-library-card.is-active {
  border-color: rgba(224, 199, 101, 0.42);
  box-shadow: 0 18px 40px rgba(7, 8, 9, 0.24);
}

.template-library-card.is-active {
  background:
    linear-gradient(180deg, rgba(27, 35, 39, 0.98), rgba(12, 15, 17, 0.98)),
    radial-gradient(circle at top right, rgba(224, 199, 101, 0.16), transparent 36%);
}

.template-library-card strong {
  font-size: 1.125rem;
  line-height: 1.3;
}

.template-library-card small {
  color: var(--app-text-dim);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

.template-library-card em,
.template-library-badge {
  width: fit-content;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.template-library-badge {
  padding: 6px 10px;
  color: #0c0f11;
  background: #e0c765;
}

.template-library-card em {
  margin-top: auto;
  padding: 7px 10px;
  color: #e0c765;
  border: 1px solid rgba(224, 199, 101, 0.22);
  background: rgba(224, 199, 101, 0.08);
}

@media (max-width: 1080px) {
  .template-library-grid,
  .sheet-type-selector {
    grid-template-columns: 1fr;
  }
}

.sheet-type-block {
  margin-bottom: 16px;
}

.sheet-type-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.sheet-type-selector .segmented-option {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-height: 84px;
  padding: 15px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  border-radius: 18px;
  color: var(--app-text);
  background: rgba(7, 8, 9, 0.82);
  text-align: left;
}

.sheet-type-selector .segmented-option strong {
  font-size: 1rem;
}

.sheet-type-selector .segmented-option small {
  color: var(--app-text-dim);
  font-size: 0.75rem;
}

.sheet-type-selector .segmented-option.is-active {
  color: #59a8e8;
  border-color: transparent;
  background: linear-gradient(135deg, #e0c765, #c7a54b);
}

.sheet-type-selector .segmented-option.is-active small {
  color: rgba(89, 168, 232, 0.78);
}

.sheet-type-extra {
  display: grid;
  gap: 14px;
  margin-top: 6px;
  padding: 16px;
  border: 1px solid rgba(224, 199, 101, 0.18);
  border-radius: 18px;
  background: rgba(224, 199, 101, 0.06);
}

.sheet-type-extra[hidden] {
  display: none !important;
}

[data-sheet-scope][hidden] {
  display: none !important;
}

.block-head-compact {
  margin-bottom: 0;
}

.editor-panels {
  display: grid;
}

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

.editor-grid-wide {
  grid-template-columns: 1.15fr 0.85fr;
}

.form-grid,
.form-stack {
  display: grid;
  gap: 16px;
}

.form-block {
  margin-bottom: 0;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.94), rgba(7, 8, 9, 0.98)),
    radial-gradient(circle at top right, rgba(89, 168, 232, 0.06), transparent 32%);
}

.block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.form-block h3 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--app-text);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
}

.form-block label {
  display: block;
}

label span {
  margin-bottom: 8px;
  color: var(--app-text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
}

.form-block input,
.form-block select,
.form-block textarea,
.inventory-toolbar input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  background: rgba(7, 8, 9, 0.88);
  color: var(--app-text);
  padding: 0.92rem 1rem;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.02);
}

.form-block input::placeholder,
.form-block textarea::placeholder,
.inventory-toolbar input::placeholder {
  color: var(--app-text-muted);
}

.form-block input:focus,
.form-block select:focus,
.form-block textarea:focus,
.inventory-toolbar input:focus {
  border-color: rgba(89, 168, 232, 0.45);
  box-shadow: 0 0 0 4px rgba(89, 168, 232, 0.08);
  outline: none;
}

.form-block input[readonly] {
  color: #cad4cf;
  background: rgba(12, 15, 17, 0.7);
}

.form-block textarea {
  min-height: 130px;
  resize: vertical;
}

.approval-toggle {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(224, 199, 101, 0.24);
  border-radius: 14px;
  background: rgba(224, 199, 101, 0.08);
}

.form-block .approval-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--yt-accent);
  box-shadow: none;
}

.approval-toggle span {
  margin: 0;
  color: var(--app-text);
  line-height: 1.3;
}

.approval-toggle small {
  display: block;
  margin-top: 4px;
  color: var(--app-text-dim);
  font-size: 0.75rem;
  font-weight: 500;
}

.upload-grid,
.detail-grid,
.dual-grid,
.triple-grid,
.toolbar-grid,
.client-module-grid,
.config-module-grid {
  display: grid;
  gap: 16px;
}

.upload-grid-2,
.detail-grid,
.toolbar-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.triple-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.american-measure-grid {
  display: grid !important;
  grid-template-columns: auto minmax(62px, 76px) minmax(62px, 76px) minmax(62px, 76px) !important;
  gap: 6px;
  align-items: end;
  justify-content: start;
}

.american-measure-grid label span,
.american-toggle-field > span {
  margin-bottom: 5px;
  font-size: 0.6875rem;
  line-height: 1.3;
}

.american-toggle-field {
  display: grid;
  gap: 5px;
  align-self: end;
}

.american-toggle {
  position: relative;
  width: 56px;
  height: 30px;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(157, 168, 163, 0.24);
  border-radius: 999px;
  background: #1b2327;
  box-shadow: inset 0 0 0 1px rgba(157, 168, 163, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.american-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #cad4cf;
  box-shadow: 0 2px 8px rgba(7, 8, 9, 0.36);
  pointer-events: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.american-toggle.is-on,
.american-toggle:has(.segmented-option[data-segment-value="Si"].is-active) {
  border-color: rgba(36, 180, 126, 0.55);
  background: rgba(36, 180, 126, 0.72);
}

.american-toggle.is-on::before,
.american-toggle:has(.segmented-option[data-segment-value="Si"].is-active)::before {
  transform: translateX(26px);
  background: #24b47e;
  box-shadow: 0 2px 10px rgba(36, 180, 126, 0.32);
}

.american-toggle .segmented-option {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 24px;
  width: 25px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 1.3;
  box-shadow: none;
}

.form-block .american-measure-grid input {
  min-height: 38px;
  padding: 0.55rem 0.45rem;
  border-radius: 10px;
  text-align: center;
}

.upload-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  border: 1px dashed rgba(157, 168, 163, 0.26);
  background:
    linear-gradient(180deg, rgba(7, 8, 9, 0.92), rgba(12, 15, 17, 0.82)),
    radial-gradient(circle at top right, rgba(89, 168, 232, 0.08), transparent 40%);
  color: var(--app-text);
}

.upload-card small {
  color: var(--app-text-dim);
  line-height: 1.5;
}

.upload-card input[type="file"] {
  padding: 0.76rem;
}

.detail-grid {
  align-items: stretch;
}

.detail-card {
  margin-top: 0;
}

.toolbar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.toolbar-grid > * {
  width: 100%;
}

.table-action-delete {
  color: #ef7272;
  background: rgba(239, 114, 114, 0.84);
  border-color: rgba(239, 114, 114, 0.18);
}

.table-action-delete:hover {
  background: rgba(239, 114, 114, 0.96);
}

.client-module-grid,
.config-module-grid {
  grid-template-columns: minmax(300px, 0.72fr) minmax(620px, 1.28fr);
}


@media (max-width: 980px) {

}

.inventory-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.inventory-toolbar > * {
  min-width: 0;
}

.inventory-toolbar input {
  flex: 1;
}

.inventory-toolbar-meta p {
  margin: 0;
  color: var(--app-text-dim);
  white-space: nowrap;
}

.inventory-table-wrap {
  border-radius: 20px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  overflow: auto;
  background: rgba(7, 8, 9, 0.88);
}

.inventory-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.inventory-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 16px;
  text-align: left;
  font-size: 0.75rem;
  color: var(--app-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(12, 15, 17, 0.98);
  border-bottom: 1px solid rgba(157, 168, 163, 0.12);
}

.inventory-table td {
  padding: 14px 16px;
  border-top: 1px solid rgba(157, 168, 163, 0.08);
  color: #f4f7f5;
}

.inventory-index {
  width: 48px;
  color: var(--app-text-dim);
}

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

.inventory-table tbody tr {
  transition: background 0.18s ease;
}

.inventory-table tbody tr:hover {
  background: rgba(89, 168, 232, 0.04);
}

.inventory-table tbody tr.is-active {
  background: rgba(89, 168, 232, 0.08);
}

.inventory-empty {
  text-align: center;
  color: var(--app-text-dim);
  padding: 28px !important;
}

#client-record-meta {
  margin-top: 14px;
  color: var(--app-text-dim);
}

.yt-right-panel {
  padding: 22px 18px;
  border-radius: 26px;
}

.panel-header-yt {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.panel-header-yt h3 {
  font-size: 1.125rem;
}

.side-summary-grid {
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}

.side-summary-card strong {
  font-size: 1rem;
}

.suggestions-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.suggestion-card {
  width: 100%;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.98)),
    radial-gradient(circle at top right, rgba(89, 168, 232, 0.06), transparent 40%);
  cursor: pointer;
}

.suggestion-card:hover {
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)),
    radial-gradient(circle at top right, rgba(89, 168, 232, 0.08), transparent 40%);
  border-color: rgba(89, 168, 232, 0.2);
}

.suggestion-thumb {
  position: relative;
  width: 100%;
  height: 88px;
  border-radius: 14px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background:
    linear-gradient(145deg, rgba(89, 168, 232, 0.94), rgba(7, 8, 9, 0.98)),
    radial-gradient(circle at top, rgba(89, 168, 232, 0.16), transparent 60%);
  color: #59a8e8;
}

.suggestion-thumb::after {
  content: "FT";
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(7, 8, 9, 0.42);
  color: #59a8e8;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.suggestion-info {
  display: grid;
  gap: 4px;
  align-content: start;
}

.suggestion-title {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 700;
}

.suggestion-meta {
  color: var(--app-text-dim);
  font-size: 0.75rem;
}

.suggestion-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(89, 168, 232, 0.12);
  color: var(--app-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[hidden] {
  display: none !important;
}

.module-panel[hidden],
.builder-panel[hidden] {
  display: none !important;
}

.yt-sidebar::-webkit-scrollbar,
.yt-main-content::-webkit-scrollbar,
.yt-right-panel::-webkit-scrollbar,
.sheet-viewport::-webkit-scrollbar,
.inventory-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.yt-sidebar::-webkit-scrollbar-thumb,
.yt-main-content::-webkit-scrollbar-thumb,
.yt-right-panel::-webkit-scrollbar-thumb,
.sheet-viewport::-webkit-scrollbar-thumb,
.inventory-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(102, 129, 156, 0.44);
}

body.sidebar-collapsed .yt-layout {
  grid-template-columns: 92px minmax(0, 1fr) var(--rightbar-width);
}

body.sidebar-collapsed .sidebar-intro,
body.sidebar-collapsed .sidebar-status {
  display: none;
}

body.sidebar-collapsed .yt-sidebar {
  padding-inline: 10px;
}

body.sidebar-collapsed .module-nav {
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .module-nav-copy {
  display: none;
}

@media (max-width: 1600px) {
  .yt-layout {
    grid-template-columns: 220px minmax(0, 1fr) 320px;
  }

  .workspace-hero {
    grid-template-columns: 1fr;
  }

  .workspace-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1320px) {
  .app-shell {
    padding-inline: 14px;
  }

  .yt-layout {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .yt-right-panel {
    display: none;
  }

  .yt-sidebar {
    padding-inline: 10px;
  }

  .sidebar-intro,
  .sidebar-status,
  .module-nav-copy {
    display: none;
  }

  .module-nav {
    justify-content: center;
    padding-inline: 0;
  }

  .module-nav-icon {
    margin: 0;
  }

  .editor-grid,
  .editor-grid-wide,
  .client-module-grid,
  .config-module-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .yt-header {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
  }

  .header-left,
  .header-center,
  .header-right {
    width: 100%;
  }

  .header-center {
    order: 3;
    padding: 0;
  }

  .header-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .app-shell {
    padding-top: 142px;
  }

  .yt-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 160px);
  }

  .yt-sidebar {
    overflow: visible;
    border-radius: 22px;
  }

  .module-nav-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .module-nav {
    min-width: 170px;
    justify-content: flex-start;
    padding-inline: 16px;
  }

  .sidebar-intro,
  .sidebar-status,
  .module-nav-copy {
    display: flex;
  }

  .workspace-stats,
  .upload-grid-2,
  .detail-grid,
  .dual-grid,
  .triple-grid,
  .toolbar-grid {
    grid-template-columns: 1fr;
  }

  .american-measure-grid {
    grid-template-columns: auto minmax(42px, 54px) minmax(42px, 54px) minmax(42px, 54px) !important;
  }

  .viewer-shell-head,
  .editor-shell-head {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 148px 10px 10px;
  }

  .yt-main-content {
    padding: 14px;
    border-radius: 24px;
  }

  .workspace-hero,
  .viewer-shell,
  .editor-shell {
    padding: 16px;
    border-radius: 22px;
  }

  .sheet-viewport {
    min-height: 340px;
    padding: 12px;
  }

  .suggestion-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .suggestion-thumb {
    height: 76px;
  }
}

/* YouTube Dark simplified skin */
:root {
  --yt-dark-bg: #070809;
  --yt-dark-surface: #0c0f11;
  --yt-dark-surface-soft: #12171a;
  --yt-dark-line: #1b2327;
  --yt-dark-line-soft: #202a2e;
  --yt-dark-text: #f4f7f5;
  --yt-dark-text-dim: #9da8a3;
}

body.yt-dark {
  background: var(--yt-dark-bg);
  color: var(--yt-dark-text);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
}

body.yt-dark::before {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.yt-header {
  height: 56px;
  padding: 0 16px;
  background: var(--yt-dark-bg);
  border-bottom: 1px solid var(--yt-dark-line-soft);
  box-shadow: none;
  backdrop-filter: none;
}

.header-left,
.header-right {
  width: 240px;
  gap: 12px;
}

.header-center {
  padding: 0 24px;
}

.brand {
  gap: 10px;
}

.brand-logo {
  width: auto;
  height: auto;
  min-width: 28px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  background: #ef7272;
  box-shadow: none;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0;
}

.brand-copy {
  gap: 0;
}

.brand-name {
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--yt-dark-text);
}

.brand-subtitle {
  display: none;
}

.menu-toggle,
.yt-btn-icon,
.zoom-btn,
#reset-form {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--yt-dark-line);
  background: transparent;
  color: var(--yt-dark-text);
  box-shadow: none;
}

.menu-toggle:hover,
.yt-btn-icon:hover,
.zoom-btn:hover,
#reset-form:hover {
  background: var(--yt-dark-surface-soft);
  border-color: var(--yt-dark-line);
  transform: none;
}

#reset-form svg {
  width: 18px;
  height: 18px;
}

#load-sample {
  display: none;
}

#header-save-client-record {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--yt-dark-line);
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--yt-dark-text);
  font-weight: 500;
}

#header-save-client-record:hover {
  background: var(--yt-dark-surface-soft);
  transform: none;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #9da8a3;
  font-size: 0.8125rem;
}

.search-bar {
  width: min(100%, 600px);
  padding: 0 0 0 16px;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid var(--yt-dark-line);
  background: #12171a;
  box-shadow: none;
}

.search-bar svg {
  color: var(--yt-dark-text-dim);
}

.search-bar input {
  height: 40px;
  color: var(--yt-dark-text);
}

.search-bar input::placeholder {
  color: var(--yt-dark-text-dim);
}

.search-btn {
  height: 36px;
  padding: 0 14px;
  border-left: 1px solid var(--yt-dark-line);
  border-radius: 0 6px 6px 0;
  background: #202a2e;
  color: var(--yt-dark-text);
  font-weight: 500;
}

.app-shell {
  padding: 68px 16px 16px;
  background: var(--yt-dark-bg);
}

.yt-layout {
  grid-template-columns: 224px minmax(0, 1fr) 430px;
  gap: 24px;
  height: calc(100vh - 84px);
}

.yt-sidebar,
.yt-main-content,
.yt-right-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.yt-sidebar {
  padding: 0;
}

.sidebar-intro,
.sidebar-status,
.side-summary-grid,
.workspace-stats {
  display: none;
}

.module-nav-list {
  gap: 8px;
  padding-top: 2px;
}

.module-nav {
  gap: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  color: var(--yt-dark-text-dim);
  background: transparent;
}

.module-nav::before {
  display: none;
}

.module-nav:hover {
  background: #12171a;
  color: var(--yt-dark-text);
}

.module-nav.is-active {
  background: #202a2e;
  color: var(--yt-dark-text);
}

.module-nav-icon {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
}

.module-nav-copy strong {
  font-size: 0.875rem;
  font-weight: 500;
}

.module-nav-copy small {
  color: inherit;
  opacity: 0.72;
  font-size: 0.75rem;
}

.yt-main-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  overflow-y: auto;
}

.yt-main-content > * + * {
  margin-top: 0;
}

.viewer-shell {
  order: 1;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.viewer-shell-head {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
}

.viewer-shell-head > div:first-child,
.viewer-meta,
.viewer-copy,
.workspace-kicker,
#active-module-copy,
#active-module-kicker {
  display: none;
}

.viewer-toolbar {
  gap: 8px;
}

.zoom-controls {
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(244, 247, 245, 0.12);
  background: rgba(7, 8, 9, 0.88);
  backdrop-filter: blur(8px);
}

.zoom-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.zoom-btn.is-active {
  background: #202a2e;
  border: 0;
}

.zoom-btn-fit {
  width: auto;
  min-width: 60px;
  padding: 0 10px;
}

.zoom-value {
  color: var(--yt-dark-text-dim);
  font-size: 0.8125rem;
  font-weight: 500;
}

.validation-monitor {
  margin: 0 0 10px;
}

.viewer-stage {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sheet-viewport {
  min-height: 520px;
  padding: 16px;
  border-radius: 16px;
  background: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.sheet-stage {
  --sheet-scale: 0.8;
}

.final-sheet {
  box-shadow: 0 0 0 1px rgba(244, 247, 245, 0.04), 0 16px 36px rgba(7, 8, 9, 0.5);
}

.sheet-viewport {
  display: block;
  overscroll-behavior: contain;
}

.sheet-viewport.can-pan {
  cursor: grab;
}

.sheet-viewport.is-panning {
  cursor: grabbing;
  user-select: none;
}

.sheet-stage {
  margin: 0 auto;
}

.workspace-hero {
  order: 2;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-copy h1 {
  margin: 0;
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  font-weight: 700;
  color: var(--yt-dark-text);
  white-space: nowrap;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.editor-shell {
  order: 3;
  padding: 0 4px 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.editor-shell-head {
  display: none;
}

.editor-ops-strip {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.editor-ops-strip .builder-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  background: rgba(12, 15, 17, 0.92);
}

.editor-ops-strip .builder-jump {
  flex: 1 1 120px;
  min-height: 40px;
}

.editor-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.builder-tabs {
  gap: 6px;
  margin-bottom: 24px;
}

.builder-tab {
  min-height: auto;
  padding: 10px 14px;
  border: 1px solid rgba(157, 168, 163, 0.24);
  border-radius: 999px;
  background: rgba(12, 15, 17, 0.94);
  color: #e0c765;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 700;
}

.builder-tab:hover {
  background: rgba(27, 35, 39, 0.96);
  color: #f4f7f5;
  border-color: rgba(199, 165, 75, 0.38);
}

.builder-tab.is-active {
  background: linear-gradient(135deg, #c7a54b 0%, #c7a54b 100%);
  color: #1b2327;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(157, 168, 163, 0.24);
}

.form-block {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--yt-dark-line-soft);
  background: var(--yt-dark-surface);
  box-shadow: none;
}

.form-block-priority {
  background: #12171a;
}

.form-block-compact {
  background: #12171a;
}

.editor-grid-priority {
  align-items: start;
}

.resource-grid-essential,
.compact-status-grid {
  display: grid;
  gap: 14px;
}

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

.upload-card-essential {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 10px;
  background: #0c0f11;
}

.upload-status {
  display: block;
  color: var(--yt-dark-text);
  font-size: 0.8125rem;
  font-weight: 500;
}

.compact-status-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 10px;
  background: #12171a;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.compact-status-item span {
  color: var(--app-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compact-status-item strong {
  color: var(--yt-dark-text);
  font-size: 1rem;
}

.compact-status-item small {
  color: var(--app-text-dim);
  line-height: 1.45;
}

.form-note {
  padding: 10px 12px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 8px;
  background: #12171a;
  color: var(--yt-dark-text-dim);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.status-surface {
  display: block;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--yt-dark-line-soft);
  background: #12171a;
  color: var(--yt-dark-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.field-stack {
  display: grid;
  gap: 8px;
}

.field-label {
  color: #59a8e8;
  font-size: 0.875rem;
  font-weight: 500;
}

.compact-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(88px, 0.7fr);
  gap: 8px;
  align-items: end;
}

.mini-field {
  display: grid;
  gap: 6px;
}

.mini-field span {
  margin-bottom: 0;
  color: var(--yt-dark-text-dim);
  font-size: 0.75rem;
}

.mini-field input,
.mini-field select {
  min-width: 0;
}

.mini-field-select select {
  text-align: center;
}

.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.segmented-option {
  min-width: 84px;
  padding: 9px 12px;
  border: 1px solid var(--yt-dark-line);
  border-radius: 6px;
  background: #12171a;
  color: var(--yt-dark-text-dim);
  font-size: 0.875rem;
  font-weight: 500;
}

.segmented-option:hover {
  background: #12171a;
  color: var(--yt-dark-text);
}

.segmented-option.is-active {
  border-color: #202a2e;
  background: #202a2e;
  color: var(--yt-dark-text);
}

.optional-group {
  margin-top: 16px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 10px;
  background: #12171a;
  overflow: hidden;
}

.optional-group summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--yt-dark-text);
  font-size: 0.875rem;
  font-weight: 500;
  list-style: none;
}

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

.optional-group summary::after {
  content: "+";
  float: right;
  color: var(--yt-dark-text-dim);
}

.optional-group[open] summary::after {
  content: "-";
}

.optional-group-body {
  padding: 0 14px 14px;
}

.optional-group .form-stack,
.optional-group .upload-grid {
  margin-top: 4px;
}

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

.pantone-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 12px;
  background: rgba(12, 15, 17, 0.92);
}

.pantone-card span {
  margin: 0;
  color: var(--yt-dark-text-dim);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pantone-card input {
  min-height: 42px;
}

.pantone-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.color-picker-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(224, 199, 101, 0.45);
  border-radius: 8px;
  background: rgba(224, 199, 101, 0.14);
  color: var(--yt-dark-text);
  cursor: pointer;
}

.color-picker-button svg {
  display: block;
}

.handle-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.handle-color-row select,
.handle-color-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.handle-color-chip {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(157, 168, 163, 0.45);
  background: #e0c765;
}

.handle-color-chip[hidden] {
  display: none;
}

.qr-verify-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qr-verify-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.qr-open-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(224, 199, 101, 0.45);
  border-radius: 8px;
  background: rgba(224, 199, 101, 0.14);
  color: var(--yt-dark-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.qr-open-button:hover,
.qr-open-button:focus-visible {
  border-color: rgba(224, 199, 101, 0.82);
  background: rgba(224, 199, 101, 0.24);
  outline: 0;
}

.qr-open-button[hidden] {
  display: none;
}

.qr-verify-note {
  display: block;
  margin-top: 4px;
  opacity: 0.72;
  font-size: 0.75rem;
}

/* El QR de la ficha abre su destino, pero solo cuando se pudo leer. */
#preview-qr-image.qr-is-linked {
  cursor: pointer;
}

.color-picker-button:hover,
.color-picker-button:focus-visible {
  border-color: rgba(224, 199, 101, 0.82);
  background: rgba(224, 199, 101, 0.24);
  outline: 0;
}

.readonly-grid input[readonly] {
  opacity: 0.86;
}

.resource-panel .editor-grid {
  grid-template-columns: 1fr;
}

.form-block h3,
.panel-header-yt h3 {
  color: var(--yt-dark-text);
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}

.module-help,
.panel-header-yt p,
.detail-card p {
  color: var(--yt-dark-text-dim);
}

.upload-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.upload-card span {
  font-size: 1rem;
  color: var(--yt-dark-text);
}

.upload-card small {
  color: var(--yt-dark-text-dim);
}

.form-block input,
.form-block select,
.form-block textarea,
.inventory-toolbar input {
  border: 1px solid var(--yt-dark-line);
  border-radius: 10px;
  background: #12171a;
  color: var(--yt-dark-text);
  box-shadow: none;
}

.form-block input::placeholder,
.form-block textarea::placeholder,
.inventory-toolbar input::placeholder {
  color: var(--yt-dark-text-dim);
}

.form-block input:focus,
.form-block select:focus,
.form-block textarea:focus,
.inventory-toolbar input:focus {
  border-color: #202a2e;
  box-shadow: 0 0 0 1px #202a2e;
}

.form-block input[type="file"] {
  padding: 10px;
}

.primary-button,
.secondary-button,
.table-action {
  min-height: auto;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 700;
}

.primary-button,
.table-action-load {
  background: linear-gradient(135deg, #c7a54b 0%, #c7a54b 55%, #c7a54b 100%);
  color: #0c0f11;
}

.secondary-button {
  background: linear-gradient(135deg, #24b47e 0%, #24b47e 100%);
  color: #50d19a;
  border: 1px solid rgba(36, 180, 126, 0.26);
}

.editor-actions-footer {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.resource-panel {
  margin-bottom: 18px;
}

.plan-callout-tool {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 12px;
  background: rgba(244, 247, 245, 0.025);
}

.plan-callout-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.75fr);
  gap: 10px;
}

.plan-callout-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.plan-callout-tool .secondary-button,
.plan-callout-tool .ghost-button {
  min-height: 40px;
  border-radius: 10px;
  justify-content: center;
}

.plan-callout-tool.is-placing {
  border-color: rgba(239, 114, 114, 0.42);
  box-shadow: inset 0 0 0 1px rgba(239, 114, 114, 0.12);
}

.plan-callout-status {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(244, 247, 245, 0.04);
  color: var(--yt-dark-text-dim);
  font-size: 0.75rem;
  line-height: 1.35;
}

.plan-callout-status[data-state="warning"] {
  background: rgba(239, 114, 114, 0.1);
  color: #ef7272;
}

.plan-callout-list {
  display: grid;
  gap: 8px;
}

.plan-callout-list:empty {
  display: none;
}

.plan-callout-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 10px;
  background: rgba(7, 8, 9, 0.18);
}

.plan-callout-item strong {
  overflow: hidden;
  color: var(--yt-dark-text);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-callout-item small {
  color: var(--yt-dark-text-dim);
  font-size: 0.6875rem;
}

.plan-callout-delete {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(239, 114, 114, 0.26);
  border-radius: 9px;
  background: rgba(239, 114, 114, 0.09);
  color: #ef7272;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.plan-callout-delete:hover {
  background: rgba(239, 114, 114, 0.16);
}

.editor-actions-footer .primary-button,
.editor-actions-footer .secondary-button,

.editor-actions-footer .primary-button,

.editor-actions-footer .secondary-button,

.editor-actions-footer .primary-button:hover,
.editor-actions-footer .secondary-button:hover,

.editor-actions-footer .primary-button:focus-visible,
.editor-actions-footer .secondary-button:focus-visible,

.client-module-grid,
.config-module-grid,
.editor-grid,
.editor-grid-wide {
  gap: 18px;
}

.inventory-table-wrap {
  border-radius: 12px;
  border: 1px solid var(--yt-dark-line-soft);
  background: #12171a;
}

.inventory-table thead th {
  background: #0c0f11;
  color: var(--yt-dark-text-dim);
  border-bottom: 1px solid var(--yt-dark-line-soft);
}

.inventory-table td {
  border-top: 1px solid #12171a;
  color: var(--yt-dark-text);
}

.inventory-table tbody tr:hover {
  background: #12171a;
}

.inventory-table tbody tr.is-active {
  background: #12171a;
}

.yt-right-panel {
  padding: 0;
}

.layout-anchor {
  display: none;
}

.panel-header-yt {
  margin-bottom: 18px;
}

.viewer-kicker {
  display: none;
}

.panel-header-yt h3 {
  margin-bottom: 4px;
}

.suggestions-list {
  gap: 14px;
}

.right-panel-builder {
  display: grid;
  gap: 18px;
  margin-top: 0;
}

.yt-right-panel .workspace-hero,
.yt-right-panel .editor-shell {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.yt-right-panel .workspace-copy {
  max-width: 100%;
}

.yt-right-panel .workspace-copy h1 {
  font-size: 1.625rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

.yt-right-panel .builder-tabs {
  margin-bottom: 18px;
}

.yt-right-panel .editor-grid,
.yt-right-panel .editor-grid-wide,
.yt-right-panel .client-module-grid,
.yt-right-panel .config-module-grid,
.yt-right-panel .resource-grid-essential,
.yt-right-panel .compact-status-grid,
.yt-right-panel .upload-grid-2,
.yt-right-panel .detail-grid,
.yt-right-panel .dual-grid,
.yt-right-panel .triple-grid,
.yt-right-panel .toolbar-grid {
  grid-template-columns: 1fr;
}

.yt-right-panel .form-block {
  padding: 16px;
}

.suggestion-card {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.suggestion-card:hover {
  background: transparent;
}

.suggestion-thumb {
  height: 68px;
  border: 0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: #202a2e;
  color: var(--yt-dark-text-dim);
}

.suggestion-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.02);
}

.suggestion-thumb-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(7, 8, 9, 0.88);
  border: 1px solid rgba(157, 168, 163, 0.28);
  color: #e0c765;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.suggestion-thumb::after {
  background: rgba(7, 8, 9, 0.55);
  color: var(--yt-dark-text);
}

.suggestion-title {
  color: var(--yt-dark-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.suggestion-meta {
  color: var(--yt-dark-text-dim);
}

.suggestion-badge {
  background: #202a2e;
  color: var(--yt-dark-text);
}

body.sidebar-collapsed .yt-layout {
  grid-template-columns: 88px minmax(0, 1fr) 430px;
}

body.sidebar-collapsed .yt-sidebar {
  padding-inline: 0;
}

@media (max-width: 1320px) {
  .yt-layout {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .yt-right-panel {
    display: none;
  }

  .module-nav-copy {
    display: none;
  }
}

@media (max-width: 1080px) {
  .yt-header {
    height: auto;
    padding: 12px 14px;
  }

  .app-shell {
    padding-top: 132px;
  }

  .yt-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 148px);
  }

  .yt-sidebar {
    display: block;
  }

  .module-nav-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .module-nav {
    min-width: 170px;
  }

  .module-nav-copy {
    display: flex;
  }

  .resource-grid-essential {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sheet-viewport {
    min-height: 360px;
  }

  .workspace-copy h1 {
    font-size: 1.625rem;
  }
}

/* inventory + drag and drop refinement */
body.module-wide .yt-layout {
  grid-template-columns: 240px minmax(0, 1fr);
}

body.sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 88px minmax(0, 1fr);
}

body.module-wide .yt-right-panel {
  display: none;
}

body.module-wide .yt-main-content {
  padding-right: 24px;
}

.stealth-file-inputs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stealth-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-guide-card {
  min-height: 112px;
  align-content: space-between;
}

.resource-drop-note {
  margin: 14px 0 0;
  color: var(--yt-dark-text-dim);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.template-sheet .drop-target {
  cursor: pointer;
  outline: 1.5px dashed rgba(56, 132, 255, 0.22);
  outline-offset: -6px;
  transition: outline-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.template-sheet .drop-target:hover,
.template-sheet .drop-target.is-drag-active {
  outline-color: rgba(56, 132, 255, 0.48);
  box-shadow: inset 0 0 0 999px rgba(56, 132, 255, 0.05);
}

.template-sheet .plan-surface.is-callout-target {
  cursor: crosshair;
  outline-color: rgba(225, 29, 72, 0.62);
  box-shadow: inset 0 0 0 999px rgba(225, 29, 72, 0.05);
}

.template-sheet .plan-surface.has-asset,
.template-sheet .tpl-preview-imprint.has-asset {
  outline-color: transparent;
}

.template-sheet #preview-plan-object,
.template-sheet #preview-plan-canvas,
.template-sheet #preview-plan-image,
.template-sheet #food-preview-plan-canvas,
.template-sheet #food-preview-plan-image,
.template-sheet #preview-imprint-image,
.template-sheet #preview-qr-image {
  pointer-events: none;
}

.template-sheet .plan-placeholder,
.template-sheet .drop-target-copy {
  z-index: 2;
}

.template-sheet .plan-placeholder,
.template-sheet .drop-target-copy-imprint {
  display: grid;
  place-items: center;
  gap: 0.14rem;
  text-align: center;
}

.template-sheet .drop-target-title {
  font-family: var(--template-font-family);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.64);
  text-transform: uppercase;
}

.template-sheet .drop-target-hint {
  font-size: 0.58rem;
  line-height: 1.3;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
}

.template-sheet .drop-target-subhint {
  font-size: 0.46rem;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.42);
}

.template-sheet .tpl-preview-imprint .drop-target-copy {
  position: absolute;
  inset: 0.18rem;
  padding: 0.5rem;
  border-radius: 0.24rem;
  background: rgba(255, 255, 255, 0.82);
}

.template-sheet .tpl-preview-imprint.has-asset .drop-target-copy {
  display: none;
}

body.exporting-tech-sheet-pdf .template-sheet .tpl-plan-area.drop-target,
body.exporting-tech-sheet-pdf .template-sheet .food-svg-plan-area.drop-target,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-plan-area.drop-target,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .food-svg-plan-area.drop-target,
.template-sheet.is-pdf-capture .tpl-plan-area.drop-target,
.template-sheet.is-pdf-capture .food-svg-plan-area.drop-target {
  outline: 0 !important;
  box-shadow: none !important;
}

body.exporting-tech-sheet-pdf .template-sheet .tpl-plan-area .plan-placeholder,
body.exporting-tech-sheet-pdf .template-sheet .food-svg-plan-area .plan-placeholder,
body.exporting-tech-sheet-pdf .template-sheet .tpl-plan-area .plan-loading-overlay,
body.exporting-tech-sheet-pdf .template-sheet .food-svg-plan-area .plan-loading-overlay,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-plan-area .plan-placeholder,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .food-svg-plan-area .plan-placeholder,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .tpl-plan-area .plan-loading-overlay,
html.printing-tech-sheet-root body.printing-tech-sheet .template-sheet .food-svg-plan-area .plan-loading-overlay,
.template-sheet.is-pdf-capture .tpl-plan-area .plan-placeholder,
.template-sheet.is-pdf-capture .food-svg-plan-area .plan-placeholder,
.template-sheet.is-pdf-capture .tpl-plan-area .plan-loading-overlay,
.template-sheet.is-pdf-capture .food-svg-plan-area .plan-loading-overlay {
  display: none !important;
}

.clients-save-block {
  align-content: start;
}

.clients-inventory-block {
  align-content: start;
}

.client-explorer-block {
  grid-column: 1 / -1;
}

.client-explorer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1.16fr);
  gap: 18px;
}

.client-explorer-column {
  display: grid;
  gap: 14px;
}

.client-explorer-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--yt-dark-line-soft);
}

.client-explorer-subhead strong {
  color: var(--yt-dark-text);
  font-size: 1rem;
}

.client-explorer-subhead span {
  color: var(--yt-dark-text-dim);
  font-size: 0.75rem;
  text-align: right;
}

.client-explorer-records,
.client-explorer-history-list {
  display: grid;
  gap: 12px;
}

.client-record-tile {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 10px;
  background: #0c0f11;
  color: var(--yt-dark-text);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.client-record-tile:hover,
.client-record-tile.is-active {
  border-color: rgba(89, 168, 232, 0.34);
  background: #12171a;
}

.client-record-tile strong {
  font-size: 1rem;
}

.client-record-tile span,
.client-record-tile small {
  color: var(--yt-dark-text-dim);
}

.history-entry {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 12px;
  background: #12171a;
}

.history-entry p {
  margin: 0;
  color: var(--yt-dark-text-dim);
  line-height: 1.5;
}

.history-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.history-entry-head strong {
  color: var(--yt-dark-text);
  font-size: 1rem;
}

.history-entry-head span {
  color: var(--yt-dark-text-dim);
  font-size: 0.75rem;
  white-space: nowrap;
}

.history-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--yt-dark-text-dim);
  font-size: 0.75rem;
}

.history-entry-actions {
  display: flex;
  justify-content: flex-end;
}

.client-explorer-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.client-explorer-nav-button-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.client-explorer-nav-button-icon svg {
  display: block;
}

.client-explorer-nav-button-label {
  line-height: 1.3;
}

.inventory-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #1b2327;
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.table-action-open {
  background: #1b2327;
  color: var(--yt-dark-text);
}

.inventory-actions {
  flex-wrap: wrap;
}

.clients-inventory-block .inventory-table {
  min-width: 1100px;
}

.clients-inventory-block #client-record-meta {
  margin-top: 14px;
}

@media (max-width: 1320px) {
  body.module-wide .yt-layout {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .client-explorer-grid,
  .client-module-grid {
    grid-template-columns: 1fr;
  }
}

/* final dark inventory + smart intake */
.smart-intake-panel {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, #12171a, #0c0f11);
  box-shadow: 0 18px 34px rgba(7, 8, 9, 0.28);
}

.smart-intake-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.smart-intake-kicker {
  margin: 0 0 6px;
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.smart-intake-head h2 {
  margin: 0 0 6px;
  color: var(--yt-dark-text);
  font-size: 1.125rem;
  line-height: 1.3;
}

.smart-intake-head p {
  margin: 0;
  color: var(--yt-dark-text-dim);
  max-width: 70ch;
  line-height: 1.55;
}

.smart-intake-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.smart-intake-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 16px;
}

.smart-intake-field {
  display: grid;
  gap: 8px;
}

.smart-intake-field span {
  color: #59a8e8;
  font-size: 0.8125rem;
  font-weight: 600;
}

.smart-intake-field textarea {
  min-height: 168px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--yt-dark-line);
  background: #070809;
  color: var(--yt-dark-text);
  padding: 14px;
}

.smart-intake-feedback {
  display: grid;
  gap: 12px;
}

.smart-intake-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--yt-dark-line-soft);
  border-radius: 14px;
  background: #12171a;
}

.smart-intake-card span {
  color: var(--yt-dark-text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.smart-intake-card strong {
  color: var(--yt-dark-text);
  font-size: 1rem;
  line-height: 1.3;
}

.smart-intake-card small {
  color: var(--yt-dark-text-dim);
  line-height: 1.5;
}

.smart-intake-card[data-status="match"] {
  border-color: rgba(80, 209, 154, 0.35);
  background: rgba(36, 180, 126, 0.72);
}

.smart-intake-card[data-status="mismatch"] {
  border-color: rgba(239, 114, 114, 0.34);
  background: rgba(239, 114, 114, 0.72);
}

.smart-intake-card[data-status="pending"],
.smart-intake-card[data-status="info"] {
  border-color: rgba(89, 168, 232, 0.3);
  background: rgba(89, 168, 232, 0.72);
}

#panel-clientes .form-block {
  background: #070809;
  border: 1px solid var(--yt-dark-line-soft);
  box-shadow: none;
}

#panel-clientes .form-block h3,
#panel-clientes .form-block label span,
#panel-clientes .form-block strong {
  color: var(--yt-dark-text);
}

#panel-clientes .module-help,
#panel-clientes .detail-card p,
#panel-clientes .inventory-toolbar-meta p {
  color: var(--yt-dark-text-dim);
}

.clients-inventory-block .inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px 180px auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.clients-inventory-block .inventory-toolbar input,
.clients-inventory-block .inventory-toolbar select {
  height: 42px;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid #1b2327;
  background: #0c0f11;
  color: #f4f7f5;
  padding: 0 12px;
}

.clients-inventory-block .inventory-toolbar input::placeholder {
  color: #9da8a3;
}

.clients-inventory-block .inventory-toolbar-meta {
  display: flex;
  justify-content: flex-end;
}

.clients-inventory-block .inventory-toolbar-meta p {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #1b2327;
  background: #12171a;
  color: #9da8a3;
  white-space: nowrap;
}

.clients-inventory-block .inventory-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 10px;
  border: 1px solid #12171a;
  background: #070809;
  scrollbar-gutter: stable both-edges;
}

.clients-inventory-block .inventory-table {
  min-width: 1120px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #070809;
}

.clients-inventory-block .inventory-table thead th {
  padding: 13px 14px;
  background: #12171a;
  color: #9da8a3;
  border-bottom: 1px solid #12171a;
  white-space: nowrap;
}

.clients-inventory-block .inventory-table td {
  padding: 14px;
  background: #070809;
  color: #f4f7f5;
  border-top: 1px solid #12171a;
  white-space: nowrap;
  overflow: visible;
}

.clients-inventory-block .inventory-table thead th:first-child,
.clients-inventory-block .inventory-table td:first-child {
  padding-left: 18px;
}

.clients-inventory-block .inventory-table thead th:last-child,
.clients-inventory-block .inventory-table td:last-child {
  padding-right: 18px;
}

.clients-inventory-block .inventory-table tbody tr:hover td {
  background: #12171a;
}

.clients-inventory-block .inventory-table tbody tr.is-active td {
  background: #0c0f11;
}

.clients-inventory-block .inventory-empty {
  color: #9da8a3;
}

.clients-inventory-block .inventory-actions .table-action {
  border: 1px solid #1b2327;
}

@media (max-width: 1180px) {
  .smart-intake-head,
  .smart-intake-body {
    grid-template-columns: 1fr;
    display: grid;
  }

  .smart-intake-actions {
    flex-wrap: wrap;
  }

  .clients-inventory-block .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .clients-inventory-block .inventory-toolbar-meta {
    justify-content: flex-start;
  }
}

/* left ai chat rail */
.yt-layout {
  grid-template-columns: 332px minmax(0, 1fr) 400px;
}

body.sidebar-collapsed .yt-layout {
  grid-template-columns: 92px minmax(0, 1fr) 430px;
}

body.module-wide .yt-layout {
  grid-template-columns: 332px minmax(0, 1fr);
}

body.sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 92px minmax(0, 1fr);
}

.header-left {
  width: 332px;
}

.yt-sidebar {
  padding: 12px;
  background: #070809;
  border-right: 1px solid #12171a;
}

.yt-sidebar .sidebar-section {
  margin-bottom: 12px;
}

.yt-sidebar .sidebar-intro {
  padding: 14px;
  border-radius: 14px;
  background: #070809;
  border: 1px solid #12171a;
}

.smart-chat-shell.smart-intake-panel {
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding: 14px;
  border: 1px solid #12171a;
  border-radius: 16px;
  background: linear-gradient(180deg, #070809 0%, #0c0f11 100%);
  box-shadow: none;
}

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

.smart-chat-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smart-chat-badge {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #c7a54b, #c7a54b);
  color: #1b2327;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.smart-chat-title-group strong {
  display: block;
  color: #f4f7f5;
  font-size: 1rem;
  line-height: 1.3;
}

.smart-chat-title-group small {
  display: none;
}

.smart-chat-thread {
  display: grid;
  gap: 10px;
  max-height: none;
  padding-right: 0;
  overflow: visible;
}

.smart-chat-message {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.smart-chat-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #12171a;
  color: #cad4cf;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.smart-chat-message-assistant .smart-chat-avatar {
  background: #c7a54b;
  color: #e0c765;
}

.smart-chat-message-system .smart-chat-avatar {
  background: #24b47e;
  color: #50d19a;
}

.smart-chat-message-user .smart-chat-avatar {
  background: #12171a;
  color: #f4f7f5;
}

.smart-chat-bubble {
  display: grid;
  gap: 6px;
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid #12171a;
  background: #12171a;
}

.smart-chat-bubble-user {
  background: #12171a;
  border-color: #c7a54b;
}

.smart-chat-label {
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.smart-chat-bubble p,
.smart-chat-bubble strong,
.smart-chat-bubble small {
  margin: 0;
}

.smart-chat-bubble p {
  color: #f4f7f5;
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.smart-chat-shell #smart-intake-summary,
.smart-chat-shell #smart-intake-plan-detail {
  display: none;
}

.smart-chat-shell .smart-intake-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.smart-chat-shell .smart-intake-card .smart-chat-bubble {
  border: 1px solid #12171a;
  background: #12171a;
}

.smart-chat-shell .smart-intake-card[data-status="match"] .smart-chat-bubble {
  border-color: rgba(80, 209, 154, 0.35);
  background: rgba(36, 180, 126, 0.72);
}

.smart-chat-shell .smart-intake-card[data-status="mismatch"] .smart-chat-bubble {
  border-color: rgba(239, 114, 114, 0.34);
  background: rgba(239, 114, 114, 0.72);
}

.smart-chat-shell .smart-intake-card[data-status="pending"] .smart-chat-bubble,
.smart-chat-shell .smart-intake-card[data-status="info"] .smart-chat-bubble {
  border-color: rgba(89, 168, 232, 0.3);
  background: rgba(89, 168, 232, 0.72);
}

.smart-chat-composer {
  display: grid;
  gap: 8px;
}

.smart-chat-composer-label {
  color: #9da8a3;
  font-size: 0.75rem;
  font-weight: 700;
}

.smart-chat-composer textarea {
  min-height: 120px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid #12171a;
  background: #0c0f11;
  color: #f4f7f5;
  padding: 12px;
  line-height: 1.5;
}

.smart-chat-composer textarea::placeholder {
  color: #9da8a3;
}

.smart-chat-composer textarea:focus {
  outline: none;
  border-color: #202a2e;
  box-shadow: 0 0 0 1px #202a2e;
}

.smart-chat-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.smart-chat-actions .primary-button,
.smart-chat-actions .secondary-button {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.smart-chat-actions .primary-button {
  background: linear-gradient(135deg, #e0c765 0%, #c7a54b 48%, #c7a54b 100%) !important;
  color: #c7a54b !important;
  border: 1px solid rgba(224, 199, 101, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(224, 199, 101, 0.34),
    0 14px 30px rgba(157, 168, 163, 0.24) !important;
}

.smart-chat-actions .secondary-button {
  background: linear-gradient(135deg, #24b47e 0%, #24b47e 50%, #24b47e 100%) !important;
  color: #50d19a !important;
  border: 1px solid rgba(80, 209, 154, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(80, 209, 154, 0.16),
    0 14px 30px rgba(36, 180, 126, 0.2) !important;
}

.smart-chat-actions .primary-button:hover,
.smart-chat-actions .secondary-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

body.sidebar-collapsed .smart-intake-panel {
  display: none !important;
}

.viewer-shell-head,
.validation-monitor {
  display: none !important;
}

.viewer-shell {
  gap: 0;
}

.viewer-stage {
  padding: 10px;
}

.sheet-viewport {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
  padding: 10px 12px 14px;
}

.sheet-stage {
  --sheet-scale: 1;
  margin: 0 auto;
}

.template-sheet {
  --template-font-size: 8.5pt;
}

.module-nav-copy strong {
  font-size: 1rem;
}

.module-nav-copy small,
.suggestion-meta,
.detail-card p,
.module-help,
.upload-status,
.smart-chat-composer-label,
label span {
  font-size: 0.875rem;
}

.builder-tab {
  font-size: 1rem;
}

.template-sheet .drop-target-title {
  font-size: 0.78rem;
}

.template-sheet .drop-target-hint {
  font-size: 0.68rem;
}

.template-sheet .drop-target-subhint {
  font-size: 0.56rem;
}

@media (max-width: 1320px) {
  .yt-layout {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .header-left {
    width: 264px;
  }

  .pantone-grid {
    grid-template-columns: 1fr;
  }
}

/* final mobile-first overrides */
.workspace-copy h1 {
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  letter-spacing: -0.025em !important;
  max-width: none !important;
}

.editor-actions-footer .primary-button,

.editor-actions-footer .secondary-button,

.editor-actions-footer .primary-button:hover,
.editor-actions-footer .secondary-button:hover,

.suggestion-thumb {
  background: #12171a !important;
}

.suggestion-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* final header logo cleanup */
.brand {
  gap: 0 !important;
}

.brand-logo {
  width: 460px !important;
  height: 40px !important;
  display: block !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: url("./assets/app/LOGO.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: auto 40px !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: hidden !important;
}

.brand-copy,
.brand-name,
.brand-subtitle,
.brand strong,
.brand small {
  display: none !important;
}

/* clientes crm polish */
#panel-clientes .client-module-grid {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  grid-template-areas:
    "inventory save"
    "inventory explorer";
  gap: 18px !important;
  align-items: start !important;
}

#panel-clientes .clients-inventory-block {
  grid-area: inventory;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(157, 168, 163, 0.22) !important;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 245, 0.04),
    0 20px 42px rgba(7, 8, 9, 0.2);
}

#panel-clientes .clients-save-block {
  grid-area: save;
  position: sticky;
  top: 18px;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  padding: 18px;
  border: 1px solid rgba(157, 168, 163, 0.22) !important;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 245, 0.04),
    0 14px 30px rgba(7, 8, 9, 0.16);
}

#panel-clientes .client-explorer-block {
  grid-area: explorer;
  min-width: 0;
  width: 100%;
  max-width: 320px;
  padding: 18px;
  border: 1px solid rgba(157, 168, 163, 0.24) !important;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)) !important;
}

#panel-clientes .clients-inventory-block > .block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.14);
}

#panel-clientes .clients-save-block .block-head,
#panel-clientes .client-explorer-block .block-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.16);
}

#panel-clientes .clients-inventory-block .block-head h3,
#panel-clientes .clients-save-block .block-head h3,
#panel-clientes .client-explorer-block .block-head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

#panel-clientes .clients-inventory-block .block-head .module-help,
#panel-clientes .clients-save-block .block-head .module-help,
#panel-clientes .client-explorer-block .block-head .module-help {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#panel-clientes .clients-crm-head {
  display: none !important;
}

#panel-clientes .inventory-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#panel-clientes .inventory-summary-card {
  display: grid;
  gap: 4px;
  min-width: 112px;
  padding: 12px 14px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(12, 15, 17, 0.96));
}

#panel-clientes .inventory-summary-card strong {
  color: #59a8e8;
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

#panel-clientes .inventory-summary-card span {
  color: #9da8a3;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-clientes .inventory-summary-card-wide {
  min-width: 200px;
}

#panel-clientes .inventory-summary-card-wide strong {
  font-size: 1rem;
  line-height: 1.3;
}

#panel-clientes .inventory-summary-card-wide span {
  letter-spacing: 0.02em;
  text-transform: none;
}

#panel-clientes .inventory-filters-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 18px;
  background: rgba(12, 15, 17, 0.72);
}

#panel-clientes .inventory-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#panel-clientes .inventory-filters-head strong {
  color: #59a8e8;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-clientes .inventory-reset-button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  border-radius: 999px;
  background: rgba(12, 15, 17, 0.96);
  color: #cad4cf;
  font-size: 0.75rem;
  font-weight: 700;
}

#panel-clientes .ficha-center-dashboard {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(27, 35, 39, 0.96), rgba(7, 8, 9, 0.96)),
    rgba(7, 8, 9, 0.96);
  box-shadow: 0 18px 42px rgba(7, 8, 9, 0.28);
}

#panel-clientes .ficha-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.14);
}

#panel-clientes .ficha-center-head div {
  display: grid;
  gap: 5px;
}

#panel-clientes .ficha-center-head strong {
  color: #f4f7f5;
  font-size: 1rem;
  line-height: 1.3;
}

#panel-clientes .ficha-center-head p {
  max-width: 420px;
  margin: 0;
  color: #9da8a3;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#panel-clientes .ficha-center-board {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(320px, 1.25fr) minmax(220px, 0.9fr);
  gap: 14px;
}

#panel-clientes .ficha-center-lane {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 18px;
  background: rgba(7, 8, 9, 0.74);
}

#panel-clientes .ficha-center-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#panel-clientes .ficha-center-lane-head strong {
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#panel-clientes .ficha-center-lane-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(199, 165, 75, 0.18);
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
}

#panel-clientes .ficha-center-list {
  display: grid;
  gap: 10px;
}

#panel-clientes .ficha-center-card,
#panel-clientes .ficha-center-ficha-card > button {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 14px;
  background: rgba(12, 15, 17, 0.92);
  color: inherit;
  text-align: left;
}

#panel-clientes .ficha-center-card {
  display: grid;
  gap: 6px;
  padding: 13px;
}

#panel-clientes .ficha-center-ficha-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding: 0;
  border-color: rgba(157, 168, 163, 0.16);
}

#panel-clientes .ficha-center-ficha-card > button:first-child {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 0;
  border-radius: 14px 0 0 14px;
  background: transparent;
}

#panel-clientes .ficha-center-ficha-card.is-active {
  border-color: rgba(224, 199, 101, 0.48);
  background: linear-gradient(180deg, rgba(199, 165, 75, 0.42), rgba(12, 15, 17, 0.94));
}

#panel-clientes .ficha-center-load {
  min-width: 74px;
  border: 0;
  border-left: 1px solid rgba(157, 168, 163, 0.12);
  border-radius: 0 14px 14px 0;
  background: rgba(199, 165, 75, 0.14);
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
}

#panel-clientes .ficha-center-card strong,
#panel-clientes .ficha-center-ficha-card strong,
#panel-clientes .ficha-center-active strong {
  overflow-wrap: anywhere;
  color: #f4f7f5;
  font-size: 0.875rem;
  line-height: 1.3;
}

#panel-clientes .ficha-center-card span,
#panel-clientes .ficha-center-ficha-card span,
#panel-clientes .ficha-center-active span {
  color: #cad4cf;
  font-size: 0.75rem;
  line-height: 1.35;
}

#panel-clientes .ficha-center-card small,
#panel-clientes .ficha-center-ficha-card small,
#panel-clientes .ficha-center-active small {
  color: #9da8a3;
  font-size: 0.6875rem;
  line-height: 1.35;
}

#panel-clientes .ficha-center-active {
  display: grid;
  gap: 5px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(199, 165, 75, 0.1);
  border: 1px solid rgba(199, 165, 75, 0.18);
}

#panel-clientes .ficha-center-asset {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 12px;
  background: rgba(7, 8, 9, 0.9);
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 800;
}

#panel-clientes .ficha-center-asset small {
  overflow-wrap: anywhere;
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 700;
}

#panel-clientes .ficha-center-empty {
  padding: 14px;
  border: 1px dashed rgba(157, 168, 163, 0.2);
  border-radius: 14px;
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}

#panel-clientes .clients-inventory-block .inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) 150px 150px auto;
  gap: 10px;
  margin-bottom: 0;
  align-items: center;
}

#panel-clientes .inventory-filter-field {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

#panel-clientes .inventory-filter-field span {
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-clientes .inventory-filter-search {
  grid-column: 1 / 2;
  min-width: 360px;
}

#panel-clientes .clients-inventory-block .inventory-toolbar input,
#panel-clientes .clients-inventory-block .inventory-toolbar select {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(157, 168, 163, 0.22);
  background: rgba(7, 8, 9, 0.92);
  color: #f4f7f5;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.03);
  padding: 0 12px;
}

#panel-clientes .clients-inventory-block .inventory-toolbar input::placeholder {
  color: #9da8a3;
}

#panel-clientes .clients-inventory-block .inventory-toolbar-meta {
  display: grid;
  gap: 6px;
  align-self: end;
}

#panel-clientes .clients-inventory-block .inventory-toolbar-meta span {
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-clientes .clients-inventory-block .inventory-toolbar-meta p {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  background: rgba(12, 15, 17, 0.94);
  color: #cad4cf;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

#panel-clientes .clients-inventory-block .inventory-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  background: rgba(7, 8, 9, 0.98);
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.02);
}

#panel-clientes .clients-inventory-block .inventory-table {
  min-width: 980px;
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

#panel-clientes .clients-inventory-block .inventory-table thead th {
  padding: 14px 16px;
  background: rgba(12, 15, 17, 0.98);
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(157, 168, 163, 0.14);
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(1) {
  width: 58px;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(2) {
  width: 31%;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(3) {
  width: 19%;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(4) {
  width: 20%;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(5) {
  width: 220px;
}

#panel-clientes .clients-inventory-block .inventory-table td {
  padding: 14px 16px;
  background: rgba(12, 15, 17, 0.98);
  border-top: 1px solid rgba(157, 168, 163, 0.08);
  vertical-align: middle;
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr:hover td {
  background: rgba(18, 23, 26, 0.98);
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr:hover {
  transform: translateY(-1px);
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active td {
  background: linear-gradient(180deg, rgba(32, 42, 46, 0.98), rgba(27, 35, 39, 0.98));
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-index-badge {
  border-color: rgba(89, 168, 232, 0.28);
  background: linear-gradient(180deg, rgba(32, 42, 46, 0.94), rgba(18, 23, 26, 0.94));
}

#panel-clientes .inventory-index {
  width: 58px;
  color: #9da8a3;
  font-weight: 700;
  text-align: center;
}

#panel-clientes .inventory-index-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  background: rgba(12, 15, 17, 0.92);
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#panel-clientes .inventory-client-cell,
#panel-clientes .inventory-reference-cell,
#panel-clientes .inventory-history-cell {
  display: grid;
  gap: 5px;
}

#panel-clientes .inventory-client-main,
#panel-clientes .inventory-reference-main,
#panel-clientes .inventory-date-main {
  color: #59a8e8;
  font-size: 0.875rem;
  line-height: 1.3;
}

#panel-clientes .inventory-client-sub,
#panel-clientes .inventory-reference-sub,
#panel-clientes .inventory-updated-at {
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.42;
}

#panel-clientes .inventory-work-cell {
  gap: 7px;
}

#panel-clientes .inventory-reference-main {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

#panel-clientes .inventory-reference-sub {
  font-size: 0.8125rem;
}

#panel-clientes .inventory-inline-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panel-clientes .inventory-history-cell {
  min-width: 0;
  align-content: center;
}

#panel-clientes .inventory-history-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  background: rgba(18, 23, 26, 0.92);
  color: #59a8e8;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-clientes .inventory-type-pill {
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid rgba(157, 168, 163, 0.22);
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.94), rgba(18, 23, 26, 0.94));
  color: #59a8e8;
  font-size: 0.75rem;
}

#panel-clientes .inventory-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  background: rgba(12, 15, 17, 0.94);
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#panel-clientes .inventory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 178px;
}

#panel-clientes .inventory-actions .table-action {
  width: auto;
  min-width: 82px;
  min-height: 34px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

#panel-clientes #client-record-meta.crm-record-meta {
  display: none !important;
}

#panel-clientes .crm-meta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

#panel-clientes .crm-meta-copy {
  display: grid;
  gap: 6px;
}

#panel-clientes .crm-meta-kicker {
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#panel-clientes .crm-meta-copy strong {
  color: #59a8e8;
  font-size: 1.125rem;
}

#panel-clientes .crm-meta-copy p,
#panel-clientes .crm-meta-note {
  margin: 0;
  color: #9da8a3;
  line-height: 1.55;
}

#panel-clientes .crm-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#panel-clientes .crm-meta-item {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  border-radius: 16px;
  background: rgba(12, 15, 17, 0.84);
}

#panel-clientes .crm-meta-item span {
  color: #9da8a3;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#panel-clientes .crm-meta-item strong {
  color: #f4f7f5;
  line-height: 1.45;
}

#panel-clientes .crm-meta-item-wide {
  grid-column: span 2;
}

#panel-clientes .crm-meta-note {
  margin-top: 14px;
}

#panel-clientes .clients-save-block .form-stack {
  gap: 14px;
}

#panel-clientes .client-summary-shell {
  display: grid;
  gap: 14px;
}

#panel-clientes .client-summary-status {
  margin: 0;
  color: #9da8a3;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#panel-clientes .client-summary-preview {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.96));
}

#panel-clientes .client-summary-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

#panel-clientes .client-summary-preview-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 210px;
  padding: 18px;
  text-align: center;
}

#panel-clientes .client-summary-preview-empty strong {
  color: #59a8e8;
  font-size: 1rem;
}

#panel-clientes .client-summary-preview-empty span {
  color: #9da8a3;
  font-size: 0.8125rem;
  line-height: 1.5;
}

#panel-clientes .client-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#panel-clientes .client-summary-item {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  border-radius: 14px;
  background: rgba(12, 15, 17, 0.78);
}

#panel-clientes .client-summary-item span {
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel-clientes .client-summary-item strong {
  color: #59a8e8;
  font-size: 0.875rem;
  line-height: 1.35;
}

#panel-clientes .client-summary-item-wide {
  grid-column: span 2;
}

#panel-clientes .client-summary-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panel-clientes .client-summary-asset-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(157, 168, 163, 0.14);
  border-radius: 999px;
  background: rgba(12, 15, 17, 0.94);
  color: #59a8e8;
  font-size: 0.75rem;
  line-height: 1.3;
}

#panel-clientes .client-summary-asset-pill.is-muted {
  color: #9da8a3;
}

#panel-clientes .client-summary-actions {
  display: grid;
}

#panel-clientes .client-summary-actions .primary-button {
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.8125rem;
}

#panel-cliente-detalle .client-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

#panel-cliente-detalle .client-detail-summary-block {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(157, 168, 163, 0.22) !important;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.96)) !important;
}

#panel-cliente-detalle .client-detail-summary-block .block-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.16);
}

#panel-cliente-detalle .client-detail-summary-block .block-head h3 {
  margin: 0 0 4px;
  font-size: 1.125rem;
}

#panel-cliente-detalle .client-detail-summary-block .module-help {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#panel-cliente-detalle .client-explorer-block {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(157, 168, 163, 0.24) !important;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)) !important;
}

#panel-cliente-detalle .client-explorer-block .block-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.16);
}

#panel-cliente-detalle .client-explorer-block .block-head h3 {
  margin: 0 0 4px;
  font-size: 1.125rem;
}

#panel-cliente-detalle .client-explorer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
}

#panel-cliente-detalle .client-explorer-column {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  border-radius: 20px;
  background: rgba(7, 8, 9, 0.82);
}

#panel-cliente-detalle .client-record-tile {
  padding: 16px;
  border-radius: 14px;
  background: rgba(12, 15, 17, 0.96);
}

#panel-cliente-detalle .history-entry {
  padding: 16px;
  border-radius: 16px;
  background: rgba(12, 15, 17, 0.96);
}

#panel-cliente-detalle .client-center-ficha-overview {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.98), rgba(12, 15, 17, 0.98));
}

#panel-cliente-detalle .client-center-ficha-overview strong {
  color: #59a8e8;
  font-size: 1rem;
  line-height: 1.3;
}

#panel-cliente-detalle .client-center-ficha-overview p {
  margin: 0;
  color: #9da8a3;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#panel-cliente-detalle .client-center-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panel-cliente-detalle .client-center-asset-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(157, 168, 163, 0.16);
  border-radius: 999px;
  background: rgba(7, 8, 9, 0.86);
  color: #59a8e8;
  font-size: 0.75rem;
  font-weight: 700;
}

#panel-cliente-detalle .client-center-asset-chip.is-muted {
  color: #9da8a3;
}

#panel-clientes .clients-save-block .dual-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

#panel-clientes .clients-save-block .primary-button,
#panel-clientes .clients-save-block .secondary-button {
  min-height: 40px;
  border-radius: 10px;
  font-size: 0.8125rem;
}

#panel-clientes .client-explorer-grid {
  gap: 20px;
}

#panel-clientes .client-explorer-column {
  padding: 18px;
  border: 1px solid rgba(157, 168, 163, 0.12);
  border-radius: 20px;
  background: rgba(7, 8, 9, 0.82);
}

#panel-clientes .client-record-tile {
  padding: 16px;
  border-radius: 14px;
  background: rgba(12, 15, 17, 0.96);
}

#panel-clientes .history-entry {
  padding: 16px;
  border-radius: 16px;
  background: rgba(12, 15, 17, 0.96);
}

@media (max-width: 1280px) {
  #panel-clientes .crm-meta-grid {
    grid-template-columns: 1fr;
  }

  #panel-clientes .crm-meta-item-wide {
    grid-column: auto;
  }

  #panel-clientes .client-summary-grid {
    grid-template-columns: 1fr;
  }

  #panel-clientes .client-summary-item-wide {
    grid-column: auto;
  }
}

@media (max-width: 1180px) {
  #panel-clientes .client-module-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "inventory"
      "explorer"
      "save";
  }

  #panel-clientes .clients-save-block {
    position: static;
    max-width: none;
  }

  #panel-clientes .client-explorer-block {
    max-width: none;
  }

  #panel-clientes .clients-inventory-block .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  #panel-clientes .ficha-center-board {
    grid-template-columns: 1fr;
  }

  #panel-clientes .inventory-summary-card-wide {
    min-width: 160px;
  }

  #panel-clientes .clients-inventory-block .inventory-table {
    min-width: 820px;
  }

  #panel-cliente-detalle .client-detail-layout,
  #panel-cliente-detalle .client-explorer-grid {
    grid-template-columns: 1fr;
  }

  #panel-cliente-detalle .client-detail-summary-block {
    position: static;
  }
}

@media (max-width: 960px) {
  #panel-clientes .inventory-actions {
    min-width: 168px;
  }
}

@media (max-width: 720px) {
  #panel-clientes .clients-inventory-block,
  #panel-clientes .clients-save-block,
  #panel-clientes .client-explorer-block {
    padding: 18px;
    border-radius: 20px;
  }

  #panel-cliente-detalle .client-detail-summary-block,
  #panel-cliente-detalle .client-explorer-block,
  #panel-cliente-detalle .client-explorer-column {
    padding: 18px;
    border-radius: 20px;
  }

  #panel-clientes .inventory-summary-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-clientes .inventory-summary-card,
  #panel-clientes .inventory-summary-card-wide {
    min-width: 0;
  }

  #panel-clientes .ficha-center-head {
    display: grid;
  }

  #panel-clientes .ficha-center-ficha-card {
    grid-template-columns: 1fr;
  }

  #panel-clientes .ficha-center-ficha-card > button:first-child,
  #panel-clientes .ficha-center-load {
    border-radius: 14px;
  }

  #panel-clientes .inventory-filters-head {
    flex-wrap: wrap;
  }

  #panel-clientes .clients-inventory-block .inventory-table {
    min-width: 760px;
  }
}

@media screen {
  body.yt-dark {
    background: linear-gradient(180deg, #0c0f11 0%, #0c0f11 100%) !important;
  }

  .yt-header {
    background: rgba(12, 15, 17, 0.94) !important;
    border-bottom-color: rgba(157, 168, 163, 0.13) !important;
    box-shadow: 0 8px 18px rgba(7, 8, 9, 0.14) !important;
  }

  .yt-sidebar {
    background: #0c0f11 !important;
    border-right-color: rgba(157, 168, 163, 0.1) !important;
  }

  .yt-main-content,
  .yt-right-panel,
  .editor-shell,
  .viewer-shell,
  .form-block,
  .smart-chat-shell,
  .smart-chat-message,
  #panel-clientes .clients-inventory-block,
  #panel-clientes .clients-save-block,
  #panel-clientes .client-explorer-block,
  #panel-clientes .client-summary-shell,
  #panel-clientes .inventory-summary-card,
  #panel-clientes .inventory-filters-shell,
  #panel-clientes .ficha-center-dashboard,
  #panel-clientes .client-record-tile,
  #panel-clientes .history-entry,
  #panel-clientes .client-summary-item,
  #panel-cliente-detalle .client-detail-summary-block,
  #panel-cliente-detalle .client-explorer-block,
  #panel-cliente-detalle .client-explorer-column,
  #panel-cliente-detalle .client-record-tile,
  #panel-cliente-detalle .history-entry,
  #panel-cliente-detalle .client-center-ficha-overview {
    background: #1b2327 !important;
    border-color: rgba(157, 168, 163, 0.13) !important;
    box-shadow: none !important;
  }

  input,
  select,
  textarea,
  .search-bar {
    background: #12171a !important;
    border-color: rgba(157, 168, 163, 0.13) !important;
    color: #f4f7f5 !important;
    box-shadow: none !important;
  }

  .module-nav {
    color: #cad4cf !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .module-nav:hover {
    background: rgba(157, 168, 163, 0.05) !important;
  }

  .module-nav.is-active {
    color: #f4f7f5 !important;
    background: rgba(157, 168, 163, 0.1) !important;
    border-color: rgba(157, 168, 163, 0.13) !important;
  }

  .module-nav-icon,
  .smart-chat-avatar,
  .inventory-index-badge,
  .user-avatar,
  .menu-toggle,
  .yt-btn-icon,
  .zoom-btn {
    background: #12171a !important;
    border-color: rgba(157, 168, 163, 0.13) !important;
    box-shadow: none !important;
  }

  .primary-button,
  .yt-btn-primary,
  .editor-actions-footer .primary-button,
  .smart-chat-actions .primary-button,
  #save-tech-sheet,
  #save-client-record,
  #header-save-client-record,
  .login-submit {
    color: #c7a54b !important;
    background: #c7a54b !important;
    border-color: rgba(199, 165, 75, 0.5) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .secondary-button,
  .yt-btn-secondary,
  .ghost-button,
  .editor-actions-footer .secondary-button,
  .smart-chat-actions .secondary-button,
  #download-tech-sheet-pdf,
  #send-tech-sheet,
  .search-btn,
  .login-show-password {
    color: #f4f7f5 !important;
    background: #1b2327 !important;
    border-color: rgba(157, 168, 163, 0.13) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .login-gate {
    background-color: #24b47e !important;
    background-image:
      linear-gradient(90deg, rgba(7, 8, 9, 0.92) 0%, rgba(7, 8, 9, 0.64) 42%, rgba(7, 8, 9, 0.94) 100%),
      linear-gradient(180deg, rgba(7, 8, 9, 0.18) 0%, rgba(7, 8, 9, 0.78) 100%),
      url("./assets/app/FONDO%20LOGUIN.png") !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
  }

  .login-card,
  .login-summary-grid article,
  .login-module-strip span,
  .login-role-strip span,
  .login-status {
    background: rgba(18, 23, 26, 0.82) !important;
    border-color: rgba(157, 168, 163, 0.13) !important;
    box-shadow: none !important;
  }

  .login-summary-grid span {
    background: transparent !important;
    border: 0 !important;
    color: #9da8a3 !important;
  }

  .login-visual-copy h1 {
    font-size: clamp(2.6rem, 4.3vw, 3.7rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  .login-field input {
    background: #e0c765 !important;
    color: #1b2327 !important;
    font-weight: 700 !important;
  }

  .primary-button:hover,
  .secondary-button:hover,
  .yt-btn-primary:hover,
  .yt-btn-secondary:hover {
    transform: none !important;
    filter: brightness(1.02) !important;
  }
}

/* Botones refinados: estados claros, mas compactos y sobrios. */
.module-nav,
.builder-tab,
.segmented-option,
.primary-button,
.secondary-button,
.ghost-button,
.yt-btn-primary,
.yt-btn-secondary,
.table-action,
.template-library-card,
.editor-actions-footer button,
.smart-chat-actions button {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

.module-nav {
  min-height: 42px !important;
  padding: 8px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

.module-nav.is-active {
  background: rgba(36, 180, 126, 0.16) !important;
  border-color: rgba(199, 165, 75, 0.34) !important;
  box-shadow: inset 3px 0 0 var(--brand-gold), 0 8px 18px rgba(7, 8, 9, 0.18) !important;
}

.module-nav.is-active .module-nav-icon {
  background: rgba(199, 165, 75, 0.92) !important;
  color: #12171a !important;
}

.module-nav:hover:not(.is-active) {
  background: rgba(244, 247, 245, 0.055) !important;
  border-color: rgba(199, 165, 75, 0.20) !important;
}

.builder-tabs {
  gap: 8px !important;
}

.builder-tab {
  min-height: 36px !important;
  padding: 7px 13px !important;
  border-radius: 10px !important;
  background: rgba(157, 168, 163, 0.05) !important;
  border-color: rgba(244, 247, 245, 0.13) !important;
  color: #e0c765 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.builder-tab.is-active {
  background: rgba(199, 165, 75, 0.94) !important;
  border-color: rgba(224, 199, 101, 0.95) !important;
  color: #c7a54b !important;
  box-shadow: 0 8px 18px rgba(199, 165, 75, 0.18) !important;
}

.builder-tab:hover:not(.is-active) {
  background: rgba(199, 165, 75, 0.10) !important;
  border-color: rgba(199, 165, 75, 0.30) !important;
  color: #e0c765 !important;
}

.segmented-control {
  gap: 7px !important;
}

.segmented-option {
  min-height: 38px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  background: rgba(157, 168, 163, 0.05) !important;
  border-color: rgba(157, 168, 163, 0.16) !important;
  color: #cad4cf !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.segmented-option.is-active {
  background: rgba(36, 180, 126, 0.92) !important;
  border-color: rgba(80, 209, 154, 0.95) !important;
  color: #f4f7f5 !important;
  box-shadow: 0 8px 18px rgba(36, 180, 126, 0.20) !important;
}

.segmented-option:hover:not(.is-active) {
  background: rgba(199, 165, 75, 0.09) !important;
  border-color: rgba(199, 165, 75, 0.26) !important;
  color: #e0c765 !important;
}

.primary-button,
.secondary-button,
.ghost-button,
.yt-btn-primary,
.yt-btn-secondary,
.table-action,
.editor-actions-footer button,
.smart-chat-actions button {
  min-height: 38px !important;
  padding: 8px 15px !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.primary-button,
.yt-btn-primary,
.table-action-load,
.editor-actions-footer .primary-button,
.smart-chat-actions .primary-button,
#save-tech-sheet,
#save-client-record,
#header-save-client-record,
.login-submit,
.search-btn {
  background: rgba(36, 180, 126, 0.92) !important;
  border-color: rgba(80, 209, 154, 0.85) !important;
  color: #f4f7f5 !important;
  box-shadow: 0 9px 20px rgba(36, 180, 126, 0.18) !important;
}

.primary-button:hover,
.yt-btn-primary:hover,
.table-action-load:hover,
.editor-actions-footer .primary-button:hover,
.smart-chat-actions .primary-button:hover,
.login-submit:hover,
.search-btn:hover {
  background: rgba(36, 180, 126, 0.96) !important;
  border-color: rgba(199, 165, 75, 0.50) !important;
  box-shadow: 0 10px 22px rgba(36, 180, 126, 0.24) !important;
  transform: translateY(-1px) !important;
}

.secondary-button,
.yt-btn-secondary,
.ghost-button,
.table-action:not(.table-action-load) {
  background: rgba(244, 247, 245, 0.045) !important;
  border-color: rgba(244, 247, 245, 0.15) !important;
  color: #f4f7f5 !important;
  box-shadow: none !important;
}

.secondary-button:hover,
.yt-btn-secondary:hover,
.ghost-button:hover,
.table-action:not(.table-action-load):hover {
  background: rgba(199, 165, 75, 0.10) !important;
  border-color: rgba(199, 165, 75, 0.34) !important;
  color: #e0c765 !important;
  transform: translateY(-1px) !important;
}

.template-library-card {
  min-height: 176px !important;
  padding: 16px !important;
  border-radius: 10px !important;
}

.template-library-card.is-active {
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.98), rgba(7, 8, 9, 0.98)) !important;
  border-color: rgba(199, 165, 75, 0.55) !important;
  box-shadow: 0 12px 28px rgba(7, 8, 9, 0.24) !important;
}

.template-library-badge,
.template-library-card em {
  border-radius: 7px !important;
  padding: 5px 8px !important;
  font-size: 0.6875rem !important;
}

.template-library-card:focus-visible,
.module-nav:focus-visible,
.builder-tab:focus-visible,
.segmented-option:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.ghost-button:focus-visible,
.yt-btn-primary:focus-visible,
.yt-btn-secondary:focus-visible,
.table-action:focus-visible {
  outline: 2px solid rgba(199, 165, 75, 0.85) !important;
  outline-offset: 2px !important;
}

/* Pestañas del editor estilo navegador: limpias y sin cortes visuales. */
.builder-tabs {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  margin: 0 0 16px !important;
  padding: 0 0 0 8px !important;
  min-height: 40px !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(199, 165, 75, 0.24) !important;
}

.builder-tab {
  position: relative !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(157, 168, 163, 0.16) !important;
  border-bottom-color: rgba(199, 165, 75, 0.24) !important;
  border-radius: 12px 12px 0 0 !important;
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.96), rgba(12, 15, 17, 0.98)) !important;
  color: #e0c765 !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.builder-tab::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: -1px !important;
  height: 1px !important;
  background: transparent !important;
}

.builder-tab:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(27, 35, 39, 0.96), rgba(12, 15, 17, 0.98)) !important;
  border-color: rgba(199, 165, 75, 0.32) !important;
  border-bottom-color: rgba(199, 165, 75, 0.24) !important;
  color: #e0c765 !important;
  transform: none !important;
}

.builder-tab.is-active {
  height: 38px !important;
  min-height: 38px !important;
  margin-bottom: -1px !important;
  padding: 0 17px !important;
  background: linear-gradient(180deg, #e0c765 0%, #c7a54b 100%) !important;
  border-color: rgba(224, 199, 101, 0.96) !important;
  border-bottom-color: #c7a54b !important;
  color: #c7a54b !important;
  box-shadow: 0 -1px 0 rgba(244, 247, 245, 0.22) inset !important;
}

.builder-tab.is-active::after {
  left: 0 !important;
  right: 0 !important;
  background: #c7a54b !important;
}

/* Panel derecho compacto: menos scroll sin perder campos. */
.yt-right-panel .editor-shell {
  padding: 0 0 14px !important;
}

.yt-right-panel .builder-tabs {
  margin-bottom: 12px !important;
}

.controls-panel .builder-tabs,
.yt-right-panel .builder-tabs {
  flex-wrap: nowrap !important;
  gap: 2px !important;
  width: 100% !important;
  padding-left: 6px !important;
}

.controls-panel .builder-tab,
.yt-right-panel .builder-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  font-size: 0.8125rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.controls-panel .builder-tab.is-active,
.yt-right-panel .builder-tab.is-active {
  padding: 0 8px !important;
}

.yt-right-panel .form-block {
  padding: 14px !important;
  border-radius: 10px !important;
}

.yt-right-panel .block-head {
  margin-bottom: 10px !important;
}

.yt-right-panel .block-head h3 {
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

.yt-right-panel .module-help {
  display: none !important;
}

.yt-right-panel .form-stack,
.yt-right-panel .field-stack {
  gap: 10px !important;
}

.yt-right-panel .dual-grid,
.yt-right-panel .triple-grid,
.yt-right-panel .single-grid,
.yt-right-panel .editor-grid,
.yt-right-panel .editor-grid-wide {
  gap: 10px !important;
}

.yt-right-panel .form-block label span,
.yt-right-panel .field-label,
.yt-right-panel .mini-field span {
  margin-bottom: 5px !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

.yt-right-panel .form-block input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.yt-right-panel .form-block select {
  min-height: 42px !important;
  height: 42px !important;
  padding: 7px 12px !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
}

.yt-right-panel .form-block textarea {
  min-height: 104px !important;
  max-height: 150px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
}

.yt-right-panel .segmented-control {
  gap: 7px !important;
}

.yt-right-panel .segmented-option {
  min-height: 40px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
}

.yt-right-panel .optional-group {
  margin-top: 4px !important;
  border-radius: 9px !important;
}

.yt-right-panel .optional-group summary {
  padding: 8px 11px !important;
  font-size: 0.8125rem !important;
}

.yt-right-panel .optional-group-body {
  padding: 0 11px 10px !important;
}

.yt-right-panel .american-measure-grid {
  gap: 8px !important;
}

.yt-right-panel .form-note {
  padding: 8px 10px !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

.yt-right-panel .pantone-grid {
  gap: 8px !important;
}

.yt-right-panel .pantone-card {
  gap: 6px !important;
  padding: 8px !important;
  border-radius: 9px !important;
}

.yt-right-panel .pantone-card span {
  font-size: 0.6875rem !important;
  letter-spacing: 0 !important;
}

.yt-right-panel .pantone-input-row {
  gap: 6px !important;
}

.yt-right-panel .pantone-card input {
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 9px !important;
}

.yt-right-panel .color-picker-button {
  width: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
}

.yt-right-panel .editor-actions-footer {
  gap: 7px !important;
  margin-top: 10px !important;
}

.yt-right-panel .editor-actions-footer .primary-button,
.yt-right-panel .editor-actions-footer .secondary-button {
  min-height: 40px !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
}

.food-material-custom-row.is-hidden {
  display: none !important;
}

/* Acciones del editor en fila: mas compactas y legibles. */
#panel-crear-ficha:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100dvh - 112px) !important;
}

#panel-crear-ficha > #ficha-form {
  flex: 1 1 auto !important;
}

.editor-actions-footer {
  /* Antes: repeat(4, minmax(0, 1fr)). Cuatro columnas pase lo que pase, y en el
     panel derecho (360px) cada boton quedaba en 80px con el texto recortado a
     "Gu...". 124px es lo que pide el boton mas ancho con su icono, asi que
     abajo se reparten en dos filas en vez de mentir. */
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)) !important;
  align-items: stretch !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 25 !important;
  padding: 8px 0 2px !important;
  border-top: 1px solid rgba(199, 165, 75, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(7, 8, 9, 0) 0%, rgba(7, 8, 9, 0.96) 24%, rgba(7, 8, 9, 1) 100%) !important;
  backdrop-filter: blur(10px);
  margin-top: auto !important;
}

.editor-actions-footer .editor-action-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.editor-action-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(244, 247, 245, 0.13);
}

.editor-action-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

.editor-action-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#save-tech-sheet.editor-action-button {
  background: linear-gradient(180deg, #24b47e 0%, #24b47e 100%) !important;
  border-color: rgba(80, 209, 154, 0.76) !important;
  color: #f4f7f5 !important;
  box-shadow: 0 8px 18px rgba(36, 180, 126, 0.18) !important;
}

/* El texto iba en #c7a54b sobre un fondo que termina en #c7a54b: contraste
   1.00:1, es decir invisible. Sobre dorado el texto va oscuro (8.2:1). */
#download-tech-sheet-pdf.editor-action-button {
  background: linear-gradient(180deg, #e0c765 0%, #c7a54b 100%) !important;
  border-color: rgba(224, 199, 101, 0.72) !important;
  color: #0c0f11 !important;
  box-shadow: 0 8px 18px rgba(199, 165, 75, 0.18) !important;
}

#download-tech-sheet-pdf.editor-action-button .editor-action-icon {
  background: rgba(12, 15, 17, 0.16) !important;
}

#save-tech-sheet-pdf-local.editor-action-button {
  background: linear-gradient(180deg, #1b2327 0%, #12171a 100%) !important;
  border-color: rgba(202, 212, 207, 0.28) !important;
  color: #59a8e8 !important;
  box-shadow: none !important;
}

#send-tech-sheet.editor-action-button {
  background: rgba(244, 247, 245, 0.055) !important;
  border-color: rgba(244, 247, 245, 0.17) !important;
  color: #e0c765 !important;
  box-shadow: none !important;
}

.editor-actions-footer .editor-action-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

@media (max-width: 420px) {
  .editor-actions-footer .editor-action-button {
    gap: 5px !important;
    padding-inline: 6px !important;
    font-size: 0.75rem !important;
  }
}

/* Lateral izquierdo compacto: navegacion profesional y asistente menos pesado. */
.yt-layout {
  grid-template-columns: 208px minmax(0, 1fr) var(--rightbar-width) !important;
}

.yt-sidebar {
  gap: 10px !important;
  padding: 10px 9px !important;
  background:
    linear-gradient(180deg, rgba(7, 8, 9, 0.98), rgba(7, 8, 9, 0.98)) !important;
  border-right: 1px solid rgba(199, 165, 75, 0.10) !important;
}

.module-nav-list {
  gap: 4px !important;
  padding: 0 !important;
}

.module-nav {
  min-height: 40px !important;
  gap: 9px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #cad4cf !important;
  box-shadow: none !important;
}

.module-nav-icon {
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  border-radius: 7px !important;
  background: rgba(244, 247, 245, 0.075) !important;
  color: #e0c765 !important;
}

.module-nav-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.module-nav-copy {
  gap: 1px !important;
  min-width: 0 !important;
}

.module-nav-copy strong {
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.module-nav-copy small {
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #9da8a3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.module-nav:hover:not(.is-active) {
  background: rgba(244, 247, 245, 0.045) !important;
  border-color: rgba(199, 165, 75, 0.16) !important;
  color: #e0c765 !important;
  transform: none !important;
}

.module-nav.is-active {
  background: linear-gradient(90deg, rgba(36, 180, 126, 0.20), rgba(199, 165, 75, 0.08)) !important;
  border-color: rgba(199, 165, 75, 0.34) !important;
  color: #f4f7f5 !important;
  box-shadow: inset 2px 0 0 var(--brand-gold) !important;
}

.module-nav.is-active .module-nav-icon {
  background: #e0c765 !important;
  color: #12171a !important;
}

.smart-chat-shell.smart-intake-panel {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  border-color: rgba(199, 165, 75, 0.16) !important;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.95), rgba(7, 8, 9, 0.98)) !important;
}

.smart-chat-head {
  min-height: 28px !important;
}

.smart-chat-title-group {
  gap: 8px !important;
}

.smart-chat-badge {
  width: 25px !important;
  height: 25px !important;
  border-radius: 7px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em !important;
}

.smart-chat-title-group strong {
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
}

.smart-chat-thread {
  gap: 6px !important;
}

.smart-chat-message {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 7px !important;
}

.smart-chat-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  font-size: 0.6875rem !important;
}

.smart-chat-bubble {
  gap: 4px !important;
  padding: 8px 9px !important;
  border-radius: 10px !important;
  background: rgba(157, 168, 163, 0.05) !important;
  border-color: rgba(244, 247, 245, 0.10) !important;
}

.smart-chat-bubble-user {
  background: rgba(199, 165, 75, 0.045) !important;
  border-color: rgba(199, 165, 75, 0.16) !important;
}

.smart-chat-label {
  font-size: 0.6875rem !important;
  letter-spacing: 0.12em !important;
  color: #9da8a3 !important;
}

.smart-chat-bubble p,
.smart-chat-bubble strong {
  font-size: 0.75rem !important;
  line-height: 1.32 !important;
}

.smart-chat-composer {
  gap: 5px !important;
}

.smart-chat-composer-label {
  font-size: 0.6875rem !important;
  color: #e0c765 !important;
}

.smart-chat-composer textarea {
  min-height: 74px !important;
  max-height: 128px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  font-size: 0.75rem !important;
  line-height: 1.38 !important;
}

.smart-chat-actions {
  gap: 6px !important;
}

.smart-chat-actions .primary-button,
.smart-chat-actions .secondary-button {
  min-height: 34px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
  font-size: 0.75rem !important;
}

@media (max-width: 1280px) {
  .yt-layout {
    grid-template-columns: 196px minmax(0, 1fr) var(--rightbar-width) !important;
  }
}

/* Asistente como panel operativo compacto, no como chat estirado. */
.smart-chat-shell.smart-intake-panel {
  padding: 9px !important;
  gap: 7px !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.99)) !important;
}

.smart-chat-head {
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(199, 165, 75, 0.12) !important;
}

.smart-chat-title-group {
  width: 100% !important;
}

.smart-chat-title-group > div {
  min-width: 0 !important;
}

.smart-chat-badge {
  width: 23px !important;
  height: 23px !important;
  border-radius: 6px !important;
  font-size: 0.6875rem !important;
}

.smart-chat-title-group strong {
  font-size: 0.75rem !important;
  letter-spacing: 0 !important;
}

.smart-chat-thread {
  gap: 5px !important;
}

.smart-chat-message {
  display: block !important;
}

.smart-chat-avatar {
  display: none !important;
}

.smart-chat-bubble {
  min-height: 32px !important;
  gap: 3px !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
  background: rgba(244, 247, 245, 0.026) !important;
  border-color: rgba(244, 247, 245, 0.095) !important;
}

.smart-chat-bubble-user {
  background: rgba(199, 165, 75, 0.035) !important;
}

.smart-chat-label {
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.10em !important;
}

.smart-chat-bubble p,
.smart-chat-bubble strong {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

#smart-intake-user-preview,
#smart-intake-detected,
#smart-intake-plan-status,
#smart-intake-ai-status {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

.smart-chat-shell #smart-intake-summary,
.smart-chat-shell #smart-intake-plan-detail,
.smart-chat-shell #smart-intake-ai-detail {
  display: none !important;
}

.smart-chat-composer {
  margin-top: 2px !important;
}

.smart-chat-composer-label {
  font-size: 0.6875rem !important;
  letter-spacing: 0.02em !important;
}

.smart-chat-composer textarea {
  min-height: 62px !important;
  max-height: 108px !important;
  padding: 8px 9px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
}

.smart-client-spec-composer textarea {
  min-height: 52px !important;
  max-height: 92px !important;
}

.smart-client-spec-file {
  width: 100% !important;
  min-height: 28px !important;
  padding: 5px 6px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(199, 165, 75, 0.16) !important;
  background: rgba(244, 247, 245, 0.04) !important;
  color: #e0c765 !important;
  font-size: 0.6875rem !important;
}

#smart-client-spec-file-status {
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
}

.smart-chat-actions {
  gap: 5px !important;
}

.smart-chat-actions .primary-button,
.smart-chat-actions .secondary-button {
  min-height: 31px !important;
  padding: 5px 7px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  box-shadow: none !important;
}

#smart-intake-run {
  grid-column: 1 / -1 !important;
}

.smart-chat-actions .smart-review-button {
  background: linear-gradient(135deg, #24b47e 0%, #24b47e 55%, #24b47e 100%) !important;
  color: #50d19a !important;
  border-color: rgba(80, 209, 154, 0.24) !important;
}

.smart-chat-actions .smart-review-button:disabled {
  cursor: wait !important;
  filter: saturate(0.7) brightness(0.86) !important;
}

/* Asistente IA acoplado al panel derecho para revision y trazabilidad. */
.yt-right-panel .smart-intake-panel-right.smart-chat-shell {
  display: grid !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(199, 165, 75, 0.22) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 165, 75, 0.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(36, 180, 126, 0.20), transparent 32%),
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 245, 0.05),
    0 18px 42px rgba(7, 8, 9, 0.34) !important;
}

body.sidebar-collapsed .yt-right-panel .smart-intake-panel-right {
  display: grid !important;
}

.smart-intake-panel-right .smart-chat-head {
  padding-bottom: 9px !important;
  border-bottom: 1px solid rgba(199, 165, 75, 0.18) !important;
}

.smart-intake-panel-right .smart-chat-title-group small {
  display: block !important;
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
}

.smart-intake-panel-right .smart-chat-thread {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.smart-intake-panel-right .smart-chat-message {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 8px !important;
}

.smart-intake-panel-right .smart-chat-message-user,
.smart-intake-panel-right .smart-chat-message-ai-review {
  grid-column: 1 / -1 !important;
}

.smart-intake-panel-right .smart-chat-avatar {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  border-radius: 8px !important;
  font-size: 0.6875rem !important;
}

.smart-intake-panel-right .smart-chat-bubble {
  min-height: 46px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

.smart-intake-panel-right .smart-chat-label {
  font-size: 0.6875rem !important;
  color: #e0c765 !important;
}

.smart-intake-panel-right .smart-chat-bubble p,
.smart-intake-panel-right .smart-chat-bubble strong {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

.smart-intake-panel-right #smart-intake-user-preview,
.smart-intake-panel-right #smart-intake-detected,
.smart-intake-panel-right #smart-intake-plan-status,
.smart-intake-panel-right #smart-intake-ai-status {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

.smart-intake-panel-right #smart-intake-summary,
.smart-intake-panel-right #smart-intake-plan-detail,
.smart-intake-panel-right #smart-intake-ai-detail {
  display: block !important;
  margin-top: 3px !important;
  color: #cad4cf !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

.smart-intake-panel-right #smart-intake-ai-detail {
  color: #e0c765 !important;
}

.smart-intake-panel-right .smart-chat-composer {
  gap: 6px !important;
}

.smart-intake-panel-right .smart-chat-composer-label {
  font-size: 0.6875rem !important;
  color: #e0c765 !important;
}

.smart-intake-panel-right .smart-chat-composer textarea {
  min-height: 84px !important;
  max-height: 170px !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  line-height: 1.42 !important;
}

.smart-intake-panel-right .smart-client-spec-composer textarea {
  min-height: 72px !important;
  max-height: 132px !important;
}

.smart-intake-panel-right .smart-client-spec-file {
  min-height: 32px !important;
  border-radius: 9px !important;
  font-size: 0.6875rem !important;
}

.smart-intake-panel-right #smart-client-spec-file-status {
  font-size: 0.6875rem !important;
}

.smart-intake-panel-right .smart-chat-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.smart-intake-panel-right #smart-intake-run {
  grid-column: auto !important;
}

.smart-intake-panel-right .smart-chat-actions .primary-button,
.smart-intake-panel-right .smart-chat-actions .secondary-button {
  min-height: 36px !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  font-size: 0.6875rem !important;
}

.assistant-tab-host {
  display: block !important;
  min-width: 0 !important;
}

.assistant-builder-panel .smart-intake-panel-tab.smart-chat-shell {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(199, 165, 75, 0.22) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 165, 75, 0.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(36, 180, 126, 0.20), transparent 32%),
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 245, 0.05),
    0 18px 42px rgba(7, 8, 9, 0.30) !important;
}

body.sidebar-collapsed .assistant-builder-panel .smart-intake-panel-tab {
  display: grid !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-head {
  padding-bottom: 9px !important;
  border-bottom: 1px solid rgba(199, 165, 75, 0.18) !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-title-group small {
  display: block !important;
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-thread {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-message {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 8px !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-message-user,
.assistant-builder-panel .smart-intake-panel-tab .smart-chat-message-ai-review {
  grid-column: 1 / -1 !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-avatar {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  border-radius: 8px !important;
  font-size: 0.6875rem !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-bubble {
  min-height: 46px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-label {
  font-size: 0.6875rem !important;
  color: #e0c765 !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-bubble p,
.assistant-builder-panel .smart-intake-panel-tab .smart-chat-bubble strong {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

.assistant-builder-panel .smart-intake-panel-tab #smart-intake-user-preview,
.assistant-builder-panel .smart-intake-panel-tab #smart-intake-detected,
.assistant-builder-panel .smart-intake-panel-tab #smart-intake-plan-status,
.assistant-builder-panel .smart-intake-panel-tab #smart-intake-ai-status {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

.assistant-builder-panel .smart-intake-panel-tab #smart-intake-summary,
.assistant-builder-panel .smart-intake-panel-tab #smart-intake-plan-detail,
.assistant-builder-panel .smart-intake-panel-tab #smart-intake-ai-detail {
  display: block !important;
  margin-top: 3px !important;
  color: #cad4cf !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

.assistant-builder-panel .smart-intake-panel-tab #smart-intake-ai-detail {
  color: #e0c765 !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-composer {
  gap: 6px !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-composer-label {
  font-size: 0.6875rem !important;
  color: #e0c765 !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-composer textarea {
  min-height: 84px !important;
  max-height: 170px !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  line-height: 1.42 !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-client-spec-composer textarea {
  min-height: 72px !important;
  max-height: 132px !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-client-spec-file {
  min-height: 32px !important;
  border-radius: 9px !important;
  font-size: 0.6875rem !important;
}

.assistant-builder-panel .smart-intake-panel-tab #smart-client-spec-file-status {
  font-size: 0.6875rem !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.assistant-builder-panel .smart-intake-panel-tab #smart-intake-run {
  grid-column: auto !important;
}

.assistant-builder-panel .smart-intake-panel-tab .smart-chat-actions .primary-button,
.assistant-builder-panel .smart-intake-panel-tab .smart-chat-actions .secondary-button {
  min-height: 36px !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  font-size: 0.6875rem !important;
}

.smart-review-console {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.smart-review-result {
  display: grid !important;
  gap: 5px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(199, 165, 75, 0.20) !important;
  background: rgba(199, 165, 75, 0.055) !important;
}

.smart-review-result[data-status="match"] {
  border-color: rgba(80, 209, 154, 0.32) !important;
  background: rgba(36, 180, 126, 0.42) !important;
}

.smart-review-result[data-status="mismatch"] {
  border-color: rgba(239, 114, 114, 0.34) !important;
  background: rgba(239, 114, 114, 0.42) !important;
}

.smart-review-result[data-status="pending"],
.smart-review-result[data-status="info"] {
  border-color: rgba(89, 168, 232, 0.28) !important;
  background: rgba(89, 168, 232, 0.38) !important;
}

.smart-review-kicker,
.smart-review-context dt {
  color: #e0c765 !important;
  font-size: 0.6875rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.smart-review-result strong {
  color: #f4f7f5 !important;
  font-size: 0.875rem !important;
  line-height: 1.3 !important;
}

.smart-review-result small {
  color: #e0c765 !important;
  font-size: 0.6875rem !important;
  line-height: 1.38 !important;
}

.smart-review-context {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(157, 168, 163, 0.10) !important;
  border-radius: 12px !important;
  background: rgba(244, 247, 245, 0.025) !important;
  overflow: hidden !important;
}

.smart-review-context > div {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 9px 10px !important;
  border-bottom: 1px solid rgba(244, 247, 245, 0.07) !important;
  background: transparent !important;
}

.smart-review-context > div:last-child {
  border-bottom: 0 !important;
}

.smart-review-context dd {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: #f4f7f5 !important;
  font-size: 0.75rem !important;
  line-height: 1.34 !important;
}

.smart-review-context strong {
  color: #f4f7f5 !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

.smart-review-context small {
  display: block !important;
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
  line-height: 1.32 !important;
}

.smart-review-context .smart-chat-label {
  display: none !important;
}

.smart-checklist-list,
.smart-art-summary-list,
.smart-chat-history {
  display: grid !important;
  gap: 8px !important;
}

.smart-checklist-item,
.smart-art-summary-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(157, 168, 163, 0.10) !important;
  background: rgba(244, 247, 245, 0.03) !important;
}

.smart-checklist-item[data-status="ok"],
.smart-art-summary-item[data-status="ok"] {
  border-color: rgba(80, 209, 154, 0.30) !important;
  background: rgba(36, 180, 126, 0.34) !important;
}

.smart-checklist-item[data-status="fail"],
.smart-art-summary-item[data-status="fail"] {
  border-color: rgba(239, 114, 114, 0.32) !important;
  background: rgba(239, 114, 114, 0.36) !important;
}

.smart-checklist-item[data-status="warn"],
.smart-art-summary-item[data-status="warn"] {
  border-color: rgba(224, 199, 101, 0.30) !important;
  background: rgba(199, 165, 75, 0.36) !important;
}

.smart-checklist-item[data-status="info"],
.smart-art-summary-item[data-status="info"] {
  border-color: rgba(89, 168, 232, 0.28) !important;
  background: rgba(89, 168, 232, 0.36) !important;
}

.smart-checklist-icon,
.smart-art-summary-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(244, 247, 245, 0.16) !important;
  background: rgba(157, 168, 163, 0.08) !important;
  color: #f4f7f5 !important;
  font-size: 0.6875rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.smart-checklist-item[data-status="ok"] .smart-checklist-icon,
.smart-art-summary-item[data-status="ok"] .smart-art-summary-icon {
  color: #50d19a !important;
  border-color: rgba(80, 209, 154, 0.40) !important;
  background: rgba(80, 209, 154, 0.15) !important;
}

.smart-checklist-item[data-status="fail"] .smart-checklist-icon,
.smart-art-summary-item[data-status="fail"] .smart-art-summary-icon {
  color: #ef7272 !important;
  border-color: rgba(239, 114, 114, 0.42) !important;
  background: rgba(239, 114, 114, 0.14) !important;
}

.smart-checklist-item[data-status="warn"] .smart-checklist-icon,
.smart-art-summary-item[data-status="warn"] .smart-art-summary-icon {
  color: #e0c765 !important;
  border-color: rgba(224, 199, 101, 0.38) !important;
  background: rgba(224, 199, 101, 0.14) !important;
}

.smart-checklist-copy,
.smart-art-summary-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.smart-checklist-copy strong,
.smart-art-summary-copy strong {
  color: #f4f7f5 !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

.smart-checklist-copy small,
.smart-art-summary-copy small {
  color: #cad4cf !important;
  font-size: 0.6875rem !important;
  line-height: 1.34 !important;
}

.smart-review-chat-hint {
  color: #e0c765 !important;
  font-size: 0.6875rem !important;
  line-height: 1.38 !important;
}

.smart-chat-history {
  max-height: 250px !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

.smart-chat-history-empty {
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(244, 247, 245, 0.10) !important;
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
  line-height: 1.4 !important;
  background: rgba(244, 247, 245, 0.02) !important;
}

.smart-chat-entry {
  display: grid !important;
  gap: 4px !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(157, 168, 163, 0.10) !important;
  background: rgba(244, 247, 245, 0.03) !important;
}

.smart-chat-entry[data-role="user"] {
  border-color: rgba(199, 165, 75, 0.22) !important;
  background: rgba(199, 165, 75, 0.08) !important;
}

.smart-chat-entry[data-role="assistant"] {
  border-color: rgba(36, 180, 126, 0.22) !important;
  background: rgba(36, 180, 126, 0.08) !important;
}

.smart-chat-entry-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.smart-chat-entry-head strong {
  color: #f4f7f5 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.smart-chat-entry-head small {
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
}

.smart-chat-entry-body {
  color: #e0c765 !important;
  font-size: 0.75rem !important;
  line-height: 1.42 !important;
  white-space: pre-wrap !important;
}

.smart-chat-actions-chat {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Header operativo: buscador estable y sesion visible */
.builder-tabs[hidden] {
  display: none !important;
}

.yt-header {
  grid-template-columns: minmax(220px, 270px) minmax(360px, 1fr) auto !important;
  gap: 12px !important;
}

.header-center {
  min-width: 0 !important;
  padding: 0 8px !important;
}

.search-bar {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  min-width: 320px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 4px 0 13px !important;
  gap: 8px !important;
  overflow: visible !important;
  align-items: center !important;
}

.search-bar input {
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.search-btn {
  flex: 0 0 auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.header-right {
  width: auto !important;
  min-width: 390px !important;
  gap: 8px !important;
}

.session-button {
  display: inline-grid;
  grid-template-columns: 28px minmax(86px, 124px) auto;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 222px;
  padding: 4px 8px 4px 6px;
  color: #e0c765;
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.98), rgba(12, 15, 17, 0.98));
  border: 1px solid rgba(224, 199, 101, 0.34);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(157, 168, 163, 0.10), 0 8px 20px rgba(7, 8, 9, 0.24);
  cursor: pointer;
}

.session-button:hover,
.session-button:focus-visible {
  border-color: rgba(224, 199, 101, 0.7);
  background: linear-gradient(180deg, rgba(27, 35, 39, 0.98), rgba(18, 23, 26, 0.98));
  outline: none;
}

.session-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #c7a54b;
  background: #e0c765;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0;
}

.session-info {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: left;
}

.session-info strong,
.session-info small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.session-info strong {
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
}

.session-info small {
  color: rgba(244, 247, 245, 0.62);
  font-size: 0.6875rem;
  font-weight: 700;
}

.session-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  color: #0c0f11;
  background: #e0c765;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .yt-header {
    grid-template-columns: minmax(190px, 230px) minmax(260px, 1fr) auto !important;
  }

  .header-right {
    min-width: 320px !important;
  }

  .session-button {
    grid-template-columns: 26px auto;
    min-width: 148px;
  }

  .session-exit {
    display: none;
  }
}

/* Clientes: CRM en una sola tabla */
#panel-clientes .client-module-grid {
  display: block !important;
}

#panel-clientes .clients-save-block,
#panel-clientes > .client-module-grid > .client-explorer-block,
#panel-clientes #ficha-center-dashboard,
#panel-clientes #client-record-meta {
  display: none !important;
}

#panel-clientes .clients-inventory-block {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 155px);
  padding: 20px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)) !important;
  border-color: rgba(224, 199, 101, 0.18) !important;
}

#panel-clientes .clients-inventory-block > .block-head {
  align-items: center !important;
  padding-bottom: 14px !important;
}

#panel-clientes .clients-inventory-block .block-head h3 {
  font-size: 1.125rem !important;
}

#panel-clientes .inventory-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
}

#panel-clientes .inventory-summary-card,
#panel-clientes .inventory-summary-card-wide {
  min-width: 0 !important;
  border-radius: 12px !important;
  background: rgba(12, 15, 17, 0.92) !important;
  border-color: rgba(224, 199, 101, 0.16) !important;
}

#panel-clientes .inventory-summary-card strong {
  color: #e0c765 !important;
  font-size: 1.3125rem !important;
  letter-spacing: 0 !important;
}

#panel-clientes .inventory-filters-shell {
  border-radius: 14px !important;
  background: rgba(7, 8, 9, 0.92) !important;
  border-color: rgba(157, 168, 163, 0.10) !important;
}

#panel-clientes .clients-inventory-block .inventory-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(140px, 180px) minmax(140px, 180px) auto !important;
}

#panel-clientes .clients-inventory-block .inventory-toolbar input,
#panel-clientes .clients-inventory-block .inventory-toolbar select {
  height: 38px !important;
  border-radius: 10px !important;
  background: #070809 !important;
}

#panel-clientes #client-inventory-search {
  width: 100% !important;
  max-width: none !important;
}

#panel-clientes .clients-inventory-block .inventory-table-wrap {
  border-radius: 14px !important;
  border-color: rgba(157, 168, 163, 0.10) !important;
  background: #070809 !important;
}

#panel-clientes .clients-inventory-block .inventory-table {
  min-width: 1120px !important;
  table-layout: fixed !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px !important;
  background: #0c0f11 !important;
  color: #e0c765 !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(1) {
  width: 56px !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(2) {
  width: 24% !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(3) {
  width: 13% !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(4) {
  width: 31% !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(5) {
  width: 20% !important;
}

#panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(6) {
  width: 190px !important;
}

#panel-clientes .clients-inventory-block .inventory-table td {
  padding: 13px 14px !important;
  background: rgba(7, 8, 9, 0.98) !important;
  border-top-color: rgba(157, 168, 163, 0.08) !important;
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr:hover td {
  background: rgba(18, 23, 26, 0.98) !important;
}

#panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active td {
  background: linear-gradient(180deg, rgba(199, 165, 75, 0.98), rgba(12, 15, 17, 0.98)) !important;
}

#panel-clientes .inventory-count-cell {
  display: grid;
  gap: 4px;
}

#panel-clientes .inventory-count-main {
  color: #e0c765;
  font-size: 1.125rem;
  line-height: 1.3;
}

#panel-clientes .inventory-count-cell span,
#panel-clientes .inventory-count-cell small {
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.35;
}

#panel-clientes .inventory-client-main,
#panel-clientes .inventory-reference-main,
#panel-clientes .inventory-date-main {
  color: #f4f7f5 !important;
  letter-spacing: 0 !important;
}

#panel-clientes .inventory-client-sub,
#panel-clientes .inventory-reference-sub,
#panel-clientes .inventory-updated-at {
  color: #9da8a3 !important;
}

#panel-clientes .inventory-type-pill,
#panel-clientes .inventory-date-pill,
#panel-clientes .inventory-history-pill {
  border-radius: 999px !important;
  background: rgba(224, 199, 101, 0.1) !important;
  border-color: rgba(224, 199, 101, 0.18) !important;
  color: #e0c765 !important;
  letter-spacing: 0 !important;
}

#panel-clientes .inventory-actions {
  min-width: 0 !important;
  justify-content: flex-end;
  gap: 6px !important;
}

#panel-clientes .inventory-actions .table-action {
  min-width: auto !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  font-size: 0.75rem !important;
}

@media (max-width: 1180px) {
  #panel-clientes .inventory-summary-strip,
  #panel-clientes .clients-inventory-block .inventory-toolbar {
    grid-template-columns: 1fr !important;
  }
}

#panel-clientes .clients-inventory-block .inventory-toolbar {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto !important;
  align-items: end !important;
  gap: 10px !important;
}

@media (max-width: 980px) {
  #panel-clientes .clients-inventory-block .inventory-toolbar {
    grid-template-columns: 1fr !important;
  }

  #panel-clientes .inventory-filter-search {
    min-width: 0;
  }
}

/* Clientes debe sentirse como CRM de ancho completo, no como ficha dentro de una hoja. */
body[data-active-module="clientes"].module-wide .yt-layout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-module="clientes"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

body[data-active-module="clientes"] .yt-right-panel {
  display: none !important;
}

body[data-active-module="clientes"] .yt-main-content {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="clientes"] .editor-shell.controls-panel {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="clientes"] .editor-panels,
body[data-active-module="clientes"] #panel-clientes,
body[data-active-module="clientes"] #panel-clientes .client-module-grid {
  width: 100% !important;
  max-width: none !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block {
  min-height: calc(100vh - var(--header-height) - 36px) !important;
  padding: 18px 22px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head {
  padding-inline: 2px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card,
body[data-active-module="clientes"] #panel-clientes .inventory-filters-shell,
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table-wrap {
  border-radius: 12px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table {
  min-width: 1180px !important;
}

/* Detalle del cliente: vista CRM limpia, sin doble panel ni tarjetas pesadas. */
body[data-active-module="cliente-detalle"].module-wide .yt-layout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-module="cliente-detalle"] .yt-right-panel {
  display: none !important;
}

body[data-active-module="cliente-detalle"] .yt-main-content,
body[data-active-module="cliente-detalle"] .editor-shell.controls-panel {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="cliente-detalle"] .editor-panels,
body[data-active-module="cliente-detalle"] #panel-cliente-detalle,
body[data-active-module="cliente-detalle"] .client-detail-layout,
body[data-active-module="cliente-detalle"] .client-detail-explorer-host {
  width: 100% !important;
  max-width: none !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-detail-layout {
  display: block !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-detail-summary-block {
  display: none !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-block {
  width: 100% !important;
  min-height: calc(100vh - var(--header-height) - 36px) !important;
  padding: 18px 22px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-block .block-head {
  align-items: center !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(224, 199, 101, 0.18) !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-block .block-head h3 {
  margin: 0 !important;
  color: #e0c765 !important;
  font-size: 1.125rem !important;
  letter-spacing: 0 !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-block .block-head .module-help {
  margin-top: 4px !important;
  color: #9da8a3 !important;
  font-size: 0.8125rem !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle #close-client-explorer {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle #close-client-explorer,
body[data-active-module="cliente-detalle"] #panel-cliente-detalle #client-detail-back {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(224, 199, 101, 0.14) !important;
  background: rgba(12, 15, 17, 0.94) !important;
  color: #e0c765 !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle #close-client-explorer:hover,
body[data-active-module="cliente-detalle"] #panel-cliente-detalle #close-client-explorer:focus-visible,
body[data-active-module="cliente-detalle"] #panel-cliente-detalle #client-detail-back:hover,
body[data-active-module="cliente-detalle"] #panel-cliente-detalle #client-detail-back:focus-visible {
  border-color: rgba(80, 209, 154, 0.22) !important;
  background: rgba(18, 23, 26, 0.96) !important;
  color: #50d19a !important;
  box-shadow: 0 0 0 1px rgba(80, 209, 154, 0.1) !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-grid {
  display: grid !important;
  grid-template-columns: minmax(440px, 0.9fr) minmax(520px, 1.1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-column {
  min-width: 0 !important;
  scroll-margin-top: calc(var(--header-height) + 12px);
  padding: 14px !important;
  border: 1px solid rgba(244, 247, 245, 0.05) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(7, 8, 9, 0.9) 0%, rgba(7, 8, 9, 0.98) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.02) !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-column:last-child {
  position: sticky;
  top: calc(var(--header-height) + 12px);
  align-self: start;
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-subhead {
  align-items: flex-start !important;
  min-height: 38px !important;
  margin-bottom: 10px !important;
  padding: 0 2px 12px !important;
  border-bottom: 1px solid rgba(157, 168, 163, 0.10) !important;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-subhead strong {
  color: #e0c765 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

.client-explorer-subhead-copy {
  display: grid;
  gap: 4px;
}

.client-explorer-history-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.client-explorer-back-button {
  display: none;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(224, 199, 101, 0.14);
  border-radius: 8px;
  background: rgba(224, 199, 101, 0.055);
  color: #e0c765;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}

.client-explorer-subhint {
  margin: 0;
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.4;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-subhead span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 280px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(224, 199, 101, 0.14);
  border-radius: 999px;
  background: rgba(224, 199, 101, 0.06);
  color: #e0c765 !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  line-height: 1.35;
}

.client-fichas-table-wrap,
.client-versions-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7, 8, 9, 0.98) 0%, rgba(7, 8, 9, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.02);
}

.client-explorer-filter {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
}

.client-explorer-filter-field {
  display: grid;
  gap: 6px;
}

.client-explorer-filter-field span {
  color: #e0c765;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.client-explorer-filter-field .search-input {
  min-height: 40px;
}

.client-explorer-filter-meta {
  padding-left: 2px;
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.35;
}

.client-explorer-empty-state {
  padding: 18px 20px;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 12px;
  background: #070809;
}

.client-reference-groups {
  display: grid;
  gap: 14px;
}

.client-reference-group {
  border: 1px solid rgba(157, 168, 163, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(7, 8, 9, 0.96) 0%, rgba(7, 8, 9, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.02);
  overflow: hidden;
}

.client-reference-group.is-active {
  border-color: rgba(80, 209, 154, 0.22);
  box-shadow: 0 0 0 1px rgba(80, 209, 154, 0.08), 0 18px 38px rgba(7, 8, 9, 0.2), inset 0 1px 0 rgba(244, 247, 245, 0.02);
}

.client-reference-group-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid rgba(157, 168, 163, 0.08);
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.96) 0%, rgba(7, 8, 9, 0.96) 100%);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.client-reference-group-head:hover {
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.98) 0%, rgba(12, 15, 17, 0.98) 100%);
}

.client-reference-group.is-active .client-reference-group-head {
  border-bottom-color: rgba(80, 209, 154, 0.16);
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.98) 0%, rgba(36, 180, 126, 0.98) 100%);
}

.client-reference-group.is-collapsed .client-reference-group-head {
  border-bottom-color: transparent;
}

.client-reference-group-head-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.client-reference-group-head-side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.client-reference-group-head strong {
  display: block;
  color: #f4f7f5;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.client-reference-group-head small {
  display: none;
}

.client-reference-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-reference-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 999px;
  background: rgba(244, 247, 245, 0.02);
  color: #9da8a3;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
}

.client-reference-group.is-active .client-reference-meta-pill {
  border-color: rgba(80, 209, 154, 0.14);
  background: rgba(80, 209, 154, 0.08);
  color: #50d19a;
}

.client-reference-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(224, 199, 101, 0.18);
  border-radius: 999px;
  background: rgba(224, 199, 101, 0.08);
  color: #e0c765;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-reference-group.is-active .client-reference-group-badge {
  border-color: rgba(80, 209, 154, 0.22);
  background: rgba(80, 209, 154, 0.16);
  color: #50d19a;
}

.client-reference-group-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(224, 199, 101, 0.85);
  border-bottom: 2px solid rgba(224, 199, 101, 0.85);
  transform: rotate(45deg);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.client-reference-group.is-active .client-reference-group-chevron {
  border-right-color: rgba(80, 209, 154, 0.92);
  border-bottom-color: rgba(80, 209, 154, 0.92);
}

.client-reference-group.is-collapsed .client-reference-group-chevron {
  transform: rotate(-45deg);
}

.client-reference-codes-wrap {
  border: 0;
  border-top: 1px solid rgba(244, 247, 245, 0.04);
  border-radius: 0 0 18px 18px;
  background: rgba(36, 180, 126, 0.46);
}

.client-fichas-table,
.client-versions-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.client-reference-codes-table {
  min-width: 620px;
}

.client-fichas-table th,
.client-versions-table th {
  padding: 12px 14px;
  background: #0c0f11;
  color: #e0c765;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
}

.client-fichas-table td,
.client-versions-table td {
  padding: 13px 14px;
  border-top: 1px solid rgba(157, 168, 163, 0.08);
  color: #e0c765;
  font-size: 0.8125rem;
  vertical-align: middle;
  line-height: 1.35;
}

.client-fichas-table tbody tr {
  cursor: pointer;
}

.client-fichas-table tbody tr:hover td,
.client-versions-table tbody tr:hover td {
  background: rgba(244, 247, 245, 0.025);
}

.client-fichas-table tbody tr.is-active td {
  background: rgba(36, 180, 126, 0.18);
}

.client-fichas-table tbody tr.is-active td:first-child {
  box-shadow: inset 3px 0 0 #50d19a;
}

.client-fichas-table strong,
.client-versions-table strong {
  display: block;
  color: #f4f7f5;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.client-fichas-table small,
.client-versions-table small {
  display: block;
  margin-top: 3px;
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.35;
}

.client-fichas-table td:nth-child(2),
.client-fichas-table td:nth-child(3),
.client-fichas-table td:nth-child(4),
.client-fichas-table td:nth-child(5),
.client-fichas-table th:nth-child(2),
.client-fichas-table th:nth-child(3),
.client-fichas-table th:nth-child(4),
.client-fichas-table th:nth-child(5) {
  white-space: nowrap;
}

.client-reference-codes-table th:last-child,
.client-reference-codes-table td:last-child {
  width: 150px;
  text-align: right;
}

.client-ficha-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.client-versions-table td:last-child {
  text-align: right;
}

.client-active-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 14px 15px;
  border: 1px solid rgba(80, 209, 154, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.88) 0%, rgba(36, 180, 126, 0.94) 100%);
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.02);
}

.client-active-strip-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.client-active-strip-side {
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.client-active-strip-side .client-center-assets {
  flex: 1 1 100%;
  max-width: 360px !important;
}

.client-active-strip-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(80, 209, 154, 0.2);
  border-radius: 999px;
  background: rgba(80, 209, 154, 0.14);
  color: #50d19a;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-active-strip span {
  color: #50d19a;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.client-active-strip strong {
  display: block;
  color: #f4f7f5;
  font-size: 1rem;
  font-weight: 700;
}

.client-active-strip small {
  display: block;
  color: #9da8a3;
  font-size: 0.75rem;
}

body[data-active-module="cliente-detalle"] .client-center-assets {
  justify-content: flex-end;
  gap: 7px;
  max-width: 440px;
}

body[data-active-module="cliente-detalle"] .client-center-asset-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(80, 209, 154, 0.14) !important;
  background: rgba(80, 209, 154, 0.09) !important;
  color: #50d19a !important;
}

body[data-active-module="cliente-detalle"] .client-center-asset-chip.is-muted {
  border-color: rgba(157, 168, 163, 0.10) !important;
  background: rgba(244, 247, 245, 0.03) !important;
  color: #9da8a3 !important;
}

body[data-active-module="cliente-detalle"] .client-versions-table .table-action {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(80, 209, 154, 0.18) !important;
  background: rgba(36, 180, 126, 0.78) !important;
  color: #50d19a !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
}

body[data-active-module="cliente-detalle"] .client-current-open-action {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(80, 209, 154, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(36, 180, 126, 0.16) !important;
  color: #50d19a !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body[data-active-module="cliente-detalle"] .client-current-open-action:hover,
body[data-active-module="cliente-detalle"] .client-current-open-action:focus-visible {
  border-color: rgba(80, 209, 154, 0.32) !important;
  background: rgba(36, 180, 126, 0.28) !important;
  color: #f4f7f5 !important;
}

body[data-active-module="cliente-detalle"] .client-versions-table .table-action:hover,
body[data-active-module="cliente-detalle"] .client-versions-table .table-action:focus-visible,
body[data-active-module="cliente-detalle"] .history-entry-actions .table-action:hover,
body[data-active-module="cliente-detalle"] .history-entry-actions .table-action:focus-visible {
  border-color: rgba(80, 209, 154, 0.32) !important;
  background: rgba(36, 180, 126, 0.9) !important;
  color: #f4f7f5 !important;
  box-shadow: 0 0 0 1px rgba(80, 209, 154, 0.1) !important;
}

body[data-active-module="cliente-detalle"] .history-entry-actions .table-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

body[data-active-module="cliente-detalle"] .client-versions-table .table-action .table-action-icon,
body[data-active-module="cliente-detalle"] .history-entry-actions .table-action .table-action-icon {
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-active-module="cliente-detalle"] .client-versions-table .table-action .table-action-icon svg,
body[data-active-module="cliente-detalle"] .history-entry-actions .table-action .table-action-icon svg {
  display: block !important;
}

/* Configuracion: usuarios locales y firmas automaticas */
.config-users-block {
  grid-column: 1 / -1;
}

/* Administracion de usuarios: firma, rol y acciones.

   La columna de la firma ensenaba un texto; ahora ensena la firma. Se le pone
   fondo claro porque las firmas son PNG con transparencia sobre trazo negro, y
   sobre el fondo oscuro de la aplicacion no se verian. */
.config-user-firma {
  display: block;
  max-width: 120px;
  max-height: 34px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.config-user-firma-heredada,
.config-user-firma-vacia {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* La que viene del codigo y no de la base se marca, para que se vea de un
   vistazo a quien le falta subir la suya. */
.config-user-firma-heredada {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.config-row-role {
  max-width: 150px;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.82rem;
}

/* La columna de acciones paso de un boton a tres, y con el ancho de antes los
   botones se apilaban en columnas de una letra. Se les da sitio y la tabla, que
   ya sabe desplazarse en horizontal, se ensancha lo que haga falta. */
.config-row-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}

.config-row-acciones .config-row-menu {
  white-space: nowrap;
}

/* Desactivar a alguien lo saca de la aplicacion en el acto: el boton no se
   confunde con los de al lado. */
.config-row-menu.es-peligro {
  border-color: rgba(220, 38, 38, 0.55);
  color: #fca5a5;
}

.inventory-history-pill.es-inactivo {
  opacity: 0.6;
  text-decoration: line-through;
}

.local-users-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 12px;
  background: #070809;
}

.local-users-table {
  width: 100%;
  /* 820 se quedo corto al anadir el selector de rol y los tres botones. */
  min-width: 1080px;
  border-collapse: collapse;
}

.local-users-table th {
  padding: 10px 12px;
  background: #0c0f11;
  color: #e0c765;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.local-users-table td {
  padding: 12px;
  border-top: 1px solid rgba(157, 168, 163, 0.08);
  color: #e0c765;
  vertical-align: middle;
}

.local-users-table strong,
.local-users-table small {
  display: block;
}

.local-users-table small {
  margin-top: 3px;
  color: #9da8a3;
}

.local-users-table code {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(224, 199, 101, 0.18);
  border-radius: 8px;
  background: rgba(224, 199, 101, 0.08);
  color: #e0c765;
  font-family: "Roboto Mono", Consolas, monospace;
  font-size: 0.75rem;
}

.local-password-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(157, 168, 163, 0.10);
}

.local-password-status[data-status="error"] {
  color: #ef7272 !important;
}

.local-password-status[data-status="success"] {
  color: #50d19a !important;
}

/* Lo que el formulario responde tiene que leerse.

   No basta con el color: en un panel oscuro y denso una linea de texto mas se
   pierde. Error y aviso van con fondo y borde para que se vean como una
   respuesta y no como texto de ayuda. */
.local-password-status,
#local-backup-status {
  display: block;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.local-password-status[data-status="error"],
.local-password-status[data-status="warning"] {
  border-color: rgba(239, 114, 114, 0.38);
  background: rgba(239, 114, 114, 0.10);
}

.local-password-status[data-status="warning"] {
  border-color: rgba(224, 199, 101, 0.38);
  background: rgba(224, 199, 101, 0.10);
  color: #e0c765 !important;
}

.local-password-status[data-status="success"] {
  border-color: rgba(80, 209, 154, 0.32);
  background: rgba(80, 209, 154, 0.09);
}

/* Configuracion por ficha tecnica */
#panel-configuracion .config-module-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 14px;
}

#panel-configuracion .config-users-block,
#panel-configuracion .config-sheet-settings,
#panel-configuracion .config-defaults-block,
#panel-configuracion .config-backup-block {
  grid-column: 1 / -1;
}

#panel-configuracion .form-block {
  border-radius: 16px;
  background: #070809;
}

.config-format-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(224, 199, 101, 0.14);
  border-bottom: 1px solid rgba(157, 168, 163, 0.10);
}

.config-format-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 2px 12px 2px 14px;
  border-left: 3px solid rgba(244, 247, 245, 0.1);
}

.config-format-item.is-active {
  border-left-color: var(--brand-gold);
}

.config-format-badge {
  display: inline-flex;
  min-width: 42px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(224, 199, 101, 0.16);
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.config-format-item strong,
.config-format-item small {
  display: block;
}

.config-format-item strong {
  color: #e0c765;
  font-size: 0.875rem;
}

.config-format-item small {
  margin-top: 4px;
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.35;
}

.config-section-caption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.10);
}

.config-field-matrix + .config-section-caption {
  margin-top: 18px;
}

.config-section-caption span {
  color: #e0c765;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.config-section-caption strong {
  color: #e0c765;
  font-size: 0.875rem;
  text-align: right;
}

.config-field-matrix,
.config-defaults-grid,
.config-food-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 12px;
}

#panel-configuracion .config-field-matrix label span,
#panel-configuracion .config-defaults-grid label span,
#panel-configuracion .config-food-grid label span,
.config-static-list > span {
  margin-bottom: 5px !important;
  color: #e0c765 !important;
  font-size: 0.75rem !important;
}

#panel-configuracion .config-field-matrix textarea,
#panel-configuracion .config-food-grid textarea {
  min-height: 96px !important;
  max-height: 124px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  font-size: 0.8125rem !important;
  line-height: 1.3;
}

#panel-configuracion .config-defaults-grid input,
#panel-configuracion .config-defaults-grid select {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
}

.config-food-grid label {
  grid-column: span 2;
}

.config-static-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 96px;
  padding: 9px 11px;
  border: 1px solid rgba(157, 168, 163, 0.10);
  border-radius: 10px;
  background: rgba(244, 247, 245, 0.025);
}

.config-static-list > span {
  display: block;
}

.config-static-list strong {
  color: #e0c765;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.config-static-list small {
  color: #9da8a3;
  font-size: 0.75rem;
  line-height: 1.35;
}

.config-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.config-action-row .primary-button,
.config-action-row .secondary-button,
.config-backup-block .toolbar-grid .primary-button,
.config-backup-block .toolbar-grid .secondary-button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

.config-backup-block .toolbar-grid {
  grid-template-columns: repeat(2, minmax(0, 180px));
}

@media (max-width: 1180px) {
  .config-format-strip,
  .config-field-matrix,
  .config-defaults-grid,
  .config-food-grid {
    grid-template-columns: 1fr;
  }

  .config-food-grid label {
    grid-column: auto;
  }

  .config-action-row,
  .config-backup-block .toolbar-grid {
    grid-template-columns: 1fr;
  }

  .config-section-caption {
    align-items: start;
    flex-direction: column;
  }

  .config-section-caption strong {
    text-align: left;
  }
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-column:first-child {
  order: 1;
}

body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-column:last-child {
  order: 2;
}

@media (max-width: 1320px) {
  body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-column:last-child {
    position: static;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-subhead {
    flex-direction: column;
  }

  body[data-active-module="cliente-detalle"] #panel-cliente-detalle .client-explorer-subhead span {
    max-width: none;
    justify-content: flex-start;
  }

  .client-explorer-history-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .client-explorer-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .client-active-strip {
    grid-template-columns: 1fr;
  }

  .client-active-strip-side {
    justify-content: flex-start;
  }

  body[data-active-module="cliente-detalle"] .client-center-assets {
    justify-content: flex-start;
  }
}

/* Configuracion debe ocupar el area completa como consola de administracion. */
body[data-active-module="configuracion"].module-wide .yt-layout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-module="configuracion"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

body[data-active-module="configuracion"] .yt-right-panel {
  display: none !important;
}

body[data-active-module="configuracion"] .yt-main-content,
body[data-active-module="configuracion"] .editor-shell.controls-panel {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="configuracion"] .editor-panels,
body[data-active-module="configuracion"] #panel-configuracion,
body[data-active-module="configuracion"] #panel-configuracion .config-module-grid {
  width: 100% !important;
  max-width: none !important;
}

body[data-active-module="configuracion"] #panel-configuracion {
  min-height: calc(100vh - var(--header-height) - 36px) !important;
  padding: 16px 22px 28px !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-module-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border: 1px solid rgba(224, 199, 101, 0.2) !important;
  border-radius: 14px !important;
  background: rgba(7, 8, 9, 0.92) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .form-block {
  padding: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-active-module="configuracion"] #panel-configuracion .block-head {
  min-height: 0 !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(157, 168, 163, 0.10) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .block-head h3 {
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .module-help {
  margin-top: 4px !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-users-block {
  grid-column: 1 / span 8 !important;
  grid-row: 1 !important;
  border-right: 1px solid rgba(224, 199, 101, 0.14) !important;
  border-bottom: 1px solid rgba(224, 199, 101, 0.14) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-defaults-block {
  grid-column: 9 / span 4 !important;
  grid-row: 1 !important;
  border-bottom: 1px solid rgba(224, 199, 101, 0.14) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-sheet-settings {
  grid-column: 1 / span 8 !important;
  grid-row: 2 !important;
  border-right: 1px solid rgba(224, 199, 101, 0.14) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-backup-block {
  grid-column: 9 / span 4 !important;
  grid-row: 2 !important;
}

body[data-active-module="configuracion"] .local-users-table-wrap {
  border-radius: 10px !important;
  background: rgba(7, 8, 9, 0.72) !important;
}

body[data-active-module="configuracion"] .local-users-table {
  /* No cabe en cualquier ancho: lleva rol, firma y tres botones. */
  min-width: 1120px !important;
}

/* Los botones de la columna de acciones llevan texto, no icono.

   .config-row-menu se diseno como un boton cuadrado de 28x28 para un menu de
   tres puntos, y en este modulo esa medida va con width y height fijos. Con un
   solo boton ya recortaba -"Restablecer clave" salia en vertical, letra a
   letra- y con tres era ilegible. Aqui se les devuelve el ancho que pida su
   texto, sin tocar el boton de icono de las otras tablas. */
body[data-active-module="configuracion"] .config-row-acciones .config-row-menu {
  width: auto !important;
  height: auto !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(244, 247, 245, 0.16) !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
}

body[data-active-module="configuracion"] .config-row-acciones .config-row-menu.es-peligro {
  border-color: rgba(220, 38, 38, 0.55) !important;
  color: #fca5a5 !important;
}

body[data-active-module="configuracion"] .local-users-table th {
  padding: 8px 10px !important;
  font-size: 0.6875rem !important;
}

body[data-active-module="configuracion"] .local-users-table td {
  padding: 9px 10px !important;
  font-size: 0.875rem !important;
}

body[data-active-module="configuracion"] .local-users-table small {
  margin-top: 2px !important;
  font-size: 0.75rem !important;
}

body[data-active-module="configuracion"] .local-users-table code {
  min-height: 23px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-size: 0.75rem !important;
}

body[data-active-module="configuracion"] .local-password-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
}

body[data-active-module="configuracion"] .local-password-form .block-head {
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

body[data-active-module="configuracion"] .local-password-form .dual-grid {
  grid-column: 1;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body[data-active-module="configuracion"] .local-password-form .toolbar-grid {
  grid-column: 2;
  align-self: end;
  display: grid !important;
  grid-template-columns: 180px !important;
}

body[data-active-module="configuracion"] .local-password-status {
  grid-column: 1 / -1;
  margin: 0 !important;
}

body[data-active-module="configuracion"] #panel-configuracion input,
body[data-active-module="configuracion"] #panel-configuracion select {
  min-height: 38px !important;
  height: 38px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 0.875rem !important;
}

body[data-active-module="configuracion"] #panel-configuracion textarea {
  min-height: 82px !important;
  max-height: 112px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 0.8125rem !important;
}

body[data-active-module="configuracion"] .config-format-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 8px 0 !important;
}

body[data-active-module="configuracion"] .config-format-item {
  gap: 8px !important;
  padding: 0 8px 0 10px !important;
}

body[data-active-module="configuracion"] .config-format-badge {
  min-width: 34px !important;
  min-height: 24px !important;
  font-size: 0.6875rem !important;
}

body[data-active-module="configuracion"] .config-format-item strong {
  font-size: 0.8125rem !important;
}

body[data-active-module="configuracion"] .config-format-item small {
  margin-top: 2px !important;
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
}

body[data-active-module="configuracion"] .config-section-caption {
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

body[data-active-module="configuracion"] .config-field-matrix,
body[data-active-module="configuracion"] .config-food-grid,
body[data-active-module="configuracion"] .config-defaults-grid {
  gap: 9px !important;
}

body[data-active-module="configuracion"] .config-defaults-grid,
body[data-active-module="configuracion"] .config-backup-block .toolbar-grid,
body[data-active-module="configuracion"] .config-action-row {
  grid-template-columns: 1fr !important;
}

body[data-active-module="configuracion"] .config-static-list {
  min-height: 82px !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
}

body[data-active-module="configuracion"] .config-static-list strong {
  font-size: 0.75rem !important;
}

body[data-active-module="configuracion"] .config-static-list small {
  font-size: 0.6875rem !important;
}

body[data-active-module="configuracion"] .config-action-row {
  margin-top: 10px !important;
}

body[data-active-module="configuracion"] #panel-configuracion .primary-button,
body[data-active-module="configuracion"] #panel-configuracion .secondary-button {
  min-height: 36px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 0.8125rem !important;
}

@media (max-width: 1320px) {
  body[data-active-module="configuracion"] #panel-configuracion .config-users-block,
  body[data-active-module="configuracion"] #panel-configuracion .config-defaults-block,
  body[data-active-module="configuracion"] #panel-configuracion .config-sheet-settings,
  body[data-active-module="configuracion"] #panel-configuracion .config-backup-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(224, 199, 101, 0.14) !important;
  }

  body[data-active-module="configuracion"] #panel-configuracion .config-backup-block {
    border-bottom: 0 !important;
  }

  body[data-active-module="configuracion"] .local-password-form .dual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body[data-active-module="configuracion"].module-wide .yt-layout,
  body[data-active-module="configuracion"].sidebar-collapsed.module-wide .yt-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-module="configuracion"] #panel-configuracion {
    padding: 12px !important;
  }

  body[data-active-module="configuracion"] .local-password-form,
  body[data-active-module="configuracion"] .local-password-form .dual-grid,
  body[data-active-module="configuracion"] .config-format-strip,
  body[data-active-module="configuracion"] .config-field-matrix,
  body[data-active-module="configuracion"] .config-food-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-module="configuracion"] .local-password-form .toolbar-grid {
    grid-column: 1;
    grid-template-columns: 1fr !important;
  }
}

/* Inicio de fichas tecnicas: selector limpio, centrado y sin tabla envolvente. */
body[data-active-module="fichas-tecnicas"].module-wide .yt-layout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-module="fichas-tecnicas"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

body[data-active-module="fichas-tecnicas"] .yt-right-panel {
  display: none !important;
}

body[data-active-module="fichas-tecnicas"] .yt-main-content,
body[data-active-module="fichas-tecnicas"] .editor-shell.controls-panel,
body[data-active-module="fichas-tecnicas"] .editor-panels,
body[data-active-module="fichas-tecnicas"] #panel-fichas-tecnicas {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-active-module="fichas-tecnicas"] #panel-fichas-tecnicas {
  display: grid !important;
  min-height: calc(100vh - var(--header-height) - 34px) !important;
  place-items: start center !important;
  padding: clamp(34px, 6vh, 70px) clamp(24px, 4vw, 64px) 48px !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-shell {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-intro {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-intro .block-head {
  display: grid !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(199, 165, 75, 0.2) !important;
  text-align: center !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-intro h3 {
  color: #f4f7f5 !important;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem) !important;
  line-height: 1.3 !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-intro .module-help {
  max-width: 54ch !important;
  margin: 8px auto 0 !important;
  color: #9da8a3 !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-card {
  min-height: 158px !important;
  padding: 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(244, 247, 245, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(7, 8, 9, 0.98), rgba(7, 8, 9, 0.98)) !important;
  box-shadow: none !important;
  gap: 10px !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-card:hover,
body[data-active-module="fichas-tecnicas"] .template-library-card:focus-visible {
  border-color: rgba(199, 165, 75, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)) !important;
  transform: translateY(-1px) !important;
}

/* La tarjeta elegida es una superficie elevada con marca verde, no un bloque
   verde. El verde senala el estado; no es el fondo de la tarjeta. Antes salia
   maciza en verde con el titulo dorado encima: los dos colores de marca
   peleando dentro del mismo elemento, y el texto ilegible. */
body[data-active-module="fichas-tecnicas"] .template-library-card.is-active {
  border-color: rgba(199, 165, 75, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(27, 35, 39, 0.98), rgba(18, 23, 26, 0.98)) !important;
  box-shadow: inset 3px 0 0 var(--titanium-gold) !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-card strong {
  color: var(--titanium-text) !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

/* Solo el titulo de la elegida se tine, y en verde: es el estado activo. */
body[data-active-module="fichas-tecnicas"] .template-library-card.is-active strong {
  color: var(--titanium-gold-strong) !important;
}

/* El formato en uso se marca en dorado, no en verde: es identidad —donde
   estoy—, no una accion. El verde queda para botones y resultados. */
body[data-active-module="fichas-tecnicas"] .template-library-card.is-active .template-library-badge {
  border-color: rgba(199, 165, 75, 0.38) !important;
  background: rgba(199, 165, 75, 0.14) !important;
  color: var(--titanium-gold-strong) !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-card small {
  color: #9da8a3 !important;
  font-size: 0.8125rem !important;
  line-height: 1.42 !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-badge,
body[data-active-module="fichas-tecnicas"] .template-library-card em {
  padding: 5px 9px !important;
  border-radius: 7px !important;
  font-size: 0.6875rem !important;
}

body[data-active-module="fichas-tecnicas"] .template-library-card em {
  justify-self: start !important;
  margin-top: auto !important;
}

@media (max-width: 1080px) {
  body[data-active-module="fichas-tecnicas"] .template-library-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body[data-active-module="fichas-tecnicas"].module-wide .yt-layout,
  body[data-active-module="fichas-tecnicas"].sidebar-collapsed.module-wide .yt-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-module="fichas-tecnicas"] #panel-fichas-tecnicas {
    padding: 20px 12px 32px !important;
  }
}

/* Lateral principal limpio: navegacion sin doble contenedor visual. */
.yt-sidebar {
  padding: 14px 10px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-right: 1px solid rgba(157, 168, 163, 0.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.module-nav-list {
  display: grid !important;
  gap: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.module-nav {
  position: relative !important;
  min-height: 42px !important;
  gap: 10px !important;
  padding: 7px 8px 7px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #cad4cf !important;
  box-shadow: none !important;
}

.module-nav::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

.module-nav:hover:not(.is-active) {
  background: rgba(157, 168, 163, 0.05) !important;
  color: #e0c765 !important;
  transform: none !important;
}

.module-nav.is-active {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: #f4f7f5 !important;
  box-shadow: none !important;
}

.module-nav.is-active::before {
  background: var(--brand-gold) !important;
  box-shadow: 0 0 14px rgba(199, 165, 75, 0.36) !important;
}

.module-nav-icon {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: rgba(157, 168, 163, 0.10) !important;
  color: #e0c765 !important;
  box-shadow: none !important;
}

.module-nav.is-active .module-nav-icon {
  background: rgba(199, 165, 75, 0.95) !important;
  color: #c7a54b !important;
}

.module-nav-copy strong {
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

.module-nav-copy small {
  margin-top: 2px !important;
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body.sidebar-collapsed .yt-sidebar {
  padding-inline: 8px !important;
}

body.sidebar-collapsed .module-nav {
  justify-content: center !important;
  padding-inline: 0 !important;
}

body.sidebar-collapsed .module-nav::before {
  left: 2px !important;
}

/* Panel de creacion limpio: sin tarjeta doble dentro del lateral derecho. */
body[data-active-module="crear-ficha"] .yt-right-panel {
  padding: 12px 10px 10px !important;
  background: transparent !important;
  background-image: none !important;
  border-left: 1px solid rgba(157, 168, 163, 0.10) !important;
  box-shadow: none !important;
}

body[data-active-module="crear-ficha"] .yt-right-panel .editor-shell {
  min-height: calc(100dvh - 92px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-active-module="crear-ficha"] .controls-panel .builder-tabs,
body[data-active-module="crear-ficha"] .yt-right-panel .builder-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(199, 165, 75, 0.24) !important;
  background: #070809 !important;
}

body[data-active-module="crear-ficha"] .controls-panel .builder-tab,
body[data-active-module="crear-ficha"] .yt-right-panel .builder-tab {
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: #cad4cf !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 4px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
}

body[data-active-module="crear-ficha"] .controls-panel .builder-tab:hover:not(.is-active),
body[data-active-module="crear-ficha"] .yt-right-panel .builder-tab:hover:not(.is-active) {
  background: rgba(244, 247, 245, 0.04) !important;
  color: #e0c765 !important;
}

body[data-active-module="crear-ficha"] .controls-panel .builder-tab.is-active,
body[data-active-module="crear-ficha"] .yt-right-panel .builder-tab.is-active {
  height: 34px !important;
  min-height: 34px !important;
  margin-bottom: 0 !important;
  border-bottom-color: var(--brand-gold) !important;
  background: transparent !important;
  background-image: none !important;
  color: #e0c765 !important;
}

body[data-active-module="crear-ficha"] .controls-panel .builder-tab::after,
body[data-active-module="crear-ficha"] .yt-right-panel .builder-tab::after {
  display: none !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha:not([hidden]) {
  min-height: calc(100dvh - 144px) !important;
  padding: 12px 0 0 !important;
  background: transparent !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .editor-grid,
body[data-active-module="crear-ficha"] #panel-crear-ficha .editor-grid-wide,
body[data-active-module="crear-ficha"] #panel-crear-ficha .form-grid,
body[data-active-module="crear-ficha"] #panel-crear-ficha .form-stack {
  gap: 10px !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .form-block {
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(157, 168, 163, 0.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .form-block:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .block-head {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .block-head h3 {
  color: #f4f7f5 !important;
  font-size: 1rem !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha label span,
body[data-active-module="crear-ficha"] #panel-crear-ficha .field-label {
  color: #e0c765 !important;
  font-size: 0.75rem !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-active-module="crear-ficha"] #panel-crear-ficha select,
body[data-active-module="crear-ficha"] #panel-crear-ficha textarea {
  border-radius: 8px !important;
  border-color: rgba(244, 247, 245, 0.13) !important;
  background: #070809 !important;
  box-shadow: none !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .segmented-option {
  border-radius: 8px !important;
}

body[data-active-module="crear-ficha"] #panel-crear-ficha .optional-group,
body[data-active-module="crear-ficha"] #panel-crear-ficha .form-note {
  border-radius: 8px !important;
  border-color: rgba(244, 247, 245, 0.1) !important;
  background: rgba(157, 168, 163, 0.05) !important;
}

body[data-active-module="crear-ficha"] .yt-right-panel .editor-actions-footer {
  gap: 6px !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(199, 165, 75, 0.2) !important;
  background: #070809 !important;
  backdrop-filter: none !important;
}

body[data-active-module="crear-ficha"] .yt-right-panel .editor-actions-footer .editor-action-button {
  min-height: 38px !important;
  border-radius: 9px !important;
}

@media (min-width: 1321px) {
  body[data-active-module="crear-ficha"] .workspace-hero,
  body[data-active-module="crear-ficha"] .side-summary-grid,
  body[data-active-module="crear-ficha"] .editor-ops-strip,
  body[data-active-module="crear-ficha"] .sidebar-intro,
  body[data-active-module="crear-ficha"] .workflow-guide,
  body[data-active-module="crear-ficha"] .sidebar-status {
    display: none !important;
  }

  body[data-active-module="crear-ficha"] .yt-sidebar {
    gap: 10px !important;
    padding-block: 12px !important;
  }

  body[data-active-module="crear-ficha"] .module-nav-list {
    margin-top: 0 !important;
  }

  body[data-active-module="crear-ficha"] .yt-right-panel {
    padding-top: 0 !important;
  }
}

/* Encabezado limpio: se retiran acciones duplicadas del flujo principal. */
.menu-toggle,
#reset-form,
#header-save-client-record {
  display: none !important;
}

.header-left {
  gap: 8px !important;
}

.header-right {
  width: auto !important;
  min-width: 0 !important;
}

/* Visor de ficha limpio: mantiene escala y espacio, sin marco interno duplicado. */
body[data-active-module="crear-ficha"] .sheet-viewport {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Perfil de usuario: menu limpio con foto y salida integrada. */
.header-right {
  min-width: 420px !important;
  align-items: center !important;
  gap: 14px !important;
}

.session-clock-card {
  display: grid;
  justify-items: end;
  gap: 1px;
  min-width: 118px;
  color: #e0c765;
  line-height: 1.3;
}

.session-clock-card strong {
  color: #f4f7f5;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0;
}

.session-clock-card small {
  color: rgba(244, 247, 245, 0.66);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.session-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.session-button {
  display: grid !important;
  grid-template-columns: 42px minmax(132px, 1fr) 16px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 266px !important;
  min-width: 266px !important;
  height: 52px !important;
  padding: 5px 14px 5px 6px !important;
  color: #12171a !important;
  background: #f4f7f5 !important;
  border: 1px solid #50d19a !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(7, 8, 9, 0.12) !important;
}

.session-button:hover,
.session-button:focus-visible,
.session-button[aria-expanded="true"] {
  background: #f4f7f5 !important;
  border-color: #50d19a !important;
  box-shadow: 0 10px 26px rgba(7, 8, 9, 0.16), 0 0 0 4px rgba(36, 180, 126, 0.08) !important;
  outline: none !important;
}

.session-avatar {
  position: relative;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  overflow: hidden !important;
  color: #24b47e !important;
  background: linear-gradient(145deg, #50d19a, #e0c765) !important;
  border: 2px solid #50d19a !important;
  border-radius: 50% !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 1px rgba(36, 180, 126, 0.08) !important;
}

.session-avatar img,
.profile-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.session-avatar img[hidden],
.profile-photo-preview img[hidden],
#session-avatar-label[hidden],
#profile-photo-preview-initials[hidden] {
  display: none;
}

.session-avatar[data-avatar-preset]::before,
.profile-photo-preview[data-avatar-preset]::before,
.profile-avatar-face::before {
  content: "";
  display: block;
  width: 70%;
  height: 70%;
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 50% 30%, #c7a54b 0 22%, transparent 23%),
    radial-gradient(circle at 50% 74%, #24b47e 0 33%, transparent 34%),
    linear-gradient(#1b2327, #1b2327);
}

.session-avatar[data-avatar-preset="hombre-2"]::before,
.profile-photo-preview[data-avatar-preset="hombre-2"]::before,
.profile-avatar-hombre-2::before {
  background:
    radial-gradient(circle at 50% 30%, #c7a54b 0 22%, transparent 23%),
    radial-gradient(circle at 50% 74%, #59a8e8 0 33%, transparent 34%),
    linear-gradient(#59a8e8, #59a8e8);
}

.session-avatar[data-avatar-preset="mujer-1"]::before,
.profile-photo-preview[data-avatar-preset="mujer-1"]::before,
.profile-avatar-mujer-1::before {
  background:
    radial-gradient(circle at 50% 30%, #ef7272 0 22%, transparent 23%),
    radial-gradient(circle at 50% 74%, #ef7272 0 33%, transparent 34%),
    linear-gradient(#ef7272, #ef7272);
}

.session-avatar[data-avatar-preset="mujer-2"]::before,
.profile-photo-preview[data-avatar-preset="mujer-2"]::before,
.profile-avatar-mujer-2::before {
  background:
    radial-gradient(circle at 50% 30%, #c7a54b 0 22%, transparent 23%),
    radial-gradient(circle at 50% 74%, #9c8bd8 0 33%, transparent 34%),
    linear-gradient(#12171a, #12171a);
}

.session-avatar.has-image::before,
.profile-photo-preview.has-image::before {
  display: none;
}

.session-info {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  text-align: left !important;
}

.session-info strong,
.session-info small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.session-info strong {
  color: #24b47e !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.session-info small {
  color: #2a3338 !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.session-chevron {
  color: #9da8a3;
}

.session-exit {
  display: none !important;
}

.session-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  display: grid;
  gap: 6px;
  width: 226px;
  padding: 12px;
  color: #12171a;
  background: #f4f7f5;
  border: 1px solid #50d19a;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(7, 8, 9, 0.2);
}

.session-menu[hidden] {
  display: none;
}

.session-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 32px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid #50d19a;
  border-top: 1px solid #50d19a;
  transform: rotate(45deg);
}

.session-menu-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: #1b2327;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-weight: 900;
  text-align: left;
}

.session-menu-item:hover,
.session-menu-item:focus-visible {
  background: #50d19a;
  outline: none;
}

/* Perfil de usuario oscuro: integrado al encabezado, sin boton blanco. */
.session-button {
  color: #f4f7f5 !important;
  background: rgba(7, 8, 9, 0.96) !important;
  border-color: rgba(244, 247, 245, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(199, 165, 75, 0.08), 0 10px 24px rgba(7, 8, 9, 0.28) !important;
}

.session-button:hover,
.session-button:focus-visible,
.session-button[aria-expanded="true"] {
  background: rgba(7, 8, 9, 0.98) !important;
  border-color: rgba(199, 165, 75, 0.36) !important;
  box-shadow: inset 0 0 0 1px rgba(199, 165, 75, 0.12), 0 14px 30px rgba(7, 8, 9, 0.36), 0 0 0 3px rgba(199, 165, 75, 0.08) !important;
}

.session-avatar {
  color: #24b47e !important;
  background: linear-gradient(145deg, #e0c765, #e0c765) !important;
  border-color: rgba(199, 165, 75, 0.42) !important;
}

.session-info strong {
  color: #f4f7f5 !important;
}

.session-info small {
  color: rgba(244, 247, 245, 0.66) !important;
}

.session-chevron {
  color: rgba(244, 247, 245, 0.72) !important;
}

.session-menu {
  color: #f4f7f5 !important;
  background: #070809 !important;
  border-color: rgba(199, 165, 75, 0.18) !important;
  box-shadow: 0 24px 50px rgba(7, 8, 9, 0.42) !important;
}

.session-menu::before {
  border-color: rgba(199, 165, 75, 0.18) !important;
}

.session-menu-item {
  color: #f4f7f5 !important;
}

.session-menu-item svg {
  color: rgba(199, 165, 75, 0.9) !important;
}

.session-menu-item:hover,
.session-menu-item:focus-visible {
  background: rgba(199, 165, 75, 0.12) !important;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: start center;
  padding: 74px 18px 18px;
  background: rgba(36, 180, 126, 0.38);
}

.profile-modal[hidden] {
  display: none;
}

.profile-dialog {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  padding: 22px 24px 20px;
  color: #12171a;
  background: #f4f7f5;
  border: 1px solid #50d19a;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(7, 8, 9, 0.28);
}

.profile-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #1b2327;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.profile-close:hover,
.profile-close:focus-visible {
  background: #50d19a;
  outline: none;
}

.profile-kicker {
  margin: 0 0 4px;
  color: #c7a54b;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.profile-dialog h2 {
  margin: 0;
  color: #12171a;
  font-size: 1.125rem;
  line-height: 1.3;
}

.profile-email {
  margin: 6px 0 14px;
  padding-bottom: 14px;
  color: #9da8a3;
  border-bottom: 1px solid #50d19a;
  font-weight: 700;
}

.profile-form {
  display: grid;
  gap: 14px;
}

.profile-photo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.profile-photo-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  color: #24b47e;
  background: linear-gradient(145deg, #50d19a, #e0c765);
  border: 3px solid #50d19a;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(36, 180, 126, 0.12);
}

.profile-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  color: #24b47e;
  background: #f4f7f5;
  border: 1px solid #50d19a;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.profile-upload-button:hover {
  background: #50d19a;
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-avatar-option {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 86px;
  padding: 10px 8px;
  color: #2a3338;
  background: #50d19a;
  border: 1px solid #50d19a;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 900;
}

.profile-avatar-option.is-active,
.profile-avatar-option:hover,
.profile-avatar-option:focus-visible {
  border-color: #50d19a;
  background: #50d19a;
  outline: none;
}

.profile-avatar-face {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #50d19a;
  border-radius: 50%;
}

.profile-avatar-hombre-2 {
  background: #59a8e8;
}

.profile-avatar-mujer-1 {
  background: #ef7272;
}

.profile-avatar-mujer-2 {
  background: #59a8e8;
}

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

.profile-form label,
.profile-full-field {
  display: grid;
  gap: 7px;
}

.profile-form label span {
  color: #2a3338;
  font-size: 0.75rem;
  font-weight: 900;
}

.profile-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: #12171a;
  background: #f4f7f5;
  border: 1px solid #50d19a;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 800;
}

.profile-form input:focus {
  outline: none;
  border-color: #50d19a;
  box-shadow: 0 0 0 4px rgba(36, 180, 126, 0.1);
}

.profile-form input::placeholder {
  color: #9da8a3;
}

.profile-status {
  min-height: 18px;
  margin: 0;
  color: #2a3338;
  font-size: 0.75rem;
  font-weight: 800;
}

.profile-status[data-status="error"] {
  color: #ef7272;
}

.profile-status[data-status="success"] {
  color: #24b47e;
}

.profile-save-button {
  justify-self: center;
  min-height: 50px;
  padding: 0 24px;
  color: #f4f7f5;
  background: #24b47e;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(36, 180, 126, 0.24);
  font-weight: 900;
}

.profile-save-button:hover,
.profile-save-button:focus-visible {
  background: #24b47e;
  outline: none;
}

@media (max-width: 1320px) {
  .header-right {
    min-width: 310px !important;
  }

  .session-clock-card {
    display: none;
  }
}

@media (max-width: 700px) {
  .profile-avatar-grid,
  .profile-field-grid {
    grid-template-columns: 1fr 1fr;
  }

  .session-button {
    width: 224px !important;
    min-width: 224px !important;
  }
}

/* Modal de perfil oscuro, consistente con el menu de usuario. */
.profile-dialog {
  color: #f4f7f5 !important;
  background:
    linear-gradient(180deg, rgba(7, 8, 9, 0.99), rgba(7, 8, 9, 0.99)) !important;
  border-color: rgba(199, 165, 75, 0.2) !important;
  box-shadow: 0 30px 76px rgba(7, 8, 9, 0.55), inset 0 0 0 1px rgba(244, 247, 245, 0.04) !important;
}

.profile-close {
  color: #f4f7f5 !important;
}

.profile-close:hover,
.profile-close:focus-visible {
  background: rgba(199, 165, 75, 0.12) !important;
}

.profile-kicker,
.profile-form label span {
  color: #e0c765 !important;
}

.profile-dialog h2 {
  color: #f4f7f5 !important;
}

.profile-email {
  color: rgba(244, 247, 245, 0.62) !important;
  border-bottom-color: rgba(199, 165, 75, 0.18) !important;
}

.profile-photo-preview {
  color: #24b47e !important;
  background: linear-gradient(145deg, #e0c765, #e0c765) !important;
  border-color: rgba(199, 165, 75, 0.42) !important;
  box-shadow: 0 16px 30px rgba(7, 8, 9, 0.32) !important;
}

.profile-upload-button {
  color: #f4f7f5 !important;
  background: rgba(7, 8, 9, 0.96) !important;
  border-color: rgba(199, 165, 75, 0.28) !important;
}

.profile-upload-button:hover {
  background: rgba(199, 165, 75, 0.12) !important;
}

.profile-avatar-option {
  color: rgba(244, 247, 245, 0.68) !important;
  background: rgba(157, 168, 163, 0.05) !important;
  border-color: rgba(199, 165, 75, 0.16) !important;
}

.profile-avatar-option.is-active,
.profile-avatar-option:hover,
.profile-avatar-option:focus-visible {
  color: #f4f7f5 !important;
  border-color: rgba(199, 165, 75, 0.48) !important;
  background: rgba(199, 165, 75, 0.1) !important;
}

.profile-form input {
  color: #f4f7f5 !important;
  background: #0c0f11 !important;
  border-color: rgba(244, 247, 245, 0.12) !important;
}

.profile-form input:focus {
  border-color: rgba(199, 165, 75, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(199, 165, 75, 0.1) !important;
}

.profile-form input::placeholder {
  color: rgba(244, 247, 245, 0.42) !important;
}

.profile-status {
  color: rgba(244, 247, 245, 0.62) !important;
}

.profile-status[data-status="error"] {
  color: #ef7272 !important;
}

.profile-status[data-status="success"] {
  color: #50d19a !important;
}

body.profile-modal-open,
body.save-decision-modal-open {
  overflow: hidden;
}

.save-decision-modal {
  position: fixed;
  inset: 0;
  z-index: 920;
  display: grid;
  place-items: start center;
  padding: 82px 18px 18px;
  background: rgba(36, 180, 126, 0.54);
  backdrop-filter: blur(6px);
}

.save-decision-modal[hidden] {
  display: none;
}

.save-decision-dialog {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  padding: 24px;
  color: #f4f7f5;
  background:
    linear-gradient(180deg, rgba(7, 8, 9, 0.99), rgba(7, 8, 9, 0.98));
  border: 1px solid rgba(199, 165, 75, 0.2);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(7, 8, 9, 0.56), inset 0 0 0 1px rgba(244, 247, 245, 0.04);
}

.save-decision-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #f4f7f5;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.save-decision-close:hover,
.save-decision-close:focus-visible {
  background: rgba(199, 165, 75, 0.12);
  outline: none;
}

.save-decision-kicker,
.save-decision-summary-label {
  margin: 0;
  color: #e0c765;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.save-decision-dialog h2 {
  margin: 4px 0 0;
  color: #f4f7f5;
  font-size: 1.625rem;
  line-height: 1.3;
}

.save-decision-lead {
  margin: 10px 0 18px;
  max-width: 58ch;
  color: rgba(244, 247, 245, 0.74);
  line-height: 1.6;
}

.save-decision-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.save-decision-summary-card,
.save-decision-change-box,
.save-decision-action {
  background: rgba(244, 247, 245, 0.04);
  border: 1px solid rgba(199, 165, 75, 0.14);
  border-radius: 16px;
}

.save-decision-summary-card {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}

.save-decision-summary-card strong {
  color: #f4f7f5;
  font-size: 1.125rem;
  line-height: 1.3;
}

.save-decision-change-box {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}

.save-decision-change-box p {
  margin: 0;
  color: rgba(244, 247, 245, 0.86);
  font-size: 1rem;
  line-height: 1.55;
}

.save-decision-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.save-decision-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: #e0c765;
  background: rgba(199, 165, 75, 0.1);
  border: 1px solid rgba(199, 165, 75, 0.22);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.save-decision-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.save-decision-action {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 18px;
  color: #f4f7f5;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.save-decision-action span {
  color: #f4f7f5;
  font-size: 1rem;
  font-weight: 900;
}

.save-decision-action small {
  color: rgba(244, 247, 245, 0.7);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.save-decision-action:hover,
.save-decision-action:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.save-decision-action-keep:hover,
.save-decision-action-keep:focus-visible {
  background: rgba(36, 180, 126, 0.16);
  border-color: rgba(80, 209, 154, 0.42);
  box-shadow: 0 18px 36px rgba(7, 8, 9, 0.24);
}

.save-decision-action-new:hover,
.save-decision-action-new:focus-visible {
  background: rgba(199, 165, 75, 0.12);
  border-color: rgba(199, 165, 75, 0.42);
  box-shadow: 0 18px 36px rgba(7, 8, 9, 0.24);
}

.save-decision-cancel {
  justify-self: start;
  min-height: 40px;
  margin-top: 14px;
  padding: 0 16px;
  color: rgba(244, 247, 245, 0.76);
  font: inherit;
  background: transparent;
  border: 1px solid rgba(244, 247, 245, 0.12);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.save-decision-cancel:hover,
.save-decision-cancel:focus-visible {
  color: #f4f7f5;
  background: rgba(244, 247, 245, 0.05);
  border-color: rgba(199, 165, 75, 0.24);
  outline: none;
}

@media (max-width: 760px) {
  .save-decision-actions,
  .save-decision-summary-grid {
    grid-template-columns: 1fr;
  }

  .save-decision-dialog {
    padding: 22px 18px 18px;
  }

  .save-decision-action {
    min-height: auto;
  }
}

/* Login pro refresh: visible background image and cleaner access layout. */
body.login-locked {
  background: #24b47e !important;
}

.login-gate {
  grid-template-columns: minmax(560px, 1fr) minmax(380px, 500px) !important;
  gap: clamp(36px, 6vw, 92px) !important;
  padding: clamp(34px, 5vw, 72px) clamp(42px, 7vw, 96px) !important;
  background-color: #24b47e !important;
  background-image:
    radial-gradient(circle at 30% 42%, rgba(36, 180, 126, 0.18) 0%, rgba(36, 180, 126, 0.06) 24%, transparent 46%),
    linear-gradient(90deg, rgba(7, 8, 9, 0.80) 0%, rgba(7, 8, 9, 0.46) 46%, rgba(7, 8, 9, 0.76) 100%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.18) 0%, rgba(7, 8, 9, 0.66) 100%),
    url("./assets/app/FONDO%20LOGUIN.png") !important;
  background-size: auto, auto, auto, cover !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
}

.login-gate::before {
  z-index: 0 !important;
  background:
    linear-gradient(rgba(244, 247, 245, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 245, 0.025) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  opacity: 0.36 !important;
}

.login-gate::after {
  background:
    radial-gradient(circle at 76% 50%, rgba(7, 8, 9, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.06), rgba(7, 8, 9, 0.40)) !important;
}

.login-visual-panel {
  min-height: min(740px, calc(100vh - 112px)) !important;
  max-width: 840px !important;
  align-content: space-between !important;
  padding-block: 10px !important;
}

.login-brand-logo {
  width: min(330px, 48vw) !important;
  height: 78px !important;
  opacity: 0.98 !important;
}

.login-visual-copy {
  max-width: 780px !important;
  gap: 20px !important;
}

.login-kicker,
.login-card-kicker {
  color: #e0c765 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.28em !important;
}

.login-visual-copy h1 {
  max-width: 820px !important;
  color: #f4f7f5 !important;
  font-size: clamp(3.25rem, 5.1vw, 5.15rem) !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  text-shadow: 0 18px 54px rgba(7, 8, 9, 0.62) !important;
}

.login-visual-copy p {
  max-width: 690px !important;
  color: rgba(244, 247, 245, 0.86) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
}

.login-module-strip {
  gap: 9px !important;
  margin-top: 28px !important;
}

.login-module-strip span,
.login-role-strip span {
  min-height: 31px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  color: #e0c765 !important;
  background: rgba(7, 8, 9, 0.60) !important;
  border-color: rgba(199, 165, 75, 0.26) !important;
  backdrop-filter: blur(10px) !important;
}

.login-summary-grid {
  gap: 12px !important;
  max-width: 760px !important;
  margin-top: 26px !important;
}

.login-summary-grid article {
  min-height: 86px !important;
  padding: 15px 16px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.72), rgba(7, 8, 9, 0.70)) !important;
  border-color: rgba(244, 247, 245, 0.13) !important;
  backdrop-filter: blur(12px) !important;
}

.login-summary-grid strong {
  color: #f4f7f5 !important;
  font-size: 1.625rem !important;
}

.login-summary-grid span {
  color: rgba(244, 247, 245, 0.68) !important;
  font-size: 0.75rem !important;
}

.login-card {
  width: min(100%, 500px) !important;
  justify-self: end !important;
  gap: 18px !important;
  padding: 34px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.90), rgba(7, 8, 9, 0.86)) !important;
  border: 1px solid rgba(244, 247, 245, 0.16) !important;
  box-shadow:
    0 30px 80px rgba(7, 8, 9, 0.50),
    inset 0 1px 0 rgba(157, 168, 163, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.login-card h2 {
  color: #f4f7f5 !important;
  font-size: 2rem !important;
  line-height: 1.3 !important;
}

.login-card-copy {
  color: rgba(244, 247, 245, 0.78) !important;
  font-size: 0.875rem !important;
}

.login-field {
  gap: 7px !important;
}

.login-field span,
.login-remember span {
  color: #e0c765 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.17em !important;
}

.login-field input {
  min-height: 48px !important;
  padding: 0 15px !important;
  border-radius: 8px !important;
  color: #f4f7f5 !important;
  background: rgba(7, 8, 9, 0.48) !important;
  border-color: rgba(244, 247, 245, 0.15) !important;
  font-weight: 800 !important;
}

.login-field input::placeholder {
  color: rgba(244, 247, 245, 0.42) !important;
}

.login-field input:focus {
  border-color: rgba(199, 165, 75, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(199, 165, 75, 0.14) !important;
  background: rgba(7, 8, 9, 0.72) !important;
}

.login-password-row {
  gap: 10px !important;
}

.login-show-password,
.login-submit {
  min-height: 48px !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  letter-spacing: 0 !important;
}

.login-show-password {
  min-width: 96px !important;
  padding: 0 16px !important;
  color: #f4f7f5 !important;
  background: rgba(157, 168, 163, 0.08) !important;
  border-color: rgba(244, 247, 245, 0.16) !important;
}

.login-show-password:hover {
  background: rgba(199, 165, 75, 0.10) !important;
  border-color: rgba(199, 165, 75, 0.32) !important;
}

.login-submit {
  background: linear-gradient(135deg, #50d19a, #24b47e) !important;
  border-color: rgba(80, 209, 154, 0.72) !important;
  box-shadow: 0 14px 30px rgba(36, 180, 126, 0.28) !important;
}

.login-submit:hover {
  background: linear-gradient(135deg, #50d19a, #24b47e) !important;
  border-color: rgba(199, 165, 75, 0.58) !important;
  box-shadow: 0 16px 36px rgba(36, 180, 126, 0.34) !important;
}

.login-status {
  padding: 13px 14px !important;
  border-radius: 8px !important;
  color: rgba(244, 247, 245, 0.74) !important;
  background: rgba(7, 8, 9, 0.35) !important;
  border-color: rgba(244, 247, 245, 0.12) !important;
  font-size: 0.75rem !important;
}

.login-role-strip {
  gap: 7px !important;
}

@media (max-width: 1120px) {
  .login-gate {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 28px !important;
    padding: 30px 22px !important;
  }

  .login-visual-panel {
    min-height: auto !important;
    gap: 26px !important;
  }

  .login-card {
    justify-self: start !important;
    width: min(100%, 560px) !important;
  }
}

@media (max-width: 640px) {
  .login-gate {
    padding: 22px 14px !important;
  }

  .login-brand-logo {
    width: 230px !important;
    height: 58px !important;
  }

  .login-visual-copy h1 {
    font-size: 2.625rem !important;
  }

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

  .login-card {
    padding: 24px 18px !important;
  }

  .login-password-row {
    grid-template-columns: 1fr !important;
  }

  .login-show-password {
    width: 100% !important;
  }
}

/* Login minimal: fewer words, stronger image presence. */
.login-gate {
  grid-template-columns: minmax(520px, 1fr) minmax(390px, 520px) !important;
  align-items: center !important;
  gap: clamp(44px, 9vw, 140px) !important;
  padding: clamp(38px, 5vw, 70px) clamp(56px, 8vw, 112px) !important;
  background-image:
    linear-gradient(90deg, rgba(7, 8, 9, 0.46) 0%, rgba(7, 8, 9, 0.24) 48%, rgba(7, 8, 9, 0.54) 100%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.10) 0%, rgba(7, 8, 9, 0.48) 100%),
    url("./assets/app/FONDO%20LOGUIN.png") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
}

.login-gate::before {
  background:
    linear-gradient(rgba(157, 168, 163, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 168, 163, 0.05) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  opacity: 0.34 !important;
}

.login-gate::after {
  background:
    radial-gradient(circle at 15% 76%, transparent 0 26%, rgba(199, 165, 75, 0.22) 26.08%, transparent 26.18%),
    radial-gradient(circle at 54% 18%, rgba(244, 247, 245, 0.10), transparent 31%),
    linear-gradient(180deg, transparent 0%, rgba(7, 8, 9, 0.22) 100%) !important;
}

.login-visual-panel {
  min-height: min(740px, calc(100vh - 96px)) !important;
  max-width: 760px !important;
  align-content: space-between !important;
}

.login-brand-logo {
  width: min(460px, 58vw) !important;
  height: 70px !important;
  background-image: url("./assets/app/LOGO.svg") !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  filter: brightness(0) invert(1) drop-shadow(0 10px 22px rgba(7, 8, 9, 0.34)) !important;
}

.login-visual-copy {
  max-width: 680px !important;
  gap: 18px !important;
}

.login-visual-copy h1 {
  max-width: 620px !important;
  font-size: clamp(3rem, 4.9vw, 4.85rem) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

.login-visual-copy p {
  max-width: 680px !important;
  color: rgba(244, 247, 245, 0.92) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.login-module-strip,
.login-summary-grid,
.login-role-strip {
  display: none !important;
}

.login-card {
  align-self: center !important;
  width: min(100%, 410px) !important;
  gap: 16px !important;
  padding: 30px 28px 28px !important;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.78), rgba(7, 8, 9, 0.74)) !important;
  border-color: rgba(199, 165, 75, 0.14) !important;
  box-shadow: 0 18px 42px rgba(7, 8, 9, 0.30), inset 0 1px 0 rgba(157, 168, 163, 0.05) !important;
}

.login-card-kicker {
  font-size: 0.6875rem !important;
  letter-spacing: 0.24em !important;
  margin-bottom: 0 !important;
}

.login-card h2 {
  font-size: 1.625rem !important;
  line-height: 1.3 !important;
}

.login-card-copy {
  color: rgba(244, 247, 245, 0.74) !important;
  font-size: 0.875rem !important;
  line-height: 1.42 !important;
}

.login-field {
  gap: 6px !important;
}

.login-field span,
.login-remember span {
  font-size: 0.6875rem !important;
  letter-spacing: 0.17em !important;
}

.login-field input {
  min-height: 44px !important;
  padding: 0 14px !important;
  color: #e0c765 !important;
  background: rgba(244, 247, 245, 0.075) !important;
  border-color: rgba(157, 168, 163, 0.16) !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
}

.login-field input:focus {
  color: #f4f7f5 !important;
  background: rgba(244, 247, 245, 0.105) !important;
  border-color: rgba(199, 165, 75, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(199, 165, 75, 0.12) !important;
}

.login-field input::placeholder {
  color: rgba(244, 247, 245, 0.44) !important;
}

.login-show-password {
  min-height: 44px !important;
  min-width: 76px !important;
  padding: 0 11px !important;
  color: #e0c765 !important;
  background: rgba(199, 165, 75, 0.075) !important;
  border-color: rgba(199, 165, 75, 0.24) !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
}

.login-show-password:hover {
  background: rgba(199, 165, 75, 0.15) !important;
  border-color: rgba(199, 165, 75, 0.44) !important;
}

.login-remember {
  margin-top: -2px !important;
}

.login-remember input {
  width: 16px !important;
  height: 16px !important;
}

.login-submit {
  min-height: 44px !important;
  color: #24b47e !important;
  background: linear-gradient(135deg, #e0c765 0%, #c7a54b 44%, #24b47e 100%) !important;
  border-color: rgba(224, 199, 101, 0.70) !important;
  box-shadow: 0 12px 24px rgba(36, 180, 126, 0.20), inset 0 1px 0 rgba(244, 247, 245, 0.35) !important;
  font-size: 0.875rem !important;
  font-weight: 900 !important;
}

.login-submit:hover {
  background: linear-gradient(135deg, #e0c765 0%, #c7a54b 42%, #50d19a 100%) !important;
  border-color: rgba(224, 199, 101, 0.92) !important;
  box-shadow: 0 14px 30px rgba(36, 180, 126, 0.28), inset 0 1px 0 rgba(244, 247, 245, 0.40) !important;
}

.login-status {
  color: rgba(244, 247, 245, 0.72) !important;
  background: rgba(157, 168, 163, 0.08) !important;
  border-color: rgba(199, 165, 75, 0.18) !important;
  padding: 10px 12px !important;
  font-size: 0.75rem !important;
  line-height: 1.36 !important;
}

.login-status:empty {
  display: none !important;
}

.login-fda-entry {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding-top: 6px;
}

.login-fda-entry span {
  color: rgba(244, 247, 245, 0.66);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-fda-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(80, 209, 154, 0.42);
  border-radius: 999px;
  color: #50d19a;
  background: rgba(36, 180, 126, 0.48);
  font-size: 0.875rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.login-fda-link:hover,
.login-fda-link:focus-visible {
  color: #f4f7f5;
  background: rgba(36, 180, 126, 0.76);
  border-color: rgba(80, 209, 154, 0.76);
}

.login-fda-link:focus-visible {
  outline: 2px solid rgba(224, 199, 101, 0.58);
  outline-offset: 2px;
}

.login-card::after {
  content: "APP INTEGRAL DE FICHAS TECNICAS";
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: max-content;
  color: rgba(199, 165, 75, 0.48);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

@media (max-width: 1120px) {
  .login-gate {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 30px 22px 56px !important;
  }

  .login-visual-panel {
    min-height: auto !important;
  }

  .login-card {
    justify-self: stretch !important;
    max-width: 560px !important;
  }
}

@media (max-width: 640px) {
  .login-gate {
    padding: 22px 14px 54px !important;
  }

  .login-brand-logo {
    width: 260px !important;
    height: 54px !important;
    background-size: contain !important;
  }

  .login-visual-copy h1 {
    font-size: 2.625rem !important;
  }

  .login-card {
    padding: 26px 18px !important;
  }
}

/* Configuracion final: consola compacta como referencia visual del modulo. */
body[data-active-module="configuracion"] {
  background:
    radial-gradient(circle at 42% 8%, rgba(36, 180, 126, 0.09), transparent 28%),
    linear-gradient(180deg, #070809 0%, #070809 100%) !important;
}

body[data-active-module="configuracion"] .yt-header {
  height: 72px !important;
  padding: 0 18px !important;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.98), rgba(7, 8, 9, 0.98)) !important;
  border: 1px solid rgba(157, 168, 163, 0.10) !important;
  border-radius: 8px !important;
}

body[data-active-module="configuracion"] .brand-logo {
  width: 280px !important;
  height: 48px !important;
}

body[data-active-module="configuracion"] #load-sample {
  display: none !important;
}

body[data-active-module="configuracion"] .search-bar {
  width: min(100%, 600px) !important;
  max-width: 600px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 4px 0 14px !important;
  background: rgba(7, 8, 9, 0.96) !important;
  border-color: rgba(244, 247, 245, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(244, 247, 245, 0.025) !important;
}

body[data-active-module="configuracion"] .search-btn {
  gap: 7px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  color: #f4f7f5 !important;
  background: linear-gradient(180deg, #24b47e, #24b47e) !important;
  border: 1px solid rgba(80, 209, 154, 0.56) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 2px rgba(36, 180, 126, 0.18), inset 0 1px 0 rgba(244, 247, 245, 0.16) !important;
}

body[data-active-module="configuracion"] .search-btn svg {
  width: 16px !important;
  height: 16px !important;
}

body[data-active-module="configuracion"] .header-right {
  min-width: 392px !important;
}

body[data-active-module="configuracion"] .session-button {
  width: 236px !important;
  min-width: 236px !important;
  height: 52px !important;
  color: #e0c765 !important;
  background: transparent !important;
  border-color: rgba(244, 247, 245, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body[data-active-module="configuracion"] .session-button:hover,
body[data-active-module="configuracion"] .session-button:focus-visible,
body[data-active-module="configuracion"] .session-button[aria-expanded="true"] {
  background: rgba(157, 168, 163, 0.05) !important;
  border-color: rgba(199, 165, 75, 0.28) !important;
}

body[data-active-module="configuracion"] .session-avatar {
  color: #24b47e !important;
  background: linear-gradient(180deg, #c7a54b, #c7a54b) !important;
  border-color: rgba(224, 199, 101, 0.72) !important;
}

body[data-active-module="configuracion"] .session-info strong {
  color: #f4f7f5 !important;
}

body[data-active-module="configuracion"] .session-info small,
body[data-active-module="configuracion"] .session-chevron {
  color: rgba(244, 247, 245, 0.66) !important;
}

body[data-active-module="configuracion"] .sidebar-intro,
body[data-active-module="configuracion"] .smart-intake-panel {
  display: none !important;
}

body[data-active-module="configuracion"].module-wide .yt-layout,
body[data-active-module="configuracion"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 212px minmax(0, 1fr) !important;
  gap: 22px !important;
}

body[data-active-module="configuracion"] .yt-sidebar {
  padding: 18px 12px !important;
  border-right-color: rgba(157, 168, 163, 0.10) !important;
}

body[data-active-module="configuracion"] .module-nav {
  min-height: 50px !important;
  padding: 7px 10px 7px 14px !important;
  border-radius: 8px !important;
}

body[data-active-module="configuracion"] .module-nav::before {
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
}

body[data-active-module="configuracion"] .module-nav-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(244, 247, 245, 0.12) !important;
  border-radius: 8px !important;
}

body[data-active-module="configuracion"] .module-nav.is-active {
  background: linear-gradient(90deg, rgba(199, 165, 75, 0.16), transparent 72%) !important;
}

body[data-active-module="configuracion"] #panel-configuracion {
  min-height: calc(100vh - 84px) !important;
  padding: 18px 12px 0 0 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-module-grid {
  display: grid !important;
  grid-template-columns: minmax(680px, 1fr) minmax(350px, 476px) !important;
  gap: 14px !important;
  align-items: start !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-active-module="configuracion"] #panel-configuracion .form-block {
  padding: 16px 18px !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.96)) !important;
  border: 1px solid rgba(244, 247, 245, 0.10) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(157, 168, 163, 0.05), 0 18px 42px rgba(7, 8, 9, 0.20) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-users-block {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-sheet-settings {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-defaults-block {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .config-backup-block {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .block-head {
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(244, 247, 245, 0.07) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .block-head h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #e0c765 !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

body[data-active-module="configuracion"] .config-head-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #cad4cf;
}

/* Se esconde el texto descriptivo que acompana a cada titulo, que es fijo y
   solo gasta alto. Los parrafos de ESTADO no: ahi es donde los formularios
   dicen que paso.

   Estuvieron escondidos y el efecto fue que "el boton no funciona". El
   formulario de crear usuario si respondia -clave corta, correo repetido, sin
   permiso- pero escribia la razon en un parrafo con display:none, y quien lo
   pulsaba no veia nada. Las reglas de color por data-status ya existian
   (linea ~12188) y esta regla las anulaba. */
body[data-active-module="configuracion"] #panel-configuracion .block-head .module-help {
  display: none !important;
}

body[data-active-module="configuracion"] .local-users-table-wrap {
  /* Se desplaza en horizontal, no se recorta.

     Con un solo boton de accion la tabla cabia en 780 px y recortar no se
     notaba. Al pasar a selector de rol, firma y tres botones, ese recorte
     dejaba los botones FUERA de la vista, encimados unos sobre otros y con el
     texto partido letra a letra. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: rgba(7, 8, 9, 0.78) !important;
  border-color: rgba(244, 247, 245, 0.09) !important;
  border-radius: 8px !important;
}

body[data-active-module="configuracion"] .local-users-table {
  min-width: 1120px !important;
}

body[data-active-module="configuracion"] .local-users-table th {
  height: 34px !important;
  padding: 8px 16px !important;
  color: rgba(224, 199, 101, 0.82) !important;
  background: rgba(7, 8, 9, 0.92) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em !important;
}

body[data-active-module="configuracion"] .local-users-table td {
  height: 56px !important;
  padding: 9px 16px !important;
  color: #f4f7f5 !important;
  border-top-color: rgba(157, 168, 163, 0.10) !important;
  font-size: 0.8125rem !important;
}

body[data-active-module="configuracion"] .config-user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body[data-active-module="configuracion"] .config-user-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  color: #f4f7f5;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 900;
}

body[data-active-module="configuracion"] .config-user-avatar-0 { background: linear-gradient(145deg, #24b47e, #24b47e); }
body[data-active-module="configuracion"] .config-user-avatar-1 { background: linear-gradient(145deg, #59a8e8, #59a8e8); }
body[data-active-module="configuracion"] .config-user-avatar-2 { background: linear-gradient(145deg, #59a8e8, #59a8e8); }
body[data-active-module="configuracion"] .config-user-avatar-3 { background: linear-gradient(145deg, #c7a54b, #c7a54b); }
body[data-active-module="configuracion"] .config-user-avatar-4 { background: linear-gradient(145deg, #9c8bd8, #9c8bd8); }

body[data-active-module="configuracion"] .config-user-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-active-module="configuracion"] .config-user-copy strong,
body[data-active-module="configuracion"] .config-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-module="configuracion"] .local-users-table strong {
  color: #e0c765 !important;
  font-size: 0.8125rem !important;
}

body[data-active-module="configuracion"] .local-users-table small {
  color: rgba(244, 247, 245, 0.52) !important;
  font-size: 0.6875rem !important;
}

body[data-active-module="configuracion"] .local-users-table code {
  min-height: 26px !important;
  padding: 0 11px !important;
  color: #e0c765 !important;
  background: rgba(199, 165, 75, 0.10) !important;
  border-color: rgba(199, 165, 75, 0.28) !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
}

body[data-active-module="configuracion"] .config-row-menu {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: rgba(244, 247, 245, 0.74);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-weight: 900;
  cursor: default;
}

body[data-active-module="configuracion"] .local-password-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px 14px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top-color: rgba(157, 168, 163, 0.10) !important;
}

body[data-active-module="configuracion"] .local-password-form .block-head {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-active-module="configuracion"] .local-password-form .dual-grid {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: 1.25fr repeat(3, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}

body[data-active-module="configuracion"] .local-password-form .toolbar-grid {
  grid-column: 2 !important;
  align-self: end !important;
  display: grid !important;
  grid-template-columns: 142px !important;
}

body[data-active-module="configuracion"] #panel-configuracion input,
body[data-active-module="configuracion"] #panel-configuracion select {
  height: 38px !important;
  min-height: 38px !important;
  color: #e0c765 !important;
  background: rgba(7, 8, 9, 0.96) !important;
  border-color: rgba(244, 247, 245, 0.13) !important;
  border-radius: 6px !important;
}

body[data-active-module="configuracion"] #panel-configuracion textarea {
  min-height: 104px !important;
  max-height: 126px !important;
  color: #e0c765 !important;
  background: rgba(7, 8, 9, 0.92) !important;
  border-color: rgba(244, 247, 245, 0.12) !important;
  border-radius: 6px !important;
}

body[data-active-module="configuracion"] #panel-configuracion label span,
body[data-active-module="configuracion"] .config-static-list > span {
  color: #50d19a !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body[data-active-module="configuracion"] .config-format-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-active-module="configuracion"] .config-format-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 74px !important;
  padding: 12px !important;
  background: rgba(12, 15, 17, 0.88) !important;
  border: 1px solid rgba(244, 247, 245, 0.10) !important;
  border-radius: 8px !important;
}

body[data-active-module="configuracion"] .config-format-item.is-active {
  border-color: rgba(80, 209, 154, 0.64) !important;
  box-shadow: inset 0 0 0 1px rgba(80, 209, 154, 0.16), 0 0 0 1px rgba(80, 209, 154, 0.10) !important;
}

body[data-active-module="configuracion"] .config-format-badge {
  min-width: 34px !important;
  min-height: 24px !important;
  color: #50d19a !important;
  background: rgba(36, 180, 126, 0.22) !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
}

body[data-active-module="configuracion"] .config-format-item strong {
  color: #e0c765 !important;
  font-size: 0.8125rem !important;
}

body[data-active-module="configuracion"] .config-format-item small {
  color: rgba(244, 247, 245, 0.58) !important;
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
}

body[data-active-module="configuracion"] .config-format-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 0;
  background: rgba(80, 209, 154, 0.14);
  border: 1px solid rgba(80, 209, 154, 0.62);
  border-radius: 6px;
}

body[data-active-module="configuracion"] .config-format-check::before {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #50d19a;
  border-bottom: 2px solid #50d19a;
  transform: rotate(-45deg);
}

body[data-active-module="configuracion"] .config-format-arrow {
  color: rgba(244, 247, 245, 0.82);
  font-size: 1.3125rem;
  line-height: 1.3;
}

body[data-active-module="configuracion"] .config-section-caption {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 -18px 12px !important;
  padding: 12px 18px 10px !important;
  background: rgba(7, 8, 9, 0.72) !important;
  border-top: 1px solid rgba(244, 247, 245, 0.07) !important;
  border-bottom: 1px solid rgba(244, 247, 245, 0.07) !important;
}

body[data-active-module="configuracion"] .config-section-caption span {
  color: #50d19a !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.02em !important;
}

body[data-active-module="configuracion"] .config-section-caption strong {
  color: rgba(244, 247, 245, 0.82) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
}

body[data-active-module="configuracion"] .config-field-matrix {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-active-module="configuracion"] .config-field-matrix label:nth-child(n+4),
body[data-active-module="configuracion"] .config-field-matrix + .config-section-caption,
body[data-active-module="configuracion"] .config-food-grid {
  display: none !important;
}

body[data-active-module="configuracion"] .config-defaults-grid,
body[data-active-module="configuracion"] .config-action-row,
body[data-active-module="configuracion"] .config-backup-block .toolbar-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body[data-active-module="configuracion"] .config-action-row {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(244, 247, 245, 0.07) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .primary-button,
body[data-active-module="configuracion"] #panel-configuracion .secondary-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  font-weight: 850 !important;
}

body[data-active-module="configuracion"] #panel-configuracion .primary-button {
  color: #f4f7f5 !important;
  background: linear-gradient(180deg, #24b47e, #24b47e) !important;
  border: 1px solid rgba(80, 209, 154, 0.56) !important;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.16), 0 0 0 1px rgba(36, 180, 126, 0.16) !important;
}

body[data-active-module="configuracion"] #panel-configuracion .secondary-button {
  color: #e0c765 !important;
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.92), rgba(12, 15, 17, 0.92)) !important;
  border: 1px solid rgba(157, 168, 163, 0.16) !important;
}

@media (max-width: 1320px) {
  body[data-active-module="configuracion"] #panel-configuracion .config-module-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-active-module="configuracion"] #panel-configuracion .config-users-block,
  body[data-active-module="configuracion"] #panel-configuracion .config-sheet-settings,
  body[data-active-module="configuracion"] #panel-configuracion .config-defaults-block,
  body[data-active-module="configuracion"] #panel-configuracion .config-backup-block {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  body[data-active-module="configuracion"].module-wide .yt-layout,
  body[data-active-module="configuracion"].sidebar-collapsed.module-wide .yt-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-active-module="configuracion"] .yt-header {
    height: auto !important;
    min-height: 72px !important;
  }

  body[data-active-module="configuracion"] #panel-configuracion {
    padding: 12px !important;
  }

  body[data-active-module="configuracion"] .local-password-form,
  body[data-active-module="configuracion"] .local-password-form .dual-grid,
  body[data-active-module="configuracion"] .config-format-strip,
  body[data-active-module="configuracion"] .config-field-matrix {
    grid-template-columns: 1fr !important;
  }

  body[data-active-module="configuracion"] .local-password-form .toolbar-grid {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
  }
}

/* clientes dashboard refresh */
body[data-active-module="clientes"] #panel-clientes .client-module-grid {
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "inventory"
    "explorer" !important;
  gap: 20px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-save-block {
  display: none !important;
}

body[data-active-module="clientes"] #panel-clientes .client-explorer-block {
  width: 100% !important;
  max-width: none !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block {
  min-height: calc(100vh - var(--header-height) - 24px) !important;
  padding: 16px 20px 24px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head {
  padding: 2px 2px 4px !important;
  border-bottom: 0 !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head h3 {
  margin: 0 !important;
  color: #59a8e8 !important;
  font-size: 1.625rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.03em !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head .module-help {
  margin-top: 8px !important;
  color: #9da8a3 !important;
  font-size: 0.875rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 4px;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 92px;
  padding: 16px 18px !important;
  border: 1px solid rgba(157, 168, 163, 0.22) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(18, 23, 26, 0.94), rgba(12, 15, 17, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 245, 0.03),
    0 16px 32px rgba(7, 8, 9, 0.18) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(157, 168, 163, 0.18);
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.95), rgba(18, 23, 26, 0.95));
  color: #cad4cf;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.04);
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-clients .inventory-summary-icon {
  color: #50d19a;
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.96), rgba(36, 180, 126, 0.96));
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-records .inventory-summary-icon {
  color: #e0c765;
  background: linear-gradient(180deg, rgba(199, 165, 75, 0.96), rgba(199, 165, 75, 0.96));
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-history .inventory-summary-icon {
  color: #50d19a;
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.96), rgba(36, 180, 126, 0.96));
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-updated .inventory-summary-icon {
  color: #50d19a;
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.96), rgba(36, 180, 126, 0.96));
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card strong {
  color: #f4f7f5 !important;
  font-size: 2rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.04em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-metric span {
  color: #f4f7f5 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-wide {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-wide strong {
  font-size: 1.625rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-wide .inventory-summary-metric span,
body[data-active-module="clientes"] #panel-clientes #clients-last-updated-copy {
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filters-shell {
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(42, 51, 56, 0.22) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.92), rgba(12, 15, 17, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.03);
}

body[data-active-module="clientes"] #panel-clientes .inventory-filters-head {
  align-items: center !important;
  padding-bottom: 0 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filters-head strong {
  color: #59a8e8 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-reset-button {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border-color: rgba(157, 168, 163, 0.22) !important;
  background: rgba(18, 23, 26, 0.96) !important;
  color: #59a8e8 !important;
  font-size: 0.8125rem !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar {
  grid-template-columns: minmax(320px, 1.35fr) minmax(168px, 0.42fr) minmax(168px, 0.42fr) auto !important;
  align-items: end !important;
  gap: 14px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filter-field {
  gap: 8px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filter-field span {
  color: #e0c765 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filter-search {
  min-width: 0 !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar input,
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar select {
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(157, 168, 163, 0.24) !important;
  background: rgba(12, 15, 17, 0.95) !important;
  color: #59a8e8 !important;
  box-shadow: inset 0 1px 0 rgba(244, 247, 245, 0.03) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar input {
  padding-left: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23869bb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar input::placeholder {
  color: #9da8a3 !important;
}


body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar-meta {
  align-self: end !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar-meta span {
  color: #9da8a3 !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar-meta p {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(157, 168, 163, 0.22) !important;
  background: rgba(12, 15, 17, 0.95) !important;
  color: #59a8e8 !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table-wrap {
  padding: 8px 10px 2px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(42, 51, 56, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.96)) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table {
  min-width: 1260px !important;
  border-spacing: 0 12px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th {
  padding: 0 14px 10px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  color: #9da8a3 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.1em !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td {
  padding: 18px 16px !important;
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.98), rgba(12, 15, 17, 0.98)) !important;
  border-top: 1px solid rgba(157, 168, 163, 0.18) !important;
  border-bottom: 1px solid rgba(157, 168, 163, 0.12) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(2) {
  width: 22% !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(3) {
  width: 11% !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(4) {
  width: 27% !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(5) {
  width: 16% !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(6) {
  width: 228px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:first-child {
  border-left: 1px solid rgba(157, 168, 163, 0.18) !important;
  border-top-left-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:last-child {
  width: 228px !important;
  min-width: 228px !important;
  border-right: 1px solid rgba(157, 168, 163, 0.18) !important;
  border-top-right-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr:hover td {
  background: linear-gradient(180deg, rgba(18, 23, 26, 0.98), rgba(12, 15, 17, 0.98)) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active td {
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.99), rgba(36, 180, 126, 0.99)) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-index-badge {
  border-color: rgba(80, 209, 154, 0.34) !important;
  background: rgba(36, 180, 126, 0.98) !important;
  color: #50d19a !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-index-badge {
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border-color: rgba(157, 168, 163, 0.22) !important;
  background: rgba(18, 23, 26, 0.96) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-count-cell {
  gap: 7px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-count-main {
  color: #59a8e8 !important;
  font-size: 2rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.04em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-count-cell span,
body[data-active-module="clientes"] #panel-clientes .inventory-count-cell small {
  color: #9da8a3 !important;
  font-size: 0.75rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-client-main,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-main,
body[data-active-module="clientes"] #panel-clientes .inventory-date-main {
  color: #f4f7f5 !important;
  letter-spacing: -0.015em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-client-main {
  font-size: 1rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-reference-main {
  font-size: 1.125rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-client-sub,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-sub,
body[data-active-module="clientes"] #panel-clientes .inventory-updated-at {
  color: #9da8a3 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-type-pill {
  border-color: rgba(157, 168, 163, 0.22) !important;
  background: rgba(18, 23, 26, 0.95) !important;
  color: #cad4cf !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-date-pill {
  border-color: rgba(42, 51, 56, 0.2) !important;
  background: rgba(18, 23, 26, 0.95) !important;
  color: #cad4cf !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-history-pill {
  border-color: rgba(36, 180, 126, 0.28) !important;
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.9), rgba(36, 180, 126, 0.9)) !important;
  color: #50d19a !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions {
  min-width: 0 !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action {
  min-width: 98px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-open {
  border: 1px solid rgba(157, 168, 163, 0.22) !important;
  background: rgba(18, 23, 26, 0.96) !important;
  color: #59a8e8 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-load {
  border: 1px solid rgba(36, 180, 126, 0.28) !important;
  background: linear-gradient(180deg, rgba(36, 180, 126, 0.96), rgba(36, 180, 126, 0.96)) !important;
  color: #50d19a !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-delete {
  border: 1px solid rgba(239, 114, 114, 0.28) !important;
  background: rgba(239, 114, 114, 0.96) !important;
  color: #ef7272 !important;
}

/* Vista clientes compacta y alineada con la paleta del app. */
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block {
  padding: 12px 16px 18px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head {
  padding: 0 2px 2px !important;
  margin-bottom: 2px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head h3 {
  color: #e0c765 !important;
  font-size: 1.3125rem !important;
  letter-spacing: -0.02em !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head .module-help {
  max-width: 52ch !important;
  margin-top: 4px !important;
  color: rgba(224, 199, 101, 0.66) !important;
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-strip {
  gap: 10px !important;
  margin-top: 0 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card {
  gap: 10px !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
  border-color: rgba(224, 199, 101, 0.12) !important;
  background: linear-gradient(180deg, rgba(12, 15, 17, 0.96), rgba(7, 8, 9, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 247, 245, 0.02),
    0 10px 22px rgba(7, 8, 9, 0.12) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  border-color: rgba(224, 199, 101, 0.16) !important;
  background: rgba(199, 165, 75, 0.9) !important;
  color: #e0c765 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-clients .inventory-summary-icon {
  background: rgba(36, 180, 126, 0.92) !important;
  color: #50d19a !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-records .inventory-summary-icon {
  background: rgba(199, 165, 75, 0.92) !important;
  color: #e0c765 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-history .inventory-summary-icon,
body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-updated .inventory-summary-icon {
  background: rgba(36, 180, 126, 0.92) !important;
  color: #50d19a !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-metric {
  gap: 2px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card strong {
  color: #e0c765 !important;
  font-size: 1.3125rem !important;
  line-height: 1.3 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-wide strong {
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-metric span {
  color: rgba(224, 199, 101, 0.76) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.09em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filters-shell {
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
  border-color: rgba(224, 199, 101, 0.12) !important;
  background: linear-gradient(180deg, rgba(7, 8, 9, 0.96), rgba(7, 8, 9, 0.96)) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filters-head strong {
  color: #e0c765 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.09em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-reset-button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border-color: rgba(224, 199, 101, 0.14) !important;
  background: rgba(12, 15, 17, 0.96) !important;
  color: #e0c765 !important;
  font-size: 0.75rem !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar {
  grid-template-columns: minmax(280px, 1.5fr) minmax(148px, 0.42fr) minmax(148px, 0.42fr) auto !important;
  gap: 10px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filter-field {
  gap: 6px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-filter-field span {
  color: #e0c765 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar input,
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar select {
  height: 38px !important;
  border-radius: 10px !important;
  border-color: rgba(224, 199, 101, 0.14) !important;
  background: rgba(7, 8, 9, 0.96) !important;
  color: #e0c765 !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar input {
  padding-left: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239f915e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 15px 15px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar input::placeholder {
  color: rgba(224, 199, 101, 0.54) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar-meta span {
  color: rgba(224, 199, 101, 0.72) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar-meta p {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  border-color: rgba(224, 199, 101, 0.12) !important;
  background: rgba(7, 8, 9, 0.96) !important;
  color: #e0c765 !important;
  font-size: 0.75rem !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table-wrap {
  padding: 2px 4px 0 !important;
  border-radius: 10px !important;
  border-color: rgba(224, 199, 101, 0.07) !important;
  background: rgba(7, 8, 9, 0.98) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table {
  min-width: 980px !important;
  border-spacing: 0 2px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th {
  padding: 0 9px 5px !important;
  color: rgba(224, 199, 101, 0.58) !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(1) {
  width: 42px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th:nth-child(6),
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:last-child {
  width: 196px !important;
  min-width: 196px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td {
  padding: 7px 9px !important;
  background: rgba(244, 247, 245, 0.018) !important;
  border-top-color: rgba(224, 199, 101, 0.045) !important;
  border-bottom-color: rgba(224, 199, 101, 0.025) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:first-child {
  border-left-color: rgba(224, 199, 101, 0.045) !important;
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:last-child {
  border-right-color: rgba(224, 199, 101, 0.045) !important;
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr:hover {
  transform: none !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr:hover td {
  background: rgba(224, 199, 101, 0.035) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active td {
  background: rgba(36, 180, 126, 0.055) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active td:first-child {
  box-shadow: inset 2px 0 rgba(80, 209, 154, 0.45) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-index {
  width: 42px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-index-badge {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 5px !important;
  border-radius: 7px !important;
  border-color: transparent !important;
  background: rgba(224, 199, 101, 0.055) !important;
  color: rgba(224, 199, 101, 0.72) !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.03em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-client-cell,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-cell,
body[data-active-module="clientes"] #panel-clientes .inventory-history-cell,
body[data-active-module="clientes"] #panel-clientes .inventory-count-cell {
  gap: 2px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-count-main {
  font-size: 1rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  color: rgba(224, 199, 101, 0.9) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-count-cell span,
body[data-active-module="clientes"] #panel-clientes .inventory-count-cell small,
body[data-active-module="clientes"] #panel-clientes .inventory-client-sub,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-sub,
body[data-active-module="clientes"] #panel-clientes .inventory-updated-at {
  color: rgba(224, 199, 101, 0.5) !important;
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-client-main,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-main,
body[data-active-module="clientes"] #panel-clientes .inventory-date-main {
  color: rgba(224, 199, 101, 0.9) !important;
  font-size: 0.8125rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-reference-main {
  font-size: 0.8125rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-inline-pills {
  gap: 3px !important;
  margin-top: 3px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-type-pill,
body[data-active-module="clientes"] #panel-clientes .inventory-date-pill,
body[data-active-module="clientes"] #panel-clientes .inventory-history-pill {
  min-height: 17px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  border-color: transparent !important;
  background: rgba(224, 199, 101, 0.045) !important;
  color: rgba(224, 199, 101, 0.76) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-history-pill {
  background: rgba(36, 180, 126, 0.11) !important;
  color: rgba(80, 209, 154, 0.82) !important;
  letter-spacing: 0.03em !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions {
  gap: 2px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action {
  min-width: 0 !important;
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 6px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(224, 199, 101, 0.7) !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-icon {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.72 !important;
  flex: 0 0 auto !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-icon svg {
  display: block !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-label {
  display: inline-block !important;
  line-height: 1.3 !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action:hover,
body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action:focus-visible {
  border-color: rgba(80, 209, 154, 0.16) !important;
  background: rgba(80, 209, 154, 0.065) !important;
  color: rgba(80, 209, 154, 0.92) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-open {
  color: rgba(224, 199, 101, 0.72) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-load {
  color: rgba(80, 209, 154, 0.78) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-actions .table-action-delete {
  color: rgba(239, 114, 114, 0.65) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-actions .table-action {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(80, 209, 154, 0.76) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-actions .table-action-open {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(80, 209, 154, 0.82) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-actions .table-action-load {
  border-color: rgba(80, 209, 154, 0.12) !important;
  background: rgba(80, 209, 154, 0.075) !important;
  color: rgba(80, 209, 154, 0.88) !important;
  box-shadow: none !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-actions .table-action-load:hover,
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr.is-active .inventory-actions .table-action-load:focus-visible {
  border-color: rgba(80, 209, 154, 0.2) !important;
  background: rgba(80, 209, 154, 0.11) !important;
  color: rgba(244, 247, 245, 0.96) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-empty {
  color: rgba(224, 199, 101, 0.68) !important;
  font-size: 0.75rem !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 0;
}

body[data-active-module="clientes"] #panel-clientes .inventory-list-footer p {
  margin: 0;
  color: rgba(224, 199, 101, 0.64);
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  body[data-active-module="clientes"] #panel-clientes .inventory-summary-strip,
  body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-toolbar {
    grid-template-columns: 1fr !important;
  }

  body[data-active-module="clientes"] #panel-clientes .inventory-summary-card-wide span,
  body[data-active-module="clientes"] #panel-clientes #clients-last-updated-copy {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  body[data-active-module="clientes"] #panel-clientes .clients-inventory-block {
    padding: 14px 14px 20px !important;
  }

  body[data-active-module="clientes"] #panel-clientes .clients-inventory-block > .block-head h3 {
    font-size: 1.125rem !important;
  }
}

html.printing-tech-sheet-root,
html.printing-tech-sheet-root body {
  width: 11in !important;
  height: 8.5in !important;
  min-width: 11in !important;
  min-height: 8.5in !important;
  max-width: 11in !important;
  max-height: 8.5in !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f4f7f5 !important;
}

body[data-viewer-mode="consulta-fda"] .yt-header,
body[data-viewer-mode="consulta-fda"] .yt-sidebar,
body[data-viewer-mode="consulta-fda"] .yt-right-panel,
body[data-viewer-mode="consulta-fda"] .workspace-hero,
body[data-viewer-mode="consulta-fda"] .viewer-shell-head,
body[data-viewer-mode="consulta-fda"] .validation-monitor,
body[data-viewer-mode="consulta-fda"] #main-content-builder-anchor,
body[data-viewer-mode="consulta-fda"] .controls-panel,
body[data-viewer-mode="consulta-fda"] .login-gate {
  display: none !important;
}

body[data-viewer-mode="consulta-fda"] {
  background: #070809 !important;
}

body[data-viewer-mode="consulta-fda"].login-locked {
  overflow: auto !important;
}

body[data-viewer-mode="consulta-fda"].login-locked .app-shell {
  display: block !important;
}

body[data-viewer-mode="consulta-fda"] .yt-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body[data-viewer-mode="consulta-fda"] .yt-main-content {
  padding: 12px !important;
  background: #070809 !important;
}

body[data-viewer-mode="consulta-fda"] .preview-panel,
body[data-viewer-mode="consulta-fda"] .viewer-shell,
body[data-viewer-mode="consulta-fda"] .viewer-stage,
body[data-viewer-mode="consulta-fda"] .sheet-viewport,
body[data-viewer-mode="consulta-fda"] .sheet-stage {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-viewer-mode="consulta-fda"] .preview-panel,
body[data-viewer-mode="consulta-fda"] .viewer-shell {
  padding: 0 !important;
  background: transparent !important;
}

body[data-viewer-mode="consulta-fda"] .viewer-stage,
body[data-viewer-mode="consulta-fda"] .sheet-viewport,
body[data-viewer-mode="consulta-fda"] .sheet-stage {
  min-height: 0 !important;
}

body[data-viewer-mode="consulta-fda"] #sheet-stage {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

body[data-viewer-mode="consulta-fda"] .sheet-stage .final-sheet {
  margin: 0 auto !important;
}

/* El visor público conserva la hoja original y adapta únicamente su encuadre. */
@media screen {
  html:not(.printing-tech-sheet-root) body[data-viewer-mode="consulta-fda"] {
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
  }
  html:not(.printing-tech-sheet-root) body[data-viewer-mode="consulta-fda"] :is(.app-shell, .yt-layout, .yt-main-content, .preview-panel, .viewer-shell, .viewer-stage, .sheet-viewport) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html:not(.printing-tech-sheet-root) body[data-viewer-mode="consulta-fda"] #sheet-stage {
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }
  html:not(.printing-tech-sheet-root) body[data-viewer-mode="consulta-fda"] .final-sheet {
    border-radius: 0 !important;
  }
}

body[data-viewer-mode="consulta-fda"] .drop-target,
body[data-viewer-mode="consulta-fda"] .viewer-toggle-button {
  pointer-events: none !important;
  cursor: default !important;
}

/* Aviso de fallo del visor.

   Se pinta sobre el fondo oscuro del modo visor, que es donde de verdad hace
   falta: ahi el panel de controles no existe y este es el unico sitio donde el
   cliente puede enterarse de que algo no cargo. */
.viewer-failure {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(254, 226, 226, 0.96);
  color: #7f1d1d;
}

.viewer-failure[hidden] {
  display: none;
}

.viewer-failure-titulo {
  font-size: 0.92rem;
  font-weight: 700;
}

.viewer-failure-detalle {
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.9;
}

html.printing-tech-sheet-root body::before,
html.printing-tech-sheet-root .login-gate,
html.printing-tech-sheet-root .page-glow,
html.printing-tech-sheet-root .yt-header,
html.printing-tech-sheet-root .app-topbar,
html.printing-tech-sheet-root .yt-sidebar,
html.printing-tech-sheet-root .yt-right-panel,
html.printing-tech-sheet-root .workspace-hero,
html.printing-tech-sheet-root .viewer-shell-head,
html.printing-tech-sheet-root .validation-monitor,
html.printing-tech-sheet-root #main-content-builder-anchor,
html.printing-tech-sheet-root .controls-panel,
html.printing-tech-sheet-root .preview-shell-head {
  display: none !important;
}

html.printing-tech-sheet-root #sheet,
html.printing-tech-sheet-root #sheet * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

html.printing-tech-sheet-root .sheet-stage .final-sheet {
  transform: none !important;
  transform-origin: top left !important;
  margin: 0 !important;
  box-shadow: none !important;
}

html.printing-tech-sheet-root .app-shell,
html.printing-tech-sheet-root .yt-layout,
html.printing-tech-sheet-root .yt-main-content,
html.printing-tech-sheet-root .preview-panel,
html.printing-tech-sheet-root .viewer-shell,
html.printing-tech-sheet-root .viewer-stage,
html.printing-tech-sheet-root .sheet-viewport,
html.printing-tech-sheet-root .sheet-stage,
html.printing-tech-sheet-root #sheet {
  display: block !important;
  width: 11in !important;
  min-width: 11in !important;
  max-width: 11in !important;
  height: 8.5in !important;
  min-height: 8.5in !important;
  max-height: 8.5in !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

html.printing-tech-sheet-root .yt-layout {
  gap: 0 !important;
}

html.printing-tech-sheet-root .yt-main-content,
html.printing-tech-sheet-root .preview-panel,
html.printing-tech-sheet-root .viewer-shell,
html.printing-tech-sheet-root .viewer-stage,
html.printing-tech-sheet-root .sheet-viewport,
html.printing-tech-sheet-root .sheet-stage {
  position: static !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html.printing-tech-sheet-root #sheet-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 11in !important;
  min-width: 11in !important;
  max-width: 11in !important;
  height: 8.5in !important;
  min-height: 8.5in !important;
  max-height: 8.5in !important;
}

html.printing-tech-sheet-root #sheet {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 11in !important;
  min-width: 11in !important;
  max-width: 11in !important;
  height: 8.5in !important;
  min-height: 8.5in !important;
  max-height: 8.5in !important;
  aspect-ratio: auto !important;
  transform: none !important;
}

/* Impresion nativa de ficha tecnica: el boton PDF abre window.print() y esta
   capa mapea la ficha visible completa a una hoja Letter horizontal. */
@media print {
  #sheet-save-progress { display: none !important; }
  #linked-sheet-tabs, #bag-label-settings { display: none !important; }
  @page {
    size: 11in 8.5in;
    margin: 0;
  }

  html.printing-tech-sheet-root,
  html.printing-tech-sheet-root body {
    width: 11in !important;
    height: 8.5in !important;
    min-width: 11in !important;
    min-height: 8.5in !important;
    max-width: 11in !important;
    max-height: 8.5in !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f4f7f5 !important;
  }

  html.printing-tech-sheet-root body::before,
  html.printing-tech-sheet-root .login-gate,
  html.printing-tech-sheet-root .page-glow,
  html.printing-tech-sheet-root .yt-header,
  html.printing-tech-sheet-root .app-topbar,
  html.printing-tech-sheet-root .yt-sidebar,
  html.printing-tech-sheet-root .yt-right-panel,
  html.printing-tech-sheet-root .workspace-hero,
  html.printing-tech-sheet-root .viewer-shell-head,
  html.printing-tech-sheet-root .validation-monitor,
  html.printing-tech-sheet-root #main-content-builder-anchor,
  html.printing-tech-sheet-root .controls-panel,
  html.printing-tech-sheet-root .preview-shell-head {
    display: none !important;
  }

  html.printing-tech-sheet-root #sheet,
  html.printing-tech-sheet-root #sheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html.printing-tech-sheet-root .sheet-stage .final-sheet {
    transform: none !important;
    transform-origin: top left !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  html.printing-tech-sheet-root .app-shell,
  html.printing-tech-sheet-root .yt-layout,
  html.printing-tech-sheet-root .yt-main-content,
  html.printing-tech-sheet-root .preview-panel,
  html.printing-tech-sheet-root .viewer-shell,
  html.printing-tech-sheet-root .viewer-stage,
  html.printing-tech-sheet-root .sheet-viewport,
  html.printing-tech-sheet-root .sheet-stage,
  html.printing-tech-sheet-root #sheet {
    display: block !important;
    width: 11in !important;
    min-width: 11in !important;
    max-width: 11in !important;
    height: 8.5in !important;
    min-height: 8.5in !important;
    max-height: 8.5in !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  html.printing-tech-sheet-root .app-shell {
    padding: 0 !important;
  }

  html.printing-tech-sheet-root .yt-layout {
    display: block !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  html.printing-tech-sheet-root .yt-main-content,
  html.printing-tech-sheet-root .preview-panel,
  html.printing-tech-sheet-root .viewer-shell,
  html.printing-tech-sheet-root .viewer-stage,
  html.printing-tech-sheet-root .sheet-viewport,
  html.printing-tech-sheet-root .sheet-stage {
    position: static !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 11in !important;
    max-height: 8.5in !important;
  }

  html.printing-tech-sheet-root #sheet-stage {
    position: fixed !important;
    inset: 0 !important;
    width: 11in !important;
    min-width: 11in !important;
    max-width: 11in !important;
    height: 8.5in !important;
    min-height: 8.5in !important;
    max-height: 8.5in !important;
  }

  html.printing-tech-sheet-root #sheet {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 11in !important;
    min-width: 11in !important;
    max-width: 11in !important;
    height: 8.5in !important;
    min-height: 8.5in !important;
    max-height: 8.5in !important;
    aspect-ratio: auto !important;
    transform: none !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-before: avoid !important;
    break-after: avoid !important;
    break-inside: avoid !important;
  }

  html.printing-tech-sheet-root .template-sheet,
  html.printing-tech-sheet-root .template-canvas {
    width: 11in !important;
    min-width: 11in !important;
    max-width: 11in !important;
    height: 8.5in !important;
    min-height: 8.5in !important;
    max-height: 8.5in !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
}

/* Rebalance tipografico: menos peso visual en app y ficha sin perder jerarquia. */
body.yt-dark {
  --app-font-weight-label: 500;
  --app-font-weight-strong: 600;
  --app-font-weight-heavy: 700;
  --app-label-tracking: 0.05em;
  --app-kicker-tracking: 0.09em;
}

.template-sheet {
  --template-font-weight-base: 600;
  --template-font-weight-strong: 700;
}

.template-sheet .tpl-value,
.template-sheet .tpl-date-grid strong,
.template-sheet .tpl-color-item strong,
.template-sheet .tpl-instruction-item strong,
.template-sheet .plan-dim-text,
.template-sheet .plan-callout-label {
  font-weight: var(--template-font-weight-base) !important;
}

.template-sheet #preview-brand-text,
.template-sheet .check-option.is-active i::before,
.template-sheet .tpl-preview-top strong,
.template-sheet .tpl-preview-warning,
.template-sheet .tpl-preview-label,
.template-sheet .tpl-pill,
.template-sheet .tpl-change-col strong,
.template-sheet .tpl-observations-text,
.template-sheet .tpl-signature-value,
.template-sheet #preview-production-summary strong {
  font-weight: var(--template-font-weight-strong) !important;
}

.template-sheet .tpl-value,
.template-sheet .tpl-color-item strong,
.template-sheet .tpl-pill,
.template-sheet .tpl-change-col strong,
.template-sheet .tpl-signature-value,
.template-sheet #preview-brand-text {
  letter-spacing: -0.01em !important;
}

.template-sheet .tpl-customer .tpl-value,
.template-sheet .tpl-reference .tpl-value {
  letter-spacing: 0.006em !important;
}

.sidebar-intro h2,
.panel-header-yt h3,
body[data-active-module="crear-ficha"] #panel-crear-ficha .block-head h3,
body[data-active-module="configuracion"] .config-format-item strong {
  font-weight: var(--app-font-weight-heavy) !important;
}

.sidebar-eyebrow,
.workspace-kicker,
.viewer-kicker {
  font-weight: var(--app-font-weight-strong) !important;
  letter-spacing: var(--app-kicker-tracking) !important;
}

.sidebar-card span,
.hero-stat-card span,
.detail-card span,
.side-summary-card span,
.viewer-meta span,
body[data-active-module="clientes"] #panel-clientes .inventory-summary-metric span,
.field-label,
label span,
.yt-right-panel .form-block label span,
.yt-right-panel .field-label,
.yt-right-panel .mini-field span,
.form-note,
.yt-right-panel .form-note,
body[data-active-module="crear-ficha"] #panel-crear-ficha label span,
body[data-active-module="crear-ficha"] #panel-crear-ficha .field-label,
body[data-active-module="crear-ficha"] #panel-crear-ficha .form-note,
.module-nav-copy small,
.session-info small {
  font-weight: var(--app-font-weight-label) !important;
}

.sidebar-card span,
.hero-stat-card span,
.detail-card span,
.side-summary-card span,
.viewer-meta span,
body[data-active-module="clientes"] #panel-clientes .inventory-summary-metric span {
  letter-spacing: var(--app-label-tracking) !important;
}

.workflow-step,
.module-nav-copy strong,
.builder-tab,
.segmented-option,
.primary-button,
.secondary-button,
.ghost-button,
.yt-btn-primary,
.yt-btn-secondary,
.table-action,
.editor-actions-footer button,
.smart-chat-actions button,
.search-btn,
.session-avatar,
.session-info strong,
.session-exit,
.template-library-badge,
.config-format-badge,
body[data-active-module="clientes"] #panel-clientes .inventory-summary-card strong {
  font-weight: var(--app-font-weight-strong) !important;
}

.template-library-badge,
.config-format-badge {
  letter-spacing: 0.02em !important;
}

/* ---------------------------------------------------------------------------
   Modulo de solicitudes
   --------------------------------------------------------------------------- */
.solicitudes-grid {
  display: grid;
  gap: 18px;
}

.solicitudes-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.solicitudes-buscador {
  grid-column: 1 / -1;
}

.solicitudes-aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(224, 199, 101, 0.45);
  background: rgba(224, 199, 101, 0.12);
  font-size: 0.875rem;
}

.solicitudes-tabla-wrap {
  overflow-x: auto;
}

.solicitudes-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.solicitudes-tabla th,
.solicitudes-tabla td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(157, 168, 163, 0.22);
  white-space: nowrap;
}

.solicitudes-tabla th {
  font-weight: 700;
  opacity: 0.8;
}

.solicitudes-tabla tbody tr[data-solicitud-id] {
  cursor: pointer;
}

.solicitudes-tabla tbody tr[data-solicitud-id]:hover,
.solicitudes-tabla tbody tr.is-selected {
  background: rgba(224, 199, 101, 0.14);
}

.solicitudes-tabla td.solicitud-asunto {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solicitudes-vacio td {
  opacity: 0.6;
  font-style: italic;
}

.solicitud-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.solicitud-chip[data-estado="nueva"] { border-color: rgba(224, 199, 101, 0.8); background: rgba(224, 199, 101, 0.18); }
.solicitud-chip[data-estado="asignada"] { border-color: rgba(89, 168, 232, 0.8); background: rgba(89, 168, 232, 0.16); }
.solicitud-chip[data-estado="en_proceso"] { border-color: rgba(156, 139, 216, 0.8); background: rgba(156, 139, 216, 0.16); }
.solicitud-chip[data-estado="completada"] { border-color: rgba(80, 209, 154, 0.8); background: rgba(80, 209, 154, 0.16); }
.solicitud-chip[data-estado="descartada"] { border-color: rgba(157, 168, 163, 0.7); background: rgba(157, 168, 163, 0.14); }

.solicitud-prioridad-urgente,
.solicitud-prioridad-alta {
  color: #ef7272;
  font-weight: 700;
}

.solicitud-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.solicitud-seccion {
  margin-top: 16px;
}

.solicitud-seccion h4 {
  margin: 0 0 8px;
  font-size: 0.875rem;
}

.solicitud-adjuntos,
.solicitud-detectado,
.solicitud-bitacora {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
}

.solicitud-adjuntos li,
.solicitud-bitacora li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(157, 168, 163, 0.22);
  border-radius: 8px;
}

.solicitud-adjuntos li.tiene-error {
  border-color: rgba(239, 114, 114, 0.5);
  background: rgba(239, 114, 114, 0.08);
}

.solicitud-adjunto-meta {
  opacity: 0.68;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* La entrada de la bitacora pasa a dos lineas: que paso arriba y el detalle
   debajo. La fecha se queda a la derecha, arriba del todo. */
.solicitud-bitacora li {
  align-items: flex-start;
}

.solicitud-evento-cuerpo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* El comentario del cliente puede ser largo y con saltos de linea: se deja
   respirar en vez de recortarlo, que es justo lo que hay que leer. */
.solicitud-evento-detalle {
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.82;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.solicitud-cuerpo {
  margin: 0;
  padding: 12px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(157, 168, 163, 0.22);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.solicitud-detectado li {
  display: flex;
  gap: 10px;
}

.solicitud-detectado strong {
  min-width: 130px;
}

/* Una solicitud con respuesta del cliente sin atender salta a la vista. */
.solicitudes-tabla tbody tr.espera-respuesta td:first-child {
  box-shadow: inset 3px 0 0 var(--yt-accent, #59a8e8);
}

.solicitud-hilo {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(157, 168, 163, 0.4);
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Redactor de respuesta dentro de la solicitud */
.solicitud-respuesta {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
}

.solicitud-respuesta-acciones {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.solicitud-respuesta-aviso {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  opacity: 0.78;
}

.solicitud-respuesta-aviso.es-error {
  color: #ef7272;
  opacity: 1;
}

/* Un mensaje del hilo, para distinguir lo que entra de lo que sale */
.solicitud-mensaje {
  border: 1px solid rgba(157, 168, 163, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.solicitud-mensaje.es-saliente {
  border-left: 3px solid rgba(224, 199, 101, 0.75);
  background: rgba(224, 199, 101, 0.07);
}

.solicitud-mensaje-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  opacity: 0.72;
  margin-bottom: 6px;
}


/* ==========================================================================
   Solicitudes y Clientes: rediseno
   ==========================================================================
   Dos problemas que arrastraban estos modulos:

   1. Ancho. .yt-layout reserva tres columnas (barra, contenido, panel derecho
      de 430px). Ese panel muestra la vista previa de la ficha, que aqui no
      aplica, pero seguia ocupando su columna: el contenido se quedaba con la
      mitad de la pantalla y el resto era negro vacio. Se colapsa por modulo.

   2. Contraste. Todo estaba al mismo nivel de negro, asi que nada se leia como
      separado de nada. Se establece una jerarquia de tres superficies (fondo,
      tarjeta, elemento) y el color se reserva para el estado, que es la
      informacion que se busca de un vistazo.
   ========================================================================== */

/* Mismo patron que ya usa "configuracion" mas abajo, !important incluido: hay
   una veintena de reglas compitiendo por .yt-layout y sin el la declaracion no
   gana. Se sigue la convencion del proyecto en vez de abrir una segunda. */
body[data-active-module="solicitudes"].module-wide .yt-layout,
body[data-active-module="clientes"].module-wide .yt-layout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-module="solicitudes"].sidebar-collapsed.module-wide .yt-layout,
body[data-active-module="clientes"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

body[data-active-module="solicitudes"] .yt-right-panel,
body[data-active-module="clientes"] .yt-right-panel {
  display: none !important;
}

/* Los cortes de la app se repiten aqui: al llevar !important, una sola regla
   sin consulta de medios se impone tambien en pantallas estrechas y deja la
   barra lateral dentro de la rejilla, encimada sobre la cabecera. */
@media (max-width: 1320px) {
  body[data-active-module="solicitudes"].module-wide .yt-layout,
  body[data-active-module="solicitudes"].sidebar-collapsed.module-wide .yt-layout,
  body[data-active-module="clientes"].module-wide .yt-layout,
  body[data-active-module="clientes"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}
}

@media (max-width: 1080px) {
  body[data-active-module="solicitudes"].module-wide .yt-layout,
  body[data-active-module="solicitudes"].sidebar-collapsed.module-wide .yt-layout,
  body[data-active-module="clientes"].module-wide .yt-layout,
  body[data-active-module="clientes"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}
}

/* El panel media mas que su carril y por eso aparecia scroll horizontal. */
body[data-active-module="solicitudes"] .editor-panels,
body[data-active-module="clientes"] .editor-panels,
body[data-active-module="cliente-detalle"] .editor-panels,

body[data-active-module="solicitudes"] .module-panel,
body[data-active-module="clientes"] .module-panel,
body[data-active-module="cliente-detalle"] .module-panel {
  min-width: 0;
}

/* --- Superficies -------------------------------------------------------- */
#panel-solicitudes,
#panel-clientes,
#panel-cliente-detalle {
  --sup-fondo: #0c0f11;
  --sup-tarjeta: #12171a;
  --sup-elemento: #1b2327;
  --sup-elevado: #1b2327;
  --sup-linea: rgba(157, 168, 163, 0.16);
  --sup-linea-fuerte: rgba(157, 168, 163, 0.32);
}

#panel-solicitudes .form-block,
#panel-clientes .form-block {
  background: linear-gradient(180deg, #12171a, #0c0f11);
  border: 1px solid var(--sup-linea);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

/* La cabecera de cada bloque va sobre una banda mas clara: es lo que separa
   visualmente una tarjeta de la siguiente sin dibujar mas lineas. */
#panel-solicitudes .form-block > .block-head,
#panel-clientes .form-block > .block-head {
  margin: 0;
  padding: 16px 20px;
  background: var(--sup-elemento);
  border-bottom: 1px solid var(--sup-linea);
  align-items: center;
}

#panel-solicitudes .form-block > .block-head h3,
#panel-clientes .form-block > .block-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

#panel-solicitudes .form-block > .block-head .module-help,
#panel-clientes .form-block > .block-head .module-help {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

/* --- Solicitudes: bandeja y detalle lado a lado -------------------------- */
/* Antes iban apilados en una sola columna, asi que para ver el detalle habia
   que perder de vista la bandeja. Con la pantalla completa caben los dos. */
.solicitudes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr);
  align-items: start;
  gap: 18px;
}

/* Sin solicitud abierta la bandeja ocupa todo. */
.solicitudes-grid:has(> .solicitudes-detalle-block[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1180px) {
  .solicitudes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.solicitudes-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px 20px;
  background: var(--sup-fondo);
  border-bottom: 1px solid var(--sup-linea);
}

.solicitudes-filtros label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.solicitudes-filtros label > span {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.solicitudes-filtros select,
.solicitudes-filtros input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}

.solicitudes-filtros select:focus-visible,
.solicitudes-filtros input:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.solicitudes-buscador {
  grid-column: 1 / -1;
}

/* La tabla se desplaza sola; la cabecera se queda fija para no perder de vista
   que columna se esta leyendo en una bandeja larga. */
.solicitudes-tabla-wrap {
  overflow: auto;
  max-height: min(58vh, 620px);
}

.solicitudes-tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.solicitudes-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sup-elevado);
  color: var(--app-text-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sup-linea-fuerte);
  opacity: 1;
  white-space: nowrap;
}

.solicitudes-tabla td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.09);
  white-space: nowrap;
  vertical-align: middle;
}

.solicitudes-tabla tbody tr[data-solicitud-id] {
  cursor: pointer;
  transition: background 0.12s ease;
}

.solicitudes-tabla tbody tr[data-solicitud-id]:hover {
  background: rgba(157, 168, 163, 0.07);
}

/* La fila abierta se marca con una banda lateral y no solo con relleno: en una
   tabla oscura un cambio de fondo suave se pierde. */
.solicitudes-tabla tbody tr.is-selected {
  background: rgba(157, 168, 163, 0.13);
  box-shadow: inset 3px 0 0 var(--app-accent-strong);
}

.solicitudes-tabla td:first-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.solicitudes-tabla td.solicitud-asunto {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--app-text-dim);
}

.solicitudes-tabla td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--app-text-muted);
}

/* --- Estados: el color es la informacion -------------------------------- */
.solicitud-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.solicitud-chip[data-estado="nueva"]           { color: #e0c765; border-color: rgba(199, 165, 75, 0.55); background: rgba(199, 165, 75, 0.14); }
.solicitud-chip[data-estado="asignada"]        { color: #59a8e8; border-color: rgba(89, 168, 232, 0.55); background: rgba(89, 168, 232, 0.14); }
.solicitud-chip[data-estado="en_proceso"]      { color: #9c8bd8; border-color: rgba(156, 139, 216, 0.55); background: rgba(156, 139, 216, 0.14); }
.solicitud-chip[data-estado="enviada_cliente"] { color: #9da8a3; border-color: rgba(80, 209, 154, 0.55); background: rgba(80, 209, 154, 0.13); }
.solicitud-chip[data-estado="aprobada"]        { color: #50d19a; border-color: rgba(36, 180, 126, 0.7);  background: rgba(36, 180, 126, 0.18); }
.solicitud-chip[data-estado="archivada"]       { color: #50d19a; border-color: rgba(36, 180, 126, 0.42); background: rgba(36, 180, 126, 0.10); }
.solicitud-chip[data-estado="completada"]      { color: #50d19a; border-color: rgba(36, 180, 126, 0.42); background: rgba(36, 180, 126, 0.10); }
.solicitud-chip[data-estado="descartada"]      { color: #9da8a3; border-color: rgba(157, 168, 163, 0.4); background: rgba(157, 168, 163, 0.10); }

.solicitudes-vacio td {
  padding: 34px 16px;
  text-align: center;
  color: var(--app-text-muted);
  font-style: normal;
  opacity: 1;
}

.solicitudes-aviso {
  margin: 0;
  padding: 11px 20px;
  background: rgba(199, 165, 75, 0.09);
  border-bottom: 1px solid var(--sup-linea);
  font-size: 0.875rem;
}

.solicitudes-aviso.es-error {
  background: rgba(239, 114, 114, 0.11);
  color: var(--app-danger);
}

/* --- Solicitudes: el detalle -------------------------------------------- */
/* Se queda a la vista mientras se recorre la bandeja. */
.solicitudes-detalle-block {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
}

/* Todo lo que va bajo la cabecera se desplaza junto. Antes la regla caia sobre
   el primer hermano y, dentro de un flex column, ese bloque se aplastaba a 33px
   con 177px de contenido dentro: los selectores de asignar y estado quedaban
   recortados. Ahora hay un contenedor real para el desplazamiento. */
.solicitud-detalle-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.solicitud-detalle-cuerpo > * {
  padding-inline: 20px;
}

.solicitud-detalle-cuerpo > .solicitud-acciones {
  padding-block: 16px;
  margin: 0;
  background: var(--sup-fondo);
  border-bottom: 1px solid var(--sup-linea);
}

.solicitud-acciones label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.solicitud-acciones label > span {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.solicitud-acciones select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}

.solicitud-acciones select option:disabled {
  color: var(--app-text-muted);
}

/* Cada seccion del detalle es un escalon, no un parrafo mas: el titulo va en
   mayusculas pequenas y el contenido sobre superficie propia. */
.solicitud-seccion {
  padding-block: 16px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.10);
}

.solicitud-seccion:last-child {
  border-bottom: 0;
}

.solicitud-seccion h4 {
  margin: 0 0 10px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-accent);
  font-weight: 700;
}

.solicitud-adjuntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.solicitud-adjuntos li,
.solicitud-adjuntos button {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.solicitud-adjuntos button:hover {
  border-color: var(--sup-linea-fuerte);
  background: var(--sup-elevado);
}

.solicitud-cuerpo {
  margin: 0;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--app-text-dim);
}

.solicitud-mensaje {
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  margin-bottom: 9px;
}

/* Lo que sale de DITAR se distingue de lo que entra sin tener que leerlo. */
.solicitud-mensaje.es-saliente {
  background: rgba(157, 168, 163, 0.08);
  border-color: rgba(157, 168, 163, 0.26);
}

.solicitud-mensaje-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  margin-bottom: 6px;
}

.solicitud-respuesta {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.solicitud-respuesta:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 1px;
}

.solicitud-respuesta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.solicitud-respuesta-aviso {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

.solicitud-respuesta-aviso.es-error {
  color: var(--app-danger);
}

.solicitud-expediente .module-help {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  margin: 0 0 10px;
  font-size: 0.875rem;
}

/* --- Clientes ----------------------------------------------------------- */
/* El inventario es lo que se consulta a diario; el formulario de guardado se
   usa una vez por ficha. El reparto de espacio lo refleja. */
#panel-clientes .client-module-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 2.2fr);
  align-items: start;
  gap: 18px;
}

@media (max-width: 1180px) {
  #panel-clientes .client-module-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#panel-clientes .clients-save-block {
  position: sticky;
  top: 0;
}

#panel-clientes .form-stack,
#panel-clientes .inventory-toolbar {
  padding: 16px 20px;
}

#panel-clientes .form-stack label {
  display: grid;
  gap: 5px;
}

#panel-clientes .form-stack label > span {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

#panel-clientes .form-stack input,
#panel-clientes .form-stack select,
#panel-clientes .inventory-toolbar input,
#panel-clientes .inventory-toolbar select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}

#panel-clientes input:focus-visible,
#panel-clientes select:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 1px;
  border-color: transparent;
}

#panel-clientes .status-surface {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  font-size: 0.8125rem;
  margin: 0;
}

#panel-clientes .inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  background: var(--sup-fondo);
  border-bottom: 1px solid var(--sup-linea);
}

@media (max-width: 900px) {
  #panel-clientes .inventory-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

#panel-clientes .inventory-toolbar-meta p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#panel-clientes .inventory-table-wrap {
  overflow: auto;
  max-height: min(64vh, 700px);
}

#panel-clientes .inventory-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

#panel-clientes .inventory-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sup-elevado);
  color: var(--app-text-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sup-linea-fuerte);
  white-space: nowrap;
}

#panel-clientes .inventory-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(157, 168, 163, 0.09);
  vertical-align: middle;
}

#panel-clientes .inventory-table tbody tr:hover {
  background: rgba(157, 168, 163, 0.07);
}

/* El indice y los contadores en cifras alineadas: se comparan de un vistazo. */
#panel-clientes .inventory-table td:first-child,
#panel-clientes .inventory-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  color: var(--app-text-muted);
}

#panel-clientes .inventory-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* --- Botones de los dos modulos ----------------------------------------- */
#panel-solicitudes .primary-button,
#panel-clientes .primary-button,
#panel-solicitudes .secondary-button,
#panel-clientes .secondary-button,
#panel-solicitudes .ghost-button,
#panel-clientes .ghost-button {
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

/* El color del boton primario no se toca: es verde en toda la app y forzar
   dorado aqui dejaria estos dos modulos fuera de la linea del producto. Solo
   se normaliza la geometria, que es lo que estaba desigual. */

#panel-solicitudes .ghost-button,
#panel-clientes .ghost-button,
#panel-solicitudes .secondary-button,
#panel-clientes .secondary-button {
  background: var(--sup-elemento);
  border-color: var(--sup-linea);
  color: var(--app-text-dim);
}

#panel-solicitudes .ghost-button:hover,
#panel-clientes .ghost-button:hover,
#panel-solicitudes .secondary-button:hover,
#panel-clientes .secondary-button:hover {
  border-color: var(--sup-linea-fuerte);
  background: var(--sup-elevado);
  color: var(--app-text);
}

#panel-solicitudes .dual-grid,
#panel-clientes .dual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* --- La bandeja se adapta a lo que le queda de ancho --------------------- */
/* Con el detalle abierto la lista se queda con la mitad, y siete columnas no
   caben: aparecia scroll horizontal dentro de la tabla. En vez de encogerlo
   todo se retiran las columnas menos decisivas por orden de importancia. La
   consulta es sobre el contenedor, no sobre la ventana, porque lo que manda es
   si el detalle esta abierto, no el tamano de la pantalla. */
.solicitudes-lista-block {
  container-type: inline-size;
  container-name: bandeja;
}

@container bandeja (max-width: 860px) {
  .solicitudes-tabla th:nth-child(6),
  .solicitudes-tabla td:nth-child(6) { display: none; }   /* Disenador */
}

@container bandeja (max-width: 720px) {
  .solicitudes-tabla th:nth-child(5),
  .solicitudes-tabla td:nth-child(5) { display: none; }   /* Adjuntos */
}

@container bandeja (max-width: 600px) {
  .solicitudes-tabla th:nth-child(4),
  .solicitudes-tabla td:nth-child(4) { display: none; }   /* Ultimo correo */
  .solicitudes-tabla td.solicitud-asunto { max-width: 200px; }
}

/* El asunto cede antes que nadie: es lo unico que se puede recortar sin perder
   informacion, porque se lee completo en el detalle. */
@container bandeja (max-width: 980px) {
  .solicitudes-tabla td.solicitud-asunto { max-width: 240px; }
}

/* La fila vacia se centra aunque sea la ultima celda. */
.solicitudes-tabla tbody tr.solicitudes-vacio td,
.solicitudes-tabla tbody tr.solicitudes-vacio td:last-child {
  text-align: center;
}

/* Con el detalle abierto las cuatro columnas que quedan sumaban mas ancho del
   disponible: el codigo se estiraba por su insignia de "N correos" y el nombre
   del cliente por lo largo. El codigo deja que la insignia baje de linea y los
   textos largos se cortan con puntos suspensivos. */
@container bandeja (max-width: 900px) {
  .solicitudes-tabla td:first-child {
    white-space: normal;
    max-width: 130px;
    line-height: 1.35;
  }

  .solicitudes-tabla td:nth-child(2) {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .solicitudes-tabla td.solicitud-asunto {
    max-width: 156px;
  }

  .solicitudes-tabla th,
  .solicitudes-tabla td {
    padding-inline: 11px;
  }
}

/* --- Clientes: historial ------------------------------------------------- */
/* Este modulo habia derivado a una paleta azul-gris (#9da8a3, rgb(12, 15, 17))
   que no es la de la app: al lado del resto se lee como otra herramienta. Se
   devuelve a los tonos calidos de la casa y se sube el contraste entre fila y
   fondo, que era lo que hacia dificil seguir un renglon.
   Va con !important y esta especificidad porque las reglas que pisa las llevan
   tambien: es la convencion que ya tiene el archivo, no una nueva. */
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table-wrap {
  border: 1px solid var(--sup-linea) !important;
  border-radius: 14px !important;
  background: var(--sup-fondo) !important;
  padding: 0 12px 10px !important;
}

/* El encabezado es sticky y estaba transparente: al desplazar, las filas se
   veian pasar por debajo del titulo de la columna. */
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 14px 16px 10px !important;
  background: var(--sup-fondo) !important;
  color: var(--app-text-dim) !important;
  border-bottom: 1px solid var(--sup-linea-fuerte) !important;
}

/* Cada cliente es una tarjeta-fila. El borde y el relleno hacen el trabajo que
   antes se le pedia a un cambio de negro casi imperceptible. */
body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td {
  padding: 15px 16px !important;
  background: var(--sup-elemento) !important;
  border-top: 1px solid var(--sup-linea) !important;
  border-bottom: 1px solid var(--sup-linea) !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:first-child {
  border-left: 1px solid var(--sup-linea) !important;
  border-radius: 12px 0 0 12px !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table td:last-child {
  border-right: 1px solid var(--sup-linea) !important;
  border-radius: 0 12px 12px 0 !important;
}

body[data-active-module="clientes"] #panel-clientes .clients-inventory-block .inventory-table tbody tr:hover td {
  background: var(--sup-elevado) !important;
  border-color: var(--sup-linea-fuerte) !important;
}

/* Los textos secundarios en tono calido, no en azul. */
body[data-active-module="clientes"] #panel-clientes .inventory-client-sub,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-sub,
body[data-active-module="clientes"] #panel-clientes .inventory-updated-at {
  color: var(--app-text-muted) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-client-main,
body[data-active-module="clientes"] #panel-clientes .inventory-reference-main {
  color: var(--app-text) !important;
}

/* Insignias e indices: el acento de la casa. */
body[data-active-module="clientes"] #panel-clientes .inventory-index-badge {
  background: var(--sup-elevado) !important;
  border: 1px solid var(--sup-linea) !important;
  color: var(--app-accent) !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-type-pill,
body[data-active-module="clientes"] #panel-clientes .inventory-history-pill,
body[data-active-module="clientes"] #panel-clientes .inventory-date-pill {
  background: rgba(157, 168, 163, 0.10) !important;
  border: 1px solid var(--sup-linea) !important;
  color: var(--app-text-dim) !important;
}

/* Las tarjetas de resumen de arriba: son el primer golpe de vista. */
body[data-active-module="clientes"] #panel-clientes .inventory-summary-card {
  background: var(--sup-elemento) !important;
  border: 1px solid var(--sup-linea) !important;
  border-radius: 14px !important;
}

body[data-active-module="clientes"] #panel-clientes .inventory-summary-icon {
  background: rgba(157, 168, 163, 0.12) !important;
  color: var(--app-accent) !important;
}

/* --- Solicitudes: el detalle en pestanas --------------------------------- */
/* Eran siete secciones apiladas: para responder habia que bajar media pantalla
   y todo pesaba lo mismo. Ahora se ve una a la vez y el marco se aligera:
   menos bordes, menos relleno, separadores mas finos. */
.solicitud-pestanas {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  background: var(--sup-fondo);
  border-bottom: 1px solid var(--sup-linea);
}

.solicitud-pestana {
  appearance: none;
  border: 0;
  /* Hay un `button { border-radius: 12px !important }` global: sin anularlo con
     la misma fuerza, la pestana activa se dibuja como una pastilla rota encima
     del subrayado. El !important aqui no es capricho, es para empatarlo. */
  border-radius: 0 !important;
  background: none;
  padding: 11px 13px 10px;
  color: var(--app-text-muted);
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600 !important;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.solicitud-pestana:hover {
  color: var(--app-text-dim);
}

/* La activa se marca con el subrayado, no con una caja: una pastilla rellena
   por pestana devolveria el peso que se esta quitando. */
.solicitud-pestana.is-activa {
  color: var(--app-accent-strong);
  border-bottom-color: var(--app-accent-strong);
  font-weight: 700 !important;
}

.solicitud-pestana:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: -3px;
  border-radius: 6px;
}

/* Dentro de una pestana las secciones ya no compiten entre si: no llevan linea
   de separacion salvo cuando hay mas de una. */
.solicitud-tab > .solicitud-seccion {
  border-bottom: 0;
  padding-block: 16px 4px;
}

.solicitud-tab > .solicitud-seccion + .solicitud-seccion {
  border-top: 1px solid rgba(157, 168, 163, 0.09);
  padding-top: 16px;
  margin-top: 12px;
}

.solicitud-tab > .solicitud-seccion:last-child {
  padding-bottom: 18px;
}

/* El cuerpo del correo puede respirar: es lo que mas se lee. */
.solicitud-tab[data-pestana="correo"] .solicitud-cuerpo {
  max-height: none;
  border: 0;
  background: none;
  padding: 0;
}

.solicitud-tab[data-pestana="correo"] .solicitud-mensaje {
  border-color: rgba(157, 168, 163, 0.12);
}

/* Los adjuntos, mas ligeros: sin caja doble. */
.solicitud-adjuntos li {
  border: 0;
  padding: 0;
  background: none;
}

.solicitud-adjuntos button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: rgba(157, 168, 163, 0.12);
  background: var(--sup-fondo);
}

/* La respuesta ocupa la pestana entera: es una sola tarea. */
.solicitud-tab[data-pestana="responder"] .solicitud-respuesta {
  min-height: 190px;
}

.solicitud-tab[data-pestana="responder"] .module-help {
  margin: 0 0 10px;
  font-size: 0.8125rem;
}

/* Listas de datos y bitacora: filas, no tarjetas. */
.solicitud-detectado,
.solicitud-bitacora {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.solicitud-detectado li,
.solicitud-bitacora li {
  padding: 9px 0;
  /* Una regla anterior las dibuja como tarjetas con borde y radio. Aqui son
     renglones de una lista: una linea fina basta para separarlos y quita el
     peso que sobraba. */
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(157, 168, 163, 0.08);
  background: none;
  font-size: 0.875rem;
  color: var(--app-text-dim);
}

.solicitud-detectado li:last-child,
.solicitud-bitacora li:last-child {
  border-bottom: 0;
}

/* El expediente se oculta cuando la solicitud aun no tiene ficha. Sin esto la
   seccion siguiente heredaba el separador de una vecina invisible y aparecia
   una linea suelta arriba. */
.solicitud-tab > .solicitud-seccion[hidden] + .solicitud-seccion {
  border-top: 0;
  margin-top: 0;
}

/* Con el detalle estrecho las pestanas se desplazan en vez de romper la fila. */
@media (max-width: 1400px) {
  .solicitud-pestanas {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .solicitud-pestanas::-webkit-scrollbar { display: none; }
}

/* Hay una regla global que oculta .module-help: se decidio que los textos de
   ayuda no aparezcan. Estos tres no son ayuda, son datos, y sin ellos falta
   informacion en pantalla:
   - el subtitulo del detalle lleva remitente y fecha;
   - el estado del expediente dice si esta guardado y donde;
   - la nota de responder explica que la respuesta va en el mismo hilo, que es
     justo lo que el disenador necesita saber antes de escribir. */
#solicitud-detalle-sub,
#solicitud-expediente-estado,
.solicitud-tab[data-pestana="responder"] .module-help {
  display: block;
}

/* --- El plano de la solicitud -------------------------------------------- */
.solicitud-plano-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.solicitud-plano-campos label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.solicitud-plano-campos label > span {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.solicitud-plano-campos input,
.solicitud-plano-campos select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}

.solicitud-plano-campos input:focus-visible,
.solicitud-plano-campos select:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* El estado del plano es un dato, no un texto de ayuda: la regla global que
   oculta .module-help no debe alcanzarlo. */
#solicitud-plano-estado {
  display: block;
  padding: 10px 12px;
  margin: 0 0 12px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  font-size: 0.875rem;
  line-height: 1.5;
}

#solicitud-plano-estado.es-error {
  border-color: rgba(239, 114, 114, 0.4);
  color: var(--app-danger);
}


/* ==========================================================================
   Solicitudes: estructura del prototipo, paleta de la casa
   ==========================================================================
   Se adopta la maqueta del prototipo (metricas arriba, bandeja en tarjetas,
   detalle con cabecera, flujo y pestanas) pero con los colores que ya usa la
   app: el oro --app-accent-strong y las superficies --sup-*. El prototipo
   traia su propio verde y su propio oro; mezclarlos habria dado dos identidades
   en la misma pantalla.
   ========================================================================== */

/* --- Métricas ------------------------------------------------------------ */
.sol-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.sol-metrica {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--sup-linea);
  background: linear-gradient(180deg, var(--sup-elemento), var(--sup-fondo));
}

.sol-metrica p {
  margin: 0 0 2px;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.sol-metrica strong {
  font-size: 1.625rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sol-metrica-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  font-size: 1rem;
}

/* El color solo distingue la métrica; el dato sigue en el texto de la casa. */
.sol-metrica[data-tono="oro"]    .sol-metrica-icono { background: rgba(199, 165, 75, 0.14); color: var(--app-accent-strong); }
.sol-metrica[data-tono="azul"]   .sol-metrica-icono { background: rgba(89, 168, 232, 0.14); color: var(--titanium-blue); }
.sol-metrica[data-tono="morado"] .sol-metrica-icono { background: rgba(156, 139, 216, 0.14); color: var(--titanium-violet); }
.sol-metrica[data-tono="verde"]  .sol-metrica-icono { background: rgba(36, 180, 126, 0.16); color: var(--titanium-green-strong); }

/* --- Reparto: bandeja + detalle ------------------------------------------ */
/* Una etapa a la vez, a todo el ancho.
   Antes eran dos columnas: la bandeja quedaba en una franja estrecha donde
   cabian tres o cuatro solicitudes, y el detalle en otra igual de apretada.
   Ahora la bandeja es un tablero de tarjetas y el detalle ocupa la pantalla,
   que es donde hay que leer correos y revisar el plano. */
.sol-workspace > [data-etapa] {
  display: block;
}

.sol-workspace > [data-etapa][hidden] {
  display: none;
}

.sol-cola,
.sol-detalle {
  border: 1px solid var(--sup-linea);
  border-radius: 16px;
  background: linear-gradient(180deg, #12171a, #0c0f11);
  overflow: hidden;
}

/* --- Cabecera de la bandeja ---------------------------------------------- */
.sol-cola-cabecera {
  padding: 16px 18px;
  background: var(--sup-elemento);
  border-bottom: 1px solid var(--sup-linea);
  display: grid;
  gap: 13px;
}

.sol-cola-titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sol-cola-titulo h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.sol-cola-titulo .module-help,
.sol-detalle-cabecera .module-help {
  display: block;
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

.sol-icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 1rem;
  cursor: pointer;
}
.sol-icono:hover { border-color: var(--sup-linea-fuerte); color: var(--app-text); }

.sol-filtros {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 10px;
}

@media (max-width: 760px) {
  .sol-filtros { grid-template-columns: minmax(0, 1fr); }
}

.sol-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  min-width: 0;
}
.sol-buscador span { color: var(--app-text-muted); font-size: 1rem; }
.sol-buscador input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}
.sol-buscador input:focus { outline: none; }
.sol-buscador:focus-within { border-color: var(--app-accent); }

.sol-filtros select {
  width: 100%;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}

/* Atajos: el mismo filtro de estado, a un clic. */
.sol-atajos { display: flex; flex-wrap: wrap; gap: 7px; }

.sol-atajos button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600 !important;
  cursor: pointer;
}
.sol-atajos button span {
  font-variant-numeric: tabular-nums;
  color: var(--app-text-muted);
  font-size: 0.75rem;
}
.sol-atajos button:hover { border-color: var(--sup-linea-fuerte); color: var(--app-text); }
.sol-atajos button.is-activo {
  border-color: var(--app-accent-strong);
  background: rgba(199, 165, 75, 0.12);
  color: var(--app-accent-strong);
}
.sol-atajos button.is-activo span { color: var(--app-accent-strong); }

/* --- La lista, en tarjetas ----------------------------------------------- */
.sol-lista {
  overflow-y: auto;
  max-height: min(64vh, 720px);
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.sol-fila {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 13px 15px 13px 18px;
  border-radius: 12px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: inherit;
  font: inherit;
  font-weight: 400 !important;
  cursor: pointer;
  display: grid;
  gap: 8px;
  overflow: hidden;
}

.sol-fila:hover { border-color: var(--sup-linea-fuerte); background: var(--sup-elemento); }

/* La abierta se marca con una banda: en oscuro un relleno suave se pierde. */
.sol-fila.is-selected {
  border-color: var(--app-accent-strong);
  background: rgba(199, 165, 75, 0.09);
}
.sol-fila.is-selected::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--app-accent-strong);
}

.sol-fila-alta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.sol-fila-codigo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.875rem;
}

.sol-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--app-text-muted);
  flex: 0 0 auto;
}
.sol-punto[data-prioridad="alta"],
.sol-punto[data-prioridad="urgente"] { background: var(--app-danger); }

.sol-fila-fecha {
  text-align: right;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  white-space: nowrap;
  line-height: 1.3;
}
.sol-fila-fecha small { display: block; opacity: 0.8; }

.sol-fila-cliente { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sol-fila-cliente h3 { margin: 0; font-size: 1rem; letter-spacing: -0.005em; }
.sol-fila-cliente p { margin: 2px 0 0; font-size: 0.8125rem; color: var(--app-text-muted); }

.sol-fila-asunto {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--app-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sol-fila-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  flex-wrap: wrap;
}

.sol-asignado { display: inline-flex; align-items: center; gap: 7px; }

.sol-avatar {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(199, 165, 75, 0.16);
  color: var(--app-accent-strong);
  border: 1px solid rgba(199, 165, 75, 0.3);
}
.sol-avatar[data-vacio="si"] {
  background: var(--sup-elevado);
  color: var(--app-text-muted);
  border-color: var(--sup-linea);
}

/* Barra de avance: dice en qué punto del circuito está el caso. */
.sol-avance {
  flex: 1;
  min-width: 60px;
  height: 4px;
  border-radius: 999px;
  background: var(--sup-elevado);
  overflow: hidden;
}
.sol-avance i { display: block; height: 100%; background: var(--app-accent-strong); }

.sol-vacio {
  padding: 40px 16px;
  text-align: center;
  color: var(--app-text-muted);
  font-size: 0.875rem;
}

/* --- Detalle -------------------------------------------------------------- */
.sol-detalle {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
}

/* El `display: flex` de arriba no llegaba a aplicarse nunca. Mas arriba hay
   `.sol-workspace > [data-etapa] { display: block }`, que con clase mas
   atributo pesa (0,2,0) y le gana a `.sol-detalle`, que pesa (0,1,0). Sin
   flex, `.solicitud-detalle-cuerpo` no se encogia: crecia hasta su contenido
   entero y el `overflow: hidden` del panel recortaba el resto sin dejar ni
   barra. Medido: 5537px de contenido en un panel de 820px, o sea 4719px
   inalcanzables.

   Se repite el selector con `:not([hidden])` para dos cosas: subir a (0,3,0)
   y ganarle a la regla de bloque, y no pisar
   `.sol-workspace > [data-etapa][hidden] { display: none }`, que tiene el
   mismo peso y debe seguir ocultando el panel cuando toca. */
.sol-workspace > .sol-detalle:not([hidden]) {
  display: flex;
}

.sol-detalle-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--sup-elemento);
  border-bottom: 1px solid var(--sup-linea);
}

.sol-detalle-linea { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }

.sol-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--app-accent);
  font-variant-numeric: tabular-nums;
}

.sol-detalle-cabecera h2 { margin: 0; font-size: 1.125rem; letter-spacing: -0.015em; }

/* --- Flujo del caso ------------------------------------------------------- */
.sol-flujo {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px 18px;
  background: var(--sup-fondo);
  border-bottom: 1px solid var(--sup-linea);
}

.sol-paso { display: grid; justify-items: center; gap: 6px; flex: 1; min-width: 0; }

.sol-paso span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elevado);
  color: var(--app-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.sol-paso small {
  font-size: 0.6875rem;
  color: var(--app-text-muted);
  text-align: center;
  line-height: 1.3;
}

.sol-paso[data-hecho="si"] span {
  background: var(--app-accent-strong);
  border-color: var(--app-accent-strong);
  color: #12171a;
}
.sol-paso[data-hecho="si"] small { color: var(--app-text-dim); }

.sol-paso[data-actual="si"] span {
  border-color: var(--app-accent-strong);
  color: var(--app-accent-strong);
  box-shadow: 0 0 0 3px rgba(199, 165, 75, 0.15);
}
.sol-paso[data-actual="si"] small { color: var(--app-accent-strong); font-weight: 600; }

/* --- Acciones ------------------------------------------------------------- */
.sol-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px;
  align-items: end;
  padding: 15px 18px;
  background: var(--sup-fondo);
  border-bottom: 1px solid var(--sup-linea);
}

.sol-acciones label { display: grid; gap: 5px; min-width: 0; }
.sol-acciones label > span {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}
.sol-acciones select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
}
.sol-acciones select option:disabled { color: var(--app-text-muted); }

/* --- Tarjetas del detalle -------------------------------------------------- */
.sol-tarjeta {
  border: 1px solid var(--sup-linea);
  border-radius: 12px;
  background: var(--sup-fondo);
  padding: 16px;
  margin-bottom: 12px;
}
.sol-tarjeta:last-child { margin-bottom: 0; }

.sol-tarjeta-titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sol-tarjeta-titulo h3 { margin: 2px 0 0; font-size: 1rem; letter-spacing: -0.005em; }

.sol-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--app-accent);
  font-weight: 700;
}

.sol-fuente {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elevado);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--app-text-muted);
  white-space: nowrap;
}

.sol-cuenta {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sup-elevado);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

/* Los datos detectados, como ficha de dos columnas. */
.solicitud-detectado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.solicitud-detectado > div { min-width: 0; }
.solicitud-detectado dt {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  margin-bottom: 3px;
  font-weight: 600;
}
.solicitud-detectado dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Los adjuntos, con su tipo delante. */
.solicitud-adjuntos li { border: 0; padding: 0; background: none; }
.solicitud-adjuntos button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400 !important;
  cursor: pointer;
}
.solicitud-adjuntos button:hover { border-color: var(--sup-linea-fuerte); background: var(--sup-elevado); }

.sol-tipo-archivo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--sup-elevado);
  border: 1px solid var(--sup-linea);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--app-accent);
}

.sol-adjunto-datos { display: grid; min-width: 0; flex: 1; }
.sol-adjunto-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sol-adjunto-datos small { color: var(--app-text-muted); font-size: 0.75rem; }


/* ==========================================================================
   Clientes: estructura del prototipo, paleta de la casa
   ==========================================================================
   Se adopta la maqueta del modulo de diseno y expedientes —metricas arriba,
   ruta de migas y tres etapas— con los colores que ya usa la app: el oro
   --app-accent-strong y las superficies --sup-*. El prototipo venia en claro
   y con su propio verde; mezclarlo habria dado dos identidades en la misma
   pantalla.

   El modulo baja por niveles:
     01 clientes      #panel-clientes
     02 referencias   #client-explorer-panel [data-etapa="referencias"]
     03 expediente    #client-explorer-panel [data-etapa="expediente"]

   Ojo con dos reglas globales de este archivo: `button` lleva
   `border-radius: 12px !important` y `font-weight: 700 !important`, y
   `.module-help` esta oculto. Por eso aqui no se usa esa clase y los radios
   propios van con !important donde hacen falta.
   ========================================================================== */

/* --- Metricas ------------------------------------------------------------ */
.cli-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cli-metrica {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--sup-linea);
  background: linear-gradient(180deg, var(--sup-elemento), var(--sup-fondo));
}

.cli-metrica p {
  margin: 0 0 2px;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-weight: 600;
}

.cli-metrica strong {
  display: block;
  font-size: 1.625rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cli-metrica small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

/* La ultima metrica lleva fecha y no un numero: el tamano baja para que no
   compita con los conteos. */
.cli-metrica[data-tono="verde"] strong {
  font-size: 1.125rem;
}

.cli-metrica-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  font-size: 1rem;
}

/* El color solo distingue la metrica; el dato sigue estando en el texto. */
.cli-metrica[data-tono="oro"]    .cli-metrica-icono { background: rgba(199, 165, 75, 0.14); color: var(--app-accent-strong); }
.cli-metrica[data-tono="azul"]   .cli-metrica-icono { background: rgba(89, 168, 232, 0.14); color: var(--titanium-blue); }
.cli-metrica[data-tono="morado"] .cli-metrica-icono { background: rgba(156, 139, 216, 0.14); color: var(--titanium-violet); }
.cli-metrica[data-tono="verde"]  .cli-metrica-icono { background: rgba(36, 180, 126, 0.16); color: var(--titanium-green-strong); }

/* --- Ruta de migas ------------------------------------------------------- */
.cli-ruta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--sup-linea);
  border-radius: 12px;
  background: var(--sup-fondo);
  font-size: 0.8125rem;
}

.cli-ruta-titulo {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  margin-right: 4px;
}

.cli-ruta-sep {
  color: var(--app-text-muted);
}

.cli-ruta-paso,
.cli-ruta-actual {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px !important;
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-text-dim);
  font-size: 0.8125rem;
  font-weight: 600 !important;
}

.cli-ruta-paso {
  cursor: pointer;
}

.cli-ruta-paso:hover {
  border-color: var(--sup-linea-fuerte);
  color: var(--app-text);
}

/* El tramo final es donde se esta, no un enlace. */
.cli-ruta-actual {
  border-color: var(--sup-linea-fuerte);
  background: var(--sup-elemento);
  color: var(--app-text);
}

.cli-inicial {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(199, 165, 75, 0.16);
  color: var(--app-accent-strong);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Etapas -------------------------------------------------------------- */
.cli-workspace {
  display: grid;
  gap: 18px;
}

.cli-etapa {
  border: 1px solid var(--sup-linea);
  border-radius: 16px;
  background: var(--sup-tarjeta);
  overflow: hidden;
}

.cli-etapa-cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
}

.cli-etapa-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  /* minmax(0) para que un nombre largo de cliente no empuje el conteo fuera. */
  min-width: 0;
  flex: 1 1 260px;
}

.cli-etapa-titulo h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.cli-etapa-nota {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

.cli-etapa-paso {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--sup-linea-fuerte);
  background: var(--sup-fondo);
  color: var(--app-accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cli-conteo {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cli-etapa-pie {
  padding: 11px 18px;
  border-top: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.cli-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 0.8125rem;
  font-weight: 600 !important;
  cursor: pointer;
}

.cli-volver:hover {
  border-color: var(--sup-linea-fuerte);
  color: var(--app-text);
}

/* --- Filtros ------------------------------------------------------------- */
.cli-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sup-linea);
}

.cli-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-muted);
}

.cli-buscador:focus-within {
  border-color: var(--sup-linea-fuerte);
}

.cli-buscador input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--app-text);
  font-size: 0.875rem;
  outline: none;
}

.cli-filtros select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 0.8125rem;
}

.cli-filtro-nota {
  flex: 1 1 100%;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

/* El estado del guardado es un dato, no un texto de ayuda; la regla de arriba
   lo pintaba de azul claro, que en este fondo no se lee. */
#panel-clientes #clients-storage-status.cli-aviso {
  display: block;
  margin: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

/* --- Listas -------------------------------------------------------------- */
.cli-lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sup-linea);
  max-height: min(62vh, 720px);
  overflow-y: auto;
}

.cli-vacio {
  margin: 0;
  padding: 26px 18px;
  background: var(--sup-tarjeta);
  color: var(--app-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* --- 01 · Clientes ------------------------------------------------------- */
.cli-cliente {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 18px;
  background: var(--sup-tarjeta);
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.cli-cliente:hover {
  background: var(--sup-elemento);
}

.cli-cliente.is-activo {
  background: var(--sup-elevado);
  box-shadow: inset 3px 0 0 var(--app-accent-strong);
}

.cli-cliente > .cli-inicial {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 0.8125rem;
}

.cli-cliente-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-cliente-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cli-cliente-titulo strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.cli-cliente-ref {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cli-cliente-datos,
.cli-referencia-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.cli-cliente-acciones {
  flex: 0 0 auto;
}

/* --- 02 · Referencias ---------------------------------------------------- */
.cli-familia {
  background: var(--sup-tarjeta);
}

.cli-familia-cabecera {
  padding: 12px 18px 8px;
  background: var(--sup-fondo);
}

.cli-familia-cabecera strong {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--app-text-dim);
}

.cli-familia-cabecera small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.cli-referencia {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-top: 1px solid var(--sup-linea);
  background: var(--sup-tarjeta);
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.cli-referencia:hover {
  background: var(--sup-elemento);
}

.cli-referencia.is-activa {
  background: var(--sup-elevado);
  box-shadow: inset 3px 0 0 var(--app-accent-strong);
}

.cli-referencia-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-referencia-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cli-referencia-titulo strong {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.cli-referencia-cuerpo p {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cli-referencia-flecha {
  flex: 0 0 auto;
  color: var(--app-text-muted);
  font-size: 1.125rem;
}

/* --- 03 · Expediente ----------------------------------------------------- */
.cli-expediente {
  display: flex;
  flex-direction: column;
}

.cli-expediente-volver {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
}

.cli-expediente-contexto {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

.cli-expediente-cabecera {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--sup-linea);
  background: var(--sup-elemento);
}

.cli-expediente-identidad {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  flex: 1 1 300px;
  min-width: 0;
}

.cli-expediente-icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(199, 165, 75, 0.14);
  color: var(--app-accent-strong);
  font-size: 1rem;
}

.cli-expediente-nombre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
}

.cli-expediente-nombre h2 {
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.cli-expediente-identidad p {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

.cli-estado {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(36, 180, 126, 0.35);
  background: rgba(36, 180, 126, 0.14);
  color: var(--titanium-green-strong);
  font-size: 0.75rem;
  font-weight: 600;
}

.cli-expediente-acciones {
  flex: 0 0 auto;
}

.cli-expediente-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--sup-linea);
  background: var(--sup-linea);
}

.cli-expediente-resumen > div {
  padding: 12px 18px;
  background: var(--sup-tarjeta);
}

.cli-expediente-resumen span {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.cli-expediente-resumen strong {
  display: block;
  margin-top: 3px;
  font-size: 0.875rem;
}

/* --- Carpetas del expediente --------------------------------------------- */
.cli-carpetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sup-linea);
}

.cli-carpeta {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 13px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.cli-carpeta:hover {
  border-color: var(--sup-linea-fuerte);
  background: var(--sup-elemento);
}

.cli-carpeta-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  font-size: 1rem;
}

/* Cada carpeta con su color, el mismo que en el prototipo, pero pasado a la
   gama de la casa: sirve para reconocerla de un vistazo, no para dar dato. */
.cli-carpeta[data-tono="recibido"] .cli-carpeta-icono { background: rgba(89, 168, 232, 0.14); color: var(--titanium-blue); }
.cli-carpeta[data-tono="correos"]  .cli-carpeta-icono { background: rgba(199, 165, 75, 0.14); color: var(--app-accent-strong); }
.cli-carpeta[data-tono="bajar"]    .cli-carpeta-icono { background: rgba(36, 180, 126, 0.16); color: var(--titanium-green-strong); }
.cli-carpeta[data-tono="ficha"]    .cli-carpeta-icono { background: rgba(156, 139, 216, 0.14); color: var(--titanium-violet); }

.cli-carpeta-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-carpeta-cuerpo strong {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

.cli-carpeta-cuerpo small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  font-weight: 400;
}

.cli-carpeta-flecha {
  flex: 0 0 auto;
  color: var(--app-text-muted);
}

/* --- Pestanas ------------------------------------------------------------ */
.cli-pestanas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
}

.cli-pestanas-lista button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px 10px 0 0 !important;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  font-weight: 600 !important;
  cursor: pointer;
}

.cli-pestanas-lista button:hover {
  color: var(--app-text-dim);
}

.cli-pestanas-lista button.is-activa {
  border-color: var(--sup-linea);
  background: var(--sup-elemento);
  color: var(--app-text);
}

.cli-pestanas-lista button span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sup-elevado);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.cli-pestana-vista {
  display: none;
  padding: 16px 18px 20px;
  border-top: 1px solid var(--sup-linea);
}

.cli-pestana-vista.is-activa {
  display: block;
}

/* --- Pestana: resumen ---------------------------------------------------- */
.cli-resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.cli-tarjeta {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
}

.cli-tarjeta header {
  margin-bottom: 12px;
}

.cli-tarjeta h3 {
  margin: 3px 0 0;
  font-size: 1rem;
}

.cli-tarjeta-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.cli-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}

.cli-datos dt {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.cli-datos dd {
  margin: 3px 0 0;
  font-size: 0.875rem;
  color: var(--app-text);
}


.cli-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.cli-etiqueta {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.cli-etiqueta.is-apagada {
  color: var(--app-text-muted);
  font-weight: 400;
}

/* --- Pestana: versiones -------------------------------------------------- */
.cli-versiones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sup-linea);
  border: 1px solid var(--sup-linea);
  border-radius: 13px;
  overflow: hidden;
}

.cli-version {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 15px;
  background: var(--sup-fondo);
}

.cli-version.is-vigente {
  background: var(--sup-elemento);
  box-shadow: inset 3px 0 0 var(--app-accent-strong);
}

.cli-version-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 130px;
}

.cli-version-marca strong {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.cli-version-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-version-cuerpo p {
  margin: 0;
  font-size: 0.875rem;
}

.cli-version-cuerpo small,
.cli-archivo-cuerpo small,
.cli-correo-cuerpo small,
.cli-bitacora small {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.cli-version-acciones {
  flex: 0 0 auto;
}

/* --- Pestana: archivos --------------------------------------------------- */
.cli-grupo {
  margin-bottom: 16px;
  border: 1px solid var(--sup-linea);
  border-radius: 13px;
  overflow: hidden;
}

.cli-grupo:last-child {
  margin-bottom: 0;
}

.cli-grupo-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: var(--sup-elemento);
  border-bottom: 1px solid var(--sup-linea);
}

.cli-grupo-cabecera > div {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-grupo-cabecera strong {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

.cli-grupo-cabecera small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.cli-archivos,
.cli-correos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sup-linea);
}

.cli-archivos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: var(--sup-fondo);
}

.cli-archivo-tipo {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-tarjeta);
  color: var(--app-text-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cli-archivo-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-archivo-cuerpo strong {
  display: block;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Descargar es un enlace, no un boton, para que el navegador guarde el archivo
   con su nombre. Se le da el mismo aspecto que a las acciones de tabla. */
.cli-archivos a.table-action {
  flex: 0 0 auto;
  text-decoration: none;
}

/* --- Pestana: correos ---------------------------------------------------- */
.cli-correo {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 15px;
  background: var(--sup-fondo);
}

.cli-correo-sentido {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-tarjeta);
  color: var(--app-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
}

/* Lo que sale de la casa se distingue de lo que llega: al revisar un caso lo
   primero que se busca es si ya se respondio. */
.cli-correo[data-direccion="saliente"] .cli-correo-sentido {
  border-color: rgba(36, 180, 126, 0.35);
  background: rgba(36, 180, 126, 0.12);
  color: var(--titanium-green-strong);
}

.cli-correo-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.cli-correo-cuerpo strong {
  display: block;
  font-size: 0.875rem;
}

.cli-correo-cuerpo p {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--app-text-dim);
}

/* --- Pestana: actividad -------------------------------------------------- */
.cli-bitacora {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
}

.cli-bitacora li {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 0 0 18px 18px;
  border-left: 1px solid var(--sup-linea);
}

.cli-bitacora li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.cli-bitacora-punto {
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-accent-strong);
}

.cli-bitacora strong {
  font-size: 0.875rem;
  font-weight: 600;
}

/* --- Pantallas estrechas ------------------------------------------------- */
@media (max-width: 860px) {
  .cli-cliente,
  .cli-referencia {
    flex-wrap: wrap;
  }

  .cli-cliente-acciones {
    flex: 1 1 100%;
  }

  .cli-version {
    flex-wrap: wrap;
  }

  .cli-version-marca {
    min-width: 0;
  }
}

/* --- Correcciones vistas en pantalla ------------------------------------- */

/* La ultima metrica lleva "cliente · referencia", que puede ser larguisimo.
   Sin min-width:0 el texto no deja encoger la tarjeta y empuja la pagina a
   scroll horizontal. */
.cli-metrica > div {
  min-width: 0;
}

.cli-metrica small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Los <select> del modulo heredan un width:100% de los formularios de ficha:
   sin esto, cada filtro se lleva una fila entera. */
.cli-filtros select {
  flex: 0 1 210px;
  width: auto;
  min-width: 0;
}

.cli-buscador {
  max-width: 100%;
}

/* La linea de estado del guardado solo aparece cuando tiene algo que decir. */
#panel-clientes #clients-storage-status.cli-aviso:empty {
  display: none;
}


/* ==========================================================================
   Solicitudes: etapas, ruta, tablero y alta manual
   ==========================================================================
   Segunda pasada sobre el modulo. La estructura es la misma que en clientes
   —migas arriba, una etapa a la vez— para que las dos pantallas se recorran
   igual. Por eso la ruta y el boton de volver reutilizan las clases .cli-*:
   es el mismo componente en dos modulos, y duplicar el CSS solo garantiza que
   uno de los dos se quede atras.
   ========================================================================== */

/* --- Cabecera: ruta + alta ----------------------------------------------- */
.sol-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sol-cabecera .cli-ruta {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.sol-nueva {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- La bandeja como lista ------------------------------------------------ */
/* Estuvo como tablero de tres columnas con tarjetas de 172px: se veian nueve
   solicitudes por pantalla y cada una ocupaba lo mismo dijera lo que dijera.
   En lista caben mas del doble y el ojo baja por una sola columna de codigos.

   La fila se arma con las mismas piezas del HTML: los tres contenedores pasan
   a `display: contents` para que sus hijos entren directamente en la rejilla
   de la fila, sin tocar el marcado. */
.sol-workspace > [data-etapa="bandeja"] .sol-lista {
  max-height: none;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 0;
  background: var(--sup-linea);
}

.sol-workspace > [data-etapa="bandeja"] .sol-fila {
  min-height: 0;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--sup-fondo);
  /* Anchos fijos, no `auto`: cada fila es su propia rejilla, asi que con `auto`
     cada una medía sus columnas por separado y el chip de "4 correos" corría el
     cliente en unas filas y no en otras. Con medidas fijas todas las filas caen
     en la misma cuadricula, que es lo que se espera de una lista.

     Solo cliente y asunto llevan fr: son los que crecen si sobra pantalla. */
  grid-template-columns:
    202px                    /* codigo, tipo y numero de correos */
    minmax(150px, 1fr)       /* cliente y referencia */
    minmax(200px, 2.2fr)     /* asunto */
    104px                    /* estado */
    168px                    /* asignado */
    52px                     /* adjuntos */
    116px;                   /* fecha */
}

.sol-workspace > [data-etapa="bandeja"] .sol-fila-alta,
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente,
.sol-workspace > [data-etapa="bandeja"] .sol-fila-meta {
  display: contents;
}

/* La fila va explicita en las siete: sin ella el reparto automatico no
   retrocede de columna y el asunto —que va antes en el HTML pero despues en
   pantalla— empujaba media fila a un segundo renglon. */
.sol-workspace > [data-etapa="bandeja"] .sol-fila-codigo { grid-area: 1 / 1; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente > div { grid-area: 1 / 2; min-width: 0; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-asunto { grid-area: 1 / 3; margin: 0; min-width: 0; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente > .solicitud-chip { grid-area: 1 / 4; justify-self: start; }
.sol-workspace > [data-etapa="bandeja"] .sol-asignado { grid-area: 1 / 5; min-width: 0; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-meta > span[title="Adjuntos"] { grid-area: 1 / 6; justify-self: end; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-fecha { grid-area: 1 / 7; justify-self: end; text-align: right; }

/* Codigo, cliente y asunto en una linea: en lista el alto de la fila lo marca
   el texto mas largo, y tres lineas por solicitud dejan de ser una lista. */
.sol-workspace > [data-etapa="bandeja"] .sol-fila-codigo,
.sol-workspace > [data-etapa="bandeja"] .sol-fila-asunto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sol-workspace > [data-etapa="bandeja"] .sol-fila-fecha small {
  display: inline;
  margin-left: 6px;
}

/* El avance duplicaba lo que ya dice el estado y en una lista densa es ruido. */
.sol-workspace > [data-etapa="bandeja"] .sol-avance { display: none; }

/* En una fila el nombre del cliente no necesita ser un titulo. */
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente h3 { font-size: 0.875rem; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente h3,
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente p,
.sol-workspace > [data-etapa="bandeja"] .sol-asignado {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sol-workspace > [data-etapa="bandeja"] .sol-fila.is-selected {
  background: rgba(199, 165, 75, 0.09);
}

/* Por debajo de 1100px las siete columnas no caben con sentido: la fila vuelve
   a apilarse, que es como se lee en un movil. */
@media (max-width: 1100px) {
  .sol-workspace > [data-etapa="bandeja"] .sol-lista {
    gap: 8px;
    padding: 12px;
    background: transparent;
  }

  .sol-workspace > [data-etapa="bandeja"] .sol-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    padding: 13px 15px !important;
    border: 1px solid var(--sup-linea) !important;
    border-radius: 12px !important;
  }

  .sol-workspace > [data-etapa="bandeja"] .sol-fila-alta,
  .sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente,
  .sol-workspace > [data-etapa="bandeja"] .sol-fila-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    grid-column: 1 / -1;
  }

  .sol-workspace > [data-etapa="bandeja"] .sol-fila-asunto { grid-column: 1 / -1; }
  .sol-workspace > [data-etapa="bandeja"] .sol-avance { display: block; }
}

@media (max-width: 900px) {
  .sol-cabecera {
    flex-wrap: wrap;
  }

  .sol-nueva {
    flex: 1 1 100%;
  }
}

.sol-pie {
  padding: 11px 18px;
  border-top: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

/* --- Tipo de solicitud ---------------------------------------------------- */
/* Que se pide, no en que punto va: eso ya lo dice el estado. Solo aparece
   cuando la solicitud lo trae; las que entraron antes de que existiera la
   columna no lo tienen y no se inventa. */
.sol-tipo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea-fuerte);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --- Volver al tablero ---------------------------------------------------- */
.sol-volver-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
}

.sol-contexto {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
}

/* --- Alta manual ---------------------------------------------------------- */
body.sol-modal-abierto {
  overflow: hidden;
}

.sol-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.sol-modal[hidden] {
  display: none;
}

.sol-modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 9, 0.72);
  backdrop-filter: blur(2px);
}

.sol-modal-caja {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--sup-linea-fuerte);
  background: var(--sup-tarjeta);
  box-shadow: var(--app-shadow-lg);
}

.sol-modal-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px !important;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-muted);
  cursor: pointer;
}

.sol-modal-cerrar:hover {
  border-color: var(--sup-linea-fuerte);
  color: var(--app-text);
}

.sol-modal-kicker {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.sol-modal-caja h2 {
  margin: 4px 0 6px;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}

.sol-modal-lead {
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--app-text-dim);
  max-width: 46ch;
}

.sol-modal-form {
  display: grid;
  gap: 13px;
}

.sol-modal-form label {
  display: grid;
  gap: 5px;
}

.sol-modal-form label > span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.sol-modal-form input,
.sol-modal-form select,
.sol-modal-form textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text);
  font-size: 0.875rem;
}

.sol-modal-form input:focus,
.sol-modal-form select:focus,
.sol-modal-form textarea:focus {
  outline: none;
  border-color: var(--app-accent);
}

.sol-modal-form textarea {
  resize: vertical;
  min-height: 90px;
}

.sol-modal-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 13px;
}

.sol-modal-aviso {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  font-size: 0.8125rem;
  color: var(--app-text-dim);
}

.sol-modal-aviso.es-error {
  border-color: rgba(239, 114, 114, 0.4);
  color: var(--app-danger);
}

.sol-modal-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}


/* ==========================================================================
   TITANIO TECNICO — sistema visual
   ==========================================================================
   Fuente unica de color, geometria, ritmo y movimiento.

   Va al final del archivo a proposito. Antes habia tres capas de tema
   discutiendo entre ellas:

     linea ~3037  paleta kraft original
     linea ~9852  "Tema negro pleno", que borraba el dorado de toda la app
     linea ~10072 "Restaurar acentos DITAR", que lo devolvia

   El resultado era una app negra con acentos dorados y modulos nuevos con
   superficies kraft: dos identidades en la misma pantalla. Este bloque las
   zanja. No se borran los anteriores —hay reglas estructurales utiles
   mezcladas con las de color— pero sus tokens quedan sin efecto porque estos
   se declaran despues.

   REGLA QUE MANDA SOBRE TODAS:
   el verde es accion y resultado (CTA, progreso, aprobado, activo);
   el dorado es identidad, prioridad y atencion. Nunca compiten dentro del
   mismo boton.

   Proporcion buscada: 70% negro y grafito, 18% superficies elevadas,
   8% verde, 4% dorado.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Estructura -------------------------------------------------------- */
  --titanium-canvas: #070809;
  --titanium-shell: #0c0f11;
  --titanium-surface: #12171a;
  --titanium-raised: #1b2327;
  --titanium-accent: #202a2e;

  /* --- Bordes ------------------------------------------------------------ */
  --titanium-border: #2a3338;
  --titanium-border-soft: #20272b;
  --titanium-input: #303a3f;

  /* --- Tipografia -------------------------------------------------------- */
  --titanium-text: #f4f7f5;
  --titanium-muted: #9da8a3;
  --titanium-technical: #cad4cf;

  /* --- Marca y estados --------------------------------------------------- */
  --titanium-green: #24b47e;
  --titanium-green-strong: #50d19a;
  --titanium-green-foreground: #06110d;
  --titanium-gold: #c7a54b;
  --titanium-gold-strong: #e0c765;
  --titanium-blue: #59a8e8;
  --titanium-violet: #9c8bd8;
  --titanium-red: #ef7272;

  /* --- Geometria --------------------------------------------------------- */
  --radius: 12px;
  --radius-panel: 14px;
  --radius-metrica: 12px;
  --radius-fila: 11px;
  --radius-control: 10px;
  --radius-chip: 999px;

  /* --- Ritmo: base conceptual de 8 puntos -------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 18px;
  --space-7: 24px;
  --space-8: 32px;

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-surface: 0 18px 45px rgba(7, 8, 9, 0.13);
  --shadow-popover: 0 24px 60px rgba(7, 8, 9, 0.45);
  --shadow-gold: 0 10px 24px rgba(199, 165, 75, 0.12);
  --shadow-green: 0 0 14px rgba(80, 209, 154, 0.45);

  /* --- Movimiento -------------------------------------------------------- */
  --mov-sidebar: 220ms ease;
  --mov-nav: 200ms ease;
  --mov-tarjeta: 160ms ease;
  --mov-switch: 150ms ease;
}

/* --------------------------------------------------------------------------
   Puente con los tokens que ya usa la app
   --------------------------------------------------------------------------
   El CSS existente pide --app-*, --brand-* y --sup-*. En vez de reescribir
   miles de reglas, esos nombres pasan a apuntar aqui: todo lo que ya va por
   token cambia de golpe y sin tocarlo.
   -------------------------------------------------------------------------- */
:root {
  --brand-black: var(--titanium-canvas);
  --brand-kraft: var(--titanium-border);
  --brand-green: var(--titanium-green);
  --brand-green-strong: var(--titanium-green-strong);
  --brand-gold: var(--titanium-gold);
  --brand-gold-strong: var(--titanium-gold-strong);

  --app-bg: var(--titanium-canvas);
  --app-bg-soft: var(--titanium-shell);
  --app-bg-2: var(--titanium-shell);
  --app-bg-3: var(--titanium-surface);
  --app-panel: var(--titanium-surface);
  --app-panel-strong: var(--titanium-shell);
  --app-panel-alt: var(--titanium-raised);
  --app-card: var(--titanium-surface);
  --app-card-soft: var(--titanium-raised);
  --app-surface: var(--titanium-surface);
  --app-surface-strong: var(--titanium-raised);
  --app-surface-soft: var(--titanium-shell);

  --app-line: var(--titanium-border-soft);
  --app-line-strong: var(--titanium-border);

  --app-text: var(--titanium-text);
  --app-text-dim: var(--titanium-technical);
  --app-text-muted: var(--titanium-muted);

  /* Dorado: identidad y atencion. */
  --app-accent: var(--titanium-gold);
  --app-accent-strong: var(--titanium-gold-strong);
  --app-accent-soft: rgba(199, 165, 75, 0.14);

  /* Verde: accion y resultado. */
  --app-success: var(--titanium-green);
  --app-warning: var(--titanium-gold);
  --app-danger: var(--titanium-red);

  --app-shadow-lg: var(--shadow-popover);
  --app-shadow-md: var(--shadow-surface);
  --app-shadow-sm: 0 10px 20px rgba(7, 8, 9, 0.18);
}

/* Superficies de los modulos operativos (solicitudes y clientes).
   Se declaran tambien en cada panel; aqui se les da el valor de Titanio para
   que los tres hablen el mismo idioma que el resto de la app. */
#panel-solicitudes,
#panel-clientes,
#panel-cliente-detalle {
  --sup-fondo: var(--titanium-shell);
  --sup-tarjeta: var(--titanium-surface);
  --sup-elemento: var(--titanium-raised);
  --sup-elevado: var(--titanium-accent);
  --sup-linea: var(--titanium-border-soft);
  --sup-linea-fuerte: var(--titanium-border);
}

/* --------------------------------------------------------------------------
   Fondo general
   --------------------------------------------------------------------------
   El "Tema negro pleno" fijaba #070809 con !important en html y body. Titanio usa
   un negro con algo de azul (#070809) porque sobre negro puro las superficies
   grafito se leen como suciedad, no como profundidad.
   -------------------------------------------------------------------------- */
html,
body,
body.yt-dark {
  background: var(--titanium-canvas) !important;
  background-image: none !important;
  color: var(--titanium-text) !important;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
body,
body.yt-dark {
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
}

/* Codigos, referencias y datos tecnicos: condensada. Un codigo tecnico se
   compara caracter a caracter y la proporcional lo dificulta. */
.code,
.reference,
.technical-data,
.sol-fila-codigo,
.cli-referencia-titulo strong,
.cli-archivo-tipo,
.inventory-index-badge {
  font-family: "Roboto Condensed", "Arial Narrow", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Titulo del modulo: el de la cabecera de la pagina, uno por pantalla.
   No se aplica a los encabezados de panel: a 36px dentro de una tarjeta el
   titulo se come el contenido, que es justo lo que hay debajo. */
.page-heading h1 {
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.3;
}

/* Encabezado de panel: un escalon por debajo. */
.cli-etapa-titulo h2,
.sol-cola-titulo h2,
.cli-expediente-nombre h2 {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Cejas de seccion: dorado, es identidad. */
.cli-tarjeta-kicker,
.sol-kicker,
.sol-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--titanium-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Verde = accion. Dorado = identidad.
   --------------------------------------------------------------------------
   Lo activo y lo aprobado pasan a verde. Antes el carril de seleccion de
   clientes era dorado, que segun el sistema es prioridad, no estado.
   -------------------------------------------------------------------------- */
.cli-cliente.is-activo,
.cli-referencia.is-activa,
.cli-version.is-vigente,
.sol-fila.is-selected {
  box-shadow: inset 3px 0 0 var(--titanium-green) !important;
}

.cli-ruta-actual {
  border-color: var(--titanium-green) !important;
}

.cli-version.is-vigente {
  box-shadow: inset 3px 0 0 var(--titanium-green) !important;
}

/* Estados con color propio, uno por significado. */
.solicitud-chip[data-estado="aprobada"],
.cli-estado {
  border-color: rgba(36, 180, 126, 0.38) !important;
  background: rgba(36, 180, 126, 0.13) !important;
  color: var(--titanium-green-strong) !important;
}

/* Nuevo y pendiente: dorado, que es atencion. */
.solicitud-chip[data-estado="nueva"] {
  border-color: rgba(199, 165, 75, 0.38) !important;
  background: rgba(199, 165, 75, 0.12) !important;
  color: var(--titanium-gold-strong) !important;
}

/* Asignado y clasificado: azul. */
.solicitud-chip[data-estado="asignada"],
.sol-metrica[data-tono="azul"] .sol-metrica-icono,
.cli-metrica[data-tono="azul"] .cli-metrica-icono,
.cli-carpeta[data-tono="recibido"] .cli-carpeta-icono {
  border-color: rgba(89, 168, 232, 0.36) !important;
  background: rgba(89, 168, 232, 0.13) !important;
  color: var(--titanium-blue) !important;
}

/* En proceso o revision: violeta. */
.solicitud-chip[data-estado="en_proceso"],
.sol-metrica[data-tono="morado"] .sol-metrica-icono,
.cli-metrica[data-tono="morado"] .cli-metrica-icono,
.cli-carpeta[data-tono="ficha"] .cli-carpeta-icono {
  border-color: rgba(156, 139, 216, 0.36) !important;
  background: rgba(156, 139, 216, 0.13) !important;
  color: var(--titanium-violet) !important;
}

/* Verde en las metricas de resultado. */
.sol-metrica[data-tono="verde"] .sol-metrica-icono,
.cli-metrica[data-tono="verde"] .cli-metrica-icono,
.cli-carpeta[data-tono="bajar"] .cli-carpeta-icono {
  background: rgba(36, 180, 126, 0.14) !important;
  color: var(--titanium-green-strong) !important;
}

/* Dorado en las de identidad. */
.sol-metrica[data-tono="oro"] .sol-metrica-icono,
.cli-metrica[data-tono="oro"] .cli-metrica-icono,
.cli-carpeta[data-tono="correos"] .cli-carpeta-icono {
  background: rgba(199, 165, 75, 0.13) !important;
  color: var(--titanium-gold-strong) !important;
}

/* Error y rechazo. */
.solicitud-chip[data-estado="descartada"],
.cli-aviso.es-error,
.sol-modal-aviso.es-error {
  border-color: rgba(239, 114, 114, 0.4) !important;
  color: var(--titanium-red) !important;
}

/* --------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------
   El primario es verde con texto oscuro: es la accion. El secundario es una
   superficie elevada con borde, sin color de marca, para que no compita.
   -------------------------------------------------------------------------- */
.primary-button,
.yt-btn-primary,
.ui-button-primary {
  background: var(--titanium-green) !important;
  border: 1px solid var(--titanium-green) !important;
  color: var(--titanium-green-foreground) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}

.primary-button:hover,
.yt-btn-primary:hover,
.ui-button-primary:hover {
  background: var(--titanium-green-strong) !important;
  border-color: var(--titanium-green-strong) !important;
}

.secondary-button,
.ghost-button,
.yt-btn-secondary {
  background: var(--titanium-raised) !important;
  border: 1px solid var(--titanium-border) !important;
  color: var(--titanium-text) !important;
  border-radius: var(--radius-control) !important;
}

.secondary-button:hover,
.ghost-button:hover,
.yt-btn-secondary:hover {
  background: var(--titanium-accent) !important;
  border-color: var(--titanium-input) !important;
}

/* El boton de entrar arrastraba un degradado dorado->verde de un tema
   anterior, con el texto encima en verde. Es justo lo que el sistema prohibe:
   el dorado es identidad y el verde es accion, y no compiten dentro del mismo
   boton. Entrar es una accion, asi que va en verde macizo. */
.login-submit,
.search-btn,
#save-client-record,
#header-save-client-record {
  background: var(--titanium-green) !important;
  background-image: none !important;
  border: 1px solid var(--titanium-green) !important;
  color: var(--titanium-green-foreground) !important;
  box-shadow: none !important;
}

.login-submit:hover,
.search-btn:hover,
#save-client-record:hover,
#header-save-client-record:hover {
  background: var(--titanium-green-strong) !important;
  border-color: var(--titanium-green-strong) !important;
  color: var(--titanium-green-foreground) !important;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */
/* Los campos llevan !important porque un bloque anterior (@media screen, hacia
   la linea 9730) los fija en un gris calido con !important. Sobre las
   superficies grafito ese tono se lee amarillento, como si el campo estuviera
   sucio. */
input,
select,
textarea,
.search-bar {
  border-color: var(--titanium-input) !important;
  background: var(--titanium-surface) !important;
  color: var(--titanium-text) !important;
}

input::placeholder,
textarea::placeholder,
select:invalid,
[disabled]::placeholder {
  color: var(--titanium-muted) !important;
  opacity: 1;
}

/* Mismo caso con las tarjetas del detalle de cliente, fijadas en #1b2327. */
#panel-cliente-detalle .client-explorer-block,
#panel-cliente-detalle .client-explorer-column,
#panel-cliente-detalle .client-record-tile,
#panel-cliente-detalle .history-entry,
#panel-cliente-detalle .client-center-ficha-overview {
  background: var(--titanium-surface) !important;
  border-color: var(--titanium-border-soft) !important;
}

/* Foco accesible: anillo verde brillante, 2px, con separacion. Es lo unico
   que marca donde esta el teclado, asi que va por encima de cualquier estilo
   propio de cada control. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--titanium-green-strong) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-control);
}

/* --------------------------------------------------------------------------
   Geometria
   -------------------------------------------------------------------------- */
.module-panel,
.cli-etapa,
.sol-cola,
.sol-detalle,

.sol-metrica,
.cli-metrica,
.cli-tarjeta,

.sol-fila,
.cli-cliente,
.cli-referencia {
  border-radius: var(--radius-fila);
}

.solicitud-chip,
.cli-etiqueta,
.sol-tipo,
.cli-estado,
.cli-conteo {
  border-radius: var(--radius-chip);
}

/* --------------------------------------------------------------------------
   Movimiento
   --------------------------------------------------------------------------
   Nada permanente ni decorativo: solo respuesta al cursor.
   -------------------------------------------------------------------------- */
.module-nav,
.nav-item {
  transition: background-color var(--mov-nav), border-color var(--mov-nav), color var(--mov-nav);
}

.sol-metrica,
.cli-metrica,
.cli-cliente,
.cli-referencia,
.sol-fila,
.cli-carpeta {
  transition: transform var(--mov-tarjeta), background-color var(--mov-tarjeta), border-color var(--mov-tarjeta);
}

.sol-fila:hover,
.cli-carpeta:hover {
  transform: translateY(-2px);
}


@media (prefers-reduced-motion: reduce) {
  .sol-fila:hover,
  .cli-carpeta:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Cortes responsive del sistema
   --------------------------------------------------------------------------
   Los modulos ya traen los suyos; estos son los que faltaban por debajo.
   -------------------------------------------------------------------------- */
@media (max-width: 1320px) {
  .cli-resumen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .sol-metricas,
  .cli-metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cli-resumen-grid,
  .sol-modal-fila {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .sol-metricas,
  .cli-metricas,
  .cli-carpetas {
    grid-template-columns: minmax(0, 1fr);
  }

  .cli-etapa-cabecera,
  .sol-cabecera {
    padding: var(--space-4);
  }

  .cli-cliente-acciones {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   Rescatado de los temas anteriores
   --------------------------------------------------------------------------
   Al retirar "Tema negro pleno" y "Restaurar acentos DITAR" se iba con ellos
   una decena de reglas que no eran de color sino de estructura. Son estas. El
   resto de aquellos bloques era paleta, y Titanio ya la cubre entera.
   -------------------------------------------------------------------------- */

/* La rejilla decorativa del fondo. Titanio consigue la profundidad con
   superficies y bordes, no con adornos permanentes. */
body.yt-dark::before,
.page-glow {
  display: none !important;
}

/* La portada de acceso: la fotografia de planta con su degradado. Es lo unico
   de la app que lleva imagen de fondo, y se perderia al quitar el tema viejo. */
.login-gate {
  background-color: var(--titanium-canvas) !important;
  background-image:
    linear-gradient(90deg, rgba(7, 8, 9, 0.99) 0%, rgba(7, 8, 9, 0.82) 46%, rgba(7, 8, 9, 0.99) 100%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.42) 0%, rgba(7, 8, 9, 0.92) 100%),
    url("./assets/app/FONDO%20LOGUIN.png") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal, normal, luminosity !important;
}

/* Velo sobre la fotografia para que el formulario se lea encima. */
.login-gate::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(7, 8, 9, 0.32) !important;
}

/* Casillas y conmutadores en verde: son controles de accion. Antes iban en
   blanco con un grayscale encima, herencia del tema monocromo. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--titanium-green);
}

/* --------------------------------------------------------------------------
   Barra lateral: secciones separadas, altura completa
   --------------------------------------------------------------------------
   Antes eran seis botones seguidos sin jerarquia: habia que leerlos todos para
   encontrar uno. Ahora van agrupados por lo que se hace en cada sitio —donde se
   empieza, lo que se produce, con quien se trata y los ajustes— y la barra
   ocupa el alto disponible en vez de quedarse a media pantalla.

   El elemento activo va en DORADO, no en verde: marca donde estas, que es
   identidad, no una accion. El verde queda para los botones.
   -------------------------------------------------------------------------- */
.yt-sidebar {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: var(--space-4) 0 var(--space-6) !important;
  background: var(--titanium-shell) !important;
  border-right: 1px solid var(--titanium-border-soft) !important;
}

/* La lista crece y desplaza sola; lo de arriba y lo de abajo queda fijo. */
.yt-sidebar .module-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 var(--space-3) !important;
}

/* Encabezado de seccion. */
.module-nav-group {
  margin: var(--space-6) 0 var(--space-2) var(--space-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--titanium-muted) !important;
}

/* El primero no necesita separacion: ya la da el borde de arriba. */
.module-nav-group:first-child {
  margin-top: var(--space-2) !important;
}

.yt-sidebar .module-nav {
  border-radius: var(--radius-control) !important;
  padding: var(--space-3) var(--space-4) !important;
  gap: var(--space-4) !important;
  border: 1px solid transparent !important;
}

.yt-sidebar .module-nav:hover:not(.is-active) {
  background: var(--titanium-raised) !important;
  border-color: var(--titanium-border-soft) !important;
}

.yt-sidebar .module-nav.is-active {
  background: var(--titanium-accent) !important;
  border-color: rgba(199, 165, 75, 0.34) !important;
  box-shadow: inset 3px 0 0 var(--titanium-gold) !important;
  color: var(--titanium-text) !important;
}

.yt-sidebar .module-nav.is-active .module-nav-icon {
  background: rgba(199, 165, 75, 0.16) !important;
  color: var(--titanium-gold-strong) !important;
}

/* Lo que iba antes de la lista (presentacion y flujo) se queda arriba y no
   compite por el alto. */
.yt-sidebar .sidebar-intro,
.yt-sidebar .workflow-guide {
  flex: 0 0 auto !important;
}

.yt-sidebar .sidebar-footer,
.yt-sidebar .sidebar-status {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}


/* ==========================================================================
   Tablero
   ==========================================================================
   Los indicadores que antes vivian sueltos en cada modulo. El orden importa:
   arriba lo que espera a alguien y debajo el volumen, porque un contador de
   "31 fichas" no dice nada por si solo.

   El color aqui SI es semantico: dorado lo que hay que repartir, rojo lo que
   el cliente espera, violeta lo que esta en revision, azul lo clasificado. El
   verde no aparece como fondo: es de las acciones.
   ========================================================================== */
#panel-tablero {
  --sup-fondo: var(--titanium-shell);
  --sup-tarjeta: var(--titanium-surface);
  --sup-elemento: var(--titanium-raised);
  --sup-linea: var(--titanium-border-soft);
  --sup-linea-fuerte: var(--titanium-border);
}

body[data-active-module="tablero"].module-wide .yt-layout,
body[data-active-module="tablero"].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  gap: 18px !important;
}

body[data-active-module="tablero"] .yt-right-panel {
  display: none !important;
}

body[data-active-module="tablero"] .editor-panels,
body[data-active-module="tablero"] .module-panel {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* --- Cabecera ------------------------------------------------------------ */
.tb-cabecera {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  border: 1px solid var(--titanium-border-soft);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--titanium-raised), var(--titanium-shell));
}

.tb-cabecera > div {
  flex: 1 1 260px;
  min-width: 0;
}

.tb-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--titanium-gold);
}

.tb-cabecera h2 {
  margin: var(--space-1) 0 var(--space-1);
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.3;
}

.tb-cabecera p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--titanium-muted);
}

.tb-aviso {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid var(--titanium-border-soft);
  background: var(--titanium-shell);
  font-size: 0.8125rem;
  color: var(--titanium-technical);
}

.tb-aviso.es-error {
  border-color: rgba(239, 114, 114, 0.4);
  color: var(--titanium-red);
}

/* --- Pendientes: la fila que se lee primero ------------------------------ */
.tb-pendientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tb-pendiente {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6) !important;
  border-radius: var(--radius-metrica) !important;
  border: 1px solid var(--titanium-border-soft);
  background: var(--titanium-surface);
  text-align: left;
  cursor: pointer;
  transition: transform var(--mov-tarjeta), border-color var(--mov-tarjeta);
}

.tb-pendiente:hover {
  transform: translateY(-2px);
  border-color: var(--titanium-border);
}

.tb-pendiente strong {
  font-size: 2rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.tb-pendiente span {
  font-size: 0.75rem;
  color: var(--titanium-muted);
  font-weight: 600 !important;
}

/* Cada pendiente con su color, uno por significado. */
.tb-pendiente[data-tono="oro"] strong { color: var(--titanium-gold-strong); }
.tb-pendiente[data-tono="rojo"] strong { color: var(--titanium-red); }
.tb-pendiente[data-tono="violeta"] strong { color: var(--titanium-violet); }
.tb-pendiente[data-tono="azul"] strong { color: var(--titanium-blue); }

/* En cero deja de reclamar atencion. */
.tb-pendiente.esta-limpio strong { color: var(--titanium-muted); }

/* --- Volumen: contexto, no urgencia -------------------------------------- */
.tb-volumen {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-bottom: var(--space-6);
  border: 1px solid var(--titanium-border-soft);
  border-radius: var(--radius-control);
  background: var(--titanium-border-soft);
  overflow: hidden;
}

.tb-dato {
  flex: 1 1 120px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--titanium-shell);
}

.tb-dato span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--titanium-muted);
}

.tb-dato strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* --- Bloques -------------------------------------------------------------- */
.tb-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.tb-bloque {
  border: 1px solid var(--titanium-border-soft);
  border-radius: var(--radius-panel);
  background: var(--titanium-surface);
  overflow: hidden;
}

.tb-bloque-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--titanium-border-soft);
  background: var(--titanium-raised);
}

.tb-bloque-cabecera > div {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-bloque-cabecera h3 {
  margin: 0;
  font-size: 1rem;
}

.tb-bloque-cabecera p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--titanium-muted);
}

.tb-conteo {
  padding: 3px 11px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--titanium-border);
  background: var(--titanium-shell);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--titanium-technical);
}

.tb-lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--titanium-border-soft);
  max-height: min(52vh, 520px);
  overflow-y: auto;
}

.tb-vacio {
  margin: 0;
  padding: var(--space-8) var(--space-6);
  background: var(--titanium-surface);
  color: var(--titanium-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- Filas ---------------------------------------------------------------- */
.tb-fila {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-6) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--titanium-surface);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mov-tarjeta);
}

.tb-fila:hover {
  background: var(--titanium-raised);
}

/* Lo que lleva demasiado parado se marca en el borde, no con un icono mas. */
.tb-fila.es-viejo {
  box-shadow: inset 3px 0 0 var(--titanium-red);
}

.tb-tipo {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--titanium-border);
  background: var(--titanium-shell);
  color: var(--titanium-muted);
  font-size: 0.6875rem;
  font-weight: 600 !important;
  text-align: center;
  text-transform: capitalize;
}

.tb-tipo[data-tipo="ficha"] { border-color: rgba(156, 139, 216, 0.36); color: var(--titanium-violet); }
.tb-tipo[data-tipo="sin-asignar"] { border-color: rgba(199, 165, 75, 0.38); color: var(--titanium-gold-strong); }
.tb-tipo[data-tipo="respuesta"] { border-color: rgba(239, 114, 114, 0.38); color: var(--titanium-red); }

.tb-fila-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-fila-cuerpo strong {
  display: block;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-fila-cuerpo small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--titanium-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-dias {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--titanium-muted);
  white-space: nowrap;
}

.tb-fila.es-viejo .tb-dias {
  color: var(--titanium-red);
  font-weight: 600;
}

@media (max-width: 680px) {
  .tb-columnas { grid-template-columns: minmax(0, 1fr); }
  .tb-tipo { min-width: 0; }
}

@media (max-width: 430px) {
  .tb-pendientes { grid-template-columns: minmax(0, 1fr); }
  .tb-dato { flex: 1 1 100%; }
}

/* ==========================================================================
   Configuracion: entrada por areas
   ==========================================================================
   Antes las cuatro areas salian a la vez repartidas en un mosaico de doce
   columnas. Se elige una y se trabaja en ella sola.

   Los bloques son los mismos —mismos id, misma logica— y siguen con su estilo
   de siempre; esto solo viste la portada y la barra de regreso.
   ========================================================================== */
#panel-configuracion .cfg-portada {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  border: 1px solid var(--titanium-border-soft);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--titanium-raised), var(--titanium-shell));
}

#panel-configuracion .cfg-portada > div {
  flex: 1 1 280px;
  min-width: 0;
}

#panel-configuracion .cfg-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--titanium-gold);
}

#panel-configuracion .cfg-portada h2 {
  margin: var(--space-1) 0 var(--space-1);
  font-size: clamp(23px, 2.1vw, 32px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.3;
}

#panel-configuracion .cfg-portada p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--titanium-muted);
}

#panel-configuracion .cfg-nota {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--titanium-border-soft);
  border-radius: var(--radius-control);
  background: var(--titanium-shell);
  color: var(--titanium-muted);
  font-size: 0.75rem;
}

/* --- Las cuatro puertas ---------------------------------------------------- */
#panel-configuracion .cfg-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: var(--space-4);
}

#panel-configuracion .cfg-tarjeta {
  display: grid;
  /* icono | texto | cifra | flecha. Eran cuatro hijos con tres columnas
     declaradas, asi que la flecha se caia a una segunda fila. */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-6) !important;
  border: 1px solid var(--titanium-border-soft) !important;
  border-radius: var(--radius-panel) !important;
  background: var(--titanium-surface) !important;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--mov-tarjeta), border-color var(--mov-tarjeta);
}

#panel-configuracion .cfg-tarjeta:hover {
  transform: translateY(-2px);
  border-color: var(--titanium-border) !important;
}

#panel-configuracion .cfg-tarjeta-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-control);
  background: rgba(224, 199, 101, 0.1);
  color: var(--titanium-gold-strong);
}

/* Un color por area, para reconocerlas de un vistazo. El verde no entra: es
   de las acciones, no de la navegacion. */
#panel-configuracion .cfg-tarjeta-icono[data-area="usuarios"] {
  background: rgba(89, 168, 232, 0.1);
  color: var(--titanium-blue);
}
#panel-configuracion .cfg-tarjeta-icono[data-area="valores"] {
  background: rgba(156, 139, 216, 0.1);
  color: var(--titanium-violet);
}

#panel-configuracion .cfg-tarjeta-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#panel-configuracion .cfg-tarjeta-texto strong {
  font-size: 1rem;
}

#panel-configuracion .cfg-tarjeta-texto small {
  margin-top: 5px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--titanium-muted);
}

#panel-configuracion .cfg-tarjeta-dato {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--titanium-muted);
  white-space: nowrap;
}

/* Sin cifra no se dibuja el separador: una tarjeta a medio cargar no debe
   parecer que le falta algo. */
#panel-configuracion .cfg-tarjeta-dato:not(:empty) {
  padding-left: var(--space-5);
  border-left: 1px solid var(--titanium-border-soft);
}

#panel-configuracion .cfg-tarjeta-flecha {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--titanium-raised);
  color: var(--titanium-muted);
  font-size: 1rem;
}

/* --- Dentro de un area ----------------------------------------------------- */
#panel-configuracion .cfg-barra {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--titanium-border-soft);
}

#panel-configuracion .cfg-barra-titulo {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--titanium-muted);
}

/* El mosaico de doce columnas colocaba cada bloque en su casilla. Ya no hay
   mosaico: dentro de un area el bloque ocupa todo el ancho. */
body[data-active-module="configuracion"] #panel-configuracion .cfg-vista .form-block {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 620px) {
  #panel-configuracion .cfg-tarjetas { grid-template-columns: minmax(0, 1fr); }
  #panel-configuracion .cfg-tarjeta { gap: var(--space-4); }
  #panel-configuracion .cfg-tarjeta-dato { display: none; }
  #panel-configuracion .cfg-barra { flex-wrap: wrap; }
}

/* ==========================================================================
   Avisos
   ==========================================================================
   Entra una solicitud por correo y los tres disenadores tienen que enterarse
   sin mirar la bandeja. La campana vive junto al menu de sesion.

   El contador va en dorado y no en verde: segun el sistema el dorado es
   atencion, que es exactamente lo que pide un aviso sin leer.
   ========================================================================== */
.notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: 1px solid var(--titanium-border) !important;
  border-radius: 11px !important;
  background: var(--titanium-surface) !important;
  color: var(--titanium-muted);
  cursor: pointer;
  transition: color var(--mov-tarjeta), border-color var(--mov-tarjeta);
}

.notif-boton:hover {
  color: var(--titanium-text);
  border-color: var(--titanium-border-soft) !important;
}

.notif-boton[aria-expanded="true"] {
  color: var(--titanium-gold-strong);
  border-color: rgba(224, 199, 101, 0.45) !important;
}

.notif-cuenta {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--titanium-gold);
  color: #0c0f11;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* --- El panel ------------------------------------------------------------- */
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--titanium-border);
  border-radius: var(--radius-panel);
  background: var(--titanium-surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.notif-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--titanium-border-soft);
  background: var(--titanium-raised);
}

.notif-cabecera strong {
  font-size: 0.875rem;
}

.notif-marcar {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--titanium-gold);
  font-size: 0.75rem;
  cursor: pointer;
}

.notif-marcar:hover {
  color: var(--titanium-gold-strong);
  text-decoration: underline;
}

.notif-lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  background: var(--titanium-border-soft);
}

.notif-vacio {
  margin: 0;
  padding: var(--space-8) var(--space-6);
  background: var(--titanium-surface);
  color: var(--titanium-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- Cada aviso ----------------------------------------------------------- */
.notif-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--titanium-surface);
  color: inherit;
  font-weight: 400 !important;
  text-align: left;
  cursor: pointer;
}

.notif-item:hover {
  background: var(--titanium-raised);
}

/* El punto solo aparece en lo no leido: marcar todo deja la lista en calma. */
.notif-punto {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

.notif-item.sin-leer .notif-punto {
  background: var(--titanium-gold);
}

.notif-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.notif-texto strong {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.notif-item.sin-leer .notif-texto strong {
  font-weight: 600;
}

.notif-texto small {
  margin-top: 3px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--titanium-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-cuando {
  font-size: 0.75rem;
  color: var(--titanium-muted);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .notif-panel {
    position: fixed;
    top: auto;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* El atajo de lo propio se separa de los de estado: no filtra por estado sino
   por quien lo tiene, y mezclarlo en la misma fila sin marca confunde. */
.sol-atajos .sol-atajo-mias {
  margin-left: auto;
  border-color: rgba(224, 199, 101, 0.32) !important;
}

.sol-atajos .sol-atajo-mias.is-activo {
  border-color: var(--titanium-gold) !important;
  color: var(--titanium-gold-strong);
}

/* ===========================================================================
   Desbordes de texto y listas sin desplazamiento
   ---------------------------------------------------------------------------
   Auditoria del 3 de septiembre de 2026. Se midio la pagina con contenido
   realista largo (razones sociales completas, referencias con material y
   gramaje, nombres de archivo con la nomenclatura entera) y salieron 134
   elementos desbordando.

   La causa de casi todos es la misma: en una rejilla o en un flex, un hijo con
   `min-width: auto` NO puede encogerse por debajo del ancho de su contenido.
   Un nombre largo empuja la columna, la columna empuja la fila, y el texto
   acaba fuera de la caja o cortado. Medido: 571 de 739 hijos de rejilla o flex
   estaban asi, el 77%.

   No se pone una regla universal `* { min-width: 0 }`: eso tambien dejaria
   encogerse a botones y controles que deben conservar su ancho. Se aplica solo
   donde vive el texto de datos.
   =========================================================================== */

/* --- 1. Que las celdas de datos puedan encogerse ------------------------- */
.sol-fila > *,
.cli-fila > *,
.tb-fila > *,
.form-stack > *,
.dual-grid > *,
.triple-grid > *,
.single-grid > *,
.editor-grid > *,
.editor-grid-wide > *,
.block-head > *,
.field-stack > *,
.sidebar-card > *,
.compact-status-item > *,
.template-library-card > *,
.cfg-tarjeta > *,
.pantone-card > *,
.module-nav-copy > *,
.side-summary-grid > *,
.profile-field-grid > *,
.login-summary-grid > *,
.smart-review-context > * {
  min-width: 0;
}

/* --- 2. Que un texto largo parta en vez de empujar ----------------------- */
/* Las razones sociales y las referencias llegan sin espacios utiles a veces
   ("NAC_INMACULADA-GUADALUPE_BOLSA-CORPORATIVA_28.5+14x35.svg"). Sin esto el
   navegador prefiere desbordar antes que partir la palabra. */
.sol-fila,
.cli-fila,
.tb-fila,
.sol-tarjeta,
.cli-tarjeta,
.sidebar-card,
.compact-status-item,
.template-library-card,
.cfg-tarjeta {
  overflow-wrap: anywhere;
}

/* --- 3. Nota sobre el recorte de una linea -------------------------------- */
/* Aqui habia una regla para .sol-celda-texto, .cli-celda-texto y
   .tb-celda-texto. Esas clases NO EXISTEN: me las invente al escribir el CSS
   sin mirar que genera app.js, asi que la regla no se aplicaba a nada.
   
   Las clases reales son .sol-fila-asunto, .cli-cliente-ref y las de
   .tb-fila-cuerpo, y todas ellas YA traian overflow:hidden, nowrap y
   text-overflow:ellipsis de antes. No hacia falta ninguna regla nueva: lo que
   faltaba era el atributo title, que se anadio en app.js y tablero.js para que
   el texto recortado se pueda leer al pasar el raton. */

/* --- 4. Listas que crecian sin fin ---------------------------------------- */
/* tb-lista, cli-lista y notif-lista ya tenian tope y desplazamiento. La bandeja
   de solicitudes no: con cien solicitudes la pagina entera se estiraba y la
   cabecera de la lista se perdia arriba. */
.sol-lista {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- 5. Rejillas anchas que no caben en pantallas pequenas --------------- */
/* Antes se salian por el lado derecho y el cuerpo entero se desplazaba en
   horizontal, que es el peor sintoma posible: se mueve toda la pagina. */
.template-library-grid,
.compact-status-grid,
.pantone-grid {
  overflow-x: auto;
}

/* Y el ultimo cinturon: que el documento nunca se desplace de lado. */
body {
  overflow-x: hidden;
}

/* --- 6. Segunda pasada de la auditoria ----------------------------------- */
/* La primera tanda bajo los hijos rigidos de 571 a 414. Estos son los
   contenedores que quedaban, salidos de volver a medir. */
.label > *,
.module-nav-list > *,
.module-nav > *,
.module-nav-copy > *,
.smart-chat-composer > *,
.smart-chat-actions > *,
.pantone-grid > *,
.pantone-input-row > *,
.sol-tarjeta-titulo > *,
.cfg-tarjeta-texto > *,
.cfg-barra > *,
.solicitud-respuesta-acciones > *,
.segmented-option > *,
.cli-ruta > *,
.config-format-item > *,
.config-format-strip > *,
.config-field-matrix > *,
.sidebar-section > *,
.yt-sidebar > *,
.session-info > *,
.american-measure-grid > *,
.label-direct-controls > *,
.label-direct-editor-panel > *,
.editor-panels > *,
.editor-shell > * {
  min-width: 0;
}

/* Un select con opciones largas ensanchaba su columna y empujaba la rejilla
   entera. El ancho lo manda el contenedor, no la opcion mas larga. */
select,
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  max-width: 100%;
}

/* --- 7. La bandeja de solicitudes, ahora con el peso correcto ------------ */
/* La regla de arriba no llegaba a aplicarse: mas arriba en este archivo hay
   `.sol-workspace > [data-etapa="bandeja"] .sol-lista { max-height: none;
   overflow: visible }`, que pesa (0,3,0) y le gana a `.sol-lista`, que pesa
   (0,1,0). Es el mismo choque de especificidad que tenia el detalle. Se repite
   el selector completo para empatar y, al ir despues, ganar. */
.sol-workspace > [data-etapa="bandeja"] .sol-lista {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- 8. La otra mitad: dejar que el texto largo parta ---------------------- */
/* `min-width: 0` por si solo no basta, y medido se ve por que: al permitir que
   la caja se encoja, el texto deja de empujar la rejilla pero empieza a salirse
   de su propia caja. Los desbordes subieron de 134 a 190 con solo esa mitad.
   La pareja correcta es encoger Y partir.
   
   Se usa `anywhere` y no `break-word`: `anywhere` si cuenta para el calculo del
   ancho minimo del contenido, que es justo lo que hace falta en una rejilla.
   Se limita al contenido de la aplicacion para no tocar el area de impresion
   de la ficha, donde el texto va maquetado a medida. */
.app-shell :where(p, span, strong, em, dd, dt, li, td, th, h1, h2, h3, h4, h5, h6,
                  label, small, button, a, figcaption, blockquote):not(#sheet, #sheet *) {
  overflow-wrap: anywhere;
}

/* Las pestanas del detalle se desplazan de lado cuando no caben, en vez de
   estirar el panel. Antes solo lo hacian dentro de una media query. */
.solicitud-pestanas,
.cli-pestanas,
.cfg-barra,
.label-rich-editor-toolbar,
.config-format-strip {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Los campos de una sola linea que no deben partirse nunca (codigos, medidas)
   se cortan con puntos suspensivos, que es mas legible que partir un codigo. */
.sol-eyebrow,
.cli-codigo,
.tb-codigo,
.session-avatar,
.editor-action-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* --- 9. Por que la ficha se excluye en el selector y no con un reset ------ */
/* `article#sheet` cuelga de `.app-shell`, asi que la regla 8 la alcanzaba. El
   primer intento fue anadir despues `#sheet * { overflow-wrap: normal }`, y
   estuvo mal: al comparar la ficha antes y despues aparecieron 9 elementos
   cambiados. El CSS de la ficha ya ponia `anywhere` a proposito en los ocho
   valores de color y en el parrafo de observaciones, y ese reset se lo quitaba.
   Un codigo de color largo habria acabado fuera del papel.
   
   Por eso la exclusion va dentro del selector de la regla 8, con `:not()`: asi
   la ficha no recibe nada nuevo y conserva exactamente lo que ya tenia.
   Comprobado: 0 diferencias en las 234 cajas de la ficha. */

/* ===========================================================================
   Peso visual: escala, logotipo y tarjetas de configuracion
   ---------------------------------------------------------------------------
   Medido el 3 de septiembre: habia 73 tamanos de fuente distintos en 563
   declaraciones, el 94% fuera de cualquier escala. Ocho "pequenos" que el ojo
   no distingue (0.68, 0.72, 0.74, 0.76, 0.78, 0.82, 0.84, 0.86rem) pero que
   hacen que ninguna fila case con la de al lado. Eso es lo que se lee como
   provisional. Ahora son 11 pasos: 11, 12, 13, 14, 16, 18, 21, 26, 32, 42, 68.
   La ficha tecnica no entra: sus 14 declaraciones quedaron intactas.
   =========================================================================== */

/* --- El logotipo se salia de su columna ---------------------------------- */
/* Medido: .brand-logo ocupaba 460px dentro de una caja de 332px, con
   `flex: 0 0 auto`, asi que no cedia. Se cortaban las primeras letras y en
   pantalla se leia "ECNICA". */
.header-left {
  min-width: 0;
  overflow: hidden;
}

.brand,
.brand-logo {
  min-width: 0;
  max-width: 100%;
}

.brand-logo > svg,
.brand-logo > img {
  max-width: 100%;
  height: auto;
}

/* --- La tarjeta de configuracion ----------------------------------------- */
/* La columna del dato era `auto` con `white-space: nowrap`, asi que un texto
   como "Sin respaldo importado en esta sesion." se llevaba 243px de los 580 de
   la tarjeta (el 42%) y dejaba el titulo y la descripcion en 183px. El dato es
   informacion secundaria: no puede mandar sobre el nombre de la seccion. */
#panel-configuracion .cfg-tarjeta {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, auto) auto;
}

#panel-configuracion .cfg-tarjeta-dato {
  max-width: 11ch;
  white-space: normal;
  text-align: right;
  line-height: 1.35;
}

/* Cuando la tarjeta va estrecha, el dato estorba mas de lo que informa. */
@media (max-width: 900px) {
  #panel-configuracion .cfg-tarjeta-dato {
    display: none;
  }
}

/* --- 10. El titulo del modulo se cortaba por arriba ----------------------- */
/* Medido el 3 de septiembre con el titulo "Tablero" y con "Solicitudes":
   `.yt-main-content` es el contenedor que se desplaza (overflow-y: auto) y
   tenia `padding-top: 0`. El titulo empezaba exactamente a 0 px de ese borde,
   asi que las astas altas de la T y la S quedaban justo en la linea de corte:
   al menor desplazamiento, o por el simple redondeo a pixel, se rebanaban.

   Se combina con lo otro que lo empeoraba: `.workspace-copy h1` tenia
   `line-height: 1.08`, que deja la caja de linea en 19,44 px cuando Manrope
   pide 24. Eso ya se subio a 1,30 junto con las otras 86 declaraciones
   demasiado apretadas del archivo.

   Aqui solo se separa el contenido del borde. Doce pixeles bastan y no mueven
   la maquetacion de forma apreciable. */
/* Cuatro modulos ponen `padding: 0 !important` sobre este mismo contenedor
   (clientes, cliente-detalle, configuracion, fichas-tecnicas) y ganaban por
   peso y por !important. Se repite la condicion del atributo para empatar y,
   al ir despues en el archivo, ganar. No se usa un selector generico con
   !important porque entonces se perderia el `padding: 0` que esos modulos
   quieren para el resto de lados: aqui solo se toca arriba y abajo. */
.yt-main-content,
body[data-active-module] .yt-main-content,
body[data-viewer-mode] .yt-main-content {
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}

/* --- 11. La barra lateral cambiaba de ancho segun el modulo --------------- */
/* Medido el 3 de septiembre comparando Tablero con Configuracion:
   
     Tablero        barra 248 px   boton 227 px   "Fichas tecnicas" en 1 linea
     Configuracion  barra 212 px   boton 167 px   "Fichas tecnicas" en 2 lineas
   
   Seis reglas fijan la barra en 208 px con !important para dar mas sitio al
   contenido, y Configuracion ademas le anade 12 px de relleno a cada lado. El
   boton se queda con 60 px menos y la etiqueta ya no cabe: se parte en dos
   lineas y el subtitulo se corta ("Pendientes y seguimie...").
   
   La barra de navegacion es lo unico que se ve igual en todas las pantallas.
   Que cambie de ancho al saltar de modulo es justo lo que hace que la
   aplicacion parezca hecha a trozos. Se unifica en el ancho base, que es el
   que deja las etiquetas en una linea. */
body.module-wide .yt-layout,
body[data-active-module].module-wide .yt-layout {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
}

/* Colapsada tambien igual en todas. */
body.sidebar-collapsed.module-wide .yt-layout,
body[data-active-module].sidebar-collapsed.module-wide .yt-layout {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

/* Y sin el relleno extra que solo tenia Configuracion. */
body[data-active-module="configuracion"] .yt-sidebar {
  padding: 12px 0 18px !important;
}

/* ============================================================
   C12 - Datos heredados de otra ficha
   La lista del aviso. Toma la paleta del modal de guardado, del que es
   hermano: mismo fondo, mismo borde dorado, misma tipografia.
   ============================================================ */

.inherited-fields-list {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.inherited-fields-list li {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 16px;
  background: rgba(244, 247, 245, 0.04);
  border: 1px solid rgba(199, 165, 75, 0.14);
  border-radius: 14px;
}

.inherited-fields-name {
  color: rgba(244, 247, 245, 0.62);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inherited-fields-value {
  min-width: 0;
  color: #e0c765;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .inherited-fields-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* Estado vacio de las vinetas del plano. Sigue a .sol-vacio, que es el mismo
   caso: una lista que todavia no tiene nada y que sin esto se veia como un
   hueco sin explicacion. */
.plan-callout-vacio {
  margin: 0;
  padding: 24px 16px;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   El remitente en la bandeja de solicitudes

   Va dentro de la celda del asunto y no como columna propia: la rejilla
   de la bandeja tiene siete columnas fijas, cada una con su grid-area, y
   anadir una octava descuadraba la alineacion de todas las filas.

   Mismo chip que .sol-cuenta, para que se lea como parte de la misma
   familia y no como un elemento nuevo.
   ============================================================ */

.sol-remitente {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  color: var(--app-text);
  background: var(--sup-elevado);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  /* No se parte: el asunto de al lado ya se recorta con puntos suspensivos,
     y un nombre a medias no dice quien pidio el trabajo. */
  white-space: nowrap;
}

/* ==========================================================================
   Ancho de la barra lateral segun el tamano de pantalla.

   El ancho sale de --sidebar-width, y esa variable se declaraba una sola vez
   (248px) sin ajustarse nunca. Las reglas que arman la rejilla la aplican con
   !important, asi que las adaptaciones responsive que habia mas arriba en el
   archivo -"a 1320px la barra mide 96px"- no llegaban a aplicarse: la barra
   seguia midiendo 248px mientras el texto de navegacion SI se ocultaba. El
   resultado eran botones de 227px con un icono de 26px dentro y el resto
   vacio.

   Se corrige moviendo la decision a la variable, que es de donde se lee de
   verdad, en vez de anadir otra regla mas a las que ya competian.
   ========================================================================== */
@media (max-width: 1600px) {
  :root {
    --sidebar-width: 208px;
  }
}

@media (max-width: 1320px) {
  :root {
    /* Modo icono: aqui el texto de navegacion ya esta oculto, asi que la
       barra tiene que encoger hasta el ancho del icono mas su respiro. */
    --sidebar-width: 68px;
  }

  /* Los rotulos de seccion ("Flujo de ficha", "Operacion") no caben en
     68px y se parten en tres renglones de dos letras. En modo icono
     sobran: los grupos ya se distinguen por la separacion entre bloques. */
  .module-nav-group {
    display: none;
  }
}

/* ==========================================================================
   Bandeja de solicitudes: subir la lista.

   Medido antes de tocar nada: la primera solicitud empezaba a 372px del borde
   superior, con la ventana a 800px de alto. De esos 372px, 94 eran huecos
   entre bloques y 120 eran la palabra "Solicitudes" dicha tres veces: el
   titulo del modulo, la ruta ("Explorando > Solicitudes") y el titulo de la
   bandeja ("Bandeja de solicitudes").

   Se quita la repeticion y se aprietan las separaciones. No se elimina
   informacion: el contador de solicitudes y los filtros siguen donde estaban.
   ========================================================================== */
body[data-active-module="solicitudes"] #active-module-title {
  /* La ruta de justo debajo ya dice donde estas. */
  display: none;
}

body[data-active-module="solicitudes"] .sol-cabecera {
  margin-bottom: 10px;
}

body[data-active-module="solicitudes"] .sol-cola-cabecera {
  gap: 10px;
}

body[data-active-module="solicitudes"] .sol-cola-titulo {
  margin-bottom: 0;
}

/* "Bandeja de solicitudes" repite lo que ya dice la ruta; el contador si
   aporta, asi que se queda y sube a ocupar su sitio. */
body[data-active-module="solicitudes"] .sol-cola-titulo h2 {
  display: none;
}

body[data-active-module="solicitudes"] #solicitudes-conteo {
  margin: 0;
  font-size: 0.82rem;
}

body[data-active-module="solicitudes"] .sol-filtros,
body[data-active-module="solicitudes"] .sol-atajos {
  margin-block: 0;
}

/* ==========================================================================
   Bandeja de solicitudes como tabla.

   Las filas ya caian en una rejilla de siete columnas, pero sin titulos: habia
   que deducir que era cada dato. Se anade el encabezado, que comparte la misma
   rejilla para quedar alineado, y se intercambian estado y asignado para
   seguir el orden acordado (codigo, cliente, asunto, asignado, estado, adj.,
   fecha).
   ========================================================================== */
.sol-workspace > [data-etapa="bandeja"] .sol-fila {
  grid-template-columns:
    202px                    /* codigo, tipo y numero de correos */
    minmax(150px, 1fr)       /* cliente y referencia */
    minmax(200px, 2.2fr)     /* asunto */
    168px                    /* asignado */
    104px                    /* estado */
    52px                     /* adjuntos */
    116px;                   /* fecha */
}

.sol-workspace > [data-etapa="bandeja"] .sol-asignado { grid-area: 1 / 4; }
.sol-workspace > [data-etapa="bandeja"] .sol-fila-cliente > .solicitud-chip { grid-area: 1 / 5; }

.sol-workspace > [data-etapa="bandeja"] .sol-tabla-cabeza {
  display: grid;
  gap: 6px 14px;
  align-items: center;
  padding: 9px 18px;
  grid-template-columns:
    202px
    minmax(150px, 1fr)
    minmax(200px, 2.2fr)
    168px
    104px
    52px
    116px;
  border-bottom: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Adjuntos y fecha se leen pegados a la derecha, igual que su contenido. */
.sol-workspace > [data-etapa="bandeja"] .sol-tabla-cabeza span:nth-child(6),
.sol-workspace > [data-etapa="bandeja"] .sol-tabla-cabeza span:nth-child(7) {
  justify-self: end;
}

.sol-tabla-cabeza[hidden] {
  display: none;
}

/* En pantalla angosta la fila se reacomoda en dos renglones y los titulos
   dejan de corresponderse con lo que hay debajo. */
@media (max-width: 1080px) {
  .sol-workspace > [data-etapa="bandeja"] .sol-tabla-cabeza {
    display: none;
  }
}

/* Cabecera de la bandeja en una sola linea: ruta a la izquierda, recargar y
   "Nueva solicitud" a la derecha. El titulo y el contador ocupaban antes un
   renglon propio que repetia lo que ya decia la ruta. */
.sol-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-active-module="solicitudes"] .sol-conteo {
  margin: 0;
  font-size: 0.8rem;
}

/* ==========================================================================
   Detalle de solicitud en dos columnas.

   Todo esto ya existia; estaba apilado en vertical, asi que para llegar al
   correo habia que pasar por el progreso y el bloque de asignacion. Ahora el
   correo y sus pestanas ocupan la columna ancha y lo de apoyo -progreso,
   asignacion, estado- va en una columna propia al lado.

   No se anade ni se quita informacion: son los mismos bloques, recolocados.
   ========================================================================== */
.sol-workspace > .sol-detalle:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "volver    volver"
    "cabecera  cabecera"
    "pestanas  lateral"
    "cuerpo    lateral";
  align-content: start;
  gap: 14px 16px;
}

.sol-workspace > .sol-detalle:not([hidden]) > .sol-volver-barra { grid-area: volver; }
.sol-workspace > .sol-detalle:not([hidden]) > .sol-detalle-cabecera { grid-area: cabecera; }
.sol-workspace > .sol-detalle:not([hidden]) > .solicitud-pestanas { grid-area: pestanas; }
.sol-workspace > .sol-detalle:not([hidden]) > .solicitud-detalle-cuerpo { grid-area: cuerpo; min-width: 0; }
.sol-workspace > .sol-detalle:not([hidden]) > .sol-panel-lateral { grid-area: lateral; }

.sol-panel-lateral {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

/* En la columna estrecha los selectores van uno debajo de otro; en horizontal
   no caben y se recortaban los nombres de los disenadores. */
.sol-panel-lateral .sol-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.sol-panel-lateral .sol-acciones label {
  width: 100%;
}

.sol-panel-lateral .sol-acciones select {
  width: 100%;
}

/* Por debajo de 1200px no caben dos columnas utiles: el correo se queda sin
   ancho para leerse. Se vuelve a una sola, con el apoyo primero. */
@media (max-width: 1200px) {
  .sol-workspace > .sol-detalle:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "volver"
      "cabecera"
      "lateral"
      "pestanas"
      "cuerpo";
  }

  .sol-panel-lateral .sol-acciones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sol-panel-lateral .sol-acciones label,
  .sol-panel-lateral .sol-acciones select {
    width: auto;
  }
}

/* ==========================================================================
   Detalle: una sola barra de navegacion.

   Al abrir una solicitud habia dos barras apiladas diciendo lo mismo: la ruta
   del modulo ("Explorando > Solicitudes > SOL-2026-0001") y, justo debajo,
   "Regresar a solicitudes · SOL-2026-0001 · NALSANI SAS". Se queda la segunda,
   que ademas trae el boton de volver.

   Con ella se va el boton "Nueva solicitud", que dentro de una solicitud
   concreta no es la accion que nadie busca. Sigue estando en la bandeja, que
   es de donde se crean.
   ========================================================================== */
#panel-solicitudes[data-etapa-activa="detalle"] .sol-cabecera {
  display: none;
}

/* Sin la barra de arriba, esta pasa a ser la primera: se le quita el hueco
   que la separaba de la otra. */
#panel-solicitudes[data-etapa-activa="detalle"] .sol-volver-barra {
  margin-top: 0;
}

/* ==========================================================================
   Bandeja: la fila de la ruta se va, sus botones bajan a los filtros.

   Esa fila usaba el ancho entero para decir "Explorando > Solicitudes" y
   sostener dos botones, con todo el hueco en medio. La ruta no hace falta
   aqui: el menu lateral ya marca en que modulo estas, y el boton de volver
   solo aplica al detalle. Asi la bandeja pasa de tres filas de cabecera a dos.
   ========================================================================== */
#panel-solicitudes[data-etapa-activa="bandeja"] .sol-cabecera {
  display: none;
}

/* Cuarta columna para los botones, que antes vivian en la fila de arriba. */
#panel-solicitudes .sol-filtros {
  grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  align-items: center;
}

@media (max-width: 760px) {
  #panel-solicitudes .sol-filtros {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En una columna los botones ocupan su propia fila, a la derecha. */
  #panel-solicitudes .sol-filtros .sol-cabecera-acciones {
    justify-content: flex-end;
  }
}

/* Los enlaces del correo -el de aprobacion sobre todo- son largos y no tienen
   espacios: sin esto se salian de la tarjeta del mensaje. */
.solicitud-mensaje-cuerpo,
#solicitud-cuerpo {
  overflow-wrap: anywhere;
}

.solicitud-mensaje-cuerpo a,
#solicitud-cuerpo a {
  color: var(--app-accent, #4ade80);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Correo largo: se pliega, no se corta. El texto completo esta en la pagina;
   el boton solo decide cuanto se ve. Antes se recortaba el dato a 6000
   caracteres y lo que sobraba no llegaba al navegador. */
.solicitud-mensaje-cuerpo[data-plegado="si"] {
  position: relative;
  max-height: 260px;
  overflow: hidden;
}

/* Difuminado al pie para que se vea que el texto sigue. */
.solicitud-mensaje-cuerpo[data-plegado="si"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--sup-fondo, #14181b));
  pointer-events: none;
}

.solicitud-ver-mas {
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid var(--sup-linea, rgba(157, 168, 163, 0.22));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.solicitud-ver-mas:hover {
  border-color: rgba(157, 168, 163, 0.5);
}

/* ==========================================================================
   Corrige una regresion del detalle en dos columnas.

   Al pasar .sol-detalle a grid, la zona de pestañas dejo de recibir una altura
   acotada del padre y crecia sin limite: con una cola de correo larga llegaba
   a 6209px dentro de un contenedor de 768px que recorta lo que sobra y no da
   scroll. Resultado: 5441px de correo inalcanzables.

   Con la fila del cuerpo en minmax(0, 1fr), esa zona recibe el espacio que
   queda y vuelve a hacer su propio scroll, que es lo que hacia antes. El panel
   lateral se queda quieto mientras se lee el correo.
   ========================================================================== */
.sol-workspace > .sol-detalle:not([hidden]) {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
}

.sol-workspace > .sol-detalle:not([hidden]) > .solicitud-detalle-cuerpo {
  min-height: 0;
  overflow-y: auto;
}

/* El lateral tambien: si el progreso y los selectores no caben, que se
   desplacen ellos y no empujen la altura de toda la rejilla. */
.sol-workspace > .sol-detalle:not([hidden]) > .sol-panel-lateral {
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 1200px) {
  /* En una columna el apoyo va arriba y el correo debajo, pero el contenedor
     del detalle sigue teniendo altura acotada y recorta lo que sobra: probado,
     se perdian 4220px de correo. Asi que la zona de pestañas conserva su
     scroll tambien aqui, que es como leerlo entero. */
  .sol-workspace > .sol-detalle:not([hidden]) {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }

  .sol-workspace > .sol-detalle:not([hidden]) > .sol-panel-lateral {
    overflow-y: visible;
  }
}

/* ==========================================================================
   Cabecera del detalle en un solo renglon.

   Ocupaba cuatro lineas -volver, codigo+estado, cliente, asunto- y repetia el
   codigo dos veces y el cliente tres. Ahora va todo seguido: volver, codigo,
   estado, cliente y el asunto, que se recorta con puntos suspensivos si no
   cabe (el texto entero queda en el title).
   ========================================================================== */
.sol-workspace > .sol-detalle:not([hidden]) {
  grid-template-areas:
    "cabecera  cabecera"
    "pestanas  lateral"
    "cuerpo    lateral";
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* Ya no pinta nada: su contexto repetia codigo y cliente. */
.sol-workspace > .sol-detalle:not([hidden]) > .sol-volver-barra {
  display: none;
}

.sol-workspace > .sol-detalle:not([hidden]) > .sol-detalle-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.sol-detalle-cabecera #solicitud-detalle-titulo {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.sol-detalle-cabecera #solicitud-detalle-codigo,
.sol-detalle-cabecera .solicitud-chip {
  flex: 0 0 auto;
}

/* El asunto es lo unico que puede encogerse: se queda con lo que sobre. */
.sol-detalle-cabecera #solicitud-detalle-sub {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-detalle-cabecera #solicitud-cerrar {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.sol-detalle-cabecera .cli-volver {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 1200px) {
  .sol-workspace > .sol-detalle:not([hidden]) {
    grid-template-areas:
      "cabecera"
      "lateral"
      "pestanas"
      "cuerpo";
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
}

/* En pantalla angosta el asunto sobra antes que nada: sin el, el renglon
   sigue cabiendo con lo que de verdad identifica la solicitud. */
@media (max-width: 900px) {
  .sol-detalle-cabecera #solicitud-detalle-sub {
    display: none;
  }
}

/* ==========================================================================
   El marco doble del fondo.

   .editor-shell repetia el fondo de su padre .yt-main-content: el MISMO color
   (rgb(27,35,39)), radio casi igual (28 contra 30) y unos pocos px mas
   pequeno. Como el color coincide no separaba nada, pero el borde redondeado
   dibujaba una segunda caja dentro de la primera. Al ser contenedores
   generales, ese marco doble salia en todos los modulos.

   Se queda el de fuera, que es el que da forma al area de trabajo.
   ========================================================================== */
/* El area de trabajo ya esta delimitada por .yt-main-content: fondo propio y
   esquina de 30px. Los contenedores que cuelgan directamente de ella repetian
   ese mismo fondo -el mismo color exacto- con esquina de 28px y unos pocos px
   menos de ancho, asi que se veia un rectangulo redondeado dentro de otro.

   Va con !important y acotado al hijo directo por dos motivos. Hay un bloque
   @media screen que impone `background: #1b2327 !important` a .editor-shell y
   .viewer-shell, y sin !important gana el. Y esas mismas clases tambien viven
   dentro de .yt-right-panel, que SI es transparente y necesita que sus hijos
   pinten la superficie: tocarlas ahi dejaria el panel derecho sin fondo. */
.yt-main-content > .viewer-shell,
.yt-main-content > .editor-shell {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Cuando el area de trabajo pintaba un recuadro por fuera, este borde era un
   tercer marco de sobra y se quito. Ahora que el area es transparente, es el
   unico que separa el detalle del fondo: vuelve, igual que el de la cola. */
.sol-workspace > .sol-detalle:not([hidden]) {
  border: 1px solid var(--sup-linea);
  border-radius: 11px;
  overflow: hidden;
}


/* El color indica el origen del archivo, no una aprobación de producción. */
@media screen {
  .sol-plano-origen {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--sup-linea);
    border-left: 4px solid var(--app-text-muted);
    border-radius: 8px;
    background: var(--sup-elevado);
    color: var(--app-text);
    overflow-wrap: anywhere;
  }
  .sol-plano-origen.es-generado {
    border-left-color: var(--app-accent);
    background: rgba(199, 165, 75, 0.08);
  }
  .sol-plano-origen.es-subido {
    border-left-color: #5fd3a6;
    background: rgba(36, 180, 126, 0.08);
  }
  .sol-plano-origen-etiqueta {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text-muted);
  }
  .sol-plano-origen strong {
    font-size: 0.9375rem;
    line-height: 1.4;
  }
  .sol-plano-origen.es-generado strong { color: var(--app-accent); }
  .sol-plano-origen.es-subido strong { color: #5fd3a6; }
  .sol-plano-origen p,
  #solicitud-plano-bloque .sol-plano-ayuda {
    display: block;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--app-text-muted);
  }
  #solicitud-plano-bloque .sol-plano-ayuda { margin: 8px 0 12px; }
  .sol-plano-error {
    display: block;
    padding: 10px 12px;
    border: 1px solid rgba(240, 164, 164, 0.4);
    border-radius: 8px;
    color: #f0a4a4;
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #solicitud-plano-bloque,
  .solicitud-plano-medida { min-width: 0; }
  #solicitud-plano-estado { overflow-wrap: anywhere; }
  #solicitud-plano-bloque .solicitud-respuesta-acciones,
  .solicitud-plano-medida .solicitud-respuesta-acciones { flex-wrap: wrap; }
  #solicitud-plano-bloque .solicitud-respuesta-acciones button,
  .solicitud-plano-medida .solicitud-respuesta-acciones button {
    max-width: 100%;
    white-space: normal;
  }
}

@media screen {
  .label-legacy-tools[hidden] { display: none !important; }
  .label-pdf-help, #bag-related-labels p {
    display: block;
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 8px 0 12px;
    overflow-wrap: anywhere;
  }
  .label-pdf-help.es-error { color: #f0a4a4; }
  .label-pdf-preview:not([hidden]) {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    margin: 12px auto;
    background: white;
    border: 1px solid var(--sup-linea);
    border-radius: 6px;
  }
  #label-source-file-name { overflow-wrap: anywhere; }
  #label-bag-link { width: 100%; min-width: 0; }
  #bag-related-labels li { margin: 8px 0; overflow-wrap: anywhere; }
}

.sol-fuente.es-subido {
  border-color: rgba(36, 180, 126, 0.42);
  background: rgba(36, 180, 126, 0.14);
  color: #5fd3a6;
  font-weight: 700;
}

.sol-fuente.es-generado {
  border-color: rgba(199, 165, 75, 0.32);
  background: rgba(199, 165, 75, 0.1);
  color: var(--app-accent);
}

/* En las tarjetas de varias medidas el titulo tiene que dejarle sitio al
   sello sin empujar el nombre de la medida a otra linea. */
.solicitud-plano-medida .sol-tarjeta-titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.solicitud-plano-medida .sol-tarjeta-titulo > div {
  min-width: 0;
}


/* Hay una regla de base que esconde todos los .module-help. Las tarjetas de
   varias medidas nacieron despues y nadie las habia exceptuado, asi que su
   unica linea de texto -el nombre del archivo, el aviso de ficha ya creada,
   y el motivo cuando el plano falla- se dibujaba con display:none. Se veia
   el titulo y los botones, y nada mas. */
.solicitud-plano-medida .module-help {
  display: block;
  margin: 2px 0 10px;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.solicitud-plano-medida .module-help.es-error {
  color: #f0a4a4;
}


/* El area de trabajo se estiraba siempre a toda la altura de la ventana. Con
   4 solicitudes en la bandeja eso dejaba 570px de caja pintada y vacia debajo
   de la tabla; en el tablero, 448px. Se leia como un segundo recuadro sin
   contenido colgando del primero.

   Con `align-self: start` la caja se ajusta a lo que hay dentro, y el
   `max-height: 100%` la vuelve a topar en la altura de la ventana cuando el
   contenido si da de si, para que siga desplazandose por dentro -que es de lo
   que dependen Configuracion, Fichas tecnicas y Crear ficha- en vez de estirar
   la pagina entera. */
.yt-main-content {
  align-self: start;
  max-height: 100%;
  /* Clientes, Configuracion y Fichas tecnicas ya la tenian transparente y por
     eso se veian limpios: el contenido se apoya en el fondo y cada bloque trae
     su propia caja. Tablero, Solicitudes y Crear ficha la pintaban, y ese era
     el recuadro grande de mas. Ahora los seis van igual.
     Con !important porque el bloque @media screen la impone. */
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* --- Cabecera de Clientes en un solo renglon ------------------------------ */
/* La palabra "Clientes" salia tres veces en cuatro renglones: el titulo del
   modulo, la ruta y el h2 de la etapa. Y la ruta de este primer nivel no
   navega a ningun sitio -tiene un solo tramo, sin boton-. La del panel de
   detalle si navega, Clientes > Cliente > Referencia, y por eso se queda. */
#panel-clientes > .cli-ruta {
  display: none;
}

/* El h2 y su nota iban apilados, ocupando dos renglones para decir algo que
   cabe en uno. Vale para las dos etapas que usan esta cabecera: la 01 de
   Clientes y la 02 de Referencias. */
.cli-etapa-cabecera {
  padding: 10px 16px;
}

.cli-etapa-titulo > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.cli-etapa-nota {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cli-etapa-nota::before {
  content: "·";
  margin-right: 9px;
  color: var(--sup-linea-fuerte);
}


/* --- Un boton bloqueado tiene que verse bloqueado ------------------------- */
/* Comprobado con el inspector el 22 de septiembre de 2026: un boton con el
   atributo `disabled` devolvia los mismos valores computados que uno activo
   -mismo fondo, opacity 1, cursor de mano-. El usuario lo pulsaba, no pasaba
   nada, y no habia ninguna pista de por que.

   Habia dos intentos anteriores y ninguno servia para el resto de la app:

   - `#panel-solicitudes button:disabled` solo cubria dos paneles, y ademas con
     un selector de id (1,1,1) que le gana a cualquier regla de clase.
   - `.solicitud-plano-medida button:disabled` (0,1,1) quedaba tapado por el
     anterior en `opacity` y `cursor`, y su `grayscale` moria contra el
     `.primary-button { filter: none !important }` que hay mas arriba. Era una
     regla inerte: las tarjetas de medida se atenuaban solo por la primera.

   Por eso esta va al final del archivo y con `!important`: es la unica forma
   de pasar por encima de las capas de correcciones que ya usan `!important`
   sobre `filter` en estas mismas clases. Las dos reglas viejas se retiraron
   para que el aspecto de bloqueado se defina en un solo sitio.

   Quedan fuera a proposito los controles de navegacion -pestanas, `module-nav`,
   `segmented-option`, `builder-tab`- porque marcan el sitio activo con clases
   `is-active`, no con `disabled`. */
.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.yt-btn-primary:disabled,
.yt-btn-secondary:disabled,
.yt-btn-icon:disabled,
.editor-action-button:disabled,
.save-decision-action:disabled,
.profile-save-button:disabled,
.profile-upload-button:disabled,
.color-picker-button:disabled,
.session-button:disabled,
.search-btn:disabled,
.config-row-menu:disabled,
#panel-solicitudes button:disabled,
#panel-clientes button:disabled,
#solicitud-modal button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.35) !important;
  box-shadow: none !important;
}

/* Un boton apagado seguia levantandose al pasarle el raton: `:hover` si casa
   con un elemento `disabled`, y `.primary-button:hover` trae un
   `translateY(-1px)`. Movimiento que promete algo que no va a ocurrir. */
button:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* --- Ocupado no es lo mismo que bloqueado -------------------------------- */
/* Casi todos estos botones se apagan solo mientras va la peticion, y el aviso
   de al lado ya dice "Registrando...", "Encolando...", "Subiendo ...". Ahi
   atenuar esta bien, pero el cursor no debe decir "prohibido" sino "espera", y
   el gris sobra: la accion sigue viva.

   No hay parpadeo que temer: ni `opacity` ni `filter` estan en la lista de
   `transition` de estos botones -solo background-color, border-color, color,
   box-shadow y transform-, asi que el cambio entra y sale seco, sin animacion
   que se quede a medias al soltar el `disabled`.

   El interruptor es `aria-busy="true"`. Hoy solo lo pone #send-tech-sheet
   (app.js); queda documentado para los demas envios. */
[aria-busy="true"]:disabled {
  opacity: 0.6 !important;
  cursor: progress !important;
  filter: none !important;
}

/* Este ya tenia su propio gesto de ocupado -cursor de espera y un filtro algo
   apagado- desde que se monto el asistente. Solo se le sube la opacidad para
   que no caiga al 0.45 de bloqueado. */
.smart-chat-actions .smart-review-button:disabled {
  opacity: 0.7 !important;
}

/* Cinco botones se nombran por id -no por clase- en el bloque de color de mas
   arriba, y alli llevan `filter: none !important`. Un id (1,0,0) le gana a la
   regla de clase de aqui al lado (0,2,0), asi que a estos el gris de bloqueado
   se les caia y quedaban solo atenuados. Se repiten con el id ya filtrado por
   `:disabled` (1,1,0), que es lo justo para pasar por encima sin tocar el
   bloque de color.

   El `:not([aria-busy="true"])` deja fuera el caso de "ocupado": #send-tech-sheet
   se marca asi mientras envia, y ahi el gris sobra. */
#save-tech-sheet:disabled:not([aria-busy="true"]),
#save-client-record:disabled:not([aria-busy="true"]),
#header-save-client-record:disabled:not([aria-busy="true"]),
#download-tech-sheet-pdf:disabled:not([aria-busy="true"]),
#send-tech-sheet:disabled:not([aria-busy="true"]) {
  filter: grayscale(0.35) !important;
}


/* --- Medidas de plano mecanico (Configuracion) ---------------------------- */
/* Son 320 filas de consulta: lo que manda es poder encontrar una medida rapido
   y distinguir de un vistazo las del listado historico de las anadidas aqui. */
.pm-resumen {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-dim);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pm-filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 220px;
  gap: 10px;
  margin-bottom: 14px;
}

.pm-buscador {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--sup-linea);
  border-radius: 11px;
  background: var(--sup-fondo);
  min-width: 0;
}

.pm-buscador span {
  color: var(--app-text-muted);
  font-size: 0.95rem;
}

.pm-buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--app-text);
  padding: 11px 0;
}

.pm-buscador input:focus {
  outline: none;
}

.pm-tabla-caja {
  border: 1px solid var(--sup-linea);
  border-radius: 12px;
  overflow: hidden;
}

/* Las siete columnas, iguales en la cabecera y en cada fila. Si se cambian
   aqui hay que cambiarlas en .pm-fila: es lo unico que las mantiene alineadas. */
.pm-tabla-cabeza,
.pm-fila {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.7fr 0.7fr 0.8fr 0.8fr 0.8fr 0.9fr;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
}

.pm-tabla-cabeza {
  background: var(--sup-elevado);
  border-bottom: 1px solid var(--sup-linea);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.pm-lista {
  max-height: 520px;
  overflow-y: auto;
}

.pm-fila {
  border-bottom: 1px solid var(--sup-linea);
  font-size: 0.8125rem;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.pm-lista > .pm-fila:last-child {
  border-bottom: 0;
}

.pm-fila:hover {
  background: var(--sup-elevado);
}

.pm-matriz {
  color: var(--app-text-dim);
  font-variant-numeric: normal;
}

.pm-rodillo {
  font-weight: 700;
  color: var(--app-accent);
}

.pm-sello {
  justify-self: start;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--sup-linea);
  background: var(--sup-fondo);
  color: var(--app-text-muted);
  font-size: 0.6875rem;
  font-variant-numeric: normal;
}

.pm-sello.es-anadida {
  border-color: rgba(36, 180, 126, 0.42);
  background: rgba(36, 180, 126, 0.14);
  color: #5fd3a6;
  font-weight: 700;
}

.pm-vacio {
  padding: 26px 16px;
  text-align: center;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

.pm-pie {
  margin: 10px 2px 0;
  color: var(--app-text-muted);
  font-size: 0.75rem;
}

.pm-alta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.pm-alta-nota {
  grid-column: 1 / -1;
}

.pm-alta label[hidden] {
  display: none;
}

.pm-alta-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pm-aviso {
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

.pm-aviso.es-error {
  color: #f0a4a4;
}

@media (max-width: 1180px) {
  .pm-filtros {
    grid-template-columns: 1fr;
  }
  .pm-alta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Por debajo de este ancho las siete columnas no caben: la tabla se
     desplaza en horizontal dentro de su caja en vez de aplastar el texto. */
  .pm-tabla-caja {
    overflow-x: auto;
  }
  .pm-tabla-cabeza,
  .pm-fila {
    min-width: 720px;
  }
}

@media (max-width: 720px) {
  .pm-alta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* El enlace que genera y baja el plano de esa medida. Va al final de la fila
   porque es una accion, no un dato: se lee la medida y despues se decide. */
.pm-plano {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid var(--sup-linea-fuerte);
  background: var(--sup-fondo);
  color: var(--app-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: normal;
}

.pm-plano:hover,
.pm-plano:focus-visible {
  border-color: var(--app-accent);
  background: rgba(199, 165, 75, 0.12);
  color: var(--app-accent-strong);
}


/* Una medida que el motor no sabe dibujar: se dice en el sitio del boton, en
   vez de dejar pulsar y devolver un error sobre el fuelle. */
.pm-plano.es-no-aplica {
  border-style: dashed;
  border-color: var(--sup-linea);
  background: transparent;
  color: var(--app-text-muted);
  font-weight: 400;
  cursor: help;
}


/* Cuando la medida en centimetros no esta en el listado de equivalencias.
   Se nombra la medida: con ella delante se puede buscar en el impreso. */
.american-measure-aviso {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--app-accent);
  border-radius: 0 8px 8px 0;
  background: rgba(199, 165, 75, 0.1);
  color: var(--app-text-dim);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.american-measure-aviso[hidden] {
  display: none;
}

/* Ajustes de espacio y legibilidad de la interfaz (octubre 2026).
   Solo pantalla: se excluyen la impresion, la exportacion y el visor FDA.
   No se aplican reglas al contenido de #sheet ni a su escala. */
@media screen {
  html:not(.printing-tech-sheet-root) body.yt-dark:not(.exporting-tech-sheet-pdf):not([data-viewer-mode="consulta-fda"]) {
    & .sheet-viewport {
      min-width: 0 !important;
      justify-content: safe center !important;
      overflow: auto !important;
    }

    & .sheet-stage { flex-shrink: 0 !important; }

    & .controls-panel .builder-tabs {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 4px !important;
      padding-bottom: 8px !important;
    }

    & .controls-panel .builder-tabs button {
      min-height: 36px !important;
      padding: 7px 8px !important;
      white-space: normal !important;
    }

    & .editor-actions-footer .editor-action-button {
      min-height: 44px !important;
      height: auto !important;
      white-space: normal !important;
    }

    & .editor-actions-footer .editor-action-text {
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    & .controls-panel .pantone-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    & .module-nav-copy { min-width: 0 !important; transform: none !important; }
    & .module-nav-copy small { white-space: normal !important; }
    & .brand-logo { background-size: contain !important; }

    & #panel-configuracion .cfg-tarjeta {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px 16px;
      padding: 20px !important;
    }

    & #panel-configuracion .cfg-tarjeta-icono { grid-column: 1; grid-row: 1 / span 2; }
    & #panel-configuracion .cfg-tarjeta-texto { grid-column: 2; grid-row: 1; }
    & #panel-configuracion .cfg-tarjeta-flecha { grid-column: 3; grid-row: 1 / span 2; }
    & #panel-configuracion .cfg-tarjeta-dato:not(:empty) {
      display: block;
      grid-column: 2;
      grid-row: 2;
      max-width: none;
      padding: 0;
      border: 0;
      text-align: left;
      white-space: normal;
    }

    & #panel-configuracion .config-field-matrix > label:not([hidden]) { display: grid !important; }
    & #panel-configuracion .config-field-matrix + .config-section-caption:not([hidden]) { display: flex !important; }
    & #panel-configuracion .config-food-grid:not([hidden]) { display: grid !important; }
    & #panel-configuracion .cfg-barra { flex-wrap: wrap; }
    & #panel-configuracion .cfg-barra .secondary-button { width: auto !important; }
    & #panel-configuracion .config-defaults-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    & #panel-clientes .block-head { flex-wrap: wrap; gap: 12px !important; }
    & #panel-clientes .block-head > div { min-width: min(100%, 240px); }
    & .inventory-client-main,
    & .inventory-client-sub,
    & .inventory-reference,
    & .sol-remitente { white-space: normal; overflow-wrap: anywhere; }

    & #panel-solicitudes .sol-fila-cliente h3,
    & #panel-solicitudes .sol-fila-cliente p,
    & #panel-solicitudes .sol-fila-asunto {
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: anywhere;
    }

    @media (min-width: 1081px) {
      & #panel-solicitudes .sol-fila,
      & #panel-solicitudes .sol-tabla-cabeza {
        grid-template-columns: minmax(110px, .9fr) minmax(130px, 1.15fr) minmax(160px, 1.4fr) minmax(110px, 1fr) minmax(90px, .8fr) 40px 96px;
      }
    }

    @media (min-width: 761px) and (max-width: 1080px) {
      & #panel-solicitudes .sol-fila { display: flex; flex-direction: column; align-items: stretch; }
      & #panel-solicitudes .sol-fila-alta,
      & #panel-solicitudes .sol-fila-cliente,
      & #panel-solicitudes .sol-fila-meta { flex-wrap: wrap; }
    }

    & .yt-sidebar :is(button, a):focus-visible,
    & .yt-right-panel :is(button, input, select, textarea):focus-visible,
    & .yt-header :is(button, input):focus-visible,
    & .module-panel :is(button, input, select, textarea, a):focus-visible {
      outline: 2px solid var(--titanium-gold-strong);
      outline-offset: 3px;
    }

    @media (min-width: 761px) and (max-width: 1320px) {
      /* El JS existente mueve el editor al contenido principal a 1320px. */
      & .yt-layout { grid-template-columns: 168px minmax(0, 1fr) !important; gap: 12px !important; }
      &.module-wide .yt-layout { grid-template-columns: 168px minmax(0, 1fr) !important; }
      & .app-shell { padding-top: 90px !important; }
      & .sheet-viewport { height: 48vh !important; min-height: 280px !important; align-items: flex-start !important; }
      & .viewer-shell, & .viewer-stage { min-height: 0 !important; }
      & .yt-sidebar { width: auto !important; }
      & .module-nav { padding: 10px 8px !important; gap: 8px !important; }
      & .module-nav-copy { display: grid !important; }
      & .module-nav-copy strong { font-size: 12px !important; white-space: normal !important; }
      & .module-nav-copy small { font-size: 11px !important; }
      & .yt-header { height: auto !important; min-height: 64px; flex-wrap: wrap; }
      & .header-left { flex: 0 1 240px !important; }
      & .brand-logo { width: 240px !important; }
      & .header-right { min-width: 0 !important; }
      & .header-center { flex: 1 1 260px !important; }
      & .search-bar { min-width: 0 !important; }
      & .session-button { min-width: 180px !important; width: auto !important; }
    }

    @media (max-width: 760px) {
      & { height: auto !important; overflow-y: auto !important; }
      & .app-shell { height: auto !important; min-height: 0 !important; padding: 0 !important; }
      & .yt-header {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        padding: 10px 12px !important;
        gap: 10px !important;
      }
      & .header-left, & .header-center, & .header-right {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
      }
      & .header-left { justify-content: flex-start !important; }
      & .brand { width: 100% !important; }
      & .brand-logo { width: 100% !important; height: 40px !important; background-position: left center !important; }
      & .header-center { grid-row: 3; }
      & .header-right { flex-wrap: wrap; justify-content: space-between !important; gap: 8px !important; }
      & .session-clock-card { min-width: 90px !important; }
      & .session-button { width: auto !important; min-width: 160px !important; max-width: 100% !important; }
      & .search-bar { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; }
      & .search-btn, & .notif-boton { min-height: 40px !important; }
      & .notif-panel, & .session-menu { max-width: calc(100vw - 24px) !important; }

      & .yt-layout, &.module-wide .yt-layout, &.sidebar-collapsed.module-wide .yt-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
      }
      & .yt-sidebar {
        position: static !important;
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
      }
      & .module-nav-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
      & .module-nav {
        width: 100% !important;
        min-height: 56px !important;
        padding: 8px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
      }
      & .module-nav-copy { display: grid !important; text-align: left !important; }
      & .module-nav-copy strong { font-size: 12px !important; white-space: normal !important; }
      & .module-nav-copy small { display: block !important; font-size: 10px !important; line-height: 1.35 !important; }
      & .module-nav-icon { flex-shrink: 0; }

      & .yt-main-content, & .yt-right-panel {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
      }
      & .editor-shell.controls-panel { min-height: 0 !important; padding: 0 !important; }
      & #panel-crear-ficha:not([hidden]) { min-height: 0 !important; }
      & .viewer-shell, & .viewer-stage { min-width: 0 !important; width: 100% !important; padding: 0 !important; }
      & .sheet-viewport { width: 100% !important; height: 48vh !important; min-height: 280px !important; padding: 8px 0 !important; align-items: flex-start !important; }
      & .controls-panel .builder-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      & .editor-actions-footer { margin-top: 16px !important; }
      & #panel-configuracion .config-field-matrix,
      & #panel-configuracion .config-food-grid,
      & #panel-configuracion .config-defaults-grid { grid-template-columns: minmax(0, 1fr) !important; }
      & #panel-configuracion .cfg-tarjetas { grid-template-columns: minmax(0, 1fr); }
      & #panel-configuracion .cfg-tarjeta { padding: 14px !important; gap: 8px 12px; }
      & #panel-configuracion .cfg-tarjeta-icono { width: 36px; height: 36px; }
      & #panel-configuracion .config-section-caption { flex-wrap: wrap; }
      & #panel-solicitudes .sol-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      & #panel-solicitudes .sol-filtros > :first-child,
      & #panel-solicitudes .sol-cabecera-acciones { grid-column: 1 / -1; }
      & .inventory-actions .table-action { min-height: 44px; }
      & #panel-clientes .cli-etapa-titulo > div { display: block; }
      & #panel-clientes .cli-etapa-titulo h2 { white-space: nowrap; }
      & #panel-clientes .cli-etapa-nota { white-space: normal; overflow: visible; margin-top: 4px; }
      & #panel-clientes .cli-etapa-nota::before { content: none; }
      & #panel-solicitudes .sol-fila { display: flex; flex-direction: column; align-items: stretch; }
      & #panel-solicitudes .sol-fila-alta,
      & #panel-solicitudes .sol-fila-cliente,
      & #panel-solicitudes .sol-fila-meta { flex-wrap: wrap; }
      & #panel-solicitudes .sol-fila-cliente > div { flex: 1 1 180px; min-width: 0; }
      & .editor-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      & .editor-status-grid .compact-status-item { padding: 10px; gap: 4px; }
      & .editor-status-grid .compact-status-item small { font-size: 12px; }
      & #panel-tablero .tb-cabecera { padding: 14px; }
      & #panel-tablero .tb-pendiente { grid-template-columns: 38px minmax(0, 1fr); align-items: center; padding: 12px 16px !important; }
      & #panel-tablero .tb-pendiente strong { font-size: 24px; }
    }
  }
}

/* Biblioteca del cliente: conserva los tokens y el marco de la aplicación. */
@media screen {
  #panel-cliente-detalle #client-explorer-records.cli-biblioteca {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    padding: 18px; max-height: 650px; overflow-y: auto; background: transparent;
  }
  .cli-biblioteca-item { min-width: 0; }
  #panel-cliente-detalle .cli-biblioteca-tarjeta {
    display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0;
    padding: 0; overflow: hidden; text-align: left; white-space: normal;
    background: var(--app-card); color: var(--app-text); border: 1px solid var(--app-line-strong);
    border-radius: 11px; box-shadow: none; font: inherit; cursor: pointer;
  }
  #panel-cliente-detalle .cli-biblioteca-tarjeta:hover { border-color: var(--app-accent); background: var(--app-card-soft); }
  #panel-cliente-detalle .cli-biblioteca-tarjeta.is-activa { border-color: var(--app-success); box-shadow: inset 3px 0 var(--app-success); }
  #panel-cliente-detalle .cli-biblioteca-tarjeta:focus-visible,
  #cli-expediente-referencia:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }
  .cli-biblioteca-preview {
    display: grid; place-items: center; position: relative; width: 100%; height: 168px;
    background: var(--app-card-soft); border-bottom: 1px solid var(--app-line-strong);
    color: var(--app-text-dim); font-size: 12px; font-weight: 400;
  }
  .cli-biblioteca-preview img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 10px; position: absolute; inset: 0; }
  .cli-biblioteca-info { display: flex; flex-direction: column; gap: 6px; padding: 16px; width: 100%; min-width: 0; flex: 1; }
  .cli-biblioteca-codigo { color: var(--app-success); font-size: 11px; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; }
  .cli-biblioteca-nombre { color: var(--app-text); font-size: 15px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
  .cli-biblioteca-medida { color: var(--app-text); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
  .cli-biblioteca-material { color: var(--app-text-dim); font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
  .cli-biblioteca-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 10px; color: var(--app-text-dim); font-weight: 400; }
  .cli-biblioteca-seleccion { color: var(--app-success); font-weight: 600; }
  #client-explorer-records > .cli-vacio { grid-column: 1 / -1; }
  #cli-expediente-panel { margin-top: 20px; scroll-margin-top: 24px; }
  @media (max-width: 1100px) {
    #panel-cliente-detalle #client-explorer-records.cli-biblioteca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    #panel-cliente-detalle #client-explorer-records.cli-biblioteca { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; max-height: 540px; }
    #panel-cliente-detalle .cli-etapa-titulo { width: 100%; min-width: 0; }
    #panel-cliente-detalle .cli-etapa-titulo > div { display: block; min-width: 0; }
    #panel-cliente-detalle .cli-etapa-titulo h2 { white-space: normal; overflow-wrap: normal; }
    #panel-cliente-detalle .cli-etapa-nota { white-space: normal; overflow: visible; margin-top: 5px; }
    #panel-cliente-detalle .cli-etapa-nota::before { content: none; }
    #panel-cliente-detalle .cli-biblioteca-tarjeta { flex-direction: row; }
    .cli-biblioteca-preview { width: 88px; height: auto; min-height: 150px; align-self: stretch; flex: 0 0 88px; border-bottom: 0; border-right: 1px solid var(--app-line-strong); text-align: center; padding: 8px; }
    .cli-biblioteca-info { padding: 12px; }
    .cli-biblioteca-nombre { font-size: 13px; }
  }
}

/* Navegación entre documentos; fuera de las plantillas de impresión. */
@media screen {
  .linked-sheet-tabs:not([hidden]) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    width: 100%; max-width: var(--sheet-base-width, 1080px); min-width: 0;
    margin: 0 auto 4px; padding: 0 0 8px; border-bottom: 1px solid var(--app-line-strong);
  }
  .linked-sheet-tabs [role="tablist"] {
    display: inline-flex; flex: 0 1 auto; min-width: 0; gap: 2px;
    padding: 3px; border: 1px solid var(--app-line-strong); border-radius: 8px; background: var(--app-card);
  }
  .linked-sheet-tabs [role="tab"] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 8px;
    min-width: 0; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 5px;
    background: transparent; color: var(--app-text-dim); box-shadow: none;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.35;
  }
  .linked-sheet-tabs [role="tab"]:hover:not(:disabled) { background: var(--app-card-soft); color: var(--app-text); }
  .linked-sheet-tabs [role="tab"][aria-selected="true"] {
    color: var(--app-accent); background: var(--app-card-soft); box-shadow: inset 0 -2px 0 var(--app-accent);
  }
  .linked-sheet-tabs [role="tab"]:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
  .linked-sheet-tabs small { color: var(--app-text-dim); font-size: 11px; font-weight: 400; line-height: 1.35; }
  .linked-sheet-tabs p {
    flex: 1 1 240px; min-width: 0; margin: 0; color: var(--app-text-dim);
    font-size: 11px; line-height: 1.45; text-align: right; overflow-wrap: anywhere;
  }
  .bag-label-check { display: flex !important; align-items: center; gap: 10px; min-height: 44px; }
  .bag-label-check input { width: 20px; height: 20px; accent-color: var(--app-success); }
  #bag-label-options { min-width: 0; }
  #bag-label-choice { width: 100%; min-width: 0; }
  @media (max-width: 1320px) {
    body[data-active-module="crear-ficha"] .yt-main-content > .viewer-shell:has(#linked-sheet-tabs:not([hidden])) { flex-shrink: 0 !important; }
  }
  @media (max-width: 640px) {
    .linked-sheet-tabs:not([hidden]) { gap: 6px; }
    .linked-sheet-tabs [role="tablist"] { width: 100%; }
    .linked-sheet-tabs [role="tab"] { flex: 1 1 0; min-height: 44px; padding: 7px 9px; }
    .linked-sheet-tabs small { flex-basis: 100%; }
    .linked-sheet-tabs p { flex-basis: 100%; text-align: left; }
  }
}

@media screen {
  .cli-solicitudes-historial {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 8px 16px; padding: 16px; margin: 12px 0 16px;
    background: var(--app-card); border: 1px solid var(--app-line-strong); border-radius: 10px;
  }
  .cli-solicitudes-historial:empty { display: none; }
  .cli-solicitudes-historial label { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--app-text); }
  .cli-solicitudes-historial label .cli-etiqueta { display: inline-flex; width: auto; flex: 0 0 auto; }
  .cli-solicitudes-historial select { width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 13px; }
  .cli-solicitudes-historial p { display: block; grid-column: 1 / -1; grid-row: 3; margin: 0; color: var(--app-text-dim); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  #cli-solicitudes-historial button { min-height: 44px !important; height: auto !important; }
  .cli-solicitudes-historial .cli-solicitudes-acciones { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 2; grid-row: 2; min-height: 44px; white-space: normal; }
  .cli-solicitudes-historial :is(select, button):focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }
  #client-explorer-panel [inert][aria-busy="true"] { opacity: .55; }
  @media (max-width: 700px) {
    .cli-solicitudes-historial { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .cli-solicitudes-historial .cli-solicitudes-acciones { grid-column: 1; grid-row: 4; width: 100%; }
  }
}
/* Inspección del arte de la biblioteca, sin abrir ni modificar la ficha. */
@media screen {
  .cli-biblioteca-item { position: relative; }
  .cli-biblioteca-preview.has-preview, .cli-biblioteca-preview img { background: #fff; }
  #panel-cliente-detalle .cli-biblioteca-zoom {
    position: absolute; top: 10px; right: 10px; z-index: 1; min-height: 36px;
    padding: 7px 11px; border: 1px solid #ccd4cf; border-radius: 8px;
    background: #fff; color: #163d2c; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; box-shadow: none;
  }
  .cli-arte-visor { padding: 0; width: min(1200px, calc(100vw - 32px)); height: min(900px, 90dvh); max-width: none; max-height: none; margin: auto; border: 1px solid var(--app-line-strong); border-radius: 14px; background: var(--app-card); color: var(--app-text); overflow: hidden; }
  .cli-arte-visor[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
  .cli-arte-visor::backdrop { background: rgb(0 0 0 / 65%); }
  .cli-arte-visor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; }
  .cli-arte-visor > header > div { min-width: 0; }
  .cli-arte-visor h2 { margin: 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
  .cli-arte-visor p { margin: 6px 0 0; font-size: 12px; color: var(--app-text-dim); }
  .cli-arte-visor button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--app-line-strong); border-radius: 8px; background: var(--app-card-soft); color: var(--app-text); font: inherit; cursor: pointer; }
  .cli-arte-visor [data-close] { flex-shrink: 0; }
  .cli-arte-visor button:disabled { opacity: .45; cursor: default; }
  .cli-arte-herramientas { display: flex; align-items: center; gap: 10px; padding: 0 20px 14px; }
  .cli-arte-herramientas output { min-width: 52px; text-align: center; font-size: 13px; }
  .cli-arte-area { overflow: auto; min-height: 0; min-width: 0; background: #fff; cursor: grab; touch-action: none; overscroll-behavior: contain; }
  .cli-arte-area.is-dragging { cursor: grabbing; }
  .cli-arte-lienzo { display: grid; place-items: center; background: #fff; }
  .cli-arte-lienzo img { display: block; max-width: none !important; max-height: none !important; object-fit: contain; user-select: none; }
  .cli-arte-visor :focus-visible, #panel-cliente-detalle .cli-biblioteca-zoom:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -3px; }
  @media (max-width: 640px) {
    #panel-cliente-detalle .cli-biblioteca-zoom { top: auto; bottom: 8px; left: 4px; right: auto; min-height: 44px; max-width: 80px; padding: 6px; font-size: 11px; }
    .cli-arte-visor { width: calc(100vw - 16px); height: 92dvh; }
    .cli-arte-visor > header { padding: 12px; gap: 8px; }
    .cli-arte-visor h2 { font-size: 14px; }
    .cli-arte-herramientas { padding: 0 12px 12px; gap: 6px; }
  }
}
/* Guardado visible en cualquier módulo, separado de la hoja que se exporta. */
@media screen {
  #sheet-save-progress:not([hidden]) { display: block; }
  #sheet-save-progress {
    position: fixed; z-index: 850; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
    padding: 18px; border: 1px solid var(--app-accent); border-radius: 14px;
    background: var(--app-card); color: var(--app-text); box-shadow: 0 8px 30px rgb(0 0 0 / 18%);
    font-family: inherit;
  }
  #sheet-save-progress header { display: flex; align-items: flex-start; gap: 12px; }
  #sheet-save-progress header > div { flex: 1; min-width: 0; }
  #sheet-save-progress strong { display: block; font-size: 15px; line-height: 1.4; }
  #sheet-save-progress p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  #sheet-save-progress .save-progress-reference { color: var(--app-text-dim); margin-top: 12px; }
  #sheet-save-progress .save-progress-hint { color: var(--app-text-dim); }
  #sheet-save-progress .save-progress-hint:empty { display: none; }
  #sheet-save-progress button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--app-line-strong); border-radius: 8px; background: var(--app-card-soft); color: var(--app-text); font-size: 22px; cursor: pointer; }
  #sheet-save-progress button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
  #sheet-save-progress .save-progress-icon { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; color: var(--app-success); text-align: center; font-weight: 700; }
  #sheet-save-progress[data-state="busy"] .save-progress-icon { border: 2px solid var(--app-line-strong); border-top-color: var(--app-success); border-radius: 50%; animation: save-progress-spin .9s linear infinite; }
  #sheet-save-progress ol { display: flex; gap: 10px; padding: 0; margin: 16px 0 0; list-style: none; }
  #sheet-save-progress li { flex: 1; font-size: 11px; line-height: 1.4; color: var(--app-text-dim); border-top: 3px solid var(--app-line-strong); padding-top: 7px; }
  #sheet-save-progress li[data-state="busy"], #sheet-save-progress li[data-state="done"] { border-color: var(--app-success); color: var(--app-text); }
  #sheet-save-progress[data-state="error"], #sheet-save-progress li[data-state="error"] { border-color: #ef7272; }
  #sheet-save-progress[data-state="error"] .save-progress-icon { color: #ef7272; }
  #sheet-save-progress[data-state="warning"], #sheet-save-progress li[data-state="warning"] { border-color: #c7a54b; }
  #sheet-save-progress[data-state="warning"] .save-progress-icon { color: #c7a54b; }
  @keyframes save-progress-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { #sheet-save-progress[data-state="busy"] .save-progress-icon { animation: none; } }
  @media (max-width: 640px) { #sheet-save-progress { bottom: 12px; padding: 14px; } }
}
@media screen {
  .cli-biblioteca-conjunto { align-self: flex-start; color: var(--app-success); border: 1px solid var(--app-success); border-radius: 6px; padding: 4px 7px; font-size: 11px; font-weight: 600; }
  .cli-expediente-documentos:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-bottom: 1px solid var(--app-line-strong); }
  .cli-expediente-documentos button { min-height: 44px; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; padding: 10px 14px; border: 1px solid var(--app-line-strong); border-radius: 8px; background: var(--app-card-soft); color: var(--app-text); font: inherit; font-size: 12px; }
  .cli-expediente-documentos button[aria-pressed="true"] { border-color: var(--app-success); color: var(--app-success); }
  .cli-expediente-documentos button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
}

/* Configuración: documentos PDF originales, revisión antes de importar. */
.pdf-import-panel { display: grid; gap: 16px; min-width: 0; }
.pdf-import-panel h2, .pdf-import-panel p { margin: 0; }
.pdf-import-panel p, .pdf-import-panel small { color: #b4c0bb; line-height: 1.55; }
.pdf-import-picker { display: grid; gap: 12px; padding: 24px; border: 1px dashed #50d19a; border-radius: 12px; background: #121b18; color: #f4f7f5; }
.pdf-import-picker input { max-width: 100%; }
#pdf-import-status { padding: 14px; border: 1px solid #3c5047; border-radius: 8px; }
#pdf-import-list { display: grid; gap: 16px; }
.pdf-import-row { display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); gap: 20px; border: 1px solid #2a3338; background: #12171a; border-radius: 12px; padding: 16px; }
.pdf-import-preview { align-self: start; display: grid; gap: 10px; overflow: hidden; padding: 10px; border: 1px solid #46544e; border-radius: 8px; background: #fff; color: #123328; cursor: pointer; }
.pdf-import-preview img { display: block; width: 100%; max-height: 310px; object-fit: contain; }
.pdf-import-fields { display: grid; gap: 12px; min-width: 0; }
.pdf-import-fields h3 { overflow-wrap: anywhere; font-size: 14px; margin: 0; }
.pdf-import-fields label { display: grid; gap: 6px; color: #f4f7f5; }
.pdf-import-fields input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; background: #0c0f11; color: #f4f7f5; border: 1px solid #536159; border-radius: 6px; padding: 10px; }
.pdf-import-fields .pdf-import-confirm { display: flex; align-items: center; min-height: 40px; gap: 10px; }
.pdf-import-confirm input { width: 20px; height: 20px; accent-color: #24b47e; }
.pdf-import-fields .pdf-import-warning { color: #e3c771; }
.pdf-import-fields .pdf-import-row-status { color: #50d19a; }
.pdf-import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-block: 12px; }
.pdf-import-panel :focus-visible, .pdf-import-viewer :focus-visible { outline: 2px solid #50d19a; outline-offset: 3px; }
.pdf-import-viewer { width: min(1200px, 96vw); height: 90dvh; max-width: 96vw; padding: 16px; box-sizing: border-box; background: #12171a; color: #f4f7f5; border: 1px solid #536159; border-radius: 12px; }
.pdf-import-viewer::backdrop { background: #000b; }
.pdf-import-viewer[open] { display: flex; flex-direction: column; gap: 12px; }
.pdf-import-viewer header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pdf-import-viewer h2 { font-size: 15px; flex: 1 1 200px; overflow-wrap: anywhere; margin: 0; }
.pdf-import-viewer iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
@media (max-width: 650px) { .pdf-import-row { grid-template-columns: minmax(0,1fr); padding: 12px; } .pdf-import-picker { padding: 14px; } .pdf-import-preview img { max-height: 220px; } }

.pdf-import-row[data-state="error"] .pdf-import-row-status { color: #e3c771; }