/* WP Invoice Builder — generator styles v2 */

#elementor-toc__heading-anchor-1 {
  display: none !important;
}

/* ── CSS Custom properties ───────────────────────────────────────── */
#wib-app {
  --wib-accent: #2563eb;
  --wib-accent-hover: #1d4ed8;
  --wib-text: #1d2327;
  --wib-border: #e5e5e5;
}

/* ── Isolation reset ─────────────────────────────────────────────── */
#wib-app,
#wib-app * {
  box-sizing: border-box;
}

#wib-app h1,
#wib-app h2,
#wib-app h3,
#wib-app h4 {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  line-height: inherit;
}

#wib-app p {
  margin: 0;
  padding: 0;
}
#wib-app ul,
#wib-app ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#wib-app a {
  text-decoration: none;
  color: inherit;
}

/* Reset base para todos los controles — evita que el tema pise border/shadow */
#wib-app input,
#wib-app textarea,
#wib-app select,
#wib-app button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  box-shadow: none;
}

/* Los inputs con borde propio ya tienen su propio estilo más abajo.
   Los que viven DENTRO de un contenedor con borde no deben tener borde propio. */
#wib-app .wib-due-date-wrap input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* ── App ──────────────────────────────────────────────────────────── */

#wib-app {
  display: flex;
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: var(--wib-text);
  line-height: 1.5;
  background: #fff;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

#wib-app .wib-sidebar {
  width: 290px;
  flex-shrink: 0;
  align-self: stretch;
  background: #eef2ff;
  color: #374151;
  border: 1px solid #eef2ff;
}

#wib-app .wib-sidebar-sticky {
  position: sticky;
  top: var(--wib-sticky-top, 0px);
  padding: 24px 16px 32px;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box;
}

#wib-app .wib-sidebar-title {
  font-size: 24px !important;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
}

#wib-app .wib-sidebar-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

#wib-app .wib-sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

#wib-app .wib-sidebar-section-title {
  font-size: 15px !important;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Template cards ───────────────────────────────────────────────── */

#wib-app .wib-tpl-selector {
  display: flex;
  gap: 8px;
}

#wib-app .wib-tpl-sel-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 5px 8px;
  height: 80px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.15s;
  position: relative;
}

#wib-app .wib-tpl-sel-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#wib-app .wib-tpl-sel-card:hover {
  border-color: #93c5fd;
}
#wib-app .wib-tpl-sel-card--active {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.45);
}

#wib-app .wib-tpl-sel-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 46px;
  background: #eef2ff;
  border-radius: 4px;
  padding: 7px 6px;
  justify-content: center;
  overflow: hidden;
}

#wib-app .wib-tpl-sel-bar {
  display: block;
  height: 3px;
  background: #c7d2fe;
  border-radius: 2px;
  width: 100%;
}

#wib-app .wib-tpl-sel-bar--header {
  height: 8px;
}
#wib-app .wib-tpl-sel-bar--short {
  width: 55%;
}

#wib-app .wib-tpl-sel-preview--default .wib-tpl-sel-bar--header {
  background: var(--wib-accent);
  opacity: 0.9;
}
#wib-app .wib-tpl-sel-preview--modern .wib-tpl-sel-bar--header {
  background: var(--wib-accent);
  height: 14px;
}
#wib-app .wib-tpl-sel-preview--minimal .wib-tpl-sel-bar--header {
  background: #9ca3af;
  height: 3px;
}

#wib-app .wib-tpl-sel-name {
  font-size: 9px;
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

#wib-app .wib-tpl-sel-card--active .wib-tpl-sel-name {
  color: #6b7280;
}

/* ── Logo area ────────────────────────────────────────────────────── */

#wib-app .wib-logo-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Estado vacío ── */
#wib-app #wib-logo-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

#wib-app .wib-logo-box {
  width: 100%;
  height: 72px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.15s;
}

#wib-app .wib-logo-box:hover {
  border-color: #93c5fd;
}

#wib-app .wib-logo-box-icon {
  color: #9ca3af;
  font-size: 28px;
  line-height: 1;
}

/* ── Estado con logo ── */
#wib-app #wib-logo-preview {
  display: flex;
  align-items: center;
  gap: 16px;
}

#wib-app .wib-logo-preview-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 6px;
  flex-shrink: 0;
}

#wib-app .wib-logo-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#wib-app .wib-logo-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

#wib-app .wib-logo-action-btn:hover {
  color: #1a1a2e;
}
#wib-app .wib-logo-delete-btn:hover {
  color: #ff6b6b;
}

#wib-app .wib-sidebar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
  font-family: inherit;
}

#wib-app .wib-sidebar-upload-btn:hover {
  color: #374151;
}

/* ── Cover image ──────────────────────────────────────────────────── */

#wib-app #wib-cover-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

#wib-app .wib-cover-drop-box {
  width: 100%;
  height: 80px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s;
  color: #9ca3af;
}

#wib-app .wib-cover-drop-box:hover {
  border-color: #93c5fd;
}

#wib-app #wib-cover-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

#wib-app .wib-cover-preview-img {
  width: 80px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

#wib-app .wib-cover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#wib-app .wib-cover-option {
  height: 58px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    border-color 0.15s,
    opacity 0.15s;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wib-app .wib-cover-option:hover {
  border-color: #555;
  opacity: 0.9;
}
#wib-app .wib-cover-option--active {
  border-color: #fff !important;
}

#wib-app .wib-cover-option--none {
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  grid-column: 1 / -1;
  height: 44px;
}

#wib-app .wib-cover-none-label {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ── Accent color swatches ────────────────────────────────────────── */

#wib-app .wib-accent-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Dots de slider: solo se muestran en móvil (ver media query) */
#wib-app .wib-slider-dots {
  display: none;
}

#wib-app .wib-accent-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}

#wib-app .wib-accent-swatch:hover {
  transform: scale(1.1);
}

#wib-app .wib-accent-swatch--active {
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 2px rgba(0, 0, 0, 0.25);
}

#wib-app .wib-accent-swatch--picker {
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #9ca3af;
  font-size: 16px;
  line-height: 0;
}

#wib-app .wib-accent-swatch--picker::after {
  content: "＋";
  font-size: 18px;
  font-weight: 400;
  color: #9ca3af;
  line-height: 1;
}

#wib-app .wib-accent-swatch--picker:hover {
  border-color: #9ca3af;
  color: #6b7280;
}

#wib-app .wib-accent-swatch--picker:hover::after {
  color: #6b7280;
}

#wib-app .wib-accent-swatch--picker input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
}

/* ── Editor panel ─────────────────────────────────────────────────── */

#wib-app .wib-editor-panel {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: #eef2ff;
  padding: 32px;
  overflow-y: auto;
  /* Nunca scroll lateral: overflow-y:auto convierte el eje X en "auto", así que
     cualquier tooltip/dropdown que sobresalga 10px generaba una barra
     horizontal. Con clip el eje Y sigue scrolleando y el X jamás. */
  overflow-x: clip;
}

#wib-app .wib-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

#wib-app .wib-editor-title {
  font-size: 24px !important;
  font-weight: 700;
  color: #111;
  margin: 0;
}

#wib-app .wib-gear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}

#wib-app .wib-gear-btn-label {
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
}

#wib-app .wib-gear-btn:hover {
  color: #444;
}

/* "Add PO / VAT number" con estética de botón */
#wib-app #wib-gear-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px dashed #cfd6ee;
  border-radius: 9px;
  color: var(--wib-accent);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
#wib-app #wib-gear-btn:hover {
  background: #f5f7ff;
  border-color: var(--wib-accent);
  color: var(--wib-accent);
}
#wib-app #wib-gear-btn:active {
  transform: scale(0.99);
}

/* ── Gear dropdown ────────────────────────────────────────────────── */

#wib-app .wib-gear-wrap {
  position: relative;
}

#wib-app .wib-gear-drop {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  min-width: 280px !important;
  padding: 8px 0 !important;
  display: none !important;
}

#wib-app .wib-gear-drop.wib-gear-drop--open {
  display: block !important;
}

#wib-app .wib-gear-drop .wib-gear-drop-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 16px !important;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin: 0 !important;
}

#wib-app .wib-gear-drop .wib-gear-drop-row:hover {
  background: #f5f5f5 !important;
}

#wib-app .wib-gear-drop .wib-gear-drop-row--active .wib-gear-drop-label {
  color: var(--wib-accent, #0044bb) !important;
}

#wib-app .wib-gear-drop .wib-gear-drop-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  background: #f0f0f0 !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #444 !important;
}

/* ── PO / VAT row ─────────────────────────────────────────────────── */

#wib-app .wib-ponvat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

#wib-app .wib-ponvat-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  padding: 0 10px 0 12px;
  background: #fff;
  transition: border-color 0.15s;
}

#wib-app .wib-ponvat-field:focus-within {
  border-color: var(--wib-accent);
  box-shadow: none;
}

#wib-app .wib-ponvat-input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 14px;
  font-family: inherit;
  color: var(--wib-text);
}

#wib-app .wib-ponvat-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
  line-height: 1;
}

#wib-app .wib-ponvat-delete:hover {
  color: #e53e3e;
}

/* ── Top row ──────────────────────────────────────────────────────── */

#wib-app .wib-top-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: stretch;
}

#wib-app .wib-top-select {
  flex: 1.08;
  padding: 10px 28px 10px 12px;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--wib-text);
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4L10 1' stroke='%23bbb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: none;
  transition: border-color 0.15s;
}

#wib-app .wib-top-select:focus {
  border-color: var(--wib-accent);
  box-shadow: 0 0 0 3px rgba(0, 68, 187, 0.08);
}

/* ── Custom Currency Picker ──────────────────────────────────────── */
#wib-app .wib-currency-picker {
  position: relative;
  flex: 1.08;
  min-width: 0;
}

#wib-app .wib-currency-trigger {
  width: 100%;
  height: 50px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--wib-text);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  position: relative;
  outline: none;
  transition: border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

#wib-app .wib-currency-trigger:hover,
#wib-app .wib-currency-trigger:focus {
  border-color: var(--wib-accent);
}

#wib-app .wib-currency-trigger[aria-expanded="true"] {
  border-color: var(--wib-accent);
  box-shadow: 0 0 0 3px rgba(0, 68, 187, 0.08);
}

#wib-app .wib-currency-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

#wib-app .wib-currency-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
}

#wib-app .wib-currency-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  transition: transform 0.18s ease;
  pointer-events: none;
}

#wib-app .wib-currency-trigger[aria-expanded="true"] .wib-currency-chevron {
  transform: translateY(-50%) rotate(180deg);
}

#wib-app .wib-currency-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--wib-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  width: 270px;
  overflow: hidden;
}

#wib-app .wib-currency-dropdown[hidden] { display: none; }

#wib-app .wib-currency-search-wrap {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--wib-border);
  position: relative;
  background: #fff;
}

#wib-app .wib-currency-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  pointer-events: none;
}

#wib-app .wib-currency-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--wib-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: var(--wib-text);
  background: #f7f7f7;
  transition: border-color 0.15s, background 0.15s;
}

#wib-app .wib-currency-search:focus {
  border-color: var(--wib-accent);
  background: #fff;
}

#wib-app .wib-currency-list {
  list-style: none;
  margin: 0;
  padding: 5px 0;
  max-height: 252px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

#wib-app .wib-currency-list::-webkit-scrollbar { width: 5px; }
#wib-app .wib-currency-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

#wib-app .wib-currency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--wib-text);
  transition: background 0.1s;
  list-style: none;
}

#wib-app .wib-currency-item:hover { background: #f5f5f5; }

#wib-app .wib-currency-item--active {
  background: #eef2ff;
}

#wib-app .wib-currency-item--active .wib-currency-item-code {
  color: var(--wib-accent);
}

#wib-app .wib-currency-item-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

#wib-app .wib-currency-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#wib-app .wib-currency-item-code {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}

#wib-app .wib-currency-item-name {
  font-size: 11.5px;
  color: #999;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wib-app .wib-currency-no-results {
  padding: 14px;
  text-align: center;
  color: #bbb;
  font-size: 13px;
  font-style: italic;
}

#wib-app .wib-due-date-wrap {
  flex: 1.11;
  position: relative;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  height: 50px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: #fff;
  transition: border-color 0.15s;
  cursor: text;
}

#wib-app .wib-due-date-wrap:focus-within {
  border-color: var(--wib-accent);
  box-shadow: 0 0 0 3px rgba(0, 68, 187, 0.08);
}

/* Label flota sobre el borde superior */
#wib-app .wib-due-date-label {
  position: absolute;
  top: -7px;
  left: 10px;
  z-index: 1;
  background: #fff;
  padding: 0 4px;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* Input sin borde propio, altura fija para no estirar el wrapper */
#wib-app .wib-due-date-wrap .wib-due-date-input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 22px !important;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  color: var(--wib-text);
  display: block;
}

#wib-app .wib-invoice-num-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--wib-text);
  outline: none;
  transition: border-color 0.15s;
}

#wib-app .wib-invoice-num-input:focus {
  border-color: var(--wib-accent);
  box-shadow: none;
}

/* ── Parties ──────────────────────────────────────────────────────── */

#wib-app .wib-parties-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#wib-app .wib-party-textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--wib-text);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s;
}

#wib-app .wib-party-textarea:focus {
  border-color: var(--wib-accent);
  box-shadow: 0 0 0 3px rgba(0, 68, 187, 0.08);
}

#wib-app .wib-party-textarea::placeholder {
  color: #5b6675;
}

/* ── Items section ────────────────────────────────────────────────── */

#wib-app .wib-items-section {
  border: none;
  overflow: visible;
  margin-bottom: 20px;
}

#wib-app .wib-items-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px !important;
  font-weight: 700;
  color: #111;
  margin: 0 0 14px;
}

#wib-app .wib-items-section-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 22px;
  background: var(--wib-accent);
  border-radius: 3px;
  flex-shrink: 0;
}

#wib-app .wib-items-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

#wib-app .wib-items-table thead tr {
  background: transparent;
}

#wib-app .wib-items-th {
  padding: 0 8px 10px;
  text-align: left !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #0a1628;
  border: none !important;
  border-bottom: 2px solid var(--wib-accent) !important;
}

#wib-app .wib-items-th:first-child {
  padding-left: 14px;
}

#wib-app .wib-items-th--qty {
  width: 90px;
  text-align: center !important;
}
#wib-app .wib-items-th--rate {
  width: 120px;
  text-align: right !important;
}
#wib-app .wib-items-th--amount {
  width: 130px;
  text-align: right !important;
}
#wib-app .wib-items-th--action {
  width: 40px;
}

#wib-app .wib-items-table tbody tr {
  transition: background 0.12s;
}

/* 14px de separación entre el thead y el tbody (fila espaciadora) */
#wib-app .wib-items-table tbody::before {
  content: "";
  display: block;
  height: 14px;
  line-height: 14px;
}

#wib-app .wib-items-table td {
  padding: 4px 3px;
  border: none;
  vertical-align: middle;
}
#wib-app .wib-items-table td:first-child {
  padding-left: 0;
}
#wib-app .wib-items-table td:last-child {
  padding-right: 0;
}

/* Inputs en caja — borde propio para que se note que son editables */
#wib-app .wib-item-desc {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #aab2c2 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px;
  font-family: inherit;
  background: #fff !important;
  color: var(--wib-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#wib-app .wib-item-qty {
  width: 100%;
  padding: 11px 10px;
  border: 1px solid #aab2c2 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px;
  font-family: inherit;
  background: #fff !important;
  color: var(--wib-text);
  outline: none;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#wib-app .wib-item-rate {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #aab2c2 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px;
  font-family: inherit;
  background: #fff !important;
  color: var(--wib-text);
  outline: none;
  text-align: right;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#wib-app .wib-item-desc:hover,
#wib-app .wib-item-qty:hover,
#wib-app .wib-item-rate:hover {
  border-color: #0044bb !important;
}

#wib-app .wib-item-desc:focus,
#wib-app .wib-item-qty:focus,
#wib-app .wib-item-rate:focus {
  border-color: #0044bb !important;
  box-shadow: none !important;
  background: #fff !important;
}

#wib-app .wib-item-desc::placeholder {
  color: #5b6675;
  font-style: italic;
}
#wib-app .wib-item-qty::placeholder {
  color: #5b6675;
  font-style: italic;
}
#wib-app .wib-item-rate::placeholder {
  color: #5b6675;
  font-style: italic;
}

/* Quitar flechas/spinners de inputs number en QTY y Rate */
#wib-app .wib-item-qty::-webkit-outer-spin-button,
#wib-app .wib-item-qty::-webkit-inner-spin-button,
#wib-app .wib-item-rate::-webkit-outer-spin-button,
#wib-app .wib-item-rate::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#wib-app .wib-item-qty,
#wib-app .wib-item-rate {
  -moz-appearance: textfield;
}

/* ── Item menu button ─────────────────────────────────────────────── */

#wib-app .wib-item-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: none;
  border: none;
  border-radius: 6px;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  letter-spacing: 2px;
  line-height: 0;
  transition:
    color 0.15s,
    background 0.15s;
}

#wib-app .wib-item-menu-btn:hover {
  color: #333;
  background: #eef2ff;
}

/* ── Item dropdown ────────────────────────────────────────────────── */

.wib-item-dropdown {
  position: fixed;
  z-index: 99999;
  width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #ececec;
  padding: 6px;
  display: none;
}

.wib-drop-delete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #e53935;
  transition: background 0.12s;
}

.wib-drop-delete-row:hover {
  background: #fff5f5;
}

.wib-drop-delete-row.wib-drop-delete-disabled {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

.wib-drop-delete-row svg {
  flex-shrink: 0;
}

.wib-drop-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

.wib-drop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
}

.wib-drop-label {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.wib-drop-tax-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
}

.wib-drop-taxrate-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #222;
  outline: none;
  text-align: right;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}

.wib-drop-taxrate-input::-webkit-outer-spin-button,
.wib-drop-taxrate-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wib-drop-taxrate-input:focus {
  border-color: #0044bb;
}

.wib-drop-pct {
  font-size: 14px;
  color: #aaa;
  font-weight: 500;
}

/* ── iOS Toggle ───────────────────────────────────────────────────── */

.wib-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.wib-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.wib-toggle-track {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.wib-toggle input:checked + .wib-toggle-track {
  background: #22c55e;
}

.wib-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.2s;
}

.wib-toggle input:checked + .wib-toggle-track .wib-toggle-thumb {
  left: 21px;
}

/* ── Add item button ──────────────────────────────────────────────── */

#wib-app .wib-btn-add-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  background: none;
  border: 1.5px dashed #cfd6ee;
  border-radius: 8px;
  color: var(--wib-accent);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 14px;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

#wib-app .wib-btn-add-item:hover {
  color: var(--wib-accent);
  border-color: var(--wib-accent);
  background: rgba(0, 68, 187, 0.03);
}

/* ── Tax row ──────────────────────────────────────────────────────── */

#wib-app .wib-tax-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  margin-bottom: 24px;
  font-size: 13px;
  color: #999;
}

#wib-app .wib-tax-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--wib-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  text-align: right;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}

#wib-app .wib-tax-input::-webkit-outer-spin-button,
#wib-app .wib-tax-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#wib-app .wib-tax-input:focus {
  border-color: var(--wib-accent);
}

/* ── Section blocks ───────────────────────────────────────────────── */

#wib-app .wib-section-block {
  margin: 24px 0px;
}

#wib-app .wib-section-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#wib-app .wib-section-block-title {
  font-size: 17px !important;
  font-weight: 700;
  color: #111;
  margin: 0;
}

#wib-app .wib-section-label-right {
  display: block;
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
}

#wib-app .wib-options-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  color: var(--wib-accent);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 0.15s;
}

#wib-app .wib-options-btn:hover {
  opacity: 0.7;
  background: none;
  color: var(--wib-accent);
}

#wib-app .wib-options-btn.wib-options-btn--active {
  color: var(--wib-accent);
}

/* ── Payment methods ──────────────────────────────────────────────── */

#wib-app .wib-payment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wib-app .wib-payment-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  min-height: 0;
  border: 1px solid #e3e6ee;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
  background: #fff;
  margin: 0;
}

#wib-app .wib-payment-card:hover {
  border-color: #b9c2e6;
  background: #fafbff;
}
#wib-app .wib-payment-card--active {
  border-color: var(--wib-accent);
  background: rgba(37, 99, 235, 0.05);
  box-shadow: 0 0 0 1px var(--wib-accent);
}

/* Chip icon */
#wib-app .wib-pm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a0b8;
  flex-shrink: 0;
  transition: color 0.15s;
}
#wib-app .wib-payment-card--active .wib-pm-icon {
  color: var(--wib-accent);
}

/* The checkbox itself is hidden — selection is shown via the chip's active state */
#wib-app .wib-payment-card .wib-payment-check {
  display: none;
}

/* Custom checkbox */
#wib-app .wib-payment-check {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s;
  margin: 0;
}

#wib-app .wib-payment-check:checked {
  background: var(--wib-accent);
  border-color: var(--wib-accent);
}

#wib-app .wib-payment-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

#wib-app .wib-payment-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#wib-app .wib-payment-name {
  font-size: 13px;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wib-app .wib-payment-note {
  font-size: 11px;
  color: #aaa;
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wib-app .wib-payment-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.4;
}

#wib-app .wib-payment-status--complete {
  background: #dcfce7;
  color: #15803d;
}

#wib-app .wib-payment-status--incomplete {
  background: #fef3c7;
  color: #b45309;
}

/* ── Payment detail popup ─────────────────────────────────────────── */

.wib-pm-detail-pop {
  position: fixed;
  z-index: 999999;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 10px 14px;
  display: none;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Arrow border (slightly larger, border color) */
.wib-pm-detail-pop::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e8e8e8;
}

/* Arrow fill (white) */
.wib-pm-detail-pop::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
}

.wib-pm-detail-input {
  background: transparent;
  border: none;
  color: #111 !important;
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  width: 100%;
  outline: none;
  padding: 0;
  box-shadow: none;
}

.wib-pm-detail-input::placeholder {
  color: #5b6675;
  font-size: 13px;
}

/* ── Structured PM popup (all types) ─────────────────────────────── */
.wib-pm-fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wib-pm-bank-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wib-pm-bank-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  user-select: none;
}

.wib-pm-bank-hint {
  font-weight: 400;
  color: #aaa;
  text-transform: none;
  letter-spacing: 0;
}

.wib-pm-bank-req {
  color: var(--wib-accent);
  font-weight: 700;
}

.wib-pm-bank-input {
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  color: #111 !important;
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.wib-pm-bank-input:focus {
  border-color: var(--wib-accent);
  background: #fff;
  box-shadow: none;
}

.wib-pm-bank-input::placeholder {
  color: #5b6675;
  font-size: 13px;
}

/* ── Options dropdown ─────────────────────────────────────────────── */

#wib-app .wib-options-wrap {
  position: relative;
}

#wib-app .wib-options-drop {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  min-width: 300px !important;
  padding: 8px 0 !important;
  display: none !important;
}
#wib-app .wib-options-drop.wib-options-drop--open {
  display: block !important;
}

#wib-app .wib-options-drop .wib-options-drop-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 16px !important;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin: 0 !important;
}
#wib-app .wib-options-drop .wib-options-drop-row:hover {
  background: #f5f5f5 !important;
}
#wib-app
  .wib-options-drop
  .wib-options-drop-row--active
  .wib-options-drop-label {
  color: var(--wib-accent, #0044bb) !important;
}

#wib-app .wib-options-drop .wib-options-drop-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  background: #f0f0f0 !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #444 !important;
}

#wib-app .wib-options-drop .wib-options-drop-divider {
  height: 1px !important;
  background: #f0f0f0 !important;
  margin: 4px 0 !important;
}

#wib-app .wib-options-drop .wib-options-drop-section-label {
  display: block !important;
  padding: 8px 16px 4px !important;
  font-size: 12px !important;
  color: #aaa !important;
  font-weight: 500 !important;
}

#wib-app .wib-options-drop .wib-options-drop-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin: 0 !important;
}

/* ── Discount section ─────────────────────────────────────────────── */

#wib-app .wib-discount-section {
  margin-bottom: 12px;
  background: #f5f7ff;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
  padding: 14px 18px;
}

#wib-app .wib-discount-section .wib-section-block-header {
  margin-bottom: 12px;
}

#wib-app .wib-discount-section .wib-section-block-title {
  font-size: 13px !important;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#wib-app .wib-discount-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#wib-app .wib-discount-type-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

#wib-app .wib-discount-radio-label {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  margin: 0 !important;
}

#wib-app .wib-discount-radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#wib-app .wib-discount-radio-label span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid #e0e7ff;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
  white-space: nowrap;
}

#wib-app .wib-discount-radio-label input[type="radio"]:checked + span {
  border-color: var(--wib-accent);
  color: var(--wib-accent);
  background: #eef2ff;
  font-weight: 600;
}

#wib-app .wib-discount-radio-label:hover span {
  border-color: var(--wib-accent);
  color: var(--wib-accent);
}

#wib-app .wib-discount-input-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#wib-app .wib-discount-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

#wib-app .wib-discount-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #9ca3af;
  pointer-events: none;
  line-height: 1;
}

#wib-app .wib-discount-input {
  width: 140px;
  height: 36px;
  padding: 0 36px 0 14px;
  border: 1.5px solid #e0e7ff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--wib-text);
  background: #fff !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: right;
}
#wib-app .wib-discount-input:focus {
  border-color: var(--wib-accent) !important;
  box-shadow: none !important;
}
#wib-app .wib-discount-input::-webkit-outer-spin-button,
#wib-app .wib-discount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#wib-app .wib-discount-input {
  -moz-appearance: textfield;
}

#wib-app .wib-discount-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1.5px solid #e0e7ff;
  border-radius: 8px;
  cursor: pointer;
  color: #c0c0c0;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
#wib-app .wib-discount-delete-btn:hover {
  color: #e53e3e;
  border-color: #fca5a5;
}

/* Mobile: el descuento se reorganiza en dos filas para no comprimirse —
   tipo (Fixed / Percent) arriba y el campo de valor (full width) + papelera abajo. */
@media (max-width: 960px) {
  /* Cabeceras en dos filas: título arriba, botón (gear / options) debajo */
  #wib-app .wib-editor-header,
  #wib-app .wib-section-block-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* El dropdown del gear (PO / VAT) ahora cuelga de un botón alineado a la
     izquierda: se ancla a la izquierda y se despliega hacia la derecha para
     no salirse de la pantalla. */
  #wib-app .wib-gear-drop {
    left: 0 !important;
    right: auto !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: calc(100vw - 40px) !important;
  }

  #wib-app .wib-discount-body {
    flex-wrap: wrap;
    align-items: stretch;
  }
  #wib-app .wib-discount-type-row {
    flex: 1 1 100%;
  }
  #wib-app .wib-discount-input-wrap {
    flex: 1 1 100%;
  }
  #wib-app .wib-discount-input-group {
    flex: 1;
  }
  #wib-app .wib-discount-input {
    width: 100%;
  }
}

/* ── Notes + Bank row ─────────────────────────────────────────────── */

#wib-app .wib-notes-row {
  display: flex;
  gap: 10px;
  margin: 24px 0;
}

#wib-app .wib-notes-row .wib-section-block {
  flex: 1;
  margin: 0;
}

/* ── Notes ────────────────────────────────────────────────────────── */

#wib-app .wib-notes-textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--wib-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--wib-text);
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s;
}

#wib-app .wib-notes-textarea::placeholder {
  color: #5b6675;
}

#wib-app .wib-notes-textarea:focus {
  border-color: var(--wib-accent);
  box-shadow: 0 0 0 3px rgba(0, 68, 187, 0.08);
}

/* ── PM Mobile Modal (bottom-sheet) ──────────────────────────────── */

.wib-pm-mobile-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.wib-pm-mobile-modal.wib-pm-mobile-modal--open {
  display: block;
}

.wib-pm-mobile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.wib-pm-mobile-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.18);
}

/* ── Animación de apertura del bottom-sheet (mobile) ──────────────────
   Se reproduce sola al añadir la clase --open (display: none → block) y
   aplica a los tres sheets que comparten estas clases: menú ⋮ de items,
   From / Bill To y Notes / Footer. */
@keyframes wib-sheet-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wib-sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes wib-sheet-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes wib-sheet-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

.wib-pm-mobile-modal--open .wib-pm-mobile-overlay {
  animation: wib-sheet-overlay-in 0.28s ease forwards;
}

.wib-pm-mobile-modal--open .wib-pm-mobile-sheet {
  /* cubic-bezier estilo iOS: arranque ágil y frenada muy suave al final */
  animation: wib-sheet-slide-up 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform;
}

/* Cierre: el JS añade --closing (mantiene display:block) mientras se
   reproduce la salida; al terminar quita las clases (display:none). */
.wib-pm-mobile-modal--closing {
  display: block;
}

.wib-pm-mobile-modal--closing .wib-pm-mobile-overlay {
  animation: wib-sheet-overlay-out 0.26s ease forwards;
}

.wib-pm-mobile-modal--closing .wib-pm-mobile-sheet {
  /* ease-in: acelera al bajar, un pelín más rápido que la apertura */
  animation: wib-sheet-slide-down 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .wib-pm-mobile-modal--open .wib-pm-mobile-overlay,
  .wib-pm-mobile-modal--open .wib-pm-mobile-sheet,
  .wib-pm-mobile-modal--closing .wib-pm-mobile-overlay,
  .wib-pm-mobile-modal--closing .wib-pm-mobile-sheet {
    animation: none;
  }
}

.wib-pm-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.wib-pm-mobile-title {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.wib-pm-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  color: #555 !important;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
  transition: background 0.15s;
}

.wib-pm-mobile-close:hover {
  background: #ebebeb;
}

.wib-pm-mobile-body {
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wib-pm-mobile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wib-pm-mobile-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.wib-pm-mobile-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #111;
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wib-pm-mobile-input:focus {
  border-color: var(--wib-accent, #2563eb);
  box-shadow: none;
}

.wib-pm-mobile-input::placeholder {
  color: #5b6675;
}

/* Textarea dentro del bottom-sheet (Notes / Bank details) */
.wib-foot-mobile-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}

.wib-pm-mobile-footer {
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
  background: #fff;
}

.wib-pm-mobile-save {
  width: 100%;
  padding: 15px !important;
  background: var(--wib-accent, #2563eb);
  color: #fff !important;
  border: none;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.wib-pm-mobile-save:hover {
  background: var(--wib-accent-hover, #1d4ed8);
}

.wib-pm-mobile-save:active {
  transform: scale(0.98);
}

/* ── Party sheet (From / Bill To): layout en 2 columnas ───────────────
   Los campos cortos (City|State, ZIP|Phone) van emparejados y los largos
   (Name, Address, Email) a ancho completo, para que TODO quepa sin scroll
   en móvil. Solo afecta al sheet de parties; PM (⋮) y Notes siguen en flex. */
#wib-party-mobile-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#wib-party-mobile-body .wib-pm-mobile-field {
  grid-column: 1 / -1; /* ancho completo por defecto */
}

#wib-party-mobile-body .wib-pm-mobile-field--half {
  grid-column: span 1;
}

/* Compactado ligero del sheet de parties para garantizar que entra todo */
#wib-party-mobile-modal .wib-pm-mobile-body {
  padding-top: 16px;
  padding-bottom: 4px;
}

#wib-party-mobile-modal .wib-pm-mobile-field {
  gap: 5px;
}

#wib-party-mobile-modal .wib-pm-mobile-input {
  padding: 11px 12px;
}

/* ── Preview button (mobile only — hidden on desktop) ────────────── */

#wib-app .wib-btn-preview-mobile {
  display: none;
}

/* ── Preview modal bar (close header — hidden on desktop) ────────── */
#wib-app .wib-preview-modal-bar {
  display: none;
}

/* ── Action buttons wrapper ───────────────────────────────────────── */

#wib-app .wib-action-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

/* ── Download button ──────────────────────────────────────────────── */

#wib-app .wib-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 13px 28px;
  background: var(--wib-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
  letter-spacing: 0.3px;
}

#wib-app .wib-btn-download:hover {
  background: var(--wib-accent-hover);
}
#wib-app .wib-btn-download:active {
  transform: scale(0.98);
}
#wib-app .wib-btn-download:disabled {
  background: #ccc;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Download más grande y prominente en desktop */
@media (min-width: 961px) {
  #wib-app .wib-btn-download {
    padding: 17px 44px;
    font-size: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }
  #wib-app .wib-btn-download:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
  }
  #wib-app .wib-btn-download:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }
}

/* ── Botón Preview (desktop, junto a Download) ────────────────────── */
#wib-app .wib-btn-preview-desktop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 40px;
  background: #fff;
  color: var(--wib-accent);
  border: 2px solid var(--wib-accent);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
#wib-app .wib-btn-preview-desktop:active {
  transform: scale(0.98);
}

/* Botones de acción (Download + Preview) algo más pequeños en desktop */
@media (min-width: 961px) {
  #wib-app .wib-action-btns .wib-btn-download,
  #wib-app .wib-action-btns .wib-btn-preview-desktop {
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 9px;
    box-shadow: none;
  }
  #wib-app .wib-action-btns .wib-btn-download:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ── Botón Download bajo el título del preview (desktop) ──────────── */
#wib-app .wib-btn-download-side {
  flex: 1;
  display: inline-flex;
  width: auto;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: none;
}
#wib-app .wib-btn-download-side:hover {
  transform: none;
  box-shadow: none;
}

/* Ambos botones son exclusivos de desktop (panel de preview lateral) */
@media (max-width: 960px) {
  #wib-app .wib-btn-preview-desktop,
  #wib-app .wib-preview-actions {
    display: none !important;
  }
}

/* ── Preview panel ────────────────────────────────────────────────── */

#wib-app .wib-preview-panel {
  width: 400px;
  flex-shrink: 0;
  align-self: stretch;
  background: #eef2ff;
}

#wib-app .wib-preview-panel-sticky {
  position: sticky;
  top: var(--wib-sticky-top, 0px);
  /* Sin scroll interno: el preview se escala para encajar, así que el panel
     muestra el documento completo y no genera su propia barra de scroll en
     ninguna resolución. */
  max-height: none;
  overflow: visible;
  padding: 24px 16px 32px;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box;
}

#wib-app .wib-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0px 0 18px;
}

/* Fila Download + Preview bajo el título (solo desktop) */
#wib-app .wib-preview-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

#wib-app .wib-preview-title {
  font-size: 24px !important;
  font-weight: 700;
  color: #111;
  margin: 0;
}

/* Botón Zoom */
#wib-app .wib-btn-zoom {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wib-accent);
  background: #fff;
  border: 1.5px solid var(--wib-accent);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
#wib-app .wib-btn-zoom .wib-btn-zoom-icon {
  width: 15px;
  height: 15px;
}

#wib-app .wib-btn-zoom:active {
  transform: scale(0.98);
}

#wib-app .wib-btn-zoom-icon {
  display: block;
}

#wib-app .wib-btn-zoom--active {
  color: #fff;
  background: var(--wib-accent, #0044bb);
  border-color: var(--wib-accent, #0044bb);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

#wib-app .wib-preview-container {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

#wib-app #wib-preview-scaler {
  transform-origin: top left;
}

/* ── Popup de zoom: la Invoice en grande ──────────────────────────── */
#wib-zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

#wib-zoom-modal.wib-zoom-modal--open {
  display: block;
  animation: wib-zoom-fade 0.18s ease-out;
}

@keyframes wib-zoom-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Capa que ocupa toda la ventana y centra el documento.
   El JS escala el documento para que entre completo → no debe haber scroll,
   pero dejamos overflow:auto como red de seguridad. */
#wib-zoom-modal .wib-zoom-modal-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
}

/* En móvil reducimos el padding (dejando hueco arriba para el botón cerrar)
   para que el preview se vea lo más grande posible sin necesitar scroll. */
@media (max-width: 600px) {
  #wib-zoom-modal .wib-zoom-modal-scroll {
    padding: 64px 12px 16px;
  }
}

/* Caja que toma el tamaño ya escalado del documento (scroll correcto) */
#wib-zoom-modal .wib-zoom-modal-stage {
  position: relative;
  flex: 0 0 auto;
  margin: auto;
}

/* El documento clonado, a tamaño A4 nativo y escalado por JS */
#wib-zoom-modal .wib-zoom-modal-doc {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  transform-origin: top left;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45);
}

/* Botón de cierre fijo en la esquina */
#wib-zoom-modal .wib-zoom-modal-close {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #1f2937;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, transform 0.15s;
}

#wib-zoom-modal .wib-zoom-modal-close:hover {
  background: #f1f4ff;
  transform: scale(1.06);
}

/* Bloquea el scroll del fondo mientras el popup está abierto */
body.wib-zoom-lock {
  overflow: hidden;
}

/* El botón Zoom solo tiene sentido en el layout de escritorio */
@media (max-width: 960px) {
  #wib-app .wib-btn-zoom {
    display: none;
  }
}

#wib-app #wib-preview {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  #wib-app .wib-editor-panel {
    padding: 28px 28px;
  }
  #wib-app .wib-payment-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Preview como modal en pantallas ≤960px ───────────────────────────
   Por debajo de 960px el panel de preview (columna derecha del layout
   desktop) desaparece y se accede vía botón "Preview", que abre el
   documento en un popup a pantalla completa. */
@media (max-width: 960px) {
  /* Panel lateral oculto — se muestra como modal al pulsar "Preview" */
  #wib-app .wib-preview-panel {
    display: none;
  }

  /* Modal abierto: overlay full-screen */
  #wib-app .wib-preview-panel.wib-preview-panel--open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #eef2ff;
  }

  /* Barra superior del modal (título + cerrar) */
  #wib-app .wib-preview-panel.wib-preview-panel--open .wib-preview-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #eef2ff;
    border-bottom: 1px solid #e0e7ff;
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
  }

  #wib-app .wib-preview-modal-bar-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
  }

  #wib-app .wib-preview-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    color: #555 !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0px !important;
  }

  #wib-app .wib-preview-modal-close:hover {
    background: #f0f4ff;
    color: #111;
  }

  /* Fix: wib-preview-panel-sticky tapaba la barra de cierre del modal
     porque ambos tenían position:sticky top:0 — dentro del modal estático */
  #wib-app .wib-preview-panel.wib-preview-panel--open .wib-preview-panel-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-top: 16px;
  }

  /* Botón "Preview": visible y abre el modal */
  #wib-app .wib-btn-preview-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    padding: 13px 24px;
    background: #fff;
    color: var(--wib-accent);
    border: 2px solid var(--wib-accent);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
  }
}


@media (max-width: 960px) {
  #wib-app .wib-items-section-title {
    font-size: 17px !important;
    margin: 0 0 10px;
  }

  #wib-app .wib-payment-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  #wib-app .wib-payment-status {
    margin-top: 0;
  }

  #wib-app {
    flex-direction: column;
  }
  #wib-app .wib-editor-panel {
    order: 1;
  }
  #wib-app .wib-sidebar {
    order: 2;
  }
  #wib-app .wib-action-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0px;
    padding-left: 16px;
    padding-right: 16px;
  }
  #wib-app .wib-sidebar {
    width: 100%;
    max-height: none;
    position: static;
  }
  #wib-app .wib-sidebar-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  #wib-app .wib-editor-panel {
    padding: 24px 20px;
  }
  /* Botones Preview + Download a ancho completo en mobile (apilados en sidebar) */
  #wib-app .wib-action-btns {
    justify-content: center;
  }
  #wib-app .wib-btn-download {
    flex: 1;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }
  #wib-app .wib-btn-preview-mobile {
    flex: 1;
    padding: 13px 20px;
  }
  #wib-app .wib-payment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Prevenir zoom automático de Safari al hacer focus en inputs
     (Safari hace zoom cuando font-size < 16px) */
  #wib-app input,
  #wib-app textarea,
  #wib-app select {
    font-size: 16px !important;
  }

  /* PM mobile modal: mismo font-size que el resto del generador */
  .wib-pm-mobile-input {
    font-size: 16px !important;
  }
  .wib-pm-mobile-input::placeholder {
    font-size: 16px !important;
  }

  /* El input[type=hidden] del currency ocupa celda en Safari → ocultarlo */
  #wib-app .wib-top-row > input[type="hidden"] {
    display: none !important;
  }
  /* Grid 2×2 — más fiable que flex-wrap en Safari/iOS */
  #wib-app .wib-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #wib-app .wib-notes-row {
    flex-direction: column;
  }
  #wib-app .wib-parties-row {
    flex-direction: column;
  }
  #wib-app .wib-btn-download {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  /* Rate input: alinear a la izquierda en mobile */
  #wib-app .wib-items-table tbody .wib-item-rate {
    text-align: left !important;
  }
  /* Botón ⋮: sin background en ningún estado en mobile */
  #wib-app .wib-items-table tbody td:nth-child(5) .wib-item-menu-btn,
  #wib-app .wib-items-table tbody td:nth-child(5) .wib-item-menu-btn:hover,
  #wib-app .wib-items-table tbody td:nth-child(5) .wib-item-menu-btn:active,
  #wib-app .wib-items-table tbody td:nth-child(5) .wib-item-menu-btn:focus {
    background: none !important;
  }

  /* La columna Amount se oculta en mobile (se ve en el preview) */
  #wib-app .wib-items-table tbody td:nth-child(4) {
    display: none;
  }

  /* ── Items table → card layout ──────────────────────────────────── */
  #wib-app .wib-items-table {
    display: block;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  #wib-app .wib-items-table thead {
    display: none;
  }
  #wib-app .wib-items-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* En el layout de tarjetas no aplica la fila espaciadora */
  #wib-app .wib-items-table tbody::before {
    display: none;
  }

  /* Card: light-gray wrapper, 2-row grid
     row 1 — description (full width)
     row 2 — QTY box | Rate box | ⋮ */
  #wib-app .wib-items-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 36px;
    grid-template-rows: auto auto;
    gap: 6px;
    border: 1px solid var(--wib-border);
    border-radius: 10px;
    padding: 8px;
    background: #eef2ff;
  }

  #wib-app .wib-items-table tbody td {
    padding: 0;
    border: none;
  }

  /* ── Row 1: Description ── */
  #wib-app .wib-items-table tbody td:nth-child(1) {
    grid-column: 1 / 4;
    grid-row: 1;
  }
  #wib-app .wib-items-table tbody td:nth-child(1) .wib-item-desc {
    padding: 9px 12px !important;
    font-size: 14px;
    border: none !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  /* ── Row 2: QTY ── */
  #wib-app .wib-items-table tbody td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  /* ── Row 2: Rate ── */
  #wib-app .wib-items-table tbody td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  /* ── Row 2: Action button ── */
  #wib-app .wib-items-table tbody td:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
  }

  /* QTY + Rate: compact white boxes, sin border propio (el card ya tiene el borde exterior) */
  #wib-app .wib-items-table tbody .wib-item-qty,
  #wib-app .wib-items-table tbody .wib-item-rate {
    padding: 9px 10px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Invoice-paper editor — el editor con aspecto de factura real
   ════════════════════════════════════════════════════════════════════ */

/* ── The paper ─────────────────────────────────────────────────────── */
#wib-app .wib-doc {
  background: #fff;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 28px rgba(20, 30, 60, 0.08);
  padding: 46px 50px;
}

/* ── Header: logo + title + meta ───────────────────────────────────── */
#wib-app .wib-doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}

/* Logo box (vive en el panel Templates) */
#wib-app .wib-ed-logo-box {
  position: relative;
  width: 190px;
  height: 130px;
  border: 2px dashed #d8dde8;
  border-radius: 10px;
  background: #fbfcfe;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  padding: 10px;
}
#wib-app .wib-ed-logo-box:hover {
  border-color: var(--wib-accent);
  background: #f7f9ff;
}
#wib-app .wib-ed-logo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #9aa3b2;
}
#wib-app .wib-ed-logo-empty span {
  font-size: 12px;
  font-weight: 500;
}
#wib-app .wib-ed-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Botón de borrar logo: overlay dentro de la imagen, rojo, papelera blanca */
#wib-app .wib-ed-logo-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: #e53e3e;
  border: none;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(20, 30, 60, 0.25);
  transition: background 0.15s, transform 0.1s;
}
#wib-app .wib-ed-logo-delete svg {
  display: block;
}
#wib-app .wib-ed-logo-delete:hover {
  background: #c53030;
}
#wib-app .wib-ed-logo-delete:active {
  transform: scale(0.94);
}


/* Big title = document type picker (dropdown custom, estilo currency) */
#wib-app .wib-doc-title-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #111;
}

/* Info icon (delante del selector de tipo de documento) */
#wib-app .wib-doc-title-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  color: #0044bb;
  cursor: help;
  flex-shrink: 0;
  outline: none;
}
#wib-app .wib-doc-title-info svg {
  display: block;
}
#wib-app .wib-doc-title-info:hover,
#wib-app .wib-doc-title-info:focus {
  color: #0044bb;
  opacity: 0.78;
}

#wib-app .wib-doc-title-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  z-index: 10000;
  width: 250px;
  max-width: 70vw;
  background: #05080f;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 22, 40, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}
/* Flechita superior */
#wib-app .wib-doc-title-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 6px;
  border: 6px solid transparent;
  border-bottom-color: #05080f;
}
#wib-app .wib-doc-title-info:hover .wib-doc-title-tooltip,
#wib-app .wib-doc-title-info:focus .wib-doc-title-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Trigger: el título grande, clicable */
#wib-app .wib-doc-title-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -4px -10px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111;
  line-height: 1.05;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: background 0.15s, color 0.15s;
}
#wib-app .wib-doc-title-trigger:hover,
#wib-app .wib-doc-title-trigger[aria-expanded="true"] {
  background: #f3f5fb;
}
#wib-app .wib-doc-title-text {
  white-space: nowrap;
}
#wib-app .wib-doc-title-caret {
  color: #9aa3b2;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.15s;
}
#wib-app .wib-doc-title-trigger:hover .wib-doc-title-caret,
#wib-app .wib-doc-title-trigger[aria-expanded="true"] .wib-doc-title-caret {
  color: var(--wib-accent);
}
#wib-app .wib-doc-title-trigger[aria-expanded="true"] .wib-doc-title-caret {
  transform: rotate(180deg);
}

/* Selector bloqueado: el tipo viene fijado por el shortcode dedicado
   ([wib_receipt], [wib_quote], [wib_bill]…). Se muestra como título estático. */
#wib-app .wib-doc-title-wrap--locked .wib-doc-title-trigger {
  cursor: default;
  pointer-events: none;
}
#wib-app .wib-doc-title-wrap--locked .wib-doc-title-caret {
  display: none;
}

/* Dropdown */
#wib-app .wib-doc-title-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 9999;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--wib-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20, 30, 60, 0.16), 0 2px 8px rgba(20, 30, 60, 0.06);
  padding: 6px;
}
#wib-app .wib-doc-title-dropdown[hidden] {
  display: none;
}
#wib-app .wib-doc-title-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#wib-app .wib-doc-title-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #1f2937;
  transition: background 0.12s, color 0.12s;
}
#wib-app .wib-doc-title-item:hover {
  background: #f5f7ff;
}
#wib-app .wib-doc-title-item--active {
  color: var(--wib-accent);
  background: #eef2ff;
}
#wib-app .wib-doc-title-item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  color: var(--wib-accent);
  opacity: 0;
  transition: opacity 0.12s;
}
#wib-app .wib-doc-title-item--active .wib-doc-title-item-check {
  opacity: 1;
}
#wib-app .wib-doc-title-item-label {
  flex: 1;
}

/* Meta rows (invoice #, dates, currency) */
#wib-app .wib-doc-meta {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  gap: 12px;
}
#wib-app .wib-doc-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
#wib-app .wib-doc-meta-label {
  font-size: 15px;
  color: #0a1628;
  white-space: nowrap;
  text-align: right;
}
#wib-app .wib-doc-meta-row[data-wib-field="invoice_num"] .wib-doc-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
#wib-app .wib-doc-meta-input {
  width: 180px;
  max-width: 180px;
  height: 45px;
  border: 1px solid #aab2c2 !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #111;
  padding: 7px 10px !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#wib-app .wib-doc-meta-input::placeholder {
  color: #5b6675;
  font-weight: 400;
}
#wib-app .wib-doc-meta-input:hover {
  border-color: #0044bb !important;
}
#wib-app .wib-doc-meta-input:focus {
  border-color: #0044bb !important;
  box-shadow: none !important;
}
#wib-app .wib-doc-meta-date {
  cursor: text;
}

/* Currency picker inside the meta block (compact) */
#wib-app .wib-doc-meta-row--currency .wib-currency-picker {
  position: relative;
  flex: 0 0 auto;
  width: auto;
}
#wib-app .wib-doc-meta .wib-currency-trigger {
  height: 45px;
  width: auto;
  min-width: 180px;
  max-width: 180px;
  padding: 6px 26px 6px 9px;
  border: 1px solid #aab2c2;
  border-radius: 7px;
  font-size: 13px;
}
#wib-app .wib-doc-meta .wib-currency-name {
  font-size: 13px;
}
#wib-app .wib-doc-meta .wib-currency-dropdown {
  left: auto;
  right: 0;
}

/* "+ Add PO / VAT number" link */
#wib-app .wib-doc-meta-addpo {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 6px;
}
#wib-app .wib-doc-link-btn {
  color: var(--wib-accent);
  font-weight: 600;
  font-size: 14px;
  gap: 6px;
}
#wib-app .wib-doc-link-btn:hover {
  color: var(--wib-accent-hover);
}

/* ── Parties (From / Bill To en dos columnas) ──────────────────────── */
#wib-app .wib-doc-mid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: 4px;
}
#wib-app .wib-doc-parties {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
}
#wib-app .wib-doc-party {
  flex: 1;
  min-width: 0;
}
#wib-app .wib-doc-party-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0a1628;
  margin-bottom: 8px;
}

/* ── Parties: cabecera con icono de info + tooltip ─────────────────── */
#wib-app .wib-party-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#wib-app .wib-party-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0044bb;
  cursor: help;
  flex-shrink: 0;
  outline: none;
}
#wib-app .wib-party-info svg {
  display: block;
}
/* El dimming en hover/focus se aplica SOLO al icono (svg), no al contenedor,
   para que el tooltip (que es hijo) no herede la opacidad y quede opaco. */
#wib-app .wib-party-info:hover svg,
#wib-app .wib-party-info:focus svg {
  opacity: 0.78;
}
#wib-app .wib-party-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10000;
  width: 260px;
  max-width: 72vw;
  background: #05080f;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 22, 40, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}
#wib-app .wib-party-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 6px;
  border: 6px solid transparent;
  border-bottom-color: #05080f;
}
#wib-app .wib-party-info:hover .wib-party-tooltip,
#wib-app .wib-party-info:focus .wib-party-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Parties: trigger desplegable (estética card) ──────────────────── */
#wib-app .wib-party-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e3e6ee;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
#wib-app .wib-party-trigger:hover {
  border-color: #b9c2e6;
  background: #fafbff;
}
#wib-app .wib-party-trigger[aria-expanded="true"] {
  border-color: var(--wib-accent);
  background: rgba(37, 99, 235, 0.05);
  box-shadow: 0 0 0 1px var(--wib-accent);
}
#wib-app .wib-party-trigger-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0a1628;
  flex-shrink: 0;
}
#wib-app .wib-party-trigger-summary {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#wib-app .wib-party-trigger-summary--empty {
  color: #5b6675;
}
#wib-app .wib-party-caret {
  flex-shrink: 0;
  color: #94a0b8;
  transition: transform 0.2s;
}
#wib-app .wib-party-trigger[aria-expanded="true"] .wib-party-caret {
  transform: rotate(180deg);
}

/* ── Parties: panel con campos estructurados ───────────────────────── */
#wib-app .wib-party-panel {
  margin-top: 12px;
}
#wib-app .wib-party-panel[hidden] {
  display: none;
}
#wib-app .wib-party-fields {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
#wib-app .wib-party-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#wib-app .wib-party-field--name,
#wib-app .wib-party-field--address {
  grid-column: 1 / -1;
}
#wib-app .wib-party-field--city,
#wib-app .wib-party-field--state,
#wib-app .wib-party-field--zip {
  grid-column: span 2;
}
#wib-app .wib-party-field--email,
#wib-app .wib-party-field--phone {
  grid-column: span 3;
}
#wib-app .wib-party-field-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  user-select: none;
}
#wib-app .wib-party-field-input {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #aab2c2;
  border-radius: 6px;
  color: #111;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
#wib-app .wib-party-field-input:hover {
  border-color: #b9c2e6;
}
#wib-app .wib-party-field-input:focus {
  border-color: var(--wib-accent);
  background: #fff;
}
#wib-app .wib-party-field-input::placeholder {
  color: #5b6675;
}

/* Focus de los inputs del editor: mismo borde + ring de acento que el estado
   activo (desplegado) de .wib-party-trigger. */
#wib-app .wib-party-field-input:focus,
#wib-app .wib-doc-meta-input:focus,
#wib-app .wib-doc-foot-input:focus,
#wib-app .wib-item-desc:focus,
#wib-app .wib-item-qty:focus,
#wib-app .wib-item-rate:focus,
#wib-app .wib-discount-input:focus {
  border-color: var(--wib-accent) !important;
  box-shadow: 0 0 0 1px var(--wib-accent) !important;
}
/* PO/VAT y Tax son inputs SIN borde dentro de un wrapper con borde: el look de
   focus (borde + ring) lo lleva el WRAPPER vía :focus-within, no el input
   (si se lo damos al input aparece un borde interno desalineado). */
#wib-app .wib-ponvat-field:focus-within,
#wib-app .wib-doc-tax-field:focus-within {
  border-color: var(--wib-accent) !important;
  box-shadow: 0 0 0 1px var(--wib-accent) !important;
}

/* Items section spacing */
#wib-app .wib-doc .wib-items-section {
  margin: 34px 0 0;
}

/* Per-line amount cell */
#wib-app .wib-item-amount-cell {
  text-align: right;
  padding: 12px 14px;
}
#wib-app .wib-item-amount {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

/* ── Totals ────────────────────────────────────────────────────────── */
/* ── Summary: footer (izquierda) + totales (derecha) en dos columnas ── */
#wib-app .wib-doc-summary {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid #eef0f4;
}
#wib-app .wib-doc-summary-side {
  order: 2;
  width: 330px;
  max-width: 100%;
  flex-shrink: 0;
}

#wib-app .wib-doc-totals-wrap {
  display: block;
  margin-top: 0;
}
#wib-app .wib-doc-totals {
  width: 100%;
  max-width: 100%;
}

/* El editor de descuento vive en la columna estrecha → su fila se apila */
#wib-app .wib-doc-summary-side .wib-discount-body {
  flex-wrap: wrap;
  align-items: stretch;
}
#wib-app .wib-doc-summary-side .wib-discount-type-row,
#wib-app .wib-doc-summary-side .wib-discount-input-wrap {
  flex: 1 1 100%;
}
#wib-app .wib-doc-summary-side .wib-discount-input-group {
  flex: 1;
}
#wib-app .wib-doc-summary-side .wib-discount-input {
  width: 100%;
}
#wib-app .wib-doc-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 15px;
}
#wib-app .wib-doc-total-key {
  color: #0a1628;
}
#wib-app .wib-doc-total-val {
  font-weight: 600;
  color: #111;
}
#wib-app .wib-doc-total-val--discount {
  color: #e53e3e;
}
#wib-app .wib-doc-tax-key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #6b7280;
}
#wib-app .wib-doc-tax-label {
  font-weight: 500;
  color: #0a1628;
}

/* Pill que agrupa el input de tasa + el signo % en un solo control */
#wib-app .wib-doc-tax-field {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px 0 12px;
  background: transparent;
  border: 1px solid #aab2c2;
  border-radius: 9px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  cursor: text;
}
#wib-app .wib-doc-tax-field:hover {
  border-color: #0044bb;
}
#wib-app .wib-doc-tax-field:focus-within {
  border-color: #0044bb;
  background: #fff;
  box-shadow: none;
}
#wib-app .wib-doc-tax-input {
  width: 44px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: #0a1628;
  outline: none;
  box-shadow: none;
  -moz-appearance: textfield;
}
#wib-app .wib-doc-tax-input::-webkit-outer-spin-button,
#wib-app .wib-doc-tax-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#wib-app .wib-doc-tax-pct {
  margin-left: 4px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
#wib-app .wib-doc-total-action {
  display: flex;
  justify-content: flex-start;
  padding: 4px 0 6px;
}
/* Grand total: tarjeta destacada (hereda el estilo de la antigua balance card) */
#wib-app .wib-doc-total-row--grand {
  margin-top: 14px;
  padding: 18px 22px;
  background: #eff3ff;
  border-radius: 12px;
}
#wib-app .wib-doc-total-row--grand .wib-doc-total-key {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7a99;
}
#wib-app .wib-doc-total-row--grand .wib-doc-total-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--wib-accent);
  line-height: 1.1;
}

/* El editor de descuento va justo encima de la fila del Total */
#wib-app .wib-doc .wib-discount-section {
  margin-top: 12px;
}

/* ── Footer: notes + bank ──────────────────────────────────────────── */
#wib-app .wib-doc-footer {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
#wib-app .wib-doc-foot-col {
  flex: 1;
  min-width: 0;
  display: block;
}
/* El textarea de notes/bank vive dentro del .wib-party-panel desplegable */
#wib-app .wib-doc-foot-col .wib-party-panel .wib-doc-foot-input {
  width: 100%;
}
#wib-app .wib-doc-foot-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0a1628;
}
#wib-app .wib-doc-foot-input {
  width: 100%;
  border: 1px solid #aab2c2;
  border-radius: 8px;
  background: #fff;
  resize: vertical;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4b5563;
  outline: none;
  padding: 10px 12px;
  min-height: 90px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#wib-app .wib-doc-foot-input:hover {
  border-color: #0044bb;
}
#wib-app .wib-doc-foot-input:focus {
  border-color: #0044bb;
  box-shadow: none;
}
#wib-app .wib-doc-foot-input::placeholder {
  color: #5b6675;
}

/* ── Payment methods ───────────────────────────────────────────────── */
#wib-app .wib-doc-payments {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid #eef0f4;
}

/* ── Responsive: invoice paper ─────────────────────────────────────── */
@media (max-width: 960px) {
  #wib-app .wib-doc {
    padding: 24px 18px;
    border-radius: 12px;
  }
  #wib-app .wib-doc-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 26px;
  }
  #wib-app .wib-doc-title-wrap {
    order: -1;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 18px;
  }
  #wib-app .wib-doc-meta {
    order: 1;
  }
  #wib-app .wib-doc-title-trigger {
    font-size: 32px !important;
  }
  /* Título centrado → su desplegable también se ancla centrado bajo él */
  #wib-app .wib-doc-title-dropdown {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* Meta como grid 2x2: fila 1 = Currency · Invoice #, fila 2 = Issued · Due.
     (Currency y el gear los reubica el JS dentro/junto a .wib-doc-meta.) */
  #wib-app .wib-doc-meta {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }
  /* El gear (Add PO / VAT) queda debajo del grid, a ancho completo */
  #wib-app .wib-gear-wrap.wib-doc-meta-addpo {
    order: 2;
    width: 100%;
    margin-top: 4px;
    justify-content: flex-start;
  }
  /* Meta rows en móvil: label encima, alineado a la izquierda, e input
     ocupando el 100% del ancho disponible. */
  #wib-app .wib-doc-meta-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
  }
  #wib-app .wib-doc-meta-label {
    text-align: left;
    white-space: normal;
  }
  #wib-app .wib-doc-meta-input {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    text-align: left;
  }
  /* Placeholder de fecha en móvil (layout grid 2x2). iOS Safari deja el input
     vacío sin dd/mm/aaaa y type="date" no admite placeholder nativo. Cuando el
     JS marca el input vacío (.wib-date-empty) ocultamos los subcampos nativos y
     pintamos nuestro placeholder centrado con ::before. La ::before se comporta
     como flex item del shadow interno de WebKit → flex:1 para que ocupe el
     ancho y text-align:center lo centre. Al elegir fecha vuelve el valor nativo.
     En desktop (>960px) NO se aplica: se conserva el aspecto/icono nativos. */
  #wib-app .wib-doc-meta-date.wib-date-empty {
    position: relative;
    text-align: left;
  }
  #wib-app .wib-doc-meta-date.wib-date-empty::-webkit-datetime-edit {
    display: none;
  }
  /* Al ocultar el datetime-edit el icono pierde el flex:1 que lo empujaba a la
     derecha; con margin-left:auto vuelve a quedar pegado al borde derecho,
     igual que en el estado con valor (Issued Date). */
  #wib-app .wib-doc-meta-date.wib-date-empty::-webkit-calendar-picker-indicator {
    margin-left: auto;
  }
  /* Placeholder superpuesto en absoluto a la izquierda (donde iría el valor),
     sin alterar el layout flex nativo del icono. */
  #wib-app .wib-doc-meta-date.wib-date-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    text-align: left;
    color: #5b6675;
    font-weight: 400;
    pointer-events: none;
  }
  #wib-app .wib-doc-meta-date:not(.wib-date-empty)::before {
    content: none;
  }
  /* Las celdas del grid (filas meta) deben poder encogerse: sin min-width:0 un
     contenido largo (p.ej. una moneda con nombre largo) expande la columna 1fr
     y empuja la columna derecha fuera de pantalla. */
  #wib-app .wib-doc-meta-row {
    min-width: 0;
  }
  /* El picker de moneda a ancho completo y encogible; el nombre trunca con "…" */
  #wib-app .wib-doc-meta-row--currency .wib-currency-picker {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #wib-app .wib-doc-meta .wib-currency-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #wib-app .wib-doc-meta .wib-currency-name {
    min-width: 0;
  }
  /* El dropdown de moneda ocupa el 100% del ancho de su picker en móvil */
  #wib-app .wib-currency-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--wib-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
    width: 100%;
    overflow: hidden;
  }
  /* "+ Add PO / VAT" alineado a la izquierda como el resto */
  #wib-app .wib-doc-meta-addpo {
    justify-content: flex-start;
  }
  /* PO / VAT: los campos se apilan en vertical en móvil */
  #wib-app .wib-ponvat-row {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-direction: row;
  }
  #wib-app .wib-doc-mid {
    flex-direction: column;
    gap: 22px;
  }
  /* From / Bill To se apilan a ancho completo en móvil */
  #wib-app .wib-doc-parties {
    flex-direction: column;
    gap: 22px;
    width: 100%;
  }
  #wib-app .wib-doc-party {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  /* Campos de party en móvil: grid de 2 columnas.
     name/address/email/phone a ancho completo; state · zip comparten fila.
     (Solo aplica al modal/escenarios donde se muestre el grid.) */
  #wib-app .wib-party-fields {
    grid-template-columns: 1fr 1fr;
  }
  #wib-app .wib-party-field--name,
  #wib-app .wib-party-field--address,
  #wib-app .wib-party-field--city,
  #wib-app .wib-party-field--email,
  #wib-app .wib-party-field--phone {
    grid-column: 1 / -1;
  }
  #wib-app .wib-party-field--state,
  #wib-app .wib-party-field--zip {
    grid-column: span 1;
  }

  /* En móvil los campos se editan en el bottom-sheet → ocultamos el panel
     inline. El trigger queda como card neutra (tappable, abre el sheet). */
  #wib-app .wib-party-panel {
    display: none;
  }
  /* Ocultar el icono de info de From / Bill To en móvil */
  #wib-app .wib-party-info {
    display: none;
  }
  #wib-app .wib-party-trigger[aria-expanded="true"] {
    border-color: #e3e6ee;
    background: #fff;
    box-shadow: none;
  }
  #wib-app .wib-party-trigger[aria-expanded="true"] .wib-party-caret {
    transform: none;
  }
  /* Summary en móvil: mismo margen superior, sin borde ni padding-top */
  #wib-app .wib-doc-summary {
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    margin-top: 22px;
    padding-top: 0;
    border-top: none;
  }
  #wib-app .wib-doc-summary-side {
    order: 0;
    width: 100%;
  }
  #wib-app .wib-doc-totals {
    width: 100%;
  }
  /* Notes / Bank details se apilan a ancho completo, sin cortarse */
  #wib-app .wib-doc-footer {
    order: 0;
    flex-direction: column;
    gap: 22px;
    width: 100%;
  }
  #wib-app .wib-doc-foot-col {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  /* Payment methods: título alineado a la izquierda y tarjetas en dos
     columnas que, juntas, ocupan el 100% del ancho disponible.
     Mismo margen superior, sin borde ni padding-top. */
  #wib-app .wib-doc-payments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    text-align: left;
    margin-top: 38px !important;
    padding-top: 0;
    border-top: none;
  }
  #wib-app .wib-doc-payments .wib-doc-foot-label {
    text-align: left;
  }
  #wib-app .wib-doc-payments .wib-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  /* En el grid, cada tarjeta se estira a su columna (no inline) y su
     contenido queda alineado a la izquierda. */
  #wib-app .wib-doc-payments .wib-payment-card {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  /* Cover image como slider horizontal (carrusel) en móvil ───────────── */
  #wib-app .wib-cover-grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #wib-app .wib-cover-grid::-webkit-scrollbar {
    display: none;
  }
  #wib-app .wib-cover-option {
    flex: 0 0 auto;
    width: 150px;
    height: 72px;
    scroll-snap-align: start;
  }
  /* "No Image" deja de ocupar toda la fila: es un slide más, mismo tamaño */
  #wib-app .wib-cover-option--none {
    grid-column: auto;
    width: 150px;
    height: 72px;
  }

  /* Template Color: mismo estilo de slider horizontal con dots ───────── */
  #wib-app .wib-accent-swatches {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Padding vertical: el swatch activo lleva un box-shadow (ring) que
       sobresale; sin esto el overflow del slider lo recorta por arriba. */
    padding: 4px 0;
  }
  #wib-app .wib-accent-swatches::-webkit-scrollbar {
    display: none;
  }
  #wib-app .wib-accent-swatch {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }

  /* Dots / indicadores del slider (cover + template color) ───────────── */
  #wib-app .wib-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
  }
  #wib-app .wib-slider-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
  }
  #wib-app .wib-slider-dot--active {
    background: #6b7280;
    transform: scale(1.25);
  }
}

/* ────────────────────────────────────────────────────────────────────
   En cualquier página donde esté el generador (#wib-app), ocultamos el
   botón "back to top" de Smart Post: se solapa con la barra de acciones
   (Download). El JS lo fuerza vía estilo inline (porque Smart Post también
   usa inline); esta regla con :has() es el respaldo en navegadores que lo
   soportan. Vale para desktop y móvil. */
body:has(#wib-app) #sp-smart-post-back-to-top-btn {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   Mobile UX refinements
   Barra de acciones fija, ancho útil, targets táctiles y ritmo visual
   para que el generador sea cómodo y agradable de usar en teléfonos.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* ── Barra de acciones (Preview + Download) ─────────────────────────
     Bloque estático al final del contenido, debajo de las
     .wib-sidebar-section. Ya NO flota ni se auto-oculta. */
  #wib-app .wib-action-btns {
    position: static;
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    transform: none;
    opacity: 1;
  }
  /* Anular el estado "oculto" del antiguo auto-hide (por si quedara la clase) */
  #wib-app .wib-action-btns.wib-action-btns--hidden {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  /* Botones gemelos a ancho completo, altura táctil cómoda */
  #wib-app .wib-btn-download,
  #wib-app .wib-btn-preview-mobile {
    flex: 1 1 0;
    width: auto;
    min-height: 50px;
    margin: 0;
    padding: 13px 14px;
    font-size: 16px;
    border-radius: 13px;
    box-shadow: none;
  }
  #wib-app .wib-action-btns .wib-btn-preview-mobile {
    background: #fff;
  }
}

/* ── Teléfonos (≤600px): más ancho útil y jerarquía más limpia ──────── */
@media (max-width: 600px) {
  /* Laterales mínimos: solo lo justo para despegar el contenido de los
     bordes de pantalla (el ancho útil lo gana el formulario y el paper). */
  #wib-app .wib-editor-panel {
    padding: 20px 10px !important;
  }
  #wib-app .wib-doc {
    padding: 22px 14px;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(20, 30, 60, 0.07);
  }
  #wib-app .wib-sidebar-sticky {
    padding: 22px 10px 28px !important;
  }

  /* Logo (panel Templates) algo más alto en móvil */
  #wib-app .wib-ed-logo-box {
    width: 100%;
    height: 124px;
  }

  /* Título y balance en escala proporcionada al móvil */
  #wib-app .wib-doc-title-trigger {
    font-size: 30px !important;
  }
  #wib-app .wib-doc-total-row--grand {
    padding: 16px 18px;
  }
  #wib-app .wib-doc-total-row--grand .wib-doc-total-val {
    font-size: 26px;
  }

  /* Filas de meta: aire táctil entre ellas (el contenedor no lleva gap) */
  #wib-app .wib-doc-meta-row {
    padding: 5px 0;
  }

  /* En móvil el header se apila y el icono de info queda a la izquierda:
     el tooltip vuelve a anclarse a la izquierda (si no, se sale por ese lado). */
  #wib-app .wib-doc-title-tooltip {
    left: 0;
    right: auto;
  }
  #wib-app .wib-doc-title-tooltip::before {
    left: 6px;
    right: auto;
  }

  /* Áreas de texto algo más bajas para reducir scroll */
  #wib-app .wib-doc-foot-input {
    min-height: 100px;
  }

  /* Márgenes verticales más compactos entre secciones */
  #wib-app .wib-doc-header {
    margin-bottom: 22px;
  }
  #wib-app .wib-doc .wib-items-section {
    margin-top: 22px;
  }
  #wib-app .wib-doc-footer {
    margin-top: 12px;
  }

  /* El texto de ayuda vacío (Add notes / Add details, From / Bill To) NUNCA debe
     cortarse en móvil: en lugar de truncar con "…" se permite que ajuste y se
     alinea a la derecha. El contenido ya escrito (sin --empty) conserva el
     truncado para no estirar la fila. */
  #wib-app .wib-doc-foot-col .wib-party-trigger-summary--empty,
  #wib-app .wib-doc-parties .wib-party-trigger-summary--empty {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: right;
  }
}

/* ── Pantallas muy estrechas (≤400px) ──────────────────────────────── */
@media (max-width: 400px) {
  #wib-app .wib-payment-grid {
    grid-template-columns: 1fr;
  }
  #wib-app .wib-tpl-sel-card {
    height: 74px;
    padding: 5px 4px 7px;
  }
  #wib-app .wib-doc-title-trigger {
    font-size: 27px !important;
  }
  #wib-app .wib-doc-total-row--grand .wib-doc-total-val {
    font-size: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Pantallas grandes: el layout deja de ser tan fijo y crece de forma
   proporcionada — el sidebar de Templates, el generador (.wib-doc) y el
   panel de Preview ganan algo de tamaño en lugar de quedarse anclados.
   El preview se reescala solo (scalePreview se ejecuta en cada resize).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  #wib-app .wib-sidebar {
    width: 330px;
  }
  #wib-app .wib-preview-panel {
    width: 460px;
  }
  #wib-app .wib-editor-panel {
    padding: 40px;
  }
  #wib-app .wib-doc {
    max-width: 960px;
  }
}

@media (min-width: 1920px) {
  #wib-app .wib-sidebar {
    width: 380px;
  }
  #wib-app .wib-preview-panel {
    width: 520px;
  }
  #wib-app .wib-editor-panel {
    padding: 52px;
  }
  #wib-app .wib-doc {
    max-width: 1080px;
  }
}

@media (min-width: 2560px) {
  #wib-app .wib-sidebar {
    width: 440px;
  }
  #wib-app .wib-preview-panel {
    width: 640px;
  }
  #wib-app .wib-editor-panel {
    padding: 64px;
  }
  #wib-app .wib-doc {
    max-width: 1240px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Rediseño estilo Bloom
   Una sola tarjeta blanca sobre el fondo azul claro: generador a la izquierda,
   columna derecha con Templates (compacto) arriba y PDF preview abajo.
   Esta capa va la última a propósito: pisa el skin anterior sin tocar
   los hooks del JS (ids, clases de estado, estructura de los controles).
   ════════════════════════════════════════════════════════════════════ */

#wib-app {
  --wib-ui-ink: #111111;
  --wib-ui-ink-2: #3a3a3a;
  /* Texto secundario: opacidades mínimas para contraste AA (≥4.5:1) tanto
     sobre blanco como sobre --wib-ui-page / --wib-ui-chip (Lighthouse). */
  --wib-ui-muted: rgba(0, 0, 0, 0.62);
  --wib-ui-faint: rgba(0, 0, 0, 0.56);
  --wib-ui-line: rgba(0, 0, 0, 0.15);
  --wib-ui-line-hover: rgba(0, 0, 0, 0.32);
  --wib-ui-divider: #e3e7f1;
  /* Fondo de página: el azul claro original del generador */
  --wib-ui-page: #eef2ff;
  --wib-ui-soft: #f6f8ff;
  --wib-ui-chip: #f1f3f9;
  --wib-ui-radius: 4px;
  --wib-ui-radius-card: 10px;
  --wib-ui-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --wib-ui-side-w: clamp(360px, 36%, 500px);
  --wib-text: var(--wib-ui-ink);
  --wib-border: var(--wib-ui-line);
  color: var(--wib-ui-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Controles: borde fino, radio 4px, foco neutro ─────────────────── */
#wib-app .wib-doc-meta-input,
#wib-app .wib-currency-trigger,
#wib-app .wib-doc-meta .wib-currency-trigger,
#wib-app .wib-party-trigger,
#wib-app .wib-party-field-input,
#wib-app .wib-item-desc,
#wib-app .wib-item-qty,
#wib-app .wib-item-rate,
#wib-app .wib-doc-foot-input,
#wib-app .wib-ponvat-field,
#wib-app .wib-doc-tax-field,
#wib-app .wib-discount-input-group {
  border: 1px solid var(--wib-ui-line) !important;
  border-radius: var(--wib-ui-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--wib-ui-ink);
  transition:
    border-color 0.18s var(--wib-ui-ease),
    box-shadow 0.18s var(--wib-ui-ease);
}

#wib-app .wib-doc-meta-input:hover,
#wib-app .wib-currency-trigger:hover,
#wib-app .wib-party-trigger:hover,
#wib-app .wib-party-field-input:hover,
#wib-app .wib-item-desc:hover,
#wib-app .wib-item-qty:hover,
#wib-app .wib-item-rate:hover,
#wib-app .wib-doc-foot-input:hover,
#wib-app .wib-ponvat-field:hover,
#wib-app .wib-doc-tax-field:hover {
  border-color: var(--wib-ui-line-hover) !important;
}

#wib-app .wib-doc-meta-input:focus,
#wib-app .wib-currency-trigger:focus-visible,
#wib-app .wib-currency-trigger[aria-expanded="true"],
#wib-app .wib-party-trigger[aria-expanded="true"],
#wib-app .wib-party-field-input:focus,
#wib-app .wib-item-desc:focus,
#wib-app .wib-item-qty:focus,
#wib-app .wib-item-rate:focus,
#wib-app .wib-doc-foot-input:focus,
#wib-app .wib-discount-input:focus,
#wib-app .wib-ponvat-field:focus-within,
#wib-app .wib-doc-tax-field:focus-within {
  border-color: var(--wib-ui-ink) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
}

#wib-app .wib-doc-meta-input::placeholder,
#wib-app .wib-party-field-input::placeholder,
#wib-app .wib-item-desc::placeholder,
#wib-app .wib-item-qty::placeholder,
#wib-app .wib-item-rate::placeholder,
#wib-app .wib-doc-foot-input::placeholder,
#wib-app .wib-ponvat-input::placeholder {
  color: var(--wib-ui-faint);
  font-style: italic;
  font-weight: 400;
}

/* Botones sin foco visible heredado del tema → anillo propio, solo teclado */
#wib-app button:focus-visible,
#wib-app [role="button"]:focus-visible,
#wib-app .wib-tpl-sel-card:has(input:focus-visible),
#wib-app .wib-payment-card:has(input:focus-visible) {
  outline: 2px solid var(--wib-ui-ink);
  outline-offset: 2px;
}

/* ── Etiquetas flotantes sobre el borde (Invoice #, fechas, moneda) ── */
#wib-app .wib-doc-meta-row {
  position: relative;
  display: block;
}
#wib-app .wib-doc-meta-row > .wib-doc-meta-label {
  position: absolute;
  top: -7px;
  left: 11px;
  z-index: 2;
  padding: 0 4px;
  background: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-muted);
  pointer-events: none;
}
#wib-app .wib-doc-meta-row[data-wib-field="invoice_num"] .wib-doc-meta-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
#wib-app .wib-doc-meta-input {
  width: 100%;
  max-width: none;
  height: 44px;
  padding: 0 15px !important;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}
#wib-app .wib-currency-trigger,
#wib-app .wib-doc-meta .wib-currency-trigger {
  height: 44px;
  padding: 0 32px 0 14px;
  font-size: 14px;
}
#wib-app .wib-doc-meta .wib-currency-name {
  font-size: 14px;
}
#wib-app .wib-currency-dropdown,
#wib-app .wib-doc-title-dropdown,
#wib-app .wib-gear-drop {
  border: 1px solid var(--wib-ui-divider);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ── Título del documento (selector de tipo) ─────────────────────── */
#wib-app .wib-doc-title-trigger {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--wib-ui-ink);
  border-radius: 6px;
}
#wib-app .wib-doc-title-trigger:hover,
#wib-app .wib-doc-title-trigger[aria-expanded="true"] {
  background: var(--wib-ui-soft);
}
#wib-app .wib-doc-title-info,
#wib-app .wib-doc-title-info:hover,
#wib-app .wib-doc-title-info:focus,
#wib-app .wib-party-info {
  color: var(--wib-ui-faint);
  opacity: 1;
}
#wib-app .wib-doc-title-item {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 6px;
  padding: 9px 10px;
}
#wib-app .wib-doc-title-item:hover {
  background: var(--wib-ui-soft);
}
#wib-app .wib-doc-title-item--active {
  color: var(--wib-ui-ink);
  background: var(--wib-ui-chip);
}
#wib-app .wib-doc-title-item-check {
  color: var(--wib-ui-ink);
}

/* ── Logo ─────────────────────────────────────────────────────────── */
#wib-app .wib-ed-logo-box {
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: var(--wib-ui-radius);
  background: #fff;
  transition:
    border-color 0.18s var(--wib-ui-ease),
    background 0.18s var(--wib-ui-ease);
}
#wib-app .wib-ed-logo-box:hover {
  border-color: var(--wib-ui-ink);
  background: var(--wib-ui-soft);
}
#wib-app .wib-ed-logo-empty {
  color: var(--wib-ui-ink);
}
#wib-app .wib-ed-logo-empty svg {
  color: var(--wib-ui-faint);
}
#wib-app .wib-ed-logo-empty span {
  font-size: 14px;
  font-weight: 500;
}

/* ── "Add PO / VAT number": botón secundario ───────────────────────
   Mismo lenguaje que el resto de controles (hairline, fondo blanco) para
   que se lea como clicable a simple vista. Estados: hover (borde más
   oscuro + fondo soft), abierto (aria-expanded → borde tinta) y press.
   Colores con !important: el tema/Elementor estiliza `button:hover`. */
#wib-app #wib-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 36px;
  margin: 0;
  padding: 0 13px 0 10px;
  background: #fff !important;
  border: 1px solid var(--wib-ui-line) !important;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--wib-ui-ink) !important;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.18s var(--wib-ui-ease),
    border-color 0.18s var(--wib-ui-ease),
    box-shadow 0.18s var(--wib-ui-ease),
    transform 0.16s var(--wib-ui-ease);
}
#wib-app #wib-gear-btn svg {
  flex-shrink: 0;
  color: var(--wib-ui-muted);
  transition: color 0.18s var(--wib-ui-ease), transform 0.2s var(--wib-ui-ease);
}
#wib-app #wib-gear-btn .wib-gear-btn-label {
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  #wib-app #wib-gear-btn:hover {
    background: var(--wib-ui-soft) !important;
    border-color: var(--wib-ui-line-hover) !important;
    color: var(--wib-ui-ink) !important;
  }
  #wib-app #wib-gear-btn:hover svg {
    color: var(--wib-ui-ink);
  }
}
#wib-app #wib-gear-btn[aria-expanded="true"] {
  background: var(--wib-ui-soft) !important;
  border-color: var(--wib-ui-ink) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
/* Abierto: el "+" gira a "×" para indicar que el mismo botón cierra */
#wib-app #wib-gear-btn[aria-expanded="true"] svg {
  color: var(--wib-ui-ink);
  transform: rotate(45deg);
}
#wib-app #wib-gear-btn:active {
  transform: scale(0.97);
}
/* Táctil: target algo más alto */
@media (max-width: 960px) {
  #wib-app #wib-gear-btn {
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #wib-app #wib-gear-btn,
  #wib-app #wib-gear-btn svg {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  #wib-app #wib-gear-btn:active {
    transform: none;
  }
}
#wib-app .wib-ponvat-input {
  padding: 11px 0 !important;
}

/* ── From / Bill To ───────────────────────────────────────────────── */
#wib-app .wib-party-trigger {
  min-height: 44px;
  padding: 0 14px;
  gap: 8px;
}
#wib-app .wib-party-trigger[aria-expanded="true"] {
  background: #fff !important;
}
#wib-app .wib-party-trigger-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-ink);
}
#wib-app .wib-party-trigger-summary {
  font-size: 14px;
  color: var(--wib-ui-ink-2);
}
#wib-app .wib-party-trigger-summary--empty {
  color: var(--wib-ui-faint);
  font-style: italic;
}
#wib-app .wib-party-caret {
  color: var(--wib-ui-faint);
  transition: transform 0.25s var(--wib-ui-ease);
}
#wib-app .wib-party-field-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-muted);
}
#wib-app .wib-party-field-input {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
}
#wib-app .wib-party-panel:not([hidden]) {
  animation: wib-ui-reveal 0.28s var(--wib-ui-ease);
}
@keyframes wib-ui-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Line items ───────────────────────────────────────────────────── */
#wib-app .wib-items-table thead tr {
  background: var(--wib-ui-chip);
}
#wib-app .wib-items-th {
  height: 32px;
  padding: 0 8px !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wib-ui-muted);
  border-bottom: none !important;
  vertical-align: middle;
}
#wib-app .wib-items-th:first-child {
  padding-left: 12px !important;
  border-radius: var(--wib-ui-radius) 0 0 var(--wib-ui-radius);
}
#wib-app .wib-items-th:last-child {
  border-radius: 0 var(--wib-ui-radius) var(--wib-ui-radius) 0;
}
#wib-app .wib-items-table tbody::before {
  height: 16px;
  line-height: 16px;
}
#wib-app .wib-items-table td {
  padding: 4px 4px;
}
#wib-app .wib-item-desc,
#wib-app .wib-item-qty,
#wib-app .wib-item-rate {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
#wib-app .wib-item-amount {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#wib-app .wib-item-menu-btn {
  color: var(--wib-ui-muted);
  border-radius: var(--wib-ui-radius);
}
#wib-app .wib-item-menu-btn:hover {
  color: var(--wib-ui-ink);
  background: var(--wib-ui-chip);
}

#wib-app .wib-btn-add-item {
  height: 44px;
  padding: 0 12px;
  margin-top: 16px;
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: var(--wib-ui-radius);
  color: var(--wib-ui-ink);
  font-size: 14px;
  font-weight: 500;
  transition:
    border-color 0.18s var(--wib-ui-ease),
    background 0.18s var(--wib-ui-ease);
}
#wib-app .wib-btn-add-item:hover {
  color: var(--wib-ui-ink);
  border-color: var(--wib-ui-ink);
  background: var(--wib-ui-soft);
}
#wib-app .wib-btn-add-item:active {
  transform: scale(0.995);
}

/* ── Totales ──────────────────────────────────────────────────────── */
#wib-app .wib-doc-summary,
#wib-app .wib-doc-payments {
  border-top-color: var(--wib-ui-divider);
}
#wib-app .wib-doc-total-row {
  font-size: 14px;
}
#wib-app .wib-doc-total-key,
#wib-app .wib-doc-tax-label {
  color: var(--wib-ui-ink-2);
  font-weight: 400;
}
#wib-app .wib-doc-total-val {
  font-weight: 500;
  color: var(--wib-ui-ink);
  font-variant-numeric: tabular-nums;
}
#wib-app .wib-doc-tax-field {
  height: 32px;
}
#wib-app .wib-doc-tax-input {
  font-weight: 500;
  color: var(--wib-ui-ink);
}
#wib-app .wib-options-btn {
  color: var(--wib-ui-ink) !important;
  font-weight: 500 !important;
}
#wib-app .wib-doc-total-row--grand {
  margin-top: 12px;
  padding: 16px 0 0;
  background: none;
  border-top: 1px solid var(--wib-ui-ink);
  border-radius: 0;
}
#wib-app .wib-doc-total-row--grand .wib-doc-total-key {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-ink);
}
#wib-app .wib-doc-total-row--grand .wib-doc-total-val {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wib-ui-ink);
}

/* ── Notes / Bank + payment methods ──────────────────────────────── */
#wib-app .wib-doc-foot-label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--wib-ui-ink);
}
#wib-app .wib-doc-foot-input {
  color: var(--wib-ui-ink);
  font-size: 14px;
}
#wib-app .wib-payment-grid {
  gap: 8px;
}
#wib-app .wib-payment-card {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--wib-ui-divider);
  border-radius: var(--wib-ui-radius);
  background: #fff;
  transition:
    border-color 0.18s var(--wib-ui-ease),
    background 0.18s var(--wib-ui-ease),
    transform 0.12s var(--wib-ui-ease);
}
#wib-app .wib-payment-card:hover {
  border-color: var(--wib-ui-line-hover);
  background: #fff;
}
#wib-app .wib-payment-card:active {
  transform: scale(0.97);
}
#wib-app .wib-payment-card--active,
#wib-app .wib-payment-card--active:hover {
  border-color: var(--wib-ui-ink);
  background: var(--wib-ui-soft);
  box-shadow: inset 0 0 0 1px var(--wib-ui-ink);
}
#wib-app .wib-pm-icon {
  color: var(--wib-ui-muted);
}
#wib-app .wib-payment-card--active .wib-pm-icon {
  color: var(--wib-ui-ink);
}
#wib-app .wib-payment-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--wib-ui-ink);
}

/* ── Botón principal: Download ───────────────────────────────────── */
#wib-app .wib-btn-download {
  justify-content: center;
  border-radius: var(--wib-ui-radius);
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wib-accent) 28%, transparent);
  transition:
    background 0.18s var(--wib-ui-ease),
    box-shadow 0.18s var(--wib-ui-ease),
    transform 0.12s var(--wib-ui-ease);
}
#wib-app .wib-btn-download:active {
  transform: scale(0.97);
}

/* ── Templates: panel compacto ───────────────────────────────────── */
#wib-app .wib-sidebar-title {
  font-size: 18px !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 24px;
  color: var(--wib-ui-ink);
}
#wib-app .wib-sidebar-section-title {
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-muted);
}

#wib-app .wib-tpl-sel-card {
  height: auto;
  gap: 6px;
  padding: 6px 6px 7px;
  border: 1px solid var(--wib-ui-divider);
  border-radius: 6px;
  transition:
    border-color 0.18s var(--wib-ui-ease),
    box-shadow 0.18s var(--wib-ui-ease),
    transform 0.12s var(--wib-ui-ease);
}
#wib-app .wib-tpl-sel-card:hover {
  border-color: var(--wib-ui-line-hover);
}
#wib-app .wib-tpl-sel-card:active {
  transform: scale(0.97);
}
#wib-app .wib-tpl-sel-card--active,
#wib-app .wib-tpl-sel-card--active:hover {
  border-color: var(--wib-ui-ink);
  box-shadow: inset 0 0 0 1px var(--wib-ui-ink);
}
#wib-app .wib-tpl-sel-preview {
  height: 34px;
  padding: 5px 6px;
  gap: 2px;
  background: var(--wib-ui-soft);
  border-radius: 3px;
}
#wib-app .wib-tpl-sel-bar {
  height: 2px;
  background: #dcdcd6;
}
#wib-app .wib-tpl-sel-bar--header {
  height: 6px;
}
#wib-app .wib-tpl-sel-preview--modern .wib-tpl-sel-bar--header {
  height: 10px;
}
#wib-app .wib-tpl-sel-preview--minimal .wib-tpl-sel-bar--header {
  background: #a8a8a2;
  height: 2px;
}
#wib-app .wib-tpl-sel-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-muted);
}
#wib-app .wib-tpl-sel-card--active .wib-tpl-sel-name {
  color: var(--wib-ui-ink);
}

#wib-app .wib-cover-option {
  border-radius: 6px;
  border: 1px solid transparent;
  transition:
    box-shadow 0.18s var(--wib-ui-ease),
    transform 0.12s var(--wib-ui-ease);
}
#wib-app .wib-cover-option:hover {
  border-color: transparent;
  opacity: 1;
  box-shadow: 0 0 0 1px var(--wib-ui-line-hover);
}
#wib-app .wib-cover-option:active {
  transform: scale(0.96);
}
#wib-app .wib-cover-option--active,
#wib-app .wib-cover-option--active:hover {
  border-color: #fff !important;
  box-shadow: 0 0 0 2px var(--wib-ui-ink);
}
#wib-app .wib-cover-option--none {
  background: #fff;
  border: 1px solid var(--wib-ui-divider);
}
#wib-app .wib-cover-none-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--wib-ui-muted);
}

#wib-app .wib-accent-swatch {
  transition:
    transform 0.18s var(--wib-ui-ease),
    box-shadow 0.18s var(--wib-ui-ease);
}
#wib-app .wib-accent-swatch--active {
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 2px var(--wib-ui-ink);
}
#wib-app .wib-accent-swatch--picker {
  background: #fff;
  border: 1px dashed rgba(0, 0, 0, 0.25);
}

/* ── Preview ─────────────────────────────────────────────────────── */
#wib-app .wib-preview-title {
  font-size: 18px !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 24px;
  color: var(--wib-ui-ink);
}
#wib-app .wib-preview-container {
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  #wib-app *,
  #wib-app *::before,
  #wib-app *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Layout desktop (≥961px): tarjeta de dos columnas
     ┌──────────────────────┬──────────────┐
     │                      │  Templates   │
     │  Generador           ├──────────────┤
     │  (.wib-editor-panel) │  PDF preview │
     │                      │  (sticky)    │
     └──────────────────────┴──────────────┘
   Los tres hijos de #wib-app se colocan con grid-area: no se cambia el
   orden del DOM, así el layout móvil (flex + order) sigue intacto. La
   tarjeta es un ::before que ocupa toda la rejilla detrás del contenido.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
  #wib-app {
    position: relative;
    display: grid;
    /* Canales laterales flexibles + tarjeta centrada */
    grid-template-columns:
      minmax(var(--wib-ui-gutter), 1fr)
      minmax(0, calc(var(--wib-ui-card-max) - var(--wib-ui-side-w)))
      var(--wib-ui-side-w)
      minmax(var(--wib-ui-gutter), 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      ". editor side    ."
      ". editor preview .";
    padding: 48px 0 64px;
    background: var(--wib-ui-page);
    /* Como Bloom: la tarjeta ocupa el ancho de la ventana menos 36px por
       lado (tope de 1848px para monitores ultra anchos). La columna
       derecha no crece: todo el ancho extra va al generador. */
    --wib-ui-gutter: 36px;
    --wib-ui-card-max: 1848px;
  }

  #wib-app::before {
    content: "";
    grid-row: 1 / -1;
    grid-column: 2 / 4;
    background: #fff;
    border-radius: var(--wib-ui-radius-card);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03),
      0 12px 24px rgba(0, 0, 0, 0.06),
      0 24px 48px rgba(0, 0, 0, 0.1);
    pointer-events: none;
  }

  #wib-app .wib-editor-panel,
  #wib-app .wib-sidebar,
  #wib-app .wib-preview-panel {
    position: relative;
    z-index: 1;
    width: auto;
    min-width: 0;
    background: transparent;
  }

  /* Columna izquierda: generador */
  #wib-app .wib-editor-panel {
    grid-area: editor;
    padding: 48px;
    overflow: visible;
  }
  #wib-app .wib-doc {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Columna derecha, arriba: Templates */
  #wib-app .wib-sidebar {
    grid-area: side;
    color: var(--wib-ui-ink);
    border: none;
    border-left: 1px solid var(--wib-ui-divider);
  }
  #wib-app .wib-sidebar-sticky {
    position: static;
    padding: 36px 24px 24px !important;
  }
  #wib-app .wib-sidebar-title {
    margin: 0 0 18px;
  }
  #wib-app .wib-sidebar-section {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    border: none;
  }
  #wib-app .wib-sidebar-section:last-child {
    margin-bottom: 0;
  }
  #wib-app .wib-sidebar-section-title {
    margin: 0;
  }

  #wib-app .wib-tpl-selector {
    gap: 8px;
  }

  /* Cover: una sola tira horizontal (upload + presets) */
  #wib-app .wib-cover-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  #wib-app #wib-cover-empty,
  #wib-app #wib-cover-preview {
    flex: 0 0 auto;
    margin: 0;
    gap: 0;
  }
  #wib-app #wib-cover-preview {
    position: relative;
  }
  #wib-app .wib-cover-drop-box {
    display: none;
  }
  #wib-app .wib-sidebar-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    color: var(--wib-ui-ink);
    font-size: 12px;
    font-weight: 500;
    transition:
      border-color 0.18s var(--wib-ui-ease),
      background 0.18s var(--wib-ui-ease);
  }
  #wib-app .wib-sidebar-upload-btn:hover {
    color: var(--wib-ui-ink);
    border-color: var(--wib-ui-ink);
    background: var(--wib-ui-soft);
  }
  #wib-app .wib-cover-preview-img {
    width: 64px;
    height: 44px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 0 0 2px var(--wib-ui-ink);
  }
  #wib-app #wib-cover-preview .wib-logo-preview-actions {
    position: absolute;
    top: -7px;
    right: -7px;
  }
  #wib-app #wib-cover-delete-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
    color: #fff;
    background: var(--wib-ui-ink);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
  }
  #wib-app #wib-cover-delete-btn svg {
    width: 11px;
    height: 11px;
  }
  #wib-app #wib-cover-delete-btn:hover {
    color: #fff;
    background: #d92d20;
  }

  #wib-app .wib-cover-grid {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
    padding: 3px;
    margin: -3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  #wib-app .wib-cover-grid::-webkit-scrollbar {
    display: none;
  }
  #wib-app .wib-cover-option,
  #wib-app .wib-cover-option--none {
    flex: 0 0 64px;
    width: 64px;
    height: 44px;
    grid-column: auto;
  }
  #wib-app .wib-cover-option--none .wib-cover-none-label {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
  }

  /* Color: una fila de swatches circulares */
  #wib-app .wib-accent-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #wib-app .wib-accent-swatch {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    aspect-ratio: auto;
    border-radius: 50%;
    border: none;
  }
  #wib-app .wib-accent-swatch:hover {
    transform: scale(1.12);
  }
  #wib-app .wib-accent-swatch--picker::after {
    font-size: 14px;
  }

  /* Columna derecha, abajo: PDF preview (fondo suave, página sticky) */
  #wib-app .wib-preview-panel {
    grid-area: preview;
    display: block;
    background: var(--wib-ui-soft);
    border-left: 1px solid var(--wib-ui-divider);
    border-top: 1px solid var(--wib-ui-divider);
    border-bottom-right-radius: var(--wib-ui-radius-card);
  }
  #wib-app .wib-preview-panel-sticky {
    top: calc(var(--wib-sticky-top, 0px) + 24px);
    padding: 24px 32px 32px !important;
  }
  #wib-app .wib-preview-head {
    margin: 0 0 16px;
    min-height: 36px;
  }
  #wib-app .wib-preview-actions {
    display: flex;
    gap: 8px;
    margin: 0;
  }
  #wib-app .wib-btn-zoom,
  #wib-app .wib-btn-download-side {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--wib-ui-radius);
  }
  #wib-app .wib-btn-zoom {
    color: var(--wib-ui-ink);
    background: #fff;
    border: 1px solid var(--wib-ui-line);
    transition:
      border-color 0.18s var(--wib-ui-ease),
      transform 0.12s var(--wib-ui-ease);
  }
  #wib-app .wib-btn-zoom:hover {
    border-color: var(--wib-ui-ink);
  }
  #wib-app .wib-btn-zoom:active,
  #wib-app .wib-btn-download-side:active {
    transform: scale(0.97);
  }
  #wib-app .wib-btn-download-side {
    box-shadow: none;
  }
  #wib-app .wib-btn-download-side:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wib-accent) 28%, transparent);
  }

  /* Acciones al pie del generador: un único Download, alineado a la izquierda */
  #wib-app .wib-action-btns {
    justify-content: flex-start;
    margin-top: 40px;
  }
  #wib-app .wib-action-btns .wib-btn-preview-desktop {
    display: none;
  }
  #wib-app .wib-action-btns .wib-btn-download {
    height: 52px;
    padding: 0 24px;
    font-size: 15px;
    border-radius: var(--wib-ui-radius);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wib-accent) 28%, transparent);
  }
  #wib-app .wib-action-btns .wib-btn-download:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--wib-accent) 32%, transparent);
  }
  #wib-app .wib-action-btns .wib-btn-download:active {
    transform: scale(0.97);
  }
}

/* Anchos intermedios: el generador pierde algo de aire lateral */
@media (min-width: 961px) and (max-width: 1180px) {
  #wib-app {
    --wib-ui-side-w: 340px;
    --wib-ui-gutter: 16px;
  }
  #wib-app .wib-editor-panel {
    padding: 32px;
  }
  #wib-app .wib-sidebar-section {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
}

@media (min-width: 961px) {
  #wib-app .wib-preview-title {
    white-space: nowrap;
  }
}
/* Columna derecha estrecha: "Expand" pasa a ser solo icono */
@media (min-width: 961px) and (max-width: 1180px) {
  #wib-app .wib-btn-zoom {
    width: 36px;
    padding: 0;
  }
  #wib-app .wib-btn-zoom-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #wib-app .wib-preview-panel-sticky {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ── Móvil (≤960px): mismo layout de antes con el skin del rediseño ── */
@media (max-width: 960px) {
  #wib-app,
  #wib-app .wib-editor-panel,
  #wib-app .wib-sidebar {
    background: var(--wib-ui-page);
    border-color: transparent;
  }
  #wib-app .wib-doc {
    border-radius: var(--wib-ui-radius-card);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03),
      0 8px 24px rgba(0, 0, 0, 0.06);
  }
  #wib-app .wib-sidebar-section {
    border-bottom-color: var(--wib-ui-divider);
  }
  #wib-app .wib-sidebar-title {
    font-size: 18px !important;
  }
  #wib-app .wib-items-table tbody tr {
    background: var(--wib-ui-soft);
    border-color: var(--wib-ui-divider);
    border-radius: 6px;
  }
  #wib-app .wib-ed-logo-box,
  #wib-app .wib-cover-drop-box {
    background: #fff;
    border: 1px dashed rgba(0, 0, 0, 0.22);
    border-radius: 6px;
  }
  #wib-app .wib-accent-swatch {
    border-radius: 6px;
  }
  #wib-app .wib-btn-download,
  #wib-app .wib-btn-preview-mobile {
    border-radius: 6px;
  }
  #wib-app .wib-btn-preview-mobile {
    color: var(--wib-ui-ink);
    border: 1px solid var(--wib-ui-line);
  }
  #wib-app .wib-preview-panel.wib-preview-panel--open,
  #wib-app .wib-preview-panel.wib-preview-panel--open .wib-preview-modal-bar {
    background: var(--wib-ui-soft);
    border-color: var(--wib-ui-divider);
  }
  #wib-app .wib-preview-modal-close {
    border-color: var(--wib-ui-divider);
    border-radius: 6px;
  }
}

/* ── Ajuste v2 (desktop): Templates más grande + preview sin scroll ───
   · Templates gana tamaño (miniaturas, covers y swatches más grandes).
   · El sticky pasa del panel entero a la PÁGINA del preview: la cabecera
     (título + Expand/Download) se queda arriba y solo la hoja A4 acompaña
     al scroll. Así la hoja cabe completa en el viewport sin reducir su
     escala (sigue encajada a lo ancho de la columna). */
@media (min-width: 961px) {
  #wib-app .wib-sidebar-sticky {
    padding: 40px 32px 32px !important;
  }
  #wib-app .wib-sidebar-title {
    font-size: 20px !important;
    margin: 0 0 24px;
  }
  /* Etiqueta encima de cada fila: el contenido usa todo el ancho */
  #wib-app .wib-sidebar-section {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    margin: 0 0 22px;
  }
  #wib-app .wib-sidebar-section-title {
    font-size: 13px !important;
  }

  #wib-app .wib-tpl-selector {
    gap: 10px;
  }
  #wib-app .wib-tpl-sel-card {
    gap: 8px;
    padding: 8px 8px 9px;
  }
  #wib-app .wib-tpl-sel-preview {
    height: 52px;
    padding: 7px 8px;
    gap: 3px;
  }
  #wib-app .wib-tpl-sel-bar {
    height: 3px;
  }
  #wib-app .wib-tpl-sel-bar--header {
    height: 8px;
  }
  #wib-app .wib-tpl-sel-preview--modern .wib-tpl-sel-bar--header {
    height: 14px;
  }
  #wib-app .wib-tpl-sel-preview--minimal .wib-tpl-sel-bar--header {
    height: 3px;
  }
  #wib-app .wib-tpl-sel-name {
    font-size: 13px;
  }

  #wib-app .wib-cover-strip,
  #wib-app .wib-cover-grid {
    gap: 10px;
  }
  #wib-app .wib-sidebar-upload-btn,
  #wib-app .wib-cover-preview-img {
    width: 84px;
    height: 56px;
    font-size: 13px;
  }
  #wib-app .wib-cover-option,
  #wib-app .wib-cover-option--none {
    flex-basis: 84px;
    width: 84px;
    height: 56px;
  }
  #wib-app .wib-cover-option--none .wib-cover-none-label {
    font-size: 11px;
  }

  #wib-app .wib-accent-swatches {
    flex-wrap: nowrap;
    gap: 10px;
  }
  #wib-app .wib-accent-swatch {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  /* Preview: panel estático, hoja sticky */
  #wib-app .wib-preview-panel-sticky {
    position: static;
    padding: 28px 32px 32px !important;
  }
  #wib-app .wib-preview-head {
    margin: 0 0 20px;
  }
  #wib-app .wib-preview-container {
    position: sticky;
    top: calc(var(--wib-sticky-top, 0px) + 16px);
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  #wib-app .wib-sidebar-sticky {
    padding: 32px 24px 24px !important;
  }
  #wib-app .wib-accent-swatches {
    gap: 8px;
  }
  #wib-app .wib-accent-swatch {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  #wib-app .wib-preview-panel-sticky {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Ajuste v3
   · "Templates" y "PDF preview" en negrita: son los dos títulos de la
     columna derecha y deben anclar la jerarquía.
   · Cover Image rediseñado: rejilla de tiles que hace wrap (Upload →
     imagen propia → None → presets). Sin ningún scroll interno: si el
     admin añade muchas imágenes, la rejilla simplemente crece en filas.
   Selectores con .wib-sidebar-section--cover para ganar en especificidad
   a todas las reglas previas de cover (base, móvil, desktop v1/v2).
   ════════════════════════════════════════════════════════════════════ */
#wib-app .wib-sidebar-title,
#wib-app .wib-preview-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wib-ui-ink);
}
@media (min-width: 961px) {
  #wib-app .wib-sidebar-title,
  #wib-app .wib-preview-title {
    font-size: 22px !important;
    line-height: 28px;
  }
}
@media (max-width: 960px) {
  #wib-app .wib-sidebar-title,
  #wib-app .wib-preview-title {
    font-size: 20px !important;
    line-height: 26px;
  }
}

/* ── Cover: rejilla ─────────────────────────────────────────────────── */
#wib-app .wib-sidebar-section--cover .wib-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  /* Aire para el ring del tile activo y el badge de borrar */
  padding: 6px;
  margin: -6px;
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Todos los tiles comparten tamaño: ancho de columna, proporción 3:2 */
#wib-app .wib-sidebar-section--cover .wib-cover-upload,
#wib-app .wib-sidebar-section--cover .wib-cover-custom,
#wib-app .wib-sidebar-section--cover .wib-cover-option {
  position: relative;
  width: auto;
  height: auto;
  min-width: 0;
  flex: none;
  grid-column: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  box-sizing: border-box;
  scroll-snap-align: none;
}

#wib-app .wib-sidebar-section--cover .wib-cover-option {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.18s var(--wib-ui-ease),
    transform 0.14s var(--wib-ui-ease);
}
#wib-app .wib-sidebar-section--cover .wib-cover-option:hover {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 0 0 1px var(--wib-ui-line-hover);
}
#wib-app .wib-sidebar-section--cover .wib-cover-option:active,
#wib-app .wib-sidebar-section--cover .wib-cover-upload:active {
  transform: scale(0.96);
}
#wib-app .wib-sidebar-section--cover .wib-cover-option:focus-visible,
#wib-app .wib-sidebar-section--cover .wib-cover-upload:focus-visible {
  outline: 2px solid var(--wib-ui-ink);
  outline-offset: 2px;
}
#wib-app .wib-sidebar-section--cover .wib-cover-option--active,
#wib-app .wib-sidebar-section--cover .wib-cover-option--active:hover {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--wib-ui-ink);
}

/* None: tile blanco con etiqueta */
#wib-app .wib-sidebar-section--cover .wib-cover-option--none {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--wib-ui-divider);
}
#wib-app .wib-sidebar-section--cover .wib-cover-option--none:hover {
  box-shadow: inset 0 0 0 1px var(--wib-ui-line-hover);
}
#wib-app .wib-sidebar-section--cover .wib-cover-option--none.wib-cover-option--active {
  box-shadow:
    inset 0 0 0 1px var(--wib-ui-divider),
    0 0 0 2px #fff,
    0 0 0 4px var(--wib-ui-ink);
}
#wib-app .wib-sidebar-section--cover .wib-cover-none-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wib-ui-muted);
}

/* Upload: tile punteado con icono + texto */
#wib-app .wib-sidebar-section--cover .wib-cover-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--wib-ui-ink);
  background: #fff;
  border: 1px dashed rgba(0, 0, 0, 0.28);
  border-radius: 6px;
  cursor: pointer;
  transition:
    border-color 0.18s var(--wib-ui-ease),
    background-color 0.18s var(--wib-ui-ease),
    transform 0.14s var(--wib-ui-ease);
}
#wib-app .wib-sidebar-section--cover .wib-cover-upload svg {
  transition: transform 0.2s var(--wib-ui-ease);
}
@media (hover: hover) {
  #wib-app .wib-sidebar-section--cover .wib-cover-upload:hover {
    border-color: var(--wib-ui-ink);
    background: var(--wib-ui-soft);
  }
  #wib-app .wib-sidebar-section--cover .wib-cover-upload:hover svg {
    transform: translateY(-2px);
  }
}

/* Imagen propia: tile con la miniatura + badge para borrar */
#wib-app .wib-sidebar-section--cover .wib-cover-option--custom {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}
#wib-app .wib-sidebar-section--cover .wib-cover-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: wib-cover-in 0.24s var(--wib-ui-ease);
}
#wib-app .wib-sidebar-section--cover .wib-cover-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #fff;
  background: var(--wib-ui-ink);
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
  transition:
    background-color 0.15s var(--wib-ui-ease),
    transform 0.14s var(--wib-ui-ease);
}
/* Área táctil de 36px sin agrandar el badge */
#wib-app .wib-sidebar-section--cover .wib-cover-delete::before {
  content: "";
  position: absolute;
  inset: -8px;
}
#wib-app .wib-sidebar-section--cover .wib-cover-delete:hover {
  background: #d92d20;
}
#wib-app .wib-sidebar-section--cover .wib-cover-delete:active {
  transform: scale(0.9);
}
#wib-app .wib-sidebar-section--cover .wib-cover-delete:focus-visible {
  outline: 2px solid var(--wib-ui-ink);
  outline-offset: 2px;
}

@keyframes wib-cover-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* Móvil: 5 tiles por fila en un teléfono (~67×44px, target táctil ≥44px) */
@media (max-width: 960px) {
  #wib-app .wib-sidebar-section--cover .wib-cover-grid {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  }
}


/* ════════════════════════════════════════════════════════════════════
   Sin JS (.wib-no-js en #wib-app; el JS lo quita en init)
   El HTML del servidor ya trae el estado inicial completo (número, fecha,
   primera línea, totales, vista previa rellena). Estas reglas cubren lo que
   normalmente resuelve el JS, para que Google y los crawlers sin JS vean el
   generador entero y bien maquetado.
   ════════════════════════════════════════════════════════════════════ */

/* Imágenes sin contenido: [hidden] tiene que ganar a los display de autor */
#wib-app img[hidden] {
  display: none !important;
}

/* Paneles plegables (From, Bill To, Notes, Bank): sin JS no se pueden
   desplegar, así que se muestran abiertos y los campos quedan usables.
   Solo con JavaScript DESACTIVADO (scripting: none): colgado únicamente de
   .wib-no-js, quien SÍ tiene JS los veía abiertos en el primer pintado y se
   cerraban al arrancar el JS → gran salto de layout (CLS). Los crawlers leen
   los campos en el HTML igualmente. */
@media (scripting: none) {
  #wib-app.wib-no-js .wib-party-panel[hidden] {
    display: block !important;
  }
}

/* Vista previa: el JS la escala con transform (scalePreview). Sin JS, la
   hoja A4 (210mm ≈ 794px) se reduce con zoom por tramos de 10px según el
   ancho real de su columna — zoom sí reduce también el alto de layout. */
#wib-app.wib-no-js .wib-preview-container {
  container: wib-pv / inline-size;
  height: auto;
  overflow: hidden;
}
@container wib-pv (max-width: 800px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.994; } }
@container wib-pv (max-width: 790px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.982; } }
@container wib-pv (max-width: 780px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.969; } }
@container wib-pv (max-width: 770px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.957; } }
@container wib-pv (max-width: 760px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.944; } }
@container wib-pv (max-width: 750px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.931; } }
@container wib-pv (max-width: 740px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.919; } }
@container wib-pv (max-width: 730px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.906; } }
@container wib-pv (max-width: 720px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.894; } }
@container wib-pv (max-width: 710px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.881; } }
@container wib-pv (max-width: 700px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.869; } }
@container wib-pv (max-width: 690px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.856; } }
@container wib-pv (max-width: 680px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.843; } }
@container wib-pv (max-width: 670px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.831; } }
@container wib-pv (max-width: 660px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.818; } }
@container wib-pv (max-width: 650px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.806; } }
@container wib-pv (max-width: 640px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.793; } }
@container wib-pv (max-width: 630px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.78; } }
@container wib-pv (max-width: 620px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.768; } }
@container wib-pv (max-width: 610px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.755; } }
@container wib-pv (max-width: 600px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.743; } }
@container wib-pv (max-width: 590px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.73; } }
@container wib-pv (max-width: 580px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.717; } }
@container wib-pv (max-width: 570px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.705; } }
@container wib-pv (max-width: 560px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.692; } }
@container wib-pv (max-width: 550px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.68; } }
@container wib-pv (max-width: 540px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.667; } }
@container wib-pv (max-width: 530px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.654; } }
@container wib-pv (max-width: 520px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.642; } }
@container wib-pv (max-width: 510px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.629; } }
@container wib-pv (max-width: 500px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.617; } }
@container wib-pv (max-width: 490px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.604; } }
@container wib-pv (max-width: 480px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.591; } }
@container wib-pv (max-width: 470px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.579; } }
@container wib-pv (max-width: 460px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.566; } }
@container wib-pv (max-width: 450px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.554; } }
@container wib-pv (max-width: 440px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.541; } }
@container wib-pv (max-width: 430px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.528; } }
@container wib-pv (max-width: 420px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.516; } }
@container wib-pv (max-width: 410px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.503; } }
@container wib-pv (max-width: 400px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.491; } }
@container wib-pv (max-width: 390px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.478; } }
@container wib-pv (max-width: 380px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.465; } }
@container wib-pv (max-width: 370px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.453; } }
@container wib-pv (max-width: 360px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.44; } }
@container wib-pv (max-width: 350px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.428; } }
@container wib-pv (max-width: 340px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.415; } }
@container wib-pv (max-width: 330px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.403; } }
@container wib-pv (max-width: 320px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.39; } }
@container wib-pv (max-width: 310px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.377; } }
@container wib-pv (max-width: 300px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.365; } }
@container wib-pv (max-width: 290px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.352; } }
@container wib-pv (max-width: 280px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.34; } }
@container wib-pv (max-width: 270px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.327; } }
@container wib-pv (max-width: 260px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.314; } }
@container wib-pv (max-width: 250px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.302; } }
@container wib-pv (max-width: 240px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.289; } }
@container wib-pv (max-width: 230px) { #wib-app.wib-no-js #wib-preview-scaler { zoom: 0.277; } }

/* ── Blindaje frente al CSS del constructor de páginas ────────────────
   Elementor (CSS propio de la página) aplica reglas como
   `.e-con-full.e-flex.e-con.e-child span:not(h1 span)… { font-size: 15px }`
   que fijan el tamaño de TODOS los <span> y ganan a la herencia: el título
   del documento (30px) salía a 15px, igual que totales, Upload, Expand…
   Esta regla solo pesa (1,0,0) gracias a :where(): gana a la de Elementor
   (sin ID) pero pierde ante cualquier regla propia `#wib-app .clase`.
   La vista previa (#wib-preview) queda fuera: sus plantillas usan
   selectores sin ID y esta regla los pisaría. */
#wib-app :where(span):not(:where(#wib-preview *)) {
  font-size: inherit;
}

/* ── Accesibilidad: objetivos táctiles y texto solo para lectores ──────
   Los dots del slider miden 7px: el botón pasa a 24×24 (mínimo WCAG 2.2 /
   Lighthouse "target-size") y el punto visible se dibuja con ::before,
   así el aspecto no cambia. */
@media (max-width: 960px) {
  #wib-app .wib-slider-dots {
    gap: 0;
    /* El punto queda donde estaba (14px bajo el slider) y el bloque ocupa
       lo mismo que antes: el área táctil extra no empuja el layout. */
    margin: 5.5px 0 -8.5px;
  }
  #wib-app .wib-slider-dot,
  #wib-app .wib-slider-dot--active {
    position: relative;
    width: 24px;
    height: 24px;
    background: none;
    transform: none;
  }
  #wib-app .wib-slider-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background 0.15s, transform 0.15s;
  }
  #wib-app .wib-slider-dot--active::before {
    background: #6b7280;
    transform: scale(1.25);
  }
}

#wib-app .wib-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Las etiquetas del bloque meta son <label for> (antes <span>): blindadas
   frente a estilos de tema para `label` (negrita, márgenes, cursor). */
#wib-app label.wib-doc-meta-label {
  font-weight: 400;
  margin: 0;
  cursor: auto;
}

/* ════════════════════════════════════════════════════════════════════
   Cabecera del documento (distribución tipo Bloom)
   El logo vive en el panel Templates, así que la cabecera ya no tiene una
   columna de logo con un hueco vacío en medio. Queda en dos filas:
     fila 1: título (Invoice ▾) a la izquierda · "+ Add PO / VAT" a la derecha
     fila 2: Currency · Invoice # · Issued · Due en una sola línea
   Las columnas de la fila 2 son implícitas (grid-auto-flow: column): si el
   admin oculta un campo, los demás se reparten el ancho sin dejar huecos.
   Todo es CSS sobre el DOM del servidor → sin saltos de layout (CLS).
   ════════════════════════════════════════════════════════════════════ */
#wib-app .wib-doc-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 26px;
  margin-bottom: 26px;
}
#wib-app .wib-doc-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
#wib-app .wib-doc-head-top .wib-gear-wrap.wib-doc-meta-addpo {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  justify-content: flex-end;
}
#wib-app .wib-doc-header .wib-doc-meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: none;
}
/* Celdas encogibles: una moneda de nombre largo no empuja a las demás */
#wib-app .wib-doc-header .wib-doc-meta-row {
  min-width: 0;
}
#wib-app .wib-doc-header .wib-doc-meta-row--currency .wib-currency-picker,
#wib-app .wib-doc-header .wib-doc-meta .wib-currency-trigger {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#wib-app .wib-doc-header .wib-doc-meta .wib-currency-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wib-app .wib-doc-header .wib-doc-meta .wib-currency-dropdown {
  left: 0;
  right: auto;
  min-width: 260px;
}
/* Título alineado a la izquierda → tooltip y desplegable anclados a la izquierda */
#wib-app .wib-doc-header .wib-doc-title-dropdown {
  left: 0;
  right: auto;
}
#wib-app .wib-doc-header .wib-doc-title-tooltip {
  left: 0;
  right: auto;
}
#wib-app .wib-doc-header .wib-doc-title-tooltip::before {
  left: 6px;
  right: auto;
}

/* Logo en el panel Templates: tile compacto a todo el ancho (icono + texto
   en línea, como el "Upload Logo" de Bloom). Con imagen, la muestra entera. */
#wib-app .wib-sidebar-section--logo .wib-ed-logo-box {
  width: 100%;
}
@media (min-width: 961px) {
  #wib-app .wib-sidebar-section--logo .wib-ed-logo-box {
    height: 84px;
  }
  #wib-app .wib-sidebar-section--logo .wib-ed-logo-empty {
    flex-direction: row;
    gap: 10px;
  }
}

/* Móvil (≤960px): mismo DOM, reordenado con `order` —
     fila 0: título centrado a todo el ancho
     filas 1-2: grid 2×2 (Currency · Invoice # / Issued · Due)
     fila 3: + Add PO / VAT number */
@media (max-width: 960px) {
  #wib-app .wib-doc-header {
    gap: 10px;
  }
  #wib-app .wib-doc-head-top {
    display: contents;
  }
  #wib-app .wib-doc-header .wib-doc-title-wrap {
    order: -1;
  }
  #wib-app .wib-doc-header .wib-doc-meta {
    order: 1;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 6px;
  }
  #wib-app .wib-doc-head-top .wib-gear-wrap.wib-doc-meta-addpo {
    order: 2;
    width: 100%;
    margin-top: 4px;
    justify-content: flex-start;
  }
  #wib-app .wib-doc-header .wib-doc-title-dropdown {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  #wib-app .wib-doc-header .wib-doc-meta .wib-currency-dropdown {
    min-width: 0;
  }

  /* Template Color: el selector personalizado va el primero del slider */
  #wib-app .wib-accent-swatch--picker {
    order: -1;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CTA app Invoice Fly: problema → solución (bajo "Download PDF")
   Tarjeta amplia que rellena el hueco inferior del editor. Misma superficie
   que el panel de preview (--wib-ui-soft + hairline) para que se lea como
   parte del generador, no como un banner. Jerarquía: cabecera (icono +
   titular) · rejilla 2×3 de dolor → solución · pie con botón secundario y
   prueba social. Un único gesto de movimiento: la flecha del botón.
   Azul de marca fijo (no --wib-accent): no cambia con el "Template Color".
   ════════════════════════════════════════════════════════════════════ */
#wib-app .wib-app-cta {
  --wib-app-brand: #0044bb;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 40px 0 0;
  padding: 32px;
  background: var(--wib-ui-soft);
  border: 1px solid var(--wib-ui-divider);
  border-radius: 14px;
  box-sizing: border-box;
}

/* Cabecera */
#wib-app .wib-app-cta-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
#wib-app .wib-app-cta-icon {
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  box-shadow:
    0 1px 2px rgba(0, 20, 60, 0.10),
    0 6px 16px -4px rgba(0, 68, 187, 0.30);
}
#wib-app .wib-app-cta-head-text {
  min-width: 0;
}
#wib-app p.wib-app-cta-title {
  margin: 0;
  font-size: 20px !important;
  font-weight: 650;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--wib-ui-ink);
  text-wrap: balance;
}
#wib-app p.wib-app-cta-text {
  margin: 4px 0 0;
  font-size: 14.5px !important;
  line-height: 1.5;
  color: var(--wib-ui-muted);
  text-wrap: pretty;
}

/* Rejilla problema → solución */
#wib-app ul.wib-app-cta-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#wib-app li.wib-app-cta-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
#wib-app li.wib-app-cta-item::before,
#wib-app li.wib-app-cta-item::marker {
  content: none;
}
#wib-app .wib-app-cta-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--wib-ui-divider);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 20, 60, 0.05);
  color: var(--wib-app-brand);
}
#wib-app .wib-app-cta-item-icon svg {
  display: block;
}
#wib-app .wib-app-cta-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
}
#wib-app .wib-app-cta-problem {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--wib-ui-muted);
}
#wib-app .wib-app-cta-solution {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 21px;
  color: var(--wib-ui-ink);
  text-wrap: pretty;
}

/* Pie: botón + prueba social */
#wib-app .wib-app-cta-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding-top: 24px;
  border-top: 1px solid var(--wib-ui-divider);
}
/* Botón: azul de marca con texto blanco; al hover se invierte (blanco con
   texto azul). Colores con selector reforzado + !important: el tema /
   Elementor pinta `a`, `a:hover`, `a:focus` y `a:visited` con los suyos y
   si no, el texto se queda del color del tema (p. ej. negro sobre negro). */
#wib-app .wib-app-cta a.wib-app-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 0.18s var(--wib-ui-ease),
    color 0.18s var(--wib-ui-ease),
    box-shadow 0.18s var(--wib-ui-ease),
    transform 0.16s var(--wib-ui-ease);
}
#wib-app .wib-app-cta a.wib-app-cta-btn,
#wib-app .wib-app-cta a.wib-app-cta-btn:link,
#wib-app .wib-app-cta a.wib-app-cta-btn:visited,
#wib-app .wib-app-cta a.wib-app-cta-btn:focus {
  background: var(--wib-app-brand) !important;
  border: 1px solid var(--wib-app-brand) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 20, 60, 0.12), 0 4px 12px -4px rgba(0, 68, 187, 0.45);
}
#wib-app .wib-app-cta a.wib-app-cta-btn .wib-app-cta-arrow {
  color: inherit !important;
  transition: transform 0.2s var(--wib-ui-ease);
}
@media (hover: hover) and (pointer: fine) {
  #wib-app .wib-app-cta a.wib-app-cta-btn:hover {
    background: #fff !important;
    border-color: var(--wib-app-brand) !important;
    color: var(--wib-app-brand) !important;
    box-shadow: 0 4px 14px -4px rgba(0, 68, 187, 0.28);
  }
  #wib-app .wib-app-cta a.wib-app-cta-btn:hover .wib-app-cta-arrow {
    transform: translateX(3px);
  }
}
#wib-app .wib-app-cta a.wib-app-cta-btn:active {
  transform: scale(0.97);
}
#wib-app .wib-app-cta a.wib-app-cta-btn:focus-visible {
  outline: 2px solid var(--wib-app-brand);
  outline-offset: 2px;
}
#wib-app .wib-app-cta-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  line-height: 18px;
  color: var(--wib-ui-muted);
}
#wib-app .wib-app-cta-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wib-ui-ink-2);
  font-weight: 500;
  white-space: nowrap;
}
#wib-app .wib-app-cta-stars {
  display: inline-flex;
  gap: 1px;
  color: #f5a524;
}
#wib-app .wib-app-cta-stars svg {
  display: block;
}
#wib-app .wib-app-cta-proof-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
#wib-app .wib-app-cta-trust {
  white-space: nowrap;
}

/* Desktop estrecho: la rejilla sigue a dos columnas con menos aire */
@media (min-width: 961px) and (max-width: 1180px) {
  #wib-app .wib-app-cta {
    padding: 26px;
  }
  #wib-app ul.wib-app-cta-list {
    column-gap: 22px;
  }
}

/* Tablet/móvil (≤960px): el JS lo coloca al final del generador, tras los
   botones Preview + Download, sobre el fondo de página. Pasa a ser una
   tarjeta blanca como la del documento (el soft sobre el fondo de página
   apenas se distinguiría) y los iconos toman el tono soft. */
@media (max-width: 960px) {
  #wib-app .wib-app-cta {
    margin-top: 28px;
    background: #fff;
    border-color: transparent;
    border-radius: var(--wib-ui-radius-card);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03),
      0 8px 24px rgba(0, 0, 0, 0.06);
  }
  #wib-app .wib-app-cta-item-icon {
    background: var(--wib-ui-soft);
    box-shadow: none;
  }
}

/* Móvil: una columna, botón a todo el ancho */
@media (max-width: 600px) {
  #wib-app .wib-app-cta {
    gap: 22px;
    margin-top: 24px;
    padding: 22px 18px;
  }
  #wib-app .wib-app-cta-head {
    align-items: flex-start;
    gap: 14px;
  }
  #wib-app .wib-app-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
  #wib-app p.wib-app-cta-title {
    font-size: 18px !important;
    line-height: 23px;
  }
  #wib-app p.wib-app-cta-text {
    font-size: 14px !important;
  }
  #wib-app ul.wib-app-cta-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  /* Solo los 3 puntos marcados como 'mobile' en la vista */
  #wib-app li.wib-app-cta-item--wide {
    display: none;
  }
  #wib-app .wib-app-cta-foot {
    padding-top: 20px;
  }
  #wib-app .wib-app-cta a.wib-app-cta-btn {
    width: 100%;
    height: 48px;
  }
  #wib-app .wib-app-cta-proof {
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }
  #wib-app .wib-app-cta-proof-sep {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wib-app .wib-app-cta a.wib-app-cta-btn,
  #wib-app .wib-app-cta a.wib-app-cta-btn .wib-app-cta-arrow {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
  #wib-app .wib-app-cta a.wib-app-cta-btn:hover .wib-app-cta-arrow,
  #wib-app .wib-app-cta a.wib-app-cta-btn:active {
    transform: none;
  }
}

/* Desktop: la hoja del preview no es sticky, se queda bajo su cabecera */
@media (min-width: 961px) {
  #wib-app .wib-preview-container {
    position: static;
  }
}