:root {
  --cyc-blue: #0165f6;
  --cyc-blue-dark: #004fc2;
  --cyc-sky: #eaf3ff;
  --cyc-dark: #162a32;
  --cyc-sidebar: #213740;
  --cyc-sidebar-2: #182a32;
  --cyc-text: #24323d;
  --cyc-muted: #71808e;
  --cyc-border: #e7ecf2;
  --cyc-bg: #f4f7fb;
  --cyc-card: #ffffff;
  --cyc-green: #26b36a;
  --cyc-red: #ff6b4a;
  --cyc-yellow: #f7b731;
  --soft-bg: #f8fafc;
  --shadow-soft: 0 12px 32px rgba(18, 35, 46, .08);
  --radius-lg: 22px;
  --radius-md: 14px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--cyc-text);
  background: var(--cyc-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--cyc-sidebar), var(--cyc-sidebar-2));
  color: #fff;
  padding: 18px 18px 24px;
  z-index: 40;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 20px;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  border-radius: 12px;
}
.brand-title { font-weight: 900; letter-spacing: .4px; }
.brand-subtitle { color: rgba(255,255,255,.56); font-size: 11px; }
.sidebar-close { display: none; margin-left: auto; color: #fff; }

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
}
.avatar, .profile-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cyc-blue);
  background: #fff;
  font-weight: 900;
  box-shadow: inset 0 0 0 3px #d7eaff;
}
.user-card strong { display: block; font-size: 13px; }
.user-card span { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; text-transform: uppercase; }

.nav-menu { display: grid; gap: 4px; }
.nav-item {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 13px;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: .18s ease;
}
.nav-item span { display: flex; align-items: center; gap: 12px; }
.nav-item i:first-child { width: 18px; text-align: center; }
.nav-item:hover, .nav-item.active { background: rgba(1,101,246,.22); color: #fff; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--cyc-blue); }
.nav-item-disabled,
.nav-item-disabled:hover { opacity: .4; cursor: not-allowed; pointer-events: none; background: transparent; }
.nav-arrow { font-size: 10px; opacity: .6; }

.main-content { min-width: 0; padding-bottom: 34px; }
.topbar {
  height: 74px;
  position: sticky;
  top: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--cyc-border);
  backdrop-filter: blur(16px);
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 10px; }
.company-name { text-align: center; color: var(--cyc-muted); font-weight: 800; letter-spacing: .7px; }
.year-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--cyc-green);
  color: #fff;
  font-weight: 900;
}
.icon-btn, .top-action, .profile-btn, .btn, .toggle-btn, .square-btn {
  border: 0;
  background: transparent;
  color: inherit;
}
.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
}
.icon-btn:hover { background: rgba(1,101,246,.08); color: var(--cyc-blue); }
.top-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--cyc-text);
  font-weight: 700;
}
.top-action:hover { background: var(--cyc-sky); color: var(--cyc-blue); }
.profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 800;
}
.profile-avatar { width: 36px; height: 36px; font-size: 12px; }

.content-wrap { padding: 24px; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--cyc-muted);
  font-size: 13px;
}
.breadcrumb strong { color: var(--cyc-text); }

.page-card {
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }

/* Acciones a la derecha del encabezado de Partidas (Eventos + Agregar). */
.panel-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Modal "Agregar partidas desde eventos" (solo Ventas). */
.events-det-dialog { max-width: 660px; }
.events-det-dialog .mini-table td.num,
.events-det-dialog .mini-table th.num { text-align: right; white-space: nowrap; }
.events-det-dialog .ev-sub { font-size: 12px; color: var(--cyc-muted); margin-top: 2px; }
.events-det-dialog .ev-qty { width: 92px; }

/* Título + etiqueta de timbres disponibles (facturas/notas) en una fila. */
.title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.timbres-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  background: color-mix(in srgb, var(--cyc-blue) 12%, transparent);
  color: var(--cyc-blue);
  border: 1px solid color-mix(in srgb, var(--cyc-blue) 30%, transparent);
}
.timbres-pill.empty {
  background: color-mix(in srgb, var(--cyc-red) 12%, transparent);
  color: var(--cyc-red);
  border-color: color-mix(in srgb, var(--cyc-red) 32%, transparent);
}
p { margin: 6px 0 0; color: var(--cyc-muted); }
.head-buttons { display: flex; align-items: center; gap: 10px; }
.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 13px;
  font-weight: 850;
  border: 1px solid transparent;
}
.btn-primary { background: var(--cyc-blue); color: #fff; box-shadow: 0 12px 22px rgba(1,101,246,.2); }
.btn-primary:hover { background: var(--cyc-blue-dark); }
.btn-light { background: #f7f9fc; border-color: var(--cyc-border); color: var(--cyc-text); }
.btn-light:hover { color: var(--cyc-blue); border-color: #bfd8ff; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.summary-card {
  padding: 16px;
  border: 1px solid var(--cyc-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.summary-card span, .summary-card small { color: var(--cyc-muted); }
.summary-card strong { display: block; margin: 6px 0 2px; font-size: 21px; }
.summary-card.accent { background: #fff5f2; border-color: #ffd8cc; }
.summary-card.accent strong { color: var(--cyc-red); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  margin-bottom: 18px;
  border: 1px solid var(--cyc-border);
  border-radius: 18px;
  background: #fbfcfe;
}
.search-box {
  flex: 1;
  min-width: 230px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: #fff;
  color: var(--cyc-muted);
}
.search-box input { width: 100%; border: 0; outline: 0; color: var(--cyc-text); }
.toolbar-group { display: flex; align-items: center; gap: 10px; }
.field-control {
  height: 46px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  padding: 0 13px;
  background: #fff;
  color: var(--cyc-text);
  outline: 0;
}
.view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: #eef3f8;
}
.toggle-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--cyc-muted);
}
.toggle-btn.active { background: #fff; color: var(--cyc-blue); box-shadow: 0 5px 14px rgba(13,42,62,.08); }

.document-area { min-height: 380px; }
.table-view { width: 100%; overflow-x: auto; border-radius: 16px; border: 1px solid var(--cyc-border); }
.documents-table { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0; }
.documents-table th {
  position: sticky;
  top: 0;
  padding: 14px 12px;
  background: #f8fafc;
  color: #536373;
  border-bottom: 1px solid var(--cyc-border);
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.documents-table td {
  padding: 16px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--cyc-border);
}
.documents-table tr:hover td { background: #fbfdff; }
.doc-main, .amount-lines { display: grid; gap: 4px; }
.doc-main span, .amount-lines span { font-size: 12px; color: var(--cyc-muted); }
.doc-main strong { max-width: 410px; }
.text-danger strong, .text-danger span { color: var(--cyc-red); }
.status-badge, .invoice-badge {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 8px;
  border-radius: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.status-badge.success { background: var(--cyc-green); }
.status-badge.danger { background: var(--cyc-red); }
.status-badge.warning { background: var(--cyc-yellow); color: #3b2a00; }
.status-badge.info { background: var(--cyc-blue); color: #fff; }
.status-badge.fiscal-warn { margin-left: 4px; background: #f0a52b; color: #fff; }
.invoice-badge { margin-left: 4px; background: var(--cyc-blue); }
/* Tag de documentos relacionados: neutro a propósito, para que no compita con
   los tags de estado (Activo/Vencida/CFDI) que sí son semáforo. */
.status-badge.reldocs-badge { margin-left: 4px; background: #6b7280; color: #fff; }
.status-badge.reldocs-badge i { margin-right: 3px; font-size: .85em; }
/* Tag de surtido de inventario (solo Ventas): semáforo propio — sin surtir
   (gris), parcialmente surtido (ámbar), surtida (verde). */
.status-badge.fulfill-none { margin-left: 4px; background: #64748b; color: #fff; }
.status-badge.fulfill-partial { margin-left: 4px; background: #e08a1e; color: #fff; }
.status-badge.fulfill-done { margin-left: 4px; background: var(--cyc-green); color: #fff; }
.status-badge.fulfill-none i,
.status-badge.fulfill-partial i,
.status-badge.fulfill-done i { margin-right: 4px; font-size: .85em; }
/* Tag de CONVERSIÓN (regla "una sola vez"): a qué destino se convirtió el
   documento y con qué alcance. TOTAL = relleno índigo; PARCIAL = contorno (aún
   quedan partidas por convertir). El índigo no compite con el semáforo de estado. */
.status-badge.convert-total { margin-left: 4px; background: transparent; color: var(--cyc-green); border: 1px solid var(--cyc-green); padding: 0 7px; }
.status-badge.convert-partial { margin-left: 4px; background: transparent; color: var(--cyc-blue); border: 1px solid var(--cyc-blue); padding: 0 7px; }
.status-badge.convert-total i,
.status-badge.convert-partial i { font-size: .95em; margin-right: 3px; }
/* Acceso directo del pago a Ingresos y Egresos (incexp.html): botón cuadrado en el
   renglón de Editar y link de texto en la tarjeta del modal Ver. */
a.square-btn { text-decoration: none; }
.view-incexp-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--cyc-blue); text-decoration: none; }
.view-incexp-link:hover { text-decoration: underline; }
.row-actions { display: flex; align-items: center; gap: 5px; }
.row-actions.compact { gap: 8px; }
.square-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--cyc-border);
  background: #fff;
}
.square-btn.green { color: var(--cyc-green); border-color: rgba(38,179,106,.35); }
.square-btn.blue { color: var(--cyc-blue); border-color: rgba(1,101,246,.35); }
.square-btn.dark { color: #5d6d7a; }
.square-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(13,42,62,.08); }

/* Badge "REP timbrado" en la pestaña Pagos de una factura (pago con Complemento
   de Pago ya timbrado). Ocupa el lugar del botón de timbrar. */
.rep-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  height: 32px;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--cyc-green);
  background: rgba(38,179,106,.12);
  border: 1px solid rgba(38,179,106,.35);
  white-space: nowrap;
}

.card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.hidden { display: none !important; }
.doc-card {
  padding: 16px;
  border: 1px solid var(--cyc-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(18,35,46,.05);
}
.doc-card-top, .doc-card-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.folio-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--cyc-sky);
  color: var(--cyc-blue);
  font-weight: 900;
}
.doc-card h3 { margin: 10px 0 0; font-size: 16px; line-height: 1.25; }
.doc-card p { margin: 5px 0 0; font-size: 13px; }
.mobile-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.mobile-meta-grid span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 13px;
  background: #f7f9fc;
  color: var(--cyc-muted);
  font-size: 12px;
}
.mobile-meta-grid b { color: var(--cyc-text); }
.doc-card-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.doc-card-amounts div {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
}
.doc-card-amounts span { color: var(--cyc-muted); font-size: 12px; }
.doc-card-amounts strong { font-size: 13px; }

.list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  color: var(--cyc-muted);
  font-size: 13px;
}
.pager { display: flex; align-items: center; gap: 7px; }
.empty-state { padding: 34px; text-align: center; color: var(--cyc-muted); }

.mobile-tabs {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 32;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 38px rgba(18,35,46,.18);
  backdrop-filter: blur(18px);
}
.mobile-tab {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px 2px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--cyc-muted);
  font-size: 11px;
  font-weight: 800;
}
.mobile-tab i { font-size: 16px; }
.mobile-tab.active { color: var(--cyc-blue); background: var(--cyc-sky); }
.floating-add {
  display: none;
  position: fixed;
  right: 18px;
  bottom: calc(88px + var(--safe-bottom));
  z-index: 31;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 19px;
  background: var(--cyc-blue);
  color: #fff;
  box-shadow: 0 16px 28px rgba(1,101,246,.35);
}

.action-sheet { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(13,24,31,.4); opacity: 0; transition: .2s ease; }
.sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(460px, calc(100% - 28px));
  transform: translate(-50%, 120%);
  padding: 10px 12px 16px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(0,0,0,.22);
  transition: .24s ease;
}
.action-sheet.open { pointer-events: auto; }
.action-sheet.open .sheet-backdrop { opacity: 1; }
.action-sheet.open .sheet-panel { transform: translate(-50%, 0); }
.sheet-handle { width: 46px; height: 5px; margin: 0 auto 12px; border-radius: 99px; background: #d7dee7; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; }
.sheet-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-actions { display: grid; gap: 7px; }
.sheet-action {
  min-height: 52px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  padding: 0 12px;
  background: #f8fafc;
  color: var(--cyc-text);
  text-align: left;
  font-weight: 800;
}
.sheet-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
}
.sheet-icon.green { color: var(--cyc-green); }
.sheet-icon.blue { color: var(--cyc-blue); }
.sheet-icon.cyan { color: #00a8b5; }
.sheet-icon.dark { color: #52616f; }
.sheet-icon.orange { color: #f0a52b; }
.sheet-icon.red { color: #e5484d; }

.toast-message {
  position: fixed;
  left: 50%;
  bottom: 28px;
  /* Por encima de todos los modales (detail/pdf ~110-130) y flyouts (9999)
     para que la notificación se lea aunque haya un modal abierto con backdrop. */
  z-index: 100010;
  transform: translate(-50%, 20px);
  opacity: 0;
  padding: 12px 16px;
  border-radius: 999px;
  background: #172b35;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  transition: .22s ease;
}
.toast-message.show { opacity: 1; transform: translate(-50%, 0); }
.spin { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mobile-overlay { display: none; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 86px 1fr; }
  .sidebar { padding-inline: 12px; }
  .brand-block { justify-content: center; padding-inline: 0; }
  .brand-block > div:not(.brand-mark) { display: none; }
  .user-card { justify-content: center; padding: 12px 0; background: transparent; }
  .user-card > div:not(.avatar) { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item span { gap: 0; }
  .nav-item span:not(.nav-arrow) { font-size: 0; }
  .nav-item i:first-child { font-size: 16px; }
  .nav-arrow { display: none; }
}

@media (max-width: 920px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: .22s ease;
    box-shadow: 18px 0 40px rgba(0,0,0,.22);
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(12, 20, 28, .42);
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
    display: block;
  }
  .app-shell.sidebar-open .mobile-overlay { opacity: 1; pointer-events: auto; }
  .brand-block { justify-content: flex-start; }
  .brand-block > div:not(.brand-mark) { display: block; }
  .sidebar-close { display: inline-grid; }
  .user-card { justify-content: flex-start; background: rgba(255,255,255,.08); padding: 14px; }
  .user-card > div:not(.avatar) { display: block; }
  .nav-item { justify-content: space-between; padding: 0 12px; }
  .nav-item span:not(.nav-arrow) { font-size: 14px; }
  .nav-item span { gap: 12px; }
  .nav-arrow { display: inline-block; }
  .topbar { height: 66px; padding-inline: 14px; grid-template-columns: auto 1fr auto; }
  .company-name { font-size: 12px; text-align: left; }
  .desktop-only { display: none !important; }
  .content-wrap { padding: 16px 14px 110px; }
  .page-card { padding: 14px; border-radius: 20px; }
  .page-head { align-items: center; }
  .page-head p { display: none; }
  h1 { font-size: 21px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { display: grid; gap: 10px; }
  .toolbar-group { display: grid; grid-template-columns: 1fr auto auto; }
  .search-box { min-width: 0; }
  .table-view { display: none; }
  #cardView { display: grid !important; }
  #btnTableView { display: none; }
  .mobile-tabs { display: grid; }
  .floating-add { display: grid; place-items: center; }
  .toast-message { bottom: calc(94px + var(--safe-bottom)); }
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .topbar { gap: 8px; }
  .company-name { display: none; }
  .content-wrap { padding: 12px 10px 108px; }
  .breadcrumb { margin-bottom: 12px; }
  .page-card { padding: 12px; border-radius: 18px; }
  .btn { min-height: 40px; padding: 0 12px; }
  .summary-grid { gap: 8px; }
  .summary-card { padding: 12px; border-radius: 15px; }
  .summary-card strong { font-size: 17px; }
  .toolbar { padding: 10px; border-radius: 16px; }
  .toolbar-group { grid-template-columns: 1fr auto; }
  .view-toggle { display: none; }
  .field-control, .search-box { height: 44px; }
  .card-view { grid-template-columns: 1fr; }
  .doc-card { padding: 14px; border-radius: 17px; }
  .doc-card-amounts { grid-template-columns: 1fr; }
  .doc-card-amounts div { grid-template-columns: 1fr auto; align-items: center; }
  .mobile-meta-grid { grid-template-columns: 1fr 1fr; }
  .list-footer { align-items: flex-start; flex-direction: column; }
}

/* ===== CYC ERP v3: menú multinivel + tema claro/oscuro completo ===== */
:root {
  --cyc-turquoise: #2eb4a8;
  --cyc-turquoise-dark: #238f86;

  /* Menú en modo claro */
  --cyc-sidebar: #ffffff;
  --cyc-sidebar-2: #f7fafc;
  --cyc-menu-text: #263947;
  --cyc-menu-muted: #7b8a96;
  --cyc-menu-hover: #eef6ff;
  --cyc-menu-sub: #f5f8fb;
  --cyc-menu-border: #e5edf5;
  --cyc-menu-shadow: 0 18px 45px rgba(23, 42, 54, .12);
}

body[data-theme="dark"] {
  --cyc-bg: #0f1820;
  --cyc-card: #17232d;
  --cyc-text: #edf4fb;
  --cyc-muted: #9aabba;
  --cyc-border: #263746;
  --cyc-sky: rgba(1,101,246,.18);

  /* Menú en modo oscuro/negro */
  --cyc-sidebar: #121c24;
  --cyc-sidebar-2: #081117;
  --cyc-menu-text: rgba(255,255,255,.90);
  --cyc-menu-muted: rgba(255,255,255,.58);
  --cyc-menu-hover: rgba(255,255,255,.07);
  --cyc-menu-sub: rgba(0,0,0,.18);
  --cyc-menu-border: rgba(255,255,255,.08);
  --cyc-menu-shadow: 0 18px 45px rgba(0,0,0,.28);
  --soft-bg: #111c24;
  background: var(--cyc-bg);
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .page-card,
body[data-theme="dark"] .doc-card,
body[data-theme="dark"] .sheet-panel {
  background: var(--cyc-card);
  border-color: var(--cyc-border);
}

body[data-theme="dark"] .toolbar,
body[data-theme="dark"] .documents-table th,
body[data-theme="dark"] .mobile-meta-grid span,
body[data-theme="dark"] .sheet-action,
body[data-theme="dark"] .btn-light,
body[data-theme="dark"] .field-control,
body[data-theme="dark"] .search-box,
body[data-theme="dark"] .square-btn,
body[data-theme="dark"] .view-toggle {
  background: #111c24;
  border-color: var(--cyc-border);
  color: var(--cyc-text);
}

body[data-theme="dark"] .summary-card {
  background: linear-gradient(180deg, #17232d, #131f28);
  border-color: var(--cyc-border);
}

body[data-theme="dark"] .summary-card.accent {
  background: rgba(255,107,74,.11);
  border-color: rgba(255,107,74,.28);
}

body[data-theme="dark"] .documents-table tr:hover td { background: #14222c; }
body[data-theme="dark"] .mobile-tabs { background: rgba(19,31,40,.92); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .toggle-btn.active { background: #20313d; }
body[data-theme="dark"] .search-box input { background: transparent; color: var(--cyc-text); }

.brand-mark {
  background: linear-gradient(135deg, var(--cyc-blue), #003b89);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -.03em;
}

.sidebar {
  background: linear-gradient(180deg, var(--cyc-sidebar) 0%, var(--cyc-sidebar-2) 100%);
  color: var(--cyc-menu-text);
  border-right: 1px solid var(--cyc-menu-border);
  box-shadow: var(--cyc-menu-shadow);
}

.brand-title { color: var(--cyc-menu-text); }
.brand-subtitle { color: var(--cyc-menu-muted); }
.sidebar-close { color: var(--cyc-menu-text); }

.user-card {
  background: rgba(1,101,246,.07);
  border: 1px solid var(--cyc-menu-border);
}
.user-card strong { color: var(--cyc-menu-text); }
.user-card span { color: var(--cyc-menu-muted); }
body[data-theme="dark"] .user-card { background: rgba(255,255,255,.07); }

.nav-menu { gap: 2px; padding-bottom: 14px; }
.nav-node { display: grid; }
.nav-item {
  position: relative;
  min-height: 46px;
  border-radius: 0;
  color: var(--cyc-menu-text);
  font-weight: 820;
}
.nav-item span { min-width: 0; }
.nav-item:hover { background: var(--cyc-menu-hover); color: var(--cyc-blue); }
.nav-item.active {
  background: var(--cyc-turquoise);
  color: #fff;
  box-shadow: none;
}
.nav-item.open:not(.active) { background: var(--cyc-menu-hover); color: var(--cyc-blue); }
.nav-item.level-1 { padding-left: 44px; min-height: 42px; background: var(--cyc-menu-sub); }
.nav-item.level-2 { padding-left: 78px; min-height: 38px; background: var(--cyc-menu-sub); font-size: 13px; color: var(--cyc-menu-text); }
.nav-item.level-1:hover,
.nav-item.level-2:hover { background: rgba(46,180,168,.12); color: var(--cyc-turquoise-dark); }
.nav-item.level-1.active,
.nav-item.level-2.active { background: rgba(46,180,168,.20); color: var(--cyc-turquoise-dark); box-shadow: inset 4px 0 0 var(--cyc-turquoise); }
body[data-theme="dark"] .nav-item:hover,
body[data-theme="dark"] .nav-item.open:not(.active) { color: #fff; }
body[data-theme="dark"] .nav-item.level-1.active,
body[data-theme="dark"] .nav-item.level-2.active { color: #fff; }
.nav-item i:first-child { color: currentColor; }
.nav-arrow { transition: transform .18s ease; color: currentColor; opacity: .7; }
.nav-item.open > .nav-arrow { transform: rotate(90deg); }

/* Por defecto ningún submenú aparece abierto. Solo se abre al dar clic.
   Se despliega con animación (altura + opacidad) en vez de aparecer de golpe.
   En tablet (flyout) y sidebar colapsado se sigue ocultando más abajo. */
.nav-submenu {
  display: grid;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .26s ease, transform .3s ease;
}
.nav-submenu.open { max-height: 900px; opacity: 1; transform: none; }

.theme-toggle {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ffd6dc;
  border-radius: 14px;
  background: #fff5f6;
  color: #0b2741;
  box-shadow: 0 8px 18px rgba(255, 90, 105, .12);
}
.theme-toggle:hover { border-color: #ffb6c0; color: var(--cyc-blue); transform: translateY(-1px); }
body[data-theme="dark"] .theme-toggle {
  background: #101922;
  color: #f6f9fc;
  border-color: #314354;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

@media (max-width: 1180px) and (min-width: 921px) {
  .nav-submenu { display: none !important; }
  .nav-item.level-1,
  .nav-item.level-2 { display: none; }
  .theme-toggle { width: 38px; height: 38px; }
}

@media (max-width: 920px) {
  .nav-submenu.open { display: grid; }
  .nav-item.level-1 { padding-left: 42px; }
  .nav-item.level-2 { padding-left: 68px; }
  .theme-toggle { width: 40px; height: 40px; border-radius: 13px; }
}

@media (max-width: 560px) {
  .topbar-actions { gap: 6px; }
  .theme-toggle { width: 38px; height: 38px; }
}

/* ===== CYC ERP v4: acciones reubicadas + empresas + menú sin verde ===== */
.nav-item.active {
  background: rgba(1,101,246,.10);
  color: var(--cyc-blue);
  box-shadow: inset 4px 0 0 var(--cyc-blue);
}
body[data-theme="dark"] .nav-item.active {
  background: rgba(1,101,246,.18);
  color: #ffffff;
  box-shadow: inset 4px 0 0 var(--cyc-blue);
}
.nav-item.level-1.active,
.nav-item.level-2.active {
  background: rgba(1,101,246,.12);
  color: var(--cyc-blue);
  box-shadow: inset 4px 0 0 var(--cyc-blue);
}
body[data-theme="dark"] .nav-item.level-1.active,
body[data-theme="dark"] .nav-item.level-2.active {
  background: rgba(1,101,246,.20);
  color: #fff;
  box-shadow: inset 4px 0 0 var(--cyc-blue);
}
.nav-item.level-1:hover,
.nav-item.level-2:hover {
  background: rgba(1,101,246,.10);
  color: var(--cyc-blue);
}

.module-actionbar {
  height: 54px;
  position: sticky;
  top: 74px;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px;
  background: rgba(244,247,251,.86);
  border-bottom: 1px solid var(--cyc-border);
  backdrop-filter: blur(16px);
}
.module-actionbar .top-action {
  min-height: 38px;
  border: 1px solid transparent;
}
.module-actionbar .top-action:hover {
  border-color: rgba(1,101,246,.16);
}

.top-action-menu { position: relative; }
.top-action-menu .top-action[aria-expanded="true"] {
  background: var(--cyc-sky);
  color: var(--cyc-blue);
  border-color: rgba(1,101,246,.16);
}
.top-dropdown {
  position: fixed;
  width: min(280px, calc(100vw - 24px));
  display: none;
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(18, 35, 46, .18);
  z-index: 200;
  overflow: hidden;
}
.top-dropdown.open { display: block; }
.top-dropdown-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cyc-border);
  color: var(--cyc-text);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.top-dropdown-field {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
}
.top-dropdown-field:not(:last-child) { border-bottom: 1px solid var(--cyc-border); }
.top-dropdown-field span { font-size: 12px; font-weight: 700; color: var(--cyc-muted); }
.top-dropdown-field select {
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--cyc-border);
  background: var(--soft-bg);
  color: var(--cyc-text);
  padding: 0 10px;
}
.top-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--cyc-border);
  background: transparent;
  color: var(--cyc-text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.top-dropdown-item:last-child { border-bottom: 0; }
.top-dropdown-item:hover { background: var(--cyc-sky); color: var(--cyc-blue); }
.top-dropdown-item i { width: 16px; color: var(--cyc-blue); }
.top-dropdown-item:disabled { opacity: .4; cursor: not-allowed; }
.top-dropdown-item:disabled:hover { background: transparent; color: var(--cyc-text); }

.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; color: inherit; }
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.documents-table.density-compact td,
.documents-table.density-compact th { padding: 8px 12px; }
.card-view.density-compact .doc-card { padding: 14px; }

.company-switcher { position: relative; }
.company-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--cyc-sky);
  color: var(--cyc-blue);
  font-size: 17px;
  box-shadow: 0 8px 18px rgba(1,101,246,.10);
}
.company-btn:hover,
.company-switcher.open .company-btn {
  background: var(--cyc-blue);
  color: #fff;
}
.company-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(430px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 105px));
  overflow-y: auto;
  display: none;
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(18, 35, 46, .18);
  z-index: 70;
}
.company-switcher.open .company-dropdown { display: block; }
.company-dropdown-head,
.company-dropdown-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}
.company-dropdown-head {
  border-bottom: 1px solid var(--cyc-border);
  color: var(--cyc-text);
  font-size: 18px;
}
.company-dropdown-foot {
  position: sticky;
  bottom: 0;
  background: var(--cyc-card);
  border-top: 1px solid var(--cyc-border);
  color: var(--cyc-muted);
  font-weight: 800;
}
.company-option {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--cyc-text);
}
.company-option:hover { background: var(--cyc-sky); }
.company-option strong {
  display: block;
  color: var(--cyc-blue);
  font-size: 17px;
  line-height: 1.18;
}
.company-option small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  line-height: 1.28;
  text-transform: uppercase;
}
.company-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0f4f8;
  color: #8d98a3;
  font-size: 24px;
}
.company-check { color: var(--cyc-muted); }
.company-option.active .company-check { color: var(--cyc-green); }

body[data-theme="dark"] .module-actionbar {
  background: rgba(15,24,32,.86);
  border-color: var(--cyc-border);
}
body[data-theme="dark"] .company-dropdown,
body[data-theme="dark"] .company-dropdown-foot {
  background: var(--cyc-card);
  border-color: var(--cyc-border);
}
body[data-theme="dark"] .company-icon { background: #111c24; color: #7f8e9b; }
body[data-theme="dark"] .company-option:hover { background: rgba(1,101,246,.16); }

@media (max-width: 920px) {
  .module-actionbar {
    top: 66px;
    height: auto;
    min-height: 50px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 8px 14px;
  }
  .module-actionbar .top-action {
    flex: 0 0 auto;
    background: var(--cyc-card);
    border-color: var(--cyc-border);
    box-shadow: 0 8px 18px rgba(18,35,46,.06);
  }
  .company-dropdown {
    position: fixed;
    top: 76px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 96px);
  }
}

@media (max-width: 560px) {
  .company-btn,
  .theme-toggle { width: 38px; height: 38px; }
  .module-actionbar { padding-inline: 10px; }
  .company-option { grid-template-columns: 44px 1fr 20px; padding: 14px; }
  .company-option strong { font-size: 15px; }
}

/* ===== CYC ERP v5: editor modal con tabs ===== */
.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.edit-modal.open { display: block; }
.edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 25, .56);
  backdrop-filter: blur(4px);
}
.edit-dialog {
  position: absolute;
  inset: 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.edit-header,
.edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cyc-border);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.96));
}
.edit-header h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.02em; }
.edit-header p { margin: 4px 0 0; }
.modal-folio {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 8px;
  background: #11b6c9;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.modal-folio.small { margin-right: 7px; vertical-align: middle; }
.edit-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
  background: var(--cyc-bg);
}
.edit-tabs {
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  background: var(--cyc-card);
  border-right: 1px solid var(--cyc-border);
}
.edit-tab {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--cyc-text);
  text-align: left;
  font-weight: 850;
}
.edit-tab span { display: flex; align-items: center; gap: 12px; min-width: 0; }
.edit-tab i:first-child { width: 18px; text-align: center; color: var(--cyc-muted); }
.edit-tab:hover { background: var(--cyc-sky); color: var(--cyc-blue); }
.edit-tab.active { background: var(--cyc-blue); color: #fff; box-shadow: 0 10px 20px rgba(1,101,246,.18); }
.edit-tab.active i { color: #fff; }
.edit-tab.danger { color: var(--cyc-red); }
.edit-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 22px;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-head.between { justify-content: space-between; }
.panel-head h3 { margin: 0; font-size: 18px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.form-grid.two-cols { grid-template-columns: 240px 1fr; }
.form-field { display: grid; gap: 7px; color: var(--cyc-text); font-weight: 750; }
.form-field span { color: var(--cyc-text); font-size: 13px; }
.form-field input,
.form-field select,
.form-field textarea,
.inline-input,
.danger-panel input,
.danger-panel textarea {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--cyc-border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  outline: 0;
}
.form-field textarea,
.danger-panel textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}
.field-span-2 { grid-column: span 2; }
.field-span-3 { grid-column: span 3; }
.field-span-4 { grid-column: span 4; }
.date-control-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.date-control-wrap input[type="datetime-local"] {
  padding-right: 44px;
  cursor: pointer;
}
.date-control-icon,
.date-control-wrap > i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyc-muted);
  pointer-events: none;
  font-size: 15px;
  z-index: 2;
}
.date-control-wrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  width: 44px;
  height: 100%;
}
.date-control-wrap input[type="datetime-local"]:focus + .date-control-icon {
  color: var(--cyc-primary);
}

.modal-search { max-width: 360px; margin-bottom: 14px; }
.responsive-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-card);
}
.mini-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.mini-table th,
.mini-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--cyc-border);
  text-align: left;
  vertical-align: middle;
}
.mini-table th {
  background: #f7fafc;
  color: var(--cyc-muted);
  font-size: 12px;
  text-transform: uppercase;
}
.panel-note,
.center-muted { color: var(--cyc-muted); text-align: center; }
.info-box,
.relation-card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-card);
}
.relation-card {
  position: relative;
  display: grid;
  gap: 6px;
}
.relation-card .square-btn { position: absolute; right: 14px; top: 14px; }
.btn-success { background: #44ad4d; color: #fff; }
.btn-danger { background: #ff4747; color: #fff; }
.btn-warning { background: #f0a52b; color: #fff; }
.btn-stamp { background: #6c4bd6; color: #fff; box-shadow: 0 12px 22px rgba(108,75,214,.2); }
.btn-stamp:hover { background: #5a3cc0; color: #fff; }
.btn-cancel-cfdi { background: #f0a52b; color: #fff; box-shadow: 0 12px 22px rgba(240,165,43,.2); }
.btn-cancel-cfdi:hover { background: #db9420; color: #fff; }
.lock-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(240,165,43,.12);
  color: #a15f00;
  border: 1px solid rgba(240,165,43,.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-weight: 700;
}
.locked-control { opacity: .75; cursor: not-allowed; }
.square-btn.red { color: #ff4747; border-color: rgba(255,71,71,.35); }
.danger-panel {
  max-width: 720px;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255,71,71,.24);
  border-radius: 18px;
  background: rgba(255,71,71,.06);
}
.danger-panel > i { color: var(--cyc-red); font-size: 28px; }
.danger-panel h3 { margin: 0; }
.edit-footer {
  border-top: 1px solid var(--cyc-border);
  border-bottom: 0;
}
.edit-totals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--cyc-muted);
}
.edit-totals b { color: var(--cyc-text); }
.edit-footer-actions { display: flex; align-items: center; gap: 10px; }

body[data-theme="dark"] .edit-header,
body[data-theme="dark"] .edit-footer,
body[data-theme="dark"] .edit-tabs,
body[data-theme="dark"] .responsive-table,
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .relation-card {
  background: var(--cyc-card);
  border-color: var(--cyc-border);
}
body[data-theme="dark"] .edit-body { background: var(--cyc-bg); }
body[data-theme="dark"] .mini-table th { background: #111c24; }
body[data-theme="dark"] .form-field input,
body[data-theme="dark"] .form-field select,
body[data-theme="dark"] .form-field textarea,
body[data-theme="dark"] .inline-input,
body[data-theme="dark"] .danger-panel input,
body[data-theme="dark"] .danger-panel textarea {
  background: #111c24;
  border-color: var(--cyc-border);
  color: var(--cyc-text);
}

@media (max-width: 980px) {
  .edit-dialog { inset: 10px; border-radius: 20px; }
  .date-control-wrap input[type="datetime-local"] {
    min-height: 48px;
    font-size: 16px;
  }
  .date-control-icon {
    font-size: 17px;
  }

  .edit-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .edit-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--cyc-border);
    padding: 10px;
  }
  .edit-tab {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    white-space: nowrap;
  }
  .edit-tab .fa-chevron-right { display: none; }
  .edit-panel { padding: 16px; }
  .form-grid,
  .form-grid.two-cols { grid-template-columns: 1fr 1fr; }
  .field-span-3,
  .field-span-4 { grid-column: span 2; }
  .edit-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .edit-dialog { inset: 0; border-radius: 0; }
  .edit-header { padding: 14px; }
  .edit-header h2 { font-size: 19px; }
  .edit-panel { padding: 12px; }
  .form-grid,
  .form-grid.two-cols { grid-template-columns: 1fr; }
  .field-span-2,
  .field-span-3,
  .field-span-4 { grid-column: span 1; }
  .panel-head.between { align-items: stretch; flex-direction: column; }
  .edit-footer-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .edit-footer-actions .btn { width: 100%; }
}

/* ===== CYC ERP v6: breadcrumb + acciones en un solo row ===== */
.section-rowbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 0 4px;
}
.section-rowbar .breadcrumb {
  margin-bottom: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.section-rowbar .module-actionbar {
  position: static;
  top: auto;
  height: auto;
  min-height: 0;
  z-index: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
.section-rowbar .module-actionbar .top-action {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.section-rowbar .module-actionbar .top-action:hover {
  background: var(--cyc-sky);
  border-color: rgba(1,101,246,.16);
}
body[data-theme="dark"] .section-rowbar .module-actionbar {
  background: transparent;
  border-color: transparent;
}

@media (max-width: 920px) {
  .section-rowbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .section-rowbar .module-actionbar {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 0 2px;
  }
  .section-rowbar .module-actionbar .top-action {
    flex: 0 0 auto;
    background: var(--cyc-card);
    border: 1px solid var(--cyc-border);
    box-shadow: 0 8px 18px rgba(18,35,46,.06);
  }
}

@media (max-width: 560px) {
  .section-rowbar { margin-bottom: 12px; }
  .section-rowbar .module-actionbar .top-action {
    min-height: 36px;
    padding-inline: 11px;
  }
}

/* ===== CYC ERP v7: row superior fijo y sin espacios rojos ===== */
.content-wrap {
  padding: 0 24px 24px;
}

.section-rowbar {
  position: sticky;
  top: 74px;
  z-index: 24;
  min-height: 46px;
  margin: 0;
  padding: 0 8px;
  background: rgba(244,247,251,.94);
  border-bottom: 1px solid var(--cyc-border);
  backdrop-filter: blur(16px);
}

.section-rowbar .breadcrumb {
  height: 46px;
}

.section-rowbar .module-actionbar {
  height: 46px;
}

.page-card {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body[data-theme="dark"] .section-rowbar {
  background: rgba(15,24,32,.94);
  border-color: var(--cyc-border);
}

@media (max-width: 920px) {
  .content-wrap {
    padding: 0 14px 110px;
  }

  .section-rowbar {
    top: 66px;
    min-height: 48px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding: 0 8px;
  }

  .section-rowbar .breadcrumb {
    flex: 0 0 auto;
    height: 48px;
  }

  .section-rowbar .module-actionbar {
    width: auto;
    height: 48px;
    margin-left: auto;
    padding: 0;
    overflow-x: visible;
  }

  .section-rowbar .module-actionbar .top-action {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .content-wrap {
    padding: 0 10px 108px;
  }

  .section-rowbar {
    min-height: 46px;
    margin-bottom: 0;
  }

  .section-rowbar .breadcrumb,
  .section-rowbar .module-actionbar {
    height: 46px;
  }

  .section-rowbar .module-actionbar .top-action {
    min-height: 34px;
    padding-inline: 9px;
  }
}

/* ===== CYC ERP v8: menú colapsable + selector de ejercicio ===== */
.exercise-btn {
  border: 0;
  cursor: pointer;
  transition: .18s ease;
}
.exercise-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(38, 179, 106, .18);
}
.exercise-btn.previous {
  background: #f59e0b;
  box-shadow: 0 10px 18px rgba(245, 158, 11, .16);
}
.exercise-btn.current { background: var(--cyc-green); }

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}
.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  transform: translateX(-100%);
}
.app-shell.sidebar-collapsed .main-content {
  min-width: 0;
}

.exercise-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
}
.exercise-modal.open { display: block; }
.exercise-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,18,25,.44);
  backdrop-filter: blur(4px);
}
.exercise-dialog {
  position: absolute;
  top: 88px;
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}
.exercise-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--cyc-border);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,255,.96));
}
.exercise-header h2 { margin: 8px 0 0; font-size: 22px; letter-spacing: -.02em; }
.exercise-header p { margin-top: 4px; }
.exercise-list {
  display: grid;
  gap: 10px;
  padding: 16px;
  max-height: min(460px, calc(100vh - 230px));
  overflow-y: auto;
}
.exercise-option {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cyc-border);
  border-radius: 16px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  text-align: left;
}
.exercise-option:hover {
  border-color: rgba(1,101,246,.26);
  background: var(--cyc-sky);
}
.exercise-option strong { display: block; font-size: 18px; }
.exercise-option small { display: block; margin-top: 3px; color: var(--cyc-muted); }
.exercise-status {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.exercise-status.current { background: var(--cyc-green); }
.exercise-status.previous { background: #f59e0b; }
.exercise-option.selected {
  border-color: rgba(1,101,246,.35);
  box-shadow: inset 4px 0 0 var(--cyc-blue), 0 10px 24px rgba(18,35,46,.07);
}

body[data-theme="dark"] .exercise-dialog,
body[data-theme="dark"] .exercise-option {
  background: var(--cyc-card);
  border-color: var(--cyc-border);
}
body[data-theme="dark"] .exercise-header {
  background: linear-gradient(180deg, rgba(23,35,45,.98), rgba(19,31,40,.98));
  border-color: var(--cyc-border);
}
body[data-theme="dark"] .exercise-option:hover { background: rgba(1,101,246,.16); }

@media (max-width: 920px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .app-shell.sidebar-collapsed .sidebar {
    width: min(86vw, 320px);
    padding: 18px 18px 24px;
    border-right: 1px solid var(--cyc-menu-border);
    box-shadow: 18px 0 40px rgba(0,0,0,.22);
    transform: translateX(-105%);
  }
  .exercise-dialog { top: 76px; }
}

@media (max-width: 560px) {
  .exercise-dialog {
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 22px 22px 0 0;
  }
  .exercise-header { padding: 16px; }
  .exercise-header h2 { font-size: 19px; }
}

/* ===== CYC ERP v9: menú reducido con iconos y tooltip ===== */
.app-shell.sidebar-collapsed {
  grid-template-columns: 86px 1fr;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 86px;
  min-width: 86px;
  padding: 14px 10px 20px;
  transform: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: none;
  border-right: 1px solid var(--cyc-menu-border, var(--cyc-border));
}

.app-shell.sidebar-collapsed .brand-block {
  justify-content: center;
  gap: 0;
  padding: 4px 0 16px;
}

.app-shell.sidebar-collapsed .brand-block > div:not(.brand-mark),
.app-shell.sidebar-collapsed .sidebar-close,
.app-shell.sidebar-collapsed .user-card > div,
.app-shell.sidebar-collapsed .nav-item span:not(:has(i)),
.app-shell.sidebar-collapsed .nav-arrow,
.app-shell.sidebar-collapsed .nav-submenu {
  display: none !important;
}

.app-shell.sidebar-collapsed .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.app-shell.sidebar-collapsed .user-card {
  justify-content: center;
  padding: 10px 0;
  margin: 0 0 14px;
  background: rgba(1,101,246,.10);
}

.app-shell.sidebar-collapsed .avatar {
  width: 42px;
  height: 42px;
}

.app-shell.sidebar-collapsed .nav-menu {
  gap: 6px;
}

.app-shell.sidebar-collapsed .nav-node {
  position: relative;
}

.app-shell.sidebar-collapsed .nav-item {
  width: 54px;
  min-height: 48px;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  border-radius: 16px;
}

.app-shell.sidebar-collapsed .nav-item span {
  width: 100%;
  justify-content: center;
  gap: 0;
}

.app-shell.sidebar-collapsed .nav-item i:first-child {
  width: auto;
  min-width: 20px;
  font-size: 17px;
}

.app-shell.sidebar-collapsed .nav-item.active {
  box-shadow: inset 0 -3px 0 var(--cyc-blue);
  background: rgba(1,101,246,.14);
}

.sidebar-tooltip {
  position: fixed;
  z-index: 9999;
  transform: translateY(-50%);
  max-width: 270px;
  padding: 10px 13px;
  border-radius: 12px;
  background: #172b35;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(9,18,25,.24);
  pointer-events: none;
}

.sidebar-tooltip::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: inherit;
}

body[data-theme="light"] .app-shell.sidebar-collapsed .sidebar {
  background: var(--cyc-sidebar-bg, #fff);
}

body[data-theme="light"] .app-shell.sidebar-collapsed .nav-item:hover,
body[data-theme="light"] .app-shell.sidebar-collapsed .nav-item.active {
  background: var(--cyc-sky);
  color: var(--cyc-blue);
}

body[data-theme="dark"] .sidebar-tooltip {
  background: #f8fbff;
  color: #162a32;
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
}

@media (max-width: 920px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .app-shell.sidebar-collapsed .sidebar {
    width: min(86vw, 320px);
    min-width: 0;
    padding: 18px 18px 24px;
    transform: translateX(-105%);
    overflow-y: auto;
  }

  .app-shell.sidebar-collapsed .brand-block > div:not(.brand-mark),
  .app-shell.sidebar-collapsed .user-card > div,
  .app-shell.sidebar-collapsed .nav-arrow {
    display: block !important;
  }

  .app-shell.sidebar-collapsed .nav-submenu.open {
    display: grid !important;
  }

  .app-shell.sidebar-collapsed .sidebar-close {
    display: inline-grid !important;
  }

  .app-shell.sidebar-collapsed .brand-block {
    justify-content: flex-start;
    gap: 12px;
  }

  .app-shell.sidebar-collapsed .user-card {
    justify-content: flex-start;
    padding: 14px;
  }

  .app-shell.sidebar-collapsed .nav-item {
    width: auto;
    justify-content: space-between;
    padding: 0 12px;
    margin: 0;
  }

  .app-shell.sidebar-collapsed .nav-item span {
    justify-content: flex-start;
    gap: 12px;
  }
}

/* ===== CYC ERP v10: sidebar reducido limpio, solo iconos + tooltip animado ===== */
@media (min-width: 921px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 78px 1fr;
  }

  .app-shell.sidebar-collapsed .sidebar {
    width: 78px;
    min-width: 78px;
    padding: 16px 8px 20px;
    overflow-x: hidden;
  }

  /* Oculta el bloque marcado en verde */
  .app-shell.sidebar-collapsed .user-card {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .brand-block {
    justify-content: center;
    padding: 4px 0 22px;
    margin: 0;
  }

  .app-shell.sidebar-collapsed .brand-block > div:not(.brand-mark),
  .app-shell.sidebar-collapsed .sidebar-close,
  .app-shell.sidebar-collapsed .nav-arrow,
  .app-shell.sidebar-collapsed .nav-submenu {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 13px;
  }

  .app-shell.sidebar-collapsed .nav-menu {
    gap: 10px;
    padding: 0;
    overflow: visible;
  }

  .app-shell.sidebar-collapsed .nav-node {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .app-shell.sidebar-collapsed .nav-item {
    width: 56px;
    height: 56px;
    min-height: 56px;
    margin: 0 auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }

  /* Oculta cualquier texto del menú sin ocultar el icono */
  .app-shell.sidebar-collapsed .nav-item span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0 !important;
    line-height: 0;
    overflow: hidden;
  }

  .app-shell.sidebar-collapsed .nav-item i:first-child {
    width: auto;
    min-width: 0;
    font-size: 25px;
    line-height: 1;
    transform: translateZ(0);
  }

  .app-shell.sidebar-collapsed .nav-item:hover {
    transform: translateX(3px) scale(1.04);
    background: rgba(1, 101, 246, .10);
    color: var(--cyc-blue);
  }

  .app-shell.sidebar-collapsed .nav-item.active {
    background: var(--cyc-sky);
    color: var(--cyc-blue);
    box-shadow: inset 0 0 0 2px rgba(1,101,246,.16), 0 10px 22px rgba(1,101,246,.10);
  }

  body[data-theme="dark"] .app-shell.sidebar-collapsed .nav-item:hover,
  body[data-theme="dark"] .app-shell.sidebar-collapsed .nav-item.active {
    background: rgba(1,101,246,.22);
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
  }
}

.sidebar-tooltip {
  animation: sidebarTooltipIn .18s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: left center;
}

@keyframes sidebarTooltipIn {
  from {
    opacity: 0;
    transform: translate(-8px, -50%) scale(.96);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
}

/* ===== CYC ERP v11: flyout de submenús para sidebar reducido ===== */
.collapsed-submenu-flyout {
  position: fixed;
  left: 92px;
  top: 92px;
  z-index: 1200;
  min-width: 380px;
  max-width: min(720px, calc(100vw - 120px));
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--cyc-border);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
  backdrop-filter: blur(14px);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-10px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.collapsed-submenu-flyout.open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.collapsed-submenu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--cyc-border);
}

.collapsed-submenu-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.collapsed-submenu-title span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--cyc-blue), #0ea5e9);
  box-shadow: 0 12px 24px rgba(1, 101, 246, .18);
  flex: 0 0 auto;
}

.collapsed-submenu-title h3 {
  margin: 0;
  font-size: 16px;
  color: var(--cyc-text);
}

.collapsed-submenu-title p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--cyc-muted);
}

.collapsed-submenu-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--cyc-soft);
  color: var(--cyc-text);
  cursor: pointer;
}

.collapsed-submenu-body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  min-height: 260px;
}

.flyout-column {
  padding: 14px;
}

.flyout-column + .flyout-column {
  border-left: 1px solid var(--cyc-border);
  background: rgba(248, 250, 252, .72);
}

.flyout-label {
  display: block;
  margin: 0 0 10px 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyc-muted);
}

.flyout-grid {
  display: grid;
  gap: 9px;
}

.flyout-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cyc-text);
  border-radius: 15px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}

.flyout-item:hover,
.flyout-item.active {
  background: rgba(1, 101, 246, .08);
  border-color: rgba(1, 101, 246, .18);
  color: var(--cyc-blue);
  transform: translateX(2px);
}

.flyout-item .flyout-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--cyc-soft);
  color: currentColor;
  flex: 0 0 auto;
  font-size: 18px;
}

.flyout-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.15;
}

.flyout-item small {
  display: block;
  margin-top: 3px;
  color: var(--cyc-muted);
  font-weight: 700;
}

.flyout-chevron {
  margin-left: auto;
  color: var(--cyc-muted);
}

.flyout-empty {
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cyc-muted);
  border: 1px dashed var(--cyc-border);
  border-radius: 18px;
  padding: 20px;
}

.flyout-empty i {
  display: block;
  font-size: 30px;
  margin-bottom: 8px;
  color: var(--cyc-blue);
}

body[data-theme="dark"] .collapsed-submenu-flyout {
  background: rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

body[data-theme="dark"] .flyout-column + .flyout-column {
  background: rgba(2, 6, 23, .26);
  border-left-color: rgba(148, 163, 184, .16);
}

body[data-theme="dark"] .flyout-item:hover,
body[data-theme="dark"] .flyout-item.active {
  background: rgba(37, 99, 235, .16);
  border-color: rgba(96, 165, 250, .26);
}

@media (max-width: 920px) {
  .collapsed-submenu-flyout { display: none; }
}

/* v14 · Selects buscables tipo Select2 */
/* La ficha (.form-field es display:grid) que contiene un combo buscable debe
   restringir su columna interna a minmax(0,1fr); si no, el <select> mejorado con
   texto largo (p.ej. catalogos SAT de Carta Porte) infla la columna a su
   max-content y se DESBORDA sobre los campos vecinos. */
.form-field:has(.select-search-wrap) {
  grid-template-columns: minmax(0, 1fr);
}

.select-search-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.select-search-wrap > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: 0;
  bottom: 0;
}

.select-search-control {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.select-search-control:hover {
  border-color: rgba(1, 101, 246, .35);
  box-shadow: 0 8px 22px rgba(1, 101, 246, .08);
}

.select-search-wrap.open .select-search-control {
  border-color: rgba(1, 101, 246, .55);
  box-shadow: 0 0 0 4px rgba(1, 101, 246, .10);
}

.select-search-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 750;
  color: var(--cyc-text);
}

.select-search-placeholder {
  color: var(--cyc-muted);
  font-weight: 650;
}

.select-search-arrow {
  color: var(--cyc-muted);
  font-size: 12px;
  transition: transform .16s ease;
}

.select-search-wrap.open .select-search-arrow {
  transform: rotate(180deg);
}

.select-search-menu {
  position: absolute;
  z-index: 5000;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(18, 35, 46, .16);
  padding: 10px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.select-search-wrap.open .select-search-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.select-search-inputbox {
  position: relative;
  margin-bottom: 8px;
}

.select-search-inputbox i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyc-muted);
  font-size: 13px;
}

.select-search-input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--cyc-border);
  border-radius: 12px;
  background: var(--cyc-bg);
  color: var(--cyc-text);
  padding: 0 12px 0 36px;
  outline: none;
  font-weight: 700;
}

.select-search-input:focus {
  border-color: rgba(1, 101, 246, .55);
  box-shadow: 0 0 0 3px rgba(1, 101, 246, .10);
}

.select-search-options {
  max-height: 235px;
  overflow: auto;
  display: grid;
  gap: 5px;
  padding-right: 2px;
}

.select-search-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--cyc-text);
  text-align: left;
  border-radius: 12px;
  padding: 10px 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
  font-weight: 750;
}

/* Cada opción en UNA sola línea con elipsis: evita menús altísimos cuando las
   opciones son largas (p.ej. catálogos SAT de Carta Porte con descripciones). */
.select-search-option > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-search-option:hover,
.select-search-option.active {
  background: rgba(1, 101, 246, .10);
  color: var(--cyc-blue);
  transform: translateX(2px);
}

.select-search-option.disabled {
  opacity: .48;
  pointer-events: none;
}

.select-search-option i {
  width: 18px;
  text-align: center;
  font-size: 12px;
  opacity: 0;
}

.select-search-option.active i {
  opacity: 1;
}

.select-search-empty {
  padding: 18px 12px;
  color: var(--cyc-muted);
  text-align: center;
  font-weight: 750;
  border: 1px dashed var(--cyc-border);
  border-radius: 12px;
}

body[data-theme="dark"] .select-search-control,
body[data-theme="dark"] .select-search-menu {
  background: #111c28;
  border-color: rgba(148, 163, 184, .20);
}

body[data-theme="dark"] .select-search-input {
  background: rgba(2, 6, 23, .36);
  border-color: rgba(148, 163, 184, .18);
}

body[data-theme="dark"] .select-search-menu {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

@media (max-width: 640px) {
  .select-search-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: calc(14px + var(--safe-bottom));
    border-radius: 20px;
    padding: 12px;
  }

  .select-search-options {
    max-height: 48vh;
  }
}

/* El menú del select buscable es position:absolute y el cuerpo de los modales
   tiene overflow:auto, así que en modales cortos (p.ej. Cancelar CFDI, que solo
   tiene un campo) el desplegable se veía cortado. Mientras hay un select
   abierto se le da al cuerpo el espacio que necesita el menú: en modales cortos
   el modal crece y se ve completo; en los largos solo agrega scroll al final.
   Alto máximo del menú ~ 8 (offset) + 20 (padding) + 46 (buscador) + 8 +
   235 (max-height de las opciones) = ~317px.
   No aplica en móvil (<=640px): ahí el menú ya es position:fixed y no se recorta. */
@media (min-width: 641px) {
  .detail-body:has(.select-search-wrap.open),
  .edit-panel:has(.select-search-wrap.open) {
    padding-bottom: 320px;
  }
}


/* v16 · Corrección de búsqueda en selects: evita que la lupa se encime con el texto */
.select-search-inputbox {
  position: relative;
  display: block;
}

.select-search-inputbox i {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  color: var(--cyc-muted);
  font-size: 15px;
  line-height: 1;
}

.select-search-input {
  padding-left: 52px !important;
  padding-right: 14px !important;
  box-sizing: border-box;
}

.select-search-input::placeholder {
  color: var(--cyc-muted);
  opacity: .78;
}

@media (max-width: 640px) {
  .select-search-inputbox i {
    left: 18px !important;
    font-size: 16px;
  }

  .select-search-input {
    height: 48px;
    padding-left: 54px !important;
    font-size: 16px;
  }
}


/* v17 - alta rápida desde botón plus */
.btn-icon-only {
  width: 58px;
  min-width: 58px;
  padding: 0;
  border-radius: 16px;
  font-size: 18px;
}

.edit-modal.add-mode .edit-tabs {
  display: none;
}

.edit-modal.add-mode .edit-body {
  grid-template-columns: 1fr;
}

.edit-modal.add-mode .edit-panel {
  border-left: 0;
}

.edit-modal.add-mode #btnSaveEdit {
  background: var(--cyc-green);
  box-shadow: 0 12px 22px rgba(23, 177, 104, .18);
}

.edit-modal.add-mode #btnSaveEdit:hover {
  filter: brightness(.96);
}

.edit-modal.add-mode .edit-header p {
  color: var(--cyc-muted);
}

@media (max-width: 720px) {
  .btn-icon-only {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .edit-modal.add-mode .edit-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}

/* ===== CYC ERP v19: modal para agregar partida ===== */
.modal-plus-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  font-size: 16px;
}

.empty-details {
  height: 180px;
  text-align: center !important;
  color: var(--cyc-muted);
}
.empty-details i {
  display: block;
  margin-bottom: 10px;
  font-size: 28px;
  color: var(--cyc-blue);
}
.empty-details b,
.empty-details span {
  display: block;
}
.mini-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  font-weight: 600;
}

.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
}
.detail-modal.open { display: block; }

/* Modal "Más filtros" (eventos/tareas/tickets): rejilla de campos + checks y el
   badge con el número de filtros activos sobre el botón de la toolbar. */
.filters-body { display: flex; flex-direction: column; gap: 16px; }
.filters-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.filters-checks { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--cyc-border); padding-top: 14px; }
.filters-checks .check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; }
.filters-checks .check-row input { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 560px) { .filters-grid { grid-template-columns: 1fr; } }
.btn.has-filters { position: relative; }
.filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--cyc-blue); color: #fff; font-size: .72rem; font-weight: 700; }

/* Select2 múltiple dentro del modal de filtros (cliente/integrante/servicio).
   Mismo tema que incexp; el width:100% forzado evita que quede en 0px al
   inicializarse dentro de un contenedor oculto. */
.filters-body .select2-container { width: 100% !important; }
.filters-body .select2-selection--multiple,
.select2-container--default .select2-selection--multiple { min-height: 42px; padding: 2px 4px; border: 1px solid var(--cyc-border); border-radius: 10px; background: var(--cyc-card); }
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--cyc-blue); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 4px 4px 0 0; padding: 2px 8px; border: 0; border-radius: 7px; background: var(--cyc-blue); color: #fff; font-size: 12px; font-weight: 700; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255,255,255,.8); margin-right: 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; }
.select2-container--default .select2-search--inline .select2-search__field { color: var(--cyc-text); margin-top: 6px; }
.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--cyc-muted); margin-top: 6px; }
.select2-dropdown { border: 1px solid var(--cyc-border); background: var(--cyc-card); color: var(--cyc-text); }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--cyc-border); border-radius: 8px; background: var(--cyc-bg); color: var(--cyc-text); }
.select2-container--default .select2-results__option { color: var(--cyc-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--cyc-blue); color: #fff; }
/* El dropdown se ancla al modal; que quede por encima del diálogo. */
.select2-container { z-index: 100040; }
.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,18,25,.58);
  backdrop-filter: blur(5px);
}
.detail-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 28px));
  max-height: min(92vh, 760px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  transition: width .18s ease, height .18s ease;
  overflow: hidden;
  border: 1px solid var(--cyc-border);
  border-radius: 24px;
  background: var(--cyc-card);
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
  animation: detailPop .18s ease-out;
}
@keyframes detailPop {
  from { transform: translate(-50%, -47%) scale(.98); opacity: .2; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ===== Modal partida: botón MAXIMIZAR + panel lateral de partidas agregadas =====
   El diálogo pasó de grid (3 filas) a flex (fila): .detail-main lleva ahora el
   grid header/body/footer; .detail-side es la tabla, oculta salvo al maximizar. */
/* Solo el modal de PARTIDA usa layout flex (para el split lista/form); los demás
   detail-modals conservan el grid base (header/body/footer). */
#detailModal .detail-dialog { display: flex; }
.detail-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.detail-header-actions { display: flex; align-items: center; gap: 6px; }
/* Footer del modal partida: Regresar a la izquierda, acciones agrupadas a la derecha. */
.detail-footer-split { justify-content: flex-end; }
.detail-footer-split [data-close-detail] { margin-right: auto; }
/* Ficha del producto (modal solo lectura, se abre desde la pestaña Partidas). */
/* Por encima del modal Ver (z-index 1600) para que no quede detrás al abrirla desde ahí. */
#productInfoModal { z-index: 1700; }
.prodinfo-dialog { width: min(720px, calc(100vw - 28px)); }
.prodinfo-loading { padding: 30px 18px; text-align: center; color: var(--cyc-muted); }
.pinfo-top { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.pinfo-image { width: 160px; height: 160px; flex: 0 0 auto; border: 1px solid var(--cyc-border); border-radius: 14px; background: var(--cyc-card); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--cyc-muted); font-size: 42px; }
.pinfo-image img { width: 100%; height: 100%; object-fit: cover; }
.pinfo-fields { flex: 1 1 260px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.pinfo-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pinfo-field span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--cyc-muted); font-weight: 700; }
.pinfo-field b { color: var(--cyc-text); word-break: break-word; }
.pinfo-section { margin-top: 20px; }
.pinfo-section h4 { margin: 0 0 8px; font-size: 12px; color: var(--cyc-muted); text-transform: uppercase; letter-spacing: .03em; }
.pinfo-section p { margin: 0; color: var(--cyc-text); line-height: 1.5; }
.pinfo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pinfo-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: rgba(1,101,246,.1); color: var(--cyc-blue); font-weight: 700; font-size: 12px; }
.pinfo-chip.muted { background: var(--cyc-bg); color: var(--cyc-muted); }
.detail-prod-link { cursor: pointer; }
.detail-prod-link:hover { color: var(--cyc-blue); text-decoration: underline; }
@media (max-width: 560px) { .pinfo-fields { grid-template-columns: 1fr; } }
.detail-side { display: none; }
.detail-dialog.maximized {
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: none;
}
.detail-dialog.maximized .detail-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  order: 2;               /* la lista va a la DERECHA (después del form) */
  width: 66.667%;         /* lista 2/3; el form (main, flex:1) queda a 1/3 */
  min-width: 0;
  border-left: 1px solid var(--cyc-border);
  background: var(--cyc-bg);
}
.detail-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 18px; font-weight: 800; font-size: 15px;
  border-bottom: 1px solid var(--cyc-border);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.96));
}
.detail-side-head .ds-count {
  min-width: 24px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--cyc-blue); color: #fff; font-size: 12px; font-weight: 700;
}
.detail-side-head .ds-close {
  margin-left: auto; width: 34px; height: 34px; flex: 0 0 auto;
  border: 0; background: transparent; color: var(--cyc-muted); border-radius: 10px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.detail-side-head .ds-close:hover { background: var(--cyc-bg); color: var(--cyc-text); }
.detail-side-body { overflow: auto; padding: 10px 12px; }
/* Buscador de partidas del panel lateral. */
.ds-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 7px 10px; border: 1px solid var(--cyc-border); border-radius: 10px;
  background: var(--cyc-card); color: var(--cyc-muted); }
.ds-search input { flex: 1; border: 0; background: transparent; outline: none;
  color: var(--cyc-text); font-size: 13px; }
.ds-search input::placeholder { color: var(--cyc-muted); }
.ds-noresults { padding: 14px; text-align: center; color: var(--cyc-muted); font-size: 13px; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-table thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 8px; color: var(--cyc-muted); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em;
  background: var(--cyc-bg); border-bottom: 1px solid var(--cyc-border);
}
.ds-table tbody td { padding: 9px 8px; border-bottom: 1px solid var(--cyc-border); vertical-align: top; }
.ds-table tbody tr:hover td { background: rgba(1,101,246,.05); }
.ds-table tbody tr.ds-row { cursor: pointer; }
.ds-table tbody tr.ds-row.active td { background: rgba(1,101,246,.12); }
/* Inputs inline de P/U y Cantidad en el listado (Enter para guardar). */
.ds-inp { width: 88px; max-width: 100%; padding: 4px 6px; border: 1px solid var(--cyc-border); border-radius: 6px; background: var(--cyc-card); color: var(--cyc-text); font-size: 13px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
/* Ocultar las flechitas (spinners) del input number en el listado. */
.ds-inp::-webkit-outer-spin-button, .ds-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Campos CALCULADOS (readonly) del modal partida (Importe, Total Impuestos, Subtotal,
   Total): se ven deshabilitados. P/U y Cantidad NO son readonly, así que no se tocan. */
#detailModal input[readonly] { background: var(--cyc-bg); color: var(--cyc-muted); border-color: var(--cyc-border); cursor: not-allowed; }
#detailModal input[readonly]:focus { box-shadow: none; border-color: var(--cyc-border); }
/* Resumen tipo recibo (sección Totales) del modal partida: filas label ... valor,
   con el Total destacado. Los inputs siguen siendo readonly (mismos id) pero se
   ven transparentes (anula el gris de arriba con mayor especificidad). */
.detail-summary { border: 1px solid var(--cyc-border); border-radius: 12px; overflow: hidden; background: var(--cyc-card); max-width: 440px; }
.dsum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; margin: 0; }
.dsum-row + .dsum-row { border-top: 1px solid var(--cyc-border); }
.dsum-row > span { color: var(--cyc-muted); font-weight: 600; font-size: 13px; }
#detailModal .dsum-row input { border: 0; background: transparent; text-align: right; font-weight: 700; color: var(--cyc-text); width: auto; max-width: 200px; padding: 0; font-size: 15px; cursor: default; box-shadow: none; }
.dsum-row.dsum-total { background: var(--cyc-bg); }
.dsum-row.dsum-total > span { color: var(--cyc-text); font-weight: 800; font-size: 14px; }
#detailModal .dsum-row.dsum-total input { color: var(--cyc-blue); font-size: 18px; font-weight: 800; }
/* Distribución del form de partida en secciones (Producto / Precio y cantidad /
   Descuento e impuestos / Descripción / Totales). */
.detail-body > .detail-section:first-of-type { margin-top: 6px; }
/* P/U × Cantidad = Importe, presentado como una operación. */
.price-qty-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: end; }
.pq-op { align-self: end; padding-bottom: 11px; color: var(--cyc-muted); font-weight: 800; font-size: 16px; line-height: 1; }
/* Descuento + Impuestos lado a lado. */
.tax-disc-grid { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 560px) {
  .price-qty-row { grid-template-columns: 1fr; }
  .price-qty-row .pq-op { display: none; }
  .tax-disc-grid { grid-template-columns: 1fr; }
}
.ds-inp:focus { border-color: var(--cyc-blue); outline: none; box-shadow: 0 0 0 2px rgba(1,101,246,.18); }
.ds-table .ds-num { text-align: right; white-space: nowrap; }
/* inline-block (no block) para que el link ocupe solo el ancho del TEXTO: así se
   activa la ficha solo al hacer clic en el nombre, no en toda la celda/fila. */
.ds-table .ds-prod b { display: inline-block; max-width: 100%; }
.ds-table .ds-prod small { display: block; color: var(--cyc-muted); margin-top: 2px; }
.ds-table .ds-empty { text-align: center; color: var(--cyc-muted); padding: 26px 8px; }
.detail-side-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--cyc-border); font-weight: 700;
  background: var(--cyc-card);
}
.detail-side-foot b { color: var(--cyc-text); }
body[data-theme="dark"] .detail-side-head,
body[data-theme="dark"] .detail-side-foot {
  background: linear-gradient(180deg, rgba(20,31,40,.98), rgba(16,25,33,.96));
}
body[data-theme="dark"] .detail-dialog.maximized .detail-side { background: var(--cyc-bg); }
body[data-theme="dark"] .ds-table thead th { background: var(--cyc-bg); }
/* Maximizar en móvil: pantalla completa; el panel se apila arriba. */
@media (max-width: 760px) {
  .detail-dialog.maximized {
    inset: 0; top: 0; left: 0; transform: none;
    width: 100vw; height: 100dvh; border-radius: 0; flex-direction: column;
  }
  .detail-dialog.maximized .detail-side {
    width: auto; max-height: 42vh;
    border-left: 0; border-top: 1px solid var(--cyc-border);
  }
}

.detail-header,
.detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cyc-border);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.96));
}
.detail-footer {
  border-top: 1px solid var(--cyc-border);
  border-bottom: 0;
  justify-content: flex-end;
}
.detail-header h2 {
  margin: 4px 0 0;
  font-size: 20px;
  letter-spacing: -.02em;
}
.detail-header p {
  margin: 4px 0 0;
  color: var(--cyc-muted);
}
.detail-body {
  min-height: 0;
  overflow: auto;
  padding: 20px;
  background: var(--cyc-bg);
}
.detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Selector de impuestos de la partida (chips desde el catálogo de la empresa). */
.detail-tax-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 6px 4px;
}
.detail-tax-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--cyc-border);
  border-radius: 999px;
  background: var(--soft-bg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.detail-tax-chip:hover { border-color: rgba(1, 101, 246, .4); }
.detail-tax-chip small { color: var(--cyc-muted); font-weight: 700; }
.detail-tax-chip input { accent-color: var(--cyc-blue); margin: 0; }
.detail-tax-chip.disabled { opacity: .5; cursor: not-allowed; }
.detail-tax-chip.disabled:hover { border-color: var(--cyc-border); }
.detail-tax-chip.disabled input { cursor: not-allowed; }
.detail-tax-empty { color: var(--cyc-muted); font-size: 12px; font-style: italic; padding: 8px 4px; }
.detail-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cyc-border);
}
.detail-section h3 {
  margin: 0 0 14px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tax-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px;
  align-items: center;
  gap: 12px;
}
.check-field {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cyc-text);
  font-weight: 800;
}
.check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--cyc-blue);
}
.tax-row input,
.totals-grid input {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--cyc-border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  outline: 0;
}
.totals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 280px;
  margin-left: auto;
}
body[data-theme="dark"] .detail-header,
body[data-theme="dark"] .detail-footer {
  background: linear-gradient(180deg, rgba(20,31,40,.98), rgba(16,25,33,.96));
}
body[data-theme="dark"] .detail-body { background: var(--cyc-bg); }

@media (max-width: 760px) {
  .detail-dialog {
    inset: auto 0 0 0;
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    transform: none;
    border-radius: 24px 24px 0 0;
    animation: detailSheet .2s ease-out;
  }
  @keyframes detailSheet {
    from { transform: translateY(24px); opacity: .35; }
    to { transform: translateY(0); opacity: 1; }
  }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid .field-span-4 { grid-column: span 2; }
  .tax-row { grid-template-columns: 1fr; }
  .totals-grid { max-width: none; }
  .detail-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .detail-footer .btn { width: 100%; }
}

@media (max-width: 460px) {
  .detail-header,
  .detail-body,
  .detail-footer { padding: 14px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .field-span-4 { grid-column: span 1; }
  .detail-footer { grid-template-columns: 1fr; }
}

/* v20: descuento por monto/porcentaje y detalles en tarjetas móviles */
.discount-net-field input[readonly] {
  background: rgba(1, 101, 246, .06);
  color: var(--cyc-blue);
  font-weight: 900;
}

.discount-type-field .search-select-trigger {
  min-height: 43px;
}

@media (max-width: 760px) {
  .details-responsive {
    overflow: visible;
  }

  .details-table {
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .details-table thead {
    display: none;
  }

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

  .details-table tr {
    padding: 14px;
    border: 1px solid var(--cyc-border);
    border-radius: 18px;
    background: var(--cyc-card);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .05);
  }

  .details-table td {
    border: 0 !important;
    padding: 8px 0 !important;
    display: grid;
    grid-template-columns: minmax(88px, 35%) 1fr;
    gap: 10px;
    align-items: center;
    text-align: right;
  }

  .details-table td::before {
    content: attr(data-label);
    color: var(--cyc-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
  }

  .details-table .detail-product-cell {
    display: block;
    text-align: left;
    padding-bottom: 12px !important;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--cyc-border) !important;
  }

  .details-table .detail-product-cell::before {
    display: none;
  }

  .details-table td[data-label="Acción"] {
    grid-template-columns: 1fr auto;
    padding-top: 12px !important;
  }

  .details-table td[data-label="Acción"] .square-btn {
    justify-self: end;
  }
}

@media (max-width: 460px) {
  .detail-grid .discount-type-field,
  .detail-grid .discount-value-field,
  .detail-grid .discount-net-field {
    grid-column: span 1;
  }
}

/* ===== CYC ERP v21: detalle móvil en tarjetas reales + descuento por modal ===== */
.discount-open-control {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "amount icon" "meta icon";
  align-items: center;
  gap: 2px 10px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  padding: 10px 14px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.discount-open-control:hover,
.discount-open-control:focus-visible {
  border-color: var(--cyc-blue);
  box-shadow: 0 0 0 4px rgba(1,101,246,.10);
  outline: 0;
}
.discount-open-control b {
  grid-area: amount;
  font-size: 16px;
  font-weight: 950;
  color: var(--cyc-blue);
}
.discount-open-control small {
  grid-area: meta;
  color: var(--cyc-muted);
  font-weight: 800;
}
.discount-open-control i {
  grid-area: icon;
  color: var(--cyc-muted);
}

.discount-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
}
.discount-modal.open { display: block; }
.discount-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,18,25,.50);
  backdrop-filter: blur(5px);
}
.discount-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100vw - 28px));
  max-height: min(90vh, 680px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--cyc-border);
  border-radius: 24px;
  background: var(--cyc-card);
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
  animation: detailPop .18s ease-out;
}
.discount-header,
.discount-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cyc-border);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.96));
}
.discount-footer { border-top: 1px solid var(--cyc-border); border-bottom: 0; justify-content: flex-end; }
.discount-header h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.02em; }
.discount-header p { margin: 4px 0 0; color: var(--cyc-muted); }
.discount-body { min-height: 0; overflow: auto; padding: 20px; background: var(--cyc-bg); }
.discount-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.discount-mode-card {
  min-height: 118px;
  border: 1px solid var(--cyc-border);
  border-radius: 18px;
  padding: 14px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.discount-mode-card i { font-size: 20px; color: var(--cyc-blue); margin-bottom: 10px; }
.discount-mode-card b,
.discount-mode-card span { display: block; }
.discount-mode-card b { font-weight: 950; }
.discount-mode-card span { margin-top: 4px; color: var(--cyc-muted); font-weight: 700; font-size: 12px; line-height: 1.35; }
.discount-mode-card.active {
  border-color: rgba(1,101,246,.35);
  background: rgba(1,101,246,.08);
  box-shadow: 0 0 0 4px rgba(1,101,246,.08);
}
.discount-modal-value { margin-top: 16px; }
.discount-preview {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--cyc-border);
  border-radius: 16px;
  background: var(--cyc-card);
}
.discount-preview span { color: var(--cyc-muted); font-weight: 800; }
.discount-preview b,
.discount-preview strong { color: var(--cyc-text); font-weight: 950; }
.discount-preview strong { color: var(--cyc-blue); }
body[data-theme="dark"] .discount-header,
body[data-theme="dark"] .discount-footer { background: linear-gradient(180deg, rgba(20,31,40,.98), rgba(16,25,33,.96)); }
body[data-theme="dark"] .discount-body { background: var(--cyc-bg); }

@media (max-width: 760px) {
  .details-responsive {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
  }
  .details-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-spacing: 0 12px;
  }
  .details-table tbody { width: 100%; }
  .details-table tr {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .details-table .detail-product-cell b {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
  }
  .details-table .detail-product-cell small {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .details-table td:not(.detail-product-cell) {
    grid-template-columns: minmax(92px, 42%) minmax(0, 1fr);
    text-align: right;
    overflow: hidden;
  }
  .details-table td:not(.detail-product-cell) > *:not(:first-child),
  .details-table td:not(.detail-product-cell) b {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .details-table td[data-label="Acción"] {
    grid-template-columns: 1fr auto;
  }
  .discount-dialog {
    inset: auto 0 0 0;
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    transform: none;
    border-radius: 24px 24px 0 0;
    animation: detailSheet .2s ease-out;
  }
  .discount-footer { display: grid; grid-template-columns: 1fr 1fr; }
  .discount-footer .btn { width: 100%; }
}

@media (max-width: 460px) {
  .discount-header,
  .discount-body,
  .discount-footer { padding: 14px; }
  .discount-mode-grid { grid-template-columns: 1fr; }
  .discount-footer { grid-template-columns: 1fr; }
}

/* ===== CYC ERP v22: modal partida 3x2 + tarjetas móviles reales ===== */
.detail-modal .detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.detail-modal .detail-grid > .field-span-4 {
  grid-column: 1 / -1;
}
.detail-modal .detail-grid .discount-net-field,
.detail-modal .detail-grid .tax-rate-field,
.detail-modal .detail-grid .tax-amount-field {
  grid-column: span 1;
}
.detail-modal .tax-rate-field span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.detail-modal .tax-rate-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cyc-blue);
}
.detail-modal .detail-section:first-of-type {
  margin-top: 18px;
}

.details-card-list {
  display: none;
}

@media (max-width: 760px) {
  .detail-modal .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-modal .detail-grid > .field-span-4 {
    grid-column: 1 / -1;
  }
  .detail-modal .detail-grid .discount-net-field,
  .detail-modal .detail-grid .tax-rate-field,
  .detail-modal .detail-grid .tax-amount-field {
    grid-column: span 1;
  }

  .details-responsive {
    display: none !important;
  }
  .details-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .detail-mobile-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--cyc-border);
    border-radius: 18px;
    background: var(--cyc-card);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .05);
    padding: 14px;
  }
  .detail-mobile-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--cyc-border);
  }
  .detail-mobile-card-head b {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    font-size: 14px;
  }
  .detail-mobile-desc {
    margin: -2px 0 12px;
    color: var(--cyc-muted);
    font-weight: 750;
    overflow-wrap: anywhere;
  }
  .detail-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .detail-mobile-grid span {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--cyc-border);
    border-radius: 14px;
    background: rgba(245, 249, 255, .72);
  }
  body[data-theme="dark"] .detail-mobile-grid span {
    background: rgba(255, 255, 255, .035);
  }
  .detail-mobile-grid small {
    display: block;
    margin-bottom: 4px;
    color: var(--cyc-muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .detail-mobile-grid strong {
    display: block;
    min-width: 0;
    color: var(--cyc-text);
    font-size: 14px;
    font-weight: 950;
    overflow-wrap: anywhere;
  }
  .detail-mobile-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cyc-border);
  }
  .detail-mobile-total span {
    color: var(--cyc-muted);
    font-weight: 900;
  }
  .detail-mobile-total b {
    color: var(--cyc-blue);
    font-weight: 950;
  }
  .detail-mobile-empty {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cyc-border);
    border-radius: 18px;
    background: var(--cyc-card);
    padding: 22px;
  }
}

@media (max-width: 460px) {
  .detail-modal .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-modal .detail-grid .discount-net-field,
  .detail-modal .detail-grid .tax-rate-field,
  .detail-modal .detail-grid .tax-amount-field {
    grid-column: 1 / -1;
  }
  .detail-mobile-grid {
    grid-template-columns: 1fr;
  }
}

/* v23: búsqueda funcional en detalles */
.detail-filter-hidden { display: none !important; }
.details-search-empty {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  margin-top: 12px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255,255,255,.5);
  text-align: center;
}
.details-search-empty.show { display: flex; }
.details-search-empty i { font-size: 24px; opacity: .75; }
.details-search-empty b { color: var(--text); }
body.dark .details-search-empty { background: rgba(255,255,255,.04); }

/* v24: acciones de partidas */
.detail-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
.detail-mobile-card .detail-actions{
  justify-content:flex-end;
  flex-shrink:0;
}
.detail-mobile-card-head{
  gap:10px;
}
.detail-mobile-card-head > b{
  min-width:0;
  overflow-wrap:anywhere;
}

/* ===== CYC ERP v26: pagos con modal + listado tipo detalles ===== */
.payment-modal .payment-dialog {
  width: min(760px, calc(100vw - 28px));
}
.payment-modal .payment-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.payment-modal .payment-grid > .field-span-4 {
  grid-column: 1 / -1;
}
.payments-card-list {
  display: none;
}
.payments-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  font-weight: 600;
}
@media (max-width: 900px) {
  .payment-modal .payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-modal .payment-grid > .field-span-4 {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .payments-responsive {
    display: none !important;
  }
  .payments-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .payment-mobile-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 460px) {
  .payment-modal .payment-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CYC ERP v27: pago modal responsive refinado ===== */
.payment-modal .payment-dialog {
  width: min(960px, calc(100vw - 32px));
  max-height: min(92dvh, 780px);
}

.payment-modal .payment-body {
  overflow-x: hidden;
}

.payment-modal .payment-grid,
.payment-modal .payment-grid > .form-field {
  min-width: 0;
}

.payment-modal .payment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start;
}

.payment-modal .payment-grid > .field-span-4 {
  grid-column: 1 / -1;
}

.payment-modal .form-field input,
.payment-modal .form-field textarea,
.payment-modal .custom-select-toggle,
.payment-modal .date-control-wrap {
  min-width: 0;
  max-width: 100%;
}

.payment-modal .custom-select-toggle,
.payment-modal .date-control-wrap,
.payment-modal .form-field input {
  min-height: 52px;
  border-radius: 14px;
}

.payment-modal .form-field textarea {
  min-height: 96px;
  border-radius: 14px;
}

.payment-modal .detail-footer {
  padding: 16px 20px;
}

/* Selector "Enviar como" (adjuntar archivos / enviar por link) del modal de correo */
.email-send-mode {
  display: flex;
  gap: 10px;
}
.email-send-mode .send-mode-opt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.email-send-mode .send-mode-opt i { color: var(--cyc-muted); }
/* Resetea el radio (la regla .payment-modal .form-field input le pone 52px/radio grande) */
.email-send-mode .send-mode-opt input {
  accent-color: var(--cyc-blue);
  margin: 0;
  width: 18px;
  height: 18px;
  min-height: 0;
  min-width: 0;
  border-radius: 50%;
  flex: 0 0 auto;
}
.email-send-mode .send-mode-opt.checked {
  border-color: var(--cyc-blue);
  box-shadow: inset 0 0 0 1px var(--cyc-blue);
  background: rgba(1, 101, 246, .06);
}
.email-send-mode .send-mode-opt.checked i { color: var(--cyc-blue); }

/* Parámetros › Fiscal (panel del modal de documento) */
.params-subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
  border-bottom: 1px solid var(--cyc-border);
  padding-bottom: 10px;
}
.params-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--cyc-border);
  border-radius: 12px;
  background: var(--cyc-card);
  color: var(--cyc-muted);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
.params-subtab.active {
  background: var(--cyc-blue);
  border-color: var(--cyc-blue);
  color: #fff;
}
.fiscal-section { margin-bottom: 26px; }
.fiscal-section .panel-head { margin-bottom: 12px; }
/* Toggle "Es factura global" del tab Parámetros › Fiscal. */
.fiscal-global-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 700; color: var(--cyc-text); }
.fiscal-global-toggle input { width: 17px; height: 17px; accent-color: var(--cyc-blue); cursor: pointer; }

/* Aviso SAT en el modal de partida (nota de crédito sin PRODASER permitido). */
.detail-credit-warn { margin-bottom: 14px; }
.detail-credit-warn-body {
  display: flex; gap: 12px; align-items: flex-start;
  background: color-mix(in srgb, var(--cyc-yellow) 14%, var(--cyc-card));
  border: 1px solid color-mix(in srgb, var(--cyc-yellow) 55%, var(--cyc-border));
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.detail-credit-warn-body > i { color: var(--cyc-yellow); font-size: 1.3rem; margin-top: 1px; }
.detail-credit-warn-body strong { display: block; color: var(--cyc-text); margin-bottom: 4px; }
.detail-credit-warn-body p { margin: 0 0 10px; color: var(--cyc-muted); font-size: .88rem; line-height: 1.4; }
.detail-credit-warn-body b { color: var(--cyc-text); }
.fiscal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}

@media (min-width: 1180px) {
  .payment-modal .payment-dialog {
    width: min(1040px, calc(100vw - 56px));
  }

  .payment-modal .payment-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .payment-modal .payment-grid > .field-span-4 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .payment-modal .payment-dialog {
    inset: auto 0 0 0;
    top: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    transform: none;
    border-radius: 24px 24px 0 0;
    /* Flex column en móvil: el grid con minmax(0,1fr) bajo max-height (sin
       height definido) NO obliga al body a hacer scroll en iOS Safari — el
       contenido desborda y overflow:hidden recorta el footer (botón Enviar
       "en blanco"). Con flex + body(flex:1;min-height:0) el body scrollea y
       el footer queda fijo abajo. */
    display: flex;
    flex-direction: column;
  }

  .payment-modal .payment-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .payment-modal .payment-grid > .field-span-4 {
    grid-column: 1;
  }

  .payment-modal .detail-header {
    padding: 18px 18px 14px;
  }

  /* El diálogo ya es grid (header/body/footer = auto/1fr/auto) con max-height
     92dvh y overflow:hidden: el body (1fr) hace scroll y el footer (auto) queda
     fijo abajo solo. NO capar el body ni usar sticky: en iOS real el header es
     más alto que el 154px asumido, header+body+footer > 92dvh y overflow:hidden
     recortaba el footer (el botón Enviar "se veía en blanco"). */
  .payment-modal .payment-body {
    padding: 18px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .payment-modal .detail-footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: var(--cyc-card);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .08);
  }

  .payment-modal .detail-footer .btn {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .payment-modal .detail-header h2 {
    font-size: 20px;
  }

  .payment-modal .detail-header p {
    font-size: 14px;
  }

  .payment-modal .custom-select-toggle,
  .payment-modal .date-control-wrap,
  .payment-modal .form-field input {
    min-height: 50px;
  }
}

/* ===== CYC ERP v29: información adicional con modal + listado tipo detalles ===== */
.additional-card-list {
  display: none;
}
.additional-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  font-weight: 600;
}
.additional-grid .field-span-2 {
  grid-column: span 2;
}
/* Deja aire para que el buscador de concepto (dropdown absoluto) no quede
   recortado ni amontonado contra el footer del modal. */
.additional-modal .payment-body {
  min-height: 380px;
}
@media (max-width: 900px) {
  .additional-grid .field-span-2 {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .additional-responsive {
    display: none !important;
  }
  .additional-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .additional-mobile-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ===== CYC ERP v30: items relacionados con modal + listado tipo detalles ===== */
.related-items-card-list {
  display: none;
}
.related-items-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  font-weight: 600;
  line-height: 1.35;
}
.related-item-grid .field-span-2 { grid-column: span 2; }
.related-item-grid .field-span-3 { grid-column: span 3; }
@media (max-width: 900px) {
  .related-item-grid .field-span-2,
  .related-item-grid .field-span-3 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .related-items-responsive { display: none !important; }
  .related-items-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .related-item-mobile-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}


/* ===== CYC ERP v31: documentos relacionados con modal + listado tipo detalles ===== */
.related-docs-card-list { display: none; }
.related-docs-table td small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  font-weight: 600;
  line-height: 1.35;
}
/* Documentos relacionados (solo lectura): chip de tipo de documento y aviso
   para los tipos que todavía no tienen página propia en el front. */
.rel-doc-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cyc-soft);
  color: var(--cyc-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}
.rel-doc-noaction {
  color: var(--cyc-muted);
  font-size: 12px;
  font-weight: 600;
}
/* Nota de la relación y relaciones partida-a-partida anidadas */
.rel-doc-note { color: var(--cyc-orange, #d98324); font-weight: 600; }
.rel-doc-details {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.rel-doc-detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--cyc-border);
  border-radius: 10px;
  background: var(--cyc-soft);
}
.rel-doc-detail-text {
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.4;
}
.rel-doc-detail-text i { color: var(--cyc-muted); font-style: normal; }
.reldoc-grid .field-span-4 { grid-column: 1 / -1; }
.reldoc-modal input[readonly] { background: var(--cyc-soft); cursor: default; }

/* Archivos del CFDI (facturas): tabla de solo lectura bajo Archivos */
#docCfdiFilesMount { margin-top: 18px; }
.cfdi-files-table td small {
  display: block;
  margin-top: 3px;
  color: var(--cyc-muted);
  font-weight: 600;
}
.cfdi-file-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--cyc-blue);
}

/* Pagos de documentos relacionados */
.panel-head-actions { display: flex; align-items: center; gap: 8px; }
.relpay-modal .payment-dialog { max-width: 900px; }
.relpay-table td small {
  display: block;
  margin-top: 3px;
  color: var(--cyc-muted);
  font-weight: 600;
}
.relpay-table td.r, .relpay-table th.r { text-align: right; }
@media (max-width: 760px) {
  .related-docs-responsive { display: none !important; }
  .related-docs-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .related-doc-mobile-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ===== CYC ERP v32: Fotos con modal + listado tipo detalles ===== */
.photos-card-list {
  display: none;
}
.photos-table .photo-thumb {
  width: 54px;
  height: 42px;
}
.photo-thumb {
  --photo-color: #0ea5e9;
  width: 64px;
  height: 52px;
  border: 1px solid var(--cyc-border);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--photo-color) 22%, transparent), color-mix(in srgb, var(--photo-color) 8%, #fff));
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--photo-color);
}
.photo-thumb.large {
  width: 100%;
  min-height: 210px;
  max-height: 280px;
  border-radius: 18px;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.photo-thumb i {
  font-size: 22px;
}
.photo-thumb.large i {
  font-size: 54px;
}
.photo-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(92dvh, 760px);
}
.photo-modal-layout {
  display: grid;
  gap: 18px;
}
.photo-preview-panel {
  border: 1px solid var(--cyc-border);
  border-radius: 20px;
  padding: 12px;
  background: var(--cyc-card);
}
.photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.photo-grid > .field-span-4 {
  grid-column: 1 / -1;
}
.photo-mobile-card .photo-thumb.large {
  min-height: 170px;
  margin-bottom: 12px;
}
body[data-theme="dark"] .photo-thumb img {
  background: #111c24;
}
@media (max-width: 760px) {
  .photos-responsive {
    display: none !important;
  }
  .photos-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .photo-dialog {
    width: min(100vw - 16px, 520px);
    max-height: calc(100dvh - 16px);
    border-radius: 24px;
  }
  .photo-grid {
    grid-template-columns: 1fr;
  }
  .photo-thumb.large {
    min-height: 190px;
    max-height: 240px;
  }
}

/* ===== CYC ERP v33: Archivos igual que fotos, sin vista previa ===== */
.files-card-list {
  display: none;
}
.file-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--cyc-border);
  border-radius: 12px;
  background: var(--cyc-soft);
  color: var(--cyc-primary);
  font-weight: 900;
  max-width: max-content;
}
.file-badge i {
  font-size: 18px;
}
.file-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(92dvh, 720px);
}
.file-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.file-grid > .field-span-4 {
  grid-column: 1 / -1;
}
.file-grid > .field-span-2 {
  grid-column: span 2;
}
.file-newdescr .file-newdescr-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.file-newdescr .file-newdescr-row input {
  flex: 1;
  min-width: 0;
}

/* Dropzone de subida de archivo (reemplaza el input file nativo) */
.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: 18px;
  border: 2px dashed var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-bg, rgba(0,0,0,.02));
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.file-drop:hover {
  border-color: var(--cyc-blue);
  background: rgba(1,101,246,.05);
}
.file-drop.is-dragover {
  border-color: var(--cyc-blue);
  background: rgba(1,101,246,.09);
}
.file-drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.file-drop-icon {
  font-size: 30px;
  color: var(--cyc-blue);
}
.file-drop-text {
  font-size: 14px;
  color: var(--cyc-text);
}
.file-drop-text b { color: var(--cyc-blue); }
.file-drop-hint {
  font-size: 12px;
  color: var(--cyc-text-soft, #8a94a3);
}
.file-drop-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cyc-card);
  border: 1px solid var(--cyc-border);
  position: relative;
  z-index: 1;
}
.file-drop-file-icon {
  font-size: 20px;
  color: var(--cyc-blue);
  flex: 0 0 auto;
}
.file-drop-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 14px;
  color: var(--cyc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-drop-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,71,71,.35);
  background: transparent;
  color: #ff4747;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.file-drop-remove:hover { background: rgba(255,71,71,.1); }
body[data-theme="dark"] .file-drop {
  background: rgba(255,255,255,.03);
}

/* ---- Fotos (CYCFiles modo fotos): grid + modal cámara ---- */
.cyc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.cyc-photo {
  position: relative;
  margin: 0;
  border: 1px solid var(--cyc-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cyc-card);
}
.cyc-photo-thumb {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.04);
  cursor: pointer;
  color: #9aa4b2;
  font-size: 30px;
}
.cyc-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyc-photo figcaption {
  padding: 7px 9px;
  font-size: 12px;
  color: var(--cyc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cyc-photo-del {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cyc-photo-del:hover { background: #e5484d; }
body[data-theme="dark"] .cyc-photo-thumb { background: rgba(255,255,255,.05); }

/* Modal de fotos */
.photo-modal .cyc-photo-stage {
  min-height: 190px;
  border: 2px dashed var(--cyc-border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  background: var(--cyc-bg, rgba(0,0,0,.02));
}
.cyc-photo-stage-empty {
  margin: auto;
  color: var(--cyc-text-soft, #8a94a3);
  font-size: 14px;
}
.cyc-photo-stage-item {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cyc-border);
}
.cyc-photo-stage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyc-photo-stage-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.cyc-photo-footer { justify-content: space-between; align-items: center; }
.cyc-photo-pick { display: flex; gap: 8px; }
body[data-theme="dark"] .photo-modal .cyc-photo-stage { background: rgba(255,255,255,.03); }

/* Visor / carrusel de fotos (lightbox) */
/* z-index por encima del modal Ver (1600) y del de edición (90) para que el
   carrusel no quede atrás del modal desde donde se abre. */
.cyc-photo-viewer { position: fixed; inset: 0; z-index: 1700; display: none; }
.cyc-photo-viewer.open { display: block; }
.cyc-pv-backdrop { position: absolute; inset: 0; background: rgba(6,12,20,.92); backdrop-filter: blur(2px); }
.cyc-pv-stage {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 76px; pointer-events: none;
}
.cyc-pv-spin { position: absolute; color: rgba(255,255,255,.6); font-size: 26px; }
.cyc-pv-img {
  max-width: min(92vw, 1100px); max-height: 82vh;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); background: #0b1420;
  pointer-events: auto;
}
.cyc-pv-cap {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  z-index: 2; max-width: 80vw; text-align: center;
  color: rgba(255,255,255,.9); font-size: 14px;
}
.cyc-pv-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700;
  background: rgba(0,0,0,.4); padding: 5px 12px; border-radius: 999px;
}
.cyc-pv-close {
  position: absolute; top: 16px; right: 20px; z-index: 3;
  width: 44px; height: 44px; border-radius: 12px; border: 0;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px; cursor: pointer;
}
.cyc-pv-close:hover { background: rgba(255,255,255,.26); }
.cyc-pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px; cursor: pointer;
  display: grid; place-items: center;
}
.cyc-pv-nav:hover { background: rgba(255,255,255,.3); }
.cyc-pv-prev { left: 18px; }
.cyc-pv-next { right: 18px; }
@media (max-width: 600px) {
  .cyc-pv-stage { padding: 64px 10px; }
  .cyc-pv-nav { width: 44px; height: 44px; font-size: 18px; }
  .cyc-pv-prev { left: 6px; }
  .cyc-pv-next { right: 6px; }
}
@media (max-width: 900px) {
  .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .files-responsive {
    display: none !important;
  }
  .files-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .file-mobile-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .file-dialog {
    width: min(100vw - 16px, 520px);
    max-height: calc(100dvh - 16px);
    border-radius: 24px;
  }
  .file-grid {
    grid-template-columns: 1fr;
  }
  .file-grid > .field-span-2,
  .file-grid > .field-span-4 {
    grid-column: 1 / -1;
  }
}

/* Vista rápida del documento */
.view-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 28px);
}
.view-modal.open { display: flex; }
.view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(8px);
}
.view-dialog {
  position: relative;
  z-index: 1;
  width: min(1040px, 96vw);
  max-height: min(88vh, 860px);
  background: var(--cyc-card, #fff);
  color: var(--cyc-text, #1f2d3d);
  border: 1px solid var(--cyc-border, #e2e8f0);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  animation: viewModalIn .2s ease-out;
}
@keyframes viewModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.view-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--cyc-border, #e2e8f0);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
}
[data-theme="dark"] .view-header { background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.88)); }
.view-title-block h2 { margin: 8px 0 2px; font-size: clamp(22px, 3vw, 30px); line-height: 1; }
.view-title-block p { margin: 0; color: var(--cyc-muted, #64748b); font-weight: 700; }
/* Botón "Ampliar" del modal Ver: agranda el diálogo a casi toda la pantalla. */
.view-header-actions { display: flex; align-items: center; gap: 6px; }
.view-dialog { transition: width .18s ease, height .18s ease; }
.view-dialog.maximized { width: 100%; max-width: none; height: 100%; max-height: none; }
.view-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--cyc-border, #e2e8f0);
  background: var(--cyc-card, #fff);
  scrollbar-width: thin;
}
.view-tab {
  border: 0;
  background: transparent;
  color: var(--cyc-muted, #64748b);
  min-width: 86px;
  padding: 12px 14px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 7px;
  font-weight: 900;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}
.view-tab i { font-size: 20px; }
.view-tab span { font-size: 12px; }
.view-tab.active {
  background: var(--primary, #0d6efd);
  color: #fff;
  box-shadow: 0 12px 24px rgba(13, 110, 253, .22);
}
.view-content {
  min-height: 260px;
  overflow: auto;
  padding: clamp(18px, 2.5vw, 26px);
  background: var(--cyc-bg, #f3f7fb);
}
/* Partidas (modo Ver): switch Detalle/Tabla + botón Exportar Excel. */
.view-details-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.view-details-head-l { display: flex; align-items: baseline; gap: 10px; }
.view-details-head-l h3 { margin: 0; }
.view-details-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xl-view-toggle { display: inline-flex; border: 1px solid var(--cyc-border); border-radius: 10px; overflow: hidden; }
.xl-view-toggle button { border: 0; background: var(--cyc-card); color: var(--cyc-muted); padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.xl-view-toggle button + button { border-left: 1px solid var(--cyc-border); }
.xl-view-toggle button.active { background: var(--cyc-blue); color: #fff; }
/* Tabla tipo Excel (gridlines en todas las celdas, no editable) */
.xl-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--cyc-border); border-radius: 10px; background: var(--cyc-card); }
.xl-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.xl-table th, .xl-table td { border: 1px solid var(--cyc-border); padding: 7px 10px; text-align: left; }
.xl-table thead th { position: sticky; top: 0; z-index: 1; background: var(--cyc-bg); color: var(--cyc-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.xl-table td.num, .xl-table th.num { text-align: right; }
.xl-table tbody tr:nth-child(even) td { background: rgba(1,101,246,.035); }
.xl-table tbody tr:hover td { background: rgba(1,101,246,.08); }
.xl-table tfoot td { background: var(--cyc-bg); border-top: 2px solid var(--cyc-border); }
body[data-theme="dark"] .xl-table thead th,
body[data-theme="dark"] .xl-table tfoot td { background: var(--cyc-bg); }
.view-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid var(--cyc-border, #e2e8f0);
  background: var(--cyc-card, #fff);
}
.view-footer-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--cyc-muted, #64748b);
  font-weight: 700;
}
.view-footer-summary b { color: var(--cyc-text, #1f2d3d); }
/* Botones del footer del modal Ver, agrupados a la derecha (mismo esquema que
   .edit-footer-actions). El resumen queda a la izquierda por el space-between. */
.view-footer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.view-info-card,
.view-amount-card,
.view-item-card,
.view-photo-card,
.view-empty {
  background: var(--cyc-card, #fff);
  border: 1px solid var(--cyc-border, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
}
.view-info-card {
  padding: 16px;
  display: grid;
  gap: 6px;
}
.view-info-card span,
.view-amount-grid span,
.view-list-head span,
.view-item-card small,
.view-photo-card small { color: var(--cyc-muted, #64748b); }
.view-info-card b { overflow-wrap: anywhere; }
.view-info-card.highlight { grid-column: span 2; }
.view-amount-card { padding: 18px; }
.view-amount-card h3,
.view-list-head h3 { margin: 0; }
.view-amount-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.view-amount-grid span {
  background: var(--soft-bg, #f8fafc);
  border: 1px solid var(--cyc-border, #e2e8f0);
  border-radius: 16px;
  padding: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.view-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.view-table-wrap {
  background: var(--cyc-card, #fff);
  border: 1px solid var(--cyc-border, #e2e8f0);
  border-radius: 18px;
  overflow: auto;
}
.view-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.view-table th {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--cyc-muted, #64748b);
  background: var(--soft-bg, #f8fafc);
}
.view-table th,
.view-table td { padding: 14px 16px; border-bottom: 1px solid var(--cyc-border, #e2e8f0); text-align: left; vertical-align: top; }
.view-table td small,
.view-table td span { display: block; color: var(--cyc-muted, #64748b); margin-top: 4px; }
.view-card-list { display: none; gap: 12px; }
.view-card-list.compact { display: grid; }
.view-item-card {
  padding: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.view-item-card > div:first-child { min-width: 0; }
.view-item-card b { display: block; overflow-wrap: anywhere; }
.view-item-card p { margin: 8px 0 0; color: var(--cyc-muted, #64748b); overflow-wrap: anywhere; }
.view-card-grid {
  min-width: 260px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.view-card-grid span {
  background: var(--soft-bg, #f8fafc);
  border: 1px solid var(--cyc-border, #e2e8f0);
  border-radius: 14px;
  padding: 10px;
  color: var(--cyc-muted, #64748b);
}
.view-card-grid b { color: var(--cyc-text, #1f2d3d); }
.view-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.view-photo-card { padding: 12px; position: relative; }
.view-photo-card .photo-thumb.large { width: 100%; height: 130px; border-radius: 16px; }
.view-photo-card > span {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(15,23,42,.78);
  color: #fff;
  border-radius: 999px;
  padding: 3px 8px;
  font-weight: 900;
  font-size: 12px;
}
.view-photo-card b,
.view-photo-card small { display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-empty {
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  color: var(--cyc-muted, #64748b);
}
.view-empty i { font-size: 34px; color: var(--primary, #0d6efd); }
.view-empty b { color: var(--cyc-text, #1f2d3d); font-size: 18px; }

@media (max-width: 760px) {
  .view-modal { padding: 0; align-items: stretch; }
  .view-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .view-header { padding: 18px 18px 14px; }
  .view-tabs { padding: 10px 12px; gap: 6px; }
  .view-tab { min-width: 78px; padding: 10px 12px; border-radius: 16px; }
  .view-tab span { font-size: 11px; }
  .view-content { padding: 14px; }
  .view-info-grid { grid-template-columns: 1fr; }
  .view-info-card.highlight { grid-column: auto; }
  .view-amount-grid { grid-template-columns: 1fr; }
  .view-table-wrap { display: none; }
  .view-card-list { display: grid; }
  .view-item-card { display: grid; }
  .view-card-grid { min-width: 0; grid-template-columns: 1fr 1fr; }
  .view-footer { display: grid; padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .view-footer .btn { width: 100%; }
  .view-footer-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .view-footer-summary { gap: 10px 14px; }
}

@media (max-width: 430px) {
  .view-card-grid { grid-template-columns: 1fr; }
  .view-photo-grid { grid-template-columns: 1fr; }
}

/* v35 - Vista documento mobile: tabs solo con icono */
@media (max-width: 760px) {
  .view-tabs {
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .view-tab {
    min-width: 62px;
    width: 62px;
    height: 62px;
    padding: 0;
    border-radius: 20px;
    flex: 0 0 62px;
  }

  .view-tab i {
    font-size: 26px;
    line-height: 1;
  }

  .view-tab span {
    display: none !important;
  }

  .view-tab.active {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(13, 110, 253, .24);
  }
}

@media (max-width: 430px) {
  .view-tabs {
    gap: 8px;
    padding: 10px 12px;
  }

  .view-tab {
    min-width: 56px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    flex-basis: 56px;
  }

  .view-tab i {
    font-size: 24px;
  }
}

/* ===== CYC ERP v36: modal convertir documento ===== */
.convert-modal { z-index: 125; }
.convert-type-dialog { width: min(560px, calc(100vw - 28px)); }
.convert-detail-dialog { width: min(920px, calc(100vw - 28px)); }
.convert-type-body {
  display: grid;
  gap: 14px;
}
.convert-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--cyc-border);
  border-radius: 16px;
  background: var(--cyc-card);
  color: var(--cyc-text);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.convert-option:hover {
  transform: translateY(-1px);
  border-color: rgba(1,101,246,.34);
  box-shadow: 0 14px 30px rgba(1,101,246,.10);
}
.convert-option-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(1,101,246,.10);
  color: var(--cyc-blue);
  font-size: 22px;
}
.convert-option strong,
.convert-option small {
  display: block;
  min-width: 0;
}
.convert-option strong { font-size: 15px; }
.convert-option small { color: var(--cyc-muted); margin-top: 3px; }
.convert-grid {
  grid-template-columns: minmax(190px, .75fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: end;
}
.convert-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cyc-border);
}
.convert-toolbar h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .02em;
}
.convert-toggle-btn {
  min-width: 116px;
  justify-content: center;
  box-shadow: 0 12px 22px rgba(15,23,42,.08);
}
.btn-sm {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
}
.convert-details-list {
  display: grid;
  gap: 12px;
}
.convert-detail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-card);
  cursor: pointer;
}
.convert-detail-card input {
  width: 18px;
  height: 18px;
  accent-color: var(--cyc-blue);
}
.convert-detail-main,
.convert-detail-main strong,
.convert-detail-main small,
.convert-detail-amount,
.convert-detail-amount b,
.convert-detail-amount small {
  min-width: 0;
}
.convert-detail-main strong {
  display: block;
  overflow-wrap: anywhere;
}
.convert-detail-main small,
.convert-detail-amount small {
  display: block;
  margin-top: 4px;
  color: var(--cyc-muted);
  font-weight: 700;
}
.convert-detail-amount {
  text-align: right;
}
.convert-detail-amount b { display: block; white-space: nowrap; }

/* Descripción editable de la partida (fila completa dentro de la tarjeta).
   Necesita ganarle a `.convert-detail-card input { width:18px; height:18px }`
   que es para el checkbox. */
.convert-detail-descr-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}
.convert-detail-descr-wrap > span {
  font-size: 12px;
  font-weight: 800;
  color: var(--cyc-muted);
}
.convert-detail-card input.convert-detail-descr {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cyc-border);
  border-radius: 10px;
  background: var(--cyc-card);
  color: inherit;
  font: inherit;
  accent-color: auto;
}
.convert-detail-card input.convert-detail-descr:focus {
  outline: none;
  border-color: var(--cyc-blue);
  box-shadow: 0 0 0 3px rgba(1,101,246,.12);
}
.convert-detail-card input.convert-detail-descr:disabled {
  opacity: .6;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .convert-type-dialog,
  .convert-detail-dialog {
    inset: auto 0 0 0;
    top: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    transform: none;
    border-radius: 24px 24px 0 0;
  }
  .convert-grid { grid-template-columns: 1fr; }
  .convert-detail-body {
    padding-bottom: 120px;
    max-height: calc(92dvh - 154px);
    overflow-y: auto;
  }
  .convert-toolbar {
    align-items: stretch;
    flex-direction: row;
  }
  .convert-toggle-btn { width: 128px; }
  .convert-detail-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .convert-detail-amount {
    grid-column: 2;
    text-align: left;
  }
  .convert-modal .detail-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: var(--cyc-card);
    box-shadow: 0 -12px 30px rgba(15,23,42,.08);
  }
  .convert-modal .detail-footer .btn {
    width: 100%;
    min-height: 54px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .convert-detail-dialog { width: min(820px, calc(100vw - 28px)); }
  .convert-grid { grid-template-columns: 1fr 1fr; }
  .convert-grid .form-field:first-child { grid-column: 1 / -1; }
}

.doc-items-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* ===== CYC ERP v42: Salida de mercancía ===== */
.merchandise-modal { z-index: 128; }
.merchandise-dialog { width: min(980px, calc(100vw - 28px)); }
.merchandise-header h2 { margin-top: 8px; }
.merchandise-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.merchandise-doc-info {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1fr) 190px;
  gap: 12px;
}
.merchandise-doc-info article {
  border: 1px solid var(--cyc-border);
  background: var(--cyc-card);
  border-radius: 18px;
  padding: 14px 16px;
  min-width: 0;
}
.merchandise-doc-info span {
  display: block;
  color: var(--cyc-muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}
.merchandise-doc-info strong {
  display: block;
  color: var(--cyc-text);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merchandise-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--cyc-border);
  padding-top: 16px;
}
.merchandise-list-head h3 { margin: 0; font-size: 18px; }
.merchandise-list-head small { color: var(--cyc-muted); font-weight: 700; text-align: right; }
.merchandise-out-list {
  display: grid;
  gap: 12px;
}
.merchandise-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--cyc-border);
  border-radius: 18px;
  background: var(--cyc-card);
  box-shadow: var(--cyc-shadow-soft);
}
.merchandise-card.pending { border-color: rgba(255, 144, 0, .35); }
.merchandise-card.done { border-color: rgba(25, 183, 110, .38); }
.merchandise-check {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 144, 0, .12);
  color: #ff9000;
}
.merchandise-card.done .merchandise-check {
  background: rgba(25, 183, 110, .12);
  color: #19b76e;
}
.merchandise-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.merchandise-main strong {
  color: var(--cyc-text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.merchandise-main small {
  color: var(--cyc-muted);
  font-weight: 800;
  font-size: 12px;
}
.merchandise-status-btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-width: 164px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.merchandise-status-btn:hover { transform: translateY(-1px); }
.merchandise-status-btn.is-pending { background: #ff9000; box-shadow: 0 12px 26px rgba(255,144,0,.24); }
.merchandise-status-btn.is-done { background: #38b249; box-shadow: 0 12px 26px rgba(56,178,73,.22); }

@media (max-width: 760px) {
  .merchandise-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .merchandise-doc-info { grid-template-columns: 1fr; }
  .merchandise-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .merchandise-list-head small { text-align: left; }
  .merchandise-card {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }
  .merchandise-status-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .merchandise-main strong { white-space: normal; }
}

/* v43: surtido / salida de mercancía */
.supply-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}
.supply-badge.pending { background: #ff9000; }
.supply-badge.partial { background: #0b6df6; }
.supply-badge.done { background: #38b249; }
.supply-inline {
  color: var(--cyc-muted);
  font-size: 12px;
}
.supply-inline b { color: var(--cyc-text); }
/* Formas de pago de los pagos: en la celda (span) y en la tarjeta (línea). */
.pay-forms-inline { display: block; }
.doc-card-payforms {
  margin: 8px 0 2px;
  font-size: 12px;
  color: var(--cyc-muted);
}
.doc-card-payforms b { color: var(--cyc-text); }
.merchandise-doc-info {
  grid-template-columns: 180px minmax(220px, 1fr) repeat(3, minmax(150px, 190px));
}
@media (max-width: 1180px) {
  .merchandise-doc-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .merchandise-doc-info { grid-template-columns: 1fr; }
  .supply-badge { font-size: 10px; padding: 4px 7px; }
}

/* ===== CYC ERP v45: Control de series/lotes para salida ===== */
.inventory-control-modal { z-index: 132; }
.inventory-control-dialog { width: min(860px, calc(100vw - 28px)); }
.inventory-control-header h2 {
  max-width: 720px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-control-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inventory-control-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px 130px 130px;
  gap: 12px;
}
.inventory-control-summary article {
  border: 1px solid var(--cyc-border);
  background: var(--cyc-card);
  border-radius: 16px;
  padding: 13px 14px;
  min-width: 0;
}
.inventory-control-summary span {
  display: block;
  color: var(--cyc-muted);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 4px;
}
.inventory-control-summary strong {
  display: block;
  color: var(--cyc-text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-control-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.inventory-control-form .btn {
  min-height: 48px;
  padding-inline: 22px;
}
.inventory-selected-box {
  border: 1px solid var(--cyc-border);
  background: var(--cyc-card);
  border-radius: 18px;
  padding: 14px;
  min-height: 230px;
}
.inventory-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cyc-border);
  margin-bottom: 10px;
}
.inventory-selected-head h3 {
  margin: 0;
  font-size: 16px;
}
.inventory-selected-head span {
  color: var(--cyc-muted);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}
.inventory-selected-list {
  display: grid;
  gap: 10px;
}
.inventory-selected-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--cyc-border);
  border-radius: 14px;
  background: var(--cyc-soft);
}
.inventory-selected-row > span {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(1, 101, 246, .10);
  color: var(--cyc-primary);
  font-weight: 900;
}
.inventory-selected-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .inventory-control-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .inventory-control-header h2 { white-space: normal; }
  .inventory-control-summary { grid-template-columns: 1fr 1fr; }
  .inventory-control-summary article:first-child { grid-column: 1 / -1; }
  .inventory-control-form { grid-template-columns: 1fr; }
  .inventory-selected-head { align-items: flex-start; flex-direction: column; }
  .inventory-selected-head span { text-align: left; }
  .inventory-selected-row { grid-template-columns: 34px minmax(0, 1fr); }
  .inventory-selected-row button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 420px) {
  .inventory-control-summary { grid-template-columns: 1fr; }
}

.inventory-control-form.quantity-mode {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px auto;
}
.inventory-control-form.quantity-mode input,
.inventory-control-form.quantity-mode select {
  width: 100%;
}
/* Evita el "grid blowout": con minmax(180px,1fr) + min-width auto, el combobox
   de Ubicación (texto largo, p.ej. "Matriz - GENERAL - ZONA 01 PASILLO 2
   ESTANTE 5") ensancha su columna y tapa Cantidad. Con minmax(0,1fr) y
   min-width:0 el valor se trunca con ellipsis en lugar de crecer. */
.inventory-control-form.quantity-mode .form-field { min-width: 0; }
.inventory-control-form.quantity-mode .select-search-wrap { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
  .inventory-control-form.quantity-mode {
    grid-template-columns: 1fr 1fr;
  }
  .inventory-control-form.quantity-mode .btn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .inventory-control-form.quantity-mode {
    grid-template-columns: 1fr;
  }
}

/* v48 - Vista documento: estatus y trazabilidad de salida de mercancía */
.view-detail-table th:last-child,
.view-detail-table td:last-child {
  min-width: 320px;
}

.view-inventory-info {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.view-inventory-info.muted {
  opacity: .75;
}

.view-inventory-status {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.view-inventory-status.pending {
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.view-inventory-status.partial {
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
}

.view-inventory-status.done {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.view-inventory-status.none {
  color: var(--cyc-muted, #64748b);
  background: var(--soft-bg, #f8fafc);
  border: 1px solid var(--cyc-border, #e2e8f0);
}

.view-inventory-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.view-inventory-summary span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--cyc-border, #e2e8f0);
  background: var(--soft-bg, #f8fafc);
  color: var(--cyc-muted, #64748b);
  border-radius: 12px;
  padding: 8px 9px;
  font-size: 12px;
  font-weight: 800;
}

.view-inventory-summary b {
  color: var(--cyc-text, #1f2d3d);
}

.view-inventory-records {
  display: grid;
  gap: 7px;
}

.view-inventory-records > b {
  font-size: 12px;
  color: var(--cyc-text, #1f2d3d);
}

.view-inventory-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  border: 1px dashed var(--cyc-border, #e2e8f0);
  background: var(--cyc-card, #fff);
  color: var(--cyc-muted, #64748b);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.view-inventory-chip i {
  color: var(--primary, #0d6efd);
  margin-top: 2px;
}

.view-inventory-empty {
  color: var(--cyc-muted, #64748b);
  font-weight: 800;
}

.view-detail-card .view-inventory-info {
  border-top: 1px solid var(--cyc-border, #e2e8f0);
  padding-top: 12px;
}

@media (max-width: 760px) {
  .view-detail-card {
    gap: 12px;
  }
  .view-detail-card .view-inventory-info {
    width: 100%;
  }
  .view-inventory-status {
    font-size: 11px;
  }
  .view-inventory-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 430px) {
  .view-inventory-summary {
    grid-template-columns: 1fr;
  }
}

/* v49 - vista de información: salida de mercancía dentro del detalle */
.view-detail-table.compact-inventory th:nth-child(1),
.view-detail-table.compact-inventory td:nth-child(1) { width: 52px; }
.view-detail-table.compact-inventory th:nth-child(3),
.view-detail-table.compact-inventory td:nth-child(3) { width: 110px; }
.view-detail-table.compact-inventory th:nth-child(4),
.view-detail-table.compact-inventory td:nth-child(4) { width: 260px; }
.view-inventory-inline {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.view-inventory-counts {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}
.view-inventory-records.compact {
  width: 100%;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}
.view-inventory-records.compact .view-inventory-chip {
  margin: 3px 6px 3px 0;
}
@media (max-width: 720px) {
  .view-inventory-inline {
    flex-direction: column;
    align-items: flex-start;
  }
  .view-inventory-status,
  .view-inventory-counts {
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
  }
}

.supply-badge.clickable {
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.supply-badge.clickable:hover,
.supply-badge.clickable:focus-visible {
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
  outline: none;
}

/* Exportar / PDF preview */
.export-format-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
}

.export-format-body {
  display: grid;
  gap: 18px;
}

.export-format-card {
  border: 0;
  width: 100%;
  min-height: 138px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fb3b34, #ef2f2f);
  color: #fff;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 24px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 14px 34px rgba(239, 47, 47, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.export-format-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 18px 42px rgba(239, 47, 47, .28);
}

.export-format-card i {
  font-size: 42px;
  line-height: 1;
}

.export-format-card strong {
  font-size: 18px;
}

.export-format-card span {
  font-size: 13px;
  opacity: .88;
}

/* Modal "método de envío": cards blancos con acento por método (Email azul,
   WhatsApp verde), como el sistema viejo. */
#sendMethodModal .export-format-card {
  background: var(--cyc-card);
  color: var(--cyc-text);
  border: 1px solid var(--cyc-border);
  box-shadow: 0 10px 26px rgba(18, 35, 46, .08);
}
#sendMethodModal .export-format-card:hover {
  box-shadow: 0 16px 36px rgba(18, 35, 46, .14);
}
#sendMethodModal .export-format-card span { color: var(--cyc-muted); opacity: 1; }
#sendMethodModal .export-format-card[data-send-method="email"] i,
#sendMethodModal .export-format-card[data-send-method="email"] strong { color: var(--cyc-blue); }
#sendMethodModal .export-format-card[data-send-method="whatsapp"] i,
#sendMethodModal .export-format-card[data-send-method="whatsapp"] strong { color: #25d366; }

/* CYCSend (js/sendflow.js) reusa .export-format-card; su selector de canal debe
   verse IGUAL que el de documents (#sendMethodModal): tarjetas BLANCAS, Email azul,
   WhatsApp verde. Atributos data-cyc-send-method (email/wa). */
#cycSendMethod .export-format-card {
  background: var(--cyc-card);
  color: var(--cyc-text);
  border: 1px solid var(--cyc-border);
  box-shadow: 0 10px 26px rgba(18, 35, 46, .08);
}
#cycSendMethod .export-format-card:hover { box-shadow: 0 16px 36px rgba(18, 35, 46, .14); }
#cycSendMethod .export-format-card span { color: var(--cyc-muted); opacity: 1; }
#cycSendMethod .export-format-card[data-cyc-send-method="email"] i,
#cycSendMethod .export-format-card[data-cyc-send-method="email"] strong { color: var(--cyc-blue); }
#cycSendMethod .export-format-card[data-cyc-send-method="wa"] i,
#cycSendMethod .export-format-card[data-cyc-send-method="wa"] strong { color: #25d366; }

.pdf-preview-dialog {
  width: min(1280px, calc(100vw - 28px));
  height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pdf-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.pdf-preview-header h2 {
  margin: 4px 0 2px;
  font-size: 22px;
}

.pdf-preview-header p {
  margin: 0;
  color: var(--muted);
}

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

.pdf-action-save,
.pdf-action-send {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.pdf-action-save {
  color: #0f8b5f;
  background: rgba(22, 163, 74, .10);
  border-color: rgba(22, 163, 74, .25);
}

.pdf-action-send {
  color: var(--primary);
  background: rgba(1, 101, 246, .10);
  border-color: rgba(1, 101, 246, .25);
}

.pdf-preview-body {
  flex: 1;
  min-height: 0;
  background: #292a30;
  padding: 16px;
  overflow: auto;
}

.pdf-paper-stage {
  width: 100%;
  min-height: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
  padding: 18px;
}

.pdf-paper {
  width: min(816px, 100%);
  min-height: 1056px;
  background: #fff;
  color: #142232;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
  padding: 52px 58px;
  font-family: Arial, Helvetica, sans-serif;
  transform-origin: top center;
}

.pdf-paper-top {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 18px;
  align-items: start;
}

.pdf-logo {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -2px;
}

.pdf-logo span:first-child,
.pdf-company,
.pdf-title {
  color: #0165f6;
}

.pdf-company-block {
  text-align: center;
}

.pdf-company {
  font-size: 16px;
  font-weight: 800;
}

.pdf-company-block p,
.pdf-doc-meta p,
.pdf-receptor p {
  margin: 3px 0;
  font-size: 13px;
}

.pdf-doc-meta {
  text-align: right;
}

.pdf-title {
  font-size: 23px;
  font-weight: 900;
  margin-bottom: 8px;
}

.pdf-receptor {
  margin-top: 55px;
  margin-bottom: 26px;
}

.pdf-receptor h4,
.pdf-section-title {
  margin: 0 0 10px;
  font-size: 15px;
}

.pdf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pdf-table thead th {
  background: #0165f6;
  color: #fff;
  padding: 8px;
  text-align: left;
}

.pdf-table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid #dce6f2;
  vertical-align: top;
}

.pdf-table .num {
  text-align: right;
}

.pdf-totals {
  width: 310px;
  margin: 28px 0 0 auto;
  font-size: 13px;
}

.pdf-total-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #dce6f2;
}

.pdf-total-row.strong {
  font-weight: 900;
  font-size: 16px;
}

.pdf-salida-note {
  margin-top: 6px;
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 760px) {
  .pdf-preview-body { padding: 0; }
  .pdf-paper-stage { padding: 10px; }
  .pdf-paper {
    min-height: auto;
    padding: 26px 20px;
    width: 100%;
  }
  .pdf-paper-top {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .pdf-company-block,
  .pdf-doc-meta { text-align: left; }
  .pdf-table { font-size: 11px; }
  .pdf-table thead { display: none; }
  .pdf-table, .pdf-table tbody, .pdf-table tr, .pdf-table td { display: block; width: 100%; }
  .pdf-table tr { border: 1px solid #dce6f2; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
  .pdf-table tbody td { display: flex; justify-content: space-between; gap: 10px; }
  .pdf-table tbody td::before { content: attr(data-label); font-weight: 800; color: #64748b; }
  .pdf-table .num { text-align: left; }
  .pdf-totals { width: 100%; }
}

.pdf-fallback {
  color: #fff;
  place-self: center;
  text-align: center;
  display: grid;
  gap: 8px;
}

.pdf-fallback i {
  font-size: 56px;
  color: #fb3b34;
}

body[data-theme="dark"] .pdf-preview-body {
  background: #111827;
}

@media (max-width: 720px) {
  .export-format-dialog,
  .pdf-preview-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .export-format-body {
    padding: 18px;
  }
  .export-format-card {
    min-height: 116px;
  }
  .pdf-preview-header {
    padding: 14px 16px;
  }
  .pdf-preview-header h2 {
    font-size: 18px;
  }
  .pdf-preview-actions {
    gap: 6px;
  }
  .pdf-action-save,
  .pdf-action-send {
    width: 40px;
    height: 40px;
  }
  .pdf-preview-body {
    padding: 8px;
  }
}

/* v57: ventas cerradas sin edición */
.square-btn.disabled,
.square-btn[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
  pointer-events: auto;
}

.square-btn.disabled:hover,
.square-btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

.sheet-action.disabled,
.sheet-action[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  background: var(--surface-muted, #f4f7fb);
}

.sheet-action.disabled:hover,
.sheet-action[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   Menú "vivo": micro-interacciones y animaciones del sidebar
   (acordeón de un solo menú abierto lo maneja menus.js). Va al final para
   ganar en cascada sin tocar las reglas base de arriba.
   ========================================================================== */
.nav-item {
  transition: background .2s ease, color .2s ease,
              transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.nav-item i:first-child { transition: transform .24s cubic-bezier(.34,1.56,.64,1); }
.nav-item:hover { transform: translateX(3px); }
.nav-item:hover i:first-child { transform: scale(1.18) rotate(-4deg); }
.nav-arrow { transition: transform .26s cubic-bezier(.34,1.56,.64,1); }

/* Punto "latido" en el elemento activo (parpadeo suave) */
.nav-menu .nav-item.active { position: relative; }
.nav-menu .nav-item.active > i:first-child { animation: cycNavPop .45s ease; }
.nav-menu .nav-item.active:not(.level-1):not(.level-2)::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyc-turquoise, #2eb4a8);
  transform: translateY(-50%);
  animation: cycNavBeacon 1.9s ease-in-out infinite;
}
@keyframes cycNavPop { 0% { transform: scale(.6); } 60% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes cycNavBeacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,180,168,.55); opacity: 1; }
  50% { box-shadow: 0 0 0 7px rgba(46,180,168,0); opacity: .55; }
}

/* Entrada escalonada de los ítems del submenú al abrirlo */
.nav-submenu.open > .nav-node { animation: cycSubIn .38s both; }
.nav-submenu.open > .nav-node:nth-child(1) { animation-delay: .03s; }
.nav-submenu.open > .nav-node:nth-child(2) { animation-delay: .07s; }
.nav-submenu.open > .nav-node:nth-child(3) { animation-delay: .11s; }
.nav-submenu.open > .nav-node:nth-child(4) { animation-delay: .15s; }
.nav-submenu.open > .nav-node:nth-child(5) { animation-delay: .19s; }
.nav-submenu.open > .nav-node:nth-child(6) { animation-delay: .23s; }
.nav-submenu.open > .nav-node:nth-child(n+7) { animation-delay: .27s; }
@keyframes cycSubIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-item i:first-child, .nav-arrow, .nav-submenu,
  .nav-submenu.open > .nav-node { transition: none !important; animation: none !important; }
  .nav-menu .nav-item.active::after { animation: none; }
}

/* ── Menú móvil a pantalla completa (drawer full-screen + blur) ─────────── */
@media (max-width: 920px) {
  .sidebar {
    width: 100vw;
    max-width: 100vw;
    box-shadow: none;
    transform: translateX(-102%);
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }

  .mobile-overlay {
    background: rgba(8,16,24,.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Ítems más grandes y con más aire cuando el menú ocupa toda la pantalla */
  .sidebar .nav-item { min-height: 54px; font-size: 15.5px; border-radius: 14px; }
  .sidebar .nav-item.level-1 { min-height: 48px; }
  .sidebar .nav-item i:first-child { font-size: 18px; }
  .nav-submenu.open { max-height: 1400px; }

  /* Al abrir el menú, los ítems de nivel superior entran en cascada */
  .app-shell.sidebar-open .nav-menu > .nav-node { animation: cycNavRowIn .4s both; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(1) { animation-delay: .04s; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(2) { animation-delay: .08s; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(3) { animation-delay: .12s; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(4) { animation-delay: .16s; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(5) { animation-delay: .20s; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(6) { animation-delay: .24s; }
  .app-shell.sidebar-open .nav-menu > .nav-node:nth-child(n+7) { animation-delay: .28s; }
}
@keyframes cycNavRowIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* En móvil el botón "+" del encabezado sobra (ya está el FAB flotante
   .floating-add abajo). Se ocultan solo los botones "Nuevo/Agregar" de arriba
   de las páginas que sí tienen FAB (formatspdf no está aquí: no tiene FAB). */
@media (max-width: 920px) {
  #btnNewTicket, #btnNewEntity, #btnNewProduct, #btnNewDoc, #btnNewUser,
  #btnNewTask, #btnNewEvent, #btnNewProfile { display: none; }
}

/* "Cerrar Sesión" al final del menú del sidebar (lo inyecta renderDesktopMenu). */
.nav-logout-node {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.nav-logout { color: #ef5b68; }
.nav-logout i:first-child { color: currentColor; }
.nav-logout:hover { background: rgba(239,91,104,.16); color: #ff7a86; }
body[data-theme="light"] .app-shell.sidebar-collapsed .nav-logout-node { border-top-color: rgba(0,0,0,.08); }

/* ==========================================================================
   Pestaña Clasificaciones — checklist agrupado por categoría
   Cada categoría (ITEMS_CLASSIFICATION_NAMES LVL 0) es un bloque y sus clases
   (LVL 1) son las casillas. Componente COMPARTIDO: lo usan documents.html,
   entities.html y events.html, en el panel de edición y — deshabilitado — en
   el modal Ver.
   ========================================================================== */
.class-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.class-group {
  border: 1px solid var(--cyc-border);
  border-radius: var(--radius-md);
  background: var(--cyc-card);
  padding: 14px 16px 12px;
}
.class-group h4 {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--cyc-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.class-group h4 i { color: var(--cyc-blue); }
.class-group-items { display: flex; flex-direction: column; gap: 2px; }

.class-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--cyc-text);
  transition: background .15s ease;
}
.class-check:hover { background: rgba(1, 101, 246, .06); }
.class-check input { width: 17px; height: 17px; accent-color: var(--cyc-blue); cursor: pointer; flex: none; }
.class-check span { font-weight: 600; line-height: 1.3; }
.class-check.is-checked span { color: var(--cyc-blue); }
.class-check input:disabled { cursor: default; }
.class-check:has(input:disabled) { cursor: default; }
.class-check:has(input:disabled):hover { background: transparent; }

/* Nota de ayuda arriba del checklist (el .panel-note normal va centrado) */
.panel-note.left { text-align: left; margin-top: 4px; }

/* ==========================================================================
   Firma en canvas — componente COMPARTIDO (eventos y tickets).
   La imagen se guarda en FILES (FILETYPE 32 en eventos, 28 en tickets).
   ========================================================================== */
/* Recuadro punteado del canvas */
.sign-pad-wrap {
  position: relative;
  height: 240px;
  border: 2px dashed var(--cyc-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.sign-pad {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none; /* evita que el gesto haga scroll al firmar */
}
.sign-pad-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #9aa4b2;
  font-size: 14px;
  letter-spacing: .3px;
}

/* Vista de la firma registrada */
.sign-view-img {
  border: 1px solid var(--cyc-border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign-view-img img { max-width: 100%; max-height: 260px; object-fit: contain; }
.sign-view-name {
  margin: 12px 0 0;
  text-align: center;
  color: var(--cyc-muted);
}
.sign-view-name b { color: var(--cyc-text); }

/* Deltas del modal de firma (compartidos por CYCSign / events / reservaciones). */
.sign-body { display: block; }
.sign-capture .form-field { display: block; margin-bottom: 14px; }
.sign-pad-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--cyc-muted); }
.sign-footer { flex-wrap: wrap; gap: 10px; }
.sign-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.sign-tab { margin-top: 8px; }
.sign-tab-actions { margin-top: 16px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

@media (max-width: 640px) {
  .sign-pad-wrap { height: 200px; }
  .sign-footer-actions { width: 100%; margin-left: 0; }
  .sign-footer-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Permisos de función (Bloque permisos): botón visible pero sin permiso. */
.perm-disabled { opacity: .45; cursor: not-allowed; }
.sheet-action:disabled { opacity: .45; cursor: not-allowed; }

/* Comisiones (typedoc=7): asistente "Generar comisiones" — tabla de preview. */
.gencomm-preview { margin-top: 14px; }
.gencomm-hint { color: var(--cyc-muted); font-size: .9rem; margin: 10px 0; text-align: center; }
.gencomm-table-wrap { overflow-x: auto; border: 1px solid var(--cyc-border); border-radius: 12px; }
.gencomm-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.gencomm-table th, .gencomm-table td { padding: 8px 11px; border-bottom: 1px solid var(--cyc-border); text-align: left; white-space: nowrap; }
.gencomm-table th { background: var(--cyc-bg); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; color: var(--cyc-muted); }
.gencomm-table td.r, .gencomm-table th.r { text-align: right; }
.gencomm-table tbody tr:last-child td { border-bottom: 0; }
.gencomm-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 15px; background: var(--cyc-bg); border-radius: 12px; }
.gencomm-total span { color: var(--cyc-muted); font-size: .88rem; }
.gencomm-total b { font-size: 1.15rem; color: var(--cyc-blue); }
.gencomm-skips { margin-top: 12px; padding: 11px 14px; border: 1px solid var(--cyc-yellow); border-radius: 12px; background: color-mix(in srgb, var(--cyc-yellow) 12%, transparent); }
.gencomm-skips-title { margin: 0 0 6px; font-weight: 700; font-size: .86rem; color: var(--cyc-text); }
.gencomm-skips-title i { color: var(--cyc-yellow); margin-right: 5px; }
.gencomm-skips ul { margin: 0; padding-left: 18px; }
.gencomm-skips li { font-size: .84rem; margin: 3px 0; color: var(--cyc-text); }
.gencomm-skips .gc-skip-reason { color: var(--cyc-muted); }
.gc-skip-list { list-style: none; padding-left: 0 !important; }
.gc-skip-list > li { margin: 8px 0; }
.gc-skip-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gc-skip-editor { margin-top: 8px; padding: 10px; border: 1px dashed var(--cyc-border); border-radius: 10px; background: var(--cyc-card); }
.gc-skip-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.gc-skip-fields label { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: var(--cyc-muted); }
.gc-skip-fields label.gc-note { flex: 1 1 180px; }
.gc-skip-fields input { padding: 6px 9px; border: 1px solid var(--cyc-border); border-radius: 8px; background: var(--cyc-bg); color: var(--cyc-text); font-size: .88rem; }
.gc-manual { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--cyc-blue); border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.gc-event { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--cyc-green); border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }

/* Tablero "Avance vendido vs meta" (B5) */
.gp-result { margin-top: 6px; }
.gp-table { width: 100%; }
.gp-table td.num, .gp-table th.num { text-align: right; white-space: nowrap; }
.gp-table tfoot td { border-top: 2px solid var(--cyc-border); background: var(--cyc-bg); }
.gp-sub { font-size: .72rem; color: var(--cyc-muted); margin-top: 1px; }
.gp-barcell { min-width: 150px; }
.gp-bar { height: 8px; border-radius: 6px; background: var(--cyc-border); overflow: hidden; margin-bottom: 3px; }
.gp-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--cyc-blue); transition: width .3s ease; }
.gp-bar-fill.ok { background: var(--cyc-green, #2fbf71); }
.gp-bar-fill.mid { background: var(--cyc-yellow, #e0a800); }
.gp-bar-fill.low { background: var(--cyc-red, #e5484d); }
.gp-bar-fill.nogoal { background: var(--cyc-muted, #9aa4b2); }
.gp-pct { font-size: .78rem; font-weight: 800; }
.gp-pct.ok { color: var(--cyc-green, #2fbf71); }
.gp-pct.mid { color: var(--cyc-yellow, #b9860b); }
.gp-pct.low { color: var(--cyc-red, #e5484d); }
.gp-pct.nogoal { color: var(--cyc-muted, #9aa4b2); }

/* ==========================================================================
   CYCAcctParams — pestaña "Contable" del satélite Parámetros.
   Vive aquí (y no en una hoja delta) porque lo montan Empresas, Productos,
   Entidades y Documentos, igual que los demás módulos compartidos.
   ========================================================================== */
.acctp-load { padding: 22px 4px; color: var(--cyc-muted); font-size: 14px; }
.acctp-help { font-size: 13.5px; color: var(--cyc-muted); margin: 0 0 16px; max-width: 74ch; }
.acctp-grid { display: flex; flex-direction: column; gap: 1px; background: var(--cyc-border); border: 1px solid var(--cyc-border); border-radius: 10px; overflow: hidden; }
.acctp-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; gap: 14px; align-items: start; background: var(--cyc-card); padding: 12px 14px; }
.acctp-rol b { display: block; font-size: 14px; color: var(--cyc-text); }
.acctp-rol small { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--cyc-muted); }
.acctp-sel select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--cyc-border); border-radius: 8px; background: var(--cyc-card); color: var(--cyc-text); font-size: 14px; }
.acctp-ro { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--cyc-text); }
.acctp-origen { font-size: 12px; color: var(--cyc-muted); margin: 6px 0 0; line-height: 1.4; }
.acctp-origen b { font-family: ui-monospace, Consolas, monospace; color: var(--cyc-text); }
.acctp-origen em { font-style: normal; opacity: .8; }
.acctp-origen.is-warn { color: #8a6208; }
.acctp-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.acctp-msg { font-size: 13.5px; color: var(--cyc-muted); flex: 1 1 auto; }
.acctp-msg.is-err { color: #9d3327; }
@media (max-width: 700px) {
  .acctp-row { grid-template-columns: 1fr; gap: 8px; }
  .acctp-acc { justify-self: end; }
}

/* Barra superior del bloque de cuentas contables (acctparams.js): titulo a la
   izquierda y el auto-asignador a la derecha. */
.acctp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.acctp-top h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cyc-text);
}
.acctp-top .acctp-auto { white-space: nowrap; }