/* ==========================================================================
   cx-components.css — componentes Contracta (§7.4 FRONTEND-BRIEF)
   Borders sobre shadows en superficies de datos; sombras solo modales/dropdowns.
   ========================================================================== */

/* ── Botones (accesibles: fondo action ≥4.5:1 con blanco) ───────────────── */
.cx-app .btn {
  --bs-btn-font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.cx-app .btn-primary {
  --bs-btn-bg: var(--color-action-bg);
  --bs-btn-border-color: var(--color-action-bg);
  --bs-btn-hover-bg: var(--color-action-hover);
  --bs-btn-hover-border-color: var(--color-action-hover);
  --bs-btn-active-bg: var(--color-action-active);
  --bs-btn-active-border-color: var(--color-action-active);
  --bs-btn-disabled-bg: var(--color-muted);
  --bs-btn-disabled-border-color: var(--color-muted);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-color: #FFFFFF;
}

.cx-app .btn-outline-secondary {
  --bs-btn-color: var(--color-body);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-bg: var(--color-bg-alt);
  --bs-btn-hover-color: var(--color-heading);
  --bs-btn-hover-border-color: var(--color-border);
  --bs-btn-active-bg: var(--color-bg-alt);
  --bs-btn-active-color: var(--color-heading);
  --bs-btn-active-border-color: var(--color-border);
}

.cx-app .btn .cx-spin {
  display: inline-block;
  animation: cx-rotate 0.8s linear infinite;
}

@keyframes cx-rotate {
  to { transform: rotate(360deg); }
}

/* Botón aria-busy (Doherty 3.5) */
.cx-app .btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}

/* ── Badge rol D12: pill outline neutral, sin color por rol ─────────────── */
.cx-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-body);
  background: var(--color-bg);
  white-space: nowrap;
}

/* ── Status badges (§4.1: pill + dot 6px con el color del par) ──────────── */
.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  line-height: 1.5;
}

.cx-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.cx-badge--draft    { background: var(--status-draft-bg);    color: var(--status-draft-text); }
.cx-badge--sent     { background: var(--status-sent-bg);     color: var(--status-sent-text); }
.cx-badge--signed   { background: var(--status-signed-bg);   color: var(--status-signed-text); }
.cx-badge--active   { background: var(--status-active-bg);   color: var(--status-active-text); }
.cx-badge--expired  { background: var(--status-expired-bg);  color: var(--status-expired-text); }
.cx-badge--archived { background: var(--status-archived-bg); color: var(--status-archived-text); }
.cx-badge--inactive { background: var(--status-inactive-bg); color: var(--status-inactive-text); }

/* ── Chips filtro con contador (D7: los contadores viven aquí, no en KPI cards) ── */
.cx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  min-height: 36px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.cx-chip:hover {
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

.cx-chip .cx-chip__count {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.cx-chip.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-primary-text);
}

.cx-chip.is-active .cx-chip__count {
  color: var(--color-primary-text);
}

/* ── Tabla de contratos (§4.1: border-bottom, sin zebra, hover bg-alt) ──── */
.cx-tablewrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}

.cx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.cx-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  white-space: nowrap;
}

.cx-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-body);
  vertical-align: middle;
}

.cx-table tbody tr:last-child td {
  border-bottom: 0;
}

.cx-table tbody tr.rowlink {
  cursor: pointer;
}

.cx-table tbody tr.rowlink:hover {
  background: var(--color-bg-alt);
}

.cx-table .cx-code {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  display: block;
}

.cx-table .cx-title-cell {
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
}

.cx-table .cx-num,
.cx-table .cx-date {
  font-family: var(--font-family-data);
  white-space: nowrap;
}

.cx-rowactions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.cx-rowactions .cx-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

/* ── Tarjetas Mis Contratos (§4.7 trabajador) ────────────────────────────── */
.cx-wcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.cx-wcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.cx-wcard:hover {
  background: var(--color-bg-alt);
  transform: translateY(-1px);
  text-decoration: none;
}

.cx-wcard h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.cx-wcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cx-wcard__client {
  color: var(--color-body);
  font-size: var(--font-size-sm);
}

.cx-wcard__vigencia {
  font-family: var(--font-family-data);
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-wcard__vigencia--soon { color: var(--status-sent-text); }
.cx-wcard__vigencia--out  { color: var(--status-expired-text); }

.cx-wcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ── Timeline de versiones (§4.2 signature moment) ──────────────────────── */
.cx-timeline {
  position: relative;
  padding-left: 8px;
}

.cx-timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.cx-tl-node {
  position: relative;
  padding: 0 0 20px 44px;
}

.cx-tl-node:last-child {
  padding-bottom: 4px;
}

.cx-tl-node__dot {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-muted);
  background: var(--color-bg);
}

.cx-tl-node.is-current .cx-tl-node__dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.cx-tl-node__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cx-tl-node__ver {
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.cx-tl-node__meta {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.cx-tl-node__summary {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-tl-node__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.cx-tl-node .cx-diffwrap {
  margin-top: 12px;
  animation: cx-expand var(--transition-base);
}

@keyframes cx-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Diff viewer (§4.3 grid 3 col, después con fondo signed al 40%) ─────── */
.cx-diff {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--font-size-sm);
}

.cx-diff__row {
  display: grid;
  grid-template-columns: 25% 37.5% 37.5%;
  border-bottom: 1px solid var(--color-border);
}

.cx-diff__row:last-child {
  border-bottom: 0;
}

.cx-diff__head > div {
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  background: var(--color-bg-alt);
}

.cx-diff__cell {
  padding: 8px 12px;
  font-family: var(--font-family-data);
  color: var(--color-body);
  word-break: break-word;
}

.cx-diff__cell--field {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

.cx-diff__cell--before {
  color: var(--color-muted);
}

.cx-diff__cell--before.is-removed {
  text-decoration: line-through;
}

.cx-diff__cell--after {
  background: color-mix(in srgb, var(--status-signed-bg) 40%, transparent);
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
}

.cx-diff__empty {
  color: var(--color-muted);
}

/* ── Stepper wizard (§4.5) ───────────────────────────────────────────────── */
.cx-stepper {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
}

.cx-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.cx-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  flex: none;
}

.cx-step.is-active {
  color: var(--color-heading);
}

.cx-step.is-active .cx-step__num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.cx-step.is-done {
  color: var(--color-body);
}

.cx-step.is-done .cx-step__num {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  background: var(--color-primary-light);
}

.cx-step__connector {
  flex: 1;
  height: 2px;
  min-width: 24px;
  margin: 0 12px;
  background: var(--color-border);
}

.cx-step__connector.is-done {
  background: var(--color-primary);
}

/* ── Preview documento (§8 / I: hoja, tipografía documento, amber faltantes) ── */
.cx-doc-preview {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 40px 44px;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.7;
  color: var(--color-body);
  overflow: auto;
  max-height: 72vh;
}

.cx-doc-preview p {
  margin: 0 0 14px;
}

.cx-doc-preview .cx-doc-var {
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.cx-doc-preview .cx-unresolved {
  background: var(--status-sent-bg);
  color: var(--status-sent-text);
  border-radius: 4px;
  padding: 0 4px;
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
}

.cx-doc-preview__note {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 8px;
}

/* ── Dropzone (§4.4) ─────────────────────────────────────────────────────── */
.cx-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cx-dropzone:hover,
.cx-dropzone:focus-visible,
.cx-dropzone.is-over {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.cx-dropzone i {
  font-size: 32px;
  color: var(--color-muted);
}

.cx-dropzone__title {
  display: block;
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
  margin-top: 6px;
}

.cx-dropzone__link {
  font-size: var(--font-size-sm);
}

.cx-dropzone__hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 8px;
}

/* ── File-card (§4.4) ────────────────────────────────────────────────────── */
.cx-filecard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.cx-filecard + .cx-filecard {
  margin-top: 10px;
}

.cx-filecard > i {
  font-size: 1.4rem;
  color: var(--color-muted);
  flex: none;
}

.cx-filecard__body {
  flex: 1;
  min-width: 0;
}

.cx-filecard__name {
  display: block;
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-filecard__meta {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.cx-filecard__state {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.cx-filecard__state--ok { color: var(--status-signed-text); }
.cx-filecard__state--err { color: var(--status-expired-text); }

.cx-filecard.is-error {
  border-color: var(--status-expired-text);
  background: color-mix(in srgb, var(--status-expired-bg) 45%, transparent);
}

/* ── Toasts (§5.3) ───────────────────────────────────────────────────────── */
.cx-toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1090;
  max-width: min(420px, calc(100vw - 40px));
}

.cx-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  animation: cx-slidein 150ms ease;
}

@keyframes cx-slidein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.cx-toast > i {
  font-size: 1.1rem;
  margin-top: 1px;
  flex: none;
}

.cx-toast--ok > i { color: var(--status-signed-text); }
.cx-toast--error > i { color: var(--status-expired-text); }

.cx-toast__body {
  flex: 1;
}

.cx-toast__actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.cx-toast__actions button {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  text-decoration: underline;
  cursor: pointer;
}

.cx-toast__close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 1rem;
  line-height: 1;
}

/* ── Skeleton (DF-8) ─────────────────────────────────────────────────────── */
.cx-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.cx-skeleton--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-bg) 65%, transparent), transparent);
  animation: cx-shimmer 1.6s infinite;
}

@keyframes cx-shimmer {
  100% { transform: translateX(100%); }
}

.cx-skeleton--text { height: 14px; margin: 8px 0; }
.cx-skeleton--title { height: 22px; width: 45%; margin: 4px 0 12px; }
.cx-skeleton--block { height: 180px; border-radius: var(--radius-md); }
.cx-skeleton--row { height: 52px; border-radius: 0; border-bottom: 1px solid var(--color-border); }

/* ── Empty states (§5) ──────────────────────────────────────────────────── */
.cx-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.cx-empty i {
  font-size: 48px;
  color: var(--color-muted);
}

.cx-empty h3 {
  margin: 14px 0 6px;
  font-size: var(--font-size-lg);
}

.cx-empty p {
  margin: 0 auto 18px;
  max-width: 460px;
  color: var(--color-body);
  font-size: var(--font-size-sm);
}

.cx-empty .cx-empty__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.cx-field {
  margin-bottom: 16px;
}

.cx-field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  margin-bottom: 6px;
}

.cx-app .form-control,
.cx-app .form-select {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  padding: 9px 12px;
  min-height: 42px;
  color: var(--color-heading);
  background-color: var(--color-bg);
}

.cx-app .form-control:focus,
.cx-app .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.cx-app textarea.form-control {
  min-height: auto;
}

.cx-field__error {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--status-expired-text);
  margin-top: 5px;
}

.cx-field.has-error .form-control,
.cx-field.has-error .form-select {
  border-color: var(--status-expired-text);
}

.cx-field.has-error .cx-field__error {
  display: block;
}

.cx-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 5px;
}

/* ── Definition list (S4 Datos) ──────────────────────────────────────────── */
.cx-dl {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cx-dl dt {
  padding: 12px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.cx-dl dd {
  margin: 0;
  padding: 12px 16px;
  color: var(--color-heading);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border);
}

.cx-dl dt:last-of-type,
.cx-dl dd:last-of-type {
  border-bottom: 0;
}

.cx-dl dd.cx-data { font-size: var(--font-size-sm); }

/* ── Tabs S4 ─────────────────────────────────────────────────────────────── */
.cx-app .nav-tabs {
  border-bottom: 1px solid var(--color-border);
  gap: 4px;
}

.cx-app .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cx-app .nav-tabs .nav-link:hover {
  color: var(--color-heading);
  border-bottom-color: var(--color-border);
}

.cx-app .nav-tabs .nav-link.active {
  color: var(--color-primary-text);
  border-bottom: 2px solid var(--color-primary);
  background: transparent;
  font-weight: var(--font-weight-semibold);
}

/* ── Banner versión S5 / congelado ──────────────────────────────────────── */
.cx-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.cx-banner i { font-size: 1.05rem; }

.cx-banner--version {
  background: var(--status-active-bg);
  color: var(--status-active-text);
}

.cx-banner--frozen {
  background: var(--status-sent-bg);
  color: var(--status-sent-text);
}

/* ── Feed auditoría / historial (§4.9) ───────────────────────────────────── */
.cx-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cx-feed__item {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border);
}

.cx-feed__item:last-child { border-bottom: 0; }

.cx-feed__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-body);
  flex: none;
}

.cx-feed__body { flex: 1; min-width: 0; }

.cx-feed__text {
  color: var(--color-heading);
  font-size: var(--font-size-sm);
}

.cx-feed__time {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Feed auditoría — etiquetas ricas: actor en semibold + fila meta con chip de
   módulo y detalle. Tokens existentes solamente (dark via pares --color-*). */
.cx-feed__actor {
  font-weight: var(--font-weight-semibold);
}

.cx-feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  min-width: 0;
}

/* Chip de módulo (pill neutra outline, patrón cx-type-badge): cada item del
   feed declara su módulo — Contrato/Plantilla/Usuario/Documento/Sesión/Acceso. */
.cx-modchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.cx-modchip i { font-size: 0.7rem; }

.cx-feed__detail {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-body);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cx-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 20px;
}

.cx-panel + .cx-panel,
.cx-block + .cx-block { margin-top: 20px; }

.cx-panel__title {
  font-size: var(--font-size-lg);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subtítulo de panel (feed auditoría: "Actividad de todos los módulos").
   Compensa el margin-bottom del título para quedar pegado a él. */
.cx-panel__subtitle {
  margin: -10px 0 12px;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

/* Cards de plantilla (wizard paso 1) */
.cx-tcard {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cx-tcard:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

.cx-tcard h3 { font-size: var(--font-size-base); }
.cx-tcard p { font-size: var(--font-size-sm); margin: 6px 0 10px; }

.cx-tcard__vars {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Login (S1) */
.cx-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--color-bg-alt);
}

.cx-login__card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 36px 32px;
}

.cx-login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: 4px;
}

.cx-login__sub {
  text-align: center;
  color: var(--color-body);
  font-size: var(--font-size-sm);
  margin: 0 0 24px;
}

.cx-login__error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--radius-sm);
  background: var(--status-expired-bg);
  color: var(--status-expired-text);
  font-size: var(--font-size-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.cx-login__error.is-visible { display: flex; }

.cx-login__foot {
  text-align: center;
  margin-top: 18px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cx-login__hint {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Modal diff/motivo */
.cx-app .modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Stat cards mínimas S2 (solo resumen textual, no KPI decorativo — D7) */
.cx-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-family: var(--font-family-data);
}

/* Paginación */
.cx-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ── Responsive < 992: sidebar offcanvas, wizard vertical ──────────────── */
@media (max-width: 991.98px) {
  .cx-shell {
    grid-template-columns: 1fr;
  }

  .cx-burger {
    display: inline-flex;
  }

  .cx-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 264px;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-md);
  }

  .cx-sidebar.is-open {
    transform: none;
  }

  .cx-scrim.is-open {
    display: block;
  }

  .cx-content { padding: 16px; }
}

/* ── Responsive < 768: tabla → cards colapsables ────────────────────────── */
@media (max-width: 767.98px) {
  .cx-tablewrap { border: 0; background: transparent; }

  .cx-table thead { display: none; }

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

  .cx-table tbody tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    background: var(--color-bg);
    padding: 6px 0;
  }

  .cx-table tbody tr.rowlink:hover { background: var(--color-bg); }

  .cx-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .cx-table td:last-child { border-bottom: 0; }

  .cx-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: none;
  }

  .cx-table td.cx-cell--full {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .cx-table td.cx-cell--full::before { display: none; }

  .cx-rowactions { justify-content: flex-start; }

  /* Diff apilado (§6.3) */
  .cx-diff__row {
    grid-template-columns: 1fr;
  }

  .cx-diff__head { display: none; }

  .cx-diff__cell--field {
    background: var(--color-bg-alt);
    padding-top: 10px;
  }

  .cx-diff__cell--before.is-removed { text-decoration: line-through; }

  .cx-diff__cell--before::before { content: "Antes: "; opacity: 0.7; }
  .cx-diff__cell--after::before { content: "Después: "; opacity: 0.7; }

  /* Stepper vertical */
  .cx-stepper { flex-direction: column; gap: 8px; }

  .cx-step__connector {
    display: none;
  }

  .cx-doc-preview { padding: 22px 18px; }
}

/* ==========================================================================
   E6 — Anexos: wizard diff lado a lado (§4.3 DESIGN-ANNEX), detalle anexo
   (breadcrumb + badge + header distintivo), heredado readonly, pill padre.
   Tokens existentes solamente; dark mode via pares --status-*/--color-*.
   ========================================================================== */

/* ── Diff lado a lado: grid 2 col 50/50 + divisor flecha ────────────────── */
.cx-diff-side__row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

.cx-diff-side__row--head {
  margin-bottom: 12px;
}

.cx-diff-side__panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  min-width: 0; /* sin overflow 375: el texto envuelve */
  overflow-wrap: break-word;
}

.cx-diff-side__panel--before {
  background: var(--color-bg-alt); /* congelado: superficie alternativa */
}

.cx-diff-side__panel--after {
  border-color: color-mix(in srgb, var(--status-signed-text) 45%, var(--color-border));
}

.cx-diff-side__panel--label {
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  background: var(--color-bg-alt);
}

.cx-diff-side__clause {
  margin: 0 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.cx-diff-side__body {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

/* Tachado (antes): --color-body ≥4.5:1 sobre bg-alt en ambos modos (A1). */
.cx-diff-side__val--old {
  text-decoration: line-through;
  color: var(--color-body);
  font-family: var(--font-family-data); /* D3: los datos viajan en Space Grotesk */
}

.cx-diff-side__val--new {
  background: color-mix(in srgb, var(--status-signed-bg) 40%, transparent);
  color: var(--color-heading);
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  border-radius: 4px;
  padding: 0 4px;
}

.cx-diff-side__val--none {
  color: var(--color-muted);
  font-style: italic;
}

.cx-diff-side__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* Strip resumen + microcopy D-X6 */
.cx-diff-side__strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--status-signed-bg) 25%, transparent);
  color: var(--color-heading);
  font-size: var(--font-size-sm);
}

.cx-diff-side__strip > i { color: var(--status-signed-text); margin-top: 2px; }

.cx-diff-side__strip--empty {
  background: var(--color-bg-alt);
  color: var(--color-body);
}

.cx-diff-side__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.cx-diff-side__note > i { margin-top: 2px; }

/* ── Breadcrumb + badges anexo ───────────────────────────────────────────── */
.cx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.cx-breadcrumb a {
  color: var(--color-body);
  text-decoration: none;
}

.cx-breadcrumb a:hover {
  color: var(--color-heading);
  text-decoration: underline;
}

.cx-breadcrumb [aria-current="page"] {
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
}

.cx-annex-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cx-annex-badge--type {
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-body);
}

/* Header anexo distintivo: acento lateral, no color nuevo (regla C3/C6) */
.cx-annex-header {
  border-left: 3px solid var(--color-primary);
  padding-left: 16px;
}

.cx-referencia {
  border-left: 3px solid var(--color-border);
}

/* Pill ANEXOS (n) en header del padre — outline neutro, sin color (§2.2) */
.cx-annex-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cx-annex-pill i {
  font-size: 0.75rem;
}

/* ── Contexto persistente del wizard (§4: nunca perder el contrato base) ─── */
.cx-annex-context {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: var(--font-size-sm);
  color: var(--color-body);
  flex-wrap: wrap;
}

.cx-annex-context > i {
  color: var(--status-signed-text);
}

/* ── Sección heredado readonly (paso 2 — §4.2 "tooltip heredado") ───────── */
.cx-readonly {
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  padding: 16px 18px;
}

.cx-readonly__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-base);
  margin-bottom: 10px;
  color: var(--color-heading);
}

.cx-readonly__title > i { color: var(--color-muted); }

.cx-readonly__dl {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 0;
  margin: 0;
}

.cx-readonly__dl dt {
  padding: 6px 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.cx-readonly__dl dd {
  margin: 0;
  padding: 6px 0;
  font-size: var(--font-size-sm);
  color: var(--color-body);
  overflow-wrap: break-word;
}

/* Icono de tipo en cards del paso 1 (bi-calendar-range / bi-cash-coin / bi-door-open) */
.cx-tcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--status-signed-text);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* ── Responsive < 768: diff apilado (Después por defecto abajo), dl stack ── */
@media (max-width: 767.98px) {
  .cx-diff-side__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cx-diff-side__arrow {
    display: none;
  }

  .cx-diff-side__panel--before::before {
    content: "Contrato vigente";
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-bottom: 6px;
  }

  .cx-diff-side__panel--after::before {
    content: "Anexo propuesto";
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--status-signed-text);
    margin-bottom: 6px;
  }

  .cx-diff-side__row--head {
    display: none; /* las etiquetas viven en cada panel apilado */
  }

  .cx-readonly__dl {
    grid-template-columns: 1fr;
  }

  .cx-readonly__dl dt {
    padding-bottom: 0;
  }
}

/* ══ E7: Cronología unificada (timeline-stream) ════════════════════════════ */
/* Prefijo .cx-crono propio: .cx-timeline/.cx-tl-* belong al feed Versiones. */

/* Banner vigencia efectiva (meta.effective_end_date ≠ end_date del contrato) */
.cx-crono__banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--status-signed-text);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-crono__banner > i {
  color: var(--status-signed-text);
}

.cx-crono__banner strong {
  font-family: var(--font-family-data);
  color: var(--color-heading);
}

.cx-crono__banner-hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* ── Strip mini-cards de anexos (scroll-x con snap, §3.7) ─────────────────── */
.cx-crono-strip {
  margin-bottom: 20px;
}

.cx-crono-strip__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cx-crono-strip__cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}

.cx-crono-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  max-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color var(--transition-base);
}

.cx-crono-card:hover {
  border-color: var(--color-primary);
}

.cx-crono-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.cx-crono-card__code {
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  white-space: nowrap;
}

.cx-crono-card__type {
  font-size: var(--font-size-xs);
  color: var(--color-body);
}

.cx-crono-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cx-crono-card__ver {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* ── Eje central: items cronológicos DESC (§3.1) ──────────────────────────── */
.cx-crono {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  position: relative;
}

.cx-crono::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.cx-crono-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
}

.cx-crono-item__icon {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: 50%; /* anexo → cuadrado (entidad distinta, §3.2) */
  background: var(--color-bg);
  color: var(--color-body);
  font-size: 0.75rem;
}

.cx-crono-item__icon--annex {
  border-radius: 6px;
}

.cx-crono-item__body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.cx-crono-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cx-crono-item__ver {
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.cx-crono-item__when {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  cursor: help; /* tooltip nativo = fecha completa */
}

/* v0.7 — Pill "Versión actual": sutil, tokens neutros (patrón cx-type-badge),
 * COMPARTIDA por timeline-stream (cronología) y timeline (Versiones). Antes
 * ambas usaban cx-badge--active ("Vigente") y colisionaban con el ESTADO del
 * contrato. El halo .is-current de cada timeline sigue marcando la vigencia. */
.cx-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.cx-current-pill i {
  font-size: 0.7rem;
  color: var(--color-muted);
}

.cx-crono-item__summary {
  margin: 2px 0 4px;
  font-size: var(--font-size-sm);
  color: var(--color-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v0.7 — Actor chip: círculo con inicial + @username muted al lado (mismo
 * tamaño de fuente que __when). Antes la inicial quedaba como letra flotante. */
.cx-crono-item__actor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  vertical-align: middle;
}

.cx-crono-item__actor-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-alt);
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-body);
}

.cx-crono-item__actor-user {
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Halo vigencia: fondo tintado del par --status-active + borde (§3.3-1) */
.cx-crono-item.is-current .cx-crono-item__body {
  background: color-mix(in srgb, var(--status-active-text) 8%, transparent);
  border-left: 3px solid var(--status-active-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 10px;
  margin: -8px 0 0 -13px; /* el halo nace en el eje, sin mover el nodo */
}

/* ── Thread de anexo: lane con borde-left neutro, SIN color por thread ────── */
.cx-crono-thread {
  position: relative;
  padding-bottom: 18px;
}

.cx-crono-thread__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  text-align: left;
}

.cx-crono-thread__head:hover {
  border-color: var(--color-primary);
}

.cx-crono-thread__head:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.cx-crono-thread__glyph {
  color: var(--color-body);
}

.cx-crono-thread__code {
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
}

.cx-crono-thread__type {
  color: var(--color-body);
}

.cx-crono-thread__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.cx-crono-thread__chev {
  margin-left: auto;
  color: var(--color-muted);
  transition: transform var(--transition-base);
}

.cx-crono-thread__head[aria-expanded="false"] .cx-crono-thread__chev {
  transform: rotate(-90deg);
}

/* Colapso animado sutil; reduced-motion lo apaga más abajo (§3.7) */
.cx-crono-thread__body {
  overflow: hidden;
  max-height: 4000px;
  transition: max-height 250ms ease, opacity 200ms ease;
}

.cx-crono-thread__body.is-collapsed {
  max-height: 0;
  opacity: 0;
}

/* Sub-eje indentado: segunda línea vertical 1px más tenue (§3.4) */
.cx-crono-thread .cx-crono {
  margin: 10px 0 0 10px;
}

.cx-crono-thread .cx-crono::before {
  left: 8px;
  width: 1px;
  opacity: 0.6;
}

.cx-crono-thread .cx-crono-item__icon {
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
}

/* ── Slot anexos vacío (dashed, §3.6) + cargar más ────────────────────────── */
.cx-crono-slot {
  margin-top: 4px;
  padding: 18px 16px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-body);
}

.cx-crono-slot > i {
  font-size: 1.8rem;
  color: var(--color-muted);
}

.cx-crono-slot h3 {
  margin: 8px 0 4px;
  font-size: var(--font-size-base);
  color: var(--color-heading);
}

.cx-crono-slot p {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
}

.cx-crono__more {
  display: flex;
  justify-content: center;
  margin: 2px 0 16px;
}

/* ── Responsive 375: eje compacto a la izquierda, items full width ────────── */
@media (max-width: 420px) {
  .cx-crono {
    padding-left: 12px;
  }

  .cx-crono::before {
    left: 22px;
  }

  .cx-crono-item {
    gap: 8px;
  }

  .cx-crono-item__summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .cx-crono-card {
    min-width: 132px;
  }
}

/* §3.7: reduced-motion = colapso sin animación (display directo). El bloque
   global de cx-base.css ya neutraliza transiciones; esto lo hace explícito. */
@media (prefers-reduced-motion: reduce) {
  .cx-crono-thread__body,
  .cx-crono-thread__chev,
  .cx-crono-card {
    transition: none;
  }
}

/* ══ E8: Tipos de contrato + asignaciones ordenadas (UX-ORDER §2-3) ═════════
   Tokens existentes solamente (dark via pares --color-*/--status-*); el badge
   de tipo es NEUTRO (outline, sin color) para no competir con el estado. */

/* Badge tipo tabla/cards — outline neutro + icono (par subtle, NO arcoíris) */
.cx-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.cx-type-badge i {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* Indicador cardinalidad Asignados: bi-person 1 / bi-people N / bi-person-x 0 */
.cx-assign-ind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family-data);
  color: var(--color-body);
  white-space: nowrap;
}

.cx-assign-ind.is-empty i {
  color: var(--status-expired-text); /* señal de acción suave, no dato neutro */
}

/* Focus visible para TODAS las chips (estado y tipo) — antes ausente */
.cx-chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ── Card persona destacada (laboral / 1 asignado — UX-ORDER §3.3) ───────── */
.cx-person-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.cx-person-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  flex: none;
}

.cx-person-card__avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.cx-person-card__body {
  flex: 1;
  min-width: 0;
}

.cx-person-card__name {
  margin: 0 0 4px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.cx-person-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-person-card__meta i {
  color: var(--color-muted);
}

.cx-person-card .cx-iconbtn {
  flex: none;
  align-self: center;
}

/* Card hueca dashed — laboral sin responsable / cuadrilla vacía (§3.3/§3.4) */
.cx-person-empty {
  padding: 22px 18px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-body);
}

.cx-person-empty > i {
  font-size: 1.8rem;
  color: var(--color-muted);
}

.cx-person-empty h3 {
  margin: 8px 0 4px;
  font-size: var(--font-size-base);
  color: var(--color-heading);
}

.cx-person-empty p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* ── Cuadrilla: lista ordenada A-Z (obra/servicios — UX-ORDER §3.4) ───────── */
.cx-crew {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cx-crew__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border);
}

.cx-crew__item:last-child {
  border-bottom: 0;
}

.cx-crew__body {
  flex: 1;
  min-width: 0;
}

.cx-crew__name {
  margin: 0 0 2px;
  color: var(--color-heading);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cx-crew__item .cx-iconbtn {
  flex: none;
}

/* Zona de asignación (select + botón admin / hint gestor) */
.cx-assignzone {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ── Wizard paso 1: grupos por categoría (UX-ORDER §2.3E) ─────────────────── */
.cx-tgroup {
  margin-bottom: 24px;
}

.cx-tgroup:last-child {
  margin-bottom: 0;
}

.cx-tgroup__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.cx-tgroup__title i {
  color: var(--color-body);
}

/* Badges agrupados en meta de cards my-contracts (tipo + anexos) */
.cx-wcard__badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── E8 responsive < 768 / 375 ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Las columnas nuevas (Tipo, ANEXOS) ya viven en el transform tabla→cards
     vía data-label; solo asegura que la pill no estire la card. */
  .cx-table .cx-annex-pill {
    margin-top: 2px;
    align-self: flex-start;
  }

  .cx-person-card {
    flex-wrap: wrap;
  }

  .cx-person-card .cx-iconbtn {
    margin-left: auto;
  }

  .cx-crew__item {
    flex-wrap: wrap;
  }

  .cx-assignzone .cx-field {
    min-width: 100%;
  }
}

@media (max-width: 420px) {
  .cx-person-card__name {
    font-size: var(--font-size-base);
    overflow-wrap: break-word;
  }

  .cx-person-card__meta,
  .cx-crew__name {
    font-size: var(--font-size-xs);
  }

  .cx-type-badge {
    padding: 2px 7px;
  }
}

/* ==========================================================================
   v0.3 H2 — Ayuda (drawer + índice), import .md IA, editor cláusulas, DOCX.
   Tokens existentes solamente; dark mode via pares --color-*/--status-*.
   ========================================================================== */

/* ── Botón Ayuda topbar: icono siempre, label desde 768px ────────────────── */
.cx-helpbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-body);
}

.cx-helpbtn:hover {
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

.cx-helpbtn__label {
  display: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 768px) {
  .cx-helpbtn__label { display: inline; }
}

.cx-helpbtn:focus-visible,
.cx-linkbtn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ── Drawer ayuda (offcanvas derecho, tokens propios) ────────────────────── */
.cx-help-drawer {
  width: min(420px, 92vw);
  border-left: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-body);
}

.cx-help-drawer .offcanvas-header {
  border-bottom: 1px solid var(--color-border);
}

.cx-help-drawer .offcanvas-title {
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
}

.cx-help-drawer .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cx-help-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-decoration: none;
}

.cx-help-more:hover {
  background: var(--color-bg-alt);
}

/* mini-md: tipografía contenida del contenido .md */
.cx-mini-md { font-size: var(--font-size-sm); line-height: 1.65; }

.cx-mini-md h1 {
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 6px;
}

.cx-mini-md h2 {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
  margin: 16px 0 6px;
}

.cx-mini-md p { margin: 0 0 8px; }

.cx-mini-md ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.cx-mini-md li { margin-bottom: 4px; }

.cx-mini-md blockquote {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-body);
}

.cx-mini-md a {
  color: var(--color-primary-text);
  text-decoration: underline;
}

/* ── Banner onboarding ayuda ─────────────────────────────────────────────── */
.cx-help-onboard {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-help-onboard a {
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  white-space: nowrap;
}

.cx-help-onboard button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px;
}

/* ── Página índice /help ─────────────────────────────────────────────────── */
.cx-helppage {
  min-height: 100vh;
  padding: 32px 20px 48px;
  background: var(--color-bg-alt);
}

.cx-helppage__inner {
  max-width: 780px;
  margin: 0 auto;
}

.cx-helppage__back {
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
}

.cx-helppage__title {
  font-size: var(--font-size-2xl);
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

.cx-helppage__intro {
  max-width: 620px;
  color: var(--color-body);
  margin-bottom: 18px;
}

.cx-helppage__h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
  margin: 28px 0 14px;
}

.cx-helppage__foot {
  margin-top: 28px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.cx-helpindex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.cx-helpindex__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  min-height: 38px;
}

.cx-helpindex__link:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-heading);
}

.cx-helpindex__link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.cx-helpmod { margin-bottom: 14px; scroll-margin-top: 16px; }

.cx-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cx-guide__steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-guide__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  flex: none;
}

.cx-guide__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-text);
  text-decoration: underline;
}

.cx-faq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  margin-bottom: 8px;
}

.cx-faq summary {
  padding: 12px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.cx-faq summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.cx-faq p {
  margin: 0;
  padding: 0 16px 12px;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

/* ── Import .md: callout IA, editor con gutter, feedback, chips ──────────── */
.cx-import-callout {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--status-signed-text);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--status-signed-bg) 22%, var(--color-bg));
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-import-callout strong {
  color: var(--color-heading);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cx-import-callout ol { margin: 0; padding-left: 20px; }

.cx-import-editor {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cx-import-editor:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.cx-import-gutter {
  flex: none;
  width: 44px;
  padding: 9px 6px;
  overflow: hidden;
  text-align: right;
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-muted);
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  user-select: none;
}

.cx-import-gutter span { display: block; }

.cx-import-gutter span.is-error {
  color: #FFFFFF;
  background: var(--status-expired-text);
  border-radius: 3px;
  font-weight: var(--font-weight-semibold);
}

.cx-import-src {
  border: 0;
  border-radius: 0;
  font-family: var(--font-family-data);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  resize: vertical;
  min-height: 220px;
}

.cx-import-src:focus { box-shadow: none; }

.cx-import-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cx-import-chips .cx-chip {
  cursor: default;
  min-height: 32px;
  padding: 4px 11px;
}

.cx-import-chips .cx-chip strong { font-weight: var(--font-weight-semibold); }

.cx-import-feedback { margin-top: 10px; }

.cx-import-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.cx-import-status.is-ok { color: var(--status-signed-text); font-weight: var(--font-weight-medium); }
.cx-import-status.is-error { color: var(--status-expired-text); font-weight: var(--font-weight-medium); }

.cx-import-err {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
  font-size: var(--font-size-sm);
  color: var(--status-expired-text);
}

.cx-import-err__line {
  flex: none;
  min-width: 34px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--status-expired-bg);
  color: var(--status-expired-text);
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.cx-import-warn {
  margin: 0 0 6px;
  font-size: var(--font-size-sm);
  color: var(--status-sent-text);
}

.cx-import-sub {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
  margin: 14px 0 8px;
}

.cx-import-preview { max-height: 40vh; margin-bottom: 6px; }

.cx-import-footer {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.cx-import-recover {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  font-size: var(--font-size-xs);
}

.cx-import-recover a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-body);
  text-decoration: underline;
}

.cx-import-recover a:hover { color: var(--color-heading); }

.cx-linkbtn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary-text);
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  cursor: pointer;
}

.cx-import-recover .cx-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-body);
}

.cx-import-actions { display: flex; gap: 8px; }

.cx-import-conflict-options { display: flex; flex-direction: column; gap: 10px; }

.cx-import-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.cx-import-opt input[type="radio"] { flex: none; }

.cx-import-opt .form-control { max-width: 320px; min-height: 36px; }

/* ── Editor de cláusulas (contract-edit, avanzado colapsable) ────────────── */
.cx-clauses {
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.cx-clauses > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  cursor: pointer;
  min-height: 48px;
  list-style: none;
}

.cx-clauses > summary::-webkit-details-marker { display: none; }

.cx-clauses > summary::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: bootstrap-icons;
  margin-left: auto;
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.cx-clauses[open] > summary::after { transform: rotate(180deg); }

.cx-clauses > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.cx-clauses__hint {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-muted);
}

.cx-clauses__ta {
  font-family: var(--font-family-data);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  min-height: 300px;
  resize: vertical;
}

/* Diff de cuerpo: 2 columnas verticales, texto plano pre-wrap */
.cx-bodydiff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cx-bodydiff__col { min-width: 0; }

.cx-bodydiff__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.cx-bodydiff__label--new { color: var(--status-signed-text); }

.cx-bodydiff__pre {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow: auto;
}

.cx-bodydiff__pre--new {
  background: color-mix(in srgb, var(--status-signed-bg) 18%, var(--color-bg));
  border-color: color-mix(in srgb, var(--status-signed-text) 40%, var(--color-border));
  color: var(--color-heading);
}

.cx-bodydiff--mini .cx-bodydiff__pre { max-height: 120px; }

/* Badge «cuerpo editado» (timeline versiones) */
.cx-badge--edited {
  background: var(--status-sent-bg);
  color: var(--status-sent-text);
}

.cx-badge--edited i { font-size: 0.7rem; }

/* Enlace discreto de ayuda en empties + links legales del sidebar */
.cx-empty__help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--font-size-sm);
  color: var(--color-body);
  text-decoration: underline;
}

.cx-empty__help:hover { color: var(--color-heading); }

.cx-empty__help:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.cx-sidebar__legal-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Responsive < 768 / 375 ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .cx-bodydiff { grid-template-columns: 1fr; }

  .cx-import-footer { flex-direction: column; align-items: stretch; }

  .cx-import-actions { justify-content: flex-end; }

  .cx-helppage { padding: 20px 14px 36px; }
}

@media (max-width: 420px) {
  .cx-import-gutter { width: 34px; }

  .cx-import-recover { gap: 3px 8px; }
}

/* Reduced motion: el chevron del editor y el gutter no animan nada esencial. */
@media (prefers-reduced-motion: reduce) {
  .cx-clauses > summary::after { transition: none; }
}

/* ── Diálogos styled (cxConfirm/cxPrompt — components/dialog.js) ─────────── */
.cx-dialog-overlay {
  position: fixed;
  inset: 0;
  /* Encima de navbar (1030), offcanvas (1045), modal BS (1055) y toasts (1090) */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  animation: cx-dialog-fade 150ms ease;
}

.cx-dialog {
  width: min(420px, 92vw);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 22px;
  animation: cx-dialog-pop 180ms ease;
}

.cx-dialog__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cx-dialog__head > i {
  font-size: 1.25rem;
  color: var(--color-primary-text);
  flex: none;
}

.cx-dialog--danger .cx-dialog__head > i { color: var(--color-danger); }

.cx-dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.cx-dialog__msg {
  margin: 0 0 16px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-body);
  overflow-wrap: anywhere;
}

/* Label asociado al input: visualmente oculto, disponible a screen readers */
.cx-dialog__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cx-dialog__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-heading);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.cx-dialog__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.cx-dialog__input[aria-invalid="true"] { border-color: var(--color-danger); }

.cx-dialog__error {
  margin: 6px 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.cx-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.cx-dialog__btn {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.cx-dialog__btn:hover { background: var(--color-bg-alt); }

.cx-dialog__btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.cx-dialog__btn--primary {
  border-color: var(--color-action-bg);
  background: var(--color-action-bg);
  color: #FFFFFF; /* misma excepción que .btn-primary (texto sobre acción) */
}

.cx-dialog__btn--primary:hover {
  border-color: var(--color-action-hover);
  background: var(--color-action-hover);
  color: #FFFFFF;
}

/* Danger suave: par token bg/text válido en light (#B91C1C s/#FEE2E2) y dark (#FCA5A5 s/#450A0A) */
.cx-dialog__btn--danger {
  border-color: transparent;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.cx-dialog__btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger-bg) 82%, var(--color-danger));
  color: var(--color-danger);
}

@keyframes cx-dialog-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cx-dialog-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  .cx-dialog { padding: 18px 16px; }

  .cx-dialog__actions { flex-direction: column-reverse; }

  .cx-dialog__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-dialog-overlay,
  .cx-dialog { animation: none; }
}